/* ══════════════════════════════════════════════════════════════
   Ticketera — landing pública
   Paleta: la de TICKETAZO — violeta y fluor, la misma de
   /presentacion y /organizadores.

   Antes era noche / rojo / dorado cerveza / espuma. Los nombres lo
   delatan: cerveza y espuma eran de Amstel, el primer cliente, y
   quedaron de cuando la ticketera vestía un solo evento. El favicon y
   el theme-color de estas mismas páginas ya venían en violeta y
   amarillo, así que la pestaña decía una marca y el cuerpo otra.

   Los nombres de las variables siguen diciendo `--rojo` y `--dorado`
   por historia: renombrarlos toca 808 líneas y no cambia un pixel. Lo
   que importa es qué papel cumple cada uno, y está escrito al lado.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* Los tres fondos, del más hondo al más claro. Antes negros, ahora la
     rampa de violetas de comercial.css: misma marca, mismos valores. */
  --noche:#180E3A;
  --noche-2:#231550;
  --noche-3:#3A2478;

  /* EL COLOR DE ACCIÓN — lo que hay que apretar. Se llama `--rojo` por
     historia; hoy es el fluor de la marca. El texto que va encima es
     oscuro, no blanco: amarillo con blanco no se lee. */
  --rojo:#FFE24B;
  --rojo-claro:#FFF08C;
  --rojo-hondo:#C9A200;
  /* El texto ENCIMA del color de acción. Oscuro sobre el fluor; blanco
     cuando la marca de un cliente pone un acento oscuro (ver pintarMarca
     en app.js, que lo decide por la luminancia). Un token aparte porque
     `--tinta` también es el texto del panel crema y ese no puede cambiar. */
  --sobre-accion:var(--tinta);

  /* EL COLOR DE ALERTA — campo inválido, "quedan pocas", cierre urgente.
     Va aparte del de acción desde que la acción es amarilla: un error en
     amarillo se lee como aviso, y un campo mal cargado en una compra no
     es un aviso. Este rojo es el único que queda en la página, y ahora
     significa una sola cosa. */
  --alerta:#FF5A6E;

  /* El acento de detalle: foco, links de compartir, remates. Era el
     dorado cerveza; ahora es el mismo fluor, apenas hondo para que no
     compita con los botones. */
  --dorado:#FFE24B;
  --dorado-hondo:#C9A200;

  /* El crema del panel de compra, y también el color del texto sobre el
     fondo violeta. Dos trabajos con un token — por eso no se puede
     cambiar para dar vuelta el panel sin dejar el título del afiche del
     color del fondo. */
  --espuma:#F3EFE2;

  /* La superficie de tarjetas, campos y cajas dentro del cuerpo. Era
     `#fff` escrito a mano en seis reglas: con un cuerpo oscuro quedaban
     seis rectangulos blancos con texto crema encima, ilegibles. */
  --tarjeta:#fff;
  --tinta:#180E3A;

  --humo:rgba(243,239,226,.58);
  --humo-2:rgba(243,239,226,.34);
  --linea:rgba(243,239,226,.14);
  --tinta-60:rgba(24,14,58,.60);
  --tinta-40:rgba(24,14,58,.40);
  --tinta-16:rgba(24,14,58,.16);

  --display:"Big Shoulders Display","Haettenschweiler","Arial Narrow",system-ui,sans-serif;
  --texto:"Inter Tight","Inter",system-ui,-apple-system,sans-serif;
  --dato:"DM Mono","SFMono-Regular",ui-monospace,Menlo,monospace;

  --carril:1220px;
  --rail:334px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;background:var(--noche);color:var(--espuma);
  font-family:var(--texto);font-size:16px;line-height:1.5;overflow-x:hidden;
}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.92;letter-spacing:.01em;text-wrap:balance}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit}
:focus-visible{outline:2px solid var(--dorado);outline-offset:3px;border-radius:2px}
[hidden]{display:none !important}

.carril{width:100%;max-width:var(--carril);margin:0 auto;padding:0 20px}

/* ─── barra ─── */
.barra{position:sticky;top:0;z-index:60;background:color-mix(in srgb, var(--noche) 86%, transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--linea)}
.barra-in{display:flex;align-items:center;gap:12px;height:56px}
.marca-logo{height:30px;width:auto;max-width:190px;object-fit:contain;display:block}
.marca-txt{font-family:var(--display);font-size:20px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marca-txt b{color:var(--rojo);font-weight:800}
/* La fecha se esconde en pantallas angostas. Con el logo y el nombre del
   evento al lado, en 375px no entran los tres y el que se corta es el
   nombre —"DISTRITO FER…"—, que es el que menos se puede adivinar.

   Y no se pierde nada: en /orden la misma fecha está dos centímetros más
   abajo, en "Puertas", y en la página del evento está en los datos del
   afiche. Era el dato repetido de los tres. */
.barra-fecha{margin-left:auto;font-family:var(--dato);font-size:12px;color:var(--humo);white-space:nowrap;display:none}
@media (min-width:560px){ .barra-fecha{display:block} }

/* El logo de TICKETAZO en la barra del evento, y el único link para volver
   a la cartelera. Mismos valores que en portada.css y comercial.css: el
   "-azo" en fluor es toda la identidad que hace falta.

   El relleno vertical no se ve — existe para que el link mida 44px de alto
   y se pueda tocar con el pulgar. */
.logo{
  font-family:var(--display);font-weight:900;font-stretch:118%;
  font-size:19px;letter-spacing:-.012em;text-transform:uppercase;
  line-height:1;display:inline-block;padding:12px 0;
  color:var(--espuma);text-decoration:none;flex:0 0 auto;
}
.logo span{color:var(--dorado)}
.logo:hover span{color:var(--rojo-claro)}

/* La divisoria entre la marca del sitio y el nombre del evento. Un filo y
   no un punto: el punto se lee como parte de alguno de los dos nombres. */
.barra-sep{
  width:1px;height:20px;background:var(--linea);flex:0 0 auto;
  display:none;
}
@media (min-width:520px){ .barra-sep{display:block} }

.chapita{width:26px;height:26px;position:relative;flex:0 0 auto}
.chapita i{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(var(--rojo) 0deg 11deg, transparent 11deg 17.14deg)}
.chapita b{position:absolute;inset:13%;border-radius:50%;background:radial-gradient(circle at 34% 28%, #FFF3A8, var(--rojo) 52%, var(--rojo-hondo));box-shadow:inset 0 -2px 4px rgba(0,0,0,.45)}

/* ─── hero ─── */
/* overflow:hidden porque ::before se extiende un 10% por cada lado y eso
   ensanchaba el documento 73px: la página quedaba scrolleada de costado al
   llegar al último paso. */
.hero{position:relative;overflow:hidden;padding:clamp(40px,8vw,92px) 0 0;isolation:isolate;transition:opacity .3s ease}
.hero.compacto{padding-top:clamp(24px,4vw,44px)}
.hero.compacto .titulo{font-size:clamp(38px,7vw,74px)}
.hero.compacto .bajada,.hero.compacto .datos{display:none}
.hero.compacto .eyebrow{margin-bottom:10px}
.hero::before{
  content:"";position:absolute;inset:-20% -10% 30%;z-index:-1;
  background:
    radial-gradient(46% 52% at 22% 34%, color-mix(in srgb, var(--dorado) 20%, transparent), transparent 68%),
    radial-gradient(40% 46% at 82% 16%, rgba(126,74,224,.30), transparent 70%);
  filter:blur(8px);
}
.eyebrow{font-family:var(--dato);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--dorado);display:flex;align-items:center;gap:10px;margin-bottom:16px}
.eyebrow::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,var(--dorado-hondo),transparent)}
.titulo{font-size:clamp(50px,13vw,158px);letter-spacing:-.012em;margin:0;transition:font-size .3s ease}
.titulo .l1{display:block;color:var(--espuma)}
.titulo .l2{display:block;color:var(--rojo);text-shadow:0 0 34px color-mix(in srgb, var(--rojo) 45%, transparent)}
/* La marca de título (0104, Bowie y BurTown): la casa es el título y la
   noche va debajo, de subtítulo. Con los dos renglones del mismo tamaño
   "CRUSH" le peleaba el lugar a "BOWIE", que es lo que vende. En em, para
   que achique junto con el título cuando el hero se compacta. */
