/* ============================================================
   Circuito Internacional de Zuera — hoja de estilo única
   Paleta: asfalto / carbono / rojo / hueso
   Tipos:  Archivo (display, ancho 125) · IBM Plex Sans (texto)
           IBM Plex Mono (datos y etiquetas)

   El sistema es el mismo que el de kartingzuera.com: mismas variables,
   mismos botones, mismo piano rojo/blanco. Lo que cambia son los bloques
   propios de esta web: carrusel de portada, calendario, noticias, tarifas,
   galerías e historia.
   ============================================================ */

:root{
  --asfalto:#0A0A0B;
  --carbono:#141417;
  --carbono-alto:#1C1C21;
  --rojo:#E10600;
  --rojo-hondo:#7A0300;
  --hueso:#F2F0ED;
  --humo:#8E8E95;

  --linea:rgba(242,240,237,.12);
  --linea-fuerte:rgba(242,240,237,.22);

  --display:'Archivo', system-ui, sans-serif;
  --texto:'IBM Plex Sans', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;

  --hdr-h:72px;
  --pad:clamp(1.25rem, 5vw, 4rem);
  --gap:clamp(1rem, 2.4vw, 1.75rem);
  --radio:6px;
  --seccion:clamp(4rem, 9vw, 7rem);
  --ancho:1320px;
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--hdr-h) + 12px);
}

body{
  margin:0;
  background:var(--asfalto);
  color:var(--hueso);
  font-family:var(--texto);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* Un hijo de grid o de flex no baja de su min-content salvo que se le diga.
   Sin esto, un titular en Archivo 125 o un email largo ensanchan su columna y
   sacan la pagina entera del viewport en movil. */
.split > *,.fgrid > *,.form > *,.legal > *,.info > *,.tiles > *,
.noticias > *,.cal > *,.entrada > *{min-width:0}

h1,h2,h3,.hero__lema{
  font-family:var(--display);
  font-variation-settings:'wdth' 125,'wght' 800;
  line-height:.94;
  letter-spacing:-.015em;
  text-transform:uppercase;
  margin:0;
}

:focus-visible{
  outline:2px solid var(--rojo);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--rojo);color:#fff;padding:.75rem 1rem;
  font-family:var(--mono);font-size:.8rem;
}
.skip:focus{left:0}

/* Solo para lectores de pantalla. No usa left:-9999px como .skip a proposito:
   asi no ensancha nada y tools/chequea.py no lo cuenta como desbordado. */
.solo-lectores{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}

/* ---------- piano rojo/blanco (vibrador) ---------- */
.curb{
  height:8px;
  background-image:repeating-linear-gradient(
    115deg,
    var(--rojo) 0 22px,
    var(--hueso) 22px 44px
  );
}

