/* base.css (celular e tablet, abaixo de 1100 px) — tokens, reset e utilitários da versão de celular.
   Unidade: o desenho é feito em 390 de largura; --u = 100vw/390 com teto de 1,4 px (tablet). Tipo e espaçamento
   em calc(N * var(--u)); larguras de layout fluidas. As seções têm a altura do conteúdo (nada da geometria do
   vídeo do desktop) e a rolagem é a nativa. Ver docs/MOBILE.md. */
:root{
  --u:min(calc(100vw / 390), 1.4px);
  --c-ink:#0c0c0c; --c-apagado:#666;
  --c-limao:#9ad426; --c-cinza:#edeeeb; --c-grafite:#2a2c2c; --c-limao-claro:#d6eca2;
  --f-display:'Mona Sans','Arial Narrow',sans-serif;
  --f-marca:'Instrument Sans',sans-serif;
  --f-logo:'Albert Sans',sans-serif;
  --f-texto:'Manrope','Helvetica Neue',Arial,sans-serif;
  /* margem lateral da página e folgas da área segura (notch, barra de gestos) */
  --pad:calc(20 * var(--u));
  --safe-t:env(safe-area-inset-top, 0px); --safe-b:env(safe-area-inset-bottom, 0px);
  /* curvas do site em CSS (as mesmas do JS) */
  --e-expo:cubic-bezier(.16,1,.3,1); --e-suave:cubic-bezier(.25,.46,.45,.94);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--c-ink);color:var(--c-ink);overflow-x:clip;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  font-family:var(--f-texto);font-size:calc(15 * var(--u));line-height:1.5}
img,video,svg{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
main{position:relative;overflow-x:clip}
main > section,main > footer{position:relative}
/* a cópia do hero só existe para o loop do desktop */
#hero-copia{display:none}
/* antes do boot tudo que anima fica invisível (evita piscar o estado final antes do inicial) */
html:not(.is-ready) main,html:not(.is-ready) #cab{visibility:hidden}

/* ===== utilitários de tipo =====
   .m-d: display (Mona Sans, maiúsculas, apertada), como os títulos do desktop.
   .m-t: texto corrido (Manrope). .m-rot: rótulo pequeno em versalete espaçado. */
.m-d{font-family:var(--f-display);font-variation-settings:'wdth' 87,'wght' 500;font-weight:500;text-transform:uppercase;
  letter-spacing:-.035em;line-height:.94}
.m-t{font-family:var(--f-texto);font-weight:500;letter-spacing:-.02em}
/* .m-rot nunca abaixo de 11 px reais (em 375 de largura, 10,5u daria 10,1 px) */
.m-rot{font-family:var(--f-texto);font-weight:600;font-size:max(11px, calc(10.5 * var(--u)));letter-spacing:.09em;text-transform:uppercase}
.m-wrap{padding-left:var(--pad);padding-right:var(--pad)}
/* o quadrado verde da sinalética, em linha com um rótulo */
.m-sq{display:inline-block;width:calc(6 * var(--u));height:calc(6 * var(--u));background:var(--c-limao);vertical-align:middle;
  margin-right:calc(8 * var(--u))}

/* máscara das linhas (App.linhas): folga em cima e embaixo para acento e cedilha não saírem cortados */
.ln-mask{padding:.14em 0 .2em;margin:-.14em 0 -.2em}
/* entre duas máscaras as margens negativas colapsariam (vale a maior, não a soma): o bloco ficava mais alto
   durante a animação e a página pulava quando o SplitText devolvia o texto. A soma vai toda na de baixo. */
.ln-mask + .ln-mask{margin-top:0}
.ln-mask:not(:last-child){margin-bottom:-.34em}

/* foco visível em tudo que é tocável */
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--c-limao);outline-offset:3px}