.titulo.con-marca .l2{font-size:.4em;line-height:1;margin-top:.22em;letter-spacing:.02em}
.bajada{max-width:48ch;margin-top:20px;color:var(--humo);font-size:clamp(15px,1.6vw,18px)}
.datos{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:24px;font-family:var(--dato);font-size:13px;color:var(--humo)}
.datos span b{color:var(--espuma);font-weight:500}
.hero .carril{padding-bottom:48px}
.hero.compacto .carril{padding-bottom:26px}
/* El borde entre el afiche y el cuerpo. `color` es el del panel de abajo,
   y los dibujos lo heredan con currentColor: antes tenían el crema escrito
   a mano y en un evento con marca propia quedaba una franja de otro color
   flotando entre dos secciones que sí habían cambiado. */
.borde-cuerpo{display:block;width:100%;height:clamp(40px,6vw,74px);margin-bottom:-1px;color:var(--espuma)}
.borde-picado{display:none}
.picado-rombos{fill:var(--rojo)}

/* El afiche al costado del texto. Una grilla de dos columnas: todo lo del
   hero va a la izquierda y el afiche ocupa la derecha a lo largo de las
   cuatro filas (lugar, nombre, bajada, datos). Si el afiche es más alto que
   el texto, la última fila se estira y "Compartir" baja debajo de los dos;
   si es más bajo, queda arriba y no molesta. Chico a propósito: en un
   teléfono el hero ya se comía media pantalla, y esto no puede devolvérsela. */
.hero .carril{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(16px,3vw,44px);align-items:start}
.hero .carril > *{grid-column:1}
/* Sin src todavía (el esqueleto), el afiche guarda su lugar con la
   proporción del flyer más común (4:5) y el color de los huesos. Con la
   imagen puesta manda su alto real: es más bajo que las cuatro filas de
   texto, así que eso no mueve nada. */
.hero .hero-arte:not([src]){aspect-ratio:4/5;background:rgba(246,241,228,.13);box-shadow:none}
.hero .hero-arte{
  grid-column:2;grid-row:1 / span 4;align-self:start;
  width:clamp(92px,24vw,230px);height:auto;max-height:min(62vw,410px);
  object-fit:cover;object-position:top;border-radius:6px;
  box-shadow:0 18px 44px rgba(0,0,0,.5);
}
/* Un link vestido de texto, no un botón más: la acción del hero es bajar a
   comprar. 44px de alto por el dedo, y el margen negativo devuelve lo que
   ese alto le agregaría al hero. */
.hero-compartir{
  grid-column:1 / -1;justify-self:start;display:inline-flex;align-items:center;gap:8px;
  min-height:44px;margin:8px 0 -10px -8px;padding:0 8px;
  font-family:var(--dato);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dorado);
  transition:color .16s ease;
}
.hero-compartir svg{width:15px;height:15px;flex:0 0 auto}
.hero-compartir:hover{color:var(--espuma)}
/* El camino a las otras fechas del organizador, vestido igual que
   compartir: un link de texto, no otro botón compitiendo con "comprar".
   Va debajo y en su propio renglón (grid-column entero); el margen de
   arriba compensa el negativo que compartir deja abajo. app.js lo abre
   sólo si hay más de una fecha a la venta. */
.hero-fechas{
  grid-column:1 / -1;justify-self:start;display:inline-flex;align-items:center;
  min-height:44px;margin:14px 0 -10px -8px;padding:0 8px;
  font-family:var(--dato);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dorado);text-decoration:none;
  transition:color .16s ease;
}
.hero-fechas:hover{color:var(--espuma)}
.hero.compacto .hero-arte,.hero.compacto .hero-compartir,.hero.compacto .hero-fechas{display:none}

/* ─── esqueleto de carga ───
   Mientras la función `evento` contesta (cerca de un segundo) la página no
   está en blanco: tiene la forma de lo que va a llegar —dónde va el nombre,
   dónde las tarjetas— y un pulso suave dice que está viva. Los huesos se
   van solos cuando app.js pinta encima. Quien pidió menos movimiento ve el
   esqueleto quieto: la regla global de prefers-reduced-motion ya lo apaga,
   se repite abajo para que no dependa del orden del archivo. */
.hueso{
  display:inline-block;height:.72em;border-radius:4px;vertical-align:middle;
  background:rgba(246,241,228,.13);animation:hueso-pulso 1.3s ease-in-out infinite;
}
@keyframes hueso-pulso{50%{opacity:.4}}
.cuerpo .hueso{background:rgba(23,19,16,.09)}
.bajada .hueso{display:block;margin-top:8px;height:.8em}
.datos .hueso{height:1em}
/* El esqueleto mide lo mismo que lo que viene: el renglón del lugar, los
   datos en dos renglones y el espacio de las entradas (un tipo más las
   fases). Medido en un teléfono de 412px con LÜMEN, Nocturne y Latina; antes
   la página bajaba 116px al llegar el evento. */
.hero .eyebrow:has(> .hueso){min-height:17px}
.hero .datos:has(> .hueso){min-height:42px}
.panel[aria-busy="true"] .tipos{min-height:340px}
.tipo.esqueleto{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:104px;justify-content:center}
.tipo.esqueleto .hueso:last-child{margin-top:4px}

/* ═══ por qué acá no hay un modo oscuro para el panel ═════════
   Hubo uno: cuando el evento traía marca propia, el cuerpo se daba vuelta
   —panel oscuro, tarjetas levantadas, y el borde pasaba de espuma a papel
   picado— redefiniendo las variables sobre `.cuerpo`.

   Se sacó junto con la marca por evento (ver MARCA_POR_EVENTO en app.js).
   El panel va SIEMPRE en crema: es lo que se decidió mirándolo, y dejar el
   mecanismo escondido detrás de una condición que nunca se cumple es peor
   que no tenerlo — el que lo encuentre no va a saber si está vivo.

   Si algún día se quiere probar el panel oscuro, está entero en el git de
   este archivo, y la idea sigue siendo válida: redefinir las variables
   sobre `.cuerpo` y no tocar ninguna de las setenta y tres reglas que las
   usan. Ojo con `--espuma`, que no se puede cambiar en `:root`: ahí
   significa "el texto sobre el fondo oscuro", y moverla arriba deja el
   título del afiche del color del fondo. */

