/*============================================

        ZHENG DA
        RESPONSIVE

=============================================*/



/*==============================
      PANTALLAS GRANDES
===============================*/

@media (min-width:1600px){

.hero{

max-width:1600px;

margin:auto;

}

.menu-section{

max-width:1700px;

margin:auto;

}

}





/*==============================
        LAPTOP
===============================*/

@media (max-width:1200px){

.hero{

grid-template-columns:1fr;

text-align:center;

gap:70px;

}

.hero-text{

margin:auto;

}

.hero-buttons{

justify-content:center;

}

.hero-image img{

max-width:500px;

}

.products-grid{

grid-template-columns:

repeat(2,minmax(280px,1fr));

}

}





/*==============================
          TABLET
===============================*/

@media (max-width:992px){

header{

padding:18px 30px;

}

nav{

display:none;

}

.menu-button{

display:flex;

justify-content:center;

align-items:center;

}

.hero{

padding:120px 35px 70px;

}

.hero h1{

font-size:82px;

}

.hero h2{

font-size:42px;

}

.hero p{

font-size:17px;

}

.products-grid{

grid-template-columns:

repeat(2,1fr);

gap:25px;

}

.modal-card{

grid-template-columns:1fr;

}

.modal-image{

height:320px;

}

.footer-grid{

grid-template-columns:

repeat(2,1fr);

}

}





/*==============================
        CELULARES
===============================*/

@media (max-width:768px){

body{

overflow-x:hidden;

}



/* HEADER */

header{

padding:16px 18px;

}

.logo span{

font-size:26px;

}

.logo img{

width:40px;

}



/* HERO */

.hero{

grid-template-columns:1fr;

padding:

110px 22px

50px;

gap:35px;

text-align:center;

min-height:auto;

}

.hero-text{

max-width:100%;

}

.hero-buttons{

justify-content:center;

}

.hero-image{

order:-1;

}

.hero-image img{

max-width:300px;

}



/* TITULOS */

.hero h1{

font-size:64px;

}

.hero h2{

font-size:30px;

}

.hero p{

font-size:16px;

line-height:1.8;

}



/* CATEGORIAS */

.quick-categories{

padding:20px;

}

.category-slider{

padding-bottom:15px;

gap:15px;

}

.category-slider a{

min-width:120px;

height:95px;

font-size:28px;

}

.category-slider span{

font-size:14px;

}



/* SECCIONES */

.menu-section{

padding:70px 20px;

}

.section-title{

margin-bottom:40px;

}

.section-title h2{

font-size:34px;

}

.section-title p{

font-size:15px;

}



/* PRODUCTOS */

.products-grid{

grid-template-columns:1fr;

justify-items:center;

gap:25px;

}

.product-card{

width:100%;

max-width:360px;

}



/* TARJETAS */

.content{

padding:20px;

}

.content h3{

font-size:24px;

}

.content p{

font-size:15px;

}



/* BOTON */

.details{

padding:12px 18px;

font-size:14px;

}



/* PRECIO */

.price{

font-size:30px;

}



/* BUSCADOR */

.search-section{

padding:70px 20px;

}

.search-section h2{

font-size:34px;

}

#search{

font-size:16px;

padding:16px 22px;

}



/* MODAL */

.modal{

padding:18px;

}

.modal-card{

grid-template-columns:1fr;

}

.modal-image{

height:240px;

}

.modal-info{

padding:28px;

}

.modal-info h2{

font-size:34px;

}

#modal-price{

font-size:34px;

}



/* FOOTER */

footer{

padding:60px 20px;

}

.footer-logo{

font-size:42px;

text-align:center;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

}





/*==============================
      CELULARES PEQUEÑOS
===============================*/

@media (max-width:480px){

.hero{

padding:

100px 16px

40px;

}

.hero h1{

font-size:52px;

}

.hero h2{

font-size:26px;

}

.hero-image img{

max-width:250px;

}

.section-title h2{

font-size:30px;

}

.category-slider a{

min-width:105px;

height:85px;

}

.product-card{

max-width:100%;

}

.content h3{

font-size:22px;

}

.price{

font-size:28px;

}

.details{

padding:10px 16px;

font-size:13px;

}

}