/* ----- Layout principal ----- */
.hero{
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr; /* 53% img / 47% texto */
  gap: 32px;
  align-items: center;
  min-height: 78dvh;
}

/* Izquierda: imagen + glow */
.hero__left{
  position: relative;
  display: grid;
  place-items: center;
}

.hero__img{
  width: clamp(320px, 36vw, 520px);
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 36px rgba(0,0,0,.45));
}

/* --- GLOW local (respiración más notoria) --- */
.hero__glow-local{
  position: absolute;
  z-index: -1;
  width: clamp(560px, 44vw, 640px);
  height: clamp(560px, 44vw, 640px);
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgb(204, 139, 18), transparent 72%),
    radial-gradient(closest-side, rgb(119, 0, 210), transparent 74%);
  filter: blur(8px) saturate(1.05);
  animation: glow-breathe 5.5s ease-in-out infinite; /* 👈 más visible */
  translate: 0 6px;
}


/* “Respirar”: escala + brillo + leve desplazamiento */
@keyframes glow-breathe{
  0%   { transform: scale(0.98) translateY(2px); opacity:.82; filter: blur(8px) saturate(1.00); }
  50%  { transform: scale(1.04) translateY(0);   opacity:1;    filter: blur(6px) saturate(1.10); }
  100% { transform: scale(0.98) translateY(2px); opacity:.82; filter: blur(8px) saturate(1.00); }
}

/* Asegúrate de que el contenedor no lo tape */
.hero__left{ position: relative; display:grid; place-items:center; }
/* Derecha: tipografías y jerarquía */
.brand,
.kicker,
.title{
  font-family: "Bebas Neue", Inter, system-ui, sans-serif;
  letter-spacing: .6px;
  line-height: .92;
  margin: 0;
}

/* 1) CLUB 95 (más grande) */
.brand{
  font-size: clamp(48px, 7vw, 88px);
  margin-bottom: 6px;
}

/* ----- SOUNDCHECK ----- */
.kicker{
  font-family: "Anton", sans-serif;
  font-size: clamp(42px, 6vw, 72px);
  letter-spacing: -2px;
  color: #ff9f40;       /* 👈 naranja vibrante */
  margin-bottom: 12px;
  text-transform: uppercase;
}



/* 3) PREVENTA OFICIAL (ligeramente menor que brand) */
.title{
  font-size: clamp(34px, 5vw, 64px);
  margin-bottom: 14px;
}

/* Texto y CTA */
.lead{ max-width: 500px; }
.cta{
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 👈 así el botón no se estira a 100% */
  gap: 8px;
}


.note{ opacity: .9; }

/* --- BOTÓN (más naranja y un poco más ancho, sin ocupar 100%) --- */
.btn-cta{
  background: #da4c05;            /* naranja base */
  color: #fff;
  padding: 12px 24px;             /* un poco más ancho que antes */
  border-radius: 10px;
  font-weight: 800;
  font-size: 17px;
  text-align: center;
  border: none;
  display: inline-block;          /* no se estira */
  width: auto;
  min-width: 200px;               /* 👈 asegura un ancho agradable */
  max-width: fit-content;
  transition: background .2s ease, box-shadow .2s ease, transform .06s ease, opacity .2s ease;
}
.btn-cta:hover{
  background: #6701ff;            /* tono más oscuro en hover */
  box-shadow: 0 8px 22px rgba(232,109,19,.35);
  transform: translateY(-1px);
}
.btn-cta:active{
  background: #cc5f11;            /* aún más oscuro al presionar */
  transform: translateY(0);
  box-shadow: 0 4px 14px rgba(204,95,17,.35);
}

/* Forzar estilo del CTA por encima de .btn base */
.btn-cta,
.btn.btn-cta{
  background: #ff7417 !important;   /* mismo color que SOUNDCHECK */
  background-image: none !important; /* anula posibles gradientes previos */
  color: #fff !important;
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 17px;
  border: none;
  display: inline-block;
  width: auto;
  min-width: 200px;
  max-width: fit-content;
  transition: background .2s ease, box-shadow .2s ease, transform .06s ease, opacity .2s ease;
}
.btn-cta:hover,
.btn.btn-cta:hover{
  background: #b820e6 !important;
  box-shadow: 0 8px 22px rgba(230,117,32,.35);
  transform: translateY(-1px);
}