/* ─── cuerpo claro ─── */
.cuerpo{background:var(--espuma);color:var(--tinta);padding:0 0 clamp(60px,9vw,110px);min-height:60vh}

/* rail de pasos */
.pasos{
  display:flex;gap:4px;padding:22px 0 26px;
  overflow-x:auto;scrollbar-width:none;
}
.pasos::-webkit-scrollbar{display:none}
/* El degradado avisa que el rail sigue más allá del borde. Solo aparece con
   data-mas="1" (app.js) para no teñir el último paso cuando ya entra entero. */
.pasos[data-mas="1"]{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 42px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 42px),transparent);
}
.paso{
  display:flex;align-items:center;gap:9px;flex:0 0 auto;position:relative;
  padding:7px 14px 7px 8px;border-radius:999px;
  font-family:var(--dato);font-size:12px;letter-spacing:.04em;
  color:var(--tinta-40);white-space:nowrap;
  transition:background .16s ease,color .16s ease;
}
.paso .n{
  width:21px;height:21px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid currentColor;font-size:11px;line-height:1;flex:0 0 auto;
}
.paso[data-estado="hecho"]{color:var(--tinta-60);cursor:pointer}
.paso[data-estado="hecho"] .n{background:var(--tinta);color:var(--espuma);border-color:var(--tinta)}
.paso[data-estado="hecho"]:hover{background:rgba(23,19,16,.06)}
.paso[data-estado="actual"]{background:var(--tinta);color:var(--espuma)}
.paso[data-estado="actual"] .n{border-color:var(--espuma)}
.paso-sep{flex:0 0 14px;height:1px;background:var(--tinta-16);align-self:center}

/* tablero: contenido + rail */
.tablero{display:grid;grid-template-columns:minmax(0,1fr) var(--rail);gap:34px;align-items:start}
/* Un ítem de grid trae min-width:auto, así que el minmax(0,1fr) limita la
   pista pero NO al hijo: sin esto la tira de tickets estira la página entera
   y el cuerpo scrollea de costado. */

/* ─── movimiento ───
   Una idea por paso, no efectos sueltos: el panel entra desde el lado hacia
   el que vas, la pasarela se arma y los tickets salen de a uno. Todo por debajo de 400ms: esto es un checkout, no una
   presentación. */
.panel{animation:entra-adelante .3s cubic-bezier(.22,.8,.28,1) both}
[data-dir="atras"] .panel{animation-name:entra-atras}
@keyframes entra-adelante{
  from{opacity:0;transform:translate3d(18px,6px,0)}
  to{opacity:1;transform:none}
}
@keyframes entra-atras{
  from{opacity:0;transform:translate3d(-18px,6px,0)}
  to{opacity:1;transform:none}
}
.panel-cab{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.panel-cab h2{font-size:clamp(28px,4.4vw,44px)}
.panel-nota{font-family:var(--dato);font-size:12px;color:var(--tinta-40)}

.fase{display:inline-flex;align-items:center;gap:8px;background:var(--tinta);color:var(--espuma);font-family:var(--dato);font-size:11.5px;letter-spacing:.05em;padding:5px 11px;border-radius:999px;text-transform:uppercase}
.fase i{width:6px;height:6px;border-radius:50%;background:var(--dorado);box-shadow:0 0 0 3px color-mix(in srgb, var(--dorado) 25%, transparent);flex:0 0 auto}

/* Cuánto le queda a la fase. Al lado de la pastilla y no adentro: la fase es
   una etiqueta que está siempre, esto aparece sólo cuando hay una fecha de
   cierre de verdad. Y en texto plano, sin caja ni color, salvo cuando quedan
   menos de 24 horas: si todo grita, el día que hay que apurarse no se
   distingue del resto. */
.cierre{font-family:var(--dato);font-size:11.5px;color:var(--tinta-60);letter-spacing:.02em}
.cierre[data-urgente="1"]{color:var(--alerta);font-weight:500}

/* ─── tipos de entrada ─── */
.tipos{display:grid;gap:12px}
.tipo{
  display:grid;grid-template-columns:1fr auto;gap:6px 18px;align-items:center;
  border:1.5px solid var(--tinta-16);border-radius:4px;background:var(--tarjeta);
  padding:16px 18px;transition:border-color .16s ease,box-shadow .16s ease;
}
.tipo[data-activo="1"]{border-color:var(--rojo);box-shadow:0 0 0 1px var(--rojo)}
.tipo-nombre{font-family:var(--display);font-size:25px;text-transform:uppercase;line-height:1;grid-column:1}
.tipo-desc{font-size:13.5px;color:var(--tinta-60);grid-column:1;grid-row:2}
.tipo-der{grid-column:2;grid-row:1 / span 2;display:flex;align-items:center;gap:16px}
.tipo-precio{font-family:var(--dato);font-size:20px;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.tipo-precio s{display:block;color:var(--tinta-40);font-size:12.5px;font-weight:400}
.tipo-cupo{grid-column:1;grid-row:3;font-family:var(--dato);font-size:11px;color:var(--tinta-40);margin-top:4px}
.tipo-cupo.poco{color:var(--alerta)}
.tipo-cupo.agotado{color:var(--tinta-40)}

/* ─── fases de la venta (0091) ───
   Una lista, no tarjetas: no se compra desde acá, se lee. Separada de las
   entradas por una línea y en letra de dato, para que nadie la confunda
   con algo que se agrega al carrito. La que vende lleva un punto en tinta
   —no en el acento: un acento claro, como el crema de LÜMEN, sobre este
   fondo crema no se ve—; la agotada queda tachada y apagada pero entera. */
.fases-venta{margin-top:4px;padding-top:16px;border-top:1.5px solid var(--tinta-16)}
.fases-venta h3{font-family:var(--dato);font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-60);margin-bottom:6px}
.fases-venta ol{list-style:none;margin:0;padding:0}
.fases-venta li{display:grid;grid-template-columns:1fr auto;gap:3px 16px;align-items:baseline;padding:11px 0;border-bottom:1px dashed var(--tinta-16)}
.fases-venta li:last-child{border-bottom:0}
.fv-nombre{font-family:var(--display);font-size:20px;line-height:1.05;text-transform:uppercase}
.fv-precio{font-family:var(--dato);font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.fv-estado{grid-column:1 / -1;font-family:var(--dato);font-size:11.5px;letter-spacing:.03em;color:var(--tinta-60)}
.fases-venta li[data-estado="vigente"] .fv-estado{display:inline-flex;align-items:center;gap:8px;color:var(--tinta);font-weight:500}
.fases-venta li[data-estado="vigente"] .fv-estado::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tinta);box-shadow:0 0 0 3px var(--tinta-16)}
.fases-venta li[data-estado="agotada"] .fv-nombre,
.fases-venta li[data-estado="agotada"] .fv-precio,
.fases-venta li[data-estado="retenida"] .fv-nombre,
.fases-venta li[data-estado="retenida"] .fv-precio,
.fases-venta li[data-estado="cerrada"] .fv-nombre,
.fases-venta li[data-estado="cerrada"] .fv-precio{color:var(--tinta-40)}
/* Sin nada a la venta ahora (0092): la tarjeta que ocupa el lugar de las
   entradas no tiene precio ni stepper, solo dice qué pasa. */
