/* ==========================================================================
   VITAL — Corte a Laser e Dobra
   Sistema de design. Direção: INSTITUCIONAL TÉCNICO.

   Referência: fabricante europeu de bens de capital, empresa de engenharia
   consolidada. Sóbrio, claro, confiante. A autoridade vem de organização e
   clareza — não de impacto visual. Moderno aqui = bem executado.

   Regras estruturais deste arquivo
   ---------------------------------------------------------------------------
   1. Container ÚNICO: 1200px, padding 24px (16px mobile). Toda seção usa o
      mesmo. Sem exceção, sem max-width local que gere faixa vazia.
   2. Fundo predominantemente claro. Bloco escuro em NO MÁXIMO dois momentos
      do site: topo do hero e o CTA. Nada além disso.
   3. Tipografia:
        títulos  IBM Plex Sans 600/700 — caixa NORMAL, nunca caixa alta
        corpo    IBM Plex Sans 400/600 — 17px / 1.65
        mono     IBM Plex Mono 400 — uso RESTRITO: tabela de especificações
                 e números de medida. Em nenhum outro lugar.
   4. Acento (laranja): RACIONADO. Botão primário, eyebrow de seção e um
      indicador pontual. PROIBIDO em título, ícone, borda de seção, sinal
      de acordeão e número de estatística.
      Sobre escuro o eyebrow usa --acento-claro; o tom padrão não passa AA.
   5. Caixas: borda 1px cinza claro, raio 4px, SEM sombra. Sombra apenas no
      formulário, sutil.
   6. Ícones: traço 1.5px, cor grafite, 20px. Sem cor de acento, sem fundo.
   7. Ritmo vertical: 120px entre seções institucionais, 80px entre seções
      densas de informação.

   Sumário
   ---------------------------------------------------------------------------
   01. Fontes            02. Tokens           03. Reset
   04. Tipografia        05. Container/seções 06. Utilitários
   07. Botões            08. Header/nav       09. Hero
   10. Números           11. Tabela técnica   12. Cards de solução
   13. Processo          14. Sobre            15. Listas de especificação
   16. Portfólio         17. Clientes         18. FAQ
   19. Faixa CTA         20. Contato/formulário  21. Cross-link
   22. Footer            23. Flutuante        24. Páginas de texto/404
   25. Breakpoints       26. Movimento reduzido  27. Print
   ========================================================================== */

/* ==========================================================================
   01. FONTES — self-hosted, woff2, zero dependência externa
   ========================================================================== */

/* Títulos e corpo: IBM Plex Sans. Variable 100-700, um arquivo só.
   Escolhida por proximidade com a Roboto do site antigo — mesma estrutura
   de grotesca neutra — com mais caráter institucional. */
