/* ==========================================================================
   Valéria Oliveira · Advocacia e Consultoria Jurídica
   Folha de estilo autoral — sem framework CSS em runtime.
   Ordem: tokens · base · tipografia · layout · componentes · utilidades · media
   ========================================================================== */

/* ------------------------------------------------------------- 1. Tokens --- */
:root {
	--marfim-50: #fbf9f4;
	--marfim-100: #f6f1e8;
	--marfim-200: #ece3d3;
	--marfim-300: #ded1b9;

	--bronze-200: #ecdcc0;
	--bronze-300: #d9be93;
	--bronze-400: #c9a469;
	--bronze-500: #b08d57;
	--bronze-600: #96733f;
	--bronze-700: #7a5a2f;

	--tinta: #241e17;
	--tinta-70: #5b5348;
	--tinta-50: #8a8073;
	--tinta-deep: #14100e;

	--verde: #25d366;
	/* Escurecido de #1eb457 para o texto branco sair de 2,72:1 e chegar a 3,4:1.
	   O verde puro do WhatsApp segue no token --verde, para pontos e detalhes
	   que nao carregam texto em cima. */
	--verde-600: #17a04d;
	--verde-700: #128c43;

	--f-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--f-texto: "Lora", Georgia, "Times New Roman", serif;
	--f-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--f-assinatura: "Mrs Saint Delafield", "Cormorant Garamond", cursive;

	--fio: 1px solid rgba(150, 115, 63, 0.24);
	--fio-claro: 1px solid rgba(150, 115, 63, 0.14);
	--fio-escuro: 1px solid rgba(236, 227, 211, 0.16);

	--sombra-baixa: 0 14px 34px -26px rgba(36, 30, 23, 0.4);
	--sombra-media: 0 28px 60px -40px rgba(36, 30, 23, 0.5);
	--sombra-alta: 0 40px 90px -50px rgba(20, 16, 14, 0.6);
	--sombra-verde: 0 16px 32px -12px rgba(18, 140, 67, 0.55);

	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-suave: cubic-bezier(0.16, 1, 0.3, 1);

	--header-h: 92px;
	--gap-secao: clamp(72px, 9vw, 132px);
	--largura: 1216px;
	--raio: 3px;
}

/* --------------------------------------------------------------- 2. Base --- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background: var(--marfim-50);
	color: var(--tinta);
	font-family: var(--f-texto);
	font-size: 1.0625rem;
	line-height: 1.78;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

body.trava-scroll {
	overflow: hidden;
}

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

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	border: 0;
	background: none;
	cursor: pointer;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

p {
	margin: 0 0 1.15em;
}

p:last-child {
	margin-bottom: 0;
}

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

:focus-visible {
	outline: 2px solid var(--bronze-600);
	outline-offset: 3px;
	border-radius: 2px;
}

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

.pular-para-conteudo {
	position: fixed;
	inset-inline-start: 16px;
	top: -80px;
	z-index: 300;
	background: var(--tinta);
	color: var(--marfim-50);
	padding: 10px 18px;
	font-family: var(--f-ui);
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: top 0.25s var(--ease);
}

.pular-para-conteudo:focus {
	top: 14px;
}

.oculto-visual {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------- 3. Tipografia --- */
h1,
h2,
h3,
h4 {
	font-family: var(--f-display);
	font-weight: 500;
	color: var(--tinta);
	line-height: 1.08;
	letter-spacing: -0.005em;
	margin: 0 0 0.5em;
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.5rem, 6.1vw, 4.6rem);
	font-weight: 400;
}

h2 {
	font-size: clamp(2rem, 4.2vw, 3.1rem);
}

h3 {
	font-size: clamp(1.35rem, 2.2vw, 1.75rem);
}

.serif-italico {
	font-style: italic;
	color: var(--bronze-600);
}

.dourado {
	background: linear-gradient(96deg, var(--bronze-700) 0%, var(--bronze-400) 42%, var(--bronze-600) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--bronze-600);
	font-style: italic;
}

.sobrelinha {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--f-ui);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--bronze-600);
	margin: 0 0 22px;
}

.sobrelinha::before {
	content: "";
	width: clamp(28px, 5vw, 56px);
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--bronze-500));
}

.sobrelinha--centro {
	justify-content: center;
}

.sobrelinha--clara {
	color: var(--bronze-300);
}

.sobrelinha--clara::before {
	background: linear-gradient(90deg, transparent, var(--bronze-300));
}

.linha-fina {
	font-family: var(--f-ui);
	font-size: 0.74rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tinta-50);
}

.texto-guia {
	font-size: clamp(1.05rem, 1.35vw, 1.22rem);
	color: var(--tinta-70);
	line-height: 1.85;
	max-width: 62ch;
}

/* ------------------------------------------------------------- 4. Layout --- */
.envelope {
	width: 100%;
	max-width: var(--largura);
	margin-inline: auto;
	padding-inline: clamp(20px, 5vw, 56px);
}

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

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

.secao--escura {
	background: var(--tinta-deep);
	color: var(--marfim-200);
	overflow: hidden;
}

.secao--escura h2,
.secao--escura h3 {
	color: var(--marfim-50);
}

.secao--escura .texto-guia {
	color: rgba(236, 227, 211, 0.76);
}

.cabeca-secao {
	display: grid;
	gap: clamp(20px, 3vw, 48px);
	align-items: end;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr);
	margin-bottom: clamp(40px, 5vw, 72px);
}

.cabeca-secao__apoio {
	padding-bottom: 8px;
	border-top: var(--fio);
	padding-top: 20px;
}

