/* Página inicial (radr.izing.pt/). Desenho do quadro Site-A «Montra» (Artifact Design v149). Mesmas cores e fontes das páginas legais. Tudo em rem.
   Movimento só em CSS, no fim do ficheiro; sem ele (ou com «reduzir movimento») a página fica completa e parada. */
@font-face{font-family:Archivo;src:url(/fonts/archivo.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/plex-mono.woff2) format("woff2");font-weight:400;font-display:swap}

/* Tema: segue o sistema; data-tema (posto pelo Worker a partir de ?tema=) força claro ou escuro. */
:root{
  color-scheme:light;
  --fundo:#F4F6FB;--peca:#FFFFFF;--linha:#D7DBE7;--texto:#0B1026;--suave:#4A5372;--marca:#2B44E0;
  --sobre-marca:#FFFFFF;--tinta:#EBEEFF;--sobre-tinta:#2337C4;--neutro:#EEF1FB;
  --aceitar:#0E7C47;--pensar:#F2B200;--pensar-texto:#8A5F00;--recusar:#C42A3A;
  --mapa:#E6EAF3;--rua:#FFFFFF;--rua2:#F4F6FB;--agua:#D3DEF2;--moldura:#0B1026;
  --folha:#FFFFFF;--folha-texto:#0B1026;--folha-suave:#5A6380;--folha-linha:#E3E6EE;--botao:#0B1026;--sobre-botao:#FFFFFF;
  --sombra:0 1.125rem 2.5rem rgb(11 16 38 / 0.22),0 0.125rem 0.375rem rgb(11 16 38 / 0.12);
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){color-scheme:dark;--fundo:#070A17;--peca:#121830;--linha:#2A3152;--texto:#EDF0F8;--suave:#A2AAC6;--marca:#8D9CFF;
    --sobre-marca:#0B1026;--tinta:#1C2452;--sobre-tinta:#AEB9FF;--neutro:#232A45;--aceitar:#45D98E;--pensar:#FFC83D;--pensar-texto:#FFC83D;--recusar:#FF6E6E;
    --mapa:#10152A;--rua:#1F2643;--rua2:#19203A;--agua:#0C1A33;--moldura:#2A3152;
    --folha:#1A1F33;--folha-texto:#F3F5FA;--folha-suave:#A2AAC6;--folha-linha:#2E3550;--botao:#F3F5FA;--sobre-botao:#0B1026;--sombra:0 1.125rem 2.5rem rgb(0 0 0 / 0.5)}
}
:root[data-tema="escuro"]{color-scheme:dark;--fundo:#070A17;--peca:#121830;--linha:#2A3152;--texto:#EDF0F8;--suave:#A2AAC6;--marca:#8D9CFF;
  --sobre-marca:#0B1026;--tinta:#1C2452;--sobre-tinta:#AEB9FF;--neutro:#232A45;--aceitar:#45D98E;--pensar:#FFC83D;--pensar-texto:#FFC83D;--recusar:#FF6E6E;
  --mapa:#10152A;--rua:#1F2643;--rua2:#19203A;--agua:#0C1A33;--moldura:#2A3152;
    --folha:#1A1F33;--folha-texto:#F3F5FA;--folha-suave:#A2AAC6;--folha-linha:#2E3550;--botao:#F3F5FA;--sobre-botao:#0B1026;--sombra:0 1.125rem 2.5rem rgb(0 0 0 / 0.5)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--fundo);color:var(--texto);font-family:Archivo,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:1rem;line-height:1.5;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
a{color:var(--marca);text-underline-offset:0.1875rem}
a:focus-visible,summary:focus-visible{outline:0.125rem solid var(--marca);outline-offset:0.125rem;border-radius:0.25rem}
p,h1,h2,h3,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
svg{display:block;flex:none}
.visivel-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.saltar{position:absolute;left:1rem;top:-10rem;padding:0.75rem 1rem;background:var(--peca);border:1px solid var(--linha);border-radius:0.75rem;z-index:5}
.saltar:focus{top:0.75rem}

.dentro{max-width:70rem;margin:0 auto;padding:0 1rem}

/* Logótipo (o mesmo SVG das páginas legais). */
.logo{display:block;width:5.25rem;height:auto}
.lg-m{fill:var(--marca)}
.lg-m-t{fill:none;stroke:var(--marca)}
.lg-t{fill:var(--texto)}

/* Botão da loja: enquanto a app não sai é só um aviso (sem ligação). */
.loja{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;min-height:3.25rem;padding:0 1.5rem;border-radius:999px;background:var(--neutro);color:var(--texto);border:1.5px dashed var(--linha);font-weight:700;font-size:1rem;white-space:nowrap;text-decoration:none}
a.loja{background:var(--marca);color:var(--sobre-marca);border:0}
.loja svg{width:1.25rem;height:1.25rem}
.loja.peq{min-height:2.5rem;padding:0 1.125rem;font-size:0.875rem}
.loja.peq svg{width:1.125rem;height:1.125rem}

.selo{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 0.875rem;border-radius:999px;background:var(--tinta);color:var(--sobre-tinta);font-size:0.9375rem;font-weight:700;white-space:nowrap}
.selo svg{width:1.125rem;height:1.125rem}

/* Cabeçalho. */
.topo .dentro{display:flex;align-items:center;gap:1rem;min-height:3.75rem}
.marca{display:flex;margin-right:auto}
.secoes{display:none}
.topo .loja{display:none}
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;color:var(--texto)}
.menu summary::-webkit-details-marker{display:none}
.menu summary svg{width:1.5rem;height:1.5rem}
.menu ul{position:absolute;right:0;top:100%;z-index:3;min-width:12rem;padding:0.375rem 0;background:var(--peca);border:1px solid var(--linha);border-radius:0.75rem;box-shadow:0 0.5rem 1.5rem rgb(0 0 0 / 0.12)}
.menu a{display:block;padding:0.75rem 1rem;color:var(--texto);font-weight:600;text-decoration:none}
.menu a:hover{text-decoration:underline}

