/* =========================================================================
   Mundo Virtual - folha de estilo única do tema.
   Ordem: fontes > tokens > reset > base > componentes > seções > blog > responsivo.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. Fontes (hospedadas no próprio servidor, subset latin)
   ----------------------------------------------------------------------
   São fontes VARIÁVEIS: um arquivo por família cobre toda a faixa de pesos.
   Por isso o font-weight aqui é um intervalo ("400 700"), e não um número.
   Antes vinham do Google em pesos soltos, o que baixava o mesmo arquivo
   variável uma vez por peso — 6 arquivos e 249 KB para o que agora custa 2
   arquivos e 58 KB. Trocar por pesos fixos aqui desfaz essa economia.

   Arquivos em assets/fonts/. Licença SIL Open Font License nas duas famílias,
   que permite hospedagem própria.
   ---------------------------------------------------------------------- */

@font-face {
	font-family: "Space Grotesk";
	src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
	font-weight: 500 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "DM Sans";
	src: url("../fonts/dm-sans-latin.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

/* Itálico só aparece em citações e no Sobre Nós. Como é uma face separada,
   o navegador só baixa este arquivo em página que use itálico — a home não
   paga por ele. */
@font-face {
	font-family: "DM Sans";
	src: url("../fonts/dm-sans-latin-italic.woff2") format("woff2");
	font-weight: 400 700;
	font-style: italic;
	font-display: swap;
}

/* -------------------------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------------------- */

:root {
	/* Cores */
	--bg: #080b12;
	--bg-soft: #0c111c;
	--surface: #111827;
	--surface-2: #171f2f;
	--line: rgba(255, 255, 255, 0.08);
	--line-strong: rgba(255, 255, 255, 0.16);

	--text: #e8ecf4;
	--muted: #93a0b5;
	--muted-dim: #6b7a91;

	--brand: #6090f0;
	--brand-hover: #7ea6f5;
	--brand-deep: #3f6fd8;
	--accent: #8b7cf6;
	--on-brand: #061020;

	--warn: #e0a45c;

	--gradient: linear-gradient(120deg, var(--brand), var(--accent));

	/* Tipografia */
	--font-head: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--fs-h1: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
	--fs-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
	--fs-h3: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
	--fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	--fs-body: 1.0625rem;
	--fs-small: 0.9375rem;

	/* Espaco e forma */
	--container: 1180px;
	--gutter: clamp(1.25rem, 4vw, 2.5rem);
	--section-y: clamp(4rem, 8vw, 7.5rem);
	--radius: 16px;
	--radius-lg: 24px;
	--radius-pill: 999px;

	--shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.9);
	--shadow-brand: 0 20px 55px -25px rgba(96, 144, 240, 0.7);

	--ease: cubic-bezier(0.22, 0.8, 0.3, 1);
	--speed: 0.25s;
}

/* -------------------------------------------------------------------------
   2. Reset enxuto
   ---------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3, h4 {
	margin: 0 0 0.5em;
	font-family: var(--font-head);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

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

a { color: var(--brand); text-decoration: none; transition: color var(--speed) var(--ease); }
a:hover { color: var(--brand-hover); }

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

ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }

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

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

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute;
	top: -100px; left: 1rem;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--brand);
	color: var(--on-brand);
	border-radius: 0 0 var(--radius) var(--radius);
	font-weight: 700;
	transition: top var(--speed) var(--ease);
}
.skip-link:focus { top: 0; color: var(--on-brand); }

/* -------------------------------------------------------------------------
   3. Layout
   ---------------------------------------------------------------------- */

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

.site-main { display: block; }

.section { padding-block: var(--section-y); }

/* Seção de documento: o texto longo que vem logo abaixo do topo ----------
   Usada nas três políticas de privacidade. O respiro normal de uma seção
   existe para separar assuntos diferentes; aqui embaixo não há troca de
   assunto — o topo anuncia o documento e o documento começa. Com o
   --section-y cheio somavam-se ~168px entre a última linha do topo e o
   primeiro título, e quem abre uma política quer ler, não admirar o
   intervalo.

   Só o respiro de cima encolhe. O de baixo continua inteiro, porque ali o
   que vem depois é o rodapé, e aí a separação volta a ter função. */
.section--doc { padding-block-start: clamp(1.5rem, 3vw, 2.75rem); }

/* Linha legal no pé da página ------------------------------------------
   O link para a política do próprio app, nas duas páginas de app. Fica
   deliberadamente apagado: é documento que se procura, não oferta que se
   empurra. Sem fundo, sem botão e sem seção própria — só uma linha entre o
   fecho da página e o rodapé, sublinhada apenas no ponteiro, para não
   disputar atenção com o botão de download logo acima. */
.nota-legal {
	margin: 0;
	padding-block: 0 clamp(2rem, 5vw, 3.5rem);
	color: var(--muted-dim);
	font-size: var(--fs-small);
	text-align: center;
}

.nota-legal a {
	color: inherit;
	text-decoration: none;
}

.nota-legal a:hover,
.nota-legal a:focus-visible { color: var(--text); text-decoration: underline; }

/* Faixa de realce -------------------------------------------------------
   O site é escuro do topo ao rodapé nas 12 páginas, e é isso — mais que a
   falta de animação — que dá a sensação de página parada. Uma faixa de tom
   diferente no meio das páginas longas devolve o ritmo.

   Era quase branca (#f1f4fa) até 2026-09-13, e a medição explica o
   incômodo que o Rogério apontou: aquela faixa subia **93 pontos de L***
   sobre a página — a escala perceptual inteira de uma vez — e o contraste
   entre as duas saltava 17,9×. Não era realce, era outro site no meio da
   página, e obrigava a inverter texto, links, bordas e sombras junto.

   Esta ardósia sobe 21 pontos de L* e o salto cai para 1,7×. O texto
   continua CLARO, então não há inversão: a emenda deixa de ser um tranco e
   o que se lê é "mudou de cômodo", não "mudou de site".

   Fica na família do azul da marca de propósito. Um indigo dava drama
   parecido com emenda ainda mais suave (ΔL* 17,5), mas traria de volta o
   roxo que foi trocado lá no começo para o site não parecer o template de
   outra empresa — ver a decisão em design-site-mvirtual.

   Não reescreve componente nenhum: só redefine os tokens que PRECISAM
   mudar, e tudo que usa var(--...) se adapta sozinho. Os que servem nos
   dois fundos — --text e --on-brand — ficam de fora de propósito: token
   redefinido sem necessidade é mais um lugar para esquecer de atualizar.

   Medido, não estimado, sobre o #2E3A52: texto 9,6:1 · secundário 5,9:1 ·
   apagado 4,1:1 · link 5,5:1. O azul da marca precisou clarear porque o
   #6090F0 não alcança 4,5:1 aqui. */
.section--realce {
	--bg: #2e3a52;
	--bg-soft: #273249;
	--surface: #3a4760;
	--surface-2: #334057;

	/* Borda branca a 8% some sobre fundo mais claro que a página. */
	--line: rgba(255, 255, 255, 0.12);
	--line-strong: rgba(255, 255, 255, 0.24);

	--muted: #afbcd2;
	--muted-dim: #8e9cb4;

	--brand: #8fb4f8;
	--brand-hover: #b0cbfb;

	--shadow: 0 18px 46px -28px rgba(0, 0, 0, 0.75);
	--shadow-brand: 0 18px 46px -26px rgba(143, 180, 248, 0.45);

	background: var(--bg);
	color: var(--text);
	border-block: 1px solid rgba(255, 255, 255, 0.08);
}

.section--realce .section__title,
.section--realce .abas__titulo { color: var(--text); }

.section--alt {
	background: var(--bg-soft);
	border-block: 1px solid var(--line);
}

.section__head {
	max-width: 680px;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Cabeçalho que é a seção inteira não tem do que se separar: sem isto, a
   margem de baixo se soma ao padding da faixa e abre um vão de quase 4rem
   embaixo do texto. Acontece quando um bloco sai da seção, como os números
   da IA em produção. */
.section__head:last-child { margin-bottom: 0; }

.section__head--row {
	max-width: none;
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 1.5rem;
}

.section__title { font-size: var(--fs-h2); margin-bottom: 0.4em; }

.section__lead {
	color: var(--muted);
	font-size: var(--fs-lead);
	margin-bottom: 0;
}

/* Dois leads seguidos são dois parágrafos: sem esta folga eles encostam e
   viram um bloco só, porque a margem de baixo é zerada acima. */
.section__lead + .section__lead { margin-top: 0.75em; }

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0 0 1rem;
	font-family: var(--font-head);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brand);
}

.eyebrow__dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--brand);
	box-shadow: 0 0 0 4px rgba(96, 144, 240, 0.18);
}

.eyebrow a { color: inherit; }

.text-gradient {
	display: block;
	background: var(--gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* -------------------------------------------------------------------------
   4. Botões
   ---------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	padding: 0.75rem 1.4rem;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font-family: var(--font-head);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	white-space: nowrap;
	transition: transform var(--speed) var(--ease),
	            background-color var(--speed) var(--ease),
	            border-color var(--speed) var(--ease),
	            box-shadow var(--speed) var(--ease),
	            color var(--speed) var(--ease);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
	background: var(--brand);
	color: var(--on-brand);
	box-shadow: var(--shadow-brand);
}
.btn--primary:hover { background: var(--brand-hover); color: var(--on-brand); }

.btn--ghost {
	background: transparent;
	border-color: var(--line-strong);
	color: var(--text);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--brand); color: var(--text); }

.btn--lg { padding: 0.95rem 1.8rem; font-size: 1rem; }

.btn .icon { transition: transform var(--speed) var(--ease); }
.btn:hover .icon { transform: translateX(3px); }

/* -------------------------------------------------------------------------
   5. Cabeçalho
   ---------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: transparent;
	transition: background-color var(--speed) var(--ease),
	            border-color var(--speed) var(--ease),
	            backdrop-filter var(--speed) var(--ease);
	border-bottom: 1px solid transparent;
}

.site-header.is-stuck {
	background: rgba(8, 11, 18, 0.82);
	backdrop-filter: blur(14px);
	border-bottom-color: var(--line);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 78px;
}

.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand__logo { width: auto; height: 34px; }
.brand__logo--footer { height: 30px; }

.nav { display: flex; align-items: center; gap: 2rem; }

.nav__list {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav__list a {
	position: relative;
	color: var(--muted);
	font-size: 0.9375rem;
	font-weight: 500;
}

.nav__list a::after {
	content: "";
	position: absolute;
	left: 0; bottom: -6px;
	width: 100%; height: 2px;
	background: var(--brand);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--speed) var(--ease);
}

.nav__list a:hover { color: var(--text); }
.nav__list a:hover::after,
.nav__list .current-menu-item > a::after,
.nav__list .current_page_item > a::after { transform: scaleX(1); }

.nav__list .current-menu-item > a,
.nav__list .current_page_item > a { color: var(--text); }

/* Submenu */
.nav__list .sub-menu {
	position: absolute;
	top: calc(100% + 14px);
	left: 0;
	min-width: 210px;
	padding: 0.5rem;
	margin: 0;
	list-style: none;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: all var(--speed) var(--ease);
}
.nav__list > li { position: relative; }
.nav__list > li:hover > .sub-menu,
.nav__list > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__list .sub-menu a { display: block; padding: 0.5rem 0.75rem; border-radius: 10px; }
.nav__list .sub-menu a::after { display: none; }
.nav__list .sub-menu a:hover { background: rgba(255, 255, 255, 0.05); }

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px; height: 44px;
	padding: 0 10px;
	background: transparent;
	border: 1px solid var(--line-strong);
	border-radius: 12px;
	cursor: pointer;
}

