/* ==========================================================================
   FECHADURAS ELETRÔNICAS - CSS CONSOLIDADO FINAL
   Projeto: Afiliados 2026 | Organização: DBT Sites
   Objetivo: Layout estável, responsivo e compatível com todos os templates.
   ========================================================================== */

/* ==========================================================================
   1. VARIÁVEIS GLOBAIS
   ========================================================================== */
:root {
        --cor-primaria: #008b8b;
        --cor-secundaria: #2d3277;
        --cor-destaque: #ffe600;
        --cor-amazon: #ff9900;

        --cor-fundo: #f8faf9;
        --cor-texto: #2c3e50;
        --cor-texto-leve: #4a5568;
        --cor-texto-claro: #718096;

        --branco: #ffffff;
        --cinza-claro: #f7fafc;
        --cinza-borda: #e2e8f0;
        --cinza-suave: #f3f4f6;

        --cor-sucesso: #2e7d32;
        --cor-erro: #c62828;
        --cor-alerta: #f5a623;

        --sombra-leve: 0 2px 8px rgba(0, 0, 0, 0.06);
        --sombra-media: 0 4px 16px rgba(0, 0, 0, 0.08);
        --sombra-hover: 0 8px 24px rgba(0, 0, 0, 0.12);

        --raio: 8px;
        --raio-grande: 12px;

        --transicao: 0.25s ease;
        --transicao-rapida: 0.15s ease;
}

/* ==========================================================================
   2. RESET E BASE
   ========================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        background-color: var(--cor-fundo);
        color: var(--cor-texto);
        line-height: 1.7;
        font-weight: 400;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
}

a {
        color: var(--cor-primaria);
        text-decoration: none;
        transition: color var(--transicao), opacity var(--transicao), transform var(--transicao);
        font-weight: 500;
}
a:hover { color: #006b6b; }

ul, ol { margin: 0; padding: 0; }
ul { list-style: none; }

img { max-width: 100%; height: auto; display: block; border-radius: 4px; }

button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4 { color: var(--cor-secundaria); line-height: 1.25; font-weight: 700; }
p { margin-bottom: 16px; }
strong { font-weight: 700; }

/* ==========================================================================
   3. CONTAINER E LAYOUT PRINCIPAL
   ========================================================================== */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.main-layout, .layout-principal {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 32px;
        margin: 24px auto;
        width: 100%;
        max-width: 1200px;
}

.coluna-conteudo, main { min-width: 0; }
.sidebar, aside { min-width: 0; }

/* ==========================================================================
   4. HEADER / TOPO
   ========================================================================== */
.site-header {
        background: var(--branco);
        padding: 12px 0;
        border-bottom: 3px solid var(--cor-primaria);
        box-shadow: var(--sombra-leve);
        position: sticky;
        top: 0;
        z-index: 1000;
}

.header-content, .header-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 24px;
        flex-wrap: nowrap;
}

.logo {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        white-space: nowrap;
        color: var(--cor-secundaria);
        font-size: 1.5rem;
        font-weight: 700;
}
.logo img { height: 42px; width: auto; display: block; border-radius: 0; }
.logo span { color: var(--cor-primaria); }

