/* ==========================================================================
   Súper Concierto · La Gran Noche de la Feria 2027 · Estadio Palogrande — hoja de estilos de la landing
   Se carga desde index.html. Las rutas de imagen son relativas a esta
   carpeta (../img/). Los colores y medidas del evento estan al inicio, en
   :root; para otro evento se cambian ahi y no en el resto de la hoja.
   ========================================================================== */


:root{
  --tb-max:1180px;
  --tb-calle:clamp(16px,4vw,32px);
  --tb-barra:64px;
  --tb-radio:12px;
  --tb-radio-lg:18px;
  --tb-radio-btn:4px;   /* radio de los botones de tuboleta.com (.main-button) */
  --tb-sec-y:clamp(36px,5vw,64px);

  /* Tema claro: el papel durazno con grano del arte de La Gran Noche de la
     Feria. La tinta es el cafe del cartel (#472715 en la pieza). El boton va
     en el rojo ladrillo del "2027" (#BF2600): el naranja del logo no aguanta
     texto blanco (3,3:1), el ladrillo si (6:1). El naranja queda solo para
     el cartel de "El evento". El encabezado va en el azul de Tuboleta. */
  --ev-fondo:#F3CFA6;
  --ev-fondo-alt:#EBC193;
  --ev-superficie:#F7DAB8;
  --ev-superficie-2:#FBE7D0;
  --ev-linea:#D8AB7E;
  --ev-linea-suave:#EACCA8;
  --ev-texto:#3A1D0F;
  --ev-texto-suave:#6B4430;
  --ev-acento:#BF2600;
  --ev-acento-claro:#971E00;
  --ev-acento-2:#7A2A12;
  --ev-acento-txt:#ffffff;
  --ev-naranja:#F04000;
  --ev-naranja-sombra:#602020;
  --ev-sobre-oscuro-suave:#D9B48C;
  --ev-ok:#1f6e3f;
  --ev-no:#a3200f;
  --ev-aviso:#7a4a08;
  --ev-sombra:rgba(58,29,15,.18);
  --ev-top-bg:#0877B9;
  --ev-top-txt:#ffffff;

  --tb-marca:#0877B9;
  --tb-marca-2:#FFC400;

  /* Colores de cada localidad, medidos sobre el plano oficial. */
  --z-vivir:#218690;
  --z-tuamor:#554D5C;
  --z-teconozco:#D4AF7B;
  --z-gramilla:#5F7B87;
  --z-occ:#C18273;
  --z-occpref:#AC534B;
  --z-ori:#D7AD65;
  --z-oripref:#CEA442;
  --z-sur:#967059;
  --z-neutro:#8a7a6c;
}

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

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important;transition:none !important}
}

body{
  margin:0;
  background:var(--ev-fondo);
  color:var(--ev-texto);
  font:400 16px/1.6 Montserrat,system-ui,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

img,svg{display:block;max-width:100%}
[hidden]{display:none !important}
a{color:inherit}
:focus-visible{outline:3px solid var(--ev-acento-claro);outline-offset:3px;border-radius:4px}
.tb-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Al llegar por teclado deja de estar recortado: sin esto el foco
   desaparece de pantalla en el primer Tab de la pagina. */
a.tb-sr:focus{
  position:fixed;top:10px;left:10px;z-index:200;
  width:auto;height:auto;margin:0;padding:12px 18px;clip:auto;
  border-radius:var(--tb-radio);background:var(--ev-acento);color:var(--ev-acento-txt);
  font-size:14px;font-weight:800;text-decoration:none;
}

.tb-sec{padding-block:var(--tb-sec-y);scroll-margin-top:calc(var(--tb-barra) + 8px)}
.tb-sec.tono-a{background:var(--ev-fondo)}
.tb-sec.tono-b{background:var(--ev-superficie)}

.tb-wrap{width:100%;max-width:var(--tb-max);margin-inline:auto;padding-inline:var(--tb-calle)}
.tb-wrap--ancho{max-width:1360px}

.tb-h2{margin:0 0 10px;font-size:clamp(22px,3vw,36px);font-weight:700;line-height:1.12;letter-spacing:-.02em}
.tb-h3{margin:0 0 12px;font-size:clamp(18px,2.2vw,24px);font-weight:700;line-height:1.2}
.tb-bajada{margin:0;max-width:66ch;text-wrap:pretty;color:var(--ev-texto-suave);font-size:clamp(14px,1.6vw,17px)}
.tb-cab{margin-bottom:clamp(24px,3.4vw,40px)}

.tb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 22px;
  border:1px solid transparent;border-radius:var(--tb-radio-btn);
  font:700 15px/1.1 Montserrat,system-ui,"Helvetica Neue",Arial,sans-serif;
  text-align:center;text-decoration:none;cursor:pointer;
  transition:background .18s,border-color .18s,color .18s,transform .12s;
}
.tb-btn:active{transform:translateY(1px)}
.tb-btn--primario{background:var(--ev-acento);color:var(--ev-acento-txt);border-color:var(--ev-acento)}
.tb-btn--primario:hover{background:var(--ev-acento-claro);border-color:var(--ev-acento-claro)}
.tb-btn--secundario{background:transparent;color:var(--ev-texto);border-color:var(--ev-linea)}
.tb-btn--secundario:hover{border-color:var(--ev-texto);background:color-mix(in srgb,var(--ev-texto) 8%,transparent)}
/* Variante pequena del secundario: mismos colores y mismo hover. */
.tb-btn--fantasma{min-height:40px;padding:9px 16px;background:transparent;color:var(--ev-texto);border-color:var(--ev-linea);font-size:13px}
.tb-btn--fantasma:hover{border-color:var(--ev-texto);background:color-mix(in srgb,var(--ev-texto) 8%,transparent)}
.tb-btn--bloque{width:100%}
.tb-btn[aria-disabled="true"]{opacity:.35;pointer-events:none}

