*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Inter";
    font-optical-sizing: auto;
    font-weight: 400;
    scroll-behavior: smooth;
    scroll-padding-top: 150px;
     
  
       
      
    }



    /* MENU DE NAVEGACION */

    header{
       
       background-color: rgb(255, 255, 255);
        display: flex;
        width: 100%;
        height: 200px;
        align-items: center;
        text-decoration: none;
        position: fixed;
        z-index: 1000;
        margin-top: -200px;
        border-bottom: 3px solid #085693;
      
    }
  

    
   header img {
    
    max-width: 100%; /* Ajusta la imagen al ancho del contenedor */
    height: auto; /* Ajusta la altura automáticamente para no deformarla */ 
    margin-left: 50px;
    max-width:340px; /* Reduce el tamaño máximo a 300px */
    height: auto; /* Mantiene las proporciones */
    
    

}


   
  
    .inicio {
    display: flex; 
    justify-content: space-around;
    align-items: center;
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    margin-top: 80px;
    

   
    }


    .inicio a {
    text-decoration: none; 
    color: #085693;
    transition: box-shadow 0.3s ease, transform 0.3s ease;

    
  
    
    }


    .inicio a:hover {
    color: #05487c;
    transform: scale(1.05); /* Aumenta ligeramente el tamaño del contenedor */

    }


    nav.inicio {
        display: flex;
        gap: 15px;
    }
    
    nav.inicio a {
        text-decoration: none;
        
        font-weight: bold;
    }
    


   

    /*SERVICIOS*/

    
           
    

   div#Servicios.servicios{
    background-image: url(imagenes2/Captura\ de\ pantalla\ 2025-01-20\ 143808.png);
    
    background-size: cover;
   
   }
    
    .titulo{

        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 50px;
      padding-top: 50px;
      overflow: hidden;
      margin-top: 200px;
      color: #085693;
        
      
     
        
    }

    .subtitulo {
        width: 50%; 
        margin: 0 auto; 
        margin-bottom: 100px;
        text-align: center; 
        padding-top: 50px;
        font-size: 20px;
        color: #085693;
        
        
    }
    

 



/* Grid principal */
.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 4 columnas */
    gap: 20px; /* Espacio entre contenedores */
    justify-items: center;
    margin: 0 auto;
    max-width: 1200px; /* Ajusta al ancho deseado */
    
}

/* Estilo de cada contenedor */
.grid-container > div {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 16px;
    text-align: center;
    width: 100%; /* Para que se adapte al contenedor */
    max-width: 500px; /* Ancho máximo de cada tarjeta */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    
}




.grid-container > div:hover {
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2); /* Sombra más grande */
    transform: scale(1.05); /* Aumenta ligeramente el tamaño del contenedor */
}



/* Títulos */
.grid-container h4 {
    font-size: 1.5em;
    color: #085693;
    margin-bottom: 12px;
    font-size: 20px;
}    

/* Imágenes */
.grid-container img {
    
    
    border-radius: 4px;
    margin-bottom: 12px;
}    

/* Descripciones */
.grid-container p {
    font-size: 1.1em;
    color: #085693;
    line-height: 1.4;
}    

/* Ajuste para la fila inferior */
.grid-container div:nth-child(n+7) {
    grid-column: span 2; /* Ocupará 3 columnas en la segunda fila */
}    



/*LOGISTICA*/

.log{
    margin-bottom: 500px;
}

.logtitle{

    display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 50px;
      padding-top: 100px;
      overflow: hidden;
      color: #085693;
}


.logsubt{

    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    font-size: 20px;
    padding-top: 50px;
    overflow: hidden;
    width: 35%; 
    margin: 0 auto; 
    color: #085693;
  
      
}




.logistica-container{
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 4 columnas */
    gap: 20px; /* Espacio entre contenedores */
    justify-items: center;
    margin: 0 auto;
    max-width: 1200px; /* Ajusta al ancho deseado */
    padding-top: 100px;
    
}

/* Estilo de cada contenedor */
.logistica-container> div {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 16px;
    text-align: center;
    width: 100%; /* Para que se adapte al contenedor */
    max-width: 500px; /* Ancho máximo de cada tarjeta */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    
}



.logistica-container > div:hover {
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2); /* Sombra más grande */
    transform: scale(1.05); /* Aumenta ligeramente el tamaño del contenedor */
}



