/* Pasaje Empresalia · sitio y presentación comercial
   Diseño y desarrollo: Lazarillo Studio (lazarillo.studio)
   ¿Necesitas ajustar algo? Con gusto te ayudamos: WhatsApp +52 1 722 322 2354.
   Las modificaciones realizadas fuera del estudio quedan fuera del alcance de nuestro soporte; si algo deja de
   funcionar después de un cambio externo, podemos revisarlo como un trabajo aparte. */
/* ==========================================================================
   Pasaje Empresalia · Recorrido vertical (móvil y tablet) — mobile.js
   Vive bajo body.mobile-mode (ancho < 1024 o alto < 700). Misma historia que el recorrido horizontal, en columna.
   Reglas del pase móvil (2026-09-24): texto nunca por debajo de 14 px (cuerpo 16, entradas 18), espacios en múltiplos
   de 4/8 (--space-*), zonas táctiles de 44 px o más, nada sobre las fotos salvo el título de la portada.
   ========================================================================== */
body.mobile-mode:not(.deck-mode){background:var(--bg)} /* en el deck manda el negro teñido de style.css */
body.mobile-mode #main,body.mobile-mode .intro-strip,body.mobile-mode .header-contact,body.mobile-mode .h-navigation{display:none!important}
body.deck-mode .m-story,body.deck-mode .m-cta{display:none!important}
/* cabecera transparente y fija sobre el recorrido; sobre portada, fotos a sangre y cierre pasa a blanco (body.on-dark) */
body.mobile-mode .topbar{position:fixed;inset:0 0 auto;height:var(--topbar-h);padding:0;border:0;background:transparent;z-index:60;pointer-events:none}
body.mobile-mode .topbar>*{pointer-events:auto}
body.mobile-mode{--topbar-h:68px}
body.mobile-mode .brand{left:var(--space-5);top:18px;transition:color .3s,opacity .2s}
body.mobile-mode .brand-logo{height:32px}
body.mobile-mode:not(.on-dark-brand) .brand{color:var(--text)}
body.mobile-mode .floating-nav{filter:none;top:10px;left:auto;right:var(--space-5);transform:none;gap:6px}
body.mobile-mode .menu-shell{width:auto}
body.mobile-mode #menu-toggle{height:48px;padding:0 var(--space-4);gap:12px}
body.mobile-mode .deck-switch{width:48px;height:48px}
body.mobile-mode #site-menu{left:auto;right:0;width:min(380px,calc(100vw - 2 * var(--space-5)))}
body.mobile-mode #site-menu>a{font-size:var(--text-md);padding:var(--space-3) 0}
/* al dejar la portada, sobre papel, la cabecera lleva una banda translúcida: el texto pasa por debajo sin chocar con el logo */
body.mobile-mode .topbar{transition:background .3s,box-shadow .3s}
body.mobile-mode.is-scrolled:not(.on-dark):not(.deck-mode) .topbar{background:rgb(247 248 244 / .86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}

.m-story{--mg:var(--space-5);position:relative;z-index:1;color:var(--text);background:var(--bg);font-size:var(--text-base);line-height:1.5;overflow-x:clip}
.m-story:focus-visible{outline:0}
.m-chapter{padding:var(--space-8) 0;scroll-margin-top:var(--topbar-h)}
.m-copy{padding:0 var(--mg);max-width:640px}
.m-story h1,.m-story h2{margin:0 0 var(--space-4);max-width:none;letter-spacing:-.02em;line-height:1.1}
.m-story h2{font-size:clamp(28px,7.6vw,36px)}
.m-story .h-lead{font-size:var(--text-md);line-height:1.45;margin:0 0 var(--space-5);max-width:38ch;letter-spacing:-.01em}
.m-story p{font-size:var(--text-base);line-height:1.55;margin:0 0 var(--space-4)}
.m-story .h-small{display:block;font-size:var(--text-kicker);letter-spacing:.08em;margin:0 0 var(--space-4);color:var(--text-mute)}
.m-story .h-fine{font-size:var(--text-sm);line-height:1.45;color:var(--text-mute);margin:var(--space-4) 0 0;max-width:46ch}
.m-story figure{min-height:0;align-self:auto}.m-story figure img{position:static}

/* ---- Portada: un render fijo, título y entrada abajo; las cifras van aparte (siguiente bloque) ---- */
.m-hero{position:relative;height:100svh;min-height:560px;padding:0;color:var(--white);isolation:isolate;overflow:hidden;background:var(--surface-dark)}
.m-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 50%}
.m-hero__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgb(var(--shade) / .52) 0%,rgb(var(--shade) / .14) 22%,rgb(var(--shade) / 0) 40%,rgb(var(--shade) / .5) 66%,rgb(var(--shade) / .88) 100%)}
.m-hero__copy{position:absolute;z-index:2;left:var(--mg);right:var(--mg);bottom:calc(var(--space-8) + var(--space-4))}
.m-story .m-hero h1{color:var(--white);font-size:clamp(32px,8.8vw,44px);line-height:1.08;margin:0 0 var(--space-4);text-shadow:0 2px 12px rgb(15 21 19 / .35)}
.m-hero .h-lead{color:rgb(255 255 255 / .92);margin:0;max-width:34ch;text-shadow:0 1px 8px rgb(15 21 19 / .4)}
.m-hero__hint{position:absolute;z-index:2;left:50%;bottom:var(--space-5);transform:translateX(-50%);color:rgb(255 255 255 / .75);animation:m-hint 2.4s ease-in-out infinite}
.m-hero__hint .ico{width:20px;height:20px}
@keyframes m-hint{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}

/* ---- Cifras: cifra a la izquierda, qué mide a la derecha, sobre la misma línea base ---- */
.m-stats{padding:var(--space-7) var(--mg) var(--space-4);display:grid;gap:var(--space-7);max-width:640px}
.m-metrics .h-small{margin-bottom:var(--space-3)}
.m-metrics dl{margin:0;border-top:1px solid var(--line-strong)}
.m-metrics dl>div{display:grid;grid-template-columns:max-content 1fr;column-gap:var(--space-4);align-items:baseline;padding:var(--space-4) 0;border-bottom:1px solid var(--line)}
.m-metrics dt{font-size:28px;line-height:1;white-space:nowrap;letter-spacing:-.02em}
.m-metrics dd{margin:0;font-size:var(--text-base);line-height:1.4;color:var(--text-soft)}

