:root {
		--paper: #f7f4ee;
		--paper-dim: #efebe1;
		--ink: #16211b;
		--ink-soft: #3d463f;
		--muted: #6d746e;
		--hairline: #d8d3c6;
		--green: #0a5540;
		--green-soft: #e3ece6;
		--red: #a63d2f;
		--red-soft: #f0e2de;
		--neutral-soft: #e9e6dd;
	}

	* { margin: 0; padding: 0; box-sizing: border-box; }

	html { scroll-behavior: smooth; }

	body {
		background: var(--paper);
		color: var(--ink);
		font-family: 'Inter', system-ui, -apple-system, sans-serif;
		font-size: 16px;
		line-height: 1.6;
		-webkit-font-smoothing: antialiased;
	}

	::selection { background: var(--green); color: var(--paper); }

	.serif { font-family: 'Fraunces', Georgia, serif; }

	.container { max-width: 1140px; margin: 0 auto; padding: 0 28px; }

	a { color: inherit; }

	/* ---------- MASTHEAD ---------- */
	.masthead { border-bottom: 2px solid var(--ink); }

	.masthead-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
		padding: 18px 0;
	}

	.wordmark {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		font-family: 'Fraunces', Georgia, serif;
		font-size: 1.05rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.18em;
		text-decoration: none;
	}

	.wordmark svg { display: block; flex: none; }

	.masthead nav { display: flex; gap: 28px; align-items: center; }

	.masthead nav a {
		text-decoration: none;
		font-size: 0.85rem;
		font-weight: 500;
		color: var(--ink-soft);
	}

	.masthead nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

	.masthead-actions { display: flex; align-items: center; gap: 18px; }

	/* ---------- MENU MOBILE ---------- */
	/* Fica fora de tela no desktop; o media query de 940px inverte isto com o
	   `.masthead nav`, entao so um dos dois existe de cada vez. */
	.menu-mobile { display: none; position: relative; }

	.menu-mobile summary {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		cursor: pointer;
		list-style: none;
	}

	/* O triangulo padrao do <details> aparece em WebKit por outro seletor. */
	.menu-mobile summary::-webkit-details-marker { display: none; }

	/* Tres tracos desenhados com a borda do proprio elemento e dois
	   pseudo-elementos: evita SVG inline repetido no HTML. */
	.menu-tracos, .menu-tracos::before, .menu-tracos::after {
		display: block;
		width: 22px;
		height: 2px;
		background: var(--ink);
		border-radius: 2px;
	}

	.menu-tracos { position: relative; }
	.menu-tracos::before, .menu-tracos::after { content: ''; position: absolute; left: 0; }
	.menu-tracos::before { top: -7px; }
	.menu-tracos::after { top: 7px; }

	.menu-mobile[open] .menu-tracos { background: transparent; }
	.menu-mobile[open] .menu-tracos::before { top: 0; transform: rotate(45deg); }
	.menu-mobile[open] .menu-tracos::after { top: 0; transform: rotate(-45deg); }

	.menu-painel {
		position: absolute;
		top: calc(100% + 10px);
		right: 0;
		z-index: 50;
		min-width: 210px;
		display: flex;
		flex-direction: column;
		background: var(--paper);
		border: 1px solid var(--ink);
		border-radius: 8px;
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
		overflow: hidden;
	}

	.menu-painel a {
		display: flex;
		align-items: center;
		min-height: 48px;
		padding: 0 18px;
		text-decoration: none;
		font-size: 0.95rem;
		font-weight: 500;
		color: var(--ink);
		border-bottom: 1px solid var(--hairline);
	}

	.menu-painel a:last-child { border-bottom: none; }
	.menu-painel a:hover { background: var(--sand); }

	.link-entrar {
		text-decoration: none;
		font-size: 0.85rem;
		font-weight: 500;
		color: var(--ink-soft);
	}

	.link-entrar:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

	.btn {
		display: inline-block;
		padding: 11px 24px;
		background: var(--ink);
		color: var(--paper);
		text-decoration: none;
		font-size: 0.85rem;
		font-weight: 500;
		border-radius: 3px;
		border: 1px solid var(--ink);
		transition: background 0.15s, color 0.15s;
	}

	.btn:hover { background: var(--green); border-color: var(--green); }

	.btn-outline {
		background: transparent;
		color: var(--ink);
	}

	.btn-outline:hover { background: var(--ink); color: var(--paper); }

	/* ---------- HERO ---------- */
	.hero { padding: 84px 0 72px; }

	.hero-grid {
		display: grid;
		grid-template-columns: 1.15fr 1fr;
		gap: 72px;
		align-items: center;
	}

	.eyebrow {
		font-size: 0.75rem;
		font-weight: 600;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: var(--green);
		margin-bottom: 22px;
	}

	.hero h1 {
		font-family: 'Fraunces', Georgia, serif;
		font-size: clamp(2.6rem, 5vw, 3.9rem);
		font-weight: 500;
		line-height: 1.08;
		letter-spacing: -0.01em;
	}

	.hero h1 em { font-style: italic; color: var(--green); }

	.hero-lead {
		margin: 26px 0 34px;
		font-size: 1.02rem;
		color: var(--ink-soft);
		max-width: 460px;
	}

	.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

	.hero-note {
		margin-top: 22px;
		font-size: 0.78rem;
		color: var(--muted);
	}

	/* #whatsapp reusa `.hero-grid`/`.hero-lead` mas o titulo e h2 (a secao nao
	   e a primeira da pagina), e h2 sem regra propria cai no tamanho padrao do
	   navegador — pequeno e fora do padrao Fraunces do resto do site. */
	#whatsapp h2 {
		font-family: 'Fraunces', Georgia, serif;
		font-size: clamp(1.9rem, 3.6vw, 2.6rem);
		font-weight: 500;
		line-height: 1.15;
	}

	#whatsapp h2 em { font-style: italic; color: var(--green); }

	/* briefing card */
	.briefing {
		background: #fffdf9;
		border: 1px solid var(--hairline);
		border-radius: 6px;
		box-shadow: 0 24px 48px -24px rgba(22, 33, 27, 0.25);
		overflow: hidden;
	}

	.briefing-head {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 12px;
		padding: 18px 22px 14px;
		border-bottom: 2px solid var(--ink);
	}

	.briefing-head h3 {
		font-family: 'Fraunces', Georgia, serif;
		font-size: 1.05rem;
		font-weight: 600;
	}

	.briefing-head span { font-size: 0.72rem; color: var(--muted); }

	.briefing-row {
		padding: 16px 22px;
		border-bottom: 1px solid var(--hairline);
	}

	.briefing-row:last-of-type { border-bottom: none; }

	.briefing-row-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 12px;
		margin-bottom: 6px;
	}

	.briefing-row-top b {
		font-size: 0.86rem;
		font-weight: 600;
		letter-spacing: 0.04em;
	}

	.briefing-row-top .var { font-size: 0.78rem; font-weight: 500; margin-left: 8px; }
	.var.up { color: var(--green); }
	.var.down { color: var(--red); }

	.tag {
		font-size: 0.64rem;
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		padding: 4px 10px;
		border-radius: 3px;
	}

	.tag.pos { background: var(--green-soft); color: var(--green); }
	.tag.neu { background: var(--neutral-soft); color: var(--ink-soft); }
	.tag.neg { background: var(--red-soft); color: var(--red); }

	.briefing-row p { font-size: 0.8rem; color: var(--muted); line-height: 1.55; }

	.briefing-foot {
		padding: 12px 22px;
		background: var(--paper-dim);
		font-size: 0.72rem;
		color: var(--muted);
		display: flex;
		justify-content: space-between;
		gap: 12px;
	}

	/* ---------- TICKER RULE ---------- */
	.ticker-rule {
		border-top: 1px solid var(--hairline);
		border-bottom: 1px solid var(--hairline);
		padding: 12px 0;
		overflow: hidden;
	}

	/* O track tem duas cópias da mesma lista. Deslocar -50% termina exatamente
	   no início da segunda, então o reinício do loop não tem emenda visível. */
	.ticker-rule-track {
		display: flex;
		width: max-content;
		animation: ticker-scroll 45s linear infinite;
	}

	/* `min-width: 100vw` e o que impede o vao: a animacao desloca exatamente
	   uma fita, entao uma fita mais estreita que a tela deixa o lado direito
	   descoberto no fim de cada volta (eram 977px de vazio em 1920px). Com a
	   fita valendo no minimo a largura da viewport, o vao nao existe em tela
	   nenhuma. `space-around` distribui a folga entre os itens em vez de
	   empilhar tudo a esquerda. */
	.ticker-rule-set {
		display: flex;
		gap: 40px;
		min-width: 100vw;
		justify-content: space-around;
		font-size: 0.74rem;
		letter-spacing: 0.06em;
		color: var(--ink-soft);
		white-space: nowrap;
	}

	.ticker-rule b { font-weight: 600; }
	.ticker-rule .up { color: var(--green); }
	.ticker-rule .down { color: var(--red); }

	@keyframes ticker-scroll {
		from { transform: translateX(0); }
		to { transform: translateX(-50%); }
	}

	@media (prefers-reduced-motion: reduce) {
		.ticker-rule-track { animation: none; }
	}

	/* ---------- SECTIONS ---------- */
	section { padding: 90px 0; }

	.section-head { max-width: 640px; margin-bottom: 56px; }

	.section-head h1,
	.section-head h2 {
		font-family: 'Fraunces', Georgia, serif;
		font-size: clamp(1.9rem, 3.6vw, 2.6rem);
		font-weight: 500;
		line-height: 1.15;
	}

	.section-head h2 em { font-style: italic; color: var(--green); }

	/* Unico h1 de nivel de secao (Como funciona). Maior que o h2 das demais
	   secoes por hierarquia — sem isso ele herdava o default do navegador
	   (2em, Inter) e ficava menor que o proprio h2 logo abaixo dele. */
	.section-head h1 { font-size: clamp(2.2rem, 4.2vw, 3.1rem); }

	.section-head h1 em { font-style: italic; color: var(--green); }

	.section-head p { margin-top: 16px; color: var(--ink-soft); font-size: 0.96rem; }

	/* how it works */
	.steps {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 40px;
	}

	.step { border-top: 2px solid var(--ink); padding-top: 22px; }

	.step .num {
		font-family: 'Fraunces', Georgia, serif;
		font-size: 0.9rem;
		font-weight: 600;
		color: var(--green);
		display: block;
		margin-bottom: 14px;
	}

	.step h3 {
		font-family: 'Fraunces', Georgia, serif;
		font-size: 1.25rem;
		font-weight: 600;
		margin-bottom: 10px;
	}

	.step p { font-size: 0.88rem; color: var(--ink-soft); }

	/* ---------- FEED ---------- */
	.feed-section { background: var(--paper-dim); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }

	.feed-grid {
		display: grid;
		grid-template-columns: 1.5fr 1fr;
		gap: 56px;
		align-items: start;
	}

	.feed {
		background: #fffdf9;
		border: 1px solid var(--hairline);
		border-radius: 6px;
		overflow: hidden;
	}

	.feed-title {
		padding: 14px 20px;
		border-bottom: 2px solid var(--ink);
		font-size: 0.72rem;
		font-weight: 600;
		letter-spacing: 0.16em;
		text-transform: uppercase;
	}

	.feed-item { padding: 16px 20px; border-bottom: 1px solid var(--hairline); }

	.feed-item:last-child { border-bottom: none; }

	.feed-meta {
		display: flex;
		gap: 10px;
		align-items: center;
		font-size: 0.68rem;
		color: var(--muted);
		margin-bottom: 6px;
	}

	.feed-item h4 {
		font-family: 'Fraunces', Georgia, serif;
		font-size: 0.98rem;
		font-weight: 500;
		line-height: 1.35;
		margin-bottom: 8px;
	}

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

	.ticker-chip {
		font-size: 0.66rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		padding: 3px 8px;
		border: 1px solid var(--hairline);
		border-radius: 3px;
		color: var(--ink-soft);
		background: var(--paper);
	}

	.sent { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; }
	.sent.pos { background: var(--green-soft); color: var(--green); }
	.sent.neg { background: var(--red-soft); color: var(--red); }
	.sent.neu { background: var(--neutral-soft); color: var(--ink-soft); }

	.feed-aside h2 {
		font-family: 'Fraunces', Georgia, serif;
		font-size: clamp(1.7rem, 3vw, 2.3rem);
		font-weight: 500;
		line-height: 1.15;
		margin-bottom: 18px;
	}

	.feed-aside > p { color: var(--ink-soft); font-size: 0.94rem; margin-bottom: 34px; }

	.stat { border-top: 1px solid var(--hairline); padding: 18px 0; }

	.stat b {
		font-family: 'Fraunces', Georgia, serif;
		font-size: 1.9rem;
		font-weight: 600;
		display: block;
		line-height: 1;
	}

	.stat span { font-size: 0.8rem; color: var(--muted); }

	/* ---------- RECOMMENDATION TABLE ---------- */
	.rec-table-wrap { overflow-x: auto; }

	table {
		width: 100%;
		border-collapse: collapse;
		background: #fffdf9;
		border: 1px solid var(--hairline);
		border-radius: 6px;
		overflow: hidden;
	}

	th {
		text-align: left;
		font-size: 0.68rem;
		font-weight: 600;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--ink);
		padding: 14px 18px;
		border-bottom: 2px solid var(--ink);
	}

	td {
		padding: 15px 18px;
		border-bottom: 1px solid var(--hairline);
		font-size: 0.86rem;
		color: var(--ink-soft);
	}

	tr:last-child td { border-bottom: none; }

	td b { font-weight: 600; color: var(--ink); letter-spacing: 0.04em; }

	td .up { color: var(--green); font-weight: 500; }
	td .down { color: var(--red); font-weight: 500; }

	.rec-note { margin-top: 14px; font-size: 0.76rem; color: var(--muted); }

	/* ---------- PRIVACY ---------- */
	.privacy-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 40px;
	}

	/* Com dois cards, `repeat(3, 1fr)` deixava a terceira coluna vazia e a
	   secao ficava torta a direita em tela larga — o mesmo defeito que a faixa
	   de precos ja teve. A grade acompanha a contagem em vez de assumi-la. */
	.privacy-grid-duas { grid-template-columns: repeat(2, 1fr); }

	.privacy-item { border-top: 1px solid var(--hairline); padding-top: 20px; }

	.privacy-item h3 {
		font-family: 'Fraunces', Georgia, serif;
		font-size: 1.15rem;
		font-weight: 600;
		margin-bottom: 10px;
	}

	.privacy-item p { font-size: 0.86rem; color: var(--ink-soft); }

	/* ---------- CTA ---------- */
	.cta {
		background: var(--ink);
		color: var(--paper);
		text-align: center;
		padding: 110px 28px;
	}

	.cta h2 {
		font-family: 'Fraunces', Georgia, serif;
		font-size: clamp(2.2rem, 4.5vw, 3.4rem);
		font-weight: 500;
		line-height: 1.1;
	}

	.cta h2 em { font-style: italic; color: #9fc7ae; }

	.cta p {
		margin: 22px auto 36px;
		max-width: 460px;
		color: #b9c2ba;
		font-size: 0.95rem;
	}

	.cta .btn {
		background: var(--paper);
		color: var(--ink);
		border-color: var(--paper);
		padding: 13px 32px;
	}

	.cta .btn:hover { background: #9fc7ae; border-color: #9fc7ae; }

	/* ---------- FOOTER ---------- */
	footer { padding: 36px 0 48px; border-top: 1px solid var(--hairline); }

	.footer-inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 20px;
		flex-wrap: wrap;
	}

	/* `wrap` porque o nav nao cabe numa linha de celular: com cinco links ele
	   media 340px numa tela de 360, e a pagina inteira ganhava scroll lateral. */
	.footer-inner nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }

	.footer-inner nav a {
		font-size: 0.78rem;
		color: var(--muted);
		text-decoration: none;
	}

	.footer-inner nav a:hover { color: var(--ink); text-decoration: underline; }

	/* Icone sozinho, sem texto pra dar tamanho: a caixa de 44px vem daqui e nao
	   do conteudo. O nome acessivel esta no aria-label do link. */
	.social {
		display: inline-flex;
		align-items: center;
		/* Alinhado a esquerda, e nao centrado: dentro do nav ele quebra pra uma
		   linha propria no celular, e o icone centrado numa caixa de 44px ficava
		   13px a direita do resto do texto. A caixa segue com 44px de toque. */
		justify-content: flex-start;
		min-width: 44px;
		height: 44px;
		flex: none;
		color: var(--muted);
		border-radius: 6px;
	}

	.social:hover { color: var(--ink); background: var(--sand); }

	.disclaimer {
		margin-top: 18px;
		font-size: 0.78rem;
		color: var(--muted);
		max-width: 640px;
	}

