/* cs-layers.css - animacion "capa por capa" (construccion-en-seco, teaser del inicio, anim-seco).
   Todo prefijado cs-. Sin estados ocultos: los esconde cs-layers.js solo si GSAP existe. */

/* ---------- SVG: dibujo tecnico ---------- */
.cs-svg{display:block;width:100%;height:auto;overflow:visible;--sw:1.5}
.cs-l{color:#2C818F;transition:color .5s}
.cs-l.is-active{color:#5CADB8}
.cs-svg .cs-d,.cs-svg .cs-dash,.cs-svg .cs-d-poly,.cs-svg .cs-lead,.cs-svg .cs-seam,.cs-svg .cs-wool{fill:none;stroke:currentColor;stroke-width:var(--sw);stroke-linecap:square;stroke-linejoin:miter}
.cs-svg .cs-plate{stroke-width:calc(var(--sw)*1.8)}
.cs-svg .cs-jack{stroke-width:calc(var(--sw)*1.4)}
.cs-svg .cs-dash{stroke-dasharray:6 6;opacity:.55;stroke-width:calc(var(--sw)*.8)}
.cs-svg .cs-strap{opacity:.8;stroke-dasharray:3 4}
.cs-svg .cs-seam{stroke-width:calc(var(--sw)*.7);opacity:.6}
.cs-svg .cs-mesh{opacity:.5}
.cs-svg .cs-back{opacity:.6}
.cs-svg .cs-cota{stroke:#B8BCB8;stroke-width:calc(var(--sw)*.8)}
.cs-svg .cs-fill{stroke:none}
.cs-svg .cs-slab{fill:rgba(44,129,143,.10)}
.cs-svg .cs-hatchfill{fill:url(#cs-hatch);stroke:none}
.cs-svg .cs-osbfill{fill:rgba(92,173,184,.10)}
.cs-svg .cs-osbtex{fill:url(#cs-osb);stroke:none}
.cs-svg .cs-wool{stroke:#C4C8C3;stroke-width:calc(var(--sw)*.9);opacity:.9}
.cs-svg .cs-memfill{fill:rgba(234,235,231,.07)}
.cs-svg .cs-tyvek{fill:url(#cs-tyv);stroke:none}
.cs-svg .cs-dashpoly{fill:none;stroke:#9DA1A6;stroke-width:calc(var(--sw)*.8);stroke-dasharray:7 5}
.cs-svg .cs-extfill{fill:#1B1E22;fill-opacity:.9}
.cs-svg .cs-yesofill{fill:rgba(234,235,231,.08)}
.cs-svg .cs-paint{fill:rgba(234,235,231,.09)}
.cs-svg .cs-plinth{fill:rgba(44,129,143,.38)}
.cs-svg .cs-cornice{fill:rgba(92,173,184,.30)}
.cs-svg .cs-glass{fill:rgba(92,173,184,.16);stroke:currentColor;stroke-width:calc(var(--sw)*.7)}
.cs-svg .cs-refl{opacity:.65}
.cs-svg .cs-bolt{fill:#15171A;stroke:currentColor;stroke-width:calc(var(--sw)*.9)}
/* rotulos */
.cs-svg .cs-co{transition:opacity .45s}
.cs-svg .cs-co.is-dim{opacity:.38}
.cs-svg .cs-lead{stroke:#5CADB8;stroke-width:calc(var(--sw)*.8)}
.cs-svg .cs-hots{display:none}
.cs-svg .cs-hot circle{fill:#15171A;stroke:#5CADB8;stroke-width:2}
.cs-svg .cs-hot text{font:700 20px 'JetBrains Mono',monospace;fill:#5CADB8}
.cs-svg .cs-dot{fill:#5CADB8}
.cs-svg .cs-nb{fill:#15171A;stroke:#5CADB8;stroke-width:1.3}
.cs-svg .cs-nt{font:700 16px 'JetBrains Mono',monospace;fill:#5CADB8}
.cs-svg .cs-t1{font-family:'Jost',sans-serif;font-weight:400;font-size:20px;letter-spacing:.12em;fill:#ECEDEA}
/* cota de 40 cm: rotulo propio, grande, con halo para leerse sobre las lineas */
.cs-svg .cs-cotat{font:500 21px 'JetBrains Mono',monospace;letter-spacing:.06em;fill:#ECEDEA;stroke:#1A1C1E;stroke-width:6px;stroke-linejoin:round;paint-order:stroke}
.cs-svg .cs-cota-m{stroke:#ECEDEA;stroke-width:calc(var(--sw)*1.1)}
.cs-svg .cs-t2{font:500 13.5px 'JetBrains Mono',monospace;letter-spacing:.04em;fill:#9DA1A6}
.cs-svg .cs-t3{font:700 10.5px 'JetBrains Mono',monospace;letter-spacing:.16em;fill:#9A9FA3}
.cs-svg .cs-cap{font:500 11px 'JetBrains Mono',monospace;letter-spacing:.2em;fill:#9DA1A6;opacity:.7}

/* ---------- seccion protagonista ---------- */
.cs{position:relative;overflow-x:clip}
.cs > .wrap:first-child{padding-top:clamp(72px,9vw,120px)}
.cs-stage{position:relative}
.cs-grid{display:grid;grid-template-columns:minmax(300px,.5fr) 2fr;max-width:min(1640px,calc(100vw - 56px));gap:clamp(24px,3vw,56px);align-items:center;min-height:min(86vh,820px)}
.cs-panel{position:relative}
.cs-count{display:flex;align-items:flex-end;gap:10px;margin-bottom:22px;font-weight:300;color:var(--teal-light)}
.cs-digits{font-family:Jost,sans-serif;font-weight:200;height:1em;overflow:hidden;font-size:clamp(96px,10.5vw,168px);line-height:1;letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.cs-digits span{display:block;height:1em;transition:transform .7s var(--ease-o)}
.cs-of{font-size:clamp(20px,2vw,30px);color:var(--on-dark-soft);padding-bottom:.35em;letter-spacing:0}
.cs-steps{list-style:none;position:relative}
.cs-step{padding:26px 0 30px;border-top:1px solid var(--line-dark)}
.cs-step .cs-sn{display:block;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--teal-light)}
.cs-step h3{margin:12px 0 10px;font-weight:300;letter-spacing:.09em;text-transform:uppercase;line-height:1.1;font-size:clamp(24px,2.6vw,38px)}
.cs-step p{color:var(--on-dark-soft);font-size:16px;max-width:44ch}
.cs-step .cs-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;max-width:none}
.cs-data{display:inline-flex;align-items:center;padding:5px 10px;border:1px solid var(--teal);font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-light)}
.cs-fig{position:relative}
.cs-bar{position:relative;height:3px;margin-top:10px;background:var(--line-dark);overflow:hidden}
.cs-bar i{position:absolute;inset:0;background:var(--teal-light);transform-origin:left;transform:scaleX(1)}

/* modo fijado (desktop, con GSAP) */
.cs.cs-pinned .cs-stage{height:100vh;box-sizing:border-box;padding-top:var(--nav-h);overflow:hidden}
.cs.cs-pinned .cs-grid{height:100%;min-height:0}
.cs.cs-pinned .cs-steps{min-height:290px}
.cs.cs-pinned .cs-step{position:absolute;inset:0 0 auto 0;border-top:none;padding:0;opacity:0;transform:translate3d(0,18px,0);pointer-events:none;transition:opacity .45s var(--ease-o),transform .6s var(--ease-o)}
.cs.cs-pinned .cs-step.is-active{opacity:1;transform:none;pointer-events:auto}
.cs.cs-pinned .cs-steps::before{content:"";display:block;height:1px;background:var(--line-dark);margin-bottom:26px}

/* sin pin (reducido / sin JS): figura sticky, pasos en columna */
@media (min-width:768px){
  .cs:not(.cs-pinned) .cs-fig{position:sticky;top:calc(var(--nav-h) + 24px);align-self:start}
  .cs:not(.cs-pinned) .cs-grid{align-items:start}
  .cs:not(.cs-pinned) .cs-count{display:none}
  .cs:not(.cs-pinned) .cs-step{padding:34px 0 38px;min-height:42vh}
}
.cs .ref-note{margin-top:30px;margin-bottom:clamp(56px,7vw,96px)}

@media (max-width:767px){
  .cs-grid{grid-template-columns:1fr;gap:0;min-height:0}
  .cs-fig{order:-1;position:sticky;top:calc(var(--nav-h) - 1px);z-index:3;margin-inline:calc(var(--pad)*-1);padding:6px var(--pad) 10px;background:var(--carbon);border-bottom:1px solid var(--line-dark)}
  .cs-svg{--sw:3.1}
  .cs-svg .cs-cotat{font-size:40px;stroke-width:11px;letter-spacing:.04em}
  .cs-svg .cs-co,.cs-svg .cs-cap,.cs-svg .cs-plate-t{display:none}
  .cs-svg .cs-hots{display:block}
  .cs-count{display:none}
  .cs-step{padding:30px 0 34px;min-height:34vh}
  .cs-step .cs-sn{font-size:13px}
  .cs-step h3{font-size:clamp(30px,9vw,40px)}
  .cs-fig .cs-svg{height:min(36svh,270px);width:100%}
}

/* ---------- teaser del inicio ---------- */
.cs-teaser{padding-block:clamp(72px,9vw,128px)}
.cs-teaser > .wrap.cs-tgrid{padding-top:0}
.cs-tgrid{display:grid;grid-template-columns:minmax(280px,.62fr) 1.7fr;gap:clamp(24px,3vw,64px);align-items:center}
.cs-tcopy{display:flex;flex-direction:column;gap:20px}
.cs-tcopy h2{font-size:clamp(40px,5.6vw,84px)}
.cs-tcopy > p{color:var(--on-dark-soft);font-size:17px;max-width:44ch}
.cs-mini{list-style:none;display:grid;border-top:1px solid var(--line-dark);margin-top:6px}
.cs-mini li{display:flex;gap:14px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line-dark);font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-soft);transition:color .4s}
.cs-mini li b{color:var(--teal);transition:color .4s}
.cs-mini li.is-on{color:var(--on-dark)}
.cs-mini li.is-on b{color:var(--teal-light)}
.cs-teaser .cs-co,.cs-teaser .cs-cap,.cs-teaser .cs-plate-t{display:none}
.cs-teaser .cs-cotat{font-size:26px;stroke-width:8px}
.cs-teaser .cs-hots{display:block}
.cs-teaser .cs-fig .cs-svg{transform:scale(1.18);transform-origin:50% 50%}
@media (max-width:900px){
  .cs-tgrid{grid-template-columns:1fr}
  .cs-teaser .cs-svg{--sw:2.6}
  .cs-teaser .cs-fig{order:-1}
  .cs-teaser .cs-fig .cs-svg{transform:none}
}

/* ---------- anim-seco: composicion vertical 9:16 ---------- */
body.cs-reel-body{margin:0;background:#0b0c0e;min-height:100vh;display:grid;place-items:center;overflow:hidden}
.cs-reel{width:min(100vw,calc(100vh*9/16));aspect-ratio:9/16;container-type:size;position:relative;background:var(--carbon);overflow:hidden}
.cs-rframe{position:absolute;inset:0;background:radial-gradient(120% 70% at 50% 46%,#1f2328 0,#15171A 62%)}
.cs-rframe::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(110deg,transparent 0 7cqw,rgba(255,255,255,.02) 7cqw 7.2cqw)}
.cs-rhead{position:absolute;left:7cqw;right:7cqw;top:7.2cqh;z-index:2}
.cs-rk{display:flex;align-items:center;gap:3cqw;font-family:'JetBrains Mono',monospace;font-size:2.7cqw;letter-spacing:.24em;text-transform:uppercase;color:var(--teal-light)}
.cs-rk::after{content:"";flex:0 0 11cqw;height:.3cqw;background:currentColor;opacity:.55}
.cs-rhead h1{margin-top:3cqw;font-family:Jost,sans-serif;font-weight:200;letter-spacing:.07em;text-transform:uppercase;line-height:1.05;font-size:8.6cqw;color:var(--on-dark)}
.cs-rfig{position:absolute;left:4cqw;right:4cqw;top:24cqh;z-index:1}
.cs-rfig .cs-svg{--sw:2.1}
.cs-rfig{background:none;margin:0;padding:0;border:0}
.cs-rfig .cs-svg{height:auto;width:100%}
.cs-rfig .cs-co,.cs-rfig .cs-cap,.cs-rfig .cs-plate-t,.cs-rfig .cs-hots{display:none}
.cs-rlabels{position:absolute;left:7cqw;right:7cqw;bottom:13cqh;height:20cqh;z-index:2}
.cs-rl{position:absolute;inset:0;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:4.5cqw;align-content:start;align-items:end;border-top:.35cqw solid var(--teal);padding-top:2.4cqw}
.cs-rn{grid-row:1 / span 2;font-family:Jost,sans-serif;font-weight:200;font-size:15cqw;line-height:.9;letter-spacing:-.03em;color:var(--teal-light)}
.cs-rn small{font-size:3.6cqw;letter-spacing:0;color:var(--on-dark-soft);margin-left:1cqw}
.cs-rl h2{font-family:Jost,sans-serif;font-weight:300;letter-spacing:.08em;text-transform:uppercase;line-height:1;font-size:6cqw;color:var(--on-dark);align-self:end}
.cs-rl p{font-family:'JetBrains Mono',monospace;font-size:2.7cqw;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-soft);margin-top:1.4cqw}
.cs-rbar{position:absolute;left:7cqw;right:7cqw;bottom:9cqh;height:.5cqw;background:var(--line-dark);z-index:2}
.cs-rbar i{position:absolute;inset:0;background:var(--teal-light);transform-origin:left;transform:scaleX(1)}
.cs-rend{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2.4cqw;padding-bottom:8cqh;pointer-events:none}
.cs-rend img{width:34cqw;height:auto}
.cs-rend p{font-family:'JetBrains Mono',monospace;font-size:2.8cqw;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark)}
/* estado estatico (sin GSAP / reducido): casa completa, final con logo */
.cs-reel:not(.is-anim) .cs-rlabels{display:none}
.cs-reel:not(.is-anim) .cs-rend{background:linear-gradient(rgba(21,23,26,0) 55%,rgba(21,23,26,.9) 82%)}

@media (prefers-reduced-motion:reduce){
  .cs-digits span,.cs-step,.cs-svg .cs-co,.cs-l{transition:none}
}