/* ============================================================
   PROSEYCO — main.css
   Design tokens + reset + base (extraídos del splash "Muy pronto")
   Capa 1 de @layer
   ============================================================ */

@layer tokens, base, components, pages;

/* ---------- TOKENS ---------- */
@layer tokens {
  :root {
    --white:      #ffffff;
    --ink:        #101722;
    --ink-soft:   #4b5565;
    --blue-950:   #101c31;
    --blue-900:   #172943;
    --blue-800:   #213a5d;
    --blue-700:   #31547c;
    --blue-500:   #607da0;
    --blue-200:   #c9d5e3;
    --blue-100:   #e9eff5;
    --coral:      #ee7465;
    --coral-dark: #c95549;
    --offwhite:   #f5f6f4;
    --line:       rgba(16, 23, 34, 0.12);

    --font-display: 'Outfit', sans-serif;
    --font-body:    'Inter', sans-serif;
    --font-kicker:  'DM Serif Display', serif;

    --content-max: 1280px;
    --safe-x: clamp(20px, 4vw, 72px);

    --radius-lg: 34px;
    --radius-md: 24px;
    --radius-sm: 16px;

    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --shadow-card: 0 25px 55px rgba(5, 14, 29, 0.22);
    --shadow-card-lg: 0 35px 90px rgba(3, 10, 23, 0.38);
  }
}

/* ---------- RESET ---------- */
@layer base {
  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

  html {
    scroll-behavior: smooth;
    overflow-x: clip;
    width: 100%;
  }

  body {
    font-family: var(--font-body);
    background: var(--offwhite);
    color: var(--ink);
    overflow-x: clip;
    width: 100%;
    max-width: 100vw;
    min-height: 100vh;
    position: relative;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
  }

  a, button { -webkit-tap-highlight-color: transparent; }

  :focus-visible {
    outline: 3px solid var(--coral);
    outline-offset: 4px;
    border-radius: 6px;
  }

  img { max-width: 100%; display: block; }

  h1, h2, h3, h4 { font-family: var(--font-display); }

  @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;
    }
  }
}

/* ---------- UTILIDADES (contenedor etc.) ---------- */
@layer base {
  .wrap {
    position: relative;
    z-index: 2;
    overflow: hidden;
    width: 100%;
  }

  .container {
    width: min(100% - 2 * var(--safe-x), var(--content-max));
    margin-inline: auto;
  }

  .container--wide {
    width: min(100% - 2 * var(--safe-x), 1440px);
    margin-inline: auto;
  }
}