/*
 * variables.css — el archivo que cambias para personalizar cada cliente.
 * Aquí están los colores, tipografías, espaciados y radios.
 * Todo el tema usa estas variables.
 */

:root {
  /* Marca Ni Tan Cara (defaults — cámbialos por cliente). */
  --ntc-color-primario: #d63862;       /* rosa "CARA" */
  --ntc-color-primario-hover: #b82d51;
  --ntc-color-secundario: #3d3d3d;     /* gris "NI TAN" */
  --ntc-color-acento: #ffd166;

  /* Fondo y texto. */
  --ntc-color-fondo: #ffffff;
  --ntc-color-fondo-alt: #f7f7f5;
  --ntc-color-fondo-oscuro: #1a1a1a;
  --ntc-color-texto: #1f1f1f;
  --ntc-color-texto-suave: #555;
  --ntc-color-texto-claro: #ffffff;
  --ntc-color-borde: #e5e5e5;

  /* Tipografía. */
  --ntc-font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ntc-font-titulos: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Tamaños fluidos: escalan con el viewport. */
  --ntc-fs-xs: clamp(0.78rem, 0.76rem + 0.1vw, 0.82rem);
  --ntc-fs-sm: clamp(0.88rem, 0.85rem + 0.15vw, 0.95rem);
  --ntc-fs-base: clamp(1rem, 0.95rem + 0.2vw, 1.08rem);
  --ntc-fs-lg: clamp(1.15rem, 1.1rem + 0.3vw, 1.25rem);
  --ntc-fs-xl: clamp(1.4rem, 1.3rem + 0.6vw, 1.7rem);
  --ntc-fs-2xl: clamp(1.8rem, 1.6rem + 1vw, 2.4rem);
  --ntc-fs-3xl: clamp(2.4rem, 2rem + 2vw, 3.5rem);
  --ntc-fs-4xl: clamp(2.8rem, 2.4rem + 2.5vw, 4.5rem);

  /* Pesos. */
  --ntc-fw-regular: 400;
  --ntc-fw-medium: 500;
  --ntc-fw-bold: 700;
  --ntc-fw-black: 900;

  /* Espaciado. */
  --ntc-space-1: 0.25rem;
  --ntc-space-2: 0.5rem;
  --ntc-space-3: 0.75rem;
  --ntc-space-4: 1rem;
  --ntc-space-5: 1.5rem;
  --ntc-space-6: 2rem;
  --ntc-space-8: 3rem;
  --ntc-space-10: 4rem;
  --ntc-space-12: 5rem;
  --ntc-space-16: 7rem;

  --ntc-section-y: clamp(3rem, 2rem + 4vw, 6rem);

  /* Contenedor. */
  --ntc-container-width: 1200px;
  --ntc-container-narrow: 760px;
  --ntc-container-pad: clamp(1.25rem, 1rem + 1vw, 2rem);

  /* Bordes y radios. */
  --ntc-radius-sm: 6px;
  --ntc-radius-md: 12px;
  --ntc-radius-lg: 20px;
  --ntc-radius-pill: 999px;
  --ntc-border-w: 1px;

  /* Sombras. */
  --ntc-shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --ntc-shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --ntc-shadow-lg: 0 12px 32px rgba(0,0,0,0.12);

  /* Transiciones. */
  --ntc-transition: 200ms ease;
  --ntc-transition-slow: 350ms ease;
}