/* ======================================================================
   ENTRADA — a primeira coisa que alguem ve do MENTRE.

   E a unica tela do app que e vitrine, entao ela se comporta como uma: hero
   de tela cheia sobre o ceu (que reage ao mouse aqui tambem), e paineis que
   se revelam na rolagem, cada um com uma miniatura desenhada do proprio app
   — conversa, mini-app, voz, agenda, dinheiro, documento, rotina, casa,
   biblioteca, privacidade. As miniaturas sao ilustracao, com exemplos
   visivelmente genericos; nenhum dado de ninguem aparece aqui.

   Movimento, em tres camadas, todas so com transform/opacity:
   - a rolagem (--rolagem, posta pelo ligarEntrada com rAF): o hero se afasta
     em camadas (a bussola mais rapido, o texto mais devagar);
   - a revelacao (.revela/.visto, IntersectionObserver): cada painel entra
     uma vez e os filhos sobem em escada;
   - as miniaturas VIVAS (.mock-vivo/.em-cena): contam a historia em laco,
     so enquanto estao na tela. Sem JS, sem animacao ou com movimento
     reduzido, tudo nasce parado no estado FINAL — o HTML ja e a pagina.
   A inclinacao 3D dos cartoes com o ponteiro e do modulo de efeitos
   (static/src/efeitos/inclinacao.js): basta a classe .efx-inclinar.
   ====================================================================== */

/* overflow-x:hidden: as vitrines (.mostra) tem 382px de conteudo numa caixa de
   335 no celular, e isso deixava a pagina de entrada deslizar 27px de lado
   antes mesmo do login. Mesmo tratamento do <main> do app. */
#login{text-align:left;padding:0 0 calc(40px + env(safe-area-inset-bottom));scroll-behavior:smooth;overflow-x:hidden}
/* Foco visivel em tudo que se navega pelo teclado: o aro de ouro sobre o ceu.
   O outline segue o raio do proprio elemento; forcar um raio aqui (id +
   pseudo-classe) vencia o 999px das pilulas Entrar e Google, que viravam
   retangulo enquanto focadas. So os links de texto ganham canto. */
#login a:focus-visible,#login summary:focus-visible{outline:2px solid var(--ouro-claro);outline-offset:3px}
#login .entrada-rolar:focus-visible,#login .rodape-vitrine a:focus-visible{border-radius:8px}

/* barra fixa */
.entrada-barra{position:sticky;top:calc(12px + env(safe-area-inset-top));z-index:5;width:min(1120px,calc(100% - 24px));margin:12px auto 0;
    display:flex;align-items:center;justify-content:space-between;padding:9px 10px 9px 20px;border-radius:18px;
    background:var(--vidro);-webkit-backdrop-filter:var(--desfoque);backdrop-filter:var(--desfoque);
    border:1px solid var(--vidro-borda);box-shadow:var(--vidro-brilho),0 20px 50px -26px rgba(0,0,0,.8)}
/* No hero a barra e so o botao Entrar flutuando no ceu. O vidro mora numa
   camada propria que aparece com a rolagem, junto com o nome: uma lamina
   longa e vazia no topo da primeira tela competia com o hero sem dizer nada. */
.entrada-barra{isolation:isolate;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;
    border-color:transparent;box-shadow:none}
/* A barra da entrada segue o cabecalho do app: nevoa, e nao caixa. A lamina
   de vidro pousada no topo era o unico retangulo com moldura na pagina
   inteira, e brigava com o hero logo abaixo dela. */
.entrada-barra::before{content:'';position:absolute;inset:-16px -12px -30px;z-index:-1;pointer-events:none;
    border-radius:32px;filter:blur(12px);
    background:radial-gradient(150% 230% at 50% -40%,rgba(6,10,14,.97),rgba(6,10,14,.82) 58%,rgba(6,10,14,0) 88%);
    opacity:calc(0.25 + var(--rolagem,0) / 420)}
/* O nome so aparece na barra depois que o nome gigante do hero sai de cena:
   os dois juntos na primeira tela eram o mesmo MENTRE escrito duas vezes. */
.entrada-barra-marca{font-family:var(--f-titulo);font-size:1.05rem;letter-spacing:.36em;color:var(--ouro-claro);
    opacity:calc((var(--rolagem,0) - 260) / 160)}
.entrada-barra-entrar{padding:8px 18px;border-radius:999px;border:1px solid var(--fio-ouro);color:var(--pergaminho);
    text-decoration:none;font-size:.86rem;font-weight:500;background:rgba(209,171,116,.1);
    box-shadow:inset 0 1px 0 rgba(236,231,218,.08),inset 0 -1px 0 rgba(0,0,0,.3);
    transition:background .3s var(--suave),transform .4s var(--mola)}
.entrada-barra-entrar:hover{background:rgba(209,171,116,.2)}
.entrada-barra-entrar:active{transform:translateY(1px) scale(.98)}

/* hero */
.entrada-hero{position:relative;min-height:calc(100svh - 70px);display:flex;flex-direction:column;align-items:center;
    justify-content:center;text-align:center;padding:40px 20px 110px}
.entrada-hero-miolo{display:flex;flex-direction:column;align-items:center;
    transform:translateY(calc(var(--rolagem,0) * -.22px));opacity:calc(1 - var(--rolagem,0) / 620)}
/* Paralaxe por camada: `translate` e uma propriedade separada de `transform`,
   entao a animacao de entrada (que segura o ultimo quadro) nao a engole. A
   bussola, mais perto, foge mais rapido; o subtitulo e os selos, mais longe,
   ficam um pouco para tras. */
.entrada-hero .bussola-palco-hero{translate:0 calc(var(--rolagem,0) * -.14px)}
.entrada-sobre{translate:0 calc(var(--rolagem,0) * -.06px)}
.entrada-sub,.entrada-selos{translate:0 calc(var(--rolagem,0) * .07px)}
.entrada-hero .logo-login{width:116px;height:116px;margin-bottom:28px;animation:none;
    filter:drop-shadow(0 0 46px rgba(209,171,116,.5))}
