/* ============================================================================
   Dr. Gilberto Giovanetti — Médico Psiquiatra | Tubarão/SC
   Folha de estilo principal

   Direção estética: "Consultório sereno"
   Editorial clínico — azul profundo, areia quente, dourado discreto.
   Tipografia: Spectral (serifada, títulos) + Karla (grotesca, corpo).
   Mobile-first. Sem frameworks.

   PESOS CARREGADOS — não usar outros sem adicionar ao <link> das 6 páginas:
     Karla     400, 500, 700
     Spectral  400, 500, 600 e itálico 400

   Karla 600 NÃO é carregado de propósito. Pedir 600 nela faz o navegador
   substituir por 700, então o código passaria a mentir sobre o que renderiza.
   Se algum dia 600 for realmente necessário, é mais um arquivo de fonte no
   caminho crítico — pese isso antes.

   Karla itálico também não é carregado: os dois únicos itálicos do site
   (.hero h1 em e .acolhimento p) usam Spectral.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------------- */
:root {
  /* Cor — azuis
     Extraídos da identidade visual real do consultório (brasão Psi).
     --azul-800 é o navy exato da marca; --azul-900 é a variante escurecida
     usada em áreas amplas, para garantir contraste com o cobre. */
  --azul-900: #16273f;
  --azul-800: #22395b;
  --azul-700: #2e4a72;
  --azul-600: #3a5c8a;

  /* Cor — cobre (detalhe da marca, substitui o dourado genérico) */
  --dourado: #c08b5c;
  --dourado-claro: #d9ae84;
  --dourado-texto: #8a5b2e; /* variante acessível sobre fundo claro — 6,2:1 */

  /* Cor — neutros quentes */
  --areia-50: #fbf9f5;
  --areia-100: #f4f0e8;
  --areia-200: #e7e0d4;
  --areia-300: #d5cbba;

  /* Cor — texto */
  --tinta: #16232b;
  --tinta-suave: #4c5a63;
  --claro: #f4f0e8;
  --claro-suave: #b9c6cf;

  /* Cor — sistema */
  --whatsapp: #128c4a;
  --erro: #a8321f;
  --foco: #3f9ad6;

  /* Tipografia */
  --fonte-titulo: "Spectral", Georgia, "Times New Roman", serif;
  --fonte-corpo: "Karla", "Segoe UI", Helvetica, sans-serif;

  --t-micro: 0.75rem;
  --t-mini: 0.875rem;
  --t-corpo: 1.0625rem;
  --t-destaque: clamp(1.125rem, 0.95rem + 0.7vw, 1.375rem);
  --t-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --t-h2: clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem);
  --t-h1: clamp(2.25rem, 1.6rem + 2.9vw, 4rem);
  --t-numero: clamp(2.5rem, 1.8rem + 3.2vw, 4.25rem);

  /* Espaçamento */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4rem;
  --esp-9: 6rem;
  --esp-10: 8rem;

  /* Layout */
  --largura-maxima: 74rem;
  --largura-texto: 38rem;
  --borda-raio: 4px;
  --borda-raio-g: 10px;
  --altura-cabecalho: 4.5rem;

  /* Sombra — usada com muita parcimônia */
  --sombra-suave: 0 1px 2px rgba(22, 39, 63, 0.04), 0 8px 24px -12px rgba(22, 39, 63, 0.12);
  --sombra-media: 0 2px 4px rgba(22, 39, 63, 0.06), 0 18px 40px -18px rgba(22, 39, 63, 0.22);

  /* Movimento */
  --transicao: 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 60rem) {
  :root {
    --altura-cabecalho: 5.5rem;
  }
}

/* ---------------------------------------------------------------------------
   2. RESET E BASE
   --------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altura-cabecalho) + 1rem);
}

body {
  background-color: var(--areia-50);
  color: var(--tinta);
  font-family: var(--fonte-corpo);
  font-size: var(--t-corpo);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
picture,
svg,
iframe {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

a {
  color: var(--azul-700);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--azul-600);
}

ul,
ol {
  padding: 0;
}

/* Foco visível — nunca remover */
:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--dourado-claro);
  color: var(--azul-900);
}

/* ---------------------------------------------------------------------------
   3. TIPOGRAFIA
   --------------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  font-family: var(--fonte-titulo);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 {
  font-size: var(--t-h1);
  line-height: 1.05;
}

h2 {
  font-size: var(--t-h2);
}

h3 {
  font-size: var(--t-h3);
  line-height: 1.25;
}

p {
  text-wrap: pretty;
}

.sobrelinha {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  font-family: var(--fonte-corpo);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dourado-texto);
  margin-bottom: var(--esp-4);
}

.sobrelinha::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: var(--dourado);
  flex: none;
}

.fundo-escuro .sobrelinha {
  color: var(--dourado-claro);
}

.texto-guia {
  max-width: var(--largura-texto);
  color: var(--tinta-suave);
  font-size: var(--t-destaque);
  line-height: 1.55;
}

.fundo-escuro .texto-guia {
  color: var(--claro-suave);
}

.nota {
  font-size: var(--t-mini);
  color: var(--tinta-suave);
}

/* ---------------------------------------------------------------------------
   4. LAYOUT
   --------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--largura-maxima);
  margin-inline: auto;
  padding-inline: var(--esp-5);
}

@media (min-width: 48rem) {
  .container {
    padding-inline: var(--esp-7);
  }
}

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

@media (min-width: 48rem) {
  .secao {
    padding-block: var(--esp-9);
  }
}

.secao--compacta {
  padding-block: var(--esp-7);
}

.fundo-escuro {
  background-color: var(--azul-900);
  color: var(--claro);
  position: relative;
}

.fundo-escuro h1,
.fundo-escuro h2,
.fundo-escuro h3 {
  color: var(--areia-50);
}

.fundo-areia {
  background-color: var(--areia-100);
}

/* Textura sutil de grão — dá atmosfera sem peso de imagem */
.fundo-escuro::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)'/%3E%3C/svg%3E");
}