@font-face {
	font-family: 'IBM Plex Sans';
	src: url('../fonts/ibm-plex-sans.woff2') format('woff2-variations'),
	     url('../fonts/ibm-plex-sans.woff2') format('woff2');
	font-weight: 100 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
	               U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
	               U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Mono: só dados técnicos. Estática, peso 400. */
@font-face {
	font-family: 'IBM Plex Mono';
	src: url('../fonts/ibm-plex-mono.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
	               U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
	               U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   02. TOKENS
   ========================================================================== */

:root {
	/* --- Marca: extraída da logo por contagem de pixels ---------------- */
	--marca-azul: #307abd;
	--marca-laranja: #f1613a;

	/* --- Dominante: o azul-grafite da marca ----------------------------
	   Derivado do azul #307ABD dessaturado e escurecido, para títulos,
	   blocos escuros e elementos estruturais.                            */
	--tinta: #1a2531;
	--tinta-800: #24313f;
	--tinta-700: #33414f;

	/* --- Neutros: escala fria, faz o trabalho pesado do layout --------- */
	--n-900: #111820;
	--n-700: #3f4a56;
	--n-600: #55616e;
	/* 4.92:1 sobre branco e 4.54:1 sobre --fundo-alt (eyebrow usa os dois). */
	--n-500: #66727d;
	/* 3.25:1 / 3.00:1 — mínimo para logo em escala de cinza. */
	--n-400: #85909a;
	--n-300: #aeb6bf;
	--n-200: #ced4da;
	--n-150: #dfe3e7;
	--n-100: #eaedf0;
	--n-050: #f4f6f7;
	--branco: #ffffff;

	/* --- Acento: RACIONADO. Máx. 3 por tela. -------------------------- */
	--acento: #e35526;
	--acento-hover: #c8420f;
	/* Versão para texto pequeno sobre claro, quando indispensável. */
	--acento-txt: #bf3f0d;
	/* Versão clara para texto pequeno sobre os blocos escuros: 7.02:1
	   sobre --tinta. Nunca usar sobre fundo claro (2.21:1). */
	--acento-claro: #ff9166;

	/* --- Papéis semânticos -------------------------------------------- */
	--fundo: var(--branco);
	--fundo-alt: var(--n-050);
	--fundo-escuro: var(--tinta);
	--texto: var(--n-700);
	--texto-forte: var(--tinta);
	--texto-suave: var(--n-600);
	--texto-fraco: var(--n-500);
	--borda: var(--n-150);
	--borda-forte: var(--n-200);
	--icone: var(--n-600);

	/* Sobre fundo escuro. */
	--esc-titulo: var(--branco);
	--esc-texto: #c9d1d9;
	--esc-suave: #9aa5b1;
	--esc-borda: rgba(255, 255, 255, 0.16);
	--esc-borda-forte: rgba(255, 255, 255, 0.34);

	--sucesso: #166534;
	--erro: #b42318;

	/* --- Tipografia --------------------------------------------------- */
	--f-titulo: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
	--f-corpo: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
	--f-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

	/* Corpo em 17px: base do sistema. */
	--t-corpo: 1.0625rem;

	--t-2xs: 0.75rem;
	--t-xs: 0.8125rem;
	--t-sm: 0.9375rem;
	--t-base: var(--t-corpo);
	--t-lg: 1.1875rem;
	--t-xl: 1.375rem;

	/* H2 de seção: 32-36px. */
	--t-h2: clamp(1.75rem, 1.45rem + 1.1vw, 2.25rem);
	--t-h3: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
	/* Hero: 48-56px. */
	--t-hero: clamp(2.125rem, 1.4rem + 2.9vw, 3.5rem);
	--t-hero-sub: clamp(1.875rem, 1.35rem + 2.1vw, 2.875rem);
	/* Número de estatística. */
	--t-num: clamp(1.875rem, 1.6rem + 1.2vw, 2.5rem);

	--lh-hero: 1.1;
	--lh-titulo: 1.2;
	--lh-media: 1.45;
	--lh-corpo: 1.65;

	--ls-hero: -0.02em;
	--ls-titulo: -0.011em;
	--ls-eyebrow: 0.12em;

	/* Largura máxima de parágrafo: 68 caracteres. */
	--medida: 68ch;

	/* --- Espaçamento: escala de 4px ----------------------------------- */
	--e-1: 0.25rem;
	--e-2: 0.5rem;
	--e-3: 0.75rem;
	--e-4: 1rem;
	--e-5: 1.25rem;
	--e-6: 1.5rem;
	--e-8: 2rem;
	--e-10: 2.5rem;
	--e-12: 3rem;
	--e-16: 4rem;
	--e-20: 5rem;

	/* --- Ritmo vertical ----------------------------------------------
	   120px institucional, 80px denso. Escala no mobile.               */
	--y-inst: clamp(4rem, 2.5rem + 4.5vw, 7.5rem);
	--y-densa: clamp(3rem, 2.2rem + 2.6vw, 5rem);

	/* --- Container ÚNICO ---------------------------------------------- */
	--wrap: 1200px;
	--gutter: 1rem;
	--header-h: 68px;

	/* --- Geometria: raio 4px, sem sombra (exceto formulário) ---------- */
	--r: 4px;
	--r-sm: 2px;
	--sombra-form: 0 1px 2px rgba(17, 24, 32, 0.04), 0 4px 12px rgba(17, 24, 32, 0.05);

	/* --- Movimento: CSS puro, discreto -------------------------------- */
	--dur: 150ms;
	--dur-md: 240ms;
	--dur-lg: 500ms;
	--ease: cubic-bezier(0.25, 0.1, 0.25, 1);

	--z-nav: 100;
	--z-flutuante: 90;
	--z-topo: 200;
}

@media (min-width: 40em) {

	:root {
		--gutter: 1.5rem;
	}
}

/* ==========================================================================
   03. RESET
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + var(--e-4));
}

body {
	margin: 0;
	background: var(--fundo);
	color: var(--texto);
	font-family: var(--f-corpo);
	font-size: var(--t-corpo);
	font-weight: 400;
	line-height: var(--lh-corpo);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
	margin: 0;
}

ul, ol {
	margin: 0;
	padding: 0;
}

li {
	list-style: none;
}

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

img {
	height: auto;
	border-style: none;
}

/* Só links de verdade herdam cor de link. O seletor genérico antigo pegava
   <em>, <strong> e <span> dentro de parágrafo e deixava palavras soltas
   cinza-azuladas no meio do texto. */
a:where([href]) {
	color: var(--tinta);
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}

/*
 * Hover de link só recolore link de TEXTO. Cards e blocos inteiros são
 * <a>: recolorir no hover pintava título, parágrafo e rodapé junto — era
 * daí que vinha a "cor vazando no corpo de texto". Blocos sinalizam o
 * hover por borda e deslocamento da seta, não por cor do texto.
 */
a:where([href]):hover {
	color: var(--acento-txt);
}

a:where(.solucao, .cross__item, .peca, .card, .bloco-link):hover {
	color: inherit;
}

/* Corpo de texto: cor explícita, nada herda tom de link ou de título. */
p,
li,
dd,
figcaption,
blockquote {
	color: inherit;
}

p em,
p strong,
p span,
li em,
li strong,
li span {
	color: inherit;
}

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

button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

table {
	border-collapse: collapse;
	width: 100%;
}

:focus-visible {
	outline: 2px solid var(--tinta);
	outline-offset: 2px;
	border-radius: var(--r-sm);
}

::selection {
	background: var(--tinta);
	color: var(--branco);
}

/* ==========================================================================
   04. TIPOGRAFIA
   ========================================================================== */

h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
	font-family: var(--f-titulo);
	font-weight: 700;
	line-height: var(--lh-titulo);
	letter-spacing: var(--ls-titulo);
	color: var(--texto-forte);
	/* Caixa NORMAL. Nenhum título em caixa alta. */
	text-transform: none;
}

h1, .h1 {
	font-size: var(--t-hero);
	line-height: var(--lh-hero);
	letter-spacing: var(--ls-hero);
}

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

h3, .h3 {
	font-size: var(--t-h3);
	font-weight: 600;
}

h4, .h4 {
	font-size: var(--t-base);
	font-weight: 600;
}

p {
	max-width: var(--medida);
	text-wrap: pretty;
}

strong, b {
	font-weight: 600;
	color: var(--texto-forte);
}

.lead {
	font-size: var(--t-lg);
	line-height: var(--lh-media);
	color: var(--texto-suave);
}

.texto-suave {
	color: var(--texto-suave);
}

/* --- MONO: uso restrito ---------------------------------------------
   Permitido apenas na tabela de especificações e em números de medida
   (.medida). Nenhum outro componente usa esta fonte.                 */
.medida {
	font-family: var(--f-mono);
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
	letter-spacing: -0.01em;
}

/* Eyebrow: caixa alta pequena — a única exceção permitida.
   Cor da marca: é o rótulo que identifica a seção, e o laranja aqui
   substitui o cinza sem virar destaque gráfico. */
.eyebrow {
	font-family: var(--f-corpo);
	font-size: 0.6875rem; /* 11px */
	font-weight: 600;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	/* --acento-txt: 5.34:1 sobre branco, 4.93:1 sobre --fundo-alt e
	   4.54:1 sobre --n-100 (faixa de clientes e bloco do mapa) — AA em
	   todos. O --acento puro dá só 3.75:1 e não serve para texto. */
	color: var(--acento-txt);
	margin: 0;
}

/* Sobre fundo escuro o mesmo tom afundaria (2.91:1). Usa a variação
   clara do laranja: 7.02:1 sobre --tinta. */
.secao--escura .eyebrow,
.faixa .eyebrow,
.hero .eyebrow {
	color: var(--acento-claro);
}

/* ==========================================================================
   05. CONTAINER ÚNICO E SEÇÕES
   ========================================================================== */

/* Um container para todo o site. Blocos escuros ocupam 100% da largura,
   mas o conteúdo dentro deles continua neste container. */
.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Compatibilidade: variantes antigas herdam o container padrão para
   não reintroduzir larguras divergentes. */
.wrap--largo,
.wrap--estreito {
	max-width: var(--wrap);
}

.secao {
	position: relative;
	padding-block: var(--y-inst);
}

/* Seção densa de informação: respiro menor. */
.secao--densa {
	padding-block: var(--y-densa);
}

/* Alias de compatibilidade: o ritmo institucional já é o padrão. */
.secao--ampla {
	padding-block: var(--y-inst);
}

.secao--alt {
	background: var(--fundo-alt);
}

/*
 * Ritmo entre seções. Quando a capacidade técnica fica oculta (sem dados),
 * "Três frentes" e "Sobre a Vital" ficavam coladas uma na outra somando os
 * dois paddings — um vão de ~240px. Entre duas seções de MESMO fundo, o
 * respiro é de uma só, não de duas.
 *
 * O :not() precisa valer para os DOIS lados. Só com ele no segundo elemento,
 * uma seção clara depois de uma --alt (o FAQ logo abaixo da faixa de
 * clientes) perdia todo o padding de topo e encostava na seção anterior.
 * Fundos diferentes = a troca de cor já marca a divisão, cada uma mantém
 * o seu respiro.
 */
.secao:not(.secao--alt):not(.secao--escura) + .secao:not(.secao--alt):not(.secao--escura) {
	padding-block-start: 0;
}

.secao--alt + .secao--alt {
	padding-block-start: 0;
}

/* Reservado. O site usa fundo escuro só no hero e no CTA. */
.secao--escura {
	background: var(--fundo-escuro);
	color: var(--esc-texto);
}

.secao--escura h1,
.secao--escura h2,
.secao--escura h3,
.secao--escura h4 {
	color: var(--esc-titulo);
}

.secao--escura p {
	color: var(--esc-texto);
}

.secao--escura .texto-suave {
	color: var(--esc-suave);
}

/* Cabeçalho de seção. */
.secao-head {
	margin-bottom: var(--e-10);
	max-width: var(--medida);
}

.secao-head__titulo {
	margin-top: var(--e-3);
}

.secao-head__intro {
	margin-top: var(--e-4);
	font-size: var(--t-lg);
	line-height: var(--lh-media);
	color: var(--texto-suave);
}

.secao--escura .secao-head__intro {
	color: var(--esc-texto);
}

/* ==========================================================================
   06. UTILITÁRIOS
   ========================================================================== */

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

.skip-link {
	position: absolute;
	top: -100%;
	left: var(--e-4);
	z-index: var(--z-topo);
	background: var(--tinta);
	color: var(--branco);
	padding: var(--e-3) var(--e-5);
	border-radius: var(--r);
	font-size: var(--t-sm);
	font-weight: 600;
}

.skip-link:focus {
	top: var(--e-2);
	color: var(--branco);
}

/* Divisor discreto. Sem cor de acento. */
.linha-corte {
	height: 1px;
	border: 0;
	margin: 0;
	background: var(--borda);
}

.secao--escura .linha-corte {
	background: var(--esc-borda);
}

/* Placeholder de imagem: neutro, sem hachura chamativa. */
/* Placeholder: sem borda. Com borda parecia elemento quebrado. */
.vital-img-ph {
	display: grid;
	place-items: center;
	width: 100%;
	background: var(--n-050);
	border: 0;
	border-radius: var(--r);
	color: var(--n-300);
}

.vital-img-ph svg {
	width: 32px;
	height: 32px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
}

.vital-img {
	border-radius: var(--r);
}

/* Ícones: traço 1.5px, grafite, sem acento e sem fundo colorido. */
.vital-icon {
	flex: none;
	stroke-width: 1.5;
	color: var(--icone);
}

.secao--escura .vital-icon,
.hero .vital-icon,
.faixa .vital-icon {
	color: var(--esc-suave);
}

/* Reveal ao rolar: discreto. */
.js-reveal .reveal {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--dur-lg) var(--ease), transform var(--dur-lg) var(--ease);
}

.js-reveal .reveal.is-visible {
	opacity: 1;
	transform: none;
}

.js-reveal .reveal[data-delay='1'] { transition-delay: 40ms; }
.js-reveal .reveal[data-delay='2'] { transition-delay: 80ms; }
.js-reveal .reveal[data-delay='3'] { transition-delay: 120ms; }
.js-reveal .reveal[data-delay='4'] { transition-delay: 160ms; }
.js-reveal .reveal[data-delay='5'] { transition-delay: 200ms; }

/* ==========================================================================
   07. BOTÕES
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--e-2);
	padding: var(--e-3) var(--e-6);
	min-height: 48px;
	border: 1px solid transparent;
	border-radius: var(--r);
	font-family: var(--f-corpo);
	font-size: var(--t-sm);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease),
	            border-color var(--dur) var(--ease),
	            color var(--dur) var(--ease);
}

/* Primário: uma das poucas ocorrências permitidas do acento. */
.btn--primary {
	background: var(--acento);
	border-color: var(--acento);
	color: var(--branco);
}

.btn--primary:hover {
	background: var(--acento-hover);
	border-color: var(--acento-hover);
	color: var(--branco);
}

/* Secundário sobre fundo claro. */
.btn--ghost {
	background: transparent;
	border-color: var(--borda-forte);
	color: var(--tinta);
}

.btn--ghost:hover {
	background: var(--tinta);
	border-color: var(--tinta);
	color: var(--branco);
}

/* CORREÇÃO: secundário sobre fundo ESCURO — contorno claro 1px,
   texto claro. Antes ficava escuro sobre escuro e desaparecia. */
.hero .btn--ghost,
.faixa .btn--ghost,
.secao--escura .btn--ghost,
.site-footer .btn--ghost {
	background: transparent;
	border-color: var(--esc-borda-forte);
	color: var(--branco);
}

.hero .btn--ghost:hover,
.faixa .btn--ghost:hover,
.secao--escura .btn--ghost:hover,
.site-footer .btn--ghost:hover {
	background: var(--branco);
	border-color: var(--branco);
	color: var(--tinta);
}

.btn--escuro {
	background: var(--tinta);
	border-color: var(--tinta);
	color: var(--branco);
}

.btn--escuro:hover {
	background: var(--tinta-800);
	border-color: var(--tinta-800);
	color: var(--branco);
}

.btn--sm {
	padding: var(--e-2) var(--e-4);
	min-height: 40px;
	font-size: var(--t-xs);
}

.btn--lg {
	padding: var(--e-4) var(--e-8);
	min-height: 54px;
	font-size: var(--t-base);
}

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

.btn[disabled],
.btn[aria-disabled='true'] {
	opacity: 0.55;
	cursor: not-allowed;
}

/*
 * Seta do botão: herda a cor do texto do botão, não o grafite padrão de
 * .vital-icon. Sem isto a seta sai escura sobre o laranja e some.
 * Vale também dentro do hero e da faixa escura, onde .vital-icon é
 * clareado para --esc-suave.
 */
.btn .btn__icone,
.hero .btn .btn__icone,
.faixa .btn .btn__icone,
.secao--escura .btn .btn__icone,
.site-footer .btn .btn__icone {
	color: currentColor;
	stroke-width: 1.5;
	transition: transform var(--dur) var(--ease);
}

.btn:hover .btn__icone {
	transform: translateX(4px);
}

.btn-grupo {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-3);
}

/* Link com seta: grafite, sublinhado no hover. Sem acento. */
.link-seta {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	font-size: var(--t-sm);
	font-weight: 600;
	color: var(--tinta);
}

.link-seta:hover {
	color: var(--acento-txt);
}

.link-seta svg {
	color: currentColor;
	transition: transform var(--dur) var(--ease);
}

.link-seta:hover svg {
	transform: translateX(3px);
}

.secao--escura .link-seta,
.faixa .link-seta {
	color: var(--branco);
}

