/* Colores y fuentes base (si no están ya definidos) */
:root {
    --envia-red: #BA0020; /* Rojo de Envia.co */
    --envia-white: #FFFFFF;
    --envia-text-light: #F0F0F0; /* Un blanco ligeramente apagado para el texto */
}

.envia-footer {
    z-index:1000;
    position:fixed;
    bottom:0;

    background-color: var(--envia-red);
    color: var(--envia-white);
    padding: 15px 20px; /* Ajusta el padding según necesites */
    font-family: Arial, sans-serif; /* O la fuente que uses en tu sitio */
    font-size: 14px; /* Tamaño de fuente del footer */
    width: 100%;
    box-sizing: border-box; /* Asegura que el padding se incluya en el ancho total */
}

.envia-footer-content {
    padding-left:100px;
  /*  max-width: 1200px;  Ancho máximo para centrar el contenido */
    margin: 0 auto; /* Centrar el contenido */
    display: flex;
    justify-content: space-between; /* Espacia los elementos a los extremos */
    align-items: center; /* Centra verticalmente los elementos */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
}

.envia-contact-info {
    display: flex;
    align-items: center;
    gap: 8px; /* Espacio entre los elementos de contacto */
    flex-wrap: wrap;
}

    .envia-contact-info a {
        color: var(--envia-white);
        text-decoration: none;
        font-weight: 500;
    }

        .envia-contact-info a:hover {
            text-decoration: underline;
        }

.envia-icon {
    font-size: 16px; /* Ajusta el tamaño de los iconos si son texto o emojis */
    line-height: 1; /* Para alinear bien verticalmente */
    /* Si usas SVGs o fuentes de iconos, su tamaño se controlaría de forma diferente */
}

.envia-separator {
    color: var(--envia-text-light); /* Color del separador | */
    margin: 0 5px; /* Espacio alrededor del separador */
}

.envia-vigilado {
    /* Sin estilos específicos aquí a menos que necesite posicionamiento */
}

.envia-vigilado-logo {
    margin-right:40px;
    max-height: 24px; /* Altura máxima del logo "Vigilado Supertransporte" */
    width: auto; /* Mantiene la proporción */
    display: block; /* Elimina espacio extra bajo la imagen */
}

/* Media queries para pantallas más pequeñas (opcional, pero buena práctica) */
@media (max-width: 768px) {
    .envia-footer-content {
        flex-direction: column; /* Apila los elementos en pantallas pequeñas */
        text-align: center;
        gap: 10px; /* Espacio entre los bloques apilados */
    }

    .envia-contact-info {
        justify-content: center; /* Centra los iconos y texto cuando se apilan */
    }

    .envia-footer {
        padding: 15px; /* Menos padding en pantallas pequeñas */
    }
}