/* =========================================================
   TEMA FRESH
========================================================= */


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

.tema-fresh .hero {
    padding: 90px 20px;
}

.tema-fresh .hero::before {
    background: linear-gradient(
        rgba(0,0,0,.45),
        rgba(0,0,0,.55)
    );
}

.tema-fresh .logo {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 6px solid rgba(255,255,255,.85);
    box-shadow: 0 10px 25px rgba(0,0,0,.25);
}

.tema-fresh .hero h1 {
    font-size: 3.5rem;
    font-weight: 700;
}

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


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

.tema-fresh .categorias {
    gap: 12px;
    padding: 16px;
    background: rgba(255,255,255,.22);
}

.tema-fresh .categorias button {
    padding: 13px 24px;
    border-radius: 18px;
    color: white;
    font-size: .95rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
    border: 2px solid rgba(255,255,255,.15);
}

.tema-fresh .categoria-activa {
    transform: scale(1.08);
    border: 2px solid rgba(255,255,255,.55);
    box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

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


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

.tema-fresh .productos {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}


/* =========================================================
   CARDS
========================================================= */

.tema-fresh .card {
    border-radius: 28px;
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(5px);
    border: 2px solid rgba(255,255,255,.4);
}

.tema-fresh .card:hover {
    transform: translateY(-10px) scale(1.02);
}

.tema-fresh .card img {
    height: 260px;
}

.tema-fresh .card-content {
    padding: 24px;
}

.tema-fresh .card-content h3 {
    font-size: 1.7rem;
}

.tema-fresh .precio {
    font-size: 1.8rem;
}


/* =========================================================
   BADGE DESTACADO
========================================================= */

.tema-fresh .badge-destacado {
    border-radius: 30px;
}


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

.tema-fresh .card-sin-imagen {
    padding: 10px;
}

.tema-fresh .card-sin-imagen .card-content {
    padding: 18px;
}

.tema-fresh .card-sin-imagen h3 {
    font-size: 1.4rem;
}


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

.tema-fresh .footer {
    background:
        linear-gradient(rgba(93,102,48,.72), rgba(93,102,48,.72)),
        var(--color-superficie);
}

.tema-fresh .footer h2 {
    letter-spacing: 1px;
}

.tema-fresh .footer-redes a {
    border-radius: 18px;
}

.tema-fresh .footer-item span {
    transform: scale(1.1);
}


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

.tema-fresh .whatsapp {
    padding: 18px 28px;
    border-radius: 22px;
    font-size: 1.05rem;
    border: 2px solid rgba(255,255,255,.25);
    box-shadow: 0 10px 25px rgba(93,102,48,.35);
    animation: pulseFresh 2s infinite;
}


/* =========================================================
   ANIMACIONES
========================================================= */

@keyframes pulseFresh {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}