/* 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. */
/* Horizontal editorial: text, panorama, then evidence. */
.horizontal-mode{overflow:hidden;background:var(--bg)}
.horizontal-mode .topbar{position:fixed;inset:0 0 auto;height:var(--topbar-h);background:transparent;z-index:60}
.horizontal-mode .h-viewport{z-index:1}
.horizontal-mode .brand{color:var(--text)}
.horizontal-mode .header-contact{display:inline-flex;gap:var(--space-2);position:absolute;right:3vw;top:var(--control-top);align-items:center;justify-content:center;height:var(--control-h);padding:0 var(--space-5);font-weight:var(--fw-medium);background:var(--brand);color:var(--white);border:0;border-radius:var(--radius-2);font-size:var(--text-sm);text-decoration:none}
.horizontal-mode .header-contact:hover{background:var(--brand-hover)}.horizontal-mode .deck-pdf{display:none}
.horizontal-mode .floating-nav{filter:none}
.h-viewport{position:fixed;inset:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;background:var(--bg);color:var(--text);outline-offset:-4px}
.h-viewport::-webkit-scrollbar{display:none}.h-track{display:flex;width:max-content;height:100%;position:relative;align-items:stretch}
.h-chapter{flex:none;position:relative;height:100%;margin:0;display:flex}
.h-viewport h1,.h-viewport h2{line-height:1.12;margin:0 0 32px;max-width:none}
.h-viewport h1{font-size:var(--display-1)}.h-viewport h2{font-size:var(--display-2)}
.h-viewport h1>span:not(.rv-w),.h-viewport h2>span:not(.rv-w){display:block}
.h-viewport p{font-size:var(--text-md);line-height:1.55;margin:0 0 24px}.h-viewport .h-lead{font-size:var(--text-lead);line-height:1.45;letter-spacing:-.015em}
.h-viewport .h-kicker{font-size:var(--text-sm);letter-spacing:.06em;margin:0 0 50px;display:flex;align-items:center;gap:30px;line-height:1.3}.h-kicker>span{opacity:.6}
.h-small{font-size:var(--text-xs);letter-spacing:.07em;display:block;margin-bottom:22px}.h-viewport .h-fine{font-size:var(--text-xs);line-height:1.45;color:var(--text-mute);margin:15px 0 0}
.h-media{position:relative;margin:0;overflow:hidden;min-height:0;border-radius:0;isolation:isolate}
.h-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;transform:translate3d(var(--image-shift,0px),0,0) scale(1.06);transform-origin:center;will-change:transform}
.h-media figcaption{position:absolute;left:20px;bottom:16px;padding:0;background:none;color:white;font-size:var(--text-xs);line-height:1.3;text-shadow:0 1px 5px var(--stone-0);z-index:2;max-width:calc(100% - 40px)}
.h-opening-copy{flex:none;width:75vw;display:flex;flex-direction:column;justify-content:center;padding:4vh 6vw}
.h-opening-copy .h-lead{max-width:36ch}.h-opening-copy .cta{align-self:flex-start;font-size:var(--text-base);margin:0;padding:10px 0;gap:45px}
.h-viewport .h-intro-foot{font-size:var(--text-base);margin:8vh 0 0;color:var(--text-mute)}
.h-panorama{width:145vw;height:100dvh;align-self:flex-start;margin-top:calc(-1 * var(--topbar-h));flex:none;position:relative;--reveal:1;--reveal-y:0px;--frame-inset:0%} /* a sangre: ignora el padding del capítulo para medir lo mismo que el hero */
.h-panorama-screen{position:sticky;left:0;width:100vw;height:100%;overflow:hidden;clip-path:inset(var(--frame-inset) var(--frame-inset));color:var(--white);background:var(--surface-dark)}
.h-panorama-screen>.h-media{width:100%;height:100%}
.h-panorama-screen:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgb(var(--shade) / .86) 100%);pointer-events:none;opacity:var(--reveal)}
.h-panorama-reveal{position:absolute;z-index:3;left:5vw;right:5vw;bottom:62px;opacity:var(--reveal);transform:translateY(var(--reveal-y));pointer-events:none}
.h-backing>.h-small{margin-bottom:24px}.h-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:3vw;border-top:1px solid var(--line-on-dark);padding-top:23px}
.h-metrics strong{display:block;font-size:var(--display-3);line-height:1.1}
.h-metrics span{display:block;font-size:var(--text-base);margin-top:10px;max-width:23ch;line-height:1.4;color:var(--on-dark)}
.h-backing .h-fine{color:var(--on-dark-soft);margin-top:24px}
.h-community{padding:5vh 0;gap:5vw}
.h-community-copy{width:64vw;padding:0 6vw;flex:none;align-self:center}.h-community-copy .h-lead{max-width:33ch}.h-community-copy>p:last-child{max-width:37ch;color:var(--text-mute)}
.h-community-gallery{height:100%;display:grid;grid-auto-flow:column;grid-template-rows:1fr 1fr;grid-template-columns:42vw;grid-auto-columns:29vw;gap:4vh 3vw;flex:none;align-items:stretch}
.h-gallery-photo{height:100%;width:100%}.h-gallery-photo-0{grid-row:span 2;width:42vw}.h-gallery-photo-3,.h-gallery-photo-4{align-self:center;height:88%}
.h-gallery-message{display:flex;flex-direction:column;justify-content:center;padding:3vw}.h-gallery-message p{font-size:var(--display-3);line-height:1.2;margin:0}
.h-community-aside{width:43vw;padding:0 5vw;align-self:center;flex:none}.h-community-aside>p:last-child{color:var(--text-mute)}
.h-viewport .h-editorial-text{font-size:var(--display-4);line-height:1.3;letter-spacing:-.025em}
.h-project-intro{width:72vw;padding:4vh 6vw;align-self:center;flex:none}.h-viewport .h-project-logo{display:block;width:clamp(200px,17vw,280px);height:auto;margin:0 0 clamp(32px,4vh,48px);position:static;transform:none} /* el logo presenta el Pasaje antes del título */.h-viewport .h-project-intro h2{max-width:none} /* 'Un parque para encontrarse.' en una línea */.h-project-intro .h-lead{max-width:40ch}
.h-park-heading>p{font-size:var(--display-1);line-height:1.12;margin-bottom:22px}.h-park-heading>span{font-size:var(--text-md);line-height:1.5;max-width:42ch;display:block}
.h-inventory{width:116vw;padding:4vh 5vw;flex:none;display:flex;flex-direction:column;justify-content:center}
.h-inventory-heading{display:flex;justify-content:space-between;gap:4vw;align-items:flex-start;margin-bottom:4vh}
.h-inventory-heading h3{font-size:var(--display-3);line-height:1.2;margin:0}.h-inventory-heading>p{font-size:var(--text-md);color:var(--text-mute);margin:0}
.h-format-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3vw}.h-format-grid article{min-width:0}
.h-format-image{height:35vh;max-height:390px;margin-bottom:20px}.h-format-image-0 img{object-position:27% center}.h-format-image-1 img{object-position:15% 22%}.h-format-image-2 img{object-position:75% center}
.h-format-grid h4{font-size:var(--text-lead);line-height:1.3;margin:0 0 10px}.h-format-grid p{font-size:var(--text-base);color:var(--text-mute);max-width:38ch;line-height:1.45;margin:0}.h-inventory>.h-fine{margin-top:22px}
.h-location{gap:4vw;padding:4vh 0;background:var(--bg);color:var(--text)} /* v2: escena clara (papel) tras el hero oscuro */
.h-location-copy{width:auto;max-width:72vw;padding:0 7vw 0 14vw;align-self:center;flex:none} /* columna al ancho del texto: 14vw desde el video y 14vw hasta el mapa (7vw + gap 4vw + 3vw de la escena) */.h-location-copy .h-lead{max-width:46ch}
.h-location-copy h2{max-width:none;font-size:clamp(32px,3.3vw,52px)} /* 'Conectado con Querétaro.' en una sola línea */.h-viewport .h-access{border-top:1px solid var(--line-mid);padding-top:20px;margin-top:45px;font-size:var(--text-base);max-width:37ch;color:var(--on-dark-soft)}
.h-map-scene{width:auto;flex:none;padding:0 0 0 4vw;display:flex;flex-direction:column;justify-content:center} /* el mapa manda el ancho */
.h-location-map{height:min(calc(100dvh - var(--topbar-h) - 56px),50vw);aspect-ratio:1/1;width:auto;flex:none;background:var(--map-bg)} /* 1:1: mapa + lista de mercados caben juntos en una pantalla (4vw + ≤50vw + 4vw + 40vw) */.h-location-map img{object-fit:contain;transform:none;will-change:auto}.h-location-map figcaption{color:var(--text);text-shadow:none;background:var(--glass);padding:6px 10px;bottom:8px;font-size:var(--text-xs);left:12px}
.h-map-scene>p{margin:18px 0 0;font-size:var(--text-md)}.h-map-scene>.h-fine{color:var(--text-mute);margin-top:6px}
.h-location-markets{width:40vw;padding:0 4vw 0 0;align-self:center;flex:none}
/* Mercados (v2): lista con cifra; la cifra grande y su descripción en la misma línea base */
.h-markets{border-top:1px solid var(--line-strong)}.h-markets article{padding:26px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:25px 1fr;gap:12px}
/* Extra bajo los mercados (acceso y movilidad): caja ligera con icono; título y texto un escalón por debajo de los mercados */
.h-market-extra{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:center;margin-top:28px;padding:16px 18px;border-radius:var(--radius-2);background:var(--glass);border:1px solid var(--line)}
.h-market-extra__icon{width:40px;height:40px;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)}.h-market-extra__icon .ico{width:20px;height:20px;stroke-width:1.5}
.h-viewport .h-market-extra h4{font-size:var(--text-base);line-height:1.3;margin:0 0 4px}.h-viewport .h-market-extra p{margin:0;font-size:var(--text-sm);line-height:1.5;color:var(--text-soft);max-width:46ch}
/* jerarquía en tres pasos: título (24) · cifra + qué mide en una frase (18, la cifra en semibold del mismo cuerpo) · texto (16) */
.h-markets h3{font-size:var(--text-lg);line-height:1.25;margin:0 0 8px}
.h-market__metric{font-size:var(--text-md);line-height:1.4;margin-bottom:6px;color:var(--text);max-width:44ch}.h-market__metric strong{font-size:inherit;margin-right:.3em}.h-market__metric span{color:inherit}
.h-markets p{margin:0;font-size:var(--text-base);line-height:1.55;color:var(--text);max-width:42ch} /* texto en tinta; la cifra en semibold (typography.css) */
.h-cards{border-top:1px solid var(--line-strong)}.h-cards article{padding:22px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:25px 1fr;gap:12px}.h-card-number{font-size:var(--text-xs);padding-top:4px;opacity:.65}.h-cards h3{font-size:var(--text-xl);line-height:1.25;margin:0 0 12px}.h-cards p{margin:0;font-size:var(--text-base);line-height:1.45;color:var(--text-soft)}
.h-contact{width:100vw;padding:4vh 6vw;display:flex;flex-direction:column;justify-content:center}.h-contact h2{font-size:var(--display-2);margin:0 0 6vh}.h-contact-columns{display:grid;grid-template-columns:1fr 1fr;gap:10vw;max-width:83vw}.h-contact-columns>div>p{max-width:38ch}.h-contact-person{display:flex;flex-direction:column;align-items:flex-start;gap:9px}.h-contact-person>strong{font-size:var(--text-xl);}.h-contact-person>span{font-size:var(--text-sm);color:var(--text-mute)}.h-contact-person>a:not(.cta){font-size:var(--text-base);text-underline-offset:4px}.h-contact-person>.cta{font-size:var(--text-md);margin:14px 0 20px}.h-pdf-link{display:inline-flex;gap:30px;font-size:var(--text-base);text-decoration:none;border-bottom:1px solid var(--line-strong);padding:12px 0;margin-top:10px}.h-viewport .h-contact-foot{font-size:var(--text-xs);color:var(--text-mute);margin:4vh 0 0}
.h-navigation{display:none!important;position:fixed;inset:auto 0 0;height:0px;background:var(--bg);display:flex;align-items:center;justify-content:space-between;padding:0 4vw;z-index:40;color:var(--text);font-size:var(--text-xs)}.h-navigation-buttons{display:flex;gap:8px}.h-navigation-buttons button{width:42px;height:40px;border:0;background:none;color:inherit;display:grid;place-items:center;border-radius:var(--radius-2)}.h-navigation-buttons .ico{width:20px;height:20px;stroke-width:1.5}.h-navigation-buttons button:hover{background:var(--bg-2)}.h-navigation-buttons button:disabled{opacity:.25;cursor:default}.h-scroll-hint{display:flex;gap:25px}.h-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line)}.h-progress>span{display:block;width:100%;height:100%;background:var(--brand);transform:scaleX(0);transform-origin:left}
.h-scrollable-copy{max-height:100%;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
@media(min-width:1024px) and (max-height:820px){.h-viewport .h-kicker{margin-bottom:28px}.h-viewport h1,.h-viewport h2{margin-bottom:22px}.h-intro-foot{margin-top:5vh!important}.h-inventory{padding-top:20px;padding-bottom:20px}.h-inventory-heading{margin-bottom:20px}.h-format-image{height:29vh;margin-bottom:16px}.h-inventory>.h-fine{margin-top:14px}.h-contact h2{margin-bottom:25px}.h-contact .h-lead{font-size:var(--text-lg)}.h-contact-foot{margin-top:18px!important}.h-cards article{padding:16px 0}.h-cards h3{font-size:var(--text-lg)}.h-markets article{padding:18px 0}.h-markets h3{font-size:var(--text-md);margin-bottom:6px}.h-markets p{font-size:14px}.h-market__metric{font-size:var(--text-base)}.h-panorama-reveal{bottom:50px}.h-backing .h-fine{margin-top:15px}}
@media(prefers-reduced-motion:reduce){.h-media img{transform:none!important;will-change:auto}.h-panorama-screen{clip-path:none!important}.h-panorama-reveal,.h-panorama-copy{opacity:1!important;transform:none!important}.h-panorama-screen:after{opacity:1!important}}

/* Apertura: grid editorial asimétrico (12 col). Título arriba-izquierda, entrada debajo estrecha,
   la nota de pie abajo-derecha junto a la primera imagen; el resto es aire. Nada se encima. */
.h-opening-copy{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:1fr auto auto 1fr;column-gap:2vw;row-gap:0;padding:6vh 4vw 6vh 6vw}
.h-opening-copy h1{grid-column:1/13;grid-row:2;margin:0 0 var(--space-5);font-size:clamp(40px,4.9vw,72px);max-width:none}
.h-opening-copy .h-lead{grid-column:1/7;grid-row:3;max-width:34ch;margin:0}
.h-opening-copy .h-intro-foot{grid-column:7/13;grid-row:4;align-self:end;justify-self:end;margin:0!important;padding-bottom:2vh;font-size:var(--text-sm);line-height:1.5;color:var(--text-mute);max-width:40ch;text-wrap:pretty}

/* Grid editorial base: 12 columnas × 12 filas por escena. Las escenas colocan sus piezas por línea de columna/fila. */
.ed-grid{display:grid;grid-template-columns:repeat(var(--grid-cols),var(--grid-col));grid-template-rows:repeat(12,1fr);gap:var(--grid-gap);height:100%}

/* Galería de comunidad: composición asimétrica sobre el grid (nada se encima, hay aire entre piezas) */
.h-community-gallery{display:grid;grid-template-columns:repeat(16,var(--grid-col));grid-template-rows:repeat(12,1fr);grid-auto-flow:unset;grid-auto-columns:unset;gap:2vh 2.4vw;height:100%;flex:none;align-items:stretch}
.h-gallery-photo{height:auto;width:auto}
/* 4 fotos sobre un grid de 16×12 con más aire (narrativa horizontal): futbolito grande y el mensaje grande debajo;
   taller y padre-hijo en la columna central; evento arriba a la derecha. Columnas 7–8, 13 y filas sueltas quedan vacías */
.h-gallery-photo-0{grid-column:1/7;grid-row:1/6;width:auto}
.h-gallery-photo-0 img{object-position:center 30%}
.h-gallery-message{grid-column:1/8;grid-row:7/13;padding:0;justify-content:flex-end}
.h-gallery-photo-1{grid-column:9/13;grid-row:1/5;height:auto;align-self:stretch}
.h-gallery-photo-2{grid-column:9/13;grid-row:7/12;height:auto;align-self:stretch}
.h-gallery-photo-3{grid-column:14/17;grid-row:3/7;height:auto;align-self:stretch}

/* Comunidad · aside "Un primer público potencial": abajo, con aire encima; el mensaje grande de la galería queda arriba a la derecha */
.h-community-aside{align-self:flex-end;padding:0 5vw 4vh 9vw;width:44vw}
.h-community-aside .h-editorial-text{max-width:22ch}
.h-community-aside>p:last-child{max-width:34ch}

/* aire entre el cierre de Comunidad y el arranque de El proyecto */
.h-community{padding-right:8vw}
.h-project-intro{padding-left:10vw}

/* Después de una panorámica a sangre, el texto del siguiente capítulo no puede ir pegado: margen de entrada */
.h-community{padding-left:10vw}
.h-panorama + .h-park-heading,.h-panorama + div,.h-panorama + aside{margin-left:8vw}

/* Mapa real (Leaflet) */
.h-location-map{position:relative;border-radius:var(--radius-2);overflow:hidden;isolation:isolate}
#mapa-empresalia{width:100%;height:100%;background:var(--map-bg)}
#mapa-empresalia.is-error:after{content:'Mapa no disponible';position:absolute;inset:0;display:grid;place-items:center;color:var(--text-mute)}
.h-location-map__caption{position:absolute;left:12px;bottom:8px;z-index:500;background:var(--glass);backdrop-filter:blur(8px);padding:6px 10px;border-radius:var(--radius-1);font-size:var(--text-xs);color:var(--text)}
#mapa-empresalia.leaflet-container{font-family:var(--font);font-size:var(--text-xs)} /* con id: leaflet.css carga después y si no impone Helvetica */
.leaflet-control-zoom a{color:var(--text);border-color:var(--line)!important}
/* crédito OSM dentro del mapa, fundido con el diseño: sin fondo blanco, gris atenuado, sin azul de enlace */
#mapa-empresalia .leaflet-control-attribution{font:500 11px/1 var(--font);letter-spacing:.02em;background:transparent;color:var(--text-mute);opacity:.75;padding:0 12px 8px 0}#mapa-empresalia .leaflet-control-attribution a{color:inherit;text-decoration:none}
#mapa-empresalia .leaflet-control-zoom{border:0;box-shadow:0 1px 4px rgb(15 21 19 / .12);border-radius:var(--radius-1);overflow:hidden}#mapa-empresalia .leaflet-control-zoom a{background:rgb(255 255 255 / .85);color:var(--text);border-color:var(--line)!important}
/* Pestañas del mapa: control segmentado en vidrio, la activa en verde (UI: siempre Poppins) */
/* Conmutador de vista satélite (arriba a la derecha del mapa) y su tratamiento: la foto va desaturada, aclarada y al 70 %
   sobre el papel, para que la ciudad sea contexto y no compita con avenidas, anillos y chips */
.mapa-sat{position:absolute;top:16px;right:16px;z-index:1100;height:44px;padding:0 16px 0 12px;border:0;border-radius:var(--radius-pill);display:inline-flex;align-items:center;gap:8px;background:rgb(255 255 255 / .78);backdrop-filter:var(--glass-blur);box-shadow:0 1px 4px rgb(15 21 19 / .08);color:var(--text);font:inherit;font-size:var(--text-sm);cursor:pointer;transition:background .3s,color .3s}
.mapa-sat__dot{width:26px;height:16px;border-radius:999px;background:rgb(15 21 19 / .18);position:relative;transition:background .3s}.mapa-sat__dot::after{content:'';position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--white);transition:transform .3s var(--ease-out-quad)}
.mapa-sat[aria-pressed=true]{background:var(--brand);color:var(--white)}.mapa-sat[aria-pressed=true] .mapa-sat__dot{background:#a0c600}.mapa-sat[aria-pressed=true] .mapa-sat__dot::after{transform:translateX(10px)}
/* satélite: la foto va tal cual (Joaquín, 2026-09-17); la legibilidad la da la paleta de alto contraste de mapa.js */
#mapa-empresalia.is-sat .leaflet-tile-pane{filter:none;opacity:1}#mapa-empresalia.is-sat .leaflet-control-attribution{color:rgb(255 255 255 / .85);text-shadow:0 1px 2px rgb(0 0 0 / .6)}
/* Control segmentado compartido (mapa y visor de plantas): cápsula translúcida, la activa en verde */
.seg-tabs,.mapa-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:var(--radius-pill);background:rgb(255 255 255 / .78);backdrop-filter:var(--glass-blur);box-shadow:0 1px 4px rgb(15 21 19 / .08)}
.mapa-tabs{position:absolute;top:16px;left:16px;z-index:1100} /* dentro del mapa, sobre las capas de Leaflet */
.seg-tabs [role=tab],.mapa-tabs [role=tab]{height:36px;padding:0 16px;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--text);font:inherit;font-size:var(--text-sm);cursor:pointer;transition:background .35s var(--ease-out-quad),color .35s var(--ease-out-quad)}
.seg-tabs [role=tab]:hover,.mapa-tabs [role=tab]:hover{background:rgb(15 21 19 / .06)}
.seg-tabs [role=tab][aria-selected=true],.mapa-tabs [role=tab][aria-selected=true]{background:var(--brand);color:var(--white)}
.seg-tabs [role=tab]:focus-visible,.mapa-tabs [role=tab]:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* Visor de plantas: lo más grande que quepa, los dos planos apilados en el mismo marco (misma proporción 1448×1086) */
.h-plans{width:auto;flex:none;padding:0 4vw;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-5)}
.h-plans__tabs{background:var(--glass)}
.h-plans__stage{position:relative;height:min(calc(100dvh - var(--topbar-h) - 110px),60vw);aspect-ratio:3/2;width:auto;border:1px solid var(--line);border-radius:var(--radius-2);overflow:hidden;background:var(--bg)} /* marco sutil que delimita el área */ /* 3:2, sin pie: toda la altura disponible para planos y renders */
:is(.h-viewport,.m-story) .h-plan{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 24%;mix-blend-mode:multiply;opacity:0;transition:opacity .5s var(--ease-out-quad);transform:none;max-width:none}:is(.h-viewport,.m-story) .h-plan.is-on{opacity:1}
 /* altura fija: el escenario no brinca al cambiar de pie */
