/* Estilo Vívido · Ferraz Lacerda Advogados (exemplo ilustrativo da Rubrica)
   "O Rio em luz de cinema": a paisagem em tela cheia, cores profundas e calmas,
   textura de grão fino, molduras deslocadas e movimento Marcante.
   Paleta e abertura vêm do endereço (?paleta=...&abertura=...), lidos no <head>.
   Cada bloco escolhe um tom (principal, leitura ou faixa) e os componentes só usam
   as cores do tom em que estão. */

@font-face {
  font-family: "Fraunces";
  src: url("../../fontes/fraunces-350.woff2") format("woff2");
  font-weight: 300 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../../fontes/fraunces-italic-350.woff2") format("woff2");
  font-weight: 300 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../../fontes/instrument-sans-var.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
}
/* Fontes reserva com as mesmas medidas: o texto não "pula" quando a fonte chega. */
@font-face {
  font-family: "Fraunces Reserva";
  src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif");
  size-adjust: 92.2%; ascent-override: 106.1%; descent-override: 27.7%; line-gap-override: 0%;
}
@font-face {
  font-family: "Fraunces Reserva";
  src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), local("Liberation Serif Italic");
  font-style: italic;
  size-adjust: 86.6%; ascent-override: 112.9%; descent-override: 29.4%; line-gap-override: 0%;
}
@font-face {
  font-family: "Instrument Reserva";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  size-adjust: 101.2%; ascent-override: 95.8%; descent-override: 24.7%; line-gap-override: 0%;
}
/* Rótulos em maiúsculas: na Arial as maiúsculas têm outra largura, então a reserva delas é própria. */
@font-face {
  font-family: "Instrument Reserva Caixa";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  size-adjust: 98.7%; ascent-override: 98.3%; descent-override: 25.3%; line-gap-override: 0%;
}

/* O exemplo só tem modo claro. "only": o navegador não pode escurecê-lo à força
   (opção "escurecer sites" de alguns tablets e celulares). */
html { color-scheme: only light; }

:root {
  /* Paleta 1: "Mata" (padrão). Verde-musgo, creme e areia dourada. */
  --escuro: #1C302A;
  --escuro-apoio: #27403A;
  --profundo: #14231E;
  --claro: #F3EFE6;
  --claro-superficie: #FAF8F2;
  --luz: #D9BB8E;           /* destaque sobre os fundos escuros */
  --luz-leitura: #7C5E2C;   /* o mesmo destaque, mais fechado, sobre o creme */

  /* Tipografia */
  --fonte-titulo: "Fraunces", "Fraunces Reserva", Georgia, "Times New Roman", serif;
  --fonte-texto: "Instrument Sans", "Instrument Reserva", -apple-system, "Segoe UI", Arial, sans-serif;
  --fonte-caixa: "Instrument Sans", "Instrument Reserva Caixa", -apple-system, "Segoe UI", Arial, sans-serif;
  --tam-texto: 1.0625rem;
  --tam-pequeno: 0.9375rem;
  --tam-rotulo: 0.75rem;
  --tam-h2: clamp(2.375rem, 1.4rem + 3.6vw, 4.625rem);
  --tam-h3: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);

  /* Espaços */
  --largura: 1280px;
  --margem: clamp(1.25rem, 0.5rem + 3.2vw, 4.5rem);
  --secao: clamp(5rem, 3.2rem + 7vw, 9.5rem);
  --cabecalho: 92px;
  --raio: 6px;

  /* Movimento Marcante */
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
  --entrada: 1.3s;
  --distancia: 56px;
}

/* Paleta 2: "Baía". Azul-ardósia, areia e verde-água suave. */
html[data-paleta="baia"] {
  --escuro: #1D2B38;
  --escuro-apoio: #283A4A;
  --profundo: #151F29;
  --claro: #F1EEE8;
  --claro-superficie: #F9F7F3;
  --luz: #A3C4C0;
  --luz-leitura: #36625E;
}
/* Paleta 3: "Terra". Café, marfim e argila. */
html[data-paleta="terra"] {
  --escuro: #2F2622;
  --escuro-apoio: #3E322D;
  --profundo: #221B18;
  --claro: #F5EFE7;
  --claro-superficie: #FBF8F3;
  --luz: #D3A28C;
  --luz-leitura: #93553F;
}

/* Tons: cada bloco escolhe um, e os componentes só usam as cores do tom. */
.tom-principal, .secao--principal, .cabecalho, .abertura, .abertura-manchete, .compromissos, .metodo {
  --fundo: var(--escuro); --superficie: var(--escuro-apoio); --texto: var(--claro);
  --apoio: color-mix(in srgb, var(--claro) 76%, var(--escuro)); --linha: color-mix(in srgb, var(--claro) 16%, transparent);
  --destaque: var(--luz); --botao-fundo: var(--claro); --botao-texto: var(--escuro);
}
.tom-leitura, .secao--leitura, .numeros, .passo {
  --fundo: var(--claro); --superficie: var(--claro-superficie); --texto: var(--escuro);
  --apoio: color-mix(in srgb, var(--escuro) 76%, var(--claro)); --linha: color-mix(in srgb, var(--escuro) 15%, transparent);
  --destaque: var(--luz-leitura); --botao-fundo: var(--escuro); --botao-texto: var(--claro);
}
.tom-faixa, .depoimento, .rodape, .quadro-equipe {
  --fundo: var(--profundo); --superficie: var(--escuro); --texto: var(--claro);
  --apoio: color-mix(in srgb, var(--claro) 72%, var(--profundo)); --linha: color-mix(in srgb, var(--claro) 14%, transparent);
  --destaque: var(--luz); --botao-fundo: var(--claro); --botao-texto: var(--profundo);
}
/* Sobre as fotos da Fachada, o texto é sempre claro, em qualquer paleta. */
.abertura { --texto: #F7F3EC; --apoio: rgba(247, 243, 236, 0.86); --linha: rgba(247, 243, 236, 0.22); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--cabecalho) + 12px); font-variant-numeric: lining-nums; }
body {
  margin: 0;
  background: var(--escuro);
  color: var(--claro);
  font-family: var(--fonte-texto);
  font-size: var(--tam-texto);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--destaque); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 350; margin: 0; text-wrap: balance; color: var(--texto); }
h2 { font-size: var(--tam-h2); line-height: 1.04; letter-spacing: -0.015em; }
h3 { font-size: var(--tam-h3); line-height: 1.2; letter-spacing: -0.005em; }
h1 em, h2 em { font-style: italic; color: var(--destaque); }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote { margin: 0; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--destaque); outline-offset: 3px; }

