/* ============================================================
   HackUMB 26 — capa de componentes
   Depende de tokens.css. Nada de hex crudo aquí.
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--barra-alto) + var(--e-5));
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: var(--t-16);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  transition: background var(--dur-media) var(--sal), color var(--dur-media) var(--sal);
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

p { margin: 0 0 1em; }
img, svg { max-width: 100%; }
a { color: inherit; }

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

::selection { background: var(--acento); color: var(--texto-sobre-acento); }

.wrap {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding-inline: var(--e-5);
}

.wrap-angosto { max-width: 820px; }

.mono {
  font-family: var(--f-dato);
  font-size: var(--t-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sec { color: var(--texto-sec); }
.acento { color: var(--acento-texto); }
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.saltar {
  position: absolute;
  left: -9999px;
}

.saltar:focus {
  left: var(--e-3);
  top: var(--e-3);
  z-index: var(--z-aviso);
  background: var(--superficie-invertida);
  color: var(--texto-invertido);
  padding: var(--e-3) var(--e-4);
}

/* ---------- marca ---------- */

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  text-decoration: none;
}

.marca .sq {
  width: 13px; height: 13px;
  background: var(--acento);
  flex: none;
}

.marca .txt {
  font-family: var(--f-dato);
  font-size: var(--t-12);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
}

.logotipo {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.86;
  font-size: var(--t-88);
  text-transform: uppercase;
}

.logotipo .n { color: var(--acento); }

/* ---------- barra superior ---------- */

.cinta {
  background: var(--superficie-invertida);
  color: var(--texto-invertido);
  font-family: var(--f-dato);
  font-size: var(--t-11);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: var(--e-2) 0;
}

.cinta .wrap {
  display: flex;
  gap: var(--e-4);
  justify-content: center;
  flex-wrap: wrap;
}

.cinta b { color: var(--acento-invertido); font-weight: 500; }

.barra {
  position: sticky;
  top: 0;
  z-index: var(--z-barra);
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}

.barra .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  height: var(--barra-alto);
}

.enlaces {
  display: flex;
  align-items: center;
  gap: var(--e-5);
}

.enlaces a {
  position: relative;
  font-family: var(--f-dato);
  font-size: var(--t-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--texto-sec);
  padding: var(--e-2) 0;
  min-height: var(--toque-min);
  display: inline-flex;
  align-items: center;
}

.enlaces a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 6px;
  height: 2px;
  background: var(--acento);
  transition: right var(--dur-media) var(--sal);
}

.enlaces a:hover { color: var(--texto); }
.enlaces a:hover::after,
.enlaces a[aria-current="true"]::after { right: 0; }
.enlaces a[aria-current="true"] { color: var(--texto); }
.enlaces a.btn { color: var(--texto-invertido); }
.enlaces a.btn::after { display: none; }

.tema {
  width: var(--toque-min);
  height: var(--toque-min);
  display: grid;
  place-items: center;
  border: 1px solid var(--linea);
  background: transparent;
  color: var(--texto);
  border-radius: var(--radio);
  cursor: pointer;
  transition: border-color var(--dur-rapida) var(--sal), background var(--dur-rapida) var(--sal);
}

.tema:hover { border-color: var(--texto); }
[data-tema="oscuro"] .tema .luna { display: none; }
:root:not([data-tema="oscuro"]) .tema .sol { display: none; }

/* ---------- botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--boton-alto);
  padding: var(--e-3) var(--e-5);
  border: 1px solid var(--superficie-invertida);
  border-radius: var(--radio);
  background: var(--superficie-invertida);
  color: var(--texto-invertido);
  font-family: var(--f-texto);
  font-size: var(--t-16);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--dur-rapida) var(--sal),
              background var(--dur-rapida) var(--sal),
              color var(--dur-rapida) var(--sal),
              border-color var(--dur-rapida) var(--sal);
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(0.985); }

.btn.fantasma {
  background: transparent;
  color: var(--texto);
  border-color: var(--linea);
}

.btn.fantasma:hover { border-color: var(--texto); }

.btn.acento-btn {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--texto-sobre-acento);
}

.btn.bloque { width: 100%; }

.btn.sm {
  min-height: var(--boton-alto-sm);
  padding: var(--e-2) var(--e-4);
  font-family: var(--f-dato);
  font-size: var(--t-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}

.btn[disabled], .btn[aria-disabled="true"] {
  background: transparent;
  color: var(--texto-ter);
  border-color: var(--linea);
  cursor: not-allowed;
  transform: none;
}

.btn .cargando {
  width: 15px; height: 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar 700ms linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- rejilla de asientos · elemento firma ---------- */

.asientos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15px, 1fr));
  gap: 3px;
  margin: var(--e-4) 0;
}

.asientos i {
  aspect-ratio: 1;
  background: var(--asiento-libre);
  border-radius: 1px;
  transition: background var(--dur-media) var(--sal), transform var(--dur-media) var(--sal);
}

.asientos i.ocupado { background: var(--asiento-ocupado); }

.asientos i.mio {
  background: var(--asiento-mio);
  transform: scale(1.45);
  position: relative;
  z-index: var(--z-elevado);
}

.asientos.animando i { animation: aparecer-asiento var(--dur-media) var(--sal) backwards; }

@keyframes aparecer-asiento {
  from { opacity: 0; transform: scale(0.2); }
}

/* alguien acaba de registrarse: su asiento parpadea al aparecer */
.asientos i.recien { animation: ocupar-asiento 1.4s var(--sal); }

@keyframes ocupar-asiento {
  0%   { background: var(--asiento-mio); transform: scale(1.6); }
  60%  { background: var(--asiento-mio); transform: scale(1); }
  100% { background: var(--asiento-ocupado); transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .asientos i.recien { animation: none; }
}

.leyenda-asientos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  font-family: var(--f-dato);
  font-size: var(--t-11);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-sec);
}

.leyenda-asientos span { display: inline-flex; align-items: center; gap: var(--e-2); }

.leyenda-asientos b {
  width: 10px; height: 10px;
  border-radius: 1px;
  font-size: 0;
}

.leyenda-asientos .l-ocupado { background: var(--asiento-ocupado); }
.leyenda-asientos .l-libre { background: var(--asiento-libre); }
.leyenda-asientos .l-mio { background: var(--asiento-mio); }

/* ---------- héroe ---------- */

.heroe {
  border-bottom: 1px solid var(--linea);
  padding: var(--e-8) 0 var(--e-7);
}

.heroe .malla {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: var(--e-7);
  align-items: start;
}

.ceja {
  font-family: var(--f-dato);
  font-size: var(--t-12);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acento-texto);
  margin-bottom: var(--e-5);
}

.heroe h1 {
  font-size: var(--t-88);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.9;
  margin-bottom: var(--e-5);
}

.heroe h1 em { font-style: normal; color: var(--acento); }

.heroe .entrada {
  max-width: 46ch;
  color: var(--texto-sec);
  font-size: var(--t-18);
  margin-bottom: var(--e-6);
}

.acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); }

.reloj {
  display: flex;
  gap: var(--e-5);
  margin-top: var(--e-6);
  padding-top: var(--e-5);
  border-top: 1px solid var(--linea);
}

.reloj > div { min-width: 62px; }

