/* =========================================================
   Tarot Online — estilos base
   Ordem: variaveis > reset > tipografia > layout > componentes
   ========================================================= */

:root {
	--cor-fundo: #05070E;
	--cor-fundo-alt: #0A0D18;
	--cor-ouro: #E3B96B;
	--cor-ouro-claro: #F6D68C;
	--cor-ouro-fundo: #A9803B;
	--cor-texto: #D7D9E2;

	--cor-texto-suave: #9A9DAB;
	--cor-linha: rgba(227, 185, 107, .22);
	--cor-linha-forte: rgba(227, 185, 107, .45);
	--cor-cartao: rgba(255, 255, 255, .022);

	--fonte-titulo: Vollkorn, "Iowan Old Style", Georgia, "Times New Roman", serif;
	--fonte-corpo: Jost, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--largura: 1200px;
	--largura-estreita: 760px;
	--respiro: clamp(1.25rem, 4vw, 2.5rem);
	--secao-y: clamp(3.5rem, 9vw, 7.5rem);
	--raio: 4px;
	--topo-altura: 84px;

	--transicao: .22s ease;
	/* Desaceleracao com um leve exagero no comeco: da peso ao movimento. */
	--saida: cubic-bezier(.2, .8, .3, 1);
	--revelo: .7s;
}

/* ---------- Reset enxuto ---------- */

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

/*
 * O atributo hidden precisa vencer qualquer display do tema.
 * Sem isto, `elemento.hidden = true` no JS nao esconde nada em quem tem
 * display proprio (era o caso do botao "Salvar escolhas", que aparecia
 * antes de a pessoa clicar em "Personalizar").
 */
[hidden] { display: none !important; }

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

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
	margin: 0;
	background: var(--cor-fundo);
	color: var(--cor-texto);
	font-family: var(--fonte-corpo);
	font-size: 1.0625rem;
	font-weight: 300;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

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

a { color: var(--cor-ouro); text-decoration: none; transition: color var(--transicao); }
a:hover, a:focus-visible { color: var(--cor-ouro-claro); }

button { font: inherit; color: inherit; }

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

/* ---------- Tipografia ---------- */

h1, h2, h3, h4 {
	font-family: var(--fonte-titulo);
	font-weight: 600;
	color: var(--cor-ouro-claro);
	line-height: 1.15;
	letter-spacing: -.01em;
	margin: 0 0 .5em;
}

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

s { color: var(--cor-texto-suave); }

.sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.pular-conteudo {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--cor-ouro);
	color: #05070E;
	padding: .75rem 1.25rem;
	font-weight: 500;
}
.pular-conteudo:focus { left: 1rem; top: 1rem; }

/* ---------- Layout ---------- */

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

.container--estreito { max-width: var(--largura-estreita); }
.centralizado { text-align: center; }

.secao {
	position: relative;
	padding-block: var(--secao-y);
}

.secao--sobre { background: var(--cor-fundo-alt); }
.secao--valores { background: var(--cor-fundo); }

.secao--com-fundo::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--secao-img);
	background-size: cover;
	background-position: center;
	opacity: .16;
	z-index: 0;
}
.secao--com-fundo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, var(--cor-fundo) 0%, rgba(5, 7, 14, .72) 35%, var(--cor-fundo) 100%);
	z-index: 0;
}
.secao--com-fundo > .container { position: relative; z-index: 1; }

@media (max-width: 900px) {
	.secao--com-fundo::before { background-image: var(--secao-img-sm, var(--secao-img)); }
}

.secao__cabecalho { margin-bottom: clamp(2rem, 5vw, 3.5rem); }

.secao__olho {
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--cor-ouro-fundo);
	margin: 0 0 .75rem;
}

.secao__titulo {
	font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem);
	margin: 0;
}

.secao__risco {
	display: block;
	width: 58px;
	height: 1px;
	background: var(--cor-ouro-fundo);
	margin-top: 1.75rem;
}

.secao__texto {
	max-width: 62ch;
	color: var(--cor-texto);
	margin-top: 1.75rem;
}

.secao__rodape { margin-top: clamp(2rem, 5vw, 3rem); }

/* ---------- Cabecalho ---------- */

.topo {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(5, 7, 14, .92);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid rgba(227, 185, 107, .12);
}

