/* Boletería 360 · tienda — el mundo visual de cara al público.

   Los nombres son ROLES, no colores: cada evento trae su paleta en la columna
   `marca` y la página la pisa en caliente. El siguiente evento cambia de piel
   sin tocar una línea de CSS.

   Paleta por defecto: Ämara — una noche inmortal.
   Frambuesa #E83256 · vino #4A101C · granate #9C223A
   amarillo #EDB210 · crema #F4DDD5 · azul #5FA5DB

   REGLA DE ORO: el color de marca se usa POCO y FUERTE.
   La página es NOCHE —vino profundo con tipografía crema— porque esto vende
   entradas para una fiesta, y el color aparece en tres momentos contados:
     1. la cabecera del evento (el afiche o el banner),
     2. el botón que hay que tocar (frambuesa),
     3. la barra del total y el bloque de pago (la cifra en oro).
   Todo lo demás calla. Si todo grita, nada se escucha.

   EL ERROR QUE NO HAY QUE REPETIR: el fondo no puede ser la frambuesa
   saturada (#E83256). Sobre ese rojo NINGÚN color claro llega al contraste
   mínimo para leer — se probó y la página quedaba bonita y ciega. El fondo es
   vino profundo, donde el crema da 15:1, y la frambuesa se queda en el botón.
*/

:root{
  /* la noche */
  --fondo:#3A0C16;      --fondo-2:#4A101C;
  --texto:#FBF2EF;      --tenue:#D5B8B4;

  /* superficies levantadas: tarjetas que se despegan del fondo */
  --capa:#4E1522;       --capa-alta:#451220;
  --capa-borde:#7E2436; --capa-viva:#5A1926;
  --tinta:#FBF2EF;      --tinta-tenue:#D5B8B4;

  /* superficie profunda: barra del total y pago.
     MÁS oscura que la página, si no la barra se pierde contra el fondo. */
  --hondo:#24060D;      --hondo-2:#340B15;
  --hondo-linea:#6B1F30; --tenue-hondo:#E7C2B8;

  /* los golpes de color */
  --acento:#E83256;
  --accion:#E83256;     --accion-txt:#FFF4EF;
  --accion-2:#FF9BAE;   /* enlaces y precios: rosa claro, legible sobre noche */
  --confirma:#7CC0EC;   --confirma-oscuro:#BFE0F5;
  --precio:#EDB210;
  --alerta:#FF8A9B;     --alerta-lavado:#4A1220;

  /* La barra de arriba va CLARA aunque la página sea noche: es lo que la
     despega del afiche —que también es oscuro y rojo— y le da al logo un
     fondo limpio donde respirar. Tiene sus propios tokens porque no sigue
     la suerte del resto de la página. */
  --barra:#FBF2EF;      --barra-txt:#4A101C;
  --barra-tenue:#7A4450; --barra-linea:#E6CEC6;

  --r:16px;
  --sombra:0 18px 40px -28px rgba(0,0,0,.75);
  /* dark, para que los calendarios, los select y las barras de scroll que
     dibuja el navegador salgan oscuros y no dos parches blancos. */
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--texto);
  font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.55}
h1,h2,h3{font-family:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
  font-weight:800;margin:0;letter-spacing:-.035em;text-wrap:balance;line-height:1.05}
p{margin:0}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accion-2)}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--acento);outline-offset:2px}

.env{max-width:540px;margin:0 auto;padding-inline:20px}
.hint{font-size:.88rem;color:var(--tenue)}
.eyebrow{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tenue);font-weight:700}

/* ── Barra de arriba ──
   El logo del evento y los accesos. Pegada al borde superior: en cualquier
   punto del scroll se sabe de qué evento es la página y se puede volver a los
   boletos. Fondo vino sólido, porque encima pasan el afiche y las tarjetas
   claras y una barra translúcida se ensuciaría con las dos cosas. */
.topbar{position:sticky;top:0;z-index:30;background:var(--barra);
  border-bottom:1px solid var(--barra-linea)}
.topbar .env{display:flex;align-items:center;justify-content:space-between;
  gap:12px;min-height:56px;padding-block:9px}
/* En pantalla ancha la barra se alinea con el banner, no con la columna de
   lectura: el logo suelto en el medio de la nada se veía descolgado. */
@media (min-width:900px){ .topbar .env{max-width:1000px} }
.tb-marca{display:flex;align-items:center;text-decoration:none;flex:none}
.tb-logo{height:24px;width:auto;max-width:150px;display:block;object-fit:contain}
.tb-menu{display:flex;align-items:center;gap:2px;flex-wrap:nowrap}
.tb-menu a{color:var(--barra-txt);font-size:.82rem;font-weight:700;white-space:nowrap;
  text-decoration:none;padding:8px 10px;border-radius:999px;
  transition:color .15s,background .15s}
.tb-menu a:hover,.tb-menu a:focus-visible{color:var(--accion);
  background:rgba(74,16,28,.07);outline:none}