.reloj .n {
  font-family: var(--f-display);
  font-size: var(--t-34);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.reloj .l {
  font-family: var(--f-dato);
  font-size: var(--t-11);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-sec);
}

/* tarjeta de cupo */

.cupo {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--superficie);
  padding: var(--e-5);
}

.cupo .cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  margin-bottom: var(--e-3);
}

.cupo .grande {
  font-family: var(--f-display);
  font-size: var(--t-46);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.datos { border-top: 1px solid var(--linea); margin-top: var(--e-4); }

.datos > .fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--linea-suave);
}

.datos .fila:last-child { border-bottom: 0; }

.datos .k {
  font-family: var(--f-dato);
  font-size: var(--t-11);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-sec);
}

.datos .v { font-weight: 600; }

/* ---------- secciones ---------- */

.seccion {
  padding: var(--seccion-relleno) 0;
  border-bottom: 1px solid var(--linea);
}

.seccion-cabeza {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-5);
  margin-bottom: var(--e-6);
  flex-wrap: wrap;
}

.seccion h2 {
  font-size: var(--t-46);
  letter-spacing: -0.035em;
}

.seccion .sub { color: var(--texto-sec); margin: var(--e-2) 0 0; max-width: 58ch; }

/* retos interactivos */

.retos {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--e-6);
  border: 1px solid var(--linea);
  background: var(--superficie);
}

.retos-lista {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--linea);
}

.reto-tab {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-3);
  align-items: baseline;
  text-align: left;
  padding: var(--e-5);
  min-height: var(--toque-min);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--linea-suave);
  font-family: var(--f-texto);
  font-size: var(--t-18);
  font-weight: 600;
  color: var(--texto);
  cursor: pointer;
  transition: background var(--dur-rapida) var(--sal), padding-left var(--dur-media) var(--sal);
}

.reto-tab:hover { padding-left: calc(var(--e-5) + 6px); }

.reto-tab .num {
  font-family: var(--f-dato);
  font-size: var(--t-13);
  color: var(--texto-ter);
  font-weight: 500;
}

.reto-tab[aria-selected="true"] {
  background: var(--superficie-invertida);
  color: var(--texto-invertido);
}

.reto-tab[aria-selected="true"] .num { color: var(--acento-invertido); }

.reto-panel { padding: var(--e-6) var(--e-6) var(--e-6) 0; }
.reto-panel[hidden] { display: none; }
.reto-panel h3 { font-size: var(--t-34); margin-bottom: var(--e-3); }
.reto-panel .desc { color: var(--texto-sec); max-width: 60ch; font-size: var(--t-18); }

.reto-panel ul {
  list-style: none;
  padding: var(--e-4) 0 0;
  margin: var(--e-4) 0 var(--e-5);
  border-top: 1px solid var(--linea-suave);
}

.reto-panel li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--e-3);
  padding: var(--e-1) 0;
  color: var(--texto-sec);
  font-size: var(--t-14);
}

.reto-panel li::before { content: "—"; color: var(--acento-texto); }

.reto-panel.entrando { animation: entrar-panel var(--dur-media) var(--sal); }

@keyframes entrar-panel {
  from { opacity: 0; transform: translateY(8px); }
}

/* cómo funciona · secuencia real, por eso va numerada */

.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }

.paso-card {
  padding: var(--e-6) var(--e-5);
  border-left: 1px solid var(--linea);
}

.paso-card:first-child { border-left: 0; padding-left: 0; }

.paso-card .num {
  font-family: var(--f-dato);
  font-size: var(--t-13);
  letter-spacing: 0.16em;
  color: var(--acento-texto);
  margin-bottom: var(--e-3);
}

.paso-card h3 { font-size: var(--t-21); margin-bottom: var(--e-2); }
.paso-card p { color: var(--texto-sec); font-size: var(--t-14); margin: 0; }

/* agenda */

.agenda { border-top: 1px solid var(--linea); }

.agenda .fila {
  display: grid;
  grid-template-columns: 170px 1fr auto;
  gap: var(--e-5);
  align-items: baseline;
  padding: var(--e-4) 0;
  border-bottom: 1px solid var(--linea-suave);
}

.agenda .hora {
  font-family: var(--f-dato);
  font-size: var(--t-12);
  letter-spacing: 0.12em;
  color: var(--acento-texto);
}

.agenda .que { font-weight: 600; }
.agenda .nota { color: var(--texto-sec); font-size: var(--t-14); }

/* faq */

.faq { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--e-7); }

.faq details {
  border-bottom: 1px solid var(--linea-suave);
  padding: var(--e-4) 0;
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: var(--toque-min);
  align-items: center;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  font-family: var(--f-dato);
  color: var(--acento-texto);
  transition: transform var(--dur-media) var(--sal);
}

.faq details[open] summary::after { content: "+"; transform: rotate(45deg); }
.faq p { color: var(--texto-sec); font-size: var(--t-16); margin: var(--e-3) 0 0; max-width: 60ch; }

/* cierre */

.cierre {
  padding: var(--e-9) 0;
  background: var(--acento);
  color: var(--texto-sobre-acento);
}

.cierre h2 { font-size: var(--t-64); letter-spacing: -0.04em; margin-bottom: var(--e-4); }
.cierre p { max-width: 52ch; margin-bottom: var(--e-5); }
.cierre .btn { background: var(--tinta-900); border-color: var(--tinta-900); color: var(--papel-50); }

.pie { padding: var(--e-6) 0 var(--e-8); color: var(--texto-sec); }

.pie .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  justify-content: space-between;
  align-items: center;
}

/* ---------- wizard de registro ---------- */

.wizard { padding: var(--e-6) 0 var(--e-9); }

.rastro {
  display: flex;
  gap: 0;
  border: 1px solid var(--linea);
  margin-bottom: var(--e-6);
  background: var(--superficie);
}

.rastro .tramo {
  flex: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-3);
  align-items: center;
  padding: var(--e-4) var(--e-5);
  border-left: 1px solid var(--linea);
  font-size: var(--t-14);
  color: var(--texto-ter);
  background: transparent;
  font-family: var(--f-texto);
  text-align: left;
  cursor: default;
}

.rastro .tramo:first-child { border-left: 0; }

.rastro .tramo .marca-n {
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--linea);
  border-radius: 50%;
  font-family: var(--f-dato);
  font-size: var(--t-12);
}

.rastro .tramo[data-estado="activo"] { color: var(--texto); font-weight: 600; }

.rastro .tramo[data-estado="activo"] .marca-n {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--texto-sobre-acento);
}

.rastro .tramo[data-estado="hecho"] { color: var(--texto-sec); cursor: pointer; }

.rastro .tramo[data-estado="hecho"] .marca-n {
  background: var(--superficie-invertida);
  border-color: var(--superficie-invertida);
  color: var(--texto-invertido);
}

.paso[hidden] { display: none; }
.paso.entrando { animation: entrar-paso var(--dur-lenta) var(--sal); }
.paso.entrando-atras { animation: entrar-paso-atras var(--dur-lenta) var(--sal); }

@keyframes entrar-paso {
  from { opacity: 0; transform: translateX(24px); }
}

@keyframes entrar-paso-atras {
  from { opacity: 0; transform: translateX(-24px); }
}

