/* Valter Garcia · protótipo v3, rodada 7
   Cores: tinta (base), osso (claro), laranja (destaque) e duas famílias novas que acompanham:
   azul cobalto (oposto do laranja no círculo) e sálvia (neutro frio). Cada família tem as suas tonalidades.
   Fontes: Inter Black nos títulos, Instrument Serif itálico nos destaques, Inter no texto.
   Ritmo: todas as seções têm o mesmo respiro (--sec) e todos os cartões o mesmo vão (--vao). */
:root{
  /* tinta */
  --tinta-900:#0B0C0D; --tinta-800:#111214; --tinta-700:#18191C; --tinta-600:#222328; --tinta-500:#33353C; --tinta-400:#5B5C61;
  /* osso */
  --osso-0:#FFFFFF; --osso-50:#FBFAF6; --osso-100:#F7F4EE; --osso-200:#F1EDE4; --osso-300:#E4DED1; --osso-400:#CFC8B8; --osso-500:#A5A199;
  /* laranja */
  --laranja-700:#B5361A; --laranja-600:#D9421F; --laranja-500:#FF5A36; --laranja-300:#FFA48E; --laranja-200:#FBC3B3; --laranja-100:#F7D9CE;
  /* azul cobalto */
  --azul-800:#16205E; --azul-700:#1F2E99; --azul-600:#2A44E0; --azul-500:#4A63FF; --azul-300:#A3B1FF; --azul-100:#DEE3FF;
  /* sálvia */
  --salvia-700:#3B4538; --salvia-500:#76876F; --salvia-300:#B8C5B0; --salvia-100:#E2E9DC;

  --tinta-rgb:17,18,20; --osso-rgb:241,237,228; --laranja-rgb:255,90,54; --azul-rgb:42,68,224; --sombra-rgb:11,12,13;
  --ln-o:rgba(var(--tinta-rgb),.12);
  --ln-t:rgba(var(--osso-rgb),.12);
  --ln-t2:rgba(var(--osso-rgb),.24);

  --f-tit:'Inter',system-ui,sans-serif;
  --f-ita:'Instrument Serif',Georgia,serif;
  --f-txt:'Inter',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;
  --f-ass:'DM Sans',system-ui,sans-serif;

  --g:clamp(16px,4vw,56px);
  --max:1320px;
  --sec:clamp(88px,10vw,152px);
  --vao:clamp(10px,1.1vw,16px);
  --pad:clamp(20px,2.4vw,36px);
  --r-s:12px; --r-m:22px; --r-l:clamp(26px,3vw,40px);
  --faixa:clamp(52px,7.5vh,72px); --peek:var(--faixa);
  --tit:clamp(32px,4vw,60px);
  --topo:76px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topo) + 16px);overflow-x:clip;-webkit-text-size-adjust:100%}
body{background:var(--tinta-800);color:var(--osso-200);font-family:var(--f-txt);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--laranja-500);outline-offset:3px;border-radius:4px}
.mono{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- textura: grão fixo por cima de tudo, com chiado ---------- */
.grao{position:fixed;z-index:90;inset:-60%;pointer-events:none;opacity:.13;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.6' intercept='-.3'/%3E%3CfeFuncG type='linear' slope='1.6' intercept='-.3'/%3E%3CfeFuncB type='linear' slope='1.6' intercept='-.3'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:180px 180px;animation:chiado .6s steps(6) infinite;will-change:transform}
/* nas áreas claras o "screen" some: uma segunda camada escurece de leve para o grão aparecer também ali */
.grao::after{content:"";position:absolute;inset:0;background:inherit;background-size:150px 150px;mix-blend-mode:multiply;opacity:.28}
@keyframes chiado{0%{transform:translate(0,0)}14%{transform:translate(-3%,-6%)}28%{transform:translate(-8%,3%)}42%{transform:translate(5%,-8%)}57%{transform:translate(-3%,8%)}71%{transform:translate(8%,0)}85%{transform:translate(2%,5%)}100%{transform:translate(0,0)}}

/* ---------- base ---------- */
.box{width:100%;max-width:calc(var(--max) + 2*var(--g));margin:0 auto;padding:0 var(--g)}
.sec{position:relative;padding-block:var(--sec) 0}
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--vao)}
.sec-topo{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 24px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,44px)}
.tit{font-family:var(--f-tit);font-weight:900;font-size:var(--tit);line-height:.95;letter-spacing:-.045em;text-transform:uppercase}
.tit em{font-family:var(--f-ita);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.01em;font-size:1.12em;color:var(--laranja-500)}
.rot{color:var(--osso-500)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips li{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:6px 11px;border-radius:999px;border:1px solid currentColor;border-color:color-mix(in srgb,currentColor 30%,transparent);white-space:nowrap}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:46px;padding:0 24px;border-radius:999px;font-weight:600;font-size:15px;letter-spacing:-.01em;white-space:nowrap;transition:translate .2s ease,background-color .2s ease}
.btn:hover{translate:0 -2px}
.btn-l{background:var(--laranja-500);color:var(--tinta-800)}
.btn-l:active{background:var(--laranja-600)}
.btn-t{background:var(--tinta-800);color:var(--osso-200)}