/* ---- Listas (mercados, formatos): título 20 + texto 16, reglas finas entre filas ---- */
.m-rows{border-top:1px solid var(--line-strong)}
.m-row{display:grid;grid-template-columns:1fr;padding:var(--space-5) 0;border-bottom:1px solid var(--line)}
.m-rows--num .m-row{grid-template-columns:32px 1fr;gap:var(--space-3)}
.m-row__num{font-size:var(--text-sm);color:var(--text-mute);padding-top:4px}
.m-row h3{font-size:var(--text-lg);line-height:1.25;margin:0 0 var(--space-2)}
.m-row p{margin:0;color:var(--text);max-width:44ch}
.m-aside{display:grid;grid-template-columns:44px 1fr;gap:var(--space-4);align-items:center;margin-top:var(--space-5);padding:var(--space-4);border-radius:var(--radius-2);background:var(--glass);border:1px solid var(--line)}
.m-aside__icon{width:44px;height:44px;border-radius:var(--radius-2);display:grid;place-items:center;background:var(--bg);color:var(--brand);box-shadow:inset 0 0 0 1px var(--line)}
.m-aside__icon .ico{width:20px;height:20px}
.m-aside p{margin:0;font-size:var(--text-base);line-height:1.5;color:var(--text-soft)}

/* ---- Ubicación: el mapa del recorrido (Leaflet) a todo el ancho, cuadrado, con las pestañas encima ---- */
.m-map{margin:var(--space-6) 0 var(--space-7)}
.m-map .h-map-scene{padding:0;display:block;width:auto}
.m-map .h-location-map{position:relative;display:flex;flex-direction:column;width:auto;height:auto;aspect-ratio:auto;border-radius:0;background:transparent;overflow:visible}
.m-map .mapa-tabs{position:static;order:-1;display:flex;margin:0 var(--mg) var(--space-3);background:var(--bg-2);backdrop-filter:none;box-shadow:none}
.m-map .mapa-tabs [role=tab]{flex:1 1 0;min-height:44px;padding:4px var(--space-2);font-size:var(--text-sm);white-space:normal;line-height:1.15}
.m-map #mapa-empresalia{width:100%;height:auto;aspect-ratio:1;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.m-map .mapa-sat{top:calc(44px + 8px + var(--space-3) + var(--space-3));right:var(--space-3);height:40px}
.m-map .leaflet-touch .leaflet-bar a,.m-map .leaflet-control-zoom a{width:44px;height:44px;line-height:44px;font-size:20px}
.m-map .leaflet-control-zoom{margin:0 var(--space-3) var(--space-6) 0}
.m-map .mapa-label span{font-size:13px}
.m-map .mapa-pin__name{font-size:13px}
.m-map #mapa-empresalia .leaflet-control-attribution{font-size:11px}

/* ---- Campus: foto a sangre (sin texto encima), título debajo, tira de fotos y logos en tinta ---- */
.m-campus{padding-top:0}
.m-photo{margin:0;position:relative;aspect-ratio:4/3;max-height:72svh;overflow:hidden;background:var(--surface-dark)}
.m-photo img{width:100%;height:100%;object-fit:cover;display:block}
.m-campus>.m-copy{padding-top:var(--space-7)}
.m-strip{display:flex;gap:var(--space-2);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 var(--mg);padding:0 0 0 var(--mg);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.m-strip::-webkit-scrollbar{display:none}
.m-strip::after{content:'';flex:none;width:calc(var(--mg) - var(--space-2))} /* el último elemento también llega al margen */
.m-strip__item{flex:none;width:min(80vw,520px);aspect-ratio:4/3;margin:0;scroll-snap-align:start;overflow:hidden;border-radius:var(--radius-1);background:var(--bg-2)}
.m-strip__item img{width:100%;height:100%;object-fit:cover;display:block}
.m-logos{padding-top:var(--space-7)}
.m-logos .h-logos__rows{padding-top:var(--space-5);border-top:1px solid var(--line-strong);gap:var(--space-3)}
.m-logos .h-logos__marquee{padding-top:0;border-top:0}
.m-logos .h-logos__track{gap:var(--space-7);padding-right:var(--space-7);animation-duration:55s}
.m-logos .h-logos__track img{height:28px;max-width:120px;filter:brightness(0);opacity:.62}

/* ---- Comunidad: la frase (display) y un carrusel horizontal con las 42 fotos a su proporción ---- */
.m-community{background:var(--bg-2)}
.m-story .m-statement{font-size:clamp(26px,7vw,34px);line-height:1.15;letter-spacing:-.025em;margin:0 0 var(--space-6);max-width:18ch}
.m-strip--community{height:240px;scroll-snap-type:x proximity}
.m-strip__photo{flex:none;height:240px;width:auto;object-fit:cover;border-radius:var(--radius-1);scroll-snap-align:start;background:var(--stone-100)}
.m-hint{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--text-mute);margin:var(--space-3) var(--mg) 0}
.m-hint .ico{width:16px;height:16px}

/* ---- Proyecto: logo, título, formatos y el visor de plantas (el mismo del recorrido) ---- */
.m-project__logo{display:block;width:180px;height:auto;margin:0 0 var(--space-6)}
.m-plans{margin:var(--space-6) 0 0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.m-plans::-webkit-scrollbar{display:none}
.m-plans .h-plans{padding:0 var(--mg);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4);width:max-content}
.m-plans .h-plans__tabs{position:sticky;left:var(--mg);display:flex;width:calc(100vw - 2 * var(--mg));background:var(--bg-2);backdrop-filter:none;box-shadow:none}
.m-plans .h-plans__tabs [role=tab]{flex:1 1 auto;min-height:44px;font-size:var(--text-sm)}
/* el plano se ve a un ancho en el que las superficies se leen (≈ 2 pantallas) y se recorre con el dedo; los renders, al ancho de la pantalla */
.m-plans .h-plans__stage{width:max(200vw,760px);height:auto;aspect-ratio:3/2;max-height:none}
.m-project[data-view="renders"] .h-plans__stage{width:calc(100vw - 2 * var(--mg));min-width:0}
.m-project[data-view="renders"]~.m-hint--plans,.m-project[data-view="renders"] .m-hint--plans{display:none}
.m-plans .h-spot span{font-size:12px;padding:4px 7px}
.m-plans .h-spot--floor span{font-size:14px;padding:6px 12px}
.m-plans .h-plans__legend{position:sticky;left:var(--space-4);top:auto;bottom:auto;margin:var(--space-3) 0 0 var(--space-3);font-size:var(--text-sm);width:max-content;display:inline-flex}
.m-plans .h-plans__count{font-size:var(--text-sm)}
.m-plans .h-plans__arrow{width:44px;height:44px}
.m-hint--plans{margin-top:var(--space-4)}

