/* ============================================================
   Metalis — Site institucional
   Design tokens copiados integralmente de docs/design-spec.md
   ============================================================ */

:root {
  /* Cores */
  --cor-primaria: #0057B8;        /* azul derivado da referência (ScrapAd ~#0066CC, escurecido p/ contraste) */
  --cor-primaria-hover: #004494;  /* ~13% mais escura */
  --cor-primaria-suave: #E8F0FB;  /* fundo de badges, ícones, aba inativa, faixas destacadas */
  --cor-fundo: #FFFFFF;
  --cor-superficie: #F4F7FB;      /* cards, painéis, seções alternadas */
  --cor-texto: #1E2A3A;
  --cor-texto-suave: #4A5A6A;
  --cor-texto-invertido: #FFFFFF; /* texto sobre azul/verde escuro */
  --cor-borda: #D7DEE8;
  --cor-erro: #B91C1C;
  --cor-erro-suave: #FDECEC;      /* fundo da mensagem de erro */
  --cor-sucesso: #1B7A3D;
  --cor-sucesso-suave: #E9F6EE;   /* fundo da mensagem de sucesso */
  --cor-whatsapp: #075E54;        /* verde-escuro WhatsApp (contraste 7.6:1 com branco) */
  --cor-whatsapp-hover: #04453E;
  --cor-rodape: #0B2545;          /* fundo do footer (azul quase-preto) */
  --cor-fab: #2F4465;             /* v2.2: navy oficial do logo — FAB WhatsApp (§10.4) */
  --cor-fab-hover: #283A56;       /* ~15% mais escuro que o navy */

  /* Espaçamento (escala fixa base-8) */
  --esp-1: 8px;  --esp-2: 16px;  --esp-3: 24px;
  --esp-4: 32px; --esp-6: 48px;  --esp-8: 64px;

  /* Espaçamento fluido entre seções de página */
  --esp-secao: clamp(var(--esp-6), 8vw, var(--esp-8));

  /* Bordas e sombras */
  --raio: 8px;
  --raio-pill: 999px;
  --sombra-card: 0 1px 3px rgba(0,0,0,0.1);
  --sombra-flutuante: 0 4px 12px rgba(0,0,0,0.2); /* FAB WhatsApp e menu mobile aberto */

  /* Transições */
  --transicao: 150ms ease;

  /* Layout */
  --container-max: 1200px;
  --leitura-max: 640px;   /* blocos de texto corrido (~70 caracteres) */
  --altura-header: 72px; /* v2.2 (§10.2): era 64px no v1 */

  /* Carrossel / banners (v2) */
  --overlay-banner: rgba(11, 37, 69, 0.65); /* cor do rodapé a 65% — garante 4.5:1 p/ texto branco */
  --altura-banner: clamp(440px, calc(100vh - var(--altura-header)), 680px);
  --transicao-slide: 300ms ease;            /* só para a troca de slides */

  /* Lightbox (v2) */
  --overlay-lightbox: rgba(11, 37, 69, 0.92);

  /* Mini-carrossel do Sobre (v2.2 §10.5) */
  --duracao-minicarrossel: 5000ms; /* rotação do crossfade */
}

/* Unidade svh quando suportada (fallback acima usa vh, conforme design-spec-v2 §2.1) */
@supports (height: 100svh) {
  :root { --altura-banner: clamp(440px, calc(100svh - var(--altura-header)), 680px); }
}

/* ===== Reset e base ===== */

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--cor-texto);
  background-color: var(--cor-fundo);
}

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

h1, h2, h3, h4 {
  line-height: 1.2;
  font-weight: 700;
  overflow-wrap: break-word;
}

h1 { font-size: clamp(25px, 4vw + 8px, 31px); }
h2 { font-size: clamp(22px, 3vw + 8px, 25px); }
h3 { font-size: 20px; }
h4 { font-size: 16px; }

/* Restrito ao <main>: os links do footer são brancos e sem sublinhado (v2 §6) */
main p a,
main li a:not([class]) {
  color: var(--cor-primaria);
  text-decoration: underline;
}

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--esp-2);
}