.tipo.sin-venta{grid-template-columns:1fr;border-style:dashed}
/* "Next" va en pastilla como "Sold out", pero en el color de la marca:
   es lo que viene, no lo que se perdió. */
.fases-venta li[data-next="1"] .fv-estado{justify-self:start;padding:2px 8px;border-radius:999px;background:var(--rojo);color:var(--sobre-accion);font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:10.5px}
.fases-venta li[data-estado="agotada"] .fv-estado,
.fases-venta li[data-estado="retenida"] .fv-estado{justify-self:start;padding:2px 8px;border:1px solid var(--tinta);border-radius:999px;color:var(--tinta);font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:10.5px}

.stepper{display:flex;align-items:center;border:1.5px solid var(--tinta);border-radius:3px;overflow:hidden;flex:0 0 auto}
.stepper button{width:34px;height:34px;font-family:var(--dato);font-size:17px;line-height:1;color:var(--tinta);transition:background .14s ease}
.stepper button:hover:not(:disabled){background:var(--tinta);color:var(--espuma)}
.stepper button:disabled{color:rgba(23,19,16,.22);cursor:not-allowed}
.stepper output{width:36px;text-align:center;font-family:var(--dato);font-size:15px;font-variant-numeric:tabular-nums}

/* "Ya tenés N entradas para este evento". Un renglón, sin caja ni color de
   alerta: es un recordatorio, no una advertencia. El link tiene sus 44px. */
.ya-tenes{
  display:flex;align-items:center;flex-wrap:wrap;gap:0 14px;margin:-6px 0 12px;
  font-family:var(--dato);font-size:12px;color:var(--tinta-60);
}
.ya-tenes b{color:var(--tinta);font-weight:500}
.ya-tenes a{display:inline-flex;align-items:center;min-height:44px;color:var(--tinta);text-underline-offset:3px;white-space:nowrap}

/* ─── dudas rápidas ───
   Al pie del primer paso, después de las entradas: contestan lo que hoy se
   pregunta por WhatsApp antes de comprar. <details> nativo, sin JS, y el
   renglón entero es el blanco del dedo. */
/* Dónde queda (0086). Mismo borde superior que las dudas, así los dos
   bloques de "antes de comprar" se leen como una serie. El mapa es un
   rectángulo con las esquinas de las tarjetas; el iframe adentro no tiene
   borde propio. "Cómo llegar" es un link de texto como "Compartir": la
   acción principal de la página sigue siendo comprar. */
.ubicacion{margin-top:34px;padding-top:6px;border-top:1.5px solid var(--tinta-16)}
.ubicacion h3{font-size:22px;margin:16px 0 8px}
.ubi-lugar{margin:0 0 12px;font-size:15px;line-height:1.5;color:var(--tinta-60)}
.ubi-lugar b{display:block;color:var(--tinta);font-weight:800}
.ubi-mapa{width:100%;height:clamp(200px,42vw,300px);border-radius:6px;overflow:hidden;background:var(--tinta-16)}
.ubi-mapa iframe{display:block;width:100%;height:100%;border:0}
.ubi-llegar{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:6px 0 0 -8px;padding:0 8px;
  font-family:var(--dato);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta);text-decoration:none;transition:color .16s ease;
}
.ubi-llegar svg{width:15px;height:15px;flex:0 0 auto}
.ubi-llegar:hover{color:var(--rojo)}
.dudas{margin-top:34px;padding-top:6px;border-top:1.5px solid var(--tinta-16)}
.dudas h3{font-size:22px;margin:16px 0 4px}
.dudas details{border-bottom:1px solid var(--tinta-16)}
.dudas summary{
  display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 0;
  cursor:pointer;font-weight:500;font-size:15px;list-style:none;
}
.dudas summary::-webkit-details-marker{display:none}
.dudas summary::after{content:"+";margin-left:auto;font-family:var(--dato);font-size:18px;color:var(--tinta-40);flex:0 0 auto}
.dudas details[open] summary::after{content:"–"}
.dudas p{padding:0 0 14px;font-size:14px;line-height:1.55;color:var(--tinta-60);max-width:60ch}
/* Un link en medio de un párrafo no puede medir 44px sin partir el texto.
   El padding vertical de un elemento en línea no cambia la altura del
   renglón pero sí el área que responde al dedo. Ojo: suma al área de
   contenido de la fuente (~17px con 14px de cuerpo), no al renglón de 22:
   con 12px daba 41, con 14 da 45. */
.dudas a{color:var(--tinta);text-underline-offset:3px;padding:14px 0}

/* ─── planimetría ─── */

.form{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:640px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo.ancho{grid-column:1 / -1}
.campo span{font-family:var(--dato);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-60)}
.campo input{
  padding:12px 13px;border:1.5px solid var(--tinta-16);border-radius:3px;
  background:var(--tarjeta);color:var(--tinta);
}
.campo input:focus{border-color:var(--tinta);outline:none}
.campo input[aria-invalid="true"]{border-color:var(--alerta)}
.error{font-family:var(--dato);font-size:11px;color:var(--alerta);font-style:normal;min-height:1em}
.letra-chica{margin-top:16px;font-family:var(--dato);font-size:11px;color:var(--tinta-40);line-height:1.5}

/* "Evento para mayores de 18". Hermana de .panel-nota, pero en su propio
   renglón debajo del título (flex-basis 100% en un flex que envuelve) y un
   tono más presente: es un dato que decide si la persona sigue o no. */
.panel-cab .nota-edad{flex-basis:100%;margin-top:-6px;color:var(--tinta-60)}

/* ─── términos ───
   El casillero y su renglón son un solo blanco de 44px: se tilda tocando el
   texto. Los links adentro abren aparte y llevan su propio padding vertical
   —igual que en .dudas— para responder al dedo sin partir el renglón. */
.campo.tc{gap:4px}
.tc-fila{display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer}
.tc-fila input{
  width:22px;height:22px;margin:0;flex:0 0 auto;accent-color:var(--tinta);
  padding:0;border-radius:3px;
}
.tc-fila input[aria-invalid="true"]{outline:2px solid var(--alerta);outline-offset:2px}
.campo.tc .tc-texto{font:inherit;font-size:14px;letter-spacing:0;text-transform:none;color:var(--tinta);line-height:1.45}
.tc-texto a{color:var(--tinta);text-underline-offset:3px;padding:14px 0}

/* Ayuda por WhatsApp en los pasos 2 y 3. Un renglón de texto, no un botón:
   está para el que se trabó, no para todos. */
