/* ==========================================================================
   ISPIRATO · v2.0 · home (recorrido, manifiesto, casa, proyectos, cifras)
   ========================================================================== */

/* ---------- precarga ---------- */
#pre{position:fixed;inset:0;z-index:200;background:var(--bg);display:grid;place-items:center;transition:opacity .8s var(--ease),visibility .8s}
#pre.is-done{opacity:0;visibility:hidden}
#pre>div{display:grid;justify-items:center;gap:1.5rem}
#pre img{width:clamp(48px,7vw,70px);height:auto;opacity:.85;filter:brightness(0) invert(1)}
#pre .bar{width:min(200px,40vw);height:1px;background:rgba(245,243,239,.14);overflow:hidden}
#pre .bar b{display:block;height:100%;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .25s linear}

/* ---------- recorrido (hero + servicios) ---------- */
#recorrido{position:relative;height:1800vh;background:var(--bg)}
.stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;background:var(--bg)}
#canvasPlane{position:absolute;inset:0;will-change:transform;transform-origin:50% 55%}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage__top{position:absolute;left:0;right:0;top:0;height:18vh;z-index:2;background:linear-gradient(to bottom,rgba(8,8,8,.5),rgba(8,8,8,0));pointer-events:none}
.stage__bottom{position:absolute;left:0;right:0;bottom:0;height:52vh;z-index:2;background:linear-gradient(to top,rgba(8,8,8,.62) 0%,rgba(8,8,8,.3) 45%,rgba(8,8,8,0) 100%);pointer-events:none}
#heroDark{position:absolute;inset:0;z-index:2;background:#060606;opacity:0;pointer-events:none}
#jrnBar{position:absolute;left:0;right:0;bottom:0;z-index:8;height:1px;background:rgba(245,243,239,.08)}
#jrnBar b{display:block;height:100%;background:var(--acc);transform:scaleX(0);transform-origin:left}

.techlines{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none}
.techlines i{position:absolute;background:rgba(var(--acc-rgb),.3)}
.techlines .h1{left:8%;right:8%;top:34%;height:1px;transform:scaleX(0);transform-origin:left}
.techlines .h2{left:8%;right:8%;bottom:26%;height:1px;opacity:.7;transform:scaleX(0);transform-origin:right}
.techlines .v1{left:23%;top:18%;bottom:18%;width:1px;opacity:.85;transform:scaleY(0);transform-origin:top}
.techlines .v2{right:27%;top:24%;bottom:24%;width:1px;opacity:.6;transform:scaleY(0);transform-origin:bottom}
.techlines .n1,.techlines .n2{top:34%;width:9px;height:9px;background:none;border:1px solid rgba(var(--acc-rgb),.5);transform:scale(0)}
.techlines .n1{left:23%;margin:-4px 0 0 -4px}.techlines .n2{right:27%;margin:-4px -4px 0 0}