.doble {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--linea);
  background: var(--superficie);
}

.doble > div { padding: var(--e-7) var(--e-6); }
.doble > div + div { border-left: 1px solid var(--linea); }

.etiqueta-paso {
  font-family: var(--f-dato);
  font-size: var(--t-12);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acento-texto);
  margin-bottom: var(--e-3);
}

.ficha { border-top: 1px solid var(--linea); margin-top: var(--e-5); }

.ficha .fila {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--e-4);
  padding: var(--e-2) 0;
  font-family: var(--f-dato);
  font-size: var(--t-13);
}

.ficha .k { letter-spacing: 0.12em; text-transform: uppercase; }
.ficha .v { color: var(--texto-sec); }

.lista-num {
  list-style: none;
  margin: var(--e-5) 0 0;
  padding: var(--e-5) 0 0;
  border-top: 1px solid var(--linea);
}

.lista-num li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--e-2);
  padding: var(--e-1) 0;
  color: var(--texto-sec);
  font-size: var(--t-16);
}

.lista-num b {
  font-family: var(--f-dato);
  font-size: var(--t-12);
  color: var(--acento-texto);
  font-weight: 500;
}

/* formulario */

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: var(--e-7) var(--e-6);
}

.perfil {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  background: var(--superficie-invertida);
  color: var(--texto-invertido);
  padding: var(--e-3) var(--e-4);
  margin: var(--e-5) 0;
}

.perfil .av {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  background: var(--tinta-600);
  color: var(--papel-50);
  font-family: var(--f-dato);
  font-size: var(--t-13);
  flex: none;
}

/* La foto llena el cuadro sin estirarlo: sin min-width el ancho intrínseco manda. */
.av.con-foto { background: var(--papel-300); min-width: 0; overflow: hidden; }

/* `hidden` debe ganar: varios componentes fijan su propio display */
[hidden] { display: none !important; }

/* chip de la barra: quien ya entró ve su cuenta en vez de "Registrarme" */
.enlaces .chip-perfil {            /* .enlaces a fija su propio color */
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--boton-alto-sm);
  padding: 3px var(--e-3) 3px 3px;
  border: 1px solid var(--linea);
  color: var(--texto);
  text-decoration: none;
}

.chip-perfil:hover { border-color: var(--acento-borde); }

.chip-perfil .av {
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--tinta-600);
  color: var(--papel-50);
  font-family: var(--f-dato);
  font-size: var(--t-11);
}

.chip-perfil .nom {
  font-family: var(--f-dato);
  font-size: var(--t-12);
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.av img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.perfil .meta { font-family: var(--f-dato); font-size: var(--t-12); color: var(--texto-sec-invertido); }

.perfil .cambiar {
  margin-left: auto;
  min-height: var(--toque-min);
  padding-inline: var(--e-2);
  font-family: var(--f-dato);
  font-size: var(--t-11);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acento-invertido);
  background: none;
  border: 0;
  cursor: pointer;
}

.campo { margin-bottom: var(--e-5); }

.campo > label, .campo .rotulo {
  display: block;
  font-family: var(--f-dato);
  font-size: var(--t-11);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-sec);
  margin-bottom: var(--e-2);
}

.campo .req { color: var(--acento-texto); }

.campo input[type="text"], .campo input[type="email"] {
  width: 100%;
  min-height: var(--campo-alto);
  padding: var(--e-3) var(--e-4);
  background: var(--superficie-alta);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  font-family: var(--f-texto);
  font-size: var(--t-16);
  color: var(--texto);
  transition: border-color var(--dur-rapida) var(--sal);
}

.campo input::placeholder { color: var(--texto-ter); }
.campo input.dato { font-family: var(--f-dato); letter-spacing: 0.2em; }
.campo input:hover { border-color: var(--texto-ter); }
.campo[data-error] input { border-color: var(--peligro); }

.dos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-5); }

.segmentado {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}

.segmentado button {
  min-height: var(--campo-alto);
  border: 0;
  border-left: 1px solid var(--linea);
  background: var(--superficie-alta);
  font-family: var(--f-dato);
  font-size: var(--t-14);
  color: var(--texto);
  cursor: pointer;
  transition: background var(--dur-rapida) var(--sal), color var(--dur-rapida) var(--sal);
}

.segmentado button:first-child { border-left: 0; }
.segmentado button:hover { background: var(--acento-fondo); }

.segmentado button[aria-checked="true"] {
  background: var(--acento);
  color: var(--texto-sobre-acento);
  font-weight: 700;
}

.correo { display: grid; grid-template-columns: 1fr auto; }
.correo input { border-right: 0; }

.correo .dominio {
  display: grid;
  place-items: center;
  padding-inline: var(--e-4);
  background: var(--linea-suave);
  border: 1px solid var(--linea);
  font-family: var(--f-dato);
  font-size: var(--t-13);
  color: var(--texto-sec);
}

.ayuda { font-size: var(--t-13); color: var(--texto-sec); margin: var(--e-2) 0 0; }

.error {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-dato);
  font-size: var(--t-12);
  color: var(--peligro);
  margin: var(--e-2) 0 0;
}

.error:empty { display: none; }
.error::before { content: "!"; font-weight: 700; }

.acepto {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-4) 0 var(--e-1);
  border-top: 1px solid var(--linea-suave);
  font-size: var(--t-16);
}

.acepto input[type="checkbox"] {
  width: 24px; height: 24px;
  accent-color: var(--acento);
  margin-top: 2px;
  flex: none;
}

.acciones-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--e-3);
  margin-top: var(--e-5);
}

.borrador {
  font-family: var(--f-dato);
  font-size: var(--t-11);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-ter);
  margin: var(--e-3) 0 0;
  min-height: 1.2em;
}

/* pase */

.confirmacion {
  background: var(--tinta-900);
  color: var(--papel-50);
  padding: var(--e-7) var(--e-6);
}

.confirmacion h2 { font-size: var(--t-64); letter-spacing: -0.04em; line-height: 0.98; margin-bottom: var(--e-4); }
.confirmacion .entrada { color: #B9B2A8; max-width: 46ch; }
/* un correo largo no debe empujar la caja ni sacar barra horizontal */
.confirmacion .entrada [data-correo], .pase .lineas { overflow-wrap: anywhere; }
.confirmacion .asientos i.ocupado { background: var(--papel-300); }
.confirmacion .asientos i { background: var(--tinta-600); }
.confirmacion .asientos i.mio { background: var(--naranja-400); }

.pase {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--e-5);
  align-items: center;
  background: var(--papel-50);
  color: var(--tinta-900);
  padding: var(--e-5);
  margin: var(--e-6) 0 var(--e-5);
}

.pase .rot {
  font-family: var(--f-dato);
  font-size: var(--t-11);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--naranja-700);
  margin-bottom: var(--e-2);
}

.pase h3 { font-size: var(--t-34); margin-bottom: var(--e-3); }
.pase .lineas { font-family: var(--f-dato); font-size: var(--t-13); color: var(--tinta-400); line-height: 1.9; }

.pase .copiar {
  min-height: var(--toque-min);
  margin-top: var(--e-2);
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--papel-400);
  background: transparent;
  font-family: var(--f-dato);
  font-size: var(--t-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-900);
  cursor: pointer;
}

