/* =========================================================================
   RECOMPOR — style.css (design system v3)

   design-tokens.css v3 é carregado ANTES deste arquivo e já entrega a base
   tipográfica, os temas de seção, .wrap, .eyebrow, .btn*, .link-seta,
   .hero-media, .card-stat e .card-article. Este arquivo NÃO redeclara nada
   disso — cobre só o que os tokens não trazem: o shell (header, navegação,
   trilha, rodapé) e os componentes de página.

   O style.css da v2, com Courier Prime, raio zero, ladrilho e tricolor,
   continua recuperável no commit 4dc53a9.
   ========================================================================= */

/* =========================================================================
   BASE
   ========================================================================= */

:root {
  /* Altura do header. Não é token de design: é constante de layout derivada
     do componente, usada para afastar o conteúdo do cabeçalho fixo. */
  --header-h: 4.5rem;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);   /* header fixo */
  -webkit-text-size-adjust: 100%;
}

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

/* O atributo hidden vira display:none pela folha do navegador, que qualquer
   display de autor sobrescreve. O app.js usa hidden para as mensagens de
   erro e a confirmação do formulário, então a regra precisa vencer. */
[hidden] { display: none !important; }

/* O navegador aplica margin: 1em 40px em <figure> e <blockquote>. Isso
   recuava a foto do hero e o bloco de citação em 40px de cada lado,
   desalinhando-os do texto da mesma coluna. */
figure, blockquote { margin: 0; }
dd { margin-left: 0; }

p:last-child { margin-bottom: 0; }

/* .wrap-estreito reduz o max-width do próprio .wrap para 46rem. Como o .wrap
   é centralizado, o bloco inteiro saía da grade: o texto corrido aparecia
   deslocado à direita em relação ao h1, que usa o .wrap cheio.
   A correção mantém o contêiner na grade e estreita o CONTEÚDO, de modo que
   a medida de leitura fique certa e a margem esquerda continue alinhada.
   Centralização, quando desejada, é pedida explicitamente — como no CTA de
   fecho da seção 6.3 do design system, que usa .wrap-estreito sem .wrap. */
.wrap.wrap-estreito { max-width: var(--wrap--max); }
.wrap.wrap-estreito > * { max-width: var(--wrap--estreito); }

/* =========================================================================
   ACESSIBILIDADE
   ========================================================================= */

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--azul); color: var(--branco);
  padding: 0.75rem 1rem;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* =========================================================================
   LOGOTIPO — ativo de marca

   O wordmark está em curvas dentro dos próprios arquivos SVG
   (assets/logo-horizontal.svg e assets/logo-empilhado.svg), convertido do
   Courier Prime Bold. Antes era <text> dimensionado por CSS, e as
   coordenadas do lockup dependiam da métrica monoespaçada daquela fonte:
   em Manrope as três linhas do logo empilhado ficavam desiguais. Com as
   curvas o logo não depende mais de fonte alguma, e o Courier Prime deixou
   de ser carregado.
   ========================================================================= */

.logo-compacto { height: 26px; width: auto; display: block; }
.logo-rodape { width: 250px; height: auto; }

/* =========================================================================
   MOVIMENTO
   ========================================================================= */

/* .reveal e .is-visible são acionados pelo IntersectionObserver do app.js.
   O par precisa existir junto: .reveal sozinho deixaria o conteúdo invisível. */
.reveal { opacity: 0; transform: translateY(12px); }
.reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--transition-dur--slow) ease, transform var(--transition-dur--slow) ease;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================================
   SHELL — CABEÇALHO

   Header fixo com fundo branco translúcido (v3, seção 5). A borda inferior
   só ganha peso depois que a página rola: o app.js alterna .is-scrolled.
   ========================================================================= */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: color-mix(in srgb, var(--papel) 85%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: var(--borda--fina) solid transparent;
  transition: border-color var(--transition-dur), background-color var(--transition-dur);
}
.site-header.is-scrolled { border-bottom-color: var(--linha); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap--xs);
  min-height: var(--header-h);
}

