/* ==========================================================
   Estilo Executivo · Ferraz Lacerda Advogados (exemplo ilustrativo)
   Ideia: o Clássico à noite. Mais contraste, mais escala e mais silêncio.
   Serifa de alto contraste e itálico desenhado (Playfair Display) nos títulos e números,
   sem serifa firme (Manrope) no texto, fios dourados e o monograma
   gigante em marca d'água.
   Layout: blocos que alternam entre o tom "principal" (escuro, ou papel
   na paleta Tinta), o tom "leitura" (claro) e a "faixa" (o mais fundo,
   dos números e do rodapé). Seções numeradas, como um relatório.
   Todas as cores, fontes e espaços estão nas variáveis abaixo.
   As paletas trocam só essas variáveis (atributo data-paleta no <html>),
   o que também prepara a prévia ao vivo (versão 2).
   ========================================================== */

/* Playfair Display fixada no peso 500: os traços finos ficam firmes o bastante para ler
   no fundo escuro. Um só arquivo serve para os pesos 400 a 600 usados nos títulos. */
@font-face {
  font-family: "Playfair Display";
  src: url("../../fontes/playfair-display-500.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../../fontes/playfair-display-italic-500.woff2") format("woff2");
  font-weight: 400 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../../fontes/manrope-var.woff2") format("woff2");
  font-weight: 400 700; 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: "Playfair Reserva";
  src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif");
  size-adjust: 112.3%; ascent-override: 96.3%; descent-override: 22.4%; line-gap-override: 0%;
}
@font-face {
  font-family: "Playfair Reserva";
  src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), local("Liberation Serif Italic");
  font-style: italic;
  size-adjust: 106.6%; ascent-override: 101.5%; descent-override: 23.5%; line-gap-override: 0%;
}
@font-face {
  font-family: "Manrope Reserva";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  size-adjust: 102.5%; ascent-override: 103.9%; descent-override: 29.2%; line-gap-override: 0%;
}
/* Botões e rótulos em maiúsculas: na Arial as maiúsculas são mais largas, então a reserva delas é menor.
   As medidas de altura sobem na mesma proporção, porque o navegador também as reduz. */
@font-face {
  font-family: "Manrope Reserva Caixa";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  size-adjust: 94.7%; ascent-override: 112.5%; descent-override: 31.6%; 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: "Grafite". Carvão azulado, marfim e champanhe. */
  --principal-fundo: #10161D;
  --principal-superficie: #161E27;
  --principal-texto: #F2EEE6;
  --principal-apoio: #A7ADB4;
  --principal-linha: rgba(242, 238, 230, 0.14);
  --principal-destaque: #C9A96A;
  --leitura-fundo: #F4F1EA;
  --leitura-superficie: #FBFAF6;
  --leitura-texto: #14191F;
  --leitura-apoio: #565C63;
  --leitura-linha: #DCD5C8;
  --leitura-destaque: #86682F;
  --faixa-fundo: #0A0E13;
  --faixa-texto: #F2EEE6;
  --faixa-apoio: #9DA3AA;
  --faixa-linha: rgba(242, 238, 230, 0.12);
  --faixa-destaque: #C9A96A;
  --fio: rgba(201, 169, 106, 0.5);          /* fios dourados: cabeçalho e molduras */
  --botao-fundo: #C9A96A;
  --botao-texto: #10161D;
  --foto-destaque: #D8BC82;                  /* destaque sobre a foto da Fachada */
  --cor-veu: 9, 12, 16;                      /* véu escuro sobre as fotos (em R, G, B) */
  --filtro-foto: none;                       /* acerta as fotos ao clima da paleta */
  --filtro-marmore: grayscale(1) brightness(0.9);
  --opacidade-marca: 0.055;

  /* Tipografia */
  --fonte-titulo: "Playfair Display", "Playfair Reserva", Georgia, "Times New Roman", serif;
  --fonte-texto: "Manrope", "Manrope Reserva", -apple-system, "Segoe UI", Arial, sans-serif;
  --fonte-caixa: "Manrope", "Manrope 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.25rem, 1.35rem + 3.2vw, 4.25rem);
  --tam-h3: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);

  /* Espaços */
  --largura: 1240px;
  --margem: clamp(1.25rem, 0.6rem + 2.8vw, 3rem);
  --secao: clamp(5rem, 3.2rem + 7vw, 9.5rem);
  --cabecalho: 84px;

  /* Movimento Fluido */
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
  --entrada: 1.1s;
  --distancia: 36px;
}