@media (min-width: 480px) {
  .container { padding-inline: var(--esp-3); }
}

.secao { padding-block: var(--esp-secao); }
.secao--superficie { background-color: var(--cor-superficie); }

.secao__subtitulo {
  color: var(--cor-texto-suave);
  max-width: var(--leitura-max);
  margin-top: var(--esp-1);
}

.texto-leitura { max-width: var(--leitura-max); }

.texto-leitura h2 + p,
.texto-leitura h3 + p { margin-top: var(--esp-2); }

/* Texto presente só para leitores de tela */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ===== Skip link ===== */

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  background-color: var(--cor-primaria);
  color: var(--cor-texto-invertido);
  padding: var(--esp-1) var(--esp-2);
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--cor-primaria);
  outline-offset: 2px;
}

/* ===== Header ===== */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--cor-fundo);
  border-bottom: 1px solid var(--cor-borda);
  height: var(--altura-header);
}

.header__conteudo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--altura-header);
}

.logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 10px; /* logo 52px + 2x10px de respiro = var(--altura-header) (§10.2) */
  color: inherit;
  text-decoration: none;
}

.logo:hover,
.logo:visited {
  color: inherit;
  text-decoration: none;
}

.logo img {
  height: 52px;
  width: auto;
}

.logo:focus-visible {
  outline: 2px solid var(--cor-primaria);
  outline-offset: 2px;
}

.footer .logo { padding-block: 0; }

.footer .logo img { height: 56px; }

.footer .logo:focus-visible { outline-color: #FFFFFF; }

/* Navegação desktop */
.nav__lista {
  display: none;
  list-style: none;
  gap: var(--esp-1);
}

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--esp-1) var(--esp-2);
  font-size: 16px;
  font-weight: 500;
  color: var(--cor-texto);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color var(--transicao);
}

.nav__link:hover { color: var(--cor-primaria); }
.nav__link:active { color: var(--cor-primaria-hover); }

.nav__link:focus-visible {
  outline: 2px solid var(--cor-primaria);
  outline-offset: 2px;
}

/* Item ativo do scroll-spy (cor + barra: indicador não-cromático) */
.nav__link[aria-current] {
  color: var(--cor-primaria);
  border-bottom-color: var(--cor-primaria);
}

/* Botão hambúrguer */
.nav__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--cor-texto);
}

.nav__botao:focus-visible {
  outline: 2px solid var(--cor-primaria);
  outline-offset: 2px;
}

.nav__botao .icone-fechar { display: none; }
.nav__botao[aria-expanded="true"] .icone-menu { display: none; }
.nav__botao[aria-expanded="true"] .icone-fechar { display: block; }

/* Painel do menu mobile */
.nav__painel {
  display: none;
  position: absolute;
  top: var(--altura-header);
  left: 0;
  right: 0;
  background-color: var(--cor-fundo);
  box-shadow: var(--sombra-flutuante);
  /* §10.2: nunca estoura a viewport; svh sobrescreve vh onde suportado */
  max-height: calc(100vh - var(--altura-header));
  max-height: calc(100svh - var(--altura-header));
  overflow-y: auto;
}

.nav__painel--aberto { display: block; }

.nav__painel .nav__lista {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.nav__painel .nav__link {
  display: flex;
  width: 100%;
  min-height: 48px;
  padding: var(--esp-2) var(--esp-3);
  border-bottom: 1px solid var(--cor-borda);
}

.nav__painel .nav__link[aria-current] {
  border-left: 3px solid var(--cor-primaria);
  border-bottom-color: var(--cor-borda);
}

/* v2: com 7 itens, o menu completo só aparece ≥1024px (design-spec-v2 §1.1) */
@media (min-width: 1024px) {
  .nav > .nav__lista { display: flex; }
  .nav__botao,
  .nav__painel { display: none; }
}

/* ===== Botões ===== */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-1);
  min-height: 48px;
  padding: 12px var(--esp-3);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  border: none;
  border-radius: var(--raio);
  cursor: pointer;
  transition: background-color var(--transicao), color var(--transicao);
}

.botao:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.botao--primario {
  background-color: var(--cor-primaria);
  color: var(--cor-texto-invertido);
}

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