/* ---------- BIBLIOTECA ---------- */
.biblioteca { padding: 56px 0 90px; }

.breadcrumb {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 0.76rem;
	color: var(--muted);
	margin-bottom: 34px;
}

/* Nas paginas de Aprender o unico sinal de "isto e clicavel" era o hover, e
   quem nao passa o mouse por cima — ou navega no toque — lia a biblioteca
   inteira como texto morto. Daqui pra baixo todo link nasce sublinhado, no
   mesmo desenho que `.artigo-corpo a` ja usava dentro do texto; o hover
   passou a ser reforco, nao a revelacao. */
.breadcrumb a { text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb a:hover { color: var(--ink); }

.biblioteca .section-head h1 {
	font-family: 'Fraunces', Georgia, serif;
	font-size: clamp(2.1rem, 4vw, 3rem);
	font-weight: 500;
	line-height: 1.12;
}

.trilhas {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
}

.trilha-card { border-top: 2px solid var(--ink); padding-top: 22px; }

.trilha-card h2 {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 1.3rem;
	font-weight: 600;
	margin-bottom: 10px;
}

/* Titulo de trilha continua na cor do texto pra nao virar um cartao todo
   verde em cima da lista de artigos, que ja e verde; o sublinhado sozinho ja
   entrega que e link. */
.trilha-card h2 a {
	text-decoration: underline;
	text-decoration-color: var(--green);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}
.trilha-card h2 a:hover { color: var(--green); }

.trilha-card > p { font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 16px; }

.trilha-card ul { list-style: none; }

.trilha-card li { padding: 7px 0; border-bottom: 1px solid var(--hairline); font-size: 0.86rem; }
.trilha-card li:last-child { border-bottom: none; }

.trilha-card li a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.trilha-card li a:hover { color: var(--ink); }

.vazio { color: var(--muted); font-style: italic; font-size: 0.86rem; }

.lista-artigos { display: grid; gap: 4px; }

.item-artigo { border-top: 1px solid var(--hairline); padding: 26px 0; }

.item-artigo h2 {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 1.35rem;
	font-weight: 500;
	margin-bottom: 8px;
}

.item-artigo h2 a {
	text-decoration: underline;
	text-decoration-color: var(--green);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}
.item-artigo h2 a:hover { color: var(--green); }

.item-artigo p { font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 10px; }

.meta-artigo { font-size: 0.72rem; color: var(--muted); letter-spacing: 0.04em; }

/* ---------- ARTIGO ---------- */
.artigo { padding: 56px 0 90px; }

.artigo .container { max-width: 780px; }

.artigo-head { border-bottom: 2px solid var(--ink); padding-bottom: 26px; margin-bottom: 38px; }

.artigo-head h1 {
	font-family: 'Fraunces', Georgia, serif;
	font-size: clamp(2rem, 4vw, 2.9rem);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.01em;
}

.artigo-lead { margin-top: 18px; font-size: 1.05rem; color: var(--ink-soft); }

.artigo-meta { margin-top: 18px; font-size: 0.74rem; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; }

.artigo-corpo { font-size: 1.02rem; line-height: 1.75; color: var(--ink-soft); max-width: 68ch; }

.artigo-corpo > * + * { margin-top: 22px; }

.artigo-corpo h2 {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 1.55rem;
	font-weight: 600;
	color: var(--ink);
	line-height: 1.25;
	margin-top: 48px;
}

.artigo-corpo h3 {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 1.18rem;
	font-weight: 600;
	color: var(--ink);
	margin-top: 34px;
}

.artigo-corpo strong { color: var(--ink); font-weight: 600; }

.artigo-corpo a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }

.artigo-corpo ul, .artigo-corpo ol { padding-left: 22px; }
.artigo-corpo li + li { margin-top: 8px; }

.artigo-corpo blockquote {
	border-left: 3px solid var(--green);
	padding: 4px 0 4px 20px;
	color: var(--ink);
	font-family: 'Fraunces', Georgia, serif;
	font-size: 1.1rem;
}

.artigo-corpo table { font-size: 0.9rem; margin-top: 28px; width: 100%; border-collapse: collapse; }

.artigo-corpo th, .artigo-corpo td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--hairline); }

.artigo-corpo th {
	color: var(--ink);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--ink);
	white-space: nowrap;
}

.artigo-corpo code {
	font-size: 0.9em;
	background: var(--paper-dim);
	padding: 2px 6px;
	border-radius: 3px;
	color: var(--ink);
}

.anuncio-fim-artigo { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--hairline); }

.anuncio-fim-artigo-rotulo {
	display: block;
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 10px;
}

.relacionados { margin-top: 56px; border-top: 1px solid var(--hairline); padding-top: 26px; }

.relacionados h2 {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: 14px;
}

.relacionados ul { list-style: none; }

.relacionados li { padding: 8px 0; border-bottom: 1px solid var(--hairline); }

.relacionados a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; font-size: 0.92rem; }
.relacionados a:hover { color: var(--ink); }