.busca-area {
        flex: 1;
        max-width: 420px;
        display: flex;
        border: 1px solid var(--cinza-borda);
        border-radius: 6px;
        overflow: hidden;
        background: var(--branco);
        position: relative; /* Necessário para o dropdown da busca */
}
.busca-area input {
        flex: 1; padding: 10px 14px; border: none; outline: none;
        font-size: 0.95rem; color: var(--cor-texto); background: transparent;
}
.busca-area button {
        background: var(--cor-primaria); color: #fff; border: none;
        padding: 0 18px; font-weight: 600; font-size: 0.9rem;
        transition: background var(--transicao-rapida);
}
.busca-area button:hover { background: #006b6b; }

.nav-topo ul, .menu-principal ul {
        display: flex; gap: 22px; flex-wrap: nowrap; align-items: center; list-style: none;
}
.nav-topo a, .menu-principal a {
        color: var(--cor-texto-leve); font-size: 0.95rem; font-weight: 500; white-space: nowrap;
}
.nav-topo a:hover, .menu-principal a:hover { color: var(--cor-primaria); }

/* ==========================================================================
   5. CONTEÚDO BASE
   ========================================================================== */
.conteudo-principal {
        background: var(--branco);
        padding: 32px;
        border-radius: var(--raio);
        box-shadow: var(--sombra-leve);
        margin: 0;
}
section { margin-bottom: 32px; }
.secao-titulo {
        font-size: 1.6rem; color: var(--cor-secundaria); margin: 32px 0 18px;
        border-left: 4px solid var(--cor-primaria); padding-left: 12px; font-weight: 700;
}

/* ==========================================================================
   6. HOME HERO
   ========================================================================== */
.hero-section, .home-hero {
        background: linear-gradient(135deg, var(--cor-secundaria) 0%, var(--cor-primaria) 100%);
        color: #fff; padding: 42px 24px; border-radius: var(--raio-grande); margin-bottom: 32px; text-align: center;
}
.hero-content h1, .home-hero h1 { font-size: 2.15rem; margin-bottom: 12px; color: #fff; }
.hero-content p, .home-hero p {
        font-size: 1.05rem; max-width: 720px; margin: 0 auto 20px;
        opacity: 0.96; color: rgba(255, 255, 255, 0.95);
}
.hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-buttons .btn { min-width: 170px; }

.btn-primaria { background: var(--cor-destaque); color: var(--cor-secundaria); }
.btn-primaria:hover { background: #e6cf00; color: var(--cor-secundaria); }
.btn-secundaria { border: 2px solid #fff; color: #fff; background: transparent; }
.btn-secundaria:hover { background: #fff; color: var(--cor-primaria); }

/* ==========================================================================
   7. BOTÕES GERAIS
   ========================================================================== */
.btn-group { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

.btn {
        flex: 1; min-width: 110px; padding: 12px 14px; text-align: center;
        border-radius: 6px; font-weight: 700; font-size: 0.82rem; text-transform: uppercase;
        letter-spacing: 0.2px; display: inline-block; border: none;
        transition: opacity var(--transicao), transform var(--transicao), background var(--transicao);
}
.btn:hover { opacity: 0.96; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-amz { background: var(--cor-amazon); color: #111827; }
.btn-ml { background: var(--cor-destaque); color: var(--cor-secundaria); }
.btn-review, .btn-analise { border: 2px solid var(--cor-primaria); color: var(--cor-primaria); background: transparent; }
.btn-review:hover, .btn-analise:hover { background: var(--cor-primaria); color: #fff; }
.btn-destaque { display: inline-block; padding: 12px 18px; border-radius: 6px; font-weight: 700; background: var(--cor-primaria); color: #fff; }

/* ==========================================================================
   8. CARDS HOME / LISTAS
   ========================================================================== */
.grid-produtos { display: grid; grid-template-columns: 1fr; gap: 22px; }

.card-produto, .wc-card-fino {
        background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: var(--raio-grande);
        display: grid; grid-template-columns: 160px 1fr; overflow: hidden;
        transition: transform var(--transicao-rapida), box-shadow var(--transicao-rapida);
}
.card-produto:hover, .wc-card-fino:hover { transform: translateY(-3px); box-shadow: var(--sombra-leve); }

.card-img, .img-fina {
        padding: 14px; display: flex; align-items: center; justify-content: center;
        border-right: 1px solid var(--cinza-borda); background: var(--cinza-claro); min-height: 130px;
}
.card-img img, .img-fina img { max-height: 110px; width: auto; object-fit: contain; }

.card-conteudo, .info-fina { padding: 18px; display: flex; flex-direction: column; justify-content: center; }

.card-badge, .badge-nota, .mini-badge {
        display: inline-block; padding: 4px 10px; font-size: 0.72rem; border-radius: 6px;
        font-weight: 700; margin-bottom: 10px; background: var(--cinza-borda); color: var(--cor-texto-leve);
}
.card-badge.destaque { background: var(--cor-secundaria); color: #fff; }

.card-conteudo h3, .info-fina h3 { font-size: 1.08rem; margin-bottom: 8px; color: var(--cor-secundaria); }
.card-resumo, .info-fina p, .descricao-curta { font-size: 0.94rem; color: var(--cor-texto-leve); margin-bottom: 14px; line-height: 1.55; }

.card-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; align-items: stretch; }
.produto-botoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; align-items: stretch; }
.card-botoes .btn-review, .card-botoes .btn-analise { grid-column: 1 / -1; }

.btn-card {
        display: inline-flex; align-items: center; justify-content: center; text-align: center;
        width: 100%; min-height: 46px; font-size: 0.84rem; line-height: 1.25;
        padding: 11px 14px; border-radius: 6px; font-weight: 700;
}

/* ==========================================================================
   9. CARD DESTAQUE HOME / TOP
   ========================================================================== */
.wc-card-destaque, .destaque-principal .wc-card, .wc-card {
        background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: var(--raio-grande);
        display: grid; grid-template-columns: 300px 1fr; overflow: hidden; position: relative;
        box-shadow: var(--sombra-leve); transition: box-shadow var(--transicao); margin-bottom: 32px;
}
.wc-card-destaque:hover, .destaque-principal .wc-card:hover, .wc-card:hover { box-shadow: var(--sombra-hover); }

.wc-card-destaque .badge, .wc-badge {
        background: var(--cor-secundaria); color: #fff; padding: 6px 14px; font-size: 0.72rem;
        font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
        border-radius: 0 0 8px 0; display: inline-block; margin-bottom: 12px;
}

.img-grande, .wc-img-area {
        padding: 28px; display: flex; align-items: center; justify-content: center;
        border-right: 1px solid var(--cinza-borda); background: var(--cinza-claro);
}
.img-grande img, .wc-img-area img { max-height: 250px; width: auto; object-fit: contain; }

.info-grande, .wc-content-area { padding: 28px; display: flex; flex-direction: column; }
.info-grande h2, .wc-title { color: var(--cor-secundaria); margin-bottom: 10px; font-size: 1.55rem; }

.veredito, .wc-veredito, .veredito-box {
        background: var(--cinza-suave); border-left: 4px solid var(--cor-primaria);
        padding: 15px 18px; font-style: italic; margin: 16px 0; font-size: 0.96rem;
        color: var(--cor-texto-leve); line-height: 1.6;
}

.wc-descricao-curta { font-size: 1rem; color: var(--cor-texto-leve); margin-bottom: 18px; }
.cta-container, .wc-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: auto; }

.btn-cta {
        display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
        padding: 14px; text-align: center; font-size: 0.85rem; font-weight: 700; border-radius: 6px;
}
.btn-amazon { background: var(--cor-amazon); color: #111827; }
.btn-analise { grid-column: span 2; }

/* ==========================================================================
   10. NOTA / AVALIAÇÃO
   ========================================================================== */
.nota-avaliacao { display: flex; align-items: center; gap: 8px; margin: 8px 0 14px; flex-wrap: wrap; }
.estrelas { color: #ffd700; font-size: 1.1rem; }
.nota-numero { font-weight: 700; color: var(--cor-secundaria); font-size: 1rem; }
.qtd-avaliacoes { font-size: 0.85rem; color: var(--cor-texto-claro); }

/* ==========================================================================
   11. PÁGINA DE PRODUTO
   ========================================================================== */
.produto-header { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 2px solid var(--cinza-borda); }
.produto-identificacao { margin-bottom: 20px; }
.produto-marca {
        display: inline-block; background: var(--cinza-claro); color: var(--cor-secundaria);
        padding: 4px 10px; border-radius: 4px; font-size: 0.82rem; font-weight: 600; margin-bottom: 8px;
}
.produto-identificacao h1 { color: var(--cor-secundaria); font-size: 1.85rem; margin-bottom: 12px; }
.produto-imagem-destaque { margin: 24px 0; text-align: center; }
.img-destaque-800 {
        width: 100%; max-width: 450px; aspect-ratio: 1 / 1; object-fit: contain;
        margin: 0 auto 24px; border: 1px solid var(--cinza-borda); border-radius: var(--raio);
        background: var(--cinza-claro);
}
.produto-acoes { margin-top: 24px; }
.aviso-afiliado { font-size: 0.8rem; color: var(--cor-texto-claro); margin-top: 10px; text-align: center; }
.resumo-rapido { margin: 32px 0; }
.resumo-rapido h2 { color: var(--cor-secundaria); margin-bottom: 12px; font-size: 1.3rem; }

.analise-texto { margin: 32px 0; }
.analise-texto h2, .analise-texto h3 { color: var(--cor-secundaria); margin: 24px 0 12px; font-weight: 700; }
.analise-texto h2 { font-size: 1.4rem; }
.analise-texto h3 { font-size: 1.2rem; }
.analise-texto p { margin-bottom: 14px; font-size: 1.05rem; color: var(--cor-texto); line-height: 1.75; }
.analise-texto ul, .analise-texto ol { margin: 14px 0 14px 24px; padding-left: 0; }
.analise-texto li { margin-bottom: 6px; line-height: 1.65; list-style: disc; color: var(--cor-texto-leve); }

.analise-texto table {
        width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 0.95rem;
        background: var(--branco);
}
.analise-texto th, .analise-texto td { border: 1px solid var(--cinza-borda); padding: 10px 12px; text-align: left; }
.analise-texto th { background: var(--cinza-claro); color: var(--cor-secundaria); font-weight: 600; }

.pros-contras-section, .especificacoes-section, .comparativos-section, .indicacao-section, .conclusao-section, .faq-section { margin: 32px 0; }
.pros-contras-section h2, .especificacoes-section h2, .comparativos-section h2, .indicacao-section h2, .conclusao-section h2, .faq-section h2, .faq-section h3 {
        color: var(--cor-secundaria); margin-bottom: 16px; font-size: 1.3rem;
        border-left: 4px solid var(--cor-primaria); padding-left: 12px;
}

.caixa-pros-contras { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lista-pros, .lista-contras { padding: 16px; border-radius: var(--raio); }
.lista-pros { background: #e8f5e9; border-top: 3px solid var(--cor-sucesso); }
.lista-contras { background: #ffebee; border-top: 3px solid var(--cor-erro); }
.lista-pros h4, .lista-contras h4 { margin-bottom: 8px; font-size: 1rem; }
.lista-pros h4 { color: var(--cor-sucesso); }
.lista-contras h4 { color: var(--cor-erro); }
.lista-pros ul, .lista-contras ul { padding-left: 18px; }
.lista-pros li, .lista-contras li { list-style: disc; font-size: 0.95rem; margin-bottom: 4px; color: var(--cor-texto-leve); }

.tabela-especificacoes, .tabela-comparativa-produto {
        width: 100%; border-collapse: collapse; background: var(--branco); border-radius: var(--raio);
        overflow: hidden; border: 1px solid var(--cinza-borda); font-size: 0.95rem;
}
.tabela-especificacoes th, .tabela-especificacoes td, .tabela-comparativa-produto th, .tabela-comparativa-produto td {
        padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--cinza-borda);
}
.tabela-especificacoes th, .tabela-comparativa-produto th { background: var(--cinza-claro); color: var(--cor-secundaria); font-weight: 600; }
.tabela-especificacoes tr:last-child th, .tabela-especificacoes tr:last-child td, .tabela-comparativa-produto tr:last-child td { border-bottom: none; }
.tabela-especificacoes tr:hover, .tabela-comparativa-produto tr:hover { background: var(--cinza-claro); }

.conclusao-box { background: var(--cinza-claro); padding: 20px; border-radius: var(--raio); border: 1px solid var(--cinza-borda); }
.conclusao-botoes { margin-top: 16px; justify-content: center; }
.produto-footer { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--cinza-borda); text-align: center; }
.data-atualizacao-info { font-size: 0.85rem; color: var(--cor-texto-claro); margin-bottom: 8px; }
.compartilhar { font-size: 0.85rem; color: var(--cor-texto-leve); }
.compartilhar a { color: var(--cor-primaria); font-weight: 600; }
.compartilhar a:hover { text-decoration: underline; }

/* ==========================================================================
   12. FAQ
   ========================================================================== */
details { background: var(--branco); margin-bottom: 10px; border-radius: 6px; border: 1px solid var(--cinza-borda); overflow: hidden; }
summary {
        padding: 14px 16px; font-weight: 600; cursor: pointer; color: var(--cor-secundaria);
        outline: none; list-style: none; display: flex; justify-content: space-between; align-items: center;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: 1.1rem; color: var(--cor-primaria); font-weight: 700; }
details[open] summary::after { content: "−"; }
.faq-content { padding: 0 16px 16px; color: var(--cor-texto-leve); line-height: 1.65; font-size: 0.95rem; }

/* ==========================================================================
   13. SIDEBAR
   ========================================================================== */
.widget {
        background: var(--branco); padding: 18px; border: 1px solid var(--cinza-borda);
        border-radius: var(--raio); margin-bottom: 16px; box-shadow: var(--sombra-leve);
}
.widget h3 {
        color: var(--cor-secundaria); border-bottom: 2px solid var(--cor-primaria);
        padding-bottom: 6px; margin-bottom: 12px; font-size: 1rem;
}
.menu-lat li, .menu-lateral li { margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--cinza-borda); list-style: none; }
.menu-lat a, .menu-lateral a {
        color: var(--cor-texto-leve); font-size: 0.9rem; display: block;
        transition: color var(--transicao-rapida), padding-left var(--transicao-rapida);
}
.menu-lat a:hover, .menu-lateral a:hover { color: var(--cor-primaria); padding-left: 4px; }
.data-atualizacao { font-size: 0.75rem; color: var(--cor-texto-claro); display: block; margin-top: 2px; }

.tabela-comparativa { width: 100%; font-size: 0.85rem; border-collapse: collapse; }
.tabela-comparativa th, .tabela-comparativa td { padding: 6px 0; border-bottom: 1px dashed var(--cinza-borda); }
.tabela-comparativa th { text-align: left; color: var(--cor-secundaria); font-weight: 600; }
.tabela-comparativa .nota-cell { text-align: center; font-weight: 600; color: var(--cor-primaria); }
.ver-todos { display: block; text-align: center; margin-top: 12px; font-size: 0.85rem; color: var(--cor-primaria); font-weight: 600; }

/* ==========================================================================
   14. BLOCO LINK ECONÔMICOS
   ========================================================================== */
.bloco-link-economicos { margin: 24px 0 36px; }
.box-link-economicos {
        background: var(--branco); border: 1px solid var(--cinza-borda);
        border-left: 4px solid var(--cor-destaque); border-radius: var(--raio);
        padding: 22px; box-shadow: var(--sombra-leve);
}
.box-link-economicos h2 { font-size: 1.35rem; margin-bottom: 8px; color: var(--cor-secundaria); }
.box-link-economicos p { color: var(--cor-texto-leve); margin-bottom: 14px; }

/* ==========================================================================
   15. PÁGINAS INSTITUCIONAIS
   ========================================================================== */
.institucional, .pagina-institucional { background: var(--branco); padding: 32px; border-radius: var(--raio); box-shadow: var(--sombra-leve); }
.institucional-header { margin-bottom: 20px; }
.institucional-header h1, .conteudo-institucional h1 {
        color: var(--cor-secundaria); font-size: 1.9rem; margin-bottom: 12px;
        border-left: 4px solid var(--cor-primaria); padding-left: 12px;
}
.institucional-subtitulo { color: var(--cor-texto-leve); font-size: 1rem; margin-bottom: 0; }
.institucional-conteudo, .conteudo-institucional { color: var(--cor-texto); }
.institucional-conteudo h2, .conteudo-institucional h2 {
        color: var(--cor-secundaria); font-size: 1.3rem; margin: 24px 0 12px;
        border-left: 3px solid var(--cor-primaria); padding-left: 10px;
}
.institucional-conteudo h3, .conteudo-institucional h3 { color: var(--cor-secundaria); font-size: 1.1rem; margin: 20px 0 10px; font-weight: 600; }
.institucional-conteudo p, .conteudo-institucional p { margin-bottom: 14px; line-height: 1.75; font-size: 1.04rem; }
.institucional-conteudo ul, .institucional-conteudo ol, .conteudo-institucional ul, .conteudo-institucional ol { margin: 14px 0 14px 24px; }
.institucional-conteudo li, .conteudo-institucional li { margin-bottom: 6px; line-height: 1.65; list-style: disc; color: var(--cor-texto-leve); }
.institucional-conteudo a, .conteudo-institucional a { color: var(--cor-primaria); text-decoration: underline; }
.institucional-conteudo a:hover, .conteudo-institucional a:hover { color: var(--cor-secundaria); }
.institucional-conteudo blockquote, .conteudo-institucional blockquote {
        background: var(--cinza-claro); border-left: 4px solid var(--cor-primaria);
        padding: 14px 18px; margin: 18px 0; font-style: italic; color: var(--cor-texto-leve);
}
.institucional-conteudo table, .conteudo-institucional table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 0.95rem; }
.institucional-conteudo th, .institucional-conteudo td, .conteudo-institucional th, .conteudo-institucional td { border: 1px solid var(--cinza-borda); padding: 10px 12px; text-align: left; }
.institucional-conteudo th, .conteudo-institucional th { background: var(--cinza-claro); color: var(--cor-secundaria); font-weight: 600; }

/* ==========================================================================
   16. FOOTER
   ========================================================================== */
.site-footer { background: var(--branco); padding: 32px 0 16px; margin-top: 40px; border-top: 3px solid var(--cor-primaria); }
.footer-grid, .footer-container { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: 24px; }
.footer-col h4 { color: var(--cor-secundaria); margin-bottom: 12px; font-size: 1rem; font-weight: 700; }
.footer-col p { font-size: 0.9rem; color: var(--cor-texto-leve); line-height: 1.6; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 6px; }
.footer-col ul li a { color: var(--cor-texto-leve); font-size: 0.9rem; }
.footer-col ul li a:hover { color: var(--cor-primaria); }
.footer-copy, .footer-bottom { text-align: center; padding-top: 16px; border-top: 1px solid var(--cinza-borda); }
.footer-copy p, .footer-bottom p { font-size: 0.85rem; color: var(--cor-texto-claro); margin: 0; }

/* ==========================================================================
   17. COOKIE CONSENT
   ========================================================================== */
.cookie-consent-container {
        position: fixed; bottom: 0; left: 0; width: 100%; background: var(--branco);
        padding: 18px 20px; box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
        z-index: 9999; border-top: 3px solid var(--cor-primaria); display: none;
}
.cookie-consent-container.show { display: block; }
.cookie-content { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.cookie-content p { font-size: 0.9rem; color: var(--cor-texto); margin: 0; line-height: 1.45; }
.cookie-content a { color: var(--cor-primaria); font-weight: 600; text-decoration: underline; }
.cookie-buttons { display: flex; gap: 8px; flex-shrink: 0; }
#btn-accept {
        background: var(--cor-primaria); color: #fff; border: none; padding: 10px 18px;
        border-radius: 4px; cursor: pointer; font-weight: 600; font-size: 0.86rem;
        transition: background var(--transicao-rapida);
}
#btn-accept:hover { background: #006b6b; }
#btn-decline {
        background: transparent; color: var(--cor-texto-leve); border: 1px solid var(--cinza-borda);
        padding: 10px 18px; border-radius: 4px; cursor: pointer; font-weight: 500; font-size: 0.86rem;
        transition: all var(--transicao-rapida);
}
#btn-decline:hover { background: var(--cinza-claro); border-color: var(--cor-texto-claro); }

/* ==========================================================================
   18. UTILITÁRIOS
   ========================================================================== */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.mt-10 { margin-top: 10px; } .mt-20 { margin-top: 20px; } .mt-30 { margin-top: 30px; } .mt-40 { margin-top: 40px; }
.mb-10 { margin-bottom: 10px; } .mb-20 { margin-bottom: 20px; } .mb-30 { margin-bottom: 30px; } .mb-40 { margin-bottom: 40px; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

/* Acessibilidade */
a:focus, button:focus, input:focus, summary:focus { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }

/* ==========================================================================
   19. RESPONSIVIDADE
   ========================================================================== */
@media (max-width: 1024px) {
        .main-layout, .layout-principal { grid-template-columns: 1fr; margin: 20px auto; }
}

@media (max-width: 850px) {
        .header-content, .header-container { flex-direction: column; align-items: stretch; text-align: center; gap: 16px; }
        .logo { justify-content: center; }
        .busca-area { max-width: 100%; width: 100%; }
        .nav-topo ul, .menu-principal ul { justify-content: center; flex-wrap: wrap; gap: 16px; }
        .wc-card-destaque, .wc-card, .wc-card-topo, .card-produto, .wc-card-fino { grid-template-columns: 1fr; }
        .img-grande, .wc-img-area, .card-img, .img-fina { border-right: none; border-bottom: 1px solid var(--cinza-borda); }
        .cta-container, .wc-cta { grid-template-columns: 1fr; }
        .btn-analise { grid-column: span 1; }
        .caixa-pros-contras { grid-template-columns: 1fr; }
        .footer-grid, .footer-container { grid-template-columns: 1fr; gap: 20px; }
        .cookie-content { flex-direction: column; text-align: center; gap: 12px; }
        .cookie-buttons { width: 100%; justify-content: center; flex-wrap: wrap; }
}

@media (max-width: 480px) {
        .container { padding: 0 14px; }
        .conteudo-principal, .institucional, .pagina-institucional { padding: 22px; }
        .hero-content h1, .home-hero h1 { font-size: 1.65rem; }
        .secao-titulo { font-size: 1.35rem; }
        .info-grande, .wc-content-area, .card-conteudo, .info-fina { padding: 16px; }
        .btn-group, .produto-botoes { flex-direction: column; }
        .card-botoes { grid-template-columns: 1fr; }
        .btn, .btn-card { width: 100%; }
        .cookie-consent-container { padding: 14px; }
}

/* ==========================================================================
   20. IMPRESSÃO
   ========================================================================== */
@media print {
        .site-header, .cookie-consent-container, .btn-group, .busca-area, .hero-section, .home-hero, .sidebar, .site-footer, .nav-topo { display: none !important; }
        body { background: #fff; color: #000; font-size: 11pt; }
        .conteudo-principal, .wc-card-destaque, .wc-card, .wc-card-fino, .wc-card-topo { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
        .main-layout, .layout-principal { display: block; }
        a { color: #000; text-decoration: underline; }
        a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* ==========================================================================
   21. BUSCA - DROPDOWN DE RESULTADOS
   ========================================================================== */
.busca-resultados {
        position: absolute; top: 100%; left: 0; right: 0;
        background: var(--branco); border: 1px solid var(--cinza-borda);
        border-radius: 0 0 6px 6px; box-shadow: var(--sombra-media);
        z-index: 100; max-height: 400px; overflow-y: auto; margin-top: 2px;
}
.busca-item {
        display: block; padding: 12px 14px; border-bottom: 1px solid var(--cinza-borda);
        color: var(--cor-texto); text-decoration: none; transition: background 0.15s;
}
.busca-item:hover { background: var(--cinza-claro); }
.busca-item:last-child { border-bottom: none; }
.busca-item strong { display: block; color: var(--cor-secundaria); margin-bottom: 2px; }
.busca-item small { display: block; color: var(--cor-texto-claro); font-size: 0.8rem; margin-bottom: 4px; }
.busca-item p { margin: 0; font-size: 0.9rem; color: var(--cor-texto-leve); }
.busca-sem-resultados { padding: 12px 14px; color: var(--cor-texto-claro); text-align: center; }
.busca-resultados mark { background: var(--cor-destaque); color: var(--cor-secundaria); padding: 0 2px; border-radius: 2px; }
@media (max-width: 850px) { .busca-resultados { left: -20px; right: -20px; } }

/* ==========================================================================
   22. ARTIGO / BLOG (COMPATIBILIDADE FUTURA)
   ========================================================================== */
.post-blog { margin-bottom: 32px; }
.post-header { margin-bottom: 24px; text-align: center; }
.post-header h1 { font-size: 1.8rem; margin-bottom: 8px; }
.post-meta { font-size: 0.9rem; color: var(--cor-texto-claro); margin-bottom: 16px; }
.post-meta span { margin: 0 4px; }
.img-destaque-blog { max-width: 100%; height: auto; margin: 0 auto 24px; border-radius: var(--raio); }
.post-body { font-size: 1.05rem; line-height: 1.8; color: var(--cor-texto); }
.post-body h2 { margin-top: 32px; }
.post-footer { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--cinza-borda); text-align: center; background: var(--cinza-suave); padding: 16px; border-radius: var(--raio); }
.page-header { margin-bottom: 24px; padding-bottom: 16px; border-bottom: 2px solid var(--cinza-borda); }
.page-header h1 { font-size: 1.8rem; margin-bottom: 8px; color: var(--cor-secundaria); }
.page-header p { color: var(--cor-texto-leve); font-size: 1rem; margin: 0; }
.lista-produtos { margin-top: 32px; }