/*
  Folha do renderizador público. Nenhuma cor está escrita aqui: tudo sai das variáveis que o
  layout imprime a partir do tema do site, para o mesmo CSS servir todos os domínios.

  A escala e o ritmo seguem a referência pedida (páginas corporativas tipo SAP):

  · caixa central larga com respiro grande nas laterais (72px em tela de 1440);
  · hero de largura CHEIA — a imagem sangra até a borda da tela, não é um cartão flutuando;
  · título grande e apertado, parágrafo de abertura grande (não é o corpo de texto normal);
  · faixas alternando fundo claro e fundo levemente cinza, que é o que dá ritmo à página;
  · ação em azul com canto quase reto, e "saiba mais →" como link de texto.
*/

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

:root {
  --caixa: 1320px;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --raio: 4px;
  --raio-md: 8px;
  --secao: clamp(3.5rem, 7.5vw, 6.5rem);
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Helvetica, Arial,
           "Apple Color Emoji", sans-serif;
}

/*
  Cores DERIVADAS do par fundo/texto. Ficam aqui e não dentro do :root porque variável
  personalizada é resolvida onde é DECLARADA: se só o :root as declarasse, um bloco que troca
  --corpo-fundo (faixa escura numa página clara) continuaria com borda e superfície de cartão
  calculadas na paleta do site — cartão claro no meio da faixa escura. A mesma receita vale
  para a raiz e para o bloco que traz cor própria (a classe vem do despachante).
*/
:root,
.bloco-cores {
  --borda: color-mix(in srgb, var(--corpo-texto) 16%, transparent);
  --borda-fraca: color-mix(in srgb, var(--corpo-texto) 9%, transparent);
  /* Faixa cinza derivada do tema: o ritmo da página não pode depender de cor cadastrada. */
  --faixa: color-mix(in srgb, var(--corpo-texto) 5%, var(--corpo-fundo));
  /* Superfície de cartão: no tema claro fica um cinza levíssimo; no ESCURO fica mais clara
     que o fundo, e é isso que impede o cartão de desaparecer na página. */
  --superficie: color-mix(in srgb, var(--corpo-texto) 7%, var(--corpo-fundo));
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--site-fonte, var(--fonte));
  font-size: 1rem;
  line-height: 1.6;
  color: var(--corpo-texto);
  background: var(--corpo-fundo);
  -webkit-font-smoothing: antialiased;
}

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

/* O <figure> nasce com margem de 40px no navegador: sem zerar, a imagem do hero não chega na
   borda da tela e a do bloco não alinha com a caixa central. */
figure { margin: 0; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  color: var(--titulo);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.12;
  margin: 0 0 .5em;
  text-wrap: balance;
}

:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--destaque) 45%, transparent);
  outline-offset: 2px;
  border-radius: 2px;
}

.caixa {
  width: 100%;
  max-width: var(--caixa);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Pular para o conteúdo: primeira parada do teclado, invisível até receber foco. */
.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .75rem 1rem;
  background: var(--destaque);
  color: var(--destaque-texto);
}
.pular:focus { left: 1rem; top: 1rem; }

/* Chapéu: a linha curta em maiúsculas acima do título, no destaque do site. */
.chapeu {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--destaque);
  margin: 0 0 1rem;
}

/* ---------------------------------------------------------------- ações */

.botao {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .875rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--raio);
  background: var(--botao-fundo, var(--destaque));
  color: var(--botao-texto, var(--destaque-texto));
  border: 0;
  cursor: pointer;
}
.botao:hover { text-decoration: none; filter: brightness(.92); }

/* "Saiba mais →": a ação secundária das páginas corporativas é link, não botão. */
.seta-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--link);
}
.seta-link svg { width: 15px; height: 15px; transition: transform .16s ease; }
.seta-link:hover { text-decoration: none; }
.seta-link:hover svg { transform: translateX(3px); }

/* ---------------------------------------------------------------- cabeçalho */

.topo {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--topo-fundo);
  color: var(--topo-texto);
  /* A borda vem da cor do PRÓPRIO cabeçalho: barra branca sobre corpo escuro (ou o contrário)
     é combinação legítima, e uma borda derivada do corpo desaparece num dos dois casos. */
  border-bottom: 1px solid color-mix(in srgb, var(--topo-texto) 14%, transparent);
}

.topo-linha {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  min-height: 64px;
}

.marca { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
.marca img { max-height: 32px; width: auto; }
.marca-nome {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--topo-texto);
}
.marca:hover { text-decoration: none; }

.menu { display: flex; align-items: center; gap: .125rem; flex: 1 1 auto; }
.menu-item { position: relative; display: flex; }

.menu-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .5rem .625rem;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--topo-texto);
  border-radius: var(--raio);
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.menu-link:hover { text-decoration: none; color: var(--destaque); }
.menu-link[aria-expanded="true"] { color: var(--destaque); }
.menu-link.ativo { color: var(--destaque); }