.nota-envio {
  text-align: center;
  font-family: var(--f-dato);
  font-size: var(--t-12);
  color: #857E75;
  margin: var(--e-4) 0 0;
}

.nota-envio.enviando { color: var(--papel-300); }
.nota-envio.hecho { color: var(--naranja-400); }
.nota-envio.falla { color: #FF8A6A; }

.nota-envio .reintentar {
  min-height: var(--toque-min);
  margin-left: var(--e-2);
  padding: 0 var(--e-3);
  background: none;
  border: 1px solid var(--tinta-600);
  color: var(--papel-100);
  font-family: var(--f-dato);
  font-size: var(--t-12);
  cursor: pointer;
}

.nota-envio .reintentar:hover { border-color: var(--naranja-400); }

.codigo { width: 150px; height: 150px; flex: none; }
.codigo svg { width: 100%; height: 100%; display: block; }

.siguientes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--tinta-600);
  border-bottom: 1px solid var(--tinta-600);
  margin-bottom: var(--e-5);
}

.siguientes > div { padding: var(--e-4) var(--e-5) var(--e-4) 0; border-right: 1px solid var(--tinta-600); }
.siguientes > div:last-child { border-right: 0; }

.siguientes .l {
  font-family: var(--f-dato);
  font-size: var(--t-11);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8F887E;
  margin-bottom: var(--e-1);
}

.siguientes .v { font-weight: 600; }

/* ---------- panel ---------- */

.marco {
  border: 1px solid var(--linea);
  background: var(--superficie);
  margin: var(--e-6) 0 var(--e-8);
}

.marco .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-4) var(--e-5);
  border-bottom: 1px solid var(--linea);
}

.marco .top .usuario {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-family: var(--f-dato);
  font-size: var(--t-12);
  color: var(--texto-sec);
}

.marco .top .av {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  background: var(--superficie-invertida);
  color: var(--texto-invertido);
  font-family: var(--f-dato);
  font-size: var(--t-12);
}

.cuerpo-panel { display: grid; grid-template-columns: 268px 1fr; }

.columna-lateral {
  border-right: 1px solid var(--linea);
  display: flex;
  flex-direction: column;
  min-width: 0;                  /* si no, la tira de enlaces estira la rejilla */
}

.lateral {
  padding: var(--e-5) var(--e-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}

/* lo que cuelga de la navegación: equipo, asesor y el aviso de equipo */
.extra-lateral {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 var(--e-4) var(--e-5);
}

.lateral a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  min-height: var(--toque-min);
  text-decoration: none;
  font-size: var(--t-16);
  color: var(--texto);
  border-radius: var(--radio);
  transition: background var(--dur-rapida) var(--sal);
}

.lateral a:hover { background: var(--fondo-alt); }

.lateral a[aria-current="page"] {
  background: var(--superficie-invertida);
  color: var(--texto-invertido);
  font-weight: 600;
}

.lateral .punto {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--acento);
  flex: none;
}

/* el equipo, siempre a la vista bajo la navegacion del panel */
.equipo-lateral {
  margin-top: var(--e-4);
  padding-top: var(--e-4);
  border-top: 1px solid var(--linea);
}

.equipo-lateral .l {
  font-family: var(--f-dato);
  font-size: var(--t-11);
  color: var(--texto-sec);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--e-2);
  padding-inline: var(--e-4);
}

.equipo-lateral ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.equipo-lateral li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-2) var(--e-4);
}

.equipo-lateral .av {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  background: var(--tinta-700);
  color: var(--papel-50);
  font-family: var(--f-dato);
  font-size: var(--t-11);
}

.equipo-lateral .quien { min-width: 0; }

.equipo-lateral b {
  display: block;
  font-size: var(--t-14);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.equipo-lateral .mono {
  display: block;
  font-size: var(--t-11);
  text-transform: none;          /* @usuario va tal cual lo escribe GitHub */
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.equipo-lateral .rol { font-size: var(--t-11); }

/* quien acompaña al equipo, debajo de la lista */
.mentor-lateral {
  margin-top: var(--e-3);
  padding: var(--e-3) var(--e-4) 0;
  border-top: 1px solid var(--linea);
}

.mentor-lateral .l {
  font-family: var(--f-dato);
  font-size: var(--t-11);
  color: var(--texto-sec);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--e-2);
  padding-inline: 0;
}

.quien-mentor {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--e-3);
}

.quien-mentor .quien { min-width: 0; }

.quien-mentor b {
  display: block;
  font-size: var(--t-14);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quien-mentor .mono {
  display: block;
  font-size: var(--t-11);
  text-transform: none;          /* @usuario va tal cual lo escribe GitHub */
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quien-mentor .av {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  background: var(--acento);
  color: var(--papel-50);
  font-family: var(--f-dato);
  font-size: var(--t-11);
}

.sin-mentor {
  margin: 0;
  font-size: var(--t-12);
  color: var(--texto-sec);
}

.aviso {
  margin-top: auto;
  border-left: 3px solid var(--acento);
  background: var(--acento-fondo);
  padding: var(--e-4);
  font-size: var(--t-14);
}

.aviso b { display: block; margin-bottom: var(--e-1); }
.aviso p { margin: 0; color: var(--texto-sec); }

.principal-panel { padding: var(--e-6); }

.encabezado {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-5);
  margin-bottom: var(--e-5);
  flex-wrap: wrap;
}

.encabezado h2 { font-size: var(--t-46); }

.progreso-registro { margin-bottom: var(--e-5); }

.progreso-registro .riel {
  height: 6px;
  background: var(--linea-suave);
  border-radius: 3px;
  overflow: hidden;
}

.progreso-registro .relleno {
  height: 100%;
  width: 0;
  background: var(--acento);
  transition: width var(--dur-lenta) var(--sal);
}

.progreso-registro .texto {
  display: flex;
  justify-content: space-between;
  font-family: var(--f-dato);
  font-size: var(--t-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-sec);
  margin-top: var(--e-2);
}

.estados { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--linea); margin-bottom: var(--e-5); }
.estados > div { padding: var(--e-4) var(--e-5); border-left: 1px solid var(--linea); }
.estados > div:first-child { border-left: 0; }

.estados .l {
  font-family: var(--f-dato);
  font-size: var(--t-11);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-sec);
  margin-bottom: var(--e-2);
}

.estados .v { font-size: var(--t-21); font-weight: 700; letter-spacing: -0.02em; }

.pendientes { border: 1px solid var(--linea); }

.pendientes .cab {
  padding: var(--e-3) var(--e-5);
  border-bottom: 1px solid var(--linea);
  font-family: var(--f-dato);
  font-size: var(--t-11);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-sec);
}

.pendientes .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  padding: var(--e-4) var(--e-5);
  border-bottom: 1px solid var(--linea-suave);
}

.pendientes .item:last-child { border-bottom: 0; }
.pendientes .item b { display: block; font-size: var(--t-16); }
.pendientes .item span { color: var(--texto-sec); font-size: var(--t-14); }

.pendientes .item[data-hecho="si"] b::before {
  content: "✓ ";
  color: var(--exito);
}

/* ---------- modal ---------- */

.velo {
  position: fixed;
  inset: 0;
  background: var(--velo);
  display: grid;
  place-items: center;
  padding: var(--e-5);
  z-index: var(--z-modal);
  animation: fundir var(--dur-media) var(--sal);
}

