/* ==========================================================
 * Naga Store - camada das paginas internas
 *
 * O miolo das paginas de texto e do painel de afiliado foi
 * montado no Elementor, com outra fonte (Montserrat/Roboto) e
 * outro dourado (#D4AF37). Ao lado do cabecalho novo isso
 * parecia outra loja.
 *
 * Aqui a gente NAO remonta essas paginas. A gente troca as
 * variaveis que o Elementor usa e forca a nossa tipografia por
 * cima. O conteudo continua editavel no painel do jeito que
 * sempre foi, so que falando a mesma lingua da home.
 * ========================================================== */

.naga-pagina {
	--preto: #0b0b0d;
	--preto-2: #111114;
	--preto-3: #17171b;
	--linha: rgba(255, 255, 255, .08);
	--linha-2: rgba(255, 255, 255, .15);
	--ouro: #c9a227;
	--ouro-claro: #e3c464;
	--texto: #f2f1ef;
	--texto-2: #a7a5a1;
	--texto-3: #8f8d89;  /* era #767471: 4.0:1, reprovava em letra pequena */
}

/* ----------------------------------------------------------
 * O molde das paginas de dentro
 *
 * Usado por quem saiu do Elementor e passou a ser desenhado
 * por nos. A largura acompanha a home, e o titulo grande fica
 * no mesmo tom do resto da casa.
 * -------------------------------------------------------- */
.naga-interna {
	/* ------------------------------------------------------
	 * A coluna da pagina.
	 *
	 * Um valor so, aqui em cima, e o titulo, a regua e o texto
	 * se alinham sozinhos. Cada tipo de pagina troca este
	 * numero mais abaixo: texto corrido pede coluna curta,
	 * carrinho e painel pedem o quadro inteiro.
	 * ---------------------------------------------------- */
	--coluna: 74ch;

	/* A mesma sarjeta do cabecalho e do rodape. Antes a pagina
	   tinha quadro proprio de 1240 COM recheio por dentro, entao
	   o titulo comecava 56px a direita da logo. No computador
	   dava pra ver o degrau. */
	padding: clamp(28px, 5vw, 56px) max(clamp(18px, 4vw, 56px), calc((100% - 1240px) / 2)) clamp(48px, 7vw, 84px);
}

/* ------------------------------------------------------------
 * Tudo no eixo do meio
 * ------------------------------------------------------------
 * O titulo e o texto moram na mesma coluna e essa coluna fica
 * centrada. Antes o texto era uma faixa estreita grudada na
 * esquerda com meia tela vazia do lado direito: no celular
 * ninguem percebia, no computador parecia pagina inacabada.
 *
 * O texto em si continua alinhado a esquerda. Centralizar
 * letra por letra deixa a leitura truncada, porque o olho
 * perde onde a proxima linha comeca.
 * ---------------------------------------------------------- */
.naga-interna-topo,
.naga-interna-corpo {
	max-width: var(--coluna);
	margin-inline: auto;
}

/* Painel e termos do afiliado: o plugin desenha o miolo dele
   com 860px. A coluna acompanha esse numero pro titulo nascer
   em cima do primeiro cartao, e nao 130px a esquerda dele. */
.naga-interna:has(.nsa-wrap) {
	--coluna: 860px;
}

/* Menos nos termos do afiliado. Ali o plugin crava max-width:760px
   no proprio HTML da caixa, e regra cravada no HTML ganha de folha
   de estilo. Em vez de brigar com !important, a coluna do titulo
   desce pros mesmos 760px e o degrau acaba. Se um dia o plugin
   parar de cravar essa medida, o seletor deixa de casar sozinho e
   a pagina volta pros 860px de cima, alinhada do mesmo jeito. */
.naga-interna:has(.nsa-wrap[style*="max-width"]) {
	--coluna: 760px;
}

/* Entrar e criar conta: dois cartoes lado a lado. */
body.naga-conta .naga-interna {
	--coluna: 940px;
}

/* Ja logado o miolo vira painel com menu lateral, e painel
   quer o quadro inteiro. Carrinho e checkout, idem: comprar
   nao e ler, precisa dos dois lados na mesma tela. */