/* ---------- cabeçalho ---------- */
.topo{position:fixed;z-index:60;top:14px;left:0;right:0;width:100%;max-width:calc(var(--max) + 2*var(--g));margin:0 auto;padding:0 var(--g);display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none}
.topo > *{pointer-events:auto}
.assin,.menu{background:rgba(var(--tinta-rgb),.86);border:1px solid var(--ln-t2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.assin{position:relative;z-index:2;height:46px;display:flex;align-items:center;padding:0 20px;border-radius:999px;font-family:var(--f-ass);font-weight:600;letter-spacing:-.02em;font-size:17px;white-space:nowrap}
.menu{display:flex;align-items:center;gap:clamp(4px,1vw,12px);height:46px;padding:0 10px;border-radius:999px;font-size:14px;font-weight:500;color:rgba(var(--osso-rgb),.82)}
.menu a{display:flex;align-items:center;height:36px;padding:0 12px;border-radius:999px;transition:background-color .2s,color .2s}
.menu a:hover,.menu a.on{background:rgba(var(--osso-rgb),.08);color:var(--osso-50)}
.topo-acoes{position:relative;z-index:2;display:flex;align-items:center;gap:8px}
.menu-btn{display:none;width:46px;height:46px;border-radius:50%;background:var(--osso-200);color:var(--tinta-800);box-shadow:0 0 0 1px rgba(var(--tinta-rgb),.18),0 6px 18px -6px rgba(var(--sombra-rgb),.6);flex-direction:column;align-items:center;justify-content:center;gap:5px}
.menu-btn i{display:block;width:18px;height:1.5px;background:currentColor;border-radius:2px;transition:transform .3s ease}
.topo.aberto .menu-btn i:first-child{transform:translateY(3.25px) rotate(45deg)}
.topo.aberto .menu-btn i:last-child{transform:translateY(-3.25px) rotate(-45deg)}

/* ---------- hero ---------- */
.cena{position:relative}
.hero{position:sticky;top:0;z-index:1;height:100vh;height:100svh;padding:calc(var(--topo) + 4vh) var(--g) 0;display:flex;flex-direction:column;overflow:clip}
.hero h1{position:relative;z-index:2;font-family:var(--f-tit);font-weight:900;text-transform:uppercase;text-align:center;line-height:.9;letter-spacing:-.05em;white-space:nowrap;font-size:clamp(40px,6.6vw,108px);transform-origin:50% 0;will-change:transform,opacity}
.hero h1 .ln{display:block}
.h-base{position:absolute;inset:0;z-index:1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;padding:0 var(--g) calc(var(--peek) + 4vh)}
.h-foto{position:absolute;left:50%;top:var(--fT,22vh);height:var(--fH,78vh);aspect-ratio:3/4;transform:translateX(-50%)}
.h-foto img{display:block;width:100%;height:100%;object-fit:cover}
.h-ita{position:relative;z-index:1;grid-column:1/5;display:grid;font-family:var(--f-ita);font-style:italic;font-weight:400;font-size:clamp(23px,2.2vw,34px);line-height:1.05;color:var(--laranja-500)}
.h-ita span{grid-area:1/1;min-width:0;align-self:end}
.js .h-ita span{clip-path:inset(-.2em 100% -.3em 0);transition:clip-path .55s cubic-bezier(.6,0,.2,1)}
.js .h-ita span.sai{clip-path:inset(-.2em 0 -.3em 100%)}
.js .h-ita span.on{clip-path:inset(-.2em -.4em -.3em 0);transition-delay:.4s}
html:not(.js) .h-ita span + span{display:none}

/* ---------- serviços ---------- */
.servicos{z-index:3;margin-top:calc(-1*var(--peek));padding-top:0;background:var(--tinta-800)}
.ramos{height:var(--faixa);display:flex;align-items:center;overflow:clip;background:var(--tinta-700);border-block:1px solid var(--ln-t)}
.mq{width:100%;will-change:transform}
.mq-fx{display:flex;width:max-content;animation:mq 60s linear infinite}
.ramos:not(.vis) .mq-fx{animation-play-state:paused}
.mq ul{display:flex;flex:none}
.mq li{font-family:var(--f-tit);font-weight:900;font-size:clamp(16px,1.6vw,24px);line-height:1;text-transform:uppercase;letter-spacing:-.03em;white-space:nowrap;display:flex;align-items:center}
.mq li::after{content:"";width:6px;height:6px;margin:0 1.1em;border-radius:50%;background:var(--laranja-500);flex:none}
.mq li:nth-child(3n+2)::after{background:var(--azul-500)}
.mq li:nth-child(3n)::after{background:var(--salvia-300)}
.mq li:nth-child(even){color:transparent;-webkit-text-stroke:1px rgba(var(--osso-rgb),.72)}
@keyframes mq{to{transform:translateX(-50%)}}

.serv-box{padding-top:var(--sec)}
.sv{position:relative;display:flex;flex-direction:column;min-width:0;padding:var(--pad);overflow:hidden;transition:translate .35s cubic-bezier(.2,.7,.2,1)}
.sv:hover{translate:0 -4px}
.sv-n{opacity:.7}
.sv h3{font-family:var(--f-tit);font-weight:900;line-height:.92;text-transform:uppercase;letter-spacing:-.05em;margin-top:auto;padding-top:clamp(28px,4vw,64px)}
.sv p{margin-top:12px;font-size:15.5px;line-height:1.5;max-width:40ch}
.sv .chips{margin-top:18px}
.sv-ir{position:absolute;top:var(--pad);right:var(--pad);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid currentColor;border-color:color-mix(in srgb,currentColor 30%,transparent);transition:background-color .25s,color .25s,rotate .35s}
.sv:hover .sv-ir{rotate:45deg}
.sv-1{grid-column:1/8;grid-row:span 2;min-height:clamp(380px,40vw,560px);background:var(--osso-200);color:var(--tinta-800);border-radius:var(--r-l) var(--r-l) var(--r-l) var(--r-s)}
.sv-1 h3{font-size:clamp(46px,6.4vw,104px)}
.sv-1 p{color:var(--tinta-400)}
.sv-1 .sv-ir{background:var(--laranja-500);border-color:var(--laranja-500)}
.sv-2{grid-column:8/13;min-height:clamp(260px,22vw,320px);background:var(--azul-600);color:var(--osso-50);border-radius:var(--r-m)}
.sv-2 p{color:rgba(255,255,255,.82)}
.sv-3{grid-column:8/13;background:var(--laranja-100);color:var(--tinta-800);border-radius:var(--r-s) var(--r-l) var(--r-l) var(--r-l)}
.sv-3 p{color:var(--tinta-400)}
.sv-4{grid-column:1/13;flex-direction:row;align-items:flex-end;flex-wrap:wrap;gap:12px clamp(20px,4vw,64px);background:var(--salvia-100);color:var(--salvia-700);border-radius:var(--r-m) var(--r-m) var(--r-l) var(--r-l);padding-right:calc(var(--pad) + 60px)}
.sv-4 .sv-n{position:absolute;top:var(--pad);left:var(--pad)}
.sv-4 h3{margin:0;padding-top:clamp(36px,4vw,56px);flex:0 0 auto;color:var(--tinta-800)}
.sv-4 p{margin:0;flex:1 1 280px}
.sv-4 .chips{margin:0}
.sv-2 h3,.sv-3 h3,.sv-4 h3{font-size:clamp(30px,3vw,48px)}

/* ---------- processo estratégico ---------- */
.proc-cab{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:20px 40px}
.proc-cab .bolinhas{grid-column:1/-1}
.proc-corpo{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--vao);align-items:stretch;margin-top:var(--vao)}
.prazos{display:grid;grid-template-columns:1fr 1fr;gap:var(--vao);min-width:min(100%,460px)}
.prazos li{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:var(--r-m);background:var(--tinta-700);box-shadow:inset 0 0 0 1px var(--ln-t)}
.prazos .mono{color:var(--osso-500);font-size:11px}
.prazos b{font-weight:800;font-size:clamp(17px,1.5vw,21px);line-height:1.1;letter-spacing:-.03em}
.etapas{display:grid;gap:var(--vao);min-width:0}
.et{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(16px,2vw,28px);padding:var(--pad);background:var(--tinta-700);border-radius:var(--r-m);box-shadow:inset 0 0 0 1px var(--ln-t);transition:background-color .4s,box-shadow .4s,opacity .4s}
.et:nth-child(odd){border-radius:var(--r-m) var(--r-m) var(--r-m) var(--r-s)}
.et:nth-child(even){border-radius:var(--r-s) var(--r-m) var(--r-m) var(--r-m)}
.et-n{grid-row:1/4;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--ln-t2);color:var(--osso-500);transition:background-color .4s,color .4s,border-color .4s}
.et h3{font-family:var(--f-tit);font-weight:900;font-size:clamp(22px,2.1vw,30px);line-height:1;text-transform:uppercase;letter-spacing:-.04em;padding-top:8px}
.et p{margin-top:10px;font-size:15.5px;line-height:1.6;color:rgba(var(--osso-rgb),.84);max-width:52ch}
.et .chips{margin-top:16px;color:var(--osso-500)}
.js .proc-ativo .et{display:none}
.js .proc-ativo .et.on{display:grid;align-content:center;height:100%;background:var(--tinta-600);box-shadow:inset 0 0 0 1px var(--ln-t2);animation:entrar .45s cubic-bezier(.2,.7,.2,1)}
.et.on .et-n{background:var(--laranja-500);border-color:var(--laranja-500);color:var(--tinta-800)}