.ayuda-wa{margin-top:22px;font-family:var(--dato);font-size:12px;color:var(--tinta-60)}
.ayuda-wa a{display:inline-flex;align-items:center;min-height:44px;color:var(--tinta);text-underline-offset:3px}

/* Legales al pie de "listo": la misma letra chica de la referencia. */
/* Cuerpo de 11px: el área de contenido ronda los 13px, 16 de padding
   arriba y abajo lo llevan a 45. */
.legales a{color:var(--tinta-60);text-underline-offset:3px;padding:16px 0}

/* "Precargamos tus datos · No soy yo". El botón parece un link porque hace
   lo que hace un link chico —deshacer una comodidad—, pero mide 44px. */
.precargado{
  display:flex;align-items:center;flex-wrap:wrap;gap:0 4px;margin:-8px 0 8px;
  font-family:var(--dato);font-size:12px;color:var(--tinta-60);
}
.link{
  display:inline-flex;align-items:center;min-height:44px;padding:0 6px;
  font:inherit;color:var(--tinta);text-decoration:underline;text-underline-offset:3px;
}
.link:hover{color:var(--rojo)}

/* ─── pago ─── */
.pago-estado{
  border:1.5px dashed var(--tinta-16);border-radius:4px;padding:34px 24px;
  display:grid;place-items:center;gap:14px;text-align:center;min-height:230px;
}
.pago-estado h3{font-size:26px}
.pago-estado p{font-size:14.5px;color:var(--tinta-60);max-width:44ch}
.girador{
  width:34px;height:34px;border-radius:50%;
  border:3px solid var(--tinta-16);border-top-color:var(--rojo);
  animation:girar .8s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg)}}

/* ─── los pases ───
   Antes era una fila que scrolleaba de costado: con una entrada sola quedaba
   pegada a la izquierda y con media pantalla vacía al lado, y en un teléfono
   nadie descubre que hay que arrastrar. Una grilla que en un teléfono es una
   columna y en escritorio son tres: cada pase entra entero, que es como se
   le saca la captura y como se muestra en la puerta. */
/* auto-fit y no auto-fill: con una entrada sola las pistas vacías se
   derrumban y el pase queda centrado en vez de pegado a la izquierda con
   media pantalla al lado, que era justo el problema de la tira. */
.tickets{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;justify-items:center;align-items:start;
}
.pase{
  margin:0;width:100%;max-width:380px;
  background:var(--noche);border-radius:8px;
  box-shadow:0 12px 34px rgba(0,0,0,.22);
}
.pase-arte{position:relative;line-height:0;border-radius:8px 8px 0 0;overflow:hidden}
.tickets img{display:block;width:100%;height:auto}

/* El talón: la línea por donde se corta una entrada de papel. Es lo que hace
   que un flyer con un QR encima se lea como una entrada y no como una foto. */
.pase-pie{
  position:relative;display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;
  padding:14px 16px;color:var(--espuma);
  border-top:1.5px dashed rgba(246,241,228,.26);
}
.pase-pie::before,.pase-pie::after{
  content:"";position:absolute;top:-10px;width:18px;height:18px;border-radius:50%;
  background:var(--espuma);
}
.pase-pie::before{left:-9px}
.pase-pie::after{right:-9px}
.pase-tipo{font-family:var(--display);font-size:23px;text-transform:uppercase;line-height:1}
.pase-code{font-family:var(--dato);font-size:12.5px;color:var(--humo);letter-spacing:.04em}
.pase-n{margin-left:auto;font-family:var(--dato);font-size:11px;color:var(--humo-2);
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
/* La acción que importa cuando importa: parada en la puerta, con la fila
   atrás, no hay tiempo de buscar nada. */
.pase-puerta{flex:1 0 100%;min-height:48px;background:var(--rojo);color:var(--sobre-accion);text-align:center}
.pase-puerta:hover{background:var(--rojo-claro)}
.pase[data-usada="1"] .pase-arte{opacity:.62}
.pase[data-usada="1"] .pase-puerta{background:var(--noche-3);color:var(--humo)}

body.sin-rail .lienzo-col{padding-bottom:0}
.listo-acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}

/* El link a /orden/?id=… es el único camino de vuelta a las entradas si se
   cierra la pestaña sin descargar: por eso va con su propio bloque, no
   escondido en la letra chica. */
.link-recuperar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;
  padding:14px 16px;background:var(--tarjeta);border:1.5px solid var(--tinta-16);border-radius:4px;
}
.link-recuperar-titulo{margin:0 0 4px;font-family:var(--dato);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-60)}
.link-recuperar code{font-family:var(--dato);font-size:12.5px;color:var(--tinta);word-break:break-all}
.link-recuperar .btn{margin-left:auto;flex:0 0 auto;padding:9px 16px;font-size:15px}

/* El link a /mis-entradas. Va pegado al bloque del link de recuperación
   porque es la misma promesa dicha de la otra forma: eso es esta compra,
   esto son todas. */
.mias{margin-top:12px;font-family:var(--dato);font-size:12px;color:var(--tinta-60)}
.mias a{color:var(--tinta);text-underline-offset:3px}

/* ─── llegar al evento ───
   Tres cosas que no sirven hoy y sirven el día del evento: la agenda, el
   mapa y el link para el que viene con vos. Por eso van al final, después de
   guardar la entrada, y en botón plano: ninguna compite con la acción que
   importa ahora.
   min-width:0 y no el ancho del texto: un ítem flex no baja de lo que mide su
   contenido salvo que se le diga, y con "Agregar al calendario" adentro eso
   empujaba la página de costado en un teléfono angosto. */
