:root{
  --deep:#07201D; --deeper:#051815; --plat:#EDF2F0; --mute:#9DB2AE; --line:rgba(237,242,240,.14);
  --sig:#4FE0B4; --sig-d:#0E9E78; --ink:#07201D;
  --bg:var(--deep); --bg2:var(--deeper); --fg:var(--plat); --fg2:var(--mute); --rule:var(--line); --accent:var(--sig); --mark:rgba(237,242,240,.24);
  --scrim:linear-gradient(90deg,rgba(7,32,29,.95) 0%,rgba(7,32,29,.8) 42%,rgba(7,32,29,.42) 100%),linear-gradient(0deg,rgba(7,32,29,.9),transparent 45%);
  --out:cubic-bezier(.16,1,.3,1); --io:cubic-bezier(.65,0,.35,1);
  --disp:"Encode Sans Expanded","Helvetica Neue",Arial,sans-serif;
  --body:"Encode Sans","Helvetica Neue",Arial,sans-serif;
  --gut:clamp(20px,4.5vw,64px);
}
html[data-theme="light"]{--bg:#F1F5F3;--bg2:#E4EBE8;--fg:var(--ink);--fg2:#4A6661;--rule:rgba(7,32,29,.16);--accent:#0B8466;--mark:rgba(7,32,29,.22);
  --scrim:linear-gradient(90deg,rgba(241,245,243,.97) 0%,rgba(241,245,243,.86) 44%,rgba(241,245,243,.4) 100%),linear-gradient(0deg,rgba(241,245,243,.92),transparent 45%)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--deep);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:300 17px/1.6 var(--body);transition:background-color .9s var(--io),color .9s var(--io);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.wrap{max-width:1400px;margin:0 auto;padding-inline:var(--gut)}
h1,h2,h3{font-family:var(--disp);font-weight:200;margin:0;letter-spacing:-.015em}
h2{font-size:clamp(34px,5.4vw,84px);line-height:1.08}
.eyebrow{font:400 12.5px/1.4 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 26px;transition:color .9s var(--io)}
.lead{font-size:clamp(17px,1.45vw,20px);color:var(--fg2);max-width:46ch;margin:0}
.n{font:300 13px/1 var(--disp);letter-spacing:.12em;color:var(--fg2)}

