/* ========== Estilos base para el encabezado (Enfoque Mobile First) ========== */
.pie {
    inline-size: 100%;
    padding: 1rem;
    display: flex;
    flex-direction: column; /* Apila los elementos verticalmente en móvil. */
    align-items: center;
    background-color: var(--secondary-accent-color);
    color: var(--background-color);
    /* Borde superior grueso que sirve como un separador visual fuerte. */
    border-block-start: 1rem solid var(--accent-color);
    gap: 1rem;
}

/* Contenedor para la navegación principal y las redes sociales. */
.pie__contenido-principal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* Estilos base para las listas del footer. */
.pie__lista,
.pie__lista--redes {
    list-style: none;  /* Elimina los bullets de la lista. */
    text-align: center;
}

/* Ítem de la lista de navegación. */
.pie__item {
    padding: 0.5rem 1rem;
    transition: background-color 0.2s ease-in, outline 0.2s ease-in, text-shadow 0.2s ease-in;
}

/* Enlace de navegación principal. */
.pie__link {
    color: var(--background-color);
    text-transform: capitalize;
    font-weight: bold;
    text-decoration: none;
    font-size: 1.25rem;
}

/* Contenedor de la navegación de redes sociales. */
.pie__nav--redes {
    padding-block: 0.5rem; /* Espaciado vertical. */
}

/* Efectos de interacción para los ítems de la lista de navegación. */
.pie__item:hover,
.pie__item:active {
    border-radius: 1rem;
    background-color: var(--accent-color);
    outline: 2px solid var(--background-color);
    text-shadow: 0 0 8px var(--accent-color);
}

/* Enlace de redes sociales (actualmente sin estilos únicos, hereda de .pie__link). */
.pie__link--redes {
    color: var(--background-color);
}

/* Lista específica para los iconos de redes sociales. */
.pie__lista--redes {
    display: flex;
    flex-direction: row; /* Coloca los iconos uno al lado del otro. */
    gap: 1rem; 
}

/* Iconos de redes sociales. */
.pie__icono--redes {
    font-size: 2rem;
    transition: transform 0.2s ease-in, color 0.2s ease-in, -webkit-text-stroke 0.2s ease-in;
}

/* Efectos de interacción para los iconos de redes. */
.pie__icono--redes:hover,
.pie__icono--redes:active {
    transform: scale(1.2);  /* Agranda el icono. */
    color: var(--accent-color);
    -webkit-text-stroke: 1px var(--background-color); /* Añade un contorno. */
}

/* Párrafo de copyright o texto final. */
.pie__parrafo {
    font-weight: bold;
    text-align: center;
}

/* ========== Estilos Responsivos (Tablet y superiores) ========== */
/* ========== Tablet ========== */
@media (min-width: 768px) {
    .pie {
        padding: 2rem;
        gap: 0.75rem;
    }

    /* En tablet, el contenido se distribuye horizontalmente. */
    .pie__contenido-principal {
        inline-size: 100%;
        flex-direction: row;
        justify-content: space-between;  /* Coloca la navegación a un lado y las redes sociales al otro. */
    }
}

/* ========== Desktop ========== */
@media (min-width: 1024px) {
    /* La lista de navegación principal se vuelve horizontal en pantallas grandes. */
    .pie__lista {
        display: flex;
        gap: 0.5rem;
    }
}