.fundo-fios {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.fundo-fios svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.fundo-fios__camada {
	will-change: transform;
	transform: translate3d(0, 0, 0);
}

.conteudo-topo {
	position: relative;
	z-index: 1;
}

/* ------------------------------------------------- 5. Barra de progresso --- */
.progresso-leitura {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	height: 2px;
	z-index: 210;
	background: transparent;
	pointer-events: none;
}

.progresso-leitura__trilho {
	height: 100%;
	width: 100%;
	transform: scaleX(var(--progresso, 0));
	transform-origin: 0 50%;
	background: linear-gradient(90deg, var(--bronze-600), var(--bronze-300));
}

/* ------------------------------------------------------------ 6. Cabeçalho --- */
.cabecalho {
	position: sticky;
	top: 0;
	z-index: 200;
	background: rgba(251, 249, 244, 0.82);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	border-bottom: 1px solid transparent;
	transition: background 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.cabecalho.is-rolado {
	background: rgba(251, 249, 244, 0.94);
	border-bottom-color: rgba(150, 115, 63, 0.18);
	box-shadow: 0 12px 30px -28px rgba(36, 30, 23, 0.6);
}

.cabecalho__grade {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	min-height: var(--header-h);
	transition: min-height 0.35s var(--ease);
}

.cabecalho.is-rolado .cabecalho__grade {
	min-height: 74px;
}

/* Marca (mesma hierarquia do logotipo impresso) */
.marca {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	flex: 0 0 auto;
}

.marca__selo {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	flex: 0 0 auto;
	transition: width 0.35s var(--ease), height 0.35s var(--ease);
}

.cabecalho.is-rolado .marca__selo {
	width: 44px;
	height: 44px;
}

.marca__texto {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.marca__nome {
	font-family: var(--f-display);
	font-size: clamp(1.02rem, 1.5vw, 1.32rem);
	font-weight: 500;
	letter-spacing: 0.19em;
	text-transform: uppercase;
	color: var(--tinta);
	line-height: 1;
	white-space: nowrap;
}

.marca__regua {
	height: 1px;
	background: linear-gradient(90deg, var(--bronze-500), rgba(150, 115, 63, 0.08));
}

.marca__assinatura {
	font-family: var(--f-ui);
	font-size: 0.545rem;
	font-weight: 500;
	letter-spacing: 0.285em;
	text-transform: uppercase;
	color: var(--bronze-600);
	line-height: 1;
	white-space: nowrap;
}

/* Navegação */
.nav-mesa {
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.2vw, 34px);
}

.nav-link {
	position: relative;
	font-family: var(--f-ui);
	font-size: 0.79rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tinta-70);
	padding-block: 6px;
	transition: color 0.25s var(--ease);
}

.nav-link::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 1px;
	background: var(--bronze-500);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 0.35s var(--ease-suave);
}

.nav-link:hover,
.nav-link.is-ativo {
	color: var(--tinta);
}

.nav-link:hover::after,
.nav-link.is-ativo::after {
	transform: scaleX(1);
}

.cabecalho__acoes {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Botão sanduíche */
.botao-menu {
	display: none;
	width: 46px;
	height: 46px;
	border: var(--fio);
	border-radius: 50%;
	align-items: center;
	justify-content: center;
}

.botao-menu__barras {
	display: grid;
	gap: 5px;
	width: 18px;
}

.botao-menu__barras span {
	height: 1px;
	background: var(--tinta);
	transition: transform 0.3s var(--ease), opacity 0.2s linear;
}

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

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

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

/* Painel mobile */
.painel-menu {
	position: fixed;
	inset: 0;
	z-index: 199;
	background: var(--marfim-50);
	padding: calc(var(--header-h) + 24px) clamp(24px, 7vw, 48px) 40px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-12px);
	transition: opacity 0.35s var(--ease), transform 0.45s var(--ease-suave), visibility 0.35s;
}

.painel-menu.is-aberto {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.painel-menu__lista {
	display: grid;
	gap: 4px;
}

.painel-menu__lista a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 0;
	border-bottom: var(--fio-claro);
	font-family: var(--f-display);
	font-size: 1.9rem;
	color: var(--tinta);
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.5s var(--ease) calc(var(--i, 0) * 60ms), transform 0.6s var(--ease-suave) calc(var(--i, 0) * 60ms);
}

.painel-menu.is-aberto .painel-menu__lista a {
	opacity: 1;
	transform: translateY(0);
}

.painel-menu__lista span {
	font-family: var(--f-ui);
	font-size: 0.62rem;
	letter-spacing: 0.24em;
	color: var(--bronze-600);
}

/* ------------------------------------------------------------- 7. Botões --- */
.botao {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--f-ui);
	font-size: 0.79rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	padding: 15px 26px;
	border-radius: 999px;
	transition: transform 0.35s var(--ease-suave), box-shadow 0.35s var(--ease), background-color 0.3s var(--ease),
		color 0.3s var(--ease), border-color 0.3s var(--ease);
	will-change: transform;
}

.botao svg {
	flex: 0 0 auto;
}

.botao--zap {
	background: var(--verde-600);
	color: #fff;
	box-shadow: var(--sombra-verde);
}

.botao--zap:hover {
	background: var(--verde-700);
	transform: translateY(-2px);
}

.botao--tinta {
	background: var(--tinta);
	color: var(--marfim-50);
}

.botao--tinta:hover {
	background: var(--tinta-deep);
	transform: translateY(-2px);
}

.botao--contorno {
	border: 1px solid rgba(150, 115, 63, 0.4);
	color: var(--tinta);
	background: rgba(255, 255, 255, 0.35);
}

.botao--contorno:hover {
	border-color: var(--bronze-600);
	background: #fff;
	transform: translateY(-2px);
}

