@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
    --bg-light: #f8fafc;        /* Fundo claro, limpo e descansado */
    --bg-white: #ffffff;
    --border-glass: #e2e8f0;    /* Bordas suaves e modernas */
    
    /* Cores Oficiais da sua Marca */
    --primary: #0d2151;         /* Navy Oficial WLS Performance */
    --primary-hover: #081633;
    --secondary: #0b4f93;       /* Azul Secundário */
    --accent: #c9a227;          /* Dourado Oficial */
    
    --text-main: #0f172a;       /* Leitura perfeita */
    --text-muted: #64748b;
    
    --font-sans: 'Plus Jakarta Sans', sans-serif;
    --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --radius-lg: 16px;
    --radius-md: 10px;
    --radius-sm: 6px;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-light);
    color: var(--text-main);
    font-family: var(--font-sans);
    min-height: 100vh;
}

/* Item 1: overflow-x:hidden foi tirado do body e movido pra esse wrapper (que só
   começa depois do </header> no index.html). Ancestral com overflow != visible
   quebra "position: sticky" no Safari/iOS — por isso o header não pode mais
   estar dentro de um elemento com overflow controlado. */
.page-wrap {
    overflow-x: hidden;
    /* IMPORTANTE: por spec do CSS, se só "overflow-x" for definido (sem
       "overflow-y"), o navegador converte o eixo Y automaticamente pra
       "auto" — o que transformaria esse wrapper num contêiner de rolagem
       PRÓPRIO, independente da rolagem normal da janela/página (quebrando
       âncoras, scrollTo, e o próprio sticky do header). Declarar
       "overflow-y: visible" explicitamente evita esse efeito colateral. */
    overflow-y: visible;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Pain�is com Sombra Elegante */
.glass-panel {
    background: var(--bg-white);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04), 0 2px 10px -1px rgba(15, 23, 42, 0.02);
    transition: var(--transition-smooth);
}

/* Configura��es do Cabe�alho */
header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-glass);
    padding: 12px 0;
}

.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 14px; /* Espa�amento perfeito entre a imagem e o texto */
    text-decoration: none;
}

.main-logo {
    height: 110px; /* Ajustado para caber melhor ao lado do menu */
    width: auto;
    object-fit: contain;
    border-radius: 12px;
    transition: var(--transition-smooth); /* */
}

/* Estiliza��o do nome principal "Brasil" */
.brand-title {
    font-family: var(--font-sans); /* */
    font-size: 55px;
    font-weight: 800; /* Fonte bem marcante */
    color: var(--primary); /* Verde oficial da sua marca */
    letter-spacing: -0.5px;
}

/* Estiliza��o do complemento "Guia Comercial" */
.brand-subtitle {
    font-family: var(--font-sans); /*[cite: 1] */
    font-size: 14px;
    font-weight: 600;
    color: var(--secondary); /* Azul oficial da sua marca[cite: 1] */
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Item 7: slogan no cabecalho, entre a logo e os botoes. Fica oculto em telas */
/* menores (o header ja fica apertado no mobile) e aparece a partir de telas */
/* medias/grandes, onde ha espaco sobrando entre a logo e os botoes. */
.header-slogan {
    display: none;
    margin: 0 16px;
    font-size: 13.5px;
    font-weight: 700;
    font-style: italic;
    color: var(--primary);
    opacity: 0.85;
    white-space: nowrap;
    flex: 1;
    text-align: center;
}

@media (min-width: 1024px) {
    .header-slogan {
        display: block;
    }
}

/* Efeito sutil quando passa o mouse na marca */
.logo-link:hover .main-logo {
    transform: scale(1.03);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.nav-actions .btn {
    padding: 9px 15px;
    font-size: 13.5px;
    white-space: nowrap;
}

/* Bot�es Customizados */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-decoration: none;
    border: 1px solid transparent;
}

.btn-primary {
    background: var(--primary);
    color: var(--bg-white);
}

.btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 75, 35, 0.2);
}

.btn-secondary {
    background: #f1f5f9;
    color: var(--text-main);
    border-color: #cbd5e1;
}

.btn-secondary:hover {
    background: #e2e8f0;
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
}

.btn-outline:hover {
    background: rgba(0, 75, 35, 0.04);
}

.btn-whatsapp {
    background: #25d366;
    color: #fff;
}
.btn-whatsapp:hover {
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
    transform: translateY(-2px);
}

/* Se��o Hero */
.hero {
    background: linear-gradient(135deg, #081633 0%, #0b4f93 100%);
    color: var(--bg-white);
    padding: 40px 0 25px;
    text-align: center;
}

.hero h1 {
    font-size: 44px;
    font-weight: 800;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}

.hero h1 span {
    color: var(--accent);
}

.hero p {
    font-size: 16px;
    opacity: 0.9;
    max-width: 800px;
    margin: 0 auto 18px;
}

/* Selo de prova social — total de visitas do site, em destaque na Hero */
.hero-visit-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto 26px;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 204, 0, 0.4);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.hero-sites-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto 26px;
    padding: 8px 18px;
    background: rgba(201, 162, 39, 0.16);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(201, 162, 39, 0.5);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: var(--transition-smooth);
}
.hero-sites-badge:hover {
    background: rgba(201, 162, 39, 0.28);
    transform: translateY(-1px);
}
.hero-sites-badge i {
    color: var(--accent);
}

.hero-visit-badge i {
    font-size: 13px;
    color: var(--accent);
}

.hero-visit-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 rgba(34, 197, 94, 0.6);
    animation: heroVisitPulse 2s infinite;
}

@keyframes heroVisitPulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
    70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* Container de Busca */
.search-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-field {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.search-field i {
    color: var(--secondary);
    font-size: 16px;
}

.search-field input, .search-field select {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-main);
    width: 100%;
    font-size: 14px;
}

.search-divider {
    width: 1px;
    height: 28px;
    background: var(--border-glass);
}

/* Campo de cidade com autocomplete (substitui o antigo <select>) */
.search-field-location {
    position: relative;
}

.location-suggestions {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: -16px;
    right: -16px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
    border: 1px solid var(--border-glass, #e2e8f0);
    max-height: 260px;
    overflow-y: auto;
    z-index: 50;
    padding: 6px;
}

.location-suggestions.open {
    display: block;
}

.location-suggestion-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 7px;
    cursor: pointer;
    color: var(--text-main, #1e293b);
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.location-suggestion-item i {
    color: var(--secondary);
    font-size: 12px;
    flex-shrink: 0;
}

.location-suggestion-item mark {
    background: none;
    color: inherit;
    font-weight: 700;
}

.location-suggestion-item:hover,
.location-suggestion-item.active {
    background: rgba(11, 79, 147, 0.08);
}

.location-suggestion-empty {
    padding: 10px 12px;
    font-size: 13px;
    color: #94a3b8;
}

/* ==========================================================================
   CARROSSEL HORIZONTAL DE CATEGORIAS
   ========================================================================== */
.categories-container {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 10px 4px 20px 4px !important;
    width: 100% !important;
    max-width: 900px; /* Limita a largura para ficar centralizado e elegante */
    margin: 20px auto 0 auto !important;
}

/* "Todos" (20/07/2026): fica fora da faixa que rola/anda sozinha -- sempre
   visível, sempre no mesmo lugar, sem encolher. */
.category-tag-pinned {
    flex-shrink: 0 !important;
}

/* Faixa com as demais categorias (20/07/2026): anda sozinha da direita pra
   esquerda em telas com mouse (ver iniciarCarrosselDeCategorias() no script),
   e pausa pra rolagem manual quando o mouse fica em cima -- ver JS. Em
   celular/tablet (sem mouse) ela não anda sozinha, só rola normal com o dedo. */
.categories-track {
    display: flex !important;
    flex-wrap: nowrap !important; /* proíbe as tags de quebrarem para a linha de baixo */
    overflow-x: auto !important;  /* ativa a rolagem lateral (manual ou automática) */
    gap: 12px !important;
    flex: 1 1 auto;
    min-width: 0; /* sem isso o flex item não encolhe abaixo do conteúdo, e o overflow-x nunca entra em ação */

    /* Suaviza o movimento no celular (Touch); "smooth" fica de fora aqui de
       propósito -- ele atrapalharia o passo contínuo do carrossel automático. */
    -webkit-overflow-scrolling: touch;
}

/* Deixa as tags com tamanho fixo e elegante para não espremerem o texto */
.category-tag {
    flex-shrink: 0 !important; /* impede que o navegador esmague a tag quando faltar espaço */
    padding: 10px 22px !important;
    border-radius: 30px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    cursor: pointer !important;
    backdrop-filter: blur(4px) !important;
    transition: var(--transition-smooth) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Estado Ativo e Selecionado */
.category-tag:hover, .category-tag.active {
    background: var(--bg-white) !important;
    color: var(--primary) !important;
    border-color: var(--bg-white) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15) !important;
}

/* Oculta a barra de rolagem horizontal feia no Windows, mantendo a função viva */
.categories-track::-webkit-scrollbar {
    height: 5px !important; /* Barra ultra fina e discreta */
}
.categories-track::-webkit-scrollbar-track {
    background: transparent !important;
}
.categories-track::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2) !important; /* Barra sutil */
    border-radius: 10px !important;
}

