/* =========================================================================
   SOLE — Ajustes de integración Webflow dentro de Elementor
   Cargado por el plugin DESPUÉS de sole-webflow.css. Corrige los artefactos
   que aparecen al incrustar el HTML de Webflow en widgets de Elementor:
   gaps blancos entre secciones, imágenes estiradas, overlay del menú.
   Todo va scoped a .elementor-widget-html para NO afectar widgets nativos
   que la fundación cree después.
   ========================================================================= */

/* --- 1. Quitar el espacio que Elementor mete entre las secciones Webflow ---
   En el original las bandas de color/foto se tocan; Elementor añadía gap y
   padding que se veían como franjas blancas entre secciones. */
.elementor-widget-html { margin: 0 !important; }
.elementor-widget-html > .elementor-widget-container { margin: 0; padding: 0; }

/* Container Elementor que envuelve los widgets HTML (la página híbrida) */
.elementor-widget-html,
.e-con > .e-con-inner,
.e-con { --widgets-spacing: 0px 0px; }
.elementor-element.e-con,
.elementor-element .e-con-inner { gap: 0 !important; }

/* Algunas versiones aplican margin-bottom al widget; lo anulamos solo aquí */
.elementor-element .elementor-widget-html:not(:last-child) { margin-bottom: 0 !important; }

/* --- 2. Imágenes: respetar la proporción de Webflow (no estirar) ---
   Los sliders/banners de Webflow ponen height:100%/width:100% inline; sin
   object-fit la foto se deforma al cambiar de proporción. */
.elementor-widget-html img { max-width: 100%; }
.elementor-widget-html .w-slide img,
.elementor-widget-html .w-background-video + img,
.elementor-widget-html img[style*="height:100%"],
.elementor-widget-html img[style*="height: 100%"],
.elementor-widget-html img[style*="width:100%"] { object-fit: cover; object-position: center; }

/* Imágenes con clase image-NN de Webflow: dejar que el CSS Webflow mande,
   pero impedir que Elementor las fuerce a altura automática rara. */
.elementor-widget-html [class^="image-"],
.elementor-widget-html [class*=" image-"] { height: auto; max-width: 100%; }

/* --- 3. Menú overlay de Webflow (w-nav) ---
   El menú es un overlay a pantalla completa (data-animation=over-right).
   El tema/Elementor añade sombras y z-index bajos que lo rompen. */
.elementor-widget-html .w-nav { box-shadow: none; }
.elementor-widget-html .w-nav-overlay { z-index: 10000; }
.elementor-widget-html .w-nav-menu { box-shadow: none; }
.elementor-widget-html .w-nav a,
.elementor-widget-html .w-nav a:hover { box-shadow: none; text-decoration: none; }
/* El botón hamburguesa debe quedar clickeable por encima del contenido */
.elementor-widget-html .w-nav-button { z-index: 10001; position: relative; }

/* --- 4. Hello Elementor reset que se filtra al markup Webflow --- */
.elementor-widget-html a { color: inherit; }
.elementor-widget-html h1,
.elementor-widget-html h2,
.elementor-widget-html h3,
.elementor-widget-html h4,
.elementor-widget-html p { margin: revert; }