/* ============================================================
   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 */
  --cor-titulo: #2F4465;          /* v2.5 (§14.0): títulos de seção — navy do logo; token
                                     separado de --cor-fab de propósito (um não arrasta o outro) */

  /* 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); /* ≥768px; <768px recalibrado abaixo (v2.7.1 §19.1) */
  --transicao-slide: 300ms ease;            /* só para a troca de slides */

  /* Hero — overlay único radial (v2.6.1 §17.1; substitui o véu+scrim dos §15/§16.1).
     Centro 3% FIXADO pelo cliente — não alterar; borda ajustável só em 0.05–0.10 */
  --overlay-radial: radial-gradient(ellipse at center,
      rgba(11, 37, 69, 0.03) 0%,
      rgba(11, 37, 69, 0.08) 100%);
  --overlay-scrim: rgba(11, 37, 69, 0.65); /* v2.6.1: usado SOMENTE no halo de foco dos controles do hero (§15.5) */

  /* Hero — sombra de texto (v2.6.1 §17.3): sustenta a legibilidade do título e
     apoio no lugar do scrim; se enfraquecer com mídia nova, subir alfas das
     camadas 2–3 em até +0.1 (nunca mexer no centro do radial) */
  --sombra-texto-hero:
      0 1px 2px rgba(11, 37, 69, 0.95),
      0 2px 6px rgba(11, 37, 69, 0.70),
      0 4px 16px rgba(11, 37, 69, 0.45);

  /* 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 */

  /* Mini-carrossel — zoom Ken Burns (v2.3 §11.0) */
  --duracao-kenburns: 7000ms;  /* > --duracao-minicarrossel: o zoom nunca termina antes da troca */
  --escala-kenburns: 1.08;     /* escala máxima do zoom */

  /* Setas suaves do mini-carrossel (v2.3.1 §12.0) */
  --fundo-seta-mini: rgba(11, 37, 69, 0.5);        /* navy do rodapé a 50% — mais leve que --overlay-banner (0.65); PISO: nunca abaixo de 0.5 (contraste §12.3) */
  --fundo-seta-mini-hover: rgba(11, 37, 69, 0.7);  /* hover = só aumento de opacidade do fundo */
  --sombra-icone-seta: drop-shadow(0 1px 2px rgba(11, 37, 69, 0.5)); /* segurança de legibilidade do chevron sobre fotos claras */
}

/* 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); }
}

/* Hero <768px (V2.8 §21.1): banner alto o bastante para as setas de 48px a
   50% NUNCA cruzarem o texto ancorado embaixo — H ≥ 2·pilha + 2·(pb 104 + 32);
   pior pilha estressada 167,4px → piso 608px (múltiplo de 8). Teto 680px = teto
   do desktop (sem salto em 767→768px). Trade-off aceito (decisoes.md V2.8):
   cena visível cai a ~30–36%. Sem svh (a altura não reage à barra de URL) e
   PROIBIDO cap por viewport (100svh−72 derrubaria H<608 e as setas cruzariam
   o texto). DEPOIS do @supports acima para vencer na cascata (<768px). */