.botao--contorno-claro {
	border: 1px solid rgba(236, 227, 211, 0.32);
	color: var(--marfim-100);
}

.botao--contorno-claro:hover {
	border-color: var(--bronze-300);
	background: rgba(236, 227, 211, 0.08);
}

.botao--pequeno {
	padding: 11px 18px;
	font-size: 0.7rem;
}

.botao--largo {
	width: 100%;
}

.link-texto {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--f-ui);
	font-size: 0.76rem;
	font-weight: 500;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--bronze-700);
	padding-bottom: 3px;
	border-bottom: 1px solid rgba(150, 115, 63, 0.32);
	transition: gap 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.link-texto:hover {
	gap: 15px;
	color: var(--tinta);
	border-color: var(--bronze-600);
}

.link-texto--claro {
	color: var(--bronze-300);
	border-color: rgba(217, 190, 147, 0.35);
}

.link-texto--claro:hover {
	color: var(--marfim-50);
	border-color: var(--bronze-300);
}

/* --------------------------------------------------------------- 8. Hero --- */
.hero {
	position: relative;
	padding-block: clamp(56px, 7vw, 104px) clamp(64px, 8vw, 120px);
}

.hero__grade {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	gap: clamp(40px, 6vw, 88px);
	align-items: center;
}

.hero__selo-local {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px 8px 12px;
	border: var(--fio);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.6);
	font-family: var(--f-ui);
	font-size: 0.66rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--tinta-70);
	margin-bottom: 26px;
}

.pulso {
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--verde);
	flex: 0 0 auto;
}

.pulso::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 1px solid var(--verde);
	animation: pulsar 2.6s var(--ease) infinite;
}

@keyframes pulsar {
	0% {
		transform: scale(0.7);
		opacity: 0.9;
	}
	70%,
	100% {
		transform: scale(1.5);
		opacity: 0;
	}
}

.hero h1 {
	margin-bottom: 26px;
}

.hero__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 34px;
}

.hero__garantias {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 18px 26px;
	margin-top: clamp(38px, 4vw, 54px);
	padding-top: 26px;
	border-top: var(--fio-claro);
}

.hero__garantias li {
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: 12px;
	font-family: var(--f-ui);
	font-size: 0.83rem;
	line-height: 1.55;
	color: var(--tinta-70);
}

.hero__garantias svg {
	margin-top: 3px;
	color: var(--bronze-600);
}

/* Medalhão: tudo alinhado ao eixo, sem rotação */
.medalhao {
	position: relative;
	margin: 0;
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	width: min(100%, 470px);
	margin-inline: auto;
}

.medalhao__aros {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
}

.medalhao__aros span {
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgba(150, 115, 63, 0.2);
}

.medalhao__aros span:nth-child(1) {
	inset: 0;
	border-color: rgba(150, 115, 63, 0.14);
}

.medalhao__aros span:nth-child(2) {
	inset: 7.5%;
	border-style: dashed;
	border-color: rgba(150, 115, 63, 0.22);
	animation: girar 90s linear infinite;
}

.medalhao__aros span:nth-child(3) {
	inset: 16%;
	border-color: rgba(150, 115, 63, 0.28);
	background: radial-gradient(circle at 50% 42%, #fff 0%, rgba(255, 253, 249, 0.6) 58%, rgba(251, 249, 244, 0) 100%);
}

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

.medalhao__marca {
	position: relative;
	width: 58%;
	height: auto;
	border-radius: 50%;
	box-shadow: 0 30px 60px -34px rgba(36, 30, 23, 0.55);
}

.medalhao__oab {
	position: absolute;
	bottom: 4%;
	left: 50%;
	transform: translateX(-50%);
	background: var(--marfim-50);
	border: var(--fio);
	border-radius: 999px;
	padding: 9px 20px;
	font-family: var(--f-ui);
	font-size: 0.63rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--bronze-700);
	white-space: nowrap;
}

.cartao-plantao {
	margin: 26px auto 0;
	max-width: 400px;
	border: var(--fio-claro);
	border-left: 2px solid var(--bronze-500);
	background: rgba(255, 255, 255, 0.72);
	padding: 18px 22px;
	font-family: var(--f-ui);
	font-size: 0.83rem;
	line-height: 1.6;
	color: var(--tinta-70);
}

.cartao-plantao strong {
	display: block;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tinta);
	margin-bottom: 6px;
}

/* ------------------------------------------------------------- 9. Áreas --- */
.areas__grade {
	display: grid;
	grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
	gap: clamp(20px, 2.4vw, 32px);
	align-items: stretch;
}

.areas__coluna {
	display: grid;
	gap: clamp(20px, 2.4vw, 32px);
	align-content: start;
}

.carro-chefe {
	position: relative;
	overflow: hidden;
	background: var(--tinta-deep);
	color: var(--marfim-100);
	padding: clamp(30px, 3.6vw, 54px);
	border: 1px solid rgba(150, 115, 63, 0.34);
	border-radius: var(--raio);
	box-shadow: var(--sombra-alta);
	display: flex;
	flex-direction: column;
	gap: 22px;
	height: 100%;
}

.carro-chefe::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		420px circle at var(--px, 70%) var(--py, 18%),
		rgba(201, 164, 105, 0.22),
		transparent 62%
	);
	opacity: 0;
	transition: opacity 0.5s var(--ease);
	pointer-events: none;
}

.carro-chefe:hover::before,
.carro-chefe:focus-within::before {
	opacity: 1;
}