.botao--primario:focus-visible {
  outline: 2px solid var(--cor-primaria);
  outline-offset: 2px;
}

.botao--primario:active:not(:disabled) {
  background-color: var(--cor-primaria-hover);
  transform: translateY(1px);
}

.botao--secundario {
  background-color: transparent;
  color: var(--cor-primaria);
  border: 2px solid var(--cor-primaria);
}

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

.botao--secundario:focus-visible {
  outline: 2px solid var(--cor-primaria);
  outline-offset: 2px;
}

.botao--secundario:active:not(:disabled) {
  background-color: var(--cor-primaria-suave);
  transform: translateY(1px);
}

.botao--branco {
  background-color: #FFFFFF;
  color: var(--cor-primaria);
}

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

.botao--branco:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

.botao--whatsapp {
  background-color: var(--cor-whatsapp);
  color: var(--cor-texto-invertido);
}

.botao--whatsapp:hover:not(:disabled) { background-color: var(--cor-whatsapp-hover); }

.botao--whatsapp:focus-visible {
  outline: 2px solid var(--cor-whatsapp);
  outline-offset: 2px;
}

.botao--whatsapp:active:not(:disabled) {
  background-color: var(--cor-whatsapp-hover);
  transform: translateY(1px);
}

@media (max-width: 479px) {
  .form__envio .botao { width: 100%; }
}

/* ===== Grades de cards ===== */

/* min(280px, 100%): o mínimo de 280px vale onde couber, mas o track encolhe
   em viewports muito estreitos (ex.: 305px com barra de rolagem clássica) */
.grade-materiais {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--esp-2);
  margin-top: var(--esp-4);
}

.grade-depoimentos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--esp-2);
  margin-top: var(--esp-4);
}

.grade-diferenciais {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--esp-2);
  margin-top: var(--esp-4);
}

.centralizado {
  display: flex;
  justify-content: center;
  margin-top: var(--esp-4);
}

/* ===== Card de material ===== */

.card-material {
  background-color: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: var(--esp-3);
  box-shadow: var(--sombra-card);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-2);
}

.card-material__icone {
  width: 96px;
  height: 96px;
  border-radius: var(--raio-pill);
  background-color: var(--cor-primaria-suave);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cor-primaria);
}

.card-material__icone svg {
  width: 64px;
  height: 64px;
}

.card-material__descricao { color: var(--cor-texto-suave); }

/* ===== Card de depoimento ===== */

.card-depoimento {
  background-color: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-top: 4px solid var(--cor-primaria);
  border-radius: var(--raio);
  padding: var(--esp-3);
  box-shadow: var(--sombra-card);
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}

.card-depoimento__aspas { color: var(--cor-primaria); }

.card-depoimento__texto { flex-grow: 1; }

.card-depoimento__nome { font-weight: 500; }

.card-depoimento__origem {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--cor-texto-suave);
}

/* ===== Como funciona (passos — v1 §4.1.5, reposta na v2.1) ===== */

.passos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--esp-3);
  margin-top: var(--esp-4);
  list-style: none;
}

.passo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-2);
}

.passo__numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--raio-pill);
  background-color: var(--cor-primaria-suave);
  color: var(--cor-primaria);
  font-size: 20px;
  font-weight: 700;
}

.passo__descricao { color: var(--cor-texto-suave); }

/* Linha decorativa entre os círculos: só no desktop, quando os 4 passos
   ficam lado a lado (some quando a grade auto-fit empilha) */
.passo__linha { display: none; }

@media (min-width: 1024px) {
  .passo__linha {
    display: block;
    position: absolute;
    top: 23px; /* centro do círculo de 48px, linha de 2px */
    left: calc(48px + var(--esp-1));
    right: calc(-1 * var(--esp-2)); /* avança pelo gap até 8px antes do próximo círculo */
    height: 2px;
    background-color: var(--cor-borda);
  }
}

/* ===== CTA final ===== */

.cta-final {
  background-color: var(--cor-primaria);
  color: var(--cor-texto-invertido);
  text-align: center;
  padding-block: var(--esp-6);
}