@media (max-width: 767.98px) {
  :root { --altura-banner: clamp(608px, 160vw, 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; }

/* Títulos de seção com ícone (v2.5, design-spec-v2 §14.3) — escala, peso 700,
   line-height 1.2 e overflow-wrap do bloco acima: inalterados */
h2.titulo-secao,
h1.titulo-secao {
  color: var(--cor-titulo);
  display: flex;
  align-items: flex-start; /* NUNCA center: ícone preso à PRIMEIRA linha na quebra */
  gap: var(--esp-1);
}

.titulo-secao > svg {
  flex-shrink: 0;
  /* centraliza o ícone de 28px na PRIMEIRA linha: (1em × 1.2 − 28px) / 2 */
  margin-top: calc(0.6em - 14px);
}

/* 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); }

/* V2.8 (§21.9): abertura do #sobre com ÁREAS — no mobile/tablet (<1024px) o
   botão "Saiba mais" desce para baixo do mini-carrossel (resumo → carrossel →
   botão, DOM na mesma ordem = foco/leitura corretos); ≥1024px ele volta sob o
   resumo na coluna esquerda. Modificador para não afetar o #ambiental, que
   compartilha .abertura__grade */
.abertura__grade--sobre {
  grid-template-areas: "texto" "carrossel" "botao";
  row-gap: var(--esp-3); /* 24px entre resumo→carrossel e carrossel→botão */
  align-items: start;
}

.abertura__grade--sobre .abertura__texto { grid-area: texto; }

.abertura__grade--sobre .minicarrossel { grid-area: carrossel; }

/* Gatilho do modal "Nossa história" (v2.6 §16.2) — agora filho direto do grid;
   o margin-top do §16.2 morre (o row-gap assume). Centralizado <1024px: lê
   como legenda/ação do bloco do carrossel. Largura intrínseca (ação
   secundária), alvo ≥44px mantido */
.abertura__grade--sobre .abertura__saiba-mais {
  grid-area: botao;
  justify-self: center;
}

/* v2.5: "Quem somos" virou h1 (§14.1) — o espaçamento vale para os dois níveis */
.abertura__texto h1,
.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; }

  /* §21.9: duas colunas — botão sob o resumo (16px de respiro), carrossel à direita.
     rows auto/1fr: a 1ª linha mede só o resumo — sem isso, o mini-carrossel
     (que atravessa as 2 linhas) esticaria a 1ª linha e o botão desceria */
  .abertura__grade--sobre {
    grid-template-areas:
      "texto  carrossel"
      "botao  carrossel";
    grid-template-rows: auto 1fr;
    column-gap: var(--esp-4);
    row-gap: var(--esp-2);
    align-content: start;
  }

  .abertura__grade--sobre .abertura__saiba-mais { justify-self: start; }

  .abertura__grade--sobre .minicarrossel { justify-self: end; }
}

/* ===== Mini-carrossel de fotos do Sobre (v2.2 §10.5 + v2.3 §11 + v2.3.1 §12) ===== */

.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; /* load-bearing (§11.2): contém o scale(1.08) dentro do border-radius */
  border-radius: var(--raio); /* raio na moldura, nunca nas imgs escaladas */
  box-shadow: var(--sombra-card);
}

.minicarrossel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
}

/* V2.4.1 (bugfix do "flash esbranquiçado"): a foto que ENTRA fica ACIMA
   (z-index 2) e faz o crossfade sozinha; a que SAI segura opacity 1 embaixo
   durante os 300ms. Antes, as duas ficavam translúcidas ao mesmo tempo e o
   fundo branco da seção vazava (~25% no meio do fade) a cada troca. */
.minicarrossel__slide--ativa {
  opacity: 1;
  z-index: 2;
}

.minicarrossel__slide--saindo {
  opacity: 1; /* só cai a 0 (invisível, sob a ativa opaca) quando o JS remove a classe */
  z-index: 1;
}

.minicarrossel__foto {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

/* Setas (§12.3): círculo VISUAL de 32px com alvo de 44px — anatomia alternativa
   permitida pelo spec: botão 44×44px transparente SEM border-radius (radius no
   botão arredondaria o hit-test e os cantos do alvo deixariam de ser clicáveis)
   + span interno de 32×32px com o fundo */
.minicarrossel__seta {
  position: absolute;
  z-index: 3; /* acima dos slides empilhados (--ativa usa z-index 2) */
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: #FFFFFF;
  cursor: pointer;
}

.minicarrossel__seta-circulo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--raio-pill);
  background-color: var(--fundo-seta-mini);
  transition: background-color var(--transicao);
}

/* Sombra só no chevron (não no círculo), p/ legibilidade sobre fotos claras */
.minicarrossel__seta svg { filter: var(--sombra-icone-seta); }

/* Hover: só opacidade do fundo (0.5 → 0.7), sem scale nem cor opaca */
.minicarrossel__seta:hover .minicarrossel__seta-circulo { background-color: var(--fundo-seta-mini-hover); }

/* Foco na caixa de 44px do botão (§12.3) */
.minicarrossel__seta:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

/* Active no círculo visual (§12.3) */
.minicarrossel__seta:active .minicarrossel__seta-circulo { transform: scale(0.97); }

/* left/right compensam o padding: o círculo visual fica a 8px (--esp-1) da borda */
.minicarrossel__seta--anterior { left: calc(var(--esp-1) - 6px); }
.minicarrossel__seta--proxima { right: calc(var(--esp-1) - 6px); }