.menu-seta { width: 9px; height: 9px; opacity: .7; transition: transform .18s ease; }
.menu-link[aria-expanded="true"] .menu-seta { transform: rotate(180deg); }

.menu-cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: .5rem 1.125rem;
  border-radius: var(--raio);
  background: var(--destaque);
  color: var(--destaque-texto);
  font-size: .9375rem;
  font-weight: 600;
  white-space: nowrap;
}
.menu-cta:hover { text-decoration: none; filter: brightness(.92); }

.topo-acoes { display: flex; align-items: center; gap: .25rem; flex: 0 0 auto; }

.icone-botao {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--topo-texto);
  cursor: pointer;
}
.icone-botao:hover { background: color-mix(in srgb, var(--topo-texto) 8%, transparent); }
.icone-botao svg { width: 19px; height: 19px; }

.abre-menu { display: none; }

/* ---------------------------------------------------------------- mega-menu */

/*
  O painel do submenu é filho do item e abre logo abaixo da barra, com as sub-opções na
  vertical, em colunas. Sem sombra pesada: borda fina e um pouco de elevação bastam.
*/
.painel {
  position: absolute;
  top: 100%;
  left: -.625rem;
  min-width: 260px;
  padding: 1.5rem;
  background: var(--topo-fundo);
  border: 1px solid color-mix(in srgb, var(--topo-texto) 12%, transparent);
  border-radius: 0 0 var(--raio-md) var(--raio-md);
  /* Sombra em preto e não na cor do texto do corpo: no tema escuro aquilo virava um brilho. */
  box-shadow: 0 14px 34px -14px rgba(5, 10, 18, .45);
  display: none;
  z-index: 45;
}
.menu-item[data-aberto="1"] > .painel { display: block; }

.painel-colunas {
  display: grid;
  grid-template-columns: repeat(var(--colunas, 1), minmax(210px, 1fr));
  gap: 1.75rem 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.painel-grupo > .painel-grupo-titulo {
  display: block;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--topo-texto) 55%, transparent);
  padding: 0 0 .625rem;
  margin: 0;
}

.painel-lista { margin: 0; padding: 0; list-style: none; }

.painel-link {
  display: block;
  padding: .375rem 0;
  color: var(--topo-texto);
  font-size: .9375rem;
  line-height: 1.4;
}
.painel-link:hover { text-decoration: none; color: var(--destaque); }
.painel-link strong { display: block; font-weight: 500; }
.painel-link span {
  display: block;
  margin-top: .125rem;
  font-size: .8125rem;
  color: color-mix(in srgb, var(--topo-texto) 60%, transparent);
}

/* ---------------------------------------------------------------- busca */

.busca-caixa {
  display: none;
  border-top: 1px solid color-mix(in srgb, var(--topo-texto) 12%, transparent);
  background: var(--topo-fundo);
  padding-block: 1.25rem;
}
.busca-caixa[data-aberto="1"] { display: block; }

.busca-forma { display: flex; gap: .5rem; align-items: center; }

.busca-campo {
  flex: 1 1 auto;
  font: inherit;
  font-size: 1.0625rem;
  padding: .75rem 1rem;
  color: var(--topo-texto);
  background: color-mix(in srgb, var(--topo-texto) 5%, var(--topo-fundo));
  border: 1px solid color-mix(in srgb, var(--topo-texto) 22%, transparent);
  border-radius: var(--raio);
}

/* ---------------------------------------------------------------- hero (carrossel) */

.carrossel { position: relative; }

.quadro {
  display: none;
  background: var(--quadro-fundo, var(--corpo-fundo));
}
.quadro[data-ativo="1"] { display: block; }

/*
  A grade do quadro tem largura CHEIA e a imagem sangra até a borda da tela — é isso que
  separa um hero de verdade de um cartão flutuando no meio do branco. O texto continua
  alinhado à caixa central por padding calculado, não por container.
*/
.quadro-grade {
  display: grid;
  /* A coluna do texto é um pouco mais larga que a da imagem: título corporativo é comprido. */
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: center;
  min-height: min(84vh, 640px);
}

.quadro-texto {
  padding-block: clamp(3rem, 7vw, 5.5rem);
  padding-inline-start: max(var(--gutter), calc((100vw - var(--caixa)) / 2 + var(--gutter)));
  padding-inline-end: clamp(1.5rem, 4vw, 4rem);
}

.quadro-figura { align-self: stretch; }
.quadro-figura img {
  width: 100%;
  height: 100%;
  min-height: min(50vh, 420px);
  object-fit: cover;
}

/* Imagem à esquerda: inverte as colunas e espelha os paddings do texto. */
.quadro-grade.imagem-esquerda > .quadro-texto {
  order: 2;
  padding-inline-start: clamp(1.5rem, 4vw, 4rem);
  padding-inline-end: max(var(--gutter), calc((100vw - var(--caixa)) / 2 + var(--gutter)));
}
.quadro-grade.imagem-esquerda > .quadro-figura { order: 1; }