/* ---------- botones ---------- */
.btn{
  --btn-bg:transparent;
  --btn-fg:var(--hueso);
  --btn-bd:var(--linea-fuerte);
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  border-radius:var(--radio);
  padding:.85rem 1.4rem;
  font-family:var(--display);
  font-variation-settings:'wdth' 112,'wght' 700;
  font-size:.8rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .12s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

.btn--primary{--btn-bg:var(--rojo);--btn-fg:#fff;--btn-bd:var(--rojo)}
.btn--primary:hover{--btn-bg:#ff1a0d;--btn-bd:#ff1a0d}

.btn--ghost:hover{--btn-bd:var(--hueso);--btn-bg:rgba(242,240,237,.06)}

.btn--sm{padding:.6rem 1rem;font-size:.72rem}
.btn--lg{padding:1.05rem 1.9rem;font-size:.88rem}
.btn--block{display:flex;width:100%}

.ico{width:1.05em;height:1.05em;fill:currentColor;flex:none}

/* El cronometraje en directo es lo único que late: se marca con un punto vivo */
.btn--live::before{
  content:'';width:7px;height:7px;border-radius:50%;
  background:var(--rojo);flex:none;
  box-shadow:0 0 0 0 rgba(225,6,0,.7);
  animation:latido 2s ease-out infinite;
}
.btn--live:hover::before{background:#fff;box-shadow:none;animation:none}
@keyframes latido{
  70%{box-shadow:0 0 0 7px rgba(225,6,0,0)}
  100%{box-shadow:0 0 0 0 rgba(225,6,0,0)}
}

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:100;
  height:var(--hdr-h);
  border-bottom:1px solid transparent;
  transition:background .25s ease,border-color .25s ease,backdrop-filter .25s ease;
}
.hdr.is-stuck{
  background:rgba(10,10,11,.82);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--linea);
}
.hdr__in{
  height:100%;
  max-width:var(--ancho);margin:0 auto;
  padding:0 var(--pad);
  display:flex;align-items:center;gap:1.5rem;
}
.hdr__logo{flex:none;display:flex}
/* El logo es un rotulo apaisado de 760x128: cada pixel de alto le cuesta casi
   seis de ancho, asi que lo que lo limita es el hueco de al lado, no la barra.
   Hasta 1180px el limite es el viewport contra la hamburguesa, y eso se sigue
   mejor con un ancho fluido que a escalones: crece solo hasta toparse con los
   321px del tope, que son 54px de alto en una barra de 72. Los 7rem que se
   restan cubren la hamburguesa, el padding y la barra de scroll clasica, que
   en Windows entra dentro de 100vw. */
.hdr__logo img{width:min(321px,calc(100vw - 7rem));height:auto}

.nav{display:none}
.hdr__cta{display:none}

.burger{
  margin-left:auto;
  width:42px;height:42px;
  display:grid;place-content:center;gap:6px;
  background:none;border:0;padding:0;cursor:pointer;
}
.burger span{
  display:block;width:22px;height:2px;background:var(--hueso);
  transition:transform .22s ease,opacity .22s ease;
}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* ---------- menú móvil ---------- */
.menu{
  position:fixed;inset:var(--hdr-h) 0 0 0;z-index:99;
  background:var(--asfalto);
  padding:2rem var(--pad) calc(2rem + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;justify-content:space-between;gap:2rem;
  overflow-y:auto;
}
.menu[hidden]{display:none}
.menu__nav{display:flex;flex-direction:column;gap:.25rem}
.menu__nav > a{
  font-family:var(--display);
  font-variation-settings:'wdth' 112,'wght' 700;
  font-size:clamp(1.45rem,6.5vw,2.1rem);
  line-height:1.15;
  text-transform:uppercase;
  text-decoration:none;
  padding:.35rem 0;
  border-bottom:1px solid var(--linea);
}
.menu__nav > a:last-child{border-bottom:0}
.menu__cta{display:grid;gap:.6rem}

body.is-locked{overflow:hidden}
/* Con el menú abierto la cabecera deja de ser transparente */
body.is-locked .hdr{background:var(--asfalto);border-bottom-color:var(--linea)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;isolation:isolate;background:#000}
.hero::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(10,10,11,.85) 0%,rgba(10,10,11,.25) 45%,rgba(10,10,11,.95) 100%),
    radial-gradient(120% 80% at 15% 60%,rgba(10,10,11,.7),transparent 70%);
}
.hero__in{
  max-width:var(--ancho);margin:0 auto;
  padding:calc(var(--hdr-h) + clamp(3.5rem,14vh,7rem)) var(--pad) clamp(3rem,9vh,5rem);
}

/* ---------- carrusel de portada ----------
   Cuatro fotos que se relevan solas. Sin controles: no hay nada que elegir,
   es un fondo. */
.slides{position:absolute;inset:0;z-index:-2;overflow:hidden}
.slides img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  opacity:0;
  animation:pase 32s linear infinite;
}
.slides img:nth-child(1){animation-delay:0s}
.slides img:nth-child(2){animation-delay:8s}
.slides img:nth-child(3){animation-delay:16s}
.slides img:nth-child(4){animation-delay:24s}
@keyframes pase{
  0%{opacity:0}
  3%{opacity:.62}
  25%{opacity:.62}
  28%{opacity:0}
  100%{opacity:0}
}

/* semáforo de salida */
.lights{display:flex;gap:.55rem;margin-bottom:1.75rem}
.lights span{
  width:clamp(13px,3.2vw,18px);
  aspect-ratio:1;
  border-radius:50%;
  background:#241012;
  border:1px solid rgba(242,240,237,.16);
  animation:
    lightOn .16s ease calc(var(--i) * .19s) forwards,
    lightOut .5s ease 1.55s forwards;
}
@keyframes lightOn{
  to{background:var(--rojo);border-color:#ff4133;box-shadow:0 0 14px rgba(225,6,0,.85),0 0 34px rgba(225,6,0,.35)}
}
@keyframes lightOut{
  to{background:#241012;border-color:rgba(242,240,237,.16);box-shadow:none}
}

.hero__lema{
  /* La frase es mas larga que el nombre que habia: un punto mas pequena. */
  font-size:clamp(2.2rem,9vw,6rem);
  max-width:13ch;
  margin-bottom:1.25rem;
}
.hero__lema em{
  font-style:normal;
  color:var(--rojo);
  display:block;
}
.hero__p{
  max-width:48ch;margin:0 0 1.75rem;
  color:rgba(242,240,237,.82);
  font-size:clamp(1rem,2.4vw,1.15rem);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem}
.hero__cta .btn{flex:1 1 auto;min-width:min(100%,15rem)}

/* franja de datos */
.facts{
  list-style:none;margin:0;
  padding:1.5rem var(--pad);
  max-width:var(--ancho);margin-inline:auto;
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1.25rem 1rem;
}
.facts li{display:flex;flex-direction:column;gap:.15rem}
.facts b{
  font-family:var(--display);
  font-variation-settings:'wdth' 120,'wght' 700;
  font-size:clamp(1.15rem,4.5vw,1.6rem);
  line-height:1;
  letter-spacing:-.01em;
}
.facts span{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--humo);
}

/* ============================================================
   CABECERA DE PÁGINA INTERIOR
   ============================================================ */
.phero{
  position:relative;isolation:isolate;
  background:
    radial-gradient(90% 120% at 12% 0%,rgba(225,6,0,.16),transparent 62%),
    var(--carbono);
  border-bottom:1px solid var(--linea);
}
.phero__in{
  max-width:var(--ancho);margin:0 auto;
  padding:calc(var(--hdr-h) + clamp(2.75rem,8vw,4.5rem)) var(--pad) clamp(2.75rem,7vw,4rem);
}
.phero h1{
  font-size:clamp(2.2rem,8vw,5rem);
  margin-bottom:1.25rem;
}
.phero__p{
  max-width:56ch;
  color:rgba(242,240,237,.78);
  font-size:clamp(1rem,2.4vw,1.12rem);
  margin:0;
}
.phero__in .btn{margin-top:1.75rem}

/* Variante con foto de fondo, para las páginas que la tenían en el WordPress */
.phero--foto{background:#000}
.phero--foto .phero__bg{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
  opacity:.5;
}
.phero--foto::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(10,10,11,.8) 0%,rgba(10,10,11,.45) 50%,rgba(10,10,11,.92) 100%),
    radial-gradient(110% 90% at 12% 50%,rgba(10,10,11,.72),transparent 72%);
}

/* ============================================================
   SECCIONES
   ============================================================ */
.section{
  max-width:var(--ancho);margin:0 auto;
  padding:var(--seccion) var(--pad);
}
.section--alt{
  max-width:none;
  background:var(--carbono);
  border-block:1px solid var(--linea);
}
.section--alt > *{max-width:calc(var(--ancho) - var(--pad) * 2);margin-inline:auto}

.shead{margin-bottom:clamp(2.25rem,5vw,3.5rem)}
.shead h2{
  font-size:clamp(1.9rem,6.5vw,4rem);
  margin-bottom:1rem;
}
.shead__p{
  max-width:62ch;
  color:var(--humo);
  margin:0;
  font-size:clamp(.98rem,2.4vw,1.08rem);
}
.shead__p + .shead__p{margin-top:1rem}
/* Para titulares que son una frase entera y no dos palabras */
.shead--frase h2{font-size:clamp(1.6rem,4.2vw,2.5rem);line-height:1.04}
/* Cabecera con un enlace a la derecha del titular */
.shead--fila{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:flex-end;justify-content:space-between}
.shead--fila h2{margin-bottom:0}

.eyebrow{
  font-family:var(--mono);
  font-variation-settings:normal;font-weight:400;line-height:1.6;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--humo);
  margin:0 0 1rem;
  display:flex;align-items:center;gap:.7rem;
}
.eyebrow::before{
  content:'';width:26px;height:2px;background:var(--rojo);flex:none;
}
.eyebrow--red{color:var(--rojo)}