/* Indicadores (§12.1): decorativos, abaixo da moldura (fora do overflow),
   visíveis também em reduced-motion */
.minicarrossel__indicadores {
  display: flex;
  justify-content: center;
  gap: var(--esp-1);
  margin-top: var(--esp-1);
}

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

.minicarrossel__indicador--ativo {
  width: 16px; /* pílula: forma + cor = indicador não-cromático */
  background-color: var(--cor-primaria);
}

/* Ken Burns (§11.2): anima SÓ transform, 7s linear, 1 iteração, congela no fim */
@keyframes kenburns-in {
  from { transform: scale(1); }
  to { transform: scale(var(--escala-kenburns)); }
}

@keyframes kenburns-out {
  from { transform: scale(var(--escala-kenburns)); }
  to { transform: scale(1); }
}

/* Direção/origem alternadas por posição no ciclo (tabela §11.2);
   nth-of-type conta só os divs — as setas (button) não entram na conta */
.minicarrossel__slide:nth-of-type(4n + 1) { --kenburns-nome: kenburns-in; --kenburns-origem: 50% 50%; }
.minicarrossel__slide:nth-of-type(4n + 2) { --kenburns-nome: kenburns-out; --kenburns-origem: 30% 40%; }
.minicarrossel__slide:nth-of-type(4n + 3) { --kenburns-nome: kenburns-in; --kenburns-origem: 70% 60%; }
.minicarrossel__slide:nth-of-type(4n + 4) { --kenburns-nome: kenburns-out; --kenburns-origem: 50% 50%; }

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

  /* --saindo mantém a animação aplicada durante a troca: a escala não "pula";
     o reset do transform só acontece já coberta pela foto ativa opaca (§11.2) */
  .minicarrossel__slide--ativa .minicarrossel__foto,
  .minicarrossel__slide--saindo .minicarrossel__foto {
    animation: var(--kenburns-nome) var(--duracao-kenburns) linear 1 forwards;
    transform-origin: var(--kenburns-origem);
  }

  .minicarrossel__slide--ativa .minicarrossel__foto { will-change: transform; }
}

/* Reduced-motion (§11.3): sem zoom nem crossfade (regras acima só existem em
   no-preference); as setas seguem funcionais, com troca instantânea */
@media (prefers-reduced-motion: reduce) {
  .minicarrossel__seta:active .minicarrossel__seta-circulo { transform: 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);
  /* v2.7 (§18.5.1): borda obrigatória — sem ela o card #E8F0FB quase some
     sobre a nova faixa --cor-superficie #F4F7FB da seção */
  border: 1px solid var(--cor-borda);
  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; }
}

/* ===== Seção Instagram (#instagram — v2.6 §16.6) ===== */

.instagram-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--esp-3);
  align-items: start;
  justify-items: center;
  margin-top: var(--esp-4);
}

/* Placeholder: evita salto de layout enquanto o embed.js não renderiza;
   sem JS/bloqueado, o blockquote degrada para link simples ao post.
   v3.2 — SEM moldura própria: o embed oficial já vem com fundo branco, borda e
   raio; a moldura do card duplicava a do post e, com a altura reservada, deixava
   uma faixa vazia emoldurada embaixo. Quem veste a moldura agora é o skeleton
   (enquanto carrega) e o estado --fallback (quando o embed não vem). */
.instagram-item {
  /* position: relative é LOAD-BEARING: durante o processamento o embed.js usa
     um iframe com position:absolute inline — sem containing block aqui, ele
     mede % contra a viewport (326px+) e escapa do overflow, estourando 320px */
  position: relative;
  overflow-x: hidden;
  width: 100%;
  max-width: 328px; /* largura padrão do embed do Instagram */
  /* v3.1 — altura reservada = altura real do embed, medida no Chrome: item de
     288px de largura renderiza 577px de altura. Reservar a altura certa desde o
     skeleton zera o pulo de layout que havia quando o post entrava (147px). */
  min-height: 580px;
}

/* A partir de 360px o item atinge sua largura máxima (328px) e o embed passa a
   renderizar 627px de altura — em qualquer contagem de colunas */
