@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap');

:root{
    --cor-principal: #9152d9;
    --cor-gradiente: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
    --cor-branco: #ffffff;
    --cor-preto: #0b0b0f;
    --cor-cinza-claro: #f4f4f8;
    --cor-borda: #e5e7eb;
    --cor-texto: #4b5563;
    --fonte-titulos: "Manrope", sans-serif;
    --fonte-paragrafos: "Montserrat", sans-serif;
    --sombra-card: 0 20px 45px rgba(15, 23, 42, 0.12);
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    font-size: 62.5%;
}

body{
    font-family: var(--fonte-paragrafos);
    background: var(--cor-branco);
    color: var(--cor-preto);
    line-height: 1.5;
    font-size: 1.6rem;
}

a{
    text-decoration: none;
    color: inherit;
}

.categorias-page{
    width: 90%;
    margin: 4rem auto;
}

 .categoria-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
    gap: 2.4rem;
 }
 
 .categoria-card{
     background: var(--cor-branco);
     border-radius: 1.8rem;
     border: 1px solid var(--cor-borda);
     padding: 2.4rem;
     display: flex;
     flex-direction: column;
     gap: 1.4rem;
     box-shadow: 0 18px 35px rgba(15,23,42,0.08);
     transition: transform .25s ease, border .25s ease, box-shadow .25s ease;
 }
 
 .categoria-card:hover{
     transform: translateY(-4px) scale(1.01);
     border-color: rgba(145,82,217,.45);
     box-shadow: 0 25px 45px rgba(15,23,42,0.12);
 }
 
 .card-media{
     position: relative;
     background: #f8f5ff;
     border-radius: 1.6rem;
     padding: 4rem 1.2rem 2rem;
     min-height: 16rem;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
 }
 
 .categoria-icon{
     width: 7.2rem;
     height: 7.2rem;
     border-radius: 1.8rem;
     background: var(--cor-gradiente);
     color: var(--cor-branco);
     display: grid;
     place-items: center;
     font-size: 3rem;
     box-shadow: 0 18px 30px rgba(99,91,255,0.25);
     position: relative;
 }
 
 .card-media::after{
     content: "";
     position: absolute;
     width: 11rem;
     height: 11rem;
     border-radius: 50%;
     background: rgba(145,82,217,0.12);
    bottom: -3rem;
    right: -2rem;
 }

.pill{
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    background: var(--cor-principal);
    color: var(--cor-branco);
    padding: .4rem 1rem;
    border-radius: 999px;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: .1rem;
}

 .card-body h3{
     font-size: 2.1rem;
     font-family: var(--fonte-titulos);
     margin-bottom: .4rem;
 }
 
 .card-body p{
     color: var(--cor-texto);
    font-size: 1.4rem;
 }

.card-footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.3rem;
    color: var(--cor-principal);
    font-weight: 600;
}

.card-footer i{
    font-size: 1.6rem;
}

.empty-state{
    grid-column: 1 / -1;
    text-align: center;
    color: var(--cor-texto);
    padding: 4rem 0;
}

@media (max-width: 1024px){
    .categorias-page{
        width: 94%;
    }
}

@media (max-width: 768px){
    html{
        font-size: 56.25%;
    }

    .categoria-grid{
        grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    }
}

@media (max-width: 480px){
    html{
        font-size: 50%;
    }
}

/* ============================================
   CSS FORÇADO PARA FOOTER BOTÕES - FINAL DO ARQUIVO
   ============================================ */
body .container-footer .footer-cta .cta-buttons a.btn-primary,
body .container-footer .footer-cta .cta-buttons a.btn-secondary,
body footer .footer-cta .cta-buttons .btn-primary,
body footer .footer-cta .cta-buttons .btn-secondary,
html body .container-footer .footer-cta .cta-buttons a,
html body footer .footer-cta .cta-buttons a,
body .footer-cta .cta-buttons a[class*="btn"] {
    padding: 1.6rem 3.5rem !important;
    border-radius: 9999px !important;
    font-weight: 700 !important;
    font-size: 1.8rem !important;
    width: 320px !important;
    min-width: 320px !important;
    max-width: 320px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    animation: pulse-btn-footer 2s infinite !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
    border: 2px solid rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
    margin: 0.5rem !important;
}
body .container-footer .footer-cta .cta-buttons a.btn-primary,
body footer .footer-cta .cta-buttons .btn-primary {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    color: #6d28d9 !important;
}
body .container-footer .footer-cta .cta-buttons a.btn-secondary,
body footer .footer-cta .cta-buttons .btn-secondary {
    background: rgba(255,255,255,0.1) !important;
    color: #ffffff !important;
}
@media (max-width: 768px) {
    body .container-footer .footer-cta .cta-buttons a,
    body footer .footer-cta .cta-buttons a {
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
    }
}
@media (max-width: 480px) {
    body .container-footer .footer-cta .cta-buttons a,
    body footer .footer-cta .cta-buttons a {
        width: 240px !important;
        min-width: 240px !important;
        max-width: 240px !important;
    }
}

/* CSS ULTRA ESPECÍFICO - SOBRESCREVE TUDO - ÚLTIMA REGRA */
html body .container-footer .footer-cta .cta-buttons a.btn-primary,
html body .container-footer .footer-cta .cta-buttons a.btn-secondary,
html body footer .footer-cta .cta-buttons .btn-primary,
html body footer .footer-cta .cta-buttons .btn-secondary,
html body .footer-cta .cta-buttons a[class*="btn-primary"],
html body .footer-cta .cta-buttons a[class*="btn-secondary"],
html body .container-footer .footer-cta .cta-buttons a[href*="filtro"],
html body .container-footer .footer-cta .cta-buttons a[href*="whatsapp"] {
    padding: 1.6rem 3.5rem !important;
    border-radius: 9999px !important;
    font-weight: 700 !important;
    font-size: 1.8rem !important;
    width: 320px !important;
    min-width: 320px !important;
    max-width: 320px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    animation: pulse-btn-footer 2s infinite !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
    border: 2px solid rgba(255,255,255,0.3) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
    margin: 0.5rem !important;
}
html body .container-footer .footer-cta .cta-buttons a.btn-primary,
html body footer .footer-cta .cta-buttons .btn-primary,
html body .footer-cta .cta-buttons a[class*="btn-primary"],
html body .container-footer .footer-cta .cta-buttons a[href*="filtro"] {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    color: #6d28d9 !important;
}
html body .container-footer .footer-cta .cta-buttons a.btn-secondary,
html body footer .footer-cta .cta-buttons .btn-secondary,
html body .footer-cta .cta-buttons a[class*="btn-secondary"],
html body .container-footer .footer-cta .cta-buttons a[href*="whatsapp"] {
    background: rgba(255,255,255,0.1) !important;
    color: #ffffff !important;
}
@media (max-width: 768px) {
    html body .container-footer .footer-cta .cta-buttons a,
    html body footer .footer-cta .cta-buttons a {
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
    }
}
@media (max-width: 480px) {
    html body .container-footer .footer-cta .cta-buttons a,
    html body footer .footer-cta .cta-buttons a {
        width: 240px !important;
        min-width: 240px !important;
        max-width: 240px !important;
    }
}