.fundo-escuro > * {
  position: relative;
  z-index: 1;
}

.cabecalho-secao {
  margin-bottom: var(--esp-7);
}

.linha-dourada {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--dourado), transparent);
  margin-block: var(--esp-6);
}

/* Acessibilidade — links de atalho e texto só para leitores de tela */
.pular-para-conteudo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--azul-900);
  color: var(--areia-50);
  padding: var(--esp-3) var(--esp-5);
  border-radius: 0 0 var(--borda-raio) var(--borda-raio);
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--transicao);
}

.pular-para-conteudo:focus {
  transform: translate(-50%, 0);
  color: var(--areia-50);
}

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

/* ---------------------------------------------------------------------------
   5. BOTÕES
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-3);
  padding: 0.9rem 1.6rem;
  min-height: 3rem;
  border: 1px solid transparent;
  border-radius: var(--borda-raio);
  font-family: var(--fonte-corpo);
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transicao), color var(--transicao),
    border-color var(--transicao), transform var(--transicao);
}

.btn svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn--dourado {
  background-color: var(--dourado);
  color: var(--azul-900);
  border-color: var(--dourado);
}

.btn--dourado:hover {
  background-color: var(--dourado-claro);
  border-color: var(--dourado-claro);
  color: var(--azul-900);
}

.btn--escuro {
  background-color: var(--azul-800);
  color: var(--areia-50);
  border-color: var(--azul-800);
}

.btn--escuro:hover {
  background-color: var(--azul-700);
  border-color: var(--azul-700);
  color: var(--areia-50);
}

.btn--contorno {
  background-color: transparent;
  color: var(--azul-800);
  border-color: var(--areia-300);
}

.btn--contorno:hover {
  border-color: var(--azul-800);
  color: var(--azul-800);
  background-color: rgba(34, 57, 91, 0.04);
}

/* Variante para fundo escuro. O hero precisa estar aqui explicitamente:
   ele não usa .fundo-escuro (o fundo dele é vídeo, não cor), então sem esta
   inclusão o botão herdaria texto navy sobre vídeo escuro e desapareceria. */
.fundo-escuro .btn--contorno,
.hero .btn--contorno {
  color: var(--areia-50);
  border-color: rgba(244, 240, 232, 0.45);
}

.fundo-escuro .btn--contorno:hover,
.hero .btn--contorno:hover {
  border-color: var(--dourado);
  background-color: rgba(192, 139, 92, 0.16);
  color: var(--areia-50);
}

.btn--bloco {
  width: 100%;
}

.grupo-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
}

/* Link com seta — usado em cards e listas */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--azul-700);
  text-decoration: none;
  border-bottom: 1px solid var(--areia-300);
  padding-bottom: 2px;
  transition: border-color var(--transicao), gap var(--transicao);
}

.link-seta:hover {
  border-color: var(--dourado);
  gap: var(--esp-3);
}

/* ---------------------------------------------------------------------------
   6. CABEÇALHO E NAVEGAÇÃO
   --------------------------------------------------------------------------- */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(251, 249, 245, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--areia-200);
  transition: box-shadow var(--transicao), border-color var(--transicao);
}

.cabecalho--rolado {
  box-shadow: var(--sombra-suave);
}

.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  min-height: var(--altura-cabecalho);
}

.marca {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  text-decoration: none;
  color: var(--tinta);
  line-height: 1.15;
}

/* Brasão Psi — redesenhado em SVG a partir da identidade real do consultório,
   para escalar sem perda e herdar a cor do contexto. */
.marca__brasao {
  width: 1.75rem;
  height: auto;
  color: var(--azul-800);
  flex: none;
}

