:root {
    /* ========== COLORES PRINCIPALES ========== */
    --color-primario: #eaebf7; /* Color principal del fondo de cabecera, menús principales */
    --color-secundario: #444; /* Color secundario usado en fondos de submenús, áreas secundarias */
    --color-texto: #444; /* Color principal del texto en cabecera, menús */
    --color-fondo: white; /* Color de fondo general del sitio web */

    /* ========== COLORES DEL MENÚ ========== */
    --color-menu-fondo: #eaebf7; /* Fondo del menú principal y secundario */
    --color-menu-texto: #525269; /* Color del texto de los enlaces del menú principal y secundario */
    --color-submenu-fondo: #d6d6ea; /* Fondo de los submenús */
    --color-submenu-texto: #37374b; /* Color del texto dentro de los submenús */
    --color-borde: #eaebf7; /* Color de la línea debajo de los submenús */
	--color-hover-menu: #f0f1f9; /*Color de rollHover del boton */
	--color-hover-submenu: #dedef0;/*Color de rollHover del submenu*/

    /* ========== COLORES DEL BOTÓN ========== */
    --color-boton: #ff6600; /* Color de fondo de los botones principales */
    --color-boton-texto: white; /* Color del texto dentro de los botones */
    --color-hover-boton: #cc5200; /* Color de fondo de los botones al hacer hover */

    /* ========== COLORES DEL FOOTER ========== */
    --color-footer-fondo: #222; /* Color de fondo del footer */
    --color-footer-texto: #ccc; /* Color del texto en el footer */
    --color-footer-enlace: #ff6600; /* Color de los enlaces en el footer */
    --color-footer-enlace-hover: #cc5200; /* Color de los enlaces del footer al hacer hover */

    /* ========== COLORES PARA OTROS ELEMENTOS ========== */
    --color-borde: #dddddd; /* Color de los bordes generales */
    --color-link-hover: #ff6600; /* Color de los enlaces cuando se hace hover */
}