/* ---- Cierre en verde: pregunta, CTA a todo el ancho, contacto y PDF ---- */
.m-contact{position:relative;overflow:hidden;background:var(--surface-dark);color:var(--on-dark);padding:var(--space-8) 0 calc(var(--space-9) + 120px)}
.m-contact>.m-copy{position:relative;z-index:1}
.m-contact__sketch{position:absolute;z-index:0;left:-45%;bottom:0;width:190%;height:auto;opacity:0;transform:translate3d(0,24px,0);transition:opacity 1.4s var(--ease-out-quint),transform 1.6s var(--ease-out-quint)}
.m-contact__sketch.is-in{opacity:.3;transform:none}
.m-contact__sketch{pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 40%);mask-image:linear-gradient(to bottom,transparent 0,#000 40%)}
.m-contact h2,.m-contact .h-lead{color:var(--on-dark)}
.m-contact p{color:var(--on-dark-soft);max-width:40ch}
.m-contact .h-lead{margin-bottom:var(--space-3)}
.m-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:var(--space-5);min-height:52px;padding:0 var(--space-5);border:0;border-radius:var(--radius-2);background:var(--brand);color:var(--white);font-size:var(--text-base);font-weight:var(--fw-medium);text-decoration:none;margin:0;transition:background .3s,opacity .3s}
.m-btn .ico{width:18px;height:18px}
.m-contact .m-btn{width:100%;background:var(--bg);color:var(--brand);margin:var(--space-3) 0 var(--space-7)}
.m-contact .m-btn:hover{background:var(--white);opacity:1}
.m-person{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);padding-top:var(--space-5);border-top:1px solid var(--line-on-dark-soft)}
.m-person>strong{font-size:var(--text-lg)}
.m-person>span{font-size:var(--text-sm);color:var(--on-dark-soft)}
.m-person .h-contact-line{font-size:var(--text-base);min-height:44px;color:var(--on-dark)}
.m-person .h-contact-line .ico{color:var(--on-dark-soft)}
.m-person>.h-contact-line:first-of-type{margin-top:var(--space-2)}
.m-pdf{display:inline-flex;align-items:center;gap:var(--space-4);margin-top:var(--space-6);min-height:44px;font-size:var(--text-base);color:var(--on-dark);text-decoration:none;border-bottom:1px solid var(--line-on-dark)}
.m-pdf .ico{width:18px;height:18px}

/* ---- CTA fijo en la zona del pulgar (entre la portada y el cierre) ---- */
.m-cta{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:var(--space-2) var(--space-5) calc(var(--space-2) + env(safe-area-inset-bottom,0px));background:linear-gradient(to top,rgb(247 248 244 / .96),rgb(247 248 244 / .82));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:m-cta-in .5s var(--ease-out-quint)}
.m-cta__btn{width:100%;min-height:48px}
@keyframes m-cta-in{from{transform:translateY(100%)}to{transform:none}}
body.mobile-mode.contact-open .m-cta,body.mobile-mode.menu-open .m-cta{opacity:0;pointer-events:none}

@media(prefers-reduced-motion:reduce){.m-hero__hint,.m-cta{animation:none}.m-story .h-logos__track{animation:none}}
/* tablet: el texto no se estira de lado a lado; márgenes y tipografía un paso más grandes */
@media(min-width:640px){.m-story{--mg:var(--space-7)}.m-copy,.m-stats{max-width:720px}.m-story h2{font-size:clamp(34px,4.6vw,44px)}.m-story .m-hero h1{font-size:clamp(40px,5.4vw,56px)}.m-hero__copy{max-width:640px}.m-strip__item{width:min(60vw,520px)}.m-strip--community,.m-strip__photo{height:300px}.m-metrics dt{font-size:32px}.m-photo{aspect-ratio:16/10}}

/* ---- Menú en móvil: numerales a 14, sin los conmutadores de desarrollo (sombra / galería son del recorrido de escritorio) ---- */
body.mobile-mode #site-menu small{font-size:var(--text-sm)}
body.mobile-mode .menu-fonts{display:none}

/* ==========================================================================
   Deck en móvil (2026-09-24, Joaquín): la presentación conserva SIEMPRE su 16:9, nunca se reacomoda en columna.
   · Horizontal: la lámina ocupa lo más posible; los controles bajan a una barra al pie (volver · menú · puntos · PDF).
   · Vertical y angosto (teléfono): aviso para girar el teléfono (.deck-rotate); deck.js además pide pantalla completa y
     bloquea la orientación donde el navegador lo permite (Android). En tablet vertical la lámina cabe y se muestra normal.
   ========================================================================== */