.marca__texto {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

@media (min-width: 30rem) {
  .marca__brasao {
    width: 2.1rem;
  }
}

.marca__nome {
  font-family: var(--fonte-titulo);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.marca__crm {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

@media (min-width: 30rem) {
  .marca__nome {
    font-size: 1.1875rem;
  }
}

/* Botão hambúrguer */
.menu-botao {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.55rem;
  background: none;
  border: 1px solid var(--areia-200);
  border-radius: var(--borda-raio);
  cursor: pointer;
}

.menu-botao span {
  display: block;
  height: 1.5px;
  width: 100%;
  background-color: var(--tinta);
  transition: transform var(--transicao), opacity var(--transicao);
}

.menu-botao[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.menu-botao[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-botao[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Menu — mobile: painel deslizante */
.menu {
  position: fixed;
  inset: var(--altura-cabecalho) 0 auto 0;
  background-color: var(--areia-50);
  border-bottom: 1px solid var(--areia-200);
  padding: var(--esp-5) var(--esp-5) var(--esp-6);
  display: grid;
  gap: var(--esp-5);
  box-shadow: var(--sombra-media);
  transform: translateY(-105%);
  visibility: hidden;
  transition: transform var(--transicao), visibility var(--transicao);
  max-height: calc(100dvh - var(--altura-cabecalho));
  overflow-y: auto;
}

.menu[data-aberto="true"] {
  transform: translateY(0);
  visibility: visible;
}

.menu__lista {
  list-style: none;
  display: grid;
  gap: var(--esp-1);
}

.menu__link {
  display: block;
  padding: var(--esp-3) 0;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 1px solid var(--areia-200);
}

.menu__link:hover,
.menu__link[aria-current="page"] {
  color: var(--azul-700);
}

.menu__link[aria-current="page"] {
  font-weight: 700;
}

@media (min-width: 62rem) {
  .menu-botao {
    display: none;
  }

  .menu {
    position: static;
    inset: auto;
    transform: none;
    visibility: visible;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    max-height: none;
    overflow: visible;
    display: flex;
    align-items: center;
    gap: var(--esp-6);
  }

  .menu__lista {
    display: flex;
    align-items: center;
    gap: var(--esp-5);
  }

  .menu__link {
    padding: 0;
    border: 0;
    font-size: 0.9375rem;
    letter-spacing: 0.01em;
    position: relative;
  }

  .menu__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -6px;
    height: 1.5px;
    background: var(--dourado);
    transition: right var(--transicao);
  }

  .menu__link:hover::after,
  .menu__link[aria-current="page"]::after {
    right: 0;
  }

  .menu .btn {
    padding: 0.7rem 1.2rem;
    min-height: 2.75rem;
    font-size: 0.8125rem;
  }
}

/* ---------------------------------------------------------------------------
   7. HERO
   --------------------------------------------------------------------------- */
/* Hero em tela cheia com vídeo de fundo.

   A altura desconta o cabeçalho, que é sticky e ocupa espaço no fluxo:
   assim cabeçalho + hero somam exatamente uma tela, sem sobra de rolagem.
   svh em vez de vh evita o salto quando a barra do navegador móvel recolhe. */
.hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - var(--altura-cabecalho));
  min-height: calc(100svh - var(--altura-cabecalho));
  display: flex;
  align-items: flex-end;
  background-color: var(--azul-900);
  color: var(--claro);
  overflow: hidden;
  padding-block: var(--esp-8) var(--esp-7);
}

.hero__fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero__fundo video,
.hero__fundo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* O vídeo é 16:9; em telas altas o recorte é vertical. Este ponto mantém
     o rosto no terço superior direito, acima e ao lado do texto. */
  object-position: 64% 28%;
  display: block;
}

/* Véu de leitura — não é enfeite.
   Sem ele o quadro branco à esquerda do vídeo deixa o título ilegível.
   No mobile o texto cobre toda a área, então o véu é uniforme e forte
   (mínimo 0,74 de opacidade = 5:1 de contraste com o texto claro).
   No desktop ele vira horizontal: pesado à esquerda, onde o texto está,
   e leve à direita, para o rosto continuar visível. */
.hero__fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(22, 39, 63, 0.96) 0%,
    rgba(22, 39, 63, 0.88) 42%,
    rgba(22, 39, 63, 0.74) 100%
  );
}

/* Grão por cima do vídeo, para unificar a textura com o resto do site */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)'/%3E%3C/svg%3E");
}

.hero__conteudo {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero__texto {
  max-width: 34rem;
}

.hero h1 {
  color: var(--areia-50);
  margin-bottom: var(--esp-5);
  /* Sombra discreta: o fundo é imagem em movimento, e o véu sozinho não
     cobre todos os frames. Não é efeito estético — é margem de segurança. */
  text-shadow: 0 1px 20px rgba(22, 39, 63, 0.55);
}

.hero h1 em {
  font-style: italic;
  color: var(--dourado-claro);
}

.hero__descricao {
  color: var(--claro-suave);
  font-size: var(--t-destaque);
  line-height: 1.55;
  max-width: 34rem;
  margin-bottom: var(--esp-6);
  text-shadow: 0 1px 16px rgba(22, 39, 63, 0.5);
}

.hero__acoes {
  margin-bottom: var(--esp-5);
}

.hero__nota {
  font-size: var(--t-mini);
  color: var(--claro-suave);
  display: flex;
  align-items: center;
  gap: var(--esp-2);
}

.hero__nota svg {
  width: 1rem;
  height: 1rem;
  color: var(--dourado);
  flex: none;
}

/* Selo de registro profissional. Sobre vídeo, um cartão branco flutuando
   pesa demais — virou filete com borda de cobre, integrado ao texto. */
.hero__selo {
  margin-top: var(--esp-5);
  padding-left: var(--esp-4);
  border-left: 2px solid var(--dourado);
  color: var(--claro-suave);
  font-size: var(--t-micro);
  line-height: 1.5;
  max-width: 24rem;
}

.hero__selo strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  font-weight: 600;
  color: var(--areia-50);
  margin-bottom: 1px;
}

/* Indicação de rolagem — necessária porque o hero ocupa a tela inteira
   e nada mais sinaliza que há conteúdo abaixo. */
.hero__rolar {
  display: none;
}

@media (min-width: 62rem) {
  .hero {
    padding-block: var(--esp-9) var(--esp-8);
  }

  .hero__texto {
    max-width: 40rem;
  }

  /* Véu horizontal no desktop: pesado à esquerda, sob o texto, e leve à
     direita, para o rosto continuar visível. O segundo gradiente assenta
     a base e evita que o texto flutue sobre uma área clara do vídeo. */
  .hero__fundo::after {
    background:
      linear-gradient(100deg,
        rgba(22, 39, 63, 0.96) 0%,
        rgba(22, 39, 63, 0.90) 30%,
        rgba(22, 39, 63, 0.74) 50%,
        rgba(22, 39, 63, 0.40) 74%,
        rgba(22, 39, 63, 0.26) 100%),
      linear-gradient(to top,
        rgba(22, 39, 63, 0.5) 0%,
        transparent 45%);
  }

  .hero__rolar {
    position: absolute;
    right: 0;
    bottom: var(--esp-1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--esp-3);
  }

  .hero__rolar-texto {
    writing-mode: vertical-rl;
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--claro-suave);
  }

  .hero__rolar-linha {
    width: 1px;
    height: 4rem;
    background: linear-gradient(to bottom, var(--dourado), transparent);
    transform-origin: top center;
    animation: rolarPulso 2.6s ease-in-out infinite;
  }
}