/* Títulos */
.logistica-container h4 {
    font-size: 1.5em;
    color:#085693;
    margin-bottom: 12px;
}    

/* Imágenes */
.logistica-container img {
    
    
    border-radius: 4px;
    margin-bottom: 12px;
}    

/* Descripciones */
.logistica-container p {
    font-size: 1.1em;
    color: #085693;
    line-height: 1.4;
}    

/* Ajuste para la fila inferior */
.logistica-container div:nth-child(n+7) {
    grid-column: span 2; /* Ocupará 3 columnas en la segunda fila */
}    



/*QUIENES SOMOS*/


.quienes{

    display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 50px;
      padding-top: 100px;
      overflow: hidden;
      color: #085693;
}


.estudioqueirolo{

    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    font-size: 20px;
    padding-top: 50px;
    overflow: hidden;
    width: 30%; 
    margin: 0 auto; 
    margin-bottom: 100px;
    color:#085693;
  
      
}


.quienessomos {
    display: flex;
    flex-direction: column;  /* Alinea los elementos en columna (h1, h4, img) */
    justify-content: center;  /* Centra los elementos verticalmente */
    align-items: center;  /* Centra los elementos horizontalmente */
    text-align: center;  /* Centra el texto */
    height: 100vh;  /* La sección ocupa toda la altura de la pantalla */
    padding: 20px;  /* Espaciado interior */
}

.fotoestudio {
    max-width: 100%;  /* Asegura que la imagen no se salga del contenedor */
    height: auto;  /* Mantiene la proporción de la imagen */
   
}




/*CONTACTO*/




footer{
        
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 100px;
    color: #085693;
    background-image: url(imagenes2/Captura\ de\ pantalla\ 2025-01-20\ 144017.png);
    background-size: cover;
}


.todoform{
    margin-left: 200px;
  
}



form {
    padding: 50px 55px;
    box-shadow:  0 0 20px rgba(0,0,0,0.2);
    border-radius: 20px;
    text-align: center;
    width: 500px;

}    

.input-group {
    display:flex;
    flex-direction: column;
    text-align: left;
   

}    

h2{
    color: #085693;
    font-size: 35px;

}    


label{

    color: #085693;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 15px;

}    


input, textarea{

    padding: 17px 25px;
    border-radius: 25px;
    margin-bottom: 20px;
    background-color: white;
    border: 2px solid  ;
    color: black;
    outline: none;
   

}    

input::placeholder, textarea::placeholder {
    color:#085693;
}    


.btn{

    font-size: 16px;
    color:#085693;
    border: 0;
    border-radius: 25px;
    background-color: white;
    box-shadow:  0 0 20px rgba(0,0,0,0.2);
    cursor: pointer;
 }    

.btn-wpp{

    font-size: 16px;
    color: #ffffff;
    border: 0;
    border-radius: 25px;
    background-color: #cacaca;
    cursor: pointer;
    position: fixed;
    width: 60px;
    height: 60px;
    line-height: 55px;
    bottom: 30px;
    right: -0px;
    background: #0df053;
    color: white;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 0px 1px 10px rgba(0,0,0,0.3);
    z-index: 100;
}    




.btn-wpp:hover{

    text-decoration: none;
    color: #0df053;
    background-color: white;
}    


.botonesredes{

   flex-direction: column; 
   justify-content: left;
   align-items: center;
   margin-bottom: 300px;
   line-height: 50px;
   font-size: 23px;
   margin-top: 300px;
   font-weight: bold;
  position: relative;
 
  
}   


footer p{

    font-size: 30px;

}

footer li a {
    
        list-style: none;
        text-decoration: none;
         
}

.redesespañol{

    display: flex;
}

.ig{
    list-style-type: none;
    list-style: none;
    text-decoration: none;
    color: black;
}

.copy{
    font-size: 14px;
    width: 470px;
    margin-left: -30px;
    text-align: center;
}

/*NOTEBOOKS*/

