/* =========================================================
   ExpoDeportes Xela 2026 — hoja de estilo
   Dirección: editorial deportivo. Tipografía grande, líneas
   finas, pocos recuadros. El amarillo es golpe, no relleno.
   Negro #030405 · Amarillo #FAD016 (medidos del logo)
   ========================================================= */

:root{
  --ink:#030405;
  --ink-2:#0B0B07;
  --superficie:#121209;
  --superficie-2:#1B1B11;
  --linea:#2A2A1E;
  --linea-suave:#1D1D14;
  --amarillo:#FAD016;
  --amarillo-alto:#FFDE45;
  --amarillo-bajo:#B99A06;
  --texto:#F6F3E7;
  --apagado:#8F8B79;
  --error:#FF7A5C;

  --papel:#FFFFFF;
  --papel-2:#F3F2EC;
  --tinta:#0A0A08;
  --tinta-apagada:#605D4D;
  --linea-clara:#DDDBD1;

  --fuente:"Inter","Helvetica Neue",Arial,sans-serif;

  --borde:20px;
  --ancho:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--ink);
  color:var(--texto);
  font-family:var(--fuente);
  font-size:16px;
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%}

.in{max-width:var(--ancho);margin:0 auto;padding-inline:var(--borde)}
.in-wide{max-width:1280px}

.sec{padding-block:84px}
.linea{border-top:1px solid var(--linea-suave)}

.saltar{
  position:absolute;
  left:-9999px;
  top:8px;
  z-index:200;
  background:var(--amarillo);
  color:var(--ink);
  padding:12px 20px;
  font-weight:700;
  text-decoration:none;
}
.saltar:focus{left:12px}

/* ---------- iconos ---------- */
.sprite{display:none}
.ic,.ic-mid{
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:none;
}
.ic{width:18px;height:18px}
.ic-mid{width:26px;height:26px;stroke-width:1.6}

/* ---------- tipografía base ---------- */
.eyebrow{
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.26em;
  font-size:12px;
  color:var(--amarillo);
  margin:0 0 16px;
}
.h2{
  font-style:italic;
  font-weight:900;
  text-transform:uppercase;
  font-size:clamp(32px,5.6vw,58px);
  line-height:.9;
  letter-spacing:-.035em;
  margin:0;
  text-wrap:balance;
}
.h2.chico{font-size:clamp(26px,3.8vw,38px)}
.lede{
  color:var(--apagado);
  font-size:17px;
  max-width:42ch;
  margin:18px 0 0;
}
.nota{
  margin:28px 0 0;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:12px;
  color:var(--apagado);
}

/* ---------- botones ---------- */
.btn-solido,
.btn-linea{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  font-style:italic;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:16px;
  padding:16px 30px;
  border-radius:2px;
  text-decoration:none;
  border:2px solid transparent;
  cursor:pointer;
  font-family:var(--fuente);
  transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease;
}
.btn-solido{background:var(--amarillo);color:var(--ink);border-color:var(--amarillo)}
.btn-solido:hover{background:var(--amarillo-alto);border-color:var(--amarillo-alto);transform:translateY(-2px)}
.btn-linea{background:none;color:var(--texto);border-color:var(--linea)}
.btn-linea:hover{border-color:var(--texto);transform:translateY(-2px)}
.btn-solido:active,.btn-linea:active{transform:translateY(0)}
.btn-solido:focus-visible,.btn-linea:focus-visible{outline:2px solid var(--amarillo);outline-offset:3px}
.btn-solido .ic,.btn-linea .ic{transition:transform .2s ease}
.btn-solido:hover .ic,.btn-linea:hover .ic{transform:translateX(4px)}
.btn-solido[disabled]{background:var(--amarillo-bajo);border-color:var(--amarillo-bajo);cursor:progress}
.ancho{width:100%}

/* =========================================================
   01 · HERO
   ========================================================= */
/* --foto la pone app.js solo si el archivo existe */
[data-foto]{--foto:none}