@keyframes rolarPulso {
  0%, 100% { transform: scaleY(0.35); opacity: 0.45; }
  50%      { transform: scaleY(1);    opacity: 1; }
}

/* ---------------------------------------------------------------------------
   8. FAIXA DE AUTORIDADE (números / provas factuais)
   --------------------------------------------------------------------------- */
.autoridade {
  background-color: var(--azul-800);
  color: var(--claro);
  border-top: 1px solid rgba(192, 139, 92, 0.22);
}

.autoridade__grade {
  display: grid;
  gap: var(--esp-5);
  padding-block: var(--esp-7);
}

.autoridade__item {
  border-left: 2px solid rgba(192, 139, 92, 0.45);
  padding-left: var(--esp-4);
}

.autoridade__valor {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: var(--t-h3);
  font-weight: 600;
  color: var(--dourado-claro);
  line-height: 1.1;
  margin-bottom: var(--esp-1);
}

.autoridade__rotulo {
  font-size: var(--t-mini);
  color: var(--claro-suave);
  line-height: 1.4;
}

@media (min-width: 40rem) {
  .autoridade__grade {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--esp-6);
  }
}

@media (min-width: 62rem) {
  .autoridade__grade {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------------------------------------------------------------------------
   9. FRASE DE ACOLHIMENTO

   Citação em serifada itálica ao lado do vídeo, sobre fundo claro.
   Sem véu e sem sombra: o texto não encosta na imagem, então o contraste
   é o do fundo areia — 8,9:1 com o navy.
   --------------------------------------------------------------------------- */
.acolhimento {
  margin: 0;
  max-width: 30rem;
}

.acolhimento p {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.375rem, 1.05rem + 1.5vw, 2.125rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  color: var(--azul-800);
  text-wrap: balance;
  margin: 0;
}

/* Marca de citação como elemento gráfico, não como pontuação digitada */
.acolhimento p::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  background: var(--dourado);
  margin-bottom: var(--esp-5);
}

.acolhimento footer {
  margin-top: var(--esp-5);
}

.acolhimento cite {
  font-family: var(--fonte-corpo);
  font-style: normal;
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dourado-texto);
}

/* ---------------------------------------------------------------------------
   10. CARDS — ÁREAS DE ATENDIMENTO
   --------------------------------------------------------------------------- */
.grade-areas {
  display: grid;
  gap: var(--esp-4);
  list-style: none;
}

@media (min-width: 40rem) {
  .grade-areas {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 62rem) {
  .grade-areas {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--esp-5);
  }
}

.card-area {
  background-color: var(--areia-50);
  border: 1px solid var(--areia-200);
  border-radius: var(--borda-raio-g);
  padding: var(--esp-5);
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  transition: border-color var(--transicao), transform var(--transicao),
    box-shadow var(--transicao);
}

.fundo-areia .card-area {
  background-color: var(--areia-50);
}

.card-area:hover {
  border-color: var(--dourado);
  transform: translateY(-3px);
  box-shadow: var(--sombra-suave);
}

.card-area__icone {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background-color: var(--azul-900);
  color: var(--dourado-claro);
  flex: none;
}

.card-area__icone svg {
  width: 1.2rem;
  height: 1.2rem;
}

.card-area h3 {
  font-size: 1.125rem;
}

.card-area p {
  font-size: var(--t-mini);
  color: var(--tinta-suave);
  line-height: 1.55;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   11. PASSO A PASSO
   --------------------------------------------------------------------------- */
.passos {
  display: grid;
  gap: var(--esp-6);
  list-style: none;
  counter-reset: passo;
}

@media (min-width: 48rem) {
  .passos {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--esp-7) var(--esp-6);
  }
}

@media (min-width: 62rem) {
  .passos {
    grid-template-columns: repeat(4, 1fr);
  }
}

.passo {
  counter-increment: passo;
  position: relative;
  padding-top: var(--esp-6);
  border-top: 1px solid rgba(244, 240, 232, 0.2);
}

.fundo-areia .passo,
body > main .secao:not(.fundo-escuro) .passo {
  border-top-color: var(--areia-300);
}

.passo::before {
  content: counter(passo, decimal-leading-zero);
  position: absolute;
  top: var(--esp-4);
  left: 0;
  font-family: var(--fonte-titulo);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--dourado);
}

.passo h3 {
  margin-bottom: var(--esp-3);
  font-size: 1.1875rem;
}

.passo p {
  font-size: var(--t-mini);
  line-height: 1.6;
  color: var(--tinta-suave);
  margin: 0;
}

.fundo-escuro .passo p {
  color: var(--claro-suave);
}

/* ---------------------------------------------------------------------------
   12. PILARES DO CUIDADO
   (ocupa o slot de "prova social" — conforme CFM 2.336/2023, sem depoimentos)
   --------------------------------------------------------------------------- */
.grade-pilares {
  display: grid;
  gap: var(--esp-5);
  list-style: none;
}

@media (min-width: 48rem) {
  .grade-pilares {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--esp-6);
  }
}

.pilar {
  background-color: var(--areia-50);
  border: 1px solid var(--areia-200);
  border-top: 3px solid var(--dourado);
  border-radius: 0 0 var(--borda-raio-g) var(--borda-raio-g);
  padding: var(--esp-6) var(--esp-5);
}

.pilar h3 {
  margin-bottom: var(--esp-3);
}

