/* ============================================================ Vínculo Urbano — sitio público Identidad corporativa oficial (manual de marca): azul #35638B, gris grafito #5B5B5F, blanco. Amarillo #FFD23F solo como acento. 25-ago-2026: el cliente pidio bajar el amarillo de tono protagonista a detalle ("puede existir pero no como protagonista"). Se paso a azul o blanco todo lo que lo usaba en grande -- boton principal, segunda linea del titular del hero, pastillas de estado, versalitas sobre navy, el "gana dinero" de referidos y los botones del bloque de obra. El amarillo sigue vivo en el detalle fino: pin de preventa del mapa y su leyenda, punto de disponibilidad, hito actual de la linea de tiempo, marcadores de lista, avisos "fresh", iconos del pie y el anillo de foco. Familia única Montserrat (Black display / Medium-Regular texto). Lenguaje visual: dibujo técnico — hairlines azules, retícula, versalitas espaciadas. color-scheme:light fijo. 26-ago-2026: los titulares bajaron de 900 (Black) a 600. El consolidado pide "mantener pesos medios: evitar letras demasiado gruesas o demasiado delgadas", y el propio visor v9.7 del cliente usa 600 como peso dominante, sin pasar de 760. La cara 900 se conserva cargada solo para el logotipo tipográfico de respaldo. ============================================================ */ /* Montserrat self-hosted, subset latin (CSP fontSrc 'self' bloquea Google Fonts). Escala de pesos deliberada y corta, tomada del manual: 400 texto · 500 UI · 600 etiquetas/botones · 900 display (como el wordmark "VINCULO"). */ @font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/montserrat-400.woff2') format('woff2');} @font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/montserrat-500.woff2') format('woff2');} @font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/montserrat-600.woff2') format('woff2');} @font-face{font-family:'Montserrat';font-style:normal;font-weight:900;font-display:swap;src:url('/fonts/montserrat-900.woff2') format('woff2');} /* Fallback con métricas ajustadas a Montserrat: mientras carga, el sistema reserva un alto de línea equivalente → sin reflujo (CLS) al hacer swap. */ @font-face{ font-family:'Montserrat Fallback'; src:local('Arial'),local('Helvetica Neue'),local('Roboto'),local('Segoe UI'); ascent-override:92%;descent-override:24%;line-gap-override:0%;size-adjust:102%; } /* El fondo navy va en el ELEMENTO RAÍZ, no solo en el footer: sin esto el rebote de scroll (rubber-band de iOS) mostraba blanco después del footer y la página parecía no tener cierre. El blanco de las páginas lo pinta . */ html{color-scheme:light;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:100px;background:#1C3A57;} /* Con el visor de fotos abierto no debe correr la página de atrás. */ html.lb-lock,html.lb-lock body{overflow:hidden;} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} :root{ /* ---- paleta corporativa ---- */ --blue:#35638B; /* azul corporativo (manual) */ --blue-700:#2A5273; --blue-800:#22415C; --navy:#1C3A57; /* bookends hero/footer */ --navy-900:#142B41; --blue-050:#EAF1F7; /* tinte claro para fondos suaves */ --blue-100:#D8E5EF; --hair:rgba(53,99,139,.20); /* hairline de dibujo técnico */ --yellow:#FFD23F; /* acento: preventa, subrayados, badges */ /* 17-sep-2026: el cliente revirtio en parte la decision de la ronda 8 y pidio "rescatar el dorado" de su maqueta de responsive ("le da un buen contraste a los tonos azules y blancos"). No es el amarillo puro: es el ocre exacto que trae su captura (muestreado sobre el boton y el titular: #D5AE62). Vive en el HERO y en los detalles de Experiencia; el resto del sitio no se toca. */ --gold:#D5AE62; --gold-600:#C29A4E; /* hover del boton dorado */ --yellow-700:#D9A800; /* solo trazos/bordes: sobre blanco NO pasa AA como texto */ --gold-ink:#8A6A00; /* mismo acento, versión legible como texto (AA sobre blanco) */ --yellow-050:#FFF8E1; --graphite:#5B5B5F; /* gris tipografía del manual */ --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F4F7FA; /* tinte de ritmo entre secciones */ --ink:#1F2C3A; --ink-2:#5B5B5F; --ink-3:#69717A; /* gris de apoyo: AA (≥4.5) sobre blanco y sobre --surface-2 */ --line:#E3E9F0; --line-2:#EDF1F6; --green:#2E7D5B; --wa:#25D366; /* verde WhatsApp estándar */ /* Alias heredados: vistas/CSS de otros módulos (postventa, mi-cuenta, avance) siguen usando los nombres "teal" y "terra". Se remapean a la paleta corporativa; el ramp "terra" queda SOLO como color de error/alerta. ⚠️ No escribir la secuencia asterisco+barra dentro de un comentario CSS: lo cierra antes de tiempo y el parser se come las declaraciones que siguen (así se perdía --teal y .pv-badge.s-en_revision quedaba sin fondo). */ --teal:var(--blue); --teal-700:var(--blue-700); --teal-800:var(--blue-800); --teal-050:var(--blue-050); --teal-deep:var(--navy); --terra:#C0503A; --terra-700:#A33F2B; --terra-050:#FBEDE9; --r:12px; --r-lg:16px; --r-sm:8px; --btn-r:8px; --pill:999px; --sh-sm:0 1px 2px rgba(28,58,87,.05),0 1px 3px rgba(28,58,87,.04); --sh:0 4px 14px rgba(28,58,87,.07),0 1px 3px rgba(28,58,87,.05); --sh-lg:0 18px 44px rgba(28,58,87,.14),0 4px 12px rgba(28,58,87,.06); --maxw:1200px; /* ---- ritmo vertical (17-sep-2026) ---- Barrido de espaciado: el aire entre bloques se define UNA vez aca y lo leen .sec, .page-hero, .proj-main, .rc-sec y el pie. Antes cada regla traia su numero y el iPad (820-1024) caia en el escalon de escritorio, sin paso intermedio. --sec-y es el aire POR LADO: escritorio 76, tableta 68, movil 52. --sec-head-gap es la separacion cabecera -> rejilla. Para cambiar el ritmo de todo el sitio se tocan estas dos variables, no las secciones. */ --sec-y:76px; --sec-head-gap:34px; } /* Tableta (iPad vertical 820 y horizontal 1024): escalon propio. */ @media(max-width:1024px){ :root{--sec-y:68px;--sec-head-gap:30px;} } @media(max-width:680px){ :root{--sec-y:52px;--sec-head-gap:26px;} } body{ font-family:'Montserrat','Montserrat Fallback',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg);color:var(--ink);line-height:1.6;font-weight:400; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;} :focus-visible{outline:2.5px solid var(--blue);outline-offset:2px;border-radius:3px;} .num{font-variant-numeric:tabular-nums;} /* 17-sep-2026: `padding:0 28px` en atajo tambien fijaba padding-block:0 y le borraba el aire vertical a todo lo que ademas es .wrap (`.proj-main` perdia sus 40px de arriba en celular, donde `.wrap{padding:0 20px}` de la media query gana por orden de fuente). Con padding-inline solo se toca el gutter lateral. */ .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:28px;} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} /* Versalita espaciada: eco del "URBANO / Espacios para la vida" del wordmark. Se usa en eyebrows, leyendas del plano y pies de foto. */ .eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink,var(--blue));} h1,h2,h3,h4,h5{font-weight:600;letter-spacing:-.025em;line-height:1.08;} /* ---------- BOTONES ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:14px; letter-spacing:.005em;border-radius:var(--btn-r);white-space:nowrap;min-height:46px;padding:12px 22px; transition:transform .12s ease,background .16s ease,box-shadow .16s ease,border-color .16s,color .16s;} .btn:active{transform:translateY(1px);} .btn-primary,.btn-teal,.btn-terra{background:var(--blue);color:#fff;box-shadow:0 2px 8px rgba(53,99,139,.24);} .btn-primary:hover,.btn-teal:hover,.btn-terra:hover{background:var(--blue-700);} .btn-accent{background:var(--blue);color:#fff;box-shadow:0 2px 10px rgba(53,99,139,.34);} .btn-accent:hover{background:var(--blue-700);} .btn-accent:hover{background:#FFC814;} /* Boton dorado del hero (17-sep-2026). Texto navy sobre #D5AE62 = 6,9:1 (AA para cualquier tamano). Se usa SOLO en el hero del inicio: `.btn-accent` sigue azul en la ficha de proyecto y en /nosotros, que el cliente no pidio cambiar. */ .btn-gold{background:var(--gold);color:var(--navy-900);box-shadow:0 2px 12px rgba(19,40,60,.28);} .btn-gold:hover{background:var(--gold-600);color:var(--navy-900);} .btn-gold svg{width:17px;height:17px;flex:none;} .btn-onnavy svg{width:17px;height:17px;flex:none;} /* Igual que `.btn-onnavy`: el fantasma sale del CONTEXTO. Sobre navy se aclara solo, y dentro de una tarjeta blanca de una sección navy se queda oscuro (antes el parche `.sec-navy .btn-ghost` lo pintaba blanco sobre blanco). */ .btn-ghost{border:1px solid var(--sec-ghost-line,var(--line));background:var(--sec-ghost-bg,var(--surface));color:var(--sec-ghost-ink,var(--ink));} .btn-ghost:hover{border-color:var(--sec-ghost-line-h,var(--blue));color:var(--sec-ghost-ink-h,var(--blue-700));background:var(--sec-ghost-bg-h,var(--surface));} /* 19-sep-2026: `.btn-onnavy` ya no es "blanco siempre" sino "el fantasma del contexto": sobre una seccion clara se pinta con la tinta y el borde oscuros. Sin esto, al pasar referidos o el cierre de Nosotros a light/alt quedaba un boton blanco sobre blanco. Los fallbacks son los valores de antes, para el hero y el pie, que no son `.sec`. */ .btn-onnavy{border:1px solid var(--sec-ghost-line,rgba(255,255,255,.34)); background:var(--sec-ghost-bg,transparent);color:var(--sec-ghost-ink,#fff);} .btn-onnavy:hover{border-color:var(--sec-ghost-line-h,#fff); background:var(--sec-ghost-bg-h,rgba(255,255,255,.1));color:var(--sec-ghost-ink-h,#fff);} .btn-lg{font-size:15px;padding:15px 26px;min-height:52px;} .btn-block{width:100%;} .wa svg{width:18px;height:18px;fill:currentColor;flex:none;} /* ---------- NAV ---------- */ .nav{position:fixed;top:16px;left:0;right:0;z-index:100;padding:0 16px;} .nav-in{max-width:var(--maxw);margin:0 auto;height:62px;padding:0 12px 0 18px;display:flex;align-items:center;gap:20px; background:rgba(255,255,255,.9);backdrop-filter:saturate(1.4) blur(14px); border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);} .brand{display:flex;align-items:center;flex:none;} /* 17-sep-2026: "el tamano del logo en el menu se ve muy chiquito, no se ve claramente que es Vinculo Urbano". Sube de 26/34 a 33/44 px de alto (el archivo es 350x100, o sea 116/154 px de ancho). La barra sigue en 62 px: a 44 quedan 9 px de aire arriba y abajo, y el hamburguesa (46 px) manda igual en celular. */ .brand img{height:33px;width:auto;} @media(min-width:961px){.brand img{height:44px;}} .nav-links{display:flex;gap:22px;margin-left:8px;font-size:14px;font-weight:500;color:var(--graphite);} .nav-links a{position:relative;padding:5px 0;} .nav-links a:hover{color:var(--blue);} .nav-links a[aria-current="page"]{color:var(--ink);font-weight:600;} .nav-links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2.5px;background:var(--blue);} .nav-right{margin-left:auto;display:flex;align-items:center;gap:10px;} .nav-tel{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink); white-space:nowrap;padding:10px 16px;border:1px solid var(--line);border-radius:var(--btn-r); background:var(--surface);transition:border-color .16s ease,box-shadow .16s ease;} .nav-tel svg{width:16px;height:16px;color:var(--blue);flex:none;} .nav-tel:hover{border-color:var(--blue);box-shadow:0 2px 8px rgba(53,99,139,.14);} .burger{display:none;width:46px;height:46px;border:1px solid var(--line);border-radius:var(--btn-r);background:var(--surface);align-items:center;justify-content:center;flex:none;} .burger svg{width:20px;height:20px;stroke:var(--ink);} .mobile-menu{display:none;position:fixed;top:86px;left:16px;right:16px;z-index:99;background:var(--surface); border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-lg);padding:10px;} .mobile-menu.open{display:block;} /* :not(.btn) — si no, este selector le pisa el color al botón (más específico que .btn-primary). */ .mobile-menu a:not(.btn){display:block;padding:13px 14px;border-radius:var(--r-sm);font-weight:600;font-size:15.5px;color:var(--ink);} .mobile-menu a:not(.btn):hover{background:var(--surface-2);} .mobile-menu .mm-sep{height:1px;background:var(--line);margin:8px 6px;} .mobile-menu .mm-cta{margin-top:6px;} /* a.mm-tel para empatar la especificidad de `.mobile-menu a:not(.btn)` (que si no, pisa el color). */ .mobile-menu a.mm-tel{display:flex;align-items:center;gap:9px;color:var(--blue-700);} .mobile-menu a.mm-tel svg{width:17px;height:17px;color:var(--blue);flex:none;} /* ---------- HERO ---------- 17-sep-2026: aqui vivia el hero PARTIDO de antes de la ronda 8, ya muerto: cada una de sus reglas (.hero, .hero::before, .hero-in, .hero h1, .hero-sub, .hero-actions) esta redefinida mas abajo por el "hero a sangre" (ver la seccion HERO A SANGRE). Se borra entero porque venia PARTIDO: tres bloques de declaraciones habian perdido su selector (la pastilla del hero, su gemela y la mascara inferior). Un bloque asi no solo se ignora: el parser sigue buscando un `{` mas alla del `}` huerfano y se come la REGLA SIGUIENTE. La victima era `.sec{padding-block:76px}` -> todas las secciones del sitio computaban padding 0. Misma familia de trampa que el comentario CSS con asterisco+barra: no dejar declaraciones sueltas fuera de una regla. */ /* ---------- SECCIÓN ---------- */ /* 17-sep-2026: el ritmo sale de --sec-y (ver :root). Un solo numero por rango. */ .sec{padding-block:var(--sec-y);} .sec-alt{background:var(--surface-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);} .sec-navy{background:var(--navy);color:#fff;} /* Fondo "claro" explicito: el de fabrica. Existe para que el panel pueda devolver una seccion a blanco escribiendo una clase, sin quitar ninguna. */ .sec-light{background:var(--bg);} /* ---------- CONTEXTO DE COLOR DE LA SECCION (19-sep-2026) ---------- REGLA DE FONDO: el color del TEXTO, de los BORDES, de las MARCAS y de los BOTONES sale del token `bg` de la seccion, NUNCA de la seccion. Antes cada banda que nacio navy (referidos, pilares, cierre) llevaba el blanco en duro y al pasarla a claro desde el panel el texto desaparecia sobre blanco. Los valores de `.sec-navy` son EXACTAMENTE los que estaban en duro, por eso el render de hoy no se mueve ni un pixel; y cada uso lleva fallback al valor viejo para lo que vive FUERA de una `.sec` (el hero y el pie, siempre navy). --sec-ink titulos y texto fuerte --sec-ink-2 parrafos --sec-ink-3 texto de apoyo / pies --sec-line borde visible --sec-line-soft hairline entre filas --sec-mark del titular --sec-detail numeral/icono de detalle (el amarillo sobre navy) --sec-detail-line su aro --sec-ghost-* boton fantasma (.btn-onnavy / .btn-ghost) */ /* Lo abren las secciones claras Y, dentro de una navy, cualquier componente que pinte su PROPIA superficie clara (tarjeta, formulario, barra de acciones del mapa, aviso): lo que manda es el fondo que el texto tiene debajo. 🪤 `.sec` a secas TAMBIÉN va acá: las páginas que no pasan por el panel (/vinculate, /postventa) escriben `class="sec"` sin `sec-light`, y sin esta entrada el fallback oscuro de cada var las pintaba de blanco sobre blanco. `.sec-navy` se declara DESPUÉS y por eso gana en un `class="sec sec-navy"`. */ .sec,.sec-light,.sec-alt,.card,.form,.mv-card,.ig-card,.map-actions,.flash{ --sec-ink:var(--ink); --sec-ink-2:var(--ink-2); --sec-ink-3:var(--ink-3); --sec-line:var(--line); --sec-line-soft:var(--hair); --sec-mark:var(--blue-700); --sec-detail:var(--gold-ink); --sec-detail-line:var(--hair); --sec-ghost-ink:var(--ink); --sec-ghost-line:var(--line); --sec-ghost-bg:var(--surface); --sec-ghost-ink-h:var(--blue-700); --sec-ghost-line-h:var(--blue); --sec-ghost-bg-h:var(--surface); --sec-link:var(--blue-700); --sec-accent:var(--accent-ink,var(--blue)); } /* …y además vuelven a declarar su TINTA: `.sec-navy{color:#fff}` se heredaba hacia adentro y dejaba el nombre del proyecto blanco sobre la tarjeta blanca. */ .card,.form,.mv-card,.ig-card,.map-actions,.flash{color:var(--ink);} .sec-navy{ --sec-ink:#fff; --sec-ink-2:rgba(255,255,255,.8); --sec-ink-3:rgba(255,255,255,.68); --sec-line:rgba(255,255,255,.22); --sec-line-soft:rgba(255,255,255,.16); --sec-mark:rgba(255,255,255,.82); --sec-detail:var(--yellow); --sec-detail-line:rgba(255,210,63,.45); --sec-ghost-ink:#fff; --sec-ghost-line:rgba(255,255,255,.34); --sec-ghost-bg:transparent; --sec-ghost-ink-h:#fff; --sec-ghost-line-h:#fff; --sec-ghost-bg-h:rgba(255,255,255,.1); --sec-link:var(--accent-onnavy,var(--blue-100)); --sec-accent:var(--accent-onnavy,var(--blue-100)); } /* ---------- ACENTO POR SECCION (editable desde el panel) ---------- Vocabulario cerrado: `bg` = light|alt|navy y `accent` = navy|gold. El acento NO se aplica con selectores nuevos (eso pisaria reglas de componente): se publica en variables y las reglas existentes las leen con fallback, asi que una seccion sin clase de acento se pinta exactamente como antes. --accent color pleno (lineas, aros, iconos) --accent-ink version legible como TEXTO sobre blanco (AA) --accent-onnavy la misma idea sobre fondo navy --accent-btn relleno del boton primario cuando la seccion es navy */ .accent-navy{--accent:var(--blue);--accent-ink:var(--blue);--accent-onnavy:var(--blue-100);--accent-btn:#fff;} .accent-gold{--accent:var(--gold);--accent-ink:var(--gold-ink);--accent-onnavy:var(--gold);--accent-btn:var(--gold);} .sec-head{margin-bottom:var(--sec-head-gap);max-width:66ch;} .sec-head h2{font-size:clamp(26px,3.2vw,38px);margin-top:10px;} .sec-head p:not(.eyebrow){margin-top:12px;color:var(--ink-2);font-size:15.5px;} .sec-navy .sec-head p:not(.eyebrow){color:rgba(255,255,255,.76);} .sec-navy .eyebrow{color:var(--accent-onnavy,var(--blue-100));} /* Linea de WhatsApp bajo la intro del formulario de contacto (17-sep-2026). */ .sec-head .sec-wa{margin-top:10px;font-size:15.5px;color:var(--sec-ink-2,var(--ink-2));} .sec-head .sec-wa a{color:var(--sec-link,var(--blue-700));font-weight:600;text-decoration:underline;text-underline-offset:3px;} .sec-head .sec-wa a:hover{color:var(--sec-link,var(--blue-800));} /* regla-hairline con tope amarillo: divisor recurrente del sistema */ .rule{height:1px;background:var(--hair);position:relative;margin:0 0 26px;} .rule::before{content:"";position:absolute;left:0;top:0;width:52px;height:3px;margin-top:-1px;background:var(--yellow);} /* ---------- TABS ---------- */ .tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px;} .tab{font-size:13px;font-weight:600;padding:10px 16px;border-radius:var(--btn-r);border:1px solid var(--line); background:var(--surface);color:var(--ink-2);min-height:42px;transition:.15s;} .tab:hover{border-color:var(--blue);color:var(--blue);} .tab.active{background:var(--blue);border-color:var(--blue);color:#fff;} .tab .n{font-variant-numeric:tabular-nums;opacity:.7;margin-left:2px;} /* ---------- BLOQUE PROYECTO EN CONSTRUCCIÓN ---------- */ .build{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;} .build-media{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/12;background:var(--surface-2);box-shadow:var(--sh);} .build-media img{width:100%;height:100%;object-fit:cover;} .build h2{font-size:clamp(25px,3vw,34px);margin-top:12px;} .build-loc{margin-top:12px;font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite);} .build p.build-copy{margin-top:16px;font-size:15.5px;color:var(--ink-2);max-width:52ch;} .avail{display:inline-flex;align-items:center;gap:10px;margin-top:18px;background:var(--yellow-050); border:1px solid #F2DE9B;color:#6B5200;font-size:13.5px;font-weight:600;padding:9px 14px;border-radius:var(--btn-r);} .avail .dot{width:8px;height:8px;border-radius:50%;background:var(--yellow-700);flex:none;} .build-facts{margin-top:22px;display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--hair);} .build-facts .bf{padding:14px 26px 0 0;margin-right:26px;border-right:1px solid var(--hair);} .build-facts .bf:last-child{border-right:none;margin-right:0;padding-right:0;} .build-facts .bf-k{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);} .build-facts .bf-v{font-size:17px;font-weight:600;margin-top:4px;} .build-cta{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap;} /* ---------- ENTREGADOS (galería visual, sin specs) ---------- */ .done-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;} .done{display:block;} /* Las fotos de entregados van de 0,75 a 1,50: con caja 4/5 las apaisadas perdían 47%. */ .done-media{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:var(--r);background:var(--surface-2);} .done-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1);} .done:hover .done-media img{transform:scale(1.045);} .done-media::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(28,58,87,.07);border-radius:var(--r);} .done-name{margin-top:14px;font-size:17px;font-weight:600;letter-spacing:-.02em;} .done-meta{margin-top:3px;font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite);} .done-note{margin-top:30px;font-size:13px;color:var(--ink-3);} /* ---------- MAPA (sección firma) ---------- */ .map-sec{background:var(--blue-050);border-top:1px solid var(--line);border-bottom:1px solid var(--line);} .map-layout{display:grid;grid-template-columns:minmax(0,540px) minmax(0,1fr);gap:56px;align-items:start;} .plano{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); padding:20px 20px 14px;box-shadow:var(--sh-sm);} .plano svg{width:100%;height:auto;display:block;} .plano-foot{margin-top:10px;padding-top:12px;border-top:1px solid var(--hair);display:flex;justify-content:space-between; align-items:baseline;gap:12px;font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);} /* trazado del plano: hairlines finas, principales más marcadas */ .st{fill:none;stroke:#AFC3D5;stroke-width:1;} .st-min{stroke:#D5E1EB;stroke-width:.8;} .st-major{stroke:#7E99B1;stroke-width:1.9;} .st-labels{paint-order:stroke;stroke:#fff;stroke-width:3.5px;stroke-linejoin:round;} .st-label{font-size:11px;font-weight:600;letter-spacing:.1em;fill:#93A5B6;text-transform:uppercase;} .st-label-major{fill:#4F7391;} .st-north{fill:#8FA8BE;stroke:#8FA8BE;stroke-width:1.2;} .st-north text{font-size:12px;font-weight:600;letter-spacing:.04em;fill:#5B7994;stroke:none;text-anchor:middle;} .pin{cursor:pointer;} .pin-halo{fill:var(--blue);opacity:0;transition:opacity .2s;} .pin-dot{stroke:#fff;stroke-width:2.5;} .pin-lbl{font-size:12.5px;font-weight:600;letter-spacing:-.01em;fill:var(--navy);} .pin[data-status="preventa"] .pin-dot{fill:var(--yellow);stroke:var(--navy);stroke-width:2;} .pin[data-status="construccion"] .pin-dot{fill:var(--blue);} .pin[data-status="entregado"] .pin-dot{fill:var(--graphite);} .pin:hover .pin-halo,.pin:focus-visible .pin-halo,.pin.is-active .pin-halo{opacity:.16;} .pin:focus-visible{outline:none;} .pin:focus-visible .pin-dot{stroke:var(--navy);stroke-width:3;} .pin.is-active .pin-dot{transform:scale(1.18);transform-origin:center;transform-box:fill-box;} /* entrada con stagger al llegar al viewport. `is-armed` lo pone el JS: sin JS los pines quedan visibles desde el primer render (nunca invisibles). */ .plano.is-armed .pin{opacity:0;transform:translateY(-10px);} .plano.is-armed.is-in .pin{animation:pinDrop .5s cubic-bezier(.2,.9,.3,1) forwards;animation-delay:var(--d,0ms);} @keyframes pinDrop{to{opacity:1;transform:translateY(0);}} /* pulso solo en preventa (transform, no el atributo r: soporte más amplio) */ .pin-pulse{fill:none;stroke:var(--yellow-700);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center;} .plano.is-in .pin[data-status="preventa"] .pin-pulse{animation:pinPulse 2.8s ease-out 1s infinite;} @keyframes pinPulse{0%{transform:scale(.6);opacity:.7;}100%{transform:scale(2.6);opacity:0;}} /* panel lateral: leyenda + mini-card */ .map-side{position:sticky;top:100px;} .legend{display:flex;flex-direction:column;gap:11px;margin:20px 0 24px;} .legend .lg{display:flex;align-items:center;gap:11px;font-size:13.5px;font-weight:500;color:var(--ink-2);} .legend .sw{width:13px;height:13px;border-radius:50%;flex:none;box-shadow:0 0 0 2px #fff;} .legend .sw.preventa{background:var(--yellow);box-shadow:0 0 0 1.5px var(--navy);} .legend .sw.construccion{background:var(--blue);} .legend .sw.entregado{background:var(--graphite);} .legend .lg b{color:var(--ink);font-weight:600;} .mini{display:none;max-width:460px;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);} .mini.is-active{display:block;} .mini-media{aspect-ratio:16/10;background:var(--surface-2);} .mini-media img{width:100%;height:100%;object-fit:cover;} .mini-body{padding:16px 18px 18px;} .mini-status{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;} .mini-status.preventa{color:var(--gold-ink);} .mini-status.construccion{color:var(--blue);} .mini-status.entregado{color:var(--graphite);} .mini-name{font-size:19px;font-weight:600;letter-spacing:-.02em;margin-top:5px;} .mini-loc{font-size:13px;color:var(--ink-2);margin-top:3px;} .mini-go{margin-top:14px;font-size:13.5px;font-weight:600;color:var(--blue);display:inline-flex;align-items:center;gap:7px;} .mini-go svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .18s;} .mini:hover .mini-go svg{transform:translateX(3px);} /* --ink-2, no --ink-3: esta nota va sobre el fondo tintado de la sección del plano, donde el gris de apoyo se queda justo por debajo de AA. */ .map-hint{font-size:12.5px;color:var(--ink-2);margin-top:16px;} /* ---------- INSTAGRAM ---------- */ .ig-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:26px;} .ig-accounts{display:flex;gap:10px;flex-wrap:wrap;} .ig-btn{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;padding:12px 18px; border:1px solid var(--line);border-radius:var(--btn-r);background:var(--surface);transition:.16s;min-height:48px;} .ig-btn:hover{border-color:var(--blue);color:var(--blue-700);box-shadow:var(--sh-sm);} .ig-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;flex:none;} .ig-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;} .ig-tile{position:relative;aspect-ratio:1;overflow:hidden;border-radius:var(--r-sm);background:var(--surface-2);display:block;} .ig-tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,opacity .25s;} .ig-tile:hover img{transform:scale(1.06);opacity:.88;} .ig-tile::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(28,58,87,.07);border-radius:var(--r-sm);} .ig-row{margin-bottom:26px;} .ig-row:last-child{margin-bottom:0;} .ig-row-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:11.5px;font-weight:600; letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);} .ig-row-head a{color:var(--blue);} /* Los dos botones siempre visibles; el grid de cada cuenta cuelga debajo del suyo cuando hay publicaciones cargadas en el panel (decisión del cliente 1-ago). */ .ig-cta{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;} .ig-col{display:flex;flex-direction:column;gap:12px;min-width:0;} .ig-col .ig-grid{grid-template-columns:repeat(3,1fr);gap:10px;} .ig-card{display:flex;align-items:center;gap:16px;padding:22px 24px;border:1px solid var(--line);border-radius:var(--r); background:var(--surface);box-shadow:var(--sh-sm);transition:.18s;} .ig-card:hover{border-color:var(--blue);box-shadow:var(--sh);transform:translateY(-2px);} .ig-card .ic{width:46px;height:46px;border-radius:var(--r-sm);background:var(--blue-050);display:flex;align-items:center;justify-content:center;flex:none;} .ig-card .ic svg{width:23px;height:23px;fill:none;stroke:var(--blue);stroke-width:1.7;} .ig-card .handle{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em;} .ig-card .what{display:block;font-size:13px;color:var(--ink-2);margin-top:2px;} /* ---------- PLAN DE REFERIDOS (banda comercial) ---------- */ .refer{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center;} .refer h2{font-size:clamp(27px,3.2vw,40px);margin-top:12px;} /* Las marcas, bordes y tintas de esta banda salen del contexto (--sec-*): nacio navy y el panel la puede pasar a claro. Fallback = el valor navy de antes. */ .refer h2 mark{background:none;color:var(--sec-mark,rgba(255,255,255,.82));} /* :not(.eyebrow) evita que este bloque pise el tamaño/color de la versalita */ .refer p:not(.eyebrow){margin-top:18px;font-size:16px;max-width:50ch;color:var(--sec-ink-2,rgba(255,255,255,.8));} .refer-actions{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap;} .refer-steps{display:flex;flex-direction:column;gap:2px;} .refer-steps .rs{display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:start;padding:20px 0;border-top:1px solid var(--sec-line-soft,rgba(255,255,255,.16));} .refer-steps .rs:last-child{border-bottom:1px solid var(--sec-line-soft,rgba(255,255,255,.16));} .refer-steps .rs-n{font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--sec-detail,var(--yellow));padding-top:3px;} .refer-steps .rs-t{font-size:15px;font-weight:600;color:var(--sec-ink,#fff);} .refer-steps .rs-d{font-size:13.5px;color:var(--sec-ink-3,rgba(255,255,255,.68));margin-top:4px;line-height:1.55;} /* ---------- CARDS DE PROYECTO (listado /proyectos) ---------- */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden; box-shadow:var(--sh-sm);transition:transform .18s ease,box-shadow .18s ease,border-color .18s;display:flex;flex-direction:column;} .card:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:var(--blue-100);} .card.hidden{display:none;} /* Las portadas van de 0,75 a 1,34: con caja 4/3 las verticales perdían 44%. */ .card-media{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--surface-2);} .card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;} .card:hover .card-media img{transform:scale(1.04);} .badge{position:absolute;top:12px;left:12px;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; padding:7px 12px;border-radius:var(--r-sm);color:#fff;display:inline-flex;align-items:center;gap:6px;} .badge.preventa{background:var(--blue-050);color:var(--blue-800);box-shadow:inset 0 0 0 1px var(--hair);} .badge.construccion{background:var(--blue);} .badge.entregado{background:var(--graphite);} /* «Próximamente»: tinte azul claro de la paleta. NO el grafito de «Entregado» — son estados opuestos (lo que viene vs. lo que ya se hizo) y confundirlos hace que un proyecto anunciado se lea como uno terminado. */ .badge.proximamente{background:var(--blue-100);color:var(--navy-900);} .card-body{padding:18px;display:flex;flex-direction:column;gap:12px;flex:1;} .card .price{font-size:19px;font-weight:600;letter-spacing:-.02em;color:var(--ink);} .card .price small{font-size:11.5px;font-weight:600;color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase;} .card .price.consultar{color:var(--blue-700);font-size:16px;font-weight:600;} /* "Se de los primeros en conocer X" (proximo lanzamiento): dos lineas, no una cifra. */ .card .price.invita{color:var(--blue-700);font-size:15.5px;font-weight:600;line-height:1.35;letter-spacing:-.01em;} .card-name{font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.2;} .card-loc{font-size:12.5px;color:var(--ink-2);display:flex;align-items:flex-start;gap:6px;margin-top:4px;} .card-loc svg{width:14px;height:14px;stroke:var(--blue);fill:none;stroke-width:1.7;flex:none;margin-top:2px;} .stats{display:flex;border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden;background:var(--surface-2);} .stat{flex:1;padding:10px 6px;text-align:center;border-right:1px solid var(--line-2);} .stat:last-child{border-right:none;} .stat .v{font-size:14px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1;} .stat .k{font-size:10px;color:var(--ink-3);font-weight:500;margin-top:3px;letter-spacing:.1em;text-transform:uppercase;} .mini-prog{margin-top:2px;} .mini-prog .top{display:flex;justify-content:space-between;align-items:baseline;font-size:11.5px;margin-bottom:6px;} .mini-prog .stage{font-weight:600;color:var(--ink-2);letter-spacing:.08em;text-transform:uppercase;} .mini-prog .pct{font-weight:600;color:var(--blue);font-variant-numeric:tabular-nums;} .bar{height:6px;border-radius:var(--pill);background:var(--line);overflow:hidden;} .bar>span{display:block;height:100%;border-radius:var(--pill);background:var(--blue);} .card-cta{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px;padding-top:2px;} .card-cta .btn{flex:1 1 auto;min-width:0;font-size:13px;padding:10px 12px;min-height:46px;} /* ---------- CONTACTO / FORM ---------- */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;} .contact-info h3{font-size:21px;} .contact-info .ci-list{margin-top:22px;display:flex;flex-direction:column;gap:18px;} .contact-info .ci-item{display:flex;gap:14px;align-items:flex-start;font-size:14.5px;} .contact-info .ci-item .ci-ic{width:42px;height:42px;border-radius:var(--r-sm);background:var(--blue-050);display:flex;align-items:center;justify-content:center;flex:none;} .contact-info .ci-item svg{width:19px;height:19px;stroke:var(--blue);fill:none;stroke-width:1.7;} /* Del CONTEXTO: estos renglones van directos sobre el fondo de la sección, así que al pasar Contacto a navy tenían que aclararse (gris sobre navy = 2,4:1). */ .contact-info .ci-item .k{font-size:10.5px;color:var(--sec-ink-3,var(--ink-3));font-weight:600;letter-spacing:.16em;text-transform:uppercase;} .contact-info .ci-item .v{font-weight:500;color:var(--sec-ink,var(--ink));margin-top:3px;} .contact-info .ci-item .v a{color:var(--sec-link,var(--blue-700));font-weight:600;} .form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:26px;} .form .field{margin-bottom:15px;} .form label{display:block;font-size:12px;font-weight:600;color:var(--graphite);margin-bottom:7px;letter-spacing:.06em;text-transform:uppercase;} .form input,.form textarea,.form select{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm); padding:13px 14px;font-size:16px;font-family:inherit;color:var(--ink);min-height:48px;transition:border-color .15s,box-shadow .15s;} .form textarea{min-height:112px;resize:vertical;} .form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-050);} .form .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;} .form .check{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--ink-2);line-height:1.5;margin:6px 0 16px;} .form .check input{width:18px;height:18px;min-height:0;margin-top:1px;flex:none;accent-color:var(--blue);} .form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;} .form .btn{width:100%;} .form-note{font-size:12px;color:var(--ink-3);margin-top:14px;text-align:center;} .flash{background:var(--blue-050);border:1px solid var(--blue-100);color:var(--blue-800);border-radius:var(--r-sm); padding:15px 16px;font-size:14px;font-weight:600;margin-bottom:22px;display:flex;gap:11px;align-items:center;} .flash svg{width:20px;height:20px;stroke:var(--blue);fill:none;stroke-width:2;flex:none;} /* ---------- PÁGINA: FICHA DE PROYECTO ---------- */ /* Sin miga de pan visible: el H1 abre la página. El padding es todo el aire que había (crumbs + su margen), así que el título arranca donde arrancaba la línea de ruta y no queda ni pegado al menú fijo (termina en 78px) ni flotando. */ .proj-hero{padding:138px 0 0;} /* Tercer nivel (/proyectos//avance): el enlace de volver ocupa la primera línea, así que el bloque sube lo que mide ese enlace y el H1 abre casi a la misma altura que en las fichas (≈148 vs 138) — un solo ritmo para todas las páginas de proyecto en vez de un título 22px más abajo. */ .proj-hero.with-back{padding-top:106px;} .back-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600; color:var(--ink-2);transition:color .18s ease;} .back-link svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2; stroke-linecap:round;stroke-linejoin:round;flex:none;transition:transform .18s ease;} .back-link:hover{color:var(--blue);} .back-link:hover svg{transform:translateX(-2px);} .proj-title{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-top:16px;} /* Sin la línea de ruta encima, el margen que la separaba sobra. */ .proj-title:first-child{margin-top:0;} .proj-title h1{font-size:clamp(28px,3.6vw,44px);} .proj-title .p-loc{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite); display:flex;align-items:center;gap:7px;margin-top:9px;} .proj-title .p-loc svg{width:15px;height:15px;stroke:var(--blue);fill:none;stroke-width:1.7;flex:none;} .badge.static{position:static;} .gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:10px;border-radius:var(--r-lg);overflow:hidden;margin-top:44px;} .gallery a{position:relative;overflow:hidden;background:var(--surface-2);display:block;} .gallery a img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;} .gallery a:hover img{transform:scale(1.05);} /* aspect-ratio explícito = el grid reserva su alto ANTES de que carguen las imágenes. Sin esto la galería era el único origen del CLS de la ficha (0,27): el alto lo fijaba la primera imagen al llegar. Los valores son los que ya renderizaba, así que no cambia el diseño. */ .gallery .g-main{grid-row:1/3;grid-column:1/2;aspect-ratio:27/32;} .gallery .g-main img{min-height:100%;} .gallery[data-thumbs="1"] .g-thumb{grid-column:2/4;grid-row:1/3;} .gallery[data-thumbs="2"] .g-thumb{grid-column:2/4;} .gallery[data-thumbs="3"] .g-thumb:nth-child(4){grid-column:2/4;} .gallery[data-thumbs="0"]{grid-template-columns:1fr;grid-template-rows:auto;} .gallery[data-thumbs="0"] .g-main{grid-row:auto;grid-column:auto;aspect-ratio:16/9;} .g-more{position:absolute;inset:0;background:rgba(28,58,87,.58);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13.5px;gap:8px;letter-spacing:.04em;text-align:center;padding:8px;line-height:1.3;} .g-more svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;flex:none;} .gallery a:hover .g-more{background:rgba(28,58,87,.7);} /* galería completa (fichas de proyectos entregados: solo fotos) */ .photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px;} .photo-grid a{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-sm);background:var(--surface-2);} .photo-grid img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;} .photo-grid a:hover img{transform:scale(1.04);} /* 17-sep-2026: el cuerpo de la ficha arrancaba a 40px de la galeria en escritorio y a 0 en celular (lo borraba el atajo de .wrap). Ahora entra en el mismo ritmo. :last-child = fichas sin seccion de contacto detras (144, "proximo lanzamiento"): sin esto el ultimo parrafo quedaba pegado al pie. */ .proj-main{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;align-items:start;padding-top:var(--sec-y);} .proj-main:last-child{padding-bottom:var(--sec-y);} .proj-main.single{grid-template-columns:minmax(0,760px);} .proj-body>section{margin-bottom:44px;} .proj-body h2{font-size:23px;margin-bottom:16px;} /* Bajada corta bajo un h2 de la ficha (ubicación, tour): mismo gris del cuerpo. */ .sec-lead{font-size:14.5px;color:var(--ink-2);margin:-6px 0 16px;line-height:1.6;} .sec-lead strong{color:var(--ink);font-weight:600;} .prose{font-size:15.5px;color:var(--ink-2);line-height:1.75;} .prose p{margin-bottom:12px;} .prose ul{margin:0 0 12px 20px;} .prose li{margin-bottom:6px;} .prose strong{color:var(--ink);font-weight:600;} .proj-panel{position:sticky;top:100px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:24px;} .proj-panel .pp-price{font-size:27px;font-weight:600;letter-spacing:-.025em;} .proj-panel .pp-price.consultar{font-size:20px;color:var(--blue-700);font-weight:600;} .proj-panel .pp-price small{font-size:11.5px;font-weight:600;color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase;} .proj-panel .pp-smmlv{font-size:13px;color:var(--ink-2);margin-top:5px;} .pp-facts{margin-top:18px;padding-top:18px;border-top:1px solid var(--hair);display:flex;flex-direction:column;gap:11px;} .pp-fact{display:flex;justify-content:space-between;font-size:13.5px;gap:10px;} .pp-fact .k{color:var(--ink-2);} .pp-fact .v{font-weight:600;text-align:right;} /* Disponibilidad: dato que se mueve, editable en el panel. Solo en proyectos activos. */ .pp-fact .pp-avail{font-weight:600;color:var(--blue-700);white-space:nowrap;} .pp-cta{margin-top:20px;display:flex;flex-direction:column;gap:10px;} .pp-cta .btn{width:100%;white-space:normal;} .pp-trust{margin-top:16px;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2);justify-content:center;text-align:center;} .pp-trust svg{width:14px;height:14px;stroke:var(--green);fill:none;stroke-width:2;flex:none;} .amen{display:flex;flex-wrap:wrap;gap:9px;} .amen span{font-size:13.5px;font-weight:500;color:var(--ink);background:var(--surface-2);border:1px solid var(--line-2); padding:9px 15px;border-radius:var(--r-sm);} /* 200px (no 220) para que en la columna de 680px del escritorio entren 3 tarjetas: con 15 tipologías, 2 columnas alargaban la ficha ~1/3 sin necesidad. */ .typo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;} .typo{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--surface);} .typo .t-plan{aspect-ratio:4/3;background:var(--surface-2);} .typo .t-plan img{width:100%;height:100%;object-fit:contain;} .typo .t-body{padding:15px 16px 17px;} .typo .t-name{font-size:15px;font-weight:600;letter-spacing:-.01em;} .typo .t-area{font-size:13.5px;color:var(--blue-700);font-weight:600;margin-top:3px;font-variant-numeric:tabular-nums;} .typo .t-price{font-size:13px;color:var(--ink-2);font-weight:500;} .typo ul{margin:11px 0 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:6px;} .typo li{font-size:12.5px;color:var(--ink-2);display:flex;gap:8px;align-items:flex-start;} .typo li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue);margin-top:7px;flex:none;} .tour{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9;background:var(--navy);} .tour img{width:100%;height:100%;object-fit:cover;opacity:.7;} .tour iframe{position:absolute;inset:0;width:100%;height:100%;border:0;} .tour-play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#fff;} .tour-play .pbtn{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(4px); border:2px solid rgba(255,255,255,.75);display:flex;align-items:center;justify-content:center;} .tour-play .pbtn svg{width:26px;height:26px;fill:#fff;margin-left:3px;} .tour-play .lbl{font-size:14px;font-weight:600;letter-spacing:.06em;text-shadow:0 1px 4px rgba(0,0,0,.4);} .tour-play .sub{font-size:12px;color:rgba(255,255,255,.8);} .tour-out{margin-top:10px;font-size:12.5px;} .tour-out a{color:var(--blue-700);font-weight:600;text-decoration:underline;text-underline-offset:3px;} .proj-map{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);} .proj-map iframe{width:100%;height:320px;border:0;display:block;} .map-fallback{background:var(--surface-2);padding:22px;font-size:14.5px;color:var(--ink-2);display:flex;gap:12px;align-items:center;} .map-fallback svg{width:20px;height:20px;stroke:var(--blue);fill:none;stroke-width:1.7;flex:none;} .map-fallback a{color:var(--blue-700);font-weight:600;} /* ---------- MAPA CON FACHADA (lazy façade de Google Maps) ---------- El iframe de Google pesa ~800 KB y trae cookies de terceros: hasta que el visitante pide verlo, se muestra este bloque estático (retícula de dibujo técnico + dirección real). Cero peticiones a terceros en el primer render. */ .map-facade{position:relative;min-height:260px;background:var(--blue-050);display:flex;align-items:center;justify-content:center; padding:26px 22px;text-align:center;cursor:pointer;overflow:hidden;} .map-facade.is-loaded{min-height:0;padding:0;cursor:default;background:var(--surface-2);} .map-facade .mf-grid{position:absolute;inset:0; background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px); background-size:34px 34px;background-position:center; mask-image:radial-gradient(circle at 50% 45%,#000 20%,rgba(0,0,0,.25) 75%); -webkit-mask-image:radial-gradient(circle at 50% 45%,#000 20%,rgba(0,0,0,.25) 75%);} .map-facade .mf-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;max-width:34ch;} .map-facade .mf-pin{width:30px;height:30px;stroke:var(--blue);fill:none;stroke-width:1.6;margin-bottom:6px;} .map-facade .mf-addr{font-size:16px;font-weight:600;letter-spacing:-.015em;color:var(--ink);line-height:1.3;} .map-facade .mf-city{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);} .map-facade .mf-btn{margin-top:14px;display:inline-flex;align-items:center;min-height:44px;padding:11px 22px;border-radius:var(--btn-r); background:var(--blue);color:#fff;font-weight:600;font-size:14px;box-shadow:0 2px 8px rgba(53,99,139,.24);transition:background .16s ease;} .map-facade:hover .mf-btn,.map-facade:focus-visible .mf-btn{background:var(--blue-700);} .map-facade .mf-note{margin-top:9px;font-size:11px;color:var(--ink-3);} /* Rótulo propio del pin: Google no nombra el marcador cuando se pinea por coordenada y el punto no es un lugar registrado. Solo visible con el mapa cargado, y en una esquina (no sobre el pin) para no mentir si se arrastra. */ .proj-map .mf-tag{display:none;} .proj-map.has-map .mf-tag{position:absolute;left:12px;top:12px;z-index:2;display:flex;flex-direction:column;gap:1px; max-width:min(62%,30ch);padding:9px 13px;border-radius:var(--r-sm);text-align:left;pointer-events:none; background:rgba(255,255,255,.95);border:1px solid var(--line);box-shadow:0 3px 12px rgba(28,58,87,.16); border-left:3.5px solid var(--yellow);} .proj-map .mf-tag b{font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--navy);line-height:1.25;} .proj-map .mf-tag i{font-style:normal;font-size:11.5px;font-weight:600;color:var(--ink-3);line-height:1.3;} .map-actions{display:flex;gap:10px;flex-wrap:wrap;padding:14px;border-top:1px solid var(--line);background:var(--surface);} .map-actions .btn{min-height:42px;padding:10px 18px;font-size:13.5px;} .ci-map{margin-top:24px;} .big-obra{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap; background:var(--navy);color:#fff;border-radius:var(--r);padding:28px 30px;} .big-obra .bo-t{font-size:19px;font-weight:600;letter-spacing:-.02em;} .big-obra .bo-s{font-size:13.5px;color:rgba(255,255,255,.78);margin-top:4px;} .big-obra .btn{flex:none;} /* Variante con foto: el bloque de la ficha muestra el último corte REAL de obra (fecha + título + una foto), no solo un botón. */ .big-obra.has-foto{padding:0;overflow:hidden;gap:0;align-items:stretch;flex-wrap:nowrap;} .big-obra .bo-foto{flex:none;width:214px;display:block;background:var(--navy-900);overflow:hidden;} .big-obra .bo-foto img{width:100%;height:100%;min-height:150px;object-fit:cover;transition:transform .35s ease;} .big-obra .bo-foto:hover img{transform:scale(1.04);} /* El botón va DENTRO de la columna de texto: si compite por el ancho con la foto, el título del corte se parte en tres líneas en la ficha (columna de ~680px). */ .big-obra.has-foto .bo-info{flex:1;min-width:0;padding:22px 26px;} .big-obra .bo-info .btn{margin-top:16px;} .big-obra .bo-k{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--yellow);margin-bottom:6px;} .big-obra .btn-terra,.big-obra .btn-primary{background:var(--blue);color:#fff;box-shadow:none;} .big-obra .btn-terra:hover,.big-obra .btn-primary:hover{background:#FFC814;} .legal-note{font-size:11.5px;color:var(--ink-3);line-height:1.7;border-top:1px solid var(--hair);padding-top:20px;} /* ---------- PÁGINA: AVANCE (timeline de obra) ---------- */ .avance-head{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);padding:26px;margin-bottom:36px;} .avance-head .ah-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-bottom:18px;} /* Sin barra de % (el informe del cliente no publica porcentaje) el margen inferior dejaba un hueco muerto dentro de la tarjeta. */ .avance-head .ah-top:last-child{margin-bottom:0;} .avance-head .ah-pct{font-size:42px;font-weight:600;letter-spacing:-.04em;color:var(--blue);font-variant-numeric:tabular-nums;line-height:1;} .avance-head .ah-pct small{font-size:14px;color:var(--ink-2);font-weight:500;letter-spacing:0;margin-left:8px;} .avance-head .ah-stage{font-size:11.5px;font-weight:600;color:var(--graphite);text-transform:uppercase;letter-spacing:.16em;margin-top:8px;} /* Cuando el informe del cliente no publica porcentaje, el dato fuerte es la FECHA del último corte: no se inventa una barra de avance. */ .avance-head .ah-cut .k{display:block;font-size:11px;font-weight:600;color:var(--graphite);text-transform:uppercase;letter-spacing:.16em;} .avance-head .ah-cut strong{display:block;font-size:29px;font-weight:600;letter-spacing:-.03em;color:var(--blue);line-height:1.15;margin-top:6px;} .avance-head .ah-count{font-size:13px;color:var(--ink-3);margin-top:9px;} .avance-head .bar{height:9px;} .timeline{position:relative;} .tl-item{position:relative;display:grid;grid-template-columns:140px 1fr;gap:28px;padding-bottom:36px;} .tl-item:last-child{padding-bottom:0;} .tl-left{text-align:right;padding-top:2px;} .tl-date{font-size:12.5px;font-weight:500;color:var(--ink-3);margin-top:3px;font-variant-numeric:tabular-nums;} .tl-stage{font-size:11px;font-weight:600;margin-top:4px;text-transform:uppercase;letter-spacing:.14em;color:var(--blue);} .tl-mes{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--blue-800);} .tl-item.now .tl-mes{color:var(--navy);} .tl-pct{font-size:12px;color:var(--ink-3);margin-top:4px;font-variant-numeric:tabular-nums;} .tl-right{position:relative;padding-left:34px;border-left:1px solid var(--hair);} .tl-item:last-child .tl-right{border-left-color:transparent;} .tl-node{position:absolute;left:-8px;top:3px;width:15px;height:15px;border-radius:50%;background:#fff;border:3px solid var(--blue);z-index:2;} .tl-item.now .tl-node{border-color:var(--yellow-700);box-shadow:0 0 0 5px var(--yellow-050);} .tl-item.now .tl-stage{color:var(--gold-ink);} .tl-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--sh-sm);} .tl-card .txt{padding:17px 19px;} .tl-card h4{font-size:16px;font-weight:600;letter-spacing:-.01em;} .tl-card p{font-size:14px;color:var(--ink-2);margin-top:7px;line-height:1.65;} /* Cuerpo del avance: el texto viene saneado del panel (p, strong, ul, li). Con el reset global las listas quedan sin sangría ni viñeta visible → se estilan acá. */ .tl-card .txt ul,.tl-card .txt ol{margin-top:11px;padding-left:19px;font-size:14px;color:var(--ink-2);line-height:1.6;} .tl-card .txt li{margin-top:5px;} .tl-card .txt li::marker{color:var(--yellow-700);} .tl-card .txt p+p{margin-top:9px;} /* Fotos de obra: la primera manda (panorámica a todo el ancho) y el resto va en retícula. La regla del "lead" solo aplica con 3 o más fotos; con 1 o 2 quedaría una celda huérfana de un tercio. */ .tl-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 19px 19px;} .tl-photos figure{border-radius:var(--r-sm);overflow:hidden;background:var(--surface-2);border:1px solid var(--line-2);} .tl-photos figure:first-child:nth-last-child(n+3){grid-column:1/-1;} .tl-photos figure:first-child:nth-last-child(n+3) img{aspect-ratio:16/9;} .tl-photos a{display:block;position:relative;} .tl-photos img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .35s ease;} .tl-photos a:hover img{transform:scale(1.03);} .tl-photos a:focus-visible{outline:2px solid var(--blue);outline-offset:2px;} .tl-photos figcaption{font-size:11.5px;color:var(--ink-3);padding:8px 10px 9px;line-height:1.45;} /* Informe mensual completo (documento propio del cliente, en su dominio) */ .informe-cta{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px; background:var(--blue-050);border:1px solid var(--hair);border-radius:var(--r);padding:22px 26px;margin-bottom:36px;} .informe-cta .ic-ic{width:46px;height:46px;border-radius:var(--r-sm);background:#fff;border:1px solid var(--hair); display:flex;align-items:center;justify-content:center;flex:none;} .informe-cta .ic-ic svg{width:24px;height:24px;stroke:var(--blue);fill:none;stroke-width:1.6;} .informe-cta .ic-t{font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--blue-800);} .informe-cta p{font-size:13.5px;color:var(--ink-2);margin-top:4px;line-height:1.6;max-width:64ch;} .informe-cta .btn{flex:none;} .avance-foot{display:flex;gap:10px;flex-wrap:wrap;margin-top:40px;padding-top:26px;border-top:1px solid var(--hair);} .fresh{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;color:#6B5200; background:var(--yellow-050);border:1px solid #F2DE9B;padding:6px 12px;border-radius:var(--r-sm);letter-spacing:.08em;text-transform:uppercase;} .fresh .dot{width:7px;height:7px;border-radius:50%;background:var(--yellow-700);} /* ---------- EMPTY STATE ---------- */ .empty{text-align:center;max-width:520px;margin:0 auto;padding:38px 24px 12px;} .empty .e-ic{width:76px;height:76px;border-radius:var(--r);background:var(--blue-050);display:flex;align-items:center;justify-content:center;margin:0 auto 22px;} .empty .e-ic svg{width:38px;height:38px;stroke:var(--blue);fill:none;stroke-width:1.5;} .empty h2{font-size:25px;} .empty p{font-size:15.5px;color:var(--ink-2);margin-top:12px;line-height:1.65;} .empty .e-cta{margin-top:24px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;} /* ---------- PÁGINAS INSTITUCIONALES ---------- */ /* 17-sep-2026: el pie del encabezado usaba 62px sueltos; con --sec-y el salto al primer bloque es identico al que hay entre dos secciones. */ .page-hero{position:relative;background:var(--navy);color:#fff;padding:140px 0 var(--sec-y);overflow:hidden;} .page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.45; background-image:repeating-linear-gradient(to right,rgba(255,255,255,.05) 0 1px,transparent 1px 88px), repeating-linear-gradient(to bottom,rgba(255,255,255,.05) 0 1px,transparent 1px 88px);} .page-hero .wrap{position:relative;z-index:2;} .page-hero .eyebrow{color:var(--blue-100);} .page-hero h1{font-size:clamp(30px,4.2vw,52px);line-height:1.12;margin-top:14px;max-width:22ch;} .page-hero p:not(.eyebrow){margin-top:18px;font-size:16.5px;color:rgba(255,255,255,.82); /* 58ch daba 77 caracteres por línea en escritorio; la lectura cómoda va hasta unos 70. Con 48ch quedan ~64. */ max-width:48ch;} .content-cols{display:grid;grid-template-columns:1.5fr 1fr;gap:44px;align-items:start;} .rich{overflow-wrap:break-word;word-break:break-word;} /* 17-sep-2026: la cabecera de esta seccion trae `style="margin-bottom:0"` en la vista, asi que el hueco cabecera->rejilla lo pone la rejilla. Con la variable da los mismos 34/30/26 que el resto del sitio (antes eran 28 fijos). */ .mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:var(--sec-head-gap);} .mv-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px 28px;box-shadow:var(--sh-sm);} .mv-card h2{font-size:19px;color:var(--blue-800);display:flex;align-items:center;gap:11px;} .mv-card h2::before{content:"";width:10px;height:10px;background:var(--yellow);flex:none;} .mv-card p{margin-top:12px;font-size:15px;color:var(--ink-2);line-height:1.75;} .about-intro{max-width:840px;padding-left:26px;border-left:3px solid var(--yellow);} .about-intro .lead-copy{margin-top:14px;} .lead-copy{font-size:18px;line-height:1.75;color:var(--ink-2);max-width:62ch;} .rich h2{font-size:22px;margin:28px 0 12px;} .rich h3{font-size:17px;font-weight:600;margin:22px 0 8px;} .rich p{font-size:15.5px;color:var(--ink-2);line-height:1.75;margin-bottom:12px;} .rich ul,.rich ol{margin:0 0 14px 20px;} .rich li{font-size:15px;color:var(--ink-2);line-height:1.65;margin-bottom:8px;} .rich strong{color:var(--ink);font-weight:600;} /* 17-sep-2026 (barrido de espaciado): el ultimo parrafo de un bloque de texto sumaba su margin-bottom al padding de la seccion — 88px abajo contra 76 arriba en /politica-de-datos. El aire de cierre lo pone la seccion, no el parrafo. */ .rich > :last-child,.legal-doc > :last-child,.prose > :last-child{margin-bottom:0;} .data-list{display:grid;gap:12px;margin:16px 0;} .data-list .di{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:16px 18px;font-size:14.5px;color:var(--ink-2);line-height:1.6;} .data-list .di b{color:var(--ink);} .chips{display:flex;flex-wrap:wrap;gap:9px;margin:8px 0 4px;} .chips span{font-size:13px;font-weight:600;color:var(--blue-700);background:var(--blue-050);border:1px solid var(--blue-100);padding:8px 14px;border-radius:var(--r-sm);} .steps{display:flex;flex-direction:column;gap:16px;margin:18px 0;} .step{display:flex;gap:16px;align-items:flex-start;} .step .s-n{width:34px;height:34px;border-radius:var(--r-sm);background:var(--blue);color:#fff;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none;font-size:14px;} .step .s-t{font-size:14.5px;color:var(--ink-2);line-height:1.65;padding-top:6px;} .legal-doc{max-width:760px;} .legal-doc h3{font-size:16px;font-weight:600;color:var(--ink);margin:26px 0 8px;} .legal-doc p{font-size:14.5px;color:var(--ink-2);line-height:1.75;margin-bottom:12px;} .legal-doc .lead{font-size:15.5px;color:var(--ink);} /* ---------- NOSOTROS: línea de tiempo 2019 → hoy ---------- */ .tape{position:relative;padding-left:0;} .tape-item{position:relative;display:grid;grid-template-columns:112px minmax(0,1fr);gap:32px;} /* La línea de tiempo nació sobre fondo claro (`--blue` en el año, `--ink-2` en el párrafo) y el panel la puede pasar a navy: año, texto, línea y nodo salen del CONTEXTO. Con el `alt`+`navy` de fábrica se pinta exactamente igual que antes. */ .tape-year{font-size:clamp(26px,3vw,34px);font-weight:600;letter-spacing:-.03em;color:var(--sec-accent,var(--blue));line-height:1;padding-top:26px;text-align:right;} .tape-body{position:relative;border-left:1px solid var(--sec-line-soft,var(--hair));padding:26px 0 34px 34px;} .tape-item:last-child .tape-body{padding-bottom:6px;} .tape-node{position:absolute;left:-6.5px;top:32px;width:12px;height:12px;background:#fff;border:3px solid var(--sec-accent,var(--blue));border-radius:50%;} .tape-item.is-key .tape-node{border-color:var(--yellow-700);background:var(--yellow);} .tape-item.is-key .tape-year{color:var(--sec-ink,var(--navy));} .tape-title{font-size:18px;font-weight:600;letter-spacing:-.02em;} .tape-text{font-size:14.5px;color:var(--sec-ink-2,var(--ink-2));margin-top:7px;max-width:62ch;line-height:1.7;} .tape-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;} .tape-tags span{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite); border:1px solid var(--line);background:var(--surface);padding:6px 11px;border-radius:var(--r-sm);} /* revelado discreto al hacer scroll */ .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1);} .reveal.is-in{opacity:1;transform:none;} /* cifras de trayectoria */ /* 17-sep-2026: la vista trae `style="margin-top:44px"` en linea (nosotros.ejs) y ese 44 es el unico numero de espaciado que queda fuera del CSS. Al quitar el estilo en linea, este margen deja la separacion en el ritmo del sitio. */ .figures{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--hair);margin-top:var(--sec-head-gap);} .figures .fg{padding:26px 24px 26px 0;border-right:1px solid var(--hair);} .figures .fg:last-child{border-right:none;} .figures .fg-v{font-size:clamp(30px,3.4vw,42px);font-weight:600;letter-spacing:-.035em;color:var(--navy);line-height:1;} .figures .fg-k{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);margin-top:10px;} /* ---------- ASISTIDOS ---------- */ .assist-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;} .assist-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--sh-sm);} .assist-card .ac-media{aspect-ratio:4/3;background:var(--surface-2);overflow:hidden;} .assist-card .ac-media img{width:100%;height:100%;object-fit:cover;} .assist-card .ac-body{padding:14px 15px 16px;} .assist-card .ac-year{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);} .assist-card .ac-name{font-size:14.5px;font-weight:600;letter-spacing:-.01em;margin-top:4px;line-height:1.3;} /* ---------- FOOTER ---------- */ footer{background:var(--navy);color:#B9C8D6;padding:64px 0 44px;} .foot-grid{display:grid;grid-template-columns:1.8fr .9fr .9fr 1.15fr;gap:38px;} /* Entrada única a la vitrina, en lugar de la columna con un enlace por proyecto. */ .foot-cta{margin-top:20px;gap:9px;padding:11px 18px;font-size:13.5px;} .foot-cta svg{width:16px;height:16px;transition:transform .18s ease;} .foot-cta:hover svg{transform:translateX(3px);} .foot-brand{display:flex;align-items:center;gap:10px;margin-bottom:16px;} .foot-brand img{height:38px;filter:brightness(0) invert(1);opacity:.96;} .foot-about{font-size:14px;line-height:1.7;max-width:40ch;color:#9BAEBF;} .foot-tag{margin-top:16px;font-size:11.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--yellow);} footer .foot-h{color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px;} .foot-list{display:flex;flex-direction:column;gap:12px;font-size:14px;} .foot-list a,.foot-list div{display:flex;align-items:flex-start;gap:10px;color:#B9C8D6;} .foot-list a:hover{color:#fff;} .foot-list svg{width:16px;height:16px;stroke:var(--yellow);fill:none;stroke-width:1.7;flex:none;margin-top:3px;} .foot-legal{text-decoration:underline;text-underline-offset:3px;} .foot-legal:hover{color:#fff;} .foot-bottom{margin-top:44px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);display:flex; justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;font-size:12px;color:#95A8BA;} .foot-social{display:flex;gap:10px;align-items:center;} .foot-social a{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:#B9C8D6; border:1px solid rgba(255,255,255,.2);border-radius:var(--r-sm);padding:9px 13px;transition:.16s;} .foot-social a:hover{border-color:var(--yellow);color:#fff;} .foot-social svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;flex:none;} /* ---------- VISOR DE FOTOS (lightbox propio) ---------- Sin librerías: overlay navy translúcido, contador, flechas, Esc y swipe. El botón de cierre y las flechas son los únicos focos del overlay (foco atrapado en el JS), por eso llevan área táctil ≥44 px. */ .lb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center; background:rgba(10,22,35,.975);opacity:0;transition:opacity .18s ease; padding:calc(58px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);} /* OBLIGATORIO: `.lb{display:flex}` le gana a la regla `[hidden]{display:none}` del navegador, así que sin esto el overlay queda siempre presente (opacity 0) y se come todos los clics de la página. */ .lb[hidden]{display:none;} .lb.is-open{opacity:1;} .lb-bar{position:absolute;top:0;left:0;right:0;height:calc(58px + env(safe-area-inset-top)); padding:env(safe-area-inset-top) 14px 0 20px;display:flex;align-items:center;justify-content:space-between;color:#fff;} .lb-count{font-size:12.5px;font-weight:600;letter-spacing:.14em;color:rgba(255,255,255,.85);} .lb-x{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);transition:background .16s ease;} .lb-x:hover{background:rgba(255,255,255,.22);} .lb-x svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;} .lb-stage{flex:1;min-width:0;height:100%;display:flex;align-items:center;justify-content:center;} .lb-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:var(--r-sm); box-shadow:0 24px 60px rgba(0,0,0,.5);} .lb-nav{flex:none;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);transition:background .16s ease;} .lb-nav:hover{background:rgba(255,255,255,.22);} .lb-nav svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} .lb-prev{margin-right:14px;} .lb-next{margin-left:14px;} .lb :focus-visible{outline:2.5px solid var(--yellow);outline-offset:3px;} @media(max-width:680px){ .lb{padding:calc(54px + env(safe-area-inset-top)) 8px calc(76px + env(safe-area-inset-bottom));} /* En móvil las flechas van abajo, fuera de la foto: el swipe es el gesto principal. */ .lb-nav{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom));width:48px;height:48px;margin:0;} .lb-prev{left:22px;} .lb-next{right:22px;} } /* ---------- WHATSAPP FLOTANTE ---------- */ .wa-float{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:70; width:56px;height:56px;border-radius:50%;background:var(--wa); box-shadow:0 6px 18px rgba(37,211,102,.34),0 2px 6px rgba(28,58,87,.18); display:flex;align-items:center;justify-content:center;transition:transform .15s ease,box-shadow .15s ease;} .wa-float svg{width:29px;height:29px;fill:#fff;} .wa-float:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(37,211,102,.4),0 3px 8px rgba(28,58,87,.2);} /* Instagram flotante (17-sep-2026): misma esquina y mismo tamano que WhatsApp, apilado justo encima (56 de alto + 12 de aire = 68). Apunta SOLO a la cuenta de la constructora; @loft_bog se queda en el pie. */ .ig-float{position:fixed;right:20px;bottom:calc(88px + env(safe-area-inset-bottom));z-index:70; width:56px;height:56px;border-radius:50%;color:#fff; background:linear-gradient(45deg,#F09433 0%,#DC2743 45%,#BC1888 80%,#8134AF 100%); box-shadow:0 6px 18px rgba(188,24,136,.30),0 2px 6px rgba(28,58,87,.18); display:flex;align-items:center;justify-content:center;transition:transform .15s ease,box-shadow .15s ease;} .ig-float svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.7;} .ig-float:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(188,24,136,.38),0 3px 8px rgba(28,58,87,.2);} /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:1180px){ .map-layout{grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:36px;} .ig-grid{grid-template-columns:repeat(5,1fr);} .done-grid{gap:18px;} } @media(max-width:1000px){ .hero{padding-top:120px;} .hero-in{grid-template-columns:1fr;gap:36px;padding-bottom:56px;} .build{grid-template-columns:1fr;gap:28px;} .build-media{order:-1;} .refer{grid-template-columns:1fr;gap:32px;} .map-layout{grid-template-columns:1fr;gap:26px;} .map-side{position:static;} .plano svg{max-height:none;} .legend{flex-direction:row;flex-wrap:wrap;gap:16px;margin:0 0 18px;} .contact-grid{grid-template-columns:1fr;gap:28px;} .content-cols{grid-template-columns:1fr;gap:28px;} /* 17-sep-2026 (barrido de espaciado): al apilarse, el panel de precio quedaba a 28px del cuerpo, menos aire del que separa dos parrafos dentro del cuerpo (44px). 48px lo devuelve a la categoria de bloque, igual que en /postventa. */ .proj-main{grid-template-columns:1fr;gap:48px;} .proj-panel{position:relative;top:0;} .cards{grid-template-columns:repeat(2,1fr);} .done-grid{grid-template-columns:repeat(2,1fr);} .assist-grid{grid-template-columns:repeat(2,1fr);} .figures{grid-template-columns:repeat(2,1fr);} .figures .fg{padding-right:20px;} .figures .fg:nth-child(2){border-right:none;} .figures .fg:nth-child(3),.figures .fg:nth-child(4){border-top:1px solid var(--hair);} .ig-grid{grid-template-columns:repeat(4,1fr);} .photo-grid{grid-template-columns:repeat(2,1fr);} } @media(max-width:880px){ .nav-links{display:none;} .nav-tel{display:none;} .burger{display:flex;} } @media(max-width:680px){ /* El plano se escala con el viewport: sin subir tipografías y grosores, los rótulos quedan ilegibles en móvil (el SVG mide 700 unidades sobre ~350 px). */ .st-label{font-size:17px;letter-spacing:.08em;} .st-north text{font-size:19px;} .st{stroke-width:1.5;} .st-min{stroke-width:1.1;} .st-major{stroke-width:2.8;} .pin-lbl{font-size:20px;} .pin-lbl{transform:translateX(6px);} .pin-lbl[text-anchor="end"]{transform:translateX(-6px);} .pin-dot{r:11;stroke-width:3.5;} .pin-halo{r:34;} .pin-pulse{r:13;stroke-width:2.5;} .wrap{padding-inline:20px;} html{scroll-padding-top:92px;} /* 17-sep-2026: .sec y .sec-head leen --sec-y / --sec-head-gap (:root los baja a 52/26 en este mismo rango). No repetir el numero aca. */ .proj-hero{padding:104px 0 0;} /* El encabezado de la ficha quedaba a 24px de la galería y el título parecía pegado a las fotos. En celular 32px basta; en escritorio son 44. */ .gallery{margin-top:32px;} /* Versalita espaciada a 12,5px con la dirección completa: en celular se partía en dos líneas y la segunda quedaba suelta. Se baja el espaciado y se quita la caja alta, que es lo que la hacía tan ancha. */ .proj-title .p-loc{font-size:12px;letter-spacing:.02em;text-transform:none;line-height:1.45;} .proj-title h1{line-height:1.1;} .proj-hero.with-back{padding-top:100px;} /* Mismo respiro lateral que el hero principal: los encabezados de página son el momento de mayor impacto y ganan 8px por lado sobre el resto del contenido. */ .page-hero{padding:112px 0 var(--sec-y);} .page-hero .wrap{padding-inline:28px;} .page-hero h1{margin-top:20px;} .page-hero p:not(.eyebrow){margin-top:22px;} .cards,.done-grid{grid-template-columns:1fr;} .assist-grid{grid-template-columns:1fr 1fr;} .ig-grid{grid-template-columns:repeat(3,1fr);gap:8px;} .ig-cta{grid-template-columns:1fr;} .photo-grid{grid-template-columns:1fr 1fr;gap:8px;} .form .row2{grid-template-columns:1fr;} .form{padding:20px;} .gallery{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;} .gallery .g-main{grid-row:1/2;grid-column:1/3;aspect-ratio:16/10;} /* 2x2 de miniaturas: ocultar la cuarta dejaba una celda vacía en la fila 3 y, peor, escondía el badge "+N fotos" (va en la última miniatura). */ .gallery .g-thumb{aspect-ratio:1;} .build-facts .bf{padding-right:18px;margin-right:18px;} .refer-steps .rs{grid-template-columns:34px 1fr;gap:12px;} .plano{padding:12px 12px 10px;} .plano-foot{letter-spacing:.12em;font-size:9.5px;} /* En celular: marca y contacto a lo ancho, las tres columnas de enlaces en rejilla. Con listas de tres o cuatro, el pie cabe sin volverse una tira. */ /* Marca y contacto a lo ancho; Empresa y Atención, una al lado de la otra. Son dos listas de tres, así que caben sin apretarse. */ .foot-grid{grid-template-columns:1fr 1fr;gap:26px 20px;} .foot-grid > div:first-child{grid-column:1/-1;} .foot-grid > div:last-child{grid-column:1/-1;} .foot-cta{margin-top:18px;display:inline-flex;} .foot-bottom{flex-direction:column;align-items:flex-start;gap:14px;} .tl-item{grid-template-columns:1fr;gap:12px;} .tl-left{text-align:left;padding-left:34px;} .tl-node{top:-26px;} .avance-head .ah-pct{font-size:34px;} .avance-head .ah-cut strong{font-size:24px;} /* Móvil: una foto por fila (obra real, no miniaturas) y sin panorámica de lead. */ .tl-photos{grid-template-columns:1fr;padding:0 14px 15px;} .tl-photos figure:first-child:nth-last-child(n+3) img{aspect-ratio:4/3;} .tl-card .txt{padding:15px 16px;} .informe-cta{grid-template-columns:1fr;gap:14px;padding:20px;} .informe-cta .btn{width:100%;} .avance-foot .btn{width:100%;} .big-obra{flex-direction:column;align-items:flex-start;} .big-obra .btn{width:100%;} .big-obra.has-foto{flex-wrap:wrap;align-items:stretch;} .big-obra .bo-foto{width:100%;} .big-obra .bo-foto img{aspect-ratio:16/9;height:auto;min-height:0;} .big-obra.has-foto .bo-info{padding:20px;} .tape-item{grid-template-columns:64px minmax(0,1fr);gap:16px;} .tape-year{font-size:20px;padding-top:22px;} .tape-body{padding-left:22px;} .mv-grid{grid-template-columns:1fr;} footer{padding:48px 0 52px;} } @media(max-width:400px){ .hero h1{font-size:34px;} .assist-grid{grid-template-columns:1fr;} } @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important;} .reveal{opacity:1;transform:none;} .plano .pin{opacity:1;transform:none;} } /* ============================================================ Franja comercial / legal de proyecto (`partials/ficha-comercial.ejs`) 25-ago-2026. La SIC pide que en la vitrina de un proyecto de vivienda se lea precio de referencia, área construida, área privada y ubicación. El cliente mandó de referencia una tarjeta con esos datos en pares etiqueta-valor y pidió solo el "desde", sin rangos. Lista de definición (dl/dt/dd) porque eso es: pares de dato y valor. ============================================================ */ .fcom{margin:18px 0 0;display:grid;gap:9px;} .fcom-row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:baseline; padding-bottom:9px;border-bottom:1px solid var(--line-2);} .fcom-row:last-child{border-bottom:0;padding-bottom:0;} .fcom dt{font-size:11.5px;font-weight:500;color:var(--ink-3);line-height:1.35;} .fcom dd{font-size:13.5px;font-weight:600;color:var(--ink);text-align:right;line-height:1.35;} .fcom dd.num{font-variant-numeric:tabular-nums;letter-spacing:-.01em;} /* Sobre el navy del hero la misma franja va en claro. */ .hero .fcom-row{border-bottom-color:rgba(255,255,255,.16);} .hero .fcom dt{color:rgba(255,255,255,.62);} .hero .fcom dd{color:#fff;} @media(max-width:680px){ .fcom dt{font-size:11.5px;} .fcom dd{font-size:13px;} } /* ============================================================ Móvil: tira compacta de proyectos entregados El cliente pidió aligerar el celular y ocultar los entregados. Se dejan, pero como carrusel horizontal de una pasada en vez de la cuadrícula de cuatro tarjetas: en móvil los entregados son la única prueba de trayectoria y el 90% del tráfico entra por ahí. ============================================================ */ @media(max-width:680px){ .done-grid{display:flex;grid-template-columns:none;gap:12px; overflow-x:auto;scroll-snap-type:x mandatory; /* Sin esto el primer punto de anclaje cae DENTRO del padding y el navegador abre la tira con scrollLeft:20 — la primera tarjeta nace pegada al borde. */ scroll-padding-inline:20px; margin-inline:-20px;padding-inline:20px; /* sangra el padding de .wrap en móvil */ padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none;} .done-grid::-webkit-scrollbar{display:none;} .done{flex:0 0 62%;scroll-snap-align:start;} .done-media{aspect-ratio:4/3;} .done-name{font-size:14px;} .done-meta{font-size:11.5px;} } /* ============================================================ Menú con submenús (26-ago-2026) Estructura pedida por el cliente: Proyectos, Nosotros y Servicio al Cliente despliegan. En escritorio abren por hover y por clic; en celular son acordeones que abren por tap, porque en pantalla táctil el hover no existe. ============================================================ */ .has-sub{position:relative;display:flex;align-items:center;} .sub-t{display:inline-flex;align-items:center;gap:4px;padding:5px 0;border:0;background:none; font:inherit;font-weight:500;color:var(--graphite);cursor:pointer;} .sub-t svg{width:14px;height:14px;transition:transform .18s ease;} .has-sub:hover .sub-t,.sub-t:focus-visible{color:var(--blue);} .has-sub.open .sub-t svg,.has-sub:hover .sub-t svg{transform:rotate(180deg);} .sub{position:absolute;top:calc(100% + 14px);left:-14px;min-width:210px;padding:7px; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm); box-shadow:0 16px 40px rgba(17,46,65,.14); opacity:0;visibility:hidden;transform:translateY(-5px);transition:.16s ease;} /* El puente invisible evita que el submenú se cierre al cruzar el hueco con el cursor. */ .has-sub::after{content:"";position:absolute;top:100%;left:0;right:0;height:16px;} .has-sub:hover .sub,.has-sub.open .sub{opacity:1;visibility:visible;transform:none;} .sub a{display:block;padding:9px 12px;border-radius:6px;font-size:13.5px;font-weight:500;color:var(--ink);white-space:nowrap;} .sub a:hover{background:var(--surface-2);color:var(--blue);} /* Íconos de contacto del nav */ .nav-ic{display:flex;gap:6px;} .nav-ic a{width:38px;height:38px;display:flex;align-items:center;justify-content:center; border:1px solid var(--line);border-radius:50%;color:var(--blue);background:var(--surface);} .nav-ic a svg{width:17px;height:17px;} .nav-ic a:hover{border-color:var(--blue);box-shadow:0 2px 8px rgba(53,99,139,.16);} /* Acordeones del menú móvil */ .mm-t{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px; padding:13px 14px;border:0;background:none;border-radius:var(--r-sm); font:inherit;font-weight:600;font-size:15.5px;color:var(--ink);text-align:left;cursor:pointer;} .mm-t svg{width:16px;height:16px;flex:none;transition:transform .18s ease;} .mm-group.open .mm-t{background:var(--surface-2);} .mm-group.open .mm-t svg{transform:rotate(180deg);} .mm-sub{display:none;padding:2px 0 6px 10px;margin-left:12px;border-left:2px solid var(--line);} .mm-group.open .mm-sub{display:block;} .mm-sub a{font-size:14.5px!important;font-weight:500!important;padding:10px 12px!important;color:var(--ink-2)!important;} .mm-ic{display:flex;flex-direction:column;gap:2px;} @media(max-width:1080px){ .nav-links{gap:16px;font-size:13.5px;} .sub-t{font-size:13.5px;} } @media(max-width:980px){ .nav-links{display:none;} .burger{display:flex;} } @media(max-width:520px){ .nav-ic a{width:34px;height:34px;} .nav-ic a svg{width:15px;height:15px;} } /* ============================================================ HERO a sangre (26-ago-2026) Reemplaza el hero partido en dos. El cliente pidió "imagen panorámica completa y máscara/degradado oscuro hacia el lado del texto", y que la fotografía sea protagonista sin que el texto la tape de más. El degradado es horizontal, no un velo parejo: cubre el lado del texto y deja limpio el lado derecho de la foto. ============================================================ */ .hero{position:relative;background:var(--navy);color:#fff;padding:0;overflow:hidden;isolation:isolate;} .hero::before{content:none;} .hero-bg{position:absolute;inset:0;z-index:0;} .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 62%;} /* Doble máscara: la horizontal da contraste al texto, la vertical asienta la franja de atributos y evita que el nav flote sobre el cielo claro. */ /* 17-sep-2026: "en la imagen principal se ve rara la imagen de fondo, como opaca". La foto se regenero desde el original del cliente (Foto Dron Golf Ajuste Color) con mas luz, contraste y saturacion, y la mascara baja de .94/.86 a .84/.70 en la zona del texto y de .46/.24 a .26/.06 en la mitad derecha, para que la foto respire. Medido sobre el render: el punto mas claro bajo el parrafo queda en L=0,043 y el blanco al 86% da 13,9:1, muy por encima de AA. */ .hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(100deg,rgba(15,34,52,.90) 0%,rgba(15,34,52,.86) 30%,rgba(15,34,52,.62) 50%,rgba(15,34,52,.18) 72%,rgba(15,34,52,.04) 100%), linear-gradient(to bottom,rgba(15,34,52,.52) 0%,rgba(15,34,52,0) 26%,rgba(15,34,52,0) 64%,rgba(15,34,52,.46) 100%);} .hero-in{position:relative;z-index:2;display:block;padding-block:168px 104px; /* Con 86vh el hero más su franja ocupaban el 97% de la pantalla en escritorio y no se veía que hubiera más abajo. */ min-height:min(74vh,660px); display:flex;align-items:center;} .hero-copy{max-width:640px;} /* Kicker con el guion dorado de la referencia; la segunda linea del titular y la regla corta bajo el, tambien doradas. */ .hero-kick{display:flex;align-items:center;gap:14px;font-size:11px;font-weight:600;letter-spacing:.22em; text-transform:uppercase;color:var(--gold);} .hero-kick::before{content:"";width:44px;height:1.5px;background:var(--gold);flex:none;} .hero h1{font-size:clamp(36px,5.2vw,64px);line-height:1.02;letter-spacing:-.035em;margin-top:22px;} .hero h1 .l2{display:block;color:var(--gold);opacity:1;} .hero-rule{width:74px;height:1.5px;background:var(--gold);margin-top:26px;} .hero-sub{margin-top:22px;font-size:clamp(15px,1.4vw,17.5px);color:rgba(255,255,255,.95);max-width:48ch;line-height:1.62;} .hero-actions{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap;} /* Franja de los cuatro diferenciales, al pie del hero. 17-sep-2026: formato de la referencia del cliente — icono lineal dentro de un circulo de borde dorado, titulo en versalitas y linea de apoyo debajo. El fondo se opaca (antes .42) para que la franja se lea como bloque propio ahora que la foto es mas luminosa. */ .hero-attrs{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.14); background:rgba(11,26,40,.72);backdrop-filter:blur(8px);} .ha-in{display:grid;grid-template-columns:repeat(4,1fr);} .ha{display:flex;align-items:center;gap:13px;padding:22px 18px 22px 0;} .ha + .ha{padding-left:18px;border-left:1px solid rgba(255,255,255,.14);} .ha-ic{flex:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--gold); display:flex;align-items:center;justify-content:center;} .ha-ic svg{width:19px;height:19px;fill:none;stroke:var(--gold);stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round;} .ha-tx{min-width:0;} .ha-t{display:block;font-size:11.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:#fff;} .ha-d{display:block;margin-top:5px;font-size:12px;line-height:1.4;color:rgba(255,255,255,.72);} @media(max-width:900px){ .hero-in{padding-block:140px 84px;min-height:auto;} .ha-in{grid-template-columns:1fr 1fr;} .ha{padding:17px 16px 17px 0;gap:12px;} .ha:nth-child(3){padding-left:0;border-left:0;} .ha:nth-child(3),.ha:nth-child(4){border-top:1px solid rgba(255,255,255,.14);} .ha-ic{width:38px;height:38px;} .ha-ic svg{width:17px;height:17px;} } @media(max-width:680px){ /* Los botones de las tarjetas se apilan: con dos textos largos uno al lado del otro (`Ver el proyecto` + `Escribir por WhatsApp`) no caben en una tarjeta de ~290px, y como `.btn` es nowrap el segundo se salía de la caja. */ .card-cta{flex-direction:column;} .card-cta .btn{width:100%;} /* 17-sep-2026: en celular "la foto del fondo no se ve tan bien, no resalta". A 390px de ancho el recorte de `cover` es HORIZONTAL (la foto es 4:3 y el hero mucho mas alto que ancho), asi que el eje vertical se ve entero y la linea de ciudad entra sola: lo que faltaba era luz. La foto se regenero mas luminosa y la mascara baja de .72/.86/.93 a .60/.74/.88. El encuadre se centra. */ .hero-bg img{object-position:center;} /* Celular: la mascara es fuerte ARRIBA (kicker, titular y parrafo van sobre el cielo, que es la parte mas clara de la foto: con .60 el dorado del kicker daba 2,4:1) y se abre en la franja de los botones, que es donde se ve la ciudad. Medido: kicker dorado 5,1:1 | titular dorado 4,9:1 | parrafo blanco 8,2:1. */ .hero::after{background:linear-gradient(to bottom,rgba(15,34,52,.88) 0%,rgba(15,34,52,.84) 42%,rgba(15,34,52,.56) 68%,rgba(15,34,52,.70) 100%);} /* Ritmo del hero en celular, calibrado contra referencias de Mobbin (Tonal, Cleo AI, Jobber): el bloque de texto respira más a los lados que el resto de la página —28px en vez de 20— y las separaciones internas son escalonadas, de menor a mayor según baja la jerarquía: 26 al titular, 22 al párrafo, 34 a los botones. Antes iban casi iguales (20/18/28) y el bloque se leía como una masa. El interlineado del titular es 1,14: a 1,02 las líneas se tocaban. */ .hero-in{padding-block:108px 64px;padding-inline:28px;} .hero-kick + h1{margin-top:26px;} .hero h1{font-size:29px;line-height:1.16;letter-spacing:-.028em;margin-top:26px;} .hero-sub{max-width:none;margin-top:22px;font-size:14.5px;line-height:1.62;} .hero-actions{margin-top:34px;gap:10px;flex-wrap:nowrap;} .hero-actions .btn{flex:1 1 0;min-width:0;justify-content:center;padding-inline:12px; font-size:13.5px;white-space:nowrap;} .hero-kick{font-size:10px;letter-spacing:.18em;} /* 17-sep-2026: la franja VUELVE en celular. El cliente la pidio expresamente ("poner esos 4 diferenciales es muy llamativo como primera pantalla"): va en rejilla 2x2 justo debajo del hero, como en su referencia de responsive. */ .ha-in{grid-template-columns:1fr 1fr;} .ha{flex-direction:column;align-items:flex-start;gap:9px;padding:16px 12px;} .ha + .ha{padding-left:12px;} .ha:nth-child(2),.ha:nth-child(4){border-left:1px solid rgba(255,255,255,.14);} .ha:nth-child(3),.ha:nth-child(4){border-top:1px solid rgba(255,255,255,.14);} .ha-ic{width:36px;height:36px;} .ha-t{font-size:10.5px;letter-spacing:.09em;line-height:1.35;} .ha-d{font-size:12px;margin-top:4px;} } /* ============================================================ Experiencia y "Nuestra forma de hacer ciudad" (26-ago-2026) Reemplazan el bloque largo de "Sobre nosotros" del inicio. ============================================================ */ /* 17-sep-2026: tres columnas (texto / cifras 01-04 / foto real), la maqueta que el cliente marco como preferida. Las cifras viven SOLO aca: bajo el hero no se repiten. `align-items:stretch` es lo que deja la foto a la altura de las cuatro tarjetas sin fijarle un alto. */ .exp{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,1fr) minmax(0,.92fr);gap:28px;align-items:stretch;} .exp-copy{align-self:center;} .exp-copy h2{font-size:clamp(25px,2.4vw,33px);line-height:1.16;letter-spacing:-.025em;margin-top:12px;} .exp-copy h2 .hl{color:var(--blue);} .exp-rule{width:74px;height:2px;background:var(--accent,var(--gold));margin-top:24px;} .exp-copy .lede{margin:20px 0 26px;color:var(--ink-2);font-size:15.5px;line-height:1.7;max-width:46ch;} /* Cuatro tarjetas blancas numeradas: el numeral va en circulo de borde dorado. */ .exp-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-content:stretch;} .ec{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); padding:22px 20px 24px;box-shadow:var(--sh-sm);display:flex;flex-direction:column;} .ec-n{width:34px;height:34px;flex:none;border-radius:50%;border:1px solid var(--accent,var(--gold));color:var(--accent-ink,var(--gold-ink)); display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:600;letter-spacing:.06em;} /* El numeral va dentro del