.velo[hidden] { display: none; }

@keyframes fundir { from { opacity: 0; } }

.modal {
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--superficie);
  color: var(--texto);
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: var(--e-6);
  animation: subir-modal var(--dur-lenta) var(--sal);
}

@keyframes subir-modal {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
}

.modal h3 { font-size: var(--t-26); margin-bottom: var(--e-2); }
.modal p { font-size: var(--t-14); color: var(--texto-sec); }
.modal .acciones { display: grid; grid-template-columns: 1fr auto; gap: var(--e-3); }

.opciones-reto { display: grid; gap: var(--e-2); margin: var(--e-4) 0 var(--e-5); }

.opcion {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-3);
  align-items: start;
  padding: var(--e-4);
  border: 1px solid var(--linea);
  cursor: pointer;
  transition: border-color var(--dur-rapida) var(--sal), background var(--dur-rapida) var(--sal);
}

.opcion:hover { border-color: var(--texto-ter); }
.opcion input { accent-color: var(--acento); width: 20px; height: 20px; margin-top: 2px; }
.opcion b { display: block; }
.opcion span { color: var(--texto-sec); font-size: var(--t-13); }
.opcion:has(input:checked) { border-color: var(--acento); background: var(--acento-fondo); }

/* ---------- avisos flotantes ---------- */

.avisos {
  position: fixed;
  left: 50%;
  bottom: var(--e-5);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  z-index: var(--z-aviso);
  width: min(440px, calc(100vw - 32px));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  background: var(--superficie-invertida);
  color: var(--texto-invertido);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--radio);
  font-size: var(--t-14);
  pointer-events: auto;
  animation: entrar-toast var(--dur-media) var(--sal);
}

.toast .deshacer {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--naranja-400);
  font-family: var(--f-dato);
  font-size: var(--t-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: var(--toque-min);
  padding-inline: var(--e-2);
}

.toast.saliendo { animation: salir-toast var(--dur-rapida) var(--ent) forwards; }

@keyframes entrar-toast { from { opacity: 0; transform: translateY(12px); } }
@keyframes salir-toast { to { opacity: 0; transform: translateY(8px); } }

/* ---------- revelado al hacer scroll ---------- */

.revela { opacity: 0; transform: translateY(14px); }

.revela.visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-lenta) var(--sal), transform var(--dur-lenta) var(--sal);
  transition-delay: var(--retraso, 0ms);
}

/* ---------- variantes de dirección (A/B/C) ---------- */

.selector { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; margin-bottom: var(--e-5); }

.selector .lbl {
  font-family: var(--f-dato);
  font-size: var(--t-11);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-sec);
  margin-right: var(--e-1);
}

.selector button {
  font-family: var(--f-dato);
  font-size: var(--t-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: var(--e-2) var(--e-3);
  min-height: var(--boton-alto-sm);
  border: 1px solid var(--linea);
  background: transparent;
  color: var(--texto-sec);
  border-radius: var(--radio);
  cursor: pointer;
  transition: background var(--dur-rapida) var(--sal), color var(--dur-rapida) var(--sal);
}

.selector button[aria-pressed="true"] {
  background: var(--superficie-invertida);
  border-color: var(--superficie-invertida);
  color: var(--texto-invertido);
}

.terminal { background: var(--tinta-900); color: var(--papel-50); }

.terminal .barra-term {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-3) var(--e-5);
  border-bottom: 1px solid var(--tinta-600);
  font-family: var(--f-dato);
  font-size: var(--t-12);
  color: #8F887E;
}

.terminal .estado-term { color: var(--naranja-400); letter-spacing: 0.14em; }
.terminal .cuerpo { display: grid; grid-template-columns: 1fr 1fr; }
.terminal .cuerpo > div { padding: var(--e-7) var(--e-6); }
.terminal .cuerpo > div + div { border-left: 1px solid var(--tinta-600); }
.terminal .prompt { font-family: var(--f-dato); font-size: var(--t-14); color: var(--naranja-400); margin-bottom: var(--e-5); }
.terminal .prompt .cursor { display: inline-block; width: 8px; background: var(--naranja-400); animation: latir 1s steps(2) infinite; }

@keyframes latir { 50% { opacity: 0; } }

