/* ==========================================================================
   la.css — Variante A en el "idioma del logo" (capa de override, va ULTIMA).
   Ángulo de marca: 20° respecto de la vertical (--la-t = tan 20° = .364). Dirección dominante "/".
   Sobrio, monocromo (grafito / tinta / hueso) y teal #2C818F como único acento.
   Tipografía: Jost fino/regular en mayúsculas con tracking amplio. Mono solo para datos técnicos.
   Todo el movimiento es transform / opacity / clip-path. Con prefers-reduced-motion nada se mueve y todo se ve.
   Clases propias: prefijo la-
   ========================================================================== */
:root{
  --brand-angle:20deg; --la-t:.364;
  --paper:#F4F5F3; --paper-2:#E9EBE8; --ink:#1A1C1E; --ink-soft:#4B4F53;
  --carbon:#1A1C1E; --carbon-2:#232629; --on-dark:#ECEDEA; --on-dark-soft:#9A9FA3;
  --line:#D2D5D1; --line-dark:#2F3337;
  --teal:#2C818F; --teal-deep:#1F626D; --teal-light:#5DB0BC;
  --amber:#8D9296; --amber-ink:#1A1C1E;      /* los avisos pasan a grafito: el teal es el único acento */
  --radius:0px;
  --ease-o:cubic-bezier(.16,.7,.1,1);
  --nav-h:64px;
  --f:'Jost','Segoe UI',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
body{font-family:var(--f);font-weight:400;font-size:17px;line-height:1.62;background:var(--paper)}
.btn,.f-input,.f-select,.f-textarea,button,input,select,textarea{font-family:var(--f)}
.mono,.kicker,.num small,.stat .tag,.dato .tag,.badge,.ref-note::before{font-family:var(--mono)}
b,strong{font-weight:500}

/* ---------- titulos: Jost fino, mayusculas, tracking amplio ---------- */
h1,h2,h3,h4,h5,.display{font-family:var(--f);font-weight:300;font-stretch:100%}
.display{text-transform:uppercase;letter-spacing:.07em;line-height:1.1}
.hero h1{font-size:clamp(30px,5.6vw,92px);letter-spacing:.075em;line-height:1.1;font-weight:300}
.page-hero h1{font-size:clamp(28px,5.2vw,84px);letter-spacing:.07em;font-weight:200;line-height:1.1}
.sec-head h2{font-size:clamp(26px,3.5vw,52px);font-weight:300}
.split h2{font-size:clamp(25px,3.1vw,44px);font-weight:300}
.cta-final h2{font-size:clamp(30px,5.4vw,84px);max-width:17ch;font-weight:200}
.cs-tcopy h2{font-size:clamp(28px,4vw,60px);font-weight:300}
.serv h3,.tipo b,.tipo-card h3,.obra-card .tag b,.cmp tbody th,.uso h3,.faq summary,.tl h3,.firma b,.cs-step h3,.tipo-panel .head b,.eng-body h3,.svc-body h3,.pasos h3,.c-tab b,.c-card h3,.pn b,.fm-card-in b,.fm-rate-l,.foot-grid h4{
  font-family:var(--f);font-weight:400;letter-spacing:.09em;font-stretch:100%}
.foot-grid h4{font-family:var(--mono);font-weight:400}
.serv h3,.tipo-card h3,.tl h3,.uso h3,.pasos h3,.eng-body h3,.svc-body h3,.c-card h3{font-size:clamp(17px,1.5vw,21px);line-height:1.2}
.tipo b{font-size:17px}
.obra-card .tag b{font-size:16px;line-height:1.2}
.cmp tbody th{font-size:16px;font-weight:400}
.faq summary{font-size:clamp(16px,1.6vw,19px);line-height:1.3}
.tipo-panel .head b{font-size:clamp(22px,2.4vw,32px);font-weight:300}
.cs-step h3{font-size:clamp(24px,2.6vw,38px);font-weight:300;line-height:1.1}
.num,.cmp .big,.saving .num,.cs-digits,.cs-rn,.tl .n,.pasos .pn,.tipo-card .num,.fm-big{font-family:var(--f);font-weight:200;letter-spacing:-.01em}
.dato .num{font-size:clamp(40px,5vw,72px)}
.num small,.big small{font-family:var(--mono);font-weight:400}
.cs-digits{letter-spacing:-.03em}
.kicker{font-size:11.5px;letter-spacing:.26em;font-weight:400;gap:12px}
.kicker::before{content:"";flex:none;width:7px;height:15px;background:currentColor;transform:skewX(-20deg)}
.kicker::after{flex:0 0 clamp(48px,8vw,96px)}
.hero .kicker{color:var(--teal-light);text-shadow:0 1px 10px rgba(26,28,30,.8)}
.prose p,.sec-head p{font-weight:400}
.lead{font-weight:300}

/* ---------- logo ---------- */
.nav-logo{gap:14px}
.la-iso{height:25px;width:auto;fill:#fff;flex:none;overflow:visible}
.la-iso path{transition:transform .5s var(--ease-o)}
.nav-logo:hover .la-iso path:nth-child(odd){transform:translate3d(-2px,3px,0)}
.nav-logo:hover .la-iso path:nth-child(even){transform:translate3d(2px,-3px,0)}
.la-wm{display:flex;flex-direction:column;font-weight:300;font-size:16px;letter-spacing:.42em;text-transform:uppercase;line-height:1;color:var(--on-dark)}
.la-wm small{font-size:7.5px;letter-spacing:.56em;margin-top:5px;color:var(--on-dark-soft);font-weight:400}
.foot-logo img{height:auto;width:110px;margin-bottom:22px}
.cs-rend img{width:30cqw}

/* ---------- nav ---------- */
.site-nav::before{background:rgba(26,28,30,.97);border-bottom-color:var(--line-dark)}
.site-nav.is-scrolled::before{background:rgba(26,28,30,.97)}
.nav-links{font-size:12.5px;font-weight:400;letter-spacing:.16em;text-transform:uppercase}
.nav-links a:not(.btn)::after{height:1px;background:var(--teal-light);transform:none;clip-path:inset(0 100% 0 0);transition:clip-path .5s var(--ease-o);left:12px;right:12px}
.nav-links a:not(.btn):hover::after,.nav-links a.is-active::after{clip-path:inset(0)}
.nav-links .nav-cta{font-size:12px;padding:10px 20px;letter-spacing:.16em}
.nav-toggle{border-color:var(--line-dark)}
.nav-toggle span{height:1px;width:22px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1080px){.nav-links a{font-size:15px;letter-spacing:.2em}}

/* ---------- botones: planos que se deslizan ---------- */
.btn{font-family:var(--f);font-weight:500;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;padding:14px 30px;border-radius:0}
.btn::before{inset:0 -34%;transform:translate3d(-125%,0,0) skewX(-20deg);transform-origin:center;transition:transform .65s var(--ease-o)}
.btn:hover::before,.btn:focus-visible::before{transform:translate3d(0,0,0) skewX(-20deg);transform-origin:center}
.btn-ghost{--sweep:var(--ink)}
.btn-link{font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.2em}

/* ---------- hero ---------- */
.hero-veil{background:linear-gradient(90deg,rgba(26,28,30,.55) 0%,rgba(26,28,30,0) 62%),linear-gradient(180deg,rgba(26,28,30,.55) 0%,rgba(26,28,30,.18) 38%,rgba(26,28,30,.92) 100%)}
.hero .sub{font-weight:300;font-size:clamp(16px,1.7vw,20px);letter-spacing:.01em}
html.js .hero h1 .ln span{animation:la-line 1.15s var(--ease-o) both}
html.js .page-hero h1 .w > span{animation:la-line 1.15s var(--ease-o) both}
@keyframes la-line{from{transform:translate3d(-6%,110%,0);letter-spacing:.005em;opacity:0}60%{opacity:1}to{transform:none;opacity:1}}
html.js .hero::after,html.js .page-hero::after{background:var(--carbon);transform-origin:left;animation:la-veil 1.3s cubic-bezier(.7,0,.2,1) .15s both;
  clip-path:polygon(0 0,100% 0,calc(100% - var(--sk,300px)) 100%,0 100%)}
@keyframes la-veil{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(100% + var(--sk,300px)),0,0)}}
html.la-wait .hero *,html.la-wait .hero::after,html.la-wait .page-hero *,html.la-wait .page-hero::after{animation-play-state:paused!important}
html.js .hero-bg img,html.js .page-hero .ph-bg img{animation-duration:3s}
.stat .num,.stat .num small{font-weight:200}
.stat .num{font-size:clamp(30px,3.6vw,50px)}
.hero-strip{background:rgba(26,28,30,.6);border-top-color:rgba(236,237,234,.18)}
/* planos diagonales de fondo (los inserta la.js) */
.la-planes{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.la-planes i{position:absolute;top:-12%;bottom:-12%;transform:skewX(-20deg)}
.la-planes i:nth-child(1){right:19%;width:1px;background:linear-gradient(rgba(93,176,188,0),rgba(93,176,188,.6) 30%,rgba(93,176,188,.6) 70%,rgba(93,176,188,0))}
.la-planes i:nth-child(2){right:9%;width:min(15vw,230px);background:linear-gradient(90deg,rgba(236,237,234,.06),rgba(236,237,234,.015))}
.la-planes i:nth-child(3){right:2%;width:min(5vw,80px);background:rgba(44,129,143,.2)}
html.js .la-planes i{animation:la-plane 1.6s var(--ease-o) 1.1s both}
html.js .la-planes i:nth-child(2){animation-delay:1.25s}
html.js .la-planes i:nth-child(3){animation-delay:1.4s}
@keyframes la-plane{from{opacity:0;transform:translate3d(60px,0,0) skewX(-20deg)}to{opacity:1;transform:skewX(-20deg)}}
html.la-wait .la-planes i{animation-play-state:paused}
.page-hero .la-planes i:nth-child(1){right:15%}
@media (max-width:700px){.la-planes i:nth-child(2){display:none}.la-planes i:nth-child(1){right:12%}}

/* ---------- diagonales como firma: lineas, divisores, bandas ---------- */
.cota{background:var(--line)}
.cota::before,.cota::after{top:-7px;height:15px;background:var(--line);transform:rotate(20deg)}
.hatch{background-image:repeating-linear-gradient(110deg,transparent 0 9px,rgba(255,255,255,.05) 9px 10px)}
.sec--dark.hatch{background-image:repeating-linear-gradient(110deg,transparent 0 9px,rgba(255,255,255,.04) 9px 10px)}
.hatch--ink{background-image:repeating-linear-gradient(110deg,transparent 0 9px,rgba(26,28,30,.08) 9px 10px)}
.hatch-band{height:12px;border-block:1px solid var(--line-dark);background:var(--carbon-2) repeating-linear-gradient(110deg,transparent 0 11px,rgba(93,176,188,.38) 11px 12px)}
.la-rule{display:block;position:relative;height:1px;width:min(100%,260px);background:linear-gradient(90deg,var(--teal) 0 24%,currentColor 24%);color:rgba(128,132,136,.45);margin-top:6px}
.la-rule::after{content:"";position:absolute;right:-5px;top:-7px;width:1px;height:15px;background:currentColor;transform:rotate(20deg)}
html.js .la-rule{transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease-o) .15s}
html.js .la-rule.la-on{transform:none}
.sec-head--row > div .la-rule{margin-top:10px}