.cta-final__paragrafo {
  max-width: var(--leitura-max);
  margin-inline: auto;
  margin-block: var(--esp-2) var(--esp-3);
}

@media (min-width: 768px) {
  .cta-final { padding-block: var(--esp-8); }
}

/* ===== Sobre nós ===== */

.abertura__grade {
  display: grid;
  /* minmax(0, ...) impede que o min-content da ilustração alargue a faixa além do container */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-4);
  align-items: center;
}

.abertura__texto p + p { margin-top: var(--esp-2); }

.abertura__texto h2 { margin-bottom: var(--esp-3); }

.abertura__ilustracao {
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .abertura__grade { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .abertura__ilustracao { margin-inline: 0; }
}

/* ===== Mini-carrossel de fotos do Sobre (v2.2 §10.5) ===== */

.minicarrossel {
  width: 100%;
  max-width: 480px;
  margin-inline: auto; /* mobile: centralizado após o texto da história */
}

.minicarrossel__moldura {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--raio);
  box-shadow: var(--sombra-card);
}

.minicarrossel__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .minicarrossel__foto { transition: opacity var(--transicao-slide); } /* crossfade */
}

.minicarrossel__foto--ativa { opacity: 1; }

/* Indicadores decorativos (não interativos: aria-hidden, sem alvo de 44px) */
.minicarrossel__indicadores {
  display: flex;
  justify-content: center;
  gap: var(--esp-1);
  margin-top: var(--esp-1);
}

.minicarrossel__ponto {
  width: 8px;
  height: 8px;
  border-radius: var(--raio-pill);
  background-color: var(--cor-borda);
  transition: width var(--transicao), background-color var(--transicao);
}

/* Ativo: pílula 16x8 na cor primária (forma + cor) */
.minicarrossel__ponto--ativo {
  width: 16px;
  background-color: var(--cor-primaria);
}

/* Reduced-motion: só a primeira foto, estática, sem indicadores */
@media (prefers-reduced-motion: reduce) {
  .minicarrossel__indicadores { display: none; }
}

@media (min-width: 1024px) {
  .minicarrossel { margin-inline: 0; } /* colunas 8-12 da abertura, como a ilustração */
}

.card-diferencial {
  background-color: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: var(--esp-3);
}

.card-diferencial__icone {
  color: var(--cor-primaria);
  margin-bottom: var(--esp-2);
}

/* h4 na landing (sub-bloco de #sobre) com o mesmo visual de título de card */
.card-diferencial h4 {
  font-size: 20px;
  margin-bottom: var(--esp-1);
}

.card-diferencial p { color: var(--cor-texto-suave); }

.missao-visao {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-2);
  margin-top: var(--esp-4);
}

.missao-visao__card {
  background-color: var(--cor-primaria-suave);
  border-radius: var(--raio);
  padding: var(--esp-4);
}

.missao-visao__card h4 {
  color: var(--cor-primaria);
  margin-bottom: var(--esp-1);
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .missao-visao { grid-template-columns: 1fr 1fr; }
}

.valores {
  list-style: none;
  max-width: 720px;
  margin-top: var(--esp-4);
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}

.valores__item {
  display: flex;
  gap: var(--esp-2);
  align-items: flex-start;
}

.valores__check {
  flex-shrink: 0;
  color: var(--cor-sucesso);
  margin-top: 2px;
}

.valores__nome { font-weight: 500; }

.valores__descricao { color: var(--cor-texto-suave); }

/* ===== Materiais — tabela de preços ===== */

.tabela-precos__legenda {
  font-size: 13px;
  color: var(--cor-texto-suave);
  margin-top: var(--esp-1);
  margin-bottom: var(--esp-3);
}

.tabela-precos__wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tabela-precos__wrapper:focus-visible {
  outline: 2px solid var(--cor-primaria);
  outline-offset: 2px;
}

.tabela-precos {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
}

.tabela-precos th {
  background-color: var(--cor-primaria-suave);
  color: var(--cor-primaria);
  font-weight: 500;
  text-align: left;
}

.tabela-precos th,
.tabela-precos td {
  padding: var(--esp-2);
  border: 1px solid var(--cor-borda);
}

