@charset "UTF-8";
/*

sintaxis

elemento{
propiedad: valor;
}
todo lo que escriba aca se pasa al css con el codigo:
sass --watch scss/style.scss style.css

EXTEND
a:last-child{
@extend .clase
}
*/
@import url(../utilities/_extend.scss);
@import url(../utilities/_mixin.scss);
@import url(../utilities/_variables.scss);


body {
  background-color: #1a1a1a;
}

body div .fotopintando{
display: none;
}
body h1 {
  font-style: oblique;
  font-weight: 700;
  font-size: xx-large;
  font-family: "Poppins", sans-serif;
  color: #c6c2c2;
  display: flex;
  justify-content: center;
}
body #lista1 {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #fafafa;
  padding: 10px;
}
body #lista1 a {
  color: black;
  font-size: medium;
  font-family: "Poppins", sans-serif;
  text-decoration: none;
}
body #lista1 a:hover {
  color: #b79aa4;
}
body #lista2 a {
  color: #fafafa;
  font-family: "Poppins", sans-serif;
  padding: 8px;
  padding-left: 8px;
  padding-right: 8px;
  background-color: #1a1a1a;
  margin: 8px;
  transition: 1s;
}
body #lista2 .acrilico {
  background-color: #c6c2c2;
  color: black;
  transition: 1s;
}
body #lista2 a:hover {
  margin: 30px;
}
body p .inicio {
  background-color: #c6c2c2;
  font-family: "Poppins", sans-serif;
  font-size: medium;
  padding: 8px;
  padding-left: 15px;
  padding-right: 15px;
  margin: 4px;
}
body .imagenes {
  display: flex;
  justify-content: space-evenly;
  margin: 20px;
}
body .seccion-container {
  margin-top: 60px;
  display: flex;
  margin: 40px;
  justify-content: space-evenly;
}
body .seccion-container .div-1 {
  margin-top: 100px;
}
body .seccion-container .div-1 h2 {
  color: #dadada;
  font-family: "Poppins", sans-serif;
  font-size: 3.2rem;
  margin-top: 60px;
  margin-bottom: 60px;
}
body .seccion-container .div-1 a {
  font-size: large;
  border-radius: 15px;
  background-color: #fafafa;
  font-style: "Poppins", sans-serif;
  color: black;
  padding: 15px;
  margin-top: 50px;
  font-family: "Poppins", sans-serif;
  justify-content: center;
}
body .seccion-container .div-1 p {
  font-family: "Poppins", sans-serif;
  font-size: 2rem;
  margin-top: 50px;
  color: #dadada;
  background-color: #1a1a1a;
}
body .seccion-container .div-2 video {
  width: 20rem;
  margin: 50px;
}
body footer {
  display: flex;
  justify-content: flex-end;
  margin: 40px;
  background-color: #fafafa;
  border-radius: 20px;
  padding: 10px;
  align-items: center;
}
body footer h2 {
  font-family: "poppins";
  font-weight: 400;
}
body footer .logo-insta img {
  width: 7rem;
}
body footer .logo-facebook img {
  width: 4rem;
}
body footer .logo-gmail img {
  width: 4rem;
  margin-right: 25px;
}
body .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /*(cantidad, tamaño)*/
  grid-template-rows: repeat(3, 175px);
  column-gap: 25px;
  row-gap: 25px;
  /*gap(espacio por igual entre columnas y filas)*/
  margin: 50px;
}
body .grid-container .item-1 {
  /*(valor donde comienza hasta donde termina*/
  grid-column: 1/2; /*el elemento empieza en la columna 1 y termina en la 3*/
  grid-row: 1/3;
  background-image: url(Imagenes/image\ copy\ 3.png);
  background-size: cover;
}
body .grid-container .item-2 {
  background-image: url(Imagenes/image\ copy\ 2.png);
  grid-column: 2/3;
  grid-row: 1/5;
  display: flex;
  background-size: cover;
}
body .grid-container .item-3 {
  background-image: url(Imagenes/ojosfoto.png);
  grid-column: 1/2;
  grid-row: 3/5;
}
body .grid-container .item-4 {
  background-image: url(Imagenes/image.png);
  grid-column: 3/4;
  grid-row: 1/3;
}
body .grid-container .item-5 {
  background-image: url(Imagenes/image\ copy.png);
  grid-column: 3/4;
  grid-row: 3/5;
}

body .grid-container1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /*(cantidad, tamaño)*/
  grid-template-rows: repeat(3, 175px);
  column-gap: 25px;
  row-gap: 25px;
  /*gap(espacio por igual entre columnas y filas)*/
  margin: 50px;
} 

