/* ============================================================
   gilbertocarrazco.com — "Del caos al sistema"
   Dark editorial system. Amber = caos · Cobalto = orden.
   ============================================================ */
@import url('fonts/fonts.css');

:root{
  --void:#07090F; --surface:#0B0F17; --raise:#111726;
  --paper:#F2EFE8; --ink:#0A0D14;
  --fg:#E9EAEE; --fg-mut:#949CB0; --fg-dim:#5F6779;
  --cobalt:#2F6BFF; --cobalt-lt:#7BA3FF; --cobalt-dp:#1B4ACC;
  --amber:#F0A544; --amber-dp:#C97F20;
  --line:rgba(233,234,238,.10); --line-2:rgba(233,234,238,.18);
  --d:Space Grotesk,system-ui,sans-serif; --b:IBM Plex Sans,system-ui,sans-serif; --m:Azeret Mono,ui-monospace,monospace;
  --gut:clamp(20px,5vw,72px); --max:1400px;
  --e:cubic-bezier(.22,.68,.24,1); --e2:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{background:var(--void);color:var(--fg);font-family:var(--b);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:hover{color:var(--cobalt-lt)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--cobalt);color:#fff}
:focus-visible{outline:2px solid var(--cobalt-lt);outline-offset:3px;border-radius:2px}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.sec{position:relative;padding:clamp(84px,11vw,168px) 0}
.sec-hd{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,2vw,26px);max-width:900px}

/* mono section marker */
.idx{display:flex;align-items:center;gap:12px;font-family:var(--m);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-dim)}
.idx b{font-weight:500;color:var(--cobalt-lt)}
.idx::after{content:"";flex:1;max-width:120px;height:1px;background:var(--line-2)}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--d);font-weight:500;margin:0;letter-spacing:-.028em;line-height:1.02;text-wrap:balance}
h1{font-size:clamp(42px,8.2vw,116px)}
h2{font-size:clamp(32px,5.2vw,68px);line-height:1.05;letter-spacing:-.025em}
h3{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.016em;line-height:1.15}
p{margin:0;text-wrap:pretty}
.lead{font-size:clamp(16.5px,1.55vw,21px);line-height:1.62;color:var(--fg-mut);max-width:60ch}
.mono{font-family:var(--m);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim)}

/* ---------- grain + vignette ---------- */
.grain{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.30;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.vig{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 50% 42%,transparent 38%,rgba(7,9,15,.72) 100%)}

