/* ==========================================================================
   pages/inicio.css — Estilos exclusivos de index.html (hero principal)
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Altura mínima fija: el hero ocupa su sitio desde el primer pintado, carguen o
     no las fotos (el collage va en absoluto y nunca define la altura). */
  min-height: var(--alto-hero);
  padding-block: var(--pad-hero-arriba) var(--pad-hero-abajo);
  color: var(--c-blanco);
  background: var(--c-abismo);
}

/* Collage 2×2 de fondo: salmón, camarón / tilapia, alimento balanceado */
.hero__collage {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--space-1);
}
.hero__collage img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
}

/* Velo: oscuro a la izquierda (donde va el texto) y casi transparente a la
   derecha, para que las fotos se vean sin perder contraste en el texto */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, transparent 55%, var(--overlay-abismo-suave) 100%),
    linear-gradient(90deg, var(--overlay-abismo-fuerte) 0%, var(--overlay-abismo-suave) 50%, var(--overlay-abismo-leve) 100%);
}

/* En móvil el hero es alto y estrecho: una columna de 4 franjas apaisadas recorta
   mucho menos que un 2×2 de celdas verticales. El texto ocupa todo el ancho: velo parejo. */
@media (max-width: 640px) {
  .hero__collage { grid-template-columns: 1fr; grid-template-rows: repeat(4, minmax(0, 1fr)); }
  .hero::before { background: linear-gradient(180deg, var(--overlay-abismo-suave) 0%, var(--overlay-abismo-medio) 100%); }
}

.hero__titulo { max-width: var(--medida-titulo-hero); margin-bottom: calc(var(--espacio-titulo) * 2 / 3); font-size: var(--text-hero); color: var(--c-blanco); }
.hero__texto { max-width: var(--medida-lead); font-size: var(--text-lead); color: var(--c-texto-inverso-claro); }
.hero .grupo-botones { margin-top: var(--space-6); }
.hero .ola { height: var(--alto-ola-hero); }

/* Las cifras se superponen al borde inferior del hero */
.inicio-cifras { position: relative; z-index: 2; margin-top: var(--solape-cifras); }

/* El hero no se anima: es el primer pantallazo y debe verse de inmediato (A1).
   La primera foto del collage lleva fetchpriority="high" para acelerar el LCP. */