/* Quadro sem imagem: uma coluna só, texto centrado na caixa e medida controlada. */
.quadro-grade.sem-imagem {
  grid-template-columns: minmax(0, 1fr);
  min-height: min(60vh, 460px);
}
.quadro-grade.sem-imagem > .quadro-texto {
  max-width: calc(var(--caixa) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* No quadro de fundo escuro, o chapéu no azul de destaque desaparece: ele segue a cor de
   texto do quadro quando o cadastro definiu uma, e só volta ao destaque quando não há. */
.quadro-texto .chapeu { color: var(--quadro-texto-cor, var(--destaque)); }

.quadro-titulo {
  font-size: clamp(2rem, 4vw, 3.375rem);
  color: var(--quadro-titulo, var(--titulo));
  margin-bottom: 1rem;
}

/* O parágrafo de abertura é grande de propósito: não é o corpo de texto da página. */
.quadro-texto .rico {
  font-size: clamp(1.0625rem, 1.6vw, 1.5rem);
  line-height: 1.5;
  max-width: 40ch;
  color: var(--quadro-texto-cor, var(--corpo-texto));
}
.quadro-texto .rico p { color: inherit; }
.quadro-texto .botao { margin-top: 2rem; }

/* Controles: pastilha translúcida sobre o quadro, no canto de baixo à esquerda. Translúcida
   porque o fundo do quadro é cadastrado e pode ser claro ou escuro. */
.carrossel-controles {
  position: absolute;
  bottom: clamp(1.25rem, 3vw, 2.25rem);
  left: max(var(--gutter), calc((100vw - var(--caixa)) / 2 + var(--gutter)));
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem .75rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--corpo-fundo) 82%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px -4px color-mix(in srgb, var(--corpo-texto) 40%, transparent);
}

.ponto {
  width: 28px;
  height: 3px;
  border: 0;
  padding: 0;
  border-radius: 2px;
  background: color-mix(in srgb, var(--corpo-texto) 25%, transparent);
  cursor: pointer;
}
.ponto[aria-current="true"] { background: var(--destaque); }

.seta {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--borda);
  border-radius: 50%;
  background: none;
  color: var(--corpo-texto);
  cursor: pointer;
}
.seta:hover { border-color: var(--destaque); color: var(--destaque); }
.seta svg { width: 14px; height: 14px; }

/* ---------------------------------------------------------------- blocos de conteúdo */

/*
  O ritmo da página vem da alternância de faixas: bloco par no fundo do site, bloco ímpar num
  cinza levíssimo derivado do tema. Bloco com cor própria cadastrada vem por estilo em linha e
  ganha da regra abaixo.
*/
.blocos > .bloco:nth-child(even) { background: var(--faixa); }

.bloco { background: var(--bloco-fundo, transparent); }

.bloco-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: var(--secao);
}
.bloco-grade.imagem-direita > .bloco-figura { order: 2; }
.bloco-grade.imagem-direita > .bloco-texto { order: 1; }

/* Bloco sem imagem não é meia-página: o texto ocupa a coluna inteira e continua legível. */
.bloco-grade.sem-imagem { grid-template-columns: minmax(0, 1fr); }
.bloco-grade.sem-imagem .bloco-texto { max-width: 68ch; }

.bloco-figura img {
  width: 100%;
  border-radius: var(--raio-md);
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.bloco-titulo {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--bloco-titulo, var(--titulo));
  margin-bottom: .75rem;
}

.bloco-texto .rico {
  font-size: 1.0625rem;
  line-height: 1.65;
  max-width: 60ch;
  color: var(--bloco-texto-cor, var(--corpo-texto));
}
.bloco-texto .seta-link { margin-top: 1.5rem; }

.bloco-largura-cheia .bloco-grade { max-width: none; }

/* Cabeça de seção (bloco de últimos posts e listagens). */
.secao-cabeca { padding-top: var(--secao); max-width: 60ch; }
.secao-cabeca .bloco-titulo { margin-bottom: .5rem; }