.moms{position:absolute;inset:0;z-index:5;pointer-events:none}
.mom{position:absolute;inset:0;display:grid;place-content:end start;justify-items:start;gap:1.15rem;padding:0 clamp(1.25rem,7vw,7rem) clamp(3.5rem,10vh,7rem);opacity:0;visibility:hidden;will-change:opacity,transform}
.mom--right{place-content:end end;justify-items:end;text-align:right}
.mom--center{place-content:center;place-items:center;text-align:center;padding:0 clamp(1.25rem,5vw,6rem)}
.mom>*{position:relative}
.mom .scrim{position:absolute;pointer-events:none}
.mom--left .scrim{left:-12%;right:30%;bottom:-8%;top:22%;background:radial-gradient(60% 62% at 22% 82%,rgba(6,6,6,.62),rgba(6,6,6,0) 72%)}
.mom--right .scrim{right:-12%;left:30%;bottom:-8%;top:22%;background:radial-gradient(60% 62% at 78% 82%,rgba(6,6,6,.62),rgba(6,6,6,0) 72%)}
.mom--center .scrim{left:0;right:0;top:14%;bottom:14%;background:radial-gradient(52% 50% at 50% 50%,rgba(6,6,6,.82),rgba(6,6,6,.4) 55%,rgba(6,6,6,0) 78%)}
.mom h1,.mom h2{font-weight:400;letter-spacing:-0.02em}
.mom--hero h1{font-size:clamp(2.1rem,5.4vw,4.7rem);max-width:19ch}
.mom--center h2{font-size:clamp(2rem,5vw,4.3rem);max-width:20ch}
.mom--svc h2{font-size:clamp(2.6rem,7vw,6rem)}
.mom .rule{transform:scaleX(0);transform-origin:left}
.mom--right .rule{transform-origin:right}
.mom--center .rule{transform-origin:center}
.mom p{max-width:46ch;margin:0;color:var(--text-soft);font-size:clamp(.96rem,1.28vw,1.14rem);text-shadow:0 4px 18px rgba(0,0,0,.5)}
.mom .act{pointer-events:auto}
.mom .btn{pointer-events:auto}
.mom .link{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--font-display);font-size:.92rem;letter-spacing:.06em;color:var(--acc);pointer-events:auto}
.mom .link i{display:block;width:26px;height:1px;background:currentColor;transition:width .45s var(--ease)}
.mom .link:hover i{width:40px}
.mom--right .link{flex-direction:row-reverse}
.mom--hero .sub{color:var(--dim);font-size:.9rem;letter-spacing:.04em;font-family:var(--font-display)}

/* ---------- manifiesto + casa ---------- */
#manifiesto{position:relative;height:460vh;z-index:3}
#manifiesto .stage{overflow:visible}
.man__txt{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:0 clamp(1.25rem,6vw,7rem);text-align:center;pointer-events:none}
.man__txt>div{position:relative;display:grid;justify-items:center;width:100%;max-width:1200px}
.man__l{grid-area:1/1;font-weight:300;font-size:clamp(2.2rem,7vw,5.8rem);line-height:1;letter-spacing:-0.02em;color:var(--text-soft);opacity:0;visibility:hidden;will-change:opacity,transform}
.man__l .w{display:inline-block;will-change:opacity,filter,transform}
.man__l--c{font-weight:400;font-size:clamp(2.4rem,7.6vw,6.4rem);letter-spacing:-0.025em}
.man__frame{position:absolute;inset:auto 0 0 0;height:100vh;z-index:5;pointer-events:none;overflow:visible}

.casa{
  position:absolute;left:50%;bottom:0;z-index:6;
  width:min(1100px,84vw);transform:translate3d(-50%,50%,0);
  pointer-events:none;will-change:transform,opacity;
}
.casa img{width:100%;height:auto;filter:drop-shadow(0 40px 60px rgba(6,6,6,.55));will-change:filter,clip-path}
.casa__sh{position:absolute;left:8%;right:8%;bottom:-2%;height:18%;background:radial-gradient(50% 60% at 50% 50%,rgba(20,14,8,.55),rgba(20,14,8,0) 72%);z-index:-1}
.casa__ln{position:absolute;left:50%;top:50%;width:0;height:1px;background:rgba(var(--acc-rgb),.5);transform:translateX(-50%)}

/* ---------- proyectos (beige) ---------- */
#proyectos{position:relative;background:var(--acc);color:var(--ink);--text:var(--ink);--muted:var(--ink-soft);--dim:#5A554C}
#proyectos ::selection{background:var(--ink);color:var(--acc)}
#proyectos .btn{--btn-ink:var(--ink);--btn-fill:var(--ink);--btn-on:var(--acc);border-color:rgba(10,10,10,.5)}
.pf__head{padding:calc(min(1100px,84vw) * .30 + 4.5rem) 0 clamp(2.4rem,6vh,4rem);display:grid;gap:1.5rem 4rem;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start}
.pf__head h2{font-size:clamp(2.1rem,5.4vw,4.4rem);font-weight:400;letter-spacing:-0.025em;max-width:16ch;color:var(--ink)}
.pf__head .rule{margin:1.6rem 0 0}
.pf__head p{margin:0;padding-top:.45em;color:var(--ink-soft);font-size:clamp(1rem,1.25vw,1.12rem);max-width:44ch}
.pf__head::after{content:"";grid-column:1/-1;height:1px;background:rgba(10,10,10,.34);margin-top:clamp(1.6rem,4vh,2.6rem)}
@media(max-width:860px){.pf__head{grid-template-columns:1fr}.pf__head p{margin-top:0}}