.entrada-sobre{margin:0;font-size:.72rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--ouro-claro)}
.entrada-nome{font-size:clamp(3.6rem,12.5vw,9.8rem);letter-spacing:.2em;margin:14px -.2em 0 0;line-height:.95;
    animation:sia-lustro 8s cubic-bezier(.42,0,.32,1) 2.2s infinite}
.entrada-tese{margin:22px 0 12px;font-family:var(--f-titulo);font-style:italic;font-weight:400;
    font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1.15;color:var(--pergaminho)}
.entrada-sub{margin:0;max-width:56ch;color:var(--texto-2);font-size:1.06rem;line-height:1.65;text-wrap:balance}
/* Tres selos: o que ha de novo, em uma linha, antes de rolar. Pilulas de
   vidro com o relevo curto das pilulas do app. */
.entrada-selos{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.entrada-selos li{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 11px;border-radius:999px;
    font-size:.8rem;color:var(--texto-2);background:var(--vidro);border:1px solid var(--vidro-borda);
    box-shadow:inset 0 1px 0 rgba(236,231,218,.08),inset 0 -1px 0 rgba(0,0,0,.35),0 8px 22px -12px rgba(0,0,0,.9)}
.entrada-selos .ic{width:15px;height:15px;color:var(--ouro-claro)}
/* O botao de criar conta vive no FIM da pagina. Quem chega pela primeira vez
   passa pelo que o app faz antes de decidir; quem ja tem conta usa o "Entrar"
   discreto do topo, que vai direto para o login. */
#login #botoesLogin{margin-top:6px;display:flex;justify-content:center}
#login .btn-google-oficial{border-radius:999px;min-width:0;padding:8px 30px 8px 8px;height:58px;font-size:1rem;border:0;color:#0b1117;
    background:linear-gradient(180deg,#f0d3a0,#b08d57);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(90,60,20,.42),0 1px 0 rgba(0,0,0,.4),0 0 60px -12px rgba(209,171,116,.75);
    transition:transform .5s var(--mola),box-shadow .5s var(--suave),filter .3s}
#login .btn-google-oficial:hover{transform:translateY(-2px);filter:brightness(1.06);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(90,60,20,.42),0 1px 0 rgba(0,0,0,.4),0 0 80px -10px rgba(209,171,116,.9)}
#login .btn-google-oficial:active{transform:translateY(1px) scale(.985);box-shadow:inset 0 2px 5px rgba(60,40,10,.55),inset 0 -1px 0 rgba(255,255,255,.15)}
#login .btn-google-oficial .selo-google{width:42px;height:42px}
.entrada-rolar{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;
    color:var(--texto-3);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;text-decoration:none}
.entrada-rolar i{display:block;width:1px;height:46px;background:linear-gradient(to bottom,rgba(209,171,116,.9),transparent);
    transform-origin:top;animation:descer 2.6s var(--suave) infinite}
@keyframes descer{0%{transform:scaleY(0);opacity:0}35%{opacity:1}100%{transform:scaleY(1);opacity:0}}

/* Entrada em camadas: a bussola, depois o rotulo, o nome, a tese, o
   subtitulo e os selos, cada um um pouco depois do anterior. O desfoque
   inicial e curto e acontece uma vez so, na primeira pintura. */
.entrada-hero .logo-login{animation:entraHero 1.4s var(--suave) both}
.entrada-sobre{animation:entraHero 1.2s var(--suave) .25s both}
.entrada-nome{animation:entraHero 1.4s var(--suave) .4s both,sia-lustro 8s cubic-bezier(.42,0,.32,1) 2.4s infinite}
.entrada-tese{animation:entraHero 1.2s var(--suave) .7s both}
.entrada-sub{animation:entraHero 1.2s var(--suave) .85s both}
.entrada-selos{animation:entraHero 1.2s var(--suave) 1.05s both}
.entrada-rolar{animation:aparece 1s ease 1.9s both}
@keyframes entraHero{from{opacity:0;filter:blur(16px);transform:translateY(24px)}to{opacity:1;filter:none;transform:none}}
@keyframes aparece{from{opacity:0}to{opacity:1}}

/* ------------------------------------------------------------ paineis */
.entrada-mostra{width:min(1120px,calc(100% - 40px));margin:0 auto;display:flex;flex-direction:column;
    gap:clamp(100px,16vh,180px);padding:70px 0 30px}
.mostra{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(36px,6vw,96px);align-items:center}
.mostra.invertida .mostra-texto{order:2}
.mostra-sobre{margin:0;font-size:.7rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--ouro-claro)}
.mostra h2,.nativos-titulo,.entrada-ceu h2{margin:14px 0 20px;font-family:var(--f-titulo);font-weight:400;font-size:clamp(2.4rem,4.8vw,4rem);line-height:1.02;
    letter-spacing:-.022em;text-wrap:balance;
    background:linear-gradient(180deg,#fbf7ee 25%,#d9c39a 120%);-webkit-background-clip:text;background-clip:text;color:transparent}
.mostra-texto p:last-child{margin:0;max-width:44ch;color:var(--texto-2);font-size:1.08rem;line-height:1.68}
.mostra-visual{position:relative}
.mostra-visual::before{content:'';position:absolute;inset:-14%;z-index:-1;
    background:radial-gradient(50% 50% at 50% 50%,rgba(209,171,116,.17),transparent 70%)}

/* A miniatura e uma placa: luz no alto a esquerda, fio de luz em cima, breu
   embaixo e uma sombra curta (relevo.css). */
.mock{position:relative;border-radius:28px;padding:26px;border:1px solid var(--vidro-borda);
    background:linear-gradient(135deg,rgba(236,231,218,.05),rgba(236,231,218,0) 42%),linear-gradient(180deg,rgba(24,36,47,.9),rgba(10,15,20,.94));
    box-shadow:inset 0 1px 0 rgba(236,231,218,.1),inset 1px 0 0 rgba(236,231,218,.045),inset 0 -1px 0 rgba(0,0,0,.42),
               0 1px 0 rgba(0,0,0,.35),0 30px 70px -40px rgba(0,0,0,1)}
.mock::after{content:'';position:absolute;left:12%;right:12%;top:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(209,171,116,.6),transparent)}

.mock-chat{display:flex;flex-direction:column;gap:18px}
.mock-eu{align-self:flex-end;max-width:82%;padding:12px 18px;border-radius:22px;color:var(--pergaminho);font-size:.95rem;line-height:1.5;
    background:linear-gradient(180deg,rgba(209,171,116,.18),rgba(176,141,87,.07));border:1px solid rgba(209,171,116,.26);
    box-shadow:inset 0 1px 0 rgba(236,231,218,.08),inset 0 -1px 0 rgba(0,0,0,.3)}
.mock-ele{display:flex;gap:12px;align-items:flex-start;color:var(--pergaminho);font-size:.98rem;line-height:1.65}
.mock-ele b{color:var(--ouro-luz);font-weight:600}
.mock-estrela{flex:0 0 auto;width:14px;height:14px;margin-top:.45em;border-radius:50%;
    background:radial-gradient(circle,#fff3d6 0 12%,rgba(239,214,166,.75) 20%,rgba(209,171,116,.22) 42%,transparent 70%)}
.mock-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;font-size:.8rem;color:var(--pergaminho);
    background:rgba(236,231,218,.05);border:1px solid var(--fio-forte);box-shadow:inset 0 1px 0 rgba(236,231,218,.06)}
.mock-chip i{width:7px;height:7px;border-radius:50%;background:var(--cor,var(--ouro));box-shadow:0 0 10px 1px var(--cor,var(--ouro))}
.mock-linha-chips{display:flex;flex-wrap:wrap;gap:8px;margin-left:26px}
/* botao dourado das miniaturas: a mesma placa de metal com bisel do app */
.mock-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;height:32px;padding:0 16px;border-radius:999px;
    font-size:.8rem;font-weight:600;color:#0b1117;white-space:nowrap;background:linear-gradient(180deg,#f0d3a0,#b08d57);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(90,60,20,.42),0 1px 0 rgba(0,0,0,.4),0 8px 20px -10px rgba(209,171,116,.75)}
/* linha "objeto": icone num selo, nome e legenda, acao a direita */
.mock-app-cartao,.mock-rotina,.mock-bib-item,.mock-priv-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;
    background:rgba(236,231,218,.04);border:1px solid var(--fio-forte);box-shadow:inset 0 1px 0 rgba(236,231,218,.05)}
.mock-app-cartao > .ic,.mock-rotina > .ic,.mock-bib-item > .ic,.mock-priv-item > .ic{flex:0 0 auto;width:36px;height:36px;padding:8px;box-sizing:border-box;
    border-radius:11px;color:var(--ouro-luz);background:rgba(209,171,116,.14);border:1px solid var(--fio-ouro)}
.mock-app-cartao > span:not(.mock-btn),.mock-rotina > span,.mock-bib-item > span:not(.mock-btn),.mock-priv-item > span{flex:1;min-width:0}
.mock-app-cartao b,.mock-rotina b,.mock-bib-item b,.mock-priv-item b{display:block;color:var(--pergaminho);font-weight:600;font-size:.92rem;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-app-cartao small,.mock-rotina small,.mock-bib-item small,.mock-priv-item small{display:block;color:var(--texto-3);font-size:.76rem;line-height:1.35}

/* mini-app: o chat passa pelos passos reais (os mesmos textos do sia_core) */
.mock-passos{display:flex;flex-direction:column;gap:12px;margin-left:26px}
.mock-passo{position:relative;padding-left:28px;font-size:.88rem;line-height:1.4;color:var(--texto-2)}
.mock-andando,.mock-passo .mock-feito{position:absolute;left:0;top:.7em;width:18px;height:18px;translate:0 -50%}
.mock-andando{border-radius:50%;border:1.6px solid rgba(239,214,166,.22);border-top-color:var(--ouro-luz);opacity:0}
.mock-passo .mock-feito{color:var(--ouro-luz)}
.mock-app-cartao{margin-left:26px}

/* voz: a onda pulsa; as falas sao transcritas em pilulas com o microfone */
.mock-onda{display:flex;align-items:center;gap:4px;height:26px;margin-left:26px}
.mock-onda i{display:block;width:4px;height:100%;border-radius:3px;background:linear-gradient(180deg,#f6dcaa,#b08d57);
    transform:scaleY(.35);transform-origin:center}
.mock-onda i:nth-child(2n){transform:scaleY(.7)}
.mock-onda i:nth-child(4){transform:scaleY(1)}
.mock-onda span{margin-left:10px;font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ouro-claro)}
.mock-falado{padding-left:34px;position:relative;font-style:italic}
.mock-falado::before{content:'';position:absolute;left:14px;top:50%;width:9px;height:9px;translate:0 -50%;border-radius:50%;
    background:var(--ouro-luz);box-shadow:0 0 10px 1px rgba(239,214,166,.7)}

/* agenda */
.mock-agenda{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;padding:0;overflow:hidden;background:var(--fio)}
.mock-dia{background:rgba(9,14,19,.92);padding:14px 10px 18px;min-height:190px;display:flex;flex-direction:column;gap:8px;
    box-shadow:inset 0 1px 0 rgba(236,231,218,.035),inset 0 -1px 0 rgba(0,0,0,.28)}
.mock-dia b{display:flex;justify-content:space-between;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-3)}
.mock-dia b span{font-size:.95rem;letter-spacing:0;color:var(--pergaminho)}
.mock-dia.hoje{background:linear-gradient(180deg,rgba(209,171,116,.14),rgba(9,14,19,.92) 70%);
    box-shadow:inset 0 0 0 1px rgba(209,171,116,.45),inset 0 1px 0 rgba(236,231,218,.08)}
.mock-dia.hoje b span{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;color:#0b1117;
    background:linear-gradient(180deg,#f0d3a0,#b08d57);box-shadow:0 0 18px -2px rgba(209,171,116,.8)}
.mock-ev{--cor:#3b82f6;padding:8px 9px;border-radius:10px;font-size:.74rem;line-height:1.3;color:var(--pergaminho);
    background:color-mix(in srgb,var(--cor) 18%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(0,0,0,.25)}
.mock-ev small{display:flex;align-items:center;gap:5px;color:var(--texto-2);font-size:.66rem;margin-bottom:2px}
.mock-ev small::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--cor);box-shadow:0 0 8px var(--cor)}

/* financas */
.mock-dre{display:flex;flex-direction:column}
.mock-dre-cab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.mock-dre-cab b{font-weight:600;color:var(--pergaminho)}
.mock-dre-cab span{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-3)}
.mock-dre-linha{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--fio);
    color:var(--texto-2);font-size:.95rem;font-variant-numeric:tabular-nums}
