/* ============================================================
   SAN ANDRÉS TRAIL — Sistema visual
   Dirección: "cuaderno de ruta del páramo".
   Roca volcánica, hielo de glaciar y la luz del amanecer sobre
   la nieve. La carrera entera transcurre sobre los 2.940 m y el
   sitio se construye con esos materiales.

   Tema único y deliberado: no hay modo claro/oscuro. Cada color
   se declara de forma explícita para que la página se sostenga
   sobre cualquier fondo.
   ============================================================ */

/* ---- Exo: la tipografía del evento (entregada por el cliente) ---- */
@font-face{
  font-family:"Exo";
  src:url("../fonts/Exo-Light.otf") format("opentype");
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Exo";
  src:url("../fonts/Exo-Medium.otf") format("opentype");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Exo";
  src:url("../fonts/Exo-Bold.ttf") format("truetype");
  font-weight:700;font-style:normal;font-display:swap;
}

:root{
  /* ---- Paleta ---- */
  /* Turquesa y naranja muestreados de los gráficos del cliente:
     tono 186° y 17°, ambos a saturación plena. De ahí sale todo lo
     demás, con las luminosidades ajustadas para que cada pareja de
     color pase el contraste AA. */
  --roca:#0C1617;        /* casi negro con sesgo turquesa */
  --roca-2:#172426;      /* roca elevada (franjas de datos) */
  --roca-3:#243538;      /* filetes y bordes sobre oscuro */
  --hielo:#00B8CC;       /* turquesa de marca, sobre fondos de roca */
  --hielo-hondo:#007785; /* el mismo turquesa, legible sobre nieve */
  --accion:#CC3A00;      /* naranja de marca: botones de inscripción */
  --accion-claro:#FF5B1A;/* el mismo naranja, sobre fondos de roca */
  --nieve:#F1F4F6;       /* fondo claro */
  --nieve-pura:#FFFFFF;
  --ceniza:#5A6E72;      /* texto secundario */
  --ceniza-clara:#93A9AE;
  --linea:#DFE6E7;       /* filetes sobre claro */

  /* ---- Tipografía ----
     Exo, la del evento, servida desde el propio sitio: sin CDN ni
     dependencias externas. Light 300 para lectura, Medium 500 y
     Bold 700 para titulares, cifras y etiquetas. */
  --f-display:"Exo","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-texto:"Exo","Segoe UI",system-ui,-apple-system,sans-serif;

  --t-xs:.72rem;
  --t-s:.82rem;
  --t-m:.95rem;
  --t-l:1.06rem;
  --t-xl:clamp(1.25rem,2.2vw,1.55rem);
  --t-2xl:clamp(1.7rem,3.4vw,2.4rem);
  --t-3xl:clamp(2.3rem,6.5vw,4.2rem);

  --container:1200px;
  --radio:2px;
  --sombra:0 14px 34px rgba(13,20,28,.10);
}

*,*::before,*::after{box-sizing:border-box}

/* Una regla de autor con display gana al atributo hidden, así que se
   restablece de forma global en vez de recordarlo caso por caso. */
[hidden]{display:none !important}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

body{
  margin:0;
  background:var(--nieve-pura);
  color:var(--roca);
  font-family:var(--f-texto);
  font-size:var(--t-m);
  font-weight:500;          /* Exo Medium: el peso de lectura */
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
/* Exo Light se reserva para los párrafos grandes de entrada */
.lead,.hero__sub,.race-hero__place{font-weight:300}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

h1,h2,h3,h4{
  font-family:var(--f-display);
  margin:0 0 .5em;line-height:1.05;
  text-transform:uppercase;letter-spacing:.02em;font-weight:700;
  text-wrap:balance;
}
h1{font-size:var(--t-3xl);letter-spacing:.005em}
h2{font-size:var(--t-2xl)}
h3{font-size:var(--t-xl)}
h4{font-size:var(--t-s);letter-spacing:.14em}
p{margin:0 0 1em}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px}
.section{padding:clamp(48px,7vw,88px) 0;background:var(--nieve-pura)}
.section--alt{background:var(--nieve);border-block:1px solid var(--linea)}
.section__head{max-width:66ch;margin:0 0 clamp(28px,4vw,44px)}
.lead{font-size:var(--t-l);color:var(--ceniza);max-width:66ch}
.lead strong{color:var(--roca)}

/* Antetítulo con marca de cota: el filete y el punto imitan la
   señalización de una curva de nivel en un mapa. */
.eyebrow{
  font-family:var(--f-display);
  font-size:var(--t-xs);letter-spacing:.24em;text-transform:uppercase;
  color:var(--hielo-hondo);margin:0 0 .75rem;
  display:flex;align-items:center;gap:12px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--linea);max-width:120px}

/* ============================ BOTONES ============================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:15px 30px;border:0;border-radius:var(--radio);cursor:pointer;
  font-family:var(--f-display);font-weight:700;font-size:var(--t-s);
  letter-spacing:.16em;text-transform:uppercase;
  transition:background-color .18s,color .18s,transform .18s;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--accion);color:#fff}
.btn--primary:hover{background:#E64200}
.btn--dark{background:var(--roca);color:var(--nieve)}
.btn--dark:hover{background:var(--roca-2)}
.btn--ghost{background:transparent;color:currentColor;border:1px solid currentColor}
.btn--ghost:hover{background:currentColor;color:var(--roca)}
.btn--block{width:100%}

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:2px solid var(--hielo);outline-offset:3px;border-radius:1px;
}

/* ============================ RELIEVE ============================ */
/* Curvas de nivel generadas en canvas sobre los fondos de roca.
   Cada quinta curva es una curva índice, como en cartografía. */
.relieve{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.9}

/* ============================ PLACEHOLDERS ============================ */
/* Mientras no hay fotografía, el hueco es un panel de roca con
   retícula fina y su etiqueta: se lee como intencional, no como error. */
.ph{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:120px;padding:16px;
  background:
    linear-gradient(var(--linea) 1px,transparent 1px) 0 0/100% 28px,
    linear-gradient(90deg,var(--linea) 1px,transparent 1px) 0 0/28px 100%,
    var(--nieve);
  color:var(--ceniza-clara);
  font-family:var(--f-display);font-size:var(--t-xs);
  letter-spacing:.2em;text-transform:uppercase;
}
/* Mientras no haya fotografía de portada, el relieve es el fondo:
   una retícula de relleno sólo competiría con las curvas de nivel. */
