/* ═══════════ BUBBLEZI · front de cartões ═══════════
   Paleta 1C (verde-noite com sálvia). A página manteve o ritmo de faixas
   claras com ilhas escuras; o que mudou foram as cores e a fonte de display.
   Regra do manual: uma cor de destaque só — a sálvia carrega marca e ação. */
:root{
  /* faixas de papel */
  --hu-papel:#F5F3EA;
  --hu-creme:#F1EFE4;
  --hu-creme-2:#E7E5D8;
  --hu-carta:#FFFFFF;
  --hu-borda:#DCDACE;
  --hu-borda-2:#B6C4B8;
  /* faixas de noite */
  --hu-musgo:#14231F;
  --hu-musgo-esc:#0C1714;
  --hu-musgo-lin:#2F473E;
  /* comuns */
  --hu-salvia:#7FB89C;       /* cor de ação */
  --hu-salvia-esc:#2F5F49;   /* sálvia legível sobre creme — 6,4:1 */
  --hu-areia:#E0C79A;
  --hu-tinta:#0C1714;
  --hu-tinta-2:#4E6659;
  --hu-tinta-3:#8AA294;
  --hu-vazio:#E2E6DC;
  --hu-sans:"Work Sans",system-ui,sans-serif;
  --hu-display:"Work Sans",system-ui,sans-serif;
  --hu-mono:"JetBrains Mono",ui-monospace,monospace;
  --hu-gut:clamp(20px,5vw,64px);
  --hu-r:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
#site{
  margin:0;background:var(--hu-papel);color:var(--hu-tinta);
  font-family:var(--hu-sans);font-weight:400;font-size:18px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
#site h1, #site h2, #site h3{margin:0;font-family:var(--hu-sans);letter-spacing:-.022em}
#site h1{font-size:clamp(38px,6.6vw,76px);font-weight:300;line-height:1.03}
#site h2{font-size:clamp(29px,4.4vw,50px);font-weight:300;line-height:1.08}
#site h3{font-size:21px;font-weight:500;line-height:1.28;letter-spacing:-.012em}
#site p{margin:0 0 1em}
#site a{color:inherit;text-decoration:none}
#site button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
#site :focus-visible{outline:3px solid var(--hu-salvia-esc);outline-offset:4px;border-radius:6px}
#site ::selection{background:var(--hu-salvia);color:var(--hu-musgo)}
#site .env{max-width:1160px;margin:0 auto;padding:0 var(--hu-gut)}
#site .dado{font-family:var(--hu-mono);font-variant-numeric:tabular-nums}
#site .men{font-size:17.5px;color:var(--hu-tinta-2);line-height:1.65}
#site .eti{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--hu-mono);
  font-size:12.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--hu-salvia-esc);
}
#site .eti::before{content:"";width:16px;height:1.5px;background:currentColor;border-radius:2px}
/* ── o símbolo: pálpebra em traço único ── */
#site .palpebra{display:block;line-height:0}
#site .palpebra svg{display:block;width:100%;height:auto}
/* topo */
#site header{position:sticky;top:0;z-index:40;background:rgba(245,243,234,.93);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
#site header.rolou{border-bottom-color:var(--hu-borda)}
#site .topo{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:84px}
#site .marca{display:flex;align-items:center;gap:14px}
#site .marca .palpebra{width:38px}
#site .marca b{font-size:29px;font-weight:300;letter-spacing:-.02em;line-height:1}
#site .marca i{display:block;font-family:var(--hu-sans);font-style:normal;font-weight:300;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--hu-tinta-3);margin-top:3px}
#site .menu{display:flex;align-items:center;gap:26px}
#site .menu a{font-size:16.5px;color:var(--hu-tinta-2)}
#site .menu a:hover{color:var(--hu-tinta)}
@media(max-width:940px){#site .menu .some{display:none}}
#site .bt{
  display:inline-flex;align-items:center;justify-content:center;min-height:58px;
  padding:15px 30px;border-radius:999px;background:var(--hu-salvia);color:var(--hu-musgo);
  font-weight:500;font-size:17.5px;letter-spacing:-.005em;
  transition:transform .16s,filter .16s;
}
#site .bt:hover{filter:brightness(1.05);transform:translateY(-2px)}
#site .bt.linha{background:none;color:var(--hu-tinta);box-shadow:inset 0 0 0 1.5px var(--hu-borda-2)}
#site .bt.linha:hover{background:none;box-shadow:inset 0 0 0 1.5px var(--hu-salvia-esc);color:var(--hu-salvia-esc);filter:none}
#site .bt.peq{min-height:48px;padding:11px 22px;font-size:16px}
#site .acoes{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
/* Linha sob o botao do heroi. O rotulo do botao ja diz o preco; esta diz a
   ordem das coisas, que e a duvida real de quem vai clicar. Fica fora do
   .acoes porque aquele div e flex — um <p> dentro dele viraria terceira
   coluna ao lado do botao.

   So tamanho e margem: a cor vem do .men, que e --hu-tinta-2 (5,6:1 sobre o
   papel). A tentacao aqui e usar --hu-tinta-3 para "apagar" a frase, mas
   aquele verde da 2,5:1 e reprova em texto — ele existe para linha e icone,
   nao para frase que precisa ser lida. */
