/*
Theme Name: Nota Forte
Theme URI: https://notaforte.com.br
Template: astra
Author: Malti
Description: Tema filho do Astra, personalizado com a identidade visual e o sistema de conversão da Nota Forte (paleta, tipografia, componentes de seção, formulário de lead e botão de WhatsApp).
Version: 1.0.1
Text Domain: notaforte
*/

:root {
	--nf-navy: #0B2047;
	--nf-navy-deep: #102B4D;
	--nf-navy-hover: #1B3A6B;
	--nf-coral: #FC4B04;
	--nf-coral-hover: #D93F03;
	--nf-coral-soft: #FFF1EA;
	--nf-cream: #FFFFFF;
	--nf-warm-alt: #FFFFFF;
	--nf-ink: #0B2047;
	--nf-gray: #707070;
	--nf-gray-soft: #8A93A3;
	--nf-gray-body: #5A6672;
	--nf-white: #FFFFFF;
	--nf-border: #E6E9EF;
}

body { background: var(--nf-cream) !important; }

/* Header — força cores/posicionamento normais, independente do modo "transparent header" do Astra */
.site-header, header.site-header,
.ast-primary-header-bar, .ast-primary-header, .main-header-bar,
.site-primary-header-wrap, .ast-above-header, .ast-below-header {
	background-color: var(--nf-white) !important;
	background-image: none !important;
}
.site-header, header.site-header {
	position: sticky !important;
	top: 0;
	z-index: 999;
	box-shadow: 0 1px 0 rgba(34,48,61,0.06);
}
.admin-bar .site-header, .admin-bar header.site-header {
	top: 32px;
}
@media (max-width: 782px) {
	.admin-bar .site-header, .admin-bar header.site-header { top: 46px; }
}
/* Logo */
.ast-site-identity img,
.site-logo-img img,
.custom-logo-link img,
header .ast-site-identity img {
	max-height: 40px !important;
	width: auto !important;
	height: auto !important;
}
.ast-primary-header-bar { padding-top: 12px !important; padding-bottom: 12px !important; }
/* Altura morta do header do Astra empurrava o hero pra baixo:
   (1) min-height de 110px na faixa (config do Customizer) contra uma linha de conteúdo de 54px;
   (2) padding de 18px em cima e embaixo no .site-branding, em volta da logo.
   Somados, 92px sem função. Sem eles o header fica ~78px e o vão logo→conteúdo bate com a referência. */
.site-primary-header-wrap { min-height: 40px !important; }
.site-branding { padding-top: 0 !important; padding-bottom: 0 !important; }

.main-header-menu > .menu-item > a,
.ast-header-navigation-arrow,
.main-header-menu .menu-item .menu-link,
.site-title a,
.site-title,
.ast-mobile-header-inline .main-header-menu a {
	color: var(--nf-ink) !important;
}
.main-header-menu > .menu-item > a:hover {
	color: var(--nf-coral) !important;
}

/* Nav compacto — 8 itens + logo precisam caber numa linha só */
.main-header-menu > .menu-item > a,
.main-header-menu .menu-item .menu-link {
	font-size: 15px !important;
	font-weight: 500 !important;
	padding-left: 14px !important;
	padding-right: 14px !important;
}
.main-header-menu > .menu-item.nf-menu-cta > a {
	color: var(--nf-white) !important;
	background-color: var(--nf-coral) !important;
	border-radius: 8px;
	padding-left: 22px !important;
	padding-right: 22px !important;
	margin-left: 10px;
	font-weight: 600 !important;
}
.main-header-menu > .menu-item.nf-menu-cta > a:hover { background-color: var(--nf-coral-hover) !important; color: var(--nf-white) !important; }
/* o item de CTA tem altura própria; o restante do nav acompanha a barra */
.ast-desktop .main-header-menu > .menu-item.nf-menu-cta { display: flex; align-items: center; }
.ast-desktop .main-header-menu > .menu-item.nf-menu-cta > a { line-height: 40px !important; height: 40px; }

/* Ícones sociais do header builder do Astra — placeholders sem link real (href="#"), removidos até existirem perfis de verdade */
.header-social-inner-wrap { display: none !important; }

/* O padding vertical daqui é o que define o ritmo da página inteira:
   24px de cada lado = 48px de vão entre módulos. Valor único, sem exceção. */
.nf-section { padding: 24px; background: var(--nf-cream); }
/* o cabeçalho é sticky (64px): sem isso, âncora do menu (#recursos, #planos…)
   para com o topo da seção escondido atrás dele */
.nf-section[id] { scroll-margin-top: 80px; }
.nf-section--alt { background: var(--nf-warm-alt); }
.nf-inner { max-width: 1080px; margin: 0 auto; }

.nf-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 700 11px/1 Inter, sans-serif;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--nf-coral);
	margin: 0 0 12px;
}
.nf-hero .nf-eyebrow::before {
	content: "";
	width: 18px;
	height: 2px;
	background: var(--nf-coral);
	display: inline-block;
}
.nf-center .nf-eyebrow { justify-content: center; }

.nf-h1 {
	font: 700 clamp(30px, 3.2vw, 40px)/1.13 "Plus Jakarta Sans", sans-serif;
	letter-spacing: -0.02em;
	margin: 0 0 18px;
	color: var(--nf-navy);
	text-wrap: balance;
}
.nf-h2 {
	font: 700 clamp(23px, 2.3vw, 29px)/1.2 "Plus Jakarta Sans", sans-serif;
	letter-spacing: -0.01em;
	margin: 0 0 12px;
	color: var(--nf-navy);
	text-wrap: balance;
}
.nf-h3 {
	font: 600 19px/1.3 "Plus Jakarta Sans", sans-serif;
	margin: 0 0 8px;
	color: var(--nf-ink);
}
.nf-lead {
	font: 400 16px/1.6 Inter, sans-serif;
	color: var(--nf-gray-body);
	margin: 0 0 28px;
	max-width: 460px;
}
.nf-body {
	font: 400 16px/1.65 Inter, sans-serif;
	color: var(--nf-ink);
}
.nf-center { text-align: center; margin-left: auto; margin-right: auto; }

/* Hero */
/* padding-bottom igual ao das demais seções, pra o vão hero→Recursos ficar no
   mesmo ritmo dos outros módulos. O padding-top fica em 28px porque é ele que
   dá o vão logo→conteúdo de ~54px medido na referência — não igualar aos 24px. */
.nf-hero { position: relative; overflow: hidden; text-align: center; padding-top: 42px; padding-bottom: 24px; }
.nf-hero .nf-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.nf-hero .nf-lead { margin-left: auto; margin-right: auto; }

/* Hero split (copy + mockup do produto lado a lado) */
/* align-items: start (não center) de propósito: com `center`, sempre que a coluna
   de texto fica mais baixa que o mockup ela é centralizada, e esse deslocamento
   entra no vão logo→conteúdo — ou seja, o vão mudava sozinho a cada troca de copy.
   Com `start`, o vão passa a ser só `padding-top + 12px`, previsível. */
.nf-hero .nf-inner.nf-hero-grid {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 48px;
	align-items: start;
	text-align: left;
	max-width: 1180px;
}
.nf-hero-copy .nf-lead { margin-left: 0; margin-right: 0; }

/* Selos do hero lado a lado; a margem inferior passa pro container */
.nf-hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.nf-hero-badges .nf-hero-badge { margin: 0; }

/* Selo em pílula com check — mesmo padrão no hero e no card do CTA final */
.nf-hero-badge,
.nf-cta-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--nf-white);
	border: 1px solid #FBC7B2;
	border-radius: 999px;
	padding: 7px 16px 7px 8px;
	margin: 0 0 18px;
	font: 700 11.5px/1 Inter, sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nf-coral-hover);
}
.nf-hero-badge svg,
.nf-cta-pill svg { flex: none; }

.nf-hero-media { position: relative; z-index: 2; }
.nf-hero-media img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: auto;
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(11,32,71,0.16);
	display: block;
}
/* Círculo laranja sólido saindo por trás do mockup, no canto inferior direito
   (proporções medidas na referência: ~195px, 50px à direita e 41px abaixo do card) */
.nf-hero-media::after {
	content: "";
	position: absolute;
	right: -20px;
	bottom: -41px;
	width: 195px;
	height: 195px;
	border-radius: 50%;
	background: var(--nf-coral);
	z-index: 0;
	pointer-events: none;
}
@media (max-width: 860px) {
	.nf-hero-media::after { width: 130px; height: 130px; right: -30px; bottom: -26px; }
}

.nf-hero-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 30px; }
.nf-hero-trust > div { display: flex; align-items: flex-start; gap: 6px; }
.nf-hero-trust svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.nf-hero-trust strong { display: block; font: 700 11px/1.35 Inter, sans-serif; color: var(--nf-navy); }
.nf-hero-trust span { display: block; font: 400 10.5px/1.35 Inter, sans-serif; color: var(--nf-gray-soft); }
@media (max-width: 860px) { .nf-hero-trust { grid-template-columns: repeat(2, 1fr); gap: 16px; } }

@media (max-width: 860px) {
	.nf-hero .nf-inner.nf-hero-grid { grid-template-columns: 1fr; text-align: center; }
	.nf-hero-copy .nf-lead { margin-left: auto; margin-right: auto; }
	.nf-hero-trust { justify-content: center; }
	.nf-hero-trust > div { justify-content: center; }
	.nf-hero-media { margin-top: 8px; }
}
/* A decoração do hero é gerada em .nf-hero-media::after (ancorada no mockup),
   então o elemento .nf-hero-blob do conteúdo não é mais usado. */
.nf-hero-blob { display: none; }
@media (max-width: 900px) {
	.nf-hero-blob { right: -260px; width: 480px; height: 480px; }
}

.nf-cta-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }


/* CTA buttons (shortcode [nf_whatsapp]) */
.nf-whatsapp-btn,
.nf-whatsapp-btn:hover,
.nf-whatsapp-btn:focus,
.nf-whatsapp-btn:active {
	text-decoration: none !important;
}
.nf-whatsapp-btn {
	display: inline-block;
	background-color: var(--nf-coral);
	color: var(--nf-white) !important;
	padding: 13px 26px;
	border-radius: 8px;
	font: 600 15px/1.2 Inter, sans-serif;
	transition: background-color 0.15s ease, transform 0.15s ease;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
.nf-whatsapp-btn:hover {
	background-color: var(--nf-coral-hover);
	color: var(--nf-white) !important;
	transform: translateY(-1px);
}
.nf-whatsapp-btn--ghost {
	background-color: var(--nf-white);
	color: var(--nf-navy) !important;
	border: 1px solid var(--nf-border);
	padding: 12px 26px;
}
.nf-whatsapp-btn--ghost:hover {
	background-color: var(--nf-white);
	border-color: var(--nf-navy);
	color: var(--nf-navy) !important;
}

/* Botão flutuante do WhatsApp */
.nf-whatsapp-float {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 56px;
	height: 56px;
	background-color: var(--nf-coral);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(0,0,0,0.22);
	z-index: 9999;
	transition: transform 0.2s ease;
}
.nf-whatsapp-float:hover {
	transform: scale(1.08);
}
@media (max-width: 480px) {
	.nf-whatsapp-float {
		bottom: 16px;
		right: 16px;
		width: 50px;
		height: 50px;
	}
}

/* Interaction & touch */
a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* Accessibility: visible focus ring everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
	outline: 3px solid var(--nf-navy-hover);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Blog — imagem de destaque embutida no conteúdo (o layout do Astra não estava exibindo a featured image) */
.nf-article-hero-img {
	width: 100%;
	height: auto;
	border-radius: 16px;
	display: block;
	margin: 0 0 32px;
}

/* Planos */
.nf-pricing-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;
	margin-top: 32px;
	align-items: stretch;
}
@media (max-width: 1000px) { .nf-pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .nf-pricing-grid { grid-template-columns: 1fr; } }

.nf-plan-card {
	background: var(--nf-white);
	border: 1px solid var(--nf-border);
	border-radius: 14px;
	padding: 18px 16px;
	text-align: left;
	display: flex;
	flex-direction: column;
	position: relative;
}
/* Na referência o card em destaque fica alinhado com os demais — sem elevação. */
.nf-plan-card--highlight {
	border: 2px solid var(--nf-coral);
	box-shadow: 0 16px 40px rgba(252,75,4,0.12);
}

.nf-plan-badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--nf-coral);
	color: var(--nf-white);
	font: 700 11px/1 Inter, sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 999px;
	white-space: nowrap;
}

/* O Astra aplica `margin-bottom: 1.6em` em <p>/<ul> com especificidade maior que a classe,
   o que inflava o card (30,4px no título, 20,8px na descrição, 18px acima da lista).
   Daí o !important nas margens abaixo — sem ele o Astra vence. */
.nf-plan-name { font: 700 19px/1.2 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy); margin: 0 0 8px !important; }
/* min-height reserva 3 linhas: a descrição do "Profissional" quebra em 3 e, sem isso,
   empurrava preço e recursos 18px pra baixo, desalinhando esse card dos outros três. */
.nf-plan-desc { font: 400 13px/1.45 Inter, sans-serif; color: var(--nf-gray-body); margin: 0 0 16px !important; min-height: 57px; }
.nf-plan-price { display: flex; align-items: baseline; gap: 4px; margin: 0 0 18px; }
.nf-plan-price-currency { font: 700 15px/1 Inter, sans-serif; color: var(--nf-navy); }
.nf-plan-price-amount { font: 700 26px/1 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy); letter-spacing: -0.02em; }
.nf-plan-price-period { font: 400 13px/1 Inter, sans-serif; color: var(--nf-gray-soft); }

.nf-plan-features { list-style: none; margin: 0 0 20px !important; padding: 0; flex: 1; }
/* Sem linha separadora entre os itens — a referência não tem. */
.nf-plan-features li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font: 400 13px/1.4 Inter, sans-serif;
	color: var(--nf-ink);
	padding: 2px 0;
}
.nf-plan-features li svg { flex: none; width: 13px; height: 13px; margin-top: 3px; }

.nf-plan-card .nf-whatsapp-btn { text-align: center; display: block; }
.nf-plan-card:not(.nf-plan-card--highlight) .nf-whatsapp-btn {
	background: transparent;
	color: var(--nf-navy) !important;
	border: 1.5px solid var(--nf-navy);
}
.nf-plan-card:not(.nf-plan-card--highlight) .nf-whatsapp-btn:hover {
	background: var(--nf-navy);
	color: var(--nf-white) !important;
}

