/* ═══ PROPUESTA F PARA LA BOLETERA ESTÁTICA ═════════════════════════════════
   tickets.html, evento.html y boletera.html no compilan con Next, así que no
   heredan globals.css. Esta hoja se carga AL FINAL de cada una y solo pisa el
   aspecto: mismas piezas, mismo orden, mismo texto. Lo que trae:

   · Bebas Neue como display (un solo peso: 400, con aire) e Instrument Serif
     en cursiva para los acentos, igual que el sitio.
   · Fondo con aura verde fija y grano, como la portada.
   · Tarjetas con radio grande y marco verde al pasar; botones en pastilla
     con la tipografía display.
   ═══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Instrument+Serif:ital@1&family=Instrument+Sans:wght@400;500;600;700&display=swap');

:root{
  --disp:'Bebas Neue',Impact,'Arial Narrow',sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Instrument Sans',system-ui,sans-serif;
  --marco-f:0 0 0 1px var(--huum),0 24px 60px -24px rgba(0,0,0,.9),0 0 34px -8px rgba(0,255,164,.4);
}
/* Bebas no tiene negritas: sin esto el navegador las inventa y se emborrona. */
html{font-synthesis:none}
body{
  background:
    radial-gradient(70vw 50vh at 88% -8%,rgba(0,255,164,.13),transparent 70%),
    radial-gradient(60vw 60vh at -10% 35%,rgba(0,40,27,.55),transparent 70%),
    var(--negro);
  background-attachment:fixed;
}
/* Grano fino encima de todo, sin capturar clics. */
body::after{
  content:'';position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ─── Tipografía display ──────────────────────────────────────────────────── */
h1,h2,h3,.marca .tk{
  font-weight:400!important;font-variation-settings:normal!important;
  letter-spacing:.012em!important;text-transform:uppercase;text-wrap:balance;
}
h1{line-height:.9!important}
h2{line-height:.94!important}
h3{line-height:1!important}
.marca .tk{font-size:19px;letter-spacing:.04em!important}

/* Acentos: la cursiva serif en verde, como "que sí suena" en la portada. */
h1 em,h2 em,.lead em{
  font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;
  letter-spacing:-.01em;color:var(--huum);
}
.lead em{font-size:1.14em;line-height:1}

/* Cifras de la marca (fechas, precios, totales) también en display. */
.ev .fch b,.ev .pr b,.tipo .pr,.total .gr b,.li b,.rc .p,.v b,.pa::before,.vc .ic{
  font-weight:400!important;font-variation-settings:normal!important;letter-spacing:.02em;
}

/* Etiquetas en pastilla con un punto que late, el gesto de F. */
.promo-eti,.eti{letter-spacing:.2em}

/* ─── Botones en pastilla, con la display ─────────────────────────────────── */
.cta-vende,.cta-b,.ev .cp,.promo-enviar,.pagar,.enviar,.b1,.b2,.ba.dest{
  font-family:var(--disp)!important;font-weight:400!important;text-transform:uppercase;
  letter-spacing:.07em;border-radius:999px!important;
  transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s,background .2s,color .2s;
}
.cta-vende,.cta-b,.ev .cp{font-size:15px!important}
.nav-t > a.cta-vende{font-size:15px}
.promo-enviar,.pagar,.enviar{font-size:19px!important;padding-block:15px!important}
.b1,.b2{font-size:19px!important}
.cta-vende:hover,.cta-b:hover,.promo-enviar:hover,.pagar:hover,.enviar:hover,.b1:hover{
  transform:translateY(-2px);box-shadow:0 0 0 1px rgba(0,255,164,.5),0 12px 34px rgba(0,255,164,.3);
}
.b2:hover{border-color:var(--huum);color:var(--huum)}

/* ─── Tarjetas: radio grande y marco verde al pasar ───────────────────────── */
.ev,.rc,.vc,.ex,.vm,.caja,.compra,.promo-form{border-radius:22px!important;border-color:rgba(255,255,255,.08)}
.ev,.rc,.vc,.ex,.vm{transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .4s,border-color .3s}
.ev:hover,.rc:hover,.vc:hover,.ex:hover,.vm:hover{
  border-color:var(--huum);transform:translateY(-6px);box-shadow:var(--marco-f);
}
.ev.ago:hover{box-shadow:none}
.ev .im img,.rc img,.ex img{transition:transform 1s cubic-bezier(.22,1,.36,1),filter .6s}

/* El módulo de compra es la pieza que importa: marco verde fijo. */
.compra{border:2px solid var(--huum)!important;box-shadow:0 0 0 6px rgba(5,5,5,.9),0 24px 60px -20px rgba(0,0,0,.9),0 0 30px -6px rgba(0,255,164,.35)}
.compra h2{font-size:1.5rem!important;letter-spacing:.04em!important}

/* Bloques de cierre con la textura de piedra de la portada. */
.cierre,.promo-form{
  background:
    radial-gradient(120% 90% at 20% 0%,rgba(255,255,255,.05),transparent 60%),
    #111311 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='turbulence' baseFrequency='.035' numOctaves='3' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .13 0 0 0 0 .14 0 0 0 0 .13 0 0 0 .8 -.38'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 30px 80px -30px rgba(0,0,0,.9);
}

/* Campos: foco verde con halo. */
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px rgba(0,255,164,.18)}