/* ==========================================================================
   08. HEADER / NAV
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-nav);
	background: var(--branco);
	border-bottom: 1px solid var(--borda);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-4);
	min-height: var(--header-h);
}

.vital-logo {
	display: inline-flex;
	align-items: center;
	flex: none;
}

.vital-logo__img {
	height: 34px;
	width: auto;
}

.vital-logo__text {
	font-family: var(--f-titulo);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: var(--ls-hero);
	color: var(--marca-azul);
}

/* Logo do rodapé em branco. Se existir o arquivo próprio
   (logo-vital-branca), ele é usado e dispensa o filtro. */
.vital-logo--footer .vital-logo__img {
	height: 30px;
	filter: brightness(0) invert(1);
}

.vital-logo--footer .vital-logo__img.is-branca {
	filter: none;
}

.vital-logo--footer .vital-logo__text {
	color: var(--branco);
}

.nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	padding: var(--e-2) var(--e-3);
	border: 1px solid var(--borda-forte);
	border-radius: var(--r);
	font-size: var(--t-xs);
	font-weight: 600;
	color: var(--tinta);
	background: var(--branco);
}

.nav-toggle:hover {
	border-color: var(--n-400);
}

.nav-toggle__label {
	line-height: 1;
}

.nav-toggle__bars {
	display: grid;
	gap: 4px;
	width: 16px;
}

.nav-toggle__bars span {
	display: block;
	height: 1.5px;
	background: currentColor;
	transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(1) {
	transform: translateY(5.5px) rotate(45deg);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(2) {
	opacity: 0;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(3) {
	transform: translateY(-5.5px) rotate(-45deg);
}

/* Nav: um único <ul> no DOM, reposicionado por CSS. */
.site-nav {
	position: fixed;
	inset: var(--header-h) 0 auto 0;
	max-height: calc(100dvh - var(--header-h));
	overflow-y: auto;
	background: var(--branco);
	border-bottom: 1px solid var(--borda);
	padding: var(--e-2) var(--gutter) var(--e-5);
	display: grid;
	gap: var(--e-4);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--dur-md) var(--ease),
	            transform var(--dur-md) var(--ease),
	            visibility var(--dur-md) var(--ease);
}

.site-nav.is-aberto {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.site-nav__list {
	display: grid;
}

.site-nav__link {
	display: block;
	padding: var(--e-4) 0;
	border-bottom: 1px solid var(--borda);
	font-size: var(--t-sm);
	font-weight: 600;
	color: var(--tinta);
}

.site-nav__link:hover,
.site-nav__link.is-current {
	color: var(--acento-txt);
}

/* --- Submenu: base mobile = acordeão ------------------------------------
   O gatilho é <button>, então precisa zerar o visual de botão e casar
   com os <a> irmãos. */
.site-nav__link--botao {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-2);
	padding-block: var(--e-4);
	background: none;
	border: 0;
	border-bottom: 1px solid var(--borda);
	font-family: inherit;
	font-size: var(--t-sm);
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.site-nav__chevron {
	color: currentColor;
	transition: transform var(--dur-md) var(--ease);
}

.site-nav__item--tem-sub.is-aberto .site-nav__chevron {
	transform: rotate(180deg);
}

/*
 * Fechado por padrão, aberto por .is-aberto no <li>.
 * display:none em vez de altura animada: o painel tem três itens de
 * altura fixa e uma transição aqui custaria mais do que entrega.
 *
 * Sem JS o gatilho nunca recebe .is-aberto e o painel ficaria
 * inacessível. Por isso só esconde quando .js-reveal está no <html>
 * (marcador de "JS ligado" que functions.php já imprime antes da
 * primeira pintura). Sem JS, a sublista fica aberta e navegável.
 */
.js-reveal .site-nav__sub {
	display: none;
}

.js-reveal .site-nav__item--tem-sub.is-aberto .site-nav__sub {
	display: block;
}

.site-nav__sub-link {
	display: block;
	padding: var(--e-3) 0 var(--e-3) var(--e-4);
	border-bottom: 1px solid var(--borda);
	font-size: var(--t-sm);
	font-weight: 500;
	color: var(--texto-suave);
}

.site-nav__sub-link:hover,
.site-nav__sub-link.is-current {
	color: var(--acento-txt);
}

.site-nav__cta .btn {
	width: 100%;
}

/* ==========================================================================
   09. HERO — bloco escuro nº 1 de 2 no site
   ========================================================================== */

.hero {
	position: relative;
	background: var(--fundo-escuro);
	color: var(--esc-texto);
	padding-block: var(--y-densa);
}

/* Duas colunas SIMÉTRICAS dentro do container: 50/50. */
.hero__grid {
	display: grid;
	gap: var(--e-8);
	/* stretch, não center: as duas colunas terminam na mesma linha. */
	align-items: stretch;
}

/* --------------------------------------------------------------------------
   HERO FULL-WIDTH — imagem de fundo + overlay
   Só ativa com .hero--fundo, que o PHP só adiciona quando existe imagem.
   Sem imagem, tudo acima continua valendo e o bloco segue sólido.
   -------------------------------------------------------------------------- */
.hero--fundo {
	/* Sangra para fora do container e ocupa a viewport inteira. */
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-block: var(--e-16);
	min-height: 520px;
	display: flex;
	/* Mobile: texto na metade de baixo, onde o gradiente é mais denso. */
	align-items: flex-end;
	background-color: var(--fundo-escuro);
	background-image: var(--hero-img-mob, var(--hero-img));
	background-size: cover;
	/* Mobile: recorte vertical, assunto no centro. */
	background-position: center center;
	background-repeat: no-repeat;
	overflow: hidden;
}

/*
 * Overlay. Mobile: vertical, escuro embaixo, base 0.88 — o texto ocupa a
 * largura toda, então não dá para deixar um lado claro.
 */
.hero--fundo::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	/*
	 * Vertical, escuro embaixo, onde fica o texto. Base 0.92 na zona do
	 * texto; o topo fica mais leve de propósito, senão a foto some e o hero
	 * vira um bloco chapado.
	 */
	background: linear-gradient(
		to bottom,
		rgba(26, 37, 49, 0.72) 0%,
		rgba(26, 37, 49, 0.88) 50%,
		rgba(26, 37, 49, 0.96) 100%
	);
	pointer-events: none;
}

/* O conteúdo volta ao container de 1200px e fica acima do overlay. */
.hero--fundo .hero__grid {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
	grid-template-columns: minmax(0, 1fr);
}

.hero--fundo .hero__conteudo {
	max-width: 100%;
}

/*
 * Desktop (>=48em): imagem larga, overlay HORIZONTAL e texto em 56%.
 * A partir daqui o celular não baixa mais o recorte vertical.
 */
@media (min-width: 48em) {

	.hero--fundo {
		min-height: 620px;
		/* Desktop: overlay é horizontal, o texto volta ao centro vertical. */
		align-items: center;
		background-image: var(--hero-img);
		/*
		 * O recorte -wide já traz o assunto em ~72% da largura. Ancorar em
		 * 'right' cortaria justamente ele quando a tela fica mais estreita
		 * que a imagem; 'center' mantém a faísca à direita do texto em
		 * qualquer largura.
		 */
		background-position: center center;
	}

	/*
	 * 0.96 -> 0.88 (55%) -> 0.60. Pesa onde a foto é mais clara (o
	 * centro-esquerda) e alivia na direita, onde a faísca precisa aparecer.
	 * Medido na imagem real: H1 11.2:1, parágrafo 7.25:1, selos 7.25:1.
	 */
	.hero--fundo::before {
		background: linear-gradient(
			to right,
			rgba(26, 37, 49, 0.96) 0%,
			rgba(26, 37, 49, 0.88) 55%,
			rgba(26, 37, 49, 0.60) 100%
		);
	}

	.hero--fundo .hero__conteudo {
		max-width: 56%;
	}
}

.hero__conteudo {
	min-width: 0;
}

.hero__titulo {
	margin-top: var(--e-4);
	color: var(--esc-titulo);
	max-width: 20ch;
}

.hero--sub .hero__titulo {
	font-size: var(--t-hero-sub);
	max-width: 24ch;
}

.hero__texto {
	margin-top: var(--e-5);
	font-size: var(--t-lg);
	line-height: var(--lh-media);
	color: var(--esc-texto);
	max-width: 56ch;
}

.hero__acoes {
	margin-top: var(--e-8);
}

/* Selos do hero: linha discreta, sem mono e sem acento. */
.hero__selos {
	display: grid;
	gap: var(--e-3);
	margin-top: var(--e-8);
	padding-top: var(--e-6);
	border-top: 1px solid var(--esc-borda);
}

.hero__selo {
	display: flex;
	align-items: center;
	gap: var(--e-3);
	font-size: var(--t-sm);
	color: var(--esc-suave);
}

/*
 * Sobre a imagem, --esc-suave dá 4.47:1 — reprova AA por pouco. O texto do
 * selo é informação real ("Tolerância 0,1 mm"), não decoração, então sobe
 * para --esc-texto (7.25:1). Ícone acompanha.
 */
.hero--fundo .hero__selo,
.hero--fundo .hero__selo svg {
	color: var(--esc-texto);
}

.hero__selo svg {
	width: 18px;
	height: 18px;
	color: var(--esc-suave);
}

.hero__midia {
	position: relative;
	min-width: 0;
	display: flex;
}

.hero__midia img,
.hero__midia .vital-img-ph {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--r);
	border: 0;
}

/* A partir de duas colunas a imagem acompanha a altura do texto. */
@media (min-width: 60em) {

	.hero__midia img,
	.hero__midia .vital-img-ph {
		height: 100%;
		aspect-ratio: auto;
		min-height: 420px;
	}
}

.hero__midia .vital-img-ph {
	background: var(--tinta-800);
	border: 0;
	color: var(--esc-suave);
}

/* ==========================================================================
   10. NÚMEROS — sem mono no rótulo, sem acento no valor
   ========================================================================== */

.dados {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--borda);
	border: 1px solid var(--borda);
	border-radius: var(--r);
	overflow: hidden;
}

.dados__item {
	background: var(--branco);
	padding: var(--e-6) var(--e-5);
	/* Altura reservada: sem CLS. */
	min-height: 126px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--e-2);
}

/*
 * Valor: IBM Plex Sans 600. Em mono ganhava cara de terminal — número
 * institucional não é saída de console. tabular-nums mantém o alinhamento
 * entre as colunas, que é o motivo real de se usar mono aqui.
 * A mono fica RESTRITA à tabela de capacidade técnica.
 */
