/*
 * As paginas de funil (venda, captura, checkout, upsell, downsell, obrigado).
 *
 * MOBILE-FIRST DE VERDADE: tudo aqui e desenhado para 375px e so depois ganha
 * regras para tela larga. E onde o comprador esta (requisito dele, 03/09).
 *
 * Direcao visual "extrato" (19/08): papel claro, tinta escura, uma cor de
 * acento quente para a acao, secoes escuras alternadas para dar ritmo, o
 * preco como fatura. Toda cor mora nos tokens: trocar a marca do produto e
 * mudar 4 linhas.
 *
 * Classes que os modelos usam (todas prefixadas agn-):
 *   .agn-hero .agn-secao .agn-secao--escura .agn-secao--clara
 *   .agn-sobrancelha .agn-sub .agn-check .agn-razao .agn-fases .agn-fase
 *   .agn-fatura .agn-cta .agn-cta--secundario .agn-barra-cta .agn-faq
 *   .agn-bump .agn-nota-editor (so no editor) .agn-captura
 */

@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../app/fontes/jakarta.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: italic; font-weight: 400 800; font-display: swap; src: url("../app/fontes/jakarta-italico.woff2") format("woff2"); }

:root {
	--pg-papel: #faf9f7;
	--pg-painel: #ffffff;
	--pg-tinta: #1c1a18;
	--pg-suave: #5f5952;
	--pg-fraco: #8e877f;
	--pg-linha: #e4e0d9;
	--pg-escuro: #141311;
	--pg-escuro-texto: #ede8e1;
	--pg-escuro-suave: #a39b92;
	/* ⟲ 05/09 — era laranja; a marca da AgorOn é azul. A cor de ação segue a marca. */
	--pg-acao: #1d4ed8;
	--pg-acao-forte: #1e3a8a;
	--pg-acao-texto: #ffffff;
	--pg-acao-clara: #e8eefe;
	--pg-ok: #2f5d50;
	--pg-ok-claro: #edf3f0;
	--pg-fonte: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--pg-largura: 42rem;
}

/* --------------------------------------------------------------- base -- */

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

