/* Capa visual «El rastro de una decisión» (scripts/build-visuales.py). */

/* Escena en la portada premium: 3:2 nativo, objeto completo también en móvil. */
.fa-premium-cover > .fa-vis-pic,
.fa-premium-cover > .fa-vis-pic img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  opacity: 1;
}

/* La figura premium heredada es 4/5 con picture absoluto: con escena nueva,
   la figura toma la altura real 3:2 y el picture vuelve al flujo. */
figure.fa-premium-cover:has(> .fa-vis-pic) {
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 0 !important;
}
figure.fa-premium-cover > picture.fa-vis-pic {
  position: static !important;
  inset: auto !important;
  transform: none !important;
}
figure.fa-premium-cover:has(> .fa-vis-pic)::after,
figure.fa-premium-cover:has(> .fa-vis-pic)::before {
  content: none !important;
  display: none !important;
}
figure.fa-premium-cover:has(> .fa-vis-pic) > .fa-premium-origin {
  position: relative !important;
  z-index: 3;
  color: rgba(255, 255, 255, 0.9);
  background: #07101c;
  inset: auto !important;
  display: block;
  margin: 0;
  padding: 8px 12px;
  font-size: 0.8125rem;
}

/* Banda con la escena después de la cabecera (EN/PT/ZH, ficha, economía circular). */
.fa-vis-banda {
  padding: clamp(8px, 2vw, 20px) clamp(16px, 4vw, 32px) clamp(20px, 3vw, 36px);
}
.fa-vis-fig {
  max-width: 880px;
  margin: 0 auto;
}
.fa-vis-fig .fa-vis-pic,
.fa-vis-fig img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 12px;
  background: #07101c;
  opacity: 1;
}
.fa-vis-cap {
  margin-top: 8px;
  font-size: 0.8125rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  opacity: 0.75;
}

/* Miniatura decorativa en tarjetas de colección: bajo el sello, sin quitar ancho al texto. */
.esc-item:has(.esc-vis) { grid-template-rows: auto 1fr; row-gap: 10px; }
.esc-item:has(.esc-vis) .esc-item-tx { grid-column: 2; grid-row: 1 / span 2; }
.esc-vis { grid-column: 1; grid-row: 2; width: 64px; }
.esc-vis img { display: block; width: 64px; height: 43px; object-fit: cover; border-radius: 4px; }

/* Fondos sutiles sólo en la cabecera; la lectura conserva fondo sólido. */
html:has(link[data-fa-fondo="papel"]) main > section:first-of-type,
html:has(link[data-fa-fondo="tinta"]) main > section:first-of-type,
html:has(link[data-fa-fondo="papel"]) main .article-hero,
html:has(link[data-fa-fondo="tinta"]) main .article-hero {
  position: relative;
  isolation: isolate;
}
html:has(link[data-fa-fondo="papel"]) main > section:first-of-type::after,
html:has(link[data-fa-fondo="papel"]) main .article-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("/assets/editorial-2026/02-fondo-papel-1536.webp") center / cover no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.45;
}
html:has(link[data-fa-fondo="tinta"]) main > section:first-of-type::after,
html:has(link[data-fa-fondo="tinta"]) main .article-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("/assets/editorial-2026/01-fondo-tinta-1536.webp") right center / cover no-repeat;
  mix-blend-mode: screen;
  opacity: 0.35;
}
@media (max-width: 700px) {
  html:has(link[data-fa-fondo="papel"]) main > section:first-of-type::after,
  html:has(link[data-fa-fondo="papel"]) main .article-hero::after {
    background-image: url("/assets/editorial-2026/02-fondo-papel-640.webp");
  }
  html:has(link[data-fa-fondo="tinta"]) main > section:first-of-type::after,
  html:has(link[data-fa-fondo="tinta"]) main .article-hero::after {
    background-image: url("/assets/editorial-2026/01-fondo-tinta-640.webp");
  }
}

/* La portada premium venía oculta por la regla común de .lec-vis: la escena es
   significativa, así que se muestra en todos los anchos (debajo del texto). */
.lec-vis.fa-premium-article-visual:has(.fa-vis-pic) {
  display: block !important;
  width: 100%;
  max-width: 880px;
  margin-top: clamp(20px, 3vw, 32px);
}
.fa-premium-article-visual:has(.fa-vis-pic) .fa-premium-cover {
  min-height: 0;
  height: auto;
}
section.fa-vis-banda > figure.fa-vis-fig {
  max-width: 880px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.fa-premium-article-visual:has(.fa-vis-pic) { justify-self: start; place-items: start; }
.fa-premium-cover > picture.fa-vis-pic,
.fa-premium-cover > picture.fa-vis-pic > img {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 3 / 2 !important;
  object-fit: cover;
}