.section-title {
    font-size: 22px;
    font-weight: 700;
    margin: 48px 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-title span {
    font-size: 13px;
    color: var(--text-muted);
}

/* ==========================================================================
   GRID DE EMPRESAS OTIMIZADO PARA 4 COLUNAS (ALTA VISUALIZA��O)
   ========================================================================== */
.business-grid {
    display: grid !important;
    /* Alterado de repeat(6, ...) para repeat(4, ...) */
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important; 
    gap: 24px !important; /* Espa�amento mais confort�vel entre os cards */
    width: 100% !important;
    margin-bottom: 30px !important;
}

.business-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important; 
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.03), 0 2px 4px -2px rgba(15, 23, 42, 0.02) !important;
    transition: var(--transition-smooth) !important;
    position: relative;
    cursor: pointer;
}

.business-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 20px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.03) !important;
    border-color: #cbd5e1 !important;
}

/* Ajuste fino na propor��o da imagem interna para acompanhar o novo tamanho */
.business-card .card-img-placeholder {
    height: 160px !important; /* Aumentado um pouco a altura para preencher melhor o espa�o */
    width: 100% !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 16px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

.business-card .card-img-placeholder img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    border-radius: 4px !important;
}

.business-card .card-body {
    padding: 14px 12px !important; 
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

.business-card .card-category {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: var(--secondary) !important; 
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 6px !important;
}

/* Ajuste do tamanho dos textos internos do card para melhor leitura */
.business-card .card-title {
    font-size: 16px !important; /* Um pouquinho maior para destacar o nome da empresa */
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.4 !important;
}

.business-card .card-desc {
    font-size: 13px !important; /* Melhor leitura na descri��o curta */
    color: #64748b !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
    height: 36px !important; 
}

.business-card .card-meta {
    margin-top: auto !important; 
    padding-top: 10px !important;
    border-top: 1px solid #f1f5f9 !important;
    display: flex !important;
    flex-direction: column !important; 
    gap: 4px !important;
    font-size: 11px !important;
    color: #64748b !important;
}

.business-card .card-meta span {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.business-card .badge-premium, 
.business-card .badge-highlight {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    padding: 3px 8px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    z-index: 2 !important;
    text-transform: uppercase;
}
.badge-premium { background: var(--accent) !important; color: #000 !important; box-shadow: 0 2px 6px rgba(255,204,0,0.3); }
.badge-highlight { background: var(--secondary) !important; color: #fff !important; box-shadow: 0 2px 6px rgba(11,79,147,0.3); }

/* Promoção/Brinde (17/07/2026): faixa na base da imagem do card, só pra planos
   Destaque/Premium com promoção ativa. Fica embaixo (não em cima, junto do selo
   de plano) e não altera a altura do card na grade — só sobrepõe a imagem. */
.business-card .card-promo-ribbon {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(90deg, #ea580c, #f97316) !important;
    color: #fff !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    padding: 5px 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    z-index: 2 !important;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.08);
}

@media (max-width: 1024px) { .business-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (max-width: 768px) { .business-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 480px) { .business-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } }

/* Modais Estrutura Geral */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-overlay.active { display: flex; }

/* ==========================================================================
   LOGIN DO PAINEL ADMIN — mesmo formato da tela de login do painel Sabbini
   Imóveis: fundo em gradiente com as cores da marca, card branco central,
   logo no topo, campos rotulados, botão de mostrar/ocultar senha e nota de
   rodapé com ícone de escudo.
   ========================================================================== */
#adminModal.active {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    backdrop-filter: none;
}

#adminLoginBox {
    max-width: 420px;
    width: 100%;
    background: rgba(255, 255, 255, 0.97);
    color: #1e293b;
    border-radius: var(--radius-lg);
    padding: 44px 36px 36px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
    position: relative;
    text-align: center;
}

.admin-gate-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(15, 23, 42, 0.06);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #64748b;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast, 0.2s);
}
.admin-gate-close:hover { background: rgba(15, 23, 42, 0.12); color: #1e293b; }

.admin-gate-logo {
    height: 110px;
    width: auto;
    margin: 0 auto 20px;
    display: block;
}

.admin-gate-title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 800;
    color: var(--primary);
}

.admin-gate-desc {
    margin: 0 0 28px;
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.5;
}

.admin-gate-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: left;
}

.admin-gate-label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 6px;
}

.password-field-wrapper { position: relative; }
.password-field-wrapper input.form-control {
    width: 100%;
    height: 46px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    padding: 0 44px 0 14px;
    font-size: 15px;
    background: #ffffff;
    color: #1e293b;
    box-sizing: border-box;
}
.password-field-wrapper input.form-control:focus { outline: none; border-color: var(--secondary); }

.password-toggle-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #94a3b8;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.password-toggle-btn:hover { color: #475569; background: rgba(15, 23, 42, 0.05); }

.admin-login-error {
    background: rgba(185, 28, 28, 0.08);
    color: #b91c1c;
    font-size: 12.5px;
    padding: 10px 14px;
    border-radius: 8px;
    margin: -6px 0 0;
    text-align: left;
}

#adminLoginBox .btn-block { width: 100%; }

.admin-gate-note {
    margin-top: 24px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 11.5px;
    color: #94a3b8;
    text-align: left;
    line-height: 1.5;
}
.admin-gate-note i { margin-top: 2px; color: var(--secondary); }

/* ==========================================================================
   MODAL DE EXIBI��O DE DETALHES - ESTILO PREMIUM CORPORATIVO
   ========================================================================== */
#detailModal .modal-container {
    max-width: 750px !important; 
    width: 95%;
    max-height: 85vh !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: none !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.3) !important;
    position: relative !important;
}

#detailModal .modal-close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    border: none !important;
    font-size: 14px !important;
    cursor: pointer !important;
    z-index: 20 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #1e293b !important;
    transition: var(--transition-smooth) !important;
    backdrop-filter: blur(4px);
}
#detailModal .modal-close:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
    transform: rotate(90deg);
}

/* Banner Superior em Degrad� */
#detailModal .modal-hero {
    height: 140px !important; 
    width: 100% !important;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%) !important;
    position: relative !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

/* Logo Flutuante Centralizada Sem Cortes */
.modal-logo-wrapper {
    position: absolute !important;
    bottom: -40px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100px !important;
    height: 100px !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    padding: 8px !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e8f0 !important;
    z-index: 5 !important;
}

.modal-logo-wrapper img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

.modal-logo-wrapper i {
    font-size: 36px !important;
    color: #94a3b8 !important;
}

#detailModal .modal-body {
    padding: 60px 30px 30px 30px !important;
    overflow-y: auto !important;
    flex: 1 !important;
    background: #f8fafc !important;
}

.modal-header-center {
    text-align: center !important;
    margin-bottom: 24px !important;
}

.modal-company-title { 
    font-size: 26px !important; 
    font-weight: 800 !important; 
    color: #0f172a !important; 
    margin: 0 0 8px 0 !important; 
    letter-spacing: -0.5px;
}

.modal-company-badge {
    background: linear-gradient(135deg, rgba(11, 79, 147, 0.1) 0%, rgba(0, 75, 35, 0.1) 100%);
    color: var(--secondary);
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
}

.modal-company-desc-short { 
    font-size: 14px !important; 
    font-weight: 500 !important; 
    color: #475569 !important; 
    margin: 0 auto 24px auto !important; 
    line-height: 1.5;
    text-align: center !important;
    max-width: 550px;
}

/* Blocos Informativos em Fundo Branco Limpo */
.info-item-full, .info-item {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02) !important;
    transition: var(--transition-smooth) !important;
}

.info-item-full:hover, .info-item:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.05) !important;
}

.info-item-full {
    display: flex !important;
    gap: 16px !important;
    padding: 20px !important;
    margin-bottom: 20px !important; 
    width: 100% !important;
}

.modal-grid-info {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
}

/* Item 1: no celular, os cards de contato (Endereco, Telefone, E-mail, etc) ficavam */
/* espremidos lado a lado; um embaixo do outro fica bem mais legivel. */
@media (max-width: 600px) {
    .modal-grid-info {
        grid-template-columns: 1fr !important;
    }
}

.info-item {
    display: flex !important;
    gap: 14px !important;
    padding: 16px !important;
}

/* Iconografia Colorida Cl�ssica */
.info-item-full > i, .info-item > i { 
    font-size: 14px !important; 
    width: 32px !important; 
    height: 32px !important; 
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important; 
    margin-top: 2px;
}