.hero__media.ph,.race-hero__media.ph{display:none}

.hero .ph,.race-hero .ph,.cta-band .ph{
  background:
    linear-gradient(rgba(92,198,222,.10) 1px,transparent 1px) 0 0/100% 28px,
    linear-gradient(90deg,rgba(92,198,222,.10) 1px,transparent 1px) 0 0/28px 100%,
    var(--roca);
  color:rgba(241,244,246,.35);
}

/* ============================ BARRA SUPERIOR ============================ */
.topbar{
  background:var(--roca);color:var(--nieve);
  font-family:var(--f-display);font-size:var(--t-xs);
  letter-spacing:.14em;text-transform:uppercase;
}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:38px}
.topbar__left{display:flex;align-items:center;gap:22px}
.topbar__left span:first-child{color:var(--hielo)}
.topbar__fecha{color:var(--ceniza-clara)}
.topbar__right{display:flex;align-items:center;gap:14px}
.topbar__social{display:flex;gap:6px}

/* ============================ CABECERA ============================ */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--nieve-pura);border-bottom:1px solid var(--linea);
  transition:box-shadow .2s;
}
.site-header.is-fijo{box-shadow:0 6px 20px rgba(13,20,28,.10)}
section[id],div[id]{scroll-margin-top:100px}

.site-header .container{display:flex;align-items:center;gap:28px;min-height:78px}
/* El logotipo real es apaisado (2,4:1), así que la marca se apila:
   logotipo arriba y la fecha debajo, en lugar de caja + texto. */
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.brand__logo{height:34px;width:auto;display:block}

/* --- El sello del UTMB Index, al lado del logo ---
   Va como hermano de .brand, no dentro: el enlace del logo lleva a la
   portada y meter dentro el sello de otra entidad haría pensar que
   lleva al UTMB.
   La pastilla clara es para el pie y para el hero: la mitad izquierda
   del sello es azul marino y sobre fondo oscuro se perdería. */
.aval{display:inline-flex;align-items:center;line-height:0}
.aval__sello{height:26px;width:auto;display:block}
.aval--claro{
  background:var(--nieve-pura);border-radius:6px;padding:6px 9px;
  box-shadow:0 1px 3px rgba(13,20,28,.16);
}
.aval__enlace{display:inline-flex;line-height:0}
.aval__enlace:hover .aval__sello{opacity:.82}

/* En la cabecera, pegado a la marca y sin estirar la fila. */
.site-header .aval,
.site-header .aval__enlace{flex:none;margin-left:-14px}

/* En el hero y en el pie va debajo del logo, con su aire. */
.hero__inner > .aval,
.hero__inner > .aval__enlace{margin:0 0 22px}
.footer-grid .aval,
.footer-grid .aval__enlace{margin-top:16px}
.footer-grid .aval__sello{height:30px}
.brand .ph{width:54px;height:44px;min-height:0;padding:0;letter-spacing:.1em}
.brand__texto{
  font-family:var(--f-display);font-weight:700;font-size:var(--t-l);
  text-transform:uppercase;letter-spacing:.08em;line-height:1.05;
}
.brand__date{
  display:block;font-size:var(--t-xs);letter-spacing:.18em;
  color:var(--hielo-hondo);font-weight:500;
}

.nav{margin-left:auto}
.nav__list{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.nav__link{
  position:relative;display:inline-block;padding:12px 0;white-space:nowrap;
  font-family:var(--f-display);font-size:var(--t-s);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
}
.nav__link::after{
  content:"";position:absolute;left:0;right:100%;bottom:6px;height:2px;
  background:var(--hielo);transition:right .22s ease;
}
.nav__item:hover .nav__link::after,.nav__item:focus-within .nav__link::after{right:0}
.nav__item{position:relative}
.nav__sub{
  position:absolute;top:100%;left:-18px;min-width:250px;z-index:5;
  background:var(--roca);border-top:2px solid var(--hielo);
  list-style:none;margin:0;padding:10px 0;display:none;
  box-shadow:0 18px 40px rgba(13,20,28,.28);
}
.nav__item:hover .nav__sub,.nav__item:focus-within .nav__sub{display:block}
.nav__sub a{
  display:block;padding:9px 18px;font-size:var(--t-s);color:var(--nieve);
  border-left:2px solid transparent;
}
.nav__sub a:hover{background:var(--roca-2);border-left-color:var(--accion);color:var(--nieve)}

.nav__mas,.nav__head,.nav__extra,.nav-fondo{display:none}

.nav-toggle{
  display:none;align-items:center;gap:10px;background:none;
  border:1px solid var(--linea);border-radius:var(--radio);
  padding:11px 15px;cursor:pointer;color:inherit;
  font-family:var(--f-display);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
}
.nav-toggle__barras{position:relative;width:16px;height:2px;background:currentColor;display:block}
.nav-toggle__barras::before,.nav-toggle__barras::after{
  content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor;
}
.nav-toggle__barras::before{top:-5px}
.nav-toggle__barras::after{top:5px}

/* ============================ REDES ============================ */
.redes{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.red{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:38px;height:38px;border-radius:50%;
  border:1px solid currentColor;color:inherit;opacity:.7;
  transition:opacity .16s,background-color .16s,color .16s,border-color .16s;
}
.red:hover,.red:focus-visible{opacity:1;background:var(--hielo);border-color:var(--hielo);color:var(--roca)}
.red--mini{width:26px;height:26px;border:0;opacity:.75}
.red--mini .icono{width:15px;height:15px}
.red--mini:hover{background:transparent;color:var(--hielo)}
.red__texto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.idioma{font-family:var(--f-display);font-weight:600;opacity:.7}
.idioma:hover{opacity:1}
.idioma[aria-current="true"]{color:var(--hielo);opacity:1}

/* ============================ PORTADA ============================ */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(88vh,760px);display:flex;align-items:flex-end;
  background:var(--roca);color:var(--nieve);
}
.hero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.55}
.hero .relieve{opacity:1}
.hero::after{ /* la luz del amanecer entra por el borde inferior */
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(13,20,28,.92) 0%,rgba(13,20,28,.35) 45%,rgba(13,20,28,.15) 100%);
}
.hero__inner{position:relative;z-index:3;width:100%;max-width:var(--container);margin-inline:auto;padding:0 24px clamp(48px,7vw,80px)}