/* ---------- secciones ---------- */
.sec--dark,.site-footer,.hero,.page-hero{background-color:var(--carbon)}
.sec--paper2{background:var(--paper-2)}
.hero-strip .wrap{position:relative}
.sec-head p{font-weight:300;font-size:17.5px}
.ref-note{border-left-width:2px;background:var(--paper-2)}
.ref-note::before{font-weight:500;letter-spacing:.16em;background:var(--ink);color:var(--paper)}
.sec--dark .ref-note::before{background:var(--on-dark);color:var(--carbon)}
.badge{background:rgba(128,132,136,.18);color:inherit;border:none;padding:4px 11px;font-weight:500}
.badge--pending{background:transparent}
.badge::before{width:5px;height:5px;background:var(--teal);transform:skewX(-20deg)}
.tbc{border-color:var(--line)}
.dato{border-left-color:var(--line)}
.checks li::before{content:"";width:7px;height:14px;margin-top:5px;flex:none;background:var(--teal);transform:skewX(-20deg)}

/* ---------- tarjetas: planos que se deslizan al hover ---------- */
.serv{overflow:hidden;isolation:isolate;transition:background .4s}
.serv::before{inset:0 -30%;width:auto;height:auto;background:rgba(44,129,143,.09);transform:translate3d(-125%,0,0) skewX(-20deg);transform-origin:center;transition:transform .8s var(--ease-o);z-index:-1}
.serv:hover::before{transform:translate3d(0,0,0) skewX(-20deg)}
.serv:hover{background:var(--paper)}
.serv .n{font-size:11.5px;letter-spacing:.2em}
.tipo-card{overflow:hidden;isolation:isolate;transition:border-color .3s}
.tipo-card:hover{transform:none;border-color:var(--teal-light)}
.tipo-card::before{content:"";position:absolute;inset:0 -30%;z-index:-1;background:rgba(44,129,143,.14);transform:translate3d(-125%,0,0) skewX(-20deg);transition:transform .8s var(--ease-o)}
.tipo-card:hover::before{transform:translate3d(0,0,0) skewX(-20deg)}
.tipo-card .num{font-weight:200}
.obra-card{isolation:isolate}
.obra-card::before{content:"";position:absolute;inset:0 -30%;z-index:2;background:linear-gradient(90deg,rgba(44,129,143,.0),rgba(44,129,143,.42));transform:translate3d(-125%,0,0) skewX(-20deg);transition:transform .9s var(--ease-o);pointer-events:none}
.obra-card:hover::before,.obra-card:focus-visible::before{transform:translate3d(0,0,0) skewX(-20deg)}
.obra-card img{filter:saturate(.8) contrast(1.03)}
.obra-card::after{height:2px;transform-origin:left}
.obra-card .tag b{letter-spacing:.1em}
.obra-card .tag span{font-size:10px;letter-spacing:.14em}
.obra-card .go{clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%);border:none;background:rgba(26,28,30,.7)}
.obra-card .idx{border:none;background:rgba(26,28,30,.72)}
.tipo{transition:border-color .3s,background .3s,transform .4s var(--ease-o)}
.tipo::before{width:2px}
.tipo.sel,.tipo[aria-pressed="true"]{background:rgba(44,129,143,.1)}
.tipo-panel,.tipo-list .tipo{background-image:none}
.svc{transition:border-color .3s}
.svc:hover{transform:none}

