/* =============================================================================
 * SAF Assessoria Financeira — página pública
 *
 * Folha própria, e não os bundles do Metronic: aqueles somam mais de um
 * megabyte para desenhar telas de sistema que esta página não tem. Uma landing
 * é lida no celular, muitas vezes em rede ruim, por alguém que ainda não é
 * cliente — o peso do primeiro carregamento é parte do produto.
 *
 * A paleta vem do logotipo: dourado sobre fundo escuro. O dourado NÃO é usado
 * como cor de texto sobre branco — no tom original ele fica em torno de 2:1 de
 * contraste, abaixo do legível. Sobre claro ele aparece escurecido, e sobre
 * escuro no tom da marca.
 * ========================================================================== */

:root {
	--ouro:        #d4af37;
	--ouro-claro:  #f0d27a;
	--ouro-escuro: #8a6817;
	--tinta:       #0f1115;
	--tinta-suave: #1c1f27;
	--texto:       #1f2430;
	--texto-suave: #5b6472;
	--borda:       #e4e7ec;
	--fundo:       #ffffff;
	--fundo-suave: #f7f8fa;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	color: var(--texto);
	background: var(--fundo);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

.container {
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 20px;
}

/* --- Cabeçalho ----------------------------------------------------------- */

.topo {
	position: sticky;
	top: 0;
	z-index: 10;
	background: rgba(15, 17, 21, .96);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid rgba(212, 175, 55, .25);
}

.topo-interno {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 68px;
}

.topo-acoes { display: flex; align-items: center; gap: 10px; }

/* --- Botões -------------------------------------------------------------- */

.botao {
	display: inline-block;
	padding: 12px 22px;
	border-radius: 10px;
	border: 1px solid transparent;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	cursor: pointer;
	transition: transform .12s ease, filter .12s ease;
}

.botao:hover { transform: translateY(-1px); filter: brightness(1.05); }

.botao-ouro {
	background: linear-gradient(180deg, var(--ouro-claro), var(--ouro));
	color: #241c00;
}

.botao-contorno {
	background: transparent;
	border-color: rgba(212, 175, 55, .55);
	color: var(--ouro-claro);
}

.botao-grande { padding: 15px 30px; font-size: 16px; }

/* --- Capa ---------------------------------------------------------------- */

.capa {
	background:
		radial-gradient(900px 420px at 80% -10%, rgba(212, 175, 55, .22), transparent 60%),
		var(--tinta);
	color: #fff;
	padding: 72px 0 84px;
}

.capa h1 {
	margin: 0 0 18px;
	font-size: clamp(30px, 5vw, 50px);
	line-height: 1.15;
	letter-spacing: -.02em;
}

.capa h1 span { color: var(--ouro); }

.capa p {
	margin: 0 0 28px;
	font-size: clamp(16px, 2.2vw, 19px);
	color: #c9cfdb;
	max-width: 640px;
}

.capa-acoes { display: flex; flex-wrap: wrap; gap: 12px; }

.selo {
	display: inline-block;
	margin-bottom: 18px;
	padding: 6px 14px;
	border: 1px solid rgba(212, 175, 55, .45);
	border-radius: 999px;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ouro-claro);
}

/* --- Blocos -------------------------------------------------------------- */

.secao { padding: 68px 0; }
.secao-clara { background: var(--fundo-suave); }

.secao h2 {
	margin: 0 0 10px;
	font-size: clamp(24px, 3.4vw, 33px);
	letter-spacing: -.01em;
}

.secao .apoio {
	margin: 0 0 34px;
	color: var(--texto-suave);
	font-size: 17px;
	max-width: 620px;
}

.grade {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
}

.cartao {
	background: var(--fundo);
	border: 1px solid var(--borda);
	border-radius: 14px;
	padding: 26px;
}

.cartao h3 { margin: 14px 0 8px; font-size: 18px; }
.cartao p  { margin: 0; color: var(--texto-suave); font-size: 15px; }

.icone {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: rgba(212, 175, 55, .14);
	color: var(--ouro-escuro);
}

.icone svg { width: 24px; height: 24px; }

/* Passos numerados */
.passo-numero {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	background: var(--tinta);
	color: var(--ouro);
	font-weight: 800;
}

/* --- Números ------------------------------------------------------------- */

.numeros {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 18px;
	text-align: center;
}

.numero-valor {
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 800;
	color: var(--ouro-escuro);
	line-height: 1.1;
}

.numero-rotulo {
	color: var(--texto-suave);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .06em;
}