#pfStack{position:relative;height:560vh}
#pfSticky{position:sticky;top:0;height:100vh;height:100dvh;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,5rem);align-items:center;padding:clamp(5rem,12vh,7rem) var(--gutter) clamp(2.5rem,7vh,5rem);overflow:hidden}
.deck__text{position:relative;display:grid;min-height:min(60vh,520px);align-content:center}
.deck__item{grid-area:1/1;display:grid;gap:1rem;opacity:0;will-change:opacity,transform;pointer-events:none}
.deck__item.is-on{pointer-events:auto}
.deck__idx{display:flex;align-items:center;gap:.9rem;font-family:var(--font-display);font-size:.84rem;letter-spacing:.16em;color:var(--dim)}
.deck__idx i{display:block;width:40px;height:1px;background:rgba(10,10,10,.4)}
.deck__item h3{font-size:clamp(1.9rem,3.8vw,3.2rem);font-weight:400;letter-spacing:-0.025em;color:var(--ink)}
.deck__loc{font-family:var(--font-display);font-size:1rem;color:var(--ink-soft)}
.deck__item p{margin:.2rem 0 0;color:var(--ink-soft);max-width:42ch;font-size:clamp(.96rem,1.12vw,1.04rem)}
.deck__svc{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin-top:.6rem;padding-top:1rem;border-top:1px solid rgba(10,10,10,.28);font-family:var(--font-display);font-size:.86rem;letter-spacing:.06em;color:var(--ink)}
.deck__svc span+span::before{content:"";display:inline-block;width:4px;height:4px;background:rgba(10,10,10,.45);transform:rotate(45deg);margin-right:.9rem;vertical-align:middle}
.deck__year{font-family:var(--font-display);font-size:.86rem;color:var(--dim);letter-spacing:.1em}
.deck__cta{margin-top:1.4rem}

.deck__box{position:relative;height:min(72vh,720px);perspective:1400px}
.card__info{display:none}
.card{position:absolute;inset:0;margin:0;overflow:hidden;border-radius:12px;background:var(--surface);will-change:transform,opacity;transform-origin:50% 100%;box-shadow:0 30px 60px -20px rgba(20,14,8,.45)}
.card img{width:100%;height:100%;object-fit:cover}
.card__dim{position:absolute;inset:0;background:var(--bg);opacity:0}
.card figcaption{position:absolute;transition:opacity .3s;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:5rem clamp(1.2rem,2.4vw,2rem) clamp(1.1rem,2.2vw,1.6rem);background:linear-gradient(to top,rgba(10,10,10,.82),rgba(10,10,10,0));color:var(--text-soft)}
.card figcaption{padding-top:7rem;background:linear-gradient(to top,rgba(10,10,10,.9),rgba(10,10,10,.5) 55%,rgba(10,10,10,0))}
.card figcaption div{display:grid;gap:.3rem}
.card figcaption strong{font-family:var(--font-display);font-weight:400;font-size:clamp(1.6rem,2.8vw,2.5rem);letter-spacing:-0.02em;line-height:1.05;color:#F5F3EF}
.card figcaption em{font-style:normal;color:var(--acc);font-family:var(--font-display);font-size:clamp(.9rem,1.1vw,1.02rem);letter-spacing:.06em}
.card figcaption span{color:rgba(245,243,239,.7);font-size:.95rem;font-family:var(--font-display);letter-spacing:.1em}

.pf__end{padding:0 0 clamp(4rem,10vh,7rem)}
.pf__end .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.4rem 2rem;padding-top:2.2rem;border-top:1px solid rgba(10,10,10,.28)}
.pf__end p{margin:0;color:var(--ink-soft);max-width:40ch}