#site .acoes-nota{margin:14px 0 0;font-size:15px}
/* faixas */
#site .faixa{padding:clamp(64px,10vw,124px) 0}
#site .faixa.creme{background:var(--hu-creme)}
#site .faixa.creme2{background:var(--hu-creme-2)}
#site .faixa.musgo{background:var(--hu-musgo);color:var(--hu-creme)}
#site .faixa.musgo-esc{background:var(--hu-musgo-esc);color:var(--hu-creme)}
#site .faixa.musgo h2, #site .faixa.musgo h3, #site .faixa.musgo-esc h2, #site .faixa.musgo-esc h3{color:var(--hu-creme)}
#site .faixa.musgo .men, #site .faixa.musgo-esc .men{color:var(--hu-borda-2)}
#site .faixa.musgo .eti, #site .faixa.musgo-esc .eti{color:var(--hu-salvia)}
#site .faixa.musgo .bt.linha, #site .faixa.musgo-esc .bt.linha{color:var(--hu-creme);box-shadow:inset 0 0 0 1.5px var(--hu-musgo-lin)}
#site .faixa.musgo .bt.linha:hover, #site .faixa.musgo-esc .bt.linha:hover{box-shadow:inset 0 0 0 1.5px var(--hu-salvia);color:var(--hu-salvia)}
/* O max-width vivia AQUI, no .cab, valendo 24ch. E `ch` mede o "0" da fonte do
   proprio elemento — no .cab isso e o corpo, ~17px, entao a caixa dava uns
   230px fixos. So que o h2 dentro dela e clamp(29px,4.4vw,50px): em tela larga
   ele ia a 50px e a caixa continuava nos 230px do corpo.

   Resultado: "subscription" media mais que a coluna inteira, e o
   `overflow-wrap:break-word` do fim do arquivo fazia o que foi mandado fazer —
   quebrava a palavra no meio ("subscriptio / n."). O culpado nao era ele.

   Agora o limite mora no proprio h2, entao os `ch` sao os do titulo e a caixa
   cresce junto com a letra. `balance` distribui as linhas em vez de deixar uma
   orfa embaixo. */
#site .cab{margin-bottom:clamp(30px,4vw,52px)}
#site .cab h2{margin-top:20px;max-width:15ch;text-wrap:balance}
#site .cab .men{max-width:46ch;margin-top:20px}
/* hero */
#site .hero{padding:clamp(44px,6vw,76px) 0 clamp(56px,8vw,100px);position:relative;overflow:hidden}
#site .hero-grade{display:grid;gap:clamp(36px,5vw,66px);align-items:center;position:relative;z-index:1}
@media(min-width:980px){#site .hero-grade{grid-template-columns:1.08fr .92fr}}
#site .hero h1{max-width:15ch;margin-top:22px}
#site .hero .men{max-width:44ch;font-size:clamp(18px,2.1vw,21px);margin-top:22px}
#site .hero .men b{color:var(--hu-tinta);font-weight:500}
#site .marca-dagua{
  position:absolute;right:-6%;top:-14%;width:min(58vw,660px);opacity:.055;
  pointer-events:none;z-index:0;
}
/* ── imagem do herói ──
   Sem borda, sem sombra, sem raio: o fundo da arte já é o creme da página, de
   propósito. Qualquer uma das três faria a imagem virar um cartão colado em
   cima do papel, que é o oposto do efeito. */
