/* ============================================================================
 * Salutis Care OS — site institucional
 * ----------------------------------------------------------------------------
 * Folha única do site. Reimplementação do Design Handoff
 * (`design_handoff_site_institucional/`) sobre a base tonal do design system
 * "Industry", com a paleta institucional real do Salutis Care OS sobrepondo o
 * accent padrão.
 *
 * O handoff descreve o protótipo com estilos inline (formato da ferramenta de
 * design). Aqui os mesmos valores viram classes: os tokens e as medidas são os
 * do handoff, a organização é de folha de estilo de produção.
 *
 * ISOLAMENTO: este arquivo não é importado por `apps/web` e não importa nada
 * dele. O site institucional e a aplicação operacional não compartilham CSS —
 * ver `apps/site/README.md`, decisão D-02.
 * ==========================================================================*/

/* ─── 1. Tokens ──────────────────────────────────────────────────────────── */
/*
 * A paleta abaixo NÃO é uma invenção do site: é a paleta institucional do
 * próprio Salutis Care OS, lida de `apps/web/src/design-system/tokens/
 * tokens.css` (DS v1.0.0, congelado por ADR-DS-001). Os valores são
 * transcritos, não derivados — quem entra no sistema e depois no site tem de
 * reconhecer o mesmo produto.
 *
 * O que mudou em relação à V2 do site: a marca deixou de ser o azul do deck
 * (#1B3C6F) e passou a ser o TEAL #0F766E, que é `--ds-brand-primary` e a cor
 * de toda ação primária dentro do sistema. O navy continua — mas agora é o
 * navy real do chrome do produto (#0D1B2A / #16293D), não o do deck.
 * Ver `apps/site/README.md`, decisão D-08.
 */