/* bolinhas: a trilha das seis etapas, clicável */
.bolinhas{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin-top:clamp(28px,3vw,44px)}
.bol-ln{position:absolute;left:calc(100%/12);right:calc(100%/12);top:22px;height:2px;background:var(--ln-t)}
.bol-ln i{display:block;height:100%;width:100%;background:var(--laranja-500);transform-origin:0 50%;transform:scaleX(var(--p,0));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.bolinhas button{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;color:var(--osso-500);transition:color .3s}
.b-n{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--tinta-700);border:1px solid var(--ln-t2);font-family:var(--f-mono);font-size:12px;transition:background-color .3s,color .3s,border-color .3s,scale .3s}
.b-t{font-size:14px;font-weight:600;letter-spacing:-.01em;text-align:center}
.bolinhas button:hover{color:var(--osso-200)}
.bolinhas button:hover .b-n{border-color:var(--osso-200)}
.bolinhas button.feito .b-n{border-color:var(--laranja-500);color:var(--osso-200)}
.bolinhas button[aria-selected="true"]{color:var(--osso-50)}
.bolinhas button[aria-selected="true"] .b-n{background:var(--laranja-500);border-color:var(--laranja-500);color:var(--tinta-800);scale:1.1}

/* palco: a animação da etapa da vez */
.palco{position:relative;padding:16px;border-radius:var(--r-l) var(--r-l) var(--r-l) var(--r-s);background:var(--osso-100);color:var(--tinta-800);height:clamp(360px,34vw,460px);overflow:hidden;touch-action:pan-y}
.palco-topo{position:relative;z-index:2;display:flex;justify-content:space-between;font-size:11px;color:var(--tinta-400)}
.palco-topo b{font-weight:500;color:var(--tinta-800)}
.proc-barra{position:absolute;left:16px;right:16px;bottom:14px;display:block;height:3px;background:rgba(var(--tinta-rgb),.1);border-radius:3px;overflow:hidden}
.proc-barra i{display:block;height:100%;width:100%;background:var(--laranja-500);transform-origin:0 50%;transform:scaleX(var(--p,.1667));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.demo{position:absolute;inset:44px 16px 30px;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s linear .35s}
.demo.on{opacity:1;visibility:visible;transition:opacity .45s .1s}
.demo i{display:block}
/* peças comuns */
.d-doc{position:absolute;background:var(--osso-0);border-radius:14px;box-shadow:0 18px 40px -22px rgba(var(--sombra-rgb),.45),0 0 0 1px var(--ln-o);padding:18px}
.d-doc .l{height:8px;border-radius:4px;background:var(--osso-300);margin-bottom:10px}
.w40{width:40%}.w60{width:60%}.w70{width:70%}.w80{width:80%}.w90{width:90%}
.d-rot{position:absolute;top:-11px;left:16px;padding:4px 10px;border-radius:999px;background:var(--tinta-800);color:var(--osso-50);font-size:10px}
.d-lista li{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;padding:9px 0;border-bottom:1px solid var(--ln-o)}
.d-lista li:last-child{border-bottom:0}
.ok{position:relative;flex:none;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--osso-400)}
.ok::after{content:"";position:absolute;left:5.5px;top:3px;width:5px;height:9px;border:solid var(--osso-0);border-width:0 2px 2px 0;rotate:45deg;scale:0}
/* 01 */
.d1 .d-doc{left:0;top:6px;width:58%;bottom:0;display:flex;flex-direction:column;padding-top:24px}
.d-ass{margin-top:auto;display:flex;flex-direction:column;gap:4px}
.d-ass .mono{padding-top:6px;border-top:1px dashed var(--osso-400);font-size:9.5px;color:var(--tinta-400)}
.assina{display:block;width:min(100%,180px);height:44px;fill:none;stroke:var(--azul-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;clip-path:inset(0 100% 0 0)}
.d1 .d-lista{position:absolute;right:0;top:18%;width:38%}
.d1.on .assina{animation:assinar 4.2s ease-in-out infinite}
.d1.on .d-lista li .ok{animation:marcar 4.2s infinite}
.d1.on .d-lista li:nth-child(2) .ok{animation-delay:.35s}
.d1.on .d-lista li:nth-child(3) .ok{animation-delay:.7s}
.d1.on .d-lista li .ok::after{animation:marcar-v 4.2s infinite}
.d1.on .d-lista li:nth-child(2) .ok::after{animation-delay:.35s}
.d1.on .d-lista li:nth-child(3) .ok::after{animation-delay:.7s}
@keyframes assinar{0%,8%{clip-path:inset(0 100% 0 0);opacity:1}45%,88%{clip-path:inset(0 0 0 0);opacity:1}100%{clip-path:inset(0 0 0 0);opacity:0}}
@keyframes marcar{0%,40%{background:transparent;border-color:var(--osso-400)}50%,90%{background:var(--salvia-500);border-color:var(--salvia-500)}100%{background:transparent;border-color:var(--osso-400)}}
@keyframes marcar-v{0%,42%{scale:0}52%,90%{scale:1}100%{scale:0}}
/* 02 */
.d-folha{position:absolute;inset:6px 22% 0 0;overflow:hidden;background:var(--osso-0);border-radius:14px;box-shadow:0 18px 40px -22px rgba(var(--sombra-rgb),.45),0 0 0 1px var(--ln-o);padding:20px}
.d-folha .t{height:16px;width:55%;border-radius:5px;background:var(--tinta-800);margin-bottom:14px;transform-origin:0 50%}
.d-folha .t2{width:38%;margin-top:18px;background:var(--azul-600)}
.d-folha .l{height:8px;border-radius:4px;background:var(--osso-300);margin-bottom:10px;transform-origin:0 50%}
.a1{width:92%}.a2{width:84%}.a3{width:66%}.a4{width:88%}.a5{width:52%}
.cursor{width:2px;height:16px;margin-top:2px;background:var(--laranja-500)}
.d-selo{position:absolute;right:0;bottom:18%;padding:10px 16px;border-radius:999px;background:var(--salvia-500);color:var(--osso-0);font-size:13px;font-weight:600;box-shadow:0 12px 30px -14px rgba(var(--sombra-rgb),.5)}
.d2.on .t,.d2.on .l{animation:escrever 4.8s cubic-bezier(.4,0,.2,1) infinite}
.d2.on .a1{animation-delay:.3s}.d2.on .a2{animation-delay:.6s}.d2.on .a3{animation-delay:.9s}.d2.on .t2{animation-delay:1.3s}.d2.on .a4{animation-delay:1.6s}.d2.on .a5{animation-delay:1.9s}
.d2.on .cursor{animation:piscar .8s steps(1) infinite}
.d2.on .d-selo{animation:selo 4.8s infinite}
@keyframes escrever{0%{transform:scaleX(0);opacity:1}18%,88%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes piscar{50%{opacity:0}}
@keyframes selo{0%,52%{opacity:0;translate:0 12px;scale:.9}62%,90%{opacity:1;translate:0 0;scale:1}100%{opacity:0}}
/* 03 e 04: telas montando */
.d-pc{position:absolute;left:0;top:6px;width:76%;bottom:0;overflow:hidden;background:var(--osso-0);border-radius:12px;box-shadow:0 18px 40px -22px rgba(var(--sombra-rgb),.45),0 0 0 1px var(--ln-o);padding:12px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:10px minmax(0,1fr) clamp(26px,18%,44px);gap:8px}
.d-pc .nav{grid-column:1/4;border-radius:6px;background:var(--osso-200)}
.d-pc .dh,.d-pc .bloco{grid-column:1/4;border-radius:8px;background:var(--azul-600)}
.d-pc .c{height:auto;border-radius:8px;background:var(--osso-300)}
.d-pc .c2{background:var(--laranja-200)}.d-pc .c3{background:var(--salvia-300)}
.d-cel{position:absolute;right:0;bottom:0;height:82%;width:auto;aspect-ratio:9/17;background:var(--osso-0);border-radius:14px;border:3px solid var(--tinta-800);padding:8px;display:grid;grid-template-rows:8px 1.4fr 1fr 1fr;gap:6px}
.d-cel .nav{border-radius:4px;background:var(--osso-200)}
.d-cel .dh{border-radius:6px;background:var(--azul-600)}
.d-cel .c{border-radius:6px;background:var(--osso-300)}
.d-cel .c2{background:var(--laranja-200)}
.d3.on .d-pc > i,.d3.on .d-cel > i{animation:montar 4.6s cubic-bezier(.2,.7,.2,1) infinite}
.d3.on .dh{animation-delay:.25s!important}.d3.on .c1{animation-delay:.5s!important}.d3.on .c2{animation-delay:.7s!important}.d3.on .c3{animation-delay:.9s!important}
.d3.on .d-cel{animation:subir 4.6s cubic-bezier(.2,.7,.2,1) infinite}
@keyframes montar{0%{opacity:0;scale:.85}14%,88%{opacity:1;scale:1}100%{opacity:0}}
@keyframes subir{0%,10%{translate:0 30px;opacity:0}24%,90%{translate:0 0;opacity:1}100%{opacity:0}}
.d4 .d-pc{width:100%}
.seta-cursor{position:absolute;width:26px;height:26px;fill:var(--tinta-800);stroke:var(--osso-0);stroke-width:1.5;left:70%;top:80%}
.d-rodada{position:absolute;right:10px;top:16px;display:grid;padding:7px 12px;border-radius:999px;background:var(--tinta-800);color:var(--osso-50);font-size:10.5px}
.d-rodada b{grid-area:1/1;font-weight:500}
.d-rodada .r2{opacity:0}
.d4.on .seta-cursor{animation:mirar 5s cubic-bezier(.5,0,.2,1) infinite}
.d4.on .bloco{animation:ajustar 5s infinite}
.d4.on .r1{animation:r1 5s infinite}.d4.on .r2{animation:r2 5s infinite}
@keyframes mirar{0%{left:70%;top:85%}30%,40%{left:45%;top:42%}45%{scale:.85}50%,100%{left:45%;top:42%;scale:1}}
@keyframes ajustar{0%,42%{background:var(--azul-600);border-radius:8px}55%,100%{background:var(--laranja-500);border-radius:24px}}
@keyframes r1{0%,48%{opacity:1}52%,100%{opacity:0}}
@keyframes r2{0%,48%{opacity:0}52%,100%{opacity:1}}
/* 05 */
.d5.on,.d5{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);gap:12px}
.d-url{grid-column:1/-1;display:flex;align-items:center;gap:10px;height:44px;padding:0 16px;border-radius:999px;background:var(--osso-0);box-shadow:0 0 0 1px var(--ln-o);font-size:14px;font-weight:500;min-width:0}
.cad{width:10px;height:12px;border-radius:2px;border:2px solid var(--salvia-500);flex:none}
.d-url .txt{overflow:hidden;white-space:nowrap;width:17ch;max-width:100%;border-right:2px solid var(--laranja-500)}
.d-carga{grid-column:1/-1;height:6px;border-radius:6px;background:var(--osso-300);overflow:hidden}
.d-carga i{height:100%;width:100%;background:var(--azul-600);transform-origin:0 50%;transform:scaleX(0)}
.d-medidor{position:relative;align-self:center;justify-self:center;height:100%;max-height:100%;aspect-ratio:1;max-width:100%;display:grid;place-items:center;min-height:0}
.d-medidor svg{position:absolute;inset:0;width:100%;height:100%;rotate:-90deg;fill:none;stroke-width:7}
.d-medidor circle{stroke:var(--osso-300)}
.d-medidor .arco{stroke:var(--salvia-500);stroke-linecap:round;stroke-dasharray:201;stroke-dashoffset:201}
.d-medidor b{font-weight:900;font-size:clamp(24px,2.6vw,40px);letter-spacing:-.05em;line-height:1;margin-top:-8px}
.d-medidor .mono{position:absolute;bottom:24%;font-size:9px;color:var(--tinta-400)}
.d-selos{align-self:center;display:grid;gap:8px;min-width:0}
.d-selos li{padding:10px 12px;border-radius:12px;background:var(--osso-0);box-shadow:0 0 0 1px var(--ln-o);font-size:14px;font-weight:600;display:flex;align-items:center;gap:10px;white-space:nowrap}
.d-selos li::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--azul-600)}
.d-selos li:nth-child(2)::before{background:var(--salvia-500)}
.d-selos li:nth-child(3)::before{background:var(--laranja-500)}
.d5.on .txt{animation:digitar 5s steps(17) infinite}
.d5.on .d-carga i{animation:carregar 5s cubic-bezier(.4,0,.2,1) infinite}
.d5.on .arco{animation:medir 5s cubic-bezier(.2,.7,.2,1) infinite}
.d5.on .d-selos li{animation:montar 5s infinite}
.d5.on .d-selos li:nth-child(1){animation-delay:1.6s}.d5.on .d-selos li:nth-child(2){animation-delay:1.9s}.d5.on .d-selos li:nth-child(3){animation-delay:2.2s}
@keyframes digitar{0%{width:0}30%,92%{width:17ch}100%{width:17ch}}
@keyframes carregar{0%,28%{transform:scaleX(0);opacity:1}55%,92%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes medir{0%,30%{stroke-dashoffset:201;opacity:1}62%,92%{stroke-dashoffset:4;opacity:1}100%{stroke-dashoffset:4;opacity:0}}
/* 06 */
.d6 .d-doc{left:10%;right:10%;top:12px;bottom:0;padding-top:26px}
.d6 .d-lista{max-width:72%}
.carimbo{position:absolute;right:6%;bottom:8%;display:grid;place-items:center;width:clamp(78px,24%,110px);aspect-ratio:1;height:auto;border-radius:50%;border:3px solid var(--laranja-500);color:var(--laranja-500);font-weight:900;font-size:clamp(12px,1.3vw,17px);letter-spacing:-.02em;text-transform:uppercase;rotate:-14deg;scale:0;background:rgba(255,255,255,.7)}
.d6.on .d-lista li .ok{animation:marcar 4.6s infinite}
.d6.on .d-lista li .ok::after{animation:marcar-v 4.6s infinite}
.d6.on .d-lista li:nth-child(2) .ok,.d6.on .d-lista li:nth-child(2) .ok::after{animation-delay:.3s}
.d6.on .d-lista li:nth-child(3) .ok,.d6.on .d-lista li:nth-child(3) .ok::after{animation-delay:.6s}
.d6.on .carimbo{animation:carimbar 4.6s cubic-bezier(.3,1.6,.5,1) infinite}
@keyframes carimbar{0%,55%{scale:0;opacity:0}63%,92%{scale:1;opacity:1}100%{opacity:0}}

/* ---------- projetos: cartões brancos iguais, em grade ou lista ---------- */
.vista{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--tinta-700);box-shadow:inset 0 0 0 1px var(--ln-t)}
.vista button{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;font-size:13.5px;font-weight:500;color:var(--osso-500);transition:background-color .2s,color .2s}
.vista button[aria-pressed="true"]{background:var(--osso-200);color:var(--tinta-800)}
.vista .ic{width:16px;height:16px}
.pc-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--vao)}
.pc a{display:flex;flex-direction:column;height:100%;padding:10px 10px 18px;border-radius:var(--r-m);background:var(--osso-0);color:var(--tinta-800);transition:translate .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.pc a:hover{translate:0 -4px;box-shadow:0 24px 50px -28px rgba(var(--sombra-rgb),.9)}
.pc-capa{display:block;aspect-ratio:16/10;border-radius:calc(var(--r-m) - 8px);overflow:hidden;background:var(--osso-200)}
.pc-capa img{width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:scale .8s cubic-bezier(.2,.7,.2,1)}
.pc a:hover .pc-capa img{scale:1.04}
.pc-txt{display:flex;flex-direction:column;gap:2px;padding:14px 8px 0}
.pc-txt b{font-weight:800;font-size:clamp(17px,1.4vw,20px);letter-spacing:-.03em;line-height:1.15}
.pc-txt span{font-size:14px;color:var(--tinta-400)}
.pc-ir{display:none}
/* lista */
.pc-g[data-vista="lista"]{grid-template-columns:minmax(0,1fr);gap:8px}
.pc-g[data-vista="lista"] .pc a{flex-direction:row;align-items:center;gap:clamp(14px,2vw,28px);padding:10px clamp(10px,1.4vw,18px) 10px 10px}
.pc-g[data-vista="lista"] .pc-capa{width:clamp(110px,14vw,180px);flex:none;border-radius:12px}
.pc-g[data-vista="lista"] .pc-txt{padding:0;flex:1;min-width:0}
.pc-g[data-vista="lista"] .pc-ir{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--osso-200);transition:background-color .25s,rotate .35s}
.pc-g[data-vista="lista"] .pc a:hover .pc-ir{background:var(--laranja-500);rotate:45deg}
/* número ímpar de projetos: o último ocupa a largura de dois, sem deixar buraco na grade */
@media (min-width:1100px){
  .pc-g[data-vista="grade"] .pc:last-child:nth-child(3n+2){grid-column:span 2}
  .pc-g[data-vista="grade"] .pc:last-child:nth-child(3n+1):not(:first-child){grid-column:1/-1}
  .pc-g[data-vista="grade"] .pc:last-child:nth-child(3n+2) .pc-capa,
  .pc-g[data-vista="grade"] .pc:last-child:nth-child(3n+1):not(:first-child) .pc-capa{aspect-ratio:32/10}
}
@media (max-width:1099px){
  .pc-g[data-vista="grade"] .pc:last-child:nth-child(odd){grid-column:span 2}
  .pc-g[data-vista="grade"] .pc:last-child:nth-child(odd) .pc-capa{aspect-ratio:32/10}
}