@media (max-width: 1453px) {



    header img {
    
        max-width: 100%; /* Ajusta la imagen al ancho del contenedor */
        height: auto; /* Ajusta la altura automáticamente para no deformarla */
         

        
        max-width: 300px; /* Reduce el tamaño máximo a 300px */
        height: auto; /* Mantiene las proporciones */
        
        
    
   }





   div#Servicios.servicios{
    background-image: url(imagenes2/Captura\ de\ pantalla\ 2025-01-20\ 165358.png);
    
    background-size: cover;
   
   }


    .titulo{

    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 48px;
  padding-top: 50px;
  overflow: hidden;
  margin-top: 200px;
  color: #085693;
    
  
 
    
}

    .subtitulo {
    width: 50%; 
    margin: 0 auto; 
    margin-bottom: 100px;
    text-align: center; 
    padding-top: 50px;
    font-size: 18px;
    color: #085693;
    
    
}



    
.logtitle{

    display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 48px;
      padding-top: 100px;
      overflow: hidden;
      color: #085693;
}


.logsubt{

    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    font-size: 18px;
    padding-top: 50px;
    overflow: hidden;
    width: 650px; 
    margin: 0 auto; 
    color: #085693;
  
      
}



/* Títulos */
.logistica-container h4 {
    font-size: 1.4em;
    color:#085693;
    margin-bottom: 12px;
}    



/* Descripciones */
.logistica-container p {
    font-size: 1.0em;
    color: #085693;
    line-height: 1.4;
}    






.quienes{

    display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 48px;
      padding-top: 100px;
      overflow: hidden;
      color: #085693;
}


.estudioqueirolo{

    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    font-size: 18px;
    padding-top: 50px;
    overflow: hidden;
    width: 30%; 
    margin: 0 auto; 
    margin-bottom: 100px;
    color:#085693;
  
      
}




    .mapa{
        margin-top: 100px;
    }


    .botonesredes{

        flex-direction: column; 
        justify-content: left;
        align-items: center;
        margin-bottom: 300px;
        margin-right: 50px;
        line-height: 50px;
        font-size: 20px;
        margin-top: 300px;
        font-weight: bold;
       position: relative;
       
     }   
     
     

     footer{
        background-image: url(imagenes2/Captura\ de\ pantalla\ 2025-01-21\ 142041.png);
        background-size: cover;
     }


     footer p{
     
         font-size: 24px;
         width: 600px;
        
     
     }
     
     .redesespañol{
     
         display: flex;
     }
     


     .todoform{
        margin-left: 0px;
      
    }



}

/*TABLETS*/


@media (max-width: 1024px) {


    div#Servicios.servicios{
        background-image: url(imagenes2/Captura\ de\ pantalla\ 2025-01-20\ 145039.png);
        
        background-size: cover;
       
       }

/* Estilo de cada contenedor */
.grid-container > div {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 16px;
    text-align: center;
    width: 100%; /* Para que se adapte al contenedor */
    max-width: 400px; /* Ancho máximo de cada tarjeta */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    
}


/* Estilo de cada contenedor */
.logistica-container> div {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 16px;
    text-align: center;
    width: 100%; /* Para que se adapte al contenedor */
    max-width: 400px; /* Ancho máximo de cada tarjeta */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    
}

.botonesredes{

    flex-direction: column; 
    justify-content: center;
    align-items: center;
    margin-top: -700px;
    margin-left: 150px;
    width: 900px;
    line-height: 50px;
    font-size: 30px;
   
    font-weight: bold;
   position: absolute;
   
 }   
 
 .estamos{
    width: 1000px
 }
 
 


 footer p{
 
     font-size: 35px;
  
 
 }
 
 .redesespañol{
 
     display: flex;
 }
 
 .ig{
     list-style-type: none;
     list-style: none;
     text-decoration: none;
     color: black;
 }
 
 




.todoform{
    margin-right: 00px;
    margin-top: 400px;
    position: relative;
  
}





 .quienes{

        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 50px;
        padding-top: 100px;
        overflow: hidden;
        margin-top: -500px;
    }
    
    
    .estudioqueirolo{
    
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
        font-size: 20px;
        padding-top: 50px;
        overflow: hidden;
        width: 50%; 
        margin: 0 auto; 
        margin-bottom: 100px;
     
      
          
    }
    
    .mapa{
        margin-top: -300px;
    }




}



