/* Heróis das páginas de solução — portados de /root/quilha-heros-servicos_1.html.
   Um herói por serviço (.s1 a .s8), cada um com a sua animação. `@scope` prende tudo ao
   wrapper `.hero-servico`. Fontes e cores vêm dos tokens do tema; ficaram de fora o reset,
   a tipografia do protótipo e o que era só da página de documentação (.doc, .ficha, .fim).
   Os `@keyframes` ficam fora do `@scope` de propósito: nome de animação é global. */

@keyframes pisca{50%{opacity:0}}
@keyframes enche{0%{width:0}70%{width:78%}100%{width:100%}}
@keyframes enche2{to{width:100%}}
@keyframes aperta{45%{transform:scale(.84);box-shadow:0 0 0 9px rgba(210,167,86,.2)}}
@keyframes marca{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes aterrissa{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}
@keyframes pousa{from{opacity:0;transform:scale(.75)}to{opacity:1;transform:none}}
@keyframes pontinho{0%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

@scope (.hero-servico) {

:scope {
  /* Paleta do protótipo apontando para os tokens do tema onde eles existem. */
  --abissal: var(--color-abissal); --profundo: var(--color-profundo); --mare: var(--color-mare);
  --areia: var(--color-areia); --neve: var(--color-neve); --cinza-frio: var(--color-cinza-frio);
  --dourado: var(--color-accent); --dourado-claro: var(--color-dourado-claro);
  /* Acentos que só existem nas artes destes heróis. */
  --turquesa:#2FA8B5; --raso:#7FD4DE; --coral:#E8724C; --verde-mar:#3FB68B; --ambar:#E8A33D;
  --grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --disp: var(--font-heading);
  --corpo: var(--font-body);
  --mono: var(--font-small);
}
.wrap{max-width:var(--largura-max);margin:0 auto;padding:0 var(--respiro)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.hero{position:relative;min-height:var(--altura-heroi);display:flex;align-items:center;overflow:hidden;isolation:isolate;
  background:linear-gradient(165deg,#0C2B3B,#071C2B 56%,var(--abissal))}
.hero .grao{position:absolute;inset:0;z-index:6;background-image:var(--grao);opacity:.06;mix-blend-mode:overlay;pointer-events:none}
/* Topo maior: o cabeçalho fixo (72px) e a trilha ficam por cima do herói. */
.hero .conteudo{position:relative;z-index:5;padding:158px var(--respiro) 104px}
.hero .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dourado)}
.hero h3{font-size:clamp(28px,3.5vw,42px);color:#fff;max-width:20ch;line-height:1.12}
.hero .sub{margin-top:17px;max-width:50ch;color:#BCD3DC;font-size:16.5px}
.acoes{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:32px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:100px;background:var(--dourado);
  color:#12212E;font-weight:500;font-size:15px;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(210,167,86,.8)}
.link-sec{font-size:14.5px;color:#BCD3DC;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:2px}
.link-sec:hover{color:#fff;border-color:var(--dourado)}
.link-sec::after{content:" →"}
/* Linha miúda abaixo dos botões: existe na copy aprovada das páginas, não no protótipo. */
.hero.centro .micro{margin-left:auto;margin-right:auto;text-align:center}
.micro{margin-top:26px;max-width:52ch;font-family:var(--mono);font-size:12.5px;line-height:1.55;
  letter-spacing:.02em;text-transform:none;color:#9FBBC7}
.hero.painel .conteudo{width:100%}
.hero.painel .grade{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.hero.centro .conteudo{text-align:center;margin:0 auto}
.hero.centro h1,.hero.centro .sub{margin-left:auto;margin-right:auto}
.hero.centro .acoes{justify-content:center}
.veu{position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(72% 62% at 50% 50%,rgba(4,16,28,.55),rgba(4,16,28,.9) 82%)}
.moldura{border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(4,16,28,.55);
  backdrop-filter:blur(8px);box-shadow:0 40px 70px -40px rgba(0,0,0,.9);overflow:hidden}
.s1 .busca{padding:22px}
.s1 .campo{display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:100px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16)}
.s1 .campo svg{width:16px;height:16px;stroke:#8FB0BE;fill:none;stroke-width:1.6;flex:0 0 auto}
.s1 .campo span{font-size:15px;color:#EAF3F6;white-space:nowrap}
.s1 .cursor{display:inline-block;width:1.5px;height:17px;background:var(--dourado);vertical-align:-3px;
  animation:pisca 1s steps(2) infinite}
.s1 .carga{height:2px;border-radius:2px;background:rgba(255,255,255,.09);margin:14px 4px 0;overflow:hidden;opacity:0;transition:opacity .25s}
.s1 .carga u{display:block;height:100%;width:0;border-radius:2px;text-decoration:none;
  background:linear-gradient(90deg,var(--dourado-claro),var(--dourado))}
.s1.carregando .carga{opacity:1}
.s1.carregando .carga u{animation:enche 1.5s cubic-bezier(.3,.9,.4,1) forwards}
.s1 .res{margin-top:16px;display:flex;flex-direction:column;gap:11px}
.s1 .item{padding:13px 15px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid transparent}
.s1 .item.pago{background:rgba(210,167,86,.1);border-color:rgba(210,167,86,.38);
  opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
.s1.mostrando .item.pago{opacity:1;transform:none}
.s1 .item .badge{display:inline-block;font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dourado-claro);border:1px solid rgba(210,167,86,.5);border-radius:4px;padding:1px 6px;margin-right:8px}
.s1 .item .url{font-family:var(--mono);font-size:9.5px;color:#8FB0BE}
.s1 .item b{display:block;font-family:var(--disp);font-size:15px;color:#EAF3F6;font-weight:600;margin-top:8px;line-height:1.25}
.s1 .item p{margin-top:6px;font-size:12.5px;line-height:1.45;color:#A9C6D1}
.s1 .item.organico{opacity:.4}
.s1 .item.organico b{font-size:13.5px;font-weight:500;margin-top:0;color:#B9CFD9}
.s1 .item.organico u{display:block;height:6px;border-radius:4px;background:rgba(255,255,255,.09);margin-top:8px;text-decoration:none}
.s1 .item.organico u.curta{width:58%}
.s2 .palco{perspective:1300px;display:grid;place-items:center;min-height:440px}
.s2 .cena{position:relative;transform-style:preserve-3d;transform:rotateY(-17deg) rotateX(7deg) rotate(-1.5deg)}
.s2 .fone{width:252px;border-radius:32px;padding:9px;background:linear-gradient(160deg,#1E3040,#0A1B2E);
  border:1px solid rgba(255,255,255,.16);box-shadow:0 60px 84px -40px rgba(0,0,0,.95)}
.s2 .tela{position:relative;border-radius:24px;overflow:hidden;background:#091621;height:420px}
.s2 .carga{position:absolute;top:0;left:0;right:0;z-index:3;height:3px;background:rgba(255,255,255,.08);opacity:0}
.s2 .carga u{display:block;height:100%;width:0;text-decoration:none;background:linear-gradient(90deg,#3FB68B,#5FD3A8)}
.s2.carregando .carga{opacity:1}
.s2.carregando .carga u{animation:enche2 1s linear forwards}
.s2 .site > *{opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease}
.s2.pronto .site > *{opacity:1;transform:none}
.s2.pronto .site > *:nth-child(2){transition-delay:.08s}
.s2.pronto .site > *:nth-child(3){transition-delay:.16s}
.s2.pronto .site > *:nth-child(4){transition-delay:.24s}
.s2.pronto .site > *:nth-child(5){transition-delay:.32s}
.s2 .site .capa{height:150px;background:linear-gradient(150deg,#1E5F7E,#0B2740)}
.s2 .site .linha{height:9px;border-radius:5px;background:rgba(255,255,255,.22);margin:16px 18px 0}
.s2 .site .linha.curta{width:56%;background:rgba(255,255,255,.13)}
.s2 .site .cards{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:16px 18px 0}
.s2 .site .cards i{height:58px;border-radius:9px;background:rgba(255,255,255,.13);display:block}
.s2 .site .cta{margin:18px;height:36px;border-radius:100px;background:var(--dourado)}
.s2 .busca{position:absolute;left:-104px;top:26px;transform:translateZ(80px);display:flex;align-items:center;gap:10px;
  padding:8px 9px 8px 15px;border-radius:100px;background:rgba(9,26,38,.96);border:1px solid rgba(255,255,255,.2);
  box-shadow:0 28px 44px -18px rgba(0,0,0,.95);white-space:nowrap}
.s2 .busca span{font-family:var(--mono);font-size:11px;color:#CBDCE4}
.s2 .busca .ir{position:relative;width:32px;height:32px;border-radius:50%;background:var(--dourado);color:#12212E;
  display:grid;place-items:center;font-size:14px;flex:0 0 auto}
.s2.clicando .busca .ir{animation:aperta .5s ease}
.s2 .mao{position:absolute;right:-2px;bottom:-4px;width:17px;height:17px;border-radius:50%;
  border:2px solid rgba(255,255,255,.85);background:rgba(255,255,255,.14);opacity:0;transition:opacity .3s,transform .3s}
.s2.clicando .mao{opacity:1;transform:translate(-5px,-5px)}
.s2 .crono{position:absolute;left:-92px;bottom:118px;transform:translateZ(66px);font-family:var(--mono);font-size:12px;
  color:var(--dourado-claro);opacity:0;transition:opacity .3s;padding:8px 14px;border-radius:100px;
  background:rgba(9,26,38,.96);border:1px solid rgba(210,167,86,.4);box-shadow:0 22px 36px -18px rgba(0,0,0,.9);
  white-space:nowrap}
.s2.carregando .crono,.s2.pronto .crono{opacity:1}
.s3 .duo{position:relative;display:grid;grid-template-columns:1fr 146px;gap:24px;align-items:start;padding:22px}
.s3 .cal .rot{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:#7FA0B0;margin-bottom:12px}
.s3 .dias{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:6px}
.s3 .dias span{text-align:center;font-family:var(--mono);font-size:8.5px;color:#5E7C8C}
.s3 .celulas{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.s3 .celulas i{position:relative;aspect-ratio:1;border-radius:5px;background:rgba(255,255,255,.05);display:block;
  transition:background .3s,box-shadow .3s}
.s3 .celulas i.post{background:rgba(47,168,181,.28);box-shadow:inset 0 0 0 1px rgba(127,212,222,.35)}
.s3 .celulas i.feito{background:rgba(63,182,139,.3);box-shadow:inset 0 0 0 1px rgba(95,211,168,.55)}
.s3 .celulas i.feito::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;
  font-size:10px;color:#7FE3BE;animation:marca .3s ease}
.s3 .voando{position:absolute;z-index:4;border-radius:5px;pointer-events:none;
  background:linear-gradient(150deg,#3FB68B,#0F5D57);box-shadow:0 10px 22px -8px rgba(0,0,0,.9);
  transition:transform .85s cubic-bezier(.5,0,.2,1),opacity .85s ease,border-radius .85s}
.s3 .fone{border-radius:20px;padding:7px;background:#0A1B2E;border:1px solid rgba(255,255,255,.12)}
.s3 .perfil{display:flex;align-items:center;gap:8px;padding:8px 6px 10px}
.s3 .perfil .av{width:30px;height:30px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(140deg,#2FA8B5,#12384A);box-shadow:0 0 0 1.5px rgba(210,167,86,.65)}
.s3 .perfil .dados{flex:1;display:flex;flex-direction:column;gap:5px}
.s3 .perfil u{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.16);text-decoration:none}
.s3 .perfil u.c{width:62%;background:rgba(255,255,255,.09)}
.s3 .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0 6px 10px}
.s3 .stats u{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.09);text-decoration:none}
.s3 .feed{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;border-radius:12px;overflow:hidden}
.s3 .feed i{aspect-ratio:1;display:block}
.s3 .feed i.novo{animation:aterrissa .45s cubic-bezier(.2,.9,.3,1.2)}
.s4 .funil{position:relative;height:360px;padding:16px}
.s4 .entrada{position:absolute;left:50%;top:14px;transform:translateX(-50%);padding:9px 17px;border-radius:100px;
  border:1px dashed rgba(210,167,86,.55);background:rgba(210,167,86,.08);font-family:var(--mono);font-size:9px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dourado-claro);white-space:nowrap}
.s4 .seta{position:absolute;color:rgba(255,255,255,.28);font-size:15px;line-height:1}
.s4 .seta.e{left:27%;top:58px}
.s4 .seta.d{right:27%;top:58px}
.s4 .seta.v1{right:22.5%;top:166px}
.s4 .seta.v2{right:22.5%;top:254px}
.s4 .caixa{position:absolute;width:47%;border-radius:12px;padding:11px 12px 12px;background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09);transition:box-shadow .35s,border-color .35s}
.s4 .caixa.pulsa{border-color:rgba(210,167,86,.55);box-shadow:0 0 0 3px rgba(210,167,86,.13)}
.s4 .caixa b{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:#7FA0B0}
.s4 .caixa em{position:absolute;top:10px;right:12px;font-style:normal;font-family:var(--mono);font-size:11px;color:#C6DBE3}
.s4 .pilha{display:flex;flex-direction:column;gap:5px;margin-top:9px;min-height:40px}
.s4 .pilha u{display:block;height:14px;border-radius:4px;background:rgba(255,255,255,.11);text-decoration:none;
  animation:pousa .35s cubic-bezier(.2,.9,.3,1.2)}
.s4 .pilha u.ouro{background:linear-gradient(90deg,var(--dourado),#B38F44)}
.s4 .nq{left:0;top:94px}
.s4 .ql{right:0;top:94px}
.s4 .pr{right:0;top:182px}
.s4 .fc{right:0;top:270px}
.s4 .fc{border-color:rgba(210,167,86,.28)}
.s4 .chip{position:absolute;z-index:6;padding:7px 14px;border-radius:100px;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;background:rgba(9,26,38,.97);
  border:1px solid rgba(210,167,86,.55);color:var(--dourado-claro);box-shadow:0 14px 26px -10px rgba(0,0,0,.95);
  transition:transform .72s cubic-bezier(.45,0,.2,1),opacity .3s ease}
.s5 .zap{border-radius:26px;padding:9px;background:#0A1B2E;border:1px solid rgba(255,255,255,.13);
  box-shadow:0 44px 70px -40px rgba(0,0,0,.95);max-width:330px;margin-left:auto}
.s5 .tela{border-radius:19px;overflow:hidden;background:#07141D}
.s5 .barra{display:flex;align-items:center;justify-content:space-between;padding:9px 14px 7px;
  font-family:var(--mono);font-size:9.5px;color:#7FA0B0}
.s5 .topo-chat{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.06)}
.s5 .topo-chat i{width:32px;height:32px;border-radius:50%;background:linear-gradient(140deg,#3FB68B,#0F5D57);flex:0 0 auto}
.s5 .topo-chat b{display:block;font-family:var(--disp);font-size:13.5px;color:#fff}
.s5 .topo-chat span{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:#5FD3A8}
.s5 .conversa{padding:16px 14px;display:flex;flex-direction:column;gap:9px;min-height:250px}
.s5 .conversa .msg{max-width:84%;padding:9px 13px;font-size:13px;border-radius:14px;
  opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .35s cubic-bezier(.2,.9,.3,1.2)}
.s5 .conversa .msg.on{opacity:1;transform:none}
.s5 .cli{align-self:flex-start;background:rgba(255,255,255,.08);color:#D5E5EC;border-bottom-left-radius:4px}
.s5 .bot{align-self:flex-end;background:rgba(63,182,139,.2);color:#CFEFE2;border-bottom-right-radius:4px}
.s5 .marcado{align-self:center !important;background:rgba(210,167,86,.16) !important;color:var(--dourado-claro) !important;
  border-radius:100px !important;font-family:var(--mono);font-size:9.5px !important;letter-spacing:.1em;text-transform:uppercase}
.s5 .digitando{align-self:flex-end;display:none;gap:4px;padding:11px 14px;border-radius:14px 14px 4px 14px;
  background:rgba(63,182,139,.14)}
.s5 .digitando.on{display:flex}
.s5 .digitando i{width:5px;height:5px;border-radius:50%;background:#7FE3BE;display:block;animation:pontinho 1.1s infinite}
.s5 .digitando i:nth-child(2){animation-delay:.18s}
.s5 .digitando i:nth-child(3){animation-delay:.36s}
.s6 .mesa{position:relative;height:330px;padding:20px}
.s6 .corte i{position:absolute;width:15px;height:15px;opacity:.35}
.s6 .corte i.tl{left:10px;top:10px;border-left:1px solid #8FB0BE;border-top:1px solid #8FB0BE}
.s6 .corte i.tr{right:10px;top:10px;border-right:1px solid #8FB0BE;border-top:1px solid #8FB0BE}
.s6 .corte i.bl{left:10px;bottom:10px;border-left:1px solid #8FB0BE;border-bottom:1px solid #8FB0BE}
.s6 .corte i.br{right:10px;bottom:10px;border-right:1px solid #8FB0BE;border-bottom:1px solid #8FB0BE}
.s6 .peca{position:absolute;left:50%;top:52%;width:250px;height:164px;margin:-82px 0 0 -125px;border-radius:7px;
  overflow:hidden;box-shadow:0 34px 54px -22px rgba(0,0,0,.95);border:1px solid rgba(255,255,255,.14);
  transition:transform .85s cubic-bezier(.35,0,.2,1),opacity .6s ease}
.s6 .peca.p0{transform:rotate(-3deg);z-index:3;opacity:1}
.s6 .peca.p1{transform:translate(30px,-40px) rotate(4.5deg) scale(.95);z-index:2;opacity:.78}
.s6 .peca.p2{transform:translate(58px,-76px) rotate(10deg) scale(.9);z-index:1;opacity:.5}
.s6 .pc{width:100%;height:100%;padding:16px;position:relative;display:flex;flex-direction:column;gap:9px}
.s6 .pc.claro{background:linear-gradient(150deg,#F6F2EB,#DCD3C4);color:#12384A}
.s6 .pc.escuro{background:linear-gradient(150deg,#16405A,#0A1B2E);color:#EAF3F6}
.s6 .pc.ouro{background:linear-gradient(150deg,#D2A756,#8A6A22);color:#1B2A16}
.s6 .pc .marca{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.s6 .pc u{display:block;height:5px;border-radius:3px;background:currentColor;opacity:.3;text-decoration:none}
.s6 .pc u.m{width:74%}
.s6 .pc u.c{width:48%}
.s6 .pc .cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:2px}
.s6 .pc .cols div{display:flex;flex-direction:column;gap:5px}
.s6 .pc .foto{height:50px;border-radius:4px;background:linear-gradient(150deg,#2FA8B5,#0F3A4D);opacity:.9}
.s6 .pc .titulo{height:9px;width:58%;border-radius:4px;background:currentColor;opacity:.55}
.s6 .qr{position:absolute;right:14px;bottom:13px;width:36px;height:36px;border-radius:4px;padding:3px;
  background:#0A1B2E;display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.s6 .qr u{background:#EAF3F6;opacity:1;border-radius:1px;height:auto}
.s6 .qr u:nth-child(3n){opacity:.3}
.s6 .qr u:nth-child(5n){opacity:.55}
.s6 .cmyk{position:absolute;left:20px;bottom:16px;display:flex;align-items:center;gap:4px;z-index:4}
.s6 .cmyk i{width:15px;height:10px;border-radius:1px;display:block}
.s6 .cmyk .reg{width:11px;height:11px;border-radius:50%;border:1.5px solid #8FB0BE;background:transparent;margin-left:5px}
.s6 .legenda-mesa{position:absolute;right:20px;bottom:16px;z-index:4;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.12em;text-transform:uppercase;color:#5E7C8C}
.s7 .diag{padding:20px}
.s7 .cabeca{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.s7 .cabeca b{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:#7FA0B0}
.s7 .cabeca em{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--dourado-claro)}
.s7 .frentes{display:flex;flex-direction:column;gap:8px}
.s7 .frente{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);transition:background .45s,border-color .45s}
.s7 .frente > span{font-size:13.5px;color:#9FB8C4;transition:color .45s}
.s7 .estado{font-family:var(--mono);font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;
  padding:4px 10px;border-radius:100px;background:rgba(255,255,255,.06);color:#6E8A98;transition:.45s;white-space:nowrap}
.s7 .frente.ok{background:rgba(63,182,139,.09);border-color:rgba(63,182,139,.3)}
.s7 .frente.ok > span{color:#EAF3F6}
.s7 .frente.ok .estado{background:rgba(63,182,139,.22);color:#7FE3BE}
.s7 .fecho{margin-top:14px;text-align:center;font-family:var(--mono);font-size:9px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dourado-claro);opacity:0;transition:opacity .5s}
.s7 .fecho.on{opacity:1}
.s8{min-height:var(--altura-heroi)}
.s8 .conteudo{padding:158px var(--respiro) 286px} /* topo maior: cabeçalho e trilha por cima */
.s8 .paleta{display:flex;gap:9px;justify-content:center;margin-top:30px}
.s8 .paleta u{width:46px;height:10px;border-radius:4px;text-decoration:none;opacity:.14;transition:opacity .5s ease}
.s8 .paleta u.on{opacity:1}
.s8 .faixa{position:absolute;left:0;right:0;bottom:0;z-index:5;height:252px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%);mask-image:linear-gradient(180deg,transparent,#000 30%)}
.s8 .aplicacoes{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:var(--largura-max);margin:0 auto;padding:0 var(--respiro)}
.s8 .aplic{position:relative;height:252px;border-radius:16px 16px 0 0;border:1px solid rgba(255,255,255,.08);
  border-bottom:0;background:rgba(255,255,255,.04);display:grid;place-items:center}
.s8 .aplic .rot{position:absolute;left:0;right:0;bottom:18px;text-align:center;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.13em;text-transform:uppercase;color:#5E7C8C}
.s8 .suporte{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  box-shadow:0 22px 36px -20px rgba(0,0,0,.9);margin-bottom:22px}
.s8 .s-cartao{width:140px;height:82px;border-radius:6px;background:linear-gradient(150deg,#F6F2EB,#DCD3C4);color:#12384A}
.s8 .s-placa{width:152px;height:70px;border-radius:4px;background:linear-gradient(150deg,#16405A,#0A1B2E);
  border:1px solid rgba(255,255,255,.13);color:var(--dourado)}
.s8 .s-app{width:92px;height:92px;border-radius:22px;background:linear-gradient(150deg,#12384A,#04101C);
  border:1px solid rgba(255,255,255,.11);color:var(--dourado)}
.s8 .s-papel{width:88px;height:120px;border-radius:4px;background:linear-gradient(160deg,#F6F2EB,#E2DACD);color:#12384A}
.s8 .marca{width:32px;height:32px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
  opacity:0;transform:scale(.55);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.9,.3,1.5)}
.s8 .aplic.on .marca{opacity:1;transform:none}
.s8 .suporte u{display:block;height:4px;border-radius:2px;background:currentColor;opacity:0;transition:opacity .5s ease .15s;
  text-decoration:none}
.s8 .aplic.on .suporte u{opacity:.3}
.s8 .suporte u.a{width:52px}
.s8 .suporte u.b{width:34px}
@media (max-width:940px){
  .hero.painel .grade{grid-template-columns:1fr;gap:34px}
  .s5 .zap{margin:0 auto}
  .s8 .manual{opacity:.3}
  .s8 .bloco{width:180px}
  .s8 .bloco:nth-child(2),.s8 .bloco:nth-child(3){display:none}
  .s6 .pilha{transform:scale(.8)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important}
  html{scroll-behavior:auto}
  .s2 .anel .arco{stroke-dashoffset:0}
  .s5 .conversa div,.s8 .bloco{opacity:1}
}

}