/* Proyectos y Gestión 360 — constructora de casas de madera en Mallorca */
:root{
  --ink:#0e0d0b;--ink-2:#0a0908;--ink-3:#1a1815;
  --paper:#f2ede4;--paper-2:#e7e0d3;--paper-3:#e4dccf;
  --cream:#f3eee6;--copper:#c08a58;--copper-dk:#8f5f33;--sand:#d6b48f;
  --mute:#b8b0a3;--mute-2:#c9c1b4;--mute-3:#e2dbcf;--mute-4:#8a8275;
  --body-dk:#5f574c;--body-dk-2:#7a7266;
  --line-dk:rgba(243,238,230,.18);--line-lt:rgba(26,24,21,.18);
  --gutter:clamp(20px,4vw,58px);
  --font:'Montserrat','Helvetica Neue',Arial,sans-serif;--display:var(--font);
  --t-xs:10px;--t-s:11.5px;--t-l:clamp(22px,2.4vw,34px);--t-xl:clamp(34px,min(4.5vw,8.4svh),86px);
  --ease-out:cubic-bezier(.22,1,.36,1);--ease-expo:cubic-bezier(.16,1,.3,1);
}
html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-bottom:calc(var(--as-y) + 72px)}   /* el foco no queda bajo la pastilla fija */
html,body{margin:0;background:var(--ink);color:var(--cream);font-family:var(--font);font-weight:300;-webkit-font-smoothing:antialiased}
html{text-transform:uppercase;letter-spacing:.06em}
input,textarea,button,select{text-transform:uppercase;letter-spacing:inherit}
input::placeholder{text-transform:uppercase}
b,strong{font-weight:500}
*{box-sizing:border-box}
img{max-width:100%}
a{color:inherit;text-decoration:none}
a:hover{color:var(--copper)}
::selection{background:var(--copper);color:var(--ink)}
input,textarea,button,select{font-family:inherit}
h1,h2,h3,h4{margin:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html[data-cc],html[data-cc] *{cursor:none!important}

@keyframes reveal-down{from{opacity:0;filter:blur(8px);transform:translateY(-18px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
@keyframes reveal-side{from{opacity:0;filter:blur(8px);transform:translate(-20px,-50%)}to{opacity:1;filter:blur(0);transform:translate(0,-50%)}}
@keyframes title-rise{from{opacity:0;filter:blur(12px);transform:translateY(42px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
@keyframes fact-rise{from{opacity:0;filter:blur(7px);transform:translateY(18px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
@keyframes portal-caption{from{opacity:0;filter:blur(7px);transform:translateY(22px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
@keyframes menu-row{from{opacity:.35;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
@keyframes count-out{to{opacity:0;filter:blur(7px);transform:translate(-50%,-34px)}}
@keyframes pre-zoom{from{opacity:0;transform:scale(1.32)}20%{opacity:1}to{opacity:1;transform:scale(1)}}
@keyframes img-reveal{from{opacity:0;clip-path:inset(10% 6% 10% 6%)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}html{scroll-behavior:auto}}

/* Scroll reveal: only hidden when JS is running */
.js [data-reveal]{opacity:0}
.js [data-reveal].is-in{animation:fact-rise .9s var(--ease-out) var(--d,0s) both}
.js [data-reveal="img"].is-in{animation:img-reveal 1.4s var(--ease-expo) var(--d,0s) both}
.js [data-reveal="float"].is-in{animation:float-in 1.4s var(--ease-out) var(--d,0s) both}

/* Logo / preloader */
.floating-logo{position:fixed;z-index:61;left:28px;top:20px;width:92px;height:auto;cursor:pointer;transition:left 2s var(--ease-expo),top 2s var(--ease-expo),width 2s var(--ease-expo),transform 2s var(--ease-expo),opacity .4s ease;will-change:left,top,width,transform}
.floating-logo.is-away{opacity:0;pointer-events:none}
a:focus-visible>.floating-logo{outline:2px solid var(--cream);outline-offset:6px;border-radius:6px}
.is-preloading .floating-logo{left:50%;top:50%;width:220px;transform:translate(-50%,-50%)}
.preloader,.preloader-count{display:none}
.is-preloading .preloader{display:block;position:absolute;inset:0;z-index:20;background:#000;overflow:hidden}
.preloader.is-out{display:block;position:absolute;inset:0;z-index:20;background:#000;overflow:hidden;transition:opacity 1.1s ease}
.preloader img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:pre-zoom 3.3s var(--ease-out) both}
.preloader::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.35),rgba(0,0,0,.15) 40%,#000 100%)}
.is-preloading .preloader-count,.preloader-count.is-out{position:fixed;z-index:62;left:50%;bottom:clamp(22px,3.1vh,28px);display:flex;align-items:flex-end;gap:4px;transform:translateX(-50%);line-height:1}
.preloader-count.is-out{animation:count-out .75s var(--ease-out) both}
.preloader-count b{font-family:var(--display);font-weight:200;font-size:72px;font-variant-numeric:tabular-nums}
.preloader-count span{font-size:22px;padding-bottom:8px}

/* Cursor */
.cursor{position:fixed;left:0;top:0;z-index:100;width:1px;height:1px;pointer-events:none;opacity:0;transition:opacity .2s ease;mix-blend-mode:difference}
.cursor-orbit{position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;border:1px solid #fff;background:rgba(255,255,255,.35)}
.cursor-dot{position:absolute;left:0;top:0;width:10px;height:10px;border-radius:50%;background:#fff}
.cursor-label{position:absolute;left:0;top:0;font-size:var(--t-xs);font-weight:400;color:#fff;white-space:nowrap;opacity:0;transition:opacity .2s ease}

/* Hero */
:root{--hero-min:600px}
.hero{position:relative;height:100svh;min-height:var(--hero-min);overflow:hidden;background:var(--ink-2)}
/* Recorrido del hero: queda fijo mientras se baja y cada tramo (90svh) pasa a la siguiente inspiración.
   Mide 100lvh para que en móvil no quede una franja vacía al recogerse la barra del navegador (los textos de
   abajo suben lo que mide esa barra) y, si es más alto que la ventana, se fija por abajo para no cortar H1/H2. */
.hero-track{position:relative;height:calc(max(100vh,var(--hero-min)) + 2 * 90vh);height:calc(max(100lvh,var(--hero-min)) + 2 * 90svh)}
.hero-track>.hero{position:sticky;top:0;top:min(0px,calc(100lvh - var(--hero-min)));height:100vh;height:100lvh}
.hero-track .hero-bottom{bottom:calc(var(--as-y) + 100lvh - 100svh)}
/* Móvil: tramos más cortos, el dedo recorre las tres casas sin cansarse */
@media (max-width:759px){
  .hero-track{height:calc(max(100vh,var(--hero-min)) + 2 * 62vh);height:calc(max(100lvh,var(--hero-min)) + 2 * 62svh)}
}
.no-js .hero-track{height:auto}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.hero-bg.is-active{opacity:1}
.hero-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,.08) 30%,transparent 46%,rgba(0,0,0,.78) 100%)}
.hero-shade-side{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to right,rgba(0,0,0,.45) 0%,rgba(0,0,0,.14) 22%,transparent 36%)}
.portal-canvas{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none}

.insp-list{position:absolute;z-index:4;left:clamp(18px,1.95vw,28px);top:44%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;font-size:var(--t-s);text-shadow:0 1px 12px rgba(0,0,0,.55)}
.js .insp-list{opacity:0}
.insp-list .label{font-size:var(--t-xs);letter-spacing:.22em;text-transform:uppercase;color:#fff;margin-bottom:6px;font-weight:400}
.insp-item{display:flex;align-items:center;gap:10px;min-height:22px;padding:0;border:0;background:none;color:inherit;font-size:var(--t-s);text-align:left;cursor:pointer;opacity:.92;text-shadow:inherit}
.insp-item::before{content:"";width:0;height:14px;border-radius:50%;background:#fff;transition:width .3s var(--ease-out)}
.insp-item[aria-current="true"]{font-size:var(--t-s);font-weight:400;opacity:1}
.insp-item[aria-current="true"]::before{width:14px}

.portal-wrap{position:absolute;z-index:4;left:50%;top:44%;width:clamp(180px,23vw,300px);transform:translate(-50%,-50%)}
.chrome{transition:opacity .45s ease,filter .45s ease}
.chrome.is-hidden{opacity:0;filter:blur(8px)}
.portal-heading{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:14px;text-shadow:0 1px 14px rgba(0,0,0,.45)}
.js .portal-heading{opacity:0}
.portal-heading small{font-size:var(--t-xs);letter-spacing:.22em;text-transform:uppercase;font-weight:400}
.portal-heading span{font-size:var(--t-s);white-space:nowrap}
.portal-heading strong{font-size:var(--t-s);font-weight:400;margin-left:8px}
.portal{position:relative;display:block;width:100%;aspect-ratio:320/350;padding:0;border:0;border-radius:90px;background:transparent;cursor:pointer}
.no-js .portal{background:center/cover no-repeat url(img/casa-madera-mallorca-estilo-contemporaneo.jpg)}

.hero-bottom{position:absolute;z-index:4;left:var(--gutter);right:calc(var(--as-w) + var(--as-x) + 32px);bottom:var(--as-y);display:flex;flex-direction:column;align-items:flex-start;gap:12px;text-shadow:0 1px 18px rgba(0,0,0,.35)}
.hero-h1{margin:0;font-size:var(--t-xs);line-height:1.5;letter-spacing:.22em;text-transform:uppercase;font-weight:400;color:var(--cream)}
.hero-h1{text-shadow:0 1px 2px rgba(0,0,0,.8),0 0 12px rgba(0,0,0,.5)}
.hero-h1 span{color:var(--sand)}
.hero-title{margin:0;font-family:var(--display);font-weight:200;font-size:var(--t-xl);line-height:1.04;letter-spacing:.05em;text-transform:uppercase}
.js .hero-bottom>*{opacity:0}

/* ---------- Bajo el hero ----------
   Una sola familia (Montserrat fina), todo en mayúsculas espaciadas, textos alineados a la izquierda o a la
   derecha (nunca centrados) y párrafos justificados. El movimiento va por capas al hacer scroll con `translate`,
   que no choca con las animaciones de entrada que usan `transform`. */
:root{--ox-bg:#fbfaf7;--ox-ink:#121110;--ox-ink2:#1d1b18;--ox-on:#f7f3ec;--ox-mute:#5a5249;--ox-line:rgba(18,17,16,.12);
  --ox-pad:clamp(20px,5vw,72px);
  --ox-sh1:0 1px 2px 0 rgba(18,17,16,.1),0 4px 4px 0 rgba(18,17,16,.09),0 9px 6px 0 rgba(18,17,16,.05),0 17px 7px 0 rgba(18,17,16,.01),inset 0 2px 8px 0 rgba(255,255,255,.5);
  --ox-sh2:0 0 0 .5px rgba(0,0,0,.05),0 4px 30px rgba(0,0,0,.08);
  --ox-shlg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
@keyframes ox-up{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes ox-trail{from{opacity:1;transform:translate(-50%,-50%) rotate(var(--r)) scale(1)}to{opacity:0;transform:translate(-50%,-50%) rotate(var(--r)) scale(.6)}}

.ox{position:relative;z-index:2;background:var(--ox-bg);color:var(--ox-ink)}
.ox b,.ft b{font-weight:500}
.js [data-anim]{opacity:0}
.js [data-anim].is-in{animation:ox-up .8s ease-out var(--d,0s) both}
.lbl{margin:0;font-size:var(--t-xs);font-weight:500;letter-spacing:.28em;line-height:1.6;color:var(--ox-ink)}
.jt{text-align:left}
@media (min-width:900px){.jt{text-align:justify;text-align-last:left;hyphens:auto;-webkit-hyphens:auto}}

/* Botones */
.ox-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 28px;border-radius:999px;font-size:var(--t-xs);font-weight:500;letter-spacing:.2em;white-space:nowrap;transition:transform .25s var(--ease-out),opacity .25s,background .25s}
.ox-btn:hover{transform:translateY(-1px);color:inherit}
.ox-btn:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
.ox-btn-1{background:var(--ox-ink);color:#fff;box-shadow:var(--ox-sh1)}
.ox-btn-1:hover{color:#fff}
.ox-btn-av{padding-left:6px}
.ox-av{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--copper-dk);color:var(--ox-on);font-size:var(--t-xs);letter-spacing:.1em}
.ox-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* [04] La obra: secuencia fijada a pantalla completa */
.ob{position:relative;height:720vh;background:var(--ink);color:#fff}
.ob-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.ob-canvas,.ob-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ob-poster{opacity:0}
.no-js .ob-poster,.ox-static .ob-poster,.ob-still .ob-poster{opacity:1}
.no-js .ob-canvas,.ox-static .ob-canvas,.ob-still .ob-canvas{display:none}
.ob-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,9,8,.5) 0%,rgba(10,9,8,0) 22%,rgba(10,9,8,0) 58%,rgba(10,9,8,.66) 100%)}
.ob-head{position:absolute;left:var(--ox-pad);right:var(--ox-pad);top:clamp(24px,5vh,44px);display:flex;justify-content:space-between;align-items:baseline;gap:24px}
.ob-kicker,.ob-count{margin:0;font-size:var(--t-xs);font-weight:400;letter-spacing:.28em;line-height:1.6;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.ob-kicker b{font-weight:500}
.ob-count{white-space:nowrap;font-variant-numeric:tabular-nums}
.ob-bar{position:absolute;left:var(--ox-pad);right:var(--ox-pad);top:calc(clamp(24px,5vh,44px) + 30px);height:1px;background:rgba(255,255,255,.24)}
.ob-bar i{display:block;height:100%;width:100%;background:#fff;transform-origin:0 50%;transform:scaleX(0)}
.ob-steps{position:absolute;left:var(--ox-pad);right:var(--ox-pad);bottom:calc(var(--as-y) + 52px + clamp(28px,5vh,56px));margin:0;padding:0;list-style:none;height:5.2em}
.ob-steps li{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:10px;opacity:0;translate:0 18px;transition:opacity .6s ease,translate .8s var(--ease-out)}
.ob-steps li:nth-child(even){align-items:flex-end;text-align:right}
.ob-steps li.on{opacity:1;translate:0 0}
.ob-steps b{font-weight:200;font-size:var(--t-l);line-height:1.1;letter-spacing:.08em;text-shadow:0 2px 20px rgba(0,0,0,.3)}
.ob-steps span{font-size:var(--t-xs);letter-spacing:.2em;line-height:1.8;color:rgba(255,255,255,.86)}
@media (max-width:759px){
  .ob{height:480vh}
  .ob-head{flex-direction:column;align-items:flex-start;gap:6px}
  .ob-bar{top:calc(clamp(24px,5vh,44px) + 54px)}
  .ob-steps{bottom:calc(12px + 52px + 28px + env(safe-area-inset-bottom,0px));height:6.4em}
}
.no-js .ob,.ox-static .ob{height:auto}
.no-js .ob-pin,.ox-static .ob-pin{position:relative}
.no-js .ob-steps,.ox-static .ob-steps{height:auto;display:flex;flex-direction:column;gap:14px}
.no-js .ob-steps li,.ox-static .ob-steps li{position:relative;opacity:1;translate:none}
.no-js .ob-bar,.ox-static .ob-bar,.no-js .ob-count,.ox-static .ob-count{display:none}

/* [02] Alejandro por capas: nombre lento, bloque y foto a media velocidad, párrafos por delante */
.al{position:relative;height:340vh}
.al-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);padding:0 var(--ox-pad)}
.al-stage{position:relative;height:100%;display:flex;flex-direction:column;padding-top:clamp(72px,12vh,128px)}
.al-fig{position:relative;flex:1;min-height:0}
.al-right{display:flex;flex-direction:column;gap:clamp(16px,3vh,32px);height:100%;width:100%;max-width:480px;margin-left:auto;padding-top:clamp(72px,12vh,128px)}
.al-name{position:relative;flex:none;align-self:flex-end;width:max-content;margin:0;text-align:right;font-weight:200;font-size:var(--t-xl);line-height:1.04;letter-spacing:.05em;color:#d6cbbb;white-space:nowrap;will-change:translate;pointer-events:none}
.al-block{position:absolute;left:18%;bottom:0;width:46%;height:82%;background:linear-gradient(180deg,#e9ddcc,#d6c2a7);will-change:translate}
.al-photo{position:absolute;left:4%;bottom:0;width:min(94%,640px);height:auto;max-height:100%;object-fit:contain;object-position:left bottom;transform-origin:50% 100%;will-change:translate,scale;filter:drop-shadow(0 30px 40px rgba(18,17,16,.12))}
.al-col{position:relative;flex:1;min-height:0;margin-bottom:calc(clamp(24px,5vh,44px) + 20px);overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%)}
.al-txt{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;gap:34px;will-change:transform}
.al-p{margin:0;will-change:opacity,translate}
.al-h{font-weight:200;font-size:var(--t-l);line-height:1.18;letter-spacing:.06em;color:var(--ox-ink2)}
.al-txt .jt{font-size:var(--t-s);line-height:2;letter-spacing:.1em;color:var(--ox-ink2)}
.al-txt .jt b{font-weight:500}
.al-cta{display:flex;justify-content:flex-end}
.al-rail{position:absolute;right:var(--ox-pad);bottom:clamp(24px,5vh,44px);width:min(480px,calc(50% - var(--ox-pad)));height:1px;background:var(--ox-line)}
.al-rail i{display:block;height:100%;background:var(--ox-ink);transform-origin:0 50%;transform:scaleX(0)}
/* Tablet y móvil: la misma escena fija por capas, apilada. Arriba el nombre y la foto; debajo, la columna de
   texto que sube y se ilumina en el centro; abajo queda sitio para el botón de presupuesto. */
@media (max-width:899px){
  .al{height:320vh}
  .al-pin{display:flex;flex-direction:column;gap:0;padding:clamp(56px,8svh,84px) 0 0}
  .al-stage{flex:none;height:auto;padding-top:0}
  .al-right{display:contents}
  .al-name{order:-1;padding:0 var(--ox-pad) 10px;text-align:right}
  .al-fig{flex:none;height:min(32svh,86vw);overflow:hidden}
  .al-block{left:auto;right:var(--ox-pad);width:52%;height:66%}
  .al-photo{left:auto;right:0;width:min(104%,620px);max-height:94%;object-position:right bottom}
  .al-col{flex:1;min-height:0;margin:6px 0 calc(var(--as-mh) + 40px + env(safe-area-inset-bottom,0px))}
  .al-txt{padding:0 var(--ox-pad);gap:24px}
  .al-rail{left:var(--ox-pad);right:var(--ox-pad);width:auto;bottom:calc(var(--as-mh) + 26px + env(safe-area-inset-bottom,0px))}
}
/* Móviles bajos (360x640…): foto más baja para que la columna de texto tenga sitio */
@media (max-width:899px) and (max-height:700px){
  .al-pin{padding-top:48px}
  .al-fig{height:25svh}
}
.no-js .al,.ox-static .al{height:auto}
.no-js .al-pin,.ox-static .al-pin{position:relative;height:auto;min-height:100svh;padding-top:96px;padding-bottom:96px}
.no-js .al-col,.ox-static .al-col{overflow:visible;-webkit-mask-image:none;mask-image:none}
.no-js .al-txt,.ox-static .al-txt{position:static}

/* [04] Su frase */
.fr{max-width:1100px;margin:0 auto;padding:clamp(96px,14vw,180px) var(--ox-pad) clamp(48px,8vw,96px)}
.fr-q{margin:0;max-width:980px;font-weight:200;font-size:var(--t-l);line-height:1.24;letter-spacing:.05em;color:var(--ox-ink2)}
.fr-a{margin:32px 0 0;text-align:right;font-size:var(--t-xs);letter-spacing:.28em;color:var(--ox-mute)}
.ox-w{opacity:.14;transition:opacity .35s ease}
.ox-w.on{opacity:1}

/* Cabeceras de sección: etiqueta a la izquierda, texto o controles a la derecha */
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 48px;margin:0 0 40px;padding-bottom:18px;border-bottom:1px solid var(--ox-line)}
.sec-head .jt{margin:0;max-width:420px;font-size:var(--t-s);line-height:1.9;letter-spacing:.12em;color:var(--ox-mute)}

/* [06] Proyectos: capas que se apilan */
.ox-projects{max-width:1280px;margin:0 auto;padding:clamp(56px,8vw,96px) var(--ox-pad) 24px}
.ox-proj{position:sticky;top:calc(9vh + var(--k) * 22px);padding-bottom:clamp(64px,8vw,80px)}
.ox-proj:last-child{padding-bottom:0}
.ox-proj:focus-within{z-index:3}   /* con el teclado, la capa enfocada no queda bajo la siguiente */
.ox-proj-card{transform-origin:50% 0;will-change:transform}
.ox-proj-img{position:relative;height:min(68vh,56vw);overflow:hidden;background:#e9e4da}
@media (max-width:767px){.ox-proj-img{height:min(62vh,128vw)}}
.ox-proj-img img{display:block;width:100%;height:120%;object-fit:cover}
.ox-proj-img::before{content:"";position:absolute;inset:30% 0 0;z-index:1;background:linear-gradient(180deg,rgba(10,9,8,0),rgba(10,9,8,.75));pointer-events:none}
.ox-proj-img::after{content:"";position:absolute;inset:0;z-index:3;background:#000;opacity:var(--dim,0);pointer-events:none}
.ox-proj-txt{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;gap:10px;padding:clamp(22px,3.4vw,48px);color:#fff}
.ox-proj-r .ox-proj-txt{align-items:flex-end;text-align:right}
.ox-proj-n{font-size:var(--t-xs);letter-spacing:.28em;color:#fff}
.ox-proj-txt h3{margin:0;font-weight:200;font-size:var(--t-l);line-height:1;letter-spacing:.1em;color:#fff}
.ox-proj-txt p{margin:0;max-width:420px;font-size:var(--t-xs);line-height:1.8;letter-spacing:.18em;color:#fff}
.ox-proj-cta{display:inline-flex;align-items:center;gap:10px;margin-top:6px;padding:10px 0;font-size:var(--t-xs);font-weight:500;letter-spacing:.24em;color:#fff;border-bottom:1px solid rgba(255,255,255,.5);transition:gap .3s var(--ease-out),border-color .3s}
.ox-proj-cta:hover,.ox-proj-cta:focus-visible{color:#fff;gap:16px;border-color:#fff}

/* [06] Preguntas: panel de cristal sobre una casa terminada */
.fq{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding:clamp(96px,14vh,160px) var(--ox-pad)}
.fq-bg{position:absolute;inset:-12% 0;pointer-events:none}
.fq-bg img{width:100%;height:100%;object-fit:cover;will-change:translate}
.fq-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,8,.55),rgba(10,9,8,.35) 40%,rgba(10,9,8,.6))}
.fq-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(32px,6vw,96px);align-items:start;max-width:1280px;margin:0 auto}
.fq-head{display:flex;flex-direction:column;gap:18px;position:sticky;top:clamp(96px,14vh,140px)}
.fq-head .lbl{color:#fff}
.fq-head p{margin:0;max-width:300px;font-size:var(--t-s);line-height:2;letter-spacing:.12em;color:#fff}
.fq-glass{padding:8px clamp(20px,3vw,40px);border-radius:24px;background:rgba(14,13,11,.2);border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 30px 80px rgba(0,0,0,.25);backdrop-filter:blur(26px) saturate(1.3);-webkit-backdrop-filter:blur(26px) saturate(1.3)}
.fq-item+.fq-item{border-top:1px solid rgba(255,255,255,.16)}
.fq-item h3{margin:0}
.fq-q{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;width:100%;padding:22px 0;border:0;background:none;color:#fff;font:inherit;font-size:var(--t-s);font-weight:500;letter-spacing:.14em;line-height:1.6;text-align:left;cursor:pointer}
.fq-q:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:4px}
.fq-n{font-size:var(--t-xs);font-weight:400;letter-spacing:.24em;color:rgba(255,255,255,.6)}
.fq-q i{position:relative;width:12px;height:12px;flex:none}
.fq-q i::before,.fq-q i::after{content:"";position:absolute;left:0;top:50%;width:12px;height:1px;background:#fff;transition:transform .4s var(--ease-out)}
.fq-q i::after{transform:rotate(90deg)}
.fq-item.is-open .fq-q i::after{transform:rotate(0)}
.fq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-out)}
.fq-a>div{overflow:hidden}
.fq-item.is-open .fq-a{grid-template-rows:1fr}
.fq-a p{margin:0;padding:0 30px 24px calc(var(--t-xs) * 2.6 + 18px);font-size:var(--t-s);line-height:2;letter-spacing:.1em;color:#fff}
@media (max-width:899px){
  .fq-in{grid-template-columns:1fr}
  .fq-head{position:static}
  .fq-a p{padding-left:0;padding-right:0}
}
.no-js .fq-a,.ox-static .fq-a{grid-template-rows:1fr}

/* [07] Construyamos tu casa: arranca el bloque oscuro del final */
.ct{background:var(--ink);color:var(--cream)}
.ox-partner{position:relative;display:grid;grid-template-columns:1fr;gap:48px;max-width:1280px;margin:0 auto;padding:clamp(120px,16vw,220px) var(--ox-pad) clamp(72px,9vw,120px);overflow:hidden;touch-action:pan-y}
.ct-h{position:relative;z-index:2;margin:0;font-weight:200;font-size:var(--t-l);line-height:1;letter-spacing:.06em;color:#fff;pointer-events:none}
.ct-h b{font-weight:500}
.ct-side{position:relative;z-index:2;justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:28px;max-width:380px}
@media (min-width:900px){.ox-partner{grid-template-columns:minmax(0,1fr) minmax(260px,340px);align-items:end;column-gap:clamp(48px,6vw,96px)}}
.ct-side .jt{margin:0;font-size:var(--t-s);line-height:2;letter-spacing:.14em;color:rgba(243,238,230,.72)}
.ox-btn-light{background:var(--cream);color:var(--ink);box-shadow:0 10px 40px rgba(0,0,0,.35)}
.ox-btn-light:hover{color:var(--ink);background:#fff}
.ox-trail{position:absolute;z-index:1;width:clamp(120px,13vw,190px);aspect-ratio:4/3;object-fit:cover;box-shadow:0 20px 50px rgba(0,0,0,.5);pointer-events:none;animation:ox-trail 1s ease forwards}

/* Pie oscuro: cuatro columnas, la marca a todo el ancho y una barra legal */
.ft{background:var(--ink);color:var(--cream);padding:0 var(--ox-pad) calc(96px + env(safe-area-inset-bottom,0px));overflow:hidden}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr 1fr;gap:40px;max-width:1280px;margin:0 auto;padding-top:64px;border-top:1px solid rgba(243,238,230,.12)}
.ft-brand{display:flex;flex-direction:column;gap:22px;max-width:300px}
.ft-logo{width:clamp(96px,8vw,128px);height:auto;opacity:.92}
.ft-brand p,.ft-col li{margin:0;font-size:var(--t-xs);line-height:1.9;letter-spacing:.2em;color:rgba(243,238,230,.66)}
.ft-h{margin:0 0 18px;font-size:var(--t-xs);font-weight:500;letter-spacing:.28em;color:#fff}
.ft-col ul{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.ft-col a{color:rgba(243,238,230,.66);transition:color .25s}
.ft-col a:hover,.ft-col a:focus-visible{color:#fff}
.ft-word{max-width:1280px;margin:clamp(64px,9vw,120px) auto 0;font-weight:200;font-size:var(--t-xl);line-height:1.04;letter-spacing:.05em;color:rgba(243,238,230,.94);will-change:translate;pointer-events:none}
.ft-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;max-width:1280px;margin:28px auto 0;padding-top:18px;border-top:1px solid rgba(243,238,230,.12);font-size:var(--t-xs);letter-spacing:.22em;color:rgba(243,238,230,.66)}
.ft-legal{display:flex;flex-wrap:wrap;gap:8px 24px}
.ft-legal a{color:rgba(243,238,230,.66);transition:color .25s}
.ft-legal a:hover,.ft-legal a:focus-visible{color:#fff}
.ft-top{color:rgba(243,238,230,.66);transition:color .25s}
.ft-top:hover,.ft-top:focus-visible{color:#fff}
.ft-note{max-width:1280px;margin:12px auto 0;font-size:var(--t-xs);line-height:1.8;letter-spacing:.12em;color:rgba(243,238,230,.52)}
@media (max-width:899px){.ft-grid{grid-template-columns:1fr 1fr;row-gap:44px}.ft-brand{grid-column:1 / -1}}
@media (max-width:420px){.ft-grid{grid-template-columns:1fr}}

/* Movimiento reducido: sin secuencia ni capas, todo visible */
@media (prefers-reduced-motion:reduce){
  .ob,.al{height:auto}
  .ob-pin{position:relative}
  .al-pin{position:relative}
  .al-pin{min-height:100svh}
  .al-col{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .al-txt{position:static}
  .ox-w{opacity:1}
  .ox-proj{position:static}
}

/* Portátiles bajos: el H1 se queda a la izquierda de la ventana central (no la pisa) */
@media (min-width:760px) and (max-height:820px){
  .hero-h1{max-width:calc(50vw - var(--gutter) - clamp(90px,11.5vw,150px) - 24px)}
}
/* Narrow (<760px): sin lista de inspiraciones, como el prototipo */
@media (max-width:759px){
  .insp-list{display:none}
  .floating-logo{left:18px;top:22px;width:78px}
  :root{--hero-min:680px}
  .portal-wrap{top:40%;width:150px}
  .hero-bottom{right:var(--gutter);bottom:calc(var(--as-mh) + 28px + env(safe-area-inset-bottom,0px))}
  .hero-track .hero-bottom{bottom:calc(var(--as-mh) + 28px + env(safe-area-inset-bottom,0px) + 100lvh - 100svh)}
  :root{--t-xl:clamp(24px,7vw,32px)}
  .hero-title{letter-spacing:.04em}
  .portal-heading{text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 14px rgba(0,0,0,.5)}
}
/* Móviles bajos (360x640…): el hero mide la pantalla y la ventana se ancla arriba */
@media (max-width:759px) and (max-height:700px){
  :root{--hero-min:0px}
  .portal-wrap{top:76px;transform:translateX(-50%);width:clamp(96px,calc(100svh - 492px),150px)}
}

/* ---------- Presupuesto al instante ----------
   Cerrado: botón flotante (abajo a la derecha sobre el hero, centrado al bajar). Abierto: formulario corto. */
:root{--as-w:400px;--as-pw:292px;--as-x:clamp(18px,2vw,32px);--as-y:clamp(18px,3vh,30px);--as-mh:64px}
@keyframes as-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.asistente{position:fixed;z-index:75;right:calc(var(--as-x) + env(safe-area-inset-right,0px));bottom:calc(var(--as-y) + env(safe-area-inset-bottom,0px));width:var(--as-pw);height:52px;border-radius:26px;overflow:hidden;color:var(--cream);background:rgba(14,13,11,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.16);box-shadow:0 18px 50px rgba(0,0,0,.28);transition:width .6s var(--ease-expo),height .6s var(--ease-expo),right .6s var(--ease-expo),bottom .6s var(--ease-expo),border-radius .6s var(--ease-expo),background-color .4s ease}
.js .asistente{opacity:0}
.js:not(.is-ready) .asistente{visibility:hidden}
.is-ready .asistente{animation:as-in .8s var(--ease-out) .9s both}
.asistente[data-state="pill"]{right:calc(50% - var(--as-pw) / 2)}
.asistente[data-state="open"]{width:min(var(--as-w),calc(100vw - 40px));height:min(620px,calc(100svh - 2 * var(--as-y)));border-radius:22px;background:#0b0a09;border-color:rgba(255,255,255,.1);box-shadow:0 30px 90px rgba(0,0,0,.5)}

.as-teaser{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;padding:0 22px;white-space:nowrap;border:0;background:none;color:inherit;font:inherit;font-size:var(--t-xs);font-weight:500;letter-spacing:.22em;cursor:pointer;transition:opacity .25s ease,visibility 0s}
.as-teaser::after{content:"→";font-weight:300;letter-spacing:0;transition:transform .25s var(--ease-out)}
.as-teaser:hover::after{transform:translateX(3px)}
.as-teaser:focus-visible{outline:2px solid var(--copper);outline-offset:-4px;border-radius:inherit}

.as-panel{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s .3s}
.asistente[data-state="open"] .as-teaser{opacity:0;visibility:hidden;transition:opacity .15s ease,visibility 0s .15s}
.asistente[data-state="open"] .as-panel{opacity:1;visibility:visible;transition:opacity .4s ease .25s,visibility 0s}
.as-top{display:flex;align-items:center;gap:12px;padding:18px 18px 16px 22px;border-bottom:1px solid rgba(243,238,230,.1)}
.as-avatar{position:relative;flex:none;width:34px;height:34px;border-radius:50%;overflow:hidden;background:var(--copper-dk);color:var(--cream);display:flex;align-items:center;justify-content:center;font-size:var(--t-xs);letter-spacing:.1em}
.as-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.as-title{flex:1;margin:0;font-size:var(--t-xs);font-weight:500;letter-spacing:.22em;line-height:1.6}
.as-title small{display:block;font-size:var(--t-xs);font-weight:300;letter-spacing:.16em;color:rgba(243,238,230,.6)}
.as-icon{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:transparent;color:var(--cream);font-size:16px;line-height:1;cursor:pointer;transition:background .2s,color .2s}
.as-icon:hover,.as-icon:focus-visible{background:var(--cream);color:var(--ink);outline:none}
.as-form,.as-done{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:18px;padding:22px}
.as-form{scroll-padding-bottom:96px}   /* el campo enfocado no queda bajo el botón fijo */
.as-form[hidden],.as-done[hidden]{display:none}
.as-f{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0;padding:0;border:0}
.as-f>span,.as-f legend{padding:0;font-size:var(--t-xs);letter-spacing:.22em;color:rgba(243,238,230,.6)}
.as-f legend{margin-bottom:10px}
.as-chips{display:flex;flex-wrap:wrap;gap:6px}
.as-chips label{position:relative;cursor:pointer}
.as-chips input{position:absolute;opacity:0;width:1px;height:1px}
.as-chips span{display:inline-flex;align-items:center;height:32px;padding:0 13px;border:1px solid rgba(243,238,230,.2);border-radius:999px;font-size:var(--t-xs);letter-spacing:.16em;transition:background .2s,color .2s,border-color .2s}
.as-chips label:hover span{border-color:rgba(243,238,230,.5)}
.as-chips input:checked+span{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.as-chips input:focus-visible+span{outline:2px solid var(--copper);outline-offset:2px}
.as-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.as-f input,.as-f select,.as-f textarea{width:100%;height:38px;padding:0;border:0;border-bottom:1px solid rgba(243,238,230,.24);border-radius:0;background:transparent;color:#fff;font:inherit;font-size:var(--t-s);letter-spacing:.1em;outline:none;transition:border-color .2s;-webkit-appearance:none;appearance:none}
.as-f select{padding-right:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23f3eee6' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right center/10px 6px}
.as-f select option{color:#121110;background:#fff}
.as-f textarea{height:auto;min-height:96px;padding:10px 0;line-height:1.7;resize:vertical}
.as-f textarea::placeholder,.as-f input::placeholder{color:rgba(243,238,230,.56)}
.as-f input:focus,.as-f select:focus,.as-f textarea:focus{border-bottom-color:var(--cream)}
.as-f [aria-invalid="true"]{border-bottom-color:var(--sand)}
.as-error{margin:0;font-size:var(--t-xs);letter-spacing:.14em;line-height:1.7;color:var(--sand)}
/* Enviar siempre a la vista: fijo al pie del formulario, con un velo del color del panel que tapa lo que pasa por
   detrás y lo funde unos píxeles por encima (se intuye que hay más). Al final del recorrido el velo cae en el hueco. */
.as-send{position:sticky;bottom:0;z-index:1;flex:none;height:46px;margin-top:12px;border:0;border-radius:999px;background:var(--cream);color:var(--ink);font:inherit;font-size:var(--t-xs);font-weight:500;letter-spacing:.22em;cursor:pointer;box-shadow:0 20px 12px 40px #0b0a09;transition:background .2s}
.as-send:hover{background:#fff}
.as-send:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
.as-send:disabled{background:#96938e;cursor:wait}   /* el crema al 60 % sobre el panel, opaco para no transparentar el velo */
.as-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.as-rgpd p{margin:0;font-size:var(--t-xs);line-height:1.8;letter-spacing:.06em;color:rgba(243,238,230,.55)}
.as-rgpd b{font-weight:500;color:rgba(243,238,230,.8)}
.as-rgpd a,.as-check a{color:var(--cream);text-decoration:underline;text-underline-offset:2px}
.as-check{position:relative;display:flex;align-items:flex-start;gap:12px;cursor:pointer;font-size:var(--t-xs);line-height:1.7;letter-spacing:.12em;color:rgba(243,238,230,.8)}
.as-check input{position:absolute;opacity:0;width:1px;height:1px}
.as-check span{position:relative;display:block;padding-left:26px}   /* la segunda línea no pasa bajo la casilla */
.as-check span::before{content:"";position:absolute;left:0;top:1px;width:14px;height:14px;margin:0;border:1px solid rgba(243,238,230,.45);border-radius:3px;background:transparent center/9px no-repeat;transition:background-color .2s,border-color .2s}
.as-check input:checked+span::before{background-color:var(--cream);border-color:var(--cream);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' fill='none' stroke='%230e0d0b' stroke-width='1.6'/%3E%3C/svg%3E")}
.as-check input:focus-visible+span::before{outline:2px solid var(--copper);outline-offset:2px}
.as-check input[aria-invalid="true"]+span::before{border-color:var(--sand)}
.as-legal a{color:var(--cream);text-decoration:underline;text-underline-offset:2px}
.as-done{justify-content:center}
.as-done-t{margin:0;font-size:var(--t-l);font-weight:200;line-height:1.3;letter-spacing:.06em;color:#fff;outline:none}
.as-done-m{margin:0;font-size:var(--t-s);line-height:2;letter-spacing:.1em;color:rgba(243,238,230,.75)}
.as-done-a{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.as-done-a a,.as-done-a button{height:40px;padding:0 18px;display:inline-flex;align-items:center;border-radius:999px;border:1px solid rgba(243,238,230,.24);background:transparent;color:var(--cream);font:inherit;font-size:var(--t-xs);letter-spacing:.2em;cursor:pointer}
.as-done-a>:first-child{background:var(--cream);color:var(--ink);border-color:var(--cream)}

/* Móvil: botón centrado abajo → formulario a pantalla completa */
@media (max-width:759px){
  .asistente{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(14,13,11,.95)}   /* el desenfoque sobre lo que se mueve es caro en móvil */
  .asistente{right:calc(50% - var(--as-pw) / 2);bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .asistente[data-state="open"]{right:0;bottom:0;width:100%;height:100vh;height:100dvh;border-radius:0;border:0}
  .as-top{padding-top:max(18px,env(safe-area-inset-top,0px))}
  .as-form{padding-bottom:max(22px,env(safe-area-inset-bottom,0px))}
  .is-chat-open,.is-chat-open body{overflow:hidden}
}

/* ---------- Blog en la home (generado por CONTENT) ----------
   Sección clara entre las preguntas (oscuro) y el contacto (oscuro): cabecera .sec-head, tres tarjetas y el
   enlace a todo el blog. Las mismas tarjetas se usan en las subpáginas (relacionadas e índice de casas). */
.hb{max-width:1280px;margin:0 auto;padding:clamp(80px,11vw,150px) var(--ox-pad) clamp(64px,9vw,120px)}
.hb .sec-head .jt{text-align:left}
.hb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px)}
.hb-card{position:relative;display:flex;flex-direction:column;gap:14px}
.hb-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:#e9e4da}
.hb-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.hb-card:hover .hb-img img{transform:scale(1.04)}
.hb-meta{margin:8px 0 0;font-size:var(--t-xs);letter-spacing:.24em;line-height:1.6;color:var(--ox-mute)}
.hb-t{font-weight:500;font-size:var(--t-s);line-height:1.75;letter-spacing:.14em;color:var(--ox-ink)}
.hb-t a{color:inherit}
.hb-t a::after{content:"";position:absolute;inset:0;z-index:1}
.hb-t a:focus-visible{outline:none}
.hb-card:focus-within{outline:2px solid var(--copper);outline-offset:8px}
.hb-x{margin:0;font-size:var(--t-s);line-height:2;letter-spacing:.1em;color:var(--ox-mute)}
.hb-more{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;margin-top:auto;padding:10px 0 8px;font-size:var(--t-xs);font-weight:500;letter-spacing:.24em;color:var(--ox-ink);border-bottom:1px solid rgba(18,17,16,.3);transition:gap .3s var(--ease-out),border-color .3s}
.hb-card:hover .hb-more{gap:16px;border-color:var(--ox-ink)}
.hb-all{display:flex;justify-content:flex-end;margin:clamp(40px,5vw,64px) 0 0}
.hb-all a{display:inline-flex;align-items:center;gap:10px;padding:10px 0;font-size:var(--t-xs);font-weight:500;letter-spacing:.24em;color:var(--ox-ink);border-bottom:1px solid rgba(18,17,16,.3);transition:gap .3s var(--ease-out),border-color .3s}
.hb-all a:hover,.hb-all a:focus-visible{color:var(--ox-ink);gap:16px;border-color:var(--ox-ink)}
@media (max-width:899px){.hb-grid{grid-template-columns:1fr;gap:56px}.hb-img{aspect-ratio:16/10}}