/* =============================================================================
   FISARMÔNICA BLOG — Estilos principais
   Todos os valores derivados do fisarmonica-design-system.md
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. VARIÁVEIS CSS — Design Tokens
   ----------------------------------------------------------------------------- */

:root {
    /* Cores — Marca */
    --color-primary:          #C1A219;
    --color-primary-dark:     #fdd213;
    /* Dourado escurecido para uso como TEXTO direto sobre o fundo claro do site (links, rótulos) —
       o dourado vívido tinha ótimo contraste sobre o fundo escuro original, mas perde legibilidade
       sobre um fundo claro; usado apenas onde --color-primary aparece como cor de texto na zona clara,
       não em preenchimentos/bordas/botões (esses continuam com --color-primary normalmente) */
    --color-primary-text:     #6b5500;

    /* Cores — Fundos (zona clara — corpo do site: index, single, archive, search, 404, páginas) */
    --color-bg:               #F5F5F4;
    --color-bg-alt:           #010101;
    --color-surface:          #FFFFFF;
    --color-border:           #D2D0CB;

    /* Cores — Texto (zona clara) */
    --color-text:             #1A1A1A;
    --color-text-secondary:   #666666;
    --color-text-muted:       #333333;

    /* Cores — Zona escura (header, footer, mobile nav, lead-capture, busca do header:
       esses componentes permanecem escuros como âncoras de contraste mesmo com o
       corpo do site claro — ver feedback-fisarmonica-primary-color na memória do projeto) */
    --color-surface-dark:            #1E1F25;
    --color-border-dark:             #2E2E2E;
    --color-text-on-dark:            #FFFFFF; /* também usado como texto sobre o dourado --color-primary (botão CTA) */
    --color-text-secondary-on-dark:  #888888;

    /* Cores — Semânticas */
    --color-price-highlight:  #C1A219;
    --color-price-secondary:  #15354A;
    --color-ui-border:        #CDCDCD;

    /* Tipografia — Famílias */
    --font-display:           'Oswald', sans-serif;
    --font-body:              'Lato', sans-serif;

    /* Tipografia — Tamanhos */
    --font-size-cta:          26px;
    --font-size-heading:      17px;
    --font-size-subheading:   16px;
    --font-size-body:         16px;
    --font-size-small:        14px;
    --font-size-price-lg:     44px;
    --font-size-price-sm:     20px;

    /* Tipografia — Pesos */
    --weight-light:           300;
    --weight-regular:         400;
    --weight-semibold:        600;
    --weight-bold:            700;

    /* Tipografia — Altura de linha */
    --line-height-tight:      1.2;
    --line-height-normal:     1.5;

    /* Espaçamento — Sistema base 4px */
    --space-1:                4px;
    --space-2:                8px;
    --space-3:                12px;
    --space-4:                16px;
    --space-5:                24px;
    --space-6:                32px;
    --space-7:                48px;
    --space-8:                64px;
}

/* -----------------------------------------------------------------------------
   2. RESET E BASE
   ----------------------------------------------------------------------------- */

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

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

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    font-weight: var(--weight-regular);
    line-height: var(--line-height-normal);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--color-primary-text);
    text-decoration: none;
}

a:hover {
    color: var(--color-primary-dark);
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* -----------------------------------------------------------------------------
   3. LAYOUT — Containers
   ----------------------------------------------------------------------------- */

.conteudo-principal__container,
.cabecalho-site__container,
.rodape-site__container,
.post-individual__container {
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-5);
    padding-right: var(--space-5);
}

.conteudo-principal {
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
}

/* -----------------------------------------------------------------------------
   4. CABEÇALHO DO SITE
   ----------------------------------------------------------------------------- */

.cabecalho-site {
    background-color: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border-dark);
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

.cabecalho-site__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
}

.cabecalho-site__logo-img {
    height: 40px;
    width: auto;
}

/* -----------------------------------------------------------------------------
   5. NAVEGAÇÃO PRINCIPAL
   ----------------------------------------------------------------------------- */

.menu-principal__lista {
    display: flex;
    list-style: none;
    gap: var(--space-5);
}

.menu-principal__lista a {
    color: var(--color-text-on-dark);
    font-family: var(--font-body);
    font-size: var(--font-size-small);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.2s ease;
}

.menu-principal__lista a:hover {
    color: var(--color-primary);
}

/* -----------------------------------------------------------------------------
   6. RODAPÉ DO SITE
   ----------------------------------------------------------------------------- */