/* galería de renders dentro del mismo escenario: a sangre (cover), flechas y contador en la esquina */
.h-plans__gallery{position:absolute;inset:0;background:var(--surface-dark)}
/* Hotspots de planta baja: superficie siempre visible; al pasar el cursor, el espacio se ilumina en el verde lima del logo */
.h-plan__spots{position:absolute;z-index:3;pointer-events:none}
.h-spot{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);margin:0;padding:0;border:0;border-radius:3px;background:rgb(160 198 0 / 0);box-shadow:inset 0 0 0 0 rgb(160 198 0 / 0);display:block;cursor:pointer;pointer-events:auto;transition:background .25s var(--ease-out-quad),box-shadow .25s var(--ease-out-quad)}
.h-spot span{position:absolute;left:50%;top:var(--ly,50%);transform:translate(-50%,-50%);font-size:11px;line-height:1;letter-spacing:.02em;padding:4px 6px;border-radius:var(--radius-pill);background:rgb(255 255 255 / .88);color:var(--text);white-space:nowrap;box-shadow:0 1px 3px rgb(15 21 19 / .12);transition:background .25s,color .25s}
.h-spot--local:not(.h-spot--wide) span{transform:translate(-50%,-50%) rotate(-90deg)} /* locales angostos: la cifra girada, como en un plano; todas sobre la misma línea (--ly) */
.h-spot:hover,.h-spot:focus-visible{background:rgb(160 198 0 / .38);box-shadow:inset 0 0 0 2px #a0c600;outline:0}
.h-spot:hover span,.h-spot:focus-visible span{background:#a0c600;color:var(--green-900)}
/* espacios con huella no rectangular (clip-path en el propio botón): sin contorno inset (se cortaría) y la pastilla en el centro de la parte principal */
.h-spot--clip:hover,.h-spot--clip:focus-visible{box-shadow:none;background:rgb(160 198 0 / .48)}
/* planta alta: un solo espacio con la huella en L del edificio (clip-path); la pastilla va al centro de la barra principal */
.h-spot--floor{clip-path:polygon(0 0,100% 0,100% 62.9%,36.9% 62.9%,36.9% 88.8%,33.6% 88.8%,33.6% 100%,0 100%);display:block}.h-spot--floor span{position:absolute;left:50%;top:31%;transform:translate(-50%,-50%);font-size:12px;padding:6px 10px}.h-spot--floor:hover,.h-spot--floor:focus-visible{box-shadow:none}
/* lobby (área común, no rentable): pastilla en tinta y hover neutro, para distinguirlo de los espacios disponibles */
.h-spot--lobby{cursor:default}.h-spot--lobby span{background:var(--ink);color:var(--white);transform:translate(-50%,-50%)!important}.h-spot--lobby:hover,.h-spot--lobby:focus-visible{background:rgb(15 21 19 / .10)}.h-spot--lobby:hover span{background:var(--ink);color:var(--white)}
/* Estados: disponible (pastilla blanca, hover lima) · rentado (achurado verde oscuro de marca, pastilla verde, sin hover) */
.h-spot[data-status=rentado],.h-spot[data-status=rentado]:hover,.h-spot[data-status=rentado]:focus-visible{cursor:default;box-shadow:none;background:repeating-linear-gradient(135deg,rgb(18 62 50 / .55) 0 2px,rgb(18 62 50 / .14) 2px 7px)}
.h-spot[data-status=rentado] span,.h-spot[data-status=rentado]:hover span{background:var(--brand);color:var(--white)}
.is-editing .h-spot{cursor:pointer!important}
/* leyenda y conteo, abajo a la izquierda del escenario */
.h-plans__legend{position:absolute;left:16px;bottom:16px;z-index:4;display:flex;align-items:center;gap:14px;padding:8px 12px;border-radius:var(--radius-pill);background:rgb(255 255 255 / .85);backdrop-filter:var(--glass-blur);font-size:var(--text-xs);color:var(--text);box-shadow:0 1px 4px rgb(15 21 19 / .08)}
.h-legend__item{display:inline-flex;align-items:center;gap:6px}.h-legend__item i{width:12px;height:12px;border-radius:3px;display:block;background:var(--white);box-shadow:inset 0 0 0 1px var(--line-strong)}
.h-legend__item[data-k=rentado] i{background:repeating-linear-gradient(135deg,rgb(18 62 50 / .8) 0 2px,rgb(18 62 50 / .2) 2px 5px);box-shadow:none}
.h-legend__count{color:var(--text-mute);padding-left:14px;border-left:1px solid var(--line)}
.h-plans__copy{border:0;border-radius:var(--radius-pill);background:var(--brand);color:var(--white);font:inherit;font-size:var(--text-xs);padding:6px 12px;cursor:pointer}
@media(max-width:1280px){.h-spot span{font-size:10px;padding:3px 5px}}
:is(.h-viewport,.m-story) .h-render{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease-out-quad);transform:none;max-width:none}:is(.h-viewport,.m-story) .h-render.is-on{opacity:1}
.h-plans__nav{position:absolute;right:16px;bottom:16px;z-index:2;display:flex;align-items:center;gap:8px}
.h-plans__arrow{width:44px;height:44px;border:0;border-radius:var(--radius-2);background:rgb(255 255 255 / .85);backdrop-filter:var(--glass-blur);color:var(--text);display:grid;place-items:center;cursor:pointer;transition:background .3s}.h-plans__arrow:hover{background:var(--white)}.h-plans__arrow .ico{width:20px;height:20px}
.h-plans__count{padding:0 12px;height:44px;display:grid;place-items:center;border-radius:var(--radius-2);background:rgb(255 255 255 / .85);backdrop-filter:var(--glass-blur);font-size:var(--text-xs);letter-spacing:.06em;color:var(--text);font-variant-numeric:tabular-nums}
.mapa-label span{display:inline-block;transform:translate(-50%,-50%);padding:4px 10px;border-radius:var(--radius-pill);background:rgb(255 255 255 / .85);border:1px solid var(--line);color:var(--text);font-size:12px;font-weight:var(--fw-medium);letter-spacing:.02em;white-space:nowrap;box-shadow:0 1px 4px rgb(15 21 19 / .08)}
.mapa-label--via span{background:var(--brand);border-color:var(--brand);color:var(--white)}
.mapa-label--transit span{transform:translate(-50%,calc(-100% - 10px));display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 6px;line-height:1.25}
.mapa-label--transit i{display:inline-grid;place-items:center;width:20px;height:18px;border-radius:999px;background:var(--brand);color:var(--white)}.mapa-label--transit i .ico{width:12px;height:12px;stroke-width:1.8}.mapa-label--transit b{color:var(--brand)}
.mapa-label--m1 span{transform:translate(30px,calc(-50% - 20px))!important} /* 01: a la derecha del símbolo, medio peldaño arriba; el nombre del Pasaje queda debajo */
.mapa-label--m3 span{transform:translate(-70%,-50%)!important} /* 03: montado sobre el anillo grande, algo hacia adentro para no salirse del marco en mapas chicos */
.mapa-label--mercado span{transform:translate(0,-50%);text-align:left;line-height:1.25;padding:5px 12px 5px 6px}.mapa-label--mercado i{display:inline-grid;place-items:center;min-width:20px;height:18px;margin-right:7px;border-radius:999px;background:var(--brand);color:var(--white);font-style:normal;font-size:10px;letter-spacing:.02em;vertical-align:1px}.mapa-label--mercado b{color:var(--brand)} /* chip de una línea: número en pastilla verde + cifra + texto */
/* Leaflet posiciona el marcador con un transform inline: el centrado va en un hijo. Logo centrado en el punto, nombre debajo */
.mapa-pin{width:0!important;height:0!important}.mapa-pin__inner{position:absolute;left:0;top:0;width:max-content;display:flex;flex-direction:column;align-items:center;gap:6px;transform:translate(-50%,-20px);white-space:nowrap}
/* el Pasaje en tinta (negro del sitio) para distinguirse de las etiquetas verdes/blancas en todas las pestañas */
.mapa-pin__mark{width:40px;height:40px;display:block;filter:drop-shadow(0 2px 6px rgb(15 21 19 / .3))}
.mapa-pin__name{padding:5px 10px;border-radius:var(--radius-pill);background:var(--ink);color:var(--white);font-size:12px;font-weight:var(--fw-semibold);box-shadow:0 1px 4px rgb(15 21 19 / .2)}

/* Título y entrada sobre una panorámica (campus): arriba a la izquierda como en el hero, con su sombra superior */
.h-panorama-shade{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgb(var(--shade) / .72) 0%,rgb(var(--shade) / .44) 28%,rgb(var(--shade) / 0) 50%)}
.h-panorama-copy{position:absolute;z-index:3;left:var(--gutter);right:var(--gutter);top:calc(var(--topbar-h) + 7vh);color:var(--white);opacity:var(--reveal);transform:translateY(var(--reveal-y))} /* el título entra cuando la foto ya creció del todo (mismo --reveal que los logos) */
.h-viewport .h-panorama-copy h2{color:var(--white);font-size:clamp(32px,3.4vw,52px);max-width:none;margin:0 0 var(--space-5);text-shadow:0 2px 12px rgb(15 21 19 / .35)}
.h-panorama-copy .h-lead{color:rgb(255 255 255 / .92);max-width:58ch;font-size:var(--text-lead);text-shadow:0 1px 8px rgb(15 21 19 / .4)}
/* Logos de empresas del campus al pie de la panorámica: en blanco con transparencia, en marquesina continua */
.h-panorama-reveal.h-logos{left:var(--gutter);right:var(--gutter);bottom:6vh;color:var(--white)}
.h-logos>.h-small{display:block;margin:0 0 var(--space-5);color:rgb(255 255 255 / .8)}
.h-logos__marquee{display:flex;overflow:hidden;padding-top:var(--space-5);border-top:1px solid rgb(255 255 255 / .35);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.h-logos__track{display:flex;align-items:center;gap:clamp(40px,4.5vw,80px);padding-right:clamp(40px,4.5vw,80px);flex:none;animation:logos-marquee 70s linear infinite}
.h-logos__track img{height:38px;width:auto;max-width:180px;object-fit:contain;filter:brightness(0) invert(1);opacity:.78} /* tratamiento blanco */
@keyframes logos-marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){.h-logos__track{animation:none}}
/* Frase que se llena con el scroll: pantalla fija de 100vw dentro de un tramo de 190vw; el texto centrado, caracteres de .16 a 1 */
.h-statement{width:190vw;height:100dvh;margin-top:calc(-1 * var(--topbar-h));align-self:flex-start;flex:none;position:relative;background:var(--bg)}
.h-statement__screen{position:sticky;left:0;width:100vw;height:100%;display:grid;place-items:center;padding:var(--topbar-h) var(--gutter) 0}
.h-statement__text{position:relative;z-index:2;font-size:clamp(28px,2.9vw,46px);line-height:1.15;letter-spacing:-.025em;max-width:24ch;text-align:center;color:var(--text);text-wrap:balance}
/* Polaroids que suben y aparecen con el scroll alrededor de la frase (ref. Getty "media showcase"). Marcos a proporción real:
   instax mini 5.4×8.6 (foto 4.6×6.2) · instax square 7.2×8.6 (6.2×6.2) · instax wide 10.8×8.6 (9.9×6.2), a 31 px por cm */