/* ---------- listas de datos ---------- */
.specs{margin:0;font-family:var(--mono);font-size:.82rem}
.specs > div{
  display:flex;align-items:baseline;gap:.5rem;
  padding:.55rem 0;
  border-bottom:1px solid var(--linea);
}
.specs > div:last-child{border-bottom:0}
.specs dt{color:var(--humo);flex:none}
.specs dd{
  margin:0 0 0 auto;text-align:right;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}
.specs dd a{text-decoration:none;border-bottom:1px solid var(--linea-fuerte)}
.specs dd a:hover{color:var(--rojo);border-color:var(--rojo)}
.specs--wide{font-size:.86rem;margin:1.75rem 0 2rem}

.note{
  margin:2.5rem 0 0;
  font-size:.95rem;
  color:var(--humo);
}
.note a{color:var(--hueso);text-decoration:none;border-bottom:1px solid var(--rojo)}
.note a:hover{color:var(--rojo)}

.ticks{
  list-style:none;margin:0;padding:0;
  display:grid;gap:.6rem;align-content:start;
  font-size:.95rem;
}
.ticks li{
  position:relative;padding-left:1.4rem;
  color:rgba(242,240,237,.86);
}
.ticks li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:9px;height:2px;background:var(--rojo);
}

/* ============================================================
   BLOQUE PARTIDO (imagen + texto)
   ============================================================ */
.split{display:grid;gap:0;background:var(--carbono);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
.section--alt .split{background:var(--asfalto)}
.split + .split{margin-top:var(--gap)}
.split__media{background:#000}
.split__media img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.split__body{padding:clamp(1.75rem,5vw,3.25rem);display:flex;flex-direction:column;align-items:flex-start}
.split__body h2,
.split__body h3{font-size:clamp(1.45rem,5.2vw,2.6rem);margin-bottom:1.1rem}
.split__p{max-width:52ch;color:rgba(242,240,237,.78);margin:0 0 1.25rem}
.split__p:last-child{margin-bottom:0}
.split__body .specs--wide{width:100%}
/* Los planos del trazado son ilustraciones sobre negro: no se recortan y el
   fondo de la caja tiene que ser el mismo negro para que no se vea el borde */
.split--plano .split__media{background:#000;display:flex;align-items:center}
.split--plano .split__media img{aspect-ratio:auto;object-fit:contain;padding:clamp(1rem,3vw,2rem)}

/* ============================================================
   BANNER DE PASO
   ============================================================ */
.banner{
  display:flex;align-items:center;gap:1.5rem;
  padding:clamp(1.6rem,4.5vw,2.75rem);
  background:var(--carbono);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  text-decoration:none;
  transition:background .2s ease;
}
.section--alt .banner{background:var(--asfalto)}
.banner:hover{background:var(--carbono-alto)}
.banner h2{font-size:clamp(1.6rem,5vw,2.6rem);margin-bottom:.75rem}
.banner__p{margin:0;color:var(--humo);max-width:56ch}
.banner__go{margin-left:auto;flex:none;font-size:1.75rem;color:var(--rojo);transition:transform .2s ease}
.banner:hover .banner__go{transform:translateX(5px)}

/* ---------- llamada final de página ---------- */
.cierre{
  background:
    radial-gradient(80% 130% at 85% 10%,rgba(225,6,0,.22),transparent 62%),
    var(--carbono-alto);
  border:1px solid var(--linea-fuerte);
  border-radius:var(--radio);
  padding:clamp(1.9rem,5.5vw,3.5rem);
  display:flex;flex-direction:column;align-items:flex-start;
}
.cierre h2{font-size:clamp(1.7rem,5.5vw,2.9rem);margin-bottom:1rem}
.cierre p{margin:0 0 1.75rem;color:rgba(242,240,237,.82);max-width:58ch}

/* Par de botones uno junto a otro dentro de un bloque de texto */
.acciones{display:flex;flex-wrap:wrap;gap:.6rem}

/* ============================================================
   MOSAICO DE ACCESOS
   ============================================================ */
.tiles{display:grid;gap:var(--gap)}
.tile{
  position:relative;isolation:isolate;
  display:flex;align-items:flex-end;
  min-height:clamp(17rem,50vw,22rem);
  border-radius:var(--radio);
  overflow:hidden;
  text-decoration:none;
  border:1px solid var(--linea);
  background:var(--carbono);
}
.tile img{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s ease;
}
.tile::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,10,11,.1) 18%,rgba(10,10,11,.58) 55%,rgba(10,10,11,.96) 100%);
}
.tile:hover img{transform:scale(1.05)}
.tile__txt{padding:1.5rem;width:100%}
.tile__txt h2,
.tile__txt h3{font-size:clamp(1.25rem,3.4vw,1.55rem);margin-bottom:.5rem}
.tile__txt p{margin:0 0 1rem;color:rgba(242,240,237,.78);font-size:.95rem;max-width:34ch}
.tile__go{
  font-family:var(--mono);
  font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--rojo);
  display:inline-flex;align-items:center;gap:.45rem;
}
.tile__go::after{content:'→';transition:transform .2s ease}
.tile:hover .tile__go::after{transform:translateX(4px)}
/* Sin foto detrás: el degradado sobraría */
.tile--liso{min-height:0;align-items:stretch}
.tile--liso::after{display:none}
.tile--liso .tile__txt{padding:clamp(1.5rem,4vw,2.25rem)}