.topo__interno {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: var(--topo-altura);
}

.marca {
	display: inline-flex;
	align-items: center;
	gap: .875rem;
	color: var(--cor-ouro);
	flex-shrink: 0;
}

.marca__simbolo {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	color: var(--cor-ouro);
}

.marca__nome {
	font-family: var(--fonte-titulo);
	font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
	font-weight: 600;
	color: var(--cor-ouro-claro);
	letter-spacing: .01em;
	white-space: nowrap;
}

.navegacao {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 3vw, 2.5rem);
}

.navegacao__lista {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 2.5vw, 2.25rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.navegacao__lista a {
	font-size: .8125rem;
	font-weight: 400;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #E6E7EE;
	white-space: nowrap;
}
.navegacao__lista a:hover,
.navegacao__lista .current-menu-item > a,
.navegacao__lista .current_page_item > a { color: var(--cor-ouro); }

/* Submenu */
.navegacao__lista .sub-menu {
	position: absolute;
	list-style: none;
	margin: .5rem 0 0;
	padding: .5rem 0;
	background: var(--cor-fundo-alt);
	border: 1px solid var(--cor-linha);
	min-width: 200px;
	display: none;
	flex-direction: column;
	gap: 0;
}
.navegacao__lista li { position: relative; }
.navegacao__lista li:hover > .sub-menu,
.navegacao__lista li:focus-within > .sub-menu { display: flex; }
.navegacao__lista .sub-menu a { display: block; padding: .5rem 1.25rem; letter-spacing: .08em; }

.menu-botao {
	display: none;
	width: 46px; height: 46px;
	background: none;
	border: 1px solid var(--cor-linha);
	border-radius: var(--raio);
	cursor: pointer;
	position: relative;
}
.menu-botao__barras,
.menu-botao__barras::before,
.menu-botao__barras::after {
	position: absolute;
	left: 50%;
	width: 20px; height: 1.5px;
	background: var(--cor-ouro);
	transform: translateX(-50%);
	transition: transform var(--transicao), opacity var(--transicao);
}
.menu-botao__barras { top: 50%; margin-top: -.75px; }
.menu-botao__barras::before { content: ""; top: -6px; left: 50%; }
.menu-botao__barras::after { content: ""; top: 6px; left: 50%; }

.menu-botao[aria-expanded="true"] .menu-botao__barras { background: transparent; }
.menu-botao[aria-expanded="true"] .menu-botao__barras::before { transform: translateX(-50%) translateY(6px) rotate(45deg); }
.menu-botao[aria-expanded="true"] .menu-botao__barras::after { transform: translateX(-50%) translateY(-6px) rotate(-45deg); }

/* ---------- Botoes ---------- */

.botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .875rem 1.75rem;
	font-family: var(--fonte-corpo);
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	border-radius: var(--raio);
	border: 1px solid transparent;
	cursor: pointer;
	text-align: center;
	transition: background-color var(--transicao), color var(--transicao), border-color var(--transicao), transform var(--transicao);
}