.relacionados > p { margin-top: 16px; font-size: 0.84rem; }
.relacionados > p a { color: var(--green); }

.cta-artigo {
	margin-top: 48px;
	background: var(--ink);
	color: var(--paper);
	border-radius: 6px;
	padding: 40px 36px;
	text-align: center;
}

.cta-artigo h2 {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.2;
}

.cta-artigo p { margin: 14px auto 26px; max-width: 44ch; color: #b9c2ba; font-size: 0.92rem; }

.cta-artigo .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.cta-artigo .btn:hover { background: #9fc7ae; border-color: #9fc7ae; }

.disclaimer-artigo {
	margin-top: 34px;
	font-size: 0.76rem;
	line-height: 1.6;
	color: var(--muted);
	border-top: 1px solid var(--hairline);
	padding-top: 18px;
}

	/* ---------- PLANOS ---------- */
	.planos-periodo { position: relative; }

	.planos-periodo > input[type="radio"] {
		position: absolute;
		opacity: 0;
		pointer-events: none;
	}

	.planos-periodo > label {
		display: inline-block;
		padding: 8px 20px;
		margin-bottom: 28px;
		border: 1px solid var(--hairline);
		border-radius: 3px;
		font-size: 0.82rem;
		cursor: pointer;
	}

	/* :focus-visible no input desenha o anel na label — sem isso, quem navega
	   por teclado nao ve onde esta, porque o proprio radio e invisivel. */
	.planos-periodo > input[type="radio"]:focus-visible + label {
		outline: 2px solid var(--green);
		outline-offset: 2px;
	}

	.planos-periodo > input[type="radio"]:checked + label {
		background: var(--green);
		border-color: var(--green);
		color: var(--paper);
	}

	.planos-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	/* Sem `align-items: start` no grid, os dois cartoes esticam ate a altura
	   do mais alto. O Pro tem um item a mais na lista e a linha do valor
	   anual, entao sem isso ele ficava visivelmente maior que o Gratuito. */
	.plano {
		border: 1px solid var(--hairline);
		border-radius: 6px;
		padding: 28px;
		background: #fffdf9;
		display: flex;
		flex-direction: column;
	}

	/* Empurra o CTA pro rodape do cartao: com as alturas ja iguais, isso
	   alinha os dois botoes na mesma linha. O `align-self` preserva a
	   largura do botao pelo conteudo — como flex item ele esticaria. */
	.plano > .btn {
		margin-top: auto;
		align-self: flex-start;
	}

	.plano-destaque {
		border-color: var(--green);
		box-shadow: 0 8px 30px rgba(10, 85, 64, 0.08);
	}

	.plano h3 { font-size: 1.2rem; }

	.plano-resumo {
		margin-top: 6px;
		font-size: 0.9rem;
		color: var(--muted);
	}

	.plano-preco {
		display: flex;
		align-items: baseline;
		gap: 8px;
		margin-top: 20px;
	}

	.plano-valor {
		font-family: 'Fraunces', Georgia, serif;
		font-size: 2.4rem;
		line-height: 1;
	}

	.plano-periodo { font-size: 0.86rem; color: var(--muted); }

	.plano-economia {
		font-size: 0.72rem;
		letter-spacing: 0.04em;
		padding: 3px 9px;
		border-radius: 3px;
		background: var(--green-soft);
		color: var(--green);
	}

	.plano-detalhe {
		margin-top: 6px;
		font-size: 0.8rem;
		color: var(--muted);
	}

	.plano-itens {
		list-style: none;
		margin: 22px 0;
		display: grid;
		gap: 10px;
		font-size: 0.9rem;
	}

	.plano-itens li { padding-left: 22px; position: relative; }

	.plano-itens li::before {
		content: '✓';
		position: absolute;
		left: 0;
		color: var(--green);
	}

	/* Ressalva do Pro: mora abaixo do botao porque a informacao so interessa
	   depois que a pessoa decidiu clicar. Tom de nota de rodape, nao de aviso. */
	.plano-aviso {
		margin-top: 12px;
		font-size: 0.78rem;
		line-height: 1.5;
		color: var(--muted);
	}

	.planos-ressalva {
		margin-top: 28px;
		font-size: 0.8rem;
		color: var(--muted);
		max-width: 640px;
	}

	/* O toggle sem JS: cada radio decide qual bloco de preco fica visivel. */
	.preco-mensal { display: none; }

	#periodo-mensal:checked ~ .planos-grid .preco-anual { display: none; }
	#periodo-mensal:checked ~ .planos-grid .plano-preco.preco-mensal { display: flex; }
	#periodo-mensal:checked ~ .planos-grid .plano-detalhe.preco-mensal { display: block; }

	@media (max-width: 860px) {
		.planos-grid { grid-template-columns: minmax(0, 1fr); }
	}

	/* ---------- RESPONSIVE ---------- */
	@media (max-width: 940px) {
		.hero-grid { grid-template-columns: 1fr; gap: 48px; }
		.feed-grid { grid-template-columns: 1fr; gap: 40px; }
		.steps, .privacy-grid { grid-template-columns: 1fr; gap: 28px; }
		.masthead nav { display: none; }
		.menu-mobile { display: block; }

		/* Alvos de toque: o `frontend/CLAUDE.md` fixa 44px como piso, e os links
		   de navegacao secundaria da landing estavam entre 14px e 40px. O padding
		   vertical resolve sem mudar o desenho, porque o texto nao muda de lugar. */
		.footer-inner nav a,
		.breadcrumb a,
		.relacionados a,
		.item-artigo h2 a {
			display: inline-flex;
			align-items: center;
			min-height: 44px;
		}

		.trilha-card { min-height: 44px; }

		/* Restantes medidos em 360px: o wordmark (26px), os rotulos do seletor de
		   periodo dos planos (39px) e o titulo-link dos cartoes de trilha (25px).
		   Link dentro de prosa fica de fora de proposito: a WCAG 2.5.5 isenta
		   texto inline, e esticar a linha quebraria o paragrafo. */
		.wordmark { min-height: 44px; }

		/* O radio e o rotulo sao irmaos e alternam o mesmo valor, entao a area de
		   toque util e a soma dos dois. O `height` aqui estica a caixa do input
		   sem mudar o tamanho do circulo desenhado pelo navegador. */
		.planos-periodo input { height: 44px; }

		.planos-periodo label { min-height: 44px; display: inline-flex; align-items: center; }

		.trilha-card h2 a { display: inline-flex; align-items: center; min-height: 44px; }
		/* Com o hamburguer no lugar, "Entrar" ja vive dentro do painel; manter os
		   dois duplicaria o link num espaco que nao sobra. */
		.masthead-actions .link-entrar { display: none; }

		.trilhas { grid-template-columns: 1fr; gap: 32px; }
		.cta-artigo { padding: 32px 24px; }

		/* `display: block` sozinho nao segura a tabela: ela renderizava 366px num
		   conteiner de 334px e vazava a pagina. O `max-width` prende a caixa no
		   pai e deixa o conteudo rolar dentro dela. */
		.artigo-corpo table {
			display: block;
			width: 100%;
			max-width: 100%;
			overflow-x: auto;
		}
	}

	/* Telefone estreito (320px ainda e o iPhone SE de 1a geracao e boa parte dos
	   Android de entrada). Aqui a soma wordmark + botao + hamburguer nao cabe nos
	   28px de padding do container, e a pagina ganhava 10px de scroll lateral. */
	@media (max-width: 380px) {
		.container { padding: 0 18px; }

		.masthead-inner { gap: 10px; }

		.wordmark { font-size: 0.92rem; letter-spacing: 0.1em; }

		.btn { padding: 11px 16px; }
	}