.rodape-site {
    background-color: var(--color-bg-alt);
    border-top: 1px solid var(--color-border-dark);
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
}

.rodape-site__container {
    display: block;
}

.rodape-site__logo {
    height: 30px;
    width: auto;
    margin-bottom: var(--space-3);
}

.rodape-site__descricao {
    color: var(--color-text-secondary-on-dark);
    font-size: var(--font-size-small);
}

.rodape-site__direitos {
    color: var(--color-text-secondary-on-dark);
    font-size: var(--font-size-small);
}

.rodape-site__direitos a {
    color: var(--color-primary);
}

/* -----------------------------------------------------------------------------
   7. CARDS DE POST (index.php e archive.php)
   ----------------------------------------------------------------------------- */

.lista-posts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-6);
}

.card-post {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s ease;
}

.card-post:hover {
    border-color: var(--color-primary);
}

.card-post__imagem-link {
    display: block;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-post:hover .card-post__imagem-link {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(193, 162, 25, 0.18);
}

.card-post__imagem {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-post__corpo {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1;
}

.card-post__titulo {
    font-family: var(--font-body);
    font-size: var(--font-size-heading);
    font-weight: var(--weight-bold);
    line-height: var(--line-height-tight);
}

.card-post__titulo a {
    color: var(--color-text);
}

.card-post__titulo a:hover {
    color: var(--color-primary-text);
}

.card-post__resumo {
    color: var(--color-text-secondary);
    font-size: var(--font-size-small);
    flex: 1;
}

.card-post__link {
    display: inline-block;
    color: var(--color-primary-text);
    font-size: var(--font-size-small);
    font-weight: var(--weight-semibold);
    margin-top: var(--space-2);
}

/* -----------------------------------------------------------------------------
   8. CABEÇALHO DE ARQUIVO (archive.php, taxonomy)
   ----------------------------------------------------------------------------- */

.cabecalho-arquivo {
    margin-bottom: var(--space-7);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.cabecalho-arquivo__rotulo {
    display: block;
    color: var(--color-primary-text);
    font-size: var(--font-size-small);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-2);
}

.cabecalho-arquivo__titulo {
    font-family: var(--font-body);
    font-size: 32px;
    font-weight: var(--weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text);
}

.cabecalho-arquivo__descricao {
    color: var(--color-text-secondary);
    font-size: var(--font-size-body);
    margin-top: var(--space-3);
}

/* -----------------------------------------------------------------------------
   9. POST INDIVIDUAL (single.php)
   ----------------------------------------------------------------------------- */

.post-individual__corpo {
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
}

.post-individual__titulo {
    font-family: var(--font-body);
    font-size: 36px;
    font-weight: var(--weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text);
    margin-bottom: var(--space-5);
}

.post-individual__conteudo {
    color: var(--color-text);
    font-size: var(--font-size-body);
    line-height: var(--line-height-normal);
    margin-top: var(--space-6);
}

.post-individual__conteudo h2 {
    font-size: 24px;
    font-weight: var(--weight-bold);
    margin-top: var(--space-7);
    margin-bottom: var(--space-4);
}

.post-individual__conteudo h3 {
    font-size: 20px;
    font-weight: var(--weight-bold);
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
}

.post-individual__conteudo p {
    margin-bottom: var(--space-4);
}

.post-individual__conteudo ul,
.post-individual__conteudo ol {
    padding-left: var(--space-5);
    margin-bottom: var(--space-4);
}

.post-individual__conteudo li {
    margin-bottom: var(--space-2);
}

/* -----------------------------------------------------------------------------
   10. PÁGINA ESTÁTICA (page.php)
   ----------------------------------------------------------------------------- */

.pagina-estatica {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.pagina-estatica__titulo {
    font-family: var(--font-body);
    font-size: 36px;
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.pagina-estatica__conteudo {
    color: var(--color-text);
    font-size: var(--font-size-body);
    line-height: var(--line-height-normal);
}

/* -----------------------------------------------------------------------------
   11. BOTÕES
   ----------------------------------------------------------------------------- */

.botao-primario {
    display: inline-block;
    background-color: var(--color-primary);
    color: var(--color-text-on-dark);
    font-family: var(--font-display);
    font-size: var(--font-size-cta);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    border-radius: 13px;
    padding: 17px 10px;
    text-align: center;
    transition: background-color 0.2s ease;
    cursor: pointer;
    border: none;
    width: 100%;
}

.botao-primario:hover {
    background-color: var(--color-primary-dark);
    color: var(--color-text-on-dark);
}

.botao-secundario {
    display: inline-block;
    background-color: transparent;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--font-size-small);
    font-weight: var(--weight-semibold);
    border-radius: 5px;
    padding: 11px 18px;
    border: 1px solid var(--color-border);
    transition: border-color 0.2s ease, color 0.2s ease;
    cursor: pointer;
}

.botao-secundario:hover {
    border-color: var(--color-primary);
    color: var(--color-primary-text);
}

/* Uso do botao-secundario dentro do header (zona escura) — precisa de texto/borda claros,
   diferente do uso padrão em zona clara (ex: pagina-erro__link em 404.php) */
.botao-secundario.cabecalho-site__cta {
    color: var(--color-text-on-dark);
    border-color: var(--color-border-dark);
}

.botao-secundario.cabecalho-site__cta:hover {
    color: var(--color-primary);
}

/* -----------------------------------------------------------------------------
   12. PAGINAÇÃO
   ----------------------------------------------------------------------------- */

.paginacao {
    margin-top: var(--space-7);
    display: flex;
    justify-content: center;
}

.paginacao .nav-links {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.paginacao .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--space-3);
    border-radius: 6px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: var(--font-size-small);
    transition: border-color 0.2s ease, color 0.2s ease;
}

.paginacao .page-numbers:hover,
.paginacao .page-numbers.current {
    border-color: var(--color-primary);
    color: var(--color-primary-text);
}

/* -----------------------------------------------------------------------------
   13. META DO POST (template-parts/meta-post.php)
   ----------------------------------------------------------------------------- */

.meta-post {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.meta-post__item {
    color: var(--color-text-secondary);
    font-size: var(--font-size-small);
    font-weight: var(--weight-regular);
}

.meta-post__separador {
    color: var(--color-text-secondary);
    font-size: var(--font-size-small);
}

/* -----------------------------------------------------------------------------
   14. CABEÇALHO DO POST (template-parts/cabecalho-post.php)
   ----------------------------------------------------------------------------- */

.cabecalho-post {
    width: 100%;
}

.cabecalho-post__imagem-wrapper {
    position: relative;
    width: 100%;
    max-height: 480px;
    overflow: hidden;
}

.cabecalho-post__imagem {
    width: 100%;
    height: 480px;
    object-fit: cover;
    display: block;
}

.cabecalho-post__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(22, 23, 28, 0.45) 0%,
        rgba(22, 23, 28, 0.75) 100%
    );
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: var(--space-5);
}

.cabecalho-post__logo {
    height: 35px;
    width: auto;
}

.cabecalho-post__sem-imagem {
    background-color: var(--color-bg-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-7) var(--space-5);
    border-bottom: 1px solid var(--color-border-dark);
}

.cabecalho-post__logo--sem-imagem {
    opacity: 0.6;
}

/* -----------------------------------------------------------------------------
   15. BADGES DE NÍVEL (template-parts/badge-nivel.php)
   ----------------------------------------------------------------------------- */

.badges-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.badges-nivel,
.badges-tipo {
    display: contents;
}

.badge-nivel {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: var(--weight-semibold);
    padding: 3px var(--space-2);
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Iniciante — verde (texto em tom escuro para manter contraste sobre o fundo claro do site) */
.badge-nivel--iniciante {
    background-color: rgba(37, 211, 102, 0.18);
    color: #146c38;
    border: 1px solid rgba(37, 211, 102, 0.4);
}

/* Intermediário — dourado (texto em tom escuro para manter contraste sobre o fundo claro do site) */
.badge-nivel--intermediario {
    background-color: rgba(193, 162, 25, 0.18);
    color: #6b5500;
    border: 1px solid rgba(193, 162, 25, 0.4);
}

/* Avançado — azul (fundo sólido para manter o texto legível independente do fundo da página) */
.badge-nivel--avancado {
    background-color: var(--color-price-secondary);
    color: #5ab4e0;
    border: 1px solid rgba(90, 180, 224, 0.4);
}

/* -----------------------------------------------------------------------------
   16. BADGES DE TIPO (template-parts/badge-tipo.php)
   ----------------------------------------------------------------------------- */

.badge-tipo {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: var(--weight-semibold);
    padding: 3px var(--space-2);
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Aula de Música (texto em tom escuro para manter contraste sobre o fundo claro do site) */
.badge-tipo--aula-de-musica {
    background-color: rgba(37, 211, 102, 0.18);
    color: #146c38;
    border: 1px solid rgba(37, 211, 102, 0.35);
}

/* Aula Técnica (texto em tom escuro para manter contraste sobre o fundo claro do site) */
.badge-tipo--aula-tecnica {
    background-color: rgba(193, 162, 25, 0.18);
    color: #6b5500;
    border: 1px solid rgba(193, 162, 25, 0.35);
}

/* Dica */
.badge-tipo--dica {
    background-color: rgba(136, 136, 136, 0.12);
    color: var(--color-text-secondary);
    border: 1px solid rgba(136, 136, 136, 0.35);
}

/* Guia Completo (fundo sólido para manter o texto legível independente do fundo da página) */
.badge-tipo--guia-completo {
    background-color: var(--color-price-secondary);
    color: #5ab4e0;
    border: 1px solid rgba(90, 180, 224, 0.35);
}

/* Curiosidade (texto em tom escuro para manter contraste sobre o fundo claro do site) */
.badge-tipo--curiosidade {
    background-color: rgba(180, 90, 200, 0.18);
    color: #6b3f7a;
    border: 1px solid rgba(180, 90, 200, 0.35);
}

/* -----------------------------------------------------------------------------
   17. CTA DO POST (template-parts/cta-post.php)
   ----------------------------------------------------------------------------- */

.cta-post {
    background-color: var(--color-surface);
    border: 1px solid var(--color-primary);
    border-radius: 12px;
    padding: var(--space-7) var(--space-6);
    margin-top: var(--space-7);
    text-align: center;
}

.cta-post__subtitulo {
    color: var(--color-primary-text);
    font-size: var(--font-size-small);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-3);
}

.cta-post__titulo {
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: var(--weight-bold);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-4);
}

.cta-post__descricao {
    color: var(--color-text-secondary);
    font-size: var(--font-size-body);
    line-height: var(--line-height-normal);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-6);
}