.dados__valor {
	font-family: var(--f-titulo);
	/* 34px; encolhe um pouco só nas telas estreitas, onde a grade é 2x2. */
	font-size: clamp(1.75rem, 1.55rem + 0.9vw, 2.125rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--texto-forte);
	font-variant-numeric: tabular-nums;
}

/* Quarto item sem número: não é medida, então sai da mono. */
.dados__valor--texto {
	font-family: var(--f-titulo);
	font-size: var(--t-h3);
	font-weight: 700;
	line-height: var(--lh-titulo);
	letter-spacing: var(--ls-titulo);
}

.dados__rotulo {
	font-size: var(--t-sm);
	line-height: 1.35;
	color: var(--texto-suave);
	max-width: none;
}

.secao--alt .dados__item {
	background: var(--branco);
}

.secao--escura .dados,
.hero .dados {
	background: var(--esc-borda);
	border-color: var(--esc-borda);
}

.secao--escura .dados__item,
.hero .dados__item {
	background: var(--fundo-escuro);
}

.secao--escura .dados__valor,
.hero .dados__valor {
	color: var(--esc-titulo);
}

.secao--escura .dados__rotulo,
.hero .dados__rotulo {
	color: var(--esc-suave);
}

/* Faixa de regiões, logo abaixo dos números: discreta, sem caixa. */
.regioes {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: var(--e-2);
	margin: var(--e-5) 0 0;
	max-width: none;
	font-size: var(--t-sm);
	line-height: var(--lh-media);
	text-align: center;
	color: var(--texto-suave);
}

.regioes svg {
	flex: none;
	margin-top: 3px;
	color: var(--icone);
}

/* ==========================================================================
   11. TABELA TÉCNICA — o lugar legítimo da monoespaçada
   ========================================================================== */

.capacidade {
	border: 1px solid var(--borda);
	border-radius: var(--r);
	overflow: hidden;
	background: var(--branco);
}

.capacidade__tabela {
	width: 100%;
	font-size: var(--t-sm);
}

.capacidade__tabela caption {
	padding: var(--e-4) var(--e-5);
	text-align: left;
	font-size: var(--t-2xs);
	font-weight: 600;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--texto-fraco);
	background: var(--n-050);
	border-bottom: 1px solid var(--borda);
}

.capacidade__tabela th,
.capacidade__tabela td {
	padding: var(--e-4) var(--e-5);
	text-align: left;
	border-bottom: 1px solid var(--borda);
	vertical-align: baseline;
}

.capacidade__tabela tbody tr:last-child th,
.capacidade__tabela tbody tr:last-child td {
	border-bottom: 0;
}

/* Especificação: corpo, peso normal. */
.capacidade__tabela th {
	font-family: var(--f-corpo);
	font-size: var(--t-sm);
	font-weight: 400;
	color: var(--texto-suave);
	width: 62%;
}

/* Valor: MONO. É dado técnico — o uso legítimo da fonte. */
.capacidade__tabela td {
	font-family: var(--f-mono);
	font-size: var(--t-sm);
	font-weight: 400;
	color: var(--texto-forte);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	text-align: right;
}

.capacidade__tabela tbody tr:nth-child(even) th,
.capacidade__tabela tbody tr:nth-child(even) td {
	background: var(--n-050);
}

.capacidade__pendente {
	font-family: var(--f-corpo);
	color: var(--texto-fraco);
}

/* Aviso de dado pendente: neutro. */
.capacidade__aviso {
	display: flex;
	align-items: flex-start;
	gap: var(--e-3);
	margin-top: var(--e-5);
	padding: var(--e-4) var(--e-5);
	border: 1px solid var(--borda);
	border-radius: var(--r);
	background: var(--n-050);
	font-size: var(--t-sm);
	line-height: var(--lh-media);
	color: var(--texto-suave);
	max-width: var(--medida);
}

.capacidade__aviso svg {
	margin-top: 3px;
}

/* ==========================================================================
   12. CARDS DE SOLUÇÃO — três iguais, sem destaque preto
   ========================================================================== */

.solucoes {
	display: grid;
	gap: var(--e-5);
	/* Os três cards terminam na mesma altura. */
	align-items: stretch;
}

.solucao {
	display: flex;
	flex-direction: column;
	/* O padding agora é do corpo: a imagem vai de borda a borda. */
	padding: 0;
	overflow: hidden;
	background: var(--branco);
	border: 1px solid var(--borda);
	border-radius: var(--r);
	/* Sem sombra. */
	transition: border-color var(--dur-md) var(--ease);
	height: 100%;
}

/* --- Imagem do card: 16:9, largura total, SEMPRE visível ---------------
   Nada de revelar no hover: celular não tem hover e metade do público
   perderia a imagem.                                                     */
.solucao__midia {
	display: block;
	position: relative;
	overflow: hidden;
	background: var(--n-050);
	border-radius: 0;
}

.solucao__midia img,
.solucao__midia .vital-img-ph {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 0;
	transition: transform 300ms ease-out;
}

.solucao__corpo {
	display: flex;
	flex-direction: column;
	gap: var(--e-3);
	padding: var(--e-6);
	flex: 1 1 auto;
}

/* Rede de segurança: card sem __corpo (uso antigo, só texto) mantém o
   respiro interno em vez de ficar colado na borda. */
.solucao:not(:has(.solucao__corpo)) {
	gap: var(--e-3);
	padding: var(--e-6);
}

/* --- Hover: só onde existe ponteiro de verdade ------------------------- */
@media (hover: hover) and (pointer: fine) {

	.solucao:hover {
		border-color: var(--acento);
	}

	.solucao:hover .solucao__midia img,
	.solucao:hover .solucao__midia .vital-img-ph {
		transform: scale(1.04);
	}

	.solucao:hover .link-seta svg {
		transform: translateX(4px);
	}
}

/* Teclado: mesmo destaque do hover, sem depender de ponteiro. */
.solucao:focus-visible {
	border-color: var(--acento);
}

.solucao__titulo {
	font-family: var(--f-titulo);
	font-size: var(--t-h3);
	font-weight: 700;
	line-height: var(--lh-titulo);
	letter-spacing: var(--ls-titulo);
	/* Fixo nos dois estados: o card inteiro é link. */
	color: var(--texto-forte);
}

.solucao:hover .solucao__titulo,
.solucao:focus-visible .solucao__titulo {
	color: var(--texto-forte);
}

.solucao:hover .solucao__texto,
.solucao:focus-visible .solucao__texto {
	color: var(--texto-suave);
}

.solucao__texto {
	font-size: var(--t-sm);
	line-height: var(--lh-media);
	color: var(--texto-suave);
	margin: 0;
	max-width: none;
}

.solucao__rodape {
	margin-top: auto;
	padding-top: var(--e-4);
}

/* ==========================================================================
   12a. SERVIÇOS — cards numerados, sem imagem. CTA leva ao formulário.
   ========================================================================== */

.servicos {
	display: grid;
	gap: var(--e-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.servico {
	display: flex;
	flex-direction: column;
	gap: var(--e-3);
	padding: var(--e-6);
	background: var(--branco);
	border: 1px solid var(--borda);
	border-radius: var(--r);
	transition: border-color var(--dur-md) var(--ease);
}

/* Índice em grafite: o acento fica reservado ao CTA e ao eyebrow. */
.servico__idx {
	font-family: var(--f-titulo);
	font-size: var(--t-sm);
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--texto-fraco);
	padding-bottom: var(--e-3);
	border-bottom: 1px solid var(--borda);
}

.servico__titulo {
	font-family: var(--f-titulo);
	font-size: var(--t-h3);
	font-weight: 700;
	line-height: var(--lh-titulo);
	letter-spacing: var(--ls-titulo);
	color: var(--texto-forte);
}

.servico__texto {
	margin: 0;
	max-width: none;
	font-size: var(--t-sm);
	line-height: var(--lh-media);
	color: var(--texto-suave);
}

/* O CTA fica sempre no pé do card, alinhado entre os cards da linha. */
.servico__cta {
	margin-top: auto;
	padding-top: var(--e-3);
	align-self: flex-start;
}

@media (hover: hover) and (pointer: fine) {

	.servico:hover {
		border-color: var(--borda-forte);
	}
}

/* --- Segmentos atendidos: lista compacta abaixo dos 3 cards ------------ */
.segmentos {
	display: grid;
	gap: var(--e-3);
	margin-top: var(--e-8);
	padding-top: var(--e-6);
	border-top: 1px solid var(--borda);
}

.segmentos__rotulo {
	margin: 0;
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--texto-fraco);
}

.segmentos__lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.segmentos__item {
	padding: var(--e-2) var(--e-3);
	border: 1px solid var(--borda-forte);
	border-radius: var(--r);
	font-size: var(--t-sm);
	line-height: 1.3;
	color: var(--texto-forte);
}

/* ==========================================================================
   13. PROCESSO — etapas numeradas, número em acento
   ========================================================================== */

.processo {
	display: grid;
	/* Espaçamento generoso: as etapas são o conteúdo da seção. */
	gap: var(--e-10);
	counter-reset: etapa;
}

/*
 * Número ACIMA do título, não ao lado: a coluna fica estreita no desktop
 * (quatro etapas lado a lado) e o número na lateral comeria a medida do
 * texto.
 */