body.naga-conta.logged-in .naga-interna,
body.naga-compra .naga-interna {
	--coluna: none;
}

.naga-interna-topo {
	margin-bottom: clamp(22px, 3vw, 34px);
	padding-bottom: 20px;
	border-bottom: 1px solid var(--linha);
}

.naga-interna-topo h1 {
	font-family: 'Outfit', system-ui, sans-serif;
	font-size: clamp(28px, 4.4vw, 44px);
	letter-spacing: -.03em;
	line-height: 1.05;
	margin: 0;
	color: var(--texto);
	text-wrap: balance;
}

.naga-interna-linha {
	margin: 10px 0 0;
	max-width: 60ch;
	font-size: 15px;
	line-height: 1.6;
	color: var(--texto-2);
}

/* ----------------------------------------------------------
 * O texto das paginas de dentro
 *
 * Termos, privacidade, reembolso, sobre e suporte sao texto
 * corrido escrito no editor comum. Nenhuma regra aqui depende
 * do Elementor: se um dia ele sair de vez, isto continua de pe.
 *
 * Largura de leitura curta de proposito. Linha de 74 letras e
 * onde o olho ainda acha o comeco da proxima sem se perder.
 * -------------------------------------------------------- */
.naga-interna-corpo {
	font-size: 15px;
	line-height: 1.75;
	color: var(--texto-2);
}

.naga-interna-corpo > :first-child {
	margin-top: 0;
}

.naga-interna-corpo > :last-child {
	margin-bottom: 0;
}

.naga-interna-corpo h2 {
	font-family: 'Outfit', system-ui, sans-serif;
	font-size: 21px;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--texto);
	margin: 38px 0 10px;
}

.naga-interna-corpo h3,
.naga-interna-corpo h4 {
	font-family: 'Outfit', system-ui, sans-serif;
	font-size: 17px;
	line-height: 1.3;
	color: var(--texto);
	margin: 26px 0 8px;
}

.naga-interna-corpo p,
.naga-interna-corpo li {
	margin: 0 0 14px;
}

.naga-interna-corpo strong,
.naga-interna-corpo b {
	color: var(--texto);
	font-weight: 700;
}

.naga-interna-corpo ul,
.naga-interna-corpo ol {
	margin: 0 0 16px;
	padding-left: 20px;
}

.naga-interna-corpo li {
	margin-bottom: 6px;
}

.naga-interna-corpo li::marker {
	color: var(--ouro);
}

.naga-interna-corpo a {
	color: var(--ouro-claro);
	text-decoration: none;
	border-bottom: 1px solid rgba(227, 196, 100, .35);
}

.naga-interna-corpo a:hover {
	border-bottom-color: var(--ouro-claro);
}

/* O risco dourado so faz sentido em link dentro de texto corrido.
   Quando o link e uma foto, um botao ou uma celula de tabela, o
   mesmo risco virava uma barra clara solta embaixo da imagem. */
.naga-interna-corpo a:has(img),
.naga-interna-corpo a[class*="ct-media-container"],
.naga-interna-corpo .shop_table a,
.naga-interna-corpo a.button,
.naga-interna-corpo a.remove {
	border-bottom: 0;
	padding-bottom: 0;
}

/* A regua entre secoes. Vinha do editor com cara de linha do
   navegador, cinza clara demais pro fundo preto. */
.naga-interna-corpo hr {
	height: 0;
	margin: 30px 0;
	border: 0;
	border-top: 1px solid var(--linha);
}

.naga-interna-corpo table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.naga-interna-corpo th,
.naga-interna-corpo td {
	padding: 10px 12px;
	text-align: left;
	border-bottom: 1px solid var(--linha);
}

/* ----------------------------------------------------------
 * O link "Pular para o conteudo"
 *
 * Ele existe pra quem navega pelo teclado e nao deve sumir do
 * HTML. O que ele nao pode e ficar visivel como uma linha solta
 * no topo. Fora da tela por padrao, visivel ao receber foco.
 * -------------------------------------------------------- */
.skip-link.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	border: 0;
	overflow: hidden;
	white-space: nowrap;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}

