/* =========================================================
   Identidade visual Moonflag
   Extraído de "BIZOPS - ID visual Moonflag.pdf"
   ========================================================= */

:root {
    /* Cores primárias */
    --cor-primaria: #6F33FF;       /* Roxo — cor de marca principal */
    --cor-primaria-hover: #9342CF; /* Roxo violeta — hover/estado ativo */
    --cor-acento: #FF51C4;         /* Rosa magenta — destaques pontuais */
    --cor-texto: #323036;          /* Cinza escuro — texto padrão */
    --cor-texto-escuro: #050012;   /* Preto profundo — títulos, fundos escuros */
    --cor-sucesso: #2BC857;        /* Verde — sucesso/confirmação */
    --cor-sucesso-claro: #5CEC9E;  /* Verde claro — apoio ao verde de sucesso */

    /* Cores secundárias (fundos e superfícies) */
    --cor-fundo-lilas: #F7F4FF;
    --cor-fundo-lilas-medio: #E9D9F5;
    --cor-fundo-cinza: #F8F8F8;
    --cor-branco: #FFFFFF;

    /* Tipografia */
    --fonte-titulo: "Montserrat", sans-serif;
    --fonte-corpo: "Roboto", sans-serif;

    /* Sombras (escala aproximada extraída do guia de marca) */
    --sombra-pequena: 0 2px 5px rgba(5, 0, 18, 0.06), 0 2px 8px rgba(5, 0, 18, 0.04);
    --sombra-padrao: 0 10px 15px -2px rgba(5, 0, 18, 0.08), 0 -2px 8px rgba(5, 0, 18, 0.04);
    --sombra-media: 0 20px 36px -7px rgba(5, 0, 18, 0.10), 0 -5px 15px -2px rgba(5, 0, 18, 0.05);
    --sombra-grande: 0 48px 60px -12px rgba(5, 0, 18, 0.14), 0 -18px 36px -7px rgba(5, 0, 18, 0.06);
}

/* =========================================================
   Reset simples e estilos globais do tema
   ========================================================= */

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

/* Padrão de acessibilidade do WordPress: existe no DOM (pra âncoras, leitores
   de tela) mas não ocupa espaço visual nenhum na página. */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

/* Rede de segurança: o PHP já remove parágrafos vazios do conteúdo (ver
   tema_secoes_remover_paragrafos_vazios em inc/setup.php) — isso aqui é
   só um reforço, caso algum bloco vazio de outro tipo escape daquele
   filtro e sobre um espaço em branco indesejado entre as seções. */
p:empty {
    display: none;
    margin: 0;
}

body {
    margin: 0;
    font-family: var(--fonte-corpo);
    color: var(--cor-texto);
    background: var(--cor-branco);
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    color: var(--cor-texto-escuro);
    margin-top: 0;
}

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

a {
    color: var(--cor-primaria);
}

a:hover {
    color: var(--cor-primaria-hover);
}

/* =========================================================
   Cabeçalho
   As cores vêm de Aparência → Personalizar → Cabeçalho e Rodapé,
   aplicadas como variáveis CSS (--header-cor-fundo etc.) no <head>.
   ========================================================= */

html {
    scroll-behavior: smooth;
}

.site-header {
    background: var(--header-cor-fundo, var(--cor-branco));
    color: var(--header-cor-texto, var(--cor-texto));
    box-shadow: var(--sombra-pequena);
    position: relative;
    z-index: 999;
}

.site-header--fixo {
    position: sticky;
    top: 0;
}

.site-header__topo {
    max-height: 80px;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.25s ease;
}

/* Some ao rolar a página (classe adicionada via assets/js/header-scroll.js). */
.site-header--rolado .site-header__topo {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

.site-header__topo-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.6rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    /* A linha só vai até onde o conteúdo vai (não a largura toda da tela).
       Cor vem do Personalizar → Cabeçalho: Cores → "Cor da linha separadora". */
    border-bottom: 1px solid var(--header-cor-linha, rgba(128, 128, 128, 0.3));
    transition: border-color 0.3s ease;
}

.site-header--rolado .site-header__topo-container {
    border-color: transparent;
}

.site-header__contato {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    font-family: var(--header-fonte-info, inherit);
    font-size: var(--header-tamanho-info, 0.85rem);
    font-weight: var(--header-espessura-info, 400);
}

.site-header__contato a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: inherit;
    text-decoration: none;
    opacity: 0.85;
}

.site-header__contato a:hover {
    opacity: 1;
}

.site-header__contato a:hover .site-header__icone {
    color: var(--header-cor-icone-hover, currentColor);
}

/* Ícones inline (e-mail, telefone, WhatsApp, área do cliente) — a cor vem
   do Personalizar (Aparência → Personalizar → Cabeçalho → Cor dos ícones). */
.site-header__icone {
    display: inline-flex;
    color: var(--header-cor-icone, currentColor);
}