.botao--ouro {
	background: var(--cor-ouro);
	color: #08090F;
	border-color: var(--cor-ouro);
}
.botao--ouro:hover { background: var(--cor-ouro-claro); border-color: var(--cor-ouro-claro); color: #08090F; }

.botao--contorno {
	background: transparent;
	color: var(--cor-ouro-claro);
	border-color: var(--cor-ouro-fundo);
}
.botao--contorno:hover { border-color: var(--cor-ouro); color: var(--cor-ouro-claro); background: rgba(227, 185, 107, .07); }

.botao--texto {
	background: none;
	border: none;
	padding: .5rem 0;
	color: var(--cor-ouro);
	text-transform: none;
	letter-spacing: .02em;
	font-size: .9375rem;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.botao--desativado {
	background: rgba(255, 255, 255, .05);
	color: var(--cor-texto-suave);
	border-color: rgba(255, 255, 255, .1);
	cursor: not-allowed;
}

.botao--bloco { width: 100%; }
.botao--grande { padding: 1.0625rem 2.25rem; font-size: .875rem; }

.topo__cta { padding: .8125rem 1.5rem; }

/* ---------- Hero ---------- */

.hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: min(88vh, 780px);
	padding-block: clamp(4rem, 12vw, 8rem);
	background-color: #04050B;
	background-image: var(--hero-img);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

/* Telas menores recebem uma imagem menor: menos dados, mesma aparencia. */
@media (max-width: 1100px) {
	.hero { background-image: var(--hero-img-md, var(--hero-img)); }
}
@media (max-width: 700px) {
	.hero { background-image: var(--hero-img-sm, var(--hero-img-md, var(--hero-img))); }
}

.hero__veu {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(4, 5, 11, calc(var(--hero-escuro, .55) + .3)) 0%, rgba(4, 5, 11, var(--hero-escuro, .55)) 55%, rgba(4, 5, 11, .35) 100%),
		linear-gradient(180deg, rgba(4, 5, 11, .85) 0%, transparent 28%, rgba(4, 5, 11, .9) 100%);
}

.hero__interno { position: relative; }

.hero__titulo {
	max-width: 15ch;
	font-size: clamp(2.5rem, 1.4rem + 5.2vw, 5rem);
	line-height: 1.06;
	color: var(--cor-ouro-claro);
	margin: 0;
	text-wrap: balance;
}

.hero__risco {
	display: block;
	width: 58px;
	height: 1px;
	background: var(--cor-ouro-fundo);
	margin: clamp(1.75rem, 4vw, 2.5rem) 0 1.5rem;
}

.hero__texto {
	max-width: 46ch;
	color: #C6C8D3;
	font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
	margin: 0;
}

.hero__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: clamp(2rem, 5vw, 2.75rem);
}

/* ---------- Duas colunas (Sobre) ---------- */

.duas-colunas {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: center;
}

.duas-colunas__texto .secao__risco { margin-bottom: 0; }

/* Moldura dourada deslocada (igual ao layout) */
.moldura {
	position: relative;
	margin: 0;
	padding: 0;
	isolation: isolate;
}
.moldura::before {
	content: "";
	position: absolute;
	inset: -18px -18px 18px 18px;
	border: 1px solid var(--cor-ouro-fundo);
	border-radius: var(--raio);
	z-index: -1;
}
.moldura__img {
	width: 100%;
	border-radius: var(--raio);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.moldura--larga { margin-block: 2.5rem 3rem; }
.moldura--larga::before { inset: -14px -14px 14px 14px; }

/* ---------- Grades e cartoes ---------- */

.grade {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2rem);
}
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grade--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.cartao {
	background: var(--cor-cartao);
	border: 1px solid var(--cor-linha);
	border-radius: var(--raio);
	padding: clamp(1.75rem, 4vw, 2.75rem);
	display: flex;
	flex-direction: column;
	transition: border-color var(--transicao), background-color var(--transicao), transform var(--transicao);
}
.cartao:hover {
	border-color: var(--cor-linha-forte);
	background: rgba(255, 255, 255, .04);
	transform: translateY(-2px);
}

.cartao__titulo {
	font-size: clamp(1.25rem, 1.1rem + .55vw, 1.5rem);
	margin: 0;
}
.cartao__titulo a { color: inherit; }
.cartao__titulo a:hover { color: var(--cor-ouro); }

.cartao__risco {
	display: block;
	height: 1px;
	background: var(--cor-linha);
	margin: 1.125rem 0 1.375rem;
}

.cartao__texto {
	color: #BFC2CE;
	font-size: 1rem;
	margin: 0;
}

.cartao__pe {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: auto;
	padding-top: 1.5rem;
}
.cartao__pe:empty { display: none; }

.cartao__meta {
	font-size: .8125rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cor-texto-suave);
}

.cartao__acoes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1rem;
	padding-top: 1.5rem;
}
.cartao__acoes .botao { padding: .8125rem 1.5rem; }

.cartao__detalhes {
	font-size: .8125rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cor-texto-suave);
}
.cartao__detalhes:hover { color: var(--cor-ouro); }

/* ---------- Autoria (fim dos artigos) ---------- */

.autoria {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	margin-top: clamp(2.5rem, 6vw, 3.5rem);
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: var(--cor-cartao);
	border: 1px solid var(--cor-linha);
	border-radius: var(--raio);
}

.autoria__foto {
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid var(--cor-linha-forte);
}

