/* =================================================================
   Sophiq · Habitar el Cambio — Página de proyecto (responsive)
   Navbar + Footer del design system (adaptados) · hero 100vh full-bleed
   · vídeo full-bleed · galería editorial · animación pin del trío.
================================================================= */

:root{
  --color-nero:#1A191E; --color-bianco:#FAFAF8; --color-crema:#F4F2EE;
  --color-neutral-100:#EAE7E1; --color-neutral-200:#D8D4CC; --color-neutral-300:#BFB9AE;
  --color-neutral-400:#9C968B; --color-neutral-500:#7A746A; --color-neutral-600:#5A554D; --color-neutral-700:#3D3933;
  --bg-primary:var(--color-bianco); --bg-secondary:var(--color-crema);
  --text-primary:var(--color-nero); --text-secondary:var(--color-neutral-600); --text-tertiary:var(--color-neutral-500); --text-inverse:var(--color-bianco);
  --border-subtle:var(--color-neutral-100);
  --font-sans:"Suisse Intl","Suisse Int'l",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-regular:400; --font-medium:500;
  --text-body-sm:14px;
  --space-sm:8px; --space-md:12px; --space-lg:16px; --space-xl:24px; --space-2xl:32px; --space-3xl:48px; --space-4xl:64px; --space-5xl:96px;
  --container-lg:1280px;
  --radius-md:4px;
  --duration-fast:100ms; --duration-base:200ms; --duration-medium:300ms; --duration-slow:400ms;
  --ease-out:cubic-bezier(0,0,0.2,1);
  --nav-height:72px;
  --gutter: 95px;   /* margen lateral FIJO (no crece con el ancho); overrides por breakpoint abajo */
  --img-gap: clamp(20px, 2.2vw, 32px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;-webkit-font-smoothing:antialiased;}
body{font-family:var(--font-sans);font-weight:var(--font-regular);color:var(--text-primary);background:var(--bg-primary);line-height:1.5;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
img{max-width:100%;display:block;}
ul{list-style:none;}

/* ---------- NAVBAR (logo + hamburguesa) ---------- */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--nav-height);padding:0 var(--gutter);
  background:transparent;border-bottom:0.5px solid transparent;
  transition:transform .45s var(--ease-out),background-color var(--duration-medium) var(--ease-out),border-color var(--duration-medium) var(--ease-out);}
/* oculto al bajar, vuelve al subir */
.navbar.is-hidden{transform:translateY(-100%);}
/* fuera del hero: fondo blanco + logo oscuro */
.navbar.is-solid{background:var(--color-bianco);border-bottom-color:var(--border-subtle);}
.navbar-inner{max-width:none;margin:0;height:100%;display:flex;align-items:center;justify-content:space-between;}
.navbar-logo{flex-shrink:0;display:flex;align-items:center;}
.navbar-logo img{height:18px;width:auto;transition:filter var(--duration-medium) var(--ease-out);}
/* logo blanco sobre hero; al volverse sólido (fondo blanco) el logo pasa a negro */
.navbar.is-solid .navbar-logo img{filter:brightness(0);}
.hamburger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:24px;height:24px;flex-shrink:0;}
.hamburger span{display:block;height:1.5px;width:100%;background:var(--text-primary);border-radius:1px;transform-origin:center;
  transition:transform var(--duration-base) var(--ease-out),opacity var(--duration-base) var(--ease-out),background-color var(--duration-medium) var(--ease-out);}
.hamburger.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.is-active span:nth-child(2){opacity:0;transform:scaleX(0);}
.hamburger.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.navbar.is-menu-open .hamburger span{background:var(--color-bianco);}

/* Overlay menu */
.menu-overlay{position:fixed;top:var(--nav-height);left:0;right:0;bottom:0;z-index:999;padding:0 var(--gutter);
  background:var(--color-nero);color:var(--color-bianco);display:flex;flex-direction:column;opacity:0;visibility:hidden;overflow-y:auto;
  transition:opacity var(--duration-slow) var(--ease-out),visibility var(--duration-slow) var(--ease-out);}
