/* Mobidash — site.css · specs/design.md + specs/plano.md Apêndice A */
@layer reset, base, components, sections, motion;

:root{
  color-scheme:dark;
  --bg:#0E0E0E; --bg-alt:#151515; --bg-deep:#0A0A0A; --surface:#1C1C1C; --border:#242424; --border-ui:#6A6A6A;
  --text:#F5F5F3; --text-muted:#C4C4C4; --lime:#CBF41C; --lime-dim:#B7DC19; --erro:#FF7A7A; /* só campo obrigatório e erro do formulário (exceção ao §1, 2026-10-16) */
  /* Orbitron (a do logo) nos títulos; Nunito Sans no texto, no lugar da Avenir do manual, que só tem
     licença de desktop. Orbitron é larga: a escala dos títulos é menor que a da serifada de antes. */
  --font-display:"Orbitron","Orbitron Fallback","Arial Black",Arial,sans-serif;
  --font-text:"Nunito Sans","Nunito Sans Fallback",Arial,Roboto,"Helvetica Neue",sans-serif;
  --fs-h1:clamp(1.75rem,1.25rem + 2.2vw,3rem);
  --fs-h2:clamp(1.5rem,1.15rem + 1.5vw,2.25rem);
  --fs-prova:clamp(2.75rem,2rem + 3.2vw,4.25rem);
  --fs-h3:1.125rem; --fs-corpo:1rem; --fs-apoio:.875rem; --fs-eyebrow:.75rem; --fs-nota:.75rem; --fs-citacao:1.375rem; --fs-botao:1rem;
  --lh-h1:1.14; --lh-h2:1.18; --lh-prova:1.05; --lh-citacao:1.4; --lh-h3:1.3; --lh-corpo:1.6; --lh-apoio:1.5; --lh-eyebrow:1.2;
  --ls-display:0; --ls-prova:0; --ls-eyebrow:.14em;
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:40px; --s-5:64px; --s-6:96px; --s-7:160px;
  --s-section:160px; --s-pause:240px; --s-hero:96px;
  --s-stack-eyebrow:16px; --s-stack-apoio:24px; --s-stack-cta:40px; --s-head-body:64px; --s-text-panel:64px;
  --gutter:40px; --grid-gap:24px; --col-gap:64px; --card-pad:32px; --feature-pad:40px; --carousel-gap:24px;
  --w-container:1120px; --w-display:880px; --w-text:680px; --w-paragraph:36rem; --w-card-m:300px;
  --h-nav:64px; --h-botao:44px; --h-campo:48px; --h-textarea:120px; --h-aba:44px; --h-panel-bar:28px; --h-logo:24px; --h-avatar:40px;
  --scroll-offset:80px;
  --ratio-panel:16/9; --ratio-crop:4/3;
  --r-card:16px; --r-panel:12px; --r-campo:8px; --r-pill:999px; --bw:1px; --bw-aba-ativa:2px; --focus-w:2px; --focus-offset:3px;
  --btn-pad-y:13px; --btn-pad-x:27px; --tab-pad-x:16px;
  --z-nav:100; --z-skip:110;
  --t-hover:150ms; --t-tab:150ms; --t-enter:400ms; --t-count:1200ms; --ease-out:cubic-bezier(.2,0,0,1); --enter-offset:12px;
}
@media (min-width:768px){:root{--fs-h3:1.25rem;--fs-corpo:1.0625rem}}
@media (max-width:1023px){:root{--s-section:96px;--s-pause:160px}}
@media (max-width:767px){:root{--s-section:80px;--s-pause:120px;--s-hero:80px;--s-head-body:40px;--s-text-panel:40px;--gutter:16px;--card-pad:24px;--feature-pad:24px;--carousel-gap:16px;--w-card-m:320px;--ratio-panel:4/3}}
@media (max-width:479px){:root{--w-card-m:292px;--tab-pad-x:8px}}

/* fallback com métricas (plano §3.2) */
@font-face{font-family:"Orbitron Fallback";src:local("Arial");size-adjust:118%;ascent-override:86%;descent-override:21%;line-gap-override:0%}
@font-face{font-family:"Nunito Sans Fallback";src:local("Arial");size-adjust:101%;ascent-override:100%;descent-override:35%;line-gap-override:0%}

@layer reset{
  *,*::before,*::after{box-sizing:border-box}
  body,h1,h2,h3,p,figure,blockquote,ul,ol{margin:0}
  ul,ol{padding:0;list-style:none}
  img,svg{display:block;max-width:100%;height:auto}
  button,input,textarea{font:inherit;color:inherit}
  button{background:none;border:0;padding:0;cursor:pointer}
  [hidden]{display:none !important}
}