#site .heroi-img{position:relative;z-index:1}
#site .heroi-img img{display:block;width:100%;height:auto}

/* ── MORTO desde 01/10/2026 ──
   Daqui até `.leg-cart` era o cartão em HTML do herói, trocado pela imagem.
   Nada no site usa mais estas classes. Está aqui, e não apagado, porque trocar
   arte é decisão reversível e o cartão era acessível de um jeito que a imagem
   não é (texto de verdade, que escala e que leitor de tela lê).
   Se em abril de 2027 a imagem continuar lá, apague este bloco inteiro. */
#site .cartao-app{
  background:var(--hu-musgo);border-radius:26px;padding:32px;color:var(--hu-creme);
  box-shadow:0 34px 70px -34px rgba(12,23,20,.55);
}
#site .cartao-app .topo-c{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:20px}
#site .cartao-app .topo-c span{font-family:var(--hu-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--hu-borda-2)}
#site .cartao-app .topo-c b{font-family:var(--hu-mono);font-weight:400;font-size:15px;color:var(--hu-salvia)}
#site .janela{font-family:var(--hu-mono);font-size:clamp(28px,4.6vw,40px);font-weight:300;letter-spacing:-.02em;line-height:1.1;color:var(--hu-creme)}
/* ── o cartao do heroi, espelhando a tela Hoje ──
   Substituiu o grafico de 14 barras verticais e as tres linhas de metrica.
   Ver o comentario no index.html. */
#site .cart-frase{
  font-size:19px;font-weight:300;line-height:1.4;color:var(--hu-creme);
  margin:22px 0 0;letter-spacing:-.01em;
}
#site .cart-frase b{font-weight:400;color:var(--hu-salvia)}
#site .cart-frase b.quente{color:var(--hu-areia)}
#site .cart-nota{font-size:14.5px;color:var(--hu-borda-2);margin:10px 0 20px}

/* O espacamento vive no filho, e nao como `gap` no pai, para que
   `.cart-noite` seja uma classe de verdade e nao um nome sem regra nenhuma —
   classe inexistente nao da erro, o navegador ignora em silencio. Espelha o
   `.sem-noite` do app. */
#site .cart-noites{display:flex;flex-direction:column}
#site .cart-noite{margin-bottom:13px}
#site .cart-noite:last-child{margin-bottom:0}
#site .cart-cab{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px;font-size:14.5px;color:var(--hu-borda-2)}
#site .cart-cab span:last-child{font-family:var(--hu-mono)}
#site .cart-barra{display:flex;height:22px;border-radius:5px;overflow:hidden}
#site .cart-barra i{display:block}

#site .leg-cart{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--hu-mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--hu-borda-2);margin-top:14px}
#site .leg-cart i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:7px}
/* cartões */
#site .grade{display:grid;gap:20px}
@media(min-width:860px){#site .grade.g3{grid-template-columns:repeat(3,1fr)}}
#site .cartao{background:var(--hu-carta);border:1px solid var(--hu-borda);border-radius:var(--hu-r);padding:32px 30px}
#site .cartao .hora{
  display:inline-flex;align-items:center;font-family:var(--hu-mono);font-size:15px;font-weight:500;
  background:var(--hu-creme);color:var(--hu-salvia-esc);padding:8px 14px;border-radius:8px;margin-bottom:20px;
}
#site .cartao h3{margin-bottom:11px}
#site .cartao p:last-child{margin-bottom:0}
#site .cartao.noturno{background:var(--hu-musgo);border-color:var(--hu-musgo-lin);color:var(--hu-creme)}
#site .cartao.noturno h3{color:var(--hu-creme)}
#site .cartao.noturno .men{color:var(--hu-borda-2)}
#site .cartao.noturno .hora{background:rgba(127,184,156,.15);color:var(--hu-salvia)}
/* calculadora */
/* Dois grids aninhados: .calc por fora, .campos por dentro. O `min-width:auto`
   precisa ser desarmado nos DOIS — soltar so o de dentro nao resolve, porque a
   coluna de fora continua sendo dimensionada pelo conteudo minimo e empurra a
   linha inteira para fora da tela. Foi o que aconteceu na primeira tentativa. */