.carro-chefe__marcador {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	align-self: flex-start;
	padding: 7px 15px;
	border: 1px solid rgba(201, 164, 105, 0.5);
	border-radius: 999px;
	font-family: var(--f-ui);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--bronze-300);
}

.carro-chefe__numero {
	position: absolute;
	top: clamp(-10px, -0.5vw, 0px);
	right: clamp(16px, 2vw, 34px);
	font-family: var(--f-display);
	font-size: clamp(6rem, 11vw, 11rem);
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px rgba(201, 164, 105, 0.2);
	pointer-events: none;
	user-select: none;
}

.carro-chefe h3 {
	font-size: clamp(2rem, 3.4vw, 2.9rem);
	margin: 0;
	/* A regra global pinta h1-h4 com --tinta, que e escura. Dentro desta carta,
	   cujo fundo e --tinta-deep, o titulo ficava invisivel (contraste 1,2:1).
	   As secoes escuras resolvem isso com --marfim-50; aqui vale o mesmo. */
	color: var(--marfim-50);
}

.carro-chefe p {
	color: rgba(236, 227, 211, 0.8);
	max-width: 54ch;
}

.lista-situacoes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
	gap: 10px 26px;
	margin-top: 4px;
}

.lista-situacoes li {
	position: relative;
	padding-left: 20px;
	font-family: var(--f-ui);
	font-size: 0.86rem;
	line-height: 1.5;
	/* Padrao pensado para fundo claro. Esta lista nasceu dentro da carta de
	   destaque, que e escura, mas a pagina de privacidade reusa a mesma classe
	   sobre fundo marfim: la os itens ficavam invisiveis (contraste 1,18:1). */
	color: var(--tinta-70);
}

.carro-chefe .lista-situacoes li,
.secao--escura .lista-situacoes li {
	color: rgba(236, 227, 211, 0.86);
}

.lista-situacoes li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 6px;
	background: var(--bronze-400);
	transform: rotate(45deg);
}

.carta-area {
	position: relative;
	background: rgba(255, 255, 255, 0.66);
	border: var(--fio-claro);
	border-radius: var(--raio);
	padding: clamp(26px, 2.8vw, 38px);
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: transform 0.5s var(--ease-suave), box-shadow 0.5s var(--ease), border-color 0.4s var(--ease),
		background-color 0.4s var(--ease);
	height: 100%;
}

.carta-area:hover {
	transform: translateY(-4px);
	border-color: rgba(150, 115, 63, 0.32);
	background: #fff;
	box-shadow: var(--sombra-media);
}

.carta-area h3 {
	margin: 0;
}

.carta-area p {
	color: var(--tinta-70);
	font-size: 1rem;
}

.carta-area__indice {
	font-family: var(--f-ui);
	font-size: 0.62rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--bronze-600);
}

.etiquetas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
	padding-top: 8px;
}

.etiqueta {
	font-family: var(--f-ui);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: var(--tinta-70);
	border: var(--fio-claro);
	border-radius: 999px;
	padding: 6px 13px;
	background: rgba(246, 241, 232, 0.7);
	transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background-color 0.3s var(--ease),
		transform 0.3s var(--ease);
}

button.etiqueta:hover {
	border-color: var(--bronze-500);
	color: var(--tinta);
	background: #fff;
	transform: translateY(-1px);
}

/* --------------------------------------------------------- 10. Atendimento --- */
.passos {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
}

.passos__trilha {
	display: grid;
	gap: 2px;
	border-top: var(--fio-escuro);
}

.passo-gatilho {
	position: relative;
	display: grid;
	grid-template-columns: 46px 1fr;
	gap: 16px;
	align-items: baseline;
	width: 100%;
	text-align: left;
	padding: 20px 12px 20px 0;
	border-bottom: var(--fio-escuro);
	color: rgba(236, 227, 211, 0.62);
	transition: color 0.35s var(--ease), padding-left 0.4s var(--ease-suave);
}

.passo-gatilho:hover {
	color: var(--marfim-50);
	padding-left: 6px;
}

.passo-gatilho__num {
	font-family: var(--f-display);
	font-size: 1.15rem;
	letter-spacing: 0.08em;
	color: var(--bronze-400);
}

.passo-gatilho__titulo {
	font-family: var(--f-display);
	font-size: clamp(1.2rem, 1.9vw, 1.55rem);
	line-height: 1.2;
}

.passo-gatilho.is-ativo {
	color: var(--marfim-50);
}

.passo-gatilho.is-ativo .passo-gatilho__num {
	color: var(--bronze-300);
}

.passo-gatilho__medidor {
	position: absolute;
	left: 0;
	bottom: -1px;
	height: 1px;
	width: 100%;
	background: rgba(201, 164, 105, 0.9);
	transform: scaleX(0);
	transform-origin: 0 50%;
}

.passo-gatilho.is-ativo .passo-gatilho__medidor {
	transform: scaleX(var(--avanco, 0));
}

.passos__painel {
	position: relative;
	border: 1px solid rgba(201, 164, 105, 0.24);
	border-radius: var(--raio);
	background: linear-gradient(150deg, rgba(236, 227, 211, 0.07), rgba(236, 227, 211, 0.02));
	padding: clamp(28px, 3.4vw, 52px);
	min-height: 340px;
	overflow: hidden;
}

.passo-conteudo {
	display: none;
}

.passo-conteudo.is-ativo {
	display: block;
	animation: entrar 0.55s var(--ease-suave) both;
}

@keyframes entrar {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.passo-conteudo__etapa {
	font-family: var(--f-ui);
	font-size: 0.64rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--bronze-300);
	margin-bottom: 18px;
}

.passo-conteudo h3 {
	font-size: clamp(1.6rem, 2.6vw, 2.25rem);
}