.nav-toggle__bar {
	display: block;
	height: 2px;
	background: var(--text);
	border-radius: 2px;
	transition: transform var(--speed) var(--ease), opacity var(--speed) var(--ease);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -------------------------------------------------------------------------
   6. Hero
   ---------------------------------------------------------------------- */

.hero {
	position: relative;
	isolation: isolate;
	/* Respiro superior enxuto de propósito: com a imagem à direita o texto
	   ficou mais alto, e os botões passavam da dobra em notebook 1366x768. */
	padding-block: clamp(3rem, 6vw, 5.5rem) clamp(4rem, 8vw, 7rem);
	overflow: hidden;
}

.hero__glow {
	position: absolute;
	inset: -30% -10% auto -10%;
	height: 720px;
	z-index: -2;
	background:
		radial-gradient(46% 52% at 24% 34%, rgba(96, 144, 240, 0.32), transparent 70%),
		radial-gradient(38% 46% at 74% 22%, rgba(139, 124, 246, 0.22), transparent 72%);
	filter: blur(12px);
}

.hero__grid {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(var(--line) 1px, transparent 1px),
		linear-gradient(90deg, var(--line) 1px, transparent 1px);
	background-size: 68px 68px;
	mask-image: radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 100%);
	-webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 100%);
	opacity: 0.5;
}

/* Imagem de fundo do hero.
   A imagem já é escura e está na paleta, então não leva overlay pesado: leva
   máscara radial que a concentra à direita, onde o texto (860px) não chega. */

.hero__media {
	position: absolute;
	inset: 0;
	z-index: -3;
	display: block;
	pointer-events: none;
}

.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 42%;
	opacity: 0.3;
	-webkit-mask-image: radial-gradient(70% 80% at 60% 44%, #000 10%, transparent 78%);
	mask-image: radial-gradient(70% 80% at 60% 44%, #000 10%, transparent 78%);
}

/* O glow e a grade faziam sozinhos o trabalho de fundo; com a imagem no ar
   os três competem, então os dois decorativos recuam. */
.hero--media .hero__glow { opacity: 0.5; }
.hero--media .hero__grid { opacity: 0.25; }

/* A partir de 1024px a imagem sai de trás do texto e passa a ocupar a direita:
   o texto encolhe para 600px e sobra faixa livre para ela respirar. */
@media (min-width: 1024px) {
	/* Com o bloco alinhado à esquerda sobram ~160px que antes se perdiam na
	   centralização, então a linha de texto pode ser mais larga sem chegar
	   perto da imagem — e o título cabe em 2 linhas em vez de 3. */
	.hero--media .hero__inner > * { max-width: 720px; }

	/* O parágrafo mantém os 640px de conforto de leitura: a regra acima é mais
	   específica que .hero__lead e sem isto ele esticaria até encostar no
	   ponto luminoso da imagem. */
	.hero--media .hero__inner > .hero__lead { max-width: 640px; }

	.hero__media {
		left: 51%;
		right: -4%;
	}

	.hero__media img {
		opacity: 0.9;
		object-position: 68% 45%;
		-webkit-mask-image: radial-gradient(72% 82% at 62% 46%, #000 14%, rgba(0, 0, 0, 0.55) 54%, transparent 84%);
		mask-image: radial-gradient(72% 82% at 62% 46%, #000 14%, rgba(0, 0, 0, 0.55) 54%, transparent 84%);
	}
}

/* hero__inner É o .container (mesma div). Limitar o max-width DELE encolhia o
   container e o recentralizava, empurrando o texto do hero ~160px à direita da
   coluna em que todas as outras seções começam. A largura de leitura passa a
   ser imposta aos filhos, e a borda esquerda volta a alinhar com o resto. */
.hero__inner > * { max-width: 860px; }

.hero__title {
	font-size: var(--fs-h1);
	margin-bottom: 0.45em;
}

.hero__lead {
	max-width: 640px;
	font-size: var(--fs-lead);
	color: var(--muted);
	margin-bottom: 2.25rem;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	margin-bottom: 1.5rem;
}

.hero__proof {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--muted);
	font-size: var(--fs-small);
}

.hero__proof li { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero__proof .icon { color: var(--brand); flex-shrink: 0; }

/* -------------------------------------------------------------------------
   7. Cards
   ---------------------------------------------------------------------- */

.cards { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(1.5rem, 3vw, 2rem);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	transition: transform var(--speed) var(--ease),
	            border-color var(--speed) var(--ease),
	            background-color var(--speed) var(--ease);
}

.card:hover {
	transform: translateY(-4px);
	border-color: var(--line-strong);
	background: var(--surface-2);
}

.card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px; height: 52px;
	margin-bottom: 1.25rem;
	border-radius: 14px;
	background: rgba(96, 144, 240, 0.12);
	border: 1px solid rgba(96, 144, 240, 0.28);
	color: var(--brand);
}

.card__title { font-size: var(--fs-h3); margin-bottom: 0.5em; }
.card__title a { color: var(--text); }
.card__title a:hover { color: var(--brand); }

.card__text { color: var(--muted); margin-bottom: 1.25rem; }

.card__list {
	margin: auto 0 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--line);
	list-style: none;
	color: var(--muted);
	font-size: var(--fs-small);
}

.card__list li { position: relative; padding-left: 1.4rem; margin-bottom: 0.5rem; }
.card__list li:last-child { margin-bottom: 0; }

.card__list li::before {
	content: "";
	position: absolute;
	left: 0; top: 0.65em;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--brand);
}

/* Card de post */
.card--post { padding: 0; overflow: hidden; }

.card__media {
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--surface-2);
	overflow: hidden;
}

.card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--ease);
}

.card--post:hover .card__media img { transform: scale(1.04); }

.card__media-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%; height: 100%;
	color: var(--brand);
	background:
		radial-gradient(60% 70% at 50% 40%, rgba(96, 144, 240, 0.18), transparent 70%),
		var(--surface-2);
}

.card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: clamp(1.35rem, 2.5vw, 1.75rem);
}

.card__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
	color: var(--muted-dim);
	font-size: 0.875rem;
}

.card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: auto;
	font-family: var(--font-head);
	font-size: 0.9375rem;
	font-weight: 600;
}

.card__link .icon { transition: transform var(--speed) var(--ease); }
.card__link:hover .icon { transform: translateX(3px); }

/* -------------------------------------------------------------------------
   8. Split + passos
   ---------------------------------------------------------------------- */

/* minmax(0, 1fr), e não 1fr: o piso de uma coluna de grid é o min-content
   do que ela contém, então uma faixa de rolagem horizontal dentro dela
   empurrava a coluna para a largura somada de todos os itens e espremia o
   texto ao lado. Com o piso em 0 a coluna manda na faixa, não o contrário. */
.split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

.split__text .btn { margin-top: 1rem; }

.steps { margin: 0; padding: 0; list-style: none; counter-reset: steps; }

.steps__item {
	display: flex;
	gap: 1.25rem;
	padding: 1.5rem 0;
	border-top: 1px solid var(--line);
}

.steps__item:first-child { border-top: 0; padding-top: 0; }

.steps__num {
	flex-shrink: 0;
	font-family: var(--font-head);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--brand);
	padding-top: 0.15rem;
}

.steps__title { font-size: 1.15rem; margin-bottom: 0.35em; }
.steps__item p { color: var(--muted); margin: 0; font-size: var(--fs-small); }

/* -------------------------------------------------------------------------
   9. Números
   ---------------------------------------------------------------------- */

.stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.stats__item {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--bg);
	text-align: center;
}

.stats__num {
	font-family: var(--font-head);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 700;
	background: var(--gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.stats__label { color: var(--muted); font-size: var(--fs-small); }

/* -------------------------------------------------------------------------
   10. CTA
   ---------------------------------------------------------------------- */

/* O topo era 0, então a caixa encostava na seção de cima — e como a seção
   anterior costuma ser .section--alt, de cor diferente, a emenda ficava
   visível. Vale para todas as páginas: o helper do CTA é o mesmo.

   Os dois lados são iguais de propósito. A caixa fica numa faixa própria
   entre a seção anterior e o rodapé, e as duas fronteiras são visíveis
   (mudança de cor de fundo, e borda no rodapé): com valores diferentes ela
   aparecia empurrada para cima. O rodapé ainda soma o padding dele depois
   desta faixa, então 4rem aqui não deixa nada apertado. */
.cta { padding-block: clamp(2.5rem, 5vw, 4rem); }

.cta__box {
	position: relative;
	overflow: hidden;
	padding: clamp(2.5rem, 6vw, 4.5rem);
	text-align: center;
	border: 1px solid rgba(96, 144, 240, 0.28);
	border-radius: var(--radius-lg);
	background:
		radial-gradient(80% 140% at 50% 0%, rgba(96, 144, 240, 0.18), transparent 65%),
		var(--surface);
}

.cta__title { font-size: var(--fs-h2); margin-bottom: 0.4em; }

.cta__text {
	max-width: 560px;
	margin: 0 auto 2rem;
	color: var(--muted);
	font-size: var(--fs-lead);
}

/* -------------------------------------------------------------------------
   11. Cabeçalho de página interna
   ---------------------------------------------------------------------- */

.page-hero {
	position: relative;
	isolation: isolate;
	padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2rem, 4vw, 3rem);
	overflow: hidden;
}

.page-hero__glow {
	position: absolute;
	inset: -40% 20% auto -10%;
	height: 520px;
	z-index: -1;
	background: radial-gradient(45% 55% at 30% 40%, rgba(96, 144, 240, 0.22), transparent 70%);
	filter: blur(10px);
}

/* Imagem de fundo do topo das páginas internas -------------------------
   Diferente da home: lá a imagem vai para a metade direita, aqui ela ocupa
   a faixa inteira. A faixa é baixa e larga (2 a 3:1 contra 1,83:1 da
   imagem), então recortá-la ao meio destruiria composições horizontais —
   uma fita que atravessa o quadro, fios que se desembaraçam da esquerda
   para a direita. Cobrindo a faixa toda, o corte é de topo e base e a
   leitura horizontal sobrevive. */

.page-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	display: block;
	pointer-events: none;
}

.page-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% 50%;
	opacity: 0.32;
	-webkit-mask-image: radial-gradient(78% 105% at 66% 48%, #000 10%, rgba(0, 0, 0, 0.55) 56%, transparent 88%);
	mask-image: radial-gradient(78% 105% at 66% 48%, #000 10%, rgba(0, 0, 0, 0.55) 56%, transparent 88%);
}

/* Véu escuro por cima, para o texto não competir com o miolo luminoso. No
   celular ele é vertical, porque ali o texto ocupa a largura toda; no
   desktop vira horizontal, protegendo só a coluna da esquerda. */
.page-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 11, 18, 0.72) 0%, rgba(8, 11, 18, 0.45) 45%, rgba(8, 11, 18, 0.7) 100%);
}

/* O brilho é azul fixo e fica bem atrás do título. Sob uma imagem âmbar ou
   coral ele suja a cor, então sai de cena quando existe imagem. */
.page-hero--media .page-hero__glow { opacity: 0; }

/* A partir de 1024px a imagem sai de trás do texto e ocupa a direita, como
   na home. Não é só estética: aqui ela cabe inteira na largura da faixa, e
   por isso 'object-position' horizontal não desloca nada — mover o quadro é
   a única forma de tirar o miolo luminoso de debaixo do parágrafo. E a área
   que sobra à direita tem quase exatamente a proporção do arquivo (~1,85:1
   contra 1,83:1), então a composição aparece inteira, sem corte. */