/* Conteúdo vindo do editor: estilos do que o usuário escreve em HTML. */
.rico > :first-child { margin-top: 0; }
.rico > :last-child { margin-bottom: 0; }
.rico p { margin: 0 0 1rem; }
.rico ul, .rico ol { margin: 0 0 1rem; padding-left: 1.15rem; }
.rico li { margin-bottom: .4rem; }
.rico h2 { font-size: clamp(1.375rem, 2.2vw, 1.875rem); margin-top: 2.25rem; }
.rico h3 { font-size: 1.25rem; margin-top: 1.75rem; }
.rico blockquote {
  margin: 1.75rem 0;
  padding: .25rem 0 .25rem 1.25rem;
  border-left: 3px solid var(--destaque);
  font-size: 1.125rem;
  color: var(--titulo);
}
.rico img { border-radius: var(--raio-md); margin: 1.75rem 0; }
.rico figure { margin: 1.75rem 0; }
.rico figcaption { font-size: .875rem; opacity: .7; margin-top: .5rem; }
.rico table { width: 100%; border-collapse: collapse; margin: 1.75rem 0; font-size: .9375rem; }
.rico th, .rico td { padding: .625rem .75rem; border-bottom: 1px solid var(--borda-fraca); text-align: left; }
.rico th { font-weight: 600; color: var(--titulo); }
.rico code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .875em;
  background: color-mix(in srgb, var(--corpo-texto) 8%, transparent);
  padding: .1rem .35rem;
  border-radius: 3px;
}
.rico pre {
  background: color-mix(in srgb, var(--corpo-texto) 8%, transparent);
  padding: 1rem;
  border-radius: var(--raio);
  overflow-x: auto;
}
.rico iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--raio-md); }

/* ---------------------------------------------------------------- título de página */

.pagina-cabeca {
  padding-block: var(--secao) 0;
  border-bottom: 1px solid var(--borda-fraca);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.pagina-titulo { font-size: clamp(2rem, 3.6vw, 3rem); margin: 0; }

/* ---------------------------------------------------------------- blog */

.blog-topo { padding-block: var(--secao) 0; }
.blog-titulo { font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: .35rem; }
.blog-sub { color: color-mix(in srgb, var(--corpo-texto) 85%, transparent); margin: 0; font-size: 1.0625rem; }

.categorias { display: flex; flex-wrap: wrap; gap: .5rem; padding-block: 1.5rem 0; }
.categoria-chip {
  display: inline-flex;
  padding: .375rem .875rem;
  border: 1px solid var(--borda);
  border-radius: 999px;
  font-size: .875rem;
  color: var(--corpo-texto);
}
.categoria-chip:hover { text-decoration: none; border-color: var(--destaque); color: var(--destaque); }
.categoria-chip[aria-current="page"] {
  background: var(--destaque);
  border-color: var(--destaque);
  color: var(--destaque-texto);
}

/*
  align-items: start é o que impede o cartão sem capa de esticar até a altura do vizinho e
  virar um retângulo vazio — foi assim que a primeira versão ficou feia.
*/
.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  align-items: start;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  padding: 2rem 0 var(--secao);
  list-style: none;
  margin: 0;
}

.cartao {
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borda-fraca);
  border-radius: var(--raio-md);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.cartao:hover {
  border-color: var(--borda);
  box-shadow: 0 12px 28px -18px color-mix(in srgb, var(--corpo-texto) 50%, transparent);
}
.cartao img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.cartao-corpo { padding: 1.25rem 1.25rem 1.375rem; display: flex; flex-direction: column; gap: .5rem; }
.cartao-categoria {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--destaque);
}
.cartao-titulo { font-size: 1.1875rem; margin: 0; line-height: 1.25; }
.cartao-titulo a { color: var(--titulo); }
.cartao-titulo a:hover { color: var(--destaque); text-decoration: none; }
.cartao-resumo { margin: 0; font-size: .9375rem; line-height: 1.55; }
.cartao-meta {
  margin: .5rem 0 0;
  padding-top: .75rem;
  border-top: 1px solid var(--borda-fraca);
  font-size: .8125rem;
  color: color-mix(in srgb, var(--corpo-texto) 65%, transparent);
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}

.paginacao { display: flex; gap: .5rem; justify-content: center; padding-bottom: var(--secao); }
.paginacao a, .paginacao span {
  min-width: 40px;
  padding: .5rem .75rem;
  text-align: center;
  border: 1px solid var(--borda-fraca);
  border-radius: var(--raio);
  font-size: .9375rem;
}
.paginacao [aria-current="page"] {
  background: var(--destaque);
  border-color: var(--destaque);
  color: var(--destaque-texto);
}

/* ---------------------------------------------------------------- post */

.post { padding-block: var(--secao); }
.post-cabeca { max-width: 44rem; margin-inline: auto; text-align: center; }
.post-titulo { font-size: clamp(2rem, 4vw, 3.25rem); }
.post-meta {
  display: flex;
  gap: .6rem;
  justify-content: center;
  flex-wrap: wrap;
  font-size: .875rem;
  color: color-mix(in srgb, var(--corpo-texto) 65%, transparent);
}
.post-capa {
  max-width: 62rem;
  margin: clamp(2rem, 4vw, 3rem) auto;
  border-radius: var(--raio-md);
  overflow: hidden;
}
.post-capa img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.post-corpo { max-width: 42rem; margin-inline: auto; font-size: 1.125rem; line-height: 1.7; }
.post-etiquetas { display: flex; flex-wrap: wrap; gap: .5rem; max-width: 42rem; margin: 2.5rem auto 0; }