.pular {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--claro); color: var(--escuro); padding: 0.75rem 1rem;
}
.pular:focus { top: 1rem; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.dentro { width: min(100%, var(--largura)); margin-inline: auto; padding-inline: var(--margem); }

/* Grão fino de filme, gerado pelo próprio navegador: nenhuma imagem a mais para baixar. */
.grao {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- Selo "exemplo ilustrativo" (moldura da Rubrica) ---------- */
.selo-exemplo { position: relative; z-index: 60; background: #070908; color: #E9E9E6; font-size: 0.8125rem; line-height: 1.4; }
.selo-exemplo__dentro {
  width: min(100%, var(--largura)); margin-inline: auto; padding: 0.6rem var(--margem);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.selo-exemplo strong { font-weight: 600; }
.selo-exemplo a { color: #fff; white-space: nowrap; }
/* A combinação aberta vem do próprio CSS: o texto já nasce completo e o selo não muda de tamanho depois. */
html[data-paleta="mata"] .selo-exemplo__combinacao::before { content: ", paleta Mata"; }
html[data-paleta="baia"] .selo-exemplo__combinacao::before { content: ", paleta Baía"; }
html[data-paleta="terra"] .selo-exemplo__combinacao::before { content: ", paleta Terra"; }
html[data-abertura="fachada"] .selo-exemplo__combinacao::after { content: " e abertura Fachada"; }
html[data-abertura="manchete"] .selo-exemplo__combinacao::after { content: " e abertura Manchete"; }
html[data-movimento-pedido][data-abertura="fachada"][data-movimento="sutil"] .selo-exemplo__combinacao::after { content: ", abertura Fachada e movimento Sutil"; }
html[data-movimento-pedido][data-abertura="fachada"][data-movimento="fluido"] .selo-exemplo__combinacao::after { content: ", abertura Fachada e movimento Fluido"; }
html[data-movimento-pedido][data-abertura="fachada"][data-movimento="marcante"] .selo-exemplo__combinacao::after { content: ", abertura Fachada e movimento Marcante"; }
html[data-movimento-pedido][data-abertura="manchete"][data-movimento="sutil"] .selo-exemplo__combinacao::after { content: ", abertura Manchete e movimento Sutil"; }
html[data-movimento-pedido][data-abertura="manchete"][data-movimento="fluido"] .selo-exemplo__combinacao::after { content: ", abertura Manchete e movimento Fluido"; }
html[data-movimento-pedido][data-abertura="manchete"][data-movimento="marcante"] .selo-exemplo__combinacao::after { content: ", abertura Manchete e movimento Marcante"; }

/* ---------- Cabeçalho: transparente sobre a abertura, com fundo ao rolar ---------- */
.cabecalho {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  margin-bottom: calc(-1 * var(--cabecalho));
  color: var(--texto);
  border-bottom: 1px solid transparent;
  transition: background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}
.cabecalho.rolado {
  background: color-mix(in srgb, var(--fundo) 94%, transparent);
  border-bottom-color: var(--linha);
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.7);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .cabecalho.rolado { background: color-mix(in srgb, var(--fundo) 82%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
}
.cabecalho__dentro {
  width: min(100%, var(--largura)); margin-inline: auto; padding-inline: var(--margem);
  height: var(--cabecalho); display: flex; align-items: center; gap: 2.25rem;
}
.marca { display: flex; flex-direction: column; text-decoration: none; color: var(--texto); margin-right: auto; line-height: 1; }
.marca__nome { font-family: var(--fonte-titulo); font-size: 1.625rem; letter-spacing: -0.01em; }
.marca__apoio {
  margin-top: 0.4rem; font-family: var(--fonte-caixa); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--apoio);
}
.menu { display: flex; align-items: center; gap: 2.1rem; }
.menu a:not(.botao) {
  position: relative; color: var(--texto); text-decoration: none; font-size: 0.9375rem; font-weight: 500;
  padding-block: 0.5rem; white-space: nowrap; opacity: 0.92;
}
.menu a:not(.botao)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.15rem; height: 1px; background: var(--destaque);
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--curva);
}
@media (hover: hover) {
  .menu a:not(.botao):hover { opacity: 1; }
  .menu a:not(.botao):hover::after { transform: none; }
}
.menu .botao { min-height: 46px; padding-inline: 1.4rem; font-size: 0.9375rem; }
.menu-botao { display: none; }

/* ---------- Botões: pílulas; o principal em creme sobre o escuro ---------- */
.botao {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 54px; padding: 0.75rem 1.85rem;
  font-family: var(--fonte-texto); font-size: 1rem; font-weight: 500; letter-spacing: 0.005em; line-height: 1.2;
  text-decoration: none; border: 1px solid transparent; border-radius: 999px; cursor: pointer;
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.45s var(--curva), box-shadow 0.45s var(--curva);
}
.botao--cheio { background: var(--botao-fundo); color: var(--botao-texto); }
@media (hover: hover) { .botao--cheio:hover { background: color-mix(in srgb, var(--botao-fundo) 88%, var(--destaque)); transform: translateY(-2px); box-shadow: 0 14px 28px -16px rgba(0, 0, 0, 0.55); } }
.botao--contorno { border-color: color-mix(in srgb, var(--texto) 55%, transparent); color: var(--texto); background: transparent; }
@media (hover: hover) { .botao--contorno:hover { border-color: var(--texto); background: color-mix(in srgb, var(--texto) 10%, transparent); } }

/* Link com seta desenhada */
.seta {
  display: inline-flex; align-items: center; gap: 0.7rem; min-height: 44px;
  font-size: 1rem; font-weight: 500; text-decoration: none; color: var(--texto);
}
.seta::after {
  content: ""; width: 26px; height: 12px; background: var(--destaque);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'><path d='M0 6h24M19 1l5 5-5 5' fill='none' stroke='black' stroke-width='1.3'/></svg>") right center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'><path d='M0 6h24M19 1l5 5-5 5' fill='none' stroke='black' stroke-width='1.3'/></svg>") right center / contain no-repeat;
  transition: transform 0.45s var(--curva);
}
@media (hover: hover) { .seta:hover::after { transform: translateX(6px); } }

/* Sobretítulo: versalete com fio antes, na cor de destaque */
.sobretitulo {
  display: flex; align-items: center; gap: 1rem; margin-bottom: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-family: var(--fonte-caixa); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; line-height: 1.4;
  color: var(--destaque);
}
.sobretitulo::before { content: ""; flex: none; width: 44px; height: 1px; background: currentColor; transform-origin: left; }

/* Título da abertura: duas linhas que sobem e o traço da rubrica sob o itálico */
.abertura h1, .abertura-manchete h1 { letter-spacing: -0.02em; }
.linha { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.linha > span { display: block; }
.linha--rubrica { padding-bottom: 0.42em; margin-bottom: -0.42em; }
h1 em { position: relative; display: inline-block; }
.rubrica {
  position: absolute; left: 0.9em; bottom: -0.34em; width: calc(100% - 0.75em); height: 0.32em;
  overflow: visible; fill: none; stroke: var(--destaque); stroke-linecap: round;
}
.rubrica path { stroke-width: 1.6px; vector-effect: non-scaling-stroke; }
.rubrica .rubrica__fina { stroke-width: 1px; opacity: 0.7; }

/* ---------- O palco: as duas aberturas e a faixa de compromissos ---------- */
.palco { position: relative; }
.palco__sentinela { position: absolute; top: 0; left: 0; width: 1px; height: 140px; pointer-events: none; }

/* ---------- Abertura 1: "Fachada" ----------
   O Rio em tela cheia, com três cenas que se revezam devagar, véu na cor da paleta e título de cinema. */
.abertura {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: max(640px, calc(100svh - 38px));
  padding-top: var(--cabecalho);
  padding-bottom: calc(var(--faixa-altura, 84px) + clamp(3rem, 2rem + 3vw, 5.5rem));
  background: var(--escuro); color: var(--texto);
}
.cenas { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.cena, .cena img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* A cena nova surge por cima da anterior, que só some depois da fusão. */
.cena { opacity: 0; transition: opacity 1.8s ease; }
.cena.ativa { z-index: 1; opacity: 1; }
.cena.saindo { opacity: 1; transition: none; }
.cena img { object-fit: cover; object-position: 50% 50%; }
.abertura::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.14) 26%, transparent 42%),
    linear-gradient(20deg, var(--escuro) 6%, color-mix(in srgb, var(--escuro) 78%, transparent) 38%, transparent 76%);
}
.abertura .grao { z-index: -1; }
.abertura__dentro { position: relative; z-index: 1; width: min(100%, var(--largura)); margin-inline: auto; padding-inline: var(--margem); }
.abertura h1 { font-size: clamp(3.125rem, 1.4rem + 5.2vw, 6rem); line-height: 0.98; color: #FBF8F2; }
.abertura__apoio { margin-top: clamp(1.75rem, 1.4rem + 1vw, 2.5rem); max-width: 31rem; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.55; color: var(--apoio); }
.abertura__acoes { margin-top: clamp(2rem, 1.5rem + 1.2vw, 2.75rem); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }

/* Indicador da cena, com fios de progresso e o botão de pausa. */
.cenas__controle {
  position: absolute; z-index: 2; right: var(--margem); bottom: calc(var(--faixa-altura, 84px) + 1.75rem);
  display: flex; align-items: center; gap: 0.9rem;
  font-family: var(--fonte-caixa); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--apoio);
}
.cenas__nome { white-space: nowrap; }
.cenas__progresso { display: flex; gap: 6px; }
.cenas__progresso i { position: relative; display: block; width: 26px; height: 2px; overflow: hidden; background: rgba(247, 243, 236, 0.3); transition: width 0.8s var(--curva); }
.cenas__progresso i::after { content: ""; position: absolute; inset: 0; background: var(--destaque); transform: scaleX(0); transform-origin: left; }
.cenas__progresso i.ativa { width: 52px; }
.cenas__progresso i.ativa::after { transform: none; }
.cenas__pausa {
  position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid rgba(247, 243, 236, 0.45); border-radius: 50%; background: transparent; color: var(--texto); cursor: pointer;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
@media (hover: hover) { .cenas__pausa:hover { border-color: var(--texto); background: rgba(247, 243, 236, 0.1); } }
/* Dois traços de pausa; quando pausado, vira o triângulo de continuar. */
.cenas__pausa::before { content: ""; width: 9px; height: 11px; border-inline: 2px solid currentColor; }
.cenas__pausa[aria-pressed="true"]::before { width: 0; height: 0; border: 0; border-left: 10px solid currentColor; border-block: 6px solid transparent; margin-left: 3px; }
.cenas__pausa[hidden] { display: none; }

/* ---------- Abertura 2: "Manchete" ----------
   Fundo de cor profunda com grão, título grande, os números logo abaixo
   e uma foto vertical com moldura fina deslocada. */
.abertura-manchete {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--fundo); color: var(--texto);
  padding-block: calc(var(--cabecalho) + clamp(2.5rem, 1rem + 4vw, 5rem)) clamp(3.5rem, 2rem + 4vw, 6rem);
}
.abertura-manchete::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 90% at 85% 10%, color-mix(in srgb, var(--escuro-apoio) 90%, transparent) 0%, transparent 60%);
}
.manchete__grade { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(3rem, 2rem + 4vw, 6rem); align-items: center; }
.abertura-manchete h1 { font-size: clamp(3.125rem, 1.5rem + 4vw, 5.25rem); line-height: 0.99; }
.manchete__apoio { margin-top: clamp(1.75rem, 1.4rem + 1vw, 2.5rem); max-width: 32rem; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.55; color: var(--apoio); }
.manchete__acoes { margin-top: clamp(2rem, 1.5rem + 1.2vw, 2.75rem); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.manchete__numeros { display: flex; gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); margin: clamp(2.5rem, 2rem + 2vw, 3.75rem) 0 0; padding-top: 1.75rem; border-top: 1px solid var(--linha); }
.manchete__numeros > div { display: flex; flex-direction: column-reverse; gap: 0.35rem; }
.manchete__numeros dd { margin: 0; font-family: var(--fonte-titulo); font-size: clamp(2.5rem, 1.8rem + 2vw, 3.5rem); line-height: 1; color: var(--destaque); }
.manchete__numeros dt { font-size: var(--tam-pequeno); color: var(--apoio); }
.manchete__foto { position: relative; margin: 14px 0 0 14px; }
.manchete__foto picture { position: relative; z-index: 1; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: var(--escuro-apoio); }
.manchete__foto img { width: 100%; height: 100%; object-fit: cover; }
.manchete__foto::before {
  content: ""; position: absolute; z-index: 0; inset: -14px 14px 2.6rem -14px; border: 1px solid var(--destaque); opacity: 0.8; pointer-events: none;
}
.manchete__foto figcaption {
  margin-top: 1rem; font-family: var(--fonte-caixa); font-size: var(--tam-rotulo); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--apoio);
}

