*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
:root {
    --amarillo: #fdd43c;
    --azul:#00448e;
}
a {
    color: var(--amarillo);
}
h1 , h2, h3, h4 {
    color: var(--azul);
}
body {
    width: 100vw;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    color: rgb(37, 37, 37);
}
header {
    width: 90%;
    height: 35vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 20px;
}

header .menucell {
  display: none;
  z-index: +120;
}
header .portada {
 width: 40vw;
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100%;
 
 position: relative;

}
header .portada img {
    width: auto;
    height: 100%;
   
    
}

header .menu {
    display: flex;
    justify-content: end;
    align-items: center;
    height: 10vh;
    position: absolute;
    top: 35vh;
    z-index: +5;
    background-color: rgba(255, 255, 255, 0.698);
    width: 100%;
}
.menu .logocell {
  display: none;
}
.menu ul {
    list-style: none;
    display: flex;
    align-items: end;
    justify-content: end;
    flex-direction: row;
}
.menu ul span {
  display: none;
  cursor: pointer;
}
.menu ul li {
    margin: 10px;
}
.menu ul li a {
    text-decoration: none;
    text-transform: uppercase;
    color: var(--azul);
    transition: 0.3s ease;
    font-size: 14px;
    font-weight: bold;
}
.menu ul li a:hover {
 
    color: var(--amarillo);
}
@media (min-width: 800px) {
  .menu.fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
  }
}

.soluciones {
    margin-top: 10vh;
    width: 100%;
    height: 100vh;
    background-color: var(--azul);
    position: relative;
    display: flex;
    flex-direction: row;
    background-color: white;
    justify-content: center;
    align-items: center;

}
.soluciones .solucionfondo {
    width: 40vw;
    height: 100%;
    background-color: var(--azul);
}
.soluciones .soluciontexto {
    width: 40%;
    display: flex;
    flex-direction: column;
    height: 75%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 15%;
    background-color: white;
    justify-content: center;
    align-items: center;
    padding: 35px;

}
.soluciontexto h1 {
    font-size: 45px;
    margin: 15px;
}
.soluciontexto p {

    margin: 15px;
    line-height: 1.5;
}
.soluciones .soluciontexto div {
    display: flex;
    flex-direction: row;
   
}
.soluciones .soluciontexto div a{
    background-color:#fdd43c;
    color:#00448e;
    margin: 30px;
    font-size: 18px;
    padding: 15px;
    border-radius: 15px;
    text-decoration: none;
    text-transform: capitalize;
    font-weight: bold;
    transition: 0.3s ease;
}
.soluciones .soluciontexto div a:hover{
   transform: scale(1.05);
}

.soluciones .solucionimg {
    width: 60vw;
    height: 100%;
    overflow: hidden;
    padding-top: 30px ;
    padding-bottom: 30px;
}
.soluciones .solucionimg img {
    width: 100%;
    height: 100%;
    object-fit: cover;

}
.servicios{
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    background-image: url("img/fondo2.jpg");
    background-size: cover;
    margin-bottom: 50px;
    
}
.servicios .titulo {
    width: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    margin: 20px;
    margin-top: 200px;
    z-index: +1;
 }
 .servicios .titulo div{
    width: 100px;
    height: 4px;
   background-color: #fdd43c;
   margin: 2px;
 }
 .servicios .titulo p{
    font-size: 18px;
    font-weight: bold;
    color: white;
    margin: 2px;
 }
.servicios .over {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.802);
    position: absolute;
    
}