@media   (max-width: 768px) {


    header{
       
        background-color: #ffffff;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        width: 100%;
        height: 200px;
        align-items: center;
        text-decoration: none;
        position: fixed;
        z-index: 1000;
        margin-top: -200px;
        
      
    }

  
    .inicio {
    display: flex; 
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    
    


    }


   header img {
    
        max-width: 100%; /* Ajusta la imagen al ancho del contenedor */
        height: auto; /* Ajusta la altura automáticamente para no deformarla */
        

        
        max-width: 300px; /* Reduce el tamaño máximo a 300px */
        height: auto; /* Mantiene las proporciones */
        
        
    
   }





   div#Servicios.servicios{
    background-image: url(imagenes2/Captura\ de\ pantalla\ 2025-01-20\ 145147.png);
    
    background-size: cover;
   
   }

   nav.inicio {
    display: flex;
    justify-content: left; /* Centra los enlaces */
    flex-wrap: wrap; /* Permite que los enlaces salten de línea si es necesario */
    gap: 5px; /* Reduce el espacio entre los enlaces */
    padding: 0; /* Elimina el relleno del contenedor */
}

/* Estilo de los enlaces */
nav.inicio a {
    text-decoration: none; /* Elimina el subrayado */
    padding: 5px; /* Reduce el espacio interno del enlace */
    margin: 0; /* Elimina márgenes entre enlaces */
    font-size: 14px; /* Ajusta el tamaño de fuente para pantallas pequeñas */
    display: inline-block;
}






/* Grid principal */
.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 4 columnas */
    gap: 20px; /* Espacio entre contenedores */
    justify-items: center;
    margin: 0 auto;
    max-width: 1200px; /* Ajusta al ancho deseado */
    
}

/* Estilo de cada contenedor */
.grid-container > div {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 16px;
    text-align: center;
    width: 100%; /* Para que se adapte al contenedor */
    max-width: 300px; /* Ancho máximo de cada tarjeta */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    
}


.grid-container img{

    width: 270px;


}









.logistica-container{
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 4 columnas */
    gap: 20px; /* Espacio entre contenedores */
    justify-items: center;
    margin: 0 auto;
    max-width: 1200px; /* Ajusta al ancho deseado */
    padding-top: 100px;
    
}

/* Estilo de cada contenedor */
.logistica-container> div {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 16px;
    text-align: center;
    width: 100%; /* Para que se adapte al contenedor */
    max-width: 300px; /* Ancho máximo de cada tarjeta */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    
}






.logistica-container img{

    width: 270px;


}




.quienes{

    display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 50px;
      padding-top: 00px;
      overflow: hidden;
}




.quienessomos {
    display: flex;
    flex-direction: column;  /* Alinea los elementos en columna (h1, h4, img) */
    justify-content: center;  /* Centra los elementos verticalmente */
    align-items: center;  /* Centra los elementos horizontalmente */
    text-align: center;  /* Centra el texto */
    height: 100vh;  /* La sección ocupa toda la altura de la pantalla */
    padding: 20px;  /* Espaciado interior */
    margin-top: 200px;
}

.estudioqueirolo{

    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    font-size: 20px;
    padding-top: 50px;
    overflow: hidden;
    width: 65%; 
    margin: 0 auto; 
    margin-bottom: 100px;
  
      
}

.fotoestudio {
    max-width: 100%;  /* Asegura que la imagen no se salga del contenedor */
    height: auto;  /* Mantiene la proporción de la imagen */
    margin-top: 00px;
    margin-bottom: 000px;
   
}



.mapa iframe {

   height: 400px;
}



.botonesredes{

    flex-direction: column; 
    justify-content: center;
    align-items: center;
    margin-top: -600px;
    margin-left: 150px;
    width: 600px;
    line-height: 50px;
    font-size: 30px;
   
    font-weight: bold;
   position: absolute;
   
 }   
 
 .estamos{
    width: 500px;
    margin-bottom:20px ;
 }
 
 

 footer p{
 
     font-size: 35px;
    
  
 
 }
 
 .redesespañol{
 
     display: flex;
 }
 
 .ig{
     list-style-type: none;
     list-style: none;
     text-decoration: none;
     color: black;
 }




 .todoform{
    margin-right: 00px;
    margin-top: 400px;
    position: relative;
  
}
 

}










