/* ══════════════════════════════════════════════════════════════════
   TICKETAZO — la portada

   Marca propia, deliberadamente distinta de la de un evento. styles.css es
   la identidad de Amstel (noche negra, rojo, Big Shoulders); si la portada
   usara eso, la empresa sería indistinguible de su primer cliente y el
   segundo tendría razón en quejarse.

   Paleta: violeta de imprenta + amarillo fluor + hueso. Es el afiche
   pegado en la pared de un barrio de Santa Cruz — papel fluorescente sobre
   la noche. El violeta y no el negro porque acá conviven dos clases de
   flyer, uno negro con neón rojo y otro blanco: sobre negro el primero se
   funde y sobre papel crema el segundo desaparece. Sobre el violeta los
   dos se leen como lo que son, dos objetos pegados en la pared.

   El amarillo y no el rojo porque el rojo ya es de un cliente, y porque
   un flyer de neón rojo y un acento rojo nuestro pelean por el mismo ojo.

   ── La idea ──────────────────────────────────────────────────────
   El flyer manda: cada evento ES su imagen. Eso es la convención local y
   discutirla sería pedirle a la gente que aprenda a leer una cartelera de
   nuevo. Lo que sí se discute es lo que la convención dejó a medias: en
   las carteleras de acá la tarjeta es el flyer y un botón que dice "ver
   más", así que hay que abrir el evento para enterarse de qué día es.

   Acá la pieza es una ENTRADA: flyer arriba, troquel al medio, talón
   abajo con la fecha, el lugar y el precio. El flyer sigue ocupando la
   tarjeta y el dato viaja en el talón, que es donde en una entrada de
   papel va impreso. Una firma sola, repetida en dos tamaños: la entrada
   grande de arriba y la tira de entradas de abajo son el mismo objeto.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --tinta-0:#120A2C;    /* la noche detrás de la pared: barra y pie */
  --tinta:#180E3A;      /* la pared */
  --tinta-2:#231550;    /* el talón de la entrada */
  --tinta-3:#3A2478;    /* filos, perforación */
  --fluor:#FFE24B;      /* papel fluorescente */
  --hueso:#F3EFE2;      /* la tinta que se lee */

  --hueso-64:rgba(243,239,226,.64);
  --hueso-40:rgba(243,239,226,.40);
  --filo:rgba(243,239,226,.13);
  --canto:rgba(243,239,226,.09);

  /* Dos familias, tres papeles. Archivo (Omnibus-Type) tiene eje de ancho,
     así que el logotipo puede ir ensanchado y los nombres de evento no, sin
     traer una tercera tipografía sólo para eso. Azeret Mono es lo impreso:
     fechas, precios, códigos — lo que en una entrada de verdad sale de una
     impresora térmica. */
  --display:"Archivo","Helvetica Neue",Arial,system-ui,sans-serif;
  --mono:"Azeret Mono","SFMono-Regular",ui-monospace,Menlo,monospace;

  --carril:1200px;
  /* El margen izquierdo del contenido: la mitad del sobrante hasta el carril
     MÁS los 20px de aire que el carril lleva adentro. El riel lo usa para
     empezar exactamente donde empieza el rótulo que tiene encima; con sólo
     la mitad del sobrante quedaba 20px corrido a la izquierda, que es la
     clase de desprolijidad que se ve sin poder nombrarla. */
  --margen:max(20px, calc((100% - var(--carril)) / 2 + 20px));
  --muesca:20px;        /* el diámetro del troquel de la perforación */
  --curva:cubic-bezier(.2,.75,.3,1);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
/* La pared tiene luz. Hasta acá el fondo era un violeta parejo de arriba a
   abajo, y sobre un plano sin luz un flyer no se lee como un objeto pegado:
   flota. Dos manchas anchas y muy flojas —el amarillo del farol a la
   izquierda, el violeta frío que le contesta a la derecha— le dan un arriba
   y un abajo a la pared, y de paso el fluor de la marca deja de competir
   contra un fondo plano.

   Anclado al documento y no a la ventana (`no-repeat` con alto fijo): la luz
   está arriba de la pared y se queda ahí, así bajar por la cartelera es
   alejarse del farol. Y nada de `background-attachment:fixed`, que en el
   teléfono repinta en cada scroll y es exactamente el tipo de adorno que se
   paga en fluidez.

   El pie se queda con su color liso: es donde termina la pared. */
body{
  margin:0;color:var(--hueso);
  background:
    radial-gradient(115% 58% at 18% -6%,
      rgba(255,226,75,.085), rgba(255,226,75,0) 58%) no-repeat 0 0 / 100% 1100px,
    radial-gradient(105% 52% at 88% 2%,
      rgba(126,74,224,.20), rgba(126,74,224,0) 66%) no-repeat 0 0 / 100% 980px,
    var(--tinta);
  font-family:var(--display);font-size:16px;line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;font-family:var(--display);line-height:1;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2.5px solid var(--fluor);outline-offset:3px;border-radius:3px}

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

/* Fuera de la pantalla pero dentro del árbol: es la etiqueta que el lector
   lee y el ojo no necesita, porque el ícono y el sitio ya la dicen.
   `display:none` la sacaría también del árbol, que es lo contrario. */
