body{margin:0; font-family: "Montserrat", sans-serif; font-weight: 400; font-style: normal; font-size:16px; background:#F4F4F4}
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;}

.sp10{height: 10px}
.sp20{height: 20px}
.sp25{height: 25px}
.sp30{height: 30px}
.sp40{height: 40px}
.sp50{height: 50px}

.dib{display: inline-block}

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

.uphead{background:#272727}
    .uphead_in{max-width: 1200px; display: flex; align-items: center; gap: 8px; justify-content: center; margin:auto; color:#FFF}
    .upico{height: 24px; line-height: 24px; font-size:14px; padding: 15px 0}
    .separ{height: 34px; line-height: 34px; font-size:28px; padding: 6px 0 12px 0}

.uheader{background:#FFF}
.header{max-width: 1200px; padding: 0 10px; display: flex; gap: 16px; justify-content: flex-end; margin: auto}
.logo{margin-right: auto; width:216px; margin-top:20px}
.b_menu{height: 40px; line-height:40px; padding:0 15px;  border-radius:5px; color:#404040; font-weight: bold}
  .b_menu:hover{background:#FFAF15}
  a.bm {margin: 30px 0; color: inherit}


#menuBtn {height: 40px; line-height:40px; margin: 30px 0; padding: 0 15px; cursor: pointer; user-select: none}
#menuBtn:hover {background-color: #FFAF15}
.menu {position: fixed; top: 0; left: -250px; width: 250px; height: 100%; background-color: #333; padding-top: 30px; transition: 0.3s; overflow-x: hidden; z-index: 9999}
.menu a {padding: 10px 20px; display: block; color: white; text-decoration: none}
.menu a:hover {background-color: #575757}
.menu.open {left: 0}

/* INDEX */
.banner{background:url("img/bg.jpg") center center / cover no-repeat}
  .banner_cont{display: flex; justify-content: center; align-items: center; height: 300px; position: relative}
    .banner_text{text-align: center; margin: auto; color:#FFF}
      .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);}
.banner_down{height: 20px; background:#FFAF15}

.i_nos{max-width:1100px; background:#FFF; border-radius: 20px; display: flex; flex-wrap: wrap;  column-gap: 60px; text-align: justify; text-justify: inter-word; word-spacing: normal}
  .in_ti{font-size: clamp(1.5rem, 2.0vw, 2.0rem)}
  .in_ti2{font-size: clamp(1.2rem, 1.2vw, 1.2rem)}

/* EDIT1 */
.bien {display: flex; flex-wrap: wrap; gap: 30px}
.bies {background: #FFF; border-radius: 20px; padding: 40px 50px; text-align: justify; text-justify: inter-word;}
/* EDIT1 */

.i_serv{max-width:1160px; margin: 0 auto 50px auto; padding: 0 20px; display: flex; flex-wrap: wrap; gap: 30px}
  .i_item{height: 450px; border-radius: 20px; background-position: center; background-repeat: no-repeat; background-size: 100%; transition: background-size 0.5s ease; cursor: pointer}
    .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")}
    .in7{background-image:url("img/in7.jpg")}
    .in8{background-image:url("img/in8.jpg")}
    .in9{background-image:url("img/in9.jpg")}
    .in10{background-image:url("img/in10.jpg")}
    .in11{background-image:url("img/in11.jpg")}
    .in12{background-image:url("img/in12.jpg")}
  .it_t{padding: 25px 20px; height: 400px; display: flex; align-items: flex-end; color: #FFF; font-size: clamp(1.5rem, 2.0vw, 2.0rem); text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.3); border-radius: 20px}

.tite_index{padding: 0px 20px 10px 20px; text-align: center; font-size: clamp(1.3rem, 4vw, 1.8rem)}

.footer{background:#272727; 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}
   .copy{text-align: center; margin: 20px 0 0 0}
  .foot1{text-align: justify; hyphens: auto}
  .foot2, .foot3, .foot4{font-size:16px}
    .fo_se{color:#C0C0C0} .fo_se:hover{color:#FFAF15}

/* NOSOTROS */
.cont_noso{background:url("img/nosotros.jpg") center center / cover no-repeat}
.nos_texto{border-bottom: 3px solid #FFAF15}

/* SERVICIOS */
.cont_servi{background:url("img/servicios.jpg") center center / cover no-repeat}
.it_tx{padding: 25px 20px; height: 400px; color: #FFF; font-size: clamp(1.2rem, 1.3vw, 1.3rem); text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.7); border-radius: 20px}
.ittt{text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); font-size: 17px; line-height: .5}

/* GALERIA */
.cont_gale{background:url("img/galeria.jpg") center center / cover no-repeat}
.i_pic{border-radius: 20px; width: 100%}

.i_galy .i_pic {cursor: pointer; transition: transform 0.2s;}
.i_galy .i_pic:hover {transform: scale(1.03);}
body.no-scroll {overflow: hidden;}
.lightbox {display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.85); justify-content: center; align-items: center;}
.lightbox-content {position: relative; background: #fff; padding: 10px; border-radius: 8px; box-shadow: 0 0 30px rgba(255,255,255,0.3); max-width: 90vw; max-height: 90vh; overflow: hidden;}
.lightbox-content img {display: block; margin: auto; max-width: 100%; max-height: 80vh; border-radius: 4px;}
.close-btn {position: absolute; top: 40px; right: 40px; transform: translate(50%,-50%); width: 40px; height: 40px; border: none; border-radius: 50%; font-size: 20px; background: #fff; color: #000; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.3); transition: background 0.3s; z-index: 10;}
.close-btn:hover {background: #f44336; color: #fff;}

body.no-scroll-mix {overflow: hidden;}
.mix_lightbox {display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.85); justify-content: center; align-items: center;}
.mix_lightbox-content {position: relative; background: #fff; padding: 10px; border-radius: 8px; box-shadow: 0 0 30px rgba(255,255,255,0.3); max-width: 90vw; max-height: 90vh; overflow: hidden;}
.mix_lightbox-content img, .mix_lightbox-content video {display: block; margin: auto; max-width: 100%; max-height: 80vh; border-radius: 4px;}
.mix_close-btn {position: absolute; top: 40px; right: 40px; transform: translate(50%,-50%); width: 40px; height: 40px; border: none; border-radius: 50%; font-size: 20px; background: #fff; color: #000; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.3); transition: background 0.3s; z-index: 10;}
.mix_close-btn:hover {background: #f44336; color: #fff;}


/* CONTACTO */
.cont_contact{background:url("img/contacto.jpg") center center / cover no-repeat}
  .cont_in_contact{padding: 70px 20px; 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(0, 0, 0, 0.5)}

.padre_contenedor{max-width:1160px; padding: 0 20px}
.contenedor{padding: 30px 50px; background:#FFF; border-radius: 20px}
  .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: #FFAF15; cursor: pointer}


/* CHI */
@media (max-width: 699.99px) {
.dib2{display: none} .dib3{display: none}
.bannerz {height: 300px}
.i_nos{padding: 20px 30px}
.i_noste{width: 100%}
.i_item{width: calc(100%)}
.i_galy{width: calc(100%)}	
.foot1, .foot2, .foot3, .foot4{width: 100%}
.menul{display: none} .menux{display: inline-block}
.padre_contenedor{margin: 30px auto}
.formi{width: 100%}
	
.bienda {width: 100%}
.biendo{flex-direction: column}
}

/* MED */
@media (min-width: 700px) and (max-width: 1049.99px) {
.dib2{display: inline-block} .dib3{display: none}
.bannerz {height: 400px}
.i_nos{padding: 30px 50px}
.i_noste{width: 100%}
.i_item{width: calc((100% - 30px) / 2)}
.i_galy{width: calc((100% - 30px) / 2)}
.foot1, .foot2, .foot3, .foot4{width: 50%}
.menul{display: none} .menux{display: inline-block}
.padre_contenedor{margin: 40px auto}
.formi{width: 50%}
	
.bienda {width: 100%}	
.biendo{flex-direction: column}
}

/* MED2 */
@media (min-width: 1050px) and (max-width: 1439.99px) {
.dib2{display: inline-block} .dib3{display: inline-block}
.bannerz {height: 500px}
.i_nos{padding: 30px 50px}
.i_noste{width: calc(50% - 30px)}
.i_item{width: calc((100% - 60px) / 3)}
.i_galy{width: calc((100% - 60px) / 3)}
.foot1, .foot2, .foot3, .foot4{width: 25%}
.menul{display: inline-block} .menux{display: none}
.padre_contenedor{margin: 50px auto}
.formi{width: 50%}
	
.bienda {width: calc(50% - 15px)}
.biendo{}
}

/* GRA */
@media (min-width: 1440px) {
.dib2{display: inline-block} .dib3{display: inline-block}
.bannerz {height: 600px}
.i_nos{padding: 30px 50px}
.i_noste{width: calc(50% - 30px)}
.i_item{width: calc((100% - 60px) / 3)}
.i_galy{width: calc((100% - 60px) / 3)}
.foot1, .foot2, .foot3, .foot4{width: 25%}
.menul{display: inline-block} .menux{display: none}
.padre_contenedor{margin: 60px auto}
.formi{width: 50%}
	
.bienda {width: calc(50% - 15px)}
.biendo{}
}