.fa-file-text { background: rgba(11, 79, 147, 0.1) !important; color: var(--secondary) !important; }
.fa-location-dot { background: rgba(239, 68, 68, 0.1) !important; color: #ef4444 !important; }
.fa-clock { background: rgba(245, 158, 11, 0.1) !important; color: #f59e0b !important; }
.fa-phone { background: rgba(37, 211, 102, 0.1) !important; color: #25d366 !important; }
.fa-envelope { background: rgba(6, 182, 212, 0.1) !important; color: #06b6d4 !important; }
.fa-globe { background: rgba(99, 102, 241, 0.1) !important; color: #6366f1 !important; }

.info-item-content { flex: 1 !important; min-width: 0 !important; text-align: left !important; }
.info-item-content h4 { font-size: 10.5px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; color: #94a3b8 !important; margin: 0 0 4px 0 !important; }
.info-item-content p, .info-item-content span, .info-item-content a { 
    font-size: 13.5px !important; 
    font-weight: 600 !important; 
    color: #334155 !important; 
    line-height: 1.5 !important; 
    
    /* SOLU��O PARA CORRE��O DO TEXTO SALTANDO FORA */
    text-align: justify;          /* Deixa o texto perfeitamente alinhado � esquerda e � direita */
    text-justify: inter-word;     /* Melhora o espa�amento das palavras justificadas */
    word-break: break-word;       /* For�a a quebra de palavras gigantescas (como sequ�ncias de n�meros) */
    overflow-wrap: break-word;    /* Garante que o texto quebre para respeitar a largura do bloco */
}
#modalLongDesc {
    text-align: justify !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: pre-line; /* Mant�m as quebras de linha que voc� der no formul�rio (par�grafos) */
}

.info-item-content a { color: var(--secondary) !important; text-decoration: none !important; }

.modal-actions {
    display: flex !important;
    justify-content: center !important; 
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: 24px !important;
    border-top: 1px solid #e2e8f0 !important;
    padding-top: 24px !important;
    width: 100% !important;
}

/* Cadastro de Empresas e Administrativo */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.form-control { width: 100%; border: 1px solid var(--border-glass); border-radius: var(--radius-md); padding: 10px 14px; font-family: var(--font-sans); }
.form-control:focus { border-color: var(--primary); outline: none; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
/* Item 3 e item 10: no celular essas colunas ficavam espremidas lado a lado
   (nunca tinham um fallback pra tela estreita), o que deixava as caixas de
   texto desalinhadas/cortadas. Em telas pequenas elas empilham em 1 coluna,
   igual já acontecia dentro da Ficha Cadastral (.ficha-section .form-row). */
@media (max-width: 680px) {
    .form-row, .form-row.cols-3 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SE��O DE PLANOS AJUSTADA E CENTRALIZADA
   ========================================================================== */
.plans-section { 
    padding: 35px 0 60px 0; 
    background: #fff; 
    border-top: 1px solid var(--border-glass); 
    text-align: center;
}
.plans-section h2 {
    font-size: 28px;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 8px;
}
.plans-section p {
    color: var(--text-muted);
    font-size: 15px;
    margin-bottom: 40px;
}
.plans-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 32px; 
    margin-top: 50px; 
    align-items: start;
}
.plan-card { 
    padding: 40px 24px 36px 24px; 
    text-align: center; 
    background: var(--bg-light); 
    border-radius: var(--radius-lg); 
    border: 1px solid var(--border-glass); 
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.plan-card.highlight { 
    border: 2px solid #0d2151; /* Borda verde escura igual imagem 3 */
    background: #fff; 
    box-shadow: 0 10px 30px rgba(0,75,35,0.06); 
}
/* Selo Mais Vendido Centralizado */
.badge-top-selling {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: #0d2151; /* Navy Oficial */
    color: #ffffff;
    padding: 4px 20px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 20px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,75,35,0.2);
}
.plan-name { 
    font-size: 22px; 
    font-weight: 700; 
    color: #0d2151; 
    margin-bottom: 16px; 
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.plan-card:nth-child(3) .plan-name {
    color: #0b4f93; /* Azul no Premium para contrastar com o amarelo da coroa */
}
.plan-name i {
    font-size: 20px;
}
.plan-name .fa-star {
    color: #0b4f93; /* Estrela azul conforme a imagem 3 */
}
.plan-name .fa-crown {
    color: #c9a227; /* Coroa amarela/ouro conforme a imagem 3 */
}
.plan-price { 
    font-size: 36px; 
    font-weight: 800; 
    color: #0d2151;
    margin-bottom: 24px;
}
.plan-price span { 
    font-size: 14px; 
    color: var(--text-muted); 
    font-weight: 400; 
}
.plan-features { 
    list-style: none; 
    text-align: left; 
    margin-bottom: 32px; 
    width: 100%;
}
.plan-features li { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    font-size: 14px; 
    margin-bottom: 12px; 
    color: #334155;
}
.plan-features li i.fa-check {
    color: #0d2151;
}
.plan-features li.disabled { 
    opacity: 0.35; 
    text-decoration: line-through; 
}
.plan-card .btn {
    width: 100%;
    margin-top: auto;
    padding: 12px 24px;
}

/* ==========================================================================
   RODAP� CORPORATIVO ROBUSTO (COM CONTATOS E QUEM SOMOS)
   ========================================================================== */
.main-footer { 
    background: linear-gradient(135deg, #0d2151 0%, #060f28 100%); 
    border-top: 3px solid var(--accent); 
    padding: 40px 0 30px 0; 
    margin-top: 20px; 
    width: 100%; 
    color: #ffffff;
}
.footer-container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 24px; 
}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Item 7: 4ª coluna = Newsletter */
    gap: 40px;
    margin-bottom: 40px;
}
/* Item 7: campo de newsletter no rodapé */
.footer-newsletter-form { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.footer-newsletter-form input[type="email"] {
    padding: 10px 14px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.08);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 14px;
}
.footer-newsletter-form input[type="email"]::placeholder { color: rgba(255,255,255,0.55); }
.footer-newsletter-form input[type="email"]:focus { outline: none; border-color: var(--accent); }
.footer-newsletter-msg { font-size: 12.5px; margin-top: 2px; min-height: 16px; }
.footer-newsletter-msg.ok { color: #4ade80; }
.footer-newsletter-msg.error { color: #f87171; }
.footer-col {
    display: flex;
    flex-direction: column;
}
.footer-col.text-left {
    text-align: left;
}
.footer-col h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    text-align: left;
}
.footer-logo { 
    margin-bottom: 30px; 
	display: block; 
}
.footer-logo-img { 
    height: 110px; /* Logo completa (ícone + WLS Performance + Soluções Digitais) */
    width: auto; 
    object-fit: contain; 
    margin-bottom: 20px;
    align-self: flex-start;
    border-radius: 12px;
    
    /* TRUQUE DE DESIGN: D� um brilho sutil nas bordas e destaca a logo no fundo escuro */
    filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.25)) drop-shadow(0px 0px 1px rgba(255, 255, 255, 0.1));
    transition: var(--transition-smooth);
}

/* Efeito interativo discreto ao passar o mouse */
.footer-logo-img:hover {
    transform: scale(1.03);
    filter: drop-shadow(0px 6px 16px rgba(0, 0, 0, 0.35));
}
.footer-about-text {
    font-size: 13.5px;
    color: #cbd5e1;
    line-height: 1.6;
    margin: 0;
}
/* Listas de Links */
.footer-links-list, .footer-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}
.footer-links-list li {
    margin-bottom: 12px;
}
.footer-links-list li a { 
    color: #e2e8f0; 
    text-decoration: none; 
    font-size: 14.5px; 
    font-weight: 500; 
    display: inline-flex; 
    align-items: center; 
    gap: 10px; 
    transition: var(--transition-smooth); 
    opacity: 0.85; 
}
.footer-links-list li a:hover { 
    color: var(--accent); 
    opacity: 1; 
    transform: translateX(4px); 
}
/* Detalhes de Contato Direto */
.footer-contact-list li {
    margin-bottom: 14px;
}
.contact-item {
    color: #e2e8f0;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: var(--transition-smooth);
}
.contact-item:hover {
    color: var(--accent);
}
.contact-item i.fa-whatsapp {
    color: #25d366;
    font-size: 16px;
}
.contact-hours {
    font-size: 12.5px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-nav { margin-bottom: 30px; width: 100%; }
.footer-menu { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; gap: 35px; flex-wrap: wrap; }
.footer-menu li a { color: #e2e8f0; text-decoration: none; font-size: 15px; font-weight: 500; display: flex; align-items: center; gap: 8px; transition: var(--transition-smooth); opacity: 0.85; }
.footer-menu li a:hover { color: var(--accent); opacity: 1; transform: translateY(-2px); }

/* �rea de Cr�ditos */
.footer-credits { 
    width: 100%; 
    border-top: 1px solid rgba(255, 255, 255, 0.1); 
    padding-top: 24px; 
    text-align: center;
}
.footer-credits p {
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
    letter-spacing: 0.3px;
}

/* Pilha de selos flutuantes (20/07/2026): "Criamos sites" (WLS Performance) e
   "Bíblia da Salvação" ficavam cada um fixo num canto (esquerdo e direito) --
   mas o botão "Instalar App" do PWA do próprio BGC também nasce fixo no canto
   inferior direito (z-index mais alto, ver script no fim do <body>) e passou
   a cobrir o selo da Bíblia da Salvação quando aparecia. Solução: os dois
   selos agora moram juntos no canto inferior ESQUERDO, empilhados um em cima
   do outro (a pilha inteira é o elemento fixo; cada selo dentro dela é só um
   item de flex normal) -- assim nenhum dos dois nunca mais fica embaixo do
   "Instalar App". */
.floating-badges-stack {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.wls-portfolio-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #0d2151 0%, #060f28 100%);
    border: 1px solid rgba(201, 168, 106, 0.5);
    color: #f1d9a5;
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 500;
    padding: 9px 14px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: var(--transition-smooth);
    max-width: calc(100vw - 32px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wls-portfolio-badge i { color: var(--accent); flex-shrink: 0; }
.wls-portfolio-badge:hover {
    background: linear-gradient(135deg, #00612c 0%, #081633 100%);
    border-color: #c9a86a;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
}
@media (max-width: 640px) {
    .wls-portfolio-badge span { display: none; }
    .wls-portfolio-badge { padding: 11px; }
    .wls-portfolio-badge i { font-size: 15px; }
}

/* Botão "Instalar App" do PWA (30/07/2026): antes nascia com position:fixed
   direto no <body>, sempre no canto inferior DIREITO -- o que passou a
   cobrir o botão "Salvar e Publicar" do modal de Cadastro de Empresa (cujo
   rodapé, alinhado à direita, também acaba no canto inferior direito da
   tela no mobile). Solução: o botão agora entra dentro da MESMA pilha de
   selos flutuantes do canto inferior esquerdo (.floating-badges-stack),
   como mais um item da pilha, no formato de pílula -- nunca mais disputa
   espaço com botões de formulário nem com os outros selos. Fica no topo
   da pilha (pedido do Wagner: perto do selo da Bíblia da Salvação). */
.instalar-app-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #0d2151 0%, #060f28 100%);
    border: 1px solid rgba(249, 115, 22, 0.5);
    color: #ffffff;
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 600;
    padding: 9px 14px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: var(--transition-smooth);
    max-width: calc(100vw - 32px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.instalar-app-badge i { color: #f97316; flex-shrink: 0; }
.instalar-app-badge:hover {
    background: linear-gradient(135deg, #16305e 0%, #0a1a3d 100%);
    border-color: #f97316;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
}
@media (max-width: 640px) {
    .instalar-app-badge span { display: none; }
    .instalar-app-badge { padding: 11px; }
    .instalar-app-badge i { font-size: 15px; }
}

/* Selo "Bíblia da Salvação" -- mesmo formato do selo da WLS Performance
   acima, com as cores da marca do site (teal escuro + dourado), pra divulgar
   o outro projeto sem disputar espaço com as ações de conversão do
   cabeçalho (Anunciar Empresa, Ver Planos). Link externo pra
   bibliadasalvacao.com.br. Fica acima do selo da WLS na pilha (ver ordem no
   HTML) -- pedido do Wagner (20/07/2026). */
.biblia-salvacao-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #1c4d53 0%, #0a2226 100%);
    border: 1px solid rgba(214, 181, 122, 0.5);
    color: #ecdcb8;
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 500;
    padding: 8px 14px 8px 10px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: var(--transition-smooth);
    max-width: calc(100vw - 32px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.biblia-salvacao-badge img { width: 22px; height: 22px; flex-shrink: 0; display: block; }
.biblia-salvacao-badge:hover {
    background: linear-gradient(135deg, #235e65 0%, #0f2e33 100%);
    border-color: #d6b57a;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
}
@media (max-width: 640px) {
    .biblia-salvacao-badge span { display: none; }
    .biblia-salvacao-badge { padding: 10px; }
    .biblia-salvacao-badge img { width: 20px; height: 20px; }
}

.modal-scrollable { display: flex; flex-direction: column; max-height: 90vh !important; overflow: hidden !important; background: #ffffff !important; }
.modal-fixed-header { padding: 24px 30px; background: #ffffff; border-bottom: 1px solid var(--border-glass); position: relative; flex-shrink: 0; }
.modal-close-btn { position: absolute; top: 20px; right: 25px; background: none; border: none; font-size: 28px; color: var(--text-muted); cursor: pointer; line-height: 1; }
.modal-close-btn:hover { color: #ef4444; }
.modal-scroll-body {
    padding: 30px;
    overflow-y: auto;
    flex-grow: 1;
    /* Corrige rolagem "travada" dentro de modais no Safari/iOS: sem isso,
       divs com overflow dentro de um overlay position:fixed às vezes não
       respondem ao gesto de arrastar no celular. */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
}
.modal-fixed-footer { padding: 20px 30px; background: #f8fafc; border-top: 1px solid var(--border-glass); display: flex; justify-content: flex-end; gap: 12px; flex-shrink: 0; }
.modal-scroll-body::-webkit-scrollbar { width: 6px; }
.modal-scroll-body::-webkit-scrollbar-track { background: transparent; }
.modal-scroll-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }

/* Item 7: com a 4ª coluna (Newsletter), em telas médias/tablet 4 colunas ficam
   apertadas antes de chegar no breakpoint de celular — quebra em 2 colunas. */
@media (max-width: 992px) and (min-width: 769px) {
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Item 3: o formulário "Cadastre sua Empresa" usa vários pares de campo lado
   a lado com grid inline (style="...") sem nenhum fallback pra tela
   estreita, o que deixava as caixas de texto espremidas/desalinhadas no
   celular. Como é style inline, precisa de !important pra sobrepor — seletor
   de atributo pega qualquer div desse padrão dentro do formulário. */
@media (max-width: 680px) {
    #registerModal div[style*="grid-template-columns: 1fr 1fr"],
    #registerModal div[style*="grid-template-columns: 2fr 1fr 1.2fr"],
    #blocoPagamentoPix {
        grid-template-columns: 1fr !important;
    }
    #blocoPagamentoPix { min-width: 0 !important; }
}

/* Responsividade para Celulares */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }
    .footer-col.text-left, .footer-col h4, .footer-links-list, .footer-contact-list {
        text-align: center !important;
    }
    .footer-logo-img {
        align-self: center;
    }
    .footer-links-list li a:hover {
        transform: translateY(-2px);
    }
    .contact-item, .contact-hours {
        justify-content: center;
    }

    /* Item 9: no celular os 3 botoes do cabecalho nao cabiam ao lado da logo e */
    /* empurravam a pagina inteira para o lado (gerava scroll horizontal no site */
    /* inteiro). Agora o cabecalho quebra em duas linhas e os botoes ficam */
    /* menores/compactos para caber na tela. (overflow-x:hidden já é aplicado */
    /* globalmente via .page-wrap — ver regra no topo do arquivo.) */
    .header-flex {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 10px;
    }
    .main-logo {
        height: 78px !important;
    }
    .header-slogan {
        display: none !important;
    }
    .nav-actions {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
    }
    .nav-actions .btn {
        padding: 8px 12px;
        font-size: 12.5px;
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
    }
}

/* Intera��es do Modal de Contato Moderno */
.modern-form-group input:focus, 
.modern-form-group select:focus, 
.modern-form-group textarea:focus {
    border-color: var(--secondary) !important;
    box-shadow: 0 0 0 3px rgba(11, 79, 147, 0.1) !important;
    outline: none;
}

#btnSubmitContato:hover {
    background: #093f75 !important; /* Azul levemente mais escuro */
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(11, 79, 147, 0.3) !important;
}

#btnSubmitContato:active {
    transform: translateY(0);
}

/* ==========================================================================
   SE��O: DESCONTOS POR FIDELIDADE (IGUAL � IMAGEM 1)
   ========================================================================== */
.fidelidade-section {
    padding: 30px 0 30px 0;
    background: transparent;
}

/* CONTAINER DA SE��O DE FIDELIDADE ATUALIZADO */
.fidelidade-container {
    background: #f8f9fa;
    /* Borda em verde escuro chamativa com sombra de destaque */
    border: 2px solid #0d2151; 
    border-radius: 16px;
    padding: 35px;
    text-align: left;
    box-shadow: 0 8px 24px rgba(0, 75, 35, 0.08); 
}

.fidelidade-title {
    font-size: 24px;
    font-weight: 700;
    color: #0d2151;
    margin: 0 0 8px 0;
    /* CORRE��O DO "FI": Desativa ligaduras da fonte para o "i" n�o grudar no "f" */
    font-variant-ligatures: none;
    text-rendering: optimizeLegibility;
}

.fidelidade-subtitle {
    font-size: 15px;
    color: #495057;
    margin: 0 0 25px 0;
}

/* Grid com os 4 blocos de tempo */
.fidelidade-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

/* Cards internos brancos */
.fidelidade-card {
    background: #ffffff;
    border: 1px solid #ced4da;
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.fidelidade-card h3 {
    font-size: 16px;
    font-weight: 700;
    color: #0d2151; /* Nome do per�odo em verde */
    margin: 0 0 4px 0;
}

.fidelidade-card p {
    font-size: 13px;
    font-weight: 600;
    color: #212529; /* Desconto em preto/cinza escuro */
    margin: 0;
}

/* Texto de rodap� das fotos */
.fidelidade-footer {
    font-size: 13.5px;
    color: #6c757d;
    margin: 0;
}

/* Responsividade para celulares */
@media (max-width: 768px) {
    .fidelidade-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 480px) {
    .fidelidade-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   CORRE��O DE ROLAGEM: PAINEL ADMINISTRATIVO (BRASILGC)
   ========================================================================== */
#adminDashboardBox {
    max-height: 85vh; /* Define uma altura m�xima limite para o painel */
    display: none;
    flex-direction: column;
}

/* Forca o corpo interno do painel a criar barra de rolagem quando a tabela crescer */
#adminDashboardBox .modal-scroll-body {
    overflow-y: auto !important;
    max-height: calc(85vh - 85px); /* Desconta a altura do cabecalho fixo */
    padding: 30px;
}

/* Item 11: o Pipeline de Prospeccao (e a Ficha Cadastral/Editor de Anuncio)
   tinham esse mesmo problema — sem essa regra, o "modal-scroll-body" nunca
   ganhava altura restrita (porque o container e aberto com
   "style.display = 'block'", que sobrepoe o "display:flex" da classe
   .modal-scrollable, quebrando o layout flex do qual o "flex-grow" do
   modal-scroll-body dependia). Sem altura restrita, o conteudo simplesmente
   ficava cortado pelo "overflow:hidden" do container quando passava de
   85vh, sem barra de rolagem nenhuma — dava a impressao de "nao rola".
   Mesma correcao ja usada em #adminDashboardBox e #adminManualBox. */
#adminProspectsBox .modal-scroll-body,
#adminViewDetailsBox .modal-scroll-body,
#adminCidadesCategoriasBox .modal-scroll-body,
#adminNewsletterBox .modal-scroll-body,
#adminDadosEmpresaBox .modal-scroll-body,
#adminAuditoriaBox .modal-scroll-body,
#adminPortfolioBox .modal-scroll-body,
#adminUsuariosBox .modal-scroll-body {
    overflow-y: auto !important;
    max-height: calc(85vh - 85px);
    padding: 30px;
}

/* Item 7 (16/07/2026): a tabela de Newsletter só tem 4 colunas simples, mas
   herdava o "min-width: 800px" do .admin-table (pensado pra tabela bem mais
   larga de Empresas Cadastradas) — isso forçava rolagem horizontal dentro do
   modal de 760px mesmo sem precisar. Mesma correção aplicada na Auditoria
   (17/07/2026), que também só tem 4 colunas. */
#adminNewsletterBox .admin-table,
#adminAuditoriaBox .admin-table { min-width: 0; }
/* Correção (21/07/2026): a regra "overflow-x: visible" que existia aqui pra
   essas duas telas foi removida — ela fazia sentido só no modal antigo,
   largura fixa de até 760px, onde essas tabelas de 4 colunas sempre cabiam
   inteiras. No painel em tela cheia, testado pelo celular, a largura
   disponível pode ficar bem menor que isso (tela do celular), e sem rolagem
   horizontal o conteúdo que não coubesse ficava simplesmente cortado, sem
   nenhum jeito de ver o resto (foi o caso relatado pelo Wagner nas telas de
   Auditoria e Newsletter). Como o "min-width: 0" acima já faz a tabela se
   ajustar sozinha ao conteúdo, deixar o overflow-x no padrão "auto" (herdado
   de .admin-table-wrap, linha ~1958) só mostra a barra de rolagem quando ela
   realmente for necessária — sem rolagem indesejada no desktop, e com
   rolagem disponível no celular quando precisar. */

/* Torna a tabela ainda mais amig�vel em telas menores */
#adminDashboardBox table {
    width: 100%;
    min-width: 800px; /* Garante que as colunas n�o fiquem esmagadas */
}
/* ==========================================================================
   VITRINE MASTER EXPANDIDA COM FUNDO ESPELHADO AUTOM�TICO
   ========================================================================== */

.modal-vitrine-container {
    height: 900px !important; /* Aumentamos um pouco a altura do card para dar mais impon�ncia */
    position: relative;
    overflow: hidden;
    background: #090d16;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

/* Criamos um fundo din�mico e moderno usando desfoque para sumir com as barras pretas laterais */
.modal-vitrine-container::before {
    content: "";
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background-image: inherit; /* Herda a imagem dinamicamente para fazer o efeito de espelho */
    background-size: cover;
    background-position: center;
    filter: blur(25px) brightness(0.35); /* Desfoca e suaviza o fundo para a imagem da frente brilhar */
    z-index: 1;
}

/* Container que segura a imagem da foto ativa */
#modalHeroPlaceholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 5; /* Garante que fica por cima do efeito de desfoque */
}

/* For�amos a imagem em exibi��o a ficar maior e ganhar escala na tela */
#modalMainImg {
    max-width: 95% !important;
    max-height: 95% !important;
    object-fit: contain !important;
    transform: scale(1.1); /* <--- D� um ganho de 10% no tamanho para a foto preencher melhor o card */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); /* Sombra elegante atr�s da foto para separ�-la do fundo */
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
}

/* Estiliza��o refinada para as setas flutuantes */
.modal-vitrine-container button {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(4px); /* Efeito de vidro nas setas */
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    transition: all 0.2s ease !important;
}

.modal-vitrine-container button:hover {
    background: rgba(255, 255, 255, 0.35) !important;
    scale: 1.1;
    color: #f97316 !important; /* Seta acende em laranja no hover */
}

/* Estilos atualizados */ 
:root { --primary: #0d2151; --secondary: #0b4f93; --accent: #c9a227;
--text-main: #0f172a; --font-sans: 'Plus Jakarta Sans', sans-serif; } 

/* Novo Slogan no Header */
.brand-text { display: flex; flex-direction: column; }
.brand-title { font-weight: 850; color: var(--primary); font-size: 1.2rem; }
.brand-subtitle { font-weight: 500; color: var(--secondary); font-size: 0.85rem; }

/* Corre��o da Marca D'�gua */
/* Corrigido: as classes abaixo agora correspondem �s usadas no HTML/JS */
/* (antes o CSS usava .watermark-container, mas o HTML gerava .watermark-wrapper e .marca-dagua-fixa) */
.watermark-wrapper {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    line-height: 0;
}

/* 18/07/2026: a marca d'agua ERA embutida aqui como base64 (evitava o risco de */
/* "imagem quebrada" caso o arquivo nao estivesse no caminho certo no servidor), */
/* mas isso deixava o style.css sozinho com quase 170KB extras baixados de novo */
/* a cada carregamento de pagina (nao dava pra aproveitar cache do navegador). */
/* Virou um arquivo separado (images/marca-dagua.png) — bem mais leve porque a */
/* imagem tambem foi redimensionada pro tamanho real de uso (34px na tela) e */
/* recomprimida. IMPORTANTE ao publicar: a pasta "images/" (junto com          */
/* logo-header.png e logo-footer.png, usadas no index.html) precisa ir junto   */
/* pro servidor, do mesmo jeito que a pasta "css/" e "icons/" ja precisam.     */
/* Usamos !important nas propriedades de posicao/tamanho porque regras mais */
/* especificas mais abaixo no arquivo (ex: .business-card img, */
/* .business-card .card-img-placeholder img) tambem miram elementos <img>/<span> */
/* e, sem isso, "vencem" a cascata e quebram a posicao/tamanho do selo. */
.marca-dagua-fixa.marca-dagua-fixa.marca-dagua-fixa {
    position: absolute !important;
    bottom: 6px !important;
    right: 6px !important;
    top: auto !important;
    left: auto !important;
    display: block !important;
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    transition: opacity 0.2s ease !important;
    background-image: url("../images/marca-dagua.png?v=2");
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    opacity: 0.22;
    pointer-events: none;
    user-select: none;
    z-index: 10;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
}

/* Ao passar o mouse na foto, a marca d'agua fica um pouco mais visivel. */
/* Ela nunca fica 100% invisivel por padrao (opacity 0.22 acima) de proposito: */
/* se sumisse por completo, uma foto salva sem passar o mouse sairia sem */
/* nenhuma protecao. */
.watermark-wrapper:hover .marca-dagua-fixa,
.modal-vitrine-container:hover .marca-dagua-fixa,
.gallery-thumb-wrapper:hover .marca-dagua-fixa,
#modalHeroPlaceholder:hover .marca-dagua-fixa,
#lightboxImgWrapper:hover .marca-dagua-fixa {
    opacity: 0.55 !important;
}

/* Versao maior da marca d'agua, usada na imagem principal do modal de detalhes */
.marca-dagua-modal.marca-dagua-modal.marca-dagua-modal {
    bottom: 16px !important;
    right: 16px !important;
    width: 70px !important;
    height: 70px !important;
    max-width: 70px !important;
    max-height: 70px !important;
    opacity: 0.25;
}

/* Versao menor, usada nas miniaturas da galeria (imagens pequenas) */
.marca-dagua-mini.marca-dagua-mini.marca-dagua-mini {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    bottom: 4px !important;
    right: 4px !important;
}

/* Aplicar nos elementos relevantes */
.card-img-placeholder, 
.modal-gallery-item, 
.business-card img {
    position: relative;
}

.business-card, .modal-vitrine-container {
    position: relative;
}

/* Estilos de layout restantes mantidos... */
header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); padding: 12px 0; border-bottom: 1px solid var(--border-glass); }
.header-flex { display: flex; justify-content: space-between; align-items: center; }
.logo-link { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.main-logo { height: 110px; width: auto; object-fit: contain; border-radius: 12px; }
.brand-title { font-size: 55px; font-weight: 800; color: var(--primary); }
.brand-subtitle { font-size: 14px; font-weight: 600; color: var(--secondary); text-transform: uppercase; }
.hero { background: linear-gradient(135deg, #081633 0%, #0b4f93 100%); color: var(--bg-white); padding: 40px 0 25px; text-align: center; }

/* Container que delimita a �rea da foto */
.watermark-container {
    position: relative;
    display: inline-block;
    overflow: hidden;
    cursor: pointer;
}

/* Marca d'�gua oculta por padr�o */
.watermark-overlay {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 25%;
    max-width: 120px;
    opacity: 0; /* Invis�vel inicialmente */
    transition: opacity 0.4s ease; /* Transi��o suave ao aparecer */
    pointer-events: none;
    z-index: 20;
}

/* Quando o mouse entra na imagem, a marca aparece */
.watermark-container:hover .watermark-overlay {
    opacity: 0.6; /* Aparece com 60% de opacidade */
}

/* Mensagem de aviso legal (aparece junto com a marca) */
.legal-warning {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 10px;
    padding: 5px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 25;
}

.watermark-container:hover .legal-warning {
    opacity: 1;
}
/* Item 10: no celular os cards ficam bem mais estreitos, entao uma marca d'agua */
/* do mesmo tamanho fixo usado no desktop acaba parecendo enorme proporcionalmente */
/* a foto. Reduzimos o tamanho dela especificamente em telas pequenas. */
@media (max-width: 600px) {
    .marca-dagua-fixa.marca-dagua-fixa.marca-dagua-fixa {
        width: 22px !important;
        height: 22px !important;
        max-width: 22px !important;
        max-height: 22px !important;
        bottom: 4px !important;
        right: 4px !important;
    }
    .marca-dagua-modal.marca-dagua-modal.marca-dagua-modal {
        width: 46px !important;
        height: 46px !important;
        max-width: 46px !important;
        max-height: 46px !important;
        bottom: 10px !important;
        right: 10px !important;
    }
    .marca-dagua-mini.marca-dagua-mini.marca-dagua-mini {
        width: 16px !important;
        height: 16px !important;
        max-width: 16px !important;
        max-height: 16px !important;
    }
}

/* Item 3 (painel admin): no celular, Cidades e Categorias ficavam lado a lado, */
/* muito espremidas. Uma embaixo da outra fica bem mais facil de usar. */
@media (max-width: 700px) {
    .admin-tags-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   PAINEL DE GESTÃO COMERCIAL E FICHA CADASTRAL — redesenho claro e de marca
   Antes: fundo cinza-chumbo/quase-preto (#111827, #1f2937) em toda a área
   administrativa. Agora: mesma linguagem visual clara e branded do restante
   do site (fundo --bg-light, cards brancos, cabeçalho em gradiente verde
   oficial com detalhe dourado), preservando toda a lógica/IDs existentes.
   ========================================================================== */
.admin-panel-header {
    background: linear-gradient(135deg, var(--primary) 0%, #060f28 100%);
    border-bottom: 4px solid var(--accent);
    padding: 22px 30px;
    position: relative;
    flex-shrink: 0;
}
.admin-panel-header h3 {
    margin: 0;
    color: #fff;
    font-size: 21px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 38px;
}
.admin-panel-header h3 i { color: var(--accent); }
.admin-panel-header p {
    margin: 5px 0 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    padding-right: 38px;
}
@media (max-width: 480px) {
    .admin-panel-header { padding: 20px 22px; }
    .admin-panel-header h3 { font-size: 18px; }
}
.admin-panel-header .modal-close-btn { color: rgba(255, 255, 255, 0.85); }
.admin-panel-header .modal-close-btn:hover { color: #fff; }

#adminDashboardBox, #adminViewDetailsBox { background: var(--bg-light); color: var(--text-main); }
#adminDashboardBox .modal-scroll-body, #adminViewDetailsBox .modal-scroll-body, #adminProspectsBox .modal-scroll-body { padding: 30px; padding-bottom: 40px; }
#adminProspectsBox .admin-note { padding-bottom: 4px; }

.admin-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary);
    margin: 0 0 14px;
}
.admin-section-title i { color: var(--accent); }

.admin-card {
    background: #ffffff;
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

/* Portfólio (21/07/2026): lista de propostas com as direções visuais extras
   (as que não aparecem no site público, só aqui no painel). */
.admin-portfolio-list { display: flex; flex-direction: column; gap: 14px; }
.admin-portfolio-item { padding: 16px 20px; }
.admin-portfolio-item-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.admin-portfolio-item-head h4 { margin: 0; font-size: 15px; color: var(--text-main); }
.admin-portfolio-item-tag { font-size: 11px; color: #64748b; background: #f1f5f9; border-radius: 20px; padding: 3px 10px; white-space: nowrap; }
.admin-portfolio-item-links { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-portfolio-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--primary);
    background: #f8fafc;
    border: 1px solid var(--border-glass);
    border-radius: 8px;
    padding: 7px 12px;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
.admin-portfolio-link:hover { background: #eef2ff; border-color: var(--primary); }
.admin-portfolio-link svg { width: 11px; height: 11px; }
.admin-portfolio-link.principal { color: var(--secondary); }

.admin-table-wrap { overflow-x: auto; margin-bottom: 32px; }
.admin-table { width: 100%; min-width: 800px; border-collapse: collapse; text-align: left; font-size: 13.5px; }
.admin-table thead tr { background: #f1f5f9; color: #64748b; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.admin-table th { padding: 12px 16px; font-weight: 700; border-bottom: 1px solid var(--border-glass); }
.admin-table td { padding: 14px 16px; border-bottom: 1px solid #eef2f6; vertical-align: top; }
.admin-table tbody tr:hover { background: #f8fafc; }
.admin-table tbody tr:last-child td { border-bottom: none; }

/* Financeiro (24/07/2026, pedido do Wagner): cabeçalhos clicáveis pra
   ordenar a tabela por qualquer coluna. O ícone de seta (fa-sort, neutro)
   vira fa-sort-up/fa-sort-down na coluna ativa, indicando a direção atual. */
.financeiro-th-ordenavel { cursor: pointer; user-select: none; white-space: nowrap; }
.financeiro-th-ordenavel:hover { color: #334155; }
.financeiro-th-ordenavel i { margin-left: 4px; opacity: 0.5; font-size: 10px; }
.financeiro-th-ordenavel.ordenacao-ativa i { opacity: 1; color: var(--primary); }

.status-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.status-pill.pendente { background: #fef3c7; color: #92400e; }
.status-pill.aprovado { background: #dcfce7; color: #15803d; }
.status-pill.inativo { background: #fee2e2; color: #b91c1c; }

.mini-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; margin-top: 4px; margin-right: 8px; }
.mini-badge.ok { color: #15803d; }
.mini-badge.warn { color: #b91c1c; }
.mini-badge.pf { color: #7c3aed; background: #f3e8ff; padding: 2px 7px; border-radius: 20px; margin-bottom: 2px; }

.admin-row-actions { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; }
.admin-row-actions button {
    border: none; padding: 6px 9px; border-radius: 6px; cursor: pointer;
    font-weight: 700; font-size: 11.5px; color: #fff; white-space: nowrap;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.admin-row-actions button:hover { transform: translateY(-1px); }
.admin-row-actions .act-approve { background: #16a34a; }
.admin-row-actions .act-deactivate { background: #f59e0b; color: #1e293b; }
.admin-row-actions .act-activate { background: var(--primary); }
.admin-row-actions .act-delete,
.admin-row-actions .btn-delete-act { background: #dc2626; }

.admin-tags-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.admin-tags-box { padding: 18px 20px; }
.admin-tags-box h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; color: var(--primary); font-weight: 700; }
.tags-list { display: flex; flex-wrap: wrap; gap: 8px; max-height: 150px; overflow-y: auto; padding-right: 4px; margin-bottom: 14px; }
.tag-chip { background: #f1f5f9; border: 1px solid var(--border-glass); color: #334155; padding: 5px 10px; border-radius: 6px; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; margin: 2px; }
.tag-chip.tag-db { background: #eff6ff; border-color: #bfdbfe; }
.tag-chip i { cursor: pointer; font-size: 10px; padding: 2px; }
.tag-chip i.fa-pen { color: #2563eb; }
.tag-chip i.fa-xmark { color: #dc2626; }
.tags-add-row { display: flex; gap: 8px; }
.tags-add-row input { flex: 1; background: #fff; border: 1px solid #cbd5e1; color: #0f172a; height: 38px; border-radius: 6px; padding: 0 12px; font-size: 13px; }
.tags-add-row button { background: var(--primary); border: none; color: #fff; border-radius: 6px; padding: 0 16px; font-size: 13px; font-weight: 700; cursor: pointer; }
.tags-add-row button:hover { background: var(--primary-hover); }

.admin-note { font-size: 11.5px; color: #94a3b8; margin-top: 10px; }

/* Cabeçalho do painel com mais de um botão de ação (Prospecção + Manual) */
.admin-header-actions { position: absolute; top: 24px; right: 64px; display: flex; gap: 10px; flex-wrap: wrap; }
.admin-header-actions .btn-admin-manual { position: static; top: auto; right: auto; }
@media (max-width: 620px) {
    .admin-header-actions { position: static; margin-top: 14px; }
}

/* Item 5 (16/07/2026): trava o tamanho dos botões de ícone (Anotação/Histórico)
   pra não ficarem largos demais nem quebrarem linha na tabela do Pipeline. */
#adminProspectsTableBody .admin-row-actions { flex-wrap: nowrap; }
#adminProspectsTableBody .act-note,
#adminProspectsTableBody .act-history { padding: 6px 8px; }

/* Pipeline de Prospecção (CRM - Fase 2) */
.etapa-select {
    border: 1px solid #cbd5e1; border-radius: 20px; padding: 5px 10px; font-size: 11.5px; font-weight: 700;
    background: #f1f5f9; color: #334155; cursor: pointer;
}
.etapa-select.etapa-contatado { background: #e0f2fe; color: #0369a1; }
.etapa-select.etapa-negociando { background: #fef3c7; color: #92400e; }
.etapa-select.etapa-convertido { background: #dcfce7; color: #15803d; }
.etapa-select.etapa-perdido { background: #fee2e2; color: #b91c1c; }
.admin-row-actions .act-note { background: #64748b; }
.admin-row-actions .act-history { background: var(--secondary, #0369a1); }
.admin-row-actions .act-recibo-pagamento,
.admin-row-actions .act-recibo-pagamento-fin { background: #15803d; }
/* 24/07/2026 (bug relatado por Wagner): esses dois botões da tabela do
   Financeiro ("Recibo" e "Editar") não tinham nenhuma cor própria definida
   aqui — caíam no branco padrão da regra geral (.admin-row-actions button),
   com o ícone branco por cima, ficando praticamente invisíveis ao lado do
   botão vermelho de Excluir. */
.admin-row-actions .act-editar-pagamento-fin { background: #2563eb; }
.admin-row-actions .act-ativar-newsletter { background: var(--primary); }
.admin-row-actions .act-inativar-newsletter { background: #f59e0b; color: #1e293b; }

/* 18/07/2026: os botões de Editar (Promoções/Brindes e Usuários) não tinham
   nenhuma cor própria definida aqui, então caíam no cinza padrão do navegador
   pra botão — com o ícone branco (herdado da regra geral acima) em cima desse
   cinza claro, ficavam quase apagados/ilegíveis ("ofuscados", como o Wagner
   reportou). Mesma cor azul já usada no lápis de editar Cidade/Categoria. */
.admin-row-actions .act-edit-promocao,
.admin-row-actions .act-edit-usuario { background: #2563eb; }

/* Pausar/Ativar promoção (18/07/2026) — mesmo padrão de cor do Ativar/Inativar
   da Newsletter logo acima: verde pra "está ativo, ação = pausar", laranja
   pra "está pausado, ação = reativar". */
.admin-row-actions .act-pausar-promocao { background: #f59e0b; color: #1e293b; }
.admin-row-actions .act-ativar-promocao { background: var(--primary); }

/* Painel em tela cheia (21/07/2026): antes só o Dashboard tinha esse layout de
   "menu lateral + conteúdo", e o menu (.admin-sidebar) vivia DENTRO do card do
   Dashboard — por isso sumia sempre que outra seção abria por cima. Agora
   #adminSidebarNav foi movido pra fora, como irmão de #adminContentViewport,
   os dois dentro de #adminAppShell — daí o menu fica sempre visível, e cada
   seção (Empresas, Usuários, Portfólio etc.) é só um painel que aparece/some
   dentro de #adminContentViewport, sem nunca cobrir o menu. Ver também a
   classe "admin-modo-painel" logo abaixo, que faz o #adminModal (que antes
   era sempre um card centralizado com fundo escurecido) virar tela cheia só
   quando esse app-shell está ativo — a tela de login continua sendo um card
   centralizado normal. */
#adminModal.admin-modo-painel {
    background: #f8fafc;
    backdrop-filter: none;
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
}
.admin-app-shell {
    display: none;
    width: 100%;
    height: 100%;
    align-items: stretch;
}
#adminModal.admin-modo-painel .admin-app-shell { display: flex; }

.admin-content-viewport {
    position: relative;
    flex: 1 1 auto;
    height: 100%;
    min-width: 0;
    overflow: hidden;
    background: var(--bg-light);
}
/* Cada seção (Empresas, Usuários, Portfólio, Ficha Cadastral, Dashboard...) é
   um ".modal-container" dentro de #adminContentViewport — a troca de tela
   continua sendo o mesmo display:none/block de sempre (nada mudou no JS),
   só que agora, em vez de um card centralizado flutuando sobre um fundo
   escurecido, cada um preenche 100% da área de conteúdo (posicionado
   absoluto, sobrepondo os demais que estão com display:none). O seletor é
   propositalmente um "descendente" (sem ">") pra também alcançar o Manual do
   Sistema, que fica um nível mais fundo (injetado dentro de #adminManualSlot). */
.admin-content-viewport .modal-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}
/* Correção (21/07/2026, parte 2): a primeira tentativa de corrigir a rolagem
   (abaixo) forçava "display:flex!important" incondicionalmente — mas
   "!important" vence o estilo inline não só quando ele diz "block", como
   também quando diz "none"! Ou seja, isso deixava TODAS as telas sempre
   visíveis ao mesmo tempo, ignorando completamente o "display:none" que o
   JS usa pra esconder cada uma — o clique nos botões do menu continuava
   funcionando por baixo dos panos (o JS trocava o display certinho), só que
   visualmente nada mudava, porque o CSS teimava em manter tudo "flex" (ou
   seja, visível) o tempo todo. Parecia "o menu travou". A correção certa é
   só forçar o "flex" quando o próprio estilo inline realmente diz "block" —
   por isso o seletor de atributo abaixo, que combina com o texto literal
   "display: block" dentro do atributo style (e não combina quando é
   "display: none", deixando esse caso escondido normalmente). */
.admin-content-viewport .modal-container[style*="display: block"] {
    display: flex !important;
    flex-direction: column !important;
}
#adminModal .admin-content-viewport .modal-scroll-body {
    max-height: none !important;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
}

/* Dashboard como tela inicial do painel, com menu lateral (16/07/2026, item 6) */
#adminDashboardStatsBox .admin-shell {
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
    min-height: 0;
    max-height: none;
    overflow: hidden;
}
.admin-sidebar {
    flex: 0 0 230px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #f8fafc;
    border-right: 1px solid var(--border-glass);
    padding: 18px 12px;
    overflow-y: auto;
}
.admin-sidebar-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13.5px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.admin-sidebar-btn i { width: 18px; text-align: center; color: var(--primary); }
.admin-sidebar-btn:hover { background: #e2e8f0; }
.admin-sidebar-btn.logout { color: #b91c1c; margin-top: 4px; }
.admin-sidebar-btn.logout i { color: #b91c1c; }
.admin-sidebar-btn.logout:hover { background: #fee2e2; }
.admin-sidebar-sep { height: 1px; background: var(--border-glass); margin: 8px 4px; }
/* Login individual (17/07/2026): mostra o e-mail de quem está logado, acima do
   botão "Sair" — confirmação visual de qual conta está sendo usada. */
.admin-sidebar-logged-as { font-size: 10.5px; color: #94a3b8; padding: 8px 12px 0; margin: 4px 0 0; word-break: break-all; }

/* Menu em gaveta no celular (26/07/2026) — barra com o botão de 3 barrinhas,
   fundo escurecido e botão "x" só aparecem em telas estreitas (ver media
   query "max-width: 760px" mais abaixo, que faz o menu virar uma gaveta que
   desliza da esquerda em vez da barra horizontal de antes). Em telas largas
   ficam sempre escondidos, sem afetar em nada o layout de desktop. */
.admin-mobile-topbar, .admin-sidebar-backdrop, .admin-sidebar-close-btn { display: none; }

/* Usuários (17/07/2026): grade de checkboxes das seções que cada pessoa pode
   acessar no painel. */
.admin-permissoes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    margin-bottom: 4px;
}
.admin-permissoes-grid label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: #334155;
    cursor: pointer;
}
.admin-permissoes-grid input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; }
@media (max-width: 620px) {
    .admin-permissoes-grid { grid-template-columns: 1fr; }
}
.secao-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    background: #e0f2fe;
    color: #075985;
    margin: 2px 4px 2px 0;
}
#adminDashboardStatsBox .admin-shell .modal-scroll-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    max-height: none;
    padding: 26px 30px 30px;
}
@media (max-width: 760px) {
    /* Em telas estreitas o menu some por padrão e vira uma gaveta lateral,
       acionada pelo botão de 3 barrinhas na barra do topo (26/07/2026, pedido
       do Wagner — antes era uma barra horizontal com todos os botões sempre
       visíveis, quebrando linha e ocupando até 40% da tela). */
    #adminModal.admin-modo-painel { flex-direction: column; }
    /* Correção (26/07/2026, bug reportado pelo Wagner): a barra do topo com o
       botão de 3 barrinhas precisa aparecer SÓ depois de logar (quando o
       painel de verdade está ativo, classe "admin-modo-painel" no
       #adminModal) — antes o seletor não conferia essa classe, então a
       barrinha "Painel" também aparecia flutuando por cima da tela de
       login/senha em celulares, já que ambas ficam lado a lado no HTML. */
    #adminModal.admin-modo-painel .admin-mobile-topbar {
        display: flex;
        align-items: center;
        gap: 14px;
        flex: 0 0 auto;
        padding: 12px 16px;
        background: #fff;
        border-bottom: 1px solid var(--border-glass);
    }
    .admin-hamburger-btn {
        background: transparent;
        border: none;
        color: var(--primary);
        font-size: 20px;
        line-height: 1;
        padding: 4px 6px;
        cursor: pointer;
    }
    .admin-mobile-topbar-title { font-weight: 700; color: #1e293b; font-size: 15px; }
    .admin-app-shell { flex-direction: column; }
    .admin-content-viewport { height: auto; flex: 1 1 auto; min-height: 0; }
    #adminDashboardStatsBox .admin-shell { flex-direction: column; }

    /* A gaveta em si: fixa, começa fora da tela (translateX -100%) e desliza
       pra dentro quando ganha a classe "admin-sidebar-open" (ver JS). */
    .admin-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 280px;
        max-width: 82vw;
        z-index: 1200;
        flex-direction: column;
        flex-wrap: nowrap;
        max-height: none;
        border-right: none;
        box-shadow: 3px 0 22px rgba(15, 23, 42, 0.22);
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }
    .admin-sidebar.admin-sidebar-open { transform: translateX(0); }
    .admin-sidebar-btn { width: 100%; }
    .admin-sidebar-close-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: flex-end;
        width: 34px;
        height: 34px;
        background: #f1f5f9;
        border: none;
        border-radius: 8px;
        color: #334155;
        font-size: 16px;
        cursor: pointer;
        margin-bottom: 6px;
    }

    /* Fundo escurecido atrás da gaveta — clicar nele fecha o menu (mesma ideia
       da imagem de referência que o Wagner mandou). Some/aparece com a classe
       "active" (ver JS), pra não capturar cliques quando o menu está fechado. */
    .admin-sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        z-index: 1190;
    }
    .admin-sidebar-backdrop.active { display: block; }
}

/* Abas de plano na tabela de Empresas Cadastradas (item 11) */
.admin-plan-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.admin-plan-tab {
    background: #f1f5f9;
    border: 1px solid var(--border-glass);
    color: #475569;
    font-weight: 700;
    font-size: 12.5px;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.admin-plan-tab:hover { background: #e2e8f0; }
.admin-plan-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Dashboard */
.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 6px;
}
.dash-card {
    background: #fff;
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    text-align: left;
}
.dash-card .dnum { font-size: 26px; font-weight: 800; color: var(--primary); line-height: 1.1; }
.dash-card .dlabel { font-size: 12px; color: #64748b; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; margin-top: 4px; }

/* Item 3 (16/07/2026): cartões do Dashboard que viram botão, levando pra tela/aba
   de origem do número ao clicar (ou Enter/Espaço com o teclado). */
.dash-card-clickable { cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.dash-card-clickable:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); border-color: var(--primary); }
.dash-card-clickable:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.dash-charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 26px;
}
.dash-chart-box {
    background: #fff;
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 16px 18px;
}
@media (max-width: 680px) {
    .dash-charts-row { grid-template-columns: 1fr; }
}

/* Ficha cadastral */
.ficha-section { margin-bottom: 26px; padding-bottom: 26px; border-bottom: 1px solid var(--border-glass); }
.ficha-section:last-child { border-bottom: none; }
.ficha-section .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ficha-section .form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 680px) {
    .ficha-section .form-row, .ficha-section .form-row.cols-3 { grid-template-columns: 1fr; }
}
.ficha-label { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; margin-bottom: 6px; }
.ficha-input, .ficha-textarea {
    background: #fff; border: 1px solid #cbd5e1; color: #0f172a; width: 100%; border-radius: 8px;
    padding: 0 14px; font-size: 14px; font-family: var(--font-sans); box-sizing: border-box;
}
.ficha-input { height: 42px; }
.ficha-textarea { padding: 10px 14px; resize: vertical; }
.ficha-input:focus, .ficha-textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 75, 35, 0.08); }
.ficha-thumb-preview { width: 75px; height: 75px; object-fit: cover; border-radius: 8px; border: 2px solid var(--accent); background: #f1f5f9; }
.ficha-thumb-box { width: 65px; height: 65px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-glass); background: #f1f5f9; }
.ficha-thumb-box img { width: 100%; height: 100%; object-fit: cover; }
.ficha-thumb-label { font-size: 11px; color: #64748b; display: block; width: 100%; margin-bottom: 4px; font-weight: 600; }

/* ==========================================================================
   MANUAL DO SISTEMA — guia de uso dentro do próprio painel administrativo,
   no mesmo padrão visual/estrutural usado no painel da Sabbini Imóveis
   (sumário fixo à esquerda + conteúdo em seções numeradas, com botão de
   impressão que gera um PDF completo do manual).
   ========================================================================== */
#adminManualBox {
    background: var(--bg-light);
    color: var(--text-main);
    max-height: 85vh; /* mesma correção de rolagem usada no #adminDashboardBox */
    display: none;
    flex-direction: column;
}
#adminManualBox .modal-scroll-body {
    padding: 26px 30px 30px;
    overflow-y: auto !important;
    max-height: calc(85vh - 85px);
}

.manual-print-bar { display: flex; justify-content: flex-end; margin-bottom: 16px; }

.manual-layout {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 26px;
    align-items: start;
}

.manual-toc {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: #ffffff;
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 18px;
    max-height: calc(65vh - 20px);
    overflow-y: auto;
}
.manual-toc h4 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    margin: 0 0 8px;
    font-weight: 800;
}
.manual-toc a {
    font-size: 12.5px;
    color: var(--text-main);
    padding: 7px 8px;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-fast, 0.2s);
}
.manual-toc a:hover { background: rgba(0, 75, 35, 0.08); color: var(--primary); }

.manual-content {
    background: #ffffff;
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 30px 34px;
}
.manual-section {
    padding-bottom: 26px;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--border-glass);
    scroll-margin-top: 10px;
}
.manual-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.manual-section h2 {
    font-size: 18px;
    color: var(--primary);
    margin: 0 0 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 9px;
}
.manual-section h2 i { color: var(--accent); }
.manual-section p { font-size: 13.5px; line-height: 1.65; color: var(--text-main); margin: 0 0 11px; }
.manual-section ul, .manual-section ol { margin: 0 0 11px; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }
.manual-section li { font-size: 13.5px; line-height: 1.55; color: var(--text-main); }
.manual-section code { background: rgba(0, 75, 35, 0.06); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; }

/* Selos "Depende de você" (ação manual) x "Acontece sozinho" (automático) —
   usados ao longo do manual pra deixar explícito quem faz o quê. */
.manual-tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.manual-tag {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase;
    padding: 5px 11px; border-radius: 20px;
}
.manual-tag.manual { background: #fdecd6; color: #a8541b; }
.manual-tag.auto { background: #dcfce7; color: #15803d; }

.manual-callout {
    border-radius: 8px;
    padding: 12px 15px;
    font-size: 13px;
    line-height: 1.55;
    margin: 0 0 14px;
}
.manual-callout.manual { background: #fdf1e8; border-left: 4px solid #b0632f; color: #3f2c1e; }
.manual-callout.auto { background: #ecfdf5; border-left: 4px solid #15803d; color: #133d2c; }
.manual-callout strong { color: inherit; }

@media (max-width: 900px) {
    .manual-layout { grid-template-columns: 1fr; }
    /* No celular, o sumário vira uma faixa horizontal com rolagem lateral
       em vez de uma lista vertical gigante acima do conteúdo — assim o
       texto do manual aparece logo de cara, sem precisar "rolar" por cima
       de 12 links primeiro (o que parecia travado). */
    .manual-toc {
        position: static;
        max-height: none;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 8px;
        padding: 12px;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        scroll-snap-type: x proximity;
    }
    .manual-toc h4 { display: none; }
    .manual-toc a {
        flex-shrink: 0;
        white-space: nowrap;
        background: rgba(0, 75, 35, 0.06);
        border: 1px solid var(--border-glass);
        scroll-snap-align: start;
    }
}

/* ==========================================================================
   Impressão/PDF (22/07/2026, ajustado 2x): o mecanismo original vivia aqui —
   uma #printArea escondida na própria página, mostrada via classe
   "is-printing" no <body> só durante @media print. Removido porque, testado
   de verdade no celular do Wagner, o PDF saía com o site público inteiro
   vazando atrás do conteúdo do painel, repetido em várias páginas (o
   pipeline de impressão do Android não respeitava a tempo o "esconder tudo"
   via classe de CSS). A primeira tentativa de correção abria uma aba nova
   isolada (URL de Blob), o que resolveu o vazamento — mas o serviço de
   impressão do Android não conseguia terminar de imprimir uma aba "blob:"
   (processo separado, sem como reler esse conteúdo), dando erro. A versão
   final usa um <iframe> escondido DENTRO da própria página (sem abrir aba
   nenhuma) — ver a função imprimirComCabecalho() no <script> principal de
   index.html — com seu próprio CSS embutido no HTML do iframe, então nada
   deste arquivo é usado por ela.
   ========================================================================== */

.btn-admin-manual {
    position: absolute;
    top: 24px;
    right: 64px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 204, 0, 0.55);
    color: #c9a227;
    font-size: 12.5px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: var(--transition-fast, 0.2s);
    white-space: nowrap;
}
.btn-admin-manual:hover { background: rgba(255, 204, 0, 0.15); border-color: #c9a227; }
@media (max-width: 620px) {
    .btn-admin-manual { position: static; margin-top: 14px; }
}