.autor {
  display: flex;
  gap: 1rem;
  align-items: center;
  max-width: 42rem;
  margin: 2.5rem auto 0;
  padding: 1.25rem;
  background: var(--faixa);
  border-radius: var(--raio-md);
}
.autor img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.autor-nome { font-weight: 600; color: var(--titulo); }
.autor-bio { font-size: .9375rem; margin: .25rem 0 0; }

.relacionados { padding-top: var(--secao); border-top: 1px solid var(--borda-fraca); margin-top: var(--secao); }
.relacionados h2 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); }
.relacionados .cartoes { padding-bottom: 0; }

/* ---------------------------------------------------------------- busca e 404 */

.resultados { padding: 2rem 0 var(--secao); list-style: none; margin: 0; max-width: 46rem; }
.resultado { padding-block: 1.25rem; border-bottom: 1px solid var(--borda-fraca); }
.resultado-tipo {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--destaque);
}
.resultado h2 { font-size: 1.25rem; margin: .25rem 0 .35rem; }
.resultado p { margin: 0; font-size: .9375rem; }

.vazio { padding-block: var(--secao); text-align: center; }
.vazio h1, .vazio h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
.vazio p { max-width: 46ch; margin-inline: auto; }
.vazio .botao { margin-top: 1.5rem; }

/* ---------------------------------------------------------------- rodapé */

.rodape {
  background: var(--rodape-fundo);
  color: var(--rodape-texto);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.rodape a { color: var(--rodape-texto); }
.rodape a:hover { color: var(--rodape-texto); }
.rodape h2, .rodape h3, .rodape h4, .rodape strong { color: var(--rodape-texto); }

/* O HTML do rodapé é livre: em flex, um parágrafo fica do tamanho dele e várias listas de
   links se distribuem em colunas sem eu ter de adivinhar quantas são. */
.rodape-conteudo { display: flex; flex-wrap: wrap; gap: 2rem 4rem; }
.rodape-conteudo ul { list-style: none; margin: 0; padding: 0; }
.rodape-conteudo li { margin-bottom: .5rem; font-size: .9375rem; }

.rodape-fim {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--rodape-texto) 20%, transparent);
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: .875rem;
  opacity: .8;
}

/* ---------------------------------------------------------------- telas estreitas */

