/* ----- 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(97, 14, 213), 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;
  }
}


/* 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); }
}