/* Seletor de língua: o mesmo das páginas legais (sem JavaScript). */
.linguas{position:relative}
.linguas summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:0.375rem;min-height:2.75rem;padding:0 0.25rem;font-size:0.875rem;color:var(--suave);white-space:nowrap}
.linguas summary::-webkit-details-marker{display:none}
.linguas summary::after{content:"";width:0.4375rem;height:0.4375rem;border-right:0.125rem solid currentColor;border-bottom:0.125rem solid currentColor;transform:translateY(-0.125rem) rotate(45deg)}
.linguas[open] summary::after{transform:translateY(0.125rem) rotate(-135deg)}
.linguas ul{position:absolute;right:0;top:100%;z-index:3;margin:0.25rem 0 0;padding:0.375rem 0;min-width:11rem;background:var(--peca);border:1px solid var(--linha);border-radius:0.75rem;box-shadow:0 0.5rem 1.5rem rgb(0 0 0 / 0.12)}
.linguas a{display:block;padding:0.625rem 1rem;font-size:0.9375rem;text-decoration:none;color:var(--texto)}
.linguas a:hover{text-decoration:underline}
.linguas a[aria-current]{font-weight:700;color:var(--marca)}

/* Abertura. */
.abertura .dentro{display:flex;flex-direction:column;gap:1.75rem;padding-top:1.25rem;padding-bottom:1rem}
.abertura .texto{display:flex;flex-direction:column;align-items:flex-start;gap:1.125rem}
h1{font-size:clamp(2.75rem,8vw,4.5rem);line-height:1.02;font-weight:750;letter-spacing:-0.025em}
.lead{font-size:1.0625rem;line-height:1.5;color:var(--suave);max-width:30rem}
.acoes{display:flex;flex-direction:column;align-items:stretch;gap:0.875rem;width:100%}
.acoes .ligacao{font-weight:700;text-decoration:none;align-self:center}
.acoes .ligacao:hover{text-decoration:underline}