.mock-dre-linha > span:last-child{color:var(--pergaminho);font-weight:500}
.mock-dre-linha i{font-style:normal;color:var(--texto-3);display:inline-block;width:18px}
.mock-dre-total{border-top-color:var(--fio-forte);padding-top:16px;margin-top:4px;color:var(--pergaminho);font-weight:600}
.mock-dre-total > span:last-child{font-size:2.3rem;font-weight:500;letter-spacing:-.035em;
    background:linear-gradient(180deg,#f6dcaa,#b08d57);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Enquanto o odometro roda, os algarismos vivem numa fita composta
   (will-change:transform, movimento.css) que nao entra no recorte de texto
   do pai: com o color:transparent herdado, sumiriam. Cada algarismo pinta
   o proprio gradiente, igual ao do total. */
.mock-dre-total .efx-odo-fita b{background:linear-gradient(180deg,#f6dcaa,#b08d57);-webkit-background-clip:text;background-clip:text;color:transparent}
/* As barras sao cilindros (luz em cima, sombra embaixo) e crescem do chao
   quando o painel aparece: scaleY, nunca height. */
.mock-barras{display:flex;align-items:flex-end;gap:7px;height:54px;margin-top:20px}
.mock-barras i{flex:1;height:100%;border-radius:4px 4px 1px 1px;transform:scaleY(var(--h,.5));transform-origin:bottom;
    background:linear-gradient(180deg,rgba(239,214,166,.85),rgba(176,141,87,.08));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.mock-dia b em,.mock-dre-linha em{font-style:normal}

/* documentos */
.mock-doc{display:flex;flex-direction:column;gap:18px}
.mock-arquivo{display:flex;align-items:center;gap:14px;padding:14px;border-radius:18px;background:rgba(236,231,218,.04);border:1px solid var(--fio);
    box-shadow:inset 0 1px 0 rgba(236,231,218,.05)}
.mock-arquivo-ic{width:48px;height:58px;border-radius:10px;position:relative;flex:0 0 auto;
    background:linear-gradient(180deg,rgba(209,171,116,.3),rgba(176,141,87,.08));border:1px solid rgba(209,171,116,.35)}
.mock-arquivo-ic::after{content:'';position:absolute;left:10px;right:10px;top:16px;height:22px;
    background:repeating-linear-gradient(to bottom,rgba(239,214,166,.6) 0 2px,transparent 2px 6px)}
.mock-arquivo b{display:block;color:var(--pergaminho);font-weight:600;font-size:.95rem}
.mock-arquivo small{color:var(--texto-3);font-size:.78rem}
.mock-resumo{color:var(--texto-2);font-size:.95rem;line-height:1.65;padding-left:14px;border-left:2px solid rgba(209,171,116,.4)}

/* rotinas e briefing */
.mock-briefing{display:flex;flex-direction:column;gap:16px}
.mock-brief-cab{display:flex;align-items:center;gap:10px}
.mock-brief-cab .mock-estrela{margin:0}
.mock-brief-cab b{color:var(--pergaminho);font-weight:600;font-size:.95rem}
.mock-brief-cab > span:last-child{margin-left:auto;font-size:.72rem;letter-spacing:.14em;color:var(--texto-3);font-variant-numeric:tabular-nums}
.mock-brief-texto{margin:0;color:var(--pergaminho);font-size:.98rem;line-height:1.65}
.mock-brief-texto b{color:var(--ouro-luz);font-weight:600}

/* casa: o que pode e o que nunca, lado a lado */
.mock-casa{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}
.mock-casa-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.mock-casa-rot{font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ouro-claro);margin-bottom:4px}
.mock-casa-col.nunca .mock-casa-rot{color:var(--texto-3)}
.mock-casa-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;font-size:.86rem;color:var(--pergaminho);
    background:rgba(236,231,218,.04);border:1px solid var(--fio);box-shadow:inset 0 1px 0 rgba(236,231,218,.05);min-width:0}
.mock-casa-item span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-casa-item i{position:relative;flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--texto-3)}
.mock-casa-item em{font-style:normal;font-size:.7rem;color:var(--ouro-luz)}
.mock-casa-luz i{background:var(--ouro-luz);box-shadow:0 0 10px 1px rgba(239,214,166,.7)}
.mock-casa-luz i::after{content:'';position:absolute;inset:-6px;border-radius:50%;background:radial-gradient(circle,rgba(239,214,166,.55),transparent 70%)}
.mock-casa-col.nunca .mock-casa-item{color:var(--texto-3);border-style:dashed}
.mock-casa-col.nunca .mock-casa-item i{background:transparent;border:1.5px solid rgba(224,82,79,.7)}
.mock-casa-pe{grid-column:1 / -1;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px;padding-top:14px;border-top:1px solid var(--fio)}
.mock-casa-pe small{color:var(--texto-3);font-size:.76rem;min-width:0}
.mock-btn-parar{color:var(--pergaminho);background:rgba(224,82,79,.14);border:1px solid rgba(224,82,79,.5);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.3)}

/* biblioteca */
.mock-bib{display:flex;flex-direction:column;gap:10px}
.mock-bib-acoes{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px;padding-top:14px;border-top:1px solid var(--fio)}
.mock-bib-acoes span{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--texto-2)}
.mock-bib-acoes .ic{width:15px;height:15px;color:var(--ouro-claro)}
.mock-bib-acoes i{font-style:normal}

