/*==================================
RESPONSIVE
==================================*/

/* 1400px */

@media (max-width:1400px){

    .container{
    
    width:min(94%,1200px);
    
    }
    
    .hero h1{
    
    font-size:4rem;
    
    }
    
    }
    
    
    
    /* 1200px */
    
    @media (max-width:1200px){
    
    .section{
    
    padding:80px 0;
    
    }
    
    .section__title{
    
    font-size:2.8rem;
    
    }
    
    .hero__container{
    
    gap:50px;
    
    }
    
    .about__container{
    
    gap:50px;
    
    }
    
    .contact__container{
    
    grid-template-columns:1fr;
    
    }
    
    .contact__map{
    
    height:420px;
    
    }
    
    }
    
    
    
    /* 992px */
    
    @media (max-width:992px){
    
    .header{
    
    height:75px;
    
    }
    
    .nav__menu{
    
    position:fixed;
    
    top:75px;
    
    right:-100%;
    
    width:300px;
    
    height:calc(100vh - 75px);
    
    background:white;
    
    display:flex;
    
    flex-direction:column;
    
    justify-content:flex-start;
    
    padding-top:50px;
    
    transition:.35s;
    
    box-shadow:-10px 0 30px rgba(0,0,0,.08);
    
    }
    
    .nav__menu.active{
    
    right:0;
    
    }
    
    .menu-button{
    
    display:flex;
    
    }
    
    .hero{
    
    padding-top:120px;
    
    }
    
    .hero__container{
    
    grid-template-columns:1fr;
    
    text-align:center;
    
    }
    
    .hero__buttons{
    
    justify-content:center;
    
    }
    
    .hero__stats{
    
    justify-content:center;
    
    }
    
    .hero__image{
    
    order:-1;
    
    }
    
    .about__container{
    
    grid-template-columns:1fr;
    
    }
    
    .catalog__header{
    
    flex-direction:column;
    
    align-items:flex-start;
    
    }
    
    .footer__container{
    
    grid-template-columns:1fr;
    
    text-align:center;
    
    }
    
    .footer__social{
    
    justify-content:center;
    
    }
    
    }
    
    
    
    /* 768px */

    @media (max-width:768px){

    .logo{

    gap:10px;

    }

    .logo img{

    width:52px;

    height:52px;

    }

    .nav__buttons{

    gap:10px;

    }

    .section{

    padding:70px 0;

    }
    
    .section__title{
    
    font-size:2.2rem;
    
    }
    
    .hero h1{
    
    font-size:3rem;
    
    }
    
    .hero p{
    
    font-size:1rem;
    
    }
    
    .hero__stats{
    
    flex-direction:column;
    
    align-items:center;
    
    }
    
    .hero__stats div{
    
    width:100%;
    
    max-width:300px;
    
    }
    
    .categories__grid{
    
    grid-template-columns:repeat(2,1fr);
    
    }
    
    .products{
    
    grid-template-columns:repeat(2,1fr);
    
    }
    
    .testimonials__grid{
    
    grid-template-columns:1fr;
    
    }
    
    .about__features{
    
    grid-template-columns:1fr;
    
    }
    
    .cart{
    
    width:100%;
    
    }
    
    .contact__cards article{
    
    padding:18px;
    
    }
    
    }
    
    
    
    /* 600px */

    @media (max-width:600px){

    .logo{

    gap:8px;

    }

    .logo img{

    width:46px;

    height:46px;

    }

    .logo span{

    font-size:.85rem;

    }

    .logo strong{

    font-size:1.2rem;

    }

    .nav__buttons{

    gap:8px;

    }

    .cart-button{

    width:44px;

    height:44px;

    }

    .cart-button i{

    font-size:1.25rem;

    }

    #cartCounter{

    width:20px;

    height:20px;

    font-size:.7rem;

    }

    .nav__buttons .admin-nav-btn{

    width:38px;

    height:38px;

    font-size:1rem;

    }

    .menu-button{

    width:42px;

    height:42px;

    }

    .menu-button i{

    font-size:1.3rem;

    }

    .hero{

    min-height:auto;

    padding-bottom:60px;

    }
    
    .hero h1{
    
    font-size:2.5rem;
    
    }
    
    .hero__buttons{
    
    flex-direction:column;
    
    }
    
    .hero__buttons .btn{
    
    width:100%;
    
    }
    
    /* En celular el catálogo va a 2 productos por fila,
       con tarjetas compactas para que quepan bien */
    .products{

    grid-template-columns:repeat(2,1fr);

    gap:14px;

    }

    .product__image{

    height:160px;

    }

    .product__content{

    padding:14px;

    }

    .product__title{

    font-size:1.05rem;

    margin-bottom:8px;

    }

    .product__description{

    font-size:.82rem;

    margin-bottom:12px;

    }

    .product__button{

    width:44px;

    height:44px;

    font-size:1rem;

    }

    .categories__grid{

    grid-template-columns:1fr;

    }

    .catalog__search{

    width:100%;

    }

    .footer{

    padding-top:60px;

    }

    .footer__logo{

    margin:auto auto 20px;

    }

    /* Productos de láminas/peso: fila completa para que el input tenga espacio */
    .product:has(.product__cart-area--peso){

    grid-column:1 / -1;

    }

    /* Ajustes internos del área de peso en celular: apilar input y botón */
    .peso-label{

    font-size:.76rem;

    }

    .peso-input-row{

    flex-direction:column;

    align-items:stretch;

    gap:8px;

    }

    .peso-input-row .product__button{

    width:100%;

    border-radius:50px;

    height:44px;

    font-size:1.1rem;

    }

    .peso-spec{

    padding:7px 10px;

    font-size:.8rem;

    }

    /* Selector de cantidad en tarjetas normales */
    .product__qty .qty-value{

    min-width:20px;

    font-size:.9rem;

    }

    }
    
    
    
    /* 480px */
    
    @media (max-width:480px){
    
    .container{
    
    width:92%;
    
    }
    
    .section{
    
    padding:60px 0;
    
    }
    
    .section__title{
    
    font-size:1.9rem;
    
    }
    
    .hero h1{
    
    font-size:2.1rem;
    
    }
    
    .hero__tag{
    
    font-size:.75rem;
    
    }
    
    .logo img{

    width:42px;

    height:42px;

    }

    .logo span{

    font-size:.78rem;

    }

    .logo strong{

    font-size:1.1rem;

    }
    
    .product__image{

    height:150px;

    }

    .product__content{

    padding:12px;

    }

    .product__price{

    font-size:1.35rem;

    }
    
    .cart-item{
    
    grid-template-columns:70px 1fr;
    
    }
    
    .cart-item img{
    
    width:70px;
    
    height:70px;
    
    }
    
    .floating-whatsapp{
    
    width:58px;
    
    height:58px;
    
    font-size:1.8rem;
    
    right:18px;
    
    bottom:18px;
    
    }
    
    .scroll-top{
    
    left:18px;
    
    bottom:18px;
    
    width:48px;
    
    height:48px;
    
    }
    
    }
    
    
    
    /* 420px — el logo queda solo con "La Mona" para no chocar con los botones */

    @media (max-width:420px){

    .logo span{

    font-size:0;

    }

    .logo strong{

    font-size:1.15rem;

    }

    }



    /* 360px */

    @media (max-width:360px){
    
    .hero h1{
    
    font-size:1.8rem;
    
    }
    
    .section__title{
    
    font-size:1.6rem;
    
    }
    
    .btn{
    
    padding:14px 20px;
    
    font-size:.9rem;
    
    }
    
    .product__title{
    
    font-size:1.1rem;
    
    }
    
    .product__price{

    font-size:1.3rem;

    }

    /* Botones del stepper y carrito más compactos para caber en tarjeta de ~130px */
    .product__qty button{

    width:28px;

    height:28px;

    font-size:1rem;

    }

    .product__button{

    width:38px;

    height:38px;

    font-size:.9rem;

    }

    }