/* ============================================================
   SUPERBOLETOS · DETALLE DEL EVENTO
   Portada con el cartel sobre su propio fondo desenfocado, barra
   pegajosa color hueso al hacer scroll y zonas de precios con el
   plano del Arena.

   Orden de hojas en evento.html:
     base.css → inicio.css → compra.css → evento.css → sesion.css
   inicio.css presta la cabecera pública, .contenedor y el pie;
   compra.css presta las clases del plano (.seccion, .globo, .lupa)
   para no reescribir la geometría del bowl.
   ============================================================ */

/* ============================================================
   PORTADA
   ============================================================ */
.portada-evento{
  position:relative; overflow:hidden;
  padding:52px 0 70px;
  background:linear-gradient(160deg, var(--arte-a,#4a2036), var(--arte-b,#1a1030) 68%);
}
/* El fondo es el mismo cartel, ampliado y desenfocado. */
.portada-evento::before{
  content:''; position:absolute; inset:-8%;
  background:var(--imagen-fondo, none) center/cover no-repeat;
  filter:blur(38px) saturate(1.1) brightness(.62);
  opacity:.85;
}
.portada-evento::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,14,38,.32), rgba(20,14,38,.72));
}
.portada-evento > *{ position:relative; z-index:2; }

.portada-evento__interior{
  display:grid; grid-template-columns:360px minmax(0,1fr);
  align-items:start; gap:clamp(28px,4vw,70px);
}

/* Cartel de 360 × 475: el formato vertical del póster de la gira,
   no el cuadrado de los eventos de arena. */