.terminal .desc { font-family: var(--f-dato); font-size: var(--t-14); line-height: 1.8; color: #B9B2A8; }

.cifras { display: flex; margin-top: var(--e-7); border-top: 1px solid var(--tinta-600); padding-top: var(--e-5); }
.cifras > div { padding-right: var(--e-6); margin-right: var(--e-6); border-right: 1px solid var(--tinta-600); }
.cifras > div:last-child { border-right: 0; }
.cifras .n { font-family: var(--f-display); font-size: var(--t-34); font-weight: 700; letter-spacing: -0.03em; }
.cifras .l { font-family: var(--f-dato); font-size: var(--t-11); letter-spacing: 0.16em; text-transform: uppercase; color: #8F887E; }

.caja-auth { border: 1px solid var(--tinta-600); padding: var(--e-6) var(--e-5); }
.caja-auth h2 { color: var(--papel-50); font-size: var(--t-34); }
.lista-shell { list-style: none; margin: var(--e-5) 0 0; padding: 0; font-family: var(--f-dato); font-size: var(--t-13); color: #8F887E; line-height: 2.1; }

.cartel { position: relative; background: var(--naranja-500); color: var(--papel-50); overflow: hidden; padding: var(--e-7) var(--e-6) var(--e-8); }

.cartel .fondo26 {
  position: absolute;
  top: -12px; left: 0; right: 0;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(110px, 17vw, 220px);
  letter-spacing: -0.04em;
  line-height: 1;
  color: rgba(0, 0, 0, 0.09);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.cartel .contenido {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--e-7);
  align-items: center;
  padding-top: var(--e-9);
}

.cartel h2 { font-size: var(--t-88); font-weight: 800; letter-spacing: -0.045em; line-height: 0.9; text-transform: uppercase; margin-bottom: var(--e-4); }

.sello {
  display: inline-block;
  background: var(--tinta-900);
  color: var(--papel-50);
  font-family: var(--f-dato);
  font-size: var(--t-12);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: var(--e-2) var(--e-4);
  margin-bottom: var(--e-4);
}

.tarjeta-cartel {
  position: relative;
  background: var(--papel-50);
  color: var(--tinta-900);
  padding: var(--e-5);
  box-shadow: var(--sombra-dura);
}

[data-tema="oscuro"] .tarjeta-cartel { box-shadow: 12px 12px 0 var(--tinta-900); }
.tarjeta-cartel .sec { color: var(--tinta-400); }

.pie-panel {
  margin: var(--e-6) 0 0;
  padding-top: var(--e-4);
  border-top: 1px solid var(--linea);
}

.pie-panel .copiar {
  border: 0;
  background: none;
  padding: 0;
  min-height: var(--toque-min);
  font-family: var(--f-dato);
  font-size: var(--t-12);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-sec);
  cursor: pointer;
}

.pie-panel .copiar:hover { color: var(--acento-texto); }

/* ---------- responsivo ---------- */

@media (max-width: 1024px) {
  .heroe .malla { grid-template-columns: 1fr; gap: var(--e-6); }
  .retos { grid-template-columns: 1fr; }
  .retos-lista { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--linea); }
  .reto-tab { border-bottom: 0; border-right: 1px solid var(--linea-suave); min-width: 210px; }
  .reto-panel { padding: var(--e-5); }
  .faq { grid-template-columns: 1fr; }
  .cuerpo-panel { grid-template-columns: 1fr; }
  .columna-lateral { border-right: 0; border-bottom: 1px solid var(--linea); }
  .lateral { flex-direction: row; flex-wrap: wrap; }
  .extra-lateral { flex: none; }
  .aviso { margin-top: 0; width: 100%; }
  .equipo-lateral { width: 100%; margin-top: 0; }
}

@media (max-width: 860px) {
  .doble, .terminal .cuerpo, .cartel .contenido, .pasos { grid-template-columns: 1fr; }
  .doble > div + div, .terminal .cuerpo > div + div { border-left: 0; border-top: 1px solid var(--linea); }
  .terminal .cuerpo > div + div { border-top-color: var(--tinta-600); }
  .doble > div { padding: var(--e-5); }
  .terminal .cuerpo > div { padding: var(--e-5); }
  .paso-card { border-left: 0; border-top: 1px solid var(--linea); padding-inline: 0; }
  .paso-card:first-child { border-top: 0; }
  .pase { grid-template-columns: 1fr; justify-items: start; }
  .siguientes { grid-template-columns: 1fr; }
  .siguientes > div { border-right: 0; border-bottom: 1px solid var(--tinta-600); padding: var(--e-3) 0; }
  .siguientes > div:last-child { border-bottom: 0; }
  .estados { grid-template-columns: 1fr; }
  .estados > div { border-left: 0; border-top: 1px solid var(--linea); }
  .estados > div:first-child { border-top: 0; }
  .agenda .fila { grid-template-columns: 1fr; gap: var(--e-1); }
  .rastro { flex-direction: column; }
  .rastro .tramo { border-left: 0; border-top: 1px solid var(--linea); }
  .rastro .tramo:first-child { border-top: 0; }
}

@media (max-width: 640px) {
  :root { --seccion-relleno: var(--e-7); }
  .wrap { padding-inline: var(--e-4); }
  .enlaces { gap: var(--e-3); }
  .enlaces a.oculta-movil { display: none; }
  .tarjeta { padding: var(--e-5) var(--e-4); }
  .confirmacion { padding: var(--e-5) var(--e-4); }
  .dos, .acciones-form { grid-template-columns: 1fr; }
  .principal-panel { padding: var(--e-4); }
  .pendientes .item { flex-direction: column; align-items: flex-start; gap: var(--e-3); }
  .cifras { flex-wrap: wrap; gap: var(--e-4); }
  .codigo { width: 132px; height: 132px; }
  .avisos { bottom: var(--e-3); }
}

/* en pantallas táctiles todo control llega al mínimo de 44 px */
@media (pointer: coarse) {
  :root { --boton-alto-sm: var(--toque-min); }
  .marca, .saltar { min-height: var(--toque-min); align-items: center; }
  [data-reiniciar] { min-height: var(--toque-min); padding-block: var(--e-3) !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .revela { opacity: 1; transform: none; }
}

@media print {
  .barra, .cinta, .avisos, .pie, .acciones, .selector { display: none !important; }
  body { background: #fff; color: #000; }
  .confirmacion { background: #fff; color: #000; }
}

/* ============================================================
   Animaciones ligadas al scroll
   Nativas con scroll-driven animations; el respaldo es .revela + IntersectionObserver.
   ============================================================ */

/* barra de avance de lectura */
.avance {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: calc(var(--z-barra) + 1);
  background: transparent;
  pointer-events: none;
}

.avance i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--acento);
  transform-origin: 0 50%;
  transform: scaleX(var(--avance, 0));
}

/* banda del video de marca */
.banda-video {
  border-bottom: 1px solid var(--linea);
  padding: var(--e-8) 0;
}

.marco-video {
  position: relative;
  border: 1px solid var(--linea);
  background: var(--superficie);
  overflow: hidden;
}

.marco-video video,
.marco-video img {
  display: block;
  width: 100%;
  height: auto;
}

.marco-video .pie-video {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  justify-content: space-between;
  align-items: center;
  padding: var(--e-3) var(--e-4);
  border-top: 1px solid var(--linea);
  font-family: var(--f-dato);
  font-size: var(--t-11);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-sec);
}

/* línea que se dibuja a lo largo de los pasos */
.pasos { position: relative; }

.pasos::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--acento);
  transform-origin: 0 50%;
  transform: scaleX(var(--dibujo, 0));
}

.paso-card { padding-top: var(--e-6); }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* el héroe se aleja al salir de pantalla */
    .heroe .malla > div:first-child {
      animation: salida-heroe linear both;
      animation-timeline: view();
      animation-range: exit -10% exit 90%;
    }

    @keyframes salida-heroe {
      to { opacity: 0.35; transform: translateY(-26px) scale(0.985); }
    }

    /* el video entra creciendo */
    .marco-video {
      animation: entrada-video linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 32%;
    }

    @keyframes entrada-video {
      from { opacity: 0; transform: scale(0.955) translateY(20px); }
      to { opacity: 1; transform: none; }
    }

    /* la rejilla de asientos se revela por columnas */
    .cupo .asientos {
      animation: barrido-asientos linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 26%;
    }

    @keyframes barrido-asientos {
      from { clip-path: inset(0 100% 0 0); }
      to { clip-path: inset(0 0 0 0); }
    }

    /* cada fila de la agenda entra desde la izquierda */
    .agenda .fila {
      animation: entrada-fila linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 85%;
    }

    @keyframes entrada-fila {
      from { opacity: 0; transform: translateX(-18px); }
      to { opacity: 1; transform: none; }
    }

    /* las tarjetas de reto y de paso se levantan al entrar */
    .paso-card, .reto-panel > h3 {
      animation: levantar linear both;
      animation-timeline: view();
      animation-range: entry 8% entry 92%;
    }

    @keyframes levantar {
      from { opacity: 0; transform: translateY(22px); }
      to { opacity: 1; transform: none; }
    }

    /* el titular del cierre se abre en horizontal */
    .cierre h2 {
      animation: abrir-cierre linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }

    @keyframes abrir-cierre {
      from { opacity: 0; letter-spacing: 0.04em; transform: translateY(18px); }
      to { opacity: 1; letter-spacing: -0.04em; transform: none; }
    }
  }
}

@media (max-width: 860px) {
  .banda-video { padding: var(--e-6) 0; }
}

@media (prefers-reduced-motion: reduce) {
  .avance { display: none; }
  .pasos::before { transform: scaleY(1); }
}

/* ============================================================
   Ajustes responsivos finos
   ============================================================ */

@media (max-width: 860px) {
  /* la línea de los pasos pasa a vertical y el texto se recorre */
  .pasos::before {
    left: 0; top: 0; bottom: 0; right: auto;
    width: 2px; height: auto;
    transform-origin: 50% 0;
    transform: scaleY(var(--dibujo, 0));
  }

  .paso-card {
    padding-left: var(--e-5);
    padding-top: var(--e-5);
    border-top: 1px solid var(--linea);
  }

  .paso-card:first-child { border-top: 0; }
}

