:root{--ink:#1f2733;--blue:#0f95e3;--violet:#6532d0;--mid:#2563d0;--indigo:#3f4fd8;--paper:#fdfdfd;--mist:#f1f4f8;--line:#dfe4ec;--muted:#566176;--max:1160px}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;font-size:1.0625rem}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
h1,h2,h3{line-height:1.12;letter-spacing:-.02em;font-weight:600}
h1{font-size:clamp(2.5rem,6vw,4.4rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.7rem);max-width:20ch}
h3{font-size:1.35rem;letter-spacing:-.01em}
p{max-width:62ch}

/* header */
header{position:sticky;top:0;z-index:5;background:rgba(253,253,253,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:block;width:150px;aspect-ratio:1030/300;background:url(logo.png) 50.4% 38%/149.1% auto no-repeat;mix-blend-mode:multiply;text-indent:-9999px;overflow:hidden}
nav{display:flex;gap:32px;align-items:center}
nav a{text-decoration:none;font-weight:500;font-size:.98rem}
nav a:hover{color:var(--mid)}
.btn{display:inline-block;padding:13px 26px;border-radius:6px;background:var(--ink);color:#fff;text-decoration:none;font-weight:500;border:2px solid var(--ink);transition:background .2s,border-color .2s}
.btn:hover{background:var(--mid);border-color:var(--mid)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
nav .btn{padding:9px 20px;color:#fff}

/* hero */
.hero{padding:96px 0 104px;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center}
.hero p.lead{font-size:1.3rem;color:var(--muted);margin:28px 0 36px}
.hero .actions{display:flex;gap:16px;flex-wrap:wrap}
/* hero · morph continuo X -> cuadrado -> triangulo -> X
   Cada estado se define con cuatro variables de geometria (--tx --ty --rot --sx)
   que se interpolan solas, asi la forma se deforma sin saltos ni JS. Cuatro barras
   porque la X usa 2, el cuadrado 4 lados y el triangulo 3.
   El ciclo cierra solo: el 100% de los keyframes es la X, igual que el 0%, asi que
   la ultima forma (triangulo) se transforma en la primera sin fundirse a negro.
   La entrada se anima una sola vez (xin) y el morph es infinito (mxN); al vivir
   en propiedades distintas -- scale/opacity vs transform -- no se pisan. */
@property --tx{syntax:"<length>";inherits:false;initial-value:0cqw}
@property --ty{syntax:"<length>";inherits:false;initial-value:0cqw}
@property --rot{syntax:"<angle>";inherits:false;initial-value:0deg}
@property --sx{syntax:"<number>";inherits:false;initial-value:1}
.x{position:relative;aspect-ratio:1;max-width:380px;justify-self:end;width:100%;container-type:size;--dur:14s;--l:108cqw;--t:26cqw;animation:xbreathe var(--dur) ease-in-out infinite}
.x::before{content:"";position:absolute;inset:4%;border-radius:50%;background:radial-gradient(circle,rgba(101,50,208,.15),rgba(15,149,227,.10) 55%,transparent 72%);animation:xaura var(--dur) ease-in-out infinite}
.x i{position:absolute;left:50%;top:50%;width:var(--l);height:var(--t);border-radius:999px;transform-origin:center;mix-blend-mode:multiply;--tx:0cqw;--ty:0cqw;--rot:0deg;--sx:1;transform:translate(-50%,-50%) translate(var(--tx),var(--ty)) rotate(var(--rot)) scaleX(var(--sx));animation:xin .9s cubic-bezier(.2,.7,.2,1) both}
.x i:nth-child(1){background:var(--blue);animation:xin .9s cubic-bezier(.2,.7,.2,1) both,mx1 var(--dur) linear infinite}
.x i:nth-child(2){background:var(--violet);animation:xin .9s .12s cubic-bezier(.2,.7,.2,1) both,mx2 var(--dur) linear infinite}
.x i:nth-child(3){background:var(--indigo);animation:xin .9s .24s cubic-bezier(.2,.7,.2,1) both,mx3 var(--dur) linear infinite}
.x i:nth-child(4){background:var(--mid);animation:xin .9s .36s cubic-bezier(.2,.7,.2,1) both,mx4 var(--dur) linear infinite}

/* Grosor 26cqw y lado 80cqw: la caja queda con hueco interior de 28cqw, que es lo
   que mantiene el cuadrado legible con lineas tan gruesas. Escala X = 80/108. */
@keyframes mx1{
0%,12%{--tx:0cqw;--ty:0cqw;--rot:45deg;--sx:1;background-color:var(--blue);animation-timing-function:cubic-bezier(.62,-.16,.24,1.14)}
30%,42%{--tx:0cqw;--ty:-27cqw;--rot:0deg;--sx:.741;background-color:var(--blue);animation-timing-function:cubic-bezier(.62,-.16,.24,1.14)}
60%,72%{--tx:-23.5cqw;--ty:-13.6cqw;--rot:-60deg;--sx:.87;background-color:var(--mid);animation-timing-function:cubic-bezier(.62,-.16,.24,1.14)}
92%,100%{--tx:0cqw;--ty:0cqw;--rot:45deg;--sx:1;background-color:var(--blue)}}
@keyframes mx2{
0%,12%{--tx:0cqw;--ty:0cqw;--rot:-45deg;--sx:1;background-color:var(--violet);animation-timing-function:cubic-bezier(.62,-.16,.24,1.14)}
30%,42%{--tx:27cqw;--ty:0cqw;--rot:90deg;--sx:.741;background-color:var(--violet);animation-timing-function:cubic-bezier(.62,-.16,.24,1.14)}
60%,72%{--tx:23.5cqw;--ty:-13.6cqw;--rot:60deg;--sx:.87;background-color:var(--blue);animation-timing-function:cubic-bezier(.62,-.16,.24,1.14)}
92%,100%{--tx:0cqw;--ty:0cqw;--rot:-45deg;--sx:1;background-color:var(--violet)}}
@keyframes mx3{
0%,12%{--tx:0cqw;--ty:0cqw;--rot:0deg;--sx:0;background-color:var(--mid);animation-timing-function:cubic-bezier(.62,-.16,.24,1.14)}
30%,42%{--tx:0cqw;--ty:27cqw;--rot:0deg;--sx:.741;background-color:var(--indigo);animation-timing-function:cubic-bezier(.62,-.16,.24,1.14)}
60%,72%{--tx:0cqw;--ty:27.1cqw;--rot:0deg;--sx:.87;background-color:var(--mid);animation-timing-function:cubic-bezier(.62,-.16,.24,1.14)}
92%,100%{--tx:0cqw;--ty:0cqw;--rot:0deg;--sx:0;background-color:var(--mid)}}
@keyframes mx4{
0%,12%{--tx:0cqw;--ty:0cqw;--rot:90deg;--sx:0;background-color:var(--indigo);animation-timing-function:cubic-bezier(.62,-.16,.24,1.14)}
30%,42%{--tx:-27cqw;--ty:0cqw;--rot:90deg;--sx:.741;background-color:var(--mid);animation-timing-function:cubic-bezier(.62,-.16,.24,1.14)}
60%,72%{--tx:0cqw;--ty:0cqw;--rot:90deg;--sx:0;background-color:var(--indigo);animation-timing-function:cubic-bezier(.62,-.16,.24,1.14)}
92%,100%{--tx:0cqw;--ty:0cqw;--rot:90deg;--sx:0;background-color:var(--indigo)}}
/* entrada una sola vez; el bucle ya no se funde, solo respira */
@keyframes xin{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
@keyframes xbreathe{
0%{scale:1}
8%{scale:1.02}
22%{scale:1}
40%{scale:1.025}
58%{scale:1}
78%{scale:1.025}
100%{scale:1}}
@keyframes xaura{
0%{opacity:.45;scale:1}
12%{opacity:.5;scale:1.03}
30%{opacity:.85;scale:1.12}
42%{opacity:.6;scale:1.05}
60%{opacity:1;scale:1.16}
72%{opacity:.7;scale:1.08}
92%{opacity:.45;scale:1}
100%{opacity:.45;scale:1}}

/* sections */
section{padding:96px 0}
.alt{background:var(--mist)}
.intro{margin-bottom:56px}
.intro p{color:var(--muted);margin-top:16px}

/* ladder */
.ladder{border-top:2px solid var(--ink)}
.rung{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:28px 0;border-bottom:1px solid var(--line);align-items:baseline}
.rung .q{font-size:1.5rem;font-weight:500;letter-spacing:-.01em}
.rung .a{font-size:1.15rem;color:var(--muted)}
.rung .a b{color:var(--ink);font-weight:600}
.rung:nth-child(1) .q{color:var(--blue)}
.rung:nth-child(2) .q{color:var(--mid)}
.rung:nth-child(3) .q{color:var(--violet)}

/* services */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);background:var(--paper)}
.svc{padding:40px 32px 44px;border-right:1px solid var(--line)}
.svc:last-child{border-right:0}
.svc .bar{display:block;width:44px;height:6px;border-radius:3px;margin-bottom:28px}
.svc:nth-child(1) .bar{background:var(--blue)}
.svc:nth-child(2) .bar{background:var(--mid)}
.svc:nth-child(3) .bar{background:var(--violet)}
.svc p{color:var(--muted);margin:14px 0 20px}
.svc ul{padding-left:1.1em;color:var(--ink);font-size:.98rem}
.svc li{margin:6px 0}

/* process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;counter-reset:s}
.step{counter-increment:s;border-top:2px solid var(--ink);padding-top:20px}
.step::before{content:counter(s);display:block;font-size:2.4rem;font-weight:600;color:var(--blue);line-height:1;margin-bottom:12px}
.step p{color:var(--muted);font-size:1rem;margin-top:8px}

/* statement + contact */
.band{background:var(--ink);color:#fff}
.band h2{max-width:22ch}
.band p{color:#b9c2d3;margin:20px 0 32px}
.band .btn{background:#fff;color:var(--ink);border-color:#fff}
.band .btn:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.band .mail{margin-left:20px;color:#fff}
footer{padding:36px 0;font-size:.95rem;color:var(--muted);border-top:1px solid var(--line)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media(max-width:900px){
 .hero .wrap,.rung,.services,.steps{grid-template-columns:1fr}
 .x{max-width:200px;justify-self:start;order:-1}
 .svc{border-right:0;border-bottom:1px solid var(--line)}
 .svc:last-child{border-bottom:0}
 .rung{gap:6px}
 nav a:not(.btn){display:none}
 .hero{padding:56px 0 72px}section{padding:72px 0}
 .band .mail{display:block;margin:20px 0 0}
}
@media(prefers-reduced-motion:reduce){
 .x,.x::before,.x i{animation:none}
 .x i:nth-child(1){--rot:45deg;--sx:1;background-color:var(--blue);opacity:1}
 .x i:nth-child(2){--rot:-45deg;--sx:1;background-color:var(--violet);opacity:1}
 .x i:nth-child(3),.x i:nth-child(4){display:none}
 html{scroll-behavior:auto}}