too, but they live
inside .lang-toggle-mobile and must NOT pick up nav sizing, the faux-bold, or
the per-link stagger — as nth-of-type children of their own wrapper they would
otherwise fire at 0.05s/0.11s, ahead of the 0.35s their container animates on. */
.mobile-menu.is-open > a,
.mobile-menu.is-open .lang-toggle-mobile {
opacity: 0;
transform: translateY(12px);
transition: opacity 0.5s var(--vt-ease, cubic-bezier(0.77, 0, 0.175, 1)),
transform 0.5s var(--vt-ease, cubic-bezier(0.77, 0, 0.175, 1));
}
.mobile-menu.is-open.links-in > a,
.mobile-menu.is-open.links-in .lang-toggle-mobile {
opacity: 1;
transform: translateY(0);
}
.mobile-menu.is-open.links-in > a:nth-of-type(1) { transition-delay: 0.05s; }
.mobile-menu.is-open.links-in > a:nth-of-type(2) { transition-delay: 0.11s; }
.mobile-menu.is-open.links-in > a:nth-of-type(3) { transition-delay: 0.17s; }
.mobile-menu.is-open.links-in > a:nth-of-type(4) { transition-delay: 0.23s; }
.mobile-menu.is-open.links-in > a:nth-of-type(5) { transition-delay: 0.29s; }
.mobile-menu.is-open.links-in .lang-toggle-mobile { transition-delay: 0.35s; }
}
@media (max-width: 700px) {
:root {
--gutter: 24px;
}
body {
font-size: 18px;
line-height: 1.55;
}
/* header: compact mobile sizing */
.lang-toggle {
display: none;
}
.sticky-nav .sticky-logo img,
.sticky-nav .sticky-logo svg {
width: 108px; /* XD: 100px. Sube en la misma proporción que el valor de
escritorio (164px) para que la barra no quede apretada en
móvil comparada con la de escritorio. Era 110px; 108 es el
múltiplo de 12 del empate 108/112 y además conserva mejor
esa proporción (0,659 frente a 0,667). */
}
.sticky-nav-inner {
padding: 16px var(--gutter); /* XD: 8px. 11px en la ronda de pulido; 18px el
2026-09-11, subiendo con escritorio (24px) para
que móvil no quede apretado en comparación.
16px desde el 2026-09-22 (rejilla de 4). */
}
.nav-row {
padding-top: 16px;
padding-bottom: 16px;
}
.logo-link img,
.logo-link svg {
/* 90px era el valor de Blur; el XD pide 112px en móvil
(/tmp/xd.css .logo-link img a max-width:700px). margin-bottom:-14px
(Blur) retirado por el mismo motivo que en escritorio — el archivo no
lo declara. OJO aparte: el archivo pone .nav-row { align-items:
center } en este breakpoint y aquí se mantiene flex-end (heredado del
root, sin override) — no se ha tocado por quedar fuera del alcance de
esta ronda; si el logo se ve desalineado en móvil, es la primera
propiedad a revisar. */
width: 112px;
}
/* hero: full bleed per mobile artboard */
.container--hero {
padding-inline: 0;
}
/* DOS RATIOS MÓVILES, deliberadamente (CONVENCIÓN) — el 1184/656 de
escritorio es el ancho del artboard de 1280 y en el móvil no significa
nada: dejaba los bloques en ~212px de alto, un sello de correos justo
donde va el material más caro. Se sustituye por:
HERO 430/500 vertical (≈0.86) — como lo dibujó el XD. Es lo
primero que se ve y llena la pantalla; que sea el bloque
más vertical del móvil es una decisión, no un descuido.
CONTENIDO 500/430 apaisado (≈1.16) — la misma proporción girada,
a sangre (ver el full-bleed abajo). 430×370.
El apaisado no es solo estética: los renders de recursos/ son TODOS
16:9, así que cada punto de verticalidad se paga tirando ancho con
object-fit: cover. El 430/500 solo dejaba ver el 48% del render; el
500/430 a sangre enseña el 65%.
Los pares (.slide--pair, .render-pair) y el feature-grid quedan FUERA:
ya se apilan a 1 columna y traen su propio ratio vertical (~0.82). */
.img-band--hero img,
.container--hero .carousel .slide img,
.container--hero .video-block video,
.container--hero .video-block .poster {
aspect-ratio: 430 / 500;
}
.media-block.carousel .slide:not(.slide--pair) img,
.media-block.video-block video,
.media-block.video-block .poster {
aspect-ratio: 500 / 430;
}
/* A SANGRE — los bloques de media de contenido se comen el gutter del
.container y tocan los bordes de la pantalla, mientras el texto
conserva el suyo. No es un patrón nuevo: el hero ya sangra (ver
.container--hero arriba); esto lo extiende al resto del media.
Se usa margin negativo y no width:100vw a propósito — 100vw incluye
la barra de scroll en algunos navegadores y provoca scroll horizontal.
El margen negativo compensa exactamente el padding del contenedor. */
.container:not(.container--hero) > .media-block {
margin-inline: calc(var(--gutter) * -1);
}
/* mobile artboard shows the accent circle arrows on the hero */
.carousel--hero .carousel-arrow {
display: inline-flex;
}
/* Círculo también en móvil: decisión de Chus (2026-09-10, PR #5). El XD
pide aquí 72x24 (la flecha plana), y una ronda anterior lo aplicó tal
cual dejando el border-radius:50% de escritorio, con lo que salía un
óvalo. 48 y no los 44 de Blur: múltiplo de 12 (ver follow-ups.md) y el
mismo lado que los botones del selector en este breakpoint. El chevron
vuelve a los 24px de escritorio. Registrado en KNOWN_INTENTIONAL_DIVERGENCES. */
.carousel-arrow {
width: 48px;
height: 48px;
}
.carousel-arrow svg {
width: 24px;
height: 24px;
}
.carousel-arrow--prev {
left: 12px;
}
.carousel-arrow--next {
right: 12px;
}
.copy-section {
padding-top: 32px;
}
.copy-section h1,
.copy-section h2,
.feature-grid h2,
.ubicacion-section h2,
.invierte-hero-copy h1,
.invest-section h2 {
font-size: 38px; /* Bodoni 72 Book 38px per mobile artboard */
line-height: 1.15;
}
.copy-section .lead {
margin-top: 16px;
}
.copy-section .btn-pill {
margin-top: 32px;
}
/* Ritmo vertical (CONVENCIÓN) — versión móvil; ver nota en la regla desktop. */
.container:not(.container--hero) > .media-block:not(:first-child) {
margin-top: 40px;
}
.carousel .slide.slide--pair {
grid-template-columns: 1fr;
gap: 24px;
}
.feature-grid {
grid-template-columns: 1fr;
row-gap: 48px;
margin-top: 40px;
}
.feature-grid .btn-pill {
margin-left: 0;
align-self: flex-start;
}
.render-pair {
grid-template-columns: 1fr;
gap: 24px;
}
.map-band {
margin-top: 48px;
}
/* A SANGRE — el mapa se come el gutter del .container y toca ambos bordes de
la pantalla, igual que los .media-block. El enlace .map-fallback es hermano
de .map-embed, así que conserva su margen. */
.map-band .map-embed {
margin-inline: calc(var(--gutter) * -1);
}
.ubicacion-section .body,
.invierte-hero-copy,
.lead-form,
.invest-section {
padding-inline: 0;
}
.lead-form .form-grid {
grid-template-columns: 1fr;
row-gap: 40px;
}
.lead-form .field--bare {
display: none; /* desktop-only second underline from the XD layout */
}
.lead-form .field input,
.lead-form .field label {
font-size: 24px; /* label matches input so it stays aligned (float is em-based) */
}
.invest-section .intro {
font-size: 22px;
}
.invest-row p {
font-size: 18px;
}
.plan-viewer {
padding: 24px;
}
.plan-title {
font-size: 36px;
}
.plan-selector {
grid-template-columns: 1fr; /* stack label above its buttons on small screens */
gap: 12px;
}
/* .selector-buttons ya no repite su gap aquí: desde el 2026-09-10 escritorio
declara esos mismos 12px, y .selector-buttons no existe en el XD, así que
la copia era el mismo número en dos sitios sin nadie que lo pidiera.
Los 48px de .plan-selector button SÍ se quedan, aunque escritorio declare
ahora lo mismo: el XD archivado los declara en este breakpoint, y
borrarlos abriría una divergencia contra el archivo a cambio de nada. */
.plan-selector .selector-label {
width: 100%; /* XD (ausente hasta esta ronda) */
margin-bottom: 4px;
}
.plan-selector button {
width: 48px;
height: 48px;
font-size: 20px;
}
.plan-viewer-outer .carousel-arrow--prev {
left: 8px;
}
.plan-viewer-outer .carousel-arrow--next {
right: 8px;
}
.site-footer {
/* no lateral margin: the .footer-wrap gutter already insets the box, so it
lines up with the container/images instead of doubling the inset —
divergencia deliberada frente al XD (que trae var(--gutter) lateral),
documentada en tools/check-style-xd.py KNOWN_INTENTIONAL_DIVERGENCES.
El margen inferior sí se alineó al XD en esta ronda: 16px -> 24px. */
margin: 64px 0 24px;
padding: 32px 24px;
/* ORDEN MÓVIL DEL FOOTER (decisión de Chus): el wordmark HAVEN abre el footer,
encima de los teléfonos, y los iconos sociales se quedan abajo haciendo de
separador entre el texto y los logos de partners. Para poder reordenar hay
que aplanar la jerarquía: el footer pasa a ser la rejilla y sus nietos
suben a ser ítems suyos (ver `display: contents` más abajo). El SVG del
borde autodibujado NO se ve afectado — es position:absolute, o sea que
está fuera de flujo y nunca llega a ser ítem de la rejilla. */
display: grid;
row-gap: 28px;
}
/* Se disuelven los dos wrappers para que .logo-haven, .footer-social y
.footer-partners pasen a ser hermanos de .footer-cols y `order` pueda
colocarlos. Son sin semántica, así que `display: contents` no quita
nada al árbol de accesibilidad. Los selectores `.footer-logos .x` siguen
funcionando: contents saca la caja, no el nodo del DOM. */
.footer-logos,
.footer-brand {
display: contents;
}
/* XD (era ausente en este breakpoint, heredaba los 92px del root). Dado
el display:contents de arriba, este margin-top es inerte en la
práctica — la caja se disuelve y no queda nada que margine — pero se
declara igual porque es uno de los diez valores que diste literalmente
en esta ronda; el espaciado real de esta zona del footer en mobile lo
dan .footer-social/.footer-partners y la rejilla del padre. */
.footer-logos {
margin-top: 48px;
}
.footer-copyright {
margin: 0 0 24px; /* aligns to the mobile footer box edges */
flex-direction: column; /* stack so the two credits don't collide */
align-items: flex-start;
gap: 8px;
font-size: 11px;
}
.footer-cols {
grid-template-columns: 1fr;
row-gap: 28px;
}
.footer-contact {
font-size: 18px;
/* Los datos de contacto van DEBAJO de la descripción de HAVEN (decisión de
Chus). Solo aplica aquí: a partir de 700px .footer-cols vuelve a ser de
dos columnas (contacto izquierda / nota derecha) y no hay "debajo".
.footer-cols conserva su propia rejilla — NO lleva `display: contents` —
así que basta con reordenar sus dos hijos, sin tocar el aplanado del
resto del footer. La nota no es interactiva, así que el orden de foco no
se resiente: los únicos enlaces de la zona están dentro de este bloque y
entre ellos mantienen su orden. */
order: 1;
}
.footer-note {
font-size: 17px;
}
/* El wordmark abre el footer. Es el único que necesita `order`: una vez
aplanada la jerarquía el resto ya queda en el orden correcto por DOM
(.footer-cols -> .footer-social -> .footer-partners). */
.footer-logos .logo-haven {
order: -1;
width: 140px; /* XD (/tmp/xd.css a max-width:700px). Antes width:100%
+ max-width:140px — en la práctica ya renderizaba a
140px en cualquier viewport móvil realista (≥320px),
así que el resultado visual no cambia; se deja el
valor fijo del XD por ser el más simple de los dos
que produce el mismo pixel. */
}
/* Ya no va pegado al wordmark (que se ha ido arriba), así que se le quita el
hueco lateral del XD y se le da aire por encima: hace de separador entre el
párrafo y los logos de partners. */
.footer-social {
margin-left: 0;
margin-top: 20px;
}
.footer-logos .icon-instagram {
margin-left: 16px;
}
.footer-logos .icon-youtube,
.footer-logos .icon-instagram {
flex: none; /* los iconos no se encogen; el wordmark sí */
}
/* Rejilla proporcional: 97fr/118fr/82fr SON los anchos del XD, así que los tres
escalan por el mismo factor (se conserva la proporción del diseño) y siempre
caben, hasta 320px. `end` mantiene la misma línea base inferior que en
escritorio (.footer-partners usa align-items: flex-end). */
.footer-partners {
display: grid;
grid-template-columns: 97fr 118fr 82fr;
column-gap: 20px;
align-items: end;
}
/* Aquí la fila es una rejilla y el hueco lo da `column-gap`, así que hay que
anular los márgenes de escritorio: el `margin-left: auto` de Muchagana
empujaría su logo al borde derecho DE SU COLUMNA, y los 24px de Mallol le
comerían ancho. Misma especificidad (0,2,1) que las reglas `:has()` de
arriba, pero van después, así que ganan. */
.footer-logos .footer-partners a {
margin: 0;
}
.footer-logos .footer-partners img {
width: 100%; /* especificidad 0,2,1 — tiene que ganar a las reglas
.footer-logos .logo-* (0,2,0) del bloque desktop */
height: auto;
margin: 0;
}
}
/* ==========================================================================
Chrome — disabled nav link (Brokers)
========================================================================== */
.nav-link--disabled { opacity: .45; cursor: default; pointer-events: none; }
/* ---- Ubicación: Google Maps embed -------------------------------------- */
.map-embed { position: relative; aspect-ratio: 16 / 9; background: var(--offwhite); }
.map-embed iframe,
.map-embed .map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Calm on-brand surface while the Maps script loads (and if the key is missing/blocked). */
.map-canvas { background: var(--offwhite); }
/* Default state of #map (Tarea 7, concepto.html): the static plan of Obarrio the
XD asked for, filling the same box the interactive map will take over. initMap()
removes it only once Google has actually responded; showMapError() re-adds it if
Google never does. Lives inside .map-canvas, not .map-fallback — that class
already means the "Ver en Google Maps" text link below the map (see below). */
.map-canvas .map-static { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.map-canvas--error { display: grid; place-items: center; padding: 24px; text-align: center; }
.map-canvas--error::after {
content: "El mapa no se pudo cargar. Usa el enlace de abajo para ver la ubicación en Google Maps.";
max-width: 34ch; font-size: 15px; line-height: 1.4; color: var(--grey);
}
/* The failure text above is Spanish; /en/ pages declare lang="en" and get this instead.
Only CSS-generated copy on the site — everything else lives in markup or js/main.js. */
html[lang="en"] .map-canvas--error::after {
content: "The map couldn’t load. Use the link below to view the location on Google Maps.";
}
.map-fallback { margin-top: 12px; font-size: 16px; text-align: center; }
.map-fallback a { text-decoration: underline; }
@media (max-width: 700px) { .map-embed { aspect-ratio: 4 / 3; } }
/* La altura de #map la da `aspect-ratio` en .map-embed, arriba — NUNCA la
imagen estática, que es `position: absolute` y no ocupa flujo. Importa el
día que entre la clave: Google sustituye el contenido de #map por su mapa
y la caja tiene que seguir midiendo lo mismo. Si la caja se quedara en
altura 0 no habría nada en pantalla que lo delatase.
El .webp está recortado al plano (1487x1182, ver README), más alto en
proporción que la caja 16/9, así que `object-fit: cover` le recorta un
~15% por arriba y otro tanto por abajo. El pin de HAVEN cae al 46% de la
altura del plano y sobrevive al recorte. */
/* ==========================================================================
Reduced motion — disable decorative animation, keep everything usable
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.reveal {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
/* belt-and-braces: initReveal no corre con reducedMotion=true, así que no
hay cubiertas; si alguna llegara a existir, no debe tapar nada. */
.ct-cover {
display: none !important;
}
.feature-cell[data-cortina].reveal h2,
.feature-cell[data-cortina].reveal p,
.feature-cell[data-cortina].reveal .btn-pill {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.parallax-img {
transform: none !important;
}
.carousel.run .slide.to,
.carousel.run .slide.to img,
.carousel.run .slide::after {
transition: none !important;
}
.sticky-nav {
transition: none;
}
.lead-form .field label,
.lead-form .field input,
.lead-form .field::before,
.lead-form .field::after,
.lead-form .field-icon {
transition: none !important; /* label still floats, just no animation */
}
}
/* Ensure the hidden attribute always wins over component display rules
(plan view/floor toggles + details block toggle their `hidden` attr in JS). */
[hidden] { display: none !important; }
/* ---- Movimiento reducido, segunda pasada -------------------------------
Va al FINAL del fichero por cascada, no por gusto: el subrayado de hover/foco
del nav (dos filetes, ::before lima y ::after maroon) se declara en tres
sitios repartidos (.main-nav a arriba, .sticky-nav nav a en el bloque de la
sticky, y .mobile-menu > a dentro de la media query de móvil), todos con la misma especificidad que este
override. Una @media no aporta especificidad, así que anularlo desde el bloque
de arriba no servía de nada: ganaba la última regla del fichero. Emitido aquí,
gana este. Al añadir un subrayado nuevo, añadirlo también a esta lista. */
@media (prefers-reduced-motion: reduce) {
.main-nav a::before,
.main-nav a::after,
.sticky-nav nav a::before,
.sticky-nav nav a::after,
.mobile-menu > a::before,
.mobile-menu > a::after,
.carousel-arrow, /* el halo de las flechas aparece sin transición */
.plan-selector button { /* ídem el del selector de tipologías */
transition: none;
}
}