hijo DENTRO de la sección con fondo; acá el único hijo real de la sección es .elementor-container (arma las columnas con su propio flexbox), así que el centrado se aplica directo ahí. A propósito NO se usa la clase ".wrap" tal cual en la

vía "Clases CSS" de Elementor: la regla ".wrap{max-width:...}" de altura-magazine.css caería sobre TODA la sección (fondo incluido), dejando la caja completa encajonada con márgenes del color de fondo de la página a los costados — bug real que pasó en esta portada (13-8-2026) hasta que se detectó comparando contra la maqueta. */ .elementor-section-full_width:not(.masthead) > .elementor-container { max-width: 1240px; padding-left: clamp(20px, 4vw, 48px); padding-right: clamp(20px, 4vw, 48px); margin-left: auto; margin-right: auto; } /* Mismo problema una capa más adentro: el widget-wrap de la columna trae 10px de padding propio por defecto, que también se vuelve el "containing block" de .masthead__art (position:absolute). Todo el espaciado real de la maqueta ya lo maneja nuestro propio CSS (.wrap, etc.), así que este padding de Elementor no aporta nada y solo rompe los elementos a sangre completa. */ .elementor-section-full_width .elementor-widget-wrap { padding: 0 !important; } /* Esta no es cosa de Elementor: WordPress agrega automáticamente la clase "archive" al en cualquier página de archivo/categoría (body_class()). La maqueta ya usaba ".archive" para la grilla de "Ediciones anteriores" de la portada (repeat(4,1fr)) — sin querer, el de category.php hereda ese mismo grid de 4 columnas y descuadra toda la página. Se neutraliza solo cuando ".archive" cae justo en el (nunca pasa en nuestro propio marcado, así que no toca la grilla real de ediciones). */ body.archive { display: block; } /* ── Portada reconstruida con widgets nativos (12-8-2026) ──── Antes cada sección de la portada era UN widget HTML con todo su contenido adentro. Ahora el texto suelto (títulos con link propio, descripciones, botones) son widgets nativos de Elementor de verdad (Heading/Text Editor/Button), para que se editen desde la interfaz sin tocar código. Elementor free no tiene widget de "lista repetida", así que las grillas/listas (tarjetas de Arquitectura, archivo de ediciones, ofertas del media kit, sumario, Urbanismo, Materiales) van con UN WIDGET HTML POR ÍTEM — no toda la lista en un solo bloque como antes — así se puede reordenar/duplicar/borrar cada ítem arrastrando en Elementor, aunque el texto de cada uno se edite con "Editar HTML". Esto exige dos ajustes: */ /* 1) Elementor no permite más de una fila de columnas por sección clásica, así que un bloque que antes era "header + cuerpo" en una sola sección de la maqueta ahora son DOS secciones de Elementor seguidas. Cada una trae su propio padding-block (de .block/.contents en altura-magazine.css) — sin esto, quedaría un espacio doble entre el header y el cuerpo. */ .no-pt { padding-top: 0 !important; } .no-pb { padding-bottom: 0 !important; } /* 2) Las tarjetas/tapas/ofertas que antes eran un solo widget con ".grid-3"/".archive" ya armado en el HTML ahora son varios widgets (uno por tarjeta) dentro de una misma columna de Elementor. La columna SÍ puede llevar esa clase (se le pone en "Clases CSS" del panel Avanzado), pero Elementor mete un div intermedio (.elementor-widget-wrap) entre la columna y los widgets, y ese div no tiene la clase — así que el grid nunca encontraba a sus 3-4 hijos directos. Se soluciona haciendo que ese div intermedio "desaparezca" del árbol de layout (display:contents) solo en las columnas marcadas con estas clases, para que el grid de altura-magazine.css SÍ vea a las tarjetas como hijos directos. */ .elementor-column.grid-3 > .elementor-widget-wrap, .elementor-column.archive > .elementor-widget-wrap, .elementor-column.block__head > .elementor-widget-wrap { display: contents; } /* Con display:contents la columna centra a sus widgets con align-items:center (.block__head--center), pero cada widget de Elementor por defecto se ESTIRA al 100% del ancho del cruce en vez de encogerse a su contenido — así que "align-items:center" no tenía nada que centrar (la caja ya ocupaba todo el ancho). Se los encoge a su contenido para que el centrado sí se note (afecta a .block__sub, que tiene max-width:62ch en altura-magazine.css pero sin margin:auto). */ .elementor-column.block__head--center > .elementor-widget-wrap > .elementor-widget { width: fit-content; max-width: 100%; } /* 3) La clase que se le pone a un widget nativo (Heading, Texto, Botón) en "Clases CSS" del panel Avanzado —a diferencia de la de sección/columna— NO cae sobre el texto en sí, cae sobre el div que ENVUELVE al widget (".elementor-widget-heading", etc.). El texto real vive uno o dos niveles más adentro (".elementor-heading-title", y Elementor le pone SU PROPIA tipografía por defecto ahí — tamaño, familia, color — que gana por especificidad a lo que hereda de nuestra clase en el wrapper. Es el comportamiento normal de Elementor (esa clase está pensada para el panel de Estilos nativo de Elementor, no para que la peguemos a una clase de diseño ya hecha), pero acá preferimos seguir controlando la tipografía exacta desde altura-magazine.css. Se resetea el valor por defecto de Elementor a "inherit" para que la tipografía de nuestra clase (en el wrapper) SÍ llegue hasta el texto. */ /* Con !important a propósito: Elementor genera un CSS propio POR PÁGINA (wp-content/uploads/elementor/css/post-{id}.css) con los valores globales del Kit (color/tipografía "primary") aplicados a ".elementor-widget-heading .elementor-heading-title" — el MISMO selector que esta regla, así que empatan en especificidad y gana ese archivo por cargar después. Sin !important, el reset de arriba se pisa y el texto vuelve a salir en Roboto azul (los valores por defecto del Kit de Elementor), no en la tipografía de la maqueta. */ .elementor-widget-heading .elementor-heading-title, .elementor-widget-heading .elementor-heading-title a { font: inherit !important; color: inherit !important; letter-spacing: inherit !important; line-height: inherit !important; text-transform: inherit !important; } .elementor-widget-text-editor { font: inherit !important; color: inherit !important; } /* ── Bug corregido (13-8-2026): secciones de 2 columnas "aplastadas" ──── .radio__inner/.feature__inner/.two-col/.news__inner en altura-magazine.css son "display:grid;grid-template-columns:A B" pensadas para envolver DIRECTAMENTE a las dos columnas de contenido (así estaba en la maqueta:

con las dos columnas como hijas directas). En la portada reconstruida con widgets nativos esas clases se habían puesto en la

de Elementor — pero la

tiene un solo hijo real, .elementor-container (que a su vez, por dentro, arma las dos columnas con SU PROPIO flexbox). Con solo un hijo, un "grid-template-columns:A B" nunca se reparte entre A y B: todo el contenido queda encajonado en la pista A nada más, y la pista B se desperdicia como espacio vacío al costado — se notaba como Radio, Sustentabilidad, Urbanismo/Materiales y el Newsletter con el contenido angosto y corrido a la izquierda, muy distinto a la maqueta original. Se sacó esa clase de grilla de la sección (dejando "wrap" para el ancho máximo/centrado) y se repone el gap/alineación real apuntando al contenedor de Elementor, que es quien de verdad separa las columnas. */ .elementor-section.radio > .elementor-container { gap: clamp(32px, 5vw, 72px); align-items: flex-start; } .elementor-section.feature > .elementor-container { gap: clamp(32px, 5vw, 80px); align-items: center; } .elementor-section.feature { padding-block: clamp(48px, 6vw, 88px); } #urbanismo > .elementor-container { gap: clamp(32px, 5vw, 72px); } .elementor-section.news > .elementor-container { gap: clamp(32px, 5vw, 72px); align-items: center; }