:root{
  --tinta:#151515;
  --naranja:#FD5016;
  --hueso:#F1EDE1;
  --arena:#E3DCCB;
  --piedra:#8A8478;
  --naranja-prof:#B23508;

  --bg:var(--hueso);
  --fg:var(--tinta);
  --fg-2:rgba(21,21,21,.85);
  --fg-3:rgba(21,21,21,.62);
  --line:rgba(21,21,21,.16);
  --accent-text:var(--naranja-prof);

  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --wrap:1200px;
  --gut:clamp(20px,5vw,60px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--hueso);color:var(--tinta);font-family:var(--sans);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,dl,dd{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--naranja);outline-offset:3px;border-radius:4px}

.skip{position:absolute;left:-999px;top:8px;background:var(--tinta);color:var(--hueso);padding:8px 14px;z-index:100;border-radius:6px}
.skip:focus{left:8px}
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gut)*2);margin:0 auto;padding:0 var(--gut)}

/* ---------- Secciones ---------- */
.sec{background:var(--bg);color:var(--fg);padding:0 0 clamp(80px,11vw,150px)}
.sec.dark{
  --bg:var(--tinta);--fg:var(--hueso);
  --fg-2:rgba(241,237,225,.82);--fg-3:rgba(241,237,225,.58);
  --line:rgba(241,237,225,.16);--accent-text:var(--naranja);
}
.sec-head{display:flex;justify-content:space-between;padding:20px 0;border-bottom:1px solid var(--line);margin-bottom:clamp(40px,6vw,80px);
  font:400 12px/16px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.label{font:500 12px/16px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text);margin-bottom:20px}
.mono-s{font:400 12px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.mono-s b{display:block;font-weight:500;color:var(--accent-text);margin-bottom:2px}

h1,h2,h3{font-weight:600;letter-spacing:-.025em;color:var(--fg)}
h1{font-size:clamp(44px,7.4vw,98px);line-height:1.02}
h2{font-size:clamp(34px,4.8vw,66px);line-height:1.06;max-width:16ch}
h2.h2-wide{max-width:22ch}
h2:not(.h2-wide){max-width:20ch}
h3{font-size:clamp(22px,2.2vw,28px);line-height:1.2}
.lead{font-size:clamp(18px,1.7vw,22px);line-height:1.55;color:var(--fg-2);max-width:56ch}
.lead-dark{margin-top:24px}

/* ---------- Header ---------- */
.top{position:sticky;top:0;z-index:50;background:var(--hueso);border-bottom:1px solid rgba(21,21,21,.1)}
.top-in{display:flex;align-items:center;justify-content:space-between;height:68px;gap:24px}
.brand img{height:30px;width:auto}
.nav{display:flex;gap:32px;margin-left:auto;margin-right:8px}
.nav a{font:500 12px/16px var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--fg-3);padding:6px 0;transition:color .2s}
.nav a:hover{color:var(--tinta)}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font:500 16px/1 var(--sans);padding:17px 24px;border-radius:999px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .2s,background .2s,color .2s,border-color .2s}
.btn-primary{background:var(--tinta);color:var(--hueso)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-primary .dot{width:10px;height:10px;border-radius:50%;background:var(--hueso);transition:background .25s,transform .25s}
.btn-primary:hover .dot{background:var(--naranja);transform:scale(1.25)}
.btn-ghost{border-color:var(--line);color:var(--fg)}
.btn-ghost:hover{border-color:var(--tinta)}
.btn-sm{padding:11px 18px;font-size:14px}
.btn-lg{padding:21px 32px;font-size:18px}

/* ---------- Hero ---------- */
.hero{padding-bottom:clamp(70px,9vw,120px);overflow-x:clip}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center}
.hero-copy h1{margin-bottom:32px}
.hero-copy .lead{margin-bottom:28px}
.sub{font-weight:500;font-size:clamp(17px,1.6vw,20px);margin-bottom:36px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}

.hero-art{position:relative;width:100%;max-width:460px;margin-left:auto;aspect-ratio:164.5/172;touch-action:pan-y}
.hero-art svg{width:100%;height:100%;overflow:visible;cursor:default}
#dot{cursor:pointer}
.tag{position:absolute;font:500 11px/14px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--naranja-prof);white-space:nowrap;text-decoration:none;pointer-events:none}
.tag-limit{left:-4%;bottom:30%;padding-right:36px;border-right:0}
.tag-limit::after{content:"";position:absolute;right:0;top:7px;width:28px;height:1px;background:var(--naranja-prof)}
.tag-exp{left:0;top:0;will-change:transform;background:var(--hueso);padding:3px 7px;border-radius:4px}
.tag-exp.live{pointer-events:auto;text-decoration:underline;text-underline-offset:4px}
.hint{position:absolute;left:0;right:0;bottom:-34px;font:400 11px/14px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);text-align:right}