/* privacidade */
.mock-priv{display:flex;flex-direction:column;gap:10px}

/* ------------------------------------------------------------ apps nativos */
.entrada-nativos{text-align:center}
.nativos-titulo{margin:14px auto 12px;font-size:clamp(2rem,4vw,3.2rem)}
.nativos-texto{margin:0 auto 30px;max-width:52ch;color:var(--texto-2);font-size:1.04rem;line-height:1.6}
.nativos-fila{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;text-align:left}
@media (max-width:900px){.nativos-fila{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.nativos-fila{grid-template-columns:1fr}}
.nativo{position:relative;padding:22px 20px 20px;border-radius:22px;border:1px solid var(--vidro-borda);
    background:linear-gradient(135deg,rgba(236,231,218,.045),rgba(236,231,218,0) 42%),var(--lamina);
    box-shadow:inset 0 1px 0 rgba(236,231,218,.1),inset 1px 0 0 rgba(236,231,218,.045),inset 0 -1px 0 rgba(0,0,0,.42),
               0 1px 0 rgba(0,0,0,.35),0 18px 40px -22px rgba(0,0,0,.9)}
.nativo > .ic{width:40px;height:40px;padding:9px;box-sizing:border-box;border-radius:12px;color:var(--ouro-luz);
    background:rgba(209,171,116,.14);border:1px solid var(--fio-ouro);margin-bottom:16px}
.nativo b{display:block;font-family:var(--f-titulo);font-weight:400;font-size:1.5rem;letter-spacing:-.01em;line-height:1.1;color:var(--pergaminho);margin-bottom:8px}
.nativo p{margin:0;color:var(--texto-2);font-size:.9rem;line-height:1.55}

/* ------------------------------------------------------------ o ceu real */
/* Aqui nao ha lamina: o ceu e o assunto. So um veu radial atras do texto,
   para ler sobre nuvem clara de dia, e a legenda ao vivo numa pilula de
   vidro. */
.entrada-ceu{position:relative;text-align:center;width:min(760px,100%);margin:0 auto;padding:clamp(40px,8vh,90px) 10px}
.entrada-ceu::before{content:'';position:absolute;inset:-12% -40%;z-index:-1;pointer-events:none;
    background:radial-gradient(55% 60% at 50% 50%,rgba(4,7,10,.6),rgba(4,7,10,0) 72%)}
.entrada-ceu h2{margin:14px auto 18px}
.ceu-texto{margin:0 auto;max-width:58ch;color:var(--pergaminho);font-size:1.06rem;line-height:1.7;
    text-shadow:0 1px 14px rgba(4,7,10,.75),0 0 2px rgba(4,7,10,.5)}
.ceu-legenda{display:inline-flex;align-items:center;gap:10px;margin:28px auto 0;padding:10px 18px 10px 14px;border-radius:999px;
    font-size:.86rem;line-height:1.45;color:var(--pergaminho);text-align:left;
    background:var(--vidro-forte);border:1px solid var(--vidro-borda);
    box-shadow:inset 0 1px 0 rgba(236,231,218,.08),inset 0 -1px 0 rgba(0,0,0,.35),0 8px 22px -12px rgba(0,0,0,.9)}
.ceu-legenda[hidden]{display:none}
.ceu-legenda::before{content:'';flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--ouro-luz);
    box-shadow:0 0 10px 1px rgba(239,214,166,.8);animation:pulsaLegenda 2.4s ease-in-out infinite}