/* Troca de abertura: só uma aparece. Na Manchete, os números já estão na primeira tela. */
html[data-abertura="manchete"] .abertura--fachada,
html[data-abertura="manchete"] .numeros,
html:not([data-abertura="manchete"]) .abertura-manchete { display: none; }

/* ---------- Três compromissos ----------
   Na Fachada, uma faixa translúcida colada ao pé da foto; na Manchete, uma faixa sólida. */
.compromissos {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--superficie); color: var(--texto); border-top: 1px solid var(--linha);
}
.compromissos li {
  display: flex; align-items: center; gap: 0.9rem; min-height: var(--faixa-altura, 84px);
  padding: 1.25rem clamp(1.25rem, 0.5rem + 2.5vw, 3rem); font-size: 0.9375rem; line-height: 1.4;
}
.compromissos li + li { border-left: 1px solid var(--linha); }
.compromissos svg { flex: none; width: 26px; height: 26px; fill: none; stroke: var(--destaque); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
html[data-abertura="fachada"] .compromissos {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
  background: color-mix(in srgb, var(--escuro) 72%, transparent);
  border-top-color: rgba(247, 243, 236, 0.2);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  html[data-abertura="fachada"] .compromissos { background: color-mix(in srgb, var(--escuro) 45%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
}
html[data-abertura="fachada"] .compromissos li + li { border-left-color: rgba(247, 243, 236, 0.14); }

/* ---------- Números: faixa creme com serifa grande ---------- */
.numeros { position: relative; background: var(--fundo); color: var(--texto); padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); }
.numeros__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 auto; }
.numeros__lista > div {
  display: flex; flex-direction: column; gap: 0.9rem;
  padding: 0.25rem clamp(1rem, 0.5rem + 1.5vw, 2rem); border-left: 1px solid var(--linha);
}
.numeros__lista > div:first-child { border-left: 0; padding-left: 0; }
.numeros dd {
  order: -1; margin: 0; font-family: var(--fonte-titulo); font-size: clamp(3.25rem, 1.8rem + 4.6vw, 6.5rem); line-height: 0.92;
  letter-spacing: -0.03em; font-variant-numeric: lining-nums tabular-nums; color: var(--texto);
}
.numeros dt {
  display: flex; align-items: center; gap: 0.75rem;
  font-family: var(--fonte-caixa); font-size: var(--tam-rotulo); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--apoio);
}
.numeros dt::before { content: ""; flex: none; width: 22px; height: 1px; background: var(--destaque); }