.autoria__olho {
	margin: 0 0 .25rem;
	font-size: .6875rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cor-texto-suave);
}

.autoria__nome {
	margin: 0;
	font-family: var(--fonte-titulo);
	font-size: 1.125rem;
	color: var(--cor-ouro-claro);
}
.autoria__titulo {
	display: block;
	font-family: var(--fonte-corpo);
	font-size: .8125rem;
	color: var(--cor-texto-suave);
	margin-top: .125rem;
}

.autoria__bio {
	margin: .75rem 0 0;
	font-size: .875rem;
	line-height: 1.7;
	color: var(--cor-texto-suave);
}

.autoria__perfil {
	display: inline-block;
	margin-top: .75rem;
	font-size: .8125rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 560px) {
	.autoria { flex-direction: column; gap: 1rem; }
}

/* ---------- Depoimentos ---------- */

.secao--depoimentos { background: var(--cor-fundo-alt); }

.depoimento {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin: 0;
}

.depoimento__texto {
	position: relative;
	margin: 0;
	padding-top: 1.5rem;
	font-size: .9375rem;
	line-height: 1.8;
}
.depoimento__texto p { margin: 0; }

/* Aspa decorativa; o texto ja esta em <blockquote>, isto e so desenho. */
.depoimento__texto::before {
	content: "\201C";
	position: absolute;
	top: -.5rem;
	left: -.125rem;
	font-family: var(--fonte-titulo);
	font-size: 3.25rem;
	line-height: 1;
	color: var(--cor-ouro-fundo);
	opacity: .55;
}

.depoimento__autor {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: .125rem;
}
.depoimento__nome {
	font-style: normal;
	font-weight: 500;
	font-size: .9375rem;
	color: var(--cor-ouro-claro);
}
.depoimento__detalhe {
	font-size: .8125rem;
	color: var(--cor-texto-suave);
}

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

.secao--faq { background: var(--cor-fundo); }

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

.faq__pergunta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding: 1.1875rem 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--fonte-titulo);
	font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
	color: var(--cor-ouro-claro);
	transition: color var(--transicao);
}
/* Tira o triangulo padrao do <details> nos dois motores. */
.faq__pergunta::-webkit-details-marker { display: none; }
.faq__pergunta::marker { content: ""; }

.faq__pergunta:hover { color: var(--cor-ouro); }
.faq__pergunta:focus-visible { outline: 2px solid var(--cor-ouro); outline-offset: 4px; }

/* Sinal de + que vira - ao abrir. */
.faq__sinal {
	position: relative;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}
.faq__sinal::before,
.faq__sinal::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--cor-ouro);
	transition: transform var(--transicao), opacity var(--transicao);
}
.faq__sinal::after { transform: rotate(90deg); }
.faq__item[open] .faq__sinal::after { transform: rotate(0); opacity: 0; }

.faq__resposta {
	padding: 0 0 1.5rem;
	max-width: 68ch;
	color: var(--cor-texto-suave);
	font-size: .9375rem;
	line-height: 1.75;
}
.faq__resposta p { margin: 0; }
.faq__item[open] .faq__resposta { animation: desdobrar .3s var(--saida); }

/* ---------- Rodape ---------- */

.rodape {
	background: var(--cor-fundo);
	border-top: 1px solid rgba(227, 185, 107, .12);
	padding-block: clamp(3rem, 7vw, 5rem);
	text-align: center;
}

.rodape__interno {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
}

.marca--rodape .marca__simbolo { width: 52px; height: 52px; }
.marca--rodape .marca__nome { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); }

.rodape__frase {
	max-width: 52ch;
	color: var(--cor-texto-suave);
	font-size: .9375rem;
	margin: 0;
}

.rodape__site a {
	font-family: var(--fonte-titulo);
	font-weight: 600;
	letter-spacing: .08em;
	font-size: 1.0625rem;
}