.processo__item {
	counter-increment: etapa;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/*
 * order: no flex, ::after seria o último filho. Os dois pseudos recebem
 * order para a sequência ficar número -> traço -> título -> texto.
 */
.processo__item::before {
	content: counter(etapa, decimal-leading-zero);
	order: -2;
	font-family: var(--f-titulo);
	font-size: 1.75rem; /* 28px */
	font-weight: 700;
	line-height: 1;
	/* Os quatro números têm a mesma largura: 01 e 04 alinham na grade. */
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
	letter-spacing: var(--ls-titulo);
	color: var(--acento);
}

/* Traço de 24px sob o número: marcação de corte, o motivo gráfico da casa. */
.processo__item::after {
	content: '';
	order: -1;
	display: block;
	width: 24px;
	height: 2px;
	margin: var(--e-3) 0 var(--e-4);
	background: var(--acento);
}

.processo__titulo {
	font-family: var(--f-titulo);
	font-size: var(--t-base); /* 17px */
	font-weight: 600;
	line-height: var(--lh-titulo);
	color: var(--texto-forte);
}

.processo__texto {
	margin-top: var(--e-2);
	font-size: var(--t-sm); /* 15px */
	line-height: var(--lh-media);
	color: var(--texto-suave);
}

/* Sobre fundo escuro o acento puro cai para 4.13:1. Usa a variação clara. */
.secao--escura .processo__item::before {
	color: var(--acento-claro);
}

.secao--escura .processo__item::after {
	background: var(--acento-claro);
}

.secao--escura .processo__titulo {
	color: var(--esc-titulo);
}

.secao--escura .processo__texto {
	color: var(--esc-texto);
}

/* ==========================================================================
   14. SOBRE — duas colunas, sem sobreposição agressiva
   ========================================================================== */

.sobre__grid {
	display: grid;
	gap: var(--e-10);
	align-items: start;
}

.sobre__texto p + p {
	margin-top: var(--e-4);
}

.sobre__specs {
	margin-top: var(--e-8);
	padding-top: var(--e-6);
	border-top: 1px solid var(--borda);
	display: grid;
	gap: var(--e-5);
}

.spec {
	display: grid;
	/* 48px: largura da marca do ícone. 16px de respiro até o texto. */
	grid-template-columns: 48px 1fr;
	gap: var(--e-4);
	align-items: start;
}

/* A marca já dimensiona o SVG; aqui só o alinhamento com a primeira linha. */
.spec .marca-icone {
	margin-top: 2px;
}

.spec__titulo {
	font-family: var(--f-titulo);
	font-size: var(--t-sm);
	font-weight: 600;
	color: var(--texto-forte);
	line-height: 1.35;
}

.spec__texto {
	margin-top: 2px;
	font-size: var(--t-sm);
	line-height: var(--lh-media);
	color: var(--texto-suave);
	max-width: none;
}

.secao--escura .sobre__specs {
	border-top-color: var(--esc-borda);
}

.secao--escura .spec__titulo {
	color: var(--esc-titulo);
}

.secao--escura .spec__texto {
	color: var(--esc-suave);
}

.sobre__midia img,
.sobre__midia .vital-img-ph {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--r);
}

/* <picture> é inline por padrão e criaria folga sob a imagem. */
.corte picture {
	display: block;
}

/* --------------------------------------------------------------------------
   Marcas de corte — registro de guia em chapa, nos quatro cantos da imagem.
   Cada .corte__marca é um canto; ::before é o traço horizontal e ::after o
   vertical. As duas saem do MESMO vértice, por isso o "L" fica aberto e
   apontando para fora em cada canto.
   -------------------------------------------------------------------------- */
.corte {
	position: relative;
	/* A caixa tem que casar com a imagem, senão a marca erra o canto. */
	display: block;
	line-height: 0;
	/* Sem overflow:hidden: a marca precisa vazar para fora do quadro. */
}

.corte__marca {
	position: absolute;
	width: 0;
	height: 0;
	pointer-events: none;
}

.corte__marca::before,
.corte__marca::after {
	content: '';
	position: absolute;
	background: var(--acento);
	/* Cresce do vértice: escala, nunca width/height. */
	transition: transform 200ms var(--ease);
}

/* Traço horizontal. */
.corte__marca::before {
	width: var(--corte-traco, 28px);
	height: 2px;
}

/* Traço vertical. */
.corte__marca::after {
	width: 2px;
	height: var(--corte-traco, 28px);
}

/* --- Posição dos quatro cantos: 12px para fora da borda --------------- */
.corte__marca--no {
	top: calc(var(--corte-fora, 12px) * -1);
	left: calc(var(--corte-fora, 12px) * -1);
}

.corte__marca--ne {
	top: calc(var(--corte-fora, 12px) * -1);
	right: calc(var(--corte-fora, 12px) * -1);
}

.corte__marca--se {
	bottom: calc(var(--corte-fora, 12px) * -1);
	right: calc(var(--corte-fora, 12px) * -1);
}

.corte__marca--so {
	bottom: calc(var(--corte-fora, 12px) * -1);
	left: calc(var(--corte-fora, 12px) * -1);
}

/*
 * Cada canto ancora seus dois traços no próprio vértice e os projeta para
 * fora. O transform-origin fica sempre no vértice, para a animação crescer
 * de lá — não do meio do traço.
 */
.corte__marca--no::before { top: 0; left: 0; transform-origin: left center; }
.corte__marca--no::after  { top: 0; left: 0; transform-origin: center top; }

.corte__marca--ne::before { top: 0; right: 0; transform-origin: right center; }
.corte__marca--ne::after  { top: 0; right: 0; transform-origin: center top; }

.corte__marca--se::before { bottom: 0; right: 0; transform-origin: right center; }
.corte__marca--se::after  { bottom: 0; right: 0; transform-origin: center bottom; }

.corte__marca--so::before { bottom: 0; left: 0; transform-origin: left center; }
.corte__marca--so::after  { bottom: 0; left: 0; transform-origin: center bottom; }

/* --- Animação: cresce do zero ao entrar na viewport ------------------- */
.js-reveal .corte__marca::before {
	transform: scaleX(0);
}

.js-reveal .corte__marca::after {
	transform: scaleY(0);
}

.js-reveal .reveal.is-visible .corte__marca::before {
	transform: scaleX(1);
}

.js-reveal .reveal.is-visible .corte__marca::after {
	transform: scaleY(1);
}

/*
 * Sequência horária, 80ms de defasagem. A ordem no HTML já é NE, SE, SO,
 * NO — basta escalonar por posição. O traço vertical sai logo após o
 * horizontal do mesmo canto, para o "L" se desenhar, não piscar inteiro.
 */
.corte__marca:nth-of-type(1)::before { transition-delay: 0ms; }
.corte__marca:nth-of-type(1)::after  { transition-delay: 40ms; }
.corte__marca:nth-of-type(2)::before { transition-delay: 80ms; }
.corte__marca:nth-of-type(2)::after  { transition-delay: 120ms; }
.corte__marca:nth-of-type(3)::before { transition-delay: 160ms; }
.corte__marca:nth-of-type(3)::after  { transition-delay: 200ms; }
.corte__marca:nth-of-type(4)::before { transition-delay: 240ms; }
.corte__marca:nth-of-type(4)::after  { transition-delay: 280ms; }

/* Mobile: traço e deslocamento menores. */
@media (max-width: 47.999em) {

	.corte {
		--corte-traco: 18px;
		--corte-fora: 8px;
	}
}

/* ==========================================================================
   15. LISTAS DE ESPECIFICAÇÃO — diferenciais, serviços, materiais
   ========================================================================== */

.specs-num,
.materiais {
	border-top: 1px solid var(--borda);
	margin: 0;
}

.specs-num__item,
.material {
	display: grid;
	gap: var(--e-2);
	padding-block: var(--e-6);
	border-bottom: 1px solid var(--borda);
}

.specs-num__titulo,
.material__nome {
	display: flex;
	align-items: baseline;
	gap: var(--e-3);
	font-family: var(--f-titulo);
	font-size: var(--t-base);
	font-weight: 600;
	line-height: var(--lh-titulo);
	letter-spacing: var(--ls-titulo);
	color: var(--texto-forte);
}

/*
 * Índice em acento, mesmo tratamento do processo: é a mesma ideia de
 * etapa numerada. Sem mono — não é medida.
 * baseline no __nome mantém o número alinhado com a primeira linha do
 * título mesmo com corpos diferentes.
 */
.specs-num__idx,
.material__idx {
	font-family: var(--f-titulo);
	font-size: 1.75rem; /* 28px */
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
	letter-spacing: var(--ls-titulo);
	color: var(--acento);
	flex: none;
}

/* Sobre escuro o acento puro não passa AA; usa a variação clara. */
.secao--escura .specs-num__idx,
.secao--escura .material__idx {
	color: var(--acento-claro);
}

.specs-num__texto,
.material__desc {
	margin: 0;
	font-size: var(--t-sm);
	line-height: var(--lh-media);
	color: var(--texto-suave);
	max-width: var(--medida);
}

.secao--escura .specs-num,
.secao--escura .specs-num__item {
	border-color: var(--esc-borda);
}

.secao--escura .specs-num__titulo {
	color: var(--esc-titulo);
}

.secao--escura .specs-num__texto {
	color: var(--esc-texto);
}

/* Grade de motivos (/industria) — agora em fundo claro. */
.motivos {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--e-5);
}

.motivo {
	display: grid;
	grid-template-columns: 24px 1fr;
	grid-template-areas:
		'icone titulo'
		'.     texto';
	gap: var(--e-1) var(--e-3);
	padding: var(--e-5);
	border: 1px solid var(--borda);
	border-radius: var(--r);
	background: var(--branco);
}

.motivo .vital-icon {
	grid-area: icone;
	margin-top: 2px;
	width: 20px;
	height: 20px;
}

.motivo__titulo {
	grid-area: titulo;
	font-family: var(--f-titulo);
	font-size: var(--t-sm);
	font-weight: 600;
	color: var(--texto-forte);
	line-height: 1.35;
}

.motivo__texto {
	grid-area: texto;
	font-size: var(--t-sm);
	line-height: var(--lh-media);
	color: var(--texto-suave);
}

/* ==========================================================================
   16. PORTFÓLIO
   ========================================================================== */

.pecas {
	display: grid;
	gap: var(--e-4);
}

.peca {
	position: relative;
	display: block;
	border: 1px solid var(--borda);
	border-radius: var(--r);
	overflow: hidden;
	background: var(--n-100);
}

.peca img,
.peca .vital-img-ph {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 0;
	border-radius: 0;
}

.peca__figura {
	margin: 0;
}

.peca__legenda {
	padding: var(--e-4);
	background: var(--branco);
	border-top: 1px solid var(--borda);
}

.peca__titulo {
	font-family: var(--f-titulo);
	font-size: var(--t-sm);
	font-weight: 600;
	line-height: var(--lh-titulo);
	color: var(--texto-forte);
}

.peca__cat {
	display: block;
	margin-top: 2px;
	font-size: var(--t-2xs);
	font-weight: 600;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--texto-fraco);
}

/* ==========================================================================
   16a. DIFERENCIAIS — ícone + título + uma linha. Sem card, sem borda.
   ========================================================================== */

.diferenciais {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--e-10) var(--e-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.diferencial {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--e-2);
	/* Sem card: nada de fundo, borda, sombra ou padding de caixa. */
}

/* 16px entre a marca do ícone e o título. */
.diferencial .marca-icone {
	margin-bottom: var(--e-2);
}

