:root{
/* amostrado das referências */
--breu:#000C24;
--abismo:#00060F;
--profundo:#011A3F;
--brilho:#053E70;
--borda:#033166;
--superficie:#78A4BC;
--branco:#FFFFFF;
/* superfície clara: mesmos tons já usados no modal e no mega-menu,
agora também disponíveis para intercalar seções claras/escuras */
--claro-bg:#E7EDF5;
--azulclaro-bg:#D8E8F6;
--claro-texto:#0A2038;
--claro-acento:#0A5C96;
/* Poppins em todo o projeto... */
--ui:"Poppins","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
/* ...menos na frase do hero, que segue no grotesco original */
--frase:"Helvetica Neue",Helvetica,Inter,"Segoe UI",Arial,sans-serif;
--serif:Georgia,"Times New Roman",serif;
/* grade do menu (coluna de 1120px com 56px de respiro) e recuo do
cartão do hero — usados pra alinhar o "explore" e o robô à mesma
linha vertical do cabeçalho */
--grid-x:max(clamp(20px,4vw,48px),calc((100vw - 1120px) / 2 + 56px));
--card-x:max(clamp(12px,2.4vw,36px),calc((100vw - 1360px) / 2));
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--abismo);color:var(--branco);font-family:var(--ui);-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* fundo claro por trás do hero, igual ao das seções logo abaixo — só o
quadro grande em si (a animação/headline) continua escuro. Mesmo
truque de "vazamento" de fundo usado no resto do site (.sec.clara),
aqui como padding em vez de margem pra sobrar espaço claro em volta
do cartão escuro, não atrás dele. */
.hero-fundo{position:relative;
background:var(--claro-bg);
box-shadow:0 0 0 100vmax var(--claro-bg);
clip-path:inset(0 -100vmax);
padding:14px clamp(12px,2.4vw,36px) clamp(28px,4.5vh,48px)}
/* grande quadro de cantos arredondados, recuado das bordas — como na
referência (GHFLY): a animação/headline continuam as mesmas, só que
dentro de um cartão em vez de ocupar a tela de ponta a ponta. O
overflow:hidden já existia (pro grain/vignette não vazarem) e agora
também recorta a animação nos cantos arredondados. */
.hero{position:relative;
/* 16:9 em qualquer tela desktop: a largura máxima passa a considerar
também a altura disponível da janela, de modo que a altura derivada
da proporção nunca ultrapasse o viewport — assim o aspect-ratio
manda sempre (nada de max-height/min-height cortando a forma) e o
quadro se adapta estreitando a largura em telas baixas. */
max-width:min(1360px,calc((100svh - 14px - clamp(28px,4.5vh,48px)) * 16 / 9));
margin-inline:auto;
aspect-ratio:16/9;
overflow:hidden;isolation:isolate;contain:paint;
border-radius:28px;
border:1px solid rgba(159,208,228,.16)}
@media (max-width:760px){
:root{--card-x:clamp(8px,2.5vw,14px)}
.hero-fundo{padding:10px clamp(8px,2.5vw,14px) clamp(24px,4vh,36px)}
.hero{height:calc(92svh - 14px - clamp(24px,4vh,36px));min-height:520px;max-height:860px;
max-width:none;aspect-ratio:auto;border-radius:22px}
}
/* fundo do hero: o vídeo em looping, cortado em cover pra preencher o
quadro sem distorcer — no lugar do antigo glow radial. O degradê fica
só como fallback, visível se o vídeo demorar ou falhar. */
.hero .mar{position:absolute;inset:0;z-index:0;width:100%;height:100%;
object-fit:cover;object-position:center;
pointer-events:none;background-color:#000;
/* 1º quadro do vídeo (img/hero-inicio.webp): aparece na hora, enquanto o
vídeo carrega; o degradê fica por baixo só se a imagem também falhar */
background-image:url('../img/hero-inicio.webp'),radial-gradient(62% 58% at 50% 34%,
#1976D2 0%, var(--brilho) 26%, var(--profundo) 54%, var(--breu) 80%, #000 100%);
background-size:cover;background-position:center}
/* água: só o véu vertical (escurece base p/ legibilidade) */
.sea{
position:absolute;inset:0;z-index:0;
mix-blend-mode:multiply;
opacity:1;
background:linear-gradient(rgba(0,20,48,.55) 0%, rgba(0,12,36,.55) 42%, rgba(0,8,26,.62) 78%, rgba(0,6,15,.7) 100%);
}
/* pausa o que continua animado no hero quando ele sai da tela ou a aba
fica em segundo plano — mesma aparência enquanto visível, só evita
gastar CPU/bateria à toa. O vídeo é pausado pelo mesmo arquivo. */
.hero.parado .rays,
.hero.parado .ray,
.hero.parado .cue i{animation-play-state:paused}
.rays{position:absolute;inset:-8% -14% 0;z-index:2;pointer-events:none;mix-blend-mode:screen;opacity:.38}
.ray{position:absolute;top:-10%;height:110%;transform-origin:top center;filter:blur(30px);
background:linear-gradient(to bottom, rgba(150,196,216,.26), rgba(150,196,216,.05) 40%, transparent 70%)}
.ray.a{left:24%;width:22vw;animation:sway 21s ease-in-out infinite alternate}
.ray.b{left:46%;width:15vw;animation:sway 27s ease-in-out infinite alternate-reverse}
.ray.c{left:8%; width:18vw;opacity:.75;animation:sway 33s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(7deg) translateX(-1.5vw) scaleY(.97)}to{transform:rotate(-5deg) translateX(1.5vw) scaleY(1.03)}}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#back {z-index:1;filter:blur(7px) saturate(1.05)} /* o campo de água é o fundo */
#deco {z-index:3;filter:blur(13px) saturate(.65);opacity:.55}
#front{z-index:6;filter:blur(.7px);opacity:.94;pointer-events:none}
/* ruído/grão sobre o vídeo do hero — intensidade ~65% */
.grain{position:absolute;inset:0;z-index:7;pointer-events:none;mix-blend-mode:overlay;opacity:.65;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-repeat:repeat;background-size:180px 180px}
/* fixo e FORA do .hero: o hero tem overflow:hidden e cortaria os painéis */
.top{position:fixed;z-index:100;top:14px;left:0;right:0;margin-inline:auto;
max-width:100%;
display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
gap:clamp(16px,3vw,44px);
transition:none;
border-bottom:1px solid transparent;
/* a barra continua ocupando a largura toda, mas o conteúdo se alinha
à mesma coluna das seções (1120px com respiro de 56px) */
padding-block:clamp(16px,2.6vw,30px);
padding-inline:max(clamp(20px,4vw,48px), calc((100% - 1120px) / 2 + 56px));
font-family:var(--ui);font-size:13.5px;font-weight:400;letter-spacing:.005em;color:rgba(214,232,244,.74)}
/* ao rolar, a barra vira uma pílula branca flutuante, recuada das bordas
— como na referência — em vez do fundo escuro de largura total.
Centralizar por max-width (não left/transform) mantém a transição
simples: só encolhe e sobe, sem deslocamento lateral. */
.top.stuck{top:14px;
color:var(--claro-texto);
padding-block:clamp(10px,1.4vw,14px)}
/* a pílula branca vira um plano de fundo separado, recuado das bordas,
em vez de fazer a própria barra encolher — assim o grid (logo/menu/
botão) nunca muda de posição ao rolar, só ganha esse fundo atrás */
.top.stuck::before{content:"";position:absolute;top:0;bottom:0;
left:50%;transform:translateX(-50%);
width:min(100% - 48px,1100px);
background:#fff;border-radius:24px;
box-shadow:0 10px 30px -14px rgba(10,32,56,.18);
z-index:-1}
.top.stuck .brand .mark{filter:brightness(0) saturate(100%)}
.top.stuck a:hover,.top.stuck a:focus-visible,
.top.stuck .navlink:hover,.top.stuck .navlink:focus-visible{color:var(--claro-acento)}
.top.stuck a[aria-current],.top.stuck .navlink.on,
.top.stuck .navlink[aria-current="page"]{color:var(--claro-texto)}
.top.stuck .navlink[aria-current="page"]::before{background:var(--claro-acento)}
.top.stuck .cta{padding:10px 22px;color:#fff;background:var(--brilho);
border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;
box-shadow:none}
.top.aberto{background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
/* a pílula clara do scroll (agora um ::before à parte) não deve
sumir/escurecer ao abrir a gaveta mobile */
.top.stuck.aberto{-webkit-backdrop-filter:none;backdrop-filter:none}
/* páginas internas: o topo agora é sempre claro atrás do menu (não há
mais hero escuro colado no header como na home), então o menu já
nasce na versão "pílula branca / texto escuro" — sem depender do
scroll (.stuck) pra ficar legível */
body.interna .top{color:var(--claro-texto)}
body.interna .top .brand .mark{filter:brightness(0) saturate(100%)}
body.interna .top a:hover,body.interna .top a:focus-visible,
body.interna .top .navlink:hover,body.interna .top .navlink:focus-visible{color:var(--claro-acento)}
body.interna .top a[aria-current],body.interna .top .navlink.on,
body.interna .top .navlink[aria-current="page"]{color:var(--claro-texto)}
body.interna .top .navlink[aria-current="page"]::before{background:var(--claro-acento)}
body.interna .top .cta{padding:10px 22px;color:#fff;background:var(--brilho);
border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;
box-shadow:none}
/* branco só onde o fundo é escuro: na pílula de scroll e nas páginas
internas (fundo claro) os nomes voltam a herdar a tinta escura */
.top.stuck nav a,.top.stuck .navlink,
body.interna .top nav a,body.interna .top .navlink{color:inherit}
/* gatilhos */
.navlink{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;
display:inline-flex;align-items:center;gap:6px;transition:color .3s,opacity .3s}
.navlink:hover,.navlink:focus-visible{color:#9FD0E4}
.navlink svg{width:11px;height:11px;transition:transform .35s cubic-bezier(.22,1,.36,1);opacity:.7}
.navlink.on{color:#fff}
.navlink.on svg{transform:rotate(180deg);opacity:1}
.top.aberto .navlink:not(.on),.top.aberto nav a:not(.on){opacity:.42}
/* painel */
/* painel centralizado, com largura própria por conteúdo — não ocupa o site todo */
.mega{position:absolute;top:calc(100% + 8px);left:50%;right:auto;
width:min(980px,calc(100vw - 32px));
background:#fff;color:#0A2038;
border:1px solid rgba(10,32,56,.08);border-radius:22px;
padding:clamp(24px,2.8vw,40px);
max-height:calc(100vh - 130px);overflow:auto;
box-shadow:0 44px 90px -34px rgba(0,8,20,.55);
opacity:0;visibility:hidden;transform:translate(-50%,-10px);
transition:opacity .3s ease,transform .38s cubic-bezier(.22,1,.36,1),visibility .3s}
.mega::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.mega.open{opacity:1;visibility:visible;transform:translate(-50%,0)}
/* cases e blog têm menos colunas: painel mais estreito ainda */
#p-cases,#p-blog{width:min(1100px,calc(100vw - 32px))}
.scrim{position:fixed;inset:0;z-index:99;background:rgba(0,6,16,.55);
opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.scrim.open{opacity:1;visibility:visible}
.mgrid{display:grid;gap:clamp(20px,2.6vw,44px)}
.mgrid.solucoes{grid-template-columns:repeat(3,minmax(0,1fr)) 270px}
.mgrid.midia{grid-template-columns:minmax(180px,1fr) 3.1fr;align-items:start}
.mgrid.retrato{gap:clamp(30px,4.4vw,64px)}
.mlabel{font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
color:rgba(10,32,56,.42);margin-bottom:18px}
.mlist{list-style:none;display:grid;gap:11px}
.mlist.duas{grid-template-columns:1fr 1fr;gap:11px 24px}
.mlist a{color:#12314F;text-decoration:none;font-size:15px;line-height:1.3;
display:inline-block;transition:color .25s,transform .25s}
.mlist a:hover,.mlist a:focus-visible{color:#0A5C96;transform:translateX(3px)}
/* card escuro dentro do painel branco: a cor do texto precisa ser declarada,
senão ele herda a tinta escura do .mega e desaparece no fundo azul.
O card inteiro agora é o link (não só o "Conhecer"), e o texto fica
sempre branco — em qualquer estado, inclusive :visited — nunca azul */
.hl{background:linear-gradient(160deg,rgba(9,60,104,.95),rgba(2,20,44,.98));
border:1px solid rgba(159,208,228,.18);border-radius:16px;padding:24px;
color:#fff;text-decoration:none;display:flex;flex-direction:column;gap:12px;
transition:border-color .3s,background .3s}
.hl,.hl:visited{color:#fff}
.hl:hover,.hl:focus-visible{border-color:rgba(159,208,228,.42);
background:linear-gradient(160deg,rgba(13,72,122,.98),rgba(3,26,54,.99))}
.hl:focus-visible{outline:2px solid #9FD0E4;outline-offset:2px}
.hl h4{font-size:19px;font-weight:500;letter-spacing:-.01em;color:#fff}
.hl p{font-size:14px;line-height:1.55;color:rgba(226,240,248,.72)}
.hl .hl-cta,.hl:visited .hl-cta{margin-top:auto;color:#fff;font-size:14px;font-weight:500;
display:inline-flex;align-items:center;gap:8px}
.hl .hl-cta i{font-style:normal;transition:transform .3s}
.hl:hover .hl-cta i,.hl:focus-visible .hl-cta i{transform:translate(2px,-2px)}
.mtitulo{font-size:clamp(19px,1.7vw,25px);font-weight:400;line-height:1.22;letter-spacing:-.01em;
max-width:14ch;color:#0A2038}
.todos{display:inline-flex;align-items:center;gap:8px;margin-top:16px;
color:#0A5C96;text-decoration:none;font-size:14px;font-weight:500}
.todos span{transition:transform .3s}
.todos:hover span{transform:translate(2px,-2px)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,20px)}
/* cards retrato: a coluna se ajusta ao conteúdo, não o contrário */
.midia.retrato{grid-template-columns:minmax(190px,1fr) auto}
/* as imagens têm 168px de largura; travo a altura para o card não passar disso
e ficar borrado. auto nas colunas faz o bloco ter a largura do conteúdo. */
.midia.retrato .cards{grid-template-columns:repeat(3,auto);justify-content:start;
gap:clamp(16px,2.2vw,26px)}
.midia.retrato .card{aspect-ratio:168/250;height:clamp(230px,32vh,320px);width:auto} /* mais baixo, mesma largura de antes */
/* altura fixa nos dois estados: os três blocos ficam iguais mesmo com títulos
e descrições de tamanhos diferentes. O botão é ancorado embaixo por margin-top:auto. */
.midia.retrato .cardtxt{left:9px;right:9px;bottom:9px;padding:13px;
display:flex;flex-direction:column;overflow:hidden;
height:90px;transition:height .45s cubic-bezier(.22,1,.36,1),background .4s}
.midia.retrato .card:hover .cardtxt,
.midia.retrato .card:focus-visible .cardtxt{height:min(210px,calc(100% - 18px))}
.midia.retrato .cardtag{font-size:10px;line-height:1.3;letter-spacing:.14em;margin-bottom:7px}
.midia.retrato .cardtxt h4{font-size:14.5px;line-height:1.32;-webkit-line-clamp:2;
flex:0 0 auto} /* não encolhe: era isso que apertava a 2ª linha */
.midia.retrato .cardesc{font-size:12.5px}
.midia.retrato .mais{display:flex;flex-direction:column;flex:1;
max-height:none;margin-top:12px;transition:opacity .3s ease .1s}
.midia.retrato .card:hover .mais,
.midia.retrato .card:focus-visible .mais{max-height:none;margin-top:12px}
.midia.retrato .cardesc{margin-bottom:12px;-webkit-line-clamp:3}
.midia.retrato .verm{margin-top:auto}
/* blog: títulos mais longos pedem 3 linhas, logo uma caixa mais alta */
.midia.retrato.blog .cardtxt{height:108px}
.midia.retrato.blog .card:hover .cardtxt,
.midia.retrato.blog .card:focus-visible .cardtxt{height:min(228px,calc(100% - 18px))}
.midia.retrato.blog .cardtxt h4{-webkit-line-clamp:3}
.card{position:relative;display:block;border-radius:16px;overflow:hidden;text-decoration:none;
aspect-ratio:4/5;background:#EEF3F7;border:1px solid rgba(10,32,56,.10);
transition:border-color .4s}
.card:hover,.card:focus-visible{border-color:rgba(10,32,56,.28)}
/* ÁREA DA IMAGEM — em branco. Para preencher:
o rótulo "imagem" desaparece sozinho quando a url é adicionada. */
.thumb{position:absolute;inset:0;background-color:rgba(10,32,56,.05);
background-size:cover;background-position:center}
.thumb::after{content:"imagem";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
color:rgba(10,32,56,.3)}
.thumb[style*="url"]::after{display:none}
/* hover do card: o bloco cresce e revela descrição + botão (ref. anexa).
max-height em vez de height:auto porque altura automática não transiciona. */
.mais{display:block;max-height:0;opacity:0;overflow:hidden;
transition:max-height .45s cubic-bezier(.22,1,.36,1),opacity .3s ease,margin-top .45s}
.card:hover .mais,.card:focus-visible .mais{max-height:200px;opacity:1;margin-top:12px}
.cardesc{display:block;font-size:12px;line-height:1.45;color:rgba(226,240,248,.74);margin-bottom:12px}
.verm{display:block;text-align:center;padding:9px 12px;border-radius:9px;
font-size:12px;font-weight:500;color:#fff;
background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);
transition:background .3s,border-color .3s}
.card:hover .verm{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.4)}
.card:hover .cardtxt,.card:focus-visible .cardtxt{
background:linear-gradient(rgba(0,10,24,.5),rgba(0,10,24,.74))}
.cardtxt{position:absolute;left:10px;right:10px;bottom:10px;padding:14px;border-radius:12px;
transition:background .4s;
background:linear-gradient(rgba(0,10,24,.34),rgba(0,10,24,.6));
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cardtag{display:inline-block;font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
color:rgba(159,208,228,.8);margin-bottom:8px}
.cardtxt h4{font-size:15px;font-weight:500;line-height:1.32;color:#fff;letter-spacing:-.005em;
display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.cardesc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* mega "Cases": sem caixa por cima da foto e sem hover, só o nome do cliente à esquerda e a seta
à direita, direto na imagem. Um degradê suave no pé da foto garante a leitura do texto
branco mesmo em fotos claras. */
#p-cases .card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;
background:linear-gradient(rgba(0,10,24,0),rgba(0,10,24,.55));pointer-events:none}
#p-cases .cardtxt,
#p-cases .card:hover .cardtxt,
#p-cases .card:focus-visible .cardtxt{left:16px;right:16px;bottom:14px;padding:0;height:auto;
display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;
background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0;z-index:1}
#p-cases .cardtxt h4{-webkit-line-clamp:1;font-size:15px;text-shadow:0 1px 8px rgba(0,10,24,.35)}
#p-cases .seta{font-size:16px;line-height:1;color:#fff;text-shadow:0 1px 8px rgba(0,10,24,.35)}
/* sem efeito de hover nesses cards (a borda só muda no foco pelo teclado) */
#p-cases .card:hover{border-color:rgba(10,32,56,.10)}
#p-cases .card:focus-visible{border-color:rgba(10,32,56,.28)}
@media (max-width:980px){
.midia.retrato .card{height:clamp(220px,28vh,270px)}
}
@media (max-width:1080px){
.mgrid.solucoes{grid-template-columns:1fr 1fr}
.hl{grid-column:span 2;flex-direction:row;align-items:center;gap:20px}
.hl h4{flex:0 0 auto}
.hl .hl-cta{margin-top:0}
.mgrid.midia{grid-template-columns:1fr}
.mtitulo{max-width:none}
}
@media (hover:none){
.mais{display:none}
}
@media (max-width:760px){
.cards{grid-template-columns:1fr}
.card{aspect-ratio:16/9}
}
.top .brand{display:flex;align-items:center;justify-self:start}
/* a marca é um fundo, não um ![]()
: o mesmo arquivo serve ao topo e ao rodapé */
.logo-polvo{background-image:url('../img/logo-polvo.png');
background-size:contain;background-repeat:no-repeat;background-position:left center}
.top .brand .mark{
height:46px;aspect-ratio:328/264;display:block; /* arquivo em 4x: nítido até ~66px */
transition:opacity .3s,height .35s ease}
.top .brand:hover .mark,.top .brand:focus-visible .mark{opacity:.8}
@media (max-width:620px){.top .brand .mark{height:36px}}
.top nav{display:flex;gap:clamp(16px,2.4vw,32px);justify-self:center}
.top a{color:inherit;text-decoration:none;transition:color .3s}
/* nomes do menu brancos por padrão, sobre o fundo escuro */
.top nav a,.top .navlink{color:#fff}
.top a:hover,.top a:focus-visible{color:#9FD0E4}
/* quando /cases, /servicos e /blog existirem, o aria-current="page" acende este ponto */
.top a[aria-current]{color:#fff}
.top a[aria-current]::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;
background:#6FB4D2;margin-right:8px;vertical-align:middle;transform:translateY(-1px)}
.cta{
justify-self:end;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
font-family:inherit;cursor:pointer;padding:13px 28px;border-radius:12px;
color:#fff;text-decoration:none;font-weight:500;font-size:13.5px;letter-spacing:.01em;
border:1px solid rgba(159,208,228,.26);
background:linear-gradient(158deg, rgba(120,164,188,.18), rgba(5,62,112,.32));
-webkit-backdrop-filter:blur(5px) saturate(150%);backdrop-filter:blur(5px) saturate(150%);
box-shadow:inset 0 1px 0 rgba(159,208,228,.16);
text-shadow:0 1px 3px rgba(0,0,0,.35);
transition:filter .2s,padding .35s ease;
}
.cta:active{filter:brightness(.92)}
.cta:focus-visible{outline:2px solid #9FD0E4;outline-offset:3px}
@keyframes cta-flutuar{
0%{transform:translateY(0)}
12.5%{transform:translateY(-2.3px)}
25%{transform:translateY(-4.24px)}
37.5%{transform:translateY(-5.54px)}
50%{transform:translateY(-6px)}
62.5%{transform:translateY(-5.54px)}
75%{transform:translateY(-4.24px)}
87.5%{transform:translateY(-2.3px)}
100%{transform:translateY(0)}
}
@media (max-width:860px){
.top nav{gap:20px;font-size:13px}
.cta{padding:11px 20px;font-size:13px}
}
@media (max-width:620px){
.top nav{display:none}
.top{grid-template-columns:1fr auto}
}
/* frase: alinhada à esquerda, onde a água está mais clara */
.copy{position:absolute;z-index:5;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;
text-align:center;padding:0 clamp(22px,6vw,90px);pointer-events:none;will-change:transform,opacity}
/* --luz vem do canvas: sobe quando uma onda ou um fio de cáustica cruza a frase */
.copy{--luz:0}
h1{font-family:var(--frase); /* única exceção à Poppins */
font-weight:300;font-size:clamp(36px,7vw,110px);line-height:.94;letter-spacing:-.035em;max-width:14ch;
overflow-wrap:break-word;
color:rgb(255 255 255 / calc(.9 + var(--luz) * .1));
transform:scale(calc(1 + var(--luz) * .005))}
h1 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.018em}
h1 .ponto{font-family:'Georgia',var(--serif);font-style:normal}
.cue{position:absolute;z-index:9;bottom:clamp(20px,4vh,40px);
left:calc(var(--grid-x) - var(--card-x));
display:flex;align-items:center;gap:12px;
font-family:var(--ui);font-size:13px;font-weight:400;letter-spacing:.01em;color:rgba(214,232,244,.55)}
.cue i{display:block;width:52px;height:1px;background:linear-gradient(90deg,rgba(214,232,244,.5),transparent);animation:pull 2.8s ease-in-out infinite}
@keyframes pull{0%,100%{transform:scaleX(.35);transform-origin:left;opacity:.4}50%{transform:scaleX(1);transform-origin:left;opacity:1}}
.vignette{position:absolute;inset:0;z-index:8;pointer-events:none;
background:radial-gradient(120% 90% at 40% 45%, transparent 48%, rgba(0,4,12,.78) 100%)}
main{position:relative;z-index:10;
background:
radial-gradient(60% 40% at 50% 18%, rgba(5,62,112,.30) 0%, transparent 65%),
linear-gradient(var(--abismo),#000E22 45%,var(--abismo))}
.band{max-width:1120px;margin:0 auto;padding:clamp(60px,10vh,116px) clamp(20px,5vw,56px)}
.eyebrow{font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:#6FB4D2;
margin-bottom:26px;text-align:center}
.title{font-family:var(--ui);font-size:clamp(26px,3.9vw,50px);font-weight:300;line-height:1.14;letter-spacing:-.012em;
max-width:20ch;margin:0 auto;text-align:center}
/* o destaque dos títulos usa o mesmo itálico serifado do "ideias" no hero */
.title b{font-family:var(--serif);font-style:italic;font-weight:400;
letter-spacing:-.018em;font-size:1.07em}
/* --- os cinco círculos --- */
/* sai do limite da .band para os círculos poderem crescer de verdade */
.venn{margin:clamp(52px,9vh,104px) 0 0;width:min(1260px,94vw);
position:relative;left:50%;transform:translateX(-50%)}
.venn svg{width:100%;height:auto;display:block;overflow:visible}
.venn circle{
fill:none;stroke:rgba(159,208,228,.48);stroke-width:1.3;
transition:stroke-dashoffset 1.7s cubic-bezier(.22,1,.36,1),stroke .6s ease}
.venn circle.key{stroke:rgba(159,208,228,.9)}
.venn .venn-linha{fill:none;stroke:rgba(159,208,228,.4)}
.venn .venn-seta{fill:none;stroke:rgba(159,208,228,.4);stroke-linecap:round;stroke-linejoin:round}
.venn text{font-weight:500;letter-spacing:.015em;text-anchor:middle;
fill:rgba(226,240,248,.82);opacity:0;transition:opacity .9s ease .6s}
.venn text.key{fill:#fff}
.venn.on text{opacity:1}
/* ======================= SEÇÕES DA HOME ======================= */
.sec{max-width:1120px;margin:0 auto;padding:clamp(52px,7.5vh,92px) clamp(20px,5vw,56px)}
.sec.larga{max-width:1120px}
.sec + .sec{border-top:0}
.shead{max-width:820px;margin:0 auto;text-align:center}
.shead .title{max-width:22ch}
#cases .shead{max-width:none}
#cases .shead .title{max-width:none;white-space:nowrap}
@media (max-width:760px){#cases .shead .title{font-size:5vw}}
.lead{margin:22px auto 0;max-width:62ch;text-align:center;
font-size:clamp(14.5px,1.25vw,16.5px);line-height:1.72;color:rgba(214,232,244,.6)}
.lead b{color:rgba(240,248,252,.9);font-weight:500}
/* link discreto de continuidade — "mais cases", "mais artigos" */
.mais-link{display:inline-flex;align-items:center;gap:9px;margin-top:clamp(34px,5vh,52px);
color:#9FD0E4;text-decoration:none;font-size:14px;font-weight:500;
border-bottom:1px solid rgba(159,208,228,.28);padding-bottom:3px;transition:color .3s,border-color .3s}
.mais-link:hover,.mais-link:focus-visible{color:#fff;border-color:#9FD0E4}
.mais-link i{font-style:normal;transition:transform .3s}
.mais-link:hover i{transform:translate(3px,-3px)}
.centro{text-align:center}
/* ---- seção em duas colunas: texto à esquerda, cartões à direita ---- */
.split{display:grid;grid-template-columns:1fr 1.06fr;gap:clamp(36px,5vw,84px);align-items:start}
.split .grade{margin-top:0}
.grade.q2{grid-template-columns:1fr 1fr}
.eyebrow.esq{text-align:left}
.title.esq{margin:0;text-align:left;max-width:19ch}
.title.menor{font-size:clamp(23px,2.5vw,34px);line-height:1.2}
/* largura calibrada para o título quebrar em duas linhas */
.title.duas{max-width:29ch;text-wrap:balance}
.lead.esq{margin-left:0;margin-right:0;text-align:left;max-width:46ch}
.lead.esq + .lead.esq{margin-top:16px}
.trace{display:block;width:26px;height:3px;border-radius:2px;background:#6FB4D2;margin-bottom:18px}
@media (max-width:900px){
.split{grid-template-columns:1fr;gap:clamp(34px,5vh,48px)}
}
@media (max-width:560px){
.grade.q2{grid-template-columns:1fr}
}
/* ---- cards genéricos (gargalos e competências) ---- */
.grade{display:grid;gap:clamp(12px,1.4vw,18px);margin-top:clamp(42px,6.5vh,72px)}
.grade.q4{grid-template-columns:repeat(4,minmax(0,1fr))}
.bloco{border:1px solid rgba(159,208,228,.22);border-radius:18px;
padding:clamp(20px,2.1vw,28px);
background:linear-gradient(162deg, var(--brilho), var(--profundo));
transition:border-color .45s ease,transform .45s cubic-bezier(.22,1,.36,1),filter .45s}
.bloco:hover{border-color:rgba(159,208,228,.4);transform:translateY(-4px);filter:brightness(1.15)}
.bnum{display:block;font-size:10.5px;font-weight:500;letter-spacing:.22em;color:#6FB4D2;margin-bottom:16px}
.bloco h3{font-size:clamp(16px,1.5vw,19px);font-weight:500;letter-spacing:-.005em;margin-bottom:9px;color:#fff}
.bloco p{font-size:13.5px;line-height:1.62;color:rgba(214,232,244,.58)}
/* ---- metodologia: seis passos sobre uma linha ---- */
.passos{display:grid;grid-template-columns:repeat(6,1fr);
margin-top:clamp(44px,7vh,76px);border-top:1px solid rgba(159,208,228,.16)}
.passo{padding:24px clamp(12px,1.6vw,22px) 0 0;position:relative}
.passo::before{content:"";position:absolute;top:-1px;left:0;height:1px;width:0;background:#6FB4D2;
transition:width 1s cubic-bezier(.22,1,.36,1)}
.passos.on .passo::before{width:calc(100% - 8px)}
.passo b{display:block;font-size:11px;font-weight:500;letter-spacing:.2em;color:#6FB4D2;margin-bottom:12px}
.passo p{font-size:14px;line-height:1.5;color:rgba(226,240,248,.76)}
.fecho{margin:clamp(40px,6vh,64px) auto 0;max-width:56ch;text-align:center;
font-size:clamp(15px,1.4vw,18px);line-height:1.6;font-weight:300;color:rgba(214,232,244,.62)}
.fecho b{font-weight:500;color:#fff}
/* ---- cases em linhas editoriais ---- */
.cases{margin-top:clamp(44px,6.5vh,72px);border-top:1px solid rgba(159,208,228,.14)}
.caso{display:grid;grid-template-columns:52px minmax(0,1fr) minmax(0,1.35fr);
gap:clamp(14px,2.6vw,44px);align-items:start;
padding:clamp(24px,3vw,38px) 0;border-bottom:1px solid rgba(159,208,228,.14);
transition:border-color .4s}
.caso:hover{border-bottom-color:rgba(159,208,228,.3)}
.caso .n{font-size:11px;font-weight:500;letter-spacing:.2em;color:#6FB4D2;padding-top:7px}
.caso h3{font-size:clamp(19px,2vw,26px);font-weight:400;letter-spacing:-.015em;color:#fff}
.caso .tagline{margin-top:9px;font-size:13.5px;line-height:1.55;color:rgba(214,232,244,.55)}
.caso .res{font-size:14.5px;line-height:1.7;color:rgba(226,240,248,.74)}
.caso .fichas{margin-top:16px}
@media (max-width:860px){
.caso{grid-template-columns:36px 1fr;gap:14px 18px}
.caso .lado{grid-column:2}
}
/* ---- clientes ---- */
.setores{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:clamp(30px,4.5vh,44px)}
.setores span{font-size:12px;padding:8px 15px;border-radius:999px;
border:1px solid rgba(159,208,228,.16);color:rgba(214,232,244,.62)}
.esteira{margin-top:clamp(40px,6vh,60px);overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.fila{display:flex;width:max-content;gap:clamp(34px,4.4vw,66px);align-items:center;
animation:desliza 64s linear infinite}
.esteira:hover .fila{animation-play-state:paused}
/* os arquivos são brancos com fundo transparente: a opacidade faz o recuo,
e o hover devolve a marca inteira */
/* os arquivos são brancos com fundo transparente: em vez de background-image
usamos mask-image, o que permite tingir o logo em qualquer cor exata via
background-color — aqui o mesmo azul-escuro do título (--claro-texto),
já que a maioria das seções que usa a esteira tem fundo claro. Onde o
fundo é escuro (o retângulo azul da home), .retangulo-azul .lg devolve
a cor branca original. */
.lg{display:block;flex:0 0 auto;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-position:center;mask-position:center;
-webkit-mask-size:contain;mask-size:contain;
background-color:var(--claro-texto);
opacity:.5;transition:opacity .35s,background-color .35s}
.lg:hover{opacity:.95}
.retangulo-azul .lg{background-color:#fff}
@media (max-width:680px){ .lg{transform:scale(.82);transform-origin:center} }
@keyframes desliza{to{transform:translateX(calc(-50% - clamp(15px,2vw,30px)))}}
/* logotipos dos clientes */
.lg1{width:136px;height:39px;-webkit-mask-image:url('../img/lg1.webp');mask-image:url('../img/lg1.webp')}
.lg2{width:84px;height:40px;-webkit-mask-image:url('../img/lg2.webp');mask-image:url('../img/lg2.webp')}
.lg3{width:136px;height:39px;-webkit-mask-image:url('../img/lg3.webp');mask-image:url('../img/lg3.webp')}
.lg4{width:136px;height:38px;-webkit-mask-image:url('../img/lg4.webp');mask-image:url('../img/lg4.webp')}
.lg5{width:136px;height:27px;-webkit-mask-image:url('../img/lg5.webp');mask-image:url('../img/lg5.webp')}
.lg6{width:136px;height:40px;-webkit-mask-image:url('../img/lg6.webp');mask-image:url('../img/lg6.webp')}
.lg7{width:96px;height:40px;-webkit-mask-image:url('../img/lg7.webp');mask-image:url('../img/lg7.webp')}
.lg8{width:104px;height:40px;-webkit-mask-image:url('../img/lg8.webp');mask-image:url('../img/lg8.webp')}
.lg9{width:136px;height:29px;-webkit-mask-image:url('../img/lg9.webp');mask-image:url('../img/lg9.webp')}
.lg10{width:131px;height:40px;-webkit-mask-image:url('../img/lg10.webp');mask-image:url('../img/lg10.webp')}
.lg11{width:73px;height:40px;-webkit-mask-image:url('../img/lg11.webp');mask-image:url('../img/lg11.webp')}
.lg12{width:40px;height:40px;-webkit-mask-image:url('../img/lg12.webp');mask-image:url('../img/lg12.webp')}
.lg13{width:136px;height:36px;-webkit-mask-image:url('../img/lg13.webp');mask-image:url('../img/lg13.webp')}
.lg14{width:133px;height:40px;-webkit-mask-image:url('../img/lg14.webp');mask-image:url('../img/lg14.webp')}
.lg15{width:136px;height:25px;-webkit-mask-image:url('../img/lg15.webp');mask-image:url('../img/lg15.webp')}
.lg16{width:136px;height:23px;-webkit-mask-image:url('../img/lg16.webp');mask-image:url('../img/lg16.webp')}
.lg17{width:132px;height:40px;-webkit-mask-image:url('../img/lg17.webp');mask-image:url('../img/lg17.webp')}
/* imagens reaproveitadas entre o mega menu e as seções da home */
.ic1{background-image:url('../img/ic1.webp')}
.ic2{background-image:url('../img/ic2.webp')}
.ic3{background-image:url('../img/ic3.webp')}
.ib1{background-image:url('../img/ib1.webp')}
.ib2{background-image:url('../img/ib2.webp')}
.ib3{background-image:url('../img/ib3.webp')}
/* ---- blog: cartões em retrato; a placa cresce no hover ---- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px);
margin-top:clamp(40px,6vh,64px)}
.post{position:relative;display:block;text-decoration:none;overflow:hidden;
aspect-ratio:3/4.1;border-radius:20px;
border:1px solid rgba(159,208,228,.16);
transition:transform .55s cubic-bezier(.22,1,.36,1),border-color .5s,
box-shadow .55s cubic-bezier(.22,1,.36,1)}
.post:hover,.post:focus-visible{transform:translateY(-8px);border-color:rgba(159,208,228,.34);
box-shadow:0 40px 70px -34px rgba(0,8,20,.85)}
.post:focus-visible{outline:2px solid #9FD0E4;outline-offset:3px}
.pimg{position:absolute;inset:0;background-size:cover;background-position:center;
filter:saturate(.86) brightness(.86);
transition:transform .9s cubic-bezier(.22,1,.36,1),filter .6s}
.post:hover .pimg{transform:scale(1.05);filter:saturate(.95) brightness(.7)}
.pimg::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(0,6,16,.30) 0%,rgba(0,6,16,.02) 30%,rgba(0,6,16,.62) 100%)}
/* a placa de vidro cresce para cima porque está ancorada pelo rodapé */
.pglass{position:absolute;left:clamp(10px,1vw,14px);right:clamp(10px,1vw,14px);
bottom:clamp(10px,1vw,14px);
display:block;padding:clamp(16px,1.6vw,22px);border-radius:16px;
background:rgba(6,26,52,.42);border:1px solid rgba(159,208,228,.18);
-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
transition:background .5s,border-color .5s}
.post:hover .pglass{background:rgba(6,26,52,.56);border-color:rgba(159,208,228,.3)}
.ptag{display:inline-block;font-size:11px;font-weight:500;letter-spacing:.02em;
padding:6px 13px;border-radius:999px;margin-bottom:13px;
background:rgba(0,10,26,.45);border:1px solid rgba(159,208,228,.22);
color:rgba(226,240,248,.86)}
.ptit{display:block;font-size:clamp(15px,1.35vw,18px);font-weight:500;line-height:1.34;
letter-spacing:-.005em;color:#fff}
.pmais{display:block;max-height:0;opacity:0;overflow:hidden;
transition:max-height .55s cubic-bezier(.22,1,.36,1),opacity .35s ease,margin-top .55s}
.post:hover .pmais,.post:focus-visible .pmais{max-height:240px;opacity:1;margin-top:14px}
.pexc{display:block;font-size:13px;line-height:1.6;color:rgba(214,232,244,.72)}
.pbtn{display:block;margin-top:16px;text-align:center;padding:11px 16px;border-radius:11px;
font-size:13px;font-weight:500;color:#fff;
background:rgba(3,49,102,.5);border:1px solid rgba(159,208,228,.28);
transition:background .3s,border-color .3s}
.post:hover .pbtn{background:rgba(111,180,210,.24);border-color:rgba(159,208,228,.5)}
/* sem hover (toque): o resumo já aparece, senão ninguém alcança */
@media (hover:none){
.pmais{max-height:240px;opacity:1;margin-top:14px}
}
/* entrada suave das seções */
.rv{opacity:0;transform:translateY(22px);
transition:opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1)}
.rv.on{opacity:1;transform:none}
.rv2{transition-delay:.09s}.rv3{transition-delay:.18s}.rv4{transition-delay:.27s}
@media (max-width:1080px){
.grade.q4{grid-template-columns:1fr 1fr}
.passos{grid-template-columns:repeat(3,1fr);row-gap:26px}
.posts{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
.grade.q4{grid-template-columns:1fr}
.passos{grid-template-columns:1fr 1fr}
.posts{grid-template-columns:1fr;max-width:380px;margin-inline:auto}
}
@media (prefers-reduced-motion:reduce){
.rv{opacity:1;transform:none}
.passos .passo::before{width:calc(100% - 8px)}
}
/* ---- galeria de cases: cartões que abrem ao clique ---- */
.galeria{display:flex;gap:clamp(8px,.9vw,14px);margin-top:clamp(38px,5.5vh,58px);
height:clamp(340px,50vh,470px)}
.gcaso{position:relative;flex:1 1 0;min-width:0;overflow:hidden;cursor:pointer;
border:1px solid rgba(159,208,228,.16);border-radius:20px;
padding:0;font:inherit;color:inherit;text-align:left;
background-size:cover;background-position:center;
transition:flex-grow .75s cubic-bezier(.22,1,.36,1),border-color .5s,filter .5s}
.gcaso::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(0,6,16,.55) 0%,rgba(0,6,16,.06) 34%,rgba(0,6,16,.72) 100%);
transition:opacity .6s}
.gcaso:not(.ativa){filter:saturate(.62) brightness(.72)}
.gcaso:not(.ativa):hover,.gcaso:focus-visible{filter:saturate(.9) brightness(.92);
border-color:rgba(159,208,228,.4)}
.gcaso:focus-visible{outline:2px solid #9FD0E4;outline-offset:3px}
.gcaso.ativa{flex-grow:4.4;border-color:rgba(159,208,228,.3)}
/* marca no topo — fica sempre visível, como assinatura do cartão fechado */
.gmarca{position:absolute;z-index:2;top:clamp(14px,1.5vw,22px);left:clamp(14px,1.5vw,22px);
right:clamp(14px,1.5vw,22px);
font-size:clamp(12px,1.05vw,15px);font-weight:600;letter-spacing:-.01em;color:#fff;
text-shadow:0 2px 14px rgba(0,6,16,.7);line-height:1.2}
.gcaso:not(.ativa) .gmarca{writing-mode:vertical-rl;transform:rotate(180deg);
right:auto;bottom:clamp(14px,1.5vw,22px);top:auto;
max-height:calc(100% - 44px);overflow:hidden}
.gver{position:absolute;z-index:3;top:clamp(14px,1.5vw,22px);right:clamp(14px,1.5vw,22px);
font-size:12.5px;font-weight:500;color:#fff;padding:9px 16px;border-radius:999px;
background:rgba(3,49,102,.55);border:1px solid rgba(159,208,228,.34);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
opacity:0;transform:translateY(-6px);transition:opacity .45s .15s,transform .45s .15s,background .3s}
.gcaso.ativa .gver{opacity:1;transform:none}
.gcaso.ativa:hover .gver{background:rgba(111,180,210,.32)}
/* placa de vidro com tag e título, só no cartão aberto */
.gcapa{position:absolute;z-index:2;left:clamp(12px,1.2vw,18px);right:clamp(12px,1.2vw,18px);
bottom:clamp(12px,1.2vw,18px);
padding:clamp(18px,1.9vw,26px);border-radius:16px;
background:rgba(6,26,52,.42);border:1px solid rgba(159,208,228,.2);
-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
opacity:0;transform:translateY(14px);
transition:opacity .5s .2s,transform .6s .2s cubic-bezier(.22,1,.36,1);
pointer-events:none}
.gcaso.ativa .gcapa{opacity:1;transform:none}
.gtag{display:inline-block;font-size:11px;font-weight:500;letter-spacing:.02em;
padding:6px 13px;border-radius:999px;margin-bottom:14px;
background:rgba(0,10,26,.5);border:1px solid rgba(159,208,228,.24);color:rgba(226,240,248,.88)}
.gtit{display:block;font-size:clamp(18px,1.9vw,27px);font-weight:400;line-height:1.24;
letter-spacing:-.015em;color:#fff;max-width:22ch}
/* texto do cartão aberto: marca, título curto em 1 linha e "Ver case completo" */
.gnome{display:block;margin-bottom:10px;font-size:11.5px;font-weight:500;letter-spacing:.2em;
text-transform:uppercase;color:rgba(226,240,248,.82)}
.gcapa .gtit{max-width:none;font-size:clamp(18px,1.7vw,24px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.glink{display:inline-flex;align-items:center;gap:10px;margin-top:16px;font-size:11.5px;
font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#fff}
.glink i{font-style:normal;font-size:16px;line-height:1;transition:transform .3s}
.gcaso.ativa:hover .glink i{transform:translateX(4px)}
/* no cartão aberto a marca e o link já estão na placa: some o que ficava no topo */
.gcaso.ativa .gmarca,.gcaso.ativa .gver{display:none}
/* painel de destaques abaixo da galeria */
.gpainel{margin-top:clamp(30px,4.5vh,46px);max-width:1040px}
.gpainel.troca .destaques,.gpainel.troca .gresumo{opacity:0;transform:translateY(8px)}
.destaques{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:clamp(24px,4.5vw,64px)}
.destaques,.gresumo{transition:opacity .34s ease,transform .34s ease}
.dest{flex:0 0 auto;min-width:0}
.dest b{display:block;font-size:clamp(28px,3.8vw,52px);font-weight:300;line-height:1;
letter-spacing:-.03em;color:#9FD0E4;white-space:nowrap}
.dest p{margin-top:14px;max-width:28ch;font-size:13.5px;font-weight:500;line-height:1.5;
color:rgba(226,240,248,.82)}
.gresumo{margin-top:clamp(28px,4vh,40px);font-size:clamp(14.5px,1.3vw,16.5px);line-height:1.72;
color:rgba(214,232,244,.6);max-width:760px}
/* capas provisórias — troque por background-image quando as fotos chegarem */
.capa1{background-color:#0B3A63;background-image:url('../img/case-nayax.webp')}
.capa2{background-color:#0A2A3F;background-image:url('/wp-content/uploads/2026/11/case-epr-capa.webp')}
.capa3{background-color:#6b1427;background-image:url('/wp-content/uploads/2026/11/salware-capa-case.webp')}
.capa4{background-color:#0B3A63;background-image:url('/wp-content/uploads/2026/11/tua-45-foto-blush-rosto.webp')}
@media (max-width:900px){
.galeria{height:auto;flex-direction:column;gap:10px}
.gcaso{flex:0 0 auto;height:74px;transition:height .7s cubic-bezier(.22,1,.36,1),border-color .5s,filter .5s}
.gcaso.ativa{height:clamp(300px,46vh,400px)}
.gcaso:not(.ativa) .gmarca{writing-mode:horizontal-tb;transform:none;
top:50%;translate:0 -50%;bottom:auto;right:clamp(14px,4vw,22px)}
.gver{display:none}
.gtit{font-size:19px}
}
@media (max-width:640px){
.destaques{flex-wrap:wrap;gap:24px}
.dest{flex:1 1 100%}
.dest b{white-space:normal}
.dest p{max-width:none}
}
@media (prefers-reduced-motion:reduce){
.gcaso,.gcapa,.gver,.destaques,.gresumo{transition:none}
}
/* ================= MODAL DE ORÇAMENTO ================= */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;
background:rgba(0,6,16,.66);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.modal.open{opacity:1;visibility:visible}
/* caixa menor: cabe na maioria das telas sem barra de rolagem
(o overflow:auto continua como rede de segurança) */
.caixa{width:min(540px,100%);max-height:calc(100vh - 40px);overflow:auto;
background:#fff;color:#0A2038;border-radius:20px;padding:clamp(18px,2vw,24px);
transform:translateY(14px) scale(.98);transition:transform .38s cubic-bezier(.22,1,.36,1)}
.modal.open .caixa{transform:none}
.caixa{position:relative}
.caixa header{margin-bottom:14px;padding-right:44px} /* espaço para o X no canto */
.caixa h2{font-size:clamp(18px,2vw,22px);font-weight:400;line-height:1.2;letter-spacing:-.01em}
/* X ancorado no canto superior direito da caixa, fora do fluxo do título */
.fechar{position:absolute;top:14px;right:14px;z-index:2;width:34px;height:34px;border-radius:50%;border:1px solid rgba(10,32,56,.14);
background:#fff;color:#0A2038;font-size:17px;line-height:1;cursor:pointer;
display:grid;place-items:center;transition:background .25s,border-color .25s}
.fechar:hover,.fechar:focus-visible{background:#F1F5F9;border-color:rgba(10,32,56,.3)}
.campos{display:grid;gap:9px}
/* dois campos por linha: é isso que faz o formulário caber sem rolagem */
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.campo{display:grid;gap:6px}
.rotulo{font-size:12.5px;font-weight:500;color:rgba(10,32,56,.7)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.campos input,.campos textarea,.campos select,.svcbtn{
width:100%;font:inherit;font-size:14.5px;color:#0A2038;background:#F8FAFC;
border:1px solid rgba(10,32,56,.16);border-radius:11px;padding:10px 13px;
transition:border-color .25s,background .25s,box-shadow .25s}
.campos textarea{min-height:62px;resize:vertical;line-height:1.45}
.campos input::placeholder,.campos textarea::placeholder{color:rgba(10,32,56,.42)}
.campos input:focus,.campos textarea:focus,.campos select:focus,.svcbtn:focus-visible{
outline:0;border-color:#0A5C96;background:#fff;box-shadow:0 0 0 3px rgba(10,92,150,.14)}
.campos [aria-invalid="true"]{border-color:#C2453C;background:#FEF6F5}
.erro{font-size:12.5px;color:#C2453C}
.fone{display:grid;grid-template-columns:112px 1fr;gap:10px}
.fone select{padding:11px 10px;cursor:pointer}
/* seletor de serviço com busca */
.svc{position:relative}
.svcbtn{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;text-align:left}
.svcbtn[data-vazio="1"]{color:rgba(10,32,56,.42)}
.svcbtn svg{width:13px;height:13px;flex:0 0 auto;opacity:.5;transition:transform .3s}
.svcbtn[aria-expanded="true"] svg{transform:rotate(180deg)}
.svcpop{position:absolute;z-index:5;top:calc(100% + 6px);left:0;right:0;
background:#fff;border:1px solid rgba(10,32,56,.14);border-radius:12px;
box-shadow:0 24px 50px -22px rgba(0,8,20,.4);padding:8px;
display:none}
.svcpop.open{display:block}
.svcpop input{margin-bottom:6px}
.svclist{list-style:none;max-height:176px;overflow:auto;display:grid;gap:2px}
.svclist li{padding:11px 12px;border-radius:8px;font-size:15px;cursor:pointer}
.svclist li:hover,.svclist li[aria-selected="true"],.svclist li.foco{background:#EEF4F9}
.svclist li[hidden]{display:none}
.svcvazio{padding:11px 12px;font-size:14px;color:rgba(10,32,56,.5)}
.aceite{display:grid;grid-template-columns:19px 1fr;gap:10px;align-items:start;margin-top:2px}
.aceite input{width:20px;height:20px;padding:0;accent-color:#0A5C96;cursor:pointer}
.aceite label{font-size:13px;line-height:1.4;color:rgba(10,32,56,.75);cursor:pointer}
.privacidade{font-size:11px;line-height:1.45;color:rgba(10,32,56,.5)}
.privacidade a{color:#0A5C96}
.enviar{width:100%;margin-top:4px;padding:12px;border:0;border-radius:11px;cursor:pointer;
font:inherit;font-size:15px;font-weight:500;color:#fff;background:#0A2038;
transition:background .3s}
.enviar:hover,.enviar:focus-visible{background:#0A5C96}
.enviar[disabled]{opacity:.6;cursor:progress}
.ok{display:none;text-align:center;padding:20px 4px}
.ok.on{display:block}
.ok strong{display:block;font-size:19px;font-weight:500;margin-bottom:8px}
.ok p{font-size:14.5px;line-height:1.55;color:rgba(10,32,56,.62)}
@media (max-width:560px){.dupla{grid-template-columns:1fr}}
@media (max-width:420px){.fone{grid-template-columns:1fr}}
/* footer: fundo claro (mesmo tom da seção anterior) com o conteúdo
dentro de um retângulo azul-escuro de cantos arredondados — mesma
linguagem do retângulo de Clientes, só que invertida */
footer{position:relative;
margin-top:-1px;
background:var(--azulclaro-bg);
box-shadow:0 0 0 100vmax var(--azulclaro-bg);
clip-path:inset(0 -100vmax);
padding-block:clamp(40px,6vh,72px);
scroll-margin-top:96px} /* altura do header fixo + folga */
.fin{max-width:1120px;margin:0 auto;padding:clamp(48px,8vh,80px) clamp(20px,5vw,56px);
display:flex;flex-wrap:wrap;gap:36px 56px;align-items:flex-start;
background:var(--profundo);border-radius:32px}
.fcta{flex:1 1 340px}
.flogo{display:block;height:52px;aspect-ratio:328/264;margin-bottom:clamp(22px,3vh,30px);opacity:.92}
.fin h2{font-size:clamp(21px,2.5vw,31px);font-weight:300;line-height:1.28;letter-spacing:-.01em;
max-width:none}
.facao{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:clamp(24px,3.4vh,32px)}
/* mesmo vidro do botão Orçamento do header */
.fbtn{font-family:inherit;font-size:13.5px;font-weight:500;letter-spacing:.01em;cursor:pointer;color:#fff;
display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
padding:13px 28px;margin-right:6px;border-radius:12px;
border:0;background:var(--brilho);
text-shadow:0 1px 3px rgba(0,0,0,.35);
transition:filter .2s,transform .3s}
.fbtn:hover,.fbtn:focus-visible{transform:translateY(-2px)}
.fbtn:active{filter:brightness(.92)}
.fbtn:focus-visible{outline:2px solid #9FD0E4;outline-offset:3px}
.fsocial{display:flex;gap:10px;list-style:none}
.facao .fsocial a{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
color:#fff;border:0;background:var(--brilho);
transition:filter .2s,transform .3s}
.facao .fsocial a:hover,.facao .fsocial a:focus-visible{transform:translateY(-2px)}
.facao .fsocial a:active{filter:brightness(.92)}
/* abaixo de 560px as quebras manuais deixam as linhas curtas demais */
@media (max-width:560px){.fin h2 br{display:none}}
/* mesmo itálico serifado do "ideias" no hero */
.fin h2 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.005em;
font-size:1.14em} /* em relação ao próprio h2 */
.fbloco{flex:0 1 auto}
.flabel{font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
color:rgba(214,232,244,.36);margin-bottom:12px}
.fin address{font-style:normal}
.fin ul{list-style:none}
.fin address,.fin ul{font-size:15px;line-height:1.85;color:rgba(214,232,244,.6)}
/* ícone dentro do link: entra na área clicável, mas o sublinhado fica só no texto */
.fin a.ico{display:inline-flex;align-items:center;gap:9px;border-bottom:0}
.fin a.ico span{transition:color .3s}
.fin a.ico:hover,.fin a.ico:focus-visible{color:#9FD0E4}
.fin .i{flex:0 0 auto;opacity:.5;transition:opacity .3s}
.fin a.ico:hover .i,.fin a.ico:focus-visible .i{opacity:1}
.fin a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(159,208,228,.3);transition:color .3s,border-color .3s}
.fin a:hover,.fin a:focus-visible{color:#9FD0E4;border-color:#9FD0E4}
.fin .rodape{flex:1 1 100%;padding-top:12px;font-size:11px;font-weight:500;
letter-spacing:.18em;text-transform:uppercase;color:rgba(214,232,244,.3)}
@media (max-width:680px){
h1{max-width:15ch}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important}html{scroll-behavior:auto}}
/* ================= SEÇÕES CLARAS (intercalando com as escuras) =================
Só cor: mesma estrutura, padding e grid das seções escuras. O fundo claro
"vaza" além da largura de 1120px com o truque do box-shadow, sem mudar
a largura real do elemento (que continua centrado em 1120px). */
.sec.clara{
position:relative;
margin-top:-1px;
background:var(--claro-bg);
box-shadow:0 0 0 100vmax var(--claro-bg);
clip-path:inset(0 -100vmax);
}
.sec.clara + .sec,.sec + .sec.clara{border-top:0}
.sec.azul{
position:relative;
margin-top:-1px;
background:var(--brilho);
box-shadow:0 0 0 100vmax var(--brilho);
clip-path:inset(0 -100vmax);
}
.sec.azul + .sec,.sec + .sec.azul,
.sec.clara + .sec.azul,.sec.azul + .sec.clara{border-top:0}
/* clientes: a seção em si fica clara (sem o azul escuro do main atrás),
e dentro dela um grande retângulo azul-escuro com cantos arredondados
concentra o conteúdo — mesmo texto claro que já era usado no fundo escuro,
porque o retângulo continua escuro por dentro */
.sec.fundo-claro{
position:relative;
margin-top:-1px;
background:var(--claro-bg);
box-shadow:0 0 0 100vmax var(--claro-bg);
clip-path:inset(0 -100vmax);
}
.retangulo-azul{
background:var(--profundo);
border-radius:32px;
padding:clamp(40px,6vh,64px) clamp(24px,4vw,48px);
}
/* "Como a gente trabalha" (diagrama de Venn): mesma faixa clara, mas
o .band não usa a classe .sec, então precisa do próprio tratamento */
.band.clara{
position:relative;
margin-top:-1px;
background:var(--claro-bg);
box-shadow:0 0 0 100vmax var(--claro-bg);
clip-path:inset(0 -100vmax);
}
.band.clara .eyebrow{color:var(--claro-acento)}
.band.clara .title{color:var(--claro-texto)}
.band.clara .venn circle,.sec.clara .venn circle{stroke:rgba(10,32,56,.28)}
.band.clara .venn circle.key,.sec.clara .venn circle.key{stroke:var(--claro-acento)}
.band.clara .venn .venn-linha,.sec.clara .venn .venn-linha{stroke:rgba(10,32,56,.28)}
.band.clara .venn .venn-seta,.sec.clara .venn .venn-seta{stroke:rgba(10,32,56,.28)}
.band.clara .venn text,.sec.clara .venn text{fill:rgba(10,32,56,.7)}
.band.clara .venn text.key,.sec.clara .venn text.key{fill:var(--claro-texto)}
/* blog: mesma superfície clara, mas em um tom levemente azulado */
.sec.azulclaro{
position:relative;
margin-top:-1px;
background:var(--azulclaro-bg);
box-shadow:0 0 0 100vmax var(--azulclaro-bg);
clip-path:inset(0 -100vmax);
}
.sec.azulclaro .eyebrow{color:var(--claro-acento)}
.sec.azulclaro .title{color:var(--claro-texto)}
.sec.azulclaro .lead{color:rgba(10,32,56,.62)}
.sec.azulclaro .mais-link{color:var(--claro-acento);border-color:rgba(10,92,150,.32)}
.sec.azulclaro .mais-link:hover,.sec.azulclaro .mais-link:focus-visible{color:var(--claro-texto);border-color:var(--claro-texto)}
.sec.clara .eyebrow{color:var(--claro-acento)}
.sec.clara .title{color:var(--claro-texto)}
.sec.clara .lead{color:rgba(10,32,56,.62)}
.sec.clara .lead b{color:rgba(10,32,56,.92)}
.sec.clara .mais-link{color:var(--claro-acento);border-color:rgba(10,92,150,.32)}
.sec.clara .mais-link:hover,.sec.clara .mais-link:focus-visible{color:var(--claro-texto);border-color:var(--claro-texto)}
/* cases: números e resumo abaixo da galeria de cases */
.sec.clara .dest b{color:var(--claro-acento)}
.sec.clara .dest p{color:rgba(10,32,56,.78)}
/* blocos escuros com destaque numérico (.bloco .dest): título branco, legenda azul clara — padrão do site */
.bloco .dest b{color:#fff}
.bloco .dest p{color:#9FD0E4}
.sec.clara .bloco .dest b{color:#fff}
.sec.clara .bloco .dest p{color:#9FD0E4}
/* blocos escuros com listas (.bloco .lista): itens brancos — mesmo
padrão do .dest acima, já que .bloco é sempre um card escuro
mesmo dentro de uma seção clara */
.bloco .lista li{color:#fff}
.bloco .lista li::before{background:#9FD0E4}
.sec.clara .bloco .lista li{color:#fff}
.sec.clara .bloco .lista li::before{background:#9FD0E4}
.sec.clara .gresumo{color:rgba(10,32,56,.64)}
/* gargalos: barrinha de destaque ao lado do texto */
.sec.clara .trace{background:var(--claro-acento)}
/* metodologia: linha dos passos e frase de fechamento */
.sec.clara .passos{border-top-color:rgba(10,32,56,.14)}
.sec.clara .passo::before{background:var(--claro-acento)}
.sec.clara .passo b{color:var(--claro-acento)}
.sec.clara .passo p{color:rgba(10,32,56,.72)}
.sec.clara .fecho{color:rgba(10,32,56,.62)}
.sec.clara .fecho b{color:var(--claro-texto)}