@media (min-width: 1024px) {
	/* A caixa tem a proporção do arquivo e fica centrada na vertical, em vez
	   de esticar até as bordas da faixa. Sem isso, numa página de manchete
	   longa a faixa passa de 700px, o 'cover' passa a escalar pela altura e a
	   imagem cresce para os lados até invadir o parágrafo. Com a proporção
	   travada ela tem sempre o mesmo tamanho, seja a faixa alta ou baixa. */
	.page-hero__media {
		left: auto;
		right: -5%;
		top: 50%;
		bottom: auto;
		width: min(58%, 760px);
		aspect-ratio: 1200 / 654;
		transform: translateY(-50%);
	}

	/* A faixa precisa caber a caixa da imagem. Sem isto, num topo de texto
	   curto — Blog, FAQ — a faixa fica mais baixa que a imagem e o
	   'overflow: hidden' a corta em seco antes de a máscara desbotar: o
	   corte reto reaparece no topo e na base. */
	.page-hero--media { min-height: 470px; }

	/* Sem isto o título ocupa até 74% da largura e a imagem não tem para
	   onde ir: qualquer posição dela cai por cima do texto. É o mesmo ajuste
	   que a home faz quando entra imagem no hero. A fila de botões fica de
	   fora: em 640px ela quebrava em duas linhas. */
	.page-hero--media .container > * { max-width: 640px; }
	.page-hero--media .container > .hero__actions { max-width: 760px; }

	/* 'screen' resolve a emenda das bordas. O fundo destes arquivos é preto
	   quase puro (1,1,4) — mais escuro que o #080B12 do site —, então a
	   moldura aparecia como um retângulo mais escuro que a página. Somando
	   só os pontos claros, o preto do arquivo desaparece no fundo e não
	   sobra borda para dissolver. É a mesma receita da textura da home, e
	   aqui ela funciona porque o preto é preto de verdade: no mockup do app
	   o fundo era #111 e o truque falhou. */
	.page-hero__media img {
		opacity: 1;
		mix-blend-mode: screen;
		object-position: 50% 50%;
		/* O raio vertical é 46% da altura, não mais que isso: em
		   radial-gradient o raio é porcentagem da dimensão inteira, então
		   qualquer valor acima de 50% termina fora da caixa e a imagem é
		   cortada em seco na base — foi o que aconteceu com 96%. Abaixo de
		   50% o desbotamento termina dentro do quadro. */
		/* Duas máscaras cruzadas: a radial dá a forma, e a linear garante que
		   topo e base cheguem a zero. A radial sozinha não bastava nas
		   composições que preenchem o quadro todo — a do blog, por exemplo,
		   tem folhas claras encostando na borda e o corte aparecia. */
		-webkit-mask-image:
			radial-gradient(72% 48% at 52% 50%, #000 20%, rgba(0, 0, 0, 0.72) 58%, transparent 98%),
			linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
		mask-image:
			radial-gradient(72% 48% at 52% 50%, #000 20%, rgba(0, 0, 0, 0.72) 58%, transparent 98%),
			linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
		-webkit-mask-composite: source-in;
		mask-composite: intersect;
	}

	/* Fora de trás do texto, o véu só precisa apagar a emenda da esquerda. */
	.page-hero__media::after {
		background: linear-gradient(90deg, var(--bg) 0%, rgba(8, 11, 18, 0.55) 14%, transparent 42%);
	}

	/* Variante grande: a caixa deixa de ter a proporção do arquivo e passa a
	   ocupar a faixa inteira, sangrando um pouco acima e abaixo dela e
	   avançando para a esquerda por baixo do texto. Serve para composição em
	   que o assunto é pequeno no quadro e o resto é cenário — a atendente do
	   Contato ocupa um terço da largura do arquivo.

	   O corte é de propósito: com a caixa mais alta que a faixa, o
	   `overflow: hidden` do .page-hero corta a imagem antes de a máscara
	   desbotar. Aqui isso não aparece porque as bordas que ficam de fora são
	   as áreas quase pretas do arquivo, e o que se perde é cenário. Em imagem
	   com detalhe claro encostando na borda, o corte reto reapareceria — foi o
	   que aconteceu no topo do Blog, e por isso esta variante é opcional. */
	.page-hero--media-xl .page-hero__media {
		top: -7%;
		bottom: -7%;
		right: -8%;
		width: min(76%, 1000px);
		aspect-ratio: auto;
		transform: none;
	}

	/* Esta variante NÃO mexe na altura da faixa, de propósito. Um `min-height`
	   maior aqui empurraria a borda de baixo do topo quando o texto fosse
	   curto, e o que se lê como resultado é a distância entre o hero e a seção
	   seguinte mudando — o Rogério pediu explicitamente que só a imagem
	   crescesse. Como a caixa é medida em porcentagem da faixa (o par
	   top/bottom acima), ela cresce junto com a altura que o texto já produz,
	   sem precisar de piso próprio. */

	/* Fotografia não aceita o mesmo tratamento do render. Nas fotos as
	   sombras ficam por volta de (2,9,16) — quase o #080B12 da página, mas
	   não preto puro —, e o 'screen' soma as duas coisas: o fundo da foto
	   fica mais claro que o da página e reaparece como retângulo. Sem o
	   blend, a foto se apoia só na máscara, que já leva as bordas a zero. */
	.page-hero--foto .page-hero__media img {
		mix-blend-mode: normal;
		opacity: 0.92;
	}
}

.page-hero__title { font-size: var(--fs-h1); max-width: 900px; }

.page-hero__lead {
	max-width: 640px;
	color: var(--muted);
	font-size: var(--fs-lead);
}

.page-hero__search { max-width: 460px; margin-top: 1.5rem; }

.single__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	color: var(--muted-dim);
	font-size: var(--fs-small);
	margin: 0;
}

.featured {
	margin: 0 0 clamp(1rem, 3vw, 2rem);
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--line);
}

.featured img { width: 100%; }

.featured figcaption {
	padding: 0.75rem 1rem;
	color: var(--muted-dim);
	font-size: 0.875rem;
	background: var(--surface);
}

/* -------------------------------------------------------------------------
   12. Conteúdo editorial (Gutenberg)
   ---------------------------------------------------------------------- */

.prose {
	max-width: 760px;
	font-size: 1.09375rem;
}

.prose > * { margin-inline: auto; }

.prose h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); margin-top: 2em; }
.prose h3 { font-size: var(--fs-h3); margin-top: 1.75em; }
.prose h2:first-child,
.prose h3:first-child { margin-top: 0; }

.prose ul, .prose ol { padding-left: 1.35em; }
.prose li { margin-bottom: 0.5em; }

.prose img,
.prose figure { border-radius: var(--radius); }
.prose figure { margin: 2rem 0; }

.prose figcaption {
	margin-top: 0.6rem;
	color: var(--muted-dim);
	font-size: 0.875rem;
	text-align: center;
}

.prose blockquote {
	margin: 2rem 0;
	padding: 0.5rem 0 0.5rem 1.5rem;
	border-left: 3px solid var(--brand);
	color: var(--text);
	font-size: 1.15rem;
}

.prose code {
	padding: 0.15em 0.45em;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: 6px;
	font-size: 0.9em;
}

.prose pre {
	padding: 1.25rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow-x: auto;
}

.prose pre code { padding: 0; background: none; border: 0; }

.prose table { width: 100%; border-collapse: collapse; margin: 2rem 0; }
.prose th, .prose td { padding: 0.75rem; border: 1px solid var(--line); text-align: left; }
.prose th { background: var(--surface); font-family: var(--font-head); }

.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

.prose .alignwide { max-width: 1000px; }
.prose .alignfull { max-width: none; width: 100%; }

/* O CSS do editor de blocos é retirado da página (functions.php), então o
   bloco de botão chegaria sem estilo nenhum. Estas regras o vestem com o
   mesmo botão do resto do site — é o bloco certo para a chamada dentro de um
   artigo, e sem isto ninguém o usaria. */
.prose .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 2rem 0;
	padding: 0;
	list-style: none;
}

.prose .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.9rem 1.6rem;
	background: var(--brand);
	border: 1px solid var(--brand);
	border-radius: var(--radius-pill);
	color: var(--on-brand);
	font-family: var(--font-head);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background var(--speed) var(--ease), transform var(--speed) var(--ease);
}

.prose .wp-block-button__link:hover {
	background: var(--brand-hover);
	border-color: var(--brand-hover);
	transform: translateY(-2px);
}

.prose .is-style-outline .wp-block-button__link,
.prose .wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	border-color: var(--line);
	color: var(--text);
}

.prose .is-style-outline .wp-block-button__link:hover { border-color: var(--brand); background: transparent; }

/* -------------------------------------------------------------------------
   13. Blog: índice, autor, tags, navegação, paginação, comentários, busca
   ---------------------------------------------------------------------- */

/* A coluna de leitura tem 760px dentro de um container de 1180px. A faixa
   que sobrava à direita agora recebe o índice, em vez de uma sidebar de
   widgets: ali só entra o que ajuda a ler o artigo aberto. */
.artigo {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
}

@media (min-width: 1080px) {
	.artigo {
		grid-template-columns: minmax(0, 760px) minmax(0, 1fr);
		align-items: start;
	}

	/* O índice vem antes no HTML, para o celular; no desktop ele volta para
	   a direita sem mexer na ordem de leitura nem na de tabulação. */
	.artigo .prose  { grid-column: 1; grid-row: 1; }
	.artigo .indice { grid-column: 2; grid-row: 1; }
}

/* O rodapé do post acompanha a coluna de leitura, que não é mais centrada. */
.single .tags,
.single .post-nav,
.single .autor,
.single .comments { margin-inline: 0; }

/* Sem isso o cabeçalho fixo cobre o subtítulo que o índice acabou de chamar. */
.prose h2,
.prose h3 { scroll-margin-top: 100px; }

.indice { max-width: 760px; font-size: var(--fs-small); }

.indice__box {
	padding: 1.1rem 1.25rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.indice__titulo {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	color: var(--text);
	font-family: var(--font-head);
	font-weight: 600;
	list-style: none;
}

.indice__titulo::-webkit-details-marker { display: none; }
.indice__titulo svg { flex: none; color: var(--brand); }

/* Seta desenhada aqui: a nativa do <details> muda de forma a cada navegador. */
.indice__titulo::after {
	content: "";
	width: 8px;
	height: 8px;
	margin-left: auto;
	border-right: 2px solid var(--muted-dim);
	border-bottom: 2px solid var(--muted-dim);
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--speed) var(--ease);
}

.indice__box[open] .indice__titulo::after { transform: rotate(-135deg) translateY(-2px); }

.indice__lista {
	margin: 0.9rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: mv-indice;
	border-left: 1px solid var(--line);
}

.indice__lista li { counter-increment: mv-indice; }