/* La fecha se presenta como una cota levantada en campo */
.hero__date{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--f-display);font-size:var(--t-s);
  letter-spacing:.28em;text-transform:uppercase;color:var(--hielo);
  margin:0 0 24px;padding:0;border:0;
}
.hero__date::before{content:"";width:52px;height:2px;background:var(--accion)}
/* Proporción libre: el logotipo real es apaisado y no debe deformarse */
.hero__logo{width:min(300px,74vw);height:auto;margin:0 0 24px;object-fit:contain}
.footer__logo{width:170px;height:auto;object-fit:contain}
.hero__claim{
  font-family:var(--f-display);font-size:var(--t-3xl);font-weight:700;
  line-height:.92;letter-spacing:.01em;text-transform:uppercase;
  margin:0 0 14px;max-width:16ch;text-wrap:balance;
}
.hero__sub{font-size:var(--t-l);color:rgba(241,244,246,.78);margin:0 0 32px;max-width:48ch}

/* ---- Cuenta atrás: cifras tabulares, como un cronómetro ---- */
.countdown{display:flex;gap:clamp(20px,4vw,44px);margin-top:44px;flex-wrap:wrap;padding-top:28px;border-top:1px solid rgba(92,198,222,.25)}
.countdown__item{min-width:74px}
.countdown__num{
  display:block;font-family:var(--f-display);font-size:clamp(2rem,4.5vw,3rem);
  font-weight:700;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.countdown__label{
  font-family:var(--f-display);font-size:var(--t-xs);
  letter-spacing:.2em;text-transform:uppercase;color:var(--hielo);
}

/* ============================ TARJETAS DE CARRERA ============================ */
.race-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr));gap:26px}
.race-card{
  --race:var(--hielo);
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--nieve-pura);border:1px solid var(--linea);border-radius:var(--radio);
  transition:transform .22s,box-shadow .22s;
}
.race-card:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.race-card__media{position:relative;min-height:200px;background:var(--roca)}
.race-card__media > .ph,.race-card__media > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.race-card__date{
  position:absolute;top:0;left:0;z-index:2;
  background:var(--roca);color:var(--nieve);
  font-family:var(--f-display);font-size:var(--t-xs);
  letter-spacing:.16em;text-transform:uppercase;padding:7px 16px;
}
.race-card__status{
  position:absolute;bottom:14px;left:16px;right:16px;z-index:2;
  display:flex;align-items:center;gap:9px;
  font-family:var(--f-display);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--nieve);
  text-shadow:0 1px 6px rgba(13,20,28,.8);
}
.race-card__status::before{content:"";width:8px;height:8px;border-radius:50%;background:#7FA83F;box-shadow:0 0 0 4px rgba(127,168,63,.25)}
.race-card__status[data-abierta="0"]::before{background:var(--ceniza-clara);box-shadow:0 0 0 4px rgba(147,162,175,.22)}
.race-card__bar{height:5px}
.race-card__body{padding:24px;display:flex;flex-direction:column;gap:16px;flex:1}
.race-card__title{font-size:clamp(1.6rem,3vw,2.1rem);margin:0;line-height:.95;letter-spacing:.01em}
.race-card__place{font-size:var(--t-s);color:var(--ceniza);margin:6px 0 0}
.race-card__type{
  align-self:flex-start;font-family:var(--f-display);font-size:var(--t-xs);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ceniza);
  border:1px solid var(--linea);padding:4px 10px;border-radius:var(--radio);
}
.race-card__foot{margin-top:auto;padding:0 24px 24px}

/* Silueta del recorrido dentro de la tarjeta: dato, no adorno */
.race-card__perfil{display:block;width:100%;height:56px;margin-top:2px}

.data-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;border-top:1px solid var(--linea);padding-top:18px}
.data{display:flex;flex-direction:column;gap:3px}
.data__label{font-family:var(--f-display);font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ceniza)}
.data__value{font-family:var(--f-display);font-size:1.22rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* ============================ CABECERAS INTERIORES ============================ */
.race-hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--roca);color:var(--nieve);
  padding:clamp(52px,7vw,84px) 0;
}
.race-hero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.4}
.race-hero::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(13,20,28,.9),rgba(13,20,28,.45));
}
.race-hero .container{position:relative;z-index:3}
.race-hero h1{margin-bottom:.25em}
.breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;
  font-family:var(--f-display);font-size:var(--t-xs);
  letter-spacing:.16em;text-transform:uppercase;color:var(--hielo);margin:0 0 22px;
}
.breadcrumb a::after{content:"/";margin:0 10px;color:var(--roca-3);color:rgba(241,244,246,.35)}
.race-hero__tag{
  display:inline-block;margin-bottom:18px;padding:5px 14px;
  background:var(--accion);color:#fff;
  font-family:var(--f-display);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
}
.race-hero__place{color:rgba(241,244,246,.78);margin:0 0 30px;max-width:56ch;font-size:var(--t-l)}

/* ---- Franja de datos ---- */
.stats-bar{background:var(--roca-2);color:var(--nieve)}
/* Fondo uniforme y filete por elemento: con auto-fit puede sobrar una
   columna, y un fondo de separación dejaría una banda vacía a la vista. */
.stats-bar .container{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));
  gap:0;padding:0;background:var(--roca-2);
}
.stat{background:var(--roca-2);padding:26px 24px;border-left:1px solid var(--roca-3)}
.stat:first-child{border-left:0}
.stat__label{
  font-family:var(--f-display);font-size:var(--t-xs);letter-spacing:.18em;
  text-transform:uppercase;color:var(--hielo);margin:0 0 6px;
}
.stat__value{
  font-family:var(--f-display);font-size:1.5rem;font-weight:700;
  font-variant-numeric:tabular-nums;margin:0;line-height:1.1;
}

/* ============================ PERFIL DE ELEVACIÓN ============================ */
.elevation{background:var(--roca);border:1px solid var(--roca-3);padding:clamp(18px,3vw,28px)}
.elevation__lienzo{position:relative}
.elevation__chart{width:100%;height:clamp(180px,26vw,260px);display:block}
/* Cota de cumbre: va en HTML porque dentro de un SVG con
   preserveAspectRatio="none" cualquier marca se deforma. */