/* Paleta 2: "Bordô". Vinho escuro, marfim e dourado; nos blocos claros, o destaque é o próprio vinho. */
html[data-paleta="bordo"] {
  --principal-fundo: #2B0F16;
  --principal-superficie: #36161E;
  --principal-texto: #F5ECE4;
  --principal-apoio: #C6B2B0;
  --principal-linha: rgba(245, 236, 228, 0.14);
  --principal-destaque: #D3AE6A;
  --leitura-fundo: #F6EFE8;
  --leitura-superficie: #FCF8F4;
  --leitura-texto: #24151A;
  --leitura-apoio: #5F5054;
  --leitura-linha: #E4D5CB;
  --leitura-destaque: #8A2A3B;
  --faixa-fundo: #1D0A0F;
  --faixa-texto: #F5ECE4;
  --faixa-apoio: #BFA9A8;
  --faixa-linha: rgba(245, 236, 228, 0.12);
  --faixa-destaque: #D3AE6A;
  --fio: rgba(211, 174, 106, 0.5);
  --botao-fundo: #D3AE6A;
  --botao-texto: #2B0F16;
  --foto-destaque: #E2C383;
  --cor-veu: 24, 8, 12;
  --filtro-foto: saturate(0.9);
  --filtro-marmore: grayscale(1) sepia(0.5) hue-rotate(-35deg) saturate(1.5) brightness(0.8);
}
/* Paleta 3: "Tinta". A versão clara e editorial: papel, texto preto e um só azul profundo. */
html[data-paleta="tinta"] {
  --principal-fundo: #FAFAF7;
  --principal-superficie: #FFFFFF;
  --principal-texto: #111418;
  --principal-apoio: #50555C;
  --principal-linha: rgba(17, 20, 24, 0.16);
  --principal-destaque: #152F80;
  --leitura-fundo: #EFEEE9;
  --leitura-superficie: #FAFAF7;
  --leitura-texto: #111418;
  --leitura-apoio: #50555C;
  --leitura-linha: #D4D2CA;
  --leitura-destaque: #152F80;
  --faixa-fundo: #111418;
  --faixa-texto: #FAFAF7;
  --faixa-apoio: #A3A7AD;
  --faixa-linha: rgba(250, 250, 247, 0.14);
  --faixa-destaque: #93A7E4;
  --fio: #111418;
  --botao-fundo: #152F80;
  --botao-texto: #FAFAF7;
  --foto-destaque: #AFC0F0;
  --cor-veu: 10, 12, 15;
  --filtro-foto: grayscale(1) contrast(1.12);
  --filtro-marmore: grayscale(1);
  --opacidade-marca: 0.06;
}

/* Cada bloco escolhe um tom; os componentes só usam as cores do tom em que estão. */
.tom-principal, .secao--principal, .cabecalho, .abertura-manchete {
  --fundo: var(--principal-fundo); --superficie: var(--principal-superficie); --texto: var(--principal-texto);
  --apoio: var(--principal-apoio); --linha: var(--principal-linha); --destaque: var(--principal-destaque);
}
.tom-leitura, .secao--leitura, .formulario {
  --fundo: var(--leitura-fundo); --superficie: var(--leitura-superficie); --texto: var(--leitura-texto);
  --apoio: var(--leitura-apoio); --linha: var(--leitura-linha); --destaque: var(--leitura-destaque);
}
.tom-faixa, .numeros, .rodape {
  --fundo: var(--faixa-fundo); --superficie: var(--faixa-fundo); --texto: var(--faixa-texto);
  --apoio: var(--faixa-apoio); --linha: var(--faixa-linha); --destaque: var(--faixa-destaque);
}
/* Sobre a foto da Fachada, as cores são sempre claras, em qualquer paleta. */
.abertura {
  --texto: #F4F0E8; --apoio: rgba(244, 240, 232, 0.82); --linha: rgba(244, 240, 232, 0.2); --destaque: var(--foto-destaque);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--cabecalho) + 16px); font-variant-numeric: lining-nums; }
body {
  margin: 0;
  background: var(--principal-fundo);
  color: var(--principal-texto);
  font-family: var(--fonte-texto);
  font-size: var(--tam-texto);
  line-height: 1.7;
  -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: 400; margin: 0; text-wrap: balance; color: var(--texto); }
h2 { font-size: var(--tam-h2); line-height: 1.04; letter-spacing: -0.02em; }
h3 { font-size: var(--tam-h3); line-height: 1.2; letter-spacing: -0.01em; }
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; }
:focus-visible { outline: 2px solid var(--destaque); outline-offset: 3px; }

.pular {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--principal-texto); color: var(--principal-fundo); 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); }

/* ---------- Selo "exemplo ilustrativo" (moldura da Rubrica) ---------- */
.selo-exemplo { background: #050607; 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: 700; }
.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="grafite"] .selo-exemplo__combinacao::before { content: ", paleta Grafite"; }
html[data-paleta="bordo"] .selo-exemplo__combinacao::before { content: ", paleta Bordô"; }
html[data-paleta="tinta"] .selo-exemplo__combinacao::before { content: ", paleta Tinta"; }
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"; }

/* ---------- Monograma: F&L, com o "&" em itálico dourado ---------- */
.monograma, .marca-dagua { font-family: var(--fonte-titulo); font-weight: 400; line-height: 1; letter-spacing: -0.04em; white-space: nowrap; }
.monograma i, .marca-dagua i { font-style: italic; font-size: 0.62em; color: var(--destaque); margin-inline: 0.02em 0.04em; vertical-align: 0.12em; }
.monograma { font-size: 2.125rem; color: var(--texto); }
/* Largura fixa, medida na Playfair Display: quando a fonte chega, o nome ao lado não se move. */
.marca .monograma { display: inline-block; width: 1.61em; }

/* Monograma gigante, quase transparente, atrás da abertura, do depoimento e do rodapé. */
.marca-dagua {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  font-size: clamp(16rem, 8rem + 34vw, 46rem);
  color: var(--texto); opacity: var(--opacidade-marca);
}
.marca-dagua i { color: inherit; }