/* ===== Hero responsive fix ===== */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.hero__left,
.hero__right {
  flex: 1;
}

/* En móviles: texto primero, muñequito abajo */
@media (max-width: 768px) {
  .hero {
    flex-direction: column;
    align-items: flex-start; /* alinear a la izquierda */
  }
  .hero__right {
    order: 1; /* Texto y botón primero */
    width: 100%; /* ocupa todo el ancho */
    text-align: left; /* 👈 mantiene alineación izquierda */
  }
  .hero__left {
    order: 2; /* Muñequito después */
    width: 100%;
  }
  .hero__img {
    max-width: 80%;
    margin: 1rem auto 0; /* centramos solo la imagen */
    display: block;
  }
}

/* Botón verde */
.btn-success{ background: #15b86a; color: #fff; }


/* Modal básico */
.modal{
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: grid; place-items: center; z-index: 100;
}
.modal.hidden{ display: none; }
.modal-card{
  width: min(92vw, 420px);
  background: #161024; color: #fff; border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  padding: 16px;
}
.form-row{ margin: 10px 0; }
.form-row label{ display:block; font-weight:800; margin-bottom:6px; }
.modal-actions{ display:flex; gap:.5rem; justify-content:flex-end; margin-top: 12px; }

/* Asegura que los inputs nunca desborden la tarjeta del modal */
.modal-card .input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Botón verde para tickets de cortesía */
.btn-success {
  background: #252c29;   /* verde */
  color: #fff;
  padding: 25.rem 35.rem;
  font-size: .7rem;
  border-radius: 999px;
}
.btn-success:hover {
  background: #075831;
}

/* Evita que el <input type=number> muestre spinners */
#courtesyCount {
  appearance: textfield;       /* estándar */
  -moz-appearance: textfield;  /* Firefox */
}
#courtesyCount::-webkit-outer-spin-button,
#courtesyCount::-webkit-inner-spin-button {
  -webkit-appearance: none;    /* Chrome/Safari */
  margin: 0;
}

/* Un poco de margen lateral en la tarjeta por si la pantalla es muy estrecha */
.modal {
  padding: 10px;
}
.modal-card {
  margin: 0 auto;
}

.tabs-row {
  display: flex;
  align-items: center;
}

.tabs-row .tabs {
  display: flex;
  gap: .5rem;
}

#btnCourtesy {
  margin-left: auto;         /* lo manda a la derecha */
  border: 0;
  border-radius: 999px;
  padding: .35rem .8rem;
  font-weight: 800;
  font-size: .85rem;
  background: #3a0e45;       /* verde menos chillón */
  color: #fff;
  cursor: pointer;
}

#btnCourtesy:hover {
  background: #61198b;       /* verde más oscuro al pasar */
}

#btnExport {
  margin-left: auto;         /* lo manda a la derecha */
  border: 0;
  border-radius: 999px;
  padding: .35rem .8rem;
  font-weight: 800;
  font-size: .85rem;
  background: #094722;       /* verde menos chillón */
  color: #fff;
  cursor: pointer;
}

#btnExport:hover {
  background: #065e13;       /* verde más oscuro al pasar */
}

/* Rediseño de la nota de fase */
.phase-note{ margin-top:10px; font-weight:normal; } /* evita heredar bold */
.phase-note__title{
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:.02em;
  line-height:1.05;
  font-size:clamp(20px, 2.2vw, 32px); /* más pequeño que HALLOWEEN */
}


/* Título de fase usando la MISMA fuente que .brand (CLUB 95), pero en mini */
.brand--mini{
  display:inline-block;
  font-size:clamp(20px, 2.2vw, 32px); /* más chico que HALLOWEEN */
  line-height:1.05;
  font-weight:900;      /* ajusta si tu .brand ya fuerza el peso */
  letter-spacing:.02em; /* similar a tu estilo actual */
  margin:0;
}

/* Mantén el subtítulo en la línea de abajo, un poco más pequeño */
.phase-note__subtitle{
  margin-top:4px;
  font-weight:700;
  font-size:clamp(12px, 1.2vw, 15px);
  opacity:.95;
}

/* separa más las letras de "PREVENTA FASE 1" */
.phase-note .brand--mini{
  letter-spacing: .08em;   /* prueba .06em–.12em según te guste */
}

