/* ==========================================================================
   Design Tokens — tu 2º deseo
   Manual de Identidad Visual v1.0
   ========================================================================== */

:root {
  /* ── Color (marca — usado en páginas transaccionales) ── */
  --color-rojo:        #CC063B;
  --color-rojo-oscuro: #BC003D;
  --color-rosa:        #F52570;
  --color-rosa-suave:  #FEF3F7;
  --color-negro:       #0E0E0E;
  --color-negro-2:     #1a1416;
  --color-blanco:      #FFFFFF;
  --color-gris-texto:  #726A6E;
  --color-gris-fondo:  #F7F2F4;

  /* ── Dark mode (home & editorial) ── */
  --dark-rosa-vivo:    #ff3d7f;
  --dark-rojo-oscuro:  #8c0030;
  --dark-negro:        #0B0708;
  --dark-negro-2:      #150F11;
  --dark-negro-3:      #1F1417;
  --dark-crema:        #F4E9EC;
  --dark-gris-texto:   #8a8085;

  /* ── Radius ── */
  --radius:      18px;
  --radius-pill:  100px;
  --radius-sm:    8px;

  /* ── Shadows ── */
  --shadow-card-hover:   0 18px 34px -16px rgba(14, 14, 14, .18);
  --shadow-btn-primary:  0 8px 20px rgba(245, 37, 112, .3);
  --shadow-btn-hover:    0 12px 26px rgba(245, 37, 112, .4);
  --shadow-tile-hover:   0 20px 34px -16px rgba(14, 14, 14, .28);
  --shadow-dropdown:     0 12px 32px -8px rgba(14, 14, 14, .15);

  /* ── Typography ── */
  /* System stack first — avoids render-blocking Google Fonts on LCP. */
  --font-heading: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-body:    'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;

  --fs-hero:      clamp(36px, 5vw, 58px);
  --fs-h2:        clamp(26px, 3.2vw, 36px);
  --fs-h3:        20px;
  --fs-body-lg:   17px;
  --fs-body:      14.5px;
  --fs-body-sm:   13px;
  --fs-eyebrow:   11.5px;
  --fs-badge:     10px;

  --lh-tight:   1.08;
  --lh-snug:    1.35;
  --lh-normal:  1.6;
  --lh-relaxed: 1.65;

  --ls-eyebrow: .18em;
  --ls-tight:   -.01em;

  /* ── Layout ── */
  --container:     1200px;
  --gutter:        28px;
  --gap-grid:      18px;
  --gap-grid-lg:   20px;

  /* ── Transitions ── */
  --ease-out:    cubic-bezier(.25, .46, .45, .94);
  --duration-sm: .18s;
  --duration-md: .25s;
  --duration-lg: .4s;

  /* ── Gradients (category tiles — v3 dark) ── */
  --grad-1: linear-gradient(150deg, var(--dark-rosa-vivo) 0%, var(--dark-rojo-oscuro) 100%);
  --grad-2: linear-gradient(150deg, #2b1b1e 0%, var(--dark-negro) 100%);
  --grad-3: linear-gradient(150deg, var(--color-rojo) 0%, #4a0016 100%);
  --grad-4: linear-gradient(150deg, #3d1420 0%, var(--color-rosa) 130%);
  --grad-5: linear-gradient(150deg, #35292c 0%, #171012 100%);
  --grad-6: linear-gradient(150deg, var(--dark-negro-3) 0%, #6e021f 130%);
}

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