:root {
	/* O site é monotema por decisão de identidade: a paleta institucional clara
	   vale em qualquer preferência do sistema. Declarar `color-scheme: light`
	   evita que o navegador escureça barras de rolagem e controles nativos
	   quando o usuário está em modo escuro, o que destoaria da página. */
	color-scheme: light;

	/* ══ Marca — escala teal do sistema (tokens.css §2) ═══════════════════ */
	--brand-50: #f0fdfa;
	--brand-100: #ccfbf1;
	--brand-200: #99f6e4;
	--brand-300: #5eead4;
	--brand-400: #3fbfb2;
	--brand-500: #2da39a;
	--brand-600: #14867e;
	--brand-700: #0f766e; /* --ds-brand-primary */
	--brand-800: #115e59;
	--brand-900: #134e4a;

	/* Papéis de ação */
	--primary: var(--brand-700);
	--primary-hover: var(--brand-600);
	--primary-active: var(--brand-800);
	--primary-dark: var(--brand-900);
	--primary-light: var(--brand-100);

	/* ══ Chrome — escala navy do sistema (tokens.css §3) ══════════════════ */
	--ink-300: #c3d0dc;
	--ink-400: #8fa3b5;
	--ink-500: #5a7285;
	--ink-600: #334155;
	--ink-700: #16293d;
	--ink-900: #0d1b2a;

	/* ══ Superfícies (tokens.css §4/§5) ═══════════════════════════════════ */
	--bg: #f4f6f8; /* --ds-bg-content: fundo da área de conteúdo do sistema */
	--surface: #ffffff;
	--surface-soft: #f8fafc;

	/* ══ Linhas — exatamente três, como no sistema ════════════════════════ */
	--line-hairline: #eef2f6;
	--line: #dde3ea; /* --ds-border-surface */
	--line-strong: #c9d2dc; /* --ds-border-control */

	/* Cor das linhas das grades hairline — redefinida nas seções escuras. */
	--linha: var(--line);

	/* ══ Texto (tokens.css §6) ════════════════════════════════════════════ */
	--text: #0d1b2a;
	--text-secondary: #334155;
	--text-muted: #5a6b7d;
	--text-inverse: #ffffff;

	/* ══ Status (tokens.css §7/§8) ════════════════════════════════════════ */
	--ok: #34d399;
	--warn: #fbbf24;
	--danger: #e11d48;
	--info: #1e40af;

	/* ══ Acento premium ═══════════════════════════════════════════════════ */
	/* Único valor que não vem do design system: é o dourado institucional do
	   material comercial. Usado como pontuação, nunca como cor dominante. */
	--accent-gold: #a98547;

	/* ══ Gradientes — os três do sistema, transcritos (tokens.css §9) ═════ */
	/* chrome → plano do AppShell e do rodapé dentro do produto
	   brand   → login, splash, capa institucional
	   quiet   → empty state
	   O site usa cada um no papel equivalente, e em nenhum outro lugar. */
	--gradient-chrome: linear-gradient(96deg, #0d1b2a 0%, #123f3e 52%, #115e59 100%);
	--gradient-brand: linear-gradient(115deg, #16293d 0%, #0f766e 62%, #2da39a 100%);
	--gradient-quiet: linear-gradient(180deg, #f0fdfa 0%, #ffffff 100%);

	/* ══ Elevação — tinta do sistema (rgba do navy-900) ═══════════════════ */
	--shadow-control: 0 1px 2px rgba(13, 27, 42, 0.05);
	--shadow-card: 0 2px 10px rgba(13, 27, 42, 0.07);
	--shadow-overlay: 0 8px 24px rgba(13, 27, 42, 0.1);
	/* Só para o painel de produto: a peça que precisa flutuar sobre a página. */
	--shadow-panel: 0 28px 64px -24px rgba(13, 27, 42, 0.32), 0 4px 14px rgba(13, 27, 42, 0.06);

	/* ══ Tipografia ═══════════════════════════════════════════════════════ */
	/* Display e corpo seguem o Design Handoff (Barlow / Barlow Condensed).
	   O mono é o IBM Plex Mono do sistema — que dentro do produto carrega
	   exatamente os mesmos papéis que aqui: rótulos micro, numerais e KPIs
	   (`--ds-text-micro-family` / `--ds-text-numeric-family`). É a ponte
	   tipográfica entre o site e a aplicação. */
	--font-heading: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
	--font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", "Consolas", monospace;

	/* ══ Medidas de layout do handoff ═════════════════════════════════════ */
	--largura-max: 1280px;
	--gutter: clamp(20px, 5vw, 72px);
	--transicao: 0.25s ease;
}

/* ─── 2. Reset e base ────────────────────────────────────────────────────── */

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

html {
	scroll-behavior: smooth;
	/* Compensa o header sticky ao pular por âncora. */
	scroll-padding-top: 76px;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.55;
	font-weight: 400;
	text-wrap: pretty;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-heading);
	font-weight: 600;
	text-transform: uppercase;
	margin: 0;
}

p {
	margin: 0;
}

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

figure {
	margin: 0;
}

a {
	color: var(--primary-active);
	text-underline-offset: 3px;
}

a:hover {
	color: var(--ink-700);
}

:focus {
	outline: none;
}

:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

/* Nas seções de fundo azul institucional o anel de foco padrão (o próprio
   azul) ficaria invisível sobre o fundo. Ali ele vira a tinta clara. */
.secao-escura :focus-visible {
	outline-color: var(--text-inverse);
}

::selection {
	background: color-mix(in srgb, var(--primary) 30%, transparent);
	color: var(--surface);
}

/* Atalho para leitores de tela / teclado — primeiro elemento focável. */
.pular-para-conteudo {
	position: absolute;
	left: 0;
	/* Sai por cima, não para o lado: `left: -9999px` faria o link contar como
	   um elemento fora da viewport em auditorias de overflow horizontal. */
	top: -200px;
	z-index: 100;
	background: var(--primary);
	color: var(--surface);
	padding: 12px 20px;
	font-family: var(--font-heading);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
}

.pular-para-conteudo:focus {
	top: 0;
	color: var(--surface);
}

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

/* ─── 3. Utilidades de layout ────────────────────────────────────────────── */

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

.secao {
	padding-block: clamp(44px, 6vw, 88px);
}

.secao-alta {
	padding-block: clamp(52px, 7vw, 96px);
}

/* Seções escuras. Os três gradientes do sistema entram aqui, cada um no papel
   que já tem dentro do produto — e nenhuma seção repete o mesmo tratamento,
   para o gradiente continuar sendo evento e não textura de fundo:
     · Solução  → gradiente CHROME (o plano do AppShell: "a plataforma")
     · Diferenciais → chapado ink-900 (argumento, não superfície de marca)
     · Contato  → gradiente BRAND (o mesmo do login: "entre no produto") */
.secao-escura {
	background: var(--ink-900);
	color: var(--text-inverse);
}

.secao-escura--chrome {
	background: var(--gradient-chrome);
}

.secao-escura--brand {
	background: linear-gradient(rgba(13, 27, 42, 0.46), rgba(13, 27, 42, 0.46)), var(--gradient-brand);
}

/* Sobre o gradiente brand, os rótulos micro usam teal-100 em vez de teal-300:
   a ponta clara do gradiente não sustenta o tom mais saturado em AA. */
.secao-escura--brand .kicker,
.secao-escura--brand .contato-linha dt {
	color: var(--brand-100);
}

.secao-escura--brand .intro {
	color: rgba(255, 255, 255, 0.92);
}

.secao-escura h2,
.secao-escura h3 {
	color: var(--text-inverse);
}

.kicker {
	display: block;
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--primary-active);
}

.secao-escura .kicker {
	color: var(--brand-300);
}

.regua {
	height: 1px;
	border: 0;
	background: var(--line);
	margin: 14px 0 28px;
}

.secao-escura .regua {
	background: color-mix(in srgb, #ffffff 26%, transparent);
}

.regua-curta {
	margin-bottom: 8px;
}

.regua-larga {
	margin-bottom: 30px;
}

.titulo-secao {
	font-size: clamp(30px, 4.4vw, 62px);
	line-height: 1.04;
	letter-spacing: 0.01em;
	max-width: 22ch;
}

.titulo-secao-media {
	font-size: clamp(28px, 3.6vw, 48px);
	line-height: 1.05;
	letter-spacing: 0.015em;
	max-width: 26ch;
}

.intro {
	font-size: 17px;
	line-height: 1.55;
	max-width: 62ch;
	margin-top: 20px;
	color: color-mix(in srgb, var(--text) 80%, transparent);
}

.secao-escura .intro {
	color: color-mix(in srgb, #ffffff 84%, transparent);
}

/* Grades hairline.
   O handoff desenha as linhas com `gap:1px` sobre um fundo colorido. Isso
   funciona enquanto a última fila está cheia — quando sobra espaço (9 células
   em 7 colunas, por exemplo), o fundo do container aparece como um bloco
   sólido no vazio. Aqui a mesma linha de 1px vem de bordas em cada célula:
   o vazio de uma fila incompleta simplesmente não desenha nada. */
.grade-hairline {
	display: grid;
	gap: 0;
	border-top: 1px solid var(--linha);
	border-left: 1px solid var(--linha);
}

.grade-hairline > * {
	border-right: 1px solid var(--linha);
	border-bottom: 1px solid var(--linha);
}

.secao-escura {
	--linha: color-mix(in srgb, #ffffff 22%, transparent);
}

/* ─── 4. Moldura blueprint ───────────────────────────────────────────────── */
/* Marcas de registro "+" nos quatro cantos, sem preenchimento — a assinatura
   visual do handoff. Os cantos são <i> vazios; nada aqui depende de JS. */

.blueprint {
	position: relative;
	border: 1px solid var(--line);
	border-radius: 0;
	background: var(--surface);
}

.blueprint > .canto {
	position: absolute;
	width: 11px;
	height: 11px;
	color: color-mix(in srgb, var(--text) 68%, transparent);
	pointer-events: none;
}

.blueprint > .canto::before,
.blueprint > .canto::after {
	content: "";
	position: absolute;
	background: currentColor;
}

.blueprint > .canto::before {
	left: 5px;
	top: 0;
	width: 1px;
	height: 100%;
}

.blueprint > .canto::after {
	top: 5px;
	left: 0;
	width: 100%;
	height: 1px;
}

.blueprint > .canto.tl { top: -6px; left: -6px; }
.blueprint > .canto.tr { top: -6px; right: -6px; }
.blueprint > .canto.bl { bottom: -6px; left: -6px; }
.blueprint > .canto.br { bottom: -6px; right: -6px; }

/* Barra de título dos painéis de produto (hero, módulos, visão executiva).
   Pintada com `--gradient-chrome` — literalmente o mesmo gradiente que o
   AppShell do Salutis Care OS usa no seu plano de topo. É o que faz a moldura
   ler como "chrome de aplicação" em vez de legenda de figura, e é o sinal
   mais direto de que site e produto são a mesma coisa. */
.painel-barra {
	display: flex;
	flex-wrap: wrap;
	background: var(--gradient-chrome);
	color: var(--text-inverse);
}

.painel-barra > span {
	padding: 11px 22px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 500;
}

.painel-barra > span:first-child {
	flex: 1;
	min-width: 14ch;
}

.painel-barra > span + span {
	border-left: 1px solid rgba(255, 255, 255, 0.18);
	color: rgba(255, 255, 255, 0.72);
}

.legenda {
	margin-top: 14px;
	font-size: 12.5px;
	line-height: 1.55;
	color: color-mix(in srgb, var(--text) 68%, transparent);
}

/* Legenda dentro da moldura (e não abaixo dela), como rodapé do painel. */
.legenda-embutida {
	margin-top: 0;
	padding: 11px 20px;
	border-top: 1px solid var(--line);
}

/* ─── 5. Botões ──────────────────────────────────────────────────────────── */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 8px 24px;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid var(--line);
	border-radius: 0;
	background: transparent;
	color: var(--text);
	white-space: nowrap;
	transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}

/* O botão primário é a única superfície sólida do sistema blueprint.
   A cor do texto é declarada explicitamente para que a regra de cor herdada
   da navegação não vaze para dentro dele (correção preservada do handoff). */
.btn-primario {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--surface);
}

.btn-primario:hover {
	background: var(--primary-hover);
	border-color: var(--primary-hover);
	color: var(--surface);
}

.btn-primario:active {
	background: var(--primary-active);
	border-color: var(--primary-active);
}

/* Mesma composição do botão secundário do sistema (`--ds-button-secondary-*`):
   superfície branca, borda de controle, tinta secundária. Sobre a faixa
   levemente teal do hero, a superfície branca é o que faz o botão ler como
   botão — a borda sozinha seria fraca demais. */
.btn-secundario {
	background: var(--surface);
	border-color: var(--line-strong);
	color: var(--text-secondary);
}

.btn-secundario:hover {
	background: var(--surface-soft);
	border-color: var(--ink-400);
	color: var(--text);
}

.btn-secundario:active {
	background: var(--line-hairline);
}

/* Variantes sobre fundo escuro (seção Contato). */
.btn-claro {
	background: var(--surface);
	border-color: var(--surface);
	color: var(--ink-900);
	min-height: 48px;
}

.btn-claro:hover {
	background: var(--brand-50);
	border-color: var(--brand-50);
	color: var(--ink-900);
}

.btn-contorno-claro {
	color: var(--text-inverse);
	border-color: color-mix(in srgb, #ffffff 45%, transparent);
	min-height: 48px;
}

.btn-contorno-claro:hover {
	background: color-mix(in srgb, #ffffff 12%, transparent);
	color: var(--text-inverse);
}

.grupo-cta {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 32px;
}

/* ─── 6. Etiquetas ───────────────────────────────────────────────────────── */

.tag {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0.02em;
	padding: 3px 10px;
	border: 1px solid var(--primary);
	color: var(--primary);
}

.chip {
	font-size: 12.5px;
	line-height: 1.5;
	padding: 3px 8px;
	border: 1px solid var(--line);
	color: color-mix(in srgb, var(--text) 74%, transparent);
}

/* Selo do hero: contorno teal claro sobre lavagem da marca — o mesmo par
   fundo/tinta que o sistema usa em `--ds-semantic-positive`. */
.selo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--primary-active);
	background: var(--brand-50);
	border: 1px solid var(--brand-200);
	padding: 7px 13px;
}

/* ─── 7. Cabeçalho ───────────────────────────────────────────────────────── */

.cabecalho {
	position: sticky;
	top: 0;
	z-index: 60;
	background: color-mix(in srgb, var(--surface) 92%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--line);
}

.cabecalho-interno {
	display: flex;
	align-items: center;
	gap: clamp(12px, 2vw, 28px);
	padding: 10px var(--gutter);
	max-width: var(--largura-max);
	margin-inline: auto;
}

.marca {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	/* 44px de alvo de toque; cabe dentro da altura que o CTA (46px) já impõe
	   ao cabeçalho, então não empurra o layout. */
	min-height: 44px;
	margin-right: auto;
	text-decoration: none;
	color: inherit;
	white-space: nowrap;
}

.marca img {
	width: auto;
	height: 30px;
	flex: none;
}

.marca-nome {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 19px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: 1;
}

.nav-links {
	display: flex;
	gap: clamp(14px, 1.6vw, 20px);
	align-items: center;
	font-size: 14.5px;
}

.nav-links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: inherit;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color var(--transicao), border-color var(--transicao);
}

.nav-links a:hover {
	color: var(--primary);
}

.nav-links a[aria-current="true"] {
	color: var(--primary-active);
	border-bottom-color: var(--primary);
}

/* CTA repetido dentro do menu: existe só onde o CTA do cabeçalho não cabe.
   Precisa da especificidade de `.nav-links a` por dois motivos: aquela regra
   define o `display` (alvo de toque) e, sobretudo, define `color: inherit` —
   que sem isto vazaria a tinta da navegação para dentro do botão sólido,
   exatamente o defeito que o handoff pedia para não reintroduzir. */
.nav-links .nav-cta {
	display: none;
	color: var(--surface);
}

.nav-links .nav-cta:hover {
	color: var(--surface);
}

/* Botão do menu mobile — escondido no desktop, revelado abaixo de 900px. */
.nav-alternar {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--line);
	cursor: pointer;
	color: var(--text);
}