.llegar{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.llegar .btn{flex:1 1 150px;min-width:0}

/* Un ancla vestida de botón necesita que le digan que es una caja y que no va
   subrayada; el <button> ya lo trae de fábrica. */
a.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.btn.chico{padding:10px 16px;font-size:15px}

/* ─── botones ─── */
.btn{padding:13px 20px;border-radius:3px;font-family:var(--display);font-size:19px;text-transform:uppercase;letter-spacing:.04em;transition:background .16s ease,transform .1s ease,color .16s ease}
.btn.ancho{width:100%}
.btn.primario{background:var(--rojo);color:var(--sobre-accion)}
.btn.primario:hover:not(:disabled){background:var(--rojo-claro)}
.btn.primario:active:not(:disabled){transform:translateY(1px)}
.btn.primario:disabled{background:var(--noche-3);color:var(--humo-2);cursor:not-allowed}
.btn.plano{border:1.5px solid var(--linea);color:var(--humo)}
.btn.plano:hover{border-color:var(--humo);color:var(--espuma)}
.cuerpo .btn.plano{border-color:var(--tinta-16);color:var(--tinta-60)}
.cuerpo .btn.plano:hover{border-color:var(--tinta);color:var(--tinta)}

/* ─── rail de resumen ─── */
.rail{position:sticky;top:76px;background:var(--noche);color:var(--espuma);border-radius:6px;overflow:hidden}
.rail-tirador{display:none}
.rail-cuerpo{padding:18px}
.rail-cab{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.rail-cab h3{font-size:19px;letter-spacing:.04em}
.reloj{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-family:var(--dato);font-size:12.5px;color:var(--dorado);white-space:nowrap}
.reloj.urgente{color:var(--rojo)}
.reloj i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:latir 1s steps(2,end) infinite}
@keyframes latir{50%{opacity:.25}}

.rail-lineas{display:flex;flex-direction:column;gap:2px;font-size:14px}
.rail-vacio{font-family:var(--dato);font-size:12px;color:var(--humo-2);padding:6px 0}
.rlinea{display:flex;gap:9px;align-items:baseline;padding:4px 0}
.rlinea .q{font-family:var(--dato);color:var(--humo-2);font-size:12px;min-width:2.3em;flex:0 0 auto}
.rlinea .n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlinea .v{margin-left:auto;font-family:var(--dato);font-size:13px;font-variant-numeric:tabular-nums;flex:0 0 auto}
.rlinea .x{color:var(--humo-2);font-size:15px;line-height:1;padding:0 2px;flex:0 0 auto}
.rlinea .x:hover{color:var(--rojo)}

.rail-totales{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--linea);display:flex;flex-direction:column;gap:4px}
.rail-totales div{display:flex;align-items:baseline;gap:10px}
.rail-totales dt{color:var(--humo);font-size:13.5px}
.rail-totales dd{margin:0;margin-left:auto;font-family:var(--dato);font-size:13.5px;font-variant-numeric:tabular-nums}
.rail-totales .total{margin-top:8px;padding-top:10px;border-top:1px solid var(--linea)}
.rail-totales .total dt{font-family:var(--display);font-size:21px;text-transform:uppercase;color:var(--espuma)}
.rail-totales .total dd{font-size:21px;font-weight:500}
.fee-nota{font-family:var(--dato);font-size:10.5px;color:var(--humo-2);line-height:1.45;margin-top:2px}
.rail-pie{padding:0 18px 18px}
.rail-pie .btn{margin-top:14px}
.rail-pie .btn.plano{margin-top:8px;font-size:15px;padding:9px 16px}
.rail-pie .letra-chica{color:var(--humo-2)}
/* La política de devolución: dos renglones al lado del total, sin caja. */
.rail-pie .devolucion{margin-top:10px;color:var(--humo)}
.reloj.movil{display:none}

/* ─── pie de página ───
   Sobre la noche, después del cuerpo claro. Los links miden 44px de alto. */
.pie{background:var(--noche);color:var(--humo);border-top:1px solid var(--linea)}
.pie-in{display:flex;align-items:center;flex-wrap:wrap;gap:8px 22px;min-height:64px;padding-top:8px;padding-bottom:8px}
.pie-marca{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:.08em;text-transform:uppercase;color:var(--espuma)}
.pie-links{display:flex;flex-wrap:wrap;gap:0 18px;margin-left:auto}
.pie-links a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--dato);font-size:12px;color:var(--humo);text-underline-offset:3px}
.pie-links a:hover{color:var(--espuma)}

/* ─── toast ─── */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,150%);
  z-index:200;max-width:calc(100vw - 32px);
  background:var(--espuma);color:var(--tinta);padding:12px 17px;border-radius:3px;
  font-size:14px;box-shadow:0 12px 40px rgba(0,0,0,.5);
  transition:transform .3s cubic-bezier(.2,.9,.3,1.1);
}
.toast[data-on="1"]{transform:translate(-50%,0)}