@media (min-width: 360px) {
  .instagram-item { min-height: 628px; }
}

/* Override obrigatório (§16.6): o blockquote oficial traz min-width: 326px
   inline — estouraria o conteúdo de 288px em telas de 320px. O seletor por
   atributo cobre também o estado intermediário do embed.js, que RENOMEIA a
   classe do blockquote para "instagram-media-registered" durante o processo */
.instagram-media,
blockquote[data-instgrm-permalink] {
  min-width: min(326px, 100%) !important;
  max-width: 100% !important;
}

.instagram-item a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--esp-2);
  color: var(--cor-primaria);
  text-decoration: underline;
}

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

/* Skeleton de carregamento (v2.9): injetado pelo instagram.js, cobre o item
   até o embed real renderizar; some também no fallback (~8s sem render),
   revelando o link nativo do blockquote */
.instagram-skeleton {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  overflow: hidden;
  background-color: var(--cor-superficie);
  /* v3.2: a moldura de card vive aqui (e no --fallback), não no item */
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  color: var(--cor-borda); /* cor do ícone (currentColor) */
  pointer-events: none; /* cliques atravessam para o link do blockquote */
}

.instagram-skeleton__texto {
  font-size: 14px;
  color: var(--cor-texto-suave);
}

@media (prefers-reduced-motion: no-preference) {
  .instagram-skeleton::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.6) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: instagram-shimmer 1.8s ease-in-out infinite;
  }
}

@keyframes instagram-shimmer {
  to { transform: translateX(100%); }
}

/* v3.1: o skeleton sai por esmaecimento, não por corte seco — se a foto do post
   demorar mais alguns milissegundos para pintar dentro do iframe, o visitante vê
   uma transição e nunca um retângulo vazio. A visibilidade só muda no fim. */
.instagram-item--carregado .instagram-skeleton {
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 0s linear 300ms;
}

/* v3.2: com o post renderizado, quem manda na altura é o embed. Manter a altura
   reservada aqui deixava uma faixa vazia embaixo sempre que o post renderizasse
   mais baixo que a reserva. A reserva segue valendo durante o skeleton (regras
   acima), então o CLS da seção continua desprezível (≤0,003 medido no Chrome).
   Declarado depois do @media de 360px de propósito: mesma especificidade, vence
   pela ordem. */
.instagram-item--carregado {
  min-height: 0;
}

/* Fallback (embed não veio): o link nativo do blockquote precisa aparecer já.
   A altura reservada é mantida — encolher o card 8s depois empurraria o resto
   da página —, então o link fica centralizado para o card não parecer quebrado */
.instagram-item--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--esp-3);
  text-align: center;
  /* v3.2: o item perdeu a moldura, mas sem embed o link ficaria solto no meio do
     nada — o fallback reconstrói o card para o bloco continuar legível */
  background-color: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
}

.instagram-item--fallback .instagram-skeleton {
  display: none;
}

/* O blockquote traz background:#FFF e margin inline (do embed oficial): dentro
   do card de fallback isso vira um retângulo branco solto atrás do link — daí o
   !important, única forma de vencer o estilo inline */
.instagram-item--fallback .instagram-media {
  background: transparent !important;
  margin: 0 !important;
}

/* Sozinho no meio do card, o link sublinhado ficava frágil: aqui ele assume a
   forma do botão secundário do site (mesmos tokens) */
.instagram-item--fallback a {
  justify-content: center;
  min-height: 48px;
  padding: 12px var(--esp-3);
  font-weight: 500;
  text-decoration: none;
  border: 2px solid var(--cor-primaria);
  border-radius: var(--raio);
}

.instagram-item--fallback a:hover {
  background-color: var(--cor-primaria-suave);
}

/* ===== Modal "Nossa história" (v2.6 §16.2) ===== */

.modal-historia {
  width: min(90vw, 640px);
  max-height: 80vh;
  overflow-y: auto;
  overscroll-behavior: contain; /* o scroll interno nunca rola a página de fundo */
  margin: auto;
  padding: var(--esp-4);
  border: none;
  border-radius: var(--raio);
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
}

@media (max-width: 479px) {
  .modal-historia { padding: var(--esp-3); }
}

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