/* móvil: lista en flujo */
@media(max-width:860px){
  #pfStack{height:auto}
  #pfSticky{position:static;height:auto;display:block;padding:0 var(--gutter) 2rem;overflow:visible}
  .deck__text{display:none}
  .deck__box{height:auto;perspective:none;display:grid;gap:2.6rem}
  .card{position:relative;inset:auto;height:62vh;transform:none !important;opacity:1 !important;box-shadow:0 18px 40px -20px rgba(20,14,8,.5)}
  .card__dim{display:none}
  .card figcaption{flex-direction:column;align-items:flex-start;gap:.3rem}
  .deck__box{gap:1rem}
  .card__info{display:grid;gap:.6rem;padding:.2rem .2rem 2.2rem}
  .card__info h3{font-size:1.6rem;font-weight:400;letter-spacing:-0.02em}
  .card__info p{margin:0;color:var(--ink-soft);font-size:.95rem;max-width:none}
  .card__info .deck__year{display:none}
}

/* ---------- trayectoria (cifras) ---------- */
#nosotros{padding:var(--section) 0;background:var(--bg)}
#nosotros .split{align-items:center}
#nosotros h2{font-size:clamp(1.9rem,4.2vw,3.3rem);font-weight:400;letter-spacing:-0.025em;max-width:18ch}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(1.4rem,3vw,3rem);margin-top:.6rem}
.stat{padding:1.5rem 0 1.4rem;border-top:1px solid rgba(var(--acc-rgb),.24)}
.stat b{display:flex;align-items:baseline;gap:.25rem;font-family:var(--font-display);font-weight:300;font-size:clamp(3.2rem,6.2vw,5.4rem);line-height:.95;letter-spacing:-0.035em;font-variant-numeric:tabular-nums;
  background-image:linear-gradient(180deg,#F5F3EF 0%,#F1EDE5 34%,var(--acc) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.stat b small{font-size:.42em;letter-spacing:0}
.stat>span{display:block;margin-top:.6rem;color:var(--dim);font-size:.86rem;letter-spacing:.02em}
#nosotros h2{font-size:clamp(1.7rem,3.4vw,2.6rem)}
#nosotros .stats{margin-top:1.4rem}
@media(max-width:480px){.stats{grid-template-columns:1fr}}
.team{margin:0}
.team>div{position:relative;overflow:hidden;background:var(--surface)}
.team img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%}
.team>div::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,10,.55),rgba(10,10,10,0) 55%)}
.team figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:1.2rem;padding-top:1rem;margin-top:1rem;border-top:1px solid rgba(var(--acc-rgb),.24);color:var(--dim);font-size:.9rem}
.team figcaption span:first-child{color:var(--text)}

/* ---------- contacto ---------- */
#contacto{background:var(--bg-alt);padding:var(--section) 0}
#contacto h2{font-size:clamp(2rem,4.8vw,3.8rem);font-weight:400;letter-spacing:-0.025em;max-width:16ch}
#contacto .rule{margin:1.8rem 0}
.contact__aside{display:grid;gap:1.6rem;align-content:start}
.contact__aside .data{margin-top:.6rem}

/* ---------- faq ---------- */
#faq{padding:var(--section) 0}
#faq h2{font-size:clamp(1.7rem,3.6vw,2.8rem);font-weight:400;letter-spacing:-0.02em;margin-bottom:clamp(2.2rem,6vh,3.4rem);max-width:24ch}

/* móvil: recorrido más corto y textos más contenidos */
@media(max-width:767px){
  #recorrido{height:1100vh}
  .mom{padding:0 var(--gutter) clamp(5rem,14vh,8rem)}
  .mom--hero h1{font-size:clamp(2rem,9vw,2.8rem)}
  .mom--svc h2{font-size:clamp(2.4rem,12vw,3.6rem)}
  #manifiesto{height:380vh}
  .casa{width:min(560px,94vw)}
  .pf__head{padding-top:calc(min(560px,94vw) * .30 + 3.5rem)}
}
@media(prefers-reduced-motion:reduce){
  .man__l .w{opacity:1 !important;filter:none !important;transform:none !important}
}