.h-flux{position:absolute;inset:0;z-index:1;isolation:isolate;pointer-events:none;overflow:hidden} /* debajo de la frase (z 2); las fotos ordenan su z entre sí por cercanía */
.h-viewport .h-flux__img{position:absolute;left:0;top:0;height:auto;aspect-ratio:var(--ar,1);max-width:none;margin:0;object-fit:cover;border-radius:3px;opacity:0;visibility:hidden;transform-origin:50% 50%;will-change:transform,opacity;box-shadow:0 10px 30px rgb(15 21 19 / .14)} /* anula el img absoluto/100% del CSS base; el ancho viene del atributo width */
.h-statement__text .w{display:inline-block;white-space:nowrap}.h-statement__text .c{opacity:.16;will-change:opacity}
/* Bloque de cifras compartido (hero y panorámica del campus): dentro de una panorámica va al pie, un solo grupo */
.h-panorama-reveal.h-stats{left:var(--gutter);right:var(--gutter);bottom:6vh;grid-template-columns:1fr}

/* Contacto: dato con icono (mail / teléfono), sin subrayado; el icono en tono suave */
.h-contact-line{display:inline-flex;align-items:center;gap:var(--space-3);text-decoration:none;color:inherit;font-size:var(--text-md);transition:opacity .3s}
.h-contact-line .ico{width:18px;height:18px;color:var(--text-mute)}
.h-contact-person>.h-contact-line{text-underline-offset:0}
.h-contact-person>.h-contact-line:first-of-type{margin-top:var(--space-4)}
@media(hover:hover){.h-contact-line:hover{opacity:.65}}