.skip-link.screen-reader-text:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	width: auto;
	height: auto;
	margin: 0;
	padding: 10px 16px;
	clip: auto;
	clip-path: none;
	background: var(--preto-2);
	color: var(--texto);
	border: 1px solid var(--ouro);
	border-radius: 8px;
	font-size: 14px;
	text-decoration: none;
	z-index: 9999;
}

/* ----------------------------------------------------------
 * Aviso do nick no carrinho e no checkout
 * -------------------------------------------------------- */
.naga-aviso-nick {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	max-width: 900px;
	margin: 0 auto 22px;
	padding: 12px 14px;
	border: 1px solid rgba(201, 162, 39, .28);
	border-radius: 10px;
	background: var(--preto-3);
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--texto-2);
}

.naga-aviso-nick b {
	color: var(--texto);
	font-weight: 700;
}

.naga-aviso-nick .ic {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	display: grid;
	place-items: center;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--ouro);
	color: #191400;
	font-family: 'Outfit', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
}

/* ----------------------------------------------------------
 * As cores globais do Elementor
 *
 * Estas variaveis vem do "kit 520". Trocando elas aqui, todo
 * widget que usa cor global passa a usar a paleta nova sem
 * ninguem precisar abrir o Elementor.
 * -------------------------------------------------------- */
.naga-pagina.elementor-kit-520 {
	--e-global-color-primary: #f2f1ef;
	--e-global-color-secondary: #c9a227;
	--e-global-color-text: #a7a5a1;
	--e-global-color-accent: #e3c464;
	--e-global-color-a0af68b: #c9a227;
	--e-global-color-c5f6042: #0b0b0d;
	--e-global-color-e34132c: #17171b;
	--e-global-color-6e95ee0: #a7a5a1;
	--e-global-color-3ad6596: #f2f1ef;
	--e-global-color-41245fa: #0b0b0d;
	--e-global-typography-primary-font-family: 'Outfit';
	--e-global-typography-secondary-font-family: 'Outfit';
	--e-global-typography-text-font-family: 'Manrope';
	--e-global-typography-accent-font-family: 'Manrope';
}

/* A largura de leitura passa a ser a mesma da home. */
.naga-pagina .e-con {
	--container-max-width: 1240px;
}

/* ----------------------------------------------------------
 * Tipografia
 *
 * O !important e proposital e esta preso a esta classe. O
 * Elementor grava a fonte direto em cada widget, num arquivo
 * CSS por pagina. Sem forcar, a fonte velha ganha.
 * -------------------------------------------------------- */
.naga-pagina .elementor h1,
.naga-pagina .elementor h2,
.naga-pagina .elementor h3,
.naga-pagina .elementor h4,
.naga-pagina .elementor h5 {
	font-family: 'Outfit', system-ui, sans-serif !important;
	color: var(--texto);
	letter-spacing: -.03em;
	line-height: 1.15;
	text-wrap: balance;
}

.naga-pagina .elementor,
.naga-pagina .elementor p,
.naga-pagina .elementor li,
.naga-pagina .elementor td,
.naga-pagina .elementor th,
.naga-pagina .elementor label,
.naga-pagina .elementor span {
	font-family: 'Manrope', system-ui, sans-serif !important;
}

.naga-pagina .elementor h1 {
	font-size: clamp(28px, 4vw, 44px);
}

.naga-pagina .elementor h2 {
	font-size: clamp(21px, 2.4vw, 28px);
	margin-top: 34px;
}

.naga-pagina .elementor h3 {
	font-size: 17px;
	margin-top: 22px;
}

.naga-pagina .elementor p,
.naga-pagina .elementor li {
	color: var(--texto-2);
	font-size: 14.5px;
	line-height: 1.7;
}

.naga-pagina .elementor a {
	color: var(--ouro-claro);
	text-decoration: none;
}

.naga-pagina .elementor a:hover {
	text-decoration: underline;
}

/* Texto corrido nao passa da largura confortavel de leitura.
   Vale so pro bloco de texto, pra nao apertar tabela nem painel. */
.naga-pagina .elementor-widget-text-editor p,
.naga-pagina .elementor-widget-text-editor li {
	max-width: 74ch;
}

/* Data e versao no alto das paginas de termos. */
.naga-pagina .elementor-widget-text-editor p:first-child em,
.naga-pagina .elementor-widget-text-editor p:first-child small {
	color: var(--texto-3);
	font-size: 12.5px;
}