.solo-lector{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* 44px medidos y no calculados de cabeza: con el relleno solo quedaba en
   43,5 — medio píxel, pero la regla de la casa no tiene comas. */
.saltar{
  position:absolute;left:-9999px;top:0;z-index:200;
  display:inline-flex;align-items:center;min-height:44px;
  background:var(--fluor);color:var(--tinta);padding:0 16px;
  font-family:var(--mono);font-size:13px;
}
.saltar:focus{left:12px;top:12px}

/* ─── el nombre ───────────────────────────────────────────────── */
.logo{
  font-family:var(--display);
  font-weight:900;font-stretch:118%;
  font-size:26px;letter-spacing:-.012em;text-transform:uppercase;
  line-height:1;display:inline-block;
  /* El relleno vertical no se ve: existe para que el único link de la barra
     mida 44px de alto y se pueda tocar con el pulgar y no con la uña. */
  padding:9px 0;
}
.logo span{color:var(--fluor)}
.logo.chico{font-size:19px;padding:0}

/* ─── barra ───────────────────────────────────────────────────── */
.barra{
  position:sticky;top:0;z-index:60;
  background:rgba(18,10,44,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--filo);
}
.barra-in{display:flex;align-items:center;justify-content:space-between;height:58px;gap:12px}
.barra-der{display:flex;align-items:center;gap:14px;min-width:0}
/* Debajo de 560px el nombre ya llena la barra y la ciudad pasa a ser un
   renglón que hay que esquivar. En el pie sigue estando. */
.barra-lugar{display:none}
@media (min-width:560px){
  .barra-lugar{
    display:block;font-family:var(--mono);font-size:10.5px;
    letter-spacing:.16em;text-transform:uppercase;color:var(--hueso-40);
  }
}

/* ─── el acceso a lo ya comprado ──────────────────────────────────
   Un boleto contorneado y la cuenta. Contorneado y no relleno, y en hueso y
   no en fluor: es la única otra cosa que se puede tocar en la barra y no
   puede pelear con el evento, que es a lo que la persona vino. El fluor se
   lo queda el número —el único dato nuevo del renglón— y el borde recién se
   enciende al tocarlo. */
.mis{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:0 13px;
  border:1px solid var(--filo);border-radius:999px;
  font-family:var(--mono);font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--hueso-64);white-space:nowrap;
  transition:border-color .2s ease,color .2s ease;
}
.mis:hover{border-color:rgba(255,226,75,.45);color:var(--hueso)}
.mis svg{
  width:16px;height:16px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;
}
.mis .sep{opacity:.45}
.mis b{font-weight:500;color:var(--fluor);font-variant-numeric:tabular-nums}
/* En un teléfono angosto el logotipo ya se lleva la mitad de la barra, y
   "MIS ENTRADAS · 2" al lado desborda o empuja el nombre. Queda el boleto y
   la cuenta, que es la forma en que se reconoce este acceso en cualquier
   aplicación; el texto no se borra, se corre fuera de la pantalla, así que
   el lector de pantalla sigue diciendo "Mis entradas · 2". */
@media (max-width:479px){
  .mis .mis-txt{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  }
  .mis .sep{display:none}
  .mis{gap:7px;padding:0 12px}
}
/* Y en la franja de en medio —donde la ciudad ya volvió pero la barra
   todavía es angosta— los dos no entran. Gana el acceso, que es un control;
   la ciudad es un rótulo y sigue estando en el pie. La clase la pone
   portada.js, que es el único que sabe si el acceso llegó a mostrarse: sin
   compras guardadas la barra queda exactamente como estaba. */
@media (max-width:719px){
  .barra-in.con-mis .barra-lugar{display:none}
}

/* ─── hero ────────────────────────────────────────────────────── */
/* Corto a propósito, y más corto que antes. Esto se abre desde el teléfono,
   casi siempre por un link de WhatsApp, y la portada existe para el que
   llega sin saber qué hay: ahora que la primera pieza es un flyer a tamaño
   de afiche, cada píxel del encabezado es un píxel que el flyer no ocupa. */
/* Los números de arriba están calculados contra una meta concreta: que el
   afiche del evento más próximo entre ENTERO en la primera pantalla de un
   teléfono. Con la barra de Safari comiendo su parte, eso son unos 700px
   útiles; el afiche mide 419 a 375px de ancho, así que al encabezado le
   quedan 260 y antes gastaba 315. De ahí salen estos paddings y no de una
   escala: en escritorio sobra pantalla y el aire vuelve casi entero. */
.hero{padding:clamp(18px,4.6vw,54px) 0 clamp(16px,3vw,30px)}
/* Los tres renglones están cortados a mano, así que el cuerpo se ata al
   ancho de la ventana y no a un piso fijo: con un piso, abajo de 400px el
   renglón más largo se parte y el título pasa a cuatro líneas mal cortadas.
   Y sin `text-wrap:balance`, que acá no ayuda — los cortes ya están
   decididos y balance sólo puede desarmarlos. */
.titulo{
  font-weight:900;font-stretch:105%;
  font-size:clamp(28px,calc(9.4vw - 4px),68px);
  letter-spacing:-.035em;line-height:.9;text-transform:uppercase;
  text-wrap:initial;
}
.titulo .l{display:block}
.titulo .fluor{color:var(--fluor)}
.bajada{
  margin-top:clamp(10px,2.6vw,16px);max-width:38ch;
  font-size:clamp(15px,2vw,19px);color:var(--hueso-64);
}

