/* ==========================================================
   TICKETIA — sistema de diseño
   Se carga SOLO desde web.layouts.ticketia. No toca app.css,
   header.css ni footer.css, así que el resto del sitio sigue
   funcionando con el tema viejo mientras se migra página por página.
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&family=Manrope:wght@400..800&display=swap');

:root{
  --ink:#0A0B0F; --ink-2:#12141A; --ink-3:#1A1E27;
  --line:#242935; --line-soft:#1B1F29;
  --paper:#F4F6F8; --muted:#98A1B3; --faint:#5C6577;
  --volt:#D4FF3F; --volt-dim:#A8CC2E; --volt-glow:rgba(212,255,63,.16);
  --ember:#FF5C2B;
  --ok:#2ECC8F; --warn:#FFB020; --danger:#FF4D4D;
  --display:'Archivo',system-ui,sans-serif;
  --body:'Manrope',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --beat:500ms; --bar:2000ms;           /* 120 BPM */
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--body);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
main{position:relative;z-index:2}
.display{font-family:var(--display);font-variation-settings:'wdth' 112,'wght' 800;
  letter-spacing:-.03em;line-height:.92;text-transform:uppercase;margin:0}
.ico{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ico-lg{width:28px;height:28px}

/* ---------- Botón bocina ---------- */
.tk-btn{position:relative;overflow:hidden;isolation:isolate;display:inline-block;
  font-family:var(--display);font-variation-settings:'wdth' 106,'wght' 700;
  text-transform:uppercase;letter-spacing:.05em;font-size:14px;
  background:var(--volt);color:#0A0B0F;border:0;border-radius:6px;
  padding:13px 24px;cursor:pointer;
  transition:transform 120ms var(--ease),box-shadow 240ms var(--ease)}
.tk-btn:hover{transform:translateY(-2px);box-shadow:0 12px 32px -8px var(--volt-glow)}
.tk-btn:active{transform:translateY(1px) scale(.985)}
.tk-btn .wave{position:absolute;border-radius:50%;transform:translate(-50%,-50%) scale(0);
  background:rgba(10,11,15,.28);pointer-events:none;animation:cone 620ms var(--ease) forwards}
@keyframes cone{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
.tk-btn-ghost{background:transparent;color:var(--paper);border:1px solid var(--line)}
.tk-btn-ghost:hover{border-color:var(--volt);color:var(--volt);box-shadow:none}
.tk-btn-ghost .wave{background:var(--volt-glow)}
.tk-btn-sm{padding:9px 15px;font-size:12px}

/* ---------- Nav ---------- */
.tk-nav{position:sticky;top:0;z-index:30;display:flex;align-items:center;
  justify-content:space-between;padding:14px 20px;background:rgba(10,11,15,.86);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft)}
.tk-logo{display:flex;align-items:center;gap:9px;font-family:var(--display);
  font-variation-settings:'wdth' 108,'wght' 800;font-size:21px;
  letter-spacing:-.04em;text-transform:uppercase}
.tk-navlinks{display:none;align-items:center;gap:15px}
.tk-navlink{color:var(--muted);font-size:14px;font-weight:600;transition:color .2s}
.tk-navlink:hover{color:var(--paper)}
.tk-burger{display:flex;flex-direction:column;gap:5px;background:none;border:0;
  padding:8px;cursor:pointer}
.tk-burger i{display:block;width:24px;height:2px;background:var(--paper);border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s}
.tk-nav.open .tk-burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.tk-nav.open .tk-burger i:nth-child(2){opacity:0}
.tk-nav.open .tk-burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.tk-drawer{position:fixed;inset:64px 0 auto 0;z-index:29;background:var(--ink-2);
  border-bottom:1px solid var(--line);padding:14px 20px 20px;display:none;
  flex-direction:column;gap:2px}
.tk-drawer.open{display:flex;animation:rise .35s var(--ease)}
.tk-drawer a{padding:14px 2px;border-bottom:1px solid var(--line-soft);
  font-size:15.5px;font-weight:700}
.tk-drawer a:last-child{border-bottom:0}

/* ---------- Hero ---------- */
.tk-hero{position:relative;display:grid;gap:34px;padding:44px 20px 56px}
.tk-hero::before{content:'';position:absolute;top:-160px;left:-180px;
  width:520px;height:520px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--volt-glow),transparent 68%);
  animation:breathe calc(var(--bar) * 2) ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.62;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