/* Sticky: permanece alcançável durante o scroll interno do texto */
.modal-historia__fechar {
  position: sticky;
  top: 0;
  z-index: 1;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: var(--raio-pill);
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  cursor: pointer;
  transition: background-color var(--transicao), color var(--transicao);
}

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

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

.modal-historia__fechar:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  .modal-historia__fechar:active { transform: none; }
}

.modal-historia__logo {
  height: 64px;
  width: auto;
  margin-inline: auto;
  margin-bottom: var(--esp-3);
}

.modal-historia__titulo {
  font-size: 25px;
  color: var(--cor-titulo);
  margin-bottom: var(--esp-2);
}

.modal-historia__texto p { margin-bottom: var(--esp-2); }

/* ===== 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;
}

/* Variante de erro do bloco de status (falha do envio por e-mail) */
.form__sucesso--erro {
  background-color: var(--cor-erro-suave);
  border-color: var(--cor-erro);
}

.form__sucesso--erro svg { color: var(--cor-erro); }

.form__sucesso-icone--erro { display: none; }
.form__sucesso--erro .form__sucesso-icone--ok { display: none; }
.form__sucesso--erro .form__sucesso-icone--erro { display: block; }

/* Honeypot anti-bot: fora da tela em vez de display:none,
   que bots mais espertos detectam e pulam */
.form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 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;
}

/* Sub-blocos dentro das seções (diferenciais, preços, FAQ) */
.sub-bloco { margin-top: var(--esp-6); }

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

.carrossel {
  position: relative;
  /* v2.7.1 (§19.1/§19.5): altura única pelo token em TODAS as larguras;
     <768px o :root recalibra só o VALOR (clamp 460–560px) */
  height: var(--altura-banner);
  overflow: hidden;
  background-color: var(--cor-rodape);
}

.carrossel__trilho {
  display: flex;
  height: 100%;
  /* V2.8 (§21.6): swipe — o navegador segue dono do scroll VERTICAL (pan-y);
     só o eixo horizontal chega ao JS. O gesto nunca sequestra o scroll */
  touch-action: pan-y;
}

@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 stretch (default): o conteúdo ocupa a altura toda e controla o alinhamento vertical */
}

/* Wrapper da mídia (v2.7.1 §19.5): permanente, cobrindo o slide inteiro em
   TODAS as larguras (a faixa 16:9 mobile do §18.2 foi revogada); portador do
   véu radial no ::before */
.carrossel__faixa-midia {
  position: absolute;
  inset: 0;
}

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

/* Overlay único radial nos 3 slides (v2.6.1 §17.2, portador atualizado no
   §19.5) — empilhamento: mídia → véu radial (::before) → conteúdo/controles.
   Com inset: 0 no wrapper, é pixel-idêntico ao .slide::before original
   (stops intactos; centro 0.03 FIXADO) */
.carrossel__faixa-midia::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--overlay-radial);
  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;
  /* v2.7.1: conteúdo volta SOBREPOSTO à mídia (transparente). <768px ancorado
     embaixo (§13.1). V2.8 (§21.3): gap 8px (compensado pela sombra de texto e
     pelos textos curtos); pb 104px (§20.4) — folga CTA×controles = 104 − 60 =
     44px (piso exato; 104px é o pb MÍNIMO). pt 32px é trava de segurança no
     topo. Sensibilidade (§21.5): cada +8px de gap custa +32px de banner */
  justify-content: flex-end;
  gap: var(--esp-1);
  padding-top: var(--esp-4);
  padding-bottom: calc(var(--esp-8) + var(--esp-4) + var(--esp-1)); /* 104px */
  /* o bloco cobre a mídia: libera cliques/toques para os controles por
     baixo; só os filhos (CTA) são interativos */
  pointer-events: none;
}

.carrossel__conteudo > * { pointer-events: auto; }

.carrossel__titulo {
  /* v2.7.2 (§20.2, <768px): título compacto — 24px em 320–400px, cresce até
     28px em ~467px. ≥768px volta ao clamp Display cheio (media query abaixo) */
  font-size: clamp(24px, 6vw, 28px);
  line-height: 1.2;
  color: #FFFFFF;
  max-width: 720px;
  text-shadow: var(--sombra-texto-hero); /* §17.3: em TODAS as larguras */
}