.site-header__icone svg {
    display: block;
    width: 15px;
    height: 15px;
    fill: currentColor;
}

/* Caso o ícone enviado pelo Personalizar seja PNG/JPG em vez de SVG —
   não dá pra controlar a cor de uma imagem comum, só o tamanho. */
.site-header__icone img.tema-secoes-icone-img {
    display: block;
    width: 15px;
    height: 15px;
    object-fit: contain;
}

.site-header__principal {
    max-width: 1200px;
    margin: 0 auto;
}

.site-header__container {
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.site-header__logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    /* Nunca encolhe, nem some — o logo sempre mantém o tamanho normal. */
    flex-shrink: 0;
}

/* Tamanho do logo (largura por breakpoint, altura ajusta sozinha) fica
   em inc/customizer.php → tema_secoes_customizer_css(), gerado a partir
   de Aparência → Personalizar → Logo. Aqui só o display básico. */
.site-header__logo img {
    display: block;
}

.site-header__logo-img--icone {
    display: none;
}

@media (max-width: 480px) {
    .site-header__logo-img--completo {
        display: none;
    }

    .site-header__logo-img--icone {
        display: block;
    }
}

.site-header__menu {
    /* Ocupa o espaço do meio (entre logo e botão). Precisa ficar com
       overflow visível (não rolar) pra dar espaço aos submenus, que são
       posicionados de forma absoluta e vazam pra fora da caixa do menu —
       abaixo de 1024px o menu normal já vira hambúrguer de qualquer jeito,
       então não sobra tantos itens aqui pra precisar rolar. */
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
}

.site-header__menu ul {
    list-style: none;
    display: flex;
    justify-content: flex-end;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.site-header__menu li {
    position: relative;
}

.site-header__menu a {
    text-decoration: none;
    color: inherit;
    font-family: var(--header-fonte-menu, inherit);
    font-size: var(--header-tamanho-menu, 1rem);
    font-weight: var(--header-espessura-menu, 500);
}

.site-header__menu a:hover {
    color: var(--header-cor-menu-hover, currentColor);
}

/* Setinha indicando que o item tem submenu */
.site-header__menu .menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 6px;
    margin-bottom: 2px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    vertical-align: middle;
    opacity: 0.7;
}

/* Submenu — mesmo fundo do cabeçalho, só com uma sombra pra diferenciar
   do conteúdo por baixo. Fica escondido até passar o mouse (ou focar
   com o teclado) no item pai. */
