/* ==========================================================================
tema-editorial.css — MODO ENCONTRÁVEL
Camada "Editorial Nurture" aplicada POR CIMA de styles.css.
Por que camada e não reescrita: o quiz.js conversa com o HTML por um
contrato de nomes (.tela[data-tela], .opcoes[data-pergunta],
.opcao[data-valor], #btn-comecar, #progress-fill). Reescrever o CSS base
arriscaria quebrar esse contrato sem que nada acuse. Aqui só se remapeia
token e se sobrescreve componente — o diff contra a produção é revisável
linha a linha.
Ordem obrigatória no :
========================================================================== */
/* --------------------------------------------------------------------------
1. Fontes — hospedadas localmente, de propósito
--------------------------------------------------------------------------
Zodiak (Fontshare / Indian Type Foundry) e Plus Jakarta Sans (Google Fonts)
foram baixadas para assets/fontes/ em vez de linkadas por CDN.
Motivo: esta página não faz NENHUMA chamada externa antes do clique em
"Aceitar" do banner de cookies (ver tracking.js — o Pixel é injetado só
depois do consentimento). Um para fonts.googleapis.com ou
api.fontshare.com entregaria o IP de todo visitante a um terceiro ANTES
do consentimento, furando essa postura por um detalhe estético.
Custo: 104 KB, servidos do mesmo domínio, sem DNS/TLS extra. Mais rápido
que o CDN no 4G, que é onde a campanha vai cair.
-------------------------------------------------------------------------- */
@font-face {
font-family: 'Zodiak';
src: url('fontes/zodiak-400.woff2') format('woff2');
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Zodiak';
src: url('fontes/zodiak-700.woff2') format('woff2');
font-weight: 700; font-style: normal; font-display: swap;
}
/* Plus Jakarta Sans é fonte VARIÁVEL: um arquivo cobre 200-800. */
@font-face {
font-family: 'Plus Jakarta Sans';
src: url('fontes/jakarta-latin.woff2') format('woff2');
font-weight: 200 800; font-style: normal; font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Plus Jakarta Sans';
src: url('fontes/jakarta-latin-ext.woff2') format('woff2');
font-weight: 200 800; font-style: normal; font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* --------------------------------------------------------------------------
2. Tokens — remapeados, não substituídos
--------------------------------------------------------------------------
Cada variável abaixo já existe em styles.css e já é usada por dezenas de
regras. Trocar o valor aqui repinta a página inteira sem tocar em nenhuma
dessas regras.
-------------------------------------------------------------------------- */
:root {
/* --- Paleta Editorial Nurture --- */
--teal: #0F6E56;
--teal-fundo: #0B5442;
--terracota: #D85A30;
--creme: #F4EDE4;
--grafite: #2C2C2A;
/* --- Remapeamento dos tokens existentes --- */
--cor-primaria: var(--teal);
--cor-primaria-escura: var(--teal-fundo);
--cor-secundaria: #EAE0D3; /* faixa de seção — precisa diferir do fundo creme */
--cor-texto: var(--grafite);
--cor-texto-suave: rgba(44, 44, 42, 0.60); /* Graphite/60% — spec */
--cor-fundo: var(--creme);
--cor-borda: rgba(0, 0, 0, 0.07); /* black/5 suavizado p/ legibilidade sobre creme */
/* Alerta continua distinto do acento, senão a hierarquia achata:
terracota = ação, terracota-escuro = alerta. */
--cor-vermelho: #B4402A;
--cor-laranja: #E08A3C;
--cor-amarelo: #C99A3E;
/* --- Tipografia --- */
--fonte: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--fonte-titulo: 'Zodiak', Georgia, 'Times New Roman', serif;
/* --- Raios (spec: mínimo 16px, cards 24px+, dashboard 40px) --- */
--radius: 24px;
--radius-pequeno: 16px;
--radius-grande: 40px;
/* --- Sombras --- */
--sombra: 0 4px 16px rgba(0, 0, 0, 0.05);
--sombra-forte: 0 24px 60px -12px rgba(15, 110, 86, 0.28);
/* --- Curvas --- */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--container-max: 780px;
}
/* --------------------------------------------------------------------------
3. Fundo — blobs de cor
--------------------------------------------------------------------------
A spec pede dois blobs com blur de 80px a 20%. Implementados como
radial-gradient numa camada fixa, NÃO como filter: blur().
Motivo: `filter: blur(80px)` em dois elementos de ~60vmax obriga o
navegador a rasterizar e desfocar duas superfícies enormes a cada
composição — e, em `position: fixed`, vários browsers refazem isso no
scroll. Num Android de entrada, na página de vendas longa, isso trava a
rolagem. Um radial-gradient É, visualmente, um círculo borrado — mesmo
resultado, custo de GPU zero.
-------------------------------------------------------------------------- */
html { background-color: var(--creme); }
body { background: transparent; }
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(55vmax 55vmax at 0% 0%,
rgba(216, 90, 48, 0.20), rgba(216, 90, 48, 0) 62%),
radial-gradient(55vmax 55vmax at 100% 100%,
rgba(15, 110, 86, 0.20), rgba(15, 110, 86, 0) 62%);
}
/* --------------------------------------------------------------------------
4. Tipografia editorial
-------------------------------------------------------------------------- */
h1, h2, h3, h4, .h1, .h2 {
font-family: var(--fonte-titulo);
letter-spacing: -0.02em;
/* Zodiak só tem 400 e 700 carregados. Deixar 800 faria o navegador
sintetizar negrito (engorda artificial) e sujar o desenho da serifa. */
font-weight: 700;
color: var(--teal);
}
/* Em seção escura o título tem que virar claro — styles.css já faz isso,
mas com especificidade menor que a regra acima. */
.resultado-bloco--escura h1,
.resultado-bloco--escura h2,
.resultado-bloco--escura h3,
.resultado-bloco--escura h4 { color: #fff; }
/* --------------------------------------------------------------------------
5. Cabeçalho do quiz — marca à esquerda, contador à direita
-------------------------------------------------------------------------- */
.quiz-progress {
background: rgba(244, 237, 228, 0.88);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--cor-borda);
padding: var(--sp-3) var(--sp-4) var(--sp-4);
}
.quiz-progress__topo {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
max-width: var(--container-max);
margin: 0 auto var(--sp-3);
}
.quiz-marca {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em; /* tracking-widest */
color: var(--teal);
}
.quiz-marca svg { flex: 0 0 18px; width: 18px; height: 18px; display: block; }
/* #progress-label: o texto é escrito pelo quiz.js ("Pergunta N de 6").
Só o estilo muda — o id e o conteúdo continuam sendo dele. */
.quiz-progress__label {
margin: 0;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--cor-texto-suave);
max-width: none;
white-space: nowrap;
}
.quiz-progress__track {
height: 8px;
background: rgba(15, 110, 86, 0.10); /* Teal/10 — spec */
}
.quiz-progress__fill {
background: var(--teal);
/* Sem `transition: width` aqui de propósito: quem anima é o GSAP, que
reescreve o width a cada frame. Uma transição CSS competiria com ele e
produziria arrasto. A curva pedida pela spec — cubic-bezier(.65,0,.35,1),
que é o easeInOutCubic — está no quiz.js como ease "power2.inOut". */
}
/* --------------------------------------------------------------------------
6. Telas e perguntas
-------------------------------------------------------------------------- */
/* O padding vertical sai do e vai para cada tela. Enquanto ele ficava
aqui (48px em cima, 96px embaixo), a centragem das telas de pergunta saía
torta: o contêiner flex centralizava certo, mas o padding assimétrico
deslocava o resultado para baixo. */
.quiz-main { padding-top: 0; padding-bottom: 0; }
.tela[data-tela="0"] { padding: var(--sp-7) var(--sp-4) var(--sp-9); }
/* Telas de pergunta ficam mais largas: a grade de 2 colunas precisa de ar,
e as opções aqui são frases inteiras, não rótulos curtos. */
.tela:not([data-tela="0"]):not([data-tela="7"]) .tela__conteudo {
max-width: 920px;
}
.pergunta__enunciado {
font-family: var(--fonte-titulo);
font-weight: 700;
color: var(--teal);
letter-spacing: -0.02em;
/* A spec pede 4xl-5xl (36-48px). Aqui as perguntas são frases longas —
a Q2 tem 150 caracteres. A 48px ela ocupa a tela inteira do celular
antes de qualquer opção aparecer. O clamp abaixo chega em 40px no
desktop e recua no mobile, preservando a escala editorial sem empurrar
as opções para fora da dobra. */
font-size: clamp(26px, 4.6vw, 40px);
line-height: 1.15;
text-align: center;
margin-bottom: var(--sp-3);
}
.pergunta__hint {
font-size: 17px; /* lg — spec */
color: var(--cor-texto-suave); /* Graphite/60% — spec */
font-style: normal;
text-align: center;
max-width: 560px;
margin: 0 auto var(--sp-6);
}
/* --------------------------------------------------------------------------
7. Cards de opção
-------------------------------------------------------------------------- */
.opcoes { gap: var(--sp-4); }
@media (min-width: 768px) {
.opcoes { grid-template-columns: 1fr 1fr; }
}
.opcao {
padding: var(--sp-5); /* p-6 */
border: 1px solid var(--cor-borda); /* 1px black/5 — spec */
border-radius: var(--radius); /* rounded-3xl */
background: #FFFDFA;
box-shadow: var(--sombra);
align-items: center;
gap: var(--sp-4);
height: 100%;
transition: transform 0.25s var(--ease),
border-color 0.25s var(--ease),
box-shadow 0.25s var(--ease),
background-color 0.25s var(--ease);
}
/* Contêiner de ícone 48px (12x12 no Tailwind da spec).
A letra A/B/C/D fica DENTRO dele: ela é o vínculo com data-valor, é o que
o leitor de tela anuncia e é o que a pessoa usa pra se orientar. Trocar a
letra por um pictograma perderia isso sem ganhar nada. */
.opcao__letra {
flex: 0 0 48px;
width: 48px;
height: 48px;
border-radius: var(--radius-pequeno);
background: rgba(15, 110, 86, 0.10); /* Teal/10 — spec */
color: var(--teal);
font-family: var(--fonte-titulo);
font-weight: 700;
font-size: 20px;
transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
/* Por que o ícone é da MESMA cor nas quatro opções:
as perguntas 4, 5 e 6 são as que pontuam. Se a opção "boa" fosse verde e
a "ruim" terracota, a pessoa leria qual resposta o quiz quer ouvir e
responderia isso — o diagnóstico deixaria de medir o perfil dela e
passaria a medir a capacidade dela de adivinhar o gabarito. O terracota
entra na INTERAÇÃO (hover, escolhido), nunca no valor da resposta. */
/* O texto da opcao e um sem classe no markup original.
Selecionar pelo irmao evita mexer nas 24 opcoes so pra por uma classe. */
.opcao > .opcao__letra + span { flex: 1; }
@media (hover: hover) {
.opcao:hover {
transform: translateY(-4px); /* spec */
border: 2px solid var(--terracota); /* spec */
padding: calc(var(--sp-5) - 1px); /* compensa o 1px→2px, sem pulo de layout */
background: #FFFDFA;
box-shadow: 0 12px 28px -8px rgba(216, 90, 48, 0.22);
}
.opcao:hover .opcao__letra {
background: rgba(216, 90, 48, 0.10); /* Terracotta/10 */
color: var(--terracota);
}
}
.opcao:active { transform: translateY(-1px) scale(0.995); }
.opcao:focus-visible {
outline: 3px solid var(--terracota);
outline-offset: 3px;
}
.opcao[aria-checked="true"] {
border: 2px solid var(--terracota);
padding: calc(var(--sp-5) - 1px);
background: rgba(216, 90, 48, 0.05);
}
.opcao[aria-checked="true"] .opcao__letra {
background: var(--terracota);
color: #fff;
}
/* --------------------------------------------------------------------------
8. Tela 0 — abertura
-------------------------------------------------------------------------- */
/* O SVG de gradiente da v1 dava o "peso" visual do topo. Agora esse papel é
dos blobs do fundo; manter os dois deixaria a abertura pesada e ruidosa. */
.hero-gradiente { display: none; }
.eyebrow {
background: rgba(15, 110, 86, 0.08);
color: var(--teal);
border: 1px solid rgba(15, 110, 86, 0.14);
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 11px;
font-weight: 700;
}
.tela0__headline {
font-family: var(--fonte-titulo);
font-size: clamp(32px, 5.4vw, 52px);
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--teal);
}
.tela0__subtitulo { color: var(--cor-texto-suave); }
.time-badge {
background: rgba(216, 90, 48, 0.07);
border: 1px solid rgba(216, 90, 48, 0.16);
color: var(--terracota);
border-radius: 999px;
font-weight: 600;
}
.bullets li {
background: #FFFDFA;
border: 1px solid var(--cor-borda);
border-radius: var(--radius-pequeno);
padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-7);
box-shadow: var(--sombra);
}
.bullets li::before { color: var(--terracota); }
/* --------------------------------------------------------------------------
9. Botões — CTA sólido terracota (spec)
-------------------------------------------------------------------------- */
.btn {
border-radius: var(--radius); /* rounded-3xl, não pílula */
font-weight: 700;
letter-spacing: -0.01em;
transition: transform 0.25s var(--ease),
box-shadow 0.25s var(--ease),
background-color 0.25s var(--ease);
}
.btn--primario {
background: var(--terracota);
color: #fff;
box-shadow: 0 10px 26px -8px rgba(216, 90, 48, 0.45);
}
.btn--primario:hover {
background: #C24E27;
transform: translateY(-4px);
box-shadow: 0 18px 34px -10px rgba(216, 90, 48, 0.5);
}
.btn--primario:active { transform: translateY(-1px) scale(0.99); }
.btn--secundario {
border: 2px solid var(--teal);
color: var(--teal);
border-radius: var(--radius);
}
/* --------------------------------------------------------------------------
10. Tela 7 — transição de análise
-------------------------------------------------------------------------- */
.tela--transicao { padding-top: var(--sp-8); }
.analise-icone {
position: relative;
width: 88px;
height: 88px;
margin: 0 auto var(--sp-6);
display: grid;
place-items: center;
}
/* animate-ping: o pulso é uma camada ATRÁS do ícone, que cresce e some. */
.analise-icone__pulso {
position: absolute;
inset: 0;
border-radius: 50%;
background: rgba(15, 110, 86, 0.25);
animation: me-ping 1.6s var(--ease) infinite;
}
.analise-icone__glifo {
position: relative;
width: 88px;
height: 88px;
border-radius: 50%;
background: rgba(15, 110, 86, 0.10);
display: grid;
place-items: center;
color: var(--teal);
}
.analise-icone__glifo svg { width: 40px; height: 40px; display: block; }
@keyframes me-ping {
0% { transform: scale(1); opacity: 0.7; }
75%, 100% { transform: scale(1.9); opacity: 0; }
}
.tela--transicao p {
font-family: var(--fonte-titulo);
font-size: 24px;
font-weight: 700;
color: var(--teal);
}
.tela--transicao p:last-child {
font-family: var(--fonte);
font-style: italic; /* spec */
font-size: 16px;
font-weight: 400;
color: var(--cor-texto-suave); /* Graphite/60% */
max-width: 420px;
margin-left: auto;
margin-right: auto;
}
/* Quem pediu menos movimento não recebe pulso nenhum. */
@media (prefers-reduced-motion: reduce) {
.analise-icone__pulso { animation: none; opacity: 0.35; }
.opcao, .btn { transition: none; }
.opcao:hover, .btn--primario:hover { transform: none; }
}
/* --------------------------------------------------------------------------
11. Banner de cookies
-------------------------------------------------------------------------- */
.cookie-banner__inner {
background: var(--teal-fundo);
border-radius: var(--radius);
border: 1px solid rgba(255, 255, 255, 0.10);
}
.cookie-banner__acoes button { border-radius: var(--radius-pequeno); font-weight: 700; }
.cookie-banner__aceitar {
background: var(--terracota);
border-color: var(--terracota);
color: #fff;
}
.cookie-banner__rejeitar { border-color: rgba(255, 255, 255, 0.35); }
/* ==========================================================================
12. PÁGINA DE RESULTADO
========================================================================== */
/* --- 12.1 Painel de resultado — grade bento ------------------------------ */
/*
Antes: um card único com hero, três stats iguais em linha e a análise.
Os três stats tinham o mesmo peso visual do índice, que é o número que a
pessoa veio buscar. A grade de spans mistos (emprestada do Cardstack) dá
ao índice a área que o conteúdo dele merece e transforma os stats em
satélites — que é o que eles são.
*/
.resultado-bloco--painel { padding-top: var(--sp-7); }
.bento {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-4);
}
@media (min-width: 860px) {
.bento {
grid-template-columns: 1.85fr 1fr;
grid-template-rows: repeat(3, 1fr);
}
.bento__score { grid-column: 1; grid-row: 1 / 4; }
}
/* --- tile grande: o índice --- */
.bento__score {
position: relative;
border-radius: var(--radius-grande);
background: var(--teal);
background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1.2px, transparent 1.2px);
background-size: 18px 18px;
color: #fff;
text-align: center;
padding: var(--sp-7) var(--sp-5) var(--sp-6);
box-shadow: var(--sombra-forte);
display: flex;
flex-direction: column;
justify-content: center;
}
.bento__eyebrow {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.65); margin-bottom: var(--sp-3);
}
.bento__titulo {
font-family: var(--fonte-titulo); font-weight: 400;
font-size: clamp(19px, 2.6vw, 24px); letter-spacing: -0.02em;
color: rgba(255, 255, 255, 0.92); margin-bottom: var(--sp-2);
}
.bento__numerao {
font-family: var(--fonte-titulo); font-weight: 700;
font-size: clamp(72px, 13vw, 128px); line-height: 0.92;
letter-spacing: -0.045em; color: #fff;
}
.bento__sufixo {
font-size: 0.30em; font-weight: 400;
color: rgba(255, 255, 255, 0.55); letter-spacing: 0;
}
.bento__faixa {
display: inline-flex; align-items: center; gap: var(--sp-2);
margin: var(--sp-4) auto 0; padding: 8px 18px; border-radius: 999px;
font-size: 14px; font-weight: 700;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.22); color: #fff;
}
.bento__faixa[data-faixa="invisivel"] { background: rgba(255, 138, 110, 0.22); border-color: rgba(255, 138, 110, 0.45); }
.bento__faixa[data-faixa="quase_invisivel"] { background: rgba(255, 178, 96, 0.22); border-color: rgba(255, 178, 96, 0.45); }
.bento__faixa[data-faixa="parcialmente_visivel"] { background: rgba(255, 214, 120, 0.22); border-color: rgba(255, 214, 120, 0.48); }
.bento__score .score-barra {
/* `width: 100%` NAO e redundante. O .bento__score e um flex column, e a
.score-barra herda `margin: 0 auto` do styles.css. Em flexbox, margem
auto no eixo transversal CANCELA o stretch — a barra passa a usar
largura de shrink-to-fit, que aqui e ZERO, e some da tela.
Achado medindo o getBoundingClientRect, nao olhando o print. */
width: 100%;
margin: var(--sp-5) auto var(--sp-2);
background: rgba(255, 255, 255, 0.16); height: 10px; max-width: 340px;
}
.bento__escala {
font-size: 12px; color: rgba(255, 255, 255, 0.55);
text-transform: uppercase; letter-spacing: 0.10em;
}
/* --- tiles pequenos: os satélites --- */
.bento__stat {
border-radius: var(--radius);
background: #FFFDFA;
border: 1px solid var(--cor-borda);
box-shadow: var(--sombra);
padding: var(--sp-4) var(--sp-5);
display: flex; flex-direction: column; justify-content: center;
text-align: center;
}
.bento__stat-rotulo {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.10em; color: var(--cor-texto-suave); margin-bottom: var(--sp-2);
}
.bento__stat-valor {
font-family: var(--fonte-titulo); font-weight: 700;
font-size: clamp(24px, 3.2vw, 32px); line-height: 1.1;
letter-spacing: -0.02em; color: var(--teal);
}
/* O tile de destaque é o da pergunta 4 — a de maior peso no índice (34 dos
100 pontos). O realce cai sobre o dado que mais explica o número, não
sobre um tile escolhido por composição. */
.bento__stat--destaque {
background: rgba(216, 90, 48, 0.06);
border-color: rgba(216, 90, 48, 0.20);
}
.bento__stat--destaque .bento__stat-valor { color: var(--terracota); }
/* --- a análise, largura inteira sob a grade --- */
.analise {
margin-top: var(--sp-4);
border-radius: var(--radius-grande);
background: #FFFDFA;
border: 1px solid var(--cor-borda);
box-shadow: var(--sombra);
padding: var(--sp-6) var(--sp-5) var(--sp-7);
}
.analise__titulo {
font-size: 13px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.14em; font-family: var(--fonte);
color: var(--cor-texto-suave); margin-bottom: var(--sp-4); text-align: center;
}
.analise .texto-base-faixa {
font-family: var(--fonte-titulo);
font-size: clamp(19px, 2.6vw, 24px); line-height: 1.45;
color: var(--grafite); text-align: center; margin-bottom: var(--sp-5);
}
.analise .reforco-hook { text-align: center; color: var(--cor-texto-suave); font-size: 16px; }
.analise .nota-instrumento { margin-top: var(--sp-4); font-size: 13px; }
@media (min-width: 768px) {
.analise { padding: var(--sp-7) var(--sp-8) var(--sp-8); }
}
/* --- 12.1b Protocolo de 7 dias — passos numerados ------------------------ */
/*
Era uma tabela de 7 linhas x 3 colunas. Tabela é a marcação certa para
dado tabular; isto é uma SEQUÊNCIA — dia 1 vem antes do dia 2, e a ordem
carrega informação. Um diz isso à marcação e ao leitor de tela, e
no celular sete cards leem melhor que sete linhas viradas de lado.
A numeração aqui não é ornamento: ela É o conteúdo.
*/
.protocolo__legenda {
font-family: var(--fonte-titulo); font-weight: 700;
font-size: clamp(20px, 2.6vw, 25px); letter-spacing: -0.02em;
color: var(--teal); margin: var(--sp-6) 0 var(--sp-5); text-align: center;
}
.protocolo {
list-style: none; padding: 0; margin: 0 0 var(--sp-5);
display: grid; gap: var(--sp-4);
grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}
.passo {
position: relative;
border-radius: var(--radius);
background: #FFFDFA;
border: 1px solid var(--cor-borda);
box-shadow: var(--sombra);
padding: var(--sp-5);
display: flex; flex-direction: column;
}
.passo__num {
font-family: var(--fonte-titulo); font-weight: 700;
font-size: 34px; line-height: 1; letter-spacing: -0.03em;
color: var(--terracota); margin-bottom: var(--sp-3);
}
.passo__dia {
font-size: 10.5px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.16em; color: var(--cor-texto-suave); margin-bottom: var(--sp-2);
}
.passo__faz {
font-size: 16px; font-weight: 600; line-height: 1.4;
color: var(--grafite); margin-bottom: var(--sp-3);
}
.passo__porque {
font-size: 14px; line-height: 1.55; color: var(--cor-texto-suave);
padding-top: var(--sp-3);
border-top: 1px solid var(--cor-borda);
}
/* O dia 7 e o unico que nao pede acao nova: ele fecha e manda esperar a
leitura. Ocupar a linha inteira faz a marcacao dizer isso. */
.passo:last-child { grid-column: 1 / -1; }
/* --- 12.1c Banner final ------------------------------------------------- */
.banner-final {
position: relative; overflow: hidden;
border-radius: var(--radius-grande);
background: linear-gradient(135deg, var(--teal) 0%, var(--teal-fundo) 55%, #084235 100%);
background-image:
radial-gradient(rgba(255, 255, 255, 0.08) 1.2px, transparent 1.2px),
linear-gradient(135deg, var(--teal) 0%, var(--teal-fundo) 55%, #084235 100%);
background-size: 20px 20px, auto;
color: #fff;
padding: var(--sp-6) var(--sp-5) var(--sp-7);
margin-top: var(--sp-7);
box-shadow: var(--sombra-forte);
}
@media (min-width: 768px) {
.banner-final { padding: var(--sp-8) var(--sp-8); }
}
/* Blobs por gradiente, não por filter: blur() — mesma razão do item 3. */
.banner-final__blob { position: absolute; pointer-events: none; border-radius: 50%; }
.banner-final__blob--a {
width: 420px; height: 420px; top: -180px; left: -140px;
background: radial-gradient(circle, rgba(216, 90, 48, 0.38), rgba(216, 90, 48, 0) 68%);
}
.banner-final__blob--b {
width: 460px; height: 460px; bottom: -220px; right: -160px;
background: radial-gradient(circle, rgba(201, 154, 62, 0.30), rgba(201, 154, 62, 0) 68%);
}
.banner-final__conteudo { position: relative; max-width: 660px; margin: 0 auto; }
.banner-final .ps-box {
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: var(--radius);
margin: 0 0 var(--sp-6);
font-size: 15.5px; line-height: 1.68;
}
/* `p` do reset atinge o parágrafo direto e venceria a herança do banner —
mesma armadilha que deixou o rodapé ilegível. */
.banner-final .ps-box p,
.banner-final .ps-box strong { color: #fff; }
.banner-final .btn-microcopy { color: rgba(255, 255, 255, 0.72); }
.banner-final .btn-wrap { margin-top: 0 !important; }
/* --- 12.2 Tema atravessando o resto da página de vendas ------------------ */
.resultado-bloco--faixa { background: var(--cor-secundaria); }
.resultado-bloco--escura { background: var(--teal); }
.prova,
.modo-card,
.diagnostico-item,
.bonus-card,
.faq-item,
.oferta-cadencia,
.depoimento {
border-radius: var(--radius);
border: 1px solid var(--cor-borda);
}
.prova, .bonus-card, .faq-item, .depoimento { background: #FFFDFA; }
.diagnostico-item { background: var(--creme); }
.modo-card--1 { border-color: rgba(180, 64, 42, 0.30); background: rgba(180, 64, 42, 0.05); }
.modo-card--2 { border-color: rgba(15, 110, 86, 0.30); background: rgba(15, 110, 86, 0.05); }
.citacao {
border-left: 3px solid var(--terracota);
font-family: var(--fonte-titulo);
font-style: normal;
}
.revelacao-central,
.big-promise__conclusao {
font-family: var(--fonte-titulo);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--teal);
}
.stack-slide li:last-child { color: var(--terracota); font-family: var(--fonte-titulo); }
.stack-visual, .bonus-card__imagem { background: var(--cor-secundaria); border-radius: var(--radius); }
.garantia-selo { border-radius: var(--radius-grande); }
.oferta-cadencia { background: rgba(216, 90, 48, 0.05); border-color: rgba(216, 90, 48, 0.16); }
.protocolo-tabela th, .protocolo-tabela td { border-color: var(--cor-borda); }
/* --- 12.3 Card de recomendação de produto ------------------------------- */
/* Estrutura 1/3 imagem + 2/3 texto, terracota a 5% com borda a 10% (spec).
Fica pronto aqui; é aplicado quando o Bloco 6 for reestruturado. */
.produto-card {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-5);
align-items: center;
padding: var(--sp-5);
border-radius: var(--radius);
background: rgba(216, 90, 48, 0.05);
border: 1px solid rgba(216, 90, 48, 0.10);
}
@media (min-width: 768px) {
.produto-card { grid-template-columns: 1fr 2fr; padding: var(--sp-6); }
}
.produto-card__imagem { border-radius: var(--radius-pequeno); overflow: hidden; background: var(--cor-secundaria); aspect-ratio: 1 / 1; }
.produto-card__imagem img { width: 100%; height: 100%; object-fit: cover; }
.produto-card__label {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.16em; color: var(--terracota); margin-bottom: var(--sp-2);
}
.produto-card__titulo {
font-family: var(--fonte-titulo); font-weight: 700;
font-size: clamp(22px, 3.2vw, 30px); letter-spacing: -0.02em;
color: var(--teal); margin-bottom: var(--sp-3);
}
.produto-card__preco {
font-family: var(--fonte-titulo); font-weight: 700; font-size: 28px;
color: var(--grafite); margin-bottom: var(--sp-4);
}
/* ==========================================================================
13. Centragem vertical das telas de pergunta
==========================================================================
Sem isso a pergunta fica colada no topo e sobra meia tela de vazio embaixo —
visível no desktop, onde as opções ocupam duas colunas curtas.
O :not([hidden]) NÃO é decorativo. `display: flex` numa folha de estilo
VENCE o `display: none` que o navegador aplica ao atributo [hidden]. Sem
essa guarda, as sete telas do quiz apareceriam empilhadas de uma vez.
-------------------------------------------------------------------------- */
.tela[hidden] { display: none; }
.tela:not([data-tela="0"]):not([hidden]) {
display: flex;
align-items: center;
min-height: calc(100dvh - 92px); /* 92px ≈ cabeçalho fixo */
padding: var(--sp-5) var(--sp-4); /* simétrico — ver nota acima */
}
/* `margin: auto` (e não `0 auto`) evita o corte do topo quando o conteúdo
é mais alto que o contêiner flex — pergunta longa em tela pequena. */
.tela:not([data-tela="0"]):not([hidden]) .tela__conteudo {
width: 100%;
margin: auto;
}
.tela--transicao { padding-top: 0; }
/* ==========================================================================
14. Contraste em fundo escuro — três correções
========================================================================== */
/* 14.1 — REGRESSÃO INTRODUZIDA POR ESTE TEMA.
A regra do item 4 ("título em seção escura vira branco") tem a mesma
especificidade da regra que o styles.css já usava para o selo de garantia
— e, por carregar depois, vencia. Resultado: o título do selo ficava
branco sobre o card creme, ou seja, invisível.
O selo é um card CLARO dentro de uma seção ESCURA; o texto dele tem que
voltar a ser escuro. Especificidade maior resolve. */
.resultado-bloco--escura .garantia-selo,
.resultado-bloco--escura .garantia-selo h2,
.resultado-bloco--escura .garantia-selo h3,
.resultado-bloco--escura .garantia-selo p,
.resultado-bloco--escura .garantia-selo strong {
color: var(--grafite);
}
/* 14.2 — DEFEITO PRÉ-EXISTENTE (também está na produção hoje).
`.rodape` define color: rgba(255,255,255,0.8) no contêiner, mas o seletor
`p { color: var(--cor-texto) }` do reset atinge cada parágrafo diretamente
— e regra direta sempre vence herança. Os parágrafos do rodapé saíam na cor
de texto escura sobre o verde escuro: ilegíveis.
Isso não é só estética: o rodapé é onde está o disclaimer que diz que o
produto NÃO garante emprego, entrevista ou contratação. É a parte da página
que mais precisa ser legível. */
.rodape p { color: inherit; }
/* 14.3 — DEFEITO PRÉ-EXISTENTE, mesma causa.
`.btn-microcopy` ("R$47 · risco é meu, não seu") usa --cor-texto-suave, que
é escuro. Sob o CTA da seção de garantia, isso cai texto escuro sobre teal. */
.resultado-bloco--escura .btn-microcopy { color: rgba(255, 255, 255, 0.75); }