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

:root {
    --fuente-principal: 'Poppins', sans-serif;
}

/* ==========================================
   
   ========================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--fuente-principal);
    background-color: #fcf8f5; /* Fondo suave para la web */
    color: #333333;
}

/* ==========================================
   3. NAVEGACIÓN SUPERIOR CON BARRA MARRÓN
   ========================================== */
header {
    width: 100%;
}

/* Barra marrón completa que ocupa todo el ancho */
nav.navegacion-superior {
    background-color: #6e3c15; /* Tono marrón oscuro de fondo */
    padding: 25px 20px;       /* Altura de la barra */
    width: 100%;
    text-align: center;
}

/* Lista horizontal centrada */
nav.navegacion-superior ul {
    list-style: none; /* Quita viñetas */
    padding: 0;
    margin: 0;
    display: flex;    /* Alineación horizontal */
    justify-content: center;
    gap: 15px;       /* Separación entre botones */
    flex-wrap: wrap;  /* Adaptabilidad */
}

/* Botones en forma de pastilla/píldora */
nav.navegacion-superior a {
    display: inline-block;
    color: #ffffff;             /* Texto blanco en negrita */
    text-decoration: none;      /* Sin subrayado */
    font-family: var(--fuente-principal);
    font-size: 0.95rem;
    font-weight: 700;
    padding: 10px 22px;         /* Tamaño de la pastilla */
    border-radius: 25px;        /* Bordes redondeados */
    background-color: #8c5222;  /* Tono marrón más claro para el botón */
    transition: background-color 0.3s ease;
}

/* Efecto al pasar el cursor sobre los botones */
nav.navegacion-superior a:hover {
    background-color: #a3612b;  /* Se aclara ligeramente */
    color: #ffffff;
}

/* Estado del botón activo o seleccionado */
nav.navegacion-superior a.activo {
    background-color: #a3612b;
}

/* Estilos de prueba para el contenido del main */
main {
    max-width: 800px;
    margin: 30px auto;
    padding: 0 20px;
    text-align: center;
}

article {
    margin-bottom: 20px;
}