* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
}
  body{ 
  background-color: var(--Bg-Main); 
  font-family: 'Times New Roman', Times, serif; 
  font-weight: 400; 
}
section{
  scroll-margin-top: 75px;
  min-height: calc(100vh - 60px);
}


/*/////////////////////////////////////////////////////////////////*/
/*hero (primera imagen que se ve al abrir la pagina)*/
.hero{
  display: flex; 
  text-align: center;
  border-bottom:  3px solid black;
  color: var(--FontColor-Primary);
  background-color: var(--Bg-Cuaternary);
}
.hero .text{
  min-height: 100vh; 
  padding: 0 8rem;
  border-right: 3px solid black;
  align-content: center;
  background: linear-gradient(140deg,rgba(168, 81, 23, 0.801),rgba(170, 112, 151, 0.418));
  text-shadow: 1px 0 10px rgba(100, 100, 100, 1);
}
.hero h1{
  font-size: clamp(3rem, 5vw, 5rem);
  margin-bottom: 10vh;
}
.hero h2{
  font-size: clamp(2rem, 4vh, 4rem);
  padding: 0 2vw;
  margin-bottom: 10vh;
}
.hero .boton-presupuesto{
  text-shadow: none;
  display: inline-block;
  width: fit-content; 
  padding: 0.2rem 1.5rem;
  margin: 1rem auto;
  text-decoration: none;
  font-size: clamp(1.5rem, 4vh, 2.5rem);
  color: rgb(12, 13, 14);
  border:  0.3vh solid rgb(87, 11, 11);
  background: radial-gradient(#d4aa88, rgb(212, 205, 173)); 
  box-shadow: 0 0 15px rgb(212, 108, 60);
  border-radius: 20px; 
  text-transform:uppercase; 
  transition: all .3s ease; 
}
.boton-presupuesto:hover {
  transform: scale(1.05); 
  box-shadow: 0 0 25px rgb(87, 11, 11);
}
.hero-img{
  padding: 0 20rem;
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: rgba(240, 248, 255, 0.76);
  background-image: url(../../imgFolder/hero.webp);
  background-position: center;
  background-repeat: no-repeat;
}


/*////////////////////////////////////////////////////////////////*/
/*trancisiones*/
.transicion1{
  background-image: url(../../imgFolder/Trancision/transicion1.webp);
}
.transicion2{
  background-image: url(../../imgFolder/Trancision/transicion2.webp);
}
.transicion3{
  background-image: url(../../imgFolder/Trancision/transicion3.webp);
}
.transicion{
  height: 30rem;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  z-index: 0;
}
.transicion div{
  width: 100%;
  height: 100%;
  background: radial-gradient(#b554, #5394);
}


/*////////////////////////////////////////////////////////////*/
/*seccion sobre nosotros*/
#sobre-nosotros{ /*el selector # refiere al id especifico*/
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  border-top: 3px solid black;
  border-bottom: 3px solid black;
  padding: 6rem 1rem;
  background: linear-gradient( 120deg, rgba(180, 82, 44, 0.63), var(--Bg-Main), rgba(180, 44, 67, 0.568));
  gap: 2rem; /*define la separacion entre los elementos hijos de un contenedor*/
  text-shadow: 0 0 5px gray;
}
#sobre-nosotros h2{
  font-size: clamp(2rem, 4.5vh, 3rem);
}
.foto-perfil{
  margin: 2rem;
}
.foto-perfil img{
  height: 15rem;
  width: 15rem;
  border-radius: 45%;
  box-shadow: 0 0 15px #333;
}
.contenido-sobre-nosotros{
  font-size: clamp(1rem, 3vh, 2.5rem);
  max-width: 800px;
}
.contenido-sobre-nosotros a{
  font-size: clamp(1rem, 3.5vh, 2.5rem);
  max-width: 800px;
  color: black;
  text-decoration: none;
}