.cartel{
  position:relative;
  border-radius:3px; overflow:hidden;
  aspect-ratio:360/475;
  background:linear-gradient(150deg, var(--arte-a,#4a2036), var(--arte-b,#1a1030));
  box-shadow:0 26px 60px rgba(6,4,20,.55);
}
.cartel__foto{ width:100%; height:100%; object-fit:cover; display:block; }

.evento-cabeza{ padding-top:6px; color:#fff; }

.sello-meses{
  display:inline-block; margin-bottom:16px;
  padding:6px 12px; border-radius:3px;
  background:#5ce0b4; color:#08302a;
  font-size:11px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
}

.evento-cabeza__lugar{
  display:flex; align-items:flex-start; gap:9px;
  font-family:var(--fuente-serif); font-style:italic; font-weight:600;
  font-size:clamp(18px,1.6vw,24px); line-height:1.2;
  color:rgba(255,255,255,.9);
}
.evento-cabeza__lugar svg{ width:19px; height:19px; margin-top:5px; flex:none; color:var(--carmin); }
.evento-cabeza__lugar-texto{ display:block; min-width:0; }
.evento-cabeza__ciudad{
  display:block; font-size:clamp(13px,1.05vw,16px); color:rgba(255,255,255,.68);
}

.evento-cabeza__titulo{
  margin-top:12px;
  font-size:clamp(28px,3.4vw,46px); font-weight:800;
  line-height:1.07; letter-spacing:-.015em; text-transform:uppercase;
}

.evento-cabeza__fecha{
  margin-top:12px;
  font-family:var(--fuente-serif); font-style:italic; font-weight:700;
  font-size:clamp(16px,1.4vw,21px);
}

.evento-cabeza__compra{
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(16px,2.4vw,36px);
  margin-top:26px;
}
.evento-cabeza__rango{
  font-size:clamp(21px,2.2vw,29px); font-weight:700; letter-spacing:-.01em;
  padding-right:clamp(16px,2.4vw,36px);
  border-right:1px solid rgba(255,255,255,.25);
}

.btn-comprar{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:238px; padding:16px 34px;
  border:0; border-radius:var(--radio-pastilla);
  background:var(--degradado-cta); color:#fff;
  font-size:13px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease;
}
.btn-comprar:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(224,36,94,.4); }

.btn-compartir{
  width:38px; height:38px; margin-left:auto;
  display:grid; place-items:center;
  background:none; border:0; border-radius:50%;
  color:var(--carmin); cursor:pointer;
  transition:background .15s ease;
}
.btn-compartir svg{ width:22px; height:22px; }
.btn-compartir:hover{ background:rgba(255,255,255,.12); }

.evento-cabeza__regla{
  height:1px; margin-top:22px;
  background:rgba(255,255,255,.22);
}

/* ============================================================
   BARRA PEGAJOSA
   Fija en vez de sticky: así no deja un hueco en el flujo
   mientras está escondida.
   ============================================================ */
.barra-evento{
  position:fixed; z-index:58;
  top:var(--cabecera-alto); left:0; right:0;
  background:#fdfbef;
  border-bottom:1px solid #eae5cf;
  transform:translateY(-115%);
  opacity:0; pointer-events:none;
  transition:transform .26s ease, opacity .26s ease;
}
.barra-evento--visible{ transform:translateY(0); opacity:1; pointer-events:auto; }

.barra-evento__interior{
  display:flex; align-items:center; gap:clamp(14px,3vw,52px);
  min-height:64px; padding-block:8px;
}
.barra-evento__titulo{
  font-size:clamp(15px,1.4vw,21px); font-weight:700;
  color:var(--indigo); letter-spacing:-.01em; text-transform:uppercase;
}
.barra-evento__dato{
  display:flex; align-items:center; gap:9px;
  font-size:13.5px; line-height:1.25; color:var(--tinta-suave);
}
.barra-evento__dato svg{ width:18px; height:18px; color:var(--tinta-tenue); flex:none; }
.barra-evento__rango{
  font-size:clamp(15px,1.4vw,20px); font-weight:700; color:var(--indigo);
}
.barra-evento .btn-comprar{
  min-width:172px; margin-left:auto;
  padding:13px 30px;
  box-shadow:0 8px 22px rgba(180,20,58,.32);
}

/* ============================================================
   BANCOS CON MESES SIN INTERESES
   ============================================================ */
.bancos{
  background:var(--papel);
  padding:12px 22px 18px;
  border-bottom:1px solid var(--linea);
}
.bancos__lista{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:9px;
}
.banco{
  padding:6px 12px;
  border:1px solid var(--linea); border-radius:2px;
  background:var(--papel);
  font-size:11px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:var(--tinta-suave);
}
.banco--ga{ background:#5ce0b4; border-color:#5ce0b4; color:#08302a; font-weight:800; }

/* ============================================================
   INFORMACIÓN DEL EVENTO
   ============================================================ */
.info-evento{ padding:44px 0 10px; }

.info-evento__titulo{
  font-size:clamp(24px,2.4vw,31px); font-weight:700;
  color:var(--indigo); letter-spacing:-.02em;
}

.info-evento__cuerpo{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(24px,4vw,60px);
  margin-top:22px;
}

.solapa{
  display:inline-block;
  padding:10px 26px 12px;
  border-bottom:3px solid var(--carmin);
  font-size:12.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--morado-btn);
}
.info-evento__regla{ height:1px; background:var(--linea); margin-bottom:22px; }

/* Texto con corte y "Ver más": el degradado avisa que sigue. */
.texto-corte{
  position:relative;
  max-height:118px; overflow:hidden;
  font-size:14.5px; line-height:1.62; color:var(--tinta-suave);
  transition:max-height .28s ease;
}
.texto-corte::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:52px;
  background:linear-gradient(transparent, var(--lienzo));
  pointer-events:none;
}
.texto-corte--abierto{ max-height:1400px; }
.texto-corte--abierto::after{ opacity:0; }
.texto-corte p + p{ margin-top:12px; }

.ver-mas{
  display:block; margin:8px 0 0 auto;
  background:none; border:0; padding:4px;
  color:var(--morado-btn); font-size:13.5px; cursor:pointer;
}
.ver-mas:hover{ text-decoration:underline; }

.observaciones{
  padding:22px 24px 20px;
  border-left:1px solid var(--linea);
  background:var(--papel-tenue);
}
.observaciones__titulo{
  font-size:11px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--carmin);
  margin-bottom:14px;
}
.observaciones .texto-corte::after{ background:linear-gradient(transparent, var(--papel-tenue)); }
.observaciones li{
  position:relative; padding-left:17px; margin-bottom:8px;
  font-size:14px; line-height:1.5; color:var(--tinta-suave);
}
.observaciones li::before{
  content:''; position:absolute; left:2px; top:8px;
  width:5px; height:5px; border-radius:50%; background:var(--morado-btn);
}