/* ─── rótulos de sección ──────────────────────────────────────── */
.rotulo{display:flex;align-items:center;gap:14px;margin-bottom:clamp(14px,2.4vw,20px)}
/* Mudo, no ausente: el rótulo se va de la pantalla cuando no separa nada
   (portada.js decide cuándo) pero el h2 se queda para quien navega por
   encabezados. Es el recorte estándar de "sólo lectores de pantalla" —
   `display:none` lo sacaría también del árbol, que es lo contrario. */
.rotulo.muda{
  position:absolute;width:1px;height:1px;margin:0;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
.rotulo h2{
  font-family:var(--mono);font-weight:500;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fluor);flex:0 0 auto;
}
.rotulo-linea{flex:1;height:1px;background:var(--filo);min-width:10px}
.rotulo-cuenta{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--hueso-40);flex:0 0 auto;
}

/* ─── buscar y filtrar ────────────────────────────────────────────
   Aparece con la cartelera larga y vive DEBAJO del afiche, nunca arriba: en
   un teléfono, un campo de búsqueda en la primera pantalla le come 60px al
   flyer, que es lo único que la persona vino a mirar. El que busca ya
   scrolleó — buscar es lo que se hace después de mirar, no antes. */
.filtros{display:flex;flex-direction:column;gap:10px;margin-bottom:clamp(18px,3vw,26px)}
.busca-caja{position:relative;display:flex;align-items:center}
.lupa{
  position:absolute;left:15px;width:17px;height:17px;pointer-events:none;
  fill:none;stroke:var(--hueso-40);stroke-width:1.8;stroke-linecap:round;
}
.busca{
  width:100%;min-height:48px;padding:0 46px;
  background:var(--tinta-2);color:var(--hueso);
  border:1px solid var(--filo);border-radius:9px;
  font-family:var(--display);
  /* 16px clavados y no una escala. Abajo de 16, iOS hace zoom solo al tocar
     el campo y deja la página corrida a la derecha con el afiche a medio
     salir de la pantalla — un desborde que no está en el CSS y aparece
     igual. Es el único número de este archivo que no se puede tocar. */
  font-size:16px;
  transition:border-color .2s ease;
}
.busca::placeholder{color:var(--hueso-40)}
.busca:focus{border-color:rgba(255,226,75,.5)}
/* La equis nativa mide 12px, la dibujan sólo algunos navegadores y no hay
   forma de agrandarla. Se apaga y se pone una de 44 que está en todos. */
.busca::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.busca-x{
  position:absolute;right:2px;
  width:44px;height:44px;display:grid;place-items:center;
  background:transparent;border:0;color:var(--hueso-40);cursor:pointer;
  transition:color .2s ease;
}
.busca-x svg{width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round}
.busca-x:hover{color:var(--hueso)}

/* Los meses se envuelven en vez de deslizarse: son dos o tres botones, y un
   carrusel horizontal para tres botones esconde el tercero detrás de un
   gesto que nadie sabe que tiene que hacer. */
.meses{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  min-height:44px;padding:0 16px;
  background:transparent;color:var(--hueso-64);
  border:1px solid var(--filo);border-radius:999px;cursor:pointer;
  font-family:var(--mono);font-weight:500;
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.chip:hover:not(.activo){border-color:var(--hueso-40);color:var(--hueso)}
/* El puesto va en fluor lleno: en una fila de botones iguales, el que está
   aplicado tiene que verse desde la otra punta de la pantalla, porque es lo
   único que explica por qué faltan tarjetas. */
.chip.activo{background:var(--fluor);color:var(--tinta);border-color:var(--fluor)}

/* De 720 para arriba los dos controles entran en un renglón. Estirado al
   ancho del carril el campo mide 1160px y deja de leerse como un buscador
   para leerse como la barra de direcciones del navegador; con tope, el
   campo y los meses son una sola tira de controles y no dos franjas.
   Los meses van pegados al campo y no empujados al canto derecho: son la
   otra mitad de la misma pregunta. */
@media (min-width:720px){
  .filtros{flex-direction:row;align-items:center;flex-wrap:wrap;gap:12px}
  .busca-caja{flex:0 1 360px}
}

/* ═══ LA ENTRADA ══════════════════════════════════════════════════
   La firma de la portada y la pieza que comparten las dos zonas: afiche,
   troquel, talón. No es decoración — es la forma del producto, y hace que
   una cartelera se lea como una tira de entradas. */
.evento,.destacado{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;
  background:var(--tinta-2);border-radius:14px;
  box-shadow:inset 0 0 0 1px var(--canto);
  transition:transform .22s var(--curva),box-shadow .22s var(--curva);
}
.evento:hover,.destacado:hover{
  transform:translateY(-5px);
  box-shadow:inset 0 0 0 1px rgba(255,226,75,.28),0 22px 46px rgba(0,0,0,.42);
}
.evento:focus-visible,.destacado:focus-visible{outline-offset:4px}

/* ── el afiche ── */
/* El contenedor de consulta va acá y no en la tarjeta: en la entrada grande
   el afiche es una fracción del ancho, y un tamaño atado al ancho de la
   pieza dejaría el nombre del papel gigante sobre un afiche angosto. */
.afiche{
  position:relative;overflow:hidden;
  aspect-ratio:4/5;background:var(--tinta-3);
  container-type:inline-size;
}
.afiche img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;
  /* `scale` y no `transform` para la llegada: son dos propiedades distintas
     y se multiplican, así que el afiche puede asentarse al cargar sin
     pelearse con el scale del hover, que sí vive en `transform`. */
  transition:opacity .42s ease,scale .58s var(--curva),
             transform .5s var(--curva),filter .3s ease;
}
.evento:hover .afiche img,.destacado:hover .afiche img{transform:scale(1.045)}