.pilar p {
  color: var(--tinta-suave);
  font-size: var(--t-mini);
  line-height: 1.65;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   13. FAQ (details/summary nativo — acessível sem JS)
   --------------------------------------------------------------------------- */
.faq {
  max-width: 52rem;
  border-top: 1px solid var(--areia-300);
}

.faq__item {
  border-bottom: 1px solid var(--areia-300);
}

.faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-4);
  padding: var(--esp-5) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--fonte-titulo);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--tinta);
  transition: color var(--transicao);
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary:hover {
  color: var(--azul-700);
}

.faq__item summary::after {
  content: "";
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  margin-top: 0.45rem;
  border-right: 1.5px solid var(--dourado-texto);
  border-bottom: 1.5px solid var(--dourado-texto);
  transform: rotate(45deg);
  transition: transform var(--transicao);
}

.faq__item[open] summary::after {
  transform: rotate(-135deg);
  margin-top: 0.7rem;
}

.faq__resposta {
  padding-bottom: var(--esp-5);
  max-width: 46rem;
  color: var(--tinta-suave);
  font-size: 0.9875rem;
  line-height: 1.7;
}

.faq__resposta p + p {
  margin-top: var(--esp-3);
}

/* ---------------------------------------------------------------------------
   14. CONTATO
   --------------------------------------------------------------------------- */
.contato__grade {
  display: grid;
  gap: var(--esp-7);
}

@media (min-width: 62rem) {
  .contato__grade {
    grid-template-columns: 1fr 1.1fr;
    gap: var(--esp-8);
    align-items: start;
  }
}

.lista-contato {
  list-style: none;
  display: grid;
  gap: var(--esp-5);
  margin-bottom: var(--esp-6);
}

.lista-contato li {
  display: flex;
  gap: var(--esp-4);
  align-items: flex-start;
}

.lista-contato__icone {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--areia-300);
  color: var(--azul-700);
}

.fundo-escuro .lista-contato__icone {
  border-color: rgba(192, 139, 92, 0.35);
  color: var(--dourado-claro);
}

.lista-contato__icone svg {
  width: 1.15rem;
  height: 1.15rem;
}

.lista-contato dt,
.lista-contato .rotulo {
  display: block;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 2px;
}

.fundo-escuro .lista-contato .rotulo {
  color: var(--claro-suave);
}

.lista-contato .valor {
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--tinta);
  text-decoration: none;
}

.fundo-escuro .lista-contato .valor {
  color: var(--areia-50);
}

.lista-contato a.valor:hover {
  color: var(--azul-600);
  text-decoration: underline;
}

.fundo-escuro .lista-contato a.valor:hover {
  color: var(--dourado-claro);
}

.mapa {
  border: 1px solid var(--areia-200);
  border-radius: var(--borda-raio-g);
  overflow: hidden;
  background-color: var(--areia-200);
}

.mapa iframe {
  width: 100%;
  height: 22rem;
  border: 0;
  display: block;
}

/* ---------------------------------------------------------------------------
   15. FORMULÁRIO
   --------------------------------------------------------------------------- */
.formulario {
  background-color: var(--areia-50);
  border: 1px solid var(--areia-200);
  border-radius: var(--borda-raio-g);
  padding: var(--esp-6) var(--esp-5);
  display: grid;
  gap: var(--esp-5);
}

@media (min-width: 40rem) {
  .formulario {
    padding: var(--esp-7) var(--esp-6);
  }
}

.campo {
  display: grid;
  gap: var(--esp-2);
}

.campo label {
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--tinta);
}

.campo .obrigatorio {
  color: var(--erro);
}

.campo .ajuda {
  font-size: var(--t-micro);
  color: var(--tinta-suave);
}

.campo input,
.campo textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  background-color: #fff;
  border: 1px solid var(--areia-300);
  border-radius: var(--borda-raio);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

.campo input::placeholder,
.campo textarea::placeholder {
  color: #8b969d;
}

.campo input:hover,
.campo textarea:hover {
  border-color: var(--tinta-suave);
}

.campo input:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--azul-600);
  box-shadow: 0 0 0 3px rgba(46, 74, 114, 0.18);
}

.campo textarea {
  resize: vertical;
  min-height: 8rem;
}

.campo input[aria-invalid="true"],
.campo textarea[aria-invalid="true"] {
  border-color: var(--erro);
}

.campo__erro {
  font-size: var(--t-micro);
  font-weight: 700;
  color: var(--erro);
  min-height: 1rem;
}

/* Consentimento LGPD */
.consentimento {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--esp-3);
  align-items: start;
  background-color: var(--areia-100);
  border: 1px solid var(--areia-200);
  border-radius: var(--borda-raio);
  padding: var(--esp-4);
}

.consentimento input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  accent-color: var(--azul-700);
  cursor: pointer;
  flex: none;
}

.consentimento label {
  font-size: var(--t-mini);
  font-weight: 500;
  line-height: 1.55;
  color: var(--tinta-suave);
  cursor: pointer;
}

.consentimento label a {
  color: var(--azul-700);
  font-weight: 700;
}

.consentimento .campo__erro {
  grid-column: 1 / -1;
}

.formulario__retorno {
  font-size: var(--t-mini);
  font-weight: 700;
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--borda-raio);
  border-left: 3px solid var(--whatsapp);
  background-color: rgba(18, 140, 74, 0.08);
  color: #0c5f32;
}

.formulario__retorno[hidden] {
  display: none;
}

/* Honeypot anti-spam — invisível, sem custo de acessibilidade */
.armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   16. CHAMADA FINAL (CTA)
   --------------------------------------------------------------------------- */