/* El botón de los tres puntos y su submenú.
   Hasta 760px los enlaces no caben en una fila junto al logo y el carrito, así
   que se pliegan detrás del botón. De 760 para arriba el botón desaparece y los
   enlaces van sueltos, que es lo que se espera en una computadora. */
.tb-mas{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  cursor:pointer;background:transparent;border:1.5px solid var(--barra-linea);
  color:var(--barra-txt);transition:color .15s,border-color .15s}
.tb-mas svg{width:20px;height:20px;fill:currentColor;display:block}
.tb-mas:hover{color:var(--accion);border-color:var(--accion)}
.topbar.abierto .tb-mas{color:var(--accion);border-color:var(--accion)}

@media (max-width:759px){
  .tb-der{position:relative}
  .tb-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:35;
    display:none;flex-direction:column;align-items:stretch;gap:0;
    min-width:200px;padding:6px;
    background:#FFFFFF;border:1px solid var(--barra-linea);border-radius:14px;
    box-shadow:0 18px 40px -18px rgba(40,8,15,.35)}
  .topbar.abierto .tb-menu{display:flex}
  .tb-menu a{padding:12px 14px;border-radius:10px;font-size:.92rem;text-align:left}
  .tb-menu a + a{border-top:1px solid var(--barra-linea)}
}
@media (min-width:760px){
  .tb-mas{display:none}
}
/* El ancla de "Boletos" no debe quedar tapada por la barra. */
#boletos{scroll-margin-top:68px}

/* ── Cabecera ──
   Un solo sello con el nombre completo adentro. Antes eran dos piezas —un
   cuadrito con "360" y el texto "360 Eventos" al lado— y el 360 salía dos veces. */
.marca{display:flex;align-items:center;gap:10px}
.sello{display:inline-block;background:var(--hondo);color:var(--accion-txt);
  border-radius:11px;padding:7px 14px;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;letter-spacing:-.02em;
  font-size:.95rem;line-height:1.2}
.hero .sello{background:rgba(255,244,239,.18);color:var(--accion-txt)}
/* Compatibilidad: si alguna pantalla vieja todavía arma marca con logo + texto. */
.marca .logo{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--hondo);color:var(--capa);
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:14px;letter-spacing:-.05em}
.marca b{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:.95rem;color:var(--texto)}
.hero .marca .logo{background:rgba(255,244,239,.2);color:var(--accion-txt)}
.hero .marca b{color:var(--accion-txt)}

/* El ÚNICO bloque de color saturado de la página. */
.hero{position:relative;overflow:hidden;isolation:isolate;
  background:var(--acento);color:var(--accion-txt)}
.hero-art{position:absolute;inset:0;z-index:-2}
.hero-art img{width:100%;height:100%;object-fit:cover}
.hero-tinte{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, rgba(74,16,28,.30) 0%, rgba(74,16,28,.72) 100%)}
.hero-sin-arte{position:absolute;inset:0;z-index:-2;
  background:radial-gradient(115% 85% at 88% 8%, rgba(74,16,28,.42) 0%, rgba(74,16,28,0) 62%),
             var(--acento)}
.hero .env{padding-block:22px 34px}
.hero h1{font-size:clamp(2.1rem,9vw,3rem);margin-top:24px;color:var(--accion-txt)}
/* Con logo, el logo ES el título; el h1 queda para lectores de pantalla. */
.hero-logo{width:min(70%,300px);height:auto;margin:28px 0 2px}
.solo-lectores{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.boleto-logo{width:min(60%,180px);height:auto;margin:2px 0 6px}

.cuando{display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  background:var(--accion-txt);color:var(--hondo);font-weight:700;font-size:.92rem;
  padding:7px 15px;border-radius:999px;letter-spacing:-.01em}
/* El color por defecto es el de papel claro, que es donde viven estas dos
   líneas en casi todas las pantallas (ficha del afiche, página del boleto).
   Sobre el bloque de color saturado —.hero— se invierten más abajo.
   Antes el defecto era el claro y en la página del boleto el lugar del evento
   salía crema sobre crema: estaba ahí pero no se leía. */
.donde{color:var(--texto);margin-top:12px;font-size:.97rem;font-weight:600}
.desc{color:var(--tenue);margin-top:10px;font-size:.94rem}
.hero .donde{color:var(--accion-txt)}
.hero .desc{color:var(--accion-txt);opacity:.88}
.mapa{display:inline-block;margin-left:6px;color:var(--accion-2);font-weight:700;
  text-decoration:none;border-bottom:2px solid rgba(156,34,58,.4);white-space:nowrap}
.mapa:hover{border-bottom-color:var(--accion-2)}
.hero .mapa{color:var(--accion-txt);border-bottom-color:rgba(255,244,239,.5)}
.hero .mapa:hover{border-bottom-color:var(--accion-txt)}

/* ── Ficha del evento por áreas ──
   Cada área con su título chico y sus nombres en pastillas: se barre con la
   vista y se encuentra "¿va Andrea Soto?" sin leer un párrafo entero.
   En dos columnas desde 420px, que es donde entran sin apretarse. */
.areas{margin-top:18px;display:grid;gap:14px 18px;grid-template-columns:1fr}
@media (min-width:420px){
  .areas{grid-template-columns:1fr 1fr}
  .area.ancha{grid-column:1/-1}
}
.area-t{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;color:var(--accion-2);margin:0 0 7px}
.area-l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:5px}
.area-l li{background:var(--capa);border:1px solid var(--capa-borde);border-radius:999px;
  padding:4px 11px;font-size:.84rem;font-weight:600;color:var(--texto)}