/* O logo tem 26px de altura, então o link da marca ficava com uma área de
   toque de 26px. O min-height traz o alvo para o mínimo sem mexer no logo. */
.brand { display: flex; align-items: center; min-height: var(--area-clique-min); }

/* ---- Navegação ---- */

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--gap--xs);
}
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--area-clique-min);   /* na v2 dava 37px no desktop */
  padding: 0 0.5rem;
  font-size: var(--fs--caption);
  font-weight: 600;
  border-radius: var(--raio--pill);
  transition: color var(--transition-dur), background-color var(--transition-dur);
}
.nav a:hover { color: var(--azul); }
.nav a[aria-current="page"] { color: var(--azul); }

.nav .nav-cta {
  background: var(--azul);
  color: var(--branco);
  padding: 0 1.25rem;
  border: var(--borda) solid var(--azul);
}
.nav .nav-cta:hover,
.nav .nav-cta[aria-current="page"] {
  background: var(--azul-escuro);
  border-color: var(--azul-escuro);
  color: var(--branco);
}

/* ---- Botão do menu mobile ---- */

.nav-toggle {
  appearance: none;
  background: none;
  border: var(--borda--fina) solid var(--linha-forte);
  border-radius: var(--raio--pill);
  width: var(--area-clique-min);
  height: var(--area-clique-min);
  display: grid;
  place-content: center;
  gap: 5px;
  cursor: pointer;
  padding: 0.7rem;
  transition: border-color var(--transition-dur);
}
.nav-toggle:hover { border-color: var(--preto); }
.nav-toggle .bar {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: var(--raio--pill);
  background: var(--preto);
}

@media (max-width: 860px) {
  .nav {
    position: absolute;
    top: 100%;
    left: var(--wrap--pad);
    right: var(--wrap--pad);
    background: var(--papel);
    border-radius: var(--raio);
    box-shadow: var(--sombra--forte);
    padding: var(--gap--xs);
    display: none;
  }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  /* flex, e não inline-flex: no mobile cada item ocupa a linha inteira,
     senão a área de toque ficaria só do tamanho do texto */
  .nav a { display: flex; padding: 0 1rem; font-size: var(--fs--p); border-radius: var(--raio); }
  .nav .nav-cta { justify-content: center; margin-top: var(--gap--xxs); }
}
@media (min-width: 861px) {
  .nav-toggle { display: none; }
}

/* =========================================================================
   SHELL — TRILHA (breadcrumb)
   ========================================================================= */

.trilha { font-size: var(--fs--caption); margin: 0 0 var(--gap--xs); }
.trilha ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;   /* o link tem 44px e o item atual não; sem isto desalinham */
  gap: 0.4rem;
  margin: 0;
  padding: 0;
}
.trilha li { display: flex; align-items: center; }
.trilha li:not(:last-child)::after { content: "/"; margin-left: 0.4rem; color: var(--linha-forte); }
/* o link da trilha tinha 18px de altura; inline-flex com min-height traz a
   área de toque ao mínimo sem afastar o separador do texto */
.trilha a {
  display: inline-flex;
  align-items: center;
  min-height: var(--area-clique-min);
  color: var(--azul);
  font-weight: 600;
}
.trilha a:hover { text-decoration: underline; }
.trilha [aria-current="page"] { color: var(--preto); opacity: 0.7; }

/* =========================================================================
   SHELL — RODAPÉ

   Fundo em --papel-2. O CTA de fecho é theme--escuro, então um rodapé
   escuro grudaria nele e quebraria a regra de ritmo da seção 5 (nunca dois
   fundos iguais vizinhos). O tom claro também mantém legível o logo
   empilhado, cujo fill #231F20 está fixo no SVG.
   ========================================================================= */

.site-footer {
  background: var(--papel-2);
  padding: var(--gap--lg) 0 var(--gap--sm);
}
.footer-inner { display: grid; gap: var(--gap--sm); }
.footer-slogan {
  margin: var(--gap--xs) 0 0;
  font-size: var(--fs--lead);
  max-width: 30ch;
}
.footer-meta { font-size: var(--fs--caption); margin: 0; opacity: 0.7; }