.deck-rotate{display:none}
body.mobile-mode.deck-mode{--bar:52px}
body.mobile-mode.deck-mode .brand{display:none}
body.mobile-mode.deck-mode .topbar{height:0}
body.mobile-mode.deck-mode .deck-stage{inset:0;padding:var(--space-1) var(--space-2) calc(var(--bar) + env(safe-area-inset-bottom,0px))}
body.mobile-mode.deck-mode .deck-stack{width:min(100%,calc((100dvh - var(--bar) - 12px - env(safe-area-inset-bottom,0px)) * 16 / 9),1400px);aspect-ratio:16/9;height:auto}
body.mobile-mode.deck-mode .floating-nav{top:auto;bottom:calc(var(--space-2) + env(safe-area-inset-bottom,0px));left:var(--space-2);right:auto;transform:none;gap:6px;z-index:61;flex-direction:row-reverse}
body.mobile-mode.deck-mode .menu-shell{width:auto;position:relative}
body.mobile-mode.deck-mode #menu-toggle{height:40px;padding:0 var(--space-3);gap:10px;font-size:var(--text-sm)}
body.mobile-mode.deck-mode .menu-lines,body.mobile-mode.deck-mode .menu-lines:before,body.mobile-mode.deck-mode .menu-lines:after{width:24px}
body.mobile-mode.deck-mode .deck-switch{width:40px;height:40px}
body.mobile-mode.deck-mode #site-menu{top:auto;bottom:calc(100% + var(--space-2));left:0;right:auto;width:min(360px,calc(100vw - 16px));max-height:calc(100dvh - 72px);overflow:auto;transform:translateY(-16px)}
body.mobile-mode.deck-mode.menu-open #site-menu{transform:none}
body.mobile-mode.deck-mode .deck-controls{left:50%;right:auto;top:auto;bottom:calc(var(--space-2) + env(safe-area-inset-bottom,0px));height:40px;transform:translateX(-50%);flex-direction:row;gap:0}
body.mobile-mode.deck-mode #dots{flex-direction:row}
body.mobile-mode.deck-mode .deck-controls .dot{width:20px;padding:19px 0}
body.mobile-mode.deck-mode .header-actions{position:fixed;top:auto;left:auto;right:var(--space-2);bottom:calc(var(--space-2) + env(safe-area-inset-bottom,0px));z-index:61}
body.mobile-mode.deck-mode .header-contact{display:none!important}
body.mobile-mode.deck-mode .deck-pdf{height:40px;padding:0 var(--space-3)}
body.mobile-mode.deck-mode .deck-arrows{display:none!important}
@media (orientation:portrait) and (max-width:1023px){ /* teléfono y tablet en vertical (2026-10-02: en iPad la lámina quedaba a 489 px y el texto en 8 px) */
  body.mobile-mode.deck-mode .deck-rotate{position:fixed;inset:0;z-index:70;display:grid;place-content:center;justify-items:center;gap:var(--space-4);padding:var(--space-6);text-align:center;background:var(--bg-deck);color:var(--on-dark)}
  .deck-rotate>svg{width:56px;height:56px;margin-bottom:var(--space-2);animation:deck-rotate-hint 2.6s ease-in-out infinite}
  .deck-rotate p{margin:0;font-size:var(--text-lg);font-weight:var(--fw-semibold);letter-spacing:-.01em;line-height:1.25;max-width:16ch}
  .deck-rotate span{font-size:var(--text-sm);color:var(--on-dark-soft);max-width:28ch}
  .deck-rotate__pdf{margin-top:var(--space-4);display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 var(--space-5);border-radius:var(--radius-2);background:var(--white);color:var(--brand);font-size:var(--text-sm);font-weight:var(--fw-medium);text-decoration:none}
  .deck-rotate__pdf small{font-size:12px;font-weight:var(--fw-regular);color:var(--text-mute)}
  .deck-rotate__pdf svg{width:16px;height:16px}
  .deck-rotate__back{margin-top:0;min-height:44px;padding:0 var(--space-5);border:0;border-radius:var(--radius-2);background:var(--glass-on-black);color:var(--on-dark);font:inherit;font-size:var(--text-sm);font-weight:var(--fw-medium)}
  body.mobile-mode.deck-mode .deck-stage,body.mobile-mode.deck-mode .deck-controls,body.mobile-mode.deck-mode .header-actions,body.mobile-mode.deck-mode .floating-nav{display:none!important}
  @keyframes deck-rotate-hint{0%,35%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
}
@media(prefers-reduced-motion:reduce){.deck-rotate>svg{animation:none;transform:rotate(-90deg)}}

/* Mapa chico: los chips de mercados solo con número y cifra (el texto completo va en la lista de abajo) y el de
   transporte por dentro del radio, para que nada se salga del cuadrado ni se encime (2026-09-24) */
.m-map .mapa-label--mercado span{font-size:0;padding:5px 9px 5px 6px}
.m-map .mapa-label--mercado span i{font-size:11px;margin-right:6px}
.m-map .mapa-label--mercado span b{font-size:13px}
.m-map .mapa-label--m3 span{transform:translate(-50%,-50%)!important}
.m-map .mapa-label--transit span{transform:translate(-50%,12px)}
.m-map .mapa-label--m2 span{transform:translate(-100%,-50%)!important} /* 02 a la izquierda del símbolo: a esta escala caía encima del 01 */

/* ajuste óptico por logo */
.m-logos .h-logos__track img{height:calc(18px * var(--s,1));max-width:none}

/* Portada móvil (2026-09-27, Joaquín): título y entrada ARRIBA, bajo la cabecera, para dejar limpia la parte baja del render
   (terrazas, gente, fuente). El velo oscurece solo el tercio superior; abajo queda un toque mínimo para la flecha. */
.m-hero__copy{top:calc(var(--topbar-h) + var(--space-5));bottom:auto}
.m-hero__scrim{background:linear-gradient(180deg,rgb(var(--shade) / .78) 0%,rgb(var(--shade) / .62) 26%,rgb(var(--shade) / .28) 44%,rgb(var(--shade) / 0) 58%,rgb(var(--shade) / 0) 86%,rgb(var(--shade) / .3) 100%)}
.m-hero__img{object-position:58% 100%}

/* Cifras en móvil, v2 (2026-09-27, Joaquín: "desbalanceado y difícil de leer"). Patrón de cifra apilada: el número arriba (semibold,
   tabular) y debajo qué mide; nada de cifra y texto peleando por el ancho en la misma línea. Jerarquía en cada grupo: la cifra
   principal a todo el ancho y más grande; las otras dos, en dos columnas iguales debajo. Los dos grupos se separan con aire y el
   segundo va sobre una franja de papel más oscuro para que se lean como bloques distintos. */
.m-stats{padding:var(--space-7) 0 0;gap:0;max-width:none}
.m-metrics{padding:var(--space-6) var(--mg) var(--space-7)}
.m-metrics+.m-metrics{background:var(--bg-2)}
.m-metrics .h-small{margin-bottom:var(--space-5)}
.m-metrics dl{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--space-5);row-gap:0;border-top:0;max-width:560px}
.m-metrics dl>div{display:block;padding:var(--space-4) 0 0;border-bottom:0;border-top:1px solid var(--line-strong)}
.m-metrics dl>div:first-child{grid-column:1/-1;padding-bottom:var(--space-6)}
.m-metrics dt{font-size:32px;line-height:1;margin:0 0 var(--space-2);font-variant-numeric:tabular-nums}
.m-metrics dl>div:first-child dt{font-size:clamp(44px,13vw,56px);margin-bottom:var(--space-3)}
.m-metrics dd{font-size:var(--text-base);line-height:1.4;color:var(--text-soft);max-width:22ch}
.m-metrics dl>div:first-child dd{font-size:var(--text-md);max-width:26ch}
@media(min-width:640px){.m-metrics{padding-left:var(--mg);padding-right:var(--mg)}.m-metrics dt{font-size:36px}}