/* ---------- Prueba ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(56px,8vw,110px);border-top:1px solid var(--line)}
.stat{padding:28px 24px 0 0}
.stat+.stat{padding-left:24px;border-left:1px solid var(--line)}
.stat-n{font-weight:600;letter-spacing:-.03em;font-size:clamp(44px,5.4vw,80px);line-height:1;margin-bottom:14px;font-variant-numeric:tabular-nums}
.stat-t{font-size:18px;color:var(--fg);margin-bottom:6px}

/* ---------- Servicios ---------- */
.svc-list{margin-top:clamp(40px,6vw,80px);border-bottom:1px solid var(--line)}
.svc{border-top:1px solid var(--line)}
.svc summary{display:grid;grid-template-columns:clamp(48px,7vw,96px) 1fr 24px;align-items:center;gap:16px;padding:clamp(22px,3vw,36px) 0;cursor:pointer;list-style:none}
.svc summary::-webkit-details-marker{display:none}
.svc .num{font:500 12px/16px var(--mono);letter-spacing:.08em;color:var(--fg-3);position:relative;padding-left:0;transition:color .2s,padding .25s}
.svc .num::before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--naranja);transform:scale(0);transition:transform .25s}
.svc summary h3{font-size:clamp(30px,4.4vw,60px);line-height:1.05;transition:transform .3s}
.svc summary:hover h3,.svc[open] summary h3{transform:translateX(10px)}
.svc summary:hover .num,.svc[open] .num{color:var(--accent-text);padding-left:16px}
.svc summary:hover .num::before,.svc[open] .num::before{transform:scale(1)}
.plus{width:20px;height:20px;position:relative}
.plus::before,.plus::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--fg);transition:transform .3s}
.plus::after{transform:rotate(90deg)}
.svc[open] .plus::after{transform:rotate(0)}
.svc-body{display:grid;grid-template-columns:clamp(48px,7vw,96px) minmax(0,1.3fr) minmax(0,1fr);gap:16px;padding:0 0 clamp(26px,3.5vw,40px)}
.svc-body p:first-child{grid-column:2;color:var(--fg-2);max-width:48ch}
.svc-body .mono-s{align-self:start;padding-top:6px}

