/* ==========================================================================
   Tire sua dúvida com o Mago — base visual compartilhada
   Fontes, cores e medidas oficiais extraídas de innerai.com (Black Friday 2026).
   Tudo é carregado do próprio site (nenhum arquivo de terceiros).
   ========================================================================== */

@font-face {
  font-family: "Satoshi";
  src: url("../assets/fonts/Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ubuntu";
  src: url("../assets/fonts/ubuntu-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ubuntu";
  src: url("../assets/fonts/ubuntu-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ubuntu";
  src: url("../assets/fonts/ubuntu-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../assets/fonts/dm-sans-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Tipografia (mesmas famílias do site da oferta) */
  --fonte-ui: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif; /* textos e interface */
  --fonte-bf: "Ubuntu", system-ui, sans-serif;                              /* títulos da Black Friday */
  --fonte-chat: "DM Sans", system-ui, sans-serif;                           /* balões de conversa */

  /* Zona escura (hero da Black Friday) */
  --bf-fundo: #030705;
  --bf-fundo-2: #04170f;
  --bf-fundo-3: #06231a;
  --bf-painel: #0f1a14;
  --bf-neon: #73ffb9;
  --bf-neon-suave: #aeffcf;
  --bf-hero-de: #8df9e0;
  --bf-hero-ate: #aeff89;
  --bf-brilho: #61da35;
  --bf-grad-texto: linear-gradient(90deg, #8df9e0, #aeff89 80%);
  --bf-grad-cta: linear-gradient(180deg, #1bce86, #0e2312);
  --bf-grad-cartao: radial-gradient(120% 120% at 50% 0%, #030c06 21%, #1f5535 100%);
  --bf-grad-ouro: linear-gradient(90deg, #b57e10, #e5c25b 22%, #f9df7b 26%, #fff3a6 50%, #f9df7b 76%, #b57e10);
  --bf-preco-antigo: #848483;

  /* Zona clara (seções de conteúdo) */
  --claro-fundo: #ffffff;
  --claro-fundo-suave: #f7f7f8;
  --claro-borda: #e6ebe8;
  --claro-texto: #1c1c1c;
  --claro-texto-suave: #5d5d5d;
  --claro-texto-fraco: #8d8d8d;
  --verde-texto: #2b7a2e;   /* verde legível sobre branco */
  --verde-forte: #007f26;
  --verde-medio: #1bae6a;
  --verde-claro: #daf0e2;
  --cta-escuro: #262c3a;

  /* Acentos do Mago (cristal do cajado) */
  --mago-lilas: #c89ffb;
  --mago-lilas-suave: #efebff;
  --mago-roxo: #7163ff;

  /* Medidas */
  --raio-pilula: 200px;
  --raio-cartao: 24px;
  --raio-bloco: 12px;
  --largura-max: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--fonte-ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; }
[hidden] { display: none !important; }

/* Acessibilidade */
.so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--bf-neon); outline-offset: 3px; border-radius: 6px; }
.pular-conteudo {
  position: absolute; left: 12px; top: -60px; z-index: 1000;
  background: #fff; color: #000; padding: 10px 16px; border-radius: 8px; text-decoration: none;
}
.pular-conteudo:focus { top: 12px; }

/* Ícones gerados pelo núcleo (MagoNucleo.icone) */
.mg-icone { width: 1em; height: 1em; flex: none; }

/* Quem pede menos movimento no sistema recebe a página sem animações */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}