/* ============================================================
   HERO EN CUATRO ZONAS  (sitio web)

     ┌─────────────────────┬─────────────────────┐
     │                     │   arriba derecha:   │
     │      izquierda:     │      EL PEZ 3D      │
     │        TEXTO        ├─────────────────────┤
     │                     │   abajo derecha:    │
     │                     │   LAS DOS TARJETAS  │
     └─────────────────────┴─────────────────────┘

   Nada se solapa: el pez tiene libre todo el cuarto superior derecho.
   ============================================================ */

/* la columna derecha se parte en dos: hueco para el pez + tarjetas abajo */
body .hero--shop .hero__inner{
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:stretch;
  gap:clamp(2rem,4vw,4rem);
}

/* --- izquierda: el texto, con mejor ritmo --- */
body .hero--shop .hero__copy{
  align-self:center;
  max-width:34rem;          /* medida de lectura comoda */
  padding-right:1rem;
}
body .hero--shop .hero__copy h1{
  font-size:clamp(2.4rem,4.4vw,4.1rem);
  line-height:1.04;
  margin-bottom:1.2rem;
}
body .hero--shop .hero__copy p{
  font-size:clamp(.98rem,1.15vw,1.08rem);
  line-height:1.72;
  max-width:42ch;
  margin-bottom:0;
}
body .hero--shop .hero__cta{ margin-top:2.2rem; gap:.9rem; }

/* --- derecha: arriba respira (ahi nada el pez), abajo las tarjetas --- */
body .hero--shop .hero__picks{
  align-self:end;           /* pegadas al pie del hero */
  margin-top:auto;
  padding-bottom:.5rem;
  gap:1.1rem;
}

/* tarjetas mas bajas: menos foto, menos aire, texto recortado */
body .hero--shop .pick{ padding:.85rem; gap:.4rem; }
body .hero--shop .pick img{ aspect-ratio:16/10; }
body .hero--shop .pick h4{ font-size:1.05rem; margin-top:.2rem; line-height:1.25; }
body .hero--shop .pick small{
  font-size:.8rem; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
body .hero--shop .pick__price{ padding-bottom:.6rem; font-size:.9rem; }
body .hero--shop .pick .btn{ padding:.72rem 1rem; font-size:.64rem; }

/* el hero no necesita ser tan alto si las tarjetas son mas bajas */
body .hero--shop{ min-height:min(92svh, 780px); }

/* --- pantallas medianas: el pez pasa a la franja de arriba --- */
@media (max-width:980px){
  body .hero--shop .hero__inner{ grid-template-columns:1fr; }
  body .hero--shop .hero__copy{ max-width:none; padding-right:0; }
  body .hero--shop .hero__picks{ align-self:auto; margin-top:2rem; }
  body .hero--shop{ min-height:auto; }
}