/* --------------- PAGINA PRODUCTOS -------------- */

/* PRODUCTOS-HERO */
.productos-hero{
    padding: 140px 20px 20px;
    text-align: center;
    background-color: #f8f5f2;
}

.productos-hero-content{
    max-width: 800px;
    margin: 0 auto;
}

.productos-hero h1{
    font-family: "Playfair Display", serif;
    font-size: 3rem;
    color: #3b2a23;
    margin-bottom: 1rem;
}

.productos-hero p{
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
}
/* FILTROS DE PRODUCTOS*/

.filtros{

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:30px;

    padding:35px 20px 55px;

    background:#faf7f4;

    border-radius:18px;

}

.categorias{

    display:flex;
    justify-content:center;
    flex-wrap:wrap;

    gap:15px;

}

/*BOTONES DE PRODUCTOS*/
.categoria-btn{

    padding:12px 24px;

    border:2px solid #6f4e37;

    background:white;

    color:#6f4e37;

    border-radius:30px;

    cursor:pointer;

    transition:.3s;

    font-size:1rem;

}

/*EFECTOS DE BOTONES PRODUCTOS */
.categoria-btn:hover{

    background:#6f4e37;

    color:white;

}

.categoria-btn.active{

    background:#6f4e37;

    color:white;

}

/*ETIQUETAS */
.etiquetas{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:12px;

}

.etiqueta-btn{

    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border:none;

    border-radius:999px;

    cursor:pointer;

    font-size:.95rem;

    font-weight:600;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;

}

.etiqueta-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 5px 15px rgba(0,0,0,.08);

}

.etiqueta-btn[data-etiqueta="vegano"]{

    background:#EDF8F0;

    color:#2E7D32;

    border:1px solid #CDE8D3;

}

.etiqueta-btn[data-etiqueta="sinLactosa"]{

    background:#EAF4FF;

    color:#1565C0;

    border:1px solid #C7DFF7;

}

.etiqueta-btn[data-etiqueta="vegano"].active{

    background:#2E7D32;

    color:white;

}

.etiqueta-btn[data-etiqueta="sinTacc"].active{

    background:#C58B00;

    color:white;

}

.etiqueta-btn[data-etiqueta="sinLactosa"].active{

    background:#1565C0;

    color:white;

}

.etiqueta-btn.active{

    transform:translateY(-2px);

    box-shadow:0 6px 16px rgba(0,0,0,.12);

}

.etiqueta-btn.active{

    filter:saturate(1.2);

}

.etiqueta-btn.active::after{

    content:"✓";

    font-weight:bold;

    margin-left:4px;

    border-width: 2px;

}

/* ACCIONES DEL CATÁLOGO */

.acciones-catalogo{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    width:100%;

    max-width:900px;

}

/*BARRA DE BUSQUEDA*/
.busqueda{

    flex:1;

}

#buscador{

    width:100%;

    padding:15px 22px;

    font-size:1rem;

    border-radius:30px;

    border:2px solid #6f4e37;

    background:white;

    transition:.3s;

}

#buscador:focus{

    outline:none;

    box-shadow:0 0 15px rgba(111,78,55,.15);

}

/*SECCION PARA ORDENAR LOS PRODUCTOS*/
.ordenar{

    display:flex;

    align-items:center;

    gap:10px;

    padding:0 18px;

    height:54px;

    border:2px solid #6F4E37;

    border-radius:30px;

    background:white;

    flex-shrink:0;

}

.ordenar i{

    color:#6F4E37;

    font-size:1rem;

}

#orden{

    border:none;

    background:transparent;

    outline:none;

    font:inherit;

    color:#3A2E2A;

    cursor:pointer;

}

.ordenar:hover{

    box-shadow:0 0 15px rgba(111,78,55,.12);

}

.ordenar:focus-within{

    box-shadow:0 0 15px rgba(111,78,55,.18);

}

/*CONTADOR DE PRODUCTOS*/
.barra-catalogo{

    width:min(1200px,90%);

    margin:0 auto 20px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

#contador-productos{

    display:none;

    color:#777;

    font-size:.95rem;

    font-weight:500;

}

#contador-productos.visible{

    display:block;

}

#limpiar-filtros{

    display:none;

    padding:8px 16px;

    border:1px solid #8B5E3C;

    border-radius:999px;

    background:white;

    color:#8B5E3C;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

#limpiar-filtros.visible{

    display:block;

}

#limpiar-filtros:hover{

    background:#8B5E3C;

    color:white;

}
/*ESTADO VACIO*/
.estado-vacio{

    grid-column:1/-1;

    text-align:center;

    padding:80px 20px;

}

.estado-vacio h3{

    margin:20px 0 10px;

    font-family:"Playfair Display", serif;

    color:var(--color-primario);

}

.estado-vacio p{

    color:#777;

    line-height:1.7;

}

/*CATALOGO PRODUCTOS*/
.catalogo{

    width:min(1200px,90%);
    margin:20px auto 80px;

}

#productos-container{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));

    justify-content:center;

    gap:2rem;

    opacity: 1;
    transform: translateY(0);

    transition:
        opacity .25s ease,
        transform .25s ease;

}

#productos-container.oculto {
    opacity: 0;
    transform: translateY(10px);
}

#productos-container .card{
    width: 100%;
}

.precio{
    font-size: 1.2rem;
    font-weight: bold;
    color: #8B5E3C;
}

/*-----------PAGINAS-----------*/
#paginacion{

    display:flex;

    justify-content:center;

    gap:14px;

    margin:50px 0;

}

#paginacion button{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:white;

    border:2px solid #8B5E3C;

    color:#8B5E3C;

    cursor:pointer;

    transition:.25s;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:
        background .25s,
        color .25s,
        transform .2s,
        box-shadow .2s;

}

#paginacion button:hover:not(:disabled){

    background:#8B5E3C;

    color:white;

    transform:translateY(-2px);

    box-shadow:0 6px 16px rgba(0,0,0,.15);

}

#paginacion button.active{

    background:#8B5E3C;

    color:white;

}


#paginacion button:disabled{

    opacity:.45;

    cursor:not-allowed;

    transform:none;

}

/* ------ Celulares ----- */
@media (max-width: 480px){

    .productos-hero{
        padding: 110px 20px 45px;
    }

    .productos-hero h1{
        font-size: 2.2rem;
        line-height: 1.2;
    }

    .productos-hero p{
        font-size: .95rem;
        line-height: 1.6;
    }

    .card img{

        height:180px;

    }

    .categoria-btn{

        padding:10px 20px;

        font-size:.95rem;

    }

}

@media (max-width: 768px){
    .acciones-catalogo{

        flex-direction:column;

        align-items:stretch;

    }

    .ordenar{

        justify-content:center;

    }

    .barra-catalogo{

        flex-direction:column;

        gap:12px;

    }
}