/* ── el papel ──
   Debajo del flyer, siempre. Mientras la imagen viaja es el fondo que se ve
   (y no un rectángulo gris); si la imagen no llega nunca, es lo que queda;
   y si el evento no tiene flyer, es el afiche entero. Papel rayado, como el
   pliego sin imprimir, y el día del mes de tamaño cartel: sin imagen, la
   fecha es lo único que este evento tiene para mostrar de lejos. */
.papel{
  position:absolute;inset:0;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:24px 20px;
  background:
    repeating-linear-gradient(128deg,
      transparent 0 13px, rgba(255,226,75,.055) 13px 26px),
    linear-gradient(200deg,var(--papel-a,var(--tinta-3)),var(--papel-b,var(--tinta-2)) 78%);
}
/* Arriba a la derecha y entero. Abajo chocaba con el nombre y con la raya
   fluor; y sangrado fuera del borde, el recorte dejaba a la vista media
   panza de cada cifra — que no se lee como una fecha, se lee como una
   impresión fallada. */
.papel-dia{
  position:absolute;right:14px;top:6px;
  font-weight:900;font-stretch:112%;
  font-size:120px;                    /* respaldo si no hay unidades de contenedor */
  font-size:clamp(78px,44cqi,210px);
  line-height:.78;letter-spacing:-.06em;
  color:rgba(255,226,75,.12);
  pointer-events:none;
}
.papel-nombre{
  position:relative;
  font-weight:900;font-stretch:96%;
  font-size:40px;                     /* respaldo si no hay unidades de contenedor */
  font-size:clamp(30px,15.5cqi,58px);
  line-height:.88;letter-spacing:-.032em;text-transform:uppercase;
  color:var(--hueso);
}
.papel-org{
  position:relative;
  margin-top:14px;padding-top:12px;border-top:2px solid var(--fluor);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--hueso-64);
}

/* La calcomanía va pegada en la esquina del afiche, torcida, como el
   "AGOTADO" que alguien pega sobre el cartel de la pared. */
.sello{
  position:absolute;top:14px;left:-4px;transform:rotate(-3.5deg);
  font-family:var(--mono);font-weight:500;
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  padding:6px 12px 5px;z-index:2;
}
.sello-pocas{background:var(--fluor);color:var(--tinta)}
.sello-agotado{background:var(--tinta);color:var(--hueso);border:1px solid var(--hueso-40)}
.agotado .afiche img{filter:grayscale(.85) brightness(.5)}
.agotado .papel{opacity:.55}

/* ── el troquel ──
   Alto cero: es una línea, no una banda. Las muescas son círculos del color
   de la pared centrados en los bordes; el overflow:hidden de la pieza les
   corta la mitad de afuera y lo que queda es un troquel. Al pasar el mouse
   se enciende en fluor: la entrada está por rasgarse. */
.perf{position:relative;height:0;z-index:1}
.perf::before{
  content:"";position:absolute;left:16px;right:16px;top:-1px;
  border-top:1.5px dashed rgba(243,239,226,.22);
  transition:border-color .22s ease;
}
.evento:hover .perf::before,.destacado:hover .perf::before{
  border-color:rgba(255,226,75,.55);
}
.perf i{
  position:absolute;top:0;width:var(--muesca);height:var(--muesca);
  border-radius:50%;background:var(--tinta);transform:translateY(-50%);
}
.perf .p1{left:calc(var(--muesca) / -2)}
.perf .p2{right:calc(var(--muesca) / -2)}

/* La tarjeta de la grilla se mide a sí misma (ver la consulta de contenedor
   al final del bloque). Contenedor y no media query porque lo que decide el
   tamaño del talón no es el ancho de la ventana sino el de la pieza: a
   900px de ventana la misma tarjeta mide 240 o 390 según cuántas columnas
   entren, y a 375 mide 335 o 161 según si la cartelera es corta o larga.
   Sólo la chica: la entrada grande nunca baja del umbral. */
.evento{container-type:inline-size}

/* ── el talón ── */
.talon{display:flex;flex-direction:column;padding:18px 18px 17px;flex:1}
.cuando{
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-weight:500;
  font-size:12.5px;letter-spacing:.05em;color:var(--fluor);
}
.cuando span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* "Hoy" y "Mañana", estampados. Es el mismo gesto que la calcomanía del
   afiche y por la misma razón: es lo único de la pieza que cambia todos los
   días, así que se lee como algo recién puesto encima y no como parte de la
   impresión. Va en el renglón de la fecha porque REEMPLAZA a la fecha —el
   día de la semana y el número son la cuenta que esta palabra ya hizo.
   `line-height:1` para que el relleno no engorde el renglón: con la altura
   heredada, la tarjeta de hoy quedaba tres píxeles más alta que la de al
   lado y el nombre desalineado en toda la fila. */
.cuando .ya{
  display:inline-block;vertical-align:baseline;
  background:var(--fluor);color:var(--tinta);
  padding:3px 7px;border-radius:3px;
  font-weight:500;line-height:1;letter-spacing:.1em;text-transform:uppercase;
}
/* La punta de flecha: la única señal de "esto se abre". No dice "VER MÁS"
   encima del flyer, que es lo que en las otras carteleras tapa justo la
   parte del afiche que la gente vino a mirar. */