/* carrossel: telas andando para o lado, cada site rolando por dentro */
.carrossel{margin-top:clamp(40px,5vw,72px);overflow:clip;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.car-fx{display:flex;width:max-content;animation:mq 70s linear infinite}
@media (hover:hover) and (pointer:fine){.carrossel:hover .car-fx{animation-play-state:paused}}
.car-fx ul{display:flex;flex:none}
.tela{flex:none;width:clamp(240px,24vw,360px);margin-right:var(--vao);padding:6px;border-radius:18px;background:var(--tinta-600);box-shadow:inset 0 0 0 1px var(--ln-t)}
.tela-bar{display:flex;gap:5px;padding:4px 6px 8px}
.tela-bar i{width:7px;height:7px;border-radius:50%;background:var(--tinta-500)}
.tela-bar i:first-child{background:var(--laranja-500)}
.tela-bar i:nth-child(2){background:var(--azul-500)}
.tela-bar i:nth-child(3){background:var(--salvia-300)}
.tela-in{display:block;position:relative;aspect-ratio:16/11;border-radius:12px;overflow:hidden;background:var(--osso-100);container-type:size}
.tela-in img{position:absolute;top:0;left:0;width:100%;height:auto;animation:rolar var(--dur,26s) ease-in-out var(--atraso,0s) infinite alternate}
@keyframes rolar{0%,6%{translate:0 0}94%,100%{translate:0 calc(-100% + 100cqh)}}

/* ---------- planos: cartão escuro com aba ---------- */
.promo{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--osso-200);padding:9px 16px;border-radius:999px;background:var(--tinta-700);box-shadow:inset 0 0 0 1px var(--ln-t)}
.ponto{width:8px;height:8px;border-radius:50%;background:var(--laranja-500);box-shadow:0 0 0 4px rgba(var(--laranja-rgb),.18)}
.bf{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:var(--osso-0);color:var(--tinta-800);font-weight:900;font-size:12px;letter-spacing:-.01em;text-transform:uppercase}
.promo:has(.bf){padding-left:6px}
.tag-bf{display:inline-flex;align-items:center;gap:8px;margin-top:clamp(18px,2vw,26px);padding:7px 12px 7px 10px;border-radius:8px;background:var(--osso-0);color:var(--tinta-800);font-weight:800;font-size:12.5px;letter-spacing:-.01em;text-transform:uppercase}
.tag-bf::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--laranja-500);animation:pulsar 1.6s ease-in-out infinite}
.plano-2 .tag-bf::before{background:var(--azul-500)}
@keyframes pulsar{50%{opacity:.25}}
.planos-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--vao) clamp(16px,2vw,28px);align-items:start}
.plano{position:relative;padding-top:40px;min-width:0}
.aba{position:absolute;top:0;left:0;height:56px;padding:10px 22px 0;display:flex;align-items:flex-start;border-radius:18px 18px 0 0;background:var(--laranja-500);color:var(--tinta-800);font-weight:600;font-size:14.5px;letter-spacing:-.01em}
.plano-2 .aba{background:var(--azul-600);color:var(--osso-50)}
.plano-in{position:relative;padding:var(--pad);border-radius:0 var(--r-l) var(--r-l) var(--r-l);background:var(--tinta-600);box-shadow:inset 0 0 0 1px var(--ln-t),0 40px 70px -40px rgba(var(--sombra-rgb),.9)}
.plano h3{font-weight:700;font-size:clamp(20px,1.8vw,25px);letter-spacing:-.03em;line-height:1.2}
.resumo{margin-top:6px;font-size:15px;color:var(--osso-500);padding-bottom:clamp(18px,2vw,26px);border-bottom:1px solid var(--ln-t)}
.preco{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;margin-top:12px}
.preco strong{font-weight:800;font-size:clamp(52px,5.6vw,80px);line-height:1;letter-spacing:-.05em;font-variant-numeric:lining-nums;white-space:nowrap;background:linear-gradient(180deg,var(--osso-50) 30%,var(--osso-500));-webkit-background-clip:text;background-clip:text;color:transparent}
.preco small{font-size:.42em;font-weight:700;letter-spacing:-.02em;margin-right:.12em;vertical-align:.7em}
.preco-nota{display:flex;flex-direction:column;font-size:15px;line-height:1.35}
.preco-nota span:first-child{color:var(--osso-200);font-weight:500}
.preco-nota span:last-child{color:var(--osso-500)}
.preco-nota s{text-decoration-thickness:1.5px;text-decoration-color:var(--laranja-500)}
.btn-cheio{display:flex;width:100%;height:54px;margin-top:clamp(18px,2vw,26px);border-radius:14px;font-size:16px}
.plano-2 .btn-cheio{background:var(--azul-600);color:var(--osso-50)}
.checks{margin-top:clamp(18px,2vw,26px);display:grid;gap:4px}
.checks li{position:relative;padding:8px 0 8px 32px;font-size:15.5px;color:rgba(var(--osso-rgb),.9)}
.checks li::before{content:"";position:absolute;left:4px;top:13px;width:11px;height:6px;border:solid var(--laranja-500);border-width:0 0 2px 2px;rotate:-45deg}
.plano-2 .checks li::before{border-color:var(--azul-300)}
.plano-x{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4fr);gap:14px clamp(16px,3vw,48px);align-items:start;margin-top:var(--vao);padding:var(--pad);border-radius:var(--r-m);background:var(--salvia-100);color:var(--tinta-800)}
.plano-x .mono{color:var(--salvia-700);padding-top:3px}
.plano-x dl{display:grid;gap:10px}
.plano-x dt{font-weight:700;font-size:17px;letter-spacing:-.02em;line-height:1.2}
.plano-x dd{font-size:14.5px;color:var(--salvia-700)}
.cond{font-size:14px;line-height:1.5;color:var(--salvia-700)}

