/* ============================================================
RARIA.IA — SISTEMA VISUAL ÚNICO (brand.css)
Fonte da verdade do design. Um arquivo, todos os projetos.
Objetivo: matar a "cara de IA / arte feia". Coerência total.
Uso: (ou copiar as :root vars).
Fonte Baloo 2 vem do Google Fonts (funciona em qualquer web).
Para gerar PNG offline (Edge headless), trocar o @import pelo
@font-face local comentado no fim deste arquivo.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&display=swap');
/* ---------- 1. TOKENS (mexa AQUI, o resto herda) ---------- */
:root {
/* Cores da marca */
--navy: #0E2A3B; /* texto forte / superfícies escuras */
--navy-700: #12344A;
--teal: #12B39A; /* acento primário / sucesso / CTA */
--teal-600: #0E9B85;
--red: #F5333F; /* destaque / alerta / palavra-gatilho */
--bg: #F3F4F8; /* fundo claro padrão */
--surface: #FFFFFF; /* cards */
--ink: #0E2A3B; /* texto principal */
--ink-soft: #5B6472; /* texto secundário */
--ink-mute: #8CA3BC; /* legendas / hints */
--line: #E3E6EE; /* bordas */
--line-soft: #EEF1F6;
/* Gradiente do logo (R.) — NÃO usar em outros lugares */
--grad-logo: linear-gradient(135deg,#6D5DE8 0%,#2AB0C8 55%,#17B8A6 100%);
/* Gradiente de acento sutil (só faixas/destaques pontuais) */
--grad-teal: linear-gradient(135deg,#12B39A 0%,#0E9B85 100%);
/* Tipografia */
--font: 'Baloo 2','Segoe UI',system-ui,-apple-system,sans-serif;
/* Escala de espaçamento (múltiplos de 4) */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
--s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
/* Raio */
--r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-pill: 999px;
/* Sombras (suaves = ar de produto, não de template) */
--sh-1: 0 4px 14px rgba(20,40,80,.06);
--sh-2: 0 10px 28px rgba(20,40,80,.08);
--sh-3: 0 20px 48px rgba(20,40,80,.10);
--sh-teal: 0 8px 22px rgba(18,179,154,.25);
--maxw: 1120px;
}
/* ---------- 2. BASE ---------- */
*{box-sizing:border-box}
body.raria{
margin:0; background:var(--bg); color:var(--ink);
font-family:var(--font); font-weight:500;
line-height:1.5; -webkit-font-smoothing:antialiased;
}
.raria h1,.raria h2,.raria h3,.raria h4{margin:0 0 var(--s-3);font-weight:800;line-height:1.08;letter-spacing:-.01em}
.raria h1{font-size:clamp(34px,5vw,64px)}
.raria h2{font-size:clamp(26px,3.5vw,44px)}
.raria h3{font-size:clamp(20px,2.4vw,28px)}
.raria p{margin:0 0 var(--s-4);color:var(--ink-soft)}
.raria a{color:var(--teal-600);text-decoration:none}
.raria a:hover{text-decoration:underline}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--s-5)}
/* utilidades de cor/texto */
.text-teal{color:var(--teal)}
.text-red{color:var(--red)}
.text-navy{color:var(--navy)}
.text-soft{color:var(--ink-soft)}
.text-mute{color:var(--ink-mute)}
.grad-text{background:var(--grad-teal);-webkit-background-clip:text;background-clip:text;color:transparent}
.kicker{font-size:.82rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
/* ---------- 3. LOGO (componente oficial) ---------- */
.brand-logo{display:inline-flex;align-items:center;gap:12px}
.brand-mark{
width:52px;height:52px;border-radius:14px;
background:var(--grad-logo);color:#fff;font-weight:800;font-size:30px;
display:flex;align-items:center;justify-content:center;
box-shadow:0 6px 16px rgba(80,60,200,.22);flex:none;
}
.brand-mark.sm{width:38px;height:38px;border-radius:11px;font-size:22px}
.brand-mark.lg{width:66px;height:66px;border-radius:17px;font-size:40px}
.brand-word{font-size:1.55rem;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.brand-word .ia{color:var(--teal)}
/* ---------- 4. BOTÕES ---------- */
.btn{
display:inline-flex;align-items:center;gap:8px;cursor:pointer;
font-family:var(--font);font-weight:700;font-size:1rem;
padding:14px 26px;border-radius:var(--r-pill);border:2px solid transparent;
transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
text-decoration:none;line-height:1;
}
.btn:hover{transform:translateY(-1px);text-decoration:none}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--teal);color:#fff;box-shadow:var(--sh-teal)}
.btn-primary:hover{background:var(--teal-600)}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{background:var(--navy-700)}
.btn-danger{background:var(--red);color:#fff}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal-600)}
.btn.sm{padding:9px 18px;font-size:.9rem}
.btn.lg{padding:18px 34px;font-size:1.12rem}
/* ⚠️ botão que é : `.raria a{color:teal}` (seção 2) tem especificidade 0,1,1 e vencia
`.btn-primary` (0,1,0) — o texto saía teal sobre fundo teal. Estes seletores empatam
em especificidade e vêm depois, então ganham. Não remover. */
a.btn-primary,a.btn-dark,a.btn-danger{color:#fff}
a.btn-primary:hover,a.btn-dark:hover,a.btn-danger:hover{color:#fff;text-decoration:none}
a.btn-ghost{color:var(--navy)}
a.btn-ghost:hover{color:var(--teal-600);text-decoration:none}
/* ---------- 5. CARDS ---------- */
.card{
background:var(--surface);border:1px solid var(--line);
border-radius:var(--r-lg);padding:var(--s-6);box-shadow:var(--sh-1);
}
.card.hover:hover{box-shadow:var(--sh-2);transform:translateY(-2px);transition:.15s}
.card-feature{border:2px solid var(--teal);box-shadow:var(--sh-teal)}
.card-dark{background:var(--navy);color:#fff;border:none}
.card-dark p,.card-dark .text-soft{color:#B7C6D6}
.card-icon{
width:52px;height:52px;border-radius:14px;display:flex;align-items:center;
justify-content:center;font-size:26px;background:#E9FBF7;color:var(--teal);margin-bottom:var(--s-4);
}
/* ---------- 6. CHIPS / BADGES / PILLS ---------- */
.chip{
display:inline-flex;align-items:center;gap:10px;background:var(--surface);
border:1px solid var(--line);border-radius:var(--r-md);
padding:12px 18px;font-weight:700;box-shadow:var(--sh-1);
}
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-pill);
font-size:.78rem;font-weight:800;letter-spacing:.02em}
.badge-teal{background:#E9FBF7;color:var(--teal-600)}
.badge-navy{background:#E7EDF3;color:var(--navy)}
.badge-red{background:#FDE7E8;color:var(--red)}
.pill{display:inline-flex;align-items:center;gap:10px;background:#E9EBF1;
border-radius:var(--r-pill);padding:12px 22px;font-weight:700}
/* ---------- 7. FORMULÁRIOS (padrão Jessica: form que filtra lead) ---------- */
.field{margin-bottom:var(--s-4)}
.field label{display:block;font-weight:700;font-size:.92rem;margin-bottom:6px;color:var(--navy)}
.field input,.field select,.field textarea{
width:100%;font-family:var(--font);font-size:1rem;color:var(--ink);
padding:14px 16px;border:1.5px solid var(--line);border-radius:var(--r-sm);
background:var(--surface);transition:border .12s,box-shadow .12s;
}
.field input:focus,.field select:focus,.field textarea:focus{
outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(18,179,154,.12);
}
.field .hint{font-size:.8rem;color:var(--ink-mute);margin-top:5px}
/* ---------- 8. TABELA ---------- */
.table{width:100%;border-collapse:collapse;background:var(--surface);
border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-1)}
.table th,.table td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line-soft)}
.table th{background:#F7F8FB;font-weight:800;font-size:.85rem;letter-spacing:.03em;color:var(--ink-soft)}
.table tr:last-child td{border-bottom:none}
/* ---------- 9. HEADER / NAV ---------- */
.nav{display:flex;align-items:center;justify-content:space-between;
padding:var(--s-4) 0;gap:var(--s-5)}
.nav-links{display:flex;gap:var(--s-5);align-items:center}
.nav-links a{color:var(--ink-soft);font-weight:600}
.nav-links a:hover{color:var(--teal-600);text-decoration:none}
/* ---------- 10. FAIXAS / SEÇÕES ---------- */
.section{padding:var(--s-8) 0}
.section-dark{background:var(--navy);color:#fff}
.eyebrow{display:inline-block;margin-bottom:var(--s-3)}
/* ---------- 11. MOCKUP DE CELULAR (slides/carrossel) ---------- */
.phone{width:270px;border-radius:34px;background:var(--navy);padding:12px;
box-shadow:var(--sh-3)}
.phone .screen{background:var(--bg);border-radius:24px;overflow:hidden;min-height:520px}
/* ---------- 12. GRID helpers ---------- */
.grid{display:grid;gap:var(--s-5)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.grid-2,.grid-3{grid-template-columns:1fr}}
/* ============================================================
FONTE OFFLINE (para gerar PNG no Edge headless sem internet):
comente o @import lá em cima e descomente o bloco abaixo,
ajustando o caminho do Baloo2.ttf.
------------------------------------------------------------
@font-face{
font-family:'Baloo 2';
src:url('./Baloo2.ttf') format('truetype');
font-weight:100 900; font-display:block;
}
============================================================ */