/* ---------- canvas ---------- */
#scene{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.1s var(--e)}
.scene-ready #scene{opacity:1}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .4s var(--e),border-color .4s var(--e),backdrop-filter .4s}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);opacity:0;transition:opacity .4s}
.nav.st{background:rgba(7,9,15,.72);backdrop-filter:blur(16px) saturate(140%)}
.nav.st::after{opacity:1}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:clamp(66px,7vw,86px)}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand img{width:26px;height:26px}
.brand .nm{font-family:var(--d);font-size:15.5px;font-weight:600;letter-spacing:-.01em;line-height:1.15}
.brand .sb{font-family:var(--m);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-dim);line-height:1.3}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{position:relative;font-size:13.5px;font-weight:500;color:var(--fg-mut);padding:9px 14px;transition:color .25s}
.nav-links a::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1px;background:var(--cobalt-lt);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--e)}
.nav-links a:hover{color:var(--fg)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{display:flex;align-items:center;gap:10px;flex:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--b);font-size:14.5px;font-weight:600;padding:13px 24px;border-radius:999px;border:1px solid transparent;transition:background .2s ease,border-color .2s ease,color .2s ease;white-space:nowrap}
.btn svg{flex:none}
.btn-p{background:var(--cobalt);color:#fff}
.btn-p:hover{color:#fff;background:var(--cobalt-dp)}
.btn-g{border-color:var(--line-2);color:var(--fg)}
.btn-g:hover{border-color:var(--fg);color:var(--fg);background:rgba(233,234,238,.06)}
.btn-wa{background:#25D366;color:#07110A}
.btn-wa:hover{background:#1FBA59;color:#07110A}
.btn-sm{font-size:13px;padding:10px 18px}
.btn-lg{font-size:15.5px;padding:16px 30px}

/* ---------- hero ---------- */
.hero{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:clamp(110px,16vw,180px);padding-bottom:clamp(34px,5vw,58px)}
/* protection gradient so the lattice never fights the type */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(100deg,var(--void) 4%,rgba(7,9,15,.90) 34%,rgba(7,9,15,.42) 58%,transparent 78%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:32%;z-index:-1;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(7,9,15,.82))}
.hero-in{display:grid;gap:clamp(26px,3.4vw,40px)}
.hero h1{max-width:16ch}
.hero h1 .amb{color:var(--amber)}
.hero h1 .cob{color:var(--cobalt-lt)}
.hero-bot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:clamp(24px,4vw,56px);padding-top:clamp(18px,2.4vw,30px);border-top:1px solid var(--line)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-meta{display:flex;gap:clamp(20px,3vw,44px);flex-wrap:wrap}
.hero-meta .it b{display:block;font-family:var(--d);font-size:clamp(20px,2.2vw,28px);font-weight:600;letter-spacing:-.02em;line-height:1}
.hero-meta .it span{font-family:var(--m);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-dim)}
.hint{display:flex;align-items:center;gap:9px;font-family:var(--m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim)}
.hint i{display:block;width:20px;height:1px;background:currentColor;animation:sweep 2.6s var(--e2) infinite}
@keyframes sweep{0%,100%{transform:scaleX(.35);opacity:.5}50%{transform:scaleX(1);opacity:1}}

/* ---------- diagnosis (chaos) ---------- */
.diag{position:relative;z-index:2;background:linear-gradient(180deg,transparent,var(--surface) 22%,var(--surface))}
.diag-grid{display:grid;grid-template-columns:1fr;gap:clamp(40px,5vw,72px);margin-top:clamp(44px,5vw,72px)}
.diag-list{display:grid;gap:0;border-top:1px solid var(--line)}
.diag-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(14px,2.4vw,30px);padding:clamp(18px,2.4vw,26px) 0;border-bottom:1px solid var(--line)}
.diag-row .n{font-family:var(--m);font-size:11px;color:var(--amber);letter-spacing:.1em}
.diag-row p{font-family:var(--d);font-size:clamp(16px,1.85vw,24px);font-weight:400;letter-spacing:-.012em;line-height:1.3;color:var(--fg)}
.diag-row .tk{font-family:var(--m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-dp);border:1px solid rgba(240,165,68,.28);padding:4px 10px;border-radius:999px;white-space:nowrap}
.diag-out{display:flex;align-items:center;gap:14px;margin-top:clamp(32px,4vw,48px);font-family:var(--d);font-size:clamp(18px,2.1vw,27px);letter-spacing:-.015em;line-height:1.3;color:var(--fg)}
.diag-out .ar{color:var(--cobalt-lt);flex:none}

/* ---------- capabilities ---------- */
.cap{position:relative;z-index:2;background:var(--surface)}
.cap-list{margin-top:clamp(40px,5vw,68px);border-top:1px solid var(--line)}
.cap-row{position:relative;display:block;width:100%;text-align:left;border-bottom:1px solid var(--line);padding:clamp(22px,2.8vw,32px) 0;transition:padding .45s var(--e)}
.cap-row::before{content:"";position:absolute;left:calc(var(--gut) * -1);right:calc(var(--gut) * -1);top:0;bottom:0;background:linear-gradient(90deg,rgba(47,107,255,.10),transparent 65%);opacity:0;transition:opacity .45s var(--e);pointer-events:none}
.cap-row:hover::before,.cap-row.op::before{opacity:1}
.cap-top{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:clamp(14px,3vw,34px)}
.cap-n{font-family:var(--m);font-size:11.5px;letter-spacing:.14em;color:var(--fg-dim);transition:color .35s}
.cap-row:hover .cap-n,.cap-row.op .cap-n{color:var(--cobalt-lt)}
.cap-t{font-family:var(--d);font-size:clamp(23px,3.6vw,48px);font-weight:500;letter-spacing:-.026em;line-height:1.04;transition:transform .45s var(--e),color .35s}
.cap-row:hover .cap-t{transform:translateX(10px)}
.cap-pl{position:relative;width:20px;height:20px;flex:none;align-self:center}
.cap-pl::before,.cap-pl::after{content:"";position:absolute;background:var(--fg-mut);transition:transform .4s var(--e),background .3s}
.cap-pl::before{left:0;top:9.5px;width:20px;height:1px}
.cap-pl::after{left:9.5px;top:0;width:1px;height:20px}
.cap-row.op .cap-pl::after{transform:rotate(90deg) scaleX(0)}
.cap-row.op .cap-pl::before{background:var(--cobalt-lt)}
.cap-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--e),opacity .4s var(--e);opacity:0}
.cap-row.op .cap-body{grid-template-rows:1fr;opacity:1}
.cap-body>div{overflow:hidden}
.cap-in{display:grid;grid-template-columns:1fr;gap:16px;padding:clamp(14px,1.8vw,22px) 0 4px;max-width:74ch}
.cap-in p{font-size:15.5px;line-height:1.62;color:var(--fg-mut)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font-family:var(--m);font-size:11px;letter-spacing:.06em;padding:5px 11px;border-radius:999px;border:1px solid var(--line-2);color:var(--fg-mut)}

