@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

*{ /* Creo las variables de los colores que voy a usar */
	scroll-behavior: smooth;
	--main_color: #C6C3BC;
	--smoky_black: #0D0A0B;
	--charcoal: #454955;
	--green_ryb: #72B01D;
	--sap_green: #3F7D20;
    --espaxia_blue: #3366ff;
}

.padre {
    /* Mantén el fondo principal pero cambia el color de texto para un mayor contraste */
    color: var(--smoky_black);
}

.header {
    background-color: var(--espaxia_blue);
    padding: 20px 0; /* Agrega un espacio interno al encabezado */
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px; /* Limita el ancho del encabezado para que no se expanda demasiado */
    margin: 0 auto; /* Centra el encabezado en la página */
}

.titulo-header {
    font-size: 40px; /* Reduce el tamaño de fuente para mayor legibilidad */
    margin: 0; /* Elimina el margen para un aspecto más compacto */
    color: var(--main_color);
}

.salir {
    font-family: 'Roboto', sans-serif; /* Utiliza la misma fuente para el enlace */
    font-size: 18px; /* Tamaño de fuente más pequeño para el enlace */
    color: var(--smoky_black); /* Cambia el color del enlace para mayor contraste */
    text-decoration: none; /* Elimina el subrayado predeterminado */
    transition: color 0.3s; /* Agrega una transición suave al cambio de color */
}

.salir:hover {
    color: var(--espaxia_blue); /* Cambia el color al pasar el ratón sobre el enlace */
}