/*
  CSS único do layout do site 2027. Toda página layout-*.html aponta pra cá.
  Tokens vêm de ../boldman.css. Medidas vêm do Figma "Site 2027", frame da home 156:301,
  desenhado em 1920px: o que é fluido escala por vw e trava no valor do Figma.
*/
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --lat:clamp(20px,12.5vw,240px);      /* margem lateral do conteúdo: 240 em 1920 */
  --topo-h:clamp(56px,3.54vw,68px);     /* altura do header: 68 em 1920. No Figma é 85, o Gabriel pediu menor */
  --topo-y:12px;                       /* distância do header ao topo da janela. No Figma é 20 */
  --btn-txt:#fff;                      /* rótulo sobre tangerina, como no Figma. O system pede preto */
  /* cursor do site: a bolinha tangerina do hero. Sobre o que é clicável ela cresce e ganha aro branco, pra não sumir em cima do botão tangerina */
  --cur:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Ccircle cx='7' cy='7' r='7' fill='%23FF4632'/%3E%3C/svg%3E") 7 7,auto;
  --cur-clique:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='13' cy='13' r='11' fill='%23FF4632' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 13 13,pointer;
}
html{cursor:var(--cur)}
a,button,summary,label{cursor:var(--cur-clique)}
body{font-family:var(--bm-fonte);font-size:var(--bm-t16);line-height:1.5;color:var(--bm-cinza);background:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.pular{position:absolute;left:-9999px}
.pular:focus{left:16px;top:16px;z-index:100;background:#fff;padding:8px 16px;border-radius:var(--bm-pill)}
.ic{display:inline-block;flex:none}
:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* seção */
.sec{position:relative;overflow:hidden;padding:clamp(80px,10vw,140px) var(--lat)}
.azul{background:var(--bm-azul);color:#fff}
.preta{background:#0D0D0D;color:#fff}
/* a segunda seção fica um tom acima do preto da faixa do hero, pra faixa não se fundir com ela (no Figma as duas são #0D0D0D) */
.preta.estrategia{background:#131313}
.dentro{position:relative;z-index:2}

/* cabeça de seção: título condensado à esquerda e frase de apoio à direita, alinhada pela base */
.tt{font-family:var(--bm-fonte-titulo);text-transform:uppercase;font-weight:600;line-height:1;font-size:clamp(36px,3.23vw,62px)}
.cabeca{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--bm-s4);margin-bottom:clamp(32px,2.86vw,55px)}
.cabeca p{max-width:700px;text-align:right;font-weight:500;line-height:25px}
.deco{position:absolute;z-index:0;pointer-events:none;user-select:none}

/* pílula vazada de rótulo */
.rot{display:inline-flex;align-items:center;height:30px;padding:0 13px;border:1px solid currentColor;border-radius:var(--bm-pill);font-size:var(--bm-t12);font-weight:700;letter-spacing:.03em;line-height:1;white-space:nowrap}

/* botão */
.b{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:55px;padding:0 25px;border-radius:var(--bm-pill);font-weight:700;font-size:var(--bm-t16);letter-spacing:.03em;border:1px solid transparent;cursor:var(--cur-clique);white-space:nowrap;transition:transform .2s,background .2s}
.b:hover{transform:translateY(-2px)}
.b1{background:var(--bm-tangerina);color:var(--btn-txt)}
.b1:hover{background:#FF6553}
.b-link{height:auto;padding:0;border-radius:0;text-decoration:underline;text-underline-offset:4px}

/* header em vidro */
.topo{position:fixed;top:var(--topo-y);left:50%;transform:translateX(-50%);width:calc(100% - 2 * clamp(20px,5vw,96px));   /* mesma margem lateral do rodapé em qualquer tela (Gabriel 22/10) */height:var(--topo-h);z-index:50;
  display:flex;align-items:center;padding:0 calc((var(--topo-h) - 49px)/2) 0 clamp(20px,2.3vw,44px);border-radius:var(--bm-pill);color:#fff;
  background:rgba(247,247,247,.2);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:background .2s}
.topo.solido{background:rgba(13,13,13,.72)}
.topo .marca img{width:clamp(110px,7.24vw,139px)}
.nav{display:flex;align-items:center;gap:25px;margin-left:auto;font-weight:600;font-size:14px}
.nav > a,.nav-sol{display:inline-flex;align-items:center;gap:5px}
.nav > a:not(.b):hover,.nav-sol:hover{opacity:.7}
.nav-sol{padding:0;border:0;background:none;color:inherit;font:inherit;cursor:var(--cur-clique)}
.nav .b{height:47px;padding:0 20px;font-size:14px;margin-left:10px}
/* busca do cabeçalho: a lupa abre o campo, que cresce pra esquerda por cima dos links. A lupa fica na frente, dentro do campo */
.nav-busca{position:relative;display:flex;align-items:center}
.nav-lupa{position:relative;z-index:1;display:grid;place-items:center;width:40px;height:40px;margin:0 -8px;padding:0;border:0;border-radius:50%;background:none;color:inherit;cursor:var(--cur-clique);transition:color .2s}
.nav-lupa:hover{opacity:.7}
.nav-lupa svg{width:18px;height:18px}
.nav-busca input{position:absolute;right:-6px;top:50%;width:0;height:44px;padding:0 40px 0 18px;transform:translateY(-50%);border:0;border-radius:var(--bm-pill);background:#fff;color:var(--bm-cinza);font:500 15px/1 var(--bm-fonte);opacity:0;visibility:hidden;
  transition:width .3s cubic-bezier(.16,1,.3,1),opacity .2s,visibility 0s .3s}
.nav-busca input::placeholder{color:var(--bm-n25)}
.nav-busca input::-webkit-search-cancel-button{display:none}
.nav-busca input:focus-visible{outline:2px solid var(--bm-azul);outline-offset:2px}
.nav-busca.aberta input{width:min(320px,40vw);opacity:1;visibility:visible;transition:width .35s cubic-bezier(.16,1,.3,1),opacity .15s}
.nav-busca.aberta .nav-lupa{color:var(--bm-cinza)}
/* botão do menu no celular: só ícone, um disco branco concêntrico com a ponta da pílula do header. A palavra "Menu" segue no HTML pra quem usa leitor de tela, e o tamanho de letra zero só tira ela da vista */
.abrir{display:none;position:relative;flex:none;width:44px;height:44px;margin:0 2.5px 0 auto;padding:0;border:0;border-radius:50%;background:#fff;color:#000;font-size:0;cursor:var(--cur-clique);transition:transform .2s}
.abrir::before,.abrir::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;margin:-1px 0 0 -8px;border-radius:2px;background:currentColor;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.abrir::before{transform:translateY(-3.5px)}
.abrir::after{transform:translateY(3.5px)}
.abrir[aria-expanded=true]::before{transform:rotate(45deg)}
.abrir[aria-expanded=true]::after{transform:rotate(-45deg)}
.abrir:active{transform:scale(.94)}

/* mega menu: painel branco das quatro frentes, abre em "Soluções". No Figma (Home/MEGAMENU 1) tem 1728x655 e fica 15px abaixo do header */
.mega{position:absolute;top:calc(100% + 16px);left:-1px;right:-1px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:auto auto;gap:0 24px;
  max-height:calc(100svh - var(--topo-y) - var(--topo-h) - 31px);overflow:auto;
  padding:clamp(32px,3.54vw,68px) clamp(24px,calc(17.33vw - 189px),144px) clamp(40px,5.36vw,103px);border:1px solid #E8E8E8;border-radius:var(--bm-r3);background:#fff;color:#000;
  font-weight:500;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility 0s .2s}
.topo.mega-aberto::after{content:"";position:absolute;left:0;right:0;top:100%;height:18px}   /* ponte invisível: o mouse cruza o vão sem o painel fechar. Fica no header porque o painel corta o que passa da borda dele */
.topo.mega-aberto .mega{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .3s cubic-bezier(.16,1,.3,1)}
.nav-sol .ic{transition:transform .2s}
.topo.mega-aberto .nav-sol .ic{transform:rotate(180deg)}
.mega-col{display:grid;grid-row:span 2;grid-template-rows:subgrid;align-items:start}   /* subgrid: os quatro cards ficam da mesma altura mesmo se um texto quebrar em mais linhas */
.mega-card{align-self:stretch;display:flex;flex-direction:column;align-items:flex-start;padding:15px 16px 0 17px;border-radius:var(--bm-r2);background:#F7F7F7}
.mega-ic{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:4px;background:#EDEDED;transition:background .15s,color .15s}
.mega-ic svg{width:16px;height:16px}
.mega-card .mega-ic{width:23px;height:23px;background:var(--bm-azul);color:#fff}
.mega-card .mega-ic svg{width:14px;height:14px}
.mega-tit{margin-top:20px;font:600 clamp(24px,1.67vw,32px)/1.1 var(--bm-fonte-titulo);text-transform:uppercase}
.mega-card p{min-height:2.8em;max-width:249px;margin:5px 0 15px;font-size:14px;line-height:1.4;color:#6E6E6E}
.mega-card img{width:100%;height:auto;aspect-ratio:309/132;margin-top:auto;border-radius:10px 10px 5px 5px;object-fit:cover;object-position:top}
/* tela de cada frente: ocupa o lugar e a proporção da imagem antiga. Tudo dentro mede em em, e o em sai da largura do quadro (10px quando ele tem 290), então a tela encolhe e cresce inteira com a coluna. Sem p nem h3 dentro, pra não herdar as regras do card */
.mega-tela{container-type:inline-size;width:100%;aspect-ratio:309/132;margin-top:auto;overflow:hidden;border:1px solid var(--bm-borda);border-bottom:0;border-radius:10px 10px 5px 5px;background:var(--bm-superficie)}
.mt{--mt-azul-fraco:color-mix(in srgb,var(--bm-azul) 24%,#fff);display:flex;flex-direction:column;height:100%;padding:1.5em 1.6em 0;font-size:calc(100cqw/29);line-height:1.3;color:var(--bm-txt)}
.mt-topo{display:flex;align-items:center;justify-content:space-between;gap:.8em}
.mt-rot,.mt-meta{font-size:1.1em;color:var(--bm-txt-apoio)}
.mt-tag{display:inline-flex;align-items:center;gap:.35em;padding:.2em .7em;border-radius:var(--bm-pill);background:var(--bm-ok-fraco);font-size:.95em;font-weight:600;white-space:nowrap;color:var(--bm-preto)}
.mt-val{margin:.45em 0 .2em;font-size:1.75em;font-weight:700;line-height:1.15;letter-spacing:-.01em}
.mt-fig{flex:1;min-height:0;margin-top:1.2em}
.mt-fig i{display:block}
.mt-web .mt-fig{display:grid;grid-template-columns:1.3fr 1fr;gap:1em}
.mt-bloco{border-radius:.5em .5em 0 0;background:var(--mt-azul-fraco)}
.mt-linhas{display:grid;align-content:start;gap:.45em}
.mt-linhas i{height:.5em;border-radius:var(--bm-pill);background:var(--bm-n95)}
.mt-linhas i:nth-child(2){width:70%}
.mt-linhas .mt-bt{width:5.4em;height:1.4em;background:var(--bm-azul)}
.mt-secure .mt-fig{position:relative;background:linear-gradient(90deg,var(--mt-azul-fraco) 68%,transparent 68%) 0 0/calc(100%/30) 100%}   /* trinta dias, uma barra por dia */
.mt-secure .mt-fig::after{content:"";position:absolute;top:0;bottom:0;left:calc(100%/30*21);width:calc(100%/30*.68);background:var(--bm-alerta)}   /* o dia em que o alerta chegou antes do problema */
.mt-custom .mt-fig{display:flex;align-items:flex-start}
.mt-no{padding:.45em 1em;border-radius:var(--bm-r1);background:var(--mt-azul-fraco);font-size:1.1em;font-weight:600}
.mt-no-az{background:var(--bm-azul);color:#fff}
.mt-fio{flex:1;height:.2em;margin-top:1.15em;background:linear-gradient(90deg,var(--bm-n65) 50%,transparent 50%) 0 0/.8em 100%}
.mt-insights .mt-fig{display:grid;grid-template-columns:repeat(3,1fr);align-items:end;gap:1.6em}
.mt-insights .mt-fig i{height:70%;border-radius:.5em .5em 0 0;background:var(--mt-azul-fraco)}
.mt-insights .mt-fig i:nth-child(2){height:48%}
.mt-insights .mt-fig i:nth-child(3){height:100%}
/* as mesmas peças em tamanho grande, nos cards Insights e Secure da seção 3 (.frente-tela). Lá a tela fica montada em repouso e se refaz quando o mouse entra no card */
.frente-tela{position:absolute;container-type:inline-size;overflow:hidden;border-radius:var(--bm-r2);background:var(--bm-superficie)}
.frente.insights .frente-tela{left:7.63%;top:49.9%;width:84.9%;aspect-ratio:1202/502;border:1px solid var(--bm-borda)}
.frente.secure .frente-tela{left:12.85%;top:33.9%;width:73.7%;aspect-ratio:1044/772;box-shadow:var(--bm-sombra)}
.frente-tela .mt{--t0:0ms;padding-bottom:1.5em}
.frente-tela .mt-receita{font-size:calc(100cqw/38)}
.frente-tela .mt-secure{font-size:calc(100cqw/32)}
.mt-receita .mt-fig{position:relative}
.mt-receita .mt-fig>svg{display:block;width:100%;height:100%;overflow:visible}
.mt-traco{fill:none;stroke:var(--bm-azul);stroke-width:3;stroke-linecap:round;stroke-dasharray:1}
.mt-chip{position:absolute;right:0;bottom:0}
.frente-tela .mt-secure .mt-fig{flex:none;height:3.6em}
.mt-lista{display:grid;margin-top:auto}
.mt-lista>span{display:flex;align-items:center;gap:.6em;padding:.6em 0;border-top:1px solid var(--bm-borda);font-size:1.1em}
.mt-lista em{margin-left:auto;font-style:normal;color:var(--bm-txt-apoio)}
.mt-lista .iconify{color:var(--bm-ok)}
.mt-lista .mt-aviso{color:var(--bm-alerta)}
/* movimento: toca cada vez que o painel abre, porque só existe sob .mega-aberto. A tela sobe, uma coluna depois da outra, e a figura de cada frente se monta em seguida. Fica em laço só o que diz "está vivo": o fio do Custom, o alerta do Secure e o sinal do Insights */
.mega-col:nth-child(2) .mt{--i:1}
.mega-col:nth-child(3) .mt{--i:2}
.mega-col:nth-child(4) .mt{--i:3}
.mt{--t0:calc(var(--i,0)*70ms + 320ms)}
.mt-bloco,.mt-insights .mt-fig i{transform-origin:bottom}
.mt-linhas i{transform-origin:left}
.topo.mega-aberto .mt{animation:mt-entra .7s cubic-bezier(.16,1,.3,1) calc(var(--i,0)*70ms + 60ms) both}
:is(.topo.mega-aberto,.frente:hover) :is(.mt-bloco,.mt-insights .mt-fig i){animation:mt-sobe .7s cubic-bezier(.16,1,.3,1) var(--t0) both}
:is(.topo.mega-aberto,.frente:hover) .mt-insights .mt-fig i:nth-child(2){animation-delay:calc(var(--t0) + 90ms)}
:is(.topo.mega-aberto,.frente:hover) .mt-insights .mt-fig i:nth-child(3){animation-delay:calc(var(--t0) + 180ms)}
:is(.topo.mega-aberto,.frente:hover) .mt-linhas i{animation:mt-estica .5s cubic-bezier(.16,1,.3,1) calc(var(--t0) + 120ms) both}
:is(.topo.mega-aberto,.frente:hover) .mt-linhas i:nth-child(2){animation-delay:calc(var(--t0) + 220ms)}
:is(.topo.mega-aberto,.frente:hover) .mt-linhas i:nth-child(3){animation-delay:calc(var(--t0) + 320ms)}
:is(.topo.mega-aberto,.frente:hover) .mt-secure .mt-fig{animation:mt-varre .9s cubic-bezier(.5,0,.2,1) var(--t0) both}
:is(.topo.mega-aberto,.frente:hover) .mt-secure .mt-fig::after{animation:mt-pisca 1.8s ease-in-out calc(var(--t0) + 1s) infinite}
:is(.topo.mega-aberto,.frente:hover) .mt-no{animation:mt-surge .45s cubic-bezier(.16,1,.3,1) var(--t0) both}
:is(.topo.mega-aberto,.frente:hover) .mt-no-az{animation:mt-surge .45s cubic-bezier(.16,1,.3,1) calc(var(--t0) + 150ms) both,mt-onda 1.6s ease-out calc(var(--t0) + .7s) infinite}
:is(.topo.mega-aberto,.frente:hover) .mt-no:last-child{animation-delay:calc(var(--t0) + 300ms)}
:is(.topo.mega-aberto,.frente:hover) .mt-fio{animation:mt-flui .7s linear infinite}
:is(.topo.mega-aberto,.frente:hover) :is(.mt-insights,.mt-receita) .mt-topo .iconify{animation:mt-pisca 1.8s ease-in-out infinite}
:is(.topo.mega-aberto,.frente:hover) .mt-traco{animation:mt-desenha 1.3s cubic-bezier(.5,0,.2,1) both}
:is(.topo.mega-aberto,.frente:hover) .mt-area{animation:mt-aparece .8s ease .6s both}
:is(.topo.mega-aberto,.frente:hover) .mt-chip{animation:mt-surge .45s cubic-bezier(.16,1,.3,1) 1.1s both}
:is(.topo.mega-aberto,.frente:hover) .mt-lista>span{animation:mt-aparece .5s ease .7s both}
:is(.topo.mega-aberto,.frente:hover) .mt-lista>span:nth-child(2){animation-delay:.85s}
:is(.topo.mega-aberto,.frente:hover) .mt-lista>span:nth-child(3){animation-delay:1s}
@keyframes mt-desenha{from{stroke-dashoffset:1}}
@keyframes mt-aparece{from{opacity:0}}
@keyframes mt-entra{from{opacity:0;transform:translateY(10%) scale(.96)}}
@keyframes mt-sobe{from{transform:scaleY(0)}}
@keyframes mt-estica{from{transform:scaleX(0)}}
@keyframes mt-varre{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes mt-surge{from{opacity:0;transform:scale(.8)}}
@keyframes mt-pisca{50%{opacity:.4}}
@keyframes mt-flui{to{background-position:.8em 0}}
@keyframes mt-onda{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--bm-azul) 45%,transparent)}70%,to{box-shadow:0 0 0 .6em transparent}}
@media(prefers-reduced-motion:reduce){.mega-tela *,.mega-tela *::after{animation:none!important}}
.mega ul{display:grid;gap:1px;margin:15px 0 0;padding:0;list-style:none}
.mega li a{display:flex;align-items:center;gap:12px;padding:9.5px 17px;border-radius:7px;font-size:clamp(14px,.9vw,16px);line-height:26px;transition:background .15s}
.mega li a:is(:hover,:focus-visible){background:#F7F7F7}
.mega li a:is(:hover,:focus-visible) .mega-ic{background:var(--bm-azul);color:#fff}

/* home 01 · hero */
/* o bloco de texto fica centralizado na altura que sobra entre a base do header e o fim da dobra */
.hero{min-height:max(100svh,640px);padding-top:calc(var(--topo-y) + var(--topo-h) + 32px);padding-bottom:32px}
.hero,.hero .faixa{display:flex;flex-direction:column;justify-content:center}
/* o desenho do fundo acompanha a altura do hero e fica preso à direita: assim aparece sempre o mesmo recorte do Figma, sem cortar o pé dos anéis em janela baixa */
.hero .fundo{top:0;right:0;height:100%;width:auto;max-width:none;aspect-ratio:16/9}
/* faixa do hero: uma cópia da dobra em preto, recortada numa tira vertical. Sem mouse na dobra ela não existe, com o mouse ela abre e segue o cursor,
   e a rolagem alarga ela até cobrir a dobra. Posição e largura vêm do layout.js */
.hero{--faixa-x:67.6%;--faixa-l:0px}
.hero.rolando .faixa{transition-duration:.15s;transition-timing-function:linear}
/* a seção logo abaixo da dobra sobe recortada na coluna da faixa. Fora da coluna aparece o azul do main, que continua o fundo da dobra */
main{background:var(--bm-azul)}
.hero + .sec{clip-path:inset(0 var(--corte-d,0px) 0 var(--corte-e,0px));transition:clip-path .15s linear}
/* dentro da faixa o botão principal troca a tangerina pelo azul da marca */
.hero .faixa .b1{background:var(--bm-azul)}
.hero .faixa{position:absolute;inset:0;z-index:3;padding:inherit;background:#0D0D0D;color:#fff;pointer-events:none;
  clip-path:inset(0 calc(100% - var(--faixa-x) - var(--faixa-l)/2) 0 calc(var(--faixa-x) - var(--faixa-l)/2));transition:clip-path .5s cubic-bezier(.22,1,.36,1)}
.hero .titulo{position:relative;--corpo:clamp(56px,6.25vw,120px);font-size:var(--corpo)}
.h1{font-family:var(--bm-fonte-titulo);text-transform:uppercase;font-weight:500;font-size:1em;line-height:.9}
.h1 span{display:block}
.h1 b{display:block;font-weight:700}
/* a pílula senta ao lado de "para", na segunda linha: a posição acompanha o corpo do título */
.hero .rot{position:absolute;left:calc(var(--corpo)*2.76);top:calc(var(--corpo)*2.15)}   /* fica logo depois de "do seu", a terceira linha do título */
.hero .lead{margin:25px 0 29px 7px;max-width:497px;font-weight:500;line-height:25px}
.acoes{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-left:7px}

/* home 02 · a estratégia é sua: três etapas apagadas, e a que recebe o mouse acende */
.estrategia{padding-top:clamp(96px,13.3vw,255px);padding-bottom:clamp(72px,8.1vw,156px)}
.estrategia .tt{max-width:7.5em}
.etapas{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.etapa{color:rgba(255,255,255,.2);transition:color .2s}
.etapa .quadro{aspect-ratio:464/261;border-radius:var(--bm-r2);background:#222;transition:background .2s}
.etapa-topo{display:flex;justify-content:space-between;align-items:baseline;gap:var(--bm-s3);margin-top:18px}
.etapa h3{font-family:var(--bm-fonte-titulo);text-transform:uppercase;font-weight:600;font-size:var(--bm-t32);line-height:35px}
.etapa-topo span{font-size:var(--bm-t20);font-weight:500}
.etapa p{margin-top:15px;max-width:264px;font-weight:500;line-height:25px}
.etapa:last-child p{max-width:296px}
.etapa:hover{color:#fff}
.etapa:hover .quadro{background:#2A2A2A}
/* telas dos três passos: cada quadro é uma telinha desenhada em HTML. Parada ela fica cinza e apagada.
   No hover do card ela ganha cor, assenta no lugar e a cena de dentro anda. As medidas são em "em" e a letra acompanha a largura do quadro (cqw) */
.etapa .quadro{position:relative;overflow:hidden;container-type:inline-size}
.mini{position:absolute;inset:0;display:flex;flex-direction:column;padding:1.5em 1.7em;font-size:12px;font-size:2.6cqw;line-height:1.2;font-weight:600;color:#fff;
  filter:grayscale(1);opacity:.32;transform:translateY(6%) scale(.96);transition:filter .3s,opacity .3s,transform .7s cubic-bezier(.16,1,.3,1)}
.etapa:hover .mini{filter:none;opacity:1;transform:none}
.mini-barra{display:flex;align-items:center;gap:.4em;color:rgba(255,255,255,.5);font-size:.92em}
.mini-barra i{width:.6em;height:.6em;border-radius:50%;background:rgba(255,255,255,.22)}
.mini-barra span{margin-left:.6em}
.m-decide dl{display:grid;gap:1em;margin:auto 0}
.m-decide dl div{display:grid;grid-template-columns:6.2em 1fr;align-items:center}
.m-decide dt{color:rgba(255,255,255,.5)}
.m-decide dd{display:flex;gap:.5em;margin:0}
.m-decide dd b{padding:.55em .95em;border:1px solid rgba(255,255,255,.2);border-radius:99px;font-weight:600;white-space:nowrap;transition:background .25s,border-color .25s}
.etapa:hover .m-decide .sim{background:var(--bm-azul);border-color:var(--bm-azul);transition-delay:var(--d)}
.m-cursor{position:absolute;left:70%;top:92%;width:1.2em;height:1.2em;margin:-.2em 0 0 -.2em;border-radius:50%;background:var(--bm-tangerina);opacity:0}
.etapa:hover .m-cursor{animation:escolhe 2s cubic-bezier(.5,0,.2,1) both}
@keyframes escolhe{0%{left:70%;top:92%;opacity:0}10%{opacity:1}22%,30%{left:44.3%;top:37.7%}47%,55%{left:53.7%;top:53.7%}72%,82%{left:34.6%;top:69.7%;opacity:1}100%{left:34.6%;top:69.7%;opacity:0}}
.m-conecta{padding:0;width:100%;height:100%}
.m-conecta .fios path{fill:none;stroke:rgba(255,255,255,.35);stroke-width:1.5;stroke-dasharray:5 7;transition:stroke .3s}
.m-conecta .no rect{fill:#1A1A1A;stroke:rgba(255,255,255,.25);transition:stroke .3s}
.m-conecta text{fill:#fff;font:600 12px var(--bm-fonte);text-anchor:middle}
.m-conecta .centro{fill:var(--bm-azul)}
.m-conecta .miolo{fill:none;stroke:#fff;stroke-width:4}
.m-conecta .onda{fill:none;stroke:var(--bm-azul);stroke-width:2;opacity:0;transform-origin:232px 130px}
.etapa:hover .m-conecta .fios path{stroke:#fff;animation:flui .7s linear infinite}
.etapa:hover .m-conecta .no rect{stroke:#fff}
.etapa:hover .m-conecta .onda{animation:onda 1.6s ease-out infinite}
@keyframes flui{to{stroke-dashoffset:-12}}
@keyframes onda{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
.m-mantem ul{display:grid;gap:.5em;margin:auto 0 0;padding:0;list-style:none}
.m-mantem li{display:flex;align-items:center;gap:.7em;padding:.7em .9em;border-radius:.6em;background:rgba(255,255,255,.06)}
.m-mantem li i{width:.6em;height:.6em;border-radius:50%;background:var(--bm-azul)}
.m-mantem em{display:grid;margin-left:auto;font-style:normal;text-align:right;color:rgba(255,255,255,.5)}
.m-mantem em span{grid-area:1/1}
.m-mantem em span+span{opacity:0}
.etapa:hover .falha{animation:falha-fundo 4.5s infinite}
.etapa:hover .falha i{animation:falha-ponto 4.5s infinite}
.etapa:hover .falha span:nth-child(1){animation:vez-1 4.5s infinite}
.etapa:hover .falha span:nth-child(2){animation:vez-2 4.5s infinite;color:var(--bm-tangerina)}
.etapa:hover .falha span:nth-child(3){animation:vez-3 4.5s infinite;color:#fff}
@keyframes falha-fundo{0%,16%,60%,100%{background:rgba(255,255,255,.06);transform:none}20%,54%{background:rgba(255,70,50,.18)}22%{transform:translateX(-.25em)}26%{transform:translateX(.25em)}30%{transform:none}}
@keyframes falha-ponto{0%,16%,60%,100%{background:var(--bm-azul)}20%,54%{background:var(--bm-tangerina)}}
@keyframes vez-1{0%,16%{opacity:1}20%,100%{opacity:0}}
@keyframes vez-2{0%,16%,60%,100%{opacity:0}20%,54%{opacity:1}}
@keyframes vez-3{0%,56%{opacity:0}60%,100%{opacity:1}}
.m-pulso{width:100%;height:2.4em;margin-top:.9em}
.m-pulso path{fill:none;stroke:rgba(255,255,255,.18);stroke-width:1.5;vector-effect:non-scaling-stroke}
.m-pulso .corre{stroke:var(--bm-azul);stroke-width:2;stroke-dasharray:22 78;stroke-dashoffset:22}
.etapa:hover .m-pulso .corre{animation:pulso 2.2s linear infinite}
@keyframes pulso{to{stroke-dashoffset:-78}}
@media(hover:none){.mini{filter:none;opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.mini,.mini *{animation:none!important}}

/* home 02 · palco da lupa (pedido do Douglas): a frente é preta e mostra o que se enxerga, o fundo é azul e mostra o que liga tudo.
   O fundo é recortado num círculo (--lx e --ly vêm do layout.js). As medidas da lupa acompanham a largura do palco (cqw) */
.lente{position:relative;overflow:hidden;container-type:inline-size;margin-bottom:clamp(28px,2.6vw,50px);border:1px solid rgba(255,255,255,.08);border-radius:var(--bm-r2);background:#1A1A1A;--lx:72%;--ly:46%}
.lente svg{display:block;width:100%;height:auto}
.lente text{font-family:var(--bm-fonte);fill:#fff}
.lente .l-pq{font-size:12px;font-weight:600;opacity:.5}
.lente .l-forte{font-size:17px;font-weight:700}
.lente .l-bt{font-size:11px;font-weight:700;text-anchor:middle}
.lente .l-aa{font:600 52px var(--bm-fonte-titulo)}
.lente .l-rotulo{font-size:15px;font-weight:600;opacity:.6}
.lente .l-dica{font-size:15px;font-weight:500;opacity:.38}
.lente-frente .l-cartao{fill:#242424}
.lente-frente .l-bloco{fill:#343434}
.lente-frente .l-linha{fill:#fff}
.lente-frente .l-fraca{opacity:.35}
.lente-frente .l-aro{fill:none;stroke:#fff;stroke-width:1.5;opacity:.6}
.lente-frente .l-anel{fill:none;stroke:#fff;stroke-width:14}
.lente .l-azul{fill:var(--bm-azul)}
.lente .l-tang{fill:var(--bm-tangerina)}
.lente-fundo{position:absolute;inset:0;background:var(--bm-azul);clip-path:circle(10.5cqw at var(--lx) var(--ly))}
.lente-fundo .l-peca :is(rect,circle){fill:none;stroke:#fff;stroke-width:1.2;stroke-dasharray:4 4;opacity:.75}
.lente-fundo .l-peca .l-cartao{fill:rgba(255,255,255,.07);stroke-dasharray:none;opacity:1}
.lente-fundo .l-rotulo{opacity:1}
.lente-fundo .l-fios path{fill:none;stroke:#fff;stroke-width:1.5;stroke-dasharray:5 7;animation:flui .7s linear infinite}
.lente-fundo .l-ponto{fill:var(--bm-tangerina)}
.lente-fundo .l-no rect{fill:var(--bm-azul);stroke:#fff;stroke-width:1.2}
.lente-fundo .l-no text{font-size:13px;font-weight:600;text-anchor:middle}
.lente-fundo .l-centro rect{fill:#fff}
.lente-fundo .l-centro text{font-size:15px;font-weight:700;text-anchor:middle;fill:var(--bm-azul)}
.lupa{position:absolute;left:var(--lx);top:var(--ly);width:21cqw;height:21cqw;border:2px solid #fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px rgba(0,0,0,.25),0 12px 40px rgba(0,0,0,.45);pointer-events:none}
.etapas.legenda .etapa{color:#fff}
.etapas.legenda .etapa-topo{margin-top:0}
/* seção 2, janela da campanha: uma tela de produto no lugar da lupa. Três partes (briefing, código, registro) e três passos na lista ao lado. O passo ativo deixa a sua parte acesa e as outras a 40% */
.jn-palco{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);align-items:center;gap:clamp(32px,4.2vw,80px);margin-right:calc(var(--lat) * -1)}   /* a janela vai até a borda direita da tela, sem margem */
.jn-passos{list-style:none;display:grid;gap:clamp(22px,2vw,38px)}
.jn-passo{color:var(--bm-n45);cursor:var(--cur-clique);transition:color .2s}
.jn-passo.ativo,.jn-passo:hover{color:#fff}
.jn-passo h3{display:flex;align-items:baseline;gap:14px;font:600 var(--bm-t32)/35px var(--bm-fonte-titulo);text-transform:uppercase}
.jn-passo h3 span{flex:none;width:2.2em;font:500 var(--bm-t16)/1 var(--bm-fonte)}
.jn-passo button{padding:0;border:0;background:none;color:inherit;font:inherit;text-transform:inherit;text-align:left}
.jn-passo p{margin:10px 0 0 calc(2.2em + 14px);max-width:264px;font-weight:500;line-height:25px}
.janela{--jn-linha:rgba(255,255,255,.08);overflow:hidden;border:1px solid var(--jn-linha);border-right:0;border-radius:var(--bm-r2) 0 0 var(--bm-r2);background:#1A1A1A;font-size:14px;line-height:22px}
.jn-barra{display:flex;align-items:center;gap:16px;height:40px;padding:0 16px;border-bottom:1px solid var(--jn-linha);color:var(--bm-n45);font-size:12px}
.jn-pontos{display:flex;gap:6px}
.jn-pontos i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14)}
.jn-corpo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.jn-brief,.jn-codigo,.jn-registro{padding:clamp(18px,1.7vw,30px);transition:opacity .35s}
.jn-codigo{border-left:1px solid var(--jn-linha)}
.jn-registro{grid-column:1/-1;border-top:1px solid var(--jn-linha)}
.janela[data-passo="1"] :is(.jn-codigo,.jn-registro),.janela[data-passo="2"] :is(.jn-brief,.jn-registro),.janela[data-passo="3"] :is(.jn-brief,.jn-codigo){opacity:.4}
.jn-tit{margin-bottom:14px;font-size:18px;font-weight:600}
.jn-arq{margin-bottom:14px;color:var(--bm-n45);font-size:12px;line-height:27px}
.jn-campo{display:grid;grid-template-columns:84px minmax(0,1fr);align-items:center;gap:12px;margin-top:8px;color:var(--bm-n45);font-size:13px}
.jn-campo b{overflow:hidden;padding:7px 12px;border:1px solid rgba(255,255,255,.12);border-radius:var(--bm-r1);background:#131313;color:#fff;font-size:14px;font-weight:500;white-space:nowrap;text-overflow:ellipsis;transition:border-color .15s,box-shadow .15s}
.janela[data-passo="1"] .jn-campo[data-c=nome] b,.jn-campo.jn-liga b{border-color:var(--bm-azul);box-shadow:0 0 0 1px var(--bm-azul)}
.jn-pre,.jn-registro{font:12.5px/22px ui-monospace,'SF Mono',Menlo,monospace}
.jn-pre{counter-reset:jn;overflow-x:auto}
.jn-l{counter-increment:jn;border-radius:3px;color:var(--bm-n65);white-space:pre;transition:background .15s}
.jn-l::before{content:counter(jn);display:inline-block;width:2ch;margin-right:2ch;color:var(--bm-n25);text-align:right}
.jn-l b{color:#fff;font-weight:400}
.jn-l i{color:var(--bm-n45);font-style:normal}
.jn-l.jn-liga{background:rgba(27,65,209,.32)}
.jn-reg{display:grid;grid-template-columns:5ch minmax(0,1fr) auto;gap:2ch;color:var(--bm-n65)}
.jn-reg span:first-child,.jn-reg em{color:var(--bm-n45);font-style:normal}
.jn-reg.falha em{color:var(--bm-tangerina)}
.jn-reg.feito em{color:#fff}
/* movimento: só existe sob o passo ativo, então toca de novo a cada troca. No passo 1 o nome é digitado no campo e na linha de código ao mesmo tempo, pela mesma animação */
.jn-dig{display:inline-block;vertical-align:bottom}
.janela[data-passo="1"] .jn-dig{animation:jn-digita 1.6s steps(21) .3s both}
.janela[data-passo="2"] .jn-fio{animation:jn-acende 1.8s calc(var(--i) * .22s) both}
.janela[data-passo="3"] .jn-reg{animation:jn-entra .3s calc(var(--i) * .3s) both}
@keyframes jn-digita{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes jn-acende{from{background:rgba(27,65,209,.5)}to{background:transparent}}
@keyframes jn-entra{from{opacity:0;transform:translateY(4px)}}
@media(prefers-reduced-motion:reduce){.lente-fundo .l-fios path{animation:none}}

/* home 03 · por onde dá para entrar: as quatro frentes em grade de dois por dois. As posições das imagens são frações do card no Figma */
.frentes{background:#fff;color:#000;padding-top:clamp(96px,13.5vw,260px);padding-bottom:clamp(96px,13.5vw,260px)}
.frentes .tt{max-width:9.6em}
.frentes .cabeca p{max-width:495px}
.grade-frentes{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.frente{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:clamp(24px,2.14vw,41px) clamp(24px,2.7vw,52px) clamp(24px,2.7vw,52px);border-radius:var(--bm-r2);background:#F7F7F7;color:#000}   /* cor própria: quando a seção vira azul o texto dela fica branco, e sem isto a frase do card claro sumia */
.frente.alta{aspect-ratio:708/791}
.frente.baixa{aspect-ratio:708/332;justify-content:flex-end}
.frente h3,.frente p{position:relative;z-index:1;font-family:var(--bm-fonte-titulo);text-transform:uppercase;font-weight:600}
/* link que cobre o card inteiro, para o card todo ser clicável */
.frente-link{position:absolute;inset:0;z-index:3;border-radius:inherit;cursor:var(--cur-clique,pointer)}
.frente-link:focus-visible{outline:3px solid var(--bm-azul);outline-offset:-3px}
.frente h3{font-size:clamp(28px,2.08vw,40px);line-height:1.1;color:rgba(0,0,0,.2)}
.frente p{margin-top:clamp(12px,1.3vw,25px);max-width:441px;font-size:clamp(22px,1.67vw,32px);line-height:1.1}
.frente img{position:absolute;max-width:none;border-radius:var(--bm-r2)}
.frente.insights img{left:7.63%;top:49.9%;width:84.9%}
.frente.secure{background:var(--bm-azul);color:#fff}
.frente.secure h3,.frente.custom h3{color:rgba(255,255,255,.5)}
.frente.secure .foto{left:6.78%;top:50.6%;width:86.4%}
.frente.secure .painel{left:12.85%;top:33.9%;width:73.7%;box-shadow:var(--bm-sombra)}
.frente.custom{background:#0D0D0D;color:#fff;border-radius:var(--bm-r2) 250px 250px var(--bm-r2)}
.frente.custom p{max-width:320px}
/* os arcos do Custom são meia-lua no Figma. Aqui a metade de baixo é o espelho da de cima, pra fechar o anel e ele poder girar. Gira só com o mouse no card, e para onde estiver quando o mouse sai */
.frente.custom .aneis{position:absolute;left:24.58%;top:7.23%;width:87%;aspect-ratio:1}
.frente.custom .aneis svg{display:block;width:100%;height:100%}
.frente.custom .aneis .m{animation:corre calc(var(--t,5s)/2) ease-in-out infinite alternate paused}   /* metade do tempo: o Gabriel pediu mais rápido */
.frente.custom:hover .aneis .m{animation-play-state:running}
@keyframes gira{to{transform:rotate(360deg)}}
/* rastro do Web: o card nasce sem símbolo, e ele só aparece onde o mouse passa. Quem cria, move e remove cada cópia é o layout.js */
.frente.web .eco{position:absolute;z-index:0;width:14.1%;aspect-ratio:1;translate:-50% -50%;pointer-events:none}
.frente.web .eco img{position:static;width:100%;border-radius:0}
/* a cabeça do rastro fica inteira enquanto o mouse está no card, e encolhe quando ele sai */
.frente.web .cabeca img{transform:scale(0);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.frente.web.com-mouse .cabeca img{transform:scale(1)}

/* cortina: passagem A do movimento-transicao-secoes.html. A .cena envolve a seção que entra e começa uma tela acima, por cima do fim da seção anterior.
   A seção fica travada no topo durante uma tela de rolagem (o ::after é esse percurso), e nesse tempo o recorte abre de baixo pra cima.
   A classe viva e as duas variáveis vêm do layout.js. Sem ela a .cena não faz nada e a seção entra rolando normal */
.cena.viva{margin-top:-100vh;pointer-events:none}
.cena.viva::after{content:"";display:block;height:100vh}
.cena.viva>.sec{position:sticky;top:0;pointer-events:auto;clip-path:inset(var(--corte,100vh) 0 0 0)}
.cena.viva>.sec>*{transform:translateY(var(--sobe,0px))}
/* virada: passagem C do mesmo protótipo. O texto não se move e não tem cópia: quando a seção que entra cruza o meio da tela,
   o fundo dela e o da seção anterior trocam de cor juntos, em 160ms. As classes viva e virou vêm do layout.js */
.vira>.sec,.sec:has(+ .vira){transition:background-color .16s linear,color .16s linear}
.vira.viva:not(.virou)>.fluxo{background:#fff}
.frentes.virou{background:var(--bm-azul);color:#fff}

/* home 04 · estratégia, tecnologia e resultado: a foto ocupa a coluna da esquerda nas duas linhas, e os três cards contam o ciclo */
.fluxo{padding-top:clamp(96px,10.94vw,210px);padding-bottom:clamp(140px,14.1vw,271px)}
.fluxo .tt{max-width:9.5em}
.fluxo .cabeca p{max-width:693px}
.grade-fluxo{display:grid;grid-template-columns:repeat(3,1fr);gap:25px 24px}
/* a moldura de celular fica por cima da foto e passa da borda de baixo dela, como no Figma */
.fluxo-foto{position:relative;grid-row:span 2;aspect-ratio:464/529;width:100%;min-height:100%}
.fluxo-foto .foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:var(--bm-r2)}
.fluxo-foto .celular{position:absolute;left:9.91%;top:5.67%;width:80.4%;max-width:none}
.fluxo-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(24px,1.9vw,36px) clamp(24px,1.93vw,37px);border-radius:var(--bm-r2);background:#fff;color:#000}
.fluxo-card .rot{flex:none;color:var(--bm-azul)}
.fluxo-card h3{margin-top:auto;padding-top:24px;font-family:var(--bm-fonte-titulo);font-weight:600;text-transform:uppercase;font-size:clamp(24px,1.67vw,32px);line-height:1.1}
.fluxo-card p{margin-top:10px;max-width:301px;font-size:14px;font-weight:500;line-height:20px}
.fluxo-card.volta{grid-column:span 2;background:#1032B4;color:#fff}
.fluxo-card.volta .rot{color:#fff}
.fluxo-card.volta h3{max-width:44%}
.fluxo-card.volta p{max-width:min(301px,44%)}
/* as três barras do card de resultado: degradê do azul da marca pro azul escuro, com a do meio invertida */
.barras{position:absolute;right:5.04%;top:18.65%;width:46.2%;height:63.1%;display:flex;flex-direction:column;justify-content:space-between}
/* o degradê tem o dobro da largura da barra (claro, escuro, claro) e desliza de uma ponta à outra, ida e volta. A do meio anda no sentido contrário.
   O degradê mora num ::before com o dobro da largura que anda por transform, que a placa de vídeo move sem redesenhar a tela */
.barras i{height:25.8%;position:relative;overflow:hidden}
.barras i::before{content:"";position:absolute;inset:0 auto 0 0;width:200%;background:linear-gradient(90deg,#1B41D1,#092692 42.5%,#092692 57.5%,#1B41D1);animation:vaivem 4s ease-in-out infinite alternate}
.barras i:nth-child(2)::before{animation-direction:alternate-reverse}
@keyframes vaivem{to{transform:translateX(-50%)}}

/* home 05 · o caminho do lead: três abas no topo e um quadro de seis etapas, cada etapa com as peças empilhadas */
.caminho{overflow:clip;background:#fff;color:#000;padding-top:clamp(96px,11.3vw,217px);padding-bottom:clamp(96px,13.5vw,260px)}
.caminho .tt{max-width:11.1em}
.caminho .cabeca{margin-bottom:var(--respiro)}
.caminho .cabeca p{max-width:619px}
/* o palco guarda as abas e as três telas empilhadas no mesmo lugar. Quando o layout.js marca o trilho como preso, o palco trava na tela
   e a rolagem só troca a tela ativa. Preso, o respiro entre os blocos encolhe com a altura da janela pra tudo caber */
.palco{--respiro:clamp(40px,3.9vw,75px);background:#fff}
.palco-trilho.preso .palco{position:sticky;--respiro:clamp(24px,4vh,75px)}
.palco-miolo{transform-origin:0 0}
.telas{display:grid}
.tela{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;transform:scale(.97);transform-origin:50% 0;transition:opacity .3s,visibility .3s,transform .5s cubic-bezier(.16,1,.3,1)}
.tela.ativa{opacity:1;visibility:visible;transform:none}
.abas{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:var(--respiro)}
.aba{padding:0 0 12px;border:0;border-bottom:2px solid currentColor;background:none;color:#E4E4E4;font:600 clamp(20px,1.46vw,28px)/1.1 var(--bm-fonte-titulo);text-transform:uppercase;text-align:left;transition:color .2s}
.aba:hover{color:var(--bm-n65)}
.aba[aria-pressed=true]{color:var(--bm-azul)}
.trilha{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;align-items:start}
.fase{display:grid;gap:17px;min-width:0}
.fase-fila{display:none}   /* fila de etapas do celular, montada pelo layout.js. Só aparece até 560px */
.fase h3{margin-bottom:-2px;font-family:var(--bm-fonte-titulo);font-weight:600;font-size:clamp(22px,1.46vw,28px);line-height:1.1;text-transform:uppercase;color:#626262}
.peca{min-height:191px;display:flex;flex-direction:column;padding:17px 15px 19px;border:1px solid #E8E8E8;border-radius:var(--bm-r2);background:#F7F7F7}
/* movimento leve do quadro: a peça cresce um pouco no mouse, os números correm quando o quadro aparece (layout.js) e a bolinha de aviso pulsa */
.peca{position:relative;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s}
.peca:hover{z-index:1;transform:scale(1.03);border-color:#DCDCDC;box-shadow:0 10px 24px rgba(0,0,0,.07)}
.peca dd{font-variant-numeric:tabular-nums}
/* o pulso é um anel atrás da bolinha que cresce e some por transform e opacity, sem redesenhar a sombra a cada quadro */
.estado.aviso{isolation:isolate}
.estado.aviso i{position:relative}
.estado.aviso i::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:var(--cor);opacity:0;animation:pulsa 2.4s ease-out infinite}
@keyframes pulsa{from{opacity:.45}70%,to{transform:scale(1.8);opacity:0}}
/* peça que ainda não foi ligada: tudo esmaece, menos o selo de estado */
.peca.espera{background:#FBFBFB;border-color:#F1F1F1}
.trilha .peca.espera :is(h4,dl){opacity:.4}
.peca h4{margin-bottom:15px;font-size:16px;font-weight:700;line-height:24px}
.peca dl div{display:flex;justify-content:space-between;gap:8px;margin-bottom:6px;font-size:14px;line-height:22px}
.peca dt{display:flex;align-items:center;gap:6px;font-weight:500;color:#969696}
.peca dd{font-weight:800;color:var(--bm-azul);white-space:nowrap}
.peca .info,.peca .dica{color:var(--bm-azul)}
.peca h4 :is(.info,.dica){margin-left:6px;vertical-align:-2px}
.peca h4 .dica{display:inline-grid}
/* na peça esmaecida o balão herdaria os 40%: enquanto a dica está aberta, a linha volta à cor cheia pra dar leitura */
.trilha .peca.espera dl:has(.dica:is(:hover,:focus-visible)){opacity:1}
/* o estado da peça: bolinha na cor do estado e fundo na mesma cor a 20% */
.estado{--cor:#00DB79;margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:5px;height:23px;padding:0 10px 0 5px;border-radius:55px;background:color-mix(in srgb,var(--cor) 20%,transparent);font-size:12px;font-weight:500;line-height:1;white-space:nowrap}
.estado i{display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--cor)}
.estado.aviso{--cor:#FF3A0E}
.estado.setup{--cor:#F4C900}
.mais{display:flex;align-items:center;justify-content:space-between;height:51px;padding:0 15px;border:1px solid #E8E8E8;border-radius:var(--bm-r2);font-size:14px;font-weight:700;color:#626262}
.mais .iconify{color:#C5C5C5}
/* a dica abre ao lado do ícone, no mouse e no teclado */
.dica{position:relative;display:grid;place-items:center;border:0;background:none}
.dica [role=tooltip]{position:absolute;z-index:2;left:calc(100% + 10px);top:50%;translate:0 -50%;width:190px;padding:10px 12px 10px 24px;clip-path:polygon(12px 0,100% 0,100% 100%,12px 100%,12px calc(50% + 7px),0 50%,12px calc(50% - 7px));border-radius:0 6px 6px 0;background:#000E45;color:#fff;font-size:10px;font-weight:600;line-height:14px;text-align:left;opacity:0;visibility:hidden;transition:opacity .15s,visibility .15s}
.dica:hover [role=tooltip],.dica:focus-visible [role=tooltip]{opacity:1;visibility:visible}
/* telas "os números por trás" e "os avisos": fichas em três colunas, cada uma com a origem do dado na pílula */
.fichas{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.ficha{min-width:0;padding:17px 15px 21px;border:1px solid #E8E8E8;border-radius:var(--bm-r2);background:#fff;font-size:14px;line-height:22px;color:#969696}
.ficha .rot{color:var(--bm-azul)}
.ficha h3{margin:8px 0 20px;font-size:16px;font-weight:700;line-height:24px;color:#000}
.ficha table{width:100%;border-collapse:collapse;table-layout:fixed;margin-bottom:20px}
.ficha th,.ficha td{padding:8px 0 7px;border-bottom:1px solid #E8E8E8;text-align:left;font-weight:800}
.ficha th{padding-top:0}
.ficha td:first-child{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ficha .fora{color:#FF3A0E}
/* medidas: rótulo à esquerda e barra à direita. O número mora dentro da parte cheia da barra */
.medidas{display:grid;gap:7px;margin-bottom:25px;font-size:16px;line-height:24px}
.medidas div{display:grid;grid-template-columns:132px 1fr;align-items:center}
.medidas dt{font-weight:700;color:var(--bm-azul)}
.medidas .fora dt{color:#FF3A0E}
.medidas.leve dt,.medidas.leve .fora dt{font-weight:500;color:#969696}
.barra{display:block;border-radius:55px;background:#E4E4E4}
.barra b{display:block;height:19px;padding-left:8px;border-radius:55px;background:var(--bm-azul);color:#fff;font-size:12px;font-weight:700;line-height:19px;white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums;transition:width 1.2s cubic-bezier(.16,1,.3,1) .15s}
/* movimento leve das fichas: cada vez que a tela entra, as barras correm do zero até o valor e as linhas da tabela sobem em sequência. No mouse a ficha cresce um pouco */
.tela:not(.ativa) .barra b{width:0!important;transition:none}
.tela.ativa .ficha tbody tr{animation:sobe .5s cubic-bezier(.16,1,.3,1) both}
.ficha tbody tr:nth-child(2){animation-delay:.06s}
.ficha tbody tr:nth-child(3){animation-delay:.12s}
.ficha tbody tr:nth-child(4){animation-delay:.18s}
.ficha tbody tr:nth-child(5){animation-delay:.24s}
@keyframes sobe{from{opacity:0;transform:translateY(8px)}}
.ficha{position:relative;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s}
.ficha:hover{z-index:1;transform:scale(1.02);border-color:#DCDCDC;box-shadow:0 10px 24px rgba(0,0,0,.07)}
.ficha td{font-variant-numeric:tabular-nums}
.fora .barra b{background:#FF3A0E}
.nota{padding:6px 4px 6px 8px;border:1px solid #E8E8E8;border-radius:5px;background:#F7F7F7;font-size:12px;font-weight:500;line-height:19px;color:#5B5B5B}
.ficha.alerta{display:grid;grid-template-columns:1fr auto;align-items:center;padding-bottom:22px;background:#F7F7F7;font-size:16px;line-height:25px}
.ficha.alerta .rot{justify-self:start}
.ficha.alerta time{font-size:14px;font-weight:800}
.ficha.alerta :is(h3,p,.ver){grid-column:1/-1}
.ficha.alerta h3{margin:10px 0;font-size:18px;line-height:27px}
.ficha.alerta p{max-width:402px;font-weight:500}
.ver{justify-self:start;margin-top:20px;padding:0;border:0;background:none;font:700 14px/17px var(--bm-fonte);color:var(--bm-azul)}
button.ver:hover{text-decoration:underline}

/* home 06 · três passos: os textos ficam nas colunas do Figma e o desenho das setas é preso ao pé deles, então a linha das setas nunca cruza o texto */
.passos{background:#F7F7F7;color:#000;padding-top:clamp(96px,12.2vw,234px);padding-bottom:clamp(120px,13.5vw,260px)}
.passos .tt{max-width:9.5em;margin-bottom:clamp(48px,5.68vw,109px)}
.passos-lista{position:relative;list-style:none;display:grid;grid-template-columns:25.42% 57% 1fr}
.passo{position:relative;z-index:1;opacity:.5;transition:opacity .3s}
.passo h3{font-family:var(--bm-fonte-titulo);font-weight:600;font-size:clamp(24px,1.67vw,32px);line-height:35px;text-transform:uppercase;color:var(--bm-azul)}
.passo strong{display:block;margin-top:5px;font-size:16px;line-height:25px}
.passo p{margin-top:25px;max-width:244px;font-size:14px;font-weight:500;line-height:20px}
.passo:nth-child(2) p{max-width:min(291px,43%)}
.passo:nth-child(3){margin-right:-21px}
.passo:nth-child(3) p{max-width:274px}
/* sem mouse na lista, quem fica em evidência é o acompanhamento, o passo que não termina (no Figma era a construção, o Gabriel mudou). Com mouse, a evidência vai pro passo apontado */
.passos-lista:not(:has(.passo:hover)) .passo:nth-child(3),.passo:hover{opacity:1}
.passos-setas{position:absolute;left:-10.07%;width:120.2%;bottom:calc(-1*clamp(48px,4.92vw,94.5px));pointer-events:none}
.passos-setas svg{display:block;width:100%;height:auto}
/* cada seta acende junto com o passo dela: a primeira com o levantamento, a segunda com a construção, e o círculo com a seta final com o acompanhamento, que é quem acende quando não há mouse */
.seta{opacity:.5;transition:opacity .3s}
/* o brilho anda na seta do passo que está com o mouse. Sem mouse em nenhum passo, quem roda é o acompanhamento, que é o passo que não termina.
   Parado, o brilho fica fora do contorno da seta e não aparece. Cada mancha recebe no HTML a distância (--x ou --y) e o atraso (--d) dela */
.passos-lista:not(:has(.passo:hover)) .seta:nth-child(3) .brilho,
.passos-lista:has(.passo:nth-child(1):hover) .seta:nth-child(1) .brilho,
.passos-lista:has(.passo:nth-child(2):hover) .seta:nth-child(2) .brilho,
.passos-lista:has(.passo:nth-child(3):hover) .seta:nth-child(3) .brilho{animation:corre 2.4s linear var(--d,0s) infinite}
@keyframes corre{to{transform:translate(var(--x,0px),var(--y,0px))}}
.passos-lista:not(:has(.passo:hover)) .seta:nth-child(3),
.passos-lista:has(.passo:nth-child(1):hover) .seta:nth-child(1),
.passos-lista:has(.passo:nth-child(2):hover) .seta:nth-child(2),
.passos-lista:has(.passo:nth-child(3):hover) .seta:nth-child(3){opacity:1}

/* Boldinho: o balão fica fixo na tela, e o clique nele abre e fecha o painel de conversa */
.boldinho{position:fixed;z-index:40;right:50px;bottom:50px;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}
.boldinho>*{pointer-events:auto}
.conversa{position:relative;width:61px;height:61px;display:grid;place-items:center;background:#fff;color:var(--bm-azul);border:0;border-radius:50% 4px 50% 50%;box-shadow:0 4px 15px rgba(0,0,0,.12);cursor:var(--cur-clique);transition:transform .2s}
.conversa::before{content:"";position:absolute;inset:3px;border:1px solid var(--bm-offwhite);border-radius:inherit}
.conversa:hover{transform:translateY(-2px)}
.boldinho :focus-visible{outline-color:var(--bm-azul)}
.bd-painel{width:min(345px,calc(100vw - 32px));height:min(448px,calc(100svh - 150px));display:flex;flex-direction:column;padding:6px;background:#fff;color:var(--bm-cinza);border-radius:40px 40px 6px 40px;box-shadow:var(--bm-sombra);transform-origin:bottom right;transition:opacity .2s,transform .2s,visibility .2s}
.boldinho.fechado .bd-painel{opacity:0;visibility:hidden;transform:translateY(8px) scale(.98)}
.bd-topo{display:flex;align-items:center;gap:14px;height:68px;padding:0 20px 0 16px;background:var(--bm-n95);border-radius:34px 34px 34px 6px;color:var(--bm-n65)}
.bd-topo strong{margin-right:auto;font-weight:500;color:var(--bm-azul)}
.bd-avatar{position:relative;flex:none}
.bd-avatar img{width:46px;height:46px;border-radius:50%}
.bd-avatar i{position:absolute;right:0;bottom:0;width:10px;height:10px;border-radius:50%;background:var(--bm-ok);border:2px solid #fff;box-sizing:content-box}
.bd-msgs{flex:1;min-height:0;overflow-y:auto;display:flex;align-items:flex-end;gap:8px;padding:16px 20px 16px 16px}
.bd-msgs>img{width:30px;height:30px;border-radius:50%;flex:none}
.bd-balao{background:#EEF3F5;border-radius:20px 20px 20px 4px;padding:16px;font-size:13px;line-height:17px}
.bd-balao b{display:block;margin-bottom:6px;font-weight:600}
.bd-balao time{display:block;margin-top:6px;text-align:right;color:var(--bm-n25)}
.bd-campo{display:flex;align-items:center;gap:8px;height:50px;padding:0 16px 0 18px;background:var(--bm-n95);border-radius:25px 25px 6px 25px;color:var(--bm-n45)}
.bd-campo input{flex:1;min-width:0;border:0;background:none;font:400 13px var(--bm-fonte);color:var(--bm-cinza)}
.bd-campo input::placeholder{color:var(--bm-n25)}
.bd-campo input:focus{outline:0}
.bd-campo:focus-within{outline:2px solid var(--bm-azul);outline-offset:-2px}
.bd-campo button{display:grid;place-items:center;width:32px;height:32px;border:0;background:none;color:var(--bm-azul);cursor:var(--cur-clique)}

/* home 07 · por que a gente trabalha desse jeito: anéis no fundo e um painel de vidro por cima, que desfoca o que passa atrás */
.porque{padding:clamp(40px,4.48vw,86px) clamp(20px,8.33vw,160px) clamp(40px,4.53vw,87px)}
.porque .aneis{position:absolute;inset:0;width:100%;height:100%}
.anel{transform-origin:960px 517px;animation:gira 90s linear infinite}
.anel:nth-child(3){animation-duration:70s;animation-direction:reverse}
.anel:nth-child(4){animation-duration:50s}
@keyframes gira{to{transform:rotate(360deg)}}
.vidro{position:relative;display:grid;grid-template-columns:54.4% 1fr;min-height:clamp(480px,44.95vw,863px);padding:clamp(48px,8.23vw,158px) clamp(24px,9.53vw,183px) clamp(48px,5.99vw,115px) clamp(24px,4.74vw,91px);border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(22,57,190,.2);-webkit-backdrop-filter:blur(36px);backdrop-filter:blur(36px)}
.porque .tt{max-width:4.95em;font-size:clamp(56px,6.25vw,120px)}
.porque-texto{align-self:end}
.porque-texto p{font-weight:500;line-height:24.8px}
.porque-texto p+p{margin-top:15px}
.porque-texto .abre{max-width:593px;margin-bottom:35px;font-size:20px;font-weight:700;line-height:28px}
.porque-texto .fecha{max-width:510px;font-weight:700}

/* home 08 · o que já está de pé: a linha apontada fica azul e a prévia do site aparece no vão entre o nome e os botões */
.cases{background:#fff;color:#000;padding-top:clamp(96px,13.54vw,260px);padding-bottom:clamp(96px,13.54vw,260px)}
.cases .tt{margin-bottom:55px;font-size:clamp(32px,2.5vw,48px);line-height:1.1}
.cases-quadro{position:relative}
.cases-lista{list-style:none;display:grid;gap:10px}
.case{display:flex;align-items:center;gap:10px;min-height:105px;padding:20px 19px 20px 24px;border-radius:10px;background:#F7F7F7;transition:background-color .2s,color .2s}
.case-nome{margin-right:auto}
.case h3{font-family:var(--bm-fonte-titulo);text-transform:uppercase;font-weight:600;font-size:32px;line-height:1.1}
.case p{margin-top:5px;font-weight:500;line-height:24.8px;color:var(--bm-azul);transition:color .2s}
.case-b{height:47px;padding:0 20px;font-size:14px;letter-spacing:0;background:var(--bm-azul);color:#fff;border-color:var(--bm-azul)}
.case-b.contorno{background:none;color:#FF4632;border-color:#FF4632}
.case:is(:hover,:focus-within){background:var(--bm-azul);color:#fff}
.case:is(:hover,:focus-within) p{color:#fff}
.case:is(:hover,:focus-within) .case-b{background:#fff;color:var(--bm-azul);border-color:#fff}
.case:is(:hover,:focus-within) .case-b.contorno{background:var(--bm-tangerina);border-color:var(--bm-tangerina);color:var(--btn-txt)}
.case-previa{position:absolute;z-index:2;top:0;left:0;width:47.08%;aspect-ratio:678/384;overflow:hidden;border-radius:10px;background:#fff;pointer-events:none;opacity:0;visibility:hidden;transform:translate(calc(var(--x,0px) - 50%),calc(var(--y,0px) - 50%));transition:opacity .25s,visibility .25s}
.case-previa.visivel{opacity:1;visibility:visible;transform:translate(calc(var(--x,0px) - 50%),calc(var(--y,0px) - 50%))}   /* --x e --y vêm do layout.js: o centro da prévia fica no cursor */
.case-previa img{width:100%;height:100%;object-fit:cover;object-position:top}
/* tela do serviço: entra no lugar da foto quando a linha aponta pra uma tela (classe com-tela e data-tela, do layout.js). Usa as peças .mt do mega menu */
.case-tela{display:none;position:absolute;inset:0;container-type:inline-size}
.case-previa.com-tela img{display:none}
.case-previa[data-tela="secure"] .case-tela[data-tela="secure"],.case-previa[data-tela="exemplo"] .case-tela[data-tela="exemplo"]{display:block}
.case-tela .mt{font-size:calc(100cqw/38)}
.case-foto{display:none}   /* prévia dentro do card, montada pelo layout.js. Só aparece no celular, onde não há cursor pra prévia seguir */
.case-tela[data-tela="exemplo"] .mt-tag{background:var(--bm-n95)}

/* home 09 · fecho: dois convites lado a lado, e o "b" da marca entra por cima do card laranja */
.fecho{background:#0D0D0D;color:#fff;padding:clamp(96px,16.15vw,310px) clamp(20px,5vw,96px) clamp(96px,12.45vw,239px)}
.fecho-quadro{position:relative;display:grid;grid-template-columns:730fr 606fr;gap:20px;margin-left:21.53%}
.fecho-marca{position:absolute;z-index:1;left:-27.43%;bottom:0;width:35.84%;max-width:none;height:auto;pointer-events:none}
.fecho-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:clamp(380px,25.83vw,496px);padding:40px clamp(24px,4.06vw,78px);border-radius:var(--bm-r3);background:var(--bm-azul)}
.fecho-card.empresa{padding-left:clamp(24px,8.7vw,167px);padding-right:16%;border-radius:0 999px 999px 0;background:var(--bm-tangerina)}
.fecho-card h2{max-width:7.9em;margin:15px 0;font-family:var(--bm-fonte-titulo);text-transform:uppercase;font-weight:500;font-size:clamp(34px,2.5vw,48px);line-height:1.1}
.fecho-card.empresa h2{max-width:7.05em}
.fecho-card p{max-width:390px;font-weight:500;line-height:24.8px}
.fecho-card b{font-weight:700}
.fecho-card .b{margin-top:25px}
.b-azul{background:var(--bm-azul);color:#fff}
.b-azul:hover{background:#3257E0}

/* rodapé */
.rodape{background:#000;color:#fff;padding:clamp(72px,8.33vw,160px) clamp(20px,5vw,96px) 16px}
.rodape-topo,.rodape-meio{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px}
.rodape-marca img{display:block;width:clamp(160px,12.03vw,231px);height:auto}
.rodape nav{display:flex;flex-wrap:wrap;gap:12px 45px;font-weight:600;line-height:19px}
.rodape nav a{display:inline-flex;align-items:center;gap:5px}
/* menu de soluções do rodapé: fechado, a linha da grade tem altura zero; aberto, ela cresce até o conteúdo e empurra o resto do rodapé */
.rodape-sol{display:inline-flex;align-items:center;gap:5px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:var(--cur-clique)}
.rodape-sol:hover{color:var(--bm-n65)}
.rodape-sol .ic{transition:transform .2s}
.rodape-sol[aria-expanded=true] .ic{transform:rotate(180deg)}
.rodape nav :is(a,button){padding:12.5px 8px;margin:-12.5px -8px}   /* área de toque de 44px de altura sem mexer no desenho: o espaço de dentro cresce e a margem negativa devolve o mesmo tanto */
.rodape-mega{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .3s cubic-bezier(.16,1,.3,1),visibility 0s .3s}
.rodape-mega.aberto{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .3s cubic-bezier(.16,1,.3,1)}
.rodape-mega-in{min-height:0;margin:0 -12px;padding:0 12px;overflow:hidden}   /* a sobra de 12px de cada lado é pro fundo do hover dos links não ser cortado */
.rodape-mega-grade{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 24px;margin-top:32px;padding:32px 0 6px;border-top:1px solid rgba(255,255,255,.14)}   /* os 6px de baixo deixam inteiro o contorno de foco do último link */
.rodape-frente{font:600 clamp(20px,1.25vw,24px)/1.1 var(--bm-fonte-titulo);text-transform:uppercase}
/* links no padrão do item do mega menu (ícone no quadrado, fundo no hover), em versão escura. A margem negativa alinha o ícone com o título da coluna e deixa o fundo do hover passar dele */
.rodape .rodape-col ul{display:grid;gap:1px;margin:14px -12px 0;font-size:clamp(14px,.9vw,16px);font-weight:500;line-height:26px}
.rodape-col li a{display:flex;align-items:center;gap:12px;padding:9.5px 12px;border-radius:7px;transition:background .15s}
.rodape-col .mega-ic{background:rgba(255,255,255,.12)}
.rodape .rodape-col li a:is(:hover,:focus-visible){background:rgba(255,255,255,.08);color:#fff}
.rodape-col li a:is(:hover,:focus-visible) .mega-ic{background:var(--bm-azul);color:#fff}
.rodape-meio{margin-top:clamp(56px,5.2vw,100px)}
/* título do menu e do rodapé é div, nunca heading: heading na moldura faz toda página começar por H3 (régua de SEO, 23/10) */
.rodape-tit{font-family:var(--bm-fonte-titulo);text-transform:uppercase;font-weight:600;font-size:32px;line-height:1.1}
.rodape-b{height:47px;margin-top:20px;padding:0 20px;font-size:14px;letter-spacing:0}
.rodape ul{list-style:none;font-size:14px;font-weight:700;line-height:17px}
.rodape-contato ul{display:grid;gap:12px;margin-top:35px}
.rodape-contato ul a{text-decoration:underline;text-underline-offset:3px}
.rodape a:not(.b):hover{color:var(--bm-n65)}
.rodape-sobre{max-width:730px;text-align:right}
.rodape-sobre p{font-weight:500;line-height:24.8px}
.rodape-sobre .rodape-empresa{margin-top:16px;opacity:.7}
.rodape-sobre ul{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 25px;margin-top:44px}
/* peças do símbolo caindo atrás do texto do rodapé, em todas as páginas (aprovado pelo Gabriel em 15/10, layout.js). São três canvas empilhados, um por plano de profundidade,
   e o layout.js dá a cada um o seu desfoque (o vidro fosco da referência). As peças são pretas perto do fundo, pra o texto branco ler limpo por cima */
.rodape:has(.rodape-pecas){position:relative;isolation:isolate}
.rodape-pecas{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.rodape-fim{margin-top:clamp(64px,7.4vw,142px);padding-top:18px;border-top:1px solid #262626;text-align:center;font-size:12px;font-weight:500;line-height:18.6px;color:rgba(255,255,255,.5)}

/* página Secure (layout-secure-v2.html): usa as peças da home (dobra, cabeça, pílula, etapas, vidro, fecho) e só acrescenta o que é dela.
   Toda classe nova leva o prefixo secure-, e o que ajusta peça da home vem escopado por .pg-secure, pra nada vazar pra home */
.pg-secure .hero .rot{left:calc(var(--corpo)*2.95)}   /* a pílula senta depois de "para o", a terceira linha do título */
.secure-duas{display:grid;grid-template-columns:54.4% 1fr;gap:var(--bm-s4);align-items:end}
.secure-duas .porque-texto .b-link{margin-top:25px}
/* secure 01b · por que importa: mesmo tom e mesmo respiro da segunda seção da home, pra faixa da dobra emendar igual */
.secure-porque{background:#131313;padding-top:clamp(96px,13.3vw,255px);padding-bottom:clamp(72px,8.1vw,156px)}
.secure-porque .tt{max-width:7.5em}
.secure-porque .cabeca p{max-width:495px}
/* painel das semanas: cada barra é uma semana. Na linha de cima o azul se dilui a cada semana (--i é o número dela) e as brechas acendem em tangerina.
   Na de baixo todas seguem azuis, e um clarão passa de barra em barra, que é a olhada da semana */
.secure-semanas{display:grid;gap:clamp(16px,1.67vw,32px);margin-bottom:clamp(28px,2.6vw,50px);padding:clamp(24px,2.7vw,52px);border:1px solid rgba(255,255,255,.08);border-radius:var(--bm-r2);background:#1A1A1A}
.secure-linha{display:grid;grid-template-columns:clamp(150px,13.5vw,260px) 1fr;align-items:center;gap:24px}
.secure-linha b{font:600 clamp(20px,1.46vw,28px)/1.1 var(--bm-fonte-titulo);text-transform:uppercase}
.secure-linha.uma-vez b{color:rgba(255,255,255,.45)}
.secure-barras{display:grid;grid-template-columns:repeat(26,1fr);gap:clamp(2px,.31vw,6px);height:clamp(56px,6.25vw,120px)}
.secure-barras i{border-radius:3px;background:var(--bm-azul)}
.uma-vez .secure-barras i{background:color-mix(in srgb,var(--bm-azul) calc(100% - var(--i)*3.6%),#2A2A2A)}
.uma-vez .secure-barras .brecha{background:var(--bm-tangerina);animation:secure-brecha 2.6s ease-in-out calc(var(--i)*.11s) infinite}
.toda-semana .secure-barras i{animation:secure-olha 5.2s linear calc(var(--i)*.2s) infinite}
@keyframes secure-brecha{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes secure-olha{0%,9%,100%{background:var(--bm-azul)}3%{background:#fff}}
.secure-eixo{display:flex;justify-content:space-between;gap:16px;padding-left:calc(clamp(150px,13.5vw,260px) + 24px);font-size:var(--bm-t12);font-weight:600;color:rgba(255,255,255,.5)}
.secure-eixo .secure-brecha{order:2;display:inline-flex;align-items:center;gap:6px;color:#fff}
.secure-eixo .secure-brecha::before{content:"";width:10px;height:10px;border-radius:2px;background:var(--bm-tangerina)}
.secure-eixo span:last-child{order:3}
.secure-motivos{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.secure-motivos li{padding-top:18px;border-top:1px solid rgba(255,255,255,.18)}
.secure-motivos span{font-size:var(--bm-t20);font-weight:500}
.secure-motivos p{margin-top:15px;max-width:400px;font-weight:500;line-height:25px}
@media(max-width:960px){
  .secure-linha{grid-template-columns:1fr;gap:10px}
  .secure-eixo{padding-left:0}
  .secure-motivos{grid-template-columns:1fr}
}
/* secure 02 · três níveis: o card sobe de tom junto com o escopo, e o nome do nível é o que domina */
.secure-niveis{background:#fff;color:#000;padding-top:clamp(96px,13.5vw,260px);padding-bottom:clamp(96px,13.5vw,260px)}
.secure-niveis .tt{max-width:6em}
.secure-niveis .cabeca p{max-width:495px}
.secure-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.secure-nivel{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(24px,1.9vw,36px) clamp(24px,1.93vw,37px) clamp(28px,2.7vw,52px);border-radius:var(--bm-r2);background:#F7F7F7}
.secure-nivel .rot{color:var(--bm-azul)}
.secure-nivel h3{margin-top:clamp(40px,5.2vw,100px);font:600 clamp(40px,3.13vw,60px)/1 var(--bm-fonte-titulo);text-transform:uppercase}
.secure-nivel .soma{margin-top:10px;font-weight:700}
.secure-nivel ul{list-style:none;width:100%;margin-top:20px;font-size:14px;font-weight:500;line-height:20px}
.secure-nivel li{padding:10px 0;border-top:1px solid rgba(0,0,0,.1)}
.secure-nivel.pro{background:var(--bm-azul);color:#fff}
.secure-nivel.full{background:#0D0D0D;color:#fff}
.secure-nivel:is(.pro,.full) .rot{color:#fff}
.secure-nivel:is(.pro,.full) li{border-color:rgba(255,255,255,.18)}
.secure-fecha{max-width:700px;margin-top:clamp(32px,2.86vw,55px);font-weight:500;line-height:25px}
/* secure 03 · como é feito: uma linha por passo. O nome e o ritmo ficam na coluna do Figma (25,42%, a mesma dos três passos da home) e o texto ao lado */
.secure-como{background:#F7F7F7;color:#000;padding-top:clamp(96px,12.2vw,234px);padding-bottom:clamp(96px,12.2vw,234px)}
.secure-como .tt{max-width:9.5em}
.secure-passos{list-style:none;margin-top:clamp(48px,5.68vw,109px)}
.secure-passo{display:grid;grid-template-columns:38% 1fr;gap:24px;align-items:start;padding:clamp(24px,2.08vw,40px) 0;border-top:1px solid #DCDCDC}
.secure-passo h3{display:flex;gap:.5em;margin-bottom:12px;font:600 clamp(24px,1.67vw,32px)/1.1 var(--bm-fonte-titulo);text-transform:uppercase;color:var(--bm-azul)}
.secure-passo h3 span{flex:none;color:#000}
.secure-passo .rot{color:var(--bm-azul);white-space:normal;height:auto;min-height:30px;padding-block:6px;line-height:1.3}
.secure-passo p{max-width:640px;font-weight:500;line-height:25px}
.secure-passo p a{text-decoration:underline;text-underline-offset:3px;color:var(--bm-azul)}
.secure-como .secure-frase{max-width:11em;margin-top:clamp(48px,5.68vw,109px);padding-top:clamp(24px,2.08vw,40px);border-top:1px solid #DCDCDC;color:var(--bm-azul)}
/* secure 04 · pra quem é: as etapas da home em duas colunas */
.secure-quem{padding-top:clamp(96px,11.3vw,217px);padding-bottom:clamp(96px,11.3vw,217px)}
.secure-quem .tt{max-width:6em}
.secure-quem .cabeca p{max-width:619px}
.secure-quem .etapas{grid-template-columns:repeat(2,1fr);padding-top:clamp(24px,2.08vw,40px);border-top:1px solid rgba(255,255,255,.18)}
.secure-quem .etapa p{max-width:420px}
/* secure 05 · onde entra no fluxo: a régua é uma linha só com um ponto por etapa, numerada, com a etapa do site acesa. Não é aba, não clica */
.secure-fluxo{background:#fff;color:#000;padding-top:clamp(96px,11.3vw,217px);padding-bottom:clamp(96px,13.5vw,260px)}
.secure-fluxo .tt{max-width:7em}
.secure-fluxo .secure-duas{align-items:start}
.secure-regua{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:0;counter-reset:etapa;margin-bottom:clamp(48px,5.68vw,109px)}
.secure-regua li{counter-increment:etapa;position:relative;padding:22px 16px 0 0;border-top:2px solid var(--bm-n65);color:var(--bm-n45);font:600 clamp(20px,1.46vw,28px)/1.1 var(--bm-fonte-titulo);text-transform:uppercase}
.secure-regua li::before{content:counter(etapa,decimal-leading-zero) ".";display:block;margin-bottom:6px;font-size:.62em;color:var(--bm-n25)}
.secure-regua li::after{content:"";position:absolute;left:0;top:-7px;width:12px;height:12px;box-sizing:border-box;border:2px solid var(--bm-n65);border-radius:50%;background:#fff}
.secure-regua .aqui,.secure-regua .aqui::before{color:var(--bm-azul)}
.secure-regua .aqui::after{top:-9px;width:16px;height:16px;border-color:var(--bm-azul);background:var(--bm-azul)}
/* secure 06 · a prova: o vidro da home, com o título menor porque a frase é mais longa */
.pg-secure .porque .tt{max-width:7em;font-size:clamp(40px,4.17vw,80px)}
/* secure 07 · fecho: um convite só, então o card ocupa a largura dos dois da home */
.pg-secure .fecho-quadro{grid-template-columns:1fr}
.pg-secure .fecho-card.empresa h2{max-width:9em}
@media(max-width:960px){
  .secure-duas,.secure-grade,.secure-passo,.secure-quem .etapas{grid-template-columns:1fr}
  .secure-regua{grid-template-columns:repeat(3,1fr);row-gap:36px}
  .secure-regua li{padding-right:8px;font-size:18px}
  .pg-secure .hero .rot{left:auto}
}

/* ============ página Google Ads (layout-insights-google-ads.html, frame 180:19) ============ */
/* gads 01 · dobra: branca, título azul à esquerda, apoio e botão à direita com a base alinhada à do título, e a tela do produto embaixo.
   A tela passa 118 do miolo de cada lado (1676 em 1920). O arco fica atrás dela, com o topo 471 acima do fim da seção. Medidas do Figma em 1920 */
.gads-hero{background:#fff;color:#000;padding-top:clamp(120px,10.42vw,200px);padding-bottom:clamp(72px,10.42vw,200px)}
.gads-hero .gads-arco{position:absolute;left:37.81%;bottom:max(-11.93vw,-229px);width:min(72.92vw,1400px);max-width:none;height:auto;pointer-events:none}
.gads-hero > :not(.gads-arco){position:relative}
.gads-hero-topo{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end}
.gads-hero-titulo{display:flex;flex-direction:column;align-items:flex-start}
.gads-hero .rot{color:var(--bm-azul);margin-bottom:15px}
.gads-h1{max-width:10.35em;color:var(--bm-azul);font:700 clamp(40px,3.75vw,72px)/1 var(--bm-fonte-titulo);text-transform:uppercase}
.gads-hero-lado{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.gads-lead{max-width:556px;margin-bottom:25px;font-weight:500;font-size:clamp(16px,1.04vw,20px);line-height:1.5}
.gads-tela{display:block;width:calc(100% + 12.3vw);max-width:none;height:auto;aspect-ratio:1676/799;margin:clamp(40px,3.91vw,75px) -6.15vw 0;border-radius:10px;box-shadow:0 0 0 1px #DEDEDE}
/* gads · header: no Figma desta página (nó 180:39) a pílula é azul cheia, com logo e menu brancos, porque a dobra é branca. Depois da dobra volta o vidro escuro da home */
.pg-gads .topo:not(.solido){background:var(--bm-azul);border-color:transparent}
/* botão principal em todas as páginas do site 2027 (pedido do Gabriel, 07/10; nasceu como teste na página Google Ads):
   hover no jeito do webflow.com. O botão não sobe: a cor escurece um tom e entra um brilho por dentro, em .3s.
   O docs/marca/system.html ainda descreve o hover antigo (sobe 2px e clareia) e o tom #E5341F não está nos tokens */
.b1{transition:background-color .3s cubic-bezier(.455,.03,.515,.955),box-shadow .3s cubic-bezier(.455,.03,.515,.955)}
@media(hover:hover) and (pointer:fine){
  .b1:hover{transform:none;background:#E5341F;box-shadow:0 1px 1px rgba(8,8,8,.08),0 1px 1px rgba(8,8,8,.2),inset 0 6px 12px rgba(255,255,255,.12),inset 0 1px 1px rgba(255,255,255,.2)}
}
/* o botão azul (fecho das páginas, faixa do hero da home) ganha o mesmo hover do laranja: escurece um tom e entra o brilho por dentro (pedido do Gabriel, 07/10). O tom #1433A8 não está nos tokens */
.b-azul{transition:background-color .3s cubic-bezier(.455,.03,.515,.955),box-shadow .3s cubic-bezier(.455,.03,.515,.955)}
@media(hover:hover) and (pointer:fine){
  .b-azul:hover,.hero .faixa .b1:hover{transform:none;background:#1433A8;box-shadow:0 1px 1px rgba(8,8,8,.08),0 1px 1px rgba(8,8,8,.2),inset 0 6px 12px rgba(255,255,255,.12),inset 0 1px 1px rgba(255,255,255,.2)}
}
/* quadradinho azul com ícone, usado nas etapas e nos cards */
.gads-ic{display:grid;place-items:center;flex:none;width:45px;height:45px;border-radius:8px;background:var(--bm-azul);color:#fff}
.gads-ic svg{width:25px;height:25px}
/* gads 02 · cinco telas: os cinco quadros ficam empilhados no painel e só o ativo aparece. Posições da imagem e do card são frações do painel de 1439x600 */
.gads-telas{padding-top:clamp(96px,10.94vw,210px);padding-bottom:clamp(86px,11.51vw,221px)}
.gads-telas .tt{max-width:8.7em}
.gads-telas .cabeca p{max-width:488px}
.gads-painel{display:grid;border-radius:20px;background:#163AC1}
.gads-quadro{grid-area:1/1;position:relative;aspect-ratio:1439/682;min-width:0;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.gads-quadro.ativa{opacity:1;visibility:visible}
/* Figma de 07/10 (lido por print, a API estava sem cota): a tela ocupa o painel inteiro, sobra só uma borda azul em volta, e o card do copy é preto, embaixo à esquerda, por cima da tela */
.gads-quadro > :is(img,.gads-vaga,.gads-app){position:absolute;inset:clamp(8px,.89vw,17px);max-width:none;border-radius:10px;object-fit:cover;object-position:left top}
.gads-quadro .gads-app :is(.ga-side,.ga-top){display:none}
/* pontos que pulsam em cima da tela viva (13/10): moram no molde, mas só aparecem nos slides das cinco telas.
   O botão tem 24px pra dar onde tocar, e o balão abre no mouse, no toque e no teclado. Com .esq o balão abre pra esquerda */
.ga-ponto,.gads-pontos{display:none}
.gads-quadro .ga-ponto{position:relative;display:inline-grid;place-items:center;width:24px;height:24px;margin:-6px 0 -6px 6px;padding:0;border:0;border-radius:50%;background:none;vertical-align:middle;cursor:help}
.gads-quadro .ga-ponto::before{content:"?" / "";position:relative;z-index:1;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--bm-azul);color:#fff;font:700 9.5px/1 var(--ga-corpo);letter-spacing:0}
.gads-quadro .ga-ponto::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:var(--bm-azul);animation:ga-pulsa 1.8s ease-out infinite}
.gads-quadro .ga-ponto:focus-visible{outline:2px solid var(--bm-azul);outline-offset:1px}
.gads-quadro .ga-ponto [role=tooltip]{position:absolute;z-index:3;left:calc(100% + 6px);top:50%;translate:0 -50%;width:230px;padding:12px 14px;border-radius:8px;background:#000E45;color:#fff;font:500 12.5px/1.45 var(--ga-corpo);letter-spacing:0;text-transform:none;text-align:left;white-space:normal;opacity:0;visibility:hidden;transition:opacity .15s,visibility .15s;pointer-events:none;zoom:calc(1/var(--ga-z,1))} /* o zoom desfaz a escala da tela viva: o texto do balão fica do mesmo tamanho em qualquer largura */
.gads-quadro .ga-ponto.esq [role=tooltip]{left:auto;right:calc(100% + 6px)}
.gads-quadro .ga-ponto:is(:hover,:focus) [role=tooltip]{opacity:1;visibility:visible}
.gads-quadro .ga-ponto.calado [role=tooltip]{opacity:0;visibility:hidden} /* Esc fecha o balão sem tirar o foco do ponto */
.gads-quadro .ga-ponto:is(:hover,:focus)::after{animation:none;opacity:0}
@keyframes ga-pulsa{from{transform:scale(1);opacity:.55}to{transform:scale(2.4);opacity:0}}
@media(prefers-reduced-motion:reduce){.gads-quadro .ga-ponto::after{animation:none;transform:scale(1.9);opacity:.25}}
.gads-vaga{display:grid;place-items:center;padding:16px;border:1px dashed rgba(255,255,255,.35);font-size:14px;font-weight:600;text-align:center;color:rgba(255,255,255,.6)}
.gads-quadro-card{position:absolute;left:3.3%;bottom:6.7%;width:clamp(260px,21.9vw,421px);padding:22px 24px 25px;border-radius:10px;background:rgba(17,17,17,.78);color:#fff;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.gads-quadro-card h3{font:600 clamp(28px,2.08vw,40px)/1.1 var(--bm-fonte-titulo);text-transform:uppercase}
.gads-quadro-card p{margin-top:20px;font-weight:500;line-height:24.8px}
/* os cinco traços: o botão é mais alto que o traço, pra dar onde clicar. O traço da tela ativa é o mais escuro */
.gads-tracos{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:clamp(18px,2.29vw,44px)}
.gads-traco{position:relative;height:23px;padding:0;border:0;background:none}
.gads-traco::before{content:"";position:absolute;left:0;top:calc(50% - 1.5px);width:100%;height:3px;background:#3C5EE0;transition:background .2s}
.gads-traco:hover::before{background:#6F8AEE}
/* a barra do slide da frente "carrega" em branco por cima do trilho. Quando completa, o layout.js passa para o próximo slide.
   Só anda com a seção na janela (.rodando) e para enquanto o mouse está sobre o slide ou o foco do teclado está numa barra */
.gads-traco::after{content:"";position:absolute;left:0;top:calc(50% - 1.5px);width:100%;height:3px;background:#fff;transform:scaleX(0);transform-origin:left}
.gads-traco[aria-selected=true]::after{animation:gads-carrega 6s linear forwards paused}
.gads-tracos.rodando .gads-traco[aria-selected=true]::after{animation-play-state:running}
.gads-telas:has(.gads-quadro:hover,.gads-traco:focus-visible,.ga-ponto:focus) .gads-traco::after{animation-play-state:paused}
@keyframes gads-carrega{to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.gads-traco[aria-selected=true]::after{animation:none;transform:none}}
/* gads 03 · etapas: texto à esquerda e a lista que abre à direita, na coluna do Figma (começa em 50,83% do miolo). As barras do fundo ficam atrás de tudo */
.gads-etapas{display:grid;grid-template-columns:1fr 49.17%;align-items:start;padding-top:clamp(96px,13.54vw,260px);padding-bottom:clamp(96px,12.86vw,247px)}
/* passagem da seção azul para a preta, efeito A (cortina) de docs/marca/movimento-transicao-secoes.html:
   a azul trava no pé da janela e a preta sobe por cima dela em linha reta, acompanhando a rolagem.
   Feito sem biblioteca e sem texto duplicado: a azul gruda (sticky) e a altura dela vem do layout.js em --gads-h */
.gads-telas{position:sticky;top:min(0px,calc(100svh - var(--gads-h,100svh)))}
.gads-etapas{z-index:1}
.gads-etapas .gads-aros{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.gads-etapas > :not(.gads-aros){position:relative}
/* as barras acendem até a etapa aberta (layout.js põe .apagada nas de baixo, com atraso em escada) */
.gads-barras rect{transition:opacity .45s}
.gads-barras rect.apagada{opacity:.18}
/* o corpo da etapa desliza ao abrir e fechar. Navegador que não anima altura automática abre seco, como antes */
.gads-etapa{interpolate-size:allow-keywords}
.gads-etapa::details-content{height:0;overflow:clip;transition:height .35s cubic-bezier(.16,1,.3,1),content-visibility .35s allow-discrete}
.gads-etapa[open]::details-content{height:auto}
@media(prefers-reduced-motion:reduce){.gads-barras rect,.gads-etapa::details-content{transition:none}}
.gads-etapas-texto .tt{max-width:8.6em}
.gads-etapas-texto p{max-width:418px;margin-top:25px;font-weight:500;line-height:24.8px}
.gads-lista{display:grid;gap:10px;margin-top:clamp(0px,.89vw,17px)}
.gads-etapa{border:1px solid #222;border-radius:10px;background:#141414}
.gads-etapa summary{display:flex;align-items:center;gap:clamp(14px,1.35vw,26px);padding:21px 31px 21px 23px;list-style:none}
.gads-etapa summary::-webkit-details-marker{display:none}
.gads-etapa summary:focus-visible{border-radius:10px}
.gads-etapa h3{margin-right:auto;font:600 clamp(24px,1.67vw,32px)/1.1 var(--bm-fonte-titulo);text-transform:uppercase}
.gads-etapa .gads-seta{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:#222;color:#fff;transition:transform .2s}
.gads-etapa[open] .gads-seta{transform:rotate(180deg)}
.gads-etapa[open] summary{padding-bottom:13px}
.gads-etapa > p{max-width:calc(421px + 97px + 31px);padding:0 31px 27px calc(23px + 45px + clamp(14px,1.35vw,26px) + 3px);font-weight:500;line-height:24.8px}
/* gads 04 · para quem: texto e imagem lado a lado, e três cards cinza claro embaixo */
.gads-quem{background:#fff;color:#000;padding-top:clamp(96px,13.54vw,260px);padding-bottom:clamp(0px,2.24vw,43px)}
.gads-quem-topo{display:grid;grid-template-columns:1fr 52.57%;gap:24px;align-items:start}
.gads-quem-topo .tt{max-width:8.55em}
.gads-quem-topo p{max-width:474px;margin-top:15px;font-weight:500;line-height:24.8px}
.gads-quem-topo .gads-quem-lead{max-width:586px;margin-top:25px;font-size:clamp(17px,1.04vw,20px);line-height:1.4}
.gads-quem-topo img{width:100%;height:auto;border:1px solid #DEDEDE;border-radius:10px}
.gads-cards{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:clamp(40px,4.43vw,85px)}
.gads-card{display:grid;grid-template-columns:44px 1fr;column-gap:15px;align-content:start;min-height:clamp(230px,14.01vw,269px);padding:26px 23px 34px;border:1px solid #DEDEDE;border-radius:10px;background:#F7F7F7}
.gads-card .gads-ic{width:44px;height:44px;border-radius:10px}
.gads-card .rot{justify-self:start;align-self:center;color:var(--bm-azul)}
.gads-card :is(h3,p){grid-column:2}
.gads-card h3{max-width:249px;margin-top:8px;font:600 clamp(24px,1.67vw,32px)/1.1 var(--bm-fonte-titulo);text-transform:uppercase}
.gads-card:nth-child(2) h3{max-width:327px}
.gads-card p{max-width:255px;margin-top:25px;font-size:14px;font-weight:500;line-height:19.6px}
/* gads 05 · o caminho do lead da home, com título mais curto */
.pg-gads .caminho .tela:first-child .tt{max-width:8.8em}
/* gads 06 · testado na conta da Boldman */
.gads-testado{background:#F7F7F7;color:#000;padding-top:clamp(96px,13.54vw,260px);padding-bottom:clamp(96px,13.54vw,260px)}
.gads-testado .tt{max-width:7.8em}
.gads-testado .cabeca{margin-bottom:clamp(32px,3.59vw,69px)}
.gads-testado .cabeca p{max-width:643px}
.gads-testado img{width:100%;height:auto;border:1px solid #DEDEDE;border-radius:15px}
.gads-testado .gads-app{border-radius:15px}
/* gads 07 · fecho: o "b" fica à esquerda e passa por cima do card, que começa em 25,83% do miolo. As margens do card são frações da largura dele (1068 no Figma) */
.gads-fecho{padding:clamp(96px,11.41vw,219px) var(--lat) clamp(96px,12.45vw,239px)}
.gads-fecho-quadro{position:relative;display:flow-root;padding-left:25.83%}
.gads-fecho-marca{position:absolute;z-index:1;left:0;top:0;width:33.75%;max-width:none;height:auto;pointer-events:none}
.gads-fecho-card{display:grid;grid-template-columns:367fr 390fr;align-content:center;justify-items:start;min-height:clamp(300px,19.69vw,378px);margin:15.73% 0 3.84%;padding:32px 12.17% 32px 16.95%;border-radius:0 999px 999px 0;background:var(--bm-tangerina)}
.gads-fecho-card .rot{grid-column:1/-1}
.gads-fecho-card h2{max-width:7.05em;margin-top:15px;font:500 clamp(34px,2.5vw,48px)/1.1 var(--bm-fonte-titulo);text-transform:uppercase}
.gads-fecho-card p{align-self:end;max-width:390px;font-weight:500;line-height:24.8px}
.gads-fecho-card .b{grid-column:2;margin-top:25px}
/* o laranja corre da esquerda pra direita quando o fecho entra na tela (Gabriel, 15/10). O layout.js põe .espera no carregamento e .corre ao ver o card,
   então sem JS ou com menos movimento pedido o card aparece pronto. O fundo vira uma camada atrás do texto, que abre por recorte */
.gads-fecho-card.espera{position:relative;isolation:isolate;background:none}
.gads-fecho-card.espera::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--bm-tangerina);clip-path:inset(0 100% 0 0);transition:clip-path .9s cubic-bezier(.65,0,.35,1)}
.gads-fecho-card.espera>*{opacity:0;transform:translateX(-24px);transition:opacity .6s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.gads-fecho-card.corre::before{clip-path:inset(0)}
.gads-fecho-card.corre>*{opacity:1;transform:none}
.gads-fecho-card.corre>:nth-child(1){transition-delay:.3s}
.gads-fecho-card.corre>:nth-child(2){transition-delay:.38s}
.gads-fecho-card.corre>:nth-child(3){transition-delay:.48s}
.gads-fecho-card.corre>:nth-child(4){transition-delay:.56s}
@media(max-width:960px){
  .gads-hero-topo{grid-template-columns:1fr;gap:20px}
  .gads-hero-lado{align-items:flex-start;text-align:left}
  .gads-quadro{aspect-ratio:auto;display:flex;flex-direction:column-reverse;gap:16px;padding:16px}
  /* no celular a tela viva fica pequena demais pra um ponto caber no dedo: o ponto vira número parado, sem balão, e a explicação desce para a lista embaixo da tela.
     O número desfaz o zoom da tela viva pra ficar legível, e não ocupa espaço pra não empurrar o desenho */
  .gads-quadro .ga-ponto{display:inline-block;width:0;height:0;margin:0;pointer-events:none;zoom:calc(1/var(--ga-z,1))}
  .gads-quadro .ga-ponto::before{content:attr(data-n);position:absolute;left:3px;top:-8px}
  .gads-quadro .ga-ponto::after,.gads-quadro .ga-ponto [role=tooltip]{display:none}
  .gads-pontos{order:-1;display:grid;gap:14px;margin:0;padding:4px 4px 8px;list-style:none;counter-reset:ponto;color:#fff;font-size:14px;line-height:1.5}
  .gads-pontos li{display:grid;grid-template-columns:20px 1fr;column-gap:10px;counter-increment:ponto}
  .gads-pontos li::before{content:counter(ponto);grid-row:span 2;display:grid;place-items:center;width:20px;height:20px;margin-top:1px;border-radius:50%;background:#fff;color:var(--bm-azul);font-size:11px;font-weight:700}
  .gads-pontos b{font-weight:700}
  .gads-quadro > :is(img,.gads-vaga,.gads-app){position:static;width:100%;height:auto;aspect-ratio:1178/560}
  .gads-quadro-card{position:static;width:auto}
  .gads-tracos{gap:8px}
  /* no celular não há mouse pra pausar e cada slide traz card, tela e lista: o slide não passa sozinho, a pessoa troca pelos traços, mais altos pra caber o dedo */
  .gads-traco{height:32px}
  .gads-traco[aria-selected=true]::after{animation:none;transform:none}
  .gads-etapas,.gads-quem-topo,.gads-cards{grid-template-columns:1fr}
  .gads-etapas{row-gap:40px}
  .gads-etapas .gads-aros{display:none}
  .gads-etapa summary{padding-right:20px}
  .gads-quem-topo{gap:32px}
  .gads-card{min-height:0}
  .gads-fecho-quadro{padding-left:0}
  .gads-fecho-marca{display:none}
  .gads-fecho-card{grid-template-columns:1fr;margin:0;padding:48px 64px 48px 24px;border-radius:var(--bm-r3) 120px 120px var(--bm-r3)}
  .gads-fecho-card :is(p,.b){grid-column:1}
  .gads-fecho-card p{margin-top:15px}
}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* tela de notebook: o quadro do caminho quebra em duas fileiras de três etapas, pra peça não ficar espremida */
@media(max-width:1500px){.trilha{grid-template-columns:repeat(3,1fr);row-gap:40px}}
@media(max-width:1200px){.fichas{grid-template-columns:1fr}}
@media(max-width:560px){.caminho .trilha{grid-template-columns:1fr}}
@media(max-width:560px){.rodape .rodape-mega-grade{grid-template-columns:1fr}}   /* o .rodape na frente faz esta regra ganhar da de duas colunas, que vem depois no arquivo */
/* home no celular (Gabriel, 08/10). Seção 3: a tela do card sai da posição fixa e entra depois da frase, que em três linhas ficava coberta por ela. Seção 5: em coluna única o card não precisa da altura mínima que alinha as colunas */
@media(max-width:560px){
  :root{--lat:20px}   /* margem lateral do celular igual à do cabeçalho e do rodapé (Gabriel, 08/10). Antes eram 12,5% da tela, 49px em 390 */
  .hero .lead,.acoes{margin-left:0}   /* parágrafo e botões na mesma linha vertical do título (Gabriel, 08/10). No computador seguem 7px pra dentro */
  .acoes{flex-direction:column;align-items:flex-start;gap:12px}   /* "Ver cases" embaixo do botão, e não ao lado (Gabriel, 08/10) */
  .frente.alta{aspect-ratio:auto}
  .frente.baixa{aspect-ratio:auto;min-height:137px}   /* a frase em três linhas empurrava o nome da frente pra fora do card */
  .frente.alta .frente-tela{position:relative;left:auto;top:auto;width:100%;margin-top:24px}
  .frente.secure .frente-tela{width:86%;margin:24px auto 28px}
  .frente.secure .foto{left:24px;top:auto;bottom:24px;width:calc(100% - 48px);height:150px;object-fit:cover}
  .caminho .peca{min-height:0}
  .caminho .peca .estado{margin-top:10px}
  .grade-frentes{gap:12px}
  .grade-fluxo{gap:12px}
  /* cases no celular: em vez de seis faixas empilhadas, uma fila de cards que desliza pro lado, cada um com a prévia do site em cima. O card ocupa 84% da largura, então a ponta do próximo aparece e avisa que tem mais */
  .cases .tt{margin-bottom:28px}
  .cases-lista{display:flex;gap:12px;margin:0 -20px;padding:0 20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:20px;scrollbar-width:none}
  .cases-lista::-webkit-scrollbar{display:none}
  .case{flex:none;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;gap:10px;width:84%;min-height:0;padding:12px 12px 14px;scroll-snap-align:start}
  .case-foto{display:block;position:relative;grid-column:1/-1;aspect-ratio:678/384;overflow:hidden;border-radius:8px;background:#fff}
  .case-foto img{width:100%;height:100%;object-fit:cover;object-position:top}
  .case-foto .case-tela{display:block}
  .case-nome{grid-column:1/-1;margin:6px 4px 8px}
  .case h3{font-size:26px}
  .case-b{padding:0 8px}
  /* anéis do "por que": no celular o desenho enchia a altura da seção e só o miolo cabia na tela. Aqui ele tem três vezes a largura da seção, centrado, e os arcos aparecem inteiros em cima e embaixo */
  .porque .aneis{inset:auto;left:50%;top:50%;width:300%;height:auto;aspect-ratio:1920/1036;overflow:visible;transform:translate(-50%,-50%)}
  .porque{overflow:clip}   /* o anel passa da moldura do desenho pra cima e pra baixo, e quem corta é a seção */
  /* caminho do lead no celular: as seis etapas viram uma fila de etiquetas e só a etapa da vez aparece (layout.js monta a fila). As etapas dividem a mesma casa da grade, então a altura é sempre a da mais alta e a página não pula na troca */
  .fase-fila{display:flex;gap:8px;margin:0 -20px 16px;padding:0 20px;overflow-x:auto;scrollbar-width:none}
  .fase-fila::-webkit-scrollbar{display:none}
  .fase-et{position:relative;flex:none;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;overflow:hidden;border:1px solid #E8E8E8;border-radius:var(--bm-pill);background:#fff;color:#626262;font:600 18px/1 var(--bm-fonte-titulo);text-transform:uppercase;cursor:var(--cur-clique);transition:background .2s,color .2s,border-color .2s}
  .fase-et.com-aviso::before{content:"";width:7px;height:7px;border-radius:50%;background:#FF3A0E}
  .fase-et[aria-pressed=true]{border-color:#0D0D0D;background:#0D0D0D;color:#fff}
  .fase-et::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:rgba(255,255,255,.6);transform:scaleX(0);transform-origin:left}
  .fase-fila.na-janela:not(.manual) .fase-et[aria-pressed=true]::after{animation:fase-carga 5s linear both}
  .caminho .trilha{gap:0}
  .caminho .fase{grid-area:1/1;gap:10px;align-content:start;visibility:hidden;opacity:0}
  .caminho .fase.na-vez{visibility:visible;opacity:1;transition:opacity .35s}
  .caminho .fase h3,.caminho .mais{display:none}
  /* as três abas cabem inteiras na largura, em três colunas iguais, pra ninguém deixar de ver a terceira. O nome quebra em duas linhas e se apoia no traço. A tela que não está ativa sai da conta da altura */
  .caminho .abas{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:stretch;margin-bottom:28px}
  .caminho .aba{display:flex;align-items:flex-end;min-height:52px;padding:0 0 10px;font-size:17px;text-wrap:balance}
  .caminho .tela:not(.ativa){display:none}
}

@keyframes fase-carga{to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.fase-et::after{animation:none!important}}
@keyframes nav-sobe{from{opacity:0;transform:translateY(14px)}}
@media(prefers-reduced-motion:reduce){.nav,.topo.aberto .nav{transition:none}.topo.aberto .nav > *,.topo.mega-aberto .mega-col{animation:none}}
/* tela estreita */
@media(max-width:960px){
  /* menu aberto no celular: o megamenu resumido. Painel branco, as quatro frentes em cards cinza com o ícone azul e o nome, e os serviços logo abaixo. Sem a frase e sem a tela de cada frente */
  .nav{position:absolute;top:calc(100% + 8px);left:-1px;right:-1px;flex-direction:column;align-items:stretch;gap:0;max-height:calc(100svh - var(--topo-y) - var(--topo-h) - 24px);overflow:auto;overscroll-behavior:contain;
    padding:14px 22px 22px;border:1px solid #E8E8E8;border-radius:var(--bm-r3);background:#fff;color:#000;font-size:18px;
    /* abertura: o painel se revela num círculo que cresce a partir do botão do menu, e os itens sobem um depois do outro. Ao fechar, o círculo volta pro botão */
    --olho:calc(100% - 27px) -36px;visibility:hidden;clip-path:circle(0px at var(--olho));transition:clip-path .35s cubic-bezier(.5,0,.8,.4),visibility 0s .35s}
  .topo.aberto .nav{visibility:visible;clip-path:circle(960px at var(--olho));transition:clip-path .65s cubic-bezier(.45,0,.25,1)}
  .topo.aberto .nav > :is(a,button){animation:nav-sobe .5s cubic-bezier(.16,1,.3,1) calc(var(--n,0)*50ms + 220ms) both}
  .nav > :nth-child(3){--n:1}.nav > :nth-child(4){--n:2}.nav > :nth-child(5){--n:3}.nav > :nth-child(6){--n:4}.nav > :nth-child(7){--n:5}
  .topo.mega-aberto .mega-col{animation:nav-sobe .45s cubic-bezier(.16,1,.3,1) calc(var(--n,0)*50ms) both}
  .mega-col:nth-child(2){--n:1}.mega-col:nth-child(3){--n:2}.mega-col:nth-child(4){--n:3}
  .nav > a:not(.b),.nav-sol{justify-content:space-between;flex:none;min-height:50px}
  .nav .b{flex:none;height:52px;margin:14px 0 0;font-size:16px}
  /* no celular a busca é o primeiro item do menu aberto, com o campo sempre à vista e a lupa só de enfeite */
  .nav-busca{order:-1;flex:none;margin:4px 0 10px}
  .topo.aberto .nav > .nav-busca{animation:nav-sobe .5s cubic-bezier(.16,1,.3,1) 220ms both}
  .nav-lupa{position:absolute;left:6px;top:50%;margin:0;transform:translateY(-50%);color:var(--bm-n25);pointer-events:none}
  .nav-busca input{position:static;width:100%;height:50px;padding:0 18px 0 46px;transform:none;background:#F7F7F7;font-size:16px;opacity:1;visibility:visible;transition:none}
  .nav > :nth-child(8){--n:6}
  .mega{position:static;display:none;flex:none;grid-template-columns:1fr;grid-template-rows:none;gap:8px;max-height:none;overflow:visible;padding:4px 0 10px;border:0;border-radius:0;background:none;opacity:1;visibility:visible;transform:none}
  .topo.mega-aberto::after{display:none}
  .topo.mega-aberto .mega{display:grid}
  .mega-col{display:block;padding:14px 12px 6px;border-radius:var(--bm-r2);background:#F7F7F7}
  .mega-card{flex-direction:row;align-items:center;gap:10px;padding:0 4px;background:none}
  .mega-card :is(p,img,.mega-tela){display:none}
  .mega-tit{margin-top:0;font-size:24px}
  .mega ul{margin-top:6px}
  .mega li a{min-height:44px;padding:0 4px;font-size:15px}
  .mega li a:is(:hover,:focus-visible){background:none}
  .mega li .mega-ic{background:#fff}
  .abrir{display:block}
  .boldinho{right:16px;bottom:16px}
  .cabeca{flex-direction:column;align-items:flex-start}
  .cabeca p{text-align:left}
  .etapas{grid-template-columns:1fr;gap:40px}
  .jn-palco{grid-template-columns:minmax(0,1fr);margin-right:0}   /* minmax(0,…): sem o zero, a linha de código mais longa alarga a coluna e a janela estoura a tela */
  .janela{border-right:1px solid var(--jn-linha);border-radius:var(--bm-r2)}
  .jn-corpo{grid-template-columns:minmax(0,1fr)}
  .jn-campo{grid-template-columns:minmax(0,1fr);gap:4px;margin-top:12px}   /* rótulo em cima do campo, pra o valor caber inteiro */
  .jn-barra{overflow:hidden;white-space:nowrap}
  /* no celular a janela mostra só a parte do passo ativo. As três ocupam a mesma célula da grade, então a altura é sempre a da mais alta e a página não pula a cada troca */
  .jn-corpo > *{grid-area:1/1}
  .jn-codigo,.jn-registro{border:0}
  .janela[data-passo="1"] :is(.jn-codigo,.jn-registro),.janela[data-passo="2"] :is(.jn-brief,.jn-registro),.janela[data-passo="3"] :is(.jn-brief,.jn-codigo){opacity:0;visibility:hidden}
  .grade-frentes{grid-template-columns:1fr}
  .frente.custom{border-radius:var(--bm-r2) 120px 120px var(--bm-r2)}
  .abas{grid-template-columns:1fr;gap:16px}
  .trilha{grid-template-columns:repeat(2,1fr)}
  /* três passos no celular: o mesmo desenho das setas do computador, deitado de pé na margem esquerda (girado 90 graus). A evidência segue a regra do computador: os passos ficam a meia força, o apontado (ou tocado) acende e o brilho corre na seta dele.
     As linhas da grade repetem a proporção do desenho (24 / 38,5 / 37,5), pra cada seta acompanhar o passo dela, e o anel cai no vão antes do acompanhamento.
     A largura do desenho sai da altura da lista: 100cqh é a altura da caixa das setas, e 23,69% disso é a altura do desenho antes de girar */
  .passos-lista{grid-template-columns:1fr;grid-template-rows:24fr 38.5fr 37.5fr;gap:0}
  .passo,.passo:nth-child(n){margin-right:0;padding:0 0 32px 52px}
  .passo strong{margin-top:2px}
  .passo p{margin-top:10px}
  .passo:nth-child(3){padding-top:31%;padding-bottom:0}
  .passo:nth-child(n) p{max-width:none}
  .passos-setas{left:0;top:0;bottom:0;width:10px;container-type:size}
  .passos-setas svg{width:100cqh;transform-origin:0 0;transform:translateX(23.69cqh) rotate(90deg)}
  .fecho-quadro{grid-template-columns:1fr;margin-left:0}
  .fecho-marca{display:none}
  .fecho-card.empresa{padding-left:24px;border-radius:var(--bm-r3) 120px 120px var(--bm-r3)}
  .rodape-topo,.rodape-meio{flex-direction:column;align-items:flex-start}
  .rodape-mega-grade{grid-template-columns:repeat(2,1fr)}
  .rodape nav{row-gap:25px}   /* quando os links quebram em duas linhas, as áreas de toque de 44px não se sobrepõem */
  .rodape-sobre{text-align:left}
  .rodape-sobre ul{justify-content:flex-start}
  .case{flex-wrap:wrap}
  .case-nome{flex-basis:100%}
  .case-previa{display:none}
  .vidro{grid-template-columns:1fr;row-gap:40px;min-height:0}
  .grade-fluxo{grid-template-columns:minmax(0,1fr)}   /* minmax(0,…): sem o zero, a foto e os cards passavam da margem direita */
  .fluxo-foto{grid-row:auto;margin-bottom:18%}
  .fluxo-card{min-height:220px}
  .fluxo-card.volta{grid-column:auto}
  .fluxo-card.volta :is(h3,p){max-width:none}
  .barras{position:static;width:100%;height:120px;margin-top:24px}
  .hero .fundo{object-position:78% top;opacity:.55}
  /* revisão do celular (Gabriel, 08/10): área de toque de 44px no que era menor */
  .hero .b-link{padding:9px 0}
  .jn-passo button{min-height:44px}
  .aba{padding:12px 0}
  .rodape-contato ul a,.rodape-sobre ul a{display:inline-block;padding:13.5px 0}
  .rodape-sobre ul{gap:0 25px;margin-top:24px}
  .rodape-contato ul{gap:0;margin-top:20px}
  .rodape-fim{padding-right:72px;text-align:left}   /* a sobra à direita é o lugar do botão do Boldinho, que cobria o fim da linha */
  .hero .rot{position:static;margin-bottom:16px}
  .hero .titulo{display:flex;flex-direction:column-reverse;align-items:flex-start}
}

/* ───────── página Sites sob medida (layout-sites-sob-medida.html), do PDF do frame 182:103 do Figma, 07/10 ─────────
   Toda classe nova leva o prefixo ssm-, e o que ajusta peça de outra página vem escopado por .pg-ssm.
   Reaproveita sem mudar: o quadrado de ícone (.gads-ic), o painel do caminho do lead (.caminho) e o fecho (.gads-fecho).
   As medidas são as do desenho em 1920 de largura, e cada uma encolhe junto com a tela */
.pg-ssm .topo:not(.solido){background:var(--bm-azul);border-color:transparent}

/* 01 · dobra */
/* pedido do Gabriel em 07/10: a tela sobe (no desenho o topo dela ficava a 270px) e a copy alinha com o topo da tela, em vez de centrar na altura dela. A seção mantém a altura do desenho */
/* entrada das páginas de solução (Gabriel 21/10, aprovada na Sites sob medida e levada às 11 páginas de solução, classe .sol-entra na dobra). Nada passa na frente de nada.
   Os anéis se desenham como um traço (pathLength 1 no círculo), de dentro pra fora, o texto sobe saindo do desfoque como o da home,
   e a peça da direita entra deslizando pela borda direita (sol-desliza) */
@keyframes sol-traco{from{stroke-dashoffset:1}}
@keyframes sol-desliza-esq{from{transform:perspective(1600px) translateX(-45vw) rotateY(16deg)}to{transform:perspective(1600px) translateX(0) rotateY(0)}}
@keyframes sol-desliza{from{transform:perspective(1600px) translateX(45vw) rotateY(-16deg)}to{transform:perspective(1600px) translateX(0) rotateY(0)}}   /* terceira versão (Gabriel 21/10, a cortina não agradou): a peça entra pela borda direita, de onde ela já sai, inclinada como uma porta que fecha, e assenta reta. Fica opaca o tempo todo */
@media(prefers-reduced-motion:no-preference){
  .sol-entra .ssm-arcos circle{stroke-dasharray:1 1;transform-box:fill-box;transform-origin:center;rotate:180deg;animation:sol-traco 1.6s cubic-bezier(.65,0,.25,1) backwards}   /* o traço do círculo nasce às 3 horas, fora da tela: girado, ele começa pela esquerda e sobe pelo trecho que aparece */
  .sol-entra .ssm-arcos circle:nth-child(3){animation-delay:.1s}
  .sol-entra .ssm-arcos circle:nth-child(2){animation-delay:.25s}
  .sol-entra .ssm-arcos circle:nth-child(1){animation-delay:.4s}
  .sol-entra .ssm-hero-texto > *{animation:hm-linha 1s cubic-bezier(.2,.8,.3,1) backwards}
  .sol-entra .ssm-hero-texto > :nth-child(1){animation-delay:.15s}
  .sol-entra .ssm-hero-texto > :nth-child(2){animation-delay:.25s}
  .sol-entra .ssm-hero-texto > :nth-child(3){animation-delay:.4s}
  .sol-entra .ssm-hero-texto > :nth-child(4){animation-delay:.5s}
  .sol-entra :is(.ssm-hero-grade,.aut-hero-grade) > :not(.ssm-hero-texto){transform-origin:0 50%;animation:sol-desliza 1.4s cubic-bezier(.16,1,.3,1) .3s backwards}
  .sol-entra .aut-hero-grade > :not(.ssm-hero-texto){transform-origin:100% 50%;animation-name:sol-desliza-esq}   /* dobra espelhada (nota à esquerda): a peça vem pela borda esquerda */
}
.ssm-hero{background:#fff;color:#000;padding-top:clamp(120px,10.42vw,200px);padding-bottom:clamp(72px,11.56vw,222px)}
.ssm-arcos{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ssm-hero > :not(.ssm-arcos){position:relative}
.ssm-hero-grade{display:grid;grid-template-columns:51.6% 1fr;align-items:start}
.ssm-hero-texto{display:flex;flex-direction:column;align-items:flex-start;padding-top:clamp(0px,3.13vw,60px)}   /* a copy começa um pouco abaixo do topo da tela (ajuste do Gabriel, 07/10) */
.ssm-hero .rot{color:var(--bm-azul);margin-bottom:15px}
.ssm-h1{max-width:8.6em;color:var(--bm-azul);font:500 clamp(40px,3.75vw,72px)/1 var(--bm-fonte-titulo);text-transform:uppercase}
.ssm-h1 b{font-weight:700}
.ssm-lead{max-width:490px;margin:clamp(20px,1.56vw,30px) 0 clamp(24px,1.67vw,32px);font-weight:500;font-size:clamp(16px,1.04vw,20px);line-height:1.5}
.ssm-tela{width:144%;max-width:none;height:auto;border:1px solid #DEDEDE;border-radius:10px;box-shadow:0 24px 60px rgba(0,0,0,.12)}   /* a tela passa da coluna e sai pela borda direita, como no desenho */

/* 02 · o problema e a virada */
.ssm-limite{background:#F7F7F7;color:#000;padding-top:clamp(96px,10.42vw,200px);padding-bottom:clamp(96px,13.54vw,260px)}
.ssm-limite .tt{max-width:9.6em}
.ssm-limite .cabeca p{max-width:520px}
.ssm-duo{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ssm-duo li{display:grid;grid-template-columns:45px 1fr;column-gap:20px;align-content:center;min-height:clamp(170px,10vw,192px);padding:25px;border-radius:10px;background:var(--bm-azul);color:#fff}
.ssm-duo li + li{background:#000}
.ssm-duo li:first-child .gads-ic{background:#000}
/* com o mouse em qualquer um dos dois cards, eles trocam de cor entre si: o azul vira preto e o preto vira azul, e o quadrado do ícone acompanha (pedido do Gabriel, 07/10) */
.ssm-duo li,.ssm-duo .gads-ic{transition:background-color .3s cubic-bezier(.455,.03,.515,.955)}
@media(hover:hover) and (pointer:fine){
  .ssm-duo:has(li:hover) li:first-child{background:#000}
  .ssm-duo:has(li:hover) li + li{background:var(--bm-azul)}
  .ssm-duo:has(li:hover) li:first-child .gads-ic{background:var(--bm-azul)}
  .ssm-duo:has(li:hover) li + li .gads-ic{background:#000}
}
.ssm-duo h3{align-self:center;font:600 clamp(24px,1.67vw,32px)/1.1 var(--bm-fonte-titulo);text-transform:uppercase}
.ssm-duo p{grid-column:2;max-width:530px;margin-top:10px;font-size:14px;font-weight:500;line-height:20px}

/* 03 · o site inteiro: anel ao fundo e card de vidro por cima */
.ssm-inteiro{background:var(--bm-azul);color:#fff;padding-top:clamp(96px,15vw,288px);padding-bottom:clamp(96px,15vw,288px)}
.ssm-anel{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ssm-vidro{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;min-height:clamp(320px,23.96vw,460px);padding:40px clamp(24px,3.8vw,73px) 40px clamp(24px,3.44vw,66px);border:1px solid rgba(255,255,255,.22);border-radius:10px;background:rgba(22,57,190,.2);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px)}
.ssm-vidro .tt{max-width:6.6em}
.ssm-vidro div{justify-self:end;max-width:530px;text-align:right;line-height:25px}
.ssm-vidro p{font-weight:500}
.ssm-vidro p + p{margin-top:15px;font-weight:700}

/* transição entre a 03 e a 04 (pedido do Gabriel, 07/10, segunda versão: a primeira subia com o topo em arco e ele não quis borda arredondada).
   A faixa azul fica presa no lugar e recua: escurece e o card de vidro encolhe um pouco e sobe devagar, enquanto a preta sobe por cima com a borda reta.
   Quem dita o ritmo é a entrada da seção preta na tela (a linha do tempo --ssm-sobe), então o efeito anda e volta junto com a rolagem.
   Só em tela larga, em navegador que liga animação à rolagem, e para quem não pediu menos movimento. Fora disso as duas seções rolam normalmente.
   A altura da faixa azul é conta fechada (os dois respiros mais a altura mínima do card), e é ela que diz onde a faixa prende quando é mais alta que a janela */
@media(min-width:961px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()) and (timeline-scope:--a){
    .pg-ssm main{timeline-scope:--ssm-sobe}
    .ssm-inteiro{--ssm-h:calc(2*clamp(96px,15vw,288px) + clamp(320px,23.96vw,460px));position:sticky;top:min(0px,calc(100svh - var(--ssm-h)))}
    .ssm-inteiro::after{content:"";position:absolute;inset:0;background:#0D0D0D;opacity:0;pointer-events:none;animation:ssm-escurece linear both;animation-timeline:--ssm-sobe;animation-range:entry 0% entry 100%}
    .ssm-vidro{animation:ssm-recua linear both;animation-timeline:--ssm-sobe;animation-range:entry 0% entry 100%}
    .ssm-fases{z-index:1;view-timeline-name:--ssm-sobe}
  }
}
@keyframes ssm-escurece{to{opacity:.7}}
@keyframes ssm-recua{to{transform:translateY(-10vh) scale(.94)}}

/* 04 · seis etapas */
.ssm-fases{background:#0D0D0D;color:#fff;padding-top:clamp(96px,13.23vw,254px);padding-bottom:clamp(96px,13.54vw,260px)}
.ssm-fases .tt{max-width:11.7em}
.ssm-fases .cabeca p{max-width:540px}
.ssm-grade{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ssm-grade li{min-height:clamp(220px,14.06vw,270px);padding:25px;border:1px solid #222;border-radius:10px;background:#141414}
.ssm-grade h3{margin-top:18px;font:600 clamp(24px,1.67vw,32px)/1.1 var(--bm-fonte-titulo);text-transform:uppercase}
.ssm-grade p{max-width:305px;margin-top:clamp(24px,2.34vw,45px);font-size:14px;font-weight:500;line-height:20px}

/* 05 · para quem é, e o card do Site Rápido */
.ssm-opera{background:#fff;color:#000;padding-top:clamp(96px,13.23vw,254px);padding-bottom:clamp(0px,2.24vw,43px)}
.ssm-opera .tt{max-width:12.3em}
.ssm-opera .cabeca p{max-width:430px}
.ssm-pilulas{list-style:none;display:flex;flex-wrap:wrap;gap:16px;margin-bottom:clamp(32px,3.28vw,63px)}
.ssm-pilulas li{display:inline-flex;align-items:center;gap:8px;height:53px;padding:0 20px 0 16px;border:1.5px solid var(--bm-azul);border-radius:var(--bm-pill);font-weight:700;white-space:nowrap}
.ssm-pilulas svg{width:26px;height:26px}
/* o lado direito do card é um arco inteiro, e o notebook passa um pouco da borda */
.ssm-rapido{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:97.7%;min-height:clamp(380px,27.24vw,523px);padding:40px 50% 40px clamp(24px,4.58vw,88px);border-radius:10px 340px 340px 10px / 10px 50% 50% 10px;background:var(--bm-azul);color:#fff}
/* quando o card entra na tela, o azul corre da esquerda para a direita e o conteúdo aparece junto com ele (pedido do Gabriel, 07/10). O layout.js põe a classe "visto" uma vez só.
   As folgas negativas no recorte deixam o notebook passar da borda. Sem script ou com menos movimento pedido, o card já nasce inteiro */
@media(scripting:enabled) and (prefers-reduced-motion:no-preference){
  .ssm-rapido{clip-path:inset(-30% 100% -30% 0);transition:clip-path 1.1s cubic-bezier(.65,0,.35,1)}
  .ssm-rapido.visto{clip-path:inset(-30% -8% -30% 0)}
}
.ssm-rapido h2{max-width:8.7em;margin:18px 0 15px;font:600 clamp(36px,3.23vw,62px)/1.1 var(--bm-fonte-titulo);text-transform:uppercase}
.ssm-rapido p{max-width:440px;font-weight:500;line-height:25px}
.ssm-rapido .b{margin-top:clamp(24px,1.67vw,32px)}
.ssm-rapido-boneco{position:absolute;left:48.7%;top:20.65%;width:15.71%;max-width:none;height:auto;pointer-events:none}
.ssm-rapido-note{position:absolute;left:60.1%;top:2.9%;width:43.35%;max-width:none;height:auto;pointer-events:none}

/* 06 · painel do caminho do lead: só o corte do título muda */
.pg-ssm .caminho .tela:first-child .tt{max-width:8.3em}

/* 07 · cases */
.ssm-cases{background:#F7F7F7;color:#000;padding-top:clamp(96px,13.23vw,254px);padding-bottom:clamp(96px,15.3vw,294px)}
.ssm-cases .cabeca p{max-width:570px}
.ssm-cases-grade{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ssm-case{position:relative;display:block;aspect-ratio:709/402;overflow:hidden;border:1px solid #DEDEDE;border-radius:10px;background:#fff;color:#fff}
.ssm-case img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.ssm-case::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.78) 100%)}
.ssm-case-txt{position:absolute;z-index:1;left:clamp(16px,1.77vw,34px);right:clamp(16px,1.77vw,34px);bottom:clamp(16px,1.4vw,27px);display:grid;grid-template-columns:1fr auto;gap:16px;align-items:end}
.ssm-case h3{font:600 clamp(22px,1.46vw,28px)/1.1 var(--bm-fonte-titulo);text-transform:uppercase}
.ssm-case p{margin-top:6px;font-size:14px;font-weight:500;line-height:20px}
.ssm-case:focus-visible{outline:3px solid var(--bm-azul);outline-offset:3px}
.ssm-case img{-webkit-user-drag:none;user-select:none}
/* com mouse, o card mostra só a tela, e o degradê preto com o nome e a frase aparece quando o mouse passa ou quando o card recebe o foco do teclado (pedido do Gabriel, 07/10).
   No toque não existe "passar por cima", então lá as informações ficam sempre à vista */
@media(hover:hover) and (pointer:fine){
  .ssm-case::after,.ssm-case-txt{opacity:0;transition:opacity .35s cubic-bezier(.455,.03,.515,.955),transform .35s cubic-bezier(.455,.03,.515,.955)}
  .ssm-case-txt{transform:translateY(10px)}
  .ssm-case:is(:hover,:focus-visible)::after,.ssm-case:is(:hover,:focus-visible) .ssm-case-txt{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){.ssm-case-txt{transform:none!important}}
/* seletor dos dois modos de ver (carrossel e grade). O layout.js escreve o modo em data-modo na lista, e é só isso que muda o arranjo */
.ssm-modos{display:flex;gap:2px;width:max-content;margin:24px 0 0 auto;padding:4px;border-radius:var(--bm-pill);background:#fff}
.ssm-modos button{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:none;color:#000;cursor:var(--cur-clique,pointer);transition:background-color .2s,color .2s}
.ssm-modos button[aria-pressed=true]{background:#000;color:#fff}
.ssm-modos button:focus-visible{outline:3px solid var(--bm-azul);outline-offset:2px}
/* carrossel: os cards viram uma fila que anda de lado, um por vez, com o próximo aparecendo na borda. A fila vaza até a borda direita da página */
.ssm-cases-grade[data-modo=carrossel]{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-right:calc(var(--lat)*-1);padding-right:var(--lat);cursor:grab}
.ssm-cases-grade[data-modo=carrossel].arrasta{scroll-snap-type:none;cursor:grabbing}
.ssm-cases-grade[data-modo=carrossel] li{flex:0 0 min(62%,900px);scroll-snap-align:start}
@media(max-width:960px){.ssm-cases-grade[data-modo=carrossel] li{flex-basis:86%}}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .ssm-case img{transition:transform .6s cubic-bezier(.16,1,.3,1)}
  .ssm-case:hover img{transform:scale(1.03)}
}

@media(max-width:960px){
  .ssm-hero-grade,.ssm-duo,.ssm-vidro,.ssm-grade,.ssm-cases-grade{grid-template-columns:1fr}
  .ssm-hero-grade{gap:40px}
  .ssm-tela{width:100%}
  .ssm-arcos{opacity:.35}
  .ssm-vidro div{justify-self:start;text-align:left}
  .ssm-grade li{min-height:0}
  .ssm-rapido{width:100%;padding:40px 24px;border-radius:10px}
  .ssm-rapido-boneco{display:none}
  .ssm-rapido-note{position:static;width:100%;max-width:420px;margin-top:24px}
  .ssm-case{aspect-ratio:4/3}
}

/* ───────── página Secure definitiva (layout-secure-definitiva.html), do PDF que o Gabriel exportou do Figma em 07/10 ─────────
   Toda classe nova leva o prefixo scr- (o prefixo secure- é das páginas de estudo, layout-secure.html e layout-secure-v2.html).
   Reaproveita sem mudar: a dobra, o anel e o card de vidro da Sites sob medida (.ssm-), o quadrado de ícone (.gads-ic), o painel do caminho (.caminho) e o fecho (.gads-fecho).
   As medidas são as do desenho em 1920 de largura, e cada uma encolhe junto com a tela */
.pg-scr .topo:not(.solido){background:var(--bm-azul);border-color:transparent}

/* 01 · dobra: a copy começa 130px abaixo do topo da foto, como no desenho. A foto e a copy subiram juntas a pedido do Gabriel em 07/10 (a foto ficava a 284px do alto, agora 200px), e a seção mantém a altura */
.scr-hero{padding-top:clamp(120px,10.42vw,200px);padding-bottom:clamp(72px,17.08vw,328px)}
.scr-hero .ssm-hero-texto{padding-top:clamp(0px,4.17vw,80px)}   /* era 130px no desenho, o Gabriel pediu a copy mais alta em 07/10 */
.scr-foto{position:relative;width:79.2%;margin-left:15.6%}
.scr-foto img{width:100%;height:auto;border-radius:10px}
.scr-aviso{position:absolute;display:flex;align-items:center;gap:10px;border:1px solid #E4E4E4;border-radius:8px;background:#fff;color:#000;box-shadow:0 12px 30px rgba(0,0,0,.12);white-space:nowrap}
.scr-aviso b{font-weight:700}
.scr-aviso-site{left:-16.3%;top:8.3%;height:48px;padding:0 12px 0 14px;font-size:14px;letter-spacing:.03em}
.scr-noar{display:inline-flex;align-items:center;gap:6px;height:26px;margin-left:clamp(24px,5.2vw,100px);padding:0 10px;border-radius:var(--bm-pill);background:#E6F6EC;font-size:11px;font-weight:700}
.scr-noar::before{content:"";width:8px;height:8px;border-radius:50%;background:#1DB954}
/* card do alerta, com as medidas do PDF: 490 x 88, cinza claro com borda, sem sombra, ícone de contorno e duas linhas de texto */
.scr-aviso-alerta{left:17.75%;top:89.9%;gap:17px;min-height:clamp(72px,4.58vw,88px);padding:0 clamp(20px,1.98vw,38px) 0 clamp(18px,1.46vw,28px);border-color:#DEDEDE;border-radius:12px;background:#F4F4F4;box-shadow:none}
/* os dois cards entram um depois do outro (o do site vem da esquerda, o alerta sobe como notificação), depois flutuam de leve. A bolinha "No ar" pulsa */
@media(prefers-reduced-motion:no-preference){
  .scr-aviso{animation:scr-entra .7s cubic-bezier(.2,.9,.3,1.2) .5s backwards,scr-flutua 6s ease-in-out 1.2s infinite}
  .scr-aviso-site{--scr-de:-28px,0}
  .scr-aviso-alerta{--scr-de:0,36px;animation-delay:1.3s,2s;animation-duration:.7s,7.5s}
  .scr-noar::before{animation:scr-pulsa 2s ease-out infinite}
  .scr-aviso-alerta .iconify{animation:scr-toca 5s ease-in-out 2.2s infinite;transform-origin:50% 10%}
}
@keyframes scr-entra{from{opacity:0;transform:translate(var(--scr-de)) scale(.94)}}
@keyframes scr-flutua{50%{translate:0 -8px}}
@keyframes scr-pulsa{from{box-shadow:0 0 0 0 rgba(29,185,84,.55)}to{box-shadow:0 0 0 9px rgba(29,185,84,0)}}
@keyframes scr-toca{0%,12%,100%{transform:none}3%,9%{transform:rotate(-12deg)}6%{transform:rotate(12deg)}}
.scr-aviso-alerta .iconify{flex:none;color:#1DB954}
.scr-aviso-alerta b{display:block;color:#222;font-size:clamp(15px,.94vw,18px);line-height:1.2}
.scr-aviso-alerta small{display:block;margin-top:7px;color:#8F8F8F;font-size:clamp(13px,.83vw,16px);font-weight:500;line-height:1.2}

/* 02 · por que envelhece: mosaico de cinco cards */
.scr-porque{background:#F7F7F7;color:#000;padding-top:clamp(96px,12vw,230px);padding-bottom:clamp(96px,12vw,230px)}
.scr-mosaico{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.scr-par{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.scr-tese{display:flex;flex-direction:column;justify-content:space-between;gap:32px;min-height:clamp(380px,25.5vw,490px);padding:clamp(28px,2.55vw,49px);border-radius:10px;background:var(--bm-azul);color:#fff}
.scr-tese .tt{max-width:8.2em}
.scr-tese p{max-width:480px;font-weight:500;line-height:25px}
.scr-nota{padding:clamp(24px,2.4vw,46px) clamp(20px,1.77vw,34px);border-radius:10px;background:#D9D9D9}
.scr-nota .gads-ic{background:#000}
.scr-nota h3{margin-top:22px;font:600 clamp(24px,1.67vw,32px)/1.1 var(--bm-fonte-titulo);text-transform:uppercase}
.scr-nota p{max-width:340px;margin-top:12px;font-size:14px;font-weight:500;line-height:20px}
.scr-mosaico > .scr-nota{min-height:clamp(200px,12.76vw,245px)}
.scr-nota-preta{background:#000;color:#fff}
.scr-nota-preta .gads-ic{background:var(--bm-azul)}

/* ilustrações grandes e animadas dos cinco cards (pedido do Gabriel, 07/10, pela referência dos cards do Supabase). Tudo desenhado em código, nas cores da marca.
   Cada card vira a moldura que corta a sua ilustração, e o texto fica por cima dela */
.scr-tese,.scr-nota{position:relative;overflow:hidden}
:is(.scr-tese,.scr-nota) > :not(.scr-arte){position:relative;z-index:1}
.scr-arte{position:absolute;pointer-events:none;list-style:none}
/* escudo (card azul): o ícone grande dentro de três molduras que respiram, uma depois da outra */
.scr-arte-escudo{right:-6%;bottom:-14%;width:min(52%,360px);aspect-ratio:1;display:grid;place-items:center;color:#fff;opacity:.3}
.scr-arte-escudo i{position:absolute;inset:0;border:1.5px solid currentColor;border-radius:22%;animation:scr-respira 5s ease-in-out infinite}
.scr-arte-escudo i:nth-child(2){inset:9%;animation-delay:.5s}
.scr-arte-escudo i:nth-child(3){inset:18%;animation-delay:1s}
.scr-arte-escudo svg{width:46%;height:46%}
@keyframes scr-respira{50%{transform:scale(1.05);opacity:.45}}
/* radar (exposição contínua): três ondas que saem do centro sem parar */
.scr-arte-radar{left:50%;bottom:-30px;width:260px;height:260px;margin-left:-130px;border:1px solid rgba(0,0,0,.14);border-radius:50%;background:radial-gradient(circle,transparent 0 32%,rgba(0,0,0,.14) 32% calc(32% + 1px),transparent calc(32% + 1px) 66%,rgba(0,0,0,.14) 66% calc(66% + 1px),transparent calc(66% + 1px))}
.scr-arte-radar i{position:absolute;inset:0;border:2px solid var(--bm-azul);border-radius:50%;opacity:0;animation:scr-onda 3.6s linear infinite}
.scr-arte-radar i:nth-child(2){animation-delay:1.2s}
.scr-arte-radar i:nth-child(3){animation-delay:2.4s}
.scr-arte-radar b{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;background:var(--bm-azul)}
@keyframes scr-onda{from{transform:scale(.06);opacity:1}to{transform:scale(1);opacity:0}}
/* versões (tudo muda): fila de atualizações subindo sem parar. A lista vem duas vezes no HTML para a emenda não aparecer */
.scr-arte-versoes{left:0;right:0;bottom:0;height:46%;-webkit-mask-image:linear-gradient(transparent,#000 30%,#000 80%,transparent);mask-image:linear-gradient(transparent,#000 30%,#000 80%,transparent)}
.scr-arte-versoes ul{list-style:none;display:grid;gap:10px;padding:0 clamp(14px,1.25vw,24px);animation:scr-sobe 16s linear infinite}
.scr-arte-versoes li{display:flex;justify-content:space-between;gap:10px;padding:10px 14px;border:1px solid rgba(0,0,0,.12);border-radius:8px;background:#EDEDED;font-size:12px;font-weight:600;white-space:nowrap}
.scr-arte-versoes b{color:var(--bm-azul);font-weight:700}
@keyframes scr-sobe{to{transform:translateY(calc(-50% - 5px))}}
/* peças (quando para, tudo para): quatro peças que dependem do site, e a luz de cada uma passa de verde a tangerina em sequência */
.scr-arte-pecas{right:clamp(20px,2.4vw,46px);top:50%;display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(40%,280px);transform:translateY(-50%)}
.scr-arte-pecas li{display:flex;align-items:center;gap:8px;padding:12px 14px;border:1px solid rgba(0,0,0,.12);border-radius:8px;background:#EDEDED;font-size:13px;font-weight:700}
.scr-arte-pecas li::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:#1DB954;animation:scr-para 6s infinite}
.scr-arte-pecas li:nth-child(2)::before{animation-delay:.5s}
.scr-arte-pecas li:nth-child(3)::before{animation-delay:1s}
.scr-arte-pecas li:nth-child(4)::before{animation-delay:1.5s}
@keyframes scr-para{0%,30%{background:#1DB954}38%,82%{background:var(--bm-tangerina)}90%,100%{background:#1DB954}}
/* semana (acompanhamento contínuo): os sete dias acendem um a um, e a semana recomeça */
.scr-arte-rotina{left:56%;top:50%;display:grid;gap:8px;width:min(36%,300px);transform:translateY(-50%)}   /* três passos da copy: verifica, corrige, responde */
.scr-arte-rotina::before{content:"";position:absolute;left:27px;top:24px;bottom:24px;width:1px;background:#333}
.scr-arte-rotina li{position:relative;display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid #262626;border-radius:8px;background:#0D0D0D;color:#fff;font-size:13px;font-weight:700;animation:scr-passo 6s backwards infinite}
.scr-arte-rotina li::before{content:"";flex:none;width:26px;height:26px;border-radius:50%;background:var(--bm-azul) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M8 13.5l3.5 3.5L18 10' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.scr-arte-rotina li:nth-child(2){animation-delay:.7s}
.scr-arte-rotina li:nth-child(3){animation-delay:1.4s}
@keyframes scr-passo{0%{opacity:1}8%,18%{opacity:.25}28%,100%{opacity:1}}   /* parado mostra os três feitos, no hover eles se refazem em sequência */
/* com mouse, a ilustração fica parada e só anda enquanto o mouse está no card dela (pedido do Gabriel, 07/10). Ao sair, ela para onde estava. No toque não existe passar o mouse, então lá elas andam sempre */
@media(hover:hover) and (pointer:fine){
  .scr-arte *,.scr-arte *::before{animation-play-state:paused!important}   /* !important: o atalho animation de cada arte recoloca running */
  :is(.scr-tese,.scr-nota):hover .scr-arte *,:is(.scr-tese,.scr-nota):hover .scr-arte *::before{animation-play-state:running!important}
}
@media(prefers-reduced-motion:reduce){.scr-arte,.scr-arte *,.scr-arte *::before{animation:none!important}.scr-arte-radar i{opacity:.5;transform:scale(.5)}}
@media(max-width:960px){.scr-arte-pecas,.scr-arte-rotina{position:static;transform:none;width:auto;margin-top:22px}.scr-par .scr-nota{padding-bottom:200px}}

/* 03 · três níveis */
/* transição 2 → 3: a seção clara fica parada, escurece e recua enquanto a escura sobe por cima (mesma da Sites sob medida).
   A altura da seção vem do layout.js em --scr-h, e sem ela a seção rola normal */
@media(min-width:961px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()) and (timeline-scope:--a){
    .pg-scr main{timeline-scope:--scr-sobe}
    .scr-porque{position:sticky;top:min(0px,calc(100svh - var(--scr-h,99999px)))}
    .scr-porque::after{content:"";position:absolute;inset:0;z-index:3;background:#0D0D0D;opacity:0;pointer-events:none;animation:ssm-escurece linear both;animation-timeline:--scr-sobe;animation-range:entry 0% entry 100%}
    .scr-mosaico{animation:scr-recua linear both;animation-timeline:--scr-sobe;animation-range:entry 0% entry 100%}
    .scr-niveis{z-index:1;view-timeline-name:--scr-sobe}
  }
}
@keyframes scr-recua{to{transform:translateY(-8vh) scale(.95)}}
.scr-niveis{background:#0D0D0D;color:#fff;padding-top:clamp(96px,13.23vw,254px);padding-bottom:clamp(96px,13.75vw,264px)}
.scr-niveis .tt{max-width:8em}
.scr-niveis .cabeca p{max-width:470px}
.scr-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.scr-nivel{padding:28px 0}
.scr-nivel h3{font:600 clamp(30px,2.08vw,40px)/1 var(--bm-fonte-titulo);text-transform:uppercase}
.scr-nivel .rot{margin:14px 0 18px;height:28px;border-color:var(--bm-azul);background:var(--bm-azul)}
.scr-nivel ul{list-style:none}
.scr-nivel li{display:flex;align-items:center;gap:14px;min-height:43px;padding:8px 0;border-bottom:1px solid #2A2A2A;font-weight:500;line-height:1.3}
.scr-nivel li svg{flex:none;width:20px;height:20px;color:#4C6FF0}
.scr-nivel-full{min-height:clamp(320px,23.2vw,446px);padding:28px;border-radius:10px;background:var(--bm-azul)}
.scr-nivel-full .rot{border-color:#fff;background:none}
.scr-nivel-full li{border-color:rgba(255,255,255,.2)}
.scr-nivel-full li svg{color:#fff}
/* a faixa do pé: reta à esquerda e em pílula à direita */
.scr-indica{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:clamp(110px,7.5vw,144px);margin-top:clamp(32px,2.9vw,56px);padding:24px clamp(24px,3.3vw,64px) 24px clamp(20px,2.14vw,41px);border:1px solid #222;border-radius:10px 999px 999px 10px;background:#141414}
@media(scripting:enabled) and (prefers-reduced-motion:no-preference){.scr-indica{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.65,0,.35,1)}.scr-indica.visto{clip-path:inset(0)}}
.scr-indica p{max-width:19em;font:500 clamp(22px,1.67vw,32px)/1.1 var(--bm-fonte-titulo);text-transform:uppercase}
.scr-indica b{font-weight:700}

/* 04 · checklist em sete passos que abrem */
.scr-checklist{background:#fff;color:#000;padding-top:clamp(96px,13.23vw,254px);padding-bottom:clamp(96px,13.54vw,260px)}
.scr-checklist .tt{max-width:10.2em}
.scr-checklist .cabeca p{max-width:440px}
.scr-passos{display:grid;gap:16px}
.scr-passo{border:1px solid #E4E4E4;border-radius:8px;background:#F5F5F5}
.scr-passo summary{display:grid;grid-template-columns:45px 1fr auto 32px;align-items:center;gap:14px 26px;min-height:88px;padding:16px 32px 16px 24px;list-style:none;cursor:var(--cur-clique,pointer)}
.scr-passo summary::-webkit-details-marker{display:none}
.scr-passo summary b{display:grid;place-items:center;width:45px;height:45px;border-radius:8px;background:var(--bm-azul);color:#fff;font:600 28px/1 var(--bm-fonte-titulo)}
.scr-passo h3{font:600 clamp(22px,1.67vw,32px)/1.1 var(--bm-fonte-titulo);text-transform:uppercase}
.scr-passo .rot{height:28px;color:var(--bm-azul);margin-right:-14px}
.scr-seta{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--bm-azul);border-radius:50%;color:var(--bm-azul);transition:transform .25s}
.scr-passo[open] .scr-seta{transform:rotate(180deg)}
/* abre e fecha deslizando: a altura vai de zero ao tamanho do texto, e o texto aparece junto. Navegador sem suporte abre de uma vez, como antes */
@media(prefers-reduced-motion:no-preference){
  .scr-passos{interpolate-size:allow-keywords}
  .scr-passo::details-content{block-size:0;overflow:clip;opacity:0;transition:block-size .45s cubic-bezier(.65,0,.35,1),opacity .35s ease,content-visibility .45s allow-discrete}
  .scr-passo[open]::details-content{block-size:auto;opacity:1}
  .scr-seta{transition-duration:.45s;transition-timing-function:cubic-bezier(.65,0,.35,1)}
}
.scr-passo summary:focus-visible{outline:3px solid var(--bm-azul);outline-offset:2px;border-radius:8px}
.scr-passo > p{max-width:1000px;transform:translateY(-8px);padding:0 32px 18px 95px;font-weight:500;line-height:25px}
.scr-remate{margin-top:clamp(24px,2.2vw,42px);color:var(--bm-azul);font:600 clamp(28px,2.08vw,40px)/1.1 var(--bm-fonte-titulo);text-transform:uppercase}

/* 05 · sua parte e nossa parte */
.scr-sempre{background:var(--bm-azul);color:#fff;padding-top:clamp(96px,13.23vw,254px);padding-bottom:clamp(96px,13.6vw,261px)}
.scr-sempre .tt{max-width:7em}
.scr-sempre .cabeca p{max-width:650px}
.scr-partes{display:grid;grid-template-columns:1fr 1fr;gap:24px}
/* os enfeites dos dois cards (as duas barras no azul, os dois arcos no preto) são peças próprias, para o degradê poder andar */
.scr-parte{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;min-height:clamp(240px,15.94vw,306px);padding:clamp(24px,2.2vw,42px);border-radius:10px;background:#1639BE}
.scr-parte > *{position:relative;z-index:1}
.scr-parte::before,.scr-parte::after{content:"";position:absolute;pointer-events:none}
.scr-parte:not(.scr-parte-nossa)::before,.scr-parte:not(.scr-parte-nossa)::after{right:0;height:32px;background:linear-gradient(90deg,#0A2BB5,#2449DE 25%,#0A2BB5 50%,#2449DE 75%,#0A2BB5) 0 0/200% 100%;animation:scr-corre 9s linear infinite}
.scr-parte:not(.scr-parte-nossa)::before{top:42px;width:54%}
.scr-parte:not(.scr-parte-nossa)::after{top:86px;width:49%;animation-duration:12s;animation-direction:reverse}
@keyframes scr-corre{to{background-position:100% 0}}
.scr-parte .rot{margin-bottom:auto}
.scr-parte h3{margin-top:24px;font:600 clamp(30px,2.08vw,40px)/1.1 var(--bm-fonte-titulo);text-transform:uppercase}
.scr-parte p{max-width:480px;margin-top:14px;font-weight:500;line-height:25px}
.scr-parte-nossa{background:#0D0D0D}
.scr-parte-nossa::before,.scr-parte-nossa::after{left:86%;top:118%;width:74%;aspect-ratio:1;margin:-37% 0 0 -37%;border-radius:50%;animation:scr-gira 14s linear infinite}
.scr-parte-nossa::before{background:conic-gradient(#0B1C66,#1B41D1 50%,#0B1C66);-webkit-mask:radial-gradient(closest-side,transparent 83.5%,#000 83.5% 100%,transparent 100%);mask:radial-gradient(closest-side,transparent 83.5%,#000 83.5% 100%,transparent 100%)}
.scr-parte-nossa::after{background:conic-gradient(#1B41D1,#4468F2 25%,#1B41D1 50%,#0B1C66 75%,#1B41D1);-webkit-mask:radial-gradient(closest-side,transparent 56.5%,#000 56.5% 70%,transparent 70%);mask:radial-gradient(closest-side,transparent 56.5%,#000 56.5% 70%,transparent 70%);animation-duration:10s;animation-direction:reverse}
@keyframes scr-gira{to{rotate:1turn}}
@media(prefers-reduced-motion:reduce){.scr-parte::before,.scr-parte::after{animation:none}}

/* 06 e 07 · peças emprestadas: o corte do título do painel, e a faixa do card de vidro sem a transição que ela tem na Sites sob medida */
.pg-scr .caminho .tela:first-child .tt{max-width:7em}
/* fundo claro e cartão de vidro escuro, como no desenho. A seção reaproveita a peça da Sites sob medida, então desliga o escurecer e o recuar de lá */
.scr-prova.ssm-inteiro{position:relative;top:auto;background:#E4E4E4}
.scr-prova.ssm-inteiro::after{content:none}
.scr-prova .ssm-vidro{border-color:transparent;background:rgba(0,0,0,.65);animation:none}
.scr-prova .ssm-vidro .tt{max-width:7.9em}

@media(max-width:960px){
  .scr-foto{width:100%;margin-left:0}
  .scr-aviso-site{left:12px}
  .scr-aviso-alerta{left:12px;right:12px;top:auto;bottom:-28px;white-space:normal;padding-right:18px}
  .scr-mosaico,.scr-trio,.scr-partes{grid-template-columns:1fr}
  .scr-tese{min-height:0}
  .scr-nivel-full{min-height:0}
  .scr-indica{flex-direction:column;align-items:flex-start;border-radius:10px}
  .scr-passo summary{grid-template-columns:45px 1fr 32px;padding:16px}
  .scr-passo .rot{grid-column:2/-1;grid-row:2;justify-self:start;margin:0;white-space:normal;height:auto;padding:6px 13px}
  .scr-passo > p{padding:0 16px 14px}
}
@media(max-width:560px){.scr-par{grid-template-columns:1fr}}

/* ============ página Automação de processos (layout-automacao-de-processos.html) ============
   Montada do PDF do Figma em 07/10. Classes aut-. O hero usa a peça ssm-hero, os itens que abrem usam a peça scr-passo. */
.pg-aut .topo:not(.solido){background:var(--bm-azul);border-color:transparent}

/* 01 hero espelhado: imagem à esquerda, copy à direita */
.aut-hero{padding-top:clamp(110px,10.26vw,197px);padding-bottom:24px}   /* tudo 70px mais alto que no desenho (ajuste do Gabriel, 07/10). Os arcos são presos ao pé da seção, então sobem junto */
.aut-hero-grade{position:relative;display:grid;grid-template-columns:56.9% 1fr;align-items:start}
/* notebook montado em HTML (Gabriel, 15/10): ocupa o mesmo quadrado da antiga imagem img/aut-notebook.png (1500px de lado) e cada peça é medida nela,
   em --u (1px da imagem). A tela tem as medidas de lá (169,204 com 1161x777), e os textos e a foto dentro dela seguem o recorte da tela original */
.aut-note{--u:calc(100cqw / 1500);position:relative;width:96.1%;margin-left:-3.2%;aspect-ratio:1;container-type:inline-size}
.aut-note :is(.an-tampa,.an-base,.an-tela,.an-tela *){position:absolute}
.an-tampa{left:calc(var(--u)*142);top:calc(var(--u)*157);width:calc(var(--u)*1217);height:calc(var(--u)*856);border-radius:calc(var(--u)*40) calc(var(--u)*40) calc(var(--u)*8) calc(var(--u)*8);
  background:#141518;box-shadow:inset 0 0 0 calc(var(--u)*3) #3B3D43,inset 0 0 0 calc(var(--u)*6) #0C0C0E}
.an-base{left:calc(var(--u)*42);top:calc(var(--u)*1011);width:calc(var(--u)*1419);height:calc(var(--u)*42);border-radius:calc(var(--u)*3) calc(var(--u)*3) calc(var(--u)*60) calc(var(--u)*60) / calc(var(--u)*3) calc(var(--u)*3) calc(var(--u)*34) calc(var(--u)*34);
  background:linear-gradient(#5A5D64,#2C2E33 22%,#1B1C20 70%,#0E0E10);box-shadow:0 calc(var(--u)*24) calc(var(--u)*40) rgba(0,0,0,.18)}
.an-base::before{content:"";position:absolute;left:50%;top:0;width:calc(var(--u)*230);height:calc(var(--u)*12);translate:-50% 0;border-radius:0 0 calc(var(--u)*14) calc(var(--u)*14);background:linear-gradient(#0E0E10,#24262B)}
.an-tela{left:calc(var(--u)*169);top:calc(var(--u)*204);width:calc(var(--u)*1161);height:calc(var(--u)*777);overflow:hidden;border-radius:calc(var(--u)*6) calc(var(--u)*6) 0 0;
  font-family:'Plus Jakarta Sans',sans-serif;color:#12372C;line-height:1.2;text-align:left;
  background:radial-gradient(circle at calc(var(--u)*1060) calc(var(--u)*300),#FDFDFD 0 calc(var(--u)*300),transparent 0 calc(var(--u)*560),#FDFDFD calc(var(--u)*640)),
    repeating-radial-gradient(circle at calc(var(--u)*1060) calc(var(--u)*300),#FDFDFD 0 calc(var(--u)*34),#F6F6F6 0 calc(var(--u)*46)),#FDFDFD}
.an-entalhe{left:calc(var(--u)*512);top:0;width:calc(var(--u)*136);height:calc(var(--u)*12);border-radius:0 0 calc(var(--u)*10) calc(var(--u)*10);background:#0C0C0E;z-index:1}
.an-topo{left:calc(var(--u)*160);right:calc(var(--u)*160);top:calc(var(--u)*15);display:flex;align-items:center;justify-content:space-between;height:calc(var(--u)*34)}
.an-tela .an-topo *{position:static}
.an-topo b{display:flex;align-items:center;gap:calc(var(--u)*8);font-size:calc(var(--u)*19);font-weight:700;color:#17B3AA}
.an-topo b i{width:calc(var(--u)*34);height:calc(var(--u)*34);border-radius:50%;background:radial-gradient(circle at 30% 30%,#D8FAF6,#6FE0D6 45%,#17B3AA)}
.an-menu{display:flex;gap:calc(var(--u)*53);font-size:calc(var(--u)*12.5);font-weight:700}
.an-menu .on{color:#17B3AA}
.an-tt{left:calc(var(--u)*160);top:calc(var(--u)*107);font-size:calc(var(--u)*35.5);line-height:calc(var(--u)*43)}
.an-tela .an-tt span{position:relative;display:block;white-space:nowrap}
.an-bt{left:calc(var(--u)*161);top:calc(var(--u)*253);width:calc(var(--u)*178);height:calc(var(--u)*38);display:grid;place-items:center;border-radius:calc(var(--u)*6);background:#17BDB4;color:#fff;font-size:calc(var(--u)*11.5);font-weight:700}
.an-seta{left:calc(var(--u)*945);top:calc(var(--u)*242);width:calc(var(--u)*40);height:calc(var(--u)*40);display:grid;place-items:center;border-radius:50%;background:#CDF22C;font-size:calc(var(--u)*15)}
.an-tela .an-seta .iconify,.an-tela .an-card *{position:static}
.an-foto{left:calc(var(--u)*161);top:calc(var(--u)*329);width:calc(var(--u)*823);height:calc(var(--u)*352)}
.an-foto img{inset:0;width:100%;height:100%;border-radius:calc(var(--u)*8)}
.an-card{left:calc(var(--u)*408);top:calc(var(--u)*234);width:calc(var(--u)*350);height:calc(var(--u)*172);padding:calc(var(--u)*14) calc(var(--u)*24);border-radius:calc(var(--u)*4);background:#D0F52E;color:#0E3B2C}
.an-card b{display:block;height:calc(var(--u)*48);font:800 calc(var(--u)*58)/1 Georgia,serif}
.an-card p{font-size:calc(var(--u)*14);line-height:calc(var(--u)*21.5);font-weight:500}
.an-card small{display:block;margin-top:calc(var(--u)*12);font-size:calc(var(--u)*11);font-weight:700}
.an-rot{left:calc(var(--u)*161);top:calc(var(--u)*715);font-size:calc(var(--u)*12);font-weight:600;color:#17B3AA}
.an-sub{left:calc(var(--u)*161);top:calc(var(--u)*736);font-size:calc(var(--u)*25);line-height:calc(var(--u)*31)}
/* entrada em três tempos (Gabriel, 15/10): 1) a tampa (moldura e tela juntas, .an-lid) abre girando na dobradiça, que é o topo da base (y 1011), passando um pouco do ponto e voltando;
   2) a tela liga saindo do desfoque, como o cartão do celular do recent.design "mobile wallet credentials landing"; 3) os textos do site sobem um a um (--d é a ordem).
   Enquanto a tela não liga, aparece o fundo preto da moldura, como um visor desligado */
.an-lid{position:absolute;inset:0;transform-origin:50% calc(var(--u)*1011)}
@media(prefers-reduced-motion:no-preference){
  .aut-note{perspective:2600px;perspective-origin:50% 67.4%}   /* olho na altura da dobradiça: assim a tampa inclinada nunca é desenhada abaixo dela, por cima da base (ajuste do Gabriel, 15/10) */
  .an-lid{animation:aut-abre 1.3s .15s cubic-bezier(.3,1.25,.5,1) both}
  .an-tela{animation:aut-liga .9s 1.25s cubic-bezier(.2,.8,.2,1) both}
  .an-sobe{animation:aut-sobe .7s calc(1.9s + var(--d) * .1s) cubic-bezier(.2,.8,.2,1) both}
}
@keyframes aut-abre{0%,10%{rotate:x -88deg}}
@keyframes aut-liga{from{opacity:0;filter:blur(14px);scale:1.04}}
@keyframes aut-sobe{from{opacity:0;filter:blur(6px);translate:0 calc(var(--u)*24)}}
.aut-hero .ssm-hero-texto{padding-top:clamp(0px,4.9vw,94px)}
.aut-hero .ssm-h1{max-width:7.3em}
.aut-hero .ssm-lead{max-width:410px}

/* 02 faixa azul */
.aut-custo{background:var(--bm-azul);color:#fff;padding-top:clamp(80px,10.42vw,200px);padding-bottom:clamp(96px,13.54vw,260px)}
.aut-conta{display:grid;grid-template-columns:47.8% 19.2% 1fr;align-items:center;min-height:clamp(280px,20.36vw,391px);padding:40px clamp(24px,3.96vw,76px);border-radius:10px;background:#000}
.aut-conta .tt{max-width:7.6em}
.aut-conta div{min-height:150px;padding-right:16px}
.aut-conta div p{max-width:215px}
.aut-conta div + div p{max-width:280px}
.aut-conta div + div{padding-left:clamp(16px,4vw,77px);border-left:1px solid #1B41D1}
.aut-conta h3{font:600 clamp(22px,1.46vw,28px)/1.1 var(--bm-fonte-titulo);text-transform:uppercase}
.aut-conta p{margin-top:14px;font-weight:500;line-height:25px}
.aut-maquina{position:relative;overflow:hidden;display:flex;align-items:center;min-height:clamp(110px,8.54vw,164px);margin-top:24px;padding:24px clamp(24px,3.96vw,76px);border-radius:10px 999px 999px 10px;background:#1639BE}
@media(scripting:enabled) and (prefers-reduced-motion:no-preference){.aut-maquina{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.65,0,.35,1)}.aut-maquina.visto{clip-path:inset(0)}}
.aut-maquina span{position:relative;z-index:1;max-width:21em;font:600 clamp(22px,1.67vw,32px)/1.1 var(--bm-fonte-titulo);text-transform:uppercase}
.aut-maquina::before,.aut-maquina::after{content:"";position:absolute;background:linear-gradient(90deg,#0A2BB5,#2449DE 25%,#0A2BB5 50%,#2449DE 75%,#0A2BB5) 0 0/200% 100%;animation:scr-corre 9s linear infinite}
.aut-maquina::before{left:54.5%;right:0;top:24%;height:22%}
.aut-maquina::after{left:58.4%;right:0;top:54%;height:23%;animation-duration:12s;animation-direction:reverse}
@media(prefers-reduced-motion:reduce){.aut-maquina::before,.aut-maquina::after{animation:none}}

/* 03 três entregas */
.aut-entrega{background:#fff;color:#000;padding-top:clamp(96px,13.23vw,254px);padding-bottom:clamp(96px,13.65vw,262px)}
.aut-entrega .tt{max-width:11em}
.aut-entrega .cabeca p{max-width:440px}
.aut-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;list-style:none}
.aut-trio li{display:grid;grid-template-columns:45px 1fr;gap:14px;align-items:start;min-height:clamp(220px,13.9vw,267px);padding:24px;border:1px solid #E4E4E4;border-radius:8px;background:#F5F5F5}
.aut-trio .rot{color:var(--bm-azul)}
.aut-trio h3{max-width:6.8em;margin-top:10px;font:600 clamp(24px,1.67vw,32px)/1.1 var(--bm-fonte-titulo);text-transform:uppercase}
.aut-trio p{max-width:290px;margin-top:clamp(16px,2.1vw,40px);font-weight:500;line-height:25px}

/* entrada em sequência quando a lista aparece, e no mouse o card sobe, clareia e o ícone faz um gesto ligado ao que ele diz */
.aut-trio li{transition:transform .5s cubic-bezier(.2,.8,.3,1),background-color .35s,border-color .35s,box-shadow .5s}
@media(scripting:enabled) and (prefers-reduced-motion:no-preference){
  .aut-trio li{opacity:0;translate:0 32px;transition:opacity .7s ease,translate .7s cubic-bezier(.2,.8,.3,1),transform .5s cubic-bezier(.2,.8,.3,1),background-color .35s,border-color .35s,box-shadow .5s}
  .aut-trio.visto li{opacity:1;translate:none}
  .aut-trio.visto li:nth-child(2){transition-delay:.14s,.14s,0s,0s,0s,0s}
  .aut-trio.visto li:nth-child(3){transition-delay:.28s,.28s,0s,0s,0s,0s}
}
@media(hover:hover) and (pointer:fine){
  .aut-trio li:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.06)}   /* sem trocar cor nem borda, e subida curta (ajuste do Gabriel, 07/10) */
}

/* 04 quatro passos no escuro. Os três arcos do fundo são degradês, com centro em 62,5% da largura no pé da seção */
.aut-processo{color:#fff;padding-top:clamp(96px,13.23vw,254px);padding-bottom:clamp(96px,13.5vw,260px);
  background:radial-gradient(circle at 62.5% 100%,transparent 0 16.8vw,#141414 16.8vw 21.56vw,transparent 21.56vw 26.4vw,#141414 26.4vw 31.15vw,transparent 31.15vw 35.6vw,#141414 35.6vw 40.36vw,transparent 40.36vw),#0D0D0D}
.aut-processo .tt{max-width:10.5em}
.aut-processo .cabeca p{max-width:480px}
.aut-passos{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;list-style:none}
.aut-passos h3{max-width:8.5em;margin-top:22px;font:600 clamp(22px,1.46vw,28px)/1.1 var(--bm-fonte-titulo);text-transform:uppercase}
.aut-passos p{max-width:290px;margin-top:14px;font-weight:500;line-height:25px}

/* 05 foto e lista */
.aut-time{display:grid;grid-template-columns:40.7% 1fr;gap:8.5%;align-items:center;background:#fff;color:#000;padding-top:clamp(96px,13.5vw,260px);padding-bottom:clamp(48px,5vw,96px)}
.aut-time-foto{width:100%;height:auto;border-radius:10px}
.aut-time .tt{max-width:7.9em}
.aut-time-texto > p{max-width:590px;margin-top:20px;font-weight:500;line-height:25px}
.aut-time ul{list-style:none;margin:28px 0 24px}
.aut-time li{display:flex;align-items:center;gap:12px;min-height:40px;font-weight:500}
.aut-time li svg{flex:none;width:20px;height:20px;color:var(--bm-azul)}
.aut-time-texto > .aut-time-fecho{max-width:25em;color:var(--bm-azul);font:600 clamp(20px,1.46vw,28px)/1.15 var(--bm-fonte-titulo);text-transform:uppercase}

/* 07 cases: tela à esquerda, itens que abrem à direita. O item aberto fica azul */
.aut-cases{background:#F7F7F7;color:#000;padding-top:clamp(96px,12.55vw,241px);padding-bottom:clamp(96px,13.5vw,260px)}
.aut-cases .cabeca p{max-width:590px}
.aut-cases-grade{display:grid;grid-template-columns:49% 1fr;gap:5%;align-items:start}
/* tela do portal de cotação em HTML. Tudo dentro dela é medido em em, e o em acompanha a largura da tela (cqw), então ela encolhe e cresce inteira como uma imagem */
.aut-tela{container-type:inline-size;border:1px solid #E4E4E4;border-radius:8px;background:#fff;overflow:hidden;color:#1F2A37;--fer:#0B84F3}
.aut-tela-in{font-size:max(7px,1.78cqw);line-height:1.3;font-weight:500}
.aut-tela header{display:flex;align-items:center;gap:1.2em;height:4.6em;padding:0 2.2em;background:#F5F5F5}
.aut-tela header img{height:2.9em;width:auto}
.aut-tela header small{padding-left:1.2em;border-left:1px solid #D9D9D9;color:#9AA3AE;font-size:.62em;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.aut-tela header i{margin-left:auto;width:2.2em;height:2.2em;border-radius:50%;background:#E1E5EA}
.aut-tela-corpo{padding:2.4em 2.2em 2.8em}
.aut-tela-tt{display:block;font-size:1.5em;font-weight:700}
.aut-tela-etapas{display:flex;gap:1.6em;margin:1.2em 0 1.6em;list-style:none;color:#9AA3AE;font-size:.82em;font-weight:700}
.aut-tela-etapas li{display:flex;align-items:center;gap:.6em;flex:1;white-space:nowrap}
.aut-tela-etapas li::after{content:"";flex:1;height:1px;background:#E4E7EB}
.aut-tela-etapas li:last-child::after{content:none}
.aut-tela-etapas b{display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;background:#E9ECF0;color:#6B7684}
.aut-tela-etapas .on{color:var(--fer)}
.aut-tela-etapas .on b{background:var(--fer);color:#fff}
.aut-tela-cols{display:grid;grid-template-columns:1fr 34%;gap:1.4em;align-items:start}
.aut-tela-card{padding:1.6em;border:1px solid #E4E7EB;border-radius:.8em;background:#fff}
.aut-tela-card > b{display:block;margin-bottom:.4em;font-size:1.05em;font-weight:700}
.aut-tela label{display:block;margin:1.1em 0 .5em;color:#6B7684;font-size:.82em;font-weight:700}
.aut-tela-campo{display:flex;align-items:center;height:2.9em;padding:0 1em;border:1px solid #D5DAE0;border-radius:.5em;font-size:.86em;white-space:nowrap;overflow:hidden}
.aut-tela-chips{display:flex;flex-wrap:wrap;gap:.5em}
.aut-tela-chips span{padding:.45em 1em;border:1px solid #D5DAE0;border-radius:99px;font-size:.78em;font-weight:700;transition:background-color .3s,color .3s,border-color .3s}
.aut-tela-chips .on{border-color:var(--fer);background:var(--fer);color:#fff}
.aut-tela-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:.9em}
.aut-tela-botao{display:flex;align-items:center;justify-content:center;gap:.6em;width:max-content;margin:1.6em 0 0 auto;height:2.9em;padding:0 1.5em;border-radius:99px;background:var(--fer);color:#fff;font-size:.86em;font-weight:700}
.aut-tela-resumo{background:#F8F9FA}
.aut-tela-resumo ul{list-style:none;margin-top:.8em}
.aut-tela-resumo li{display:flex;justify-content:space-between;gap:1em;padding:.55em 0;border-bottom:1px solid #E9ECF0;font-size:.82em}
.aut-tela-resumo li span{color:#6B7684}
.aut-tela-resumo li b{font-weight:700;text-align:right}
.aut-tela-total{display:flex;align-items:center;justify-content:space-between;gap:1em;margin-top:1.2em;font-size:.9em;font-weight:700}
.aut-tela-total i{width:42%;height:.9em;border-radius:99px;background:linear-gradient(90deg,var(--fer),#7CC0FF)}
.aut-tela-selo{display:flex;align-items:center;gap:.5em;margin-top:1em;padding:.7em .9em;border:1px solid #BFE0FF;border-radius:.5em;background:#EAF5FF;color:#0A66C2;font-size:.78em;font-weight:700}

/* a cotação se preenche em sequência quando a tela aparece: produto, categoria, medidas, resumo linha a linha, total e selo */
@media(scripting:enabled) and (prefers-reduced-motion:no-preference){
  .aut-tela-campo span{clip-path:inset(0 100% 0 0)}
  .aut-tela-chips .on{border-color:#D5DAE0;background:none;color:inherit}
  .aut-tela-resumo li,.aut-tela-selo{opacity:0;translate:0 .6em}
  .aut-tela-total i{scale:0 1;transform-origin:100% 50%}
  .aut-tela.visto .aut-tela-sel span{animation:aut-digita .9s steps(22) .3s forwards}
  .aut-tela.visto .aut-tela-chips .on{border-color:var(--fer);background:var(--fer);color:#fff;transition-delay:1.3s}
  .aut-tela.visto .aut-tela-trio div:nth-child(1) span{animation:aut-digita .3s steps(3) 1.8s forwards}
  .aut-tela.visto .aut-tela-trio div:nth-child(2) span{animation:aut-digita .3s steps(3) 2.2s forwards}
  .aut-tela.visto .aut-tela-trio div:nth-child(3) span{animation:aut-digita .4s steps(5) 2.6s forwards}
  .aut-tela.visto .aut-tela-resumo li{animation:aut-surge .45s ease forwards}
  .aut-tela.visto .aut-tela-resumo li:nth-child(1){animation-delay:1.3s}
  .aut-tela.visto .aut-tela-resumo li:nth-child(2){animation-delay:2.1s}
  .aut-tela.visto .aut-tela-resumo li:nth-child(3){animation-delay:2.5s}
  .aut-tela.visto .aut-tela-resumo li:nth-child(4){animation-delay:3s}
  .aut-tela.visto .aut-tela-resumo li:nth-child(5){animation-delay:3.3s}
  .aut-tela.visto .aut-tela-total i{animation:aut-enche .7s cubic-bezier(.65,0,.35,1) 3.7s forwards}
  .aut-tela.visto .aut-tela-selo{animation:aut-surge .45s ease 4.4s forwards}
  .aut-tela.visto .aut-tela-botao{animation:aut-chama .8s ease-in-out 5s 2}
}
@keyframes aut-digita{to{clip-path:inset(0)}}
@keyframes aut-surge{to{opacity:1;translate:none}}
@keyframes aut-enche{to{scale:1 1}}
@keyframes aut-chama{50%{box-shadow:0 0 0 .6em rgba(11,132,243,.18)}}
.aut-caso{background:#fff;transition:background-color .35s,color .35s,border-color .35s}
.aut-caso summary{grid-template-columns:45px 1fr 32px}
.aut-caso[open]{border-color:var(--bm-azul);background:var(--bm-azul);color:#fff}
.aut-caso[open] .gads-ic{background:#000}
.aut-caso[open] .scr-seta{border-color:#fff;color:#fff}
.aut-caso > p{max-width:560px}

@media(max-width:960px){
  .aut-hero-grade,.aut-conta,.aut-trio,.aut-passos,.aut-time,.aut-cases-grade{grid-template-columns:1fr}
  .aut-hero-grade{gap:8px}
  .aut-note{width:100%;margin:0}
  .aut-conta{gap:28px}
  .aut-conta div,.aut-conta div + div{padding:0;border:0}
  .aut-maquina{border-radius:10px}
  .aut-passos{gap:40px}
  .aut-time,.aut-cases-grade{gap:32px}
}

/* ============ gesto dos ícones no mouse (todas as páginas) ============
   Pedido do Gabriel em 07/10, a partir dos cards de entrega da Automação: com o mouse no item, o ícone faz um gesto ligado ao que ele diz.
   O gesto é escolhido pelo nome do ícone no img/icones.svg, então ícone novo só precisa entrar em uma das cinco listas abaixo.
   Vale para o ícone que é filho direto do item (ou está dentro do quadradinho azul do item), para o mouse numa lista não mexer todos de uma vez. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  main :is(li,summary,article,a):hover > svg:has(> use:is([href$="#ciclo"],[href$="#ph-arrows-clockwise"],[href$="#globo"],[href$="#controles"],[href$="#ph-gauge"])),
  main :is(li,summary,article,a):hover > .gads-ic > svg:has(> use:is([href$="#ciclo"],[href$="#ph-arrows-clockwise"],[href$="#globo"],[href$="#controles"],[href$="#ph-gauge"])),
  main :is(li,summary,article,a):hover > * > .gads-ic > svg:has(> use:is([href$="#ciclo"],[href$="#ph-arrows-clockwise"],[href$="#globo"],[href$="#controles"],[href$="#ph-gauge"])){animation:ic-gira 1.6s cubic-bezier(.65,0,.35,1) infinite}
  main :is(li,summary,article,a):hover > svg:has(> use:is([href$="#ph-bell-ringing"],[href$="#ph-wrench"],[href$="#ph-headset"],[href$="#link"],[href$="#ph-flask"],[href$="#paleta"],[href$="#lupa"],[href$="#ph-list-magnifying-glass"],[href$="#ph-calculator"])),
  main :is(li,summary,article,a):hover > .gads-ic > svg:has(> use:is([href$="#ph-bell-ringing"],[href$="#ph-wrench"],[href$="#ph-headset"],[href$="#link"],[href$="#ph-flask"],[href$="#paleta"],[href$="#lupa"],[href$="#ph-list-magnifying-glass"],[href$="#ph-calculator"])),
  main :is(li,summary,article,a):hover > * > .gads-ic > svg:has(> use:is([href$="#ph-bell-ringing"],[href$="#ph-wrench"],[href$="#ph-headset"],[href$="#link"],[href$="#ph-flask"],[href$="#paleta"],[href$="#lupa"],[href$="#ph-list-magnifying-glass"],[href$="#ph-calculator"])){transform-origin:50% 12%;animation:ic-balanca 1s ease-in-out infinite}
  main :is(li,summary,article,a):hover > svg:has(> use:is([href$="#raio"],[href$="#ph-lightning"],[href$="#ph-pulse"],[href$="#pulso"],[href$="#escudo"],[href$="#escudo-ok"],[href$="#escudo-x"],[href$="#ph-shield-check"],[href$="#ph-plus-circle"],[href$="#ph-first-aid-kit"],[href$="#google"],[href$="#ph-chat-circle-dots"],[href$="#ph-share-network"],[href$="#quebra-cabeca"],[href$="#ph-puzzle-piece"])),
  main :is(li,summary,article,a):hover > .gads-ic > svg:has(> use:is([href$="#raio"],[href$="#ph-lightning"],[href$="#ph-pulse"],[href$="#pulso"],[href$="#escudo"],[href$="#escudo-ok"],[href$="#escudo-x"],[href$="#ph-shield-check"],[href$="#ph-plus-circle"],[href$="#ph-first-aid-kit"],[href$="#google"],[href$="#ph-chat-circle-dots"],[href$="#ph-share-network"],[href$="#quebra-cabeca"],[href$="#ph-puzzle-piece"])),
  main :is(li,summary,article,a):hover > * > .gads-ic > svg:has(> use:is([href$="#raio"],[href$="#ph-lightning"],[href$="#ph-pulse"],[href$="#pulso"],[href$="#escudo"],[href$="#escudo-ok"],[href$="#escudo-x"],[href$="#ph-shield-check"],[href$="#ph-plus-circle"],[href$="#ph-first-aid-kit"],[href$="#google"],[href$="#ph-chat-circle-dots"],[href$="#ph-share-network"],[href$="#quebra-cabeca"],[href$="#ph-puzzle-piece"])){animation:ic-pulsa .9s ease-in-out infinite}
  main :is(li,summary,article,a):hover > svg:has(> use:is([href$="#ph-list-checks"],[href$="#grafico"],[href$="#ph-chart-bar"],[href$="#ph-file-text"],[href$="#ph-file-pdf"],[href$="#layout"],[href$="#janela"],[href$="#grade"],[href$="#ph-hard-drives"],[href$="#ph-keyboard"],[href$="#ph-book-open"],[href$="#ph-arrows-split"])),
  main :is(li,summary,article,a):hover > .gads-ic > svg:has(> use:is([href$="#ph-list-checks"],[href$="#grafico"],[href$="#ph-chart-bar"],[href$="#ph-file-text"],[href$="#ph-file-pdf"],[href$="#layout"],[href$="#janela"],[href$="#grade"],[href$="#ph-hard-drives"],[href$="#ph-keyboard"],[href$="#ph-book-open"],[href$="#ph-arrows-split"])),
  main :is(li,summary,article,a):hover > * > .gads-ic > svg:has(> use:is([href$="#ph-list-checks"],[href$="#grafico"],[href$="#ph-chart-bar"],[href$="#ph-file-text"],[href$="#ph-file-pdf"],[href$="#layout"],[href$="#janela"],[href$="#grade"],[href$="#ph-hard-drives"],[href$="#ph-keyboard"],[href$="#ph-book-open"],[href$="#ph-arrows-split"])){animation:ic-refaz 1.2s ease-in-out infinite}
  main :is(li,summary,article,a):hover > svg:has(> use:is([href$="#ph-cloud-arrow-up"],[href$="#carrinho"])),
  main :is(li,summary,article,a):hover > .gads-ic > svg:has(> use:is([href$="#ph-cloud-arrow-up"],[href$="#carrinho"])),
  main :is(li,summary,article,a):hover > * > .gads-ic > svg:has(> use:is([href$="#ph-cloud-arrow-up"],[href$="#carrinho"])){animation:ic-sobe 1s ease-in-out infinite}
}
@keyframes ic-gira{0%{transform:none}60%,100%{transform:rotate(360deg)}}
@keyframes ic-balanca{0%,60%,100%{transform:none}15%{transform:rotate(-16deg)}30%{transform:rotate(14deg)}45%{transform:rotate(-8deg)}}
@keyframes ic-pulsa{0%,100%{transform:none;opacity:1}40%{transform:scale(1.25);opacity:1}55%{opacity:.35}70%{opacity:1}}
@keyframes ic-refaz{0%,100%{clip-path:inset(0)}35%,36%{clip-path:inset(0 0 100% 0)}80%{clip-path:inset(0)}}
@keyframes ic-sobe{0%,100%{transform:none}40%{transform:translateY(-5px)}70%{transform:translateY(1px)}}

/* ───── página Sobre (layout-sobre.html) ─────
   Toda classe nova leva o prefixo sb-, e o que ajusta peça de outra página vem escopado por .pg-sobre.
   Reaproveita sem mudar: a dobra (.hero), os anéis com o card de vidro (.porque) e o fecho (.gads-fecho). */
/* dobra: o título é mais longo que o da home, então o corpo desce no celular e a pílula fica em cima dele em qualquer largura */
:is(.pg-sobre,.pg-parcerias) .hero .titulo{--corpo:clamp(40px,6.25vw,120px);display:flex;flex-direction:column-reverse;align-items:flex-start}
:is(.pg-sobre,.pg-parcerias) .hero .rot{position:static;margin-bottom:16px}
/* dobra preta (Gabriel, 19/10, antes branca): título no corpo e no peso da Cases (.pc-h1, três linhas com o trecho em negrito) e o selo logo acima.
   No fundo, três arcos em vez das barras da home, e o data-hero desliga a faixa preta da home e o recorte da seção de baixo (pedido do Gabriel) */
/* três arcos (desenho do Gabriel, 19/10) nascem do pé da dobra no canto direito, passando um pouco da borda. A versão do desenho é a do fundo preto (azul que some no preto) */
.sb-hero > .fundo,.pc-hero > .fundo{top:auto;bottom:0;right:-14vw;left:auto;width:min(1193px,78vw);height:auto;aspect-ratio:auto}
.pg-sobre main{background:#0D0D0D}   /* o main continua o fundo da dobra enquanto a seção de baixo sobe recortada */
.pg-sobre .sb-hero .titulo{flex-direction:column}
.pg-sobre .sb-hero .rot{margin-bottom:0}
/* crachá 3D pendurado (Gabriel 19/10, ref. recent.design "Sam Cheng personal site"): o canvas cobre a dobra por cima do texto, mas não pega o mouse.
   Quem decide se o clique pegou o crachá é o layout.js, então o texto continua selecionável fora dele */
.sb-cracha{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.sb-hero .dentro{position:relative;z-index:1}
/* celular: o texto desce e o crachá pendura no espaço de cima, sem cobrir o título. Os arcos ficam no pé, atrás do texto */
@media(max-width:960px){
  .sb-hero{justify-content:flex-start;padding-top:calc(var(--topo-y) + var(--topo-h) + 280px)}
  .sb-hero > .fundo,.pc-hero > .fundo{right:-30vw;width:120vw}
  .pg-parcerias .sb-hero{justify-content:flex-end;padding-top:calc(var(--topo-y) + var(--topo-h) + 32px);padding-bottom:40px}   /* o texto vai pra base e os arcos ocupam o vão de cima, inteiros (Gabriel 21/10) */
}
/* Parcerias: arcos que se encaixam, em partículas (Gabriel 20/10). O desenho é todo do layout.js no canvas; aqui só o lugar dele.
   A caixa tem a proporção dos arcos da Sobre (1193 por 597), com o centro no meio do pé */
.pg-parcerias .sb-hero > .pa-arcos{inset:0;width:100%;height:100%}   /* a dobra inteira, pra os fluxos entrarem pelas bordas da tela. O lugar dos arcos dentro dela é calculado no layout.js */
.pa-tag{position:absolute;left:0;top:0;z-index:1;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px;border:1px solid rgba(255,255,255,.7);border-radius:var(--bm-pill);background:rgba(13,13,13,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-size:var(--bm-t12);font-weight:700;letter-spacing:.03em;line-height:1;white-space:nowrap;pointer-events:none;transform:translate(var(--x,0),var(--y,0)) translate(-50%,-50%);opacity:0;clip-path:inset(0 calc(100% - 30px) 0 0 round 15px);transition:opacity .3s,clip-path .8s cubic-bezier(.16,1,.3,1) .3s}   /* etiqueta de quem é quem nos arcos da Parcerias. Aparece como uma partícula num círculo, que depois abre e vira a etiqueta */
.pa-tag i{width:6px;height:6px;background:currentColor}   /* o quadradinho é a mesma partícula do rio */
.pa-tag-azul{border-color:var(--bm-azul);background:var(--bm-azul)}
.pa-tag.chegou{opacity:1;clip-path:inset(0 round 15px)}
.pa-tag.pronto{transition:none}
/* Parcerias, do bloco 02 em diante: cada parte entra quando aparece na tela, com a mesma curva e o mesmo degrau de .14s dos cards da Automação (Gabriel 21/10). Vale também nas páginas de case.
   Título e texto sobem, os cards entram um depois do outro, e no bloco 02 os itens das listas acendem em fila. A frase do fecho do 05 sobe, e o trecho em negrito se revela da esquerda pra direita */
@media(scripting:enabled) and (prefers-reduced-motion:no-preference){
  :is(.pg-parcerias,.pg-case) :is(.cabeca,.pc-sub,.pc-grade>*,.pc-lista li){opacity:0;translate:0 32px;transition:opacity .7s ease,translate .7s cubic-bezier(.2,.8,.3,1)}
  :is(.pg-parcerias,.pg-case) .pc-lista li{translate:-16px 0}
  :is(.pg-parcerias,.pg-case) .visto:is(.cabeca,.pc-sub,.pc-grade>*),:is(.pg-parcerias,.pg-case) .visto .pc-lista li{opacity:1;translate:none}   /* .visto no próprio card: o :is de cima pesa como .pc-lista li e ganharia de um .visto sozinho */
  :is(.pg-parcerias,.pg-case) .pc-grade>.visto:nth-child(2){transition-delay:.14s}   /* lado a lado no computador os cards entram juntos, e o degrau faz a fila */
  :is(.pg-parcerias,.pg-case) .pc-grade>.visto:nth-child(3){transition-delay:.28s}
  :is(.pg-parcerias,.pg-case) .pc-grade>.visto:nth-child(4){transition-delay:.42s}
  :is(.pg-parcerias,.pg-case) .visto .pc-lista li:nth-child(1){transition-delay:.35s}   /* os itens acendem depois que o card chegou */
  :is(.pg-parcerias,.pg-case) .visto .pc-lista li:nth-child(2){transition-delay:.45s}
  :is(.pg-parcerias,.pg-case) .visto .pc-lista li:nth-child(3){transition-delay:.55s}
  :is(.pg-parcerias,.pg-case) .visto .pc-lista li:nth-child(4){transition-delay:.65s}
  :is(.pg-parcerias,.pg-case) .visto .pc-lista li:nth-child(5){transition-delay:.75s}
  :is(.pg-parcerias,.pg-case) .visto:nth-child(2) .pc-lista li{transition-delay:.6s}   /* a lista do cliente vem depois da sua, como o pedido que chega depois */
  :is(.pg-parcerias,.pg-case) .visto:nth-child(2) .pc-lista li:nth-child(2){transition-delay:.7s}
  :is(.pg-parcerias,.pg-case) .visto:nth-child(2) .pc-lista li:nth-child(3){transition-delay:.8s}
  :is(.pg-parcerias,.pg-case) .visto:nth-child(2) .pc-lista li:nth-child(4){transition-delay:.9s}
  :is(.pg-parcerias,.pg-case) .visto:nth-child(2) .pc-lista li:nth-child(5){transition-delay:1s}
  :is(.pg-parcerias,.pg-case) .pc-fecha{opacity:0;translate:0 32px;transition:opacity .7s ease,translate .7s cubic-bezier(.2,.8,.3,1)}   /* a frase toda não pode nascer recortada: o navegador não avisa que um elemento 100% recortado entrou na tela */
  :is(.pg-parcerias,.pg-case) .pc-fecha b{display:inline-block;clip-path:inset(-10% 100% -10% 0);transition:clip-path 1.1s cubic-bezier(.65,0,.35,1) .45s}
  :is(.pg-parcerias,.pg-case) .pc-fecha.visto{opacity:1;translate:none}
  :is(.pg-parcerias,.pg-case) .pc-fecha.visto b{clip-path:inset(-10% -2% -10% 0)}
}
@media(scripting:enabled) and (prefers-reduced-motion:no-preference) and (max-width:960px){
  :is(.pg-parcerias,.pg-case) .pc-grade>.visto:nth-child(n){transition-delay:0s}   /* empilhados, cada card já entra sozinho quando chega, sem esperar o de cima */
  :is(.pg-parcerias,.pg-case) .visto:nth-child(2) .pc-lista li{transition-delay:.35s}
  :is(.pg-parcerias,.pg-case) .visto:nth-child(2) .pc-lista li:nth-child(2){transition-delay:.45s}
  :is(.pg-parcerias,.pg-case) .visto:nth-child(2) .pc-lista li:nth-child(3){transition-delay:.55s}
  :is(.pg-parcerias,.pg-case) .visto:nth-child(2) .pc-lista li:nth-child(4){transition-delay:.65s}
  :is(.pg-parcerias,.pg-case) .visto:nth-child(2) .pc-lista li:nth-child(5){transition-delay:.75s}
}

/* página de case (Gabriel 21/10, pedido do Douglas: uma LP visual com pouco texto). Usa a dobra da Sobre e o carrossel da Cases.
   Na dobra (Gabriel 21/10, depois do leque de três telas, "muito simples"): a roda da Cases com uma tela só, presa no fio que sai pelo topo e pela base,
   e os arcos da Sobre no fundo. Mesmo desenho do layout.js (.pc-roda), com .cs-uma: as capas de cima e de baixo ficam invisíveis e só dão a ponta do fio.
   Entrada: os arcos sobem, o texto vem em seguida e a tela desce pelo fio com um quique. Embaixo do texto, a ficha (cliente, entrega, frente) */
.cs-hero .dentro{max-width:min(46%,760px)}
.cs-ficha{display:flex;flex-wrap:wrap;gap:16px 48px;width:fit-content;max-width:100%;margin:40px 0 0;padding:20px 28px;border-radius:var(--bm-r2);background:#161616;list-style:none;font-weight:600}   /* card num preto só um pouco acima do fundo (#0D0D0D), no lugar da linha (Gabriel 21/10) */
.cs-ficha span{display:block;margin-bottom:6px;color:rgba(255,255,255,.6);font-size:var(--bm-t12);font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.pc-palco.cs-palco{--meio:70%;--passo:2.4}   /* as duas classes pra ganhar do .pc-palco da Cases, que vem depois no arquivo. 70%: entre o texto e a borda da janela (Gabriel 21/10, 82% e 74% foram demais) */   /* passo longo: as capas invisíveis ficam fora da dobra e o fio sai pelas bordas */
.cs-palco .pc-roda li{--cw:clamp(300px,32vw,620px)}
.cs-palco .pc-gl{pointer-events:none}   /* tela só, nada pra arrastar: o mouse é lido na dobra inteira */
@media(prefers-reduced-motion:no-preference){
  :is(.cs-hero,.pc-hero,.pg-sobre .sb-hero) > .fundo{animation:cs-arcos 1.6s cubic-bezier(.16,1,.3,1) backwards}
  :is(.cs-hero,.pg-sobre .sb-hero) :is(.titulo,.lead,.cs-ficha,.acoes){animation:cs-sobe .9s cubic-bezier(.2,.8,.3,1) backwards}
  :is(.cs-hero,.pg-sobre .sb-hero) .titulo{animation-delay:.25s}
  :is(.cs-hero,.pg-sobre .sb-hero) .lead{animation-delay:.4s}
  .pg-sobre .sb-hero .acoes{animation-delay:.55s}
  /* Cases: a mesma entrada da Sobre (Gabriel 21/10). O texto sobe em sequência e a roda desce do alto como o crachá, com o mesmo quique curto */
  .pc-hero :is(.pc-lado > *,.pc-lista){animation:cs-sobe .9s cubic-bezier(.2,.8,.3,1) backwards}
  .pc-hero :is(.pc-lado > .rot,.pc-h1){animation-delay:.25s}
  .pc-hero .pc-atual{animation-delay:.4s}
  .pc-hero .pc-lado > .acoes{animation-delay:.55s}
  .pc-hero .pc-lista{animation-delay:.7s}
  .pc-hero.gl:not(.pronto) > .pc-palco{opacity:0}   /* espera as telas da vez chegarem (layout.js) */
  .pc-hero.pronto > .pc-palco{animation:cs-desce .9s cubic-bezier(.3,1.25,.5,1) backwards}
  /* crachá da Sobre: desce pendurado do alto e assenta com um quique curto, assim que o three.js monta (Gabriel 21/10, antes entrava de lado balançando) */
  .sb-cracha{opacity:0;translate:0 -75vh}
  .com-cracha .sb-cracha{opacity:1;translate:0 0;transition:translate 1s cubic-bezier(.3,1.25,.5,1),opacity .25s}
  .cs-hero .cs-ficha{animation-delay:.55s}
}
@keyframes cs-arcos{from{opacity:0;translate:0 30%;scale:.92}}
@keyframes cs-desce{from{opacity:0;translate:0 -75vh}}
@keyframes cs-sobe{from{opacity:0;translate:0 32px}}
/* a história do case (Gabriel 21/10, referência fantasy.co/work/harrods, no lugar do carrossel de telas): muita tela grande e o texto em blocos curtos entre elas.
   As telas do Figma têm alturas diferentes, então cada uma é recortada pelo topo na proporção do lugar onde entra.
   No padrão visual da Cases (Gabriel 21/10): título .tt com o texto à direita, rótulo em pílula, tela de canto 12 sem sombra, nome da tela no título e cards da Parcerias */
.cs-historia figure{margin:0}
.cs-historia img{display:block;width:100%;height:auto;object-fit:cover;object-position:top;border-radius:12px;background:#F7F7F7}
.cs-largo img{aspect-ratio:16/9}
.cs-duas{display:grid;grid-template-columns:1fr 1fr;gap:24px clamp(32px,4.2vw,80px);margin-top:clamp(96px,8.3vw,160px)}
.cs-duas h3{max-width:20ch;font:600 clamp(28px,2.1vw,40px)/1.05 var(--bm-fonte-titulo);text-transform:uppercase}
.cs-duas p{max-width:58ch;margin-top:24px;font-weight:500;line-height:25px;color:rgba(255,255,255,.8)}   /* o desafio só aparece no bloco azul */
.cs-par{display:grid;grid-template-columns:1fr 1.5fr;gap:24px;margin-top:clamp(96px,8.3vw,160px)}
.cs-par img{aspect-ratio:4/3}
.cs-par figcaption{margin-top:24px;font-size:16px;line-height:1.5;color:rgba(255,255,255,.75)}
.cs-par figcaption b{display:block;margin-bottom:4px;color:#fff;font:600 clamp(24px,1.67vw,32px)/1.2 var(--bm-fonte-titulo)}   /* o mesmo nome de case da grade da Cases */
.cs-numeros{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;list-style:none}
.cs-numeros li{font-weight:500;line-height:1.5}
.cs-numeros b{margin:auto 0 12px;padding-top:32px;font:600 clamp(32px,2.5vw,48px)/1 var(--bm-fonte-titulo);text-transform:uppercase;color:var(--bm-azul)}   /* o número desce pro pé do card, como os títulos dos cards da Parcerias */
.cs-numeros .pc-azul b{color:#fff}
/* o depoimento (padrão Metalab do case): a fala grande no azul, o trecho que importa em branco cheio e quem disse embaixo, separado por um fio */
.cs-depo-fala{position:relative;z-index:1;max-width:min(1200px,62%);margin:0}
/* o mascote à direita, solto acima do pé do bloco: o fundo do png é o mesmo azul do .sec.azul, e a base some num degradê pra o traço não terminar cortado no ar */
.cs-depo-mascote{position:absolute;right:calc(var(--lat) * .4);bottom:clamp(40px,5vw,96px);width:clamp(280px,30vw,560px);pointer-events:none}
.cs-depo-mascote img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(#000 72%,transparent 96%);mask-image:linear-gradient(#000 72%,transparent 96%)}
.cs-depo-wp{position:absolute;left:28.2%;top:22.3%;width:5.25%;height:auto;aspect-ratio:1;border-radius:50%;background:#fff;color:var(--bm-azul)}   /* a moeda da mão: cobre o W preto do png com o mesmo logo em azul */
.cs-depo blockquote{margin:32px 0 0}
.cs-depo blockquote p{font:500 clamp(28px,3.3vw,64px)/1.15 var(--bm-fonte);letter-spacing:-.02em;text-wrap:balance;color:rgba(255,255,255,.72)}
.cs-depo blockquote p::before{content:"“";display:block;height:.55em;font-size:3em;line-height:1;color:#fff}   /* aspa grande em cima da fala */
.cs-depo blockquote b{font-weight:600;color:#fff}   /* no azul o destaque é o branco cheio contra o resto da fala mais apagado */
.cs-depo figcaption{max-width:480px;margin-top:clamp(40px,4vw,64px);padding-top:24px;border-top:1px solid rgba(255,255,255,.2);line-height:1.5;color:rgba(255,255,255,.72)}
.cs-depo figcaption b{display:block;color:#fff;font:600 clamp(24px,1.67vw,32px)/1.2 var(--bm-fonte-titulo);text-transform:uppercase}
/* depoimento em card no meio da história (Gabriel 22/10): logo abaixo das duas telas, com o mesmo canto delas. Fala à esquerda, quem disse no pé à direita.
   Fundo num azul mais fundo da mesma família, no lugar do branco (Gabriel 22/10). O system só tem um azul, então o tom sai do próprio --bm-azul com 30% de preto */
.cs-historia .cs-depo-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:32px 64px;margin:clamp(64px,6vw,120px) 0 0;padding:clamp(28px,3.3vw,64px);border-radius:12px;background:color-mix(in srgb,var(--bm-azul) 70%,#000);color:#fff}
.cs-depo-card blockquote{margin:0}
.cs-depo-card blockquote p{margin:0;font:500 clamp(24px,2.3vw,44px)/1.2 var(--bm-fonte);letter-spacing:-.02em;text-wrap:balance;color:rgba(255,255,255,.72)}
.cs-depo-card blockquote p::before{content:"“";display:block;height:.55em;font-size:2.6em;line-height:1;color:#fff}
.cs-depo-card blockquote b{font-weight:600;color:#fff}
.cs-depo-card figcaption{font-size:clamp(16px,1.1vw,21px);line-height:1.5;color:rgba(255,255,255,.72);text-align:right}
.cs-depo-card figcaption b{display:block;margin-bottom:4px;color:#fff;font:600 clamp(26px,1.9vw,38px)/1.1 var(--bm-fonte-titulo);text-transform:uppercase}   /* nome e cargo maiores (Gabriel 22/10) */
@media(max-width:960px){.cs-historia .cs-depo-card{grid-template-columns:minmax(0,1fr)}.cs-depo-card figcaption{text-align:left}}
/* o que a gente desenhou: a tela trava à esquerda e troca quando o ponto da direita chega no meio da janela. O da vez acende, os outros ficam apagados (.atual vem do layout.js) */
.cs-pontos{overflow:clip}   /* o hidden do .sec vira caixa de rolagem e desliga o sticky da tela; o clip corta igual sem isso */
.cs-pontos-grade{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(32px,4.2vw,80px)}
.cs-pontos-tela{position:sticky;top:calc(50svh - 13vw);align-self:start;aspect-ratio:16/10}
.cs-pontos-tela img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:12px;background:#fff;opacity:0;scale:1.03;transition:opacity .6s ease,scale .9s cubic-bezier(.2,.8,.3,1)}
.cs-pontos-tela img.atual{opacity:1;scale:1}
.cs-pontos-lista{list-style:none}
.cs-pontos-lista li{display:flex;flex-direction:column;justify-content:center;min-height:70svh;opacity:.3;transition:opacity .5s}
.cs-pontos-lista li.atual{opacity:1}
.cs-pontos-lista .rot{align-self:flex-start}
.cs-pontos-lista h3{margin-top:24px;font:600 clamp(36px,2.6vw,50px)/1 var(--bm-fonte-titulo);text-transform:uppercase}
.cs-pontos-lista p{max-width:34ch;margin-top:24px;font-size:clamp(16px,.94vw,18px);line-height:1.6;color:rgba(255,255,255,.72)}   /* o n25 dava cinza escuro demais no preto */
@media(scripting:enabled) and (prefers-reduced-motion:no-preference){
  .cs-revela{opacity:0;translate:0 40px;transition:opacity .8s ease,translate 1s cubic-bezier(.2,.8,.3,1)}
  .cs-revela.visto{opacity:1;translate:none}
  :is(.cs-par,.cs-numeros)>.visto:nth-child(2){transition-delay:.14s}   /* lado a lado entram juntos, e o degrau faz a fila */
  .cs-numeros>.visto:nth-child(3){transition-delay:.28s}
}
@media(max-width:960px){
  .cs-hero .dentro{max-width:none}
  .cs-ficha{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:16px;width:auto;margin-top:32px;padding:16px 20px;font-size:14px}   /* os três numa linha só, com o card na largura toda */
  .pg-case .sb-hero{justify-content:flex-start;padding-top:calc(var(--topo-y) + var(--topo-h) + 48px)}
  .pc-palco.cs-palco{--meio:50%;--passo:1.8;height:min(96vw,460px);margin-top:32px}   /* o resto vem do .pc-palco do celular, na regra da Cases */
  .cs-palco .pc-roda li{--cw:min(80vw,440px)}
  .cs-duas,.cs-par,.cs-numeros{grid-template-columns:1fr}
  .cs-duas,.cs-par{margin-top:64px}
  .cs-par{gap:40px}
  .cs-largo img{aspect-ratio:4/3}   /* em 16:9 a tela inicial ficava miúda; o 4:3 corta as laterais vazias e aproxima o miolo */
  .cs-numeros li{min-height:0}
  .cs-numeros b{padding-top:24px}
  .cs-depo-fala{max-width:none}
  .cs-depo-mascote{position:relative;right:auto;bottom:auto;display:block;width:min(72vw,340px);margin:40px calc(var(--lat) * -.5) 0 auto}   /* no celular desce pra baixo da fala, puxado pra direita */
  /* no celular a tela trava logo abaixo do cabeçalho, com fundo, e os pontos passam embaixo dela. A segunda sombra sobe e cobre o vão entre o cabeçalho e a tela, senão o ponto de cima aparece ali */
  .cs-pontos-grade{grid-template-columns:1fr;gap:0}
  .cs-pontos-tela{z-index:2;top:calc(var(--topo-y) + var(--topo-h) + 8px);box-shadow:0 0 0 12px #0D0D0D,0 -120px 0 12px #0D0D0D,0 24px 24px 12px #0D0D0D}
  .cs-pontos-lista li{min-height:45svh;justify-content:flex-start;padding-top:40px}
}
/* passagem em pilha (Gabriel 19/10, no lugar do círculo): a dobra trava no topo e recua, encolhendo um pouco e escurecendo (--p vem do layout.js, de 0 a 1),
   enquanto o time sobe por cima como um cartão de cantos redondos. Só em tela larga. A Cases usa a mesma passagem desde 21/10 (Gabriel), no lugar da cortina reta */
@media(min-width:961px) and (prefers-reduced-motion:no-preference){
  :is(.sb-hero,.pc-hero){position:sticky;top:min(0px,calc(100svh - var(--alt,0px)));transform:scale(calc(1 - .07 * var(--p,0)));transform-origin:50% 0}   /* top negativo só quando a dobra passa da janela (Contato): ela trava pelo pé e o fim não fica embaixo da seção de baixo */
  /* o escurecer é um véu preto e não filter:brightness. O filtro ficava ligado mesmo no topo e refazia a dobra inteira a cada quadro do crachá e da roda, e a entrada travava (Gabriel 22/10) */
  :is(.sb-hero,.pc-hero)::after{content:'';position:absolute;inset:0;z-index:5;background:#000;opacity:calc(.65 * var(--p,0));pointer-events:none}
  :is(.sb-hero,.pc-hero) + .sec{position:relative;z-index:3;border-radius:40px 40px 0 0;box-shadow:0 -24px 80px rgba(0,0,0,.55)}
  /* home 03 e 04 (Gabriel 21/10): a 03 é mais alta que a janela, então trava só quando o pé dela chega no pé da janela (--alt vem do layout.js) */
  .pilha > .sec:first-child{position:sticky;top:min(0px,calc(100svh - var(--alt,0px)));transform:scale(calc(1 - .07 * var(--p,0)));filter:brightness(calc(1 - .65 * var(--p,0)));transform-origin:50% max(0px,calc(var(--alt,0px) - 100svh))}   /* recua pelo alto do trecho que está na janela, como a dobra */
  .pilha > .sec + .sec{position:relative;z-index:3;border-radius:40px 40px 0 0}   /* sem a sombra da dobra dos cases (Gabriel 21/10) */
}
/* time num varal (aprovado pelo Gabriel em 15/10, referência recent.design "team profile card"). A seção é preta pra emendar na faixa da dobra, que termina preta.
   A corda é um SVG curvo, e cada card pende de um fio que toca a corda em --y. O card balança em volta desse ponto e vira no clique (layout.js) */
.sb-varal{margin-top:8px}
.sb-varal-dentro{position:relative;padding-bottom:40px}
.sb-corda{position:absolute;left:0;top:0;width:100%;height:60px;overflow:visible}
.sb-corda path{fill:none;stroke:#333;stroke-width:8;stroke-linecap:round;vector-effect:non-scaling-stroke}   /* fita grafite (19/10): o preto puro some no fundo da seção, então o tom sobe um pouco */
.sb-varal-lista{display:flex;justify-content:space-around;align-items:flex-start;margin:0;padding:0;list-style:none}
.sb-pend{--r:0deg;position:relative;width:clamp(230px,17.5vw,300px);padding-top:calc(var(--y) + var(--fio));transform-origin:50% var(--y);rotate:var(--r);perspective:1400px}
.sb-pend:nth-child(1){--r:-3deg}
.sb-pend:nth-child(2){--r:2deg}
.sb-pend:nth-child(3){--r:-2deg}
.sb-pend:nth-child(4){--r:3deg}
/* o fio sai da corda, e o prendedor segura o card. O fio é fita grafite como a corda; o prendedor copia o da dobra desde 21/10 (Gabriel):
   argola de metal na ponta do fio e a haste que desce até o furo do card */
.sb-pend::before{content:"";position:absolute;left:calc(50% - 4px);top:var(--y);width:8px;height:calc(var(--fio) - 16px);border-radius:2px;background:#333}
.sb-pend::after{content:"";position:absolute;z-index:1;left:calc(50% - 8px);top:calc(var(--y) + var(--fio) - 22px);width:16px;height:38px;
  background:radial-gradient(circle at 50% 8px,transparent 4px,#8E939B 4.5px,#E2E5E9 6px,#A9AEB5 7.5px,transparent 8px),
    linear-gradient(90deg,#8E939B,#E2E5E9 45%,#A9AEB5) 50% 100%/8px 24px no-repeat;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
/* o balanço (o leve de sempre e o empurrão do mouse) é física de pêndulo no layout.js, que escreve o rotate direto no card. Sem ele fica o ângulo de repouso --r */
/* as duas faces dividem a mesma célula da grade, então o card tem a altura da maior. O verso nasce de costas */
.sb-card{display:grid;transform-style:preserve-3d;transition:transform 1.3s cubic-bezier(.16,1,.3,1)}
.sb-card.virado{transform:rotateY(180deg)}
/* com mouse o card vira ao passar por cima. No celular e no teclado vira pelo botão do rodapé */
@media(hover:hover){.sb-pend:hover .sb-card{transform:rotateY(180deg)}}
.sb-frente,.sb-verso{position:relative;grid-area:1/1;display:flex;flex-direction:column;padding:30px 16px 12px;border-radius:14px;backface-visibility:hidden;box-shadow:0 24px 48px rgba(0,0,0,.4)}
.sb-frente{background:#fff;color:#000}
.sb-verso{transform:rotateY(180deg);background:var(--bm-azul);color:#fff}
/* furo do crachá: mostra o fundo preto da seção, como o recorte do crachá 3D */
.sb-frente::before,.sb-verso::before{content:"";position:absolute;left:calc(50% - 22px);top:12px;width:44px;height:7px;border-radius:4px;background:#0D0D0D}
.sb-topo{display:flex;justify-content:space-between;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bm-n45)}
.sb-verso .sb-topo{color:rgba(255,255,255,.7)}
.sb-foto{width:68%;margin:10px auto 0;aspect-ratio:1;overflow:hidden;border-radius:50%}   /* menor desde 19/10, pra o card não ficar alto demais */   /* as fotos já vêm recortadas em círculo */
.sb-foto img{width:100%;height:100%;object-fit:cover}
.sb-frente h3{margin-top:12px;font:700 clamp(28px,2.08vw,40px)/1 var(--bm-fonte-titulo);text-transform:uppercase;text-align:center;color:var(--bm-azul)}   /* o nome em azul e centrado na foto, como o logotipo do crachá da dobra */
.sb-papel{margin-top:10px;padding-top:8px;border-top:1px solid #E6E6E6;font-size:14px;font-weight:600;color:#0D0D0D}
/* rótulo de campo, como "Quem somos" e "Cuidamos de" no crachá da dobra */
.sb-papel::before{content:"Responde por";display:block;margin-bottom:3px;font-size:11px;font-weight:600;color:#8A8A8A}
.sb-nome{display:flex;flex-direction:column;margin-top:20px;font:600 clamp(28px,2.08vw,40px)/1 var(--bm-fonte-titulo);text-transform:uppercase}
.sb-nome span{margin-top:6px;font:500 14px/1.3 var(--bm-fonte);text-transform:none;color:rgba(255,255,255,.75)}
.sb-bio{margin:16px 0;font-size:15px;font-weight:500;line-height:22px}
/* o rodapé inteiro do card é o botão de virar, com a bolinha da seta na ponta */
.sb-virar{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin-top:auto;padding:14px 0 0;border:0;border-top:1px solid var(--bm-offwhite);background:none;color:inherit;font:700 11px/1 var(--bm-fonte);letter-spacing:.06em;text-transform:uppercase;text-align:left;cursor:pointer}
.sb-frente .sb-virar{margin-top:12px;padding-top:12px}
.sb-virar .iconify{flex:none;box-sizing:border-box;width:32px;height:32px;padding:8px;border-radius:50%;background:#000;color:#fff;transition:background .2s}
.sb-virar:hover .iconify{background:var(--bm-azul)}
.sb-verso .sb-virar{border-top-color:rgba(255,255,255,.25)}
.sb-verso .sb-virar .iconify{background:#fff;color:var(--bm-azul)}
.sb-verso .sb-virar:hover .iconify{background:var(--bm-tangerina);color:#fff}
@media(prefers-reduced-motion:reduce){.sb-card{transition:none}}
/* como a gente trabalha: três cards na linha das frentes da home, cinza, azul e preto com a ponta redonda */
.sb-jeito{background:#F7F7F7}   /* fundo próprio: sem ele aparece o azul do main, que existe pra faixa da dobra */
.sb-jeito .tt{color:#000}
.sb-jeito-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.sb-modo{display:flex;flex-direction:column;align-items:flex-start;min-height:clamp(300px,21.9vw,420px);padding:clamp(24px,2.14vw,41px) clamp(24px,2.3vw,44px);border-radius:var(--bm-r2);background:#fff;color:#000}
.sb-modo .rot{color:var(--bm-azul)}
.sb-modo h3{margin-top:auto;padding-top:24px;max-width:9.5em;font:600 clamp(24px,1.67vw,32px)/1.1 var(--bm-fonte-titulo);text-transform:uppercase}
.sb-modo p{margin-top:10px;max-width:340px;font-size:14px;font-weight:500;line-height:20px}
.sb-modo:nth-child(2){background:var(--bm-azul);color:#fff}
.sb-modo:nth-child(3){padding-right:16%;border-radius:var(--bm-r2) 250px 250px var(--bm-r2);background:#0D0D0D;color:#fff}
.sb-modo:nth-child(n+2) .rot{color:#fff}
/* abaixo de 1100px os quatro cards não cabem lado a lado: o varal rola na horizontal, com a corda acompanhando */
@media(max-width:1100px){
  .sb-varal{overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--lat)*-1)}
  .sb-varal-dentro{width:max-content;padding-inline:var(--lat)}
  .sb-varal-lista{gap:32px}
  .sb-pend{width:240px;scroll-snap-align:center}
}
/* celular (Gabriel 19/10): sem corda, fio nem balanço, só os crachás um embaixo do outro. O card inteiro vira no toque (layout.js) */
@media(max-width:960px){
  .sb-varal{overflow:visible;margin-inline:0}
  .sb-varal-dentro{width:auto;padding:0}
  .sb-corda{display:none}
  .sb-varal-lista{flex-direction:column;align-items:center;gap:36px}
  .sb-pend{width:min(300px,100%);padding-top:0;rotate:none}
  .sb-pend::before,.sb-pend::after{display:none}   /* só o crachá, sem fio nem presilha */
  .sb-card{cursor:pointer}
}
@media(max-width:960px){
  .sb-jeito-grade{grid-template-columns:1fr}
  .sb-modo{min-height:220px}
  .sb-modo:nth-child(3){border-radius:var(--bm-r2) 120px 120px var(--bm-r2)}
}
@media(max-width:560px){
  .sb-jeito-grade{gap:12px}
}


/* ───── página Parcerias (layout-parcerias.html) ─────
   Toda classe nova leva o prefixo pc-. A dobra divide com a Sobre o ajuste de título longo, logo acima.
   Reaproveita sem mudar: a dobra (.hero), os anéis com o card de vidro (.porque) e o fecho (.gads-fecho). */
.pg-parcerias .hero .lead{max-width:620px;text-wrap:balance}   /* texto mais longo que o da home: mais largo pra fechar em duas linhas de tamanho parecido */
/* prova: o card de vidro da home, mais baixo e com título menor, porque aqui o texto é curto */
.pg-parcerias .vidro{min-height:clamp(300px,25vw,480px);padding:clamp(40px,4.69vw,90px) clamp(24px,4.74vw,91px)}
.pg-parcerias .porque .tt{max-width:7em;font-size:clamp(40px,4.17vw,80px)}
.pc-cinza{background:#F7F7F7}   /* seção clara precisa de fundo próprio, senão aparece o azul do main */
.pc-branca{background:#fff}
:is(.pc-cinza,.pc-branca) .tt,.pc-sub{color:#000}
:is(.pc-quem,.pc-cinza,.pc-ganha) .tt{max-width:9em}
.pc-sub{margin-bottom:20px;font:600 clamp(24px,1.67vw,32px)/1.1 var(--bm-fonte-titulo);text-transform:uppercase}
.pc-grade{display:grid;gap:24px}
.pc-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pc-4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* card: o mesmo desenho dos cards da Sobre, com a cor escolhida por classe em vez da posição */
.pc-card{display:flex;flex-direction:column;align-items:flex-start;min-height:clamp(220px,14.6vw,280px);padding:clamp(20px,1.67vw,32px);border-radius:var(--bm-r2);background:#fff;color:#000}
.pc-card .rot{color:var(--bm-azul)}
/* topo dos cards da seção 3: o quadrado de ícone das outras páginas (.gads-ic, da biblioteca do site) à esquerda e a pílula à direita */
.pc-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;align-self:stretch}
.pc-azul .gads-ic{background:#fff;color:var(--bm-azul)}   /* no card azul o quadrado inverte, senão some no fundo */
.pc-card h3{margin-top:auto;padding-top:20px;max-width:11em;font:600 clamp(24px,1.67vw,32px)/1.1 var(--bm-fonte-titulo);text-transform:uppercase}
.pc-card p{margin-top:8px;max-width:420px;font-size:14px;font-weight:500;line-height:20px}
.pc-claro{background:#F7F7F7}
.pc-azul{background:var(--bm-azul);color:#fff}
.pc-preto{background:#0D0D0D;color:#fff}
.pc-escuro{background:#1C1C1C;color:#fff}
:is(.pc-azul,.pc-preto,.pc-escuro,.pc-vidro) .rot{color:#fff}
.pc-escuro p{color:rgba(255,255,255,.72)}
.pc-ponta{padding-right:16%;border-radius:var(--bm-r2) 250px 250px var(--bm-r2)}
/* "pra quem é" no azul (Gabriel 20/10): o que a agência já vende fica num card de vidro com a letra branca cheia, e o que o cliente pede acende no card branco com a letra azul */
.pc-vidro{background:rgba(255,255,255,.08);color:#fff}
.pc-quem .pc-ponta{color:var(--bm-azul)}
/* "pra quem é": duas listas em letra grande, as duas em branco cheio, com um ícone solto antes de cada palavra */
.pc-lista{margin-top:auto;padding-top:28px;list-style:none;font:600 clamp(26px,2.19vw,42px)/1.12 var(--bm-fonte-titulo);text-transform:uppercase}
.pc-lista li{display:flex;align-items:center;gap:.28em}
.pc-lista svg{flex:none;width:.56em;height:.56em}
.pc-ganha .pc-card{min-height:clamp(190px,12vw,230px)}
.pc-fecha{margin-top:clamp(32px,2.86vw,55px);max-width:18em;font:500 clamp(28px,2.5vw,48px)/1.1 var(--bm-fonte-titulo);text-transform:uppercase}
.pc-fecha b{font-weight:700}
@media(max-width:1300px){.pc-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:960px){
  .pc-2{grid-template-columns:1fr}
  .pc-card{min-height:200px}
  .pc-ponta{border-radius:var(--bm-r2) 120px 120px var(--bm-r2)}
}
@media(max-width:560px){
  .pc-grade{gap:12px}
  .pc-4{grid-template-columns:1fr}
  .pc-ganha .pc-card{min-height:0}
}

/* páginas de solução montadas com as peças das quatro páginas modelo (08/10). Aqui fica só o que cada página modelo recebia pela própria classe (.pg-ssm, .pg-scr, .pg-aut, .pg-gads):
   o menu azul sobre a dobra clara e a largura do título da peça "o caminho do lead". A folga é para a seção que nasceu colada na peça do caminho e aqui vem antes de outra.
   Três armadilhas ao montar página nova com estas peças (08/10): 1) página que usa a tela viva do app (.gads-app) precisa chamar gads-app.css no topo e trazer o molde do rodapé da Google Ads, senão a tela sai sem forma.
   2) o vidro azul (.ssm-inteiro) fica preso enquanto a grade preta (.ssm-fases) sobe por cima, então só vale com ela logo depois e com .pg-ssm no body. Fora disso, usar a versão parada (.scr-prova).
   3) cabeçalho e rodapé são cópia por página: a fonte é a layout-home.html, e toda mudança no menu é replicada de lá para as outras */
.pg-sol .topo:not(.solido){background:var(--bm-azul);border-color:transparent}
.pg-sol .caminho .tela:first-child .tt{max-width:8.6em}
.sec.sol-folga{padding-bottom:clamp(96px,13.54vw,260px)}

/* tela própria dentro do notebook da dobra (pedido do Gabriel, 08/10): a imagem img/aut-notebook.png continua a mesma, e uma tela em HTML cobre a área do visor,
   medida na imagem de 1500px (visor de 169 a 1330 na largura e de 204 a 981 na altura). Tudo dentro dela é medido pela largura do notebook (cqw), então encolhe junto. Só enfeite, por isso aria-hidden */
.sol-note{position:relative;container-type:inline-size}
.sol-note img{display:block;width:100%;height:auto}
.sol-note-tela{position:absolute;left:11.27%;top:13.6%;width:77.47%;height:51.87%;overflow:hidden;border-radius:.9cqw .9cqw 0 0;background:#fff;color:#000;font-size:1.3cqw;line-height:1.35;text-align:left}
.sol-note-tela::before{content:"";position:absolute;left:50%;top:0;width:9%;height:3.4%;translate:-50% 0;border-radius:0 0 .6cqw .6cqw;background:#000}
.snt-topo{display:flex;align-items:center;gap:1.4em;padding:2.8em 3em 1.2em;border-bottom:1px solid #EDEDED}
.snt-topo b{font:700 1.7em/1 var(--bm-fonte-titulo);text-transform:uppercase;color:var(--bm-azul)}
.snt-topo span{display:flex;gap:1.6em;margin-left:auto;color:#666;font-weight:500}
.snt-topo i{margin-left:auto;padding:.5em 1.1em;border-radius:99em;background:var(--bm-azul);color:#fff;font-style:normal;font-weight:600}
.snt-topo span + i{margin-left:0}
.snt-corpo{display:grid;grid-template-columns:1fr 1fr;gap:3em;align-items:center;padding:3.4em 3em}
.snt-corpo .snt-tit{display:block;font:600 4em/1 var(--bm-fonte-titulo);text-transform:uppercase}
.snt-corpo .snt-tit b{color:var(--bm-azul)}
.snt-corpo p{margin-top:1em;color:#555;font-weight:500}
.snt-bt{display:inline-block;margin-top:1.4em;padding:.7em 1.4em;border-radius:99em;background:var(--bm-azul);color:#fff;font-weight:600}
.snt-card{padding:1.6em;border:1px solid #E4E4E4;border-radius:.8em;background:#F7F7F7}
.snt-card > b{display:block;margin-bottom:.9em;font-weight:700}
.snt-card ul{display:grid;gap:.6em;list-style:none}
.snt-card li{display:flex;align-items:center;gap:.7em;padding:.75em .9em;border:1px solid #E4E4E4;border-radius:.5em;background:#fff;font-weight:500}
.snt-card li svg{flex:none;width:1.3em;height:1.3em;color:var(--bm-azul)}
.snt-card li em{margin-left:auto;font-style:normal;font-weight:600;color:var(--bm-azul)}

/* celular no lugar do notebook (Gabriel 21/10, Remoção de malware e Personalização): as páginas com mockup na dobra intercalam notebook e celular.
   O celular fica de pé no meio da coluna, com a altura presa à da janela pra caber na dobra. Tudo dentro dele é medido pela largura do celular (cqw), então a tela encolhe junto */
.sol-cel-palco{display:grid;place-items:center;align-self:center;padding:24px 0}
.aut-hero:has(.sol-cel){padding-bottom:clamp(56px,6.25vw,120px)}
.aut-hero-grade:has(.sol-cel){align-items:center}
.aut-hero-grade:has(.sol-cel) .ssm-hero-texto{padding-top:0}   /* o texto centra na altura do celular, em vez de começar no alto e descer além dele (Gabriel 21/10) */   /* respiro no pé da dobra: sem ele o celular e o botão encostavam no fim dela (Gabriel 21/10) */
.sol-cel{position:relative;height:min(540px,62svh);aspect-ratio:9/19.5;padding:8px;border-radius:13%/6%;background:#1A1A1A;box-shadow:0 1px 0 1px #3A3A3A,0 30px 70px rgba(0,0,0,.18);container-type:inline-size}   /* moldura fina, como a de um aparelho de hoje */
.sol-cel::before,.sol-cel::after{content:"";position:absolute;right:-1.4%;width:1.4%;border-radius:0 3px 3px 0;background:#2A2A2A}   /* botões de volume e de ligar na lateral */
.sol-cel::before{top:22%;height:7%}
.sol-cel::after{top:32%;height:11%}
.sol-cel-tela{position:relative;height:100%;overflow:hidden;border-radius:11.5%/5.3%;background:#fff;color:#000;font-size:4.6cqw;line-height:1.35;text-align:left}
.sol-cel-tela::before{content:"";position:absolute;z-index:1;left:50%;top:2.2%;width:28%;height:3%;translate:-50% 0;border-radius:99em;background:#1A1A1A}   /* a ilha no alto da tela */
.sol-cel-tela::after{content:"";position:absolute;left:50%;bottom:1.6%;width:34%;height:.9%;translate:-50% 0;border-radius:99em;background:#1A1A1A}   /* a barrinha de voltar ao início, no pé da tela */
.sol-cel .snt-topo{padding:5.6em 1.8em 1.1em}
.sol-cel .snt-topo b{font-size:1.3em;white-space:nowrap}
.sol-cel .snt-corpo{grid-template-columns:minmax(0,1fr);gap:1.8em;padding:2em 1.8em}
.sol-cel .snt-corpo .snt-tit{font-size:3em}
.sol-cel .snt-card{padding:1.3em}
.sol-cel .snt-card li{padding:.7em .8em;font-size:.95em}
@media(max-width:960px){
  .sol-cel-palco{padding:16px 0}
  .sol-cel{height:auto;width:min(62%,280px)}
}

/* quadro no lugar da foto da seção "para quem" (pedido do Gabriel, 08/10): painel azul com arcos e um cartão que mostra o assunto da página. Ocupa a mesma vaga e a mesma proporção da foto (img/aut-time.jpg). Só enfeite, por isso aria-hidden */
.sol-quadro{display:grid;place-items:center;aspect-ratio:1145/1374;padding:9%;overflow:hidden;border-radius:10px;container-type:inline-size;
  background:radial-gradient(circle at 100% 100%,transparent 0 34%,#1736B0 34% 48%,transparent 48% 62%,#1736B0 62% 76%,transparent 76%),var(--bm-azul)}
.sol-quadro .snt-card{width:100%;padding:2em;border:0;background:#fff;color:#000;font-size:3.1cqw;line-height:1.35;box-shadow:0 2cqw 6cqw rgba(0,0,0,.25)}
.sol-quadro .snt-card li{background:#F7F7F7}

/* páginas de solução no celular (Gabriel, 08/10): os padrões da revisão da home aplicados às peças das páginas modelo, que as dez páginas novas reaproveitam.
   A margem lateral de 20px já vem da regra geral (--lat). Aqui entram: 12px entre cards empilhados, card sem altura mínima, título antes da imagem na dobra, e 44px de área de toque */
@media(max-width:560px){
  :is(.ssm-duo,.ssm-grade,.aut-trio,.gads-cards,.scr-partes,.scr-trio,.scr-mosaico,.scr-par){gap:12px}
  :is(.aut-trio,.ssm-duo) li,.scr-parte,.gads-card{min-height:0}
  .aut-passos{gap:28px}
  .aut-hero-grade{gap:32px}
  .aut-hero-grade .ssm-hero-texto{order:-1;padding-top:0}   /* na dobra espelhada o notebook vinha antes do título. No celular o título abre a página, como na home */
  .ssm-pilulas{gap:8px}
  .ssm-rapido{padding:32px 20px}
  .ssm-modos button{min-width:44px;min-height:44px}
  .aut-time ul{margin:20px 0}
  .aut-time li{min-height:44px}
  .sec.sol-folga{padding-bottom:72px}
  .sol-quadro{aspect-ratio:1;padding:6%}   /* quadro quadrado, para não ocupar uma tela inteira antes do texto */
  .sol-quadro .snt-card{font-size:3.6cqw}
}

/* dobra com animação própria (data-hero na .hero, teste 15/10). A marca também desliga a faixa preta da home (layout.js) */
/* o título sobe linha por linha de trás de uma máscara: a linha anda pra cima e o recorte abre na mesma medida, então ela aparece sempre dentro do próprio lugar */
@keyframes hero-linha{from{transform:translateY(100%);clip-path:inset(0 0 100% 0)}to{transform:none;clip-path:inset(0)}}
@keyframes hero-bloco{from{opacity:0;transform:translateY(16px)}}
@media(prefers-reduced-motion:no-preference){
  .hero[data-hero] .h1>*{animation:hero-linha 1s cubic-bezier(.16,1,.3,1) backwards}
  .hero[data-hero] .h1>:nth-child(2){animation-delay:.08s}
  .hero[data-hero] .h1>:nth-child(3){animation-delay:.16s}
  .hero[data-hero] .h1>:nth-child(4){animation-delay:.24s}
  .hero[data-hero] :is(.rot,.lead,.acoes){animation:hero-bloco .8s cubic-bezier(.16,1,.3,1) .45s backwards}
}
/* home: o símbolo se monta (Gabriel 21/10). As barras sobem do pé e cada anel se desenha no lugar como um traço: a metade de cima da esquerda pra direita,
   a de baixo volta da direita pra esquerda, de fora pra dentro. Nada gira nem passa por cima de outra peça (a versão girando "atropelava").
   Cada arco é um traço da largura do anel (pathLength 1), e o título sobe linha por linha saindo do desfoque (hm-linha) */
/* abertura da home (Gabriel 21/10): o "o" da marca aparece branco no azul, a câmera entra pelo vão de cima dele e o site aparece do outro lado.
   É um SVG fixo por cima de tudo: um azul enorme com o vão do "o" recortado (máscara) e o símbolo por cima. O vão começa tampado de azul,
   e na entrada a tampa some e tudo cresce em volta do centro do vão (52% 31% do símbolo). Só CSS; sem movimento, a abertura não existe.
   --in atrasa a entrada da dobra até a abertura passar. Referência do Gabriel: https://specia1ne.com/ */
.hm-intro{display:none}
.sem-abertura .hm-intro{display:none!important}   /* chegou de outra página do site: sem abertura (o script no head da home decide) */
@keyframes hm-intro-sim{from{opacity:0;scale:.6}}
@keyframes hm-intro-zoom{0%{scale:1}100%{scale:70;visibility:hidden}}
@keyframes hm-intro-tampa{to{opacity:0}}
@media(prefers-reduced-motion:no-preference){
  .sem-abertura .hm-hero{--in:0s}
  .hm-hero{--in:1.05s}   /* a dobra começa a se montar enquanto a câmera ainda atravessa o vão, então o site já aparece vivo do outro lado */
  .hm-intro{display:block;position:fixed;left:50%;top:50%;z-index:1000;width:clamp(96px,10vw,150px);height:auto;margin:calc(clamp(96px,10vw,150px) * -.507) 0 0 calc(clamp(96px,10vw,150px) * -.5);overflow:visible;pointer-events:none;
    transform-origin:52% 31%;animation:hm-intro-sim .5s cubic-bezier(.2,.8,.3,1) backwards,hm-intro-zoom .85s cubic-bezier(.7,0,.85,.4) .8s forwards}
  .hm-intro-tampa{animation:hm-intro-tampa .15s linear .8s forwards}
}
@keyframes hm-barra{from{transform:scaleY(0)}}
@keyframes hm-linha{from{opacity:0;translate:0 24px;filter:blur(8px)}}@keyframes hm-traco{from{stroke-dashoffset:1}}
@media(prefers-reduced-motion:no-preference){
  .hm-hero .hf-barra{transform-box:view-box;transform-origin:0 902px;animation:hm-barra .7s cubic-bezier(.65,0,.15,1) calc(var(--in) + var(--d)) backwards}
  .hm-hero .hf-arco{stroke-dasharray:1 1;animation:hm-traco .6s cubic-bezier(.45,0,.25,1) calc(var(--in) + var(--d)) backwards}
  .hm-hero > .dentro .h1>*{animation:hm-linha 1.1s cubic-bezier(.2,.8,.3,1) backwards}   /* a máscara cortava as letras no meio (Gabriel 21/10): a linha agora sobe pouco, saindo do desfoque */
  .hm-hero > .dentro .h1>:nth-child(1){animation-delay:calc(var(--in) + .3s)}
  .hm-hero > .dentro .h1>:nth-child(2){animation-delay:calc(var(--in) + .4s)}
  .hm-hero > .dentro .h1>:nth-child(3){animation-delay:calc(var(--in) + .5s)}
  .hm-hero > .dentro .h1>:nth-child(4){animation-delay:calc(var(--in) + .6s)}
  .hm-hero > .dentro :is(.rot,.lead,.acoes){animation:hm-linha 1s cubic-bezier(.2,.8,.3,1) calc(var(--in) + .8s) backwards}
  .hm-hero > .dentro .acoes{animation-delay:calc(var(--in) + .9s)}
}
/* cases 01 · roda de cases (Gabriel, 15/10, ref. recent.design "portfolio carousel component"). As capas ficam todas no centro do palco
   e o layout.js escreve a posição de cada uma a cada quadro: anel na entrada, coluna no fio depois, com pescoço de gota quando para. Desde 19/10 o desenho é WebGL no .pc-gl. Texto à esquerda, lista à direita, e no celular o palco sobe para o topo */
.pc-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:32px}
.pc-palco{--meio:61%;position:absolute;inset:0;z-index:1;pointer-events:none}   /* --meio: centro da roda, no vão entre o texto e a lista */
.pc-roda{position:absolute;left:var(--meio);top:50%;list-style:none}
/* as capas em HTML dão o tamanho e as imagens. Com WebGL (.gl) quem desenha é o canvas e elas ficam escondidas; sem WebGL aparece só a da vez (.vez) */
.pc-roda li{--cw:clamp(240px,24vw,460px);position:absolute;left:calc(var(--cw) / -2);top:calc(var(--cw) * -.34);width:var(--cw);height:calc(var(--cw) * .68);overflow:hidden;border-radius:14px;opacity:0;transition:opacity .3s}
.pc-roda li.vez{opacity:1}
.gl .pc-roda{visibility:hidden}
.pc-roda img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.pc-gl{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:auto;cursor:grab;touch-action:pan-y}   /* no toque, arrastar na vertical continua rolando a página */
.pc-gl.na-capa{cursor:pointer}   /* sobre a capa da vez o clique abre o case (layout.js) */
.pc-hero.arrastando .pc-gl{cursor:grabbing}
.pc-lado{position:relative;z-index:2;max-width:min(34vw,560px)}
/* peso das páginas de soluções (.ssm-h1): 500 com um trecho em 700. Sempre em três linhas (Gabriel, 19/10): cada span é uma linha que não quebra,
   e a letra acompanha a largura da tela para a linha mais longa caber na coluna de texto */
.pc-h1{margin-top:10px;font-size:clamp(34px,3.4vw,66px);line-height:1}
.pc-h1 span{white-space:nowrap}
.pc-h1 b{display:inline}
.pc-atual{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:baseline;margin:40px 0 32px;padding-top:20px;border-top:1px solid rgba(255,255,255,.3)}
.pc-n{grid-row:span 2;font-size:var(--bm-t12);font-weight:700;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.pc-nome{font:500 clamp(28px,2.4vw,44px)/1 var(--bm-fonte-titulo);text-transform:uppercase}
.pc-tipo{margin-top:8px;font-size:14px;font-weight:500;opacity:.75}
/* a lista de cases divide o nome com a lista dos cards (.pc-lista lá em cima), que traz margin-top:auto, respiro e fonte grande.
   Aqui isso some: era o margin-top:auto que empurrava a lista para o pé da dobra (Gabriel pediu ela mais alta, 19/10).
   Tudo escopado por .pc-hero: sem escopo, o centro e o vão de 24px vazavam pras listas da seção 2 da Parcerias */
.pc-hero .pc-lista{position:relative;z-index:2;align-self:center;display:grid;gap:24px;justify-items:start;margin:0;padding:0;font:inherit;text-transform:none}
/* passagem da primeira dobra para a seção azul, efeito A (cortina) de docs/marca/movimento-transicao-secoes.html, o mesmo da Google Ads (Gabriel, 19/10):
   a dobra trava no topo e a azul sobe por cima dela em linha reta, acompanhando a rolagem. Só em tela larga: no celular a dobra é mais alta que a janela */
@media(min-width:961px){
  .pc-hero{position:sticky;top:0}
  .pc-hero + .pc-ganha{position:relative;z-index:3}
}
.pc-lista ol{display:grid;list-style:none}
.pc-lista ol button{position:relative;padding:7px 0 7px 16px;border:0;background:none;color:#fff;font:600 13px/1 inherit;text-align:left;opacity:.5;cursor:pointer;transition:opacity .3s}
.pc-lista ol button::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--bm-azul);scale:0;transition:scale .3s}
.pc-lista ol button:hover{opacity:.85}
.pc-lista ol button[aria-pressed=true]{opacity:1}
.pc-lista ol button[aria-pressed=true]::before{scale:1}
.pc-lista button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.pc-setas{display:flex;gap:8px}
/* setas no padrão de botão da Boldman (Gabriel, 19/10): a base .b (55px, pílula, sobe 2px no hover, cursor da marca) no jeito do secundário b2 do system,
   vazado com borda na cor do texto e fundo leve no hover. Só ícone, então a pílula vira círculo. O system ainda não tem botão só de ícone: é lacuna */
.pc-seta{width:55px;padding:0;border-color:currentColor;background:none;color:#fff}
.pc-seta:hover{background:rgba(255,255,255,.08)}
.pc-seta svg{width:20px;height:20px}   /* ícone de 20px do system. Sem isso a regra .pc-lista svg das listas dos cards (mesmo nome de classe) encolhe a seta */
/* celular (Gabriel, 19/10): uma coluna na ordem selo, título, roda, nome do case, setas e botão. O texto da .pc-lado se solta (display:contents)
   para a roda entrar entre o título e o nome. A lista de nomes some e quem troca são as setas, logo abaixo do nome.
   --passo é a distância entre capas em alturas de capa (o layout.js lê): menor que no desktop, para as vizinhas aparecerem no palco mais baixo */
@media(max-width:960px){
  .pc-hero{grid-template-columns:1fr;gap:0}
  .pc-lado{display:contents}
  .pc-lado .rot{order:1;justify-self:start}
  .pc-h1{order:2}
  .pc-palco{--meio:50%;--passo:1.34;order:3;position:relative;overflow:hidden;height:min(112vw,520px);margin:28px calc(var(--lat) * -1) 0;
    -webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}   /* as vizinhas somem esmaecendo, sem corte seco na borda do palco */
  .pc-roda li{--cw:min(70vw,400px)}
  .pc-atual{order:4;margin:20px 0 0}
  .pc-hero .pc-lista{order:5;margin-top:20px}
  .pc-lista ol{display:none}
  .pc-lado .acoes{order:6;margin-top:28px}
}

/* ───── página Blog (layout-blog.html, Gabriel 20/10) ─────
   Toda classe nova leva o prefixo bl-. A dobra é a da Sobre (body com .pg-sobre), e o fecho é o .gads-fecho com um campo de e-mail.
   O filtro e o card seguem o system (docs/marca/system.html, #filtro e #card): pílula cheia na ativa, card sem sombra que sobe 2px e escurece a borda */
/* dobra centrada com o título da home (Gabriel 20/10): caixa alta grande, linhas finas e grossas alternando, selo acima */
/* fundo azul da home (.azul, Gabriel 20/10), com os três anéis do desenho do Gabriel centrados atrás do título. A seleção vira branca */
.pg-blog main{background:var(--bm-azul)}   /* o blog herda o .pg-sobre, que pinta o main de preto; aqui a dobra é azul, e o preto aparecia nas pontas do cartão de baixo (Nico 23/10) */
.pg-blog .bl-fundo{inset:0;overflow:hidden}   /* corta os anéis na dobra, pra a dobra deixar a caixa de assuntos passar pra seção de baixo */
.pg-blog .bl-hero .fundo{top:50%;left:50%;right:auto;bottom:auto;width:min(2500px,185vw);height:auto;aspect-ratio:auto;transform:translate(-50%,-50%)}   /* grande o bastante pro título caber dentro do anel menor */
/* busca da dobra (Gabriel 20/10), na peça Busca do system (docs/marca/system.html#busca): lupa à esquerda, limpar só com texto, sugestões em grupos.
   Vestida no padrão do site: pílula de 55px como o .b, com o botão tangerina (.b1, a ação principal) encaixado dentro, à direita.
   O foco é branco, já que o azul do system some no fundo azul */
.bl-busca{position:relative;width:min(600px,100%);margin:32px auto 0;text-align:left}
.bl-busca>.iconify{position:absolute;left:22px;top:27.5px;transform:translateY(-50%);color:var(--bm-n25);pointer-events:none;z-index:1}
.bl-busca input{display:block;width:100%;height:55px;padding:0 160px 0 54px;border:1px solid transparent;border-radius:var(--bm-pill);background:#fff;color:var(--bm-cinza);font:500 16px/1 var(--bm-fonte)}
.bl-buscar{position:absolute;right:5px;top:5px;height:45px;padding:0 24px;font-family:inherit}
.bl-busca .bl-limpar{right:118px;top:27.5px}
.bl-busca input::placeholder{color:var(--bm-n25)}
.bl-busca input::-webkit-search-cancel-button{display:none}
.bl-busca input:focus-visible{outline:2px solid #fff;outline-offset:2px}
.bl-limpar{position:absolute;right:8px;top:26px;transform:translateY(-50%);width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--bm-pill);background:none;color:var(--bm-n25);cursor:pointer;transition:background .2s}
.bl-limpar:hover{background:var(--bm-n95)}
.bl-limpar[hidden]{display:none}
/* painel de ajuda (refeito 20/10, o primeiro pesava): cartão branco de canto 20 e respiro de 16, sem rolagem à vista.
   Vazio mostra os assuntos em pílula, no desenho do .bl-filtro. Com texto, cada post é uma linha de canto 12 com o assunto em etiqueta à direita */
.bl-sug{position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:5;overflow:auto;scrollbar-width:none;padding:16px;background:#fff;border-radius:var(--bm-r3);box-shadow:0 24px 60px rgba(0,0,0,.28);color:var(--bm-cinza)}
.bl-sug::-webkit-scrollbar{display:none}
.bl-sug b{display:block;margin:0 0 12px 4px;font:700 12px/1 var(--bm-fonte);text-transform:uppercase;letter-spacing:.08em;color:var(--bm-n25)}
.bl-sug-pilulas{display:flex;flex-wrap:wrap;gap:8px}
.bl-op{display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 12px;border-radius:12px;font-size:15px;font-weight:500;line-height:1.3;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.bl-op .iconify{flex:none;color:var(--bm-azul)}
.bl-op:hover,.bl-op[aria-selected="true"]{background:var(--bm-n95)}
.bl-op-tag{flex:none;margin-left:auto;padding:4px 10px;border-radius:var(--bm-pill);background:var(--bm-n95);font-size:12px;font-weight:600;color:var(--bm-n25);white-space:nowrap}
.bl-op:hover .bl-op-tag,.bl-op[aria-selected="true"] .bl-op-tag{background:#fff}
.bl-op-pilula{min-height:44px;padding:0 18px;border:1.5px solid rgba(0,0,0,.24);border-radius:var(--bm-pill);font-size:14px;font-weight:600;color:var(--bm-n25)}
.bl-op-pilula:hover,.bl-op-pilula[aria-selected="true"]{background:none;border-color:var(--bm-azul);color:var(--bm-azul)}
.bl-sug-vazio{margin:4px;font-size:15px;color:var(--bm-n25)}
@media(max-width:600px){.bl-op-tag{display:none}}
:is(.bl-buscar,.bl-form .b) .iconify{display:none}
/* blog no celular (Gabriel 20/10) */
@media(max-width:960px){
  .pg-blog .bl-hero{justify-content:center;padding-top:calc(var(--topo-y) + var(--topo-h) + 32px)}   /* a Sobre desce o texto pro crachá caber em cima; aqui não tem crachá */
  .pg-blog .sb-hero.bl-hero .titulo{--corpo:clamp(32px,10vw,44px)}   /* "por trás do marketing" cabe numa linha só. Seletor mais forte que o do computador, que vem depois no arquivo */
}
@media(max-width:600px){
  /* os dois botões encaixados em pílula (busca e e-mail) viram só a seta, e o texto de dentro do campo cabe inteiro */
  .bl-buscar,.bl-form .b.b-azul{flex:none;width:45px;padding:0}
  .bl-form .b.b-azul{width:51px}
  /* o "nome@empresa.com.br" perdia a última letra no campo de 174px. A letra fica em 16px, porque abaixo disso o iPhone dá zoom ao tocar no campo */
  .bl-form .bl-linha{gap:4px;padding-left:16px}   /* .bl-form na frente: a regra do campo vem depois no arquivo */
  .bl-fecho .gads-fecho-card{padding-right:48px}
  .bl-buscar-txt{display:none}
  :is(.bl-buscar,.bl-form .b) .iconify{display:block}
  .bl-busca input{padding-right:60px}
  .bl-busca .bl-limpar{right:54px}
  /* (.bl-grade na frente: as regras do card vêm depois no arquivo) card deitado: miniatura quadrada da capa à esquerda, texto à direita. Em pé, cada card passava de 350px */
  .bl-grade .bl-card{display:grid;grid-template-columns:88px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:16px;padding:16px}
  .bl-grade .bl-card .bl-arte{grid-row:1/-1;width:88px;height:88px;aspect-ratio:auto;margin:0;align-self:start}
  .bl-grade .bl-card .bl-arte svg{width:176px;height:88px;margin-left:-44px}   /* o desenho é 2:1: aqui aparece o miolo dele, em vez dele inteiro miúdo */
  .bl-grade .bl-card :is(.bl-tag,h3,.bl-pe){grid-column:2;justify-self:start}
  .bl-grade .bl-card .bl-pe{justify-self:stretch}
  .bl-grade .bl-card h3{margin:10px 0 12px;font-size:20px}
}
@media(prefers-reduced-motion:no-preference){.hero[data-hero] .bl-busca{animation:hero-bloco .8s cubic-bezier(.16,1,.3,1) .55s backwards}}
/* anéis em onda (Gabriel 20/10): na entrada cada anel cresce do centro, do menor pro maior, e depois respira devagar na mesma ordem.
   O desenho está escrito na página (svg em linha) pra cada anel ter a própria animação. Cada grupo é um círculo inteiro, então o centro dele é o centro da dobra */
.bl-anel{transform-box:fill-box;transform-origin:center}
@keyframes bl-anel-entra{from{opacity:0;transform:scale(.55)}}
@keyframes bl-anel-respira{to{scale:1.025}}
/* a respiração é do desenho inteiro, não de cada anel: assim quem anima é a placa de vídeo, sem redesenhar o svg de 2.600px a cada quadro (Gabriel 22/10: o blog travava) */
@media(prefers-reduced-motion:no-preference){
  .bl-anel{animation:bl-anel-entra 1.6s cubic-bezier(.16,1,.3,1) backwards}
  .bl-anel-2{animation-delay:.15s}
  .bl-anel-3{animation-delay:.3s}
  :is(.bl-aneis,.bp-aneis){animation:bl-anel-respira 4s ease-in-out 2s infinite alternate}
}
/* home (Gabriel 21/10, pedido do Douglas): a mesma caixa do blog em volta de "marketing", na versão branca do fundo azul. Abre quando a última linha do título assenta */
.hm-hero .bl-sel::before,.pg-blog .bl-hero .bl-sel::before{background:rgba(255,255,255,.16);border-color:#fff}
.hm-hero .bl-sel::after,.pg-blog .bl-hero .bl-sel::after{background:radial-gradient(circle,#fff 4px,var(--bm-azul) 4.5px 5.5px,transparent 6px) 0 0/12px 12px no-repeat,
  radial-gradient(circle,#fff 4px,var(--bm-azul) 4.5px 5.5px,transparent 6px) 100% 100%/12px 12px no-repeat}
.pg-blog .sb-hero .dentro{display:flex;flex-direction:column;align-items:center;text-align:center}
.pg-blog .sb-hero .titulo{flex-direction:column;align-items:center;--corpo:clamp(44px,4.5vw,84px)}
/* Nico 23/10: no computador, a dobra fica do tamanho do texto, e a caixa de assuntos passa por cima da seção de baixo.
   Quem corta os anéis é a .bl-fundo, então a dobra pode deixar a caixa sair (overflow-y visível) */
.pg-blog .bl-hero{overflow-x:clip;overflow-y:visible}
.pg-blog .bl-hero:has(.bl-sug:not([hidden])){z-index:4}   /* o cartão de baixo é z-index 3 (passagem em pilha) e cobria a caixa aberta. O layout.js fecha a caixa ao rolar */
@media(min-width:961px){.pg-blog .bl-hero{min-height:0;padding-bottom:96px}}
.pg-blog .sb-hero .rot{margin:0 0 8px}   /* a linha do título já tem folga em cima da letra, então o espaço visto é maior que a margem */
.pg-blog .sb-hero .lead{max-width:540px;margin:28px auto 0;text-wrap:balance}
@media(min-width:961px){.pg-blog .sb-hero .lead{max-width:none;white-space:nowrap}}   /* uma linha só no computador (Gabriel 20/10). No celular quebra */
/* destaque em caixa de seleção do Figma (Gabriel 20/10): retângulo azul translúcido com borda e dois pontos nos cantos opostos.
   Abre da esquerda pra direita depois que o título termina de subir, e os pontos aparecem quando a caixa fecha */
.bl-sel{position:relative;display:inline-block;isolation:isolate}
.bl-sel::before{content:"";position:absolute;inset:-.02em -.1em;z-index:-1;background:rgba(27,65,209,.45);border:2px solid var(--bm-azul)}
.bl-sel::after{content:"";position:absolute;inset:calc(-.02em - 5px) calc(-.1em - 5px);pointer-events:none;
  background:radial-gradient(circle,var(--bm-azul) 4px,#fff 4.5px 5.5px,transparent 6px) 0 0/12px 12px no-repeat,
             radial-gradient(circle,var(--bm-azul) 4px,#fff 4.5px 5.5px,transparent 6px) 100% 100%/12px 12px no-repeat}
/* o trecho dentro da caixa se apaga e se escreve de novo (layout.js), com o cursor piscando no fim. A caixa acompanha a largura do texto */
.h1 .bl-sel{display:inline-block;min-width:.4em;white-space:nowrap}
.h1 .bl-texto{display:inline}   /* o .h1 span da home vira linha inteira, e aqui texto e cursor dividem a mesma linha */
.bl-cursor{display:inline-block;width:.06em;height:.78em;margin-left:.06em;vertical-align:-.04em;background:currentColor;animation:bl-pisca 1s steps(1) infinite}
@keyframes bl-pisca{50%{opacity:0}}
@keyframes bl-sel-abre{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes bl-sel-ponto{from{opacity:0;transform:scale(.6)}}
@media(prefers-reduced-motion:no-preference){
  .bl-sel::before{animation:bl-sel-abre .7s cubic-bezier(.65,0,.35,1) 1s backwards}
  .bl-sel::after{animation:bl-sel-ponto .3s cubic-bezier(.16,1,.3,1) 1.6s backwards}
  .hm-hero .bl-sel::before{animation-delay:calc(var(--in) + 1.5s)}
  .hm-hero .bl-sel::after{animation-delay:calc(var(--in) + 2.1s)}
}
.bl-indice{background:#F7F7F7;color:#000}
/* home 08c · do blog em bento (Gabriel 21/10). Quatro colunas e duas linhas: o mais lido em azul ocupa o quadrado da esquerda,
   dois posts (o .bl-card do blog, com a capa desenhada) em cima à direita e o glossário em preto embaixo deles. No celular, um embaixo do outro */
.hm-blog{background:#F7F7F7;color:#000}
.hm-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto;gap:16px}
.hm-bento-top{grid-column:1/3;grid-row:1/3;position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:clamp(420px,30vw,560px);padding:clamp(24px,2.5vw,48px);border-radius:var(--bm-r2);background:var(--bm-azul);color:#fff;overflow:hidden;isolation:isolate;transition:transform .2s,background .2s}
.hm-bento-top::after{content:"";position:absolute;z-index:-1;right:-22%;bottom:0;width:84%;aspect-ratio:1193/597;background:url(img/sobre-hero-arcos.svg) center/contain no-repeat;opacity:.55;transition:translate .5s cubic-bezier(.2,.8,.3,1)}   /* os arcos da Sobre nascendo do pé do quadro no canto direito, como na dobra da Sobre (Gabriel 21/10: soltos no alto ficavam cortados no meio), subindo um pouco no hover */
.hm-bento-top:hover{transform:translateY(-2px);background:#1433A8}
.hm-bento-top:hover::after{translate:0 -6%}
.hm-bento-top:focus-visible{outline:2px solid var(--bm-azul);outline-offset:3px}
.hm-bento-rot{margin-bottom:16px;font-size:var(--bm-t12);font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.hm-bento-top .bl-tag{background:rgba(255,255,255,.14);color:#fff}
.hm-bento-top h3{max-width:11em;margin:auto 0 0;padding-top:40px;font:500 clamp(36px,3.33vw,64px)/1 var(--bm-fonte-titulo);text-transform:uppercase;text-wrap:balance}
.hm-bento-top .bl-pe{margin-top:32px;color:rgba(255,255,255,.7)}
.hm-bento-top .bl-pe .iconify{color:#fff}
.hm-bento .bl-card{min-height:0}
.hm-bento-glo{grid-column:3/5;display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:clamp(24px,2.08vw,40px);border-radius:var(--bm-r2);background:#0D0D0D;color:#fff}
.hm-bento-glo h3{font:500 clamp(26px,1.88vw,36px)/1.05 var(--bm-fonte-titulo);text-transform:uppercase}
.hm-bento-glo p{max-width:30em;margin-top:10px;font-size:15px;line-height:1.5;opacity:.7}
.hm-bento-glo ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.hm-bento-glo a{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border:1px solid rgba(255,255,255,.25);border-radius:var(--bm-pill);color:#fff;font-weight:700;font-size:14px;text-decoration:none;transition:background .2s,border-color .2s,color .2s}
.hm-bento-glo a:hover{background:#fff;border-color:#fff;color:#000}
.hm-bento-glo .hm-bento-mais{border-color:transparent;background:var(--bm-azul)}
.hm-blog-todos{display:inline-flex;margin-top:16px;color:var(--bm-azul)}   /* colado no bento (Gabriel 21/10, com 40px ficava solto) */
@media(max-width:960px){
  .hm-bento{grid-template-columns:minmax(0,1fr)}
  .hm-bento :is(.hm-bento-top,.hm-bento-glo){grid-column:auto;grid-row:auto}
  .hm-bento-top{min-height:380px}
  .hm-bento-glo a{height:44px}   /* área de toque */
  /* os dois posts deitados, como no índice do blog: miniatura quadrada da capa à esquerda, texto à direita */
  .hm-bento .bl-card{display:grid;grid-template-columns:88px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:16px;padding:16px}
  .hm-bento .bl-card .bl-arte{grid-row:1/-1;width:88px;height:88px;aspect-ratio:auto;margin:0;align-self:start}
  .hm-bento .bl-card .bl-arte svg{width:176px;height:88px;margin-left:-44px}
  .hm-bento .bl-card :is(.bl-tag,h3,.bl-pe){grid-column:2;justify-self:start}
  .hm-bento .bl-card .bl-pe{justify-self:stretch}
  .hm-bento .bl-card h3{margin:10px 0 12px;font-size:20px}
}
.bl-indice .cabeca{margin-bottom:24px}
.bl-filtro{display:flex;flex-wrap:wrap;gap:8px}
.bl-filtro button{height:44px;padding:0 18px;border:1.5px solid rgba(0,0,0,.24);border-radius:var(--bm-pill);background:none;font:600 14px/1 var(--bm-fonte);color:#5E5E5E;transition:border-color .2s,color .2s,background .2s}
.bl-filtro button:hover{border-color:var(--bm-azul);color:var(--bm-azul)}
.bl-filtro button[aria-pressed="true"]{border-color:var(--bm-azul);background:var(--bm-azul);color:#fff}
.bl-conta{margin:20px 0 16px;font-size:var(--bm-t12);color:#5E5E5E}
.bl-conta b{color:#000}
.bl-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.bl-card{display:flex;flex-direction:column;align-items:flex-start;min-height:clamp(220px,14vw,268px);padding:clamp(20px,1.67vw,32px);border:1px solid rgba(0,0,0,.12);border-radius:var(--bm-r2);background:#fff;transition:transform .2s,border-color .2s}
.bl-card:hover,.bl-card:focus-visible{transform:translateY(-2px);border-color:rgba(0,0,0,.4)}
.bl-card:focus-visible{outline:2px solid var(--bm-azul);outline-offset:2px}
.bl-tag{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:var(--bm-pill);background:rgba(27,65,209,.1);color:var(--bm-azul);font-size:var(--bm-t12);font-weight:600;line-height:1}
/* título de post é pergunta longa: condensada em caixa alta como o título de card do system, num corpo menor pra fechar em três linhas */
.bl-card h3,.bl-top h3{margin:20px 0 24px;font:500 clamp(22px,1.46vw,28px)/1.08 var(--bm-fonte-titulo);text-transform:uppercase;text-wrap:balance}
.bl-pe{display:flex;align-items:center;justify-content:space-between;align-self:stretch;margin-top:auto;font-size:var(--bm-t12);color:#5E5E5E}
.bl-pe .iconify{color:#000;transition:transform .2s}
:is(.bl-card,.bl-top):hover .bl-pe .iconify{transform:translateX(4px)}
.bl-card[hidden]{display:none}
/* capa do card (Gabriel 20/10, ref. blog da Linear): painel #F7F7F7 com a ilustração de traço que o layout.js desenha pelo assunto.
   No hover do card a ilustração se mexe, cada peça na sua vez (--i): o pixel pisca, o traço se redesenha, a camada pulsa de dentro pra fora */
.bl-arte{display:block;align-self:stretch;aspect-ratio:2/1;margin-bottom:20px;border-radius:6px;background:#F7F7F7;overflow:hidden}
.bl-arte svg{display:block;width:100%;height:100%}
.bl-arte .cam{transform-box:fill-box;transform-origin:center}
@keyframes bl-px{40%{opacity:.1}}
@keyframes bl-tr{from{stroke-dashoffset:1}}
@keyframes bl-cam{50%{transform:scale(.94)}}
@media(prefers-reduced-motion:no-preference){
  .bl-card:is(:hover,:focus-visible) .bl-arte .px{animation:bl-px .5s ease-in-out calc(var(--i) * 45ms)}
  .bl-card:is(:hover,:focus-visible) .bl-arte .tr{stroke-dasharray:1;animation:bl-tr .8s cubic-bezier(.65,0,.35,1) calc(var(--i) * 60ms) backwards}
  .bl-card:is(:hover,:focus-visible) .bl-arte .cam{animation:bl-cam .6s cubic-bezier(.65,0,.35,1) calc(var(--i) * 50ms)}
}
/* vazio de filtro: um dos dois lugares onde o system centraliza */
.bl-carregar{display:flex;margin:32px auto 0;font-family:inherit}   /* carregar mais (Gabriel 20/10): a lista abre com 9, e cada clique traz mais 9 */
.bl-carregar[hidden]{display:none}
.bl-vazio{display:flex;flex-direction:column;align-items:center;padding:64px 32px;text-align:center}
.bl-vazio[hidden]{display:none}
.bl-vazio .iconify{color:#B4B4B4}
.bl-vazio h3{margin-top:16px;font:500 32px/1 var(--bm-fonte-titulo);text-transform:uppercase;color:#282828}
.bl-vazio p{max-width:46ch;margin:12px 0 32px;color:#5E5E5E}
/* secundário do system (b2): vazado, a borda e o texto no azul */
.bl-b2{border-color:var(--bm-azul);color:var(--bm-azul);background:none}

/* 03 · o que mais leem: o primeiro ocupa a coluna da esquerda nas duas linhas, azul e com a ponta redonda dos cards da Parcerias; os outros dois empilham à direita */
.bl-mais{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;gap:16px}
.bl-top{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:clamp(200px,13vw,250px);padding:clamp(20px,1.67vw,32px);border-radius:var(--bm-r2);background:#1C1C1C;color:#fff;transition:transform .2s,background .2s}
.bl-top:hover{transform:translateY(-2px);background:#262626}
.bl-top .bl-tag{background:rgba(255,255,255,.12);color:#fff}
.bl-top .bl-pe{color:rgba(255,255,255,.6)}
.bl-top .bl-pe .iconify{color:#fff}
.bl-n{position:absolute;top:clamp(20px,1.67vw,32px);right:clamp(20px,1.67vw,32px);font-size:var(--bm-t12);font-weight:700;letter-spacing:.08em;font-variant-numeric:tabular-nums;opacity:.6}
/* o 01 mora na coluna da direita (Gabriel 20/10), com o lado redondo também na direita, virado pra fora da página */
.bl-mais{grid-template-columns:1fr 1.25fr}
.bl-top-1{grid-column:2;grid-row:1/3;padding-right:180px;border-radius:var(--bm-r2) 250px 250px var(--bm-r2);background:var(--bm-azul)}
.bl-top-1:hover{background:#1433A8}
.bl-top-1 .bl-n{right:180px}   /* no alto e no pé a curva de 250px entra uns 130px: o número e a seta ficam fora dela com folga */
.bl-top-1 h3{max-width:12em;margin-top:auto;padding-top:40px;font-size:clamp(34px,3.13vw,60px);line-height:1}
.bl-top-1 .bl-pe{margin-top:32px}

/* 04 · glossário: a sigla domina em condensada grande, o nome por extenso fica embaixo. Linhas finas separam os verbetes, sem card */
/* entrada do glossário (Gabriel 20/10): o azul chega como um cartão de canto redondo, com margem dos lados, e se alarga até a borda da tela
   conforme a seção sobe (--q do layout.js). O azul é uma camada por trás do conteúdo, e não um recorte, porque recortar deixava ver a dobra presa atrás.
   Os cards das métricas sobem um a um quando entram na tela (animação ligada à rolagem; navegador sem suporte mostra tudo parado) */
@media(min-width:961px) and (prefers-reduced-motion:no-preference){
  .bl-glossario{isolation:isolate;overflow:clip;background:#0D0D0D}   /* clip no lugar do hidden da .sec: o hidden vira caixa de rolagem, e a animação dos cards passava a medir a seção e não a página */
  .bl-glossario::before{content:"";position:absolute;z-index:-1;inset:0 calc(6% * (1 - var(--q,1)));border-radius:calc(48px * (1 - var(--q,1)));background:var(--bm-azul)}
  @keyframes bl-termo-sobe{from{opacity:0;transform:translateY(32px)}}
  .bl-termos li{animation:bl-termo-sobe linear both;animation-timeline:view();animation-range:entry 0% cover 25%}   /* sobe ao longo de uns 250px de rolagem, do pé da tela até perto do meio */
}
.bl-glossario .cabeca p{max-width:470px;text-wrap:balance}   /* a descrição numa coluna mais estreita, em duas linhas de tamanho parecido */
/* glossário em lista (Gabriel 20/10, ref. lista de posts do blog da Linear): uma linha por métrica, nome à esquerda e sigla à direita, fio fino entre elas */
.bl-termos{display:flex;flex-direction:column;gap:8px;list-style:none}   /* cada métrica é um card (Gabriel 20/10, no lugar do fio entre linhas) */
.bl-termos a{display:flex;align-items:center;gap:24px;min-height:64px;padding:12px 24px;border-radius:var(--bm-r2);background:rgba(255,255,255,.08);transition:background .2s}
.bl-termos span{flex:1;font-size:16px;font-weight:600;color:#fff}
.bl-termos b{order:2;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:rgba(255,255,255,.6);transition:color .2s}
.bl-termos b::after{content:"\2192";font-size:16px;transition:transform .2s}
.bl-termos a:hover{background:rgba(255,255,255,.16)}
.bl-termos a:hover b{color:#fff}
.bl-termos a:hover b::after{transform:translateX(4px)}

/* 05 · fecho com campo: o formulário ocupa a coluna da direita, abaixo do texto. Campo na altura do botão do site (55), raio de 5 */
.bl-fecho .gads-fecho-card h2{grid-row:1/3}
.bl-form{grid-column:2;align-self:end;width:100%;max-width:460px;margin-top:25px}
.bl-form label{display:block;margin-bottom:8px;font-size:var(--bm-t12);font-weight:700}
/* campo do e-mail na cara do site (Gabriel 20/10): pílula branca de 61px com o botão azul de 51 encaixado dentro, como a busca da dobra.
   O foco e o erro desenham o contorno na pílula inteira, porque o campo de dentro não tem borda */
.bl-linha{display:flex;align-items:center;gap:8px;height:61px;padding:5px 5px 5px 24px;border-radius:var(--bm-pill);background:#fff}
.bl-linha input{flex:1;min-width:0;height:100%;padding:0;border:0;background:none;font:500 16px var(--bm-fonte);color:#000}
.bl-linha input::placeholder{color:var(--bm-n25)}
.bl-linha input:focus{outline:0}
.bl-linha:focus-within{outline:2px solid #0D0D0D;outline-offset:2px}
.bl-linha:has(input[aria-invalid="true"]){outline:2px solid #0D0D0D;outline-offset:2px}
.bl-form .b{height:51px;margin-top:0;font-family:inherit}   /* o .b do fecho traz margem de cima, e <button> não herda a fonte como o <a> */
/* título em três linhas: o verbo fino em cima, o que chega grosso embaixo */
.bl-fecho .gads-fecho-card{grid-template-columns:auto 1fr;column-gap:clamp(32px,3.33vw,64px)}   /* a coluna do título tem a largura dele, e o resto fica pro texto e o campo */
.bl-fecho .gads-fecho-card h2{align-self:center;margin-top:0;max-width:none;white-space:nowrap;font-size:clamp(34px,2.92vw,56px);line-height:.92}   /* um degrau abaixo do fecho das outras páginas (Gabriel 20/10, primeiro no post e depois no blog) */
.bl-fecho .gads-fecho-card h2 :is(span,b){display:block}
.bl-vazio .b{font-family:inherit}
.bl-msg{min-height:20px;margin-top:8px;font-size:14px;font-weight:600}

@media(max-width:1100px){.bl-grade{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:960px){
  .bl-mais{grid-template-columns:1fr;grid-template-rows:none}
  .bl-top-1{grid-column:auto;grid-row:auto;padding-right:88px;border-radius:var(--bm-r2) 120px 120px var(--bm-r2)}
  .bl-top-1 .bl-n{right:88px}
  .bl-fecho .gads-fecho-card h2{grid-row:auto}
  .bl-form{grid-column:1/-1}
}
@media(max-width:560px){
  .bl-filtro{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(var(--lat)*-1);padding:0 var(--lat);scrollbar-width:none}
  .bl-filtro button{flex:none}
  .bl-grade{grid-template-columns:1fr;gap:12px}
  .bl-card{min-height:0}
}

/* ---------- post do blog (layout-blog-post.html, Gabriel 20/10). Prefixo bp-. Do blog vêm a capa (.bl-arte), o card (.bl-card) e o fecho com e-mail (.bl-fecho).
   O system ainda não tem peça de texto longo: título de seção, lista, aviso, citação e sumário nascem aqui ---------- */
.pg-post .topo{background:rgba(13,13,13,.72)}   /* a dobra do post é baixa, e o vidro claro do header ficaria em cima do texto branco antes do scroll trocar ele */

/* 01 · abertura */
.bp-hero{padding-top:calc(var(--topo-y) + var(--topo-h) + clamp(64px,6.25vw,120px));padding-bottom:clamp(72px,6.25vw,120px);text-align:center;background:#F7F7F7;color:#0D0D0D}   /* fundo claro (Gabriel 20/10), no tom do painel da capa */
.bp-hero :focus-visible{outline-color:var(--bm-azul)}
.bp-aneis{opacity:.1}   /* os anéis azuis no claro pesavam mais que o título: ficam de marca d'água */
.bp-hero .dentro{display:flex;flex-direction:column;align-items:center;max-width:1100px;margin:0 auto}
.bp-aneis{top:50%;left:50%;width:min(2200px,190vw);height:auto;transform:translate(-50%,-50%)}
.bp-trilha{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.bp-trilha a{opacity:.7;transition:opacity .2s}
.bp-trilha a:hover{opacity:1}
.b27-trilha{margin-bottom:24px}   /* nas páginas o H1 não traz a margem de cima que o .bp-h1 tem no post (functions.php, b27_trilha) */
.bp-h1{max-width:26ch;margin-top:24px;font:600 clamp(40px,4.17vw,80px)/.95 var(--bm-fonte-titulo);text-transform:uppercase;text-wrap:balance}
.bp-lead{max-width:640px;margin-top:28px;font-weight:500;line-height:1.6;text-wrap:balance}
.bp-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin-top:32px;font-size:14px;color:var(--bm-n25)}
.bp-meta > span{display:inline-flex;align-items:center;gap:8px}

/* 02 · o post */
.bp-corpo{overflow:visible;background:#fff;padding-top:clamp(48px,4.17vw,80px)}   /* visible no lugar do hidden da .sec: o hidden vira caixa de rolagem e o sumário deixa de grudar */
.bp-capa{max-width:1100px;margin:0 auto clamp(56px,5vw,96px)}
.bp-capa .bl-arte{aspect-ratio:5/2;margin:0;border-radius:var(--bm-r2)}
@media(prefers-reduced-motion:no-preference){   /* a capa faz uma vez, ao abrir, o movimento que o card faz no hover */
  .bp-capa .bl-arte .px{animation:bl-px .5s ease-in-out calc(var(--i) * 45ms + .4s) backwards}
  .bp-capa .bl-arte .tr{stroke-dasharray:1;animation:bl-tr .8s cubic-bezier(.65,0,.35,1) calc(var(--i) * 60ms + .4s) backwards}
  .bp-capa .bl-arte .cam{animation:bl-cam .6s cubic-bezier(.65,0,.35,1) calc(var(--i) * 50ms + .4s)}
}
.bp-grade{display:grid;grid-template-columns:220px minmax(0,720px);justify-content:space-between;gap:clamp(48px,5vw,120px);max-width:1100px;margin:0 auto}
.bp-lado{position:sticky;top:calc(var(--topo-y) + var(--topo-h) + 32px);align-self:start}
.bp-lado b{display:block;margin-bottom:12px;font-size:var(--bm-t12);font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--bm-n25)}
.bp-autor{display:flex;align-items:center;gap:12px;margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid rgba(0,0,0,.08);font-size:16px;font-weight:600;color:#0D0D0D;transition:color .2s}
.bp-autor img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.bp-autor b{margin-bottom:2px}   /* o rótulo da lateral, como o "Neste post", só que colado no nome */
.bp-autor:hover,.bp-autor-nome:hover{color:var(--bm-azul)}
.bp-autor:focus-visible{outline-color:var(--bm-azul)}
.bp-autor-nome{color:inherit;text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:3px;transition:color .2s}
.bp-sumario ol{display:flex;flex-direction:column;gap:2px;margin-left:-12px;list-style:none}   /* o texto dos links alinha com o "Neste post", e o fundo do ativo sai pra fora */
.bp-sumario a{display:block;padding:8px 12px;border-radius:var(--bm-r1);font-size:14px;font-weight:500;line-height:1.4;color:var(--bm-n25);transition:background .2s,color .2s}
.bp-sumario a:hover{background:#F7F7F7;color:#0D0D0D}
.bp-sumario a[aria-current]{background:rgba(27,65,209,.08);color:var(--bm-azul);font-weight:600}
.bp-partilha{margin-top:32px;padding-top:24px;border-top:1px solid rgba(0,0,0,.08)}
.bp-partilha div{display:flex;gap:8px}
.bp-partilha :is(a,button){display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(0,0,0,.12);border-radius:50%;background:#fff;color:#0D0D0D;transition:border-color .2s,transform .2s}
.bp-partilha :is(a,button):hover{border-color:rgba(0,0,0,.4);transform:translateY(-2px)}
.bp-partilha :is(a,button):focus-visible,.bp-sumario a:focus-visible,.bp-texto a:focus-visible{outline-color:var(--bm-azul)}
.bp-copiado{min-height:20px;margin-top:8px;font-size:14px;font-weight:600;color:var(--bm-azul)}

/* texto do post: 18px em coluna de 720, uns 70 caracteres por linha */
.bp-texto{font-size:18px;line-height:1.7;color:#0D0D0D}
.bp-texto > * + *{margin-top:24px}
.bp-texto > p:first-child{font-size:21px;line-height:1.6;font-weight:500}   /* a abertura puxa a leitura */
.bp-texto h2{margin-top:72px;font:600 clamp(30px,2.29vw,44px)/1 var(--bm-fonte-titulo);text-transform:uppercase;text-wrap:balance;scroll-margin-top:calc(var(--topo-y) + var(--topo-h) + 32px)}
.bp-texto h2 + *{margin-top:20px}
.bp-texto a:not(.b){color:var(--bm-azul);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.bp-texto ul{display:flex;flex-direction:column;gap:12px;list-style:none}
.bp-texto ul li{position:relative;padding-left:28px}
.bp-texto ul li::before{content:"";position:absolute;left:4px;top:.65em;width:8px;height:8px;border-radius:2px;background:var(--bm-azul)}
.bp-aviso{display:flex;gap:16px;padding:24px;border-radius:var(--bm-r2);background:rgba(255,70,50,.08);font-size:16px;line-height:1.6}
.bp-aviso .iconify{flex:none;color:var(--bm-tangerina)}
.bp-destaque{padding:32px 0;border-block:1px solid rgba(0,0,0,.12);font-size:22px;font-weight:600;line-height:1.45;color:var(--bm-azul);text-wrap:pretty}
/* ---------- política de cookies (layout-politica-de-cookies.html, Gabriel 21/10). Prefixo lg-. O resto é o post do blog (bp-) */
.lg-corpo{padding-top:clamp(64px,5vw,96px)}   /* sem a capa do post, o texto começa logo depois da dobra */
.bp-texto h3{margin-top:40px;font:600 clamp(22px,1.46vw,28px)/1.1 var(--bm-fonte-titulo);text-transform:uppercase}
.bp-texto h3 + *{margin-top:16px}
:is(.lg-tabela,.bp-tabela){overflow-x:auto;border:1px solid rgba(0,0,0,.12);border-radius:var(--bm-r2)}   /* no celular a tabela rola de lado dentro da caixa, a página não */
:is(.lg-tabela,.bp-tabela) table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.lg-tabela table{min-width:600px;table-layout:fixed}
.bp-tabela table{min-width:520px}   /* tabela do post (o functions.php põe a caixa em volta): coluna na medida do texto, sem as larguras fixas das tabelas de cookies */
.lg-tabela th:nth-child(1){width:22%}
.lg-tabela th:nth-child(2){width:26%}
.lg-tabela th:nth-child(4){width:15%}   /* colunas na mesma medida nas três tabelas, pra elas se lerem como uma lista só */
:is(.lg-tabela,.bp-tabela) th{padding:14px 20px;background:#F7F7F7;font-size:var(--bm-t12);font-weight:700;letter-spacing:.06em;text-align:left;text-transform:uppercase;color:#5E5E5E}
:is(.lg-tabela,.bp-tabela) td{padding:14px 20px;border-top:1px solid rgba(0,0,0,.08);vertical-align:top}
:is(.lg-tabela,.bp-tabela) td:first-child{font-weight:600}
.lg-tabela td:last-child{white-space:nowrap}
.lg-tabela code{overflow-wrap:anywhere;padding:2px 8px;border-radius:6px;background:rgba(27,65,209,.08);color:var(--bm-azul);font:600 13px/1.6 ui-monospace,monospace}
.lg-preferencias{display:inline-flex;font-family:inherit}   /* botão não herda a fonte da página sozinho */
@media(max-width:960px){
  /* celular (Gabriel 21/10): dobra mais baixa e o sumário vira uma fila de pílulas presa embaixo do topo, que acompanha a leitura e rola de lado */
  .pg-legal .bp-hero{padding-top:calc(var(--topo-y) + var(--topo-h) + 40px);padding-bottom:48px}
  .pg-legal .bp-lead{font-size:17px}
  .pg-legal .bp-meta{margin-top:20px;font-size:13px}
  .pg-legal .lg-corpo{padding-top:16px}
  .pg-legal .bp-lado{position:sticky;top:calc(var(--topo-y) + var(--topo-h) + 8px);z-index:5;margin:0 calc(var(--lat) * -1) 8px;padding:10px 0;border-radius:0;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .pg-legal .bp-lado b{display:none}
  .pg-legal .bp-sumario ol{flex-direction:row;gap:8px;margin:0;padding:0 var(--lat);overflow-x:auto;scrollbar-width:none}
  .pg-legal .bp-sumario ol::-webkit-scrollbar{display:none}
  .pg-legal .bp-sumario li{flex:none}
  .pg-legal .bp-sumario a{display:flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid rgba(0,0,0,.12);border-radius:var(--bm-pill);background:#fff;font-size:13px;white-space:nowrap}
  .pg-legal .bp-sumario a[aria-current]{background:var(--bm-azul);border-color:var(--bm-azul);color:#fff;font-weight:600}
  .pg-legal .bp-texto{font-size:17px}
  .pg-legal .bp-texto > p:first-child{font-size:19px}
  .pg-legal .bp-texto h2{margin-top:56px;scroll-margin-top:calc(var(--topo-y) + var(--topo-h) + 80px)}   /* o título não some embaixo da fila de pílulas */
}
@media(max-width:960px){
  /* celular: cada cookie vira um bloco, com a ferramenta e a duração na primeira linha, o nome do cookie e o para quê embaixo. Sem rolagem de lado */
  .lg-tabela{overflow:visible}
  .lg-tabela table{min-width:0;table-layout:auto}
  .lg-tabela :is(table,tbody,tr,td){display:block}
  .lg-tabela thead{display:none}
  .lg-tabela tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:16px 18px}
  .lg-tabela tr + tr{border-top:1px solid rgba(0,0,0,.08)}
  .lg-tabela td{padding:0;border:0}
  .lg-tabela td:nth-child(4){grid-column:2;grid-row:1;font-size:13px;color:#5E5E5E}
  .lg-tabela td:nth-child(2),.lg-tabela td:nth-child(3){grid-column:1 / -1}
}
.bp-servico{display:grid;grid-template-columns:1fr auto;align-items:end;gap:20px 32px;margin-block:48px;padding:clamp(28px,2.5vw,40px);border-radius:var(--bm-r3);background:var(--bm-azul);color:#fff}
.bp-texto .bp-servico{margin-top:48px}
.bp-servico .rot{grid-column:1/-1;justify-self:start}
.bp-servico h3{font:600 clamp(28px,2.08vw,40px)/1 var(--bm-fonte-titulo);text-transform:uppercase}
.bp-servico p{margin-top:12px;font-size:16px;line-height:1.6;color:rgba(255,255,255,.85)}

/* verbete do glossário (layout-blog-metrica.html): a conta da métrica num painel no tom da dobra, com o exemplo embaixo */
.bp-conta{display:flex;flex-direction:column;gap:12px;padding:clamp(24px,2.5vw,40px);border-radius:var(--bm-r2);background:#F7F7F7}
.bp-conta-f{font:500 clamp(26px,2.08vw,40px)/1.1 var(--bm-fonte-titulo);text-transform:uppercase}
.bp-conta-f b{color:var(--bm-azul)}
.bp-conta-f span{white-space:nowrap}   /* no celular a conta quebra antes do denominador, e o "100" não fica sozinho na linha */
.bp-conta-ex{font-size:16px;color:var(--bm-n25)}

/* 03 · continue lendo, no azul (Gabriel 20/10) */
.bp-mais .cabeca{align-items:center}
.bp-mais .b-link{height:auto;color:#fff}
.bp-mais .bl-card{border-color:transparent;color:#0D0D0D}   /* o card é branco e herdaria o texto branco da seção azul */

@media(max-width:960px){
  .bp-grade{grid-template-columns:minmax(0,1fr)}
  .bp-lado{position:static;padding:20px;border-radius:var(--bm-r2);background:#F7F7F7}   /* no celular o sumário vira um índice no começo do texto */
  .bp-partilha{margin-top:20px;padding-top:20px}
  .bp-sumario a:hover{background:#fff}
  .bp-sumario a[aria-current]{background:none;color:var(--bm-n25);font-weight:500}   /* aqui o sumário não acompanha a leitura, então não marca parte nenhuma */
  .bp-partilha{display:none}   /* no celular o compartilhar já vem do navegador, e a caixa empurrava o texto pra segunda tela */
}
@media(max-width:600px){
  .bp-capa .bl-arte{aspect-ratio:2/1}
  .bp-texto{font-size:17px}
  .bp-texto > p:first-child{font-size:19px}
  .bp-texto h2{margin-top:56px}
  .bp-destaque{font-size:19px}
  .bp-servico{grid-template-columns:1fr}
  .bp-servico .b{width:100%}
}

/* Cases · 03 grade de cases (Gabriel, 21/10, ref. ramotion.com/work no card e no hover). Dois por linha, todos do mesmo tamanho e com a tela em 4:3
   (o mosaico de tamanhos alternados da referência saiu a pedido dele). No hover a frase sobe e a página do site rola dentro da tela: a tela é um container
   (container-type:size), então 100cqh é a altura dela e o rolo desce exatamente até o pé da imagem. Ao sair, o rolo volta rápido para o topo */
.pc-obras-sec{background:#0D0D0D;color:#fff}   /* fundo preto só na Cases (Gabriel, 21/10); a Sites sob medida segue no cinza do .ssm-cases */
.pc-obras{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:72px 40px}   /* dois por linha (Gabriel, 21/10) */
.pc-obra{display:block;color:inherit;text-decoration:none}
.pc-obra-tela{position:relative;aspect-ratio:4/3;overflow:hidden;container-type:size;border-radius:12px;background:#1A1A1A}
.pc-obra-rolo{display:flex;flex-direction:column;transition:translate 1s cubic-bezier(.2,.8,.3,1)}
.pc-obra-rolo img{display:block;width:100%;height:auto}
.pc-obra-fixa img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:scale .6s cubic-bezier(.2,.8,.3,1)}
.pc-obra-nome{margin-top:24px;font:600 clamp(24px,1.67vw,32px)/1.2 var(--bm-fonte-titulo)}
.pc-obra-desc{margin-top:4px;max-width:34em;font-size:16px;line-height:1.5;opacity:.75}
.pc-obra-proximo .pc-obra-tela{display:grid;place-items:center;background:transparent;border:2px dashed rgba(255,255,255,.22);color:rgba(255,255,255,.5);transition:border-color .3s,color .3s}
.pc-obra-proximo:hover .pc-obra-tela{border-color:#fff;color:#fff}
.pc-obras-mais{display:flex;justify-content:center;margin-top:72px}
.pc-obra:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:12px}
@media(hover:hover){
  .pc-obra-desc{opacity:0;translate:0 20px;transition:opacity .3s ease,translate .3s ease}
  .pc-obra:is(:hover,:focus-visible) .pc-obra-desc{opacity:.75;translate:none}
  .pc-obra:is(:hover,:focus-visible) .pc-obra-rolo{translate:0 calc(-100% + 100cqh);transition:translate 7s cubic-bezier(.45,0,.55,1)}
  .pc-obra:is(:hover,:focus-visible) .pc-obra-fixa img{scale:1.1}
}
@media(prefers-reduced-motion:reduce){.pc-obra-rolo,.pc-obra-fixa img{transition:none!important}.pc-obra:hover .pc-obra-rolo{translate:none}}
@media(max-width:700px){
  .pc-obras{grid-template-columns:1fr;gap:48px}
  .pc-obra-nome{margin-top:16px}
  .pc-obra-proximo .pc-obra-tela{aspect-ratio:auto;height:120px}   /* sem site para mostrar, o card do próximo cliente não precisa da tela inteira */
  .pc-obras-mais{margin-top:48px}
  .pc-obras-mais .b{width:100%}
}
/* no toque não existe hover: a tela rola sozinha, ida e volta, depois que o case entra na tela */
@media(hover:none) and (prefers-reduced-motion:no-preference){
  .pc-obras>li.visto .pc-obra-rolo{animation:pc-rola-sozinho 14s ease-in-out 1.2s infinite alternate}
}
@keyframes pc-rola-sozinho{0%,12%{translate:0 0}88%,100%{translate:0 calc(-100% + 100cqh)}}
/* entrada: cada case sobe e acende quando um quarto dele aparece (o .visto vem do layout.js), na curva dos cards da Parcerias.
   O da direita espera .14s, então a dupla da linha entra um depois do outro */
@media(scripting:enabled) and (prefers-reduced-motion:no-preference){
  .pc-obras>li{opacity:0;translate:0 48px;transition:opacity .8s ease,translate .9s cubic-bezier(.2,.8,.3,1)}
  .pc-obras>li.visto{opacity:1;translate:none}
  .pc-obras>li.visto:nth-child(even){transition-delay:.14s}
}
@media(scripting:enabled) and (prefers-reduced-motion:no-preference) and (max-width:700px){.pc-obras>li.visto:nth-child(even){transition-delay:0s}}   /* um por linha: cada um entra quando chega */

/* Cases · 04 outros clientes em lista (Gabriel, 21/10, ref. vercel.com/customers). Fundo branco. Cinco colunas por linha: nome, o que foi feito, site, segmento e link.
   A linha inteira é o link; no hover ela clareia e a seta anda. No celular vira um bloco: nome e segmento em cima, frase, e o link embaixo */
.pc-outros-sec{background:#fff;color:#000}   /* fundo branco e sem linhas entre os clientes (Gabriel, 21/10): quem separa é o respiro de cada linha */
.pc-outros{list-style:none}
/* home (Gabriel 21/10): a mesma lista logo depois dos cases em destaque, em fundo azul, com um link pra Cases no pé.
   No azul o texto vira branco, o link do cliente e o realce do mouse clareiam, e no celular cada cliente vira um bloco num azul um pouco mais claro */
.pc-outros-sec.hm-outros{background:#0D0D0D;color:#fff}   /* preto das seções .preta (Gabriel 22/10): com os cases escondidos, a lista vem logo depois do azul do "porque" */
.hm-outros .pc-outro-ir,.hm-outros-todos{color:#fff}
.hm-outros .pc-outro:hover{background:rgba(255,255,255,.1)}
.hm-outros .pc-outro:focus-visible{outline-color:#fff}
.hm-outros :is(.pc-outro-desc,.pc-outro-seg){opacity:.8}   /* no azul a transparência do fundo branco apagava demais o segmento */
.hm-outros-todos{display:inline-flex;margin-top:40px}
@media(max-width:960px){
  .hm-outros .pc-outro{background:rgba(255,255,255,.08)}
  .hm-outros .pc-outro:hover{background:rgba(255,255,255,.14)}
}
.pc-outro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.8fr) minmax(0,1.3fr) minmax(0,1fr) 120px;align-items:center;gap:32px;padding:32px 16px;margin:0 -16px;color:inherit;text-decoration:none;border-radius:12px;transition:background .3s}
.pc-outro-nome{font:600 clamp(20px,1.46vw,28px)/1.2 var(--bm-fonte-titulo)}
.pc-outro-desc{font-size:16px;line-height:1.5;opacity:.7;max-width:32em}
.pc-outro-site{font-size:14px;font-weight:600;opacity:.9;overflow-wrap:break-word}
.pc-outro-seg{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.pc-outro-ir{display:inline-flex;align-items:center;justify-self:end;gap:6px;color:var(--bm-azul);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.pc-outro-ir .iconify{transition:translate .3s cubic-bezier(.2,.8,.3,1)}
.pc-outro:hover{background:#F2F2F2}
.pc-outro:hover .pc-outro-ir .iconify{translate:3px -3px}
.pc-outro:focus-visible{outline:2px solid var(--bm-azul);outline-offset:-2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:960px){
  .pc-outros{display:grid;gap:12px}
  .pc-outro{grid-template-columns:1fr auto;gap:8px 16px;padding:20px;margin:0;background:#F5F5F5}   /* sem linhas, cada cliente vira um bloco cinza claro: separa sem divisória */
  .pc-outro:hover{background:#EDEDED}
  .pc-outro-nome{grid-column:1}
  .pc-outro-seg{grid-column:2;grid-row:1;justify-self:end;text-align:right}
  .pc-outro-desc{grid-column:1 / -1}
  .pc-outro-site{grid-column:1;margin-top:8px;opacity:.55}
  .pc-outro-ir{grid-column:2;margin-top:8px}   /* endereço e link na mesma linha, no pé do bloco */
}
@media(scripting:enabled) and (prefers-reduced-motion:no-preference){
  .pc-outros>li{opacity:0;translate:0 24px;transition:opacity .7s ease,translate .7s cubic-bezier(.2,.8,.3,1)}
  .pc-outros>li.visto{opacity:1;translate:none}
}

/* página de erro (Gabriel 21/10, layout-erro.html): a dobra azul ocupa a tela toda, os números do código caem no chão (canvas, física no próprio HTML)
   e o texto fica no meio da tela, no azul liso (Gabriel tirou o degradê e centralizou o texto). No computador o texto é um obstáculo da física, e os números caem dos lados dele */
.er-dobra{position:relative;height:100svh;min-height:560px;overflow:hidden}
.er-pecas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.er-pecas.na-peca{cursor:grab}
.er-pecas.pegando{cursor:grabbing}
.er-texto{position:absolute;z-index:2;top:50%;left:50%;translate:-50% -50%;width:max-content;max-width:90vw;
  display:grid;justify-items:center;gap:20px;text-align:center;pointer-events:none}
.er-texto > *{pointer-events:auto}
.er-titulo{font-family:var(--bm-fonte-titulo);text-transform:uppercase;font-weight:500;font-size:clamp(40px,4vw,76px);line-height:.92;text-wrap:balance}
.er-lead{opacity:.85;text-wrap:pretty}
@media(min-width:701px){ .er-titulo,.er-lead{white-space:nowrap} }   /* no computador título e descrição numa linha só (Gabriel 21/10) */
.er-texto .acoes{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 28px;margin-top:8px}
/* a Busca do blog no 404: o .er-texto mede pelo conteúdo (max-content), então a largura vem fixa e não em % */
.er-texto .er-busca{width:min(560px,90vw);margin:4px 0 0}
/* busca do site (tema-wp/search.php): serviços achados e as quatro frentes do vazio, em botões secundários lado a lado */
.b27-busca-servicos{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:48px;list-style:none}
.bl-vazio .b27-busca-servicos{justify-content:center;margin:24px 0 0}
/* mapa do site (tema-wp/page-mapa-do-site.php): links em colunas que se ajustam à largura, um grupo embaixo do outro */
.b27-mapa{background:#F7F7F7;color:#000}
.b27-mapa .cabeca{margin-bottom:24px}
.b27-mapa-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:4px 32px;margin-bottom:64px;list-style:none}
.b27-mapa-lista a{display:block;padding:10px 0;border-bottom:1px solid #E8E8E8;font-weight:500;transition:color .15s}
.b27-mapa-lista a:hover{color:var(--bm-azul)}
.b27-mapa-cat{margin:0 0 8px;font-size:18px;font-weight:700}
.b27-mapa-cat + .b27-mapa-lista{margin-bottom:40px}

/* "Conheça nossos autores" na /blog/: três cards, cada um leva pra página da pessoa. Fotos já recortadas em círculo */
.bl-autores{background:#fff;color:#000}   /* sem fundo, a dobra presa no topo (passagem em pilha) aparecia através da seção */
.bl-autores-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;list-style:none}
.bl-autor{display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;padding:32px 24px;border:1px solid rgba(0,0,0,.08);border-radius:var(--bm-r2);text-align:center;transition:border-color .2s,transform .2s}
.bl-autor:hover{border-color:var(--bm-azul);transform:translateY(-2px)}
.bl-autor:focus-visible{outline-color:var(--bm-azul)}
.bl-autor img{width:96px;height:96px;margin-bottom:12px;object-fit:cover}
.bl-autor-nome{font-size:18px;font-weight:700;color:#0D0D0D}
.bl-autor-cargo{font-size:14px;color:var(--bm-n25)}
@media(prefers-reduced-motion:reduce){.bl-autor{transition:none}.bl-autor:hover{transform:none}}

/* página do autor (tema-wp/autor.php): a dobra centrada do blog, com a foto do card da Sobre em cima do nome.
   A foto já vem recortada em círculo */
.b27-autor-topo{display:flex;flex-direction:column;align-items:center;gap:24px}
.b27-autor-foto{width:160px;height:160px;object-fit:cover}
.b27-autor-bio{max-width:560px;margin:24px auto 0;font-size:18px;line-height:1.5;text-wrap:balance}
.b27-autor-cert{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin:24px 0 0;list-style:none}
.b27-autor-cert li{display:flex;align-items:center;gap:8px;font-weight:500}
.b27-autor .b.b1{margin-top:32px}
/* joguinho do carrinho 3D: a camada cobre a janela toda, por cima do texto e embaixo do header (z 50), e deixa o clique passar.
   A dica troca entre teclas e dedo conforme a tela */
.er-carro{position:fixed;inset:0;width:100%;height:100%;z-index:40;pointer-events:none}
.er-dica{font-size:var(--bm-t14,14px);opacity:.7}
.er-dica kbd{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 6px;margin:0 1px;border:1px solid rgba(255,255,255,.5);border-radius:6px;font:inherit;font-size:13px}
.er-dica-toque{display:none}
@media(hover:none) and (pointer:coarse){
  .er-dica-tecla{display:none}
  .er-dica-toque{display:inline}
}
/* no celular o texto ocupa a largura toda e não sobra lado pros números: ele sobe pro alto e os números caem embaixo dele */
@media(max-width:700px){
  .er-texto{top:calc(var(--topo-y) + var(--topo-h) + 48px);translate:-50% 0}
  .er-texto .acoes{flex-direction:column;gap:24px}
}
@media(scripting:enabled) and (prefers-reduced-motion:no-preference){
  .er-texto > *{animation:hm-linha .9s cubic-bezier(.2,.8,.3,1) backwards}
  .er-texto > :nth-child(2){animation-delay:.1s}
  .er-texto > :nth-child(3){animation-delay:.2s}
  .er-texto > :nth-child(4){animation-delay:.3s}
}

/* WordPress · botão flutuante "fale conosco" do popup do Elementor que veio do site atual. Sem o kit do Elementor ele perdia a cor;
   aqui ganha o verde do WhatsApp (Gabriel 22/10). O seletor longo é pra vencer a regra do próprio popup, que aponta pra uma cor do kit que não existe aqui */
body .elementor-location-popup .bufaleconosco .elementor-button.elementor-button[type="submit"]{background:#25D366;color:#fff;font:700 15px/1 "Plus Jakarta Sans",sans-serif;text-transform:none;letter-spacing:0;
  padding:14px 22px;border:0;border-radius:var(--bm-pill);box-shadow:0 6px 20px rgba(0,0,0,.22);transition:background .2s,transform .2s}
body .elementor-location-popup .bufaleconosco .elementor-button.elementor-button[type="submit"]:hover{background:#1EBE5A;transform:translateY(-2px);outline:2px solid #fff;outline-offset:3px}   /* a borda branca só aparece com o mouse em cima (Gabriel 22/10) */
body .elementor-location-popup .bufaleconosco .elementor-button.elementor-button[type="submit"]:focus-visible:not(:hover){outline:none}   /* o popup já abre com o botão focado, e o anel de foco aparecia sem ninguém usar o teclado (Gabriel 22/10) */
body .elementor-location-popup .bufaleconosco .elementor-button[type="submit"] .elementor-button-content-wrapper{gap:8px;align-items:center}
body .elementor-location-popup .bufaleconosco .elementor-button[type="submit"] svg{width:20px;height:20px}
body .elementor-location-popup .bufaleconosco .elementor-button[type="submit"] svg *{fill:#fff}

/* ---------- aviso de cookies (tema-wp/cookies.js, no lugar do Complianz, Nico 23/10). Prefixo ck-. Caixa escura do "aviso" do system: fala do site inteiro e se descola do conteúdo */
.ck{position:fixed;left:clamp(16px,2.5vw,32px);bottom:clamp(16px,2.5vw,32px);z-index:90;width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:var(--bm-s3);border-radius:var(--bm-r3);background:var(--bm-cinza);color:var(--bm-offwhite);box-shadow:var(--bm-sombra);font-size:var(--bm-t16)}
.ck[hidden]{display:none}
.ck-tt{font-family:var(--bm-fonte-titulo);font-weight:600;text-transform:uppercase;font-size:var(--bm-t24);line-height:1;color:#fff;margin-bottom:var(--bm-sm1)}
.ck-txt{line-height:1.5}
.ck-txt a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ck-opcoes{display:none;flex-direction:column;gap:var(--bm-sm1);margin-top:var(--bm-s3)}
.ck-escolhendo .ck-opcoes{display:flex}
.ck-op{display:flex;align-items:center;justify-content:space-between;gap:var(--bm-s3);padding:var(--bm-sm1) 0;border-top:1px solid rgba(255,255,255,.12);font-size:var(--bm-t12);line-height:1.4;cursor:var(--cur-clique)}
.ck-op b{display:block;font-size:var(--bm-t16);color:#fff;margin-bottom:2px}
/* chave do system: 44 por 24, azul quando ligada */
.ck-chave{position:relative;flex:none;width:44px;height:24px;border-radius:var(--bm-pill);background:var(--bm-n45);transition:background .2s}
.ck-chave input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:inherit}
.ck-chave i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:var(--bm-pill);background:#fff;transition:transform .2s}
.ck-chave:has(input:checked){background:var(--bm-azul)}
.ck-chave:has(input:checked) i{transform:translateX(20px)}
.ck-chave:has(input:disabled){opacity:.5}
.ck-chave:has(input:focus-visible){outline:2px solid #fff;outline-offset:2px}
.ck-acoes{display:flex;flex-wrap:wrap;gap:var(--bm-sm1);margin-top:var(--bm-s3)}
.ck-acoes .b{flex:1 1 auto;height:44px;padding:0 18px;font-family:inherit}   /* botão não herda a fonte da página sozinho */
/* recusar pesa igual a aceitar no tamanho e no lugar: a escolha tem que ser livre */
/* o reset do Hello Elementor pinta todo button de #c36 no hover e no foco: a cor de cada botão é refeita em todos os estados */
.ck .b1:is(:hover,:focus,:active){background:#FF6553;color:var(--btn-txt)}
.ck-b2,.ck-b2:is(:hover,:focus,:active){background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.ck-b2:hover{border-color:#fff}
.ck .b:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ck-salvar,.ck-escolhendo .ck-escolher{display:none}
.ck-escolhendo .ck-salvar{display:inline-flex}
@media (prefers-reduced-motion:reduce){.ck-chave,.ck-chave i{transition:none}}

/* ---------- "fale conosco" do tema (functions.php, no lugar do popup 11200 do Elementor, Nico 23/10). Visual vem do botão da marca (.b .b1); aqui só a posição */
.fale{position:fixed;right:clamp(16px,2.5vw,32px);bottom:clamp(16px,2.5vw,32px);z-index:80;line-height:1;box-shadow:var(--bm-sombra);transition:transform .2s,background .2s,box-shadow .2s}
.fale:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(255,70,50,.45)}   /* flutuante pede hover mais forte que o .b1 (Nico 23/10) */
.fale .iconify{display:block;width:20px;height:20px;flex:none}   /* sem block o ícone senta na linha de base e sobe em relação ao texto */
.fale:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media print{.fale,.ck{display:none}}

/* seção fora da tela: o layout.js marca .pausa e as animações de CSS dela param onde estão, voltando ao entrar */
.pausa,.pausa *,.pausa *::before,.pausa *::after{animation-play-state:paused!important}

/* ───── campo e mensagem (Campo completo e Mensagem do system.html, sem mudança) ─────
   O site não tinha formulário de verdade até o contato (23/10). Rótulo em cima, campo, ajuda embaixo, e o erro toma o lugar da ajuda */
.cp{display:block;width:100%;height:44px;padding:0 var(--bm-s3);font-family:var(--bm-fonte);font-size:var(--bm-t16);
  color:var(--bm-cinza);background:#fff;border:1px solid var(--bm-n45);border-radius:var(--bm-r1)}
.cp::placeholder{color:var(--bm-n25)}
.cp:focus{outline:2px solid var(--bm-azul);outline-offset:1px;border-color:var(--bm-azul)}
.cp.ruim{border-color:var(--bm-erro)}
textarea.cp{height:auto;min-height:104px;padding:var(--bm-sm1) var(--bm-s3);resize:vertical;line-height:1.5}
.grupo{display:block;margin-bottom:var(--bm-s4)}
.grupo>label{display:block;font-size:var(--bm-t12);font-weight:600;color:var(--bm-n25);margin-bottom:var(--bm-s2)}
.grupo .opc{color:var(--bm-n25);font-weight:400}
.grupo .ajuda{margin-top:var(--bm-s2);font-size:var(--bm-t12);color:var(--bm-n25)}
.grupo .erro{margin-top:var(--bm-s2);font-size:var(--bm-t12);color:#C72C0A;display:flex;align-items:center;gap:6px}   /* o --erro-txt do system: o --bm-erro-esc dá 3:1 no branco */
.msg{display:flex;gap:var(--bm-sm1);padding:var(--bm-s3);border-radius:var(--bm-r2);font-size:var(--bm-t16);color:var(--bm-preto)}
.msg[hidden]{display:none}   /* o display:flex da peça ganhava do atributo hidden e a caixa vazia abria um vão antes do botão */
.msg .iconify{flex:none;margin-top:2px}
.msg.s{background:var(--bm-ok-fraco)}.msg.s .iconify{color:var(--bm-ok)}
.msg.e{background:var(--bm-erro-fraco)}.msg.e .iconify{color:var(--bm-erro)}

/* ───── página Contato (layout-contato.html) ─────
   Dobra da Sobre (escopo .pg-sobre) com o formulário ao lado do título: quem chega aqui já decidiu falar, então o formulário fica na primeira tela */
.ct-hero .dentro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,600px);gap:clamp(32px,5vw,96px);align-items:end;width:100%}
.pg-contato .pc-h1{font-size:clamp(56px,5.5vw,112px);line-height:.9}   /* "Vamos conversar" tem duas palavras: no corpo das dobras de três linhas ele ficava miúdo ao lado do formulário (Nico 23/10) */
.ct-form{min-height:0;align-items:stretch}
/* uma coluna (revisão de UX, 23/10): o olho desce reto e não pula campo. Com quatro campos ela cabe na primeira tela */
.ct-form .grupo{margin-bottom:var(--bm-s3)}   /* 16px entre os campos: com os 32px do system somados à ajuda, o formulário passava da primeira tela */
.ct-form textarea.cp{min-height:64px}
.ct-form .ct-tit{margin-bottom:var(--bm-sm2)}
.ct-form .b{align-self:flex-start}
.ct-form .msg{margin-bottom:var(--bm-s4)}
.ct-tit{font-family:var(--bm-fonte-titulo);font-size:clamp(28px,2.4vw,40px);font-weight:500;text-transform:uppercase;line-height:1;margin:0 0 var(--bm-s4)}
.pc-card .ct-tit{margin-top:var(--bm-s3)}
.ct-form .ct-tit{margin-top:0}
/* frases prontas: a pílula do filtro do system (borda, sem fundo), só que sem estado de marcada, porque cada uma é uma ação */
.ct-frases{display:flex;flex-wrap:wrap;gap:var(--bm-s2);margin-bottom:var(--bm-sm1)}
.ct-frases button{min-height:32px;padding:0 var(--bm-s3);border-radius:var(--bm-pill);cursor:pointer;border:1.5px solid rgba(0,0,0,.28);background:transparent;
  color:var(--bm-n25);font-family:var(--bm-fonte);font-size:var(--bm-t12);font-weight:600;transition:border-color .18s ease,color .18s ease}
.ct-frases button:hover{border-color:var(--bm-azul);color:var(--bm-azul)}
.ct-frases button:focus-visible{outline:2px solid var(--bm-azul);outline-offset:2px}
.ct-lgpd{margin-top:var(--bm-s3);font-size:var(--bm-t12);color:var(--bm-n25)}
.ct-isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.pg-contato .pc-card .acoes{display:flex;flex-wrap:wrap;gap:var(--bm-s3);margin-top:auto;padding-top:var(--bm-s4)}
@media(max-width:960px){
  .ct-hero .dentro{grid-template-columns:1fr}
  .pg-contato .sb-hero{padding-top:calc(var(--topo-y) + var(--topo-h) + 32px)}   /* sem o crachá da Sobre, o texto não precisa descer */
}