.footer-nav {
  list-style: none;
  margin: var(--gap--xs) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--gap--xs);
}
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--area-clique-min);
  font-size: var(--fs--caption);
  font-weight: 600;
}
.footer-nav a:hover { color: var(--azul); text-decoration: underline; }

.social-links {
  list-style: none;
  margin: var(--gap--xs) 0 0;
  padding: 0;
  display: flex;
  gap: var(--gap--xxs);
}
.social-links a {
  display: grid;
  place-content: center;
  width: var(--area-clique-min);        /* na v2 eram 40px */
  height: var(--area-clique-min);
  border: var(--borda--fina) solid var(--linha-forte);
  border-radius: var(--raio--pill);
  color: var(--preto);
  transition: background-color var(--transition-dur), color var(--transition-dur), border-color var(--transition-dur);
}
.social-links a:hover, .social-links a:focus-visible {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--branco);
}
.social-links svg { width: 18px; height: 18px; fill: currentColor; display: block; }

@media (min-width: 800px) {
  .footer-inner { grid-template-columns: 1fr auto; align-items: end; }
  .footer-meta { text-align: right; }
}

/* =========================================================================
   UTILITÁRIO — nota discreta (usada no rodapé e em páginas internas)
   ========================================================================= */

.hint { font-size: var(--fs--caption); opacity: 0.7; }

/* =========================================================================
   HERO (v3, seção 6.1) — manchete à esquerda, foto grande logo abaixo com
   os cantos superiores gigantes. A foto fica dentro de um .wrap próprio, e
   não com .wrap na mesma tag do exemplo do design system: o padding lateral
   do .wrap recuaria a imagem para dentro do retângulo arredondado, deixando
   faixas brancas nas laterais.
   ========================================================================= */

.hero {
  padding-top: calc(var(--header-h) + var(--gap));
  padding-bottom: 0;
}
.hero-copy { margin-bottom: var(--gap); }
.hero-copy .lead {
  font-size: var(--fs--lead);
  max-width: var(--medida--lead);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap--xs);
  margin: var(--gap--sm) 0 0;
  max-width: none;
}

/* =========================================================================
   CABEÇALHO DE SEÇÃO
   ========================================================================= */

.section-lead {
  font-size: var(--fs--lead);
  max-width: var(--medida--lead);
  margin-bottom: var(--gap);
}

/* =========================================================================
   GRADES DE CARDS
   ========================================================================= */

.cards-stat, .cards-frentes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--grid__gap-x);
}
@media (min-width: 760px) {
  .cards-stat { grid-template-columns: repeat(3, 1fr); }
  .cards-frentes { grid-template-columns: repeat(2, 1fr); }
}
.cards-stat + .hint { margin-top: var(--gap--xs); }

/* O card de artigo já vem pronto dos tokens; aqui só o ritmo interno. */
.card-article__body h3 { font-size: var(--fs--h4); margin: 0; }
.card-article__body p { margin: 0; font-size: var(--fs--caption); }
.card-article__body .link-seta { margin-top: auto; padding-top: var(--gap--xs); }

/* O espaço do content: " →" some entre elementos inline-block; sem isto a
   seta cola na última letra do rótulo. */
.link-seta::after { margin-left: 0.35em; }

/* =========================================================================
   DIFERENCIAIS — blocos em tom suave da marca, alternando verde e azul.
   O urucum fica de fora: a seção 2 reserva ele para uso pontual.
   ========================================================================= */

.dif-grid { display: grid; gap: var(--grid__gap-x); }
@media (min-width: 760px) { .dif-grid { grid-template-columns: repeat(2, 1fr); } }

.dif {
  background: var(--verde-claro);
  border-radius: var(--raio);
  padding: var(--gap--sm);
}
.dif:nth-child(2n) { background: var(--azul-claro); }
.dif h3 { font-size: var(--fs--h4); margin-bottom: var(--gap--xxs); }
.dif p { margin: 0; }

