/* As letras da app, auto-alojadas (a CSP só deixa font-src 'self'). As
   mesmas declarações vivem no CSS_LEGAL (legal-vista.js) e no CSS_TESTE
   (teste.js), e um teste confere que as três não divergem. Variáveis: a Geist
   de 100 a 900, a Bricolage Grotesque de 200 a 800, com o eixo ótico, que o
   browser acerta sozinho pelo tamanho. O unicode-range é o latino: o que
   cair fora dele vem da letra seguinte da pilha, sem descarregar nada. */
@font-face{font-family:'Geist';src:url(/fonts/geist.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bricolage Grotesque';src:url(/fonts/bricolage-grotesque.woff2) format('woff2');font-weight:200 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* os tokens da app (o contrato do redesign), com os mesmos nomes: quem
   clica em «Abrir a app» não pode sentir que mudou de produto */
:root{color-scheme:light dark;
  --bg:#F2F3F6;--card:#FFFFFF;--tint:#F6F7F9;--press:#E9ECF2;
  --ink:#121826;--muted:#4F586B;--line:#E2E5EB;--line2:#CDD2DB;
  --accent:#2952D9;--accent-ink:#FFFFFF;--accent-soft:#E9EEFC;--accent-text:#1D3FB0;--accent-press:#1D3FB0;
  --in:#16775A;--in-soft:#E2F3EB;--out:#BD420C;--out-soft:#FCEADF;--loan:#6845C2;--loan-soft:#EFEAFB;
  --warn:#8F5600;--warn-soft:#FFF1D1;--danger:#B42318;--danger-soft:#FDE8E6;
  --side:#0E1830;--side-ink:#FFFFFF;--side-text:#C2CBE0;--side-on:rgba(255,255,255,.12);--side-line:#22305A;
  --blur:rgba(242,243,246,.94);
  /* só da montra. A marca é cobalto nos dois temas (é a marca, não um
     estado); a moldura do telemóvel é quase preta nos dois; os traços da
     barra lateral da maquete, o tracejado e os saldos do bloco azul-noite e
     o bloco final são os valores da prancheta Landing. */
  --marca:#2952D9;--marca-arco:#FFFFFF;
  --moldura:#0B0F1A;--moldura-anel:transparent;
  --sombra-maquete:0 30px 60px rgba(14,24,48,.28);--sombra-janela:0 24px 48px rgba(14,24,48,.14);
  --mosaico-fundo:#DCE4FB;--mosaico-traco:#3A5FD6;
  --side-traco:#2A3A63;--side-tracejado:#2C3A5E;
  --saldo-mais:#8FE3C0;--saldo-mais-fundo:rgba(76,199,154,.14);
  --saldo-menos:#FFB27A;--saldo-menos-fundo:rgba(255,154,98,.14);
  --fecho-fundo:#2952D9;--fecho-tinta:#FFFFFF;--fecho-sub:#DCE4FB;
  --fecho-botao:#FFFFFF;--fecho-botao-tinta:#1D3FB0;--fecho-botao-hover:#E9EEFC;--fecho-mosaico:rgba(255,255,255,.35);
  /* movimento: os tokens da app (--rapido, --curva, --curva-entra), para
     quem clica em «Abrir a app» não sentir que mudou de produto também no
     tempo. O --entrada é só daqui: uma montra pode demorar mais do que uma
     app a responder, e .65s é o degrau de quem chega pela primeira vez. */
  --rapido:.12s;--entrada:.65s;
  --curva:cubic-bezier(.22,1,.36,1);--curva-entra:cubic-bezier(0,0,.2,1)}
/* o tema escuro de quem lê, com os tokens escuros do contrato. No escuro o
   bloco final passa a cobalto suave (um bloco #7C9BFF daquele tamanho
   encandeava) e a moldura do telemóvel ganha um anel, senão sumia no fundo. */
@media(prefers-color-scheme:dark){:root{
  --bg:#0B111E;--card:#141C2C;--tint:#1A2335;--press:#253049;
  --ink:#E9EDF5;--muted:#AEB7C9;--line:#253049;--line2:#33405C;
  --accent:#7C9BFF;--accent-ink:#0B111E;--accent-soft:#1E2A4D;--accent-text:#B5C6FF;--accent-press:#9DB3FF;
  --in:#4CC79A;--in-soft:#123327;--out:#FF9A62;--out-soft:#3A2216;--loan:#B49BFF;--loan-soft:#2A2247;
  --warn:#F2C25A;--warn-soft:#352A12;--danger:#FF8A80;--danger-soft:#3D1A1A;
  --side:#070C17;--side-text:#9AA6C0;--side-line:#1A2440;
  --blur:rgba(11,17,30,.92);
  --moldura-anel:#33405C;
  --sombra-maquete:0 30px 60px rgba(0,0,0,.55);--sombra-janela:0 24px 60px rgba(0,0,0,.6);
  --mosaico-fundo:#1E2A4D;--mosaico-traco:#3A5FD6;
  --fecho-fundo:#1E2A4D;--fecho-tinta:#E9EDF5;--fecho-sub:#AEB7C9;
  --fecho-botao:#7C9BFF;--fecho-botao-tinta:#0B111E;--fecho-botao-hover:#9DB3FF;--fecho-mosaico:rgba(124,155,255,.28)}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;
  padding:0 env(safe-area-inset-right) 0 env(safe-area-inset-left)}
/* os títulos e os valores grandes na Bricolage, como na app */
h1,h2,h3,.tit{font-family:'Bricolage Grotesque','Geist',system-ui,sans-serif;font-weight:650;
  letter-spacing:-.02em;margin:0}
h1,h2{text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.n{font-variant-numeric:tabular-nums}
.wrap{max-width:1160px;margin:0 auto;padding-left:clamp(16px,4vw,40px);padding-right:clamp(16px,4vw,40px)}
.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* a marca: o quadrado cobalto com dois arcos brancos em cantos opostos, em
   CSS e não em imagem. Os arcos vão em percentagem do raio do gradiente, para
   o mesmo desenho servir aos 34, 24 e 22 px. */
.mark{display:block;flex:none;width:34px;height:34px;border-radius:9px;
  background:radial-gradient(circle at 0 0,transparent 23%,var(--marca-arco) 24%,var(--marca-arco) 30.2%,transparent 31.2%),
    radial-gradient(circle at 100% 100%,transparent 23%,var(--marca-arco) 24%,var(--marca-arco) 30.2%,transparent 31.2%),var(--marca)}
/* o mosaico das capas sem fotografia: arcos e pontos, pintados pelos dois
   tokens, que cada uso pode trocar no próprio elemento */
.tile{background-color:var(--mosaico-fundo);
  background-image:radial-gradient(circle at 0 0,transparent 12px,var(--mosaico-traco) 12.5px,var(--mosaico-traco) 15px,transparent 15.5px),
    radial-gradient(circle at 100% 100%,transparent 12px,var(--mosaico-traco) 12.5px,var(--mosaico-traco) 15px,transparent 15.5px),
    radial-gradient(circle at 50% 50%,var(--mosaico-traco) 2.5px,transparent 3px);
  background-size:28px 28px}

/* acompanha o scroll, como o cabeçalho da app: a página é comprida, e a
   marca e a porta de entrada não podem ficar lá em cima. O vidro é o --blur,
   saturado para as cores de baixo atravessarem vivas; a risca só aparece
   quando há conteúdo por baixo dela para separar — é o scroll que a acende,
   mais abaixo, onde o motor souber animar pelo scroll. */
.faixa-topo{position:sticky;top:0;z-index:20;background:var(--blur);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  backdrop-filter:blur(12px) saturate(140%);border-bottom:1px solid var(--line)}
/* as mesmas medidas do .wrap, para a marca ficar na prumada do texto */
header{display:flex;align-items:center;gap:8px;max-width:1160px;margin:0 auto;min-height:72px;
  padding:0 clamp(16px,4vw,40px)}
.marca{display:flex;align-items:center;gap:10px;margin-right:auto;color:var(--ink)}
.marca .tit{font-size:22px}

/* os botões da montra são os da app em ponto grande (50 px, raio 14), como
   na prancheta; os do cabeçalho ficam nos 44 da app */
a.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;padding:0 22px;border-radius:14px;border:1px solid var(--line2);
  background:var(--card);color:var(--ink);text-decoration:none;font-weight:600;font-size:16px;white-space:nowrap;
  transition:transform var(--rapido) var(--curva),background-color var(--rapido) var(--curva),
    border-color var(--rapido) var(--curva),color var(--rapido) var(--curva)}
a.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
a.btn.fantasma{background:transparent;border-color:transparent}
a.btn.pequeno{min-height:44px;padding:0 16px;font-size:15px;border-radius:12px}
/* a régua da app: .97 nos botões, e a reação vive no premido, não no largar */
a.btn:active{transform:scale(.97)}
a.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:14px}

/* ---------------------------------------------------------------- hero */
.hero{display:flex;flex-wrap:wrap;align-items:center;gap:48px;padding-top:48px;padding-bottom:72px}
.hero-texto{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:22px}
/* quanto maior a letra, mais apertado o leading: um título de 68px com o
   espaçamento do corpo lê-se desconjuntado */
.hero h1{font-size:clamp(40px,6vw,68px);line-height:1.02}
.hero .sub{font-size:20px;line-height:1.45;max-width:560px;color:var(--muted)}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.gratis{font-size:15px;color:var(--muted)}
.hero-visual{flex:1 1 380px;min-width:0;display:flex;justify-content:center;position:relative;min-height:520px}
/* o mosaico fica preso ao telemóvel como na prancheta (49 px à esquerda dele,
   89 à direita): quando o hero passa a uma coluna, numa largura de tablet,
   não se estica numa faixa de lado a lado */
.hero-visual > .tile{position:absolute;border-radius:32px;
  inset:40px max(0px,calc(50% - 240px)) 40px max(40px,calc(50% - 200px))}

/* -------------------------------------------- as maquetes (role="img") */
.telemovel{position:relative;width:300px;max-width:100%;border-radius:40px;background:var(--moldura);padding:12px;
  box-shadow:0 0 0 1px var(--moldura-anel),var(--sombra-maquete)}
.ecra{border-radius:30px;background:var(--bg);padding:18px 14px;display:flex;flex-direction:column;gap:10px;min-height:560px}
.ecra-titulo{font-size:18px}
.m-cartao{background:var(--card);border:1px solid var(--line);border-radius:14px}
.m-atencao{display:flex;align-items:center;gap:10px;padding:10px 12px;font-size:12.5px;line-height:1.35}
.m-icone{width:28px;height:28px;border-radius:8px;background:var(--danger-soft);color:var(--danger);
  display:flex;align-items:center;justify-content:center;flex:none}
.m-icone .i{width:16px;height:16px}
.m-sub{color:var(--muted)}
.m-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.m-kpis.quatro{grid-template-columns:repeat(4,minmax(0,1fr))}
.m-kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px;min-width:0}
.m-kpi p:first-child{font-size:11px}
.m-kpi .tit{font-size:15px;white-space:nowrap}
/* o contorno da divisória da barra: no escuro o azul-noite quase se
   confundia com o fundo do ecrã */
.m-kpi.noite{background:var(--side);border-color:var(--side-line)}
.m-kpi.noite p:first-child{color:var(--side-text)}
.m-kpi.noite .tit{color:var(--side-ink)}
.barras-tel{display:flex;align-items:flex-end;gap:4px;height:120px;padding:12px}
.barras-tel span{flex:1;border-radius:3px 3px 0 0;background:var(--in)}
.m-capa{height:90px;border-radius:14px}
.m-imovel{font-size:12.5px;font-weight:600}
.m-imovel .m-sub{font-weight:400}

.computador{flex:1.4 1 520px;min-width:0;display:flex;min-height:340px;border-radius:20px;overflow:hidden;
  border:1px solid var(--line);background:var(--bg);box-shadow:var(--sombra-janela)}
.pc-barra{width:150px;flex:none;background:var(--side);padding:16px 12px;display:flex;flex-direction:column;gap:8px}
.pc-marca{display:flex;align-items:center;gap:8px;color:var(--side-ink);font-size:13px;font-weight:600;margin-bottom:4px}
.pc-marca .mark{width:22px;height:22px;border-radius:6px}
.pc-item{height:26px;border-radius:7px;background:var(--side-on)}
.pc-traco{height:10px;border-radius:4px;background:var(--side-traco)}
.pc-traco:nth-child(3){width:70%}
.pc-traco:nth-child(4){width:60%}
.pc-traco:nth-child(5){width:75%}
.pc-traco:nth-child(6){width:55%}
.pc-corpo{flex:1;min-width:0;padding:18px;display:flex;flex-direction:column;gap:12px}
.pc-titulo{font-size:18px}
.computador .m-kpi{border-radius:10px}
.computador .m-kpi .tit{font-size:14px}
.barras-pc{flex:1;display:flex;align-items:flex-end;gap:6px;min-height:150px;padding:12px;border-radius:12px}
.barras-pc .mes{flex:1;display:flex;flex-direction:column;gap:2px}
.barras-pc .r{border-radius:3px;background:var(--in)}
.barras-pc .d{border-radius:3px;background:var(--out)}
.barras-tel span:nth-child(1){height:85px}
.barras-pc .mes:nth-child(1) .r{height:85px}
.barras-pc .mes:nth-child(1) .d{height:11px}
.barras-tel span:nth-child(2){height:85px}
.barras-pc .mes:nth-child(2) .r{height:85px}
.barras-pc .mes:nth-child(2) .d{height:10px}
.barras-tel span:nth-child(3){height:89px}
.barras-pc .mes:nth-child(3) .r{height:89px}
.barras-pc .mes:nth-child(3) .d{height:17px}
.barras-tel span:nth-child(4){height:85px}
.barras-pc .mes:nth-child(4) .r{height:85px}
.barras-pc .mes:nth-child(4) .d{height:10px}
.barras-tel span:nth-child(5){height:85px}
.barras-pc .mes:nth-child(5) .r{height:85px}
.barras-pc .mes:nth-child(5) .d{height:32px}
.barras-tel span:nth-child(6){height:85px}
.barras-pc .mes:nth-child(6) .r{height:85px}
.barras-pc .mes:nth-child(6) .d{height:11px}
.barras-tel span:nth-child(7){height:85px}
.barras-pc .mes:nth-child(7) .r{height:85px}
.barras-pc .mes:nth-child(7) .d{height:11px}
.barras-tel span:nth-child(8){height:85px}
.barras-pc .mes:nth-child(8) .r{height:85px}
.barras-pc .mes:nth-child(8) .d{height:24px}
.barras-tel span:nth-child(9){height:66px}
.barras-pc .mes:nth-child(9) .r{height:66px}
.barras-pc .mes:nth-child(9) .d{height:28px}
.barras-tel span:nth-child(10){height:66px}
.barras-pc .mes:nth-child(10) .r{height:66px}
.barras-pc .mes:nth-child(10) .d{height:19px}

/* ------------------------------------------------------------- secções */
.faz{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(56px,8vw,80px) 0}
.faz .wrap{display:flex;flex-direction:column;gap:36px}
.faz h2{font-size:clamp(30px,4vw,44px)}
.grelha{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:620px){.grelha{grid-template-columns:1fr 1fr}}
@media(min-width:940px){.grelha{grid-template-columns:1fr 1fr 1fr}}
.cartao{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:20px;
  background:var(--card);border:1px solid var(--line)}
.cartao h3{font-size:21px;line-height:1.2}
.cartao p{color:var(--muted)}
.ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.ic.in{background:var(--in-soft);color:var(--in)}
.ic.ac{background:var(--accent-soft);color:var(--accent-text)}
.ic.out{background:var(--out-soft);color:var(--out)}
.ic.loan{background:var(--loan-soft);color:var(--loan)}
.ic.warn{background:var(--warn-soft);color:var(--warn)}

.par-pc{display:flex;flex-wrap:wrap;align-items:center;gap:48px;
  padding-top:clamp(56px,8vw,88px);padding-bottom:clamp(56px,8vw,88px)}
.pc-texto{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:16px}
.pc-texto h2,.par-texto h2{font-size:clamp(28px,3.6vw,40px);line-height:1.1}
.pc-texto .sub{font-size:18px;color:var(--muted)}

/* o bloco azul-noite das contas entre donos: a cor da barra lateral da app */
.banda-noite{background:var(--side);color:var(--side-ink);border-top:1px solid var(--side-line);
  border-bottom:1px solid var(--side-line);padding:clamp(56px,8vw,88px) 0}
.par{display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.par-texto{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:16px}
.par-texto p{font-size:18px;color:var(--side-text)}
.acerto{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:10px}
.saldos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.saldo{padding:16px;border-radius:14px}
.saldo p:first-child{font-weight:600}
.saldo .valor{font-weight:700;font-size:20px;white-space:nowrap}
.saldo.mais{background:var(--saldo-mais-fundo)}
.saldo.mais .valor{color:var(--saldo-mais)}
.saldo.menos{background:var(--saldo-menos-fundo)}
.saldo.menos .valor{color:var(--saldo-menos)}
.proposta{padding:16px;border-radius:14px;border:1px dashed var(--side-tracejado);
  display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.proposta p{flex:1 1 160px}
/* desenho de um botão dentro da maquete: não é tocável, por isso não é um
   <button> nem tem cursor de mão */
.botao-maquete{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:12px;
  background:var(--side-ink);color:var(--side);font-weight:600;white-space:nowrap}

.dados{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:48px;
  padding-top:clamp(56px,8vw,88px);padding-bottom:clamp(56px,8vw,88px)}
.dados h2{font-size:clamp(26px,3.2vw,34px)}
.dados-lista{display:flex;flex-direction:column;gap:18px}
.lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.lista li{display:flex;gap:12px;align-items:flex-start}
.lista .i{margin-top:1px}
.i.ok{color:var(--in)}
.projeto{align-self:start;display:flex;flex-direction:column;gap:18px;padding:28px;border-radius:24px;
  background:var(--card);border:1px solid var(--line)}
.projeto .sub{font-size:17px;color:var(--muted)}

.fecho-seccao{padding-bottom:clamp(56px,8vw,88px)}
.fecho{position:relative;overflow:hidden;border-radius:28px;background:var(--fecho-fundo);color:var(--fecho-tinta);
  padding:clamp(32px,6vw,64px);display:flex;flex-wrap:wrap;align-items:center;gap:24px}
.fecho-mosaico{position:absolute;right:-40px;top:-40px;width:320px;height:320px;border-radius:40px;
  --mosaico-fundo:transparent;--mosaico-traco:var(--fecho-mosaico)}
.fecho-texto{flex:1 1 420px;min-width:0;position:relative;display:flex;flex-direction:column;gap:10px}
.fecho h2{font-size:clamp(30px,4vw,46px);line-height:1.08}
.fecho p{font-size:18px;color:var(--fecho-sub)}
.fecho a.btn{background:var(--fecho-botao);border-color:var(--fecho-botao);color:var(--fecho-botao-tinta)}
.fecho a.btn:focus-visible{outline-color:var(--fecho-tinta)}

.rodape{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px;padding-top:20px;padding-bottom:40px;
  border-top:1px solid var(--line);font-size:15px}
.rodape-marca{display:flex;align-items:center;gap:8px;margin-right:auto;color:var(--muted)}
.rodape .mark{width:24px;height:24px;border-radius:6px}
.rodape a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.rodape a:hover{color:var(--accent-text);text-decoration:underline}

/* o hover só existe onde há rato: num ecrã de dedo, o toque deixava o botão
   aceso até alguém tocar noutro sítio. Só cor — nada levanta nem sombreia. */
@media(hover:hover) and (pointer:fine){
  a.btn:hover{background:var(--tint)}
  a.btn.primary:hover{background:var(--accent-press);border-color:var(--accent-press)}
  a.btn.fantasma:hover{background:var(--press);border-color:var(--press)}
  .fecho a.btn:hover{background:var(--fecho-botao-hover);border-color:var(--fecho-botao-hover)}
}

/* ----------------------------------------------------------- telemóvel */
@media(max-width:619px){
  .pc-barra{width:52px;padding:14px 10px}
  .pc-marca span:last-child{display:none}
  .computador .m-kpis.quatro{grid-template-columns:1fr 1fr}
  /* no telemóvel o título ocupa a largura toda e o mosaico passava-lhe por
     baixo das letras: desce para o canto vazio ao lado do botão */
  .fecho-mosaico{width:160px;height:160px;top:auto;right:-56px;bottom:-56px}
  .rodape-marca{flex-basis:100%}
}
@media(max-width:480px){
  header{min-height:64px;gap:6px}
  .marca{gap:8px}
  .marca .mark{width:30px;height:30px;border-radius:8px}
  .marca .tit{font-size:19px}
  a.btn.pequeno{padding:0 14px}
  .hero{padding-top:32px;padding-bottom:56px}
  .hero .sub{font-size:18px}
}
/* num ecrã muito estreito não cabem dois botões ao lado da marca: o
   «Já tenho conta» do hero faz as vezes do «Entrar» */
@media(max-width:359px){a.btn.entrar{display:none}}

/* ======================= MOVIMENTO =======================
   Uma entrada só, para a página inteira: subir e desvanecer. É transform e
   opacity de ponta a ponta — nada aqui pede layout — e o estado BASE é
   sempre o visível: quem não corre animações (motor antigo, impressão)
   vê a página feita. */
@keyframes sobe{from{opacity:0;transform:translateY(16px)}}

/* A entrada do hero, ao chegar: escalonada a 70ms, como a Apple escalona o
   que chega junto — tudo ao mesmo tempo é um bloco, um a um é uma chegada.
   O backwards é o que segura os atrasados invisíveis até à vez deles. */
.hero h1{animation:sobe var(--entrada) var(--curva-entra) backwards}
.hero .sub{animation:sobe var(--entrada) var(--curva-entra) .07s backwards}
.hero .cta{animation:sobe var(--entrada) var(--curva-entra) .14s backwards}
.hero .gratis{animation:sobe var(--entrada) var(--curva-entra) .21s backwards}
.hero .telemovel{animation:sobe var(--entrada) var(--curva-entra) .1s backwards}
.hero-visual > .tile{animation:sobe var(--entrada) var(--curva-entra) .04s backwards}

/* O resto da página revela-se ao scroll, SEM JavaScript: a linha do tempo é
   o próprio scroll (animation-timeline), o dedo é quem conduz — dá para
   parar, voltar atrás e retomar, que é a interrupção de graça. Atrás de
   @supports de propósito: fora dele o estado base fica como sempre esteve,
   visível, e um motor sem view() não esconde conteúdo a ninguém. */
@supports (animation-timeline: view()){
  .grelha .cartao,.pc-texto,.computador,.par-texto,.acerto,.lista li,.projeto,.fecho{
    animation:sobe linear both;animation-timeline:view();
    animation-range:entry 8% entry 42%}
  /* as colunas da grelha entram por degraus, senão a fila chega em bloco —
     e os degraus seguem as colunas que existem (.grelha, acima): o padrão
     de três aplicado a duas punha o cartão da direita a entrar antes do da
     esquerda, e numa coluna só atrasava o 3.º e o 6.º sem razão nenhuma */
  @media(min-width:620px) and (max-width:939px){
    .grelha .cartao:nth-child(2n){animation-range:entry 14% entry 48%}
  }
  @media(min-width:940px){
    .grelha .cartao:nth-child(3n+2){animation-range:entry 14% entry 48%}
    .grelha .cartao:nth-child(3n){animation-range:entry 20% entry 54%}
  }
}
/* a risca do cabeçalho acende-se nos primeiros 24px de scroll: no topo não
   há nada por baixo dela para separar */
@supports (animation-timeline: scroll()){
  .faixa-topo{border-bottom-color:transparent;
    animation:risca linear both;animation-timeline:scroll();animation-range:0 24px}
  @keyframes risca{to{border-bottom-color:var(--line)}}
}

/* quem pediu menos movimento recebe menos, não zero: as entradas e as
   revelações ficam, mas em opacidade pura — o @keyframes redefinido aqui
   dentro tira o translateY a todas de uma vez — e nada se desloca nem muda
   de tamanho: o encolher do premido sai (e qualquer transform num hover que
   venha a existir), as cores ficam. A risca do cabeçalho é cor guiada pelo
   scroll, não movimento, e continua a acender-se. */
@media(prefers-reduced-motion:reduce){
  @keyframes sobe{from{opacity:0}}
  a.btn:hover,a.btn:active{transform:none}
}
/* quem pediu menos transparência recebe o cabeçalho sólido */
@media(prefers-reduced-transparency:reduce){
  .faixa-topo{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}}
/* e quem pediu mais contraste recebe contornos e texto secundário que se veem */
@media(prefers-contrast:more){:root{--line:#8A93A5;--line2:#6B7385;--muted:#384152}}
@media(prefers-contrast:more) and (prefers-color-scheme:dark){:root{--line:#56627D;--line2:#6E7A96;--muted:#C9D0DD}}