/* Estilos generales del footer */
.footer {
    background-color: #333; /* Fondo oscuro para contraste */
    color: #fff; /* Texto en blanco */
    padding: 20px 10px;
    font-family: Arial, sans-serif;
}

/* Footer-wrapper: distribución de las secciones */
.footer-wrapper {
    display: flex; /* Usa Flexbox para distribución horizontal */
    justify-content: space-between; /* Espacia uniformemente los elementos */
    align-items: center; /* Alinea verticalmente los elementos */
    flex-wrap: wrap; /* Permite que los elementos se ajusten en pantallas pequeñas */
    padding-bottom: 15px; /* Espacio inferior para separar del footer-bottom */
}

/* Sección del logo */
.footer-brand {
    flex: 2; /* Toma espacio proporcional */
    display: flex;
    align-items: center;
}

.footer-logo {
    width: 25rem; /* Ajusta el tamaño del logo */
    height: auto;
    /* margin-right: 35.1rem; */
}

/* Centrar la sección footer-links */
.footer-links {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente si hay más contenido */
    text-align: center; /* Centra el texto */
    padding: 10px 20px;
}

/* Estilo del texto */
.footer-description {
    font-size: 20px; /* Tamaño del texto */
    line-height: 1.5; /* Espaciado entre líneas */
    color: #ededed; /* Color inicial del texto */
    animation: colorAnimation 4s linear infinite; /* Activa la animación */
    display: inline-block; /* Asegura que el texto sea animable letra por letra */
}

/* Animación de color */
@keyframes colorAnimation {
    0% {
        color: #ffffff; /* Color inicial */
    }
    20% {
        color: #ffffff; /* Progresión inicial hacia amarillo */
    }
    40% {
        color: #ededed; /* Progresión inicial hacia amarillo */
    }
    60% {
        color: #b2b2b2; /* Progresión inicial hacia amarillo */
    }
    100% {
        color: #bd6cb6; /* Todo el texto amarillo */
    }
}

/* Sección de redes sociales */
.footer-social {
    flex: 1; /* Toma espacio proporcional */
    display: flex;
    justify-content: flex-end; /* Alinea los íconos a la derecha */
    gap: 10px; /* Espaciado entre los íconos */
}

.social-icons a {
    color: #fff; /* Color de los íconos */
    font-size: 1.8rem; /* Tamaño de los íconos */
    text-decoration: none;
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: #b2b2b2; /* Cambia a un azul al pasar el ratón (Twitter-style) */
}

/* Footer-bottom */
.footer-bottom {
    text-align: center;
    padding-top: 15px;
    font-size: 16px;
    color: #b2b2b2;
    border-top: 1px solid #444; /* Línea divisoria superior */
    margin-top: 10px;
}

@media screen and (max-width: 1367px) and (min-width: 1279px) {

    .footer-logo {
        width: 21rem; /* Ajusta el tamaño del logo */
        height: auto;
        /* margin-right: 28rem; */
    }

    .social-icons a {
        color: #fff; /* Color de los íconos */
        font-size: 1.2rem; /* Tamaño de los íconos */
    }

    /* Estilo del texto */
    .footer-bottom p{
        font-size: 15px; /* Tamaño del texto */
    }
}


/* Responsive para móviles */
@media (max-width: 768px) {
    /* Ajustar el wrapper a diseño vertical */
    .footer-wrapper {
        flex-direction: column; /* Cambia a distribución vertical */
        align-items: center; /* Centra todos los elementos horizontalmente */
        text-align: center; /* Centra el texto en cada sección */
        gap: 20px; /* Espaciado entre las secciones */
    }

    /* Logo: Centrado y tamaño ajustado */
    .footer-brand {
        flex: unset; /* Quita el tamaño proporcional */
        margin-bottom: 10px; /* Espaciado inferior */
    }

    .footer-logo {
        width: 14rem; /* Ajusta el tamaño del logo */
        height: auto;
    }

    /* Links: Centrar y ajustar el texto */
    .footer-links {
        padding: 0 15px; /* Margen interno para evitar que el texto toque los bordes */
    }

    .footer-description {
        font-size: 14px; /* Reduce el tamaño del texto */
        line-height: 1.4; /* Espaciado entre líneas ajustado */
    }

    /* Redes sociales: Centrado horizontal */
    .footer-social {
        justify-content: center; /* Centra los íconos */
        gap: 15px; /* Espaciado mayor entre los íconos */
    }

    .social-icons a {
        font-size: 1.5rem; /* Reduce el tamaño de los íconos */
    }

    /* Footer-bottom: Reduce el texto y espaciado */
    .footer-bottom {
        font-size: 10px; /* Reduce el tamaño del texto */
        margin-top: 15px; /* Añade más separación superior */
    }
}