/* Galería de comunidad: fotos sin pie de foto (el texto lo lleva la escena, no la imagen) */
.h-community-gallery .h-media figcaption{display:none}

/* Panorámica en video */
.h-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--surface-dark)}
/* pase de fotos dentro de una panorámica: mismas clases y push-in que los renders de la portada */
.h-media--slides .h-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease-in-out;will-change:auto;transform:none} /* sin la escala base del parallax: el push-in parte de 1 sin salto */
.h-media--slides .h-slide.is-front{opacity:1;z-index:2}.h-media--slides .h-slide.is-back{opacity:1;z-index:1}.h-media--slides .h-slide.is-off{opacity:0;z-index:0;transition:none}

/* Sin leyendas sobre las imágenes (decisión 2026-09-11); el alt describe la imagen para lectores de pantalla */
.h-viewport figcaption,#main figcaption{display:none}

/* ==== v2 · Primer cuadro: video a pantalla completa (también detrás de la cabecera) ==== */
.h-chapter{padding-top:var(--topbar-h)}
.h-opening{padding-top:0}
.h-opening>.h-panorama{margin-top:0}
.h-chapter:not(.h-opening) .h-panorama{margin-top:calc(var(--topbar-h) * -1);height:100dvh}
.h-opening{width:160vw} /* 60vw extra de recorrido con el hero fijo: 1) título 2) cifras 3) siguiente capítulo */
.h-hero{position:sticky;left:0;width:100vw;height:100%;flex:none;overflow:hidden;color:var(--white);isolation:isolate;background:var(--surface-dark) url(assets/hero-v2.webp) center/cover no-repeat} /* respaldo si el video no pinta */
.h-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:transparent;transition:opacity 1s var(--ease-out-quad)}
.h-hero__video.is-front{opacity:1;z-index:2}.h-hero__video.is-back{opacity:1;z-index:1}.h-hero__video.is-off{opacity:0;z-index:0;transition:none} /* fundido cruzado entre los dos clips */
.h-hero__photos{position:absolute;inset:0;z-index:2;display:none}html[data-hero="foto"] .h-hero__photos{display:block}html[data-hero="foto"] .h-hero__video{visibility:hidden}
.h-hero__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease-in-out}
.h-hero__photo.is-front{opacity:1;z-index:2}.h-hero__photo.is-back{opacity:1;z-index:1}.h-hero__photo.is-off{opacity:0;z-index:0;transition:none}
/* push-in continuo: arranca al entrar y sigue durante todo el fundido de salida (is-live), sin pararse ni saltar de escala */
.h-hero__photo.is-live,.h-media--slides .h-slide.is-live{animation:hero-push 8s linear forwards}
@keyframes hero-push{from{transform:scale(1)}to{transform:scale(1.09)}}
@media(prefers-reduced-motion:reduce){.h-hero__photo.is-live,.h-media--slides .h-slide.is-live{animation:none}}
.h-hero__scrim{z-index:3}.h-hero__copy,.h-stats{z-index:4} /* texto y sombra siempre por encima de los dos videos */
/* velo para legibilidad: más oscuro arriba (título) y abajo (cifras), casi nada al centro para no matar el render */
/* sombra solo donde hay texto (título arriba, cifras abajo); la franja central deja ver el video casi limpio */
/* sombra superior siempre (título); la inferior solo entra con las cifras (sigue a --hero-stats) */
.h-hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgb(var(--shade) / .74) 0%,rgb(var(--shade) / .46) 28%,rgb(var(--shade) / 0) 48%)}
.h-hero__scrim::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgb(var(--shade) / 0) 52%,rgb(var(--shade) / .44) 80%,rgb(var(--shade) / .86) 100%);opacity:var(--hero-stats,1)}
.h-hero__copy{position:absolute;left:var(--gutter);right:var(--gutter);top:calc(var(--topbar-h) + 7vh)}
.h-hero__copy h1{color:var(--white);font-size:clamp(36px,4.2vw,68px);max-width:22ch;margin:0 0 var(--space-5);text-shadow:0 2px 12px rgb(15 21 19 / .35)}
.h-hero__copy h1>span{display:block}
.h-hero__copy .h-lead{color:rgb(255 255 255 / .92);max-width:none;white-space:normal;text-wrap:balance;font-size:var(--text-lead);text-shadow:0 1px 8px rgb(15 21 19 / .4)}
.h-stats{position:absolute;left:var(--gutter);right:var(--gutter);bottom:6vh;display:grid;grid-template-columns:1fr 1fr;column-gap:6vw}
.h-hero .h-stats{opacity:var(--hero-stats,1);transform:translateY(calc(28px * (1 - var(--hero-stats,1))));will-change:opacity,transform}
/* cada grupo es una rejilla de 3 filas (rótulo · cifras · etiquetas) para que ambas filas de cifras terminen a la misma altura */
.h-stats__group{display:grid;grid-template-columns:auto auto auto;grid-template-rows:auto auto auto;column-gap:clamp(28px,3.2vw,64px);justify-content:start} /* columnas al ancho de su contenido: el hueco entre cifras es el mismo siempre */
.h-stats__group .h-small{grid-column:1/-1;grid-row:1;display:block;margin:0 0 var(--space-4);color:rgb(255 255 255 / .75)}
.h-stats .h-metrics,.h-stats .h-metrics>div{display:contents}
.h-stats .h-metrics strong{grid-row:2;display:block;color:var(--white);font-size:var(--stat-fs);line-height:1;letter-spacing:-.02em;margin:0;padding-bottom:var(--space-3);text-shadow:0 2px 10px rgb(15 21 19 / .4)}
.h-stats .h-metrics span{grid-row:3;display:block;padding-top:6px;color:rgb(255 255 255 / .82);font-size:var(--text-sm);line-height:1.35;max-width:19ch}
/* separador continuo de lado a lado entre la fila de cifras y la de etiquetas */
.h-stats::after{content:'';position:absolute;left:0;right:0;top:calc(1.2 * var(--text-xs) + var(--space-4) + var(--stat-fs) + var(--space-3));height:1px;background:rgb(255 255 255 / .35);pointer-events:none}
@media(max-width:1180px){.h-stats{grid-template-columns:1fr;row-gap:var(--space-6)}.h-stats::after{display:none}.h-stats .h-metrics strong{font-size:clamp(22px,2.4vw,32px);border-bottom:1px solid rgb(255 255 255 / .35)}}

.h-location .h-access{border-color:var(--line-strong);color:var(--text-soft)}
.h-location .h-small{color:var(--text-mute)}
/* Cierre en verde oscuro (2026-09-17, igual que la última lámina del deck); la cabecera pasa a blanco vía body.on-dark */
.h-viewport .h-contact{background:var(--surface-dark);color:var(--on-dark)}
.h-viewport .h-contact h2,.h-viewport .h-contact p,.h-viewport .h-contact .h-lead{color:var(--on-dark)}
.h-viewport .h-contact .h-contact-person>span,.h-viewport .h-contact .h-contact-foot{color:var(--on-dark-soft)}
.h-viewport .h-contact .h-contact-line .ico{color:var(--on-dark-soft)}
/* Cierre sobre la retícula de 12 columnas (margen 5vw = hero; columna = --grid-col): título y texto en la columna 1,
   una regla fina como la de las cifras del hero, y el contacto en las columnas 10–12 asentado sobre la misma base que el pie. */
.h-viewport .h-contact{padding-left:var(--gutter);padding-right:var(--gutter)}
.h-viewport .h-contact-columns{grid-template-columns:repeat(12,minmax(0,1fr));gap:0;max-width:none;padding-top:5vh;border-top:1px solid var(--line-on-dark-soft)}
.h-viewport .h-contact-columns>div:first-child{grid-column:1 / span 5;display:flex;flex-direction:column}
.h-viewport .h-contact-columns>div:first-child .h-contact-foot{margin-top:6vh}
.h-viewport .h-contact-person{grid-column:10 / span 3;align-self:baseline}
.h-viewport .h-contact-columns>div:first-child{align-self:baseline} /* a la altura de la pregunta (el pie con la dirección se quitó, 2026-09-17) */
.h-viewport .h-contact-columns .h-contact-foot{max-width:none}
/* Lista de mercados sin divisor bajo el eyebrow ni tras el último (2026-09-17): solo quedan las reglas ENTRE mercados */
.h-location-markets .h-markets{border-top:0}
.h-location-markets .h-markets article:first-of-type{padding-top:0}
.h-location-markets .h-markets article:last-of-type{border-bottom:0;padding-bottom:0}
.h-location-markets>.h-small{display:block;margin-bottom:28px}
/* Título nuevo del proyecto (2026-09-17): la segunda línea es larga; la escena se ensancha lo necesario para que cada línea quede entera */
.h-viewport .h-project-intro{width:auto;min-width:72vw}
.h-viewport .h-project-intro h2>span{white-space:nowrap}
.h-viewport .h-project-intro .h-lead{max-width:44ch;text-wrap:balance}
/* Aire entre los planos y el cierre verde (2026-09-17): más margen tras el visor y una franja verde extra antes del texto.
   El cierre mide 100vw + esa franja; al llegar al final la franja queda fuera de pantalla y el texto vuelve al margen de 5vw. */
