@font-face {

  font-family: Poppins;

  src: url('../fuentes/Poppins-Regular.ttf') format(truetype);

  font-style: normal;

  font-weight: 400;

}

@font-face {

  font-family: Ubuntu;

  src: url('../fuentes/Ubuntu-Bold.ttf') format(truetype);

  font-style:normal;

  font-weight: 700;

}

@font-face {

  font-family: Glory-ExtraLight;

  src: url('../fuentes/Glory-ExtraLight.ttf') format(truetype);

  font-style: normal;

  font-weight: 200;

}

/*Variables*/

:root{

  /*Fuente*/

  --fuentePrincipal:'Poppins', sans-serif;

  --fuenteTituloFooter: 'Ubuntu', sans-serif;

  --fuenteEnlacesFooter: 'Glory-ExtraLight', sans-serif;

  /*Color*/

  --negro: #000000;

  --grisnegro:#2b2b2b;

  --negrotransparente:rgba(0, 0, 0, 0.8);

  --blanco:#ffffff;



}

/*Estilos Globales*/ 

div, h1, h2, h3, li, p, span, a, label, input, button {

  font-family: var(--fuentePrincipal);

}

hr {
    overflow: hidden;
    padding: 10px;
    border-width: 0;
}

.navbar {

  /* make it stick */

  position: sticky;

  position: -webkit-sticky;

  top: 0;

  /* in front of all other elements */

  z-index: 99;

  /* set background */

  background-color: white;

  padding: 10px 5%;

  

  /* define flex */

  display: flex;

  justify-content: space-between;

  align-items: center;

  }

  

  .logo-image {

  display: block;

  height: 48px

  }

  

  .nav-menu {

  margin: 0;

  padding: 0;

  list-style-type: none;

  list-style-image: none;

  }

  

  .menu-item {

  display: inline-block;

  margin-left: 10px;

  }

  .menu-item a{

    text-decoration: none;

    font-family: 'Ubuntu', sans-serif;

    text-transform: uppercase;

    font-weight: 700;

    color: var(--negro);

  }



  .bar {

    width: 20px;

    height: 3px;

    background-color: var(--negro);

    margin: 4px auto;

}

.menu-icon {

  display: none;

}


.slider {
  margin: 25px auto;
}

.slick-slide {
margin: 0px 10px;
}

.slick-slide img {
width: 100%;
}

.slick-prev:before,
.slick-next:before {
color: black;
}


.slick-slide {
transition: all ease-in-out .3s;
opacity: .2;
}

.slick-active {
opacity: .5;
}

.slick-current {
opacity: 1;
}
.slick-prev {
left: 10;
}

.slick-next {
right: 10;
}

.carousel p {
  text-align: center;
}

.carousel-img {
  max-width: 100%; /* Hace que la imagen se ajuste al ancho del contenedor */
  height: auto; /* Mantiene la proporción de aspecto de la imagen */
}


/* Menu Responsive */

@media only screen and (max-width: 1023px) {

  .navbar {

      flex-direction: column;

  }

  .logo-container {

      width: 100%;

  }

  .nav-menu {

      width: 100%;

  }

  .menu-item {

      display: block;

      width: 100%;

      padding: 20px 0;

      text-align:center;

  }

  .menu-icon {

      display: block;

      position: absolute;

      top: 20px;

      right: 5%;

  }

  .menu-icon:hover .bar {

      background-color: #4285F4;

  }

  .nav-menu {

    display: none;

    width: 100%;

  }

  .open {

    display: block;

  }

}

/*End Menu Resposinve */


.nav-menu.open{

  background-color: transparent;

}

.hero-image {
  display: flex;
  flex-direction: column-reverse;
  position: relative;
}

.hero-text {
  /*text-align: center;*/
 
  color: var(--blanco);
  background-color: rgba(0, 0, 0, 0.5);
  padding: 1%;
  border-radius: 12px;
  position: absolute;
  bottom: 5%;
  left: 3%;
  
}
h1{
  font-size: 1em;
}
h2{
  font-size: 0.8em;
}

video {

  object-fit: cover;

  width: 100%;

}

span{

  color: var(--grisnegro);

}


.contenedor{

  margin: 5% 0;

}

.elemento-centrado{

  width: 80%;

}

.texto-centrado {

  text-align: center;

}

.titulo{

  color: var(--negro);

  font-size: 40px;

  font-weight: 300;

  text-transform: uppercase;

}

#proyecto.contenedor p{
    font-size: 20px;

  font-weight: 300;

  line-height: 1.8em;
}

.caracteristica-estilo span{

  font-size: 24px;

  font-weight: 600;

  line-height: 1.3em;

  width: 80%;

  text-align: center;

}

.googlemap iframe{

  /*height: 300px;

  max-width: 100%;

  width: 100%;

  margin: 0;

  line-height: 1;

  border: none;*/
  
  display:block;
  margin: 0 auto;
  width:100%;

}