/* ---------- Cabeçalho ---------- */
.cabecalho {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--fundo); color: var(--texto);
  border-bottom: 3px double var(--fio);
  transition: box-shadow 0.4s ease;
}
.cabecalho.rolado { box-shadow: 0 14px 30px -18px rgba(var(--cor-veu), 0.6); }
.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; align-items: center; gap: 1rem; text-decoration: none; color: var(--texto); margin-right: auto; }
.marca__nome {
  display: flex; flex-direction: column; gap: 0.2rem; padding-left: 1rem; border-left: 1px solid var(--linha);
  font-family: var(--fonte-caixa); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; line-height: 1.2;
}
.marca__nome small { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.3em; color: var(--apoio); }
.menu { display: flex; align-items: center; gap: 2rem; }
.menu a:not(.botao) {
  position: relative; color: var(--texto); text-decoration: none; font-family: var(--fonte-titulo); font-size: 1.0625rem;
  padding-block: 0.5rem; white-space: nowrap;
}
.menu a:not(.botao)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.2rem; height: 1px; background: var(--destaque);
  transform: scaleX(0); transition: transform 0.4s var(--curva);
}
@media (hover: hover) { .menu a:not(.botao):hover::after { transform: none; } }
.menu .botao { min-height: 46px; padding-inline: 1.35rem; white-space: nowrap; }
.menu-botao { display: none; }

/* ---------- Botões ---------- */
.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-caixa); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; border: 1px solid transparent; border-radius: 0; cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s var(--curva), box-shadow 0.3s 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) 86%, #fff); }
  html[data-paleta="tinta"] .botao--cheio:hover { background: color-mix(in srgb, var(--botao-fundo) 82%, #000); }
}
.botao--contorno { border-color: var(--destaque); color: var(--texto); background: transparent; }
@media (hover: hover) { .botao--contorno:hover { background: var(--destaque); color: var(--fundo); } }
.botao--escuro { background: var(--texto); color: var(--fundo); width: 100%; }
@media (hover: hover) { .botao--escuro:hover { background: color-mix(in srgb, var(--texto) 84%, var(--destaque)); } }
/* "Carimbo": uma segunda borda deslocada, como papel sobre papel. */
.botao--carimbo { box-shadow: 6px 6px 0 -1px var(--fundo), 6px 6px 0 0 var(--texto); }
@media (hover: hover) { .botao--carimbo:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0 -1px var(--fundo), 3px 3px 0 0 var(--texto); } }

/* Link com seta */
.seta {
  display: inline-flex; align-items: center; gap: 0.75rem; min-height: 44px;
  font-family: var(--fonte-caixa); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--texto);
}
/* O fio já ocupa o tamanho final e só cresce por transform: se crescesse em largura,
   o link ficaria mais largo no hover, a linha das áreas quebraria o título e o mouse sairia de cima, piscando. */
.seta::after {
  content: ""; width: 44px; height: 1px; background: var(--destaque);
  transform: scaleX(0.64); transform-origin: left; transition: transform 0.4s var(--curva);
}
@media (hover: hover) { .seta:hover::after { transform: none; } }
.seta--clara { color: #F4F0E8; }

/* Sobretítulo em itálico, com fio dourado antes */
.sobretitulo-italico {
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--fonte-titulo); font-style: italic; font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem); line-height: 1.3;
  color: var(--destaque); margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem);
}
.sobretitulo-italico::before { content: ""; flex: none; width: 48px; height: 1px; background: currentColor; transform-origin: left; }

/* ---------- Abertura 1: "Fachada" ----------
   Foto da colunata em tela cheia, véu escuro do lado do texto e o monograma gigante atrás. */