.nav-alternar span {
	display: block;
	position: relative;
	width: 18px;
	height: 1.5px;
	background: currentColor;
}

.nav-alternar span::before,
.nav-alternar span::after {
	content: "";
	position: absolute;
	left: 0;
	width: 18px;
	height: 1.5px;
	background: currentColor;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-alternar span::before { top: -6px; }
.nav-alternar span::after { top: 6px; }

.nav-alternar[aria-expanded="true"] span { background: transparent; }
.nav-alternar[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-alternar[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* ─── 8. Hero ────────────────────────────────────────────────────────────── */

/* Faixa do hero: variação do `--gradient-quiet` do sistema (teal-50 → claro),
   terminando no fundo de conteúdo em vez de branco, para dissolver no resto da
   página sem costura visível. É o único gradiente claro do site. */
.hero {
	position: relative;
	background: linear-gradient(180deg, var(--brand-50) 0%, var(--bg) 58%);
	/* Topo mais curto que o do handoff (era 104px no máximo). Em 1440x900 o
	   painel de produto começava a ~785px, deixando só uma tira dele acima da
	   dobra. O produto ser visível de imediato é o objetivo nº 1 desta página,
	   e vale mais que os 24px de respiro. */
	padding-top: clamp(44px, 5.5vw, 80px);
	padding-bottom: clamp(40px, 5vw, 64px);
}

/* Brilho discreto atrás do painel de produto — dá profundidade sem virar
   decoração: fica abaixo do conteúdo e some no mobile, onde não há espaço
   para ele ser percebido. */
.hero::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 60%;
	background: radial-gradient(
		62% 70% at 50% 100%,
		color-mix(in srgb, var(--brand-400) 22%, transparent) 0%,
		transparent 72%
	);
	pointer-events: none;
	z-index: 0;
}

.hero > .container {
	position: relative;
	z-index: 1;
}

/* Teto de 92px em vez dos 104px do handoff — mesma escala fluida, mesmo peso
   visual até 1280px (onde 7vw já dava ~90px); só as telas muito largas ficam
   um pouco menores, em troca de o produto subir acima da dobra. */
.hero h1 {
	font-size: clamp(40px, 6.4vw, 92px);
	line-height: 1.02;
	letter-spacing: 0.005em;
	margin: 26px 0 0 -0.05em;
	max-width: 19ch;
}

.hero h1 .destaque {
	color: var(--primary-active);
}

.hero-lead {
	font-size: clamp(16px, 1.35vw, 19px);
	line-height: 1.55;
	max-width: 60ch;
	margin-top: 26px;
	color: color-mix(in srgb, var(--text) 82%, transparent);
}

.hero-figura {
	margin-top: clamp(34px, 4vw, 56px);
}

@media (max-width: 700px) {
	.hero::after {
		display: none;
	}
}

/* Painel que emoldura a captura real do sistema. */
/* Sem `overflow: hidden` de propósito: as marcas de registro do blueprint são
   desenhadas 6px FORA da caixa e seriam cortadas por qualquer recorte aqui. */
.painel-produto {
	box-shadow: var(--shadow-panel);
}

.painel-produto .captura {
	width: 100%;
	display: block;
	border-top: 0;
}

/* ─── 9. Problema (antes / depois) ───────────────────────────────────────── */

.comparativo {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: clamp(20px, 3vw, 40px);
	align-items: stretch;
	margin-top: clamp(32px, 4vw, 52px);
}

.quadro-antes {
	border: 1px dashed color-mix(in srgb, var(--text) 28%, transparent);
	padding: clamp(22px, 2.6vw, 34px);
}

.quadro-depois {
	padding: clamp(22px, 2.6vw, 34px);
	box-shadow: var(--shadow-card);
}

.quadro-rotulo {
	display: block;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 500;
	color: color-mix(in srgb, var(--text) 68%, transparent);
}

.quadro-depois .quadro-rotulo {
	color: var(--primary-active);
}

.quadro-titulo {
	font-size: clamp(24px, 2.4vw, 32px);
	line-height: 1.1;
	letter-spacing: 0.02em;
	margin-top: 10px;
}

.quadro-antes .quadro-titulo {
	color: color-mix(in srgb, var(--text) 72%, transparent);
}

.lista-marcada {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.lista-marcada li {
	display: flex;
	gap: 12px;
	align-items: baseline;
	padding: 12px 0;
	font-size: 15px;
}

.quadro-antes .lista-marcada li {
	border-top: 1px dashed color-mix(in srgb, var(--text) 18%, transparent);
	color: color-mix(in srgb, var(--text) 72%, transparent);
}

.quadro-depois .lista-marcada li {
	border-top: 1px solid var(--line);
}

.lista-marcada .marca-item {
	flex: none;
}

/* O "—" é decorativo (aria-hidden) e bastaria o mínimo de 3:1 de elemento
   gráfico, mas fica no mesmo nível de contraste do resto do texto para que
   nenhum elemento da página fique abaixo de AA. */
.quadro-antes .marca-item {
	color: color-mix(in srgb, var(--text) 68%, transparent);
}

.quadro-depois .marca-item {
	color: var(--primary-active);
	font-weight: 600;
}

/* ─── 10. Solução (fluxo) ────────────────────────────────────────────────── */

/* 9 etapas em 3 colunas: divide exato em qualquer um dos três breakpoints,
   então nunca sobra célula órfã na última fila. */
.fluxo {
	list-style: none;
	margin: clamp(36px, 4.5vw, 60px) 0 0;
	padding: 0;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Transparente de propósito: o gradiente da seção precisa atravessar as
   células. O hover é uma lavagem clara sobre o gradiente, não uma cor sólida
   — cor sólida taparia o gradiente e quebraria a continuidade da faixa. */
.fluxo li {
	background: transparent;
	padding: 18px 16px 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	transition: background var(--transicao);
}

.fluxo li:hover {
	background: rgba(255, 255, 255, 0.07);
}

.fluxo-n {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	font-weight: 500;
	color: var(--brand-300);
}

.fluxo-nome {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: clamp(18px, 1.5vw, 22px);
	line-height: 1.1;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.fluxo-rota {
	font-size: 12.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.8);
}

.fluxo-linha {
	margin-top: 20px;
	height: 2px;
	overflow: hidden;
}

.fluxo-linha svg {
	display: block;
	width: 100%;
	height: 2px;
}

.fluxo-traco {
	stroke: var(--brand-400);
	stroke-width: 2;
	stroke-dasharray: 10 14;
	animation: tracejar 1.4s linear infinite;
}

@keyframes tracejar {
	to { stroke-dashoffset: -24; }
}

/* ─── 11. Módulos (master-detail) ────────────────────────────────────────── */

.modulos-grade {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: clamp(20px, 2.4vw, 32px);
	margin-top: clamp(32px, 4vw, 48px);
	align-items: start;
}

.modulos-abas {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--line);
}

.aba-modulo {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 15px 16px;
	min-height: 44px;
	border-bottom: 1px solid var(--line);
	border-left: 3px solid transparent;
	font-family: var(--font-body);
	color: var(--text);
	transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}

.aba-modulo:hover {
	background: var(--brand-50);
}

.aba-modulo:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: -2px;
}

.aba-modulo[aria-selected="true"] {
	background: var(--brand-100);
	color: var(--ink-900);
	border-left-color: var(--primary-hover);
}

.aba-n {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	font-weight: 500;
	color: var(--primary-active);
	flex: none;
}

.aba-nome {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 20px;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	line-height: 1.1;
}

.painel-modulo {
	box-shadow: var(--shadow-card);
	display: flex;
	flex-direction: column;
}

.painel-modulo[hidden] {
	display: none;
}

.modulo-corpo {
	padding: clamp(22px, 2.4vw, 32px);
	display: flex;
	flex-direction: column;
	gap: 20px;
	flex: 1;
}

.modulo-corpo h3 {
	font-size: clamp(26px, 3vw, 40px);
	line-height: 1.05;
	letter-spacing: 0.02em;
}

.modulo-desc {
	font-size: 16.5px;
	line-height: 1.55;
	max-width: 56ch;
	margin-top: 12px;
	color: color-mix(in srgb, var(--text) 82%, transparent);
}

.modulo-detalhes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 20px;
	border-top: 1px solid var(--line);
	padding-top: 20px;
}

.rotulo-detalhe {
	display: block;
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--primary-active);
	margin-bottom: 8px;
}