#videgaleria{

  margin-bottom: 25px;

 }


/* Modal (background) General */

.modal {

  display: none;

  position: fixed;

  z-index: 1;

  padding-top: 70%;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  overflow: auto;

  background-color: var(--negrotransparente)

}

/* Modal Contenido */

.modal-content {

  position: relative;

  background-color: transparent;

  margin: auto;

  padding: 0;

  width: 90%;

  max-width: 1200px;

}

.modal-content-two {
    display: flex;
    justify-content: center;
    margin: auto;
}

/* Boton de cerrar modal */

.close {

  color: var(--blanco);

  position: absolute;

  top: 65px;

  right: 25px;

  font-size: 35px;

  font-weight: bold;

}

.close:hover,

.close:focus {

  color: #999;

  text-decoration: none;

  cursor: pointer;

}

/* Ocultar Slides por defecto */

.mySlides {

  display: none;

}

/* Botonoes de siguientes y anterior */

.prev,

.next {

  cursor: pointer;

  position: absolute;

  top: 50%;

  width: auto;

  padding: 16px;

  margin-top: -50px;

  color: var(--blanco);

  font-weight: bold;

  font-size: 20px;

  transition: 0.6s ease;

  border-radius: 0 3px 3px 0;

  user-select: none;

  -webkit-user-select: none;

}

/* Posicion del boton siguiente a la derecha */

.next {

  right: 0;

  border-radius: 3px 0 0 3px;

}

/* On hover, add a black background color with a little bit see-through */

.prev:hover,

.next:hover {

  background-color: var(--negrotransparente)

}


/* Number text (1/3 etc) */

.numbertext {

  color: var(--blanco);

  font-size: 12px;

  padding: 10px 12px;

  position: absolute;

  top: 0;

  background-color: var(--negrotransparente);

  left: 1%;

  border-radius: 45px;

  margin-top: 1%;

}
/* End General Galeria */


#contacto.contenedor >.fila{

  padding: 0%;

  margin: auto;

  width: 80%;

}

.contenedor > .fila > form > label > span{

  color: red;

}

input[type=text], input[type=tel], input[type=email], textarea {

  width: 100%;

  padding: 12px;  

  border: 1px solid #ccc; 

  border-radius: 4px; 

  box-sizing: border-box; 

  margin-top: 6px; 

  margin-bottom: 16px; 

  resize: vertical 

}

input[type=text]:focus, input[type=tel]:focus, input[type=email]:focus, textarea:focus {

  border: 2px solid #ccc;

  padding: 15px;

}

form textarea {

  max-width: 100%;

  min-width: 100%;

  max-height: 300px;

  min-height: 150px;

}

.alert {

  padding: 1em;

  color: var(--blanco);

  border-radius: 2px;

  margin-bottom: 20px;

  font-size: 14px;

  width: 100%;

}

.alert.enproceso{

      background: #4285F4;

}

.alert.error{

  background: #f2dede;

  border: 1px solid #a94442;

  color: #a94442;

}

.alert.sucess{

  background: #4caf50;
}

input[type=submit]{

  background-color: #eee;

  border: 1px solid #ddd;

  color: #333;

  font-size: 1em;

  padding: 10px 15px;

}

input[type=submit]:hover{

  background-color: #ddd;

  border: 1px solid #ccc;

  cursor: pointer;

}

/* Estilos de los botones para abrir y cerrar el acordion  */

.pregunta {

  background-color: #eee;

  color: #444;

  cursor: pointer;

  padding: 18px;

  text-align: left;

  border: none;

  outline: none;

  transition: 0.4s;

  text-decoration: underline;

  font-size: 16px;

}

/* Background para los h3 cuando se activan o esta el mouse sobre la pregunta por medio del JS  */

.active, .pregunta:hover {

  background-color: #ccc0;

}

.pregunta::before {

  content: '\002B'; /* Unicode del signo  (+) */

  font-size: 13px;

  color: var(--negro);

  float: right;

  margin-right: 15px;

  margin-left: 5px;

  font-weight:900;

}

.pregunta.active::before {

  content: "\002D"; /* Unicode del signo (-) */

  color: var(--negro);

  font-weight:900;

}

/* Estilo del acordion de respuesta. Oculto por defecto */

.respuesta {

  padding: 0 18px;

  background-color: var(--blanco);

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.2s ease-out;

}

.fila>.respuesta>p:nth-child(1)>a{

  color: #4285F4;

}

footer {

  background-color: var(--negro);

  color: var(--blanco);

  padding: 50px 0;

}

.tlf-footer h4, .email-footer h4, .redes-sociales-footer h4{

  font-family: var(--fuenteTituloFooter);

  font-size: 24px;

}