/* ---- Planos y renders en móvil, v2 (2026-09-27): la imagen se ve ENTERA en la página y se amplía en un visor a pantalla completa ---- */
.m-plans{overflow:visible}
.m-plans .h-plans{width:auto;align-items:stretch}
.m-plans .h-plans__tabs{position:static;width:100%}
.m-plans .h-plans__stage,.m-project[data-view="renders"] .h-plans__stage{width:100%;min-width:0;cursor:zoom-in}
.m-plans .h-spot:not(.h-spot--floor) span{display:none} /* a este tamaño las pastillas no se leen: las superficies se ven en el visor */
.m-plans .h-spot{pointer-events:none}
.m-plans .h-plans__legend{position:absolute;left:var(--space-2);right:auto;top:auto;bottom:var(--space-2);margin:0;padding:6px 10px;gap:10px;background:rgb(255 255 255 / .9);box-shadow:none;backdrop-filter:none;font-size:var(--text-sm)} /* al pie del marco, donde el plano deja papel libre */
.m-plans .h-legend__count{padding-left:10px}
.m-lb__count{white-space:nowrap}
.m-zoom{display:flex;align-items:center;justify-content:center;gap:var(--space-2);width:calc(100% - 2 * var(--mg));margin:var(--space-4) var(--mg) 0;min-height:48px;border:1px solid var(--line-strong);border-radius:var(--radius-2);background:transparent;color:var(--text);font:inherit;font-size:var(--text-base);font-weight:var(--fw-medium)}
.m-zoom .ico{width:18px;height:18px}
html.m-lb-open,html.m-lb-open body{overflow:hidden}
.m-lb{position:fixed;inset:0;z-index:90;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:var(--bg-deck);color:var(--on-dark);padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0);animation:m-lb-in .28s var(--ease-out-quint)}
@keyframes m-lb-in{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
.m-lb__bar,.m-lb__foot{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3)}
.m-lb__tabs{display:flex;flex:1;gap:4px;padding:4px;border-radius:var(--radius-pill);background:var(--glass-on-black)}
.m-lb__tabs [role=tab]{flex:1;min-height:40px;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--on-dark);font:inherit;font-size:var(--text-sm);white-space:nowrap}
.m-lb__tabs [role=tab][aria-selected=true]{background:var(--bg);color:var(--brand)}
.m-lb__btn{flex:none;width:44px;height:44px;border:0;border-radius:var(--radius-2);background:var(--glass-on-black);color:var(--on-dark);display:grid;place-items:center}
.m-lb__btn .ico{width:20px;height:20px}.m-lb__btn:disabled{opacity:.35}
.m-lb__count{font-size:var(--text-sm);color:var(--on-dark-soft);padding:0 var(--space-2);font-variant-numeric:tabular-nums}
.m-lb__sp{flex:1}
.m-lb__view{overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y;display:grid;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.m-lb__view::-webkit-scrollbar{display:none}
.m-lb__canvas{--z:1;width:calc(100% * var(--z));margin:auto;align-self:center}
.m-lb__sheet{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;background:var(--bg);border-radius:var(--radius-1)}
.m-lb__sheet>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 24%;mix-blend-mode:multiply}
.m-lb__spots{position:absolute;left:0;top:-3%;width:100%;aspect-ratio:1448/1086;container-type:inline-size} /* misma geometría que el visor: capa 4:3 sobre marco 3:2, desplazada 24 % */
.m-lb__spots .h-spot{pointer-events:none}
.m-lb__spots .h-spot span{font-size:clamp(5px,1.35cqi,15px);padding:.35em .6em;box-shadow:none}
.m-lb__spots .h-spot--floor span{font-size:clamp(9px,2cqi,20px)}
.m-lb__photo{display:block;width:100%;height:auto;border-radius:var(--radius-1)}
@media(prefers-reduced-motion:reduce){.m-lb{animation:none}}
@media(orientation:landscape){.m-lb__canvas{width:calc(min(100%,(100dvh - 120px) * 1.5) * var(--z))}}

/* ---- Galerías de fotos (campus, comunidad), v2 (2026-09-27): flechas + contador alineados al margen; tocar una foto abre el visor ---- */
.m-strip__item,.m-strip__photo,.m-campus .m-photo{cursor:zoom-in}
.m-strip__nav{display:flex;align-items:center;gap:var(--space-2);margin:var(--space-3) var(--mg) 0}
.m-strip__btn{width:44px;height:44px;border:1px solid var(--line-strong);border-radius:var(--radius-2);background:transparent;color:var(--text);display:grid;place-items:center;transition:opacity .2s}
.m-strip__btn .ico{width:20px;height:20px}.m-strip__btn:disabled{opacity:.3}
.m-strip__count{min-width:64px;text-align:center;font-size:var(--text-sm);color:var(--text-mute);font-variant-numeric:tabular-nums}
.m-strip__nav .m-strip__btn:last-child{margin-left:0}
/* visor: sin botones de zoom (pellizco y doble toque); título en las galerías de fotos, pestañas solo en planos */
.m-lb__title{flex:1;font-size:var(--text-base);font-weight:var(--fw-medium);padding-left:var(--space-2);display:none}
.m-lb:not([data-set="plans"]) .m-lb__title{display:block}
.m-lb:not([data-set="plans"]) .m-lb__tabs{display:none}
.m-lb__photo{max-height:calc((100dvh - 140px) * var(--z));width:auto;max-width:100%;margin:0 auto;object-fit:contain}

/* Campus (2026-09-27): una sola galería (la foto aérea va dentro, primera); la sección abre con el título */
.m-campus{padding-top:var(--space-8)}
.m-campus>.m-copy{padding-top:0}
.m-logos{padding-top:var(--space-8)} /* aire entre la barra de la galería y los logos */

/* ---- Comunidad en móvil, v3 (2026-09-27): escena anclada, como en escritorio. 340 svh de recorrido con pantalla fija de 100 svh ---- */
.m-pin{position:relative;height:340svh;padding:0;background:var(--bg)}
.m-pin__screen{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center;padding:var(--topbar-h) var(--mg) 0}
.m-pin__sketch{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;mix-blend-mode:multiply;opacity:0;pointer-events:none}
.m-pin__flux{position:absolute;inset:0;pointer-events:none}
.m-pin__img{position:absolute;left:0;top:0;object-fit:cover;border-radius:2px;visibility:hidden;opacity:0;will-change:transform,opacity;box-shadow:0 6px 18px rgb(15 21 19 / .14)}
.m-story .m-pin .m-statement{position:relative;z-index:60;margin:0;max-width:15ch;text-align:center;font-size:clamp(24px,6.6vw,32px);line-height:1.16;text-wrap:balance}
.m-pin .m-statement .w{display:inline-block;white-space:nowrap}.m-pin .m-statement .c{opacity:.16}
@media(prefers-reduced-motion:reduce){.m-pin{height:100svh}.m-pin .m-statement .c{opacity:1}}

.m-story .m-pin .m-statement{max-width:none;width:100%;font-size:clamp(22px,6.2vw,30px);line-height:1.14;letter-spacing:-.02em;transform:translateY(-38px)} /* frase a lo ancho (5 líneas), centrada en el hueco entre cabecera y CTA */

.m-pin{height:260svh} /* tramo más corto (2026-09-27): 1.6 pantallas de scroll en vez de 2.4 */
@media(prefers-reduced-motion:reduce){.m-pin{height:100svh}}

/* ---- Misma atmósfera que el escritorio (2026-09-27, Joaquín): sombra de copa muy sutil sobre el papel y un boceto en las cifras;
   un solo fondo de papel de principio a fin, sin franjas de otro tono. La sombra es la capa fija .canopy (detrás del contenido): el
   recorrido móvil deja de pintar fondo propio; portada, fotos, mapa y cierre siguen opacos y la tapan. ---- */
