/* Estilos del footer */
.footer {
    background-color: #000; /* Fondo negro para el footer */
    color: white; /* Texto blanco para todo el footer */
    padding: 20px 0; /* Añadir padding en la parte superior e inferior */
}

.footer-container {
    max-width: 1500px; /* Ancho máximo del contenido del footer */
    margin: auto; /* Centramos el contenido del footer */
}

/* Utiliza container-fluid para un ancho completo */
.container-fluidfoot {
    padding: 0 15px; /* Reducir el padding en los lados */
}

/* Estilos para las columnas del footer */
.footer-col {
    flex: 0 0 calc(16.6667% - 30px); /* Calcula el ancho para 6 columnas con un espacio para la separación */
    margin: 0 15px; /* Añade un margen a los lados de cada columna */
    padding: 0 15px; /* Añade padding para no pegar el texto a la línea divisoria */
    padding-top: 30px;
    box-sizing: border-box; /* Incluye el padding en el cálculo del ancho */
    position: relative; /* Posición relativa para posicionar las líneas divisorias */
}

    /* Añade la línea divisoria antes de cada columna excepto la primera */
    .footer-col:not(:first-of-type)::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 1px; /* Ancho de la línea divisoria */
        background: #FF6702; /* Color de la línea divisoria */
    }

/* Responsive: en dispositivos pequeños las columnas ocupan todo el ancho y sin líneas divisorias */
@media (max-width: 768px) {
    .footer-col {
        flex-basis: 100%;
        margin: 0;
        padding: 15px 0; /* Añadir padding superior e inferior para separar cada columna */
        border-bottom: 1px solid #FF6702; /* Borde inferior para separar cada columna */
    }

        .footer-col::before {
            content: none;
        }

    .footer-container {
        max-width: 100%; /* Ancho máximo del contenido del footer */
    }

    .container-fluidfoot {
        padding: 0 10px; /* Reducir padding en los lados */
    }

    .footer-col {
        padding: 0 10px; /* Reducir padding dentro de las columnas */
    }
}

@media (min-width: 769px) {
    .footer-col {
        border-bottom: none; /* Remover el borde inferior en vista de escritorio */
    }

        .footer-col:not(:first-of-type)::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 1px; /* Ancho de la línea divisoria */
            background: #FF6702; /* Color de la línea divisoria */
        }
}

.footer h5 {
    color: white; /* Color del texto de los títulos */
    font-size: 16px; /* Tamaño de la fuente para los títulos */
    margin-bottom: 0.5rem; /* Espacio debajo de los títulos */
}

    .footer h5 i {
        color: #FF6702; /* Color naranja para los íconos de las flechas */
    }

.footer p {
    font-size: 14px; /* Tamaño del texto para párrafos */
}

.footer a {
    color: white; /* Color del texto para los enlaces */
    text-decoration: none; /* Ningún subrayado para los enlaces */
}

    .footer a:hover {
        text-decoration: underline; /* Subrayado al pasar el mouse sobre los enlaces */
    }

.footer-bottom {
    background-color: #FF6702; /* Fondo naranja para la barra inferior del footer */
    color: #000; /* Texto negro para la barra inferior del footer */
    padding: 10px 0; /* Relleno para la barra inferior del footer */
}

.nar {
    color: #FF6702;
    font-weight: bold;
}