/* Recursos — linha de mini-cards abaixo do cabeçalho centralizado */
.nf-recursos-row {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 11px;
	margin-top: 32px;
	text-align: left;
}
@media (max-width: 1000px) { .nf-recursos-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .nf-recursos-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .nf-recursos-row { grid-template-columns: 1fr; } }

/* o card virou <a> (leva pro bloco correspondente em /recursos/), entao
   precisa de display:block, cor herdada e foco visivel — antes era <div> */
.nf-mini-card {
	display: block;
	background: var(--nf-white);
	border: 1px solid var(--nf-border);
	border-radius: 12px;
	padding: 12px 11px 14px;
	text-align: center;
	text-decoration: none !important;
	color: inherit !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.nf-mini-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(11,32,71,0.08); border-color: var(--nf-coral); }
.nf-mini-card:focus-visible { outline: 2px solid var(--nf-coral); outline-offset: 3px; }
/* Seta de afordancia: em repouso o card nao dava nenhum sinal de que era link —
   so mudava no hover, e quem esta no celular nunca ve hover. Vem por ::after
   pra nao mexer no conteudo da pagina, e com content vazio nao e anunciada
   pelo leitor de tela (o link ja tem o texto do card). */
.nf-mini-card::after {
	content: "";
	display: block; width: 15px; height: 15px; margin: 10px auto 0;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h11M9.5 4l4 4-4 4' fill='none' stroke='%23FC4B04' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 15px 15px;
	opacity: 0.65;
	transition: transform 0.15s ease, opacity 0.15s ease;
}
.nf-mini-card:hover::after { transform: translateX(3px); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .nf-mini-card:hover::after { transform: none; } }
.nf-mini-card:hover h3 { color: var(--nf-coral-hover); }
@media (prefers-reduced-motion: reduce) { .nf-mini-card:hover { transform: none; } }
/* Ícones laranja, sem fundo circular e em ~43px (medido na referência) */
.nf-mini-card-icon {
	height: 40px;
	margin: 0 auto 9px;
	display: flex; align-items: center; justify-content: center;
}
.nf-mini-card-icon svg { width: 38px; height: 38px; }
.nf-mini-card h3 { font: 700 14px/1.3 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy); margin: 0 0 6px; }
.nf-mini-card p { font: 400 12.5px/1.42 Inter, sans-serif; color: var(--nf-gray-body); margin: 0; }

/* Certificado digital — copy + 2 cards à esquerda, foto à direita */
.nf-cert-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	text-align: left;
}
@media (max-width: 900px) { .nf-cert-grid { grid-template-columns: 1fr; gap: 32px; } }

.nf-cert-copy > p.nf-body { color: var(--nf-gray-body); margin: 0 0 24px !important; max-width: 420px; }

.nf-cert-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 420px) { .nf-cert-cards { grid-template-columns: 1fr; } }
.nf-cert-card {
	background: var(--nf-white);
	border: 1px solid var(--nf-border);
	border-radius: 14px;
	padding: 18px 16px;
	text-align: center;
}
.nf-cert-icon {
	width: 44px; height: 44px;
	margin: 0 auto 12px;
	border-radius: 50%;
	background: #F1F3F7;
	display: flex; align-items: center; justify-content: center;
}
.nf-cert-tag {
	display: inline-block;
	font: 700 9.5px/1 Inter, sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nf-white);
	background: var(--nf-navy);
	border-radius: 4px;
	padding: 5px 8px;
	margin-bottom: 10px;
}
.nf-cert-card h3 { font: 700 17px/1.2 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy); margin: 0 0 4px !important; }
.nf-cert-card > p { font: 400 12.5px/1.4 Inter, sans-serif; color: var(--nf-gray-soft); margin: 0 0 12px !important; }
.nf-cert-price { display: flex; align-items: baseline; justify-content: center; gap: 3px; margin: 0 0 14px; }
.nf-cert-price .moeda { font: 700 13px/1 Inter, sans-serif; color: var(--nf-navy); }
.nf-cert-price .valor { font: 700 25px/1 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy); letter-spacing: -0.02em; }
.nf-cert-price .centavos { font: 700 15px/1 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy); }
.nf-cert-card .nf-whatsapp-btn { display: block; text-align: center; padding: 11px 12px; font-size: 13.5px; }

/* Visual: foto arredondada com círculo laranja saindo por trás, à direita */
.nf-cert-visual { position: relative; }
.nf-cert-visual::before {
	content: "";
	position: absolute;
	right: -34px;
	top: 50%;
	transform: translateY(-50%);
	width: 210px; height: 210px;
	border-radius: 50%;
	background: var(--nf-coral);
	z-index: 0;
}
.nf-cert-photo {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
	box-shadow: 0 18px 44px rgba(11,32,71,0.14);
}
.nf-cert-selo {
	position: absolute;
	z-index: 2;
	right: 8px;
	bottom: -18px;
	display: flex;
	align-items: flex-start;
	gap: 9px;
	max-width: 250px;
	background: var(--nf-white);
	border-radius: 12px;
	padding: 12px 14px;
	box-shadow: 0 10px 28px rgba(11,32,71,0.16);
}
.nf-cert-selo svg { flex: none; margin-top: 1px; }
.nf-cert-selo strong { display: block; font: 700 12.5px/1.3 Inter, sans-serif; color: var(--nf-navy); }
.nf-cert-selo span { display: block; font: 400 11.5px/1.4 Inter, sans-serif; color: var(--nf-gray-body); }
@media (max-width: 900px) {
	.nf-cert-visual::before { width: 150px; height: 150px; right: -20px; }
	.nf-cert-selo { right: 0; bottom: -14px; max-width: 220px; }
}

/* Como funciona — 4 passos com setas */
.nf-steps-4 { display: flex; align-items: flex-start; justify-content: center; gap: 4px; margin-top: 32px; flex-wrap: wrap; }
.nf-step-4 { width: 210px; text-align: center; }
.nf-step-4-icon {
	width: 64px; height: 64px;
	border-radius: 50%;
	background: #FDE4DB;
	display: flex; align-items: center; justify-content: center;
	margin: 0 auto 12px;
}
.nf-step-4-num { display: block; font: 700 12px/1 Inter, sans-serif; color: var(--nf-coral); letter-spacing: 0.06em; margin-bottom: 6px; }
.nf-step-4 h3 { font: 700 15px/1.3 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy); margin: 0 0 6px !important; }
.nf-step-4 p { margin: 0 !important; font: 400 13px/1.5 Inter, sans-serif; color: var(--nf-gray-body); }
/* A seta acompanha o círculo, não o texto: com line-height zerado, 18px do topo
   deixa o centro dela nos 32px que são o centro do círculo. */
.nf-step-4-arrow { align-self: flex-start; margin-top: 18px; flex: none; line-height: 0; }
.nf-step-4-arrow svg { width: 28px; height: 28px; }
@media (max-width: 900px) {
	.nf-steps-4 { flex-direction: column; align-items: center; }
	.nf-step-4-arrow { align-self: center; transform: rotate(90deg); margin: 4px 0; }
}

/* Depoimentos */
.nf-testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; text-align: left; }
@media (max-width: 900px) { .nf-testimonials-grid { grid-template-columns: 1fr; } }
.nf-testimonial-card { background: var(--nf-white); border: 1px solid var(--nf-border); border-radius: 14px; padding: 20px 20px 18px; }
.nf-testimonial-quote-icon { display: block; width: 20px; height: auto; margin: 0 0 10px; }
.nf-testimonial-quote-icon path { fill: #FD7F50; }
.nf-testimonial-quote { font: 400 14px/1.55 Inter, sans-serif; color: var(--nf-ink); margin: 0 0 16px !important; }
.nf-testimonial-dots { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
.nf-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nf-border); }
.nf-dot--active { background: var(--nf-coral); }
.nf-testimonial-author { display: flex; align-items: center; gap: 11px; }
/* Precisa ser mais específico que `.nf-testimonial-author span`, senão as iniciais
   herdam o cinza-claro e o tamanho do subtítulo e ficam quase ilegíveis no círculo. */
.nf-testimonial-author .nf-avatar-initials {
	width: 40px; height: 40px; flex: none;
	border-radius: 50%;
	background: #FDE4DB;
	/* navy, não coral: a 13px o coral sobre o pêssego dá 3,71:1 e o mínimo AA
	   pra texto desse tamanho é 4,5:1 (13px bold não conta como "texto grande"). */
	color: var(--nf-navy);
	display: flex; align-items: center; justify-content: center;
	font: 700 13px/1 "Plus Jakarta Sans", sans-serif;
}
.nf-testimonial-author strong { display: block; font: 700 14px/1.3 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy); }
.nf-testimonial-author span { display: block; font: 400 12px/1.3 Inter, sans-serif; color: var(--nf-gray-soft); }

/* CTA final — card laranja arredondado em 2 colunas.
   A faixa de confiança fica FORA do card, sobre o branco (igual à referência). */
