/* ═══════════════════════════════════════════════════════════
   FOUNDATION.CSS — Reset + Design Tokens
   Generado por IR Compiler v6. No editar manualmente.
   ═══════════════════════════════════════════════════════════ */

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* scroll-behavior:smooth pelea con Lenis (doble smoothing → scroll trabado);
   el suavizado lo hace Lenis, el navegador debe scrollear instantáneo. */
html { scroll-behavior: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video, canvas, svg { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font: inherit; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
input, textarea, select { font: inherit; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); line-height: 1.05; letter-spacing: -0.03em; }
p { max-width: var(--text-max); line-height: 1.7; color: var(--color-text-secondary); }

/* Design Tokens */
:root {
  /* Colors */
  --color-bg:             hsl(220, 14%, 7%);
  --color-bg-alt:         hsl(348, 45%, 10%);
  --color-text:           hsl(46, 18%, 93%);
  --color-text-secondary: hsl(220, 8%, 60%);
  --color-text-tertiary:  hsl(220, 8%, 35%);
  --color-accent:         hsl(45, 54%, 66%);
  --color-accent-hover:   hsl(45, 60%, 75%);
  --color-cta:            hsl(45, 54%, 66%);
  --color-cta-text:       hsl(220, 14%, 7%);
  --color-surface:        hsl(220, 14%, 11%);
  --color-border:         hsl(220, 10%, 16%);

  /* Typography */
  --font-display: Syne, sans-serif;
  --font-body:    DM Sans, sans-serif;
  --text-hero:    clamp(3.5rem, 10vw, 9rem);
  --text-section: clamp(1.75rem, 3.6vw, 3rem);
  --text-body:    clamp(0.9375rem, 1.1vw, 1.0625rem);
  --text-max:     65ch;

  /* Spacing */
  --section-padding: clamp(80px, 12vw, 180px);
  --container-max:   1320px;
  --container-pad:   clamp(1.25rem, 5vw, 5rem);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;

  /* Radius */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-full: 9999px;

  /* Easing */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:     cubic-bezier(0.84, 0, 0.16, 1);
  --ease-inout:  cubic-bezier(0.83, 0, 0.17, 1);
  --t-fast:  150ms var(--ease-out);
  --t-base:  300ms var(--ease-out);
  --t-slow:  600ms var(--ease-out);
  --t-xslow: 900ms var(--ease-out);

  /* Shadows (2-layer — Refactoring UI) */
  --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.04), 0 2px 4px hsl(0 0% 0% / 0.06);
  --shadow-md: 0 4px 8px hsl(0 0% 0% / 0.06), 0 8px 16px hsl(0 0% 0% / 0.08);
  --shadow-lg: 0 8px 24px hsl(0 0% 0% / 0.08), 0 24px 48px hsl(0 0% 0% / 0.10);
}

/* Base */
body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  background-color: var(--color-bg);
  color: var(--color-text);
  overflow-x: hidden;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}