.site-header__menu .sub-menu {
    display: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    margin: 0.5rem 0 0;
    padding: 0.5rem 0;
    background: var(--header-cor-fundo, #fff);
    box-shadow: var(--sombra-media);
    border-radius: 10px;
    z-index: 50;
    white-space: nowrap;
}

/* Ponte invisível cobrindo o espaço entre o item do menu e o submenu
   (o "margin-top" acima). Sem isso, ao mover o mouse na diagonal pra
   baixo o cursor passa por uma área que não é nem o item nem o submenu,
   o hover se perde no meio do caminho e o submenu fecha antes de dar
   tempo de clicar num item dele. */
.site-header__menu .sub-menu::before {
    content: '';
    position: absolute;
    top: -0.5rem;
    left: 0;
    width: 100%;
    height: 0.5rem;
}

.site-header__menu li:hover > .sub-menu,
.site-header__menu li:focus-within > .sub-menu {
    display: flex;
}

.site-header__menu .sub-menu a {
    display: block;
    padding: 0.65rem 1.25rem;
}

.site-header__menu .sub-menu a:hover {
    background: rgba(128, 128, 128, 0.1);
}

.site-header__menu .sub-menu .menu-item-has-children > a::after {
    /* Dentro do submenu, aponta pra direita (indica outro nível), não pra baixo. */
    transform: rotate(-45deg);
    margin-bottom: 0;
}

/* =========================================================
   Menu mobile (hambúrguer + gaveta)
   Acima de 1024px: some o hambúrguer/gaveta, mostra o menu normal.
   Até 1024px: some o menu/botão normais, mostra o hambúrguer.
   ========================================================= */

.site-header__hamburguer {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

.site-header__hamburguer span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--header-cor-texto, #323036);
}

body.site-menu-mobile-aberto {
    overflow: hidden;
}

.site-menu-mobile {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    background: var(--header-cor-fundo, #fff);
    color: var(--header-cor-texto, #323036);
    overflow-y: auto;
}

.site-menu-mobile[hidden] {
    display: none;
}

.site-menu-mobile__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

.site-menu-mobile__logo img {
    /* Largura vem de Aparência → Personalizar → Logo → "Cabeçalho"
       (mesmo tamanho do logo normal, ver inc/customizer.php). */
    display: block;
}

.site-menu-mobile__fechar {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 1.1rem;
    cursor: pointer;
    border-radius: 50%;
}

.site-menu-mobile__fechar:hover {
    background: rgba(128, 128, 128, 0.15);
}

.site-menu-mobile__nav ul {
    list-style: none;
    margin: 0;
    padding: 1.5rem 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.site-menu-mobile__nav a {
    display: block;
    padding: 0.85rem 1.25rem;
    text-decoration: none;
    color: inherit;
    font-family: var(--header-fonte-menu, inherit);
    font-size: var(--header-tamanho-menu, 1rem);
    font-weight: var(--header-espessura-menu, 500);
    text-align: center;
    background: transparent;
}

.site-menu-mobile__nav a:hover,
.site-menu-mobile__nav .current-menu-item > a {
    color: var(--header-cor-menu-hover, currentColor);
}

/* Submenu na gaveta mobile: começa fechado — um botãozinho de seta ao
   lado do item pai (inserido via assets/js/menu-mobile.js) abre e fecha,
   sem atrapalhar o clique no link do item pai em si.
   A referência de posicionamento da seta é a ".item-linha" (só o link),
   não o <li> inteiro — senão, quando o submenu abre e o <li> cresce, a
   seta "pula" pro meio do bloco todo em vez de ficar ao lado do link. */
.site-menu-mobile__item-linha {
    position: relative;
}

.site-menu-mobile__sub-toggle {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.site-menu-mobile__sub-toggle::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.site-menu-mobile__item--aberto > .site-menu-mobile__sub-toggle::after {
    transform: rotate(-135deg);
}

.site-menu-mobile__nav .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    flex-direction: column;
    gap: 0.25rem;
}

.site-menu-mobile__item--aberto > .sub-menu {
    display: flex;
}

.site-menu-mobile__nav .sub-menu a {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    font-size: 0.85em;
    opacity: 0.75;
}

.site-menu-mobile__nav .sub-menu a:hover {
    opacity: 1;
}

.site-menu-mobile__extra {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.5rem 1.5rem 0;
    padding: 0.85rem 1.25rem 0;
    border-top: 1px solid rgba(128, 128, 128, 0.15);
    text-decoration: none;
    color: inherit;
    font-family: var(--header-fonte-info, inherit);
    font-size: var(--header-tamanho-info, 1rem);
    font-weight: var(--header-espessura-info, 500);
    opacity: 0.85;
}

.site-menu-mobile__extra:hover {
    opacity: 1;
    color: var(--header-cor-menu-hover, currentColor);
}

.site-menu-mobile__botao {
    display: block;
    margin: 1.5rem;
    padding: 0.9rem 1.5rem;
    border-radius: 999px;
    background: var(--header-cor-botao, var(--cor-primaria));
    color: #fff;
    font-family: var(--header-fonte-botao, var(--fonte-titulo));
    font-size: var(--header-tamanho-botao, 1rem);
    font-weight: var(--header-espessura-botao, 600);
    text-align: center;
    text-decoration: none;
}

.site-menu-mobile__botao:hover {
    background: var(--header-cor-botao-hover, var(--cor-primaria-hover));
    color: #fff;
}

.site-header__botao {
    display: inline-block;
    padding: 0.65rem 1.5rem;
    background: var(--header-cor-botao, var(--cor-primaria));
    color: #fff;
    border-radius: 999px;
    font-family: var(--header-fonte-botao, var(--fonte-titulo));
    font-weight: var(--header-espessura-botao, 600);
    font-size: var(--header-tamanho-botao, 0.9rem);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease;
    /* Nunca encolhe — isso é o que fazia o botão sumir/espremer quando
       o menu ganhava mais itens e não sobrava espaço suficiente. */
    flex-shrink: 0;
}

.site-header__botao:hover {
    background: var(--header-cor-botao-hover, var(--cor-primaria-hover));
    color: #fff;
}

/* Este bloco precisa vir DEPOIS das regras base de .site-header__menu /
   .site-header__botao / .site-header__hamburguer acima — CSS resolve empate
   de especificidade pela ordem no arquivo, então se ficasse antes, a regra
   base (display normal) venceria e o botão continuaria aparecendo no tablet. */
@media (max-width: 1024px) {
    /* Barra de contato/redes sociais some no tablet e celular (não só no scroll). */
    .site-header__topo {
        display: none;
    }

    /* Botão "Solicite uma proposta" grande some daqui — continua disponível
       dentro da gaveta do menu mobile (.site-menu-mobile__botao). */
    .site-header__menu,
    .site-header__botao {
        display: none;
    }

    .site-header__hamburguer {
        display: flex;
    }

    /* Só sobram logo e hambúrguer nessa largura: logo na ponta esquerda,
       hambúrguer na ponta direita. */
    .site-header__container {
        justify-content: space-between;
    }
}

/* Redes sociais — reaproveitado no header e no footer. A cor vem do
   Personalizar; qual variável usar depende de onde aparecem (ver as
   regras ".site-header .site-redes-sociais" / ".site-footer .site-redes-sociais"). */
.site-redes-sociais {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.site-header .site-redes-sociais {
    color: var(--header-cor-icone, currentColor);
}

.site-header .site-redes-sociais__item:hover {
    color: var(--header-cor-icone-hover, currentColor);
}

.site-footer .site-redes-sociais__item:hover {
    color: var(--footer-cor-icone-hover, currentColor);
}

.site-redes-sociais__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    text-decoration: none;
    color: inherit;
    opacity: 0.85;
    transition: color 0.2s ease;
}

.site-redes-sociais__item:hover {
    opacity: 1;
}

.site-redes-sociais__item svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.site-redes-sociais__item img.tema-secoes-icone-img {
    display: block;
    width: 18px;
    height: 18px;
    object-fit: contain;
}

/* =========================================================
   Rodapé
   ========================================================= */

.site-footer {
    background: var(--footer-cor-fundo, var(--cor-texto-escuro));
    color: var(--footer-cor-texto, var(--cor-branco));
    margin-top: 0;
    padding: 3rem 1.5rem 2rem;
}

.site-footer__container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding-bottom: 2rem;
}

.site-footer__logo img {
    /* Largura vem de Aparência → Personalizar → Logo → "Rodapé". */
    display: block;
}

.site-footer__menu ul {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.site-footer a {
    color: inherit;
    opacity: 0.85;
    text-decoration: none;
}

.site-footer a:hover {
    opacity: 1;
}

/* O logo não deve ficar esmaecido nem "acender" no hover — só os links
   de texto (menu, voltar ao topo) devem ter esse efeito. */
.site-footer__logo,
.site-footer__logo:hover,
.site-header__logo,
.site-header__logo:hover,
.site-menu-mobile__logo,
.site-menu-mobile__logo:hover {
    opacity: 1;
}

.site-footer__menu a {
    font-family: var(--footer-fonte-menu, inherit);
    font-size: var(--footer-tamanho-menu, 1rem);
    font-weight: var(--footer-espessura-menu, 400);
}

.site-footer__menu a:hover {
    color: var(--footer-cor-menu-hover, currentColor);
}

.site-footer__voltar-topo {
    font-weight: 600;
    white-space: nowrap;
}

.site-footer__linha {
    max-width: 1200px;
    margin: 0 auto;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.site-footer .site-redes-sociais {
    justify-content: center;
    margin: 1.5rem auto 1rem;
    color: var(--footer-cor-icone, currentColor);
}

.site-footer__copyright {
    text-align: center;
    font-family: var(--footer-fonte-info, inherit);
    font-size: var(--footer-tamanho-info, 0.8rem);
    font-weight: var(--footer-espessura-info, 400);
    opacity: 0.7;
    margin: 0;
}

/* =========================================================
   Rodapé — modelo "Várias páginas" (colunas)
   Escolhido em Personalizar → Rodapé: Conteúdo → "Modelo do rodapé".
   ========================================================= */

.site-footer__grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: 2.5rem;
    padding-bottom: 2.5rem;
}

.site-footer__coluna {
    /* Sem isso, uma coluna com conteúdo mais "largo" (uma palavra comprida,
       por exemplo) pode crescer além da fração que o grid reservou pra ela
       e empurrar as colunas seguintes pra frente — quebrando o alinhamento. */
    min-width: 0;
}

.site-footer__coluna-titulo {
    font-family: var(--footer-fonte-titulo-coluna, var(--fonte-titulo));
    font-size: var(--footer-tamanho-titulo-coluna, 0.95rem);
    font-weight: var(--footer-espessura-titulo-coluna, 700);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--footer-cor-titulo-coluna, inherit);
    margin: 0 0 1.25rem;
}

.site-footer__coluna-linha {
    width: 48px;
    height: 3px;
    background: currentColor;
    opacity: 0.4;
    margin: 1rem 0;
    border-radius: 2px;
}

.site-footer__resumo {
    font-family: var(--footer-fonte-resumo, inherit);
    font-size: var(--footer-tamanho-resumo, 0.85rem);
    font-weight: var(--footer-espessura-resumo, 400);
    line-height: 1.6;
    opacity: 0.8;
    margin: 0;
}

.site-footer__coluna-menu ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

.site-footer__encontre-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
    font-family: var(--footer-fonte-info, inherit);
    font-size: var(--footer-tamanho-info, 0.85rem);
    font-weight: var(--footer-espessura-info, 400);
}

/* Hover só muda a cor do texto — o ícone mantém a cor definida em
   "Cor dos ícones" (Rodapé: Cores), sem herdar a cor de hover do texto. */
.site-footer__encontre-item:hover {
    color: var(--footer-cor-menu-hover, currentColor);
}

.site-footer__encontre-item:hover .site-footer__icone {
    color: var(--footer-cor-icone, currentColor);
}

.site-footer__icone {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--footer-cor-icone, currentColor);
}

.site-footer__icone svg {
    display: block;
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.site-footer--colunas .site-redes-sociais {
    justify-content: flex-start;
    margin: 0;
}

.site-footer__redes-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    border-radius: 999px;
    background: rgba(128, 128, 128, 0.18);
    margin-top: 0.75rem;
}

.site-footer__redes-label {
    font-family: var(--footer-fonte-info, inherit);
    font-size: var(--footer-tamanho-info, 0.85rem);
    font-weight: var(--footer-espessura-info, 600);
    white-space: nowrap;
    opacity: 0.9;
}

.site-footer__rodape-inferior {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.site-footer--colunas .site-footer__copyright {
    text-align: left;
    opacity: 0.7;
    margin: 0;
}

/* Rodapé no mobile: centralizado, logo em cima, menu empilhado na vertical. */
@media (max-width: 1024px) {
    .site-footer__container {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .site-footer__grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    /* O logo pode virar <a> (fallback) ou <div> (logo personalizado via
       Personalizar → Logo) — como <div> é bloco, "text-align: center" no
       container não centraliza sozinho. Flex + justify-content resolve
       nos dois casos. */
    .site-footer__logo {
        display: flex;
        justify-content: center;
    }

    .site-footer__coluna-linha {
        margin-left: auto;
        margin-right: auto;
    }

    .site-footer__coluna-menu ul {
        align-items: center;
    }

    .site-footer__encontre-item {
        justify-content: center;
    }

    .site-footer__redes-pill {
        margin-left: auto;
        margin-right: auto;
    }

    .site-footer--colunas .site-redes-sociais {
        justify-content: center;
    }

    .site-footer__rodape-inferior {
        flex-direction: column;
        text-align: center;
    }

    .site-footer--colunas .site-footer__copyright {
        text-align: center;
    }

    .site-footer__menu ul {
        flex-direction: column;
        align-items: center;
    }
}

/* =========================================================
   Utilitários usados pelas seções (blocos de código)
   ========================================================= */

.secao__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 1.5rem;
}

/* Zera qualquer margem padrão nos wrappers das seções, pra elas ficarem
   coladas uma na outra (sem espaço em branco) — o espaçamento interno
   de cada seção deve vir do próprio código colado. */
.secao-codigo {
    margin: 0;
}

main#main-content {
    display: block;
}

/* Botão padrão Moonflag — use essa classe no código colado nas seções */
.botao-primario {
    display: inline-block;
    padding: 0.75rem 1.75rem;
    background: var(--cor-primaria);
    color: var(--cor-branco);
    border-radius: 999px;
    font-family: var(--fonte-titulo);
    font-weight: 600;
    text-decoration: none;
    border: none;
    box-shadow: var(--sombra-padrao);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.botao-primario:hover {
    background: var(--cor-primaria-hover);
    color: var(--cor-branco);
}

.botao-secundario {
    display: inline-block;
    padding: 0.75rem 1.75rem;
    background: transparent;
    color: var(--cor-primaria);
    border: 2px solid var(--cor-primaria);
    border-radius: 999px;
    font-family: var(--fonte-titulo);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.botao-secundario:hover {
    background: var(--cor-primaria);
    color: var(--cor-branco);
}

/* =========================================================
   Seção "Blog" (posts recentes) — só aparece na página inicial.
   Bloco dinâmico (blocks/blog/render.php), busca os posts de verdade
   via WP_Query — as variáveis --blog-* vêm dos atributos configurados
   no painel lateral do bloco (Aparência > editor, não no Personalizar).
   ========================================================= */
.secao-blog-recentes {
    background: var(--blog-cor-fundo, #111111);
    padding: 100px 1.5rem;
}

.secao-blog-recentes__container {
    max-width: 1200px;
    margin: 0 auto;
}

.secao-blog-recentes__topo {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.secao-blog-recentes__titulo {
    margin: 0;
    max-width: 32em;
    font-family: var(--blog-titulo-fonte, var(--fonte-titulo, inherit));
    color: var(--blog-titulo-cor, #ffffff);
    font-size: var(--blog-titulo-tamanho, 2rem);
    font-weight: var(--blog-titulo-espessura, 400);
    line-height: 1.25;
}

/* Sem cor/fonte próprias definidas, o botão "Leia os artigos" cai pra
   cor/fonte do botão do cabeçalho — assim já sai parecido com ele sem
   precisar configurar nada, mas ainda dá pra sobrescrever só aqui se
   precisar (inclusive a cor do hover, separada da cor normal). */
.secao-blog-recentes__botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0.75rem 1.75rem;
    border-radius: 999px;
    background: var(--blog-botao-cor-fundo, var(--header-cor-botao, var(--cor-primaria)));
    color: var(--blog-botao-cor-texto, #ffffff);
    font-family: var(--blog-botao-fonte, var(--header-fonte-botao, var(--fonte-titulo)));
    font-weight: var(--header-espessura-botao, 600);
    font-size: var(--header-tamanho-botao, 0.95rem);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

.secao-blog-recentes__botao:hover {
    background: var(--blog-botao-cor-fundo-hover, var(--header-cor-botao-hover, var(--cor-primaria-hover)));
    color: var(--blog-botao-cor-texto-hover, var(--blog-botao-cor-texto, #ffffff));
}

.secao-blog-recentes__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.secao-blog-recentes__card {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden;
    background: var(--blog-card-cor-fundo, #3a3a3a);
}

.secao-blog-recentes__card-imagem-link {
    display: block;
}

.secao-blog-recentes__imagem {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
}

.secao-blog-recentes__imagem--vazia {
    background: rgba(128, 128, 128, 0.25);
}

.secao-blog-recentes__card-corpo {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem;
}

.secao-blog-recentes__card-titulo {
    margin: 0;
    font-family: var(--blog-card-titulo-fonte, var(--fonte-titulo, inherit));
    font-size: var(--blog-card-titulo-tamanho, 1.1rem);
    font-weight: var(--blog-card-titulo-espessura, 700);
    line-height: 1.35;
}

.secao-blog-recentes__card-titulo a {
    color: var(--blog-card-titulo-cor, #ffffff);
    text-decoration: none;
}

.secao-blog-recentes__card-titulo a:hover {
    opacity: 0.8;
}

.secao-blog-recentes__card-meta {
    margin: 0;
    font-family: var(--blog-card-meta-fonte, inherit);
    font-size: 0.85rem;
    color: var(--blog-card-meta-cor, #c9c9c9);
}

.secao-blog-recentes__card-cta {
    margin-top: 0.25rem;
    font-weight: 700;
    color: var(--blog-card-link-cor, #ffffff);
    text-decoration: none;
}

.secao-blog-recentes__card-cta:hover {
    opacity: 0.8;
}

/* Tablet/celular: mesmo breakpoint do cabeçalho/rodapé (1024px) — tudo
   centralizado (título, botão, e o conteúdo de dentro de cada card), e
   um respiro menor nas laterais. */
@media (max-width: 1024px) {
    .secao-blog-recentes {
        padding: 70px 10px;
    }

    .secao-blog-recentes__topo {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .secao-blog-recentes__titulo {
        max-width: none;
    }

    .secao-blog-recentes__grid {
        text-align: center;
    }

    .secao-blog-recentes__card-corpo {
        align-items: center;
    }
}

/* =========================================================
   Página "Blog" (page-blog.php) — listagem com busca, categorias
   e paginação. A cor principal (--blog-pagina-cor-principal) vem de
   Personalizar → Página Blog (inc/customizer.php), com fallback pra
   --cor-primaria do tema caso não tenha sido configurada. Independente
   dos atributos da seção "Blog" da home, que são outra coisa.
   ========================================================= */
.pagina-blog {
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 1.5rem;
}

.pagina-blog__resumo-filtro {
    margin: 0 0 2.5rem;
    color: var(--cor-texto);
    opacity: 0.75;
}

.pagina-blog__resumo-filtro a {
    color: var(--blog-pagina-cor-principal, var(--cor-primaria));
    font-weight: 600;
    text-decoration: none;
}

.pagina-blog__resumo-filtro a:hover {
    text-decoration: underline;
}

.pagina-blog__layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 3rem;
    align-items: start;
}

.pagina-blog__grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.75rem;
}

.pagina-blog__card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--cor-branco);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--sombra-padrao);
}

.pagina-blog__card-imagem-link {
    display: block;
}

.pagina-blog__imagem {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
}

.pagina-blog__imagem--vazia {
    background: var(--cor-fundo-cinza);
}

.pagina-blog__card-corpo {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem;
}

/* Fundo claro derivado automaticamente da "Cor principal" (Personalizar →
   Página Blog) via color-mix() — sem precisar de uma segunda cor separada
   pro tom clarinho. A declaração --cor-fundo-lilas logo acima serve de
   fallback pra navegadores muito antigos, que ainda não suportam
   color-mix() e simplesmente ignoram essa segunda linha. */
.pagina-blog__card-categoria {
    align-self: flex-start;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: var(--cor-fundo-lilas);
    background: color-mix(in srgb, var(--blog-pagina-cor-principal, var(--cor-primaria)) 12%, white);
    color: var(--blog-pagina-cor-principal, var(--cor-primaria));
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pagina-blog__card-titulo {
    margin: 0.25rem 0 0;
    font-family: var(--fonte-titulo);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
}

.pagina-blog__card-titulo a {
    color: var(--cor-texto-escuro);
    text-decoration: none;
}

.pagina-blog__card-titulo a:hover {
    opacity: 0.75;
}

.pagina-blog__card-meta {
    margin: 0;
    font-size: 0.8rem;
    color: var(--cor-texto);
    opacity: 0.65;
}

/* Sem hover de propósito — sempre a mesma cor, parado ou com o mouse em
   cima. */
.pagina-blog__card-cta {
    margin-top: 0.25rem;
    font-weight: 700;
    color: var(--blog-pagina-cor-principal, var(--cor-primaria));
    text-decoration: none;
}

.pagina-blog__vazio {
    padding: 3rem 1.5rem;
    text-align: center;
    background: var(--cor-fundo-cinza);
    border-radius: 12px;
    color: var(--cor-texto);
    opacity: 0.8;
}

/* Paginação — .page-numbers/.current/.dots são as classes que o próprio
   WordPress (paginate_links()) já gera, então só estilizamos em cima. */
.pagina-blog__paginacao {
    margin-top: 2.5rem;
}

.pagina-blog__paginacao ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagina-blog__paginacao .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border-radius: 8px;
    background: var(--cor-fundo-cinza);
    color: var(--cor-texto);
    font-weight: 600;
    text-decoration: none;
}

.pagina-blog__paginacao a.page-numbers:hover {
    background: var(--cor-fundo-lilas);
    background: color-mix(in srgb, var(--blog-pagina-cor-principal, var(--cor-primaria)) 12%, white);
    color: var(--blog-pagina-cor-principal, var(--cor-primaria));
}

.pagina-blog__paginacao .page-numbers.current {
    background: var(--blog-pagina-cor-principal, var(--cor-primaria));
    color: var(--cor-branco);
}

.pagina-blog__paginacao .page-numbers.dots {
    background: transparent;
}

/* Barra lateral */
.pagina-blog__lateral {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.pagina-blog__bloco-lateral {
    padding: 1.5rem;
    background: var(--cor-fundo-cinza);
    border-radius: 12px;
}

.pagina-blog__lateral-titulo {
    margin: 0 0 1rem;
    font-family: var(--fonte-titulo);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--cor-texto-escuro);
}

.pagina-blog__busca {
    display: flex;
    gap: 0.5rem;
}

.pagina-blog__busca-campo {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.65rem 0.9rem;
    border: 1px solid rgba(50, 48, 54, 0.15);
    border-radius: 8px;
    background: var(--cor-branco);
    color: var(--cor-texto);
    font-family: var(--fonte-corpo);
    font-size: 0.9rem;
}

.pagina-blog__busca-campo:focus {
    outline: 2px solid var(--blog-pagina-cor-principal, var(--cor-primaria));
    outline-offset: 1px;
}

.pagina-blog__busca-botao {
    flex-shrink: 0;
    width: 2.75rem;
    border: none;
    border-radius: 8px;
    background: var(--blog-pagina-cor-principal, var(--cor-primaria));
    color: var(--cor-branco);
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.pagina-blog__busca-botao:hover {
    background: color-mix(in srgb, var(--blog-pagina-cor-principal, var(--cor-primaria)) 45%, white);
}

.pagina-blog__lista-recentes {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagina-blog__lista-recentes-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.pagina-blog__lista-recentes-imagem-link {
    display: block;
    flex-shrink: 0;
}

.pagina-blog__lista-recentes-imagem {
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
}

.pagina-blog__lista-recentes-imagem--vazia {
    background: var(--cor-fundo-lilas);
}

.pagina-blog__lista-recentes-texto {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.pagina-blog__lista-recentes-titulo {
    color: var(--cor-texto-escuro);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}

.pagina-blog__lista-recentes-titulo:hover {
    color: var(--blog-pagina-cor-principal, var(--cor-primaria));
}

.pagina-blog__lista-recentes-data {
    font-size: 0.75rem;
    color: var(--cor-texto);
    opacity: 0.6;
}

.pagina-blog__lista-categorias {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagina-blog__categoria-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    color: var(--cor-texto);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
}

.pagina-blog__categoria-link:hover {
    background: var(--cor-fundo-lilas);
    background: color-mix(in srgb, var(--blog-pagina-cor-principal, var(--cor-primaria)) 12%, white);
    color: var(--blog-pagina-cor-principal, var(--cor-primaria));
}

.pagina-blog__categoria-link.is-ativa {
    background: var(--blog-pagina-cor-principal, var(--cor-primaria));
    color: var(--cor-branco);
    font-weight: 700;
}

.pagina-blog__categoria-contagem {
    font-size: 0.75rem;
    opacity: 0.7;
}

.pagina-blog__categoria-link.is-ativa .pagina-blog__categoria-contagem {
    opacity: 0.85;
}

/* Tablet/celular: mesmo breakpoint usado no resto do tema — sidebar
   empilha abaixo do conteúdo principal, título centralizado. */
@media (max-width: 1024px) {
    .pagina-blog {
        padding: 70px 10px;
    }

    .pagina-blog__layout {
        grid-template-columns: 1fr;
    }

    .pagina-blog__topo {
        text-align: center;
    }
}

/* =========================================================
   Post individual (single.php) — 3 colunas: card "sobre a empresa" à
   esquerda, o post no meio (largura limitada, se adapta em qualquer
   tela), "Posts recentes" à direita. Abaixo, a navegação entre posts.
   Usa a mesma "Cor principal" de Personalizar → Página Blog. No
   tablet/celular, empilha: conteúdo primeiro, cards depois (ver
   media query no fim).

   O respiro de baixo (100px) fica no <article> (.post-single), não no
   grid — a navegação entre posts vem DEPOIS do grid, fora dele; se o
   padding-bottom ficasse só no grid, a página perderia esse respiro
   sempre que a navegação aparecesse (ela ficaria "colada" no rodapé).
   Botão só existe onde tem post anterior/próximo — colocando o respiro
   no artigo inteiro, ele aparece igual em qualquer situação.
   ========================================================= */
.post-single {
    padding-bottom: 100px;
}

.post-single__grid {
    max-width: 1400px;
    margin: 0 auto;
    padding: 100px 1.5rem 0;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 260px;
    gap: 2.5rem;
    align-items: start;
}

.post-single__coluna-principal {
    min-width: 0;
}

.post-single__cabecalho {
    margin-bottom: 2rem;
}

.post-single__categoria {
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: var(--cor-fundo-lilas);
    background: color-mix(in srgb, var(--blog-pagina-cor-principal, var(--cor-primaria)) 12%, white);
    color: var(--blog-pagina-cor-principal, var(--cor-primaria));
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.post-single__titulo {
    margin: 0 0 0.75rem;
    font-family: var(--fonte-titulo);
    color: var(--cor-texto-escuro);
    line-height: 1.25;
}

.post-single__meta {
    margin: 0;
    color: var(--cor-texto);
    opacity: 0.65;
    font-size: 0.9rem;
}

.post-single__imagem-destaque {
    margin-bottom: 2rem;
}

.post-single__imagem {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
}

.post-single__conteudo {
    color: var(--cor-texto);
    font-family: var(--fonte-corpo);
    font-size: 1.05rem;
    line-height: 1.75;
}

.post-single__conteudo :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--fonte-titulo);
    color: var(--cor-texto-escuro);
    line-height: 1.3;
}

.post-single__conteudo a {
    color: var(--blog-pagina-cor-principal, var(--cor-primaria));
}

.post-single__conteudo img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Cards laterais — mesmo visual de fundo cinza claro já usado na barra
   lateral da página /blog (.pagina-blog__bloco-lateral), pra ficar
   consistente entre as duas páginas. */
.post-single__empresa,
.post-single__recentes {
    padding: 1.5rem;
    background: var(--cor-fundo-cinza);
    border-radius: 12px;
}

.post-single__extra-titulo {
    margin: 0 0 1rem;
    font-family: var(--fonte-titulo);
    font-size: 1rem;
    color: var(--cor-texto-escuro);
}

.post-single__empresa-resumo {
    margin: 0;
    color: var(--cor-texto);
    opacity: 0.8;
    font-size: 0.9rem;
    line-height: 1.6;
}

.post-single__navegacao {
    max-width: 900px;
    margin: 1rem auto 0;
    padding: 0 1.5rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.post-single__nav-item {
    flex: 1 1 0;
}

.post-single__nav-item--proximo {
    text-align: right;
}

.post-single__nav-item a {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    background: var(--blog-pagina-cor-principal, var(--cor-primaria));
    color: var(--cor-branco);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* No hover, o fundo clareia bastante — texto branco perderia contraste
   ali, então troca pra cor principal (mais escura que o fundo clarinho). */
.post-single__nav-item a:hover {
    background: color-mix(in srgb, var(--blog-pagina-cor-principal, var(--cor-primaria)) 45%, white);
    color: var(--blog-pagina-cor-principal, var(--cor-primaria));
}

/* Abaixo de 1024px, os cards saem de lado e vão pra baixo do conteúdo —
   a ordem visual muda pra "post primeiro" mesmo a empresa vindo antes
   no código (precisa pra ficar à esquerda no desktop). */
@media (max-width: 1024px) {
    .post-single {
        padding-bottom: 70px;
    }

    .post-single__grid {
        grid-template-columns: 1fr;
        padding: 70px 10px 0;
    }

    .post-single__coluna-principal {
        order: 1;
    }

    .post-single__lateral--empresa {
        order: 2;
    }

    .post-single__lateral--recentes {
        order: 3;
    }

    .post-single__navegacao {
        flex-direction: column;
        padding: 0 1.25rem;
    }

    .post-single__nav-item--proximo {
        text-align: left;
    }

    .post-single__nav-item a {
        width: 100%;
        justify-content: center;
    }
}