@media (max-width: 1023px) {
  .abre-menu { display: inline-grid; }

  /*
    No celular o menu vira gaveta: a barra horizontal não cabe, e submenu por hover não existe
    em tela de toque. Cada item continua abrindo as sub-opções, agora empilhadas.
  */
  .menu {
    position: fixed;
    inset: 64px 0 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem var(--gutter) 3rem;
    background: var(--topo-fundo);
    overflow-y: auto;
    display: none;
  }
  .menu[data-aberto="1"] { display: flex; }

  .menu-item { display: block; }
  .menu-link { width: 100%; justify-content: space-between; padding: .875rem .25rem; font-size: 1.0625rem; }
  .menu-cta { margin: 1rem .25rem 0; justify-content: center; }

  .painel {
    position: static;
    display: none;
    min-width: 0;
    padding: 0 0 .75rem .75rem;
    border: 0;
    box-shadow: none;
    border-radius: 0;
  }
  .painel-colunas { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }

  .quadro-grade,
  .bloco-grade {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  /* Empilhado, a imagem vem sempre DEPOIS do texto, qualquer que seja o lado escolhido. */
  .quadro-grade > .quadro-texto,
  .quadro-grade.imagem-esquerda > .quadro-texto {
    order: 0;
    padding-inline: var(--gutter);
    padding-block: clamp(2.5rem, 8vw, 3.5rem) clamp(1.5rem, 5vw, 2.5rem);
  }
  .quadro-grade > .quadro-figura,
  .quadro-grade.imagem-esquerda > .quadro-figura { order: 1; }
  .quadro-figura img { min-height: 0; aspect-ratio: 3 / 2; }
  .quadro-texto .rico { max-width: none; }

  /* Texto antes da imagem no empilhado: quem chega no celular lê primeiro, vê depois. */
  .bloco-grade > .bloco-texto { order: 0; }
  .bloco-grade > .bloco-figura { order: 1; }

  /* Sem espaço para a pastilha sobre a imagem: os controles descem para depois do quadro. */
  .carrossel-controles {
    position: static;
    left: auto;
    bottom: auto;
    margin: 0 var(--gutter) 2rem;
    width: fit-content;
    backdrop-filter: none;
    background: none;
    box-shadow: none;
    padding: 0;
  }

  .post-capa img { aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* O site é impresso de vez em quando (proposta, ata): sem menu, sem rodapé escuro. */
@media print {
  .topo, .rodape, .carrossel-controles, .busca-caixa { display: none !important; }
  body { color: #000; background: #fff; }
}

/* Bloco que continua a faixa do anterior (mesma cor de fundo cadastrada): o respiro de cima
   sai, senão soma com o de baixo do bloco anterior e abre um vazio no meio da seção. */
.bloco-continua > :first-child,
.bloco-continua > .caixa > :first-child { padding-top: 0; }

/* Âncora de seção (#recursos, #planos): o cabeçalho é fixo, então a rolagem tem de parar
   antes dele, senão o título da seção fica escondido atrás da barra. */
.bloco[id] { scroll-margin-top: calc(var(--altura-topo, 64px) + 1rem); }

/* ================================================================ blocos novos */

/*
  Todos os blocos de lista usam a mesma variável de colunas: o cadastro escolhe 2, 3 ou 4, e
  "auto-fit" (o padrão) deixa o navegador decidir pelo espaço. Uma regra, sete tipos.
*/

.secao-cabeca.centrada { margin-inline: auto; text-align: center; }
.secao-cabeca.centrada .rico { margin-inline: auto; }

/* ---------------------------------------------------------------- cartões */

.grade-cartoes {
  display: grid;
  grid-template-columns: repeat(var(--colunas, auto-fit), minmax(260px, 1fr));
  /* Cartão de conteúdo fica da mesma altura na fileira (o corpo se estica): cartão curto ao
     lado de cartão alto lê como inacabado. O cartão de POST é o contrário — lá a altura é
     natural, porque a capa pode faltar. */
  align-items: stretch;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  padding: 2rem 0 var(--secao);
  margin: 0;
  list-style: none;
}

.cartao-bloco {
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borda-fraca);
  border-radius: var(--raio-md);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.cartao-bloco:hover {
  border-color: var(--borda);
  box-shadow: 0 12px 28px -18px color-mix(in srgb, var(--corpo-texto) 50%, transparent);
}
.cartao-bloco img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.cartao-bloco-corpo { padding: 1.375rem; display: flex; flex-direction: column; gap: .5rem; }
.cartao-icone { display: inline-flex; color: var(--destaque); font-size: 1.75rem; line-height: 1; }
.cartao-icone .icone { width: 32px; height: 32px; }
/* Tamanhos da direção visual: 20 em controles, 24 em menus, 32 em cartões, 48 em destaques. */
.icone { width: 24px; height: 24px; flex: 0 0 auto; }
.cartao-chapeu {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--destaque);
}
.cartao-bloco-titulo { font-size: 1.125rem; margin: 0; line-height: 1.3; }
.cartao-bloco-titulo a { color: var(--titulo); }
.cartao-bloco-titulo a:hover { color: var(--destaque); text-decoration: none; }
.cartao-bloco .rico { font-size: .9375rem; line-height: 1.6; }
.cartao-bloco .seta-link { margin-top: auto; padding-top: .5rem; font-size: .9375rem; }

/* ---------------------------------------------------------------- perguntas */

.faq { max-width: 52rem; padding: 1.5rem 0 var(--secao); }

.faq-item { border-bottom: 1px solid var(--borda-fraca); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--titulo);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--destaque); }
.faq-item summary svg { width: 16px; height: 16px; flex: 0 0 auto; transition: transform .18s ease; }
/* O "+" vira "×" quando abre: o mesmo desenho serve para os dois estados. */
.faq-item[open] summary svg { transform: rotate(45deg); color: var(--destaque); }
.faq-resposta { padding: 0 0 1.375rem; max-width: 62ch; }

/* ---------------------------------------------------------------- chamada */

.cta {
  padding-block: var(--secao);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
}
.cta-titulo {
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  color: var(--bloco-titulo, var(--titulo));
  max-width: 44ch;
  margin: 0;
}
.cta-texto { max-width: 56ch; color: var(--bloco-texto-cor, var(--corpo-texto)); }
.cta .botao { margin-top: 1.25rem; }

/* ---------------------------------------------------------------- texto solto */

.bloco-texto-solto { padding-block: var(--secao); max-width: 68ch; }
.bloco-texto-solto.centrada { margin-inline: auto; text-align: center; }
.bloco-texto-solto .rico { font-size: 1.0625rem; line-height: 1.7; }
.bloco-texto-solto .seta-link { margin-top: 1.5rem; }

/* ---------------------------------------------------------------- números */

.numeros {
  display: grid;
  grid-template-columns: repeat(var(--colunas, auto-fit), minmax(180px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: 2rem 0 var(--secao);
  margin: 0;
  list-style: none;
}
.numero { display: flex; flex-direction: column; gap: .25rem; }
.numero-valor {
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--destaque);
}
/* Valor de texto (não numérico) no bloco de números: mesmo peso, corpo menor, senão
   "Horário comercial" quebra em três linhas e come a linha de baixo. */
.numero-valor-longo { font-size: clamp(1.375rem, 2vw, 1.75rem); letter-spacing: -.01em; line-height: 1.15; }
.numero-rotulo { font-weight: 600; color: var(--titulo); }
.numero-nota { font-size: .875rem; color: color-mix(in srgb, var(--corpo-texto) 75%, transparent); }

/* ---------------------------------------------------------------- depoimentos */

.depoimentos {
  display: grid;
  grid-template-columns: repeat(var(--colunas, auto-fit), minmax(300px, 1fr));
  align-items: start;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  padding: 2rem 0 var(--secao);
  margin: 0;
  list-style: none;
}
.depoimento {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.75rem;
  background: var(--superficie);
  border: 1px solid var(--borda-fraca);
  border-radius: var(--raio-md);
}
.depoimento blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--corpo-texto);
}
/* A aspa desenhada é o que faz o cartão ser lido como depoimento, e não como cartão qualquer. */
.depoimento blockquote::before {
  content: "\201C";
  display: block;
  font-size: 2.75rem;
  line-height: .8;
  color: color-mix(in srgb, var(--destaque) 45%, transparent);
  margin-bottom: .25rem;
}
.depoimento-quem { display: flex; align-items: center; gap: .75rem; margin-top: auto; }
.depoimento-quem img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.depoimento-nome { display: block; font-weight: 600; color: var(--titulo); font-size: .9375rem; }
.depoimento-cargo {
  display: block;
  font-size: .8125rem;
  color: color-mix(in srgb, var(--corpo-texto) 70%, transparent);
}