.tabela-precos tbody tr:nth-child(odd) { background-color: var(--cor-fundo); }
.tabela-precos tbody tr:nth-child(even) { background-color: var(--cor-superficie); }

@media (min-width: 768px) {
  .tabela-precos { min-width: 0; }
}

/* ===== Abas (seção Contato) ===== */

.abas {
  display: flex;
  border-bottom: 2px solid var(--cor-borda);
  margin-block: var(--esp-4);
}

.abas__aba {
  min-height: 48px;
  padding: var(--esp-2) var(--esp-3);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--cor-texto-suave);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  overflow-wrap: break-word;
  transition: color var(--transicao), background-color var(--transicao);
}

.abas__aba:hover {
  color: var(--cor-primaria);
  background-color: var(--cor-primaria-suave);
}

.abas__aba:focus-visible {
  outline: 2px solid var(--cor-primaria);
  outline-offset: 2px;
}

.abas__aba:active { background-color: var(--cor-primaria-suave); }

.abas__aba[aria-selected="true"] {
  color: var(--cor-primaria);
  font-weight: 700;
  border-bottom-color: var(--cor-primaria);
}

@media (max-width: 479px) {
  .abas__aba {
    flex: 1 1 50%;
    text-align: center;
    padding: var(--esp-2) var(--esp-1);
  }
}

.painel[hidden] { display: none; }

.painel__grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-4);
}

/* Itens de grid não encolhem abaixo do conteúdo por padrão (min-width: auto):
   a largura intrínseca de 300px do iframe do mapa travava o track e estourava
   a página em viewports estreitos com barra de rolagem clássica (~305px úteis) */
.painel__grade > * { min-width: 0; }

.painel__intro {
  color: var(--cor-texto-suave);
  max-width: var(--leitura-max);
  margin-bottom: var(--esp-3);
}

@media (min-width: 1024px) {
  .painel__grade {
    grid-template-columns: 7fr 5fr;
    align-items: start;
  }
}

/* ===== Card de dados de contato ===== */

.dados-contato {
  background-color: var(--cor-superficie);
  border-radius: var(--raio);
  padding: var(--esp-3);
}

.dados-contato__lista {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.dados-contato__item {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: 44px;
}

.dados-contato__icone {
  flex-shrink: 0;
  color: var(--cor-primaria);
}

.dados-contato__item a {
  color: var(--cor-primaria);
  text-decoration: underline;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  /* o e-mail é uma palavra única: sem isto o item flex não encolhe
     e estoura a página em viewports muito estreitos */
  min-width: 0;
  overflow-wrap: anywhere;
}

.dados-contato__item a:focus-visible {
  outline: 2px solid var(--cor-primaria);
  outline-offset: 2px;
}

/* ===== Mapa ===== */

.mapa {
  margin-top: var(--esp-3);
  border-radius: var(--raio);
  overflow: hidden;
  border: 1px solid var(--cor-borda);
}

.mapa iframe {
  width: 100%;
  height: 320px;
  border: 0;
  display: block;
}

.mapa-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--esp-1);
  color: var(--cor-primaria);
  text-decoration: underline;
}

.mapa-link:focus-visible {
  outline: 2px solid var(--cor-primaria);
  outline-offset: 2px;
}

/* ===== Formulários ===== */

.form__obrigatorios {
  font-size: 13px;
  color: var(--cor-texto-suave);
  margin-bottom: var(--esp-3);
}

.form__campo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  margin-bottom: var(--esp-3);
}

.form__campo label {
  font-size: 16px;
  font-weight: 500;
  color: var(--cor-texto);
}

.form__campo input,
.form__campo select,
.form__campo textarea {
  font-family: inherit;
  font-size: 16px;
  color: var(--cor-texto);
  min-height: 48px;
  padding: 12px var(--esp-2);
  background-color: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  transition: border-color var(--transicao), box-shadow var(--transicao);
  width: 100%;
}

.form__campo textarea { resize: vertical; }

.form__campo input::placeholder,
.form__campo textarea::placeholder { color: var(--cor-texto-suave); }