.cta-post__botao {
    display: block;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-4);
}

.cta-post__garantia {
    color: var(--color-text-secondary);
    font-size: var(--font-size-small);
}

/* -----------------------------------------------------------------------------
   18. CAPTURA DE LEAD (template-parts/lead-capture.php)
   ----------------------------------------------------------------------------- */

.lead-capture {
    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-border-dark);
    border-radius: 12px;
    padding: var(--space-7) var(--space-6);
    margin-top: var(--space-7);
    text-align: center;
}

.lead-capture__rotulo {
    color: var(--color-primary);
    font-size: var(--font-size-small);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-3);
}

.lead-capture__titulo {
    color: var(--color-text-on-dark);
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: var(--weight-bold);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-4);
}

.lead-capture__descricao {
    color: var(--color-text-secondary-on-dark);
    font-size: var(--font-size-body);
    line-height: var(--line-height-normal);
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-6);
}

.lead-capture__form {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.lead-capture__label {
    display: block;
    color: var(--color-text-secondary-on-dark);
    font-size: var(--font-size-small);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-2);
    text-align: left;
}

.lead-capture__campo-grupo {
    display: flex;
    flex-direction: column;
}

.lead-capture__input {
    width: 100%;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    padding: var(--space-3) var(--space-4);
    outline: none;
    transition: border-color 0.2s ease;
}

