:root{
  --escuro:#0D0D0D; --claro:#F5F5F2; --acento:#FAAE06; --painel:#1A1A1A;
  --max:1280px;

  --fp:'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fm:'DM Mono', 'Courier New', monospace;
  --fn:'Schibsted Grotesk', system-ui, -apple-system, "Segoe UI", sans-serif;
  --fbn:'Bebas Neue', 'Arial Narrow', sans-serif;

  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px;
  --e6:32px; --e7:48px; --e8:64px; --e9:96px; --e10:128px;
}

/* ===================================================================
   MOBILE FIRST: tudo abaixo (sem media query) e' o layout de celular.
   @media (min-width: ...) vai progressivamente "expandindo" pra tablet
   e desktop. Breakpoints: 681px, 981px, 1121px (mesmos limiares de
   antes, só invertidos de direção).
   =================================================================== */

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  margin:0; background:var(--escuro); color:var(--escuro);
  font-family:var(--fp); line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-bottom:0;
}
.tela{position:relative; max-width:480px; margin:0 auto; overflow:hidden; box-shadow:0 30px 70px -30px rgb(13 13 13 / .6);}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{border:0; font:inherit; background:transparent; color:inherit; cursor:pointer;}
h1,h2,h3{font-weight:500; letter-spacing:-.04em; margin:0;}
p{margin:0;}
::selection{background:var(--acento); color:var(--escuro);}
a:focus-visible, button:focus-visible{outline:2px solid var(--acento); outline-offset:3px;}

.envolucro{width:min(100% - 32px, 560px); margin:0 auto;}

/* ===== contextos claro/escuro ===== */
.secao-escura{
  background:var(--escuro); color:var(--claro);
  --suave:rgb(245 245 242 / .62); --borda:rgb(245 245 242 / .16);
}
.secao-clara{
  background:var(--claro); color:var(--escuro);
  --suave:rgb(13 13 13 / .60); --borda:rgb(13 13 13 / .14);
}
.suave{color:var(--suave);}

/* ===== cabeçalho de seção reutilizável: número grande + linha vertical
   + "SEÇÃO" + título + régua com aceno
   amarelo animado indo e voltando. Usa --suave/--borda, que já trocam
   sozinhos entre .secao-clara/.secao-escura -- funciona nos dois sem
   precisar de variante própria por seção. ===== */
.cabecalho-secao{display:flex; align-items:stretch; gap:var(--e4);}
.cabecalho-secao-numero{flex-shrink:0; font-family:var(--fp); font-size:clamp(38px,11vw,52px); font-weight:700; color:var(--acento); line-height:.85; letter-spacing:-.03em;}
.cabecalho-secao-linha{width:1px; flex-shrink:0; background:var(--borda);}
.cabecalho-secao-corpo{display:flex; flex-direction:column; justify-content:center; gap:2px;}
.cabecalho-secao-rotulo{font-family:var(--fm); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--suave);}
.cabecalho-secao-titulo{margin:0; font-family:var(--fp); font-size:clamp(22px,6.2vw,29px); font-weight:700; letter-spacing:-.01em; text-transform:uppercase; line-height:1.05; color:inherit;}
.cabecalho-secao-regua{position:relative; height:1px; margin-top:10px; background:var(--borda); overflow:hidden;}
.cabecalho-secao-regua span{position:absolute; top:0; left:0; width:56px; height:100%; background:var(--acento); animation:regua-vaivem 3.6s ease-in-out infinite alternate;}
@keyframes regua-vaivem{from{left:0;} to{left:calc(100% - 56px);}}

/* ===== botoes ===== */
.pilula{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--e3);
  min-height:56px; padding:0 26px; border-radius:999px;
  font-size:14px; font-weight:500; letter-spacing:-.01em;
  background:var(--escuro); color:var(--claro);
  transition:transform 220ms ease, background-color 420ms ease, color 420ms ease;
}
.pilula:hover, .pilula:focus-visible{transform:translateY(-2px);}
.pilula svg{width:19px; height:19px; flex-shrink:0; transition:color 420ms ease, transform 220ms ease;}
.pilula-clara{background:var(--claro); color:var(--escuro);}
.header-cta:hover, .header-cta:focus-visible, .pilula-clara:hover, .pilula-clara:focus-visible{background:var(--acento); color:var(--escuro);}

/* CTA principal: a cor atravessa o botão e revela o ícone em contraste. */
.pilula:not(.header-cta):not(.pilula-clara):not(.pilula-dividida){position:relative; isolation:isolate; overflow:hidden;}
.pilula:not(.header-cta):not(.pilula-clara):not(.pilula-dividida)::before{
  position:absolute; z-index:0; inset:0; content:''; border-radius:inherit; background:var(--acento);
  transform:scaleX(0); transform-origin:left center; transition:transform 550ms cubic-bezier(.65,0,.35,1);
}
.pilula:not(.header-cta):not(.pilula-clara):not(.pilula-dividida) > span, .pilula:not(.header-cta):not(.pilula-clara):not(.pilula-dividida) > svg{position:relative; z-index:2;}
.pilula:not(.header-cta):not(.pilula-clara):not(.pilula-dividida):hover, .pilula:not(.header-cta):not(.pilula-clara):not(.pilula-dividida):focus-visible{color:var(--escuro);}
.pilula:not(.header-cta):not(.pilula-clara):not(.pilula-dividida):hover::before, .pilula:not(.header-cta):not(.pilula-clara):not(.pilula-dividida):focus-visible::before{transform:scaleX(1);}
.pilula:not(.header-cta):not(.pilula-clara):not(.pilula-dividida):hover svg, .pilula:not(.header-cta):not(.pilula-clara):not(.pilula-dividida):focus-visible svg{color:var(--escuro); transform:translateX(1px);}

/* Hero: botão primário com moldura preta por fora e pill branco por dentro
   pro texto, ícone flutuando na própria moldura. Sem troca de cor no
   hover -- só sombra. */
.pilula-dividida{
  display:inline-flex; align-items:center; gap:6px; min-width:0; background:var(--escuro);
  border:0; border-bottom:0; border-radius:999px; padding:6px; text-transform:none;
  box-shadow:0 10px 26px -8px rgb(13 13 13 / .45); transition:box-shadow 260ms ease;
}
.pilula-dividida:hover, .pilula-dividida:focus-visible{box-shadow:0 14px 32px -8px rgb(13 13 13 / .55);}
.pilula-dividida .pilula-texto{
  display:flex; flex:1; min-width:0; align-items:center; justify-content:center; text-align:center;
  height:48px; padding:0 26px; border-radius:999px; background:var(--claro); color:var(--escuro);
  font-size:16px; font-weight:600; letter-spacing:.02em; text-transform:uppercase;
}
.pilula-dividida .pilula-circulo{
  position:relative; display:grid; flex-shrink:0; place-items:center; width:48px; height:48px; border-radius:50%;
  background:var(--claro); color:var(--escuro);
}
.pilula-dividida .pilula-circulo svg{position:absolute; inset:0; display:block; width:27px; height:27px; margin:auto; transform:translate(1px,2px);}

.link-texto{
  display:inline-flex; align-items:center; gap:9px;
  border-bottom:1px solid var(--borda); padding-bottom:6px;
  font-family:var(--fm); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  transition:color 180ms ease, border-color 180ms ease;
}
.link-texto svg{width:14px; height:14px;}
.link-texto:hover, .link-texto:focus-visible{border-color:currentColor; color:var(--suave);}

/* ===== header (barra flutuante) ===== */
.cabecalho{position:absolute; z-index:20; top:0; left:0; display:flex; width:100%; justify-content:center; padding:16px 16px 0;}
.cabecalho .cabecalho-interno{
  position:relative; display:flex; width:100%; min-height:54px; align-items:center; gap:var(--e2);
  padding:5px 6px 5px 7px; border-radius:999px; background:var(--escuro); color:var(--claro);
  box-shadow:0 2px 4px rgb(13 13 13 / .22), 0 9px 15px rgb(13 13 13 / .18);
}
.marca{display:inline-flex; align-items:center; gap:var(--e3); color:var(--claro); font-size:14px; font-weight:400; letter-spacing:-.03em; white-space:nowrap;}
.marca-primeiro{font-weight:300;}
.marca-nome strong{margin-left:1px; font-weight:500; font-style:italic;}
.marca > span:last-child{transform:translateX(-3px);}
.marca-sigla{
  display:grid; width:42px; height:42px; place-items:center; border-radius:50%;
  overflow:hidden; background:var(--escuro);
}
.marca-sigla img{display:block; width:100%; height:100%; object-fit:contain; object-position:center; transform:scale(1.42);}
.nav-principal{
  display:none; position:absolute; top:calc(100% + 8px); right:0; left:0;
  flex-direction:column; align-items:stretch; gap:0; overflow:hidden;
  border:1px solid rgb(245 245 242 / .18); border-radius:20px; background:var(--escuro);
  box-shadow:0 10px 22px rgb(13 13 13 / .12);
}
.nav-principal.aberto{display:flex;}
.nav-principal a{
  display:flex; align-items:center; gap:var(--e3);
  color:var(--claro); transition:background-color 180ms ease;
  border-bottom:1px solid rgb(245 245 242 / .14); padding:var(--e5);
}
.nav-principal a:last-child{border-bottom:0;}
.nav-principal a:hover, .nav-principal a:focus-visible{background:rgb(245 245 242 / .04);}
.nav-item-num{font-family:var(--fm); font-size:13px; color:rgb(245 245 242 / .4);}
.nav-item-divisor{width:1px; height:20px; background:rgb(245 245 242 / .25);}
.nav-item-icone{display:inline-flex; color:var(--acento);}
.nav-item-icone svg{width:14px; height:14px;}
.nav-item-titulo{font-family:var(--fp); font-size:20px; font-weight:700; letter-spacing:-.02em; text-transform:uppercase;}
.header-cta{display:none; position:relative; isolation:isolate; min-width:142px; min-height:42px; margin-left:auto; padding:0 18px; gap:8px; overflow:hidden; background:var(--claro); color:var(--escuro); font-family:var(--fn); font-size:10px; font-weight:600; letter-spacing:.06em; line-height:1; text-transform:uppercase;}
.header-cta svg{width:17px; height:17px; flex:0 0 17px;}
.header-cta::before{position:absolute; z-index:0; inset:0; content:''; border-radius:inherit; background:var(--acento); transform:scaleX(0); transform-origin:left center; transition:transform 550ms cubic-bezier(.65,0,.35,1);}
.header-cta > span, .header-cta > svg{position:relative; z-index:2;}
.header-cta:hover, .header-cta:focus-visible{background:var(--claro); color:var(--escuro);}
.header-cta:hover::before, .header-cta:focus-visible::before{transform:scaleX(1);}
.header-cta:hover svg, .header-cta:focus-visible svg{color:var(--escuro);}
.menu-toggle{
  display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center;
  margin-left:auto; background:transparent; color:var(--claro);
}
.menu-toggle svg{width:19px; height:19px;}

/* No celular, marca e menu ficam como duas peças independentes. */
@media (max-width:980px){
  .cabecalho .cabecalho-interno{
    min-height:0; padding:0; gap:10px; border-radius:0;
    background:transparent; box-shadow:none;
  }
  .marca{
    min-height:54px; padding:5px 15px 5px 7px; border-radius:999px;
    background:var(--escuro);
    box-shadow:0 2px 4px rgb(13 13 13 / .22), 0 9px 15px rgb(13 13 13 / .18);
  }
  .menu-toggle{
    width:54px; height:54px; flex:0 0 54px; margin-left:auto; border-radius:50%;
    background:var(--escuro);
    box-shadow:0 2px 4px rgb(13 13 13 / .22), 0 9px 15px rgb(13 13 13 / .18);
  }
  .menu-toggle svg{width:20px; height:20px;}
}

/* ===== hero ===== */
.hero{padding:112px 0 var(--e4);}
.hero-grade{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--e6); align-items:end;}
.hero-conteudo{display:flex; flex-direction:column; align-items:flex-start; min-width:0;}
.hero-titulo{
  max-width:100%; margin:0; font-size:clamp(40px, 10.5vw, 48px);
  font-weight:400; letter-spacing:-.07em; line-height:1;
}
.hero-titulo > span{display:block; white-space:nowrap;}
.hero-titulo em{font-style:italic; font-weight:600;}
.hero-baixo{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--e4); align-items:end; align-self:stretch; margin-top:6px;}
.hero-descricao{max-width:520px; margin:0; color:var(--suave); font-size:clamp(16px,1.5vw,21px); font-weight:300; line-height:1.32; letter-spacing:-.025em;}
.hero-descricao span{display:block; white-space:nowrap;}
.hero-descricao em{font-style:italic; font-weight:600;}
.hero-acoes{display:flex; flex-wrap:wrap; flex-direction:column; align-items:stretch; gap:var(--e4);}
.hero-acoes .pilula{width:100%;}
.hero-cta-secundario{
  display:inline-flex; min-width:240px; height:56px; align-items:center; justify-content:center; gap:10px;
  border:1.5px solid rgb(13 13 13 / .45); border-radius:999px; padding:0 28px;
  color:rgb(13 13 13 / .86); font-family:var(--fp); font-size:16px; font-weight:600; letter-spacing:.02em; text-transform:uppercase;
  transition:border-color 260ms ease, transform 200ms ease, box-shadow 260ms ease;
}
.hero-cta-secundario svg{width:17px; height:17px; flex-shrink:0;}
.hero-cta-secundario:hover, .hero-cta-secundario:focus-visible{border-color:rgb(13 13 13 / .9); color:rgb(13 13 13 / .86); transform:translateY(-2px); box-shadow:0 10px 22px -10px rgb(13 13 13 / .25);}
.hero-acoes .hero-cta-secundario{width:100%;}
.hero-prova{margin:0; color:var(--suave); font-family:var(--fm); font-size:10px; letter-spacing:.08em; text-transform:uppercase;}
.hero-prova span{color:var(--acento);}

.foto-placeholder{
  position:relative; margin:0; overflow:hidden; min-height:400px;
  border-radius:28px; border:1px dashed var(--borda);
  background:rgb(13 13 13 / .03);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:var(--e5);
}
.foto-placeholder span{font-family:var(--fm); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--suave); line-height:1.6;}
.foto-placeholder img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}