.texto-detalhe {
	font-size: 14.5px;
	line-height: 1.55;
	color: color-mix(in srgb, var(--text) 78%, transparent);
}

.lista-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* Captura real dentro do painel de módulo. */
.modulo-captura {
	border-top: 1px solid var(--line);
	background: var(--surface-soft);
}

.modulo-captura img {
	width: 100%;
	display: block;
}

.modulo-captura figcaption {
	padding: 10px 16px;
	border-top: 1px solid var(--line);
	background: var(--surface);
	font-size: 12px;
	line-height: 1.5;
	color: color-mix(in srgb, var(--text) 68%, transparent);
}

/* ─── 12. Amplitude operacional ──────────────────────────────────────────── */

/* 6 domínios: 3 colunas — divide exato, como a jornada de 6 passos. */
.dominios {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: clamp(28px, 3.4vw, 40px);
}

.dominios > div {
	background: var(--surface);
	padding: clamp(20px, 2.2vw, 28px);
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: background var(--transicao);
}

.dominios > div:hover {
	background: var(--brand-50);
}

.dominio-n {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	font-weight: 500;
	color: var(--primary-active);
}

.dominios h3 {
	font-size: 24px;
	line-height: 1.08;
	letter-spacing: 0.025em;
}

.lista-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

/* ─── 13. Visão executiva ────────────────────────────────────────────────── */