/*
 * Marca do ícone: quadrado de 48px, borda 1px no acento, cantos vivos e
 * fundo transparente. O círculo laranja sólido foi descartado: são 10
 * ocorrências entre os selos do Sobre e os diferenciais, e um bloco de
 * laranja maciço competia com o texto e estourava a regra de acento
 * racionado. Cantos vivos dialogam com o motivo de chapa cortada.
 */
.marca-icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 48px;
	height: 48px;
	border: 1px solid var(--acento);
	border-radius: 0;
	background: transparent;
	color: var(--acento);
	transition: border-color 200ms var(--ease), color 200ms var(--ease),
	            background-color 200ms var(--ease);
}

.marca-icone svg {
	width: 22px;
	height: 22px;
	stroke-width: 1.5;
	color: inherit;
}

/* Hover só onde existe ponteiro: escurece o laranja. */
@media (hover: hover) and (pointer: fine) {

	.diferencial:hover .marca-icone,
	.spec:hover .marca-icone {
		border-color: var(--acento-hover);
		color: var(--acento-hover);
	}
}

.diferencial__icone {
	/* 16px entre a marca e o título. */
	margin-bottom: var(--e-1);
}

.diferencial__titulo {
	font-family: var(--f-titulo);
	font-size: var(--t-base);
	font-weight: 600;
	line-height: var(--lh-titulo);
	letter-spacing: var(--ls-titulo);
	color: var(--texto-forte);
	margin: 0;
}

.diferencial__texto {
	margin: 0;
	font-size: var(--t-sm);
	line-height: var(--lh-media);
	color: var(--texto-suave);
	max-width: 38ch;
}

/*
 * Revelação escalonada: 60ms entre itens. Usa --i em vez de data-delay
 * porque a escala pronta do tema para em 5 e aqui são 6 itens.
 */
.js-reveal .diferencial {
	transition-delay: calc(var(--i, 0) * 60ms);
}

/* ==========================================================================
   16b. DEPOIMENTOS — aspas, texto, nome. Sem card, sem sombra, sem foto.
   ========================================================================== */

.depoimentos {
	display: grid;
	gap: var(--e-10);
	margin-top: var(--e-10);
	padding: 0;
	list-style: none;
}

/*
 * Coluna com a assinatura empurrada para a base: as três colunas têm
 * texto de tamanhos diferentes e, sem isto, cada nome para numa altura.
 * height:100% porque o item de grid não estica sozinho o suficiente
 * para o margin-top:auto ter contra o que empurrar.
 */
.depoimento {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--e-4);
	height: 100%;
}

/*
 * A aspa é o único ornamento: grafite claro, nunca acento.
 * SVG desenhado, não caractere. O ::before anterior trazia
 * U+0081 (caractere de controle) seguido de 'C' — o navegador
 * desenhava a caixa de glyph ausente e a letra C ao lado.
 */
.depoimento__aspas {
	color: var(--n-300);
	margin-bottom: calc(var(--e-2) * -1);
}

.depoimento__texto {
	margin: 0;
	font-size: var(--t-lg);
	line-height: var(--lh-media);
	color: var(--texto-forte);
	font-weight: 400;
}

.depoimento__texto p {
	margin: 0;
	max-width: var(--medida);
	color: inherit;
}

/* margin-top:auto alinha as três assinaturas na base. */
.depoimento__autor {
	margin: auto 0 0;
	font-size: var(--t-sm);
	font-weight: 600;
	color: var(--texto-suave);
}

.depoimento__autor::before {
	content: '\2014\A0';
}

/* --- Nota agregada do Google ---------------------------------------- */

.google-nota {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	margin: var(--e-4) 0 0;
	font-size: var(--t-sm); /* 15px */
	color: var(--texto-suave);
}

/* Com link, não vira azul de link nem ganha sublinhado permanente. */
a.google-nota {
	color: var(--texto-suave);
	transition: color var(--dur) var(--ease);
}

a.google-nota:hover .google-nota__texto {
	color: var(--texto-forte);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.estrelas {
	display: inline-flex;
	align-items: center;
	gap: 1px;
}

/* Estrela vazia: cinza claro. Cheia: acento — indicador pontual,
   um dos poucos usos permitidos fora do botão primário. */
.estrela {
	color: var(--n-200);
}

.estrela--cheia {
	color: var(--acento);
}

/* ==========================================================================
   17. CLIENTES — altura uniforme 40px, opacidade 0.6 -> 1.0
   ========================================================================== */

.clientes-bloco {
	display: grid;
	gap: var(--e-6);
}

.clientes__head {
	display: grid;
	gap: var(--e-3);
}

/* Grade de 3 colunas no mobile; linha única a partir de 40em. */
.clientes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: center;
	justify-items: center;
	gap: var(--e-8) 48px;
	padding: 0;
	list-style: none;
}

/* Caixa fixa por logo: o que uniformiza a faixa é o container, não o arquivo. */
.clientes__item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 140px;
	max-width: 100%;
	/* 48px de caixa; comporta o ajuste óptico da Indumec sem recorte. */
	height: 58px;
}

.clientes__item img {
	max-height: 40px;
	max-width: 100%;
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.65;
	transition: opacity 200ms var(--ease), filter 200ms var(--ease);
}

.clientes__item:hover img {
	filter: grayscale(0);
	opacity: 1;
}

/*
 * Ajuste ÓPTICO — medido, não estimado.
 * Os arquivos já vêm aparados (o conteúdo ocupa os 80px de altura em todos),
 * então a diferença percebida vem da PROPORÇÃO, não de ar interno. Limitados
 * ao mesmo max-height de 40px, as marcas saem com larguras muito diferentes:
 *
 *   versatil 3.67:1 -> 147px      conquista  2.98:1 -> 119px
 *   chocmaster/gimak ~3:1 -> 120px    indumec 1.16:1 ->  46px
 *
 * Indumec é quase quadrada: na mesma altura lê como metade das outras. A
 * correção é deixar as marcas estreitas crescerem em altura, aproximando a
 * ÁREA percebida — é isso que o olho compara, não a altura da caixa.
 */
.clientes__item--indumec img {
	max-height: 58px;
}

/* Versátil é a mais larga: um respiro a menos evita que domine a faixa. */
.clientes__item--versatil img {
	max-height: 36px;
}

/* Fallback textual — contraste adequado, não some no fundo. */
.clientes__texto {
	font-family: var(--f-titulo);
	font-size: var(--t-base);
	font-weight: 600;
	letter-spacing: var(--ls-titulo);
	color: var(--texto-suave);
	transition: color var(--dur) var(--ease);
}

.clientes__item:hover .clientes__texto {
	color: var(--texto-forte);
}

/* ==========================================================================
   18. FAQ — sinal em grafite, sem acento
   ========================================================================== */

.faq {
	border-top: 1px solid var(--borda);
}

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

.faq__pergunta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--e-5);
	padding: var(--e-5) 0;
	font-family: var(--f-titulo);
	font-size: var(--t-base);
	font-weight: 600;
	line-height: var(--lh-titulo);
	color: var(--texto-forte);
	cursor: pointer;
	list-style: none;
	transition: color var(--dur) var(--ease);
}

.faq__pergunta::-webkit-details-marker {
	display: none;
}

.faq__pergunta::marker {
	content: '';
}

.faq__pergunta:hover {
	color: var(--acento-txt);
}

/* Sinal: grafite, não acento. Sem mono — não é medida. */
.faq__sinal {
	flex: none;
	font-family: var(--f-corpo);
	font-size: var(--t-xl);
	font-weight: 400;
	line-height: 1;
	/* Era --texto-fraco: quase invisível. Grafite forte, ainda sem acento. */
	color: var(--texto-forte);
	transition: transform var(--dur-md) var(--ease);
}

.faq__item[open] .faq__sinal {
	transform: rotate(45deg);
}

.faq__resposta {
	padding: 0 0 var(--e-6);
	font-size: var(--t-base);
	line-height: var(--lh-corpo);
	color: var(--texto-suave);
}

.faq__resposta p {
	max-width: var(--medida);
}

/* ==========================================================================
   19. FAIXA CTA — bloco escuro nº 2 de 2 no site
   ========================================================================== */

.faixa {
	background: var(--fundo-escuro);
	color: var(--esc-texto);
	padding-block: var(--y-densa);
}

.faixa__grid {
	display: grid;
	gap: var(--e-8);
	align-items: center;
}

.faixa__titulo {
	color: var(--esc-titulo);
	max-width: 24ch;
}

.faixa__texto {
	margin-top: var(--e-4);
	font-size: var(--t-lg);
	line-height: var(--lh-media);
	color: var(--esc-texto);
	max-width: 56ch;
}

.faixa__acoes {
	margin-top: var(--e-6);
}

/* ==========================================================================
   20. CONTATO E FORMULÁRIO
   ========================================================================== */

.contato__grid {
	display: grid;
	gap: var(--e-10);
	align-items: start;
}

/* Lista de contato: sem mono (não é medida), sem ícone colorido. */
.contato-lista {
	display: grid;
	gap: var(--e-5);
	margin-top: var(--e-8);
}

.contato-lista--compact {
	gap: var(--e-4);
	margin-top: var(--e-4);
}

.contato-lista__item {
	display: grid;
	grid-template-columns: 24px 1fr;
	gap: var(--e-3);
	align-items: start;
}

.contato-lista__icone {
	display: block;
	margin-top: 2px;
}

.contato-lista__icone svg {
	width: 20px;
	height: 20px;
}

.contato-lista__corpo {
	display: grid;
	gap: 1px;
	min-width: 0;
}

.contato-lista__rotulo {
	font-size: var(--t-2xs);
	font-weight: 600;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--texto-fraco);
}

.contato-lista__valor {
	font-size: var(--t-sm);
	font-weight: 600;
	color: var(--texto-forte);
	overflow-wrap: anywhere;
}

a.contato-lista__valor:hover {
	color: var(--acento-txt);
}

/* Texto puro (horário): peso e cor de corpo, nunca de link/título. */
.contato-lista__valor--plain {
	font-weight: 400;
	color: var(--texto);
}

.site-footer .contato-lista__rotulo {
	color: var(--n-500);
}

.site-footer .contato-lista__valor {
	color: var(--esc-texto);
	font-weight: 400;
}