.lead-capture__input::placeholder {
    color: var(--color-text-secondary);
}

.lead-capture__input:focus {
    border-color: var(--color-primary);
}

.lead-capture__botao {
    width: 100%;
    cursor: pointer;
}

.lead-capture__botao:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.lead-capture__mensagem {
    color: var(--color-primary);
    font-size: var(--font-size-small);
    font-weight: var(--weight-semibold);
    min-height: 1.2em;
}

.lead-capture__privacidade {
    color: var(--color-text-secondary-on-dark);
    font-size: var(--font-size-small);
    margin-top: var(--space-1);
}

/* -----------------------------------------------------------------------------
   19. UTILITÁRIOS
   ----------------------------------------------------------------------------- */

.sem-resultados {
    color: var(--color-text-secondary);
    font-size: var(--font-size-body);
    text-align: center;
    padding: var(--space-8) 0;
}

/* -----------------------------------------------------------------------------
   20. ACESSIBILIDADE — SKIP LINK
   ----------------------------------------------------------------------------- */

.skip-link {
    position: absolute;
    top: -100px;
    left: var(--space-4);
    z-index: 200;
    background-color: var(--color-primary);
    color: var(--color-bg-alt);
    font-family: var(--font-body);
    font-size: var(--font-size-small);
    font-weight: var(--weight-bold);
    padding: var(--space-3) var(--space-4);
    border-radius: 6px;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: var(--space-4);
}