/* ---------- process ---------- */
.proc{position:relative;z-index:2;background:var(--surface);border-top:1px solid var(--line)}
.proc-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,32px);margin-top:clamp(44px,5vw,74px)}
.proc-line{position:absolute;left:0;right:0;top:38px;height:1px;background:var(--line)}
.proc-line i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cobalt),var(--cobalt-lt));transition:width 1.6s var(--e)}
.proc.in .proc-line i{width:100%}
.proc-step{position:relative;padding-top:66px}
.proc-step .dot{position:absolute;top:33px;left:0;width:11px;height:11px;border-radius:50%;background:var(--surface);border:1px solid var(--line-2);transition:border-color .5s var(--e),background .5s var(--e),box-shadow .5s}
.proc.in .proc-step .dot{border-color:var(--cobalt);background:var(--cobalt);box-shadow:0 0 0 5px rgba(47,107,255,.14)}
.proc-step .n{font-family:var(--m);font-size:11px;letter-spacing:.16em;color:var(--cobalt-lt)}
.proc-step h4{font-family:var(--d);font-size:clamp(18px,1.9vw,23px);font-weight:600;letter-spacing:-.016em;margin:10px 0 8px}
.proc-step p{font-size:14.5px;line-height:1.58;color:var(--fg-mut)}