.tb-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 9px;border:1px solid var(--ev-linea);border-radius:999px;
  font-size:11px;font-weight:700;line-height:1.4;white-space:nowrap;
}
.tb-chip--sector{background:var(--ev-superficie-2);font-variant-numeric:tabular-nums}
.tb-chip--activa{border-color:var(--ev-ok);background:color-mix(in srgb,var(--ev-ok) 15%,transparent);color:var(--ev-ok)}
.tb-chip--agotada{border-color:var(--ev-no);background:color-mix(in srgb,var(--ev-no) 15%,transparent);color:var(--ev-no)}
.tb-chip--proxima{border-color:var(--ev-aviso);background:color-mix(in srgb,var(--ev-aviso) 15%,transparent);color:var(--ev-aviso)}
.tb-chip--marca{border-style:dashed;color:var(--ev-texto-suave);font-size:10.5px;white-space:normal}

.tb-nota{
  margin:0;padding:14px 16px;
  border:1px solid var(--ev-linea);
  border-radius:var(--tb-radio);
  background:var(--ev-superficie-2);
  color:var(--ev-texto-suave);font-size:13px;line-height:1.55;
}
.tb-nota strong{color:var(--ev-texto)}
.tb-notas{display:grid;gap:10px;margin-top:20px}

.tb-top{border-bottom:1px solid var(--ev-linea);background:var(--ev-top-bg,var(--ev-fondo-alt,#08090a))}
.tb-top__in{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;max-width:var(--tb-max);margin-inline:auto;
  min-height:62px;padding-inline:var(--tb-calle);
}
.tb-top__logo{display:inline-flex;align-items:center;flex:none}
.tb-top__logo img{height:30px;width:auto}
.tb-top__acc{display:flex;align-items:center;gap:8px}
.tb-top__acc a{
  display:inline-flex;align-items:center;gap:8px;
  min-height:40px;padding:9px 16px;
  border:1px solid transparent;border-radius:var(--tb-radio-btn);
  color:var(--ev-top-txt,var(--ev-texto));text-decoration:none;
  font-size:13px;font-weight:700;white-space:nowrap;
  transition:background .16s,border-color .16s;
}
.tb-top__acc a:hover{background:color-mix(in srgb,var(--ev-top-txt,var(--ev-texto)) 15%,transparent)}
.tb-top__acc a.es-borde{border-color:color-mix(in srgb,var(--ev-top-txt,var(--ev-texto)) 45%,transparent)}
.tb-top__acc a.es-marca{
  background:var(--tb-marca-2);border-color:var(--tb-marca-2);color:#141005;font-weight:800;
}
.tb-top__acc a.es-marca:hover{filter:brightness(1.08);background:var(--tb-marca-2)}
.tb-top__acc svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:560px){
  .tb-top__in{min-height:56px;gap:10px}
  .tb-top__logo img{height:24px}
  .tb-top__acc{gap:6px}
  .tb-top__acc a{min-height:38px;padding:8px 11px;font-size:12px;gap:6px}
  .tb-top__acc a.es-borde span{display:none}
}

.tb-barra{
  position:sticky;top:0;z-index:60;
  border-bottom:1px solid var(--ev-linea);
  /* Fondo opaco a proposito: un backdrop-filter aqui se recalcula en cada
     cuadro del scroll y es lo que hace sentir la pagina "pegada". */
  background:var(--ev-fondo);
}
.tb-barra__in{
  display:flex;align-items:center;gap:clamp(8px,2vw,24px);
  width:100%;max-width:var(--tb-max);margin-inline:auto;
  min-height:var(--tb-barra);padding-inline:var(--tb-calle);
}

.tb-barra__nav{
  flex:1 1 auto;min-width:0;
  display:flex;gap:2px;margin:0;padding:0;list-style:none;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  scroll-snap-type:x proximity;
}
.tb-barra__nav::-webkit-scrollbar{display:none}
.tb-barra__nav a{
  display:block;padding:10px 12px;border-radius:8px;
  color:var(--ev-texto-suave);text-decoration:none;
  font-size:13px;font-weight:700;white-space:nowrap;
  scroll-snap-align:start;transition:color .16s,background .16s;
}
.tb-barra__nav a:hover{color:var(--ev-texto);background:var(--ev-superficie-2)}

body:has(#evento:target)      .tb-barra__nav a[href="#evento"],
body:has(#como-comprar:target) .tb-barra__nav a[href="#como-comprar"],
body:has(#precios:target)     .tb-barra__nav a[href="#precios"],
body:has(#etapas:target)      .tb-barra__nav a[href="#etapas"],
body:has(#paquetes:target)    .tb-barra__nav a[href="#paquetes"],
body:has(#escuchalo:target)   .tb-barra__nav a[href="#escuchalo"]{
  color:var(--ev-texto);background:var(--ev-superficie-2);
}

/* Clase que aplica js/app.js al item visible durante el scroll. */
.tb-barra__nav li.es-activo > a{color:var(--ev-texto);background:var(--ev-superficie-2)}

.tb-barra__cta{flex:none}
.tb-barra .tb-barra__cta>summary{min-height:40px;padding:10px 18px;font-size:13px}

@media (max-width:860px){
  .tb-barra__cta{display:none}
  .tb-barra__in{padding-inline:8px}
  .tb-barra__nav a{padding:10px;font-size:12.5px}
}

.tb-promo{
  position:sticky;top:var(--tb-barra);z-index:55;
  background:var(--ev-acento);
  border-bottom:1px solid color-mix(in srgb,#000 22%,var(--ev-acento));
}
.tb-promo__in{
  display:flex;align-items:center;gap:clamp(12px,2vw,24px);
  width:100%;max-width:var(--tb-max);margin-inline:auto;
  padding:10px var(--tb-calle);
}
.tb-promo__txt{
  margin:0;flex:1 1 auto;min-width:0;
  color:var(--ev-acento-txt);font-size:13px;line-height:1.35;
}
.tb-promo__txt b{font-weight:800}
.tb-promo__txt span{opacity:.86}
.tb-promo__desde{
  margin:0;flex:none;white-space:nowrap;
  color:var(--ev-acento-txt);font-size:12px;font-weight:700;
}
.tb-promo__desde b{font-size:16px;font-weight:800}
.tb-promo__cta{
  flex:none;min-height:38px;padding:9px 18px;font-size:13px;
  background:var(--ev-acento-txt);color:var(--ev-acento);
  border-color:var(--ev-acento-txt);
}
.tb-promo__cta:hover{
  background:color-mix(in srgb,var(--ev-acento-txt) 88%,transparent);
  border-color:var(--ev-acento-txt);color:var(--ev-acento);
}

@media (max-width:860px){ .tb-promo{display:none} }

.tb-hero{position:relative;background:var(--ev-fondo-alt,#000);overflow:hidden}

.tb-hero__img{display:block;width:100%}
.tb-hero__img img{
  width:100%;height:100%;
  aspect-ratio:2/1;
  object-fit:cover;object-position:center;
  max-height:min(78vh,760px);
}


@media (max-width:700px){
  .tb-hero__img img{aspect-ratio:4/5;max-height:78vh}
}

/* Titular del evento en texto. Va encabezando la ficha de datos y no sobre
   el arte: la pieza grafica ya lleva el nombre incrustado y superponerlo
   duplicaria el mensaje. Aqui funciona como titulo de pagina y da entrada
   a los datos que van debajo. */
.tb-titular{margin:0 0 clamp(16px,2.2vw,24px)}
.tb-titular h1{
  margin:0;
  font-size:clamp(25px,4vw,40px);font-weight:700;line-height:1.08;letter-spacing:-.02em;
}
.tb-titular p{
  margin:9px 0 0;color:var(--ev-texto-suave);
  font-size:clamp(13px,1.4vw,15px);font-weight:600;line-height:1.45;
}

.tb-datos{
  display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border:1px solid var(--ev-linea);border-radius:var(--tb-radio-lg);
  background:var(--ev-linea);overflow:hidden;
}
/* El icono sale del flujo y se centra a la izquierda de la celda. La etiqueta
   pasa a disponer de todo el ancho, con lo que las de titulo largo dejan de
   partirse en tres lineas y la ficha baja de alto sin tocar el tamano del
   texto. */
.tb-datos div{position:relative;padding:13px 15px 13px 33px;background:var(--ev-superficie)}
.tb-datos dt{
  margin:0 0 2px;color:var(--ev-texto-suave);
  font-size:11px;font-weight:800;letter-spacing:.07em;line-height:1.3;text-transform:uppercase;
}
.tb-datos dt svg{
  /* Centrado sobre el par etiqueta+dato, no sobre la celda: la celda se
     estira a la mas alta de la fila y el icono quedaba suelto bajo la
     etiqueta. Con un desplazamiento fijo cae siempre en el mismo sitio. */
  position:absolute;left:12px;top:24px;
  width:15px;height:15px;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.tb-datos dd{margin:0;font-size:clamp(14px,1.35vw,17px);font-weight:700;line-height:1.25}
.tb-datos dd small{display:block;margin-top:1px;color:var(--ev-texto-suave);font-size:12px;font-weight:500;line-height:1.3}
.tb-datos a{color:var(--ev-acento-claro)}
/* Amplia la zona pulsable sin alterar la maquetacion: el enlace es la
   unica accion de la celda y en el flujo mide 17px de alto. */
.tb-datos dd a{position:relative}
.tb-datos dd a::after{content:"";position:absolute;inset:-13px -10px}
/* Esta consulta va pegada al componente a proposito: el bloque general de
   560px esta declarado antes en la hoja y, a igual especificidad, perdia
   contra las reglas de arriba. */
@media (max-width:560px){
  .tb-datos div{padding:11px 13px 11px 31px}
  .tb-datos dt{font-size:10px;letter-spacing:.05em}
  .tb-datos dt svg{left:11px;top:20px}
  /* La ultima celda ocupa la fila entera y no deja hueco en la rejilla. */
  .tb-datos div:last-child{grid-column:1/-1}
}

.tb-precios__grid{display:grid;gap:clamp(20px,3vw,36px);grid-template-columns:minmax(0,1fr)}
@media (min-width:1040px){
  .tb-precios__grid{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);align-items:start}
  .tb-plano-col{position:sticky;top:calc(var(--tb-barra) + 20px)}
}

.tb-plano{
  padding:clamp(10px,1.6vw,18px);
  border:1px solid var(--ev-linea);border-radius:var(--tb-radio-lg);
  background:var(--ev-superficie-2);
}
.tb-plano svg{width:100%;height:auto}

.tb-mapa-oficial{
  margin:0;padding:0;
  border:1px solid var(--ev-linea);border-radius:var(--tb-radio);
  background:var(--ev-superficie-2);overflow:hidden;
}
.tb-mapa-oficial img{width:100%;height:auto}
.tb-mapa-oficial figcaption{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
  padding:12px 14px;border-top:1px solid var(--ev-linea);
  color:var(--ev-texto-suave);font-size:12px;line-height:1.4;
}

.tb-cross{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin:0;padding:0;list-style:none}
.tb-cross a{
  display:block;overflow:hidden;text-decoration:none;
  border:1px solid var(--ev-linea);border-radius:var(--tb-radio-lg);
  background:var(--ev-superficie-2);
  transition:border-color .18s,transform .18s;
}
.tb-cross a:hover{border-color:var(--ev-acento);transform:translateY(-2px)}
.tb-cross img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.tb-cross span{
  display:block;padding:12px 16px;border-top:1px solid var(--ev-linea);
  color:var(--ev-texto-suave);font-size:12.5px;line-height:1.45;
}
.tb-cross span b{display:block;color:var(--ev-texto);font-size:14px;font-weight:800;margin-bottom:3px}

.tb-etapas{display:grid;gap:12px}

.tb-etapa{
  border:1px solid var(--ev-linea);border-radius:var(--tb-radio-lg);
  background:var(--ev-superficie-2);overflow:hidden;
}
.tb-etapa[data-estado="activa"]{background:var(--ev-fondo)}
.tb-etapa[data-estado="agotada"]{opacity:.72}

.tb-etapa>summary{
  display:grid;grid-template-columns:1fr auto;gap:10px 16px;align-items:center;
  padding:18px 20px;cursor:pointer;list-style:none;
}
.tb-etapa>summary::-webkit-details-marker{display:none}
.tb-etapa>summary:hover{background:color-mix(in srgb,var(--ev-texto) 4%,transparent)}
.tb-etapa__tit{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:clamp(15px,1.9vw,19px);font-weight:700;line-height:1.25}
.tb-etapa__desde{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;color:var(--ev-texto-suave);white-space:nowrap}
.tb-etapa__desde b{color:var(--ev-texto);font-size:17px}
.tb-etapa__desde::after{
  content:"";width:11px;height:11px;flex:none;margin-right:3px;
  border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s;
}
.tb-etapa[open]>summary .tb-etapa__desde::after{transform:rotate(225deg) translate(-2px,-2px)}
.tb-etapa__cuerpo{padding:0 20px 20px}

.tb-nivel{
  margin-bottom:8px;
  border:1px solid var(--ev-linea-suave);border-radius:var(--tb-radio);
  background:var(--ev-fondo);
}
.tb-nivel:last-child{margin-bottom:0}
.tb-nivel>summary{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;
  padding:13px 16px;cursor:pointer;list-style:none;
}
.tb-nivel>summary::-webkit-details-marker{display:none}
.tb-nivel>summary:hover{background:color-mix(in srgb,var(--ev-texto) 4%,transparent)}
.tb-nivel__n{
  color:var(--ev-acento-2,var(--ev-acento-claro));
  font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
}
.tb-nivel__meta{
  display:flex;align-items:center;gap:9px;margin-inline-start:auto;
  color:var(--ev-texto-suave);font-size:11.5px;font-weight:700;white-space:nowrap;
}
.tb-nivel__meta b{color:var(--ev-texto);font-size:15px}
.tb-nivel__meta::after{
  content:"";width:9px;height:9px;flex:none;margin-right:3px;
  border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s;
}
.tb-nivel[open]>summary .tb-nivel__meta::after{transform:rotate(225deg) translate(-2px,-2px)}

/* Destino de los enlaces del plano: al vivir dentro de un <details>
   cerrado, el navegador lo abre al navegar hasta el. */
.tb-nivel__cuerpo{padding:0 16px 14px;scroll-margin-top:calc(var(--tb-barra) + 90px)}
.tb-nivel__cuerpo:target{
  border-radius:var(--tb-radio);
  box-shadow:0 0 0 2px var(--ev-acento);
}

@media (max-width:560px){
  .tb-nivel>summary{padding:13px 13px}
  .tb-nivel__cuerpo{padding:0 13px 12px}
}

.tb-tabla{width:100%;border-collapse:collapse;font-size:13px;table-layout:auto}
.tb-tabla th,.tb-tabla td{padding:13px 8px;text-align:right;border-bottom:1px solid var(--ev-linea-suave);vertical-align:middle}
.tb-tabla th:first-child,.tb-tabla td:first-child{width:100%;text-align:left;padding-left:0}
.tb-tabla td:last-child,.tb-tabla th:last-child{padding-right:0}
.tb-tabla tr:last-child td{border-bottom:0}
.tb-tabla thead th{
  padding-block:8px;color:var(--ev-texto-suave);
  font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;border-bottom:1px solid var(--ev-linea);
}
.tb-tabla tbody tr{transition:background .15s}

.tb-loc{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;line-height:1.3}
.tb-loc__secs{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}

.tb-loc__punto{
  width:14px;height:14px;flex:none;
  border-radius:4px;border:1px solid rgba(0,0,0,.55);
  background:var(--z,var(--z-neutro));
}

.tb-precio{display:block;text-align:right}
.tb-total{display:block;font-size:15.5px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums}
.tb-desglose{display:block;margin-top:4px;white-space:normal;color:var(--ev-texto-suave);font-size:10.5px;font-weight:600;font-variant-numeric:tabular-nums}
.tb-td-aforo{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ev-texto-suave);font-weight:600}

.tb-tabla [data-estado="agotada"]{opacity:.45}
.tb-tabla [data-estado="agotada"] .tb-total{text-decoration:line-through}

@media (max-width:820px){
  .tb-tabla,.tb-tabla tbody{display:block;width:100%}
  .tb-tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  /* Cada fila pasa a ser una tarjeta de dos alturas: arriba la localidad con
     el aforo a su derecha, abajo el precio. Antes el aforo ocupaba una fila
     propia y la tarjeta crecia sin necesidad. */
  .tb-tabla tbody tr{
    display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:0 12px;
    margin-bottom:10px;padding:14px 16px;
    border:1px solid var(--ev-linea);border-radius:var(--tb-radio);
    background:var(--ev-superficie);
  }
  .tb-tabla tbody tr:last-child{margin-bottom:0}
  .tb-tabla td{display:block;padding:0;text-align:left;border:0}
  .tb-tabla td:first-child{grid-column:1;grid-row:1;padding-bottom:12px}
  .tb-tabla td.tb-td-aforo{
    grid-column:2;grid-row:1;
    display:flex;align-items:baseline;gap:6px;
    padding-top:1px;white-space:nowrap;font-weight:700;
  }
  .tb-tabla td.tb-td-aforo::before{
    content:attr(data-l);color:var(--ev-texto-suave);font-size:11.5px;font-weight:700;
  }
  /* Precio en una sola columna a la izquierda: etiqueta y total en la misma
     linea, desglose debajo. Antes iba a dos columnas y el desglose se partia
     en dos o tres lineas en la columna derecha, que es lo que alargaba la
     tarjeta. */
  .tb-tabla td.tb-td-precio{
    grid-column:1/-1;grid-row:2;
    display:grid;grid-template-columns:auto 1fr;gap:1px 8px;align-items:baseline;
    padding-top:11px;border-top:1px solid var(--ev-linea-suave);
  }
  .tb-tabla td.tb-td-precio::before{
    content:attr(data-l);
    color:var(--ev-texto-suave);font-size:11.5px;font-weight:700;
  }
  .tb-tabla .tb-precio{display:contents}
  .tb-tabla .tb-total{grid-column:2;text-align:left}
  .tb-tabla .tb-desglose{grid-column:1/-1;margin-top:1px;white-space:normal;text-align:left}
}

.tb-pagos{display:grid;gap:10px;margin-top:14px}
/* Tarjeta de medio de pago: icono y texto arriba, el boton abajo. Solo el
   boton es enlace y solo el boton reacciona al hover. */
.tb-pago{
  display:grid;grid-template-columns:46px minmax(0,1fr);gap:14px 16px;align-items:center;
  padding:18px;
  border:1px solid var(--ev-linea);border-radius:var(--tb-radio);
  background:var(--ev-superficie-2);
}
.tb-pago__ico{
  display:grid;place-items:center;width:46px;height:46px;
  border:1px solid var(--ev-linea);border-radius:50%;color:var(--ev-acento-claro);
}
.tb-pago__ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tb-pago strong{display:block;font-size:16px;line-height:1.25}
.tb-pago small{display:block;margin-top:5px;color:var(--ev-texto-suave);font-size:12.5px;line-height:1.4}
.tb-pago__ir{
  grid-column:1/-1;align-self:end;
  display:flex;align-items:center;justify-content:center;min-height:44px;
  padding:11px 18px;border:1px solid var(--ev-acento);border-radius:var(--tb-radio-btn);
  background:var(--ev-acento);color:var(--ev-acento-txt);font-size:13px;font-weight:700;white-space:nowrap;text-decoration:none;
  transition:background .16s,color .16s,border-color .16s;
}
.tb-pago__ir:hover{background:var(--ev-acento-claro);border-color:var(--ev-acento-claro)}

.tb-pagos-otros{
  margin-top:12px;padding:18px;
  border:1px solid var(--ev-linea);border-radius:var(--tb-radio);background:var(--ev-superficie-2);
}
/* Cuando el bloque de compra va delante de las etapas, deja aire entre ambos. */
.tb-pagos-otros + .tb-etapas{margin-top:clamp(24px,3vw,32px)}
.tb-pagos-otros h4{margin:0 0 12px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ev-texto-suave)}
.tb-pagos-otros ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:0;padding:0;list-style:none}
.tb-pagos-otros a{
  display:grid;place-items:center;min-height:44px;padding:10px;
  border:1px solid var(--ev-linea);border-radius:var(--tb-radio-btn);
  text-decoration:none;font-size:12.5px;font-weight:700;text-align:center;color:var(--ev-texto);
  transition:background .16s,border-color .16s;
}
.tb-pagos-otros a:hover{border-color:var(--ev-texto);background:color-mix(in srgb,var(--ev-texto) 8%,transparent)}

@media (max-width:560px){
  .tb-pago{grid-template-columns:40px minmax(0,1fr);gap:12px;padding:14px}
  .tb-pago__ico{width:40px;height:40px}
  /* A ancho completo el boton es la accion principal de la tarjeta, asi que
     va relleno y no solo con contorno. */
  .tb-pago__ir{margin-top:2px}
}

.tb-venta{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.tb-venta__item{
  display:flex;flex-direction:column;gap:10px;
  padding:22px;border:1px solid var(--ev-linea);border-radius:var(--tb-radio-lg);
  background:var(--ev-superficie-2);
}
.tb-venta__item[data-estado="activa"]{background:var(--ev-fondo)}
.tb-venta__item[data-estado="finalizada"]{opacity:.6}
.tb-venta__n{
  display:grid;place-items:center;width:34px;height:34px;
  border-radius:50%;background:var(--ev-acento);color:var(--ev-acento-txt);
  font-size:15px;font-weight:800;
}
.tb-venta__item h3{margin:0;font-size:16px;font-weight:700;line-height:1.25}
.tb-venta__item p{margin:0;color:var(--ev-texto-suave);font-size:13px;line-height:1.5}
.tb-venta__item a{color:var(--ev-acento-claro)}

.tb-paquetes{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
/* Con exactamente cuatro tarjetas se pasa de dos a cuatro columnas: tres
   dejarían una huérfana en la segunda fila. */
@media (max-width:1119px){.tb-paquetes:has(> :last-child:nth-child(4)){grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}}
@media (min-width:1120px){.tb-paquetes:has(> :last-child:nth-child(4)){grid-template-columns:repeat(4,1fr)}}
.tb-paq{
  display:flex;flex-direction:column;gap:14px;
  padding:24px;border:1px solid var(--ev-linea);border-radius:var(--tb-radio-lg);
  background:var(--ev-superficie-2);
}
/* Lo destacado se marca con un fondo mas oscuro que el de sus vecinas, no
   con un contorno de color. */
.tb-paq--destacado{background:var(--ev-fondo)}
.tb-paq__cab{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px}
.tb-paq h3{margin:0;font-size:15px;font-weight:700;line-height:1.25;letter-spacing:-.01em;text-wrap:balance}
.tb-paq__precio{font-size:28px;font-weight:700;line-height:1.1;letter-spacing:-.02em;white-space:nowrap}
.tb-paq__cupos{width:100%;color:var(--ev-texto-suave);font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.tb-paq__loc{color:var(--ev-texto-suave);font-size:12.5px;font-weight:700}
.tb-paq ul{display:grid;gap:9px;margin:0;padding:0;list-style:none;font-size:13.5px;line-height:1.5}
.tb-paq li{display:grid;grid-template-columns:16px 1fr;gap:9px;color:var(--ev-texto-suave)}
.tb-paq li::before{content:"";width:7px;height:12px;margin-top:4px;border-right:2px solid var(--ev-acento);border-bottom:2px solid var(--ev-acento);transform:rotate(42deg)}
.tb-paq li b{color:var(--ev-texto)}
/* Dos rutas de pago por paquete, apiladas y pegadas al pie de la tarjeta. */
.tb-paquetes__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(24px,3vw,36px)}
.tb-paquetes__cta .tb-btn{min-width:250px}
@media (max-width:700px){.tb-paquetes__cta{gap:8px}.tb-paquetes__cta .tb-btn{width:100%;min-width:0}}
.tb-paq .tb-btn{margin-top:auto}

.tb-dos{display:grid;gap:clamp(20px,3vw,40px);grid-template-columns:minmax(0,1fr)}
@media (min-width:860px){.tb-dos{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center}}
.tb-dos:has(>[hidden]:last-child){grid-template-columns:minmax(0,1fr) !important}
.tb-prosa p{margin:0 0 14px;font-size:clamp(14.5px,1.7vw,16.5px);line-height:1.68;color:var(--ev-texto-suave)}
.tb-prosa p:first-child{color:var(--ev-texto);font-weight:600}
.tb-prosa p:last-child{margin-bottom:0}
.tb-media{border:1px solid var(--ev-linea);border-radius:var(--tb-radio-lg);overflow:hidden;background:var(--ev-superficie-2)}
.tb-media img{width:100%;height:auto}
.tb-embed{border:1px solid var(--ev-linea);border-radius:var(--tb-radio-lg);overflow:hidden}
.tb-embed iframe{display:block;width:100%;border:0}

.tb-cond{display:grid;gap:8px}
.tb-cond details{border:1px solid var(--ev-linea);border-radius:var(--tb-radio);background:var(--ev-superficie-2)}
.tb-cond summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 18px;cursor:pointer;list-style:none;
  font-size:14.5px;font-weight:700;
}
.tb-cond summary::-webkit-details-marker{display:none}
.tb-cond summary::after{
  content:"";width:10px;height:10px;flex:none;
  border-right:2.5px solid var(--ev-texto-suave);border-bottom:2.5px solid var(--ev-texto-suave);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s;
}
.tb-cond details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.tb-cond summary:hover{background:color-mix(in srgb,var(--ev-texto) 4%,transparent)}
.tb-cond__cuerpo{padding:0 18px 18px;color:var(--ev-texto-suave);font-size:13.5px;line-height:1.65}
.tb-cond__cuerpo p{margin:0 0 10px}
.tb-cond__cuerpo p:last-child{margin-bottom:0}
.tb-cond__cuerpo strong{color:var(--ev-texto)}

.tb-pie{padding-block:clamp(16px,2.2vw,24px);border-top:1px solid var(--ev-linea);background:var(--ev-superficie)}
.tb-pie__in{display:flex;flex-wrap:wrap;gap:8px 32px;align-items:center;justify-content:space-between}
.tb-pie dl{display:flex;flex-wrap:wrap;gap:6px 26px;margin:0;font-size:12.5px}
.tb-pie dt{color:var(--ev-texto-suave);font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:10.5px;align-self:center}
.tb-pie dd{margin:0 0 0 -18px;font-weight:600}
.tb-pie__marca{font-size:12.5px;color:var(--ev-texto-suave)}

@media (max-width:700px){
  .tb-pie__in{flex-direction:column;gap:14px;text-align:center}
  /* Dos lineas centradas: Responsable arriba; NIT y PULEP juntos debajo. */
  .tb-pie dl{display:block;text-align:center}
  .tb-pie dt,.tb-pie dd{display:inline;margin:0}
  .tb-pie dt{margin-right:5px}
  .tb-pie dd:first-of-type::after{content:"";display:block;height:6px}
  .tb-pie dd:nth-of-type(2){margin-right:14px}
}

/* Barra de compra fija al pie. Se muestra en todos los anchos y reparte las
   rutas de pago en dos desplegables, asi ocupa una sola fila hasta que el
   usuario pide ver las opciones. */
.tb-compra{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  padding:10px 0 calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--ev-linea);
  background:var(--ev-fondo);
  box-shadow:0 -10px 30px var(--ev-sombra);
}
/* Deja sitio al pie para que la barra no tape el final de la pagina. */
body{padding-bottom:88px}
.tb-compra__in{display:flex;align-items:center;justify-content:space-between;gap:14px}
.tb-compra__tit{margin:0;flex:none;font-size:16px;font-weight:700}

/* Un solo desplegable con las cuatro rutas de pago. En movil ocupa todo el
   ancho de la barra; en escritorio se recoge a la derecha. */
.tb-menu{position:relative;flex:1 1 auto}
.tb-menu>summary{
  display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:12px 20px;border-radius:var(--tb-radio-btn);
  border:1px solid var(--ev-acento);background:var(--ev-acento);color:var(--ev-acento-txt);
  font:700 15px/1.1 Montserrat,system-ui,"Helvetica Neue",Arial,sans-serif;
  cursor:pointer;list-style:none;white-space:nowrap;
  transition:background .16s,border-color .16s;
}
.tb-menu>summary:hover{background:var(--ev-acento-claro);border-color:var(--ev-acento-claro)}
.tb-menu>summary::-webkit-details-marker{display:none}
.tb-menu>summary::after{
  content:"";width:8px;height:8px;flex:none;
  border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;
  transform:rotate(-135deg) translate(-2px,-2px);transition:transform .18s;
}
.tb-menu[open]>summary::after{transform:rotate(45deg) translate(-1px,-1px)}
.tb-menu__panel{
  position:absolute;left:0;right:0;bottom:calc(100% + 18px);
  display:grid;gap:6px;padding:8px;
  border:1px solid var(--ev-linea);border-radius:var(--tb-radio-lg);
  background:var(--ev-superficie);
  box-shadow:0 -16px 40px var(--ev-sombra);
}
.tb-menu__panel a{
  display:flex;align-items:center;justify-content:center;
  min-height:46px;padding:11px 14px;border-radius:var(--tb-radio-btn);
  background:var(--ev-superficie-2);text-decoration:none;
  font-size:13.5px;font-weight:700;text-align:center;
}
.tb-menu__panel a:hover,.tb-menu__panel a:focus-visible{background:var(--ev-acento-claro);color:var(--ev-acento-txt)}
@media (min-width:861px){
  .tb-menu{flex:none}
  .tb-menu__panel{left:auto;right:0;width:300px}
}
@media (max-width:640px){
  .tb-compra__tit{display:none}
}

.tb-pass{border-block:1px solid var(--ev-linea);background:var(--ev-superficie-2)}
.tb-pass__in{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px 20px;padding-block:12px;
}
.tb-pass__txt{
  display:flex;align-items:center;gap:10px;margin:0;min-width:0;
  color:var(--ev-texto-suave);font-size:13px;line-height:1.4;
}
.tb-pass__txt b{color:var(--ev-texto);font-weight:800}
.tb-pass__txt>svg{
  width:18px;height:18px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.tb-pass__tiendas{display:flex;align-items:center;gap:10px;flex:none}
.tb-pass__tiendas a{display:inline-flex;border-radius:8px;transition:opacity .16s}
.tb-pass__tiendas a:hover{opacity:.82}
.tb-pass__tiendas a:focus-visible{outline:3px solid var(--ev-acento-claro);outline-offset:3px}
.tb-pass__tiendas img{display:block;width:auto;height:40px}
/* El PNG de Google reserva 11,6% de margen transparente arriba y abajo
   (arte de 646x192 dentro de 646x250). Se escala 40 / 0,768 = 52 px para que
   el badge visible quede del mismo alto que el de Apple, que no lleva margen. */
.tb-pass__tiendas .es-play img{height:52px;margin-block:-6px}
@media (max-width:560px){
  .tb-pass__in{justify-content:flex-start}
}

/* ── Entrada de tarjetas (v2). Con JavaScript, cada grupo de tarjetas
   aparece cuando entra en pantalla y las hermanas llegan una tras otra, con
   150 ms entre cada una, sin depender de la velocidad del scroll. Solo se
   ocultan si el script corre (clase "js" en <html>): sin el, se ven siempre.
   Con prefers-reduced-motion se muestran de inmediato. ── */
html.js .tb-venta__item,html.js .tb-paq{
  opacity:0;transform:translateY(18px);
  transition:opacity .55s ease-out,transform .55s ease-out;
}
html.js .tb-venta__item:nth-child(2),html.js .tb-paq:nth-child(2):nth-child(2),html.js .tb-evento__dato:nth-child(2){transition-delay:.15s}
html.js .tb-paq:nth-child(3){transition-delay:.3s}
html.js .es-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js .tb-venta__item,html.js .tb-paq{opacity:1;transform:none}
}

/* ── "Paquetes VIP": cabecera centrada; las tres tarjetas no cambian. ── */
#paquetes .tb-cab{text-align:center}
#paquetes .tb-bajada{margin-inline:auto}

/* ── Barra fija de compra (v2): sigue oscura, pero se separa de la pagina con
   un fondo un tono mas claro y una sombra mas marcada. El rojo se reserva
   para el boton, que crece un poco. ── */
.tb-compra{
  background:var(--ev-superficie);
  box-shadow:0 -14px 40px var(--ev-sombra);
}
.tb-compra .tb-menu>summary{min-height:52px;padding:13px 26px;font-size:16px}

/* ── Compra en escritorio desde la barra superior (v2). El boton "Comprar
   boletas" de la barra es un desplegable con las mismas opciones de la barra
   inferior, que abre hacia abajo. La barra inferior queda solo para movil,
   donde el pulgar llega abajo y arriba no hay sitio. ── */
.tb-barra__cta .tb-menu__panel{
  top:calc(100% + 12px);bottom:auto;left:auto;right:0;width:300px;
  box-shadow:0 16px 40px var(--ev-sombra);
}
/* Como abre hacia abajo, la flecha apunta abajo cerrado y arriba abierto. */
.tb-barra__cta>summary::after{transform:rotate(45deg) translate(-1px,-1px)}
.tb-barra__cta[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
@media (min-width:861px){
  .tb-compra{display:none}
  body{padding-bottom:0}
}

/* ── Estado de cada etapa de venta (v2): la etiqueta Activa / Finalizada va
   en la tarjeta de la etapa, arriba a la derecha; las etapas de precio ya
   no la llevan. Se cambia a mano segun la fecha. ── */
.tb-venta__item{position:relative}
.tb-venta__estado{position:absolute;top:22px;right:22px}
.tb-chip--finalizada{border-color:var(--ev-linea);background:transparent;color:var(--ev-texto-suave)}
.tb-venta__item[data-estado="finalizada"]{opacity:1}
.tb-venta__item[data-estado="finalizada"] h3,.tb-venta__item[data-estado="finalizada"] p{color:var(--ev-texto-suave)}

/* ── "Cómo comprar" como seccion propia (v2), antes de las etapas de venta:
   las dos tarjetas en fila en escritorio y los otros medios debajo. ── */
/* Va pegada a la franja de datos, del mismo tono: casi sin aire arriba. */
#como-comprar{padding-top:0}
#como-comprar .tb-pagos{margin-top:0}
@media (min-width:860px){
  /* Tres tarjetas (nacional, internacional, paquetes VIP) en fila; los otros
     medios de pago debajo, a todo el ancho, con sus dos enlaces lado a lado. */
  #como-comprar .tb-wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}
  #como-comprar .tb-pagos-otros{grid-column:1/-1}
  #como-comprar .tb-pagos-otros ul{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (min-width:1100px){
  /* Escritorio ancho: las tres tarjetas y, al lado, los otros medios. */
  #como-comprar .tb-wrap{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(220px,.8fr)}
  #como-comprar .tb-pagos-otros{grid-column:auto}
  #como-comprar .tb-pagos-otros ul{grid-template-columns:1fr!important}
}
@media (min-width:860px){
  #como-comprar .tb-cab{grid-column:1/-1;margin-bottom:6px}
  #como-comprar .tb-pagos{display:contents}
  #como-comprar .tb-pagos-otros{margin-top:0;display:flex;flex-direction:column;justify-content:center}
  #como-comprar .tb-pagos-otros ul{grid-template-columns:1fr}
}

/* ── Desplegable simple (version "desplegable-simple"): se conserva un
   desplegable por etapa de precio, pero adentro ya no hay sub-desplegables ni
   cajas por nivel: las localidades van escritas en un solo listado. Los
   grupos (premium, platea, piso 3, piso 4) se separan con aire y el marcador
   de color es una estrella, como en la pieza de tarifas. En movil las filas
   tampoco son tarjetas: solo una linea entre una y otra. ── */
.tb-etapa__cuerpo--lista .tb-tabla tbody + tbody::before{content:"";display:block;height:14px}
.tb-etapa__cuerpo--lista .tb-tabla tbody tr:last-child td{border-bottom:1px solid var(--ev-linea-suave)}
.tb-etapa__cuerpo--lista .tb-tabla tbody:last-child tr:last-child td{border-bottom:0}
.tb-etapa__cuerpo--lista .tb-loc__punto{
  width:15px;height:15px;border:0;border-radius:0;
  clip-path:polygon(50.0% 0.0%,58.4% 29.7%,85.4% 14.6%,70.3% 41.6%,100.0% 50.0%,70.3% 58.4%,85.4% 85.4%,58.4% 70.3%,50.0% 100.0%,41.6% 70.3%,14.6% 85.4%,29.7% 58.4%,0.0% 50.0%,29.7% 41.6%,14.6% 14.6%,41.6% 29.7%);
}
@media (min-width:701px){ .tb-etapa__cuerpo--lista .tb-desglose{white-space:nowrap} }
@media (max-width:700px){
  .tb-etapa__cuerpo--lista .tb-tabla tbody + tbody::before{height:8px}
  .tb-etapa__cuerpo--lista .tb-tabla tbody tr,
  .tb-etapa__cuerpo--lista .tb-tabla tbody tr:last-child{
    margin:0;padding:14px 0;border:0;border-bottom:1px solid var(--ev-linea-suave);
    border-radius:0;background:transparent;
  }
  .tb-etapa__cuerpo--lista .tb-tabla tbody:last-child tr:last-child{border-bottom:0;padding-bottom:4px}
}

/* ── Marcador de localidad con filo: los colores de la tabla oficial son
   grises y pizarra; la estrella de afuera va en gris y la de adentro lleva el
   color de la zona. ── */
.tb-etapa__cuerpo--lista .tb-loc__punto{position:relative;width:17px;height:17px;background:var(--ev-texto-suave)}
.tb-etapa__cuerpo--lista .tb-loc__punto::before{content:"";position:absolute;inset:2px;background:var(--z,var(--z-neutro));clip-path:inherit}

/* ── Aliados del evento, en su propia franja antes del pie. ── */
.tb-aliados{margin:clamp(28px,4vw,44px) auto 0;max-width:720px}
.tb-aliados img{display:block;width:100%;height:auto}

/* ── Súper Concierto Feria de Manizales: ajustes sobre la plantilla ── */

/* Marcador de cada localidad, con los colores del plano oficial. */
[data-zona="vivir"]     .tb-loc__punto{--z:var(--z-vivir)}
[data-zona="tuamor"]    .tb-loc__punto{--z:var(--z-tuamor)}
[data-zona="teconozco"] .tb-loc__punto{--z:var(--z-teconozco)}
[data-zona="gramilla"]  .tb-loc__punto{--z:var(--z-gramilla)}
[data-zona="occ"]       .tb-loc__punto{--z:var(--z-occ)}
[data-zona="occpref"]   .tb-loc__punto{--z:var(--z-occpref)}
[data-zona="ori"]       .tb-loc__punto{--z:var(--z-ori)}
[data-zona="oripref"]   .tb-loc__punto{--z:var(--z-oripref)}
[data-zona="sur"]       .tb-loc__punto{--z:var(--z-sur)}

/* El hero movil es la pieza cuadrada del evento (1080x960): se muestra
   entera, sin recortar a 4:5. */
@media (max-width:700px){
  .tb-hero__img img{aspect-ratio:9/8;max-height:none}
}

/* Precio de palco: va por palco de 10 personas, no por boleta. */
.tb-loc__unidad{color:var(--ev-texto-suave);font-weight:600}

/* "Cómo comprar" con dos tarjetas (nacional e internacional) y sin otros
   medios: en escritorio van lado a lado. */
@media (min-width:860px){
  #como-comprar .tb-wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── "El evento" como franja oscura del cartel (traída de la propuesta 2,
   2026-09-28): Marc Anthony en grande con el naranja y la sombra en bloque
   del logo, el resto del cartel en linea y la reseña al lado. El naranja
   solo va sobre la tinta (4,1:1 en texto grande); sobre el papel no alcanza. ── */
#evento{background:var(--ev-texto);color:var(--ev-fondo)}
.tb-cartel__in{display:grid;gap:clamp(28px,4vw,56px)}
@media (min-width:980px){.tb-cartel__in{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:end}}
.tb-cartel__etq{margin:0 0 12px;color:var(--ev-naranja);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.tb-cartel__principal{
  margin:0 0 clamp(14px,2vw,22px);color:var(--ev-naranja);text-transform:uppercase;
  font-size:clamp(48px,9vw,120px);font-weight:900;line-height:.9;letter-spacing:-.04em;
  text-shadow:2px 2px 0 #1c0b03,4px 4px 0 #1c0b03,6px 6px 0 #1c0b03;
}
.tb-cartel__resto{display:flex;flex-wrap:wrap;gap:4px 0;margin:0;padding:0;list-style:none}
.tb-cartel__resto li{font-size:clamp(20px,2.7vw,34px);font-weight:800;line-height:1.2;letter-spacing:-.015em;text-transform:uppercase}
.tb-cartel__resto li:not(:last-child)::after{content:"·";margin-inline:.4em;color:var(--ev-naranja)}
.tb-cartel__lead{margin:0 0 18px;font-size:clamp(19px,2vw,24px);font-weight:700;line-height:1.35}
.tb-cartel__txt p:not(.tb-cartel__lead){margin:0 0 14px;color:var(--ev-sobre-oscuro-suave);font-size:15px;line-height:1.65}
.tb-generos{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none}
.tb-generos li{padding:6px 12px;border:1px solid rgba(243,207,166,.35);border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.04em}

/* Advertencia legal del patrocinio de licor, debajo de los aliados. */
.tb-legal{
  margin:14px auto 0;max-width:720px;text-align:center;
  color:var(--ev-texto-suave);font-size:12px;font-weight:700;line-height:1.5;text-transform:uppercase;letter-spacing:.03em;
}

/* Franja de aliados: sin "Ten en cuenta" (no hay condiciones confirmadas),
   los logos y la advertencia legal del licor van solos antes del pie. */
.tb-sec--aliados{padding-block:clamp(28px,4vw,44px)}
.tb-sec--aliados .tb-aliados{margin-top:0}

/* ── Franja de nombres con movimiento (traída de la propuesta 3, 2026-09-29).
   En la v1 va en el rojo ladrillo de los botones, con el texto en el durazno
   del papel (4,1:1 en texto grande) y las estrellas en la tinta. La pista
   lleva la lista dos veces y se desplaza la mitad de su ancho, asi el bucle
   no salta. Se detiene al pasar el cursor y con prefers-reduced-motion (la
   regla general de la plantilla apaga las animaciones). ── */
.tb-marq{overflow:hidden;border-block:1px solid color-mix(in srgb,#000 22%,var(--ev-acento));background:var(--ev-acento);color:var(--ev-fondo)}
.tb-marq__pista{display:flex;width:max-content;animation:tb-marq 38s linear infinite}
.tb-marq:hover .tb-marq__pista{animation-play-state:paused}
.tb-marq ul{display:flex;margin:0;padding:0;list-style:none}
.tb-marq li{
  display:flex;align-items:center;padding:14px 0;
  font:900 clamp(22px,2.8vw,36px)/1 Montserrat,system-ui,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap;
}
.tb-marq li::after{content:"✦";margin-inline:.7em;font-size:.6em;color:var(--ev-texto)}
@keyframes tb-marq{to{transform:translateX(-50%)}}

/* ── Reglas que antes iban como style="" dentro del HTML ── */
.tb-sec--datos{padding-block:clamp(24px,3vw,36px)}