.menu-overlay.is-open{opacity:1;visibility:visible;}
.menu-body{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:var(--space-2xl) 0 var(--space-3xl);max-width:none;margin:0;width:100%;}
.menu-nav{display:flex;flex-direction:column;}
.menu-nav-link{font-size:1.5rem;font-weight:var(--font-regular);color:var(--color-bianco);padding:var(--space-md) 0;opacity:0;transform:translateY(15px);
  transition:opacity var(--duration-fast) var(--ease-out);}
@media(min-width:768px){.menu-nav-link{font-size:1.75rem;}}
.menu-overlay.is-open .menu-nav-link{opacity:1;transform:none;transition:opacity var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out);}
.menu-overlay.is-open .menu-nav-link:nth-child(1){transition-delay:50ms;}
.menu-overlay.is-open .menu-nav-link:nth-child(2){transition-delay:90ms;}
.menu-overlay.is-open .menu-nav-link:nth-child(3){transition-delay:130ms;}
.menu-overlay.is-open .menu-nav-link:nth-child(4){transition-delay:170ms;}
.menu-overlay.is-open .menu-nav-link:nth-child(5){transition-delay:210ms;}
.menu-overlay.is-open .menu-nav-link:nth-child(6){transition-delay:250ms;}
.menu-nav-link:hover{color:var(--color-neutral-400);}
.menu-social{display:flex;gap:var(--space-lg);padding-top:var(--space-xl);border-top:0.5px solid var(--color-neutral-700);margin-top:var(--space-xl);}
.menu-social a{font-size:var(--text-body-sm);color:var(--color-neutral-400);}
.menu-social a:hover{color:var(--color-bianco);}

/* ---------- HERO (siempre 100vh full-bleed) ---------- */
.hero{position:relative;width:100%;height:100vh;height:100svh;min-height:560px;
  background:var(--color-nero) center/cover no-repeat;color:#fff;display:flex;}
.hero::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,0.22);}
.hero__inner{position:relative;z-index:2;width:100%;max-width:none;margin:0;
  display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--gutter) clamp(40px,6vh,64px);}
.hero__logo{width:clamp(150px,26vw,356px);margin-bottom:clamp(90px,11vh,130px);}
.hero__logo img{width:100%;height:auto;}
.hero__credits{display:flex;flex-wrap:nowrap;gap:24px;width:100%;justify-content:space-between;}
.hero__credits>div{flex:1 1 0;text-align:left;}
.hero__credits>div:not(:first-child):not(:last-child){text-align:center;}  /* columnas centrales centradas */
.hero__credits>div:last-child{text-align:right;}                          /* última a la derecha */
.cred__label{font-size:10px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;font-weight:var(--font-regular);}
.cred__value{font-size:16px;line-height:20px;font-weight:var(--font-medium);margin-top:5px;}
.hero h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---------- VÍDEO full-bleed (16:9 desktop · 4:5 móvil) ---------- */
.video{width:100%;margin-top:clamp(72px,10vh,120px);}
.video__frame{position:relative;width:100%;aspect-ratio:16/9;background:#0e0f12;overflow:hidden;}
.video__frame iframe,.video__frame video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;}
.video__ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;color:rgba(255,255,255,.7);
  background:radial-gradient(120% 120% at 50% 40%,#25272d,#131419);}
.video__play{width:64px;height:64px;border-radius:50%;border:1px solid rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;}
.video__play span{width:0;height:0;margin-left:4px;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent rgba(255,255,255,.8);}
.video__cap{font-size:13px;letter-spacing:.04em;text-transform:uppercase;}
/* capa de play: evita que el iframe atrape el scroll mientras no se reproduce */
.video__cover{position:absolute;inset:0;z-index:2;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 50%, rgba(0,0,0,.05), rgba(0,0,0,.22));}

/* ---------- GALERÍA ---------- */
.gallery{width:100%;max-width:none;margin:0;padding:clamp(72px,10vh,120px) var(--gutter) 0;
  display:flex;flex-direction:column;gap:clamp(48px,6vw,96px);}
/* galería móvil oculta en desktop */
.gallery-mobile{display:none;}