/* ---------------------------------------------------------------- logos */

.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: 2rem 0 var(--secao);
  margin: 0;
  list-style: none;
}
/* Logo de cliente em cinza: a página não vira colcheia de marcas coloridas, e a cor volta
   quando o visitante passa o mouse. */
.logos img {
  max-height: 42px;
  width: auto;
  filter: grayscale(1);
  opacity: .65;
  transition: filter .18s ease, opacity .18s ease;
}
.logos img:hover { filter: none; opacity: 1; }

/* ---------------------------------------------------------------- galeria */

.galeria {
  display: grid;
  grid-template-columns: repeat(var(--colunas, auto-fit), minmax(220px, 1fr));
  gap: .75rem;
  padding: 2rem 0 var(--secao);
  margin: 0;
  list-style: none;
}
.galeria-item {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--raio-md);
  overflow: hidden;
  background: none;
  cursor: zoom-in;
}
.galeria-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.galeria-legenda {
  position: absolute;
  inset: auto 0 0 0;
  padding: .5rem .625rem;
  font-size: .8125rem;
  text-align: left;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, .65), transparent);
}

/* Imagem grande da galeria. Fecha no clique, no Esc ou no botão. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(10, 13, 16, .88);
}
.lightbox img { max-width: 100%; max-height: 82vh; border-radius: var(--raio-md); }
.lightbox figcaption { color: #fff; text-align: center; padding-top: .75rem; font-size: .9375rem; }
.lightbox-fechar {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-size: 1.25rem;
  cursor: pointer;
}

/* ---------------------------------------------------------------- vídeo, mapa, separador */

.video, .mapa {
  padding-bottom: var(--secao);
}
.video iframe, .mapa iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--raio-md);
  background: var(--faixa);
}
.video-larga iframe { border-radius: 0; }
.mapa iframe { aspect-ratio: 21 / 9; min-height: 320px; }
.bloco-map.bloco-largura-cheia .mapa { padding-bottom: 0; }
.bloco-map.bloco-largura-cheia .mapa iframe { border-radius: 0; }

.separador { border: 0; border-top: 1px solid var(--borda-fraca); }
.separador-vazio { width: 100%; }

/* ---------------------------------------------------------------- formulário */

.formulario-caixa {
  padding-block: var(--secao);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.formulario-cabeca .secao-cabeca { padding-top: 0; }

.formulario {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--superficie);
  border: 1px solid var(--borda-fraca);
  border-radius: var(--raio-md);
}

.campo-site { display: grid; gap: .35rem; }
/* Campo de texto longo e o de marcar ocupam a linha inteira; o resto vai de dois em dois. */
.campo-site.campo-largo, .formulario-fim { grid-column: 1 / -1; }

.campo-site > label { font-size: .8125rem; font-weight: 600; color: var(--titulo); }
.campo-site .obrigatorio { color: var(--destaque); }

