/*
Theme Name: Orca Blog
Theme URI: https://orcaapp.com.br/blog/
Author: Orca App
Author URI: https://orcaapp.com.br/
Description: Tema de blog para a Orca App. Reproduz o design do blog do site institucional: listagem com post em destaque, filtro por categoria, post com sumário, caixas de destaque e bloco de conversão. Sem barra lateral, sem construtor de página, sem dependência externa.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: orca-blog
Tags: blog, one-column, custom-logo, custom-menu, featured-images, translation-ready, threaded-comments
*/

/* =========================================================================
   1.  Tokens
   2.  Base
   3.  Acessibilidade
   4.  Cabeçalho
   5.  Blocos reaproveitáveis (trilha, chips, botões)
   6.  Listagem do blog
   7.  Post
   8.  Conteúdo do editor
   9.  Paginação, busca, comentários
   10. Rodapé
   11. Responsivo
   12. Impressão
   ========================================================================= */

/* --- 1. Tokens ------------------------------------------------------------ */
:root {
  --azul: #2E7CF6;
  --azul-escuro: #1B5FCC;
  --azul-claro: #EDF3FD;
  --verde: #4FC79A;
  --verde-escuro: #3FB489;
  --grafite: #1F2933;
  --texto: #4A5568;
  --texto-suave: #8A94A6;
  --borda: #E2E8F0;
  --fundo: #FFFFFF;
  --fundo-suave: #F7F9FC;
  --rodape-fundo: #3A3D42;
  --rodape-texto: #C9CED6;
  --rodape-link: #7EE0B8;
  --rodape-apagado: #8A94A6;

  --largura-post: 820px;
  --largura-texto: 880px;
  --largura-lista: 1140px;

  --fonte: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --raio: 12px;
  --transicao: .2s cubic-bezier(.16, 1, .3, 1);
}

/* --- 2. Base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--azul); text-decoration: none; }
a:hover, a:focus { color: var(--azul-escuro); text-decoration: underline; }

img, video, iframe, embed, object { max-width: 100%; }
img { height: auto; }

input, textarea, select, button { font-family: inherit; font-size: 16px; }
input, textarea, select { max-width: 100%; min-width: 0; }

h1, h2, h3, h4 { color: var(--grafite); letter-spacing: -0.02em; text-wrap: pretty; }

figure { margin: 0; }
table { border-collapse: collapse; }

.container { max-width: var(--largura-lista); margin: 0 auto; }
.container--texto { max-width: var(--largura-texto); margin: 0 auto; }
.container--post { max-width: var(--largura-post); margin: 0 auto; }

/* --- 3. Acessibilidade ---------------------------------------------------- */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 124, 246, .4);
  border-radius: 8px;
}

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: #FFFFFF;
  color: var(--grafite);
  font-weight: 600;
  padding: 12px 20px;
  border: 1px solid var(--borda);
  border-radius: 0 0 8px 0;
}
.pular-para-conteudo:focus { left: 0; text-decoration: none; }

.so-leitor-de-tela {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- 4. Cabeçalho --------------------------------------------------------- */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #FFFFFF;
  border-bottom: 1px solid var(--borda);
}

.cabecalho__interno {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.cabecalho__marca { display: flex; align-items: center; flex-shrink: 0; }
.cabecalho__marca img { display: block; height: 48px; width: auto; }
.cabecalho__marca-texto { font-size: 20px; font-weight: 800; color: var(--grafite); }
.cabecalho__marca:hover { text-decoration: none; }

.cabecalho__menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex: 1;
}

.menu-principal { font-size: 15px; min-width: 0; }
.menu-principal > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
.menu-principal li { position: relative; }
.menu-principal a {
  color: var(--texto);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
  text-decoration: none;
}
.menu-principal a:hover { color: var(--azul); text-decoration: none; }
.menu-principal .current-menu-item > a,
.menu-principal .current_page_item > a,
.menu-principal .current-menu-parent > a { color: var(--grafite); font-weight: 600; }

/* --- 4b. Submenu do menu principal ---------------------------------------- */
/* Mesmo comportamento do site institucional: no computador abre no hover e o
   botão atende teclado e toque; no celular vira sanfona dentro da gaveta. */
.tem-submenu { display: flex; align-items: center; gap: 2px; }