/* Duas colunas de TEXTO (enunciado + lista A–D); o painel de produto vem
   embaixo, na largura inteira do container.
   Antes o painel dividia a linha com o texto e ficava em ~534px: uma captura
   de 1440px reduzida a 534px deixa a interface ilegível — o oposto do que a
   seção precisa provar. Em largura cheia ele exibe a 1136px (mesma densidade
   do hero), e a tela volta a ser lida. */
.visao-grade {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: clamp(20px, 4vw, 64px);
	align-items: start;
}

.painel-visao {
	margin-top: clamp(28px, 3.4vw, 44px);
}

/* A lista A–D encosta no topo da coluna vizinha: sem a régua do enunciado,
   ela precisa da própria linha para alinhar com o bloco de texto ao lado. */
.visao-grade > div:last-child .lista-alfabetica {
	margin-top: 0;
	border-top: 0;
}

@media (min-width: 861px) {
	.visao-grade > div:last-child {
		padding-top: 54px;
	}
}

.lista-alfabetica {
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.lista-alfabetica li {
	display: flex;
	gap: 14px;
	align-items: baseline;
	padding: 13px 0;
	border-top: 1px solid var(--line);
	font-size: 15.5px;
}

.lista-alfabetica .letra {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--primary-active);
	flex: none;
}