.abertura {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center;
  min-height: clamp(580px, calc(100svh - var(--cabecalho) - 36px), 920px);
  background: #07090C; color: var(--texto);
}
.abertura__foto, .abertura__foto img { position: absolute; inset: 0; width: 100%; height: 100%; }
.abertura__foto { z-index: -2; }
.abertura__foto img { object-fit: cover; object-position: 70% 50%; filter: var(--filtro-foto); }
.abertura::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(var(--cor-veu), 0.94) 0%, rgba(var(--cor-veu), 0.78) 38%, rgba(var(--cor-veu), 0.15) 72%, rgba(var(--cor-veu), 0.05) 100%),
    linear-gradient(0deg, rgba(var(--cor-veu), 0.7) 0%, transparent 30%);
}
.abertura .marca-dagua { left: -0.08em; top: 50%; translate: 0 -50%; color: #F4F0E8; opacity: 0.06; z-index: -1; }
.abertura__dentro {
  position: relative; z-index: 1;
  width: min(100%, var(--largura)); margin-inline: auto; padding-inline: var(--margem);
  padding-block: clamp(4rem, 2rem + 6vw, 7rem);
}
.abertura h1 {
  font-size: clamp(3rem, 1.5rem + 5.6vw, 6.75rem); line-height: 0.98; letter-spacing: -0.025em; max-width: 11ch; color: #F7F4EE;
}
.abertura h1 em, .abertura-manchete h1 em { display: block; }
.abertura__apoio { margin-top: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); max-width: 31rem; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); color: var(--apoio); }
.abertura__acoes { margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
/* Fio vertical no pé da abertura: "role para ver mais". */
.abertura__rolar {
  position: absolute; left: 50%; bottom: 0; width: 1px; height: 72px; z-index: 1;
  background: rgba(244, 240, 232, 0.22); overflow: hidden;
}
.abertura__rolar::after { content: ""; position: absolute; inset: 0; background: var(--destaque); transform: translateY(-100%); }

/* ---------- Abertura 2: "Manchete" ----------
   Sem foto, como a primeira página de um jornal: o título enorme de um lado
   e, separada por um fio vertical, uma coluna com o escritório em números. */
.abertura-manchete { background: var(--fundo); color: var(--texto); }
.manchete__cabeca {
  display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.85rem;
  border-bottom: 1px solid var(--linha);
  font-family: var(--fonte-caixa); font-size: var(--tam-rotulo); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--apoio);
}
.manchete__grade { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); }
.manchete__texto {
  padding-block: clamp(3rem, 1.5rem + 5vw, 6.5rem) clamp(3rem, 2rem + 3vw, 5rem);
  padding-right: clamp(2rem, 1rem + 3vw, 4.5rem);
  border-right: 1px solid var(--linha);
}
.abertura-manchete h1 { font-size: clamp(3.25rem, 1.4rem + 6.6vw, 8.25rem); line-height: 0.95; letter-spacing: -0.03em; }
.manchete__apoio { margin-top: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); max-width: 34rem; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); color: var(--apoio); }
.manchete__acoes { margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.25rem; }
.manchete__coluna { display: flex; flex-direction: column; padding: clamp(3rem, 1.5rem + 5vw, 6.5rem) 0 clamp(2.5rem, 2rem + 2vw, 4rem) clamp(1.75rem, 1rem + 2vw, 3rem); }
.manchete__coluna-titulo {
  padding-bottom: 0.9rem; border-bottom: 3px double var(--fio);
  font-family: var(--fonte-caixa); font-size: var(--tam-rotulo); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
}
.manchete__numeros { margin: 0 0 1.5rem; }
.manchete__numeros > div { display: flex; flex-direction: column-reverse; gap: 0.35rem; padding-block: 1.25rem; border-bottom: 1px solid var(--linha); }
.manchete__numeros dd { margin: 0; font-family: var(--fonte-titulo); font-size: clamp(2.75rem, 2rem + 2vw, 3.75rem); line-height: 0.95; color: var(--destaque); font-variant-numeric: lining-nums; }
.manchete__numeros dt { font-size: var(--tam-pequeno); 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; }

/* ---------- Números: faixa funda sobre o mármore ---------- */
.numeros {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--fundo); color: var(--texto);
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  border-bottom: 1px solid var(--linha);
}
.numeros__foto, .numeros__foto img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.numeros__foto img { object-fit: cover; filter: var(--filtro-marmore); }
.numeros::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in srgb, var(--fundo) 90%, transparent), color-mix(in srgb, var(--fundo) 80%, transparent)); }
.numeros__lista {
  width: min(100%, var(--largura)); margin: 0 auto; padding-inline: var(--margem);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.numeros__lista > div {
  display: flex; flex-direction: column; gap: 1rem;
  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.9;
  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: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--apoio);
}
.numeros dt::before { content: ""; flex: none; width: 20px; 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, 3fr) minmax(0, 9fr); gap: 1.5rem clamp(2rem, 1rem + 3vw, 4rem);
  margin-bottom: clamp(3rem, 2rem + 3vw, 5rem);
}
.secao__topo h2, .secao__intro { grid-column: 2; }
.secao__intro { max-width: 36rem; color: var(--apoio); }
/* Número da seção: "01" em itálico dourado e o nome em versalete, sobre um fio. */
.secao__numero {
  grid-column: 1; grid-row: 1 / span 2; align-self: start;
  display: flex; flex-direction: column; gap: 0.6rem; padding-top: 1rem; border-top: 1px solid var(--linha);
  font-family: var(--fonte-caixa); font-size: var(--tam-rotulo); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--apoio);
}
.secao__numero span { font-family: var(--fonte-titulo); font-style: italic; font-weight: 400; font-size: 1.75rem; line-height: 1; letter-spacing: 0; text-transform: none; color: var(--destaque); }

/* ---------- Áreas: linhas largas, não cartões ---------- */
.areas { border-top: 1px solid var(--linha); }
.area {
  position: relative;
  display: grid; grid-template-columns: 52px minmax(0, 4fr) minmax(0, 5fr) auto; align-items: center; gap: 1rem clamp(1.5rem, 1rem + 2vw, 3rem);
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem) 0;
  border-bottom: 1px solid var(--linha);
}
/* Fio dourado que corre por baixo da linha ao passar o mouse. */
.area::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--destaque);
  transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--curva);
}
@media (hover: hover) { .area:hover::after { transform: none; } }
.area__icone { width: 40px; height: 40px; fill: none; stroke: var(--destaque); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.area h3 { font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.25rem); transition: transform 0.6s var(--curva); }
@media (hover: hover) { .area:hover h3 { transform: translateX(8px); } }
.area p { color: var(--apoio); font-size: var(--tam-pequeno); }
.area .seta { justify-self: end; white-space: nowrap; }
.convite {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem 3rem;
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--superficie); border: 1px solid var(--linha);
}
.convite__texto { max-width: 40rem; color: var(--apoio); }
.convite__texto strong { display: block; margin-bottom: 0.25rem; font-family: var(--fonte-titulo); font-style: italic; font-weight: 400; font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); line-height: 1.25; color: var(--texto); }