/* -----------------------------------------------------------------------------
   21. CABEÇALHO STICKY + MENU MOBILE (header.php)
   ----------------------------------------------------------------------------- */

.cabecalho-site {
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Classe adicionada via JS quando a página rola (ver assets/js/main.js) */
.cabecalho-site--fixado {
    background-color: rgba(1, 1, 1, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.cabecalho-site__direita {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.cabecalho-site__busca {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    background-color: var(--color-surface-dark);
    border: 1px solid var(--color-border-dark);
    border-radius: 100px;
    padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
    transition: border-color 0.2s ease;
}

.cabecalho-site__busca:focus-within {
    border-color: var(--color-primary);
}

.cabecalho-site__busca-input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--color-text-on-dark);
    font-family: var(--font-body);
    font-size: var(--font-size-small);
    width: 130px;
}

.cabecalho-site__busca-input::placeholder {
    color: var(--color-text-secondary-on-dark);
}

.cabecalho-site__busca-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--color-text-secondary-on-dark);
    cursor: pointer;
    transition: color 0.2s ease;
}

.cabecalho-site__busca-botao:hover {
    color: var(--color-primary);
}

/* -----------------------------------------------------------------------------
   28. PÁGINA DE ERRO 404 (404.php)
   ----------------------------------------------------------------------------- */

.pagina-erro {
    max-width: 480px;
    margin: 0 auto;
    text-align: center;
    padding: var(--space-8) 0;
}

.pagina-erro__codigo {
    font-family: var(--font-display);
    font-size: 72px;
    font-weight: var(--weight-bold);
    color: var(--color-primary-text);
    line-height: 1;
    margin-bottom: var(--space-4);
}

.pagina-erro__titulo {
    font-family: var(--font-body);
    font-size: 28px;
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin-bottom: var(--space-4);
}

.pagina-erro__descricao {
    color: var(--color-text-secondary);
    font-size: var(--font-size-body);
    margin-bottom: var(--space-6);
}

.pagina-erro__busca {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.pagina-erro__busca .lead-capture__input {
    flex: 1;
}

.pagina-erro__busca .botao-primario {
    width: auto;
    padding-left: var(--space-5);
    padding-right: var(--space-5);
}

.cabecalho-site__menu-toggle {
    display: none;
}

.cabecalho-site__menu-label {
    display: none;
    width: 28px;
    height: 22px;
    position: relative;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-between;
}

.cabecalho-site__menu-label span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-text-on-dark);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.cabecalho-site__menu-toggle:checked ~ .cabecalho-site__menu-label span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}

.cabecalho-site__menu-toggle:checked ~ .cabecalho-site__menu-label span:nth-child(2) {
    opacity: 0;
}

.cabecalho-site__menu-toggle:checked ~ .cabecalho-site__menu-label span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}

/* -----------------------------------------------------------------------------
   21.5 TÍTULO SEO DA HOME (index.php)
   ----------------------------------------------------------------------------- */

.home-titulo-seo {
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    font-weight: var(--weight-regular);
    color: var(--color-primary-text);
    margin-bottom: var(--space-5);
}

/* -----------------------------------------------------------------------------
   22. HERO DE DESTAQUE (index.php)
   ----------------------------------------------------------------------------- */

.hero-destaque {
    margin-bottom: var(--space-8);
}

.hero-destaque__rotulo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-primary-text);
    font-size: var(--font-size-small);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-5);
}

.hero-destaque__rotulo::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-primary);
}

.hero-destaque__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
    align-items: stretch;
}

.hero-destaque__capa-link {
    display: block;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.hero-destaque__capa {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
}

.hero-destaque__corpo {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.hero-destaque__titulo {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-body);
    font-size: 39px;
    font-weight: var(--weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text);
    margin: var(--space-4) 0;
}

.hero-destaque__titulo a {
    color: var(--color-text);
}

.hero-destaque__titulo a:hover {
    color: var(--color-primary-text);
}

.hero-destaque__resumo {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text-secondary);
    font-size: var(--font-size-body);
    margin-bottom: var(--space-5);
}

.hero-destaque__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text-secondary);
    font-size: var(--font-size-small);
    margin-bottom: var(--space-6);
}

.hero-destaque__botao {
    display: inline-block;
    width: auto;
    margin-top: auto;
}

/* -----------------------------------------------------------------------------
   22.1 PILL DE CATEGORIA (index.php, archive.php, single.php)
   ----------------------------------------------------------------------------- */

