/* portal/public/landing/landing.css — a LANDING de aurium.app.br (s.131 · j1 · marca j1-LAND) O CSS da parte A do mockup aprovado (docs/mockup-portal-cliente-v3-spatial.html, v4.2 — o bloco "A · LANDING" + o bloco "v4 · HERO CLARO"), copiado. O que mudou de forma, e só de forma: o `.app.movel` do mockup virou media query (≤ 720px, a mesma régua de portal.css); o `.ld` deixou de ser uma caixa rolável dentro da moldura e é o próprio documento (a página rola); o `.dark` do mockup virou o bloco ESCURO (prefers-color-scheme sem escolha, ou data-tema="escuro" — o controle "Aparência", s.131 j1-TEMA); os atributos style= do markup viraram classes (.sem-topo · .orig · .v.ok · .fbar .at · .fl .tot · .rod .esc), porque a CSP forte bloqueia estilo inline em silêncio. Tokens em :root (claro) e no bloco ESCURO (uma lista, dois seletores). Só a Jost (self-hosted, /fontes.css) e a fonte do sistema. */ :root{ --marca:#020493; --marca-h:#0A0FB8; --noite:#01025E; --marca-tint:rgba(2,4,147,.08); --marca-tint2:rgba(2,4,147,.14); --ouro:#B08D2F; --ouro-claro:#F4D56A; --link:#0F6CBD; --fundo:#F5F6FA; --surf:#FFFFFF; --surf2:#EEF0F5; --txt:#15161C; --txt2:#5F6368; --txt3:#7A7F88; --linha:#E4E6EC; --linha2:#CFD2DA; --ok:#107C10; --ok-bg:#E8F5E9; --s1:0 1px 2px rgba(20,30,60,.05), 0 8px 24px rgba(20,30,60,.07); --s2:0 2px 6px rgba(2,4,147,.10), 0 24px 60px rgba(2,4,147,.18); --r:20px; --r2:12px; --f:"Segoe UI Variable","Segoe UI",system-ui,-apple-system,sans-serif; --ft:"Jost","Segoe UI Variable","Segoe UI",system-ui,sans-serif; --ease:cubic-bezier(.2,.8,.2,1); --nav-fundo:rgba(245,246,250,.72); --nav-fundo2:rgba(245,246,250,.82); --h2b:var(--marca); --cardb:var(--marca); --tinta:var(--marca); } /* ===== ESCURO — UMA lista, em DOIS seletores (o guardião assere que as duas são IDÊNTICAS): (1) o aparelho escuro sem escolha (Automático) · (2) a escolha "Escuro" (data-tema, posto por /tema.js no ANTES desta folha). A escolha "Claro" tira o (1). Nada de .dark por classe. s.131 · j1-TEMA — decisão de Marcio 09/09: o modo é opção do usuário, guardada no aparelho. ===== */ @media (prefers-color-scheme: dark){ :root:not([data-tema="claro"]){ --marca-tint:rgba(120,130,255,.14); --marca-tint2:rgba(120,130,255,.22); --link:#7DB8F0; --fundo:#111218; --surf:#1B1C23; --surf2:#23242C; --txt:#F1F2F4; --txt2:#B4B8C0; --txt3:#8C9199; --linha:#2C2E36; --linha2:#3A3D47; --ok:#7ED67E; --ok-bg:#12311A; --s1:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35); --nav-fundo:rgba(17,18,24,.72); --nav-fundo2:rgba(17,18,24,.82); --h2b:#AEB2FF; --cardb:#C9CCFF; --tinta:#C9CCFF; color-scheme:dark } } :root[data-tema="escuro"]{ --marca-tint:rgba(120,130,255,.14); --marca-tint2:rgba(120,130,255,.22); --link:#7DB8F0; --fundo:#111218; --surf:#1B1C23; --surf2:#23242C; --txt:#F1F2F4; --txt2:#B4B8C0; --txt3:#8C9199; --linha:#2C2E36; --linha2:#3A3D47; --ok:#7ED67E; --ok-bg:#12311A; --s1:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35); --nav-fundo:rgba(17,18,24,.72); --nav-fundo2:rgba(17,18,24,.82); --h2b:#AEB2FF; --cardb:#C9CCFF; --tinta:#C9CCFF; color-scheme:dark } :root[data-tema="claro"]{ color-scheme:light } *{box-sizing:border-box} html{scroll-behavior:smooth} html,body{margin:0;min-height:100%} body{background:var(--fundo);color:var(--txt);font:14px/1.5 var(--f);-webkit-font-smoothing:antialiased} a{color:var(--link)} :focus-visible{outline:2px solid var(--link);outline-offset:2px} .ld-defs{position:absolute} .so-movel{display:none !important} /* ===== botões (os do mockup que a landing usa) ===== */ .btn{height:36px;padding:0 16px;border-radius:12px;border:1px solid var(--linha2);background:var(--surf);color:var(--txt);font:inherit;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;text-decoration:none;transition:transform .18s var(--ease),background .18s,box-shadow .18s} .btn:hover{background:var(--surf2);transform:translateY(-2px)} .btn:focus-visible{outline:2px solid var(--link);outline-offset:2px} .btn.p{background:var(--marca);border-color:var(--marca);color:#fff;box-shadow:0 6px 18px rgba(2,4,147,.28)} .btn.p:hover{background:var(--marca-h);box-shadow:0 10px 26px rgba(2,4,147,.34)} .btn.lg{height:52px;padding:0 28px;font-size:16px;border-radius:15px} .btn.vidro{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.34);color:#fff;backdrop-filter:blur(10px)} .btn.vidro:hover{background:rgba(255,255,255,.24)} /* ===== A · LANDING ===== */ .ld{background:var(--fundo)} .ld-nav{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:14px;padding:0 28px;height:56px;color:var(--txt);background:var(--nav-fundo);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border-bottom:1px solid transparent;transition:background .24s,border-color .24s,backdrop-filter .24s} .ld-nav.rolada{border-color:var(--linha);background:var(--nav-fundo2)} .ld-nav.clara{background:var(--nav-fundo2);color:var(--txt);border-color:var(--linha)} .ld-nav .marca{display:flex;align-items:center;gap:10px;font:500 19px var(--ft);letter-spacing:.02em;color:inherit;text-decoration:none} .ld-nav .marca svg{width:26px;height:24px} .ld-nav .esc{opacity:.75;font-size:12.5px;border-left:1px solid var(--linha2);padding-left:14px;color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:opacity .18s} .ld-nav .esc:hover{opacity:1;text-decoration:underline;text-underline-offset:4px} .ld-nav .sep{flex:1} .ld-nav .tema-ctl{margin-right:2px} /* ===== tema · o controle "Aparência" (Automático · Claro · Escuro) — s.131 · j1-TEMA. O MESMO bloco em portal.css e landing.css (o guardião assere a igualdade). Pílulas 999px do manual 08 §8 (chip); o marcado em --tinta sobre --surf; o rótulo em --txt2 (≥ 4,5:1). .compacto (a barra da landing no celular): um botão abre a caixa sob a barra — fora da rolagem, dentro do vidro. .linha: rótulo em cima. ===== */ .tema-ctl{position:relative;display:inline-flex;align-items:center;flex:none} .tema-caixa{display:inline-flex;align-items:center;gap:8px} .tema-rot{font-size:12px;font-weight:600;color:var(--txt2);white-space:nowrap} .tema-grupo{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:var(--surf2);border:1px solid var(--linha)} .tema-grupo [role=radio]{height:26px;padding:0 10px;border-radius:999px;border:0;background:transparent;color:var(--txt2);font:600 12px var(--f);cursor:pointer;white-space:nowrap;transition:background .18s,color .18s} .tema-grupo [role=radio]:hover{color:var(--txt)} .tema-grupo [role=radio][aria-checked=true]{background:var(--surf);color:var(--tinta);box-shadow:var(--s1)} .tema-grupo [role=radio]:focus-visible{outline:2px solid var(--link);outline-offset:1px} .tema-abrir{display:none;width:36px;height:36px;border-radius:999px;border:1px solid var(--linha2);background:var(--surf);color:var(--txt);align-items:center;justify-content:center;cursor:pointer;padding:0;flex:none} .tema-abrir svg{width:18px;height:18px} .tema-abrir:focus-visible{outline:2px solid var(--link);outline-offset:2px} .tema-ctl.linha .tema-caixa{flex-direction:column;align-items:flex-start;gap:6px} @media (max-width:720px){ .tema-ctl.compacto .tema-abrir{display:inline-flex} .tema-ctl.compacto .tema-caixa{display:none;position:absolute;right:0;top:44px;flex-direction:column;align-items:stretch;gap:6px;padding:10px;border-radius:14px;background:var(--surf);color:var(--txt);box-shadow:var(--s2);border:1px solid var(--linha);z-index:6;min-width:180px} .tema-ctl.compacto.aberto .tema-caixa{display:flex} .tema-ctl.compacto .tema-rot{padding:0 4px} .tema-ctl.compacto .tema-grupo{flex-direction:column;align-items:stretch;border-radius:12px;padding:4px} .tema-ctl.compacto .tema-grupo [role=radio]{height:40px;text-align:left;padding:0 12px;border-radius:9px;font-size:13.5px} } .ld-nav .btn.vidro,.ld-nav.clara .btn.vidro{background:var(--marca);color:#fff;border-color:var(--marca);height:32px;padding:0 16px;border-radius:999px;font-size:13px;backdrop-filter:none;box-shadow:none} .ld-nav .btn.vidro:hover{background:var(--marca-h)} /* hero claro (v4): espaço, tipo, um objeto */ .hero{margin-top:-56px;background:var(--fundo);color:var(--txt);padding:118px 28px 72px;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;overflow:visible} .h-abre{height:64px;margin-bottom:26px} .h-abre svg{width:64px;height:57px;overflow:visible} .h-tr{fill:none;stroke:var(--marca);stroke-width:1.6;stroke-dasharray:2400;stroke-dashoffset:2400;animation:desenha 1.5s var(--ease) forwards} .h-ch{fill:url(#gold);opacity:0;animation:aparece .8s ease-out 1.2s forwards} @keyframes desenha{to{stroke-dashoffset:0}} @keyframes aparece{to{opacity:1}} @keyframes sobe{to{opacity:1;transform:none}} .hero h1{font:300 76px/1.02 var(--ft);letter-spacing:-.03em;margin:0 0 18px;color:var(--txt);text-wrap:balance} .hero h1 b{font-weight:600;color:var(--h2b)} .hero p{font-size:19px;line-height:1.5;max-width:600px;color:var(--txt2);margin:0 auto 26px} .hero .cta{display:flex;justify-content:center;gap:22px;align-items:center;flex-wrap:wrap} .hero .cta a:not(.btn){color:var(--link);text-decoration:none;font-size:15px;font-weight:500} .hero .cta a:not(.btn):hover{text-decoration:underline;text-underline-offset:4px} .hero .btn.lg{height:48px;padding:0 24px;border-radius:999px;font-size:15px} .casc>*{opacity:0;transform:translateY(16px);animation:sobe .6s var(--ease) forwards} .casc.h-txt>*:nth-child(1){animation-delay:1.35s} .casc.h-txt>*:nth-child(2){animation-delay:1.5s} .casc.h-txt>*:nth-child(3){animation-delay:1.65s} .h-obj{position:relative;margin-top:56px;width:min(640px,100%);opacity:0;transform:translateY(28px);animation:sobe .9s var(--ease) 1.85s forwards;will-change:transform} .h-card{position:relative;z-index:1;background:var(--surf);border:1px solid var(--linha);border-radius:26px;padding:30px 34px 26px;text-align:left;box-shadow:0 1px 2px rgba(20,30,60,.05),0 30px 70px rgba(2,4,147,.16)} .h-fio{width:44px;height:3px;border-radius:3px;background:linear-gradient(90deg,#C99A2E,#F4D56A,#B8860B);margin-bottom:16px} .h-card small{display:block;color:var(--txt2);font-size:13px;font-weight:600} .h-card>b{display:block;font:500 54px/1.05 var(--ft);letter-spacing:-.025em;color:var(--cardb);margin:6px 0 20px;font-variant-numeric:tabular-nums} .h-min{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;border-top:1px solid var(--linha);padding-top:16px} .h-min span{font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--txt)} .h-min i{display:block;font-style:normal;font-size:11.5px;color:var(--txt3);font-weight:600;margin-bottom:3px} .h-sombra{position:absolute;left:8%;right:8%;bottom:-18px;height:40px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(2,4,147,.18),transparent 70%);filter:blur(12px)} /* os atos */ .ato{padding:112px 28px} .ato.claro{background:var(--fundo)} .ato.azul{background:linear-gradient(180deg,var(--noite),var(--marca));color:#fff} .ato.sem-topo{padding-top:0} .ato h2{font:300 44px/1.1 var(--ft);letter-spacing:-.02em;margin:0 0 12px} .ato h2 b{font-weight:600} .ato .lead{color:var(--txt2);font-size:17px;max-width:640px;margin:0 0 36px} .ato.azul .lead{color:rgba(255,255,255,.85)} .fio2{width:44px;height:3px;border-radius:3px;background:linear-gradient(90deg,#C99A2E,#F4D56A,#B8860B);margin:0 0 18px} .rev{opacity:0;transform:translateY(20px);transition:opacity .48s var(--ease),transform .48s var(--ease)} .rev.on{opacity:1;transform:none} .rev.d1{transition-delay:.09s} .rev.d2{transition-delay:.18s} .rev.d3{transition-delay:.27s} /* A3 produto */ .prod{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start} .prod .fone-wrap{position:sticky;top:96px;display:flex;justify-content:center} .fone{width:300px;border-radius:38px;border:8px solid #17171c;background:#17171c;overflow:hidden;box-shadow:0 30px 70px rgba(2,4,147,.22);position:relative;height:560px;isolation:isolate;transform:translateZ(0)} .fone .tela-f{position:absolute;inset:0;border-radius:30px;overflow:hidden;background:var(--fundo);opacity:0;transform:translateY(8px);transition:opacity .32s var(--ease),transform .32s var(--ease)} .fone .tela-f.at{opacity:1;transform:none} .fone .ftop{background:rgba(255,255,255,.86);backdrop-filter:blur(12px);padding:12px 14px;font:500 15px var(--ft);display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--linha);color:#15161C} .fone .ftop svg{width:18px;height:16px} .fone .fg{margin:12px;background:linear-gradient(135deg,#0B0FB5,var(--marca) 60%,var(--noite));color:#fff;border-radius:16px;padding:14px} .fone .fg small{font-size:11px;opacity:.85;display:block} .fone .fg b{font:500 26px var(--ft);display:block;margin-top:2px;color:var(--ouro-claro)} .fone .fn{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 12px 12px} .fone .fn div{background:var(--surf);border:1px solid var(--linha);border-radius:12px;padding:8px 10px;font-size:11px;color:var(--txt2)} .fone .fn b{display:block;color:var(--txt);font-size:14px} .fone .fl{margin:12px 12px 0;background:var(--surf);border:1px solid var(--linha);border-radius:14px;overflow:hidden} .fone .fl div{display:flex;justify-content:space-between;padding:9px 10px;border-bottom:1px solid var(--linha);font-size:11.5px} .fone .fl div:last-child{border-bottom:0} .fone .fl div.tot{background:var(--surf2)} .fone .fl b{display:block;font-size:12px} .fone .fl small{color:var(--txt3);font-size:10.5px} .fone .fl .v{font-weight:600;text-align:right;white-space:nowrap} .fone .fl .v.ok{color:var(--ok)} .fone .fbar{position:absolute;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(5,1fr);background:rgba(255,255,255,.86);backdrop-filter:blur(12px);border-top:1px solid var(--linha);padding:6px 4px 8px;font-size:9px;color:#7A7F88;text-align:center;font-weight:600} .fone .fbar .at{color:var(--marca)} .fone .fbar .mid{margin-top:-18px} .fone .fbar .mid i{display:block;width:36px;height:36px;border-radius:50%;background:var(--marca);margin:0 auto 2px;color:#fff;font-size:20px;line-height:36px;font-style:normal} .frases{display:flex;flex-direction:column;gap:38vh;padding:12vh 0 30vh} .frase{font:300 32px/1.2 var(--ft);color:var(--txt3);transition:color .32s;max-width:420px;position:relative;padding-left:20px} .frase:before{content:"";position:absolute;left:0;top:8px;width:3px;height:0;background:linear-gradient(180deg,#C99A2E,#F4D56A);border-radius:3px;transition:height .4s var(--ease)} .frase.at{color:var(--txt)} .frase.at:before{height:calc(100% - 16px)} /* A4 passos */ .passos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:p} .passo{background:var(--surf);border:1px solid var(--linha);border-radius:var(--r);padding:0;box-shadow:var(--s1);position:relative;overflow:hidden;transition:transform .18s var(--ease),box-shadow .18s} .passo:hover{transform:translateY(-3px);box-shadow:var(--s2)} .passo .ui{height:150px;background:linear-gradient(180deg,var(--surf2),var(--surf));display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--linha)} .passo .tx{padding:18px 20px 22px} .passo .tx:before{counter-increment:p;content:counter(p);display:inline-flex;width:30px;height:30px;border-radius:50%;background:var(--marca);color:var(--ouro-claro);font:600 14px var(--ft);align-items:center;justify-content:center;margin-bottom:10px} .passo h3{margin:0 0 6px;font:500 19px var(--ft)} .passo p{margin:0;color:var(--txt2)} .mini-cheque{width:150px;height:78px;border-radius:8px;background:#fff;border:1px solid var(--linha2);box-shadow:var(--s1);position:relative;font-size:8px;color:#7A7F88;padding:8px} .mini-cheque i{position:absolute;right:8px;bottom:8px;width:44px;height:12px;background:linear-gradient(90deg,transparent,#7A7F88)} .mini-rel{width:170px;background:#fff;border:1px solid var(--linha2);border-radius:10px;box-shadow:var(--s1);font-size:9px;overflow:hidden;color:#15161C} .mini-rel div{display:flex;justify-content:space-between;padding:5px 8px;border-bottom:1px solid #E4E6EC} .mini-rel .ok{color:#107C10;font-weight:600} .mini-cod{display:flex;gap:4px} .mini-cod i{width:22px;height:28px;border:1px solid var(--linha2);border-radius:5px;background:#fff;color:#15161C;display:flex;align-items:center;justify-content:center;font:600 13px Consolas,monospace} .ato .orig{color:var(--txt2);margin:22px 0 0} /* A5 segurança */ .seg{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .vidro{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:var(--r);padding:22px;color:#fff;transition:transform .18s var(--ease),background .18s} .vidro:hover{transform:translateY(-3px);background:rgba(255,255,255,.17)} .vidro h3{margin:0 0 6px;font:500 19px var(--ft)} .vidro p{margin:0;color:rgba(255,255,255,.85)} .vidro p a{color:#fff} .vidro .ic{width:40px;height:40px;border-radius:12px;background:rgba(244,213,106,.16);color:var(--ouro-claro);display:flex;align-items:center;justify-content:center;margin-bottom:14px} .vidro .ic svg{width:20px;height:20px;stroke-dasharray:80;stroke-dashoffset:80;transition:stroke-dashoffset .5s var(--ease) .2s} .rev.on .vidro .ic svg{stroke-dashoffset:0} /* A6 prova social */ .fita{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} .fita .trilho{display:flex;gap:56px;width:max-content;animation:desliza 60s linear infinite} .fita:hover .trilho{animation-play-state:paused} @keyframes desliza{to{transform:translateX(-50%)}} .fita span{font:500 18px var(--ft);color:var(--txt3);white-space:nowrap;letter-spacing:.02em;opacity:.7} /* A7 ajuda */ .ajuda{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;background:var(--surf);border:1px solid var(--linha);border-radius:var(--r);padding:28px;box-shadow:var(--s1)} .ajuda h2{font-size:30px} .ajuda .lead{margin-bottom:14px} .ajuda .cont{display:flex;gap:22px;flex-wrap:wrap;color:var(--txt2)} .ajuda .cont b{color:var(--txt);display:block;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em} /* rodapé */ .rod{padding:32px 28px;background:var(--noite);color:rgba(255,255,255,.8);font-size:12.5px;display:grid;grid-template-columns:1fr auto;gap:12px} .rod a{color:#fff;text-decoration:none;margin-left:16px;border-bottom:1px solid transparent} .rod a:hover{border-color:#fff} .rod a.esc{margin:0;font-weight:600} .ld-cta{position:sticky;bottom:0;padding:12px 16px;background:var(--nav-fundo2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--linha);z-index:4} .ld-cta .btn{width:100%} /* ===== a casca leve de /termo e /privacidade ===== */ .doc-termo{max-width:760px;margin:0 auto;padding:40px 28px 64px} .doc-termo h1{font:300 40px/1.1 var(--ft);letter-spacing:-.02em;margin:0 0 6px} .doc-termo .doc-corpo{background:var(--surf);border:1px solid var(--linha);border-radius:var(--r);padding:26px 28px;box-shadow:var(--s1);font-size:15px;line-height:1.6;margin-top:22px} .doc-termo .doc-corpo h6{margin:0 0 14px;font:500 20px var(--ft);color:var(--txt)} .doc-termo .doc-corpo p{margin:0 0 12px} .doc-termo .doc-corpo p:last-child{margin-bottom:0} .doc-termo .doc-corpo .pc-termo-fim{color:var(--txt3);text-align:center;font-size:13px;margin-top:18px} .doc-rodape{margin-top:18px;color:var(--txt3);font-size:12.5px;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center} .doc-rodape code{font:12px Consolas,monospace;word-break:break-all;color:var(--txt2)} .doc-rodape a{color:var(--link);text-decoration:none;font-weight:500} .doc-rodape a:hover{text-decoration:underline} /* ===== celular (o .app.movel do mockup) ===== */ @media (max-width:720px){ .so-movel{display:flex !important} .ld-nav{padding:0 16px;height:58px} .ld-nav .esc{display:none} .hero{margin-top:-58px;padding:96px 22px 48px} .hero h1{font-size:44px} .hero p{font-size:16px} .h-obj{margin-top:36px} .h-card{padding:22px 22px 20px;border-radius:22px} .h-card>b{font-size:38px} .h-min{grid-template-columns:1fr 1fr} .ato{padding:64px 22px} .ato h2{font-size:30px} .prod{grid-template-columns:1fr;gap:20px} .prod .fone-wrap{position:sticky;top:70px;z-index:1} .fone{width:230px;height:430px;border-width:6px} .fone .tela-f{border-radius:32px} .frases{gap:44px;padding:20px 0 40px} .frase{font-size:24px} .passos{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;margin:0 -22px;padding:14px 22px 6px;scrollbar-width:none} .passo{flex:0 0 82%;scroll-snap-align:center} .seg{grid-template-columns:1fr 1fr;gap:10px} .vidro{padding:16px} .vidro h3{font-size:15px} .vidro p{font-size:12.5px} .ajuda{grid-template-columns:1fr;padding:20px} .rod{grid-template-columns:1fr;padding:24px 22px} .rod a{margin:0 16px 0 0} .doc-termo{padding:28px 18px 48px} .doc-termo h1{font-size:32px} .doc-termo .doc-corpo{padding:18px 16px} } /* ===== reduzir movimento: aparece pronto, sem parallax, sem fita ===== */ @media (prefers-reduced-motion:reduce){ .h-tr{animation:none;stroke-dashoffset:0} .h-ch{animation:none;opacity:1} .h-obj{animation:none;opacity:1;transform:none} .casc>*{animation:none;opacity:1;transform:none} .rev{opacity:1 !important;transform:none !important} .fita .trilho{animation:none} .vidro .ic svg{stroke-dashoffset:0;transition:none} html{scroll-behavior:auto} }