.h-viewport .h-plans{padding-right:9vw}
.h-viewport .h-contact{--lead-in:8vw;width:calc(100vw + var(--lead-in));padding-left:calc(var(--gutter) + var(--lead-in))}
/* Vista combinada 'deck' (mercados + colonias, solo para tools/capturar-mapa.py): a este zoom el chip 01 y
   El Campanario quedan cerca; se sube un poco más el chip sin tocar su posición en la pestaña Mercados del sitio. */
.mapa-view-deck .mapa-label--m1 span{transform:translate(30px,calc(-50% - 40px))!important}

/* Galería v2 "Columnas": frase a la izquierda (col 1-5), alineada a la izquierda; las fotos son cajas de la retícula (cover) */
html[data-galeria="columnas"] .h-statement__screen{display:block}
html[data-galeria="columnas"] .h-statement__text{position:absolute;left:var(--gutter);top:50%;transform:translateY(-50%);width:calc(5 * var(--grid-col) - 24px);max-width:none;text-align:left;font-size:clamp(26px,2.6vw,40px)}
html[data-galeria="columnas"] .h-viewport .h-flux__img{aspect-ratio:auto;object-fit:cover;border-radius:2px}

/* Galería "Columnas": velos del color del papel arriba y abajo (100 % → 0 %) para que las cintas entren y salgan con
   elegancia, sin corte. Solo sobre las fotos (z 1 < frase z 2); la sombra de la copa queda debajo y no se apaga. */
html[data-galeria="columnas"] .h-statement__screen::before{display:none}
html[data-galeria="columnas"] .h-statement__screen::before{top:0;background:linear-gradient(to bottom,var(--bg) 0%,rgb(247 248 244 / .7) 40%,rgb(247 248 244 / 0) 100%)}
/* abajo NO hay velo recto (Joaquín, 2026-09-23): cada columna se funde a su propia altura (fb en paintMotion), siempre asimétrico y con fotos asomando, como si siguieran llegando */
html[data-galeria="columnas"] .h-statement__screen::after{display:none}

/* Comunidad: copa anclada a la sección desde la esquina superior izquierda (2026-09-23, Joaquín: "aquí casi no se nota").
   Es una copia con la esquina íntegra (sombra-copa-esquina), sin repetición ni parallax; hereda el vaivén continuo de la copa. */