.nf-cta-card {
	background: var(--nf-coral);
	border-radius: 20px;
	padding: 34px 38px;
	/* padding-right maior reserva o espaço da foto, que é posicionada de forma absoluta.
	   A foto tem altura 100% e largura automática (proporção 1,36), então num card de
	   ~220px ela fica com ~300px — a reserva precisa ser maior que isso. */
	padding-right: 315px;
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 36px;
	align-items: center;
	text-align: left;
	position: relative;
	overflow: hidden;
}
/* Foto ancorada no canto inferior direito, com a altura do card (sangra até as bordas). */
.nf-cta-photo {
	position: absolute;
	right: 0;
	bottom: 0;
	height: 100%;
	width: auto;
	pointer-events: none;
	user-select: none;
}
.nf-cta-card h2 {
	font: 700 clamp(20px, 2.2vw, 27px)/1.28 "Plus Jakarta Sans", sans-serif;
	color: #fff;
	margin: 0 !important;
	letter-spacing: -0.01em;
	text-wrap: balance;
}
.nf-cta-card-action p {
	font: 400 14px/1.55 Inter, sans-serif;
	color: rgba(255,255,255,0.92);
	margin: 0 0 18px !important;
}
.nf-cta-card .nf-whatsapp-btn { background-color: #fff; color: var(--nf-coral) !important; }
.nf-cta-card .nf-whatsapp-btn:hover { background-color: #FFF0EA; color: var(--nf-coral) !important; }
.nf-cta-card .nf-whatsapp-btn::after { content: "→"; margin-left: 8px; }
@media (max-width: 860px) {
	.nf-cta-card { grid-template-columns: 1fr; gap: 22px; padding: 28px 24px; }
	.nf-cta-photo { display: none; }
}

.nf-cta-trust {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: 26px;
	text-align: left;
}
@media (max-width: 860px) { .nf-cta-trust { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .nf-cta-trust { grid-template-columns: 1fr; } }
.nf-cta-trust > div { display: flex; align-items: flex-start; gap: 10px; }
.nf-cta-trust svg { flex: none; margin-top: 1px; }
.nf-cta-trust strong { display: block; font: 700 13px/1.35 Inter, sans-serif; color: var(--nf-navy); }
.nf-cta-trust span { display: block; font: 400 12.5px/1.4 Inter, sans-serif; color: var(--nf-gray-body); }

/* ===== Fale Conosco ===== */
.nf-fc-hero { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; text-align: left; }
@media (max-width: 900px) { .nf-fc-hero { grid-template-columns: 1fr; gap: 28px; } }
.nf-fc-hero h1 { font: 700 clamp(30px,3.8vw,44px)/1.12 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy); margin: 0 0 16px !important; letter-spacing: -0.02em; text-wrap: balance; }
.nf-fc-hero h1 em { font-style: normal; color: var(--nf-coral); }
/* `:not(.nf-eyebrow)` é essencial: sem ele esta regra (0,1,2) vence `.nf-eyebrow`
   (0,1,0) e o selo do topo perde a cor coral, o tamanho e o tracinho. */
.nf-fc-hero > div > p:not(.nf-eyebrow) { font: 400 16px/1.65 Inter, sans-serif; color: var(--nf-gray-body); margin: 0 0 24px !important; max-width: 430px; }
.nf-fc-hero img { width: 100%; height: auto; display: block; border-radius: 16px; }

/* Botão largo de WhatsApp do topo */
.nf-fc-cta {
	display: inline-flex; align-items: center; gap: 12px;
	background: var(--nf-coral); color: #fff !important;
	border-radius: 11px; padding: 15px 24px;
	font: 700 15.5px/1.2 Inter, sans-serif;
	text-decoration: none !important;
	transition: background-color 0.15s ease;
	touch-action: manipulation;
}
.nf-fc-cta:hover { background: var(--nf-coral-hover); color: #fff !important; }
.nf-fc-cta svg { flex: none; }
.nf-fc-cta .nf-fc-cta-seta { margin-left: 4px; }

.nf-fc-selos { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 24px; }
.nf-fc-selos > div { display: flex; align-items: center; gap: 9px; }
.nf-fc-selos svg { flex: none; }
.nf-fc-selos span { font: 600 13px/1.35 Inter, sans-serif; color: var(--nf-navy); }


/* Faixa laranja */
.nf-fc-faixa {
	background: var(--nf-coral); border-radius: 16px;
	padding: 28px 32px;
	display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center;
	text-align: left;
}
@media (max-width: 860px) { .nf-fc-faixa { grid-template-columns: 1fr; text-align: left; } }
.nf-fc-faixa-icone { width: 62px; height: 62px; flex: none; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; }
.nf-fc-faixa h2 { font: 700 clamp(19px,2.2vw,25px)/1.25 "Plus Jakarta Sans", sans-serif; color: #fff; margin: 0 0 6px !important; }
.nf-fc-faixa > div > p { font: 400 14px/1.5 Inter, sans-serif; color: rgba(255,255,255,0.92); margin: 0 0 10px !important; }
.nf-fc-faixa-itens { display: flex; flex-wrap: wrap; gap: 18px; }
.nf-fc-faixa-itens span { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 Inter, sans-serif; color: #fff; }
.nf-fc-faixa .nf-fc-cta { background: #fff; color: var(--nf-coral) !important; }
.nf-fc-faixa .nf-fc-cta:hover { background: #FFF0EA; color: var(--nf-coral-hover) !important; }

/* Informações de contato */
.nf-fc-contatos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--nf-white); border: 1px solid var(--nf-border); border-radius: 14px; overflow: hidden; margin-top: 26px; text-align: left; }
@media (max-width: 900px) { .nf-fc-contatos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .nf-fc-contatos { grid-template-columns: 1fr; } }
.nf-fc-contato { display: flex; align-items: flex-start; gap: 13px; padding: 22px 20px; border-right: 1px solid var(--nf-border); }
.nf-fc-contato:last-child { border-right: none; }
@media (max-width: 900px) { .nf-fc-contato { border-right: none; border-bottom: 1px solid var(--nf-border); } }
.nf-fc-contato-icone { width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--nf-coral-soft); display: flex; align-items: center; justify-content: center; }
.nf-fc-contato strong { display: block; font: 700 14px/1.3 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy); margin-bottom: 4px; }
.nf-fc-contato span, .nf-fc-contato a { display: block; font: 400 13px/1.5 Inter, sans-serif; color: var(--nf-gray-body); text-decoration: none !important; }
/* links de contato ganham altura de toque sem afastar visualmente as linhas */
.nf-fc-contato a { padding: 6px 0; margin: -6px 0; min-height: 32px; }
.nf-fc-contato a:hover { color: var(--nf-coral); }
.nf-fc-contato .nf-fc-destaque { color: var(--nf-coral-hover); font-weight: 600; }

/* FAQ */
/* align-items: stretch (nao start) pra as duas colunas terem a mesma altura;
   dentro da coluna da ilustracao, o aviso de seguranca desce com margin-top:auto.
   Resultado: as duas colunas TERMINAM na mesma linha, em vez de a da esquerda
   parar antes. */
.nf-fc-faq { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 44px; align-items: stretch; text-align: left; }
.nf-fc-faq > div:last-child { display: flex; flex-direction: column; }
/* Colunas invertidas por `order`, e nao remontando o HTML: assim a ORDEM DE
   LEITURA continua sendo titulo -> perguntas -> aviso de seguranca, que e a
   sequencia logica pra leitor de tela e pra navegacao por teclado. So a
   posicao visual troca. A coluna mais larga segue sendo a das perguntas. */
.nf-fc-faq > div:first-child { order: 2; }
.nf-fc-faq > div:last-child  { order: 1; }
@media (max-width: 900px) {
	.nf-fc-faq { grid-template-columns: 1fr; gap: 28px; }
	/* empilhado, margin-top:auto abriria um vao enorme entre a ilustracao e o
	   aviso; volta pro espacamento fixo */
	.nf-fc-faq .nf-fc-seguranca { margin-top: 16px; }
	/* empilhada, a ilustracao vem logo apos as perguntas: sem recuo no topo.
	   Seletor com especificidade maior de proposito — esta media query fica ANTES
	   da regra base no arquivo, entao perderia o desempate por ordem. */
	.nf-fc-faq > div > img { margin-top: 0; }
	/* empilhado, a inversao perde sentido: as perguntas voltam pra cima */
	.nf-fc-faq > div:first-child { order: 1; }
	.nf-fc-faq > div:last-child  { order: 2; }
}
.nf-fc-faq h2 { font: 700 clamp(22px,2.6vw,28px)/1.2 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy); margin: 0 0 6px !important; }
.nf-fc-faq > div > p { font: 400 14px/1.5 Inter, sans-serif; color: var(--nf-gray-body); margin: 0 0 20px !important; }
.nf-fc-item { background: var(--nf-white); border: 1px solid var(--nf-border); border-radius: 11px; margin-bottom: 10px; }
/* sem isto a coluna das perguntas termina 10px acima da caixa ao lado */
.nf-fc-item:last-of-type { margin-bottom: 0; }
.nf-fc-item[open] { border-color: var(--nf-coral); }
.nf-fc-item summary {
	list-style: none; cursor: pointer;
	padding: 15px 18px;
	font: 700 14.5px/1.35 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy);
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.nf-fc-item summary::-webkit-details-marker { display: none; }
.nf-fc-item[open] summary { color: var(--nf-coral-hover); }
.nf-fc-item summary::after {
	content: ""; flex: none; width: 9px; height: 9px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg); margin-top: -4px;
	transition: transform 0.15s ease;
}
.nf-fc-item[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.nf-fc-item p { font: 400 13.5px/1.6 Inter, sans-serif; color: var(--nf-gray-body); margin: 0 !important; padding: 0 18px 16px; }
/* teto de 400px: a 100% da coluna a ilustracao ficava grande demais contra o
   accordion ao lado. Teto na regra base vale nos dois layouts (2 colunas e
   empilhado), entao nao precisa repetir na media query. */
/* margin-top desce a ilustracao pra ela nao encostar no topo da coluna: assim
   ela fica na altura do accordion ao lado, e nao do titulo. O resto do espaco
   livre continua indo pro margin-top:auto do aviso de seguranca, que segue
   colado no rodape — o alinhamento das bases nao muda. */
.nf-fc-faq img { width: 100%; max-width: 400px; margin: 36px auto 0; height: auto; display: block; border-radius: 14px; }
.nf-fc-seguranca { display: flex; align-items: flex-start; gap: 14px; background: var(--nf-white); border: 1px solid var(--nf-border); border-radius: 14px; padding: 20px; margin-top: auto; }
.nf-fc-seguranca-icone { width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--nf-coral-soft); display: flex; align-items: center; justify-content: center; }
.nf-fc-seguranca h3 { font: 700 15px/1.3 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy); margin: 0 0 5px !important; }
.nf-fc-seguranca p { font: 400 13px/1.55 Inter, sans-serif; color: var(--nf-gray-body); margin: 0 !important; }

/* ===== Central de Downloads ===== */
.nf-crumbs { font: 400 13px/1.4 Inter, sans-serif; color: var(--nf-gray-soft); margin: 0 0 18px !important; }
.nf-crumbs a { color: var(--nf-gray-soft); text-decoration: none !important; }
.nf-crumbs a:hover { color: var(--nf-coral); }
.nf-crumbs span[aria-hidden] { margin: 0 7px; }
.nf-crumbs [aria-current] { color: var(--nf-navy); font-weight: 600; }

.nf-dl-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; text-align: left; }
.nf-dl-hero h1 { font: 700 clamp(28px,3.4vw,42px)/1.15 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy); margin: 0 0 12px !important; letter-spacing: -0.02em; }
.nf-dl-hero p { font: 400 16px/1.6 Inter, sans-serif; color: var(--nf-gray-body); margin: 0 !important; max-width: 420px; }
.nf-dl-hero img { width: 100%; height: auto; display: block; }
@media (max-width: 860px) { .nf-dl-hero { grid-template-columns: 1fr; gap: 24px; } }

.nf-dl-titulo { display: flex; align-items: center; gap: 11px; margin-bottom: 4px; }
.nf-dl-titulo h2 { font: 700 21px/1.2 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy); margin: 0 !important; }
.nf-dl-sub { font: 400 14px/1.5 Inter, sans-serif; color: var(--nf-gray-body); margin: 0 0 20px !important; }

.nf-dl-grid { display: grid; gap: 16px; align-items: stretch; }
.nf-dl-grid--2 { grid-template-columns: repeat(2, 1fr); }
.nf-dl-grid--3 { grid-template-columns: repeat(3, 1fr); }
.nf-dl-grid--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1000px) { .nf-dl-grid--5 { grid-template-columns: repeat(3, 1fr); } .nf-dl-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .nf-dl-grid--2, .nf-dl-grid--3 { grid-template-columns: 1fr; } .nf-dl-grid--5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .nf-dl-grid--5 { grid-template-columns: 1fr; } }

.nf-dl-card {
	position: relative;
	background: var(--nf-white);
	border: 1px solid var(--nf-border);
	border-radius: 14px;
	padding: 20px 18px;
	display: flex;
	flex-direction: column;
	text-align: left;
}
.nf-dl-card--destaque { border: 2px solid var(--nf-coral); }
.nf-dl-selo {
	position: absolute; top: -11px; left: 18px;
	background: var(--nf-coral); color: #fff;
	font: 700 10px/1 Inter, sans-serif; letter-spacing: 0.07em; text-transform: uppercase;
	border-radius: 999px; padding: 6px 12px;
}
.nf-dl-topo { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.nf-dl-icone {
	width: 52px; height: 52px; flex: none;
	border-radius: 12px;
	background: var(--nf-coral-soft);
	display: flex; align-items: center; justify-content: center;
	font: 700 15px/1 "Plus Jakarta Sans", sans-serif; color: var(--nf-coral-hover);
}
.nf-dl-card h3 { font: 700 16px/1.25 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy); margin: 0 0 6px !important; }
.nf-dl-card p { font: 400 13px/1.55 Inter, sans-serif; color: var(--nf-gray-body); margin: 0 !important; }
.nf-dl-card--centro { text-align: center; align-items: center; }
.nf-dl-card--centro .nf-dl-topo { flex-direction: column; align-items: center; gap: 10px; margin-bottom: 10px; }
.nf-dl-acao { margin-top: auto; padding-top: 16px; }