.form__campo input:hover,
.form__campo select:hover,
.form__campo textarea:hover { border-color: var(--cor-texto-suave); }

.form__campo input:focus-visible,
.form__campo select:focus-visible,
.form__campo textarea:focus-visible {
  border-color: var(--cor-primaria);
  outline: 2px solid var(--cor-primaria);
  outline-offset: 2px;
}

.form__campo input[aria-invalid="true"],
.form__campo select[aria-invalid="true"] {
  border: 2px solid var(--cor-erro);
}

.form__campo input:disabled,
.form__campo select:disabled,
.form__campo textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--cor-superficie);
}

/* Select com seta customizada */
.form__campo select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A5A6A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--esp-2) center;
  padding-right: var(--esp-6);
}

.form__erro {
  display: none;
  align-items: center;
  gap: var(--esp-1);
  font-size: 13px;
  color: var(--cor-erro);
}

.form__erro--visivel { display: flex; }

.form__erro svg { flex-shrink: 0; }

/* Quantidade + unidade na mesma linha (≥480px) */
.form__quantidade {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-1);
}

@media (min-width: 480px) {
  .form__quantidade { grid-template-columns: 2fr 1fr; }
}

/* Mensagem de sucesso */
.form__sucesso {
  display: none;
  align-items: flex-start;
  gap: var(--esp-1);
  background-color: var(--cor-sucesso-suave);
  border: 1px solid var(--cor-sucesso);
  border-radius: var(--raio);
  padding: var(--esp-2);
  margin-bottom: var(--esp-3);
  color: var(--cor-texto);
}

.form__sucesso--visivel { display: flex; }

.form__sucesso svg {
  flex-shrink: 0;
  color: var(--cor-sucesso);
  margin-top: 2px;
}

/* Botões de envio */
.form__envio {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}

@media (min-width: 480px) {
  .form__envio { flex-direction: row; }
}

/* Reserva de espaço para o FAB não cobrir os botões de envio */
.pagina-formularios { padding-bottom: var(--esp-8); }

/* ===== FAQ ===== */

.faq {
  max-width: 720px;
  margin-top: var(--esp-4);
}

.faq__item { border-bottom: 1px solid var(--cor-borda); }

.faq__pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2);
  min-height: 48px;
  padding: var(--esp-2);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.faq__pergunta::-webkit-details-marker { display: none; }

.faq__pergunta:focus-visible {
  outline: 2px solid var(--cor-primaria);
  outline-offset: 2px;
}

.faq__icone {
  flex-shrink: 0;
  color: var(--cor-primaria);
  transition: transform var(--transicao);
}

.faq__item[open] .faq__icone { transform: rotate(45deg); }

.faq__resposta {
  padding: 0 var(--esp-2) var(--esp-2);
  color: var(--cor-texto-suave);
}

/* ===== Footer ===== */

.footer {
  background-color: var(--cor-rodape);
  color: var(--cor-texto-invertido);
  padding-block: var(--esp-6);
}

.footer__grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-4);
}

.footer__slogan {
  color: rgba(255,255,255,0.75);
  margin-top: var(--esp-2);
}

.footer h4 { margin-bottom: var(--esp-2); }

.footer__lista {
  list-style: none;
  display: flex;
  flex-direction: column;
}

/* Pedido do cliente (v2): links brancos, sem NENHUM efeito hover; foco visível mantido */
.footer__lista a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #FFFFFF;
  text-decoration: none;
  transition: none;
}

.footer__lista a:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

.footer__endereco {
  font-style: normal;
  display: flex;
  align-items: center;
  min-height: 44px;
}

.footer__linha-final {
  border-top: 1px solid rgba(255,255,255,0.2);
  margin-top: var(--esp-4);
  padding-top: var(--esp-3);
  font-size: 13px;
  color: rgba(255,255,255,0.75);
}

@media (min-width: 768px) {
  .footer__grade { grid-template-columns: repeat(3, 1fr); }
}

/* ===== FAB WhatsApp (v2.2 §10.4: navy do logo; formulários seguem verdes) ===== */