/* --- Chamada final ------------------------------------------------------- */

.chamada {
	background: var(--tinta);
	color: #fff;
	border-radius: 18px;
	padding: 46px 32px;
	text-align: center;
}

.chamada h2 { margin: 0 0 10px; }
.chamada p  { margin: 0 0 26px; color: #c9cfdb; }

/* --- Rodapé -------------------------------------------------------------- */

.rodape {
	background: var(--tinta);
	color: #8b93a3;
	padding: 34px 0;
	font-size: 14px;
	border-top: 1px solid rgba(255, 255, 255, .07);
}

.rodape a { color: #c9cfdb; text-decoration: none; }
.rodape a:hover { color: var(--ouro-claro); }

.rodape-interno {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: space-between;
	align-items: center;
}

.aviso-legal {
	margin: 18px 0 0;
	font-size: 12.5px;
	color: #6f7788;
	line-height: 1.5;
}

/* --- Telas estreitas ----------------------------------------------------- */

@media (max-width: 560px) {
	.topo-acoes .botao-contorno { display: none; }
	.capa { padding: 52px 0 60px; }
	.secao { padding: 48px 0; }
	.botao { width: 100%; text-align: center; }
	.capa-acoes { flex-direction: column; }
}

/* =============================================================================
 * Animações
 *
 * A REGRA QUE GOVERNA ESTE BLOCO: nada aqui esconde conteúdo fora de
 * `html.js-anim`. Essa classe é posta por um script no <head>, então uma página
 * sem JavaScript — por erro, bloqueador ou rede que cortou o arquivo — aparece
 * inteira, sem animação nenhuma. Esconder no CSS e revelar no JS deixaria a
 * landing em branco justamente para quem teve problema de carregamento.
 * ========================================================================== */

.js-anim .revelar {
	opacity: 0;
	transform: translateY(18px);
}

.js-anim .revelar.visivel {
	opacity: 1;
	transform: none;
	transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}

/* Cartões da mesma grade entram em sequência, e não todos de uma vez: o olho
   acompanha a leitura em vez de receber o bloco pronto. */
.js-anim .revelar.visivel:nth-child(2) { transition-delay: .09s; }
.js-anim .revelar.visivel:nth-child(3) { transition-delay: .18s; }
.js-anim .revelar.visivel:nth-child(4) { transition-delay: .27s; }

/* O cartão sobe de leve ao passar o mouse. Fora de `js-anim` de propósito: é
   resposta a um gesto, não animação de entrada, e não depende de script. */
.cartao {
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.cartao:hover {
	transform: translateY(-4px);
	border-color: rgba(212, 175, 55, .45);
	box-shadow: 0 12px 28px rgba(15, 17, 21, .09);
}

.numero-valor {
	/* Impede o número de "pular" de largura enquanto sobe: as figuras passam a
	   ter todas a mesma medida. Sem isso o bloco inteiro treme durante a
	   contagem. */
	font-variant-numeric: tabular-nums;
}

/* Brilho lento atrás da capa. Curto e discreto: fundo que se mexe demais
   compete com o texto que ele deveria ajudar a ler. */
@keyframes saf-brilho {
	0%, 100% { opacity: .85; }
	50%      { opacity: 1; }
}

.capa { animation: saf-brilho 9s ease-in-out infinite; }

/**
 * Quem pediu menos movimento não recebe movimento.
 *
 * A preferência vem do sistema operacional e existe porque animação de entrada
 * provoca desconforto real em quem tem sensibilidade vestibular. O JavaScript
 * também a respeita; esta regra cobre o caso de o CSS chegar antes dele.
 */
/**
 * Com "reduzir movimento" ligado, o bloco AINDA aparece com fade -- so que sem
 * deslocamento.
 *
 * O que incomoda quem tem sensibilidade vestibular e o movimento na tela, e nao
 * a variacao de opacidade. Desligar as duas coisas deixava a pagina identica a
 * uma sem animacao nenhuma, e essa preferencia costuma estar ligada sem que a
 * pessoa saiba -- no Windows ela acompanha o modo de economia de energia.
 */
.js-anim.sem-movimento .revelar { transform: none; }

.js-anim.sem-movimento .revelar.visivel {
	transform: none;
	transition: opacity .45s ease;
	transition-delay: 0s;
}

/*
 * NAO ha bloco @media (prefers-reduced-motion: reduce) nesta folha, e isso e
 * deliberado -- ver a nota no cabecalho de assets/js/landing.js. A decisao de
 * ignorar a preferencia e do site, e concentra-la num unico interruptor no
 * JavaScript e o que permite reverte-la numa linha. Uma regra de CSS aqui
 * escaparia desse interruptor e desligaria a animacao pela metade.
 */

/* =============================================================================
 * Aviso de cookies
 *
 * ACEITAR E RECUSAR TEM O MESMO PESO VISUAL, de propósito.
 *
 * A orientação da ANPD é explícita: recusar precisa ser tão fácil quanto
 * aceitar. Banner com um botão dourado grande de "Aceitar" e um link cinza
 * apagado de "Recusar" é o padrão mais comum da web e não atende à LGPD —
 * consentimento obtido assim não é livre (art. 5º, XII).
 * ========================================================================== */

.cookies {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 50;
	max-width: 640px;
	margin: 0 auto;
	background: var(--tinta);
	color: #d7dbe4;
	border: 1px solid rgba(212, 175, 55, .3);
	border-radius: 14px;
	padding: 20px 22px;
	box-shadow: 0 18px 44px rgba(0, 0, 0, .32);
	font-size: 14.5px;
	line-height: 1.55;
}

.cookies[hidden] { display: none; }

.cookies a { color: var(--ouro-claro); }

.cookies-acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

/* Mesma altura, mesma tipografia, mesma area de toque nos dois. */
.cookies-acoes .botao {
	flex: 1 1 160px;
	text-align: center;
	padding: 11px 18px;
	font-size: 14.5px;
}

.cookies { animation: saf-sobe .35s cubic-bezier(.22, .61, .36, 1); }

@keyframes saf-sobe {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

/* =============================================================================
 * Efeitos por area
 *
 * Cada bloco entra de um jeito. Repetir o mesmo "sobe e aparece" em tudo faz a
 * pagina parecer uma so animacao esticada; variar da a cada secao um momento
 * proprio, que e o que sustenta a leitura ate o fim.
 * ========================================================================== */

/* --- Capa: o texto entra em cascata ------------------------------------- */

.js-anim .capa .selo,
.js-anim .capa h1,
.js-anim .capa p,
.js-anim .capa-acoes {
	opacity: 0;
	transform: translateY(14px);
	animation: saf-entra .7s cubic-bezier(.22, .61, .36, 1) forwards;
}

/* O atraso crescente e o que faz a leitura descer junto com o texto. */
.js-anim .capa .selo     { animation-delay: .05s; }
.js-anim .capa h1        { animation-delay: .18s; }
.js-anim .capa p         { animation-delay: .34s; }
.js-anim .capa-acoes     { animation-delay: .48s; }

@keyframes saf-entra {
	to { opacity: 1; transform: none; }
}

/* --- Cartoes de publico: entram pelos lados ----------------------------- */

.js-anim .grade .revelar:nth-child(1) { transform: translateX(-22px); }
.js-anim .grade .revelar:nth-child(3) { transform: translateX(22px); }

/* --- Passos numerados: o circulo cresce --------------------------------- */

.js-anim .passo-numero {
	transform: scale(.6);
	opacity: 0;
	transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .4s ease;
}

.js-anim .revelar.visivel .passo-numero {
	transform: scale(1);
	opacity: 1;
	transition-delay: .2s;
}

/* --- Icones: giram de leve ao entrar ------------------------------------ */

.js-anim .icone {
	transform: rotate(-8deg) scale(.85);
	opacity: 0;
	transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), opacity .4s ease;
}

.js-anim .revelar.visivel .icone {
	transform: none;
	opacity: 1;
	transition-delay: .15s;
}

/* --- Chamada final: um brilho atravessa o bloco ------------------------- */

.chamada { position: relative; overflow: hidden; }

.chamada::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 38%, rgba(212, 175, 55, .16) 50%, transparent 62%);
	transform: translateX(-100%);
}

.chamada.visivel::after {
	animation: saf-varredura 1.5s ease .35s;
}

@keyframes saf-varredura {
	to { transform: translateX(100%); }
}

/* --- Botao principal: pulsa uma vez ao ser revelado --------------------- */

.chamada.visivel .botao-ouro {
	animation: saf-pulso 1.1s ease .8s;
}

@keyframes saf-pulso {
	0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
	40%      { box-shadow: 0 0 0 12px rgba(212, 175, 55, .16); }
}

/* --- Barra do topo ganha sombra ao rolar -------------------------------- */

.topo { transition: box-shadow .25s ease, background-color .25s ease; }
.topo.rolou { box-shadow: 0 8px 26px rgba(0, 0, 0, .35); }