.area-n{margin:7px 0 0;font-size:.79rem;color:var(--tenue);line-height:1.5}
.hero .area-t{color:var(--accion-txt);opacity:.75}
.hero .area-l li{background:rgba(255,244,239,.14);border-color:rgba(255,244,239,.3);
  color:var(--accion-txt)}
.hero .area-n{color:var(--accion-txt);opacity:.8}

/* Lo primero que se pregunta cualquiera: cuánto, y si ese es el precio de verdad. */
.desde{margin-top:18px;display:inline-block;background:rgba(74,16,28,.30);
  border:1px solid rgba(255,244,239,.35);color:var(--accion-txt);
  border-radius:999px;padding:7px 15px;font-size:.85rem;letter-spacing:-.01em;white-space:nowrap}
.desde b{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1rem}
.desde.agotado{background:var(--hondo);font-weight:700}

/* ── Portada con afiche ──
   El afiche entero, sin nada encima, y los datos debajo sobre papel claro. */
.portada{background:var(--fondo)}
.portada .marca b{color:var(--texto)}
.afiche{width:100%;height:auto;display:block}
/* En el teléfono el afiche va de borde a borde. En pantalla grande NO:
   si se estira a todo el ancho ocupa la ventana entera y el precio y el
   botón quedan fuera de la vista. Ahí se manda por alto, centrado. */
@media (min-width:600px){
  .portada{padding-bottom:6px}
  .afiche{width:auto;max-width:min(100%,420px);height:min(58vh,560px);
    margin-inline:auto;border-radius:var(--r);box-shadow:var(--sombra)}
}
/* De 900px para arriba entra el banner horizontal (la misma pieza acostada).
   Ahí sí conviene ancho: el texto del banner se lee y la cabecera no se come
   la pantalla. Debajo de 900 sigue el afiche vertical. */
@media (min-width:900px){
  .afiche.con-banner{width:min(100% - 40px,1000px);max-width:none;height:auto}
}
.ficha{padding-block:22px 4px}
.ficha-logo{width:min(56%,230px);height:auto;margin:0 0 14px}
.ficha h1{font-size:clamp(1.55rem,6vw,2rem);color:var(--texto)}
.ficha .cuando{background:var(--hondo);color:var(--accion-txt);margin-top:14px}
.ficha .donde{color:var(--texto)}
.ficha .desc{color:var(--tenue);opacity:1}
.ficha .mapa{color:var(--accion-2);border-bottom-color:rgba(156,34,58,.4)}
.ficha .desde{background:var(--fondo-2);border-color:var(--capa-borde);color:var(--texto)}
.ficha .desde.agotado{background:var(--hondo);color:var(--accion-txt)}

/* Cuándo sube el precio. Es un dato real, no un reloj de adorno. */
.etapa{margin-top:10px;font-size:.84rem;color:var(--alerta)}
.etapa b{font-weight:800}

/* El video: portada quieta y un botón. No se descarga hasta que lo toquen. */
.video{position:relative;border-radius:var(--r);overflow:hidden;background:var(--hondo);
  max-width:330px;margin-inline:auto;box-shadow:var(--sombra)}
.video video{width:100%;height:auto;display:block;aspect-ratio:9/16;object-fit:cover}
.video .play{position:absolute;inset:0;width:100%;border:0;cursor:pointer;
  background:rgba(74,16,28,.28);display:grid;place-items:center}
.video .play span{width:64px;height:64px;border-radius:50%;background:var(--acento);
  color:var(--accion-txt);display:grid;place-items:center;font-size:1.5rem;
  padding-left:5px;box-shadow:0 10px 30px -10px rgba(0,0,0,.6)}

/* ── Bloques ── */
.bloque{padding-block:26px}
.bloque h2{font-size:1.4rem;margin-bottom:4px;color:var(--texto)}
.bloque > .hint{margin-bottom:16px}

.tarjeta{background:var(--capa);color:var(--tinta);
  border:1px solid var(--capa-borde);border-radius:var(--r);padding:18px}

/* ── Localidades ── */
.locs{display:flex;flex-direction:column;gap:10px}
.loc{display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:center;
  background:var(--capa);color:var(--tinta);
  border:1.5px solid var(--capa-borde);border-radius:var(--r);
  padding:16px 18px;transition:border-color .15s,box-shadow .15s}
.loc.viva{border-color:var(--acento);box-shadow:var(--sombra)}
.loc .nom{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
  font-size:1.15rem;letter-spacing:-.025em;display:flex;flex-direction:column;gap:2px}