/* ============================================================
   ZONAS DE PRECIOS
   ============================================================ */
.zonas{ padding:34px 0 56px; }

.zonas__encabezado{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 20px;
  margin-bottom:6px;
}
.zonas__titulo{
  font-size:clamp(24px,2.4vw,31px); font-weight:700;
  color:var(--indigo); letter-spacing:-.02em;
}
.zonas__recinto{
  font-family:var(--fuente-serif);
  font-size:clamp(19px,1.9vw,25px); color:var(--tinta-suave);
}
.zonas__llegar{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--morado-btn); font-size:14px; text-decoration:none;
}
.zonas__llegar svg{ width:17px; height:17px; color:var(--carmin); }
.zonas__llegar:hover{ text-decoration:underline; }

.zonas__cuerpo{
  display:grid; grid-template-columns:minmax(0,1fr) 352px;
  gap:20px; margin-top:20px;
  align-items:start;
}

/* ---------------- plano ---------------- */
.caja-plano{
  position:relative;
  background:var(--papel);
  border:1px solid var(--linea); border-radius:2px;
  padding:16px;
}
.caja-plano .lupa{
  position:absolute; z-index:4; top:16px; right:16px;
}
#planoEvento{
  display:block; width:100%; height:auto;
  max-height:560px; margin-inline:auto;
}
.caja-plano__nota{
  margin-top:6px; text-align:center;
  font-size:12px; color:var(--tinta-tenue);
}

/* ---------------- presentaciones ---------------- */
.presentaciones{
  background:var(--papel);
  border:1px solid var(--linea); border-radius:2px;
  padding:20px 18px 18px;
}
.presentaciones__titulo{
  text-align:center;
  font-family:var(--fuente-serif); font-weight:600;
  font-size:25px; color:var(--tinta-suave);
}
.presentaciones__moneda{
  margin:10px 0 14px; text-align:center;
  font-size:12.5px; line-height:1.45; color:var(--tinta-suave);
}
.presentaciones__moneda b{ color:var(--tinta); font-weight:700; }

