/* Base do celular. Vale abaixo de 1100px, onde css/base.css não se aplica — as folhas de
   desktop levam media="(min-width: 1100px)" na própria tag <link>.

   NÃO HERDA NADA DO DESKTOP, de propósito. O desktop mede tudo em `--u: calc(100vw / 1224)`,
   uma unidade que encolhe com a viewport e não tem piso: numa tela de 390px o corpo de texto
   virava 4px. Foi a causa raiz da primeira tentativa de mobile, que era o desktop encolhido e
   corrigido por @media, e que ficou legível sem ficar boa. Aqui a unidade é real.

   O corte é 1100 e não 700 porque um iPad tem 768 em retrato e 1024 em paisagem, e nos dois o
   desktop entrega corpo entre 9 e 11px. A coluna limitada a 620px impede que 1100 de largura
   vire uma linha de texto atravessando a tela. */

:root{
  /* cores, fontes e a máscara do raio: os mesmos valores de css/base.css */
  --c-blue:#0A16C8;
  --c-orange:#FC5E00;
  --bg-dark:#0C0C0C;
  --bg-grey:#F5F5F5;
  --c-ink:#0C0C0C;
  --font-display:'Anybody','Michroma',sans-serif;
  --disp-wdth:104;
  --disp-wght:790;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --font-body:'Inter','Helvetica Neue',Arial,sans-serif;
  --bolt-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'><polygon points='12,0 0,14 8,14 6,24 20,9 11,9'/></svg>");

  /* medidas do celular — unidade real, sem --u */
  --m-recuo:clamp(18px,5vw,32px);
  --m-col:620px;
  --m-respiro:clamp(72px,16vw,132px);
  --m-gap:26px;
  --m-toque:44px;      /* alvo mínimo de toque; WCAG 2.5.5 pede 44 */
  --m-barra:56px;      /* altura do cabeçalho fixo */
}

/* ===== reset ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0}
body{
  background:#fff;color:var(--c-ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{background:none;border:0;font:inherit;color:inherit;cursor:pointer}
ul,ol{list-style:none}

/* ===== helpers de tipo ===== */
.display{
  font-family:var(--font-display);
  font-variation-settings:'wdth' var(--disp-wdth),'wght' var(--disp-wght);
  text-transform:uppercase;
  line-height:1;
  letter-spacing:0;
}
.mono-label{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.14em;
}
.pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--m-toque);
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:12px;font-weight:500;
  text-transform:uppercase;letter-spacing:.1em;
  padding:0 20px;
  white-space:nowrap;
}
.pill--dark{background:#111;color:#fff}

/* ===== sem WebGL =====
   js/brand/bolt.js põe html.no-bolt3d quando o contexto falha ou o navegador não tem WebGL.
   Sem isto, um aparelho fraco fica com um buraco no herói em vez de um raio. */
.no-bolt3d .m-bolt{
  background:currentColor;
  -webkit-mask:var(--bolt-mask) center/contain no-repeat;
  mask:var(--bolt-mask) center/contain no-repeat;
  aspect-ratio:20/24;
  max-width:min(52vw,300px);
}

/* ===== movimento reduzido =====
   A informação nunca depende do movimento: js/m/kit.js pinta o texto direto na cor final
   quando a preferência está ligada, e aqui as transições de CSS param junto. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ===== sweep reveal (spec C §7.1) =====
   DUPLICADO de css/base.css, por decisão consciente do spec 2026-08-28, seção 5.2: aquele
   arquivo é gatilhado por media acima de 1100 e o celular não pode herdar dele, mas a
   varredura de texto é a animação que a versão de celular mantém.

   O preço é que estas duas regras existem em dois lugares e podem divergir. A rede é a
   verificação 3 de tools/mobile_shots.js, que compara as declarações das duas e reprova se
   discordarem. Ao mexer numa, mexa na outra. */
.sweep-line{display:block; width:fit-content}
.rv-line{
  color:transparent !important;
  -webkit-text-fill-color:transparent;
  background-image:linear-gradient(90deg,
    var(--final) 0%, var(--final) 37%,
    #1020D0 50%,
    rgba(16,32,208,0) 63%, rgba(16,32,208,0) 100%);
  background-size:270% 100%;
  background-repeat:no-repeat;
  background-position-x:100%;
  -webkit-background-clip:text; background-clip:text;
}
.is-shot *{animation-play-state:paused !important}