/* █▀▀ █▀█ █▀█ ▀█▀ █▀▀ █▀█ ░ █▀▀ █▀ █▀ */
/* █▀░ █▄█ █▄█ ░█░ ██▄ █▀▄ ▄ █▄▄ ▄█ ▄█ */

.footer {
    display: flex; /* Contenedor flexible */
    align-items: center; /* Centra verticalmente */
    justify-content: space-between; /* Distribuye contenido */
    padding: 20px;
    background-color: #19191c; /* Fondo oscuro */
    color: rgba(255, 255, 255, 0.5); /* Texto translúcido */
    width: 100%;
    position: static; /* Estático por defecto */
    height: 60px;
    margin-top: 20px; /* Espacio entre contenido y footer */
}

/* Sección izquierda con enlaces */
.footer-left {
    display: flex; /* Alineación en fila */
    gap: 20px; /* Espaciado entre enlaces */
    margin-left: 30px; /* Espaciado del borde izquierdo */
}

.footer-left a {
    color: rgba(255, 255, 255, 0.5); /* Color de enlace */
    text-decoration: none; /* Sin subrayado */
    transition: color 0.3s; /* Cambio de color suave */
}

.footer-left a:hover {
    color: #ffffff; /* Blanco al pasar el cursor */
}

/* Estilo para el enlace activo */
.footer-left a.active {
    color: #ffffff; /* Blanco para enlaces activos */
}

/* Sección central con el logo */
.footer-center {
    flex: 1; /* Ocupa el espacio restante */
    display: flex;
    justify-content: center; /* Centrado horizontal */
    align-items: center; /* Centrado vertical */
}

.footer-logo {
    width: 150px; /* Tamaño del logo */
    height: auto; /* Escalado proporcional */
}

/* Sección derecha con copyright */
.footer-right {
    display: flex;
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
    margin-right: 30px; /* Espaciado del borde derecho */
}

.footer-right p {
    margin: 0; /* Sin márgenes */
    line-height: 1.5; /* Altura de línea */
}

/* Diseño responsivo para pantallas pequeñas */
@media (max-width: 645px) {
    .footer {
        flex-direction: column; /* Coloca elementos en columna */
        align-items: center;
        padding: 10px;
        height: auto; /* Altura dinámica */
    }

    .footer-left {
        display: none; /* Oculta los enlaces */
    }

    .footer-center {
        margin-bottom: 10px; /* Espacio inferior */
    }

    .footer-right p {
        text-align: center; /* Centra el texto */
        margin-left: 30px; /* Ajusta espacio izquierdo */
    }
}

/* Diseño para pantallas medianas */
@media (min-width: 645px) and (max-width: 950px) {
    .footer {
        flex-direction: column; /* Columnas para elementos */
        align-items: center;
        padding: 20px;
        height: auto;
    }

    .footer-center {
        order: 1; /* Prioriza el logo */
        margin-bottom: 10px; /* Espacio entre logo y otros elementos */
    }

    .footer-left {
        display: flex;
        flex-direction: row; /* Alínea enlaces en fila */
        gap: 20px; /* Espaciado entre enlaces */
        margin-bottom: 10px; /* Espacio entre enlaces y copyright */
        order: 2; /* Segundo en orden */
        margin-right: 30px; /* Espaciado derecho */
    }

    .footer-right {
        order: 3; /* Último en orden */
        text-align: center; /* Centra el texto */
        margin-left: 30px; /* Espaciado izquierdo */
    }
}