/* La cota cuelga por debajo de la cumbre: la cumbre está siempre pegada
   al borde superior del lienzo y encima no hay sitio. */
.elevation__cumbre{
  position:absolute;transform:translate(-50%,12px);
  padding:4px 9px;white-space:nowrap;
  background:var(--roca-2);border:1px solid var(--roca-3);color:var(--nieve);
  font-family:var(--f-display);font-size:var(--t-xs);
  letter-spacing:.12em;font-variant-numeric:tabular-nums;
}
.elevation__cumbre::before{
  content:"";position:absolute;left:50%;top:-12px;width:1px;height:12px;background:var(--hielo);
}
.elevation__axis{
  display:flex;justify-content:space-between;gap:12px;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--roca-3);
  font-family:var(--f-display);font-size:var(--t-xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ceniza-clara);
  font-variant-numeric:tabular-nums;
}
.elevation__axis span:nth-child(2){color:var(--hielo)}

/* ============================ MAPA DEL RECORRIDO ============================ */
/* Diagrama de ruta autónomo: sin teselas ni claves de servicio. Si el
   panel recibe un mapa embebido, ese sustituye al diagrama. */
.mapa{background:var(--roca);border:1px solid var(--roca-3);color:var(--nieve)}
.mapa svg{display:block;width:100%;height:auto}
.mapa__marca text{
  font-family:var(--f-display);font-size:20px;letter-spacing:.12em;
  text-transform:uppercase;fill:var(--nieve);
}
.mapa__escala text,.mapa__norte text{
  font-family:var(--f-display);font-size:18px;letter-spacing:.14em;
  text-transform:uppercase;fill:var(--nieve);
}
.mapa__escala{color:var(--hielo)}
.mapa--embebido iframe{display:block;width:100%;height:clamp(300px,45vw,520px);border:0}
.mapa--vacio{padding:clamp(32px,6vw,56px);text-align:center;color:var(--ceniza-clara)}
.mapa--vacio strong{color:var(--nieve)}
.mapa--vacio p{max-width:52ch;margin-inline:auto}

.encuentro__coords{
  font-family:var(--f-display);font-variant-numeric:tabular-nums;
  letter-spacing:.08em;color:var(--hielo-hondo);
}
.table--compacta td{padding:10px 12px;font-size:var(--t-s)}
.table--compacta .td-km{font-family:var(--f-display);font-variant-numeric:tabular-nums;white-space:nowrap;width:1%}
.table--compacta .td-tipo{color:var(--ceniza);text-align:right;white-space:nowrap}

/* Acuse de recibo tras enviar un formulario */
.acuse{
  border:1px solid var(--linea);border-top:3px solid var(--accion);
  background:var(--nieve-pura);padding:clamp(26px,4vw,40px);max-width:840px;
}
.acuse h3{margin-bottom:.4em}
.acuse__nota{font-size:var(--t-s);color:var(--ceniza);margin:0}

/* ============================ PRECIOS ============================ */
.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:1px;background:var(--linea);border:1px solid var(--linea)}
.price{background:var(--nieve-pura);padding:30px 26px}
.price .stat__label{color:var(--hielo-hondo)}
.price__amount{
  font-family:var(--f-display);font-size:2.4rem;font-weight:700;
  font-variant-numeric:tabular-nums;line-height:1;margin:10px 0 6px;
}
.price__note{font-size:var(--t-s);color:var(--ceniza);margin:0}

/* ============================ TABLAS ============================ */
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:var(--t-m);background:var(--nieve-pura);font-variant-numeric:tabular-nums}
.table th,.table td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--linea)}
.table thead th{
  background:var(--roca);color:var(--nieve);border-bottom:0;
  font-family:var(--f-display);font-size:var(--t-xs);
  letter-spacing:.16em;text-transform:uppercase;font-weight:700;
}
.table tbody tr:hover{background:var(--nieve)}
.table__vacio{text-align:center;color:var(--ceniza);padding:48px 18px}

.note{
  font-size:var(--t-s);color:var(--ceniza);background:var(--nieve);
  border-left:3px solid var(--hielo);padding:16px 20px;margin-top:22px;
}
.note strong{color:var(--roca)}

/* --- Código de descuento --- */
.codigo__fila{display:flex;gap:10px;align-items:stretch}
.codigo__fila input{flex:1;min-width:0}
.codigo__fila .btn{flex:none;white-space:nowrap;padding-inline:20px}

/* En móvil hay una regla general que pone todos los botones al 100%.
   Dentro de esta fila eso dejaba el campo del código en 30px de ancho:
   se escribía a ciegas. Por debajo de 640px se apilan. */
@media (max-width:640px){
  .codigo__fila{flex-direction:column}
  .codigo__fila input{flex:none}
  .codigo__fila .btn{width:100%}
}

.codigo__aviso{margin:8px 0 0;font-size:var(--t-s);line-height:1.5}
.codigo__aviso--ok{color:var(--hielo-hondo);font-weight:700}
.codigo__aviso--aviso{color:var(--accion)}

/* La línea del descuento en el resumen, para que se lea como un resta. */
.summary-box dd[data-resumen="descuento"]{color:var(--hielo-hondo);font-weight:700}
/* La nota de categorías no es letra pequeña: lleva la regla de la edad
   y la habilitación, que son norma. Se lee al tamaño del texto normal
   y admite subtítulos y párrafos. */
.note--texto{font-size:var(--t-m)}
.note--texto p{margin:0 0 10px}
.note--texto > *:last-child{margin-bottom:0}
.note--texto .bloque-sub{margin:16px 0 6px}

/* ============================ LISTAS Y TARJETAS ============================ */
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:11px;font-size:var(--t-m)}
.checklist li{padding-left:24px;position:relative}
.checklist li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:9px;height:1px;background:var(--hielo-hondo);
}

.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(265px,100%),1fr));gap:26px}
.card{
  background:var(--nieve-pura);border:1px solid var(--linea);border-radius:var(--radio);
  padding:28px;transition:border-color .2s,box-shadow .2s;
}
.card:hover{border-color:var(--hielo);box-shadow:var(--sombra)}
.card h3{font-size:var(--t-l);margin-bottom:.55em}
.card p{color:var(--ceniza);font-size:var(--t-m)}
.card a{
  font-family:var(--f-display);font-size:var(--t-s);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--hielo-hondo);
}
.card a:hover{color:var(--accion)}
.section--alt .card{background:var(--nieve-pura)}