.loc .nom .et{font-family:inherit;font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accion-2)}
.loc .precio{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.4rem;
  letter-spacing:-.035em;color:var(--texto);font-variant-numeric:tabular-nums;
  display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.loc .precio .luego{font-family:"Instrument Sans",sans-serif;font-size:.7rem;font-weight:600;
  letter-spacing:0;color:var(--tenue)}
.loc .quedan{grid-column:1/-1;font-size:.79rem;color:var(--tenue);margin-top:2px}
.loc .quedan.pocas{color:var(--alerta);font-weight:700}
.loc .paso{grid-column:1/-1;display:flex;justify-content:flex-end;margin-top:8px}
/* La escalera de precios: cada etapa con su precio. La de hoy marcada,
   las que ya pasaron tachadas. */
.loc .escala{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.loc .pel{font-size:.71rem;font-weight:700;border:1px solid var(--capa-borde);
  border-radius:999px;padding:4px 9px;color:var(--tenue);white-space:nowrap}
.loc .pel b{font-variant-numeric:tabular-nums;font-weight:800}
.loc .pel.hoy{background:var(--fondo-2);border-color:var(--acento);color:var(--texto)}
.loc .pel.ida{opacity:.45;text-decoration:line-through}
.loc.agotada{opacity:.5}

.stepper{display:flex;align-items:center;border:1.5px solid var(--capa-borde);border-radius:12px;
  overflow:hidden;background:var(--capa-alta);color:var(--tinta)}
.loc.viva .stepper{border-color:var(--acento)}
.stepper button{background:none;border:0;padding:9px 17px;cursor:pointer;
  font-size:1.25rem;line-height:1;color:var(--tinta)}
.stepper button:hover{background:var(--fondo-2)}
.stepper button:disabled{opacity:.3;cursor:not-allowed}
.stepper span{min-width:44px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums;
  font-size:1.05rem}
.stepper.chico button{padding:7px 13px;font-size:1.1rem}
.stepper.chico span{min-width:32px;font-size:.98rem}

/* ── Carrito ──
   La bolsa de la barra de arriba con el número de boletos encima. */
.tb-der{display:flex;align-items:center;gap:6px;min-width:0}
.tb-carro{position:relative;flex:none;width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;cursor:pointer;
  background:transparent;border:1.5px solid var(--barra-linea);color:var(--barra-txt);
  transition:background .15s,color .15s,border-color .15s}
.tb-carro svg{width:21px;height:21px;display:block}
.tb-carro:hover{color:var(--accion);border-color:var(--accion)}
.tb-carro.con{background:var(--accion);border-color:var(--accion);color:var(--accion-txt)}
/* El número va con el borde del COLOR DE LA BARRA, no del fondo de la página:
   es lo que lo hace ver recortado sobre la barra clara. */
.tb-cuenta{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;
  border-radius:999px;background:var(--accion);color:var(--accion-txt);
  font-size:.72rem;font-weight:800;line-height:20px;text-align:center;
  font-variant-numeric:tabular-nums;border:2px solid var(--barra)}
.tb-carro.con .tb-cuenta{background:var(--precio);color:#3A2A00}

/* El cajón. En el teléfono sube desde abajo; de 640px para arriba entra por
   la derecha, que es donde la gente ya lo espera. */
.ca-fondo{position:fixed;inset:0;z-index:40;background:rgba(40,8,15,.55);
  opacity:0;pointer-events:none;transition:opacity .2s}
.ca-fondo.ver{opacity:1;pointer-events:auto}
.carro{position:fixed;z-index:41;background:var(--fondo);color:var(--tinta);
  display:flex;flex-direction:column;
  left:0;right:0;bottom:0;max-height:88vh;
  border-radius:20px 20px 0 0;box-shadow:0 -20px 50px -20px rgba(40,8,15,.5);
  transform:translateY(102%);transition:transform .24s ease;
  visibility:hidden}
.carro.ver{transform:none;visibility:visible}
@media (min-width:640px){
  .carro{left:auto;top:0;bottom:0;width:min(420px,92vw);max-height:none;
    border-radius:0;transform:translateX(102%);
    box-shadow:-20px 0 50px -20px rgba(40,8,15,.45)}
  .carro.ver{transform:none}
}
.ca-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1.5px solid var(--capa-borde);flex:none}
.ca-top h2{font-size:1.25rem;margin:0}
.ca-x{background:none;border:0;cursor:pointer;color:var(--tenue);font-size:1.1rem;
  width:38px;height:38px;border-radius:10px;flex:none}
.ca-x:hover{background:var(--fondo-2);color:var(--texto)}
.ca-cuerpo{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 20px 4px;flex:1}
.ca-fila{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:14px 0;border-bottom:1px solid var(--capa-borde)}
.ca-que{min-width:0;display:flex;flex-direction:column;gap:2px}
.ca-que b{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.02rem;
  letter-spacing:-.02em;color:var(--texto)}
.ca-et{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accion-2)}
.ca-uni{font-size:.8rem;color:var(--tenue)}
.ca-lado{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex:none}
.ca-suma{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.05rem;
  letter-spacing:-.03em;color:var(--texto);font-variant-numeric:tabular-nums}
.ca-cupon{padding:16px 0 20px}
.ca-pie{flex:none;padding:14px 20px 20px;border-top:1.5px solid var(--capa-borde);
  background:var(--capa-alta);padding-bottom:max(20px,env(safe-area-inset-bottom))}
.ca-linea{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:.92rem;color:var(--tenue);padding:3px 0}
.ca-linea b{color:var(--texto);font-weight:700;font-variant-numeric:tabular-nums}
.ca-linea.desc b{color:var(--accion-2)}
.ca-linea.total{margin-top:6px;padding-top:10px;border-top:1px solid var(--capa-borde);
  font-size:1rem;color:var(--texto);font-weight:700}
.ca-linea.total b{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
  font-size:1.6rem;letter-spacing:-.04em}
.ca-pie .hint{margin:6px 0 12px;font-size:.76rem}
.ca-pie .btn + .btn{margin-top:8px}
.ca-vacio{padding:42px 20px;text-align:center}
.ca-vacio p{margin:0 0 6px}
.ca-vacio .btn{margin-top:16px}
body.sin-scroll{overflow:hidden}

/* ── Avisos encima de todo ──
   Un mensaje escrito en la página se pierde; este se pone delante y se lleva
   el foco, y al cerrarlo deja el cursor en el campo que falta. */
.pop-fondo{position:fixed;inset:0;z-index:60;background:rgba(40,8,15,.6);
  display:grid;place-items:center;padding:22px;
  animation:pop-entra .16s ease}
.pop{background:var(--capa);color:var(--tinta);border-radius:20px;
  padding:26px 24px 22px;width:min(380px,100%);text-align:center;
  box-shadow:0 30px 70px -30px rgba(40,8,15,.7)}
.pop-icono{width:48px;height:48px;margin:0 auto 14px;border-radius:50%;
  display:grid;place-items:center;font-size:1.5rem;font-weight:800;line-height:1}
.pop-icono.ojo{background:var(--alerta-lavado);color:var(--alerta)}
.pop-icono.bien{background:var(--fondo-2);color:var(--accion-2)}
.pop h3{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.3rem;
  letter-spacing:-.03em;margin:0 0 8px;color:var(--texto)}
.pop p{margin:0 0 18px;color:var(--tenue);font-size:.94rem;line-height:1.55}
@keyframes pop-entra{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .pop-fondo{animation:none}
  .carro{transition:none}
}

/* ── Formulario ── */
label{display:block;font-size:.78rem;color:var(--tenue);font-weight:700;margin-bottom:6px;
  letter-spacing:.01em}
input[type=text],input[type=tel],input[type=email],input[type=number]{
  width:100%;background:var(--capa);color:var(--tinta);
  border:1.5px solid var(--capa-borde);border-radius:12px;
  padding:13px 14px;outline:none;font-size:1rem}
input:focus{border-color:var(--acento);box-shadow:0 0 0 3px rgba(232,50,86,.14)}
input::placeholder{color:#AE8B92}
.campos{display:grid;gap:14px}
@media (min-width:440px){.campos.dos{grid-template-columns:1fr 1fr}}

.cupon{display:flex;gap:8px}
.cupon input{text-transform:uppercase}
.aviso{font-size:.85rem;font-weight:700;margin-top:9px}
.aviso.si{color:var(--confirma-oscuro)} .aviso.no{color:var(--alerta)}

/* ── Botones ── */
.btn{background:var(--accion);color:var(--accion-txt);border:0;border-radius:13px;
  padding:16px 22px;font-weight:800;font-size:1.06rem;cursor:pointer;
  letter-spacing:-.015em;width:100%;transition:transform .08s,filter .15s}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.fantasma{background:transparent;border:1.5px solid var(--capa-borde);
  color:var(--texto);font-weight:700}
.btn.fantasma:hover{background:var(--fondo-2);filter:none}
.btn.turquesa{background:var(--hondo);color:var(--accion-txt)}
.btn.chico{padding:11px 16px;font-size:.9rem;width:auto;border-radius:11px;font-weight:700}

/* ── Barra fija del total ── */
.barra{position:sticky;bottom:0;z-index:20;background:var(--hondo);
  color:var(--accion-txt);padding:12px 0 max(12px,env(safe-area-inset-bottom));
  box-shadow:0 -12px 30px -22px rgba(74,16,28,.9)}
.barra .env{display:flex;align-items:center;gap:14px}
/* La cifra es un botón que abre el carrito, pero no debe parecer un botón:
   parece el total de siempre y se puede tocar. */
.barra .cifra{flex:1;min-width:0;background:none;border:0;padding:4px 0;margin:0;
  text-align:left;cursor:pointer;font:inherit;color:inherit;border-radius:10px}
.barra .cifra:disabled{cursor:default}
.barra .cifra .qué{display:block;font-size:.76rem;color:var(--tenue-hondo);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra .cifra:not(:disabled):hover .qué{color:var(--accion-txt)}
.barra .cifra .monto{display:block;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
  font-size:1.65rem;letter-spacing:-.04em;line-height:1.1;font-variant-numeric:tabular-nums;
  color:var(--accion-txt)}
.barra .btn{width:auto;flex:none;padding-inline:26px}
.barra .btn:disabled{background:var(--hondo-2);color:var(--tenue-hondo);opacity:1}

/* ── Pago ── */
.pago{text-align:center;border-radius:var(--r);padding:26px 20px;
  background:var(--hondo);color:var(--accion-txt)}
.pago .hint,.pago label{color:var(--tenue-hondo)}
.pago .monto{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
  font-size:2.9rem;letter-spacing:-.05em;line-height:1;color:var(--precio);
  font-variant-numeric:tabular-nums}
.pago img.qr{width:230px;max-width:80%;margin:18px auto 0;
  background:#fff;border-radius:14px;padding:12px}
.cuenta{display:inline-block;margin-top:14px;font-family:ui-monospace,monospace;
  font-size:1.1rem;letter-spacing:.06em;background:var(--hondo-2);color:var(--accion-txt);
  border:1px solid var(--hondo-linea);border-radius:11px;padding:11px 16px}

/* Elegir banco: dos pastillas, cada una con el color de su banco.
   El color no es decoración: es lo que hace que el que ya tiene la app
   abierta reconozca la suya de un vistazo, sin leer.

   --b     color de marca del banco (relleno cuando está elegida)
   --b-luz la versión que se lee sobre el vino oscuro (borde, texto, punto)
   --b-txt el texto encima del relleno

   Si el evento no trae colores, cae al gris de antes y todo sigue igual. */
.bancos{display:flex;gap:8px;margin:18px 0 16px;justify-content:center;flex-wrap:wrap}
/* En el teléfono cada banco ocupa su propia fila completa: los dos nombres
   juntos no entran y quedaban en dos pastillas desparejas. */
.banco{flex:1 1 100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:transparent;border:1.5px solid var(--b-luz,var(--hondo-linea));
  color:var(--b-luz,var(--tenue-hondo));
  border-radius:999px;padding:9px 16px;font-size:.86rem;font-weight:700;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s}
.banco::before{content:"";width:9px;height:9px;border-radius:50%;flex:none;
  background:var(--b-luz,currentColor)}
.banco.viva{background:var(--b,var(--accion-txt));color:var(--b-txt,var(--hondo));
  border-color:var(--b,var(--accion-txt))}
.banco.viva::before{background:currentColor;opacity:.5}
@media (min-width:520px){ .banco{flex:0 1 auto} }

/* El botón que abre la app del banco directo, sin pasar por el QR. */
.btn.deuna{display:block;background:var(--accion-txt);color:var(--hondo);
  margin-top:4px;text-decoration:none;text-align:center}

/* Las cuentas para transferir: número grande y botón de copiar al lado. */
.cuentas{margin-top:18px}
/* Cada cuenta lleva una franja del color de su banco en el filo izquierdo:
   con dos cuentas parecidas, es lo que evita transferir a la equivocada. */
.cta{background:var(--capa);border:1.5px solid var(--capa-borde);border-radius:14px;
  padding:14px 16px;color:var(--tinta);
  border-left:5px solid var(--b,var(--capa-borde))}
.cta + .cta{margin-top:10px}
.cta-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.cta-top b{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.02rem;
  letter-spacing:-.02em}
.cta-top span{font-size:.76rem;color:var(--tenue);font-weight:600}
.cta-num{display:flex;align-items:center;gap:10px;margin-top:8px;justify-content:space-between}
.cta-num .mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.22rem;
  font-weight:700;letter-spacing:.06em;word-break:break-all}

/* El titular de la cuenta. Antes iba en letra chica y gris, como una nota al
   pie; pero es el dato que el comprador compara dentro de la app del banco
   antes de dar "enviar". Va en tarjeta, con el nombre grande. */
.titular{margin-top:14px;background:var(--capa);border:1.5px solid var(--capa-borde);
  border-radius:14px;padding:13px 16px;color:var(--tinta)}
.titular .eyebrow{margin:0 0 4px}
.titular-nom{margin:0;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
  font-size:1.08rem;line-height:1.25;letter-spacing:-.02em;color:var(--tinta)}
.titular-ci{display:flex;align-items:center;gap:10px;justify-content:space-between;
  margin:8px 0 0;font-size:.88rem;color:var(--tenue)}
.titular-ci .mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.02rem;
  font-weight:700;letter-spacing:.06em;color:var(--tinta)}

.subir{display:block;border:1.5px dashed var(--capa-borde);border-radius:14px;
  padding:22px 16px;text-align:center;cursor:pointer;
  background:var(--capa);color:var(--tinta)}
.subir:hover{border-color:var(--acento)}
.subir input{display:none}
.subir .icono{font-size:1.6rem;display:block;margin-bottom:6px}

/* La reserva tiene hora de caducidad, y se ve. */
.reloj-caja{background:var(--fondo-2);color:var(--texto);border-radius:13px;
  padding:13px 16px;font-size:.92rem;margin-bottom:18px;line-height:1.45}
.reloj-caja b{color:var(--alerta);font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:1.2rem;font-weight:700;letter-spacing:.02em}

/* Antes de mandar a alguien a su app del banco, decirle con quién trata. */
.confia{margin-top:18px;border-top:1px solid var(--capa-borde);padding-top:16px}
.confia p{font-size:.87rem;line-height:1.55;color:var(--tenue)}
.confia p b{color:var(--texto)}
.confia p + p{margin-top:8px}

/* ── Estados ── */
.listo{text-align:center;padding-block:14px}
.listo .tic,.listo .reloj{width:72px;height:72px;border-radius:50%;margin:0 auto 20px;
  display:grid;place-items:center;font-size:2.1rem}
.listo .tic{background:var(--confirma);color:#08243A}
.listo .reloj{background:var(--fondo-2);color:var(--texto)}
.error{background:var(--alerta-lavado);border:1.5px solid var(--alerta);color:var(--alerta);
  border-radius:12px;padding:12px 14px;font-size:.9rem;font-weight:600}
.enlace-caja{display:flex;gap:8px;margin-top:10px}
.enlace-caja input{font-family:ui-monospace,monospace;font-size:.78rem}

/* Después de comprar: llevarse el evento y traer gente. */
.despues{display:grid;gap:10px;margin-top:14px}
@media (min-width:440px){.despues{grid-template-columns:1fr 1fr}}
.despues .btn{width:100%;text-align:center;text-decoration:none;
  display:flex;align-items:center;justify-content:center}

/* ── Código de reserva ──
   Lo único de la pantalla de confirmación que se puede dictar por teléfono o
   escribir a mano, así que va grande, monoespaciado y partido de tres en tres.
   Monoespaciado a propósito: con letra proporcional, un 1 y una I se parecen,
   y aunque el alfabeto ya excluye las letras confundibles, la forma de cada
   carácter ayuda a copiarlo bien. */
.reserva{margin-top:22px;background:var(--capa);border:1.5px solid var(--capa-borde);
  border-radius:var(--r);padding:20px 18px;text-align:center;
  border-top:5px solid var(--acento)}
.reserva .eyebrow{margin-bottom:8px}
.reserva-cod{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;
  font-size:clamp(1.5rem,7vw,2rem);letter-spacing:.1em;line-height:1.2;
  color:var(--texto);margin:0 0 14px;word-break:break-all}
.reserva .hint{max-width:42ch;margin-inline:auto}

/* ── Boleto ──
   Invertido a propósito: fondo profundo y tipografía clara. Un boleto blanco
   se lee como una factura; este se abre en la fila, de noche, y lo primero que
   tiene que decir es "fiesta". El QR se queda en blanco porque el escáner lo
   necesita, y contra el fondo oscuro salta todavía más.

   --loc es el color de la localidad (General, VIP…). Viene de la base y entra
   por el atributo style del boleto. Se usa en tres sitios y ninguno lleva
   texto encima, así que no hay riesgo de que un color deje algo ilegible: la
   franja de arriba, el aro del QR y el borde del sello. Es un refuerzo para el
   ojo en la puerta; quien decide es el escáner. */
.boleto{--loc:var(--acento);
  background:var(--hondo);color:var(--accion-txt);
  border:1px solid var(--hondo-linea);border-radius:var(--r);
  border-top:7px solid var(--loc);
  overflow:hidden;max-width:380px;margin-inline:auto;box-shadow:var(--sombra)}
/* El sello de la localidad, justo encima del QR y sobre fondo claro.
   El texto se queda en vino —legible sobre cualquier tinte— y el color de la
   localidad manda en el borde, el punto y el fondo suave. */
.sello-loc{display:inline-flex;align-items:center;gap:8px;
  background:var(--hondo-2);
  background:color-mix(in oklab, var(--loc) 22%, var(--hondo));
  border:2px solid var(--loc);color:var(--accion-txt);
  border-radius:999px;padding:6px 15px;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
  font-size:.8rem;letter-spacing:.11em;text-transform:uppercase}
.sello-loc::before{content:"";width:9px;height:9px;border-radius:50%;
  background:var(--loc);flex:none}
/* La franja de fiesta del boleto: color, no foto. Un afiche vertical
   recortado a lo ancho corta la imagen por donde más duele. */
.boleto-franja{height:10px;
  background:linear-gradient(90deg,var(--acento),var(--loc) 55%,var(--precio))}
.boleto-arte{aspect-ratio:16/9;overflow:hidden;background:var(--fondo-2)}
.boleto-arte img{width:100%;height:100%;object-fit:cover}
.boleto-top{padding:22px 20px 18px;text-align:center}
.boleto-top .nom{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
  font-size:1.28rem;letter-spacing:-.035em;line-height:1.1;color:var(--accion-txt)}
.boleto-logo{margin-inline:auto}
/* El lema: chico, en cursiva y en el amarillo de la marca. Es la línea que
   convierte un comprobante en una entrada a una fiesta. */
.boleto-top .lema{margin-top:6px;font-size:.88rem;font-style:italic;
  color:var(--precio);letter-spacing:.01em}
.perfo{position:relative;height:0;border-top:2px dashed var(--hondo-linea)}
.perfo::before,.perfo::after{content:"";position:absolute;top:-12px;width:22px;height:22px;
  border-radius:50%;background:var(--fondo)}
.perfo::before{left:-12px} .perfo::after{right:-12px}
.boleto-qr{padding:18px 20px 20px;display:grid;place-items:center;gap:12px}
/* El aro va FUERA del margen blanco del QR (el padding de 10px), así que no
   toca la zona de silencio y el escáner lo lee igual. */
.boleto-qr canvas{width:215px;height:215px;max-width:100%;image-rendering:pixelated;
  background:#fff;border-radius:12px;padding:10px;
  box-shadow:0 0 0 4px var(--loc)}
.serie{font-family:ui-monospace,monospace;font-size:.95rem;letter-spacing:.16em;
  color:var(--tenue-hondo);font-weight:700}
.boleto-pie{padding:0 20px 20px;display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.dato .k{font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tenue);font-weight:700}
.dato .v{font-size:.93rem;font-weight:600;margin-top:2px}
/* Dentro del boleto oscuro, las etiquetas y los valores se invierten. */
.boleto .dato .k{color:var(--tenue-hondo);opacity:.8}
.boleto .dato .v{color:var(--accion-txt)}
/* Por qué se anuló la compra. Se ve, no se esconde: casi siempre es algo que
   el comprador puede arreglar y volver a intentar.
   Contrastes sobre #4A1220: etiqueta 6,7:1 · texto 13,6:1. */
.motivo{background:var(--alerta-lavado);border:1.5px solid var(--alerta);
  border-radius:14px;padding:14px 16px;margin-top:18px;text-align:left}
.motivo .k{font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--alerta);font-weight:700}
.motivo .v{font-size:.92rem;font-weight:600;margin-top:4px;color:var(--texto);line-height:1.5}

.usado{background:var(--alerta-lavado);border:1.5px solid var(--alerta);color:var(--alerta);
  text-align:center;padding:11px;border-radius:12px;font-weight:700;font-size:.9rem;margin-top:12px}
.acciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:9px;max-width:380px;margin:16px auto 0}
.acciones .btn{width:100%}
.num-boleto{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tenue);font-weight:700;text-align:center;margin-bottom:10px}