.fab-whatsapp {
  position: fixed;
  right: var(--esp-2);
  bottom: var(--esp-2);
  z-index: 90;
  width: 56px;
  height: 56px;
  border-radius: var(--raio-pill);
  background-color: var(--cor-fab);
  color: var(--cor-texto-invertido);
  box-shadow: var(--sombra-flutuante);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transicao), transform var(--transicao);
}

.fab-whatsapp svg {
  width: 28px;
  height: 28px;
}

.fab-whatsapp:hover {
  background-color: var(--cor-fab-hover);
  transform: scale(1.05);
}

.fab-whatsapp:focus-visible {
  outline: 2px solid var(--cor-fab);
  outline-offset: 2px;
}

.fab-whatsapp:active {
  background-color: var(--cor-fab-hover);
  transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  .fab-whatsapp,
  .fab-whatsapp:hover,
  .fab-whatsapp:active { transform: none; }
}

/* ============================================================
   v2 — Landing page (design-spec-v2.md)
   ============================================================ */

/* ===== Seções-âncora ===== */

.ancora {
  scroll-margin-top: calc(var(--altura-header) + var(--esp-1));
  /* outline permitido aqui: a seção não é interativa por teclado (adendo §1.4);
     recebe apenas foco programático ao navegar pelo menu */
  outline: none;
}

.secao--sem-base { padding-bottom: 0; }

/* Sub-blocos dentro de #sobre e o sub-bloco #missao */
.sub-bloco { margin-top: var(--esp-6); }

.secao--missao { padding-block: var(--esp-6) var(--esp-secao); }

/* ===== Carrossel hero (#inicio) ===== */

.carrossel {
  position: relative;
  height: var(--altura-banner);
  overflow: hidden;
  background-color: var(--cor-rodape);
}

.carrossel__trilho {
  display: flex;
  height: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .carrossel__trilho { transition: transform var(--transicao-slide); }
}

.carrossel__slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  align-items: center;
}

.carrossel__midia {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Camada de escurecimento obrigatória nos 3 slides (contraste >=4.5:1) */
.carrossel__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--overlay-banner);
  pointer-events: none; /* deixa os controles nativos do vídeo acessíveis em reduced-motion */
}

.carrossel__conteudo {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-3);
}

.carrossel__titulo {
  font-size: clamp(28px, 5vw + 8px, 39px);
  line-height: 1.2;
  color: #FFFFFF;
  max-width: 720px;
}

.carrossel__apoio {
  color: #FFFFFF;
  max-width: 720px;
}

@media (max-width: 479px) {
  .carrossel__conteudo .botao { width: 100%; }
}

/* Controles (todos >=44x44px, brancos sobre o banner) */
.carrossel__controle {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  color: #FFFFFF;
  background-color: var(--overlay-banner);
  border-radius: var(--raio-pill);
  transition: background-color var(--transicao);
}

.carrossel__controle:hover { background-color: var(--cor-rodape); }

.carrossel__controle:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

.carrossel__controle:active { transform: scale(0.97); }

.carrossel__pausa {
  width: 44px;
  height: 44px;
  right: var(--esp-2);
  bottom: var(--esp-2);
}

.carrossel__pausa .icone-play { display: none; }
.carrossel__pausa--pausado .icone-pausa { display: none; }
.carrossel__pausa--pausado .icone-play { display: block; }

.carrossel__seta {
  width: 48px;
  height: 48px;
  top: 50%;
  transform: translateY(-50%);
}

.carrossel__seta:active { transform: translateY(-50%) scale(0.97); }

.carrossel__seta--anterior { left: var(--esp-2); }
.carrossel__seta--proxima { right: var(--esp-2); }

.carrossel__indicadores {
  position: absolute;
  z-index: 3;
  bottom: var(--esp-2);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.carrossel__indicador {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--raio-pill);
  cursor: pointer;
}

.carrossel__indicador::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: var(--raio-pill);
  background-color: rgba(255, 255, 255, 0.55);
  transition: width var(--transicao), background-color var(--transicao);
}

/* Ativo: ponto vira pílula branca (forma + cor = indicador não-cromático) */
.carrossel__indicador[aria-current="true"]::before {
  width: 24px;
  background-color: #FFFFFF;
}

