/* =====================================================================
   03 · HERO
   - Escritorio: PARTIDO (texto sobre oscuro | foto en columna). La foto se
     ve casi entera y se amplía menos → más nítida (caso MN).
   - Móvil: foto a pantalla completa con texto abajo y doble degradado.
   - Altura acotada: min(100vh, 880px) → sin hueco en pantallas altas.
   - Secuencia de entrada: una bien hecha > animaciones por todas partes.
   ===================================================================== */

.hero{ position:relative; overflow:hidden; background:var(--c-oscuro); color:var(--c-sobre-oscuro); }

/* ---------- Partido ---------- */
.hero-split{
  display:grid; grid-template-columns:55fr 45fr;
  height:min(100vh, 880px); min-height:640px;
}
.hero-texto{
  position:relative; z-index:2;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--cab-h) + 40px) clamp(28px, 6vw, 96px) 80px max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter)));
}
.hero-texto h1{ max-width:12ch; color:var(--c-sobre-oscuro); }
.hero-texto h1:has(.linea){ max-width:none; }   /* con líneas explícitas, el corte lo decide el copy */
.hero-texto h1 .linea{ display:block; }
.hero-texto .lead{ margin-top:26px; max-width:40ch; color:var(--c-sobre-oscuro-suave); }
.hero-texto .btns{ margin-top:38px; }
.hero-datos{ display:flex; gap:clamp(24px,4vw,48px); margin-top:56px; padding-top:28px; border-top:1px solid var(--c-linea-oscuro); font-size:var(--fs-peq); color:var(--c-sobre-oscuro-suave); }
.hero-datos b{ display:block; font-family:var(--f-display); font-size:1.8rem; font-weight:500; color:var(--c-sobre-oscuro); line-height:1.1; }

.hero-media{ position:relative; overflow:hidden; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; }
/* Degradado superior (≈0.5 → 0.18) ADEMÁS del inferior: legibilidad de la cabecera */
.hero-media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,.18) 22%, rgba(0,0,0,0) 45%),
    linear-gradient(to top, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 35%);
}

/* Costura: cuelga del PADRE (no de .hero-media, que tiene overflow:hidden)
   en la misma fracción del grid (55%). Relleno + línea en la MISMA pieza SVG. */
.hero-split > .costura{
  position:absolute; z-index:3; top:0; bottom:0; left:calc(55% - 1px); width:clamp(70px, 8vw, 130px);
  pointer-events:none;
}
.costura svg{ width:100%; height:100%; display:block; overflow:visible; }
.costura .relleno{ fill:var(--c-oscuro); }
.costura .linea{ fill:none; stroke:var(--c-acento); stroke-width:1.5; vector-effect:non-scaling-stroke; }

/* ---------- Pleno (una imagen de fondo, texto encima) ---------- */
.hero-pleno{ height:min(100vh, 880px); min-height:620px; display:flex; align-items:flex-end; }
.hero-pleno .hero-media{ position:absolute; inset:0; }
/* Pleno: además de los degradados de arriba/abajo, velo lateral bajo el texto (legibilidad) */
.hero-pleno .hero-media::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg, color-mix(in srgb, var(--c-oscuro) 82%, transparent) 0%, color-mix(in srgb, var(--c-oscuro) 40%, transparent) 45%, transparent 70%); }
.hero-pleno .hero-texto{ justify-content:flex-end; }
.hero-pleno .hero-texto h1{ max-width:16ch; font-size:clamp(2.4rem, 1.5rem + 3vw, 4rem); }
.hero-pleno .hero-texto{ padding-bottom:clamp(60px, 9vw, 120px); }
.hero-pleno .scroll-hint{ left:50%; }

/* ---------- Indicador de scroll ---------- */
.scroll-hint{
  position:absolute; z-index:4; left:77.5%; bottom:30px; transform:translateX(-50%);   /* centrado sobre la foto: lejos de los datos del texto y del flotante */
  display:flex; flex-direction:column; text-decoration:none; align-items:center; gap:12px; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--c-sobre-oscuro-suave);
}
.scroll-hint i{ position:relative; width:1px; height:44px; background:var(--c-linea-oscuro); overflow:hidden; }
.scroll-hint i::after{ content:""; position:absolute; left:0; top:-40%; width:1px; height:40%; background:var(--c-acento); animation:hintBaja 2.2s var(--ease) infinite; }
@keyframes hintBaja{ to{ top:100%; } }
/* Núcleo 9: en ventanas bajas choca con los flotantes → fuera */
@media (max-height:760px){ .scroll-hint{ display:none; } }

/* ---------- Secuencia de entrada (solo con JS: degradación) ---------- */
.js .hero [data-entrada]{ opacity:0; transform:translateY(22px); animation:entra .9s var(--ease-salida) forwards; animation-delay:calc(var(--i, 0) * 120ms + 150ms); }
.js .hero .hero-media img{ transform:scale(1.06); animation:acerca 2.2s var(--ease-salida) forwards; }
@keyframes entra{ to{ opacity:1; transform:none; } }
@keyframes acerca{ to{ transform:scale(1); } }

/* ---------- Móvil: foto a pantalla completa, texto abajo ---------- */
@media (max-width:900px){
  .hero-split{ display:flex; flex-direction:column; height:auto; min-height:0; }
  .hero-split .hero-media{ order:-1; }   /* en móvil la foto va primero y el texto sube sobre su degradado */
  .hero-split .hero-media{ position:relative; height:min(78svh, 720px); min-height:460px; }
  .hero-split .hero-media img{ object-position:50% 18%; }
  .hero-split .hero-media::after{
    background:
      linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,.18) 20%, rgba(0,0,0,0) 40%),
      linear-gradient(to top, var(--c-oscuro) 0%, rgba(0,0,0,0) 45%);
  }
  .hero-split .hero-texto{ margin-top:-140px; padding:0 var(--gutter) 64px; }
  .hero-split > .costura{ display:none; }   /* en móvil la firma pasa a la ola de salida */
  .hero-texto h1{ max-width:none; }
  .hero-datos{ margin-top:40px; }
  .hero-datos b{ font-size:1.4rem; }
  .scroll-hint{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .js .hero [data-entrada], .js .hero .hero-media img{ animation:none; opacity:1; transform:none; }
  .scroll-hint i::after{ animation:none; }
}