/* ============================ */
/*      ESTILO GENERAL FOOTER   */
/* ============================ */
footer {
    background: rgba(0, 0, 0, 0.829);/* Fondo negro para el footer */
    color: #fff; /* Texto en color blanco para mejor contraste */
    text-align: center; /* Alineación centrada del texto */
    font-family: Arial, sans-serif; /* Fuente utilizada en el footer */
    padding-bottom: 30px;
}
.footer-container {  /* Contenedor principal del footer */
    max-width: 30px; /* Ancho máximo del contenedor */
    margin: 0 auto; /* Centra el contenedor horizontalmente */
    padding: 30px 0px; /* Espaciado interno a los lados */
}

/* =========================== */
/*      REDES SOCIALES         */
/* =========================== */
.footer-redesSociales { /* Diseño en columnas para los enlaces de redes sociales */
    display: grid; /* Usa el modelo de diseño Grid */
    grid-template-columns: repeat(5, 1fr); /* Crea dos columnas de igual tamaño */
    gap: 20px; /* Espaciado entre elementos */
    padding: 60px;
    justify-content: center; /* Centra los elementos dentro del contenedor */
    opacity: 0.7;
}
.footer-links a {
        color: #ffffff9a; 
        font-size: 12px;
        padding-left: 20%;
        padding-right: 20%;
}
/* Estilo de los enlaces de redes sociales */
.footer-redesSociales a {
    display: flex; /* Usa flexbox para alinear contenido dentro del enlace */
    align-items: center; /* Alinea verticalmente el contenido */
    padding: 9px; /* Espaciado interno para mayor tamaño de clic */
    background-color: rgba(255, 255, 255, 0.2); /* Fondo semitransparente */
    border-radius: 10px; /* Bordes redondeados para un diseño más atractivo */
    text-decoration: none; /* Elimina el subrayado predeterminado de los enlaces */
    color: white; /* Color del texto */
    font-size: 13px; /* Tamaño del texto */
    font-weight: bold; /* Texto en negritas */
    transition: background-color 0.5s ease-in-out, transform 0.5s ease; /* Efectos de transición para hover */
}

/* Agregar iconos a los enlaces desde CSS */
.footer-redesSociales a::before {
    content: ""; /* Elemento vacío que se utilizará para mostrar iconos */
    display: inline-block; /* Hace que el contenido sea visible en línea */
    width: 20px; /* Ancho del icono */
    height: 20px; /* Altura del icono */
    background-size: contain; /* Ajusta la imagen al tamaño del contenedor */
    background-repeat: no-repeat; /* Evita que el icono se repita */
    margin-right: 8px; /* Espaciado entre el icono y el texto */
}


/* Efecto hover en iconos de redes sociales */
.footer-redesSociales a:hover {
    background-color: rgba(255, 255, 255, 0.548); /* Color de fondo al pasar el mouse */
    transform: scale(1.1); /* Efecto de aumento */
    opacity: 0.8; /* Reducción de opacidad */
}





.txt-fecha-DerechosReservados a:hover {
    text-decoration: underline;

}

/* =============================== */
/*      RESPONSIVE DESIGN          */
/* =============================== */
@media (max-width: 768px) { /* Ajustes para pantallas medianas (tablets) */
    .footer-redesSociales {
        grid-template-columns: repeat(3, 1fr); /* Mantiene dos columnas */
    }
    .footer-container {  /* Contenedor principal del footer */
        max-width: 430px; /* Ancho máximo del contenedor */
        margin: 0 auto; /* Centra el contenedor horizontalmente */
        padding: 10px 0px; /* Espaciado interno a los lados */
    }
}

@media (max-width: 480px) { /* Ajustes para pantallas pequeñas (móviles) */
    .footer-redesSociales {
        grid-template-columns: 1fr; /* Se colocan en una sola columna */
    }
    footer {
        padding: 10px 0;
    }
    .footer-container {
        padding: 0 10px;
    }
    .txt-fecha-DerechosReservados {
        font-size: 12px;
    }
}