/* ============================================================
   BASE — reset, variables de marca y utilidades compartidas
   ============================================================ */

:root{
  /* colores */
  --color-bg:#0a0a0a;
  --color-panel:#0d0d0d;
  --color-panel-2:#111;
  --color-line:#1c1c1c;
  --color-line-2:#161616;
  --color-cyan:#33d6c4;
  --color-blue:#3a83f5;
  --color-coral:#fe6a5e;
  --color-text:#fff;
  --color-muted:#a6a6a6;
  --color-dim:#6e6e6e;

  /* tipografía */
  --font-heading:'Inter Tight',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'Space Mono',monospace;

  /* espaciado */
  --space-section:clamp(72px,9vw,120px);
  --space-gutter:6vw;

  /* radios */
  --radius-sm:8px;
  --radius-card:12px;
  --radius-panel:14px;
  --radius-box:18px;
  --radius-hero:20px;
  --radius-pill:99px;

  /* movimiento */
  --ease-out:cubic-bezier(.2,.7,.2,1);
}

/* ---- reset ---- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--color-cyan);color:var(--color-bg)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
img{max-width:100%}
section{position:relative}

/* ---- contenedores ---- */
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--space-gutter)}
.wrap--narrow{max-width:1000px}
.wrap--tight{max-width:900px}

/* ---- titulares y textos comunes ---- */
.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6}
.eyebrow--cyan{color:var(--color-cyan)}
.eyebrow--blue{color:var(--color-blue)}
.eyebrow--coral{color:var(--color-coral)}
.h2{font-family:var(--font-heading);font-weight:900;font-size:clamp(34px,5.4vw,64px);line-height:.98;letter-spacing:-.035em;margin-top:16px;text-wrap:balance}
.sub{font-size:clamp(16px,2vw,19px);line-height:1.55;color:var(--color-muted);max-width:620px;margin-top:18px}

/* ---- logo (nav + footer) ---- */
.logo{font-family:var(--font-heading);font-weight:900;font-size:19px;letter-spacing:-.04em;display:flex;align-items:center;gap:9px;white-space:nowrap}
.logo i{width:7px;height:7px;border-radius:var(--radius-pill);background:var(--color-cyan);margin-top:5px;animation:pulse 2.4s infinite}
.logo--sm{font-size:17px}

/* ---- botones CTA ---- */
.btn{font-family:var(--font-heading);font-weight:800;font-size:clamp(16px,1.9vw,19px);letter-spacing:-.015em;
  background:var(--color-cyan);color:var(--color-bg);padding:18px 30px;border-radius:10px;
  display:inline-flex;align-items:center;gap:12px;position:relative;overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease;isolation:isolate}
.btn .fl{display:inline-block;transition:transform .18s ease}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.5) 50%,transparent 58%);transform:translateX(-120%);z-index:-1}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(51,214,196,.35)}
.btn:hover::after{transform:translateX(120%);transition:transform .55s ease}
.btn:hover .fl{transform:translateX(5px)}
.btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.btn--ghost{background:transparent;color:var(--color-text);border:1px solid #2c2c2c}
.btn--ghost:hover{box-shadow:none;border-color:var(--color-cyan);color:var(--color-cyan)}
.btn--xl{font-size:clamp(18px,2.4vw,24px);padding:22px 38px}
.btn-note{font-family:var(--font-mono);font-size:12.5px;color:var(--color-dim)}

/* ---- barra de progreso de scroll ---- */
#progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--color-cyan);z-index:100;box-shadow:0 0 12px rgba(51,214,196,.8)}

/* ---- aparición al hacer scroll ---- */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s var(--ease-out)}
.js .rv.in{opacity:1;transform:none}

/* ---- animaciones compartidas ---- */
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(51,214,196,.5)}55%{box-shadow:0 0 0 7px rgba(51,214,196,0)}}
@keyframes pulse2{50%{opacity:.35}}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---- movimiento reducido ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
}