/* ===== Footer ===== */
.landing-footer {
  border-top: 1px solid rgba(255,255,255,0.06);
  background: #120d1f;
  padding: 14px 20px;
  color: #b9b2d6;
  font-size: 0.9rem;
}
.footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.footer-left {
  opacity: 0.85;
}
.footer-right {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.footer-link {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  opacity: 0.8;
  transition: opacity .2s;
}
.footer-link:hover {
  opacity: 1;
}
@media (max-width: 600px) {
  .footer-inner {
    flex-direction: column;
    text-align: center;
    gap: 6px;
  }
}


/* en móvil puedes abrir un poco más si quieres */
@media (max-width: 640px){
  .phase-note .brand--mini{ letter-spacing: .10em; }
}

/* Responsive */
@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; gap: 20px; }
  .hero__img{ width: clamp(300px, 58vw, 480px); }
  .hero__glow-local{ width: clamp(320px, 70vw, 560px); height: clamp(320px, 70vw, 560px); }
}

/* ========== BLOQUE CENTRAL: Texto "terror" centrado ========== */
.doce-hero{
  position:absolute;             /* cambia a absolute */
  inset:0;                       /* ocupa todo el contenedor */
  z-index:3;
  display:flex;
  flex-direction:column;
  justify-content:center;        /* centra vertical */
  align-items:center;            /* centra horizontal */
  text-align:center;
  padding:0 16px;
}

/* título de terror centrado */
.horror-title{
  transform: translateY(-4%); /* pequeño ajuste para alinearlo con la “panza” */
  user-select:none;
}

/* resto igual */
.horror-title .l{
  display:block;
  line-height:.92;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-weight:900;
  color:var(--horror-red);
  -webkit-text-stroke: 1px rgba(0,0,0,.65);
  text-shadow:
    0 1px 0 rgba(255,255,255,.06),
    0 2px 0 rgba(0,0,0,.45),
    0 6px 18px rgba(255, 0, 0, .28),
    0 0 34px rgba(255, 34, 38, .25),
    0 0 64px rgba(255, 34, 38, .18);
  filter: drop-shadow(0 18px 36px rgba(0,0,0,.55));
}

/* Centrado del bloque de título (ya lo tenías): */
.doce-hero{
  position:absolute; top:50%; left:50%;
  transform: translate(-50%, -46%);
  z-index:3; width:min(92vw, 1100px); padding:0 16px; text-align:center;
}

/* ===== BOTÓN “COMPRAR AHORA” ajustado ===== */

/* Botón base (más grande y con glow ámbar) */
.doce-btn{
  background: linear-gradient(180deg, #ff7a1c 0%, #ff4e00 100%);
  color:#fff;
  border:0;
  border-radius:14px;
  padding:1.1rem 2.2rem;            /* más alto y ancho */
  font-weight:900;
  font-size:clamp(15px, 1.4vw, 20px);
  cursor:pointer;
  text-decoration:none;
  box-shadow:0 0 18px rgba(255,120,30,.35),
             0 0 36px rgba(255,90,10,.25);
  transition:transform .1s ease, box-shadow .2s ease, opacity .2s ease;
}
.doce-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 0 22px rgba(255,140,40,.45),
             0 0 50px rgba(255,80,0,.35);
}

/* Posicionamiento “en el mar” */
.doce-btn--sea{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top: calc(50% + 32vh);            /* <- más abajo (ajusta + o -) */
  z-index:3;
}
@media (min-width:992px){
  .doce-btn--sea{ top: calc(50% + 32vh); }  /* aún más abajo en pantallas grandes */
}
@media (max-width:480px){
  .doce-btn--sea{ top: calc(50% + 28vh); }  /* móvil ligeramente más arriba */
}

/* ========= PALETA (verde oscuro + naranja) ========= */
:root{
  --ink:#0a0f12;            /* casi negro con tinte verdoso */
  --deep:#0d1620;           /* verde petróleo oscuro (fondo) */
  --deep-2:#0e1c28;         /* variante */
  --lime:#0bd49a;           /* verde fosfo “linterna” */
  --lime-2:#0baa76;
  --amber:#ff7a1c;
  --amber-2:#ff4e00;
  --text:#e7f4ef;           /* texto claro ligeramente verdoso */
}

/* ========= Fondo de la franja (event-band) ========= */
.event-band{
  background: radial-gradient(120% 120% at 50% 0%, rgba(8,20,24,.75), var(--deep) 58%);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.05);
  padding: 22px 0 24px;
}
.event-title{ color: var(--text); }

