/* ==========================================================================
   RUWAY — DESIGN TOKENS
   Fuente: Figma (hdaPgVQHXifnlyd4r2Xapr) — nodo "home" 1281:56
   ========================================================================== */

:root {
  /* --- Color --- */
  --color-dark: #283227;        /* fondo oscuro (hero, banners, footer) */
  --color-dark-2: #1f2820;      /* variante más oscura para profundidad/hover */
  --color-light: #ecf3eb;       /* fondo crema (secciones claras, texto sobre oscuro) */
  --color-accent: #ff8c69;      /* coral — CTAs, énfasis, precios */
  --color-accent-dark: #e97650; /* hover del coral */
  --color-secondary: #312732;   /* morado oscuro — banner de Retablo */
  --color-ink: #283227;         /* texto sobre fondo claro (= dark) */
  --color-paper: #ecf3eb;       /* texto sobre fondo oscuro (= light) */
  --color-line: rgba(40, 50, 39, 0.15);       /* líneas divisorias sobre claro */
  --color-line-onDark: rgba(236, 243, 235, 0.25); /* líneas divisorias sobre oscuro */
  --color-star: #ff8c69;

  /* --- Paleta Retablo (solo retablo.html y piezas de la app) ---
     Ruway usa su paleta en todo el sitio; la página de Retablo usa la de la app.
     Header, menú, modal de contacto y footer siguen siendo Ruway. */
  --rt-blue: #3d3cb3;   /* fondo principal de la app */
  --rt-yellow: #f0c448;
  --rt-red: #b84137;    /* énfasis y CTA dentro de la app */
  --rt-white: #ffffff;
  --rt-paper: #f2f1ef;  /* fondo claro de pantallas */
  --rt-dark: #2d2d2d;
  --rt-ink: #28261c;    /* texto */

  /* --- Tipografía --- */
  --font-display: "Literata", Georgia, serif;      /* titulares — weight 900 (Black) */
  --font-body: "Inter", -apple-system, sans-serif;  /* cuerpo, UI, botones */

  --fs-h1: clamp(2.25rem, 4vw + 1rem, 4rem);   /* 64px desktop */
  --fs-h2: clamp(1.75rem, 2.6vw + 1rem, 2.75rem);
  --fs-h3: clamp(1.35rem, 1.4vw + 1rem, 1.75rem);
  --fs-lead: clamp(1.05rem, 0.6vw + 0.9rem, 1.5rem); /* 24px */
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  --lh-tight: 1.05;
  --lh-body: 1.5;

  /* --- Espaciado (escala 8pt) --- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 6rem;
  --sp-8: 8rem;

  /* --- Radios / bordes --- */
  --radius-pill: 32px;
  --radius-card: 20px;
  --radius-image: 16px;

  /* --- Layout --- */
  --container-max: 1456px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* --- Motion --- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 200ms;
  --dur-medium: 420ms;
  --dur-panel: 520ms;
}

/* Móvil: margen lateral fijo de 12px en todo el sitio */
@media (max-width: 640px) {
  :root { --container-pad: 12px; }
}