/* Importación de fuentes */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

/* Definición de variables CSS */
:root {
    --primary: #005f99; /* Color principal más parecido al azul de Cisco */
    --secondary: #6c757d; /* Color secundario */
    --info: #17a2b8; /* Color informativo */
    --background: #f8f9fa; /* Color de fondo */
    --footer-background: #f1f1f1; /* Color de fondo del pie de página */
}

/* Estilos globales */
body {
    background-color: var(--background);
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 20px; /* Espaciado adicional */
}

/* Estilo del encabezado */
header {
    margin-bottom: 20px;
    padding: 10px;
    background-color: var(--primary);
    color: white; /* Texto blanco en el encabezado */
    border-radius: 5px; /* Bordes redondeados */
}

/* Estilo del pie de página */
footer {
    margin-top: 20px;
    padding: 10px 0;
    background-color: var(--footer-background);
    text-align: center; /* Centrar el texto */
}

/* Estilo de encabezados (h1, h2, h3, etc.) */
h1, h2, h3 {
    color: var(--primary);
    margin: 10px 0; /* Espaciado vertical */
}

/* Estilo para enlaces */
a {
    color: var(--info); /* Color de enlaces informativos */
    text-decoration: none; /* Quitar subrayado */
}

a:hover {
    text-decoration: underline; /* Subrayar al pasar el ratón */
}