.flecha{
  flex:0 0 auto;width:7px;height:7px;
  border-top:1.7px solid currentColor;border-right:1.7px solid currentColor;
  transform:rotate(45deg);
  transition:translate .22s var(--curva);
}
.evento:hover .flecha,.destacado:hover .flecha{translate:4px 0}

.nombre{
  margin-top:8px;
  font-weight:800;font-stretch:98%;
  font-size:23px;line-height:.96;letter-spacing:-.024em;text-transform:uppercase;
}
.donde{color:var(--hueso-64);line-height:1.35}
/* margin-top:auto — el pie del talón se planta abajo, así una tarjeta sin
   flyer (que no repite el nombre) queda de la misma altura que una con. */
.pie-talon{
  display:flex;align-items:baseline;gap:12px;
  margin-top:auto;padding-top:14px;
}
/* En la grilla el pie va apilado: el lugar en su renglón y el precio en el
   suyo. Compartiendo renglón, en una columna de 273px el lugar se cortaba
   en "FEXPO '26 · SAN…" — catorce caracteres no distinguen la Fexpo de la
   Casa de la Cultura ni del Club Social Norte, así que era un renglón que
   ocupaba lugar sin decir nada. Y en Santa Cruz el lugar es la mitad de lo
   que dice qué clase de noche es. */