.submenu-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  min-height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--texto-suave);
  cursor: pointer;
  border-radius: 6px;
}
.submenu-botao svg { transition: transform var(--transicao); }
.tem-submenu:hover .submenu-botao,
.tem-submenu.aberto .submenu-botao { color: var(--azul); }
.tem-submenu:hover .submenu-botao svg,
.tem-submenu.aberto .submenu-botao svg { transform: rotate(180deg); }

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.submenu {
  background: #FFFFFF;
  border: 1px solid var(--borda);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(31, 41, 51, .12);
  padding: 8px;
}
.submenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.menu-principal .submenu a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  padding: 9px 12px;
  border-radius: 8px;
  white-space: normal;
}
.menu-principal .submenu a:hover,
.menu-principal .submenu a:focus-visible { background: var(--azul-claro); text-decoration: none; }
/* line-height normal: o corpo do blog usa 1.7, que deixaria o item alto demais */
.submenu__nome { font-size: 15px; font-weight: 600; color: var(--grafite); line-height: normal; }
.submenu a:hover .submenu__nome { color: var(--azul); }
.submenu__nota { font-size: 13px; color: var(--texto-suave); line-height: normal; }
.submenu li:first-child a {
  border-bottom: 1px solid var(--borda);
  border-radius: 8px 8px 0 0;
  margin-bottom: 4px;
}

@media (min-width: 960px) {
  .submenu {
    position: absolute;
    top: calc(100% + 6px);
    left: -8px;
    z-index: 70;
    width: 460px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s cubic-bezier(.16, 1, .3, 1),
                transform .18s cubic-bezier(.16, 1, .3, 1),
                visibility .18s;
  }
  .submenu ul { grid-template-columns: 1fr 1fr; }
  .submenu li:first-child { grid-column: 1 / -1; }

  .tem-submenu:hover .submenu,
  .tem-submenu:focus-within .submenu,
  .tem-submenu.aberto .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* faixa invisível que evita o menu fechar ao levar o mouse até ele */
  .tem-submenu::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px;
  }
}

