/* ============================================================ */
/* CATEGORIA.CSS — Estilos das páginas de subcategoria do GZL   */
/* Mesma paleta do home.css: carvão + amarelo + menta           */
/* ============================================================ */

/* ============================================ */
/* VARIÁVEIS (mesmas da home, agora locais)     */
/* ============================================ */
:root {
    --gzl-bg:            #1a1618;
    --gzl-bg-card:       #1f1a1d;
    --gzl-border:        #2e2629;

    --gzl-primary:       #fbf206;
    --gzl-primary-glow:  rgba(251, 242, 6, 0.30);

    --gzl-accent:        #25D366;
    --gzl-accent-glow:   rgba(37, 211, 102, 0.30);

    --gzl-text:          #ffffff;
    --gzl-text-muted:    #999999;
    --gzl-text-dim:      #666666;
}

/* ============================================ */
/* CORES DE CATEGORIA — fallback primeiro,      */
/* depois as específicas (a última vence)       */
/* ============================================ */

/* Fallback — usado quando nenhuma classe c-* está presente */
.gzl-categoria   { --cat-color: #fbf206; --cat-rgb: 251, 242, 6; }

/* Cores específicas (vêm depois, vencem o fallback) */
.c-voce          { --cat-color: #29B6F6; --cat-rgb: 41, 182, 246; }   /* azul-céu */
.c-casa          { --cat-color: #eb86e2; --cat-rgb: 235, 134, 226; }  /* rosa-claro */
.c-gastronomia   { --cat-color: #F44336; --cat-rgb: 244, 67, 54; }    /* vermelho */
.c-saude         { --cat-color: #25D366; --cat-rgb: 37, 211, 102; }   /* verde-menta */
.c-pets          { --cat-color: #FF6F00; --cat-rgb: 255, 111, 0; }    /* laranja-escuro */
.c-construcao    { --cat-color: #FF9800; --cat-rgb: 255, 152, 0; }    /* laranja */
.c-auto          { --cat-color: #E91E63; --cat-rgb: 233, 30, 99; }    /* rosa-magenta */
.c-profissional  { --cat-color: #00BCD4; --cat-rgb: 0, 188, 212; }    /* ciano */
.c-agro          { --cat-color: #4CAF50; --cat-rgb: 76, 175, 80; }    /* verde */
.c-comunidade    { --cat-color: #3F51B5; --cat-rgb: 63, 81, 181; }    /* índigo */
.c-educacional   { --cat-color: #F9A825; --cat-rgb: 249, 168, 37; }   /* âmbar */
.c-lazer         { --cat-color: #9C27B0; --cat-rgb: 156, 39, 176; }   /* roxo */


/* ============================================ */
/* BODY / BASE                                  */
/* ============================================ */
body {
    background: var(--gzl-bg) !important;
    color: var(--gzl-text);
}

/* ============================================ */
/* CABEÇALHO DA SUBCATEGORIA                    */
/* ============================================ */
.gzl-cabecalho {
    background: linear-gradient(135deg,
        rgba(var(--cat-rgb), 0.25) 0%,
        rgba(var(--cat-rgb), 0.08) 50%,
        transparent 100%);
    border: 2px solid rgba(var(--cat-rgb), 0.35);
    border-radius: 10px;
    padding: 30px 25px;
    margin: 25px 0 30px 0;
    display: flex;
    align-items: center;
    gap: 22px;
    position: relative;
    overflow: hidden;
}

.gzl-cabecalho::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--cat-color);
}

.gzl-cabecalho-icone {
    font-size: 3.5rem;
    color: var(--cat-color);
    filter: drop-shadow(0 0 20px rgba(var(--cat-rgb), 0.5));
    line-height: 1;
    flex-shrink: 0;
}

.gzl-cabecalho-texto {
    flex: 1;
    text-align: left;
}

.gzl-cabecalho-texto h1 {
    font-family: 'Bungee', sans-serif;
    font-size: 2rem;
    color: #ffffff;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.1;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.gzl-cabecalho-texto p {
    color: var(--gzl-text-muted);
    font-size: 0.9rem;
    margin: 0;
    font-weight: 300;
    letter-spacing: 0.5px;
}

.gzl-cabecalho-texto p strong {
    color: var(--cat-color);
    font-weight: 700;
}

@media (max-width: 600px) {
    .gzl-cabecalho {
        padding: 22px 18px;
        gap: 16px;
    }
    .gzl-cabecalho-icone { font-size: 2.5rem; }
    .gzl-cabecalho-texto h1 { font-size: 1.4rem; }
    .gzl-cabecalho-texto p  { font-size: 0.8rem; }
}

/* ============================================ */
/* LAYOUT PRINCIPAL — LISTA + ANÚNCIO           */
/* ============================================ */
.gzl-categoria-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 24px;
    margin-bottom: 50px;
    align-items: start;
}

.gzl-lista,
.gzl-anuncios {
    box-sizing: border-box;
}

/* ============================================ */
/* LISTA LATERAL                                */
/* ============================================ */
.gzl-lista {
    background: var(--gzl-bg-card);
    border: 2px solid var(--gzl-border);
    border-radius: 10px;
    padding: 20px;
    max-height: 85vh;
    overflow-y: auto;
    position: sticky;
    top: 20px;
}

.gzl-lista::-webkit-scrollbar { width: 6px; }
.gzl-lista::-webkit-scrollbar-track { background: transparent; }
.gzl-lista::-webkit-scrollbar-thumb {
    background: rgba(var(--cat-rgb), 0.3);
    border-radius: 3px;
}
.gzl-lista::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--cat-rgb), 0.6);
}

.gzl-lista-titulo {
    font-family: 'Oswald', sans-serif;
    color: var(--cat-color);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 16px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(var(--cat-rgb), 0.25);
}

/* Item da lista (negócio) */
.gzl-item {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.2s ease;
    border-radius: 4px;
}
.gzl-item:last-child { border-bottom: none; }
.gzl-item:hover {
    background: rgba(var(--cat-rgb), 0.05);
    padding-left: 6px;
    padding-right: 6px;
}

.gzl-item-nome {
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
    margin: 0 0 4px 0;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 6px;
}
.gzl-item-nome .gzl-selo {
    color: var(--cat-color);
    font-size: 0.75rem;
    flex-shrink: 0;
}

.gzl-item-endereco {
    color: var(--gzl-text-muted);
    font-size: 0.78rem;
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.gzl-item-contato {
    font-size: 0.82rem;
    margin: 0;
}

/* WhatsApp — patrocinador (clicável) */
.gzl-item-contato a.gzl-zap {
    color: var(--gzl-accent);
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
}
.gzl-item-contato a.gzl-zap:hover {
    color: #ffffff;
    text-shadow: 0 0 12px var(--gzl-accent-glow);
}

/* WhatsApp — não patrocinador (texto puro) */
.gzl-item-contato .gzl-zap-texto {
    color: var(--gzl-text-dim);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* ============================================ */
/* ÁREA DE ANÚNCIOS                             */
/* ============================================ */
.gzl-anuncios {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Anúncio vazio (placeholder) */
.gzl-anuncio-vazio {
    background: linear-gradient(160deg,
        rgba(var(--cat-rgb), 0.12) 0%,
        rgba(var(--cat-rgb), 0.03) 60%,
        transparent 100%);
    border: 2px dashed rgba(var(--cat-rgb), 0.35);
    border-radius: 10px;
    padding: 50px 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    position: relative;
    overflow: hidden;
}

.gzl-anuncio-vazio::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle at 50% 50%,
        rgba(var(--cat-rgb), 0.08) 0%, transparent 60%);
    animation: gzlPulse 6s ease-in-out infinite;
}
@keyframes gzlPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50%      { transform: scale(1.1); opacity: 1; }
}

.gzl-anuncio-vazio-icone {
    font-size: 3rem;
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 20px rgba(var(--cat-rgb), 0.4));
}

.gzl-anuncio-vazio h3 {
    font-family: 'Oswald', sans-serif;
    color: #ffffff;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 12px 0;
    position: relative;
    z-index: 1;
}

.gzl-anuncio-vazio p {
    color: var(--gzl-text-muted);
    font-size: 0.95rem;
    margin: 0 0 25px 0;
    max-width: 380px;
    line-height: 1.5;
    position: relative;
    z-index: 1;
}

.gzl-anuncio-cta {
    display: inline-block;
    padding: 13px 32px;
    background: transparent;
    border: 2px solid var(--gzl-primary);
    color: var(--gzl-primary);
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 30px;
    transition: all 0.3s ease;
    font-size: 0.85rem;
    position: relative;
    z-index: 1;
}
.gzl-anuncio-cta:hover {
    background: var(--gzl-primary);
    color: #000;
    box-shadow: 0 6px 25px var(--gzl-primary-glow);
}

/* Anúncio real (preenchido) */
.gzl-anuncio-real {
    background: var(--gzl-bg-card);
    border: 2px solid var(--gzl-border);
    border-radius: 10px;
    padding: 24px;
    transition: all 0.3s ease;
}
.gzl-anuncio-real:hover {
    border-color: var(--cat-color);
    box-shadow: 0 10px 30px rgba(var(--cat-rgb), 0.2);
    transform: translateY(-3px);
}

/* ============================================ */
/* RESPONSIVO — MOBILE                          */
/* ============================================ */
@media (max-width: 768px) {
    .gzl-categoria-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    /* No mobile, anúncio sobe e lista desce */
    .gzl-anuncios  { order: 1; }
    .gzl-lista     { order: 2; max-height: none; position: static; }

    .gzl-anuncio-vazio { min-height: 240px; padding: 35px 20px; }
    .gzl-anuncio-vazio h3 { font-size: 1.2rem; }
    .gzl-anuncio-vazio p  { font-size: 0.85rem; }
    .gzl-anuncio-vazio-icone { font-size: 2.5rem; }
}
/* ============================================ */
/* GRADE DE SUBCATEGORIAS (página de categoria) */
/* ============================================ */
.gzl-subcategorias {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 30px 0 50px 0;
}

.gzl-sub-card {
    /* Herda --cat-color e --cat-rgb do wrapper .gzl-categoria */
    background: linear-gradient(160deg,
        rgba(var(--cat-rgb), 0.22) 0%,
        rgba(var(--cat-rgb), 0.06) 55%,
        var(--gzl-bg-card) 100%);
    border: 2px solid rgba(var(--cat-rgb), 0.28);
    padding: 26px 18px;
    min-height: 190px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    isolation: isolate;
}

/* Barra colorida no topo — igual aos cards da HP */
.gzl-sub-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--cat-color);
    z-index: 3;
    transition: height 0.3s ease;
}
.gzl-sub-card:hover::before { height: 6px; }

/* Hover: fundo mais saturado + elevação + glow */
.gzl-sub-card:hover {
    background: linear-gradient(160deg,
        rgba(var(--cat-rgb), 0.38) 0%,
        rgba(var(--cat-rgb), 0.14) 55%,
        var(--gzl-bg-card) 100%);
    border-color: var(--cat-color);
    box-shadow: 0 14px 40px rgba(var(--cat-rgb), 0.28);
    transform: translateY(-6px);
}

.gzl-sub-icone {
    font-size: 2.8rem;
    margin-bottom: 12px;
    color: var(--cat-color);
    filter: drop-shadow(0 4px 14px rgba(var(--cat-rgb), 0.45));
    transition: transform 0.3s ease;
    line-height: 1;
}
.gzl-sub-card:hover .gzl-sub-icone {
    transform: scale(1.15) translateY(-4px);
}

.gzl-sub-titulo {
    font-family: 'Oswald', sans-serif;
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 6px 0;
    line-height: 1.15;
}

.gzl-sub-desc {
    font-family: 'Bebas Neue', sans-serif;
    color: #b8b0b3;
    font-size: 0.9rem;
    line-height: 1.4;
    letter-spacing: 0.5px;
}

/* Badge com contagem (opcional) */
.gzl-sub-count {
    display: inline-block;
    margin-top: 10px;
    padding: 3px 12px;
    background: rgba(var(--cat-rgb), 0.15);
    border: 1px solid rgba(var(--cat-rgb), 0.35);
    border-radius: 20px;
    color: var(--cat-color);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Seta indicativa (aparece no hover) */
.gzl-sub-seta {
    position: absolute;
    bottom: 12px;
    right: 15px;
    color: rgba(var(--cat-rgb), 0.5);
    font-size: 0.9rem;
    opacity: 0;
    transform: translateX(-8px);
    transition: all 0.3s ease;
}
.gzl-sub-card:hover .gzl-sub-seta {
    opacity: 1;
    transform: translateX(0);
    color: var(--cat-color);
}

/* Responsivo */
@media (max-width: 900px) {
    .gzl-subcategorias { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .gzl-sub-card { min-height: 160px; padding: 20px 14px; }
    .gzl-sub-titulo { font-size: 1.15rem; }
    .gzl-sub-icone { font-size: 2.2rem; }
}

@media (max-width: 600px) {
    .gzl-subcategorias { grid-template-columns: 1fr; gap: 10px; }
    .gzl-sub-card { min-height: 130px; padding: 18px 14px; }
    .gzl-sub-icone { font-size: 2rem; margin-bottom: 8px; }
    .gzl-sub-titulo { font-size: 1.1rem; letter-spacing: 1px; }
    .gzl-sub-desc { font-size: 0.8rem; }
}
/* ============================================ */
/* PÁGINA DE CATEGORIA — LAYOUT FULL WIDTH      */
/* (esconde sidebar e centraliza o conteúdo)    */
/* ============================================ */
.gzl-categoria ~ * .container-sidebar-right,
body:has(.gzl-categoria) .container-sidebar-right {
    display: none !important;
}
body:has(.gzl-categoria) .container-component {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-right: 0 !important;
}
body:has(.gzl-categoria) .site-grid {
    display: block !important;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ============================================ */
/* BANNER DECORATIVO (opcional abaixo do header)*/
/* ============================================ */
.gzl-banner {
    display: block;
    margin: 0 auto 30px auto;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    border: 2px solid rgba(var(--cat-rgb), 0.3);
    box-shadow: 0 8px 30px rgba(var(--cat-rgb), 0.2);
}

/* ============================================ */
/* BARRA DE INFO (contador de subcategorias)    */
/* ============================================ */
.gzl-info-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 20px 0;
    flex-wrap: wrap;
    gap: 10px;
}
.gzl-info-total {
    background: var(--cat-color);
    color: #000;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 6px 16px;
    border-radius: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.gzl-info-dica {
    color: var(--gzl-text-muted);
    font-size: 0.78rem;
    font-style: italic;
}
@media (max-width: 600px) {
    .gzl-info-bar { justify-content: center; text-align: center; }
}
/* ============================================ */
/* TÍTULOS DE GRUPO (dentro de categorias)      */
/* ============================================ */
.gzl-grupo-titulo {
    font-family: 'Oswald', sans-serif;
    color: var(--cat-color);
    font-size: 1.3rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 40px 0 18px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(var(--cat-rgb), 0.25);
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.2;
}

.gzl-grupo-titulo i {
    font-size: 1.2rem;
    color: var(--cat-color);
    filter: drop-shadow(0 0 8px rgba(var(--cat-rgb), 0.4));
}

/* Primeiro grupo não precisa de margem-topo grande */
.gzl-info-bar + .gzl-grupo-titulo {
    margin-top: 25px;
}

/* Mobile */
@media (max-width: 600px) {
    .gzl-grupo-titulo {
        font-size: 1rem;
        letter-spacing: 1px;
        margin: 30px 0 14px 0;
    }
    .gzl-grupo-titulo i {
        font-size: 1rem;
    }
}