/* =================================================================================== UEB Tienda — puente con el envoltorio de Elementor =================================================================================== Se encola SOLO con Elementor activo, desde `elementor/frontend/after_enqueue_styles` (ver ueb_elementor_enqueue_bridge() en inc/elementor/loader.php). ───────────────────────────────────────────────────────────────────────────────────── QUÉ PROBLEMA RESUELVE ───────────────────────────────────────────────────────────────────────────────────── Cada sección de la portada del tema es de sangre completa y trae SU PROPIO `.wrap` (el contenedor de 1280px) y SU PROPIO relleno vertical. Cuando la pinta Elementor, llega envuelta en seis niveles que también quieren poner ancho máximo, relleno y hueco: section.elementor-section div.elementor-container ← ancho máximo de 1140px por defecto div.elementor-column div.elementor-widget-wrap ← relleno de 10px por defecto div.elementor-widget ← margen inferior de 20px por defecto div.elementor-widget-container …la sección del tema Con eso sin neutralizar sale doble margen lateral, el hero deja de llegar a los bordes y aparecen huecos entre secciones que el diseño encadena al ras. ───────────────────────────────────────────────────────────────────────────────────── POR QUÉ NO BASTABA CON LOS AJUSTES DE LA SECCIÓN ───────────────────────────────────────────────────────────────────────────────────── El documento sembrado ya crea cada sección con `full_width`, `gap: no` y relleno a cero. Pero eso son AJUSTES: cualquiera los cambia desde el editor con dos clics, sin saber que rompe el diseño, y no hay nada que se lo diga. Esto lo fija en CSS, que es el sitio donde no se toca por accidente. ───────────────────────────────────────────────────────────────────────────────────── POR QUÉ ESTE ARCHIVO Y NO home.css ───────────────────────────────────────────────────────────────────────────────────── Dos razones: 1. `home.css` lleva `path` en `wp_style_add_data()`, así que WordPress la inyecta EN LÍNEA mientras pese menos del límite — y ya va por 19.558 bytes. Meter aquí ~4 KB más la empujaría por encima, y por encima WordPress deja de inyectarla **en silencio**. 2. `home.css` solo se encola en la portada. Un widget de UEB se puede arrastrar a CUALQUIER página, y ahí el puente también hace falta. El puente parcial que había en home.css (líneas 29-45) se queda como red por si este archivo falta: cubre la estructura clásica Section/Column. Este lo amplía y cubre además los contenedores flex. ───────────────────────────────────────────────────────────────────────────────────── ⚠️ CUBRE LAS DOS ESTRUCTURAS, Y HACE FALTA ───────────────────────────────────────────────────────────────────────────────────── Elementor tiene dos maneras de componer una página y en esta instalación conviven: · **Section / Column** (clásica). Es la del documento actual de la portada. · **Container** (`.e-con`, flex). El experimento "container" está ACTIVO, así que toda sección NUEVA que se añada desde el editor será un contenedor, no una sección. Un puente que solo mirara `.elementor-section` funcionaría hoy y se rompería la primera vez que alguien añadiera una sección desde el editor. De ahí los dos bloques. Todo va acotado a `.ueb-sec-widget` —la clase que añade UEB_Elementor_Widget_Base::get_html_wrapper_class()— para no tocar NUNCA una sección con contenido propio del cliente. =================================================================================== */ /* ================================================================================== EL WIDGET ================================================================================== Vale para las dos estructuras: es el nivel más interno y el mismo en ambas. */ /* Elementor da 20px de margen inferior a cada widget. El diseño encadena las secciones al ras. */ .ueb-sec-widget { margin-bottom: 0; } /* `.elementor-widget-container` no tiene estilos propios, pero un plugin o una plantilla global pueden dárselos. Se neutraliza por si acaso: nuestra sección ya trae su propia caja. */ .ueb-sec-widget > .elementor-widget-container { padding: 0; margin: 0; } /* ================================================================================== ESTRUCTURA CLÁSICA: Section › Container › Column › Widget-wrap ================================================================================== `:has()` es lo que permite subir del widget a sus ancestros sin marcarlos a mano en el documento. Sin él habría que confiar en que los ajustes de cada sección estén bien puestos, que es justo lo que este archivo evita. */ .elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .ueb-sec-widget) { padding: 0; margin: 0; } /* El `.elementor-container` limita a 1140px por defecto. Nuestras secciones son a sangre y su `.wrap` interno ya centra el contenido a 1280px. */ .elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .ueb-sec-widget) > .elementor-container { max-width: none; width: 100%; } /* `.elementor-element-populated` trae 10px de relleno. Necesita `!important` porque Elementor emite el relleno de la columna como CSS EN LÍNEA por documento (uploads/elementor/css/), y un estilo en línea gana a cualquier hoja. Es la única declaración del archivo que lo lleva, y por eso está aquí explicado en lugar de repartido. */ .elementor-widget-wrap:has(> .ueb-sec-widget) { padding: 0 !important; } /* ================================================================================== CONTENEDORES FLEX: .e-con › .e-con-inner › Widget ================================================================================== El experimento "container" está activo, así que esto NO es código preventivo: es lo que se aplica a cualquier sección que se añada desde el editor a partir de ahora. Un contenedor trae por defecto `--padding-*` de 10px, un `gap` de 20px y un ancho de contenido de 1140px, todo por propiedades personalizadas. Se neutralizan por variable y no por `padding: 0`, porque así siguen funcionando las que Elementor calcula por punto de ruptura. */ .e-con:has(> .ueb-sec-widget), .e-con:has(> .e-con-inner > .ueb-sec-widget) { --padding-top: 0; --padding-right: 0; --padding-bottom: 0; --padding-left: 0; --margin-top: 0; --margin-right: 0; --margin-bottom: 0; --margin-left: 0; --gap: 0; --width: 100%; --content-width: 100%; max-width: none; } .e-con:has(> .e-con-inner > .ueb-sec-widget) > .e-con-inner { --padding-top: 0; --padding-right: 0; --padding-bottom: 0; --padding-left: 0; --gap: 0; --content-width: 100%; max-width: none; width: 100%; } /* ================================================================================== RED PARA NAVEGADORES SIN :has() ================================================================================== `:has()` es Baseline desde diciembre de 2023, pero un Firefox anterior a la 121 lo ignora y TODO el bloque de arriba se descarta —cuando un selector no se entiende, la regla entera se tira—. En esos navegadores la portada saldría con doble margen. Estas dos reglas no usan `:has()` y por tanto sobreviven. No son equivalentes: solo cubren el caso de un widget de UEB como ÚNICO hijo de su columna, que es exactamente como los coloca la siembra. Es la degradación aceptable. */ .elementor-widget-wrap > .ueb-sec-widget:only-child { margin-bottom: 0; } /* ================================================================================== EL EDITOR ================================================================================== Dentro del editor, Elementor añade un contorno y un área mínima de arrastre a cada elemento. Sobre una sección a sangre eso desplaza el contenido y da la impresión de que el diseño está descolocado, cuando lo que se ve es la ayuda de edición. No se anula: el cliente necesita poder agarrar el widget. Solo se le quita el alto mínimo, que es lo que de verdad descuadra una sección que ya mide lo que tiene que medir. */ .elementor-editor-active .ueb-sec-widget, .elementor-editor-preview .ueb-sec-widget { min-height: 0; }