.chamada-final {
  text-align: center;
}

.chamada-final h2 {
  max-width: 24ch;
  margin-inline: auto;
  margin-bottom: var(--esp-5);
}

.chamada-final .texto-guia {
  margin-inline: auto;
  margin-bottom: var(--esp-6);
}

.chamada-final .grupo-botoes {
  justify-content: center;
}

/* ---------------------------------------------------------------------------
   17. AVISO DE EMERGÊNCIA
   --------------------------------------------------------------------------- */
.aviso-emergencia {
  background-color: #fff4e6;
  border-top: 1px solid #f0d8b4;
  border-bottom: 1px solid #f0d8b4;
  color: #6b4310;
}

.aviso-emergencia__interno {
  display: flex;
  gap: var(--esp-4);
  align-items: flex-start;
  padding-block: var(--esp-5);
}

.aviso-emergencia svg {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  color: #b56a10;
  margin-top: 2px;
}

.aviso-emergencia p {
  font-size: var(--t-mini);
  line-height: 1.6;
  margin: 0;
}

.aviso-emergencia strong {
  display: block;
  font-weight: 700;
  margin-bottom: 2px;
}

.aviso-emergencia a {
  color: #8a4f0a;
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
   18. RODAPÉ
   --------------------------------------------------------------------------- */
.rodape {
  background-color: var(--azul-900);
  color: var(--claro-suave);
  position: relative;
}

.rodape::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)'/%3E%3C/svg%3E");
}

.rodape > * {
  position: relative;
  z-index: 1;
}

.rodape__grade {
  display: grid;
  gap: var(--esp-7);
  padding-block: var(--esp-8) var(--esp-7);
}

@media (min-width: 48rem) {
  .rodape__grade {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--esp-6);
  }
}

.rodape h2,
.rodape h3 {
  font-family: var(--fonte-corpo);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dourado);
  margin-bottom: var(--esp-4);
}

.rodape__marca {
  font-family: var(--fonte-titulo);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--areia-50);
  line-height: 1.2;
  margin-bottom: var(--esp-2);
}

.rodape__registro {
  font-size: var(--t-mini);
  line-height: 1.6;
  margin-bottom: var(--esp-4);
}

.rodape address {
  font-style: normal;
  font-size: var(--t-mini);
  line-height: 1.7;
}

.rodape a {
  color: var(--claro-suave);
  text-decoration: none;
}

.rodape a:hover {
  color: var(--dourado-claro);
  text-decoration: underline;
}

.rodape ul {
  list-style: none;
  display: grid;
  gap: var(--esp-3);
  font-size: var(--t-mini);
}

.rodape__sociais {
  display: flex;
  gap: var(--esp-3);
  margin-top: var(--esp-5);
}

.rodape__sociais a {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(244, 240, 232, 0.22);
  border-radius: 50%;
  transition: border-color var(--transicao), color var(--transicao);
}

.rodape__sociais a:hover {
  border-color: var(--dourado);
  color: var(--dourado-claro);
}

.rodape__sociais svg {
  width: 1.15rem;
  height: 1.15rem;
}

.rodape__base {
  border-top: 1px solid rgba(244, 240, 232, 0.14);
  padding-block: var(--esp-5);
  display: grid;
  gap: var(--esp-3);
  font-size: var(--t-micro);
  line-height: 1.6;
}

@media (min-width: 48rem) {
  .rodape__base {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

.rodape__responsavel {
  color: var(--claro-suave);
}

/* ---------------------------------------------------------------------------
   19. BOTÃO FLUTUANTE WHATSAPP
   --------------------------------------------------------------------------- */
.whatsapp-flutuante {
  position: fixed;
  right: var(--esp-4);
  bottom: var(--esp-4);
  z-index: 90;
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  background-color: var(--whatsapp);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 6px 22px -6px rgba(22, 39, 63, 0.5);
  transition: transform var(--transicao), background-color var(--transicao);
}

.whatsapp-flutuante:hover {
  transform: scale(1.06);
  background-color: #0f7a41;
  color: #fff;
}

.whatsapp-flutuante svg {
  width: 1.75rem;
  height: 1.75rem;
}

@media (min-width: 62rem) {
  .whatsapp-flutuante {
    right: var(--esp-6);
    bottom: var(--esp-6);
  }
}

/* ---------------------------------------------------------------------------
   20. CABEÇALHO DE PÁGINAS INTERNAS
   --------------------------------------------------------------------------- */
.pagina-topo {
  background-color: var(--azul-900);
  color: var(--claro);
  padding-block: var(--esp-8);
  position: relative;
  overflow: hidden;
}

.pagina-topo::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)'/%3E%3C/svg%3E");
}

.pagina-topo > * {
  position: relative;
  z-index: 1;
}

.pagina-topo h1 {
  color: var(--areia-50);
  max-width: 20ch;
  margin-bottom: var(--esp-4);
}

.pagina-topo p {
  color: var(--claro-suave);
  font-size: var(--t-destaque);
  max-width: 42rem;
}

/* Trilha de navegação */
.trilha {
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  margin-bottom: var(--esp-5);
}

.trilha ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  align-items: center;
}

.trilha a {
  color: var(--claro-suave);
  text-decoration: none;
}

.trilha a:hover {
  color: var(--dourado-claro);
  text-decoration: underline;
}

.trilha li + li::before {
  content: "/";
  margin-right: var(--esp-2);
  color: rgba(185, 198, 207, 0.5);
}

.trilha [aria-current="page"] {
  color: var(--dourado-claro);
}

/* ---------------------------------------------------------------------------
   21. CONTEÚDO CORRIDO (Sobre, Política de Privacidade)
   --------------------------------------------------------------------------- */
