/* ==========================================================
   ACÁ — Variables de diseño
   Paleta, tipografía y medidas base. Cambiar acá impacta en todo.
   ========================================================== */
:root {
  /* Marca */
  --azul: #2857EC;
  --azul-oscuro: #1E44C2;
  --azul-suave: #E4EAFD;
  --naranja: #F06647;
  --naranja-oscuro: #D9532F;
  --naranja-suave: #FDE7E1;
  --negro: #1C1E25;
  --crema: #F3EFE6;
  --blanco: #FFFFFF;

  /* Grises derivados del negro de marca */
  --gris-700: #4A4D58;
  --gris-500: #7B7E8A;
  --gris-300: #C9CBD2;
  --gris-100: #ECEAE3;

  /* Tipografía */
  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-xs: 0.75rem;   /* 12 */
  --fs-sm: 0.875rem;  /* 14 */
  --fs-md: 1rem;      /* 16 */
  --fs-lg: 1.125rem;  /* 18 */
  --fs-xl: 1.375rem;  /* 22 */
  --fs-2xl: 1.75rem;  /* 28 */
  --fs-3xl: 2.25rem;  /* 36 */
  --fs-4xl: 3rem;     /* 48 */

  /* Radios */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-full: 999px;

  /* Sombras muy sutiles */
  --sombra-1: 0 1px 2px rgba(28, 30, 37, 0.04), 0 2px 8px rgba(28, 30, 37, 0.04);
  --sombra-2: 0 4px 16px rgba(28, 30, 37, 0.08);
  --sombra-azul: 0 8px 20px rgba(40, 87, 236, 0.22);

  /* Layout */
  --ancho-max: 1180px;
  --pad-x: 16px;
  --alto-header: 64px;
  --alto-bottomnav: 64px;
}

@media (min-width: 768px) {
  :root {
    --pad-x: 32px;
    --alto-header: 76px;
  }
}