/*
 * Portada: header sobre el hero y hero a pantalla completa (una sola pantalla).
 * Medidas de referencia a 1200 × 848 (título, texto, botones y arte a la derecha).
 */

#landing{
  position:relative;
  overflow-x:clip;
}

/* ---------- Header ---------- */
#landing > .site-header{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:10;
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  min-height:max(600px, 100svh);
  background:
    radial-gradient(55% 32% at 26% 100%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%),
    radial-gradient(30% 38% at 70% 62%, rgba(255,255,255,.35), rgba(255,255,255,0) 72%),
    linear-gradient(90deg,
      rgba(255,255,255,0) 30%,
      rgba(255,255,255,.30) 33.5%,
      rgba(255,255,255,.42) 40%,
      rgba(255,255,255,.30) 45.5%,
      rgba(255,255,255,0) 48%),
    linear-gradient(90deg,
      rgba(255,255,255,0) 66%,
      rgba(255,255,255,.18) 72%,
      rgba(255,255,255,0) 80%),
    var(--bg);
}

.hero__copy{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  min-height:inherit;
  /* El título ocupa la mitad izquierda: "PROGRAMACIÓN" mide ~7.25 veces el tamaño de la fuente. */
  --title-size:clamp(40px, min((47vw - 56px) / 7.25, 15svh), 190px);
  width:47vw;
  padding:0 0 0 var(--gutter);
  padding-top:calc(23svh - 0.27 * var(--title-size));
  padding-bottom:17svh;
  pointer-events:none;
}
.hero__copy > *{ pointer-events:auto; }

.hero__title{
  font-size:var(--title-size);
  line-height:.98;
  color:#000;
  margin-left:.04em;
}
.hero__line{
  display:block;
  white-space:nowrap;
}

.hero__bottom{
  margin-top:auto;
  padding-top:40px;
}

.hero__lede{
  max-width:26em;
  color:#111;
  font-size:clamp(16px, 1.15vw, 23px);
  line-height:1.32;
  letter-spacing:0;
}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 20px;
  margin-top:clamp(28px, 6.5svh, 72px);
}
.hero__start{
  min-width:clamp(134px, 10vw, 200px);
  min-height:clamp(38px, 2.9vw, 56px);
  font-size:clamp(14px, .95vw, 18px);
}

/* Las niñas, completas, centradas en la mitad derecha y apoyadas abajo (js/ninas.js). */
.hero-art{
  position:absolute;
  z-index:1;
  top:5svh;
  bottom:0;
  left:47vw;
  right:0;
  pointer-events:none;
}
.hero-art__canvas{
  display:block;
  width:100%;
  height:100%;
}

/* ---------- Responsive ---------- */
/* Pantallas poco panorámicas (p. ej., 1920 × 1080): las niñas llenan todo el ancho de su mitad
   y empiezan justo en 47vw. El título se achica un poco para dejar ~32 px antes del arte.
   (Más panorámicas, como 1366 × 657, las niñas quedan centradas y sobra espacio: no cambia nada.) */
@media (min-width: 700px) and (max-aspect-ratio: 11 / 6){
  .hero__copy{
    --title-size:clamp(40px, min((47vw - var(--gutter) - 32px) / 7.25, 15svh), 190px);
  }
}

/* Celulares y tabletas en vertical: texto arriba y las niñas debajo, en el alto que queda
   (todo en una pantalla). js/ninas.js ajusta el arte completo dentro de su caja. */
@media (max-width: 699px), (max-width: 1023px) and (orientation: portrait){
  .site-header{
    padding:0 var(--gutter);
  }
  .hero{
    min-height:100vh;
    min-height:100svh;
    display:flex;
    flex-direction:column;
  }
  .hero__copy{
    --title-size:calc((100vw - 2 * var(--gutter)) / 7.4);
    width:auto;
    min-height:0;
    padding:calc(var(--header-h) + 24px) var(--gutter) 0;
  }
  .hero__title{ margin-left:0; }
  .hero__bottom{
    margin-top:0;
    padding-top:28px;
    padding-bottom:20px;
  }
  .hero__lede{
    max-width:34em;
    font-size:clamp(15px, 2.4vw, 20px);
    line-height:1.4;
  }
  .hero__actions{ margin-top:24px; gap:12px 16px; }
  .hero-art{
    position:relative;
    top:auto; bottom:auto; left:auto; right:auto;
    width:100%;
    aspect-ratio:auto;
    flex:1 1 0;
    min-height:clamp(240px, 60vw, 520px);   /* alto mínimo del arte: en celulares muy bajos la página baja un poco */
    margin-top:0;
    overflow:hidden;
  }
}