.selector-funcion{
  width:100%; padding:11px 14px;
  border:1px solid var(--linea); border-radius:2px;
  background:var(--papel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6a8d' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/17px;
  font:inherit; font-size:14px; color:var(--tinta);
  appearance:none; -webkit-appearance:none;
  cursor:pointer;
}
.selector-funcion:focus{ outline:none; border-color:var(--morado-btn); }

.presentaciones__fechas{
  margin-top:8px; text-align:center;
  font-size:12px; color:var(--tinta-tenue);
}

.lista-zonas{
  margin-top:14px;
  max-height:472px; overflow-y:auto;
  scrollbar-width:thin;
}
.lista-zonas::-webkit-scrollbar{ width:9px; }
.lista-zonas::-webkit-scrollbar-thumb{ background:#c9cbdd; border-radius:9px; }

.zona{
  position:relative;
  border-left:7px solid var(--zona,#ccc);
  background:#fff;
  background:color-mix(in srgb, var(--zona,#ccc) 13%, #fff);
  margin-bottom:2px;
}
.zona__cuerpo{
  width:100%; display:block; text-align:left;
  padding:13px 16px 14px;
  background:none; border:0; cursor:pointer;
  transition:filter .15s ease;
}
.zona__cuerpo:hover:not(:disabled){ filter:brightness(.97); }
.zona__cuerpo:disabled{ cursor:not-allowed; }

.zona__nombre{
  display:block;
  font-size:12px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--tinta);
}
.zona__precio{
  display:block; margin-top:5px;
  font-size:19px; font-weight:700; letter-spacing:-.01em; color:var(--tinta);
}
.zona__msi{
  display:block; margin-top:2px;
  font-size:12.5px; color:var(--tinta-suave);
}
.zona__sello{
  display:inline-block; margin-top:8px;
  padding:2px 7px; border-radius:2px;
  background:#dfe1ec; color:var(--tinta-suave);
  font-size:9.5px; font-weight:700; letter-spacing:.08em;
}
.zona__agotado{
  display:inline-block; margin-top:7px;
  padding:2px 8px; border-radius:2px;
  background:var(--asiento-vendido); color:#4c4e63;
  font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
}
.zona--agotada{ filter:saturate(.25); }
.zona--agotada .zona__precio{ color:var(--tinta-tenue); text-decoration:line-through; }

/* ============================================================
   PANTALLAS CHICAS
   ============================================================ */
@media (max-width:1024px){
  .zonas__cuerpo{ grid-template-columns:minmax(0,1fr); }
  .presentaciones{ order:-1; }
  .lista-zonas{ max-height:none; }
}

@media (max-width:860px){
  .portada-evento__interior{ grid-template-columns:minmax(0,1fr); }
  .cartel{ max-width:360px; }
  .info-evento__cuerpo{ grid-template-columns:minmax(0,1fr); }
  .observaciones{ border-left:0; border-top:1px solid var(--linea); }
  .barra-evento__dato{ display:none; }
}

@media (max-width:640px){
  .barra-evento__rango{ display:none; }
  .barra-evento .btn-comprar{ min-width:0; padding:11px 20px; }
  .evento-cabeza__compra{ gap:14px; }
  .evento-cabeza__rango{ border-right:0; padding-right:0; }
  .btn-comprar{ min-width:0; width:100%; }
  .btn-compartir{ margin-left:0; }
}

/* ============================================================
   MÓVIL · ≤768px
   Sólo teléfono. El detalle de evento en escritorio no cambia.
   ============================================================ */
@media (max-width: 768px){

  /* ------------------------------------------------------------
     PORTADA
     El cartel vertical de 360 × 475 ocupaba casi dos pantallas
     antes de llegar al botón COMPRAR. Se limita y se centra.
     ------------------------------------------------------------ */
  .portada-evento{ padding:24px 0 30px; }
  .portada-evento__interior{ gap:20px; }

  .cartel{
    max-width:none;
    width:min(240px, 62%);
    margin-inline:auto;
  }

  .sello-meses{ margin-bottom:12px; font-size:11px; }
  .evento-cabeza{ padding-top:0; }
  .evento-cabeza__titulo{ font-size:clamp(25px, 7.2vw, 34px); margin-top:10px; }
  .evento-cabeza__lugar{ font-size:18px; }
  .evento-cabeza__compra{ gap:14px; margin-top:20px; }
  .evento-cabeza__rango{ font-size:22px; }

  .btn-comprar{
    width:100%; min-width:0;
    min-height:54px; padding:16px 24px;
  }
  .btn-compartir{ width:44px; height:44px; margin-left:0; }

  /* ------------------------------------------------------------
     BARRA PEGAJOSA
     Su `top` sale de --cabecera-alto, que base.css ya recalculó
     para la cabecera de dos filas. Aquí sólo se compacta.
     ------------------------------------------------------------ */
  .barra-evento__interior{ min-height:58px; gap:12px; padding-block:7px; }
  .barra-evento__titulo{ font-size:14.5px; }
  .barra-evento .btn-comprar{
    width:auto; min-width:0;
    min-height:44px; padding:12px 18px;
    margin-left:auto;
  }

  /* ------------------------------------------------------------
     BANCOS
     ------------------------------------------------------------ */
  .bancos{ padding:10px 14px 14px; }
  .bancos__lista{ gap:7px; }
  .banco{ font-size:11px; padding:7px 11px; }

  /* ------------------------------------------------------------
     INFORMACIÓN
     ------------------------------------------------------------ */
  .info-evento{ padding:28px 0 6px; }
  .info-evento__cuerpo{ gap:22px; margin-top:16px; }
  .solapa{ padding:10px 18px 12px; }
  .texto-corte{ font-size:15px; max-height:150px; }
  .ver-mas{ min-height:44px; padding:10px 6px; font-size:14px; }
  .observaciones{ padding:18px 16px 16px; }
  .observaciones li{ font-size:14.5px; }

  /* ------------------------------------------------------------
     ZONAS DE PRECIOS
     ------------------------------------------------------------ */
  .zonas{ padding:22px 0 36px; }
  .zonas__cuerpo{ gap:16px; margin-top:16px; }
  .zonas__encabezado{ gap:6px 14px; }
  .zonas__llegar{ min-height:44px; align-items:center; font-size:14.5px; }

  .caja-plano{ padding:10px; }
  .caja-plano .lupa{ top:10px; right:10px; }
  #planoEvento{ max-height:54vh; }
  .caja-plano__nota{ font-size:12.5px; }

  .presentaciones{ padding:16px 14px 14px; }
  .presentaciones__titulo{ font-size:21px; }
  .presentaciones__moneda{ font-size:13px; }

  /* 16 px es el mínimo para que iOS no haga zoom al abrir el
     desplegable de funciones. */
  .selector-funcion{ font-size:16px; min-height:50px; }
  .presentaciones__fechas{ font-size:12.5px; }

  /* Reserva mientras js/evento.js arma los niveles de precio */
  #listaZonas:empty{ display:block; min-height:320px; }
  .lista-zonas{ max-height:none; }

  .zona__cuerpo{ padding:15px 14px 16px; min-height:66px; }
  .zona__nombre{ font-size:12.5px; }
  .zona__precio{ font-size:20px; }
  .zona__msi{ font-size:13px; }
  .zona__sello, .zona__agotado{ font-size:11px; padding:3px 8px; }
}

/* ============================================================
   TODAS LAS FECHAS DE LA GIRA
   Enlaces reales en el HTML hacia las siete ciudades: ver la nota
   en evento.html sobre por qué no basta con el <select> de
   Presentaciones para que un rastreador las descubra.
   ============================================================ */
.fechas-gira{ padding:26px 0 6px; }
.fechas-gira__titulo{
  font-size:13px; font-weight:700; letter-spacing:.03em;
  color:var(--tinta-suave); margin:0 0 12px;
}
.fechas-gira__lista{
  display:flex; flex-wrap:wrap; gap:10px;
}
.fechas-gira__lista a{
  display:inline-block;
  padding:8px 16px;
  border-radius:var(--radio-pastilla, 999px);
  border:1px solid var(--linea);
  background:var(--papel-tenue);
  color:var(--indigo-hondo);
  font-size:13px; font-weight:600;
  text-decoration:none;
  transition:background .15s ease, border-color .15s ease;
}
.fechas-gira__lista a:hover,
.fechas-gira__lista a:focus-visible{
  background:var(--lienzo);
  border-color:var(--morado-btn);
}

/* ============================================================
   TELÉFONO ANGOSTO · ≤400px
   ============================================================ */
@media (max-width: 400px){
  .cartel{ width:min(210px, 58%); }
  .barra-evento__titulo{ font-size:13.5px; }
  .barra-evento .btn-comprar{ padding:12px 14px; letter-spacing:.04em; }
}

/* ============================================================
   EVENTO NO ENCONTRADO / INACTIVO
   ------------------------------------------------------------
   js/evento.js añade esta clase al <body> cuando el ?id= de la
   URL no corresponde a ningún evento real, o corresponde a uno
   que todavía no tiene función ni boletos cargados. En vez de
   mostrar el plano, los precios o el "Comprar" (que serían de
   otro evento), se ocultan y sólo queda la portada con un
   mensaje claro. Ver SB.pintarSEO en js/seo-evento.js para las
   señales de SEO (title, canonical, robots) de este mismo caso.
   ============================================================ */
body.evento-no-encontrado .franja-pago,
body.evento-no-encontrado .bancos,
body.evento-no-encontrado .zonas,
body.evento-no-encontrado .barra-evento,
body.evento-no-encontrado .sello-meses,
body.evento-no-encontrado .evento-cabeza__compra,
body.evento-no-encontrado .info-evento .copia-gira,
body.evento-no-encontrado .info-evento .observaciones,
body.evento-no-encontrado .info-evento .ver-mas{
  display:none;
}