/* ===========================================================================
   ADAGIO — Hero de inicio: composición teléfono + tablet
   Cargado por wp-content/mu-plugins/adagio-megamenu.php

   PROBLEMA
   Las dos imágenes tenían tamaño FIJO en píxeles (310px el teléfono, 445px
   la tablet) mientras que el margen negativo que arma la superposición era
   un PORCENTAJE (-36%), y en CSS los márgenes en % se calculan contra el
   ANCHO del contenedor. Resultado: al achicar la pantalla el solape se
   encogía pero las imágenes no, así que el teléfono "flotaba" cada vez más
   arriba, y en móvil la tablet se salía de la pantalla.

   SOLUCIÓN
   Que TODO escale junto: los anchos de las imágenes pasan a porcentaje del
   mismo contenedor contra el que se calcula el margen. Así la proporción
   entre las dos imágenes y el solape queda idéntica en cualquier ancho.

   Valores de referencia (contenedor = 687px, su ancho máximo en escritorio):
     teléfono 310px -> 45.124%      tablet 445px -> 64.774%
     alto de la tablet = 64.774% / 1.816 (su relación de aspecto) = 35.67%

   Al usar -35.67% de margen inferior, el borde de abajo de la tablet cae
   exactamente sobre el borde de abajo del teléfono: las dos imágenes quedan
   apoyadas sobre el borde inferior del contenedor, en todos los tamaños.
   =========================================================================== */

/* --- TELÉFONO (elementor-element-1dc0bc6) ------------------------------- */
.elementor-8 .elementor-element.elementor-element-1dc0bc6 img {
  width: 45.124% !important;
  max-width: 45.124% !important;
  height: auto !important;
}

/* el margen inferior propio del widget rompía la proporción: iba en px */
.elementor-8 .elementor-element.elementor-element-1dc0bc6 {
  margin-bottom: 0 !important;
}

/* el solape: -35.67% = exactamente el alto de la tablet, así los bordes
   inferiores de ambas imágenes coinciden. Subilo o bajalo si querés que el
   teléfono sobresalga más o menos. */
.elementor-8 .elementor-element.elementor-element-1dc0bc6 > .elementor-widget-container {
  margin-bottom: -35.67% !important;
}

/* --- TABLET (elementor-element-96c05b8) -------------------------------- */
.elementor-8 .elementor-element.elementor-element-96c05b8 img {
  width: 64.774% !important;
  max-width: 64.774% !important;
  height: auto !important;
}

/* ambas centradas, para que el teléfono quede al medio de la tablet */
.elementor-8 .elementor-element.elementor-element-1dc0bc6 > .elementor-widget-container,
.elementor-8 .elementor-element.elementor-element-96c05b8 > .elementor-widget-container {
  text-align: center;
}