/* ── Axiforma (Kastelov) · tipografía única del sitio desde el 2026-09-08 ──
   Elegida por Carlos; la misma que usa Mayan Monkey. Archivos en assets/fuentes/.
   Sustituye a Montserrat + Nunito; el sitio ya no pide fuentes a Google. ── */
@font-face{font-family:Axiforma;src:url(../fuentes/Axiforma-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Axiforma;src:url(../fuentes/Axiforma-Medium.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Axiforma;src:url(../fuentes/Axiforma-SemiBold.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Axiforma;src:url(../fuentes/Axiforma-Bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Axiforma;src:url(../fuentes/Axiforma-ExtraBold.woff2) format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:Axiforma;src:url(../fuentes/Axiforma-Black.woff2) format('woff2');font-weight:900;font-style:normal;font-display:swap}

/* ═══════════════════════════════════════════════════════════
   5º Torneo de Golf · Grupo Anderson's — hoja de estilos
   Papel claro. Navy del spot y verde oliva de los logos de prensa.
   Sin mostaza en CSS (ver README).
   ═══════════════════════════════════════════════════════════ */
:root{
  color-scheme: light;
  --papel:#FFFFFF;
  --papel-2:#F3F5F1;
  --tinta:#232735;
  --tinta-2:#5A6070;
  --navy:#1A2043;
  --navy-2:#2A3160;
  --oliva:#7F8E40;
  --oliva-2:#6B7A33;
  --cielo:#DCEBF5;
  --pasto:#5DB040;
  --grama:#0F2E0A;   /* verde grama casi negro del header (antes #1E5414, Carlos lo quiso más oscuro) */
  --grama-2:#0A2006;
  --fuente-menu:Axiforma,'Helvetica Neue',Arial,sans-serif;
  --linea:rgba(35,39,53,.12);
  --fuente:Axiforma,'Helvetica Neue',Helvetica,Arial,sans-serif;
  --ancho:1180px;
  --radio:22px;
  accent-color:var(--oliva);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--fuente);font-size:17px;line-height:1.6;overflow-x:hidden}
/* NUNCA cursiva en este sitio (Carlos, 10 sep). Axiforma no trae itálica y el navegador
   la falsea inclinando la recta, que se ve fatal. */
i,em,cite,dfn,address,var{font-style:normal}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0 0 .5em;line-height:1.08;letter-spacing:-.01em;text-wrap:balance}
/* Un solo tamaño de titular de sección en todo el sitio, y en mayúsculas. */
h2{font-size:clamp(24px,2.7vw,34px);font-weight:800;text-transform:uppercase;letter-spacing:-.005em}
h3{font-size:clamp(20px,2.2vw,26px);font-weight:700}
p{margin:0 0 1em;text-wrap:pretty}
.kicker{/* sin uso desde el 2026-09-08: Carlos quitó los eyebrow de toda la web */font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--oliva);margin-bottom:14px}
.kicker--claro{color:#CFE0A6}
.seccion__cab{max-width:var(--ancho);margin:0 auto 34px;padding:0 24px}
/* Todos los botones del sitio van en MAYÚSCULA (Carlos, 10 sep). El padding-top compensa que
   Axiforma dibuja las mayúsculas altas dentro de su caja: sin él la tinta queda 4 px arriba. */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 30px 13px;border-radius:999px;font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border:0;cursor:pointer;font-family:inherit;transition:transform .25s,box-shadow .25s,background .25s}
.btn:hover{transform:translateY(-2px)}
.btn--verde{background:var(--oliva);color:#fff;box-shadow:0 4px 14px rgba(127,142,64,.16)}
.btn--verde:hover{background:var(--oliva-2)}
.btn--claro{background:#fff;color:var(--navy)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ── lienzo WebGL: fijo, detrás de todo, se pinta por recortes ── */
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
/* el lienzo va POR ENCIMA de los fondos de sección y POR DEBAJO del texto que lleve z-index:5 */
.sobre3d{position:relative;z-index:5}
.slot3d{position:relative}
html.sin-webgl .slot3d{display:none}

/* ── cabecera: barra a todo el ancho, pegada arriba (nunca píldora flotante con margen) ── */
.cab{position:fixed;top:12px;left:12px;right:12px;z-index:50;display:flex;align-items:center;gap:22px;height:70px;padding:0 clamp(14px,2.4vw,36px);border-radius:18px;background:var(--grama);box-shadow:0 10px 34px rgba(10,14,40,.28)} /* flotante, con margen mínimo */
.cab__logo img{width:50px;height:50px;border-radius:50%;background:#fff;padding:3px}
.cab__nav{display:flex;align-items:center;gap:28px;margin-left:auto}
.cab__nav a{color:#fff;text-decoration:none;font-family:var(--fuente-menu);font-weight:500;font-size:14px;letter-spacing:.08em;text-transform:uppercase;opacity:.95}
.cab__nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:5px}
/* «Convocatoria» todavía no lleva a ningún sitio: no finge ser enlace */
.cab__nav a[aria-disabled]{cursor:default}
.cab__nav a[aria-disabled]:hover{text-decoration:none}
/* botón normal en el header */
.cab__nav .cab__tab{padding:12px 22px;border-radius:999px;background:#fff;color:var(--grama);font-weight:500;font-size:14px;letter-spacing:.08em;opacity:1;transition:background .25s,transform .25s}
.cab__nav .cab__tab:hover{text-decoration:none;background:#CFE0A6;transform:translateY(-1px)}
.cab__burger{display:none;margin-left:auto;width:44px;height:44px;border:0;background:transparent;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;align-items:center}
.cab__burger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .3s,opacity .3s}
@media (max-width:860px){
  .cab{gap:10px;height:62px;top:10px;left:10px;right:10px}
  .cab__burger{display:flex}
  .cab__nav{position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;align-items:stretch;gap:4px;padding:14px;border-radius:18px;background:var(--grama);opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity .25s,transform .25s}
  .cab__nav a{padding:12px 16px;font-size:16px}
  .cab__nav .cab__tab{margin:6px 0 0;padding:14px 16px;border-radius:14px;text-align:center}
  .cab.is-abierta .cab__nav{opacity:1;pointer-events:auto;transform:none}
  .cab.is-abierta .cab__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .cab.is-abierta .cab__burger span:nth-child(2){opacity:0}
  .cab.is-abierta .cab__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ── HERO 100 % ── */
/* El hero se queda pegado al fondo y la banda sube ENCIMA, como una cortina:
   no se empuja el hero hacia arriba, se le pasa por delante. */
.hero{position:sticky;top:0;z-index:0;width:100%;height:100dvh;min-height:520px;background:var(--navy);overflow:hidden}
.hero__foto{display:block;width:100%;height:100%}
.hero__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;animation:heroZoom 26s ease-out both}
@keyframes heroZoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero__cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:30px;height:50px;border:2px solid rgba(255,255,255,.7);border-radius:20px}
.hero__cue span{position:absolute;left:50%;top:9px;width:4px;height:9px;margin-left:-2px;border-radius:2px;background:#fff;animation:cue 1.6s infinite}
@keyframes cue{0%{transform:translateY(0);opacity:1}80%{transform:translateY(20px);opacity:0}100%{opacity:0}}

/* ── BANDA · See you in 2027 + bola-isla ── */
.banda{position:relative;z-index:1;background:linear-gradient(160deg,var(--navy) 0%,#111634 100%);color:#fff;overflow:hidden}
.banda::before{content:"";position:absolute;inset:auto -20% -40% auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(127,142,64,.35),transparent 70%);pointer-events:none}
.banda{display:grid;place-items:center;text-align:center;max-width:100%;min-height:72vh;padding:120px clamp(24px,6vw,96px) 96px}
.banda__texto{position:relative;z-index:5;max-width:760px;margin:0 auto;font-size:17px;color:rgba(255,255,255,.86)}
/* más contenido que antes (era 98 px de tope y se comía la pantalla) y las letras arrancan
   apagadas: se van pintando con el scroll (lo mueve app.js). */
/* Una sola línea: el tamaño se queda en lo que cabe de ancho, y nowrap impide
   que «abiertas» se descuelgue. */
.banda__titulo{font-size:clamp(21px,3.6vw,52px);font-weight:900;letter-spacing:-.03em;line-height:1.05;color:#fff;text-transform:uppercase;white-space:nowrap}
.banda__titulo .ltr{display:inline-block;font-style:normal;opacity:.16;transition:opacity .18s linear;white-space:pre}
.banda__titulo .ltr.is-pintada{opacity:1}
@media (prefers-reduced-motion:reduce){.banda__titulo .ltr{opacity:1}}
.banda__titulo span:not(.ltr):not(.banda__titulo-sup){color:#CFE0A6}   /* :not(.ltr) — las letras del efecto también son span y se teñían todas */
.banda__lead{font-size:clamp(18px,1.6vw,21px);font-weight:600;color:#fff;margin-top:22px}
/* El nombre del torneo con el estilo de «Inscripciones abiertas» (2026-09-14): dos
   líneas con <br>, así que el tamaño lo marca la línea larga, «6º Torneo de Golf de».
   Carlos lo pidió «un poquito más pequeño» que el primer pase (49px). */
.banda__titulo.banda__titulo--nombre{font-size:clamp(20px,2.95vw,44px);margin-bottom:26px}
/* La línea blanca, al ancho exacto de «Grupo Anderson's» (Carlos, 2026-09-14): medidas a
   44px, blanca 514px y verde 458px → 0.896em (afinado midiendo). Si cambia el texto, hay que volver a medir. */
.banda__titulo-sup{font-size:.896em}
/* El nombre como pieza gráfica «6th Golf Tournament» (Carlos, 2026-09-15). PNG transparente de
   664×250: la letra ocupa x 39–625 e y 37–204, el resto es sombra. Los márgenes negativos quitan el aire
   de la sombra. El barrido de
   --p (lo mueve app.js) sustituye al pintado letra a letra: lo no pintado queda al 16 %. */
.banda__titulo--img{white-space:normal;line-height:0}
/* Centrado y más pequeño (Carlos, 2026-09-15): todo el bloque de texto va centrado, así que la
   sombra simétrica ya no descuadra y sobra el translateX. */
.banda__texto{text-align:center;justify-self:center}
.banda__titulo--img img{display:block;width:min(100%,400px);height:auto;margin:-17px auto -20px;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(var(--p,1)*100%),rgba(0,0,0,.16) calc(var(--p,1)*100%));
  mask-image:linear-gradient(90deg,#000 calc(var(--p,1)*100%),rgba(0,0,0,.16) calc(var(--p,1)*100%))}
.banda__cierre{color:#fff;margin-bottom:26px}
.banda__3d{height:min(78vh,720px);min-height:360px}
/* 50/50 (Carlos, 2026-09-14): el master a la izquierda y el texto a la derecha,
   alineado a la izquierda. El titular baja de 3.6vw a 3vw para caber en su mitad
   sin partirse (sigue en nowrap). */
.banda{grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,88px);align-items:center;text-align:left}
.banda__texto{max-width:600px;margin:0;justify-self:start}
.banda__titulo{font-size:clamp(21px,3vw,48px)}
.banda__master{position:relative;z-index:5;margin:0;width:100%;max-width:min(560px,72vh);justify-self:end}
.banda__master img{display:block;width:100%;height:auto;border-radius:var(--radio);box-shadow:0 30px 70px rgba(0,0,0,.4)}
/* marco provisional mientras llega el archivo del master */
.banda__master-hueco{aspect-ratio:1/1;display:grid;place-items:center;border:1.5px dashed rgba(255,255,255,.28);border-radius:var(--radio);background:rgba(255,255,255,.03);color:rgba(255,255,255,.5);font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
@media (max-width:860px){
  .banda{grid-template-columns:1fr;min-height:0;padding-top:90px;text-align:center}
  .banda__texto{margin:0 auto;justify-self:center}
  .banda__master{justify-self:center;max-width:420px}
  .banda__3d{height:64vw;min-height:280px;order:-1}
}

/* ── EL FORMATO (la bola rueda con el scroll, viewport pegado) ── */
.calle{position:relative;z-index:2;height:520vh;background:var(--navy)}
.calle__pin{position:sticky;top:0;height:100dvh;overflow:hidden;background:var(--navy)}
/* El vídeo nuevo (bola-golpe.mp4) ya nace con la acción en el 60% derecho y el 40%
   izquierdo libre para las tarjetas: no hace falta espejarlo. */
.calle__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.calle__velo{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,10,28,.72) 0%,rgba(6,10,28,.35) 42%,rgba(6,10,28,0) 70%)}
/* El titular vive en la MISMA columna que las tarjetas, justo encima: así no se
   queda colgado arriba del todo, lejos de la caja. */
.calle__cab{position:static;max-width:none;margin:0 0 14px;color:#fff;pointer-events:none}
.calle__cab h2{color:#fff}
/* Cada línea del titular con su check de viñeta, centrado a la altura del texto. */
.calle__lista{display:grid;gap:.06em}
.calle__lista span{display:flex;align-items:center;gap:.4em}
.calle__lista svg{width:.66em;height:.66em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;opacity:.95}
.calle__pasos{position:absolute;left:calc(clamp(24px,6vw,96px) + 50px);bottom:calc(clamp(60px,10vh,120px) + 60px);width:min(460px,calc(100% - 48px));display:grid;grid-template-rows:auto auto}
.calle__paso{grid-row:2;grid-column:1;align-self:start;width:100%;padding:44px 28px 28px;border-radius:var(--radio);background:rgba(255,255,255,.92);border:2px solid var(--chapa,var(--oliva));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 24px 60px rgba(6,10,28,.3);opacity:0;transform:translateY(24px);transition:opacity .45s,transform .45s;pointer-events:none}
.calle__paso.is-activo{opacity:1;transform:none;pointer-events:auto}
.calle__paso p{font-size:15.5px;color:var(--tinta-2);margin:0 0 .78em}
.calle__paso p:last-child{margin-bottom:0}
.calle__paso h3{margin-bottom:.62em}
/* Segundo identificador del paso: una barra corta bajo el titular, del mismo color
   que la chapa y que el borde. */
.calle__paso h3::after{content:"";display:block;width:46px;height:4px;border-radius:99px;
  background:var(--chapa,var(--oliva));margin-top:.5em}
.calle__paso strong{color:var(--navy)}
/* La chapa del número: un color por paso, anillo blanco para despegarla de la
   tarjeta y sombra a juego con su propio color. */
.calle__num{position:absolute;top:-25px;left:28px;width:52px;height:52px;border-radius:50%;
  background:var(--chapa,var(--oliva));color:#fff;font-weight:900;font-size:22px;letter-spacing:-.02em;
  display:grid;place-items:center;border:3px solid #fff;
  box-shadow:0 10px 24px var(--chapa-sombra,rgba(127,142,64,.45)),0 2px 6px rgba(6,10,28,.25)}
.calle__paso[data-paso="0"]{--chapa:#5DB040;--chapa-sombra:rgba(93,176,64,.5)}
.calle__paso[data-paso="1"]{--chapa:#6B7A33;--chapa-sombra:rgba(107,122,51,.5)}
.calle__paso[data-paso="2"]{--chapa:#1A2043;--chapa-sombra:rgba(26,32,67,.5)}
.calle__barra{position:absolute;right:clamp(24px,6vw,96px);top:50%;transform:translateY(-50%);width:4px;height:180px;border-radius:4px;background:rgba(255,255,255,.25)}
.calle__barra i{display:block;width:100%;height:0;border-radius:4px;background:#fff}
.calle__pista{position:absolute;right:clamp(24px,6vw,96px);bottom:26px;margin:0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#fff;opacity:.75}
@media (max-width:860px){
  .calle{height:440vh}
  .calle__video{object-fit:contain;object-position:50% 34%}
  .calle__velo{background:linear-gradient(180deg,rgba(6,10,28,.55) 0%,rgba(6,10,28,0) 22%,rgba(6,10,28,0) 55%,rgba(6,10,28,.85) 80%)}
  .calle__cab{margin-bottom:12px}
  .calle__cab h2{font-size:24px}
  .calle__pasos{left:16px;width:calc(100% - 32px);bottom:56px}
  .calle__paso{padding:38px 20px 22px}
  .calle__paso p{font-size:14.5px}
  .calle__barra{display:none}
  .calle__pista{right:16px;bottom:16px;font-size:11px}
}

/* ── SOBREVUELO · secuencia de fotogramas con scroll ── */
.vuelo{position:relative;height:260vh;background:var(--navy)}
.vuelo__pin{position:sticky;top:0;height:100dvh;overflow:hidden}
.vuelo__lienzo{position:absolute;inset:0;width:100%;height:100%}
.vuelo__velo{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,10,28,.78) 0%,rgba(6,10,28,.45) 45%,rgba(6,10,28,.1) 100%)}
.vuelo__texto{position:absolute;left:clamp(24px,6vw,96px);top:50%;transform:translateY(-50%);max-width:600px;color:rgba(255,255,255,.9)}
.vuelo__texto h2{color:#fff}
.vuelo__cierre{font-weight:800;font-size:22px;color:#fff}
@media (max-width:860px){
  .vuelo{height:220vh}
  .vuelo__velo{background:linear-gradient(180deg,rgba(6,10,28,.2) 0%,rgba(6,10,28,.75) 60%,rgba(6,10,28,.85) 100%)}
  .vuelo__texto{left:20px;right:20px;top:auto;bottom:40px;transform:none;font-size:15px}
}

/* ── CLAVES · tres objetos 3D ── */
/* Fondo verde de campo: las tarjetas claras destacan encima. */
/* Escena anclada, igual que «El día, de principio a fin»: la sección mide varias
   pantallas, el contenido se queda pegado y el scroll enciende una tarjeta tras otra. */
.claves{position:relative;height:240vh;background:linear-gradient(180deg,#1E5215 0%,var(--grama) 100%)}
.claves__pin{position:sticky;top:0;min-height:100dvh;display:grid;align-content:center;padding:60px 0}
.claves .seccion__cab{text-align:center}
.claves .seccion__cab h2{color:#fff}
.clave h3{font-size:clamp(17px,1.75vw,20px);text-align:center}
.claves__lista{list-style:none;margin:0 auto;padding:0 24px;max-width:var(--ancho);display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.clave{position:relative;padding:34px 26px 30px;border-radius:var(--radio);background:var(--papel-2);text-align:center;box-shadow:0 18px 44px rgba(6,20,4,.28)}
/* El icono sustituye al objeto 3D: dibujado a mano, sin motor ni CDN. */
.clave__ico{width:96px;height:96px;margin:0 auto 18px;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(closest-side,rgba(127,142,64,.22),rgba(127,142,64,.06));}
.clave__ico svg{width:52px;height:52px;fill:none;stroke:var(--oliva-2);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.clave__tag{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--oliva);margin-bottom:8px}
.clave p:last-child{color:var(--tinta-2);font-size:15.5px;margin:0}
@media (max-width:860px){
  /* MÓVIL · componente propio: aquí no hay escena anclada. La sección mide lo suyo
     y las tres tarjetas van en carrusel con arrastre, con la vecina asomando.
     `min-width:0` es imprescindible: sin él, la lista es hija de una rejilla, no
     encoge por debajo de su contenido y saca 545px de ancho — el scroll lateral
     que se veía en toda la web. */
  .claves{height:auto;padding:72px 0 64px}
  .claves__pin{position:static;min-height:0;padding:0;justify-items:stretch}
  .claves__lista{width:100%;min-width:0;max-width:none;display:flex;overflow-x:auto;
    scroll-snap-type:x mandatory;gap:14px;padding:6px 20px 20px;scrollbar-width:none}
  .claves__lista::-webkit-scrollbar{display:none}
  .clave{flex:0 0 78%;min-width:0;scroll-snap-align:center}
}

/* ── PELÍCULA · gracias + video 54 s ── */
/* Fondo con trama de hoyuelos de bola de golf: dos rejillas de puntos muy suaves
   sobre el papel. Es CSS puro, sin imagen que cargar. */
.pelicula{position:relative;background:
    radial-gradient(circle at center, rgba(26,32,67,.055) 1.6px, transparent 1.7px) 0 0/22px 22px,
    radial-gradient(circle at center, rgba(127,142,64,.05) 1.6px, transparent 1.7px) 11px 11px/22px 22px,
    var(--papel);
  padding:clamp(72px,8vw,110px) 24px}
.pelicula__caja{max-width:var(--ancho);margin:0 auto;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center;perspective:1400px}
@media (max-width:900px){.pelicula__caja{grid-template-columns:1fr;gap:34px}}
.pelicula__texto p{color:var(--tinta-2)}
.pelicula__pantalla{margin:0;transform-style:preserve-3d}
.pelicula__pantalla video{border-radius:var(--radio);box-shadow:0 34px 80px rgba(26,32,67,.28);background:var(--navy);width:100%;aspect-ratio:16/9;object-fit:cover}
.pelicula__pantalla{position:relative}
.pelicula__sonido{position:absolute;right:16px;top:16px;padding:9px 16px;border-radius:999px;border:0;background:rgba(255,255,255,.9);color:var(--navy);font:700 12px/1 var(--fuente);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.pelicula__sonido[aria-pressed="true"]{background:var(--oliva);color:#fff}
.pelicula figcaption{font-size:13px;color:var(--tinta-2);margin-top:14px;text-align:center}
@media (max-width:860px){.pelicula{grid-template-columns:1fr;gap:26px;padding-bottom:80px}}

/* ── GALERÍA · anillo 3D ── */

.galeria__tabs{display:flex;justify-content:center;gap:8px;margin-bottom:10px}
.galeria__tabs button{padding:11px 22px;border-radius:999px;border:1px solid var(--linea);background:#fff;color:var(--navy);font:700 14px var(--fuente);cursor:pointer}
.galeria__tabs button[aria-selected="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
.galeria__anillo{height:min(62vh,560px);min-height:340px;cursor:grab;touch-action:pan-y}
.galeria__anillo.is-arrastrando{cursor:grabbing}
.galeria__pista{text-align:center;font-size:13px;color:var(--tinta-2);margin:8px 0 0}
.visor[hidden]{display:none}
.visor{position:fixed;inset:0;z-index:80;background:rgba(10,14,30,.92);display:grid;place-items:center;padding:24px}
.visor img{max-width:min(1400px,94vw);max-height:88vh;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.visor button{position:absolute;border:0;background:rgba(255,255,255,.14);color:#fff;width:52px;height:52px;border-radius:50%;font-size:30px;line-height:1;cursor:pointer}
.visor__cerrar{top:18px;right:18px}
.visor__nav{top:50%;transform:translateY(-50%)}
.visor__nav--ant{left:14px}.visor__nav--sig{right:14px}

/* ── PRENSA ── */
.prensa{padding:100px 24px 90px;background:var(--papel)}
.prensa__destacada{list-style:none;margin:0 auto;padding:0;max-width:var(--ancho);display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.prensa__destacada a{display:block;padding:30px 26px 26px;border-radius:var(--radio);background:var(--papel-2);text-decoration:none;text-align:center;transition:transform .25s,box-shadow .25s}
.prensa__destacada a:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(26,32,67,.12)}
.prensa__destacada img{max-height:34px;width:auto;margin:0 auto 18px;object-fit:contain;
  filter:grayscale(1);opacity:.72;transition:filter .25s,opacity .25s}
.prensa__destacada a:hover img{filter:none;opacity:1}
.prensa__destacada img[alt="Estilo DF"]{max-height:25.7px;max-width:143px}
.prensa__destacada img[alt="Milenio"]{max-height:29.8px;max-width:165px}
.prensa__destacada img[alt="Playboy México"]{max-height:35.8px;max-width:120px}
.prensa__destacada span{display:block;font-size:14px;font-weight:600;color:var(--navy);line-height:1.4}
.prensa__sub{text-align:center;margin:48px 0 18px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--tinta-2)}
/* Seis logos en rejilla, cada uno enlazando a su nota. Sin titulares: el paso a
   la cobertura completa lo hace el botón de abajo. */
.prensa__logos{--pl-alto:34px;list-style:none;margin:0 auto;padding:0;max-width:900px;display:grid;grid-template-columns:repeat(3,1fr);gap:30px 26px;place-items:center}
.prensa__logos li{display:grid;place-items:center;width:100%;min-height:76px;padding:16px;border-radius:var(--radio);background:var(--papel-2);transition:transform .25s,box-shadow .25s}
.prensa__logos li:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(26,32,67,.12)}
.prensa__cta{display:inline-flex;margin:44px auto 0}
.prensa{text-align:center}
@media (max-width:700px){.prensa__logos{grid-template-columns:repeat(2,1fr);gap:18px 14px}}
.prensa__logos--viejo{display:flex;flex-wrap:wrap;
  justify-content:center;align-items:center;gap:16px clamp(14px,2.4vw,30px)}
/* Los logos iban con su color propio —Porsche salía rosa, Milenio dorado— y a la misma altura,
   con lo que unos aplastaban a otros. Aquí van en gris y **igualados por tinta**, con las mismas
   medidas que en prensa.html reescaladas a esta altura base (22 px en vez de 30). */
.prensa__logos img{max-height:var(--pl-alto);width:auto;max-width:none;object-fit:contain;
  filter:grayscale(1);opacity:.62;transition:filter .25s,opacity .25s}
.prensa__logos a:hover img{filter:none;opacity:1}
/* cada logo, en factor de --pl-alto: si se pusiera en px, estas reglas ganarían por
   especificidad a las media queries de abajo y la fila no encogería nunca */
.prensa__logos img[alt="Alto Nivel"]{max-height:calc(var(--pl-alto) * 0.70)}
.prensa__logos img[alt="Cultura Colectiva"]{max-height:calc(var(--pl-alto) * 1.13)}
.prensa__logos img[alt="El Conocedor"]{max-height:calc(var(--pl-alto) * 0.72)}
.prensa__logos img[alt="El Economista"]{max-height:calc(var(--pl-alto) * 0.60)}
.prensa__logos img[alt="El País"]{max-height:calc(var(--pl-alto) * 0.93)}
.prensa__logos img[alt="Estilo DF"]{max-height:calc(var(--pl-alto) * 0.76)}
.prensa__logos img[alt="Gastrolab"]{max-height:calc(var(--pl-alto) * 0.73)}
.prensa__logos img[alt="Milenio"]{max-height:calc(var(--pl-alto) * 0.88)}
.prensa__logos img[alt="Playboy México"]{max-height:calc(var(--pl-alto) * 1.05)}
.prensa__logos img[alt="Porsche Cancún"]{max-height:calc(var(--pl-alto) * 0.66)}
.prensa__logos img[alt="Quién"]{max-height:calc(var(--pl-alto) * 1.13)}
.prensa__logos img[alt="Vogue"]{max-height:calc(var(--pl-alto) * 1.08)}
.prensa__logos img[alt="Porsche Cancún"]{opacity:.34}   /* es negro puro: al 34 % iguala el gris del resto */
.prensa__logos a:hover img[alt="Porsche Cancún"]{filter:none;opacity:1}
/* que los nueve quepan en UNA línea también en pantallas medianas: encogen lo justo */
@media (min-width:1000px) and (max-width:1199px){
  .prensa__logos{--pl-alto:18px;gap:14px 18px}
}
@media (min-width:821px) and (max-width:999px){
  .prensa__logos{--pl-alto:15px;gap:12px 13px}
}
.prensa__txt{font-weight:800;font-size:15px;letter-spacing:.02em;color:var(--oliva);text-decoration:none}
@media (max-width:860px){
  .prensa{padding:80px 0 70px}
  .prensa__destacada{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:0 20px 14px;scrollbar-width:none}
  .prensa__destacada::-webkit-scrollbar{display:none}
  .prensa__destacada li{flex:0 0 78%;scroll-snap-align:center}
  .prensa__logos{padding:0 20px;--pl-alto:15px;gap:14px 16px}   /* aquí se cruza con el tramo de arriba: sin esto, a 860 se partía */
}

/* ── BLOG (las tarjetas de la PORTADA) ──
   Van acotadas a .blog__lista: sin eso, «.post span» pisaba el botón «Leer» de blog/index.html
   —que también usa .post— y le pintaba el texto de oliva sobre fondo oliva. */
.blog{padding:100px 0 100px;background:var(--papel-2)}
.blog__lista{list-style:none;margin:0 auto;padding:0 24px;max-width:var(--ancho);display:grid;
  grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:24px}   /* 1fr: si no, la segunda fila
                                                     quedaba 22 px más baja que la primera */
.blog__lista .post a{display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;border-radius:var(--radio);overflow:hidden;text-decoration:none;height:100%;transition:transform .25s,box-shadow .25s}
.blog__lista .post a:hover{transform:translateY(-4px);box-shadow:0 22px 56px rgba(26,32,67,.14)}
.blog__lista .post img{aspect-ratio:16/9;object-fit:cover;width:100%;flex:none}
.blog__lista .post h3{width:100%}
.blog__lista .post h3{font-size:17px;padding:20px 22px 6px;color:var(--navy);line-height:1.3}
.blog__lista .post span{display:inline-flex;align-items:center;justify-content:center;margin:auto 22px 22px;height:34px;padding:2px 20px 0;line-height:1;font-size:11px;font-weight:600;letter-spacing:.14em;box-shadow:none}
.blog__lista .post span:hover{transform:none}   /* la que se levanta es la tarjeta, no el botón */
.blog__lista .post a:hover span{background:var(--oliva-2)}
@media (max-width:860px){
  .blog{padding:80px 0}
  .blog__lista{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:0 20px 14px;scrollbar-width:none}
  .blog__lista::-webkit-scrollbar{display:none}
  .blog__lista .post{flex:0 0 80%;scroll-snap-align:center}
}

/* ── LISTA DE ESPERA ── */
/* Cierre sobre foto desenfocada: la misma receta que la galería, pero con velo
   oscuro para que el texto blanco y la tarjeta sigan leyéndose. */
.lista{position:relative;padding:100px 24px;color:#fff;background:var(--navy);overflow:hidden}
.lista::before{content:"";position:absolute;inset:-60px;z-index:0;
  background:url(../img/hero-campo-1600.webp) center/cover no-repeat;
  filter:blur(46px) saturate(1.1) brightness(.85);transform:scale(1.06)}
.lista::after{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(160deg,rgba(26,32,67,.88),rgba(17,22,52,.93))}
.lista>*{position:relative;z-index:1}
.lista__caja{max-width:680px;margin:0 auto;text-align:center}
.lista__caja h2{color:#fff}
.lista__caja>p{color:rgba(255,255,255,.82)}
.lista__form[hidden]{display:none}
.lista__form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px;text-align:left}
.lista__form label{display:grid;gap:6px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#CFE0A6}
.lista__form label:first-child{grid-column:1/-1}
.lista__form input{padding:15px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;font:500 16px var(--fuente);outline:0}
.lista__form input:focus{border-color:#CFE0A6;background:rgba(255,255,255,.14)}
.lista__form .btn{grid-column:1/-1;justify-self:center;margin-top:8px}
.lista__ok{grid-column:1/-1;text-align:center;color:#CFE0A6;font-weight:700}
@media (max-width:600px){.lista__form{grid-template-columns:1fr}}
.lista__form label:first-child{grid-column:auto}
.lista__pasos{list-style:none;margin:28px 0 0;padding:0;display:flex;justify-content:center;gap:22px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.55)}
.lista__pasos li{display:flex;align-items:center;gap:8px}
/* Iconos en vez de números: así no hay cifra que centrar dentro del círculo —
   era lo que se veía descuadrado— y el icono se alinea solo. */
.lista__pasos span{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.4);
  display:inline-grid;place-items:center;flex:0 0 auto;line-height:0}
.lista__pasos svg{width:16px;height:16px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lista__pasos .is-activo span{color:#fff}
.lista__pasos .is-activo{color:#fff}.lista__pasos .is-activo span{background:var(--oliva);border-color:var(--oliva)}
.lista__check{grid-column:1/-1;display:flex!important;align-items:center;gap:10px;text-transform:none!important;letter-spacing:0!important;font-weight:500!important;font-size:14px!important;color:rgba(255,255,255,.85)!important}
.lista__check input{width:18px;height:18px}
.lista__pago{margin-top:30px;padding:26px;border-radius:var(--radio);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18)}
.lista__pago h3{color:#fff}.lista__pago p{color:rgba(255,255,255,.82)}

/* ── PIE ── */
.pie{background:var(--papel);padding:60px 24px 30px;border-top:1px solid var(--linea)}
/* ── la pleca de marcas: Anderson's a la izquierda y el resto en dos líneas ──
   Los valores van en variables porque se afinan en vivo con `?pleca` (assets/js/pleca.js). */
.pie__marcas{max-width:var(--ancho);margin:0 auto}
.pleca{--pleca-grupo:178px;--pleca-alto:18px;--pleca-gapx:55px;--pleca-gapy:18px;--pleca-op:.54;--pleca-sep:33px;   /* valores elegidos por Carlos con ?pleca, 10 sep */
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--pleca-sep);
  padding:28px 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.pleca__grupo{width:var(--pleca-grupo);height:auto;filter:brightness(0);opacity:.9;
  padding-right:var(--pleca-sep);border-right:1px solid var(--linea)}
/* dos líneas SIEMPRE, no lo que salga del wrap: la lista va partida en dos <ul>
   (9 marcas arriba y 8 abajo), cada una centrada por su cuenta. En el celular sí
   se dejan fluir, que si no no caben. */
.pleca__marcas{display:grid;gap:var(--pleca-gapy)}
.pleca__marcas ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;align-items:center;gap:var(--pleca-gapy) var(--pleca-gapx)}
.pleca__marcas li{margin:0}
.pie__marcas img:not(.pleca__grupo){height:var(--pleca-alto);width:auto;max-width:120px;
  filter:brightness(0);opacity:var(--pleca-op)}   /* :not() — si no, esta regla le fijaba la altura
                                                      al logo del grupo y su ancho no hacía nada */
.pie__marcas li a:hover img{opacity:1}
/* Cada marca a su altura, para que todas PESEN lo mismo: no se igualan por altura sino
   por tinta. Medido rasterizando cada logo a 100 px y contando sus píxeles (de 1.920 en
   BAK a 33.848 en Porfirio's); la altura sale de √(mediana/tinta), con tope para que
   ninguno se desmadre. Se recalcula con el mismo método si entra una marca nueva. */
.pleca__marcas img[alt="Harry's"]{height:calc(var(--pleca-alto) * 1.16)}
.pleca__marcas img[alt="Porfirio's"]{height:calc(var(--pleca-alto) * 0.58)}
.pleca__marcas img[alt="Fred's"]{height:calc(var(--pleca-alto) * 1.05)}
.pleca__marcas img[alt="Bodega Argentina"]{height:calc(var(--pleca-alto) * 0.92)}
.pleca__marcas img[alt="H Roof"]{height:calc(var(--pleca-alto) * 1.17)}
.pleca__marcas img[alt="Nicoletta"]{height:calc(var(--pleca-alto) * 0.60)}
.pleca__marcas img[alt="Ilios"]{height:calc(var(--pleca-alto) * 1.00)}
.pleca__marcas img[alt="La Vicenta"]{height:calc(var(--pleca-alto) * 0.58)}
.pleca__marcas img[alt="Squid Roe"]{height:calc(var(--pleca-alto) * 0.77)}
.pleca__marcas img[alt="Señor Frog's"]{height:calc(var(--pleca-alto) * 0.83)}
.pleca__marcas img[alt="BAK"]{height:calc(var(--pleca-alto) * 1.42)}
.pleca__marcas img[alt="Carlos'n Charlie's"]{height:calc(var(--pleca-alto) * 0.60)}
.pleca__marcas img[alt="Rowley's"]{height:calc(var(--pleca-alto) * 0.74)}
.pleca__marcas img[alt="The Ledge"]{height:calc(var(--pleca-alto) * 1.42)}
.pleca__marcas img[alt="Tap Line"]{height:calc(var(--pleca-alto) * 1.17)}
.pleca__marcas img[alt="Gastro Spots"]{height:calc(var(--pleca-alto) * 1.42)}
.pleca__marcas img[alt="Bahama Bay Nassau"]{height:calc(var(--pleca-alto) * 1.19)}

/* Los valores de arriba son los que eligió Carlos y mandan en pantalla grande. Por debajo
   de ~1300 las nueve de la primera fila no caben con ellos y se partiría en tres líneas:
   estos dos tramos recortan lo mínimo (sobre todo el hueco entre marcas) para que sigan
   siendo dos. Medido a 1600, 1440, 1300, 1200, 1100, 1000, 900 y 860. */
@media (min-width:1101px) and (max-width:1300px){
  .pleca{--pleca-gapx:38px}
}
@media (min-width:951px) and (max-width:1100px){
  .pleca{--pleca-grupo:146px;--pleca-sep:26px;--pleca-alto:16px;--pleca-gapx:26px}
}
@media (min-width:821px) and (max-width:950px){
  .pleca{--pleca-grupo:130px;--pleca-sep:22px;--pleca-alto:15px;--pleca-gapx:18px}
}
@media (max-width:820px){
  .pleca{grid-template-columns:minmax(0,1fr);gap:20px;justify-items:center}
  .pleca__grupo{padding-right:0;border-right:0;padding-bottom:18px;border-bottom:1px solid var(--linea)}
}
.pie__legal{max-width:var(--ancho);margin:26px auto 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 26px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.pie__legal a{color:var(--tinta-2);text-decoration:none;margin-right:22px;white-space:nowrap}
@media (max-width:860px){.pie__legal{justify-content:center;text-align:center}.pie__legal nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 0}.pie__social a{margin:0 9px}}
.pie__legal a:hover{color:var(--navy)}
.pie__social a{margin:0 0 0 18px}

/* ── MUCHO MÁS QUE UNA COMPETENCIA ─────────────────────────────────────────
   Antes era un sobrevuelo en vídeo. Ahora: fondo oscuro que enlaza con la banda
   de arriba y, a la derecha, la tarjeta del producto que lleva a la tienda. */
/* CORTINA AL REVÉS: esta sección se queda pegada al fondo y la escena de la bola,
   que va por delante, se levanta y la descubre. Luego sigue pegada un tramo para
   que dé tiempo a leerla, y el scroll continúa. */
.oferta{position:relative;z-index:1;height:200vh;margin-top:-100vh;color:rgba(255,255,255,.88);background:var(--navy)}
.oferta__pin{position:sticky;top:0;min-height:100dvh;display:grid;align-content:center;overflow:hidden;
  background:linear-gradient(180deg,#121734 0%,var(--navy) 45%,#101530 100%);
  padding:clamp(48px,7vw,96px) clamp(24px,6vw,96px)}
.oferta__pin::before{content:"";position:absolute;inset:auto -10% -30% auto;width:52%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(127,142,64,.28),transparent 70%);pointer-events:none}
.oferta__caja{position:relative;z-index:2;max-width:var(--ancho);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,400px);gap:clamp(32px,5vw,72px);align-items:center}
.oferta__texto{max-width:620px}
.oferta__texto h2{color:#fff}
.oferta__texto p{margin-bottom:1em;line-height:1.66}
.oferta__cierre{font-weight:800;font-size:22px;color:#fff;margin-top:1.2em}

/* la tarjeta del producto */
.tarjeta-prod{position:relative;background:var(--papel);color:var(--tinta);border-radius:var(--radio);padding:34px 30px 28px;box-shadow:0 30px 70px rgba(3,6,20,.5);border:1px solid rgba(255,255,255,.5)}
.tarjeta-prod__sello{position:absolute;top:-14px;left:30px;background:var(--oliva);color:#fff;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:7px 14px;border-radius:99px;box-shadow:0 8px 18px rgba(127,142,64,.45)}
.tarjeta-prod h3{margin:6px 0 .35em;font-size:clamp(21px,2.3vw,26px)}
.tarjeta-prod__lead{font-size:13.5px;color:var(--tinta-2);margin:0 0 18px}
.tarjeta-prod__precio{font-size:clamp(34px,4vw,46px);font-weight:900;letter-spacing:-.03em;line-height:1;color:var(--navy);margin:0 0 22px;display:grid;gap:6px}
.tarjeta-prod__precio span{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2)}
.tarjeta-prod__lista{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:11px;border-top:1px solid var(--linea);padding-top:20px}
.tarjeta-prod__lista li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.45;color:var(--tinta-2)}
.tarjeta-prod__lista svg{width:17px;height:17px;flex:0 0 auto;margin-top:2px;fill:none;stroke:var(--oliva-2);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.tarjeta-prod__cta{width:100%;justify-content:center;text-align:center}
.tarjeta-prod__pie{margin:12px 0 0;font-size:12px;color:var(--tinta-2);text-align:center}

@media (max-width:900px){
  .oferta__caja{grid-template-columns:1fr;gap:34px}
  .tarjeta-prod{order:2}
  .oferta__cierre{font-size:19px}
}

/* El estado inicial lo pone el JS (js-anima): si no corriera, todo se ve igual.
   Título y tarjetas entran y salen A LA VEZ, sin escalonado (Carlos, 2026-09-14). */
.claves.js-anima .seccion__cab,
.claves.js-anima .clave{opacity:0;transform:translateY(48px) scale(.97);
  transition:opacity .5s cubic-bezier(.2,.7,.3,1),transform .5s cubic-bezier(.2,.7,.3,1)}
.claves.js-anima.is-dentro .seccion__cab,
.claves.js-anima.is-dentro .clave{opacity:1;transform:none}
@media (max-width:860px),(prefers-reduced-motion:reduce){
  .claves.js-anima .seccion__cab,
  .claves.js-anima .clave{opacity:1;transform:none;transition:none}
}

/* ── GALERÍA · las fotos entran por la derecha y se apilan ────────────────────
   Sustituye al anillo 3D. Escena anclada: la sección mide varias pantallas, el
   contenido se queda pegado y el scroll va metiendo una foto tras otra. */
/* Fondo: una foto del campo muy desenfocada, con un velo claro encima para que
   las fotos de la pila sigan destacando. El desenfoque se hace en el navegador,
   así que no hay que preparar ninguna imagen aparte. */
.galeria{position:relative;height:300vh;background:var(--papel-2);overflow:clip}
.galeria__pin::before{content:"";position:absolute;inset:-60px;z-index:0;
  background:url(../img/hero-campo-1600.webp) center/cover no-repeat;
  filter:blur(42px) saturate(1.15);transform:scale(1.06)}
.galeria__pin::after{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(243,245,241,.72),rgba(243,245,241,.55))}
.galeria__pin>*{position:relative;z-index:1}
.galeria__pin{position:sticky;top:0;min-height:100dvh;display:grid;align-content:center;justify-items:center;gap:26px;padding:40px 24px}
.galeria .seccion__cab{margin:0;text-align:center}
/* Fila horizontal: cada foto ocupa poco menos de la mitad y acaba solapada
   sobre la anterior. Entran por la derecha, una tras otra, con el scroll. */
.galeria__pila{position:relative;width:min(880px,88vw);aspect-ratio:16/6;max-height:42vh}
.galeria__pila img{position:absolute;top:0;left:0;width:46%;height:100%;object-fit:cover;border-radius:var(--radio);
  box-shadow:0 22px 48px rgba(6,10,28,.3);border:5px solid #fff;background:#fff;cursor:pointer;
  transform:translateX(100vw);will-change:transform;transition:box-shadow .3s}
/* al pulsarla, la foto se pone por delante de todas y crece un poco */
.galeria__pila img.is-frente{box-shadow:0 34px 80px rgba(6,10,28,.45)}
.galeria__pila{--foto:46%}
.galeria__cta{margin-top:56px;will-change:opacity,transform}
@media (max-width:700px){
  .galeria{height:260vh}
  .galeria__pila{width:94vw}
  .galeria__pila img{border-width:4px}
}

/* La cortina de apertura vive sólo aquí: al acabar la banda, el hero deja de
   estar pegado. Sin esto se quedaba fijo toda la página y asomaba por detrás de
   cualquier hueco de las secciones siguientes. */
.apertura{position:relative}

/* El blog es una rejilla centrada como galería y prensa: su titular va igual. */
.blog .seccion__cab{text-align:center}

/* El blog, todo centrado: tarjetas, texto y botón. */
.blog__lista .post h3{text-align:center}
.blog__lista .post p{text-align:center}

.blog{text-align:center}
.blog__cta{display:inline-flex;margin:46px auto 0}

/* ═══════════════ CUADRATURA MÓVIL ═══════════════════════════════════════════
   Sólo móvil: el escritorio no se toca. Unifica el ritmo vertical (72px arriba y
   abajo en cada sección), el margen lateral (24px para todo el contenido) y
   acorta las escenas ancladas, que en una pantalla de móvil pedían cuatro
   pantallas de scroll para contar lo mismo. */
@media (max-width:860px){
  /* ritmo vertical: una sola medida para todas las secciones */
  .banda{padding-top:72px;padding-bottom:72px}
  .claves{padding:72px 0}
  .pelicula{padding-top:72px;padding-bottom:72px}
  .prensa{padding-top:72px;padding-bottom:72px}
  .blog{padding-top:72px;padding-bottom:72px}
  .lista{padding-top:72px;padding-bottom:72px}

  /* margen lateral único */
  .calle__pasos{left:24px;right:24px;width:auto}
  .galeria__pin{padding:32px 24px}
  .galeria .seccion__cab{padding:0}
  .prensa__logos{padding-left:0;padding-right:0}

  /* escenas más cortas: mismo relato, menos dedo */
  .calle{height:320vh}
  .galeria{height:230vh}
  .oferta{height:180vh;margin-top:-90vh}

  /* la barra inferior no debe tapar el final de ninguna sección */
  .lista{padding-bottom:calc(72px + 74px)}

  /* La tarjeta de la escena va opaca: al cruzarse con la cortina de la sección
     siguiente se leía su texto a través del cristal. */
  .calle__paso{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}

  /* Galería: en 390px el 46% deja fotos de 180px. Se agrandan y se solapan más. */
  .galeria__pila{width:94vw;aspect-ratio:16/9;max-height:38vh}
  .galeria__pila img{width:72%;border-width:4px}
  .galeria__cta{margin-top:36px}
}

/* ── Galería · primero la foto NÍTIDA; con el scroll se desenfoca y sólo entonces entran el
   título y las fotos (Carlos, 2026-09-14: antes el fondo ya salía borroso y el título se veía
   solo sobre el banner). app.js mueve --desenfoque y --titulo de 0 a 1; sin JS, estado final. ── */
.galeria{--desenfoque:1;--titulo:1}
.galeria__pin::before{filter:blur(calc(var(--desenfoque) * 42px)) saturate(calc(1 + var(--desenfoque) * .15));transform:scale(calc(1 + var(--desenfoque) * .06));will-change:filter,transform}
.galeria__pin::after{opacity:var(--desenfoque)}
.galeria .seccion__cab{opacity:var(--titulo);transform:translateY(calc((1 - var(--titulo)) * 28px))}

/* ── Formato, premios y Fun Cart sobre textura de césped (Carlos, 2026-09-14). Velo verde
   oscuro encima para que el título blanco se lea y las tarjetas destaquen. En escritorio la
   textura va en la parte anclada (100 dvh) para no estirarla a las 2,4 pantallas de la sección;
   en móvil no hay anclaje y va en la sección entera. ── */
.claves,.claves__pin{--velo-cesped:linear-gradient(180deg,rgba(12,38,8,.62) 0%,rgba(8,28,6,.74) 100%)}
.claves{background:var(--velo-cesped),url(../img/textura-golf.webp) center/cover no-repeat,#1E5215}
.claves__pin{background:var(--velo-cesped),url(../img/textura-golf.webp) center/cover no-repeat}
@media (max-width:860px){
  .claves__pin{background:none}
}

/* ── Escena de la bola sin «Un día · Un campo · Un campeón» (Carlos, 2026-09-14): la tarjeta sube
   al centro vertical de la pantalla y crece, dentro del 40 % izquierdo reservado al texto
   (el 60 % derecho es de la bola). Sólo escritorio: en móvil sigue anclada abajo. ── */
@media (min-width:861px){
  /* mismo margen izquierdo que tenía la escena (Carlos: «respeta el margen izquierdo») */
  .calle__pasos{left:calc(clamp(24px,6vw,96px) + 50px);bottom:auto;top:50%;transform:translateY(-50%);
    width:min(560px,calc(40vw - clamp(24px,6vw,96px) - 50px));grid-template-rows:auto}
  .calle__paso{grid-row:1;padding:56px 38px 36px}
  .calle__paso h3{font-size:clamp(24px,2vw,30px)}
  .calle__paso p{font-size:17px;line-height:1.6}
  .calle__num{width:60px;height:60px;top:-30px;left:36px;font-size:22px}
}
/* Laptop (861–1400 px): con el margen de la escena la tarjeta queda en ~385 px y el título se
   partía en dos. Un pelín menos de relleno y de letra para que respire. */
@media (min-width:861px) and (max-width:1400px){
  .calle__paso{padding:50px 30px 30px}
  .calle__paso h3{font-size:22px}
  .calle__paso p{font-size:16px}
  .calle__num{width:54px;height:54px;top:-27px;left:30px;font-size:20px}
}
/* Móvil: el nombre del torneo en la banda, más grande (Carlos, 2026-09-14). Sigue en dos líneas
   y con la blanca al 0.896em de la verde; 8vw hace que «Grupo Anderson's» quepa hasta en 320 px. */
@media (max-width:860px){
  .banda__titulo.banda__titulo--nombre{font-size:min(32px,8vw)}
  .banda__titulo--img img{width:min(100%,300px);margin:-13px auto -15px}
}
/* Móvil: sin el botón «Inscribir a mi equipo» de la banda (Carlos, 2026-09-14); ese llamado ya
   vive en la barra inferior fija. En escritorio se queda. */
@media (max-width:860px){
  .banda .btn{display:none}
  .banda__cierre{margin-bottom:0}
}
/* ── Móvil · el vídeo de la bola sin bandas vacías (Carlos, 2026-09-14: «ese espacio de acá abajo»).
   Con object-fit:contain el vídeo apaisado (16:9) medía 219 px de alto en una pantalla de 844 y
   dejaba 212 px de azul arriba y 412 abajo. Ahora llena la parte de arriba hasta la tarjeta, con
   cover, recortado sobre el 72 % del ancho: la bola recorre del 55 % al 80 % (medido fotograma a
   fotograma), así que nunca sale del recorte. El pie del vídeo se funde con el azul de la tarjeta. ── */
@media (max-width:860px){
  .calle__video{object-fit:cover;object-position:72% 50%;bottom:auto;height:calc(100% - 340px)}
  .calle__velo{background:linear-gradient(180deg,rgba(6,10,28,.45) 0%,rgba(6,10,28,0) 16%,rgba(26,32,67,0) calc(100% - 440px),rgba(26,32,67,1) calc(100% - 340px))}
}
/* Móvil · la tarjeta completa por encima de la barra de «Inscribir a mi equipo» (Carlos, 2026-09-14).
   La barra mide 66 px + 10 px de margen + zona segura; la tarjeta queda 14 px por encima y el vídeo
   (con su difuminado) termina donde empieza la tarjeta. --alto-tarjeta cubre la más alta de las tres. */
@media (max-width:860px){
  .calle__pin{--libre-abajo:calc(90px + env(safe-area-inset-bottom));--alto-tarjeta:300px}
  .calle__pasos{bottom:var(--libre-abajo)}
  .calle__video{height:calc(100% - var(--libre-abajo) - var(--alto-tarjeta))}
  .calle__velo{background:linear-gradient(180deg,rgba(6,10,28,.45) 0%,rgba(6,10,28,0) 16%,
    rgba(26,32,67,0) calc(100% - var(--libre-abajo) - var(--alto-tarjeta) - 100px),
    rgba(26,32,67,1) calc(100% - var(--libre-abajo) - var(--alto-tarjeta)))}
}
/* Móvil · menos aire al final de la escena de la bola (Carlos, 2026-09-14: «esos espacios»).
   Sobraban 136 px de azul bajo la última tarjeta: 90 px de reserva para la barra y 46 px porque la
   tarjeta más baja se quedaba arriba de su celda. Ahora cada tarjeta se apoya abajo y la reserva
   es lo justo para la barra (76 px) + 8 px de aire. */
@media (max-width:860px){
  .calle__pin{--libre-abajo:calc(84px + env(safe-area-inset-bottom))}
  .calle__paso{align-self:end}
}
/* Móvil · la tarjeta de inscripción de «Mucho más que una competencia» sin su botón ni la nota del
   pago (Carlos, 2026-09-14): el llamado vive en la barra inferior fija. En escritorio se quedan. */
@media (max-width:860px){
  .tarjeta-prod__cta,.tarjeta-prod__pie{display:none}
  .tarjeta-prod__lista{margin-bottom:0}
  /* 10 px de aire entre la tarjeta de la escena y la barra (con 6 px parecían tocarse) */
  .calle__pin{--libre-abajo:calc(88px + env(safe-area-inset-bottom))}
}
/* Móvil · sin «Te esperamos en 2027.» al pie de «Mucho más que una competencia» (Carlos, 2026-09-14). */
@media (max-width:860px){
  .oferta__cierre{display:none}
}
/* Móvil · sin el párrafo del concierto en «Mucho más que una competencia» (Carlos, 2026-09-14). */
@media (max-width:860px){
  .oferta__concierto{display:none}
}
/* Móvil · la cabecera de la tarjeta «Inscripción por equipo» centrada (Carlos, 2026-09-14):
   sello, título, torneo y fecha, y precio. La lista con palomitas sigue a la izquierda. */
@media (max-width:860px){
  .tarjeta-prod__sello{left:50%;transform:translateX(-50%);white-space:nowrap}
  .tarjeta-prod h3,.tarjeta-prod__lead,.tarjeta-prod__precio{text-align:center}
  .tarjeta-prod__precio{justify-items:center}
}

/* ── Móvil (Carlos, 2026-09-14): puntos bajo el carrusel de «Formato, premios y Fun Cart» y
   «Conoce el torneo en 54 segundos» centrado y sin «Quiero jugar». Escritorio intacto. ── */
.claves__puntos{display:none}
@media (max-width:860px){
  .claves__puntos{display:flex;justify-content:center;align-items:center;gap:2px;margin-top:4px}
  .claves__puntos button{display:grid;place-items:center;min-width:28px;height:28px;padding:0 4px;border:0;background:transparent;cursor:pointer}
  .claves__puntos button::before{content:"";width:8px;height:8px;border-radius:99px;background:rgba(255,255,255,.4);transition:width .3s cubic-bezier(.2,.7,.3,1),background .3s}
  .claves__puntos button.is-on::before{width:24px;background:#fff}
  .pelicula__texto{text-align:center}
  .pelicula__texto .btn{display:none}
}
/* Móvil · galería: la fila de fotos medía 94vw, más que el hueco entre los márgenes de la sección
   (24 px por lado), y se salía por la derecha: al entrar la última foto el margen izquierdo era
   mayor que el derecho (Carlos, 2026-09-14). Ahora ocupa justo el ancho disponible. */
@media (max-width:860px){
  .galeria__pila{width:100%}
}

/* ── Móvil (Carlos, 2026-09-14) ──────────────────────────────────────────────────────────
   · «Lo que dijeron los medios»: slider de un logo a la vez, con puntos (app.js · ponPuntos).
   · «Registra a tu equipo»: sin la fila de íconos «Tu equipo · Jugadores · Pago y folio» y sin el
     hueco de abajo: la sección reservaba 72 + 74 px para la barra, pero el body ya reserva los
     suyos (80 px), así que el espacio salía doble. Queda con los 72 px de todas las secciones. */
.prensa__puntos{display:none}
@media (max-width:860px){
  .prensa__logos{--pl-alto:30px;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;padding:0;
    scrollbar-width:none;max-width:none;margin:0 -24px}
  .prensa__logos::-webkit-scrollbar{display:none}
  .prensa__logos li{flex:0 0 100%;min-height:120px;scroll-snap-align:center;background:transparent;padding:0 24px}
  .prensa__logos li a{display:grid;place-items:center;width:100%;min-height:120px;border-radius:var(--radio);background:var(--papel-2)}
  .prensa__logos li:hover{transform:none;box-shadow:none}
  .prensa__puntos{display:flex;justify-content:center;align-items:center;gap:2px;margin-top:10px}
  .prensa__puntos button{display:grid;place-items:center;min-width:28px;height:28px;padding:0 4px;border:0;background:transparent;cursor:pointer}
  .prensa__puntos button::before{content:"";width:8px;height:8px;border-radius:99px;background:rgba(26,32,67,.22);transition:width .3s cubic-bezier(.2,.7,.3,1),background .3s}
  .prensa__puntos button.is-on::before{width:24px;background:var(--navy)}
  .prensa__cta{margin-top:26px}
  .lista__pasos{display:none}
  .lista{padding-bottom:72px}
}

/* ── Pie en móvil: sólo el logo de Grupo Anderson's y «Todas las marcas», que abre una hoja con
   todas las marcas (Carlos, 2026-09-14; la arma pleca.js). En escritorio la pleca sigue igual. ── */
.pleca__todas{display:none}
@media (max-width:860px){
  .pleca__marcas{display:none}
  .pleca__grupo{padding-bottom:0;border-bottom:0}
  .pleca__todas{display:inline-block;margin:2px auto 0;padding:8px 4px;border:0;background:none;cursor:pointer;
    font:800 12px/1 var(--fuente-menu);letter-spacing:.16em;text-transform:uppercase;color:var(--navy);
    text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px}
}
/* la hoja: sube desde abajo en móvil; centrada si se abriera en escritorio */
.marcas{--pleca-alto:26px;box-sizing:border-box;width:min(560px,100%);max-width:100%;max-height:min(86dvh,760px);margin:auto auto 0;padding:0;border:0;
  border-radius:24px 24px 0 0;background:var(--papel);color:var(--tinta);box-shadow:0 -20px 60px rgba(10,14,40,.3);overflow:auto;overscroll-behavior:contain}
@media (min-width:861px){.marcas{margin:auto;border-radius:24px}}
.marcas[open]{animation:marcasSube .42s cubic-bezier(.2,.7,.3,1)}
@keyframes marcasSube{from{transform:translateY(48px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.marcas[open]{animation:none}}
.marcas::backdrop{background:rgba(10,14,40,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.marcas__cab{position:sticky;top:0;z-index:1;display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 12px;padding:22px 22px 16px;background:var(--papel);border-bottom:1px solid var(--linea)}
.marcas__grupo{grid-column:1;width:118px;height:auto;filter:brightness(0);opacity:.9}
.marcas__cab h2{grid-column:1;margin:0;font:800 12px/1.2 var(--fuente-menu);letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-2)}
.marcas__cerrar{grid-column:2;grid-row:1 / span 2;width:42px;height:42px;border-radius:50%;border:1px solid var(--linea);background:#fff;color:var(--navy);font-size:24px;line-height:1;cursor:pointer}
.marcas__lista{padding:18px 18px calc(26px + env(safe-area-inset-bottom))}
.marcas .pleca__marcas ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;list-style:none;margin:0;padding:0}
.marcas .pleca__marcas li a{display:grid;place-items:center;min-height:86px;padding:14px;border-radius:16px;background:var(--papel-2);transition:transform .2s}
.marcas .pleca__marcas li a:active{transform:scale(.97)}
/* :where baja la especificidad: así siguen mandando los ajustes ópticos por marca de la pleca */
:where(.marcas .pleca__marcas) img{height:var(--pleca-alto);width:auto;max-width:132px;object-fit:contain;opacity:.85}
html.con-modal{overflow:hidden}
/* La lista de la hoja reutiliza la clase .pleca__marcas (para heredar las alturas ópticas por
   marca) y la regla de móvil que oculta la tira del pie la ocultaba también ahí. */
.marcas .pleca__marcas{display:block}
/* Los logos originales son blancos: en la pleca los oscurece .pie__marcas img, que no llega a la
   hoja (vive fuera del pie). Aquí igual: todos en negro y al 75 %, como una sola familia. */
:where(.marcas .pleca__marcas) img{filter:brightness(0);opacity:.75}
.marcas__cerrar:focus:not(:focus-visible){outline:none}
.marcas__cerrar:focus-visible{outline:2px solid var(--oliva);outline-offset:2px}
/* Móvil · galería sin el hueco verde bajo «Ver toda la galería» (Carlos, 2026-09-14). La capa de la
   foto ocupa toda la pantalla y centraba el contenido, así que al terminar la escena quedaba media
   pantalla difuminada vacía antes de la prensa. Ahora el contenido se apoya abajo, justo por encima
   de la barra inferior; el aire queda arriba, detrás del menú. */
@media (max-width:860px){
  .galeria__pin{align-content:end;padding-bottom:calc(118px + env(safe-area-inset-bottom))}   /* la barra ocupa ~76 px desde el borde */
}
/* Prensa en móvil: el margen negativo (0 -24px) para llevar el slider de borde a borde ensanchaba
   la página 48 px y en un teléfono real el navegador alejaba la vista para que cupiera
   (a 390 px el ancho de maquetación salía 414). El slider va dentro de los márgenes. */
@media (max-width:860px){
  .prensa__logos{margin:0;width:100%}
  .prensa__logos li{padding:0}
}
/* …y los 24 px de margen van dentro del propio slider (la sección no lleva margen lateral en
   móvil). Con 24 px entre logos, el siguiente empieza justo en el borde: uno a la vez, sin asomar. */
@media (max-width:860px){
  .prensa__logos{padding:0 24px;gap:24px;scroll-padding-inline:24px}
}
/* Móvil · sin el párrafo de presentación en «Mucho más que una competencia» (Carlos, 2026-09-14):
   queda el título y la tarjeta de inscripción. */
@media (max-width:860px){
  .oferta__intro{display:none}
}
/* Móvil · sin el título «Mucho más que una competencia» (Carlos, 2026-09-14). Era lo último que
   quedaba del bloque de texto, así que se oculta el bloque entero: no deja hueco sobre la tarjeta. */
@media (max-width:860px){
  .oferta__texto{display:none}
}
/* Móvil · sin el azul bajo la tarjeta de inscripción (Carlos, 2026-09-14). Como en la galería: la
   capa ocupa toda la pantalla y centraba la tarjeta, así que al terminar la escena quedaban ~190 px
   vacíos antes de «Formato, premios y Fun Cart». La tarjeta se apoya abajo, sobre la barra. */
@media (max-width:860px){
  .oferta__pin{align-content:end;padding-bottom:calc(100px + env(safe-area-inset-bottom))}
}

/* ── Móvil · galería apilada en vertical (Carlos, 2026-09-14): en vez de entrar de lado, cada foto
   sube desde abajo y se coloca bajo la anterior, a todo el ancho. La pila toma la altura que deja la
   pantalla (título, botón, menú y barra), con tope para no desbordar en teléfonos bajos. app.js
   reparte las fotos con `top` y las mueve con translateY. ── */
@media (max-width:860px){
  .galeria__pila{width:100%;aspect-ratio:auto;max-height:none;height:clamp(260px,calc(100dvh - 380px),520px)}
  .galeria__pila img{width:100%;height:44%;left:0;transform:translateY(100vh)}
}
/* Móvil · galería: el título se metía bajo el menú en teléfonos con poco alto útil (Safari con sus
   barras). La pila tenía un mínimo fijo y, con el contenido apoyado abajo, empujaba el título hacia
   arriba. Ahora la capa es una rejilla de 100dvh: título arriba (a 104 px, ~32 px bajo el menú), botón abajo
   (sobre la barra) y la pila ocupa exactamente lo que queda, con tope de 520 px (Carlos, 2026-09-14). */
@media (max-width:860px){
  .galeria__pin{height:100dvh;min-height:0;align-content:stretch;grid-template-rows:auto minmax(0,1fr) auto;gap:22px;
    padding-top:calc(104px + env(safe-area-inset-top));padding-bottom:calc(118px + env(safe-area-inset-bottom))}   /* título ~32 px bajo el menú */
  .galeria__pila{height:100%;max-height:520px;align-self:center}
}

/* ── Banda de la portada · texto nuevo (Carlos, 2026-09-15). El master ya lleva nombre, marca y
   fecha, así que el titular es una frase (formato y sede) en la letra del sitio, sin mayúsculas
   forzadas. Las letras del efecto de scroll van agrupadas por palabra en .pal (app.js), que no se
   parte; la regla de arriba que tiñe de verde los span del título se anula para .pal. ── */
.banda__ceja{margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#CFE0A6}
.banda__ceja .pmed{margin:0 .35em}
.banda__titulo.banda__titulo--frase{white-space:normal;text-wrap:balance;text-transform:none;font-size:clamp(28px,2.6vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1.12;max-width:560px;margin:0 auto 20px}
.banda__titulo.banda__titulo--frase span.pal{white-space:nowrap;color:inherit}
.banda__precio{margin:22px 0 26px;font-size:18px;color:#fff}
.banda__precio strong{color:#fff}
.banda__precio .pmed{margin:0 .35em;color:rgba(255,255,255,.6)}
@media (max-width:860px){
  .banda__titulo.banda__titulo--frase{font-size:clamp(25px,7vw,32px)}
  .banda__ceja{font-size:12px;letter-spacing:.14em}
  .banda__precio{margin-bottom:0;font-size:17px}
}
/* La ceja no se parte por dentro; a 320 px dejaba el «·» colgando al final de la primera línea.
   En pantallas estrechas cada parte va en su línea y el punto sobra. */
.banda__ceja>span:not(.pmed){white-space:nowrap}
@media (max-width:400px){
  .banda__ceja>span:not(.pmed){display:block}
  .banda__ceja .pmed{display:none}
}
/* Titular = nombre del torneo, más corto que la frase anterior: sube de tamaño. «Grupo Anderson's»
   va en un span y la regla de arriba lo pinta verde (sus .pal heredan el color). La frase de formato
   y sede baja como descripción destacada (Carlos, 2026-09-15). */
.banda__titulo.banda__titulo--frase{font-size:clamp(30px,3.1vw,48px);line-height:1.06;max-width:600px;margin-bottom:18px}
.banda__desc{margin:0 0 12px;font-size:clamp(18px,1.5vw,21px);font-weight:600;line-height:1.4;color:#fff}
@media (max-width:860px){
  .banda__titulo.banda__titulo--frase{font-size:clamp(28px,8.6vw,36px)}
  .banda__desc{font-size:18px}
}


/* ── Banda del master con la tarjeta de inscripción y el césped (Carlos, 2026-10-23) ──
   «Formato, premios y Fun Cart» se quitó y su textura de césped (con el mismo velo verde oscuro) pasa aquí
   «para no perderla». La tarjeta «Inscripción por equipo» sube a la banda desde «Mucho más que una competencia». */
.banda{--velo-cesped:linear-gradient(180deg,rgba(12,38,8,.62) 0%,rgba(8,28,6,.74) 100%);
  background:var(--velo-cesped),url(../img/textura-golf.webp) center/cover no-repeat,#1E5215}
.banda::before{display:none}   /* el halo oliva sobre el azul ya no hace falta encima del césped */
.banda .tarjeta-prod{max-width:420px;margin:40px auto 0;text-align:left}
/* Banda sin titular visible (Carlos, 2026-10-23): el h1 sigue en el HTML pero no se ve. Las fechas
   pasan a ser lo primero que se lee y suben de tamaño para sostener la columna. */
.banda__h1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* ── La pelota del torneo en el hero y el relevo de logos en el header (Carlos, 2026-10-23) ──
   Hero: la pelota sola, sin el círculo blanco, al centro. Header de la portada: arranca con el logo de
   Grupo Anderson's y, cuando la banda tapa la pelota del hero, headers.js pone .con-bola y se cruzan. */
.hero__logo{position:absolute;left:50%;top:50%;z-index:2;width:clamp(220px,27vw,420px);height:auto;transform:translate(-50%,-50%);
  filter:drop-shadow(0 14px 30px rgba(6,12,30,.38));animation:heroLogo 1s .15s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes heroLogo{from{opacity:0;transform:translate(-50%,-46%) scale(.94)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media (prefers-reduced-motion:reduce){.hero__logo{animation:none}}
@media (max-width:860px){.hero__logo{width:min(64vw,300px)}}

.cab__logo.con-marca{display:grid;align-items:center;justify-items:start}
.cab__logo.con-marca>img{grid-area:1/1;transition:opacity .35s ease,transform .35s ease,width .35s,height .35s}
html[data-header] .cab .cab__logo img.cab__logo-ga{width:auto;height:36px;max-width:none;aspect-ratio:1024/402;object-fit:contain;border-radius:0;background:none;padding:0}   /* nunca 42×42 de .is-scrolled: se deformaba */
.cab__logo.con-marca .cab__logo-bola{opacity:0;transform:scale(.7)}
.cab.con-bola .cab__logo.con-marca .cab__logo-ga{opacity:0;transform:scale(.85)}
.cab.con-bola .cab__logo.con-marca .cab__logo-bola{opacity:1;transform:none}
@media (max-width:860px){html[data-header] .cab .cab__logo img.cab__logo-ga{height:30px}}

/* ── Banda simétrica (Carlos, 2026-10-23): en escritorio la tarjeta mide lo mismo que el master, ancho
   y alto. El master es cuadrado (1080×1080), así que la tarjeta también: mismo tope de ancho y
   aspect-ratio 1. Si un día el contenido no cabe, la tarjeta crece en vez de recortarse. ── */
@media (min-width:861px){
  /* «Menos ancho» (Carlos, 2026-10-23): mismo alto que el master, 80 % de su ancho → 4:5. */
  .banda__texto{width:80%;max-width:calc(min(560px,72vh) * .8)}   /* 80 % de la columna: el master ocupa la suya entera */
  .banda .tarjeta-prod{max-width:none;width:100%;margin:0;aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,3vw,44px)}
  .banda .tarjeta-prod h3{font-size:clamp(24px,2.3vw,32px)}
  .banda .tarjeta-prod__precio{font-size:clamp(40px,4.4vw,58px)}
}
@media (max-width:860px){.banda .tarjeta-prod{max-width:420px;margin-top:28px}}

/* ── Ventana de fechas de venta (Carlos, 2026-10-23) ── */
.fv{width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:44px 36px 32px;border:0;border-radius:var(--radio);
  background:var(--papel);color:var(--tinta);text-align:center;box-shadow:0 40px 90px rgba(3,6,20,.55);overflow:auto}
.fv::backdrop{background:rgba(10,16,40,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.fv[open]{animation:fvEntra .32s cubic-bezier(.2,.8,.2,1)}
.fv[open]::backdrop{animation:fvVelo .32s ease}
@keyframes fvEntra{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes fvVelo{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.fv[open],.fv[open]::backdrop{animation:none}}
.fv__cerrar-form{position:absolute;top:12px;right:12px;margin:0}
.fv__cerrar{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:var(--papel-2);color:var(--tinta);cursor:pointer}
.fv__cerrar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.fv__cerrar:hover{background:#e6e9e1}
.fv__ceja{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--oliva-2)}
.fv__sede{margin:-14px 0 24px;font-size:14.5px;font-weight:600;line-height:1.5;color:var(--tinta-2);text-wrap:balance}
.fv__sede>span{display:block;white-space:nowrap}   /* fecha y sede en su renglón: sin punto que quede colgando */
.fv__sede>span:last-child{font-weight:700;color:var(--navy)}
.fv__titulo{margin:0 0 26px;font-size:clamp(26px,5vw,32px);font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--navy)}
.fv__fechas{display:grid;grid-template-columns:1fr 1fr;margin:0 0 24px;padding:22px 0;border-block:1px solid rgba(26,32,67,.12)}
.fv__fecha{display:grid;justify-items:center;gap:2px;padding:0 10px}
.fv__fecha+.fv__fecha{border-left:1px solid rgba(26,32,67,.12)}
.fv__tanda{margin-bottom:6px;padding:5px 12px;border-radius:99px;background:var(--oliva);color:#fff;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.fv__dia{font-size:clamp(52px,14vw,68px);font-weight:900;letter-spacing:-.04em;line-height:1;color:var(--navy)}
.fv__mes{font-size:15px;font-weight:600;color:var(--tinta-2);white-space:nowrap}
.fv__nota{margin:0 0 22px;font-size:15px;color:var(--tinta-2)}
.fv__nota strong{color:var(--navy)}
.fv__cupo{display:block;margin-top:4px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--oliva-2)}
.fv__cta{display:flex;justify-content:center;width:100%}
@media (max-width:400px){
  .fv{padding:64px 18px 22px}   /* la ceja baja de la X */
  .fv__ceja{text-wrap:balance}
  .fv__fecha{padding:0 4px}
  .fv__tanda{font-size:9.5px;letter-spacing:.06em;padding:5px 8px}
  .fv__cta{font-size:13px;letter-spacing:.08em;padding-left:12px;padding-right:12px;white-space:nowrap}
}
/* Escritorio estrecho (861–1180 px): al 80 % el contenido ya no cabía y la tarjeta se estiraba más
   que el master. Ahí vuelve al ancho del master, cuadrada, y aprieta el aire de dentro. */
@media (min-width:861px) and (max-width:1180px){
  .banda__texto{width:100%;max-width:min(560px,72vh)}
  .banda .tarjeta-prod{aspect-ratio:1/1;padding:24px 26px}
  .banda .tarjeta-prod h3{font-size:22px}
  .banda .tarjeta-prod__lead{margin-bottom:12px}
  .banda .tarjeta-prod__precio{font-size:38px;margin-bottom:14px}
  .banda .tarjeta-prod__lista{font-size:14px}
  .banda .tarjeta-prod__pie{display:none}
}
/* El conjunto master + tarjeta, centrado con margen simétrico a los lados (Carlos, 2026-10-23). Con
   1fr 1fr cada pieza se pegaba a su columna y, al ser la tarjeta más angosta, sobraba aire sólo a la
   derecha. Ahora las columnas miden lo que sus piezas y el grid se centra. --m = ancho del master. */
@media (min-width:861px){
  .banda{--hueco:clamp(40px,5vw,88px);--m:min(560px,72vh,calc((100vw - 2 * clamp(24px,6vw,96px) - var(--hueco) - 20px) / 1.8));
    grid-template-columns:auto auto;justify-content:center;column-gap:var(--hueco)}
  .banda__master{width:var(--m);max-width:none}
  .banda__texto{width:calc(var(--m) * .8);max-width:none}
}
@media (min-width:861px) and (max-width:1180px){
  .banda{--m:min(560px,72vh,calc((100vw - 2 * clamp(24px,6vw,96px) - var(--hueco) - 20px) / 2))}
  .banda__texto{width:var(--m)}
}

/* Salida de la pelota del hero (Carlos, 2026-10-23): headers.js pone --salida de 0 a 1 con el scroll.
   La entrada usa fill backwards para no retener opacidad al terminar y dejar mandar a la salida. */
.hero__logo{opacity:calc(1 - var(--salida,0) * .85);scale:calc(1 + var(--salida,0) * .12);
  filter:blur(calc(var(--salida,0) * 14px)) drop-shadow(0 14px 30px rgba(6,12,30,.38));will-change:filter,opacity,scale;backface-visibility:hidden}
/* Móvil: sin la sombra (el logo ya trae su contorno) y menos desenfoque, que en iPhone cada píxel de blur
   sobre la imagen se recalcula en cada cuadro del scroll. */
@media (max-width:860px){.hero__logo{filter:blur(calc(var(--salida,0) * 9px))}}
/* La tarjeta reparte el alto en sus cuatro bloques en vez de centrarlos con aire arriba y abajo
   (Carlos, 2026-10-23: «distribúyelo más»). Los márgenes propios se anulan: manda el reparto. */
@media (min-width:861px){
  .banda .tarjeta-prod{justify-content:space-between}
  .banda .tarjeta-prod__lead,.banda .tarjeta-prod__precio,.banda .tarjeta-prod__lista{margin-bottom:0}
  .banda .tarjeta-prod__lead{margin-top:8px;font-size:15px;line-height:1.5}
  .banda .tarjeta-prod__lista{gap:14px;padding-top:22px}
  .banda .tarjeta-prod__lista li{font-size:16px}
  .banda .tarjeta-prod__lista svg{width:18px;height:18px}
}
@media (min-width:861px) and (max-width:1180px){
  .banda .tarjeta-prod__lead{font-size:13.5px}
  .banda .tarjeta-prod__lista{gap:9px;padding-top:14px}
  .banda .tarjeta-prod__lista li{font-size:14px}
}
/* Móvil: las tres tarjetas de «El formato» miden lo mismo (Carlos, 2026-10-23). Comparten celda del
   grid, así que basta con estirarlas: todas toman el alto de la más alta. Escritorio no se toca. */
@media (max-width:860px){.calle__paso{align-self:stretch}}
/* La sede en la tarjeta (Carlos, 2026-10-23): primero sólo en móvil, luego también en escritorio. */
.tarjeta-prod__sede{display:block;white-space:nowrap;font-weight:700;color:var(--navy)}

/* ── LA PLECA de la web de Grupo Anderson's, traída al torneo (Carlos, 2026-10-23) ──
   Misma estructura y medidas que newandersonsweb (sitio.css): el grupo a la izquierda tras un filete y
   19 marcas en dos filas fijas, con los valores de su afinador (alto 17, espacios 29/44, filas 14,
   intensidad .62, grupo 166). Aquí el pie es claro: los logos van en oscuro, no en blanco.
   La pleca vieja (.pleca, pleca.js) queda sin uso; sus reglas de .pie__marcas img pisaban a éstas,
   por eso las de imagen llevan .pie__marcas delante. */
.pie-pleca{--pleca-grupo:166px;--pleca-alto:17px;--pleca-gapy:14px;--pleca-op:.62;--pleca-sep:33px;
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--pleca-sep);padding:28px 0;
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.pie-pleca__grupo{display:block;padding-right:var(--pleca-sep);border-right:1px solid var(--linea);line-height:0}
.pie__marcas .pie-pleca__grupo img{display:block;max-width:none;width:var(--pleca-grupo);height:auto;filter:brightness(0);opacity:.9}
.pie-pleca__marcas{display:grid;grid-template-columns:minmax(0,1fr);min-width:0;gap:var(--pleca-gapy)}
.pie-pleca__marcas ul:first-child{--af-gx:29}
.pie-pleca__marcas ul:nth-child(2){--af-gx:44}
.pie-pleca__marcas ul{min-width:0;--pleca-gapx:clamp(min(28px,var(--af-gx) * 1px),var(--af-gx) * 100vw / 1440,var(--af-gx) * 1px);list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:var(--pleca-gapy) calc(var(--pleca-gapx) * var(--encaje,1))}
.pie-pleca__marcas li{margin:0;flex:0 0 auto}
.pie-pleca__marcas a{display:inline-flex;align-items:center;min-height:32px}
.pie__marcas .pie-pleca__marcas img{height:calc(var(--pleca-alto) * var(--escala,1) * var(--encaje,1));width:auto;max-width:calc(120px * var(--encaje,1));filter:brightness(0);opacity:var(--pleca-op);transition:opacity .2s ease,transform .2s ease}
.pie__marcas .pie-pleca__marcas a:hover img,.pie__marcas .pie-pleca__marcas a:focus-visible img{opacity:1;transform:translateY(-2px)}
@media (max-width:900px){.pie-pleca__marcas ul{--pleca-gapx:min(28px,var(--af-gx) * 1px)}
  .pie-pleca{grid-template-columns:1fr;justify-items:center;text-align:center}
  .pie-pleca__grupo{padding:0 0 22px;border-right:0;border-bottom:1px solid var(--linea)}}
.pie-pleca__ver{display:none}
.hoja-marcas{width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);margin:auto;padding:0;border:0;border-radius:22px;
  background:var(--papel);color:var(--tinta);overflow:auto;overscroll-behavior:contain;box-shadow:0 30px 80px rgba(10,16,28,.45)}
.hoja-marcas::backdrop{background:rgba(14,20,32,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hoja-marcas[open]{animation:hoja-entra .32s cubic-bezier(.2,.8,.2,1)}
@keyframes hoja-entra{from{opacity:0;transform:translateY(18px) scale(.98)}}
.hoja-marcas__cab{position:sticky;top:0;z-index:1;display:grid;justify-items:center;gap:12px;padding:30px 20px 22px;background:var(--papel);border-bottom:1px solid var(--linea)}
.hoja-marcas__cab img{width:128px;height:auto;filter:brightness(0)}
.hoja-marcas__cab h2{margin:0;font-size:11px;font-weight:700;line-height:1;letter-spacing:.24em;text-transform:uppercase;color:var(--tinta-2)}
.hoja-marcas__cerrar{position:absolute;top:14px;right:14px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--linea);background:transparent;color:var(--tinta);cursor:pointer}
.hoja-marcas__cerrar svg{width:20px;height:20px}
.hoja-marcas__lista{list-style:none;margin:0;padding:18px 16px 26px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.hoja-marcas__lista li{flex:0 0 calc((100% - 20px) / 3);margin:0}
.hoja-marcas__lista a{display:flex;align-items:center;justify-content:center;aspect-ratio:1.45;padding:10px;border-radius:14px;
  background:var(--papel-2);border:1px solid var(--linea);transition:background .2s ease,border-color .2s ease}
.hoja-marcas__lista a:hover,.hoja-marcas__lista a:focus-visible{background:#e8ece3;border-color:rgba(26,32,67,.25)}
.hoja-marcas__lista img{height:calc(20px * var(--escala,1));width:auto;max-width:86%;max-height:72%;object-fit:contain;filter:brightness(0);opacity:.85}
html.con-hoja{overflow:hidden}
@media (max-width:560px){.pie-pleca__marcas{display:none}
  .pie-pleca__grupo{border-bottom:0;padding-bottom:14px}
  .pie-pleca__ver{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 22px;border-radius:999px;border:1px solid var(--linea);
    background:transparent;color:var(--tinta);font-size:11px;font-weight:700;line-height:1;letter-spacing:.2em;text-transform:uppercase;font-family:inherit;cursor:pointer}
  .pie-pleca{gap:8px;--pleca-grupo:calc(166px * .84)}}
@media (prefers-reduced-motion:reduce){.hoja-marcas[open]{animation:none}}
/* Teléfono: las marcas SE VEN en el pie, en rejilla de tres (Carlos, 2026-10-23: «no veo los logos»).
   En la web de GA se escondían tras «Ver marcas»; aquí no. Las dos filas se funden (ul con display:contents)
   y el tamaño no usa --encaje, que es para las filas de escritorio. */
@media (max-width:560px){
  .pie-pleca__marcas{display:flex;flex-wrap:wrap;justify-content:center;gap:22px 12px;width:100%;margin-top:10px}
  .pie-pleca__marcas ul{display:contents}
  .pie-pleca__marcas li{flex:0 0 calc((100% - 24px) / 3);display:flex;justify-content:center}
  .pie__marcas .pie-pleca__marcas img{height:calc(15px * var(--escala,1));max-width:92%;object-fit:contain}
  .pie-pleca__grupo{border-bottom:1px solid var(--linea);padding-bottom:18px}
  .pie-pleca__ver{display:none}
}
.fv__cta-form{margin:0}   /* «Entendido» cierra la ventana (form method=dialog) */