:root {
    --blanco: #ffffff;
    --negro: #000000;
    --gris-050: #f6f8f8;
    --gris-100: #f0f2f5;
    --gris-200: #e5e7eb;
    --gris-500: #6b7280;
    --gris-700: #374151;
    --gris-900: #111827;

    --primary-color: #f35c2d;
    --primary-light: #ff7a4f;
    --primary-dark: #b33b14;
    --secondary-color: #d68c68;
    --tertiary-color: #0e9a8c;
    --naranja-cta: #ff7a00;

    --teal-500: #009688;
    --teal-600: #0c9a7e;
    --teal-700: #0a9b73;
    --teal-800: #0a8f5b;

    --text: var(--gris-900);
    --text-muted: var(--gris-500);
    --background: #f3f0ee;
    --primary: var(--teal-500);
    --secondary: var(--naranja-cta);
    --border: #d1d5db;

    --btn-color: #5fa58e;
    --btn-hover-color: #3e6e56;
    --azul-link: #0095ff;

    --font-main: "Roboto", sans-serif;
    --fuentePrincipal: "Roboto", sans-serif;

    --shadow-1: 0 6px 14px rgba(0, 0, 0, .14);
    --shadow-2: 0 20px 40px rgba(0, 0, 0, .2);
    --ring: 0 0 0 3px rgba(12, 154, 126, 0.18);
}