/* Intro */
.intro{display:none}
.js .intro{display:flex;position:fixed;inset:0;z-index:100;background:var(--deeper);align-items:center;justify-content:center;transition:clip-path 1s var(--io)}
.js .intro.skip{display:none}
.intro.out{clip-path:inset(0 0 100% 0)}
.intro-mark{width:clamp(64px,8vw,96px);overflow:visible}
.route,.base,.comet,.map-base,.map-live{fill:none;stroke-miterlimit:4}
.intro .route{stroke:var(--plat);stroke-width:9;stroke-dasharray:1000;stroke-dashoffset:1000;animation:draw 1.25s var(--io) .1s forwards}
.tip{fill:var(--sig)}
.intro .tip{opacity:0;animation:lit .5s ease 1.25s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes lit{to{opacity:1}}

.progress{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;z-index:60;pointer-events:none}

/* Nav */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:22px var(--gut);transition:padding .5s var(--out),background-color .9s var(--io),border-color .5s;border-bottom:1px solid transparent}
.nav.scrolled{padding-block:12px;background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--rule)}
.brand{position:relative;display:block;width:190px;height:50px;flex:none;margin-right:auto}
.brand img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:left center;transition:opacity .6s}
.logo-l{opacity:0}
[data-theme="light"] .logo-l{opacity:1}
[data-theme="light"] .logo-d{opacity:0}
.nav nav{display:flex;align-items:center;gap:clamp(20px,3vw,44px);font:300 14px/1 var(--disp);letter-spacing:.03em}
.nav nav a{position:relative;padding:8px 0}
.nav nav a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .55s var(--out)}
.nav nav a:hover::after{transform:scaleX(1);transform-origin:0 50%}
.nav-cta{border:1px solid var(--rule);padding:12px 20px!important;transition:background-color .4s,color .4s,border-color .4s}
.nav-cta:hover{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.menu-btn{display:none;background:none;border:0;color:inherit;font:300 14px/1 var(--disp);padding:12px 0;letter-spacing:.04em;cursor:pointer}

/* Botón */
.btn{--c:var(--accent);display:inline-flex;align-items:center;gap:18px;background:none;border:0;border-bottom:1px solid var(--c);padding:14px 2px;color:var(--fg);font:300 16px/1 var(--disp);letter-spacing:.02em;cursor:pointer}
.btn i{position:relative;display:block;width:34px;height:1px;background:var(--c);transition:width .6s var(--out)}
.btn i::after{content:"";position:absolute;right:0;top:-3.5px;width:8px;height:8px;border-top:1px solid var(--c);border-right:1px solid var(--c);transform:rotate(45deg)}
.btn:hover i{width:58px}

/* Hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:120px 0 clamp(56px,9vh,96px);overflow:hidden}
.hero-light{position:absolute;inset:0;background:radial-gradient(620px circle at var(--x,72%) var(--y,40%),rgba(79,224,180,.1),transparent 70%);pointer-events:none}
.hero-mark{position:absolute;right:calc(var(--gut) - 1vw);top:50%;height:min(70vh,42vw);width:auto;aspect-ratio:1;translate:0 -50%;overflow:visible;will-change:transform}
.hero-mark .base{stroke:var(--mark);stroke-width:9}
.hero-mark .comet{stroke:var(--fg);stroke-width:9;stroke-dasharray:190 1000;stroke-dashoffset:190;opacity:0}
.hero-mark .tip{opacity:.14;transition:opacity .9s}
.js .hero-mark .base{stroke-dasharray:1000;stroke-dashoffset:1000}
.ready .hero-mark .base{animation:draw 2.4s var(--io) forwards}
.ready .hero-mark .tip{opacity:1;transition-delay:2.1s}
.ready .hero-mark .comet{animation:comet 7s var(--io) 2.6s infinite}
@keyframes comet{0%{stroke-dashoffset:190;opacity:0}6%{opacity:1}78%{opacity:1}86%,100%{stroke-dashoffset:-1000;opacity:0}}
.hero-copy{position:relative;width:100%}
h1{font-size:clamp(38px,6vw,104px);line-height:1.04;margin-bottom:clamp(32px,5vh,56px)}
h1 em{font-style:normal;color:var(--accent)}
.l{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.l>span{display:block}
.js .l>span{transform:translateY(112%);transition:transform 1.25s var(--out) var(--d,0s)}
.ready .hero .l>span,.split.in .l>span{transform:none}
.js .hero-in{opacity:0;transform:translateY(16px);transition:opacity 1.1s ease var(--d,0s),transform 1.25s var(--out) var(--d,0s)}
.ready .hero-in{opacity:1;transform:none}
.hero-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;max-width:62%}
.hero-foot .btn{flex:none}
.scroll-cue{position:absolute;right:var(--gut);bottom:clamp(56px,9vh,96px);display:flex;flex-direction:column;align-items:center;gap:12px;font:300 11px/1 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--fg2);writing-mode:vertical-rl}
.scroll-cue i{display:block;width:1px;height:54px;background:var(--rule);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;inset:0;background:var(--sig);animation:cue 2.6s var(--io) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* Reveal */
.js .r{opacity:0;transform:translateY(26px);transition:opacity 1.1s ease var(--d,0s),transform 1.3s var(--out) var(--d,0s)}
.js .r.in{opacity:1;transform:none}

/* Idea */

/* Servicios */
.sec-head{margin-bottom:clamp(50px,9vh,100px)}

/* Proceso */
.process{background:var(--bg2);transition:background-color .9s var(--io)}
.process-pin{padding:clamp(80px,12vh,130px) 0}
.process-head{width:100%}
.step-ph{margin:0;overflow:hidden;border-radius:6px;aspect-ratio:16/10}
.step-ph img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 1.8s var(--out)}
.step h3{font-size:clamp(34px,4.6vw,72px);line-height:1.08;margin:18px 0 18px}
.step p{margin:0;color:var(--fg2);max-width:40ch}