.cabecalho__acoes { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.cabecalho__login {
  color: var(--texto);
  font-size: 15px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  white-space: nowrap;
}
.cabecalho__login:hover { color: var(--azul); text-decoration: none; }

.cabecalho__sanduiche {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 11px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}
.cabecalho__sanduiche span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--grafite);
  transition: transform var(--transicao), opacity .2s;
}
.cabecalho__sanduiche[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cabecalho__sanduiche[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cabecalho__sanduiche[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- 5. Blocos reaproveitáveis -------------------------------------------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 26px;
  border-radius: 8px;
  border: none;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}
.botao--verde { background: var(--verde); color: #FFFFFF; }
.botao--verde:hover, .botao--verde:focus { background: var(--verde-escuro); color: #FFFFFF; text-decoration: none; }
.botao--contorno {
  border: 1.5px solid var(--azul);
  color: var(--azul);
  background: transparent;
}
.botao--contorno:hover, .botao--contorno:focus { background: var(--azul-claro); text-decoration: none; }
.botao--pequeno { height: 38px; padding: 0 18px; font-size: 14px; }

.trilha {
  max-width: var(--largura-lista);
  margin: 0 auto;
  padding: 16px 24px 0;
  font-size: 14px;
  color: var(--texto-suave);
}
.trilha--post { max-width: var(--largura-post); }
.trilha a { color: var(--azul); }

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.chip {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--borda);
  background: transparent;
  color: var(--texto);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: all var(--transicao);
}
.chip:hover, .chip:focus { border-color: var(--azul); color: var(--azul); text-decoration: none; }
.chip--ativo { border-color: var(--azul); background: var(--azul-claro); color: var(--azul); }

.etiqueta {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--azul);
  font-weight: 700;
}
.etiqueta--pequena { font-size: 11px; }
a.etiqueta:hover { color: var(--azul-escuro); text-decoration: none; }

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
  color: var(--texto-suave);
  align-items: center;
}
.meta--compacta { gap: 10px; font-size: 13px; }

/* espaço reservado para quando o post não tem imagem destacada */
.sem-imagem {
  width: 100%;
  height: 100%;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  background: var(--azul-claro);
  border: 1px dashed #C3D6F5;
  color: #6B7A99;
  font-size: 14px;
  line-height: 1.5;
}
.sem-imagem span { max-width: 34ch; }

.midia { width: 100%; overflow: hidden; }
.midia img { display: block; width: 100%; height: 100%; object-fit: cover; }
.midia--16-10 { aspect-ratio: 16 / 10; }
.midia--16-9 { aspect-ratio: 16 / 9; }

/* --- 6. Listagem do blog -------------------------------------------------- */
.blog-topo { background: var(--fundo); padding: 48px 24px 32px; }
.blog-topo__interno { display: flex; flex-direction: column; gap: 16px; }
.blog-topo h1 { margin: 0; font-size: 42px; line-height: 1.18; font-weight: 700; }
.blog-topo h1 strong { color: var(--azul); font-weight: 700; }
.blog-topo__descricao { margin: 0; font-size: 18px; line-height: 1.6; color: var(--texto); }

.faixa-destaque { background: var(--fundo); padding: 0 24px 32px; }

.destaque {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 22px;
  align-items: stretch;
}
.destaque__midia { min-width: 0; }
.destaque__midia .midia,
.destaque__midia .sem-imagem { border-radius: var(--raio); }
.destaque__corpo {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}
.destaque__titulo { margin: 0; font-size: 28px; line-height: 1.25; font-weight: 700; }
.destaque__titulo a { color: var(--grafite); }
.destaque__titulo a:hover { color: var(--azul); text-decoration: none; }
.destaque__resumo { margin: 0; font-size: 16px; line-height: 1.65; color: var(--texto); }
.destaque__link { font-size: 15px; font-weight: 600; }

.faixa-lista { background: var(--fundo); padding: 24px 24px 72px; }
.faixa-lista__titulo { margin: 0 0 24px; font-size: 22px; font-weight: 700; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.card:hover { border-color: #C3D6F5; box-shadow: 0 6px 20px rgba(31, 41, 51, .06); }
.card__corpo {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.card__titulo { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.4; }
.card__titulo a { color: var(--grafite); }
.card__titulo a:hover { color: var(--azul); text-decoration: none; }
.card__resumo { margin: 0; font-size: 14px; line-height: 1.6; color: var(--texto); }
.card__meta { margin-top: auto; }

.aviso-vazio { margin: 24px 0 0; font-size: 16px; color: var(--texto-suave); }

/* --- 7. Post -------------------------------------------------------------- */
.post { background: var(--fundo); padding: 32px 24px 0; }
.post__cabecalho { display: flex; flex-direction: column; gap: 16px; }
.post__titulo { margin: 0; font-size: 40px; line-height: 1.2; font-weight: 700; }
.post__titulo strong { color: var(--azul); font-weight: 700; }
.post__capa { width: 100%; margin-top: 8px; }
.post__capa .midia, .post__capa .sem-imagem { border-radius: var(--raio); }

.sumario {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 20px 24px;
}
.sumario__titulo,
.conteudo .sumario__titulo {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.sumario ul,
.conteudo .sumario ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sumario a, .conteudo .sumario a { font-size: 16px; }
.conteudo .sumario li { font-size: 16px; }

.post__rodape {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding-top: 8px;
  font-size: 14px;
  color: var(--texto-suave);
}
.post__revisao { margin: 16px 0 0; font-size: 14px; color: var(--texto-suave); }

.cta-caixa {
  border: 2px solid var(--azul);
  border-radius: var(--raio);
  padding: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}
.cta-caixa__texto { max-width: 52ch; display: flex; flex-direction: column; gap: 8px; }
.cta-caixa__texto h2 { margin: 0; font-size: 22px; font-weight: 700; }
.cta-caixa__texto p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--texto); }

.cta-secao { background: var(--azul-claro); padding: 72px 24px; }
.cta-secao__interno {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.cta-secao h2 { margin: 0; font-size: 28px; line-height: 1.25; font-weight: 700; }
.cta-secao p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--texto); max-width: 60ch; }
.cta-secao__nota { margin: 12px 0 0 !important; font-size: 14px !important; color: var(--texto-suave); }

.relacionados { background: var(--azul-claro); padding: 72px 24px; margin-top: 64px; }
.relacionados__titulo {
  margin: 0 0 28px;
  font-size: 26px;
  line-height: 1.25;
  font-weight: 700;
  text-align: center;
}
.relacionados__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.relacionados__item {
  background: #FFFFFF;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  transition: border-color var(--transicao);
}
.relacionados__item:hover { border-color: var(--azul); text-decoration: none; }
.relacionados__nome { font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--grafite); }
.relacionados__leitura { font-size: 14px; color: var(--texto-suave); }

/* --- 8. Conteúdo vindo do editor ------------------------------------------ */
.conteudo {
  padding: 32px 0 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.conteudo > * { margin: 0; }

.conteudo p { font-size: 17px; line-height: 1.75; color: var(--texto); }
.conteudo > p:first-of-type { font-size: 19px; line-height: 1.7; color: var(--grafite); font-weight: 500; }

.conteudo h2 { margin: 16px 0 0; font-size: 28px; line-height: 1.25; font-weight: 700; }
.conteudo h3 { margin: 8px 0 0; font-size: 21px; line-height: 1.3; font-weight: 700; }
.conteudo h4 { margin: 4px 0 0; font-size: 18px; font-weight: 700; }

.conteudo ul, .conteudo ol {
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.conteudo ol { gap: 12px; }
.conteudo li { font-size: 17px; line-height: 1.7; color: var(--texto); }
.conteudo li > strong:first-child { color: var(--grafite); font-weight: 600; }

/* citação = caixa de destaque azul do design */
.conteudo blockquote {
  border-left: 4px solid var(--azul);
  background: var(--azul-claro);
  border-radius: 0 var(--raio) var(--raio) 0;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.conteudo blockquote p { font-size: 17px; line-height: 1.7; color: var(--grafite); }
.conteudo blockquote cite {
  font-size: 14px;
  color: var(--texto-suave);
  font-style: normal;
}

.conteudo figure img, .conteudo > img { border-radius: var(--raio); display: block; }
.conteudo figcaption {
  margin-top: 8px;
  font-size: 14px;
  color: var(--texto-suave);
  text-align: center;
}

.conteudo hr { border: none; border-top: 1px solid var(--borda); margin: 10px 0; }

.conteudo table { width: 100%; font-size: 16px; }
.conteudo th, .conteudo td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--borda);
  text-align: left;
}
.conteudo th { color: var(--grafite); font-weight: 600; }
.conteudo .tabela-rolavel { overflow-x: auto; max-width: 100%; }
.conteudo .tabela-rolavel > table { min-width: 560px; }

.conteudo code {
  background: var(--fundo-suave);
  border: 1px solid var(--borda);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: .92em;
}
.conteudo pre {
  background: var(--grafite);
  color: #E2E8F0;
  border-radius: var(--raio);
  padding: 20px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.6;
}
.conteudo pre code { background: none; border: none; padding: 0; color: inherit; }

/* larguras do editor de blocos */
.conteudo .alignwide { width: 100%; max-width: var(--largura-lista); margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; }
.conteudo .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; }
.conteudo .alignleft { float: left; margin: 0 24px 16px 0; }
.conteudo .alignright { float: right; margin: 0 0 16px 24px; }
.conteudo .aligncenter { margin-left: auto; margin-right: auto; }

/* --- 9. Paginação, busca, comentários ------------------------------------- */
.paginacao { margin-top: 48px; }
.paginacao .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
}
.paginacao .page-numbers {
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--texto);
  font-weight: 600;
  text-decoration: none;
}
.paginacao .page-numbers:hover { border-color: var(--azul); color: var(--azul); text-decoration: none; }
.paginacao .page-numbers.current { background: var(--azul-claro); border-color: var(--azul); color: var(--azul); }
.paginacao .dots { border: none; }

