@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400&family=Poppins:wght@200;300;400;500&display=swap');

*{
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
}

/* bienvenidos */
.nav-1{
    position: sticky;
    top: 0;
    left: 0;
}

.nav-1 span{
    color: rgb(227, 243, 4);
    margin: .5rem;
}
.fa-facebook,
.fa-instagram{
    color: #fff;
    font-size: 1.5rem;
    padding-right: .5rem;
}

/* navbar */

.div-1{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.navbar{
    position: sticky !important;
    top: 2rem;
    left: 0;
}

.navbar div{
    justify-content: center;
}

/* app */

.app{
    max-width: 50%;
    margin: 3rem auto;
    background-color: rgb(227, 243, 4);
}
.app p{
    text-align: center;
    font-size: clamp(10px, 4vw, 22px);
    color: #000;
    padding: 1rem;
}

/* estrella */
.div-3{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5rem;
    margin-bottom: 5rem;
}
.div-3 img{
    width: 3rem;
}

/* esto es lo que hacemos */

.div-4{
    background: #000;
    max-width: 50%;
    margin: 3rem auto;
}
.div-4 h2{
    text-align: center;
    color: #fff;
    padding: 1rem;
}

.div-5{
    max-width: 80%;
    margin: 3rem auto;
}
.div-5 p{
    text-align: center;
    font-size: clamp(10px, 4vw, 18px);
    padding: 1rem;
}

.div-5 span{
    display: block;
    text-align: center;
}


/* SERVICIOS */


.div-6{
    background: #000;
    max-width: 50%;
    margin: 3rem auto;
}

.div-6 h2{
    text-align: center;
    color: #fff;
    padding: 1rem;
}

/* DIV GRID */


.div-grid{
    width: 80%;
    margin: 0 auto;
    display: grid;
    grid-auto-rows: 8rem;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}

.div-grid div{
  margin: 0 auto;
  width: 80%;
}


.div-grid div h2{
    text-align: center;
    color: #000;
}

.div-grid div p{
    text-align: center;
    color: #000;
}

/* Galeria GRID  */

.galeria-container{
    display: grid;
    width: 80%;
    margin: 0 auto;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 300px;
    gap: .5rem;
}

.galeria-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.galeria-item:nth-child(1){
    grid-row-start: span 2;
}

.galeria-item:nth-child(3){
    grid-row-start: span 2;
}

.galeria-item:nth-child(6){
    grid-column-start: span 2;
}


@media (max-width:1000px) {
    .galeria-item:nth-child(1){
        grid-row-start: span 1;
    }
    
    .galeria-item:nth-child(3){
        grid-row-start: span 1;
    }
    
    .galeria-item:nth-child(6){
        grid-column-start: span 1;
    }
}

@media (max-width:650px) {
    .galeria-container{
        display: grid;
        width: 90%;
        margin: 0 auto;
        grid-template-columns: repeat(1, 1fr);
        grid-auto-rows: 300px;
        gap: .5rem;
    }

    .galeria-item:nth-child(1){
        grid-row-start: span 1;
    }
    
    .galeria-item:nth-child(3){
        grid-row-start: span 1;
    }
    
    .galeria-item:nth-child(6){
        grid-column-start: span 1;
    }
}

    /* CONTACTOS*/
    
.sucursales{
  background: #000;
  margin: 0 auto;
  max-width: 50%;
  padding: .5rem;
}

.sucursales h2{
  text-align: center;
  color:#fff;
}
    
.div-contactos{
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  width: 95%;
  margin: 0 auto;
  gap: .5rem;
}

.div-contactos a{
  background: rgb(227, 243, 4);
  text-decoration: none;
  color: #000;
}

.div-contactos a:hover{
  background: #000;
  color: #fff;
}

.div-contactos h3{
  text-align: center;
  margin-top: .3rem;
}

.div-contactos p {
  text-align: center;
}


/* gicard */


.gifcard{
    background: #000;
    margin: 2rem auto;
    max-width: 60%;
    padding: .5rem;
}

.gifcard h2{
    text-align: center;
    color: rgb(227, 243, 4);
}

.gifcard p{
    text-align: center;
    color: #fff;
}
 


/* redes */


.redes{
    background: #000;
    margin: 2rem auto;
    max-width: 50%;
    padding: .5rem;
}

.redes h2{
    text-align: center;
    color: #fff;
}


/* redes sociales */


.redes-sociales{
    width: 50%;
    margin: 0 auto;
    text-align: center;
    display: flex;
    justify-content: space-evenly;
}


.redes-sociales div{
    background: #000;
    border-radius: 100%;
    text-align: center;
    width: 4rem;
    height: 4rem;
}

.redes-sociales .fa-facebook,
.redes-sociales .fa-instagram{
    color: rgb(227, 243, 4);
    border-radius: 100%;
    font-size: 3rem;
    margin: .6rem;
}

/* newsletter */

.newsletter{
    background: #000;
    margin: 2rem auto;
    max-width: 70%;
    padding: .5rem;
}


.newsletter h2{
    text-align: center;
    color: #fff;
}


/* formulario */

.formulario{
    text-align: center;
}

.formulario .enviar{
    background: #000;
    color: #fff;
    margin: 0 .5rem;
    padding: 0 .5rem;
}


/* bacan casillas */

.bacan-casillas{
    width: 100%;
    background: #000;
    padding: 2rem;
    margin-top: 2rem;
    display: grid;
    grid-auto-rows: auto;
    grid-template-columns:  repeat(auto-fill, minmax(20rem, 1fr));
    gap: 1rem;
}


.bacan-casillas div a{
    display: flex;
    text-decoration: none;
}


.bacan-casillas div div p{
    padding: 2rem;
    text-align: center;
    color: #fff;
    font-size: .8rem;
}

.bacan-casillas div a:hover> div p{
    color: rgb(227, 243, 4);
}

.bacan-casillas img{
    width: 10rem;
    background: #fff;
}

.bacan-casillas div a:hover> div img{
    background: rgb(227, 243, 4);
}



/* footer */

footer{
    background: #000;
    color: #fff;
    width: 100%;
    text-align: center;
}

footer h3{
    font-size: 1rem;
}