@media (prefers-reduced-motion:reduce){
  .ev,.rc,.vc,.ex,.vm,.ev .im img,.rc img,.ex img{transition:none}
  .ev:hover,.rc:hover,.vc:hover,.ex:hover,.vm:hover{transform:none}
}

/* ─── Escalas: Bebas es angosta y toda en mayúsculas, necesita más cuerpo
       que la grotesca de antes para pesar lo mismo en la página. ────────── */
.busca h1{font-size:clamp(2.6rem,7.2vw,4.8rem)!important}
.promo-txt h2{font-size:clamp(2.2rem,5.4vw,3.6rem)!important;max-width:18ch}
.ev h3{font-size:1.55rem!important}
.ev .pr b{font-size:1.7rem!important}
.ev .fch b{font-size:22px!important}
.enc h1{font-size:clamp(2.8rem,7.4vw,5rem)!important}
.sec h2{font-size:clamp(1.8rem,3.8vw,2.4rem)!important}
.rc h3{font-size:1.3rem!important}
.tipo .pr{font-size:1.5rem!important}
.total .gr b{font-size:2.3rem!important}
.li b{font-size:1.4rem!important}
.hero-txt h1{font-size:clamp(3.2rem,9vw,6.6rem)!important}
.sec-t h2{font-size:clamp(2.2rem,5.4vw,3.6rem)!important}
.vc h3,.pa h3,.ex h3,.vm h3{font-size:1.4rem!important}
.cierre h2{font-size:clamp(2rem,4.6vw,3rem)!important}
.v b{font-size:2.6rem!important}
.pa::before{font-size:2.2rem!important}

/* ─── Menú del sitio (lo inyecta /_menu.js) ─────────────────────────────────
   Botón al final de la barra y panel a pantalla completa con todas las
   secciones de Live Huum, para volver al sitio desde la boletera. */
.lh-menu-b{display:inline-flex;align-items:center;gap:9px;flex-shrink:0;margin-left:10px;
  background:none;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:9px 14px;
  color:var(--hueso);cursor:pointer;font-family:var(--disp);font-size:16px;letter-spacing:.08em;
  text-transform:uppercase;line-height:1;transition:border-color .2s,color .2s}
.lh-menu-b:hover,.lh-menu-b[aria-expanded="true"]{border-color:var(--huum);color:var(--huum)}
.lh-hamb{display:flex;flex-direction:column;justify-content:space-between;width:16px;height:11px}
.lh-hamb i{display:block;height:2px;background:currentColor;border-radius:2px}
@media(max-width:560px){.lh-menu-t{display:none}.lh-menu-b{padding:10px 11px;margin-left:6px}}
.lh-sin-scroll{overflow:hidden}
.lh-menu{position:fixed;inset:0;z-index:150;overflow-y:auto;background:rgba(5,5,5,.97);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:0 max(22px,env(safe-area-inset-right,0px)) 48px max(22px,env(safe-area-inset-left,0px));
  animation:lh-entra .35s cubic-bezier(.22,1,.36,1)}