body.mobile-mode:not(.deck-mode) .canopy{display:block;--copa-op:.11}
body.mobile-mode .canopy__leaf{background-size:auto 88vh!important;background-position:-48vw -11vh!important}
.m-story,.m-pin,.m-community{background:transparent}
.m-metrics+.m-metrics{background:transparent;padding-top:0}
.m-stats{position:relative;padding-bottom:clamp(150px,44vw,220px);overflow:hidden}
.m-stats::after{content:'';position:absolute;z-index:-1;right:-18vw;bottom:0;width:150vw;max-width:760px;aspect-ratio:2098/725;background:url(assets/sketch-a.webp) no-repeat right bottom / contain;opacity:.26;mix-blend-mode:multiply;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 38%);mask-image:linear-gradient(to bottom,transparent 0,#000 38%)}
.m-stats{isolation:isolate}
@media(prefers-reduced-motion:reduce){body.mobile-mode .canopy__leaf{animation:none}}

/* ---- Cabecera móvil v2 (2026-09-28): sin botón de presentación ni de contacto; Consultar disponibilidad y PDF al final del menú ---- */
body.mobile-mode #deck,body.mobile-mode #landing{display:none!important}
#site-menu>.m-menu-cta{display:none} /* solo móvil: en escritorio el CTA ya vive en la cabecera */
.m-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.mobile-mode #site-menu>.m-menu-cta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:48px;margin-top:var(--space-4);padding:0 var(--space-4);border:0;border-radius:var(--radius-2);background:var(--brand);color:var(--white);font-size:var(--text-md);text-decoration:none}
body.mobile-mode .m-menu-cta .ico{width:18px;height:18px}
body.mobile-mode.on-dark #site-menu>.m-menu-cta{background:var(--bg);color:var(--brand)} /* sobre foto o verde se invierte */
/* PDF: botón secundario con contorno (2026-09-28, Joaquín); también en el menú de escritorio */
#site-menu>.m-menu-pdf{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:48px;margin-top:var(--space-3);padding:0 var(--space-4)!important;border:1px solid currentColor;border-radius:var(--radius-2);background:none;font-size:var(--text-md);color:inherit;text-decoration:none}
body.mobile-mode #site-menu>.m-menu-pdf{margin-top:var(--space-2)}
.m-menu-pdf .ico{width:18px;height:18px}

/* ---- Módulo de logos con aire (2026-09-28, Joaquín): la galería y los logos son dos grupos; se separan con 48 px y el filete pasa
   arriba del rótulo (rótulo + logos = un solo grupo). Dentro del grupo, 24 px entre rótulo, fila y fila. ---- */
.m-story .m-strip__nav{margin-top:var(--space-4)}
.m-story .m-logos{margin:var(--space-7) var(--mg) 0;padding:var(--space-5) 0 0;max-width:none;border-top:1px solid var(--line-strong)}
.m-story .m-logos>.h-small{display:block;margin-bottom:var(--space-5)}
.m-story .m-logos .h-logos__rows{padding-top:0;border-top:0;gap:var(--space-5)}
.m-story .m-logos .h-logos__marquee{align-items:center;min-height:32px}
.m-story .m-logos .h-logos__track{gap:var(--space-8);padding-right:var(--space-8)}

/* ---- Disponibilidad fuera del plano (2026-09-28, Joaquín): sin chip encima; una línea clara entre el plano y el botón ---- */
.m-plans .h-plans__legend{display:none}
.m-story .m-avail{display:flex;align-items:center;gap:var(--space-2);margin:var(--space-4) var(--mg) 0;font-size:var(--text-sm);line-height:1.4;color:var(--text)}
.m-avail[hidden]{display:none}
.m-avail i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--brand)}
.m-story .m-avail+.m-zoom{margin-top:var(--space-3)}

/* ---- Títulos de móvil 3 px más chicos (2026-09-28, Joaquín): h2 28.5 → 25 px y h1 33 → 30 px a 375 de ancho; tablet no cambia ---- */
@media(max-width:639px){.m-story h2{font-size:clamp(24px,6.7vw,32px)}.m-story .m-hero h1{font-size:clamp(28px,8vw,40px)}}

