/* Hero de pérdida de peso: imagen propia (peso-consulta-online-hero.webp)
   en una sola pieza, al lado del texto en escritorio y debajo en móvil.
   No modifica la tipografía ni los colores del card nativo; sólo redistribuye
   el ancho disponible entre la columna de texto (.framer-f8dwhz) y la nueva
   imagen (#lv-weight-hero-img), dejando el montaje de stock (.framer-1yf8pdv)
   oculto por la regla previa de gen_fichas.py (HERO_OVERRIDE_PESO). */

/* Caja del hero: gap cómodo y centrado vertical del par texto+imagen. */
#hero .framer-15kh3oh {
  align-items: center;
  gap: 32px;
}

/* Imagen nueva: tamaño natural 3:2 (1536×1024), ocupa la mitad derecha
   del card en escritorio. Se mantiene íntegra (object-fit: contain) para no
   recortar a la persona ni deformar la composición original. */
#lv-weight-hero-img {
  order: 2;
  display: block;
  width: 100%;
  height: auto;
  max-width: 560px;
  flex: 1 1 0;
  border-radius: 24px;
  background: transparent;
}

/* Escritorio ancho: la columna de texto crece un poco para llegar al 50/50
   sin tapar la imagen; el card nativo ya limita f8dwhz a 680px. */
@media (min-width: 1200px) {
  #hero .framer-15kh3oh { gap: 40px; }
  #lv-weight-hero-img { max-width: 600px; }
}

/* Tablet: imagen un poco más estrecha para dejar respirar al texto. */
@media (min-width: 640px) and (max-width: 1199.98px) {
  #lv-weight-hero-img { max-width: 460px; }
}

/* Móvil: el card se apila (texto arriba, imagen debajo) y la imagen pasa
   a ocupar el ancho útil sin recortes. */
@media (max-width: 639.98px) {
  #hero .framer-15kh3oh {
    flex-direction: column !important;
    align-items: stretch;
    gap: 24px;
  }
  #lv-weight-hero-img {
    max-width: 100%;
    flex: 0 0 auto;
    border-radius: 18px;
  }
}