/* ---------- proof (light — the moment of clarity) ---------- */
.proof{position:relative;z-index:2;background:var(--paper);color:var(--ink)}
.proof .idx{color:#6C7484}.proof .idx b{color:var(--cobalt-dp)}.proof .idx::after{background:rgba(10,13,20,.16)}
.proof h2{color:var(--ink)}
.proof .lead{color:#525A6B}
.proof-grid{display:grid;grid-template-columns:1fr;gap:clamp(14px,1.6vw,20px);margin-top:clamp(44px,5vw,72px)}
.pf{display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,44px);background:#FFF;border:1px solid rgba(10,13,20,.09);border-radius:20px;padding:clamp(22px,3vw,38px);transition:transform .5s var(--e),box-shadow .5s var(--e)}
.pf:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(10,13,20,.10)}
.pf .cat{font-family:var(--m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cobalt-dp)}
.pf h3{color:var(--ink);margin:12px 0 10px}
.pf p{font-size:15px;line-height:1.6;color:#5A6274}
.pf-mt{display:flex;gap:clamp(20px,3vw,40px);align-content:start;flex-wrap:wrap}
.pf-mt div b{display:block;font-family:var(--d);font-size:clamp(26px,3vw,40px);font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--cobalt-dp)}
.pf-mt div span{font-family:var(--m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#7A8294}
.pf-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.pf-tags span{font-family:var(--m);font-size:11px;padding:5px 11px;border-radius:999px;background:rgba(10,13,20,.05);color:#5A6274}
.note{font-family:var(--m);font-size:11px;letter-spacing:.06em;color:#8A92A4;margin-top:24px}

/* ---------- marquee ---------- */
.mq{position:relative;z-index:2;background:var(--paper);color:var(--ink);padding-bottom:clamp(60px,8vw,110px);overflow:hidden}
.mq-t{border-top:1px solid rgba(10,13,20,.10);border-bottom:1px solid rgba(10,13,20,.10);padding:clamp(13px,1.5vw,18px) 0;display:flex;overflow:hidden;user-select:none}
.mq-t+.mq-t{border-top:0}
.mq-run{display:flex;gap:clamp(24px,3vw,48px);padding-right:clamp(24px,3vw,48px);flex:none;align-items:center;animation:run 42s linear infinite}
.mq-t.rev .mq-run{animation-direction:reverse}
.mq-run span{font-family:var(--d);font-size:clamp(15px,1.7vw,22px);font-weight:500;letter-spacing:-.01em;color:#3D4453;white-space:nowrap}
.mq-run i{font-style:normal;color:var(--cobalt);font-size:.7em}
@keyframes run{to{transform:translateX(-100%)}}

/* ---------- cta ---------- */
.cta{position:relative;z-index:2;background:var(--void);text-align:center;padding:clamp(90px,13vw,190px) 0;overflow:hidden}
.cta::before{content:"";position:absolute;left:50%;top:0;width:min(1000px,120vw);aspect-ratio:2/1;transform:translate(-50%,-46%);background:radial-gradient(ellipse at center,rgba(47,107,255,.22),transparent 66%);pointer-events:none}
.cta-in{position:relative;display:grid;gap:clamp(20px,2.6vw,30px);justify-items:center}
.cta h2{max-width:17ch}
.cta .lead{margin-inline:auto;text-align:center}
.cta-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:6px}
.cta-fine{font-family:var(--m);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-dim);margin-top:6px}

/* ---------- footer ---------- */
.ft{position:relative;z-index:2;background:var(--void);border-top:1px solid var(--line);padding:clamp(52px,6vw,78px) 0 clamp(26px,3vw,36px)}
.ft-top{display:grid;grid-template-columns:1fr;gap:clamp(34px,4vw,56px)}
.ft-blurb{font-size:14.5px;line-height:1.62;color:var(--fg-mut);max-width:34ch;margin-top:16px}
.ft-cols{display:grid;grid-template-columns:1fr;gap:clamp(22px,3vw,40px)}
@media (min-width:620px){.ft-cols{grid-template-columns:repeat(3,1fr)}}
.ft-col h5{font-family:var(--m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim);margin:0 0 14px;font-weight:500}
.ft-col a,.ft-col span{display:block;font-size:14px;color:var(--fg-mut);padding:5px 0;transition:color .25s}
.ft-col a:hover{color:var(--cobalt-lt)}
.ft-bot{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-top:clamp(40px,5vw,64px);padding-top:22px;border-top:1px solid var(--line);font-family:var(--m);font-size:11px;letter-spacing:.08em;color:var(--fg-dim)}

/* ---------- floating whatsapp ---------- */
.wa{position:fixed;right:clamp(16px,3vw,30px);bottom:clamp(16px,3vw,30px);z-index:70;width:54px;height:54px;border-radius:50%;background:#25D366;color:#07110A;display:grid;place-items:center;box-shadow:0 12px 34px rgba(37,211,102,.34);transition:background .2s ease}
.wa:hover{background:#1FBA59;color:#07110A}

/* ---------- reveal (only armed once JS confirms) ---------- */
.js .r{opacity:0;transform:translateY(26px)}
.r{transition:opacity .9s var(--e),transform .9s var(--e)}
.r.in{opacity:1;transform:none}
.rl{display:block;overflow:hidden}
.rl>i{display:block;font-style:normal;transition:transform 1.05s var(--e)}
.js .rl>i{transform:translateY(105%)}
.rl.in>i{transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .js .r,.r{opacity:1;transform:none}.js .rl>i,.rl>i{transform:none}
}

/* ---------- responsive ---------- */
@media (min-width:760px){
  .diag-grid{grid-template-columns:1fr}
  .cap-in{grid-template-columns:1.6fr 1fr;gap:34px;align-items:start}
  .pf{grid-template-columns:1.5fr 1fr;align-items:center}
  .ft-top{grid-template-columns:1fr 1.7fr}
}
@media (min-width:1080px){
  .proof-grid{gap:20px}
}
@media (max-width:900px){
  .nav-links{display:none}
  .proc-grid{grid-template-columns:1fr 1fr;row-gap:34px}
  .proc-line{display:none}
  .proc-step{padding-top:0}
  .proc-step .dot{display:none}
}
@media (max-width:560px){
  .nav-cta .btn-g{display:none}
  .hero-bot{flex-direction:column;align-items:flex-start}
  .diag-row{grid-template-columns:auto 1fr;row-gap:8px}
  .diag-row .tk{grid-column:2}
  .proc-grid{grid-template-columns:1fr}
  .brand .sb{display:none}
}
/* short viewports: keep the hero on one screen */
@media (max-height:720px) and (min-width:760px){
  .hero{padding-top:clamp(92px,13vh,120px);padding-bottom:26px}
  .hero h1{font-size:clamp(38px,6.4vw,72px)}
  .hero-in{gap:clamp(16px,2.4vh,26px)}
  .hero .lead{font-size:16px;max-width:52ch}
  .hint{display:none}
}

/* En táctil no hay cursor que mover: la pista sobra. */
@media (hover:none),(pointer:coarse){
  .hint{display:none}
}