/* ============================================================
   NOTICIAS
   ============================================================ */
.noticias{display:grid;gap:var(--gap)}
.noticia{
  display:flex;flex-direction:column;
  background:var(--carbono);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  overflow:hidden;
  text-decoration:none;
  transition:border-color .2s ease,transform .2s ease;
}
.section--alt .noticia{background:var(--asfalto)}
.noticia:hover{border-color:var(--linea-fuerte);transform:translateY(-3px)}
.noticia__img{aspect-ratio:16/10;overflow:hidden;background:#000;flex:none}
.noticia__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.noticia:hover .noticia__img img{transform:scale(1.04)}
.noticia__body{padding:1.4rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.noticia__fecha{
  margin:0;
  font-family:var(--mono);font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--humo);
}
.noticia h2,
.noticia h3{font-size:1.2rem;line-height:1.05}
/* El resumen sale del extracto de WordPress y su largo varía mucho: se corta a
   cinco lineas para que las tarjetas de una fila no bailen. */
.noticia__p{
  margin:0;font-size:.92rem;color:var(--humo);flex:1;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;
  overflow:hidden;
}
.noticia__go{
  font-family:var(--mono);font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--rojo);
}
.noticia__go::after{content:' →'}

/* ---------- una noticia por dentro ---------- */
.entrada{display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:start}
.entrada__doc{max-width:72ch;font-size:1.02rem;color:rgba(242,240,237,.84)}
.entrada__doc p{margin:0 0 1.1rem}
.entrada__doc a{color:var(--hueso);text-decoration:none;border-bottom:1px solid var(--rojo);overflow-wrap:anywhere}
.entrada__doc a:hover{color:var(--rojo)}
.entrada__doc strong{color:var(--hueso)}
.entrada__cartel{
  margin:0;border:1px solid var(--linea);border-radius:var(--radio);
  overflow:hidden;background:var(--carbono);
}
.entrada__cartel img{width:100%}
.entrada__pie{
  display:flex;flex-wrap:wrap;gap:.75rem;
  margin-top:clamp(2rem,5vw,3rem);
  padding-top:1.5rem;border-top:1px solid var(--linea);
}

/* ============================================================
   CALENDARIO
   ============================================================ */
.proximos{display:grid;gap:.6rem;margin:0;padding:0;list-style:none}
.proximo{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;
  padding:1rem 1.15rem;
  background:var(--carbono);
  border:1px solid var(--linea);
  border-left:3px solid var(--rojo);
  border-radius:0 var(--radio) var(--radio) 0;
  text-decoration:none;
}
.section--alt .proximo{background:var(--asfalto)}
a.proximo:hover{background:var(--carbono-alto);border-color:var(--linea-fuerte);border-left-color:var(--rojo)}
/* En movil la fecha larga ("18–22 de febrero de 2026") no cabe junto al titulo:
   ocupa su propia linea y solo a partir de 640 px vuelve a la columna fija. */
.proximo__f{
  font-family:var(--mono);font-size:.74rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--rojo);
  flex:1 1 100%;min-width:0;
}
.proximo__t{
  font-family:var(--display);
  font-variation-settings:'wdth' 112,'wght' 700;
  font-size:1.05rem;text-transform:uppercase;line-height:1.15;
}
.proximo__go{margin-left:auto;color:var(--rojo);font-family:var(--mono);font-size:.72rem}

/* El calendario ensena un mes cada vez, pero solo cuando hay JS para cambiarlo:
   sin el se quedan los sesenta a la vista, en vertical, y el mando sobra. */
.cal{display:grid;gap:var(--gap)}
.cal__mando{display:none}
.js .cal__mando{
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;
  justify-content:space-between;
}
.js .cal .mes{display:none}
.js .cal .mes.es-actual{display:block}