.evento .pie-talon{
  flex-direction:column;align-items:flex-start;gap:5px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
}
.evento .donde{
  max-width:100%;font-size:10.5px;letter-spacing:.05em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* El `margin-left:auto` que en un renglón mandaba el precio a la derecha,
   en una columna lo mandaría al canto: acá va alineado con todo lo demás. */
.evento .desde{margin-left:0}
/* margin-left:auto y no sólo el flex:1 del vecino: cuando el talón de la
   entrada grande no lleva organizador —porque ya está en el papel— el
   precio se quedaba pegado a la izquierda, que no es donde se lo busca. */
.desde{
  flex:0 0 auto;margin-left:auto;color:var(--hueso-40);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
.desde b{font-weight:500;color:var(--hueso)}

/* ─── la pared ────────────────────────────────────────────────── */
/* Columnas contadas a mano y no `auto-fit`. auto-fit con un tope duro se
   plantaba en dos columnas de 360px en una pantalla de escritorio: veinte
   eventos eran cinco metros de scroll y un flyer del tamaño de un póster.
   Y auto-fit con `1fr` arregla eso pero rompe el otro extremo — con dos
   eventos colapsa las pistas vacías y quedan dos tarjetas de media página.
   Contadas, la tarjeta mide lo mismo haya dos o haya veinte. */
.cartelera{padding-bottom:clamp(56px,9vw,96px)}
.grilla{display:grid;gap:30px 22px;grid-template-columns:1fr}
@media (min-width:540px){ .grilla{grid-template-columns:repeat(2,1fr)} }
@media (min-width:840px){ .grilla{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1120px){ .grilla{grid-template-columns:repeat(4,1fr)} }

/* Dos columnas en el teléfono, pero sólo cuando la cartelera es larga. Con
   una sola columna veinte eventos son doce mil píxeles de scroll: eso no se
   recorre, se sufre. Con dos son la mitad, y a 160px un flyer se sigue
   reconociendo — así se los reconoce en la grilla de Instagram, que es
   donde la gente ya los vio.
   Y sólo cuando es larga porque con tres eventos dos columnas dejarían
   tarjetas chiquitas y media grilla vacía; ahí el afiche se merece el ancho
   entero del teléfono. La clase la pone portada.js con el mismo umbral que
   ya decide el carrusel: una cartelera de veinte no es una de tres con más
   tarjetas. */
@media (max-width:539px){
  .grilla.densa{grid-template-columns:repeat(2,1fr);gap:20px 12px}
}

/* El corte de mes sólo aparece si la cartelera cruza más de uno (lo decide
   portada.js). Con veinte eventos es lo que hace que se pueda buscar "el
   finde de octubre" en vez de contar tarjetas. */
.mes{
  grid-column:1 / -1;
  display:flex;align-items:center;gap:14px;
  margin:14px 0 -6px;
  font-family:var(--mono);font-weight:500;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--hueso-40);
}
.mes::after{content:"";flex:1;height:1px;background:var(--filo)}

/* ── la tarjeta angosta ──
   Lo que pasa cuando la pieza queda en 160px: dos columnas en un teléfono.
   No es "la versión móvil" —a 375px de ventana la tarjeta puede medir 335 y
   entonces nada de esto corre—, es la versión angosta, y la decide la
   tarjeta midiéndose. */
@container (max-width:210px){
  .evento .talon{padding:12px 12px 13px}
  .evento .cuando{font-size:10.5px;letter-spacing:.01em;gap:6px}
  /* La flecha se va: a este ancho el renglón no da para las dos cosas, y de
     las dos la fecha es la que informa. La tarjeta entera sigue siendo el
     link, así que no se pierde nada de lo que se puede tocar. */
  .evento .cuando .flecha{display:none}
  .evento .nombre{margin-top:6px;font-size:16px;letter-spacing:-.02em}
  .evento .pie-talon{padding-top:10px;gap:4px}
  .evento .donde{font-size:9.5px}
  .evento .desde{font-size:10px}
  /* El papel también achica: a 160px un nombre de 30px son tres renglones
     partidos, y 20px de aire a cada lado se comen un cuarto de la pieza. */
  .papel{padding:14px 12px}
  .papel-nombre{font-size:clamp(19px,15.5cqi,58px)}
  .papel-dia{font-size:clamp(52px,44cqi,210px)}
  .papel-org{margin-top:9px;padding-top:8px;font-size:9.5px;letter-spacing:.1em}
  /* La calcomanía también: "Últimas entradas" a 10,5px cruzaba la tarjeta
     de lado a lado y se comía el tercio de arriba del afiche. Una
     calcomanía se pega en una esquina; si tapa el cartel entero deja de
     avisar algo y pasa a esconderlo. */
  .sello{font-size:9px;letter-spacing:.07em;padding:5px 9px 4px}
}
/* Un escalón más angosto todavía: 134px, que es la tarjeta de dos columnas
   en un teléfono de 320. Ahí el renglón de la fecha no entra entero y se
   cortaba justo en la hora — "SÁB 12 SEP · 2…", que es peor que no
   ponerla—. Se va la hora y queda la fecha completa, que es la que decide
   si el evento te sirve. */
@container (max-width:152px){
  .evento .cuando .hora{display:none}
}
/* `<i>` porque es el idioma del archivo para las piezas sin semántica, pero
   acá lleva texto y no puede salir en cursiva. */
.hora{font-style:normal}

/* ─── lo próximo ──────────────────────────────────────────────── */
.proximos{padding-bottom:clamp(40px,6vw,62px)}
/* El riel sangra hasta el borde de la ventana pero arranca alineado con el
   carril: así la entrada que asoma a la derecha se ve cortada por la
   pantalla —que es la señal de "hay más"— y no por una caja invisible.
   El padding se calcula sobre el ancho del padre y no sobre 100vw, que en
   escritorio incluye la barra de scroll y desbordaría la página. */
.rail{
  /* Posicionado a propósito: portada.js ubica cada entrada con offsetLeft, y
     sin esto el offsetParent sería el body y los botones saltarían a
     cualquier lado. */
  position:relative;
  display:flex;gap:16px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding-inline:var(--margen);
  scroll-padding-inline-start:var(--margen);
  /* La barra de scroll del riel es ruido: el dedo y los botones ya lo
     mueven, y en escritorio aparecería una barra gris cruzando el diseño. */
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}
.destacado{
  flex:0 0 calc(100% - clamp(30px,9vw,54px));
  scroll-snap-align:start;
}
/* Con una sola entrada no hay nada que asome ni a dónde deslizarse: ocupa
   el carril entero y deja de parecer una lista a la que le falta el resto.
   La clase la pone portada.js, que ya sabe cuántas hay. */
.rail.solo .destacado{flex-basis:100%}

/* En la entrada grande el día ya está impreso en el talón a 64px y en
   fluor. Repetirlo de marca de agua sobre el afiche deja dos veces el mismo
   número, del mismo tamaño, a un palmo. En la tarjeta chica se queda: ahí
   el del talón mide 12px y el papel necesita un ancla. */
.destacado .papel-dia{display:none}
/* Y el nombre al medio del papel, no abajo. En la tarjeta chica el nombre
   apoyado en el pie se lee como el título de un afiche; en la pieza grande,
   con el doble de alto, deja media hoja de rayas vacías arriba y lo que
   parece es que la imagen no terminó de cargar. */
.destacado .papel{justify-content:center}

.destacado .talon{padding:22px 20px 20px}
.destacado .cuando{
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--hueso-40);
}
/* El día en grande: en una entrada de papel el talón lleva la fecha impresa
   más grande que el resto, porque es el dato con el que se la guarda en el
   bolsillo hasta el día que sirve. */
.fechon{display:flex;align-items:baseline;gap:10px;margin-top:6px}
.fechon b{
  font-weight:900;font-stretch:112%;
  font-size:clamp(46px,11vw,64px);line-height:.8;letter-spacing:-.045em;
  color:var(--fluor);
}
.fechon span{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--hueso-64);
}
/* El nombre bajó de 50px a 32. Con el primer flyer real puesto quedó claro
   que el talón se había vuelto un segundo afiche al lado del afiche: el
   flyer ya escribe RED CIRCLE en neón del tamaño de la pieza, y si no hay
   flyer lo escribe el papel. En los dos casos el nombre del talón es la
   segunda vez que se lee, así que se comporta como tal. Sigue estando
   —seleccionable, siempre en el mismo lugar, sin depender de que el flyer
   sea legible— pero deja de gritar. */
.destacado .nombre{
  margin-top:12px;max-width:22ch;
  font-weight:900;font-stretch:100%;
  font-size:clamp(22px,3.4vw,32px);line-height:.98;letter-spacing:-.028em;
}
.destacado .donde{margin-top:9px;font-size:15px}
.destacado .quien{
  display:block;margin-top:8px;color:var(--hueso-40);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
}

/* ── la fila de abajo: cómo se entra y cuánto sale ──
   El precio es el único dato que un flyer nunca imprime, y era lo más chico
   de toda la pieza: 11,5px grises al lado del organizador. Acá se planta en
   la misma fila que la manera de entrar —que es donde en una entrada de
   papel va impreso lo que se pagó— y queda legible sin robarle el tamaño de
   titular a la fecha.
   `space-between` y no un margen: en escritorio el precio se va al canto
   derecho del talón y esa fila es lo que le da un borde a un talón que
   antes terminaba en el aire. */