/* =========================================================================
   CITAÇÃO DE CONCEITO
   ========================================================================= */

.conceito p {
  font-size: var(--fs--h3);
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
  max-width: 30ch;
}
.conceito cite {
  display: block;
  margin-top: var(--gap--xs);
  font-style: normal;
  font-size: var(--fs--caption);
  opacity: 0.75;
}

/* =========================================================================
   CTA DE FECHO — centralizado, conforme a seção 6.3
   ========================================================================= */

.cta-fecho {
  max-width: var(--wrap--estreito);
  text-align: center;
}
.cta-fecho .eyebrow, .cta-fecho h2, .cta-fecho p { margin-left: auto; margin-right: auto; }
.cta-fecho h2 { max-width: 20ch; }

/* =========================================================================
   HERO DAS PÁGINAS INTERNAS — sem foto, só trilha, eyebrow, título e lead
   ========================================================================= */

.hero-interna { padding-bottom: var(--gap--lg); }
.hero-interna .hero-copy { max-width: var(--wrap--estreito); margin-bottom: 0; }
.hero-interna .lead { font-size: var(--fs--lead); margin-bottom: 0; }

/* Subtítulo dentro de uma seção já iniciada por h2 */
.sub { margin-top: var(--gap); }

/* =========================================================================
   CARDS SIMPLES (missão) E BLOCOS ELEVADOS

   Fundo --papel com sombra leve, em vez de --papel-2: assim o card continua
   visível tanto em seção clara quanto na alternada.
   ========================================================================= */

.cards, .equipe-grid, .post-grid {
  list-style: none;
  margin: var(--gap) 0 0;
  padding: 0;
  display: grid;
  gap: var(--grid__gap-x);
}
@media (min-width: 760px) {
  .cards, .equipe-grid { grid-template-columns: repeat(3, 1fr); }
  .post-grid { grid-template-columns: repeat(2, 1fr); }
}

.card, .equipe-item, .comparativo > div, .servico, .form-wrap, .post-card {
  background: var(--papel);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.card, .equipe-item, .comparativo > div, .servico, .form-wrap { padding: var(--gap--sm); }

.card-icone { width: 56px; height: auto; margin-bottom: var(--gap--xs); }
.card h3, .comparativo h3 { font-size: var(--fs--h4); margin-bottom: var(--gap--xxs); }
.card p, .comparativo p, .equipe-item p { margin: 0; }
.equipe-item h3 { font-size: var(--fs--h5); margin-bottom: var(--gap--xxs); }
.equipe-item p { font-size: var(--fs--caption); }

/* =========================================================================
   RÓTULOS PEQUENOS — numeração de serviço, eixo, marco, tag e termo de
   definição usam o mesmo tratamento do .eyebrow
   ========================================================================= */

.servico-num, .eixo-rotulo, .marco-data, .post-tag, .contato-dados dt {
  font-size: var(--fs--caption);
  font-weight: 700;
  letter-spacing: var(--ls--eyebrow);
  text-transform: uppercase;
  color: var(--azul);
}

/* =========================================================================
   VALORES — pílulas em tom suave
   ========================================================================= */

.valores {
  list-style: none;
  margin: var(--gap--xs) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap--xxs);
  max-width: none;
}
.valores li {
  font-size: var(--fs--caption);
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: var(--raio--pill);
  background: var(--verde-claro);
}
.valores li:nth-child(2n) { background: var(--azul-claro); }

/* =========================================================================
   LINHA DO TEMPO — trilho à esquerda com marcadores redondos
   ========================================================================= */

.linha-tempo {
  list-style: none;
  margin: var(--gap) 0 0;
  padding: 0 0 0 var(--gap--sm);
  border-left: var(--borda) solid var(--linha);
}
.marco { position: relative; padding-bottom: var(--gap--sm); }
.marco:last-child { padding-bottom: 0; }
/* o marcador centraliza sobre o trilho: recua o padding do <ol>, a espessura
   da borda e metade da própria largura */
