@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;600;700&display=swap');
*{
margin: 0;padding: 0;
box-sizing: border-box;

 }
 *,::after, ::before{
    box-sizing: border-box;
}
:root {
--theme-color: rgb(253, 249, 249);
--primary-color: #124f88;
--secundary-color:#FF451A;;
--text-color-inverse: white;
--text-color: black;
--navbar-shallow-color: #e5e5e5;
--menu-mobile-background-color: rgb(15, 15, 16);;
        }
html{
height: 100%;
}
.frasesHome{ width:70%; display:flex; justify-content: space-between;
  align-items: center; margin: 40px auto 60px auto; color: #E6E6F4; font-size: 22px; padding-top: 30px}
body{
padding: 0;
margin: 0;
box-sizing: border-box;
justify-content: center;
text-align: center;
align-items: center;
background-color: var(--theme-color);
font-family: 'Kanit', sans-serif;
overflow-x: hidden;
        }
        .container{
          width: 100%;
          max-width: 2000px;
          margin: 0 auto;
          padding: 0;
          margin: 0;
          align-items: center;
          text-align: center;
          justify-content: center;
          position: relative
          ;
          left: 0;
          top: 0;
        }
 /* Contenedor */

 .infoQS{
  display: grid;
  grid-template-columns: 30% 30% 40%;
  width: 80%;
  margin:0 auto ;
  background-color: #252570;
  color:#E6E6F4;
  padding-bottom: 40px;
 }

 .dosCol{
  display: grid;
  grid-template-columns: 50% 50%;
  margin: 10px 30px;
  border-top:3px dotted #4C5FA8;
  padding-top:20px ;
 }
 .dosCol p{ padding-right:30px; text-align:left; font-size:13px; }

 .doblecol{

  grid-column: 1/3;
 }

 .triplecol{
  grid-column:1/4;
 }

 .parteDer{ grid-column:3/4; grid-row:1/3 }

 .linea{border-top:3px solid #E6E6F4; }
 .txtqs{ background-color:#252570; padding:3px 40px; display: inline-block;
  position:relative;top:-25px;  font-size:25px; font-family: "Oxygen", system-ui; }

  .qspres{font-family: "Kanit", system-ui; font-size: 20px; text-align: left;
   padding: 10px 30px 20px 30px; }
  .iconosqs{
  width: 80%;

  margin:20px auto 0 auto;
  }
  .derechatxt{text-align: left; font-family: "Oxygen", system-ui; font-size:14px }
  .margintop{ margin-top:30px; }
  .naranja{color: #FF451A}
.columnas{
width: 100%;
max-width: 2000px;
display: block;
flex-flow: row wrap;
justify-content: center;
margin: 2px 0;
position: relative;}

.column{
flex: 1;
width: 100%;
        }
.column:first-child{
 margin-left: 0;
}
    /* Hero */
.hero{
margin: 0 auto;
justify-content: center;
text-align: center;
align-items: center;
background-image: url('img/FondoEntero.png');
background-position: 100%,100%;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
max-width: 1800px;




}

.image-container {
  position: relative;
  display: inline-block;
  text-align: right;
  width: 100%;

 
}

input {border:0px}

/* Imagen */
.image-container img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  left: 0.5%;

}
.titulo-pivot {
  width: 32%; padding: 50px 0 0px 0  ;
}
/* Botón detallado */
details {
  position: absolute;
  transform: translateY(-50%);
  padding: 20px 50px;
color: transparent;
  border: 2px solid transparent;
 
  cursor: pointer;
  font-size: 16px;
  background-image: url(queres\ saber\ mas\ img.jpg);
  background-repeat: no-repeat;
}

.detail-button:hover {
width: 80%;


  background-color: cornflowerblue;
  background-image: url(boton\ nd\ 2.png);
  background-position: center;
}
.dropdown {
  
  min-width: 360px;
  display: inline-block;
  transition: all 0.1s ease-in-out;
  text-align: left;
  text-align: left;
}

.dropdown-button {
background: #FF451A;
  color: white;
  padding: 2px 5px;
  font-size: 9px;
  letter-spacing: 1.3px;
  border: none;
  cursor: pointer;
  border-radius: 0px;
  min-width: 50px;
  }



.dropdown-content {
  display: none;
  position: absolute;
  background-color:#7070b6;
 
 max-width: 84%;
  min-width: 207px;
  
  z-index: 1;
left: 0%;
  color: #E6E6F4;
  padding:  3px;
  border-radius:4px ;
}

.dropdown-content a {
  color: black;
  padding: 12px 30px;
  text-decoration: none;
  display: block;
}



.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropdown-button {

}
.titulo-pivot img{
  width: 100%;
  position: relative;
}     
a{
text-decoration: none;
color: var(--text-color);
}
.topheader {

position: fixed;
background-color: var(--theme-color);
left: 0;
top: 0;
width: 100%;
 font-family: "Oxygen", system-ui;
z-index: 1000;
overflow-x: hidden;
}
.topnav {
display: flex;
justify-content: space-between;
padding: 10px;
max-width: 980px;
min-width: 320px;
margin: 0 auto;
        }
        
/* Logo */
        
.logo {
display: flex;
align-items: center;
font-size: 18px;
font-weight: 500;
color: var(--primary-color);
}
        
.logo img {
border-radius: 50%;
}
        
 /* Menu */
.menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
        
.menu li {
padding: 0 15px;
}
        
.menu a {
color:#4C5FA8;
font-size: 14px;
font-weight: bold;
line-height: 50px;

position: relative;
letter-spacing: 1px;
text-transform: uppercase;
}
      
.menu a::after{
content: "";
background-color: var(--secundary-color);
position: absolute;
left: 0;
top: calc(100% + 4px);
width: 100%;
height: 4px;
opacity: 0;
transition: opacity 0.3s;
}
        
.menu a.selected::after,
.menu a:hover::after {
opacity: 0.8;
}


.open-menu,
.close-menu {
display: none;
}
        
.logotype {
display: flex;
justify-content: center;
}
.close-menu{
  width: 15%;
}        
@media (max-width: 992px)  {
         
          /* Menu */
.menu {
flex-direction: column;
position: fixed;
left: 0;
top: 0;
width: 100%;
align-items: center;
background-image: linear-gradient(rgba(5,7,12, 0.75), rgba(5,7,12, 0.75));
padding: 5px 30px;
height: 100%;
overflow-y: auto;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
         
        
.menu li {
padding: 0;
}
        
.menu a {
color: var(--text-color-inverse);
line-height: 70px;
font-size: 15px;
}
        
.icon-social{margin-top: -15px !important}

.open-menu,
.close-menu {
display: block;
border: none;
background: none;
cursor: pointer;
}
        
.close-menu {
align-self: flex-end;
padding: 10px 15px;
}
        
.menu_opened {
 opacity: 1;
 pointer-events: all;
}
        
.open-menu:focus:not(:focus-visible),
.close-menu:focus:not(:focus-visible) {
outline: none;
}
        
.menu a::after {
 content: none;
}
        
.menu a:hover,
.menu a.selected {
 color: var(--secundary-color);
}

}


.servicios{

 
  text-align: center;
position: relative;

  margin-bottom: 10px;
  letter-spacing: 1.5px;
  font-size: 27px;
text-transform: uppercase;
  position: relative;
  top: 10px;

  margin: 1rem auto;
color: #252570;



}  
.section-accordion{
width: 100%;
min-width:320px;
max-width:1500px;
flex-wrap: wrap;
flex-flow: wrap;
margin: 0 auto;
justify-content:initial;
text-align: left;
margin-bottom: 50px ;
overflow-x: hidden;
padding: 2rem;


        
}
/* Accordion*/
.accordion {
width: 90%;
max-width: 800px;
margin: 2rem auto;

        }
.accordion-item {
background-color: #fff;
color: #111;
margin: 1rem 0;
border-radius: 0.5rem;

        }
.accordion-item-header {
padding: 0.5rem 3rem 0.5rem 1rem;
min-height: 3.5rem;
line-height: 1.2rem;
font-weight: bold;
display: flex;
align-items: center;
position: relative;
font-size: 18px;
cursor: pointer;
        }

        
.accordion-item-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
        }
.accordion-item-body-content {
padding: 1rem;
line-height: 1.3rem;
border-top: 1px solid;
border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
        }
   /* Wrapper */         
.wrapper{
width: 100%;

background-image: url('f_formu.png');
overflow-x: hidden;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-position: 100%,100%;
padding: 20px;

}


.title{
position: relative;
text-align: left;
top: 20px;
left: 9%;
color: #e5e5e5;
letter-spacing: 1px;

}
.contacto{
  letter-spacing: 1.7px;
  margin-bottom: 20px;
  font-size: 24px;
}

.contact-form{
display: flex;
position: relative;
left: 1%;

}

.input-fields{
display: flex;
flex-direction: column;
margin-right: 4%;
width: 90%;
}
.input-fields{
float: right;
}
.input-fields,
.msg{
width: 40%;

}
.input-fields{
  margin-top: -40px;
}
.input-fields .input,
.msg textarea{
margin: 10px 0;
background: transparent;
border-bottom: 2px solid #c5ecfd;
background-color: #E6E6F4;
color: #080808;
width: 100%;
height: 35px;
resize: none;
}

.msg textarea{
height: 250px;
border-radius: 10px;
margin-left: 20px;
position: relative;
left: 10%;
padding:10px;
border:0;
}

textarea::placeholder{
color: #252570;
font-size: 18px;
font-weight: bold;
text-align: left;
margin-left: 20px;
font-family: 'Kanit', sans-serif;
}


input{
height: 100px;
position: relative;
left: 58%;
top: -10px;
border-radius: px;
border-radius: 4px;


}
input::placeholder{
font-size: 10px;
color: #252570;
font-weight: bold;
text-align: center;
opacity: 0;
letter-spacing: 1px;
}

label{
width: 100%;
position: relative;
left: 15%;
top: 23px;
font-size: 14px;
color: #E6E6F4;
font-weight: bold;
text-transform: uppercase;
line-height: 10px;
 
}
hr{
width: 92%;
position: relative;
left: 15%;
margin-top: -7px;
margin-bottom: -7px;
color: #818189;
}
.btn {
width: 20%;
background:#FF451A;;
text-align: center;
padding:1em;
border-radius: 5px;
color: #fff;
cursor: pointer;
text-transform: uppercase;
text-align: center;
position: relative;
left: 80%;
margin-right: 100px;
transition: all 0.2s ease-in-out;
margin-bottom: 100px;

transition: all 0.1s ease-in-out;
}

.nuestroDir{background-color:#4C5FA8; color: #E6E6F4; font-size: 13px; text-align: center;
  margin-bottom: 20px; visibility: hidden;
}

.btn:hover{
background-color: #E6E6F4;
color:#FF451A; 

font-weight: bold;
}
footer{
width: 100%;

min-width: 100px;
overflow-x: hidden;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-position: 100%,100%;
padding: 1rem;

}


/* Estilo para pantallas pequeñas */
@media (max-width: 768px) {
  .container {
      padding: 0px; /* Menos espaciado interno en pantallas pequeñas */
  }
}

/* Estilo para pantallas muy pequeñas */
@media (max-width: 480px) {
  .container {
      padding: 0px; /* Aún menos espaciado interno */
  }
}
@media screen and (max-width:1024px){
  .hero{
    padding: 0;
  }
  .icon-social{
    display: none;
  }
  .wrapper{
    padding: 0px;
  }
  label{
    font-size: 15px;
  }

}


@media screen and (max-width:950px){
.wrapper{
  padding: 0;
}
.section-accordion{
font-size: 80%;
}

.title{
  font-size: 90%;
left: 10%;
}
.input-fields{
width: 45%;
}
label
{
font-size: 12px;
}
textarea::placeholder{
font-size: 15px;
}
.btn{
width: 21%;
font-size: 10px;
}
.icon-social{
  display: none;
}
@media screen and (max-width:900px){
  .section-accordion{
      font-size: 80%;
  }
  label
  {
  font-size: 11px;
  }
  .icon-social{
    display: none;
  }
  .title{
    font-size: 90%;
  left: 10%;
  }

  }

}
@media screen and (max-width:890px){
  .wrapper{
    padding: 30px;

  }
  .contact-form{
    flex-direction: row;
  }
  .input-fields{
width: 75%;

}
.msg{
  width: 70%;
  margin-top: 15px;
}
.title{
  font-size: 90%;
left: 20%;
}
.p-footer{
  font-size: 12px;
  position: relative;
  top: -4px;
}
.icon-social{
  display: none;
}
label{
  font-size: 13px;
}
}
@media screen and (max-width:870px){
  .wrapper{
    padding: 20px;

  }
  .contact-form{
    flex-direction: row;
  }
  .input-fields{
width: 75%;

}
.msg{
  width: 70%;
  margin-top: 15px;
}
.title{
  font-size: 90%;
left: 15%;
}
.p-footer{
  font-size: 12px;
  position: relative;
  top: -4px;
}
.icon-social{
  display: none;
}
label{
  font-size: 13px;
}
.wrapper{
  padding: 40px;
  }
  .dropdown{
    
  }
    


}
@media screen and (max-width:800px){
  .hero{
   padding: 0;
   background-size: contain;
   background-color:#252570 ;
   background-position: top left;
  }

.doblecol{

  grid-column: 1/4;
 }

 .triplecol{
  grid-column:1/4;
 }

 .contIconos{
  grid-column:1/4;
 }

 .parteDer{ grid-column:1/4; grid-row:1/3 }


 .titulo-pivot img{
   width: 100%;
  margin-top: 30px;
 }
   .rectangulo{
     opacity: 0;
 
   }

   .quienessomos{
  display: none;
   }
 .wrapper{
 padding: 40px;
 background-image: url('f_formu.png');
 }
   .title {
     position: relative;
     left: 20%;
 
   }
 .contact-form{ flex-direction: column;

   padding: 0px;
 }
 .input-fields{
   width: 70%;
   position: relative;
   left: 8%;
   }
   .msg textarea{
     height: 150px;
     border-radius: 10px;
     margin-left: 20px;
    
     position: relative;
     left: 49%;
 
     margin-top: 20px;
     }
     label{
       font-size: 12px;
     }
 .input-fields{
   margin-top: -40px;
 }
 .input-fields .input,
 .msg textarea{
 
 background: transparent;
 border-bottom: 2px solid #c5ecfd;
 background-color: #E6E6F4;
 color: #080808;
 
 
 resize: none;
 }
 .msg{
   width: 65%;
   position: relative;
   left: -17%;
 }
 .contenedortitulo-pivot img{
   width: 70%;
  
 }
 .frasesHome {
    width: 90%;   
    font-size: 18px;

   
}
 .btn{
  left: 95%;
 }
 .dropdown{
  
}
  
  
}
@media screen and (max-width:750px){
  .hero{
   padding: 0;
  }
 .titulo-pivot img{
   width: 100%;
  margin-top: 50px;
 }
   .rectangulo{
     opacity: 0;
 
   }

   .quienessomos{
  display: none;
   }
 .wrapper{
 padding: 40px;
 }
   .title {
     position: relative;
     left: 20%;
 
   }
 .contact-form{ flex-direction: column;

   padding: 0px;
 }
 .input-fields{
   width: 70%;
   position: relative;
   left: 8%;
   }
   .msg textarea{
     height: 150px;
     border-radius: 10px;
     margin-left: 20px;
     
     position: relative;
     left: 49%;
 
     margin-top: 20px;
     }
     label{
       font-size: 12px;
     }
 .input-fields{
   margin-top: -40px;
 }
 .input-fields .input,
 .msg textarea{
 
 background: transparent;
 border-bottom: 2px solid #c5ecfd;
 background-color: #E6E6F4;
 color: #080808;
 
 
 resize: none;
 }
 .msg{
   width: 65%;
   position: relative;
   left: -17%;
 }
 .contenedortitulo-pivot img{
   width: 100%;
  
 }
 .btn{
  left: 95%;
 }
 
  
  
}
@media screen and (max-width:700px){


  .frasesHome {
    width: 100%;
    flex-direction: column;
    font-size: 15px;
    padding-top: 30px;
}

.frasesHome span{
  display:inline-block;
  margin-bottom: 10px;
}

.infoQS {
width: 90%;
}


 .hero{
  padding: 0;
 }
.titulo-pivot img{
  width: 100%;
 margin-top: 50px;
}
  .rectangulo{
    opacity: 0;

  }

  .quienessomos{
 display: none;
  }
.wrapper{
padding: 60px;
}
  .title {
    position: relative;
    left: 8%;

  }
.contact-form{ flex-direction: column;
  margin-left: -80px;
  padding: 30px;
}
.input-fields{
  width: 70%;
  position: relative;
  left: 10%;
  }
  .msg textarea{
    height: 150px;
    border-radius: 10px;
    margin-left: 20px;

    position: relative;
    left: 50%;

    margin-top: 20px;
    }
    label{
      font-size: 12px;
    }
.input-fields{
  margin-top: -40px;
}
.input-fields .input,
.msg textarea{

background: transparent;
border:0;
border-radius: 0;
background-color: #E6E6F4;
color: #080808;


resize: none;
}
.msg{
  width: 65%;
  position: relative;
  left: -15%;
}
.contenedortitulo-pivot img{
  width: 70%;
 
}

  

  }

  @media screen and (max-width:678px){
    .title{
    left: 17%;
     padding: 0;
    }
     .wrapper{
       padding: 20px;
     }
     .contact-form{
       padding: 0px;
       margin-left: -40px;
   
     }
     .input-fields
     {
     width: 100%;
     position: relative;
     left: 8%;
     
     }
     .msg{
       width: 80%;
       left: -22%;
     }
   .titulo-pivot img{
     width: 90%;
    margin-top: 50px;
   }
     .rectangulo{
       opacity: 0;
   
     }
     
     .quienessomos{
    display: none;
     }
     
     
   }
@media screen and (max-width:690px){
 .title{
 left: 17%;
  padding: 0;
 }
  .wrapper{
    padding: 20px;
  }
  .contact-form{
    padding: 0px;
    margin-left: -40px;

  }
  .input-fields
  {
  width: 100%;
  position: relative;
  left: 8%;
  
  }
  .msg{
    width: 80%;
    left: -22%;
  }
.titulo-pivot img{
  width: 90%;
 margin-top: 50px;
}
  .rectangulo{
    opacity: 0;

  }
  
  .quienessomos{
 display: none;
  }
  
  
}
@media screen and (max-width:600px){
  .hero{
    padding: 0px;
  }
 
.image-container img{

box-shadow: none;
}
  form{
    padding: 10px;
  }
  .wrapper{
    padding: 10px;
  }
  .title{
    left: 10%;
  }
  .contact-form{
    padding: 10px;
    left: 0%;
  }
  .input-fields
  {
  width: 100%;
  position: relative;
  left: 0%;
  
  }
  .msg{
    width: 100%;
    left: -40%;
  }
.titulo-pivot img{
  width: 100%;
  position: relative;
margin-top: 230px;


}
  .rectangulo{
    opacity: 0;

  }

  .quienessomos{
 display: none;
  }
  .btn{
    left: 90%;
  }

.derechos{

  font-size: 8px;
  display: flex;
}


}

.fondoEntero{ background-image:url('img/FondoEntero'); background-size:cover; }

.img-correo {
  display: block;
  max-width: 320px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
ul {
  max-width: 100%;
  justify-content: center;
  align-items: center;
}

footer img.img-correo {
  max-width: 320px !important;
  width: 100% !important;
  height: auto !important;
}