/* ---------- Seções ---------- */
.secao { position: relative; padding-block: var(--secao); background: var(--fundo); color: var(--texto); }
.secao__topo {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem clamp(2rem, 1rem + 4vw, 6rem); align-items: end;
  margin-bottom: clamp(3rem, 2rem + 3vw, 5rem);
}
.secao__topo .rotulo { grid-column: 1 / -1; }
.secao__topo h2 { grid-column: 1; }
.secao__intro { grid-column: 2; max-width: 30rem; padding-bottom: 0.4em; color: var(--apoio); }
/* Nos blocos de duas colunas, o título é um pouco menor para caber na metade da página. */
.escritorio__texto h2, .perguntas__topo h2, .contato__texto h2 { font-size: clamp(2.25rem, 1.4rem + 2.8vw, 3.75rem); }
/* Rótulo da seção: número em itálico e o nome em versalete, com fio antes. */
.rotulo {
  display: flex; align-items: baseline; gap: 0.9rem;
  font-family: var(--fonte-caixa); font-size: var(--tam-rotulo); font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--apoio);
}
.rotulo span {
  display: inline-flex; align-items: center; gap: 0.9rem;
  font-family: var(--fonte-titulo); font-style: italic; font-size: 1.375rem; letter-spacing: 0; text-transform: none; color: var(--destaque);
}
.rotulo span::before { content: ""; width: 40px; height: 1px; background: currentColor; align-self: center; }

/* ---------- Áreas: a lista à esquerda e a área escolhida à direita ---------- */
.area__aba { font-size: inherit; }
.area__aba button {
  display: flex; align-items: baseline; gap: 1.25rem; width: 100%; min-height: 64px; padding: 1.1rem 0;
  background: none; border: 0; border-top: 1px solid var(--linha); color: var(--texto); cursor: pointer; text-align: left;
  font-family: var(--fonte-titulo); font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); line-height: 1.2; letter-spacing: -0.01em;
}
.area__num { flex: none; width: 2rem; font-family: var(--fonte-caixa); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.1em; color: var(--destaque); }
.area__painel {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem;
  padding: clamp(1.75rem, 1rem + 2.5vw, 3.25rem); margin-bottom: 1.5rem;
  background: var(--superficie); border-radius: var(--raio);
}
.area__icone { width: 52px; height: 52px; fill: none; stroke: var(--destaque); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.area__nome { font-family: var(--fonte-titulo); font-style: italic; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); line-height: 1.1; color: var(--texto); }
.area__painel > p:not(.area__nome) { max-width: 30rem; color: var(--apoio); font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); }
.area__painel .seta { margin-top: 0.5rem; }

/* Com o app.js, vira a lista de escolha: no computador, a área aberta fica ao lado. */
.areas-ligadas .area__painel:not(.aberta) { display: none; }
.areas-ligadas .area__aba button { color: var(--apoio); transition: color 0.35s ease, padding 0.5s var(--curva); }
.areas-ligadas .area__aba button[aria-expanded="true"] { color: var(--texto); }
@media (hover: hover) { .areas-ligadas .area__aba button:hover { color: var(--texto); } }
@media (min-width: 900px) {
  /* As cinco áreas ficam na mesma casa da grade, todas com a altura da maior:
     trocar de área não mexe em nada ao redor. As escondidas somem também para o leitor de tela. */
  .areas-ligadas {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: repeat(5, auto) 1fr;
    column-gap: clamp(2.5rem, 1rem + 5vw, 6.5rem); align-items: start;
  }
  .areas-ligadas .area__aba { grid-column: 1; position: relative; }
  .areas-ligadas .area__aba:nth-last-of-type(1) button { border-bottom: 1px solid var(--linha); }
  .areas-ligadas .area__painel { grid-column: 2; grid-row: 1 / -1; align-self: stretch; margin: 0; justify-content: center; }
  .areas-ligadas .area__painel:not(.aberta) { display: flex; visibility: hidden; opacity: 0; pointer-events: none; }
  /* Fio de destaque que corre ao lado da área escolhida. */
  .areas-ligadas .area__aba button::after {
    content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: var(--destaque);
    transform: scaleX(0); transform-origin: left; transition: transform 0.8s var(--curva);
  }
  .areas-ligadas .area__aba button[aria-expanded="true"]::after { transform: none; }
  .areas-ligadas .area__aba button[aria-expanded="true"] { padding-left: 0.75rem; }
}
/* No celular, cada área abre e fecha embaixo do próprio nome. */
@media (max-width: 899px) {
  .areas-ligadas .area__aba button::after {
    content: ""; flex: none; width: 32px; height: 32px; margin-left: auto; align-self: center;
    border: 1px solid var(--linha); border-radius: 50%;
    background: linear-gradient(var(--destaque), var(--destaque)) center / 11px 1px no-repeat,
                linear-gradient(var(--destaque), var(--destaque)) center / 1px 11px no-repeat;
    transition: transform 0.4s var(--curva);
  }
  .areas-ligadas .area__aba button[aria-expanded="true"]::after { transform: rotate(135deg); }
  .areas-ligadas .area__aba:nth-last-of-type(1) button[aria-expanded="false"] { border-bottom: 1px solid var(--linha); }
}

.convite {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem 3rem;
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); padding-top: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
  border-top: 1px solid var(--linha);
}
.convite__texto { max-width: 42rem; color: var(--apoio); }
.convite__texto strong { display: block; margin-bottom: 0.3rem; font-family: var(--fonte-titulo); font-style: italic; font-weight: 350; font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); line-height: 1.25; color: var(--texto); }

/* ---------- O escritório: duas fotos sobrepostas e o contorno das montanhas ---------- */
.escritorio-secao { overflow: hidden; isolation: isolate; padding-bottom: calc(var(--secao) + clamp(4rem, 2rem + 6vw, 8rem)); }
.serra {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; width: 100%; height: clamp(110px, 6rem + 6vw, 200px);
  fill: none; stroke: var(--destaque); stroke-width: 1px; stroke-linecap: round; stroke-linejoin: round; opacity: 0.45;
}
.serra path { vector-effect: non-scaling-stroke; }
.serra .serra__mar { opacity: 0.5; }
.escritorio { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(3rem, 2rem + 5vw, 7rem); align-items: center; }
.escritorio__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.escritorio__texto h2 { margin-block: 0.5rem 0.75rem; }
.escritorio__texto > p { color: var(--apoio); max-width: 34rem; }
.escritorio__frase { padding: 0.25rem 0 0.25rem 1.5rem; border-left: 1px solid var(--destaque); }
.escritorio__frase p { font-family: var(--fonte-titulo); font-style: italic; font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem); line-height: 1.25; color: var(--texto); }
.escritorio__fotos { position: relative; padding: 18px 0 clamp(5rem, 3rem + 6vw, 8rem) 18px; }
.escritorio__foto picture { position: relative; z-index: 1; display: block; overflow: hidden; border-radius: 2px; background: var(--escuro-apoio); }
.escritorio__foto img { width: 100%; height: 100%; object-fit: cover; }
.escritorio__foto--grande { position: relative; width: 88%; }
.escritorio__foto--grande picture { aspect-ratio: 4 / 3; }
.escritorio__foto--grande::before {
  content: ""; position: absolute; z-index: 0; inset: -18px 18px 18px -18px; border: 1px solid var(--destaque); pointer-events: none;
}
.escritorio__foto--pequena {
  position: absolute; z-index: 2; right: 0; bottom: 0; width: 42%;
  padding: 10px; background: var(--fundo); border-radius: 4px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.45);
}
.escritorio__foto--pequena picture { aspect-ratio: 3 / 4; }
.escritorio__legenda {
  position: absolute; left: 18px; bottom: 1.25rem; max-width: 50%;
  font-family: var(--fonte-caixa); font-size: var(--tam-rotulo); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.5; color: var(--apoio);
}