/* ========= Logo DOCE más grande ========= */
.event-logo{
  height: 120px; width:auto; object-fit:contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.45));
}
@media (min-width:1200px){ .event-logo{ height: 150px; } }
@media (max-width:520px){  .event-logo{ height: 90px; } }

/* ========= Tarjetas de premios con tinte verdoso ========= */
.prize-card{
  background: radial-gradient(90% 120% at 50% 0%, rgba(11,212,154,.08), rgba(14,28,40,.88));
  border:1px solid rgba(11,212,154,.18);
}
.prize-card::before{
  background:
    radial-gradient(60% 90% at 50% 0%, rgba(255,120,30,.18), transparent 60%),
    radial-gradient(40% 80% at 50% 100%, rgba(11,212,154,.16), transparent 70%);
}
/* números con glow rojo leve + verde de ambiente */
.pc-amount{
  color:#fff;
  text-shadow:
    0 0 10px rgba(255,40,40,.28),
    0 0 22px rgba(11,212,154,.25);
}
.pc-amount span{ color:var(--amber); }

/* ========= Botones unificados (“Reserva tu entrada”) ========= */
.doce-btn,
.event-cta,
.doce-cta--band{
  background: linear-gradient(180deg, var(--amber) 0%, var(--amber-2) 100%);
  color:#fff; border:0; border-radius:14px;
  padding: 0.95rem 1.35rem;
  font-weight:900; font-size:clamp(15px,1.4vw,18px);
  text-decoration:none; cursor:pointer;
  box-shadow: 0 0 16px rgba(255,120,30,.28), 0 12px 26px rgba(0,0,0,.35);
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease, color .2s;
}
.doce-btn:hover,
.event-cta:hover,
.doce-cta--band:hover{
  /* hover verde fosfo */
  background: linear-gradient(180deg, var(--lime) 0%, var(--lime-2) 100%);
  box-shadow:
    0 0 14px rgba(11,212,154,.55),
    0 0 36px rgba(11,212,154,.35),
    0 14px 28px rgba(0,0,0,.38);
  transform: translateY(-2px);
}

/* ========= Badge “Cover Q65” con presencia ========= */
.cover-badge{
  display:flex; align-items:center; gap:8px;
  background: rgba(11,212,154,.10);
  border: 1px solid rgba(11,212,154,.35);
  color:#fff;
  border-radius: 14px;
  padding: .45rem .75rem;
  box-shadow: inset 0 0 24px rgba(11,212,154,.10),
              0 0 22px rgba(11,212,154,.18);
  margin-bottom: 10px;
}
.cover-badge .label{
  font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color: var(--text);
}
.cover-badge .price{
  font-weight:900; font-size: 1.15rem; line-height:1;
  color:#fff;
  text-shadow: 0 0 10px rgba(11,212,154,.45);
}

/* ========= Lineup DJs EDGE + MEJÍA ========= */
.lineup{
  display:flex; align-items:center; gap:10px; margin:10px 0 6px;
  color:#bfeee1;
}
.dj-and{ opacity:.8; font-weight:900; letter-spacing:.05em; }
.dj-chip{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  padding:.42rem .7rem;
  border-radius: 999px;
  background: rgba(11,212,154,.10);
  border:1px solid rgba(11,212,154,.28);
  font-weight:900; letter-spacing:.04em;
  text-shadow: 0 0 10px rgba(11,212,154,.22);
}
.dj-chip .eq{
  width:12px; height:12px; display:inline-block; position:relative;
}
.dj-chip .eq::before, .dj-chip .eq::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg,
      rgba(11,212,154,1) 0 2px, transparent 2px 6px,
      rgba(11,212,154,.8) 6px 8px, transparent 8px 12px);
  animation: eqBlink 1.1s ease-in-out infinite;
}
@keyframes eqBlink{
  0%,100%{ opacity:.65; filter: drop-shadow(0 0 6px rgba(11,212,154,.35)); }
  50%{    opacity:1;   filter: drop-shadow(0 0 10px rgba(11,212,154,.65)); }
}

/* ========= Franja “doce-band” (si la mantienes) con la nueva paleta ========= */
.doce-band{
  background: linear-gradient(180deg, var(--deep-2), var(--deep));
  border-top:1px solid rgba(255,255,255,.06);
}
.doce-brand{ color: var(--text); }
.doce-info{ color:#bfeee1; }