.site-footer a.contato-lista__valor:hover {
	color: var(--branco);
}

.site-footer .vital-icon {
	color: var(--esc-suave);
}

/* --- Formulário: o único lugar com sombra, e bem sutil --- */
.form {
	background: var(--branco);
	border: 1px solid var(--borda);
	border-radius: var(--r);
	box-shadow: var(--sombra-form);
	padding: clamp(1.25rem, 1rem + 1.6vw, 2rem);
}

.form__titulo {
	font-size: var(--t-xl);
	padding-bottom: var(--e-4);
	margin-bottom: var(--e-5);
	border-bottom: 1px solid var(--borda);
}

.form__grid {
	display: grid;
	gap: var(--e-5);
}

.campo {
	display: grid;
	gap: var(--e-2);
	min-width: 0;
}

.campo__label {
	font-size: var(--t-xs);
	font-weight: 600;
	color: var(--texto-forte);
}

.campo__obrig {
	color: var(--acento-txt);
	margin-left: 2px;
}

.campo__input,
.campo__select,
.campo__textarea {
	width: 100%;
	padding: var(--e-3) var(--e-4);
	min-height: 46px;
	background: var(--branco);
	border: 1px solid var(--borda-forte);
	border-radius: var(--r);
	font-family: var(--f-corpo);
	/* 16px evita zoom automático no iOS. */
	font-size: 1rem;
	line-height: 1.4;
	color: var(--texto-forte);
	transition: border-color var(--dur) var(--ease);
	appearance: none;
}

.campo__input:focus,
.campo__select:focus,
.campo__textarea:focus {
	outline: none;
	border-color: var(--tinta);
	box-shadow: inset 0 0 0 1px var(--tinta);
}

.campo__input::placeholder,
.campo__textarea::placeholder {
	color: var(--n-400);
}

.campo__textarea {
	min-height: 112px;
	resize: vertical;
	line-height: var(--lh-media);
}

/* Seta do select desenhada em CSS — sem imagem externa. */
.campo__select {
	padding-right: var(--e-10);
	background-image:
		linear-gradient(45deg, transparent 50%, var(--n-600) 50%),
		linear-gradient(135deg, var(--n-600) 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(50% - 2px), calc(100% - 14px) calc(50% - 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	cursor: pointer;
}

.campo--invalido .campo__input,
.campo--invalido .campo__select,
.campo--invalido .campo__textarea {
	border-color: var(--erro);
}

.campo__erro {
	font-size: var(--t-xs);
	color: var(--erro);
}

/* Honeypot: invisível para humanos, presente para bots. */
.hp-campo {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.form__acoes {
	margin-top: var(--e-6);
}

.form__aviso {
	margin-top: var(--e-4);
	padding: var(--e-4) var(--e-5);
	border: 1px solid;
	border-radius: var(--r);
	font-size: var(--t-sm);
	line-height: var(--lh-media);
	display: none;
}

.form__aviso.is-visivel {
	display: block;
}

.form__aviso--ok {
	background: #f0fdf4;
	border-color: #bbf7d0;
	color: #14532d;
}

.form__aviso--erro {
	background: #fef2f2;
	border-color: #fecaca;
	color: #991b1b;
}

.form__legal {
	margin-top: var(--e-4);
	font-size: var(--t-xs);
	line-height: var(--lh-media);
	color: var(--texto-fraco);
	max-width: none;
}

.form__legal a {
	text-decoration: underline;
	color: var(--texto-suave);
}

.form.is-enviando {
	pointer-events: none;
	opacity: 0.7;
}

.btn__spinner {
	display: none;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: var(--branco);
	border-radius: 50%;
	animation: vital-girar 700ms linear infinite;
}

.is-enviando .btn__spinner {
	display: block;
}

/* Enviando: o spinner ocupa o lugar da seta. Os dois juntos poluiriam. */
.is-enviando .btn__icone {
	display: none;
}

@keyframes vital-girar {
	to { transform: rotate(360deg); }
}

/* ==========================================================================
   21. CROSS-LINK
   ========================================================================== */

.cross {
	display: grid;
	gap: var(--e-5);
}

.cross__item {
	display: grid;
	gap: var(--e-2);
	padding: var(--e-6);
	border: 1px solid var(--borda);
	border-radius: var(--r);
	background: var(--branco);
	transition: border-color var(--dur) var(--ease);
}

.cross__item:hover {
	border-color: var(--n-400);
}

/*
 * Ícone da frente: grafite, sem caixa e sem fundo colorido (regra 6).
 * Substituiu o índice 01/02, que numerava sem significar ordem.
 */
.cross__icone {
	display: block;
	margin-bottom: var(--e-1);
}

/*
 * Mira o .vital-icon direto: ele define a própria cor (--icone), então
 * pintar só o wrapper não teria efeito.
 */
.cross__icone .vital-icon {
	color: var(--icone);
	transition: color var(--dur) var(--ease);
}

.cross__item:hover .cross__icone .vital-icon {
	color: var(--acento);
}

.cross__titulo {
	font-family: var(--f-titulo);
	font-size: var(--t-h3);
	font-weight: 700;
	line-height: var(--lh-titulo);
	letter-spacing: var(--ls-titulo);
	color: var(--texto-forte);
}

.cross__item:hover .cross__titulo {
	color: var(--acento-txt);
}

.cross__texto {
	font-size: var(--t-sm);
	line-height: var(--lh-media);
	color: var(--texto-suave);
	margin: 0;
	max-width: none;
}

/* ==========================================================================
   21b. MAPA — imagem estática por padrão; iframe só após clique
   ========================================================================== */

.mapa {
	position: relative;
	/* Largura total, acima do rodapé escuro. */
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	min-height: 320px;
	display: flex;
	align-items: center;
	background-color: var(--n-100);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	border-top: 1px solid var(--borda);
	overflow: hidden;
}

.mapa--img {
	background-image: var(--mapa-img);
}

/*
 * Véu sobre a imagem: o endereço é o conteúdo, o mapa é contexto. Sem ele
 * o texto disputaria com as ruas do mapa.
 */
.mapa--img::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(255, 255, 255, 0.96) 0%,
		rgba(255, 255, 255, 0.9) 42%,
		rgba(255, 255, 255, 0.55) 100%
	);
	pointer-events: none;
}

.mapa__conteudo {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-block: var(--e-10);
}

.mapa__caixa {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--e-4);
	max-width: var(--wrap);
}

.mapa__endereco {
	display: flex;
	align-items: flex-start;
	gap: var(--e-3);
	margin: 0;
	font-size: var(--t-lg);
	line-height: var(--lh-media);
	color: var(--texto-forte);
	font-weight: 600;
}

.mapa__endereco svg {
	flex: none;
	margin-top: 0.15em;
	color: var(--icone);
}

.mapa__cep {
	display: block;
	font-size: var(--t-sm);
	font-weight: 400;
	color: var(--texto-suave);
}

.mapa__acoes {
	margin-top: var(--e-2);
}

.mapa__aviso {
	margin: 0;
	font-size: var(--t-xs);
	color: var(--texto-fraco);
	max-width: 46ch;
}

/* Estado carregado: o iframe assume o bloco inteiro. */
.mapa__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	z-index: 2;
}

.mapa.is-carregado {
	min-height: 420px;
}

.mapa.is-carregado .mapa__conteudo,
.mapa.is-carregado::before {
	display: none;
}

/* ==========================================================================
   22. FOOTER
   ========================================================================== */

.site-footer {
	background: var(--n-900);
	color: var(--esc-texto);
	padding-top: var(--y-densa);
	padding-bottom: calc(var(--e-6) + 64px);
	font-size: var(--t-sm);
}

.site-footer__grid {
	display: grid;
	gap: var(--e-10);
}

.site-footer__marca {
	display: grid;
	gap: 0;
	align-content: start;
}

/* Tagline: era --esc-suave (6.2:1). Passava na régua, mas lia apagada no
   fundo escuro em 15px. Sobe para 10:1. */
.site-footer__texto {
	margin-top: var(--e-4);
	color: var(--esc-texto);
	line-height: var(--lh-media);
	font-size: var(--t-sm);
	max-width: 46ch;
}

.site-footer__titulo {
	font-family: var(--f-corpo);
	font-size: var(--t-2xs);
	font-weight: 600;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--n-400);
	padding-bottom: var(--e-3);
	margin-bottom: var(--e-4);
	border-bottom: 1px solid var(--esc-borda);
}

.site-footer__links {
	display: grid;
	gap: var(--e-3);
}

.site-footer__links a {
	font-size: var(--t-sm);
	color: var(--esc-texto);
	width: fit-content;
}

.site-footer__links a:hover {
	color: var(--branco);
	text-decoration: underline;
}

.site-footer__base {
	margin-top: var(--e-10);
	padding-top: var(--e-5);
	border-top: 1px solid var(--esc-borda);
	display: grid;
	gap: var(--e-2);
	font-size: var(--t-xs);
	color: var(--n-400);
}

.site-footer__copy,
.site-footer__legal {
	margin: 0;
	max-width: none;
}

.site-footer__base a {
	color: var(--esc-suave);
	text-decoration: underline;
}

.site-footer__base a:hover {
	color: var(--branco);
}

.site-footer__cnpj {
	display: block;
}

/* ==========================================================================
   23. FLUTUANTE — WhatsApp
   ========================================================================== */

.wa-float {
	position: fixed;
	right: var(--e-4);
	bottom: var(--e-4);
	z-index: var(--z-flutuante);
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	padding: var(--e-3);
	background: var(--tinta);
	color: var(--branco);
	border-radius: var(--r);
	font-size: var(--t-sm);
	font-weight: 600;
	transition: background-color var(--dur) var(--ease);
}

.wa-float:hover {
	background: var(--tinta-800);
	color: var(--branco);
}

.wa-float .vital-icon {
	color: currentColor;
}

.wa-float__texto {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	opacity: 0;
	transition: max-width var(--dur-md) var(--ease), opacity var(--dur) var(--ease);
}

.wa-float:hover .wa-float__texto,
.wa-float:focus-visible .wa-float__texto {
	max-width: 7rem;
	opacity: 1;
}

.wa-float.is-oculto {
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur-md) var(--ease), visibility var(--dur-md) var(--ease);
}

/* ==========================================================================
   24. PÁGINAS DE TEXTO / 404
   ========================================================================== */

.secao--pagina {
	padding-block: var(--y-densa);
}