.busca { display: flex; gap: 8px; flex-wrap: wrap; }
.busca__campo {
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  color: var(--grafite);
  flex: 1;
  min-width: 200px;
}
.busca__campo:focus { border-color: var(--azul); }

.comentarios {
  max-width: var(--largura-post);
  margin: 56px auto 0;
  padding: 0 24px 8px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.comentarios__titulo { margin: 0; font-size: 22px; font-weight: 700; }
.comentarios ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.comentarios ol ol { margin-top: 16px; padding-left: 24px; border-left: 2px solid var(--borda); }
.comentarios .comment-body {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 20px 22px;
}
.comentarios .comment-author { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--grafite); }
.comentarios .comment-author img { border-radius: 999px; }
.comentarios .comment-metadata { font-size: 14px; color: var(--texto-suave); margin: 4px 0 10px; }
.comentarios .comment-metadata a { color: var(--texto-suave); }
.comentarios .reply { margin-top: 10px; font-size: 14px; font-weight: 600; }

.comment-respond { display: flex; flex-direction: column; gap: 12px; }
.comment-respond .comment-reply-title { margin: 0; font-size: 20px; font-weight: 700; color: var(--grafite); }
.comment-respond label { display: block; font-size: 14px; font-weight: 600; color: var(--grafite); margin-bottom: 6px; }
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  color: var(--grafite);
}
.comment-respond textarea { min-height: 140px; line-height: 1.6; }
.comment-respond .form-submit input {
  background: var(--verde);
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  height: 44px;
  padding: 0 26px;
  font-weight: 600;
  cursor: pointer;
}
.comment-respond .form-submit input:hover { background: var(--verde-escuro); }

