
.yo-inicio{
   display: flex;
   align-items: center;
   flex-direction: column;
    background-image: linear-gradient(to right, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.5)), url(yo-inicio.jpg);
   justify-content: center;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   text-align: center;
   width: 100%;
   height: 100vh;
   scroll-snap-align: start;
}

.yo-inicio p{
    color: var(--color-uno);
    width: 85%;
    max-width: 800px;
}

.yo-inicio h1{
    font-size: 62px;
     color: var(--color-uno);
    margin-bottom: 20px;
}


.inicio-servicios{
   display: flex;
   align-items: center;
   justify-content: center;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   text-align: center;
   width: 100%;
   height: 100vh;
   scroll-snap-align: start;
}

.inicio-servicios a{
    color: var(--color-uno);
}

.inicio-servicios h2{
    font-size: 62px;
    margin-bottom: 20px;
}

.fondo-fotografia {
   background-image: linear-gradient(to right, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.5)), url(fondo-foto.jpg);
}
.fondo-diseno {
    background-image: linear-gradient(to right, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.5)), url(fondo-diseno.jpg);
}
.fondo-video {
   background-image: linear-gradient(to right, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.5)),url(fondo-video.jpg);
}

.scroll-inicio{
 scroll-snap-type: y mandatory;
}



.fondo-contacto{
    width: 100%;
   background-image:  linear-gradient(to right, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.5)),url(contacto.jpg);
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover; 
   background-attachment: fixed;
}

.contacto-caja{
  width: 90%;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  color: var(--color-uno);
}

.contacto-caja h1{
margin: 10px 0;
font-size: 62px;
} 
.contacto-caja p{
margin: 5px 0;
}

.contacto-caja a{
color: var(--color-uno);
text-decoration: underline;
}

.contacto-formulario{
    font-family: 'Poppins', sans-serif;
   font-weight: normal;
   border-radius: var(--radius);
   padding: 40px;
}
.contacto-formulario textarea{
    resize: none;
    width: 100%;
    margin: 10px 0;
    padding: 10px 0 10px 10px;
    height: 200px;
  background: var(--color-uno);
    border: 3px solid var(--color-dos);
    color: var(--color-dos);
    border-radius: var( --radius);
}
.contacto-formulario input{
    width: 100%;
    margin: 10px 0;
  background: var(--color-uno);
    border: 3px solid var(--color-dos);
    padding: 10px 0 10px 10px;
    color: var(--color-dos);
      border-radius: var( --radius);
}

.contacto-formulario button{
   width: 100px;
    font-size: 14px;
    background: none;
    border: solid 3px var(--color-uno);
    color: var(--color-uno);
  padding: 10px 10px;
    cursor: pointer;
    border-radius: var( --radius);
}
.contacto-formulario button:hover{transition: 400ms;opacity: 60%;}.contacto-formulario button:active{transform: scale(0.9);}

input:focus, textarea:focus{
    border: 3px solid var(--color-uno-hover);
    outline: none;
    transition: 400ms all;
    color: var(--color-dos);
} 


.galeria-diseno .div-diseno{
 width: 100%;
    } 

.galeria-diseno{
width: 87%;
    max-width: 1150px;
    margin: 0 auto;
    } 

    .galeria-diseno img{
max-width: 100%;
margin: 1%;
    } 

.img-9{ width: 71.4%;}
.img-10{  width: 24.55%;}
.img-1{  width: 57.6%;}
.img-2{  width: 38.4%;}
.img-3{  width: 55.95%;}
.img-4{  width: 40.05%;}
.img-5{ width: 98%;}
.img-6 .img-7 .img-8{  width: 100%;}
.img-6-div{width: 60.6%;  display: inline-block;  margin-right: 2%;}
.img-7-8{ width: 35.7%; display: inline-block;}
.img-12{ width: 47.5%; }
.img-11{ width: 47.5%; }


@media only screen and (max-width: 767px) {
        .img-6-div{ width: 100%; display: inline-block; margin-right: 2%;}
    .img-7-8{ width: 100%; display: inline-block;  } 
    .img-9{ width: 100%;}
.img-10{  width: 100%;} 
.img-1{  width: 100%;}
.img-2{  width: 100%;}
.img-3{  width: 100%;}
.img-4{  width:  100%;}
.img-5{ width: 100%;}
.img-12{ width: 100%; }
.img-11{ width: 100%; }


.contacto-formulario {
    padding: 20px;
}
.contacto-caja h1 {
    font-size: 52px;
}

.inicio-servicios h2 {
    font-size: 48px;
}
.inicio-servicios p {
    font-size: 18px;
}
}