.h-statement__screen{overflow:hidden}
.h-viewport .h-statement__copa{position:absolute;z-index:0;left:-5vw;top:-9vh;width:190vh;height:122vh;background:url(assets/sombra-copa-esquina.webp) no-repeat 0 0 / auto 122vh;mix-blend-mode:multiply;opacity:.12;pointer-events:none;transform-origin:8% 4%;-webkit-mask-image:linear-gradient(to right,transparent 5vw,#000 40%);mask-image:linear-gradient(to right,transparent 5vw,#000 40%); /* la pantalla fija recorta la copa en su borde izquierdo al entrar: el borde se funde en vez de cortarse */animation:canopy-sway 14s linear infinite,canopy-flutter 4.2s ease-in-out infinite alternate,canopy-breathe 9s ease-in-out infinite;animation-delay:-6s,-2s,-4s;will-change:transform}
/* 2026-09-24 (Joaquín): la copa anclada se sumaba a la sombra global y Comunidad se veía "sucia, con sombras multiplicadas". Fuera en todos los modos: la galería lleva solo la sombra global, igual que La ubicación. */
.h-viewport .h-statement__copa{display:none} /* con 1×2 la copa global ya tiene presencia: la anclada sumaba ruido (Joaquín, 2026-09-23) */
@media(prefers-reduced-motion:reduce){.h-statement__copa{animation:none}}

/* Columnas: fundido de marquesina (2026-09-23): las cintas llegan hasta el borde y se disuelven en una banda suave arriba y
   abajo, como un carrusel de logos en loop; nada desaparece de golpe. */
html[data-galeria="columnas"] .h-flux{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16vh,#000 calc(100% - 12vh),rgb(0 0 0 / .45) 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 16vh,#000 calc(100% - 12vh),rgb(0 0 0 / .45) 100%)}

/* Boceto arquitectónico al pie del cierre (2026-09-24, Joaquín: "que no sean slides tan planas"). Trazo blanco con alfa
   (assets/sketch-pasaje.webp, de Assets/06_Ilustraciones), desvanecido hacia arriba y por los lados, a media opacidad
   sobre el verde: decoración, siempre debajo del texto. */
.h-viewport .h-contact{overflow:hidden}
.h-viewport .h-contact>*{position:relative;z-index:1}
.h-viewport .h-contact>.h-contact__sketch{position:absolute;z-index:0;right:0;bottom:0;left:auto;width:100vw;height:auto;max-height:46%;object-fit:cover;object-position:center bottom;opacity:.5;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 40%);mask-image:linear-gradient(to bottom,transparent 0,#000 40%)}

/* Cierre con el boceto (2026-09-24): el texto sube (ya no se centra en vertical) para dejarle aire al dibujo, y el trazo baja a .3 para que acompañe sin saltar a la vista */
.h-viewport .h-contact{justify-content:flex-start;padding-top:calc(var(--topbar-h) + 9vh)}
.h-viewport .h-contact h2{margin-bottom:5vh}
.h-viewport .h-contact-columns{padding-top:4vh}
.h-viewport .h-contact>.h-contact__sketch{opacity:.3;max-height:50%}

/* Decor "Render" (2026-09-24): bocetos en tinta con alfa (assets/sketch-b = abre, sketch-a = cierra), al pie de la sección, detrás del
   texto (z -1 dentro de la sección aislada), 44vh de alto (Joaquín: "un poco menos de altura"), multiply a .34. Solo con el chip Render. */
.h-viewport .h-location,.h-viewport .h-project{isolation:isolate}
.h-viewport .h-sketch{display:none;position:absolute;z-index:-1;bottom:0;height:52vh;width:auto;max-width:none;opacity:.34;mix-blend-mode:multiply;pointer-events:none;will-change:transform} /* el parallax lo pone horizontal.js (translate3d) */
.h-viewport .h-sketch{display:block} /* estado final: siempre (2026-09-24) */
.h-viewport .h-sketch--open{left:-7vw;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 12vw);mask-image:linear-gradient(to right,transparent 0,#000 12vw)} /* 2026-09-24: arranca más a la izquierda y su borde se funde: el techo ya no "termina" en el corte de la sección */
.h-viewport .h-sketch--close{right:-20vw} /* cierra la MISMA sección (Joaquín, 2026-09-24): el edificio queda a la derecha de la lista de mercados (legible) y el final vacío del boceto se esconde tras la panorámica del campus */
/* "Sobre 5 de Febrero" un poco más arriba SOLO en Render (2026-09-24): aire para el boceto; en Sombra y Hojas queda centrado a lo alto */
.h-viewport .h-location-copy{padding-bottom:14vh}

/* Render en Comunidad (2026-09-24): el boceto del paseo (assets/sketch-c.webp, simétrico, centro vacío para la frase) llena la pantalla
   fija, anclado abajo, detrás de las fotos (z 1) y la frase (z 2); su opacidad la lleva paintMotion (0 al entrar y al salir). */
.h-viewport .h-sketch--community{left:0;right:0;bottom:0;width:100%;height:auto;max-height:100%;object-fit:cover;object-position:center bottom;opacity:0;transform:none;z-index:0}
/* Comunidad: el boceto va centrado (sin parallax) y solo en el efecto Túnel; en Columnas la sección queda limpia (Joaquín, 2026-09-24) */
.h-viewport .h-sketch--community{transform:none!important;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;object-position:center center;margin:0} /* cubre toda la pantalla fija, esquina a esquina (Joaquín, 2026-09-24) */

/* Boceto del cierre: nace del punto de fuga (clip-path desde el centro) al entrar; valores iniciales para el primer cuadro; lo anima paintMotion */
.h-viewport .h-contact>.h-contact__sketch{will-change:opacity,transform;opacity:0;transform:translate3d(0,-24px,0)}
@media(prefers-reduced-motion:reduce){.h-viewport .h-contact>.h-contact__sketch{opacity:.3;transform:none}}

/* Logos del campus en dos filas (2026-09-24, Joaquín): una corre hacia la izquierda y la otra hacia la derecha */
.h-logos__rows{display:grid;gap:var(--space-4)}
.h-logos__rows .h-logos__marquee+.h-logos__marquee{border-top:0;padding-top:0}
.h-logos__marquee--rev .h-logos__track{animation-direction:reverse}

/* 42 logos (2026-09-27): cada fila lleva 21; la vuelta completa dura más para conservar la velocidad */
.h-logos__track{animation-duration:120s}

/* Ajuste óptico de logos (2026-09-27, Joaquín: "mucha discrepancia de tamaños"): alto base más chico y escala por logo (--s) */
.h-logos__track img{height:calc(22px * var(--s,1));max-width:none}
.h-logos__track{gap:clamp(36px,4vw,64px);padding-right:clamp(36px,4vw,64px)}

/* ---- Títulos del recorrido en pasos (2026-09-28): mismos tramos que tokens.css; todos los h2 comparten tamaño ---- */
.h-location-copy h2,.h-viewport .h-panorama-copy h2{font-size:var(--display-2)}
.h-opening-copy h1{font-size:48px}.h-hero__copy h1{font-size:44px}.h-statement__text{font-size:32px}
@media(max-width:1180px){.h-stats .h-metrics strong{font-size:24px}}
@media(min-width:1280px){.h-opening-copy h1{font-size:60px}.h-hero__copy h1{font-size:56px}.h-statement__text{font-size:36px}}
@media(min-width:1536px){.h-opening-copy h1{font-size:72px}.h-hero__copy h1{font-size:64px}.h-statement__text{font-size:44px}}
@media(min-width:1728px){.h-hero__copy h1{font-size:68px}}

.mapa-tabs .t-short{display:none}

/* ---- Planos v6 (2026-09-30): Master plan / Pasaje comercial, versión Planta|Plano, delimitaciones y zoom por pasos ---- */
.h-plans__bar{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);width:100%}
.h-plans__ver{background:var(--glass)}.h-plans__ver button{height:36px;padding:0 14px;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--text-soft);font:inherit;font-size:var(--text-sm);cursor:pointer;transition:background .3s,color .3s}
.h-plans__ver button[aria-pressed=true]{background:var(--ink);color:var(--white)}
.h-plan-box{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease-out-quad);transform-origin:0 0;will-change:transform}.h-plan-box.is-on{opacity:1}
.h-plans__stage .h-plan-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s var(--ease-out-quad);mix-blend-mode:multiply;max-width:none;transform:none;margin:0}.h-plans__stage .h-plan-img.is-ver{opacity:1}
.h-zones-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.h-zone{fill:rgb(160 198 0 / 0);stroke:transparent;stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:all;cursor:pointer;transition:fill .3s,stroke .3s}
.h-zone.is-hover{fill:rgb(160 198 0 / .12);stroke:var(--brand)}
.h-zone[data-zone=desarrollada].is-on{fill:rgb(18 62 50 / .08);stroke:var(--brand);stroke-width:2.5;stroke-dasharray:8 6}
.h-zone[data-zone=pasaje].is-on{fill:rgb(160 198 0 / .28);stroke:#8fb300;stroke-width:2.5}
.h-zone.is-on.is-hover{fill:rgb(160 198 0 / .36)}
.h-zones{position:absolute;left:16px;bottom:16px;z-index:5;display:flex;gap:8px}
.h-zone-chip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 10px;border:0;border-radius:var(--radius-pill);background:rgb(255 255 255 / .88);backdrop-filter:var(--glass-blur);color:var(--text);font:inherit;font-size:var(--text-xs);cursor:pointer;box-shadow:0 1px 4px rgb(15 21 19 / .08);transition:background .25s,color .25s}
.h-zone-chip i{width:12px;height:12px;border-radius:3px;box-shadow:inset 0 0 0 1.5px var(--brand);transition:background .25s}.h-zone-chip[data-zone=pasaje] i{box-shadow:inset 0 0 0 1.5px #8fb300}
.h-zone-chip[aria-pressed=true]{background:var(--brand);color:var(--white)}.h-zone-chip[aria-pressed=true] i{background:#a0c600;box-shadow:none}
@media(hover:hover){.h-zone-chip:hover{background:var(--white)}.h-zone-chip[aria-pressed=true]:hover{background:var(--green-900,#0f2b21)}}
.h-zoom{position:absolute;right:16px;bottom:16px;z-index:5;display:flex;align-items:center;gap:6px}
.h-zoom__btn{width:40px;height:40px;border:0;border-radius:var(--radius-2);background:rgb(255 255 255 / .88);backdrop-filter:var(--glass-blur);color:var(--text);display:grid;place-items:center;cursor:pointer;box-shadow:0 1px 4px rgb(15 21 19 / .08);transition:background .3s,opacity .3s}.h-zoom__btn:hover{background:var(--white)}.h-zoom__btn:disabled{opacity:.35;cursor:default}.h-zoom__btn .ico{width:18px;height:18px}
.h-zoom__val{min-width:44px;height:40px;display:grid;place-items:center;border-radius:var(--radius-2);background:rgb(255 255 255 / .88);backdrop-filter:var(--glass-blur);font-size:var(--text-xs);letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--text)}
.h-plans__stage.is-zoomed{cursor:grab}.h-plans__stage.is-dragging{cursor:grabbing}.h-plans__stage.is-zoomed .h-plan-box{touch-action:none}
.h-zones[hidden],.h-zoom[hidden],.h-plans__ver[hidden],.h-plans__tabs [role=tab][hidden],.h-plans__legend[hidden]{display:none}

/* ---- Planos seamless + tarjeta de delimitaciones (2026-09-30, Joaquín) ----
   Las imágenes de los planos llevan el blanco convertido en transparencia (equivale a multiply sobre el papel y la sombra de la copa),
   así que el escenario va sin fondo ni marco cuando muestra un plano. La tarjeta arriba a la izquierda lleva un interruptor por zona:
   se pueden ver las dos, una o ninguna. */
.h-plans__stage.is-plan{background:transparent;border-color:transparent}
.h-zones{left:16px;top:16px;bottom:auto;flex-direction:column;gap:2px;padding:8px;border-radius:var(--radius-2);background:rgb(247 248 244 / .92);backdrop-filter:var(--glass-blur);box-shadow:0 1px 0 rgb(15 21 19 / .04),0 8px 24px rgb(15 21 19 / .08)}
.h-zone-chip{height:40px;padding:0 10px;gap:10px;border-radius:var(--radius-1);background:transparent;box-shadow:none;backdrop-filter:none;font-size:var(--text-sm);color:var(--text);justify-content:flex-start}
.h-zone-chip span{flex:1 1 auto;text-align:left;padding-right:12px}
.h-zone-chip[aria-pressed=true]{background:transparent;color:var(--text)}
.h-zone-chip[aria-pressed=true] i{background:#a0c600;box-shadow:none}.h-zone-chip[data-zone=desarrollada][aria-pressed=true] i{background:rgb(18 62 50 / .18);box-shadow:inset 0 0 0 1.5px var(--brand)}
.h-sw{position:relative;flex:none;width:30px;height:18px;border-radius:999px;background:rgb(15 21 19 / .14);transition:background .25s}
.h-sw::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--white);box-shadow:0 1px 2px rgb(15 21 19 / .2);transition:transform .25s var(--ease-out-quad)}
.h-zone-chip[aria-pressed=true] .h-sw{background:var(--brand)}.h-zone-chip[aria-pressed=true] .h-sw::after{transform:translateX(12px)}
@media(hover:hover){.h-zone-chip:hover,.h-zone-chip[aria-pressed=true]:hover{background:rgb(15 21 19 / .05)}}

/* ---- Zonas como piezas de rompecabezas (2026-10-01): verde = área desarrollada, naranja = pasaje; foco en vez de interruptores ---- */
.h-zone{fill:rgb(18 62 50 / .14);stroke:rgb(18 62 50 / .75);stroke-width:1.5;stroke-dasharray:none;transition:fill .3s,stroke .3s,opacity .3s}
.h-zone[data-zone=pasaje]{fill:rgb(232 118 36 / .32);stroke:#d9661a}
.h-zone.is-hover,.h-zone.is-focus{stroke-width:2.5}
.h-zone[data-zone=desarrollada].is-focus,.h-zone[data-zone=desarrollada].is-hover{fill:rgb(18 62 50 / .26);stroke:var(--brand)}
.h-zone[data-zone=pasaje].is-focus,.h-zone[data-zone=pasaje].is-hover{fill:rgb(232 118 36 / .48);stroke:#c75a12}
.h-zone.is-dim:not(.is-hover){opacity:.42}
.h-zone-labels{position:absolute;inset:0;pointer-events:none}
.h-zone-label{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%) scale(var(--iz,1));transform-origin:50% 50%;padding:6px 10px;border-radius:var(--radius-pill);background:rgb(247 248 244 / .92);color:var(--text);font-size:12px;font-weight:var(--fw-medium);letter-spacing:.01em;white-space:nowrap;box-shadow:0 1px 4px rgb(15 21 19 / .12);transition:background .3s,color .3s,opacity .3s}
.h-zone-label[data-zone=pasaje].is-focus{background:#d9661a;color:var(--white)}.h-zone-label[data-zone=desarrollada].is-focus{background:var(--brand);color:var(--white)}
.h-zone-label.is-dim{opacity:.6}
.h-zone-chip i{box-shadow:none;background:rgb(18 62 50 / .9)}.h-zone-chip[data-zone=pasaje] i{background:#e07a2f}
.h-zone-chip[aria-pressed=true] i,.h-zone-chip[data-zone=pasaje][aria-pressed=true] i{box-shadow:0 0 0 2px var(--white),0 0 0 3px currentColor}
.h-zone-chip[aria-pressed=true]{background:rgb(15 21 19 / .06);color:var(--text)}
.h-zone-chip[data-zone=pasaje][aria-pressed=true]{background:rgb(232 118 36 / .14)}.h-zone-chip[data-zone=desarrollada][aria-pressed=true]{background:rgb(18 62 50 / .10)}
.h-zone-chip.is-hover{background:rgb(15 21 19 / .05)}
.h-plans__stage .h-plan{pointer-events:none} /* las imágenes ocultas de planta baja/alta tapaban los clics sobre las piezas (2026-10-01) */
.h-plan-box:not(.is-on){pointer-events:none} /* la caja oculta del otro plano quedaba encima y se comía los clics sobre las piezas (2026-10-01) */

/* ---- Zonas v3 (2026-10-01): master plan limpio al inicio; tiles seleccionables con superficie; traslape achurado ---- */
.h-zone{fill:transparent;stroke:transparent;stroke-width:1.5;pointer-events:all;transition:fill .3s,stroke .3s,opacity .3s}
.h-zone.is-on{stroke-width:2}
.h-zone[data-zone=desarrollada].is-on{fill:rgb(18 62 50 / .22);stroke:var(--brand)}
.h-zone[data-zone=pasaje].is-on{fill:rgb(232 118 36 / .40);stroke:#c75a12}
.h-zone.is-hover:not(.is-on){fill:rgb(15 21 19 / .06);stroke:rgb(15 21 19 / .35)}
.h-zone.is-on.is-hover[data-zone=desarrollada]{fill:rgb(18 62 50 / .3)}.h-zone.is-on.is-hover[data-zone=pasaje]{fill:rgb(232 118 36 / .5)}
.h-zone.is-dim{opacity:1}
.h-zone-overlap{fill:url(#h-hatch);stroke:none;pointer-events:none;opacity:0;transition:opacity .3s}.h-zone-overlap.is-on{opacity:1}
.h-zone-label{opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s,background .3s,color .3s}.h-zone-label.is-on{opacity:1;visibility:visible}
.h-zone-label.is-on[data-zone=pasaje]{background:#c75a12;color:var(--white)}.h-zone-label.is-on[data-zone=desarrollada]{background:var(--brand);color:var(--white)}
.h-zone-label.is-dim{opacity:1}
.h-zones{gap:6px;padding:12px;width:244px}
.h-zones__logo{display:block;width:118px;height:auto;margin:2px 0 8px 4px}
.h-zone-chip{height:auto;min-height:52px;padding:8px 10px;align-items:center;border:1px solid transparent;border-radius:var(--radius-2);background:rgb(15 21 19 / .035);color:var(--text)}
.h-zone-chip i{width:12px;height:12px;border-radius:3px;flex:none;background:#e07a2f}.h-zone-chip[data-zone=desarrollada] i{background:var(--brand)}
.h-zone-chip__t{display:flex;flex-direction:column;gap:2px;text-align:left;padding-right:0}
.h-zone-chip__t b{font-weight:var(--fw-medium);font-size:var(--text-sm);line-height:1.2}.h-zone-chip__t small{font-size:12px;line-height:1.2;color:var(--text-mute)}
.h-zone-chip.is-hover{background:rgb(15 21 19 / .07)}
.h-zone-chip[aria-pressed=true]{background:rgb(15 21 19 / .035)}
.h-zone-chip[data-zone=pasaje][aria-pressed=true]{background:rgb(232 118 36 / .16);border-color:rgb(199 90 18 / .55)}
.h-zone-chip[data-zone=desarrollada][aria-pressed=true]{background:rgb(18 62 50 / .12);border-color:rgb(18 62 50 / .45)}
.h-zone-chip[aria-pressed=true] .h-zone-chip__t small{color:var(--text-soft)}
.h-zones__note{display:flex;align-items:center;gap:8px;margin:2px 0 0;padding:4px 10px 2px;font-size:12px;color:var(--text-soft)}
.h-zones__note i{flex:none;width:12px;height:12px;border-radius:3px;background:repeating-linear-gradient(45deg,rgb(18 62 50 / .7) 0 2px,rgb(232 118 36 / .45) 2px 5px)}
.h-zones__note[hidden]{display:none}

/* ---- Zonas v4 (2026-10-01): una u otra; verde lima vibrante para el área desarrollada ---- */
.h-zone[data-zone=desarrollada].is-on{fill:rgb(160 198 0 / .36);stroke:#7e9c00}
.h-zone.is-on.is-hover[data-zone=desarrollada]{fill:rgb(160 198 0 / .46)}
.h-zone-label.is-on[data-zone=desarrollada]{background:#a0c600;color:var(--green-900,#0f2b21)}
.h-zone-chip[data-zone=desarrollada] i{background:#a0c600}
.h-zone-chip[data-zone=desarrollada][aria-pressed=true]{background:rgb(160 198 0 / .22);border-color:rgb(126 156 0 / .6)}
/* el master plan arranca de verdad limpio: la regla antigua `.h-zone[data-zone=pasaje]` (v2) pintaba el pasaje en reposo (2026-10-01) */
.h-zone[data-zone=pasaje]:not(.is-on):not(.is-hover),.h-zone[data-zone=desarrollada]:not(.is-on):not(.is-hover){fill:transparent;stroke:transparent;opacity:1}

/* ---- Espacios del Pasaje comercial (2026-10-01): huellas en lima, ficha al pasar el cursor, pastillas con m² ---- */
.h-esp-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.h-esp{outline:0;cursor:pointer}
.h-esp__p{fill:rgb(160 198 0 / .18);stroke:rgb(126 156 0 / .7);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round;pointer-events:all;transition:fill .25s,stroke .25s}
.h-esp__t{fill:rgb(160 198 0 / 0);stroke:transparent;stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:4 3;pointer-events:none;transition:fill .25s,stroke .25s}
.h-esp.is-on .h-esp__p,.h-esp:focus-visible .h-esp__p{fill:rgb(160 198 0 / .55);stroke:#7e9c00;stroke-width:2}
.h-esp.is-on .h-esp__t{fill:rgb(160 198 0 / .22);stroke:#7e9c00}
.h-esp.is-type .h-esp__p{fill:rgb(160 198 0 / .4);stroke:#7e9c00;stroke-width:1.5}
.h-esp.is-dim .h-esp__p{fill:rgb(160 198 0 / .06);stroke:rgb(126 156 0 / .3)}
.h-esp[data-status=rentado] .h-esp__p{fill:url(#h-esp-hatch);stroke:rgb(18 62 50 / .6)}
.h-esp[data-status=rentado].is-on .h-esp__p{fill:url(#h-esp-hatch);stroke:var(--brand)}
.h-esp-labels{position:absolute;inset:0;pointer-events:none}
.h-esp-chip{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%) scale(var(--iz,1));transform-origin:50% 50%;padding:3px 6px;border-radius:var(--radius-pill);background:rgb(255 255 255 / .9);color:var(--text);font-size:11px;line-height:1;letter-spacing:.02em;white-space:nowrap;box-shadow:0 1px 3px rgb(15 21 19 / .12);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s,background .25s,color .25s}
.h-esp-chip.is-narrow{transform:translate(-50%,-50%) scale(var(--iz,1)) rotate(-90deg)}
.h-esp-chip.is-wide,.h-plans__stage.is-z15 .h-esp-chip{opacity:1;visibility:visible}
.h-esp-chip.is-on{background:#a0c600;color:var(--green-900,#0f2b21);opacity:1;visibility:visible}
.h-esp-tip{position:absolute;left:0;top:0;z-index:6;display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:var(--radius-2);background:var(--ink);color:var(--white);font-size:12px;line-height:1.25;white-space:nowrap;pointer-events:none;box-shadow:0 6px 18px rgb(15 21 19 / .18)}
.h-esp-tip b{font-weight:var(--fw-medium)}.h-esp-tip span{color:rgb(255 255 255 / .8)}.h-esp-tip em{font-style:normal;color:#a0c600}
.h-esp-tip[hidden]{display:none}
.h-esp-card .h-zone-chip i{background:#a0c600}.h-esp-card .h-zone-chip[aria-pressed=true]{background:rgb(160 198 0 / .22);border-color:rgb(126 156 0 / .6)}
.h-esp-card__count{color:var(--text)}.h-esp-card__count i{background:#a0c600}
.h-esp-card[hidden]{display:none}

/* ---- Pasaje: chips con el número del espacio (siempre visibles) y resumen al pie (2026-10-01, Joaquín) ---- */
.h-esp-chip,.h-esp-chip.is-wide,.h-plans__stage.is-z15 .h-esp-chip{opacity:1;visibility:visible;padding:2px 5px;font-size:10px;font-weight:var(--fw-medium);letter-spacing:.02em}
.h-plans__summary{position:absolute;left:16px;bottom:16px;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding:10px 14px;border-radius:var(--radius-2);background:rgb(247 248 244 / .92);backdrop-filter:var(--glass-blur);font-size:var(--text-sm);color:var(--text-soft);box-shadow:0 1px 0 rgb(15 21 19 / .04),0 8px 24px rgb(15 21 19 / .08)}
.h-plans__summary b{font-weight:var(--fw-medium);color:var(--text)}
.h-plans__summary .h-esp-card__count{display:inline-flex;align-items:center;gap:8px;color:var(--text)}.h-plans__summary .h-esp-card__count i{width:10px;height:10px;border-radius:3px;background:#a0c600}
.h-plans__summary[hidden]{display:none}

/* ---- Colores invertidos (2026-10-01, Joaquín): área desarrollada NARANJA, pasaje VERDE LIMA; cuadrito del tile sin foco y alineado a la primera línea ---- */
.h-zone[data-zone=pasaje].is-on{fill:rgb(160 198 0 / .36);stroke:#7e9c00}.h-zone.is-on.is-hover[data-zone=pasaje]{fill:rgb(160 198 0 / .46)}
.h-zone[data-zone=desarrollada].is-on{fill:rgb(232 118 36 / .40);stroke:#c75a12}.h-zone.is-on.is-hover[data-zone=desarrollada]{fill:rgb(232 118 36 / .5)}
.h-zone-label.is-on[data-zone=pasaje]{background:#a0c600;color:var(--green-900,#0f2b21)}.h-zone-label.is-on[data-zone=desarrollada]{background:#c75a12;color:var(--white)}
.h-zone-chip[data-zone=pasaje] i{background:#a0c600}.h-zone-chip[data-zone=desarrollada] i{background:#e07a2f}
.h-zone-chip[data-zone=pasaje][aria-pressed=true]{background:rgb(160 198 0 / .22);border-color:rgb(126 156 0 / .6)}
.h-zone-chip[data-zone=desarrollada][aria-pressed=true]{background:rgb(232 118 36 / .16);border-color:rgb(199 90 18 / .55)}
.h-zone-chip[aria-pressed=true] i,.h-zone-chip[data-zone=pasaje][aria-pressed=true] i,.h-zone-chip[data-zone=desarrollada][aria-pressed=true] i{box-shadow:none}
.h-zone-chip{align-items:flex-start}.h-zone-chip i{margin-top:3px}

/* ---- Ficha del espacio (2026-10-01): panel lateral derecho, mismo lenguaje que el drawer de contacto ---- */
.h-esp-panel{position:fixed;inset:0;z-index:78;color:var(--text)}
.h-esp-panel[hidden]{display:none}
.h-esp-panel__shade{position:absolute;inset:0;background:var(--scrim-30,rgb(15 21 19 / .3));backdrop-filter:blur(10px);opacity:0;transition:opacity .45s ease}
.h-esp-panel__box{position:absolute;top:var(--space-2);right:var(--space-2);bottom:var(--space-2);width:min(520px,calc(100% - var(--space-4)));display:flex;flex-direction:column;background:var(--bg);border-radius:var(--radius-4);box-shadow:0 24px 60px rgb(15 21 19 / .22);overflow:hidden;transform:translateX(24px);opacity:0;transition:transform .5s cubic-bezier(.165,.84,.44,1),opacity .35s ease}
.h-esp-panel.is-open .h-esp-panel__shade{opacity:1}.h-esp-panel.is-open .h-esp-panel__box{transform:none;opacity:1}
.h-esp-panel__close{position:absolute;top:var(--space-4);right:var(--space-4);z-index:3;width:44px;height:44px;border:0;border-radius:var(--radius-2);background:var(--glass);color:var(--text);display:grid;place-items:center;cursor:pointer}
.h-esp-panel__close svg{width:20px;height:20px;stroke-width:1.5}
.h-esp-panel__body{flex:1 1 auto;overflow:auto;padding:var(--space-6) var(--space-7) var(--space-6)}
.h-esp-panel__head{display:flex;align-items:flex-start;gap:var(--space-3);padding-right:56px;margin-bottom:var(--space-5)}
.h-esp-panel__tag{flex:none;display:grid;place-items:center;min-width:44px;height:32px;padding:0 10px;border-radius:999px;background:rgb(160 198 0 / .35);box-shadow:inset 0 0 0 1px #8fb300;color:var(--green-900,#0f2b21);font-style:normal;font-size:var(--text-sm);font-weight:var(--fw-medium);margin-top:4px}
.h-esp-panel__kicker{margin:0 0 2px;font-size:var(--text-xs);letter-spacing:var(--track-wide,.08em);text-transform:uppercase;color:var(--text-mute)}
.h-esp-panel__title{margin:0;font-size:var(--display-4);font-weight:var(--fw-semibold);line-height:1.1;letter-spacing:-.02em}
.h-esp-panel__status{flex:none;align-self:flex-start;margin-top:6px;padding:4px 10px;border-radius:999px;background:rgb(160 198 0 / .22);color:var(--green-900,#0f2b21);font-size:var(--text-xs);font-weight:var(--fw-medium)}
.h-esp-panel__status[data-status=rentado]{background:rgb(15 21 19 / .08);color:var(--text-soft)}
.h-esp-panel__map{position:relative;border-radius:var(--radius-2);overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.h-esp-panel__map svg{display:block;width:100%;height:auto;max-height:260px}
.h-esp-panel__p{fill:rgb(160 198 0 / .5);stroke:#7e9c00;stroke-width:.12;stroke-linejoin:round}
.h-esp-panel__t{fill:rgb(160 198 0 / .18);stroke:#7e9c00;stroke-width:.08;stroke-dasharray:.4 .3}
.h-esp-panel__maptag{position:absolute;left:10px;bottom:10px;padding:3px 8px;border-radius:999px;background:rgb(247 248 244 / .92);font-size:11px;color:var(--text-soft)}
.h-esp-panel__facts{display:grid;grid-template-columns:repeat(2,1fr);gap:0 var(--space-5);margin:var(--space-5) 0 var(--space-2);padding:0;border-top:1px solid var(--line)}
.h-esp-panel__facts div{display:flex;justify-content:space-between;gap:var(--space-3);padding:10px 0;border-bottom:1px solid var(--line);font-size:var(--text-sm)}
.h-esp-panel__facts dt{color:var(--text-mute)}.h-esp-panel__facts dd{margin:0;font-weight:var(--fw-medium)}
.h-esp-panel__sec{margin-top:var(--space-5)}
.h-esp-panel__sec h3{margin:0 0 var(--space-3);font-size:var(--text-base);font-weight:var(--fw-medium)}
.h-esp-panel__sec h3 small{margin-left:8px;padding:2px 8px;border-radius:999px;background:rgb(15 21 19 / .06);font-size:11px;font-weight:var(--fw-regular,400);color:var(--text-mute);vertical-align:middle}
.h-esp-panel__sec p{margin:0;font-size:var(--text-sm);color:var(--text-soft)}
.h-esp-panel__list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.h-esp-panel__list li{display:flex;gap:10px;align-items:flex-start;font-size:var(--text-sm);line-height:1.4;color:var(--text)}
.h-esp-panel__list svg{flex:none;width:18px;height:18px;margin-top:1px;color:#7e9c00}
.h-esp-panel__cta{margin-top:var(--space-6)}
.h-esp-panel__btn{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:52px;padding:0 var(--space-5);border-radius:var(--radius-2);background:var(--brand);color:var(--white);text-decoration:none;font-size:var(--text-base);font-weight:var(--fw-medium)}
.h-esp-panel__btn .ico{width:18px;height:18px}
.h-esp-panel__note{margin:var(--space-3) 0 0;font-size:var(--text-xs);color:var(--text-mute)}
.h-esp-panel__fine{margin:var(--space-5) 0 0;font-size:11px;line-height:1.5;color:var(--text-mute)}
html.h-esp-open,html.h-esp-open body{overflow:hidden}

.h-esp-panel__map svg{max-height:none;aspect-ratio:1.6}
.h-esp-panel__p{stroke-width:2}.h-esp-panel__t{stroke-width:1.2;stroke-dasharray:6 4}
/* el cuadrito conserva su color al seleccionar (una regla vieja lo volvía gris verdoso) */
.h-zone-chip[data-zone=desarrollada][aria-pressed=true] i{background:#e07a2f}
.h-zone-chip[data-zone=pasaje][aria-pressed=true] i{background:#a0c600}
/* ---- Cabecera de la ficha en dos filas (2026-10-01): rótulo arriba; chip, nombre y estado en una línea ---- */
.h-esp-panel__head{display:block;padding-right:56px;margin-bottom:var(--space-5)}
.h-esp-panel__kicker{margin:0 0 10px;font-size:11px;letter-spacing:.1em;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-esp-panel__row{display:flex;align-items:center;gap:var(--space-3)}
.h-esp-panel__tag{margin-top:0}
.h-esp-panel__status{margin:0 0 0 auto;align-self:center}

/* ---- Etiquetas de lugar sin chip sobre el plano del Pasaje (Pet Park, 2026-10-01) ---- */
.h-plan-label{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%) scale(var(--iz,1));transform-origin:50% 50%;color:var(--green-900,#0f2b21);font-size:12px;font-weight:var(--fw-medium);letter-spacing:.02em;line-height:1;white-space:nowrap;pointer-events:none;text-shadow:0 0 6px rgb(247 248 244 / .7)}

/* Las piezas y huellas fijan pointer-events:all y se saltaban el none de la caja inactiva: la capa oculta (PA sobre PB, zonas sobre PA…) se comía clics y hovers (Joaquín, 2026-10-01) */
.h-plan-box:not(.is-on) .h-esp,.h-plan-box:not(.is-on) .h-esp__p,.h-plan-box:not(.is-on) .h-zone{pointer-events:none}

/* ---- Mapa | Satélite: control segmentado de iconos, mismo lenguaje que las pestañas del mapa y Planta|Plano (Joaquín, 2026-10-02) ---- */
.mapa-sat{height:44px;padding:4px;gap:4px;border-radius:var(--radius-pill);background:rgb(255 255 255 / .78);box-shadow:0 1px 4px rgb(15 21 19 / .08);cursor:default}
.mapa-sat__dot{display:none}
.mapa-sat button{display:grid;place-items:center;width:44px;height:36px;padding:0;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--text);cursor:pointer;transition:background .35s var(--ease-out-quad),color .35s var(--ease-out-quad)}
.mapa-sat button svg{width:20px;height:20px}
.mapa-sat button[aria-pressed=true]{background:var(--brand);color:var(--white)}
@media(hover:hover){.mapa-sat button[aria-pressed=false]:hover{background:rgb(15 21 19 / .06)}}
.mapa-sat button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* el segmento activo muestra su nombre; el otro, solo el icono de la vista a la que cambia (Joaquín, 2026-10-02) */
.mapa-sat button{width:auto;min-width:44px;padding:0 12px;font:inherit;font-size:var(--text-sm)}
.mapa-sat button span{display:none}
.mapa-sat button[aria-pressed=true]{padding:0 16px}
.mapa-sat button[aria-pressed=true]{display:inline-flex;align-items:center;gap:8px;padding:0 16px 0 12px} /* activo: icono + nombre (Joaquín) */
.mapa-sat button[aria-pressed=true] span{display:inline}

/* ---- Satisfacción y recomendación del campus (dato de Empresalia: 9.5/10 y 100% lo recomienda), discreto bajo la entrada (Joaquín, 2026-10-02) ---- */
.rating{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:20px;font-size:14px;line-height:1.3;letter-spacing:.01em}
.rating__stars{display:inline-flex;gap:3px}
.rating__stars svg{width:14px;height:14px;fill:currentColor;stroke:none;display:block}
.rating__half{position:relative;display:block;width:14px;height:14px}
.rating__half .is-empty{fill:none;stroke:currentColor;stroke-width:1.5}
.rating__half>span{position:absolute;inset:0;width:50%;overflow:hidden}
.rating__half>span svg{width:14px}
.rating__m b{font-weight:var(--fw-medium)}
.rating__sep{width:1px;height:14px;background:currentColor;opacity:.35}
.rating--photo{color:rgb(255 255 255 / .92);text-shadow:0 1px 8px rgb(15 21 19 / .4)}
.rating--photo .rating__stars{color:#c6f000}
.rating--paper{color:var(--text-soft);margin-top:16px}
.rating--paper .rating__stars{color:#8fb300}
.rating--paper b{color:var(--text)}

/* ---- Satisfacción en la franja de logos (Joaquín, 2026-10-02: arriba no se leía): ceja a la izquierda, dos cifras de dos líneas a la derecha, misma línea base ---- */
.h-logos__head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin:0 0 var(--space-5)}
.h-logos__head>.h-small{display:block;margin:0;color:rgb(255 255 255 / .8)}
.h-sat{display:flex;align-items:flex-end;gap:24px;flex:none;text-shadow:0 1px 8px rgb(15 21 19 / .35)}
.h-sat__b{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.h-sat__b b{display:inline-flex;align-items:center;gap:10px;font-weight:var(--fw-medium);font-size:24px;line-height:1;color:var(--white)}
.h-sat__b>span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgb(255 255 255 / .8)}
.h-sat__sep{align-self:stretch;width:1px;background:rgb(255 255 255 / .3)}
.h-sat .rating__stars{color:#c6f000}

/* ---- Ubicación en tablet horizontal / laptop chica (2026-10-02, QA): título y mapa caben juntos; Mapa|Satélite baja a la esquina inferior izquierda ---- */
@media (min-width:1024px) and (max-width:1279px){
  .h-location{gap:24px}
  .h-location-copy{padding:0 0 0 var(--gutter);max-width:none;width:calc(420px + var(--gutter));box-sizing:border-box}
  .h-location-copy h2,.h-viewport .h-location-copy h2{font-size:32px}
  .h-location-copy .h-lead{max-width:34ch}
  .h-map-scene{padding:0}
  .h-location-map{height:min(calc(100dvh - var(--topbar-h) - 56px),calc(100vw - var(--gutter)*2 - 420px - 24px))}
  .h-location-map .mapa-tabs .t-full{display:none}.h-location-map .mapa-tabs .t-short{display:inline}
  .h-location-map .mapa-sat{top:auto;bottom:16px;left:16px;right:auto}
}

/* ---- Áreas táctiles ≥ 44 px sin cambiar el dibujo (2026-10-02, QA) ---- */
@media (pointer:coarse){
  .seg-tabs [role=tab],.mapa-tabs [role=tab],.h-plans__ver button,.mapa-sat button,.h-zoom__btn{position:relative}
  .seg-tabs [role=tab]::after,.mapa-tabs [role=tab]::after,.h-plans__ver button::after,.mapa-sat button::after{content:'';position:absolute;inset:-4px 0}
  .h-zoom__btn::after{content:'';position:absolute;inset:-2px}
  .deck-controls .dot{padding:9px 0}
  /* huellas pequeñas: la pastilla del número también abre la ficha, con un área de toque de 32 px */
  .h-esp-labels .h-esp-chip{pointer-events:auto;cursor:pointer}
  .h-esp-chip::before{content:'';position:absolute;left:50%;top:50%;width:32px;height:32px;transform:translate(-50%,-50%)}
}

/* ---- Legibilidad: nada por debajo de 12 px en la ficha (2026-10-02, QA) ---- */
.h-esp-panel__kicker,.h-esp-panel__maptag,.h-esp-panel__sec h3 small,.h-esp-panel__fine{font-size:12px}

@media (max-width:1279px){ .h-logos__head{gap:48px} .h-logos__head>.h-small{max-width:32ch;text-wrap:balance;line-height:1.6} } /* ceja en 2 líneas frente a las 2 líneas de cada cifra (QA 2026-10-02) */
#site-menu small{font-size:12px} /* números del menú: mínimo 12 px (QA 2026-10-02) */
@media (pointer:coarse){.h-contact-columns a[href^="tel:"],.h-contact-columns a[href^="mailto:"]{position:relative}.h-contact-columns a[href^="tel:"]::after,.h-contact-columns a[href^="mailto:"]::after{content:"";position:absolute;inset:-11px 0}} /* teléfono y correo: área de toque de 44 px */

.h-stats__group{align-content:start} /* las filas no se reparten el alto sobrante: cifras de ambos grupos sobre la misma línea (2026-10-02) */
.h-stats .h-metrics span{padding-top:2px} /* descriptores 4 px más cerca de la línea (Joaquín, 2026-10-02) */

/* ---- Visor de planos a pantalla limpia (socios, 2026-10-02): el bloque mide exactamente 100vw, así al asentarse no asoman el texto anterior ni el verde del cierre; pestañas al ancho del plano, todo centrado ---- */
.h-viewport .h-plans{--stage-h:min(calc(100dvh - var(--topbar-h) - 110px),60vw);width:100vw;box-sizing:border-box;padding:0 var(--gutter);align-items:center}
.h-viewport .h-plans__bar{width:min(100%,calc(var(--stage-h) * 1.5))}
.h-viewport .h-plans__stage{height:var(--stage-h)}

/* ---- Título del visor para PB/PA, arriba a la izquierda del plano; el resumen inferior se quitó (se encimaba con el zoom en pantallas chicas) (2026-10-02) ---- */
.h-plans__title{position:absolute;left:24px;top:20px;z-index:5;display:flex;align-items:baseline;gap:10px;font-size:20px;line-height:1.2;font-weight:var(--fw-medium);color:var(--text);pointer-events:none}
.h-plans__title i{font-style:normal;font-weight:var(--fw-regular,400);color:var(--text-mute)}
.h-plans__title span{font-weight:var(--fw-regular,400);color:var(--text-soft)}
.h-plans__title[hidden]{display:none}