.redes-sociales-footer>ul, .tlf-footer ul, .email-footer ul{

  display: flex;

  flex-direction: column;

  padding-inline-start: 0px;

  margin-block-start: 0;

}

.redes-sociales-footer>ul>li, .tlf-footer li, .email-footer li{

  list-style-type: none;
  margin-bottom: 5px;

}

.redes-sociales-footer>ul>li>a>img, .tlf-footer>ul>li>a>img, .email-footer>ul>li>a>img {

  background-color: var(--blanco);

  border-radius: 30px;

  padding: 2px;

}

.redes-sociales-footer>ul>li>a, .tlf-footer>ul>li>a, .email-footer>ul>li>a{

  color: var(--blanco);

  text-decoration: none;

  font-size: 17px;

  font-family: var(--fuenteEnlacesFooter);

}
.icono-centrado{
  vertical-align: middle;
}
/*End Generales*/


/*-------------------Especificos Para mobile------------------------*/



.fila{

  display: flex;

  flex-direction: column;

  align-items: center;

}

.caracteristica{

  display: flex;

  flex-direction: column;

  align-items: center;

}

.caracteristica-estilo{

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 20px 0;

}

.caracteristica-estilo span {

  width: 100%;

}

.close {

  z-index: 1;

}

.prev, .next {

  top: 60%;

}

.lightbox>img:first-child{

  padding-top: 0px;

}

.lightbox>img{

  padding: 10px 0;

}

.lightbox>img:last-child{

  padding-bottom: 0px;

}

#preguntas>.fila>.titulo{

  line-height: 1;

}

.informacion-footer.redes-sociales-footer{

  display: flex;

  flex-direction: column;

}

/*------------------- Para tablet ------------------------*/

@media screen and (min-width: 768px) and (max-width: 1023px)  {

  h1{
    font-size: 1.4em;
  }
  h2{
    font-size: 1em;
  }  

  .titulo{

    font-size: 45px;

  }
  
  .caracteristica{

    display: grid;

    grid-template-columns: auto auto;

  }

  .modal{

    padding-top: 20%;

  }
  
  .carousel-img {
    max-width: 85%;
  }


  footer>.fila>.elemento-centrado{

    display: flex;

  }

  .informacion-footer{

    width: 20%;

  }

  .informacion-footer.logo-footer{

    flex-grow: 0.4;

  }

  .informacion-footer.tlf-footer{

    flex-grow: 0.1;

  }

  .informacion-footer.email-footer{

    flex-grow: 0.5;

  }

  .redes-sociales-footer>ul>li>a, .tlf-footer>ul>li>a, .email-footer>ul>li>a{

    font-size: 15px;

  }

  .tlf-footer>ul>li>a>img, .email-footer>ul>li>a>img {

    display: none;

  }
}



/*---------------- Para computadoras --------------------*/



@media only screen and (min-width: 1024px) {

  h1 {
    font-size: 2em;
  }
  h2{
    font-size: 1.4em;
  }

  .titulo{

    font-size: 55px;

  }

  .fila{

    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;

}
#proyecto.contenedor p {
    /* display: flex; */
    justify-content: center;
    align-items: center;
}


  .caracteristica{

      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(2, 1fr);
      grid-gap: 10px;
      text-align: center;
      align-items: center;

  }
  
    .googlemap iframe {
        width:60%;
  }

  .close{

    top: 85px;

  }

  .carousel-img {
    max-width: 70%;
  }

  .fotos:after {

    content: "";
    display: table;
    clear: both; 

  }

  .modal {
    padding-top: 9%;
}

  .lightbox{

    cursor: zoom-in;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-gap: 1% 2%;
    margin-bottom: 25px;

  }

  .lightbox>img:first-child, .lightbox>img:last-child {

    padding: 10px 0;

  }

  #contacto.contenedor >.fila{

    width: 50%;

  }

  .g-recaptcha{
    margin-bottom:20px;
  }

  footer>.fila>.elemento-centrado{

    display: flex;

  }

  .informacion-footer{

    width: 25%;

  }
  .informacion-footer.email-footer{
    width: 27%;
  }

  .informacion-footer.redes-sociales-footer{

    width: 20%;

    }
}

/* Para pantallas grandes*/

@media only screen and (min-width: 1920px) {
  .elemento-centrado {

    width: 60%;

  }

 

}


@media only screen and (max-width: 550px) {
  .modal{
  padding-top: 40%;}
}

@media only screen and (min-width: 551px) and (max-width: 767px){
  
  .modal{
    padding-top: 25%;
  }
}
@media only screen and (max-width: 920px) and (orientation: landscape) {
  .modal{
    padding-top: 2%;
    z-index: 99;
  }
  .modal-content {
    width: 70%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1919px) {
 
  .modal {
      padding-top: 6%;
      height: 100%;
  }
  .modal-content {
    width: 74%;
  }
  
}