/* El último bloque deja aire para que la barra fija no tape nada */
.pie{text-align:center;padding-block:30px 104px;color:var(--tenue);font-size:.79rem}

/* ══════════════════════════════════════════════════════════════════
   PANTALLA GRANDE
   En el teléfono todo vive en una columna de 540px, que es lo correcto
   ahí. En una computadora de 1900px esa misma columna deja el 70% de la
   pantalla vacío y el texto se ve diminuto: el ojo está lejos y la letra
   mide lo mismo que a 30cm del teléfono.

   Así que de 900px para arriba la TIENDA (no el formulario de pago) usa
   el ancho del banner, la letra crece, y las localidades se ponen una al
   lado de la otra. Los párrafos siguen acotados a unos 62 caracteres,
   porque una línea de 1000px no se lee: el ojo pierde el renglón al
   volver.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width:900px){
  body{font-size:17px}

  .tienda .env{max-width:1000px}

  /* Los textos largos no se estiran aunque la caja sea ancha. */
  .tienda .ficha .desc,
  .tienda .ficha .donde{max-width:62ch}
  .tienda .bloque > .hint{max-width:62ch}

  .tienda .ficha h1{font-size:2.7rem}
  .tienda .ficha .cuando{font-size:1rem;padding:9px 18px}
  .tienda .ficha .desc{font-size:1.05rem}
  .tienda .ficha .desde{font-size:.95rem;padding:9px 18px}
  .tienda .ficha .desde b{font-size:1.15rem}
  .tienda .etapa{font-size:.95rem}

  .tienda h2{font-size:1.9rem}

  /* General y VIP, una al lado de la otra: llenan el ancho y se comparan
     de un vistazo, que es justamente la decisión que hay que tomar ahí. */
  .tienda .locs{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  .tienda .loc{padding:20px 22px}
  .tienda .loc .nom{font-size:1.3rem}
  .tienda .loc .precio{font-size:1.7rem}
  .tienda .loc .pel{font-size:.76rem}

  /* El cupón y los datos del comprador siguen siendo formulario: acotados. */
  .tienda .campos{max-width:620px}

  .tienda .barra .cifra .monto{font-size:1.9rem}
  .tienda .barra .cifra .qué{font-size:.85rem}
  .tienda .barra .btn{font-size:1.1rem;padding-inline:36px}

  .tienda .video{max-width:380px}
}
@media (min-width:1280px){
  body{font-size:18px}
  .tienda .ficha h1{font-size:3.1rem}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}