/* Montra: telemóvel com o mapa e o cartão; um segundo cartão ao lado no computador. */
.montra{position:relative;align-self:center;width:18rem;height:36rem;margin:0.5rem 0}
.telefone{position:absolute;inset:0;border:0.5rem solid var(--moldura);border-radius:2.375rem;overflow:hidden;background:var(--mapa);box-shadow:0 1.875rem 3.75rem rgb(11 16 38 / 0.25)}
.telefone::before{content:"";position:absolute;top:0.625rem;left:50%;width:4.375rem;height:1.25rem;margin-left:-2.1875rem;border-radius:0.625rem;background:var(--moldura);z-index:1}
.mapa{position:absolute;inset:0;width:100%;height:100%}
.m-fundo{fill:var(--mapa)}
.m-agua{fill:var(--agua)}
.m-rua2{stroke:var(--rua2)}
.m-rua{stroke:var(--rua)}
.m-rota{stroke:var(--marca)}
.m-ponto,.m-pulso{fill:var(--marca)}
.m-pulso{opacity:0}
.m-centro{fill:#FFFFFF}
.ofertas,.camada{position:absolute;inset:0}
.camada.demo{display:none}
.ofertas .cartao{position:absolute;left:0.75rem;right:0.75rem;top:3.5rem;z-index:2}

/* A oferta como chega na app de transporte: genérica, sem marca. */
.folha{position:absolute;left:0;right:0;bottom:0;padding:0.75rem 1rem 1rem;background:var(--folha);color:var(--folha-texto);border-radius:1.25rem 1.25rem 0 0;box-shadow:0 -0.625rem 1.875rem rgb(11 16 38 / 0.25)}
.pega{display:block;width:2.25rem;height:0.25rem;border-radius:0.125rem;background:var(--folha-linha);margin:0 auto 0.625rem}
.f-topo{display:flex;align-items:center;gap:0.5rem;font-size:0.75rem;color:var(--folha-suave);margin-bottom:0.25rem}
.f-app{padding:0.125rem 0.5rem;border-radius:999px;background:var(--folha-linha);color:var(--folha-texto);font-size:0.71875rem;font-weight:700}
.f-preco{font-size:1.75rem;line-height:1.1;font-weight:750;margin-bottom:0.625rem}
.f-rota{display:flex;flex-direction:column;gap:0.5rem;padding-top:0.625rem;border-top:1px solid var(--folha-linha)}
.f-rota li{display:flex;gap:0.625rem}
.f-rota li::before{content:"";flex:none;width:0.625rem;height:0.625rem;margin-top:0.3rem;border-radius:50%;background:var(--folha-texto)}
.f-rota li.fim::before{border-radius:0.125rem}
.f-txt{min-width:0}
.f-txt b{display:block;font-size:0.8125rem}
.f-txt span{display:block;font-size:0.75rem;color:var(--folha-suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f-aceitar{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;margin-top:0.75rem;height:2.5rem;border-radius:0.75rem;background:var(--botao);color:var(--sobre-botao);font-size:0.9375rem;font-weight:750}
.f-aceitar span{position:absolute;left:0;bottom:0;width:62%;height:0.1875rem;background:var(--marca)}

/* Título grande: sem movimento só o primeiro texto (o slogan). Os passos da contagem só aparecem com movimento. */
.passo{display:none}
.frase+.frase{display:none}

/* Cartão de exemplo (igual ao da app, com dados inventados). */
.cartao{display:flex;overflow:hidden;background:var(--peca);color:var(--texto);border:1px solid var(--linha);border-radius:1rem;box-shadow:var(--sombra)}
.cartao .faixa{width:0.375rem;flex:none;background:var(--aceitar)}
.cartao.pensa .faixa{background:var(--pensar)}
.cartao.nao .faixa{background:var(--recusar)}
.c-dentro{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.5rem;padding:0.875rem 1rem}
.c-topo{display:flex;align-items:center;gap:0.5rem}
.c-topo svg{width:1.375rem;height:1.375rem;color:var(--aceitar)}
.c-tit{font-size:1rem;font-weight:700;color:var(--aceitar)}
.pensa .c-topo svg{color:var(--pensar)}
.pensa .c-tit{color:var(--pensar-texto)}
.nao .c-topo svg,.nao .c-tit{color:var(--recusar)}
.c-app{margin-left:auto;font-family:var(--mono);font-size:0.75rem;color:var(--suave)}
.c-preco{font-size:2.5rem;line-height:1;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-0.01em}
.c-chips{display:flex;flex-wrap:wrap;gap:0.375rem}
.c-chips>span{font-family:var(--mono);font-size:0.8125rem;padding:0.25rem 0.5625rem;border-radius:999px;background:var(--neutro);white-space:nowrap}
.c-ext{font-size:0.8125rem;color:var(--suave)}

/* Secções. */
.sec{padding:2.75rem 0}
.sec.alt{background:var(--peca)}
.sec:not(.alt)+.sec:not(.alt){padding-top:0}
.sec .dentro{display:flex;flex-direction:column;gap:1.75rem}
.cab-sec{display:flex;flex-direction:column;gap:0.5rem}
.kicker{font-family:var(--mono);font-size:0.8125rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--marca)}
h2{font-size:clamp(1.75rem,4.5vw,2.375rem);line-height:1.15;font-weight:700;letter-spacing:-0.015em}
.cab-sec p:not(.kicker){font-size:1rem;line-height:1.5;color:var(--suave);max-width:35rem}
h3{font-size:1.1875rem;line-height:1.3;font-weight:700}

.passos{display:flex;flex-direction:column;gap:1.375rem;counter-reset:passo}
.passos li{display:flex;gap:0.875rem;counter-increment:passo}
.passos li::before{content:counter(passo);flex:none;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--tinta);color:var(--sobre-tinta);font-family:var(--mono);font-size:0.9375rem}
.passos p,.sinais p{margin-top:0.25rem;font-size:0.96875rem;line-height:1.5;color:var(--suave)}

.sinais{display:flex;flex-direction:column;gap:0.75rem}
.sinais li{flex:1;display:flex;gap:0.875rem;align-items:flex-start;padding:1.25rem;background:var(--peca);border:1px solid var(--linha);border-radius:1.125rem}
.sec.alt .sinais li{background:var(--fundo)}
.sinais svg{width:1.875rem;height:1.875rem}
.s-ok{color:var(--aceitar)}
.s-pensa svg{color:var(--pensar)}
.s-pensa h3{color:var(--pensar-texto)}
.s-nao{color:var(--recusar)}
.sinais h3{font-size:1.125rem}

.planos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.75rem}
.planos li{display:flex;flex-direction:column;gap:0.625rem;padding:1.25rem;background:var(--peca);border:1px solid var(--linha);border-radius:1.125rem}
.planos h3{font-size:1.125rem}
.planos p{font-family:var(--mono);font-size:0.8125rem;color:var(--suave)}
.planos .valor{font-family:inherit;font-size:1.5rem;line-height:1.2;font-weight:700;color:var(--texto);font-variant-numeric:tabular-nums}
.planos .per{font-size:0.9375rem;font-weight:600;color:var(--suave);white-space:nowrap}
.planos .mes{margin-top:-0.375rem}
.gratis{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem 0.875rem;font-size:0.9375rem;color:var(--suave)}