/* ---------- O escritório ---------- */
.escritorio { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(3rem, 2rem + 5vw, 7rem); align-items: center; }
.escritorio__texto { display: flex; flex-direction: column; gap: 1.25rem; }
.escritorio__texto .secao__numero { flex-direction: row; align-items: baseline; gap: 1rem; align-self: stretch; margin-bottom: 0.75rem; }
.escritorio__texto h2 { margin-bottom: 0.75rem; }
.escritorio__texto > p { color: var(--apoio); max-width: 36rem; }
.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.2vw, 2.25rem); line-height: 1.25; color: var(--texto); }
.compromissos { display: grid; margin-block: 0.5rem; border-top: 1px solid var(--linha); counter-reset: compromisso; }
.compromissos li { display: flex; gap: 1.25rem; align-items: baseline; padding-block: 0.9rem; border-bottom: 1px solid var(--linha); font-weight: 600; counter-increment: compromisso; }
.compromissos li::before { content: counter(compromisso, upper-roman); flex: none; width: 2rem; font-family: var(--fonte-titulo); font-style: italic; font-weight: 400; color: var(--destaque); }
.escritorio__foto { position: relative; }
.escritorio__foto picture {
  position: relative; display: block; aspect-ratio: 840 / 1050; overflow: hidden; background: var(--principal-fundo);
}
.escritorio__foto img { width: 100%; height: 100%; object-fit: cover; filter: var(--filtro-foto); }
/* Moldura dourada por fora, deslocada, e um fio claro por dentro. */
.escritorio__foto::before {
  content: ""; position: absolute; inset: -16px 16px 16px -16px; z-index: 0; border: 1px solid var(--destaque); pointer-events: none;
}
.escritorio__foto picture::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(255, 255, 255, 0.35); pointer-events: none; }
.escritorio__foto figcaption {
  font-family: var(--fonte-caixa); margin-top: 1.25rem; font-size: var(--tam-rotulo); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--apoio);
}

/* ---------- Como trabalhamos ---------- */
/* Parte do título só no contorno, à moda dos grandes escritórios. */
.contorno { color: transparent; -webkit-text-stroke: 1px var(--texto); paint-order: stroke fill; }
@supports not (-webkit-text-stroke: 1px black) { .contorno { color: var(--texto); } }
.passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem clamp(2rem, 1rem + 3vw, 4rem); }
.passo { position: relative; display: flex; flex-direction: column; gap: 1rem; padding-top: 2rem; border-top: 1px solid var(--linha); }
.passo::before {
  content: ""; position: absolute; left: 0; top: -1px; width: 64px; height: 1px; background: var(--destaque);
  transform-origin: left;
}
.passo__numero {
  font-family: var(--fonte-titulo); font-size: clamp(4rem, 3rem + 3vw, 6rem); line-height: 0.85; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1px var(--destaque); margin-bottom: 0.75rem;
}
.passo p { color: var(--apoio); }

/* ---------- Equipe: monogramas em nicho arqueado, como retratos sem rosto ---------- */
.equipe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 0.5rem + 1vw, 1.75rem); }
.pessoa { display: flex; flex-direction: column; gap: 0.3rem; }
.pessoa__monograma {
  display: grid; place-items: center; aspect-ratio: 4 / 4.6; margin-bottom: 1.5rem;
  border-radius: 999px 999px 0 0; background: var(--principal-fundo);
  box-shadow: inset 0 0 0 1px var(--fio), inset 0 0 0 9px var(--principal-fundo), inset 0 0 0 10px color-mix(in srgb, var(--fio) 60%, transparent);
  font-family: var(--fonte-titulo); font-style: italic; font-size: clamp(2.25rem, 1.6rem + 2vw, 3.5rem); letter-spacing: -0.02em;
  color: var(--principal-destaque);
  transition: transform 0.7s var(--curva);
}
html[data-paleta="tinta"] .pessoa__monograma { background: var(--faixa-fundo); color: var(--faixa-destaque); box-shadow: inset 0 0 0 9px var(--faixa-fundo), inset 0 0 0 10px rgba(250, 250, 247, 0.4); }
@media (hover: hover) { .pessoa:hover .pessoa__monograma { transform: translateY(-6px); } }
.pessoa h3 { font-size: clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem); }
.pessoa__cargo { font-family: var(--fonte-caixa); font-size: var(--tam-rotulo); font-weight: 700; 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); font-weight: 600; color: var(--destaque); }

/* ---------- Depoimento ---------- */
.depoimento { overflow: hidden; isolation: isolate; text-align: center; }
.depoimento__aspas {
  display: block; height: 0.5em; margin-bottom: 0.15em; overflow: visible;
  font-family: var(--fonte-titulo); font-size: clamp(6rem, 4rem + 6vw, 10rem); line-height: 1; color: var(--destaque);
}
.depoimento__texto { max-width: 60rem; 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.015em;
}
.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: 700;
  padding: 0.3rem 0.65rem; border: 1px solid var(--linha);
}