@layer base{
  html{font-synthesis:none;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
  body{font-family:var(--font-text);font-size:var(--fs-corpo);line-height:var(--lh-corpo);color:var(--text);background:var(--bg);font-kerning:normal;font-variant-numeric:tabular-nums;min-height:100vh}
  a{color:inherit;text-decoration:none}
  strong,b{font-weight:600}
  em,i{font-style:italic}
  :focus-visible{outline:var(--focus-w) solid var(--lime);outline-offset:var(--focus-offset)}
  section,footer{scroll-margin-top:var(--scroll-offset)}
  .container{width:min(var(--w-container),100% - 2*var(--gutter));margin-inline:auto}
  .display{font-family:var(--font-display);font-weight:600;letter-spacing:var(--ls-display);text-wrap:balance;hyphens:manual;-webkit-hyphens:manual}
  .display--h1{font-size:var(--fs-h1);line-height:var(--lh-h1)}
  .display--h2{font-size:var(--fs-h2);line-height:var(--lh-h2)}
  .display--prova{font-size:var(--fs-prova);line-height:var(--lh-prova);letter-spacing:var(--ls-prova)}
  h3{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:600}
  p{text-wrap:pretty}
  .apoio{font-size:var(--fs-corpo);color:var(--text-muted);max-width:var(--w-paragraph)}
  .nota{font-size:var(--fs-nota);line-height:var(--lh-apoio);color:var(--text-muted)}
  .nota a{text-decoration:underline;text-underline-offset:3px}
  .lima{color:var(--lime)}
  .nowrap,.num{white-space:nowrap}
  sup{font-size:.6em;line-height:0;vertical-align:.55em;margin-left:2px}
  sup a{color:var(--text-muted)}
  .skip{position:absolute;left:var(--s-2);top:-100px;z-index:var(--z-skip);padding:12px 20px;background:var(--lime);color:var(--bg);border-radius:var(--r-pill);font-weight:500;font-size:var(--fs-apoio)}
  .skip:focus{top:var(--s-2)}
}

@layer components{
  .eyebrow{font-size:var(--fs-eyebrow);line-height:var(--lh-eyebrow);font-weight:500;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted);font-feature-settings:"case"}
  .eyebrow--lima{color:var(--lime)}
  .stack{display:flex;flex-direction:column;align-items:flex-start}
  .stack--center{align-items:center;text-align:center;margin-inline:auto}
  .stack--center .display{max-width:var(--w-display)}
  .stack--center .apoio{margin-inline:auto}
  .stack .eyebrow + .display{margin-top:var(--s-stack-eyebrow)}
  .stack .display + .apoio,.stack h3 + .apoio{margin-top:var(--s-stack-apoio)}
  .stack .apoio + .cta,.stack .display + .cta,.stack .display + .btn{margin-top:var(--s-stack-cta)}
  .stack .eyebrow + h3{margin-top:var(--s-stack-eyebrow)}
  .cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3)}
  .stack--center .cta{justify-content:center}
  .btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--h-botao);padding:var(--btn-pad-y) var(--btn-pad-x);border:var(--bw) solid var(--lime);border-radius:var(--r-pill);background:var(--lime);color:var(--bg);font-size:var(--fs-botao);line-height:1;font-weight:500;white-space:nowrap;transition:background-color var(--t-hover),border-color var(--t-hover),color var(--t-hover)}
  .btn:hover{background:var(--lime-dim);border-color:var(--lime-dim)}
  .btn--secondary{background:transparent;border-color:var(--border);color:var(--text)}
  .btn--secondary:hover{background:transparent;border-color:var(--text-muted)}
  .link{font-size:var(--fs-apoio);font-weight:500;text-decoration:underline;text-underline-offset:4px;min-height:var(--h-botao);display:inline-flex;align-items:center}
  .card{background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--r-card);padding:var(--card-pad)}
  .frame{position:relative;border:var(--bw) solid var(--border);border-radius:var(--r-panel);overflow:hidden;background:var(--panel-bg,var(--surface))}
  .frame::before{content:"";display:block;height:var(--h-panel-bar);border-bottom:var(--bw) solid var(--border);background:
    radial-gradient(circle 4px at 16px 50%,#575757 100%,transparent 0),
    radial-gradient(circle 4px at 30px 50%,#575757 100%,transparent 0),
    radial-gradient(circle 4px at 44px 50%,#575757 100%,transparent 0)}
  .frame img{display:block;width:100%;height:auto;aspect-ratio:var(--ratio-panel);object-fit:cover;object-position:left top}
  .frame--contain img{object-fit:contain}
  .frame--fin{--panel-bg:#242426}.frame--ecom{--panel-bg:#1A1918}.frame--log{--panel-bg:#221F1E}.frame--people{--panel-bg:#242424}
  .frame figcaption{font-size:var(--fs-apoio);line-height:var(--lh-apoio);color:var(--text-muted);padding:var(--s-2) var(--s-3);max-width:var(--w-text)}
  @media (max-width:767px){.frame{border-radius:8px;max-width:415px;margin-inline:auto}.frame::before{height:20px;background-position:0 50%}}
  .tabs__list{display:flex;gap:0;border-bottom:var(--bw) solid var(--border);overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent)}
  .tabs__list::-webkit-scrollbar{display:none}
  @media (min-width:768px){.tabs__list{-webkit-mask-image:none;mask-image:none}}
  .tab{position:relative;flex:0 0 auto;min-height:var(--h-aba);padding:15px var(--tab-pad-x);font-size:var(--fs-apoio);font-weight:500;line-height:1;color:var(--text-muted);white-space:nowrap;scroll-snap-align:start;transition:color var(--t-tab)}
  .tab[aria-selected="true"]{color:var(--text)}
  .tab[aria-selected="true"]::after{content:"";position:absolute;left:var(--tab-pad-x);right:var(--tab-pad-x);bottom:-1px;height:var(--bw-aba-ativa);background:var(--lime)}
  .tabs__panel{margin-top:var(--s-3)}
  .label{display:block;font-size:var(--fs-apoio);line-height:var(--lh-apoio);font-weight:500;color:var(--text-muted);margin-bottom:var(--s-1)}
  .label__opt{font-weight:400;opacity:.8}
  .label__req{color:var(--erro);margin-left:2px}
  .campo{display:block;width:100%;min-height:var(--h-campo);padding:13px 16px;font-size:max(16px,1em);line-height:1.25;background:var(--surface);border:var(--bw) solid var(--border-ui);border-radius:var(--r-campo);color:var(--text)}
  .campo::placeholder{color:var(--text-muted);opacity:.7}
  .campo:focus-visible{outline:none;border-color:var(--lime)}
  .campo--area{min-height:var(--h-textarea);resize:vertical}
  .campo[aria-invalid="true"]{border-color:var(--erro)}
  .erro{font-size:var(--fs-apoio);color:var(--erro);min-height:0;margin-top:6px}
  .erro:empty{display:none}
  .ajuda{font-size:var(--fs-nota);color:var(--text-muted);margin-top:6px}
  .lang{display:inline-flex;align-items:center;font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);font-weight:500;text-transform:uppercase;color:var(--text-muted)}
  .lang [aria-current]{color:var(--text)}
  .lang a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
  .lang span[aria-hidden]{padding:0 2px}
  .quote__text{font-family:var(--font-text);font-style:italic;font-weight:400;font-size:var(--fs-citacao);line-height:var(--lh-citacao);letter-spacing:-.01em;quotes:"\201C" "\201D";text-wrap:balance}
  .quote__text::before{content:open-quote}.quote__text::after{content:close-quote}
  .quote__by{display:flex;align-items:center;gap:12px;margin-top:var(--s-3);font-size:var(--fs-apoio);line-height:var(--lh-apoio);color:var(--text-muted)}
  .quote__by strong{color:var(--text);font-weight:500}
  .quote__avatar{flex:0 0 auto;width:var(--h-avatar);height:var(--h-avatar);border-radius:50%;background:var(--bg-alt);border:var(--bw) solid var(--border);display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:var(--fs-apoio);letter-spacing:.04em;color:var(--text)}
  .divisor{border:0;border-top:var(--bw) solid var(--border);margin:var(--s-5) 0}
}

@layer sections{
  /* nav */
  .nav{position:sticky;top:0;z-index:var(--z-nav);height:var(--h-nav);background:rgb(14 14 14 / .85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:var(--bw) solid transparent;transition:border-color var(--t-hover)}
  @supports not (backdrop-filter:blur(1px)){.nav{background:var(--bg)}}
  .nav.is-scrolled{border-bottom-color:var(--border)}
  .nav__in{display:flex;align-items:center;height:100%;gap:var(--s-3)}
  .nav__logo{display:inline-flex;align-items:center;margin-right:auto}
  .nav__logo img{height:var(--h-logo);width:auto}
  .nav__logo-icon{display:none}
  .nav__links{display:flex;gap:var(--s-3)}
  .nav__links a{font-size:var(--fs-apoio);font-weight:500;color:var(--text-muted);padding:15px 0;line-height:1;transition:color var(--t-hover)}
  .nav__links a:hover,.nav__links a.is-active{color:var(--text)}
  .btn--nav{background:transparent;border-color:var(--border);color:var(--text)}
  .btn--nav:hover{border-color:var(--text-muted);background:transparent}
  .nav.is-past .btn--nav{background:var(--lime);border-color:var(--lime);color:var(--bg)}
  .nav.is-past .btn--nav:hover{background:var(--lime-dim);border-color:var(--lime-dim)}
  .btn__short{display:none}
  @media (max-width:1023px){.nav__links{display:none}}
  @media (max-width:767px){.nav__in{gap:var(--s-2)}}
  @media (max-width:479px){.nav__logo-full{display:none}.nav__logo-icon{display:block}.btn__long{display:none}.btn__short{display:inline}}

  /* hero */
  .hero{position:relative;overflow:hidden;min-height:calc(100svh - var(--h-nav));display:flex;align-items:center;padding:var(--s-hero) 0}
  .hero>.container{position:relative;z-index:1}
  .hero__dots{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;
    -webkit-mask-image:linear-gradient(#000 82%,transparent 100%);mask-image:linear-gradient(#000 82%,transparent 100%)}
  .hero .stack--center .apoio{max-width:var(--w-paragraph)}
  .hero-painel{padding:var(--s-6) 0 var(--s-hero)}
  .demo__instrucao{font-size:var(--fs-apoio);line-height:var(--lh-apoio)}
  .stack .demo__areas{margin-top:var(--s-4);max-width:100%}
  .frame--hero{margin-top:0}
    /* Vitrine sem moldura, da largura da janela. Os painéis rodam numa tela virtual
     de 1600×900 (16:9, como os prints) reduzida por escala: o do centro fica com a
     largura do container e as sobras dos lados mostram os vizinhos do carrossel,
     desfocados. Abaixo de 1180 px o app troca para o layout compacto, por isso a
     tela virtual e não a largura real. --escala e --largura vêm de site.js (i). */
  .vitrine-palco{position:relative;overflow:hidden;height:calc(900px * var(--escala,1));margin-top:var(--s-4)}
  .vitrine-palco iframe{position:absolute;top:0;left:50%;display:block;width:calc(var(--largura,1600) * 1px);height:900px;border:0;background:transparent;
    transform:translateX(-50%) scale(var(--escala,1));transform-origin:50% 0}
  @media (max-width:767px){.vitrine-palco{height:680px}.vitrine-palco iframe{left:0;width:100%;height:680px;transform:none}}
  @media (max-width:767px){.hero .cta{flex-direction:column;gap:var(--s-2)}}

  /* tese */
  .tese{background:var(--bg-alt);padding:var(--s-section) 0}   /* sem botões desde 2026-10-15: frase e apoio */

  /* como funciona */
  .como{padding:var(--s-section) 0;overflow-x:clip}   /* a areia do fundo vai de ponta a ponta da janela */
  /* areia (exceção ao §8, 2026-10-16): duas fitas de grãos finos entrelaçadas atrás dos celulares, cinza com
     alguns verdes, bem fracas — fundo, nunca protagonista. Só com o palco fixo (JS); site.js o. */
  .areia{display:none}
  .celulares-trilho.is-rolagem .areia{display:block;position:absolute;z-index:-1;top:0;left:calc(50% - 50vw);width:100vw;height:100%;pointer-events:none;opacity:.58;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
  /* celulares em escada, como na Oura: o do meio maior, os vizinhos 86%, as pontas 74%; centrados na
     vertical. A moldura é CSS (cantos, ilha e barra de início); a tela é captura da demo, 390×844. */
  .celulares{--cel:clamp(150px,min(21.5vw,var(--cel-alt)),300px);display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.4vw,16px);margin-top:var(--s-head-body)}
  .celular{--w:var(--cel);position:relative;flex:0 0 auto;width:var(--w);aspect-ratio:390/844;margin:0;border-radius:calc(var(--w) * .15);overflow:hidden;background:#000;border:calc(var(--w) * .022) solid #050505;outline:var(--bw) solid var(--border)}
  .celular--2{--w:calc(var(--cel) * .86)}
  .celular--3{--w:calc(var(--cel) * .74)}
  .celular img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:top}
  .celular::before{content:"";position:absolute;z-index:1;top:calc(var(--w) * .028);left:50%;transform:translateX(-50%);width:30%;height:calc(var(--w) * .082);border-radius:var(--r-pill);background:#000}
  .celular::after{content:"";position:absolute;z-index:1;bottom:calc(var(--w) * .022);left:50%;transform:translateX(-50%);width:36%;height:calc(var(--w) * .014);min-height:3px;border-radius:var(--r-pill);background:rgb(245 245 243 / .7)}
  .celulares__nota{margin-top:var(--s-3);text-align:center}
  /* rolagem (exceção ao §8, 2026-10-15): o palco fica fixo na tela enquanto se rola --rolagem; nesse trecho os
     celulares saem de trás do primeiro até formar a escada e, rolando para cima, voltam para trás dele (site.js k).
     Só com JS (classe is-rolagem); fixa também com reduced-motion, por decisão dele. --cel-alt limita o celular pela altura da tela: o do
     meio começa maior (o quanto couber abaixo do título, até 25%); no fim a escada cabe com o título em cima e a
     nota embaixo (--cabeca reserva os dois). Na largura, 21,5vw deixa os cinco dentro da janela. */
  .celulares-trilho{--rolagem:120svh;--cabeca:250px;--cel-alt:calc((100svh - var(--h-nav) - var(--cabeca)) * .4621)}
  .celulares-trilho.is-rolagem{height:calc(100svh - var(--h-nav) + var(--rolagem))}
  .celulares-trilho.is-rolagem .celulares-palco{isolation:isolate;position:sticky;top:var(--h-nav);height:calc(100svh - var(--h-nav));display:flex;flex-direction:column;justify-content:center}
  .celulares-trilho.is-rolagem .celulares{margin-top:var(--s-3)}
  .celulares-trilho.is-rolagem .celulares,.celulares-trilho.is-rolagem .celulares__nota{will-change:transform,opacity}
  .celulares-trilho.is-rolagem .celular{will-change:transform,opacity,filter}
  .celulares-trilho.is-rolagem .celular--1{z-index:3}
  .celulares-trilho.is-rolagem .celular--2{z-index:2}
  /* depois da escada, por que ter o painel no celular (no lugar da antiga seção Prova, 2026-10-15): três
     vantagens, uma para cada tela de cima — os avisos, o assistente, o mesmo número em toda tela. Sem lima. */
  .vantagens{margin-top:var(--s-5)}
  .vantagens__titulo{text-align:center;font-size:clamp(1.25rem,1rem + 1vw,1.75rem);line-height:var(--lh-h2)}
  .vantagens__lista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap);margin-top:var(--s-4)}
  .vantagens__item{padding-top:var(--s-3);border-top:var(--bw) solid var(--border)}
  .vantagens__icone{display:block;width:24px;height:24px;fill:none;stroke:var(--text-muted);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  .vantagens__nome{margin-top:var(--s-2);font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:600}
  .vantagens__item .apoio{margin-top:var(--s-1);font-size:var(--fs-apoio)}
  @media (max-width:767px){.vantagens__lista{grid-template-columns:1fr;gap:var(--s-4)}}
  @media (max-width:1023px){
    .celulares{--cel:clamp(150px,min(30vw,var(--cel-alt)),290px)}
    .celular--3{display:none}
  }
  @media (max-width:767px){
    /* três, sobrepostos: o do meio na frente */
    .celulares-trilho{--cabeca:290px}
    .celulares{--cel:min(47vw,220px,var(--cel-alt));gap:0}
    .celular--2{--w:calc(var(--cel) * .82);margin-inline:calc(var(--cel) * -.3)}
    .celular--1{z-index:1}
  }

  .unidade{color:var(--lime)}

  /* calculadora */
  .calc{background:var(--bg-alt);padding:var(--s-section) 0}
  /* a conta do site atual, à mostra */
  .calc__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--col-gap);margin-top:var(--s-head-body)}
  .calc__form{display:flex;flex-direction:column;justify-content:space-between;gap:var(--s-3)}
  .faixa__topo{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-2);margin-bottom:var(--s-1)}
  .faixa__topo .label{margin-bottom:0}
  .faixa__valor{font-size:var(--fs-corpo);font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
  .faixa__range{--p:50%;display:block;width:100%;height:28px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
  .faixa__range::-webkit-slider-runnable-track{height:4px;border-radius:var(--r-pill);background:linear-gradient(to right,var(--lime) var(--p),var(--border-ui) var(--p))}
  .faixa__range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border:0;border-radius:50%;background:var(--lime)}
  .faixa__range::-moz-range-track{height:4px;border-radius:var(--r-pill);background:var(--border-ui)}
  .faixa__range::-moz-range-progress{height:4px;border-radius:var(--r-pill);background:var(--lime)}
  .faixa__range::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:var(--lime)}
  .calc__result{display:flex;flex-direction:column}
  .calc__result .eyebrow + .calc__out{margin-top:var(--s-2)}
  /* verde Mobidash nos controles e no número do resultado, como no site atual (exceção ao §1, 2026-10-15);
     o card continua escuro */
  .calc__out{font-family:var(--font-display);font-weight:600;letter-spacing:var(--ls-display);line-height:var(--lh-h2);color:var(--lime)}
  .calc__linhas{margin:var(--s-3) 0 0;border-top:var(--bw) solid var(--border)}
  .calc__linhas div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-2);padding:12px 0;border-bottom:var(--bw) solid var(--border);font-size:var(--fs-apoio);line-height:var(--lh-apoio)}
  .calc__linhas dt{color:var(--text-muted)}
  .calc__linhas dd{margin:0;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
  .calc__formula{margin:var(--s-3) 0 var(--s-4)}
  .calc__result .btn{margin-top:auto;align-self:flex-start}
  .btn__seta{width:16px;height:16px;margin-left:10px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  @media (max-width:767px){.calc__grid{grid-template-columns:1fr;gap:var(--s-3)}}

  /* soluções — destaque com o fluxo de dados (exceção ao design.md §8/§9) + lista sem formato de card */
  .solucoes{padding:var(--s-section) 0}
  .solucoes__grid{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s-6);margin-top:var(--s-head-body);align-items:stretch}
  /* foto (exceção ao §7, 2026-10-15 — provisória do kit até a foto real da Mobidash): a pessoa à direita, como
     quem recebe o que sai do data warehouse. O fluxo fica no preto; o rosto, acima e à direita da lista; a lista
     cai sobre a mão e o tablet. A foto começa acima da borda do bloco (recortada nela), se dissolve embaixo e
     vai até a borda esquerda da janela: à esquerda ela fica fraca, atrás do fluxo,
     e ganha força até a pessoa, para o bloco inteiro parecer ocupado. Um véu escurece atrás da lista. */
  .solucoes{position:relative;overflow:clip}
  .solucoes::before{content:"";position:absolute;z-index:1;top:0;left:0;right:0;height:140px;pointer-events:none;
    background:linear-gradient(180deg,var(--bg) 0,rgb(14 14 14 / .6) 40%,rgb(14 14 14 / 0) 100%)}   /* troca de bloco suave, a partir do fundo dos celulares */
  .solucoes .container > .stack,.solucoes__engenharia{position:relative;z-index:1}
  /* largura da foto: o mínimo para a borda esquerda dela chegar à da janela (rosto ÷ .68), sem crescer além
     disso — foto maior empurraria o rosto para fora da tela à direita */
  .solucoes__grid{isolation:isolate;--foto-w:max(2050px,min(73.5vw + 996px,147vw - 151px));--rosto-x:.68;--rosto-y:.22}
  .solucoes__grid::before{content:"";position:absolute;z-index:-1;pointer-events:none;width:var(--foto-w);aspect-ratio:16/9;
    left:calc(min(100% + 90px, 50% + 50vw - 130px) - var(--rosto-x) * var(--foto-w));
    top:calc(-190px - var(--rosto-y) * var(--foto-w) * 9 / 16);
    background:url("../img/solucoes-pessoa.jpg") center / cover no-repeat;
    -webkit-mask-image:linear-gradient(90deg,rgb(0 0 0 / .5) 0,rgb(0 0 0 / .55) 20%,rgb(0 0 0 / .66) 32%,rgb(0 0 0 / .82) 44%,#000 56%),linear-gradient(180deg,#000 0,#000 74%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,rgb(0 0 0 / .5) 0,rgb(0 0 0 / .55) 20%,rgb(0 0 0 / .66) 32%,rgb(0 0 0 / .82) 44%,#000 56%),linear-gradient(180deg,#000 0,#000 74%,transparent 100%);
    mask-composite:intersect}
  /* véu em coordenadas da janela (o container de 1120 px começa em 50vw - 560px) */
  .solucoes__grid::after{content:"";position:absolute;z-index:-1;pointer-events:none;top:-1200px;bottom:-1200px;left:calc(50% - 50vw);right:calc(50% - 50vw);
    background:linear-gradient(90deg,rgb(14 14 14 / .72) 0,rgb(14 14 14 / .76) calc(50vw - 480px),
      rgb(14 14 14 / .76) calc(50vw - 320px),rgb(14 14 14 / .72) calc(50vw - 160px),rgb(14 14 14 / .68) calc(50vw + 20px),
      rgb(14 14 14 / .7) calc(50vw + 500px),rgb(14 14 14 / .12) calc(50vw + 640px),rgb(14 14 14 / .12) 100%)}
  @media (max-width:1023px){
    .solucoes__grid{--foto-w:800px}
    /* uma coluna: a pessoa atrás do lado direito do fluxo, com o rosto inteiro na tela, abaixo do texto de
       apoio e acima da linha ETL → DW (nenhuma etiqueta no rosto) */
    .solucoes__grid::before{left:calc(100% - 50px - var(--rosto-x) * var(--foto-w));top:calc(70px - var(--rosto-y) * var(--foto-w) * 9 / 16)}
    .solucoes__grid::after{background:linear-gradient(90deg,rgb(14 14 14 / .9) 0,rgb(14 14 14 / .65) 55%,rgb(14 14 14 / .2) 100%)}
  }
  .solucoes__titulo{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:600}
  .fluxo__palco{--etl-x:54%;--eixo-y:50%;position:relative;z-index:1;min-height:clamp(380px,36vw,500px);cursor:crosshair;touch-action:pan-y}
  .fluxo__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
  .fluxo__fontes{position:absolute;inset:0;pointer-events:none}
  .fluxo__fonte{position:absolute;left:0;transform:translateY(-50%);padding:6px 10px;font-size:var(--fs-nota);line-height:1;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--r-pill);white-space:nowrap}
  .fluxo__etapa{position:absolute;top:calc(var(--eixo-y) + 22px);font-size:var(--fs-nota);line-height:1;font-weight:500;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text);white-space:nowrap;pointer-events:none;background:var(--bg-deep);padding:4px 8px;border-radius:var(--r-pill)}
  .fluxo__etapa--etl{left:var(--etl-x);transform:translateX(-50%)}
  .fluxo__etapa--dw{right:0}
  .fluxo__nome-curto{display:none;text-decoration:none}
  .solucoes__engenharia{max-width:var(--w-text);margin-top:var(--s-5)}
  .solucoes__engenharia .apoio{margin-top:var(--s-1);font-size:var(--fs-apoio)}
  /* a lista vai do topo ao pé do painel: as quatro linhas dividem a altura; se a lista crescer, o palco cresce junto */
  .solucoes__saida{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--s-2)}
  .solucoes__lista{display:flex;flex-direction:column;flex:1}
  .solucoes__topicos{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
  .solucoes__topicos li{padding:5px 10px;font-size:var(--fs-nota);line-height:1.2;font-weight:500;color:var(--text-muted);background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--r-pill);white-space:nowrap}
  .solucoes__item{display:grid;grid-template-columns:20px minmax(0,1fr);gap:var(--s-2)}
  /* o espaço que sobra vai para os separadores, com a linha no meio: primeiro item no topo do painel,
     último no pé, e a mesma distância dos dois lados de cada linha */
  .solucoes__sep{flex:1 0 var(--s-4);display:flex;align-items:center}
  .solucoes__sep::before{content:"";flex:1;border-top:var(--bw) solid var(--border)}
  .solucoes__item .apoio{margin-top:var(--s-1);font-size:var(--fs-apoio)}
  .solucoes__icone{width:20px;height:20px;margin-top:2px;fill:none;stroke:var(--text-muted);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke 1.2s ease-out,filter 1.2s ease-out}
  /* a bolinha do fluxo chegou: neon lima que acende em 0,35 s e apaga em 1,2 s (exceções ao §1 e ao §9) */
  .solucoes__icone.is-aceso{stroke:var(--lime);filter:drop-shadow(0 0 2px rgb(203 244 28 / .95)) drop-shadow(0 0 9px rgb(203 244 28 / .6));transition-duration:.35s}
  /* a ola: as letras do título sobem e acendem uma depois da outra, como na arquibancada */
  .ola-p{white-space:nowrap}
  .ola-l{display:inline-block}
  .solucoes__titulo.is-ola .ola-l{animation:ola 1s ease-in-out both;animation-delay:calc(var(--i) * 45ms)}
  @keyframes ola{
    0%,100%{transform:none;color:inherit;text-shadow:none}
    35%{transform:translateY(-5px);color:var(--lime);text-shadow:0 0 6px rgb(203 244 28 / .85),0 0 16px rgb(203 244 28 / .45)}
  }
  /* o site zera transição e animação com reduced-motion (camada motion); aqui, como na onda do hero, o
     efeito continua no tempo certo — sem isto o ícone acendia e apagava num quadro só */
  @media (prefers-reduced-motion:reduce){
    .solucoes__icone{transition-duration:1.2s !important}
    .solucoes__icone.is-aceso{transition-duration:.35s !important}
    .solucoes__titulo.is-ola .ola-l{animation-duration:1s !important}
  }
  @media (max-width:1023px){
    .solucoes__grid{grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
    .solucoes__lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5) var(--s-4)}
    .solucoes__sep{display:none}
  }
  @media (max-width:767px){
    .fluxo__palco{--etl-x:60%;min-height:0;height:360px}
    .fluxo__fonte{padding:5px 8px;font-size:.6875rem}
    .fluxo__nome-longo{display:none}.fluxo__nome-curto{display:inline}
    .solucoes__lista{display:flex;flex-direction:column;gap:0}
    .solucoes__sep{display:flex;flex-basis:var(--s-5)}
  }

  /* clientes */
  .clientes{padding:var(--s-section) 0}
  /* depoimentos (2026-10-15): o bloco tem uma foto de fundo, mais clara que o resto da página, e os
     depoimentos vêm um embaixo do outro em cards translúcidos — sólidos do lado do texto, ficando
     transparentes em degradê até o outro lado, onde a foto aparece através deles. Translaser e Dubai sólidos
     à esquerda; Ermida à direita. Foto provisória do kit. */
  .clientes{position:relative;isolation:isolate;overflow:clip;background:url("../img/clientes-fundo.jpg") center 30% / cover no-repeat}
  /* véu: emenda em cima com a calculadora e embaixo com os casos, sem linha; no meio deixa a foto aparecer */
  .clientes::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:linear-gradient(180deg,var(--bg-alt) 0,rgb(21 21 21 / .7) 14%,rgb(14 14 14 / .42) 36%,rgb(14 14 14 / .42) 74%,rgb(10 10 10 / .8) 92%,var(--bg-deep) 100%)}
  .depos{display:flex;flex-direction:column;gap:var(--s-4);margin-top:var(--s-head-body)}
  .depo{--lado:90deg;position:relative;display:flex;align-items:center;min-height:clamp(300px,24vw,360px);will-change:transform,opacity}   /* entrada com a rolagem: site.js n */
  .depo--direita{--lado:270deg;justify-content:flex-end}
  .depo::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:var(--r-card);
    background:linear-gradient(var(--lado),rgb(17 17 17 / .92) 0,rgb(17 17 17 / .86) 34%,rgb(17 17 17 / .5) 62%,rgb(17 17 17 / .14) 88%,rgb(17 17 17 / .04) 100%);
    border:var(--bw) solid rgb(255 255 255 / .07);
    -webkit-mask-image:linear-gradient(var(--lado),#000 0,#000 70%,transparent 100%);mask-image:linear-gradient(var(--lado),#000 0,#000 70%,transparent 100%);
    transition:filter var(--t-hover)}
  .depo:hover::before{filter:brightness(1.7)}   /* no hover o card clareia, como selecionado (sem crescer, §8) */
  /* luz que contorna a borda (exceção ao §8 e ao §1, 2026-10-15): um traço lima sutil corre pela borda; a máscara
     o deixa mais forte do lado sólido e o apaga junto com o card do lado translúcido. Uma volta a cada 7 s, os
     três cards fora de fase; só corre com o bloco visível (site.js m). */
  .depo::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:var(--r-card);padding:1.5px;opacity:.75;
    background:conic-gradient(from var(--giro),transparent 0deg,transparent 290deg,rgb(203 244 28 / .35) 330deg,rgb(203 244 28 / .95) 356deg,transparent 360deg);
    -webkit-mask-image:linear-gradient(var(--lado),#000 0,#000 35%,transparent 82%),linear-gradient(#000 0 0),linear-gradient(#000 0 0);
    -webkit-mask-clip:border-box,content-box,border-box;-webkit-mask-composite:source-in,xor;
    mask-image:linear-gradient(var(--lado),#000 0,#000 35%,transparent 82%),linear-gradient(#000 0 0),linear-gradient(#000 0 0);
    mask-clip:border-box,content-box,border-box;mask-composite:intersect,exclude;
    animation:depo-giro 7s linear infinite;transition:opacity var(--t-hover)}
  .depo:nth-child(2)::after{animation-delay:-2.3s}
  .depo:nth-child(3)::after{animation-delay:-4.6s}
  .depo:hover::after{opacity:1}
  .js .depos:not(.is-visivel) .depo::after{animation-play-state:paused}
  @keyframes depo-giro{to{--giro:360deg}}
  /* reduced-motion zera a duração (camada motion) e a luz piscaria; como no hero, ela continua, mais devagar */
  @media (prefers-reduced-motion:reduce){.depo::after{animation-duration:12s !important}.depo::before,.depo::after{transition-duration:.15s !important}}
  .depo__card{position:relative;width:min(100%,600px);padding:clamp(28px,4vw,56px)}
  .depo__texto{font-size:clamp(1.125rem,1rem + .5vw,1.375rem);text-wrap:pretty}
  .depo .quote__by{margin-top:var(--s-4)}
  .depo .quote__avatar{background:rgb(14 14 14 / .6)}
  /* logo do cliente no círculo (2026-10-16), no lugar das iniciais; o ícone vem em fundo branco */
  .depo .quote__avatar--logo{width:48px;height:48px;background:#fff;object-fit:cover}
  .depo__site{color:var(--text);text-decoration:underline;text-underline-offset:3px}
  .depo__aprovacao{margin-top:var(--s-2);font-size:var(--fs-nota);color:var(--text-muted)}
  @media (max-width:767px){
    .depo,.depo--direita{justify-content:flex-start;min-height:0}
    .depo::before,.depo--direita::before{background:rgb(17 17 17 / .82);-webkit-mask-image:none;mask-image:none}
    .depo::after{-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0),linear-gradient(#000 0 0)}
  }

  /* casos */
  /* como trabalhamos (2026-10-15, no lugar de "Casos e publicações", guardado em _dev): cinco etapas em abas;
     cada aba troca o texto e os entregáveis. Lima no número e na linha da etapa ativa e nos ✓ dos entregáveis,
     como no site atual (exceção ao §1). */
  .processo{background:var(--bg-deep);padding:var(--s-section) 0}
  /* as cinco etapas ocupam a mesma célula da grade: o bloco tem sempre a altura da maior e não empurra a página
     quando a etapa muda; a escondida fica invisível e inerte (data-oculto, site.js a), não some do layout */
  .processo__corpo{display:grid;grid-template-columns:minmax(0,1fr);margin-top:var(--s-head-body)}
  .processo__etapas{grid-row:1;grid-column:1;position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
  /* trilho cinza (a borda de cada aba, então cobre todas, até rolando no celular) e, por cima, a barra lima: vai
     do começo até o fim da etapa ativa (--prog, site.js l) e anda quando a etapa muda, preenchendo a linha */
  .processo__etapas::after{content:"";position:absolute;left:0;top:0;pointer-events:none;width:var(--prog,20%);height:var(--bw-aba-ativa);background:var(--lime);transition:width .5s var(--ease-out)}
  @media (prefers-reduced-motion:reduce){.processo__etapas::after{transition-duration:.5s !important}}   /* como no hero: o Windows dele reporta reduce */
  .etapa{position:relative;display:flex;align-items:center;gap:12px;min-height:56px;padding:var(--s-2) var(--s-1) var(--s-2) 0;border-top:var(--bw) solid var(--border);
    font-size:var(--fs-apoio);font-weight:500;line-height:1.25;color:var(--text-muted);text-align:left;transition:color var(--t-tab)}
  .etapa:hover{color:var(--text)}
  .etapa[aria-selected="true"]{color:var(--text)}
  .etapa__n{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;
    border:var(--bw) solid var(--border-ui);font-size:var(--fs-nota);font-weight:600;font-variant-numeric:tabular-nums}
  .etapa[aria-selected="true"] .etapa__n{background:var(--lime);border-color:var(--lime);color:var(--bg)}
  .processo__painel{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:var(--grid-gap);margin-top:var(--s-4)}
  .js .processo__painel{grid-row:2;grid-column:1}            /* com JS, as cinco na mesma célula; sem JS, empilhadas */
  .processo__painel[data-oculto]{visibility:hidden}
  .processo__titulo{font-size:clamp(1.25rem,1rem + .8vw,1.625rem);line-height:var(--lh-h2)}
  .processo__texto .apoio{margin-top:var(--s-2);max-width:56ch}
  .processo__entregas ul{display:flex;flex-direction:column;gap:12px;margin-top:var(--s-2);padding:0;list-style:none}
  .processo__entregas li{display:flex;align-items:center;gap:10px;font-size:var(--fs-apoio);color:var(--text)}
  .processo__check{flex:0 0 auto;width:16px;height:16px;fill:none;stroke:var(--lime);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  @media (max-width:1023px){
    .processo__etapas{display:flex;overflow-x:auto;scrollbar-width:none;gap:0}
    .processo__etapas::-webkit-scrollbar{display:none}
    .etapa{flex:0 0 auto;white-space:nowrap;padding-right:var(--s-3)}
    .processo__painel{grid-template-columns:1fr}
  }
  /* cases (2026-10-15, como no site atual): três números de projetos, em lima (exceção ao §1), com fonte na
     nota 6. Segue o fundo do "Como trabalhamos", logo acima. */
  .cases{background:var(--bg-deep);padding:0 0 var(--s-section);overflow-x:clip}   /* o brilho atrás dos cards não vaza para os lados */
  .cases__grid{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap);margin-top:var(--s-head-body)}
  /* cards de vidro (como os depoimentos) sobre um brilho difuso, bem fraco, para a transparência se perceber */
  .cases__grid::before{content:"";position:absolute;inset:-70px -50px;z-index:-1;pointer-events:none;filter:blur(12px);
    background:radial-gradient(36% 62% at 20% 55%,rgb(203 244 28 / .08),transparent 70%),radial-gradient(34% 60% at 80% 42%,rgb(214 212 204 / .07),transparent 70%),
      radial-gradient(30% 55% at 52% 62%,rgb(150 196 74 / .06),transparent 70%)}
  .case{display:flex;flex-direction:column;background:rgb(26 26 26 / .45);border-color:rgb(255 255 255 / .07);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:background-color var(--t-hover),border-color var(--t-hover)}
  .case:hover{background:rgb(46 46 46 / .58);border-color:rgb(255 255 255 / .15)}   /* clareia, como selecionado */
  /* uma linha lima só percorre a borda dos três cards e passa de um para o outro pelo meio (site.js p): ida pela
     metade de cima, volta pela de baixo (no celular, pelos lados), num laço sem fim. Exceção ao §8 e ao §1. A
     cabeça brilha; dois rastros mais longos e fracos fazem a cauda. Só corre com o bloco visível. */
  .cases__linha{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:visible;pointer-events:none}
  .cases__linha path{fill:none;stroke:var(--lime);stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:var(--d0);animation:cases-luz 11s linear infinite}
  .cases__linha .luz-1{--d0:14px;stroke-width:1.6;stroke-dasharray:14 986;filter:drop-shadow(0 0 3px rgb(203 244 28 / .9))}
  .cases__linha .luz-2{--d0:55px;stroke-width:1.5;stroke-dasharray:55 945;opacity:.45}
  .cases__linha .luz-3{--d0:130px;stroke-width:1.2;stroke-dasharray:130 870;opacity:.16}
  .js .cases__grid:not(.is-visivel) .cases__linha path{animation-play-state:paused}
  /* com unidade: sem ela o calc() do deslocamento é descartado e a luz fica parada */
  @keyframes cases-luz{from{stroke-dashoffset:var(--d0)}to{stroke-dashoffset:calc(var(--d0) - 1000px)}}
  @media (prefers-reduced-motion:reduce){.cases__linha path{animation-duration:18s !important}.case{transition-duration:.15s !important}}
  .case__num{margin-top:var(--s-2);font-size:clamp(2.25rem,1.75rem + 2vw,3.25rem);line-height:1;color:var(--lime)}
  .case .apoio{margin-top:var(--s-2);font-size:var(--fs-apoio)}
  .cases__nota{margin-top:var(--s-3)}
  @media (max-width:1023px){.cases__grid{grid-template-columns:1fr}}
  /* perguntas frequentes (2026-10-16, do site atual): lista que abre cada resposta (<details>, sem JS) */
  .faq{background:var(--bg-deep);padding:0 0 var(--s-section)}
  .faq__corpo{max-width:calc(800px + var(--gutter) * 2)}
  .faq__lista{margin-top:var(--s-4);border-top:var(--bw) solid var(--border)}
  .faq__item{border-bottom:var(--bw) solid var(--border)}
  .faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);min-height:64px;padding:var(--s-2) 0;
    font-size:var(--fs-corpo);font-weight:600;line-height:1.35;cursor:pointer;list-style:none;transition:color var(--t-hover)}
  .faq__item summary::-webkit-details-marker{display:none}
  .faq__item summary:hover{color:var(--lime-dim)}
  .faq__mais{position:relative;flex:0 0 auto;width:26px;height:26px;border:var(--bw) solid var(--border-ui);border-radius:7px}
  .faq__mais::before,.faq__mais::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;margin:-.75px 0 0 -5px;border-radius:1px;background:currentColor;transition:transform var(--t-hover)}
  .faq__mais::after{transform:rotate(90deg)}
  .faq__item[open] .faq__mais::after{transform:rotate(0)}
  .faq__item p{max-width:64ch;padding:0 var(--s-5) var(--s-3) 0;font-size:var(--fs-apoio);line-height:var(--lh-apoio);color:var(--text-muted)}
  .casos{background:var(--bg-deep);padding:var(--s-section) 0}
  .casos__grid{display:grid;grid-template-columns:7fr 5fr;gap:var(--grid-gap);margin-top:var(--s-4)}
  .casos__destaque{padding:var(--feature-pad);display:flex;flex-direction:column;align-items:flex-start}
  .casos__destaque .eyebrow + .display{margin-top:var(--s-stack-eyebrow)}
  .casos__destaque .display + .apoio{margin-top:var(--s-stack-apoio)}
  .casos__destaque .apoio + .btn{margin-top:var(--s-stack-cta)}
  .casos__lista{display:flex;flex-direction:column;gap:var(--s-2)}
  .casos__item{flex:1;background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--r-card);padding:var(--s-3);display:flex;flex-direction:column;gap:var(--s-1)}
  .casos__item h3{flex:1}
  .casos__item .link{min-height:0;color:var(--text-muted)}
  @media (max-width:1023px){.casos__grid{grid-template-columns:1fr}}

  /* fechamento */
  .fim{background:var(--bg-alt);padding:var(--s-section) 0}

  /* rodapé */
  .rodape{padding:var(--s-6) 0 var(--s-4)}
  .rodape__contato{display:grid;grid-template-columns:5fr 7fr;gap:var(--col-gap)}
  .rodape__titulo{font-size:var(--fs-h3)}
  /* contato (2026-10-16, pedido do dono): WhatsApp e e-mail lado a lado; o de e-mail abre o formulário */
  .contato__botoes{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-stack-cta)}
  .form{display:flex;flex-direction:column;gap:var(--s-2);animation:form-abre .35s var(--ease-out)}
  .js .form[data-fechado]{display:none}
  @keyframes form-abre{from{opacity:0;transform:translateY(8px)}}
  .contador{font-size:var(--fs-nota);color:var(--text-muted);margin-top:6px}
  .contador.is-ok{color:var(--text)}
  .form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
  .form__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
  .form .btn{align-self:flex-start;margin-top:var(--s-1)}
  .form__status{font-size:var(--fs-apoio);color:var(--text)}
  .form__status:empty{display:none}
  .form.is-sending .btn{opacity:.6;pointer-events:none}
  .rodape__grid{display:grid;grid-template-columns:4fr 3fr 3fr 3fr;gap:var(--grid-gap)}
  .rodape__marca img{height:28px;width:auto}
  .rodape__marca p{margin-top:var(--s-3);color:var(--text-muted);max-width:280px}
  .rodape__col{display:flex;flex-direction:column;gap:var(--s-1)}
  .rodape__col .eyebrow{margin-bottom:var(--s-1)}
  .rodape__col a,.rodape__col span,.rodape__col summary{font-size:var(--fs-apoio);line-height:var(--lh-apoio);color:var(--text-muted);min-height:36px;display:flex;align-items:center;transition:color var(--t-hover)}
  .rodape__col a:hover{color:var(--text)}
  .rodape__details summary{cursor:pointer;list-style:none}
  .rodape__details summary::-webkit-details-marker{display:none}
  .rodape__details[open] summary{color:var(--text)}
  .rodape__details .nota{padding:var(--s-1) 0 var(--s-2);max-width:360px}
  .rodape__fontes .eyebrow{margin-bottom:var(--s-2)}
  .notas{display:flex;flex-direction:column;gap:6px;max-width:var(--w-text);counter-reset:nota}
  .notas li{font-size:var(--fs-nota);line-height:var(--lh-apoio);color:var(--text-muted);counter-increment:nota;scroll-margin-top:var(--scroll-offset)}
  .notas li::before{content:counter(nota) " ";font-size:.85em;vertical-align:.3em;margin-right:4px}
  .rodape__legal{margin-top:var(--s-4);padding-top:var(--s-3);border-top:var(--bw) solid var(--border)}
  @media (max-width:1023px){.rodape__contato{grid-template-columns:1fr;gap:var(--s-3)}.rodape__grid{grid-template-columns:1fr 1fr}}
  @media (max-width:767px){.form__row{grid-template-columns:1fr;gap:var(--s-2)}}
}

@layer motion{
  .js .reveal{opacity:0;transform:translateY(var(--enter-offset));transition:opacity var(--t-enter) var(--ease-out),transform var(--t-enter) var(--ease-out)}
  .js .reveal.is-in{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .js .reveal{opacity:1;transform:none;transition:none}
    *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  }
}

/* ângulo da luz que contorna os depoimentos: registrado para poder ser animado */
@property --giro{syntax:'<angle>';inherits:false;initial-value:0deg}