:root{--bg:#07070c;--bg2:#0d0d16;--card:#12121d;--line:#ffffff14;--tx:#f4f4f8;--mut:#9a9ab0;--a1:#ff9e3d;--a2:#ff4d6d;--a3:#7c5cff;--grad:linear-gradient(120deg,var(--a1),var(--a2) 55%,var(--a3));--r:18px;--font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--head:"Anton","Impact","Arial Narrow",sans-serif}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--tx);font-family:var(--font);line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}ol,ul{list-style:none}button{font:inherit;color:inherit}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}.narrow{width:min(820px,100% - 40px)}.center{text-align:center}
:focus-visible{outline:2px solid var(--a1);outline-offset:3px;border-radius:6px}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Fondo animado */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(1200px 700px at 50% -10%,#1b1230 0%,transparent 60%),var(--bg)}
.orb{position:absolute;border-radius:50%;opacity:.5;animation:float 26s ease-in-out infinite;will-change:transform}
.o1{width:900px;height:900px;background:radial-gradient(circle,var(--a2) 0%,transparent 62%);top:-420px;left:-360px}
.o2{width:980px;height:980px;background:radial-gradient(circle,var(--a3) 0%,transparent 62%);top:6%;right:-480px;animation-delay:-9s}
.o3{width:820px;height:820px;background:radial-gradient(circle,var(--a1) 0%,transparent 62%);bottom:-420px;left:22%;animation-delay:-15s;opacity:.34}
.grid{position:absolute;inset:0;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 50% 20%,#000 0%,transparent 70%);mask-image:radial-gradient(ellipse at 50% 20%,#000 0%,transparent 70%)}
@keyframes float{50%{transform:translate3d(40px,30px,0) scale(1.06)}}

/* Menú */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px max(20px,calc((100% - 1180px)/2));transition:background .25s,backdrop-filter .25s,border-color .25s;border-bottom:1px solid transparent}
.nav.scrolled{background:#07070ccc;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
.brand img{height:58px;width:auto;max-width:150px;object-fit:contain;display:block}
.menu{display:flex;align-items:center;gap:6px}.menu a:not(.btn){padding:8px 14px;border-radius:99px;font-size:13px;font-weight:600;letter-spacing:.08em;color:#c9c9d8;transition:color .2s,background .2s}
.menu a:not(.btn):hover,.menu a.on{color:#fff;background:#ffffff12}.menu-login{margin-left:8px}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);background:#ffffff0a;border-radius:12px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{width:20px;height:2px;background:#fff;border-radius:2px;transition:transform .25s,opacity .2s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}.burger[aria-expanded=true] span:nth-child(2){opacity:0}.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:700;letter-spacing:.06em;border-radius:14px;border:1px solid transparent;cursor:pointer;transition:transform .18s,box-shadow .25s,background .25s,border-color .25s;white-space:nowrap}
.btn svg{width:20px;height:20px;fill:currentColor}
.btn-sm{padding:10px 18px;font-size:12.5px}.btn-lg{padding:16px 28px;font-size:14px}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 34px -10px var(--a2),inset 0 1px 0 #ffffff40}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 44px -10px var(--a2),inset 0 1px 0 #ffffff55}
.btn-ghost{background:#ffffff0d;border-color:#ffffff24;color:#fff;backdrop-filter:blur(8px)}.btn-ghost:hover{background:#ffffff1a;border-color:#ffffff40;transform:translateY(-2px)}

/* Portada */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;padding:130px 0 190px;text-align:center}
.hero-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.kicker{display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border:1px solid #ffffff22;border-radius:99px;background:#ffffff0a;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#ffd9b3;margin-bottom:26px}
.kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:#35e0a1;box-shadow:0 0 0 4px #35e0a133;animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px #35e0a100}}
h1{font-family:var(--head);font-weight:400;font-size:clamp(38px,6.2vw,88px);line-height:1.04;letter-spacing:.01em;text-transform:uppercase;max-width:17ch;text-wrap:balance;text-shadow:0 8px 50px #ff4d6d44}
.lead{max-width:640px;margin:24px auto 0;color:#c6c6d6;font-size:clamp(16px,1.6vw,19px)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:38px}
.skyline{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(110px,16vw,230px);z-index:1;opacity:.95}

/* Estadísticas */
.stats{position:relative;z-index:3;margin-top:-70px}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,280px));justify-content:center;gap:16px}
.stat{position:relative;padding:28px 22px;text-align:center;background:linear-gradient(180deg,#171726f0,#101019f0);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 20px 50px -24px #000;overflow:hidden}
.stat::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--grad)}
.stat b{display:block;font-family:var(--head);font-weight:400;font-size:clamp(34px,4.4vw,52px);line-height:1.1;letter-spacing:.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{display:block;margin-top:6px;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}

/* Secciones */
.sec{padding:110px 0}.sec.alt{background:linear-gradient(180deg,transparent,#0c0c15 12%,#0c0c15 88%,transparent)}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--a1);margin-bottom:14px}
.sec-title{font-family:var(--head);font-weight:400;font-size:clamp(30px,4.6vw,56px);line-height:1.08;text-transform:uppercase;max-width:18ch;text-wrap:balance}.sec-title.sm{font-size:clamp(24px,3vw,34px);max-width:none;color:#e9e9f3;letter-spacing:.14em}
.center .sec-title{margin-inline:auto}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.card{position:relative;padding:30px 28px;background:linear-gradient(180deg,#14141f,#0f0f18);border:1px solid var(--line);border-radius:var(--r);transition:transform .25s,border-color .25s,box-shadow .25s}
.card:hover{transform:translateY(-6px);border-color:#ff4d6d66;box-shadow:0 24px 50px -24px #ff4d6d77}
.ico{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;background:var(--grad);margin-bottom:20px;box-shadow:0 10px 28px -10px var(--a2)}.ico svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:19px;font-weight:700;margin-bottom:8px}.card p{color:var(--mut);font-size:15px}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:48px;counter-reset:s}
.steps li{position:relative;padding:30px 24px;background:#12121d;border:1px solid var(--line);border-radius:var(--r)}
.steps li::before{counter-increment:s;content:"0" counter(s);display:block;font-family:var(--head);font-size:46px;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:14px}
.steps h3{font-size:18px;margin-bottom:6px}.steps p{color:var(--mut);font-size:14.5px}
.steps li:not(:last-child)::after{content:"";position:absolute;top:50px;right:-19px;width:20px;height:2px;background:linear-gradient(90deg,var(--a2),transparent)}

.partners{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:34px}
.partner{display:flex;align-items:center;gap:12px;padding:16px 26px;min-width:190px;justify-content:center;background:#12121d;border:1px solid var(--line);border-radius:16px;font-weight:700;letter-spacing:.04em;transition:transform .2s,border-color .2s,background .2s}
.partner:hover{transform:translateY(-4px);border-color:#ffffff40;background:#171726}.partner img{height:30px;width:auto}

.faq{margin-top:40px;display:grid;gap:12px}
.faq details{background:#12121d;border:1px solid var(--line);border-radius:16px;transition:border-color .2s}
.faq details[open]{border-color:#ff4d6d55}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;font-weight:600;font-size:16.5px}
.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";font-size:24px;line-height:1;color:var(--a1);transition:transform .25s}.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 24px 22px;color:var(--mut)}

.cta-sec{padding:40px 0 120px}.cta{position:relative;overflow:hidden;padding:64px 28px;text-align:center;border-radius:28px;border:1px solid #ffffff22;background:radial-gradient(600px 300px at 20% 0%,#ff4d6d40,transparent 70%),radial-gradient(600px 300px at 90% 100%,#7c5cff40,transparent 70%),#111119}
.cta h2{font-family:var(--head);font-weight:400;font-size:clamp(28px,4.4vw,52px);text-transform:uppercase;line-height:1.1}.cta p{color:#c6c6d6;margin-top:12px}

.foot{border-top:1px solid var(--line);padding:50px 0 28px;background:#05050a}
.foot-in{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}.disc{max-width:520px;margin-top:16px;color:#7b7b90;font-size:13px}
.foot-links{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start}.foot-links a{color:#b5b5c8;font-size:14px;font-weight:500}.foot-links a:hover{color:#fff}
.copy{text-align:center;margin-top:34px;color:#6b6b80;font-size:13px}

/* Animación de entrada */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}.reveal.in{opacity:1;transform:none}

@media(max-width:980px){.features{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:repeat(2,1fr)}.steps li::after{display:none}}
@media(max-width:820px){
  .orb{animation:none}.o1{width:620px;height:620px;top:-280px;left:-260px}.o2{width:640px;height:640px;right:-380px}.o3{width:560px;height:560px}
  .burger{display:flex}
  .menu{position:fixed;inset:70px 14px auto 14px;flex-direction:column;align-items:stretch;gap:4px;padding:16px;background:#0e0e18f5;backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:20px;opacity:0;pointer-events:none;transform:translateY(-10px);transition:opacity .2s,transform .2s;box-shadow:0 30px 60px #000}
  .menu.open{opacity:1;pointer-events:auto;transform:none}.menu a:not(.btn){padding:13px 16px;font-size:14px}.menu-login{margin:8px 0 0;padding:14px}
  .hero{padding:110px 0 150px}.sec{padding:80px 0}
}
@media(max-width:600px){.features,.steps{grid-template-columns:1fr}.hero-cta .btn{width:100%}.stats{margin-top:-50px}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(140px,210px))}.stat{padding:22px 14px}.cta{padding:48px 20px}.brand img{height:48px;max-width:125px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}

.foot-in img{width:auto;height:64px;max-width:120px;object-fit:contain}
@media(max-width:760px){.foot-in img{height:52px}}


/* --- Identidad visual Santos RP: azul eléctrico, oro y portada cinematográfica --- */
:root{--bg:#030916;--bg2:#07152b;--card:#0a1930;--line:#38a9ff30;--tx:#f5f8ff;--mut:#a8bbd7;--a1:#ffe92e;--a2:#ff9b00;--a3:#087cff;--grad:linear-gradient(115deg,#fff75a 0%,#ffb000 42%,#087cff 100%)}
body{background:#030916}
.bg{background:radial-gradient(ellipse at 50% 0%,#102b5c 0%,transparent 62%),linear-gradient(#030916,#06152b)}
.o1{background:radial-gradient(circle,#087cff 0%,transparent 66%);opacity:.27}
.o2{background:radial-gradient(circle,#123f91 0%,transparent 65%);opacity:.32}
.o3{background:radial-gradient(circle,#d99015 0%,transparent 65%);opacity:.15}
.grid{opacity:.28}
.nav{background:#030916e8;border-bottom-color:#168dff55;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.brand img{height:68px;max-width:178px;filter:drop-shadow(0 0 14px #087cff66)}
.menu a:not(.btn){font-size:12px;letter-spacing:.035em}
.menu a:not(.btn):hover,.menu a.on{color:#43d8ff;background:#087cff20}
.btn-primary{background:linear-gradient(115deg,#087cff,#0054f0);border:1px solid #38a9ff;box-shadow:0 0 22px #087cff45}
.btn-primary:hover{box-shadow:0 0 32px #087cff80;transform:translateY(-1px)}
.btn-ghost{border-color:#168dff;color:#f3f8ff;background:#041329b8}
.btn-ghost:hover{background:#087cff20}
.hero{position:relative;isolation:isolate;min-height:610px;overflow:hidden;background:
radial-gradient(ellipse at 76% 32%,#ff9d3652 0%,transparent 28%),
linear-gradient(180deg,#07132d00 0%,#0309164d 56%,#030916 100%),
linear-gradient(110deg,#07132d 0%,#102a56 34%,#301e3e 65%,#a6532f 100%)}
.hero:before{content:"";position:absolute;z-index:-1;inset:0;opacity:.82;background:
linear-gradient(180deg,transparent 45%,#030916 100%),
repeating-linear-gradient(90deg,transparent 0 38px,#07152d 39px 54px,transparent 55px 73px);
clip-path:polygon(0 42%,3% 42%,3% 31%,5% 31%,5% 48%,8% 48%,8% 27%,10% 27%,10% 44%,13% 44%,13% 36%,16% 36%,16% 49%,20% 49%,20% 25%,23% 25%,23% 47%,27% 47%,27% 34%,30% 34%,30% 50%,34% 50%,34% 19%,37% 19%,37% 48%,41% 48%,41% 30%,45% 30%,45% 48%,49% 48%,49% 22%,53% 22%,53% 48%,57% 48%,57% 12%,61% 12%,61% 48%,65% 48%,65% 27%,69% 27%,69% 48%,73% 48%,73% 18%,77% 18%,77% 48%,82% 48%,82% 33%,86% 33%,86% 48%,90% 48%,90% 26%,94% 26%,94% 48%,100% 48%,100% 100%,0 100%)}
.hero:after{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 50% 50%,transparent 0%,#03091655 80%),linear-gradient(0deg,#030916 0%,transparent 25%)}
.hero .wrap{position:relative}
.hero-title,.hero h1{ text-shadow:0 5px 26px #000b}
.sec{background:transparent}
.sec.alt{background:linear-gradient(180deg,#07152b9c,#07152b55);border-block:1px solid #168dff22}
.card{background:linear-gradient(145deg,#0d203bdf,#071326ed);border-color:#168dff35;box-shadow:0 12px 38px #0003}
.card:hover{border-color:#168dff9c;box-shadow:0 14px 42px #006cff24}
.eyebrow{color:#49baff}
.stats{background:#041127dd;border-block:1px solid #168dff30}
.foot{background:#020814;border-top:1px solid #168dff35}
.foot-links a:hover{color:#47c7ff}
.server-status-wrap{display:flex;justify-content:center;padding:12px 20px 4px;background:#020814}
.server-status{display:inline-flex;align-items:center;gap:10px;border:1px solid #ffffff26;border-radius:999px;padding:7px 18px;font-size:11px;font-weight:800;letter-spacing:.08em;color:#c7d5e9;background:#071326}
.status-dot{width:9px;height:9px;border-radius:50%;background:#93a4ba;box-shadow:0 0 10px currentColor}
.server-status[data-state="online"]{color:#23f0bd;border-color:#23f0bd66}
.server-status[data-state="online"] .status-dot{background:#23f0bd}
.server-status[data-state="offline"]{color:#ff6478;border-color:#ff647866}
.server-status[data-state="offline"] .status-dot{background:#ff6478}
.server-status[data-state="unknown"] .status-dot{background:#93a4ba}
@media(max-width:900px){.nav{padding:10px 18px}.brand img{height:55px}.menu{gap:2px}.menu a:not(.btn){padding:8px 9px;font-size:10px}}
@media(max-width:760px){.nav{padding:9px 16px}.brand img{height:52px}.hero{min-height:600px}.hero:before{opacity:.55;clip-path:polygon(0 48%,8% 48%,8% 36%,14% 36%,14% 50%,21% 50%,21% 27%,27% 27%,27% 50%,35% 50%,35% 36%,43% 36%,43% 50%,50% 50%,50% 22%,58% 22%,58% 50%,67% 50%,67% 32%,73% 32%,73% 50%,82% 50%,82% 28%,90% 28%,90% 50%,100% 50%,100% 100%,0 100%)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}