:is(body.agn-pagina, .editor-styles-wrapper) {
	margin: 0;
	background: var(--pg-papel);
	color: var(--pg-tinta);
	font-family: var(--pg-fonte);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

:is(body.agn-pagina, .editor-styles-wrapper) * { box-sizing: border-box; }
:is(body.agn-pagina, .editor-styles-wrapper) img { max-width: 100%; height: auto; }
:is(body.agn-pagina, .editor-styles-wrapper) a { color: inherit; }

.agn-miolo { overflow-x: clip; }

/* O andaime do editor nunca aparece para o visitante. */
:is(body.agn-pagina, .editor-styles-wrapper) .agn-nota-editor { display: none !important; }

/* Tipografia: uma escala so, pensada para o dedo e para a leitura em pe. */
:is(body.agn-pagina, .editor-styles-wrapper) h1, :is(body.agn-pagina, .editor-styles-wrapper) h2, :is(body.agn-pagina, .editor-styles-wrapper) h3 {
	margin: 0 0 .6em;
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.025em;
	text-wrap: balance;
}
:is(body.agn-pagina, .editor-styles-wrapper) h1 { font-size: clamp(1.9rem, 6.2vw, 3rem); }
:is(body.agn-pagina, .editor-styles-wrapper) h2 { font-size: clamp(1.45rem, 4.6vw, 2.1rem); }
:is(body.agn-pagina, .editor-styles-wrapper) h3 { font-size: 1.15rem; }
:is(body.agn-pagina, .editor-styles-wrapper) p { margin: 0 0 1em; }
:is(body.agn-pagina, .editor-styles-wrapper) p:last-child { margin-bottom: 0; }
:is(body.agn-pagina, .editor-styles-wrapper) strong { font-weight: 700; }

/* ------------------------------------------------------------ secoes -- */

.agn-hero, .agn-secao {
	padding: 2.6rem 1.25rem;
}

.agn-hero > *, .agn-secao > * {
	max-width: var(--pg-largura);
	margin-left: auto;
	margin-right: auto;
}

.agn-hero {
	padding-top: 3.2rem;
	padding-bottom: 3rem;
	background: var(--pg-escuro);
	color: var(--pg-escuro-texto);
}

.agn-hero .agn-sobrancelha { color: var(--pg-escuro-suave); }
.agn-hero h1 { color: #fff; }

.agn-sub {
	font-size: 1.12rem;
	line-height: 1.55;
	color: var(--pg-escuro-suave);
	max-width: 36rem;
}

.agn-secao--escura { background: var(--pg-escuro); color: var(--pg-escuro-texto); }
.agn-secao--escura h2 { color: #fff; }
.agn-secao--escura .agn-sobrancelha { color: var(--pg-escuro-suave); }
.agn-secao--clara { background: var(--pg-painel); border-top: 1px solid var(--pg-linha); border-bottom: 1px solid var(--pg-linha); }

.agn-sobrancelha {
	display: block;
	margin: 0 0 .9rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pg-fraco);
}

/* ---------------------------------------------------------- listas -- */

:is(body.agn-pagina, .editor-styles-wrapper) ul, :is(body.agn-pagina, .editor-styles-wrapper) ol { padding-left: 1.3rem; margin: 0 0 1.2rem; }
:is(body.agn-pagina, .editor-styles-wrapper) li { margin: .35rem 0; }

/* a lista de conferencia do "espelho": caixinhas, como num extrato */
.agn-check { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.agn-check li {
	position: relative;
	padding: .8rem .9rem .8rem 2.9rem;
	margin: 0 0 .5rem;
	border: 1px solid var(--pg-linha);
	border-radius: 12px;
	background: var(--pg-painel);
	font-weight: 500;
	line-height: 1.45;
}
.agn-check li::before {
	content: "";
	position: absolute;
	left: .9rem;
	top: .9rem;
	width: 1.25rem;
	height: 1.25rem;
	border: 2px solid var(--pg-tinta);
	border-radius: 5px;
}
.agn-secao--escura .agn-check li { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }
.agn-secao--escura .agn-check li::before { border-color: var(--pg-escuro-texto); }

/* "a conta": razao numerada em corpo grande */
.agn-razao { list-style: none; counter-reset: razao; padding: 0; margin: 0 0 1.2rem; }
.agn-razao li {
	counter-increment: razao;
	position: relative;
	padding: .2rem 0 1rem 3.2rem;
	margin: 0 0 .6rem;
	border-bottom: 1px solid var(--pg-linha);
}
.agn-razao li::before {
	content: counter(razao, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--pg-acao);
	line-height: 1.2;
}
.agn-razao li strong { display: block; margin-bottom: .2rem; }
.agn-secao--escura .agn-razao li { border-color: rgba(255, 255, 255, .12); }

/* --------------------------------------------------------- as fases -- */

.agn-fases { display: grid; gap: .8rem; margin: 0 0 1.4rem; }
.agn-fase {
	padding: 1.1rem 1.1rem 1.2rem;
	border-radius: 14px;
	background: var(--pg-painel);
	border: 1px solid var(--pg-linha);
}
.agn-fase h3 { margin-bottom: .35rem; font-size: 1.05rem; }
.agn-fase .agn-sobrancelha { margin-bottom: .4rem; color: var(--pg-acao); }
.agn-fase p { font-size: .98rem; color: var(--pg-suave); }
.agn-secao--escura .agn-fase { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }
.agn-secao--escura .agn-fase p { color: var(--pg-escuro-suave); }

/* ----------------------------------------------------------- fatura -- */

.agn-fatura {
	max-width: 30rem;
	padding: 1.3rem 1.3rem 1.4rem;
	border: 1.5px solid var(--pg-tinta);
	border-radius: 14px;
	background: var(--pg-painel);
	font-variant-numeric: tabular-nums;
}
.agn-fatura p { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: .55rem 0; border-bottom: 1px dashed var(--pg-linha); font-size: .98rem; }
.agn-fatura p:last-of-type { border-bottom: 0; }
.agn-fatura .agn-fatura-total { padding-top: .9rem; margin-top: .3rem; border-top: 2px solid var(--pg-tinta); border-bottom: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.agn-fatura .agn-fatura-nota { display: block; padding: .6rem 0 0; color: var(--pg-fraco); font-size: .82rem; border: 0; }
.agn-secao--escura .agn-fatura { background: #fff; color: var(--pg-tinta); }

/* --------------------------------------------------------- botoes -- */

.agn-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	padding: .9rem 1.4rem;
	margin: .4rem 0 1rem;
	border: 0;
	border-radius: 999px;
	background: var(--pg-acao);
	color: var(--pg-acao-texto);
	font: 700 1.05rem/1.2 var(--pg-fonte);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 10px 24px -12px rgba(217, 83, 30, .7);
	transition: background .15s, transform .08s;
}
.agn-cta:hover { background: var(--pg-acao-forte); color: #fff; }
.agn-cta:active { transform: translateY(1px); }
.agn-cta:disabled { opacity: .6; cursor: wait; }

.agn-cta--secundario, .agn-recusa {
	display: block;
	width: 100%;
	padding: .8rem 1rem;
	margin: 0 0 1rem;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--pg-suave);
	font: 500 .95rem/1.3 var(--pg-fonte);
	text-align: center;
	text-decoration: underline;
	text-underline-offset: .2em;
	cursor: pointer;
}
.agn-cta--secundario:hover, .agn-recusa:hover { color: var(--pg-tinta); background: transparent; }

.agn-cta-nota { margin-top: -.4rem; font-size: .84rem; color: var(--pg-fraco); text-align: center; }
.agn-secao--escura .agn-cta-nota, .agn-hero .agn-cta-nota { color: var(--pg-escuro-suave); }

/* a barra que gruda embaixo no celular: o botao sempre a vista */
.agn-barra-cta {
	position: sticky;
	bottom: 0;
	z-index: 10;
	padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
	background: rgba(250, 249, 247, .92);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--pg-linha);
}
.agn-barra-cta > * { max-width: var(--pg-largura); margin-left: auto; margin-right: auto; }
.agn-barra-cta .agn-cta { margin: 0; min-height: 52px; }

/* -------------------------------------------------------------- faq -- */

.agn-faq {
	margin: 0 0 .6rem;
	border: 1px solid var(--pg-linha);
	border-radius: 12px;
	background: var(--pg-painel);
	padding: 0 1rem;
}
.agn-faq summary {
	padding: .95rem 0;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 2rem;
}
.agn-faq summary::-webkit-details-marker { display: none; }
.agn-faq summary::after { content: "+"; position: absolute; right: .1rem; top: .75rem; font-size: 1.3rem; font-weight: 500; color: var(--pg-fraco); }
.agn-faq[open] summary::after { content: "–"; }
.agn-faq p { padding-bottom: 1rem; color: var(--pg-suave); }

/* ------------------------------------------------------------- bump -- */

.agn-bump {
	padding: 1rem 1.1rem;
	margin: 0 0 .9rem;
	border: 2px dashed var(--pg-acao);
	border-radius: 14px;
	background: var(--pg-acao-clara, #e8eefe);   /* ⟲ 05/09: acompanha a marca, como a borda */
}
.agn-bump h3 { margin-bottom: .3rem; }
.agn-bump p { font-size: .95rem; color: var(--pg-suave); }

/* ---------------------------------------------------------- captura -- */

.agn-captura { max-width: 26rem; }
.agn-campo { display: block; margin: 0 0 .9rem; }
.agn-campo span { display: block; margin-bottom: .3rem; font-size: .84rem; font-weight: 700; }
.agn-campo input {
	width: 100%;
	min-height: 52px;
	padding: .7rem .9rem;
	border: 1.5px solid var(--pg-linha);
	border-radius: 12px;
	background: #fff;
	color: var(--pg-tinta);
	font: 16px/1.4 var(--pg-fonte); /* 16px: abaixo disso o iOS da zoom e o layout salta */
}
.agn-campo input:focus { outline: 3px solid rgba(217, 83, 30, .25); border-color: var(--pg-acao); }
.agn-captura-erro { color: #b91c1c; font-weight: 600; font-size: .9rem; }
.agn-captura-nota { color: var(--pg-fraco); font-size: .82rem; text-align: center; }
.agn-secao--escura .agn-campo span { color: var(--pg-escuro-texto); }

/* --------------------------------------------------------- checkout -- */
/* o bloco [agoron_checkout] traz o proprio CSS; aqui so o respiro em volta */
.agn-papel-checkout .agn-secao { padding-top: 1.6rem; }

/* --------------------------------------------------- tela larga (>= 720) -- */

@media (min-width: 720px) {
	:is(body.agn-pagina, .editor-styles-wrapper) { font-size: 18px; }
	.agn-hero, .agn-secao { padding: 4.5rem 2rem; }
	.agn-hero { padding-top: 5.5rem; padding-bottom: 5rem; }
	.agn-fases { grid-template-columns: repeat(3, 1fr); }
	.agn-cta { width: auto; min-width: 18rem; display: inline-flex; }
	.agn-cta--secundario, .agn-recusa { width: auto; display: inline-block; }
	.agn-barra-cta { position: static; padding: 0; background: transparent; border: 0; backdrop-filter: none; }
	.agn-barra-cta .agn-cta { margin: .4rem 0 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.agn-cta { transition: none; }
}

/* ------------------------------------------------------------ editor -- */
/* Dentro do editor de blocos a pagina aparece igual ao ar; a unica diferenca
   e que as notas de andaime FICAM VISIVEIS, como lembrete amarelo. */
.editor-styles-wrapper { background: var(--pg-papel); }
.editor-styles-wrapper .agn-nota-editor {
	display: block !important;
	margin: 0 0 1rem;
	padding: .6rem .8rem;
	border-left: 3px solid #f59e0b;
	border-radius: 6px;
	background: #fff8e1;
	color: #7a5a00;
	font-size: .85rem;
	line-height: 1.45;
}
.editor-styles-wrapper .agn-barra-cta { position: static; }

/* ------------------------------------------------------ area de membros -- */
/* /membros/: o que o comprador ve depois de pagar. Mesma familia visual das
   paginas de funil; tudo com alvo de dedo e sem nada que nao seja dele. */

.agn-mb-topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; background: var(--pg-escuro); color: var(--pg-escuro-texto); }
.agn-mb-topo > * { max-width: var(--pg-largura); }
.agn-mb-marca { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: .85rem; color: #fff; text-decoration: none; }
.agn-mb-sair { color: var(--pg-escuro-suave); font-size: .84rem; text-decoration: none; }
.agn-mb-sair:hover { color: #fff; }

.agn-mb-oi h1 { font-size: clamp(1.6rem, 5.5vw, 2.4rem); }
.agn-mb-oi p { color: var(--pg-suave); }

.agn-mb-produto {
	padding: 1.15rem 1.15rem 1.25rem;
	margin: 0 0 1rem;
	border: 1px solid var(--pg-linha);
	border-radius: 16px;
	background: var(--pg-painel);
}
.agn-mb-produto h2 { font-size: 1.25rem; margin-bottom: .35rem; }
.agn-mb-produto p { color: var(--pg-suave); font-size: .96rem; }
.agn-mb-arquivos { list-style: none; padding: 0; margin: .9rem 0 0; }
.agn-mb-arquivos li { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .7rem 0; border-top: 1px dashed var(--pg-linha); }
.agn-mb-arquivos li span { font-weight: 600; font-size: .95rem; }
.agn-mb-arquivos .agn-cta { width: auto; min-height: 44px; margin: 0; padding: .55rem 1.1rem; font-size: .92rem; box-shadow: none; }
.agn-mb-preparando { margin-top: .8rem; padding: .8rem 1rem; border-radius: 12px; background: var(--pg-ok-claro); color: var(--pg-ok); font-size: .92rem; }
.agn-mb-preparando strong { display: block; }

.agn-mb-proximo { display: grid; gap: .8rem; }
.agn-mb-proximo .agn-mb-produto { border-style: dashed; }
.agn-mb-proximo .agn-cta { margin: .9rem 0 0; }

.agn-mb-ajuda { color: var(--pg-suave); font-size: .92rem; }
.agn-mb-ajuda a { color: var(--pg-tinta); font-weight: 600; }
.agn-mb-pedido { color: var(--pg-fraco); font-size: .78rem; margin-top: .6rem; }

.agn-mb-entrar { max-width: 26rem; }
.agn-mb-ok { padding: .9rem 1rem; border-radius: 12px; background: var(--pg-ok-claro); color: var(--pg-ok); font-weight: 600; }

@media (min-width: 720px) {
	.agn-mb-arquivos .agn-cta { display: inline-flex; min-width: 0; }
}

/* ------------------------------------------------------ curso e aulas -- */
.agn-cs-barra { height: 8px; border-radius: 999px; background: var(--pg-linha); overflow: hidden; margin: .4rem 0 1.2rem; max-width: 30rem; }
.agn-cs-barra div { height: 100%; background: var(--pg-acao); border-radius: 999px; transition: width .4s; }
.agn-cs-lista { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.agn-cs-aula { margin: 0 0 .5rem; }
.agn-cs-aula a, .agn-cs-aula > span { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; border: 1px solid var(--pg-linha); border-radius: 12px; background: var(--pg-painel); text-decoration: none; color: var(--pg-tinta); }
.agn-cs-aula a:hover { border-color: var(--pg-acao); }
.agn-cs-n { display: grid; place-items: center; flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%; background: var(--pg-linha); font-weight: 800; font-size: .85rem; }
.agn-cs-aula.feita .agn-cs-n { background: var(--pg-ok); color: #fff; }
.agn-cs-aula.aberta .agn-cs-n { background: var(--pg-acao); color: #fff; }
.agn-cs-aula.fechada > span { opacity: .6; }
.agn-cs-t { font-weight: 600; line-height: 1.3; }
.agn-cs-t small { display: block; font-weight: 500; color: var(--pg-fraco); font-size: .78rem; }
.agn-cs-conteudo > * { max-width: var(--pg-largura); margin-left: auto; margin-right: auto; }
.agn-cs-conteudo figure, .agn-cs-conteudo .wp-block-embed { margin: 0 auto 1.2rem; }
.agn-cs-conteudo iframe { max-width: 100%; border-radius: 12px; }
.agn-cs-conteudo .wp-block-embed__wrapper { position: relative; aspect-ratio: 16 / 9; }
.agn-cs-conteudo .wp-block-embed__wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.agn-cs-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.agn-cs-acoes .agn-cta { margin: 0; }
.agn-cs-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; font-size: .92rem; }
.agn-cs-nav a { font-weight: 600; }
.agn-cs-trancada { color: var(--pg-fraco); }

/* ---------------------------------------- desktop de verdade (>= 900) -- */
/* Um modelo so serve celular e desktop. No largo: hero em duas colunas,
   listas em duas colunas, mais respiro. Pedido dele (03/09): "quero modelar
   na versao para desktop tambem". */
@media (min-width: 900px) {
	:root { --pg-largura: 50rem; }
	.agn-hero { padding: 6rem 2rem 5.5rem; }
	.agn-hero > * { max-width: 68rem; }
	.agn-hero:not(.agn-hero--simples) { display: grid; grid-template-columns: 1.15fr .85fr; column-gap: 3.5rem; align-items: center; max-width: 72rem; margin: 0 auto; }
	.agn-hero:not(.agn-hero--simples) > * { margin-left: 0; margin-right: 0; }
	.agn-hero > .agn-sobrancelha { grid-column: 1; grid-row: 1; align-self: end; }
	.agn-hero > h1 { grid-column: 1; grid-row: 2 / span 2; align-self: start; font-size: clamp(2.4rem, 3.6vw, 3.4rem); }
	.agn-hero > .agn-sub { grid-column: 2; grid-row: 1 / span 2; align-self: end; font-size: 1.2rem; }
	.agn-hero > .agn-cta { grid-column: 2; grid-row: 3; justify-self: start; }
	.agn-hero > .agn-cta-nota { grid-column: 2; grid-row: 4; text-align: left; }
	.agn-secao { padding: 4.5rem 2rem; }
	.agn-check { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
	.agn-check li { margin: 0; }
	.agn-razao { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
	.agn-fases { gap: 1.2rem; }
	.agn-faq { max-width: 42rem; }
	.agn-mb-produto { padding: 1.4rem 1.5rem; }
	.agn-mb-proximo { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------- site: cabecalho e rodape -- */
.agn-topo-site { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.25rem; background: var(--pg-papel); border-bottom: 1px solid var(--pg-linha); }
.agn-topo-site > * { margin: 0; }
/* 🔴 05/09 — a logo renderizava em 27×7 px, ilegível. `.agn-topo-logo` é ITEM FLEX
   e itens flex encolhem por padrão: os links do lado a espremiam, e o
   `max-width:100%` do tema então limitava a imagem ao pai já encolhido.
   ⚠️ Mesma família da lição de 04/09 (item de grid nasce com `min-width:auto`):
   a caixa cede antes de o conteúdo reclamar, e nada dá erro. */
.agn-topo-logo { flex: 0 0 auto; }
/* 🔑 A logo é limitada por ALTURA, não por largura — e a razão é durável:
   com `width` fixa, a ALTURA DO TOPO passa a depender da proporção do arquivo.
   Trocar o logotipo em 05/09 (de 3,75:1 para 2,4:1) engordou o cabeçalho de 72
   para 93 px sem ninguém mexer no CSS. Com `height` fixa, logo nova de qualquer
   proporção entra sem mover o layout. */
/* ⚠️ O seletor precisa do `.agn-topo-site` na frente, e a razão é de ESPECIFICIDADE:
   o reset desta mesma folha, `:is(body.agn-pagina, .editor-styles-wrapper) img{height:auto}`,
   vale (0,1,2) — `:is()` assume a especificidade do argumento MAIS específico — contra
   os (0,1,1) de `.agn-topo-logo img`. O reset vencia e a logo saía no tamanho natural
   (266×110), engordando o topo para 154 px. Medido no ar em 05/09. */
.agn-topo-site .agn-topo-logo img { display: block; width: auto; height: 38px; max-width: none; }
.agn-topo-links { display: flex; align-items: center; gap: 1rem; font-size: .9rem; font-weight: 600; }
.agn-topo-links a { text-decoration: none; color: var(--pg-suave); white-space: nowrap; }
.agn-topo-links a:hover { color: var(--pg-tinta); }
.agn-cta--mini { display: inline-flex; width: auto; min-height: 38px; margin: 0; padding: .4rem 1rem; font-size: .84rem; box-shadow: none; color: #fff !important; }
.agn-recursos .agn-fase h3 { font-size: 1.1rem; }
.agn-rodape-site { padding-top: 1.6rem; padding-bottom: 2.2rem; color: var(--pg-fraco); font-size: .84rem; text-align: center; }
.agn-rodape-site a { color: var(--pg-suave); }
.agn-secao--escura .agn-captura .agn-campo span { color: var(--pg-escuro-texto); }
.agn-secao--escura .agn-captura-nota { color: var(--pg-escuro-suave); }
@media (max-width: 719px) {
	.agn-topo-links a:not(.agn-cta--mini) { display: none; }
	.agn-topo-site .agn-topo-logo img { width: auto; height: 32px; max-width: none; }
}
@media (min-width: 900px) {
	.agn-topo-site { padding: 1rem 2rem; }
	.agn-topo-site > * { max-width: none; }
	.agn-recursos { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------- tela "falta so o pagamento" -- */
.agn-pg { padding: 1.4rem 1.25rem 2.5rem; max-width: 40rem; margin: 0 auto; }
.agn-pg h1 { font-size: clamp(1.6rem, 6vw, 2.2rem); line-height: 1.1; letter-spacing: -.02em; margin: .3rem 0 .6rem; }
.agn-pg-itens { color: var(--pg-suave); margin: 0 0 1.2rem; }
.agn-pg-gateway { margin: 0 0 1.2rem; padding: 1rem 1.1rem; border: 1px solid var(--pg-linha); border-radius: 14px; background: var(--pg-papel); overflow-x: auto; }
.agn-pg-gateway h2, .agn-pg-gateway h3 { font-size: 1.05rem; margin: .2rem 0 .6rem; }
.agn-pg-gateway table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.agn-pg-gateway th, .agn-pg-gateway td { text-align: left; padding: .35rem 0; border-bottom: 1px solid var(--pg-linha); }
.agn-pg-gateway img, .agn-pg-gateway canvas { display: block; max-width: 260px; margin: .6rem auto; }
.agn-pg-gateway input, .agn-pg-gateway textarea { width: 100%; font: inherit; padding: .6rem .7rem; border: 1px solid var(--pg-linha); border-radius: 10px; }
.agn-pg-gateway button, .agn-pg-gateway .button { display: inline-block; padding: .7rem 1.1rem; border: 0; border-radius: 999px; background: var(--pg-acao); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.agn-pg-espera { padding: .9rem 1rem; border-radius: 12px; background: var(--pg-ok-claro); color: var(--pg-ok); font-size: .95rem; }

/* ------------------------------------------------------ v0.20.0: biblioteca -- */
/* As pecas que os 75 templates do Clickmax repetem (05/09): faixa de urgencia,
   hero com imagem ou formulario ao lado, cartoes numerados, depoimentos, selo
   de garantia, autor, numeros, preco de/por, para quem e / nao e, linha do
   tempo, entregaveis do checkout. Tudo mobile-first; a tela larga so reorganiza. */

/* faixa de urgencia no topo (Clickmax: "essa oferta desaparece ao sair") */
.agn-faixa { margin: 0; padding: .55rem 1rem; background: var(--pg-acao); color: #fff; text-align: center; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.agn-faixa--escura { background: var(--pg-escuro); color: var(--pg-escuro-texto); }

/* logo no topo da pagina */
.agn-logo { margin: 0 0 1.6rem; }
.agn-logo img { display: block; width: 130px; height: auto; }
.agn-logo--centro { text-align: center; }
.agn-logo--centro img { margin: 0 auto; }

/* hero variantes */
.agn-hero--claro { background: var(--pg-papel); color: var(--pg-tinta); border-bottom: 1px solid var(--pg-linha); }
.agn-hero--claro h1 { color: var(--pg-tinta); }
.agn-hero--claro .agn-sub { color: var(--pg-suave); }
.agn-hero--claro .agn-sobrancelha { color: var(--pg-acao); }
.agn-hero--centro, .agn-secao--centro { text-align: center; }
.agn-hero--centro .agn-sub, .agn-secao--centro .agn-sub { margin-left: auto; margin-right: auto; }
.agn-hero .agn-check li { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }
.agn-hero .agn-check li::before { border-color: var(--pg-escuro-texto); }
.agn-hero--claro .agn-check li { background: var(--pg-painel); border-color: var(--pg-linha); }
.agn-hero--claro .agn-check li::before { border-color: var(--pg-tinta); }

/* o formulario de captura vira cartao branco quando esta em fundo escuro */
.agn-hero .agn-captura, .agn-secao--escura .agn-captura { padding: 1.25rem 1.2rem 1rem; border-radius: 16px; background: #fff; color: var(--pg-tinta); }
.agn-hero .agn-captura .agn-campo span, .agn-secao--escura .agn-captura .agn-campo span { color: var(--pg-tinta); }
.agn-hero .agn-captura .agn-captura-nota, .agn-secao--escura .agn-captura .agn-captura-nota { color: var(--pg-fraco); }
.agn-captura-titulo { font-size: 1.05rem; font-weight: 800; margin: 0 0 .8rem; }

/* figuras */
.agn-figura { margin: 0 0 1.4rem; }
.agn-figura img { display: block; width: 100%; height: auto; border-radius: 16px; }
.agn-figura--mockup { max-width: 22rem; margin-left: auto; margin-right: auto; }
.agn-figura--mockup img { border-radius: 0; }
.agn-figura--redonda { max-width: 11rem; }
.agn-figura--redonda img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }

/* check com icone cheio (o "check" do Clickmax) e item com titulo + descricao */
.agn-check li strong { display: block; margin-bottom: .15rem; }
.agn-check--icone li::before { display: grid; place-items: center; border: 0; background: var(--pg-acao); color: #fff; font-size: .8rem; font-weight: 800; content: "\2713"; }
.agn-check--solto li { border: 0; background: transparent; padding-left: 2.2rem; padding-top: .35rem; padding-bottom: .35rem; }
.agn-check--solto li::before { left: 0; top: .45rem; }
.agn-secao--escura .agn-check--solto li, .agn-hero .agn-check--solto li { background: transparent; }

/* cartoes (beneficios, passos, bonus, modulos) */
.agn-cartoes { display: grid; gap: .8rem; margin: 0 0 1.4rem; }
.agn-cartao { padding: 1.15rem 1.15rem 1.25rem; border-radius: 14px; background: var(--pg-painel); border: 1px solid var(--pg-linha); }
.agn-cartao h3 { margin-bottom: .35rem; font-size: 1.05rem; }
.agn-cartao p { font-size: .96rem; color: var(--pg-suave); }
.agn-cartao .agn-n { display: block; margin: 0 0 .5rem; font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--pg-acao); }
.agn-cartao .agn-sobrancelha { margin-bottom: .4rem; color: var(--pg-acao); }
.agn-cartao .agn-figura { margin-bottom: .8rem; }
.agn-cartao .agn-figura img { border-radius: 10px; }
.agn-cartao--destaque { background: var(--pg-acao); border-color: var(--pg-acao); color: #fff; }
.agn-cartao--destaque h3, .agn-cartao--destaque p, .agn-cartao--destaque .agn-n, .agn-cartao--destaque .agn-sobrancelha { color: #fff; }
.agn-secao--escura .agn-cartao, .agn-hero .agn-cartao { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }
.agn-secao--escura .agn-cartao p, .agn-hero .agn-cartao p { color: var(--pg-escuro-suave); }
.agn-secao--escura .agn-cartao h3, .agn-hero .agn-cartao h3 { color: #fff; }

/* depoimentos */
.agn-depoimentos { display: grid; gap: .8rem; margin: 0 0 1.4rem; }
.agn-depoimento { padding: 1.1rem 1.15rem 1.15rem; border-radius: 14px; background: var(--pg-painel); border: 1px solid var(--pg-linha); }
.agn-depoimento p { font-size: .98rem; }
.agn-estrelas { margin: 0 0 .5rem; color: var(--pg-acao); letter-spacing: .1em; font-size: .95rem; }
.agn-quem { margin: .6rem 0 0; font-size: .86rem; font-weight: 700; color: var(--pg-suave); }
.agn-quem small { display: block; font-weight: 500; color: var(--pg-fraco); }
.agn-secao--escura .agn-depoimento { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }
.agn-secao--escura .agn-quem { color: var(--pg-escuro-texto); }

/* garantia (selo + texto) e autor (foto + bio): mesma grade */
.agn-garantia, .agn-autor { display: grid; grid-template-columns: 5.5rem 1fr; column-gap: 1.1rem; align-items: center; margin: 0 0 1.2rem; }
.agn-autor { grid-template-columns: 6.5rem 1fr; align-items: start; }
.agn-garantia > .agn-figura, .agn-autor > .agn-figura { grid-row: 1 / span 6; margin: 0; max-width: none; }
.agn-garantia h2, .agn-garantia h3, .agn-autor h2, .agn-autor h3 { margin-bottom: .3rem; }
.agn-garantia p, .agn-autor p { font-size: .96rem; color: var(--pg-suave); }
.agn-secao--escura .agn-garantia p, .agn-secao--escura .agn-autor p { color: var(--pg-escuro-suave); }

/* numeros (prova social em linha) */
.agn-numeros { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 0 0 1.4rem; }
.agn-numero { margin: 0; padding: 1rem .8rem; border-radius: 12px; background: var(--pg-painel); border: 1px solid var(--pg-linha); text-align: center; font-size: .84rem; color: var(--pg-suave); line-height: 1.35; }
.agn-numero strong { display: block; margin-bottom: .2rem; font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; color: var(--pg-tinta); font-variant-numeric: tabular-nums; }
.agn-secao--escura .agn-numero, .agn-hero .agn-numero { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); color: var(--pg-escuro-suave); }
.agn-secao--escura .agn-numero strong, .agn-hero .agn-numero strong { color: #fff; }

/* a oferta como cartao: de/por, parcelas, o que leva, botao */
.agn-oferta { max-width: 30rem; padding: 1.4rem 1.3rem 1.3rem; border: 1.5px solid var(--pg-tinta); border-radius: 16px; background: var(--pg-painel); text-align: center; }
.agn-oferta .agn-sobrancelha { color: var(--pg-acao); }
.agn-preco-de { margin: 0; color: var(--pg-fraco); font-size: .95rem; text-decoration: line-through; }
.agn-preco-por { margin: 0 0 .2rem; font-size: clamp(2.2rem, 9vw, 3rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; }
.agn-preco-parc { margin: 0 0 1rem; color: var(--pg-suave); font-size: .95rem; }
.agn-oferta .agn-check { text-align: left; }
.agn-oferta .agn-cta { margin-top: .6rem; }
.agn-secao--escura .agn-oferta, .agn-hero .agn-oferta { background: #fff; color: var(--pg-tinta); }
.agn-secao--escura .agn-oferta .agn-check li, .agn-hero .agn-oferta .agn-check li { background: var(--pg-papel); border-color: var(--pg-linha); }
.agn-secao--escura .agn-oferta .agn-check li::before { border-color: var(--pg-tinta); }
.agn-hero .agn-preco-por, .agn-secao--escura .agn-preco-por { color: inherit; }

/* para quem e / nao e (e "sem x com") */
.agn-sim-nao { display: grid; gap: .9rem; margin: 0 0 1.4rem; }
.agn-coluna { padding: 1.1rem 1.15rem; border-radius: 14px; background: var(--pg-painel); border: 1px solid var(--pg-linha); }
.agn-coluna h3 { font-size: 1rem; margin-bottom: .6rem; }
.agn-lista-sim, .agn-lista-nao { list-style: none; padding: 0; margin: 0; }
.agn-lista-sim li, .agn-lista-nao li { position: relative; padding: .3rem 0 .3rem 1.8rem; margin: 0; font-size: .96rem; }
.agn-lista-sim li::before, .agn-lista-nao li::before { position: absolute; left: 0; top: .3rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 800; }
.agn-lista-sim li::before { content: "\2713"; background: var(--pg-ok-claro); color: var(--pg-ok); }
.agn-lista-nao li::before { content: "\2715"; background: #fdecec; color: #b91c1c; }
.agn-secao--escura .agn-coluna { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }

/* linha do tempo (semanas, modulos, dias) */
.agn-etapas { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.agn-etapas li { position: relative; margin: 0; padding: 0 0 1.3rem 1.9rem; border-left: 2px solid var(--pg-linha); }
.agn-etapas li:last-child { padding-bottom: .2rem; }
.agn-etapas li::before { content: ""; position: absolute; left: -.5rem; top: .25rem; width: .9rem; height: .9rem; border-radius: 50%; background: var(--pg-acao); box-shadow: 0 0 0 4px var(--pg-papel); }
.agn-etapas li strong { display: block; margin-bottom: .2rem; font-size: 1.05rem; }
.agn-etapa-rotulo { display: block; margin-bottom: .25rem; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pg-acao); }
.agn-secao--escura .agn-etapas li { border-color: rgba(255, 255, 255, .15); }
.agn-secao--escura .agn-etapas li::before { box-shadow: 0 0 0 4px var(--pg-escuro); }

/* checkout em duas colunas (formulario | o que leva) */
.agn-secao--larga > * { max-width: 72rem; }
.agn-ck-duas { display: grid; gap: 1.6rem; }
.agn-ck-lado .agn-check { margin-top: .6rem; }
.agn-secao--estreita > * { max-width: 34rem; }

/* video ainda sem link: a caixa que so quem edita ve (o vsl.css so entra com video) */
.agn-vsl-vazio { margin: 0 0 1.4rem; }
.agn-vsl-vazio .agn-vsl-caixa { display: grid; place-content: center; gap: .2rem; aspect-ratio: 16 / 9; padding: 1rem; border: 1px dashed rgba(255, 255, 255, .35); border-radius: 14px; background: #0b0b0b; color: #ddd; text-align: center; }
.agn-vsl-vazio span { font-size: 2.2rem; }
.agn-vsl-vazio strong { display: block; font-size: 1rem; }
.agn-vsl-vazio em { display: block; font-size: .8rem; color: #999; font-style: normal; }

/* comparacao lado a lado do preco (fatura x oferta) e riscado inline */
.agn-riscado { text-decoration: line-through; color: var(--pg-fraco); }

/* O editor injeta "margin-block-start: 24px" em todo irmao (> * + *) de um
   grupo em fluxo. Dentro de uma GRADE isso desalinha o 1o cartao dos outros;
   dentro de um cartao, afasta demais titulo e texto. Zera-se aqui. */
.agn-cartoes > *, .agn-depoimentos > *, .agn-sim-nao > *, .agn-numeros > *, .agn-ck-duas > *,
.agn-cartao > * + *, .agn-depoimento > * + *, .agn-coluna > * + *, .agn-garantia > * + *, .agn-autor > * + *, .agn-oferta > * + *, .agn-ck-lado > * + * { margin-block-start: 0 !important; }
.agn-cartao > * + *, .agn-depoimento > * + *, .agn-coluna > * + * { margin-top: 0; }
.agn-ck-lado > * + * { margin-top: 1.2rem; }
/* o checkout dentro da coluna estreita: uma coluna so (o resumo vai acima do formulario) */
.agn-ck-duas .agn-ck-grade { grid-template-columns: 1fr !important; }
.agn-ck-duas .agn-ck-resumo { position: static !important; order: 1 !important; }

@media (min-width: 720px) {
	.agn-cartoes { grid-template-columns: 1fr 1fr; gap: 1rem; }
	.agn-depoimentos { grid-template-columns: 1fr 1fr; gap: 1rem; }
	.agn-sim-nao { grid-template-columns: 1fr 1fr; }
	.agn-numeros { grid-template-columns: repeat(4, 1fr); }
	.agn-oferta .agn-cta { width: 100%; display: flex; }
	.agn-hero--centro .agn-cta, .agn-secao--centro .agn-cta { margin-left: auto; margin-right: auto; }
}

@media (min-width: 900px) {
	.agn-cartoes--3 { grid-template-columns: repeat(3, 1fr); }
	.agn-cartoes--4 { grid-template-columns: repeat(4, 1fr); }
	.agn-cartoes--5 { grid-template-columns: repeat(5, 1fr); }
	.agn-ck-duas { grid-template-columns: 1.15fr .85fr; gap: 2.5rem; align-items: start; }
	.agn-ck-duas > * { margin-left: 0; margin-right: 0; }
	/* hero com algo ao lado (imagem ou formulario): texto a esquerda, o lado a direita */
	.agn-hero.agn-hero--lado { display: grid; grid-template-columns: 1.1fr .9fr; grid-auto-rows: auto; grid-auto-flow: row; column-gap: 3.5rem; align-items: center; max-width: 72rem; margin: 0 auto; }
	/* width:100% porque o editor injeta margin auto !important nos filhos: sem largura cheia, logo e sobrancelha centravam na coluna */
	.agn-hero.agn-hero--lado > * { grid-column: 1; grid-row: auto; width: 100%; margin-left: 0; margin-right: 0; justify-self: stretch; align-self: auto; text-align: left; max-width: 40rem; }
	.agn-hero.agn-hero--lado > .agn-logo img { margin: 0; }
	.agn-hero.agn-hero--lado > .agn-hero-lado { grid-column: 2; grid-row: 1 / span 12; justify-self: stretch; align-self: center; max-width: none; margin: 0; }
	.agn-hero.agn-hero--lado > h1 { font-size: clamp(2.2rem, 3.4vw, 3.2rem); }
	/* hero centralizado: sem grade */
	.agn-hero.agn-hero--centro { display: block; }
	.agn-hero.agn-hero--centro > * { max-width: 46rem; margin-left: auto; margin-right: auto; }
	.agn-hero.agn-hero--centro > .agn-figura, .agn-hero.agn-hero--centro > .agn-vsl, .agn-hero.agn-hero--centro > .agn-vsl-vazio { max-width: 56rem; }
	.agn-hero.agn-hero--centro > .agn-cta { display: inline-flex; }
	.agn-secao--centro .agn-cartoes, .agn-secao--centro .agn-depoimentos, .agn-secao--centro .agn-sim-nao { text-align: left; }
	.agn-garantia { grid-template-columns: 7rem 1fr; column-gap: 1.6rem; }
	.agn-autor { grid-template-columns: 9rem 1fr; column-gap: 1.8rem; }
	.agn-oferta { margin-left: auto; margin-right: auto; }
	.agn-etapas { max-width: 40rem; }
}