/* ============================================================
   LyXel — base.css
   Reset, variables globales, tipografía base y animaciones (@keyframes)
   compartidas por todo el sitio.
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box}

:root{--red:#6d1a36;--red-light:#8b2244;--red-bright:#a02850;--black:#080808;--surface:#0f0f0f;--surface2:#141414;--border:#1a1a1a;--text:#f0f0f0;--muted:#999;--muted2:#444;--radius:8px;--font-head:'Archivo',system-ui,sans-serif;--font-body:'Inter',system-ui,sans-serif}

html{scroll-behavior:smooth}

body{background:var(--black);color:var(--text);font-family:var(--font-body);overflow-x:hidden}

/* --- Animaciones globales reutilizadas por varios componentes/secciones --- */

@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

@keyframes pulseGlow{0%,100%{transform:scale(1);opacity:0.85}50%{transform:scale(1.12);opacity:1}}

@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:0.35}}

@keyframes wpDrift{from{transform:translate(0,0) scale(1.04)}to{transform:translate(-14px,-10px) scale(1.1)}}

@keyframes twinkle{0%,100%{opacity:0.15;transform:scale(0.8)}50%{opacity:0.9;transform:scale(1.3)}}

/* --- Preferencia de movimiento reducido (accesibilidad) --- */

@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after {

    animation: none !important;

    transition: none !important;

  }

  .reveal {

    opacity: 1 !important;

    transform: none !important;

  }

  .hero-eyebrow, .hero-badge, .hero-title, .hero-sub, .hero-actions, .hero-note {

    opacity: 1 !important;

  }

}