.tk-eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--volt);font-weight:800;margin:0 0 14px;display:flex;align-items:center;gap:8px}
.tk-hero h1{font-size:clamp(27px,7.4vw,60px);line-height:1.02;
  font-variation-settings:'wdth' 92,'wght' 800;margin:0 0 20px}
.tk-hero-lead{display:block;font-size:clamp(13px,3.2vw,20px);
  font-variation-settings:'wdth' 100,'wght' 600;letter-spacing:.06em;
  color:var(--muted);margin-bottom:12px;line-height:1.3}
.tk-hero-sub{color:var(--faint);font-size:14px;max-width:46ch;margin:0 0 26px;line-height:1.62}
.tk-hero-cta{display:flex;gap:11px;flex-wrap:wrap}

.tk-hero-card{position:relative;display:block;border-radius:20px;overflow:hidden;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.9);transition:transform .45s var(--ease)}
.tk-hero-card:hover{transform:translateY(-5px)}
.tk-hero-card .tk-art{aspect-ratio:4/5}
.tk-hero-meta{position:absolute;inset:auto 0 0 0;padding:22px;
  background:linear-gradient(transparent,rgba(10,11,15,.95) 62%)}
.tk-hero-meta h2{font-size:26px;margin:9px 0 4px}
.tk-hero-meta p{margin:0;color:var(--muted);font-size:13.5px}

/* ---------- Arte / portada ----------
   Las TARJETAS HERMANAS mantienen el MISMO tamaño: proporción fija 4/5
   y object-fit cover. Una portada vertical y una horizontal se ven igual. */
