footer {
    padding: 60px 0; /* Padding base */
    color: var(--text-color); /* Asegurar color de texto base */
}

footer > .container { /* El contenedor principal del footer */
    display: flex;
    flex-direction: column;
    gap: 40px; /* Espacio entre el contenido superior y la barra de copyright/social */
}

footer span Logo {
    color: var(--color-blueLogo);
}

footer .content { /* Contenedor para logo e información de contacto */
    display: flex;
    flex-direction: column; /* Apilado en móviles */
    align-items: center; /* Centrar en móviles */
    text-align: center; /* Centrar texto en móviles */
    gap: 20px;
}

footer .content ul {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Espacio entre ítems de contacto */
    margin-top: 20px;
    padding-left: 0; /* Quitar padding por defecto de ul */
}

footer .content ul li {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center; /* Centrar contenido del li en móviles */
    gap: 10px; /* Espacio entre icono y texto */
    font-size: clamp(0.9rem, 2.5vw, 1rem); /* Tamaño de fuente fluido */
}
footer .content ul li i {
    color: var(--color-primary); /* Color para los iconos */
    font-size: 1.2em; /* Tamaño relativo al texto del li */
}


footer .container-social-copyrigth {
    display: flex;
    flex-direction: column; /* Apilado en móviles */
    align-items: center;
    gap: 25px; /* Espacio entre sociales y copyright */
    padding-top: 30px; /* Espacio arriba */
    border-top: 1px solid var(--color-divider); /* Línea separadora */
}

footer .container-social-copyrigth ul { /* Lista de iconos sociales */
    display: flex;
    gap: 15px; /* Espacio entre iconos sociales */
    padding-left: 0;
    margin-bottom: 0; /* Quitar margen si es el último elemento del flex */
}

footer .container-social-copyrigth ul li {
    list-style: none;
}

footer .container-social-copyrigth ul li a {
    text-decoration: none;
    color: var(--color-light);
    border: 1px solid var(--color-divider);
    border-radius: 50%; /* Iconos redondos */
    width: 45px; /* Tamaño adecuado para tap */
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease; /* Transición suave */
}

footer .container-social-copyrigth ul li a i {
    font-size: 20px; /* Tamaño del icono social */
}

footer .container-social-copyrigth ul li a:hover,
footer .container-social-copyrigth ul li a:focus {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    transform: translateY(-3px); /* Efecto hover sutil */
}
/* El color del icono al hover ya está bien con color: var(--color-light) */


footer .container-social-copyrigth p { /* Texto de copyright */
    font-size: clamp(0.85rem, 2vw, 0.95rem); /* Tamaño de fuente fluido */
    text-align: center;
}

/* Footer - Medium devices (tablets) */
@media (min-width: var(--breakpoint-md)) {
    footer {
        padding: 80px 0;
    }
    footer > .container {
        gap: 60px;
    }

    footer .content {
        flex-direction: row; /* Lado a lado en tablets */
        justify-content: space-between; /* Distribuir logo e info */
        align-items: flex-start; /* Alinear al inicio */
        text-align: left; /* Alinear texto a la izquierda */
    }
    footer .content .container-logo {
        margin-bottom: 0; /* Quitar margen si no es el último */
    }
    footer .content ul {
        margin-top: 0; /* Quitar margen si no es el primer elemento */
        align-items: flex-start; /* Alinear ítems a la izquierda */
    }
     footer .content ul li {
        justify-content: flex-start; /* Alinear contenido del li a la izquierda */
    }


    footer .container-social-copyrigth {
        flex-direction: row; /* Lado a lado */
        justify-content: space-between; /* Sociales a un lado, copyright al otro */
        align-items: center;
        gap: 20px; /* Espacio entre ellos */
    }
    footer .container-social-copyrigth p {
        text-align: right; /* Copyright a la derecha */
    }
}

/* Footer - Large devices (desktops) */
@media (min-width: var(--breakpoint-lg)) {
    footer {
        padding: 100px 0;
    }
}