/* Botões de download */
.nf-dl-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	width: 100%;
	border-radius: 9px;
	padding: 12px 14px;
	font: 600 14px/1.2 Inter, sans-serif;
	text-decoration: none !important;
	border: 2px solid var(--nf-coral);
	color: var(--nf-coral-hover) !important;
	background: var(--nf-white);
	transition: background-color 0.15s ease, color 0.15s ease;
	touch-action: manipulation;
}
.nf-dl-btn:hover { background: var(--nf-coral-soft); color: var(--nf-coral-hover) !important; }
.nf-dl-btn--cheio { background: var(--nf-coral); color: #fff !important; border-color: var(--nf-coral); }
.nf-dl-btn--cheio:hover { background: var(--nf-coral-hover); color: #fff !important; }
.nf-dl-btn svg { flex: none; }

/* Faixa "não encontrou o que procura" */
.nf-dl-ajuda {
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	background: var(--nf-coral-soft);
	border-radius: 14px;
	padding: 22px 26px;
	text-align: left;
}
.nf-dl-ajuda-txt { display: flex; align-items: center; gap: 14px; }
.nf-dl-ajuda h3 { font: 700 17px/1.25 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy); margin: 0 0 3px !important; }
.nf-dl-ajuda p { font: 400 13.5px/1.4 Inter, sans-serif; color: var(--nf-gray-body); margin: 0 !important; }
.nf-dl-ajuda .nf-whatsapp-btn { flex: none; }
.nf-dl-ajuda-icone {
	width: 48px; height: 48px; flex: none; border-radius: 50%;
	background: var(--nf-white);
	display: flex; align-items: center; justify-content: center;
}
@media (max-width: 700px) {
	.nf-dl-ajuda { flex-direction: column; align-items: flex-start; }
	.nf-dl-ajuda .nf-whatsapp-btn { width: 100%; text-align: center; }
}

/* Páginas legais (Termos de Uso, Política de Privacidade) — texto corrido.
   Sem h1 aqui: o Astra já renderiza o título da página como h1.entry-title. */
.nf-legal { max-width: 760px; text-align: left; }
.nf-legal .nf-legal-data {
	display: inline-block;
	font: 600 13px/1 Inter, sans-serif;
	color: var(--nf-coral-hover);
	background: var(--nf-coral-soft);
	border-radius: 999px;
	padding: 8px 14px;
	margin: 0 0 24px !important;
}
.nf-legal > p {
	font: 400 15px/1.7 Inter, sans-serif;
	color: var(--nf-gray-body);
	margin: 0 0 14px !important;
}
.nf-legal h2 {
	font: 700 19px/1.3 "Plus Jakarta Sans", sans-serif;
	color: var(--nf-navy);
	margin: 32px 0 12px !important;
	padding-top: 20px;
	border-top: 1px solid var(--nf-border);
}
.nf-legal h2:first-of-type { border-top: none; padding-top: 0; margin-top: 24px !important; }
.nf-legal ul { margin: 0 0 14px !important; padding-left: 20px; }
.nf-legal li {
	font: 400 15px/1.7 Inter, sans-serif;
	color: var(--nf-gray-body);
	margin-bottom: 4px;
}
.nf-legal li::marker { color: var(--nf-coral); }
.nf-legal strong { color: var(--nf-navy); font-weight: 700; }
.nf-legal a { color: var(--nf-coral-hover); }
.nf-legal .nf-legal-contato {
	background: var(--nf-white);
	border: 1px solid var(--nf-border);
	border-radius: 12px;
	padding: 20px 22px;
	margin-top: 8px;
}
.nf-legal .nf-legal-contato p { margin: 0 0 6px !important; }
.nf-legal .nf-legal-contato p:last-child { margin: 0 !important; }

/* Rodapé */
.nf-footer { background: var(--nf-navy-deep); padding: 40px 24px 28px; }
.nf-footer-inner {
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.4fr repeat(4, 1fr);
	gap: 28px;
	text-align: left;
}
@media (max-width: 900px) { .nf-footer-inner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .nf-footer-inner { grid-template-columns: 1fr; } }

.nf-footer-logo { display: block; height: 30px; width: auto; margin-bottom: 12px; }
.nf-footer-brand p { margin: 0 !important; }

/* Redes sociais — URLs ainda são placeholder "/#", trocar quando os perfis existirem */
.nf-footer-social { display: flex; gap: 8px; margin-top: 16px; }
.nf-footer-social a {
	/* 36px de circulo com glifo de 19px (~53%): com os 14px anteriores dentro de
	   um circulo de 30px o icone ocupava menos da metade e ficava boiando.
	   36px tambem passa folgado no minimo de 24px de alvo de toque. */
	width: 36px; height: 36px;
	border-radius: 50%;
	background: rgba(255,255,255,0.14);
	display: flex; align-items: center; justify-content: center;
	transition: background-color 0.15s ease;
}
.nf-footer-social a:hover { background: var(--nf-coral); }
.nf-footer-social svg { width: 19px; height: 19px; fill: #fff; display: block; }
/* Alinhamento optico: no MESMO tamanho de desenho, medi a area de tinta de cada
   glifo e ela e bem diferente — YouTube 180% e Facebook 61% do Instagram (o do
   YouTube e macico e largo; o "f" e estreito e vazado de propósito). Igualar a
   caixa deixa um pesado e outro sumido, entao o tamanho e por icone. */
.nf-footer-social a[aria-label="Facebook"] svg { width: 21px; height: 21px; }
.nf-footer-social a[aria-label="YouTube"] svg  { width: 17px; height: 17px; }
/* Centragem optica: centralizar a CAIXA do svg nao basta, porque o desenho nao
   fica no centro do proprio viewBox. Medi o centroide da tinta contra o centro
   do circulo: o Facebook saia 0,55px a direita e 0,76px acima, e o YouTube
   0,63px acima. O translate compensa o que sobra. */
.nf-footer-social a[aria-label="Facebook"] svg { transform: translate(-0.55px, 0.76px); }
.nf-footer-social a[aria-label="YouTube"] svg  { transform: translateY(0.63px); }
.nf-footer-brand p { font: 400 14px/1.55 Inter, sans-serif; color: rgba(255,255,255,0.65); margin: 0; max-width: 220px; }

/* o markup do rodapé usa <h3>; sem o seletor certo o Astra pinta o título de navy sobre navy */
.nf-footer-col h3 { font: 700 14px/1.3 "Plus Jakarta Sans", sans-serif; color: #fff !important; margin: 0 0 14px !important; }
/* O font-size precisa estar no próprio <li>: como o <a> é inline, ele não encolhe a
   caixa de linha do li, que herdava 18px do corpo (18 × 1,4 = 25,2px por item). */
.nf-footer-col ul { list-style: none; margin: 0 !important; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.nf-footer-col li { font-size: 13.5px; line-height: 1.4; margin: 0; }
/* ATENCAO ao escopo: tem que ser `li a`, e nao `a`. Os chips sociais tambem
   sao <a> dentro de .nf-footer-col, e como esta regra vem depois da
   .nf-footer-social ela vencia o empate de especificidade e trocava o
   `display:flex` dos chips por inline-block — os icones sairam do centro da
   bolinha. Todos os links que precisam de alvo de toque estao dentro de <li>;
   os chips nao. */
.nf-footer-col li a {
	font: 400 13.5px/1.4 Inter, sans-serif;
	color: rgba(255,255,255,0.65);
	text-decoration: none !important;
	/* 16px de altura reprova no minimo de 24px de alvo de toque, e passou a
	   importar quando as colunas deixaram de ficar ocultas no celular. O padding
	   da a altura e a margem negativa devolve o espacamento visual das linhas. */
	display: inline-block; min-height: 24px; padding: 4px 0; margin: -4px 0;
}
.nf-footer-col li a:hover { color: #fff; }
/* o endereço não é link, então o <span> precisa do mesmo tratamento do <a> */
.nf-footer-contact li a,
.nf-footer-contact li span {
	display: inline-flex;
	align-items: flex-start;
	gap: 8px;
	font: 400 13.5px/1.4 Inter, sans-serif;
	color: rgba(255,255,255,0.65);
}
.nf-footer-contact svg { flex: none; margin-top: 1px; }

/* Footer nativo do Astra — só a linha de copyright, estilizada pra combinar com o rodapé customizado.
   O Astra pinta o .site-below-footer-wrap de BRANCO e dá a ele uma borda amarela (#FFCD57);
   como o texto do copyright é branco, ficava branco-sobre-branco (invisível). Daí os !important. */
.site-footer, footer.site-footer {
	background-color: var(--nf-navy-deep) !important;
}
.site-footer .ast-footer-copyright,
.site-footer .ast-footer-copyright p {
	color: rgba(255,255,255,0.6) !important;
	font-size: 13px;
	margin: 0 !important;
}

.site-below-footer-wrap {
	background-color: var(--nf-navy-deep) !important;
	border-top: 1px solid rgba(255,255,255,0.12) !important;
	padding-top: 16px !important;
	padding-bottom: 16px !important;
	min-height: 0 !important;
}
/* O Astra reserva min-height de 80px nessa grade (altura da barra do rodapé no Customizer)
   pra uma única linha de 21px de copyright. */
.site-below-footer-wrap .ast-builder-footer-grid-columns { min-height: 0 !important; }


/* ==========================================================================
   Página Certificado Digital (/certificado/) — prefixo .nf-cp-
   Reaproveita .nf-steps-4 (como funciona), .nf-fc-item (accordion) e
   .nf-fc-faixa (CTA final); só o que é exclusivo desta página vive aqui.
   ========================================================================== */

/* Hero — mesmo padding-top do .nf-hero, senão o vão logo→conteúdo muda de página
   pra página. align-items:start pelo mesmo motivo documentado no hero da Home. */
/* 28px (e não os 42px do .nf-hero) porque aqui o primeiro elemento é o próprio
   eyebrow, e não a fileira de selos da Home — com 42px o vão logo→conteúdo dava
   66px contra os ~52px do resto do site. */
.nf-cp-hero { padding-top: 28px; padding-bottom: 24px; }
.nf-cp-hero-grid {
	display: grid;
	grid-template-columns: 1fr 1.12fr;
	gap: 48px;
	align-items: start;
	text-align: left;
	max-width: 1180px;
}
.nf-cp-hero .nf-lead { margin-bottom: 26px; max-width: 440px; }

.nf-cp-destaques { list-style: none; display: flex; gap: 22px; margin: 0 0 26px !important; padding: 0; flex-wrap: wrap; }
.nf-cp-destaques li { display: flex; align-items: center; gap: 10px; }
.nf-cp-destaque-icone {
	width: 38px; height: 38px; flex: none; border-radius: 50%;
	background: var(--nf-coral-soft);
	display: flex; align-items: center; justify-content: center;
}
.nf-cp-destaques li > span:last-child { font: 400 12px/1.35 Inter, sans-serif; color: var(--nf-gray-body); }
.nf-cp-destaques strong { display: block; font: 700 13.5px/1.3 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy); }

.nf-cp-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.nf-cp-ctas .nf-whatsapp-btn { display: inline-flex; align-items: center; gap: 9px; }

/* o contorno decorativo fica atrás da foto e pode sangrar pra fora da coluna */
.nf-cp-visual { position: relative; }
/* max-width:none é essencial: o `img { max-width:100% }` global limita o contorno
   à largura da coluna e mata o sangramento que ele existe pra fazer. */
.nf-cp-contorno {
	position: absolute; z-index: 1; pointer-events: none;
	width: 116%; max-width: none; height: auto; left: -10%; top: -6%;
}
.nf-cp-foto { position: relative; z-index: 2; width: 100%; height: auto; display: block; border-radius: 16px; }

/* Soluções para pessoas e empresas */
.nf-cp-sol { display: grid; grid-template-columns: 1.32fr 1fr; gap: 40px; align-items: start; text-align: left; margin-top: 30px; }
.nf-cp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.nf-cp-card {
	background: var(--nf-white); border: 1px solid var(--nf-border); border-radius: 14px;
	padding: 24px 20px 22px; text-align: center;
	display: flex; flex-direction: column;
}
.nf-cp-card-icone {
	width: 52px; height: 52px; border-radius: 50%; background: var(--nf-coral-soft);
	display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
}
.nf-cp-tag {
	display: inline-block; background: var(--nf-navy); color: #fff;
	font: 700 10.5px/1 Inter, sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
	padding: 6px 11px; border-radius: 6px; margin-bottom: 12px;
}
.nf-cp-nome { font: 700 19px/1.2 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy); margin: 0 0 4px !important; }
/* gray-body e não gray-soft: o soft (#8A93A3) dá 3,1:1 sobre o branco e reprova no
   mínimo de 4,5:1 para texto pequeno. */
.nf-cp-para { font: 400 13px/1.4 Inter, sans-serif; color: var(--nf-gray-body); margin: 0 0 14px !important; }
.nf-cp-preco { display: flex; align-items: baseline; justify-content: center; gap: 3px; margin: 0 0 18px !important; font-variant-numeric: tabular-nums; }
.nf-cp-preco .moeda    { font: 700 13px/1 Inter, sans-serif; color: var(--nf-navy); }
.nf-cp-preco .valor    { font: 700 29px/1 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy); letter-spacing: -0.02em; }
.nf-cp-preco .centavos { font: 700 16px/1 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy); }
.nf-cp-lista { list-style: none; margin: 0 0 20px !important; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.nf-cp-lista li { position: relative; padding-left: 24px; font: 400 13px/1.45 Inter, sans-serif; color: var(--nf-gray-body); }
/* o check vem de data-URI e não de <svg> no conteúdo: SVG salvo no post é apagado
   pelo kses, e ainda ficaria fora do controle da paleta do tema */
.nf-cp-lista li::before {
	content: ""; position: absolute; left: 0; top: 1px; width: 16px; height: 16px;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23FC4B04'/%3E%3Cpath d='M4.4 8.3l2.3 2.3 4.9-4.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
}
/* 14px de padding vertical fecha 44px de altura — o mínimo de alvo de toque */
.nf-cp-card-btn { display: block; text-align: center; margin-top: auto; padding: 14px 12px !important; font-size: 14px !important; }

.nf-cp-porque-titulo { font: 700 20px/1.3 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy); margin: 0 0 20px !important; text-wrap: balance; }
.nf-cp-porque ul { list-style: none; margin: 0 !important; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.nf-cp-porque li { display: flex; align-items: flex-start; gap: 13px; }
.nf-cp-porque-icone {
	width: 38px; height: 38px; flex: none; border-radius: 50%;
	background: var(--nf-coral-soft);
	display: flex; align-items: center; justify-content: center;
}
.nf-cp-porque li > span:last-child { font: 400 13px/1.5 Inter, sans-serif; color: var(--nf-gray-body); }
.nf-cp-porque strong { display: block; font: 700 14px/1.3 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy); margin-bottom: 2px; }

/* Perguntas frequentes — duas colunas de <details>, itens vindos do .nf-fc-item */
.nf-cp-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; text-align: left; margin-top: 28px; }

/* Faixa final com foto: zera o padding do .nf-fc-faixa pra foto encostar na borda */
.nf-fc-faixa.nf-cp-faixa { grid-template-columns: 1fr auto; padding: 0 0 0 40px; overflow: hidden; align-items: center; gap: 24px; }
.nf-cp-faixa > div { padding: 32px 0; }
.nf-fc-faixa.nf-cp-faixa .nf-cp-faixa-olho {
	font: 700 11px/1 Inter, sans-serif; letter-spacing: 0.1em; text-transform: uppercase;
	color: #fff; margin: 0 0 10px !important;
}
.nf-cp-faixa-foto { width: 420px; max-width: 100%; height: auto; display: block; align-self: flex-end; }
.nf-cp-faixa .nf-fc-cta { margin-top: 18px; }

@media (max-width: 980px) {
	.nf-cp-sol { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 900px) {
	.nf-cp-hero-grid { grid-template-columns: 1fr; gap: 32px; }
	.nf-cp-faq { grid-template-columns: 1fr; }
	.nf-fc-faixa.nf-cp-faixa { grid-template-columns: 1fr; padding: 0 26px; }
	.nf-cp-faixa > div { padding: 28px 0 0; }
	.nf-cp-faixa-foto { width: 100%; max-width: 420px; margin: 0 auto; }
}
@media (max-width: 560px) {
	.nf-cp-cards { grid-template-columns: 1fr; }
	.nf-cp-destaques { gap: 14px 22px; }
	.nf-cp-ctas .nf-whatsapp-btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Página Planos (/planos/) — prefixo .nf-pp-
   Reaproveita .nf-fc-faixa/.nf-cp-faixa (CTA final) e .nf-whatsapp-btn.
   ========================================================================== */

/* Texto só pra leitor de tela — os "✓" da tabela não dizem nada sozinhos.
   ARMADILHA: sendo position:absolute, ele se posiciona contra o primeiro
   ancestral posicionado. Sem nenhum, cai no bloco inicial (o documento) e
   ESCAPA de qualquer contêiner com overflow — foi o que deu scroll horizontal
   na página inteira aqui. Todo contêiner que rola e contenha .nf-sr precisa de
   position: relative. */
.nf-sr {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Hero — mesmo 28px do hero da Certificado: aqui também o primeiro elemento é
   o eyebrow, então o vão logo→conteúdo bate os 52px do resto do site. */
.nf-pp-hero { padding-top: 28px; padding-bottom: 24px; }
/* traço antes do eyebrow, como no hero da Home e no modelo desta página */
.nf-pp-hero .nf-eyebrow::before {
	content: ""; width: 18px; height: 2px; background: var(--nf-coral); display: inline-block;
}
.nf-pp-hero-grid {
	display: grid; grid-template-columns: 1fr 1.02fr; gap: 44px;
	align-items: start; text-align: left; max-width: 1180px;
}
.nf-pp-hero .nf-h1 { font-size: clamp(31px, 3.5vw, 44px); }
.nf-pp-hero .nf-lead { margin-bottom: 24px; max-width: 430px; }

.nf-pp-destaques { list-style: none; display: flex; flex-wrap: wrap; gap: 26px; margin: 0 0 26px !important; padding: 0; }
.nf-pp-destaques li { display: flex; align-items: center; gap: 8px; font: 600 13.5px/1.3 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy); }
.nf-pp-destaque-icone { flex: none; display: inline-flex; }

.nf-pp-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.nf-pp-ctas .nf-whatsapp-btn { display: inline-flex; align-items: center; gap: 9px; }

/* Visual do hero: recorte sobre branco, com o contorno decorativo atrás e a
   grade de pontos coral à direita. O padding-top é em % (logo, relativo à
   largura) porque é ele que abre o espaço onde o contorno sobe acima da foto —
   assim a proporção se mantém em qualquer largura, sem media query. */
/* sem padding-top: no modelo a foto começa no topo da coluna e é o contorno que
   desce um pouco pra abraçá-la. Com padding, a foto caía pra baixo do contorno e
   sobrava um vazio grande no canto superior esquerdo do hexágono. */
.nf-pp-visual { position: relative; }
/* max-width:none é essencial: o `img { max-width:100% }` global limitaria o
   contorno à largura da coluna e mataria o sangramento. Mesmo caso da .nf-cp-contorno. */
.nf-pp-contorno {
	position: absolute; z-index: 1; pointer-events: none;
	width: 100%; max-width: none; height: auto; left: 0; top: 3%;
}
/* o cartão "Atendimento online" e a grade de pontos vêm dentro da própria arte,
   então não sobra nada pra posicionar por CSS. Os 88% (e não 100%) são porque a
   arte veio aparada na caixa alfa: a 100% a pessoa fica maior que no modelo e
   sobra um vazio embaixo dos botões, já que a coluna da foto passa da de texto. */
.nf-pp-foto { position: relative; z-index: 2; width: 82%; height: auto; display: block; margin-left: auto; }

/* Comparativo */
.nf-pp-sub { font: 400 14.5px/1.55 Inter, sans-serif; color: var(--nf-gray-body); margin: 0 0 26px !important; }
/* a tabela é larga de propósito: rola dentro da própria caixa em vez de
   empurrar a página inteira pro scroll horizontal */
.nf-pp-tabela-wrap { position: relative; overflow-x: auto; padding-top: 11px; border-radius: 16px; border: 1px solid var(--nf-border); background: var(--nf-white); }
.nf-pp-tabela-wrap:focus-visible { outline: 2px solid var(--nf-coral); outline-offset: 2px; }
.nf-pp-tabela { width: 100%; min-width: 860px; border-collapse: separate; border-spacing: 0; text-align: center; }
.nf-pp-tabela th, .nf-pp-tabela td { padding: 8px 14px; border-bottom: 1px solid var(--nf-border); font: 400 13px/1.4 Inter, sans-serif; color: var(--nf-gray-body); vertical-align: middle; }
.nf-pp-tabela tbody th, .nf-pp-th-rec { text-align: left; font: 600 13px/1.4 "Plus Jakarta Sans", sans-serif !important; color: var(--nf-navy) !important; white-space: nowrap; }
.nf-pp-tabela tbody th { position: relative; padding-left: 30px; }
.nf-pp-tabela tbody th::before {
	content: ""; position: absolute; left: 14px; top: 50%; margin-top: -3px;
	width: 6px; height: 6px; border-radius: 50%; background: var(--nf-coral); opacity: 0.55;
}
.nf-pp-tabela thead th { vertical-align: top; padding: 18px 14px 14px; border-bottom: 1px solid var(--nf-border); }
.nf-pp-tabela thead th.nf-pp-th-rec { font: 700 11px/1 Inter, sans-serif !important; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nf-coral) !important; vertical-align: top; }
.nf-pp-plano-icone { display: block; margin-bottom: 8px; }
.nf-pp-plano-nome { display: block; font: 700 17px/1.2 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy); margin-bottom: 8px; }
.nf-pp-plano-desc { display: block; font: 400 12.5px/1.45 Inter, sans-serif; color: var(--nf-gray-body); margin-bottom: 12px; min-height: 46px; }
.nf-pp-preco { display: flex; align-items: baseline; justify-content: center; gap: 4px; font-variant-numeric: tabular-nums; }
.nf-pp-preco .moeda { font: 700 13px/1 Inter, sans-serif; color: var(--nf-navy); }
.nf-pp-preco .valor { font: 700 24px/1 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy); letter-spacing: -0.02em; }
.nf-pp-preco .periodo { font: 400 12.5px/1 Inter, sans-serif; color: var(--nf-gray-body); }