/* ---------- Como trabalhamos: paisagem em tela cheia e cartões claros por cima ---------- */
.metodo { overflow: hidden; isolation: isolate; color: var(--texto); background: var(--escuro); }
.metodo__foto { position: absolute; inset: -12% 0; z-index: -2; will-change: transform; }
.metodo__foto picture, .metodo__foto img { display: block; width: 100%; height: 100%; }
.metodo__foto img { object-fit: cover; object-position: 50% 40%; }
.metodo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--escuro) 82%, transparent) 0%, color-mix(in srgb, var(--escuro) 40%, transparent) 55%, color-mix(in srgb, var(--escuro) 70%, transparent) 100%);
}
.metodo .secao__intro { color: var(--apoio); }
.passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 0.5rem + 1.5vw, 2rem); align-items: start; }
.passo {
  position: relative; display: flex; flex-direction: column; gap: 0.9rem;
  padding: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem); border-radius: var(--raio);
  background: color-mix(in srgb, var(--fundo) 94%, transparent); color: var(--texto);
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, 0.6);
}
.passo:nth-child(2) { margin-top: clamp(0rem, -2rem + 5vw, 3rem); }
.passo:nth-child(3) { margin-top: clamp(0rem, -4rem + 10vw, 6rem); }
.passo__numero {
  font-family: var(--fonte-titulo); font-style: italic; font-size: clamp(3rem, 2.4rem + 2vw, 4.25rem); line-height: 0.9; color: var(--destaque);
  padding-bottom: 1rem; margin-bottom: 0.25rem; border-bottom: 1px solid var(--linha);
}
.passo p { color: var(--apoio); }

/* ---------- Equipe: monogramas em círculos, dentro de um quadro escuro com filete ---------- */
.quadro-equipe {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(1.5rem, 0.5rem + 4vw, 5rem);
  background: var(--fundo); color: var(--texto); border-radius: var(--raio);
}
.quadro-equipe::after { content: ""; position: absolute; inset: 12px; z-index: 0; border: 1px solid color-mix(in srgb, var(--destaque) 45%, transparent); border-radius: 3px; pointer-events: none; }
.equipe { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem clamp(1rem, 0.5rem + 1.5vw, 2.5rem); }
.pessoa { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; text-align: center; }
.pessoa__monograma {
  display: grid; place-items: center; width: clamp(108px, 80px + 4vw, 148px); aspect-ratio: 1; margin-bottom: 1.4rem; border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--destaque), inset 0 0 0 8px var(--fundo), inset 0 0 0 9px color-mix(in srgb, var(--destaque) 45%, transparent);
  background: var(--superficie);
  font-family: var(--fonte-titulo); font-style: italic; font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); letter-spacing: -0.02em; color: var(--destaque);
  transition: transform 0.7s var(--curva);
}
@media (hover: hover) { .pessoa:hover .pessoa__monograma { transform: translateY(-6px); } }
.pessoa h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); }
.pessoa__cargo { font-family: var(--fonte-caixa); font-size: var(--tam-rotulo); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--apoio); }
.pessoa__area { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--linha); font-size: var(--tam-pequeno); color: var(--destaque); }

/* ---------- Depoimento ---------- */
.depoimento { overflow: hidden; isolation: isolate; text-align: center; }
.depoimento .grao { z-index: -1; }
.depoimento__aspas {
  display: block; height: 0.5em; margin-bottom: 0.2em; overflow: visible;
  font-family: var(--fonte-titulo); font-style: italic; font-size: clamp(6rem, 4rem + 6vw, 10rem); line-height: 1; color: var(--destaque);
}
.depoimento__texto { max-width: 62rem; display: flex; flex-direction: column; align-items: center; }
.depoimento blockquote p {
  font-family: var(--fonte-titulo); font-style: italic; font-size: clamp(1.875rem, 1.1rem + 3vw, 3.5rem); line-height: 1.18; letter-spacing: -0.01em; color: var(--texto);
}
.depoimento figcaption {
  margin-top: 2.5rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.75rem 1.25rem;
  color: var(--apoio); font-size: var(--tam-pequeno);
}
.depoimento figcaption::before { content: ""; width: 40px; height: 1px; background: var(--destaque); }
.depoimento figcaption span {
  font-family: var(--fonte-caixa); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
  padding: 0.3rem 0.75rem; border: 1px solid var(--linha); border-radius: 999px;
}

/* ---------- Perguntas ---------- */
.perguntas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem clamp(2.5rem, 2rem + 4vw, 6rem); align-items: start; }
.perguntas__topo { display: flex; flex-direction: column; gap: 1.25rem; }
.perguntas__topo h2 { margin-top: 0.5rem; }
.perguntas__topo > p:last-child { color: var(--apoio); }
.perguntas__lista { border-top: 1px solid var(--texto); }
.perguntas details { border-bottom: 1px solid var(--linha); }
.perguntas summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  min-height: 76px; padding-block: 1.25rem;
  font-family: var(--fonte-titulo); font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.3;
}
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after {
  content: ""; flex: none; width: 38px; height: 38px; border: 1px solid var(--linha); border-radius: 50%;
  background: linear-gradient(var(--destaque), var(--destaque)) center / 12px 1px no-repeat,
              linear-gradient(var(--destaque), var(--destaque)) center / 1px 12px no-repeat;
  transition: transform 0.45s var(--curva), border-color 0.3s ease, background-color 0.3s ease;
}
@media (hover: hover) { .perguntas summary:hover::after { border-color: var(--destaque); } }
.perguntas details[open] summary::after { transform: rotate(135deg); }
.perguntas details p { padding-bottom: 1.75rem; max-width: 40rem; color: var(--apoio); }

/* ---------- Contato: o formulário dentro de um bloco de cor ---------- */
.contato__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 2rem + 5vw, 7rem); align-items: start; }
.contato__texto { display: flex; flex-direction: column; gap: 1.25rem; }
.contato__texto h2 { margin-top: 0.5rem; }
.contato__texto > p { color: var(--apoio); max-width: 30rem; }
.contato__dados { display: grid; gap: 1.5rem; margin: 1rem 0 0; padding-top: 2rem; border-top: 1px solid var(--linha); }
.contato__dados dt { font-family: var(--fonte-caixa); font-size: var(--tam-rotulo); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--apoio); }
.contato__dados dd { margin: 0.35rem 0 0; font-family: var(--fonte-titulo); font-size: 1.375rem; line-height: 1.35; }