.contactos{display:flex;flex-direction:column;gap:0.75rem}
.contactos li{flex:1;display:flex;gap:0.875rem;align-items:flex-start;padding:1.25rem;background:var(--peca);border:1px solid var(--linha);border-radius:1.125rem}
.contactos svg{width:1.5rem;height:1.5rem;color:var(--marca)}
.contactos h3{font-size:1.0625rem;margin-bottom:0.125rem}
.contactos a{font-size:0.9375rem;font-weight:600;overflow-wrap:anywhere}

/* Rodapé. */
.rodape{border-top:1px solid var(--linha);background:var(--peca)}
.rodape .dentro{display:flex;flex-direction:column;gap:1.25rem;padding-top:1.75rem;padding-bottom:2.25rem}
.rodape .logo{width:4.75rem}
.rodape .lema{margin-top:0.625rem;font-size:0.875rem;color:var(--suave)}
.rodape nav ul{display:flex;flex-wrap:wrap;gap:0.25rem 1.375rem}
.rodape nav a{display:inline-block;padding:0.375rem 0;font-size:0.90625rem;font-weight:600;color:var(--texto);text-decoration:none}
.rodape nav a:hover{text-decoration:underline}
.empresas{font-size:0.875rem;line-height:1.6;color:var(--suave)}