/* ============================ GALERÍA Y AUSPICIANTES ============================ */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:10px}
.gallery img,.gallery .ph{width:100%;aspect-ratio:4/3;object-fit:cover;min-height:0}
/* Láminas con texto —el kit del corredor, por ejemplo—: recortarlas
   se comía la mitad del cartel. Se ven enteras, quepan como quepan. */
.gallery--completa{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.gallery--completa img{aspect-ratio:3/4;object-fit:contain;background:var(--nieve)}
.sponsors{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:14px;align-items:center}
.sponsors img,.sponsors .ph{height:84px;min-height:0;object-fit:contain}

/* Subtítulos dentro de un bloque de Descubre */
.bloque-sub{
  font-family:var(--f-display);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--hielo-hondo);
  margin:26px 0 8px;
}
.cols > div > p{margin:0 0 12px}
.cols > div > p.lead{margin-bottom:16px}

/* --- Documento: el reglamento, y cualquier texto largo por artículos ---
   Diecinueve apartados en la rejilla de tarjetas salen en tres columnas
   de alturas dispares y no hay por dónde empezar a leer. Una sola
   columna, ancho cómodo de lectura y un filete entre artículos. */
.documento{max-width:72ch;margin:0 auto}
.documento__indice{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  gap:7px 24px;margin:0 0 34px;padding:20px 0;
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
}
.documento__indice a{font-size:var(--t-m);color:var(--ceniza)}
.documento__indice a:hover{color:var(--hielo-hondo)}
/* El encabezado es fijo: sin esto, saltar a un artículo lo deja debajo. */
.documento__art[id]{scroll-margin-top:100px}
.documento__art{padding:26px 0;border-top:1px solid var(--linea)}
.documento__art:first-child{border-top:0;padding-top:0}
.documento__art > h3{
  font-family:var(--f-display);font-size:var(--t-l);font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;color:var(--roca);margin:0 0 14px;
}
.documento__art > p{color:var(--ceniza);margin:0 0 12px}
.documento__art > *:last-child{margin-bottom:0}
.documento__art .bloque-sub{margin:22px 0 8px}

/* Una lista detrás de un párrafo necesita aire; la que abre el bloque, no.
   Vale igual dentro de una tarjeta y dentro del documento. */
.documento__art .checklist,.cols > div > .checklist{margin:0}
.documento__art p + .checklist,.cols > div > p + .checklist{margin-top:14px}
.documento__art .checklist + p,.cols > div > .checklist + p{margin-top:14px}

/* --- Horario del día, junto al punto de encuentro --- */
.horario{margin-top:22px;padding-top:20px;border-top:1px solid var(--linea)}
.horario__titulo{
  font-family:var(--f-display);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ceniza);margin:0 0 12px;
}
.horario__lista{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--linea)}
.horario__lista li{
  display:flex;align-items:baseline;gap:14px;
  background:var(--nieve-pura);padding:9px 2px;
}
.horario__hora{
  font-family:var(--f-display);font-size:var(--t-m);font-weight:700;
  color:var(--accion);letter-spacing:.03em;flex:none;min-width:58px;
}
.horario__que{font-size:var(--t-s);color:var(--roca)}
.horario__nota{
  font-size:var(--t-s);color:var(--ceniza);margin:14px 0 0;
  padding-left:12px;border-left:2px solid var(--hielo);
}

/* --- Aviso de sección todavía vacía --- */
.aviso-vacio{
  border:1px solid var(--linea);background:var(--nieve);
  padding:36px 30px;text-align:center;color:var(--ceniza);
}
.aviso-vacio strong{color:var(--roca)}
.aviso-vacio p{margin:0}
.aviso-vacio p + p{margin-top:8px;font-size:var(--t-s)}

/* ============================ FRANJA DE LLAMADA ============================ */
.cta-band{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--roca);color:var(--nieve);
  padding:clamp(56px,8vw,96px) 0;
}
.cta-band .container{position:relative;z-index:3;max-width:760px;text-align:center}
.cta-band h2{margin-bottom:.4em}
.cta-band p{color:var(--hielo);font-family:var(--f-display);letter-spacing:.16em;text-transform:uppercase;font-size:var(--t-s);margin-bottom:32px}

/* ============================ PREGUNTAS FRECUENTES ============================ */
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;
  font-family:var(--f-display);font-size:var(--t-l);font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:12px;height:2px;
  background:var(--hielo-hondo);transform:translateY(-50%);
}
.faq summary::before{
  content:"";position:absolute;right:11px;top:50%;width:2px;height:12px;
  background:var(--hielo-hondo);transform:translateY(-50%);transition:transform .2s;
}
.faq details[open] summary::before{transform:translateY(-50%) scaleY(0)}
.faq details p{color:var(--ceniza);padding-bottom:20px;margin:0;max-width:70ch}

/* ============================ FORMULARIOS ============================ */
.form{display:grid;gap:22px;max-width:840px}
.form__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:20px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{
  font-family:var(--f-display);font-size:var(--t-xs);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ceniza);
}
.field input,.field select,.field textarea{
  font-family:var(--f-texto);font-size:var(--t-m);
  padding:13px 15px;border:1px solid var(--linea);border-radius:var(--radio);
  background:var(--nieve-pura);color:var(--roca);
  transition:border-color .16s;
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ceniza-clara)}
.field--check{flex-direction:row;align-items:flex-start;gap:11px;padding:5px 0}
/* flex:none y medida fija: dentro de una fila flexible el navegador
   estruja la casilla hasta dejarla en 7 px de ancho. */
.field--check input{
  flex:none;width:20px;height:20px;margin-top:1px;
  accent-color:var(--hielo-hondo);cursor:pointer;
}
.field--check label{cursor:pointer}
.field--check label{text-transform:none;letter-spacing:0;font-family:var(--f-texto);font-size:var(--t-m);color:var(--roca)}
.field--check a{color:var(--hielo-hondo);text-decoration:underline;text-underline-offset:2px}
.fieldset{border:1px solid var(--linea);padding:28px;margin:0;background:var(--nieve-pura)}
.fieldset legend{
  font-family:var(--f-display);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--roca);
  padding-inline:10px;
}

/* --- Precios, nada más entrar --------------------------------
   Es la primera pregunta de cualquiera que abre la página, así
   que va pegada al hero y antes de los pasos.                */