/* Principios */
.principles{padding:clamp(110px,17vh,190px) 0}
.prin{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px)}
.prin article{border-top:1px solid var(--rule);padding-top:22px;transition:opacity 1.1s ease var(--d,0s),transform 1.3s var(--out) var(--d,0s),border-color .9s}
.prin h3{font-size:clamp(23px,2.3vw,34px);line-height:1.18;margin:30px 0 14px}
.prin p{margin:0;color:var(--fg2);max-width:32ch;transition:color .9s var(--io)}

/* Contacto */
.contact{padding:clamp(110px,17vh,190px) 0}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(50px,8vw,130px)}
.contact h2{margin-bottom:28px}
.direct{list-style:none;padding:0;margin:34px 0 0;font:300 17px/1.8 var(--disp)}
.direct a{border-bottom:1px solid var(--rule)}
.form{display:grid;gap:26px;align-content:start}
.form label{display:block}
.form label span{display:block;font:400 12px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--fg2);margin-bottom:6px}
.form input,.form select,.form textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--rule);color:var(--fg);font:300 18px/1.5 var(--body);padding:10px 0;border-radius:0;outline:0;transition:border-color .5s;resize:vertical}
.form select{appearance:none;cursor:pointer}
.form option{color:#07201D}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--sig)}
.form .btn{justify-self:start;margin-top:6px}
.form-status{margin:0;min-height:1.5em;font-size:15px;color:var(--sig)}

.foot{border-top:1px solid var(--rule);padding:38px 0}
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:14px;color:var(--fg2)}
.foot-logo{position:relative;display:block;width:170px;height:45px}.foot-logo img{position:absolute;inset:0;width:100%;height:100%;transition:opacity .6s}
.foot p{margin:0}

@media(max-width:900px){
  .nav nav{position:fixed;inset:0;background:var(--bg2);color:var(--fg);flex-direction:column;justify-content:center;gap:30px;font-size:28px;font-weight:200;opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s;z-index:-1}
  .nav.open nav{opacity:1;visibility:visible;transition-delay:0s}
  .nav.open{backdrop-filter:none;-webkit-backdrop-filter:none;background:none;border-color:transparent}
  .menu-btn{display:block}
  .nav-cta{font-size:20px}
  .hero{align-items:flex-end}
  .hero{padding-top:calc(58vw + 90px)}
  .hero-mark{height:auto;width:52vw;right:var(--gut);top:calc(29vw + 84px)}
  .hero-foot{max-width:none}
  .scroll-cue{display:none}
  .prin,.contact-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .hero-mark .comet{display:none}
}

/* Interruptor: el filo del logo se desliza dentro de una pista facetada */
.theme{--w:54px;position:relative;flex:none;width:var(--w);height:26px;margin-left:clamp(16px,2.4vw,32px);padding:0;border:0;background:var(--fg);cursor:pointer;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);transition:background-color .6s}
.theme::before{content:"";position:absolute;inset:1px;background:var(--bg);clip-path:polygon(6.6px 0,100% 0,100% calc(100% - 6.6px),calc(100% - 6.6px) 100%,0 100%,0 6.6px);transition:background-color .6s}
.theme-thumb{position:absolute;top:6px;left:9px;width:16px;height:14px;background:var(--accent);transform:translateX(20px) skewX(-45deg);transition:transform .8s var(--out),background-color .6s}
[data-mode="light"] .theme-thumb{transform:translateX(0) skewX(-45deg)}
.theme:hover .theme-thumb{filter:brightness(1.18)}
.theme:focus-visible{clip-path:none}
.menu-btn{margin-left:18px}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}
::view-transition-new(root){z-index:2;animation:wipe 1.05s var(--io) both}
@keyframes wipe{from{clip-path:polygon(100% 0,100% 0,100% 0)}to{clip-path:polygon(-100% 0,100% 0,100% 200%)}}