@media (max-width: 440px) {




    header img {
    
        max-width: 100%; /* Ajusta la imagen al ancho del contenedor */
        height: auto; /* Ajusta la altura automáticamente para no deformarla */
         
       margin-left: 10px;
        
        max-width: 280px; /* Reduce el tamaño máximo a 300px */
        height: auto; /* Mantiene las proporciones */
        
    }
    

    
    div#Servicios.servicios{
        background-image: url(imagenes2/Captura\ de\ pantalla\ 2025-01-20\ 145319.png);
        
        background-size: cover;
       
       }
    



 .inicio {
        display: flex; 
        flex-direction: column;
        margin-right: 600px;
        margin-top: -5px;
        width: 100%;
        font-size: 17px;
        font-weight: bold;
    
       
        }
    
    
 .inicio a {
        text-decoration: none; 
        color:#085693;
        transition: box-shadow 0.3s ease, transform 0.3s ease;
        
    
        }
    
    
.inicio a:hover {
    color:#053b64;
        transform: scale(1.05); /* Aumenta ligeramente el tamaño del contenedor */
    
        }
    
    
 nav.inicio {
            display: flex;
            gap: 15px;
            margin-left: 20px;
        }
        
 nav.inicio a {
         text-decoration: none;
            font-weight: bold;
        }
        
    
        .subtitulo {
            width: 80%; 
            margin: 0 auto; 
            margin-bottom: 100px;
            text-align: center; 
            padding-top: 50px;
            font-size: 20px;
            
        }
        
/* Grid principal */
.grid-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* 4 columnas */
    gap: 20px; /* Espacio entre contenedores */
    justify-items: center;
    margin: 0 auto;
    max-width: 1200px; /* Ajusta al ancho deseado */
    
}

/* Estilo de cada contenedor */
.grid-container > div {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 16px;
    text-align: center;
    width: 80%; /* Para que se adapte al contenedor */
    max-width: 500px; /* Ancho máximo de cada tarjeta */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    
}



.logsubt{

    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    font-size: 20px;
    padding-top: 50px;
    overflow: hidden;
    width: 300px; 
    margin: 0 auto; 
  
      
}





.logistica-container{
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* 4 columnas */
    gap: 20px; /* Espacio entre contenedores */
    justify-items: center;
    margin: 0 auto;
    max-width: 1200px; /* Ajusta al ancho deseado */
    padding-top: 100px;
    
}

/* Estilo de cada contenedor */
.logistica-container> div {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 16px;
    text-align: center;
    width: 80%; /* Para que se adapte al contenedor */
    max-width: 500px; /* Ancho máximo de cada tarjeta */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    
}






.quienes{

    display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 50px;
      padding-top: 00px;
      overflow: hidden;
      
}




.quienessomos {
    display: flex;
    flex-direction: column;  /* Alinea los elementos en columna (h1, h4, img) */
    justify-content: center;  /* Centra los elementos verticalmente */
    align-items: center;  /* Centra los elementos horizontalmente */
    text-align: center;  /* Centra el texto */
    height: 100vh;  /* La sección ocupa toda la altura de la pantalla */
    padding: 20px;  /* Espaciado interior */
    margin-top: 300px;
}

.estudioqueirolo{

    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    font-size: 20px;
    padding-top: 50px;
    overflow: hidden;
    width: 60%; 
    margin: 0 auto; 
    margin-bottom: 100px;
  
      
}


.fotoestudio{
    margin-bottom: 100px;
}

.botonesredes{

    flex-direction: column; 
    justify-content: center;
    align-items: center;
    margin-top: -600px;
    margin-left: 90px;
    width: 400px;
    line-height: 50px;
    font-size: 23px;
   
    font-weight: bold;
   position: absolute;
   
 }   
 
 .estamos{
    width: 400px;
    margin-bottom:20px ;
 }
 
 
 footer{
    background-image: url(imagenes2);
    
    background-size: cover;
   
   }




 footer p{
 
     font-size: 28px;
    
  
 
 }
 
 .redesespañol{
 
     display: flex;
 }
 
 .ig{
     list-style-type: none;
     list-style: none;
     text-decoration: none;
     color: black;
 }




 .todoform{
    margin-right: 00px;
    margin-top: 400px;
    position: relative;
  
}
 


form {
    padding: 50px 55px;
    box-shadow:  0 0 20px rgba(0,0,0,0.2);
    border-radius: 20px;
    text-align: center;
    width: 400px;

}    