/* Computador. */
@media (min-width:48rem){
  .dentro{padding:0 2rem}
  .acoes{flex-direction:row;align-items:center;width:auto}
  .passos,.sinais,.contactos{flex-direction:row;gap:1.125rem}
  .passos{gap:2.5rem}
  .passos li{flex:1;flex-direction:column;gap:0.75rem}
  .planos{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.125rem}
  .sec{padding:5.5rem 0}
  .sec .dentro{gap:2.5rem}
  .cab-sec p:not(.kicker){font-size:1.125rem}
  .rodape .dentro{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:1.5rem 2.5rem;padding-top:2.25rem;padding-bottom:2.75rem}
  .rodape .lado-marca{margin-right:auto}
  .empresas{flex-basis:100%}
}
@media (min-width:64rem){
  .topo .dentro{min-height:4.75rem;gap:2.25rem}
  .logo{width:6rem}
  .marca{margin-right:0}
  .secoes{display:flex;gap:1.75rem;margin-right:auto;margin-left:1.25rem}
  .secoes a{font-size:0.9375rem;font-weight:600;color:var(--texto);text-decoration:none;padding:0.75rem 0}
  .secoes a:hover{text-decoration:underline}
  .topo .loja{display:inline-flex}
  .menu{display:none}
  .abertura .dentro{flex-direction:row;align-items:center;gap:4rem;padding-top:3.5rem;padding-bottom:2.5rem}
  .abertura .texto{flex:1;gap:1.375rem}
  .lead{font-size:1.25rem}
  .montra{flex:none;width:20rem;height:40rem;margin:0 2.5rem 0 0}
  .telefone{border-radius:2.75rem}
  .ofertas .cartao{top:4.25rem}
}

/* ---------- Movimento ----------
   Tudo dentro de prefers-reduced-motion: no-preference. Sem suporte ou com «reduzir movimento»: estado final, parado.
   main corta só na horizontal o que entra de lado, para a página nunca ganhar scroll horizontal. */
main{overflow-x:clip}

@media (prefers-reduced-motion:no-preference){
  /* Abertura: o texto entra uma vez, ao carregar. */
  .abertura .texto>*{animation:entra-lado 0.7s cubic-bezier(0.2,0.7,0.2,1) backwards}
  .abertura .texto>:nth-child(2){animation-delay:0.08s}
  .abertura .texto>:nth-child(3){animation-delay:0.16s}
  .abertura .texto>:nth-child(4){animation-delay:0.24s}
  .montra{animation:entra-direita 0.9s 0.15s cubic-bezier(0.2,0.7,0.2,1) backwards}

  /* Título grande: quatro textos, um a cada 4 s, a entrar de lado. */
  .frases{display:grid}
  .frase,.frase+.frase{display:block;grid-area:1/1;animation:frase 16s infinite both}
  .frase:nth-child(2){animation-delay:4s}
  .frase:nth-child(3){animation-delay:8s}
  .frase:nth-child(4){animation-delay:12s}

  /* Telemóvel: chega uma oferta de 4 em 4 s (Compensa, Pensa bem, Deixa passar). A folha da app sobe, o cartão do Radr
     cai por cima e o €/km e o €/h contam. */
  .camada.demo{display:block}
  .camada{--atraso:0s;animation:camada 12s var(--atraso) infinite both}
  .camada.pensa{--atraso:4s}
  .camada.nao{--atraso:8s}
  .camada .folha{animation:folha 12s var(--atraso) infinite both}
  .camada .cartao{animation:oferta 12s var(--atraso) infinite both}
  .m-linha{stroke-dasharray:100;animation:rota 4s infinite both}
  .m-pulso{transform-box:fill-box;transform-origin:center;animation:pulso 4s infinite}
  /* Contagem: três valores intermédios escritos no HTML aparecem um a seguir ao outro e depois o valor final
     (sem contadores CSS, que não atualizam em todos os browsers). */
  .ofertas .km,.ofertas .h{display:inline-grid}
  .ofertas .km>*,.ofertas .h>*{grid-area:1/1}
  .ofertas .passo{display:inline;animation:12s var(--atraso) infinite both step-end}
  .ofertas .p1{animation-name:passo1}
  .ofertas .p2{animation-name:passo2}
  .ofertas .p3{animation-name:passo3}
  .ofertas .v{animation:valor 12s var(--atraso) infinite both step-end}
}