/* ---------- imagenes: corte en paralelogramo al angulo de marca ---------- */
.split-media{border:none;clip-path:polygon(var(--sk,70px) 0,100% 0,calc(100% - var(--sk,70px)) 100%,0 100%);min-height:360px;background:var(--carbon-2)}
.split-media::after{left:auto;right:calc(var(--sk,70px)*1 - 4px);bottom:0;width:90px;height:3px;background:var(--teal);transform:skewX(-20deg)}
.split--rev .split-media{clip-path:polygon(var(--sk,70px) 0,100% 0,calc(100% - var(--sk,70px)) 100%,0 100%)}
html.js .split-media.wipe{clip-path:polygon(var(--sk,70px) 0,var(--sk,70px) 0,0 100%,0 100%);transition:clip-path 1.3s cubic-bezier(.7,0,.2,1)}
html.js .split-media.wipe.in{clip-path:polygon(var(--sk,70px) 0,100% 0,calc(100% - var(--sk,70px)) 100%,0 100%)}
html.js .wipe:not(.split-media){clip-path:polygon(0 0,0 0,calc(var(--sk,60px)*-1) 100%,0 100%);transition:clip-path 1.2s cubic-bezier(.7,0,.2,1)}
html.js .wipe:not(.split-media).in{clip-path:polygon(0 0,calc(100% + var(--sk,60px)) 0,100% 100%,0 100%)}
@media (max-width:960px){.split-media{min-height:260px}}
.page-hero .ph-bg{clip-path:none}