.copy{
    font-size: 12px;
    width: 400px;
    margin-left: -50px;
    text-align: center;
}




}













@media (max-width: 430px) {

  header img {
    
        max-width: 100%; /* Ajusta la imagen al ancho del contenedor */
        height: auto; /* Ajusta la altura automáticamente para no deformarla */
         
       margin-left: 10px;
        
        max-width: 280px; /* Reduce el tamaño máximo a 300px */
        height: auto; /* Mantiene las proporciones */
        
    }
    

    
    div#Servicios.servicios{
        background-image: url(imagenes2/Captura\ de\ pantalla\ 2025-01-20\ 145319.png);
        
        background-size: cover;
       
       }
    



 .inicio {
        display: flex; 
        flex-direction: column;
        margin-right: 600px;
        margin-top: -5px;
        width: 100%;
        font-size: 17px;
        font-weight: bold;
    
       
        }
    
    
 .inicio a {
        text-decoration: none; 
        color:#085693;
        transition: box-shadow 0.3s ease, transform 0.3s ease;
        
    
        }
    
    
.inicio a:hover {
    color:#053b64;
        transform: scale(1.05); /* Aumenta ligeramente el tamaño del contenedor */
    
        }
    
    
 nav.inicio {
            display: flex;
            gap: 15px;
            margin-left: 20px;
        }
        
 nav.inicio a {
         text-decoration: none;
            font-weight: bold;
        }
        
    
        .subtitulo {
            width: 80%; 
            margin: 0 auto; 
            margin-bottom: 100px;
            text-align: center; 
            padding-top: 50px;
            font-size: 20px;
            
        }
        
/* Grid principal */
.grid-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* 4 columnas */
    gap: 20px; /* Espacio entre contenedores */
    justify-items: center;
    margin: 0 auto;
    max-width: 1200px; /* Ajusta al ancho deseado */
    
}

/* Estilo de cada contenedor */
.grid-container > div {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 16px;
    text-align: center;
    width: 80%; /* Para que se adapte al contenedor */
    max-width: 500px; /* Ancho máximo de cada tarjeta */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    
}



.logsubt{

    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    font-size: 20px;
    padding-top: 50px;
    overflow: hidden;
    width: 300px; 
    margin: 0 auto; 
  
      
}





.logistica-container{
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* 4 columnas */
    gap: 20px; /* Espacio entre contenedores */
    justify-items: center;
    margin: 0 auto;
    max-width: 1200px; /* Ajusta al ancho deseado */
    padding-top: 100px;
    
}

/* Estilo de cada contenedor */
.logistica-container> div {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 16px;
    text-align: center;
    width: 80%; /* Para que se adapte al contenedor */
    max-width: 500px; /* Ancho máximo de cada tarjeta */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    
}






.quienes{

    display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 50px;
      padding-top: 00px;
      overflow: hidden;
      
}




.quienessomos {
    display: flex;
    flex-direction: column;  /* Alinea los elementos en columna (h1, h4, img) */
    justify-content: center;  /* Centra los elementos verticalmente */
    align-items: center;  /* Centra los elementos horizontalmente */
    text-align: center;  /* Centra el texto */
    height: 100vh;  /* La sección ocupa toda la altura de la pantalla */
    padding: 20px;  /* Espaciado interior */
    margin-top: 300px;
}

.estudioqueirolo{

    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    font-size: 20px;
    padding-top: 50px;
    overflow: hidden;
    width: 60%; 
    margin: 0 auto; 
    margin-bottom: 100px;
  
      
}


.fotoestudio{
    margin-bottom: 100px;
}

.botonesredes{

    flex-direction: column; 
    justify-content: center;
    align-items: center;
    margin-top: -600px;
    margin-left: 90px;
    width: 400px;
    line-height: 50px;
    font-size: 23px;
   
    font-weight: bold;
   position: absolute;
   
 }   
 
 .estamos{
    width: 400px;
    margin-bottom:20px ;
 }
 
 
 footer{
    background-image: url(imagenes2);
    
    background-size: cover;
   
   }




 footer p{
 
     font-size: 28px;
    
  
 
 }
 
 .redesespañol{
 
     display: flex;
 }
 
 .ig{
     list-style-type: none;
     list-style: none;
     text-decoration: none;
     color: black;
 }




 .todoform{
    margin-right: 00px;
    margin-top: 400px;
    position: relative;
  
}
 


