/* ============================================
   VITTORIA LANDER — DESIGN TOKENS
   ============================================ */

:root {

  /* === COLORES === */

  /* Fondos */
  --bg-base:        #0f0c0e;   /* negro profundo del logo */
  --bg-surface:     #1a1714;   /* negro cálido para sections alternas */
  --bg-surface-2:   #211d1a;   /* nivel más claro para cards */

  /* Oro (paleta principal de marca) */
  --gold-primary:   #af7912;   /* dorado base — bordes, íconos */
  --gold-light:     #f1db6d;   /* dorado luminoso — hover, énfasis */
  --gold-dark:      #926014;   /* dorado oscuro — texto secundario dorado */
  --gold-gradient:  linear-gradient(135deg, #926014 0%, #f1db6d 50%, #af7912 100%);

  /* Neutros */
  --white:          #ffffff;
  --gray-light:     #d4d4d4;
  --gray-mid:       #939292;
  --gray-dark:      #5a5959;

  /* Marca secundaria */
  --charcoal:       #2d2d2e;
  --near-black:     #0f0c0e;

  /* === TIPOGRAFÍA === */
  --font-display:   'Cormorant Garamond', Georgia, serif;
  --font-body:      'Montserrat', system-ui, sans-serif;

  /* Escala tipográfica */
  --text-xs:     0.75rem;    /* 12px */
  --text-sm:     0.875rem;   /* 14px */
  --text-base:   1rem;       /* 16px */
  --text-md:     1.125rem;   /* 18px */
  --text-lg:     1.375rem;   /* 22px */
  --text-xl:     1.75rem;    /* 28px */
  --text-2xl:    2.25rem;    /* 36px */
  --text-3xl:    3rem;       /* 48px */
  --text-4xl:    4rem;       /* 64px */
  --text-hero:   5.5rem;     /* 88px */

  /* === ESPACIADO === */
  --space-xs:    0.5rem;
  --space-sm:    1rem;
  --space-md:    1.5rem;
  --space-lg:    2.5rem;
  --space-xl:    4rem;
  --space-2xl:   6rem;
  --space-3xl:   9rem;

  /* === LAYOUT === */
  --container-max:  1200px;
  --container-wide: 1440px;
  --container-pad:  clamp(1.25rem, 5vw, 4rem);

  /* === BORDES === */
  --border-gold:      1px solid var(--gold-primary);
  --border-gold-subtle: 1px solid rgba(175, 121, 18, 0.3);
  --border-white-subtle: 1px solid rgba(255, 255, 255, 0.08);

  /* === RADIOS === */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-pill: 999px;

  /* === TRANSICIONES === */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-xslow:  600ms cubic-bezier(0.22, 1, 0.36, 1);

  /* === SOMBRAS === */
  --shadow-gold:   0 0 40px rgba(175, 121, 18, 0.15);
  --shadow-card:   0 4px 32px rgba(0, 0, 0, 0.4);

  /* === Z-INDEX === */
  --z-base:    1;
  --z-nav:     100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-modal:   400;
}

/* === UTILIDADES GLOBALES === */

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

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

/* Texto dorado sólido */
.text-gold-flat {
  color: var(--gold-light);
}

/* Eyebrow — etiqueta sobre títulos */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold-primary);
}

/* Separador decorativo dorado */
.divider-gold {
  width: 48px;
  height: 1px;
  background: var(--gold-gradient);
  margin-block: var(--space-md);
}

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}