/* =========================================================
    TEMA CLÁSICO
========================================================= */


/* =========================================================
    HERO
========================================================= */

.tema-clasico .hero {
    padding: 70px 20px;
}

.tema-clasico .logo {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    border: 5px solid white;
}

.tema-clasico .hero h1 {
    font-size: 3rem;
}

.tema-clasico .hero p {
    font-size: 1.1rem;
}


/* =========================================================
    CATEGORÍAS
========================================================= */

.tema-clasico .categorias {
    gap: 10px;
    padding: 15px;
    background: var(--color-superficie);
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

.tema-clasico .categorias button {
    padding: 12px 20px;
    border-radius: 30px;
    color: white;
}

.tema-clasico .categoria-activa {
    transform: scale(1.05);
    filter: brightness(.9);
    box-shadow: 0 5px 15px rgba(0,0,0,.18);
}

.tema-clasico .categorias button.categoria-activa {
    background: var(--color-principal) !important;
    color: #ffffff !important;
}


/* =========================================================
    PRODUCTOS
========================================================= */

.tema-clasico .productos {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

.tema-clasico .card {
    border-radius: 20px;
}


/* =========================================================
    CARDS SIN IMAGEN
========================================================= */

.tema-clasico .card-sin-imagen {
    padding: 8px;
}


/* =========================================================
    FOOTER
========================================================= */

.tema-clasico .footer {
    background:
        linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
        var(--color-superficie);
}

.tema-clasico .footer-redes a {
    border-radius: 30px;
}


/* =========================================================
    WHATSAPP
========================================================= */

.tema-clasico .whatsapp {
    padding: 15px 22px;
    border-radius: 50px;
    font-size: 1rem;
    box-shadow: 0 5px 15px rgba(0,0,0,.2);
}