form {
    padding: 50px 55px;
    box-shadow:  0 0 20px rgba(0,0,0,0.2);
    border-radius: 20px;
    text-align: center;
    width: 400px;

}    

.copy{
    font-size: 12px;
    width: 400px;
    margin-left: -50px;
    text-align: center;
}


}




@media (max-width:390px){




    header img {
    
        max-width: 100%; /* Ajusta la imagen al ancho del contenedor */
        height: auto; /* Ajusta la altura automáticamente para no deformarla */
         
        margin-left:30px;
        
        max-width:200px; /* Reduce el tamaño máximo a 300px */
        height: auto; /* Mantiene las proporciones */
        
        
    
    }
    

    

    .quienessomos {
        display: flex;
        flex-direction: column;  /* Alinea los elementos en columna (h1, h4, img) */
        justify-content: center;  /* Centra los elementos verticalmente */
        align-items: center;  /* Centra los elementos horizontalmente */
        text-align: center;  /* Centra el texto */
        height: 100vh;  /* La sección ocupa toda la altura de la pantalla */
        padding: 20px;  /* Espaciado interior */
        margin-top: 400px;
    }
    


    
        .fotoestudio{
    margin-bottom: 200px;
}




    .botonesredes{

    flex-direction: column; 
    justify-content: center;
    align-items: center;
    margin-top: -600px;
    margin-left: 90px;
    width: 300px;
    line-height: 50px;
    font-size: 18px;
   
    font-weight: bold;
   position: absolute;
   
 }   
 
    .estamos{
    width: 300px;
    margin-bottom:20px ;
 }
 
 
    footer p{
 
     font-size: 24px;
    
  
 
 }
 




}


@media (max-width: 360px){




       
/* Grid principal */
.grid-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* 4 columnas */
    gap: 20px; /* Espacio entre contenedores */
    justify-items: center;
    margin: 0 auto;
    max-width: 1200px; /* Ajusta al ancho deseado */
    
}

/* Estilo de cada contenedor */
.grid-container > div {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 16px;
    text-align: center;
    width: 80%; /* Para que se adapte al contenedor */
    max-width: 500px; /* Ancho máximo de cada tarjeta */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    
}



/* Títulos */
.grid-container h4 {
    font-size: 1.5em;
    color: #085693;
    margin-bottom: 12px;
    font-size: 20px;
    text-align: center;
}    
  

/* Descripciones */
.grid-container p {
    font-size: 1.1em;
    color: #085693;
    line-height: 1.4;
    text-align: center;
}    



.grid-container img{

    width: 250px;


}


.logtitle{

    display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 50px;
      padding-top: 100px;
      overflow: hidden;
      color: #085693;
}



.logsubt{

    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    font-size: 20px;
    padding-top: 50px;
    overflow: hidden;
    width: 80%; 
    margin: 0 auto; 
  
      
}





.logistica-container{
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* 4 columnas */
    gap: 20px; /* Espacio entre contenedores */
    justify-items: center;
    margin: 0 auto;
    max-width: 1200px; /* Ajusta al ancho deseado */
    padding-top: 100px;
    
}

/* Estilo de cada contenedor */
.logistica-container> div {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 16px;
    text-align: center;
    width: 80%; /* Para que se adapte al contenedor */
    max-width: 500px; /* Ancho máximo de cada tarjeta */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    
}



/* Títulos */
.logistica-container h4 {
    font-size: 1.5em;
    color:#085693;
    margin-bottom: 12px;
    text-align: center;
}    

/* Imágenes */
.logistica-container img {
    
    
    border-radius: 4px;
    margin-bottom: 12px;
    width: 250px;
}    

/* Descripciones */
.logistica-container p {
    font-size: 1.1em;
    color: #085693;
    line-height: 1.4;
    text-align: center;
}    





.quienes{

    display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 48px;
      padding-top: 100px;
      overflow: hidden;
      color: #085693;
}



.estudioqueirolo{

    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    font-size: 20px;
    padding-top: 50px;
    overflow: hidden;
    width: 80%; 
    margin: 0 auto; 
    margin-bottom: 100px;
  
      
}

.copy{
    font-size: 12px;
    width: 300px;
    margin-left: -0px;
    text-align: center;
}

}