.marco::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--gap--sm) - 7px);
  top: 0.35em;
  width: 12px;
  height: 12px;
  border-radius: var(--raio--pill);
  background: var(--azul);
}
.marco-data { display: block; margin-bottom: var(--gap--xxs); }
.marco h3 { font-size: var(--fs--h4); margin-bottom: var(--gap--xxs); }
.marco p { margin: 0; }

/* =========================================================================
   SERVIÇOS, FRENTES E EIXOS
   ========================================================================= */

.servicos-grid, .eixos {
  list-style: none;
  margin: var(--gap) 0 0;
  padding: 0;
  display: grid;
  gap: var(--gap--xs);
}
.servico, .eixo { display: grid; gap: var(--gap--xxs); }
.eixo { background: var(--papel-2); border-radius: var(--raio); padding: var(--gap--sm); }
@media (min-width: 760px) {
  .servico { grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; gap: var(--gap--xxs) var(--gap--sm); }
  .eixo { grid-template-columns: 8rem minmax(0, 1fr); gap: 0 var(--gap--sm); }
  .eixo-rotulo { grid-row: 1 / span 2; }
  .eixo h3, .eixo p { grid-column: 2; }
}
.servico h3, .eixo h3 { font-size: var(--fs--h4); margin: 0; }
.servico p, .eixo p { margin: 0; }
.servico p { font-size: var(--fs--caption); }

.frente { padding: var(--secao--pad-y) 0; }
.frente-cabecalho { max-width: var(--medida); margin-bottom: var(--gap); }
.frente-num {
  display: inline-block;
  font-size: var(--fs--caption);
  font-weight: 700;
  letter-spacing: var(--ls--eyebrow);
  text-transform: uppercase;
  padding: 0.4rem 1rem;
  border-radius: var(--raio--pill);
  background: var(--verde-claro);
  margin-bottom: var(--gap--xs);
}
.frente-tecnica .frente-num { background: var(--azul-claro); }

.media-band { display: grid; gap: var(--grid__gap-x); margin-top: var(--gap); }
@media (min-width: 800px) { .media-band { grid-template-columns: 1fr 1fr; } }

/* =========================================================================
   COMPARATIVO — os dois lados em tons suaves opostos. É o "detalhe de
   destaque por página" que a seção 2 autoriza para o urucum.
   ========================================================================= */

.comparativo { display: grid; gap: var(--grid__gap-x); margin: var(--gap) 0 0; }
@media (min-width: 760px) { .comparativo { grid-template-columns: 1fr 1fr; } }
.comparativo .col-aprendizagem { background: var(--verde-claro); box-shadow: none; }
.comparativo .col-direito { background: var(--urucum-claro); box-shadow: none; }

/* =========================================================================
   CONTEÚDO — cards de post e blocos de aviso
   ========================================================================= */

.post-card { overflow: hidden; display: flex; flex-direction: column; }
.post-card-foto { aspect-ratio: 4 / 3; overflow: hidden; }
.post-card-foto img { width: 100%; height: 100%; object-fit: cover; }
.post-card-body { padding: var(--gap--sm); display: flex; flex-direction: column; gap: var(--gap--xxs); }
.post-tag { align-self: flex-start; }
.post-card h3 { font-size: var(--fs--h4); margin: 0; max-width: none; }
.post-card h3 a:hover { color: var(--azul); }

/* O link do título tinha 32px de altura. Em vez de engordar só ele, a
   camada estendida faz o card inteiro virar área de clique — o alvo passa
   a ser o cartão todo, bem acima do mínimo. */
.post-card { position: relative; }
.post-card h3 a::after { content: ""; position: absolute; inset: 0; }
.post-card p { margin: 0; font-size: var(--fs--caption); }

.em-breve {
  background: var(--papel-2);
  border-radius: var(--raio);
  padding: var(--gap--sm);
  margin-top: var(--gap--xs);
}
.em-breve p { margin: 0; }