#site .calc{display:grid;gap:clamp(24px,4vw,46px);grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){#site .calc{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
#site .calc > *{min-width:0}
/* `minmax(0,1fr)` e nao `1fr`, e `min-width:0` no .campo — os dois dizem a
   mesma coisa e os dois sao necessarios.

   Item de grid nasce com `min-width:auto`, o que significa "nao encolha abaixo
   do tamanho minimo intrinseco do conteudo". Para os dois campos `type=number`
   isso nao incomoda: um `<input>` de numero tem minimo pequeno. Ja o
   `type=time` e desenhado pelo sistema operacional, com o seletor nativo de
   HH:MM (e AM/PM no iPhone) — a 20px em fonte mono, o minimo intrinseco dele
   passa da largura util de um celular. O grid entao obedecia ao conteudo em vez
   de obedecer a tela, e a linha inteira vazava para fora.

   Por isso so os dois primeiros campos quebravam: era o tipo do input, nao o
   texto do rotulo nem o CSS de largura, que ja era `width:100%`. */
#site .campos{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media(min-width:540px){#site .campos{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
#site .campo{min-width:0}
#site .campo span{display:block;font-size:15px;color:var(--hu-tinta-2);margin-bottom:8px}
#site .campo input{
  width:100%;max-width:100%;min-width:0;
  min-height:60px;padding:12px 16px;border-radius:12px;
  background:var(--hu-carta);border:1.5px solid var(--hu-borda);
  font-family:var(--hu-mono);font-size:20px;color:var(--hu-tinta);
}
#site .campo input:focus{border-color:var(--hu-salvia-esc)}

/* iOS (todo navegador no iPhone e WebKit, Chrome incluso) desenha `type=time`
   como controle nativo, com DOM interno proprio. Enquanto a aparencia nativa
   estiver ligada, esse controle carrega uma largura intrinseca que `width:100%`
   nao vence — ele so obedece depois do `appearance:none`.
   As duas pseudo-classes abaixo tiram a margem e o padding que o WebKit poe no
   miolo do campo, e que sobravam para fora da borda arredondada. */
#site .campo input[type="time"]{-webkit-appearance:none;appearance:none}
#site .campo input[type="time"]::-webkit-date-and-time-value{text-align:left;margin:0}
#site .campo input[type="time"]::-webkit-datetime-edit{padding:0}
#site .resultado{background:var(--hu-carta);border:1px solid var(--hu-borda);border-radius:var(--hu-r);padding:34px 32px}
#site .numerao{font-family:var(--hu-mono);font-size:clamp(58px,10vw,90px);font-weight:300;line-height:1;letter-spacing:-.045em;margin:8px 0 0}
#site .leitura{display:flex;justify-content:space-between;gap:14px;padding:14px 0;border-top:1px solid var(--hu-borda);font-size:17px}
#site .leitura b{font-family:var(--hu-mono);font-weight:400}
/* citação */
#site .cit{max-width:32ch;margin:0 auto;text-align:center}
#site .cit .palpebra{width:56px;margin:0 auto 26px}
#site .cit blockquote{
  margin:0 0 22px;font-family:var(--hu-display);font-weight:300;font-style:normal;
  font-size:clamp(26px,4.4vw,42px);line-height:1.28;letter-spacing:-.015em;
}
#site .cit .quem{font-family:var(--hu-mono);font-size:14.5px;color:var(--hu-tinta-3);margin:0}
/* fases do programa */
#site .fases{display:grid;gap:20px}
@media(min-width:820px){#site .fases{grid-template-columns:1fr 1fr}}
#site .fase{background:var(--hu-carta);border:1px solid var(--hu-borda);border-radius:var(--hu-r);padding:32px 30px}
#site .fase.longa{background:var(--hu-musgo);border-color:var(--hu-musgo);color:var(--hu-creme)}
#site .fase.longa h3{color:var(--hu-creme)}
#site .fase.longa .men{color:var(--hu-borda-2)}
#site .fase .selo{
  display:inline-flex;align-items:center;font-family:var(--hu-mono);font-size:12.5px;
  letter-spacing:.12em;text-transform:uppercase;padding:7px 13px;border-radius:999px;
  background:var(--hu-creme);color:var(--hu-salvia-esc);margin-bottom:18px;
}
#site .fase.longa .selo{background:rgba(127,184,156,.16);color:var(--hu-salvia)}
#site .fase h3{margin-bottom:11px}
#site .fase p:last-child{margin-bottom:0}
/* planos */
#site .planos{display:grid;gap:20px}
#site .planos{max-width:560px}
#site .plano{background:var(--hu-carta);border:1px solid var(--hu-borda);border-radius:24px;padding:36px 32px;display:flex;flex-direction:column}
#site .plano.sim{background:var(--hu-musgo);border-color:var(--hu-musgo);color:var(--hu-creme)}
#site .plano.sim h3{color:var(--hu-creme)}
#site .plano.sim .men{color:var(--hu-borda-2)}