/* ---------- 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 .secao__numero { flex-direction: row; align-items: baseline; gap: 1rem; margin-bottom: 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: 72px; 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: 36px; height: 36px; 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.4s var(--curva), border-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 ---------- */
.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 .secao__numero { flex-direction: row; align-items: baseline; gap: 1rem; margin-bottom: 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: 700; 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 {
  display: grid; gap: 1.5rem;
  background: var(--superficie); color: var(--texto);
  padding: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  border-top: 3px solid var(--principal-destaque);
  box-shadow: 0 40px 80px -40px rgba(var(--cor-veu), 0.6);
}
html[data-paleta="tinta"] .formulario { border: 1px solid var(--leitura-linha); border-top: 3px solid var(--principal-destaque); box-shadow: 10px 10px 0 -1px var(--principal-fundo), 10px 10px 0 0 var(--principal-texto); }
.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.35rem; }
.campo label { font-family: var(--fonte-caixa); font-size: var(--tam-rotulo); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--apoio); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: 0.6rem 0;
  font: inherit; font-size: 1.0625rem; color: var(--texto);
  background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--texto) 30%, transparent); border-radius: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.campo textarea { resize: vertical; min-height: 104px; }
.campo select {
  appearance: none; padding-right: 2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--destaque) 50%), linear-gradient(135deg, var(--destaque) 50%, transparent 50%);
  background-position: calc(100% - 12px) 52%, calc(100% - 7px) 52%; background-size: 5px 5px; background-repeat: no-repeat;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--destaque); box-shadow: 0 1px 0 0 var(--destaque); }
.formulario .botao { margin-top: 0.5rem; }
.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(4rem, 3rem + 4vw, 6.5rem);
  border-top: 3px double var(--fio);
}
.marca-dagua--rodape { right: -0.06em; bottom: -0.18em; z-index: -1; }
.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.5fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; padding-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
.rodape__marca { display: flex; flex-direction: column; gap: 1.25rem; }
.rodape__marca .monograma { font-size: 3rem; }
.rodape__marca strong { font-family: var(--fonte-titulo); font-weight: 400; font-size: 1.375rem; color: var(--texto); }
.rodape__titulo { font-family: var(--fonte-caixa); font-size: var(--tam-rotulo); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--destaque); margin-bottom: 1rem; }
.rodape ul { display: grid; gap: 0.5rem; }
.rodape__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem; padding-block: 1.75rem; font-size: 0.8125rem;
  background: linear-gradient(var(--linha), var(--linha)) top / 100% 1px no-repeat content-box;
}

/* ---------- Movimento Fluido ----------
   Um degrau acima do Sutil do Clássico: os blocos sobem mais ao aparecer,
   as palavras dos títulos surgem uma a uma de trás de uma linha, os números
   contam até o valor, os fios dourados se desenham e a marca d'água se move
   devagar com a rolagem. Tudo só em transparência e posição.
   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. */
@media (prefers-reduced-motion: no-preference) {
  .js .revela {
    opacity: 0; transform: translateY(var(--distancia));
    transition: opacity 0.9s ease, transform var(--entrada) var(--curva);
    transition-delay: var(--atraso, 0ms);
  }
  .js .revela.visivel { opacity: 1; transform: none; }

  /* Títulos: 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.1em 0; margin: 0 -0.08em -0.1em 0; }
  .palavra > span { display: inline-block; transform: translateY(105%); transition: transform var(--entrada) var(--curva); transition-delay: calc(var(--i) * 55ms + var(--atraso, 0ms)); }
  .palavras-revela.visivel .palavra > span { transform: none; }

  /* Foto do escritório: abre como uma cortina, de baixo para cima, e se acomoda. */
  .js .revela-foto picture { clip-path: inset(100% 0 0 0); transition: clip-path 1.4s var(--curva); }
  .js .revela-foto img { transform: scale(1.12); transition: transform 2s var(--curva); }
  .js .revela-foto::before { opacity: 0; transform: translate(10px, -10px); transition: opacity 1s ease 0.5s, transform 1.4s 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; }

  /* Fios dourados que se desenham. */
  .js .passo.revela::before { transform: scaleX(0); transition: transform 1.2s var(--curva) calc(var(--atraso, 0ms) + 0.3s); }
  .js .passo.revela.visivel::before { transform: none; }

  /* Abertura: a foto se acomoda devagar, o fio do sobretítulo se desenha e o resto chega em sequência. */
  .abertura__foto img { animation: foto-chega 2.6s var(--curva) both; }
  @keyframes foto-chega { from { transform: scale(1.08); } }
  .abertura .sobretitulo-italico::before, .abertura-manchete .sobretitulo-italico::before { animation: fio-desenha 1.2s var(--curva) 0.2s both; }
  @keyframes fio-desenha { from { transform: scaleX(0); } }
  .abertura .sobretitulo-italico, .abertura__apoio, .abertura__acoes,
  .abertura-manchete .sobretitulo-italico, .manchete__apoio, .manchete__acoes, .manchete__coluna > * {
    animation: sobe 1.1s var(--curva) both;
  }
  .abertura__apoio, .manchete__apoio { animation-delay: 0.25s; }
  .abertura__acoes, .manchete__acoes { animation-delay: 0.4s; }
  .manchete__coluna > :nth-child(2) { animation-delay: 0.15s; }
  .manchete__coluna > :nth-child(3) { animation-delay: 0.3s; }
  @keyframes sobe { from { opacity: 0; transform: translateY(24px); } }
  .abertura .marca-dagua { animation: marca-chega 2.4s var(--curva) both; }
  @keyframes marca-chega { from { opacity: 0; } }
  .abertura__rolar::after { animation: rolar 2.6s var(--curva) 1.2s infinite; }
  @keyframes rolar { 0% { transform: translateY(-100%); } 55%, 100% { transform: translateY(100%); } }
}
/* ---------- Movimentos Sutil e Marcante ----------
   O Fluido acima é o padrão do Executivo. Os outros dois níveis vêm pelo endereço
   (?movimento=sutil ou marcante, escolhido no formulário), no tom do estilo.
   Sutil: só o surgir curto dos blocos e a foto da abertura que se acomoda; os títulos,
   os números, os fios e a marca d'água ficam parados.
   Marcante: tudo do Fluido, mais amplo e mais lento, com a foto da abertura se aproximando
   bem devagar e a marca d'água correndo mais. */