.indice__lista a {
	display: block;
	margin-left: -1px;
	padding: 0.4rem 0 0.4rem 0.85rem;
	border-left: 2px solid transparent;
	color: var(--muted);
	line-height: 1.45;
	transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.indice__lista a::before {
	content: counter(mv-indice) ". ";
	color: var(--muted-dim);
}

.indice__lista a:hover { color: var(--text); }

.indice__lista a.is-on {
	border-left-color: var(--brand);
	color: var(--text);
}

.indice__lista a.is-on::before { color: var(--brand); }

@media (min-width: 1080px) {
	.indice { position: sticky; top: 96px; }

	/* Artigo com muitos subtítulos não pode transbordar a janela: o índice
	   rola dentro de si mesmo em vez de esticar a coluna. */
	.indice__lista {
		max-height: calc(100vh - 220px);
		overflow-y: auto;
	}
}

/* Caixa do autor: assinatura declarada, que no blog é sinal de confiança
   para quem lê e para o buscador. A inicial substitui o Gravatar para não
   pedir uma imagem a um domínio de terceiro em cada visita. */
.autor {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	max-width: 760px;
	margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

/* A foto ocupa exatamente o lugar da inicial, para a caixa não mudar de
   forma conforme o autor tenha ou não escolhido uma. */
.autor__foto {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: 1px solid var(--line);
	object-fit: cover;
}

.autor__avatar {
	display: grid;
	place-items: center;
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--gradient);
	color: var(--on-brand);
	font-family: var(--font-head);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1;
}

.autor__label {
	margin: 0;
	color: var(--brand);
	font-family: var(--font-head);
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.autor__nome {
	margin: 0.25rem 0 0.5rem;
	font-size: var(--fs-h3);
}

.autor__bio { margin: 0; color: var(--muted); }

/* Duas linhas: as redes na de cima, à esquerda; o link de ler mais na de
   baixo, à direita. O site pessoal, quando existe, ocupa a esquerda da
   segunda linha — é o `margin-right: auto` que empurra o resto para a direita
   sem precisar de uma regra só para o caso de ele não existir. */
.autor__redes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	/* Alinha o traço do ícone com o texto acima: o clique tem folga em volta
	   do desenho, e sem esta compensação a fileira nasce indentada. */
	margin: 0.85rem 0 0 -0.2rem;
}

.autor__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem 1.5rem;
	margin: 0.35rem 0 0;
	font-size: var(--fs-small);
}

.autor__site { margin-right: auto; }

.autor__links a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--brand);
}

.autor__links a:hover { color: var(--brand-hover); }

/* As redes entram como ícone, e não como nome: três palavras seguidas em azul
   competiam com o link que interessa, que é o de ler mais do autor.

   O ícone é o próprio botão — sem moldura em volta. A borda permanente somava
   três circunferências vazias à caixa, e o desenho lá dentro ficava pequeno
   demais para se reconhecer a rede. O círculo agora só existe no ponteiro: o
   ícone escurece e uma bolha clara acende atrás dele. */
.autor__rede {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--muted);
	transition: color var(--speed) var(--ease);
}

/* A bolha é pseudo-elemento, e não `background` do link: assim ela cresce a
   partir do centro sem arrastar o ícone com ela. Fica 6px maior que o desenho
   de 34px, o mínimo para se ler como círculo atrás dele em vez de recorte. */
.autor__rede::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--text);
	opacity: 0;
	transform: scale(0.6);
	transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease);
}

.autor__rede .icon {
	position: relative;
	z-index: 1;
}

.autor__rede:hover,
.autor__rede:focus-visible,
.autor__rede:active { color: var(--bg); }

.autor__rede:hover::before,
.autor__rede:focus-visible::before,
.autor__rede:active::before {
	opacity: 1;
	transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.autor__rede::before { transition: none; transform: scale(1); }
}

@media (max-width: 560px) {
	.autor { flex-direction: column; }
}

.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	max-width: 760px;
	margin: 2.5rem auto 0;
}

.tags a {
	padding: 0.35rem 0.85rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	color: var(--muted);
	font-size: 0.875rem;
}

.tags a:hover { border-color: var(--brand); color: var(--text); }

.post-nav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1rem;
	max-width: 760px;
	margin: 3rem auto 0;
}

.post-nav__link {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.25rem 1.5rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color var(--speed) var(--ease), transform var(--speed) var(--ease);
}

.post-nav__link:hover { border-color: var(--brand); transform: translateY(-2px); }
.post-nav__link--next { text-align: right; }

.post-nav__label { color: var(--muted-dim); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em; }
.post-nav__title { color: var(--text); font-family: var(--font-head); font-weight: 600; }

.pagination { margin-top: clamp(2.5rem, 5vw, 4rem); }

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px; height: 44px;
	padding: 0 0.75rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	color: var(--muted);
	font-family: var(--font-head);
	font-size: 0.9375rem;
}

.pagination .page-numbers:hover { border-color: var(--brand); color: var(--text); }

.pagination .page-numbers.current {
	background: var(--brand);
	border-color: var(--brand);
	color: var(--on-brand);
	font-weight: 700;
}

.empty {
	max-width: 560px;
	margin-inline: auto;
	padding: clamp(2rem, 5vw, 3.5rem);
	text-align: center;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.empty__title { font-size: var(--fs-h3); }
.empty__text { color: var(--muted); }
.empty__form { margin-block: 1.5rem; }

.searchform { display: flex; gap: 0.5rem; }

.searchform__input {
	flex: 1;
	min-width: 0;
	padding: 0.75rem 1.1rem;
	background: var(--bg-soft);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-pill);
	color: var(--text);
}

.searchform__input::placeholder { color: var(--muted-dim); }
.searchform__input:focus { border-color: var(--brand); outline: none; }

.comments {
	max-width: 760px;
	margin: 4rem auto 0;
	padding-top: 3rem;
	border-top: 1px solid var(--line);
}

.comments__title { font-size: var(--fs-h3); }
.comments__list { list-style: none; padding: 0; margin: 0 0 2.5rem; }
.comments__list .children { list-style: none; padding-left: clamp(1rem, 4vw, 2.5rem); }

.comments__list .comment-body {
	padding: 1.5rem 0;
	border-top: 1px solid var(--line);
}

.comments__list .comment-author { display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-head); }
.comments__list .comment-author img { border-radius: 50%; }
.comments__list .comment-meta { color: var(--muted-dim); font-size: 0.875rem; margin-bottom: 0.75rem; }

.comment-form { display: grid; gap: 1rem; }
.comment-form label { display: block; margin-bottom: 0.35rem; color: var(--muted); font-size: var(--fs-small); }

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 0.8rem 1.1rem;
	background: var(--bg-soft);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	color: var(--text);
}

.comment-form textarea { min-height: 150px; resize: vertical; }

.comment-form input:focus,
.comment-form textarea:focus { border-color: var(--brand); outline: none; }

.comment-form .form-submit { margin: 0; }

/* -------------------------------------------------------------------------
   14. Rodapé
   ---------------------------------------------------------------------- */

.site-footer {
	padding-block: clamp(3rem, 6vw, 5rem) 2rem;
	background: var(--bg-soft);
	border-top: 1px solid var(--line);
}

.site-footer__top {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	padding-bottom: 3rem;
}

.site-footer__pitch {
	max-width: 380px;
	margin-top: 1.25rem;
	color: var(--muted);
	font-size: var(--fs-small);
}

.site-footer__title {
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted-dim);
	margin-bottom: 1.25rem;
}

.site-footer__list { list-style: none; margin: 0; padding: 0; }
.site-footer__list li { margin-bottom: 0.7rem; }

.site-footer__list a,
.site-footer__list span {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--muted);
	font-size: var(--fs-small);
}

.site-footer__list a:hover { color: var(--brand); }
.site-footer__list .icon { color: var(--brand); flex-shrink: 0; }

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.75rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--line);
	color: var(--muted-dim);
	font-size: 0.875rem;
}

.site-footer__bottom p { margin: 0; }

/* -------------------------------------------------------------------------
   14b. Componentes das páginas institucionais
   ---------------------------------------------------------------------- */

.container--narrow { max-width: 860px; }

/* Âncoras (#investimento, #formulario, grupos do FAQ) param abaixo do
   cabeçalho fixo em vez de ficarem escondidas atrás dele. */
.section[id],
[id]:target { scroll-margin-top: 96px; }

.section__title--sm {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
}

.section__title--sm .icon { color: var(--brand); flex-shrink: 0; }

.section__foot {
	margin-top: clamp(2rem, 4vw, 3rem);
	text-align: center;
	color: var(--muted);
	font-size: var(--fs-small);
}

.section__foot a { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 500; }

.lead-out {
	margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
	padding-left: 1.15rem;
	border-left: 2px solid var(--brand);
	font-size: var(--fs-lead);
	color: var(--text);
}

/* Listas -------------------------------------------------------------- */

.checks,
.pains,
.badges,
.info-list { list-style: none; margin: 0; padding: 0; }

.checks li {
	position: relative;
	margin-bottom: 0.85rem;
	padding-left: 2rem;
	color: var(--muted);
}

.checks li::before {
	content: "";
	position: absolute;
	left: 0; top: 0.3em;
	width: 19px; height: 19px;
	border-radius: 50%;
	background: rgba(96, 144, 240, 0.12);
	border: 1px solid rgba(96, 144, 240, 0.38);
}

.checks li::after {
	content: "";
	position: absolute;
	left: 5.5px; top: 0.6em;
	width: 8px; height: 4px;
	border-left: 1.7px solid var(--brand);
	border-bottom: 1.7px solid var(--brand);
	transform: rotate(-45deg);
}

.checks--lg li { color: var(--text); }

.checks--inline {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 0 1.5rem;
}

.pains li {
	position: relative;
	margin-bottom: 0.9rem;
	padding-left: 2rem;
	color: var(--muted);
}

.pains li::before {
	content: "";
	position: absolute;
	left: 0; top: 0.85em;
	width: 12px; height: 2px;
	border-radius: 2px;
	background: var(--accent);
	opacity: 0.7;
}

.badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem 1.75rem;
	margin-top: clamp(2rem, 4vw, 3rem);
	color: var(--muted);
	font-size: var(--fs-small);
}

.badges li { display: inline-flex; align-items: center; gap: 0.5rem; }
.badges .icon { color: var(--brand); flex-shrink: 0; }

.info-list li {
	display: flex;
	gap: 0.85rem;
	padding: 1rem 0;
	border-top: 1px solid var(--line);
}

.info-list li:first-child { border-top: 0; padding-top: 0; }
.info-list .icon { color: var(--brand); flex-shrink: 0; margin-top: 0.2rem; }

.info-list span {
	display: flex;
	flex-direction: column;
	color: var(--muted);
	font-size: var(--fs-small);
}

.info-list strong {
	color: var(--text);
	font-family: var(--font-head);
	font-weight: 600;
}

.info-list__linha {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	max-width: 320px;
	padding-top: 0.15rem;
}

.info-list__linha em { color: var(--text); font-style: normal; }

.numbered {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.numbered__item {
	display: flex;
	gap: 1.1rem;
	padding: 1.5rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.numbered__num {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: rgba(96, 144, 240, 0.12);
	border: 1px solid rgba(96, 144, 240, 0.3);
	color: var(--brand);
	font-family: var(--font-head);
	font-size: 0.9rem;
	font-weight: 700;
}

.numbered__title { font-size: 1.05rem; margin-bottom: 0.3em; }
.numbered__item p { margin: 0; color: var(--muted); font-size: var(--fs-small); }

/* Moldura de imagem pendente ------------------------------------------ */

.media { margin: 0; }

.media--empty {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: var(--ratio, 4 / 3);
	padding: 1.25rem;
	text-align: center;
	border: 1px dashed rgba(255, 255, 255, 0.16);
	border-radius: var(--radius-lg);
	background:
		linear-gradient(160deg, rgba(96, 144, 240, 0.07), rgba(139, 124, 246, 0.05)),
		var(--surface);
}

.media__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	max-width: 280px;
}

.media--empty .icon { color: var(--brand); opacity: 0.65; }

.media__label {
	font-family: var(--font-head);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--text);
}

.media__hint { font-size: 0.8125rem; color: var(--muted-dim); }

.media--phone { max-width: 300px; margin-inline: auto; border-radius: 30px; }
.media--round { max-width: 190px; border-radius: 50%; }

/* Hero das páginas de app --------------------------------------------- */

.hero__note { margin: 0; color: var(--muted-dim); font-size: var(--fs-small); }