.aviso {
  background: var(--urucum-claro);
  border-radius: var(--raio);
  padding: var(--gap--xs) var(--gap--sm);
  font-size: var(--fs--caption);
  margin-top: var(--gap--xs);
}

/* =========================================================================
   FOTO EM DESTAQUE — faixa escura com a foto ao fundo

   A v2 usava o azul a 82% de opacidade e afirmava manter o contraste do
   CTA, o que não se sustentava: com transparência, a cor final depende da
   foto. Aqui a base é --preto sólido e é a IMAGEM que recebe opacidade, o
   que dá um piso de contraste calculável. Com a imagem a 35%, o pior caso
   (região branca da foto) resulta em cinza médio e mantém o texto branco
   acima de 4:1, para um texto que já é grande e em peso 700.
   ========================================================================= */

.foto-destaque {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--preto);
  color: var(--branco);
  display: flex;
  align-items: center;
  min-height: 20rem;
  padding: var(--gap--lg) 0;
}
.foto-destaque img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
  z-index: -1;
}
.foto-destaque p {
  font-size: var(--fs--h3);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  max-width: 28ch;
}
.foto-destaque cite {
  display: block;
  margin-top: var(--gap--xs);
  font-style: normal;
  font-size: var(--fs--caption);
}

/* =========================================================================
   CONTATO — dados e formulário
   ========================================================================= */

.contato-grid { display: grid; gap: var(--gap); }
@media (min-width: 900px) {
  .contato-grid { grid-template-columns: 1fr 1fr; gap: var(--grid__gap-x); align-items: start; }
}
.contato-dados { margin: var(--gap--sm) 0 0; }
.contato-dados > div {
  padding: var(--gap--xs) 0;
  border-top: var(--borda--fina) solid var(--linha);
  display: grid;
  gap: 0.15rem;
}
.contato-dados dd { margin: 0; }

.field { margin-bottom: var(--gap--xs); }
.field label {
  display: block;
  font-weight: 600;
  font-size: var(--fs--caption);
  margin-bottom: 0.35rem;
}
.field input, .field textarea, .field select {
  width: 100%;
  font-family: var(--fonte);
  font-size: var(--fs--p);
  line-height: 1.5;
  color: var(--preto);
  background: var(--papel);
  border: var(--borda--fina) solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 0.75rem 1.1rem;
  transition: border-color var(--transition-dur);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--azul); }
.field textarea { resize: vertical; }
/* o select nativo ignora o padding vertical; a altura vem do min-height.
   A seta do sistema é mantida: sem ela o campo se confunde com um input. */
.field select { min-height: var(--area-clique-min); cursor: pointer; }
.field [aria-invalid="true"] { border-color: var(--urucum); }

.erro {
  display: inline-block;
  margin: 0.35rem 0 0;
  font-size: var(--fs--caption);
  font-weight: 600;
  background: var(--urucum-claro);
  border-radius: var(--raio--pill);
  padding: 0.2rem 0.8rem;
}
.form-ok {
  margin: var(--gap--xs) 0 0;
  background: var(--verde-claro);
  border-radius: var(--raio);
  padding: var(--gap--xs) var(--gap--sm);
}
.form-nota { font-size: var(--fs--caption); margin: var(--gap--xs) 0 0; opacity: 0.75; }

/* =========================================================================
   PÁGINA 404
   ========================================================================= */

.pagina-404 {
  padding-top: calc(var(--header-h) + var(--gap--lg));
  padding-bottom: var(--gap--xl);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--gap--xs); margin-top: var(--gap--sm); }

/* =========================================================================
   FAIXA DE FOTO AUTÔNOMA
   ========================================================================= */

.section-foto { padding: var(--gap) 0; }
.foto-padrao img { border-radius: var(--raio); width: 100%; }
.foto-padrao figcaption {
  margin-top: var(--gap--xs);
  font-size: var(--fs--caption);
  opacity: 0.75;
  max-width: var(--medida--lead);
}

/* Botão que ocupa a largura do contêiner (envio do formulário) */
.btn-block { width: 100%; }