/* `wrap-reverse` y no `wrap`: en escritorio los dos entran en un renglón y
   el precio se va al canto derecho del talón. En un teléfono de 375px se
   pasan por siete píxeles, y al partirse el renglón invertido deja el
   precio ARRIBA del botón — que es el orden en que se lee una entrada de
   papel (cuánto sale, y después la manera de entrar) y no un botón con una
   sobra colgando abajo. Una propiedad, los dos estados bien. */
.accion{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap-reverse;gap:14px 16px;margin-top:20px;
}
.destacado .desde{
  margin-left:0;display:inline-flex;align-items:baseline;gap:8px;
  font-size:10.5px;letter-spacing:.14em;color:var(--hueso-40);
}
/* La cifra sale de la caja alta que gobierna al resto de la fila: a 20px,
   "60 BS" se lee como una sigla y "60 Bs" como plata. */
.destacado .desde b{
  font-size:20px;letter-spacing:-.01em;text-transform:none;color:var(--hueso);
}
/* Parece un botón y no lo es: la pieza entera es el link, así que un botón
   de verdad acá sería un control dentro de otro. Mide 46px igual — nada de
   lo que se toca en esta página baja de 44. */
.ver{
  display:inline-flex;align-items:center;gap:10px;
  min-height:46px;padding:0 20px;
  border:1.5px solid var(--fluor);border-radius:4px;
  font-family:var(--mono);font-weight:500;
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fluor);
  transition:background-color .22s ease,color .22s ease;
}
.destacado:hover .ver{background:var(--fluor);color:var(--tinta)}

/* De 860px para arriba la entrada se acuesta: flyer a la izquierda, troquel
   vertical, talón a la derecha. Es la misma pieza girada, no otra tarjeta.
   El alto manda y el ancho del afiche sale de él (×0,8 = el mismo 4:5 de la
   grilla), para que una entrada apaisada no se coma la pantalla de alto. */
/* Acostada, la entrada tiene un ancho propio y no el del carril. Estirada a
   1200px el afiche ocupaba menos de un tercio y el resto era talón vacío:
   medio metro de violeta con "AMSTEL" en una punta y "DESDE 120 BS" en la
   otra. Con tope, el afiche pesa casi la mitad de la pieza y el sobrante
   pasa a ser margen de página, que es aire decidido y no un olvido.
   En el riel el tope hace además que la entrada siguiente asome de verdad,
   en vez de espiar por una rendija. */
@media (min-width:860px){
  .destacado{--alto:440px;flex-direction:row;min-height:var(--alto);max-width:880px}
  .destacado .afiche{
    flex:0 0 calc(var(--alto) * .8);aspect-ratio:auto;align-self:stretch;
  }
  /* Todo junto y centrado, en vez de estirado con el pie clavado abajo: en
     una pieza de 480px de alto, "margin-top:auto" abría un vacío de la
     altura de una mano entre el lugar y el precio. Un talón en blanco es
     una decisión de diseño; medio talón en blanco es un olvido. */
  .destacado .talon{flex:1;padding:34px 34px 30px;justify-content:center}
  .destacado .accion{margin-top:26px}
  .destacado .nombre{margin-top:14px}
  .destacado .perf{width:0;height:auto;align-self:stretch}
  .destacado .perf::before{
    left:-1px;right:auto;top:18px;bottom:18px;
    border-top:0;border-left:1.5px dashed rgba(243,239,226,.22);
    transition:border-color .22s ease;
  }
  .destacado:hover .perf::before{border-left-color:rgba(255,226,75,.55)}
  .destacado .perf i{left:0;top:auto;transform:translateX(-50%)}
  .destacado .perf .p1{top:calc(var(--muesca) / -2)}
  .destacado .perf .p2{bottom:calc(var(--muesca) / -2)}
}
@media (min-width:1180px){ .destacado{--alto:510px} }

/* ── el mando del riel ──
   Vive en el rótulo, nunca encima del flyer. Un control flotando sobre el
   afiche tapa justo lo que la persona vino a mirar. */