@keyframes entra-lado{from{opacity:0.01;transform:translateX(-2.5rem)}}
@keyframes entra-direita{from{opacity:0.01;transform:translateX(3rem)}}
@keyframes frase{0%{opacity:0;transform:translateX(1.5rem)}3%,22%{opacity:1;transform:none}25%,100%{opacity:0;transform:translateX(-1.5rem)}}
@keyframes camada{0%,33.3%{visibility:visible}33.4%,100%{visibility:hidden}}
@keyframes folha{0%{transform:translateY(100%)}3.5%,30%{transform:none}33.3%,100%{transform:translateY(100%)}}
@keyframes oferta{
  0%,3%{opacity:0;transform:translateY(-1rem) scale(0.96)}
  6%,30%{opacity:1;transform:none}
  33.3%,100%{opacity:0;transform:translateX(1.5rem)}
}
/* Contagem do €/km e do €/h (step-end: cada valor fica até ao keyframe seguinte). Acaba aos 14 % do ciclo. */
@keyframes passo1{0%{opacity:0}3%{opacity:1}8%,100%{opacity:0}}
@keyframes passo2{0%{opacity:0}8%{opacity:1}11%,100%{opacity:0}}
@keyframes passo3{0%{opacity:0}11%{opacity:1}14%,100%{opacity:0}}
@keyframes valor{0%{opacity:0}14%,100%{opacity:1}}
@keyframes rota{0%{stroke-dashoffset:100}35%,85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes pulso{0%{opacity:0.5;transform:scale(1)}40%,100%{opacity:0;transform:scale(3)}}

/* Rolagem: as secções e os cartões entram de lado, ligados ao scroll (só onde há animation-timeline). */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .cab-sec,.passos li,.sinais li,.planos li,.contactos li,.gratis{animation:desliza linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
    .cab-sec{--dx:-3rem}
    .passos li{--dx:2.5rem}
    .passos li:nth-child(2){--dx:5rem}
    .passos li:nth-child(3){--dx:7.5rem}
    .sinais li{--dx:-3rem;animation-range:entry 0% cover 45%}
    .sinais li:nth-child(2){--dx:-7rem}
    .sinais li:nth-child(3){--dx:-11rem}
    .planos li{--dx:3rem;animation-range:entry 0% cover 45%}
    .planos li:nth-child(2){--dx:7rem}
    .planos li:nth-child(3){--dx:11rem}
    .planos li:nth-child(4){--dx:15rem}
    /* No fim da página o scroll acaba cedo: a Ajuda e o «7 dias grátis» completam a entrada assim que ficam inteiros no ecrã. */
    .contactos li,.gratis,#ajuda .cab-sec{animation-range:entry 0% entry 100%}
    .contactos li{--dx:2.5rem}
    .contactos li:nth-child(2){--dx:5rem}
    .contactos li:nth-child(3){--dx:7.5rem}
    .gratis{--dx:-2.5rem}
    /* A faixa dos 3 sinais desliza um pouco enquanto atravessa o ecrã. */
    .sinais{animation:faixa linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
@keyframes desliza{from{opacity:0.2;transform:translateX(var(--dx))}to{opacity:1;transform:none}}
@keyframes faixa{from{transform:translateX(1.5rem)}to{transform:translateX(-1.5rem)}}