/* Fotografía */
.hero-photo{position:absolute;inset:-6% 0;overflow:hidden;will-change:transform}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;animation:kb 28s ease-out both}
@keyframes kb{from{transform:scale(1.14)}to{transform:scale(1)}}
.hero-scrim{position:absolute;inset:0;background:var(--scrim)}
.ph{margin:0;overflow:hidden;border-radius:6px;will-change:transform}
.ph img{display:block;width:100%;height:100%;object-fit:cover}
.js .ph img{clip-path:inset(100% 0 0 0);transform:scale(1.25);transition:clip-path 1.5s var(--io) var(--d,0s),transform 2.2s var(--out) var(--d,0s)}
.js .ph.in img{clip-path:inset(0);transform:scale(1)}
.mosaic{display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:clamp(10px,1.4vw,20px);align-items:end}
.mosaic .ph:nth-child(1){aspect-ratio:4/3}
.mosaic .ph:nth-child(2){aspect-ratio:3/4}
.mosaic .ph:nth-child(3){aspect-ratio:1}

.marquee{overflow:hidden;white-space:nowrap;padding:clamp(20px,4vh,40px) 0 clamp(70px,11vh,120px)}
.marquee div{display:inline-block;font:200 clamp(44px,9vw,150px)/1 var(--disp);letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px var(--mark);will-change:transform}


.ind-banner{position:relative;height:clamp(240px,36vw,500px);border-radius:6px;overflow:hidden;background:var(--deeper);margin-bottom:clamp(28px,4vh,44px)}
.ind-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 100% 0 0);transform:scale(1.14);transition:clip-path 1.25s var(--io),transform 2.6s var(--out)}
.ind-banner img.on{clip-path:inset(0);transform:none}
.ind-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,24,21,.86),rgba(5,24,21,.08) 62%);z-index:1}
.ind-cap{position:absolute;left:clamp(20px,3vw,44px);right:clamp(20px,3vw,44px);bottom:clamp(20px,3vw,40px);z-index:2;color:var(--plat)}
.ind-cap small{display:block;font:400 12px/1 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--sig);margin-bottom:12px}
.ind-cap h3{font-size:clamp(28px,4.6vw,72px);line-height:1.06;max-width:15em;animation:capIn 1.1s var(--out) both}
@keyframes capIn{from{opacity:0;transform:translateY(22px)}}
.frame{will-change:transform}
@media(min-width:901px){.frame{margin-top:clamp(-150px,-11vw,-80px);position:relative;z-index:3}}