@media (max-width: 640px) {
  /* acciones apiladas y del mismo ancho */
  .heroe .acciones { flex-direction: column; align-items: stretch; }
  .heroe .acciones .btn { width: 100%; }

  /* la cinta se queda en una línea */
  .cinta { font-size: 10px; letter-spacing: 0.1em; }
  .cinta .wrap { flex-wrap: nowrap; justify-content: center; }
  .cinta .larga { display: none; }

  /* barra superior más compacta */
  .barra .wrap { gap: var(--e-2); }
  .enlaces { gap: var(--e-3); }
  .marca .txt { font-size: 10px; letter-spacing: 0.14em; }
  .marca .sufijo { display: none; }

  /* el video vertical manda en móvil */
  .marco-video .pie-video { flex-direction: column; gap: var(--e-1); }

  /* reloj: dos por línea en pantallas angostas */
  .reloj { flex-wrap: wrap; gap: var(--e-4) var(--e-5); }
  .reloj > div { min-width: 64px; }

  /* datos del héroe: etiqueta arriba, valor abajo, sin apretar */
  .datos > .fila { flex-wrap: wrap; gap: var(--e-1) var(--e-3); }

  /* ficha del wizard */
  .ficha .fila { grid-template-columns: 92px 1fr; gap: var(--e-2); }
}

@media (max-width: 400px) {
  :root { --t-16: 15px; }
  .wrap { padding-inline: var(--e-3); }
  .asientos { grid-template-columns: repeat(auto-fill, minmax(12px, 1fr)); gap: 2px; }
  .segmentado { grid-template-columns: repeat(5, 1fr); }
  .segmentado button { font-size: var(--t-13); }
  .correo { grid-template-columns: 1fr; }
  .correo input { border-right: 1px solid var(--linea); border-radius: var(--radio); }
  .correo .dominio {
    border-top: 0;
    justify-content: flex-start;
    padding-block: var(--e-2);
    place-items: center start;
  }
  .cifras > div { padding-right: var(--e-4); margin-right: var(--e-4); }
  .selector { gap: var(--e-1); }
  .selector button { padding-inline: var(--e-2); font-size: 10px; }
  .pase { padding: var(--e-4); }
  .codigo { width: 116px; height: 116px; }
  .siguientes > div { padding-block: var(--e-3); }
}

@media (max-width: 640px) {
  /* el chip de perfil se apila: nombre arriba, acción abajo */
  .perfil { flex-wrap: wrap; row-gap: var(--e-2); }
  .perfil > span:nth-of-type(2) { flex: 1 1 auto; min-width: 0; }   /* el bloque de nombre, no el avatar */

  .perfil .cambiar {
    margin-left: 0;
    flex: 1 0 100%;
    text-align: left;
    padding-left: 52px;
    border-top: 1px solid var(--linea-invertida);
    padding-top: var(--e-2);
  }
}

/* el aviso duplicado del panel solo existe en móvil */
.principal-panel .aviso-movil { display: none; }

@media (max-width: 640px) {
  /* barra del panel: el usuario ya aparece dentro del marco */
  .barra .enlaces > .mono { display: none; }

  /* cabecera del marco en una línea */
  .marco .top { gap: var(--e-2); }
  .marco .top .usuario span:first-child { white-space: nowrap; }

  /* navegación lateral: una sola tira deslizable */
  .lateral {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--e-2);
    padding: var(--e-3);
    scrollbar-width: none;
  }

  .lateral::-webkit-scrollbar { display: none; }
  .lateral a { white-space: nowrap; padding-inline: var(--e-3); }

  /* el aviso sale de la tira y se coloca debajo; el equipo y su asesor
     bajan enteros, que en el teléfono también hay que verlos */
  .extra-lateral { padding: 0 var(--e-3); }
  .extra-lateral .aviso { display: none; }
  .equipo-lateral { padding-bottom: var(--e-3); }

  .principal-panel .aviso-movil {
    display: block;
    border-left: 3px solid var(--acento);
    background: var(--acento-fondo);
    padding: var(--e-3) var(--e-4);
    font-size: var(--t-14);
    margin-bottom: var(--e-4);
  }
}


@media (max-width: 360px) {
  /* a 320 px la barra solo conserva marca, tema y la acción principal */
  .enlaces > a:not(.btn):not(.chip-perfil) { display: none; }
  .chip-perfil .nom { display: none; }
  .chip-perfil { padding-right: 3px; }
  .btn.sm { padding-inline: var(--e-3); font-size: 10px; }
  .marca .sq { width: 11px; height: 11px; }
  .tema { width: var(--toque-min); }
  .segmentado button { font-size: var(--t-12); }
  .rastro .tramo { padding: var(--e-3) var(--e-4); font-size: var(--t-13); }
}

/* si el navegador bloqueó el arranque automático, el video invita a tocarlo */
.marco-video video[data-toque="si"] { cursor: pointer; }

.marco-video video[data-toque="si"] + .pie-video::after {
  content: "Toca el video para reproducirlo";
  color: var(--acento-texto);
}

/* ---------- equipos: integrantes, código y enlace de invitación ---------- */

.segmentado.dos-op { grid-template-columns: 1fr 1fr; }

.integrantes {
  list-style: none;
  margin: var(--e-4) 0 var(--e-5);
  padding: 0;
  border: 1px solid var(--linea);
}

.integrante {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--linea);
}

.integrante:last-child { border-bottom: 0; }
.integrante b { display: block; font-size: var(--t-14); }
.integrante .mono {
  display: block;
  font-size: var(--t-12);
  text-transform: none;          /* @usuario va tal cual lo escribe GitHub */
  letter-spacing: 0.02em;
}

.integrante .av {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: var(--tinta-700);
  color: var(--papel-50);
  font-family: var(--f-dato);
  font-size: var(--t-11);
}

.invitacion,
.mentor-equipo {
  border: 1px solid var(--linea);
  background: var(--superficie-alta);
  padding: var(--e-4);
  margin-bottom: var(--e-4);
}

.mentor-equipo .l {
  font-family: var(--f-dato);
  font-size: var(--t-11);
  color: var(--texto-sec);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--e-2);
}

.mentor-equipo .integrante { padding: 0; border-bottom: 0; }
.mentor-equipo .integrante .av { background: var(--acento); }
.mentor-equipo .ayuda { margin: var(--e-2) 0 0; }

.invitacion .l {
  font-family: var(--f-dato);
  font-size: var(--t-11);
  color: var(--texto-sec);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--e-2);
}

.codigo-equipo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
}

.codigo-equipo .dato {
  font-family: var(--f-dato);
  font-size: var(--t-21);
  letter-spacing: 0.22em;
  color: var(--acento-texto);
}

.invitacion .ayuda { word-break: break-all; }

.invitacion .ayuda .mono { text-transform: none; letter-spacing: 0.02em; }

.invitacion-caja { padding: var(--e-5); }
.invitacion-caja h2 { margin: 0 0 var(--e-3); }
.invitacion-caja p { margin: 0 0 var(--e-4); color: var(--texto-sec); }
.invitacion-caja .acciones { margin-top: var(--e-5); }