.hero--app__inner {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

/* As manchetes internas são longas; no tamanho da home elas viram um muro. */
.page-hero__title,
.hero--app .hero__title { font-size: clamp(1.9rem, 1.25rem + 2.6vw, 3.1rem); }

.hero--app__media { width: 100%; justify-self: center; }

/* Mockup no hero das páginas de app -------------------------------------
   Mesmo arquivo que ilustra o card da home, e aqui ele repete o tratamento
   de lá: o painel escuro por trás.

   As alternativas foram testadas e falharam. Desbotar as bordas não resolve
   porque o render é mais escuro que a seção e a moldura reaparece sob o
   degradê; 'mix-blend-mode: screen' também não, porque o fundo do render não
   é preto puro e o retângulo volta, agora claro. O painel resolve os dois:
   dá ao render um fundo da mesma família que o dele, e o brilho radial no
   próprio painel assenta o aparelho. A máscara dissolve o reflexo na base. */

.hero-shot {
	position: relative;
	margin: 0;
	max-width: 330px;
	margin-inline: auto;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background:
		radial-gradient(64% 44% at 50% 36%, rgba(96, 144, 240, 0.20), transparent 72%),
		linear-gradient(180deg, #05070d, #090e18);
}

.hero-shot img {
	display: block;
	width: 100%;
	height: auto;
	-webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 99%);
	mask-image: linear-gradient(180deg, #000 80%, transparent 99%);
}

/* O seletor de perfil da home virou o bloco de abas (.abas) em
   2026-09-07. As regras .choices/.choice saíram junto: eram 67 linhas
   que ninguém mais usava e que viajavam em toda visita. */

/* Variações de card ---------------------------------------------------- */

.cards--1 { grid-template-columns: 1fr; }
.cards--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.card--sm { padding: clamp(1.35rem, 2.5vw, 1.75rem); }
.card--sm .card__icon { width: 44px; height: 44px; margin-bottom: 1rem; border-radius: 12px; }
.card--sm .card__title { font-size: 1.0625rem; }
.card--sm .card__text { font-size: var(--fs-small); margin-bottom: 0; }

.card--row {
	flex-direction: row;
	align-items: center;
	gap: 1rem;
	padding: 1.05rem 1.35rem;
}

.card--row .card__icon { width: 44px; height: 44px; margin: 0; border-radius: 12px; }
.card--row .card__title { margin: 0; font-size: 1rem; }

.card--app { padding: 0; overflow: hidden; }

.card--app .media--empty {
	border: 0;
	border-bottom: 1px dashed rgba(255, 255, 255, 0.14);
	border-radius: 0;
}

/* Card de app com mockup ------------------------------------------------
   O painel é preto liso e o mockup ocupa a altura inteira dele, encostando
   no topo e na base — decisão do Rogério em 2026-09-09.

   O que havia antes: painel azul-escuro com brilho radial, o aparelho a 44%
   da largura, afastado 1,5rem do topo e dissolvido na base por máscara. Era
   o tratamento de render solto sobre seção, e sobrava moldura por todo lado.
   Como os dois arquivos de mockup já têm fundo preto de verdade (canto
   amostrado em 0–2 de cada canal), preto liso no painel faz a emenda sumir:
   não existe mais borda entre a imagem e a caixa, e nada precisa de máscara.

   `object-fit: contain` e não `cover`: a caixa é mais larga em proporção que
   o arquivo, então `cover` encheria a caixa cortando o topo do aparelho e o
   reflexo da base — justamente as duas pontas que devem encostar. Com
   `contain` o mockup vai de ponta a ponta na vertical e o que sobra dos lados
   é preto sobre preto, invisível. */

/* Empilhado (celular), o painel ganha altura fixa: com proporção ele
   acompanhava a largura do card e cortava o aparelho na metade da tela. */
.card__shot {
	position: relative;
	margin: 0;
	overflow: hidden;
	height: 384px;
	background: #000;
}

.card__shot img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (min-width: 640px) {
	.card--app {
		display: grid;
		grid-template-columns: minmax(0, 245px) minmax(0, 1fr);
		align-items: stretch;
		min-height: 430px;
	}

	.card__shot {
		height: auto;
		border-right: 1px solid var(--line);
	}

	.card--app .card__body { justify-content: center; }
}

/* Cabeçalho de seção com imagem ao lado --------------------------------
   A seção "Por que a Mundo Virtual" era só título + 5 cards de texto: não
   havia fenda para imagem. O cabeçalho vira duas colunas e a ilustração
   ocupa a direita, sem disputar espaço com os cards. */

/* .split--head e .section__head--flush saíram em 2026-09-07: existiam só
   para o par texto + quadro da faixa "Por que a Mundo Virtual", que virou
   texto sobre imagem sangrada. Ninguém mais os usava. */

/* Imagem que sangra na faixa "Por que a Mundo Virtual" ------------------
   Reescrita em 2026-09-07. Antes era um quadro emoldurado dentro de uma
   coluna do grid; ficou pequeno e parecendo mais um cartão empilhado sobre
   a fileira de cartões. Agora ela sai do container, encosta na borda
   direita da janela e no topo da faixa, e desce por baixo dos cartões.

   Só dois lados desbotam: o esquerdo, onde a imagem encontra o texto, e o
   inferior, onde ela se dilui na faixa. Direita e topo terminam em corte
   reto de propósito — ali a imagem encosta na borda da tela e na emenda da
   seção, e um desbotamento naqueles lados só denunciaria que existe um
   retângulo. É a mesma lógica dos topos de página, com um lado a menos.

   Nada de 'mix-blend-mode: screen': em foto as sombras ficam perto de
   (2,9,16), quase o #080B12 da página mas não preto puro, e o 'screen'
   soma as duas coisas — o fundo clareia e o retângulo reaparece. */
.media-equipe {
	/* Empilhada, a imagem é o primeiro bloco da faixa e precisa anular o
	   respiro de topo da seção: sem a margem negativa sobra uma tira do
	   fundo azulado entre ela e o bloco de cima, que denuncia a emenda. O
	   valor é exatamente o padding, então ela encosta na borda da seção sem
	   invadir a anterior. */
	margin: calc( var(--section-y) * -1 ) 0 clamp(2rem, 5vw, 3rem);
	pointer-events: none;
}

.media-equipe img {
	display: block;
	width: 100%;
	height: auto;
	-webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}

/* No celular e no tablet a imagem é uma faixa cheia no topo da seção, sem
   recorte: a composição é quase quadrada e cabe inteira. Só do desktop para
   cima ela vira o plano de fundo da direita.

   O corte é 1024px, o mesmo do resto do tema, e não 900px: a 919px a coluna
   de texto já alcançava a imagem e a última linha da chamada caía sobre a
   mesa. O layout sangrado só compensa quando sobra largura para os dois. */
@media (min-width: 1024px) {
	.section--media {
		position: relative;
		/* Segura a imagem dentro da faixa: sem isto ela invadiria a seção
		   seguinte, onde não há fundo que a justifique. */
		overflow: hidden;
	}

	/* O conteúdo passa por cima. Os cartões têm fundo próprio, então o pé da
	   imagem some atrás deles e reaparece nas frestas — que é justamente o
	   efeito de a imagem "continuar" por baixo do conteúdo. */
	.section--media > .container {
		position: relative;
		z-index: 1;
	}

	.media-equipe {
		position: absolute;
		top: 0;
		right: 0;
		width: min(54%, 720px);
		/* Proporção da própria imagem, e não a altura da faixa. Esticar a
		   caixa até o rodapé da seção deixava o quadro muito mais alto que
		   a foto: o 'cover' então recortava as laterais e sobrava uma fatia
		   vertical de teto e mesa, sem as pessoas. Com a proporção casada,
		   a composição inteira aparece e o pé dela cai atrás dos cartões. */
		aspect-ratio: 900 / 811;
		margin: 0;
		z-index: 0;
	}

	.media-equipe img {
		height: 100%;
		object-fit: cover;
		-webkit-mask-image:
			linear-gradient(90deg, transparent 0%, #000 38%),
			linear-gradient(180deg, #000 55%, transparent 100%);
		mask-image:
			linear-gradient(90deg, transparent 0%, #000 38%),
			linear-gradient(180deg, #000 55%, transparent 100%);
		-webkit-mask-composite: source-in;
		mask-composite: intersect;
	}

	/* O texto para antes da imagem começar. Sem o limite, a linha de apoio
	   corria por baixo dela e ficava ilegível no encontro dos dois. O que
	   avança entra só na faixa desbotada da esquerda, onde não há desenho. */
	.section__head--media { max-width: 480px; }
}

/* Textura de fundo de seção --------------------------------------------
   Fica atrás dos números da prova social. Os blocos de número ficam
   translúcidos, senão a textura só apareceria nas bordas. */

.section--textura { position: relative; isolation: isolate; overflow: hidden; }

.section__textura {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

/* A textura é quase preta com a grade em azul fraco: baixar a opacidade
   apagaria tudo. Com "screen" só os pontos claros somam sobre o fundo, que
   é justamente a grade — o preto ao redor não interfere.

   Fica no tamanho original, centralizada. Esticar para cobrir a seção
   ampliava a grade e granulava o gradiente; e não faz falta, porque a
   própria imagem já vem com os cantos esmaecidos — por isso também não
   leva máscara. O max-width: none anula a regra global de img. */
.section__textura img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	max-width: none;
	transform: translate(-50%, -50%);
	opacity: 1;
	mix-blend-mode: screen;
}

.section--textura .stats { background: rgba(255, 255, 255, 0.1); }
.section--textura .stats__item { background: rgba(8, 11, 18, 0.45); }

/* Fundo do CTA final ----------------------------------------------------
   A imagem tem um núcleo branco no centro, que apagaria o texto. Em vez de
   um overlay chapado, um radial escuro forte no miolo preserva as linhas
   convergindo nas bordas e devolve contraste ao texto. */

.cta__box--media { background: #070b14; }

.cta__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.cta__box--media { isolation: isolate; }

.cta__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.55;
}

.cta__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(46% 56% at 50% 44%, rgba(7, 11, 20, 0.8), rgba(7, 11, 20, 0.42) 64%, transparent 88%),
		linear-gradient(180deg, rgba(7, 11, 20, 0.3), rgba(7, 11, 20, 0.58));
}

/* Card de serviço com faixa ilustrada ---------------------------------- */

.card--media { padding: 0; overflow: hidden; }

.card__banner {
	position: relative;
	margin: 0;
	aspect-ratio: 16 / 8;
	overflow: hidden;
	background: #05070d;
}

.card__banner img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--speed) var(--ease);
}

.card--media:hover .card__banner img { transform: scale(1.05); }

/* Dissolve a base da faixa na cor do card: sem isso a imagem vira um
   retângulo colado por cima, em vez de fazer parte do card. */
.card__banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 42%, rgba(8, 11, 18, 0.45) 72%, var(--surface) 100%);
	transition: background var(--speed) var(--ease);
}

.card--media:hover .card__banner::after {
	background: linear-gradient(180deg, transparent 42%, rgba(8, 11, 18, 0.45) 72%, var(--surface-2) 100%);
}

.card__title { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.card__title .icon { color: var(--brand); flex-shrink: 0; }

.card__meta { display: block; }
.card__meta strong { color: var(--text); }
.card--post .card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

.card__result {
	display: flex;
	gap: 0.6rem;
	margin: auto 0 0;
	padding-top: 1.15rem;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: var(--fs-small);
}

.card__result .icon { color: var(--brand); flex-shrink: 0; margin-top: 0.2rem; }
.card__result strong { color: var(--text); }

.card__tag {
	padding: 0.15rem 0.6rem;
	border-radius: var(--radius-pill);
	background: rgba(96, 144, 240, 0.14);
	border: 1px solid rgba(96, 144, 240, 0.3);
	color: var(--brand);
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.card--channel .card__link { margin-top: auto; }
.card--channel .card__meta { margin: 0.75rem 0 0; color: var(--muted-dim); font-size: 0.8125rem; }

/* Trilhas de parceria -------------------------------------------------- */

.tracks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.track {
	display: flex;
	flex-direction: column;
	padding: clamp(1.5rem, 3vw, 2rem);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.track--soft { background: transparent; border-style: dashed; }

.track__head { display: flex; gap: 1rem; margin-bottom: 1.35rem; }

.track__icon {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 48px; height: 48px;
	border-radius: 14px;
	background: rgba(96, 144, 240, 0.12);
	border: 1px solid rgba(96, 144, 240, 0.28);
	color: var(--brand);
}

.track__title { font-size: 1.15rem; margin-bottom: 0.35em; }
.track__who { margin: 0; color: var(--muted); font-size: var(--fs-small); }

.track__label {
	margin-bottom: 0.9rem;
	font-family: var(--font-head);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted-dim);
}

.track .checks li { font-size: var(--fs-small); margin-bottom: 0.6rem; }

.track__ours {
	margin: auto 0 0;
	padding-top: 1.15rem;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: var(--fs-small);
}

.track__ours strong { color: var(--text); }

.tracks--compact { grid-template-columns: 1fr; gap: 0.75rem; }
.tracks--compact .track { padding: 1.1rem 1.3rem; }
.tracks--compact .track__head { margin: 0; }
.tracks--compact .track__title { font-size: 1rem; }

/* Pacotes de investimento --------------------------------------------- */

.plans {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	align-items: start;
}

.plan {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(1.5rem, 3vw, 2rem);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.plan--featured {
	border-color: rgba(96, 144, 240, 0.45);
	background:
		radial-gradient(90% 60% at 50% 0%, rgba(96, 144, 240, 0.14), transparent 70%),
		var(--surface);
	box-shadow: var(--shadow);
}

.plan__tag {
	position: absolute;
	top: -0.8rem;
	left: clamp(1.5rem, 3vw, 2rem);
	padding: 0.25rem 0.8rem;
	border-radius: var(--radius-pill);
	background: var(--brand);
	color: var(--on-brand);
	font-family: var(--font-head);
	font-size: 0.75rem;
	font-weight: 600;
}

.plan__name { font-size: 1.3rem; margin-bottom: 0.35em; }
.plan__who { margin-bottom: 1.35rem; color: var(--muted); font-size: var(--fs-small); }

.plan__price {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin: 0 0 0.3rem;
	font-family: var(--font-head);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--text);
}

.plan__price--sub { font-size: 1rem; font-weight: 500; color: var(--muted); margin-bottom: 1.5rem; }

.plan__label {
	flex-shrink: 0;
	min-width: 4.4rem;
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted-dim);
}

.plan .checks { margin-top: auto; }
.plan .checks li { font-size: var(--fs-small); margin-bottom: 0.6rem; }

.plans__nota {
	margin: 1.75rem auto 0;
	max-width: 640px;
	text-align: center;
	color: var(--muted-dim);
	font-size: var(--fs-small);
}

/* Troca de audiência --------------------------------------------------- */

.switch {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
	padding: clamp(1.25rem, 3vw, 1.85rem);
	border: 1px dashed rgba(96, 144, 240, 0.35);
	border-radius: var(--radius-lg);
	background: linear-gradient(120deg, rgba(96, 144, 240, 0.08), rgba(139, 124, 246, 0.06));
}

/* Nas páginas dos apps a faixa é seguida do bloco de parceria dentro da
   mesma seção, e as duas molduras encostavam. Em Contato e Nossos Apps ela
   é o único bloco da seção, e ali a margem sobraria — daí o :not(). O valor
   é o mesmo que separa cabeçalho e conteúdo em toda seção do site. */
.switch:not(:last-child) { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.switch__badge {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 52px; height: 52px;
	border-radius: 50%;
	background: rgba(96, 144, 240, 0.14);
	border: 1px solid rgba(96, 144, 240, 0.3);
	color: var(--brand);
}

.switch__text { flex: 1 1 320px; }
.switch__title { font-size: 1.15rem; margin-bottom: 0.3em; }
.switch__text p { margin: 0; color: var(--muted); font-size: var(--fs-small); }

/* Depoimentos e citações ---------------------------------------------- */

.quotes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	align-items: stretch;
}

/* Card de depoimento ----------------------------------------------------
   O avatar é a inicial desenhada aqui, não a foto do Google: foto de perfil
   é imagem pessoal de conta de terceiro, servida de domínio fora do nosso
   controle. A inicial custa 0 KB e nenhuma requisição. */

.quote {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	margin: 0;
	padding: clamp(1.4rem, 2.6vw, 1.85rem);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.quote__text {
	flex: 1;
	margin: 0;
	color: var(--text);
	font-size: var(--fs-body);
	line-height: 1.6;
}

.quote__by {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--line);
}

.quote__avatar {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(96, 144, 240, 0.14);
	border: 1px solid rgba(96, 144, 240, 0.3);
	color: var(--brand);
	font-family: var(--font-head);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1;
}

.quote__id { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }

.quote__name {
	font-family: var(--font-head);
	font-size: var(--fs-small);
	font-weight: 500;
	color: var(--text);
}

.quote__meta { font-size: 0.8125rem; color: var(--muted-dim); }

/* Estrelas de avaliação. O ícone é o mesmo traço do resto do site, aqui
   preenchido: estrela vazada não lê como nota. */

.stars { display: inline-flex; gap: 0.1rem; }
.stars__item { display: inline-flex; color: rgba(255, 255, 255, 0.16); }
.stars__item.is-on { color: var(--warn); }
.stars .icon { fill: currentColor; stroke: none; }

/* Nota agregada da loja, sob a grade de depoimentos. */

.play-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 0.65rem;
	margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
	color: var(--muted);
	font-size: var(--fs-small);
	text-align: center;
}

.play-note strong {
	font-family: var(--font-head);
	font-size: 1.05rem;
	color: var(--text);
}

.play-note a {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: var(--brand);
}

.play-note a:hover { color: var(--brand-hover); }

.pullquote {
	display: flex;
	gap: 1rem;
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	padding: clamp(1.5rem, 3vw, 2rem);
	background: var(--surface);
	border: 1px solid var(--line);
	border-left: 3px solid var(--brand);
	border-radius: var(--radius);
}

.pullquote .icon { color: var(--brand); flex-shrink: 0; }
.pullquote p { margin: 0; color: var(--text); font-size: var(--fs-lead); font-style: italic; }

.note-card {
	padding: clamp(1.5rem, 3vw, 2rem);
	border: 1px solid rgba(96, 144, 240, 0.3);
	border-radius: var(--radius-lg);
	background:
		radial-gradient(80% 100% at 50% 0%, rgba(96, 144, 240, 0.14), transparent 70%),
		var(--surface);
}

.note-card__title { font-size: 1.15rem; }
.note-card p { margin: 0; color: var(--muted); }

/* As regras .founder saíram em 2026-09-06 junto com o bloco do fundador
   no Sobre Nós: era o único lugar que as usava, e CSS morto viaja em toda
   visita. Para citação em destaque existe .pullquote. */

/* Números vazios ------------------------------------------------------- */

.stats--col { grid-template-columns: 1fr; }

.stats__item--empty .stats__num {
	background: none;
	-webkit-background-clip: initial;
	background-clip: initial;
	color: var(--muted-dim);
}

.stats__hint { color: var(--muted-dim); font-size: 0.75rem; font-style: italic; }

/* CTA ------------------------------------------------------------------ */

.cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.9rem;
}

