/* ═══════════════════════════════════════════════════════════════════
   LA GUANTERA · Revista digital de la FMAAC
   Hoja de estilos v4 · web app con experiencia de revista
   ───────────────────────────────────────────────────────────────────
   Referencia: Creative Giants (creativegiants.art).
   · Portada: la fotografía queda FIJA al viewport; el logotipo
     (ultracondensado, a todo el ancho) y la banda son ventanas que suben
     con el scroll. El logotipo se recorta con mix-blend-mode: screen.
   · Cabecera flotante y transparente: logotipo de la Federación + nombre
     + píldora «Menú». El nombre se oculta al bajar; sobre fondos oscuros
     la marca se invierte.
   · Lienzo hueso (#fffef7), Switzer 300/400, píldoras 1440px, tarjetas e
     imágenes a esquinas vivas, sin sombras.
   · Pliegos (scroll-snap suave), carruseles con contador y línea de
     progreso, lector de pantalla completa, aparición suave al hacer
     scroll, parallax en el Puente. Todo se apaga con «reducir movimiento».
   ═══════════════════════════════════════════════════════════════════ */

/* La marca se sirve desde el propio sitio (antes venía de Google Fonts): carga antes y no
   depende de un tercero. Switzer, el texto, sigue llegando de Fontshare sin bloquear la página. */
@font-face { font-family: "Six Caps"; font-style: normal; font-weight: 400; font-display: block; src: url(../fuentes/six-caps-latin-400-normal.woff2) format("woff2"); }