.hero{
  position:relative;
  background:
    linear-gradient(180deg,
      rgba(250,208,22,.22) 0%,
      rgba(3,4,5,0) 28%,
      rgba(3,4,5,.6) 74%,
      rgba(3,4,5,.97) 100%),
    url("assets/fondo-hero.png") center top / cover no-repeat,
    var(--ink);
}
.hero-in{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding-block:52px 64px;
}
.hero-logo{
  width:min(440px,74vw);
  height:auto;
  display:block;
  margin-bottom:34px;
}
.hero h1{
  margin:0;
  font-style:italic;
  font-weight:900;
  text-transform:uppercase;
  font-size:clamp(46px,9vw,104px);
  line-height:.84;
  letter-spacing:-.045em;
  color:var(--tinta);
}
.hero-meta{
  margin:26px 0 0;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:13px;
  color:var(--tinta);
  opacity:.78;
}
.hero-meta i{font-style:normal;opacity:.4;padding-inline:6px}
.hero-sub{
  margin:16px 0 0;
  max-width:34ch;
  font-size:17px;
  color:#2A2408;
  font-weight:500;
}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:34px}
.hero .btn-solido{background:var(--tinta);color:var(--amarillo);border-color:var(--tinta)}
.hero .btn-solido:hover{background:#000;border-color:#000;color:var(--amarillo-alto)}
.hero .btn-linea{color:var(--tinta);border-color:rgba(10,10,8,.32)}
.hero .btn-linea:hover{border-color:var(--tinta)}
.hero-proof{
  margin:34px 0 0;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:11.5px;
  color:var(--apagado);
  max-width:46ch;
}

/* barra de datos al pie del hero */
.hero-barra{border-top:1px solid var(--linea-suave);background:rgba(3,4,5,.55)}
.hero-barra .in{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  padding-block:0;
}
/* > div: solo las 4 celdas. Antes era "div" a secas y también le
   pegaba al contenedor .in, que perdía su margen lateral en celular. */
.hero-barra .in > div{
  padding:22px 24px;
  border-left:1px solid var(--linea-suave);
}
.hero-barra .in > div:first-child{border-left:0;padding-left:0}
.hero-barra b{
  display:block;
  font-style:italic;
  font-weight:800;
  font-size:17px;
  letter-spacing:-.01em;
  color:var(--texto);
}
.hero-barra span{
  display:block;
  margin-top:4px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:10.5px;
  color:var(--apagado);
}
#cdTexto{color:var(--amarillo);font-variant-numeric:tabular-nums}

/* =========================================================
   02 · MARCAS QUE SE SUMAN
   ========================================================= */
.sumando{padding-block:56px 48px;border-top:1px solid var(--linea-suave)}
.marquee{
  margin:30px 0 26px;
  overflow:hidden;
  border-block:1px solid var(--linea-suave);
  padding-block:16px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marquee-track{display:flex;width:max-content;animation:correr 58s linear infinite}
.marquee-set{
  white-space:nowrap;
  font-style:italic;
  font-weight:800;
  text-transform:uppercase;
  font-size:clamp(20px,3vw,30px);
  letter-spacing:-.02em;
  color:var(--texto);
}
.marquee-set i{font-style:normal;color:var(--amarillo);padding-inline:20px;font-weight:400}
@keyframes correr{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.sumando-pie{margin:0}
.sumando-pie a{
  color:var(--apagado);
  font-size:14px;
  text-decoration:underline;
  text-underline-offset:4px;
}
.sumando-pie a:hover{color:var(--amarillo)}

/* =========================================================
   BLOQUES CLAROS
   ========================================================= */
.claro{
  --ink:var(--papel);
  --ink-2:var(--papel-2);
  --superficie:var(--papel);
  --superficie-2:var(--papel-2);
  --linea:var(--linea-clara);
  --linea-suave:#E9E7DE;
  --texto:var(--tinta);
  --apagado:var(--tinta-apagada);

  background:var(--papel);
  color:var(--tinta);
}
.claro .eyebrow{
  color:var(--tinta);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.claro .eyebrow::before{content:"";width:24px;height:4px;background:var(--amarillo)}

/* =========================================================
   03 · EXPERIENCIA (lista editorial, sin tarjetas)
   ========================================================= */
.editorial{
  list-style:none;
  margin:44px 0 0;
  padding:0;
  border-top:1px solid var(--linea-clara);
}
.editorial li{
  display:grid;
  grid-template-columns:78px minmax(0,1fr) minmax(0,1.1fr);
  align-items:baseline;
  gap:24px;
  padding:26px 0;
  border-bottom:1px solid var(--linea-suave);
  transition:padding-left .25s ease;
}
.editorial li:hover{padding-left:12px}
.ed-n{
  font-style:italic;
  font-weight:900;
  font-size:15px;
  letter-spacing:.02em;
  color:var(--amarillo-bajo);
  font-variant-numeric:tabular-nums;
}
.editorial h3{
  margin:0;
  font-style:italic;
  font-weight:900;
  text-transform:uppercase;
  font-size:clamp(26px,4.4vw,44px);
  line-height:.95;
  letter-spacing:-.04em;
  color:var(--tinta);
}
.editorial p{margin:0;color:var(--tinta-apagada);font-size:16px}

/* =========================================================
   04 · ESTO VAS A VIVIR (franja amarilla)
   ========================================================= */
.amarillo{
  background:var(--amarillo);
  color:var(--tinta);
  padding-block:72px;
  border-block:1px solid var(--amarillo-bajo);
}
.amarillo .eyebrow{color:rgba(10,10,8,.55)}
.amarillo .h2{color:var(--tinta)}
.vivir{
  list-style:none;
  margin:40px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:0 40px;
}
.vivir li{
  display:flex;
  align-items:center;
  gap:16px;
  padding:20px 0;
  border-top:1px solid rgba(10,10,8,.22);
  font-style:italic;
  font-weight:900;
  text-transform:uppercase;
  font-size:clamp(22px,3.2vw,32px);
  letter-spacing:-.03em;
  line-height:1;
}
.vivir .ic-mid{stroke-width:1.5}

/* =========================================================
   05 · PONENTES (sin recuadro: foto + texto)
   ========================================================= */
.ponentes{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:32px;
  margin-top:44px;
}
.pon-foto{
  overflow:hidden;
  background:var(--superficie);
  aspect-ratio:3/4;
}
.ponente img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 18%;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.ponente:hover img{transform:scale(1.035)}
.ponente h3{
  margin:20px 0 4px;
  font-style:italic;
  font-weight:900;
  text-transform:uppercase;
  font-size:26px;
  line-height:1;
  letter-spacing:-.035em;
}
.pon-rol{
  margin:0 0 10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:11.5px;
  color:var(--amarillo);
}
.pon-tema{margin:0;color:var(--apagado);font-size:15.5px;line-height:1.45}

/* =========================================================
   06 · AGENDA
   ========================================================= */
.agenda{
  list-style:none;
  margin:40px 0 0;
  padding:0;
  border-top:1px solid var(--linea);
}
.agenda li{
  display:grid;
  grid-template-columns:104px 1fr;
  gap:24px;
  padding:22px 0;
  border-bottom:1px solid var(--linea-suave);
}
.ag-hora{
  font-style:italic;
  font-weight:900;
  font-size:22px;
  letter-spacing:-.02em;
  color:var(--amarillo);
  font-variant-numeric:tabular-nums;
}
.agenda h3{
  margin:0 0 3px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.01em;
  font-size:19px;
}
.agenda p{margin:0;color:var(--apagado);font-size:14.5px}
.ag-pendiente .ag-hora{color:var(--apagado);opacity:.6}

/* =========================================================
   07 · RESERVA
   ========================================================= */
.reserva-in{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}
.datos{
  margin:32px 0 0;
  display:grid;
  grid-template-columns:auto 1fr;
  border-top:1px solid var(--linea-clara);
}
.datos dt{
  padding:13px 26px 13px 0;
  border-bottom:1px solid #E9E7DE;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:11.5px;
  color:var(--tinta-apagada);
  white-space:nowrap;
}
.datos dd{
  margin:0;
  padding:13px 0;
  border-bottom:1px solid #E9E7DE;
  font-size:16px;
  font-weight:600;
}

/* el panel se queda oscuro sobre el blanco: es lo que jala el ojo */
.panel{
  background:var(--ink-2);
  color:#F6F3E7;
  padding:34px 30px 30px;
  border-top:4px solid var(--amarillo);
  box-shadow:0 28px 64px rgba(10,10,8,.3);
}
.claro .panel{
  --texto:#F6F3E7;
  --apagado:#8F8B79;
  --linea:#2A2A1E;
  background:#0B0B07;
}
.panel .field label{color:#8F8B79}

.field{display:block;margin-bottom:18px}
.field label{
  display:block;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:11.5px;
  margin-bottom:8px;
}
.field input{
  width:100%;
  background:#1B1B11;
  border:1px solid #2A2A1E;
  border-radius:2px;
  color:#F6F3E7;
  font-family:var(--fuente);
  font-size:16.5px;
  padding:14px;
  transition:border-color .15s ease,background .15s ease;
}
.field input::placeholder{color:#5C5949}
.field input:focus{
  outline:2px solid var(--amarillo);
  outline-offset:1px;
  border-color:var(--amarillo);
  background:#232217;
}
.field input[aria-invalid="true"]{border-color:var(--error)}
.err{display:none;color:var(--error);font-size:13.5px;margin-top:6px}
.err.on{display:block}
.fineprint{margin:14px 0 0;color:#8F8B79;font-size:13px;text-align:center;line-height:1.5}
.aviso{
  border:1px dashed var(--amarillo-bajo);
  padding:10px 14px;
  font-size:13px;
  color:var(--amarillo);
  background:rgba(250,208,22,.06);
  margin:0 0 20px;
}
.aviso b{font-weight:600}
.linkbtn{
  display:block;
  margin:16px auto 0;
  background:none;border:0;padding:0;
  color:#8F8B79;
  font-family:var(--fuente);
  font-size:14px;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.linkbtn:hover{color:var(--amarillo)}
.linkbtn:focus-visible{outline:2px solid var(--amarillo);outline-offset:3px}

/* entrada digital */
.ticket{background:var(--amarillo);color:var(--tinta);position:relative}
.tk-top{padding:24px 26px 20px}
.tk-label{
  margin:0 0 8px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.24em;
  font-size:11px;
  opacity:.6;
}
.tk-evento{
  margin:0;
  font-style:italic;
  font-weight:900;
  text-transform:uppercase;
  font-size:30px;
  line-height:.92;
  letter-spacing:-.04em;
}
.tk-corte{
  height:20px;
  background:
    radial-gradient(circle at 0 50%, #0B0B07 10px, rgba(0,0,0,0) 10.5px) left/50% 100% no-repeat,
    radial-gradient(circle at 100% 50%, #0B0B07 10px, rgba(0,0,0,0) 10.5px) right/50% 100% no-repeat,
    var(--amarillo);
  position:relative;
}
.tk-corte::after{
  content:"";
  position:absolute;
  left:16px;right:16px;top:50%;
  border-top:2px dashed rgba(10,10,8,.35);
}
.tk-body{padding:14px 26px 26px}
.tk-fila{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:9px 0;
  border-bottom:1px solid rgba(10,10,8,.16);
  font-size:15px;
}
.tk-fila span{
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:11px;
  opacity:.62;
}
.tk-fila b{font-weight:700;text-align:right}
.tk-clabel{
  margin:20px 0 4px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.24em;
  font-size:11px;
  opacity:.6;
}
.tk-codigo{
  margin:0;
  font-style:italic;
  font-weight:900;
  font-size:clamp(26px,5.6vw,34px);
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
  word-break:break-all;
}
#pantallaListo .btn-linea{margin-top:18px;color:#F6F3E7;border-color:#2A2A1E}
#pantallaListo .btn-linea:hover{border-color:#F6F3E7}

/* =========================================================
   09 · UBICACIÓN
   ========================================================= */
.lugar-in{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:32px;
  flex-wrap:wrap;
}

/* =========================================================
   10 · FAQ
   ========================================================= */
.faq{margin:36px 0 0;border-top:1px solid var(--linea)}
.faq details{border-bottom:1px solid var(--linea-suave)}
.faq summary{
  cursor:pointer;
  list-style:none;
  padding:18px 0;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.01em;
  font-size:17px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--amarillo);font-size:24px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq summary:focus-visible{outline:2px solid var(--amarillo);outline-offset:2px}
.faq p{margin:0 0 20px;color:var(--apagado);font-size:15.5px;max-width:60ch}

/* =========================================================
   11 · CIERRE
   ========================================================= */
.cierre{
  padding-block:100px;
  text-align:center;
  border-top:1px solid var(--linea-suave);
  background:
    radial-gradient(85% 130% at 50% 0%, rgba(250,208,22,.13) 0%, rgba(3,4,5,0) 62%),
    var(--ink);
}
.cierre h2{
  margin:0;
  font-style:italic;
  font-weight:900;
  text-transform:uppercase;
  font-size:clamp(42px,9vw,96px);
  line-height:.84;
  letter-spacing:-.045em;
}
.cierre-fecha{
  margin:20px 0 34px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.3em;
  font-size:13px;
  color:var(--amarillo);
}

footer{border-top:1px solid var(--linea-suave);color:var(--apagado);font-size:13px}
footer .in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding-block:26px 34px;
}
.foot-logo{height:30px;width:auto;opacity:.5;flex:none}

/* =========================================================
   VISOR
   ========================================================= */
.lb{cursor:zoom-in}
.lightbox[hidden]{display:none}
.lightbox{
  position:fixed;
  inset:0;
  z-index:120;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(3,4,5,.95);
  animation:fundido .18s ease-out;
}
.lightbox img{
  max-width:min(1000px,100%);
  max-height:92vh;
  width:auto;height:auto;
  display:block;
  box-shadow:0 30px 80px rgba(0,0,0,.7);
}
.lb-cerrar{
  position:absolute;
  top:16px;right:20px;
  width:46px;height:46px;
  border:0;border-radius:50%;
  background:var(--amarillo);
  color:#030405;
  font-size:30px;line-height:1;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.lb-cerrar:hover{background:var(--amarillo-alto)}
.lb-cerrar:focus-visible{outline:2px solid #F6F3E7;outline-offset:3px}
@keyframes fundido{from{opacity:0}to{opacity:1}}

/* =========================================================
   CTA FIJO DE MÓVIL
   Aparece al pasar el hero y se esconde cuando el formulario
   ya está en pantalla, para no tapar contenido.
   ========================================================= */
.sticky[hidden]{display:none}
.sticky{
  position:fixed;
  left:16px;right:16px;bottom:16px;
  z-index:90;
  display:none;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:var(--amarillo);
  color:var(--ink);
  font-style:italic;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:17px;
  padding:16px;
  border-radius:2px;
  text-decoration:none;
  box-shadow:0 12px 34px rgba(0,0,0,.6);
  animation:subir .3s ease-out;
}

/* =========================================================
   ANIMACIÓN
   ========================================================= */
.anim{animation:subir .7s cubic-bezier(.2,.7,.3,1) backwards}
[data-anim="1"]{animation-delay:.04s}
[data-anim="2"]{animation-delay:.14s}
[data-anim="3"]{animation-delay:.26s}
[data-anim="4"]{animation-delay:.36s}
[data-anim="5"]{animation-delay:.46s}
[data-anim="6"]{animation-delay:.58s}
@keyframes subir{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* solo se oculta si el JS corrió */
.js .reveal{opacity:0;transform:translateY(22px)}
.js .reveal.visible{
  opacity:1;
  transform:none;
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1);
}
.js .editorial .reveal.visible:nth-child(2),
.js .vivir .reveal.visible:nth-child(2),
.js .agenda .reveal.visible:nth-child(2),
.js .ponentes .reveal.visible:nth-child(2){transition-delay:.06s}
.js .editorial .reveal.visible:nth-child(3),
.js .vivir .reveal.visible:nth-child(3),
.js .agenda .reveal.visible:nth-child(3),
.js .ponentes .reveal.visible:nth-child(3){transition-delay:.12s}
.js .editorial .reveal.visible:nth-child(4),
.js .vivir .reveal.visible:nth-child(4),
.js .agenda .reveal.visible:nth-child(4){transition-delay:.18s}
.js .editorial .reveal.visible:nth-child(5),
.js .vivir .reveal.visible:nth-child(5),
.js .agenda .reveal.visible:nth-child(5){transition-delay:.24s}
.js .editorial .reveal.visible:nth-child(6),
.js .vivir .reveal.visible:nth-child(6){transition-delay:.3s}

/* =========================================================
   RESPONSIVE — primero el celular
   ========================================================= */
@media (max-width:920px){
  .sec{padding-block:60px}
  .reserva-in{grid-template-columns:1fr;gap:34px}
  .hero-barra .in{grid-template-columns:1fr 1fr}
  .hero-barra .in > div{border-left:0;border-top:1px solid var(--linea-suave);padding:20px 0}
  .hero-barra .in > div:nth-child(-n+2){border-top:0}
  .hero-barra .in > div:nth-child(even){padding-left:20px;border-left:1px solid var(--linea-suave)}
  .hero-barra .in > div:nth-child(odd){padding-right:14px}
  .editorial li{grid-template-columns:52px 1fr;gap:12px 18px}
  .editorial li p{grid-column:2}
  .lugar-in{align-items:flex-start}
  .lugar-btn{width:100%}
}
@media (max-width:640px){
  .sticky{display:flex}
  footer .in{padding-bottom:100px}
  .hero-in{padding-block:40px 52px}
  .hero-logo{margin-bottom:26px}
  .hero-cta{flex-direction:column;align-items:stretch;width:100%}
  .hero-cta .btn-solido,.hero-cta .btn-linea{width:100%}
  .cierre{padding-block:72px}
  .agenda li{grid-template-columns:72px 1fr;gap:16px}
  .panel{padding:26px 20px 24px}
  .ponentes{gap:26px}
}

/* =========================================================
   ACCESIBILIDAD
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
  .js .reveal{opacity:1;transform:none}
  .marquee-track{animation:none}
}

/* =========================================================
   REFINAMIENTO — segunda pasada
   ========================================================= */

/* --- el nombre del evento, visible desde el primer segundo --- */
.hero-marca{
  margin:0 0 14px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.34em;
  font-size:clamp(11px,1.6vw,13px);
  color:var(--tinta);
  opacity:.62;
}

/* --- prueba social en fila, no en párrafo --- */
.hero-proof{
  list-style:none;
  margin:36px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0;
  border-top:1px solid rgba(10,10,8,.18);
  max-width:760px;
  width:100%;
}
.hero-proof li{
  flex:1 1 33.333%;
  min-width:104px;
  padding:14px 8px 12px;
  border-bottom:1px solid rgba(10,10,8,.12);
  text-align:center;
}
.hero-proof b{
  display:block;
  font-style:italic;
  font-weight:900;
  font-size:clamp(17px,2.6vw,22px);
  letter-spacing:-.03em;
  color:var(--tinta);
  font-variant-numeric:tabular-nums;
}
.hero-proof li{
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:10px;
  color:rgba(10,10,8,.55);
}

/* --- marquee: se frena al pasar el mouse --- */
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{animation-play-state:paused}

/* --- ponentes: separación y nota --- */
.ponente h3{margin-top:22px}

/* --- agenda pendiente --- */
.ag-quien{margin:0;color:var(--apagado);font-size:14.5px}
.ag-pendiente .ag-hora{color:var(--apagado);opacity:.45}

/* --- acciones del ticket --- */
.tk-acciones{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.tk-acciones .btn-linea{
  width:100%;
  font-size:13px;
  padding:14px 12px;
  color:#F6F3E7;
  border-color:#2A2A1E;
  margin-top:0;
}
.tk-acciones .btn-linea:hover{border-color:#F6F3E7}
.tk-acciones .ic{width:16px;height:16px}

/* =========================================================
   RESPONSIVE — repaso de 768, 430 y 390
   ========================================================= */
@media (max-width:768px){
  .hero-proof{max-width:100%}
}
@media (max-width:430px){
  .hero-in{padding-block:34px 44px}
  .hero-logo{width:min(300px,68vw);margin-bottom:20px}
  .hero-marca{letter-spacing:.24em}
  .hero h1{font-size:clamp(38px,11.5vw,52px)}
  .hero-meta{letter-spacing:.12em;font-size:11.5px}
  .hero-sub{font-size:15.5px;margin-top:14px}
  .hero-proof li{flex-basis:50%}
  .tk-acciones{grid-template-columns:1fr}
  .marquee-set{font-size:18px}
  .marquee-set i{padding-inline:14px}
  .editorial li{padding:20px 0}
  .agenda li{grid-template-columns:44px 1fr;gap:14px}
  .ponentes{grid-template-columns:1fr}
  .sticky{font-size:16px}
}

/* La prueba social cae justo donde el degradado se apaga: se le da
   su propio panel oscuro para que se lea igual arriba y abajo. */
.hero-proof{
  background:rgba(8,8,5,.8);
  border:1px solid rgba(250,208,22,.22);
  border-top:2px solid var(--amarillo);
  backdrop-filter:blur(3px);
  padding:4px 10px 0;
  margin-top:40px;
}
.hero-proof li{
  color:var(--apagado);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.hero-proof li:nth-last-child(-n+3){border-bottom:0}
.hero-proof b{color:var(--amarillo)}
@media (max-width:430px){
  .hero-proof li:nth-last-child(-n+2){border-bottom:0}
}

/* =========================================================
   CONTADOR DEL HERO
   Los números mandan; las etiquetas son apoyo. Panel oscuro
   para que se lea igual sobre el amarillo y sobre el negro.
   ========================================================= */
.cuenta{
  margin-top:30px;
  width:100%;
  max-width:560px;
  background:rgba(8,8,5,.82);
  border:1px solid rgba(250,208,22,.24);
  border-top:2px solid var(--amarillo);
  backdrop-filter:blur(3px);
  padding:18px 18px 16px;
}
.cd-titulo{
  margin:0 0 14px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.32em;
  font-size:11.5px;
  color:var(--amarillo);
}
.cd-titulo.cd-final{
  letter-spacing:.14em;
  font-size:13px;
  line-height:1.4;
  margin:0;
  text-transform:none;
}
.cd-cajas[hidden]{display:none}
.cd-cajas{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
}
.cd-cajas div{
  padding:2px 6px;
  border-left:1px solid rgba(255,255,255,.09);
  text-align:center;
}
.cd-cajas div:first-child{border-left:0}
.cd-cajas b{
  display:block;
  font-style:italic;
  font-weight:900;
  font-size:clamp(32px,5.4vw,50px);
  line-height:.95;
  letter-spacing:-.045em;
  color:var(--texto);
  font-variant-numeric:tabular-nums;
}
.cd-cajas span{
  display:block;
  margin-top:6px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:10px;
  color:var(--apagado);
}

@media (max-width:430px){
  .cuenta{margin-top:24px;padding:14px 12px 12px}
  .cd-cajas{grid-template-columns:repeat(4,1fr)}
  .cd-cajas div{padding:2px}
  .cd-cajas b{font-size:clamp(26px,8vw,34px)}
  .cd-cajas span{letter-spacing:.12em;font-size:9px}
  .cd-titulo{letter-spacing:.24em;margin-bottom:10px}
}
@media (max-width:330px){
  .cd-cajas{grid-template-columns:1fr 1fr;gap:8px 0}
  .cd-cajas div:nth-child(3){border-left:0}
}

/* Primera pantalla de móvil: que evento, fecha, cercanía y acción
   entren sin hacer scroll. Todo se aprieta un punto. */
@media (max-width:430px){
  .hero-in{padding-block:26px 40px}
  .hero-logo{width:min(240px,58vw);margin-bottom:16px}
  .hero-marca{margin-bottom:10px;font-size:10.5px}
  .hero h1{font-size:clamp(34px,10vw,44px)}
  .hero-meta{margin-top:18px}
  .hero-sub{margin-top:12px;font-size:15px;max-width:30ch}
  .cuenta{margin-top:20px}
  .hero-cta{margin-top:20px;gap:10px}
  .btn-solido,.btn-linea{padding:15px 22px;font-size:15px}
  .hero-proof{margin-top:28px}
}

/* =========================================================
   HERO — segundo botón en blanco
   Sobre el amarillo, el botón de línea se perdía. En blanco
   sólido hace pareja con el negro sin competirle.
   ========================================================= */
.hero .btn-linea{
  background:#FFFFFF;
  color:var(--tinta);
  border-color:#FFFFFF;
  box-shadow:0 6px 18px rgba(10,10,8,.14);
}
.hero .btn-linea:hover{
  background:#FFFFFF;
  border-color:var(--tinta);
  color:var(--tinta);
  box-shadow:0 10px 24px rgba(10,10,8,.2);
}
.hero .btn-linea:focus-visible{outline:2px solid var(--tinta);outline-offset:3px}

/* el subtítulo se lee mejor con algo más de cuerpo */
.hero-sub{color:#241E06;font-weight:600}

/* =========================================================
   CELULAR — repaso fino
   ========================================================= */

/* 1 · En pantallas de 320 px las rejillas con mínimo fijo empujaban
   la página 10 px hacia un lado. min() hace que el mínimo nunca
   sea mayor que el ancho disponible. */
.ponentes{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.vivir{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.hero-proof li{min-width:0}

/* 2 · El enlace de las marcas medía 17 px de alto: imposible de
   atinar con el dedo. Ahora llega a 44, que es el mínimo cómodo. */
.sumando-pie a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding-block:6px;
}

/* 3 · Etiquetas que quedaban por debajo del tamaño legible */
.hero-marca{font-size:clamp(11.5px,1.7vw,13px)}
.cd-cajas span{font-size:10.5px}
.hero-proof li{font-size:10.5px}

/* 4 · El botón fijo no debe tapar el pie */
@media (max-width:640px){
  footer .in{padding-bottom:116px}
}

/* 5 · Menos scroll en celular: retratos algo menos altos y
   secciones más juntas, sin perder aire. */
@media (max-width:640px){
  .pon-foto{aspect-ratio:4/5}
  .ponentes{gap:30px}
  .sec{padding-block:52px}
  .cierre{padding-block:64px}
  .editorial li{padding:18px 0}
  .agenda li{padding:18px 0}
  .faq summary{padding:16px 0;font-size:16px}
  .faq p{font-size:15px}
}

/* 6 · 320 px: lo mínimo que hay que sostener */
@media (max-width:360px){
  .in{padding-inline:16px}
  .hero h1{font-size:clamp(30px,9.4vw,36px)}
  .hero-meta{font-size:10.5px;letter-spacing:.08em}
  .cd-cajas b{font-size:26px}
  .cd-cajas span{font-size:9.5px;letter-spacing:.08em}
  .marquee-set{font-size:16px}
  .editorial li{grid-template-columns:40px 1fr;gap:10px 14px}
  .editorial h3{font-size:24px}
  .vivir li{font-size:20px;gap:12px}
  .tk-evento{font-size:25px}
  .tk-codigo{font-size:23px}
  .tk-fila{font-size:14px}
  .btn-solido,.btn-linea{font-size:14px;padding:14px 18px}
}

/* Etiquetas pequeñas a 11 px: por debajo de eso, en un celular a
   pleno sol, dejan de leerse. Van en mayúsculas y espaciadas, así
   que 11 px se comporta como 13 px de texto normal. */
.cd-cajas span,
.hero-proof li,
.hero-barra span,
.tk-fila span,
.tk-label,
.tk-clabel,
.pon-rol,
.datos dt,
.field label{font-size:11px}
@media (max-width:360px){
  .cd-cajas span{font-size:10px;letter-spacing:.08em}
}

/* El código de la entrada se partía en dos líneas en celular
   (EXPODEP-C8FPJ / M). Nunca debe cortarse: es lo que la persona
   enseña en la puerta. Ahora se achica en vez de romperse. */
.tk-codigo{
  white-space:nowrap;
  word-break:normal;
  overflow-wrap:normal;
  letter-spacing:.01em;
  font-size:clamp(18px,6.1vw,32px);
}

/* Los retratos definitivos vienen en 4:5. Al usar esa misma
   proporción en la caja, no se recorta nada: se ve la foto
   completa tal como la entregó el diseñador, en cualquier ancho. */
.pon-foto{aspect-ratio:4/5}
.ponente img{object-position:center center}
@media (max-width:640px){
  .pon-foto{aspect-ratio:4/5}
}

/* =========================================================
   TABLERO DE MARCAS PARTICIPANTES
   Los logos vienen sobre blanco: se le da marco propio para
   que se lea como un tablero y no como una imagen pegada.
   ========================================================= */
.logos{
  margin:34px 0 0;
  padding:0;
  border:1px solid var(--linea);
  background:#FFFFFF;
  line-height:0;
}
.logos a{
  display:block;
  line-height:0;
  cursor:zoom-in;
}
.logos a:focus-visible{outline:2px solid var(--amarillo);outline-offset:3px}
.logos img{display:block;width:100%;height:auto}
.logos figcaption{
  padding:12px 16px;
  background:var(--ink);
  border-top:1px solid var(--linea);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:11px;
  color:var(--apagado);
  text-align:center;
  line-height:1.4;
}
@media (max-width:640px){
  .logos{margin-top:26px}
  .logos figcaption{letter-spacing:.14em}
}

/* =========================================================
   BANNER DE PATROCINADORES
   Franja blanca de borde a borde: los logos son el único
   bloque claro de esta parte de la página, así que cortan
   el negro y se leen como un panel de patrocinio.
   ========================================================= */
.banner{
  margin-top:40px;
  background:#FFFFFF;
  border-top:4px solid var(--amarillo);
  border-bottom:4px solid var(--amarillo);
  padding-block:30px 26px;
  padding-inline:var(--borde);
  text-align:center;
}
.banner-tag{
  margin:0 0 22px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.3em;
  font-size:11.5px;
  color:var(--tinta-apagada);
  display:inline-flex;
  align-items:center;
  gap:14px;
}
.banner-tag::before,
.banner-tag::after{
  content:"";
  width:26px;
  height:3px;
  background:var(--amarillo);
}
.banner-img{
  display:block;
  max-width:1000px;
  margin:0 auto;
  line-height:0;
  cursor:zoom-in;
  transition:transform .3s ease;
}
.banner-img img{display:block;width:100%;height:auto}
.banner-img:hover{transform:scale(1.012)}
.banner-img:focus-visible{outline:3px solid var(--amarillo);outline-offset:6px}
.banner-pie{
  margin:22px 0 0;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:11px;
  color:var(--tinta-apagada);
  opacity:.7;
}

@media (max-width:640px){
  .banner{margin-top:30px;padding-block:24px 20px;padding-inline:14px}
  .banner-tag{
    letter-spacing:.16em;
    font-size:10.5px;
    max-width:24ch;
    line-height:1.5;
    margin-bottom:16px;
  }
  .banner-tag::before,.banner-tag::after{width:16px}
  .banner-pie{letter-spacing:.14em;font-size:10.5px;margin-top:16px}
}

/* Las dos etiquetas del banner quedaban a 10.5 px en celular */
@media (max-width:640px){
  .banner-tag,
  .banner-pie{font-size:11px}
}

/* =========================================================
   PREPÁRATE PARA LA 21K — rediseño del 26/09/2026
   Todo lo nuevo vive aquí abajo, así se ve de un vistazo qué
   cambió respecto a la versión anterior.
   ========================================================= */

/* ---------- HERO — póster amarillo, sin recuadros ----------
   El fondo anterior se oscurecía a media altura: ahí no se leía ni
   el negro ni el blanco y por eso contador y datos iban en paneles
   oscuros con blur (se veía "a plantilla"). Amarillo liso = todo se
   lee directo, sin cajas. */
.hero{background:var(--amarillo)}
.hero-in{padding-block:48px 64px}
.hero-logo{width:min(320px,70vw);margin-bottom:30px}
.hero h1{font-size:clamp(46px,7.6vw,90px)}
.hero-meta{opacity:1;color:var(--tinta)}
.hero-sub{margin-top:18px;max-width:44ch;text-wrap:balance}
/* la barra va en negro sólido: semitransparente sobre amarillo salía olivo */
.hero-barra{background:var(--ink)}

/* contador: números sueltos sobre el amarillo */
.cuenta{
  margin-top:40px;
  max-width:420px;
  background:none;
  border:0;
  backdrop-filter:none;
  padding:0;
}
.cd-titulo{color:rgba(10,10,8,.6);margin-bottom:10px}
.cd-cajas div{border-left:1px solid rgba(10,10,8,.22)}
.cd-cajas b{color:var(--tinta)}
.cd-cajas span{color:rgba(10,10,8,.6)}
.cd-titulo.cd-final{color:var(--tinta)}

/* botones: uno fuerte y un enlace, no dos bloques */
.hero-cta{margin-top:40px;align-items:center;gap:26px}
.hero-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:13px;
  color:var(--tinta);
  text-decoration:none;
  border-bottom:2px solid rgba(10,10,8,.28);
  padding:10px 0 6px;
  transition:border-color .16s ease;
}
.hero-link:hover{border-color:var(--tinta)}
.hero-link:hover .ic{transform:translateY(3px)}
.hero-link .ic{transition:transform .2s ease;width:16px;height:16px}
.hero-link:focus-visible{outline:2px solid var(--tinta);outline-offset:4px}

/* prueba social: una línea de texto, sin panel */
/* sin puntos separadores: al partirse de renglón dejaban puntos
   sueltos al inicio. Cada dato entero, separado por aire. */
.hero-proof{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px 22px;
  margin:34px auto 0;
  padding:0;
  max-width:760px;
  background:none;
  border:0;
  backdrop-filter:none;
}
.hero-proof li{
  flex:none;
  min-width:0;
  white-space:nowrap;
  padding:0;
  border:0;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:11px;
  color:rgba(10,10,8,.62);
}
.hero-proof li+li::before{content:none}
.hero-proof b{
  display:inline;
  font-style:normal;
  font-weight:900;
  font-size:inherit;
  letter-spacing:inherit;
  color:var(--tinta);
}

/* con foto de corredor: los mismos elementos, en claro */
.hero.con-foto .cd-titulo,
.hero.con-foto .cd-cajas span,
.hero.con-foto .hero-proof li{color:rgba(255,255,255,.7)}
.hero.con-foto .cd-cajas b,
.hero.con-foto .hero-proof b,
.hero.con-foto .hero-link{color:#FFFFFF}
.hero.con-foto .cd-cajas div{border-color:rgba(255,255,255,.2)}
.hero.con-foto .hero-link{border-color:rgba(255,255,255,.4)}

@media (max-width:640px){
  .hero-cta{flex-direction:column;align-items:center;gap:14px}
  .hero-cta .btn-solido{width:100%}
}
@media (max-width:430px){
  .hero-in{padding-block:34px 48px}
  .hero-logo{width:min(250px,60vw);margin-bottom:24px}
  .cuenta{margin-top:28px}
  .hero-cta{margin-top:28px}
  .hero-proof{margin-top:24px;gap:6px 16px;max-width:320px}
}

.h1-21k{
  display:inline-block;
  font-size:1.42em;
  line-height:.8;
  letter-spacing:-.05em;
  padding-right:.04em;
}
.hero-hora{
  display:block;
  margin-top:8px;
  letter-spacing:.16em;
}

/* Con foto de corredor: texto blanco sobre oscuro. Solo se activa
   si assets/photos/runner-hero.webp existe (lo decide app.js). */
.hero.con-foto{
  background:
    linear-gradient(180deg,
      rgba(3,4,5,.42) 0%,
      rgba(3,4,5,.5) 40%,
      rgba(3,4,5,.78) 72%,
      rgba(3,4,5,.97) 100%),
    var(--foto) center 30% / cover no-repeat,
    var(--ink);
}
.hero.con-foto h1,
.hero.con-foto .hero-meta,
.hero.con-foto .hero-marca{color:#FFFFFF}
.hero.con-foto .h1-21k{color:var(--amarillo)}
.hero.con-foto .hero-sub{color:#EDEAE0}
.hero.con-foto .btn-solido{background:var(--amarillo);color:var(--ink);border-color:var(--amarillo)}
.hero.con-foto .btn-solido:hover{background:var(--amarillo-alto);border-color:var(--amarillo-alto);color:var(--ink)}

/* barra de datos en celular: en 2 columnas no cabía y los textos se
   partían ("Decorabaños / Ciclismo"). Una fila por dato: etiqueta a
   la izquierda, dato a la derecha. */
@media (max-width:640px){
  .hero-barra .in{grid-template-columns:1fr;padding-block:6px}
  .hero-barra .in > div,
  .hero-barra .in > div:nth-child(even),
  .hero-barra .in > div:nth-child(odd){
    display:flex;
    flex-direction:row-reverse;
    justify-content:space-between;
    align-items:baseline;
    gap:16px;
    padding:15px 0;
    border-left:0;
    border-top:1px solid var(--linea-suave);
  }
  .hero-barra .in > div:first-child{border-top:0}
  .hero-barra b{font-size:16px;text-align:right}
  .hero-barra span{margin-top:0;white-space:nowrap}
}
@media (max-width:360px){
  .hero-barra .in > div{gap:10px}
  .hero-barra b{font-size:14.5px}
  .hero-barra span{letter-spacing:.08em}
}

/* ---------- ANTES DE LA META ---------- */
.meta-grid{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:64px;
  align-items:start;
}
.meta-lado{position:sticky;top:36px}
.meta-grid .editorial{margin-top:0}
.meta-grid .editorial li{grid-template-columns:60px minmax(0,1fr);gap:18px}
.ed-cuerpo h3{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:clamp(26px,3.3vw,38px);
}
.ed-cuerpo h3 .ic-mid{width:30px;height:30px;color:var(--amarillo-bajo);stroke-width:1.7}
.ed-cuerpo p{margin:8px 0 0}
/* sin frase debajo: número, icono y nombre en una línea centrada */
.meta-grid .editorial li{align-items:center;padding:22px 0}
@media (min-width:921px){
  .meta-grid{align-items:center}
  .meta-lado{position:static}
  .meta-foto{max-height:360px;aspect-ratio:auto;height:360px}
}

/* foto opcional con respaldo tipográfico */
.foto{
  position:relative;
  margin:36px 0 0;
  aspect-ratio:4/5;
  max-height:520px;
  width:100%;
  overflow:hidden;
  background:var(--foto) center / cover no-repeat, var(--amarillo);
  display:flex;
  align-items:flex-end;
}
.foto-alt{padding:26px 28px;color:var(--tinta)}
.foto-alt b{
  display:block;
  font-style:italic;
  font-weight:900;
  font-size:clamp(88px,11vw,150px);
  line-height:.8;
  letter-spacing:-.06em;
}
.foto-alt span{
  display:block;
  margin-top:14px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:12px;
  line-height:1.5;
}
.foto.con-foto .foto-alt{display:none}

/* ---------- MARCAS ---------- */
.sumando .lede{max-width:52ch}

/* ---------- FORO ---------- */
.foro{
  border-top:1px solid var(--linea-suave);
  background:
    radial-gradient(60% 90% at 100% 0%, rgba(250,208,22,.09) 0%, rgba(3,4,5,0) 60%),
    var(--ink);
}
.foro-titulo{
  margin:0;
  font-style:italic;
  font-weight:900;
  text-transform:uppercase;
  line-height:.8;
  letter-spacing:-.05em;
}
.ft-1{
  display:block;
  color:var(--amarillo);
  font-size:clamp(88px,19vw,220px);
}
.ft-2{
  display:block;
  margin-top:10px;
  color:var(--texto);
  font-size:clamp(34px,6.4vw,70px);
  letter-spacing:-.04em;
}
.foro-sub{
  margin:22px 0 0;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:13px;
  color:var(--amarillo);
}
.foro .lede{max-width:48ch}
.foro-temas{
  list-style:none;
  margin:36px 0 0;
  padding:18px 0 0;
  border-top:1px solid var(--linea);
  display:flex;
  flex-wrap:wrap;
  gap:6px 0;
}
.foro-temas li{
  font-style:italic;
  font-weight:900;
  text-transform:uppercase;
  font-size:clamp(18px,2.4vw,26px);
  letter-spacing:-.02em;
}
.foro-temas li+li::before{
  content:"/";
  font-style:normal;
  font-weight:400;
  color:var(--amarillo);
  padding-inline:16px;
}
.foro-part{
  margin:30px 0 0;
  display:inline-flex;
  align-items:center;
  gap:18px;
  padding:14px 20px;
  border:1px solid var(--linea);
  border-left:4px solid var(--amarillo);
}
.foro-part span{
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:11px;
  color:var(--apagado);
}
.foro-part b{
  font-style:italic;
  font-weight:900;
  text-transform:uppercase;
  font-size:17px;
  letter-spacing:.02em;
}

/* ---------- ESTO VAS A VIVIR + DESCARGAS ---------- */
.vivir li{font-size:clamp(22px,2.8vw,30px)}
.js .vivir .reveal.visible:nth-child(7){transition-delay:.36s}
.js .vivir .reveal.visible:nth-child(8){transition-delay:.42s}

.extra{
  margin-top:48px;
  background:var(--tinta);
  color:#F6F3E7;
  padding:30px 32px 32px;
  position:relative;
}
.extra::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:6px;
  background:#FFFFFF;
}
.extra-tag{
  margin:0 0 14px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.26em;
  font-size:11px;
  color:var(--amarillo);
}
.extra-cuerpo{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:18px 40px;
  align-items:end;
}
.extra h3{
  margin:0;
  font-style:italic;
  font-weight:900;
  text-transform:uppercase;
  font-size:clamp(30px,4.6vw,52px);
  line-height:.9;
  letter-spacing:-.04em;
  color:var(--amarillo);
}
.extra-quien{
  margin:0 0 8px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:13px;
  color:#FFFFFF;
}
.extra-txt{margin:0;color:#A9A594;font-size:15.5px;max-width:40ch}

/* ---------- Y AL DÍA SIGUIENTE, XELA CORRE ---------- */
.carrera{
  position:relative;
  overflow:hidden;
  min-height:clamp(380px,46vw,540px);
  display:flex;
  align-items:flex-end;
  padding-block:64px;
  border-top:1px solid var(--linea-suave);
  background:
    linear-gradient(90deg, rgba(3,4,5,.94) 0%, rgba(3,4,5,.66) 55%, rgba(3,4,5,.35) 100%),
    var(--foto) center 40% / cover no-repeat,
    var(--ink);
}
.carrera .in{position:relative;z-index:1;width:100%}
.carrera-fondo{
  position:absolute;
  right:-.04em;
  bottom:-.14em;
  margin:0;
  font-style:italic;
  font-weight:900;
  font-size:clamp(170px,34vw,440px);
  line-height:.8;
  letter-spacing:-.06em;
  color:rgba(250,208,22,.09);
  pointer-events:none;
  user-select:none;
}
.carrera.con-foto .carrera-fondo{display:none}
.carrera .h2{max-width:16ch}
.dist{
  margin:24px 0 0;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:0 16px;
  font-style:italic;
  font-weight:900;
  font-size:clamp(38px,6.4vw,68px);
  line-height:1;
  letter-spacing:-.04em;
  color:var(--amarillo);
}
.dist i{font-style:normal;font-weight:400;color:var(--texto);opacity:.3}
.carrera .lede{color:#CFCBBB}
.carrera-nota{
  margin:22px 0 0;
  font-size:12px;
  color:var(--apagado);
}

/* ---------- REGISTRO SOBRE EL PÓSTER ---------- */
.solo-lector{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
.registro{
  background:var(--ink);
  padding-block:80px;
  border-top:1px solid var(--linea-suave);
}
/* La imagen ocupa el ancho del póster y arranca arriba. Termina en
   negro, así que si el contenido crece (la entrada digital), el
   fondo #000 lo continúa sin que se note el corte. */
.poster{
  position:relative;
  max-width:680px;
  margin:0 auto;
  background:url("assets/registro-fondo.webp") center top / 100% auto no-repeat, #000;
}
/* El % de un padding se mide sobre el ancho del PADRE: por eso va en
   este hijo, así el 25 % es del póster y no de toda la pantalla.
   25 % del ancho = justo debajo de la palabra REGISTRO de la imagen. */
.poster-in{padding:25% 44px 44px}
.poster-sub{
  margin:0 0 22px;
  text-align:center;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:12px;
  line-height:1.6;
  color:var(--tinta);
}
.poster-sub i{font-style:normal;opacity:.4;padding-inline:10px}
.poster .panel{
  max-width:460px;
  margin:0 auto;
  box-shadow:0 30px 70px rgba(0,0,0,.45);
}
.panel-tit{
  margin:0 0 20px;
  font-style:italic;
  font-weight:900;
  text-transform:uppercase;
  font-size:22px;
  letter-spacing:-.02em;
  color:var(--amarillo);
}
/* lista de deporte: mismo aspecto que los campos de texto */
.field select{
  width:100%;
  background:#1B1B11;
  border:1px solid #2A2A1E;
  border-radius:2px;
  color:#F6F3E7;
  font-family:var(--fuente);
  font-size:16.5px;
  padding:14px 44px 14px 14px;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAD016' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:18px;
  cursor:pointer;
}
.field select:invalid{color:#5C5949}
.field select option{color:#F6F3E7;background:#1B1B11}
.field select:focus{outline:2px solid var(--amarillo);outline-offset:1px;border-color:var(--amarillo);background-color:#232217}
.field select[aria-invalid="true"]{border-color:var(--error)}

/* campo trampa para bots: fuera de la vista, sin display:none (algunos bots lo detectan) */
.trampa{
  position:absolute;
  left:-10000px;
  width:1px;height:1px;
  overflow:hidden;
}

/* "ya estabas registrado" */
.aviso-ok{
  margin:0 0 16px;
  padding:10px 14px;
  border-left:3px solid var(--amarillo);
  background:rgba(250,208,22,.08);
  color:#F6F3E7;
  font-size:14px;
}

/* lo que gana quien se registra: sin cajas, icono + texto */
.beneficios{
  margin:0 0 26px;
  padding-bottom:22px;
  border-bottom:1px solid #2A2A1E;
}
.benef-tit{
  margin:0 0 14px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:11px;
  color:#8F8B79;
}
.beneficios ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.beneficios li{display:flex;align-items:center;gap:14px}
.beneficios .ic-mid{color:var(--amarillo);width:28px;height:28px}
.beneficios b{
  display:block;
  font-style:italic;
  font-weight:900;
  text-transform:uppercase;
  font-size:17px;
  letter-spacing:-.01em;
  color:#F6F3E7;
  line-height:1.15;
}
.beneficios span{display:block;margin-top:2px;font-size:13.5px;color:#8F8B79}

.poster-datos{
  margin:30px auto 0;
  max-width:460px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 24px;
  border-top:1px solid rgba(255,255,255,.14);
}
.poster-datos div{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.poster-datos dt{
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:11px;
  color:var(--apagado);
}
.poster-datos dd{margin:4px 0 0;font-weight:700;font-size:15px;color:#F6F3E7}

@media (max-width:640px){
  .registro{padding-block:0}
  .poster{max-width:none}
  .poster-in{padding:25% 16px 48px}
  .poster-sub{margin-bottom:18px;letter-spacing:.12em}
  .poster-sub i{display:none}
  .poster-sub span{display:block}
}

/* ---------- CIERRE ---------- */
.cierre h2 span{color:var(--amarillo)}
.cierre-fecha span{white-space:nowrap}

/* ---------- RESPONSIVE ---------- */
@media (max-width:920px){
  .meta-grid{grid-template-columns:1fr;gap:34px}
  .meta-lado{position:static}
  /* sin foto real, en celular el bloque no aporta: se quita */
  .foto:not(.con-foto){display:none}
  .foto{aspect-ratio:16/10;max-height:none;margin-top:28px}
  .extra-cuerpo{grid-template-columns:1fr}
}
@media (max-width:640px){
  .carrera{padding-block:52px;min-height:360px}
  .extra{padding:24px 22px 26px}
  .foro-temas li+li::before{padding-inline:10px}
  .foro-part{display:flex;justify-content:space-between}
}
@media (max-width:430px){
  .h1-21k{font-size:1.36em}
  .hero-hora{letter-spacing:.1em}
  .meta-grid .editorial li{grid-template-columns:44px minmax(0,1fr);gap:12px}
  .ed-cuerpo h3{font-size:26px;gap:10px}
  .ed-cuerpo h3 .ic-mid{width:24px;height:24px}
}
@media (max-width:360px){
  .meta-grid .editorial li{grid-template-columns:34px minmax(0,1fr)}
  .ed-cuerpo h3{font-size:22px}
  .ft-1{font-size:80px}
  .ft-2{font-size:30px}
  /* "Próximamente" empujaba la página 2 px en 320 */
  .foro-part{padding:12px 14px;gap:10px}
  .foro-part span{letter-spacing:.12em}
  .foro-part b{font-size:15px}
  /* nada por debajo de 11 px, ni en 320 */
  .hero-meta{font-size:11px;letter-spacing:.06em}
  .cd-cajas span{font-size:11px;letter-spacing:.04em}
}