/* ============================================================
   HERO EN DOS MITADES  (landing)

     ┌─────────────────────┬─────────────────────┐
     │      izquierda:     │                     │
     │  TEXTO, BOTONES Y   │      derecha:       │
     │       CIFRAS        │      EL PEZ 3D      │
     └─────────────────────┴─────────────────────┘

   Todo el contenido se queda en la mitad izquierda, asi que el pez
   tiene la derecha entera para el y no se cruza con nada.
   ============================================================ */

/* el bloque del hero usa el ancho del contenedor general, no uno propio,
   para que el texto pueda quedarse en su mitad y el pez tener la otra */
body .hero__inner{
  max-width:var(--container);
}

/* todo el texto vive en la mitad izquierda */
body .hero__badge,
body .hero h1,
body .hero p,
body .hero__cta,
body .hero__stats{
  max-width:min(52%, 40rem);
}

/* ritmo del bloque de texto */
body .hero h1{
  font-size:clamp(2.4rem,4.6vw,4.2rem);
  line-height:1.03;
  margin-bottom:1.3rem;
}
body .hero p{
  font-size:clamp(.98rem,1.2vw,1.1rem);
  line-height:1.74;
}
body .hero__cta{ margin-top:2.4rem; }
body .hero__stats{
  margin-top:3.2rem;
  padding-top:1.8rem;
  gap:clamp(1.6rem,3.4vw,3.2rem);
}
body .hero__stats strong{ font-size:2rem; }

/* --- pantallas medianas y moviles: una sola columna, el pez arriba --- */
@media (max-width:980px){
  body .hero__badge,
  body .hero h1,
  body .hero p,
  body .hero__cta,
  body .hero__stats{ max-width:min(72%, 40rem); }
}
@media (max-width:760px){
  body .hero__badge,
  body .hero h1,
  body .hero p,
  body .hero__cta,
  body .hero__stats{ max-width:none; }
  body .hero{ padding-top:calc(var(--header-h) + 12rem); }  /* sitio para el pez arriba */
}