.servicios h2 {
    color: white;
    font-size: 45px;
    width: 100%;
    margin: 20px;
    margin-top: 10px;
    text-align: center;
    z-index: +1;
}
.servicios p {
    color: white;
  
    width: 100%;
    margin: 20px;
   
    text-align: center;
    z-index: +1;
}
.servicios .serviciogaleria {
 width: 90%;
 display: flex;
 justify-content: start;
 align-items: center;
 height: auto;
 flex-direction: row;
 flex-wrap: wrap;
 z-index: +1;
 margin-top: 20px;
 margin-bottom: 5px;
}
.servicios .serviciogaleria .serviciosarticulo {
    width: 400px;
    height: 150px;
    position: relative;
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    transition: 0.5s ease;
}
.servicios .serviciogaleria .serviciosarticulo:hover {
   transform: scale(1.05);
}
.serviciosarticulo .serviciosimg {
    width: 25%;
    aspect-ratio: 1/1;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    overflow: hidden;
    margin: 5px;
    background-color: #fdd43c;
}
.serviciosarticulo .serviciosimg img {
    width: 80%;
    height: auto;
    
    object-fit: cover;
    padding: 10px;
    object-fit: cover;
   
}
.serviciosarticulo .serviciostexto {
  height: 100%;
  width: 100%;
  
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  overflow: hidden;
  margin: 5px;
  
}
.serviciosarticulo .serviciostexto h3 {
 color: white;
 margin: 5px;
}
.serviciosarticulo .serviciostexto p {
    color: white;
    width: 100%;
    text-align: left;
    margin: 5px;
}
.serviciosarticulo .serviciostexto a {
    margin: 5px;
    margin-top: 10px;
    font-weight: bold;
   }
.serviciosarticulo .serviciostexto a img {
    width: 25px;
    height: auto;
    margin-left: 5px;
    animation: moverIzquierdaDerecha 1s infinite;
}
@keyframes moverIzquierdaDerecha {
    0% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(5px); /* Mueve a la derecha 10px */
    }
    100% {
      transform: translateX(0); /* Vuelve a la posición original */
    }
}  
#fila3 {
    margin-bottom: 50px;
}
.servicioanimation {
    width: 85%;
    height: auto;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: +5;
    display: flex;
    justify-content: end;
    align-items: center;
    flex-direction: row;
    background-color: #00448e;
    transform: translateY(50%);
    padding: 20px;
}
.servicioanimation .anima {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: 50%;
}
.servicioanimation .anima .servicioanimationinfo{
    min-width:  50%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}
.servicioanimation .anima .servicioanimationinfo span{
 color: white;
 font-weight: bold;
 font-size: 25px;
}

.servicioanimation .anima .servicioanimationinfo span::after{
    content: '+'; /* Agrega el signo + */
    color:#fdd43c; /* Color amarillo */
    margin-left: 2px; /* Espacio entre el número y el signo */
    font-size: inherit; /* Tamaño igual al del número */
    font-weight: inherit; /* Peso igual al del número */
}
.nosotros {
    width: 100%;
    height: 100vh;
    background-color: white;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    
    position: relative;
    padding: 10vh;
   
}
.nosotros .nosotrosimg {
    width: 50%;
    height: 100%;
    position: relative;
    z-index: +3;
   
}
.nosotros .nosotrosimg .img1{
   position: absolute;
   width: 80%;
   height: 100%;
   top: 0;
   right: 0;
}
.nosotros .nosotrosimg .img1 img{
    
    width: 100%;
    height: 100%;
    object-fit: cover;
   
 }
.nosotros .nosotrosimg .img2{
    position: absolute;
    width: 50%;
    height: 70%;
    top: 10%;
    left: 0;
    padding: 15px;
    background-color: white;
    z-index: +1;
 }
 .nosotros .nosotrosimg .img2 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: +1;
 }
 .nosotros .nosotrosimg span{
   position: absolute;
   bottom: 0;
   left: 0;
   padding: 10px;
   font-weight: bold;
   font-size: 50px;
   color: #00448e;
 }
 .nosotros .nosotrosimg span::after{
    content: '+'; /* Agrega el signo + */
    color:#fdd43c; /* Color amarillo */
    margin-left: 2px; /* Espacio entre el número y el signo */
    font-size: inherit; /* Tamaño igual al del número */
    font-weight: inherit; /* Peso igual al del número */
  }
 .nosotros .nosotrosimg .anima2 span{
    font-weight: bold;
    font-size: 50px;
    color:#fdd43c;
  }
 .nosotros .nosotrostexto {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    padding: 50px;
 }

 .nosotros .nosotrostexto .titulo {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    margin: 20px;
    
    padding: 0;
    position: relative;
   
 }
 .nosotros .nosotrostexto .titulo div{
    width: 50px;
    height: 4px;
   background-color: #fdd43c;
   margin-right: 5px;
 }
 .nosotros .nosotrostexto .titulo .p{
  width: 100%;;  
  font-size: 18px;
  background-color: rgba(0, 0, 0, 0);
   margin-left: 5px;
    height: auto;
    color: #00448e;
 }
 .nosotros .nosotrostexto h2{
    font-size: 35px;
    font-weight: bold;
    color: #00448e;
    margin-top: 20px;
 }
 .nosotros .nosotrostexto p{
    
    
    margin-top: 20px;
 }
 .nosotros .nosotrostexto .nosotrostabla{
    width: 100%;
    padding: 20px;
    height: 30%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
 }
 .nosotros .nosotrostexto .nosotrostabla .nosotrosesto{
    width: 100%;
    padding: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    margin: 10px;
 } 
 .nosotros .nosotrostexto .nosotrostabla .nosotrosesto div{
    width: 40%;
    aspect-ratio: 1/1;
    background-color: #fdd43c;
    border-radius: 50%;
    padding: 10px;
    margin: 15px;
 } 
 .nosotros .nosotrostexto .nosotrostabla .nosotrosesto div img{
    width: 100%;
    height: 100%;
    object-fit: cover;
 } 
 .testimonios {
    width: 100%;
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row; 
    overflow: hidden;
    background-image: url(img/testifondo.jpg);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}