.formulario {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 1.4rem;
  padding: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  background: var(--superficie); color: var(--texto); border-radius: var(--raio);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6);
}
.formulario .grao { z-index: -1; opacity: 0.12; }
.formulario__titulo { font-family: var(--fonte-titulo); font-size: clamp(1.625rem, 1.4rem + 0.8vw, 2.125rem); line-height: 1.15; }
.campo { display: grid; gap: 0.45rem; }
.campo label { font-size: var(--tam-pequeno); font-weight: 500; color: var(--apoio); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 50px; padding: 0.7rem 1rem;
  font: inherit; font-size: 1.0625rem; color: var(--texto);
  background: color-mix(in srgb, var(--claro) 6%, transparent); border: 1px solid color-mix(in srgb, var(--claro) 22%, transparent); border-radius: 4px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.campo textarea { resize: vertical; min-height: 112px; }
.campo select {
  appearance: none; padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--destaque) 50%), linear-gradient(135deg, var(--destaque) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat;
}
.campo select option { color: #111; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--destaque); box-shadow: 0 0 0 1px var(--destaque); background-color: color-mix(in srgb, var(--claro) 9%, transparent); }
.formulario .botao { margin-top: 0.5rem; width: 100%; }
.formulario__aviso { font-size: 0.875rem; color: var(--apoio); text-align: center; }

/* ---------- Rodapé ---------- */
.rodape {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--fundo); color: var(--apoio); font-size: var(--tam-pequeno);
  padding-top: clamp(9rem, 7rem + 6vw, 13rem);
}
.serra--rodape { top: 0; bottom: auto; height: clamp(100px, 5rem + 6vw, 170px); opacity: 0.35; }
.rodape a { color: var(--texto); text-decoration: none; }
@media (hover: hover) { .rodape a:hover { color: var(--destaque); } }
.rodape__grade { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; padding-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
.rodape__marca { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.rodape__nome { display: flex; flex-direction: column; font-family: var(--fonte-titulo); font-size: 2rem; line-height: 1; color: var(--texto); }
.rodape__nome span { margin-top: 0.5rem; font-family: var(--fonte-caixa); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--apoio); }
.rodape__marca .botao { margin-top: 0.5rem; min-height: 48px; }
.rodape__titulo { font-family: var(--fonte-caixa); font-size: var(--tam-rotulo); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--destaque); margin-bottom: 1rem; }
.rodape ul { display: grid; gap: 0.5rem; }
.rodape__base {
  display: grid; gap: 0.75rem; padding-block: 1.75rem 2.25rem; font-size: 0.8125rem; line-height: 1.6;
  background: linear-gradient(var(--linha), var(--linha)) top / 100% 1px no-repeat content-box;
}
.rodape__creditos a { color: var(--apoio); text-decoration: underline; text-decoration-color: var(--linha); }
@media (hover: hover) { .rodape__creditos a:hover { color: var(--texto); } }

/* ---------- Movimento Marcante ----------
   Expressivo, mas de cinema, sem pulos nem giros: a foto da abertura se aproxima
   bem devagar, o título aparece linha por linha, o traço da rubrica se desenha,
   as cenas se revezam em fusão lenta, as fotos se revelam como cortina, a paisagem
   de "Como trabalhamos" corre mais devagar que os cartões, as montanhas se desenham
   e os números contam. Tudo só em transparência, posição e recorte.
   O app.js marca a página com a classe "js"; sem ela, tudo já aparece pronto.
   Com "reduzir movimento" no aparelho, nada se move e fica a primeira cena. */