:root {
  /* ── Color ── */
  --bone: #fffef7;
  --ink: #000000;
  --graphite: #666666;
  --ash: #aaaaaa;
  --charcoal: #4d4c4a;
  --magenta: #8a0467;
  --teal: #03624c;
  --blue: #a5c8eb;
  --pink: #ffacea;
  --mint: #a5ebd6;
  --navy: #101731;
  --yellow: #ffd001;
  --hairline: rgba(0, 0, 0, 0.14);
  --hairline-inv: rgba(255, 254, 247, 0.16);

  /* ── Tipografía ── */
  --fuente: "Switzer", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-marca: "Six Caps", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, sans-serif;
  --ligera: 300;
  --regular: 400;

  /* ── Medidas y movimiento ── */
  --margen: 16px;
  --radio-pildora: 1440px;
  --alto-cabecera: 64px;
  --alto-cabecera-inicio: 136px;   /* con los dos logotipos grandes, al inicio de la página */
  --alto-cabecera-compacta: 96px;  /* cabecera al hacer scroll: logotipo de 72 px */
  --ancho-texto: 40rem;
  --seccion: 56px;
  --duracion: 220ms;
  --suave: cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Alto de cada pantalla = lo que de verdad se ve en ese momento (100dvh): con las barras de Safari a la
   vista o escondidas, la sección ocupa exactamente la pantalla visible. Así nunca es más alta que lo
   que se ve (no se puede «mover» dentro de ella), no se corta lo de abajo y no sobra aire.
   (Antes medía la ventana sin barras, var(--alto-pantalla), y compensaba con --barras: en el Safari de iOS 26
   eso dejaba la sección más alta que la pantalla.) */
:root { --barras: 0px; --alto-pantalla: 100vh; }
@supports (height: 1dvh) { :root { --alto-pantalla: 100dvh; } }
@media (min-width: 48em) { :root { --margen: 32px; --seccion: 72px; --alto-cabecera-inicio: 164px; } }
@media (min-width: 80em) { :root { --margen: 48px; --seccion: 96px; } }

/* ── Alto contraste (Menú → ◐) ── */
:root[data-contraste="alto"] {
  --bone: #ffffff; --graphite: #1a1a1a; --ash: #000000; --charcoal: #000000;
  --hairline: #000000; --hairline-inv: #ffffff;
  --mint: #ffffff; --pink: #ffffff; --blue: #ffffff; --navy: #000000;
  --magenta: #000000; --teal: #000000; --ligera: 400;
}
/* En alto contraste, los textos secundarios de las superficies oscuras (pantallas negras, marino, fotos, pie, menú) van en blanco */
:root[data-contraste="alto"] :is(.oscuro, .hero, .pie, .menu, .visor, .pantalla--foto) { --ash: #ffffff; --graphite: #ffffff; --charcoal: #ffffff; --hairline: rgba(255, 255, 255, 0.55); }
:root[data-contraste="alto"] :is(.oscuro, .hero, .pie, .menu) :is(.marquesina, .candidato, .mapa-tarjeta, .trivia__lista, .mercado__columnas > div) { --ash: #000000; --graphite: #000000; --charcoal: #000000; --hairline: rgba(0, 0, 0, 0.6); }
:root[data-contraste="alto"] .pantalla--foto::after { background: linear-gradient(to top, rgba(0, 0, 0, 0.96) 0%, rgba(0, 0, 0, 0.85) 45%, rgba(0, 0, 0, 0.35) 75%, rgba(0, 0, 0, 0.5) 100%); }
:root[data-contraste="alto"] .pantalla--foto .pantalla__eyebrow, :root[data-contraste="alto"] .hero__bajada, :root[data-contraste="alto"] .hero__sobre .eyebrow { color: #ffffff; }

/* ═══════════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: 112.5%;
  scroll-behavior: smooth;
  scroll-padding-top: 0;   /* las pantallas ocupan la ventana completa; la cabecera es transparente y va encima */
  scroll-snap-type: y mandatory;
  -webkit-text-size-adjust: 100%;
  background: var(--bone);
}
body {
  margin: 0; background: var(--bone); color: var(--ink);
  font-family: var(--fuente); font-weight: var(--regular); font-size: 1rem; line-height: 1.5; letter-spacing: -0.018em;
  -webkit-font-smoothing: antialiased; overflow-wrap: break-word;
}
body.sin-scroll { overflow: hidden; }
h1, h2, h3, h4 { font-weight: var(--ligera); line-height: 1.05; letter-spacing: -0.023em; margin: 0 0 0.5em; color: inherit; text-wrap: balance; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
li { margin-bottom: 0.4em; }
img, picture, svg { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
button { font: inherit; color: inherit; letter-spacing: inherit; }
strong { font-weight: var(--regular); }
::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
[id] { scroll-margin-top: 0; }

.solo-lector { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
.saltar { position: absolute; left: var(--margen); top: -5rem; z-index: 100; background: var(--ink); color: var(--bone); padding: 12px 24px; border-radius: var(--radio-pildora); text-decoration: none; }
.saltar:focus { top: 12px; }

.eyebrow { display: block; margin: 0 0 8px; font-size: 0.8rem; font-weight: var(--regular); line-height: 1.4; letter-spacing: 0.01em; text-transform: uppercase; color: var(--graphite); }
.statement { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); font-weight: var(--ligera); line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 24px; max-width: 18ch; }
.statement--grande { font-size: clamp(1.9rem, 1.2rem + 3.4vw, 3.4rem); max-width: 26ch; margin: 0; }
.intro { color: var(--graphite); max-width: 36rem; margin: 0; text-wrap: pretty; }
.firma { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.01em; color: var(--graphite); margin: 0 0 24px; }
.pendiente { display: inline-block; background: var(--yellow); color: var(--ink); padding: 0.1em 0.6em; border-radius: var(--radio-pildora); font-size: 0.8em; text-transform: uppercase; letter-spacing: 0; }

/* Pliegos: cada sección es una «página» de la revista. Van por encima del medio fijo del hero. */
.pliego { position: relative; z-index: 1; display: flow-root; background: var(--bone); scroll-snap-align: start; padding: var(--seccion) 0 0; }   /* flow-root: sin huecos por márgenes colapsados, que dejarían ver el medio fijo del hero */
.pliego__cabecera { padding: 0 var(--margen); margin-bottom: 32px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.pliego__cabecera > div { min-width: 0; }
.pliego__cabecera .statement { margin-bottom: 12px; }
.oscuro { background: var(--ink); color: var(--bone); }
.oscuro .eyebrow, .oscuro .intro { color: var(--ash); }

/* Tarjetas tocables: toda la tarjeta abre la pieza (imagen o texto) */
html.js [data-abrir-tarjeta] { cursor: pointer; }
html.js [data-abrir-tarjeta]:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }

/* Aparición suave al entrar en pantalla (solo con JS; sin JS todo es visible) */
html.js [data-revelar] { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s var(--suave); transition-delay: var(--retraso, 0ms); }
html.js [data-revelar].visible { opacity: 1; transform: none; }

/* ═══════════════════════════════════════════════════════════════════
   PÍLDORAS Y ETIQUETAS
   ═══════════════════════════════════════════════════════════════════ */
.pildora {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; min-width: 44px; padding: 10px 22px;
  border-radius: var(--radio-pildora); border: 1px solid currentColor; background: transparent; color: inherit;
  font-family: var(--fuente); font-weight: var(--regular); font-size: 1rem; line-height: 1.2; letter-spacing: -0.018em;
  text-decoration: none; text-align: center; cursor: pointer; white-space: nowrap;
  transition: background-color var(--duracion) ease, color var(--duracion) ease, border-color var(--duracion) ease, opacity var(--duracion) ease, transform var(--duracion) var(--suave);
}
.pildora { max-width: 100%; }
@media (max-width: 24em) { .pildora { white-space: normal; } }   /* en un celular muy angosto, el botón largo se parte en dos líneas */
.pildora:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.pildora:active { transform: scale(0.97); }
.oscuro .pildora:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.pildora--negra { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.pildora--negra:hover { background: var(--charcoal); border-color: var(--charcoal); color: var(--bone); }
.pildora--hueso { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.pildora--hueso:hover { background: var(--ash); border-color: var(--ash); color: var(--ink); }
.pildora--chica { min-height: 44px; padding: 8px 16px; font-size: 0.9rem; }
.pildora--circulo { width: 44px; height: 44px; padding: 0; }
.pildora--texto { border-color: transparent; padding-inline: 8px; text-decoration: underline; text-underline-offset: 0.18em; }
.pildora--texto:hover { background: transparent; color: inherit; border-color: transparent; text-decoration-thickness: 2px; }
.pildora[aria-disabled="true"], .pildora:disabled { opacity: 0.3; cursor: not-allowed; }
.pildora[aria-pressed="true"] { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.pildora .flecha { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bone); color: var(--ink); font-size: 0.9em; margin-right: -8px; flex: none; transition: transform var(--duracion) var(--suave); }
.pildora:hover .flecha { transform: translate(2px, -2px); }
.pildora .icono { line-height: 1; }

.etiqueta { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 12px; border-radius: var(--radio-pildora); border: 1px solid var(--ash); font-size: 0.8rem; letter-spacing: 0.01em; text-transform: uppercase; color: inherit; background: transparent; white-space: nowrap; }
.etiqueta--amarilla { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.etiqueta--negra { background: var(--ink); border-color: var(--ink); color: var(--bone); }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ═══════════════════════════════════════════════════════════════════
   CABECERA · flota, transparente; el nombre se oculta al bajar y la
   marca se invierte sobre fondos oscuros (clases que pone el script)
   ═══════════════════════════════════════════════════════════════════ */
.cabecera { position: fixed; top: 0; left: 0; right: 0; z-index: 50; pointer-events: none; }
.cabecera__interior { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: var(--alto-cabecera); padding: 12px var(--margen) 8px; }
.marca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; text-decoration: none; min-height: 44px; flex: 1 1 auto; min-width: 0; pointer-events: auto; color: var(--ink); }
.cabecera__menu { position: absolute; top: 12px; right: var(--margen); pointer-events: auto; z-index: 2; }   /* la cabecera deja pasar los toques (pointer-events: none); el botón NO */
/* El glifo (marca-glifo.svg, hueso) nunca cambia de color; el círculo sí: negro sobre claro, carbón con anillo sobre oscuro */
.marca__logo { position: relative; flex: none; width: 112px; height: 112px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 0 var(--bone); transition: width 0.4s var(--suave), height 0.4s var(--suave), background-color var(--duracion) ease, box-shadow var(--duracion) ease; }
.marca__glifo { position: absolute; inset: 0; width: 100%; height: 100%; }
.marca__eyebrow { flex: 1 1 100%; font-size: clamp(14px, 3.6vw, 16px); line-height: 1.25; letter-spacing: 0.01em; text-transform: uppercase; max-height: 4rem; overflow: hidden; min-width: 0; transition: opacity 0.3s ease, max-height 0.4s var(--suave), transform 0.35s var(--suave); }
.cabecera--desplazada .cabecera__interior { align-items: center; padding-top: 8px; }
.cabecera--desplazada .cabecera__menu { top: 26px; }
.cabecera--desplazada .marca__logo { width: 72px; height: 72px; }
.cabecera--desplazada .marca__eyebrow { opacity: 0; max-height: 0; transform: translateY(-6px); pointer-events: none; }
.cabecera--invertida .marca__logo { background: var(--charcoal); box-shadow: inset 0 0 0 1.5px var(--bone); }
.cabecera--invertida .marca { color: var(--bone); }
.cabecera--invertida .cabecera__menu { background: transparent; color: var(--bone); border-color: var(--bone); }
.cabecera--invertida .cabecera__menu:hover { background: var(--bone); color: var(--ink); }
.cabecera--menu .marca__eyebrow { opacity: 0; max-height: 0; pointer-events: none; }
@media (min-width: 48em) {
  .marca { flex-wrap: nowrap; gap: 20px; padding-right: 120px; }
  .marca__logo { width: 136px; height: 136px; }
  .marca__eyebrow { flex: 0 1 auto; font-size: 20px; max-height: 6rem; }
  .cabecera__interior { align-items: center; padding-top: 16px; }
  .cabecera__menu { top: 16px; }
  .cabecera--desplazada .cabecera__menu { top: 26px; }
}
/* Celular angosto: los dos logotipos un poco más chicos, para no tocar el botón «Menú» */
@media (max-width: 22.5em) { :root { --alto-cabecera-inicio: 120px; } .cabecera:not(.cabecera--desplazada) .marca__logo { width: 96px; height: 96px; } .marca { gap: 8px 10px; } }
/* El emblema de la FIVA, junto al escudo de la FEMAAC y del mismo tamaño */
/* Mismo círculo negro que el escudo de la FEMAAC (y el mismo anillo sobre fondos oscuros): el dorado y el verde del emblema resaltan */
.marca__fiva { position: absolute; left: 3%; top: 3%; width: 94%; height: 94%; object-fit: contain; }
/* Los dos logotipos juntos en UNA píldora de vidrio (al estilo «liquid glass» de Apple), sin círculos
   detrás: el escudo de la FEMAAC y el emblema de la FIVA, a la misma altura. Al bajar se hacen más
   chicos y más transparentes, para no tapar la lectura; al pasar el cursor vuelven a verse plenos. */
.marca__pildora {
  display: inline-flex; align-items: center; gap: 10px; flex: none; padding: var(--pill-pad) 16px var(--pill-pad) 10px; border-radius: 999px;
  background: rgba(255, 254, 247, 0.42);
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
  transition: opacity 0.35s ease, background-color 0.35s ease, padding 0.4s var(--suave), gap 0.4s var(--suave), box-shadow 0.35s ease;
}
/* Selectores reforzados: mandan sobre las reglas de tamaño de los círculos de antes */
.cabecera .marca .marca__pildora .marca__logo { background: transparent; box-shadow: none; border-radius: 0; width: var(--logo); height: var(--logo); }
.cabecera .marca .marca__pildora .marca__logo--fiva { width: calc(var(--logo) * 1.48); }   /* el emblema de la FIVA es más ancho que alto (320 × 216) */
.marca__pildora .marca__fiva { left: 0; top: 0; width: 100%; height: 100%; }
.cabecera--desplazada .marca__pildora { padding: var(--pill-pad) 12px var(--pill-pad) 7px; gap: 6px; opacity: 0.8; background: rgba(255, 254, 247, 0.26); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
.cabecera--invertida .marca__pildora { background: rgba(255, 254, 247, 0.16); border-color: rgba(255, 255, 255, 0.32); }
.marca:hover .marca__pildora, .marca:focus-visible .marca__pildora { opacity: 1; }
/* Medidas de la cabecera en un solo lugar: el tamaño de los logotipos (--logo), el relleno de la
   píldora (--pill-pad) y su distancia al borde de arriba (--cab-arriba). El botón «Menú» se centra
   con ellas, así las dos píldoras quedan siempre alineadas, arriba y al bajar, en cualquier tamaño. */
.cabecera { --logo: 88px; --pill-pad: 8px; --cab-arriba: 12px; }
.cabecera.cabecera--desplazada { --logo: 46px; --pill-pad: 5px; --cab-arriba: 8px; }
@media (min-width: 48em) { .cabecera { --logo: 112px; --cab-arriba: 16px; } .cabecera.cabecera--desplazada { --logo: 54px; --cab-arriba: 8px; } }
@media (min-width: 48em) and (max-height: 860px) { .cabecera:not(.cabecera--desplazada) { --logo: 92px; } }
@media (max-width: 22.5em) { .cabecera:not(.cabecera--desplazada) { --logo: 70px; } }
.cabecera .cabecera__interior { padding-top: var(--cab-arriba); }
.cabecera .cabecera__menu { top: calc(var(--cab-arriba) + (var(--logo) + 2 * var(--pill-pad) + 2px) / 2); translate: 0 -50%; transition: top 0.4s var(--suave), background-color var(--duracion) ease, color var(--duracion) ease, border-color var(--duracion) ease; }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .marca__pildora { background: rgba(255, 254, 247, 0.88); } .cabecera--invertida .marca__pildora { background: rgba(255, 254, 247, 0.7); } }
@media (prefers-reduced-transparency: reduce) { .marca__pildora, .cabecera--desplazada .marca__pildora { opacity: 1; background: var(--bone); } }
.marca__logo--pie { width: 44px; height: 44px; background: var(--charcoal); box-shadow: inset 0 0 0 1.5px var(--bone); }

/* ═══════════════════════════════════════════════════════════════════
   HOJAS · lector (modal) y menú (telón negro bajo la cabecera)
   ═══════════════════════════════════════════════════════════════════ */
.hoja { position: fixed; inset: 0; z-index: 60; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--bone); color: var(--ink); overflow: auto; overscroll-behavior: contain; }
.hoja::backdrop { background: transparent; }
.hoja:not([open]) { display: none; }
.hoja[open] { animation: hoja-entrar 0.4s var(--suave) both; }
@keyframes hoja-entrar { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hoja__cabecera { position: sticky; top: 0; z-index: 2; background: var(--bone); display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--alto-cabecera); padding: 8px var(--margen); }
.hoja__cabecera .eyebrow { margin: 0; }

/* Menú: pantalla completa en negro; la cabecera (z 50) queda encima con «Cerrar» */
.menu {
  position: fixed; inset: 0; z-index: 40; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--ink); color: var(--bone); overflow: auto; overscroll-behavior: contain;
}
.menu:not([open]) { display: none; }
.menu[open] { animation: menu-entrar 0.5s var(--suave) both; }
@keyframes menu-entrar { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
.menu__interior { min-height: 100%; display: flex; flex-direction: column; gap: 32px; padding: calc(var(--alto-cabecera) + 16px) var(--margen) 32px; }
.menu__eyebrow { color: var(--ash); }
.menu__lista { list-style: none; margin: 0; padding: 0; }
.menu__lista li { margin: 0; }
.menu[open] .menu__lista li, .menu[open] .menu__articulos li, .menu[open] .menu__bloque .acciones, .menu[open] .menu__pie { animation: subir 0.7s var(--suave) both; animation-delay: calc(120ms + var(--i, 0) * 45ms); }
.menu__lista li:nth-child(1) { --i: 1; } .menu__lista li:nth-child(2) { --i: 2; } .menu__lista li:nth-child(3) { --i: 3; } .menu__lista li:nth-child(4) { --i: 4; } .menu__lista li:nth-child(5) { --i: 5; } .menu__lista li:nth-child(6) { --i: 6; } .menu__lista li:nth-child(7) { --i: 7; } .menu__lista li:nth-child(8) { --i: 8; } .menu__lista li:nth-child(9) { --i: 9; } .menu__lista li:nth-child(10) { --i: 10; } .menu__lista li:nth-child(11) { --i: 11; }
.menu__articulos li { --i: 6; } .menu__bloque .acciones { --i: 8; } .menu__pie { --i: 9; }
@keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.menu__lista a { display: flex; align-items: baseline; gap: 14px; padding: 2px 0; text-decoration: none; color: var(--bone); font-size: clamp(1.9rem, 1.2rem + 3.6vw, 3.6rem); font-weight: var(--ligera); letter-spacing: -0.035em; line-height: 1.12; transition: opacity var(--duracion) ease, transform var(--duracion) var(--suave); }
.menu__lista a small { font-size: 0.8rem; letter-spacing: 0.04em; color: var(--ash); font-variant-numeric: tabular-nums; min-width: 2ch; }
.menu__lista:hover a:not(:hover) { opacity: 0.45; }
.menu__lista a:hover { transform: translateX(6px); }
.menu__articulos { list-style: none; margin: 0; padding: 0; }
.menu__articulos li { margin: 0; border-top: 1px solid var(--hairline-inv); }
.menu__articulos li:last-child { border-bottom: 1px solid var(--hairline-inv); }
.menu__articulos button { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 10px 0; background: none; border: 0; color: var(--bone); text-align: left; font-size: 0.95rem; letter-spacing: -0.018em; cursor: pointer; }
.menu__articulos button span { color: var(--ash); transition: transform var(--duracion) var(--suave), color var(--duracion) ease; }
.menu__articulos button:hover span { color: var(--bone); transform: translate(3px, -3px); }
.menu__bloque + .menu__bloque { margin-top: 28px; }
.menu__bloque .eyebrow { margin-bottom: 12px; }
.menu .pildora { border-color: var(--charcoal); }
.menu .pildora:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.menu .pildora[aria-pressed="true"] { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.menu__pie { margin-top: auto; padding-top: 24px; border-top: 1px solid var(--hairline-inv); color: var(--ash); font-size: 0.9rem; }
.menu__pie p { margin: 0 0 6px; }
.menu__pie a { color: var(--bone); text-decoration: none; }
.menu__pie a:hover { text-decoration: underline; }
@media (min-width: 64em) {
  .menu__interior { display: grid; grid-template-columns: 1.1fr 0.9fr; grid-template-rows: 1fr auto; column-gap: 64px; padding-top: calc(var(--alto-cabecera) + 40px); }
  .menu__columna--lateral { padding-top: 24px; max-width: 34rem; justify-self: end; width: 100%; }
  .menu__pie { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; }
  .menu__lista a { font-size: clamp(2.4rem, 1.4rem + 2.8vw, 4rem); }
}

.aviso { position: fixed; top: var(--alto-cabecera); left: 0; right: 0; z-index: 49; margin: 0; padding: 12px var(--margen); background: var(--yellow); color: var(--ink); font-size: 0.9rem; }
.aviso[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════════
   PORTADA · medio fijo al fondo; logotipo y banda son ventanas
   ═══════════════════════════════════════════════════════════════════ */
.hero { position: relative; z-index: 0; isolation: isolate; background: var(--charcoal); scroll-snap-align: start; scroll-snap-stop: always; }
.hero__medio { position: fixed; inset: 0; z-index: 0; }
.hero__medio picture { width: 100%; height: 100%; }
.hero__medio img, .hero__medio video { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.hero__cartel {
  position: relative; z-index: 1; margin: 0; padding: calc(var(--alto-cabecera-inicio) + 8px) var(--margen) 18px;
  background: var(--bone); color: #000; mix-blend-mode: screen;      /* negro = ventana a la foto; hueso = hueso */
  /* la foto se ve desenfocada a través de las letras, como en la referencia. El tono (gris cálido,
     algo aclarado) está calibrado para que las letras se vean como con el video original del Ford,
     aunque el video de portada sea oscuro o de colores intensos. NO cambiar sin que se pida. */
  -webkit-backdrop-filter: blur(14px) grayscale(1) sepia(0.3) brightness(1.12) contrast(0.85);
  backdrop-filter: blur(14px) grayscale(1) sepia(0.3) brightness(1.12) contrast(0.85);
}
/* «Revista oficial de la Federación…», sobre el nombre; se va con la portada al desplazarse */
.hero__oficial {
  position: absolute; z-index: 2; left: 0; right: 0; top: calc(var(--alto-cabecera-inicio) + 8px); margin: 0; padding: 0 var(--margen);
  color: var(--ink); font-size: clamp(13px, 3.5vw, 20px); line-height: 1.3; letter-spacing: 0.01em; text-transform: uppercase; text-wrap: balance; pointer-events: none;
}
/* El bloque del nombre empieza en el borde superior de la página (como siempre): así la orilla de su
   desenfoque queda oculta arriba y no dibuja una línea. La leyenda va encima, en su propio espacio;
   el script mide su alto (--alto-oficial) para que el nombre empiece justo debajo. */
.hero__oficial + .hero__cartel { padding-top: calc(var(--alto-cabecera-inicio) + 8px + var(--alto-oficial, 3.4em) + 10px); }
.hero__cartel, .pie__cartel { text-align: center; }
.marca-grande {
  display: inline-block; white-space: nowrap; margin: 0; vertical-align: top;
  font-family: var(--fuente-marca); font-weight: 400; text-transform: uppercase;
  font-size: clamp(56px, 23vw, 360px); line-height: 0.86; letter-spacing: 0.06em;
  -webkit-text-stroke: 0.04em currentColor; color: #000;
}
html.js .hero .marca-grande { animation: cartel-entrar 1.1s var(--suave) both; }
@keyframes cartel-entrar { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.hero__banda { position: relative; z-index: 1; aspect-ratio: 4 / 5; max-height: 72vh; display: flex; flex-direction: column; justify-content: flex-end; }
/* Pausa/reproducción del video de portada: discreto, arriba a la derecha de la banda */
.hero__control { position: absolute; top: 14px; right: max(16px, env(safe-area-inset-right)); z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 254, 247, 0.55); background: rgba(20, 20, 20, 0.42); color: var(--bone); display: grid; place-items: center; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s ease, opacity .2s ease; opacity: .85; }
.hero__control:hover, .hero__control:focus-visible { opacity: 1; background: rgba(20, 20, 20, 0.7); }
.hero__control-icono { width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; box-sizing: border-box; }
.hero__control--pausado .hero__control-icono { width: 0; height: 0; border-left: 13px solid currentColor; border-right: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 4px; }
@media print { .hero__control { display: none; } }
html.js .hero__banda { aspect-ratio: auto; max-height: none; }   /* el JS fija la altura mínima; si el texto es más alto, la banda crece: nunca se monta sobre el logotipo */
/* Desde el primer cuadro, la portada ya llena la pantalla (lo mismo que calcula el JS al arrancar):
   así nada «brinca» cuando el JS termina de medir y de armar las pantallas de abajo. */
html.js .hero { display: flex; flex-direction: column; min-height: 100vh; min-height: var(--alto-pantalla); }   /* igual que cada pantalla: nunca asoma la siguiente */
html.js .hero__banda { flex: 1 0 auto; max-height: 900px; }
html.js .hero__medio { flex: none; }
/* Portada compacta (ventanas anchas y bajas): el logotipo sigue a todo el ancho; el titular ocupa menos */
.hero--compacto .hero__sobre { padding-top: 16px; padding-bottom: 16px; }
.hero--compacto .hero__cartel { padding-bottom: 8px; }
.hero--compacto .hero__titulo { font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.7rem); max-width: 30ch; }
.hero--compacto .hero__bajada { -webkit-line-clamp: 2; margin-bottom: 12px; }
.hero--compacto .hero__acciones .pildora { min-height: 42px; padding-top: 8px; padding-bottom: 8px; }
.hero--compacto .guia-vertical { display: none; }
@media (min-width: 48em) and (max-height: 860px) {
  :root { --alto-cabecera-inicio: 136px; }
  .cabecera:not(.cabecera--desplazada) .marca__logo { width: 108px; height: 108px; }
}
.hero__banda::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0, rgba(0, 0, 0, 0.62) 42%, rgba(0, 0, 0, 0.22) 78%, rgba(0, 0, 0, 0) 100%); pointer-events: none; }
/* Sin línea bajo el nombre: el color hueso del bloque de LA GUANTERA se desvanece suavemente sobre el
   video, en vez de terminar en un corte recto (que en el iPhone se veía como una raya o un escalón).
   -1px: cubre cualquier medio píxel entre los dos bloques. */
.hero__banda { margin-top: -1px; }
.hero__banda::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: clamp(44px, 9vh, 96px); z-index: 1; background: linear-gradient(to bottom, var(--bone) 0, rgba(255, 254, 247, 0.72) 30%, rgba(255, 254, 247, 0.22) 68%, rgba(255, 254, 247, 0) 100%); pointer-events: none; }
:root[data-contraste="alto"] .hero__banda::after { background: linear-gradient(to bottom, var(--bone) 0, rgba(255, 255, 255, 0) 100%); }
.hero__sobre { position: relative; z-index: 2; padding: 56px var(--margen) calc(24px + env(safe-area-inset-bottom) + var(--barras)); color: var(--bone); }
.hero__sobre .eyebrow { color: var(--bone); opacity: 0.85; }
.hero__titulo { font-size: clamp(1.9rem, 1.2rem + 3.4vw, 3.4rem); font-weight: var(--ligera); line-height: 1; letter-spacing: -0.03em; margin: 0; max-width: 16ch; color: var(--bone); }
html.js .hero__sobre > * { animation: subir 0.9s var(--suave) backwards; animation-delay: 0.35s; }   /* backwards: al terminar mandan los estilos normales (p. ej. ocultar la guía) */
html.js .hero__sobre > * + * { animation-delay: 0.5s; }
html.js .hero__sobre > .guia-vertical { animation-delay: 1.1s; }
@media (min-width: 36em) { .hero__banda { aspect-ratio: 16 / 10; } }
@media (min-width: 48em) { .hero__banda { aspect-ratio: auto; height: min(84vh, 900px); max-height: none; } html.js .hero__banda { height: auto; } .hero__sobre { padding-bottom: 32px; } }
@media (min-width: 64em) { .hero__cartel { padding: calc(var(--alto-cabecera-inicio) + 12px) var(--margen) 20px; } .hero__oficial + .hero__cartel { padding-top: calc(var(--alto-cabecera-inicio) + 8px + var(--alto-oficial, 1.6em) + 10px); } }
/* Letra grande: el titular baja de la foto al lienzo */
:root[data-letra="grande"] .hero__banda::before { display: none; }
:root[data-letra="grande"] .hero__sobre { position: relative; background: var(--bone); color: var(--ink); padding-top: 20px; }
:root[data-letra="grande"] .hero__sobre .eyebrow { color: var(--graphite); opacity: 1; }
:root[data-letra="grande"] .hero__titulo { color: var(--ink); max-width: none; }

/* Statement de portada: una pantalla de aire, como la referencia */
.pliego--statement { min-height: 58vh; display: flex; flex-direction: column; justify-content: center; padding: var(--seccion) var(--margen); scroll-snap-align: none; }
.pliego--statement .statement--grande { margin-bottom: 20px; }
.pliego--statement .firma { margin-bottom: 28px; }
.portada__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 32px; }
.portada__atajos { margin: 28px 0 0; font-size: 0.9rem; color: var(--graphite); }
.portada__atajos a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ash); padding-bottom: 2px; line-height: 2.2; }
.portada__atajos a:hover { border-bottom-color: var(--ink); }
.portada__meta .eyebrow { margin: 0; color: var(--ink); }
.portada__anterior { font-size: 0.8rem; text-transform: uppercase; color: var(--graphite); min-height: 44px; display: inline-flex; align-items: center; }

/* ── Editorial: statement grande y párrafo sangrado, como «What we do» ── */
.pliego--editorial { padding-bottom: var(--seccion); border-top: 1px solid var(--hairline); }
.statement--ancho { max-width: 24ch; font-size: clamp(1.9rem, 1.2rem + 3.2vw, 3.6rem); }
.editorial__cuerpo { padding: 0 var(--margen); max-width: calc(36rem + 2 * var(--margen)); font-size: 1.05rem; line-height: 1.5; color: var(--graphite); font-weight: var(--ligera); }
.editorial__cuerpo p { margin-bottom: 1.1em; }
.editorial__cuerpo em { font-style: normal; color: var(--ink); }
.editorial__cuerpo .firma { margin-top: 8px; }
@media (min-width: 64em) { .editorial__cuerpo { margin-left: 18%; padding-left: 0; } }

/* ═══════════════════════════════════════════════════════════════════
   CARRUSEL · tarjetas que se deslizan; flechas, contador y progreso
   ═══════════════════════════════════════════════════════════════════ */
.carrusel__pista {
  display: flex; gap: 12px; list-style: none; margin: 0; padding: 0 var(--margen) 8px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margen);
  scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista > li { flex: 0 0 min(86%, 34rem); scroll-snap-align: start; margin: 0; min-width: 0; display: flex; }
.carrusel__pista > li > * { width: 100%; }
@media (min-width: 48em) { .carrusel__pista { gap: 24px; } .carrusel__pista > li { flex-basis: min(60%, 34rem); } }
@media (min-width: 64em) { .carrusel__pista > li { flex-basis: calc((100% - 48px) / 3); } }
@media (min-width: 100em) { .carrusel__pista > li { flex-basis: calc((100% - 72px) / 4); } }
.flechas { display: flex; gap: 8px; flex: none; }
.flechas .pildora--circulo { border-color: var(--ash); font-size: 1.1rem; }
.flechas .pildora--circulo:not([aria-disabled="true"]) { border-color: currentColor; }
.oscuro .flechas .pildora--circulo[aria-disabled="true"] { border-color: var(--charcoal); }
.carrusel__progreso { display: flex; align-items: center; gap: 16px; padding: 16px var(--margen) 0; font-size: 0.8rem; letter-spacing: 0.04em; color: var(--graphite); font-variant-numeric: tabular-nums; }
.carrusel__linea { flex: 1; height: 1px; background: var(--hairline); position: relative; overflow: hidden; }
.oscuro .carrusel__linea { background: var(--hairline-inv); }
.carrusel__barra { position: absolute; left: 0; top: 0; bottom: 0; width: 25%; background: currentColor; color: var(--ink); transition: width 0.3s var(--suave), transform 0.3s var(--suave); }
.oscuro .carrusel__barra { color: var(--bone); }

/* ── Agenda: tarjeta de evento ── */
.evento { display: flex; flex-direction: column; border-top: 1px solid var(--ink); padding: 20px 0 8px; }
.evento__figura { overflow: hidden; margin: -20px 0 20px; }
.evento__figura img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.9s var(--suave); }
.evento:hover .evento__figura img { transform: scale(1.03); }
.evento--proximo .evento__figura { margin: -24px -20px 20px; }
.evento__fecha { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.evento__dia { font-size: clamp(3.4rem, 2.5rem + 3vw, 4.6rem); font-weight: var(--ligera); line-height: 0.85; letter-spacing: -0.04em; }
.evento__mes { font-size: 0.8rem; text-transform: uppercase; color: var(--graphite); line-height: 1.3; }
.evento__mes span { display: block; }
.evento__estado { align-self: flex-start; margin-bottom: 10px; }
.evento__titulo { font-size: 1.45rem; font-weight: var(--ligera); letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 12px; }
.evento__dato { margin: 0 0 4px; font-size: 0.92rem; color: var(--graphite); }
.evento__dato--lugar { color: var(--ink); }
.evento__descripcion { margin: 12px 0 0; font-size: 0.95rem; color: var(--charcoal); }
.evento__acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 20px; }
.evento__alerta { margin: 12px 0 0; padding: 12px 16px; background: var(--yellow); font-size: 0.9rem; }
.evento--pasado .evento__dia { color: var(--graphite); }
.agenda--pasados .evento { border-top-color: var(--hairline); }
.evento--proximo { background: var(--mint); border-top: 0; padding: 24px 20px 20px; }
.evento--proximo .evento__mes, .evento--proximo .evento__dato, .evento--proximo .evento__descripcion { color: var(--charcoal); }
.agenda__nota { padding: 24px var(--margen) 0; font-size: 0.9rem; color: var(--graphite); max-width: 40rem; }

/* ── Artículos: pliego negro; tarjetas en celular, pliegos tipo proyecto en escritorio ── */
.pliego--articulos { padding-bottom: var(--seccion); }
.pieza { display: flex; flex-direction: column; }
.pieza__numero { color: var(--ash); margin-bottom: 12px; letter-spacing: 0.04em; }
.pieza__datos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 20px 0 12px; }
.pieza__datos .pieza__etiqueta { margin: 0; }
.pieza__firma { font-size: 0.8rem; text-transform: uppercase; color: var(--ash); letter-spacing: 0.01em; }
.carrusel__todos { margin-left: auto; background: none; border: 0; color: inherit; font: inherit; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; white-space: nowrap; }
.carrusel__todos span { transition: transform var(--duracion) var(--suave); }
.carrusel__todos:hover span { transform: translate(3px, -3px); }
@media (min-width: 64em) {
  .carrusel__pista--pliegos > li { flex-basis: 100%; }
  .carrusel__pista--pliegos .pieza { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) minmax(0, 0.9fr); grid-template-rows: auto auto 1fr auto; column-gap: 32px; align-items: start; }
  .carrusel__pista--pliegos .pieza__numero { grid-column: 1; grid-row: 1; margin: 0 0 16px; }
  .carrusel__pista--pliegos .pieza__titulo { grid-column: 1 / span 2; grid-row: 2; position: relative; z-index: 1; font-size: clamp(2.2rem, 1.1rem + 2.7vw, 3.7rem); letter-spacing: -0.035em; line-height: 1; max-width: 17ch; margin: 0; padding-right: 8%; text-wrap: balance; }
  .carrusel__pista--pliegos .pieza__figura { grid-column: 2; grid-row: 1 / span 4; align-self: stretch; }
  .carrusel__pista--pliegos .pieza__figura img { aspect-ratio: 4 / 5; height: min(66vh, 700px); }
  .carrusel__pista--pliegos .pieza__datos { grid-column: 3; grid-row: 2; flex-direction: column; align-items: flex-start; align-self: end; margin: 0 0 12px; }
  .carrusel__pista--pliegos .pieza__bajada { grid-column: 3; grid-row: 3; align-self: start; font-size: 1.05rem; max-width: 34ch; margin: 0 0 20px; }
  .carrusel__pista--pliegos .pieza .acciones { grid-column: 3; grid-row: 4; align-self: end; margin-top: 0; }
  .carrusel__pista--pliegos .pieza__cuerpo { display: none; }
}
.pieza__figura { overflow: hidden; }
.pieza__figura img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 0.9s var(--suave); }
.pieza:hover .pieza__figura img { transform: scale(1.03); }
.pieza__etiqueta { align-self: flex-start; margin: 20px 0 12px; border-color: var(--charcoal); }
.pieza__titulo { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-weight: var(--ligera); letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 12px; }
.pieza__bajada { color: var(--ash); font-size: 0.95rem; margin: 0 0 20px; max-width: 40ch; }
.pieza .acciones { margin-top: auto; }
.pieza__cuerpo { display: none; }
@media (min-width: 48em) { .pieza__figura img { aspect-ratio: 4 / 3; } }

