/* Rokan · base compartida por todo el sitio (colores, botones, header, footer, tarjetas, fondo, apariciones) */
:root{
  --indigo:#16123A;--violet:#7B61FF;--violetL:#9C8BFF;--lav:#ECEAFF;--smoke:#F7F7FA;--gray:#5B5B68;
  --line:#E6E5EE;--card:#fff;--wrap:1160px;--r:14px;
  --sh:0 1px 2px rgba(22,18,58,.04),0 10px 30px -12px rgba(22,18,58,.12);
  --sh-l:0 2px 6px rgba(22,18,58,.05),0 40px 80px -30px rgba(22,18,58,.30);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;background:var(--smoke);color:var(--indigo);font:400 16px/1.6 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
svg,img{display:block;max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
@media (min-width:760px){.wrap{padding:0 40px}}
.mi{font-family:Michroma,sans-serif;font-weight:400;text-transform:uppercase}
.eyebrow{display:flex;align-items:center;gap:8px;margin:0 0 18px;font:600 13px/1 Inter,sans-serif;color:var(--violet)}
.eyebrow::before{content:"";flex:none;width:6px;height:6px;background:currentColor}
.h2{font-family:Michroma,sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(17px,2.5vw,28px);letter-spacing:.08em;line-height:1.35;margin:0}
.sub{color:var(--gray);font-size:17px;line-height:1.6;max-width:540px;margin:14px 0 0}
.sec{padding:clamp(72px,9vw,120px) 0}
.sec-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;margin-bottom:40px}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:10px;font:600 15px/1.2 Inter,sans-serif;text-align:center;border:1px solid transparent;cursor:pointer;transition:transform .2s var(--ease),background .2s,box-shadow .2s,border-color .2s}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
.btn-p{background:var(--indigo);color:#fff;box-shadow:0 6px 16px -6px rgba(22,18,58,.45)}
.btn-p:hover{background:#231d57}
.btn-v{background:var(--violet);color:#fff;box-shadow:0 6px 16px -6px rgba(123,97,255,.6)}
.btn-v:hover{background:#6c50fa}
.btn-s{background:#fff;color:var(--indigo);border-color:var(--line)}
.btn-s:hover{border-color:#cfcde0}
.arrow::after{content:"→";transition:transform .2s var(--ease)}
a:hover .arrow::after,.arrow:hover::after{transform:translateX(3px)}

/* header */
.site-h{position:sticky;top:0;z-index:50;background:rgba(247,247,250,.82);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.site-h.scrolled{border-bottom-color:var(--line)}
.site-h .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px}
.site-h .logo img{height:24px;width:auto}
.site-h nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.site-h nav a{display:block;padding:8px 12px;border-radius:8px;font-size:14px;font-weight:500;color:var(--gray);white-space:nowrap;transition:color .15s,background .15s}
.site-h nav a:hover{color:var(--indigo);background:rgba(22,18,58,.04)}
.site-h nav a[aria-current=page]{color:var(--indigo);font-weight:600}
.site-h .bar>.btn{min-height:40px;padding:0 16px;font-size:14px;white-space:nowrap}
.menu-btn{display:none;width:44px;height:40px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--indigo);cursor:pointer;align-items:center;justify-content:center}
@media (max-width:1120px){
  .site-h nav{position:absolute;left:0;right:0;top:72px;background:var(--smoke);border-bottom:1px solid var(--line);display:none;box-shadow:0 20px 30px -20px rgba(22,18,58,.2)}
  .site-h nav.open{display:block}
  .site-h nav ul{flex-direction:column;padding:8px 12px 16px}
  .site-h nav a{font-size:16px;padding:12px}
  .menu-btn{display:inline-flex}
  .site-h .bar>.btn{display:none}
}

/* tarjetas */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font:600 12px/1 Inter,sans-serif;background:var(--violet);color:#fff;white-space:nowrap}
.seal{display:inline-flex;align-items:center;gap:10px;height:36px;padding:0 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font:600 13px/1 Inter,sans-serif;white-space:nowrap}
.seal::before{content:"";width:8px;height:8px;background:var(--violet);box-shadow:0 0 0 3px var(--lav)}

/* footer */
.site-f{background:#fff;border-top:1px solid var(--line);padding:56px 0 40px;font-size:14px;color:var(--gray)}
.site-f .cols{display:grid;gap:32px;grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.site-f .cols{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr)}}
.site-f img{height:22px;width:auto;margin-bottom:14px}
.site-f h4{margin:0 0 12px;font-size:13px;color:var(--indigo)}
.site-f ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.site-f a:hover{color:var(--indigo)}
.site-f .legal{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:13px}

/* efecto de píxeles */
.fx-canvas{position:absolute;inset:0;pointer-events:none;z-index:0}
/* grilla de puntos fija detrás de toda la página; el contenido pasa por encima */
.bg-fx{position:fixed;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(#D6D2F4 1.3px,transparent 1.6px);background-size:28px 28px;background-position:-14px -14px}
main,.site-f{position:relative;z-index:1}

/* aparición al hacer scroll */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}