/* ============================================================
   EDUKA · hero
   En desktop: texto a la izquierda y foto a la derecha.
   En mobile: la foto pasa a fondo completo con el texto encima.
   ============================================================ */

.hero{
  min-height:100svh;display:grid;grid-template-columns:1fr .82fr;align-items:center;
  gap:clamp(28px,5vw,80px);padding:120px var(--pad) 70px;position:relative;
}

.kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--cuero);line-height:2;margin-bottom:clamp(18px,3vw,34px);
}
.kicker span{opacity:.6}

.hero-title{display:flex;flex-direction:column;font-size:clamp(76px,15vw,210px);line-height:.84;color:var(--cuero)}
.hero-title .l2{margin-left:.34em;font-style:italic;color:var(--verde)}

.hero-tag{
  font-family:var(--serif);font-size:clamp(22px,2.7vw,36px);font-style:italic;line-height:1.25;
  margin:clamp(22px,3.4vw,42px) 0 clamp(26px,3.6vw,44px);max-width:15ch;color:var(--tinta);
}

.hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px}

.hero-photo{margin:0;position:relative}
.hero-photo img{width:100%;height:clamp(360px,78vh,760px);object-fit:cover;object-position:center 62%}
.hero-photo figcaption{
  margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cuero);opacity:.55;
}

/* ---------- gotita que baja por la línea ---------- */
.hero-scroll{position:absolute;left:var(--pad);bottom:34px;width:26px;height:44px}
.hero-scroll span{
  position:absolute;left:0;top:0;width:1px;height:44px;background:var(--linea);overflow:hidden;
}
.hero-scroll span::after{
  content:'';position:absolute;left:0;top:0;width:1px;height:14px;background:var(--fuego);
  animation:scrollDrop 2.8s cubic-bezier(.6,0,.3,1) infinite;
}
@keyframes scrollDrop{0%{transform:translateY(-14px)}60%,100%{transform:translateY(44px)}}

/* ---------- entrada · la clase .on la pone js/splash.js al terminar el splash ---------- */
#hero .hero-text,#hero .hero-photo{opacity:0;transform:translateY(22px);transition:opacity 1.4s ease,transform 1.6s var(--ease-suave)}
#hero.on .hero-text{opacity:1;transform:none;transition-delay:.1s}
#hero.on .hero-photo{opacity:1;transform:none;transition-delay:.3s}

@media (max-width:900px){
  /* la foto pasa a fondo a pantalla completa */
  .hero{display:block;padding:0;min-height:100svh;position:relative}
  .hero-photo{position:absolute;inset:0;margin:0}
  .hero-photo img{width:100%;height:100%;object-position:center 58%}
  .hero-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(42,36,29,.5) 0%,rgba(42,36,29,.18) 38%,rgba(42,36,29,.78) 100%)}
  .hero-photo figcaption{display:none}
  .hero-text{position:relative;z-index:3;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:120px var(--pad) 76px}
  .kicker,.hero-title,.hero-title .l2,.hero-tag{color:var(--crema-alta)}
  .hero-title .l2{color:var(--crema-alta);opacity:.85}
  .hero-tag{color:rgba(245,238,226,.92);max-width:18ch}
  .btn-quiet{color:var(--crema-alta);border-color:rgba(237,227,210,.4)}
  .hero-scroll{display:none}
}