/* ══ móvil: el rail baja a hoja inferior ══ */
@media (max-width:900px){
  .tablero{grid-template-columns:minmax(0,1fr);gap:0}
  /* Abajo manda la barra fija, así que el respiro del final lo pone la
     columna de contenido y no el cuerpo: es la que tiene que dejar libre lo
     que la barra tapa. Lo que la barra mide de verdad lo publica app.js en
     --alto-barra; el respaldo de 150px es por si el JS todavía no midió. */
  .cuerpo{padding-bottom:0}
  .lienzo-col{padding-bottom:calc(var(--alto-barra,150px) + 26px)}
  body.sin-rail .lienzo-col{padding-bottom:56px}
  .rail{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:80;
    border-radius:10px 10px 0 0;border-top:2px solid var(--rojo);
    box-shadow:0 -14px 40px rgba(0,0,0,.45);
    max-height:86vh;display:flex;flex-direction:column;
  }
  .rail-tirador{
    display:flex;align-items:center;gap:10px;width:100%;
    padding:13px 18px calc(13px + env(safe-area-inset-bottom));
    text-align:left;
  }
  .rail-resumen{font-family:var(--dato);font-size:12.5px;color:var(--humo);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rail-total{margin-left:auto;font-family:var(--dato);font-size:15px;font-variant-numeric:tabular-nums;flex:0 0 auto}
  .rail-chevron{font-size:10px;color:var(--humo-2);transition:transform .2s ease;flex:0 0 auto}
  .rail[data-abierto="1"] .rail-chevron{transform:rotate(180deg)}
  .rail-tirador{padding-bottom:13px}
  .rail-cuerpo{display:none;overflow-y:auto;padding:0 18px}
  .rail[data-abierto="1"] .rail-cuerpo{display:block;border-top:1px solid var(--linea);padding-top:14px}
  .rail-pie{padding:0 18px calc(14px + env(safe-area-inset-bottom))}
  .rail-cab{display:none}
  .reloj.movil{display:inline-flex}
  .reloj.escritorio{display:none !important}
  .form{grid-template-columns:1fr}
  .leyenda{width:100%;margin-left:0;gap:10px}
  .tipo{grid-template-columns:1fr;gap:10px}
  .tipo-der{grid-column:1;grid-row:auto;justify-content:space-between}
  .tipo-precio{text-align:left}
  .tipo-cupo{grid-row:auto}

  /* Con el carrito vacío la barra se va por abajo y aparece con lo primero
     que se elige (data-vacio, app.js). visibility con retardo: sale de la
     vista y del orden de tabulación recién cuando terminó de irse, y vuelve
     al instante al mostrarse. prefers-reduced-motion la deja sin viaje. */
  .rail{transition:transform .3s cubic-bezier(.2,.8,.3,1),visibility 0s}
  .rail[data-vacio="1"]{transform:translateY(110%);visibility:hidden;transition:transform .3s ease-in,visibility 0s .3s}

  /* El pie queda debajo de la barra fija si no se le deja el lugar: el
     mismo --alto-barra que usa la columna, cero cuando la barra no está. */
  .pie{padding-bottom:calc(var(--alto-barra,0px) + env(safe-area-inset-bottom))}
  .pie-links{margin-left:0;width:100%}
}

/* ══ teléfono ═════════════════════════════════════════════════════
   Va después del bloque de 900px a propósito: si estas reglas quedaran
   arriba, cualquier selector suelto de más abajo con la misma
   especificidad las pisaría por orden de aparición. */
@media (max-width:600px){
  /* Los cuatro nombres no entran en 375px: se muestra el del paso en el que
     estás y el resto queda en su número. El span no se borra —se saca de la
     vista— para que el lector de pantalla siga leyendo "Pago, paso 3". */
  .paso:not([data-estado="actual"]) .t{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }
  .paso:not([data-estado="actual"]){padding:0;width:44px;justify-content:center;gap:0}
  .paso-sep{flex-basis:10px}

  /* El hero se comía 409px de los 812 de un teléfono y dejaba la primera
     entrada abajo de la barra: la persona llegaba por WhatsApp a comprar y
     lo primero que veía era una pantalla de afiche. Sigue siendo el afiche
     —el rojo, la espuma, el nombre grande son del evento y mandan—, pero
     ocupa lo que necesita para presentarse y no una pantalla entera. */
  .hero{padding-top:24px}
  .hero .carril{padding-bottom:14px}
  /* Un punto menos de cuerpo mete el lugar en un renglón en vez de dos. */
  .eyebrow{margin-bottom:10px;font-size:11px;letter-spacing:.16em}
  .bajada{margin-top:10px}
  .datos{margin-top:12px;gap:6px 18px;font-size:12px}
  /* Más bajo que en escritorio, pero no tanto como para que las burbujas se
     aplasten: la espuma es de la marca, no relleno. */
  .borde-cuerpo{height:28px}
  .pasos{padding:10px 0}
  .panel-cab{margin-bottom:10px}
  .tipo{padding:12px 16px;gap:8px}
}

/* ══ lo que se toca con el dedo ═══════════════════════════════════
   44px de alto mínimo. Va por pointer:coarse además de por ancho porque lo
   que define el tamaño no es la pantalla sino el dedo: una tablet apaisada
   entra en 1024px y se toca igual. Los pasos ya cumplidos son botones para
   volver, y volver con la yema en un stepper de 34px es apretar el de al
   lado. */
@media (max-width:900px), (pointer:coarse){
  .paso,.btn,.stepper button,.rlinea .x{min-height:44px}
  .stepper button{width:44px}
  .stepper output{width:42px}
  /* La × que saca una línea del resumen tenía 44px de alto y 15 de ancho:
     una franja, no un blanco. Con la yema encima se le pega al nombre de al
     lado, que no hace nada, y el que quería corregir la compra cree que la
     página no responde. */
  .rlinea .x{min-width:44px}
}

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


/* ─── pasarela simulada ───
   Se parece a un cobro real a propósito: si la demo no muestra este paso,
   nadie entiende dónde entra el fee ni por qué hay que verificar después. */
.pasarela{
  width:min(360px,100%);border:1.5px solid var(--tinta-16);border-radius:6px;
  background:var(--tarjeta);padding:20px;text-align:center;
}
.pasarela-cab{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:14px}
.pasarela-marca{font-family:var(--display);font-size:22px;text-transform:uppercase;letter-spacing:.04em}
.pasarela-monto{font-family:var(--dato);font-size:32px;font-weight:500;letter-spacing:-.02em}
.pasarela-a{font-size:13px;color:var(--tinta-60);margin-top:2px}
.pasarela-qr{display:grid;place-items:center;min-height:150px}
.pasarela-qr canvas{border-radius:2px}
.pasarela-ref{font-family:var(--dato);font-size:11px;color:var(--tinta-40);margin-top:12px}


/* el número del paso actual crece una vez al llegar */
.paso[data-estado="actual"] .n{animation:paso-llega .34s cubic-bezier(.2,.9,.3,1.4) both}
@keyframes paso-llega{
  0%{transform:scale(.7);opacity:.4}
  60%{transform:scale(1.14)}
  100%{transform:scale(1);opacity:1}
}


/* la pasarela se arma: primero la tarjeta, después el QR */
.pasarela{animation:tarjeta-entra .32s cubic-bezier(.2,.8,.3,1.05) both}
@keyframes tarjeta-entra{
  from{opacity:0;transform:translateY(10px) scale(.97)}
  to{opacity:1;transform:none}
}
.pasarela-qr canvas{animation:qr-entra .4s ease .18s both}
@keyframes qr-entra{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.pasarela-instruccion{
  font-family:var(--dato);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinta-40);margin:14px 0 10px;
}

/* los tickets salen de a uno */
.tickets img{animation:ticket-entra .42s cubic-bezier(.2,.8,.3,1.05) both;
  animation-delay:calc(var(--i,0) * 70ms)}
@keyframes ticket-entra{
  from{opacity:0;transform:translateY(16px) scale(.97)}
  to{opacity:1;transform:none}
}

/* el total cambia de valor: un parpadeo mínimo para que se note */
.rail-totales .total dd{transition:color .2s ease}

/* el girador de la espera, un poco más vivo que un spinner plano */
.girador{animation:girar .8s cubic-bezier(.5,.1,.5,.9) infinite}

@media (prefers-reduced-motion:reduce){
  .panel,.paso[data-estado="actual"] .n,
  .pasarela,.pasarela-qr canvas,.tickets img{animation:none !important}
}

/* una entrada ya usada se marca, para no discutir en la puerta */
.ticket-usada{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-8deg);
  background:color-mix(in srgb, var(--noche) 86%, transparent);color:var(--espuma);
  font-family:var(--dato);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 14px;border:1.5px solid var(--rojo);border-radius:3px;
}

/* ══════════════════════════════════════════════════════════════════
   Tus entradas — /orden/?id=…
   La página que se abre después de pagar y, semanas más tarde, en la
   puerta. Tres cosas en este orden: que no quede duda de que el cobro
   salió, que el QR se escanee rápido, y que se pueda guardar.
   ══════════════════════════════════════════════════════════════════ */

/* El ancho. Esta página se escribió para el teléfono, donde el carril ES el
   ancho de la pantalla y no hacía falta decir nada. En una notebook heredaba
   los 1220px del carril y quedaba deshecha: el título y el texto cruzando
   toda la pantalla, y la entrada —que mide 380px— sola en el medio con dos
   huecos enormes a los costados.

   680px es lo que mide la cosa más grande que tiene que entrar: dos entradas
   una al lado de la otra (240 + 240 más el aire de la grilla). De paso deja
   las líneas en unos 75 caracteres, que es donde el ojo todavía encuentra el
   renglón siguiente sin tener que buscarlo. */
.entrega{max-width:680px;margin-inline:auto}

/* La cabecera sale del flex de .panel-cab: acá el orden es de arriba abajo
   —estado, qué es esto, de quién es— y no tres cosas en una línea. */
.entrega .panel-cab{display:block}
.entrega .panel-cab h2{font-size:clamp(30px,6vw,44px)}
.entrega .panel-nota{margin-top:8px;font-size:13px}

/* El acuse del cobro. Usa la misma pastilla que la fase en la página de
   venta: es el vocabulario que el comprador ya vio hace un minuto. */
.sello{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:12px;
  background:var(--tinta);color:var(--dorado);
  font-family:var(--dato);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:6px 12px;border-radius:999px;
}

/* Flex y no una grilla de columnas fijas: los dos datos ocupan lo que miden.
   En escritorio quedan uno al lado del otro y pegados a la izquierda; en un
   teléfono el lugar largo baja solo abajo de la hora. */