.cta__alt { margin: 1.85rem 0 0; color: var(--muted); font-size: var(--fs-small); }
.cta__alt a { display: inline-flex; align-items: center; gap: 0.4rem; }

.cta__foot { margin: 1.25rem 0 0; text-align: center; color: var(--muted-dim); font-size: var(--fs-small); }

/* Perguntas frequentes ------------------------------------------------- */

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

.faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.15rem 0;
	list-style: none;
	cursor: pointer;
	font-family: var(--font-head);
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--text);
	transition: color var(--speed) var(--ease);
}

.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--brand); }
.faq__q .icon { flex-shrink: 0; color: var(--brand); transition: transform var(--speed) var(--ease); }
.faq__item[open] .faq__q .icon { transform: rotate(45deg); }

.faq__a { padding: 0 0 1.4rem; max-width: 72ch; color: var(--muted); }
.faq__a p { margin: 0 0 0.8em; }
.faq__a p:last-child { margin-bottom: 0; }
.faq__a ul { margin: 0 0 0.8em; padding-left: 1.2em; }

.faq-nav {
	position: sticky;
	top: 72px;
	z-index: 5;
	background: rgba(8, 11, 18, 0.9);
	backdrop-filter: blur(12px);
	border-block: 1px solid var(--line);
}

/* A lista rolava na horizontal e escondia metade dos filtros sem avisar.
   Três coisas resolvem: o chip passa a usar um rótulo curto em vez do
   título inteiro da seção, a lista quebra em duas linhas quando não cabe,
   e o chip da seção que está na tela fica aceso. */
.faq-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0.75rem 0;
	margin: 0;
	list-style: none;
}

.faq-nav__list a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.5rem 0.9rem;
	white-space: nowrap;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	color: var(--muted);
	font-size: 0.875rem;
	transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease), background-color var(--speed) var(--ease);
}

.faq-nav__list a:hover { border-color: var(--brand); color: var(--text); }

/* Quantas perguntas há em cada grupo. Entrou junto porque, com o rótulo
   curto, sobrou espaço — e o número responde antes do clique o que o
   visitante ia descobrir depois dele. */
.faq-nav__n {
	min-width: 1.25rem;
	padding: 0 0.35rem;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.07);
	color: var(--muted-dim);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

/* Seção que está na tela agora. */
.faq-nav__list a.is-on {
	border-color: var(--brand);
	background: rgba(96, 144, 240, 0.12);
	color: var(--text);
}

.faq-nav__list a.is-on .faq-nav__n { background: rgba(96, 144, 240, 0.28); color: var(--text); }

/* No celular a quebra em três linhas comeria a tela, e a barra é fixa:
   ali a lista volta a rolar, mas com o chip ativo trazido para a vista
   pelo JS e um desbotamento na borda mostrando que há mais. */
@media (max-width: 700px) {
	.faq-nav__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
		mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
	}

	.faq-nav__list::-webkit-scrollbar { display: none; }
}

/* Logado no admin, a barra do WordPress empurra o cabeçalho para baixo. */
.admin-bar .faq-nav { top: 104px; }

/* Formulários ---------------------------------------------------------- */

.form-wrap { max-width: 660px; scroll-margin-top: 100px; }

.form {
	display: grid;
	gap: 1.15rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.form__field { display: flex; flex-direction: column; gap: 0.45rem; margin: 0; }

.form__label {
	font-family: var(--font-head);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--text);
}

.form__req { color: var(--brand); }

.form__control {
	width: 100%;
	padding: 0.8rem 1rem;
	background: var(--bg);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	color: var(--text);
	font-size: var(--fs-small);
	transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.form__control::placeholder { color: var(--muted-dim); }

.form__control:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px rgba(96, 144, 240, 0.18);
}

textarea.form__control { min-height: 130px; resize: vertical; }

select.form__control {
	appearance: none;
	padding-right: 2.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2393a0b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
}

.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__submit { justify-self: start; margin-top: 0.4rem; }

.form__nota { margin: 0; color: var(--muted-dim); font-size: 0.8125rem; }

/* O aviso do envio mora abaixo da caixa. O scroll-margin generoso existe para
   a âncora #formulario-estado não colar a mensagem no alto da tela: com 240px
   o botão de enviar e os últimos campos continuam visíveis acima dela, que é
   o que dá sentido a uma mensagem de erro. */
.form__estado { scroll-margin-top: 240px; }