/* ── card de preço, versão 03/09/2026 ──
   O `.valor` de 48px em mono saiu. Ele era o maior elemento do card e o
   primeiro que o olho batia: vendia a conta, não o produto. Agora o preço é
   uma linha de apoio de 14px dentro do `.plano-depois`, e quem carrega o peso
   visual é `.plano-nome`.

   Sobre as cores neste bloco: o card é escuro (--hu-musgo), então
   --hu-tinta-3 passa aqui com 6:1. O MESMO verde sobre o papel claro dá 2,5:1
   e reprova — não copie estas regras para fora do `.plano.sim`. */
#site .plano-selo{
  align-self:flex-start;background:var(--hu-salvia);color:var(--hu-musgo-esc);
  font-size:13px;font-weight:500;padding:7px 15px;border-radius:999px;margin:0 0 22px;
}
/* O h3 do card vira a linha de marca, pequena: quem tem que crescer é o nome
   do plano logo abaixo. Sem isto o h3 de 21px competiria com ele. */
#site .plano.sim h3{font-size:16px;font-weight:400;color:var(--hu-creme)}
#site .plano-nome{
  font-size:clamp(27px,3.4vw,32px);font-weight:500;line-height:1.1;
  letter-spacing:-.022em;color:var(--hu-salvia);margin:6px 0 16px;
}
#site .plano-oferta{font-size:18px;font-weight:500;color:var(--hu-creme);margin:0 0 5px}
#site .plano-depois{font-size:14.5px;color:var(--hu-borda-2);margin:0}
#site .plano-nota{font-size:14.5px;color:var(--hu-borda-2);text-align:center;margin:16px 0 0}
#site .plano-nota.fraca{font-size:13.5px;color:var(--hu-tinta-3);margin-top:8px}
#site .itens{list-style:none;padding:0;margin:26px 0 30px;flex:1;display:flex;flex-direction:column;gap:14px}
#site .itens li{display:flex;gap:13px;align-items:flex-start;font-size:17px;line-height:1.5}
#site .itens li .palpebra{width:20px;flex:none;margin-top:1px}
/* dúvidas */
#site details{background:var(--hu-carta);border:1px solid var(--hu-borda);border-radius:16px;margin-bottom:12px;overflow:hidden}
#site summary{
  list-style:none;cursor:pointer;padding:24px 28px;min-height:68px;display:flex;
  justify-content:space-between;gap:20px;align-items:center;font-size:19px;font-weight:500;letter-spacing:-.015em;
}
#site summary::-webkit-details-marker{display:none}
#site summary::after{content:"+";font-family:var(--hu-mono);color:var(--hu-salvia-esc);font-size:24px;flex:none;line-height:1}
#site details[open] summary::after{content:"–"}
#site .resp{padding:0 28px 28px;max-width:64ch;font-size:17.5px;color:var(--hu-tinta-2)}
#site footer{padding:46px 0 62px;background:var(--hu-musgo-esc);color:var(--hu-tinta-3);font-size:16px}
#site .rod{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:flex-start}
#site .rod nav{display:flex;gap:24px;flex-wrap:wrap}
#site .rod a:hover{color:var(--hu-creme)}
#site .rod .marca b{color:var(--hu-creme)}
#site .rod .marca i{color:var(--hu-salvia);letter-spacing:.2em}
#site .legal{margin-top:32px;padding-top:26px;border-top:1px solid var(--hu-musgo-lin);font-size:15px;max-width:70ch;line-height:1.65;color:var(--hu-tinta-3)}
/* ───────── telefone ─────────
   A folha e mobile-first, mas todas as excecoes eram `min-width` — nada
   apertava o layout para baixo. Numa tela de 390px o `.env` deixa 350px uteis,
   e duas coisas nao cabiam:

   1. O TOPO pedia ~399px: simbolo (38) + logotipo em 29px (~120) + a assinatura
      "The world gets quieter from here" em 11,5px com .14em de espacamento
      (~233) + o botao Sign in (~96). O botao era o ultimo da fila e quebrava.
   2. A JANELA do cartao, "11:40 PM → 7:00 AM" em mono 28px, mede ~302px dentro
      de um cartao com 286px uteis. Vazava 16px.

   O resto aqui e folga: padding de 32px e generoso em 1160px e apertado em 350. */