.lh-menu[hidden]{display:none}
@keyframes lh-entra{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.lh-menu-cab{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  padding-block:16px;border-bottom:1px solid rgba(255,255,255,.08)}
.lh-menu-casa{font-size:13px;font-weight:600;color:var(--huum)}
.lh-menu-casa:hover{text-decoration:underline}
.lh-cerrar{width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:none;
  color:var(--hueso);font-size:26px;line-height:1;cursor:pointer;transition:border-color .2s,color .2s}
.lh-cerrar:hover{border-color:var(--huum);color:var(--huum)}
.lh-menu-nav{max-width:1180px;margin:0 auto;display:grid;gap:8px 40px;padding-top:24px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.lh-grupo{border-bottom:1px solid rgba(255,255,255,.07);padding-bottom:14px}
.lh-grupo-t{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--tenue);margin:8px 0 6px}
.lh-grupo ul{list-style:none}
.lh-grupo a{display:block;padding:9px 0}
.lh-grupo b{display:block;font-family:var(--disp);font-weight:400;font-size:30px;line-height:1;
  letter-spacing:.02em;text-transform:uppercase;color:var(--hueso);transition:color .2s}
.lh-grupo a span{display:block;margin-top:4px;font-size:12.5px;color:var(--tenue)}
.lh-grupo a:hover b,.lh-grupo a[aria-current="page"] b{color:var(--huum)}
@media (prefers-reduced-motion:reduce){.lh-menu{animation:none}}
/* En celular el botón de menú necesita su lugar: los íconos sociales de la
   barra se van (compartir e Instagram siguen en la página y en el pie). */
@media(max-width:480px){.barra-in .soc{display:none!important}}
.cta-b,.cta-vende{white-space:nowrap}
@media(max-width:400px){.cta-b{font-size:13px!important;padding:9px 13px!important}}
/* Con el botón de menú no caben marca, "Sube tu evento" y menú en un
   celular angosto: el CTA se va al menú ("Vende tus boletos") y a la sección
   para promotores de la propia cartelera. */
@media(max-width:480px){.barra-in{gap:10px!important}.nav-t > a.cta-vende{display:none!important}.lh-menu-b{margin-left:0}}

/* ═══ Cartelera (tickets.html) a la manera de la portada F ═══════════════════ */
.f-calada{position:absolute;left:50%;top:10px;z-index:-1;transform:translateX(-50%);pointer-events:none;
  font-family:var(--disp);font-size:clamp(120px,22vw,300px);line-height:.8;text-transform:uppercase;
  white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px rgba(0,255,164,.16)}
.f-rotulo{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--huum)}
.f-rotulo::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--huum);box-shadow:0 0 12px rgba(0,255,164,.8)}
.pg-tickets .busca{position:relative;isolation:isolate;text-align:center;padding-block:clamp(70px,9vw,120px) 30px;overflow-x:clip}
.pg-tickets .busca::before{content:'';position:absolute;left:50%;top:-380px;z-index:-2;width:760px;height:760px;
  transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(0,255,164,.18),transparent 62%);pointer-events:none}
.pg-tickets .busca h1{margin-top:18px;font-size:clamp(3.4rem,10vw,8.5rem)!important;text-shadow:0 6px 40px rgba(0,0,0,.6)}
.pg-tickets .busca h1 em{display:block;margin-top:-.04em;font-size:.42em;line-height:1.05;text-shadow:0 0 24px rgba(0,255,164,.45)}
.pg-tickets .busca > p:not(.f-calada){max-width:56ch;margin:18px auto 0;font-size:16px}
.pg-tickets .busca .f-calada{margin:0;font-size:clamp(120px,22vw,300px);color:transparent;top:40px}
.pg-tickets .barra-b{justify-content:center;max-width:860px;margin-inline:auto;margin-top:34px}
.pg-tickets .res{border-bottom-color:rgba(255,255,255,.07)}

/* Tarjetas: marco verde, foto en noche, ligera inclinación que se endereza. */
.pg-tickets .rejilla{gap:34px 28px;padding-top:40px}
.pg-tickets .ev{border:2px solid var(--huum)!important;border-radius:20px!important;background:#0b0e0c;
  box-shadow:0 0 0 6px rgba(5,5,5,.9),0 30px 60px -24px rgba(0,0,0,.9)}