.rodape__lista {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.rodape__lista a { font-size: .875rem; color: var(--cor-texto-suave); }
.rodape__lista a:hover { color: var(--cor-ouro); }

.rodape__contatos { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
.rodape__contato {
	font-size: .8125rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cor-texto-suave);
}
.rodape__contato:hover { color: var(--cor-ouro); }

.rodape__widgets { width: 100%; max-width: var(--largura-estreita); }

.rodape__creditos {
	font-size: .8125rem;
	color: #6E7180;
	margin: 1rem 0 0;
}

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

.wpp-flutuante {
	position: fixed;
	right: clamp(1rem, 3vw, 1.75rem);
	bottom: clamp(1rem, 3vw, 1.75rem);
	z-index: 60;
	width: 56px; height: 56px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #25D366;
	color: #06240F;
	box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
	transition: transform .28s var(--saida), box-shadow .28s ease,
		opacity .28s ease, visibility .28s;
	/*
	 * Entra depois do hero: nao disputa atencao com a primeira dobra.
	 * "backwards" (e nao "both") de proposito: com "both" o transform do
	 * ultimo quadro ficaria colado no elemento e mataria o hover.
	 */
	animation: wpp-entrar .5s var(--saida) 1.1s backwards;

	/* Fica acima da barra de cookies quando ela aparece. */
	transform: translateY(calc(-1 * var(--lgpd-altura, 0px)));
}

.wpp-flutuante svg { position: relative; }

/*
 * Halo de atencao: pulsa TRES vezes e para.
 * Pulso infinito irrita, come bateria no celular e da cara de site de
 * template. Tres batidas chamam o olho e somem.
 */
.wpp-flutuante::before {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	border: 2px solid #25D366;
	opacity: 0;
	pointer-events: none;
	animation: wpp-halo 2.4s ease-out 2s 3;
}

/* Etiqueta que desliza no hover/foco — o mesmo padrao dos sites bons. */
.wpp-flutuante__rotulo {
	position: absolute;
	right: calc(100% + .625rem);
	white-space: nowrap;
	background: #0B0E1A;
	color: var(--cor-texto);
	border: 1px solid var(--cor-linha);
	border-radius: 999px;
	padding: .4375rem .8125rem;
	font-size: .75rem;
	letter-spacing: .04em;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
	opacity: 0;
	transform: translateX(8px);
	transition: opacity var(--transicao), transform var(--transicao);
	pointer-events: none;
}

.wpp-flutuante:hover,
.wpp-flutuante:focus-visible {
	transform: translateY(calc(-1 * var(--lgpd-altura, 0px) - 3px)) scale(1.06);
	box-shadow: 0 16px 36px rgba(0, 0, 0, .55);
	color: #06240F;
}
.wpp-flutuante:hover .wpp-flutuante__rotulo,
.wpp-flutuante:focus-visible .wpp-flutuante__rotulo { opacity: 1; transform: none; }
.wpp-flutuante:active { transform: translateY(calc(-1 * var(--lgpd-altura, 0px))) scale(.97); }

/*
 * Sobe exatamente a altura da barra de cookies enquanto ela estiver na tela,
 * em vez de sumir. Quem mede a barra e o lgpd.js, que grava a altura em
 * --lgpd-altura: assim o desvio e sempre certo, seja a barra de uma linha no
 * desktop ou de tres no celular. Sem JS a variavel vale 0 e nada se move.
 */

@keyframes wpp-entrar {
	from { opacity: 0; transform: translateY(14px) scale(.8); }
	to   { opacity: 1; transform: none; }
}

@keyframes wpp-halo {
	0%   { opacity: .8; transform: scale(.9); }
	80%  { opacity: 0;  transform: scale(1.6); }
	100% { opacity: 0;  transform: scale(1.6); }
}

/* ---------- LGPD: aviso de cookies ---------- */

/*
 * Barra baixa, nao cartao. A primeira tela precisa ser o site, nao o aviso:
 * uma linha de texto e os botoes. O detalhe por categoria so aparece se a
 * pessoa clicar em "Personalizar" (o painel nasce com [hidden]).
 */
.lgpd {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 80;
	padding: clamp(.5rem, 1.5vw, .875rem);
	display: flex;
	justify-content: center;
}
.lgpd[hidden] { display: none; }

.lgpd__caixa {
	width: 100%;
	max-width: 1080px;
	background: rgba(11, 14, 26, .96);
	backdrop-filter: saturate(140%) blur(10px);
	border: 1px solid var(--cor-linha);
	border-radius: 10px;
	padding: .8125rem 1.125rem;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .55);

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1.25rem;

	animation: lgpd-entrar .45s var(--saida) backwards;
}