/* ── Historias: tarjetas pastel tipo testimonio ── */
.testimonio { display: flex; flex-direction: column; padding: 0 0 28px; background: var(--pink); color: var(--magenta); }
.testimonio__figura { overflow: hidden; }
.testimonio__figura img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.9s var(--suave); }
.testimonio:hover .testimonio__figura img { transform: scale(1.03); }
.testimonio__cuerpo { display: flex; flex-direction: column; flex: 1; padding: 20px 24px 0; }
.testimonio .pieza__cuerpo { display: none; }
.testimonio--menta { background: var(--mint); color: var(--teal); }
.testimonio--azul { background: var(--blue); color: var(--navy); }
.testimonio--crema { background: var(--bone); color: var(--ink); border: 1px solid var(--ink); }
.testimonio__comillas { align-self: flex-end; font-family: var(--fuente-marca); font-size: 4rem; line-height: 0.55; margin: 0 0 4px; }
.testimonio__cita { margin: 0 0 24px; font-size: clamp(1.25rem, 1.05rem + 1vw, 1.6rem); font-weight: var(--ligera); line-height: 1.15; letter-spacing: -0.025em; text-wrap: pretty; }
.testimonio__cita p { margin: 0; }
.testimonio__cuerpo > .eyebrow { opacity: .8; }
.pantalla--seccion-nueva .testimonio__cita { font-size: clamp(1rem, .95rem + .4vw, 1.2rem); -webkit-line-clamp: 3; }
.testimonio__firma { margin: auto 0 0; font-size: 0.95rem; line-height: 1.4; }
.testimonio__firma strong { display: block; font-weight: var(--regular); }
.testimonio .acciones { margin-top: 20px; }
.testimonio .pildora:hover { background: currentColor; }
.testimonio .pildora:hover > * { color: var(--bone); }
.testimonio--crema .pildora--negra:hover { background: var(--charcoal); }
.testimonio__titulo { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-weight: var(--ligera); letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 12px; color: inherit; }
.testimonio__intro { margin: 0 0 20px; font-size: 0.95rem; color: var(--charcoal); }

/* Formulario: campos con filete inferior, como la referencia */
.formulario { display: grid; gap: 18px; }
.campo { display: grid; gap: 4px; }
.campo label { font-size: 0.9rem; color: var(--charcoal); }
.campo input, .campo textarea {
  width: 100%; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--ink);
  font: inherit; font-size: 1.1rem; letter-spacing: -0.018em; padding: 6px 0 10px; border-radius: 0; min-height: 44px;
  transition: border-color var(--duracion) ease;
}
.campo textarea { resize: vertical; min-height: 5.5rem; line-height: 1.4; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--graphite); opacity: 0.8; }
.campo input:focus-visible, .campo textarea:focus-visible { outline: 0; border-bottom-width: 2px; }
.formulario__nota { font-size: 0.86rem; color: var(--charcoal); margin: 0; }
.formulario__estado { font-size: 0.9rem; padding: 10px 14px; border-radius: 10px; background: var(--mint); color: var(--teal); margin: 0; }
.formulario__estado--error { background: #fbe9e7; color: #7a1410; }
.campo__opcional { color: var(--graphite); font-size: 0.9em; }
.campo input[type="file"] { font-size: 0.95rem; padding: 8px 0 10px; cursor: pointer; }
.campo input[type="file"]::file-selector-button { font: inherit; font-size: 0.95rem; margin-right: 12px; padding: 8px 16px; min-height: 40px; border: 1px solid currentColor; border-radius: var(--radio-pildora); background: transparent; color: inherit; cursor: pointer; }
/* Campo trampa contra robots: fuera de la vista y del teclado; una persona nunca lo llena */
.campo--trampa { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ── FIVA: pliego marino con tarjetas ── */
.pliego--fiva { background: var(--navy); padding-bottom: var(--seccion); }
.pliego--fiva .pieza__etiqueta { border-color: rgba(255, 254, 247, 0.35); }
.pliego--fiva .flechas .pildora--circulo[aria-disabled="true"] { border-color: rgba(255, 254, 247, 0.3); }
.pliego--fiva .carrusel__linea { background: var(--hairline-inv); }
.pliego--fiva .carrusel__barra { color: var(--bone); }

/* ── Cuéntenos su historia: statement + formulario, como «Speak to us» ── */
.pliego--convocatoria { padding: var(--seccion) var(--margen) var(--seccion); display: grid; gap: 32px; border-top: 1px solid var(--hairline); }
.pliego--convocatoria .intro { max-width: 30rem; }
.formulario__fila { display: grid; gap: 18px; }
@media (min-width: 48em) { .formulario__fila { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (min-width: 64em) { .pliego--convocatoria { grid-template-columns: 1fr 1.3fr; column-gap: 64px; align-items: start; } .pliego--convocatoria .formulario { max-width: 44rem; } }

/* ── Archivo: comercial de época (YouTube, carga al tocar) y anuncios ── */
.archivo { padding-bottom: var(--seccion); }
.video-epoca { margin: 0 var(--margen); }
.video-epoca__boton { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--ink); cursor: pointer; aspect-ratio: 16 / 9; overflow: hidden; }
.video-epoca__boton img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s var(--suave), opacity var(--duracion) ease; }
.video-epoca__boton:hover img { transform: scale(1.02); }
.video-epoca__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 84px; height: 84px; border-radius: 50%; background: var(--bone); color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; padding-left: 6px; transition: transform var(--duracion) var(--suave); }
.video-epoca__boton:hover .video-epoca__play { transform: translate(-50%, -50%) scale(1.06); }
.video-epoca iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; background: var(--ink); }
.video-epoca__marco { position: relative; aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; }
.video-epoca__video { width: 100%; height: 100%; display: block; object-fit: cover; background: var(--ink); }
.video-epoca__boton--nativo { position: absolute; inset: 0; aspect-ratio: auto; background: linear-gradient(to top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0)); }
.video-epoca__marco--activo .video-epoca__boton--nativo { display: none; }
.video-epoca__pie { padding: 12px 0 0; font-size: 0.9rem; color: var(--graphite); max-width: 40rem; }
.video-epoca__pie .eyebrow { margin-bottom: 2px; }
.archivo__anuncios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 32px var(--margen) 0; padding: 0; }
.archivo__anuncios li { margin: 0; }
.archivo__anuncios img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.archivo__anuncios figcaption { margin-top: 8px; font-size: 0.8rem; text-transform: uppercase; color: var(--graphite); letter-spacing: 0.01em; }
@media (min-width: 48em) { .archivo__anuncios { gap: 24px; } }
.archivo__nota { padding: 24px var(--margen) 0; font-size: 0.9rem; color: var(--graphite); max-width: 44rem; }
.archivo__nota a { color: var(--ink); }

/* ── Trivia del mes ── */
.trivia { padding-bottom: var(--seccion); border-top: 1px solid var(--hairline); }
.trivia__lista { list-style: none; margin: 0 var(--margen); padding: 0; counter-reset: pregunta; display: grid; gap: 0; }
.trivia__pregunta { border-top: 1px solid var(--ink); padding: 20px 0 24px; counter-increment: pregunta; margin: 0; }
.trivia__pregunta:last-child { border-bottom: 1px solid var(--ink); }
.trivia__texto { margin: 0 0 14px; font-size: 1.15rem; font-weight: var(--ligera); letter-spacing: -0.02em; line-height: 1.3; max-width: 40rem; }
.trivia__texto::before { content: counter(pregunta, decimal-leading-zero); display: block; font-size: 0.8rem; color: var(--graphite); letter-spacing: 0.04em; margin-bottom: 6px; }
.trivia__opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.trivia__opciones .pildora--correcta { background: var(--mint); border-color: var(--mint); color: var(--ink); }
.trivia__opciones .pildora--incorrecta { background: transparent; border-color: var(--ash); color: var(--graphite); opacity: 0.55; }
.trivia__opciones .pildora--elegida { opacity: 1; color: var(--ink); border-color: var(--ink); text-decoration: line-through; }
.trivia__marca { font-weight: var(--regular); }
.trivia__pregunta--resuelta .pildora { cursor: default; }
.trivia__resultado { margin: 12px 0 0; font-size: 0.95rem; color: var(--graphite); min-height: 1.4em; }
.trivia__resultado strong { color: var(--ink); }
.trivia__marcador { padding: 24px var(--margen) 0; font-size: 1.1rem; font-weight: var(--ligera); letter-spacing: -0.02em; }
@media (min-width: 64em) { .trivia__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } .trivia__pregunta { border-bottom: 1px solid var(--ink); } }

/* ── La Federación: cifras y marquesina ── */
.cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0 var(--margen); padding: 0; border-top: 1px solid var(--ink); }
.cifra { padding: 20px 0 24px; border-bottom: 1px solid var(--hairline); }
.cifra:nth-child(odd) { padding-right: 16px; }
.cifra:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--hairline); }
.cifra dt { font-size: 0.8rem; text-transform: uppercase; color: var(--graphite); letter-spacing: 0.01em; margin: 0 0 8px; }
.cifra dd { margin: 0; font-size: clamp(2.6rem, 1.8rem + 4vw, 5rem); font-weight: var(--ligera); letter-spacing: -0.04em; line-height: 0.95; font-variant-numeric: tabular-nums; }
@media (min-width: 48em) {
  .cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cifra { padding: 24px 20px 28px 0; border-bottom: 1px solid var(--ink); }
  .cifra + .cifra { padding-left: 20px; border-left: 1px solid var(--hairline); }
  .cifra:nth-child(even) { padding-left: 20px; }
}
.marquesina { position: relative; overflow: hidden; margin: 28px var(--margen) 0; padding: 18px 0; background: var(--bone); color: var(--ink); border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); display: flex; flex-direction: column; gap: 10px; white-space: nowrap; -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
.marquesina__pista { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0 5px; flex: none; width: max-content; animation: marquesina 60s linear infinite; }
.marquesina__pista--vuelta { animation-direction: reverse; animation-duration: 75s; }   /* la duración real la pone el script según cuántos clubes hay */
.marquesina:hover .marquesina__pista { animation-play-state: paused; }
.marquesina__pista li { margin: 0; display: flex; white-space: normal; }
.marquesina__pista li::after { content: none; }
/* Tarjeta de club: el logotipo completo, grande y sin recortar (se distingue de lejos), con el
   nombre debajo; toda la tarjeta abre el sitio o la red social del club */
.club { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 132px; padding: 12px 10px 12px; border-radius: 18px; background: #fff; color: var(--ink); text-decoration: none; text-align: center; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), inset 0 0 0 1px rgba(0, 0, 0, 0.06); transition: transform 0.25s var(--suave), box-shadow 0.25s ease; }
a.club:hover, a.club:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14), inset 0 0 0 1px rgba(0, 0, 0, 0.08); text-decoration: none; }
.club img { width: 84px; height: 84px; object-fit: contain; flex: none; border-radius: 0; background: none; }
.club__nombre { font-size: 0.74rem; line-height: 1.22; letter-spacing: -0.005em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.44em; }
.club__monograma { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; background: var(--ink); color: var(--bone); font-size: 1.2rem; letter-spacing: 0.04em; font-weight: var(--regular); flex: none; }
.marquesina__pista li:nth-child(4n+1) .club__monograma { background: var(--navy); }
.marquesina__pista li:nth-child(4n+2) .club__monograma { background: var(--teal); }
.marquesina__pista li:nth-child(4n+3) .club__monograma { background: var(--magenta); }
.marquesina:focus-within .marquesina__pista { animation-play-state: paused; }
@media (min-width: 48em) { .club { width: 156px; } .club img, .club__monograma { width: 104px; height: 104px; } .club__nombre { font-size: 0.8rem; } }
@media (max-height: 700px) and (max-width: 47.9em) { .club { width: 116px; padding: 10px 8px; gap: 6px; } .club img, .club__monograma { width: 68px; height: 68px; } }
@keyframes marquesina { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.federacion__nota { padding: 20px var(--margen) 0; font-size: 0.9rem; color: var(--graphite); }
.federacion__nota a { color: var(--ink); }

/* ── Banner publicitario de imagen (el creativo lo pone el patrocinador) ── */
.banner { padding: 24px var(--margen) 0; }
.banner__eyebrow { margin-bottom: 8px; }
.banner__enlace { display: block; border: 1px solid var(--hairline); overflow: hidden; }
.banner__enlace img { width: 100%; height: auto; display: block; transition: transform 0.9s var(--suave); }
.banner__enlace:hover img { transform: scale(1.02); }

/* ── Banner publicitario: franja discreta con logotipo, entre secciones ── */
.banner-patrocinio { padding: 0 var(--margen); }
.banner-patrocinio__interior { display: grid; gap: 10px; padding: 20px 0 22px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); text-decoration: none; color: inherit; transition: background-color var(--duracion) ease; }
.banner-patrocinio__interior:hover { background: rgba(0, 0, 0, 0.025); }
.banner-patrocinio__interior .eyebrow { margin: 0; }
.banner-patrocinio__logo { width: auto; height: 40px; max-width: 60%; object-fit: contain; object-position: left; }
.banner-patrocinio__texto { color: var(--graphite); font-size: 0.95rem; }
.banner-patrocinio__accion { justify-self: start; }
@media (min-width: 48em) {
  .banner-patrocinio__interior { grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 32px; align-items: center; padding: 20px 0; }
  .banner-patrocinio__interior .eyebrow { grid-column: 1 / -1; }
  .banner-patrocinio__logo { grid-column: 1; height: 48px; max-width: 260px; }
  .banner-patrocinio__texto { grid-column: 2; }
  .banner-patrocinio__accion { grid-column: 3; }
}
.fiva__enlace { display: inline-block; margin: 0 0 20px; }
.fiva__logo { width: auto; height: 56px; max-width: 100%; object-fit: contain; object-position: left; transition: opacity var(--duracion) ease; }
.fiva__enlace:hover .fiva__logo { opacity: 0.8; }
.patrocinador__logo { width: auto; height: clamp(56px, 4rem + 4vw, 120px); max-width: 100%; object-fit: contain; object-position: left; }

/* ── Patrocinadores: tipográfico, elegante, con espacios disponibles ── */
.patrocinadores { padding-bottom: var(--seccion); }
.patrocinador { display: block; text-decoration: none; color: inherit; }
.patrocinador--principal { margin: 0 var(--margen); padding: 32px 0 36px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); display: grid; gap: 10px; transition: background-color var(--duracion) ease; }
.patrocinador--principal:hover { background: rgba(0, 0, 0, 0.025); }
.patrocinador__nombre { display: block; font-family: var(--fuente); font-weight: var(--ligera); font-size: clamp(3.2rem, 2rem + 7vw, 8rem); letter-spacing: -0.045em; line-height: 0.95; }
.patrocinador__descripcion { color: var(--graphite); max-width: 36rem; }
.patrocinador__accion { justify-self: start; margin-top: 8px; }
.patrocinadores__rejilla { display: grid; gap: 12px; margin: 24px var(--margen) 0; }
.patrocinador--disponible { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 120px; padding: 20px 24px; border: 1px dashed var(--ash); color: var(--graphite); font-size: 1.25rem; font-weight: var(--ligera); letter-spacing: -0.02em; transition: border-color var(--duracion) ease, color var(--duracion) ease; }
.patrocinador--disponible:hover { border-color: var(--ink); color: var(--ink); }
.patrocinador--disponible .eyebrow { margin: 0; }
.patrocinadores__nota { padding: 24px var(--margen) 0; font-size: 0.9rem; color: var(--graphite); max-width: 44rem; }
.patrocinadores__nota a { color: var(--ink); }
@media (min-width: 48em) {
  .patrocinador--principal { grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; column-gap: 48px; align-items: end; padding: 40px 0 44px; }
  .patrocinador--principal .eyebrow { grid-column: 1 / -1; }
  .patrocinador__nombre, .patrocinador__logo { grid-column: 1; grid-row: 2; }
  .patrocinador__descripcion { grid-column: 1; grid-row: 3; }
  .patrocinador__accion { grid-column: 2; grid-row: 2 / span 2; align-self: end; margin: 0; }
  .patrocinadores__rejilla { grid-template-columns: 1fr; }
}
.pie__patrocinio { margin: 16px 0 0; font-size: 0.9rem; color: var(--ash); }
.pie__patrocinio a { color: var(--bone); }

/* ── Mercado: listas con filete ── */
.mercado__columnas { display: grid; gap: 48px; padding: 0 var(--margen); }
@media (min-width: 48em) { .mercado__columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Preguntas frecuentes (SEO/GEO): lista simple de tarjetas, con la misma lógica de «cabe en la
   pantalla» que el resto; en el celular se desliza dentro si el contenido es más largo. */
.faq__lista { list-style: none; margin: 0; padding: 0 var(--margen); display: grid; gap: 20px; max-width: 46rem; }
.pieza-faq h3 { font-size: 1.05rem; margin: 0 0 6px; }
.pieza-faq .prosa { font-size: 0.94rem; color: var(--charcoal); }
.pieza-faq .prosa p { margin: 0; }
@media (max-width: 47.9em) {
  .pantalla--faq .faq__lista { max-height: calc(100vh - 300px); max-height: calc(var(--alto-pantalla) - 300px); overflow-y: auto; overscroll-behavior: contain; -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent); mask-image: linear-gradient(to bottom, #000 88%, transparent); }
}
.bloque__titulo { font-size: 1.6rem; letter-spacing: -0.025em; margin: 0 0 16px; }
.bloque__nota { font-size: 0.9rem; color: var(--graphite); margin: 16px 0 0; }
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { border-top: 1px solid var(--ink); padding: 16px 0; margin: 0; }
.lista li:last-child { border-bottom: 1px solid var(--ink); }
.lista .etiqueta { margin-bottom: 10px; }
.lista p { margin: 0 0 6px; }
.lista small { display: block; font-size: 0.8rem; text-transform: uppercase; color: var(--graphite); }
.directorio strong { display: block; font-size: 1.15rem; font-weight: var(--ligera); letter-spacing: -0.02em; margin-bottom: 4px; }
.directorio span { display: block; font-size: 0.92rem; color: var(--graphite); }
.directorio em { display: block; font-style: normal; font-size: 0.84rem; color: var(--teal); margin-top: 6px; }

/* ── Puente: pliego negro con retícula de filetes y fotos flotantes ── */
.pliego--puente {
  position: relative; overflow: hidden; padding: calc(var(--seccion) + 24px) var(--margen); min-height: 78vh;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  background-color: var(--ink);
  background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(100% / 6 - 1px), var(--hairline-inv) calc(100% / 6 - 1px), var(--hairline-inv) calc(100% / 6));
}
.puente__fotos { position: absolute; inset: 0; pointer-events: none; }
.puente__foto { position: absolute; left: var(--x); top: var(--y); width: var(--w); margin: 0; will-change: transform; }
.puente__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; opacity: 0.85; }
@media (max-width: 47.9em) { .puente__foto { width: calc(var(--w) * 1.6); opacity: 0.6; } .puente__foto:nth-child(n+4) { display: none; } .puente__columna { background: var(--ink); } }
@media (min-width: 48em) { .puente__foto:nth-child(5) { display: none; } }
.puente__contenido { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 100%; }
.pliego--puente .statement { max-width: 14ch; margin: 0 auto 16px; font-size: clamp(2.2rem, 1.4rem + 4vw, 4.2rem); }
.pliego--puente .intro { color: var(--ash); margin: 0 auto 32px; max-width: 34rem; }
.puente__columnas { display: grid; gap: 24px; width: 100%; max-width: 52rem; text-align: left; margin-top: 24px; }
.puente__columna { border-top: 1px solid var(--hairline-inv); padding-top: 20px; background: rgba(0, 0, 0, 0.55); }
.puente__columna h3 { font-size: 1.25rem; letter-spacing: -0.02em; margin: 0 0 8px; }
.puente__columna p { color: var(--ash); font-size: 0.95rem; max-width: 44ch; }
@media (min-width: 48em) { .puente__columnas { grid-template-columns: 1fr 1fr; gap: 40px; } }

