/* ═══════════════════════════════════════════════════════════════════════════
tema.css · DESIGN SYSTEM do Hub Interno — o CONTRATO VISUAL compartilhado.
Importe em TODA tela:
FILOSOFIA (v2): menos cor, muito mais refinamento. Padrão iPhone de verdade —
premium, calmo, caro. Neutros sofisticados + UM protagonista de cor (o dourado
da marca). Cor semântica (verde/vermelho/âmbar) SÓ onde significa algo
(dinheiro +/−, status, contagem) — nunca decoração. Nada de arco-íris.
3 TEMAS trocáveis em runtime pelo atributo data-tema no :
escuro (default, fallback de :root) · claro · cinema
TROCA DE TEMA (cole em toda página):
const tema = localStorage.getItem('hub-tema') || 'escuro';
document.documentElement.dataset.tema = tema;
// ao trocar: localStorage.setItem('hub-tema', t);
// document.documentElement.dataset.tema = t;
// fetch('/api/sessao/tema',{method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify({tema:t})});
// reagir a outra aba: window.addEventListener('storage', e => { if(e.key==='hub-tema') document.documentElement.dataset.tema = e.newValue; });
Composição: as telas só USAM as classes daqui. Não reinventar CSS de card,
botão, toggle, lista, app-icon, etc. — está tudo pronto abaixo. Em especial,
NÃO passe gradiente de cor inline no ícone: use as classes .ic-* (seção 3).
═══════════════════════════════════════════════════════════════════════════ */
/* ─────────────────────────── 1 · TOKENS DOS TEMAS ─────────────────────────── */
/* ESCURO — default e fallback de :root. Grafite neutro e profundo; o dourado é
o único protagonista de cor. Semânticas dessaturadas, calmas. */
:root,
:root[data-tema="escuro"]{
--bg:#06070a; /* fundo base quase preto, neutro */
--bg-2:#0b0d12; /* fundo elevado / gradiente */
--superficie:#12141a; /* barras, footers, painéis */
--card:#15181f; /* card padrão */
--card-2:#1b1f28; /* card elevado / hover */
--linha:#242833; /* borda / separador */
--linha-fraca:#191c24; /* hairline sutil */
--txt:#edeef2; /* texto principal (mais claro, mais contraste) */
--txt-2:#9ba2b1; /* secundário */
--txt-3:#767e8e; /* terciário / legendas */
--acento:#c9a86a; /* dourado — protagonista */
--acento-2:#e4c98a; /* dourado claro (highlight) */
--acento-tinta:rgba(201,168,106,.12); /* fundo tênue do acento */
--acento-txt:#141115; /* texto sobre o acento (contraste) */
--ok:#57ab86; /* sucesso / verde — dessaturado */
--alerta:#cf9d5c; /* atenção / âmbar — dessaturado */
--perigo:#cd6a63; /* erro / vermelho — dessaturado */
--info:#6386bf; /* informativo / azul — dessaturado */
--roxo:#8d7bbd; /* auxiliar / roxo — dessaturado */
--sombra:0 4px 10px -2px rgba(0,0,0,.35), 0 22px 48px -16px rgba(0,0,0,.62);
--sombra-sutil:0 2px 6px -1px rgba(0,0,0,.28), 0 12px 30px -14px rgba(0,0,0,.5);
--glass-bg:rgba(17,20,26,.72);
--glass-blur:20px;
--raio:24px; /* squircle de card */
--raio-2:16px; /* squircle menor (botões, campos) */
--raio-app:23%; /* ícone de app estilo iPhone (superelipse) */
--mono:'SFMono-Regular','Consolas',ui-monospace,monospace;
/* aliases de compat com as telas antigas (chat/espelho) */
--bg-soft:var(--superficie); --line:var(--linha); --line-soft:var(--linha-fraca);
--gold:var(--acento); --gold-2:var(--acento-2);
--blue:var(--info); --purple:var(--roxo); --green:var(--ok); --amber:var(--alerta); --red:var(--perigo);
--page-bg:radial-gradient(1100px 640px at 82% -14%, #12141b, var(--bg) 60%);
}
/* CLARO — minimalista de verdade: ar, off-white, sombras suaves, iOS light */
:root[data-tema="claro"]{
--bg:#f5f6f8;
--bg-2:#eef0f3;
--superficie:#ffffff;
--card:#ffffff;
--card-2:#f3f4f7;
--linha:#e5e8ed;
--linha-fraca:#eef0f3;
--txt:#181b21;
--txt-2:#5a626f;
--txt-3:#8a919e;
--acento:#a5824a; /* dourado mais escuro p/ contraste no claro */
--acento-2:#c9a86a;
--acento-tinta:rgba(165,130,74,.10);
--acento-txt:#ffffff;
--ok:#3c9670;
--alerta:#b17f3e;
--perigo:#c25a54;
--info:#4f70b6;
--roxo:#7566ac;
--sombra:0 4px 12px -2px rgba(20,28,44,.10), 0 20px 44px -18px rgba(20,28,44,.18);
--sombra-sutil:0 2px 8px -2px rgba(20,28,44,.07), 0 10px 26px -16px rgba(20,28,44,.12);
--glass-bg:rgba(255,255,255,.74);
--glass-blur:18px;
--page-bg:var(--bg);
}
/* CINEMA — "tudo que dá": gradiente noite, glass forte, glow contido, vinheta.
Ainda mais calmo que a v1 — o glow trabalha a favor da profundidade, não do circo. */
:root[data-tema="cinema"]{
--bg:#0a0612;
--bg-2:#120a1e;
--superficie:rgba(30,19,50,.48);
--card:rgba(42,27,70,.42);
--card-2:rgba(56,38,92,.52);
--linha:rgba(150,124,214,.20);
--linha-fraca:rgba(150,124,214,.11);
--txt:#f3eefc;
--txt-2:#c3b4e2;
--txt-3:#8e80b4;
--acento:#e4c98a;
--acento-2:#f2dcae;
--acento-tinta:rgba(228,201,138,.14);
--acento-txt:#1a0f2b;
--ok:#5cc199;
--alerta:#dcaa66;
--perigo:#dc7a74;
--info:#7f9ad6;
--roxo:#a58cd6;
--sombra:0 8px 24px -6px rgba(6,3,18,.6), 0 30px 70px -24px rgba(6,3,18,.7);
--sombra-sutil:0 4px 16px -4px rgba(6,3,18,.5), 0 18px 44px -20px rgba(6,3,18,.6);
--glass-bg:rgba(28,17,48,.56);
--glass-blur:28px;
--glow:0 0 0 1px rgba(150,124,214,.14), 0 0 30px -6px rgba(150,124,214,.16);
--page-bg:
radial-gradient(1200px 720px at 78% -10%, rgba(112,74,206,.24), transparent 60%),
radial-gradient(900px 660px at 12% 112%, rgba(66,104,214,.16), transparent 55%),
linear-gradient(160deg, #0a0612 0%, #120a1e 55%, #0d0718 100%);
}
/* ─────────────────────────── 2 · RESET + BASE ─────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{height:100%}
body{
font-family:system-ui,-apple-system,'SF Pro Text','SF Pro Display','Segoe UI',Roboto,sans-serif;
background:var(--page-bg);
color:var(--txt);
font-size:16px;
line-height:1.5;
letter-spacing:-.006em;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
font-optical-sizing:auto;
min-height:100dvh;
padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
/* vinheta imersiva só no cinema */
:root[data-tema="cinema"] body::after{
content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
background:radial-gradient(130% 120% at 50% 40%, transparent 58%, rgba(4,2,12,.55) 100%);
}
/* :not(.overlay) — bottom-sheets (.overlay é sempre position:fixed, por design) não
podem virar 'relative' aqui: isso jogava o modal pro fim do fluxo normal do body
em vez de flutuar por cima da tela inteira. Achado testando o mapa de Memórias. */
:root[data-tema="cinema"] body>*:not(.overlay){position:relative;z-index:1}
button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:var(--acento);text-decoration:none}
img,svg,canvas,video{max-width:100%;display:block}
/* ESCALA TIPOGRÁFICA — hierarquia Apple: títulos pesados com tracking negativo.
As telas geralmente definem o próprio tamanho local; isto é o fallback forte. */
h1,h2,h3,h4,h5{color:var(--txt);font-weight:700;line-height:1.18;letter-spacing:-.02em}
h1{font-size:1.9rem;font-weight:800;letter-spacing:-.026em;line-height:1.12}
h2{font-size:1.4rem;font-weight:750;letter-spacing:-.021em}
h3{font-size:1.1875rem;font-weight:700;letter-spacing:-.015em}
h4{font-size:1rem;font-weight:650;letter-spacing:-.01em}
::selection{background:var(--acento-tinta);color:var(--txt)}
:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--linha);border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:var(--txt-3)}
*{scrollbar-width:thin;scrollbar-color:var(--linha) transparent}
/* ─────────────────────────── 3 · COMPONENTES ─────────────────────────── */
/* ····· cartão (squircle macio, sombra difusa — flutua, não "emoldura") ····· */
.cartao{
background:var(--card);
border:1px solid var(--linha-fraca);
border-radius:var(--raio);
padding:20px;
box-shadow:var(--sombra-sutil);
}
.cartao-2{
background:var(--card-2);
border:1px solid var(--linha-fraca);
border-radius:var(--raio);
padding:22px;
box-shadow:var(--sombra);
}
/* leve realce superior no escuro dá sensação de superfície elevada e macia */
:root[data-tema="escuro"] .cartao{box-shadow:var(--sombra-sutil),inset 0 1px 0 rgba(255,255,255,.035)}
:root[data-tema="escuro"] .cartao-2{box-shadow:var(--sombra),inset 0 1px 0 rgba(255,255,255,.045)}
:root[data-tema="cinema"] .cartao,
:root[data-tema="cinema"] .cartao-2{
backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
box-shadow:var(--glow),var(--sombra-sutil);
}
:root[data-tema="claro"] .cartao{box-shadow:var(--sombra-sutil)}
/* ····· glass genérico (barras, overlays) ····· */
.glass{
background:var(--glass-bg);
backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
border:1px solid var(--linha);
}
/* ····· BOTÕES (iOS, spring no :active) ····· */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:12px 20px;border-radius:var(--raio-2);
background:var(--card-2);border:1px solid var(--linha);color:var(--txt);
font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
box-shadow:0 1px 2px rgba(0,0,0,.06);
transition:transform .13s cubic-bezier(.34,1.56,.64,1), background .16s, border-color .16s, box-shadow .16s, filter .16s;
}
.btn:hover{border-color:var(--txt-3)}
.btn:active{transform:scale(.955)}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.btn-primario{
background:linear-gradient(180deg,var(--acento-2),var(--acento));
color:var(--acento-txt);border-color:transparent;font-weight:700;
box-shadow:0 2px 10px -3px color-mix(in srgb,var(--acento) 55%,transparent), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primario:hover{filter:brightness(1.04)}
:root[data-tema="cinema"] .btn-primario{box-shadow:0 0 26px -6px rgba(228,201,138,.4), inset 0 1px 0 rgba(255,255,255,.25)}
.btn-fantasma{background:transparent;border-color:transparent;color:var(--txt-2);box-shadow:none}
.btn-fantasma:hover{background:var(--card);color:var(--txt);border-color:var(--linha)}
.btn-perigo{background:var(--perigo);color:#fff;border-color:transparent;box-shadow:0 2px 10px -3px color-mix(in srgb,var(--perigo) 50%,transparent)}
.btn-perigo:hover{filter:brightness(1.06)}
.btn-grande{width:100%;padding:16px 22px;border-radius:var(--raio-2);font-size:16px}
/* botão ícone quadrado (enviar, mic, etc.) */
.btn-icone{width:46px;height:46px;padding:0;border-radius:13px;flex-shrink:0;font-size:18px}
/* ····· APP-ICON — squircle de home do iPhone: superelipse, gloss superior,
sombra flutuante. A COR vem SEMPRE de uma classe .ic-* (nunca inline). ·····
uso:
(sem classe .ic-*, cai no grafite neutro — ver seção "SISTEMA DE COR DE ÍCONE") */
.app{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center}
.app-icon{
position:relative;width:62px;height:62px;border-radius:var(--raio-app);
display:grid;place-items:center;font-size:28px;line-height:1;isolation:isolate;
background:linear-gradient(145deg, rgba(22,26,36,.88) 0%, rgba(8,10,16,.96) 100%);
color:#fff;
border:1px solid color-mix(in srgb, var(--g1,#474d57) 45%, transparent);
box-shadow:
0 4px 16px -4px rgba(0,0,0,.6),
0 0 14px -2px color-mix(in srgb, var(--g1,#474d57) 28%, transparent),
inset 0 1px 0 rgba(255,255,255,.14);
transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, border-color .2s;
}
/* superelipse real onde o navegador suporta (iOS/Chrome recentes) */
@supports (corner-shape:squircle){ .app-icon{corner-shape:squircle;border-radius:27%} }
/* gloss sutil */
.app-icon::before{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
background:radial-gradient(80% 80% at 50% 0%, color-mix(in srgb, var(--g1,#474d57) 22%, transparent) 0%, transparent 70%);
}
.app-icon:hover{
transform:translateY(-3px) scale(1.03);
border-color:var(--g1,#474d57);
box-shadow:
0 8px 24px -6px rgba(0,0,0,.7),
0 0 22px 2px color-mix(in srgb, var(--g1,#474d57) 55%, transparent),
inset 0 1px 0 rgba(255,255,255,.25);
}
.app-icon:active{transform:scale(.94)}
:root[data-tema="cinema"] .app-icon{
box-shadow:
0 0 0 1px color-mix(in srgb, var(--g1,#474d57) 50%, transparent),
0 0 20px 0 color-mix(in srgb, var(--g1,#474d57) 35%, transparent);
}
.ai-emo{position:relative;z-index:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.app-nome{font-size:12.5px;color:var(--txt-2);font-weight:600;letter-spacing:-.005em;max-width:84px;line-height:1.25}
.app-badge{
position:absolute;top:-4px;right:-4px;z-index:2;
min-width:19px;height:19px;padding:0 5.5px;
border-radius:99px;background:var(--perigo);color:#fff;
font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;
display:grid;place-items:center;
box-shadow:0 0 0 2px var(--bg), 0 1px 2px rgba(0,0,0,.3);
}
/* ····· SISTEMA DE COR DE ÍCONE (.ic-*) — paleta COESA e DESSATURADA ·····
Cada classe é um par de mesma família (topo mais claro → base mais escura),
escuro e contido, pra a home-screen parecer organizada e calma. A tela só
APLICA a classe; não inventa cor, não passa gradiente inline.
.ic-ardosia azul-ardósia (neutro frio) → listas, tarefas, genérico frio
.ic-azul azul suave → agenda, pessoas, comunicação
.ic-indigo índigo acinzentado → rotinas, automações, foco
.ic-roxo malva contido → "você"/mente, IA, pessoal
.ic-coral coral apagado (ÚNICO quente-frio) → SAÚDE, emoções
.ic-ouro bronze da marca → dinheiro, contas, notas (valor)
.ic-grafite grafite neutro (default) → sistema, arquivos, genérico */
.ic-ardosia{--g1:#5a6675;--g2:#3f4a59}
.ic-azul {--g1:#4f6b8c;--g2:#374e69}
.ic-indigo {--g1:#565a7d;--g2:#3d4160}
.ic-roxo {--g1:#615579;--g2:#463c5c}
.ic-coral {--g1:#9a625f;--g2:#784b48}
.ic-ouro {--g1:#a6844f;--g2:#7c6039}
.ic-grafite{--g1:#474d57;--g2:#31353d}
/* grade de apps (home screen) — mais respiro entre ícones */
.grade-apps{
display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));
gap:24px 14px;justify-items:center;
}
/* ····· TOGGLE (switch iOS) ·····
uso: */
.toggle{display:inline-flex;align-items:center;cursor:pointer}
.toggle input{position:absolute;opacity:0;width:0;height:0}
.tg-trilho{
position:relative;width:50px;height:30px;border-radius:99px;
background:var(--linha);transition:background .22s ease;flex-shrink:0;
}
.tg-trilho::after{
content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:99px;
background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
transition:transform .24s cubic-bezier(.34,1.56,.64,1);
}
.toggle input:checked + .tg-trilho{background:var(--ok)}
.toggle input:checked + .tg-trilho::after{transform:translateX(20px)}
.toggle input:focus-visible + .tg-trilho{outline:2px solid var(--acento);outline-offset:2px}
/* olho (mostrar/esconder valor sensível) */
.olho{
width:34px;height:34px;border-radius:11px;color:var(--txt-3);
display:grid;place-items:center;font-size:16px;
border:1px solid transparent;transition:.14s;
}
.olho:hover{color:var(--txt);background:var(--card-2);border-color:var(--linha)}
/* ····· BARRA-TOPO (top bar glass) ····· */
.barra-topo{
display:flex;align-items:center;gap:12px;
padding:12px 18px;padding-top:max(12px,env(safe-area-inset-top));
background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
border-bottom:1px solid var(--linha-fraca);position:sticky;top:0;z-index:50;
}
.barra-topo h1{font-size:17px;font-weight:680;letter-spacing:-.014em;flex:1;min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barra-topo .bt-acoes{display:flex;align-items:center;gap:6px;flex-shrink:0}
/* voltar (chevron iOS) */
.voltar{
display:inline-flex;align-items:center;gap:3px;
color:var(--acento);font-size:15px;font-weight:500;
padding:6px 8px 6px 4px;border-radius:10px;transition:.14s;
}
.voltar::before{content:"‹";font-size:26px;line-height:.6;font-weight:400;margin-top:-2px}
.voltar:active{transform:scale(.94)}
/* ····· LISTA (linhas iOS com hairlines) ····· */
.lista{
background:var(--card);border:1px solid var(--linha-fraca);
border-radius:var(--raio);overflow:hidden;
box-shadow:var(--sombra-sutil);
}
:root[data-tema="cinema"] .lista{backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));box-shadow:var(--glow)}
.linha-item{
display:flex;align-items:center;gap:14px;
padding:14px 16px;position:relative;text-align:left;width:100%;color:var(--txt);
transition:background .14s;
}
.linha-item + .linha-item::before{
content:"";position:absolute;top:0;left:16px;right:0;height:1px;background:var(--linha-fraca);
}
button.linha-item:hover,a.linha-item:hover{background:var(--card-2)}
.linha-item .li-icone{
width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;
background:var(--card-2);border:1px solid var(--linha-fraca);font-size:16px;
}
.linha-item .li-corpo{flex:1;min-width:0}
.linha-item .li-titulo{font-size:15px;font-weight:550;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linha-item .li-sub{font-size:12.5px;color:var(--txt-3);margin-top:2px}
.linha-item .li-fim{margin-left:auto;color:var(--txt-3);font-size:13px;flex-shrink:0;display:flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums}
.linha-item .li-chevron::after{content:"›";font-size:20px;color:var(--txt-3);line-height:1}
/* ····· PILL (etiqueta de status) — semântica só onde significa algo ····· */
.pill{
display:inline-flex;align-items:center;gap:5px;
font-size:11.5px;font-weight:600;letter-spacing:.01em;
padding:4px 11px;border-radius:99px;
background:var(--acento-tinta);color:var(--acento-2);border:1px solid transparent;
}
.pill-ok{background:color-mix(in srgb,var(--ok) 13%,transparent);color:var(--ok)}
.pill-alerta{background:color-mix(in srgb,var(--alerta) 15%,transparent);color:var(--alerta)}
.pill-perigo{background:color-mix(in srgb,var(--perigo) 15%,transparent);color:var(--perigo)}
.pill-info{background:color-mix(in srgb,var(--info) 15%,transparent);color:var(--info)}
.pill-neutro{background:var(--card-2);color:var(--txt-2);border-color:var(--linha)}
.pill-ponto::before{content:"";width:6px;height:6px;border-radius:99px;background:currentColor}
/* campo de texto / input padrão — foco com anel dourado suave */
.campo{
width:100%;background:var(--card);border:1px solid var(--linha);color:var(--txt);
border-radius:var(--raio-2);padding:13px 15px;font-size:15px;line-height:1.4;
transition:border-color .14s, box-shadow .14s;
}
.campo::placeholder{color:var(--txt-3)}
.campo:focus{outline:none;border-color:var(--acento);box-shadow:0 0 0 3.5px var(--acento-tinta)}
textarea.campo{resize:none;max-height:140px}
/* ····· SELETOR-TEMA (3 amostras de tema) ·····
uso:
marque a ativa com .on via JS. */
.seletor-tema{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.st-opcao{
display:flex;flex-direction:column;align-items:center;gap:9px;
padding:14px 8px 12px;border-radius:var(--raio-2);
background:var(--card);border:1.5px solid var(--linha);color:var(--txt-2);
font-size:13px;font-weight:600;letter-spacing:-.005em;
transition:transform .12s cubic-bezier(.34,1.56,.64,1),border-color .16s,color .16s;
}
.st-opcao:hover{color:var(--txt)}
.st-opcao:active{transform:scale(.96)}
.st-opcao.on{border-color:var(--acento);color:var(--txt)}
.st-amostra{
width:100%;height:46px;border-radius:12px;border:1px solid rgba(255,255,255,.08);
position:relative;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.st-amostra::after{content:"";position:absolute;left:9px;bottom:8px;width:26px;height:6px;border-radius:99px}
.am-escuro{background:radial-gradient(120% 90% at 80% 0,#12141b,#06070a 65%)}
.am-escuro::after{background:linear-gradient(135deg,#e4c98a,#c9a86a)}
.am-claro{background:linear-gradient(160deg,#ffffff,#eef0f3)}
.am-claro::after{background:linear-gradient(135deg,#c9a86a,#a5824a)}
.am-cinema{background:linear-gradient(160deg,#1a0f33,#0a0612 60%);box-shadow:inset 0 0 20px rgba(140,90,230,.4)}
.am-cinema::after{background:linear-gradient(135deg,#f2dcae,#b48cff)}
.st-opcao.on .st-amostra{box-shadow:0 0 0 2px var(--acento), inset 0 1px 0 rgba(255,255,255,.06)}
/* ─────────────────────────── 4 · UTILITÁRIOS ─────────────────────────── */
.squircle{border-radius:var(--raio)}
.empilha{display:flex;flex-direction:column}
.linha{display:flex;align-items:center}
.entre{display:flex;align-items:center;justify-content:space-between;gap:12px}
.centro{display:flex;align-items:center;justify-content:center}
.cresce{flex:1;min-width:0}
.gap-4{gap:4px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.rotulo{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);font-weight:600}
.titulo-grande{font-size:clamp(24px,6vw,32px);font-weight:800;letter-spacing:-.026em;line-height:1.1;color:var(--txt)}
.subtitulo{font-size:15px;color:var(--txt-2);letter-spacing:-.006em;line-height:1.45}
.t2{color:var(--txt-2)}.t3{color:var(--txt-3)}.acento{color:var(--acento)}
.centro-txt{text-align:center}
.hidden{display:none!important}
.container{max-width:720px;margin:0 auto;padding:0 20px}
/* ─────────────────────────── 5 · KEYFRAMES LEVES ─────────────────────────── */
@keyframes respiracao{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.72;transform:scale(.985)}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes subir-sutil{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.respira{animation:respiracao 2.6s ease-in-out infinite}
.esmaece{animation:fade-in .28s ease both}
.sobe{animation:subir-sutil .3s cubic-bezier(.22,1,.36,1) both}
/* ─────────────────────────── 6 · ACESSIBILIDADE ─────────────────────────── */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.001ms!important;animation-iteration-count:1!important;
transition-duration:.001ms!important;scroll-behavior:auto!important;
}
}