:root{
  --ink:#0b0b0d; --ink2:#131316; --line:rgba(255,255,255,.1);
  --red:#d3191c; --red2:#ae1600; --hot:#ff3b30;
  --paper:#f3ece2; --mute:#a5a3a0;
  --disp:'Bricolage Grotesque',sans-serif; --body:'Instrument Sans',sans-serif; --mono:'JetBrains Mono',monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{background:var(--ink);color:var(--paper);font-family:var(--body);font-size:17px;line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wrap{width:min(1180px,100% - 48px);margin-inline:auto}
.grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.cursor{position:fixed;width:34px;height:34px;border:1.5px solid var(--red);border-radius:50%;z-index:95;pointer-events:none;transform:translate(-100px,-100px);transition:width .25s,height .25s,background .25s;mix-blend-mode:screen}
.cursor.big{width:64px;height:64px;background:rgba(211,25,28,.25)}
@media (hover:none){.cursor{display:none}}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;padding:14px max(24px,calc((100% - 1180px)/2));transition:background .3s,backdrop-filter .3s,border-color .3s;border-bottom:1px solid transparent}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(11,11,13,.8);backdrop-filter:blur(14px);opacity:0;transition:opacity .3s}
.nav.stuck{border-color:var(--line)}
.nav.stuck::before{opacity:1}
.brand img{height:38px;width:auto}
.links{display:flex;align-items:center;gap:28px;font-size:15px}
.links a:not(.btn){position:relative;color:var(--mute);transition:color .2s}
.links a:not(.btn):hover{color:#fff}
.links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:0;background:var(--red);transition:width .3s var(--ease)}
.links a:not(.btn):hover::after{width:100%}
.burger{display:none;background:none;border:0;width:40px;height:40px;cursor:pointer}
.burger span{display:block;height:2px;background:#fff;margin:7px 8px;transition:transform .3s}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--red);color:#fff;font-weight:600;padding:14px 26px;border-radius:999px;border:1.5px solid var(--red);cursor:pointer;font:600 16px var(--body);transition:transform .25s var(--ease),background .25s,box-shadow .25s;position:relative;overflow:hidden}
.btn svg{width:18px;height:18px;transition:transform .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px var(--red)}
.btn:hover svg{transform:translateX(4px)}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.3)}
.btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff;box-shadow:none}
.btn-sm{padding:8px 18px;font-size:14px}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:120px 0 90px;overflow:hidden}
.sun{position:absolute;right:-8vw;top:50%;width:min(62vw,760px);aspect-ratio:1;transform:translateY(-50%);pointer-events:none}
.sun-core{position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff5a3c,var(--red) 45%,var(--red2));box-shadow:0 0 140px 20px rgba(211,25,28,.45);animation:pulse 6s ease-in-out infinite}
.ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(211,25,28,.45)}
.r2{inset:-7%;border-style:dashed;border-color:rgba(255,255,255,.14);animation:spin 60s linear infinite}
.r3{inset:9%;border-color:rgba(255,255,255,.08);animation:spin 40s linear infinite reverse;border-style:dotted}
.r1{animation:spin 90s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{transform:scale(1.04);filter:brightness(1.12)}}
.kanji{position:absolute;right:6vw;bottom:8%;font:800 clamp(120px,22vw,320px)/1 var(--disp);color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.12);letter-spacing:-.05em;pointer-events:none;user-select:none}
.hero-grid{position:relative;display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center}
.eyebrow{font:500 13px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:10px;margin-bottom:22px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 var(--red);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}}
h1{font:800 clamp(48px,8.4vw,116px)/.95 var(--disp);letter-spacing:-.035em}
h1 .line{display:block;overflow:hidden;padding-bottom:.08em}
h1 .line span{display:inline-block;transform:translateY(110%);animation:rise 1s var(--ease) forwards}
h1 .line:nth-child(2) span{animation-delay:.12s}
h1 .line:nth-child(3) span{animation-delay:.24s}
h1 em,h2 em{font-style:normal;color:var(--red);position:relative}
@keyframes rise{to{transform:none}}
.lead{max-width:540px;margin:28px 0 34px;font-size:19px;color:#d8d2c8}
.lead strong{color:#fff}
.cta-row{display:flex;flex-wrap:wrap;gap:14px}
.hero-card{background:rgba(19,19,22,.75);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:22px;padding:24px;transform:rotate(2deg);box-shadow:0 30px 80px -30px #000;transition:transform .5s var(--ease)}
.hero-card:hover{transform:rotate(0) translateY(-6px)}
.hc-head{display:flex;justify-content:space-between;font:500 13px var(--mono);color:var(--mute);margin-bottom:18px}
.hc-head b{color:var(--red)}
.live{display:flex;align-items:center;gap:7px}.live i{width:7px;height:7px;background:#3ddc84;border-radius:50%}
.hc-list{list-style:none}
.hc-list li{display:grid;grid-template-columns:34px 1fr;font:700 20px var(--disp);padding:14px 0;border-top:1px solid var(--line)}
.hc-list span{font:400 12px var(--mono);color:var(--red);padding-top:6px}
.hc-list small{grid-column:2;font:400 14px var(--body);color:var(--mute)}
.hc-bar{height:4px;border-radius:9px;background:var(--line);margin:16px 0 12px;overflow:hidden}
.hc-bar i{display:block;height:100%;width:40%;background:linear-gradient(90deg,var(--red2),var(--hot));animation:load 3.5s ease-in-out infinite}
@keyframes load{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
.hc-foot{font-size:13px;color:var(--mute)}
.marquee{position:absolute;left:0;right:0;bottom:0;border-block:1px solid var(--line);background:rgba(11,11,13,.7);overflow:hidden;padding:14px 0}
.track{display:flex;gap:40px;width:max-content;animation:scroll 40s linear infinite;font:500 14px var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--mute)}
.track span::before{content:"◆";color:var(--red);margin-right:40px}
@keyframes scroll{to{transform:translateX(-50%)}}

/* sections */
.section{padding:130px 0;position:relative}
.dark2{background:var(--ink2)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.sec-head{margin-bottom:56px;max-width:720px}
.two .sec-head{margin-bottom:0;position:sticky;top:110px}
.tag{font:500 13px var(--mono);color:var(--red);text-transform:uppercase;letter-spacing:.14em;margin-bottom:14px}
h2{font:800 clamp(38px,5.6vw,72px)/1 var(--disp);letter-spacing:-.03em;margin-bottom:22px}
.sec-head>p:not(.tag){color:#cfc9bf;font-size:18px;max-width:560px}

/* modules */
.modules{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.mod{grid-column:span 2;position:relative;background:var(--ink2);border:1px solid var(--line);border-radius:22px;padding:30px;overflow:hidden;transition:transform .4s var(--ease),border-color .3s}
.mod::before{content:"";position:absolute;inset:0;background:radial-gradient(400px circle at var(--mx,50%) var(--my,0),rgba(211,25,28,.22),transparent 60%);opacity:0;transition:opacity .3s}
.mod:hover{transform:translateY(-6px);border-color:rgba(211,25,28,.6)}
.mod:hover::before{opacity:1}
.mod>svg{width:38px;height:38px;color:var(--red);margin-bottom:38px}
.mod h3,.hw h3,.plan h3,.sec h3{font:700 26px/1.15 var(--disp);letter-spacing:-.01em;margin-bottom:10px}
.mod p{color:#c3beb5;font-size:16px}
.mod-hot{background:linear-gradient(140deg,var(--red),var(--red2));border-color:transparent}
.mod-hot>svg,.mod-hot p{color:#fff}
.mod-wide{grid-column:span 4;display:grid;grid-template-columns:auto 1fr;gap:0 28px;align-items:start}
.mod-wide>svg{margin:0;grid-row:span 2}
.mod-wide .flow{grid-column:2}
.flow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:22px;font:400 12px var(--mono)}
.flow i{font-style:normal;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.08)}
.flow b{color:var(--mute);font-weight:400}
.mod-hot .flow i{background:rgba(0,0,0,.25)}
.also{margin-top:34px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:15px;color:var(--mute)}
.also b{font-weight:500;color:var(--paper);border:1px solid var(--line);padding:5px 14px;border-radius:999px}

/* hardware */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.tab{background:none;border:1px solid var(--line);color:var(--mute);padding:8px 20px;border-radius:999px;cursor:pointer;font:500 15px var(--body);transition:.25s}
.tab:hover{color:#fff;border-color:#fff}
.tab.on{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.hw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.hw{background:var(--ink);border:1px solid var(--line);border-radius:18px;padding:26px;transition:transform .35s var(--ease),border-color .3s,opacity .35s}
.hw svg{width:44px;height:44px;color:var(--paper);margin-bottom:22px;transition:color .3s,transform .4s var(--ease)}
.hw:hover{transform:translateY(-5px);border-color:var(--red)}
.hw:hover svg{color:var(--red);transform:scale(1.1) rotate(-4deg)}
.hw h3{font-size:20px}.hw p{font-size:15px;color:var(--mute)}
.hw.off{display:none}
.note{margin-top:28px;font-size:14px;color:var(--mute)}

/* plans */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.plan{position:relative;background:var(--ink2);border:1px solid var(--line);border-radius:26px;padding:38px;display:flex;flex-direction:column;transition:transform .4s var(--ease)}
.plan:hover{transform:translateY(-6px)}
.plan-hot{background:linear-gradient(160deg,#1c0a0a,var(--ink2));border-color:rgba(211,25,28,.7);box-shadow:0 0 80px -30px var(--red)}
.badge{align-self:flex-start;font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;background:var(--red);padding:5px 12px;border-radius:999px;margin-bottom:22px}
.badge-dim{background:rgba(255,255,255,.1)}
.plan h3{font-size:32px}
.pd{color:#c3beb5;margin-bottom:22px}
.plan ul{list-style:none;margin-bottom:32px;flex:1}
.plan li{padding:11px 0 11px 30px;border-top:1px solid var(--line);position:relative;font-size:16px}
.plan li::before{content:"";position:absolute;left:0;top:19px;width:12px;height:12px;border-radius:50%;background:var(--red)}
.plan .btn{align-self:flex-start}

/* sectors */
.sectors{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:22px;overflow:hidden}
.sec{padding:34px;border:0 solid var(--line);border-right-width:1px;border-bottom-width:1px;position:relative;transition:background .3s}
.sec:nth-child(3n){border-right:0}.sec:nth-last-child(-n+3){border-bottom:0}
.sec:hover{background:var(--red)}
.sec b{font:400 13px var(--mono);color:var(--red);display:block;margin-bottom:34px;transition:color .3s}
.sec:hover b{color:#fff}
.sec h3{font-size:23px}.sec p{color:var(--mute);font-size:15px}
.sec:hover p{color:#fff}

/* steps */
.adv{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.adv span{font:400 13px var(--mono);border:1px solid var(--line);border-radius:999px;padding:6px 14px;color:var(--paper)}
.steps{list-style:none;counter-reset:s;position:relative}
.steps::before{content:"";position:absolute;left:23px;top:20px;bottom:20px;width:2px;background:linear-gradient(var(--red),var(--line))}
.steps li{position:relative;display:grid;grid-template-columns:48px 1fr auto;gap:22px;align-items:center;padding:16px 0}
.steps i{width:48px;height:48px;border-radius:50%;background:var(--ink);border:2px solid var(--red);display:grid;place-items:center;font:700 18px var(--disp);font-style:normal;position:relative;z-index:1;transition:.3s}
.steps li:hover i{background:var(--red)}
.steps h3{font:700 21px var(--disp)}.steps p{font-size:15px;color:var(--mute)}
.steps em{font:400 13px var(--mono);font-style:normal;color:var(--red)}
.steps .go i{border-color:#3ddc84}.steps .go em{color:#3ddc84}

/* contact */
.contact{background:linear-gradient(180deg,var(--ink) 0,#1a0606 100%)}
.cinfo{display:flex;flex-direction:column;gap:8px;margin-top:30px;font:500 18px var(--mono)}
.cinfo a{border-bottom:1px solid var(--red);align-self:flex-start;padding-bottom:2px}
.form{display:grid;gap:18px;background:rgba(19,19,22,.8);border:1px solid var(--line);border-radius:26px;padding:34px}
.form label{display:grid;gap:6px;font:500 13px var(--mono);color:var(--mute);text-transform:uppercase;letter-spacing:.08em}
.form input:not([type=checkbox]),.form textarea{background:var(--ink);border:1px solid var(--line);border-radius:12px;padding:13px 15px;color:#fff;font:400 16px var(--body);text-transform:none;letter-spacing:0;transition:border-color .2s,box-shadow .2s}
.form input:focus,.form textarea:focus{outline:0;border-color:var(--red);box-shadow:0 0 0 3px rgba(211,25,28,.25)}
.form input.bad{border-color:var(--hot)}
fieldset{border:0;display:flex;flex-wrap:wrap;gap:8px}
legend{font:500 13px var(--mono);color:var(--mute);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.chk{display:block!important}
.chk input{position:absolute;opacity:0}
.chk span{display:inline-block;padding:7px 15px;border:1px solid var(--line);border-radius:999px;font:400 14px var(--body);text-transform:none;letter-spacing:0;color:var(--paper);cursor:pointer;transition:.2s}
.chk input:checked+span{background:var(--red);border-color:var(--red)}
.chk input:focus-visible+span{outline:2px solid #fff}
.fmsg{font-size:14px;color:var(--mute);min-height:1.4em}

.foot{border-top:1px solid var(--line);padding:38px 0;color:var(--mute);font-size:14px}
.foot-in{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}
.foot img{height:34px}

.wa{position:fixed;right:22px;bottom:22px;z-index:85;width:60px;height:60px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 10px 30px -6px rgba(37,211,102,.6);transition:transform .3s var(--ease)}
.wa:hover{transform:scale(1.1) rotate(-8deg)}
.wa svg{width:32px;height:32px;fill:#fff;stroke:none}
.wa::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;animation:wap 2.4s infinite}
@keyframes wap{to{transform:scale(1.6);opacity:0}}

/* reveal */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
.hero .reveal{animation:fadeup 1s var(--ease) .5s both;opacity:1;transform:none;transition:none}
.hero .hero-card.reveal{animation:none;transition:transform .5s var(--ease)}
@keyframes fadeup{from{opacity:0;transform:translateY(24px)}}

@media (max-width:960px){
  .hero-grid,.two,.plans{grid-template-columns:1fr}
  .two{gap:40px}.two .sec-head{position:static}
  .hero-card{transform:none;max-width:460px}
  .sun{opacity:.5;right:-30vw}
  .modules{grid-template-columns:1fr}.mod,.mod-wide{grid-column:auto}
  .sectors{grid-template-columns:1fr 1fr}
  .sec:nth-child(3n){border-right-width:1px}.sec:nth-child(2n){border-right:0}
  .sec:nth-last-child(-n+3){border-bottom-width:1px}.sec:nth-last-child(-n+2){border-bottom:0}
  .section{padding:90px 0}
  .burger{display:block;z-index:2}
  .links{position:fixed;inset:0;background:var(--ink);flex-direction:column;justify-content:center;gap:26px;font-size:24px;transform:translateY(-100%);visibility:hidden;transition:transform .5s var(--ease),visibility .5s}
  .links.open{transform:none;visibility:visible}
  .burger[aria-expanded=true] span:first-child{transform:translateY(4.5px) rotate(45deg)}
  .burger[aria-expanded=true] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}
  .kanji{display:none}
}
@media (max-width:560px){
  .sectors{grid-template-columns:1fr}.sec{border-right:0!important;border-bottom-width:1px!important}.sec:last-child{border-bottom:0!important}
  .steps li{grid-template-columns:48px 1fr}.steps em{grid-column:2}
  .mod-wide{display:block}.mod-wide>svg{margin-bottom:38px}
  .form{padding:22px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}h1 .line span{transform:none}}

/* instalación */
.deploy{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.dep{background:var(--ink);border:1px solid var(--line);border-radius:26px;padding:34px;display:flex;flex-direction:column;transition:transform .4s var(--ease),border-color .3s}
.dep:hover{transform:translateY(-6px);border-color:rgba(211,25,28,.6)}
.dep-hot{background:linear-gradient(160deg,#1c0a0a,var(--ink));border-color:rgba(211,25,28,.7);box-shadow:0 0 80px -30px var(--red)}
.dep h3{font:700 28px/1.15 var(--disp);margin-bottom:10px}
.dep .pd{color:#c3beb5;margin-bottom:20px}
.dep ul{list-style:none;margin-bottom:28px;flex:1}
.dep li{padding:10px 0 10px 30px;border-top:1px solid var(--line);position:relative;font-size:15.5px}
.dep li::before{content:"";position:absolute;left:0;top:18px;width:12px;height:12px;border-radius:50%;background:var(--red)}
.dep .btn{align-self:flex-start}
.dep .badge{margin-bottom:14px}
.dep-art{margin-bottom:22px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:16px;padding:10px}
.dep-art svg{width:100%;max-width:440px;margin-inline:auto;display:block;height:auto;stroke-width:1.4}
.dep-art .n{fill:var(--ink2);stroke:rgba(255,255,255,.3)}
.dep-art .n.hot{fill:rgba(211,25,28,.18);stroke:var(--red)}
.dep-art text{fill:var(--paper);stroke:none;font:500 11px var(--mono)}
.dep-art .flow-line{stroke:var(--red);stroke-dasharray:5 5;animation:dash 1s linear infinite}
@keyframes dash{to{stroke-dashoffset:-10}}
.doms{display:grid;gap:8px;margin-bottom:20px}
.doms div{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.doms small{display:block;font:400 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.doms code{font:500 16px var(--mono);color:var(--paper)}
.doms b{color:var(--red);font-weight:500}
@media (max-width:960px){.deploy{grid-template-columns:1fr}}

/* ajustes móviles */
@media (max-width:960px){
  .links{z-index:-1}                       /* el logo y el botón cerrar quedan sobre el menú */
  .links .btn-sm{padding:14px 34px;font-size:18px;margin-top:8px}
  body.menu-open{overflow:hidden}
  body.menu-open .wa{opacity:0;pointer-events:none}
}
@media (max-width:560px){
  .section{padding:72px 0}
  .sec-head{margin-bottom:36px}
  .hw-grid{grid-template-columns:1fr 1fr;gap:10px}
  .hw{padding:16px;border-radius:14px}
  .hw svg{width:30px;height:30px;margin-bottom:12px}
  .hw h3{font-size:16px;margin-bottom:4px}
  .hw p{font-size:13px;line-height:1.45}
  .tabs{flex-wrap:nowrap;overflow-x:auto;margin-inline:-24px;padding-inline:24px;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:none}
  .sec{padding:22px 24px}
  .sec b{margin-bottom:10px}
  .sec h3{font-size:20px}
  .mod{padding:24px}.mod>svg{margin-bottom:22px}
  .mod-wide>svg{margin-bottom:22px}
  .dep,.plan{padding:24px}
  .dep-art svg{max-width:none}
  .dep-art text{font-size:15px}
  .wa{width:52px;height:52px;right:16px;bottom:16px}
  .wa svg{width:28px;height:28px}
  .foot{padding-bottom:90px}
  .contact{padding-bottom:100px}
}