/* ----- 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.08);
  background: #a50b0b;
  padding: 14px 20px;
  color: #ffffff !important;   /* 👈 TODO el texto en blanco */
  font-size: 0.9rem;
}

.footer-left,
.footer-right,
.footer-link {
  color: #ffffff !important;    /* 👈 enlaces también blancos */
  opacity: 1 !important;        /* 👈 sin opacidad gris */
}

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