.pill {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: var(--weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b5500;
    background-color: rgba(193, 162, 25, 0.18);
    border-radius: 100px;
    padding: var(--space-1) var(--space-3);
    margin-bottom: var(--space-3);
    transition: background-color 0.2s ease;
}

.pill:hover {
    background-color: rgba(193, 162, 25, 0.28);
    color: #6b5500;
}

.secao-titulo {
    font-family: var(--font-body);
    font-size: 26px;
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin-bottom: var(--space-5);
}

/* -----------------------------------------------------------------------------
   23. TABS DE FILTRO POR ASSUNTO (index.php, archive.php)
   ----------------------------------------------------------------------------- */

.tabs-filtro {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

.tabs-filtro__item {
    display: inline-flex;
    align-items: center;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-size: var(--font-size-small);
    font-weight: var(--weight-semibold);
    padding: var(--space-2) var(--space-4);
    border-radius: 100px;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.tabs-filtro__item:hover {
    color: var(--color-text);
    border-color: var(--color-primary);
}

.tabs-filtro__item.is-ativo {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-bg-alt);
}

/* -----------------------------------------------------------------------------
   24. CAPA FALLBACK (template-parts/capa-fallback.php)
   ----------------------------------------------------------------------------- */

.capa-fallback {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-surface-dark) 100%);
}

.hero-destaque .capa-fallback {
    height: 380px;
    border-radius: 16px;
}

.capa-fallback__icone {
    width: 64px;
    height: 64px;
    color: var(--color-primary);
    opacity: 0.5;
}

/* -----------------------------------------------------------------------------
   25. RODAPÉ EXPANDIDO (footer.php)
   ----------------------------------------------------------------------------- */

.rodape-site__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-7);
    padding-bottom: var(--space-6);
    margin-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border-dark);
}

.rodape-site__coluna-titulo {
    color: var(--color-text-on-dark);
    font-family: var(--font-body);
    font-size: var(--font-size-small);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-4);
}

.rodape-site__lista {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.rodape-site__lista a {
    color: var(--color-text-secondary-on-dark);
    font-size: var(--font-size-small);
}

.rodape-site__lista a:hover {
    color: var(--color-primary);
}

.rodape-site__redes {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.rodape-site__rede-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--color-border-dark);
    color: var(--color-text-secondary-on-dark);
    transition: border-color 0.2s ease, color 0.2s ease;
}

.rodape-site__rede-link:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.rodape-site__rede-link svg {
    width: 16px;
    height: 16px;
}

.rodape-site__container--copyright {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* -----------------------------------------------------------------------------
   26. CAPTURA DE LEAD — VARIANTE FAIXA CHEIA (index.php, entre grid e footer)
   ----------------------------------------------------------------------------- */

body.home .lead-capture {
    border: 1px solid var(--color-border-dark);
    border-radius: 12px;
    padding: var(--space-7) var(--space-6);
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

body.home .lead-capture::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -5%;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, var(--color-primary) 0%, transparent 70%);
    opacity: 0.08;
    pointer-events: none;
}

/* -----------------------------------------------------------------------------
   27. RESPONSIVIDADE
   ----------------------------------------------------------------------------- */

@media (max-width: 768px) {

    .cabecalho-site__nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--color-bg-alt);
        border-bottom: 1px solid var(--color-border-dark);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease;
    }

    .cabecalho-site__menu-toggle:checked ~ .cabecalho-site__nav {
        max-height: 400px;
    }

    .menu-principal__lista {
        flex-direction: column;
        gap: 0;
        padding: var(--space-4) var(--space-5);
    }

    .menu-principal__lista li {
        border-bottom: 1px solid var(--color-border-dark);
    }

    .menu-principal__lista li:last-child {
        border-bottom: none;
    }

    .menu-principal__lista a {
        display: block;
        padding: var(--space-3) 0;
    }

    .cabecalho-site__menu-label {
        display: flex;
    }

    .cabecalho-site__cta {
        display: none;
    }

    .cabecalho-site__busca-input {
        width: 90px;
    }

    .hero-destaque__grid {
        grid-template-columns: 1fr;
    }

    .hero-destaque__capa {
        height: 240px;
    }

    .hero-destaque .capa-fallback {
        height: 240px;
    }

    .hero-destaque__titulo {
        font-size: 27px;
    }

    .hero-destaque__corpo {
        height: auto;
    }

    .rodape-site__grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .rodape-site__container {
        flex-direction: column;
        align-items: flex-start;
    }
}