.precios-banda{background:var(--roca-2);color:var(--nieve);padding:26px 0}
.precios-banda__titulo{
  font-family:var(--f-display);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--hielo);
  margin:0 0 16px;
}
.precios-banda__lista{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
  gap:1px;background:var(--roca-3);border:1px solid var(--roca-3);
}
.precio{
  background:var(--roca-2);padding:16px 18px;
  display:flex;flex-direction:column;gap:2px;
}
.precio__carrera{
  font-family:var(--f-display);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ceniza-clara);
}
.precio__valor{
  font-family:var(--f-display);font-size:clamp(1.5rem,4.5vw,1.9rem);font-weight:700;
  line-height:1.1;color:var(--accion-claro);letter-spacing:.02em;
}
.precio__grupo{font-size:var(--t-s);color:var(--ceniza-clara);margin-top:4px}
.precio__grupo strong{color:var(--nieve);font-weight:600}

@media (max-width:560px){
  .precios-banda{padding:20px 0}
  .precio{padding:13px 15px}
}

/* --- Guía de tallas -------------------------------------------
   El dibujo a un lado y la tabla al otro. «M (A 52 - B 71)» no se
   entiende sin ver dónde se miden esos centímetros.            */
.guia{
  display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);
  gap:22px;align-items:start;
  border:1px solid var(--linea);background:var(--nieve);
  padding:20px 22px;margin-top:18px;
}
.guia__dibujo img{width:100%;height:auto;display:block}
.guia__titulo{
  font-family:var(--f-display);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ceniza);margin:0 0 12px;
}
.guia__leyenda{
  display:flex;flex-direction:column;gap:6px;margin:0 0 14px;
  font-size:var(--t-s);color:var(--roca);
}
.guia__marca{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;margin-right:8px;border-radius:50%;
  font-family:var(--f-display);font-size:.72rem;font-weight:700;color:#fff;
}
.guia__marca--a{background:var(--hielo-hondo)}
.guia__marca--b{background:var(--accion)}

.guia__tabla{width:100%;border-collapse:collapse;font-size:var(--t-s)}
.guia__tabla th,.guia__tabla td{
  padding:8px 10px;text-align:left;border-bottom:1px solid var(--linea);
}
.guia__tabla thead th{
  font-family:var(--f-display);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ceniza);
  border-bottom-width:2px;white-space:nowrap;
}
.guia__tabla tbody th{
  font-family:var(--f-display);font-weight:700;color:var(--roca);white-space:nowrap;
}
.guia__tabla tbody td{font-variant-numeric:tabular-nums;color:var(--ceniza)}
.guia__tabla tbody tr:last-child th,
.guia__tabla tbody tr:last-child td{border-bottom:0}

/* La talla elegida en el desplegable se marca en la tabla: así se
   comprueba de un vistazo que se eligió la que se quería. */
.guia__tabla tbody tr.es-elegida{background:var(--nieve-pura)}
.guia__tabla tbody tr.es-elegida th{color:var(--hielo-hondo)}
.guia__tabla tbody tr.es-elegida td{color:var(--roca);font-weight:600}

.guia .note{margin:12px 0 0}

@media (max-width:560px){
  .guia{grid-template-columns:1fr;gap:16px;padding:16px}
  .guia__dibujo{max-width:170px;margin:0 auto}
}

/* --- Cuenta bancaria: el numero grande, porque es lo que se copia --- */
.cuenta{
  border:1px solid var(--linea);border-left:3px solid var(--hielo-hondo);
  background:var(--nieve);padding:20px 22px;margin-bottom:22px;
}
.cuenta__titulo{
  font-family:var(--f-display);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ceniza);margin:0 0 12px;
}
.cuenta__numero{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 16px;
}
.cuenta__numero span{
  font-family:var(--f-display);font-size:clamp(1.35rem,4vw,1.75rem);font-weight:700;
  letter-spacing:.08em;color:var(--roca);
}
.cuenta__datos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
  gap:12px 26px;margin:0;font-size:var(--t-s);
}
.cuenta__datos dt{
  font-family:var(--f-display);font-size:var(--t-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ceniza-clara);margin-bottom:2px;
}
.cuenta__datos dd{margin:0;color:var(--roca);overflow-wrap:anywhere}

/* --- Comprobante de pago --- */
.field--archivo input[type="file"]{
  padding:11px 13px;background:var(--nieve);cursor:pointer;
}
.field--archivo input[type="file"]::file-selector-button{
  font-family:var(--f-display);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  margin-right:14px;padding:9px 16px;border:0;border-radius:var(--radio);
  background:var(--roca);color:var(--nieve);cursor:pointer;
}
.field--archivo .note{margin:0}

/* --- Declaracion de responsabilidad --- */
.declaracion{
  border:1px solid var(--linea);background:var(--nieve);
  padding:22px;margin-bottom:20px;max-height:290px;overflow-y:auto;
}
.declaracion__titulo{
  font-family:var(--f-display);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ceniza);margin:0 0 14px;
}
.declaracion__texto p{font-size:var(--t-s);line-height:1.7;margin:0 0 12px}
.declaracion__texto p:last-child{margin-bottom:0}

/* --- Rueda de fecha de nacimiento -------------------------------
   Tres columnas que se desplazan y encajan en el centro. El alto de
   cada opcion (40 px) tambien esta en main.js: si se cambia aqui,
   hay que cambiarlo alli.                                          */