/* ---------- reveals: entran a lo largo de la diagonal ---------- */
html.js .rv{opacity:0;transform:translate3d(-9px,24px,0);transition:opacity .9s var(--ease-o),transform .9s var(--ease-o)}
html.js .rv.in{opacity:1;transform:none}
/* titulos: el tracking se abre */
html.js .la-tr{transition:letter-spacing 1.5s var(--ease-o),opacity .9s var(--ease-o),transform .9s var(--ease-o)}
html.js .la-tr:not(.in):not(.la-on){letter-spacing:.005em;opacity:0}
html.js .la-tr.la-on{opacity:1}
html.js .la-clean .la-tr,html.js .la-tr.la-done{transition:none}

/* ---------- datos / tablas ---------- */
.cmp thead th{font-weight:400}
.cmp td.c-seco{border-left-width:2px}
.cmp .big{font-size:clamp(32px,4vw,54px)}
.tl{border-top-color:var(--ink)}
.tl li::before{width:9px;height:14px;top:-7px;transform:skewX(-20deg)}
.faq summary::after{border:1px solid var(--line);clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%)}
.uso{background-image:repeating-linear-gradient(110deg,transparent 0 9px,rgba(255,255,255,.03) 9px 10px)}
.bar-track{height:12px;border-radius:0}
.bar-trad .bar-fill{background:#3A3F45 repeating-linear-gradient(110deg,transparent 0 6px,rgba(255,255,255,.12) 6px 7px)}
.foto-pend{background:var(--carbon-2) repeating-linear-gradient(110deg,transparent 0 9px,rgba(93,176,188,.16) 9px 10px)!important}
.firma::before{width:34px;height:1px}
.chip,.f-input,.f-select,.f-textarea{border-radius:0}
.chip.sel{background:var(--ink)}
.f-label{font-weight:400}
.rng::-webkit-slider-thumb{clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);border:none;background:var(--teal-light);width:24px}
.rng::-moz-range-thumb{border:none;background:var(--teal-light)}

