@charset "UTF-8";
/* ==========================================================================
Ativa Fit Academia - estilo.css
Tokens de /specs/design.md §2. Tema escuro único (decisão de marca).
Ordem: 1 reset · 2 tokens · 3 tipografia · 4 layout · 5 header · 6 botões
7 componentes · 8 animação · 9 responsivo · 10 preferências
Regra: nada de seletor de elemento sobrescrevendo ritmo de seção -
o espaçamento vertical vem só de .secao.
========================================================================== */
/* 0 ─ FONTES (auto-hospedadas) ──────────────────────────────────────────────
Archivo e Inter do Google Fonts, mas servidas daqui em vez de fonts.gstatic.
Motivo: no teste do Lighthouse mobile a folha do Google bloqueava a renderização
por ~920 ms e a troca de fonte sozinha causava CLS de 0,285. Servindo local +
no , o CLS vai a zero e some uma conexão de terceiro.
Arquivos: variáveis, recortados para latim + acentuação portuguesa e para as
faixas de eixo que o site realmente usa (Archivo wght 600–800 / wdth 70–120).
Regerar com o passo documentado em specs/imagens.md. */
@font-face {
font-family: Archivo;
src: url("/fonts/archivo-var-latin.woff2") format("woff2");
font-weight: 600 800;
font-stretch: 70% 120%;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Inter;
src: url("/fonts/inter-var-latin.woff2") format("woff2");
font-weight: 400 700;
font-style: normal;
font-display: swap;
}
/* Fallbacks com métricas casadas. Sem isso, quando a fonte real chega depois da
primeira pintura, o texto reflui e gera CLS. Como as alturas de linha do site
são explícitas, o que causa o salto é a QUEBRA DE LINHA - então o size-adjust
é o ajuste que importa.
Os percentuais foram MEDIDOS no navegador (canvas measureText, frase real da
home, contra o Arial), não calculados no papel:
Inter 400 1175,3 / Arial 400 1104,6 = 106,4%
Archivo 800 1222,9 / Arial bold 1185,7 = 103,14%
`local()` precisa de nomes que o Chrome resolva de fato: "Helvetica" e
"Liberation Sans" não resolvem no Windows; Arial e Segoe UI resolvem. */
@font-face {
font-family: "Archivo Fallback";
src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"), local("Roboto"), local("Segoe UI");
size-adjust: 103.14%;
ascent-override: 84.84%;
descent-override: 20.29%;
line-gap-override: 0%;
}
@font-face {
font-family: "Inter Fallback";
src: local("Arial"), local("ArialMT"), local("Roboto"), local("Segoe UI"), local("Helvetica Neue");
size-adjust: 106.4%;
ascent-override: 92.85%;
descent-override: 23.12%;
line-gap-override: 0%;
}
/* 1 ─ RESET ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 80px;
}
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
/* 2 ─ TOKENS ────────────────────────────────────────────────────────────── */
:root {
/* base - dark first */
--bg-0: #0E0E11;
--bg-1: #16161A;
--bg-2: #1E1E24;
--linha: #2A2A31;
/* laranja da marca - amostrado do wordmark (logo-horizontal_ativafit.jfif = #FE6809)
conforme design.md §9 "ajustar o laranja ao tom real da marca" */
--laranja: #FD690A;
--laranja-hover: #E15703;
--laranja-claro: #FF8C42;
--laranja-suave: rgba(253, 105, 10, .12);
/* cromo / prata */
--cromo-1: #EDEDED;
--cromo-2: #9AA0A6;
/* texto - todos validados AA sobre bg-0/1/2 */
--txt-1: #F6F6F5;
--txt-2: #B6B6BE;
--txt-3: #888892;
/* utilitários */
--whatsapp: #25D366;
--ok: #34D399;
--foco: #FF8C42;
/* pilhas tipográficas - uma definição só, pra nenhuma declaração ficar pra trás */
--fonte-display: Archivo, "Archivo Fallback", "Segoe UI", system-ui, sans-serif;
--fonte-corpo: Inter, "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
/* medidas - respiro é o principal recurso de "premium" aqui.
O ritmo vertical quase dobrou em relação à primeira versão. */
--wrap: 1240px;
--wrap-texto: 40rem; /* medida de leitura confortável */
--raio: 14px;
--raio-sm: 8px;
--sombra: 0 10px 30px -12px rgba(0, 0, 0, .6);
--gutter: clamp(24px, 6vw, 72px);
--ritmo: clamp(104px, 17vw, 208px);
--ritmo-int: clamp(40px, 6vw, 72px); /* entre rótulo, título e corpo */
/* corte diagonal - motivo tirado dos cortes do wordmark */
--corte: 20px;
--dur: .5s;
--ease: cubic-bezier(.22, 1, .36, 1);
}
/* 3 ─ TIPOGRAFIA ────────────────────────────────────────────────────────── */
/* Archivo variável (wdth 62–125): largura expandida nos títulos, condensada
nos rótulos. Uma família, dois papéis - é a personalidade do texto aqui. */
body {
margin: 0;
background: var(--bg-0);
color: var(--txt-2);
font-family: var(--fonte-corpo);
font-size: 1.0625rem;
line-height: 1.72;
-webkit-font-smoothing: antialiased;
/* Sem overflow-x: hidden aqui - o overflow do body propaga pro viewport e
quebra o position:sticky do header. Estouro lateral é resolvido na origem. */
}
h1, h2, h3, .display {
font-family: var(--fonte-display);
color: var(--txt-1);
font-weight: 800;
font-stretch: 112%;
letter-spacing: -.015em;
line-height: 1.06;
text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 7.5vw, 5.5rem); line-height: .97; letter-spacing: -.03em; }
h2 { font-size: clamp(1.9rem, 4.4vw, 3.25rem); line-height: 1.02; letter-spacing: -.025em; }
h3 { font-size: 1.375rem; font-stretch: 105%; letter-spacing: -.015em; }
p { text-wrap: pretty; }
strong { color: var(--txt-1); font-weight: 600; }
/* rótulo condensado - o contraponto de largura dos títulos */
.olho {
display: flex;
align-items: flex-start; /* rótulo pode quebrar em 2 linhas no mobile - a cunha fica na 1ª */
gap: 10px;
font-family: var(--fonte-display);
font-weight: 700;
font-stretch: 76%;
font-size: .8125rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--laranja-claro);
margin-bottom: 26px;
}
/* cunha laranja - o mesmo triângulo que preenche o "A" do logo */
.olho::before {
content: "";
flex: none;
margin-top: .34em;
width: 14px;
height: 10px;
background: var(--laranja);
clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
}
.lead { font-size: clamp(1.125rem, 1.8vw, 1.375rem); line-height: 1.55; color: var(--txt-2); }
.legenda { font-size: .875rem; color: var(--txt-3); }
.num { font-variant-numeric: tabular-nums; }
/* 4 ─ LAYOUT ────────────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.secao { padding-block: var(--ritmo); position: relative; }
.secao--alt { background: var(--bg-1); }
.secao--curta { padding-block: clamp(48px, 8vw, 80px); }
/* filete de seção com a cunha da marca no início */
.secao--alt::before,
.secao--regra::before {
content: "";
position: absolute;
inset-inline: 0;
top: 0;
height: 1px;
background: var(--linha);
}
.cabeca { max-width: var(--wrap-texto); margin-bottom: var(--ritmo-int); }
.cabeca p { margin-top: 24px; }
.olho + h2, .olho + h1 { margin-top: 4px; }
.grade { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grade--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.pular {
position: absolute; left: -9999px;
background: var(--laranja); color: #111; padding: 12px 20px;
border-radius: var(--raio-sm); font-weight: 600; z-index: 200;
}
.pular:focus { left: 16px; top: 16px; }
/* 5 ─ HEADER ────────────────────────────────────────────────────────────── */
.topo {
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
background: transparent;
border-bottom: 1px solid transparent;
box-shadow: none;
transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease, opacity .25s ease;
}
.topo.rolado {
/* Mantém transição suave */
}
/* Barra sólida glassmorphic ativada quando passa pelo scroll interativo ou entra no conteúdo */
.topo.no-conteudo {
background: rgba(14, 14, 17, 0.94) !important;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6) !important;
}
.topo.aberto {
background: rgba(14, 14, 17, 0.98) !important;
backdrop-filter: blur(20px);
}
.topo__linha {
display: flex; align-items: center; gap: 16px;
min-height: 68px;
}
.topo__marca { flex: none; display: inline-flex; align-items: center; }
.topo__marca img { width: 132px; height: 30px; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav a {
text-decoration: none;
color: #ffffff; /* Letras brancas no canto direito superior */
padding: 10px 14px; border-radius: var(--raio-sm);
font-size: .9375rem; font-weight: 600;
letter-spacing: -0.01em;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
transition: color .2s ease, background-color .2s ease;
}
.nav a:hover {
color: #ffffff;
background: rgba(255, 255, 255, .15);
}
.nav a[aria-current="page"] {
color: var(--laranja);
}
.topo__cta { flex: none; }
.menu-btn { display: none; }
/* 6 ─ BOTÕES ────────────────────────────────────────────────────────────── */
.btn, .btn-wa, .btn-ghost {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: 46px; padding: 13px 22px;
border-radius: var(--raio-sm); border: 1px solid transparent;
font-family: var(--fonte-corpo);
font-size: .9375rem; font-weight: 600; line-height: 1.2;
text-decoration: none; text-align: center; cursor: pointer;
transition: background-color .2s ease, border-color .2s ease, transform .12s ease, color .2s ease;
}
.btn, .btn-wa { background: var(--laranja); color: #ffffff; }
.btn:hover, .btn-wa:hover { background: var(--laranja-hover); transform: translateY(-1px); color: #ffffff; }
.btn-ghost { background: transparent; border-color: var(--linha); color: var(--txt-1); }
.btn-ghost:hover { border-color: var(--laranja); color: var(--txt-1); }
.btn:active, .btn-wa:active, .btn-ghost:active { transform: scale(.975); }
.btn-wa svg { flex: none; width: 18px; height: 18px; fill: #ffffff; color: #ffffff; }
.btn--peq { min-height: 40px; padding: 9px 16px; font-size: .875rem; }
.btn--largo { width: 100%; }
:where(a, button, summary, input, [tabindex]):focus-visible {
outline: 2px solid var(--foco);
outline-offset: 2px;
border-radius: var(--raio-sm);
}
.acoes { display: flex; flex-wrap: wrap; gap: 12px; }
/* 7 ─ COMPONENTES ───────────────────────────────────────────────────────── */
/* 7.1 Hero ---------------------------------------------------------------- */
.hero { padding-block: clamp(56px, 10vw, 104px) var(--ritmo); position: relative; overflow: hidden; }
/* Altura em vh, não em % do hero: assim o texto pode refluir sem redimensionar
este elemento (que é grande e, se mudasse de tamanho, viraria layout shift).
O gradiente também é dimensionado em vh pra manter o mesmo desenho. */
.hero__fundo {
position: absolute; top: -8vh; left: -10%; right: -10%; height: 150vh;
background:
radial-gradient(70vh 55vh at 15% 8vh, rgba(253, 105, 10, .10), transparent 70%),
linear-gradient(180deg, #14131A 0, var(--bg-0) 78vh);
z-index: 0;
will-change: transform;
}
.hero__grade {
position: relative; z-index: 1;
display: grid; gap: clamp(36px, 6vw, 64px);
grid-template-columns: 1fr;
align-items: start;
}
/* o H1 divide a linha com o placard no desktop: escala menor que a do h1 solto */
.hero h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); margin-bottom: 22px; }
.hero__sub { max-width: 56ch; margin-bottom: 30px; }
.hero .acoes { margin-bottom: 34px; }
.hero__prova {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
padding-top: 22px; border-top: 1px solid var(--linha);
font-size: .9375rem; color: var(--txt-2);
}
.hero__prova b { color: var(--txt-1); font-weight: 600; }
/* as estrelas são SVG (nem Archivo nem Inter têm U+2605) e o reset põe svg em
display:block - por isso a faixa precisa ser flex, senão empilham */
.estrelas { display: inline-flex; align-items: center; gap: 2px; color: var(--laranja-claro); }
/* placard "código da casa" - a coisa mais característica desta academia,
por isso é o que abre a página junto do H1 */
.placard {
position: relative;
background: var(--bg-2);
border: 1px solid var(--linha);
padding: 26px 26px 24px;
clip-path: polygon(0 0, calc(100% - var(--corte)) 0, 100% var(--corte), 100% 100%, 0 100%);
}
.placard::after {
content: ""; position: absolute; top: 0; right: 0;
width: var(--corte); height: var(--corte);
background: var(--laranja);
clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.placard h2 {
font-size: .8125rem; font-stretch: 76%; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
color: var(--laranja-claro); margin-bottom: 18px;
}
.placard ul { display: grid; gap: 14px; }
.placard li {
display: grid; grid-template-columns: 16px 1fr; gap: 12px;
align-items: start;
color: var(--txt-1); font-size: 1rem; line-height: 1.45;
}
.placard li::before {
content: ""; margin-top: .55em;
width: 16px; height: 2px; background: var(--laranja);
}
.placard__nota {
margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--linha);
font-size: .8125rem; color: var(--txt-3);
}
/* 7.2 A ficha - bloco assinatura (rede grande × Ativa Fit) ---------------- */
.fichas { display: grid; gap: 20px; grid-template-columns: 1fr; }
.ficha {
position: relative;
border: 1px solid var(--linha);
border-radius: var(--raio);
padding: 24px;
background: var(--bg-2);
}
.ficha--rede {
background: linear-gradient(180deg, rgba(239, 68, 68, 0.08) 0%, #151214 100%);
border: 1px solid rgba(239, 68, 68, 0.45);
box-shadow: 0 6px 24px rgba(239, 68, 68, 0.08);
}
.ficha--rede .ficha__topo {
color: #f87171;
border-bottom-color: rgba(239, 68, 68, 0.3);
}
.ficha--nossa {
background: linear-gradient(180deg, rgba(253, 105, 10, 0.08) 0%, #16161c 100%);
border: 1px solid rgba(253, 105, 10, 0.55);
box-shadow: 0 6px 30px rgba(253, 105, 10, 0.12);
}
.ficha--nossa .ficha__topo {
color: var(--laranja);
border-bottom-color: rgba(253, 105, 10, 0.3);
}
.ficha__topo {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
color: var(--laranja-claro);
padding-bottom: 16px; margin-bottom: 18px;
border-bottom: 1px dashed var(--linha);
}
.ficha__id {
font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
font-size: clamp(1.25rem, 3.4vw, 1.75rem);
letter-spacing: .04em;
color: var(--txt-1);
margin-bottom: 6px;
}
.ficha--rede .ficha__id { color: #ef4444; font-weight: 700; }
.ficha--nossa .ficha__id { color: #ffffff; font-weight: 700; }
.ficha__papel { font-size: .8125rem; color: var(--txt-3); margin-bottom: 22px; }
.ficha dl { display: grid; gap: 14px; margin: 0; }
.ficha dt {
font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
font-size: .6875rem; letter-spacing: .09em; text-transform: uppercase;
color: var(--txt-3); margin-bottom: 3px;
}
.ficha--rede dt { color: #f87171; }
.ficha--nossa dt { color: var(--laranja-claro); }
.ficha dd { margin: 0; color: var(--txt-1); font-size: .9375rem; line-height: 1.45; }
.ficha--rede dd { color: #e2e8f0; opacity: 0.85; }
/* 7.3 Valores ------------------------------------------------------------- */
.valores__lista { display: grid; gap: 12px; margin: 28px 0 0; }
.valores__lista li {
display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start;
color: var(--txt-1);
}
.valores__lista svg { width: 22px; height: 22px; color: var(--laranja); margin-top: 1px; }
.citacao {
margin: 0;
border-left: 3px solid var(--laranja);
padding: 4px 0 4px 22px;
}
.citacao p {
font-family: var(--fonte-display);
font-weight: 600; font-stretch: 100%;
font-size: clamp(1.125rem, 2.4vw, 1.5rem);
line-height: 1.35; color: var(--txt-1);
letter-spacing: -.01em;
}
.citacao footer { margin-top: 14px; font-size: .875rem; color: var(--txt-3); }
.citacao cite { font-style: normal; color: var(--txt-2); font-weight: 600; }
/* 7.4 Pilares (acompanhamento) -------------------------------------------- */
.pilar {
background: var(--bg-2); border: 1px solid var(--linha);
border-radius: var(--raio); padding: 26px;
transition: border-color .2s ease, transform .2s ease;
}
.pilar:hover { border-color: rgba(253, 105, 10, .4); transform: translateY(-3px); }
.pilar__icone {
width: 44px; height: 44px; margin-bottom: 18px;
display: grid; place-items: center;
background: var(--laranja-suave); color: var(--laranja-claro);
border-radius: 10px;
}
.pilar__icone svg { width: 22px; height: 22px; }
.pilar h3 { margin-bottom: 10px; }
.pilar p { font-size: .9375rem; }
/* 7.5 Cards de unidade ---------------------------------------------------- */
.unidade {
display: flex; flex-direction: column;
background: var(--bg-2); border: 1px solid var(--linha);
border-radius: var(--raio); overflow: hidden;
transition: border-color .2s ease, transform .2s ease;
}
.unidade:hover { border-color: rgba(253, 105, 10, .4); transform: translateY(-3px); }
.unidade__foto { position: relative; background: var(--bg-1); }
.unidade__foto img { width: 100%; height: auto; object-fit: cover; }
.unidade__corpo { padding: 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.unidade__nome { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.unidade__nome h3 { margin: 0; }
.unidade__matriz {
font-family: var(--fonte-display); font-stretch: 76%; font-weight: 700;
font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase;
color: var(--laranja-claro); background: var(--laranja-suave);
padding: 4px 8px; border-radius: 4px; white-space: nowrap;
}
.nota {
display: inline-flex; align-items: center; gap: 7px;
font-size: .875rem; color: var(--txt-2);
}
.nota b { color: var(--txt-1); font-weight: 600; }
.nota svg { width: 15px; height: 15px; color: var(--laranja-claro); flex: none; }
.dado { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: .9375rem; }
.dado + .dado { margin-top: 10px; }
.dado svg { width: 18px; height: 18px; color: var(--txt-3); margin-top: 3px; flex: none; }
.dado span { color: var(--txt-2); }
.unidade .acoes { margin-top: auto; padding-top: 4px; }
/* 7.6 Cards de plano ------------------------------------------------------ */
.plano {
position: relative; display: flex; flex-direction: column;
background: var(--bg-2); border: 1px solid var(--linha);
border-radius: var(--raio); padding: 28px;
}
.plano--destaque { border-color: var(--laranja); }
.plano__selo {
position: absolute; top: -13px; left: 28px;
font-family: var(--fonte-display); font-stretch: 76%; font-weight: 700;
font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase;
color: #111; background: var(--laranja);
padding: 6px 12px; border-radius: 4px;
}
.plano h3 { margin-bottom: 6px; }
.plano__compromisso { font-size: .875rem; color: var(--txt-3); margin-bottom: 22px; }
.plano__preco { display: flex; align-items: flex-end; gap: 6px; margin-bottom: 24px; }
.plano__moeda { font-size: 1.125rem; color: var(--txt-2); padding-bottom: .5em; }
.plano__valor {
font-family: var(--fonte-display); font-weight: 800; font-stretch: 108%;
font-size: clamp(2.75rem, 7vw, 3.5rem); line-height: 1;
color: var(--txt-1); font-variant-numeric: tabular-nums;
letter-spacing: -.02em;
}
.plano__periodo { font-size: 1rem; color: var(--txt-3); padding-bottom: .55em; }
.plano__inclui { display: grid; gap: 13px; margin-bottom: 26px; }
.plano__inclui li {
display: grid; grid-template-columns: 20px 1fr; gap: 11px; align-items: start;
font-size: .9375rem; color: var(--txt-2);
}
.plano__inclui svg { width: 20px; height: 20px; color: var(--laranja); margin-top: 1px; flex: none; }
.plano__inclui b { color: var(--txt-1); }
.plano .btn, .plano .btn-wa, .plano .btn-ghost { margin-top: auto; }
.aviso {
margin-top: 24px; padding: 16px 18px;
border: 1px dashed var(--linha); border-radius: var(--raio-sm);
font-size: .875rem; color: var(--txt-3);
}
/* tabela comparativa (planos.html) */
.tabela-envolve { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio); }
.tabela { width: 100%; border-collapse: collapse; min-width: 520px; font-size: .9375rem; }
.tabela th, .tabela td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--linha); }
.tabela thead th {
font-family: var(--fonte-display); font-stretch: 76%; font-weight: 700;
font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
color: var(--txt-3); background: var(--bg-2);
}
.tabela tbody th { font-weight: 500; color: var(--txt-2); }
.tabela td { color: var(--txt-1); }
.tabela tr:last-child th, .tabela tr:last-child td { border-bottom: 0; }
.tabela .sim { color: var(--laranja-claro); font-weight: 600; }
.tabela .nao { color: var(--txt-3); }
/* 7.7 Provas -------------------------------------------------------------- */
.provas {
display: flex; gap: 18px;
overflow-x: auto; scroll-snap-type: x mandatory;
padding-bottom: 18px;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
.provas::-webkit-scrollbar { height: 6px; }
.provas::-webkit-scrollbar-thumb { background: var(--linha); border-radius: 3px; }
.prova {
flex: 0 0 min(340px, 82vw); scroll-snap-align: start;
background: var(--bg-2); border: 1px solid var(--linha);
border-radius: var(--raio); padding: 24px;
display: flex; flex-direction: column; gap: 14px;
}
.prova__nota { display: flex; align-items: center; gap: 8px; }
.prova__nota svg { width: 15px; height: 15px; color: var(--laranja-claro); }
.prova p { color: var(--txt-1); font-size: .9375rem; line-height: 1.55; flex: 1; }
.prova footer { font-size: .8125rem; color: var(--txt-3); }
.prova cite { font-style: normal; font-weight: 600; color: var(--txt-2); display: block; }
.provas-dica { margin-top: 6px; font-size: .8125rem; color: var(--txt-3); }
/* 7.8 FAQ ----------------------------------------------------------------- */
.faq { display: grid; gap: 0; max-width: 800px; border-top: 1px solid var(--linha); }
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary {
display: flex; align-items: center; justify-content: space-between; gap: 20px;
padding: 20px 4px; cursor: pointer; list-style: none;
font-family: var(--fonte-display); font-weight: 700; font-stretch: 100%;
font-size: 1.0625rem; color: var(--txt-1);
transition: color .2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--laranja-claro); }
.faq summary svg {
width: 20px; height: 20px; flex: none; color: var(--txt-3);
transition: transform .25s var(--ease), color .2s ease;
}
.faq details[open] summary svg { transform: rotate(180deg); color: var(--laranja); }
.faq__resposta { overflow: hidden; }
.faq__resposta p { padding: 0 4px 22px; max-width: 68ch; }
.faq__resposta p + p { padding-top: 0; margin-top: -8px; }
/* 7.9 Faixa CTA ----------------------------------------------------------- */
.cta-final {
border: 1px solid var(--linha); border-radius: var(--raio);
background:
radial-gradient(70% 120% at 100% 0%, rgba(253, 105, 10, .13), transparent 65%),
var(--bg-2);
padding: clamp(32px, 6vw, 56px);
}
.cta-final h2 { margin-bottom: 14px; }
.cta-final p { max-width: 54ch; margin-bottom: 28px; }
.escolha-unidade { display: flex; flex-wrap: wrap; gap: 12px; }
/* 7.10 Mapa --------------------------------------------------------------- */
.mapa {
border: 1px solid var(--linha); border-radius: var(--raio);
overflow: hidden; background: var(--bg-2);
}
.mapa iframe { width: 100%; height: 380px; border: 0; filter: grayscale(.3) contrast(1.05); display: block; }
/* Fachada do mapa: o embed do Google Maps baixa ~460 kB e atrasava a renderização
em 3 s no teste mobile, mesmo com loading="lazy". Aqui mostramos um cartão com o
endereço e só trocamos pelo iframe quando a pessoa pede. Mesma altura dos 380 px
do iframe, então não há salto de layout. Sem JS, o