` no cambia el
cuerpo por si mismo, hereda. Solo se le quitan los margenes del tema, que si
descuadran el `gap` del contenedor. */
/* El widget de texto trae el gris del kit (`#7a7a7a`). El sistema de diseño
pinta el color en la clase del envoltorio (`.who strong` en crema, `.meta` en
tinta suave), asi que el widget tiene que dejarlo heredar. */
.lon-native .elementor-widget-text-editor { color: inherit; }
.lon-native .elementor-widget-text-editor p { margin: 0; }
.lon-native .elementor-widget-text-editor p:not(:last-child) { margin-bottom: 12px; }
/* ----------------------------------------------------------------------------
3 · Boton: la piel la lleva `.btn` en el envoltorio, el la rellena
-------------------------------------------------------------------------------*/
/* El relleno pasa al `` para que todo el area de la pildora sea clicable, no
solo su texto. */
.lon-native .elementor-widget-button.btn { padding: 0; }
.lon-native .btn .elementor-button,
.lon-native .btn .elementor-button:hover,
.lon-native .btn .elementor-button:focus,
.lon-native .btn .elementor-button:visited {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 26px; border-radius: var(--r-pill);
font: inherit; color: inherit; background: none;
border: 0; box-shadow: none; text-decoration: none;
fill: currentColor;
}
.lon-native .btn .elementor-button-content-wrapper { display: inline-flex; align-items: center; gap: 10px; }
.lon-native .btn .elementor-button-text { font: inherit; color: inherit; }
/* El circulo con la flecha es un contenedor con `.btn-circle`; dentro va el
widget de icono, que trae su propio color del kit. */
.lon-native .elementor-widget-icon .elementor-icon,
.lon-native .elementor-widget-icon .elementor-icon:hover { color: inherit; background: none; border: 0; padding: 0; }
.lon-native .elementor-widget-icon .elementor-icon-wrapper { line-height: 0; }
/* Elementor emite los iconos como SVG en linea y el CSS por pagina les pinta el
azul del kit (`#6EC1E4`) con selectores de peso (0,3,0):
`.elementor-widget-icon.elementor-view-default .elementor-icon svg`,
`.elementor-widget-accordion .elementor-accordion-icon svg` y su variante
`.elementor-active` en verde. El sistema de diseño los quiere del color del
texto de su caja: crema dentro del circulo rojizo, tinta sobre el velo.
El widget `toggle` (bloque 18) va en la misma lista: emite el mismo SVG en
línea con las mismas reglas del kit, cambiando `accordion` por `toggle`.
OJO, esto estuvo ROTO, y el motivo merece quedar escrito porque es fácil de
repetir. El cierre del comentario aparecía dos líneas antes de tiempo y las
dos que seguían quedaban sueltas: el analizador de CSS las leía como el
arranque de un selector y se comía la lista entera hasta la primera llave,
así que la regla NO existía en la hoja (comprobado con `document.styleSheets`:
cero reglas con `fill: currentcolor` fuera del bloque 3). Consecuencia medida:
los SVG del pie salían en blanco puro en vez de en crema, y los del kit se
quedaban con su azul de fábrica.
La trampa: la pareja de caracteres que cierra un comentario lo cierra TAMBIÉN
dentro de comillas invertidas, que aquí se usan por todas partes para citar
selectores y valores. Al redactar estos comentarios, NUNCA teclear esa pareja
para citarla; describirla con palabras, como en este párrafo. */
.lon-native .elementor-widget-icon.elementor-view-default .elementor-icon svg,
.lon-native .elementor-widget-icon .elementor-icon svg,
.lon-native .elementor-widget-accordion .elementor-accordion-icon svg,
.lon-native .elementor-widget-accordion .elementor-active .elementor-accordion-icon svg,
.lon-native .elementor-widget-toggle .elementor-toggle-icon svg,
.lon-native .elementor-widget-toggle .elementor-active .elementor-toggle-icon svg,
.lon-native .elementor-widget-social-icons .elementor-social-icon svg,
.lon-native .elementor-widget-icon-list .elementor-icon-list-icon svg { fill: currentColor; }
/* ----------------------------------------------------------------------------
4 · Imagen: los selectores de hijo directo del fuente
-------------------------------------------------------------------------------*/
/* Todos los selectores de HIJO DIRECTO del sistema de diseño que apuntan a una
imagen (`.hero-mask > img`, `.media img`, `.media-band > img`,
`.card-video-t > img`) se quedan cortos aquí: el hijo directo de la caja no
es el ``, es el envoltorio que mete el widget. Sin esto la imagen sale a
su proporción natural (más alta o más baja que su caja) o directamente a cero
de alto cuando el envoltorio es además el bloque contenedor de un `inset: 0`,
que es lo que pasaba en `.form-premium .media`.
El sistema recorta de DOS formas y aquí hacen falta las dos:
A · RELLENO ABSOLUTO. La caja fija su alto (`aspect-ratio`, `min-height` o
`height: 100%`) y la imagen la llena. El absoluto pasa al envoltorio,
que es el hijo directo, y el `
` llena el envoltorio.
B · CRECER CON LA CELDA. En los mosaicos las celdas NO están posicionadas:
el alto de la fila lo marca la celda alta y la imagen crece con ella.
Con absolutos la fila colapsaría, así que el envoltorio crece por
`flex` en vez de anclarse.
Se acota a la CLASE de la caja, no a cada pareja padre-hijo, porque `.media`
es el nombre único de la caja de recorte en todo el sistema: `.card-property`,
`.card-listing`, `.card-mini`, `.card-location`, `.card-sale`, `.card-post`,
`.compare-col` y `.form-premium` declaran las tres, sin una sola excepción,
`position: relative`, `overflow: hidden` (o un alto propio) e
`img { width: 100%; height: 100%; object-fit: cover }`. Una regla cubre las
ocho y las que vengan. `.col--hero` solo existe dentro de `.connect-arc`, así
que entra por su nombre corto y `:is()` se queda en (0,1,0). */
/* A · relleno absoluto */
.lon-native :is(.media, .hero-mask, .cta-band--premium, .card-video-t, .card-listing-v2, .media-band, .col--hero) > .elementor-widget-image {
position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
}
.lon-native :is(.media, .hero-mask, .cta-band--premium, .card-video-t, .card-listing-v2, .media-band, .col--hero) > .elementor-widget-image > .elementor-widget-container { height: 100%; }
.lon-native :is(.media, .hero-mask, .cta-band--premium, .card-video-t, .card-listing-v2, .media-band, .col--hero) > .elementor-widget-image img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Las cajas que reciben esos absolutos tienen que ser el bloque contenedor. En
el fuente casi todas ya lo son (`.compare-col .media` solo declara
`overflow`), pero al pasar por Elementor algunas pierden el `position`.
`.hero-mask`, `.cta-band--premium` y `.card-video-t` NO entran aquí: su
`position: relative` y su `overflow: hidden` los pone el sistema y son parte
de su forma (la muesca del dock, el radio de la banda). */
.lon-native :is(.media, .card-listing-v2, .media-band, .col--hero) { position: relative; overflow: hidden; }
/* B · crecer con la celda */
.lon-native :is(.photo-mosaic, .mosaic-stagger) .cell > .elementor-widget-image { flex: 1 1 auto; min-height: 0; width: 100%; }
.lon-native :is(.photo-mosaic, .mosaic-stagger) .cell > .elementor-widget-image > .elementor-widget-container { height: 100%; }
.lon-native :is(.photo-mosaic, .mosaic-stagger) .cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* El sello de render (`Render`, `Foto real`) es un hijo absoluto de la caja de
imagen. Al perder el `position` de su contenedor flotaba en el flujo del
texto, debajo de la foto, en vez de ir sobre ella. */
.lon-native .render-note,
.lon-native .tag-pill--onmedia { z-index: 3; }
/* En `.media-band` ese sello NO lo coloca `components.css`, que solo lo coloca
dentro de `.card-property`, `.hero-mask` y `.card-listing-v2`. Lo coloca un
atributo `style` del fuente, en la ficha de El Nido:
``.
El generador conserva la CLASE, que aterriza en el envoltorio del widget de
texto, pero no el estilo en línea, así que el sello se queda en el flujo como
un widget más del contenedor flexible y se estira de lado a lado. Medido a
1440: 1248x24 pegado a la esquina superior izquierda de la banda, tapando la
foto, contra los 62x24 de la maqueta a 16px de su esquina superior derecha.
A 390: 358x24 contra 62x24.
El bloque contenedor ya lo pone la regla de arriba (`.media-band` entra en la
lista de `position: relative`), así que aquí solo van los tres valores
copiados literalmente de ese atributo `style`. */
.lon-native .media-band .render-note { position: absolute; top: 16px; right: 16px; }
/* El isologo viaja como `
` de un SVG, no como SVG en linea: las reglas
`.brand-mark svg { height }` del sistema no le llegan. */
.lon-native .navbar-frame .brand-mark img { height: 26px; width: auto; }
:is(.lon-native.footer-dark, .lon-native .footer-dark) .brand-mark img { height: 30px; width: auto; }
/* La miniatura redonda de la ficha del cabecero.
Salía ovalada, estirada en vertical, en las diez páginas que llevan pastilla
y en los dos idiomas. Medido a 1440 sobre el `
`, no sobre su envoltorio:
44 de alto, que es lo que pide la maqueta, contra anchos de 28,02 a 36,22
según la página. Que el ancho cambiase de una página a otra es la pista de
que no lo mandaba ninguna medida, lo mandaba el reparto del espacio sobrante.
La cadena, entera, porque es fácil de repetir en cualquier otro widget:
`.thumb` no aterriza en el `
`, aterriza en el envoltorio del widget de
imagen. Ese envoltorio es un hijo flexible de la pastilla con los valores de
fábrica del motor: `flex: 0 1 auto`, que encoge, y `min-width: 0`, que le
deja encoger hasta nada. El `nowrap` de la correctiva del 2026-08-07 (punto
4), que es el que impide que la pastilla se parta en tres filas, obliga a
pagar el exceso encogiendo, y el primero que lo paga es el envoltorio. La
imagen se venía detrás porque el tema le da `max-width: 100%`: el alto de 44
se quedaba clavado y el ancho lo dictaba el envoltorio ya encogido.
Por eso el arreglo NO es repetir el 44 en la imagen. Eso es lo que había
antes aquí y no bastaba. Lo que se hace es quitarle al envoltorio la
capacidad de encoger y convertirlo en la ventana redonda; la imagen llena esa
ventana al 100% y `object-fit: cover` recorta lo que sobre, así que vale para
cualquier proporción de origen. Las de hoy van de 3:2 a 16:9 y ninguna es
cuadrada, y el día que se cambie una foto seguirá dando igual.
El `overflow` del envoltorio recorta además por su cuenta, así que la ventana
sigue siendo redonda aunque a la imagen le quiten el radio. Nada de esto pide
posicionar el envoltorio: recortar con radio no necesita `position`.
Por debajo de 920 la maqueta esconde el avatar a propósito y eso no cambia:
aquí no se toca `display`. */
.lon-native .info-chip .thumb {
flex: 0 0 44px;
width: 44px; height: 44px;
border-radius: 50%; overflow: hidden;
line-height: 0;
}
.lon-native .info-chip .thumb img {
width: 100%; height: 100%; max-width: none;
border-radius: 50%; object-fit: cover; display: block;
}
@media (max-width: 920px) {
.lon-native .hero-dock .info-chip .thumb { display: none; }
}
/* ----------------------------------------------------------------------------
5 · Cabecera
-------------------------------------------------------------------------------*/
/* `site.css` centra el isologo con una malla `1fr auto 1fr` cuyos lados son
`nav.main-links` y `.nav-actions`. El widget de menu no emite un `