/* coluna "Mais popular": moldura coral contínua feita com bordas laterais */
.nf-pp-col-destaque { background: #FFF8F5; border-left: 2px solid var(--nf-coral) !important; border-right: 2px solid var(--nf-coral) !important; }
/* sem isto o topo da coluna fica com um degrau de 1,5px em relação à lateral */
.nf-pp-tabela tbody .nf-pp-col-destaque { border-top: none; }
.nf-pp-tabela thead .nf-pp-col-destaque { border-top: 2px solid var(--nf-coral); border-top-left-radius: 12px; border-top-right-radius: 12px; position: relative; padding-top: 30px; }
.nf-pp-tabela tfoot .nf-pp-col-destaque { border-bottom: 2px solid var(--nf-coral) !important; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
.nf-pp-tabela thead .nf-pp-col-destaque .nf-pp-plano-nome,
.nf-pp-tabela thead .nf-pp-col-destaque .nf-pp-preco .valor { color: var(--nf-coral-hover); }
.nf-pp-badge {
	position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
	background: var(--nf-coral); color: #fff; border-radius: 999px; padding: 4px 13px;
	font: 700 10px/1 Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}

.nf-pp-sim { display: inline-block; width: 19px; height: 19px; background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23FC4B04'/%3E%3Cpath d='M4.4 8.3l2.3 2.3 4.9-4.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 19px 19px; }
.nf-pp-nao { display: inline-block; width: 19px; height: 19px; position: relative; }
.nf-pp-nao::before { content: ""; position: absolute; left: 4px; right: 4px; top: 9px; height: 1.5px; background: #97A1B0; border-radius: 2px; }

.nf-pp-tabela tfoot td { border-bottom: none; padding: 16px 14px 20px; }
/* min-height fecha os 44px de alvo de toque: o botao coral nao tem a borda de
   1px do ghost, e sem isso ficava 42px contra 44px dos outros tres. */
.nf-pp-btn { display: flex; align-items: center; justify-content: center; min-height: 44px; text-align: center; padding: 12px !important; font-size: 13.5px !important; }

/* Qual plano combina com o seu momento */
.nf-pp-momentos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 28px; text-align: center; }
.nf-pp-momento { background: var(--nf-white); border: 1px solid var(--nf-border); border-radius: 14px; padding: 26px 20px 22px; display: flex; flex-direction: column; }
.nf-pp-momento-icone { display: block; margin: 0 auto 14px; }
.nf-pp-momento h3 { font: 700 15px/1.3 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy); margin: 0 0 8px !important; text-wrap: balance; }
.nf-pp-momento p { font: 400 13px/1.5 Inter, sans-serif; color: var(--nf-gray-body); margin: 0 0 16px !important; }
/* o margin-top:auto vive no invólucro, e não no <a>: quem é filho flex do card
   é o div. (Antes o link ficava solto e o wpautop o embrulhava num <p>, que
   passava a ser o filho — por isso os 4 links não alinhavam entre si.) */
.nf-pp-momento-acao { margin-top: auto; }
.nf-pp-momento a {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-height: 44px; font: 600 13.5px/1.2 Inter, sans-serif;
	color: var(--nf-coral-hover) !important; text-decoration: none !important;
}
.nf-pp-momento a:hover { color: var(--nf-coral) !important; }

@media (max-width: 980px) {
	.nf-pp-momentos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
	.nf-pp-hero-grid { grid-template-columns: 1fr; gap: 34px; }
	.nf-pp-visual { max-width: 520px; }
}
@media (max-width: 560px) {
	.nf-pp-momentos { grid-template-columns: 1fr; }
	.nf-pp-ctas .nf-whatsapp-btn { width: 100%; justify-content: center; }
	.nf-pp-destaques { gap: 12px 22px; }
}

/* ==========================================================================
   Página Recursos (/recursos/) — prefixo .nf-rc-
   As "telas do sistema" dos blocos são HTML/CSS, e não imagem: ficam nítidas
   em qualquer tela, não pesam nada e dá pra corrigir um número sem reexportar
   arte. Todas levam aria-hidden e nenhum controle real — são ilustração do
   produto, não formulário; leitor de tela pula, e ninguém tenta preencher.
   ========================================================================== */

.nf-rc-hero { padding-top: 28px; padding-bottom: 24px; }
.nf-rc-hero-grid {
	display: grid; grid-template-columns: 1fr 1.22fr; gap: 44px;
	align-items: center; text-align: left; max-width: 1180px;
}
.nf-rc-hero .nf-lead { margin-bottom: 24px; max-width: 440px; }
.nf-rc-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }
.nf-rc-ctas .nf-whatsapp-btn { display: inline-flex; align-items: center; gap: 9px; }

.nf-rc-selos { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 !important; padding: 0; }
.nf-rc-selos li { display: flex; align-items: flex-start; gap: 9px; }
.nf-rc-selo-icone { flex: none; margin-top: 1px; }
.nf-rc-selos li > span:last-child { font: 400 11px/1.35 Inter, sans-serif; color: var(--nf-gray-body); }
.nf-rc-selos strong { display: block; font: 700 12.5px/1.3 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy); }

.nf-rc-visual { position: relative; }
.nf-rc-dashboard { width: 100%; height: auto; display: block; }

/* Chips de navegação entre os recursos */
.nf-rc-chips { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 26px; }
.nf-rc-chips a {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
	min-height: 84px; padding: 16px 10px;
	background: var(--nf-white); border: 1px solid var(--nf-border); border-radius: 12px;
	font: 600 13px/1.25 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy) !important;
	text-align: center; text-decoration: none !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.nf-rc-chips a:hover { border-color: var(--nf-coral); box-shadow: 0 4px 14px rgba(252,75,4,0.10); }