@media (prefers-reduced-motion: no-preference) {
  .js .revela {
    opacity: 0; transform: translateY(var(--distancia));
    transition: opacity 1s ease, transform var(--entrada) var(--curva);
    transition-delay: var(--atraso, 0ms);
  }
  .js .revela.visivel { opacity: 1; transform: none; }

  /* Títulos das seções: cada palavra sobe de trás de uma linha invisível. */
  .palavras { display: inline; }
  .palavra { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0.08em 0.12em 0; margin: 0 -0.08em -0.12em 0; }
  .palavra > span { display: inline-block; transform: translateY(110%); transition: transform var(--entrada) var(--curva); transition-delay: calc(var(--i) * 60ms + var(--atraso, 0ms)); }
  .palavras-revela.visivel .palavra > span { transform: none; }

  /* Fotos: abrem como uma cortina, de baixo para cima, e se acomodam. */
  .js .revela-foto picture { clip-path: inset(100% 0 0 0); transition: clip-path 1.5s var(--curva); }
  .js .revela-foto img { transform: scale(1.18); transition: transform 2.2s var(--curva); }
  .js .revela-foto.escritorio__foto--grande::before { opacity: 0; transform: translate(14px, -14px); transition: opacity 1s ease 0.6s, transform 1.5s var(--curva) 0.6s; }
  /* A foto pequena passa por cima da grande: em vez de surgir em transparência
     (a grande apareceria através dela), a moldura inteira abre como cortina,
     sempre opaca. As margens negativas deixam a sombra aparecer no fim. */
  .js .revela-foto.escritorio__foto--pequena { clip-path: inset(100% -80px 0 -80px); transform: translateY(40px); transition: clip-path 1.5s var(--curva) 0.5s, transform 1.5s var(--curva) 0.5s; }
  .js .revela-foto.pronta picture { clip-path: inset(0 0 0 0); }
  .js .revela-foto.pronta img { transform: none; }
  .js .revela-foto.pronta::before { opacity: 1; transform: none; }
  .js .revela-foto.escritorio__foto--pequena.pronta { clip-path: inset(-80px); transform: none; }

  /* O contorno das montanhas se desenha da esquerda para a direita. */
  .js .revela-traco path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 3.2s cubic-bezier(0.45, 0, 0.2, 1); }
  .js .revela-traco .serra__cruz { transition-delay: 1.8s; transition-duration: 0.8s; }
  .js .revela-traco.visivel path { stroke-dashoffset: 0; }

  /* Áreas: a área escolhida chega deslizando. */
  .areas-ligadas .area__painel.aberta { animation: painel-chega 0.8s var(--curva) both; }
  @keyframes painel-chega { from { opacity: 0; transform: translateY(18px); } }

  /* Abertura: a foto se aproxima devagar, o título sobe linha por linha,
     a rubrica se desenha e o resto chega em sequência. */
  .cena.ativa img, .cena.saindo img { animation: aproxima 11s cubic-bezier(0.25, 0.1, 0.25, 1) both; }
  @keyframes aproxima { from { transform: scale(1.001); } to { transform: scale(1.09); } }
  .abertura.pausada .cena.ativa img { animation-play-state: paused; }
  .linha > span { animation: linha-sobe 1.3s var(--curva) both; }
  .linha + .linha > span { animation-delay: 0.14s; }
  @keyframes linha-sobe { from { transform: translateY(105%); } }
  .rubrica path { stroke-dasharray: 1; animation: rubrica 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.9s both; }
  .rubrica .rubrica__fina { animation-delay: 1.9s; animation-duration: 0.9s; }
  @keyframes rubrica { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  .sobretitulo::before { animation: fio-desenha 1.2s var(--curva) 0.15s both; }
  @keyframes fio-desenha { from { transform: scaleX(0); } }
  .abertura .sobretitulo, .abertura-manchete .sobretitulo, .abertura__apoio, .abertura__acoes, .manchete__apoio, .manchete__acoes, .manchete__numeros, .cenas__controle {
    animation: sobe 1.2s var(--curva) both;
  }
  .abertura__apoio, .manchete__apoio { animation-delay: 0.35s; }
  .abertura__acoes, .manchete__acoes { animation-delay: 0.5s; }
  .manchete__numeros, .cenas__controle { animation-delay: 0.7s; }
  @keyframes sobe { from { opacity: 0; transform: translateY(28px); } }
  html[data-abertura="fachada"] .compromissos { animation: faixa-sobe 1.4s var(--curva) 0.6s both; }
  @keyframes faixa-sobe { from { transform: translateY(100%); } }
  .manchete__foto picture { animation: cortina 1.6s var(--curva) 0.2s both; }
  .manchete__foto img { animation: acomoda 2.4s var(--curva) 0.2s both; }
  .manchete__foto::before { animation: moldura 1.4s var(--curva) 0.9s both; }
  @keyframes cortina { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes acomoda { from { transform: scale(1.18); } }
  @keyframes moldura { from { opacity: 0; transform: translate(14px, -14px); } }
  /* O fio da cena atual se enche durante a cena. */
  .cenas__progresso i.ativa::after { animation: progresso var(--duracao-cena, 7s) linear both; }
  .abertura.pausada .cenas__progresso i.ativa::after { animation-play-state: paused; }
  @keyframes progresso { from { transform: scaleX(0); } }
}
/* ---------- Movimentos Sutil e Fluido ----------
   O Marcante acima é o padrão do Vívido. Os outros dois níveis vêm pelo endereço
   (?movimento=sutil ou fluido, escolhido no formulário), no tom do estilo.
   Sutil: só o surgir curto dos blocos; a Fachada fica na primeira cena, os títulos,
   os números, a rubrica e as montanhas já aparecem prontos.
   Fluido: os blocos sobem, as palavras surgem, as fotos abrem como cortina e as cenas
   se revezam, mas sem o aproximar lento das fotos e sem a paisagem que corre devagar. */
@media (prefers-reduced-motion: no-preference) {
  html[data-movimento="sutil"] { --distancia: 14px; --entrada: 0.8s; }
  html[data-movimento="sutil"].js .revela-foto picture { clip-path: none; transition: none; }
  html[data-movimento="sutil"].js .revela-foto img { opacity: 0; transform: scale(1.04); transition: opacity 0.9s ease, transform 1.4s var(--curva); }
  html[data-movimento="sutil"].js .revela-foto.pronta img { opacity: 1; transform: none; }
  html[data-movimento="sutil"].js .revela-foto.escritorio__foto--grande::before { opacity: 1; transform: none; transition: none; }
  /* A foto pequena passa por cima da grande: aparece pronta, sem transparência. */
  html[data-movimento="sutil"].js .revela-foto.escritorio__foto--pequena { clip-path: inset(-80px); transform: none; transition: none; }
  html[data-movimento="sutil"].js .revela-foto.escritorio__foto--pequena img { opacity: 1; transform: none; transition: none; }
  html[data-movimento="sutil"].js .revela-traco path { stroke-dashoffset: 0; transition: none; }
  html[data-movimento="sutil"] .areas-ligadas .area__painel.aberta { animation: vivido-esmaece 0.5s ease both; }
  html[data-movimento="sutil"] .cena.ativa img,
  html[data-movimento="sutil"] .cena.saindo img,
  html[data-movimento="sutil"] .linha > span,
  html[data-movimento="sutil"] .rubrica path,
  html[data-movimento="sutil"] .sobretitulo::before,
  html[data-movimento="sutil"] .compromissos,
  html[data-movimento="sutil"] .abertura .sobretitulo,
  html[data-movimento="sutil"] .abertura-manchete .sobretitulo,
  html[data-movimento="sutil"] .abertura__apoio,
  html[data-movimento="sutil"] .abertura__acoes,
  html[data-movimento="sutil"] .manchete__apoio,
  html[data-movimento="sutil"] .manchete__acoes,
  html[data-movimento="sutil"] .manchete__numeros,
  html[data-movimento="sutil"] .cenas__controle { animation: none; }
  html[data-movimento="sutil"] .manchete__foto picture, html[data-movimento="sutil"] .manchete__foto img, html[data-movimento="sutil"] .manchete__foto::before { animation: none; }
  html[data-movimento="sutil"] .manchete__foto { animation: vivido-esmaece 1s ease both; }
  @keyframes vivido-esmaece { from { opacity: 0; } }
  /* Sem cenas que se revezam, o marcador das cenas sai de vista. */
  html[data-movimento="sutil"] .cenas__controle { visibility: hidden; }

  html[data-movimento="fluido"] { --distancia: 36px; --entrada: 1.1s; }
  html[data-movimento="fluido"] .cena.ativa img, html[data-movimento="fluido"] .cena.saindo img { animation: none; }
  html[data-movimento="fluido"].js .revela-foto img { transform: scale(1.1); transition-duration: 1.8s; }
  html[data-movimento="fluido"].js .revela-foto.pronta img { transform: none; }
  html[data-movimento="fluido"] .palavra > span { transition-delay: calc(var(--i) * 50ms + var(--atraso, 0ms)); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
  .equipe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rodape__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rodape__marca { grid-column: 1 / -1; }
  .manchete__grade { grid-template-columns: minmax(0, 1fr); }
  .manchete__foto { max-width: 34rem; }
  .passos { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
  .passo:nth-child(n) { margin-top: 0; }
  .passo:nth-child(2) { margin-left: clamp(0rem, -2rem + 8vw, 4rem); }
  .passo:nth-child(3) { margin-left: clamp(0rem, -4rem + 16vw, 8rem); }
}

/* Computador estreito: o menu inteiro ainda cabe numa linha, com menos ar. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .cabecalho__dentro { gap: 1.5rem; }
  .menu { gap: 1.4rem; }
  .menu .botao { padding-inline: 1.1rem; }
}

/* Menu recolhido: tablet e celular */
@media (max-width: 1023px) {
  :root { --cabecalho: 76px; }
  .menu-botao {
    display: inline-flex; align-items: center; gap: 0.75rem; min-height: 44px; padding: 0 0.25rem;
    background: none; border: 0; font-family: var(--fonte-caixa); font-size: var(--tam-rotulo); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--texto); cursor: pointer;
  }
  .menu-botao__traco, .menu-botao__traco::before { display: block; width: 26px; height: 1px; background: currentColor; transition: transform 0.3s var(--curva), width 0.3s var(--curva); }
  .menu-botao__traco { position: relative; transform: translateY(-4px); }
  .menu-botao__traco::before { content: ""; position: absolute; left: 0; top: 8px; width: 18px; }
  .menu-botao[aria-expanded="true"] .menu-botao__traco { transform: translateY(0) rotate(45deg); }
  .menu-botao[aria-expanded="true"] .menu-botao__traco::before { top: 0; width: 26px; transform: rotate(-90deg); }
  .cabecalho:has(.menu.aberto) { background: var(--fundo); border-bottom-color: var(--linha); }

  .menu {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 0.5rem var(--margem) 2rem;
    background: var(--fundo); border-bottom: 1px solid var(--linha);
    box-shadow: 0 30px 40px -30px rgba(0, 0, 0, 0.6);
  }
  .menu:not(.aberto) { display: none; }
  .menu a:not(.botao) { padding-block: 1rem; border-bottom: 1px solid var(--linha); font-family: var(--fonte-titulo); font-weight: 350; font-size: 1.5rem; opacity: 1; }
  .menu a:not(.botao)::after { display: none; }
  .menu__acao { margin-top: 1.5rem; }
}

@media (max-width: 899px) {
  .secao__topo { grid-template-columns: minmax(0, 1fr); }
  .secao__topo h2, .secao__intro { grid-column: 1; }
  .escritorio, .perguntas, .contato__grade { grid-template-columns: minmax(0, 1fr); }
  .escritorio__fotos { max-width: 36rem; }
  .numeros__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
  .numeros__lista > div:nth-child(3) { border-left: 0; padding-left: 0; }
  /* A faixa de compromissos sai de cima da foto e vira um bloco logo abaixo. */
  html[data-abertura="fachada"] .compromissos { position: static; background: var(--superficie); -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* Fora da foto, a faixa não sobe: subiria por cima da seção seguinte. */
  html[data-abertura="fachada"] .compromissos { animation: none; }
  .abertura { --faixa-altura: 0px; padding-bottom: 7rem; }
  .compromissos { grid-template-columns: minmax(0, 1fr); padding-block: 0.5rem; }
  .compromissos li { min-height: 0; padding: 0.85rem var(--margem); }
  .compromissos li + li { border-left: 0; border-top: 1px solid var(--linha); }
  html[data-abertura="fachada"] .compromissos li + li { border-top-color: var(--linha); }
}

/* ---------- Celular ---------- */
@media (max-width: 699px) {
  :root { --cabecalho: 68px; }
  .so-largo { display: none; }
  .marca__nome { font-size: 1.375rem; }
  .marca__apoio { font-size: 0.625rem; letter-spacing: 0.28em; margin-top: 0.3rem; }
  /* A palavra "Menu" some da tela, mas continua sendo o nome do botão para o leitor de tela. */
  .menu-botao__rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sobretitulo { font-size: 0.75rem; letter-spacing: 0.2em; gap: 0.75rem; }
  .sobretitulo::before { width: 28px; }

  .abertura { min-height: max(600px, calc(100svh - 38px)); padding-bottom: 5.5rem; }
  .abertura::before {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, transparent 22%),
      linear-gradient(0deg, var(--escuro) 4%, color-mix(in srgb, var(--escuro) 78%, transparent) 40%, transparent 72%);
  }
  .abertura h1 { font-size: clamp(2.75rem, 1.6rem + 6vw, 3.5rem); }
  .rubrica { left: 0.6em; width: 72%; }
  .abertura__acoes .botao, .manchete__acoes .botao { flex: 1 1 100%; }
  .cenas__controle { left: var(--margem); right: var(--margem); bottom: 1.5rem; justify-content: flex-start; gap: 0.7rem; font-size: 0.6875rem; letter-spacing: 0.16em; }
  .cenas__progresso i { width: 16px; }
  .cenas__progresso i.ativa { width: 34px; }
  .cenas__pausa { width: 36px; height: 36px; margin-left: auto; }

  .abertura-manchete { padding-block: calc(var(--cabecalho) + 2.5rem) 3.5rem; }
  .abertura-manchete h1 { font-size: clamp(2.75rem, 1.6rem + 6vw, 3.5rem); }
  .manchete__numeros { justify-content: space-between; gap: 1rem; }
  .manchete__numeros dd { font-size: 2.375rem; }
  .manchete__numeros dt { font-size: 0.8125rem; }
  .manchete__foto picture { aspect-ratio: 4 / 4.2; }

  .numeros__lista > div { padding-inline: 1rem 0; }
  .numeros dt { letter-spacing: 0.14em; font-size: 0.6875rem; }
  .numeros dt::before { width: 12px; }

  .area__aba button { gap: 0.9rem; }
  .area__num { width: 1.6rem; }
  .convite .botao { flex: 1 1 100%; }
  .escritorio__fotos { padding-bottom: 6.5rem; }
  .escritorio__foto--pequena { width: 46%; padding: 7px; }
  .escritorio__legenda { max-width: 48%; letter-spacing: 0.14em; font-size: 0.6875rem; }
  .passo:nth-child(n) { margin-left: 0; }
  .equipe { gap: 2.25rem 0.75rem; }
  .pessoa__monograma { margin-bottom: 1rem; }
  .pessoa h3 { font-size: 1.125rem; }
  .pessoa__cargo { font-size: 0.625rem; letter-spacing: 0.14em; }
  .pessoa__area { font-size: 0.875rem; }
  .depoimento { text-align: left; }
  .depoimento__texto { align-items: flex-start; }
  .depoimento figcaption { justify-content: flex-start; }
  .rodape__grade { grid-template-columns: 1fr 1fr; }
}

/* ---------- Ferramentas do Profissional ----------
   As peças ficam em ../ferramentas/ferramentas.css e só usam as cores do tom.
   Aqui o Vívido dá o seu acabamento: cantos redondos, contraste forte e pílulas. */
.ft-sim__escolha { background: var(--superficie); border-color: transparent; border-radius: calc(var(--raio) * 2); transition: background-color 0.35s ease, color 0.35s ease, transform 0.5s var(--curva); }
.ft-sim__escolha[aria-expanded="true"] { background: var(--claro); color: var(--escuro); border-color: var(--claro); }
.ft-sim__escolha[aria-expanded="true"] .ft-sim__area { color: var(--luz-leitura); }
.ft-sim__escolha[aria-expanded="true"] .ft-sim__pergunta { color: color-mix(in srgb, var(--escuro) 72%, var(--claro)); }
@media (hover: hover) { .ft-sim__escolha:hover { transform: translateY(-3px); } }
.ft-sim__nome, .ft-triagem__titulo, .ft-quem strong, .ft-res__total { font-style: italic; font-weight: 350; }
.ft-sim__fechar, .ft-chip, .ft-compartilhar, .ft-opcoes__grupo { border-radius: 999px; }
.ft-calc, .ft-guia, .ft-cartao { border-radius: calc(var(--raio) * 2); }
.ft-calc { box-shadow: 0 40px 80px -48px rgba(0, 0, 0, 0.7); }
.ft-calc .campo input, .ft-calc .campo select, .ft-cartao .campo input {
  background: color-mix(in srgb, var(--texto) 4%, transparent); border-color: color-mix(in srgb, var(--texto) 20%, transparent);
}
.ft-calc .campo input:focus, .ft-calc .campo select:focus { background-color: var(--superficie); }
.ft-link { border-radius: 999px; padding-inline: 1.25rem; }
.ft-quem__monograma, .ft-cartao__monograma, .ft-pessoa__monograma { border-radius: 50%; }
.ft-capa { background: var(--luz); color: var(--escuro); border-radius: 3px 8px 8px 3px; transform: rotate(-3deg); box-shadow: 8px 10px 24px -8px rgba(0, 0, 0, 0.5); }
.ft-chip[aria-pressed="true"] { background: var(--destaque); border-color: var(--destaque); color: var(--fundo); }
.ft-link--principal { background: var(--botao-fundo); border-color: var(--botao-fundo); color: var(--botao-texto); }
.pessoa__cartao { margin-top: 0.35rem; }
/* O guia é uma faixa larga abaixo do título e das perguntas. */
.perguntas .ft-guia { grid-column: 1 / -1; }
.ft-opcoes legend { font-size: var(--tam-pequeno); font-weight: 500; color: var(--apoio); }