.testimonios .testimoniofondo2 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.619);
    z-index: +1; 
   
}
.testimonios .testimonio1 {
    width: 50%;
    height: 100%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    z-index: +2;

}

.testimonios .testimonio1 .titulo {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 20px;
    
 }
 .testimonios .testimonio1 .titulo div{
    width: 50px;
    height: 4px;
   background-color: #fdd43c;
   margin-right: 5px;
 }
 .testimonios .testimonio1 .titulo p{
    font-size: 18px;
    font-weight: bold;
    color: white;
   
    height: 100%;
 }
 .testimonios .testimonio1 h2{
    font-size: 35px;
    width: 100%;
    text-align: start;
    color: white;
 }
 .testimonios .testimonio1 p{
  
    width: 100%;
    text-align: start;
    color: white;
    margin-top: 20px;
 }
 .testimonios .testimonio2 {
    width: 50%;
    height: 100%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: +2;
    position: relative;
}
.testimonios .testimonio2 .testimoniogaleria {
   width: 90%;
   height: 90%;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   overflow: hidden;
   position: relative;
   
   
}
.testimonios .testimonio2 .testimoniogaleria .testimonioindividual{
    position: absolute;
    top: 50%;
    left: 100%; /* Fuera de la vista inicialmente */
    opacity: 0; /* Oculto inicialmente */
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease-in-out; 
    transform: translate(0,-50%);
 }
 .testimonios .testimonio2 .testimoniogaleria .testimonioindividual.active {
    left: 0; /* Mover a la vista */
    transform: translate(0,-50%);
    opacity: 1; /* Mostrar el contenido */
  }
  
  .testimonios .testimonio2 .testimoniogaleria .testimonioindividual.prev {
    left: -100%; /* Elemento que ya pasó */
  }
  
  .testimonios .testimonio2 .testimoniogaleria .testimonioindividual.next {
    left: 100%; /* Elemento que aún no ha llegado */
  }
  .radio-buttons {
    display: flex;
    justify-content: center;
    margin-top: 15px;
  }
  
  .radio-buttons input[type="radio"] {
    display: none;
  }
  
  .radio-buttons label {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #ccc;
    margin: 0 5px;
    cursor: pointer;
    transition: 0.3s;
  }
  
  .radio-buttons input[type="radio"]:checked + label {
    background: #fdd43c;
  }
 .testimonios .testimonio2 .testimoniogaleria .testimonioindividual p{
    width: 100%;
    text-align: start;
    color: white;
    font-size: 22px;
    font-style: italic;
    margin-top: 20px;
    line-height: 1.5;
   
 }
 .testimonios .testimonio2 .testimoniogaleria .testimonioindividual .testimoniosperfil{
   display: flex;
   justify-content: start;
   align-items: center;
   flex-direction: row;
   width: 100%;
   height: 10%;
   margin-top: 20px;
 }
 .testimonios .testimonio2 .testimoniogaleria .testimonioindividual .testimoniosperfil img{
   width: 15%;
   aspect-ratio: 1/1;
   border-radius: 50%;
  }
  .testimonios .testimonio2 .testimoniogaleria .testimonioindividual .testimoniosperfil div{
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    width: 100%;
    height: 15%;
    position: relative;
    
  }
  .testimonios .testimonio2 .testimoniogaleria .testimonioindividual .testimoniosperfil div h4{

    width: 100%;
    height: 15%;
    text-align: start;
    margin-left: 20px;
    font-size: 20px;
    color:#fdd43c;
   
  }
  .testimonios .testimonio2 .testimoniogaleria .testimonioindividual .testimoniosperfil div p{

    width: 100%;
    height: 15%;
    text-align: start;
    margin-left: 20px;
    margin-top: 10px;
    font-size: 16px;
    font-style: normal;
  }
  .testimonios .testimonio2 .testimoniogaleria .testimonioindividual .testimoniosperfil div img{
   top: 50%;
   transform: translateY(-50%);
   right: 0;
   width: auto;
   aspect-ratio: 1/1;
   position: absolute;
  }
  .contactos {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    color: white;
    margin: 0; 
    position: relative;
    background-image: url(img/logo2.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    background-color: #0b1a64;
    background-attachment: fixed;  
  }
  .contactos .contactodirecto {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    z-index: +1;
  }

  .contactos .contactodirecto .contactodirectof1 {
    width: 90%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content:start;
    align-items: start;
    
  }
  .contactos .contactodirecto .contactodirectof1 .contactologo{
    width: 40%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: start;
    margin: 30px;
   
    
  }
  .contactos .contactodirecto .contactodirectof1 .contactologo img{
    width: 100%;
    height: auto;
    transition: 0.5s ease;
  }
  .contactos .contactodirecto .contactodirectof1 .contactologo img:hover{
    transform: scale(1.05);
    
    
  }
  .contactos .contactodirecto .contactodirectof1 .contactoredes{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    margin-left: 30px;
    
  }
  .contactos .contactodirecto .contactodirectof1 h3{
   color: white;
   margin: 0;
   font-weight: normal;

  }
  .contactos .contactodirecto .contactodirectof1 .linea{
    width: 50%;
    height: 4px;
    background-color: #fdd43c;

  }
  .contactos .contactodirecto .contactodirectof1 .redes{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: row;
    margin: 0;
    margin-top: 15px;
  
    
  }
  .contactos .contactodirecto .contactodirectof1 .redes a{
    width: 35px;
    height: 35px;
    position: relative;
    background-color: #fdd43c;
    border-radius: 50%;
    margin-right: 10px ;
  }
  .contactos .contactodirecto .contactodirectof1 .redes a:hover{
    background-color:#00448e; /* Fondo blanco al hacer hover */
    transform: scale(0.9); /* Reduce la escala ligeramente */
    border: 1px solid #fdd43c;
  }
  .contactos .contactodirecto .contactodirectof1 .redes a:hover img{
    filter: brightness(0) saturate(100%) invert(85%) sepia(70%) saturate(300%) hue-rotate(0deg); /* Cambia la imagen a amarillo */
  }
  .contactos .contactodirecto .contactodirectof1 .redes a img{
    width: 50%;
    aspect-ratio: 1/1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    filter: brightness(0) invert(15%) sepia(70%) saturate(1500%) hue-rotate(200deg); /* Convierte la imagen negra a azul */
   
  }
  .contactos .contactodirecto .contactodirectof2{
    width: 100%;
    height: 60%;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    

  }
  .contactos .contactodirecto .contactodirectof2 .contactoinfo{
    width: auto;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    
    transition: 0.3s ease;
    padding: 15px;
   
  }
  .contactos .contactodirecto .contactodirectof2 .contactoinfo:hover{
  transform: scale(1.02);   
  }
  .contactos .contactodirecto .contactodirectof2 .contactoinfo img{
    width: 35px;
    aspect-ratio: 1/1;
    background-color: #fdd43c;
    border-radius: 50%;
    padding: 5px;
    margin: 5px;
    
    
  }
  .contactos .contactodirecto .contactodirectof2 .contactoinfo div{
    width: auto;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    
  }
  .contactos .contactodirecto .contactodirectof2 .contactoinfo div h4{
   font-size: 18px;
   color: white;
   margin: 5px;
    
  }
  .contactos .contactodirecto .contactodirectof2 .contactoinfo div p{
    font-size: 16px;
    color: white;
    margin: 5px;
     
   }
  .contactos  .contactoindirecto {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 60%;
    height: 90%;
    z-index: +1;
}
form {
    width: 90%;
    margin: 0 auto;
  
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
form h3 {
    width: 100%;
    text-align: center;
    font-size: 22px;
    color: white;
}
form p {
    
    text-align: center;
    margin: 10px;
    width: 100%;
    font-size: 15px;

}

form label {
    display: block;
    margin-top: 10px;
    width: 100%;
    text-align: start;
}

form input, textarea, button {
    width: 100%;
    margin-top: 5px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

form button {
    background-color: #e8ebdb;
    color: black;
    border: none;
    cursor: pointer;
    margin-top: 15px;
    width: 30%;
}

form button:hover {
    background-color: #81a39c;
}
#consulta {
    height: 80px;
    
}
/* Estilo para el mensaje emergente */

.mensaje {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: white;
    color: black;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.mensaje button {
    margin-top: 15px;
    padding: 10px 20px;
    background-color:#81a39c;
    color: black;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.mensaje button:hover {
    background-color: #68847e;
}
.contactos .fondocontacto {
    background-color:#0b1a64e4;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  
}
footer{
    width: 100%;
    background-color: #0b1a64;
    color: white;
    display: flex;
    justify-content: end;
    align-items: center;
    padding: 10px;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #fdd43c;
}
footer p {
    font-size: 12px;
}
html {
  scroll-behavior: smooth;
}
.llamada {
  display: flex;
  position: fixed;
  bottom: 90px;
  right: 15px;
  width: 60px;
  height: 60px;
  border: 1px solid white;
  z-index: +10;
  background-color: rgba(255, 255, 255, 0.572);
  border-radius: 12px;
  box-shadow: 0px 0px 3px green;
  transition: 0.5s ease;
}
.llamada:hover {
  transform: scale(1.02);
}
.llamada img {
  width: 100%;
  height: 100%;
}
.whastappbutton {
  display: flex;
  position: fixed;
  bottom: 15px;
  right: 15px;
  width: 60px;
  height: 60px;
  border: 1px solid white;
  z-index: +10;
  background-color: rgba(255, 255, 255, 0.572);
  border-radius: 12px;
  box-shadow: 0px 0px 3px green;
  transition: 0.5s ease;
}
.whastappbutton:hover {
  transform: scale(1.02);
}
.whastappbutton img {
  width: 100%;
  height: 100%;
}
.flip-container {
  perspective: 1000px;
  width: 55px;
  height: 55px;
}

.flip-card {
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  position: relative;
}

.flip-front, .flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flip-front img, .flip-back img {
  width: 100%;
  height: auto;
}

.flip-back {
  transform: rotateY(180deg);
  
  flex-direction: column;
  font-size: 12px;
  text-align: center;
}

.flipped {
  transform: rotateY(180deg);
}
@media(max-width: 800px){

header .menucell {
  width: 45px;
  aspect-ratio: 1/1;
  position: fixed;
  top: 15px;
  right: 20px;
  display: flex;
  transition: 0.5s ease;
  background-color: #fdd43c;
  padding: 10px;
  border-radius: 50%;
  z-index: +12;
  justify-content: center;
  align-items: center;
}
header .menucell img {
  width: 100%;
  height: auto;

 
}
header .menucell:hover {
 transform: scale(1.05);
}
header .menu {
  display: none;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.386);
  align-items: start;
  justify-content: start;
  position: fixed;
  top: 0;
  left: 0;
  z-index: +120;
}
.menu ul span {
  display: block;
  color: #00448e;
  font-size: 35px;
  position: absolute;
  top: 2px;
  right: 20px;

}
.menu .logocell {
  display: block;
  width: 40%;
  height: auto;
  padding: 15px;
}
.menu ul {
  background-color: white;
  display: flex;
  align-items: start;
  justify-content: start;
  flex-direction: column;
  height: 100vh;
  width: 60vw;
  position: relative;
  transform: translateX(-60vw);
  opacity: 0;
  transition: 0.5s ease;
}
.soluciones .solucionfondo {
  width: 20vw;
  height: 100%;
  background-color: var(--azul);
}
.soluciones .soluciontexto {
  width: 90%;
  left: 50%;
  height: 70%;
  padding: 15px;
  transform: translate(-50%,-50%);
  background-color: rgba(255, 255, 255, 0.837);
 
}
.soluciones .solucionimg {
  width: 80vw;
  
}
.soluciontexto h1 {
  font-size: 35px;
  margin: 15px;
}
#fila3 {
  margin-bottom: 150px;
}
.servicios{

  margin-bottom: 100px;
  
}
.servicios h2{

  font-size: 35px;
  
}
.servicios .titulo {
  width: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  margin: 15px;
  margin-top: 50px;
  z-index: +1;
}
.servicioanimation {
  width: 90%;
  height: auto;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: +5;
  display: flex;
  justify-content: end;
  align-items: center;
  flex-direction: column;
  background-color: #00448e;
  transform: translateY(50%);
  padding: 10px;
}
.servicioanimation .anima {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
}
.servicioanimation .anima .servicioanimationinfo{
  width: 50%
 
}
.servicioanimation .anima .servicioanimationinfo span{
  margin: 10px;
  font-size: 18px;
 }
.servicioanimation .anima .servicioanimationinfo p{
  margin: 10px;
  font-size: 13px;
 }
.nosotros {
  width: 100%;
  height: auto;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  padding: 10px;
 
}
.nosotros .nosotrosimg {
  width: 100%;
  height: 50vh;
  position: relative;
  z-index: +3;
 
}
.nosotros .nosotrosimg .img2{
  position: absolute;
  width: 50%;
  height: 70%;
  top: 10%;
  left: 0;
  padding: 5px;
  background-color: white;
  z-index: +1;
}
.nosotros .nosotrosimg span{

  font-size: 35px;
  
}
.nosotros .nosotrostexto {
  width: 100%;
  height: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  padding: 10px;
}
.nosotros .nosotrostexto .titulo {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  margin: 15px;
  
  padding: 0;
  position: relative;
 
}
.nosotros .nosotrostexto h2{
  font-size: 25px;
  font-weight: bold;
  color: #00448e;
  margin-top: 10px;
}
.nosotros .nosotrostexto .nosotrostabla {
  width: 100%;
 
  padding: 10px;
  height: auto;
} 
.nosotros .nosotrostexto .nosotrostabla .nosotrosesto{
  width: 100%;
  
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  margin: 5px;
 
} 
.nosotros .nosotrostexto .nosotrostabla .nosotrosesto div{
  width: 40%;
 
} 
.nosotros .nosotrostexto .nosotrostabla .nosotrosesto h3{
  font-size: 18px;
 
} 
.nosotros .nosotrostexto .nosotrostabla .nosotrosesto p{
  font-size: 14px;
  margin-top: 10px;
} 
.testimonios {
  width: 100%;
  height: 80vh;
  flex-direction: column; 

}
.testimonios .testimonio1 {
  width: 100%;
  height: 40%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  z-index: +2;

}
.testimonios .testimonio2 {
  width: 100%;
  height: 60%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: +2;
  position: relative;
}
.contactos {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column-reverse;
  justify-content: start;
  align-items: start;
}
.contactos .contactodirecto {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: +1;
  margin-top: 50px;
  margin-bottom: 150px;
}
.contactos .contactodirecto .contactodirectof1 {
  width: 90%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  
}
.contactos .contactodirecto .contactodirectof1 .contactologo{
  width: 40%;

 
 
  
}
.contactos .contactodirecto .contactodirectof1 .contactologo img {
  width: 100%;
}
.contactos .contactoindirecto {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: +1;
  margin-top: 100px;
}
.contactos .contactodirecto .contactodirectof1 .contactoredes{
  width: 70%;
  display: flex;
  justify-content: end;
  align-items: start;
  flex-direction: column;

  
}
.contactos .contactodirecto .contactodirectof2 .contactoinfo div h4{
  font-size: 15px;
  color: white;
  margin: 5px;
   
 }
 .contactos .contactodirecto .contactodirectof2 .contactoinfo div p{
   font-size: 13px;
   color: white;
   margin: 5px;
    
  }
}