/* Clear Mirror Automation — DESIGN SYSTEM · base
   Os valores abaixo são FALLBACK. A fonte da verdade é /brand/tokens.json, aplicada em tempo de
   execução (app.js → aplicarTema). Nenhuma regra de componente usa cor literal: só var(--...). */
:root {
  --fundo: #0A1023; --fundo2: #0C1226; --cobalto: #111E79; --cobalto2: #1E2C74;
  --selo: #134A7E; --acento: #7FB6D6; --acento_forte: #A9D4EE; --acento_texto: #06101F;
  --vidro: rgba(255,255,255,.06); --vidro_forte: rgba(255,255,255,.10); --vidro_borda: rgba(255,255,255,.14);
  --texto: #F4F7FC; --texto2: #A8B4CF; --texto3: #6F7C9A;
  --ok: #29D078; --aviso: #F2B65A; --erro: #F06B6B;
  --familia: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, Inter, sans-serif;
  --peso_leve: 300; --peso_titulo: 600;
  --cartao: 22px; --controle: 14px; --pilula: 999px;
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;
  --sombra_cartao: 0 12px 40px rgba(2,6,20,.45);
  --t-rapido: 160ms; --t-medio: 260ms; --curva: cubic-bezier(.2,.8,.2,1);
  --largura: 1120px;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; min-height: 100%; background: var(--fundo); color: var(--texto); font-family: var(--familia); }
body { min-height: 100dvh; line-height: 1.4; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 8px; }
[hidden] { display: none !important; }

/* Fundo da casa: azul-marinho com ondas azul-cobalto (linguagem das telas do Infinity) */
.fundo { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(1100px 650px at 88% 6%, color-mix(in srgb, var(--cobalto) 95%, transparent), transparent 62%),
    radial-gradient(900px 700px at 70% 55%, color-mix(in srgb, var(--cobalto2) 45%, transparent), transparent 65%),
    radial-gradient(900px 600px at 5% 100%, color-mix(in srgb, var(--cobalto) 75%, transparent), transparent 60%),
    linear-gradient(180deg, var(--fundo2), var(--fundo)); }
.fundo svg { position: absolute; width: 140%; height: 100%; left: -20%; top: 0; opacity: 1; animation: deriva 60s linear infinite alternate; }
@keyframes deriva { to { transform: translateX(8%); } }

/* Tipografia */
.t-display { font-size: clamp(30px, 6vw, 40px); font-weight: var(--peso_leve); letter-spacing: -.02em; margin: 0; }
.t-titulo { font-size: 20px; font-weight: var(--peso_titulo); letter-spacing: -.01em; margin: 0; }
.t-secao { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--texto2); margin: 0; }
.t-sub { color: var(--texto2); font-size: 15px; }
.t-pequeno { color: var(--texto2); font-size: 13px; }
.t-num { font-variant-numeric: tabular-nums; }

/* Layout */
.pagina { max-width: var(--largura); margin: 0 auto; padding: var(--e4) var(--e4) calc(96px + env(safe-area-inset-bottom)); display: grid; gap: var(--e5); }
.grade { display: grid; gap: var(--e4); }
.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }
.linha { display: flex; align-items: center; gap: var(--e3); }
.entre { justify-content: space-between; }
.coluna { display: grid; gap: var(--e2); }
@media (min-width: 760px) {
  .pagina { padding: var(--e6) var(--e5) var(--e7); gap: var(--e6); }
  .grade-4-desk { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .so-celular { display: none !important; }
}
@media (max-width: 759px) {
  .grade-3 { grid-template-columns: 1fr 1fr; }
  .grade-3 > :first-child:nth-last-child(3) { grid-column: 1 / -1; }
  .so-desktop { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { *, .fundo svg { animation: none !important; transition: none !important; } }