/* ---------- sobre ---------- */
.sobre-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--vao);align-items:center}
.sobre .foto{grid-column:8/12;grid-row:1;aspect-ratio:4/5;border-radius:var(--r-l) var(--r-l) var(--r-s) var(--r-l);overflow:hidden;background:var(--tinta-600)}
.sobre .foto img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:grayscale(1) contrast(1.06)}
.sobre-txt{grid-column:1/7;grid-row:1;min-width:0}
.sobre .tit{text-transform:none;letter-spacing:-.05em;line-height:1;text-wrap:balance}
.sobre p{margin-top:clamp(16px,1.8vw,24px);font-size:clamp(16px,1.2vw,17.5px);line-height:1.6;color:rgba(var(--osso-rgb),.86);max-width:48ch}

/* ---------- perguntas ---------- */
.perg-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--vao);align-items:start}
.perguntas .tit{grid-column:1/5;position:sticky;top:calc(var(--topo) + 32px)}
.perg-lista{grid-column:5/13;padding:clamp(6px,1vw,14px) var(--pad);background:var(--osso-200);color:var(--tinta-800);border-radius:var(--r-l) var(--r-l) var(--r-l) var(--r-s)}
details{border-bottom:1px solid var(--ln-o)}
details:last-child{border-bottom:0}
summary{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:58px;padding:16px 0;cursor:pointer;list-style:none;font-weight:700;font-size:clamp(16px,1.25vw,19px);line-height:1.25;letter-spacing:-.02em}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:13px;height:13px;background:linear-gradient(currentColor,currentColor) 50% 50%/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) 50% 50%/1.5px 100% no-repeat;transition:transform .3s ease}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 40px 20px 0;font-size:15px;color:var(--tinta-400);max-width:62ch}

