/* =====================================================
   BASE — variables, reset, tipografía, utilidades
   ===================================================== */
:root{
  --font-display:'Chakra Petch',sans-serif;
  --font-body:'DM Sans',sans-serif;
  --font-mono:'DM Mono',monospace;
  --font-ui:'Manrope',sans-serif;
  --tr:.5s cubic-bezier(.4,0,.2,1);
  --tf:.2s ease;
  --ts:.4s cubic-bezier(.4,0,.2,1);
  --r-sm:6px;--r-md:12px;--r-lg:20px;--r-xl:32px
}
[data-theme="dark"]{--bg:#050810;--bg2:#0b0f1a;--bgc:rgba(255,255,255,.04);--bgch:rgba(255,255,255,.07);--glass:rgba(10,14,28,.78);--ctrl:rgba(15,20,35,.92);--t1:#f0f2f8;--t2:#c4c4c4;--tm:#4a5568;--ap:#00e5a0;--as:#5b6ef5;--at:#b06ef5;--ag:rgba(0,229,160,.12);--agb:rgba(91,110,245,.12);--b:rgba(255,255,255,.07);--ba:rgba(0,229,160,.28);--sc:0 4px 24px rgba(0,0,0,.4);--sg:0 0 40px rgba(0,229,160,.12)}
[data-theme="light"]{--bg:#f2f5fc;--bg2:#e8ebf5;--bgc:rgba(255,255,255,.75);--bgch:rgba(255,255,255,.98);--glass:rgba(238,242,255,.85);--ctrl:rgba(244,247,255,.96);--t1:#0d1117;--t2:#4a5568;--tm:#9aa5b4;--ap:#00b37a;--as:#3a4fd9;--at:#8b44d9;--ag:rgba(0,179,122,.1);--agb:rgba(58,79,217,.1);--b:rgba(0,0,0,.07);--ba:rgba(0,179,122,.35);--sc:0 4px 24px rgba(0,0,0,.07);--sg:0 0 40px rgba(0,179,122,.1)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--bg);color:var(--t1);transition:background var(--tr),color var(--tr);overflow-x:hidden}
h1,h2,h3{font-family:var(--font-display);line-height:1.1;letter-spacing:-.02em}
h4{font-family:var(--font-ui);line-height:1.2;letter-spacing:-.01em}
.gt{background:linear-gradient(135deg,var(--ap) 0%,var(--as) 55%,var(--at) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
strong{color:var(--t1)}

/* BG layer */
#bgl{position:fixed;inset:0;z-index:0;pointer-events:none}
#cp{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#app{position:relative;z-index:10}

/* Container */
section{position:relative;z-index:10}
.cnt{max-width:1200px;margin:0 auto;padding:0 48px}

/* Etiqueta de sección */
.stag{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--ap);padding:6px 14px;border:1px solid var(--ba);border-radius:100px;background:var(--ag);margin-bottom:22px}
.stag::before{content:'';width:6px;height:6px;background:var(--ap);border-radius:50%;animation:pd 2s ease infinite}
@keyframes pd{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}

/* Encabezado de sección genérico */
.sh{max-width:680px;margin-bottom:60px}
.sh h2{font-size:clamp(30px,3.8vw,50px);font-weight:700;margin-bottom:16px;color:var(--t1)}
.sh p{font-size:16px;color:var(--t2);line-height:1.75}

/* Botones */
.btnp{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;background:var(--ap);color:#050810;font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.02em;border-radius:var(--r-md);text-decoration:none;cursor:pointer;border:none;transition:all var(--ts);box-shadow:0 0 28px rgba(0,229,160,.2)}
.btnp:hover{transform:translateY(-2px);box-shadow:0 8px 38px rgba(0,229,160,.3)}
.btns{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;background:transparent;color:var(--t1);font-family:var(--font-display);font-weight:600;font-size:14px;letter-spacing:.02em;border:1px solid var(--b);border-radius:var(--r-md);text-decoration:none;cursor:pointer;transition:all var(--ts)}
.btns:hover{border-color:var(--t2);background:var(--bgc)}
.pill{padding:6px 14px;border:1px solid var(--b);border-radius:100px;font-family:var(--font-mono);font-size:11px;color:var(--t2);background:var(--bgc);transition:all var(--tf);cursor:default}
.pill:hover{border-color:var(--ap);color:var(--ap);background:var(--ag)}

/* Reveal scroll animation */
.rev{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1)}
.rev.vis{opacity:1;transform:translateY(0)}
.rd1{transition-delay:.1s}.rd2{transition-delay:.2s}.rd3{transition-delay:.3s}