/* =========================================================
valoriz — folha de estilo única do site
Tema claro/escuro via [data-theme] no .
Consumida por todas as páginas (home, blog, legais, ajuda).
========================================================= */
/* ---------- TEMA CLARO (default) ---------- */
:root {
--brand700: #023E8A; --brand500: #0077B6; --brand300: #0096C7;
--renda500: #059669; --amber500: #F59E0B; --ai: #00B4D8;
/* Ícones: a cor do traço e o fundo tonal da caixa.
Trocam por tema de propósito — o #F59E0B e o #00B4D8 da marca ficam
abaixo de 3:1 sobre branco (WCAG 1.4.11, contraste de objeto gráfico),
então no claro entram tons mais fechados e no escuro os originais. */
--ico-brand: #0077B6; --ico-brand-bg: rgba(0,119,182,.10);
--ico-renda: #059669; --ico-renda-bg: rgba(5,150,105,.12);
--ico-amber: #B45309; --ico-amber-bg: rgba(245,158,11,.14);
--ico-ai: #0284A8; --ico-ai-bg: rgba(0,180,216,.12);
--bg: #F4F7FB; --bg-nav: rgba(244,247,251,.82);
--text: #0F1B2E; --muted: #54637A; --dim: #8593A6;
--card-bg: #FFFFFF; --card-border: #E4EAF2; --card-shadow: 0 2px 14px rgba(18,38,72,.05);
--card-hover-bg: #FFFFFF; --card-hover-border: rgba(0,119,182,.35); --card-hover-shadow: 0 14px 34px rgba(0,119,182,.12);
--divider: rgba(15,27,46,.09);
--badge-bg: rgba(0,150,199,.08); --badge-border: rgba(0,119,182,.22); --badge-text: #0077B6;
--badge-ai-text: #0284A8;
--phone-border: rgba(15,27,46,.08);
--phone-shadow: 0 30px 70px rgba(18,38,72,.18), 0 0 40px rgba(0,119,182,.10);
--vignette: 244,247,251;
--sb-track: #F4F7FB; --sb-thumb: #CDD8E6;
--btn2-border: #D4DEEA;
--glow-blue: rgba(0,119,182,.12); --glow-green: rgba(5,150,105,.08);
--cta-bg: linear-gradient(135deg, rgba(0,119,182,.09) 0%, rgba(5,150,105,.06) 100%);
--cta-border: rgba(0,119,182,.18);
--code-bg: rgba(0,119,182,.06);
/* Vermelho de erro/alerta. Troca por tema porque o #E63946 da marca dá
4.15:1 sobre branco — abaixo dos 4.5:1 que texto pequeno exige. */
--erro: #C62534;
/* Campo de formulário: precisa se destacar do card sem virar buraco escuro */
--input-bg: #F7F9FC; --input-border: #D9E2EE;
}
/* ---------- TEMA ESCURO (aliviado — sem o "vazio" do preto puro) ---------- */
:root[data-theme="dark"] {
--ico-brand: #0096C7; --ico-brand-bg: rgba(0,119,182,.16);
--ico-renda: #10B981; --ico-renda-bg: rgba(5,150,105,.15);
--ico-amber: #F59E0B; --ico-amber-bg: rgba(245,158,11,.15);
--ico-ai: #00B4D8; --ico-ai-bg: rgba(0,180,216,.15);
--bg: #0F141C; --bg-nav: rgba(15,20,28,.82);
--text: #FFFFFF; --muted: #9BA8BD; --dim: #7A899E;
--card-bg: rgba(255,255,255,.055); --card-border: rgba(255,255,255,.10); --card-shadow: 0 10px 30px rgba(0,0,0,.28);
--card-hover-bg: rgba(0,119,182,.08); --card-hover-border: rgba(0,119,182,.45); --card-hover-shadow: 0 14px 40px rgba(0,0,0,.4);
--divider: rgba(255,255,255,.09);
--badge-bg: rgba(0,150,199,.07); --badge-border: rgba(0,150,199,.28); --badge-text: #0096C7;
--badge-ai-text: #00B4D8;
--phone-border: rgba(255,255,255,.12);
--phone-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 40px 90px rgba(0,0,0,.6), 0 0 60px rgba(0,119,182,.22);
--vignette: 15,20,28;
--sb-track: #0F141C; --sb-thumb: #2A3648;
--btn2-border: #1E2D3F;
--glow-blue: rgba(0,119,182,.16); --glow-green: rgba(5,150,105,.10);
--cta-bg: linear-gradient(135deg, rgba(2,62,138,.20) 0%, rgba(0,119,182,.08) 100%);
--cta-border: rgba(0,119,182,.22);
--code-bg: rgba(255,255,255,.05);
/* Mais claro que o #E63946 da marca: o card do tema escuro não é preto puro
(fica em rgb(28,33,40)) e o vermelho cheio só alcança 3,9:1 sobre ele. */
--erro: #F87171;
--input-bg: rgba(255,255,255,.07); --input-border: rgba(255,255,255,.14);
}
/* Avisa o navegador qual é o tema em vigor. Sem isso os controles nativos
(calendário do ) continuam claros no
tema escuro — o ícone do calendário some contra o fundo do campo. */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: var(--bg); color: var(--text);
overflow-x: hidden;
transition: background-color .3s ease, color .3s ease;
}
/* ---------- Texto ---------- */
.t-muted { color: var(--muted); }
.t-dim { color: var(--dim); }
.gradient-text {
background: linear-gradient(135deg, #0096C7 0%, #0077B6 55%, #059669 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
/* ---------- Botões ---------- */
.btn-primary {
background: linear-gradient(135deg, #023E8A 0%, #0077B6 60%, #0096C7 100%);
transition: transform .25s ease, box-shadow .25s ease;
box-shadow: 0 6px 22px rgba(0,119,182,.30);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(0,119,182,.45); }
.btn-ghost {
border: 1px solid var(--btn2-border); color: var(--muted);
transition: border-color .3s ease, color .3s ease;
}
.btn-ghost:hover { border-color: var(--brand500); color: var(--text); }
/* Selo oficial da Google Play (badge-google-play.svg).
⚠️ É marca do Google: não recolorir, não redesenhar, não trocar o texto e não
distorcer a proporção (118:36). O único efeito é o de toque — por isso o destoa e muda de desenho por sistema.
Cinza neutro de propósito — é um data URI, então não segue currentColor. */
.calc-campo select {
appearance: none; -webkit-appearance: none; padding-right: 2.5rem;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238593A6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right .85rem center; background-size: 17px;
}
.calc-campo input[type="date"] { min-height: 46px; }
/* Dropdown nativo do no tema escuro. `color-scheme: dark` (no :root)
cobre Mac, iOS, Android e Firefox; mas no Windows, com `appearance: none`,
Chrome/Brave/Edge às vezes abrem o popup em BRANCO. Cor sólida nas
força o escuro também lá — o popup nativo ignora alpha, então nada de rgba. */
:root[data-theme="dark"] .calc-campo select option {
background-color: #161c27;
color: #FFFFFF;
}
.calc-dica-campo { margin-top: 1rem; font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.calc-erro {
margin-top: 1.2rem; font-size: 14px; font-weight: 600; color: var(--erro);
}
/* Resultado — painel da marca, não continuação do formulário */
.calc-saida {
margin-top: 1.5rem; border-radius: 20px; padding: 1.5rem;
background: var(--cta-bg); border: 1px solid var(--cta-border);
}
@media (min-width: 640px) { .calc-saida { padding: 1.8rem 1.9rem; } }
.calc-rotulo {
font-size: 11px; font-weight: 800; letter-spacing: .1em;
text-transform: uppercase; color: var(--muted); margin-bottom: .5rem;
}
.calc-data { font-size: 2.5rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
@media (min-width: 560px) { .calc-data { font-size: 3.1rem; } }
/* Sem text-transform: capitalize — ele deixava "Fatura De Agosto De 2026".
A 1ª letra já vem certa do JS. */
.calc-fatura { font-size: 15.5px; font-weight: 700; color: var(--text); margin-top: .55rem; }
.calc-prazo { font-size: 13.5px; color: var(--muted); margin-top: .2rem; }
.calc-porque { list-style: none; padding: 0; margin: 1.3rem 0 0; }
.calc-porque li {
position: relative; padding-left: 1.5rem; margin-bottom: .55rem;
font-size: 14px; line-height: 1.65; color: var(--muted);
}
/* --badge-text em vez de --brand500: o azul fixo cai abaixo de 4,5:1 sobre o
card do tema escuro; o token do badge já vem mais claro lá. */
.calc-porque li::before {
content: ''; position: absolute; left: .35rem; top: .62rem;
width: 5px; height: 5px; border-radius: 50%; background: var(--badge-text);
}
.calc-porque strong { color: var(--text); }
/* Dica de prazo — verde porque é dinheiro/tempo a favor do usuário */
.calc-tip {
display: flex; align-items: flex-start; gap: .8rem; margin-top: 1.3rem;
background: rgba(5,150,105,.07); border: 1px solid rgba(5,150,105,.25);
border-radius: 14px; padding: .95rem 1.1rem;
font-size: 13.5px; line-height: 1.65; color: var(--muted);
}
.calc-tip svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--ico-renda); margin-top: .15rem; }
.calc-tip strong { color: var(--text); }
/* Parcelas */
.calc-parcelas { margin-top: 1.5rem; border-top: 1px solid var(--cta-border); padding-top: 1.3rem; }
.calc-parcelas ol { list-style: none; padding: 0; margin: .8rem 0 0; }
.calc-parcelas li {
display: grid; grid-template-columns: 3.2rem 1fr auto; align-items: baseline;
gap: .5rem .8rem; padding: .55rem 0; font-size: 13.5px; color: var(--muted);
border-bottom: 1px solid var(--cta-border);
}
.calc-parcelas li:last-child { border-bottom: none; }
.calc-parc-n { font-weight: 800; color: var(--badge-text); font-size: 12.5px; }
.calc-parc-mes { color: var(--text); font-weight: 600; text-transform: capitalize; }
/* Some no celular: a data completa já está implícita no mês da fatura */
.calc-parc-data { display: none; color: var(--muted); font-size: 12.5px; }
@media (min-width: 560px) {
.calc-parcelas li { grid-template-columns: 3.2rem 1fr 6rem auto; }
.calc-parc-data { display: inline; }
}
.calc-parc-valor { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.calc-parc-nota { margin-top: .9rem; font-size: 12.5px; color: var(--muted); line-height: 1.55; }
/* Veredito da calc "parcelar ou à vista" — frase curta, cor semântica sólida
(não gradiente): azul = pagar à vista, verde = parcelar. */
.calc-veredito { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
@media (min-width: 560px) { .calc-veredito { font-size: 2.4rem; } }
.calc-veredito.calc-vista { color: var(--badge-text); }
/* Verde mais fechado no claro (#047857 dá ~4,7:1 vs 3,5:1 do renda500) — é o
elemento mais importante da página, então emparelha com o azul do "à vista". */
.calc-veredito.calc-parcelar { color: #047857; }
:root[data-theme="dark"] .calc-veredito.calc-parcelar { color: var(--ico-renda); }
.calc-resumo { font-size: 15px; color: var(--muted); margin-top: .6rem; }
.calc-resumo strong { color: var(--text); }
/* Bloco do ponto de equilíbrio — neutro, separado do texto acima */
.calc-equilibrio {
margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--cta-border);
font-size: 13.5px; line-height: 1.65; color: var(--muted);
}
.calc-equilibrio strong { color: var(--text); }
/* ---------- Foco acessível ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible {
outline: 2px solid var(--brand500); outline-offset: 3px; border-radius: 6px;
}
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--sb-track); }
::-webkit-scrollbar-thumb { background: var(--sb-thumb); border-radius: 3px; }
/* =========================================================
Utilitários (substituem o Tailwind CDN)
---------------------------------------------------------
O CDN da Tailwind eram 397KB de compilador rodando no
navegador de cada visitante. Isto é o CSS estático das
~143 classes REALMENTE usadas nas 11 páginas — lista
congelada. ⚠️ Ao usar uma classe Tailwind nova na marcação,
adicione a regra dela aqui, senão não terá efeito.
Ordem = base → leading → responsivo, pra o cascade bater
igual ao Tailwind (ex.: leading-[1.08] no mobile, e
md:text-6xl trazendo seu próprio line-height no desktop).
========================================================= */
/* Preflight essencial que o CDN dava e some ao removê-lo */
html { line-height: 1.5; }
/* O Tailwind trazia isto; sem ele, uma classe com `display` (ex.: .calc-tip
display:flex) vence o atributo [hidden] e o elemento "oculto" reaparece.
!important porque `hidden` sempre significa oculto — nada deve mostrá-lo. */
[hidden] { display: none !important; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
button { background: transparent; border: 0; font: inherit; color: inherit; cursor: pointer; }
/* Display / posição */
.block{display:block} .inline-block{display:inline-block}
.flex{display:flex} .inline-flex{display:inline-flex}
.grid{display:grid} .hidden{display:none}
.flex-col{flex-direction:column} .flex-wrap{flex-wrap:wrap}
.relative{position:relative} .overflow-hidden{overflow:hidden}
.z-10{z-index:10} .shrink-0{flex-shrink:0} .min-w-0{min-width:0}
.order-1{order:1} .order-2{order:2}
/* Alinhamento flex/grid */
.items-center{align-items:center} .items-start{align-items:flex-start}
.justify-between{justify-content:space-between} .justify-center{justify-content:center}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Larguras / alturas */
.max-w-lg{max-width:32rem} .max-w-md{max-width:28rem} .max-w-xl{max-width:36rem}
.max-w-2xl{max-width:42rem} .max-w-3xl{max-width:48rem} .max-w-4xl{max-width:56rem}
.max-w-5xl{max-width:64rem} .max-w-6xl{max-width:72rem} .max-w-7xl{max-width:80rem}
.w-56{width:14rem} .w-full{width:100%} .w-auto{width:auto}
.h-7{height:1.75rem} .h-8{height:2rem} .h-14{height:3.5rem}
.object-contain{object-fit:contain}
/* Margens */
.mx-auto{margin-left:auto;margin-right:auto}
.mb-2{margin-bottom:.5rem} .mb-3{margin-bottom:.75rem} .mb-4{margin-bottom:1rem}
.mb-5{margin-bottom:1.25rem} .mb-6{margin-bottom:1.5rem} .mb-7{margin-bottom:1.75rem}
.mb-8{margin-bottom:2rem} .mb-9{margin-bottom:2.25rem} .mb-10{margin-bottom:2.5rem}
.mb-12{margin-bottom:3rem} .mb-16{margin-bottom:4rem}
.mt-3{margin-top:.75rem} .mt-4{margin-top:1rem} .mt-5{margin-top:1.25rem}
.mt-6{margin-top:1.5rem} .mt-10{margin-top:2.5rem} .mt-16{margin-top:4rem}
/* Paddings */
.p-7{padding:1.75rem} .p-8{padding:2rem} .p-9{padding:2.25rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.px-9{padding-left:2.25rem;padding-right:2.25rem}
.px-10{padding-left:2.5rem;padding-right:2.5rem}
.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.py-14{padding-top:3.5rem;padding-bottom:3.5rem}
.py-16{padding-top:4rem;padding-bottom:4rem}
.py-20{padding-top:5rem;padding-bottom:5rem}
.py-24{padding-top:6rem;padding-bottom:6rem}
.pt-8{padding-top:2rem} .pt-12{padding-top:3rem} .pt-14{padding-top:3.5rem}
.pb-4{padding-bottom:1rem} .pb-9{padding-bottom:2.25rem} .pb-10{padding-bottom:2.5rem}
.pb-12{padding-bottom:3rem} .pb-14{padding-bottom:3.5rem} .pb-20{padding-bottom:5rem}
.pb-24{padding-bottom:6rem} .pb-32{padding-bottom:8rem}
/* Gaps */
.gap-2{gap:.5rem} .gap-3{gap:.75rem} .gap-4{gap:1rem} .gap-5{gap:1.25rem}
.gap-6{gap:1.5rem} .gap-12{gap:3rem} .gap-16{gap:4rem}
.gap-x-8{column-gap:2rem} .gap-y-3{row-gap:.75rem}
/* Tipografia — font-size + line-height (Tailwind); leading-* abaixo sobrepõe */
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}
.font-semibold{font-weight:600} .font-bold{font-weight:700} .font-extrabold{font-weight:800}
.text-center{text-align:center} .text-white{color:#fff}
.tracking-tight{letter-spacing:-.025em}
.whitespace-nowrap{white-space:nowrap} .no-underline{text-decoration:none}
/* line-height (depois dos text-* pra vencer no mesmo elemento) */
.leading-tight{line-height:1.25} .leading-snug{line-height:1.375}
.leading-relaxed{line-height:1.625}
.leading-\[1\.08\]{line-height:1.08} .leading-\[1\.12\]{line-height:1.12}
/* Bordas / raios / opacidade */
.border-t{border-top-width:1px;border-top-style:solid}
.rounded-2xl{border-radius:1rem} .rounded-3xl{border-radius:1.5rem}
.rounded-full{border-radius:9999px}
.opacity-70{opacity:.7} .opacity-80{opacity:.8}
/* ≥640px (sm) */
@media (min-width:640px){
.sm\:inline{display:inline} .sm\:flex-row{flex-direction:row}
.sm\:gap-3{gap:.75rem} .sm\:w-auto{width:auto}
}
/* ≥768px (md) */
@media (min-width:768px){
.md\:inline{display:inline}
.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.md\:h-9{height:2.25rem} .md\:w-64{width:16rem}
.md\:justify-start{justify-content:flex-start} .md\:text-left{text-align:left}
.md\:mx-0{margin-left:0;margin-right:0}
.md\:order-1{order:1} .md\:order-2{order:2}
.md\:p-8{padding:2rem} .md\:p-9{padding:2.25rem}
.md\:p-12{padding:3rem} .md\:p-14{padding:3.5rem}
.md\:px-7{padding-left:1.75rem;padding-right:1.75rem}
.md\:text-sm{font-size:.875rem;line-height:1.25rem}
.md\:text-xl{font-size:1.25rem;line-height:1.75rem}
.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}
.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}
.md\:text-5xl{font-size:3rem;line-height:1}
.md\:text-6xl{font-size:3.75rem;line-height:1}
}
/* ≥1024px (lg) */
@media (min-width:1024px){
.lg\:inline{display:inline}
.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}