/* ---- Comunidad: las fotos se funden en los bordes de la pantalla fija (2026-09-28), sin corte seco contra la cabecera ni contra la sección siguiente ---- */
.m-pin__flux{-webkit-mask-image:linear-gradient(to bottom,transparent var(--topbar-h),#000 calc(var(--topbar-h) + 40px),#000 calc(100% - 120px),transparent calc(100% - 24px));mask-image:linear-gradient(to bottom,transparent var(--topbar-h),#000 calc(var(--topbar-h) + 40px),#000 calc(100% - 120px),transparent calc(100% - 24px))}
.m-pin__img:not(.is-ready){visibility:hidden!important}

/* ---- Tipografía móvil/tablet en pasos pares (2026-09-28, Joaquín): sustituye a los clamp() con vw ---- */
.m-story .m-hero h1{font-size:30px}.m-story h2{font-size:24px}
.m-story .m-pin .m-statement{font-size:24px}
.m-metrics dl>div:first-child dt{font-size:48px}
@media(max-width:359px){.m-story .m-hero h1{font-size:28px}.m-story .m-pin .m-statement{font-size:22px}.m-metrics dl>div:first-child dt{font-size:44px}}
@media(min-width:400px){.m-story .m-hero h1{font-size:32px}.m-story h2{font-size:28px}.m-story .m-pin .m-statement{font-size:26px}.m-metrics dl>div:first-child dt{font-size:56px}}
@media(min-width:480px){.m-story .m-pin .m-statement{font-size:30px}}
@media(min-width:640px){.m-story .m-hero h1{font-size:40px}.m-story h2{font-size:32px}}
@media(min-width:900px){.m-story .m-hero h1{font-size:48px}.m-story h2{font-size:40px}}
@media(min-width:1200px){.m-story .m-hero h1{font-size:56px}.m-story h2{font-size:44px}}
/* métricas: la etiqueta baja a 14 px y se reparte en dos líneas */
.m-metrics dl>div:not(:first-child) dd{font-size:var(--text-sm);line-height:1.45;max-width:none;text-wrap:balance}
.m-metrics dl>div:first-child dd{text-wrap:balance}

/* ---- Mapa en móvil con más aire (2026-09-28, Joaquín): pestañas de una línea ("Accesos" en vez de "Avenidas y colonias"), más
   separadas del texto y del mapa; mapa más alto (4:5) para que los rótulos se repartan; mapa.js los acomoda sin encimarse ---- */
.m-map{margin-top:var(--space-7)}
.m-map .mapa-tabs{gap:var(--space-1);padding:var(--space-1);margin:0 var(--mg) var(--space-4)}
.m-map .mapa-tabs [role=tab]{height:44px;min-height:44px;padding:0 var(--space-2);white-space:nowrap;line-height:1}
.m-map .mapa-tabs .t-full{display:none}.m-map .mapa-tabs .t-short{display:inline}
.m-map #mapa-empresalia{aspect-ratio:4/5}
.m-map .mapa-sat{top:calc(52px + var(--space-4) + var(--space-3))}
.m-map .mapa-label:not(.mapa-label--mercado):not(.mapa-label--transit) span,.m-map .mapa-pin__name{font-size:12px;padding:5px 10px}
.m-map .mapa-label--m3 span{transform:translate(-88%,-50%)!important} /* 03 hacia adentro del anillo: no se sale del marco */

/* ---- Menú móvil a pantalla completa (2026-09-28, Joaquín): una sola hoja clara, igual en cualquier punto del recorrido (antes el
   panel cambiaba de claro a oscuro según el fondo). Cabecera en su sitio (logo + cerrar), secciones grandes arriba y las dos
   acciones abajo, en la zona del pulgar. ---- */
body.mobile-mode:not(.deck-mode) #site-menu{position:fixed;top:0;left:0;right:auto;width:100vw;height:100dvh;z-index:-1;display:flex;flex-direction:column;padding:calc(var(--topbar-h) + var(--space-6)) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom,0px));border-radius:0;background:var(--bg);color:var(--text);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;overflow-y:auto;transform:none;transition:opacity .3s var(--ease),visibility .3s}
body.mobile-mode:not(.deck-mode) #site-menu>a:not(.m-menu-cta):not(.m-menu-pdf){align-items:baseline;gap:var(--space-4);min-height:56px;padding:var(--space-4) 0;border-bottom:1px solid var(--line);font-size:var(--text-xl);line-height:1.2}
body.mobile-mode:not(.deck-mode) #site-menu>a:first-child{border-top:1px solid var(--line)}
body.mobile-mode:not(.deck-mode) #site-menu small{font-size:var(--text-sm);min-width:24px}
body.mobile-mode:not(.deck-mode) #site-menu>.m-menu-cta{margin-top:auto;min-height:56px;padding:0 var(--space-5)!important;border-bottom:0}
body.mobile-mode:not(.deck-mode) #site-menu>.m-menu-pdf{min-height:56px;margin-top:var(--space-3);padding:0 var(--space-5)!important}
body.mobile-mode.menu-open:not(.deck-mode) .topbar{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
body.mobile-mode.menu-open .brand{z-index:2}
html:has(body.mobile-mode.menu-open){overflow:hidden}
@media(max-height:620px){body.mobile-mode:not(.deck-mode) #site-menu>a:not(.m-menu-cta):not(.m-menu-pdf){min-height:48px;padding:var(--space-3) 0;font-size:var(--text-lg)}}
body.mobile-mode.menu-open .brand{opacity:1}
.m-map .leaflet-bottom.leaflet-left .leaflet-control-zoom{margin:0 0 var(--space-5) var(--space-3)} /* zoom abajo a la izquierda (2026-09-28) */
@media(max-width:359px){body.mobile-mode #site-menu>.m-menu-cta,body.mobile-mode #site-menu>.m-menu-pdf{font-size:var(--text-base);white-space:nowrap;padding:0 var(--space-4)!important}}

/* ---- Portada móvil: carrusel de renders en alta resolución (2026-09-28). Fundido de 1.2 s cada 5.5 s con acercamiento lento; cada
   foto lleva su punto de encuadre horizontal (--fx) ---- */
.m-hero__slides{position:absolute;inset:0;z-index:0} /* contexto propio: el velo (z 1) y el texto quedan siempre encima */
.m-hero__slide{position:absolute;inset:0;display:block;opacity:0;z-index:0;transition:opacity 1.2s ease-in-out}
.m-hero__slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) 50%;transform-origin:var(--fx,50%) 60%}
.m-hero__slide.is-front{opacity:1;z-index:2}.m-hero__slide.is-back{opacity:1;z-index:1}
.m-hero__slide.is-live img{animation:hero-push 8s linear forwards}
@media(prefers-reduced-motion:reduce){.m-hero__slide.is-live img{animation:none}}

/* ---- Visor: pestañas cortas PB · PA · Renders (2026-09-28, Joaquín); el nombre completo de la vista se lee al pie ---- */
.m-lb__tabs{flex:0 1 auto;margin-right:auto}
.m-lb__tabs [role=tab]{flex:0 0 auto;min-width:56px;min-height:44px;padding:0 var(--space-4);font-weight:var(--fw-medium);letter-spacing:.02em}

/* ---- Pestañas móviles como control segmentado (2026-09-28, Joaquín las veía apretadas): carril visible con filete, tres partes
   iguales de 44 px, y más aire hacia el mapa / el plano. Mismo control en el mapa y en los planos. ---- */
.m-map .mapa-tabs,.m-plans .h-plans__tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;padding:var(--space-1);border-radius:var(--radius-pill);background:rgb(15 21 19 / .04);box-shadow:inset 0 0 0 1px var(--line)}
.m-map .mapa-tabs{margin:0 var(--mg) var(--space-5)}
.m-plans .h-plans{gap:var(--space-5)}
.m-map .mapa-tabs [role=tab],.m-plans .h-plans__tabs [role=tab]{height:44px;min-height:44px;padding:0 var(--space-2);font-size:var(--text-sm);font-weight:var(--fw-medium);letter-spacing:.01em;white-space:nowrap;line-height:1;color:var(--text-soft)}
.m-map .mapa-tabs [role=tab][aria-selected=true],.m-plans .h-plans__tabs [role=tab][aria-selected=true]{color:var(--white);box-shadow:0 1px 3px rgb(15 21 19 / .18)}
.m-map .mapa-sat{top:calc(52px + var(--space-5) + var(--space-3))}

/* ---- Visor con más aire (2026-09-28, Joaquín): barras a 16 px arriba/abajo y 24 px a los lados, el mismo margen de la página ---- */
.m-lb__bar,.m-lb__foot{padding:var(--space-4) var(--space-5)}
@media(max-width:359px){.m-lb__bar,.m-lb__foot{padding:var(--space-4)}}

/* ---- Galería del campus más grande en teléfono (2026-09-28, Joaquín): la foto ocupa casi todo el ancho y pasa de 4:3 a cuadrada
   (de 300×225 a 319×319 a 375 px: +50 % de superficie). Se dejan 24 px de la foto siguiente a la vista: es la señal de que la tira
   se desliza. La foto completa se ve en el visor. ---- */
@media(max-width:639px){.m-strip--campus .m-strip__item{width:calc(100vw - var(--mg) - var(--space-2) - var(--space-5));aspect-ratio:1}}

/* ---- Cabecera móvil siempre legible (2026-09-28, Joaquín): banda SÓLIDA del mismo crema que se ve en la página (papel + grano =
   #eff0ec, medido en pantalla; el token --paper solo se veía más blanco) con una sombra muy ligera. Probado y descartado: el fundido
   100→0. Sobre el cierre va en verde; sobre la portada y las fotos a sangre se queda transparente (ahí manda el velo de la foto). ---- */
body.mobile-mode:not(.deck-mode) .topbar{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important}
body.mobile-mode:not(.deck-mode) .topbar::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s;background:var(--bar,#eff0ec);box-shadow:0 1px 0 rgb(15 21 19 / .04),0 4px 12px rgb(15 21 19 / .05)}
body.mobile-mode.is-scrolled:not(.on-dark):not(.deck-mode) .topbar::before{opacity:1}
body.mobile-mode.on-green:not(.deck-mode) .topbar{--bar:var(--surface-dark)}
body.mobile-mode.on-green:not(.deck-mode) .topbar::before{opacity:1;box-shadow:0 1px 0 rgb(0 0 0 / .08),0 4px 12px rgb(0 0 0 / .12)}
body.mobile-mode.menu-open:not(.deck-mode) .topbar::before{opacity:0}
/* el menú a pantalla completa usa el mismo crema */
body.mobile-mode:not(.deck-mode) #site-menu{background:#eff0ec}

/* ---- PDF del cierre como botón secundario (2026-09-28, Joaquín): contorno y ancho completo, misma altura y márgenes que el CTA ---- */
.m-contact .m-pdf{display:flex;justify-content:space-between;width:100%;min-height:52px;padding:0 var(--space-5);border:1px solid var(--line-on-dark);border-radius:var(--radius-2);font-weight:var(--fw-medium);transition:background .3s,border-color .3s}
@media(hover:hover){.m-contact .m-pdf:hover{background:rgb(255 255 255 / .06);border-color:var(--on-dark)}}
.m-contact .m-pdf{white-space:nowrap}

/* ---- Planos v6 en móvil (2026-09-30): pestañas + chip Planta|Plano en dos filas; delimitaciones apiladas abajo a la izquierda; lupas 44 px ---- */
.m-plans .h-plans__bar{flex-direction:column;align-items:stretch;gap:var(--space-2)}
.m-plans .h-plans__ver{align-self:flex-end}
.m-plans .h-zones{left:var(--space-2);bottom:var(--space-2);flex-direction:column;align-items:flex-start;gap:6px}
.m-plans .h-zoom{right:var(--space-2);bottom:var(--space-2)}.m-plans .h-zoom__btn,.m-plans .h-zoom__val{width:44px;height:44px;min-width:44px}
.m-project:not([data-view="renders"]) .h-plans__stage{cursor:default}
.m-project:not([data-view="renders"]) .m-zoom{display:none}
.m-lb__tabs{display:none!important}
.m-plans .h-zones{position:static;flex-direction:row;flex-wrap:wrap;gap:var(--space-2);margin-top:calc(-1 * var(--space-3))}
.m-plans .h-zone-chip{height:44px;padding:0 var(--space-4) 0 var(--space-3);font-size:var(--text-sm)}

.m-plans .h-zones{padding:4px 8px;margin-top:calc(-1 * var(--space-2));background:rgb(247 248 244 / .92);box-shadow:0 0 0 1px var(--line)}
.m-plans .h-zone-chip{width:100%;height:44px;padding:0 var(--space-2);font-size:var(--text-sm)}
.m-plans .h-zone-label{font-size:11px;padding:4px 8px}

.m-plans .h-zones{width:100%;padding:12px}
.m-plans .h-zone-chip{height:auto;min-height:56px}

/* espacios del Pasaje en móvil: sin pastillas (no caben); tocar un espacio muestra su ficha */
.m-plans .h-esp-chip{display:none}
.m-plans .h-esp-tip{font-size:12px;padding:6px 10px}
.m-plans .h-esp-card .h-zone-chip{min-height:56px}

.m-plans .h-esp-chip{display:block;font-size:8px;padding:1px 3px}
.m-plans .h-plans__summary{position:static;margin-top:var(--space-3);gap:4px 12px;font-size:var(--text-sm)}
/* en teléfono los locales angostos miden 6 px: sus chips solo aparecen al acercar (x1.5+); los anchos y los contenedores siempre */
.m-plans .h-esp-chip.is-narrow{display:none}
.m-plans .h-plans__stage.is-z15 .h-esp-chip.is-narrow{display:block}

/* ficha del espacio en móvil: hoja inferior, CTA fijo al pie */
body.mobile-mode .h-esp-panel__box{top:auto;left:0;right:0;bottom:0;width:100%;max-height:88svh;border-radius:16px 16px 0 0;transform:translateY(32px)}
body.mobile-mode .h-esp-panel__body{padding:var(--space-5) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom,0px))}
body.mobile-mode .h-esp-panel__map svg{max-height:180px}
body.mobile-mode .h-esp-panel__cta{position:sticky;bottom:0;margin:var(--space-5) calc(-1 * var(--space-5)) 0;padding:var(--space-3) var(--space-5) var(--space-2);background:linear-gradient(to top,var(--bg) 70%,transparent)}
body.mobile-mode .h-esp-panel__close{top:var(--space-3);right:var(--space-3)}
body.mobile-mode .h-esp-tip{display:none}

.m-plans .h-plan-label{font-size:8px;line-height:1.15;width:min-content;text-align:center;white-space:normal} /* Pet Park en dos líneas para caber en el cuadro (2026-10-01) */

.m-plans .h-plans__tabs [role=tab]{font-size:12px;padding:0 var(--space-1)} /* cuatro pestañas (Master plan · Pasaje PB · Pasaje PA · Renders) en 375 px, 2026-10-01 */

.m-map .mapa-sat{height:44px} /* Mapa | Satélite (2026-10-02) */

.m-campus .rating{gap:6px 12px;font-size:12px} /* satisfacción en móvil (2026-10-02) */
.m-campus .rating__sep{display:none}.m-campus .rating__m:last-child{flex-basis:100%} /* en móvil: estrellas + satisfacción, y recomendación en su propia línea */

/* Deck táctil (2026-10-02): flechas de 44 px + contador en vez de las rayitas de 20 px; el deslizamiento sigue funcionando */
body.mobile-mode.deck-mode .deck-controls{display:none!important}
body.mobile-mode.deck-mode .deck-arrows{display:flex!important;align-items:center;gap:4px;left:50%;right:auto;bottom:calc(var(--space-2) + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:61}
body.mobile-mode.deck-mode .deck-arrows button{width:44px;height:44px}
body.mobile-mode.deck-mode .deck-count{display:block;min-width:64px;text-align:center;font-size:12px;letter-spacing:.08em;color:var(--on-dark-soft);font-variant-numeric:tabular-nums}

/* ---- Visor de planos a pantalla limpia en vertical (2026-10-02): llena el alto bajo la cabecera y es punto de asiento del scroll ---- */
html:has(body.mobile-mode){scroll-snap-type:y proximity}
.m-plans{min-height:calc(100dvh - var(--topbar-h));display:flex;flex-direction:column;justify-content:flex-start;padding-top:var(--space-5);box-sizing:border-box;scroll-snap-align:start;scroll-margin-top:var(--topbar-h)}
.m-plans .h-plans__bar{width:100%}

.m-plans .h-plans__title{position:static;font-size:16px;margin:0} /* título en flujo, antes del plano (2026-10-02) */