.hero-person-wrapper{
  --mouse-x:50%; --mouse-y:50%; --texture-x:0px; --texture-y:0px;
  position:relative; justify-self:stretch; min-height:420px; margin-top:clamp(72px,20vw,96px); aspect-ratio:.82;
  overflow:visible;
}
.hero-person-card{position:absolute; inset:0; margin:0; overflow:hidden; border-radius:32px; background:#0A0A0A; isolation:isolate; box-shadow:0 30px 60px -16px rgb(13 13 13 / .75);}
.hero-person-texture{
  position:absolute; z-index:1; inset:-8px; width:calc(100% + 16px); height:calc(100% + 16px);
  fill:none; stroke:rgb(245 245 242 / .09); stroke-width:1; opacity:1;
  transform:translate(var(--texture-x), var(--texture-y)); transition:transform 350ms ease;
  pointer-events:none;
}
.hero-person-reveal{
  position:absolute; z-index:2; inset:0; opacity:0; pointer-events:none;
  background:radial-gradient(circle 180px at var(--mouse-x) var(--mouse-y), rgb(245 245 242 / .055) 0%, rgb(245 245 242 / .022) 19%, transparent 45%);
  transition:opacity 300ms ease;
}
.hero-person-placeholder{
  position:absolute; z-index:3; top:44%; left:50%; color:rgb(245 245 242 / .58);
  font-family:var(--fm); font-size:10px; letter-spacing:.11em; line-height:1.65; text-align:center; text-transform:uppercase;
  transform:translate(-50%,-50%); white-space:nowrap;
}
.hero-person-image{
  position:absolute; z-index:3; bottom:0; left:50%; width:102%; max-width:none; height:auto;
  transform:translateX(-50%) translate(var(--person-x, 0px), var(--person-y, 0px));
  transform-origin:center bottom; pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 70%, transparent 96%);
  mask-image:linear-gradient(to bottom, #000 0%, #000 70%, transparent 96%);
  transition:transform 350ms ease;
}
.hero-person-fade{
  position:absolute; z-index:4; inset:0; pointer-events:none; border-radius:32px;
  background:linear-gradient(to bottom, transparent 54%, rgb(10 10 10 / .15) 68%, #0A0A0A 94%);
}
.hero-person-info{position:absolute; z-index:5; bottom:28px; left:28px; display:flex; flex-direction:column; gap:13px; color:var(--claro); pointer-events:none; transform:translateY(4px);}
.hero-person-info strong{display:flex; flex-direction:column; font-size:clamp(38px,9.5vw,52px); letter-spacing:-.075em; line-height:.79;}
.hero-person-info .nome-gabriel{font-style:italic; font-weight:700;}
.hero-person-info strong em{font-style:italic; font-weight:300; letter-spacing:-.07em; transform:translateY(3px);}
.hero-person-info > span{align-self:center; color:rgb(245 245 242 / .9); font-size:10px; font-weight:200; letter-spacing:.42em; line-height:1.2; text-transform:uppercase; transform:translate(4px,-7px);}
@media (max-width:680px){
  /* No card compacto, o cargo acompanha a largura do nome — sem ultrapassá-lo. */
  .hero-person-info > span{align-self:center; letter-spacing:.22em; white-space:nowrap; transform:translate(0,-7px);}
  /* A foto precisa já nascer inteira no celular; o reveal genérico fazia o
     card entrar deslocado e dava a impressão de que a cabeça foi recortada. */
  .pronto-js .hero-person-wrapper.revelar{opacity:1; transform:none; transition:none;}
  /* Em conexões móveis, só revelamos o retrato após o decode completo para
     evitar o frame intermediário em que a imagem aparece cortada. */
  .hero-person-image{opacity:0; transition:opacity 180ms ease;}
  .hero-person-image.imagem-carregada{opacity:1;}
}
.hero-person-arrow{
  position:absolute; z-index:6; top:18px; right:18px; display:grid; width:44px; height:44px; place-items:center;
  border:1px solid rgb(245 245 242 / .22); border-radius:50%; color:rgb(245 245 242 / .9); transition:background-color 220ms ease, border-color 220ms ease;
}
.hero-person-arrow svg{width:18px; height:18px; transition:transform 220ms ease;}
.hero-person-arrow:hover, .hero-person-arrow:focus-visible{border-color:rgb(245 245 242 / .65); background:rgb(245 245 242 / .06);}
.hero-person-arrow:hover svg, .hero-person-arrow:focus-visible svg{transform:translate(2px,-2px);}
.hero-person-wrapper.is-pointer-active .hero-person-reveal{opacity:1;}

/* ===== faixa em movimento ===== */
.faixa-marquee{overflow:hidden; padding:18px 0; background:var(--escuro); color:var(--claro);}
.faixa-marquee-trilha{display:flex; width:max-content; animation:marquee 48s linear infinite; will-change:transform;}
.faixa-marquee p{display:flex; flex:none; align-items:center; gap:20px; margin:0; padding-right:20px; font-family:var(--fn); font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;}
.faixa-marquee-icone{display:inline-flex; color:var(--acento);}
.faixa-marquee-icone svg{width:14px; height:14px;}
@keyframes marquee{to{transform:translateX(-50%);}}

/* ===== secoes genericas ===== */
.secao-titulo{margin:var(--e5) 0 0; font-size:clamp(30px,9.6vw,44px); font-weight:500; letter-spacing:-.055em; line-height:1.08;}
#titulo-diagnostico{font-size:clamp(36px,11.5vw,52px); line-height:.96;}
#titulo-diagnostico em, #titulo-como-resolvo em{font-style:italic; font-weight:600;}
@media (min-width:681px){#titulo-diagnostico em{white-space:nowrap;}}
.secao-lead{max-width:380px; margin:var(--e5) 0 0; color:var(--suave); font-size:16px; line-height:1.7;}

/* ===== diagnostico (problems) — accordion ===== */
.diagnostico{padding:64px 0 108px;}
.diagnostico-grade{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--e6);}
.lista-diagnostico{list-style:none; margin:0; padding:0;}
.diagnostico-item{border-bottom:1px solid var(--borda);}
.diagnostico-cabecalho{
  display:flex; width:100%; align-items:center; gap:var(--e3); min-height:80px; padding:var(--e4) var(--e2);
  background:none; border:0; border-radius:18px; text-align:left; font:inherit; color:inherit; cursor:pointer;
  transition:background-color 260ms ease;
}
.diagnostico-item .indice{font-family:var(--fp); font-size:18px; font-weight:400; letter-spacing:-.02em; color:var(--suave); flex-shrink:0; transition:color 260ms ease;}
.diagnostico-frase{flex:1; margin:0; font-size:16px; letter-spacing:-.03em; line-height:1.3; transition:color 260ms ease, font-size 260ms ease;}
.diagnostico-mais{flex-shrink:0; display:grid; place-items:center; color:var(--acento); line-height:1;}
.diagnostico-mais svg{width:22px; height:22px; stroke-width:2.6; transition:transform 260ms ease;}

.diagnostico-pontos{display:none; color:var(--acento); font-family:var(--fm); font-size:18px; letter-spacing:.15em;}

.diagnostico-item.aberto{background:var(--escuro); border-radius:22px; border-bottom-color:transparent; margin:var(--e3) 0; box-shadow:0 30px 60px -16px rgb(13 13 13 / .75);}
.diagnostico-item.aberto .diagnostico-cabecalho{min-height:0; justify-content:space-between; padding:var(--e4);}
.diagnostico-item.aberto .diagnostico-mais{width:28px; height:28px;}
.diagnostico-item.aberto .diagnostico-pontos{display:block; margin-left:26px;}
.diagnostico-item.aberto .indice, .diagnostico-item.aberto .diagnostico-frase{display:none;}
[data-accordion].interagido .diagnostico-item.aberto .diagnostico-mais svg{transform:rotate(90deg);}

.diagnostico-painel{padding:0 var(--e4) var(--e5); opacity:0; transform:translateY(-6px); transition:opacity 300ms ease, transform 300ms ease;}
.diagnostico-item.aberto .diagnostico-painel{opacity:1; transform:none;}
.diagnostico-painel-interno{display:flex; flex-direction:column; gap:var(--e4);}
.diagnostico-titulo-visual{width:100%; max-width:340px; margin:0 auto; color:var(--claro); font-size:clamp(25px,7vw,32px); font-weight:400; letter-spacing:-.02em; line-height:1.15;}
.diagnostico-titulo-visual .destaque{color:var(--acento); font-weight:700; font-style:italic;}

.diagnostico-visual{display:flex; flex-wrap:wrap; gap:10px;}
.diagnostico-consequencia{margin:0; color:var(--claro); font-size:19px; font-weight:500; font-style:italic; letter-spacing:-.02em; line-height:1.25;}

/* item 01: bolhas de chat */
.diagnostico-visual-chat{width:100%; justify-content:center;}
.diagnostico-visual-chat img{width:100%; max-width:340px; margin:0 auto; border-radius:16px; display:block;}

/* item 02: 4 cards de interface */
.diagnostico-visual-fragmentos{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; width:100%;}
.fragmento-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:var(--painel); border:1.5px solid rgb(245 245 242 / .1); border-radius:14px; padding:16px 8px;
  color:rgb(245 245 242 / .68); font-family:var(--fp); font-size:12px; font-weight:500; letter-spacing:-.01em; text-align:center;
  transition:border-color 260ms ease, color 260ms ease, background-color 260ms ease;
}
.fragmento-card svg{width:22px; height:22px;}

/* item 03: fluxo com 3 etapas */
.diagnostico-visual-fluxo{align-items:flex-start; flex-wrap:nowrap; width:100%;}
.etapa-fluxo{
  display:flex; flex-direction:column; align-items:center; gap:7px; flex:1; min-width:0;
  background:var(--painel); border:1px solid rgb(245 245 242 / .1); border-radius:14px; padding:12px 4px;
}
.etapa-circulos{display:flex; align-items:center; gap:4px;}
.etapa-numero{
  display:inline-grid; place-items:center; flex-shrink:0; width:20px; height:20px;
  border:1.5px solid rgb(245 245 242 / .3); border-radius:50%; font-family:var(--fm); font-size:10px; color:rgb(245 245 242 / .55);
}
.etapa-icone{display:inline-grid; place-items:center; flex-shrink:0; width:38px; height:38px; border-radius:50%; background:rgb(13 13 13 / .4); color:var(--acento);}
.etapa-icone svg{display:block; width:20px; height:20px;}
.etapa-nome{font-size:11px; font-weight:500; letter-spacing:-.01em; color:rgb(245 245 242 / .8); text-align:center;}
.etapa-icone{box-shadow:0 0 0 1.5px var(--acento);}
.seta-fluxo{flex-shrink:0; align-self:center; margin-top:28px; color:rgb(245 245 242 / .3); font-size:13px;}

.etapa-loop{position:relative; display:flex; align-items:center; justify-content:center; height:44px; margin-top:-2px;}
.etapa-loop-svg{position:absolute; inset:0; width:100%; height:100%;}
.etapa-repetir{
  position:relative; z-index:1; display:inline-flex; align-items:center; gap:6px; background:var(--escuro);
  border:1px dashed rgb(250 174 6 / .5); border-radius:999px; padding:6px 14px;
  color:var(--acento); font-family:var(--fp); font-size:12px; font-weight:600; letter-spacing:-.01em;
}
.etapa-repetir svg{width:13px; height:13px;}

/* item 04: painel de métricas */
.diagnostico-visual-painel{flex-direction:column; width:100%; gap:10px;}
.linha-painel{
  display:flex; align-items:center; gap:12px; width:100%;
  background:var(--painel); border-radius:999px; padding:10px 16px 10px 18px;
}
.linha-painel-nome{width:84px; flex-shrink:0; font-family:var(--fp); font-size:16px; font-weight:400; letter-spacing:-.02em; color:rgb(245 245 242 / .8);}
.barra-painel{position:relative; flex:1; height:6px; border-radius:999px; background:rgb(245 245 242 / .12); overflow:hidden;}
.barra-painel-preenchido{position:absolute; inset:0; width:0%; background:var(--acento); border-radius:inherit; transition:width 1400ms cubic-bezier(.22,1,.36,1);}
.diagnostico-item.aberto .barra-painel-preenchido{width:var(--valor);}
.linha-painel-valor{width:44px; flex-shrink:0; text-align:right; font-family:var(--fp); font-size:18px; font-weight:600; letter-spacing:-.02em; color:var(--acento);}

/* Timeline clara: preserva os visuais existentes sem transformar a seção
   em um bloco preto. */
.lista-diagnostico{position:relative; display:grid; gap:12px; padding-left:58px;}
.lista-diagnostico::before{position:absolute; z-index:0; top:31px; bottom:0; left:20px; width:2px; border-radius:99px; content:''; background:linear-gradient(to bottom, rgb(13 13 13 / .1) 0%, rgb(13 13 13 / .28) 12%, rgb(13 13 13 / .28) 78%, transparent 100%);}
.lista-diagnostico::after{display:none;}
.timeline-progresso{position:absolute; z-index:0; top:var(--timeline-carregamento-topo,31px); left:20px; width:2px; height:var(--timeline-carregamento-altura,0px); border-radius:99px; background:var(--acento); box-shadow:0 0 8px rgb(250 174 6 / .42); opacity:0; transform:scaleY(0); transform-origin:center var(--timeline-origem,top); pointer-events:none;}
.lista-diagnostico.carregando .timeline-progresso{opacity:1; animation:timeline-carrega 4000ms linear both;}
@keyframes timeline-carrega{to{transform:scaleY(1);}}
.lista-diagnostico.transitando::after{animation:timeline-avanca 620ms cubic-bezier(.22,1,.36,1) both;}
@keyframes timeline-avanca{from{top:var(--timeline-inicio); opacity:1;}to{top:var(--timeline-fim); opacity:1;}}
.diagnostico-item{position:relative; z-index:1; overflow:visible; border:1px solid rgb(13 13 13 / .12); border-radius:20px; background:rgb(255 255 255 / .48); transition:box-shadow 360ms ease, border-color 360ms ease, background-color 360ms ease;}
.diagnostico-item::after, .diagnostico-item.aberto::after{display:none;}
.diagnostico-cabecalho{position:relative; min-height:82px; padding:18px 22px; gap:14px; border-radius:inherit;}
.diagnostico-item .indice{position:absolute; z-index:2; top:20px; left:-61px; display:grid; width:44px; height:44px; place-items:center; border:1px solid rgb(13 13 13 / .25); border-radius:50%; background:var(--claro); color:rgb(13 13 13 / .62); font-family:var(--fp); font-size:16px; font-weight:700; letter-spacing:-.035em; transition:color 300ms ease, border-color 300ms ease, background-color 300ms ease, box-shadow 300ms ease;}
.diagnostico-frase{min-width:0; font-size:clamp(9px,calc((100vw - 186px) / 20.4),15px); font-weight:400; color:var(--escuro); white-space:nowrap;}
.diagnostico-mais{width:34px; height:34px; border:1px solid rgb(13 13 13 / .2); border-radius:50%; color:var(--escuro); transition:transform 280ms ease, background-color 280ms ease, color 280ms ease;}
.diagnostico-mais svg{width:18px; height:18px; transform:rotate(0deg);}
.diagnostico-item.aberto{margin:0; border-color:rgb(250 174 6 / .64); border-radius:20px; background:var(--escuro); box-shadow:0 18px 42px -28px rgb(13 13 13 / .62);}
.diagnostico-item.aberto .indice{display:grid; border-color:var(--acento); background:var(--acento); color:var(--escuro); box-shadow:0 0 0 5px rgb(250 174 6 / .15);}
.diagnostico-item.aberto .diagnostico-cabecalho{min-height:52px; justify-content:space-between; padding:12px 22px;}
.diagnostico-item.aberto .diagnostico-frase{display:none;}
.diagnostico-item.aberto .diagnostico-pontos{display:block; margin-left:0; color:var(--acento);}
.diagnostico-item.aberto .diagnostico-mais{margin-left:auto; background:var(--escuro); color:var(--claro);}
.diagnostico-item.aberto .diagnostico-mais svg{transform:rotate(90deg);}
.diagnostico-painel{max-height:0; overflow:hidden; padding:0 22px; opacity:0; transform:none; transition:opacity 220ms ease;}
.diagnostico-item.aberto .diagnostico-painel{max-height:620px; padding:0 22px 22px; opacity:1; transform:none;}
.diagnostico-painel-interno{gap:16px;}
.diagnostico-titulo-visual{max-width:none; color:var(--claro); font-size:clamp(23px,6.5vw,30px);}
.diagnostico-titulo-visual-menor{font-size:clamp(20px,5.6vw,26px);}
.diagnostico-visual-chat{justify-content:flex-start;}
.diagnostico-visual-chat img{max-width:340px; margin:0; box-shadow:0 14px 28px -18px rgb(13 13 13 / .45);}

@media (max-width:380px){
  .lista-diagnostico{padding-left:52px;}
  .lista-diagnostico::before, .timeline-progresso{left:18px;}
  .lista-diagnostico::after{left:13px;}
  .diagnostico-item .indice{left:-55px; width:40px; height:40px;}
  .diagnostico-item::after{left:-38px;}
  .diagnostico-cabecalho{padding-right:14px; padding-left:17px;}
  .diagnostico-painel, .diagnostico-item.aberto .diagnostico-painel{padding-right:17px; padding-left:17px;}
}

/* ===== divisor entre seções (recorte/notch) ===== */
.divisor-notch{position:relative; isolation:isolate; height:clamp(64px,6.5vw,112px); overflow:hidden;}
.divisor-notch svg{position:relative; z-index:1; display:block; width:100%; height:100%;}
.divisor-notch .onda-camada{filter:drop-shadow(0 8px 8px rgb(0 0 0 / .25));}
/* O fundo claro deixa 3px de folga na borda que encosta na seção escura: com altura fracionada (clamp em vw) a emenda antialiasada vazava uma linha clara fina ali. */
.divisor-notch-desce{margin-bottom:-1px; background:linear-gradient(var(--claro),var(--claro)) bottom / 100% calc(100% - 3px) no-repeat;}
.divisor-notch-desce .onda-camada{
  fill:var(--escuro);
  /* A camada preta projeta no branco a mesma sombra suave da onda inversa. */
  filter:drop-shadow(0 8px 9px rgb(0 0 0 / .5));
}
.divisor-notch-sobe{
  z-index:2; overflow:hidden; height:calc(clamp(64px,6.5vw,112px) + 34px); margin-top:calc(-1px - 34px);
  background:linear-gradient(var(--claro),var(--claro)) top / 100% calc(100% - 3px) no-repeat;
}
.divisor-notch-sobe svg{
  /* Mantém o morro no mesmo lugar de sempre; os 34px extra do padding-top
     acima só dão folga pra sombra borrar pra cima sem ser cortada pela
     caixa (o pico do morro fica bem colado no topo original). */
  position:absolute; left:0; bottom:0; height:clamp(64px,6.5vw,112px);
}
.divisor-notch-sobe .onda-camada{
  fill:var(--escuro);
  /* Estrutura (offset) descida mais 2px (de -4px pra -2px). Desfoque e opacidade sem mudança. */
  filter:drop-shadow(0 -2px 8px rgb(0 0 0 / .6));
}

/* ===== como eu resolvo ===== */
.como-resolvo{padding:82px 0 88px;}
.como-resolvo-cabecalho h2{max-width:820px;}
.metodo-pilha{list-style:none; margin:46px 0 0; padding:0;}
.metodo-carta{
  position:relative; z-index:1; display:flex; align-items:center; gap:18px; cursor:pointer;
  margin-top:-22px; border:1px solid rgb(250 174 6 / .22); border-radius:24px; background:#fff;
  padding:28px 24px; box-shadow:0 16px 30px -20px rgb(13 13 13 / .35);
  transform:rotate(var(--rot)) translateX(var(--tx)); transition:transform 360ms cubic-bezier(.34,1.56,.64,1), box-shadow 360ms ease, border-color 360ms ease;
}
.metodo-carta:first-child{margin-top:0;}
.metodo-carta:nth-child(1){z-index:4;}
.metodo-carta:nth-child(2){z-index:3;}
.metodo-carta:nth-child(3){z-index:2;}
.metodo-carta:nth-child(4){z-index:1;}
.metodo-carta.ativo{z-index:5; border-color:rgb(250 174 6 / .55); transform:rotate(0deg) translateX(0) translateY(-6px); box-shadow:0 18px 34px -18px rgb(250 174 6 / .3), 0 4px 14px -6px rgb(13 13 13 / .18);}
.metodo-carta-num{flex:0 0 auto; min-width:48px; color:rgb(250 174 6 / .55); font-family:var(--fbn); font-size:64px; font-weight:400; letter-spacing:.01em; line-height:.92;}
.metodo-carta:first-child .metodo-carta-num{letter-spacing:-.08em;}
.metodo-carta-icone{flex:0 0 auto; display:grid; width:56px; height:56px; place-items:center; border:1px solid rgb(250 174 6 / .3); border-radius:50%; background:rgb(250 174 6 / .15); color:var(--acento);}
.metodo-carta-icone svg{width:24px; height:24px;}
.metodo-carta-corpo{flex:1; min-width:0;}
.metodo-carta h3{margin:0; font-size:21px; font-weight:600; letter-spacing:-.03em;}
.metodo-carta p{max-width:none; margin:2px 0 0; color:var(--suave); font-size:13.5px; font-weight:300; line-height:1.13; text-wrap:balance;}
.metodo-carta p em{font-style:italic; font-weight:600; color:var(--escuro);}
@media (hover:hover) and (pointer:fine){
  .metodo-carta:hover{z-index:5; transform:rotate(0deg) translateX(0) translateY(-8px) scale(1.02); box-shadow:0 22px 40px -16px rgb(13 13 13 / .3);}
}

/* ===== case ===== */
.case{padding:76px 0;}
.case-conjunto{position:relative; max-width:980px; margin:0 auto; overflow:hidden; border:1px solid rgb(245 245 242 / .2); border-radius:24px; background:var(--escuro); box-shadow:0 25px 50px -18px rgb(0 0 0 / .6);}
.case-projetos{position:relative; padding:18px 18px 0;}
.case-painel{position:relative; z-index:1; margin:0 -1px -1px; border-radius:16px 16px 22px 22px; padding:20px; background:var(--claro); color:var(--escuro);}
.case-cabecalho-bloco{position:relative; max-width:980px; margin:-28px auto calc(var(--e6) + 28px);}
.visualmente-oculto{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.case-controles{display:flex; width:min(100%,330px); align-items:center; justify-content:space-between; margin:14px auto 28px;}
.case-indicadores{display:flex; align-items:center; gap:10px;}
.case-indicadores span{display:block; width:48px; height:4px; border-radius:99px; background:rgb(245 245 242 / .22);}
.case-indicadores .ativo{background:var(--acento);}
.case-navegacao{display:flex; align-items:center; gap:10px; font-family:var(--fm); font-size:10px; letter-spacing:.08em;}
.case-navegacao button{
  display:grid; width:38px; height:38px; place-items:center; border-radius:50%; color:var(--claro);
  background:rgb(245 245 242 / .07); border:1px solid rgb(245 245 242 / .16);
  transition:border-color 180ms ease, color 180ms ease, background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.case-navegacao button:hover:not(:disabled), .case-navegacao button:focus-visible:not(:disabled){background:rgb(245 245 242 / .14); border-color:rgb(245 245 242 / .3); transform:translateY(-1px);}
.case-navegacao button:active:not(:disabled){transform:translateY(0);}
.case-navegacao button:last-child{
  background:var(--acento); border-color:var(--acento); color:var(--escuro);
  box-shadow:0 6px 16px -6px rgb(250 174 6 / .55);
}
.case-navegacao button:last-child:hover:not(:disabled), .case-navegacao button:last-child:focus-visible:not(:disabled){
  background:var(--acento); border-color:var(--acento); filter:brightness(1.08); transform:translateY(-1px);
}
.case-navegacao button:disabled{opacity:.28; box-shadow:none; cursor:default; transform:none;}
.case-navegacao svg{width:17px; height:17px;}
.case-carousel-viewport{position:relative; display:flex; justify-content:center; height:360px; margin:0; transform:translateX(13px); perspective:900px;}
.case-card{position:absolute; top:0; width:min(69vw,258px); height:100%; overflow:hidden; border:1px solid rgb(245 245 242 / .24); border-radius:22px; background:#151515; color:var(--claro); box-shadow:0 20px 38px rgb(0 0 0 / .42); transition:transform 500ms cubic-bezier(.22,1,.36,1), opacity 380ms ease, filter 380ms ease;}
.case-card--active{z-index:2; transform:translateZ(0);}
.case-card--previous, .case-card--next{display:block; z-index:1; opacity:.42; filter:brightness(.55) saturate(.65); box-shadow:none;}
.case-card--previous{transform:translateX(-181px) scale(.88) rotateY(13deg) rotateZ(-2deg); transform-origin:right center;}
.case-card--next{transform:translateX(181px) scale(.88) rotateY(-13deg) rotateZ(2deg); transform-origin:left center;}
.case-carousel-viewport.trocando .case-card--active{animation:case-card-ativo-entra 500ms cubic-bezier(.22,1,.36,1) both;}
.case-carousel-viewport.trocando .case-card--previous{animation:case-card-anterior-entra 500ms cubic-bezier(.22,1,.36,1) both;}
.case-carousel-viewport.trocando .case-card--next{animation:case-card-proximo-entra 500ms cubic-bezier(.22,1,.36,1) both;}
@keyframes case-card-ativo-entra{from{opacity:0; transform:translateY(14px) scale(.92);}to{opacity:1; transform:translateZ(0);}}
@keyframes case-card-anterior-entra{from{opacity:0; transform:translateX(-138px) scale(.8) rotateY(13deg) rotateZ(-2deg);}to{opacity:.42; transform:translateX(-181px) scale(.88) rotateY(13deg) rotateZ(-2deg);}}
@keyframes case-card-proximo-entra{from{opacity:0; transform:translateX(138px) scale(.8) rotateY(-13deg) rotateZ(2deg);}to{opacity:.42; transform:translateX(181px) scale(.88) rotateY(-13deg) rotateZ(2deg);}}
.case-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.case-card::after{position:absolute; inset:0; content:''; background:linear-gradient(to bottom, rgb(0 0 0 / .08) 0%, rgb(0 0 0 / .3) 35%, rgb(0 0 0 / .96) 100%);}
.case-card-conteudo{position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; height:100%; padding:20px 18px;}
.case-card-numero{align-self:flex-end; display:grid; width:40px; height:40px; place-items:center; border-radius:11px; background:rgb(245 245 242 / .9); color:var(--escuro); font-size:17px; font-weight:500; letter-spacing:-.04em; line-height:1;}
.case-card-titulo{max-width:190px; margin:auto 0 0; font-size:31px; font-weight:500; letter-spacing:-.065em; line-height:.98;}
.case-card-subtitulo{max-width:190px; margin:4px 0 0; color:rgb(245 245 242 / .9); font-size:11px; font-weight:400; letter-spacing:.13em; line-height:1.45; text-transform:uppercase;}
.case-card-seta{display:none;}
.case-detalhes{animation:case-detalhe-entra 420ms cubic-bezier(.22,1,.36,1);}
@keyframes case-detalhe-entra{from{opacity:0; transform:translateY(8px);}to{opacity:1; transform:translateY(0);}}
.case-impactos{display:grid; grid-template-columns:minmax(0,1fr); gap:14px; margin:0;}
.case-impactos article{display:grid; grid-template-columns:54px 1fr; gap:16px; align-items:center; border:1px solid rgb(13 13 13 / .06); border-radius:18px; background:#fff; padding:16px 18px 16px 22px; box-shadow:0 16px 28px -14px rgb(13 13 13 / .22), 0 4px 10px -6px rgb(13 13 13 / .12);}
.case-impactos article > span{display:grid; width:54px; height:54px; place-items:center; border-radius:15px; background:var(--painel); color:var(--claro); flex-shrink:0; overflow:hidden;}
.case-impactos article > span svg{width:26px; height:26px;}
.case-impactos article > span img{display:block; width:100%; height:100%; object-fit:cover;}
.case-impactos strong{display:block; font-size:19px; font-weight:600; letter-spacing:-.03em; line-height:1.15;}
.case-impactos p{margin:0px 0 0; color:rgb(13 13 13 / .58); font-size:13px; font-weight:300; line-height:1.35;}
.case-demo-abrir{display:grid; grid-template-columns:28px 1fr 28px; width:100%; align-items:center; min-height:62px; margin-top:22px; border-radius:999px; padding:0 25px; background:var(--acento); color:var(--escuro); font-size:14.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; transition:filter 180ms ease, transform 180ms ease;}
.case-demo-abrir svg{width:26px; height:26px;}
.case-demo-abrir .case-demo-play{justify-self:start;}
.case-demo-abrir .case-demo-seta{justify-self:end;}
.case-demo-abrir:hover, .case-demo-abrir:focus-visible{background:var(--acento); transform:translateY(-2px);}

.modal-demo[hidden]{display:none;}
.modal-demo{position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:16px;}
.modal-demo-fundo{position:absolute; inset:0; background:rgb(0 0 0 / .84); backdrop-filter:blur(10px);}
.modal-demo-janela{position:relative; z-index:1; width:min(100%,960px); max-height:min(760px,calc(100vh - 32px)); overflow:auto; scrollbar-width:none; border:1px solid rgb(245 245 242 / .25); border-radius:24px; background:#111; color:var(--claro); box-shadow:0 28px 80px rgb(0 0 0 / .55);}
.modal-demo-janela::-webkit-scrollbar{display:none;}
.modal-demo-cabecalho{display:flex; align-items:center; justify-content:space-between; gap:var(--e4); padding:22px 24px; border-bottom:1px solid rgb(245 245 242 / .12);}
.modal-demo-cabecalho span{display:block; margin-top:6px; color:var(--acento); font-family:var(--fm); font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; transform:translateY(3px);}
.modal-demo-cabecalho h2{margin:-4px 0 0; font-size:30px; font-weight:600; letter-spacing:-.04em;}
.modal-demo-cabecalho button{display:grid; width:42px; height:42px; flex:0 0 42px; place-items:center; border:1px solid rgb(245 245 242 / .35); border-radius:50%; transition:border-color 180ms ease, background-color 180ms ease;}
.modal-demo-cabecalho button:hover, .modal-demo-cabecalho button:focus-visible{border-color:var(--acento); background:rgb(250 174 6 / .1);}
.modal-demo-cabecalho svg{width:19px; height:19px;}
.modal-demo-abas{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:18px 24px; padding:5px; border:1px solid rgb(245 245 242 / .13); border-radius:14px;}
.modal-demo-abas button{min-height:40px; border-radius:10px; color:rgb(245 245 242 / .58); font-size:13px; font-weight:500;}
.modal-demo-abas button.ativo{background:rgb(245 245 242 / .1); color:var(--acento);}
.modal-demo-superficie{display:grid; grid-template-columns:120px 1fr; min-height:320px; margin:0 24px 24px; overflow:hidden; border:1px solid rgb(245 245 242 / .16); border-radius:16px; background:#090909;}
.demo-mini-menu{display:flex; flex-direction:column; gap:13px; padding:20px 15px; border-right:1px solid rgb(245 245 242 / .1); color:rgb(245 245 242 / .55); font-size:11px;}
.demo-mini-menu strong{margin-bottom:10px; color:var(--claro); font-size:13px; line-height:1.2;}
.demo-mini-conteudo{display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:260px; padding:28px; text-align:center; background:radial-gradient(circle at center, rgb(250 174 6 / .09), transparent 54%);}
.demo-mini-conteudo span{color:var(--acento); font-family:var(--fm); font-size:10px; letter-spacing:.1em; text-transform:uppercase;}
.demo-mini-conteudo strong{margin-top:10px; font-size:clamp(20px,4vw,32px); font-weight:500; letter-spacing:-.045em;}
.demo-mini-conteudo p{max-width:340px; margin:9px 0 0; color:var(--suave); font-size:13px; line-height:1.55;}
.modal-demo-notas{display:flex; justify-content:space-between; gap:12px; padding:16px 24px 22px; color:rgb(245 245 242 / .56); font-size:11px; font-weight:300; letter-spacing:.03em;}

/* Demo funcional da Pizzaria Oliveira: pequena o suficiente para explorar,
   conectada o bastante para provar o fluxo PDV -> painel. */
.demo-app{grid-template-columns:104px minmax(0,1fr); min-height:430px; color:var(--claro); background:#0b0b0b; font-family:var(--fp);}
.demo-app-menu{display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:16px 10px; border-right:1px solid rgb(245 245 242 / .1); background:#101010;}
.demo-app-marca{margin:0 0 14px 4px; color:var(--claro); font-size:13px; font-weight:600; line-height:1.05; letter-spacing:.01em;}
.demo-app-menu button{margin-left:-2px; padding:8px 7px; border-radius:8px; color:rgb(245 245 242 / .54); font-family:var(--fp); font-size:9px; font-weight:500; letter-spacing:.035em; line-height:1.2; text-align:left; transition:background-color 180ms ease, color 180ms ease;}
.demo-app-menu button.ativo{background:rgb(250 174 6 / .14); color:var(--acento);}
.demo-app-conteudo{min-width:0; padding:18px; font-family:var(--fp);}
.demo-app-topo{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px;}
.demo-app-topo h3{margin:0; font-size:20px; font-weight:400; letter-spacing:-.035em; line-height:1;}
.demo-chip{display:inline-flex; align-items:center; min-height:26px; border:1px solid rgb(245 245 242 / .14); border-radius:999px; padding:0 10px; color:rgb(245 245 242 / .68); font-family:var(--fp); font-size:9px; font-weight:200; letter-spacing:.075em; line-height:1.15; white-space:nowrap;}
.demo-produtos{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;}
.demo-produto{display:flex; min-height:77px; flex-direction:column; justify-content:space-between; gap:10px; border:1px solid rgb(245 245 242 / .12); border-radius:12px; padding:11px; background:rgb(245 245 242 / .04); color:var(--claro); text-align:left; transition:border-color 180ms ease, background-color 180ms ease, transform 180ms ease;}
.demo-produto:hover{border-color:rgb(250 174 6 / .65); background:rgb(250 174 6 / .09); transform:translateY(-1px);}
.demo-produto strong{display:block; font-size:12px; font-weight:500; letter-spacing:.01em;}
.demo-produto span{display:block; margin-top:2px; color:var(--acento); font-family:var(--fp); font-size:10px; font-weight:300; letter-spacing:.04em;}
.demo-quantidade{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.demo-quantidade button{display:grid; width:23px; height:23px; place-items:center; border:1px solid rgb(245 245 242 / .22); border-radius:50%; color:var(--claro); font-size:15px; font-weight:300; line-height:1;}
.demo-quantidade b{min-width:16px; color:var(--claro); font-size:14px; font-weight:400; letter-spacing:.02em; text-align:center;}
.demo-carrinho{margin-top:14px; border:1px solid rgb(245 245 242 / .13); border-radius:14px; padding:12px; background:rgb(245 245 242 / .035);}
.demo-carrinho-cabecalho, .demo-linha{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.demo-carrinho-cabecalho strong{font-size:12px; font-weight:500; letter-spacing:.01em;}.demo-carrinho-cabecalho span{color:rgb(245 245 242 / .55); font-size:10px; font-weight:300; letter-spacing:.03em;}
.demo-linha{margin-top:8px; color:rgb(245 245 242 / .76); font-size:10px;}.demo-linha button{width:18px; height:18px; border:1px solid rgb(245 245 242 / .2); border-radius:50%; color:var(--claro); font-size:12px; line-height:1;}
.demo-vazio{margin:11px 0 0; color:rgb(245 245 242 / .48); font-size:10px; font-weight:300; letter-spacing:.025em;}
.demo-pagamentos{display:flex; gap:7px; margin-top:12px;}.demo-pagamentos button{flex:1; min-height:31px; border:1px solid rgb(245 245 242 / .14); border-radius:8px; color:rgb(245 245 242 / .64); font-size:10px;}.demo-pagamentos button.ativo{border-color:var(--acento); background:rgb(250 174 6 / .13); color:var(--acento);}
.demo-finalizar{width:100%; min-height:37px; margin-top:10px; border-radius:9px; background:var(--acento); color:var(--escuro); font-size:11px; font-weight:600; letter-spacing:.035em;}.demo-finalizar:disabled{opacity:.45; cursor:not-allowed;}
.demo-aviso{margin:9px 0 0; color:rgb(250 174 6 / .9); font-size:10px; line-height:1.35;}
.demo-grafico .demo-aviso{margin-top:-1px;}
.demo-lista{display:grid; gap:8px;}.demo-pedido, .demo-estoque-linha{display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid rgb(245 245 242 / .11); border-radius:11px; padding:11px; background:rgb(245 245 242 / .035);}.demo-pedido strong, .demo-estoque-linha strong{display:block; font-size:11px; font-weight:500; letter-spacing:.01em;}.demo-pedido small, .demo-estoque-linha small{display:block; margin-top:3px; color:rgb(245 245 242 / .48); font-size:9px; letter-spacing:.02em;}.demo-status{color:var(--acento); font-family:var(--fp); font-size:8px; font-weight:400; letter-spacing:.07em; text-transform:uppercase;}
.demo-metricas{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;}.demo-metrica{border:1px solid rgb(245 245 242 / .12); border-radius:12px; padding:12px; background:rgb(245 245 242 / .035);}.demo-metrica span{display:block; color:rgb(245 245 242 / .5); font-size:9px; font-weight:300; letter-spacing:.035em;}.demo-metrica strong{display:block; margin-top:5px; color:var(--acento); font-family:var(--fp); font-size:21px; font-weight:400; letter-spacing:-.05em;}.demo-grafico{margin-top:12px; border:1px solid rgb(245 245 242 / .1); border-radius:12px; padding:12px;}.demo-grafico strong{font-size:11px; font-weight:500; letter-spacing:.01em;}.demo-barra-linha{display:grid; grid-template-columns:68px 1fr 44px; gap:8px; align-items:center; margin-top:10px; color:rgb(245 245 242 / .6); font-size:9px; font-weight:300; letter-spacing:.025em;}.demo-barra-linha b{font-weight:400; text-align:right;}.demo-barra{height:6px; overflow:hidden; border-radius:99px; background:rgb(245 245 242 / .1);}.demo-barra i{display:block; height:100%; border-radius:inherit; background:var(--acento);}
.demo-estoque-quantidade{display:flex; align-items:center; gap:5px; color:rgb(245 245 242 / .46); font-family:var(--fp); font-size:8px; font-weight:300; letter-spacing:.055em; text-transform:uppercase;}.demo-estoque-editar input{width:52px; height:28px; border:1px solid rgb(245 245 242 / .16); border-radius:8px; padding:0 7px; appearance:textfield; -moz-appearance:textfield; background:rgb(245 245 242 / .055); color:var(--claro); font-family:var(--fp); font-size:9px; font-weight:400; letter-spacing:.04em; outline:0; transition:border-color 180ms ease, background-color 180ms ease;}.demo-estoque-editar input:focus{border-color:rgb(250 174 6 / .7); background:rgb(250 174 6 / .08);}.demo-estoque-editar input::-webkit-outer-spin-button, .demo-estoque-editar input::-webkit-inner-spin-button{margin:0; appearance:none; -webkit-appearance:none;}.demo-unidade-seletor{display:flex; align-items:center; height:28px; overflow:hidden; border:1px solid rgb(245 245 242 / .16); border-radius:8px; background:rgb(245 245 242 / .055);}.demo-unidade-seletor button{width:25px; height:100%; color:rgb(245 245 242 / .55); font-family:var(--fp); font-size:9px; font-weight:400; letter-spacing:.03em; transition:background-color 180ms ease, color 180ms ease;}.demo-unidade-seletor button.ativo{background:rgb(250 174 6 / .16); color:var(--acento);}.demo-unidade-seletor span{width:1px; height:14px; background:rgb(245 245 242 / .16);}.demo-baixo{color:#ffcf59 !important;}.demo-periodos{display:flex; gap:7px;}.demo-periodos button{min-height:29px; border:1px solid rgb(245 245 242 / .14); border-radius:999px; padding:6px 11px; color:rgb(245 245 242 / .58); font-size:10px; font-weight:400; letter-spacing:.025em;}.demo-periodos button.ativo{border-color:var(--acento); color:var(--acento);}
.demo-estoque-editar{display:grid; flex-shrink:0; grid-template-areas:"unidades unidades unidades" "peso peso seletor"; grid-template-columns:auto auto auto; justify-content:end; column-gap:6px; row-gap:3px;}.demo-estoque-unidades{grid-area:unidades; justify-self:end;}.demo-estoque-peso{grid-area:peso;}.demo-estoque-editar .demo-unidade-seletor{grid-area:seletor;}.demo-estoque-unidades, .demo-estoque-peso{display:flex; align-items:center; gap:5px; color:rgb(245 245 242 / .46); font-family:var(--fp); font-size:8px; font-weight:300; letter-spacing:.055em; text-transform:uppercase;}.demo-estoque-unidades i{color:rgb(245 245 242 / .42); font-size:8px; font-style:normal; letter-spacing:.04em;}
.modal-celular{position:relative; z-index:1; display:flex; width:min(100%,420px); max-height:calc(100vh - 32px); flex-direction:column; align-items:center; gap:14px;}
.modal-celular-cabecalho{display:flex; width:100%; align-items:center; justify-content:flex-end; gap:var(--e4); padding:0 4px;}
.modal-celular-cabecalho span{color:var(--acento); font-family:var(--fm); font-size:10px; letter-spacing:.1em; text-transform:uppercase;}
.modal-celular-cabecalho h2{margin:4px 0 0; color:var(--claro); font-size:22px; font-weight:500; letter-spacing:-.04em;}
.modal-celular-cabecalho button{display:grid; width:42px; height:42px; flex:0 0 42px; place-items:center; border:1px solid rgb(245 245 242 / .35); border-radius:50%; color:var(--claro); transition:border-color 180ms ease, background-color 180ms ease;}
.modal-celular-cabecalho button:hover, .modal-celular-cabecalho button:focus-visible{border-color:var(--acento); background:rgb(250 174 6 / .1);}
.modal-celular-cabecalho svg{width:19px; height:19px;}
.celular-moldura{width:min(100%,390px); height:min(calc(100vh - 120px),780px); overflow:hidden; border-radius:22px; box-shadow:0 28px 80px rgb(0 0 0 / .55);}
.celular-moldura iframe{display:block; width:100%; height:100%; border:0; background:#0a0a0a;}

@media (min-width:681px){
  .case{padding:110px 0;}
  .case-projetos{padding:26px;}
  .case-carousel-viewport{height:300px; margin:26px 0 32px;}
  .case-card{width:410px;}
  .case-card--previous, .case-card--next{display:block; z-index:1; opacity:.45; box-shadow:none;}
  .case-card--previous{transform:translateX(-245px) scale(.89) rotateY(13deg) rotateZ(-2deg); transform-origin:right center;}
  .case-card--next{transform:translateX(245px) scale(.89) rotateY(-13deg) rotateZ(2deg); transform-origin:left center;}
  .modal-demo-superficie{min-height:400px;}
}

@media (min-width:981px){
  .case-projetos{padding:28px;}
  .case-carousel-viewport{height:340px;}
  .case-card{width:440px;}
  .case-card--previous{transform:translateX(-290px) scale(.9) rotateY(14deg) rotateZ(-2deg);}
  .case-card--next{transform:translateX(290px) scale(.9) rotateY(-14deg) rotateZ(2deg);}
  .case-card-conteudo{padding:24px;}
  .case-card-titulo{font-size:27px;}
  .case-impactos p{font-size:13px;}
}

@media (max-width:480px){
  .case-projetos{border-radius:20px; padding:15px;}
  .case-navegacao{gap:6px; font-size:9px;}
  .case-navegacao button{width:34px; height:34px;}
  .modal-demo-cabecalho, .modal-demo-notas{padding-right:16px; padding-left:16px;}
  .modal-demo-abas{margin-right:16px; margin-left:16px;}
  .modal-demo-superficie{grid-template-columns:88px 1fr; margin-right:16px; margin-left:16px;}
  .demo-mini-menu{padding:16px 10px; font-size:9px;}
  .demo-mini-conteudo{padding:16px;}
}

/* ===== sobre ===== */
.sobre{padding:88px 0;}
.sobre-grade{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--e6); align-items:start;}
.sobre-retrato-wrapper{position:relative; aspect-ratio:.7; min-height:510px; margin:48px 0 0; overflow:visible; transform:translateY(-14px);}
.sobre-figura{position:absolute; inset:82px 0 0; margin:0; overflow:hidden; border-radius:26px; background:var(--claro); box-shadow:0 30px 60px -16px rgb(245 245 242 / .18); isolation:isolate;}
.sobre-figura .hero-person-texture{stroke:rgb(13 13 13 / .08); opacity:.65;}
.sobre-retrato-imagem{position:absolute; z-index:2; bottom:0; left:50%; width:102%; max-width:none; height:auto; transform:translateX(-50%); pointer-events:none;}
.sobre-copy h2{max-width:560px; margin-top:var(--e5);}
.sobre-copy p{max-width:520px; margin:var(--e5) 0 0; color:var(--suave); font-size:16px; line-height:1.75;}
.fatos-sobre{display:grid; grid-template-columns:minmax(0,1fr); gap:0; margin:var(--e5) 0 0; padding:0; border-top:1px solid var(--borda); list-style:none;}
.fatos-sobre li{display:flex; flex-direction:column; gap:var(--e3); border-bottom:1px solid var(--borda); padding:var(--e4) 0;}
.fatos-sobre span{font-family:var(--fm); font-size:11px; color:var(--suave);}
.fatos-sobre strong{max-width:none; font-size:15px; font-weight:500; letter-spacing:-.025em; line-height:1.45;}

/* Seção humana: mesma leveza tipográfica do título principal da hero. */
.sobre .cabecalho-secao-titulo, .sobre-copy h2, .fatos-sobre strong{font-weight:400;}

/* 04 — composição editorial compacta, calibrada para a tela de 480px. */
.sobre{padding:72px 0 68px;}
.sobre-editorial{position:relative; overflow:hidden;}
.sobre-editorial-rotulo{display:block; color:rgb(245 245 242 / .55); font-family:var(--fm); font-size:10px; letter-spacing:.14em; text-transform:uppercase;}
.sobre-editorial h2{max-width:440px; margin:18px 0 0; color:var(--claro); font-size:clamp(42px,11.5vw,56px); font-weight:400; letter-spacing:-.065em; line-height:.95;}
.sobre-editorial h2 em{display:block; font-style:italic; font-weight:400;}
.sobre-editorial-texto{max-width:420px; margin:5px 0 0; color:#fff; font-size:20px; font-weight:150; letter-spacing:.008em; line-height:1.1;}
.sobre-fluxo{position:relative; isolation:isolate; width:100%; height:468px; margin:28px auto 0;}
.sobre-fluxo-linhas{position:absolute; z-index:0; top:0; left:0; width:100%; height:380px; overflow:visible; pointer-events:none;}
.fluxo-trilha{fill:none; stroke:rgb(245 245 242 / .18); stroke-width:1; vector-effect:non-scaling-stroke;}
.fluxo-trilha-ativa{fill:none; stroke:rgb(250 174 6 / .72); stroke-width:1.35; stroke-linecap:round; stroke-dasharray:1 18; vector-effect:non-scaling-stroke; opacity:.65; animation:fluxo-trilha-viva 7s linear infinite;}
.fluxo-pulso{fill:var(--acento); filter:drop-shadow(0 0 5px rgb(250 174 6 / .65));}
.fluxo-pulso-horizontal{display:none;}
.fluxo-etapa{position:absolute; z-index:1; display:flex; width:132px; flex-direction:column; align-items:center; color:var(--claro); text-align:center;}
.fluxo-etapa-1{top:2px; left:50%; transform:translateX(-50%);}
.fluxo-etapa-2{top:144px; right:-13px;}
.fluxo-etapa-3{top:286px; left:50%; transform:translateX(-50%);}
.fluxo-etapa-4{top:144px; left:-13px;}
.fluxo-no{position:relative; display:grid; width:92px; height:92px; place-items:center; border:1px solid rgb(245 245 242 / .28); border-radius:50%; background:radial-gradient(circle at 35% 28%, rgb(245 245 242 / .08), rgb(13 13 13 / .74) 65%); box-shadow:inset 0 0 0 5px rgb(13 13 13 / .34), 0 12px 28px rgb(0 0 0 / .32);}
.fluxo-no::before{position:absolute; inset:-6px; border:1px solid rgb(245 245 242 / .10); border-radius:inherit; content:'';}
.fluxo-no span{position:absolute; top:14px; left:50%; color:var(--acento); font-family:var(--fp); font-size:13px; font-weight:500; letter-spacing:-.02em; transform:translateX(-50%);}
.fluxo-no svg{width:38px; height:38px; margin-top:16px;}
.fluxo-etapa strong{max-width:140px; margin-top:12px; color:var(--claro); font-size:18px; font-weight:400; letter-spacing:-.04em; line-height:1.04;}
.fluxo-etapa strong em{font-style:italic; font-weight:600;}
.fluxo-etapa-2 .fluxo-no{border-color:rgb(250 174 6 / .78); box-shadow:inset 0 0 0 5px rgb(13 13 13 / .34), 0 0 20px rgb(250 174 6 / .12), 0 12px 28px rgb(0 0 0 / .32);}
.fluxo-etapa-2 .fluxo-no::before{border-color:rgb(250 174 6 / .20);}
.fluxo-etapa-2 .fluxo-no svg{color:var(--acento);}
@keyframes fluxo-trilha-viva{to{stroke-dashoffset:-190;}}
.sobre-editorial.visivel .fluxo-etapa{animation:fluxo-etapa-entra 620ms cubic-bezier(.22,1,.36,1) both;}
.sobre-editorial.visivel .fluxo-etapa-1{animation-delay:80ms;}
.sobre-editorial.visivel .fluxo-etapa-2{animation-delay:180ms;}
.sobre-editorial.visivel .fluxo-etapa-3{animation-delay:280ms;}
.sobre-editorial.visivel .fluxo-etapa-4{animation-delay:380ms;}
@keyframes fluxo-etapa-entra{from{opacity:0; transform:translateY(12px) scale(.94);}to{opacity:1;}}
.sobre-editorial.visivel .fluxo-etapa-1,.sobre-editorial.visivel .fluxo-etapa-3{animation-name:fluxo-etapa-centro-entra;}
@keyframes fluxo-etapa-centro-entra{from{opacity:0; transform:translateX(-50%) translateY(12px) scale(.94);}to{opacity:1; transform:translateX(-50%);}}
@media (max-width:380px){.sobre-fluxo{height:430px;}.sobre-fluxo-linhas{height:344px;}.fluxo-etapa{width:112px;}.fluxo-no{width:80px; height:80px;}.fluxo-no span{top:11px; font-size:12px;}.fluxo-no svg{width:33px; height:33px; margin-top:15px;}.fluxo-etapa strong{max-width:118px; font-size:16px;}.fluxo-etapa-2,.fluxo-etapa-4{top:127px;}.fluxo-etapa-3{top:255px;}}
@media (prefers-reduced-motion:reduce){.fluxo-trilha-ativa{animation:none;}.fluxo-pulso{display:none;}.sobre-editorial.visivel .fluxo-etapa,.sobre-editorial.visivel .fluxo-etapa-1,.sobre-editorial.visivel .fluxo-etapa-3{animation:none;}}
.sobre-editorial-curva{aspect-ratio:480/112; margin:22px -24px 28px; pointer-events:none;}
.sobre-editorial-curva svg{display:block; width:100%; height:100%; overflow:visible;}
.sobre-editorial-curva path{fill:none; vector-effect:non-scaling-stroke;}

/* ----- rede de nós que reconecta (anima no lugar da curva antiga) ----- */
.rede-no{fill:var(--escuro); stroke:var(--borda); stroke-width:1px; vector-effect:non-scaling-stroke;}
.rede-quebrada{stroke:var(--borda); stroke-width:1px; animation:rede-quebra-some 7s ease infinite;}
.rede-nova{
  stroke:var(--acento); stroke-width:2.4px; stroke-linecap:round;
  filter:drop-shadow(0 0 5px rgb(250 174 6 / .65)); opacity:0;
  stroke-dasharray:440; stroke-dashoffset:440;
  animation:rede-nova-desenha 7s cubic-bezier(.65,0,.35,1) infinite;
}
.rede-pulso{
  animation:rede-pulso-anda 7s cubic-bezier(.6,0,.4,1) infinite;
  offset-path:path('M20,56 C120,56 120,56 190,56 C215,56 213,30 240,30 C267,30 265,56 290,56 C340,56 400,56 460,56');
}
.rede-pulso circle{fill:var(--acento); filter:drop-shadow(0 0 5px rgb(250 174 6 / .65));}
.rede-marca{
  stroke:var(--acento); stroke-width:2px; stroke-linecap:round; opacity:0;
  transform-origin:240px 30px; animation:rede-marca-pulsa 7s ease infinite;
}
.rede-frase{
  fill:var(--acento); font-family:var(--fm); font-size:11px; letter-spacing:.01em; opacity:0;
  animation:rede-frase-mostra 7s ease infinite;
}
@keyframes rede-pulso-anda{
  0%{offset-distance:0%; opacity:0;}
  5%{opacity:1;}
  52%{offset-distance:50%;}
  62%{offset-distance:50%;}
  100%{offset-distance:50%; opacity:1;}
}
@keyframes rede-quebra-some{0%,64%{opacity:1;} 76%,100%{opacity:0;}}
@keyframes rede-nova-desenha{0%,66%{opacity:0; stroke-dashoffset:440;} 68%,100%{opacity:1;} 84%,100%{stroke-dashoffset:0;}}
@keyframes rede-marca-pulsa{
  0%,50%{opacity:0; transform:scale(.6);}
  56%{opacity:1; transform:scale(1.4);}
  64%,100%{opacity:0; transform:scale(1.8);}
}
@keyframes rede-frase-mostra{
  0%,54%{opacity:0;}
  60%,70%{opacity:1;}
  76%,100%{opacity:0;}
}
@media (prefers-reduced-motion:reduce){
  .rede-quebrada{display:none;}
  .rede-nova{animation:none; opacity:1; stroke-dashoffset:0;}
  .rede-pulso, .rede-marca, .rede-frase{display:none;}
}
.sobre-editorial .fatos-sobre{display:grid; grid-template-columns:minmax(0,1fr); gap:0; margin:-26px 0 0; padding:0; border:0; border-top:1px solid var(--borda);}
.sobre-editorial .fatos-sobre li{display:grid; grid-template-columns:68px 1fr; align-items:center; column-gap:12px; min-height:0; border:0; border-bottom:1px solid var(--borda); padding:16px 0;}
.sobre-editorial .fatos-sobre span{color:#fff; font-family:var(--fp); font-size:46px; font-weight:400; letter-spacing:-.05em; line-height:1;}
.sobre-editorial .fatos-sobre strong{color:#fff; font-size:17px; font-weight:200; letter-spacing:.008em; line-height:1.35;}
.sobre-editorial .fatos-sobre strong br{display:none;}


/* ===== cta final ===== */
.cta-final{padding:20px 0 32px;}
.cta-final-interno{max-width:980px; margin:0 auto; text-align:center;}
.cta-final .cabecalho-secao{justify-content:center; text-align:left;}
.cta-final h2{font-size:clamp(38px,5.4vw,76px); margin:var(--e5) 0 0; line-height:1.08;}
.cta-final h2 strong{font-weight:800;}
.cta-final-linha{display:block;}
.cta-final-linha-negocio{white-space:nowrap;}
.cta-final h2 .grifo{
  position:relative; font-weight:500; white-space:nowrap;
}
.cta-final h2 .grifo::before{
  content:''; position:absolute; left:-.1em; right:-.1em; top:.08em; bottom:-.02em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath d='M6,34 C4,18 10,8 26,10 L268,3 C286,1 296,12 294,26 C296,42 288,54 270,52 L24,58 C8,59 4,48 6,34 Z' fill='%23FAAE06'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  mix-blend-mode:multiply;
  clip-path:inset(0 100% 0 0);
}
.cta-final-interno.visivel h2 .grifo::before{
  animation:grifo-pinta 620ms cubic-bezier(.65,0,.35,1) 550ms both;
}
@keyframes grifo-pinta{
  from{clip-path:inset(0 100% 0 0);}
  to{clip-path:inset(0 0 0 0);}
}
@media (prefers-reduced-motion:reduce){
  .cta-final h2 .grifo::before{clip-path:inset(0 0 0 0);}
  .cta-final-interno.visivel h2 .grifo::before{animation:none;}
}
.cta-final-sub{max-width:480px; margin:14px auto 0; color:var(--suave); font-size:17px; line-height:1.55;}
.cta-final-sub strong{color:var(--escuro); font-weight:600;}
.cta-final-sub strong em{font-style:italic;}
.cta-final-interno p.suave{max-width:420px; margin:18px auto 0; font-size:13px; line-height:1.37;}
.cta-final-interno p.suave strong{color:var(--escuro); font-weight:600;}
.cta-final-interno p.suave strong em{font-style:italic;}
.cta-final .pilula{margin-top:var(--e6); min-height:60px; padding:0 30px; font-size:15px; width:100%;}

/* ----- mockup de conversa ----- */
.cta-chat{
  max-width:420px; margin:34px auto 0; overflow:hidden; border-radius:26px; padding:22px 18px;
  background-color:#111; background-image:radial-gradient(rgb(255 255 255 / .05) 1px, transparent 1px);
  background-size:22px 22px; box-shadow:0 26px 50px -20px rgb(13 13 13 / .55);
}
.cta-chat-imagem{padding:0; background-image:none; box-shadow:0 34px 60px -18px rgb(13 13 13 / .5), 0 14px 26px -12px rgb(13 13 13 / .35);}
.cta-chat-imagem img{display:block; width:100%; height:auto;}
.cta-chat-linha{display:flex; align-items:flex-end; gap:10px;}
.cta-chat-linha + .cta-chat-linha{margin-top:14px;}
.cta-chat-enviada{justify-content:flex-end;}
.cta-chat-avatar{display:grid; flex:0 0 auto; width:34px; height:34px; place-items:center; border-radius:50%; background:rgb(245 245 242 / .12); color:rgb(245 245 242 / .7);}
.cta-chat-avatar svg{width:19px; height:19px;}
.cta-chat-balao{max-width:250px; border-radius:16px; padding:10px 14px; text-align:left;}
.cta-chat-recebida .cta-chat-balao{border-bottom-left-radius:4px; background:#242424; color:var(--claro);}
.cta-chat-enviada .cta-chat-balao{border-bottom-right-radius:4px; background:#0a5c4a; color:var(--claro);}
.cta-chat-balao p{margin:0; font-size:13.5px; line-height:1.45;}
.cta-chat-hora{display:flex; align-items:center; justify-content:flex-end; gap:4px; margin-top:5px; color:rgb(245 245 242 / .55); font-size:10.5px;}
.cta-chat-check{color:#53bdeb;}

/* ----- 3 passos ----- */
.cta-passos{display:flex; justify-content:center; gap:0; max-width:330px; margin:34px auto 0; padding:0; list-style:none;}
.cta-passos li{position:relative; display:flex; flex:1; flex-direction:column; align-items:center; gap:10px;}
.cta-passos li:not(:last-child)::after{content:''; position:absolute; top:29px; left:calc(50% + 39px); width:calc(100% - 78px); height:2px; background:rgb(13 13 13 / .18);}
.cta-passo-icone{display:grid; width:58px; height:58px; place-items:center; border-radius:50%; background:rgb(13 13 13 / .05); color:var(--escuro);}
.cta-passo-icone svg{width:30px; height:30px;}
.cta-passos strong{font-size:14px; font-weight:400; line-height:1.08;}
.cta-passos strong em{font-style:italic; font-weight:600;}

/* ===== rodape ===== */
.rodape{display:block; padding:28px 0 0; background:var(--claro); color:var(--claro); --suave:rgb(245 245 242 / .55); --borda:rgb(245 245 242 / .16);}
.rodape-principal{display:flex; width:100%; flex-direction:row; justify-content:space-between; align-items:center; gap:8px; border-radius:26px 26px 0 0; background:var(--escuro); padding:30px 16px; box-shadow:0 -22px 40px -22px rgb(13 13 13 / .4);}
.rodape-marca{display:flex; min-width:0; align-items:center; gap:10px;}
.rodape .marca-sigla{flex:0 0 auto; width:42px; height:42px; border-radius:0; background:transparent; overflow:hidden;}
.rodape .marca-sigla img{transform:scale(1.5); object-fit:contain; mix-blend-mode:lighten;}
.rodape-marca div{display:flex; min-width:0; flex-direction:column; gap:0;}
.rodape-marca strong{font-size:19px; font-weight:500; letter-spacing:-.02em; line-height:1.15;}
.rodape-cargo{margin-top:-1px; color:var(--suave); font-size:11px; font-weight:300; letter-spacing:.21em; line-height:1.2; text-transform:uppercase; transform:translateX(4px);}
.rodape-copy{display:flex; align-items:center; gap:6px; margin-top:8px; color:rgb(245 245 242 / .78); font-size:clamp(6px,calc((100vw - 252px) / 20.4),10.5px); font-weight:300; letter-spacing:.05em; line-height:1.35; white-space:nowrap;}
.rodape-copy::before{content:''; flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:var(--acento); transform:translateY(-1px); animation:rodape-brilho 1.8s ease-in-out infinite;}
@keyframes rodape-brilho{0%,100%{opacity:.35; box-shadow:0 0 0 0 rgb(250 174 6 / 0);} 50%{opacity:1; box-shadow:0 0 8px 2px rgb(250 174 6 / .75);}}
.rodape-links{display:flex; flex:0 0 auto; align-items:center; align-self:stretch; gap:8px; margin-right:8px; padding-left:12px; border-left:1px solid var(--borda);}
.rodape-social{
  display:grid; width:46px; height:46px; place-items:center; border:1px solid var(--borda);
  border-radius:50%; background:rgb(245 245 242 / .04); color:var(--claro); transition:background 180ms ease, color 180ms ease;
}
.rodape-social svg{width:22px; height:22px;}
@media (max-width:380px){.rodape-links{margin-right:4px;} .rodape-copy{font-size:clamp(5px,calc((100vw - 250px) / 20.4),10.5px);}}
a.rodape-social:hover, a.rodape-social:focus-visible{background:var(--acento); color:var(--escuro);}

/* ===== grain overlay ===== */
.noise-overlay{
  position:fixed; inset:0; width:100%; height:100%; height:100lvh;
  pointer-events:none; z-index:50;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0.33 0.33 0.33 0 0  0.33 0.33 0.33 0 0  0.33 0.33 0.33 0 0  0 0 0 0 1'/><feComponentTransfer><feFuncR type='linear' slope='1.8' intercept='-.4'/><feFuncG type='linear' slope='1.8' intercept='-.4'/><feFuncB type='linear' slope='1.8' intercept='-.4'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-repeat:repeat;
  opacity:.17;
  animation:grao .4s steps(1) infinite;
}

/* Cursor discreto para ponteiros precisos. Em touch e reduced motion o
   cursor nativo continua sendo usado normalmente. */
.cursor-personalizado{display:none;}
@media (hover:hover) and (pointer:fine){
  html.cursor-personalizado-ativo, html.cursor-personalizado-ativo *{cursor:none !important;}
  html.demo-rafael-aberta, html.demo-rafael-aberta *{cursor:auto !important;}
  html.demo-rafael-aberta .cursor-personalizado{opacity:0 !important;}
  .cursor-personalizado{
    position:fixed; z-index:200; top:0; left:0; display:grid; width:36px; height:36px;
    place-items:center; border:1.5px solid rgb(13 13 13 / .65); border-radius:50%; opacity:0;
    pointer-events:none; transform:translate3d(-50%,-50%,0); transition:opacity 160ms ease, width 180ms ease, height 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
  }
  .cursor-personalizado span{
    width:7px; height:7px; border-radius:50%; background:var(--escuro);
    transform:translate(var(--cursor-dot-x, 0px), var(--cursor-dot-y, 0px));
    transition:transform 65ms ease-out;
  }
  html.cursor-personalizado-ativo .cursor-personalizado.visivel{opacity:1;}
  html.cursor-personalizado-ativo .cursor-personalizado.sobre-link{width:46px; height:46px; background:rgb(250 174 6 / .14); border-color:rgb(13 13 13 / .78);}
  html.cursor-personalizado-ativo .cursor-personalizado.em-superficie-escura{border-color:rgb(245 245 242 / .9); box-shadow:0 0 14px rgb(255 255 255 / .28);}
  html.cursor-personalizado-ativo .cursor-personalizado.em-superficie-escura span{background:var(--claro); box-shadow:0 0 6px rgb(255 255 255 / .7);}
  html.cursor-personalizado-ativo .cursor-personalizado.em-superficie-escura.sobre-link{border-color:var(--claro); background:rgb(250 174 6 / .18);}
}
@keyframes grao{
  0%{background-position:0 0;} 10%{background-position:-14px 6px;} 20%{background-position:9px -11px;}
  30%{background-position:-7px 14px;} 40%{background-position:13px 4px;} 50%{background-position:-4px -13px;}
  60%{background-position:11px 10px;} 70%{background-position:-13px -5px;} 80%{background-position:5px -14px;}
  90%{background-position:-10px 9px;} 100%{background-position:0 0;}
}

/* ===== reveal ===== */
.pronto-js .revelar{opacity:0; transform:translateY(24px) scale(.992); will-change:opacity, transform; transition:opacity 820ms cubic-bezier(.22,1,.36,1), transform 820ms cubic-bezier(.22,1,.36,1);}
.revelar.visivel{opacity:1; transform:none;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .noise-overlay{animation:none;}
  .pronto-js .revelar{opacity:1; transform:none; transition:none;}
  .hero-person-texture, .hero-person-reveal, .hero-person-image, .hero-person-arrow, .hero-person-arrow svg, .pilula, .pilula svg, .pilula::before, .pilula::after{transition:none;}
  .cursor-personalizado{display:none !important;}
  .faixa-marquee-trilha{animation:none; transform:none;}
  .diagnostico-painel, .diagnostico-mais svg, .diagnostico-cabecalho, .diagnostico-item, .indice, .diagnostico-frase{transition:none;}
  .cabecalho-secao-regua span{animation:none; left:0;}
  .rodape-principal{animation:none;}
  .rodape-copy::before{animation:none;}
}

/* ===================================================================
   TABLET PEQUENO — 681px+ (equivalente ao antigo "max-width:680")
   =================================================================== */
/* desligado (decisão temporária): trava o site no layout mobile mesmo em
   tela larga. "min-width:99999px" nunca é verdadeiro em nenhum aparelho
   real -- é
   assim que o bloco fica sempre desligado, mobile e desktop. Pra
   reativar o desktop, tirar o "and (min-width:99999px)" das 3 media
   queries deste arquivo (681px/981px/1121px) e remover o .tela do
   index.html. */
@media (min-width:681px){
  .tela{max-width:none; overflow:visible;}
  .envolucro{width:min(100% - 44px, 980px);}

  .cabecalho{padding-top:22px;}
  .cabecalho .cabecalho-interno{width:fit-content; min-height:56px; padding:6px 7px 6px 8px;}
  .marca-sigla{width:42px; height:42px;}
  .nav-principal{top:calc(100% + 8px); right:0; left:0;}
  .header-cta{min-height:42px; padding:0 18px; font-size:10px;}
  .header-cta svg{width:17px; height:17px;}

  .hero{padding:144px 0 72px;}
  .hero-titulo{font-size:clamp(50px,5.2vw,64px); line-height:1;}
  .hero-baixo{gap:var(--e6); margin-top:var(--e6);}
  .hero-acoes{flex-direction:row; align-items:center; gap:18px;}
  .hero-acoes .pilula, .hero-acoes .hero-cta-secundario{width:auto; min-width:240px;}
  .hero-person-wrapper{min-height:420px; margin-top:0; aspect-ratio:.82; max-width:540px; justify-self:end; width:100%;}
  .hero-person-card, .hero-person-fade{border-radius:44px;}
  .hero-person-info{bottom:32px; left:32px; gap:15px;}
  .hero-person-info strong{font-size:clamp(44px,4.2vw,58px);}
  .hero-person-info > span{font-size:11px;}
  .hero-person-arrow{top:24px; right:24px; width:44px; height:44px;}

  .secao-titulo{font-size:clamp(36px,4.6vw,64px); line-height:1.04;}

  .lista-diagnostico li{grid-template-columns:44px 1fr 24px; gap:var(--e4); min-height:104px;}
  .lista-diagnostico p{font-size:clamp(18px,1.9vw,25px);}

  .como-resolvo{padding:110px 0 118px;}
  .metodo-pilha{max-width:640px; margin:var(--e7) auto 0;}

  .case{padding:120px 0;}
  .case-cabecalho{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:var(--e6);}
  .case-cabecalho-texto{margin:0 0 6px;}
  .case-demo-corpo{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:end;}
  .case-historia{grid-template-columns:repeat(3,1fr); gap:var(--e6); margin-top:var(--e7);}

  .sobre{padding:120px 0;}
  .sobre-retrato-wrapper{min-height:620px; margin-top:56px;}
  .fatos-sobre{grid-template-columns:repeat(3,1fr); gap:var(--e5); margin-top:var(--e7); padding-top:var(--e5);}
  .fatos-sobre li{border-bottom:0; padding:0;}
  .fatos-sobre strong{max-width:210px;}

  .cta-final{padding:50px 0 130px;}
  .cta-final .pilula{width:auto;}

  .rodape-principal{flex-direction:row; justify-content:center; align-items:center; gap:28px; border-radius:22px 22px 0 0; padding:var(--e4) var(--e5);}
  .rodape-links{align-self:center; margin-right:0;}

}

/* ===================================================================
   TABLET GRANDE — 981px+ (equivalente ao antigo "max-width:980")
   =================================================================== */
@media (min-width:981px){
  .cabecalho{padding-top:28px;}
  .cabecalho .cabecalho-interno{width:min(100%,1040px); min-height:0; padding:0; gap:10px; border-radius:0; background:transparent; box-shadow:none;}
  .marca{min-height:54px; padding:5px 15px 5px 7px; border-radius:999px; background:var(--escuro); box-shadow:0 2px 4px rgb(13 13 13 / .22), 0 9px 15px rgb(13 13 13 / .18);}
  .nav-principal{
    display:none; position:absolute; top:calc(100% + 8px); right:0; left:0;
    flex-direction:column; align-items:stretch; gap:0; overflow:hidden;
    border:1px solid rgb(245 245 242 / .18); border-radius:20px; background:var(--escuro); box-shadow:0 10px 22px rgb(13 13 13 / .12); margin-left:0;
  }
  .nav-principal.aberto{display:flex;}
  .nav-principal a{border-bottom:1px solid rgb(245 245 242 / .14); padding:var(--e5); font-size:inherit; font-weight:inherit; color:var(--claro);}
  .header-cta{display:none;}
  .marca > span:last-child{display:inline;}
  .menu-toggle{display:inline-flex; width:54px; height:54px; flex:0 0 54px; margin-left:auto; border-radius:50%; background:var(--escuro); box-shadow:0 2px 4px rgb(13 13 13 / .22), 0 9px 15px rgb(13 13 13 / .18);}
  .menu-toggle svg{width:20px; height:20px;}

  .hero-grade{grid-template-columns:minmax(0,1fr) minmax(390px,420px); gap:clamp(44px,4vw,56px); align-items:stretch;}
  .hero-conteudo{justify-content:center; padding:var(--e5) 0;}
  .hero-titulo{max-width:100%; font-size:clamp(52px,4.6vw,64px);}
  .hero-baixo{grid-template-columns:minmax(0,1fr); gap:var(--e6);}
  .hero-person-wrapper{min-height:0; aspect-ratio:.76; max-width:420px;}

  /* Seção 01 no desktop: leitura vertical, como as outras seções. O cabeçalho
     vem centralizado e a linha 01–04 passa pelo meio da composição, não fica
     mais perdida na lateral de uma grade em duas colunas. */
  .diagnostico-grade{grid-template-columns:minmax(0,1fr); gap:48px; max-width:720px; margin:0 auto;}
  .diagnostico-grade > div:first-child{display:flex; flex-direction:column; align-items:center; text-align:center;}
  .diagnostico-grade > div:first-child .cabecalho-secao{justify-content:center;}
  .diagnostico-grade > div:first-child .cabecalho-secao-regua{width:100%; max-width:720px;}
  #titulo-diagnostico{margin-top:var(--e5); font-size:clamp(36px,4.6vw,64px); line-height:1.04;}
  .diagnostico-grade .lista-diagnostico{width:min(100%,620px); margin:0 auto;}

  .metodo-pilha{max-width:760px; margin:70px auto 0;}
  .metodo-carta{padding:36px 32px; gap:24px;}
  .metodo-carta-num{font-size:76px;}
  .metodo-carta-icone{width:66px; height:66px;}
  .metodo-carta-icone svg{width:28px; height:28px;}
  .metodo-carta h3{font-size:25px;}
  .metodo-carta p{font-size:16px;}


  /* "Quem toca o projeto" no desktop segue a leitura do mobile: retrato,
     depois o título. O método vira uma régua compacta abaixo deles. */
  .sobre-grade{
    max-width:980px; margin:0 auto;
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"header" "foto" "editorial" "fluxo";
    row-gap:22px; align-items:start;
  }
  .sobre-cabecalho-bloco{grid-area:header;}
  .sobre-retrato-wrapper{grid-area:foto; width:min(100%,320px); min-height:450px; max-width:320px; justify-self:center; margin:0;}
  .sobre-editorial{grid-area:editorial; width:min(100%,600px); justify-self:center; overflow:visible; text-align:center;}
  .sobre-editorial h2{max-width:none; font-size:clamp(48px,3vw,56px);}
  .sobre-editorial h2 em{font-size:1em; white-space:nowrap;}
  .sobre-editorial-texto{max-width:none; margin-left:auto; margin-right:auto; font-size:19px;}
  .sobre-fluxo{grid-area:fluxo; width:min(100%,760px); height:184px; margin:12px auto 0; transform:none; align-self:start;}
  .sobre-fluxo-linhas{display:none;}
  /* O trilho nasce no centro do 01 e termina no centro do 04. */
  .sobre-fluxo::before{position:absolute; z-index:0; top:43px; right:12.5%; left:12.5%; height:1px; background:rgb(245 245 242 / .23); content:'';}
  .sobre-fluxo::after{position:absolute; z-index:0; top:43px; right:12.5%; left:12.5%; height:1px; background:repeating-linear-gradient(to right, rgb(250 174 6 / .82) 0 2px, transparent 2px 18px); content:''; animation:fluxo-linha-horizontal 7s linear infinite;}
  .sobre-fluxo .fluxo-pulso-horizontal{position:absolute; z-index:0; top:39px; left:calc(12.5% - 4px); display:block; width:8px; height:8px; border-radius:50%; background:var(--acento); box-shadow:0 0 9px rgb(250 174 6 / .8); animation:fluxo-pulso-horizontal 7s linear infinite;}
  .sobre-fluxo .fluxo-etapa{top:0; width:25%; transform:none;}
  .sobre-fluxo .fluxo-etapa-1{left:0;}
  .sobre-fluxo .fluxo-etapa-2{right:auto; left:25%;}
  .sobre-fluxo .fluxo-etapa-3{top:0; left:50%; transform:none;}
  .sobre-fluxo .fluxo-etapa-4{top:0; right:0; left:auto;}
  .sobre-fluxo .fluxo-no{width:72px; height:72px; background:var(--escuro); box-shadow:inset 0 0 0 4px rgb(13 13 13 / .34), 0 10px 22px rgb(0 0 0 / .25);}
  .sobre-fluxo .fluxo-no span{top:10px; font-size:11px;}
  .sobre-fluxo .fluxo-no svg{width:27px; height:27px; margin-top:12px;}
  .sobre-fluxo .fluxo-etapa strong{max-width:145px; margin-top:10px; font-size:15px; line-height:1.02;}
  @keyframes fluxo-linha-horizontal{to{background-position:-190px 0;}}
  @keyframes fluxo-pulso-horizontal{to{left:calc(87.5% - 4px);}}
}

/* Em monitores largos a hero ganha duas colunas com largura fixa: a copy
   termina antes do retrato, em vez de invadir o card quando as linhas longas
   do título ocupam mais espaço. */
@media (min-width:1440px){
  .envolucro.hero-grade{width:min(100% - 120px, 1200px); grid-template-columns:600px 520px; justify-content:space-between; gap:80px;}
  .hero-titulo{max-width:600px; font-size:clamp(58px,3.75vw,66px);}
  .hero-person-wrapper{width:520px; max-width:520px;}
}

/* A tela é propositalmente uma composição de até 480px. Estas regras
   impedem que o viewport de um monitor largo achate somente o Case 02. */
.tela .case-projetos{padding:15px 15px 0;}
.tela .case-carousel-viewport{height:360px; margin:0;}
.tela .case-card{width:258px; height:360px;}
.tela .case-card--active{z-index:2; transform:translateZ(0);}
.tela .case-card--previous, .tela .case-card--next{display:block; z-index:1; opacity:.42;}
.tela .case-card--previous{transform:translateX(-181px) scale(.88) rotateY(13deg) rotateZ(-2deg);}
.tela .case-card--next{transform:translateX(181px) scale(.88) rotateY(-13deg) rotateZ(2deg);}
.tela .case-card-conteudo{padding:20px 18px;}
.tela .case-card-titulo{max-width:190px; font-size:31px; line-height:.98;}
.tela .case-card-subtitulo{max-width:190px; font-size:11px;}
.tela .case-controles{position:relative; width:100%; justify-content:flex-end; margin:14px 0 28px;}
.tela .case-indicadores{position:absolute; left:50%; transform:translateX(calc(-50% - 5px));}
.tela .case-demo-abrir{display:grid; grid-template-columns:28px 1fr 28px; width:100%; min-height:62px; margin-top:22px; padding:0 25px;}
.case-demo-abrir[hidden], .tela .case-demo-abrir[hidden]{display:none;}

/* Deck em cascata: o case ativo lidera à esquerda e os próximos formam
   profundidade à direita, sem comprimir o card principal. */
.tela .case-carousel-viewport{justify-content:flex-start; height:360px; overflow:visible; perspective:1200px; transform-style:preserve-3d;}
.tela .case-card{top:0; left:16px; width:250px; height:328px; border-color:rgb(245 245 242 / .16); border-radius:22px; transform-origin:left center; transform-style:preserve-3d; backface-visibility:hidden;}
.tela .case-card--active{z-index:30; opacity:1; filter:none; transform:translate3d(0,12px,0) scale(1) rotateY(-25deg); box-shadow:25px 25px 50px rgb(0 0 0 / .85);}
.tela .case-card--previous{z-index:20; left:145px; opacity:.65; filter:brightness(.68) saturate(.74); transform:translate3d(70px,0,-45px) scale(.92) rotateY(-25deg); box-shadow:15px 15px 35px rgb(0 0 0 / .6);}
.tela .case-card--next{z-index:10; left:235px; opacity:.35; filter:brightness(.5) saturate(.62); transform:translate3d(130px,0,-85px) scale(.85) rotateY(-25deg); box-shadow:10px 10px 25px rgb(0 0 0 / .4);}
.tela .case-card--previous .case-card-conteudo, .tela .case-card--next .case-card-conteudo{padding:18px 15px;}
.tela .case-card--previous .case-card-titulo, .tela .case-card--next .case-card-titulo{max-width:118px; font-size:20px;}
.tela .case-card--previous .case-card-subtitulo, .tela .case-card--next .case-card-subtitulo{max-width:118px; margin-top:3px; font-size:8px; line-height:1.4;}
.tela .case-card--previous .case-card-numero, .tela .case-card--next .case-card-numero{width:34px; height:34px; border-radius:10px; font-size:14px;}
.tela .case-carousel-viewport.trocando .case-card--active, .tela .case-carousel-viewport.trocando .case-card--previous, .tela .case-carousel-viewport.trocando .case-card--next{animation:case-cascata-entra 480ms cubic-bezier(.22,1,.36,1) both;}
@keyframes case-cascata-entra{from{opacity:0;}to{opacity:var(--case-opacidade,1);}}
.tela .case-card--previous{--case-opacidade:.68;}
.tela .case-card--next{--case-opacidade:.4;}
.tela .case-carousel-viewport.trocando .case-card--active{animation:case-sobe-frente 520ms cubic-bezier(.22,1,.36,1) both;}
.tela .case-carousel-viewport.trocando .case-card--previous{animation:case-vai-meio 520ms cubic-bezier(.22,1,.36,1) both;}
.tela .case-carousel-viewport.trocando .case-card--next{animation:case-vai-fundo 520ms cubic-bezier(.22,1,.36,1) both;}
@keyframes case-sobe-frente{from{opacity:.65; transform:translate3d(70px,0,-45px) scale(.92) rotateY(-25deg);}to{opacity:1; transform:translate3d(0,12px,0) scale(1) rotateY(-25deg);}}
@keyframes case-vai-meio{from{opacity:.35; transform:translate3d(130px,0,-85px) scale(.85) rotateY(-25deg);}to{opacity:.65; transform:translate3d(70px,0,-45px) scale(.92) rotateY(-25deg);}}
@keyframes case-vai-fundo{from{opacity:1; transform:translate3d(0,12px,0) scale(1) rotateY(-25deg);}to{opacity:.35; transform:translate3d(130px,0,-85px) scale(.85) rotateY(-25deg);}}

/* Geometria horizontal do deck: cada camada possui um ponto próprio no
   stage, deixando 01, 02 e 03 sempre identificáveis ao mesmo tempo. */
.tela .case-carousel-viewport{height:322px; perspective:1200px; transform-style:preserve-3d;}
.tela .case-card{width:42%; height:auto; aspect-ratio:3 / 4; transform-style:preserve-3d; cursor:pointer;}
.tela .case-card--active{top:13px; left:calc(5% + 9px); z-index:30; opacity:1; filter:brightness(1); transform:translate3d(0,0,0) scale(1) rotateY(-4deg); box-shadow:20px 22px 42px rgb(0 0 0 / .7);}
.tela .case-card--previous{top:29px; left:calc(30% + 9px); z-index:20; opacity:.8; filter:brightness(.65) saturate(.78); transform:translate3d(0,0,-26px) scale(.95) rotateY(-6deg); box-shadow:13px 16px 30px rgb(0 0 0 / .55);}
.tela .case-card--next{top:45px; left:calc(50% + 9px); z-index:10; opacity:.6; filter:brightness(.4) saturate(.68); transform:translate3d(0,0,-52px) scale(.9) rotateY(-8deg); box-shadow:8px 11px 24px rgb(0 0 0 / .4);}
.tela .case-card--previous .case-card-titulo, .tela .case-card--next .case-card-titulo{max-width:118px; font-size:20px;}
.tela .case-card--previous .case-card-subtitulo, .tela .case-card--next .case-card-subtitulo{max-width:118px; font-size:8px;}
.tela .case-carousel-viewport.trocando .case-card--active{animation:deck-entra-frente 450ms cubic-bezier(.22,1,.36,1) both;}
.tela .case-carousel-viewport.trocando .case-card--previous{animation:deck-vai-meio 450ms cubic-bezier(.22,1,.36,1) both;}
.tela .case-carousel-viewport.trocando .case-card--next{animation:deck-vai-fundo 450ms cubic-bezier(.22,1,.36,1) both;}
@keyframes deck-entra-frente{from{opacity:.8; transform:translate3d(28%,16px,-26px) scale(.95) rotateY(-6deg);}to{opacity:1; transform:translate3d(0,0,0) scale(1) rotateY(-4deg);}}
@keyframes deck-vai-meio{from{opacity:.6; transform:translate3d(29%,16px,-52px) scale(.9) rotateY(-8deg);}to{opacity:.8; transform:translate3d(0,0,-26px) scale(.95) rotateY(-6deg);}}
@keyframes deck-vai-fundo{from{opacity:1; transform:translate3d(-31%,-16px,0) scale(1) rotateY(-4deg);}to{opacity:.6; transform:translate3d(0,0,-52px) scale(.9) rotateY(-8deg);}}

/* Mantém a cascata nova, com a escala e torção mais presentes do deck anterior. */
.tela .case-carousel-viewport{height:360px;}
.tela .case-card{width:250px; height:328px; aspect-ratio:auto;}
.tela .case-card--active{width:250px; height:328px; transform:translate3d(0,0,0) scale(1) rotateY(-25deg);}
.tela .case-card--previous{width:220px; height:300px; transform:translate3d(0,0,-26px) scale(.95) rotateY(-25deg);}
.tela .case-card--next{width:200px; height:280px; transform:translate3d(0,0,-52px) scale(.9) rotateY(-34deg);}
@keyframes deck-entra-frente{from{opacity:.8; transform:translate3d(28%,16px,-26px) scale(.95) rotateY(-25deg);}to{opacity:1; transform:translate3d(0,0,0) scale(1) rotateY(-25deg);}}
@keyframes deck-vai-meio{from{opacity:.6; transform:translate3d(29%,16px,-52px) scale(.9) rotateY(-25deg);}to{opacity:.8; transform:translate3d(0,0,-26px) scale(.95) rotateY(-25deg);}}
@keyframes deck-vai-fundo{from{opacity:1; transform:translate3d(-31%,-16px,0) scale(1) rotateY(-25deg);}to{opacity:.6; transform:translate3d(0,0,-52px) scale(.9) rotateY(-34deg);}}

/* Profundidade ótica: avanço no eixo Z, inclinação vertical mínima e
   luz de borda fazem o deck parecer físico, sem mudar sua geometria. */
.tela .case-carousel-viewport{perspective:1300px; perspective-origin:38% 48%; transform-style:preserve-3d;}
.tela .case-card{transform-style:preserve-3d; transform-origin:left center; will-change:transform, filter, opacity;}
.tela .case-card::before{position:absolute; z-index:1; inset:0; border:1px solid rgb(245 245 242 / .18); border-radius:inherit; content:''; background:linear-gradient(112deg, rgb(245 245 242 / .22) 0%, transparent 20%, transparent 74%, rgb(0 0 0 / .3) 100%); pointer-events:none;}
.tela .case-card-conteudo{z-index:2; transform:translateZ(2px);}
.tela .case-card--active{transform:translate3d(0,0,48px) scale(1) rotateX(2deg) rotateY(-25deg); box-shadow:30px 30px 58px rgb(0 0 0 / .78), 8px 10px 18px rgb(0 0 0 / .45);}
.tela .case-card--previous{transform:translate3d(0,0,-30px) scale(.95) rotateX(1deg) rotateY(-25deg); box-shadow:19px 21px 40px rgb(0 0 0 / .62);}
.tela .case-card--next{transform:translate3d(0,0,-104px) scale(.9) rotateX(.5deg) rotateY(-34deg); box-shadow:12px 15px 32px rgb(0 0 0 / .48);}
.tela .case-carousel-viewport.trocando .case-card--active{animation:deck-3d-frente 450ms cubic-bezier(.22,1,.36,1) both;}
.tela .case-carousel-viewport.trocando .case-card--previous{animation:deck-3d-meio 450ms cubic-bezier(.22,1,.36,1) both;}
.tela .case-carousel-viewport.trocando .case-card--next{animation:deck-3d-fundo 450ms cubic-bezier(.22,1,.36,1) both;}
@keyframes deck-3d-frente{from{opacity:.8; transform:translate3d(28%,16px,-30px) scale(.95) rotateX(1deg) rotateY(-25deg);}to{opacity:1; transform:translate3d(0,0,48px) scale(1) rotateX(2deg) rotateY(-25deg);}}
@keyframes deck-3d-meio{from{opacity:.6; transform:translate3d(29%,16px,-104px) scale(.9) rotateX(.5deg) rotateY(-34deg);}to{opacity:.8; transform:translate3d(0,0,-30px) scale(.95) rotateX(1deg) rotateY(-25deg);}}
@keyframes deck-3d-fundo{from{opacity:1; transform:translate3d(-31%,-16px,48px) scale(1) rotateX(2deg) rotateY(-25deg);}to{opacity:.6; transform:translate3d(0,0,-104px) scale(.9) rotateX(.5deg) rotateY(-34deg);}}

/* Acabamento de vidro: apenas material e iluminação, sem interferir na
   geometria, escala, rotação ou pontos de ancoragem do deck. */
.tela .case-card{
  isolation:isolate;
  border:2px solid rgb(245 245 242 / .34);
  background:linear-gradient(138deg, rgb(255 255 255 / .11), rgb(10 10 10 / .48) 34%, rgb(0 0 0 / .72));
}
.tela .case-card::before{
  inset:2px;
  z-index:1;
  border:1px solid rgb(255 255 255 / .28);
  background:
    linear-gradient(116deg, rgb(255 255 255 / .28) 0%, rgb(255 255 255 / .07) 14%, transparent 31%, transparent 71%, rgb(0 0 0 / .38) 100%),
    linear-gradient(to bottom, rgb(255 255 255 / .07), transparent 30%);
  box-shadow:inset 1px 1px 0 rgb(255 255 255 / .19), inset -2px -2px 6px rgb(0 0 0 / .42);
}
.tela .case-card::after{
  z-index:1;
  background:
    linear-gradient(112deg, rgb(255 255 255 / .14) 0%, transparent 17%, transparent 60%, rgb(0 0 0 / .28) 100%),
    linear-gradient(to bottom, rgb(0 0 0 / .15) 0%, rgb(0 0 0 / .36) 38%, rgb(0 0 0 / .94) 100%);
}
.tela .case-card--active{
  border-color:rgb(255 255 255 / .48);
  box-shadow:30px 30px 58px rgb(0 0 0 / .78), 8px 10px 18px rgb(0 0 0 / .45), inset 0 1px 0 rgb(255 255 255 / .22), inset 0 -16px 30px rgb(0 0 0 / .28);
}
.tela .case-card--previous{
  border-color:rgb(245 245 242 / .29);
  box-shadow:19px 21px 40px rgb(0 0 0 / .62), inset 0 1px 0 rgb(255 255 255 / .16), inset 0 -14px 26px rgb(0 0 0 / .34);
}
.tela .case-card--next{
  border-color:rgb(245 245 242 / .22);
  box-shadow:12px 15px 32px rgb(0 0 0 / .48), inset 0 1px 0 rgb(255 255 255 / .11), inset 0 -12px 22px rgb(0 0 0 / .4);
}

/* O deck acima usa left/top absolutos pensados pra tela estreita, então em
   telas largas o bloco inteiro ficava colado na esquerda do Case 02. Aqui
   só encolhe o viewport pra caber o conteúdo real do deck (~470px) e
   centraliza com margin:auto -- os cards continuam com os mesmos valores. */
@media (min-width:681px){
  .tela .case-carousel-viewport{width:375px; max-width:100%; margin:0 auto; transform:none;}
}

/* ===================================================================
   DESKTOP — 1121px+ (equivalente ao antigo "max-width:1120")
   =================================================================== */
@media (min-width:1121px){
  .envolucro{width:min(100% - 48px, 980px);}
  .hero-baixo{gap:var(--e5);}
  .metodo-pilha{gap:var(--e6);}
}

/* ===================================================================
   DESKTOP COMPOSTO — 1024px+
   O celular continua intocado. Nesta faixa, cada seção usa a largura do
   monitor para criar relações entre os blocos, em vez de só esticar uma
   coluna vertical.
   =================================================================== */
.case-apresentacao{display:none;}
@media (min-width:1024px){
  .envolucro{width:min(100% - 96px, 1280px);}

  /* 01 — leitura fixa à esquerda, diagnóstico navegável à direita. */
  .diagnostico{padding:96px 0;}
  .diagnostico-grade{max-width:none; margin:0; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(48px,6vw,96px); align-items:start;}
  .diagnostico-grade > div:first-child{position:sticky; top:112px; display:block; text-align:left;}
  .diagnostico-grade > div:first-child .cabecalho-secao{justify-content:flex-start;}
  .diagnostico-grade > div:first-child .cabecalho-secao-regua{max-width:none;}
  #titulo-diagnostico{max-width:440px; margin-top:28px; font-size:clamp(48px,4.2vw,68px); text-align:left;}
  .diagnostico-grade .lista-diagnostico{width:100%; margin:0;}

  /* 02 — contexto e demonstração dividem a mesma linha. */
  .case{padding:96px 0;}
  .case .envolucro{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(48px,6vw,96px); align-items:center;}
  .case .case-cabecalho-bloco{grid-column:1 / -1; width:100%; margin:0 0 10px; text-align:left;}
  .case .case-cabecalho-bloco .cabecalho-secao{justify-content:flex-start;}
  .case .case-cabecalho-bloco .cabecalho-secao-regua{width:100%; max-width:none;}
  .case-apresentacao{display:block;}
  .case-apresentacao-rotulo{display:block; color:var(--acento); font-family:var(--fm); font-size:11px; letter-spacing:.16em; text-transform:uppercase;}
  .case-apresentacao h2{margin:14px 0 0; color:var(--claro); font-size:clamp(40px,3.8vw,62px); font-weight:400; letter-spacing:-.065em; line-height:.96;}
  .case-apresentacao h2 em{font-style:italic;}
  .case-apresentacao p{max-width:410px; margin-top:22px; color:var(--suave); font-size:16px; line-height:1.65;}
  .case-apresentacao-badges{display:flex; max-width:410px; flex-wrap:wrap; gap:9px; margin:26px 0 0; padding:0; list-style:none;}
  .case-apresentacao-badges li{border:1px solid rgb(245 245 242 / .2); border-radius:999px; padding:8px 11px; color:var(--claro); font-family:var(--fm); font-size:10px; letter-spacing:.04em;}
  .case-conjunto{width:100%; max-width:none; margin:0;}

  /* 03 — a sequência deixa de ser uma pilha e vira uma estrutura. */
  .como-resolvo{padding:96px 0;}
  .metodo-pilha{display:grid; max-width:none; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:48px 0 0;}
  .metodo-carta{min-height:250px; margin:0; padding:30px; flex-direction:column; align-items:flex-start; gap:18px; transform:none;}
  .metodo-carta-num{font-size:62px; line-height:.76;}
  .metodo-carta-icone{width:58px; height:58px;}
  .metodo-carta h3{font-size:24px;}
  .metodo-carta p{font-size:15px;}
  .metodo-carta:hover{transform:translateY(-7px) scale(1.01);}

  /* 04 — retrato à esquerda; texto e método formam uma unidade à direita. */
  .sobre{padding:96px 0;}
  .sobre-grade{max-width:none; grid-template-columns:minmax(0,5fr) minmax(0,7fr); grid-template-areas:"header header" "foto editorial" "foto fluxo"; column-gap:clamp(48px,6vw,96px); row-gap:26px; align-items:start;}
  .sobre-cabecalho-bloco{width:100%; margin:0; text-align:left;}
  .sobre-cabecalho-bloco .cabecalho-secao{justify-content:flex-start;}
  .sobre-cabecalho-bloco .cabecalho-secao-regua{width:100%; max-width:none;}
  .sobre-retrato-wrapper{width:min(100%,420px); min-height:590px; max-width:420px; justify-self:center; align-self:center;}
  .sobre-editorial{width:100%; justify-self:stretch; margin-top:22px; text-align:left;}
  .sobre-editorial h2{font-size:clamp(46px,3.9vw,66px); text-align:left;}
  .sobre-editorial-texto{margin-left:0; margin-right:0; text-align:left;}
  .sobre-fluxo{width:100%; height:184px; margin:0; justify-self:stretch;}

  /* 05 — card final horizontal: conversa e CTA se apoiam visualmente. */
  .cta-final{padding:72px 0 96px;}
  .cta-final-interno{display:grid; max-width:1280px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:clamp(48px,7vw,112px); row-gap:0; align-items:center; border:1px solid var(--borda); border-radius:32px; padding:42px clamp(32px,5vw,72px) 52px; text-align:left;}
  .cta-final-interno > .cabecalho-secao, .cta-final-interno > .cabecalho-secao-regua{grid-column:1 / -1; width:100%; max-width:none; margin-left:0; margin-right:0;}
  .cta-final-interno > .cabecalho-secao{justify-content:flex-start;}
  .cta-final h2{grid-column:1; margin-top:42px; font-size:clamp(44px,4.1vw,68px);}
  .cta-final-sub{grid-column:1; margin:18px 0 0;}
  .cta-final .cta-chat{grid-column:2; grid-row:3 / span 3; width:100%; max-width:430px; margin:42px auto 0;}
  .cta-final .cta-passos{grid-column:2; grid-row:6; width:100%; max-width:430px; margin:22px auto 0;}
  .cta-final .pilula{grid-column:1; justify-self:start; margin-top:30px; width:auto;}
  .cta-final-interno p.suave{grid-column:1; margin:16px 0 0;}
}

/* Tablet/desktop estreito: a linha do acordeão também sai da margem. */
@media (min-width:681px) and (max-width:1023px){
  .diagnostico-grade .lista-diagnostico{width:calc(100% - 56px); margin-left:56px;}
}

/* Fechamento da Seção 01 no desktop: a mesma leitura direta do mobile. */
@media (min-width:1024px){
  .diagnostico{padding:96px 0;}
  .diagnostico-grade{display:grid; grid-template-columns:minmax(0,1fr); width:min(100%,720px); max-width:720px; left:auto; gap:48px; margin:0 auto;}
  .diagnostico-grade > div:first-child{position:static; width:100%; height:auto; margin:0; padding-left:0; text-align:center;}
  .diagnostico-grade > div:first-child .cabecalho-secao{justify-content:center;}
  .diagnostico-grade > div:first-child .cabecalho-secao-regua{width:100%; margin:10px 0 0;}
  .diagnostico-grade > div:first-child #titulo-diagnostico{max-width:none; margin-top:28px; text-align:center;}
  .diagnostico-grade .lista-diagnostico{width:100%; margin:0;}
}

@media (min-width:1280px){
  .metodo-pilha{grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px;}
  .metodo-carta{min-height:280px; padding:28px 24px;}
  .metodo-carta-num{font-size:58px;}
  .metodo-carta-icone{width:54px; height:54px;}
  .metodo-carta h3{font-size:22px;}
}

/* Cabeçalhos das seções: uma mesma régua e eixo central no desktop.
   Mantém cada conteúdo intacto; só unifica a apresentação de 01 em diante. */
@media (min-width:981px){
  .diagnostico-grade > div:first-child,
  .case-cabecalho-bloco,
  .como-resolvo-cabecalho,
  .sobre-cabecalho-bloco{width:min(100%,720px); margin-left:auto; margin-right:auto; text-align:center;}

  .diagnostico-grade > div:first-child .cabecalho-secao,
  .case-cabecalho-bloco .cabecalho-secao,
  .como-resolvo-cabecalho .cabecalho-secao,
  .sobre-cabecalho-bloco .cabecalho-secao{justify-content:center;}

  .cta-final-interno > .cabecalho-secao{width:min(100%,720px); margin-left:auto; margin-right:auto; justify-content:center;}

  .diagnostico-grade > div:first-child .cabecalho-secao-corpo,
  .case-cabecalho-bloco .cabecalho-secao-corpo,
  .como-resolvo-cabecalho .cabecalho-secao-corpo,
  .sobre-cabecalho-bloco .cabecalho-secao-corpo{align-items:flex-start; text-align:left;}

  .diagnostico-grade > div:first-child .cabecalho-secao-regua,
  .case-cabecalho-bloco .cabecalho-secao-regua,
  .como-resolvo-cabecalho .cabecalho-secao-regua,
  .sobre-cabecalho-bloco .cabecalho-secao-regua,
  .cta-final-interno > .cabecalho-secao-regua{width:min(100%,720px); margin-left:auto; margin-right:auto;}

  .como-resolvo-cabecalho .secao-titulo{margin-left:auto; margin-right:auto; text-align:center;}
}

/* A composição de 1024px+ usa cabeçalhos alinhados ao conteúdo de cada
   coluna; esta camada vem por último para não herdar o eixo central legado. */
@media (min-width:1024px){
  /* Sticky não funciona dentro de um ancestral com overflow recortado. */
  .tela, .diagnostico-grade{overflow:visible !important;}
  /* A composição do diagnóstico ocupa o centro visual, não a borda esquerda. */
  .diagnostico-grade{position:relative; left:clamp(56px,4vw,120px);}
  .diagnostico-grade .lista-diagnostico{width:calc(100% - clamp(56px,4vw,120px)); margin-left:clamp(56px,4vw,120px);}
  .diagnostico-grade > div:first-child{position:sticky; top:88px; align-self:start; height:fit-content; width:auto; margin:0; padding-left:clamp(150px,12vw,280px); text-align:left;}
  .diagnostico-grade > div:first-child.revelar{transform:none;}
  .diagnostico-grade > div:first-child #titulo-diagnostico{max-width:350px;}
  .diagnostico-grade > div:first-child .cabecalho-secao{justify-content:flex-start;}
  .diagnostico-grade > div:first-child .cabecalho-secao-regua{width:100%; margin:10px 0 0;}
  .case .case-cabecalho-bloco, .sobre-cabecalho-bloco{width:100%; margin:0; text-align:left;}
  .case .case-cabecalho-bloco .cabecalho-secao, .sobre-cabecalho-bloco .cabecalho-secao{justify-content:flex-start;}
  .case .case-cabecalho-bloco .cabecalho-secao-regua, .sobre-cabecalho-bloco .cabecalho-secao-regua{width:100%; margin:10px 0 0;}
  .cta-final-interno > .cabecalho-secao{width:100%; margin:0; justify-content:flex-start;}
  .cta-final-interno > .cabecalho-secao-regua{width:100%; margin:10px 0 0;}

  /* 03 volta a ser uma pilha editorial: mais presença e menos cara de grid. */
  .metodo-pilha{display:block; max-width:920px; margin:64px auto 0;}
  .metodo-carta{min-height:0; margin-top:-26px; padding:44px 48px; flex-direction:row; align-items:center; gap:30px; transform:rotate(var(--rot)) translateX(var(--tx));}
  .metodo-carta:first-child{margin-top:0;}
  .metodo-carta-num{font-size:86px; line-height:.76;}
  .metodo-carta-icone{width:72px; height:72px;}
  .metodo-carta-icone svg{width:31px; height:31px;}
  .metodo-carta h3{font-size:29px;}
  .metodo-carta p{font-size:17px;}
  .metodo-carta:hover{transform:rotate(0deg) translateX(0) translateY(-8px) scale(1.02);}

  /* O case volta a ser uma peça única, centralizada — sem uma copy paralela. */
  .case .envolucro{display:block;}
  .case .case-conjunto{max-width:980px; margin:38px auto 0;}

  /* 04 — o retrato respira um pouco mais baixo; o método volta ao círculo
     original do mobile, em escala menor para caber inteiro na coluna direita. */
  .sobre-retrato-wrapper{transform:translateY(15px);}
  /* A referência do fluxo parte do "L" de Gabriel, não do centro matemático da coluna. */
  .sobre-fluxo{position:relative; left:-87px; top:4px; width:min(100%,400px); height:360px; margin:0 auto; justify-self:center; transform:none;}
  .sobre-fluxo::before, .sobre-fluxo::after{display:none;}
  .sobre-fluxo-linhas{display:block; height:340px;}
  .sobre-fluxo .fluxo-pulso-horizontal{display:none;}
  .sobre-fluxo .fluxo-etapa{width:118px; transform:none;}
  .sobre-fluxo .fluxo-etapa-1{top:2px; left:50%; transform:translateX(-50%);}
  .sobre-fluxo .fluxo-etapa-2{top:122px; right:-10px; left:auto;}
  .sobre-fluxo .fluxo-etapa-3{top:242px; left:50%; transform:translateX(-50%);}
  .sobre-fluxo .fluxo-etapa-4{top:122px; right:auto; left:-10px;}
  .sobre-fluxo .fluxo-no{width:80px; height:80px; background:radial-gradient(circle at 35% 28%, rgb(245 245 242 / .08), rgb(13 13 13 / .74) 65%); box-shadow:inset 0 0 0 4px rgb(13 13 13 / .34), 0 10px 22px rgb(0 0 0 / .25);}
  .sobre-fluxo .fluxo-no span{top:11px; font-size:12px;}
  .sobre-fluxo .fluxo-no svg{width:32px; height:32px; margin-top:14px;}
  .sobre-fluxo .fluxo-etapa strong{max-width:124px; margin-top:10px; font-size:16px; line-height:1.02;}

  /* Cabeçalhos 02 e 04 voltam ao mesmo eixo do 03: número, seção e régua
     centralizados como uma assinatura única, não como blocos desconexos. */
  .case .case-cabecalho-bloco, .sobre-cabecalho-bloco{width:min(100%,720px); margin-left:auto; margin-right:auto; text-align:center;}
  .case .case-cabecalho-bloco .cabecalho-secao, .sobre-cabecalho-bloco .cabecalho-secao{justify-content:center;}
  .case .case-cabecalho-bloco .cabecalho-secao-regua, .sobre-cabecalho-bloco .cabecalho-secao-regua{width:100%; margin:10px auto 0;}

  /* 05 retorna à composição original: seção aberta, leitura central e sem
     a moldura horizontal que deixava o bloco pesado. */
  .cta-final{padding:50px 0 130px;}
  .cta-final-interno{display:block; max-width:980px; margin:0 auto; border:0; border-radius:0; padding:0; text-align:center;}
  .cta-final-interno > .cabecalho-secao{display:flex; width:min(100%,720px); margin:0 auto; justify-content:center;}
  .cta-final-interno > .cabecalho-secao-regua{width:min(100%,720px); margin:10px auto 0;}
  .cta-final h2{margin:var(--e5) 0 0; font-size:clamp(38px,5.4vw,76px);}
  .cta-final-sub{margin:14px auto 0;}
  .cta-final .cta-chat{width:auto; max-width:420px; margin:34px auto 0;}
  .cta-final .cta-passos{width:auto; max-width:330px; margin:34px auto 0;}
  .cta-final .pilula{display:inline-flex; margin-top:var(--e6); width:auto;}
  .cta-final-interno p.suave{margin:18px auto 0;}
}

/* Correção final do 01 no desktop: sem sticky, sem sobreposição e no mesmo
   eixo central das demais seções. */
@media (min-width:1024px){
  .diagnostico-grade{display:grid; grid-template-columns:minmax(0,1fr); width:min(100%,720px); max-width:720px; left:auto; gap:48px; margin:0 auto;}
  .diagnostico-grade > div:first-child{position:static; align-self:auto; width:100%; height:auto; margin:0; padding-left:0; text-align:center;}
  .diagnostico-grade > div:first-child .cabecalho-secao{justify-content:center;}
  .diagnostico-grade > div:first-child .cabecalho-secao-regua{width:100%; margin:10px 0 0;}
  .diagnostico-grade > div:first-child #titulo-diagnostico{max-width:500px; margin:28px auto 0; font-size:clamp(52px,4vw,68px); text-align:center;}
  .diagnostico-grade .lista-diagnostico{width:100%; margin:0;}
}