.ceu-legenda b{color:var(--ouro-luz);font-weight:600;margin-right:2px}
@keyframes pulsaLegenda{50%{opacity:.35;transform:scale(.8)}}

/* ------------------------------------------------------------ revelacao na rolagem
   So existe com JS e movimento liberado (a classe .anima-entrada no <html>
   vem do ligarEntrada). Sem ela, tudo ja nasce visivel. Apenas opacity e
   transform: desfoque animado em painel inteiro pesava no celular. */
.anima-entrada .revela{opacity:0;transform:translateY(44px);
    transition:opacity 1s var(--suave),transform 1.15s var(--suave)}
.anima-entrada .revela.visto{opacity:1;transform:none}
/* o rotulo e o paragrafo do texto sobem em escada; o titulo entra palavra
   por palavra (revelarPalavras + .palavra do noite.css) e por isso fica fora */
.anima-entrada .revela .mostra-texto > p{opacity:0;transform:translateY(14px);transition:opacity .9s var(--suave),transform .9s var(--suave)}
.anima-entrada .revela.visto .mostra-texto > p{opacity:1;transform:none}
.anima-entrada .revela.visto .mostra-texto > p:last-child{transition-delay:.32s}
/* os filhos da miniatura, em escada; as vivas tem a propria historia */
.anima-entrada .revela .mock:not(.mock-vivo) > *{opacity:0;transform:translateY(18px);transition:opacity .9s var(--suave),transform .9s var(--suave)}
.anima-entrada .revela.visto .mock:not(.mock-vivo) > *{opacity:1;transform:none}
.anima-entrada .revela.visto .mock:not(.mock-vivo) > *:nth-child(2){transition-delay:.18s}
.anima-entrada .revela.visto .mock:not(.mock-vivo) > *:nth-child(3){transition-delay:.32s}
.anima-entrada .revela.visto .mock:not(.mock-vivo) > *:nth-child(4){transition-delay:.44s}
.anima-entrada .revela.visto .mock:not(.mock-vivo) > *:nth-child(5){transition-delay:.56s}
.anima-entrada .revela.visto .mock:not(.mock-vivo) > *:nth-child(n+6){transition-delay:.66s}
/* apps nativos e capacidades: cartoes em escada. A transicao dos .cap mora
   em "#login .cap" (mais abaixo): aquela regra tem id, e o atalho transition
   dela engolia opacity/transform e zerava os atrasos daqui. Por isso os
   atrasos dos .cap levam o id junto. */