@media(max-width:620px){
  /* topo */
  #site .topo{min-height:68px;gap:12px}
  #site .marca{gap:10px}
  #site .marca .palpebra{width:30px}
  #site .marca b{font-size:23px}
  /* A assinatura sai do topo, e nao encolhe: em 11,5px ela ja esta no limite do
     legivel, e o nome sozinho identifica a marca. Ela continua no rodape. */
  #site header .marca i{display:none}
  /* so o botao curto do topo e travado contra quebra; os CTA longos precisam
     poder quebrar num telefone estreito */
  #site .bt.peq{padding:10px 16px;font-size:15px;min-height:44px;white-space:nowrap}

  /* cartao do heroi */
  #site .cartao-app{padding:22px 20px;border-radius:20px}
  #site .janela{font-size:clamp(21px,7.4vw,30px)}

  /* caixas */
  #site .cartao,#site .fase{padding:24px 22px}
  #site .plano{padding:26px 22px}
  #site .resultado{padding:26px 22px}

  /* Campos da calculadora num telefone. O `minmax(0,1fr)` la em cima ja impede
     o vazamento; isto e folga em cima da folga, para o seletor nativo de hora
     nao ficar espremido contra a borda num aparelho de 320px. */
  #site .campo input{font-size:18px;padding:12px 14px;min-height:56px}
  #site summary{padding:20px;min-height:60px;font-size:17.5px;gap:14px}
  #site .resp{padding:0 20px 22px;font-size:16.5px}

  /* rodape: a assinatura fica, mas com .2em de espacamento ela mede ~246px e
     num aparelho de 320px estoura os 280px uteis */
  #site .rod .marca i{letter-spacing:.1em;font-size:10.5px}
}

/* Rede de seguranca, em qualquer largura: palavra longa dentro de titulo grande
   — um e-mail, uma URL colada por engano — quebrava a caixa em vez da linha. */
#site h1,#site h2,#site h3,#site blockquote,#site .janela{overflow-wrap:break-word}

#site .rev{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
#site .rev.vis{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}
#site .rev{opacity:1;transform:none}
html{scroll-behavior:auto}}

/* ── logotipo Bubblezi ──
   Uma palavra so, minuscula, com "zi" na salvia. E o unico lugar da pagina
   onde a cor de destaque toca o nome. */
#site .logotipo{font-weight:300;letter-spacing:-.015em;font-style:normal}
#site .logotipo em{color:var(--hu-salvia-esc);font-weight:500;font-style:normal}
#site .faixa.musgo .logotipo em,
#site .faixa.musgo-esc .logotipo em,
#site footer .logotipo em{color:var(--hu-salvia)}
#site .palpebra svg{display:block;width:100%;height:auto}