.prosa {
  max-width: 44rem;
}

.prosa > * + * {
  margin-top: var(--esp-4);
}

.prosa h2 {
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  margin-top: var(--esp-7);
  padding-top: var(--esp-5);
  border-top: 1px solid var(--areia-200);
}

.prosa h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.prosa h3 {
  font-size: 1.1875rem;
  margin-top: var(--esp-5);
}

.prosa p,
.prosa li {
  color: var(--tinta-suave);
  line-height: 1.75;
}

.prosa strong {
  color: var(--tinta);
  font-weight: 700;
}

.prosa ul,
.prosa ol {
  padding-left: 1.35rem;
  display: grid;
  gap: var(--esp-2);
}

.prosa li::marker {
  color: var(--dourado-texto);
}

.prosa .destaque {
  background-color: var(--areia-100);
  border-left: 3px solid var(--dourado);
  border-radius: 0 var(--borda-raio) var(--borda-raio) 0;
  padding: var(--esp-5);
  color: var(--tinta);
  font-size: 1rem;
}

.prosa table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-mini);
  margin-top: var(--esp-4);
}

.prosa th,
.prosa td {
  text-align: left;
  padding: var(--esp-3);
  border-bottom: 1px solid var(--areia-200);
  vertical-align: top;
}

.prosa th {
  font-weight: 700;
  color: var(--tinta);
  background-color: var(--areia-100);
}

.prosa td {
  color: var(--tinta-suave);
}

.tabela-rolavel {
  overflow-x: auto;
}

/* ---------------------------------------------------------------------------
   22. COMPARATIVO PRESENCIAL x ONLINE
   --------------------------------------------------------------------------- */
.comparativo {
  display: grid;
  gap: var(--esp-5);
}

@media (min-width: 48rem) {
  .comparativo {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--esp-6);
  }
}

.modalidade {
  background-color: var(--areia-50);
  border: 1px solid var(--areia-200);
  border-radius: var(--borda-raio-g);
  padding: var(--esp-6) var(--esp-5);
}

.modalidade__figura {
  margin-bottom: var(--esp-5);
}

.modalidade__topo {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin-bottom: var(--esp-4);
  padding-bottom: var(--esp-4);
  border-bottom: 1px solid var(--areia-200);
}

.modalidade__topo svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--dourado-texto);
  flex: none;
}

.modalidade h3 {
  font-size: 1.25rem;
}

.modalidade ul {
  list-style: none;
  display: grid;
  gap: var(--esp-3);
}

.modalidade li {
  display: flex;
  gap: var(--esp-3);
  font-size: var(--t-mini);
  line-height: 1.6;
  color: var(--tinta-suave);
}

.modalidade li::before {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 0.75rem;
  margin-top: 0.35rem;
  border-right: 1.5px solid var(--dourado);
  border-bottom: 1.5px solid var(--dourado);
  transform: rotate(45deg);
}

/* ---------------------------------------------------------------------------
   23. IMAGENS DE APOIO
   --------------------------------------------------------------------------- */
.figura {
  margin: 0;
  position: relative;
  border-radius: var(--borda-raio-g);
  overflow: hidden;
  background-color: var(--areia-200);
}

.figura img,
.figura video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Vídeos ambientais: o poster cobre o quadro enquanto o arquivo carrega,
   por isso não há salto de layout nem área vazia. */
.figura video {
  background-color: var(--areia-200);
}

/* Seção com vídeo cobrindo o fundo inteiro, texto por cima.

   O véu é CLARO, não escuro, e essa é a decisão central aqui. Escurecer
   exigiria inverter todo o texto da seção para tom claro, e isso deixaria
   três seções escuras seguidas — marca, FAQ e contato — transformando o
   terço final da página num bloco único sem ritmo.

   Com véu claro o texto escuro do resto do site continua valendo sem
   nenhuma troca de cor, e o vídeo aparece como textura: o grão da madeira
   e a virada da página seguem perceptíveis por baixo.

   0,80 de opacidade sobre o ponto mais escuro do vídeo (a caneca navy)
   resulta em 9,5:1 com o texto; sobre o mais claro, 13,8:1. O mínimo
   exigido é 4,5:1, então há folga larga em todo o quadro — o que importa
   porque o fundo é imagem em movimento e o pior caso muda a cada frame. */
.secao-fundo-video {
  position: relative;
  isolation: isolate;
  background-color: var(--areia-100);
  overflow: hidden;
}

.secao-fundo-video__midia {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.secao-fundo-video__midia video,
.secao-fundo-video__midia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* A seção é mais alta que larga em relação ao 16:9 do arquivo, então o
     recorte é vertical. 55% mantém a mesa e o caderno em quadro. */
  object-position: center 55%;
  display: block;
  /* Só um quinto do vídeo atravessa o véu, e o véu é neutro — o que passa
     chega dessaturado. Saturar a origem devolve cor sem revelar mais
     detalhe, que é o que custaria legibilidade. */
  filter: saturate(1.2);
}

.secao-fundo-video__midia::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(244, 240, 232, 0.8);
}

.secao-fundo-video__conteudo {
  position: relative;
  z-index: 1;
}

/* Rótulos pequenos ganham o tom cheio sobre vídeo.
   --tinta-suave em 0,75rem sobre o véu resulta em 4,8:1 no pior frame:
   passa o mínimo, mas sem margem — e fundo em movimento não perdoa margem
   curta. Com --tinta o pior caso sobe para 10,9:1. Em maiúsculas pequenas
   o tom cheio não pesa. */
.secao-fundo-video .lista-contato .rotulo,
.secao-fundo-video .nota {
  color: var(--tinta);
}