@keyframes lgpd-entrar {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

.lgpd__titulo {
	font-size: .9375rem;
	line-height: 1.3;
	margin: 0;
	flex: 0 0 auto;
	color: var(--cor-ouro-claro);
}
.lgpd__titulo:focus { outline: none; }

.lgpd__texto {
	flex: 1 1 20rem;
	font-size: .8125rem;
	line-height: 1.55;
	color: #BFC2CE;
	margin: 0;
}
.lgpd__texto a { text-decoration: underline; text-underline-offset: 3px; }

/*
 * Ocupa a linha inteira: enquanto esta escondido, titulo + texto + botoes
 * cabem numa faixa so; ao abrir, o painel empurra os botoes para baixo.
 */
.lgpd__opcoes {
	flex: 1 1 100%;
	margin-top: .375rem;
	padding-top: .875rem;
	border-top: 1px solid rgba(255, 255, 255, .08);
	display: grid;
	gap: .875rem;
	animation: desdobrar .3s var(--saida);
}
.lgpd__opcoes[hidden] { display: none; }

/* Usado aqui e nas respostas do FAQ: painel que se abre no lugar. */
@keyframes desdobrar {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

.lgpd__rotulo {
	display: flex;
	align-items: center;
	gap: .625rem;
	cursor: pointer;
	font-size: .9375rem;
	color: var(--cor-ouro-claro);
}
.lgpd__rotulo input { accent-color: var(--cor-ouro); width: 17px; height: 17px; }
.lgpd__rotulo input:disabled { cursor: not-allowed; opacity: .75; }

.lgpd__sempre {
	font-style: normal;
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cor-texto-suave);
	margin-left: .375rem;
}

.lgpd__opcao-texto {
	margin: .375rem 0 0 1.75rem;
	font-size: .8125rem;
	line-height: 1.6;
	color: var(--cor-texto-suave);
}

.lgpd__acoes {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin-top: 0;
}
/* Rejeitar tem o mesmo tamanho de Aceitar: exigencia da LGPD. */
.lgpd__acoes .botao { padding: .6875rem 1.0625rem; font-size: .6875rem; }

.lgpd__link {
	background: none;
	border: none;
	padding: .5rem;
	color: var(--cor-texto-suave);
	font-size: .8125rem;
	letter-spacing: .06em;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.lgpd__link:hover { color: var(--cor-ouro); }

/* Aviso curto abaixo de formularios */
.lgpd-aviso {
	margin-top: 1.25rem;
	font-size: .8125rem;
	line-height: 1.6;
	color: var(--cor-texto-suave);
	max-width: 60ch;
}

/* Links legais no rodape */
.rodape__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .5rem 1.5rem;
	margin-top: .5rem;
}
.rodape__legal a,
.rodape__legal-botao {
	font-size: .8125rem;
	color: var(--cor-texto-suave);
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.rodape__legal a:hover,
.rodape__legal-botao:hover { color: var(--cor-ouro); }

@media (max-width: 560px) {
	.lgpd { padding: .5rem; }
	.lgpd__caixa { gap: .5rem .75rem; padding: .875rem; }
	.lgpd__titulo { flex: 1 1 100%; }
	.lgpd__acoes { flex: 1 1 100%; margin-top: .25rem; }
	/* Aceitar e Rejeitar lado a lado; "Personalizar" fica de link embaixo. */
	.lgpd__acoes .botao { flex: 1 1 calc(50% - .25rem); }
	.lgpd__link { flex: 1 1 100%; text-align: center; }
}

/* ---------- Conteudo do editor ---------- */

.conteudo-editor > * + * { margin-top: 1.25em; }
.conteudo-editor h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem); margin-top: 2em; }
.conteudo-editor h3 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem); margin-top: 1.75em; }
.conteudo-editor ul, .conteudo-editor ol { padding-left: 1.35em; }
.conteudo-editor li + li { margin-top: .5em; }
.conteudo-editor img { border-radius: var(--raio); }
.conteudo-editor blockquote {
	margin: 2em 0;
	padding-left: 1.5rem;
	border-left: 2px solid var(--cor-ouro-fundo);
	font-family: var(--fonte-titulo);
	font-size: 1.25rem;
	color: var(--cor-ouro-claro);
}
.conteudo-editor a { text-decoration: underline; text-underline-offset: 3px; }