.cal__temporadas{display:flex}
.cal__sel{
  font-family:var(--mono);font-weight:500;
  font-size:.78rem;letter-spacing:.12em;
  color:var(--hueso);background-color:var(--carbono);
  border:1px solid var(--linea);border-radius:var(--radio);
  padding:.65rem 2.4rem .65rem .9rem;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  /* La flecha va en el fondo porque appearance:none se lleva la del sistema */
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23F2F0ED' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .9rem center;
  background-size:.7rem;
  transition:border-color .2s ease;
}
.cal__sel:hover{border-color:var(--linea-fuerte)}
.section--alt .cal__sel{background-color:var(--asfalto)}
/* El desplegable lo pinta el sistema: sin esto sale texto claro sobre blanco */
.cal__sel option{background:var(--carbono);color:var(--hueso)}
.cal__pasos{display:flex;gap:.4rem}
.cal__paso{
  width:2.75rem;height:2.75rem;
  display:grid;place-content:center;
  font-size:1.35rem;line-height:1;
  color:var(--hueso);background:none;
  border:1px solid var(--linea);border-radius:var(--radio);
  cursor:pointer;
  transition:color .2s ease,border-color .2s ease;
}
.cal__paso:hover:not(:disabled){color:var(--rojo);border-color:var(--rojo)}
.cal__paso:disabled{opacity:.3;cursor:default}
.mes{
  background:var(--carbono);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:clamp(1.25rem,3vw,1.85rem);
}
.section--alt .mes{background:var(--asfalto)}
.mes__h{
  margin:0 0 1.25rem;
  font-family:var(--display);
  font-variation-settings:'wdth' 118,'wght' 700;
  font-size:clamp(1.15rem,3.5vw,1.6rem);
  text-transform:uppercase;letter-spacing:-.01em;
}
/* Rejilla y lista se reparten el ancho en cuanto hay sitio; el min-width:0 de
   arriba del archivo es lo que evita que un titulo largo saque la columna. */
.mes__cuerpo{display:grid;gap:1.5rem}
.mes__rej{
  display:grid;grid-template-columns:repeat(7,1fr);gap:4px;
  max-width:23rem;
}
.mes__dn{
  font-family:var(--mono);font-size:.66rem;
  text-align:center;color:var(--humo);
  padding-bottom:.3rem;letter-spacing:.04em;
}
.mes__d{
  aspect-ratio:1;
  display:grid;place-content:center;
  font-family:var(--mono);font-size:.82rem;
  border-radius:3px;
  color:rgba(242,240,237,.7);
  font-variant-numeric:tabular-nums;
}
.mes__vacio{
  margin:0;align-self:center;
  font-family:var(--mono);font-size:.8rem;color:var(--humo);
}
.mes__d--fuera{opacity:.22}
.mes__d--ev{background:var(--rojo);color:#fff;font-weight:600}
.mes__lista{margin:0;padding:0;list-style:none;display:grid;gap:.5rem}
.mes__lista li{
  display:flex;gap:.6rem;align-items:baseline;
  font-size:.85rem;line-height:1.35;
  padding-top:.5rem;border-top:1px solid var(--linea);
}
.mes__lista li:first-child{border-top:0;padding-top:0}
.mes__lista b{
  font-family:var(--mono);font-weight:500;font-size:.72rem;
  color:var(--rojo);flex:none;min-width:3.6rem;
  font-variant-numeric:tabular-nums;
}
.mes__lista a{text-decoration:none;border-bottom:1px solid var(--linea-fuerte)}
.mes__lista a:hover{color:var(--rojo);border-color:var(--rojo)}

/* ============================================================
   TARIFAS Y HORARIOS
   ============================================================ */
.tarifas{
  margin:0;
  background:var(--carbono);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:clamp(1.25rem,3.5vw,2rem);
}
.section--alt .tarifas{background:var(--asfalto)}
.tarifas > div{
  display:flex;align-items:baseline;gap:1rem;
  padding:.85rem 0;
  border-bottom:1px solid var(--linea);
}
.tarifas > div:last-child{border-bottom:0}
.tarifas dt{font-size:.98rem;color:rgba(242,240,237,.86)}
.tarifas dd{
  margin:0 0 0 auto;flex:none;
  font-family:var(--display);
  font-variation-settings:'wdth' 118,'wght' 700;
  font-size:1.5rem;line-height:1;color:var(--rojo);
  font-variant-numeric:tabular-nums;
}
.tarifas__pie{
  margin:1.25rem 0 0;
  font-family:var(--mono);font-size:.72rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--humo);
}

/* rueda de tandas de la pista */
.tandas{
  list-style:none;margin:0;padding:0;
  display:grid;gap:2px;
  font-family:var(--mono);font-size:.8rem;
}
.tandas li{
  display:flex;align-items:center;gap:.9rem;
  padding:.6rem .9rem;
  background:var(--carbono);
  border-left:2px solid var(--linea-fuerte);
}
.section--alt .tandas li{background:var(--asfalto)}
.tandas b{flex:none;min-width:7.5rem;font-weight:500;font-variant-numeric:tabular-nums}
.tandas span{
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--humo);
}
.tandas li[data-que="karts"]{border-left-color:var(--rojo)}
.tandas li[data-que="karts"] span{color:var(--rojo)}
.tandas li[data-que="pausa"]{background:transparent;border-left-color:var(--linea)}
.tandas li[data-que="pausa"] b{color:var(--humo)}

/* ============================================================
   TARJETAS DE INFORMACIÓN
   ============================================================ */
.info{display:grid;gap:var(--gap)}
.info__card{
  background:var(--carbono);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:1.6rem 1.4rem;
  display:flex;flex-direction:column;gap:1.1rem;align-items:flex-start;
}
.section--alt .info__card{background:var(--asfalto)}
.info__card h2,
.info__card h3{font-size:1.25rem}
.info__p{margin:0;font-size:.92rem;color:var(--humo)}
.info__addr{margin:0;font-family:var(--mono);font-size:.9rem;line-height:1.7;font-style:normal}
.info__card .specs,
.info__card .ticks{width:100%}

/* ============================================================
   GALERÍA
   ============================================================ */
.galeria{
  display:grid;gap:.5rem;
  grid-template-columns:repeat(2,1fr);
}
.galeria img{
  width:100%;height:100%;
  aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--radio);
  background:#000;
}
.galeria--ancha img{aspect-ratio:16/10}