/* ═══════════════════════════════════════════════════════════════════
   RELEVO · sección fuente (la pantalla la arma el JS; estos estilos
   solo aplican si se muestra la fuente, p. ej. al imprimir)
   ═══════════════════════════════════════════════════════════════════ */
.relevo { padding-bottom: 40px; }
.relevo__pieza { display: grid; gap: 16px; padding: 0 var(--margen); }
.relevo__foto { margin: 0; }
.relevo__foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.relevo__foto figcaption { margin-top: 8px; font-size: 0.9rem; color: var(--graphite); }
.relevo__voces { display: grid; gap: 12px; }
.relevo__voz { margin: 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--ink); }
.relevo__voz--joven { border-left-color: var(--yellow); }
.relevo__voz p { margin: 0 0 10px; font-size: 1.1rem; font-weight: var(--ligera); line-height: 1.18; letter-spacing: -0.022em; }
.relevo__voz footer { font-size: 0.9rem; color: var(--graphite); line-height: 1.4; }
.relevo__voz footer strong { display: block; color: var(--ink); font-weight: var(--regular); }
.relevo .pieza__cuerpo { display: none; }
@media (min-width: 48em) { .relevo__voces { grid-template-columns: 1fr 1fr; gap: 32px; } }

/* Barra de progreso de lectura: una línea fina arriba de todo */
.progreso-lectura { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 55; pointer-events: none; }
.progreso-lectura span { display: block; height: 100%; width: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); transition: transform 80ms linear; }
.cabecera--invertida ~ .progreso-lectura span, body.menu-abierto .progreso-lectura span { background: var(--bone); }
.portada__tiempo { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.01em; color: var(--graphite); }

/* Puente: cierre que devuelve al Relevo */
.puente__relevo { margin: 32px auto 0; max-width: 40rem; font-size: 0.95rem; color: var(--ash); text-wrap: pretty; }
.puente__relevo a { color: var(--bone); text-decoration: none; border-bottom: 1px solid var(--charcoal); }
.puente__relevo a:hover { border-bottom-color: var(--bone); }

/* Formulario: asunto, consentimiento y aviso de privacidad */
.campo select {
  width: 100%; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--ink);
  font: inherit; font-size: 1.05rem; letter-spacing: -0.018em; padding: 6px 0 10px; border-radius: 0; min-height: 44px; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 8px) 55%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 28px;
}
.campo select:focus-visible { outline: 0; border-bottom-width: 2px; }
.consentimiento { display: flex; gap: 12px; align-items: flex-start; font-size: 0.9rem; color: var(--charcoal); line-height: 1.4; cursor: pointer; }
.consentimiento input { width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--ink); }
.consentimiento a { color: var(--ink); }
.aviso-privacidad { font-size: 0.9rem; color: var(--charcoal); border-top: 1px solid var(--hairline); padding-top: 12px; }
.aviso-privacidad summary { cursor: pointer; color: var(--ink); min-height: 32px; display: flex; align-items: center; }
.aviso-privacidad p { margin: 8px 0 0; line-height: 1.5; }
.aviso-privacidad .pendiente { margin-top: 6px; }

/* ═══════════════════════════════════════════════════════════════════
   LA REVISTA, PANTALLA POR PANTALLA
   Cada pantalla ocupa la ventana completa y el scroll del documento
   salta de una a otra (como las historias o TikTok, en el orden del
   índice). Tocar la foto o el texto abre la pieza en el lector.
   ═══════════════════════════════════════════════════════════════════ */
.fuentes { display: none !important; }
html.saltando, html.sin-iman { scroll-snap-type: none; }
/* Rueda o panel táctil de la computadora: el script lleva cada pantalla a su lugar con un resorte */
html.rueda { scroll-snap-type: none; scroll-behavior: auto; }
/* Puntos de parada dentro de las pantallas más altas que la ventana (los pone el script) */
.iman { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; scroll-snap-align: start; scroll-snap-stop: normal; }
.iman--fin { top: auto; bottom: 0; scroll-snap-align: end; }
.revista { position: relative; z-index: 1; }
.pantalla { position: relative; z-index: 1; height: 100vh; height: var(--alto-pantalla); scroll-snap-align: start; scroll-snap-stop: always; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: var(--ink); color: var(--bone); isolation: isolate; }
.pantalla--tocable { cursor: pointer; }
html.js .pantalla--tocable:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; }
.pantalla__medio { position: absolute; inset: 0; z-index: 0; background: var(--ink); }
.pantalla__medio picture { width: 100%; height: 100%; }   /* la foto ligera (.webp / 800 px) llega envuelta en <picture> */
.pantalla__medio img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); transition: transform 7s ease-out; }
.pantalla--activa .pantalla__medio img { transform: scale(1); }
/* Pantalla cuyo contenido no cabe en esta ventana (celular chico o acostado, texto largo): crece y se
   desliza en vez de recortarse; el texto arranca debajo de la cabecera */