.aviso-admin {
	border: 1px dashed var(--cor-ouro-fundo);
	padding: 1.25rem;
	border-radius: var(--raio);
	color: var(--cor-texto-suave);
	font-size: .9375rem;
}

/* ---------- Documentos legais ---------- */

.legal__data {
	margin: 1.5rem 0 0;
	font-size: .8125rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cor-texto-suave);
}

.legal__indice {
	background: var(--cor-cartao);
	border: 1px solid var(--cor-linha);
	border-radius: var(--raio);
	padding: clamp(1.25rem, 3vw, 1.75rem);
	margin-bottom: 2.5rem;
}
.legal__indice-titulo {
	font-size: .8125rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--cor-ouro-fundo);
	margin: 0 0 .875rem;
	font-family: var(--fonte-corpo);
	font-weight: 500;
}
.legal__indice ol { margin: 0; padding-left: 1.25rem; }
.legal__indice li { margin-top: .375rem; font-size: .9375rem; }
.legal__indice a { color: var(--cor-texto); }
.legal__indice a:hover { color: var(--cor-ouro); }

.legal__texto h2 { scroll-margin-top: calc(var(--topo-altura) + 1rem); }

.legal__contato {
	margin-top: 3rem;
	padding: clamp(1.5rem, 4vw, 2rem);
	border: 1px solid var(--cor-linha-forte);
	border-radius: var(--raio);
	background: var(--cor-cartao);
}
.legal__contato h2 { font-size: 1.25rem; margin-top: 0; }
.legal__contato-prazo { font-size: .875rem; color: var(--cor-texto-suave); margin-bottom: 0; }

/* ---------- Blog ---------- */

.lista-posts { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); }

.post-resumo {
	border-bottom: 1px solid rgba(255, 255, 255, .07);
	padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.post-resumo__titulo { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem); margin: 0 0 .35rem; }
.post-resumo__data { font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cor-texto-suave); margin: 0 0 .75rem; }
.post-resumo__texto { color: #BFC2CE; margin: 0; }

/* Paginacao */

.pagination,
.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	justify-content: center;
	margin-top: clamp(2.5rem, 6vw, 4rem);
}
.page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding-inline: .75rem;
	border: 1px solid var(--cor-linha);
	border-radius: var(--raio);
	color: var(--cor-texto);
	font-size: .9375rem;
}
.page-numbers:hover { border-color: var(--cor-linha-forte); color: var(--cor-ouro); }
.page-numbers.current { background: var(--cor-ouro); border-color: var(--cor-ouro); color: #08090F; }

.post-navigation .nav-links { justify-content: space-between; }
.nav-rotulo { display: block; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cor-texto-suave); }

/* ---------- Trilha de navegacao (breadcrumbs) ---------- */

.trilha { padding-top: clamp(1.25rem, 3vw, 2rem); }

.trilha__lista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: .8125rem;
	letter-spacing: .04em;
	color: var(--cor-texto-suave);
}

.trilha__item + .trilha__item::before {
	content: "/";
	margin-right: .5rem;
	color: var(--cor-ouro-fundo);
	opacity: .7;
}

.trilha__item a { color: var(--cor-texto-suave); }
.trilha__item a:hover { color: var(--cor-ouro); }
.trilha__item [aria-current="page"] { color: var(--cor-ouro-claro); }

/* ---------- Busca ---------- */

