/* Hacemos que el fondo del primera-fila-footer siga creciendo conforme se aumente el ancho de la pantalla */
.fondo-footer{
    background: #F4F4F4;
    width: 100%;

    min-height: 307px; /* Misma Altura !! */
}

/* Características generales del footer */
#footer{
    display: flex;
    flex-direction: column; /* Para poner el Banner de ICEX como una segunda fila en el footer */
    justify-content: center;
    align-items: center;
    gap: 50px; /* Separación entre la primera y la segunda fila del footer */

    min-height: 307px; /* Misma Altura que el fondo del footer !!! */
    width: 95%;
    max-width: 1440px; /* Ajustamos el tamaño máximo del footer para que no se extienda demasiado en pantallas grandes */
    margin: auto;
}

/* Estilos para el contenedor que es la primera fila del footer */
.primera-fila-footer{
    /* outline: 5px solid green; */

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    gap: 144px; /* Separación entre los elementos */

    margin-top: 80px; /* Para que el recuadro anterior no tape el contenido de la primera fila del footer */
}

/* Subcontenedor logos PYME y AENOR*/
.primera-fila-footer .logos-primera-fila-footer{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Para que se ponga un logo debajo de otro cuando ya no quepan */

    gap: 50px; /* Separación entre los logos */
}

.primera-fila-footer .logos-primera-fila-footer .logo-pyme{
    max-width: 100%; /* Para ajustar el tamaño de las imágenes que componen el logo de la Pyme */
}

.primera-fila-footer .logos-primera-fila-footer .logo-pyme img{
    max-width: 100%; /* Para ajustar el tamaño de las imágenes que componen el logo de la Pyme */
    height: auto;
}

#contenedor-logo-pyme{
    display: flex;
    justify-content: center;
    align-items: center;

    width:150px;
    text-align:center;
}

/* Contenedor que contiene los divs de texto del primera-fila-footer */
.primera-fila-footer .segundo-contenedor-primera-fila-footer{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 144px; /* Separación entre los elementos */
}

/* Contenedor: TIME LABORIS */
.primera-fila-footer .contenedor-time-laboris{
    /* outline: 3px solid orange; */
}

/* Contenedor: NOSOTROS */
.primera-fila-footer .contenedor-nosotros{
    /* outline: 3px solid pink; */

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    gap: 80px; /* Separación entre las dos columnas */
}

/* Ajustes de texto */
.primera-fila-footer h1{
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 600;
    font-size: 25px;
    line-height: 17.58px;
    color: #5A5A5A;
}

.primera-fila-footer span,
.primera-fila-footer a{
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 18px;
    color: #5A5A5A;

    text-decoration: none; /* Para quitar el subrayado de los enlaces */
}

/* Ajustamos la separación de las líneas de texto inicial */
.primera-fila-footer .separacion{
    line-height: 0px;
    margin: 0;
}

/* Para la separación entre las palabras de los enlaces */
.custom-spacing {
    display: block;
    height: 10px; /* Ajusta la altura según el espaciado deseado */
}

.primera-fila-footer h2{
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    color: #151515;
    text-align: left;
}

/* Ajustamos los logos para que se vean centrados cuando tengan un salto de línea */
.primera-fila-footer .contenedor-logos{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    gap: 20px; /* MODIFICACIÓN: ANTES NO ESTABA */

    flex-wrap: wrap;
}

/* Definimos el círculo blanco como fondo para los logos */
.primera-fila-footer .logo{
    background: rgba(255, 255, 255, 1);
    border-radius: 50%;

    width: 37px;
    height: 37px;

    /* Centramos el logo convirtiéndolo en uns display flex */
    display: flex;
    justify-content: center;
    align-items: center;

    float: left; /* Para que el logo anterior aparezca a la izquierda del siguiente */
    margin-right: 0px; /* MODIFICACIÓN: ANTES ERAN 20px */

    margin-top: 10px; /* Dejamos algo de margen superior en el contenedor que contiene a los logos */
}

/* Características de la segunda fila del footer */
.segunda-fila-footer{
    display: flex;
    flex-direction: column; /* Para poner el texto encima de las imágenes */
    justify-content: center;
    align-items: center;
    gap: 0px; /* Separación entre el texto y las imágenes (ya se deja espacio de por sí con el alto de las fotos) */

    width: 95%;
}

/* Especificaciones del subcontenedor que contiene el texto de ICEX */
.segunda-fila-footer .subcontenedor-texto-ICEX{
    width: 100%;
    max-width: 800px;
}

/* Especificaciones del subcontenedor que contiene las imágenes de ICEX*/
.segunda-fila-footer .subcontenedor-imagenes-ICEX{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Para que vayan pasando a la siguiente línea cuando no quepan */
    gap: 50px; /* Separación entre imágenes y texto */

    width: 100%;
}

/* Especificaciones Texto de la segunda fila del footer */
.segunda-fila-footer h2{
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 18px;
    color: #5A5A5A;
    text-align: center;
}

.segunda-fila-footer h1{
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 19px;
    line-height: 22px;
    color: black;
    text-align: center;
}

/* Diseño Responsive para el pie de página */
@media screen and (max-width: 1360px){

    /* Ponemos los logos encima del texto */
    .primera-fila-footer{
        flex-direction: column;
        gap: 60px; /* Separación entre los elementos */
        margin-top: 40px; /* Disminuimos la separación con el elemento anterior */
    }    

    /* Dejamos margen por arriba para el contenedor de los logos */
    .primera-fila-footer .logos-primera-fila-footer{
        margin-top: 50px;
    }

    /* Reducimos el gap (separación) entre las imágenes de ICEX y el texto */
    .segunda-fila-footer .subcontenedor-imagenes-ICEX{
        gap: 20px; /* Separación entre imágenes y texto */
    }
}

@media screen and (max-width: 970px){

    /* Cambiamos a dos filas */
    .primera-fila-footer .segundo-contenedor-primera-fila-footer{
        flex-direction: column;
    
        gap: 30px; /* Separación entre los elementos */
    }

}

/* Introducimos el espaciado al final del pie de página para que el Contacto de Consulta no se superponga encima del 
contenido del pie de página */
.fondo-footer .espaciado-boton-consulta{
    /* background: red; */
    height: 90px; /* Para dejar margen con el botón de consulta */
}


/* Vamos ajustando el espaciado del botón de consulta conforme se disminuye el ancho de pantalla */
@media screen and (max-width: 1050px){

    .fondo-footer .espaciado-boton-consulta{
        height: 100px; /* Para dejar margen con el botón de consulta */
    }

}

@media screen and (max-width: 760px){

    .fondo-footer .espaciado-boton-consulta{
        height: 130px; /* Para dejar margen con el botón de consulta */
    }

}

@media screen and (max-width: 450px){

    /* Hacemos que las imágenes se adapten al ancho del contenedor */
    .segunda-fila-footer .subcontenedor-imagenes-ICEX img{
        max-width: 100%;
    }

    /* Ponemos el texto de "Nosotros" centrado */
    .primera-fila-footer h2{
        text-align: center;
    }

    /* Cambiamos a tres filas */
    .primera-fila-footer .contenedor-nosotros{
        flex-direction: column;    
        gap: 40px; /* Separación entre las dos columnas */

        text-align: center;
    }

    /* Reducimos la anchura del contenido del primera-fila-footer para que tenga más margen a ambos lados */
    .primera-fila-footer{    
        width: 90%;
    }
    
    .primera-fila-footer .contenedor-time-laboris{
        text-align: center;
    }
    
}