.field--fecha{gap:10px}
.rueda{
  position:relative;display:grid;grid-template-columns:1fr 1.6fr 1.2fr;
  height:200px;border:1px solid var(--linea);border-radius:var(--radio);
  background:var(--nieve-pura);overflow:hidden;
  /* Los extremos se desvanecen: deja claro que hay mas para deslizar */
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
}
.rueda__banda{
  position:absolute;left:0;right:0;top:50%;height:40px;margin-top:-20px;
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  background:rgba(0,184,204,.07);pointer-events:none;z-index:1;
}
.rueda__col{
  height:200px;padding-block:80px;overflow-y:auto;overscroll-behavior:contain;
  scroll-snap-type:y mandatory;touch-action:pan-y;
  scrollbar-width:none;-ms-overflow-style:none;text-align:center;
}
.rueda__col::-webkit-scrollbar{display:none}
.rueda__col:focus-visible{outline:2px solid var(--hielo-hondo);outline-offset:-2px}
.rueda__op{
  height:40px;line-height:40px;scroll-snap-align:center;cursor:pointer;
  font-family:var(--f-display);font-size:var(--t-m);font-weight:700;
  letter-spacing:.04em;color:var(--ceniza-clara);
  transition:color .14s,transform .14s;user-select:none;
}
.rueda__op.es-elegida{color:var(--roca);transform:scale(1.06)}
.rueda__col--mes .rueda__op{text-transform:capitalize}
.rueda__pie{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.rueda__leyenda{font-size:var(--t-s);color:var(--ceniza)}
.rueda__leyenda.es-elegida{color:var(--roca);font-weight:600}
.rueda__alterna{
  font-family:var(--f-display);font-size:var(--t-xs);letter-spacing:.12em;
  text-transform:uppercase;background:none;border:0;padding:8px 0;cursor:pointer;
  color:var(--hielo-hondo);text-decoration:underline;text-underline-offset:3px;
}

/* --- Categoria calculada a partir de la fecha --- */
.categoria-auto{
  border:1px solid var(--linea);border-left:3px solid var(--ceniza-clara);
  background:var(--nieve);padding:16px 18px;margin:18px 0 22px;font-size:var(--t-s);
}
.categoria-auto p{margin:0}
.categoria-auto p + p{margin-top:6px}
.categoria-auto--espera{color:var(--ceniza)}
.categoria-auto--ok{border-left-color:var(--hielo-hondo)}
.categoria-auto--aviso{border-left-color:var(--accion);background:#FFF6F2}
.categoria-auto--mal{border-left-color:var(--accion);background:#FFF6F2;color:var(--accion)}
.categoria-auto__nombre{
  font-family:var(--f-display);font-size:var(--t-l);letter-spacing:.03em;color:var(--roca);
}
.categoria-auto__nombre span{font-family:var(--f-texto);font-size:var(--t-s);color:var(--ceniza);font-weight:400}
.categoria-auto__nota{color:var(--accion);font-size:var(--t-xs)}

/* --- Campos con error --- */
.field--error input,.field--error select,.field--error textarea,
.field--error .rueda{border-color:var(--accion);background:#FFFBFA}
.field--error > label{color:var(--accion)}
.field--error input:focus-visible,.field--error select:focus-visible,.field--error textarea:focus-visible{
  outline:2px solid var(--accion);outline-offset:1px;
}
.field__error{font-size:var(--t-s);color:var(--accion);margin:0;font-weight:600}

/* --- Resumen de lo que falta, arriba del formulario --- */
.form__aviso{
  border:1px solid var(--accion);border-left:3px solid var(--accion);
  background:#FFF6F2;padding:18px 20px;color:var(--roca);
}
.form__aviso strong{
  display:block;font-family:var(--f-display);font-size:var(--t-m);
  letter-spacing:.03em;color:var(--accion);margin-bottom:10px;
}
.form__aviso ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:var(--t-s)}
.form__aviso li{padding-left:16px;position:relative}
.form__aviso li::before{content:'·';position:absolute;left:4px;color:var(--accion);font-weight:700}
.form__aviso button{
  background:none;border:0;padding:0;cursor:pointer;font:inherit;font-weight:700;
  color:var(--hielo-hondo);text-decoration:underline;text-underline-offset:2px;
}

.summary-box{
  background:var(--roca);color:var(--nieve);padding:30px;position:sticky;top:110px;
  border-top:3px solid var(--accion);
}
.summary-box h3{font-size:var(--t-l);margin-bottom:20px}
.summary-box dl{display:grid;grid-template-columns:1fr auto;gap:12px 18px;margin:0 0 22px;font-size:var(--t-s)}
.summary-box dt{color:var(--ceniza-clara)}
.summary-box dd{margin:0;text-align:right;font-family:var(--f-display);font-weight:700;letter-spacing:.04em}
.summary-box__total{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--f-display);font-size:var(--t-l);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  border-top:1px solid var(--roca-3);padding-top:16px;color:var(--accion-claro);
}
.summary-box .price__note{color:var(--ceniza-clara);margin-top:14px}
.summary-box a{color:var(--hielo)}
.layout-2col{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:44px;align-items:start}

/* ============================ PIE ============================ */
.site-footer{background:var(--roca);color:var(--nieve);padding:clamp(48px,6vw,72px) 0 96px;font-size:var(--t-s)}
.site-footer h4{color:var(--hielo);margin-bottom:1.2em}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.site-footer a{color:rgba(241,244,246,.75)}
.site-footer a:hover{color:var(--accion-claro)}
.site-footer .ph{background:rgba(255,255,255,.05);color:rgba(241,244,246,.3)}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:38px;margin-bottom:48px}
.footer-social{margin-top:20px}
.footer-bottom{
  border-top:1px solid var(--roca-3);padding-top:24px;
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  font-size:var(--t-xs);color:var(--ceniza-clara);
}
/* Acceso discreto al panel: sin él no hay forma de llegar desde una
   vista previa sin barra de direcciones. */

/* ============================ WHATSAPP ============================ */
/* Sin gap en el flex: con el texto colapsado el hueco seguía contando
   y el círculo salía como un óvalo de 69x58. Lo que se anima es el
   margen del texto, así que en reposo es un círculo exacto. */
.wa-flotante{
  position:fixed;right:20px;bottom:20px;z-index:70;
  display:inline-flex;align-items:center;justify-content:center;gap:0;
  width:56px;height:56px;padding:0;
  background:#25D366;color:#fff;border-radius:999px;
  box-shadow:0 6px 18px rgba(12,22,23,.30);
  transition:background-color .18s,box-shadow .18s,transform .18s,width .25s,padding .25s;
}
.wa-flotante:hover{background:#1FBE5C;box-shadow:0 10px 24px rgba(12,22,23,.38);transform:translateY(-2px)}
.wa-flotante .icono{width:28px;height:28px;flex:none}
.wa-flotante__texto{
  max-width:0;margin-left:0;overflow:hidden;white-space:nowrap;opacity:0;
  font-family:var(--f-display);font-size:var(--t-s);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  transition:max-width .25s,margin-left .25s,opacity .18s;
}
.wa-flotante:hover,.wa-flotante:focus-visible{width:auto;padding:0 22px 0 14px}
.wa-flotante:hover .wa-flotante__texto,.wa-flotante:focus-visible .wa-flotante__texto{
  max-width:260px;margin-left:10px;opacity:1;
}
.btn--wa{background:#25D366;color:#fff}
.btn--wa:hover{background:#1FBE5C}
.redes--contacto{margin-top:22px}

/* ============================ AJUSTES DE CAJA ============================ */
.layout-2col > *,.form,.form__row,.field,.cols > *,.race-grid > *{min-width:0}
.fieldset{min-width:0}
.field input,.field select,.field textarea{min-width:0;max-width:100%}

/* Safari en iOS amplía la página al enfocar un campo cuya letra mide
   menos de 16 px, y como el viewport no fija maximum-scale, se queda
   ampliada: a partir de ahí el formulario sí se mueve de lado. Era la
   queja de «en el móvil se va para los lados». 16 px exactos lo evitan
   sin tocar el aspecto en escritorio. */
@media (max-width:767px){
  .field input,.field select,.field textarea{font-size:16px}
}
.nav__item--cta{display:none}
.field[hidden]{display:none}
.icono{display:block;flex:none}

/* ============================ RESPONSIVE ============================ */

/* El menú de escritorio necesita ~1040px para no partirse en dos filas,
   así que el panel lateral entra antes de que eso ocurra. */
@media (max-width:1080px){
  .nav-toggle{display:inline-flex;margin-left:auto}
  .header-cta{display:none}

  .nav-fondo{display:block;position:fixed;inset:0;background:rgba(13,20,28,.6);z-index:55}
  .nav-fondo[hidden]{display:none}

  .nav{
    position:fixed;top:0;right:0;bottom:0;left:auto;margin:0;
    width:min(370px,86vw);background:var(--roca);color:var(--nieve);z-index:60;
    display:flex;flex-direction:column;overflow-y:auto;
    transform:translateX(100%);transition:transform .26s ease;
    box-shadow:-10px 0 34px rgba(13,20,28,.4);
  }
  .nav.is-open{transform:none}

  .nav__head{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:22px 24px;border-bottom:1px solid var(--roca-3);
    font-family:var(--f-display);font-weight:700;text-transform:uppercase;
    letter-spacing:.16em;font-size:var(--t-s);color:var(--hielo);
  }
  .nav__cerrar{background:none;border:0;cursor:pointer;color:var(--nieve);padding:4px;display:flex}

  .nav__list{flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 0}
  .nav__item{display:grid;grid-template-columns:1fr auto;align-items:center;border-bottom:1px solid var(--roca-3)}
  .nav__link{padding:16px 0;font-size:var(--t-l)}
  .nav__link::after{display:none}
  .nav__mas{
    display:flex;align-items:center;justify-content:center;
    width:42px;height:42px;background:none;border:0;cursor:pointer;
    color:var(--ceniza-clara);transition:transform .2s;
  }
  .nav__item.is-open .nav__mas{transform:rotate(180deg);color:var(--hielo)}

  .nav__sub{
    grid-column:1/-1;position:static;display:none;border:0;box-shadow:none;
    padding:0 0 14px 14px;min-width:0;background:transparent;
  }
  .nav__item.is-open .nav__sub{display:block}
  .nav__item:hover .nav__sub,.nav__item:focus-within .nav__sub{display:none}
  .nav__item.is-open:hover .nav__sub,.nav__item.is-open:focus-within .nav__sub{display:block}
  .nav__sub a{padding:10px 14px;font-size:var(--t-s);color:rgba(241,244,246,.72);border-left:1px solid var(--roca-3)}
  .nav__sub a:hover{background:transparent;color:var(--hielo);border-left-color:var(--hielo)}

  .nav__item--cta{display:block;border:0;margin:24px 0 0}
  .nav__extra{
    display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
    margin-top:auto;padding:24px;border-top:1px solid var(--roca-3);
  }
  .nav__idiomas{display:flex;gap:14px;font-size:var(--t-s);text-transform:uppercase;letter-spacing:.14em}

  body.menu-abierto{overflow:hidden}

  .site-header .container{position:relative}
  .layout-2col{grid-template-columns:1fr}
  .summary-box{position:static}
}

@media (max-width:640px){
  /* Las etiquetas pequeñas suben de 11,5 a 12,5 px: por debajo de 12
     cuesta leerlas en pantalla de teléfono. */
  :root{--t-xs:.78rem}

  .container{padding-inline:18px}
  .topbar .container{flex-wrap:wrap;gap:6px 14px;padding-block:9px}
  /* Fecha, redes e idiomas ya están dentro del menú lateral, donde hay
     sitio para pulsarlos. En la barra superior sólo estorbaban. */
  .topbar__social,.topbar__fecha,.topbar__right{display:none}

  /* Objetivo táctil de 44 px en los controles principales */
  .nav-toggle{min-height:44px;padding:0 14px}
  .nav__idiomas .idioma{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:48px;min-height:44px;border:1px solid var(--roca-3);border-radius:var(--radio);
  }
  .hero{min-height:auto}
  .hero__inner{padding-bottom:44px;padding-top:64px}
  .hero__logo{width:min(230px,68vw)}
  .countdown{gap:18px;margin-top:32px}
  .countdown__item{min-width:62px}
  .stats-bar .container{grid-template-columns:repeat(2,1fr)}
  .stat{padding:20px 18px}
  .gallery,.sponsors{grid-template-columns:repeat(2,1fr)}
  .form__row{grid-template-columns:1fr}
  .fieldset{padding:20px}
  .footer-bottom{flex-direction:column;gap:12px}
  .btn{width:100%}
  /* En móvil no hay hover: círculo fijo, sin expansión */
  .wa-flotante{right:16px;bottom:16px;width:54px;height:54px}
  .wa-flotante:hover,.wa-flotante:focus-visible{width:54px;padding:0}
  .wa-flotante__texto{display:none}
  .nav-toggle__texto{display:none}
  .faq summary{font-size:var(--t-m)}
}

@media (max-width:380px){
  .data-grid,.stats-bar .container{grid-template-columns:1fr}
  .gallery,.sponsors{grid-template-columns:1fr}
  .brand__date{display:none}
  .site-header .aval__sello{height:20px}
  .site-header .aval,
  .site-header .aval__enlace{margin-left:-8px}
  .brand .ph{width:44px;height:36px}
}