/* Blocos de recurso */
.nf-rc-bloco {
	display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 34px; align-items: center;
	background: var(--nf-white); border: 1px solid var(--nf-border); border-radius: 16px;
	padding: 26px 28px; margin-bottom: 16px; text-align: left;
	scroll-margin-top: 80px;
}
.nf-rc-bloco:last-child { margin-bottom: 0; }
.nf-rc-bloco-icone { display: block; margin-bottom: 12px; }
.nf-rc-bloco h2 { font: 700 22px/1.2 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy); margin: 0 0 6px !important; }
.nf-rc-bloco > div > p { font: 400 14px/1.5 Inter, sans-serif; color: var(--nf-gray-body); margin: 0 0 16px !important; }
.nf-rc-bloco ul { list-style: none; margin: 0 !important; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.nf-rc-bloco li { position: relative; padding-left: 26px; font: 400 13.5px/1.45 Inter, sans-serif; color: var(--nf-ink); }
/* check em data-URI: SVG salvo no post é apagado pelo kses, e assim a marca
   acompanha a paleta do tema em vez de ficar presa no conteúdo */
.nf-rc-bloco li::before {
	content: ""; position: absolute; left: 0; top: 1px; width: 17px; height: 17px;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.2' fill='none' stroke='%230B2047' stroke-width='1.4'/%3E%3Cpath d='M4.6 8.2l2.2 2.2 4.6-4.6' fill='none' stroke='%230B2047' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 17px 17px;
}

/* --- telas do sistema (ilustração, não interface real) --- */
.nf-rc-tela {
	background: var(--nf-white); border: 1px solid var(--nf-border); border-radius: 12px;
	padding: 14px 15px; font-family: Inter, sans-serif; overflow: hidden;
}
.nf-rc-tela-titulo { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 700 12.5px/1.3 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy); margin: 0 0 12px !important; }
.nf-rc-tela-titulo--sec { margin: 16px 0 10px !important; }
.nf-rc-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.nf-rc-campo { display: block; }
.nf-rc-campo em { display: block; font: 600 9.5px/1 Inter, sans-serif; font-style: normal; color: var(--nf-gray-body); margin-bottom: 5px; }
.nf-rc-select, .nf-rc-input {
	display: block; background: var(--nf-white); border: 1px solid var(--nf-border); border-radius: 6px;
	padding: 7px 9px; font: 400 10.5px/1.2 Inter, sans-serif; color: var(--nf-navy);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nf-rc-select { position: relative; padding-right: 22px; }
.nf-rc-select::after { content: ""; position: absolute; right: 9px; top: 50%; width: 5px; height: 5px; margin-top: -4px; border-right: 1.4px solid #97A1B0; border-bottom: 1.4px solid #97A1B0; transform: rotate(45deg); }
.nf-rc-select--vazio, .nf-rc-input--vazio { color: var(--nf-gray-soft); }
.nf-rc-select--mini { display: inline-block; padding: 5px 20px 5px 9px; font-size: 9.5px; font-weight: 500; }
.nf-rc-mt { border: 1px solid var(--nf-border); border-radius: 8px; overflow: hidden; }
.nf-rc-mt-cab, .nf-rc-mt-linha { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 8px; align-items: center; }
.nf-rc-mt-cab { background: #F7F8FB; padding: 8px 10px; font: 600 9.5px/1 Inter, sans-serif; color: var(--nf-gray-body); }
.nf-rc-mt-linha { padding: 8px 10px; }
.nf-rc-tela-pe { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.nf-rc-link { font: 600 10.5px/1 Inter, sans-serif; color: #2B5BD7; }
.nf-rc-total { text-align: right; }
.nf-rc-total em { display: block; font: 400 9.5px/1 Inter, sans-serif; font-style: normal; color: var(--nf-gray-body); margin-bottom: 3px; }
.nf-rc-total strong { font: 700 13px/1 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy); }
.nf-rc-btn-falso {
	display: inline-block; background: var(--nf-coral); color: #fff;
	border-radius: 6px; padding: 8px 16px; font: 700 10.5px/1 Inter, sans-serif; white-space: nowrap;
}
.nf-rc-btn-falso--verde { background: #17A34A; display: block; text-align: center; padding: 9px 16px; }
.nf-rc-btn-falso--navy { background: var(--nf-navy); font-size: 9.5px; padding: 7px 13px; }

/* PDV */
.nf-rc-tela--pdv { padding: 0; }
.nf-rc-pdv-cab { background: var(--nf-navy); color: #fff; font: 700 11.5px/1 "Plus Jakarta Sans", sans-serif; margin: 0 !important; padding: 11px 15px; }
.nf-rc-pdv { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; padding: 14px 15px; }
.nf-rc-pdv-itens { display: flex; flex-direction: column; }
.nf-rc-pdv-itens span { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--nf-border); font: 400 10.5px/1.2 Inter, sans-serif; color: var(--nf-gray-body); }
.nf-rc-pdv-itens span:last-child { border-bottom: none; }
.nf-rc-pdv-itens strong { font: 600 10.5px/1.2 Inter, sans-serif; color: var(--nf-navy); }
.nf-rc-pdv-total { background: #F7F8FB; border-radius: 8px; padding: 12px; }
.nf-rc-pdv-total-linha { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 11px; }
.nf-rc-pdv-total-linha em { font: 600 10.5px/1 Inter, sans-serif; font-style: normal; color: var(--nf-gray-body); }
.nf-rc-pdv-total-linha strong { font: 700 15px/1 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy); }
.nf-rc-pdv-pag { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 11px; }
.nf-rc-pdv-pag span { background: var(--nf-white); border: 1px solid var(--nf-border); border-radius: 6px; padding: 7px 4px; text-align: center; font: 500 9.5px/1 Inter, sans-serif; color: var(--nf-navy); }

/* tabelas das telas */
.nf-rc-tab { border: 1px solid var(--nf-border); border-radius: 8px; overflow: hidden; }
.nf-rc-tab-cab, .nf-rc-tab-linha { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 8px; align-items: center; padding: 8px 11px; }
.nf-rc-tab--5 .nf-rc-tab-cab, .nf-rc-tab--5 .nf-rc-tab-linha { grid-template-columns: 1.5fr 1.1fr 0.9fr 0.9fr 0.9fr; }
.nf-rc-tab-cab { background: #F7F8FB; font: 600 9.5px/1 Inter, sans-serif; color: var(--nf-gray-body); }
.nf-rc-tab-linha { border-top: 1px solid var(--nf-border); font: 400 10.5px/1.3 Inter, sans-serif; color: var(--nf-navy); }
.nf-rc-tab-linha span:first-child { font-weight: 500; }
.nf-rc-tag { justify-self: start; background: #E8F6ED; color: #14803C; border-radius: 999px; padding: 4px 9px; font: 600 9px/1 Inter, sans-serif; }

/* financeiro */
.nf-rc-fin { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.nf-rc-fin span { background: #F7F8FB; border-radius: 8px; padding: 11px 12px; }
.nf-rc-fin em { display: block; font: 400 9.5px/1 Inter, sans-serif; font-style: normal; color: var(--nf-gray-body); margin-bottom: 6px; }
.nf-rc-fin strong { font: 700 14px/1 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy); }
.nf-rc-verde { color: #14803C !important; }
.nf-rc-barras { display: flex; align-items: flex-end; gap: 8px; height: 74px; padding: 0 2px; }
.nf-rc-barras span { flex: 1; background: #17A34A; border-radius: 3px 3px 0 0; }
.nf-rc-barra--neg { background: var(--nf-coral) !important; }

/* Suporte Humano */
.nf-rc-suporte {
	position: relative; overflow: hidden; border-radius: 12px; min-height: 232px;
	background: linear-gradient(90deg, #E9EDF6 0%, #F7F9FC 45%, #FFFFFF 70%);
	display: flex; align-items: center;
}
.nf-rc-suporte-txt { position: relative; z-index: 2; padding: 22px 24px; max-width: 56%; }
.nf-rc-suporte-txt p { font: 700 clamp(16px,1.7vw,20px)/1.35 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy); margin: 0 0 18px !important; }
.nf-rc-suporte-btn {
	display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
	background: var(--nf-white); border: 1px solid var(--nf-navy); border-radius: 8px;
	padding: 11px 18px; font: 600 13px/1 Inter, sans-serif;
	color: var(--nf-navy) !important; text-decoration: none !important;
}
.nf-rc-suporte-btn:hover { background: var(--nf-navy); color: #fff !important; }
.nf-rc-suporte-foto { position: absolute; right: 0; bottom: 0; z-index: 1; width: 56%; height: auto; display: block; }

/* Tudo conectado */
.nf-rc-sub { font: 400 14.5px/1.55 Inter, sans-serif; color: var(--nf-gray-body); margin: 0 auto 28px !important; max-width: 560px; }
.nf-rc-fluxo { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.nf-rc-passo {
	display: flex; flex-direction: column; align-items: center; gap: 11px;
	flex: 1 1 0; max-width: 156px; min-width: 104px; padding: 24px 12px;
	background: var(--nf-white); border: 1px solid var(--nf-border); border-radius: 12px;
	font: 600 14px/1.2 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy);
}
/* o tamanho vem do CSS e não do atributo do <svg>: assim ajusto sem regravar a página */
.nf-rc-passo-icone svg { width: 32px; height: 32px; }
.nf-rc-seta { flex: none; line-height: 0; }

/* Faixa final */
.nf-rc-faixa {
	position: relative; overflow: hidden; background: var(--nf-coral); border-radius: 16px;
	display: grid; grid-template-columns: 1.15fr 0.95fr auto; gap: 26px; align-items: center;
	padding: 30px 0 30px 34px; text-align: left;
}
.nf-rc-faixa-olho { font: 700 11px/1 Inter, sans-serif; letter-spacing: 0.09em; text-transform: uppercase; color: #fff; margin: 0 0 12px !important; }
.nf-rc-faixa h2 { font: 700 clamp(19px,2.2vw,26px)/1.28 "Plus Jakarta Sans", sans-serif; color: #fff; margin: 0 !important; text-wrap: balance; }
.nf-rc-faixa-acao p { font: 400 13.5px/1.5 Inter, sans-serif; color: #fff; margin: 0 0 14px !important; }
.nf-rc-faixa-btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
	background: var(--nf-white); border-radius: 8px; padding: 12px 22px;
	font: 600 14px/1 Inter, sans-serif; color: var(--nf-coral-hover) !important; text-decoration: none !important;
}
.nf-rc-faixa-btn:hover { background: #FFF0EA; }
.nf-rc-faixa-foto { width: 330px; max-width: 100%; height: auto; display: block; align-self: flex-end; }

@media (max-width: 1080px) {
	.nf-rc-chips { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
	.nf-rc-hero-grid { grid-template-columns: 1fr; gap: 30px; }
	.nf-rc-bloco { grid-template-columns: 1fr; gap: 22px; }
	.nf-rc-faixa { grid-template-columns: 1fr; padding: 26px 24px; }
	.nf-rc-faixa-foto { width: 100%; max-width: 420px; margin: 4px auto 0; }
	.nf-rc-suporte-txt { max-width: 62%; }
}
/* entre 620 e 900px os 5 cards quebravam em duas linhas com larguras diferentes,
   o que fica pior do que empilhar; então empilha já a partir de 820px */
@media (max-width: 820px) {
	.nf-rc-fluxo { flex-direction: column; }
	.nf-rc-fluxo .nf-rc-seta { transform: rotate(90deg); }
	.nf-rc-passo { flex: none; width: 100%; max-width: 260px; }
}
@media (max-width: 620px) {
	.nf-rc-selos { grid-template-columns: 1fr 1fr; }
	.nf-rc-chips { grid-template-columns: 1fr 1fr; }
	.nf-rc-ctas .nf-whatsapp-btn { width: 100%; justify-content: center; }
	/* no celular a foto cobriria o texto — some, e o card fica só com a mensagem */
	.nf-rc-suporte-foto { display: none; }
	.nf-rc-suporte-txt { max-width: none; }
	.nf-rc-pdv { grid-template-columns: 1fr; }
	.nf-rc-campos { grid-template-columns: 1fr; }
}
/* as telas são densas: abaixo de 520px encolhem em bloco pra não quebrar o grid */
@media (max-width: 520px) {
	.nf-rc-tela { font-size: 92%; }
	/* tres cards de resumo nao cabem em 375px: o terceiro vazava da tela */
	.nf-rc-fin { grid-template-columns: 1fr; }
	.nf-rc-tab-cab span:nth-child(n+4), .nf-rc-tab-linha span:nth-child(n+4) { display: none; }
	.nf-rc-tab-cab, .nf-rc-tab-linha { grid-template-columns: 1.6fr 1fr 1fr; }
	.nf-rc-tab--5 .nf-rc-tab-cab, .nf-rc-tab--5 .nf-rc-tab-linha { grid-template-columns: 1.5fr 1.1fr 0.9fr; }
}



/* ==========================================================================
   Banner de cookies (LGPD) + painel de preferências
   "Recusar" tem o mesmo tamanho e peso de "Aceitar" de propósito: negar
   precisa ser tão fácil quanto consentir. Nada de recusa escondida.
   ========================================================================== */
.nf-cookies {
	position: fixed; z-index: 9999; left: 16px; right: 16px; bottom: 16px;
	max-width: 720px; margin: 0 auto;
	background: var(--nf-white); border: 1px solid var(--nf-border); border-radius: 14px;
	box-shadow: 0 12px 40px rgba(11,32,71,0.18);
	padding: 18px 20px;
	display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.nf-cookies[hidden] { display: none; }
.nf-cookies-txt { flex: 1 1 320px; min-width: 0; }
.nf-cookies-txt strong { display: block; font: 700 15px/1.3 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy); margin-bottom: 5px; }
.nf-cookies-txt p { font: 400 13px/1.55 Inter, sans-serif; color: var(--nf-gray-body); margin: 0 !important; }
.nf-cookies-txt a { color: var(--nf-coral-hover); text-decoration: underline; }
.nf-cookies-acoes { display: flex; gap: 9px; flex-wrap: wrap; }

.nf-ck-btn {
	min-height: 44px; padding: 11px 20px; border-radius: 8px; cursor: pointer;
	font: 600 13.5px/1.2 Inter, sans-serif; border: 1px solid transparent;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.nf-ck-btn--aceitar { background: var(--nf-coral); color: #fff; }
.nf-ck-btn--aceitar:hover { background: var(--nf-coral-hover); }
/* mesma altura e mesmo padding do "Aceitar" — só o preenchimento muda */
.nf-ck-btn--recusar { background: var(--nf-white); color: var(--nf-navy); border-color: var(--nf-navy); }
.nf-ck-btn--recusar:hover { background: var(--nf-navy); color: #fff; }
.nf-ck-btn--config { background: transparent; color: var(--nf-gray-body); border-color: var(--nf-border); }
.nf-ck-btn--config:hover { border-color: var(--nf-navy); color: var(--nf-navy); }
.nf-ck-btn:focus-visible { outline: 2px solid var(--nf-coral); outline-offset: 2px; }

.nf-ck-modal {
	border: none; border-radius: 16px; padding: 26px; max-width: 520px; width: calc(100% - 32px);
	color: var(--nf-ink); box-shadow: 0 20px 60px rgba(11,32,71,0.28);
}
.nf-ck-modal::backdrop { background: rgba(11,32,71,0.45); }
.nf-ck-modal h2 { font: 700 20px/1.25 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy); margin: 0 0 6px !important; }
.nf-ck-intro { font: 400 13px/1.55 Inter, sans-serif; color: var(--nf-gray-body); margin: 0 0 18px !important; }
.nf-ck-item {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	border: 1px solid var(--nf-border); border-radius: 11px; padding: 14px 16px; margin-bottom: 10px;
}
.nf-ck-item strong { display: block; font: 700 14px/1.3 "Plus Jakarta Sans", sans-serif; color: var(--nf-navy); margin-bottom: 3px; }
.nf-ck-item span { font: 400 12.5px/1.5 Inter, sans-serif; color: var(--nf-gray-body); }
.nf-ck-fixo { flex: none; font: 600 12px/1 Inter, sans-serif; color: var(--nf-gray-body) !important; white-space: nowrap; }
.nf-ck-check { flex: none; width: 22px; height: 22px; accent-color: var(--nf-coral); cursor: pointer; }
.nf-ck-modal-acoes { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 18px; }

/* botão "Gerenciar cookies" na seção Cookies da Política — o caminho de
   revogação vive aqui, e não no rodapé (pedido do Thiago). Fundo claro. */
.nf-ck-reabrir {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
	margin-top: 4px; padding: 11px 18px; cursor: pointer;
	background: var(--nf-white); border: 1px solid var(--nf-navy); border-radius: 8px;
	font: 600 13.5px/1.2 Inter, sans-serif; color: var(--nf-navy);
	transition: background-color 0.15s ease, color 0.15s ease;
}
.nf-ck-reabrir:hover { background: var(--nf-navy); color: #fff; }
.nf-ck-reabrir:focus-visible { outline: 2px solid var(--nf-coral); outline-offset: 2px; }

@media (max-width: 560px) {
	.nf-cookies { left: 10px; right: 10px; bottom: 10px; padding: 16px; }
	.nf-cookies-acoes { width: 100%; }
	.nf-ck-btn { flex: 1 1 auto; }
	.nf-ck-item { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ==========================================================================
   Escala tipográfica das páginas de ARTIGO (single post)
   Vivia no "CSS Adicional" do Customizer e se perdeu (option vazia, sem post
   custom_css) — provável baixa na migração staging→produção. Movida pra cá, no
   tema filho versionado, pra não depender de option volátil de novo.
   Sem isto o post cai no padrão do Astra, com o H2 (48px) MAIOR que o H1 (32px).
   Valores da correção original (2026-08-16): H1 34 · H2 25 · H3 19 · corpo 17/1,75.
   ========================================================================== */
.single-post .entry-header .entry-title { font-size: 34px !important; line-height: 1.2 !important; }
.single-post .entry-content { font-size: 17px; line-height: 1.75; }
.single-post .entry-content p { font-size: 17px; line-height: 1.75; }
.single-post .entry-content h2 { font-size: 25px !important; line-height: 1.3 !important; margin-top: 1.6em; }
.single-post .entry-content h3 { font-size: 19px !important; line-height: 1.35 !important; margin-top: 1.4em; }
@media (max-width: 768px) {
	.single-post .entry-header .entry-title { font-size: 26px !important; }
	.single-post .entry-content h2 { font-size: 21px !important; }
	.single-post .entry-content h3 { font-size: 16px !important; }
}

/* ============================================================
   G1 — COR DO ÍCONE DO MENU NO CELULAR.  NÃO REMOVER.

   O Astra pinta o hambúrguer com mobile-header-toggle-btn-color, que aponta
   para var(--ast-global-color-5) = #FFFFFF. Como o cabeçalho também é branco,
   o botão fica com contraste 1:1 — invisível — e o site fica SEM NAVEGAÇÃO
   NENHUMA no celular.

   Esta regra já foi aplicada em 16/08 e se perdeu na reescrita do style.css
   entre 17 e 18/08. A regressão passou um dia despercebida porque NÃO aparece
   em curl: só renderizando em 430px e medindo a cor computada.

   Ver "Correções que NÃO podem se perder" no MEMORY.md do setor.
   ============================================================ */
.ast-mobile-menu-trigger-minimal .ast-mobile-svg,
.ast-mobile-menu-trigger-fill .ast-mobile-svg,
.menu-toggle .ast-mobile-svg {
	fill: var(--nf-navy, #0B2047) !important;
}
.ast-mobile-menu-trigger-minimal,
.menu-toggle {
	color: var(--nf-navy, #0B2047) !important;
	border-color: transparent !important;
}

/* ============================================================
   G2 — PISO DE 12px NO TEXTO DE APOIO, NO CELULAR.  NÃO REMOVER.

   Medido em 430px, o que saía abaixo de 12px: os selos do hero (título a
   11px e descrição a 10,5px), o eyebrow das seções (11px) e a pílula
   "Mais popular" (11px). Abaixo de 12px o texto fica difícil de ler no
   celular e é o que o Google sinaliza como "texto pequeno demais".

   Os tamanhos originais NÃO vêm de regra direta: o container define o valor
   e os filhos herdam ou usam em. Por isso as regras listam container e
   filhos juntos, e por isso o !important — uma classe simples não vence
   herança + em.

   Só mobile de propósito: no desktop a escala segue a medição da referência
   visual e não deve ser tocada.

   Esta regra já foi aplicada em 16/08 e se perdeu na reescrita do style.css
   entre 17 e 18/08. Ver "Correções que NÃO podem se perder" no MEMORY.md.
   ============================================================ */
@media (max-width: 900px) {
	.nf-hero-trust,
	.nf-hero-trust strong,
	.nf-hero-trust span {
		font-size: 12px !important;
	}
	.nf-eyebrow {
		font-size: 12px !important;
	}
	.nf-plan-badge {
		font-size: 12px !important;
	}

	/* --- Onda 1 acrescentada em 18/08 -------------------------------
	   A regra acima foi escrita em 16/08 mirando o que existia naquele
	   dia. /recursos/, /planos/, /certificado/ e /downloads/ foram
	   construídas ou refeitas depois, com classes novas que ela não
	   alcançava — por isso a verificação de 18/08 achou 16 elementos
	   ainda abaixo de 12px. Não é regressão: é cobertura que faltava.

	   NÃO entram aqui, de propósito, os 4 rótulos micro que vivem dentro
	   de componentes já ajustados fino ("Mais popular" da tabela de
	   planos, "Recomendado" do /downloads/, "A1 · 12 meses" dos cards de
	   certificado) — ficaram para uma segunda onda, com print, porque
	   mexem em caixa que teve o espaçamento calibrado à mão.

	   A miniatura da tela do ERP em /recursos/ (.nf-rc-input,
	   .nf-rc-select, .nf-rc-btn-falso e as linhas das tabelas falsas)
	   fica FORA do piso de propósito: são 64 elementos que simulam uma
	   interface em tamanho reduzido, não texto de leitura. Subir para
	   12px quebraria o mockup. */
	.nf-hero-badge,
	.nf-cta-pill {
		font-size: 12px !important;
	}
	.nf-rc-selos,
	.nf-rc-selos li,
	.nf-rc-selos strong,
	.nf-rc-selos span {
		font-size: 12px !important;
	}
	.nf-rc-faixa-olho,
	.nf-cp-faixa-olho {
		font-size: 12px !important;
	}
	.entry-meta,
	.entry-meta a,
	.entry-meta span {
		font-size: 12px !important;
	}

	/* --- Onda 2 acrescentada em 18/08 -------------------------------
	   Os 5 rótulos micro que vivem dentro de componentes com espaçamento
	   calibrado à mão, separados da onda 1 justamente por isso.

	   Medido antes de aplicar, pra saber o que observar depois:
	   .nf-pp-badge tinha 111x18px num cabeçalho de coluna de 171px (folga
	   de 60px, então subir de 10 pra 12px cabe); .nf-pp-th-rec ficava numa
	   coluna de 199px; .nf-dl-selo é position:absolute, ou seja não empurra
	   o card; .nf-cp-tag vive dentro de um <p> nos cards de 476px.

	   Se um dia a tabela de planos passar dos 859px de largura total ou o
	   cabeçalho crescer além dos 205px, olhar aqui primeiro. */
	/* Seletor longo de proposito: existe .nf-pp-tabela thead th.nf-pp-th-rec
	   com 11px !important (especificidade 0,2,2). Com !important dos dois
	   lados quem decide e' a especificidade, nao a ordem no arquivo - uma
	   classe simples aqui nao venceria. */
	.nf-pp-tabela thead th.nf-pp-th-rec,
	.nf-pp-badge {
		font-size: 12px !important;
	}
	.nf-cp-tag {
		font-size: 12px !important;
	}
	.nf-dl-selo {
		font-size: 12px !important;
	}
}

/* ============================================================
   Botão flutuante do WhatsApp: expande para a esquerda no hover.

   Colapsado continua idêntico ao que era: 56x56 no desktop, 50x50 no
   celular, coral, canto inferior direito. A geometria vem do padding
   (14 + ícone 28 + 14 = 56), e o border-radius de 28px dá círculo
   perfeito nesse tamanho e vira pílula quando expande.

   Abre para a esquerda porque o elemento é `position: fixed` ancorado
   pela direita — ao crescer, é a borda esquerda que se desloca.

   No celular o rótulo fica colapsado de propósito: hover não existe em
   toque, e o botão deve continuar discreto como está hoje.
   ============================================================ */
.nf-whatsapp-float {
	width: auto !important;
	padding: 0 14px;
	border-radius: 28px;
	justify-content: flex-end;
	overflow: hidden;
	white-space: nowrap;
}
.nf-whatsapp-float .nf-wf-label {
	display: inline-block;
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	color: #fff;
	font: 600 15px/1 Inter, sans-serif;
	transition: max-width 0.3s ease, opacity 0.22s ease, margin-right 0.3s ease;
}
.nf-whatsapp-float:hover .nf-wf-label,
.nf-whatsapp-float:focus-visible .nf-wf-label {
	max-width: 170px;
	opacity: 1;
	margin-right: 10px;
}
@media (max-width: 900px) {
	.nf-whatsapp-float {
		padding: 0 11px;
		border-radius: 25px;
	}
}

/* ============================================================
   Tabela de planos no celular: sinalizar que rola para o lado.

   Problema: em 430px cabem 340px dos 860px da tabela — mais da metade
   fica escondida, e o corte cai no meio da primeira coluna de plano
   (o preço fica cortado ao meio). Sem indicação nenhuma, lê como defeito
   de renderização, não como "tem mais conteúdo ao lado".

   Duas camadas:
   1. .nf-pp-hint — texto explícito acima da tabela (só no celular).
   2. Sombra de rolagem nas bordas do container.

   A sombra usa a técnica de background com attachment misto: as duas
   camadas brancas são `local` (rolam junto com o conteúdo) e as duas
   escuras são `scroll` (ficam fixas na borda). O resultado é que a
   sombra some sozinha quando você chega ao fim daquele lado — o
   indicador desaparece justamente quando não há mais o que mostrar.

   Funciona aqui porque as células da tabela são transparentes e o branco
   vem do próprio .nf-pp-tabela-wrap.
   ============================================================ */
.nf-pp-hint {
	display: none;
}
@media (max-width: 900px) {
	.nf-pp-hint {
		display: block;
		margin: 0 0 10px !important;
		font: 500 13px/1.4 Inter, sans-serif;
		color: var(--nf-coral);
	}
	.nf-pp-tabela-wrap {
		background-image:
			linear-gradient(to right, #fff, rgba(255, 255, 255, 0)),
			linear-gradient(to left, #fff, rgba(255, 255, 255, 0)),
			linear-gradient(to right, rgba(11, 32, 71, 0.13), rgba(11, 32, 71, 0)),
			linear-gradient(to left, rgba(11, 32, 71, 0.13), rgba(11, 32, 71, 0));
		background-position: left center, right center, left center, right center;
		background-repeat: no-repeat;
		background-size: 26px 100%, 26px 100%, 13px 100%, 13px 100%;
		background-attachment: local, local, scroll, scroll;
	}
}

/* ------------------------------------------------------------
   Tabela de planos: elimina a linha dupla no topo.

   A <table> tinha border-top de 1px #F2F5F7 atravessando os 1.078px,
   e a coluna destacada tem border-top de 2px #FC4B04. As duas ficavam
   empilhadas com 1px de distância (y=592 e y=593), e o resultado era
   um "risco fantasma" cinza rente à borda laranja — visível dos dois
   lados do selo "Mais popular", que cobre a laranja mas não a cinza.

   A borda da <table> era redundante: o .nf-pp-tabela-wrap já tem borda
   externa (1px #E6E9EF com raio 16px) e as células têm suas próprias
   divisórias.

   Usa border-top-color: transparent em vez de border-top: 0 de
   propósito — assim a linha some sem deslocar o conteúdo em 1px.
   ------------------------------------------------------------ */
.nf-pp-tabela {
	border-top-color: transparent !important;
}

/* ------------------------------------------------------------
   Hover dos botões "Começar agora" da tabela de planos.

   Os três botões brancos usavam só o hover genérico do --ghost, que
   troca apenas a cor da BORDA (fundo continua branco) — praticamente
   invisível. O quarto, coral, já tinha efeito próprio.

   Esta regra espelha exatamente o que o site já faz nos cards de plano
   da Home:
       .nf-plan-card:not(.nf-plan-card--highlight) .nf-whatsapp-btn:hover
       { background: var(--nf-navy); color: var(--nf-white) }

   Ou seja, não é efeito novo: é o mesmo comportamento dos botões
   equivalentes, aplicado onde faltava. O levantar de 1px vem do
   .nf-whatsapp-btn:hover genérico, que já alcança estes botões.

   Especificidade (0,3,0) vence a de .nf-whatsapp-btn--ghost:hover (0,2,0),
   por isso não precisa de !important no fundo.
   ------------------------------------------------------------ */
.nf-pp-btn.nf-whatsapp-btn--ghost:hover,
.nf-pp-btn.nf-whatsapp-btn--ghost:focus-visible {
	background-color: var(--nf-navy);
	border-color: var(--nf-navy);
	color: var(--nf-white) !important;
}

/* ============================================================
   G12 — BOTÕES DO HERO ALINHADOS NO CELULAR.  NÃO REMOVER.

   Sem esta regra, "Começar teste grátis" (203px) e "Ver planos" (131px)
   ficam com 72px de diferença e quebram em duas linhas desalinhadas —
   203 + 14 de gap + 131 = 348px não cabem nos 342px disponíveis.
   O resultado é um degrau visível logo abaixo do H1.

   Abaixo de 520px viram coluna de largura cheia, que é o padrão de CTA
   em mobile. O breakpoint é 520 e não 420 de propósito: em 420 a regra
   não alcançava aparelhos de 430px de largura.

   Esta regra já foi aplicada em 16/08 e se perdeu na reescrita do
   style.css entre 17 e 18/08 — é a terceira correção da mesma leva a
   regredir. Ver "Correções que NÃO podem se perder" no MEMORY.md.

   Desktop não é tocado: lá os dois ficam lado a lado com a largura
   natural, como calibrado contra a referência visual.
   ============================================================ */
@media (max-width: 520px) {
	.nf-cta-row {
		flex-direction: column;
		align-items: stretch;
	}
	.nf-cta-row .nf-whatsapp-btn {
		width: 100%;
		justify-content: center;
		text-align: center;
	}
}

/* ============================================================
   G13 — FAIXA DE CONFIANÇA DO CTA FINAL OCULTA NO CELULAR.  NÃO REMOVER.

   Esconde "Ambiente 100% seguro", "Disponível na nuvem", "Sempre
   atualizado" e "Suporte humano" — 212px logo abaixo do card laranja.
   Decisão do Thiago em 16/08, reaplicada em 18/08 depois de a reescrita
   do style.css trazer a faixa de volta.

   ATENÇÃO — NÃO CONFUNDIR COM .nf-hero-trust:
   são as DUAS faixas de 4 itens da Home, classes diferentes, e o Thiago
   quer comportamentos OPOSTOS:
       .nf-cta-trust  (abaixo do CTA final) → OCULTA no celular
       .nf-hero-trust (no topo, hero)       → VISÍVEL, ele mandou voltar
   Já foi ocultada por engano uma vez. Conferir sempre qual é qual.

   Nada é removido do HTML — só ocultado. Reverter é apagar esta regra.
   ============================================================ */
@media (max-width: 900px) {
	.nf-cta-trust {
		display: none;
	}
}

/* ============================================================
   G14 — RODAPÉ CENTRALIZADO NO CELULAR.  NÃO REMOVER.

   Decisão do Thiago em 16/08, perdida na reescrita do style.css entre
   17 e 18/08 e reaplicada em 18/08.

   text-align sozinho NÃO resolve: cada peça centraliza por um
   mecanismo diferente, e por isso são cinco regras —
       logo         → display:block   → margin auto
       redes sociais→ flex em linha   → justify-content
       listas (ul)  → flex em coluna  → align-items
       resto        → text-align

   O !important no <p> da marca é obrigatório: o Astra define margin em
   <p> com especificidade maior que uma classe simples, e sem ele o
   margin:auto é silenciosamente ignorado — o texto fica ~80px à
   esquerda enquanto o resto centraliza. Já aconteceu uma vez.

   Desktop não é tocado: lá são 5 colunas alinhadas à esquerda.
   ============================================================ */
@media (max-width: 900px) {
	.nf-footer-inner .nf-footer-col {
		text-align: center;
	}
	.nf-footer-brand .nf-footer-logo {
		margin-left: auto;
		margin-right: auto;
	}
	.nf-footer-brand p {
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.nf-footer-brand .nf-footer-social {
		justify-content: center;
	}
	.nf-footer-col ul {
		align-items: center;
	}
}

/* ============================================================
   G15 — COLUNAS DE LINKS DO RODAPÉ OCULTAS NO CELULAR.  NÃO REMOVER.

   Esconde Institucional, Acesso rápido e Suporte; sobram a coluna da
   marca e "Fale conosco". Decisão do Thiago em 16/08, perdida na
   reescrita do style.css e reaplicada em 18/08.

   O seletor NÃO usa nth-child de propósito: mira em "toda .nf-footer-col
   que não seja a da marca nem a última", então continua correto se as
   colunas do meio forem reordenadas ou renomeadas — a coluna "Produto"
   já virou "Acesso rápido" uma vez. Só quebra se entrar coluna nova
   DEPOIS de "Fale conosco".

   DEPENDÊNCIA: esta regra torna G16 obrigatória. Termos de Uso e
   Política de Privacidade só existem na coluna Institucional, e o menu
   mobile não os tem — sem G16 os dois ficam SEM NENHUM LINK no celular.
   Não aplicar uma sem a outra.
   ============================================================ */
@media (max-width: 900px) {
	.nf-footer-inner .nf-footer-col:not(.nf-footer-brand):not(:last-child) {
		display: none;
	}
}

/* ============================================================
   G16 — LINKS LEGAIS NA LINHA DO COPYRIGHT, SÓ NO CELULAR.  NÃO REMOVER.

   Contrapartida de G15. No desktop ficam ocultos porque a coluna
   Institucional já os linka — mostrar nos dois lugares é duplicação, e
   foi por isso que essa classe existia sem uso.

   O HTML dos links vem da option `footer-copyright-editor` do Astra
   (o copyright é do Footer Builder, não do functions.php). Texto
   original salvo em `nf_backup_footer_copyright`.
   ============================================================ */
.nf-legal-links {
	display: none;
}
@media (max-width: 900px) {
	.nf-legal-links {
		display: block;
		margin: 8px 0 0;
	}
	.nf-legal-links a {
		color: rgba(255, 255, 255, 0.6) !important;
		text-decoration: none !important;
		white-space: nowrap;
		margin: 0 8px;
	}
	.nf-legal-links a:hover {
		color: #fff !important;
		text-decoration: underline !important;
	}
	.nf-legal-links a + a::before {
		content: "\00B7";
		margin-right: 16px;
		color: rgba(255, 255, 255, 0.35);
	}
}

/* ============================================================
   G17 — SEÇÃO "COMO FUNCIONA" OCULTA NO CELULAR.  NÃO REMOVER.

   Decisão do Thiago em 16/08, perdida na reescrita do style.css entre
   17 e 18/08 e reaplicada em 18/08. Visível normalmente no desktop.

   Sem efeito colateral: conferido em 18/08 que nenhum link ou item de
   menu aponta para #como-funciona, e o redirect 301 de
   /como-funciona/ leva a /recursos/ (página real, não âncora), então
   funciona igual nos dois dispositivos.

   Se um dia voltar a existir link para essa âncora, revisar: no celular
   ela não teria destino visível.
   ============================================================ */
@media (max-width: 900px) {
	#como-funciona {
		display: none;
	}
}

/* ============================================================
   G18 — SEÇÃO "TUDO CONECTADO" (#conectado) OCULTA NO CELULAR.
   NÃO REMOVER.

   Fica em /recursos/ e mostra o fluxo Venda → Estoque → Fiscal →
   Financeiro. Decisão do Thiago em 18/08: ocultar no celular, onde o
   fluxo horizontal vira uma pilha longa de cards com setas, perdendo a
   ideia de "conectado" que o layout de desktop transmite.

   Visível normalmente no desktop.

   Conferido em 18/08: nenhum link, item de menu ou redirect aponta para
   #conectado — ocultar não deixa âncora órfã.
   ============================================================ */
@media (max-width: 900px) {
	#conectado {
		display: none;
	}
}

/* ============================================================
   G19 — CONTRASTE: CORAL E CINZA ACESSÍVEIS ONDE HÁ TEXTO.
   NÃO REMOVER.

   O coral da marca (#FC4B04) dá 3,42:1 com branco — abaixo dos 4,5:1
   que a WCAG pede pra texto normal. Contraste é SIMÉTRICO: o mesmo
   3,42:1 vale pra branco sobre coral e pra coral sobre branco, então
   uma única cor nova conserta os dois sentidos.

   #D63D00 é a MESMA matiz (17°) e a mesma saturação do original, só 8%
   mais escuro em luminosidade — 4,63:1. Escolhido como o mais claro que
   ainda passa, pra mexer o mínimo na identidade.

   COMO ISTO FUNCIONA — e por que não é um monte de override:
   as regras originais são `background: var(--nf-coral) !important`.
   Tentar vencê-las com outra declaração não funciona: `!important` ganha
   de quem não tem, independente de especificidade e de ordem no arquivo.
   Em vez de brigar, aqui se REDEFINE O TOKEN dentro dos elementos que
   carregam texto. Variável CSS herda e é resolvida na hora do uso, então
   as próprias regras `!important` passam a render o valor novo.

   Vantagem: não toca em background nem em color de ninguém, então
   variante que não usa coral (o botão fantasma "Ver planos", que é
   transparente com texto navy) continua exatamente como era. Uma
   tentativa anterior, que setava `background-color` direto, pintou esse
   botão de coral por engano — pego na varredura antes de virar bug.

   O coral original CONTINUA em ícone, borda, fundo suave e detalhe
   decorativo — decisão do Thiago em 18/08. Só muda dentro destes blocos.

   O cinza --nf-gray-soft (#8A93A3) dava 3,10:1 sobre branco, pior que o
   coral. Passou a #707784 (4,51:1), mesmo tom azulado, só escurecido
   proporcionalmente. Achado novo da varredura de 18/08 — nenhuma
   auditoria anterior tinha pego.

   .nf-pp-hint (a dica "Arraste para o lado") SO EXISTE NO CELULAR e
   escapou da primeira varredura, feita em 1280px. Varrer contraste nos
   DOIS tamanhos, sempre: elemento que so aparece num deles passa batido.

   A coluna destacada dos planos (.nf-pp-col-destaque) entra porque usa
   --nf-coral-hover como COR DE TEXTO sobre o creme #FFF8F5, e ali dava
   4,29:1 — reprovava por pouco. Com o hover novo vai a 5,18:1.

   FORA DE ESCOPO de propósito: a miniatura da tela do ERP (.nf-rc-tela)
   em /recursos/, pelo mesmo critério do piso de 12px (G2) — é simulação
   de interface, não texto de leitura. Por isso o cinza volta ao original
   lá dentro.
   ============================================================ */
:root {
	--nf-gray-soft: #707784;
	--nf-gray-soft-deco: #8A93A3;
}

/* Superfícies e textos que envolvem leitura: o token passa a valer o
   coral acessível aqui dentro. O hover acompanha — o hover antigo
   (#D93F03) era mais CLARO que o coral novo e teria sumido. */
.main-header-menu > .menu-item.nf-menu-cta > a,
.nf-whatsapp-btn,
.nf-whatsapp-float,
.nf-plan-badge,
.nf-pp-badge,
.nf-cta-card,
.nf-fc-faixa,
.nf-cp-faixa,
.nf-rc-faixa,
.nf-fc-cta,
.nf-dl-selo,
.nf-dl-btn.nf-dl-btn--cheio,
.nf-ck-btn.nf-ck-btn--aceitar,
.nf-eyebrow,
.nf-step-4-num,
.nf-pp-th-rec,
.nf-pp-col-destaque,
.nf-pp-plano-nome,
.nf-pp-hint,
.entry-content em {
	--nf-coral: #D63D00;
	--nf-coral-hover: #C23800;
}

/* miniatura do ERP: devolve o cinza original */
.nf-rc-tela {
	--nf-gray-soft: var(--nf-gray-soft-deco);
}

/* ============================================================
   G21 — SUBMENU DE "ÁREA DO CLIENTE" SEMPRE ABERTO NO CELULAR.
   NÃO REMOVER.

   O problema, relatado pelo Thiago em 20/08: no celular, tocar em
   "Área do Cliente" mandava o visitante pra Home, porque o item é um
   link personalizado com href="#". Pra abrir a lista era preciso
   acertar a setinha de 55px na direita — ou seja, o alvo maior fazia a
   coisa errada e o alvo certo era o menor. "Acesso ao sistema" ficava
   praticamente inalcançável.

   Solução escolhida pelo Thiago: em vez de ensinar o gesto, tirar o
   gesto. No celular o submenu fica sempre visível e "Área do Cliente"
   vira rótulo de seção.

   Três regras, cada uma resolvendo uma coisa:
   1. o submenu deixa de ser display:none  -> os itens aparecem;
   2. pointer-events:none no link do pai   -> tocar no rótulo não faz
      mais nada (em vez de pular pra Home). O cursor default reforça
      que ali não é clicável;
   3. a seta some                          -> não sobra controle que
      não controla nada.

   O !important no display é OBRIGATÓRIO aqui, e não é preguiça: o
   JavaScript do Astra escreve "display: none" INLINE no <ul> do
   submenu. Estilo inline vence qualquer folha externa, por mais
   específico que seja o seletor — só !important passa por cima. Eu
   tinha escrito o contrário neste comentário na primeira versão e a
   regra simplesmente não pegou; o rótulo virou não-clicável e a lista
   continuou escondida, que era o pior dos mundos.
   Nas outras duas regras o !important não é preciso: elas vencem CSS
   normal do Astra, não estilo inline.

   Só no celular, de propósito: no desktop o submenu abre no hover e
   está correto do jeito que está.
   ============================================================ */
@media (max-width: 921px) {
	.ast-header-break-point .main-header-menu .menu-item-has-children > .sub-menu {
		display: block !important;
	}
	.ast-header-break-point .main-header-menu .menu-item-has-children > a[href="#"] {
		pointer-events: none;
		cursor: default;
	}
	.ast-header-break-point .main-header-menu .menu-item-has-children > .ast-menu-toggle {
		display: none;
	}
}

/* ============================================================
   G22 — GRADE DE PLANOS COM 5 COLUNAS.  NÃO REMOVER.

   O plano Premium (R$ 290,00) entrou em 20/08 e virou o 5º card.
   A grade era `repeat(4, 1fr)` fixo: com 5 cards, o quinto descia
   sozinho pra segunda linha, órfão e alinhado à esquerda.

   Escolha do Thiago: os 5 lado a lado, como no painel do sistema.

   Os três degraus, e o porquê de cada um:
   - acima de 1000px : 5 colunas. Cada card cai de ~270px pra ~224px.
     Texto longo como "Tudo do plano Profissional" passa a quebrar em
     duas linhas — é esperado, não é defeito.
   - 600 a 1000px    : 3 colunas (3+2). Com 2 colunas daria 2+2+1, que
     deixa o mesmo órfão que se quis evitar no desktop.
   - abaixo de 600px : 1 coluna, empilhado. Não muda nada.

   Se um dia entrar um 6º plano, o degrau de 5 vira o problema de novo:
   a esta largura, 6 colunas dariam ~185px por card, estreito demais.
   Aí o caminho passa a ser rolagem lateral, como a tabela de /planos/.
   ============================================================ */
.nf-pricing-grid {
	grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 1000px) {
	.nf-pricing-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 600px) {
	.nf-pricing-grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   G23 — ABAS DE PERIODICIDADE NA TABELA DE PLANOS.  NÃO REMOVER.

   Mensal / Trimestral / Semestral / Anual, como no painel do sistema.
   Decisão do Thiago em 20/08: só na /planos/, não na Home.

   FEITO SEM JAVASCRIPT, de propósito. O site tem 1 único arquivo de JS
   e já se evitou acrescentar dependência duas vezes. Aqui usa-se o
   padrão radio + label: 4 <input type="radio"> escondidos, 4 <label>
   visíveis como abas, e o CSS mostra o conjunto de preços da aba
   marcada. Funciona com teclado (Tab + setas), leitor de tela entende
   como grupo de opções, e não quebra se algum script falhar.

   Como a troca acontece: os radios são IRMÃOS ANTERIORES do bloco da
   tabela, então `#nf-per-x:checked ~ ...` alcança tudo lá dentro. Se
   alguém reorganizar o HTML e tirar os radios de antes do wrap, as
   abas param de funcionar em silêncio — as regras dependem da ordem.

   O que muda por aba: os 5 preços do cabeçalho, os 5 botões do rodapé
   (a mensagem do WhatsApp carrega o período) e a linha "Certificado
   Digital incluso", que só existe no Anual.
   ============================================================ */

/* radios fora da tela, mas alcançáveis por teclado — nunca display:none,
   que os tiraria da navegação */
.nf-per-radio {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.nf-pp-abas {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 auto 22px;
	border-bottom: 1px solid var(--nf-border, #E6E9EF);
	max-width: 100%;
}
.nf-pp-aba {
	padding: 12px 20px;
	font-size: 15px;
	font-weight: 600;
	color: var(--nf-gray-body, #5A6672);
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color .15s ease, border-color .15s ease;
	/* alvo de toque confortável no celular */
	min-height: 44px;
	display: flex;
	align-items: center;
}
.nf-pp-aba:hover {
	color: var(--nf-coral-txt, #D63D00);
}

/* aba marcada */
#nf-per-mensal:checked     ~ .nf-pp-abas .nf-pp-aba:nth-of-type(1),
#nf-per-trimestral:checked ~ .nf-pp-abas .nf-pp-aba:nth-of-type(2),
#nf-per-semestral:checked  ~ .nf-pp-abas .nf-pp-aba:nth-of-type(3),
#nf-per-anual:checked      ~ .nf-pp-abas .nf-pp-aba:nth-of-type(4) {
	color: var(--nf-navy, #0B2047);
	border-bottom-color: #D63D00;
}

/* foco visível pelo teclado: a marca vai no rótulo, não no input invisível */
#nf-per-mensal:focus-visible     ~ .nf-pp-abas .nf-pp-aba:nth-of-type(1),
#nf-per-trimestral:focus-visible ~ .nf-pp-abas .nf-pp-aba:nth-of-type(2),
#nf-per-semestral:focus-visible  ~ .nf-pp-abas .nf-pp-aba:nth-of-type(3),
#nf-per-anual:focus-visible      ~ .nf-pp-abas .nf-pp-aba:nth-of-type(4) {
	outline: 2px solid #D63D00;
	outline-offset: -2px;
	border-radius: 6px 6px 0 0;
}

/* tudo que é específico de período começa escondido */
.nf-per,
.nf-linha-per {
	display: none;
}

/* preços e botões da aba marcada */
#nf-per-mensal:checked     ~ .nf-pp-tabela-wrap .nf-per--mensal,
#nf-per-trimestral:checked ~ .nf-pp-tabela-wrap .nf-per--trimestral,
#nf-per-semestral:checked  ~ .nf-pp-tabela-wrap .nf-per--semestral,
#nf-per-anual:checked      ~ .nf-pp-tabela-wrap .nf-per--anual {
	display: block;
}
/* célula de tabela precisa voltar como table-cell, não block */
#nf-per-mensal:checked     ~ .nf-pp-tabela-wrap td.nf-per--mensal,
#nf-per-trimestral:checked ~ .nf-pp-tabela-wrap td.nf-per--trimestral,
#nf-per-semestral:checked  ~ .nf-pp-tabela-wrap td.nf-per--semestral,
#nf-per-anual:checked      ~ .nf-pp-tabela-wrap td.nf-per--anual {
	display: table-cell;
}
/* a linha do Certificado Digital só existe no Anual */
#nf-per-anual:checked ~ .nf-pp-tabela-wrap .nf-linha-per--anual {
	display: table-row;
}

@media (max-width: 600px) {
	.nf-pp-aba {
		padding: 12px 13px;
		font-size: 14px;
	}
}