.form__msg {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 1.25rem 0 0;
	padding: 0.9rem 1.15rem;
	border-radius: var(--radius);
	font-size: var(--fs-small);
	color: var(--text);
	transition: opacity 0.4s var(--ease);
}

/* `display: flex` acima é regra de autor e vence o `[hidden] { display: none }`
   da folha do navegador: sem esta linha, o aviso de "enviando" — que nasce
   com o atributo hidden — ficava visível o tempo todo, empurrando a mensagem
   de verdade 54px para baixo. */
.form__msg[hidden] { display: none; }

.form__msg.is-gone { opacity: 0; }

/* Roda de espera: `currentColor` de propósito, porque a mesma classe aparece
   no botão (sobre o gradiente, traço escuro) e no aviso de "enviando" (sobre
   a superfície escura, traço claro). Com cor fixa, um dos dois desaparecia. */
.form__spinner {
	display: none;
	flex-shrink: 0;
	width: 1.05em;
	height: 1.05em;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: mv-spin 0.7s linear infinite;
}

@keyframes mv-spin {
	to { transform: rotate(360deg); }
}

/* Enquanto o POST vai e volta: a seta do botão dá lugar à roda, os campos
   ficam apagados e o formulário inteiro para de aceitar ponteiro. Não se usa
   `disabled` nos campos porque campo desabilitado não é enviado — e o
   bloqueio acontece justamente no instante em que o navegador vai serializar
   o formulário. */
.form-wrap.is-sending .form { pointer-events: none; }
.form-wrap.is-sending .form__control { opacity: 0.55; }
.form-wrap.is-sending .form__submit .icon { display: none; }
.form-wrap.is-sending .form__spinner { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
	.form__spinner {
		border-top-color: currentColor;
		animation: mv-pulse 1.2s ease-in-out infinite;
	}

	@keyframes mv-pulse {
		50% { opacity: 0.25; }
	}
}

.form__msg .icon { flex-shrink: 0; color: var(--brand); }
.form__msg--ok { background: rgba(96, 144, 240, 0.12); border: 1px solid rgba(96, 144, 240, 0.35); }
.form__msg--erro { background: rgba(139, 124, 246, 0.12); border: 1px solid rgba(139, 124, 246, 0.4); }

.form__msg--aviso {
	background: rgba(224, 164, 92, 0.1);
	border: 1px solid rgba(224, 164, 92, 0.4);
	align-items: flex-start;
}

.form__msg--aviso .icon { color: var(--warn); margin-top: 0.15rem; }
.form__msg--aviso a { color: var(--warn); text-decoration: underline; }

.form__alt { margin: 1.35rem 0 0; color: var(--muted); font-size: var(--fs-small); }
.form__alt a { display: inline-flex; align-items: center; gap: 0.4rem; }

/* Split e passos: variações ------------------------------------------- */

.split--reverse .split__text { order: 2; }
.split__meta { color: var(--muted); font-size: var(--fs-small); }
.split__meta strong { color: var(--text); }

.steps--row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
}

.steps--row .steps__item {
	flex-direction: column;
	gap: 0.65rem;
	padding: 1.5rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.steps--row .steps__num { font-size: 1.5rem; padding: 0; }

/* Etapas que acendem conforme o leitor desce ----------------------------
   Mesma regra do chat: só apaga quando o JS marca a lista com .is-armed,
   então sem JavaScript as cinco etapas ficam legíveis e completas. */

.steps--trilha .steps__item {
	position: relative;
	transition: opacity var(--speed) var(--ease), border-color var(--speed) var(--ease), transform var(--speed) var(--ease);
}

.steps--trilha.is-armed .steps__item {
	opacity: 0.4;
	transform: translateY(6px);
}

/* Na faixa de realce o fundo é mais claro que o da página, então os mesmos
   40% aproximam a etapa apagada do fundo e ela perde o pouco contraste que
   tinha: 2,98:1 contra os 3,37:1 que o padrão entrega na página. 45% repõe
   o mesmo patamar. (Quando a faixa era quase branca isso pedia 55%, porque
   ali o texto era escuro e desbotava para o branco.) */
.section--realce .steps--trilha.is-armed .steps__item { opacity: 0.45; }

.steps--trilha.is-armed .steps__item.is-on {
	opacity: 1;
	transform: none;
	border-color: rgba(96, 144, 240, 0.4);
}

.steps--trilha .steps__num { transition: color var(--speed) var(--ease); }
.steps--trilha.is-armed .steps__item.is-on .steps__num { color: var(--brand); }

/* Cheguei a ligar as etapas com um trilho horizontal e tirei: a grade
   quebra em duas linhas em quase toda largura, e o trilho do último item
   da primeira linha apontava para o vazio. Só ficaria certo numa faixa
   estreita de telas. O acender item a item já entrega o progresso. */

/* Escolha em abas -------------------------------------------------------
   Substituiu três cartões altos lado a lado. Os painéis ficam todos
   visíveis por padrão e só se escondem quando o JS marca o bloco com
   .is-armed — sem JavaScript a seção volta a ser a lista de antes. */

.abas {
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
	overflow: hidden;
}

.abas__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	padding: 0.4rem;
	background: var(--bg-soft);
	border-bottom: 1px solid var(--line);
}

.abas__tab {
	flex: 1 1 200px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 1rem;
	border: 0;
	border-radius: var(--radius);
	background: transparent;
	color: var(--muted);
	font-family: var(--font-head);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}

.abas__tab:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.abas__tab .icon { flex-shrink: 0; }

.abas__tab.is-on {
	background: var(--surface);
	color: var(--text);
	box-shadow: inset 0 -2px 0 var(--brand);
}

.abas__tab:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.abas__painel { padding: clamp(1.5rem, 3.5vw, 2.5rem); }

/* Sem JS, um traço separa um painel do outro. */
.abas__painel + .abas__painel { border-top: 1px solid var(--line); }

.abas__titulo { font-size: var(--fs-h3); margin-bottom: 0.5em; }
.abas__texto { margin: 0 0 1.25rem; color: var(--muted); font-size: var(--fs-lead); max-width: 62ch; }
.abas__painel .checks { margin-bottom: 1.5rem; }
.abas__nota { margin: 0 0 1.25rem; color: var(--muted-dim); font-size: var(--fs-small); }

.abas.is-armed .abas__painel { display: none; }
.abas.is-armed .abas__painel.is-on { display: block; animation: abas-in 0.35s var(--ease); }
.abas.is-armed .abas__painel + .abas__painel { border-top: 0; }

@keyframes abas-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.abas.is-armed .abas__painel.is-on { animation: none; }
}

/* Faixa com a cena de uso -----------------------------------------------
   Ocupa a largura toda de propósito: entre duas seções de texto, uma faixa
   de imagem larga é o respiro que o site não tinha. A máscara vertical faz
   as duas emendas sumirem, então ela não vira um retângulo colado. */

.cena {
	position: relative;
	margin-block: clamp(1rem, 3vw, 2rem);
}

.cena__media {
	margin: 0;
	line-height: 0;
}

.cena__media img {
	width: 100%;
	height: clamp(240px, 38vw, 420px);
	object-fit: cover;
	object-position: 50% var(--pos, 38%);
	opacity: 0.9;
	/* 22% de desbotamento em cima comia os rostos, que é justamente o que a
	   cena tem de útil. 14% ainda apaga a emenda e devolve a imagem. */
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%);
}

/* A frase começou centralizada e caía em cima do rosto — o assunto de uma
   cena de uso está quase sempre no meio. Encostada à esquerda, ela convive
   com qualquer enquadramento, e o véu garante o contraste sem escurecer a
   imagem inteira. */
.cena__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(8, 11, 18, 0.92) 0%, rgba(8, 11, 18, 0.6) 32%, transparent 62%);
}

.cena__media { position: relative; }

/* O container é quem sabe onde começa a coluna de texto do site. Ele cobre
   a cena e encosta a frase na base, para ela nascer alinhada com o resto
   das seções em vez de colar na borda da tela. */
.cena .container {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding-bottom: clamp(1.5rem, 4vw, 3rem);
	pointer-events: none;
}

.cena__frase {
	max-width: 26ch;
	margin: 0;
	font-family: var(--font-head);
	font-size: clamp(1.15rem, 0.95rem + 0.8vw, 1.6rem);
	font-weight: 500;
	line-height: 1.35;
	color: var(--text);
}

@media (max-width: 640px) {
	.cena__media::after { background: linear-gradient(180deg, transparent 40%, rgba(8, 11, 18, 0.85) 100%); }
	.cena__frase { max-width: none; }
}

/* Conversa demonstrando a automação -------------------------------------
   As mensagens ficam visíveis por padrão. Só quando o JS marca a janela com
   .is-armed elas somem para entrar em sequência — assim, sem JavaScript, a
   conversa continua lá inteira e legível em vez de virar um bloco vazio. */

.chat {
	max-width: 560px;
	margin-inline: auto;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow);
}

.chat__top {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.85rem 1.1rem;
	border-bottom: 1px solid var(--line);
	background: var(--surface-2);
}

.chat__avatar {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(96, 144, 240, 0.16);
	border: 1px solid rgba(96, 144, 240, 0.32);
	color: var(--brand);
}

.chat__name { margin: 0; font-family: var(--font-head); font-size: 0.9375rem; font-weight: 500; color: var(--text); }

.chat__state {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	font-size: 0.8125rem;
	color: var(--muted-dim);
}

.chat__state::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #4ec98a;
}

.chat__log {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin: 0;
	padding: 1.15rem;
	list-style: none;
}

.chat__row { display: flex; }
.chat__row--ia { justify-content: flex-end; }

.chat__bubble {
	position: relative;
	max-width: 82%;
	margin: 0;
	padding: 0.7rem 0.9rem 1.35rem;
	border-radius: 14px;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.chat__row--cliente .chat__bubble {
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-bottom-left-radius: 4px;
	color: var(--text);
}

.chat__row--ia .chat__bubble {
	background: linear-gradient(135deg, rgba(96, 144, 240, 0.9), rgba(63, 111, 216, 0.9));
	border-bottom-right-radius: 4px;
	color: var(--on-brand);
}

.chat__hora {
	position: absolute;
	right: 0.75rem;
	bottom: 0.4rem;
	font-size: 0.6875rem;
	opacity: 0.65;
	font-variant-numeric: tabular-nums;
}

.chat__selo {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0;
	padding: 0.9rem 1.15rem;
	border-top: 1px solid var(--line);
	background: rgba(78, 201, 138, 0.08);
	color: var(--muted);
	font-size: var(--fs-small);
}

.chat__selo .icon { flex-shrink: 0; margin-top: 0.15rem; color: #4ec98a; }

/* Balão de "digitando", visível só no instante antes da resposta. */
.chat__typing {
	display: none;
	align-items: center;
	gap: 4px;
	padding: 0.85rem 0.9rem;
	border-radius: 14px;
	border-bottom-right-radius: 4px;
	background: var(--surface-2);
	border: 1px solid var(--line);
}

.chat__typing i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--muted);
	animation: chat-dot 1.1s infinite ease-in-out;
}

.chat__typing i:nth-child(2) { animation-delay: 0.15s; }
.chat__typing i:nth-child(3) { animation-delay: 0.3s; }

@keyframes chat-dot {
	0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
	30% { opacity: 1; transform: translateY(-3px); }
}

.chat.is-armed .chat__row .chat__bubble { opacity: 0; transform: translateY(8px); }
.chat.is-armed .chat__row.is-in .chat__bubble { opacity: 1; transform: none; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.chat.is-armed .chat__row.is-typing .chat__typing { display: inline-flex; }
.chat.is-armed .chat__row.is-typing .chat__bubble { display: none; }
.chat.is-armed .chat__selo { opacity: 0; transition: opacity 0.4s var(--ease); }
.chat.is-armed.is-done .chat__selo { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.chat__typing i { animation: none; }
}

/* Calculadora do atendimento perdido ------------------------------------
   O resultado já vem calculado do PHP: sem JavaScript a peça continua
   respondendo, com os valores padrão, em vez de mostrar campos mudos. */

.calc {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.25rem);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
}

