body{margin:0; font-family:"Open Sans", sans-serif; font-weight:400; font-style:normal; font-size:16px; background:#ACBFBF}
a:link, a:visited, a:hover, a:active, a:focus{text-decoration:none}
img{display:block}

input:focus, textarea:focus, select:focus {border:1px solid black;
  outline:none}

hr {background-color: #7095AF; height: 1px; margin: 30px 0 30px 0; border: 0}

  ul, ol {padding-left: 1.5em;  margin-bottom: 1em}
  ul {list-style-type: disc}
  ol { list-style-type: decimal}
  li {margin-bottom: 0.5em}

.sp5{height:5px}.sp10{height:10px} .sp20{height:20px} .sp30{height:30px} .sp40{height:40px} .sp50{height:50px}
.just{text-align: justify; text-justify: inter-character;}
.w100{width:100%}
.box{max-width:1100px; margin:auto; padding:10px 20px; box-sizing:border-box}
.nostyle{list-style: none}

.sticky{position: sticky; top: 0; z-index: 668;
 box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.75)}

.dib{display:inline-block}

.material-symbols-outlined {font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; font-size:24px}

/* HEAD */
.head{background:#B9CCCC}
.co_head{height:95px; box-sizing:content-box; display:flex; justify-content:flex-end; gap:5px}
    .logo{height:70px; width:200px; margin-right:auto}
    .mate{display:inline-block}
        .mso_y{margin:0 0 0 0}
        .mso_t{padding:5px 0 0 0}
    .cotiza{display:inline-block; height:40px; line-height:40px; padding:0 20px; margin:15px 0; background:#040C17; color:#FFF; border-radius:6px}
    .cotiza:hover{background:#1154A0}

.datas{display:inline-block; height:60px; margin:7px 10px 0 0}

#menuBtn {height: 50px; line-height:50px; font-size: 20px; margin: 10px 0; padding: 0 15px; cursor: pointer; user-select: none}
#menuBtn:hover {background-color: #040C17;  color: #FFF}
.menu2 {position: fixed; top: 0; left: -250px; width: 250px; height: 100%; background-color: #040C17; padding-top: 30px; transition: 0.3s; overflow-x: hidden; z-index: 9999}
.menu2 a {display: block; color: white; text-decoration: none}
.menu2 a:hover {background-color: #1C63B8}
.menu2.open {left: 0}
.co_head2{height:70px; box-sizing:content-box; display:flex; justify-content:flex-end; gap:8px}

/* MENU */
.co_menu{padding: 0 20px; margin: -25px 0 -25px 0; position: relative; z-index: 999}
    .menu{max-width:1200px; height:50px; margin:auto; padding:0px 50px; box-sizing:border-box; background:#040C17; border-radius:6px; display:flex}
        .b_menu, .b_menux{display:flex; height:30px; padding: 10px 15px; color: #FFF; background:#040C17; font-size: 14px; gap: 5px}
        .b_menu:hover{background:#1C63B8}
        .b_menux:hover{background:#040C17}
        .b_menu2{background:#1C63B8}
        .t_main{display:inline-block; height: 30px; line-height: 30px} 
        .t_m_i{margin: 3px 0 0 0}

         .c_menu{display:flex; height:30px; padding: 5px 0; color: #FFF; font-size: 13px;  gap: 5px}
         .c_menu:hover{color:#51DBDB}
        

.submenu-container {position: relative; display: inline-block}
.submenu-container .b_menu {cursor: pointer}
.submenu {display: none; position: absolute; top: 50px; left: 0; background: #040C17; border-radius: 0 0 6px 6px; min-width: 160px;  box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.75); z-index: 999; flex-direction: column;}
.submenu a {display: block; color:#FFF; text-decoration: none; font-size: 14px}
.submenu-container:hover .submenu {display: flex}

.sp_me{display:inline-block; height: 30px; width: 20px}

/* BANNER */
.co_banner {background: url("img/bg.jpg") center center / cover no-repeat; position: relative; overflow: hidden}

.banner {display: flex; justify-content: center; align-items: center; position: relative}
.banner_text {text-align: center; margin: auto; color: #FFF; z-index: 2; position: relative}
.bt1 {font-size: clamp(0.5rem, 3vw, 1.5rem)}
.bt2 {font-size: clamp(1rem, 5.5vw, 4rem); font-weight: bold}
.bt1, .bt2 {text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5)}

/* Nubes animadas */
.clouds {position: absolute; top: 0; left: 0; height: 100%; width: 200%; background: url("img/cloud.png") repeat-x; background-size: cover; animation: moverNubes 90s linear infinite; opacity: 0.4; z-index: 1}

.banner_down{height: 20px; background:#040C17}

.banner_ho{background:#040C17}

/* INDEX */

.i_nos{background-color: rgba(255, 255, 255, 0.5); border-radius: 10px; display: flex; flex-wrap: wrap; column-gap: 60px}
  .in_ti{font-size: clamp(1.5rem, 2.0vw, 2.0rem); color: #004080}
  .in_ti2{font-size: clamp(1rem, 1.2vw, 1.2rem); color: #004080}
  .in_ti3{font-size: clamp(1.1rem, 1.3vw, 1.3rem); color:#004080; font-weight: bold; text-align: left}

  .bolo{font-weight: bold}


 .title-line {display: flex; align-items: center; gap: 0.3rem}

.i_serv{max-width:1100px; margin: auto; display: flex; flex-wrap: wrap; gap: 30px}
  .i_item{height: 250px; border-radius: 10px; background-position: center; background-repeat: no-repeat; background-size: 100%; transition: background-size 0.5s ease; display: flex; align-items: flex-end;
box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.3)}
    .i_item:hover {background-size: 120%;}
    .in1{background-image:url("img/in1.jpg")}
    .in2{background-image:url("img/in2.jpg")}
    .in3{background-image:url("img/in3.jpg")}
    .in4{background-image:url("img/in4.jpg")}
    .in5{background-image:url("img/in5.jpg")}
    .in6{background-image:url("img/in6.jpg")}
  .it_t{margin:0 0 20px 0; width:100%; padding: 10px 20px; display: flex; color: #FFF; background-color: rgba(0, 0, 0, 0.8); font-size: clamp(1.0rem, 1.3vw, 1.3rem)}

.separa{width: 100%; height: 2px; background: #CCCCCC}
.separa2{width: 200px; margin: auto; height: 4px; background: #004080}

.wtit{padding: 30px; font-size: clamp(1.5rem, 3vw, 2rem); text-align: center; color: #004080}




/* CONTACTO */
.contenedor{background-color: rgba(255, 255, 255, 0.5); border-radius: 10px; text-align: justify; text-justify: inter-character;}
.contenedor2{background-color: rgba(255, 255, 255, 0.5); border-radius: 10px}
  .formu{display: flex; flex-wrap: wrap}
    .formi, .formi2{font-size: 20px; font-weight: bold}
      .formi2{width: 100%}
      .form_for{width: calc(100% - 20px); padding: 10px 15px;; margin: 0 0 20px 0; box-sizing: border-box; background: #F5F7F6; color: #999; font-size: 16px; border: 1px solid #DBDBDB}
    .formu_but{padding:15px;  border-radius:5px; color:#404040; font-weight: bold; border: 0}
      .formu_but:hover {background-color: #14467F; cursor: pointer; color: #FFF}

.cont_contact{background:#14467F}
  .ccbg{background-position: center; background-size: cover; background-repeat: no-repeat}
    .ccbg1 { background-image: url("img/pg1.jpg")}
    .ccbg2 { background-image: url("img/pg2.jpg")}
    .ccbg3 { background-image: url("img/pg3.jpg")}
    .ccbg4 { background-image: url("img/pg4.jpg")}
    .ccbg5 { background-image: url("img/pg5.jpg")}
    .ccbg6 { background-image: url("img/pg6.jpg")}
    .ccbg7 { background-image: url("img/pg7.jpg")}
    .ccbg8 { background-image: url("img/pg8.jpg")}
    .ccbg9 { background-image: url("img/pg9.jpg")}
    .ccbg10 { background-image: url("img/pg10.jpg")}

  .cont_in_contact{text-align: center; color: #FFF;  font-size: clamp(2rem, 5vw, 3rem); text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); background-color: rgba(10, 10, 50, 0.5)}

/* SERVICIOS */
.nos_texto {border-bottom: 3px solid #1C63B8}

.conto {width: 100%; height: 800px; overflow-y: auto}
.conto img {width: 100%; height: auto; display: block}


/* FOOTER */

.footer{background:#040C17; padding: 20px; color:#C0C0C0}
  .foot{max-width: 1220px; padding: 0 10px; margin: auto; display: flex; flex-wrap: wrap}
  .foot > div {box-sizing: border-box;padding: 20px}
     .fe_te{max-width: 260px}
   .copy{text-align: center; margin: 20px 0 0 0}
  .foot1{text-align: justify; overflow-wrap: break-word}
  .foot2, .foot3, .foot4{font-size:16px}
    .fo_se{color:#C0C0C0} .fo_se:hover{color:#51DBDB}



/* GAL*/
.gallery {display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px}
.gallery img {width: 100%; max-height: 160px; border-radius: 6px; object-fit: cover; transition: transform .2s ease}
.gallery img:hover {transform: scale(1.05)}

@keyframes moverNubes {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* CHI */
@media (max-width:699.99px) {
.menul{display: none} .menux{display: inline}
.bannerz {height: 300px}
.i_nos{padding: 20px 30px}
.i_noste{width: 100%}
	.inaco{margin: 20px 0 0 0}
.i_serv a {width: 100%; text-decoration: none; display: block}
.formi{width: 100%}
.pdoc{padding: 20px 30px; margin: 0 0 10px}
.banner_hodin{height: 10px}
.foot1, .foot2, .foot3, .foot4{width: 100%}
.supra{padding: 50px 20px 50px 20px}
}

/* MED */
@media (min-width:700px) and (max-width:1129.99px) {
.menul{display: none} .menux{display: inline}
.bannerz {height: 400px}
.i_nos{padding: 30px 50px}
.i_noste{width: 100%}
	.inaco{margin: 20px 0 0 0}
.i_serv a {width: calc((100% - 30px) / 2); text-decoration: none; display: block}
.formi{width: 50%}
.pdoc{padding: 20px 40px; margin: 0 0 20px}
.banner_hodin{height: 15px}
.foot1, .foot2, .foot3, .foot4{width: 50%}
.supra{padding: 50px 20px 50px 20px}
}

/* MED2 */
@media (min-width:1130px) and (max-width:1439.99px) {
.menul{display: inline} .menux{display: none}
.bannerz {height: 500px}
.i_nos{padding: 30px 50px}
.i_noste{width: calc(50% - 30px)}
	.inaco{margin: 20px 0 0 0}
.i_serv a {width: calc((100% - 60px) / 3); text-decoration: none; display: block}
.formi{width: 50%}
.pdoc{padding: 30px 50px; margin: 0 0 20px}
.banner_hodin{height: 20px}
.foot1, .foot2, .foot3, .foot4{width: 25%}
.supra{padding: 70px 20px 50px 20px}
}

/* GRA */
@media (min-width:1440px) {
.menul{display: inline} .menux{display: none}
.bannerz{height: 600px}
.i_nos{padding: 30px 50px}
.i_noste{width: calc(50% - 30px)}
	.inaco{margin: 0}
.i_serv a {width: calc((100% - 60px) / 3); text-decoration: none; display: block}
.formi{width: 50%}
.pdoc{padding: 30px 50px; margin: 0 0 20px}
.banner_hodin{height: 20px}
.foot1, .foot2, .foot3, .foot4{width: 25%}
.supra{padding: 90px 20px 70px 20px}
}