.busca { position: relative; display: flex; align-items: center; }
.busca__icone { position: absolute; left: 1rem; color: var(--cor-texto-suave); pointer-events: none; }
.busca__campo {
	width: 100%;
	padding: .875rem 1rem .875rem 2.875rem;
	background: rgba(255, 255, 255, .04);
	border: 1px solid var(--cor-linha);
	border-radius: var(--raio);
	color: var(--cor-texto);
	font: inherit;
	font-size: .9375rem;
}
.busca__campo::placeholder { color: #7B7E8C; }
.busca__campo:focus { border-color: var(--cor-linha-forte); outline: none; }
.busca--form { gap: .75rem; max-width: 520px; }
.busca--form .busca__campo { padding-left: 1rem; }

/* =========================================================
   Animacoes
   -----------------------------------------------------------
   Tres regras que este tema segue:

   1. NADA some sem JavaScript. O CSS so esconde algo depois que o
      arquivo theme.js marca <html class="js-revelar">. Se o JS falhar,
      a pagina aparece inteira — o Google e os leitores de tela sempre
      enxergam o conteudo.
   2. Nada se move dentro da primeira tela por causa de scroll: o que ja
      esta visivel no carregamento entra pela animacao do hero, sem pulo.
   3. Quem pediu "menos movimento" no sistema nao ve nada disso: o bloco
      prefers-reduced-motion la em cima zera todas as duracoes.
   ========================================================= */

.js-revelar [data-revelar] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity var(--revelo) var(--saida), transform var(--revelo) var(--saida);
}
.js-revelar [data-revelar].foi-revelado {
	opacity: 1;
	transform: none;
}

/* Cards da mesma grade entram em cascata, nao todos de uma vez. */
.js-revelar [data-revelar]:nth-child(2) { transition-delay: .08s; }
.js-revelar [data-revelar]:nth-child(3) { transition-delay: .16s; }
.js-revelar [data-revelar]:nth-child(4) { transition-delay: .24s; }
.js-revelar [data-revelar]:nth-child(5) { transition-delay: .32s; }
.js-revelar [data-revelar]:nth-child(6) { transition-delay: .40s; }

/* ---------- Hero: entrada escalonada, sem JS ---------- */

.hero__titulo,
.hero__risco,
.hero__texto,
.hero__acoes {
	animation: subir .8s var(--saida) backwards;
}
.hero__titulo { animation-delay: .06s; }
.hero__risco  { animation-delay: .18s; }
.hero__texto  { animation-delay: .26s; }
.hero__acoes  { animation-delay: .36s; }

@keyframes subir {
	from { opacity: 0; transform: translateY(26px); }
	to   { opacity: 1; transform: none; }
}

/* ---------- Cabecalho que reage ao rolar ---------- */

.topo { transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease; }
.topo__interno { transition: min-height .3s var(--saida); }

.topo.esta-rolado {
	background: rgba(5, 7, 14, .98);
	border-bottom-color: var(--cor-linha);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
/* No celular a altura fica travada: o menu aberto se apoia nela. */
@media (min-width: 861px) {
	.topo.esta-rolado .topo__interno { min-height: 68px; }
	.topo.esta-rolado .marca__simbolo { transform: scale(.9); }
}
.marca__simbolo { transition: transform .3s var(--saida); }

/* ---------- Micro-interacoes ---------- */

.botao:hover { transform: translateY(-2px); }
.botao:active { transform: translateY(0); }
.botao--desativado:hover { transform: none; }

/* ---------- Responsivo ---------- */

@media (max-width: 900px) {
	.duas-colunas { grid-template-columns: 1fr; }
	.moldura { margin-top: 1.5rem; }
	.moldura::before { inset: -12px -12px 12px 12px; }
}

@media (max-width: 860px) {
	.menu-botao { display: block; }

	.navegacao {
		position: fixed;
		inset: var(--topo-altura) 0 auto 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--cor-fundo-alt);
		border-bottom: 1px solid var(--cor-linha);
		padding: 1rem var(--respiro) 2rem;
		max-height: calc(100dvh - var(--topo-altura));
		overflow-y: auto;
		transform: translateY(-12px);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
	}
	.navegacao.esta-aberto { transform: translateY(0); opacity: 1; visibility: visible; }

	.navegacao__lista { flex-direction: column; align-items: stretch; gap: 0; }
	.navegacao__lista li { border-bottom: 1px solid rgba(255, 255, 255, .06); }
	.navegacao__lista a { display: block; padding: 1rem 0; font-size: .9375rem; }
	.navegacao__lista .sub-menu { position: static; display: flex; border: none; background: none; padding-left: 1rem; }

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

	.hero { min-height: auto; }
	.hero__titulo { max-width: 100%; }
}

@media print {
	.topo, .rodape, .wpp-flutuante, .catalogo__filtros { display: none !important; }
	body { background: #fff; color: #000; }
}