.band{position:relative;height:120vh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.band figure{position:absolute;inset:0;margin:0;clip-path:inset(var(--i,12%) var(--ix,18%) round 8px);will-change:clip-path}
.band img{width:100%;height:100%;object-fit:cover;transform:scale(var(--s,1.18));will-change:transform}
.band figure::after{content:"";position:absolute;inset:0;background:rgba(5,24,21,.34)}
.band-t{position:relative;margin:0;color:#fff;font:200 clamp(36px,7vw,118px)/1.06 var(--disp);letter-spacing:-.015em;text-align:center}
.band-t span{display:block}
@media(max-width:900px){.mosaic{grid-template-columns:1fr 1fr}.mosaic .ph:nth-child(1){grid-column:1/-1;aspect-ratio:16/10}.band{height:80vh}.theme{margin-left:0}.ind-cap h3{font-size:26px}}
@media(prefers-reduced-motion:reduce){.hero-photo img{animation:none}.js .ph img{clip-path:none;transform:none}.band figure{clip-path:none}::view-transition-new(root){animation:none}}

/* Ajustes tras revisión */
.nav nav{margin-right:0}
.theme{order:3}
.menu-btn{order:4}
.band figure::after{background:linear-gradient(0deg,rgba(5,24,21,.62),rgba(5,24,21,.26))}
@media(min-width:901px){.ind-cap{right:50%}.ind-cap h3{font-size:clamp(28px,3.4vw,54px)}}

/* Proceso: avanza solo cada 5 segundos */
.process-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.4vw,20px);margin-top:18px}
.process-tabs button{position:relative;padding:16px 0 0;background:none;border:0;border-top:1px solid var(--rule);color:var(--fg2);font:300 clamp(13px,1.35vw,20px)/1.2 var(--disp);text-align:left;cursor:pointer;transition:color .5s}
.process-tabs button span{display:block;margin-bottom:5px;font-size:12px;letter-spacing:.1em;color:var(--accent)}
.process-tabs button:hover,.process-tabs button.on{color:var(--fg)}
.process-tabs i{position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}
.process-tabs .on i{transform:scaleX(1)}
.process.play .process-tabs .on i{animation:procRun 5s linear both}
.process.play.hold .process-tabs .on i{animation-play-state:paused}
@keyframes procRun{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.process-view{overflow:hidden;margin-top:clamp(32px,6vh,60px)}
.process-track{display:flex;transition:transform 1.25s var(--io)}
.step{flex:0 0 100%;min-width:0;display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,5vw,80px);align-items:center;opacity:.15;transition:opacity .9s ease}
.step.on{opacity:1}
.step.on .step-ph img{transform:scale(1)}
@media(max-width:800px){.step{grid-template-columns:1fr;align-items:start;gap:20px}.process-tabs button{padding-top:12px}}
/* Comparación */
.principles h2{font-size:clamp(46px,8.6vw,142px);line-height:1.04;letter-spacing:-.03em}
.principles h2 .l{padding-bottom:.14em;margin-bottom:-.1em}
.principles h2 em,.cmp-fin em{font-style:normal;color:var(--accent)}
.cmp-lead{max-width:48ch;margin:clamp(24px,4vh,40px) 0 0;font-size:clamp(18px,1.6vw,24px);color:var(--fg2)}
.cmp{margin-top:clamp(60px,10vh,110px);border-bottom:1px solid var(--rule)}
.cmp-row{display:grid;grid-template-columns:minmax(130px,.72fr) minmax(0,1.5fr) minmax(0,2.3fr);gap:clamp(16px,3vw,52px);align-items:center;padding:clamp(24px,3.6vh,40px) 0;border-top:1px solid var(--rule);transition:padding .7s var(--out),background-color .5s}
.cmp-row:not(.cmp-h):hover{padding-left:14px}
.cmp-k{font:400 12px/1.4 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--fg2)}
.cmp-a{color:var(--fg2);font-size:clamp(15px,1.15vw,18px);line-height:1.4}
.cmp-a i{font-style:normal;background:linear-gradient(currentColor,currentColor) 0 56%/0 1px no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size 1.2s var(--io) calc(var(--d,0s) + .5s)}
.cmp-row.in .cmp-a i{background-size:100% 1px}
.cmp-b{font:200 clamp(23px,2.7vw,42px)/1.14 var(--disp);letter-spacing:-.015em}
.cmp-h{align-items:baseline;padding-top:0;padding-bottom:18px;border-top:0;font:400 12px var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--fg2)}
.cmp-h span:last-child{color:var(--accent)}
.cmp-fin{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:30px 60px;margin-top:clamp(60px,10vh,110px)}
.cmp-fin p{margin:0;font:200 clamp(28px,3.9vw,62px)/1.12 var(--disp);letter-spacing:-.02em}
.cmp-fin .btn{flex:none;font-size:18px}
@media(max-width:800px){.cmp-row{grid-template-columns:minmax(0,1fr);gap:9px}.cmp-h{display:none}}
@media(prefers-reduced-motion:reduce){.process.play .process-tabs .on i{animation:none}.process-track{transition:none}}
.form-trampa{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.form-aviso{margin:0;font-size:14px;color:var(--fg2)}
.form-aviso a{text-decoration:underline}