@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::before { opacity: 1; transform: none; transition: none; }
  html[data-movimento="sutil"].js .passo.revela::before { transform: none; transition: none; }
  html[data-movimento="sutil"] .abertura .sobretitulo-italico::before,
  html[data-movimento="sutil"] .abertura-manchete .sobretitulo-italico::before,
  html[data-movimento="sutil"] .abertura .sobretitulo-italico,
  html[data-movimento="sutil"] .abertura__apoio,
  html[data-movimento="sutil"] .abertura__acoes,
  html[data-movimento="sutil"] .abertura-manchete .sobretitulo-italico,
  html[data-movimento="sutil"] .manchete__apoio,
  html[data-movimento="sutil"] .manchete__acoes,
  html[data-movimento="sutil"] .manchete__coluna > *,
  html[data-movimento="sutil"] .abertura .marca-dagua,
  html[data-movimento="sutil"] .abertura__rolar::after { animation: none; }
  html[data-movimento="sutil"] .abertura__foto img { animation-duration: 1.8s; }

  html[data-movimento="marcante"] { --distancia: 60px; --entrada: 1.35s; }
  html[data-movimento="marcante"] .palavra > span { transition-delay: calc(var(--i) * 70ms + var(--atraso, 0ms)); }
  html[data-movimento="marcante"].js .revela-foto picture { transition-duration: 1.7s; }
  html[data-movimento="marcante"].js .revela-foto img { transform: scale(1.2); transition-duration: 2.5s; }
  html[data-movimento="marcante"].js .revela-foto.pronta img { transform: none; }
  html[data-movimento="marcante"] .abertura__foto img { animation: executivo-aproxima 14s cubic-bezier(0.25, 0.1, 0.25, 1) both; }
  @keyframes executivo-aproxima { from { transform: scale(1.001); } to { transform: scale(1.1); } }
  html[data-movimento="marcante"] .abertura .sobretitulo-italico,
  html[data-movimento="marcante"] .abertura__apoio,
  html[data-movimento="marcante"] .abertura__acoes,
  html[data-movimento="marcante"] .abertura-manchete .sobretitulo-italico,
  html[data-movimento="marcante"] .manchete__apoio,
  html[data-movimento="marcante"] .manchete__acoes,
  html[data-movimento="marcante"] .manchete__coluna > * { animation-name: executivo-sobe-amplo; animation-duration: 1.4s; }
  @keyframes executivo-sobe-amplo { from { opacity: 0; transform: translateY(44px); } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
  .area { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .area p { grid-column: 2 / -1; grid-row: 2; }
  .area .seta { grid-column: 3; grid-row: 1; }
  .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; }
  .passos { gap: 3rem 2rem; }
  .manchete__grade { grid-template-columns: minmax(0, 1fr); }
  .manchete__texto { padding-right: 0; border-right: 0; border-bottom: 1px solid var(--linha); }
  .manchete__coluna { padding: 2rem 0 3rem; }
  .manchete__numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .manchete__numeros > div { padding: 1.25rem 1.25rem 1.25rem 0; }
  .manchete__numeros > div + div { padding-left: 1.25rem; border-left: 1px solid var(--linha); }
}

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

/* Menu recolhido: tablet e celular */
@media (max-width: 1023px) {
  :root { --cabecalho: 72px; }
  .menu-botao {
    display: inline-flex; align-items: center; gap: 0.75rem; min-height: 44px; padding: 0 0.25rem;
    background: none; border: 0; font: inherit; font-family: var(--fonte-caixa); font-size: var(--tam-rotulo); font-weight: 700; letter-spacing: 0.2em; 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); }

  .menu {
    position: absolute; left: 0; right: 0; top: calc(100% + 3px);
    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(var(--cor-veu), 0.6);
  }
  .menu:not(.aberto) { display: none; }
  .menu a:not(.botao) { padding-block: 1rem; border-bottom: 1px solid var(--linha); font-size: 1.375rem; }
  .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; }
  .secao__numero { grid-row: auto; flex-direction: row; align-items: baseline; gap: 1rem; }
  .escritorio, .perguntas, .contato__grade { grid-template-columns: minmax(0, 1fr); }
  .escritorio__foto { max-width: 30rem; margin-left: 16px; }
  .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; }
}