/* placeholder (proyecto sin fotos todavía) */
figure.ph{position:relative;background:#ede9e3;}
figure.ph::after{content:'Próximamente';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#b9b6ae;}
.g-row{display:flex;gap:var(--img-gap);align-items:flex-start;}
.g-row>figure{flex:1 1 0;}
figure{margin:0;overflow:hidden;background:#ededea;}
figure img{width:100%;height:100%;object-fit:cover;}
.ar-tall   {aspect-ratio:617/867;}
.ar-wide   {aspect-ratio:616/580;}
.ar-wc     {aspect-ratio:1035/568;}
.ar-single {aspect-ratio:468/658;}
.ar-full   {aspect-ratio:1440/780;}
.g-center{display:flex;justify-content:center;}
.g-center>figure{width:72%;}
.g-left>figure{width:72%;margin-right:auto;}
.g-offset{display:flex;}
.g-offset>figure{width:43%;margin-left:24%;}
/* full-bleed (rompe a viewport) en desktop/tablet */
.g-full{width:100vw;margin-left:calc(50% - 50vw);}
.g-full figure{aspect-ratio:1440/780;}

/* ---------- TRÍO (laterales con parallax a la par del scroll) ---------- */
.trio{position:relative;max-width:none;margin:0;padding:0 var(--gutter);}
.trio__stage{display:flex;align-items:center;justify-content:center;gap:var(--img-gap);}
.trio__col{flex:1 1 0;}
.trio__col figure{aspect-ratio:468/620;}
.trio__col--side{will-change:transform;transition:none;backface-visibility:hidden;}  /* JS controla translateY a la par del scroll */

/* ---------- FOOTER (design system) ---------- */
.site-footer{background:var(--bg-secondary);padding:var(--space-3xl) var(--gutter) var(--space-2xl);margin-top:clamp(96px,12vh,150px);}
@media(min-width:768px){.site-footer{padding:var(--space-4xl) var(--gutter) var(--space-3xl);}}
.footer-inner{max-width:none;margin:0;}
.footer-top{display:flex;flex-direction:column;gap:var(--space-2xl);}
@media(min-width:768px){.footer-top{flex-direction:row;justify-content:space-between;align-items:stretch;}}
.footer-left{display:flex;flex-direction:column;gap:var(--space-xl);}
@media(min-width:768px){.footer-left{justify-content:space-between;}}
.footer-logo img{height:28px;width:auto;}
.footer-copyright{font-size:var(--text-body-sm);color:var(--text-tertiary);}
.footer-columns{display:flex;flex-direction:column;gap:var(--space-xl);}
@media(min-width:768px){.footer-columns{flex-direction:row;gap:var(--space-4xl);}}
@media(min-width:1024px){.footer-columns{gap:var(--space-5xl);}}
.footer-col ul{display:flex;flex-direction:column;gap:var(--space-sm);}
.footer-col a,.footer-col li{font-size:var(--text-body-sm);font-weight:var(--font-regular);color:var(--text-primary);display:inline-block;
  transition:font-weight var(--duration-fast) var(--ease-out);}
.footer-col a:hover{font-weight:var(--font-medium);}
.footer-col--legal a,.footer-col--legal li{color:var(--text-tertiary);}
.footer-col--legal a:hover{color:var(--text-primary);}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* CTA "consulta otras propiedades" */
.cta-wrap{max-width:none;margin:0;padding:clamp(80px,12vh,150px) var(--gutter) 0;}
.cta{display:inline-flex;align-items:center;gap:18px;font-size:clamp(30px,4.5vw,45px);line-height:1;position:relative;}
.cta span{position:relative;}
.cta span::after{content:'';position:absolute;left:0;bottom:-6px;height:1px;width:0;background:currentColor;transition:width .4s var(--ease-out);}
.cta:hover span::after{width:100%;}
.cta img{width:16px;height:16px;flex-shrink:0;}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease;}
.reveal.is-visible{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1023px){
  :root{--gutter:64px;}
  .g-center>figure{width:84%;}
  .g-left>figure{width:84%;}
  .g-offset>figure{width:60%;margin-left:18%;}
}
@media(max-width:767px){
  :root{--gutter:20px;}
  /* hero credits apilados en móvil */
  .hero__credits{flex-direction:column;gap:18px;}
  .hero__credits>div,
  .hero__credits>div:not(:first-child):not(:last-child),
  .hero__credits>div:last-child{text-align:left;}
  /* en móvil usamos la galería propia (gallery-mobile) y ocultamos la de desktop */
  .gallery-desktop{display:none;}
  .gallery-mobile{display:flex;flex-direction:column;gap:40px;padding:40px 0 0;}
  .video ~ .gallery-mobile{padding-top:0;}   /* si hay vídeo, el espacio lo da el margen del vídeo */
  /* vídeo: márgenes superior e inferior de 40px en móvil */
  .video{margin:40px 0;}
  .gallery-mobile figure{width:100%;overflow:hidden;background:#ededea;}
  .gallery-mobile figure img{width:100%;height:100%;object-fit:cover;display:block;}
  .gallery-mobile .fmt1{aspect-ratio:4/5;}                                  /* formato 1: 4:5 full bleed */
  .gallery-mobile .fmt2{aspect-ratio:3/4;width:calc(100% - 80px);margin:0 40px;}  /* formato 2: 3:4 con márgenes 40px */
  /* el vídeo es 16:9 → el marco lo iguala para que no haya franjas negras */
  .video__frame{aspect-ratio:16/9;}
}

/* =================================================================
   HOME — Habitar el Cambio
================================================================= */
.home-intro{display:flex;gap:var(--img-gap);align-items:flex-start;flex-wrap:wrap;
  padding:calc(var(--nav-height) + clamp(56px,9vh,120px)) var(--gutter) clamp(56px,8vh,110px);}
.home-intro__title{flex:1 1 0;}
.home-intro__title img{width:100%;max-width:396px;height:auto;display:block;}
/* texto en la columna derecha → alineado con el margen izq. de la 2ª imagen (Inefable), y bajado */
.home-intro__text{flex:1 1 0;max-width:718px;margin-top:clamp(80px,12vh,160px);font-size:16px;line-height:21px;color:var(--text-primary);}
.home-intro__text p{margin:0;}
.home-intro__text p + p{margin-top:16px;}

.home-gallery{display:flex;flex-direction:column;gap:clamp(56px,7vw,110px);padding:0 var(--gutter);}
.hg-row{display:flex;gap:var(--img-gap);align-items:flex-start;}
.hg-row .home-card{flex:1 1 0;}
.hg-center{display:flex;justify-content:center;}
.hg-center .home-card{width:72%;}

.home-card{display:block;color:inherit;}
.home-card figure{position:relative;overflow:hidden;background:#ededea;margin:0;}
.home-card__photo{width:100%;height:100%;object-fit:cover;display:block;}
.home-card .ar-tall{aspect-ratio:617/780;}
.home-card .ar-wide{aspect-ratio:616/520;}
.home-card .ar-wc{aspect-ratio:1035/560;}
.home-card__grad{position:absolute;inset:0;background:rgba(25,26,30,.30);opacity:0;transition:opacity .4s var(--ease-out);pointer-events:none;}
.home-card__logo{position:absolute;left:24px;bottom:24px;height:34px;width:auto;max-width:65%;object-fit:contain;object-position:left bottom;opacity:0;transition:opacity .4s var(--ease-out);pointer-events:none;}
.home-card:hover .home-card__grad,
.home-card:hover .home-card__logo{opacity:1;}
/* excepción Ópalo: el acento reduce la altura visual, lo compensamos */
.home-card__logo--opalo{height:42px;}
.home-card__label{margin-top:14px;font-size:16px;line-height:20px;color:var(--text-primary);}
.home-card__ph{position:relative;background:#ede9e3;}
.home-card__ph::after{content:'Próximamente';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#b9b6ae;}

/* FAQs */
.home-faqs{padding:clamp(80px,12vh,160px) var(--gutter) 0;display:flex;flex-direction:column;gap:clamp(40px,6vw,72px);}
@media(min-width:1024px){.home-faqs{flex-direction:row;align-items:flex-start;gap:96px;}}
.home-faqs__title{font-size:clamp(72px,15vw,225px);line-height:.96;letter-spacing:-0.02em;font-weight:400;flex-shrink:0;}
.home-faqs__list{flex:1;max-width:640px;}
.faq{border-top:1px solid var(--border-default);}
.faq__q{display:flex;gap:16px;align-items:flex-start;padding:24px 0;cursor:pointer;font-size:16px;line-height:21px;font-weight:500;}
.faq__chev{flex-shrink:0;width:14px;height:14px;margin-top:3px;transition:transform .3s var(--ease-out);}
.faq.open .faq__chev{transform:rotate(180deg);}
.faq__a{display:grid;grid-template-rows:0fr;opacity:0;padding-left:30px;transition:grid-template-rows .5s var(--ease-out),opacity .4s;}
.faq.open .faq__a{grid-template-rows:1fr;opacity:1;}
.faq__a-inner{overflow:hidden;min-height:0;}
.faq__a p{font-size:16px;line-height:21px;font-weight:400;padding-bottom:24px;}

/* HOME móvil */
.home-mobile{display:none;}
@media(max-width:767px){
  .home-intro{flex-direction:column;gap:96px;
    padding:calc(var(--nav-height) + 72px) var(--gutter) 96px;}
  .home-intro__title{width:min(300px,70%);}
  .home-intro__text{flex:0 0 auto;max-width:none;margin-top:0;}   /* en móvil, sin el bajado del desktop */
  .home-gallery{display:none;}                         /* oculta el collage de desktop */
  .home-mobile{display:flex;flex-direction:column;gap:40px;padding:0;}
  .home-mcard{display:block;color:inherit;}
  .home-mcard figure{position:relative;overflow:hidden;background:#ededea;margin:0;}
  .home-mcard__photo{width:100%;height:100%;object-fit:cover;display:block;}
  .home-mcard.m1 figure{aspect-ratio:4/5;}                                  /* formato 1: 4:5 full bleed */
  .home-mcard.m2 figure{aspect-ratio:3/4;width:calc(100% - 80px);margin:0 40px;}  /* formato 2: 3:4 con márgenes */
  .home-mcard__logo{position:absolute;left:24px;bottom:24px;height:30px;width:auto;max-width:60%;object-fit:contain;object-position:left bottom;opacity:0;transition:none;pointer-events:none;}
  .home-mcard__logo--opalo{height:37px;}
  .home-mcard__label{margin:14px 0 0;font-size:16px;line-height:20px;padding:0 20px;}
  .home-mcard.m2 .home-mcard__label{padding:0 40px;}
  .home-mcard__ph{position:relative;background:#ede9e3;}
  .home-mcard__ph::after{content:'Próximamente';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#b9b6ae;}
  .home-faqs{flex-direction:column;padding-top:80px;gap:40px;}
  .home-faqs__title{font-size:96px;}
}

/* =================================================================
   LIGHTBOX (galería de proyecto)
================================================================= */
.gallery-desktop img, .gallery-mobile img{cursor:zoom-in;}
.lb{position:fixed;inset:0;z-index:2000;background:rgba(15,15,18,.96);display:none;}
.lb.is-open{display:block;}
body.lb-lock{overflow:hidden;}
.lb__stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:64px 80px;}
.lb__img{max-width:min(1200px,88vw);max-height:86vh;width:auto;height:auto;object-fit:contain;display:block;cursor:default;user-select:none;-webkit-user-drag:none;}
.lb__close{position:fixed;top:20px;right:24px;width:44px;height:44px;border:0;background:none;cursor:pointer;z-index:3;display:flex;align-items:center;justify-content:center;}
.lb__close svg{width:24px;height:24px;display:block;}
.lb__nav{position:fixed;top:50%;transform:translateY(-50%);width:52px;height:52px;border:0;background:none;cursor:pointer;z-index:3;display:flex;align-items:center;justify-content:center;}
.lb__nav svg{width:30px;height:30px;display:block;}
.lb__nav--prev{left:12px;}
.lb__nav--next{right:12px;}
.lb__counter{position:fixed;bottom:22px;left:0;right:0;text-align:center;color:rgba(255,255,255,.7);font-size:13px;letter-spacing:.06em;z-index:3;}
@media(max-width:767px){
  .lb__stage{padding:64px 14px;}
  .lb__nav{width:40px;height:40px;}
  .lb__nav svg{width:24px;height:24px;}
  .lb__nav--prev{left:2px;} .lb__nav--next{right:2px;}
}