/* ---------- Casos ---------- */
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(40px,6vw,72px)}
.case{display:flex;flex-direction:column;gap:14px;padding:clamp(24px,2.6vw,36px);border:1px solid var(--line);border-radius:12px;text-decoration:none;min-height:260px}
.case h3{font-size:clamp(24px,2.5vw,34px);line-height:1.12}
.case-t{color:var(--fg-2);font-size:17px}
.case-big{grid-column:span 3;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);column-gap:clamp(24px,5vw,80px);align-content:start}
.case-big .mono-s{grid-column:1/-1}
.case-big h3{font-size:clamp(34px,4.6vw,64px);line-height:1.04;grid-column:1}
.case-big .case-t{grid-column:1}
.case-m{grid-column:2;grid-row:2/4;display:grid;grid-template-columns:1fr;gap:0;align-self:end}
.case-m div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.case-m dt{font:400 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.case-m dd{font-weight:600;letter-spacing:-.03em;font-size:clamp(30px,3.6vw,52px);line-height:1;font-variant-numeric:tabular-nums}
.case-m dd.hot{color:var(--naranja)}
.case-cta{border-style:dashed;border-color:rgba(253,80,22,.7);transition:background .25s,border-color .25s}
.case-cta:hover{background:var(--naranja);border-color:var(--naranja);color:var(--tinta)}
.case-cta:hover h3,.case-cta:hover .case-t,.case-cta:hover .mono-s{color:var(--tinta)}
.case-cta h3{color:var(--naranja);transition:color .25s}
.case-cta .case-t{margin-top:auto;color:var(--hueso)}

/* ---------- Método ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:clamp(40px,6vw,80px)}
.pillar{border-top:2px solid var(--tinta);padding-top:20px}
.pillar .num{font:500 12px/16px var(--mono);letter-spacing:.08em;color:var(--accent-text);margin-bottom:18px}
.pillar h3{margin-bottom:12px}
.pillar p:last-child{color:var(--fg-2);font-size:17px}
.family{margin-top:clamp(48px,7vw,90px);display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;padding-top:28px;border-top:1px solid var(--line)}
.family ul{display:flex;flex-wrap:wrap;gap:8px}
.family li{font:500 13px/1 var(--mono);letter-spacing:.04em;padding:10px 14px;border:1px solid var(--line);border-radius:999px}

/* ---------- CTA ---------- */
.sec-cta{padding-bottom:clamp(60px,8vw,110px)}
.cta-card{background:var(--naranja);color:var(--tinta);border-radius:20px;padding:clamp(32px,6vw,88px);display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.cta-card h2{color:var(--tinta);max-width:18ch}
.label-ink{color:var(--tinta);margin-bottom:0}
.cta-t{font-size:clamp(18px,1.8vw,22px);max-width:40ch;color:var(--tinta)}
.cta-card .btn-primary:hover .dot{background:var(--naranja)}

/* ---------- Footer ---------- */
.foot{background:var(--tinta);color:var(--hueso);padding:clamp(48px,6vw,80px) 0 32px}
.foot-in{display:grid;grid-template-columns:auto 1fr auto;gap:32px 48px;align-items:start;padding-bottom:40px;border-bottom:1px solid rgba(241,237,225,.16)}
.foot-in img{height:40px;width:auto}
.foot-t{color:rgba(241,237,225,.7);font-size:16px}
.foot-l{display:flex;flex-direction:column;gap:6px;text-align:right}
.foot .mono-s{color:rgba(241,237,225,.6)}
.foot-l a{text-decoration:none}
.foot-l a:hover{color:var(--naranja)}
.foot-s{padding-top:24px}

/* ---------- Rail (el punto guía el scroll) ---------- */
.rail{position:fixed;right:clamp(14px,2vw,28px);top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;align-items:center;gap:14px;pointer-events:none;color:var(--tinta);transition:color .3s}
body[data-theme="dark"] .rail{color:var(--hueso)}
.rail-n{font:500 10px/1 var(--mono);letter-spacing:.08em;writing-mode:vertical-rl;opacity:.6}
.rail-track{position:relative;width:1px;height:min(34vh,280px)}
.rail-track::before{content:"";position:absolute;inset:0;background:currentColor;opacity:.28}
.rail-dot{position:absolute;left:50%;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--naranja);opacity:1;will-change:transform}

/* ---------- Reveal ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.stats .stat:nth-child(2){transition-delay:.08s}.stats .stat:nth-child(3){transition-delay:.16s}.stats .stat:nth-child(4){transition-delay:.24s}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .rail{display:none}
}
@media (max-width:900px){
  .nav{display:none}
  .top-in{justify-content:space-between}
  .hero-grid{grid-template-columns:1fr}
  .hero-art{max-width:320px;margin:24px auto 24px 0}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat:nth-child(3){border-left:0;padding-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--line);margin-top:28px}
  .cases{grid-template-columns:1fr}
  .case-big{grid-column:auto;grid-template-columns:1fr}
  .case-big .mono-s,.case-big h3,.case-big .case-t,.case-m{grid-column:1;grid-row:auto}
  .case-m{margin-top:12px}
  .pillars{grid-template-columns:1fr}
  .svc-body{grid-template-columns:48px 1fr}
  .svc-body p:first-child,.svc-body .mono-s{grid-column:2}
  .foot-in{grid-template-columns:1fr}
  .foot-l{text-align:left}
}
@media (max-width:520px){
  body{font-size:17px}
  .stats{grid-template-columns:1fr}
  .stat,.stat+.stat{padding:24px 0 0;border-left:0;border-top:1px solid var(--line);margin-top:24px}
  .stat:first-child{border-top:0;margin-top:0}
  .btn:not(.btn-sm){width:100%;justify-content:center}
  .brand img{height:26px}
  .hero-art{max-width:250px}
  .tag-limit{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .js .reveal{opacity:1;transform:none}
}

/* ---------- Páginas de servicio ---------- */
.sec-tight{padding-bottom:clamp(60px,8vw,110px)}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;margin:-24px 0 clamp(28px,4vw,48px);font:400 12px/16px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--tinta)}
.page-hero{padding-bottom:clamp(64px,8vw,110px)}
.page-hero h1{font-size:clamp(38px,6.2vw,84px);line-height:1.04;max-width:20ch;margin-bottom:28px}
.page-hero .lead{margin-bottom:24px;max-width:60ch}
.pillars-6{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:clamp(28px,4vw,56px)}

.steps{counter-reset:s;margin-top:clamp(40px,6vw,80px);border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:clamp(48px,7vw,96px) minmax(0,1fr) minmax(0,1.3fr);gap:16px;align-items:baseline;padding:clamp(20px,2.6vw,32px) 0;border-bottom:1px solid var(--line)}
.step .num{font:500 12px/16px var(--mono);letter-spacing:.08em;color:var(--accent-text)}
.step h3{font-size:clamp(22px,2.6vw,34px);line-height:1.1}
.step p{color:var(--fg-2);font-size:17px}

.anat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(16px,2.4vw,32px);margin-top:clamp(40px,6vw,80px)}
.anat{border-top:2px solid var(--tinta);padding-top:18px}
.anat .num{font:500 12px/16px var(--mono);letter-spacing:.08em;color:var(--accent-text);margin-bottom:14px}
.anat h3{margin-bottom:10px;font-size:clamp(20px,2vw,26px)}
.anat p:last-child{color:var(--fg-2);font-size:16px}