/* ─── 14. Como funciona ──────────────────────────────────────────────────── */

.jornada {
	list-style: none;
	margin: clamp(28px, 3.4vw, 44px) 0 0;
	padding: 0;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.jornada li {
	background: var(--surface);
	padding: clamp(22px, 2.4vw, 30px);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.jornada-n {
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: clamp(34px, 3.2vw, 46px);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--brand-600);
}

/* Último passo em dourado — fecha o ciclo da jornada. */
.jornada li:last-child .jornada-n {
	color: var(--accent-gold);
}

.jornada h3 {
	font-size: 19px;
	line-height: 1.12;
	letter-spacing: 0.025em;
	margin-top: 6px;
}

.jornada p {
	font-size: 14px;
	line-height: 1.55;
	color: color-mix(in srgb, var(--text) 76%, transparent);
}

/* ─── 15. Diferenciais ───────────────────────────────────────────────────── */

/* 5 diferenciais numa fila única no desktop — 5 é primo, então qualquer
   outro número de colunas deixaria órfã (agora inofensiva, mas feia). */
.diferenciais {
	grid-template-columns: repeat(5, minmax(0, 1fr));
	margin-top: clamp(32px, 4vw, 52px);
}

.diferenciais > div {
	background: transparent;
	padding: clamp(22px, 2.4vw, 30px);
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: background var(--transicao);
}

.diferenciais > div:hover {
	background: rgba(255, 255, 255, 0.06);
}

.diferenciais h3 {
	font-size: 23px;
	line-height: 1.1;
	letter-spacing: 0.025em;
}

.diferenciais p {
	font-size: 14px;
	line-height: 1.55;
	color: color-mix(in srgb, #ffffff 76%, transparent);
}

/* ─── 16. Para quem é ────────────────────────────────────────────────────── */

/* 6 cards em 3 colunas — duas filas cheias. */
.publicos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 2.2vw, 28px);
	margin-top: clamp(28px, 3.4vw, 44px);
}

.publicos .blueprint {
	padding: 22px 24px;
	transition: box-shadow var(--transicao);
}

.publicos .blueprint:hover {
	box-shadow: var(--shadow-card);
}

.publicos h3 {
	font-size: 21px;
	line-height: 1.12;
	letter-spacing: 0.025em;
}

.publicos p {
	margin-top: 10px;
	font-size: 14.5px;
	line-height: 1.55;
	color: color-mix(in srgb, var(--text) 76%, transparent);
}

/* ─── 17. FAQ ────────────────────────────────────────────────────────────── */

.faq {
	max-width: 860px;
}

.faq details {
	border-bottom: 1px solid var(--line);
}

.faq summary {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 18px 0;
	min-height: 44px;
	cursor: pointer;
	list-style: none;
	transition: color var(--transicao);
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }

.faq summary:hover {
	color: var(--ink-700);
}

.faq summary:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

/* Nas seções de fundo azul institucional o anel de foco padrão (o próprio
   azul) ficaria invisível sobre o fundo. Ali ele vira a tinta clara. */
.secao-escura :focus-visible {
	outline-color: var(--text-inverse);
}

.faq-x {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 20px;
	line-height: 1;
	color: var(--primary-active);
	flex: none;
	display: inline-block;
	transition: transform 0.2s ease;
}

.faq details[open] .faq-x {
	transform: rotate(45deg);
}