.calc__campos { display: grid; gap: 1.5rem; }

.calc__campo {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: 0.4rem 1rem;
	margin: 0;
}

.calc__campo label { color: var(--muted); font-size: var(--fs-small); }

.calc__campo output {
	font-family: var(--font-head);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--brand);
	font-variant-numeric: tabular-nums;
}

.calc__campo input[type="range"] {
	grid-column: 1 / -1;
	width: 100%;
	height: 4px;
	margin: 0.35rem 0 0;
	appearance: none;
	border-radius: var(--radius-pill);
	background: linear-gradient(90deg, var(--brand) 0%, var(--brand) var(--pct, 20%), rgba(255, 255, 255, 0.1) var(--pct, 20%));
	cursor: pointer;
}

.calc__campo input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--brand);
	border: 3px solid var(--surface);
	box-shadow: 0 0 0 1px var(--brand);
	cursor: grab;
}

.calc__campo input[type="range"]::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--brand);
	border: 3px solid var(--surface);
	cursor: grab;
}

.calc__campo input[type="range"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 6px; }

.calc__saida {
	padding: clamp(1.25rem, 3vw, 1.75rem);
	border-radius: var(--radius);
	border: 1px solid rgba(96, 144, 240, 0.28);
	background: radial-gradient(80% 130% at 50% 0%, rgba(96, 144, 240, 0.14), transparent 70%), var(--bg-soft);
	text-align: center;
}

.calc__num {
	margin: 0;
	font-family: var(--font-head);
	font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4rem);
	font-weight: 700;
	line-height: 1;
	color: var(--text);
	font-variant-numeric: tabular-nums;
}

.calc__label { margin: 0.5rem 0 0; color: var(--muted); font-size: var(--fs-small); }

.calc__sub {
	margin: 1rem auto 0;
	max-width: 46ch;
	color: var(--muted);
	font-size: var(--fs-small);
}

.calc__sub strong { color: var(--text); font-variant-numeric: tabular-nums; }

.calc__nota { margin: 0; color: var(--muted-dim); font-size: 0.8125rem; line-height: 1.6; }

/* Carrossel de telas do app --------------------------------------------
   Rolagem nativa com scroll-snap, não um componente de JavaScript: o dedo
   e a roda do mouse já fazem o trabalho, e as setas só chamam scrollBy().
   Sem JS a faixa continua rolando; só os controles somem. */

.shots { position: relative; }

.shots__track {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	/* Sem 'scroll-behavior: smooth' aqui de propósito: quem decide é o JS,
	   que já consulta prefers-reduced-motion e passa o comportamento na
	   própria chamada. Declarado no CSS, ele também valeria para saltos de
	   âncora e scrollIntoView dentro da faixa, que não queremos animar. */
	/* A barra de rolagem cortaria a base dos aparelhos; a navegação fica
	   por conta das setas, do dedo e do teclado. */
	scrollbar-width: none;
}

.shots__track::-webkit-scrollbar { display: none; }

.shots__track:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: var(--radius); }

.shots__item {
	flex: 0 0 auto;
	width: clamp(200px, 58vw, 240px);
	margin: 0;
	scroll-snap-align: start;
	overflow: hidden;
	border: 1px solid var(--line-strong);
	border-radius: 22px;
	background: #0b0f18;
}

.shots__item img { display: block; width: 100%; height: auto; }

.shots__ctrl {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 1.15rem;
}

.shots__btn {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	background: var(--surface);
	color: var(--text);
	cursor: pointer;
	transition: background-color var(--speed) var(--ease), border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}

.shots__btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--brand); color: var(--brand); }
.shots__btn:disabled { opacity: 0.35; cursor: default; }
.shots__btn--prev .icon { transform: rotate(180deg); }

.shots__count {
	margin: 0;
	color: var(--muted-dim);
	font-size: var(--fs-small);
	font-variant-numeric: tabular-nums;
}

/* Variante "destaque", para a página própria de cada app -----------------
   A mesma coleção de telas aparece em duas páginas, e repetir a faixa
   idêntica faria a segunda parecer cópia da primeira. Aqui há espaço, então
   a tela vem grande e centralizada, e a navegação é por miniaturas. */

/* A largura é limitada de propósito: solta na página, a faixa mostrava
   quatro telas lado a lado e virava a mesma coisa da página Nossos Apps.
   Estreita, mostra uma tela por vez com as vizinhas espiando na borda. */
.shots--destaque {
	max-width: 560px;
	margin-inline: auto;
}

.shots--destaque .shots__track {
	gap: clamp(1rem, 3vw, 2rem);
	scroll-padding-inline: 50%;
}

.shots--destaque .shots__item {
	width: clamp(240px, 62vw, 320px);
	scroll-snap-align: center;
	border-radius: 26px;
}

/* Primeiro e último item precisam de folga para conseguirem chegar ao
   centro; sem isso o carrossel nunca centraliza as pontas. */
.shots--destaque .shots__track::before,
.shots--destaque .shots__track::after {
	content: "";
	flex: 0 0 auto;
	width: calc(50% - clamp(120px, 31vw, 160px));
}

.shots__thumbs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	margin-top: clamp(1.25rem, 3vw, 2rem);
}

.shots__thumb {
	width: 54px;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #0b0f18;
	cursor: pointer;
	opacity: 0.45;
	transition: opacity var(--speed) var(--ease), border-color var(--speed) var(--ease), transform var(--speed) var(--ease);
}

.shots__thumb img { display: block; width: 100%; height: auto; }

.shots__thumb:hover { opacity: 0.8; }

.shots__thumb.is-on {
	opacity: 1;
	border-color: var(--brand);
	transform: translateY(-2px);
}

.shots__thumb:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* Ícone do app na loja -------------------------------------------------- */

.app-icone {
	flex-shrink: 0;
	width: auto;
	height: auto;
	border-radius: 12px;
}

.eyebrow--app {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	/* A eyebrow padrão é caixa alta e miúda; ao lado de um ícone de 44px
	   ela some, então aqui ela cresce e perde o espaçamento exagerado. */
	font-size: 1rem;
	letter-spacing: 0.02em;
}

.eyebrow--app .app-icone { width: 44px; height: auto; }

.section__title--app {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.section__head--center { margin-inline: auto; text-align: center; }

/* WhatsApp flutuante --------------------------------------------------- */

.wa-float {
	position: fixed;
	right: clamp(1rem, 3vw, 1.75rem);
	bottom: clamp(1rem, 3vw, 1.75rem);
	z-index: 60;
	display: inline-flex;
	align-items: center;
	padding: 0.85rem;
	border-radius: var(--radius-pill);
	background: var(--brand);
	color: var(--on-brand);
	box-shadow: var(--shadow-brand);
	transition: transform var(--speed) var(--ease), background-color var(--speed) var(--ease);
}

.wa-float:hover { background: var(--brand-hover); color: var(--on-brand); transform: translateY(-2px); }

/* O respiro entre ícone e rótulo é margem do próprio rótulo, não 'gap' do
   botão. Com 'gap' o vão continuava valendo mesmo com o rótulo em
   max-width: 0 — sobrava um vazio à direita que tirava o ícone do centro e
   fazia o botão fechado deixar de ser um círculo. Assim o espaço nasce e
   morre junto com o texto. */
.wa-float__label {
	max-width: 0;
	margin-left: 0;
	overflow: hidden;
	white-space: nowrap;
	font-family: var(--font-head);
	font-size: 0.9375rem;
	font-weight: 600;
	transition: max-width 0.35s var(--ease), margin-left 0.35s var(--ease);
}

.wa-float:hover .wa-float__label,
.wa-float:focus-visible .wa-float__label { max-width: 12rem; margin-left: 0.55rem; }

/* Responsivo dos componentes novos ------------------------------------ */

@media (max-width: 900px) {
	.hero--app__inner { grid-template-columns: 1fr; }
	.hero--app__media { max-width: 320px; }
	.split--reverse .split__text { order: 0; }
}

@media (max-width: 560px) {
	.cta__actions .btn,
	.form__submit { width: 100%; }
	.wa-float__label { display: none; }
	.checks--inline { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   15. Animação de entrada
   ---------------------------------------------------------------------- */

/* 18px era discreto demais para se notar: a entrada existia e ninguém via.
   26px ainda é sutil, mas a cascata passa a ser perceptível. */
.reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

/* Quem pediu menos movimento vê o conteúdo direto, sem deslocamento. */
@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
}

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

/* Sem JS: nada fica invisível. */
.no-js .reveal { opacity: 1; transform: none; }

/* -------------------------------------------------------------------------
   16. Responsivo
   ---------------------------------------------------------------------- */

@media (max-width: 900px) {
	/* minmax(0, 1fr) pelo mesmo motivo da regra de cima: empilhada, a coluna
	   única também precisa de piso zero, senão a faixa de rolagem do
	   carrossel a estica e a página inteira ganha rolagem lateral. */
	.split { grid-template-columns: minmax(0, 1fr); }
	.site-footer__top { grid-template-columns: 1fr 1fr; }
	.site-footer__brand { grid-column: 1 / -1; }
}

.admin-bar .site-header { top: 32px; }

@media (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
}

@media (max-width: 860px) {
	.nav-toggle { display: flex; }

	.nav {
		position: fixed;
		inset: 78px 0 auto 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 1.25rem var(--gutter) 2rem;
		background: rgba(8, 11, 18, 0.97);
		backdrop-filter: blur(14px);
		border-bottom: 1px solid var(--line);
		max-height: calc(100dvh - 78px);
		overflow-y: auto;
		transform: translateY(-12px);
		opacity: 0;
		visibility: hidden;
		transition: all var(--speed) var(--ease);
	}

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

	.nav__list { flex-direction: column; align-items: stretch; gap: 0; }

	.nav__list li { border-bottom: 1px solid var(--line); }

	.nav__list a {
		display: block;
		padding: 0.9rem 0;
		font-size: 1.0625rem;
		color: var(--text);
	}

	.nav__list a::after { display: none; }

	/* `visibility: inherit` e não `visible`: o menu fechado é escondido por
	   `visibility: hidden` no .nav, e visibilidade é herdada — um filho que
	   declara `visible` volta a existir para o hit-test mesmo com o pai
	   escondido. Como o .nav é `position: fixed`, isso deixava os dois links
	   deste submenu como uma tira invisível e clicável sobre a página
	   inteira, por volta de 145–235px do topo da janela: clicar ali abria o
	   app em vez de acionar o que estava embaixo (foi assim que as abas da
	   home pararam de trocar de painel quando empilham no celular).
	   `opacity: 1` fica: o pai zera a opacidade quando fechado e, aberto,
	   este submenu precisa anular a opacidade 0 do estilo de desktop. */
	.nav__list .sub-menu {
		position: static;
		opacity: 1;
		visibility: inherit;
		transform: none;
		box-shadow: none;
		border: 0;
		background: transparent;
		padding: 0 0 0.5rem 1rem;
	}

	.nav__cta { margin-top: 1.5rem; width: 100%; }
}

@media (max-width: 560px) {
	.site-footer__top { grid-template-columns: 1fr; }
	.hero__actions .btn { width: 100%; }
	.post-nav__link--next { text-align: left; }
}

/* -------------------------------------------------------------------------
   17. Acessibilidade: respeitar quem pediu menos movimento
   ---------------------------------------------------------------------- */

@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;
	}

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