/* Véu reforçado para seções com formulário. O texto de consentimento é
   informação legal: precisa de folga, não do mínimo. */
.secao-fundo-video--forte .secao-fundo-video__midia::after {
  background-color: rgba(244, 240, 232, 0.88);
}

/* Vídeo vertical com áudio — padrão diferente dos loops ambientais.
   Tem controles visíveis e nunca toca sozinho: autoplay com som é hostil, e
   navegador nenhum permitiria mesmo. Com preload="none" no HTML, o arquivo
   só começa a baixar quando a pessoa aperta play — o mesmo comportamento do
   facade de embed, sem terceiro nenhum envolvido. */
.video-vertical {
  margin: 0 auto;
  max-width: 21rem;
  width: 100%;
}

/* Moldura só em volta do vídeo, não da figure inteira — a legenda fica fora
   dela para não ser recortada.

   O arredondamento vive aqui e não no <video>: border-radius aplicado direto
   no elemento de vídeo produz artefato de composição no Chrome, um fio de cor
   diferente na borda, porque o vídeo ganha camada própria na GPU. Recortar
   pelo contêiner evita isso. */
.video-vertical__moldura {
  border-radius: var(--borda-raio-g);
  overflow: hidden;
  line-height: 0;
}

/* Nenhuma proporção forçada e nenhum object-fit: o elemento assume a forma
   natural do arquivo. Assim não existe caixa sobrando para virar tarja, nem
   recorte para deformar o enquadramento. Foi a tentativa de impor 9:16 que
   criou os dois problemas — primeiro a tarja, depois o vídeo cortado. */
.video-vertical video {
  display: block;
  width: 100%;
  height: auto;
}

.video-vertical figcaption {
  margin-top: var(--esp-3);
  font-size: var(--t-micro);
  line-height: 1.5;
  color: var(--claro-suave);
  text-align: center;
}

.figura--panoramica { aspect-ratio: 16 / 9; }
.figura--retrato    { aspect-ratio: 4 / 5; }
.figura--quadrada   { aspect-ratio: 1 / 1; }


.figura figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--esp-6) var(--esp-4) var(--esp-3);
  background: linear-gradient(transparent, rgba(22, 39, 63, 0.85));
  color: var(--areia-50);
  font-size: var(--t-micro);
  line-height: 1.5;
  letter-spacing: 0.04em;
}

/* Bloco de duas colunas: texto + imagem, com ordem alternável */
.bloco-duplo {
  display: grid;
  gap: var(--esp-6);
  align-items: center;
}

@media (min-width: 62rem) {
  .bloco-duplo {
    grid-template-columns: 1fr 1fr;
    gap: var(--esp-8);
  }

  .bloco-duplo--invertido > *:first-child {
    order: 2;
  }

  /* Vídeo 16:9 precisa de largura para respirar. Em colunas iguais ele fica
     baixo e sem presença, então a coluna da imagem recebe mais espaço. */
  .bloco-duplo--midia {
    grid-template-columns: 1.25fr 0.75fr;
    gap: var(--esp-7);
  }
}

/* ---------------------------------------------------------------------------
   24. PLACA DA MARCA (chamada final)
   O fundo do arquivo marca-banner.webp é exatamente --azul-800,
   por isso a placa funde com a seção sem borda visível.
   --------------------------------------------------------------------------- */
.faixa-marca {
  background-color: var(--azul-800);
  text-align: center;
}

.faixa-marca__placa {
  display: block;
  width: 100%;
  max-width: 32rem;
  margin: 0 auto var(--esp-6);
}

.faixa-marca h2 {
  max-width: 22ch;
  margin-inline: auto;
  margin-bottom: var(--esp-5);
}

.faixa-marca .texto-guia {
  margin-inline: auto;
  margin-bottom: var(--esp-6);
}

.faixa-marca .grupo-botoes {
  justify-content: center;
}

/* ---------------------------------------------------------------------------
   25. REVELAÇÃO AO ROLAR (progressive enhancement)
   --------------------------------------------------------------------------- */
.js .revelar {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.js .revelar.visivel {
  opacity: 1;
  transform: none;
}

.js .revelar-lista > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.js .revelar-lista.visivel > * {
  opacity: 1;
  transform: none;
}

.js .revelar-lista.visivel > *:nth-child(1) { transition-delay: 0ms; }
.js .revelar-lista.visivel > *:nth-child(2) { transition-delay: 90ms; }
.js .revelar-lista.visivel > *:nth-child(3) { transition-delay: 180ms; }
.js .revelar-lista.visivel > *:nth-child(4) { transition-delay: 270ms; }
.js .revelar-lista.visivel > *:nth-child(5) { transition-delay: 360ms; }
.js .revelar-lista.visivel > *:nth-child(6) { transition-delay: 450ms; }
.js .revelar-lista.visivel > *:nth-child(7) { transition-delay: 540ms; }
.js .revelar-lista.visivel > *:nth-child(8) { transition-delay: 630ms; }

/* ---------------------------------------------------------------------------
   26. PREFERÊNCIA POR MENOS MOVIMENTO
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js .revelar,
  .js .revelar-lista > * {
    opacity: 1 !important;
    transform: none !important;
  }

  .btn:hover,
  .card-area:hover,
  .whatsapp-flutuante:hover {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   27. IMPRESSÃO
   --------------------------------------------------------------------------- */
@media print {
  .cabecalho,
  .menu,
  .whatsapp-flutuante,
  .mapa,
  .formulario {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .fundo-escuro,
  .hero,
  .rodape,
  .pagina-topo,
  .autoridade {
    background: #fff !important;
    color: #000 !important;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
  }
}