.pagina-head {
	margin-bottom: var(--e-8);
	padding-bottom: var(--e-5);
	border-bottom: 1px solid var(--borda);
}

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

.pagina-head__meta {
	margin-top: var(--e-3);
	font-size: var(--t-xs);
	color: var(--texto-fraco);
}

.prose {
	font-size: var(--t-base);
	line-height: var(--lh-corpo);
	color: var(--texto);
	max-width: var(--medida);
}

.prose > * + * {
	margin-top: var(--e-4);
}

.prose h2 {
	font-size: var(--t-xl);
	margin-top: var(--e-10);
}

.prose h3 {
	font-size: var(--t-lg);
	margin-top: var(--e-8);
}

.prose ul,
.prose ol {
	padding-left: var(--e-6);
	display: grid;
	gap: var(--e-2);
}

.prose ul li {
	list-style: disc;
}

.prose ol li {
	list-style: decimal;
}

.prose a {
	text-decoration: underline;
	color: var(--tinta);
}

.prose blockquote {
	padding-left: var(--e-5);
	border-left: 2px solid var(--borda-forte);
	color: var(--texto-suave);
}

.prose table {
	font-size: var(--t-sm);
	display: block;
	overflow-x: auto;
}

.prose th,
.prose td {
	padding: var(--e-3) var(--e-4);
	border: 1px solid var(--borda);
	text-align: left;
}

.prose code {
	font-family: var(--f-mono);
	font-size: 0.9em;
	background: var(--n-100);
	padding: 1px 5px;
	border-radius: var(--r-sm);
}

/* --- 404 --- */
.secao--404 {
	padding-block: var(--y-inst);
}

.erro-404__cod {
	font-family: var(--f-titulo);
	font-weight: 700;
	font-size: var(--t-num);
	color: var(--texto-fraco);
	line-height: 1;
}

.erro-404__titulo {
	margin-top: var(--e-4);
	font-size: var(--t-h2);
}

.erro-404__texto {
	margin-top: var(--e-4);
	font-size: var(--t-lg);
	color: var(--texto-suave);
	max-width: 52ch;
}

.erro-404__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-3);
	margin-top: var(--e-8);
}

.erro-404__mapa {
	margin-top: var(--e-12);
	padding-top: var(--e-6);
	border-top: 1px solid var(--borda);
}

.erro-404__mapa-titulo {
	font-size: var(--t-2xs);
	font-weight: 600;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--texto-fraco);
	margin-bottom: var(--e-4);
}

.erro-404__mapa ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-3) var(--e-8);
}

.erro-404__mapa a {
	font-size: var(--t-sm);
	font-weight: 600;
	text-decoration: underline;
}

.lista-posts {
	display: grid;
	border-top: 1px solid var(--borda);
}

.lista-posts__item {
	padding-block: var(--e-6);
	border-bottom: 1px solid var(--borda);
}

.lista-posts__titulo {
	font-size: var(--t-lg);
}

.lista-posts__resumo {
	margin-top: var(--e-2);
	color: var(--texto-suave);
	font-size: var(--t-sm);
}

/* ==========================================================================
   25. BREAKPOINTS — 640 / 900 / 1200
   ========================================================================== */

@media (min-width: 40em) { /* 640px */

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

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

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

	/* Deixa de ser grade 3x2 e vira linha única com espaçamento uniforme. */
	.clientes {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: var(--e-8) 48px;
	}

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

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

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

	.hero__selos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--e-4);
	}

	.sobre__specs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--e-6);
	}

	.btn-grupo .btn {
		min-width: 190px;
	}

	.wa-float {
		right: var(--e-6);
		bottom: var(--e-6);
	}

	.site-footer__base {
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: var(--e-4);
	}

	.site-footer__cnpj {
		display: inline;
		margin-left: var(--e-2);
	}
}

@media (min-width: 56.25em) { /* 900px */

	/* --- Nav desktop: mesmo DOM, layout horizontal --- */
	.nav-toggle {
		display: none;
	}

	.site-nav {
		position: static;
		inset: auto;
		max-height: none;
		overflow: visible;
		background: none;
		border: 0;
		padding: 0;
		display: flex;
		align-items: center;
		gap: var(--e-8);
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
	}

	.site-nav__list {
		display: flex;
		align-items: center;
		gap: var(--e-6);
	}

	.site-nav__link {
		position: relative;
		padding: var(--e-2) 0;
		border-bottom: 0;
		font-size: var(--t-sm);
	}

	/* Indicador de estado: grafite, não acento. */
	.site-nav__link::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: -2px;
		height: 2px;
		background: var(--tinta);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform var(--dur-md) var(--ease);
	}

	.site-nav__link:hover::after,
	.site-nav__link.is-current::after,
	.site-nav__item--tem-sub.is-aberto .site-nav__link--botao::after {
		transform: scaleX(1);
	}

	/* --- Submenu no desktop: painel flutuante ------------------------- */

	.site-nav__item--tem-sub {
		position: relative;
	}

	/* O gatilho volta a parecer um item de menu, não um botão de bloco. */
	.site-nav__link--botao {
		width: auto;
		display: inline-flex;
		justify-content: flex-start;
		gap: var(--e-1);
		padding-block: var(--e-2);
		border-bottom: 0;
	}

	/*
	 * Ponte invisível sobre o vão entre o gatilho e o painel: sem ela o
	 * mouseleave dispara no meio do caminho e o menu pisca.
	 */
	.site-nav__item--tem-sub::after {
		content: '';
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: 10px;
	}

	/* Fundo branco, borda 1px, cantos vivos, sem sombra pesada. */
	.js-reveal .site-nav__item--tem-sub.is-aberto .site-nav__sub {
		position: absolute;
		top: calc(100% + 10px);
		left: calc(var(--e-4) * -1);
		z-index: var(--z-nav);
		min-width: 220px;
		padding: var(--e-2) 0;
		background: var(--branco);
		border: 1px solid var(--borda);
		border-radius: 0;
		box-shadow: none;
	}

	.site-nav__sub-link {
		padding: var(--e-3) var(--e-4);
		border-bottom: 0;
		white-space: nowrap;
		color: var(--tinta);
		transition: background-color var(--dur) var(--ease),
		            color var(--dur) var(--ease);
	}

	/* Realce sutil: fundo neutro, sem barra nem cor de acento no fundo. */
	.site-nav__sub-link:hover,
	.site-nav__sub-link:focus-visible {
		background: var(--fundo-alt);
		color: var(--acento-txt);
	}

	.site-nav__sub-link.is-current {
		color: var(--acento-txt);
	}

	.site-nav__cta .btn {
		width: auto;
	}

	/* --- Hero: 50/50 SIMÉTRICO dentro do container ---
	   Só no hero SEM imagem de fundo. O full-width é coluna única, com o
	   texto limitado a 56% e a foto ocupando a faixa inteira. --- */
	.hero:not(.hero--fundo) {
		padding-block: var(--y-densa);
	}

	.hero:not(.hero--fundo) .hero__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--e-12);
	}

	/* --- Grades em 3 e 4 colunas --- */
	/* Números em linha só a partir de 900px: abaixo disso "Sob demanda"
	   quebrava em duas linhas nas quatro colunas. */
	.dados {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

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

	.servicos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--e-5);
	}

	.segmentos {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: var(--e-6);
	}

	.depoimentos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--e-8);
	}

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

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

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

	.processo {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--e-8) var(--e-10);
	}

	/* Home: as cinco etapas em uma linha só. */
	.processo--linha {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: var(--e-6);
	}

	.sobre__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--e-12);
		align-items: center;
	}

	.specs-num__item,
	.material {
		grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr);
		gap: var(--e-8);
		align-items: baseline;
	}

	.contato__grid {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		gap: var(--e-12);
	}

	.faixa__grid {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
		gap: var(--e-12);
	}

	.faixa__acoes {
		margin-top: 0;
		justify-self: end;
	}

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

	.campo--largo {
		grid-column: 1 / -1;
	}

	.site-footer__grid {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.7fr) minmax(0, 1fr);
		gap: var(--e-12);
	}
}

@media (min-width: 75em) { /* 1200px */

	.processo {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--e-8);
	}

	.processo--linha {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* ==========================================================================
   26. MOVIMENTO REDUZIDO / CONTRASTE
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

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

	.js-reveal .reveal {
		opacity: 1;
		transform: none;
	}

	/* Marcas de corte: entram prontas, no tamanho final. */
	.js-reveal .corte__marca::before,
	.js-reveal .reveal.is-visible .corte__marca::before {
		transform: scaleX(1);
	}

	.js-reveal .corte__marca::after,
	.js-reveal .reveal.is-visible .corte__marca::after {
		transform: scaleY(1);
	}

	.corte__marca::before,
	.corte__marca::after {
		transition-delay: 0ms !important;
	}

	/* Escalonamento dos diferenciais: aparecem juntos, sem cascata. */
	.js-reveal .diferencial {
		transition-delay: 0ms !important;
	}

	/* Zoom do card e deslocamento da seta: desligados, não só instantâneos. */
	.solucao:hover .solucao__midia img,
	.solucao:hover .solucao__midia .vital-img-ph,
	.solucao:hover .link-seta svg,
	.link-seta:hover svg {
		transform: none;
	}
}

@media (prefers-contrast: more) {

	:root {
		--borda: var(--n-400);
		--borda-forte: var(--n-600);
		--texto: var(--n-900);
		--texto-suave: var(--n-700);
		--texto-fraco: var(--n-600);
	}
}

/* ==========================================================================
   27. PRINT
   ========================================================================== */

@media print {

	.site-header,
	.site-nav,
	.nav-toggle,
	.wa-float,
	.form,
	.skip-link,
	.hero__midia,
	.faixa__acoes {
		display: none !important;
	}

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

	.hero,
	.faixa,
	.secao--escura,
	.site-footer {
		background: #fff !important;
		color: #000 !important;
	}

	.hero__titulo,
	.faixa__titulo,
	.secao--escura h2,
	.site-footer__titulo,
	.hero__texto,
	.faixa__texto {
		color: #000 !important;
	}

	.secao {
		padding-block: 0.75rem;
		break-inside: avoid;
	}

	.contato-lista__valor[href]::after {
		content: ' (' attr(href) ')';
		font-size: 8pt;
	}

	.capacidade__tabela {
		break-inside: avoid;
	}
}