/* ---------- Celular ---------- */
@media (max-width: 699px) {
  :root { --cabecalho: 68px; }
  .so-largo { display: none; }
  .monograma { font-size: 1.875rem; }
  .marca { gap: 0.75rem; }
  .marca__nome { padding-left: 0.75rem; font-size: 0.6875rem; letter-spacing: 0.2em; }
  .marca__nome small { font-size: 0.625rem; letter-spacing: 0.26em; }
  /* 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; }
  /* O fio vai para cima do itálico: a frase ganha a largura toda e cabe numa linha com qualquer fonte. */
  .sobretitulo-italico { flex-direction: column; align-items: flex-start; gap: 0.85rem; font-size: clamp(1.0625rem, 0.9rem + 0.9vw, 1.125rem); }

  .abertura { align-items: flex-end; min-height: clamp(600px, calc(100svh - var(--cabecalho) - 36px), 760px); }
  .abertura__foto img { object-position: 60% 40%; }
  .abertura::before { background: linear-gradient(180deg, rgba(var(--cor-veu), 0.35) 0%, rgba(var(--cor-veu), 0.62) 40%, rgba(var(--cor-veu), 0.95) 78%); }
  .abertura .marca-dagua { top: 9%; left: 50%; translate: -50% 0; font-size: 9.5rem; opacity: 0.08; }
  .abertura__dentro { padding-block: 6rem 4.5rem; }
  .abertura__acoes .botao { flex: 1 1 100%; }
  .abertura__rolar { height: 44px; }

  .manchete__cabeca { justify-content: space-between; }
  .manchete__texto { padding-block: 2.75rem 2.75rem; }
  .manchete__acoes .botao { flex: 1 1 100%; margin-right: 6px; }
  .manchete__numeros dd { font-size: 2.5rem; }
  .manchete__numeros dt { font-size: 0.8125rem; }
  .manchete__numeros > div { padding-right: 0.75rem; }
  .manchete__numeros > div + div { padding-left: 0.75rem; }

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

  .area { grid-template-columns: 36px minmax(0, 1fr); gap: 0.75rem 1rem; }
  .area__icone { width: 32px; height: 32px; }
  .area p, .area .seta { grid-column: 1 / -1; grid-row: auto; justify-self: start; }
  .area .seta { min-height: 36px; }
  .convite .botao { flex: 1 1 100%; }
  .passos { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .equipe { gap: 1.5rem 0.875rem; }
  .pessoa__monograma { margin-bottom: 1rem; }
  .pessoa h3 { font-size: 1.1875rem; }
  .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 Executivo dá o seu acabamento: linhas em vez de cartões, fios dourados e rótulos em caixa alta. */
.ft-sim__escolhas, .ft-sim__escolhas[data-quantas] { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--linha); }
.ft-sim__escolha {
  display: grid; grid-template-columns: minmax(9rem, 0.5fr) minmax(0, 1fr) minmax(0, 1fr) 24px; align-items: baseline; gap: 0.5rem 2rem;
  padding: 1.6rem 0; border: 0; border-bottom: 1px solid var(--linha); border-radius: 0;
}
.ft-sim__escolha[aria-expanded="true"] { background: none; }
.ft-sim__escolha[aria-expanded="true"] .ft-sim__nome { color: var(--destaque); }
.ft-sim__area, .ft-passo__conta, .ft-guia__rotulo, .ft-res__rotulo, .ft-cartao__cargo, .ft-cartao__secao { font-family: var(--fonte-caixa); font-weight: 700; letter-spacing: 0.2em; }
.ft-sim__nome { font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.25rem); transition: transform 0.6s var(--curva), color 0.3s ease; }
@media (hover: hover) { .ft-sim__escolha:hover .ft-sim__nome { transform: translateX(8px); } }
.ft-sim__sinal { position: relative; right: auto; top: auto; align-self: center; }
.ft-calc { box-shadow: 0 0 0 1px var(--fio); }
.ft-res__total, .ft-triagem__titulo, .ft-quem strong { font-style: italic; }
.ft-chip { font-family: var(--fonte-caixa); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; }
.ft-quem__monograma, .ft-cartao__monograma { border: 0; border-block: 1px solid var(--fio); font-style: italic; }
.ft-capa { background: var(--superficie); color: var(--texto); border: 1px solid var(--fio); box-shadow: 6px 6px 0 -1px var(--fundo), 6px 6px 0 0 var(--fio); }
.ft-capa__titulo { font-style: italic; }
.ft-cartao { box-shadow: 0 0 0 1px var(--fio); }
.ft-link--principal { background: var(--botao-fundo); border-color: var(--botao-fundo); color: var(--botao-texto); }
.ft-link--principal small, .ft-link--principal::after { color: color-mix(in srgb, var(--botao-texto) 70%, transparent); }
.pessoa__cartao { margin-top: 0.5rem; }
/* O guia é uma faixa larga abaixo do título e das perguntas. */
.perguntas .ft-guia { grid-column: 1 / -1; }
@media (max-width: 1023px) {
  .ft-sim__escolha { grid-template-columns: minmax(0, 1fr) 24px; gap: 0.35rem 1rem; }
  .ft-sim__area, .ft-sim__nome, .ft-sim__pergunta { grid-column: 1; }
  .ft-sim__sinal { grid-column: 2; grid-row: 1 / span 3; }
}
.ft-opcoes legend { font-family: var(--fonte-caixa); font-size: var(--tam-rotulo); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--apoio); }
.ft-opcoes__grupo { margin-top: 0.35rem; }