/* ============================================================================
   TOKENS.CSS — Sistema de diseño de marca (Talita Cumi Levántate)
   Derivado del análisis del logotipo oficial. No redefinir en otros archivos.
   ============================================================================ */

:root {
  /* ---- Color: extraído directamente del logotipo ---- */
  --purple-deep:   #1E0F3B; /* fondo celestial nocturno, más oscuro para UI */
  --purple:        #2A1250; /* panel / superficie primaria oscura */
  --purple-light:  #3B1E6D; /* superficie secundaria / hover oscuro */
  --gold:          #D4AF37; /* acento primario — anillo, tipografía */
  --gold-light:    #F2D374; /* acento claro — hover, brillo */
  --sunset-orange: #F4A24C; /* degradado atardecer */
  --sunset-peach:  #F2C1A0; /* degradado atardecer claro */
  --white:         #FFFAF2; /* blanco cálido, no puro, para texto sobre púrpura */
  --ink:           #1A1024; /* texto principal sobre fondos claros */
  --ink-soft:      #4A3F5C; /* texto secundario sobre fondos claros */
  --cream:         #FBF6EC; /* fondo claro cálido (secciones sobre blanco) */
  --line:          rgba(212, 175, 55, 0.25); /* divisores dorados sutiles */

  /* ---- Tipografía ---- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-script:  "Playfair Display", Georgia, serif;
  --font-body:    "Inter", -apple-system, "Segoe UI", sans-serif;

  /* ---- Escala tipográfica ---- */
  --step-1: clamp(2.4rem, 1.7rem + 3vw, 4.6rem);
  --step-2: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem);
  --step-3: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  --step-0: 1.05rem;
  --step-cap: 0.78rem;

  /* ---- Espaciado / layout ---- */
  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 26px;
  --max-w: 1180px;
  --shadow-soft: 0 18px 40px -20px rgba(20, 8, 40, 0.45);
  --shadow-gold: 0 0 0 1px rgba(212,175,55,0.35), 0 12px 30px -14px rgba(212,175,55,0.35);
}

/* ---- Reset base ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0 0 0.5em 0;
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.01em;
}

p { line-height: 1.65; margin: 0 0 1em 0; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--step-cap);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.script {
  font-family: var(--font-script);
  font-style: italic;
  font-weight: 500;
}

/* ---- Focus visibility (accesibilidad) ---- */
:focus-visible {
  outline: 3px solid var(--gold-light);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Contenedor ---- */
.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.5rem;
}

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