/* ---------- footer ---------- */
.site-footer{position:relative}
.foot-grid p{font-weight:300}
.foot-grid nav a,.foot-grid a.fl{font-size:15px;font-weight:300;letter-spacing:.03em}
.site-footer::before{content:"";position:absolute;left:var(--pad);top:0;width:min(240px,40vw);height:2px;background:var(--teal);transform:skewX(-20deg)}
.foot-base{font-size:10.5px}

/* ---------- WhatsApp flotante ---------- */
.wa-float{font-weight:500;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);padding:12px 28px;border:none}

/* ---------- indicador de progreso (parallelogram) ---------- */
.la-prog{position:fixed;left:0;right:0;top:0;height:3px;z-index:70;pointer-events:none}
.la-prog i{position:absolute;inset:0;background:var(--teal-light);transform-origin:left;transform:scaleX(0);will-change:transform}
.la-prog b{position:absolute;left:0;top:0;width:22px;height:3px;margin-left:-10px;background:#fff;transform:translate3d(0,0,0) skewX(-20deg);will-change:transform}

/* ---------- parallax suave ---------- */
html.la-px-on .split-media img,html.la-px-on .gal figure img{inset:-8% 0;height:116%;will-change:transform}
html.la-px-on .gal figure{overflow:hidden}

/* ---------- transicion de pagina: un plano diagonal que barre ---------- */
html::before,html::after{content:"";position:fixed;z-index:9990;top:0;height:100%;left:-24vh;width:calc(100vw + 48vh);pointer-events:none;
  background:linear-gradient(90deg,var(--carbon) 0,var(--carbon) calc(100% - 5px),var(--teal-light) calc(100% - 5px));
  transform:translate3d(-105%,0,0) skewX(-20deg);visibility:hidden}
html.la-enter::before{visibility:visible;transform:translate3d(0,0,0) skewX(-20deg);animation:la-sweep-out .85s cubic-bezier(.7,0,.2,1) .05s forwards}
@keyframes la-sweep-out{from{transform:translate3d(0,0,0) skewX(-20deg)}to{transform:translate3d(105%,0,0) skewX(-20deg);visibility:hidden}}
html.is-leaving::after{visibility:visible;transform:translate3d(0,0,0) skewX(-20deg);transition:transform .5s cubic-bezier(.7,0,.2,1),visibility 0s}
html.is-leaving body{opacity:1;transition:none}
html:not(.is-leaving)::after{transition:none}

/* ---------- preloader: el isotipo se arma por planos (<1,2 s, solo 1a carga de la sesion) ---------- */
.ml-preloader{display:none}
html.js .ml-preloader{display:grid;place-items:center;align-content:center;gap:30px;position:fixed;inset:0;z-index:9999;background:var(--carbon);animation:ml-pl-out .25s ease 1.0s forwards}
html.js .ml-preloader.is-done{opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s .22s}
html.la-seen .ml-preloader{display:none!important}
.ml-preloader svg{width:min(46vw,250px);height:auto;overflow:visible;fill:#fff}
.ml-preloader svg path{opacity:0;transform-box:fill-box;transform-origin:center;--d:36px;transform:translate(calc(var(--d)*-.364),var(--d));animation:ml-pl-in .55s cubic-bezier(.2,.7,.2,1) forwards}
.ml-preloader svg #p1{animation-delay:0s}.ml-preloader svg #p2{animation-delay:.1s}.ml-preloader svg #p3{animation-delay:.18s}.ml-preloader svg #p4{animation-delay:.28s}
.ml-preloader svg #p5{animation-delay:.36s;--d:0px;transform:translateX(-28px)}
.ml-preloader svg #p4{fill:var(--teal-light)}
.la-pl-line{display:block;width:min(46vw,250px);height:1px;background:linear-gradient(90deg,var(--teal-light),rgba(236,237,234,.35));transform:scaleX(0);transform-origin:left;animation:la-pl-line .9s cubic-bezier(.7,0,.2,1) .15s forwards}
@keyframes ml-pl-in{to{opacity:1;transform:none}}
@keyframes ml-pl-out{to{opacity:0;visibility:hidden}}
@keyframes la-pl-line{to{transform:none}}

/* ---------- reduced motion: nada se mueve, todo se ve ---------- */
@media (prefers-reduced-motion:reduce){
  html.js .ml-preloader{display:none}
  html::before,html::after{display:none}
  html.js .rv,html.js .la-tr,html.js .la-tr:not(.in):not(.la-on){opacity:1;transform:none;letter-spacing:inherit}
  html.js .la-rule{transform:none}
  html.js .split-media.wipe,html.js .wipe:not(.split-media){clip-path:polygon(var(--sk,70px) 0,100% 0,calc(100% - var(--sk,70px)) 100%,0 100%)}
  html.js .wipe:not(.split-media){clip-path:none}
  html.js .la-planes i{animation:none;opacity:1}
  .la-prog{display:none}
}
.sec--dark .ref-note{background:rgba(236,237,234,.045)}