.carrossel__apoio {
  font-size: 14px; /* v2.7.2 (§20.2, <768px); lh 1.5 herdado; 16px em ≥768px */
  color: #FFFFFF;
  max-width: 720px;
  text-shadow: var(--sombra-texto-hero);
}

/* v2.7.2 (§20.2, <768px): CTA no piso de acessibilidade — 44px, NUNCA menos */
.carrossel__conteudo .botao {
  min-height: 44px;
  padding-block: var(--esp-1);
}

@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;
  /* Halo navy atrás do anel branco (§15.5) — OBRIGATÓRIO e ainda mais crítico
     com o véu a 3% (v2.6.1 §17.4): sobre zona clara o anel sozinho cairia a
     ~1.1:1; sobre o halo ~5:1 */
  box-shadow: 0 0 0 6px var(--overlay-scrim);
}

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

.carrossel__pausa {
  width: 44px;
  height: 44px;
  right: var(--esp-2);
  bottom: var(--esp-2); /* mesma faixa vertical dos indicadores (§2.4) */
}

.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;
  /* V2.8 (§21.4): centro geométrico do banner em TODAS as larguras — regra
     ÚNICA, sem media query (revoga o top: 20% do §20.1). Zero sobreposição
     com o texto: folga mínima de 8,6px no pior caso estressado (§21.5) —
     garantida pela altura 608–680px do banner mobile (§21.1), NÃO mexer em
     um sem recalcular o outro */
  top: 50%;
  transform: translateY(-50%);
}

/* Com translateY, o active precisa COMPOR os transforms — scale(0.97) sozinho
   (herdado de .carrossel__controle) anularia o translateY e a seta pularia
   (§21.4: o fix vale também no desktop) */
.carrossel__seta:active { transform: translateY(-50%) scale(0.97); }

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

/* Slide 3 <768px (V2.8 §21.2): moldura mais alta que 16:9 corta as LATERAIS;
   com o banner 608–680px a janela cai a ~30–35% da cena e X=80% (era 75%)
   mantém o letreiro METALIS inteiro no quadro (390px → mostra 51,8–87% vs.
   letreiro 55–85%). Vídeos ficam no default 50% 50% */
@media (max-width: 767.98px) {
  .carrossel__midia--fachada { object-position: 80% 50%; }
}

/* ≥768px: hero EXATAMENTE como na v2.6.1/v2.7 — conteúdo centralizado
   verticalmente (§13.2), setas no centro do banner (§2.4), tipografia Display
   cheia e CTA 48px (§20.6: zero mudança nesta faixa na v2.7.2) */
@media (min-width: 768px) {
  .carrossel__slide { align-items: center; } /* bloco de conteúdo centralizado, altura só do conteúdo */

  .carrossel__conteudo {
    justify-content: center;
    gap: var(--esp-3);
    padding-top: 0;
    padding-bottom: 0;
  }

  .carrossel__titulo { font-size: clamp(28px, 5vw + 8px, 39px); }

  .carrossel__apoio { font-size: 16px; }

  .carrossel__conteudo .botao {
    min-height: 48px;
    padding-block: 12px; /* vertical do padding original de .botao */
  }

  /* Setas: nada aqui — a regra base (top: 50%) já vale em todas as larguras (§21.4) */
}

.carrossel__indicadores {
  position: absolute;
  z-index: 3;
  bottom: var(--esp-2); /* §2.4/§17.4: base do banner em todas as larguras */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  /* v2.6.1 §17.4: fundo em pílula 0.65 — o scrim que protegia os pontos saiu;
     sem ele a pílula ativa branca cairia a ~1.1:1 sobre frames claros.
     Altura 44px = alvos de toque de 44×44px preservados */
  height: 44px;
  align-items: center;
  background: var(--overlay-banner);
  border-radius: var(--raio-pill);
  padding-inline: var(--esp-1);
}

.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;
  box-shadow: 0 0 0 6px var(--overlay-scrim); /* halo navy (§15.5) */
}

/* ===== 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 curta após a lista de chips (v2.6.1: "(*) Confirmar no momento da venda/compra")
   — segue o padrão de legenda 13px do bloco */
.nota-chips {
  margin-top: var(--esp-1);
  font-size: 13px;
  color: var(--cor-texto-suave);
}

.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); }