.passo-conteudo p {
	color: rgba(236, 227, 211, 0.78);
	max-width: 58ch;
}

.passo-conteudo__nota {
	margin-top: 26px;
	padding-top: 20px;
	border-top: var(--fio-escuro);
	font-family: var(--f-ui);
	font-size: 0.82rem;
	color: rgba(236, 227, 211, 0.62);
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.passo-conteudo__nota svg {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--bronze-300);
}

.passos__controles {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 26px;
}

.passos__controles button {
	width: 42px;
	height: 42px;
	border: 1px solid rgba(236, 227, 211, 0.22);
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: var(--marfim-100);
	transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.passos__controles button:hover {
	border-color: var(--bronze-300);
	background: rgba(201, 164, 105, 0.12);
}

.passos__controles .contador {
	font-family: var(--f-ui);
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	color: rgba(236, 227, 211, 0.6);
}

/* -------------------------------------------------------------- 11. Sobre --- */
.sobre {
	position: relative;
}

.sobre__grade {
	display: grid;
	grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
	gap: clamp(36px, 5vw, 78px);
	align-items: start;
}

.sobre__retrato {
	position: relative;
	display: grid;
	gap: 20px;
	position: sticky;
	top: calc(var(--header-h) + 28px);
}

.moldura {
	position: relative;
	padding: 16px;
	border: var(--fio);
	background: linear-gradient(160deg, #fff, rgba(246, 241, 232, 0.6));
	box-shadow: var(--sombra-media);
}

.moldura::after {
	content: "";
	position: absolute;
	inset: 7px;
	border: var(--fio-claro);
	pointer-events: none;
}

.moldura img {
	width: 100%;
	height: auto;
	/* Proporcao travada na do arquivo real (900x649): a marca nova, empilhada,
	   com o monograma sobre a assinatura. A lockup horizontal original e 3,75:1
	   e deixaria a moldura com 70% de vao; empilhada, a arte preenche a largura
	   inteira sem sobra.
	   contain, nunca cover: logo cortado em material juridico e inaceitavel. */
	aspect-ratio: 900 / 649;
	object-fit: contain;
	object-position: center;
}

.sobre__etiqueta-vertical {
	position: absolute;
	left: -34px;
	top: 22px;
	writing-mode: vertical-rl;
	font-family: var(--f-ui);
	font-size: 0.6rem;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--bronze-600);
}

.sobre__cartao-dados {
	border: var(--fio-claro);
	background: rgba(255, 255, 255, 0.66);
	padding: 20px 22px;
	display: grid;
	gap: 14px;
}

.sobre__cartao-dados div {
	display: grid;
	gap: 3px;
}

.sobre__cartao-dados dt {
	font-family: var(--f-ui);
	font-size: 0.6rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bronze-600);
}

.sobre__cartao-dados dd {
	margin: 0;
	font-family: var(--f-ui);
	font-size: 0.88rem;
	color: var(--tinta);
}

.assinatura {
	font-family: var(--f-assinatura);
	font-size: clamp(3.4rem, 7vw, 5.4rem);
	line-height: 0.95;
	color: var(--tinta);
	margin: 0 0 6px;
	font-weight: 400;
}

.assinatura-risco {
	width: min(320px, 74%);
	height: 12px;
	margin-bottom: 18px;
	color: var(--bronze-500);
}

.assinatura-risco path {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-dasharray: var(--tam, 400);
	stroke-dashoffset: var(--tam, 400);
	transition: stroke-dashoffset 1.5s var(--ease-suave);
}

.assinatura-risco.is-visivel path {
	stroke-dashoffset: 0;
}

.sobre__credencial {
	font-family: var(--f-ui);
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tinta-50);
	margin-bottom: 30px;
}

.sobre__texto p {
	text-align: left;
	color: var(--tinta-70);
	font-size: 1.06rem;
}

.sobre__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
	gap: 10px;
	margin: 30px 0 26px;
}

.sobre__lista-titulo {
	font-family: var(--f-ui);
	font-size: 0.68rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--bronze-700);
	margin: 34px 0 4px;
}

.item-atuacao {
	position: relative;
	display: grid;
	grid-template-columns: 22px 1fr auto;
	gap: 12px;
	align-items: center;
	width: 100%;
	text-align: left;
	padding: 13px 14px 13px 4px;
	border-bottom: var(--fio-claro);
	font-family: var(--f-ui);
	font-size: 0.92rem;
	color: var(--tinta-70);
	transition: color 0.3s var(--ease), background-color 0.3s var(--ease), padding-left 0.35s var(--ease-suave);
}

.item-atuacao::before {
	content: "";
	width: 7px;
	height: 7px;
	margin-left: 6px;
	background: var(--bronze-400);
	transform: rotate(45deg);
	transition: background-color 0.3s var(--ease), transform 0.4s var(--ease-suave);
}

.item-atuacao:hover {
	color: var(--tinta);
	background: rgba(255, 255, 255, 0.7);
	padding-left: 10px;
}

.item-atuacao:hover::before {
	background: var(--bronze-700);
	transform: rotate(135deg);
}

.item-atuacao__acao {
	opacity: 0;
	font-size: 0.64rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bronze-700);
	transition: opacity 0.3s var(--ease);
}

.item-atuacao:hover .item-atuacao__acao,
.item-atuacao:focus-visible .item-atuacao__acao {
	opacity: 1;
}

.sobre__fecho {
	margin-top: 8px;
	padding: 22px 24px;
	border-left: 2px solid var(--bronze-500);
	background: rgba(246, 241, 232, 0.72);
	font-family: var(--f-texto);
	font-size: 1.02rem;
	color: var(--tinta);
}

