/* =========================================================================
   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; }

/* El fondo gris de la hamburguesa NO es el botón: es el wrapper .w-nav, que el
   CSS base de Webflow trae con background:#ddd. Lo anulamos en wrapper y barra. */
.elementor-widget-html .w-nav,
.elementor-widget-html .navbar { background: transparent !important; }

/* Botón hamburguesa siempre transparente (cerrado / abierto / focus) */
.elementor-widget-html .hamburguesa.w-nav-button,
.elementor-widget-html .w-nav-button,
.elementor-widget-html .w-nav-button.w--open,
.elementor-widget-html .w-nav-button:focus {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Texto del menú overlay: no heredar el color global de Elementor (negro original) */
.elementor-widget-html .link-menu,
.elementor-widget-html .link-section-1 { color: #000 !important; }
.elementor-widget-html .descripcion-seccion { color: rgba(0, 0, 0, .6) !important; }

/* --- 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; }

/* --- 5. Estilos de botones del sistema SOLE (evita que el tema rompa el color de la letra) --- */
body .btn-sole-navy .elementor-button {
    background-color: var(--e-global-color-secondary, #23286B) !important;
    color: var(--e-global-color-light, #ffffff) !important;
}
body .btn-sole-navy .elementor-button:hover,
body .btn-sole-navy .elementor-button:focus {
    background-color: var(--e-global-color-primary, #FEE01A) !important;
    color: var(--e-global-color-secondary, #23286B) !important;
}

body .btn-sole-yellow .elementor-button {
    background-color: var(--e-global-color-primary, #FEE01A) !important;
    color: var(--e-global-color-secondary, #23286B) !important;
}
body .btn-sole-yellow .elementor-button:hover,
body .btn-sole-yellow .elementor-button:focus {
    background-color: var(--e-global-color-secondary, #23286B) !important;
    color: var(--e-global-color-light, #ffffff) !important;
}

/* --- 6. Caja de búsqueda "solera" (header global + páginas) ---
   Aplica fuera del scope .elementor-widget-html para alcanzar también el
   navbar global (2218) y la plantilla de resultados. Bordes redondeados navy
   con foco amarillo SOLE; el botón conserva su icono de lupa. */
.search-input,
.search-input-2 {
    border: 2px solid #23286B !important;
    border-radius: 999px !important;
    padding: 10px 18px !important;
    font-family: 'Raleway', sans-serif !important;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.search-input:focus,
.search-input-2:focus {
    border-color: #FEE01A !important;
    box-shadow: 0 0 0 3px rgba(254, 224, 26, .45) !important;
}
/* Botón del header (lupa): pill amarillo, conserva el icono de fondo */
.search-button {
    border-radius: 999px !important;
    background-color: #FEE01A !important;
    border: none !important;
    transition: filter .15s;
}
.search-button:hover { filter: brightness(.92); }
/* Botón "Buscar" de la página de resultados */
.search-button-2 {
    border-radius: 999px !important;
    background-color: #FEE01A !important;
    color: #23286B !important;
    border: none !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 600 !important;
    transition: filter .15s;
}
.search-button-2:hover { filter: brightness(.92); }

/* --- 7. Legibilidad del cuerpo en single de blog y proyecto ---
   Las plantillas standalone (sole_render_blog_single_page / proyecto-single)
   renderizan el cuerpo en .texto-blog .rich-text-block-2. Mejora ancho de
   lectura, interlineado y espaciado de medios/encabezados. */
.texto-blog .rich-text-block-2 {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Raleway', sans-serif;
    font-size: 1.12rem;
    line-height: 1.8;
    color: #1a1a1a;
}
.texto-blog .rich-text-block-2 p { margin: 0 0 1.35em; }
/* Colapsa los párrafos vacíos que Webflow deja (solo ZWJ/ZWNJ/ ) para que
   no abran huecos enormes entre bloques. */
.texto-blog .rich-text-block-2 p:empty { display: none; margin: 0; }
.texto-blog .rich-text-block-2 h2,
.texto-blog .rich-text-block-2 h3,
.texto-blog .rich-text-block-2 h4 {
    font-family: 'Space Grotesk', sans-serif;
    color: #23286B;
    line-height: 1.25;
    margin: 1.9em 0 .55em;
}
/* MEDIOS DEL CUERPO — el contenido Webflow llega como <figure><div><img></div></figure>
   sin clase. Forzamos que la imagen/figura llene TODA la columna de lectura (antes
   salía a ~455px en PC y ~200px en móvil por el margen por defecto del <figure> y la
   imagen inline). Centrada, grande y con espaciado controlado. */
.texto-blog .rich-text-block-2 figure {
    margin: 1.9em 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}
.texto-blog .rich-text-block-2 figure > div { width: 100% !important; }
.texto-blog .rich-text-block-2 img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 1.9em auto !important;
    border-radius: 14px;
}
.texto-blog .rich-text-block-2 figure img { margin: 0 auto !important; }
/* Vídeos / embeds del cuerpo a ancho completo y proporción 16:9 (antes salían
   pequeños o sin alto definido). */
.texto-blog .rich-text-block-2 iframe,
.texto-blog .rich-text-block-2 video,
.texto-blog .rich-text-block-2 .w-embed,
.texto-blog .rich-text-block-2 .w-video {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9;
    height: auto !important;
    margin: 1.9em 0 !important;
    border: 0;
    border-radius: 14px;
}
.texto-blog .rich-text-block-2 a { color: #23286B; text-decoration: underline; }
.texto-blog .rich-text-block-2 ul,
.texto-blog .rich-text-block-2 ol { margin: 0 0 1.35em 1.2em; line-height: 1.75; }
.texto-blog .rich-text-block-2 li { margin: 0 0 .5em; }
.texto-blog .rich-text-block-2 blockquote {
    border-left: 4px solid #FEE01A;
    margin: 1.8em 0;
    padding: .5em 0 .5em 1.2em;
    color: rgba(26,26,26,.8);
    font-style: italic;
    font-size: 1.18rem;
}
/* Móvil: tipografía y aire ajustados; medios siguen a ancho completo. */
@media (max-width: 767px) {
    .texto-blog .rich-text-block-2 { font-size: 1.05rem; line-height: 1.72; }
    .texto-blog .rich-text-block-2 img,
    .texto-blog .rich-text-block-2 figure { margin: 1.4em 0 !important; }
    .texto-blog .rich-text-block-2 blockquote { font-size: 1.08rem; }
}

/* Hero de las plantillas standalone: proporción y bordes consistentes. */
.section-9 .foto-blog,
.contenedor-base .foto-blog {
    background-size: cover;
    background-position: center;
    border-radius: 18px;
    min-height: 380px;
}

/* Datos básicos del blog (autor/fecha/lectura): más aire y jerarquía. */
.datos-basicos-blog { margin: 22px 0 32px; }
.datos-basicos-blog .blog-autor { color: #FF73B0; text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; margin: 0 0 2px; }
.datos-basicos-blog .blog-fecha { color: #23286B; font-weight: 600; margin: 0; }

/* --- 8. Ocultar header por defecto de Hello Elementor --- */
header.site-header {
    display: none !important;
}

/* --- 9. Integración del navbar sobre el contenido (-85px) y Sticky --- */
.navbar-sole-principal {
    margin-bottom: -85px !important;
    position: sticky !important;
    top: 0;
    z-index: 9999;
}

/* --- 10. Títulos del menú desplegable en negro --- */
.navbar-sole-principal .link-section-1 {
    color: #000 !important;
}

/* --- 11. Galería de fotos del menú desplegable ---
   El slider Webflow (.galeria-fotos .slider) no se inicializa fuera de Webflow:
   la pista quedaba colapsada mostrando solo las flechas y una imagen rota.
   Lo convertimos en UNA foto estática (sin flechas ni nav) que sí carga:
   forzamos la cadena de alturas y dejamos visible un único slide con fondo. */
.navbar-sole-principal .galeria-fotos,
.navbar-sole-principal .galeria-fotos .slider,
.navbar-sole-principal .galeria-fotos .w-slider,
.navbar-sole-principal .galeria-fotos .w-slider-mask {
    height: 100% !important;
    min-height: 0 !important;
}
/* Ocultar todas las diapositivas y dejar solo una con imagen real (slide-2) */
.navbar-sole-principal .galeria-fotos .w-slide { display: none !important; }
.navbar-sole-principal .galeria-fotos .slide-2 {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}
/* Quitar flechas y paginación del slider muerto */
.navbar-sole-principal .galeria-fotos .w-slider-arrow-left,
.navbar-sole-principal .galeria-fotos .w-slider-arrow-right,
.navbar-sole-principal .galeria-fotos .w-slider-nav {
    display: none !important;
}