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 {
width: 80px; /* wider to track the enlarged header logo (was 57px) */
}
.sticky-nav-inner {
padding: 8px var(--gutter);
}
.nav-row {
padding-top: 18px;
padding-bottom: 18px;
}
.logo-link img,
.logo-link svg {
width: 90px;
margin-bottom: -14px;
}
/* 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.img-band 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);
}
/* Halo del blur sin parallax que lo tape — el parallax está desactivado por
debajo de este breakpoint (ver initParallax en js/main.js), y era su
scale(1.16) lo que dejaba fuera de cuadro el borde difuminado del
blur(16px) del reveal. Se sustituye por una escala mínima que SOLO existe
mientras la imagen está borrosa y aterriza en scale(1): el halo queda
fuera al entrar y la imagen acaba entera, que es justamente lo que
buscábamos al quitar el parallax.
Transicionar `transform` aquí es seguro PORQUE en móvil el JS ya no lo
escribe. En escritorio seguiría siendo un error — ver la nota CRÍTICA en
la sección de reveal. */
.carousel.reveal .slide img,
.render-pair .frame.reveal img,
.feature-cell.reveal figure img {
transform: scale(1.06);
transition: filter 1.6s ease, transform 1.6s ease;
}
.carousel.reveal.is-visible .slide img,
.render-pair .frame.reveal.is-visible img,
.feature-cell.reveal.is-visible figure img {
transform: scale(1);
}
/* (el override que reponía las flechas del hero aquí ya no hace falta: desde
que el hero de ubicacion es un carrusel real, nunca se ocultan — ver la
nota junto a .carousel--hero arriba.) */
.carousel-arrow {
width: 44px;
height: 44px;
}
.carousel-arrow svg {
width: 20px;
height: 20px;
}
.carousel-arrow--prev {
left: 8px;
}
.carousel-arrow--next {
right: 8px;
}
.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: 32px; /* Commuters Sans, scaled from XD 40px for the 430px artboard */
line-height: 1.2;
}
.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-info {
padding-block: 0; /* the container supplies the padding when the viewer stacks */
}
.plan-floor-toggle {
/* The four buttons wrap here, so each group already has its own line — the
rule would just hang off the left edge of the second one. */
border-left: 0;
padding-left: 0;
}
.plan-title {
font-size: 36px;
}
.plan-selector {
grid-template-columns: 1fr; /* stack label above its buttons on small screens */
gap: 12px;
}
.selector-buttons {
gap: 12px;
}
.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 */
margin: 64px 0 16px;
padding: 32px 24px;
/* ORDEN MÓVIL DEL FOOTER (decisión de Chus): el wordmark BLUR 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-blur, .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;
}
.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: 6px;
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 BLUR (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-blur {
order: -1;
width: 100%;
max-width: 140px; /* se encoge por debajo de 140 si el ancho aprieta */
}
/* 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: 15px;
}
.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 26px 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); }
.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-family: var(--font-sans); 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-family: var(--font-sans); font-size: 16px; text-align: center; }
.map-fallback a { text-decoration: underline; }
@media (max-width: 700px) { .map-embed { aspect-ratio: 4 / 3; } }
/* ==========================================================================
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: JS no añade .reveal con reducedMotion=true, pero si
alguna imagen llegara a tener el estado inicial de blur, lo cancelamos.
`transform` entra aquí desde que el móvil usa scale(1.06) como tapadera
del halo: sin esta línea, una imagen que llegara al estado inicial se
quedaría congelada al 106% para siempre. */
.carousel.reveal .slide img,
.render-pair .frame.reveal img,
.feature-cell.reveal figure img {
filter: none !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 {
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; }