/* -------------------------------------------------------------- 12. FAQ --- */
.faq {
	display: grid;
	grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
	gap: clamp(28px, 4vw, 66px);
	align-items: start;
}

.faq__lista {
	border-top: var(--fio-claro);
}

.faq__item {
	border-bottom: var(--fio-claro);
}

.faq__gatilho {
	display: grid;
	grid-template-columns: 1fr 26px;
	gap: 18px;
	align-items: center;
	width: 100%;
	text-align: left;
	padding: 24px 2px;
	font-family: var(--f-display);
	font-size: clamp(1.12rem, 1.7vw, 1.4rem);
	color: var(--tinta);
	transition: color 0.3s var(--ease);
}

.faq__gatilho:hover {
	color: var(--bronze-700);
}

.faq__cruz {
	position: relative;
	width: 15px;
	height: 15px;
	justify-self: end;
}

.faq__cruz::before,
.faq__cruz::after {
	content: "";
	position: absolute;
	background: var(--bronze-600);
	transition: transform 0.4s var(--ease-suave), opacity 0.3s var(--ease);
}

.faq__cruz::before {
	inset: 7px 0 auto;
	height: 1px;
}

.faq__cruz::after {
	inset: 0 7px auto;
	width: 1px;
	height: 15px;
}

.faq__item.is-aberto .faq__cruz::after {
	transform: scaleY(0);
	opacity: 0;
}

.faq__resposta {
	overflow: hidden;
	height: 0;
	transition: height 0.45s var(--ease-suave);
}

.faq__resposta > div {
	padding: 0 40px 26px 2px;
	color: var(--tinta-70);
	font-size: 1rem;
}

.faq__aviso {
	border: var(--fio-claro);
	background: rgba(255, 255, 255, 0.62);
	padding: 26px;
	font-family: var(--f-ui);
	font-size: 0.86rem;
	line-height: 1.65;
	color: var(--tinta-70);
	display: grid;
	gap: 16px;
}

/* ---------------------------------------------------------- 13. Contato --- */
.contato {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	gap: clamp(24px, 3vw, 44px);
	align-items: start;
}

.canais {
	background: var(--tinta-deep);
	color: var(--marfim-100);
	border: 1px solid rgba(201, 164, 105, 0.26);
	border-radius: var(--raio);
	padding: clamp(28px, 3.2vw, 44px);
	box-shadow: var(--sombra-alta);
}

.canais__lista {
	display: grid;
	gap: 4px;
	margin-top: 26px;
}

.canal {
	display: grid;
	grid-template-columns: 40px 1fr auto;
	gap: 16px;
	align-items: center;
	padding: 18px 0;
	border-top: var(--fio-escuro);
}

.canal:last-child {
	border-bottom: var(--fio-escuro);
}

.canal__icone {
	width: 40px;
	height: 40px;
	border: 1px solid rgba(201, 164, 105, 0.32);
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: var(--bronze-300);
}

.canal__rotulo {
	font-family: var(--f-ui);
	font-size: 0.62rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(217, 190, 147, 0.8);
	display: block;
	margin-bottom: 3px;
}

.canal__valor {
	font-family: var(--f-ui);
	font-size: 0.98rem;
	color: var(--marfim-50);
	word-break: break-word;
}

.canal__copiar {
	width: 34px;
	height: 34px;
	border: 1px solid rgba(236, 227, 211, 0.2);
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: rgba(236, 227, 211, 0.7);
	transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}

.canal__copiar:hover {
	color: var(--marfim-50);
	border-color: var(--bronze-300);
	background: rgba(201, 164, 105, 0.14);
}

.formulario {
	border: var(--fio-claro);
	background: rgba(255, 255, 255, 0.72);
	border-radius: var(--raio);
	padding: clamp(26px, 3.2vw, 44px);
	box-shadow: var(--sombra-baixa);
}

.campo {
	display: grid;
	gap: 8px;
	margin-bottom: 18px;
}

.campo > label,
.grupo__titulo {
	font-family: var(--f-ui);
	font-size: 0.66rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bronze-700);
}