/* ---------- rodapé: um cartão com colunas, a assinatura grande e a linha de base ---------- */
.rodape{padding:var(--sec) 0 var(--vao)}
.rod-card{position:relative;overflow:hidden;padding:var(--pad) var(--pad) 0;border-radius:var(--r-l) var(--r-l) var(--r-m) var(--r-m);background:var(--tinta-700);box-shadow:inset 0 0 0 1px var(--ln-t)}
.rod-cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,2fr) minmax(0,2fr) auto;gap:28px clamp(20px,3vw,48px);align-items:start}
.rod-nome{font-family:var(--f-ass);font-weight:600;font-size:20px;letter-spacing:-.02em;color:var(--osso-50)}
.rod-marca p + p{margin-top:8px;max-width:34ch;font-size:15px;color:var(--osso-500)}
.rod-nav{display:flex;flex-direction:column;align-items:flex-start}
.rod-nav .mono{color:var(--osso-500);font-size:11px;margin-bottom:8px}
.rod-nav a{display:inline-flex;align-items:center;min-height:36px;font-size:15px;font-weight:500;color:var(--osso-200);transition:color .2s,translate .2s}
.rod-nav a:hover{color:var(--laranja-500);translate:4px 0}
.rod-topo{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--osso-200);color:var(--tinta-800);transition:background-color .25s,translate .25s}
.rod-topo:hover{background:var(--laranja-500);translate:0 -3px}
.rod-assin{margin:clamp(36px,5vw,72px) 0 0;font-family:var(--f-ass);font-weight:600;font-size:clamp(56px,15.2vw,232px);line-height:.78;letter-spacing:-.055em;white-space:nowrap;text-align:center;
  background:linear-gradient(180deg,var(--osso-200) 20%,rgba(var(--osso-rgb),.08) 92%);-webkit-background-clip:text;background-clip:text;color:transparent;translate:0 .08em}