.faq-pergunta {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 20px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.faq details > p {
	padding: 0 0 20px 34px;
	font-size: 15px;
	line-height: 1.6;
	max-width: 62ch;
	color: color-mix(in srgb, var(--text) 80%, transparent);
}

/* ─── 18. Contato ────────────────────────────────────────────────────────── */

.contato-grade {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: clamp(28px, 4vw, 64px);
	align-items: end;
}

.contato-grade h2 {
	font-size: clamp(32px, 4.6vw, 68px);
	line-height: 1.03;
	letter-spacing: 0.01em;
	max-width: 20ch;
}

.contato-dados {
	margin: 0;
	display: flex;
	flex-direction: column;
	font-size: 15px;
}

/* O padding da linha migrou para dentro do link (abaixo) para dar 44px de
   alvo de toque no canal de contato sem mudar a altura total da linha. */
.contato-linha {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding: 6px 0;
	border-top: 1px solid color-mix(in srgb, #ffffff 24%, transparent);
}

.contato-linha:last-child {
	border-bottom: 1px solid color-mix(in srgb, #ffffff 24%, transparent);
}

.contato-linha dt {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--brand-300);
}

.contato-linha dd {
	margin: 0;
}

.contato-linha a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 20px;
	letter-spacing: 0.02em;
	color: var(--text-inverse);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.contato-linha a:hover {
	color: var(--brand-100);
}

/* ─── 19. Rodapé ─────────────────────────────────────────────────────────── */

.rodape {
	border-top: 1px solid var(--line);
}

.rodape-grade {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 32px;
	padding-block: clamp(32px, 4vw, 52px);
}

.rodape-marca {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.rodape-marca img {
	height: 26px;
	width: auto;
}

.rodape-marca span {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 20px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.rodape-sobre {
	margin-top: 10px;
	font-size: 13.5px;
	line-height: 1.6;
	max-width: 36ch;
	color: color-mix(in srgb, var(--text) 68%, transparent);
}

.rodape nav,
.rodape-contato {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 14px;
	align-items: flex-start;
}

.rodape-titulo {
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 500;
	color: color-mix(in srgb, var(--text) 68%, transparent);
}

.rodape nav a,
.rodape-contato a {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	color: inherit;
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: color var(--transicao);
}

.rodape nav a:hover,
.rodape-contato a:hover {
	color: var(--primary);
}

.rodape-legal {
	padding-bottom: 30px;
	font-size: 12.5px;
	color: color-mix(in srgb, var(--text) 68%, transparent);
}

/* ─── 20. Revelação no scroll ────────────────────────────────────────────── */

[data-revelar] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

[data-revelar].visivel {
	opacity: 1;
	transform: none;
}

/* Sem JavaScript o conteúdo tem de aparecer mesmo assim. */
.sem-js [data-revelar] {
	opacity: 1;
	transform: none;
	transition: none;
}

/* ─── 21. Atalho flutuante de WhatsApp ───────────────────────────────────── */

/* Só o ícone, em qualquer resolução — nenhum rótulo, tooltip ou texto flutuante
   (decisão de produto de 04/09/2026). O nome do link vive apenas no
   `aria-label`, que não tem representação visual.

   Fica sobre o conteúdo e ABAIXO do cabeçalho (z-index 60). Os dois nunca se
   encontram — um está preso no topo da viewport, o outro no rodapé —, mas se o
   menu mobile abrir e descer até embaixo, quem passa por cima é o cabeçalho.
   `position: fixed` deixa o botão fora do fluxo: nenhum salto de layout. */
.whatsapp-flutuante {
	position: fixed;
	/* Ancorado pela direita, então cresce para dentro da tela e nunca cria
	   rolagem lateral. `env(safe-area-inset-*)` respeita a barra de gestos do
	   iOS; o `0px` de fallback vale em todo navegador que não a implementa. */
	right: calc(20px + env(safe-area-inset-right, 0px));
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	z-index: 55;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	/* Verde do próprio WhatsApp. É afordância de terceiro, não cor da marca:
	   fica fora da paleta institucional de propósito, porque é o que torna o
	   botão reconhecível sem nenhum texto ao lado. */
	background: #25d366;
	/* Declarado explicitamente porque `a` e `a:hover` na base pintam o link com
	   a tinta institucional — o glifo herda daqui via `currentColor`. */
	color: #ffffff;
	border: 1px solid rgba(13, 27, 42, 0.06);
	box-shadow:
		0 8px 24px rgba(13, 27, 42, 0.22),
		0 2px 6px rgba(13, 27, 42, 0.12);
	text-decoration: none;
	transition:
		transform var(--transicao),
		background var(--transicao),
		box-shadow var(--transicao);
}

.whatsapp-flutuante:hover {
	background: #1eb457;
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow:
		0 12px 30px rgba(13, 27, 42, 0.26),
		0 3px 8px rgba(13, 27, 42, 0.14);
}

.whatsapp-flutuante:active {
	transform: translateY(0);
}

/* O anel branco interno garante que o indicador de foco seja visível tanto
   sobre seção clara quanto sobre seção escura — o botão flutua sobre qualquer
   parte da página. */
.whatsapp-flutuante:focus-visible {
	outline: 3px solid var(--ink-900);
	outline-offset: 3px;
	box-shadow:
		0 0 0 3px var(--surface),
		0 8px 24px rgba(13, 27, 42, 0.22);
}

.whatsapp-flutuante-icone {
	display: block;
}

/* Abaixo de 560px o cabeçalho já perdeu o CTA (ver seção 22), então este botão
   passa a ser o atalho permanente para o WhatsApp. Encolhe o disco e as
   margens, mas nunca abaixo dos 48px de alvo confortável ao toque. */
@media (max-width: 560px) {
	.whatsapp-flutuante {
		right: calc(16px + env(safe-area-inset-right, 0px));
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
		width: 52px;
		height: 52px;
	}

	.whatsapp-flutuante-icone {
		width: 24px;
		height: 24px;
	}

	/* A linha legal é a última coisa da página e, no mobile, corre até perto da
	   borda direita — sem esta folga ela terminaria atrás do botão. No desktop
	   a mesma linha acaba muito antes da coluna do botão, e não precisa. */
	.rodape-legal {
		padding-bottom: 84px;
	}
}

@media (max-width: 380px) {
	.whatsapp-flutuante {
		width: 48px;
		height: 48px;
	}
}

/* ─── 22. Responsividade ─────────────────────────────────────────────────── */

/* Grades de contagem fixa: os números de coluna abaixo continuam escolhidos
   para dividir a contagem de itens sempre que possível (9 → 3, 6 → 3 ou 2),
   de modo que a última fila fique cheia. */
@media (max-width: 1023px) {
	.diferenciais {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* 5 é primo: fora da fila única de 5 colunas, sempre sobraria uma célula
	   solta e a moldura da grade ficaria entalhada à direita. O último
	   diferencial ocupa duas colunas para fechar a fila. */
	.diferenciais > div:last-child {
		grid-column: span 2;
	}

	.dominios,
	.jornada,
	.publicos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	/* O handoff pede fluxo vertical no mobile. */
	.fluxo {
		grid-template-columns: minmax(0, 1fr);
	}

	.diferenciais {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.dominios,
	.jornada,
	.diferenciais,
	.publicos {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Em coluna única o `span 2` acima criaria uma segunda coluna implícita. */
	.diferenciais > div:last-child {
		grid-column: auto;
	}
}

/* Abaixo de 900px a navegação vira menu revelável. */
@media (max-width: 900px) {
	.nav-alternar {
		display: inline-flex;
	}

	.nav-links {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 8px var(--gutter) 18px;
		background: var(--surface);
		border-bottom: 1px solid var(--line);
		box-shadow: var(--shadow-card);
	}

	.nav-links.aberto {
		display: flex;
	}

	.nav-links a {
		padding: 13px 0;
		min-height: 44px;
		display: flex;
		align-items: center;
		border-bottom: 1px solid var(--line);
	}

	.nav-links a[aria-current="true"] {
		border-bottom-color: var(--line);
	}

	.nav-links .nav-cta[aria-current="true"] {
		border-bottom-color: var(--primary);
	}

	.cabecalho {
		position: sticky;
	}

	.cabecalho-interno {
		position: relative;
	}
}

@media (max-width: 640px) {
	/* "Tela real do sistema" é dito de novo, por extenso, na legenda da figura.
	   No mobile ele só empurrava a barra para quatro linhas. */
	.painel-barra > span + span {
		display: none;
	}

	.painel-barra > span {
		padding: 9px 16px;
		font-size: 10px;
		letter-spacing: 0.1em;
	}

	/* Painel de produto sangra até a borda da tela: numa largura de 390px, os
	   40px de goteira eram 11% da imagem. As marcas de canto saem junto —
	   ficariam fora da viewport e criariam overflow lateral. */
	.painel-produto {
		margin-inline: calc(var(--gutter) * -1);
		border-inline: 0;
	}

	.painel-produto > .canto {
		display: none;
	}

	.painel-visao {
		margin-inline: calc(var(--gutter) * -1);
	}
}

/* O explorador de módulos empilha em coluna única. */
@media (max-width: 820px) {
	.modulos-grade {
		grid-template-columns: 1fr;
	}

	.aba-nome {
		font-size: 18px;
	}
}

@media (max-width: 560px) {
	:root {
		--gutter: 20px;
	}

	/* Marca + botão de menu + CTA não cabem lado a lado: o wordmark passava
	   por baixo do botão do menu. O CTA sai do cabeçalho e reaparece dentro do
	   menu — continua a um toque de distância, e o CTA do hero está logo
	   abaixo, visível sem rolar. */
	.cabecalho-cta {
		display: none;
	}

	.nav-links .nav-cta {
		display: inline-flex;
		justify-content: center;
		margin-top: 14px;
		border-bottom: 1px solid var(--primary);
	}

	.marca-nome {
		font-size: 17px;
	}

	.hero h1 {
		margin-left: 0;
	}

	.grupo-cta .btn {
		flex: 1 1 100%;
	}

	.contato-linha {
		flex-direction: column;
		gap: 4px;
	}
}

/* Em telas muito estreitas o header não comporta a marca inteira. */
@media (max-width: 380px) {
	.marca-nome {
		font-size: 15px;
	}

	.cabecalho-interno .btn {
		display: none;
	}
}

/* ─── 23. Movimento reduzido ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	[data-revelar] {
		opacity: 1;
		transform: none;
	}

	.fluxo-traco {
		animation: none !important;
	}
}

/* ─── 24. Impressão ──────────────────────────────────────────────────────── */

@media print {
	.cabecalho,
	.nav-alternar,
	.pular-para-conteudo,
	.whatsapp-flutuante {
		display: none !important;
	}

	[data-revelar] {
		opacity: 1;
		transform: none;
	}

	.secao-escura {
		background: #fff;
		color: #000;
	}
}