/* ----------------------------------------------------------
 * Paginas do plugin de afiliados
 *
 * O plugin escreve o CSS dele no wp_head, com paleta e fonte
 * proprias: ouro #D8B44A, cinza #7A7060 e a fonte do sistema.
 * Tres paginas do site (afiliados, painel e termos do afiliado)
 * sao inteiras dele. Na tela pareciam outra loja.
 *
 * Ele guarda cor e fundo em variavel. Entao aqui eu so troco o
 * valor delas. Duas classes na frente ganham do :root dele sem
 * precisar de !important, e nenhuma regra de layout do plugin
 * e tocada. Se um dia o plugin atualizar, isto continua valendo.
 * -------------------------------------------------------- */
.naga-pagina .nsa-wrap {
	--nsa-gold: var(--ouro-claro);
	--nsa-border: var(--linha);
	--nsa-text: var(--texto);
	--nsa-muted: var(--texto-2);
	--nsa-bg: var(--preto-2);
	--nsa-bg2: var(--preto-3);
	color: var(--texto-2);
	font-family: 'Manrope', system-ui, sans-serif;

	/* O plugin trava a largura e nao centraliza. Sem esta linha o
	   painel inteiro fica encostado na esquerda da tela grande. */
	margin-inline: auto;

	/* O plugin ainda poe 16px de recheio por dentro da caixa. Como
	   a margem da pagina ja esta do lado de fora, esse recheio so
	   empurrava o texto pra dentro e desalinhava com o titulo. */
	padding-inline: 0;
}

/* Titulo e numero grande na fonte de titulo da casa. */
.naga-pagina .nsa-wrap h1,
.naga-pagina .nsa-wrap h2,
.naga-pagina .nsa-wrap h3,
.naga-pagina .nsa-hero-stat-num,
.naga-pagina .nsa-sim-pp,
.naga-pagina .nsa-btn,
.naga-pagina .nsa-btn-outline {
	font-family: 'Outfit', system-ui, sans-serif;
	letter-spacing: -.02em;
}

/* Um raio de canto so, o mesmo do resto do site. */
.naga-pagina .nsa-card,
.naga-pagina .nsa-hero,
.naga-pagina .nsa-simulator,
.naga-pagina .nsa-leaderboard,
.naga-pagina .nsa-top-affiliate,
.naga-pagina .nsa-stats {
	border-radius: 14px;
}

.naga-pagina .nsa-btn,
.naga-pagina .nsa-btn-outline,
.naga-pagina .nsa-alert,
.naga-pagina .nsa-sim-result,
.naga-pagina .nsa-field input,
.naga-pagina .nsa-field select,
.naga-pagina .nsa-field textarea {
	border-radius: 10px;
}

/* Etiqueta de 11px nao se le no celular. Sobe pro minimo. */
.naga-pagina .nsa-hero-stat-label,
.naga-pagina .nsa-sim-label,
.naga-pagina .nsa-lb-foot,
.naga-pagina .nsa-top-label,
.naga-pagina .nsa-rules-table th,
.naga-pagina .nsa-field label {
	font-size: 12.5px;
}

/* O corpo dos termos do afiliado tem a cor cravada no HTML, um
   bege que nao existe em lugar nenhum da loja. Aqui o seletor
   pega pela propria cor errada: quando ela sair do plugin, esta
   linha para de casar sozinha e nao sobra sujeira. */
.naga-pagina .nsa-wrap [style*="#9a9080"] {
	color: var(--texto-2) !important;
}

@media (max-width: 900px) {
	.naga-aviso-nick {
		margin-inline: 16px;
	}

	/* A tabela de comissoes tem quatro colunas de texto e passava
	   6px da tela do celular, o que fazia a pagina inteira andar
	   pro lado. Aperto o recheio da celula, que era o excesso. */
	.naga-pagina .nsa-rules-table {
		table-layout: fixed;
		width: 100%;
	}

	.naga-pagina .nsa-rules-table th,
	.naga-pagina .nsa-rules-table td {
		padding: 9px 8px;
		word-break: break-word;
	}
}