.rod-base{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 20px;margin:0 calc(-1*var(--pad));padding:16px var(--pad);border-top:1px solid var(--ln-t);background:var(--tinta-600);font-size:13.5px;color:var(--osso-500)}
.rod-base .mono{font-size:10.5px}

/* ---------- página de projeto ---------- */
.pg-proj main{padding-top:calc(var(--topo) + 40px)}
.trilha{display:flex;flex-wrap:wrap;gap:8px;font-size:13.5px;color:var(--osso-500)}
.trilha a{text-decoration:underline;text-decoration-color:var(--ln-t2);text-underline-offset:3px}
.trilha a:hover{color:var(--osso-200)}
.pj-topo{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px var(--vao);align-items:end;margin-top:clamp(28px,4vw,56px)}
.pj-titulo{grid-column:1/8}
.pj-olho{color:var(--laranja-500)}
.pj-titulo h1{margin-top:14px;font-weight:900;font-size:clamp(46px,7vw,110px);line-height:.9;text-transform:uppercase;letter-spacing:-.055em}
.pj-titulo h1 span{display:block;font-family:var(--f-ita);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.01em;font-size:.44em;line-height:1.1;color:var(--osso-500);margin-top:.2em}
.pj-sobre{grid-column:8/13}
.pj-sobre > p{font-size:16px;line-height:1.6;color:rgba(var(--osso-rgb),.88)}
.pj-ficha{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--vao);margin:20px 0 22px}
.pj-ficha div{padding:12px 14px;border-radius:var(--r-s);background:var(--tinta-700);box-shadow:inset 0 0 0 1px var(--ln-t);min-width:0}
.pj-ficha dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--osso-500)}
.pj-ficha dd{margin-top:4px;font-size:14px;line-height:1.3}
.pagina{margin-top:clamp(32px,4vw,56px);padding:clamp(6px,.8vw,12px);background:var(--osso-0);border-radius:var(--r-l);overflow:hidden}
.pagina-in{border-radius:calc(var(--r-l) - 8px);overflow:hidden;background:var(--osso-100)}
.fatia{display:block;overflow:hidden}
.fatia + .fatia{margin-top:-1px}
.fatia img{width:100%;height:auto}
.outros{padding-top:var(--sec)}

