/* Landing page do OuroPoster — index.html, contratar.html, faq.html.
CSS escrito à mão de propósito: a página é estática, sem build, para carregar rápido
no 4G do lojista e para a Ouro Printer conseguir editar o texto sem ferramenta.
Linguagem visual inspirada no template Salient (Tailwind Plus), estudado ao vivo em
28/07/2026 — não é cópia de código, é o sistema dele relido nas cores da marca:
· display em peso LEVE (500) e não pesado (900) — é o que mais muda o ar da página
· corpo 18px/1.78, bem mais folgado que os 17px/1.6 anteriores
· botão pílula (`border-radius: 999px`), cartão de 24px
· ritmo de seção 80px no celular → 128px no desktop
· rampa de neutro FRIA (slate), alternando branco → marinho → slate-50 → slate-900
· container de 1280px
O que NÃO veio do Salient: o azul dele (#155dfc). O papel de "cor que toma a seção
inteira" é do marinho da Ouro Printer — identidade da empresa mãe, não escolha de
estilo. O amarelo aqui usa os três empregos delimitados do DESIGN.md §2: sílaba
"Poster", botão de destino, e — só na landing, nunca no cromo do app — acento de
identidade em superfície neutra ou sobre marinho (selo do hero :339, dígito dos
badges :553). Ver DESIGN.md §2.
Regras do DESIGN.md que valem aqui e são fáceis de quebrar sem perceber:
· Piso de Leitura — nada de texto abaixo de 4,5:1 nem abaixo de 12px
· Caixa-Alta Curto — caixa alta só em nome de produto e título de cartaz, nunca em
rótulo de seção — caixa alta a 11,5px quebrava as duas regras de uma vez
· Cor Que Age — marinho só onde algo acontece; amarelo só nos três empregos
delimitados (DESIGN.md §2), nunca destaque genérico
· Anel Antes da Sombra — 1px de anel separa superfície; sombra só no que flutua */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url('/fonts/archivo-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
:root {
/* Marca (Ouro Printer) — não são tokens do Salient, são identidade. */
--marinho: #0f2c52;
--marinho-claro: #1c4b85;
--amarelo: #ffc72c;
--tinta-amarelo: #241a00;
/* Rampa fria, no lugar do stone quente anterior. É ela que dá o ar do Salient. */
--ink: #0f172b;
--corpo: #314158;
--suave: #62748e;
--linha: #e2e8f0;
--sup: #ffffff;
--sup-alt: #f8fafc;
--raio-cartao: 24px;
--largura: 1280px;
/* 80 → 128px: o respiro é metade do efeito. */
--secao-y: clamp(80px, 10vw, 128px);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
/* Abaixo de 760px o cabeçalho não é fixo — 24px é só para a âncora não ficar colada na
borda. A partir de 760px ele é `sticky` (~84px de altura) e precisa do respiro extra
para o título da seção não nascer escondido atrás dele. */
scroll-padding-top: 24px;
}
@media (min-width: 760px) {
html {
scroll-padding-top: 96px;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
body {
margin: 0;
font-family: 'Archivo', system-ui, sans-serif;
/* 18px/1.78 — a medida do Salient. Vale a leitura mais folgada num texto curto assim. */
font-size: 18px;
line-height: 1.78;
color: var(--corpo);
background: var(--sup);
-webkit-font-smoothing: antialiased;
}
/* Peso 500 no display, não 900. Archivo variável cobre 400–900, então o desenho é o
mesmo tipo da marca — só deixa de gritar. */
h1,
h2,
h3 {
color: var(--ink);
margin: 0 0 0.5em;
letter-spacing: -0.025em;
font-weight: 500;
text-wrap: balance;
}
h1 {
font-size: clamp(2.5rem, 6vw, 4rem);
line-height: 1.1;
}
h2 {
font-size: clamp(1.875rem, 4vw, 2.5rem);
line-height: 1.2;
}
h3 {
font-size: 1.25rem;
line-height: 1.4;
font-weight: 600;
}
p {
margin: 0 0 1rem;
text-wrap: pretty;
}
strong {
font-weight: 600;
color: var(--ink);
}
a {
color: inherit;
}
img {
max-width: 100%;
height: auto;
display: block;
}
.faixa {
width: 100%;
max-width: var(--largura);
margin-inline: auto;
padding-inline: 24px;
}
@media (min-width: 640px) {
.faixa {
padding-inline: 32px;
}
}
/* Coluna estreita para prosa longa — 65–75ch, como manda o DESIGN.md §3. */
.faixa-estreita {
max-width: 760px;
}
/* Acessibilidade: primeiro tab leva ao conteúdo. */
/* Alvo de 44px também aqui, e no estado normal e não só no `:focus`: é controle
interativo como qualquer outro, e quem depende dele costuma ser justamente quem tem
menos precisão de toque. */
.pular {
position: absolute;
left: -9999px;
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 16px;
border-radius: 999px;
}
.pular:focus {
left: 12px;
top: 12px;
z-index: 10;
background: #fff;
}
:where(a, button, summary):focus-visible {
outline: 3px solid var(--marinho);
outline-offset: 3px;
}
/* Sobre fundo escuro o anel marinho some — ali ele vira branco. */
.secao-marinho :where(a, button, summary):focus-visible,
.secao-escura :where(a, button, summary):focus-visible {
outline-color: #fff;
}
.sr {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* ---------- topo ---------- */
/* Fixa a partir de 760px — decisão de 01/08 inspirada no Cartazio, que mantém âncoras,
login e CTA sempre à mão durante a rolagem (estrutura observada ao vivo, não o texto
nem a arte deles). CSS puro, sem JS: `position: sticky` mais um traço de 1px para
separar do conteúdo por baixo, já que ele deixa de estar num fundo garantidamente
branco quando as seções coloridas passam por baixo.
No celular o menu quebra em duas linhas (`flex-wrap`) e ficaria fixo alto demais —
por isso a versão pequena continua em fluxo normal, como já era. */
.topo {
background: var(--sup);
padding-block: 20px;
border-bottom: 1px solid transparent;
}
@media (min-width: 760px) {
.topo {
position: sticky;
top: 0;
z-index: 40;
border-bottom-color: var(--linha);
}
}
.topo .faixa {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 20px;
}
.marca {
font-weight: 600;
font-size: 1.35rem;
color: var(--ink);
text-decoration: none;
letter-spacing: -0.03em;
margin-right: auto;
}
.topo .marca {
display: inline-flex;
align-items: center;
min-height: 44px;
}
/* A sílaba "Poster" em amarelo é identidade; sobre branco o amarelo puro reprova
contraste, então quem carrega a cor aqui é o marinho — o amarelo fica para o botão
de destino, sobre escuro, onde ele se lê. Mesma decisão da versão anterior. */
.marca span {
color: var(--marinho);
}
.menu {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px 8px;
list-style: none;
margin: 0;
padding: 0;
}
.menu a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 12px;
border-radius: 999px;
color: var(--corpo);
font-size: 1rem;
font-weight: 500;
text-decoration: none;
transition:
background-color 0.15s ease,
color 0.15s ease;
}
/* Hover com tinta de marca em vez de cinza neutro — pequeno toque de cor a mais
(decisão de 31/07: "landing neutra demais"), sem criar ação nova nem sair da paleta. */
.menu a:hover {
background: rgba(15, 44, 82, 0.06);
color: var(--marinho);
}
.menu a[aria-current='page'] {
color: var(--marinho);
font-weight: 600;
}
/* "Entrar" como link de texto, não pílula (1b): no topo ele não deve competir com os dois
caminhos do herói, que são a decisão da página. Mesmo alvo de 44px do menu. */
.topo-entrar {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 12px;
border-radius: 999px;
color: var(--corpo);
font-size: 1rem;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition:
background-color 0.15s ease,
color 0.15s ease;
}
.topo-entrar:hover {
background: rgba(15, 44, 82, 0.06);
color: var(--marinho);
}
/* ---------- botões: pílula, a peça mais reconhecível do Salient ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
padding: 0 24px;
border-radius: 999px;
font-weight: 600;
font-size: 1rem;
line-height: 1.2;
text-align: center;
text-decoration: none;
transition:
transform 0.15s ease,
background-color 0.15s ease,
box-shadow 0.15s ease;
}
.btn:active {
transform: scale(0.98);
}
/* Primário sobre claro = marinho sólido (o papel que o blue-600 tem no Salient). */
.btn-primario {
background: var(--marinho);
color: #fff;
}
.btn-primario:hover {
background: var(--marinho-claro);
}
/* Destino sobre escuro: o marinho sumiria no marinho. É o amarelo da marca, e ele
aparece UMA vez por página — aqui, no CTA da locação, que é o gancho comercial. */
.btn-destaque {
background: var(--amarelo);
color: var(--tinta-amarelo);
font-weight: 700;
}
.btn-destaque:hover {
background: #ffd45c;
}
/* Secundário claro: cinza suave, sem borda — o Salient troca contorno por superfície. */
.btn-suave {
background: var(--sup-alt);
color: var(--ink);
box-shadow: inset 0 0 0 1px var(--linha);
}
/* Mesmo toque de marinho do hover do menu, em vez do cinza plano anterior. */
.btn-suave:hover {
background: rgba(15, 44, 82, 0.08);
}
.btn-claro {
background: rgba(255, 255, 255, 0.14);
color: #fff;
}
.btn-claro:hover {
background: rgba(255, 255, 255, 0.24);
}
.btn-vazado-claro {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
color: #fff;
}
.btn-vazado-claro:hover {
background: rgba(255, 255, 255, 0.12);
}
.btn-largo {
width: 100%;
}
/* ---------- herói ---------- */
.heroi {
background: var(--sup);
padding-block: clamp(40px, 6vw, 88px) var(--secao-y);
text-align: center;
}
.heroi h1 {
max-width: 20ch;
margin-inline: auto;
}
/* ---------- herói bifurcado (index.html) ----------
Uma coluna no celular, duas a partir de 960px: promessa e bifurcação à esquerda, prova à
direita. Antes de 960 a coluna de texto sozinha já ocupa a largura toda, e espremer a
prova ao lado dela deixaria as duas ilegíveis.
`text-align: left` desfaz o centralizado de `.heroi`, que continua valendo para o herói
das outras páginas. */
.heroi-bifurcado {
text-align: left;
}
.heroi-grade {
display: grid;
gap: 32px;
align-items: center;
}
.heroi-bifurcado h1,
.heroi-bifurcado .chamada {
margin-inline: 0;
}
.heroi-bifurcado .chamada {
margin-bottom: 1.75rem;
max-width: 46ch;
}
@media (min-width: 960px) {
.heroi-grade {
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: 44px;
}
}
/* Os dois caminhos. Cartão e não pílula: cada um precisa de duas linhas — a situação do
lojista em cima ("Já tenho impressora") e o que acontece se ele clicar embaixo. Com dois
botões de pílula lado a lado só cabia o verbo, e o verbo é igual nos dois casos.
O combo vem primeiro e em marinho sólido por ser o caminho principal (CLAUDE.md). */
.escolhas {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 520px;
}
.escolha {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
/* Alvo de toque com folga: é o controle mais importante da página. */
min-height: 72px;
padding: 14px 20px;
border-radius: 16px;
background: var(--sup-alt);
box-shadow: inset 0 0 0 1px var(--linha);
color: var(--ink);
text-decoration: none;
transition:
transform 0.15s ease,
box-shadow 0.15s ease,
background-color 0.15s ease;
}
.escolha:hover {
background: #fff;
box-shadow:
inset 0 0 0 1px rgba(15, 44, 82, 0.28),
0 8px 16px -8px rgba(15, 23, 43, 0.25);
}
.escolha:active {
transform: scale(0.99);
}
.escolha-combo {
background: var(--marinho);
box-shadow: none;
color: #fff;
}
.escolha-combo:hover {
background: var(--marinho-claro);
color: #fff;
box-shadow: 0 10px 20px -10px rgba(15, 44, 82, 0.6);
}
.escolha-texto {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.escolha-texto strong {
font-size: 1.05rem;
font-weight: 700;
}
.escolha-texto span {
font-size: 0.9rem;
line-height: 1.45;
color: var(--suave);
}
.escolha-combo .escolha-texto span {
color: rgba(255, 255, 255, 0.78);
}
.escolha-seta {
flex-shrink: 0;
font-size: 1.25rem;
line-height: 1;
color: var(--marinho);
}
.escolha-combo .escolha-seta {
color: var(--amarelo);
}
/* Garantias: lista de verdade (o leitor de tela anuncia a contagem) com o ✓ desenhado por
CSS, do mesmo jeito que `.duplo-lista` já faz mais abaixo. */
.garantias {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 6px 20px;
margin: 18px 0 0;
padding: 0;
font-size: 0.9rem;
font-weight: 600;
color: var(--suave);
}
.garantias li::before {
content: '✓';
margin-right: 6px;
color: var(--marinho);
font-weight: 700;
}
/* Três números na linha de corte do herói, separados do resto por um filete. Tabulares
porque são medida, não texto (Regra do Dígito Fixo, DESIGN.md). */
.heroi-numeros {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 12px 32px;
margin: 22px 0 0;
padding: 20px 0 0;
border-top: 1px solid var(--linha);
}
.heroi-numeros b {
display: block;
font-size: 1.4rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--ink);
line-height: 1.2;
}
.heroi-numeros span {
font-size: 0.8rem;
color: var(--suave);
}
/* Coluna da prova: painel escuro com a tela do sistema dentro. Escuro porque o que está na
moldura é uma tela, e tela acesa lê como tela sobre fundo escuro. */
.heroi-demo {
/* Mesmo tom de `.secao-escura`, o fecho escuro da página. */
background: var(--ink);
border-radius: var(--raio-cartao);
padding: clamp(24px, 3vw, 44px);
display: flex;
align-items: center;
justify-content: center;
}
/* Moldura de navegador: dá contexto de "isto é o sistema rodando" sem nenhuma legenda. */
.tela {
width: min(300px, 100%);
border-radius: 20px;
overflow: hidden;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.12),
0 24px 48px -12px rgba(0, 0, 0, 0.55);
}
.tela-topo {
display: flex;
align-items: center;
gap: 6px;
height: 34px;
padding: 0 12px;
background: #142942;
}
.tela-topo span {
width: 8px;
height: 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.25);
}
/* Espaço reservado do vídeo. Listrado de propósito: tem que ser óbvio, para quem revisa a
página, que aqui falta conteúdo — um retângulo liso passaria por decoração. */
.tela-vazia {
display: flex;
align-items: center;
justify-content: center;
min-height: 420px;
padding: 24px;
text-align: center;
background: repeating-linear-gradient(
45deg,
#142942,
#142942 10px,
#1c3452 10px,
#1c3452 20px
);
}
.tela-vazia span {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.82);
background: rgba(0, 0, 0, 0.4);
padding: 10px 14px;
border-radius: 8px;
}
/* ---------- faixa de garantia (logo abaixo da dobra) ---------- */
.faixa-garantia {
background: #f1f5f9;
padding: 16px 24px;
text-align: center;
}
.faixa-garantia p {
margin: 0 auto;
max-width: 72ch;
font-size: 0.95rem;
line-height: 1.6;
color: var(--corpo);
}
.faixa-garantia strong {
color: var(--ink);
}
/* Herói de página-documento (privacidade.html, e qualquer página de texto que entrar
depois — termos de uso, por exemplo): só título e uma linha de apoio, sem selo, CTA
nem foto. O `--secao-y` de baixo (80–128px) foi calibrado para separar o herói da
PRÓXIMA seção de venda; aqui embaixo vem prosa corrida direto, e a dobra ficava com
um vão maior que o conteúdo justificava. */
.heroi-documento {
padding-bottom: clamp(24px, 4vw, 48px);
}
.chamada {
font-size: clamp(1.125rem, 2.2vw, 1.35rem);
line-height: 1.6;
color: var(--corpo);
max-width: 54ch;
margin: 0 auto 2.5rem;
}
/* Selo em amarelo claro: é o primeiro toque de marca que o olho encontra na página,
antes mesmo do H1. Texto continua marinho — nunca branco sobre amarelo (DESIGN.md §2).
0.16 de opacidade (versão anterior) media como branco a qualquer distância da tela;
subiu para 0.26 para o selo realmente se ler como amarelo, não como sombra. */
.selo {
display: inline-block;
background: rgba(255, 199, 44, 0.26);
color: var(--marinho);
box-shadow: inset 0 0 0 1px rgba(255, 199, 44, 0.7);
border-radius: 999px;
padding: 8px 18px;
font-size: 0.95rem;
font-weight: 600;
margin-bottom: 24px;
}
.acoes {
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
}
.nota {
margin: 20px 0 0;
font-size: 1rem;
color: var(--suave);
}
/* Link de ação terciário: parece texto, mas é alvo de toque — 44px de altura mesmo assim,
como manda o DESIGN.md §5. Medido a 375px: sem esta regra ele saía com 17px, um terço
do mínimo, e é justamente o link que leva o lojista para a próxima página. */
.nota a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--marinho);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 4px;
}
.secao-escura .nota,
.secao-marinho .nota {
color: rgba(255, 255, 255, 0.78);
}
.secao-escura .nota a,
.secao-marinho .nota a {
color: #fff;
}
/* ---------- faixa de foto (respiro visual) ----------
Fotografia real de loja e feira brasileira, licença Pexels — origem de cada uma em
imagens/ORIGEM.md. `object-fit: cover` deixa o corte responsivo: a altura muda por
breakpoint e a imagem preenche o cartão sem distorcer. É ![]()
estático com
`loading="lazy"` — some sem JS, sem GSAP e com movimento reduzido; a única coisa que o
`data-anima` acrescenta é a entrada suave por rolagem, igual ao resto da página. */
.secao-foto {
padding-block: 32px;
}
.secao-foto img {
width: 100%;
height: clamp(200px, 32vw, 420px);
object-fit: cover;
border-radius: var(--raio-cartao);
display: block;
}
/* ---------- seções ---------- */
.secao {
padding-block: var(--secao-y);
}
.secao h2 {
text-align: center;
max-width: 26ch;
margin-inline: auto;
margin-bottom: 1rem;
}
/* Linha de apoio sob o h2 — o Salient sempre explica a seção antes de listar. */
.secao-sub {
text-align: center;
max-width: 56ch;
margin: 0 auto 4rem;
font-size: 1.125rem;
color: var(--corpo);
}
.secao-alt {
background: var(--sup-alt);
}
/* A seção que toma a cor inteira — o papel do blue-600 no Salient. */
.secao-marinho {
background: var(--marinho);
}
.secao-marinho h2,
.secao-marinho h3 {
color: #fff;
}
.secao-marinho .secao-sub,
.secao-marinho p {
color: rgba(255, 255, 255, 0.78);
}
/* Fecho escuro, como o bloco de preços do Salient. */
.secao-escura {
background: var(--ink);
}
.secao-escura h2,
.secao-escura h3 {
color: #fff;
}
.secao-escura p,
.secao-escura .secao-sub {
color: rgba(255, 255, 255, 0.78);
}
.secao-titulo-esq h2,
.secao-titulo-esq .secao-sub {
text-align: left;
margin-inline: 0;
}
/* ---------- a dor ----------
Peça única dividida em três, não três cartões soltos (1b): as três saídas que o lojista
já tentou pertencem à mesma frase, e separá-las em caixas fazia cada uma parecer um
assunto próprio. `gap: 0` + filete entre as células é o que costura as três.
No celular a divisória vira horizontal — o `:not(:last-child)` evita a linha órfã no pé
da peça nas duas orientações. */
.dor {
list-style: none;
margin: 0 auto;
padding: 0;
max-width: 1100px;
display: grid;
gap: 0;
border-radius: var(--raio-cartao);
overflow: hidden;
background: var(--sup);
box-shadow: inset 0 0 0 1px var(--linha);
}
.dor li {
padding: 28px 26px;
}
.dor li:not(:last-child) {
border-bottom: 1px solid var(--linha);
}
@media (min-width: 760px) {
.dor {
grid-template-columns: repeat(3, 1fr);
}
.dor li:not(:last-child) {
border-bottom: 0;
border-right: 1px solid var(--linha);
}
}
/* Badge marinho+amarelo do numeral de grupo da FAQ e do passo a passo de contratar. */
.selo-numero {
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 999px;
background: var(--marinho);
color: var(--amarelo);
font-weight: 700;
font-size: 1.05rem;
font-variant-numeric: tabular-nums;
margin: 0 0 14px;
}
.dor h3 {
margin-bottom: 0.4rem;
}
.dor p {
margin: 0;
font-size: 1rem;
line-height: 1.7;
}
/* ---------- para quem ---------- */
/* Grade de células iguais, não fila de pílulas (1b): o lojista está procurando o próprio
ramo, e com 14 pílulas de larguras diferentes a busca era uma varredura de linha inteira.
Em colunas fixas o olho desce reto. Duas colunas no celular, quatro a partir de 760px. */
.para-quem {
list-style: none;
margin: 0 auto;
padding: 0;
max-width: 920px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
@media (min-width: 760px) {
.para-quem {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.para-quem li {
display: flex;
align-items: center;
justify-content: center;
/* Alvo de 44px mesmo não sendo clicável: a célula precisa da mesma altura de toque das
vizinhas para a grade não ficar serrilhada quando um ramo quebra em duas linhas. */
min-height: 56px;
padding: 12px 14px;
text-align: center;
background: var(--sup);
box-shadow: inset 0 0 0 1px var(--linha);
border-radius: 14px;
font-size: 0.95rem;
font-weight: 500;
color: var(--ink);
}
/* Um em cada três vem preenchido — o token `chip-selected` do app (DESIGN.md §5),
emprestado para quebrar a parede branca de 14 células iguais. */
.para-quem li.marcado {
background: var(--marinho);
box-shadow: none;
color: #fff;
font-weight: 600;
}
/* ---------- CTA duplo ---------- */
.duplo {
display: grid;
gap: 20px;
margin-top: 3rem;
}
@media (min-width: 860px) {
.duplo {
grid-template-columns: repeat(2, 1fr);
}
}
.duplo-cartao {
background: rgba(255, 255, 255, 0.07);
border-radius: var(--raio-cartao);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
padding: 32px 28px;
display: flex;
flex-direction: column;
text-align: left;
}
/* O cartão da locação é o gancho comercial: ganha superfície mais clara e o único
botão amarelo da página. */
.duplo-cartao.principal {
background: rgba(255, 199, 44, 0.1);
box-shadow: inset 0 0 0 1px rgba(255, 199, 44, 0.4);
}
.duplo-cartao .etiqueta {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--amarelo);
margin: 0 0 10px;
}
.duplo-cartao.secundario .etiqueta {
color: rgba(255, 255, 255, 0.78);
}
.duplo-cartao h3 {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.duplo-cartao p {
font-size: 1rem;
line-height: 1.7;
}
.duplo-cartao .btn {
margin-top: auto;
}
.duplo-lista {
list-style: none;
margin: 0 0 24px;
padding: 0;
font-size: 1rem;
line-height: 1.7;
color: rgba(255, 255, 255, 0.78);
}
.duplo-lista li {
padding-left: 26px;
position: relative;
}
.duplo-lista li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--amarelo);
font-weight: 700;
}
/* A mesma lista servindo de canal de contato: sem o ✓ (marcar telefone como "incluído"
não quer dizer nada) e com 44px por linha, porque aqui cada item é um alvo de toque. */
.duplo-lista.contatos li {
padding-left: 0;
}
.duplo-lista.contatos li::before {
content: none;
}
.duplo-lista.contatos a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: #fff;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 4px;
}
/* ---------- página-documento (privacidade.html) ----------
Texto corrido longo (9 seções numeradas) sem o vocabulário de venda das outras três
páginas: nada de `.dor`/`.planos`/`.confere` aqui, é prosa jurídica revisável. As duas
regras abaixo dão a ela o mínimo de estrutura visual que uma página só-de-texto precisa
sem inventar componente novo. */
.aviso {
background: var(--sup-alt);
color: var(--corpo);
border-radius: 16px;
box-shadow: inset 0 0 0 1px var(--linha);
padding: 20px 22px;
font-size: 1rem;
line-height: 1.7;
margin: 0 0 48px;
}
/* Nove `` na mesma seção, um atrás do outro: a margem padrão de heading (0.5em) não
separa "capítulo" de "capítulo" — parecia um parágrafo comprido com frases em negrito.
`:not(:first-of-type)` porque o primeiro já vem depois do `.aviso`, que tem margem
própria; dobrar o respiro ali ficaria maior que o resto da página pede. */
.documento h2:not(:first-of-type) {
margin-top: 2.75rem;
}
/* ---------- listas de conferência (página de contratar) ---------- */
.confere {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 12px;
}
@media (min-width: 760px) {
.confere {
grid-template-columns: repeat(2, 1fr);
}
}
.confere li {
position: relative;
padding: 14px 18px 14px 48px;
background: var(--sup);
border-radius: 16px;
box-shadow: inset 0 0 0 1px var(--linha);
font-size: 1rem;
line-height: 1.6;
}
.confere li::before {
content: '✓';
position: absolute;
left: 20px;
top: 14px;
color: var(--marinho);
font-weight: 700;
}
/* ---------- planos (assinatura avulsa, contratar.html#incluido) ----------
A seção em volta é `.secao-marinho`; estes cartões são brancos por cima dela — mesma
lógica visual de `.confere`. `.planos-nome`/`.planos-preco` precisam de duas classes na
seletora porque `.secao-marinho p` (uma classe + elemento) senão venceria por
especificidade e pintaria o texto de branco em cima do cartão branco. */
.planos-avulsos {
margin-top: 48px;
}
.planos {
list-style: none;
margin: 24px 0 0;
padding: 0;
display: grid;
gap: 16px;
}
@media (min-width: 700px) {
.planos {
grid-template-columns: repeat(3, 1fr);
}
}
.planos li {
background: var(--sup);
border-radius: 16px;
box-shadow: inset 0 0 0 1px var(--linha);
padding: 20px 18px;
}
.planos .planos-nome {
margin: 0 0 4px;
font-weight: 700;
font-size: 1.05rem;
color: var(--ink);
}
.planos .planos-preco {
margin: 0 0 14px;
font-weight: 700;
font-size: 1.4rem;
font-variant-numeric: tabular-nums;
color: var(--marinho);
}
.planos-limites {
list-style: none;
margin: 0;
padding: 0;
font-size: 0.95rem;
line-height: 1.6;
color: var(--corpo);
}
.planos-nota {
margin: 16px 0 0;
font-size: 12px;
line-height: 1.5;
}
#planos .planos-nota {
text-align: center;
font-size: 0.95rem;
}
/* ---------- vitrine de planos (index.html#planos) ----------
Os mesmos cartões de contratar.html, mas em linha e com o do meio adiantado (1b). O
destaque é do Intermediário porque é o plano que serve à loja média — não porque seja o
mais caro; se um dia o "mais escolhido" mudar, muda a classe, não o layout.
Os cartões viram `flex` em coluna para o botão colar no pé de todos os três, mesmo com
listas de limites de alturas diferentes. */
.planos-vitrine {
align-items: stretch;
}
.planos-vitrine li {
display: flex;
flex-direction: column;
gap: 0;
}
.planos-vitrine .planos-limites {
flex: 1;
margin-bottom: 20px;
}
/* O cartão do meio se adianta por MARGEM NEGATIVA, não por `transform: scale()`. O 1b
desenha um `scale(1.03)`, mas `.destacado` também é um `[data-anima]`: o GSAP escreve
`transform` (e `translate`/`rotate`/`scale`) em estilo inline ao animar a entrada, e o
inline vence a folha — o cartão nascia em escala 1 e ninguém via o destaque. Margem
negativa produz o mesmo "maior que os vizinhos" numa propriedade que a animação não
toca. Só a partir de 900px: empilhado, um cartão maior vira desalinho, não hierarquia.
`z-index` para a sombra do destacado cair por cima dos vizinhos, e não por baixo. */
.planos-vitrine .destacado {
position: relative;
}
@media (min-width: 900px) {
.planos-vitrine {
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: center;
}
.planos-vitrine .destacado {
z-index: 1;
margin-block: -14px;
padding: 34px 24px;
box-shadow:
inset 0 0 0 1px var(--linha),
0 18px 32px -12px rgba(0, 0, 0, 0.5);
}
}
/* Selo pendurado na borda de cima. `white-space: nowrap` porque ele sai do fluxo e não tem
largura de referência para quebrar bem. */
.planos-selo {
position: absolute;
top: -12px;
right: 18px;
padding: 4px 12px;
border-radius: 999px;
background: var(--amarelo);
color: var(--tinta-amarelo);
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
/* ---------- fecho da página ---------- */
.cta-fim {
background: var(--marinho);
padding-block: clamp(48px, 6vw, 72px);
text-align: center;
}
.cta-fim h2 {
color: #fff;
margin-bottom: 1.5rem;
}
/* Faixa do combo, sob os planos: o outro caminho inteiro, não um plano mais caro. Empilha
no celular e vira linha a partir de 760px. */
.faixa-combo {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
margin-top: 24px;
padding: 22px 24px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.06);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.faixa-combo p {
margin: 0;
max-width: 68ch;
}
.faixa-combo strong {
color: #fff;
}
@media (min-width: 760px) {
.faixa-combo {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 28px;
}
.faixa-combo .btn {
flex-shrink: 0;
}
}
/* ---------- WhatsApp fixo (index.html) ----------
Canto inferior direito, acima do conteúdo mas abaixo do `