body .grid-container1 .item-6 {
  grid-column: 1/3;
  grid-row: 1/5;
  background-color: #1a1a1a;
  padding: 20px;
  color: #fafafa;
  font-family: "Poppins", sans-serif;
  font-size: larger;
  justify-content: space-evenly;
}
body .grid-container1 .item-7 {
  background-image: url(Imagenes/fotopintando.jpeg);
  background-size: cover;
  grid-row: 1/5;
}
body .ac1 {
  margin: 20px;
  display: inline-flex;
  margin-left: 80px;
  height: 800px;
  width: 550px;
  object-fit: cover; /* Esto asegura que la imagen mantenga su proporción y se recorte si es necesario */
}
body .horizontal {
  margin: 80px;
}
body li {
  list-style: none;
  padding-top: 40px;
}
body li label {
  color: #fafafa;
  font-size: medium;
  font-style: normal;
  font-family: "Poppins", sans-serif;
  font-size: larger;
}
body li input {
  padding: 15px;
  width: 200px;
}
body li .enviar {
  font-size: large;
  border-radius: 15px;
  background-color: #fafafa;
  font-style: "Poppins", sans-serif;
}
body li .enviar:hover {
  font-weight: bolder;
}
body .mobile img{
  display: none;
}


@media screen and (max-width: 550px){
  
  body li body h1 {
    visibility: hidden;
  }
  body li #lista1 a {
    display: block;
    font-size: smaller;
    margin: 15px;
    padding: 10px;
    object-fit: cover;
  }
  body li .imagenes{
    display: block;
    width: 70vw;
    object-fit: cover;
  }

  body li .seccion-container {
    display: flex;
    margin: auto;
    width: 70vw;
  }
  body li .div-2 {
    display: block;
  }

  body li footer {
    object-fit: cover;
  }
  body li #lista2 a {
    font-size: smaller;
    margin: 15px;
    padding: 8px;
  }

  

  body h1{
      margin: 20px;
      font-size: 95%;
    }

   body #lista1 a{
      font-size: 90%;
    }

    body div .cuadro-1 img{
      
      display: none;
          }


          body div .cuadro-4 img{
            display: none;
          }
          
    body div img{
   width: 100%;
   height: 100%;
  padding: 10px;
  display: flex;
  justify-content: flex-start;
    }

    body .seccion-container {
      display: flex;
      margin: 10px;
    }

    body .seccion-container .div-1 {
      margin-top: 1px;

    }

    body .seccion-container .div-1 h2{
  font-size: 90%;
  align-self: center;
  margin-top: 10px;
  margin-bottom: 20px;
}
body .seccion-container .div-1 a{
  size: 20%;
  font-size: 50%;
  border-radius: 2px;
  padding: 5%;
  align-self: center;
  margin-top: 10px;
  justify-content: center;
}


body .seccion-container .div-2 video {
 display: none;
}

body footer {
  display: flex;
  justify-content: center;
margin: 2px;
  background-color: #fafafa;
  border-radius: 20px;
  padding: 5px;
  align-items: center;
}

body footer h2{
  display: none;
}

body .mobile img {
  display: flex;
  margin: 30px;
}

body .grid-container{
  display: none;
}

body #lista2 a{
  font-size: 90%;
  display: flex;
}

body div .ac1{
  width: 90%;
  height: 90%;
  margin: 15px;
}

body div .horizontal{
  width: 90%;
  height: 90%;
margin: 15px;
}

body .ac1{
  width: 90%;
  height: 90%;
  margin: 15px;
}

body .horizontal{
  width: 90%;
  height: 90%;
margin: 15px;
}
body .grid-container1{
  margin: 5px;
  display: flex;
  align-content: center;
}

body .grid-container1 .item-6 {
  grid-column: 1/12;
  grid-row: 1/12;
  background-color: #1a1a1a;
  color: #fafafa;
  font-family: "Poppins", sans-serif;
  font-size: 20%;
  justify-content: space-evenly;
  padding: 5px;
}

body .grid-container1 .item-7{
  display: none;
}

body div .fotopintando{
  display: flex;
  margin: 5px;
  width: 50%;
  height: 50%;
  justify-self: center;
}

body footer .logo-insta img {
  width: 6rem;
}
body footer .logo-facebook img {
  width: 3rem;
}
body footer .logo-gmail img {
  width: 3rem;
  margin-right: 25px;
}

}
/*# sourceMappingURL=style.css.map */