.pg-tickets .rejilla .ev:nth-child(3n+1){transform:rotate(-1.6deg)}
.pg-tickets .rejilla .ev:nth-child(3n+2){transform:rotate(1.3deg) translateY(10px)}
.pg-tickets .rejilla .ev:nth-child(3n){transform:rotate(-.8deg)}
.pg-tickets .rejilla .ev:hover{transform:translateY(-8px) rotate(0)!important;
  box-shadow:0 0 0 6px rgba(5,5,5,.9),0 0 40px -4px rgba(0,255,164,.55)!important}
.pg-tickets .ev .im{aspect-ratio:4/3}
.pg-tickets .ev .im::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.3),transparent 40%,rgba(5,5,5,.75))}
.pg-tickets .ev .im img{filter:brightness(.62) saturate(.75)}
.pg-tickets .ev:hover .im img{filter:brightness(.75) saturate(1);transform:scale(1.06)}
.pg-tickets .ev .fch,.pg-tickets .ev .ciudad{z-index:1}
.pg-tickets .ev .fch{background:none;backdrop-filter:none;left:14px;top:12px;text-align:left}
.pg-tickets .ev .fch b{font-family:var(--serif)!important;font-style:italic;font-size:40px!important;line-height:.9;
  text-shadow:0 0 14px rgba(0,255,164,.5)}
.pg-tickets .ev .fch span{font-family:var(--disp);font-size:16px;letter-spacing:.12em}
.pg-tickets .ev .cuerpo{padding:18px 20px 20px}
.pg-tickets .ev h3{font-size:2.1rem!important}
.pg-tickets .ev .pr b{font-size:1.9rem!important}
.pg-tickets .ev.ago{opacity:1;filter:grayscale(1)}
.pg-tickets .ev.ago{border-color:#3a3d3c!important}
@media (prefers-reduced-motion:reduce){.pg-tickets .rejilla .ev{transform:none!important}}

/* ═══ Pie F de la boletera ══════════════════════════════════════════════════ */
.f-pie{position:relative;isolation:isolate;margin-top:90px;background:#070908;overflow-x:clip}
.f-pie::before{content:'';position:absolute;right:-160px;top:0;z-index:-1;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,255,164,.14),transparent 62%);pointer-events:none}
.f-pie-cierre{text-align:center;padding-block:70px 46px}
.f-pie-t{font-family:var(--disp);font-size:clamp(3rem,8vw,6rem);line-height:.92;text-transform:uppercase;letter-spacing:.01em}
.f-pie-t em{display:block;font-family:var(--serif);font-style:italic;text-transform:none;font-size:.5em;line-height:1.05;
  color:var(--huum);letter-spacing:-.01em}
.f-pie-b{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}
.f-pie-b a{display:inline-flex;align-items:center;border-radius:999px;padding:14px 24px;font-family:var(--disp);
  font-size:18px!important;letter-spacing:.07em;text-transform:uppercase;transition:transform .25s,box-shadow .25s,border-color .2s,color .2s}
.f-pie-b .cta-vende{background:var(--huum);color:#000}
.f-pie-b .cta-vende:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(0,255,164,.5),0 12px 34px rgba(0,255,164,.3)}
.f-pie-b .f-linea{border:1px solid rgba(255,255,255,.3);color:var(--hueso)}
.f-pie-b .f-linea:hover{border-color:var(--huum);color:var(--huum)}
.f-pie-mapa{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:28px;border-radius:26px;padding:34px;
  background:radial-gradient(120% 90% at 20% 0%,rgba(255,255,255,.07),transparent 60%),linear-gradient(rgba(8,10,9,.18),rgba(8,10,9,.18)),#0d0f0e url('/textura/papel-negro.jpg') center/cover;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 30px 80px -30px rgba(0,0,0,.9)}
.f-pie-eti{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--huum);margin-bottom:10px}
.f-pie-mapa a,.f-pie-mapa button{display:block;padding:5px 0;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--disp);font-size:22px;letter-spacing:.04em;text-transform:uppercase;color:var(--hueso);transition:color .2s}
.f-pie-mapa a:hover,.f-pie-mapa button:hover{color:var(--huum)}
.f-pie-legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;margin-top:34px;
  padding-block:24px 40px;border-top:1px solid rgba(255,255,255,.07);font-size:12px;color:var(--tenue)}
.f-pie-legal .legales{display:flex;gap:18px;flex-wrap:wrap}
.f-pie-legal a:hover{color:var(--huum)}