/* ==========================================================================
   Juanes · World Tour 2026 · DAVIarena — 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);

  --ev-fondo:#0a0a0b;
  --ev-superficie:#141518;
  --ev-superficie-2:#1b1d21;
  --ev-linea:#2d3036;
  --ev-linea-suave:#232629;
  --ev-texto:#f4f5f6;
  --ev-texto-suave:#a9acb3;
  --ev-acento:#e2141f;
  --ev-acento-claro:#ff3b46;
  --ev-acento-txt:#ffffff;
  --ev-ok:#4bbf6d;
  --ev-no:#ff7a82;
  --ev-aviso:#e8c05e;
  --ev-scrim-1:rgba(0,0,0,.55);
  --ev-scrim-2:rgba(0,0,0,.88);
  --ev-sombra:rgba(0,0,0,.55);

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

  --z-tribuna:#f0921c;
  --z-lounge:#7c3fa2;
  --z-pla-a:#e0342d;
  --z-pla-b:#cbb93c;
  --z-p3a:#1ba79e;
  --z-p3b:#ee6536;
  --z-p3c:#c0212a;
  --z-p3d:#3a9fdf;
  --z-p4a:#3cb457;
  --z-p4b:#efc02f;
  --z-p4c:#12775a;
  --z-neutro:#7e848b;
}

*,*::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"],
body:has(#como-llegar:target) .tb-barra__nav a[href="#como-llegar"],
body:has(#condiciones:target) .tb-barra__nav a[href="#condiciones"]{
  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-neutro);
}
[data-zona="tribuna"] .tb-loc__punto{background:var(--z-tribuna)}
[data-zona="lounge"]  .tb-loc__punto{background:var(--z-lounge)}
[data-zona="pla-a"]   .tb-loc__punto{background:var(--z-pla-a)}
[data-zona="pla-b"]   .tb-loc__punto{background:var(--z-pla-b)}
[data-zona="p3a"]     .tb-loc__punto{background:var(--z-p3a)}
[data-zona="p3b"]     .tb-loc__punto{background:var(--z-p3b)}
[data-zona="p3c"]     .tb-loc__punto{background:var(--z-p3c)}
[data-zona="p3d"]     .tb-loc__punto{background:var(--z-p3d)}
[data-zona="p4a"]     .tb-loc__punto{background:var(--z-p4a)}
[data-zona="p4b"]     .tb-loc__punto{background:var(--z-p4b)}
[data-zona="p4c"]     .tb-loc__punto{background:var(--z-p4c)}

.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-llegar{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.tb-llegar__item{padding:20px;border:1px solid var(--ev-linea);border-radius:var(--tb-radio);background:var(--ev-superficie-2)}
.tb-llegar__item h3{margin:0 0 8px;display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700}
.tb-llegar__item h3 svg{
  width:18px;height:18px;flex:none;color:var(--ev-acento-claro);
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.tb-llegar__item p{margin:0;color:var(--ev-texto-suave);font-size:13.5px;line-height:1.55}

.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}
}

/* ── Fondos con textura (v2). Piezas generadas en Higgsfield en la clave
   blanco y negro del arte de Juanes, en WebP. Solo en la banda de paquetes y en "Escúchalo"; el resto sigue plano. Cada fondo lleva un velo oscuro encima para que el texto conserve
   el contraste. ── */
#paquetes{
  background-image:linear-gradient(180deg,rgba(10,10,11,.62) 0%,rgba(10,10,11,.32) 100%),url(../img/fondo-luz-diagonal.webp);
  background-size:cover;background-position:center top;
}
@media (max-width:860px){
  #paquetes{background-image:linear-gradient(180deg,rgba(10,10,11,.7),rgba(10,10,11,.45)),url(../img/fondo-luz-diagonal.webp)}
}

/* ── 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,html.js .tb-llegar__item,html.js .tb-evento__dato{
  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),html.js .tb-llegar__item: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,html.js .tb-llegar__item,html.js .tb-evento__dato{opacity:1;transform:none}
}

/* El marcador de los acordeones de "Ten en cuenta" es un "+" que gira a "x"
   al abrir, en escritorio y en movil por igual. */
#condiciones .tb-cond summary::after{
  content:"+";width:auto;height:auto;border:0;
  font:800 24px/1 Montserrat,system-ui,"Helvetica Neue",Arial,sans-serif;color:var(--ev-acento-claro);
  transform:none;transition:transform .2s;
}
#condiciones .tb-cond details[open] summary::after{transform:rotate(45deg)}
@media (min-width:1040px){
  #condiciones .tb-cond summary::after{font-size:26px}
}

/* ── "Ten en cuenta" (v2): titulo y bajada centrados sobre las condiciones.
   Las condiciones son las mismas tarjetas con borde del template en todos
   los anchos; en escritorio van en una columna centrada de hasta 880 px,
   con un poco mas de aire y de cuerpo. ── */
#condiciones .tb-cab{text-align:center}
#condiciones .tb-bajada{margin-inline:auto}
@media (min-width:1040px){
  #condiciones .tb-cond{max-width:880px;margin-inline:auto}
  #condiciones .tb-cond summary{padding:22px 22px;font-size:17px}
  #condiciones .tb-cond__cuerpo{padding:0 22px 22px;font-size:14.5px}
}