.tk-art{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ink-3)}
.tk-art img{width:100%;height:100%;object-fit:cover;display:block}
.tk-art-fallback{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-family:var(--display);
  font-variation-settings:'wdth' 64,'wght' 900;font-size:clamp(30px,8vw,56px);
  letter-spacing:-.05em;text-transform:uppercase;color:rgba(255,255,255,.85);
  mix-blend-mode:overlay;text-align:center;padding:10%;line-height:.85;
  background:radial-gradient(120% 90% at 20% 10%,#FF5C2B 0%,#7A1B00 45%,#120A08 100%)}

/* ---------- Secciones ---------- */
.tk-section{position:relative;z-index:2;padding:52px 20px}
.tk-section-alt{background:var(--ink-2)}
.tk-section-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;margin-bottom:24px}
.tk-section-head h2,.tk-section-title{font-size:clamp(28px,7.5vw,46px);margin:0}
.tk-section-title{margin-bottom:14px}
.tk-section-lede{color:var(--muted);max-width:56ch;margin:0 0 28px;font-size:15px}

/* Rejilla: filas iguales, tarjetas del MISMO alto siempre */
.tk-grid{display:grid;gap:16px;grid-template-columns:1fr;align-items:stretch}
.tk-card{position:relative;display:flex;flex-direction:column;border-radius:12px;
  background:var(--ink-2);border:1px solid var(--line-soft);overflow:hidden;height:100%;
  transition:transform .3s var(--ease),border-color .3s var(--ease)}
.tk-card:hover{transform:translateY(-3px);border-color:var(--line)}
.tk-card > *{position:relative;z-index:2}
.tk-card-body{padding:15px 17px 19px;display:flex;flex-direction:column;flex:1}
.tk-card-date{color:var(--volt);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:800;margin:0 0 6px;display:flex;align-items:center;gap:6px}
.tk-card-body h3{margin:0 0 3px;font-size:18px;font-weight:800;letter-spacing:-.01em}
.tk-card-venue{color:var(--muted);font-size:13.5px;margin:0 0 12px;display:flex;
  align-items:center;gap:6px}
.tk-card-foot{margin-top:auto}

/* Beat de neón: SOLO en eventos por agotarse. Si brillan todas, no dice nada.

   CORREGIDO: antes giraba un pseudo-elemento de 190% con un conic encima.
   En una tarjeta ancha el haz se estiraba en una cuña enorme, y sin
   overflow:hidden se salía de la tarjeta y tapaba el texto de al lado.
   Ahora la luz se pinta EN EL BORDE con dos fondos —uno en padding-box y
   otro en border-box—: no se deforma ni se puede escapar. */
@property --tk-giro{syntax:'<angle>';initial-value:0deg;inherits:false}

.tk-card.hot{
  border:1.5px solid transparent;
  background:
    linear-gradient(var(--ink-2),var(--ink-2)) padding-box,
    conic-gradient(from var(--tk-giro), transparent 0 68%,
      var(--volt-dim) 80%, var(--volt) 90%, #fff 94%, transparent 100%) border-box;
  animation:tk-giro 3.2s linear infinite;
}
.tk-card.ember{
  background:
    linear-gradient(var(--ink-2),var(--ink-2)) padding-box,
    conic-gradient(from var(--tk-giro), transparent 0 68%,
      #8A2E10 80%, var(--ember) 90%, #FFD3C2 94%, transparent 100%) border-box;
}
@keyframes tk-giro{to{--tk-giro:360deg}}
@supports not (background: conic-gradient(from var(--tk-giro), red, blue)){
  .tk-card.hot{border-color:var(--volt);animation:none}
}

.tk-chip{position:absolute;top:11px;left:11px;z-index:3;padding:6px 10px;border-radius:999px;
  font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  background:var(--ink);border:1px solid var(--line);display:inline-flex;align-items:center;gap:5px}
.tk-chip-warn{background:var(--warn);color:#14100A;border-color:transparent}
.tk-chip-out{background:var(--ink-3);color:var(--faint)}
.tk-card.sold .tk-art img,.tk-card.sold .tk-art-fallback{filter:grayscale(1);opacity:.42}

/* Medidor VU de disponibilidad */
.tk-vu{display:flex;gap:2px;margin:0 0 11px;height:8px}
.tk-vu i{flex:1;border-radius:1px;background:var(--line)}
.tk-vu i.on{background:var(--ok)}
.tk-vu i.on.mid{background:var(--warn)}
.tk-vu i.on.hi{background:var(--danger)}
.tk-vu-label{font-size:10.5px;color:var(--faint);letter-spacing:.09em;
  text-transform:uppercase;font-weight:800;margin:0 0 5px}

/* ---------- Pasos ---------- */
.tk-steps{list-style:none;padding:0;margin:0;display:grid;gap:24px}
.tk-steps li{border-top:1px solid var(--line);padding-top:17px}
.tk-step-num{display:flex;align-items:center;gap:10px;font-family:var(--display);
  font-variation-settings:'wdth' 78,'wght' 900;font-size:32px;color:var(--volt);
  margin-bottom:9px;line-height:1}
.tk-steps h3{margin:0 0 5px;font-size:17.5px}
.tk-steps p{margin:0;color:var(--muted);font-size:14.5px}

/* ---------- Organizadores: tarjetas hermanas de igual alto ---------- */
.tk-split{display:grid;gap:14px;grid-template-columns:1fr;align-items:stretch}
.tk-tile{padding:22px 20px;border-radius:12px;background:var(--ink-3);
  border:1px solid var(--line);display:flex;flex-direction:column;gap:9px;height:100%}
.tk-tile .ico{color:var(--volt)}
.tk-tile h3{margin:0;font-size:17px}
.tk-tile p{margin:0;color:var(--muted);font-size:14px}

/* ---------- Vacío ---------- */
.tk-empty{border:1px dashed var(--line);border-radius:14px;padding:44px 22px;
  text-align:center;color:var(--muted)}
.tk-empty .ico{color:var(--faint);width:34px;height:34px;margin-bottom:12px}
.tk-empty h3{margin:0 0 6px;font-size:19px;color:var(--paper)}
.tk-empty p{margin:0;font-size:14px}

/* ---------- Footer ---------- */
.tk-footer{position:relative;z-index:2;display:flex;flex-direction:column;gap:22px;
  padding:38px 20px;border-top:1px solid var(--line-soft);background:var(--ink-2)}
.tk-footer nav{display:flex;flex-wrap:wrap;gap:15px}
.tk-footer a{color:var(--muted);font-size:13.5px}
.tk-footer a:hover{color:var(--volt)}
.tk-footer-note{color:var(--faint);font-size:12.5px;margin:5px 0 0}

[data-reveal]{opacity:0;transform:translateY(18px)}
.in [data-reveal]{animation:rise .7s var(--ease) forwards;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes rise{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-reveal]{opacity:1;transform:none}
  html{scroll-behavior:auto}
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

@media (min-width:860px){
  .tk-nav{padding:16px 52px}
  .tk-navlinks{display:flex}
  .tk-burger{display:none}
  .tk-drawer{display:none!important}
  .tk-hero{grid-template-columns:1.12fr .88fr;align-items:center;padding:84px 52px 92px;gap:52px}
  .tk-section{padding:80px 52px}
  .tk-grid{grid-template-columns:repeat(3,1fr);gap:22px}
  .tk-steps{grid-template-columns:repeat(3,1fr);gap:32px}
  .tk-split{grid-template-columns:repeat(3,1fr);gap:18px}
  .tk-footer{flex-direction:row;justify-content:space-between;align-items:center;padding:46px 52px}
}