/*
==================================================
CHURRERÍA NONINÁ
RESPONSIVE.CSS
Versión 1.0
==================================================
*/

/* =========================
   TABLETS
========================= */

@media (max-width: 1024px){

    .header{
        padding:15px;
    }

    .empresa h1{
        font-size:24px;
    }

    .hero{
        padding:50px 20px;
    }

    .hero h2{
        font-size:34px;
    }

    .grid-productos{
        grid-template-columns:repeat(2,1fr);
        gap:20px;
        padding:20px;
    }

    .panel-carrito{
        width:380px;
    }

}


/* =========================
   MÓVILES
========================= */

@media (max-width:768px){

    .header{
        flex-wrap:wrap;
        text-align:center;
    }

    .logo{
        width:100%;
        margin-bottom:10px;
    }

    .logo img{
        width:75px;
    }

    .empresa{
        padding:0;
        width:100%;
    }

    .empresa h1{
        font-size:22px;
    }

    .empresa p{
        font-size:14px;
    }

    .boton-carrito{
        position:fixed;
        bottom:20px;
        right:20px;
        z-index:9999;
        width:65px;
        height:65px;
    }

    .hero{
        padding:40px 15px;
    }

    .hero h2{
        font-size:28px;
    }

    .hero p{
        font-size:16px;
    }

    .buscador{
        padding:15px;
    }

    .buscador input{
        padding:14px;
        font-size:16px;
    }

    .categorias{
        padding:15px;
        gap:8px;
    }

    .categorias button{
        font-size:14px;
        padding:10px 18px;
    }

    .grid-productos{
        grid-template-columns:1fr;
        padding:15px;
    }

    .imagen-producto img{
        height:220px;
    }

    .contenido-producto h3{
        font-size:22px;
    }

    .precio{
        font-size:24px;
    }

    .pie-producto{
        flex-direction:column;
        gap:12px;
        align-items:stretch;
    }

    .agregar{
        width:100%;
    }

    .panel-carrito{
        width:100%;
    }

}


/* =========================
   MÓVILES PEQUEÑOS
========================= */

@media (max-width:480px){

    .hero h2{
        font-size:24px;
    }

    .hero p{
        font-size:15px;
    }

    .contenido-producto{
        padding:16px;
    }

    .contenido-producto h3{
        font-size:20px;
    }

    .ingredientes{
        font-size:14px;
    }

    .precio{
        font-size:22px;
    }

    .cabecera-carrito{
        padding:18px;
    }

    .acciones-carrito{
        flex-direction:column;
    }

    .acciones-carrito button{
        width:100%;
    }

}