.campo-site input,
.campo-site textarea,
.campo-site select {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: .625rem .75rem;
  color: var(--corpo-texto);
  background: var(--corpo-fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.campo-site textarea { resize: vertical; min-height: 120px; }
.campo-site input:focus, .campo-site textarea:focus, .campo-site select:focus {
  outline: none;
  border-color: var(--destaque);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--destaque) 22%, transparent);
}
.campo-site input[aria-invalid="true"],
.campo-site textarea[aria-invalid="true"],
.campo-site select[aria-invalid="true"] { border-color: #d70015; }

.campo-marca { display: flex; align-items: flex-start; gap: .5rem; font-size: .9375rem; }
.campo-marca input { width: 17px; height: 17px; margin-top: .15rem; accent-color: var(--destaque); }

/* A armadilha some da tela sem usar display:none — robô ignora campo escondido por display. */
.armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulario-fim { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.formulario-aviso { margin: 0; font-size: .9375rem; }
.formulario-aviso.erro { color: #d70015; }
.formulario-aviso.ok { color: #1d7a3f; }

/* Depois do envio, o formulário sai de cena e sobra o recado. */
.formulario-pronto {
  grid-column: 1 / -1;
  padding: 1.25rem;
  border-radius: var(--raio-md);
  background: color-mix(in srgb, var(--destaque) 10%, transparent);
  color: var(--titulo);
  font-size: 1.0625rem;
}

@media (max-width: 1023px) {
  .formulario-caixa { grid-template-columns: minmax(0, 1fr); }
  .formulario { grid-template-columns: minmax(0, 1fr); }
  .cta-titulo { max-width: none; }
}

/* ---------------------------------------------------------------- imagem e texto em tela cheia */

/*
  O bloco ocupa a tela toda MENOS o cabeçalho fixo e a faixa da seta. 100dvh e não 100vh: no
  celular, `vh` conta a barra de endereço que se esconde ao rolar, e o bloco ficaria cortado.
*/
.bloco-imagetextfull { --altura-topo: 64px; --altura-faixa: 72px; }

.tela-cheia {
  position: relative;
  display: grid;
  align-items: center;
  min-height: calc(100dvh - var(--altura-topo));
  padding-bottom: var(--altura-faixa);
  overflow: hidden;
  isolation: isolate;
}

.tela-cheia-imagem {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Véu sobre a foto: texto claro em cima de foto sem véu vira sorte. O gradiente é mais forte
   do lado do texto e some do outro, para a imagem continuar aparecendo. */
.tela-cheia-veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      100deg,
      color-mix(in srgb, var(--veu, #0b1420) 88%, transparent) 0%,
      color-mix(in srgb, var(--veu, #0b1420) 62%, transparent) 42%,
      color-mix(in srgb, var(--veu, #0b1420) 12%, transparent) 78%
    );
}

.tela-cheia-texto { max-width: min(100%, calc(var(--caixa) + var(--gutter) * 2)); }
.tela-cheia.centrada .tela-cheia-texto { text-align: center; }
.tela-cheia.centrada .chapeu,
.tela-cheia.centrada .tela-cheia-corpo { margin-inline: auto; }

.tela-cheia .chapeu { color: color-mix(in srgb, var(--titulo-cheio) 82%, transparent); }

.tela-cheia-titulo {
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  line-height: 1.05;
  color: var(--titulo-cheio);
  max-width: 22ch;
  margin-bottom: 1.25rem;
}
.tela-cheia.centrada .tela-cheia-titulo { max-width: 28ch; margin-inline: auto; }

.tela-cheia-corpo {
  font-size: clamp(1.0625rem, 1.6vw, 1.5rem);
  line-height: 1.5;
  max-width: 44ch;
  color: var(--texto-cheio);
}
.tela-cheia-corpo p { color: inherit; }
.tela-cheia .botao { margin-top: 2rem; }

/* A faixa de baixo: o pedaço da tela que não é imagem, com a seta no meio. */
.tela-cheia-faixa {
  position: absolute;
  inset: auto 0 0 0;
  height: var(--altura-faixa);
  display: grid;
  place-items: center;
  background: var(--corpo-fundo);
}

.tela-cheia-seta {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--borda);
  border-radius: 50%;
  background: var(--corpo-fundo);
  color: var(--corpo-texto);
  cursor: pointer;
  /* Sobe metade de si mesma para ficar montada na borda da faixa, como na referência. */
  transform: translateY(-4px);
  transition: transform .18s ease, border-color .18s ease, color .18s ease;
}
.tela-cheia-seta:hover {
  border-color: var(--destaque);
  color: var(--destaque);
  transform: translateY(1px);
}
.tela-cheia-seta svg { width: 22px; height: 22px; }

@media (max-width: 1023px) {
  .bloco-imagetextfull { --altura-topo: 64px; --altura-faixa: 64px; }
  .tela-cheia-texto { padding-block: 3rem; }
  .tela-cheia-titulo { max-width: none; }
  .tela-cheia-corpo { max-width: none; }
  /* No celular a foto costuma ter o assunto no meio; o véu vira vertical para não cobrir tudo. */
  .tela-cheia-veu {
    background:
      linear-gradient(
        to bottom,
        color-mix(in srgb, var(--veu, #0b1420) 84%, transparent) 0%,
        color-mix(in srgb, var(--veu, #0b1420) 66%, transparent) 55%,
        color-mix(in srgb, var(--veu, #0b1420) 30%, transparent) 100%
      );
  }
}