.pantalla--larga { height: auto; min-height: 100vh; min-height: var(--alto-pantalla); overflow: visible; overflow-x: clip; justify-content: flex-start; padding-top: calc(var(--alto-cabecera-real, var(--alto-cabecera-compacta)) + 12px); scroll-snap-stop: normal; }
.pantalla--larga.pantalla--foto::after { background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.78) 60%, rgba(0, 0, 0, 0.62) 100%); }
.pantalla--larga .pantalla__medio { overflow: hidden; }
.pantalla--larga .pantalla__anuncio { position: relative; inset: auto; height: auto; padding-top: 0; }
.pantalla--larga .pantalla__anuncio img { max-height: 60vh; }
.pantalla--foto::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.72) 36%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.06) 72%, rgba(0, 0, 0, 0.3) 100%); }
.pantalla--foto .pantalla__texto { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55); }
.pantalla--foto .pantalla__eyebrow { color: rgba(255, 254, 247, 0.85); }
.pantalla--convocatoria .pantalla__eyebrow { color: var(--yellow); }
.pantalla__texto { position: relative; z-index: 2; padding: 0 var(--margen) calc(76px + env(safe-area-inset-bottom) + var(--barras)); max-width: 46rem; }
.pantalla__eyebrow { color: var(--ash); }
.pantalla__titulo { font-size: clamp(1.85rem, 1.15rem + 3.2vw, 3.4rem); font-weight: var(--ligera); line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 12px; text-wrap: balance; max-width: 20ch; }
.pantalla__titulo--cita { font-size: clamp(1.5rem, 1.05rem + 2.2vw, 2.6rem); max-width: 26ch; }
.pantalla__bajada { margin: 0 0 20px; font-size: 1rem; line-height: 1.45; color: var(--ash); max-width: 36rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-wrap: pretty; }
.pantalla__acciones { gap: 8px 4px; }
.pantalla__secundaria { color: inherit; }
.pantalla .pildora--texto:hover { color: inherit; }
.pantalla--oscuro .pildora--hueso:hover, .pantalla--navy .pildora--hueso:hover { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.pantalla__toque { display: block; margin-top: 14px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.01em; opacity: 0.6; }
.pantalla__toque::before { content: "👆 "; }
/* Fondos de color */
.pantalla--bone { background: var(--bone); color: var(--ink); }
.pantalla--amarillo { background: var(--yellow); color: var(--ink); }
.pantalla--navy { background: var(--navy); }
.pantalla--rosa { background: var(--pink); color: var(--magenta); }
.pantalla--menta { background: var(--mint); color: var(--teal); }
.pantalla--azul { background: var(--blue); color: var(--navy); }
.pantalla--bone .pantalla__eyebrow, .pantalla--bone .pantalla__bajada, .pantalla--amarillo .pantalla__eyebrow, .pantalla--amarillo .pantalla__bajada { color: var(--charcoal); }
.pantalla--rosa .pantalla__eyebrow, .pantalla--rosa .pantalla__bajada, .pantalla--menta .pantalla__eyebrow, .pantalla--menta .pantalla__bajada, .pantalla--azul .pantalla__eyebrow, .pantalla--azul .pantalla__bajada { color: inherit; opacity: 0.85; }
.pantalla--rosa .pildora--negra { background: var(--magenta); border-color: var(--magenta); color: var(--bone); }
.pantalla--menta .pildora--negra { background: var(--teal); border-color: var(--teal); color: var(--bone); }
.pantalla--azul .pildora--negra { background: var(--navy); border-color: var(--navy); color: var(--bone); }
.pantalla--rosa .pildora--negra:hover, .pantalla--menta .pildora--negra:hover, .pantalla--azul .pildora--negra:hover { background: var(--ink); border-color: var(--ink); color: var(--bone); }
/* Publicidad: la imagen del banner ocupa la pantalla como una página de anunciante */
.pantalla__anuncio { position: absolute; inset: 0 0 auto; height: 72%; z-index: 0; display: flex; align-items: center; justify-content: center; padding: calc(var(--alto-cabecera-compacta) + 4px) var(--margen) 0; }
.pantalla__anuncio img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pantalla__anuncio picture { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 0; }   /* sin esto, la imagen ignora el alto disponible y se sale */
/* Comercial de época dentro de la pantalla */
.pantalla__video-epoca { margin: 0 0 16px; max-width: 36rem; }
.pantalla__video-epoca .video-epoca__boton { aspect-ratio: 16 / 9; }
.pantalla__video-epoca iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; background: var(--ink); }
/* Logotipos y cifras */
.pantalla__logo { display: block; width: auto; max-width: 240px; height: auto; max-height: 72px; margin: 0 0 20px; }
.pantalla__cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 0 0 24px; padding: 0; max-width: 32rem; }
.pantalla__cifras div { border-top: 1px solid var(--hairline-inv); padding-top: 8px; }
.pantalla__cifras dd { margin: 0; font-family: var(--fuente-marca); font-size: clamp(2.6rem, 1.6rem + 5vw, 4.6rem); line-height: 0.9; letter-spacing: 0.01em; }
.pantalla__cifras dt { font-size: 0.82rem; text-transform: uppercase; color: var(--ash); margin-top: 4px; }
.pantalla--fin .pantalla__titulo { font-size: clamp(2.4rem, 1.5rem + 5vw, 5rem); }
.pantalla--fin .pantalla__titulo::before { content: "✓ "; }
/* Entrada del texto en cada pantalla */
html.js .pantalla__texto > * { opacity: 0; transform: translateY(16px); transition: opacity 0.45s ease, transform 0.55s var(--suave); }
html.js .pantalla--activa .pantalla__texto > * { opacity: 1; transform: none; }
html.js .pantalla--activa .pantalla__texto > :nth-child(2) { transition-delay: 70ms; }
html.js .pantalla--activa .pantalla__texto > :nth-child(3) { transition-delay: 140ms; }
html.js .pantalla--activa .pantalla__texto > :nth-child(4) { transition-delay: 210ms; }
html.js .pantalla--activa .pantalla__texto > :nth-child(5) { transition-delay: 280ms; }
/* Guías de la primera vez */
.pantalla .guia--toque { position: absolute; left: 50%; top: auto; height: auto; bottom: calc(76px + env(safe-area-inset-bottom) + var(--barras)); transform: translate(-50%, 0); z-index: 3; animation: guia-entrar-arriba 0.5s var(--suave) both; }
.pantalla .guia--toque.guia--saliendo { animation: guia-salir-arriba 0.4s ease both; }
.guia__dedo { font-size: 1.4rem; line-height: 1; animation: guia-dedo 1.4s ease-in-out infinite; }
@keyframes guia-dedo { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(0.92); } }
@keyframes guia-entrar-arriba { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes guia-salir-arriba { to { opacity: 0; transform: translate(-50%, -12px); } }
.guia-vertical__flecha--arriba { animation: guia-subir 1.6s ease-in-out infinite; }
@keyframes guia-subir { 0%, 100% { transform: translateY(3px); } 50% { transform: translateY(-5px); } }
/* Portada: la primera pantalla */
.hero__bajada { margin: 0 0 16px; max-width: 34rem; font-size: 1rem; line-height: 1.45; color: rgba(255, 254, 247, 0.85); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-wrap: pretty; }
.hero__acciones { gap: 8px 4px; }
.hero__acciones .pildora--texto { color: var(--bone); }
html.js .hero__sobre[data-abrir-tarjeta] { cursor: pointer; }
/* Contador (abajo a la izquierda, abre el Índice) y «Continuar donde se quedó» */
.continuar { position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 85; display: flex; align-items: center; gap: 6px; max-width: calc(100vw - 32px); animation: subir-centrado 0.4s var(--suave) both; }
@keyframes subir-centrado { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translateX(-50%); } }   /* conserva el centrado; «subir» termina en transform: none y descentraba la píldora */
.continuar__boton { box-shadow: 0 0 0 1.5px var(--bone); gap: 10px; padding-left: 16px; white-space: nowrap; }
.continuar__cerrar { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ink); background: var(--bone); color: var(--ink); font: inherit; font-size: 0.9rem; cursor: pointer; box-shadow: 0 0 0 1.5px var(--bone); }
.continuar__cerrar:hover { background: var(--ink); color: var(--bone); }
.continuar[hidden], body.menu-abierto .continuar, body.lector-abierto .continuar { display: none; }
.menu__continuar { margin: 0 0 20px; }
/* ── Pantallas de sección: la cabecera de la sección + su carrusel (tipo Instagram) en una pantalla ── */
.pantalla--seccion { height: auto; min-height: 100vh; min-height: var(--alto-pantalla); justify-content: center; padding: calc(var(--alto-cabecera-compacta) + 4px) 0 calc(14px + env(safe-area-inset-bottom) + var(--barras)); overflow: visible; }
.pantalla--seccion .pantalla__seccion { width: 100%; }
.pantalla--seccion .pliego__cabecera { margin-bottom: 10px; }
.pantalla--seccion .pliego__cabecera .statement { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.7rem); margin-bottom: 8px; max-width: 20ch; }
.pantalla--seccion .pliego__cabecera .intro { font-size: 1rem; max-width: 34rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pantalla--seccion .carrusel__progreso { margin-top: 8px; }
.pantalla--seccion .carrusel__contador, .pantalla--seccion .carrusel__linea { display: none; }
.pantalla--seccion .carrusel__progreso:not(:has(.carrusel__todos)) { display: none; }
.carrusel__puntos { display: flex; justify-content: center; gap: 6px; margin: 12px var(--margen) 0; }
.carrusel__puntos span { width: 8px; height: 8px; border-radius: 4px; background: currentColor; opacity: 0.25; transition: width 0.25s var(--suave), opacity 0.25s ease; cursor: pointer; box-sizing: content-box; border: 6px solid transparent; background-clip: padding-box; }
@media (hover: hover) { .carrusel__pista { cursor: grab; } .carrusel__pista--arrastrando { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; } .carrusel__pista--arrastrando * { pointer-events: none; } }
.carrusel__puntos span.activo { opacity: 1; width: 22px; }
.pantalla--bone .carrusel__puntos, .pantalla--menta .carrusel__puntos { color: var(--ink); }
/* Tarjetas más compactas dentro de una pantalla (que quepa la sección en un teléfono) */
.pantalla--seccion .evento__figura img { aspect-ratio: 16 / 10; }
.pantalla--seccion .evento__descripcion { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pantalla--seccion .pieza__figura img { aspect-ratio: 4 / 3; }
.pantalla--seccion .pieza__bajada { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pantalla--seccion .testimonio__figura img { aspect-ratio: 16 / 10; }
.pantalla--seccion .testimonio__cita { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.pantalla--seccion .nota { display: none; }
/* Eventos dentro de la pantalla: menos botones a la vista (el resto está en «Ver detalles») */
.pantalla--agenda .evento__estado { display: none; }
.pantalla--agenda .evento__acciones .pildora, .pantalla--agenda .evento .acciones .pildora { min-height: 40px; padding: 6px 14px; font-size: 0.92rem; }
.pantalla--agenda .evento__acciones a[href*="calendar.google"], .pantalla--agenda .evento__acciones [aria-label^="Compartir"] { display: none; }
.pantalla--agenda .pliego__cabecera .intro { -webkit-line-clamp: 2; }
.pantalla--agenda .evento__dato { font-size: 0.9rem; }
.pantalla--agenda .evento__cuerpo > .evento__dato:first-of-type { display: none; }   /* la fecha ya está en el número grande */
.pantalla--agenda .evento__dato--lugar { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pantalla--agenda .evento__titulo { font-size: 1.25rem; }
/* Artículos: el pliego de escritorio, un poco más bajo para que quepa con su cabecera */
@media (min-width: 64em) { .pantalla--articulos .carrusel__pista--pliegos .pieza__figura img { height: min(54vh, 560px); } }
/* FIVA e Historias: textos acotados */
.pantalla--fiva .pliego__cabecera .intro { -webkit-line-clamp: 2; }
.pantalla--fiva .pieza__figura img { aspect-ratio: 16 / 10; }
.pantalla--fiva .pieza__bajada { -webkit-line-clamp: 2; }
.pantalla--historias .testimonio__cita { -webkit-line-clamp: 4; }
/* En el teléfono, todo lo de una sección debe caber en una pantalla */
.pantalla--trivia .trivia__lista { display: flex; gap: 12px; }
@media (max-width: 47.9em) {
  .pantalla--seccion { padding-top: calc(var(--alto-cabecera-compacta) - 4px); padding-bottom: 20px; }
  .pantalla--seccion .pliego__cabecera { margin-bottom: 10px; }
  .pantalla--seccion .pliego__cabecera .statement { font-size: clamp(1.5rem, 1.1rem + 2vw, 2rem); }
  .pantalla--seccion .pliego__cabecera .intro { -webkit-line-clamp: 2; font-size: 0.9rem; }
  .pantalla--seccion .flechas { display: none; }
  .pantalla--articulos .pieza__figura img { aspect-ratio: 16 / 10; }
  .pantalla--articulos .pieza__titulo { font-size: 1.35rem; }
  .pantalla--articulos .pieza__bajada { -webkit-line-clamp: 2; margin-bottom: 12px; }
  .pantalla--articulos .pieza__firma { display: none; }
  .pantalla--articulos .pieza__datos { margin: 12px 0 8px; }
  .pantalla--historias .testimonio__cita { -webkit-line-clamp: 3; font-size: 1.15rem; }
  .pantalla--historias .testimonio__comillas { font-size: 2.6rem; }
  .pantalla--historias .testimonio__cuerpo { padding-top: 12px; }
  .pantalla--archivo .archivo__anuncios figcaption, .pantalla--archivo .archivo__nota { display: none; }
  .pantalla--archivo .archivo__anuncios { margin-top: 12px; }
  .pantalla--agenda .evento__dia { font-size: 2.4rem; }
  .pantalla--agenda .evento__descripcion { -webkit-line-clamp: 1; }
  .pantalla--agenda .evento--proximo { padding: 16px 14px 12px; }
  .pantalla--fiva .pliego__cabecera .eyebrow { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pantalla--fiva .pieza__bajada { -webkit-line-clamp: 2; }
  .pantalla--puente .statement { font-size: clamp(1.8rem, 1.2rem + 3vw, 2.6rem); margin-bottom: 8px; }
  .pantalla--puente .intro { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 16px; }
  .pantalla--puente .puente__columnas { gap: 12px; margin-top: 8px; }
  .pantalla--puente .puente__columna { padding-top: 12px; }
  .pantalla--puente .puente__columna h3 { font-size: 1.05rem; margin-bottom: 4px; }
  .pantalla--puente .puente__columna p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.9rem; margin-bottom: 8px; }
  .pantalla--puente .puente__relevo { margin-top: 14px; font-size: 0.9rem; }
  .pantalla--patrocinadores .patrocinador--principal { padding: 16px; }
  .pantalla--mercado .lista li { padding: 6px 0; }
  .pantalla--mercado .lista p { font-size: 0.92rem; margin-bottom: 4px; }
  /* En el teléfono cada panel (anuncios / talleres) se desliza por dentro: todo el texto sigue ahí */
  .pantalla--mercado .mercado__columnas > div { max-height: calc(100vh - 330px); max-height: calc(var(--alto-pantalla) - 330px); overflow-y: auto; overscroll-behavior: contain; -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent); mask-image: linear-gradient(to bottom, #000 88%, transparent); }
  .pantalla--federacion .federacion__nota { display: none; }
  .pantalla--federacion .cifra { padding: 8px 0 10px; }
  .pantalla--federacion .marquesina { padding: 12px 0; gap: 8px; }
}
/* Archivo: video + tres anuncios en fila */
.pantalla--archivo .video-epoca { margin: 0 var(--margen); }
.pantalla--archivo .archivo__anuncios { margin-top: 16px; gap: 8px; }
.pantalla--archivo .archivo__anuncios figcaption { font-size: 0.8rem; }
.pantalla--archivo .archivo__nota { margin: 14px var(--margen) 0; font-size: 0.9rem; }
.pantalla--archivo .video-epoca { max-width: min(100%, calc(48vh * 16 / 9)); }
.pantalla--archivo .video-epoca { margin-left: auto; margin-right: auto; max-width: min(100% - 2 * var(--margen), calc(32vh * 16 / 9)); }
.pantalla--archivo .archivo__anuncios figcaption { display: none; }   /* el pie se lee en el visor */
.pantalla--archivo .pliego__cabecera .intro { -webkit-line-clamp: 1; }
.pantalla--archivo .pliego__cabecera { margin-bottom: 10px; }
.pantalla--archivo .video-epoca__pie { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; padding-top: 8px; }
.pantalla--archivo .video-epoca__pie .eyebrow { display: inline; margin-right: 8px; }
.pantalla--archivo .archivo__anuncios { display: flex; justify-content: center; gap: 12px; margin: 14px auto 0; max-width: min(100% - 2 * var(--margen), 40rem); }
.pantalla--archivo .archivo__anuncios li { flex: 0 1 12rem; }
.pantalla--archivo .archivo__anuncios img { height: clamp(80px, 12vh, 150px); }
.pantalla--archivo .archivo__nota { text-align: center; max-width: 44rem; margin: 10px auto 0; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.pantalla--archivo .video-epoca__pie { text-align: center; margin-left: auto; margin-right: auto; }
}
/* Trivia: cada pregunta es una tarjeta del carrusel */
.pantalla--trivia .trivia__lista { list-style: none; counter-reset: none; }
.pantalla--trivia .trivia__lista > li { flex: 0 0 min(86%, 26rem); display: block; border: 1px solid var(--ink); border-radius: 16px; padding: 18px; margin: 0; }
.pantalla--trivia [data-trivia-marcador] { margin: 14px var(--margen) 0; }
/* FIVA: logotipo, texto y carrusel sobre marino */
/* Federación: cifras y marquesina */
.pantalla--federacion .cifras { margin-bottom: 20px; }
.pantalla--federacion .cifra { padding: 12px 0 14px; }
.pantalla--federacion .marquesina { margin-top: 0; }
.pantalla--federacion .marquesina__titulo { margin: 0 var(--margen) 10px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; }
.pantalla--federacion .marquesina__titulo .eyebrow { margin: 0; }
.pantalla--federacion .marquesina__titulo a { color: var(--ash); font-size: 0.9rem; }
.pantalla--federacion .marquesina__titulo a:hover { color: var(--bone); }
.pantalla--federacion .federacion__nota { margin: 12px var(--margen) 0; font-size: 0.9rem; }
.pantalla--federacion .federacion__nota a { color: var(--bone); }
/* Patrocinadores */
.pantalla--patrocinadores .patrocinador--principal { margin: 0 var(--margen) 12px; padding: 20px; }
.pantalla--patrocinadores .pliego__cabecera .intro { -webkit-line-clamp: 2; }
.pantalla--patrocinadores .patrocinadores__rejilla { margin: 0 var(--margen); }
.pantalla--patrocinadores .patrocinadores__nota { margin: 14px var(--margen) 0; font-size: 0.9rem; }
/* Mercado: en el celular, anuncios y talleres son dos paneles que se deslizan; en escritorio, dos columnas */
.pantalla--mercado .mercado__columnas { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--margen); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pantalla--mercado .mercado__columnas::-webkit-scrollbar { display: none; }
.pantalla--mercado .mercado__columnas > div { flex: 0 0 min(88%, 30rem); scroll-snap-align: start; background: var(--bone); color: var(--ink); padding: 18px 20px 4px; border-radius: 16px; }
.pantalla--mercado .bloque__titulo { font-size: 1.3rem; margin-bottom: 8px; }
.pantalla--mercado .lista li { padding: 10px 0; }
.pantalla--mercado .bloque__nota { display: none; }
.pantalla--mercado .lista p { font-size: 0.95rem; }
@media (min-width: 48em) { .pantalla--mercado .mercado__columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; overflow: visible; } .pantalla--mercado .mercado__columnas > div { flex-basis: auto; } }
/* El pie es la última pantalla: cierre «Vio toda la edición» + créditos */
.pie.pantalla--pie { min-height: 100vh; min-height: var(--alto-pantalla); scroll-snap-align: start; display: flex; flex-direction: column; justify-content: flex-end; padding-top: calc(var(--alto-cabecera-compacta) + 16px); }
.pie__fin { padding: 0 var(--margen) 40px; max-width: 46rem; }
.pie__fin .eyebrow { color: var(--ash); }
.pie__fin .intro { color: var(--ash); margin-bottom: 20px; }
.pie__fin-titulo { font-size: clamp(2rem, 1.3rem + 3.6vw, 4rem); margin-bottom: 12px; }
.pie__fin .pildora--texto { color: var(--bone); }

/* ── Que todo quepa en la pantalla: alturas de tarjeta en función de la ventana ── */
.pantalla--seccion .evento__figura img, .pantalla--seccion .testimonio__figura img, .pantalla--seccion .pieza__figura img { aspect-ratio: auto; height: clamp(120px, 21vh, 240px); }
.pantalla--seccion .evento__figura { margin-bottom: 12px; }
.pantalla--seccion .evento { padding-top: 12px; }
.pantalla--seccion .evento__dia { font-size: 2.2rem; }
.pantalla--seccion .evento__titulo { font-size: 1.15rem; margin-bottom: 4px; }
.pantalla--seccion .evento__descripcion { -webkit-line-clamp: 2; margin-top: 8px; font-size: 0.95rem; }
.pantalla--seccion .evento__acciones, .pantalla--seccion .evento .acciones { margin-top: 10px; }
.pantalla--seccion .testimonio__cita { -webkit-line-clamp: 3; font-size: 1.1rem; margin-bottom: 12px; }
.pantalla--seccion .testimonio__comillas { font-size: 2.4rem; }
.pantalla--seccion .testimonio__cuerpo { padding-top: 10px; }
.pantalla--seccion .testimonio { padding-bottom: 16px; }
.pantalla--seccion .testimonio__firma { font-size: 0.9rem; }
.pantalla--fiva .pliego__cabecera { margin-bottom: 10px; }
.pantalla--fiva .pieza__bajada { -webkit-line-clamp: 2; font-size: 0.95rem; margin-bottom: 12px; }
.pantalla--fiva .pieza__titulo { font-size: 1.15rem; }
.pantalla--fiva .pieza__etiqueta { margin-bottom: 8px; }
.pantalla--seccion .carrusel__puntos { margin-top: 10px; }
.pantalla--agenda .evento__descripcion { display: none; }   /* el detalle completo está en «Ver detalles» */
.pantalla--agenda .pliego__cabecera .intro { -webkit-line-clamp: 1; }
.pantalla--fiva .pliego__cabecera .intro { -webkit-line-clamp: 1; }
.pantalla--fiva .pliego__cabecera .statement { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); }
.pantalla--fiva .pliego__cabecera .eyebrow { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.pantalla--fiva .pieza__figura img { height: clamp(96px, 14vh, 180px); }
/* Votación: candidatos al Auto del Mes */
.candidato { display: flex; flex-direction: column; background: var(--bone); color: var(--ink); border-radius: 16px; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.12); transition: transform 0.3s var(--suave), opacity 0.3s ease, box-shadow 0.3s ease; }
.candidato__figura { margin: 0; overflow: hidden; }
.candidato__figura img { width: 100%; height: clamp(120px, 21vh, 240px); object-fit: cover; display: block; }
.candidato__cuerpo { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.candidato__titulo { font-size: 1.2rem; letter-spacing: -0.025em; margin: 0; }
.candidato__dato { margin: 0 0 6px; font-size: 0.95rem; color: var(--charcoal); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.candidato [data-votar] { margin-top: auto; align-self: flex-start; }
.candidato--elegido { box-shadow: 0 0 0 3px var(--ink); }
.candidato--elegido [data-votar] { background: var(--mint); border-color: var(--mint); color: var(--ink); }
.candidato--elegido { box-shadow: 0 0 0 3px var(--ink); }
.candidato__resultado { display: none; align-items: center; gap: 10px; margin: 2px 0 8px; }
.candidato--votado .candidato__resultado { display: flex; }
.candidato__barra { flex: 1; height: 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.1); overflow: hidden; }
.candidato__barra span { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--charcoal); transition: width 0.9s var(--suave); }
.candidato--elegido .candidato__barra span { background: var(--ink); }
.candidato--lider .candidato__barra span { background: var(--teal); }
.candidato__porcentaje { flex: none; font-size: 0.86rem; font-variant-numeric: tabular-nums; color: var(--charcoal); white-space: nowrap; }
.candidato--elegido .candidato__porcentaje { color: var(--ink); font-weight: var(--regular); }
.candidato--elegido [data-votar]:disabled { opacity: 1; cursor: default; }
.candidato [data-votar][hidden] { display: none; }   /* tras votar, solo queda la estadística */
.candidato--votado .candidato__dato { -webkit-line-clamp: 1; }
.pantalla--votacion .carrusel__puntos { color: var(--ink); }
.pantalla--votacion .pliego__cabecera .intro { -webkit-line-clamp: 1; }
.pantalla--votacion .candidato__figura img { height: clamp(110px, 17vh, 200px); }
.pantalla--votacion .carrusel__puntos { margin-top: 8px; }
/* Votación en mosaico: todos los candidatos a la vista a la vez, sin deslizar (2 columnas en el
   celular; 3 o 4 en tableta y computadora). Si quedan en número non, el último ocupa el ancho
   completo con la foto a un lado. */
.pantalla--votacion .carrusel__pista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; overflow: visible; scroll-snap-type: none; padding: 0 var(--margen); cursor: auto; }
.pantalla--votacion .carrusel__pista > li { scroll-snap-align: none; }
.pantalla--votacion .carrusel__pista > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pantalla--votacion .carrusel__pista > li:last-child:nth-child(odd) .candidato { flex-direction: row; }
.pantalla--votacion .carrusel__pista > li:last-child:nth-child(odd) .candidato__figura { flex: 0 0 44%; }
.pantalla--votacion .carrusel__pista > li:last-child:nth-child(odd) .candidato__figura img { height: 100%; min-height: 100%; }
.pantalla--votacion .candidato { border-radius: 14px; }
.pantalla--votacion .candidato__figura img { height: clamp(66px, 10vh, 170px); }
.pantalla--votacion .candidato__cuerpo { padding: 10px 12px 12px; gap: 4px; }
.pantalla--votacion .candidato .eyebrow { font-size: 0.66rem; margin: 0; }
.pantalla--votacion .candidato__titulo { font-size: 1rem; line-height: 1.12; }
.pantalla--votacion .candidato__dato { font-size: 0.82rem; line-height: 1.3; margin-bottom: 4px; }
.pantalla--votacion .candidato [data-votar] { min-height: 40px; padding: 6px 10px; font-size: 0.8rem; white-space: nowrap; align-self: stretch; }
@media (max-width: 22.5em) { .pantalla--votacion .candidato [data-votar] { white-space: normal; } }
/* Aire abajo para la píldora «Aa» y las barras del navegador */
.pantalla--votacion { padding-bottom: calc(62px + env(safe-area-inset-bottom) + var(--barras)); }
.pantalla--votacion .candidato__resultado { margin: 0 0 4px; }
.pantalla--votacion .carrusel__puntos, .pantalla--votacion .flechas, .pantalla--votacion .carrusel__progreso { display: none; }
@media (min-width: 48em) {
  .pantalla--votacion .carrusel__pista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .pantalla--votacion .carrusel__pista:has(> li:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pantalla--votacion .carrusel__pista > li:last-child:nth-child(odd) { grid-column: auto; }
  .pantalla--votacion .carrusel__pista > li:last-child:nth-child(odd) .candidato { flex-direction: column; }
  .pantalla--votacion .carrusel__pista > li:last-child:nth-child(odd) .candidato__figura { flex: none; }
  .pantalla--votacion .carrusel__pista > li:last-child:nth-child(odd) .candidato__figura img { height: clamp(110px, 20vh, 240px); min-height: 0; }
  .pantalla--votacion .candidato__figura img { height: clamp(110px, 20vh, 240px); }
  .pantalla--votacion .candidato__titulo { font-size: 1.2rem; }
  .pantalla--votacion .candidato__dato { font-size: 0.92rem; }
  .pantalla--votacion .candidato [data-votar] { align-self: flex-start; font-size: 0.9rem; }
}
@media (min-width: 64em) { .pantalla--votacion .carrusel__pista:has(> li:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pantalla--votacion .pantalla__seccion { max-width: 1280px; margin: 0 auto; } }
/* Antes y después: comparador arrastrable */
.pantalla--restauracion { justify-content: center; }
.pantalla--restauracion .pantalla__texto { max-width: 60rem; width: 100%; padding-bottom: 24px; }
.pantalla--restauracion .pantalla__titulo { margin-bottom: 8px; }
.comparador { position: relative; width: 100%; max-width: min(100%, calc(46vh * 16 / 10)); aspect-ratio: 16 / 10; margin: 0 0 14px; overflow: hidden; border-radius: 12px; background: var(--charcoal); cursor: ew-resize; touch-action: none; user-select: none; }
.comparador img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.comparador__antes { position: absolute; inset: 0; width: var(--corte, 50%); overflow: hidden; }
.comparador__antes img { width: auto; height: 100%; max-width: none; }
.comparador--suave .comparador__antes, .comparador--suave .comparador__mango { transition: width 0.6s var(--suave), left 0.6s var(--suave); }
.comparador__mango { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--bone); transform: translateX(-1px); pointer-events: none; }
.comparador__mango b { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: var(--bone); color: var(--ink); display: flex; align-items: center; justify-content: center; font-weight: var(--regular); font-size: 1rem; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); letter-spacing: -0.05em; }
.comparador__etiqueta { position: absolute; top: 12px; padding: 4px 10px; border-radius: var(--radio-pildora); background: rgba(0, 0, 0, 0.6); color: var(--bone); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.02em; pointer-events: none; }
.comparador__etiqueta--antes { left: 12px; } .comparador__etiqueta--despues { right: 12px; }
.comparador__control { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; }
.comparador__control input { width: 100%; opacity: 0; height: 32px; margin: 0; cursor: ew-resize; }
.comparador__control input:focus-visible { opacity: 1; }
.pantalla--restauracion .pantalla__bajada { -webkit-line-clamp: 2; }
@media (min-width: 64em) {
  .pantalla--restauracion .pantalla__texto { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-areas: "comp eyebrow" "comp titulo" "comp bajada" "comp acciones" "comp toque"; column-gap: 40px; align-items: start; align-content: center; }
  .pantalla--restauracion .comparador { grid-area: comp; max-width: none; align-self: center; }
  .pantalla--restauracion .pantalla__eyebrow { grid-area: eyebrow; }
  .pantalla--restauracion .pantalla__titulo { grid-area: titulo; }
  .pantalla--restauracion .pantalla__bajada { grid-area: bajada; -webkit-line-clamp: 4; }
  .pantalla--restauracion .pantalla__acciones { grid-area: acciones; }
  .pantalla--restauracion .pantalla__toque { grid-area: toque; }
}
/* FIVA: logotipo grande (3×) junto al texto en escritorio, encima en el teléfono */
.pantalla--fiva .fiva__enlace { display: block; width: 100%; max-width: 420px; margin: 0 0 12px; }
.pantalla--fiva .fiva__logo { height: auto; max-height: none; width: 100%; max-width: 420px; object-position: left; }
@media (min-width: 64em) {
  .pantalla--fiva .pliego__cabecera { flex-wrap: nowrap; align-items: center; }
  .pantalla--fiva .pliego__cabecera .flechas { flex: none; }
  .pantalla--fiva .pliego__cabecera > div { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 40px; align-items: center; flex: 1 1 auto; min-width: 0; }
  .pantalla--fiva .fiva__enlace { grid-column: 1; grid-row: 1 / span 3; margin: 0; width: auto; max-width: none; }
  .pantalla--fiva .fiva__logo { width: auto; height: 168px; max-width: 32vw; }
  .pantalla--fiva .pliego__cabecera .eyebrow, .pantalla--fiva .pliego__cabecera .statement, .pantalla--fiva .pliego__cabecera .intro { grid-column: 2; }
  .pantalla--fiva .pliego__cabecera .statement { margin-bottom: 6px; }
}
/* ── Reel del patrocinador (video vertical, como TikTok) ── */
.pantalla--reel { justify-content: stretch; padding: 0; background: var(--ink); }
.pantalla--reel::before { content: ""; position: absolute; inset: -40px; background: var(--reel-poster, none) center / cover no-repeat; filter: blur(28px) brightness(0.62) saturate(1.1); z-index: 0; }
/* El mismo video, diminuto y desenfocado, llenando los lados (lo dibuja revista.js); encima de la foto */
.reel__ambiente { position: absolute; inset: -60px; width: calc(100% + 120px); height: calc(100% + 120px); z-index: 0; filter: blur(40px) brightness(0.62) saturate(1.2); opacity: 0; transition: opacity 0.6s ease; pointer-events: none; }
.pantalla--reel-ambiente .reel__ambiente { opacity: 1; }
.reel__marco { position: relative; z-index: 1; width: 100%; height: 100%; margin: 0 auto; overflow: hidden; background: #000; }
@media (min-aspect-ratio: 3/4) { .reel__marco { width: calc(100vh * 9 / 16); width: calc(var(--alto-pantalla) * 9 / 16); max-width: 100%; box-shadow: 0 0 0 1px rgba(255, 254, 247, 0.12), 0 30px 80px rgba(0, 0, 0, 0.6); } }
.reel__medio { position: absolute; inset: 0; cursor: pointer; }
.reel__video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.reel__velo { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 22%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.25) 100%); pointer-events: none; }
.reel__pausa { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: var(--bone); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; padding-left: 6px; opacity: 0; transition: opacity var(--duracion) ease; pointer-events: none; }
.pantalla--reel-pausado .reel__pausa { opacity: 1; }
.reel__publicidad { position: absolute; left: var(--margen); top: calc(var(--alto-cabecera-compacta) + 4px); z-index: 3; padding: 4px 10px; border-radius: var(--radio-pildora); background: rgba(0, 0, 0, 0.5); color: var(--bone); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.02em; border: 1px solid rgba(255, 254, 247, 0.35); }
.reel__acciones { position: absolute; right: 10px; bottom: calc(96px + env(safe-area-inset-bottom) + var(--barras)); z-index: 3; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.reel__accion { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 60px; border: 0; padding: 0; background: none; color: var(--bone); font: inherit; font-size: 0.8rem; cursor: pointer; text-decoration: none; }
.reel__accion .reel__icono, .reel__accion .icono-wa { width: 50px; height: 50px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 254, 247, 0.35); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; transition: background-color var(--duracion) ease, transform var(--duracion) var(--suave); }
.reel__accion .icono-wa { padding: 13px; }
.reel__accion:hover .reel__icono, .reel__accion:hover .icono-wa { background: var(--bone); color: var(--ink); transform: scale(1.06); }
.reel__accion[aria-pressed="true"] .reel__icono { background: var(--bone); color: var(--ink); }
.reel__perfil { position: absolute; left: var(--margen); right: 84px; bottom: calc(22px + env(safe-area-inset-bottom) + var(--barras)); z-index: 3; color: var(--bone); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }   /* 84px: libra la píldora «Aa» de la esquina */
.reel__cabeza { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; margin-bottom: 8px; }
.reel__avatar { width: 54px; height: 54px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; padding: 8px; box-sizing: border-box; box-shadow: 0 0 0 2px var(--bone); flex: none; }
.reel__avatar img { width: 100%; height: 100%; object-fit: contain; }
.reel__nombre { display: flex; flex-direction: column; line-height: 1.2; }
.reel__nombre strong { font-weight: var(--regular); font-size: 1.05rem; }
.reel__nombre small { font-size: 0.82rem; opacity: 0.85; }
.reel__texto { margin: 0 0 6px; font-size: 0.92rem; line-height: 1.38; max-width: 34ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.reel__texto--completo { -webkit-line-clamp: unset; }
.reel__etiquetas { margin: 0 0 10px; font-size: 0.84rem; opacity: 0.85; }
.reel__boton { min-height: 42px; padding-top: 8px; padding-bottom: 8px; }
.reel__progreso { position: absolute; left: 0; right: 0; bottom: var(--barras); height: 3px; background: rgba(255, 254, 247, 0.25); z-index: 3; }
.reel__progreso span { display: block; height: 100%; width: 0; background: var(--bone); transition: width 0.25s linear; }
/* Patrocinadores secundarios en el publirreportaje */
.pantalla__patrocinadores { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 0 0 18px; }
.pantalla__patrocinadores .eyebrow { margin: 0; width: 100%; color: var(--ash); }
.pantalla__patrocinador { display: inline-flex; align-items: center; padding: 10px 16px; background: var(--bone); border-radius: 12px; }
.pantalla__patrocinador img { height: 34px; width: auto; display: block; }
.patrocinador--secundario .patrocinador__logo { max-height: 44px; }
/* Ubicación en la tarjeta del evento: pin + lugar + Maps · Waze */
.evento__ubicacion { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 4px 10px; margin: 4px 0 0; font-size: 0.9rem; min-width: 0; }
.evento__ubicacion-datos { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--charcoal); }
.evento__ubicacion-lugar { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.evento__ubicacion-datos { flex: 1 1 auto; min-width: 0; }
.evento__ubicacion-enlaces { flex: none; }
.icono-pin { width: 16px; height: 16px; flex: none; }
.evento__ubicacion-enlaces { display: inline-flex; gap: 6px; }
.evento__ubicacion-enlace { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px; border: 1px solid currentColor; border-radius: var(--radio-pildora); font-size: 0.82rem; text-decoration: none; color: inherit; letter-spacing: 0.01em; }
.evento__ubicacion-enlace:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }
/* Tarjeta de mapa en el lector */
.mapa-tarjeta { margin: 24px 0; border: 1px solid var(--ink); border-radius: 16px; overflow: hidden; background: var(--bone); }
.mapa-tarjeta__fondo { position: relative; height: 140px; display: flex; align-items: center; justify-content: center; color: var(--ink); background-color: #eef1ea; background-image: linear-gradient(rgba(0, 0, 0, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.08) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, 0.16) 2px, transparent 2px), linear-gradient(90deg, rgba(0, 0, 0, 0.16) 2px, transparent 2px); background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px; }
.mapa-tarjeta__fondo .icono-pin { width: 44px; height: 44px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25)); }
.mapa-tarjeta__datos { padding: 14px 16px 0; }
.mapa-tarjeta__lugar { display: block; font-size: 1rem; }
.mapa-tarjeta__enlaces { padding: 12px 16px 16px; }
/* «… Ver más» */
.ver-mas { display: inline-block; margin: -8px 0 12px; padding: 4px 0; border: 0; background: none; color: inherit; font: inherit; font-size: 0.95rem; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; min-height: 32px; opacity: 0.9; }
.ver-mas:hover { opacity: 1; text-decoration-thickness: 2px; }
.pantalla--foto .ver-mas, .oscuro .ver-mas { color: var(--bone); }
/* WhatsApp en «Compartir» */
.icono-wa { width: 18px; height: 18px; flex: none; }
.pildora--wa { gap: 8px; }
/* Carta editorial completa en su pantalla */
.pantalla--editorial { justify-content: center; padding-top: calc(var(--alto-cabecera-real, var(--alto-cabecera-compacta)) + 12px); }   /* centrada, pero nunca bajo la píldora de logotipos */
.pantalla--editorial .pantalla__texto { max-width: 60rem; padding-bottom: 28px; }
.pantalla__titulo--carta { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); max-width: 24ch; }
.pantalla__carta { font-weight: var(--ligera); font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.08rem); line-height: 1.5; color: var(--charcoal); margin: 0 0 16px; }
.pantalla__carta p { margin: 0 0 0.9em; }
.pantalla__carta em { font-style: normal; color: var(--ink); }
.pantalla__carta .firma { margin: 8px 0 0; }
/* Carta que no cabe completa: se desvanece al final y se ofrece «Leer la carta completa» */
.pantalla__carta--recortada { overflow: hidden; columns: auto !important; margin-bottom: 12px; -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent); }
.pantalla__leer-mas { margin: 0 0 14px; }
.pantalla__leer-mas[hidden] { display: none; }
@media (min-width: 64em) { .pantalla__carta { columns: 2; column-gap: 40px; } .pantalla__carta p { break-inside: avoid; } }
/* Publirreportaje: banner arriba, logotipo y texto abajo */
/* El anuncio ocupa lo que sobra arriba del texto (hasta 38vh) y en pantallas bajas cede primero él, nunca el texto */
.pantalla--publirreportaje .pantalla__anuncio--publi { position: static; inset: auto; height: auto; max-height: 38vh; min-height: calc(var(--alto-cabecera-compacta) + 64px); flex: 1 1 auto; padding: calc(var(--alto-cabecera-compacta) + 4px) var(--margen) 0; display: flex; align-items: flex-end; overflow: hidden; }
.pantalla--publirreportaje .pantalla__anuncio--publi picture { display: block; width: 100%; height: 100%; min-height: 0; }
.pantalla--publirreportaje .pantalla__anuncio--publi img { width: 100%; height: 100%; max-height: calc(38vh - var(--alto-cabecera-compacta) - 4px); object-fit: contain; object-position: center bottom; display: block; }
.pantalla--publirreportaje .pantalla__texto { flex: 0 0 auto; padding-top: 12px; }
@media (max-height: 700px) { .pantalla--publirreportaje .pantalla__texto .pantalla__bajada { display: none; } }   /* teléfonos bajos: cede la bajada, no el margen que libra la píldora «Aa» */
.pantalla--publirreportaje .pantalla__logo { margin-bottom: 12px; max-height: 56px; }
/* Anuncios de época: miniaturas que abren el visor */
.anuncio-boton { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; text-align: left; }
.anuncio-boton figure { margin: 0; }
.anuncio-boton img { transition: transform var(--duracion) var(--suave); }
.anuncio-boton:hover img { transform: scale(1.03); }
.pantalla--archivo .archivo__anuncios img { height: clamp(100px, 18vh, 220px); width: 100%; object-fit: cover; }
.pantalla--archivo .video-epoca { max-width: min(100%, calc(38vh * 16 / 9)); }
/* Visor (lightbox) */
body.visor-abierto .cabecera, body.visor-abierto #flotante, body.visor-abierto .continuar { visibility: hidden; }
.oscuro .archivo__nota a, .pantalla--archivo .archivo__nota a { color: var(--bone); }
.visor { position: fixed; inset: 0; z-index: 70; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(0, 0, 0, 0.92); color: var(--bone); display: none; }
.visor[open] { display: flex; align-items: center; justify-content: center; animation: hoja-entrar 0.3s var(--suave) both; }
.visor::backdrop { background: transparent; }
.visor__figura { margin: 0; max-width: min(92vw, 60rem); max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 72px 16px 56px; }
.visor__imagen { max-width: 100%; max-height: calc(100vh - 160px); object-fit: contain; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
.visor__pie { font-size: 0.9rem; color: var(--ash); text-align: center; }
.visor__cerrar { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: var(--margen); }
.visor__flecha { position: absolute; top: 50%; transform: translateY(-50%); }
.visor__flecha--ant { left: var(--margen); } .visor__flecha--sig { right: var(--margen); }
.visor__contador { position: absolute; bottom: calc(16px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); margin: 0; font-size: 0.82rem; color: var(--ash); font-variant-numeric: tabular-nums; }
@media (max-width: 47.9em) { .visor__flecha { top: auto; bottom: calc(10px + env(safe-area-inset-bottom)); transform: none; } .visor__contador { bottom: calc(24px + env(safe-area-inset-bottom)); } .visor__figura { padding: 64px 8px 72px; } }   /* en el teléfono, flechas abajo (además de deslizar) */

/* Secciones completas dentro del lector (formulario, trivia, mercado, FIVA, Federación, archivo) */
.pieza__cuerpo--seccion { display: block; }
.lector__cuerpo .pieza__cuerpo--seccion .formulario { margin-top: 8px; }
.lector__cuerpo .pieza__cuerpo--seccion .trivia__lista { margin: 8px 0 0; padding: 0; }
.lector__cuerpo .pieza__cuerpo--seccion .carrusel { margin: 0; }
.lector__cuerpo .pieza__cuerpo--seccion .carrusel__pista { display: grid; grid-template-columns: 1fr; gap: 24px; overflow: visible; scroll-snap-type: none; padding: 0; margin: 0; }
.lector__cuerpo .pieza__cuerpo--seccion .carrusel__pista > li { flex-basis: auto; width: auto; scroll-snap-align: none; }
.lector__cuerpo .pieza__cuerpo--seccion .carrusel__progreso, .lector__cuerpo .pieza__cuerpo--seccion .guia { display: none; }
.lector__cuerpo .pieza__cuerpo--seccion .cifras { margin: 8px 0 24px; }
.lector__cuerpo .pieza__cuerpo--seccion .mercado__columnas { margin: 0; }
.lector__cuerpo .pieza__cuerpo--seccion .archivo__anuncios { margin: 8px 0 0; }
.lector__cuerpo .pieza__cuerpo--seccion .archivo__nota { margin-top: 24px; }
.lector__cuerpo .pieza__cuerpo--seccion h3 { font-size: 1.25rem; letter-spacing: -0.02em; margin: 28px 0 10px; }
.lista-clubes { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; }
.lista-clubes li { break-inside: avoid; border-top: 1px solid var(--hairline); padding: 8px 0; font-size: 0.95rem; }
html.js .lector__cuerpo [data-revelar] { opacity: 1; transform: none; }

/* ═══════════════════════════════════════════════════════════════════
   PIE · negro, lista de enlaces con ↗, logotipo gigante
   ═══════════════════════════════════════════════════════════════════ */
.pie { position: relative; z-index: 1; background: var(--ink); color: var(--bone); padding: 48px 0 0; scroll-snap-align: start; }
.pie__interior { padding: 0 var(--margen); display: grid; gap: 40px; }
@media (min-width: 64em) {
  .pie__interior { grid-template-columns: 1fr 1fr 1fr; gap: 0; }
  .pie__columna { padding: 0 40px; }
  .pie__columna:first-child { padding-left: 0; }
  .pie__columna:last-child { padding-right: 0; }
  .pie__nav.pie__columna { margin-top: 0; border-left: 1px solid var(--hairline-inv); border-right: 1px solid var(--hairline-inv); padding: 0 32px; }
  .pie__lista li:first-child { border-top: 0; }
  .pie__indice { border-top: 0; }   /* como el primer renglón de siempre: sin línea arriba */
  .pie__nav .pie__lista li:first-child { border-top: 1px solid var(--hairline-inv); }
  .pie__cierre:first-child { padding-top: 0; }
}
.pie .pie__legal { padding: 40px var(--margen) 24px; }
.pie__identidad { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.pie__identidad img { width: 44px; height: 44px; flex: none; }
.pie__eyebrow { margin: 0; font-size: 0.82rem; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.01em; }
.pie__descripcion { color: var(--ash); font-size: 0.95rem; max-width: 40rem; margin: 0 0 24px; }
.pie__dato { display: inline-block; font-size: 1.1rem; margin: 0 0 8px; text-decoration: none; min-height: 44px; }
.pie__lista { list-style: none; margin: 32px 0 0; padding: 0; }
.pie__lista li { border-top: 1px solid var(--hairline-inv); margin: 0; }
.pie__lista li:last-child { border-bottom: 1px solid var(--hairline-inv); }
.pie__lista a, .pie__lista button { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 16px; padding: 18px 0; text-decoration: none; text-transform: uppercase; font-size: 0.95rem; letter-spacing: 0.01em; background: none; border: 0; cursor: pointer; text-align: left; color: var(--bone); }
.pie__lista a::after, .pie__lista button::after { content: "↗"; font-weight: var(--ligera); font-size: 1.2rem; transition: transform var(--duracion) var(--suave); }
.pie__lista a:hover::after, .pie__lista button:hover::after { transform: translate(3px, -3px); }
.pie__cierre { padding: 32px 0 0; }
.pie__cierre h2 { font-size: 1.3rem; margin: 0 0 6px; }
.pie__cierre p { color: var(--ash); font-size: 0.95rem; margin: 0; max-width: 40rem; }
.pie__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; color: var(--ash); font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.01em; }
.pie__legal p { margin: 0; }
.pie__cartel { display: block; margin: 0; padding: 8px var(--margen) 0; overflow: hidden; line-height: 0.72; text-decoration: none; }
.pie__cartel .marca-grande { color: var(--bone); -webkit-text-stroke-color: var(--bone); transition: opacity var(--duracion) ease; }
.pie__cartel:hover .marca-grande { opacity: 0.85; }

/* ═══════════════════════════════════════════════════════════════════
   LECTOR · los artículos se leen en una hoja de pantalla completa
   ═══════════════════════════════════════════════════════════════════ */
.lector__progreso { position: sticky; top: var(--alto-cabecera); z-index: 2; height: 2px; background: var(--hairline); }
.lector__progreso span { display: block; height: 100%; width: 0; background: var(--ink); transition: width 0.15s linear; }
.lector__interior { max-width: 46rem; margin: 0 auto; padding: 8px var(--margen) 96px; }
.lector__columnas { display: grid; gap: 24px; }
.lector__datos { display: grid; gap: 14px; align-content: start; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.lector__dato { margin: 0; font-size: 0.9rem; }
.lector__dato .eyebrow { margin-bottom: 2px; }
.lector__acciones-datos { margin-top: 4px; }
.lector__acciones-datos .pildora { justify-content: center; }
.prosa blockquote { margin: 1.6em 0; padding: 0; font-size: 1.25rem; font-weight: var(--ligera); font-style: italic; letter-spacing: -0.02em; line-height: 1.3; }
.prosa blockquote p { margin: 0 0 0.5em; }
.prosa blockquote cite { display: block; font-style: normal; font-size: 0.86rem; color: var(--graphite); }
.lector__siguiente { margin: 0 0 32px; }
.lector__siguiente-tarjeta { display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: start; border-top: 1px solid var(--ink); padding-top: 20px; }
.lector__siguiente-tarjeta img { width: 96px; aspect-ratio: 4 / 5; object-fit: cover; }
.lector__siguiente-tarjeta h3 { font-size: 1.35rem; letter-spacing: -0.025em; margin: 0 0 6px; }
.lector__siguiente-tarjeta p { color: var(--graphite); font-size: 0.95rem; margin: 0 0 14px; max-width: 40ch; }
@media (min-width: 64em) {
  .lector__interior { max-width: 72rem; }
  .lector__cabecera { max-width: 46rem; }
  .lector__interior { max-width: 46rem; }
  .lector__datos { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 40px; }
  .lector__acciones-datos { grid-column: 1 / -1; }
  .lector__figura { margin-inline: 0; }
  .lector__pie { max-width: 40rem; }
  .lector__siguiente-tarjeta { grid-template-columns: 140px 1fr; gap: 28px; }
  .lector__siguiente-tarjeta img { width: 140px; }
}
.lector__herramientas { display: flex; gap: 8px; align-items: center; }
.lector__etiqueta { margin: 16px 0 16px; }
.lector__titulo { font-size: clamp(2rem, 1.3rem + 3vw, 3.2rem); letter-spacing: -0.03em; line-height: 1; margin: 0 0 16px; max-width: 20ch; }
.lector__bajada { font-size: 1.2rem; font-weight: var(--ligera); color: var(--charcoal); letter-spacing: -0.02em; margin: 0 0 24px; max-width: 34ch; }
.lector__figura { margin: 0 calc(-1 * var(--margen)) 32px; }
.lector__figura img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (min-width: 48em) { .lector__figura { margin-inline: 0; } }
.lector__cuerpo { max-width: var(--ancho-texto); font-size: 1.05rem; line-height: 1.6; min-width: 0; }
.lector__cuerpo .pieza__cuerpo { display: block; }
.lector__evento { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hairline); padding: 16px 0; margin: 0 0 24px; display: grid; gap: 6px; font-size: 0.95rem; }
.lector__evento strong { display: inline-block; min-width: 6.5rem; color: var(--graphite); font-weight: var(--regular); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.01em; }
.lector__acciones-evento { margin: 24px 0 8px; }
.prosa p { margin-bottom: 1.2em; }
.prosa h3 { font-size: 1.35rem; margin-top: 1.6em; letter-spacing: -0.02em; }
.prosa li { margin-bottom: 0.5em; }
.prosa .nota { border-left: 2px solid var(--ink); padding: 4px 0 4px 16px; margin: 1.5em 0; color: var(--charcoal); font-size: 0.95rem; }
.prosa .nota strong { color: var(--ink); }
/* Imágenes, video y YouTube insertados en medio de un texto (nota, artículo, editorial…) desde
   el botón «Insertar» del panel: nunca se salen del ancho de la columna de lectura. */
.prosa img, .prosa video { display: block; width: 100%; height: auto; margin: 1.4em 0; border-radius: 10px; }
.prosa .incrustado-video { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 1.4em 0; border-radius: 10px; overflow: hidden; background: var(--ink); }
.prosa .incrustado-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lector__pie { border-top: 1px solid var(--hairline); margin-top: 40px; padding-top: 24px; }

/* ═══════════════════════════════════════════════════════════════════
   GUÍAS ANIMADAS · «deslice» en los carruseles y «baje» en la portada
   ═══════════════════════════════════════════════════════════════════ */
.carrusel { position: relative; }
.guia { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 3; pointer-events: none; display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; background: var(--ink); color: var(--bone); border-radius: var(--radio-pildora); box-shadow: 0 0 0 1.5px var(--bone); font-size: 0.95rem; letter-spacing: -0.018em; white-space: nowrap; animation: guia-entrar 0.5s var(--suave) both; }
.guia--saliendo { animation: guia-salir 0.4s ease both; }
@keyframes guia-entrar { from { opacity: 0; transform: translate(-50%, -40%); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes guia-salir { to { opacity: 0; transform: translate(-50%, -60%); } }
.guia__mano { width: 40px; height: 40px; flex: none; animation: guia-mano 1.8s ease-in-out infinite; }
@keyframes guia-mano { 0%, 100% { transform: translateX(10px) rotate(-6deg); } 50% { transform: translateX(-10px) rotate(6deg); } }
.guia__flechas { display: inline-flex; gap: 2px; margin-left: 4px; }
.guia__flechas span { opacity: 0.3; animation: guia-flecha 1.8s ease-in-out infinite; }
.guia__flechas span:nth-child(2) { animation-delay: 0.2s; } .guia__flechas span:nth-child(3) { animation-delay: 0.4s; }
@keyframes guia-flecha { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
.guia-vertical { margin: 16px 0 0; font-size: 0.9rem; color: var(--bone); opacity: 0.9; display: inline-flex; align-items: center; gap: 10px; transition: opacity 0.4s ease; }
.guia-vertical__flecha { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--bone); border-radius: 50%; animation: guia-bajar 1.6s ease-in-out infinite; }
@keyframes guia-bajar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
body.ha-desplazado .guia-vertical { opacity: 0; }
:root[data-letra="grande"] .guia-vertical { color: var(--ink); } :root[data-letra="grande"] .guia-vertical__flecha { border-color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════════
   PÍLDORA FLOTANTE DE ACCESIBILIDAD · se abre y se cierra; al hacer
   scroll se atenúa para no estorbar y vuelve al detenerse
   ═══════════════════════════════════════════════════════════════════ */
.flotante { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 80; display: flex; align-items: center; gap: 8px; transition: opacity 0.35s ease, transform 0.35s var(--suave), bottom 0.3s var(--suave); }
.flotante--quieto { opacity: 0.35; transform: scale(0.9); transform-origin: right center; }
.flotante--oculto { opacity: 0; pointer-events: none; }
body.con-barra .flotante { bottom: calc(84px + env(safe-area-inset-bottom)); }
@media (max-width: 40em) { body.con-barra .flotante { bottom: calc(132px + env(safe-area-inset-bottom)); } }
.flotante__pill { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--ink); background: var(--ink); color: var(--bone); box-shadow: 0 0 0 1.5px var(--bone); font: inherit; font-size: 1.05rem; letter-spacing: -0.02em; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform var(--duracion) var(--suave), background-color var(--duracion) ease; }
.flotante__pill:hover { transform: scale(1.05); }
.flotante__pill[aria-expanded="true"] { background: var(--bone); color: var(--ink); }
.flotante__panel { display: flex; gap: 6px; padding: 6px; background: var(--ink); border-radius: var(--radio-pildora); box-shadow: 0 0 0 1.5px var(--bone); animation: flotante-entrar 0.3s var(--suave) both; }
.flotante__panel[hidden] { display: none; }
@keyframes flotante-entrar { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.flotante__boton { min-width: 44px; height: 44px; padding: 0 12px; border-radius: var(--radio-pildora); border: 1px solid transparent; background: var(--bone); color: var(--ink); font: inherit; font-size: 0.95rem; letter-spacing: -0.02em; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color var(--duracion) ease, color var(--duracion) ease; }
.flotante__boton:hover { background: var(--yellow); }
.flotante__boton[aria-pressed="true"] { background: var(--yellow); }
.flotante__boton--texto { font-size: 0.9rem; }
@media (max-width: 26em) { .flotante__boton { min-width: 40px; height: 40px; padding: 0 8px; } .flotante__panel { gap: 4px; } }

/* ═══════════════════════════════════════════════════════════════════
   LECTURA EN VOZ ALTA · barra y aviso
   ═══════════════════════════════════════════════════════════════════ */
.barra-lectura { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--bone); color: var(--ink); border-top: 1px solid var(--ink); padding: 10px var(--margen) calc(10px + env(safe-area-inset-bottom)); animation: subir 0.4s var(--suave) both; }
.barra-lectura[hidden] { display: none; }
.barra-lectura__interior { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.barra-lectura__estado { flex: 1 1 12rem; margin: 0; font-size: 0.9rem; display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--graphite); }
.barra-lectura__estado strong { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-lectura__pulso { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); flex: none; animation: pulso 1.4s ease-in-out infinite; }
.barra-lectura--pausada .barra-lectura__pulso { animation: none; opacity: 0.4; }
@keyframes pulso { 0%, 100% { transform: scale(0.75); opacity: 0.5; } 50% { transform: scale(1.1); opacity: 1; } }
.leyendo { outline: 1px solid currentColor; outline-offset: 12px; }
body.con-barra { padding-bottom: 88px; }
@media (max-width: 40em) { .barra-lectura__estado { flex-basis: 100%; } .barra-lectura .pildora { flex: 1 1 auto; } body.con-barra { padding-bottom: 136px; } }

.aviso-flotante { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translate(-50%, 8px); z-index: 95; max-width: min(92vw, 32rem); padding: 12px 20px; border-radius: 24px; background: var(--ink); color: var(--bone); font-size: 0.9rem; line-height: 1.4; opacity: 0; pointer-events: none; transition: opacity var(--duracion) ease, transform var(--duracion) ease; }
.aviso-flotante--visible { opacity: 1; transform: translate(-50%, 0); }
body.con-barra .aviso-flotante { bottom: 100px; }

/* ═══════════════════════════════════════════════════════════════════
   MOVIMIENTO REDUCIDO · IMPRESIÓN
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; scroll-snap-type: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js [data-revelar] { opacity: 1; transform: none; }
  .hero__medio { position: absolute; }
  .marquesina { -webkit-mask-image: none; mask-image: none; white-space: normal; }
  .marquesina__pista { flex-wrap: wrap; width: auto; animation: none; }
  .marquesina__pista[aria-hidden="true"] { display: none; }
  .puente__foto { transform: none !important; }
  html.js .pantalla__texto > * { opacity: 1; transform: none; }
  .pantalla__medio img { transform: none; }
  html { scroll-snap-type: none; }
}
@media print {
  :root { --bone: #fff; --mint: #fff; --pink: #fff; --blue: #fff; --yellow: #fff; --navy: #fff; --ink: #000; }
  html { font-size: 10.5pt; scroll-snap-type: none; }
  html.js [data-revelar] { opacity: 1 !important; transform: none !important; }
  .cabecera, .hoja, .menu, .aviso, .flotante, .barra-lectura, .aviso-flotante, .acciones, .evento__acciones, .flechas, .carrusel__progreso, .carrusel__puntos, .saltar, .formulario, .pie__lista, .pie__nav, .pie__cartel, .progreso-lectura, .aviso-privacidad, .hero__acciones, .continuar, .guia, .guia-vertical, .ver-mas, .pantalla__toque, .fuentes, .visor, .comparador__control, .comparador__mango, .evento__ubicacion-enlaces, .video-epoca__boton, .video-epoca__video, .pantalla__anuncio { display: none !important; }
  body { padding-bottom: 0 !important; background: #fff; color: #000; }
  .hero { background: none; height: auto !important; min-height: 0 !important; }
  .hero__medio { position: static; height: auto; } .hero__medio video { display: none; } .hero__medio .impresion__poster { width: 100%; height: auto; max-height: 40vh; object-fit: cover; }
  .hero__cartel { mix-blend-mode: normal; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0 0 8pt; background: none; } .marca-grande { font-size: 64pt !important; animation: none; color: #000; -webkit-text-stroke: 0; }
  .hero__banda { min-height: 0 !important; display: block; } .hero__banda::before { display: none; } .hero__sobre { color: #000; padding: 8pt 0; } .hero__sobre .eyebrow, .hero__titulo, .hero__bajada { color: #000; }
  .revista { display: block !important; }
  .pantalla, .pantalla--seccion { position: static; display: block; height: auto !important; min-height: 0 !important; padding: 14pt 0 12pt; margin: 0; overflow: visible; background: #fff !important; color: #000 !important; border-top: 1px solid #bbb; break-inside: avoid-page; text-shadow: none; }
  .pantalla--foto::after { display: none; }
  .pantalla__medio { position: static; height: auto; background: none; } .pantalla__medio img { width: 100%; height: auto; max-height: 38vh; object-fit: cover; transform: none; }
  html.js .pantalla__texto > *, html.js .hero__sobre > * { opacity: 1 !important; transform: none !important; animation: none !important; }
  .pantalla__texto { padding: 6pt 0 0; max-width: none; text-shadow: none; }
  .pantalla__eyebrow, .pantalla__bajada, .pliego__cabecera .intro, .pieza__bajada, .evento__descripcion, .candidato__dato { color: #333 !important; display: block; -webkit-line-clamp: unset; overflow: visible; }
  .pantalla__titulo { max-width: none; }
  .pantalla__carta { columns: 2; column-gap: 24pt; max-height: none; overflow: visible; }
  .carrusel { margin: 0; } .carrusel__pista { display: block; overflow: visible; padding: 0; scroll-snap-type: none; } .carrusel__pista > li { display: block; width: auto; margin: 0 0 12pt; break-inside: avoid; border-bottom: 1px solid #ddd; padding-bottom: 8pt; }
  .evento__figura img, .pieza__figura img, .testimonio__figura img, .candidato__figura img { height: auto !important; max-height: 30vh; }
  .testimonio, .candidato, .evento--proximo { border: 1px solid #999; background: #fff !important; color: #000 !important; }
  .impresion__cuerpo { margin: 8pt 0 0; font-size: 10pt; line-height: 1.45; color: #000; columns: 2; column-gap: 22pt; }
  .impresion__cuerpo p, .impresion__cuerpo li { break-inside: avoid; }
  .impresion__cuerpo h3 { break-after: avoid; }
  .impresion__cuerpo h3 { font-size: 11.5pt; margin: 10pt 0 4pt; }
  .pieza__cuerpo { display: none; }
  .comparador { max-width: none; aspect-ratio: auto; border-radius: 0; } .comparador img { position: static; width: 49%; height: auto; display: inline-block; } .comparador__antes { position: static; width: auto; display: inline; } .comparador__antes img { width: 49%; }
  .marquesina { -webkit-mask-image: none; mask-image: none; white-space: normal; box-shadow: none; padding: 0; background: none; } .marquesina__pista { flex-wrap: wrap; width: auto; animation: none; } .marquesina__pista--vuelta { display: none; } .marquesina__pista li { box-shadow: none; border: 1px solid #ccc; }
  .pantalla__cifras dd { font-size: 24pt; }
  .pie { background: #fff !important; color: #000 !important; min-height: 0 !important; padding: 12pt 0; } .pie__fin { padding: 0; } .pie__descripcion, .pie__fin .intro { color: #333 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
  @page { margin: 14mm; }
}

/* ═══════════════════════════════════════════════════════════════════
   CELULAR ACOSTADO (pantalla baja y ancha): lo que en vertical va apilado
   se acomoda de lado para que nada se encime
   ═══════════════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 540px) {
  .pantalla--publicidad:not(.pantalla--larga) .pantalla__anuncio { inset: 0 42% 0 0; height: 100%; padding: calc(var(--alto-cabecera-real, 88px) + 4px) 12px 16px var(--margen); }
  .pantalla--publicidad:not(.pantalla--larga) .pantalla__texto { margin-left: 58%; padding-bottom: 24px; }
  .reel__marco { width: min(100%, 600px) !important; }
  .reel__publicidad { top: 10px; left: 50%; transform: translateX(-50%); }
  .reel__acciones { bottom: 76px; gap: 8px; }   /* libra la píldora «Aa» de la esquina */
  .reel__accion-texto { display: none; }
  .reel__accion .reel__icono, .reel__accion .icono-wa { width: 42px; height: 42px; }
  .reel__perfil { bottom: 14px; right: 72px; }
  .reel__avatar { width: 40px; height: 40px; padding: 6px; }
  .reel__texto { -webkit-line-clamp: 2; }
  .reel__etiquetas { display: none; }
  .hero__control { right: auto; left: max(16px, env(safe-area-inset-left)); }
}
/* Celular muy angosto (≤ 360 px): la columna de acciones del reel, más compacta */
@media (max-width: 22.5em) {
  .reel__acciones { right: 6px; gap: 10px; }
  .reel__accion { width: 52px; font-size: 0.72rem; }
  .reel__accion .reel__icono, .reel__accion .icono-wa { width: 44px; height: 44px; }
  .reel__perfil { right: 64px; }
}
/* Las pantallas de sección arrancan siempre debajo de la cabecera real (en celulares chicos es más alta que el valor fijo) */
@media (max-width: 47.9em), (orientation: landscape) and (max-height: 540px) { html.js .pantalla--seccion { padding-top: max(calc(var(--alto-cabecera-compacta) - 4px), calc(var(--alto-cabecera-real, 0px) + 8px)); } }
/* «Ya salió la N.º X» / «Hay una versión nueva»: cuando la revista se dejó abierta días en el teléfono */
.aviso-version { position: fixed; z-index: 90; left: 50%; transform: translateX(-50%); top: calc(12px + env(safe-area-inset-top)); width: min(calc(100% - 24px), 520px); display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; border-radius: 16px; background: var(--ink); color: var(--bone); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); font-size: 0.95rem; line-height: 1.3; }
.aviso-version span { flex: 1; }
.aviso-version__cerrar { width: 40px; height: 40px; border: 0; background: transparent; color: inherit; font-size: 1.4rem; cursor: pointer; border-radius: 50%; }
@media print { .aviso-version { display: none; } }
/* Portada compacta (pantallas bajas): el antetítulo no pasa por debajo del botón de pausa del video */
.hero--compacto .hero__sobre > .eyebrow { display: block; padding-right: 56px; }
/* Celular muy angosto: los botones de la portada libran la píldora «Aa» de la esquina */
@media (max-width: 22.5em) { .hero__acciones { padding-right: 60px; } }

/* ═══════════════════════════════════════════════════════════════════
   REELS en pantallas más anchas que el video (tableta vertical, computadora):
   el video como una pantalla de teléfono con esquinas redondeadas, el fondo
   ambiental a los lados y los botones FUERA del video, a su derecha, para no
   taparlo. En el celular (donde el video llena la pantalla) no cambia nada.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-aspect-ratio: 3/4) and (min-height: 541px) {
  .reel__marco { height: calc(100% - 32px); margin: 16px auto; width: calc((100vh - 32px) * 9 / 16); width: calc((var(--alto-pantalla) - 32px) * 9 / 16); overflow: visible; background: transparent; box-shadow: none; }
  .reel__medio { border-radius: 20px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255, 254, 247, 0.14), 0 30px 80px rgba(0, 0, 0, 0.55); }
  .reel__progreso { left: 20px; right: 20px; bottom: 10px; border-radius: 3px; overflow: hidden; }
  .reel__publicidad { top: 18px; left: 18px; }
  .reel__perfil { left: 20px; right: 20px; bottom: 30px; }
  .reel__acciones { right: auto; left: calc(100% + 18px); bottom: 30px; }
  .reel__accion-texto { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
}
/* Tableta vertical (el video ocupa casi todo el ancho): la etiqueta «Publicidad» baja para no quedar
   bajo los logotipos, y los botones suben para librar la píldora «Aa» de la esquina */
@media (min-aspect-ratio: 3/4) and (max-aspect-ratio: 5/4) and (min-height: 541px) {
  .reel__publicidad { top: calc(var(--alto-cabecera-compacta) + 4px); }
  .reel__acciones { bottom: 104px; }
}
/* El título del lector recibe el foco al abrir una pieza (para el lector de pantalla); no necesita
   el recuadro de foco, que se veía como un marco negro alrededor del título */
.lector__titulo:focus { outline: none; }
/* Celular acostado: los dos logotipos, al tamaño compacto desde el inicio, para que la portada respire */
@media (orientation: landscape) and (max-height: 540px) {
  :root { --alto-cabecera-inicio: 88px; }
  .cabecera:not(.cabecera--desplazada) .marca__logo { width: 72px; height: 72px; }
  .cabecera:not(.cabecera--desplazada) { --logo: 54px; }
  .cabecera.cabecera--desplazada { --logo: 38px; }
  .hero__oficial { font-size: 12px; }
}
/* Celular chico (iPhone SE y parecidos): el mosaico de la votación, más compacto para que quepa entero */
@media (max-width: 47.9em) and (max-height: 740px) {
  .pantalla--votacion .pliego__cabecera .statement { font-size: 1.55rem; }
  .pantalla--votacion .pliego__cabecera .intro { display: none; }
  .pantalla--votacion .candidato__figura img { height: clamp(60px, 10vh, 90px); }
  .pantalla--votacion .candidato__dato { -webkit-line-clamp: 1; }
  .pantalla--votacion .candidato .eyebrow { display: none; }
}

/* Celular chico (iPhone SE y parecidos): la Federación y el video, compactos para caber completos */
@media (max-width: 47.9em) and (max-height: 740px) {
  .pantalla--federacion .pliego__cabecera .intro { display: none; }
  .pantalla--federacion .cifras { margin-bottom: 12px; }
  .pantalla--federacion .cifra { padding: 6px 0 8px; }
  .pantalla--federacion .cifra dt { margin-bottom: 2px; font-size: 0.72rem; }
  .pantalla--federacion .cifra dd { font-size: 2.1rem; line-height: 1; }
}
/* El botón del video en una sola línea: si el texto es largo, termina en «…» */
.reel__boton { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 26px; }

/* Botón de WhatsApp (FIVA ID Card, FAN FEMAAC) */
.pildora--whatsapp, .pantalla .pildora--whatsapp { background: #25d366; border-color: #25d366; color: #0b2e16; }
.pildora--whatsapp:hover { background: #1fbd59; border-color: #1fbd59; color: #0b2e16; }
/* FIVA ID Card: los botones de contacto dentro de su tarjeta */
.pieza__contacto { gap: 6px; }

/* FAN FEMAAC: la membresía, con su logotipo grande sobre fondo claro */
.pantalla--fan { justify-content: flex-end; }   /* como las demás pantallas: el texto abajo, nunca bajo la píldora de logotipos */
.pantalla__fan-logo, .pantalla--fan .pantalla__texto picture { display: block; width: min(230px, 52vw); height: auto; margin: 0 0 18px; }
.pantalla--fan .pantalla__titulo { max-width: 18ch; }
@media (max-height: 740px) { .pantalla__fan-logo, .pantalla--fan .pantalla__texto picture { width: min(170px, 42vw); margin-bottom: 12px; } }
@media (max-width: 47.9em) and (max-height: 740px) {
  .pantalla__fan-logo, .pantalla--fan .pantalla__texto picture { width: 120px; margin-bottom: 8px; }
  .pantalla--fan .pantalla__titulo { font-size: 1.7rem; }
  .pantalla--fan .pantalla__bajada { -webkit-line-clamp: 3; font-size: 0.92rem; }
}
/* Un logotipo como imagen de la nota (FAN FEMAAC): completo, sin recortar */
.lector__figura img[src*="fan-femaac"] { object-fit: contain; background: #fff; padding: 16px 0; }
/* FIVA en un celular chico: el logotipo y la introducción, más compactos, para que la sección quepa */
@media (max-width: 47.9em) and (max-height: 740px) {
  .pantalla--fiva .fiva__enlace { width: auto; margin-bottom: 6px; }
  .pantalla--fiva .fiva__logo { width: auto; height: 78px; }
  .pantalla--fiva .pliego__cabecera .intro { display: none; }
}

/* Todas las imágenes de tarjeta (eventos, notas, historias, candidatos, FIVA…) en proporción 16:9.
   Va al final y manda sobre las proporciones y alturas fijas de cada sección. */
.evento__figura img, .pieza__figura img, .testimonio__figura img, .candidato__figura img { aspect-ratio: 16 / 9 !important; height: auto !important; min-height: 0 !important; }

/* ── Preguntas frecuentes: respuestas plegables, botón + / − ── */
.faq__lista { gap: 0; }
.pieza-faq { margin: 0; border-bottom: 1px solid var(--hairline); }
.pieza-faq:first-child { border-top: 1px solid var(--hairline); }
.pieza-faq__pregunta { margin: 0; font-size: 1.02rem; }
.pieza-faq__boton { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 56px; padding: 12px 0; border: 0; background: none; color: inherit; font: inherit; font-weight: var(--regular); text-align: left; letter-spacing: -0.015em; cursor: pointer; }
.pieza-faq__signo { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid currentColor; transition: background-color var(--duracion) ease, color var(--duracion) ease; }
.pieza-faq__signo::before, .pieza-faq__signo::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform 0.3s var(--suave); }
.pieza-faq__signo::after { transform: translate(-50%, -50%) rotate(90deg); }
.pieza-faq__boton[aria-expanded="true"] .pieza-faq__signo { background: var(--ink); color: var(--bone); }
.pieza-faq__boton[aria-expanded="true"] .pieza-faq__signo::after { transform: translate(-50%, -50%) rotate(0deg); }   /* + se vuelve − */
.pieza-faq__boton:hover .pieza-faq__signo { background: var(--ink); color: var(--bone); }
.pieza-faq__respuesta { display: grid; grid-template-rows: 1fr; }
html.js .pieza-faq__respuesta { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.32s var(--suave), visibility 0s linear 0.32s; }
html.js .pieza-faq__respuesta--abierta { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 0.32s var(--suave), visibility 0s; }
.pieza-faq__respuesta > .prosa { min-height: 0; overflow: hidden; }
.pieza-faq__respuesta > .prosa > :last-child { margin-bottom: 14px; }
/* En su pantalla, la lista tiene alto fijo: abrir o cerrar una respuesta nunca cambia el tamaño de la pantalla */
.pantalla--faq .faq__lista { height: calc(100vh - 300px); height: calc(var(--alto-pantalla) - 300px - var(--barras)); max-height: none; overflow-y: auto; overscroll-behavior: contain; -webkit-mask-image: none; mask-image: none; }

/* ═══════════════════════════════════════════════════════════════════
   PATROCINADORES · una tarjeta por marca y «Su marca aquí»
   ═══════════════════════════════════════════════════════════════════ */
.patrocinadores__tarjetas { list-style: none; margin: 0 var(--margen) 16px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 48em) { .patrocinadores__tarjetas { grid-template-columns: repeat(auto-fill, minmax(220px, 300px)); gap: 18px; } }
.patrocinadores__tarjetas > li { margin: 0; display: flex; }
.patrocinio { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; padding: 16px; border-radius: 18px; background: #fff; color: var(--ink); text-decoration: none; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), inset 0 0 0 1px rgba(0, 0, 0, 0.08); transition: transform 0.25s var(--suave), box-shadow 0.25s ease; cursor: pointer; }
a.patrocinio:hover, .patrocinio:hover, .patrocinio:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(0, 0, 0, 0.1); text-decoration: none; }
.patrocinio__logo { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 9; padding: 10px; border-radius: 12px; background: #fff; }
.patrocinio__logo img, .patrocinio__logo picture { display: block; width: 100%; height: 100%; min-height: 0; max-height: 100%; object-fit: contain; }
.patrocinio__logo { overflow: hidden; }
@media (min-width: 48em) and (max-height: 820px) { .patrocinio__logo { aspect-ratio: auto; height: clamp(80px, 19vh, 160px); padding: 6px 8%; } }   /* cuadrado o alargado, cada logotipo llena su recuadro sin deformarse */
@media (min-width: 48em) { .patrocinio__logo { padding: 8% 14%; } }
.patrocinio__nivel { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--graphite); }
.patrocinio__descripcion { font-size: 0.88rem; line-height: 1.35; color: var(--charcoal); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.patrocinio__accion { margin-top: auto; }
.patrocinadores__anunciese { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 0 var(--margen); padding: 16px 18px; border-radius: 18px; border: 1px dashed rgba(0, 0, 0, 0.3); }
.patrocinadores__anunciese .eyebrow { margin: 0 0 4px; }
.patrocinadores__anunciese p { margin: 0; font-size: 0.95rem; color: var(--charcoal); max-width: 36rem; }
@media (max-width: 47.9em) {
  .patrocinio { padding: 12px; gap: 6px; }
  .patrocinio__descripcion { -webkit-line-clamp: 2; font-size: 0.82rem; }
  .patrocinio__accion { font-size: 0.8rem; padding: 6px 10px; min-height: 38px; }
}

/* Galería de fotos dentro de una nota: carrusel horizontal que se desliza con el dedo o el trackpad */
.prosa .galeria { display: flex; gap: 12px; margin: 1.8em 0; padding: 0 0 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.prosa .galeria figure { flex: 0 0 86%; margin: 0; scroll-snap-align: start; }
.prosa .galeria picture { display: block; }
.prosa .galeria img { display: block; width: 100%; margin: 0; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: 12px; background: var(--bone, #eee); }
.prosa .galeria figcaption { margin-top: 0.55em; font-size: 0.86rem; line-height: 1.4; color: var(--graphite); }
.prosa .galeria figcaption small { display: block; margin-top: 0.2em; font-size: 0.74rem; opacity: 0.8; }
@media (min-width: 900px) { .prosa .galeria figure { flex-basis: 72%; } }
.prosa .galeria-marco { position: relative; }
.prosa .galeria-marco .galeria__flecha { position: absolute; top: 30%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.9); color: #111; font-size: 1.1rem; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); transition: opacity 0.2s; }
.prosa .galeria-marco .galeria__flecha--ant { left: 10px; }
.prosa .galeria-marco .galeria__flecha--sig { right: 10px; }
.prosa .galeria-marco .galeria__flecha:disabled { opacity: 0; pointer-events: none; }

/* Cuéntenos su historia: dos opciones claras y un formulario corto que se envía por WhatsApp */
.pantalla--un-boton .pantalla__acciones, .pantalla--un-boton .acciones { display: grid; gap: 10px; width: min(100%, 26rem); }
.pantalla--un-boton .pantalla__acciones .pildora, .pantalla--un-boton .acciones .pildora { justify-content: center; width: 100%; min-height: 54px; font-size: 1.05rem; }
.formulario--whatsapp { display: grid; gap: 16px; }
.formulario__opciones { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
.formulario__opciones legend { margin-bottom: 10px; padding: 0; font-size: 1.1rem; font-weight: 500; }
.opcion-envio { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 14px; border: 2px solid rgba(0, 0, 0, 0.15); background: #fff; cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
.opcion-envio input { flex: none; width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--ink); }
.opcion-envio strong { display: block; font-size: 1.08rem; font-weight: 500; }
.opcion-envio small { display: block; margin-top: 3px; font-size: 0.92rem; color: var(--graphite); }
.opcion-envio--elegida { border-color: var(--ink); background: #fffdf2; }
.formulario--whatsapp .campo input, .formulario--whatsapp .campo textarea { font-size: 1.05rem; min-height: 50px; }
.formulario--whatsapp .campo label { font-size: 1rem; }
.formulario__ayuda { margin: 0; font-size: 0.95rem; line-height: 1.45; color: var(--charcoal); }
.formulario__enviar { width: 100%; justify-content: center; min-height: 56px; font-size: 1.1rem; }
.formulario__alterno { margin: 0; font-size: 0.92rem; color: var(--graphite); }
.pantalla--un-boton .pantalla__toque { display: none; }

/* Logotipo opcional sobre el título del hero (por ejemplo, el del evento del reportaje) */
.hero__logo { display: block; margin: 0 0 12px; }
.hero__logo img { display: block; width: clamp(72px, 8vw, 116px); height: auto; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45)); }
@media (max-height: 700px) { .hero__logo img { width: 60px; } .hero__logo { margin-bottom: 8px; } }
/* Logotipo dentro de una nota: centrado y a tamaño moderado */
.prosa figure.logo-evento { margin: 0.4em 0 1.6em; text-align: center; }
.prosa figure.logo-evento img { display: inline-block; width: min(180px, 46%); height: auto; margin: 0; border-radius: 0; }
.prosa figure.logo-evento figcaption { margin-top: 0.4em; font-size: 0.82rem; color: var(--graphite); }

/* Pie: las secciones (que ya están en el Menú) van plegadas en un renglón con el mismo estilo que
   los demás enlaces del pie; los enlaces útiles conservan su diseño de siempre (.pie__lista) */
.pie__nav { margin: 32px 0 0; }
.pie__nav .pie__lista { margin: 0; }
.pie__indice { border-top: 1px solid var(--hairline-inv); }
.pie__indice summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; list-style: none; cursor: pointer; text-transform: uppercase; font-size: 0.95rem; letter-spacing: 0.01em; color: var(--bone); }
.pie__indice summary::-webkit-details-marker { display: none; }
.pie__indice summary::after { content: "+"; font-weight: var(--ligera); font-size: 1.2rem; }
.pie__indice[open] summary::after { content: "−"; }
.pie__secciones { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.pie__secciones a { display: block; padding: 8px 0; font-size: 0.85rem; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.01em; color: var(--ash); text-decoration: none; }
.pie__secciones a:hover { color: var(--bone); }

/* Fotos de las notas: se tocan para verlas en grande (visor a pantalla completa con «✕ Cerrar») */
#lector img.foto-ampliable { cursor: zoom-in; }
#lector figure.figura-ampliable { position: relative; }
#lector figure.figura-ampliable::after {
  content: ""; position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; pointer-events: none;
  background: rgba(0, 0, 0, 0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 16px no-repeat;
}
#lector .lector__figura.figura-ampliable::after { top: 14px; right: 14px; }
.visor__cerrar { z-index: 2; min-height: 44px; padding: 10px 18px; font-size: 1rem; }
.visor__flecha { z-index: 2; }

/* Texto legible sobre cualquier foto: una sombra oscura va SIEMPRE detrás del bloque de texto (no
   depende de en qué parte de la foto caiga), así la bajada no se pierde sobre fotos claras */
.pantalla--foto .pantalla__texto::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: -96px; bottom: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.7) 55%, rgba(0, 0, 0, 0.45) 80%, rgba(0, 0, 0, 0) 100%);
}
@media (min-width: 48em) { .pantalla--foto .pantalla__texto::before { right: auto; width: min(100vw, 60rem); left: calc(-1 * var(--margen)); } }
.pantalla--foto .pantalla__bajada { color: rgba(255, 254, 247, 0.92); }
/* Pantallas bajas (iPhone SE o mini con las barras de Safari a la vista): menos aire, para que todo quepa */
@media (max-height: 620px) and (max-width: 47.9em) {
  .pantalla__texto { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  .pantalla__titulo { font-size: 1.65rem; margin-bottom: 8px; }
  .pantalla__bajada { margin-bottom: 14px; -webkit-line-clamp: 3; }
  .pantalla--seccion { padding-top: calc(var(--alto-cabecera-compacta) + 2px); }
  .pantalla__fan-logo, .pantalla--fan .pantalla__texto picture { width: 96px; margin-bottom: 6px; }
}
/* Portada en pantallas bajas (con las barras de Safari a la vista): la banda del titular se compacta
   para que la portada quepa completa sin moverse. El nombre LA GUANTERA no se toca. */
@media (max-height: 700px) and (max-width: 47.9em) {
  .hero .hero__sobre { padding-top: 26px; }
  .hero .hero__logo img { width: 40px; }
  .hero .hero__logo { margin-bottom: 6px; }
  .hero .hero__sobre .eyebrow { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.7rem; }
  .hero .hero__bajada { -webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 12px; }
}
@media (max-height: 600px) and (max-width: 47.9em) {
  .hero .hero__sobre { padding-top: 16px; }
  .hero .hero__logo, .hero .hero__bajada, .hero .guia-vertical { display: none; }
}
@media (max-height: 620px) and (max-width: 47.9em) { .pantalla--historias .testimonio__cita { -webkit-line-clamp: 2; } }

/* ═══════════════════════════════════════════════════════════════════
   MODO APP · la revista se desplaza dentro de un marco fijo (el <body>) del tamaño exacto de la
   pantalla, como una app. La página como tal no se mueve, así que Safari, Chrome y el navegador de
   Samsung no esconden ni muestran sus barras al deslizar: lo visible nunca cambia de tamaño y las
   secciones no pueden flotar, bailar ni quedar a medias. (Lo activa el script del <head>; sin
   JavaScript la revista es una página normal.)
   ═══════════════════════════════════════════════════════════════════ */
html.app { height: 100%; overflow: hidden; scroll-snap-type: none; scroll-behavior: auto; overscroll-behavior: none; }
html.app body {
  position: fixed; inset: 0; width: 100%; height: 100%;
  overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;                     /* sin rebote ni «jalar para recargar» dentro de la revista */
  scroll-snap-type: y mandatory; scroll-behavior: smooth; scroll-padding-top: 0;
}
html.app.saltando body, html.app.sin-iman body { scroll-snap-type: none; }
html.app.rueda body { scroll-snap-type: none; scroll-behavior: auto; }
html.app body.sin-scroll { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { html.app body { scroll-behavior: auto; scroll-snap-type: none; } }
@media print { html.app { height: auto; overflow: visible; } html.app body { position: static; height: auto; overflow: visible; } }

/* Sección FIVA: un solo botón «Leer» en cada tarjeta (en lugar de «Ver más», «Leer» y «Escuchar») */
.pieza__leer { margin: 0; }
.pantalla--fiva .pieza__bajada { margin-bottom: 12px; }

/* Tamaños estándar en el teléfono: todas las secciones con el mismo título, la misma introducción y
   la misma etiqueta de arriba; las tarjetas un poco más grandes y legibles. */
@media (max-width: 47.9em) {
  .pantalla--seccion .pliego__cabecera .statement { font-size: 1.6rem; line-height: 1.08; }
  .pantalla--seccion .pliego__cabecera .intro { font-size: 0.95rem; }
  .pantalla--seccion .pliego__cabecera .eyebrow { font-size: 0.78rem; }
  .pantalla--fiva .pieza__titulo { font-size: 1.3rem; }
  .pantalla--fiva .pieza__bajada { font-size: 0.95rem; }
  .pantalla--patrocinadores .patrocinio__nivel { font-size: 0.74rem; }
  .pantalla--patrocinadores .patrocinio__descripcion { font-size: 0.92rem; -webkit-line-clamp: 2; }
  .pantalla--patrocinadores .patrocinadores__anunciese p { font-size: 1rem; }
}
@media (max-width: 47.9em) {
  .pantalla--fiva .fiva__logo { width: auto; height: 64px; }
  .pantalla--fiva .fiva__enlace { display: inline-block; margin-bottom: 6px; }
  .pantalla--patrocinadores .patrocinio__logo { aspect-ratio: 5 / 2; padding: 6px 12px; }
  .pantalla--patrocinadores .patrocinadores__anunciese { padding: 12px 14px; gap: 10px; }
}


/* Carta editorial en el teléfono: por páginas */
.carta-prueba { margin-bottom: 10px; }
.carta-prueba--paginas { overflow: hidden; touch-action: pan-y; columns: auto; }
.carta-prueba--paginas p { break-inside: auto; }
.carta-paginas { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.carta-paginas__cuenta { font-size: 0.85rem; color: var(--graphite); margin-right: auto; }
.carta-paginas__ant { min-width: 44px; justify-content: center; }
.carta-prueba--desliza { overflow-y: auto; overscroll-behavior-y: auto; -webkit-overflow-scrolling: touch; padding-right: 6px;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent); mask-image: linear-gradient(to bottom, #000 78%, transparent); }
.carta-prueba--desliza.carta-desliza--fin { -webkit-mask-image: none; mask-image: none; }
.carta-desliza__barra { height: 3px; background: var(--hairline); border-radius: 2px; overflow: hidden; }
.carta-desliza__barra span { display: block; height: 100%; width: 0; background: var(--ink); transition: width 0.1s linear; }
.carta-desliza__pista { margin: 8px 0 0; font-size: 0.85rem; color: var(--graphite); text-transform: uppercase; letter-spacing: 0.02em; }
.carta-paginas { padding-right: 68px; }   /* libre de la píldora «Aa» */
/* En pantallas bajas, la guía «Deslice hacia arriba» de la primera visita no agrega alto a la portada */
@media (max-height: 700px) and (max-width: 47.9em) { .hero .guia-vertical { position: absolute; left: var(--margen); bottom: 2px; margin: 0; } }
/* Preguntas frecuentes en el teléfono: la lista mide lo que mide (sin desplazarse por dentro); con
   cuatro preguntas breves, cualquier respuesta abierta cabe en la pantalla */
@media (max-width: 47.9em) {
  .pantalla--faq .faq__lista { height: auto; max-height: none; overflow: visible; }
  .pantalla--faq .pieza-faq__boton { min-height: 48px; padding: 8px 0; }
  .pantalla--faq .pieza-faq .prosa { font-size: 0.95rem; }
}
.carta-paginas [hidden], .carta-paginas[hidden] { display: none !important; }

/* Logotipos oficiales (logo-femaac.png y fiva-logo.webp): cada uno trae su propio círculo u óvalo,
   así que no llevan fondo detrás y se muestran completos sin deformarse */
.marca__glifo, .marca__fiva { object-fit: contain; }
.marca__logo--pie { background: transparent; box-shadow: none; }
.fiva__logo { object-fit: contain; }