.carrossel__indicador:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

/* ===== Seção Produtos (#produtos) — acordeão ===== */

.produtos-lista { margin-top: var(--esp-4); }

.produto {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background-color: var(--cor-fundo);
  box-shadow: var(--sombra-card);
  margin-bottom: var(--esp-2);
}

.produto__resumo {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: 56px;
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--raio);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--transicao);
}

.produto__resumo::-webkit-details-marker { display: none; }

.produto__resumo:hover { background-color: var(--cor-primaria-suave); }

.produto__resumo:hover .produto__titulo { color: var(--cor-primaria); }

.produto__resumo:focus-visible {
  outline: 2px solid var(--cor-primaria);
  outline-offset: 2px;
}

.produto__icone {
  flex-shrink: 0;
  color: var(--cor-primaria);
}

.produto__titulo {
  font-size: 20px;
  flex-grow: 1;
}

.produto__chevron {
  flex-shrink: 0;
  color: var(--cor-texto-suave);
  transition: transform var(--transicao);
}

/* Estado aberto: cor + chevron girado (estado não só por cor) */
.produto[open] .produto__titulo { color: var(--cor-primaria); }
.produto[open] .produto__chevron { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .produto__chevron { transition: none; }
}

.produto__painel { padding: 0 var(--esp-3) var(--esp-3); }

.produto__descricao { max-width: var(--leitura-max); }

.produto__descricao + .produto__descricao { margin-top: var(--esp-2); }

.produto__rotulo {
  margin-top: var(--esp-3);
  margin-bottom: var(--esp-1);
}

.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1);
}

.chips li {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px var(--esp-2);
  background-color: var(--cor-primaria-suave);
  color: var(--cor-primaria);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--raio-pill);
}

.nota-comercial {
  margin-top: var(--esp-3);
  background-color: var(--cor-primaria-suave);
  border-left: 3px solid var(--cor-primaria);
  border-radius: var(--raio);
  padding: var(--esp-2);
}

.nota-comercial strong { font-weight: 500; }

.produto__grade {
  margin-top: var(--esp-3);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--esp-1);
}

.produto__ilustracao {
  margin-top: var(--esp-3);
  width: 100%;
  max-width: 320px;
}

/* ===== Miniaturas com lightbox (Produtos + Estrutura) ===== */

.miniatura {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--raio);
  transition: box-shadow var(--transicao), transform var(--transicao);
}

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

.miniatura:hover {
  box-shadow: var(--sombra-flutuante);
  transform: scale(1.02);
}

.miniatura:focus-visible {
  outline: 2px solid var(--cor-primaria);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .miniatura { transition: none; }
  .miniatura:hover { transform: none; }
}

/* ===== Seção Estrutura (#estrutura) ===== */

.galeria-grupo { margin-top: var(--esp-4); }

.galeria {
  margin-top: var(--esp-2);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--esp-2);
}

.galeria .miniatura img { box-shadow: var(--sombra-card); }

/* ===== Lightbox (dialog) ===== */

.lightbox {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;
  padding: var(--esp-2);
  border: none;
  background: transparent;
}

.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox::backdrop { background: var(--overlay-lightbox); }

.lightbox__figura {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-2);
  margin: 0;
}

.lightbox__imagem {
  max-width: min(90vw, 1100px);
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--raio);
}

.lightbox__legenda {
  font-size: 13px;
  color: #FFFFFF;
  text-align: center;
}

.lightbox__botao {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: none;
  cursor: pointer;
  color: #FFFFFF;
  background-color: var(--overlay-banner);
  border-radius: var(--raio-pill);
  transition: background-color var(--transicao);
}

.lightbox__botao:hover { background-color: var(--cor-rodape); }

.lightbox__botao:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

.lightbox__botao:active { transform: scale(0.97); }

.lightbox__fechar {
  top: var(--esp-2);
  right: var(--esp-2);
}

.lightbox__anterior,
.lightbox__proxima {
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__anterior:active,
.lightbox__proxima:active { transform: translateY(-50%) scale(0.97); }

.lightbox__anterior { left: var(--esp-2); }
.lightbox__proxima { right: var(--esp-2); }