.anima-entrada .revela .nativo,.anima-entrada .revela .cap{opacity:0;transform:translateY(22px);transition:opacity .8s var(--suave),transform .8s var(--suave)}
.anima-entrada .revela.visto .nativo,.anima-entrada .revela.visto .cap{opacity:1;transform:none}
.anima-entrada .revela.visto .nativo:nth-child(2){transition-delay:.12s}
.anima-entrada .revela.visto .nativo:nth-child(3){transition-delay:.24s}
.anima-entrada .revela.visto .nativo:nth-child(4){transition-delay:.36s}
.anima-entrada #login .revela.visto .cap:nth-child(3n+2){transition-delay:.12s}
.anima-entrada #login .revela.visto .cap:nth-child(3n+3){transition-delay:.24s}
.anima-entrada #login .revela.visto .cap:nth-child(n+7){transition-delay:.3s}
.anima-entrada #login .revela.visto .cap:nth-child(n+13){transition-delay:.42s}
/* as barras das financas crescem do chao, uma depois da outra */
.anima-entrada .revela .mock-barras i{transform:scaleY(0);transition:transform 1s var(--suave)}
.anima-entrada .revela.visto .mock-barras i{transform:scaleY(var(--h,.5))}
.anima-entrada .revela.visto .mock-barras i:nth-child(2){transition-delay:.08s}
.anima-entrada .revela.visto .mock-barras i:nth-child(3){transition-delay:.16s}
.anima-entrada .revela.visto .mock-barras i:nth-child(4){transition-delay:.24s}
.anima-entrada .revela.visto .mock-barras i:nth-child(5){transition-delay:.32s}
.anima-entrada .revela.visto .mock-barras i:nth-child(6){transition-delay:.4s}
/* a agenda "marca" o compromisso de hoje depois que o painel assenta */
.anima-entrada .revela.visto .mock-ev-novo{animation:marcar .8s var(--mola) 1.1s both}
@keyframes marcar{from{opacity:0;transform:translateY(-8px) scale(.6)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------ miniaturas vivas
   Rodam so com .em-cena (o painel esta na tela) e param sozinhas ao sair.
   Cada laco e um relogio de 16 s (mini-app) ou 12 s (voz): os elementos
   entram nos seus instantes e tudo apaga junto no fim, para recomecar. */
.anima-entrada .em-cena .mock-app > .mock-eu{animation:mvEu 16s linear infinite}
.anima-entrada .em-cena .mock-app .mock-passo[style*="--n:1"]{animation:mvP1 16s linear infinite}
.anima-entrada .em-cena .mock-app .mock-passo[style*="--n:2"]{animation:mvP2 16s linear infinite}
.anima-entrada .em-cena .mock-app .mock-passo[style*="--n:3"]{animation:mvP3 16s linear infinite}
.anima-entrada .em-cena .mock-app .mock-passo[style*="--n:1"] .mock-andando{animation:girar .9s linear infinite,mvSpin1 16s linear infinite}
.anima-entrada .em-cena .mock-app .mock-passo[style*="--n:2"] .mock-andando{animation:girar .9s linear infinite,mvSpin2 16s linear infinite}
.anima-entrada .em-cena .mock-app .mock-passo[style*="--n:3"] .mock-andando{animation:girar .9s linear infinite,mvSpin3 16s linear infinite}
.anima-entrada .em-cena .mock-app .mock-passo[style*="--n:1"] .mock-feito{animation:mvOk1 16s var(--mola) infinite}
.anima-entrada .em-cena .mock-app .mock-passo[style*="--n:2"] .mock-feito{animation:mvOk2 16s var(--mola) infinite}
.anima-entrada .em-cena .mock-app .mock-passo[style*="--n:3"] .mock-feito{animation:mvOk3 16s var(--mola) infinite}
.anima-entrada .em-cena .mock-app .mock-app-fim{animation:mvFim 16s linear infinite}
.anima-entrada .em-cena .mock-app .mock-app-cartao{animation:mvCartao 16s var(--suave) infinite}
@keyframes girar{to{transform:rotate(360deg)}}
@keyframes mvEu{0%{opacity:0;transform:translateY(10px)}3%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes mvP1{0%,8%{opacity:0;transform:translateY(8px)}11%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes mvP2{0%,27%{opacity:0;transform:translateY(8px)}30%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes mvP3{0%,48%{opacity:0;transform:translateY(8px)}51%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes mvFim{0%,66%{opacity:0;transform:translateY(8px)}70%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes mvCartao{0%,70%{opacity:0;transform:translateY(10px) scale(.97)}74%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes mvSpin1{0%,7%{opacity:0}9%,25%{opacity:1}27%,100%{opacity:0}}
@keyframes mvSpin2{0%,26%{opacity:0}28%,46%{opacity:1}48%,100%{opacity:0}}
@keyframes mvSpin3{0%,47%{opacity:0}49%,63%{opacity:1}65%,100%{opacity:0}}
@keyframes mvOk1{0%,26%{opacity:0;transform:scale(.4)}29%,100%{opacity:1;transform:none}}
@keyframes mvOk2{0%,47%{opacity:0;transform:scale(.4)}50%,100%{opacity:1;transform:none}}
@keyframes mvOk3{0%,64%{opacity:0;transform:scale(.4)}67%,100%{opacity:1;transform:none}}

.anima-entrada .em-cena .mock-onda i{animation:onda 1.15s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.13s)}
/* posicoes fixas: onda (1), fala (2), resposta (3), fala (4), resposta (5), chip (6) */
.anima-entrada .em-cena .mock-voz > :nth-child(2){animation:vzA 12s linear infinite}
.anima-entrada .em-cena .mock-voz > :nth-child(3){animation:vzB 12s linear infinite}
.anima-entrada .em-cena .mock-voz > :nth-child(4){animation:vzC 12s linear infinite}
.anima-entrada .em-cena .mock-voz > :nth-child(5){animation:vzD 12s linear infinite}
.anima-entrada .em-cena .mock-voz > .mock-linha-chips{animation:vzE 12s var(--suave) infinite}
@keyframes onda{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@keyframes vzA{0%{opacity:0;transform:translateY(10px)}4%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes vzB{0%,20%{opacity:0;transform:translateY(8px)}24%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes vzC{0%,44%{opacity:0;transform:translateY(10px)}47%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes vzD{0%,62%{opacity:0;transform:translateY(8px)}66%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes vzE{0%,70%{opacity:0;transform:translateY(6px) scale(.96)}74%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}

/* casa: a luz respira devagar, so o halo */
.anima-entrada .em-cena .mock-casa-luz i::after{animation:respira 4s ease-in-out infinite}
@keyframes respira{50%{opacity:.35;transform:scale(.7)}}

/* ------------------------------------------------------------ recursos e instalacao */
.entrada-secao{width:min(1120px,calc(100% - 40px));margin:clamp(110px,16vh,180px) auto 0}
.entrada-secao > .vitrine-titulo,.entrada-final h2{margin:0;text-align:center;font-family:var(--f-titulo);font-weight:400;
    font-size:clamp(2.2rem,4.4vw,3.6rem);letter-spacing:-.02em;line-height:1.05;
    background:linear-gradient(180deg,#fbf7ee 25%,#d9c39a 120%);-webkit-background-clip:text;background-clip:text;color:transparent}
.entrada-secao > .vitrine-sub{text-align:center;margin:12px 0 38px;color:var(--texto-3);font-size:.95rem}
#login .capacidades{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:12px;align-items:start}
#login .cap{background:linear-gradient(135deg,rgba(236,231,218,.045),rgba(236,231,218,0) 42%),var(--lamina);
    border:1px solid var(--vidro-borda);border-radius:18px;
    box-shadow:inset 0 1px 0 rgba(236,231,218,.1),inset 0 -1px 0 rgba(0,0,0,.42),0 1px 0 rgba(0,0,0,.35),0 10px 24px -14px rgba(0,0,0,.9);
    transition:border-color .35s var(--suave),box-shadow .35s var(--suave),opacity .8s var(--suave),transform .8s var(--suave)}
#login .cap[open]{border-color:var(--fio-ouro);box-shadow:inset 0 1px 0 rgba(236,231,218,.1),0 0 0 1px rgba(209,171,116,.2),0 0 40px -20px rgba(209,171,116,.55)}
#login .cap > summary{padding:16px 18px;font-size:.93rem;color:var(--pergaminho)}
#login .cap > summary .ic{color:var(--ouro-luz)}
/* Chevron desenhado no lugar do caractere "▶", que cada sistema renderiza
   de um jeito (no Windows ele aparecia como emoji). */
#login .cap > summary .seta{font-size:0;width:7px;height:7px;margin-right:4px;border-right:1.5px solid var(--texto-3);
    border-bottom:1.5px solid var(--texto-3);transform:rotate(-45deg);transition:transform .35s var(--suave)}
#login .cap[open] > summary .seta{transform:rotate(45deg);border-color:var(--ouro-claro)}
#login .cap-corpo{color:var(--texto-2)}
.entrada-instalar-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:14px}
#login .passo-so{background:linear-gradient(135deg,rgba(236,231,218,.045),rgba(236,231,218,0) 42%),var(--lamina);
    border:1px solid var(--vidro-borda);border-radius:20px;padding:20px 22px;
    box-shadow:inset 0 1px 0 rgba(236,231,218,.1),inset 0 -1px 0 rgba(0,0,0,.42),0 1px 0 rgba(0,0,0,.35),0 10px 24px -14px rgba(0,0,0,.9)}
#login .passo-so h4{color:var(--ouro-claro);letter-spacing:.2em}
#login .passo-so ol{color:var(--texto-2)}
#login .passos-instalar{display:contents}
#login .tutorial-visual{border-radius:20px;border-color:var(--vidro-borda)}
/* O desenho de "instale na tela de inicio". Tudo em traco, na cor do texto:
   acompanha o tema sozinho e nao custa uma requisicao. */
.desenho-instalar{display:block;width:100%;max-width:300px;height:auto;margin:0 auto;
  padding:12px;box-sizing:border-box}
.desenho-instalar .di-celular rect,
.desenho-instalar .di-seta{fill:none;stroke:var(--pergaminho);stroke-opacity:.34;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
/* `rect` no seletor de proposito: a regra geral acima e `.di-celular rect`
   (especificidade 0,2,1) e venceria um `.di-novo` sozinho (0,2,0) — o icone
   dourado saia vazado e nenhuma destas opacidades valia. */
.desenho-instalar rect.di-tela{stroke-opacity:.16}
.desenho-instalar rect.di-barra{stroke-opacity:.5}
.desenho-instalar .di-ponto{fill:var(--ouro);fill-opacity:.16;stroke:var(--ouro);stroke-opacity:.5;stroke-width:1.4}
.desenho-instalar rect.di-app{stroke-opacity:.22}
/* O icone novo e o unico em ouro cheio: e o que a pessoa ganha no fim. */
.desenho-instalar rect.di-novo{fill:var(--ouro);fill-opacity:.92;stroke:var(--ouro-luz);stroke-opacity:.85;stroke-width:1.4}
.desenho-instalar .di-aceso{fill:none;stroke:var(--ouro-luz);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion: no-preference){
  /* Um pulso lento no botao de compartilhar: e o unico passo que a pessoa
     precisa achar no aparelho dela. Nada mais se mexe. */
  .desenho-instalar .di-aceso{animation:di-pulso 2.8s ease-in-out infinite}
  @keyframes di-pulso{0%,62%,100%{opacity:.45}78%{opacity:1}}
}
#login .nota-instalar{text-align:center;color:var(--texto-3);margin-top:18px}

.entrada-final{text-align:center;margin:clamp(120px,18vh,200px) auto 0;padding:0 20px}
.entrada-final p{margin:16px auto 30px;color:var(--texto-2);max-width:46ch;font-size:1.05rem;line-height:1.6}
.entrada-final-botao{display:inline-flex;align-items:center;height:54px;padding:0 30px;border-radius:999px;text-decoration:none;
    color:#0b1117;font-weight:600;background:linear-gradient(180deg,#f0d3a0,#b08d57);
    box-shadow:0 0 60px -14px rgba(209,171,116,.75),inset 0 1px 0 rgba(255,255,255,.4)}
#login .rodape-vitrine{text-align:center;margin-top:80px;color:var(--texto-3)}

/* ------------------------------------------------------------ larguras */
@media (max-width:860px){
  .mostra{grid-template-columns:1fr;gap:30px}
  .entrada-mostra{gap:clamp(64px,10vh,96px);padding-top:48px}
  .entrada-secao{margin-top:clamp(72px,11vh,110px)}
  .mostra.invertida .mostra-texto{order:0}
  .mostra-texto{text-align:left}
  .mock-agenda{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Nada dentro de uma placa pode ser mais largo que ela (medido em 320 px: a
     lista da biblioteca chegava a 340 px e a agenda a 287). */
  .mostra > *,.mock,.mock > *{min-width:0;max-width:100%}
  .mock-bib-item,.mock-app-cartao{flex-wrap:wrap}
  .mock-bib-item .mock-btn,.mock-app-cartao .mock-btn{margin-left:auto}
  .mock-dia{padding:12px 6px 14px}
  .mock-agenda .mock-dia:nth-child(n+4){display:none}
}
@media (max-width:560px){
  .entrada-barra{top:calc(8px + env(safe-area-inset-top));width:calc(100% - 16px);margin-top:8px;padding-left:16px}
  .entrada-hero{padding-bottom:96px}
  .entrada-hero .logo-login{width:92px;height:92px}
  .entrada-nome{letter-spacing:.14em;margin-right:-.14em}
  .entrada-selos li{font-size:.76rem;padding:6px 12px 6px 9px}
  .mock{padding:20px;border-radius:24px}
  .mock-linha-chips,.mock-passos,.mock-app-cartao,.mock-onda{margin-left:0}
  .mock-eu{max-width:92%}
}
@media (max-width:420px){
  .mock-casa{grid-template-columns:1fr}
  .mock-casa-col.nunca{margin-top:4px}
  .mock-dre-total > span:last-child{font-size:1.8rem}
}

/* ------------------------------------------------------------ sem animacao
   O interruptor das Configuracoes (html.sem-animacao) e o movimento reduzido
   do aparelho: tudo parado e visivel, no estado final. */
html.sem-animacao .entrada-barra-marca,html.sem-animacao .entrada-barra::before{opacity:1}
html.sem-animacao .entrada-hero-miolo,html.sem-animacao .entrada-hero .logo-login,html.sem-animacao .entrada-hero .bussola-palco-hero,
html.sem-animacao .entrada-sobre,html.sem-animacao .entrada-nome,html.sem-animacao .entrada-tese,html.sem-animacao .entrada-sub,
html.sem-animacao .entrada-selos,html.sem-animacao #login #botoesLogin,html.sem-animacao .entrada-rolar,html.sem-animacao .entrada-rolar i{
    animation:none;transform:none;translate:none;opacity:1}
html.sem-animacao .revela,html.sem-animacao .revela .mostra-texto > p,html.sem-animacao .revela .mock > *,html.sem-animacao .revela .nativo,
html.sem-animacao .revela .cap,html.sem-animacao .mock-ev-novo,html.sem-animacao .mock-app .mock-passo,html.sem-animacao .mock-app .mock-feito,
html.sem-animacao .mock-app .mock-app-fim,html.sem-animacao .mock-app .mock-app-cartao,html.sem-animacao .mock-voz > *{opacity:1;transform:none}
html.sem-animacao .revela .mock-barras i{transform:scaleY(var(--h,.5))}
html.sem-animacao .mock-andando{opacity:0}
@media (prefers-reduced-motion:reduce){
  .entrada-barra-marca,.entrada-barra::before{opacity:1}
  .entrada-hero-miolo,.entrada-hero .logo-login,.entrada-hero .bussola-palco-hero,.entrada-sobre,.entrada-nome,.entrada-tese,.entrada-sub,
  .entrada-selos,#login #botoesLogin,.entrada-rolar,.entrada-rolar i{animation:none;transform:none;translate:none;opacity:1}
  .anima-entrada .revela,.anima-entrada .revela .mostra-texto > p,.anima-entrada .revela .mock > *,.anima-entrada .revela .nativo,
  .anima-entrada .revela .cap,.anima-entrada .revela .mock-ev-novo{opacity:1;transform:none;transition:none;animation:none}
  .anima-entrada .revela .mock-barras i{transform:scaleY(var(--h,.5));transition:none}
  #login .mock-vivo *,#login .mock-onda i,#login .ceu-legenda::before,#login .palavra,#login .entrada-rolar i{animation:none!important}
  #login .mock-app .mock-passo,#login .mock-app .mock-feito,#login .mock-app .mock-app-fim,#login .mock-app .mock-app-cartao,#login .mock-voz > *{opacity:1;transform:none}
  #login .mock-andando{opacity:0}
  #login{scroll-behavior:auto}
}