/* ---------- 1099 para baixo ---------- */
@media (max-width:1099px){
  .sv-1{grid-column:1/13;grid-row:auto;min-height:0}
  .sv-2{grid-column:1/7}
  .sv-3{grid-column:7/13}
  .sobre .foto{grid-column:8/13}
  .perguntas .tit{grid-column:1/13;position:static}
  .perg-lista{grid-column:1/13}
  .plano-x{grid-template-columns:minmax(0,1fr)}
  .pj-titulo,.pj-sobre{grid-column:1/13}
  .pc-g{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ---------- 899 para baixo: menu de tela cheia; processo com bolinhas ---------- */
@media (max-width:899px){
  :root{--topo:68px}
  .topo{top:10px}
  .menu-btn{display:flex}
  .menu{position:fixed;inset:0;z-index:1;height:auto;flex-direction:column;align-items:stretch;justify-content:center;gap:0;padding:96px var(--g) 48px;border:0;border-radius:0;background:var(--tinta-800);-webkit-backdrop-filter:none;backdrop-filter:none;
    opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
  .menu a{height:auto;padding:14px 0;border-radius:0;border-bottom:1px solid var(--ln-t);font-weight:900;font-size:clamp(34px,10vw,52px);line-height:1;letter-spacing:-.05em;text-transform:uppercase;color:var(--osso-200);transform:translateY(16px);opacity:0;transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .45s}
  .menu a:hover,.menu a.on{background:none;color:var(--laranja-500)}
  .topo.aberto .menu{opacity:1;visibility:visible;transition:opacity .3s ease}
  .topo.aberto .menu a{transform:none;opacity:1}
  .topo.aberto .menu a:nth-child(2){transition-delay:.04s}
  .topo.aberto .menu a:nth-child(3){transition-delay:.08s}
  .topo.aberto .menu a:nth-child(4){transition-delay:.12s}
  .topo.aberto .menu a:nth-child(5){transition-delay:.16s}
  html.menu-aberto{overflow:hidden}
  .hero{padding-top:calc(var(--topo) + 3vh)}

  .proc-cab{grid-template-columns:minmax(0,1fr)}
  .proc-corpo{grid-template-columns:minmax(0,1fr)}
  .palco{height:clamp(290px,82vw,360px)}
  .demo{inset:40px 12px 14px}
  .d-lista li{padding:7px 0}
  .d-selos li{padding:8px 10px;font-size:13px}
  .proc-barra{display:none}
}
@keyframes entrar{from{opacity:0;translate:16px 0}to{opacity:1;translate:0 0}}
/* ---------- celular ---------- */
@media (max-width:767px){
  body{font-size:15px}
  .b-t{display:none}
  .b-n{width:42px;height:42px}
  .bol-ln{top:20px}
  :root{--pad:20px}
  .hero h1{font-size:clamp(30px,10.5vw,60px)}
  .h-base{display:block;padding:0}
  .h-ita{position:absolute;left:var(--g);right:var(--g);bottom:calc(var(--peek) + 14px);font-size:clamp(22px,6.6vw,28px)}

  .sv-2,.sv-3{grid-column:1/13;min-height:0}
  .sv-1 h3{font-size:clamp(40px,12.5vw,64px)}
  .sv-4{flex-direction:column;align-items:flex-start;padding-right:var(--pad)}
  .sv-4 h3{padding-top:44px}
  .sv-4 .sv-ir{display:none}
  .sv-4 p{flex:none}

  .et{grid-template-columns:minmax(0,1fr)}
  .et-n{display:none}
  .et h3{padding-top:0}
  .d-lista li{font-size:13px}

  .pc-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pc a{padding:6px 6px 12px;border-radius:16px}
  .pc-capa{border-radius:11px}
  .pc-txt{padding:10px 4px 0}
  .pc-txt b{font-size:15px}
  .pc-txt span{font-size:12.5px;line-height:1.3}
  .pc-g[data-vista="lista"]{grid-template-columns:minmax(0,1fr)}
  .vista button{height:36px;padding:0 12px}

  .planos-g{grid-template-columns:minmax(0,1fr);gap:28px}

  .sobre-g{display:flex;flex-direction:column;align-items:stretch;gap:28px}
  .sobre .foto{width:min(64%,280px);align-self:flex-end}

  .rod-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .rod-marca{grid-column:1/-1}
  .rod-topo{position:absolute;top:var(--pad);right:var(--pad)}
  .rod-assin{font-size:12.6vw}

  .pj-ficha div{padding:10px 11px}
  .pj-ficha dd{font-size:13px}
  .pj-cta{width:100%}
}
@media (max-width:420px){
  .topo-acoes .orc{height:46px;padding:0 16px;font-size:14px}
  .assin{padding:0 14px;font-size:16px}
  .b-n{width:38px;height:38px}
  .bol-ln{top:18px}
}
@media (min-width:768px){.so-cel{display:none}}
@media (max-width:767px){.so-pc{display:none}}

/* Movimento reduzido: sai o que anda sozinho (chiado, faixas, carrossel, prévias rolando, animações das etapas). */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .grao{animation:none}
  .mq-fx,.car-fx,.tela-in img{animation:none}
  .demo *,.demo *::after{animation:none!important}
  .assina{clip-path:none}.ok{background:var(--salvia-500);border-color:var(--salvia-500)}.ok::after{scale:1}.carimbo{scale:1}
  .d-folha .t,.d-folha .l{transform:none}.d-url .txt{width:17ch}.d-carga i{transform:none}.d-medidor .arco{stroke-dashoffset:4}
  .js .h-ita span,.js .h-ita span.sai,.js .h-ita span.on{clip-path:none;opacity:0;transition:opacity .25s linear}
  .js .h-ita span.on{opacity:1}
  .btn,.sv,.sv-ir,.pc a,.pc-capa img,.menu a{transition:none}
}

/* planos: o valor dividido em duas metades, para iniciar e na entrega */
.metades{display:grid;grid-template-columns:1fr 1fr;margin-top:16px;border-radius:14px;background:rgba(var(--osso-rgb),.06);box-shadow:inset 0 0 0 1px var(--ln-t)}
.metades div{display:flex;flex-direction:column;gap:2px;padding:12px 16px}
.metades div + div{border-left:1px dashed var(--ln-t2)}
.metades dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--osso-500)}
.metades dd{font-weight:800;font-size:clamp(18px,1.6vw,22px);letter-spacing:-.03em;color:var(--osso-50)}
.metades div:first-child dd::after{content:"";display:inline-block;width:7px;height:7px;margin-left:8px;border-radius:50%;background:var(--laranja-500);vertical-align:middle}
.plano-2 .metades div:first-child dd::after{background:var(--azul-500)}
.metades dd span{display:block;margin-top:2px;font-weight:500;font-size:13.5px;letter-spacing:0;color:var(--osso-500)}
.metades div:first-child dd::after{display:none}

/* etiquetas de Black Friday: nunca quebram em duas linhas */
.bf,.tag-bf{white-space:nowrap;flex:none}
.promo{max-width:100%}