.cuando{
  display:flex;flex-wrap:wrap;gap:12px 44px;margin:0 0 16px;padding:14px 16px;
  background:var(--tarjeta);border:1.5px solid var(--tinta-16);border-radius:4px;
}
.cuando > div{display:flex;flex-direction:column;gap:3px;min-width:150px;max-width:100%}
.cuando dt{font-family:var(--dato);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tinta-40)}
.cuando dd{margin:0;font-size:14.5px;font-weight:500;color:var(--tinta)}

.instruccion{margin:0 0 16px;font-family:var(--dato);font-size:12px;color:var(--tinta-60)}

/* Guardar no es descargar: en un teléfono el gesto real es compartir,
   mantener apretado o sacar captura. La nota lo dice porque la hoja del
   sistema no existe en todos lados y el gesto tampoco se adivina. */
.guardar{margin-top:22px}
.guardar .btn{border:1.5px solid var(--tinta);color:var(--tinta);min-height:48px}
.guardar .btn:hover{background:var(--tinta);color:var(--espuma)}
.guardar-nota{margin-top:10px;font-family:var(--dato);font-size:11.5px;
  color:var(--tinta-40);line-height:1.55}
.guardar-nota b{color:var(--tinta-60);font-weight:500}

/* ─── modo puerta ───
   El QR sobre el arte es la entrada que el comprador guarda; este es el que
   se escanea. Pantalla negra para que el lector no pelee con el flyer, el
   código lo más grande que entre, y nada más. */
.puerta{
  position:fixed;inset:0;z-index:300;background:var(--noche);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:calc(44px + env(safe-area-inset-top)) 18px calc(20px + env(safe-area-inset-bottom));
  text-align:center;
}
body.con-puerta{overflow:hidden}
.puerta-qr{width:min(84vw,46vh);height:auto;display:block;border-radius:6px;background:#fff}
.puerta-code{font-family:var(--dato);font-size:clamp(22px,7vw,32px);font-weight:500;
  letter-spacing:.06em;color:var(--espuma)}
.puerta-quien{font-size:13.5px;color:var(--humo)}
.puerta-nav{display:flex;align-items:center;gap:18px}
.puerta-paso{width:48px;height:48px;border:1.5px solid var(--linea);border-radius:50%;
  color:var(--espuma);font-size:26px;line-height:1}
.puerta-paso:hover{border-color:var(--espuma)}
.puerta-cuenta{font-family:var(--dato);font-size:12.5px;color:var(--humo);
  letter-spacing:.1em;text-transform:uppercase;min-width:7ch}
/* humo y no humo-2: es un consejo que hay que poder leer de reojo en la
   fila, con la pantalla ya bajada de brillo. */
.puerta-tip{font-family:var(--dato);font-size:11.5px;color:var(--humo);letter-spacing:.06em}
.puerta-x{
  position:absolute;top:calc(8px + env(safe-area-inset-top));right:10px;
  min-height:44px;padding:10px 16px;color:var(--humo);
  font-family:var(--dato);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
}
.puerta-x:hover{color:var(--espuma)}

/* ─── grupos de producto ───
   Una entrada y una mesa se compran distinto: mezclarlas en una lista sola
   hace que la de 3.000 parezca una entrada carísima. */
.grupo-cab{margin:26px 0 10px}
.grupo-cab h3{font-family:var(--display);font-size:26px;text-transform:uppercase;color:var(--tinta)}
.grupo-cab p{font-family:var(--dato);font-size:11.5px;color:var(--tinta-40);margin-top:4px}
.tipo.es-mesa{border-color:rgba(169,116,27,.45);background:linear-gradient(#fff,#FFFDF7)}
.tipo-incluye{grid-column:1;font-size:13px;color:var(--tinta-60);margin-top:2px}
.tipo-incluye b{font-family:var(--dato);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dorado-hondo);margin-right:6px}

/* ─── la cuenta del comprador (cuenta.js) ───
   En "listo" (evento.html) y en /orden. Una caja hermana de .link-recuperar:
   mismo blanco, mismo borde. Es la misma promesa —esto no se pierde— dicha
   de la forma que sí viaja entre aparatos. Los campos reusan .campo y el
   botón .btn.primario; acá sólo el armado y los 44px de toque de los links. */
.cuenta-listo{margin-top:14px;padding:16px;background:var(--tarjeta);border:1.5px solid var(--tinta-16);border-radius:4px}
.cuenta-orden{margin-top:14px}
.cuenta-txt,.cuenta-ok{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--tinta-60)}
.cuenta-ok b{font-weight:500;color:var(--tinta);word-break:break-all}
.cuenta-ok a,.cuenta-orden .mias a{display:inline-block;padding:13px 0;color:var(--tinta);text-underline-offset:3px}
.cuenta-form{display:grid;gap:12px;margin-top:14px}
/* 16px clavados en el input: abajo de eso iOS hace zoom al tocar el campo y
   deja la página corrida. La misma regla que en la portada. */
.cuenta-form .campo input{font-size:16px}
.cuenta-form .letra-chica{margin-top:0}
.cuenta-form .letra-chica a{color:var(--tinta-60);text-underline-offset:3px;padding:14px 0}
.cuenta-cambio{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0;font-family:var(--dato);font-size:12px;color:var(--tinta-60)}
.cuenta-cambio button{min-height:44px;padding:0 6px;margin-left:-6px;font:inherit;color:var(--tinta);text-decoration:underline;text-underline-offset:3px}

/* ── la invitación a la cuenta ──
   Lo que queda abajo de la entrada: una línea y un botón. El formulario se
   fue al diálogo porque el que abre este link viene a ver su QR, y dos
   campos con su nota eran media página pidiéndole otra cosa. */
.cuenta-invita{margin:0 0 10px;font-size:14px;line-height:1.5;color:var(--tinta-60)}

/* ── el diálogo ──
   Sobre el cuerpo claro, así que la caja va en papel como el resto de esta
   página y no en violeta: adentro viven .campo y .btn.primario, que están
   escritos para fondo claro. Un diálogo oscuro obligaría a dar vuelta los
   dos, o a que el formulario se viera de otro sitio. */
.dlg{
  border:0;padding:0;background:transparent;
  max-width:min(440px, calc(100vw - 32px));width:100%;
  color:var(--tinta);
}
.dlg::backdrop{background:rgba(11,10,10,.62)}
.dlg-caja{
  position:relative;background:var(--tarjeta);
  border:1.5px solid var(--tinta-16);border-radius:6px;
  padding:24px 20px 20px;
}
/* La X arriba a la derecha, con 44px de toque aunque el aspa sea chica. El
   margen negativo se los devuelve al padding para que no empuje al título. */
.dlg-x{
  position:absolute;top:6px;right:6px;
  width:44px;height:44px;line-height:44px;text-align:center;
  font-size:15px;color:var(--tinta-40);background:transparent;border:0;cursor:pointer;
}
.dlg-x:hover,.dlg-x:focus-visible{color:var(--tinta)}
.dlg-titulo{
  margin:0 34px 0 0;font-family:var(--display);font-size:22px;
  text-transform:uppercase;line-height:1.05;color:var(--tinta);
}