/*///////////////////////////////////////////////////////////////*/
/*Seccion otros servicio*/
#otros-servicios{
  border-top:  3px solid black;
}
#otros-servicios .presentacion{
  padding: 2rem;
  color: var(--FontColor-Primary);
  background: linear-gradient(var(--Bg-Secondary), rgba(50, 50, 50, 0.1));
  text-shadow: 0 0 5px gray;
}
#otros-servicios h2{
  font-size: clamp(3rem, 5vh, 5rem);
}
#otros-servicios h3{
  margin-top: 0.5rem;
  font-size: clamp(2rem, 3vh, 3rem);
}
#otros-servicios p{
  margin-top: 1rem;
  font-size: clamp(1rem, 2.5vh, 2rem);
}
#otros-servicios .servicios{
  width: 100%;
  height: calc(75vh + 5px);
  display: flex;
  flex-wrap: wrap;
  border: 2px solid rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 10px black;
}
.servicios div{
  display: flex;
  flex-direction: column;
  width: 12.5%;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  text-align: center;
  background: linear-gradient(125deg, rgba(255, 0, 0, 0.1), rgba(255, 136, 0, 0.1),rgba(255, 217, 0, 0.1));
}
.servicios h4{
  margin: 2rem;
  margin-bottom: 0;
  font-size: clamp(1rem, 3vh, 2rem);
  text-shadow: 0 0 2px white;
  border-bottom:3px solid rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}
.servicios img{
  height: 25rem;
  width: 12rem;
  margin: 6rem 1.5rem;
  border-radius: 20px;
  box-shadow: 0 0 20px black;
}
.servicios .esp{
  margin: 4rem 1.5rem;
}


/*/////////////////////////////////////////////////////////////*/
/*Fotter (seccion contactenos)*/
#contactenos{
  width: 100%;
  padding: 10px 0;
  background-color: var(--Bg-Cuaternary);
  font-size: clamp(1rem, 2vw, 1.5rem); 
  box-shadow: 0 -5px 10px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  color: var(--FontColor-Important);
  gap: 2rem;
}
#contactenos .informacion-contacto{
  display: flex;
  flex-direction: column;
  padding: 1rem 0 0 1rem;
  margin-left: 2rem;
}
#contactenos .informacion-contacto h2{
  font-size: clamp(1rem, 3vh, 2rem);
  margin-bottom: -0.8rem;
}

#contactenos .informacion-contacto a{
  text-decoration: none;
  color: var(--FontColor-header-footer);
  margin-left: 12.3rem;
  margin-top: 1rem;
}
#contactenos .foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#contactenos .foot img{
  height: 3.5rem;
  width: 3.5rem;
  display: block;
  border-left: 2px;
  margin-left: 2rem;
}
#contactenos .foot p{
  display: flex;
  justify-content: center;
  padding: 0 2vw;
}


/*//////////////////////////////////////////////////////////////*/
/*media querys*/


@media(max-width:1024px){
  .hero-img{
    display:none;
  }
  .hero{
    background-image: url(../../imgFolder/hero.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .hero .text{
    width: 100%;
    border: none;
    background: rgba(40, 40, 40, 0.4);
    color:  var(--FontColor-Important);
    padding: 0;
    text-shadow: 1px 0 10px rgba(0, 0, 0, 1);
  }
  .hero .boton-presupuesto{
    margin: 0 1.5rem;
    font-size: clamp(1rem, 3.5vh, 2rem);;
  }
}

@media(max-width:1024px){
  .transicion{
    height: 20rem;
  }
}

@media(max-width:1024px){
  .contenido-sobre-nosotros{
    font-size: clamp(1rem, 2vh, 2.5rem);
    max-width: 600px;
  }
  .contenido-sobre-nosotros a{
    font-size: clamp(1rem, 2.5vh, 2.5rem);
    max-width: 600px;
    color: black;
    text-decoration: none;
  }
}

@media(max-width:1799px){
  #otros-servicios .servicios{
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap:unset;
    flex-direction: column;
    border: 2px solid rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 10px black;
  }
  .servicios div{
    display: block;
    flex-direction: column;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    text-align: center;
    background: linear-gradient(125deg, rgba(255, 0, 0, 0.1), rgba(255, 136, 0, 0.1),rgba(255, 217, 0, 0.1));
  }
  .servicios img{
    height: 14rem;
    width: 16rem;
    margin: 2rem 1rem;
    border-radius: 20px;
    box-shadow: 0 0 20px black;
  }
  .servicios .esp{
    margin: 1rem 0;
  }
}

@media(max-width:1024px){
  #contactenos .informacion-contacto{
    padding: 0;
    margin-left: 0;
  }
    #contactenos .foot{
    display: flex;
    align-items: center;
  }
    #contactenos .foot img{
    height: 3.5rem;
    width: 3.5rem;
    display: block;
    margin-left: 0 1rem;
  }
    #contactenos .foot p{
    display: flex;
    justify-content: center;/*centra verticalmente*/
    margin: 0 1rem;
  }
}
@media(max-width:500px){
  #contactenos .informacion-contacto a{
    margin-left: 8rem;
    margin-top: 1rem;
  }
}