/* ============================================================
   Panel de la organización · admin.html
   Tres listas —retos, asesores, equipos— sobre el mismo marco del panel del
   participante. Nada de tablas de verdad: en el teléfono una tabla de cinco
   columnas se sale de la pantalla, y aquí cada fila se apila sola.
   ============================================================ */

.bloque-admin { margin-bottom: var(--e-7); scroll-margin-top: calc(var(--barra-alto) + var(--e-5)); }

.bloque-admin > .cab {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--linea);
  margin-bottom: var(--e-4);
}

.bloque-admin > .cab h2 {
  font-size: var(--t-21);
  margin: 0;
}

.bloque-admin > .cab .mono { color: var(--texto-sec); }

/* ---------- filas ---------- */

.fila-admin {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--e-3) var(--e-4);
  padding: var(--e-4) 0;
  border-bottom: 1px solid var(--linea-suave);
}

.fila-admin:last-child { border-bottom: 0; }

.fila-admin .quien { min-width: 0; }

.fila-admin b {
  display: block;
  font-size: var(--t-16);
  font-weight: 600;
}

.fila-admin .pie-fila {
  display: block;
  margin-top: 2px;
  font-size: var(--t-13);
  color: var(--texto-sec);
}

/* La ficha del asesor lleva foto; las de reto y equipo, no. */
.fila-admin .con-foto-fila {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-width: 0;
}

.fila-admin .av {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  background: var(--tinta-700);
  color: var(--papel-50);
  font-family: var(--f-dato);
  font-size: var(--t-12);
}

.fila-admin .mandos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  justify-self: end;
}

/* ---------- estado liberado / cerrado ---------- */

.marca-estado {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-family: var(--f-dato);
  font-size: var(--t-11);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px var(--e-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  color: var(--texto-sec);
}

.marca-estado::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--texto-ter);
}

.marca-estado[data-abierto="si"] {
  color: var(--exito);
  border-color: var(--exito);
  background: var(--exito-fondo);
}

.marca-estado[data-abierto="si"]::before { background: var(--exito); }

/* ---------- selector de asesor ---------- */

.elige-asesor {
  font-family: var(--f-texto);
  font-size: var(--t-14);
  height: var(--boton-alto-sm);
  min-width: 190px;
  max-width: 100%;
  padding: 0 var(--e-3);
  color: var(--texto);
  background: var(--superficie-alta);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}

.elige-asesor:hover { border-color: var(--texto); }
.elige-asesor[data-vacio="si"] { border-color: var(--acento-borde); }

/* ---------- vacíos y avisos ---------- */

.vacio-admin {
  margin: 0;
  padding: var(--e-5) 0;
  color: var(--texto-sec);
  font-size: var(--t-14);
}

.sin-permiso {
  max-width: 520px;
  margin: var(--e-9) auto;
  text-align: center;
}

.sin-permiso h1 { font-size: var(--t-26); margin: 0 0 var(--e-3); }
.sin-permiso p { color: var(--texto-sec); margin: 0 0 var(--e-5); }

@media (max-width: 760px) {
  .fila-admin {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .fila-admin .mandos { justify-self: start; }
  .elige-asesor { width: 100%; min-width: 0; }
}

/* ---------- retos que la organización todavía no libera ----------
   Se ven, se leen y se apagan: esconderlos haría pensar que el hackathon
   tiene dos retos y no cuatro, y la agenda ya anuncia los cuatro. */

.reto-tab[data-cerrado="si"] { opacity: 0.55; }
.reto-tab[data-cerrado="si"][aria-selected="true"] { opacity: 1; }

.reto-panel .marca-estado { margin-bottom: var(--e-3); }

.opcion[data-cerrado="si"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.opcion[data-cerrado="si"]:hover { border-color: var(--linea); }

/* ---------- enlace al Discord ----------
   El pie no tenía enlaces: hasta hoy eran dos rótulos sueltos. El del Discord
   se subraya para que se lea como lo que es, sin robarle peso al contenido. */

.pie .discord {
  color: var(--texto-sec);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--linea);
}

.pie .discord:hover {
  color: var(--acento-texto);
  text-decoration-color: currentColor;
}

/* Sobre el naranja del cierre, el mismo enlace en tinta: el botón oscuro ya
   se lleva la atención y este renglón va debajo, como apoyo. */
.cierre-discord {
  margin: var(--e-4) 0 0;
  font-size: var(--t-14);
}

.cierre-discord a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* El pase vive sobre tinta: el enlace toma el naranja que se lee ahí. */
.siguientes .v a {
  color: var(--naranja-400);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- patrocinadores ----------
   Muro de logos en el landing. La rejilla se dibuja con gap de 1 px sobre el
   color de línea: mismas reglas de 1 px que separan al resto del sitio, sin
   sumar bordes dobles. La celda se queda en papel en los dos temas porque el
   logo trae su propio color y no puede invertirse. */

.patrocinadores { border-top: 1px solid var(--linea); padding-top: var(--e-2); }

.patrocinadores .nivel {
  font-family: var(--f-dato);
  font-size: var(--t-12);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-sec);
  margin: var(--e-6) 0 var(--e-3);
}

.patrocinadores .nivel:first-child { margin-top: var(--e-4); }

.muro {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
}

.muro .celda {
  display: grid;
  place-items: center;
  background: var(--patrocinio-celda);
  padding: var(--e-5) var(--e-4);
  min-height: 116px;
}

.muro img { width: 100%; max-width: 208px; height: auto; display: block; }

/* el principal ocupa el doble de aire; el de apoyo, la mitad */
.muro.grande { grid-template-columns: 1fr; }
.muro.grande .celda { min-height: 168px; }
.muro.grande img { max-width: 300px; }

.muro.chico { grid-template-columns: repeat(4, 1fr); }
.muro.chico .celda { min-height: 96px; }
.muro.chico img { max-width: 160px; }

.nota-patrocinio { margin: 0; }

.patro-cta {
  margin: var(--e-6) 0 0;
  font-size: var(--t-14);
  color: var(--texto-sec);
  max-width: 58ch;
}

.patro-cta a {
  color: var(--acento-texto);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 860px) {
  .muro, .muro.chico { grid-template-columns: repeat(2, 1fr); }
  .muro .celda { min-height: 104px; }
}

@media (max-width: 480px) {
  .muro { grid-template-columns: 1fr; }
  .muro.chico { grid-template-columns: repeat(2, 1fr); }
  .muro.chico img { max-width: 132px; }
  .muro.grande .celda { min-height: 136px; }
}

/* ---------- repositorio del equipo ----------
   La dirección va en su propio renglón bajo el nombre del equipo: durante las
   demos se abre desde ahí, y una dirección larga no debe empujar los mandos
   de la fila. */

.fila-admin .repo-fila {
  font-family: var(--f-dato);
  font-size: var(--t-12);
  overflow-wrap: anywhere;
}

.fila-admin .repo-fila[data-vacio="si"] { color: var(--texto-ter); }

.fila-admin .repo-fila a {
  color: var(--acento-texto);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* La advertencia al pie de un bloque del panel: se lee antes de tocar el
   interruptor, no después. */
.nota-bloque {
  margin: var(--e-4) 0 0;
  font-size: var(--t-13);
  color: var(--texto-sec);
  max-width: 68ch;
}