.aerial{margin:0;border-radius:var(--radio);overflow:hidden;border:1px solid var(--linea);background:var(--carbono)}
.aerial img{width:100%}
.aerial figcaption{
  padding:.85rem 1.25rem;
  font-family:var(--mono);font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--humo);
  border-top:1px solid var(--linea);
}

/* ============================================================
   HISTORIA
   ============================================================ */
.temporadas{display:grid;gap:clamp(2.5rem,6vw,4.5rem)}
.temporada{
  display:grid;gap:1.5rem;
  border-top:2px solid var(--rojo);
  padding-top:1.5rem;
}
.temporada__ano{
  margin:0;
  font-family:var(--display);
  font-variation-settings:'wdth' 125,'wght' 800;
  font-size:clamp(2.75rem,10vw,4.5rem);
  line-height:.85;color:var(--rojo);
  letter-spacing:-.02em;
}
.temporada h2{font-size:clamp(1.15rem,3vw,1.55rem);line-height:1.1;margin-bottom:1.1rem}
.temporada p{margin:0 0 1rem;color:rgba(242,240,237,.8);font-size:.98rem}
.temporada p:last-of-type{margin-bottom:0}
.temporada .galeria{margin-top:1.5rem}

/* ============================================================
   PREGUNTAS FRECUENTES
   ============================================================ */
.faq{border-top:1px solid var(--linea)}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{
  list-style:none;cursor:pointer;
  padding:1.15rem 2.5rem 1.15rem 0;
  position:relative;
  font-family:var(--display);
  font-variation-settings:'wdth' 110,'wght' 600;
  font-size:clamp(1rem,2.6vw,1.2rem);
  transition:color .18s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--rojo)}
.faq summary::after{
  content:'';position:absolute;right:.35rem;top:50%;
  width:12px;height:2px;background:var(--rojo);
  transition:transform .22s ease;
}
.faq summary::before{
  content:'';position:absolute;right:.35rem;top:50%;
  width:12px;height:2px;background:var(--rojo);
  transform:rotate(90deg);
  transition:opacity .22s ease;
}
.faq details[open] summary::before{opacity:0}
.faq details p{
  margin:0;padding:0 2.5rem 1.4rem 0;
  color:var(--humo);max-width:70ch;
}

/* ============================================================
   FOOTER
   ============================================================ */
.ftr{background:var(--carbono)}
.ftr__in{
  max-width:var(--ancho);margin:0 auto;
  padding:clamp(2.75rem,7vw,4.5rem) var(--pad) 2rem;
  display:grid;gap:2.5rem;
}
/* Aqui se manda por ancho, no por alto: en el pie la columna es estrecha y con
   una altura fija el max-width acabaria deformando el rotulo */
.ftr__brand img{width:min(321px,100%);height:auto;margin-bottom:1rem}
.ftr__brand p{margin:0;font-family:var(--mono);font-size:.8rem;line-height:1.8;color:var(--humo)}
.ftr__brand p a{color:inherit;text-decoration:none;border-bottom:1px solid var(--linea-fuerte)}
.ftr__brand p a:hover{color:var(--rojo);border-color:var(--rojo)}

.ftr__datos{
  margin:1.25rem 0 0;
  font-family:var(--mono);font-size:.78rem;
  display:grid;gap:.5rem;
}
/* Apiladas en movil: el email es largo y envolvia dejando las etiquetas sueltas. */
.ftr__datos div{display:flex;flex-direction:column;gap:.1rem}
@media (min-width:600px){
  .ftr__datos div{flex-direction:row;gap:.5rem}
}
.ftr__datos dt{color:var(--humo);min-width:5.5rem}
.ftr__datos dd{margin:0;color:rgba(242,240,237,.85)}
.ftr__datos a{color:inherit;text-decoration:none;border-bottom:1px solid var(--linea-fuerte)}
.ftr__datos a:hover{color:var(--rojo);border-color:var(--rojo)}

.ftr__nav{display:flex;flex-direction:column;gap:.6rem}
.ftr__nav a{
  text-decoration:none;font-size:.95rem;color:rgba(242,240,237,.8);width:fit-content;
}
.ftr__nav a:hover{color:var(--rojo)}
.ftr__t{
  margin:0 0 1rem;
  font-family:var(--mono);font-variation-settings:normal;font-weight:600;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--humo);
}

.ftr__aside{display:flex;flex-direction:column;gap:1.5rem;align-items:flex-start}
.ftr__social{display:flex;gap:.6rem}
.ftr__social a{
  width:42px;height:42px;
  display:grid;place-content:center;
  border:1px solid var(--linea);
  border-radius:var(--radio);
  transition:border-color .2s ease,background .2s ease;
}
.ftr__social a:hover{border-color:var(--rojo);background:var(--rojo)}
.ftr__social svg{width:18px;height:18px;fill:currentColor}

.ftr__legal{
  max-width:var(--ancho);margin:0 auto;
  padding:1.5rem var(--pad) calc(6rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--linea);
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;
  font-family:var(--mono);font-size:.72rem;color:var(--humo);
}
.ftr__legal p{margin:0}
.ftr__legal nav{display:flex;flex-wrap:wrap;gap:1.25rem}
.ftr__legal a{text-decoration:none}
.ftr__legal a:hover{color:var(--hueso)}

/* ============================================================
   BOTÓN FLOTANTE (WhatsApp)
   ============================================================ */