.cases-one{grid-template-columns:1fr}
.cases-one .case-big{grid-column:auto}
.cases-two{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:20px}
.cases-two .case{min-height:0}
a.case:hover{border-color:var(--fg)}

.qa-list{margin-top:clamp(40px,6vw,72px);border-bottom:1px solid var(--line);max-width:920px}
.qa{border-top:1px solid var(--line)}
.qa summary{display:grid;grid-template-columns:1fr 24px;align-items:center;gap:16px;padding:22px 0;cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary h3{font-size:clamp(18px,1.9vw,24px);font-weight:500;letter-spacing:-.015em;line-height:1.3}
.qa .plus::before,.qa .plus::after{background:var(--fg)}
.qa[open] .plus::after{transform:rotate(0)}
.qa p{padding:0 40px 26px 0;color:var(--fg-2);max-width:68ch}
.qa-home{margin-top:clamp(48px,7vw,90px);padding-top:clamp(28px,4vw,48px);border-top:1px solid var(--line)}
.qa-home h3{margin-bottom:8px}

@media (max-width:900px){
  .pillars-6{grid-template-columns:1fr}
  .step{grid-template-columns:48px 1fr}
  .step p{grid-column:2}
  .cases-two{grid-template-columns:1fr}
}
.svc-link{grid-column:2;justify-self:start;font:500 15px/1 var(--sans);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px;transition:color .2s}
.svc-link:hover{color:var(--accent-text)}
.foot-l{display:grid;grid-template-columns:auto auto;gap:6px 28px;justify-content:end;text-align:left}
@media (max-width:900px){.foot-l{justify-content:start}}

/* ---------- Blog ---------- */
.post-hero{padding-bottom:clamp(32px,4vw,56px)}
.post-hero h1{font-size:clamp(34px,5.4vw,72px);line-height:1.05;max-width:22ch;margin-bottom:24px}
.post-meta{display:flex;flex-wrap:wrap;gap:6px 20px;font:400 12px/16px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.post{max-width:760px;margin:0 auto 0 0}
.post-wrap{padding-bottom:clamp(60px,8vw,110px)}
.post p,.post li{font-size:19px;line-height:1.7;color:var(--fg-2)}
.post p{margin:0 0 20px}
.post h2{font-size:clamp(26px,3vw,38px);line-height:1.15;max-width:none;margin:clamp(40px,5vw,64px) 0 16px}
.post h3{font-size:clamp(20px,2vw,24px);margin:28px 0 8px}
.post ul,.post ol{margin:0 0 24px;padding-left:1.3em;list-style:revert}
.post li{margin-bottom:10px}
.post li::marker{color:var(--accent-text)}
.post a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(21,21,21,.35)}
.post a:hover{text-decoration-color:var(--tinta)}
.post strong{font-weight:600;color:var(--fg)}
.tldr{background:var(--arena);border-radius:12px;padding:22px 26px;margin:0 0 36px}
.tldr .mono-s{margin-bottom:8px}
.tldr p{margin:0;color:var(--fg);font-size:18px}
.script{border:1px solid var(--line);border-radius:12px;padding:22px 26px;margin:0 0 28px;background:#fff}
.script p{font:400 15px/1.7 var(--mono);color:var(--fg);margin:0 0 12px}
.script p:last-child{margin-bottom:0}
.script b{display:block;font:500 11px/16px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}
.eg{font-size:17px!important;color:var(--fg-3)!important}
.post-cta{margin-top:clamp(40px,5vw,64px);padding:clamp(24px,3vw,40px);border:1px solid var(--line);border-radius:16px}
.post-cta h2{margin:0 0 12px;font-size:clamp(24px,2.6vw,32px)}
.post-cta p{margin-bottom:20px}
.post-cta .btn{text-decoration:none}
.blog-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:clamp(32px,5vw,56px)}
.blog-list .case{min-height:0;justify-content:space-between}
.blog-list .case h3{font-size:clamp(22px,2.2vw,30px)}
@media (max-width:900px){.blog-list{grid-template-columns:1fr}.post p,.post li{font-size:18px}}
.cmp{width:100%;border-collapse:collapse;margin:0 0 28px;font-size:16px;table-layout:fixed}
.cmp th,.cmp td{text-align:left;vertical-align:top;padding:12px 14px 12px 0;border-top:1px solid var(--line);color:var(--fg-2);line-height:1.5}
.cmp th{font:500 12px/16px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}
.cmp td:first-child{font-weight:600;color:var(--fg);width:22%}
@media (max-width:700px){.cmp{font-size:15px}.cmp th,.cmp td{padding-right:8px}}