:root{
      /* Alturas base */
      --header-h: 120px;                     /* altura del header */
      --chars-h: clamp(120px, 26vh, 340px);   /* alto responsivo de personajes */
      --hero-gap: .4rem;                    /* separación entre texto y botón */
}

*{box-sizing:border-box;margin:0;padding:0}

/* ================= HEADER SUPERIOR ================= */
    .main-header{
      height: var(--header-h);
      display:flex; align-items:center; justify-content:center;
      background:#fff;
      padding:0;
      box-shadow:0 2px 5px rgba(0,0,0,.05);
      position:relative; z-index:10;
    }
    .main-header img{
      height:50px; width:auto; max-width:90%;
    }

    /* ================= HERO ================= */
    /* === HERO AJUSTE DE ALTURA EXACTA === */
.hero{
  position: relative;
  height: calc(100svh - var(--header-h));   /* hero = viewport - header */
  color:#fff;
  overflow:hidden;
  background: url('../img/Fondo_Final.png') center/cover no-repeat;
  padding:0; margin:0;
}
@supports (height: 100dvh){
  .hero{ height: calc(100dvh - var(--header-h)); }
}

/* === CONTENEDOR INTERNO DEL HERO ===
   (IMPORTANTE: no uses grid-rows aquí; mantenlo simple) */
.hero-inner{
  position: relative;   /* contexto para .hero-characters (absolute) */
  height: 100%;         /* ocupa todo el alto del hero */
  width: 100%;
  display: flex;
  align-items: center;  /* centrado vertical del bloque de texto */
  justify-content: center;
  text-align: center;
  padding: clamp(12px, 3.5vh, 36px) 16px; /* respiro superior; nada abajo */
  overflow: hidden;
}

/* === BLOQUE DE TEXTO COMPACTO ===
   (reservamos espacio inferior para que NO choque con la imagen) */
.hero-content{
  position: relative;
  z-index: 2;                         /* por encima de los personajes */
  width: min(92vw, 960px);
  display: grid;
  place-items: center;
  gap: .45rem;
  /*padding-bottom: clamp(80px, var(--chars-h), 40vh); /* ← RESERVA espacio */
  padding-bottom: clamp(83px, 45vh, 49vh);
}
.hero-content .kicker{
  margin:0; text-transform:uppercase; letter-spacing:.14em; font-weight:800; opacity:.95;
}
.hero-content h1{
  margin:0; line-height:1.12; font-weight:900;
  font-size: clamp(1.55rem, 4.5vw, 3rem);
  text-wrap: balance;
}
.play{
  width:64px; height:64px; margin:.3rem auto 0;
  border-radius:50%; background:rgba(255,255,255,.9);
  display:grid; place-items:center;
  box-shadow:0 8px 18px rgba(0,0,0,.25), inset 0 0 0 6px rgba(255,255,255,.45);
}
.play::after{
  content:""; border-left:12px solid #f23c5e;
  border-top:9px solid transparent; border-bottom:9px solid transparent;
  transform:translateX(2px);
}

/* === IMAGEN DE PERSONAJES PEGADA ABAJO === */
/* Escritorio: sin límites, usa tamaño natural */
.hero-characters{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  filter: drop-shadow(0 16px 28px rgba(0,0,0,.35));
  pointer-events: none;
}

/* Móvil: que ocupe TODO el ancho disponible */
@media (max-width: 768px){
  .hero-characters{
    width: 100%;          /* llena el ancho del hero */
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;  /* quita cualquier límite previo */
  }
}


/* ====== RESPONSIVE FINO ====== */
@media (max-width: 768px){
  :root{
    --header-h: 72px;
    --chars-h: clamp(110px, 24vh, 260px);
  }
  .hero-content{ gap:.35rem; }
  .hero-content h1{
    font-size: clamp(1.35rem, 6.2vw, 2.1rem);
    line-height: 1.1;
  }

}
@media (max-height: 700px){
  :root{ --chars-h: clamp(95px, 22vh, 220px); }

  .hero-content{
    padding-bottom: clamp(83px, 21vh, 49vh) !important;
  }

  

}


@media (max-width: 768px){
  .hero{
    height: calc(65vh - var(--header-h)); /* reduce el alto del hero en móvil */
  }
  @supports (height: 100dvh){
    .hero{ height: calc(65dvh - var(--header-h)); }
  }

  .hero-content{
    padding-bottom: clamp(83px, 21vh, 49vh) !important;
  }
}