/* ── "Cómo llegar" en escritorio (v2): titulo y bajada a la izquierda, las
   dos tarjetas en fila a la derecha. Mismo esquema que "Ten en cuenta",
   para que las dos secciones practicas se lean como hermanas. En movil
   sigue el orden del template: titulo y tarjetas apiladas. ── */
@media (min-width:1040px){
  #como-llegar .tb-wrap{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(32px,5vw,72px);align-items:start}
  #como-llegar .tb-cab{margin:0}
  #como-llegar .tb-llegar{grid-template-columns:1fr 1fr}
}

/* ── "Escúchalo" (v2): el unico bloque centrado de la pagina, mas estrecho y
   sobre el fondo de particulas, para romper el ritmo de secciones alineadas
   a la izquierda. Es la segunda y ultima seccion con textura. ── */
#escuchalo{
  background-image:linear-gradient(180deg,rgba(10,10,11,.5),rgba(10,10,11,.78)),url(../img/fondo-particulas.webp);
  background-size:cover;background-position:center;
  text-align:center;
}
#escuchalo .tb-cab{margin-bottom:clamp(20px,3vw,32px)}
#escuchalo .tb-bajada{margin-inline:auto}
#escuchalo .tb-embed{max-width:760px;margin-inline:auto;box-shadow:0 24px 60px rgba(0,0,0,.45)}

/* ── "Paquetes" (v2): cabecera centrada sobre la banda con textura; las tres
   tarjetas no cambian. ── */
#paquetes .tb-cab{text-align:center}
#paquetes .tb-bajada{margin-inline:auto}

/* ── "El evento" (v2): la foto recortada de Juanes al centro; a la izquierda el
   titulo (tamano normal de seccion) y el texto de apertura con una linea roja;
   a la derecha dos datos con icono. Fondo plano (sin textura). En movil se
   apila: titulo y apertura, foto, y los dos datos. ── */
.tb-evento{display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(24px,4vw,32px)}
.tb-evento__media{margin:0 auto;width:min(100%,440px)}
.tb-evento__media img{width:100%;height:auto;display:block}
.tb-evento__intro .tb-h2{margin-bottom:clamp(18px,2.4vw,28px)}
.tb-evento__intro p{
  margin:0;padding-left:18px;border-left:2px solid var(--ev-acento);
  font-size:clamp(14px,1.15vw,15px);line-height:1.6;font-weight:500;color:var(--ev-texto);
}
.tb-evento__datos{display:grid;gap:clamp(24px,4vw,48px)}
.tb-evento__dato p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ev-texto-suave)}
.tb-evento__ico{display:grid;justify-items:start;gap:14px;margin-bottom:16px;color:var(--ev-acento-claro)}
.tb-evento__ico svg{
  width:60px;height:60px;padding:16px;box-sizing:border-box;
  border:1.5px solid currentColor;border-radius:50%;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.tb-evento__ico::after{content:"";width:40px;height:2px;background:var(--ev-acento)}
@media (min-width:900px){
  .tb-evento{
    grid-template-columns:minmax(0,1fr) minmax(340px,1.5fr) minmax(0,1fr);
    column-gap:clamp(24px,3vw,44px);row-gap:0;align-items:start;
  }
  /* La foto sangra sobre el espacio entre columnas (el recorte tiene bordes
     transparentes, asi que puede pisar unos pixeles del canal) y, si las
     columnas de texto son mas altas, queda centrada en la fila. Va corrida
     un poco hacia la columna del texto de apertura. */
  .tb-evento__media{
    grid-column:2;grid-row:1;align-self:stretch;justify-self:stretch;position:relative;aspect-ratio:1;
    width:auto;margin:clamp(-24px,-2vw,-12px) clamp(-72px,-5vw,-32px) clamp(-40px,-2.5vw,-20px);
  }
  .tb-evento__media img{
    position:absolute;top:0;left:50%;transform:translateX(calc(-50% - clamp(0px,6vw - 50px,56px)));
    height:100%;width:100%;
    object-fit:contain;object-position:center;
  }
  .tb-evento__intro{grid-column:1;grid-row:1;padding-top:clamp(16px,2.5vw,32px)}
  .tb-evento__datos{grid-column:3;grid-row:1;padding-top:clamp(16px,2.5vw,32px);gap:clamp(28px,3vw,40px)}
  .tb-evento__dato:nth-child(2){margin-left:-24px}
}

/* ── 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}

/* ── Logo de DAVIarena sobre el titulo de "Cómo llegar" (v2). Version para
   fondo oscuro: la palabra "arena" pasa a blanco; el resto es el logo tal
   cual. Conviene reemplazarla por la version oficial en negativo si existe. ── */
.tb-llegar__logo{display:block;width:clamp(150px,15vw,190px);height:auto;margin:0 0 clamp(14px,1.6vw,20px)}

/* ── 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 columnas: las dos tarjetas y, al lado, los otros medios de pago. */
  #como-comprar .tb-wrap{display:grid;grid-template-columns:1fr 1fr minmax(240px,.8fr);gap:14px;align-items:stretch}
  #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}
}

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