/* --- 10. Rodapé ----------------------------------------------------------- */
.rodape {
  background: var(--rodape-fundo);
  color: var(--rodape-texto);
  padding: 56px 24px 28px;
  margin-top: 0;
}
.rodape__grade {
  max-width: var(--largura-lista);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 40px;
}
.rodape__coluna { display: flex; flex-direction: column; gap: 10px; }
.rodape__titulo {
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.rodape a { color: var(--rodape-texto); font-size: 14px; text-decoration: none; }
.rodape a:hover { color: #FFFFFF; text-decoration: underline; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.rodape__marca { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.rodape__marca img {
  display: block;
  height: 45px;
  width: auto;
  background: #FFFFFF;
  border-radius: 6px;
  padding: 5px 8px;
}
.rodape__redes { display: flex; gap: 12px; flex-wrap: wrap; }
.rodape__redes a { color: var(--rodape-link); }
.rodape__endereco {
  font-style: normal;
  font-size: 14px;
  line-height: 1.7;
  color: var(--rodape-texto);
}
.rodape__endereco a { color: var(--rodape-link); }

.rodape__base {
  max-width: var(--largura-lista);
  margin: 36px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 14px;
  color: var(--rodape-apagado);
}

.botao-whatsapp {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 70;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #25D366;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(31, 41, 51, .24);
  text-decoration: none;
}
.botao-whatsapp:hover { background: #1EBE5A; color: #FFFFFF; text-decoration: none; }

/* widgets no rodapé */
.rodape .widget { display: flex; flex-direction: column; gap: 10px; }
.rodape .widget-title {
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0;
}
.rodape .widget ul li { font-size: 14px; }

/* --- 11. Responsivo ------------------------------------------------------- */
@media (max-width: 959px) {
  .cabecalho__interno { flex-wrap: wrap; gap: 12px; }
  .cabecalho__sanduiche { display: flex; }
  .cabecalho__menu {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px 0 16px;
    border-top: 1px solid var(--borda);
    max-height: calc(100vh - 70px);
    overflow-y: auto;
  }
  .cabecalho__menu.aberto { display: flex; }
  .menu-principal, .menu-principal > ul { flex-direction: column; gap: 0; width: 100%; }
  .menu-principal a {
    min-height: 48px;
    font-size: 16px;
    border-bottom: 1px solid var(--borda);
    width: 100%;
  }

  /* submenu vira sanfona */
  .tem-submenu { flex-wrap: wrap; justify-content: space-between; border-bottom: 1px solid var(--borda); }
  .tem-submenu > a { border-bottom: none !important; flex: 1; width: auto; }
  .submenu-botao { width: 48px; min-height: 48px; }
  .submenu {
    display: none;
    flex-basis: 100%;
    box-shadow: none;
    border-radius: 8px;
    margin: 0 0 12px;
    padding: 6px;
    background: var(--fundo-suave);
  }
  .tem-submenu.aberto .submenu { display: block; }
  .menu-principal .submenu a { min-height: 44px; border-bottom: none; }
  .menu-principal .submenu li:first-child a { border-bottom: 1px solid var(--borda); }
  .cabecalho__acoes { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 14px; }
  .cabecalho__login { min-height: 48px; font-size: 16px; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .blog-topo h1 { font-size: 32px; }
  .post__titulo { font-size: 30px; }
  .conteudo h2, .destaque__titulo, .cta-secao h2 { font-size: 24px; }
  .conteudo > p:first-of-type { font-size: 18px; }
  .blog-topo, .faixa-destaque, .faixa-lista, .post, .cta-secao, .relacionados { padding-left: 18px; padding-right: 18px; }
  .trilha { padding-left: 18px; padding-right: 18px; }
  .destaque { padding: 16px; gap: 20px; }
  .cta-caixa { padding: 22px; }
  .relacionados { margin-top: 40px; padding-top: 48px; padding-bottom: 48px; }
  .cta-secao { padding-top: 48px; padding-bottom: 48px; }
  [class*="grade"], .cards, .destaque, .relacionados__grade { grid-template-columns: 1fr !important; }
}

/* --- 12. Impressão -------------------------------------------------------- */
@media print {
  .cabecalho, .rodape, .botao-whatsapp, .relacionados,
  .cta-caixa, .cta-secao, .paginacao, .comentarios, .pular-para-conteudo { display: none !important; }
  body { font-size: 12pt; }
  .post { padding: 0; }
  a { color: inherit; text-decoration: underline; }
}