.campo input,
.campo select,
.campo textarea {
	width: 100%;
	font-family: var(--f-ui);
	font-size: 0.95rem;
	color: var(--tinta);
	background: #fff;
	border: 1px solid rgba(150, 115, 63, 0.24);
	border-radius: 2px;
	padding: 13px 15px;
	transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.campo textarea {
	min-height: 122px;
	resize: vertical;
	line-height: 1.6;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
	outline: none;
	border-color: var(--bronze-500);
	box-shadow: 0 0 0 3px rgba(201, 164, 105, 0.18);
}

.campo__erro {
	font-family: var(--f-ui);
	font-size: 0.74rem;
	color: #a3401f;
	min-height: 1em;
}

.campo.is-invalido input,
.campo.is-invalido select,
.campo.is-invalido textarea {
	border-color: #c2603f;
	box-shadow: 0 0 0 3px rgba(194, 96, 63, 0.14);
}

.contador-caracteres {
	font-family: var(--f-ui);
	font-size: 0.72rem;
	color: var(--tinta-50);
	text-align: right;
}

.escolhas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.escolha {
	position: relative;
}

.escolha input {
	position: absolute;
	opacity: 0;
	inset: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.escolha span {
	display: block;
	font-family: var(--f-ui);
	font-size: 0.78rem;
	padding: 10px 16px;
	border: 1px solid rgba(150, 115, 63, 0.24);
	border-radius: 999px;
	background: #fff;
	color: var(--tinta-70);
	transition: all 0.3s var(--ease);
}

.escolha input:checked + span {
	border-color: var(--bronze-600);
	background: var(--tinta);
	color: var(--marfim-50);
}

.escolha input:focus-visible + span {
	outline: 2px solid var(--bronze-600);
	outline-offset: 2px;
}

.aviso-lgpd {
	font-family: var(--f-ui);
	font-size: 0.74rem;
	line-height: 1.6;
	color: var(--tinta-50);
	margin-top: 14px;
}

.aviso-lgpd a {
	color: var(--bronze-700);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------------------------------------------------------- 14. Rodapé --- */
.rodape {
	background: var(--tinta-deep);
	color: rgba(236, 227, 211, 0.72);
	padding-block: clamp(52px, 6vw, 84px) 34px;
	font-family: var(--f-ui);
	font-size: 0.85rem;
}

.rodape__grade {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(0, 0.7fr));
	gap: clamp(30px, 4vw, 60px);
	padding-bottom: 40px;
	border-bottom: var(--fio-escuro);
}

.rodape .marca__nome {
	color: var(--marfim-50);
}

.rodape .marca__assinatura {
	color: var(--bronze-300);
}

.rodape .marca__regua {
	background: linear-gradient(90deg, var(--bronze-400), rgba(201, 164, 105, 0.08));
}

.rodape__titulo {
	font-family: var(--f-ui);
	font-size: 0.62rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--bronze-300);
	margin-bottom: 18px;
}

.rodape__links {
	display: grid;
	gap: 11px;
}

.rodape__links a:hover {
	color: var(--marfim-50);
}

.rodape__nota {
	margin-top: 30px;
	font-size: 0.76rem;
	line-height: 1.7;
	color: rgba(236, 227, 211, 0.5);
	max-width: 92ch;
}

.rodape__base {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 26px;
	justify-content: space-between;
	align-items: center;
	margin-top: 26px;
	font-size: 0.74rem;
	color: rgba(236, 227, 211, 0.45);
}

/* ------------------------------------------------ 15. Camada flutuante --- */
.zap-flutuante {
	position: fixed;
	right: clamp(16px, 2.4vw, 30px);
	bottom: clamp(16px, 2.4vw, 30px);
	z-index: 190;
	display: inline-flex;
	align-items: center;
	gap: 0;
	background: var(--verde-600);
	color: #fff;
	padding: 15px;
	border-radius: 999px;
	box-shadow: var(--sombra-verde);
	transition: gap 0.4s var(--ease-suave), padding 0.4s var(--ease-suave), transform 0.4s var(--ease-suave),
		background-color 0.3s var(--ease), opacity 0.3s var(--ease);
}

.zap-flutuante:hover {
	background: var(--verde-700);
	transform: translateY(-2px);
}

.zap-flutuante__rotulo {
	font-family: var(--f-ui);
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	transition: max-width 0.5s var(--ease-suave), margin 0.4s var(--ease-suave);
}

.zap-flutuante.is-expandido {
	padding: 15px 22px 15px 17px;
}

.zap-flutuante.is-expandido .zap-flutuante__rotulo {
	max-width: 220px;
	margin-left: 10px;
}

.zap-flutuante.is-oculto {
	opacity: 0;
	pointer-events: none;
	transform: translateY(12px);
}

.voltar-topo {
	position: fixed;
	left: clamp(16px, 2.4vw, 30px);
	bottom: clamp(16px, 2.4vw, 30px);
	z-index: 180;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: var(--fio);
	background: rgba(251, 249, 244, 0.9);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	display: grid;
	place-items: center;
	color: var(--tinta);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.35s var(--ease), transform 0.35s var(--ease-suave), visibility 0.35s;
}

.voltar-topo.is-visivel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Avisos rápidos */
.avisos {
	position: fixed;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%);
	z-index: 260;
	display: grid;
	gap: 10px;
	width: min(92vw, 420px);
	pointer-events: none;
}

.aviso {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--tinta);
	color: var(--marfim-50);
	border: 1px solid rgba(201, 164, 105, 0.34);
	border-radius: 999px;
	padding: 13px 20px;
	font-family: var(--f-ui);
	font-size: 0.83rem;
	box-shadow: var(--sombra-alta);
	animation: aviso-entra 0.4s var(--ease-suave) both;
}

.aviso.is-saindo {
	animation: aviso-sai 0.35s var(--ease) forwards;
}

@keyframes aviso-entra {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
}

@keyframes aviso-sai {
	to {
		opacity: 0;
		transform: translateY(10px);
	}
}

/* ---------------------------------------------------------- 16. Triagem --- */
.triagem {
	position: fixed;
	inset: 0;
	z-index: 250;
	display: grid;
	place-items: end center;
	padding: clamp(12px, 3vw, 40px);
	background: rgba(20, 16, 14, 0.62);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s var(--ease), visibility 0.35s;
}

@media (min-width: 721px) {
	.triagem {
		place-items: center;
	}
}

.triagem.is-aberta {
	opacity: 1;
	visibility: visible;
}

.triagem__caixa {
	width: min(100%, 620px);
	max-height: min(88vh, 780px);
	overflow-y: auto;
	background: var(--marfim-50);
	border: 1px solid rgba(150, 115, 63, 0.3);
	border-radius: var(--raio);
	padding: clamp(24px, 3.4vw, 40px);
	box-shadow: var(--sombra-alta);
	transform: translateY(18px) scale(0.99);
	transition: transform 0.45s var(--ease-suave);
}

.triagem.is-aberta .triagem__caixa {
	transform: translateY(0) scale(1);
}

.triagem__topo {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 22px;
}