.fab{
  position:fixed;z-index:90;
  right:var(--pad);
  bottom:calc(1rem + env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.85rem 1.15rem;
  background:var(--rojo);color:#fff;
  border-radius:100px;
  text-decoration:none;
  font-family:var(--display);
  font-variation-settings:'wdth' 110,'wght' 700;
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 10px 30px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08) inset;
  transition:transform .2s ease,background .2s ease;
}
.fab:hover{background:#ff1a0d;transform:translateY(-2px)}
.fab svg{width:20px;height:20px;fill:currentColor;flex:none}

/* ============================================================
   FORMULARIO
   ============================================================ */
.fgrid{display:grid;gap:var(--gap)}

.form{
  display:grid;gap:1rem;
  background:var(--carbono);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:clamp(1.4rem,4vw,2.25rem);
}
.section--alt .form{background:var(--asfalto)}
.honey{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.field{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.field label,
.check span{
  font-family:var(--mono);font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--humo);
}
.field__opt{text-transform:none;letter-spacing:0;opacity:.7}
.field input,
.field textarea{
  width:100%;
  background:var(--asfalto);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:.8rem .9rem;
  color:var(--hueso);
  font-family:var(--texto);font-size:.95rem;
  transition:border-color .18s ease,background .18s ease;
}
.section--alt .field input,
.section--alt .field textarea{background:var(--carbono)}
.field textarea{resize:vertical;min-height:8rem;line-height:1.6}
.field input:hover,
.field textarea:hover{border-color:var(--linea-fuerte)}
.field input:focus,
.field textarea:focus{outline:none;border-color:var(--rojo);background:var(--carbono-alto)}

/* El selector de archivo del navegador no se puede maquillar: se maquilla el
   botón. max-width porque su ancho intrínseco es enorme y arrastra al grid. */
.field input[type="file"]{
  padding:.55rem .6rem;max-width:100%;
  font-family:var(--mono);font-size:.78rem;
}
.field input[type="file"]::file-selector-button{
  margin-right:.8rem;
  background:var(--carbono-alto);color:var(--hueso);
  border:1px solid var(--linea-fuerte);border-radius:4px;
  padding:.45rem .8rem;
  font-family:var(--display);
  font-variation-settings:'wdth' 110,'wght' 700;
  font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;
}
.field input[type="file"]:hover::file-selector-button{border-color:var(--rojo);color:var(--rojo)}

.check{display:flex;align-items:flex-start;gap:.65rem;cursor:pointer}
.check input{
  flex:none;width:1.05rem;height:1.05rem;margin-top:.1rem;
  accent-color:var(--rojo);
}
.check span{text-transform:none;letter-spacing:0;font-family:var(--texto);font-size:.85rem;line-height:1.5}

.form__aviso{
  display:none;
  margin:0;
  padding:.85rem 1rem;
  border:1px solid var(--linea-fuerte);
  border-left:3px solid var(--hueso);
  border-radius:var(--radio);
  background:rgba(242,240,237,.06);
  font-size:.9rem;
}
.form__aviso--mal{border-left-color:var(--rojo);background:rgba(225,6,0,.1)}
.form__aviso:target{display:block}

.form__legal{
  margin:-.4rem 0 0;
  font-size:.78rem;color:var(--humo);
}
.form__legal a{color:var(--hueso)}
.form__legal a:hover{color:var(--rojo)}

.fnote{
  background:var(--carbono);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:clamp(1.4rem,4vw,2rem);
  display:flex;flex-direction:column;gap:1rem;align-items:flex-start;
  align-self:start;
}
.section--alt .fnote{background:var(--asfalto)}
.fnote h2,
.fnote h3{font-size:1.35rem}
.fnote .btn--block{margin-top:auto}
.fnote .btn--block + .btn--block{margin-top:0}

/* ============================================================
   LEGAL
   Documento largo: aqui manda la lectura, no el impacto. Los titulares
   bajan de Archivo 125 a Mono, que a este tamano se lee sin cansar.
   ============================================================ */
.legal{display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:start}

.legal__idx{
  display:flex;flex-wrap:wrap;gap:.5rem;
  font-family:var(--mono);font-size:.76rem;
}
.legal__idx a{
  text-decoration:none;color:var(--humo);
  border:1px solid var(--linea);border-radius:100px;
  padding:.4rem .8rem;
  /* Las etiquetas de la politica de cookies son frases enteras: sin esto la
     pastilla se estira mas alla del viewport en movil. */
  max-width:100%;
  transition:color .18s,border-color .18s;
}
.legal__idx a:hover{color:var(--hueso);border-color:var(--linea-fuerte)}

.legal__doc{max-width:76ch;color:rgba(242,240,237,.8);font-size:.98rem}
.legal__doc h2{
  font-family:var(--mono);
  font-variation-settings:normal;
  font-weight:600;
  font-size:.86rem;
  letter-spacing:.12em;
  line-height:1.4;
  color:var(--rojo);
  text-transform:uppercase;
  margin:3.25rem 0 1rem;
  padding-top:1.75rem;
  border-top:1px solid var(--linea);
}
.legal__doc > h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal__doc h3{
  font-family:var(--texto);
  font-variation-settings:normal;
  font-weight:600;
  font-size:1.02rem;
  letter-spacing:0;
  line-height:1.4;
  text-transform:none;
  color:var(--hueso);
  margin:2rem 0 .6rem;
}
.legal__doc p{margin:0 0 1rem}
.legal__doc a{overflow-wrap:anywhere}
.legal__doc a:hover{color:var(--rojo)}

.legal__lista{margin:0 0 1rem;padding-left:1.1rem}
.legal__lista li{margin-bottom:.7rem}
.legal__lista li::marker{color:var(--rojo)}

.legal__dir{
  font-family:var(--mono);font-style:normal;font-size:.82rem;
  line-height:1.8;
  background:var(--carbono);
  border-left:2px solid var(--rojo);
  border-radius:0 var(--radio) var(--radio) 0;
  padding:1rem 1.25rem;
  margin:0 0 1.25rem;
}

.legal__fecha{
  font-family:var(--mono);font-size:.78rem;color:var(--humo);
  border-top:1px solid var(--linea);
  padding-top:1.25rem;margin-top:2.5rem;
}

/* Tabla de cookies: en movil no cabe, asi que rueda dentro de su caja */
.tabla{
  overflow-x:auto;
  border:1px solid var(--linea);border-radius:var(--radio);
  margin:0 0 1.5rem;
}
.tabla table{border-collapse:collapse;width:100%;min-width:34rem;font-size:.82rem}
.tabla th,
.tabla td{
  text-align:left;padding:.7rem .9rem;
  border-bottom:1px solid var(--linea);
  vertical-align:top;
}
.tabla th{
  font-family:var(--mono);font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--humo);
  background:var(--carbono);white-space:nowrap;
}
.tabla tr:last-child td{border-bottom:0}

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

/* Archivo a wdth 125 es muy ancho: una palabra larga («tetracampeón»,
   «Instalaciones») no cabe entera en un movil pequeño y saca la caja del
   viewport. Por debajo de 420 px el eje de ancho baja a 105. */
@media (max-width:420px){
  h1,h2,h3,.hero__lema{font-variation-settings:'wdth' 105,'wght' 800}
}


@media (min-width:560px){
  .galeria{grid-template-columns:repeat(3,1fr)}
}

@media (min-width:640px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .noticias{grid-template-columns:repeat(2,1fr)}
  .facts{grid-template-columns:repeat(4,1fr)}
  /* Rejilla del mes a la izquierda, eventos del mes a la derecha. La rejilla
     lleva tope: las celdas son cuadradas y sin el se van a 100px de lado. */
  .mes__cuerpo{grid-template-columns:minmax(0,21rem) minmax(0,1fr);gap:2.5rem}
  .hero__cta .btn{flex:0 0 auto;min-width:0}
  .proximo__f{flex:none;min-width:11rem}
}

@media (min-width:900px){
  .info{grid-template-columns:repeat(3,1fr)}
  .noticias{grid-template-columns:repeat(3,1fr)}
  /* La lista lleva tope tambien: sin el, «25H ZUERA» se estira por 700px de
     tarjeta y la linea queda perdida. */
  .mes__cuerpo{grid-template-columns:minmax(0,23rem) minmax(0,34rem);gap:3rem;
    justify-content:start}
  .galeria{grid-template-columns:repeat(4,1fr)}

  .split{grid-template-columns:1fr 1fr;align-items:center}
  .split--vuelta .split__media{order:2}
  .split__media{height:100%}
  .split__media img{height:100%;aspect-ratio:auto;min-height:26rem}
  .split--plano .split__media img{min-height:0}

  .temporada{grid-template-columns:minmax(0,9rem) minmax(0,1fr);gap:2.5rem}

  .entrada{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
  .entrada__cartel{position:sticky;top:calc(var(--hdr-h) + 1.5rem)}

  .ftr__in{grid-template-columns:2fr 1fr 1fr auto;gap:3rem;align-items:start}
  .ftr__nav{gap:.75rem}
  .ftr__legal{padding-bottom:4.5rem}
}

@media (min-width:1100px){
  .tiles{grid-template-columns:repeat(3,1fr)}
  /* Cuatro etiquetas cortas: en tres columnas la ultima se queda sola */
  .tiles--cuatro{grid-template-columns:repeat(4,1fr)}
  .hero__lema{font-size:clamp(3.5rem,6.5vw,6rem)}
}

/* La navegación completa sólo cabe a partir de aquí */
@media (min-width:1180px){
  :root{--hdr-h:78px}

  .burger{display:none}
  .menu{display:none !important}

  .nav{
    display:flex;gap:1.5rem;
    margin:0 0 0 auto;padding:0;
    font-family:var(--texto);
    font-weight:600;
    font-size:.9rem;letter-spacing:.005em;
  }
  .nav > li{list-style:none}
  .nav a{text-decoration:none;color:rgba(242,240,237,.9);padding:.25rem 0;position:relative;white-space:nowrap;display:block}
  .nav > li > a::after{
    content:'';position:absolute;left:0;right:100%;bottom:-2px;height:2px;
    background:var(--rojo);transition:right .22s ease;
  }
  .nav a:hover{color:var(--hueso)}
  .nav > li > a:hover::after{right:0}
  .nav > li > a.is-active{color:var(--hueso)}
  .nav > li > a.is-active::after{right:0}

  .hdr__cta{display:flex;gap:.5rem;flex:none;margin-left:1.35rem}
  /* Con la nav desplegada vuelve a mandar el alto: medido, el techo es 58-60px
     de 1320px para arriba. 56 deja margen. */
  .hdr__logo img{width:auto;height:56px}
}

/* Entre 1180 y 1320 la barra va muy justa: se aprieta un poco */
@media (min-width:1180px) and (max-width:1319px){
  .nav{gap:1.1rem;font-size:.85rem}
  .hdr__in{gap:1rem}
  .hdr__cta{margin-left:.9rem}
  .hdr__cta .btn{padding:.55rem .7rem;font-size:.66rem}
  /* Justo aqui la barra va mas apretada que en ningun otro sitio: el techo
     medido a 1180px es 54px, asi que este tramo baja a 52. */
  .hdr__logo img{height:52px}
}

/* ============================================================
   PREFERENCIAS
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .lights span{background:#241012}
  /* Sin animación el carrusel se queda en negro: se fija la primera foto */
  .slides img{opacity:0}
  .slides img:first-child{opacity:.62}
}

@media print{
  .hdr,.menu,.fab,.slides,.phero__bg{display:none}
  body{background:#fff;color:#000}
}