para no romper la estructura del

. */ .ec dt{display:flex;flex-direction:column;align-items:flex-start;} .ec dt .num{margin-top:16px;font-size:42px;font-weight:600;color:var(--navy);line-height:1;letter-spacing:-.03em;} .ec dd{margin-top:10px;font-size:12.5px;color:var(--ink-3);line-height:1.45;} /* Foto REAL con rotulo, a la derecha. Sin aspect-ratio: el alto lo manda la columna de tarjetas (aspect-ratio + stretch le encoge el ancho). */ .exp-photo{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--navy);min-height:320px;} .exp-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} /* El padding superior no es aire: es la rampa del degradado. Con 24px el texto nacia justo donde el degradado todavia era transparente. */ .exp-photo figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:64px 20px 22px;color:#fff; background:linear-gradient(to top,rgba(12,30,46,.95) 0%,rgba(12,30,46,.86) 38%,rgba(12,30,46,.55) 72%,rgba(12,30,46,0) 100%);} .exp-photo figcaption strong{display:block;font-size:15.5px;font-weight:600;line-height:1.3;} .exp-photo figcaption span{display:block;margin-top:7px;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.84);} /* Fila de cinco: tarjeta navy con el titulo + las cuatro fotos reales. */ .ciudad{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;} .cd{position:relative; /* La caja era 3/4 (vertical) y las fotos disponibles son 1.46 (horizontales): el recorte se comía la mitad del ancho. El cliente pidió "dejar visible la fotografía". Con caja cuadrada el recorte baja a un tercio. */ aspect-ratio:1/1;border-radius:var(--r-lg);overflow:hidden;background:var(--navy);} /* En la fila de cinco (17-sep-2026) cada tarjeta mide ~215px: cuadrada, el rótulo de tres líneas más el ícono llegaban al borde. 4/5 le da el alto que pide la maqueta. */ .ciudad .cd{aspect-ratio:4/5;} .cd img{width:100%;height:100%;object-fit:cover;object-position:center 42%;} /* Degradado solo en el pie: lo justo para leer, dejando la foto a la vista. */ .cd::after{content:"";position:absolute;inset:0; background:linear-gradient(to top,rgba(12,30,46,.90) 0%,rgba(12,30,46,.62) 38%,rgba(12,30,46,.18) 70%,rgba(12,30,46,0) 100%);} .cd-txt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 18px;color:#fff;} .cd-txt h3{font-size:15.5px;font-weight:600;letter-spacing:-.01em;} .cd-txt p{margin-top:6px;font-size:12px;line-height:1.45;color:rgba(255,255,255,.82);} .cd-ic{display:flex;align-items:center;justify-content:center;width:31px;height:31px;margin-bottom:11px; border-radius:50%;border:1px solid var(--accent,var(--gold));} /* `--accent-onnavy`, no `--accent`: estas dos superficies son SIEMPRE oscuras (la tarjeta navy y el degradado sobre la foto), así que con `accent-navy` el azul pleno caía a 1,85:1. Con el acento dorado de fábrica se pinta igual. */ .cd-ic svg{width:16px;height:16px;fill:none;stroke:var(--accent-onnavy,var(--gold));stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;} /* Primera celda: navy, sin foto, con el titulo de la seccion. */ .cd-lead{background:var(--navy);display:flex;flex-direction:column;justify-content:center;padding:26px 22px;} .cd-lead::after{content:none;} .cd-lead .eyebrow{color:var(--accent-onnavy,var(--gold));line-height:1.5;} .cd-lead h2{margin-top:14px;font-size:20px;line-height:1.22;color:#fff;letter-spacing:-.02em;} @media(max-width:1050px){ /* Dos columnas: el texto se lleva la fila completa y debajo van cifras y foto. */ .exp{grid-template-columns:1fr 1fr;gap:28px;} .exp-copy{grid-column:1/-1;} /* La tarjeta navy se lleva la fila entera y las cuatro fotos quedan en una sola tira debajo: con tres columnas la cuarta dejaba un hueco. */ .ciudad{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;} /* `.ciudad .cd` (0,2,0) le gana a `.cd-lead` (0,1,0): sin el prefijo la tarjeta navy se quedaba con el 4/5 y, a todo el ancho, crecia a 1.000px de alto. */ .ciudad .cd-lead{grid-column:1/-1;aspect-ratio:auto;padding:24px 22px;} } @media(max-width:820px){ /* 17-sep-2026: con dos columnas el gutter de 12px (pensado para la tira de cuatro) apretaba las tarjetas. Vuelve al 16 de escritorio. */ .ciudad{grid-template-columns:1fr 1fr;gap:16px;} } @media(max-width:680px){ .exp{grid-template-columns:1fr;gap:26px;} .exp-copy{grid-column:auto;} .exp-photo{min-height:0;aspect-ratio:4/3;} } /* ============================================================ Celular: la versión corta que pidió el cliente "Aquí sí debemos hacer una reducción importante". Se ocultan las secciones que él listó y los proyectos activos pasan a carrusel horizontal. ============================================================ */ @media(max-width:680px){ /* Fuera en celular, por pedido expreso: el mosaico de atributos alargaba la pagina sin aportar a la decision de compra. (#referidos ya no se renderiza en el inicio desde el 17-sep-2026, ver views/home.ejs.) */ #forma{display:none;} /* Los activos se deslizan en vez de apilarse. */ .cards.vitrina{display:flex;grid-template-columns:none;gap:12px; overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px; margin-inline:-20px;padding-inline:20px;padding-bottom:6px; -webkit-overflow-scrolling:touch;scrollbar-width:none;} .cards.vitrina::-webkit-scrollbar{display:none;} .cards.vitrina > .card{flex:0 0 84%;scroll-snap-align:start;} .exp-cards{gap:12px;} .ec{padding:18px 15px 20px;} .ec dt .num{font-size:32px;margin-top:13px;} .ec dd{font-size:12px;} } /* Nuestros servicios (/nosotros#servicios) — 26-ago-2026. */ .servicios{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;} .sv{background:var(--surface);padding:26px 22px;} .sv h3{font-size:15.5px;font-weight:600;color:var(--navy);} .sv p{margin-top:7px;font-size:13px;line-height:1.55;color:var(--ink-3);} @media(max-width:820px){ .servicios{grid-template-columns:repeat(2,minmax(0,1fr));} } /* Pantallas muy angostas (iPhone SE y similares, 320-374px). "Conocer 134 LOFT" y "Agenda tu visita" son nowrap: uno al lado del otro no caben en 264px de ancho útil y el segundo se salía del viewport. */ @media(max-width:379px){ .hero-in{padding-inline:22px;} .hero-actions{flex-direction:column;gap:9px;} .hero-actions .btn{width:100%;} .page-hero .wrap{padding-inline:22px;} } /* ============================================================ Secciones en navy elegidas desde el panel (19-sep-2026) Hoy NINGUNA de estas combinaciones existe en el sitio: son la red de seguridad para cuando el cliente pase a navy una seccion que nacio clara. Por eso ninguna regla de aca cambia el render actual. ============================================================ */ .sec-navy .btn-primary,.sec-navy .btn-teal{background:var(--accent-btn,#fff);color:var(--navy-900);box-shadow:none;} .sec-navy .btn-primary:hover,.sec-navy .btn-teal:hover{background:#fff;color:var(--navy-900);} /* `.mv-card` salió de esta lista el 19-sep-2026: la tarjeta pinta su propia superficie BLANCA, así que su párrafo en blanco quedaba invisible (1:1). */ .sec-navy .lead-copy,.sec-navy .exp-copy .lede,.sec-navy .done-meta{color:rgba(255,255,255,.8);} .sec-navy .done-name,.sec-navy .exp-copy h2,.sec-navy .figures .fg-v{color:#fff;} .sec-navy .exp-copy h2 .hl{color:var(--accent-onnavy,var(--blue-100));} .sec-navy .figures,.sec-navy .figures .fg{border-color:rgba(255,255,255,.22);} .sec-navy .figures .fg-k{color:rgba(255,255,255,.7);} .sec-navy .about-intro{border-left-color:var(--accent-onnavy,var(--yellow));} .sec-navy .sv{background:rgba(255,255,255,.06);} .sec-navy .sv h3{color:#fff;} .sec-navy .sv p,.sec-navy .assist-card .ac-name{color:rgba(255,255,255,.78);} .sec-navy .servicios{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.18);} /* ============================================================ Bloques de las paginas nuevas (landings del panel) — 19-sep-2026 Cada bloque es una .sec normal: hereda fondo, acento y ritmo del sitio. ============================================================ */ .lb-head.is-center{margin-inline:auto;text-align:center;} .lb-text{max-width:70ch;font-size:16px;line-height:1.75;color:var(--ink-2);} .sec-navy .lb-text{color:rgba(255,255,255,.82);} .lb-fig{margin:0;} .lb-fig img{width:100%;height:auto;border-radius:var(--r-lg);display:block;} .lb-fig figcaption{margin-top:10px;font-size:12.5px;color:var(--ink-3);} .sec-navy .lb-fig figcaption{color:rgba(255,255,255,.7);} .lb-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:center;} .lb-split.is-right .lb-split-media{order:2;} .lb-split img{width:100%;height:auto;border-radius:var(--r-lg);display:block;} .lb-split h2{font-size:clamp(22px,2.4vw,30px);} .lb-split p{margin-top:14px;font-size:15.5px;line-height:1.7;color:var(--ink-2);} .sec-navy .lb-split p{color:rgba(255,255,255,.8);} .lb-cta{display:flex;flex-direction:column;align-items:flex-start;gap:14px;} .lb-cta p{max-width:60ch;font-size:15.5px;line-height:1.7;color:var(--ink-2);} .sec-navy .lb-cta p{color:rgba(255,255,255,.8);} .lb-form{max-width:560px;} .lb-sp-s{height:12px;} .lb-sp-m{height:32px;} .lb-sp-l{height:64px;} @media(max-width:820px){ .lb-split{grid-template-columns:1fr;gap:22px;} .lb-split.is-right .lb-split-media{order:0;} }