.triagem__fechar {
	width: 38px;
	height: 38px;
	border: var(--fio);
	border-radius: 50%;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.triagem__fechar:hover {
	background: #fff;
	border-color: var(--bronze-600);
}

.triagem__medidor {
	display: flex;
	gap: 6px;
	margin-bottom: 26px;
}

.triagem__medidor span {
	height: 2px;
	flex: 1;
	background: rgba(150, 115, 63, 0.18);
	overflow: hidden;
}

.triagem__medidor span.is-feito {
	background: var(--bronze-500);
}

.triagem__etapa {
	display: none;
}

.triagem__etapa.is-ativa {
	display: block;
	animation: entrar 0.4s var(--ease-suave) both;
}

.triagem__rodape {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 26px;
	padding-top: 20px;
	border-top: var(--fio-claro);
}

.triagem__resumo {
	border: var(--fio-claro);
	background: #fff;
	padding: 18px;
	font-family: var(--f-ui);
	font-size: 0.86rem;
	line-height: 1.6;
	color: var(--tinta-70);
	margin-bottom: 18px;
	display: grid;
	gap: 6px;
}

.triagem__resumo strong {
	color: var(--tinta);
}

/* ------------------------------------------------------- 17. Revelações --- */
.js [data-revelar] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.85s var(--ease-suave) calc(var(--atraso, 0) * 1ms),
		transform 0.95s var(--ease-suave) calc(var(--atraso, 0) * 1ms);
	will-change: opacity, transform;
}

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

.js .titulo-mascara {
	display: block;
}

.js .palavra {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
}

.js .palavra > span {
	display: inline-block;
	transform: translateY(105%);
	transition: transform 1s var(--ease-suave) calc(var(--atraso, 0) * 1ms);
}

.js .titulo-mascara.is-visivel .palavra > span {
	transform: none;
}

/* --------------------------------------------------------- 18. Responsivo --- */
@media (max-width: 1080px) {
	.hero__grade,
	.areas__grade,
	.passos,
	.sobre__grade,
	.faq,
	.contato,
	.cabeca-secao {
		grid-template-columns: minmax(0, 1fr);
	}

	.cabeca-secao__apoio {
		border-top: none;
		padding-top: 0;
	}

	.sobre__retrato {
		position: static;
		max-width: 420px;
	}

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

@media (max-width: 900px) {
	.nav-mesa,
	.cabecalho__acoes .botao--zap {
		display: none;
	}

	.botao-menu {
		display: inline-flex;
	}

	.medalhao {
		width: min(84%, 360px);
	}

	.sobre__etiqueta-vertical {
		display: none;
	}
}

@media (max-width: 640px) {
	:root {
		--header-h: 78px;
	}

	body {
		font-size: 1rem;
	}

	.marca__nome {
		letter-spacing: 0.14em;
		font-size: 0.95rem;
	}

	.marca__assinatura {
		font-size: 0.5rem;
		letter-spacing: 0.2em;
	}

	.marca__selo {
		width: 44px;
		height: 44px;
	}

	.hero__acoes .botao {
		width: 100%;
	}

	.passos__painel {
		min-height: 0;
	}

	.sobre__texto p {
		text-align: left;
	}

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

	.voltar-topo {
		width: 42px;
		height: 42px;
	}

	.zap-flutuante.is-expandido .zap-flutuante__rotulo {
		max-width: 150px;
	}
}

/* ------------------------------------------- 19. Preferências e impressão --- */
@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;
	}

	.js [data-revelar],
	.js .palavra > span {
		opacity: 1 !important;
		transform: none !important;
	}
}

@media print {
	.cabecalho,
	.zap-flutuante,
	.voltar-topo,
	.progresso-leitura,
	.fundo-fios,
	.painel-menu,
	.triagem,
	.avisos {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}

	.secao {
		padding-block: 24px;
		break-inside: avoid;
	}
}

/* ==========================================================================
   20. ÂNCORAS — compensa o cabeçalho fixo quando alguem entra direto em
   /#atendimento, /#duvidas ou num link de pergunta do FAQ.
   ========================================================================== */
section[id],
main[id],
.faq__gatilho {
	scroll-margin-top: calc(var(--header-h) + 26px);
}

/* ============================================================
   21. Alinhamento do texto corrido
   Justificado com hifenizacao automatica em pt-BR. Sem os hifens,
   justificar em coluna estreita abre "rios" de espaco no meio da
   frase; com eles o texto fecha reto nas duas margens.
   ============================================================ */
main p,
.hero p,
.carro-chefe p,
.item-atuacao p,
.passo-conteudo p,
.faq__resposta p,
.sobre__texto p {
	text-align: justify;
	text-justify: inter-word;
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: break-word;
}

/* Rotulos, avisos curtos, contadores e legendas continuam sem justificar:
   linha curta justificada fica com espacamento artificial. */
.contador-caracteres,
.campo__dica,
.campo__erro,
.passo-conteudo__etapa,
.rotulo,
.rotulo-secao,
.selo,
.marca__texto,
.medalhao p,
.aviso-lgpd p,
.rodape p,
.rodape__legal p,
.expediente p,
.triagem p,
.faq__aviso,
figcaption,
small {
	text-align: left;
	hyphens: manual;
	-webkit-hyphens: manual;
}

/* ------------------------------------------------- cursor do titulo vivo --- */
.cursor {
	display: inline-block;
	width: 3px;
	height: 0.82em;
	margin-left: 3px;
	background: var(--bronze-500);
	-webkit-text-fill-color: initial;
	border-radius: 2px;
	transform: translateY(0.04em);
	animation: piscar 1.05s steps(2, start) infinite;
}

@keyframes piscar {
	to {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cursor {
		display: none;
	}
}