/* Importar variables */
@import url('variables.css');


/* Footer */
.footer {
    background-color: var(--azul); /* Color de fondo del footer */
    color: var(--light-color); /* Color del texto del footer */
    padding: 20px 0;
    position: relative;
    bottom: 0;
    /*width: 100%;*/
}


.footer .social-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 10px;
}

.footer .social-icon {
    color: var(--light-color); /* Color blanco para los íconos */
    font-size: 24px; /* Tamaño de los íconos */
    text-decoration: none;
}

.footer .social-icon:hover {
    color: var(--highlight-color); /* Cambia el color en hover si se desea */
}

.footer .footer-text {
    font-size: 0.9rem; /* Tamaño de fuente más pequeño */
    margin-top: 10px;
}

.footer .list-inline-item {
    margin: 0 10px;
}

.footer .list-inline-item a {
    color: var(--light-color); /* Color de los enlaces */
    text-decoration: none;
}

.footer .list-inline-item a:hover {
    text-decoration: underline; /* Subrayar enlaces al pasar el mouse */
}

/* Sección de colores adicionales */
.color-section {
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.color-box {
    height: 25px; /* Ajusta la altura según tus necesidades */
}

.color1 {
    background-color: var(--marron); /* Color 1 */
}

.color2 {
    background-color: var(--verde4); /* Color 2 */
}

.color3 {
    background-color: var(--verde3); /* Color 3 */
}

.color4 {
    background-color: var(--verde2); /* Color 4 */
}

.color5 {
    background-color: var(--amarillo); /* Color 5 */
}

.color6 {
    background-color: var(--azul-claro); /* Color 6 */
}


@media (max-width: 768px) {
    .color-box {
        height: 10px; /* Ajusta la altura según tus necesidades */
    }
    
}