/* ========================================================================== movil-remates.css · Los diez remates de móvil del CEO (2026-08-07) ========================================================================== Diez defectos vistos en un iPhone y ordenados por él. Todos se resuelven desde aquí salvo el 2, que además necesita partir el texto de la pastilla en dos trozos dentro del `_elementor_data` de la portada (128 y 210) para poder esconder la cola en móvil. Vive aparte y NO dentro de `elementor-native.css` a propósito: esa hoja la tocan otras personas hoy mismo. Se encola desde `inc/enqueue.php` a prioridad 37, detrás de `proyectos-claim.css`, con `land-of-nomads-elementor-native` declarado como dependencia. La prioridad ordena la cola; la dependencia ordena la impresión, que es la que manda en la cascada. Con las dos cosas el orden aguanta aunque alguien mueva un número. Índice, en el orden en que los pidió el CEO: 1 · El signo de las tarjetas de amenidad, pegado al pico redondeado. 2 · La pastilla del cabecero, que en inglés parte la línea. 3 · El icono del desplegable de preguntas frecuentes (el que ya se había pedido una vez y seguía mal). 4 · Relleno inferior de la banda oscura de cifras de la portada. 5 · Lo mismo en la tarjeta «Ilimitado» de casos reales. 6 y 7 · Las tarjetas de cifra que ocupaban media pantalla cada una. 8 · El pie de foto que tapaba la barra fija, ahora sobre la imagen. 9 · Los dos rótulos de la barra fija. 10 · «Agenda una llamada» del menú. Medidas del antes y del después: `website/_scripts/medir-remates-movil.py`. Contraste del pie de foto: `website/_scripts/medir-velo-pie-de-foto.py`. Nada de borde grueso de color ni de letra decorativa gigante de fondo: las dos están vetadas en el repositorio. El negro es siempre `#1C1410`, la tinta de marca (`--ink`), escrita en `rgba()` donde hace falta canal alfa. ========================================================================== */ /* ========================================================================== 1 · El signo de las tarjetas de amenidad ========================================================================== Síntoma: el `+` de trastero y mobiliario se ve montado sobre el pico redondeado de la tarjeta, y con hueco muerto por debajo. Causa medida (390 puntos, `/es/financiacion/`): la tarjeta es un flex con `align-items: flex-start` y 14 de relleno (`calc-amenidades.css`), así que la pastilla de 28 se clava arriba a la derecha. Su centro cae a 29 puntos del borde de arriba y a 29 del de la derecha, y el pico de la tarjeta tiene 16 de radio: la pastilla queda a 15 puntos de cada lado recto y a 2,4 de la prolongación del arco. Debajo le sobran 48,44 puntos de tarjeta vacía. El signo NO está descentrado dentro de su propia pastilla (desvío medido: 0,01 en horizontal y 0,50 en vertical). Lo que está mal colocado es la pastilla dentro de la tarjeta. Arreglo: el texto sigue arriba (que es donde tiene que estar) y solo el signo se centra en vertical. Su centro pasa de 29 a 45,7 puntos del borde de arriba, o sea lejos del pico, y la tarjeta queda equilibrada. Va sin envolver en `@media` porque el defecto es el mismo a cualquier ancho: la tarjeta mide 88 de alto mínimo en todas las medidas. */ .calc-lon .calc-amen-card .calc-amen-sig, .elementor .calc-lon .calc-amen-card .calc-amen-sig { align-self: center; } /* ========================================================================== 2 · La pastilla del cabecero ========================================================================== Síntoma: «ECO-VILLAS AND ECO-APARTMENTS IN THE PHILIPPINES» se ve mal en móvil. Causa medida (390 puntos, portada inglesa): la pastilla es un flex con punto, hueco de 8 y texto. Dentro le quedan 330 puntos de contenido y la línea pide 340,1 (8 del punto, 8 del hueco y 324,1 del texto). Se pasa por 10,1 puntos, el flex parte, y el punto se queda solo en una línea con el texto debajo. La pastilla pasa de 29 a 45 puntos de alto. En español el texto es más corto (284,7) y entra, pero con el relleno de 14 el rótulo casi toca el borde de la pastilla. Arreglo, las dos cosas que pidió el CEO: a · Acortar en móvil. El texto de la portada se parte en dos trozos en el `_elementor_data`; la cola («in the Philippines» / «en Filipinas») se esconde por debajo de 560. Queda «ECO-VILLAS AND ECO-APARTMENTS», unos 200 puntos, que con el punto y el hueco entran de sobra en los 330 disponibles. El país no se pierde: lo dice el titular justo encima, en los dos idiomas. b · Relleno a la izquierda: de 14 a 20 puntos. El de la derecha se queda en 14 porque ahí no hay nada que separar. El texto nuevo no usa ninguna palabra vetada (ni `invest`, `property` o `real estate` en inglés, ni «propiedad», «inversión» o «comprar» en español): son las mismas palabras de antes, sin la cola. */ @media (max-width: 560px) { .lon-native .hero-under .tag-pill { padding-inline-start: 20px; } .lon-native .hero-under .tag-pill .lon-pastilla-cola { display: none; } } /* ========================================================================== 3 · El icono del desplegable de preguntas frecuentes ========================================================================== Este ya se había pedido una vez. Seguía mal, y no por poco. Síntoma en la captura del CEO: la pregunta abierta enseña un círculo rojo con un guion torcido dentro. Causa medida sobre la página servida (`/es/faq/`, 390 puntos, primera pregunta abierta). Elementor emite DOS iconos por pregunta, cada uno en su ``, y enciende uno u otro con `display`: span.elementor-toggle-icon-closed el más span.elementor-toggle-icon-opened el menos El arreglo anterior escribió, en `elementor-native.css`: .lon-native .faq-list .elementor-toggle .elementor-tab-title .elementor-toggle-icon > span { line-height: 0; display: inline-flex } Eso vale (0,6,0). La regla de fábrica que apaga el más al abrir vale (0,5,0), o sea que pierde: el más NUNCA se esconde. Con la pregunta abierta la píldora de 36 acaba con dos hijos de 36 centrados dentro, y lo medido es exactamente eso: píldora en x=334, el más en x=316 y el menos en x=352. Cada uno se sale 18 puntos, la mitad de su ancho. Lo que se ve dentro del círculo es la mitad derecha del más pegada a la mitad izquierda del menos. De ahí el guion torcido. Es el caso de manual de por qué hay que mirar el valor CALCULADO y no la regla escrita: la regla estaba, aplicaba, y precisamente por aplicar de más rompía el cambio de estado. Arreglo: devolver el encendido y apagado por estado con peso suficiente para ganarle a la regla de arriba. Se apunta al HIJO DIRECTO (`>`) a propósito: el SVG del menos lleva también la clase `elementor-toggle-icon-opened`, y sin el combinador estas reglas lo apagarían a él también. */ .lon-native .faq-list .elementor-toggle .elementor-tab-title .elementor-toggle-icon > .elementor-toggle-icon-opened { display: none; } .lon-native .faq-list .elementor-toggle .elementor-tab-title.elementor-active .elementor-toggle-icon > .elementor-toggle-icon-closed { display: none; } .lon-native .faq-list .elementor-toggle .elementor-tab-title.elementor-active .elementor-toggle-icon > .elementor-toggle-icon-opened { display: inline-flex; } /* ========================================================================== 4 y 5 · El relleno de abajo de las dos bandas oscuras ========================================================================== Son el mismo componente y el mismo defecto: `.stats-premium`, en la portada (99 años de derecho de uso, 2 destinos) y en casos reales (la tarjeta «Ilimitado»). El relleno NO falta. La banda declara y calcula `padding: 28px` por los cuatro lados. Lo que pasa es que su contenido está 26 puntos más abajo de donde debería: banda (portada, 390) arriba 108,75 alto 627,45 abajo 736,20 caja de contenido arriba 136,75 abajo 708,20 última celda arriba 621,28 alto 112,92 abajo 734,20 hueco visible abajo 2,00 puntos, en vez de 28 Las cuatro celdas llevan `transform: matrix(1, 0, 0, 1, 0, 26)` puesto en línea. Es el estado inicial de la entrada de `assets/motion.js` (bloque 9, `gsap.from(grid.children, { y: 26, autoAlpha: 0, ... })`) que nunca vuelve a cero: la opacidad sí termina su recorrido (medida de 0 a 1 al entrar en pantalla) y el desplazamiento se queda clavado en los 26 de salida. Se comprobó bajando despacio, esperando 2,5 segundos y siguiendo bajando: el 26 no se mueve. Pasa a los dos anchos y en las dos páginas. La consecuencia es doble y se ve en la captura: arriba sobran 54 puntos (28 de relleno más 26 de desplazamiento) y abajo quedan 2. Por qué se corrige aquí y no en `motion.js`: el mismo bloque anima ocho rejillas más del sitio y `motion.js` es de todos. Como el desplazamiento no llega a animarse nunca (es un desfase fijo, no un movimiento), apagarlo en esta banda no quita ninguna animación: la entrada en fundido se conserva entera. El `!important` es obligatorio: hay que ganarle a un estilo en línea, no a otra hoja. Queda apuntado para quien toque `motion.js`: el defecto de fondo afecta a todas las rejillas de ese bloque y ahí lo que toca es un `fromTo`. */ .lon-native .stats-premium > .cell { transform: none !important; } /* ========================================================================== 6 y 7 · Las tarjetas de cifra que ocupaban media pantalla ========================================================================== Síntoma: las cuatro tarjetas de casos reales (332, 92, 50 %, 700 $) obligan a bajar sin dar nada a cambio. Causa medida (390 puntos, `/es/inversores/`): `.stat-tile--soft` declara `min-height: 230px` con `align-content: end`. El contenido real de cada tarjeta mide entre 103 y 124 puntos (cifra de 44, hueco de 6, rótulo de 21 o 42, y 16 de relleno arriba y abajo). O sea que entre 106 y 127 puntos de cada tarjeta son aire, y las cuatro juntas ocupan 968 puntos: 1,15 pantallas de un iPhone de 844. El CEO dio a elegir: subir el cuerpo para que la tarjeta se gane su alto, o quitarle altura. Se hacen LAS DOS, porque por separado ninguna cierra el problema. · Solo subir el cuerpo no quita ni un punto de recorrido. La cifra está en `clamp(44px, 5vw, 72px)`, que a 390 se queda en el suelo de 44: por mucho que suba el tope, a esta anchura no se mueve. Habría que subir el suelo, y aun así 230 seguirían siendo 230. · Solo quitar altura deja una cifra de 44 en una tarjeta corta, y entonces la tarjeta deja de ser un dato destacado y se lee como una fila de lista. Se pierde la jerarquía que justifica el componente. Juntas sí: la cifra sube a 56 (un 27 % más de cuerpo, el dato manda) y el alto mínimo baja de 230 a 168, que es lo que necesita la peor tarjeta (la del rótulo de dos líneas) para no apretarse: 16 de relleno, 56 de cifra, 6 de hueco, 42 de rótulo y 16 más son 136, y quedan 32 de holgura. El icono del rincón sigue despejado: ocupa de 18 a 70 contando desde arriba y por la derecha, y la cifra más ancha de las cuatro no llega a alcanzarlo. Solo por debajo de 560, que es donde la rejilla es de una columna. De 560 para arriba caben dos o cuatro por fila y el alto de 230 no molesta a nadie. La cuenta del recorrido ahorrado va en el informe, medida, no estimada. */ @media (max-width: 560px) { .lon-native .stats-row .stat-tile--soft { min-height: 168px; } .lon-native .stats-row .stat-tile--soft .num { font-size: 56px; } } /* ========================================================================== 8 · El pie de foto, encima de la imagen ========================================================================== Síntoma: debajo de la foto del Pool Club hay un rótulo que en móvil queda tapado por la barra fija de abajo. Pasa con las CUATRO fotos de la sección «Lo que hay al salir de casa» de San Fernando (130 en español, 212 en inglés), no solo con la del Pool Club. Causa medida (390 puntos): `.card-mini` es una rejilla de dos filas, la foto (358 x 375,89) y el rótulo (358 x 20,25) separados por 12 de hueco. El rótulo es contenido normal, o sea que viaja con la página. La barra fija (`.sticky-cta`) ocupa los 76 puntos de abajo de la pantalla en las cinco páginas que la traen, San Fernando entre ellas. Cuando la foto llena el alto visible, su pie cae justo en esa franja y desaparece debajo de la barra. Arreglo: el pie sube ENCIMA de la imagen, como ya se hizo con el claim de las tarjetas de proyecto en `assets/proyectos-claim.css`. Mismo criterio y mismos números de velo, que están medidos allí. POR QUÉ HACE FALTA VELO. Una foto no es un fondo: detrás de cada letra hay el píxel que toque, y en estas cuatro hay agua, cielo, arena y pistas iluminadas. Sin velo el contraste depende del encuadre, o sea que no está garantizado. La tinta va en `rgba()` porque necesita canal alfa y `var(--ink)` es un hexadecimal sin él. POR QUÉ EL VELO CUELGA DE LA TARJETA Y NO DE LA FOTO. En las tarjetas de proyecto el claim es hijo del `.media`, así que el recorte redondeado de la foto lo recorta a él también. Aquí el rótulo es HERMANO del `.media`, no hijo, y un velo colgado de él se saldría por los cuatro picos. Se resuelve recortando en la tarjeta: al sacar el rótulo del flujo, la caja de la tarjeta pasa a medir exactamente lo que la foto, así que su recorte y el de la foto coinciden. POR QUÉ ARRIBA DE LA FOTO Y NO ABAJO. La primera versión lo puso abajo, que es donde vive el claim de las tarjetas de proyecto, y se midió: no bastaba. La barra fija ocupa SIEMPRE los 88 puntos de abajo de la pantalla (76 de barra y 12 de separación), y con el pie pegado al borde inferior de la foto seguía tapado en cuanto la foto se dejaba correr por debajo de la barra: 45,1 puntos de solape medidos a 390 en español y 44,5 en inglés, con las dos líneas del pie del Pool Club partidas por la mitad. La cuenta con el pie ARRIBA: el pie deja de leerse solo cuando lo que asoma de la foto por encima de la barra es menos que el propio pie, o sea cuando ya no se está viendo la foto. Traducido a recorrido, a 390 puntos el pie abajo se lee en un tramo de 392 puntos de desplazamiento y el pie arriba en uno de 687: un 75 % más de margen. Es la diferencia entre arreglar el sintoma que trajo el CEO y arreglarlo solo si el visitante para el dedo en el sitio justo. Y de paso se lee mejor en una lista de fotos apiladas: se sabe qué se está mirando ANTES de mirarlo. POR QUÉ SOLO HASTA 920. Es el ancho exacto en el que existe la barra fija (`site.css`, bloque de la barra). Por encima no hay barra, no hay nada que tape el pie, y la rejilla de cuatro columnas con el rótulo debajo es la maqueta aprobada. Se arregla donde está el defecto y ni un punto más. El cuerpo sube de 15 a entre 18 y 21 según el ancho, que es el «destácalo» del encargo: encima de la foto un cuerpo de 15 se pierde. */ /* Se excluyen a mano las tarjetas de `.discover-grid` que YA tienen su texto encima de la foto: las de «¿Cuál encaja contigo?» de las dos páginas de proyectos, que llevan `.card-mini--claim` y las resuelve `assets/proyectos-claim.css`. Su pie se llama `.claim`, no `.name`, así que la regla del pie no las tocaría igualmente; el `:not()` está para que las tres declaraciones de la tarjeta tampoco las rocen. Comprobado en captura: el claim de proyectos se ve exactamente igual que antes de este encargo. */ @media (max-width: 920px) { .lon-native .discover-grid .card-mini:not(.card-mini--claim) { position: relative; overflow: hidden; border-radius: var(--r-lg); } .lon-native .discover-grid .card-mini > .name { position: absolute; inset: 0 0 auto 0; z-index: 2; margin: 0; padding: 16px 16px 18px; color: var(--cream); font: 600 clamp(18px, 4.6vw, 21px)/1.3 var(--font-body); text-wrap: pretty; } /* El velo. `inset` se escribe ENTERO, con `bottom: auto` explícito, y no solo con `top: 0`. Una caja absoluta con `top`, `bottom` y `height` a la vez está sobredeterminada, y una hoja de más abajo que declare el lado contrario rompe el cálculo sin que el estilo calculado parezca raro. Es el tropiezo que quedó documentado en `proyectos-claim.css`, donde el velo se pintaba al revés con las tres medidas aparentemente correctas. Las dos opacidades y el fundido salen del tanteo que ya se hizo para el claim de proyectos (`website/_scripts/tantear-velo-claim.py`): 0,68 en el lado del texto y 0,64 en el borde del bloque dieron 5,23 en el peor píxel, con 0,73 de colchón sobre el 4,5 que pide el texto normal, y devolviendo algo de foto. Se coge el más flojo que pasa con margen, no el más oscuro que pasa. Como el pie va arriba, el degradado va HACIA ABAJO: tinta plena bajo el texto y apagado por debajo del bloque, para que la foto empiece limpia. La comprobación sobre estas cuatro fotos concretas, en los dos idiomas y a los dos anchos, está en `medir-velo-pie-de-foto.py`. */ .lon-native .discover-grid .card-mini > .name::before { content: ""; position: absolute; inset: 0 0 auto 0; /* el `bottom: auto` es el que ancla el velo arriba */ height: calc(100% + var(--fundido)); z-index: 0; pointer-events: none; --fundido: clamp(40px, 5vw, 80px); --tinta-baja: .68; --tinta-alta: .64; background: linear-gradient(to bottom, rgba(28, 20, 16, var(--tinta-baja)) 0%, rgba(28, 20, 16, var(--tinta-alta)) calc(100% - var(--fundido)), rgba(28, 20, 16, .34) calc(100% - (var(--fundido) * .52)), rgba(28, 20, 16, 0) 100%); } /* El texto por encima del velo, con `z-index` positivo y no con negativo en el pseudoelemento: un `z-index: -1` dentro de un contexto de apilamiento se cuela por detrás del fondo de la caja. */ .lon-native .discover-grid .card-mini > .name > * { position: relative; z-index: 1; } } /* ========================================================================== 9 · Los dos rótulos de la barra fija ========================================================================== Medido en las cinco páginas que traen la barra, en los dos idiomas y a los dos anchos: «Book» y «WhatsApp» (y «Agendar» y «WhatsApp» en español) tienen EXACTAMENTE el mismo cuerpo, 15 puntos con peso 600, y la misma altura de tinta, 19,0 puntos. No hay ninguna regla que le dé un cuerpo distinto a uno de los dos: las veinte medidas dan el mismo número. Lo que sí cambia entre uno y otro es el sentido del contraste: «Book» es crema sobre el rojizo de marca y «WhatsApp» es tinta sobre crema. Y `tokens.css` declara `-webkit-font-smoothing: antialiased` en el `body`. Esa propiedad adelgaza el trazo, y lo adelgaza MUCHO más cuando la letra es clara sobre fondo oscuro que al revés. En un iPhone eso se ve; en Chromium sobre Windows la propiedad no hace nada, que es justo por lo que una revisión de escritorio no lo caza. Arreglo: devolverle al rótulo claro el suavizado normal, para que recupere el grosor que pierde y case con el otro. Los dos siguen a 15, que es lo que pidió el CEO al decir que se igualen al de WhatsApp. Se escriben los dos selectores, con y sin `.elementor` de ancestro, porque la barra se imprime fuera del contenido de la página (`inc/site-chrome.php`, detrás del pie) y las dos hojas del sistema la contemplan de las dos maneras. */ .sticky-cta .btn-primary, .elementor .sticky-cta .btn-primary { -webkit-font-smoothing: subpixel-antialiased; } /* ========================================================================== 10 · «Agenda una llamada» del menú ========================================================================== Síntoma: el botón del cabecero se lee pequeño en móvil. Causa medida: por debajo de 920 hay una regla que lo baja de los 15 puntos del sistema a 14 (`site.css` y su gemela de `elementor-atomic.css`): .site-header .nav-actions .btn-primary { padding: 12px 18px; font-size: 14px } Y ahí está la trampa que el propio CEO señaló: en este sitio la clase del diseño (`.btn`, `.btn-primary`) vive en el DIV que ENVUELVE al botón, no en el botón. El `` que se ve es `.elementor-button`, y `elementor-native.css` le pone `padding: 14px 26px` a él y `padding: 0` al envoltorio. Resultado: de esa regla el relleno se pierde (se lo come el `padding: 0` del envoltorio, que va después) y solo sobrevive el cuerpo de 14, que sí baja por herencia hasta el ``. El botón se quedó con lo malo de la regla y sin lo bueno. Arreglo, las dos mitades en su sitio: · El cuerpo vuelve a los 15 del sistema, escrito en el envoltorio, que es de donde hereda el `` (`font: inherit`). · El relleno horizontal de 18 que la regla original quería se escribe ahora en el ``, que es quien lo dibuja. El vertical se queda en 14, no en los 12 de aquella regla: 15 de línea más 14 y 14 son los 43 puntos de alto que mide un botón en este sistema de diseño. Con 12 se quedaría en 39 y perdería tanto la medida del sistema como la zona de pulsación. Con 18 de relleno en vez de 26 el botón sale más estrecho que hoy pese al cuerpo mayor, que es lo que le devuelve el sitio al rótulo español, el más largo de los dos. */ @media (max-width: 920px) { .lon-native.site-header .nav-actions .btn-primary, .elementor .site-header .nav-actions .btn-primary { font-size: 15px; } .lon-native .nav-actions .btn-primary .elementor-button, .lon-native .nav-actions .btn-primary .elementor-button:hover, .lon-native .nav-actions .btn-primary .elementor-button:focus, .lon-native .nav-actions .btn-primary .elementor-button:visited { padding: 14px 18px; } }