/*
  CONSGRAL — Design tokens
  Fuente: Documento Técnico_.pdf (Brandboard) — sección 1.6 y 14.5.
  No modificar valores de marca sin autorización.
*/

:root {
  /* Color — paleta corporativa */
  --color-guindo: #701d1c;
  --color-guindo-dark: #501412;
  --color-guindo-rgb: 112, 29, 28;
  --color-dorado: #ffc872;
  --color-dorado-dark: #e6a94f;
  --color-azul: #5d83a6;
  --color-blanco: #fdfafa;

  /* Color — neutros de apoyo (no definidos en brandboard, derivados para fondos/texto) */
  --color-gris-100: #f5f4f2;
  --color-gris-200: #e8e6e3;
  --color-gris-400: #b9b3ad;
  --color-gris-600: #6d6863;
  --color-gris-900: #221f1d;

  /* Color — roles semánticos */
  --color-bg: var(--color-blanco);
  --color-bg-secundario: var(--color-gris-100);
  --color-texto: var(--color-gris-900);
  --color-texto-suave: var(--color-gris-600);
  --color-borde: var(--color-gris-200);
  --color-exito: #2e7d4f;
  --color-error: #b3261e;

  /* Tipografía
     FB Metropolis es una fuente comercial de Fontbureau: aún no se cuenta con los
     archivos con licencia web (ver observaciones del Bloque 1). Se usa una pila de
     respaldo del sistema hasta recibir los archivos oficiales. */
  --font-titulos: "Montserrat", "Segoe UI", Roboto, sans-serif;
  --font-texto: "FB Metropolis", "Metropolis", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;

  --fs-100: 0.8125rem;
  --fs-200: 0.9375rem;
  --fs-300: 1rem;
  --fs-400: 1.125rem;
  --fs-500: 1.375rem;
  --fs-600: 1.75rem;
  --fs-700: 2.25rem;
  --fs-800: 2.75rem;
  --fs-900: 3.5rem;

  /* Escala fluida para titulares: crecen de forma continua con el ancho de la
     pantalla en vez de saltar en los breakpoints. Los límites coinciden con la
     escala fija de arriba, así que el tamaño mínimo y máximo no cambian. */
  --fs-display: clamp(2.25rem, 1.5rem + 3.75vw, 3.5rem);
  --fs-titulo: clamp(1.75rem, 1.25rem + 2.5vw, 2.75rem);
  --fs-subtitulo: clamp(1.375rem, 1.15rem + 1.1vw, 1.75rem);

  /* Tracking: los cuerpos grandes de texto ganan definición con un ligero
     apretado óptico; el texto pequeño necesita lo contrario. */
  --tracking-display: -0.022em;
  --tracking-titulo: -0.015em;
  --tracking-etiqueta: 0.08em;

  --lh-ajustado: 1.15;
  --lh-normal: 1.5;
  --lh-relajado: 1.7;

  /* Espaciado (escala de 4px) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Layout */
  --container-max: 1280px;
  --container-padding: var(--space-5);
  --header-height: 84px;
  --header-height-mobile: 68px;

  /* Bordes y sombras */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;

  /* Sombras en varias capas: una corta y marcada que ancla el objeto a la
     superficie, y otras difusas y tintadas de guindo. La luz real cae así, y
     de ahí viene la sensación de profundidad frente a una sombra plana. */
  --shadow-sm: 0 1px 2px rgba(34, 31, 29, 0.06),
    0 2px 8px rgba(var(--color-guindo-rgb), 0.06);
  --shadow-md: 0 2px 4px rgba(34, 31, 29, 0.05),
    0 8px 20px rgba(var(--color-guindo-rgb), 0.1),
    0 16px 32px rgba(34, 31, 29, 0.04);
  --shadow-lg: 0 4px 8px rgba(34, 31, 29, 0.05),
    0 16px 32px rgba(var(--color-guindo-rgb), 0.12),
    0 32px 56px rgba(34, 31, 29, 0.08);

  --overlay-guindo-fuerte: linear-gradient(
    90deg,
    rgba(var(--color-guindo-rgb), 0.94) 0%,
    rgba(var(--color-guindo-rgb), 0.78) 35%,
    rgba(var(--color-guindo-rgb), 0.25) 70%,
    rgba(var(--color-guindo-rgb), 0.05) 100%
  );
  --overlay-guindo-movil: linear-gradient(
    180deg,
    rgba(var(--color-guindo-rgb), 0.55) 0%,
    rgba(var(--color-guindo-rgb), 0.88) 60%,
    rgba(var(--color-guindo-rgb), 0.95) 100%
  );

  /* Transiciones */
  --ease-suave: cubic-bezier(0.22, 1, 0.36, 1);
  --duracion-rapida: 0.2s;
  --duracion-normal: 0.35s;
  --duracion-lenta: 0.6s;

  /* Índices de apilamiento */
  --z-header: 100;
  --z-whatsapp: 90;
  --z-modal: 200;
}