.rail-mando{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.rail-cuenta{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
  color:var(--hueso-40);font-variant-numeric:tabular-nums;
  margin-right:4px;
}
.rail-btn{
  width:44px;height:44px;display:grid;place-items:center;
  background:transparent;color:var(--hueso);
  border:1px solid var(--filo);border-radius:50%;
  cursor:pointer;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,opacity .2s ease;
}
.rail-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.rail-btn:hover:not(:disabled){background:var(--fluor);color:var(--tinta);border-color:var(--fluor)}
.rail-btn:disabled{opacity:.28;cursor:default}

/* ─── cartel de vacío / error ─────────────────────────────────── */
/* Un talón en blanco: la portada sin nada a la venta sigue pareciendo una
   ticketera, no una página que no cargó. */
.cartel{
  grid-column:1 / -1;justify-self:stretch;
  border:1.5px dashed var(--tinta-3);border-radius:14px;
  padding:clamp(34px,7vw,58px) clamp(22px,5vw,44px);
  max-width:600px;margin:0 auto;text-align:center;
}
.cartel h3{
  font-weight:900;font-stretch:104%;
  font-size:clamp(24px,5.4vw,34px);letter-spacing:-.03em;text-transform:uppercase;
  line-height:.95;
}
.cartel p{margin-top:14px;color:var(--hueso-64);font-size:15.5px;max-width:44ch;margin-inline:auto}
.cartel .btn{
  margin-top:22px;display:inline-flex;align-items:center;min-height:46px;
  background:var(--fluor);color:var(--tinta);
  font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;padding:0 22px;border:0;border-radius:4px;cursor:pointer;
  transition:background-color .2s ease;
}
.cartel .btn:hover{background:#FFF08C}

/* ─── pie ─────────────────────────────────────────────────────── */
.pie{
  background:var(--tinta-0);border-top:1px solid var(--filo);
  padding:34px 0 calc(38px + env(safe-area-inset-bottom));
}
.pie-in{display:flex;flex-direction:column;gap:12px}
.pie p{max-width:56ch;font-size:13.5px;color:var(--hueso-40);line-height:1.55}
.pie-lugar{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}

/* ═══ MOVIMIENTO ══════════════════════════════════════════════════
   Una sola idea y sus consecuencias: la página se IMPRIME. El título sale
   renglón por renglón, detrás salen las entradas — la de arriba primero y
   la tira de abajo escalonada— y al elegir una, esa se despega y se lleva
   la página con ella. Nada se mueve solo después de eso: no hay carrusel
   que avance ni nada que lata. Que se sienta vivo, no que tiemble. */
@keyframes sube{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}
.titulo .l{animation:sube .5s var(--curva) both}
.titulo .l:nth-child(2){animation-delay:.07s}
.titulo .l:nth-child(3){animation-delay:.14s}

/* El afiche se asienta en la pared en vez de aparecer de golpe. Es el único
   movimiento que le toca al producto y existe por una razón concreta: un
   flyer pesa un par de megas y en 4G el salto al terminar de bajar es lo que
   hace que la portada parezca rota el segundo anterior.
   La clase la pone portada.js al cargar la imagen, y las dos reglas cuelgan
   de html.js: sin script no hay estado inicial invisible que quede colgado.
   El `.cargada` lleva html.js adelante a propósito — sin eso el selector de
   arriba (dos clases y dos elementos) le gana por especificidad al de abajo
   y el afiche no se enciende nunca. */
html.js .afiche img{opacity:0;scale:1.03}
html.js .afiche img.cargada{opacity:1;scale:1}

/* `backwards` y no `both`: con `both` el estado final de la animación
   —transform:none— se queda pegado y le gana al translateY del hover, así
   que la tarjeta dejaría de levantarse apenas termina de aparecer. */
html.js .destacado{animation:sube .55s var(--curva) backwards;animation-delay:.18s}

/* Las de la grilla nacen invisibles y las enciende el observador cuando
   entran en pantalla (portada.js). Cuelga de html.js: si el script no
   corre, esta regla no existe y la cartelera se ve igual, sin animación. */
html.js .evento{opacity:0}
html.js .evento.vista{
  opacity:1;
  animation:sube .5s var(--curva) backwards;
  animation-delay:calc(var(--i,0) * 55ms);
}

/* Al abrir un evento: la elegida se despega mientras la página se apaga.
   El apagado va en el body entero —y no en todo menos la tarjeta— porque
   una opacidad en el padre agrupa a los hijos y ningún hijo puede volver a
   ser opaco. Lo que distingue a la elegida es que se mueve. */
.saliendo{transform:translateY(-10px) scale(1.012) !important;
  box-shadow:0 30px 60px rgba(0,0,0,.5) !important;z-index:5}
body.yendo{opacity:.35;transition:opacity .19s ease}

@media (prefers-reduced-motion:reduce){
  /* Se apaga todo el movimiento, y además se deshace el estado inicial del
     que dependía la aparición: sin esto las tarjetas de la grilla quedarían
     en opacity:0 para siempre — la animación que las encendía ya no corre. */
  html.js .evento{opacity:1}
  html.js .afiche img{opacity:1;scale:1}
  *{animation:none !important;transition-duration:.001ms !important}
  .rail{scroll-behavior:auto}
  body.yendo{opacity:1}
}

/* El único enlace del pie que no es un dato legal: el que lleva a la parte
   comercial. Fluor porque tiene que encontrarse, chico porque no compite con
   la cartelera. */
.pie-vender a{
  position:relative;
  font-size:14px;color:var(--fluor);font-weight:600;
  border-bottom:1px solid rgba(255,226,75,.32);padding-bottom:2px
}
.pie-vender a:hover{border-bottom-color:var(--fluor)}
/* El renglón mide 19px de alto y el pulgar necesita 44. Se agranda el área
   de toque con un pseudo-elemento estirado hacia arriba y hacia abajo, que
   no ocupa lugar en el flujo: con relleno de verdad, el subrayado se
   despegaría del texto y el pie entero se correría hacia abajo. Alrededor
   sólo hay texto que no se toca, así que no le roba el clic a nada. */
.pie-vender a::after{content:"";position:absolute;inset:-13px -4px}

/* El único precio que se dice con una palabra y no con una cifra. Va en
   fluor porque en una pared de nueve carteles, el gratis es el que decide
   la noche de alguien que estaba mirando de paso. */
.desde.gratis b{color:var(--fluor);font-weight:600}
/* Y en la tarjeta de la grilla, además, más grande que el resto del talón.
   En dos columnas a 375px el renglón del precio baja a 10px, y ahí "GRATIS"
   era el cuarto renglón gris de un talón de cuatro renglones: la palabra que
   podía cambiarle el plan a alguien, dicha en el cuerpo más chico de la
   pieza. En em y no en px porque el mismo renglón mide 11,5 cuando la
   tarjeta va a ancho completo — una regla, los dos tamaños. */
.evento .desde.gratis b{font-size:1.45em;font-weight:700;letter-spacing:-.01em}