/* ============================================================
   TSN SISTEMAS — Landing
   Identidade aplicada: design system TSN, paleta "Marinho Claro"
   — canvas claro dominante, toda superfície de marca no marinho
   escuro, azul de sinal só em ação. Onest + Instrument Sans /
   JetBrains Mono, grão de filme, forma de recorte assimétrica e
   cor por vertical. Nenhum hex solto: tudo em token.
   ============================================================ */

:root{
  /* --- cor: 60 dominante / 30 estrutural / 10 destaque --- */
  --bg:#F4F6FB;                 /* 60% — fundo dominante */
  --bg-alt:#EAEEF7;
  --bg-elev:#FFFFFF;            /* 30% — estrutura/superfície */
  --bg-card:#FFFFFF;
  --bg-hero:color-mix(in oklab, var(--brand) 62%, var(--brand-deep)); /* zona de marca: capa em cheio */
  --bg-footer:#060A16;
  --bg-inset:#EEF2FA;
  --line:#DCE2F0;
  --line-strong:#BCC7DF;

  /* marinho da identidade — o único lugar do projeto onde ele é escrito por
     extenso. Zonas invertidas trocam --accent, nunca --brand: é isso que evita
     o ciclo de var() e mantém toda variação derivando da mesma cor. */
  --brand:#172972;
  --brand-deep:#0C1330;
  --brand-soft:#E4EAFA;
  --brand-lit:#5B8CFF;          /* azul de sinal — a marca acesa */
  --brand-sky:#7ADBFF;          /* ciano de apoio, só em ênfase */

  --accent:var(--brand);        /* 10% — só ação e interação */
  --accent-deep:var(--brand-deep);
  --accent-soft:var(--brand-soft);
  --accent-line:color-mix(in oklab, var(--brand) 40%, transparent);
  /* variações derivadas: nenhuma repete o hex do destaque */
  --accent-lift:color-mix(in oklab, var(--brand) 56%, var(--brand-lit));   /* marinho aceso dos gradientes */
  --accent-tint:var(--brand-sky);                                          /* ênfase sobre a marca */
  --accent-on-dark:var(--brand-lit);                                       /* azul legível em zona escura */
  --accent-on-dark-lift:color-mix(in oklab, var(--brand-lit) 62%, #FFFFFF);
  --status-live:color-mix(in oklab, var(--brand-sky) 82%, #FFFFFF);        /* pulso de "no ar" sobre a capa */
  --mark-stem:var(--brand-lit);                                            /* haste do T na marca */

  --text:#0A1020;
  --text-mute:#4E5A7A;
  --text-invert:#FFFFFF;

  /* --- cor por vertical: detalhe fino, nunca área — toda a família
         reancorada no registro frio do marinho --- */
  --v-licita:var(--brand);
  --v-arrecada:#0F5F86;
  --v-sentinela:#2B5BD9;
  --v-escola:#0B6B63;
  --v-fiscal:#1D7A8C;
  --v-ia:#4B4FC4;
  --v-saude:#1668A8;
  --v-social:#6B3E9B;

  /* --- gradientes de zona (só cores da própria paleta) --- */
  --bg-gradient-hero:
    radial-gradient(70% 60% at 88% 4%, color-mix(in oklab, var(--brand-sky) 34%, transparent) 0%, transparent 62%),
    radial-gradient(120% 90% at 70% 0%, var(--accent-lift) 0%, var(--accent) 42%, var(--accent-deep) 100%);
  --bg-gradient-glow:
    radial-gradient(60% 60% at 90% 110%, rgba(255,255,255,.14), transparent 70%);
  --bg-gradient-cta:
    radial-gradient(92% 130% at 10% 0%, color-mix(in oklab, var(--accent) 12%, transparent) 0%, transparent 60%),
    linear-gradient(140deg, var(--bg-elev) 0%, color-mix(in oklab, var(--accent-soft) 50%, var(--bg-elev)) 82%);
  --bg-dotgrid:radial-gradient(circle at 1px 1px, rgba(255,255,255,.26) 1px, transparent 1px);
  --media-wash:linear-gradient(140deg, color-mix(in oklab, var(--accent) 10%, transparent), transparent 60%);

  /* zona do produto: brilho de marca atrás do mockup emoldurado */
  --bg-gradient-produto:
    radial-gradient(58% 56% at 50% 38%,
      color-mix(in oklab, var(--accent) 14%, transparent) 0%, transparent 72%);
  --frame-brand:clamp(8px, .9vw, 13px);   /* espessura da moldura de marca */

  /* zona de convite: faixa de marca com anéis concêntricos saindo da esquerda */
  --bg-band:var(--accent);
  --bg-gradient-band:linear-gradient(104deg, var(--accent-lift) 0%, var(--accent) 46%, var(--accent-deep) 100%);
  --bg-rings:repeating-radial-gradient(circle at 9% 50%, rgba(255,255,255,.14) 0 1.5px, transparent 1.5px 52px);

  /* zona de marca em caixa: painel dos diferenciais */
  --bg-pillars:var(--accent-deep);
  --bg-gradient-pillars:
    radial-gradient(120% 150% at 12% -20%, var(--accent) 0%, var(--accent-deep) 76%);
  --bg-pillar-art:var(--bg-card);
  --bg-pillar-body:
    linear-gradient(180deg, color-mix(in oklab, var(--accent-soft) 52%, var(--bg-card)) 0%, var(--bg-card) 100%);
  --pillar-line:color-mix(in oklab, var(--v-sentinela) 30%, var(--bg-card));

  /* --- tipografia --- */
  --f-display:'Onest', ui-sans-serif, system-ui, sans-serif;
  --f-body:'Instrument Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  --fs-hero:clamp(38px, 5.6vw, 66px);
  --fs-h2:clamp(27px, 3.4vw, 42px);
  --fs-h3:clamp(18px, 1.5vw, 21px);
  --fs-lead:clamp(15px, 1.25vw, 17.5px);
  --fs-body:16px;
  --fs-small:13.5px;
  --fs-btn:15px;
  --fs-eyebrow:11.5px;
  --fs-number:clamp(34px, 4.2vw, 54px);

  /* --- espaço / forma / elevação --- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --r-1:6px; --r-2:10px; --r-3:16px; --r-4:24px; --r-5:32px; --r-6:40px;
  --r-pill:999px;
  --shape-cut:8px 34px 8px 34px;   /* chanfro assimétrico da identidade */

  --shadow-1:0 1px 2px rgba(10,16,32,.08);
  --shadow-2:0 10px 26px -10px rgba(10,16,32,.22);
  --shadow-3:0 30px 64px -22px rgba(10,16,32,.30);
  --glow-accent:0 0 0 4px var(--accent-soft), var(--shadow-3);

  /* grão de filme — ruído fractal em SVG inline, sem imagem externa */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-size:400px;
  --grain-opacity:.07;
  --grain-blend:multiply;   /* sobre canvas claro o grão multiplica, não sobrepõe */

  --ease:cubic-bezier(.2,.7,.3,1);
  --dur-1:.16s; --dur-2:.32s; --dur-3:.6s;

  --maxw:1200px;
  --header-h:70px;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}

html,body{overflow-x:clip; max-width:100vw}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); -webkit-text-size-adjust:100%}
/* menu mobile aberto: a página não rola por trás do painel */
html.nav-open{overflow:hidden}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-body);
  font-size:var(--fs-body);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

/* grão global — camada fixa de filme por cima de toda a página, como na identidade */
body::before{
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
  background-image:var(--grain); background-size:var(--grain-size) var(--grain-size);
  opacity:var(--grain-opacity); mix-blend-mode:var(--grain-blend);
}

h1,h2,h3,h4{font-family:var(--f-display); line-height:1.12; letter-spacing:-.025em; margin:0; font-weight:700; text-wrap:balance}
p{margin:0; text-wrap:pretty}
a{color:inherit; text-decoration:none}
img,svg,video,iframe{max-width:100%; height:auto; display:block}
ul{margin:0; padding:0; list-style:none}
button,input,select,textarea{font-family:inherit}

::selection{background:var(--accent); color:var(--text-invert)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-1)}

.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(18px, 4vw, 40px)}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font:600 var(--fs-eyebrow)/1 var(--f-mono);
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); margin-bottom:var(--s-4);
}
.eyebrow::before{content:''; width:22px; height:1.5px; background:var(--accent-line); transition:width var(--dur-3) var(--ease) .15s}
html.js .rv:not(.is-in) .eyebrow::before{width:0}

.sec-title{font-size:var(--fs-h2); margin-bottom:var(--s-4); max-width:20ch}
.sec-lead{color:var(--text-mute); font-size:var(--fs-lead); max-width:60ch}
.sec-head{margin-bottom:var(--s-8)}

.note{font:400 12px/1.5 var(--f-mono); color:var(--text-mute)}

/* ---------- botões (um sistema só, toda a página) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font:600 var(--fs-btn)/1 var(--f-body);
  padding:15px 26px; border-radius:var(--r-pill);
  border:1px solid transparent; cursor:pointer; text-align:center;
  transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
             color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease),
             box-shadow var(--dur-2) var(--ease);
}
.btn .arw{transition:transform var(--dur-2) var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn:active{transform:translateY(1px) scale(.99)}

.btn-primary{background:var(--accent); color:var(--text-invert); box-shadow:var(--shadow-2)}
.btn-primary:hover{background:var(--accent-deep); box-shadow:var(--shadow-3); transform:translateY(-1px)}

.btn-ghost{background:transparent; color:var(--text); border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent)}

.btn-link{background:none; padding:10px 0; border-radius:0; color:var(--accent); position:relative}
.btn-link::after{
  content:''; position:absolute; left:0; bottom:4px; height:1.5px; width:26px;
  background:var(--accent); transition:width var(--dur-2) var(--ease);
}
.btn-link:hover::after{width:100%}

.btn-round{
  width:60px; height:60px; padding:0; border-radius:50%;
  background:var(--accent); color:var(--text-invert); box-shadow:var(--shadow-2);
  flex:0 0 auto;
}
.btn-round:hover{background:var(--accent-deep); box-shadow:var(--shadow-3)}
.btn-round svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

.btn-block{width:100%}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:90;
  background:color-mix(in oklab, var(--bg) 84%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
             box-shadow var(--dur-2) var(--ease);
}
.site-header.is-stuck{
  background:color-mix(in oklab, var(--bg-elev) 94%, transparent);
  border-bottom-color:var(--line);
  box-shadow:var(--shadow-1);
}
.site-header .wrap{
  height:var(--header-h);
  display:flex; align-items:center; gap:var(--s-5);
  transition:height var(--dur-2) var(--ease);
}
.site-header.is-stuck .wrap{height:60px}

.brand{display:flex; align-items:center; gap:10px; margin-right:auto; flex:0 0 auto}
.brand svg{width:30px; height:30px; color:var(--accent)}
.brand b{font-family:var(--f-display); font-size:16.5px; font-weight:700; letter-spacing:-.02em}
.brand span{font-weight:400; opacity:.62}

.mainnav{display:flex; align-items:center; gap:var(--s-5)}
.mainnav a{
  font:500 14.5px/1 var(--f-body); color:var(--text-mute);
  position:relative; padding:8px 0;
  transition:color var(--dur-1) var(--ease);
}
.mainnav a::after{
  content:''; position:absolute; left:0; bottom:0; height:1.5px; width:0;
  background:var(--accent); transition:width var(--dur-2) var(--ease);
}
.mainnav a:hover{color:var(--text)}
.mainnav a:hover::after{width:100%}
.mainnav a.is-active{color:var(--text)}
.mainnav a.is-active::after{width:100%}

.header-cta{padding:11px 20px; font-size:14px}
/* CTA curto do header — só entra nas faixas em que o botão longo não cabe */
.header-cta-sm{display:none; padding:9px 14px; font-size:13px; box-shadow:var(--shadow-1)}

/* progresso de leitura: filete de marca na base do header, só depois de rolar */
.scroll-progress{
  position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  background:linear-gradient(90deg, var(--accent), var(--brand-lit));
  transform-origin:left; transform:scaleX(var(--progress, 0));
  opacity:0; pointer-events:none;
  transition:opacity var(--dur-2) var(--ease);
}
.site-header.is-stuck .scroll-progress{opacity:1}

.nav-toggle{
  display:none; width:44px; height:44px; border-radius:var(--r-2);
  background:transparent; border:1px solid var(--line-strong); color:var(--text);
  cursor:pointer; align-items:center; justify-content:center;
}
.nav-toggle span{
  display:block; width:18px; height:1.6px; background:currentColor; position:relative;
  transition:background var(--dur-1) var(--ease);
}
.nav-toggle span::before,.nav-toggle span::after{
  content:''; position:absolute; left:0; width:18px; height:1.6px; background:currentColor;
  transition:transform var(--dur-2) var(--ease);
}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

.nav-drawer{
  display:none; position:fixed; inset:var(--header-h) 0 0 0; z-index:89;
  flex-direction:column; overflow-y:auto; overscroll-behavior:contain;
  background:color-mix(in oklab, var(--bg-elev) 94%, transparent);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  padding:var(--s-4) clamp(18px,4vw,40px) calc(var(--s-6) + env(safe-area-inset-bottom, 0px));
  opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
}
.nav-drawer.is-open{opacity:1; pointer-events:auto; visibility:visible; transition-delay:0s}
.nav-drawer::before{
  /* malha de pontos da capa, bem apagada, pra o painel ser da mesma família do hero */
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(circle at 1px 1px, var(--line-strong) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(80% 60% at 100% 0%, #000 0%, transparent 70%);
  mask-image:radial-gradient(80% 60% at 100% 0%, #000 0%, transparent 70%);
}
.nav-drawer-links{position:relative; display:grid; counter-reset:navi}
.nav-drawer-links a{
  display:flex; align-items:center; gap:14px;
  padding:17px 0; border-bottom:1px solid var(--line);
  font:700 clamp(22px, 6vw, 28px)/1.1 var(--f-display); letter-spacing:-.025em; color:var(--text);
  counter-increment:navi;
  opacity:0; transform:translateY(12px);
  transition:opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease), color var(--dur-1) var(--ease);
}
.nav-drawer-links a::before{
  content:counter(navi, decimal-leading-zero);
  font:500 11px/1 var(--f-mono); letter-spacing:.12em; color:var(--accent); min-width:24px;
}
.nav-drawer-links a::after{
  content:'→'; margin-left:auto; color:var(--text-mute);
  transform:translateX(-6px); opacity:0;
  transition:transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.nav-drawer-links a:hover::after,.nav-drawer-links a:focus-visible::after,.nav-drawer-links a.is-active::after{transform:none; opacity:1}
.nav-drawer-links a.is-active{color:var(--accent)}
.nav-drawer.is-open .nav-drawer-links a{opacity:1; transform:none}
.nav-drawer.is-open .nav-drawer-links a:nth-child(1){transition-delay:.05s}
.nav-drawer.is-open .nav-drawer-links a:nth-child(2){transition-delay:.1s}
.nav-drawer.is-open .nav-drawer-links a:nth-child(3){transition-delay:.15s}
.nav-drawer.is-open .nav-drawer-links a:nth-child(4){transition-delay:.2s}
.nav-drawer.is-open .nav-drawer-links a:nth-child(5){transition-delay:.25s}
.nav-drawer.is-open .nav-drawer-links a:nth-child(6){transition-delay:.3s}
.nav-drawer-foot{
  position:relative; margin-top:auto; padding-top:var(--s-6); display:grid; gap:var(--s-3);
  opacity:0; transform:translateY(10px);
  transition:opacity var(--dur-3) var(--ease) .3s, transform var(--dur-3) var(--ease) .3s;
}
.nav-drawer.is-open .nav-drawer-foot{opacity:1; transform:none}
.nav-drawer-foot .note{text-align:center}

/* ---------- hero: capa de marca, split assimétrico ---------- */
.hero{
  position:relative; overflow:hidden; color:var(--text-invert);
  background-color:var(--bg-hero);
  background-image:var(--bg-gradient-hero);
  border-radius:0 0 var(--r-5) var(--r-5);
  padding:clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 108px);
  /* a capa ocupa a tela inteira abaixo do header — nenhum fundo da próxima seção aparece */
  min-height:calc(100vh - var(--header-h));
  min-height:calc(100svh - var(--header-h));
  display:flex; align-items:center;
}
.hero > .wrap{width:100%}
/* brilho de canto e malha de pontos — as duas camadas da capa da identidade */
.hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:var(--bg-gradient-glow);
}
.hero::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:var(--bg-dotgrid); background-size:26px 26px;
  opacity:.55;
  -webkit-mask-image:radial-gradient(70% 60% at 20% 30%, #000 0%, transparent 78%);
  mask-image:radial-gradient(70% 60% at 20% 30%, #000 0%, transparent 78%);
}
.hero > .wrap{position:relative; z-index:1}
.hero :focus-visible{outline-color:var(--text-invert)}

/* marca-d'água flutuante da capa */
.hero .watermark{
  position:absolute; right:-5%; bottom:-30%; width:44%; z-index:0;
  color:var(--text-invert); opacity:.1; pointer-events:none;
  animation:float 14s var(--ease) infinite;
}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-18px) rotate(3deg)}}

.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px, 4vw, 64px); align-items:center}

.hero-badge{
  display:inline-flex; align-items:center; gap:9px;
  border:1px solid rgba(255,255,255,.36); border-radius:var(--r-pill);
  padding:7px 15px 7px 9px; margin-bottom:var(--s-5);
  font:500 12.5px/1 var(--f-body); color:rgba(255,255,255,.92);
}
.hero-badge i{
  width:7px; height:7px; border-radius:50%; background:var(--status-live);
  box-shadow:0 0 0 4px color-mix(in oklab, var(--status-live) 24%, transparent);
  animation:live-pulse 2.6s var(--ease) infinite;
}
.hero-badge-more::before{content:'·'; margin-right:9px; opacity:.7}
@keyframes live-pulse{
  0%{box-shadow:0 0 0 0 color-mix(in oklab, var(--status-live) 46%, transparent)}
  70%{box-shadow:0 0 0 9px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
.hero h1{font-size:var(--fs-hero); font-weight:800; max-width:14ch; margin-bottom:var(--s-5); color:var(--text-invert); line-height:1.04; letter-spacing:-.035em}
.hero h1 em{font-style:normal; color:var(--accent-tint)}
.hero-lead{color:rgba(255,255,255,.86); font-size:var(--fs-lead); max-width:48ch; margin-bottom:var(--s-6)}
.hero-actions{display:flex; align-items:center; gap:var(--s-4); flex-wrap:wrap}

/* sobre o marinho da capa, a hierarquia dos botões inverte */
.hero .btn-primary{background:var(--bg-elev); color:var(--accent-deep)}
.hero .btn-primary:hover{background:var(--accent-soft); color:var(--accent-deep); box-shadow:var(--shadow-3)}
.hero .btn-ghost{color:var(--text-invert); border-color:rgba(255,255,255,.45)}
.hero .btn-ghost:hover{border-color:var(--text-invert); background:rgba(255,255,255,.12); color:var(--text-invert)}
.hero .btn-round{background:var(--bg-elev); color:var(--accent-deep)}
.hero .btn-round:hover{background:var(--accent-soft)}

.hero-meta{
  display:grid; grid-template-columns:repeat(3,auto); justify-content:start;
  gap:var(--s-6); margin-top:var(--s-8);
  padding-top:var(--s-5); border-top:1px solid rgba(255,255,255,.26);
}
.hero-meta div b{display:block; font:800 22px/1.1 var(--f-display); color:var(--text-invert)}
.hero-meta div b span{font:inherit; color:inherit}
.hero-meta div > span{font:400 12.5px/1.4 var(--f-mono); color:rgba(255,255,255,.74)}

.hero-media{position:relative}
.media-frame{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-5);
  background:var(--bg-inset); box-shadow:var(--shadow-3);
}
.media-frame img{width:100%; height:auto}
.media-frame::after{content:''; position:absolute; inset:0; background:var(--media-wash); pointer-events:none}
.media-frame.is-cut{border-radius:var(--shape-cut)}

.hero-media .btn-round{position:absolute; right:-14px; bottom:-14px; z-index:2}
.hero-media .btn-round svg{animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)}}
.hero-tag{animation:float-soft 11s var(--ease) infinite; animation-delay:1s}

.hero-tag{
  position:absolute; left:-16px; top:34px; z-index:2; color:var(--text);
  display:flex; align-items:center; gap:10px;
  background:var(--bg-elev); border:1px solid var(--line);
  border-radius:var(--r-3); padding:11px 15px; box-shadow:var(--shadow-2);
}
.hero-tag b{font:600 13px/1.2 var(--f-body); display:block}
.hero-tag span{font:400 10.5px/1.3 var(--f-mono); color:var(--text-mute)}
.hero-tag i{width:8px; height:8px; border-radius:50%; background:var(--v-escola); flex:0 0 auto}

/* ---------- marquee de parceiros ---------- */
.partners{background:var(--bg-alt); border-bottom:1px solid var(--line); padding:var(--s-7) 0}
.partners .label{
  text-align:center; font:500 11.5px/1 var(--f-mono);
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-mute);
  margin-bottom:var(--s-5);
}
.marquee{
  position:relative; overflow:hidden; width:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track{display:flex; width:max-content; animation:marquee 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track img{
  height:52px; width:auto; margin:0 var(--s-7);
  opacity:.6; filter:grayscale(1);
  transition:opacity var(--dur-2) var(--ease), filter var(--dur-2) var(--ease);
}
.marquee-track img:hover{opacity:1; filter:none}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ---------- diferenciais: painel de marca em caixa + carrossel ---------- */
.pillars-panel{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:var(--r-6);
  background-color:var(--bg-pillars); background-image:var(--bg-gradient-pillars);
  box-shadow:var(--shadow-3);
}
/* skyline da cidade: textura da zona, nunca pano de fundo cru */
.pillars-skyline{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center top;
  opacity:.85; mix-blend-mode:overlay; pointer-events:none;
}
/* malha de pontos — mesma camada da capa, reaproveitada */
.pillars-panel::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:var(--bg-dotgrid); background-size:26px 26px; opacity:.4;
  -webkit-mask-image:radial-gradient(75% 65% at 12% 20%, #000 0%, transparent 76%);
  mask-image:radial-gradient(75% 65% at 12% 20%, #000 0%, transparent 76%);
}
.pillars-inner{position:relative; z-index:1; --pp:clamp(28px,3.6vw,56px); padding:var(--pp)}

.pillars-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s-5); margin-bottom:clamp(26px,3.2vw,44px);
}
.pillars .eyebrow{color:rgba(255,255,255,.9)}
.pillars .eyebrow::before{background:rgba(255,255,255,.55)}
.pillars-title{
  font-size:var(--fs-h2); font-weight:800; color:var(--text-invert); max-width:19ch;
}
.pillars :focus-visible{outline-color:var(--text-invert)}

.pillars-dots{display:flex; align-items:center; gap:2px; flex:0 0 auto; padding-bottom:6px}
.pillars-dot{
  width:22px; height:22px; padding:0; border:0; background:none; cursor:pointer;
  display:grid; place-items:center; border-radius:50%;
}
.pillars-dot::before{
  content:''; width:9px; height:9px; border-radius:50%;
  background:rgba(255,255,255,.4);
  transition:background var(--dur-1) var(--ease), transform var(--dur-2) var(--ease);
}
.pillars-dot:hover::before{background:rgba(255,255,255,.72)}
.pillars-dot[aria-current="true"]::before{background:var(--text-invert); transform:scale(1.34)}

.pillars-track{
  display:flex; gap:var(--s-4); min-width:0;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
  padding-bottom:var(--s-1);
}
.pillars-track::-webkit-scrollbar{display:none}
/* trilhas arrastáveis com o mouse: cursor de mão e sem rolagem suave durante o arrasto */
@media (hover:hover) and (pointer:fine){
  .pillars-track,.casos-track{cursor:grab}
  .pillars-track.is-dragging,.casos-track.is-dragging{cursor:grabbing; scroll-behavior:auto; scroll-snap-type:none; user-select:none}
  .is-dragging .pillar,.is-dragging .caso{pointer-events:none}
}

.pillar{
  flex:0 0 calc((100% - 2 * var(--s-4)) / 3); scroll-snap-align:start;
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--bg-card); border-radius:var(--r-4); box-shadow:var(--shadow-3);
  transition:transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.pillar:hover{transform:translateY(-6px)}

.pillar-art{
  position:relative; display:grid; place-items:center;
  height:clamp(146px,15vw,180px); background:var(--bg-pillar-art);
}
.pillar-lines{
  position:absolute; inset:0; width:100%; height:100%;
  color:var(--pillar-line); stroke:currentColor; fill:none;
  stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round;
}
.pillar-figs{position:relative; z-index:1; display:flex; align-items:center}
.pillar-icon{
  width:74px; height:74px; border-radius:50%; margin-right:-16px;
  display:grid; place-items:center; background:var(--accent);
  box-shadow:var(--shadow-2); position:relative; z-index:2;
  transition:transform var(--dur-3) var(--ease);
}
.pillar-icon svg{width:30px; height:30px; stroke:var(--text-invert); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.pillar-face{
  width:74px; height:74px; border-radius:50%; object-fit:cover;
  border:2px solid var(--bg-card);
  transition:transform var(--dur-3) var(--ease);
}
.pillar:hover .pillar-icon{transform:translateX(-4px)}
.pillar:hover .pillar-face{transform:translateX(4px)}

.pillar-body{
  flex:1; padding:var(--s-5) var(--s-5) var(--s-6);
  border-top:1px solid var(--line); background-image:var(--bg-pillar-body);
}
.pillar-body h3{font-size:var(--fs-h3); font-weight:700; margin-bottom:var(--s-3)}
.pillar-body p{font-size:var(--fs-small); line-height:1.62; color:var(--text-mute)}

/* ---------- seções ---------- */
.section{padding:clamp(64px, 8vw, 112px) 0; position:relative}
.section--alt{background:var(--bg-alt); border-block:1px solid var(--line)}
.section--inset{background:var(--bg-inset)}

/* ---------- produto: marca, mockup emoldurado e grade de recursos ---------- */
.produto-head{text-align:center; max-width:820px; margin:0 auto var(--s-8)}
.produto-mark{
  width:62px; height:62px; margin:0 auto var(--s-5);
  display:grid; place-items:center; border-radius:var(--r-3);
  background:var(--accent); color:var(--text-invert); box-shadow:var(--shadow-2);
}
.produto-mark svg{width:34px; height:34px}
.produto-title{
  font-size:var(--fs-h2); font-weight:400; letter-spacing:-.03em;
  max-width:22ch; margin:0 auto var(--s-4);
}
.produto-title b{font-weight:800}
.produto-head .sec-lead{margin:0 auto; max-width:56ch}

.produto-stage{position:relative}
.produto-stage::before{
  content:''; position:absolute; inset:-8% -6% 6%; z-index:0; pointer-events:none;
  background-image:var(--bg-gradient-produto);
}

.produto-frame{
  position:relative; z-index:1; margin:0 auto; max-width:1000px; overflow:hidden;
  border:var(--frame-brand) solid var(--accent); border-radius:var(--r-6);
  background:var(--bg-inset); box-shadow:var(--shadow-3);
}
.produto-ui{width:100%}
/* pessoas apoiadas na faixa interna do painel — recorte, nunca pano de fundo */
.produto-equipe{
  position:absolute; right:5%; bottom:30%; width:40%; z-index:2;
  filter:drop-shadow(0 16px 26px rgba(20,22,26,.22));
  transition:transform var(--dur-3) var(--ease);
}
.produto-frame:hover .produto-equipe{transform:translateY(-6px)}

.produto-float{
  position:absolute; left:0; bottom:16%; z-index:3; min-width:222px;
  display:flex; align-items:flex-start; gap:var(--s-3);
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--r-3);
  padding:var(--s-4) var(--s-5); box-shadow:var(--shadow-3);
  animation:float-soft 9s var(--ease) infinite;
}
@keyframes float-soft{0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)}}
.produto-float .ic{
  width:34px; height:34px; border-radius:var(--r-2); flex:0 0 auto;
  display:grid; place-items:center; background:var(--accent-soft);
}
.produto-float .ic svg{width:18px; height:18px; stroke:var(--accent); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.produto-float b{display:block; font:800 21px/1.15 var(--f-display); letter-spacing:-.03em}
.produto-float span{font:400 11px/1.4 var(--f-mono); color:var(--text-mute)}

/* a grade encosta no painel: os cartões cobrem a base da moldura */
.feature-grid{
  position:relative; z-index:2; margin-top:calc(-1 * var(--s-7));
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-4);
}
/* variante centralizada do mesmo cartão: só muda alinhamento e ícone cheio */
.card.card--center{text-align:center; box-shadow:var(--shadow-2)}
.card.card--center::before{transform-origin:center; transform:scaleX(.14)}
.card.card--center:hover::before{transform:scaleX(1)}
.card.card--center .ic{
  width:52px; height:52px; margin-left:auto; margin-right:auto;
  background:var(--accent); border-color:var(--accent); box-shadow:var(--shadow-1);
}
.card.card--center .ic svg{width:24px; height:24px; stroke:var(--text-invert)}
.card.card--center h3{font-weight:700}

/* ---------- soluções ---------- */
.solutions{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-4)}
.card{
  position:relative; overflow:hidden;
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-4);
  padding:var(--s-6); box-shadow:var(--shadow-1);
  transition:transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
             box-shadow var(--dur-2) var(--ease);
}
.card::before{
  content:''; position:absolute; left:0; top:0; height:3px; width:100%;
  background:var(--vc, var(--accent)); opacity:.9;
  transform:scaleX(.18); transform-origin:left; transition:transform var(--dur-3) var(--ease);
}
.card:hover{transform:translateY(-5px); border-color:var(--line-strong); box-shadow:var(--shadow-3)}
.card:hover::before{transform:scaleX(1)}
.card .ic{transition:transform var(--dur-3) var(--ease), background var(--dur-2) var(--ease)}
.card:hover .ic{transform:translateY(-3px) rotate(-5deg)}

.card .ic{
  width:46px; height:46px; border-radius:var(--r-3);
  display:grid; place-items:center; margin-bottom:var(--s-5);
  background:color-mix(in oklab, var(--vc, var(--accent)) 12%, transparent);
  border:1px solid color-mix(in oklab, var(--vc, var(--accent)) 30%, transparent);
}
.card .ic svg{width:22px; height:22px; stroke:var(--vc, var(--accent)); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.card h3{font-size:var(--fs-h3); font-weight:600; margin-bottom:var(--s-3)}
.card p{color:var(--text-mute); font-size:var(--fs-small); line-height:1.6}
.card .kpi{
  display:inline-block; margin-top:var(--s-4);
  font:500 11px/1 var(--f-mono); letter-spacing:.09em; text-transform:uppercase;
  color:var(--vc, var(--accent));
  border:1px solid color-mix(in oklab, var(--vc, var(--accent)) 34%, transparent);
  border-radius:var(--r-1); padding:6px 9px;
}

/* ---------- segmentos (navegação vertical + painel) ---------- */
.segments{
  display:grid; grid-template-columns:154px minmax(0,1fr);
  gap:clamp(24px,3vw,44px); min-width:0;
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-6);
  padding:clamp(24px,3.2vw,48px); box-shadow:var(--shadow-1);
}

.seg-nav{
  position:relative; min-width:0;
  display:grid; gap:10px; align-content:start;
  padding-right:clamp(16px,2vw,26px);
}
/* trilha vertical que separa a navegação do painel */
.seg-nav::before{
  content:''; position:absolute; right:0; top:4px; bottom:4px;
  width:2px; border-radius:1px; background:var(--line);
}
.seg-tab{
  position:relative; cursor:pointer; text-align:center;
  display:grid; align-content:center; min-height:76px; padding:15px 12px;
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--r-3);
  color:var(--text-mute); font:600 13px/1.3 var(--f-display); letter-spacing:-.01em;
  transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
             color var(--dur-1) var(--ease), transform var(--dur-2) var(--ease),
             box-shadow var(--dur-2) var(--ease);
}
.seg-tab:hover{border-color:var(--accent); color:var(--text); transform:translateX(2px)}
.seg-tab[aria-selected="true"]{
  background:var(--accent); border-color:var(--accent); color:var(--text-invert);
  box-shadow:var(--shadow-2); transform:none;
}
.seg-tab[aria-selected="true"]::after{
  content:''; position:absolute; top:2px; bottom:2px;
  right:calc(-1 * clamp(16px,2vw,26px)); width:3px; border-radius:2px; background:var(--accent);
}

.seg-stage{min-width:0}
.seg-panel{
  display:none;
  /* declarado aqui, e não em :root, porque o var() interno precisa enxergar
     o --vc da vertical — que só existe a partir deste escopo */
  --bg-gradient-seg:
    radial-gradient(120% 100% at 18% 0%,
      color-mix(in oklab, var(--vc, var(--accent)) 74%, var(--bg-elev)) 0%,
      var(--vc, var(--accent)) 52%,
      color-mix(in oklab, var(--vc, var(--accent)) 80%, var(--text)) 100%);
}
.seg-panel.is-on{
  display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:var(--s-5) clamp(26px,3.2vw,52px); align-items:start;
  animation:panel-in var(--dur-3) var(--ease) both;
}
.seg-panel h3{
  grid-column:1/-1; font-size:clamp(22px,2.4vw,30px); font-weight:700;
  color:var(--vc, var(--accent));
}

/* composição: mockup do sistema sobre a banhada de cor da vertical */
.seg-shot{
  position:relative; margin:0; overflow:hidden;
  aspect-ratio:5/5.4; border-radius:var(--r-5);
  background-color:var(--vc, var(--accent)); background-image:var(--bg-gradient-seg);
  box-shadow:var(--shadow-2);
}
.seg-shot::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:var(--bg-dotgrid); background-size:22px 22px; opacity:.5;
  -webkit-mask-image:radial-gradient(80% 70% at 85% 15%, #000 0%, transparent 78%);
  mask-image:radial-gradient(80% 70% at 85% 15%, #000 0%, transparent 78%);
}
.seg-ui{
  position:absolute; left:5%; top:8%; width:74%;
  border-radius:var(--r-3); box-shadow:var(--shadow-3);
}
.seg-person{
  position:absolute; right:-6%; bottom:0; width:58%; z-index:2;
  filter:drop-shadow(0 18px 30px rgba(20,22,26,.3));
  transition:transform var(--dur-3) var(--ease);
}
.seg-shot:hover .seg-person{transform:translateY(-8px)}

.seg-body{min-width:0}
.seg-lead{font-size:clamp(16px,1.5vw,19px); line-height:1.5; margin-bottom:var(--s-4)}
.seg-text{font-size:var(--fs-small); line-height:1.65; color:var(--text-mute); margin-bottom:var(--s-5)}

.seg-mods{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px var(--s-4)}
.seg-mods li{
  position:relative; padding-left:15px;
  font-size:13.5px; line-height:1.4; color:var(--text-mute);
}
.seg-mods li::before{
  content:''; position:absolute; left:0; top:7px;
  width:5px; height:5px; border-radius:50%; background:var(--vc, var(--accent));
}

.seg-metrics{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-4);
  margin-top:var(--s-6); padding-top:var(--s-5); border-top:1px solid var(--line);
}
.seg-metric .ic{
  width:40px; height:40px; border-radius:50%; margin-bottom:11px;
  display:grid; place-items:center; background:var(--vc, var(--accent));
}
.seg-metric .ic svg{width:19px; height:19px; stroke:#FFFFFF; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.seg-metric b{display:block; font:700 clamp(15px,1.5vw,18px)/1.2 var(--f-display); letter-spacing:-.02em; margin-bottom:3px}
.seg-metric span{display:block; font-size:12.5px; line-height:1.4; color:var(--text-mute)}

.seg-body .btn-link{margin-top:var(--s-5)}

/* a troca de aba reexibe o painel (display none → grid), o que reinicia estas
   animações — cada item entra em cascata, sem JS extra */
@keyframes fade-up{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.seg-panel.is-on .seg-mods li{animation:fade-up .5s var(--ease) both; animation-delay:calc(var(--i, 0) * 35ms + 120ms)}
.seg-panel.is-on .seg-metric{animation:fade-up .55s var(--ease) both; animation-delay:calc(var(--i, 0) * 80ms + 260ms)}
.seg-panel.is-on .seg-shot{animation:fade-up .6s var(--ease) both}
.seg-mods li:nth-child(1),.seg-metric:nth-child(1){--i:0}
.seg-mods li:nth-child(2),.seg-metric:nth-child(2){--i:1}
.seg-mods li:nth-child(3),.seg-metric:nth-child(3){--i:2}
.seg-mods li:nth-child(4){--i:3}
.seg-mods li:nth-child(5){--i:4}
.seg-mods li:nth-child(6){--i:5}
.seg-mods li:nth-child(7){--i:6}
.seg-mods li:nth-child(8){--i:7}
.seg-mods li:nth-child(9){--i:8}

/* ---------- plataforma (abas + mídia) ---------- */
.platform-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,4vw,64px); align-items:center}
.chips{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:var(--s-6)}
.chip{
  background:var(--bg-elev); color:var(--text-mute);
  border:1px solid var(--line-strong); border-radius:var(--r-pill);
  font:500 13.5px/1 var(--f-body); padding:11px 17px; cursor:pointer;
  transition:all var(--dur-1) var(--ease);
}
.chip:hover{border-color:var(--accent); color:var(--text)}
.chip[aria-selected="true"]{background:var(--accent); border-color:var(--accent); color:var(--text-invert); font-weight:600}

.panel{display:none}
.panel.is-on{display:block; animation:panel-in var(--dur-3) var(--ease) both}
@keyframes panel-in{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.panel h3{font-size:clamp(21px,2.2vw,27px); margin-bottom:var(--s-3)}
.panel p{color:var(--text-mute); margin-bottom:var(--s-5)}

.steps{display:grid; gap:var(--s-3); margin-bottom:var(--s-6)}
.steps li{
  display:flex; gap:var(--s-4); align-items:flex-start;
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--r-3);
  padding:var(--s-4) var(--s-5);
  transition:border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease),
             box-shadow var(--dur-2) var(--ease);
}
.steps li:hover{border-color:var(--line-strong); transform:translateX(4px); box-shadow:var(--shadow-2)}
.steps li b{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent);
  display:grid; place-items:center; font:600 12px/1 var(--f-mono);
}
.steps li span{font-size:var(--fs-small); color:var(--text-mute)}
.steps li span strong{display:block; color:var(--text); font-weight:600; font-size:15px; margin-bottom:2px}

/* ---------- números + depoimento ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-4); margin-bottom:var(--s-8)}
.stat{
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-4);
  padding:var(--s-6) var(--s-5); box-shadow:var(--shadow-1);
}
.stat b{
  display:block; font-family:var(--f-display); font-weight:800;
  font-size:var(--fs-number); line-height:1; letter-spacing:-.04em;
  color:var(--text); margin-bottom:var(--s-3);
}
.stat b i{font-style:normal; color:var(--accent)}
.stat span{display:block; font-size:var(--fs-small); color:var(--text-mute); line-height:1.5}

.quote-grid{display:grid; grid-template-columns:1.35fr .65fr; gap:var(--s-4)}
.quote{
  position:relative; overflow:hidden;
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-5);
  padding:clamp(28px,3.4vw,48px); box-shadow:var(--shadow-1);
}
.quote::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 100% at 100% 0%, color-mix(in oklab, var(--accent) 9%, transparent), transparent 62%);
}
.quote > *{position:relative}
.quote p{font-family:var(--f-body); font-size:clamp(17px,1.9vw,22px); line-height:1.5; margin-bottom:var(--s-6)}
.quote-author{display:flex; align-items:center; gap:var(--s-4)}
.quote-author img{width:52px; height:52px; border-radius:50%; border:1px solid var(--line-strong); flex:0 0 auto}
.quote-author b{display:block; font:600 15px/1.3 var(--f-body)}
.quote-author span{font:400 12.5px/1.4 var(--f-mono); color:var(--text-mute)}

.quote-side{display:grid; gap:var(--s-4); align-content:start}
.mini{
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-4);
  padding:var(--s-5); border-left:3px solid var(--vc, var(--accent));
  box-shadow:var(--shadow-1);
}
.mini b{display:block; font:800 26px/1 var(--f-display); color:var(--text); margin-bottom:6px}
.mini span{font-size:12.8px; color:var(--text-mute)}

/* ---------- vozes: um depoimento por vez, centralizado ---------- */
.voices{text-align:center}
.voices-mark{display:block; width:46px; height:46px; margin:0 auto var(--s-5); color:var(--accent)}
.voices-mark svg{width:100%; height:100%; fill:currentColor}
.voices-title{max-width:24ch; margin:0 auto var(--s-8)}

.voices-carousel{position:relative; padding-inline:clamp(0px, 9vw, 96px)}
.voices-stage{display:grid; min-width:0}
.voice{
  grid-area:1/1; opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}
.voice.is-on{opacity:1; visibility:visible; transform:none}
.voice blockquote{
  margin:0 auto; max-width:62ch;
  font-size:clamp(16px, 1.85vw, 21px); line-height:1.6; color:var(--text-mute);
}
.voice-author{
  display:inline-flex; align-items:center; gap:var(--s-4);
  margin-top:var(--s-7); text-align:left;
}
.voice-author img{
  width:62px; height:62px; border-radius:50%; flex:0 0 auto;
  border:1px solid var(--line-strong);
}
.voice-author b{display:block; font:600 15.5px/1.3 var(--f-body); color:var(--text)}
.voice-author span{font:400 12.5px/1.4 var(--f-mono); color:var(--text-mute)}

.voices-nav{display:flex; align-items:center; justify-content:center; gap:var(--s-4); margin-top:var(--s-7)}
.voices-arrow{
  position:absolute; top:44%; transform:translateY(-50%);
  width:52px; height:52px; padding:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center;
  background:var(--bg-card); border:1px solid var(--line); color:var(--accent);
  box-shadow:var(--shadow-1);
  transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
             box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.voices-arrow:hover{background:var(--accent-soft); border-color:var(--accent); box-shadow:var(--shadow-2)}
.voices-arrow svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.voices-prev{left:0}
.voices-prev:hover{transform:translateY(-50%) translateX(-3px)}
.voices-next{right:0}
.voices-next:hover{transform:translateY(-50%) translateX(3px)}

.voices-dots{display:flex; align-items:center; gap:2px}
.voices-dot{
  width:22px; height:22px; padding:0; border:0; background:none; cursor:pointer;
  display:grid; place-items:center; border-radius:50%;
}
.voices-dot::before{
  content:''; width:9px; height:9px; border-radius:50%; background:var(--line-strong);
  transition:background var(--dur-1) var(--ease), transform var(--dur-2) var(--ease);
}
.voices-dot:hover::before{background:var(--text-mute)}
.voices-dot[aria-current="true"]::before{background:var(--accent); transform:scale(1.34)}

/* ---------- planos ---------- */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-4); align-items:start}
.plan{
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-5);
  padding:var(--s-6); display:flex; flex-direction:column; gap:var(--s-5);
  box-shadow:var(--shadow-1);
  transition:transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
             box-shadow var(--dur-2) var(--ease);
}
.plan:hover{transform:translateY(-4px); border-color:var(--line-strong); box-shadow:var(--shadow-2)}
.plan-featured{
  border-color:var(--accent); box-shadow:var(--glow-accent);
  background-image:var(--bg-gradient-cta);
}
.plan-featured:hover{border-color:var(--accent); box-shadow:var(--glow-accent)}
.plan .ribbon{
  align-self:flex-start; font:600 10.5px/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase;
  background:var(--accent); color:var(--text-invert); padding:7px 11px; border-radius:var(--r-1);
}
.plan h3{font-size:var(--fs-h3); font-weight:600}
.plan .price{
  font-family:var(--f-display); font-weight:800; letter-spacing:-.04em;
  font-size:var(--fs-number); line-height:1;
}
.plan .price small{display:block; font:400 12.5px/1.4 var(--f-mono); color:var(--text-mute); letter-spacing:0; margin-top:8px}
.plan .desc{font-size:var(--fs-small); color:var(--text-mute)}
.plan ul{display:grid; gap:11px}
.plan li{display:flex; gap:10px; font-size:var(--fs-small); color:var(--text-mute); line-height:1.5}
.plan li svg{width:16px; height:16px; flex:0 0 auto; margin-top:3px; stroke:var(--accent); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.plan .btn{margin-top:auto}

/* ---------- contato: 2 formulários ---------- */
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:var(--s-4); align-items:start}
.formbox{
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-5);
  padding:clamp(24px,3vw,40px); box-shadow:var(--shadow-1);
}
.formbox.is-featured{
  position:relative; overflow:hidden;
  border-color:var(--accent); box-shadow:var(--glow-accent);
  background-image:var(--bg-gradient-cta);
}
.formbox.is-featured > *{position:relative}
.formbox h3{font-size:clamp(20px,2.2vw,26px); margin-bottom:var(--s-2)}
.formbox .sub{font-size:var(--fs-small); color:var(--text-mute); margin-bottom:var(--s-6)}

.field{display:grid; gap:7px; margin-bottom:var(--s-4)}
.field label{font:600 12.5px/1.2 var(--f-body); color:var(--text)}
.two{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3)}
.inp{
  width:100%; font:400 15px/1.4 var(--f-body); color:var(--text);
  background:var(--bg-elev); border:1px solid var(--line-strong);
  border-radius:var(--r-2); padding:13px 15px;
  transition:border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.inp::placeholder{color:var(--text-mute); opacity:.75}
.inp:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
select.inp{
  appearance:none; padding-right:38px;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-mute) 50%),linear-gradient(135deg,var(--text-mute) 50%,transparent 50%);
  background-position:calc(100% - 21px) 22px, calc(100% - 15px) 22px;
  background-size:6px 6px; background-repeat:no-repeat;
}
textarea.inp{min-height:118px; resize:vertical}
.check{display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--text-mute); margin-bottom:var(--s-5)}
.check input{margin-top:3px; accent-color:var(--accent)}
.form-note{margin-top:var(--s-4); text-align:center}

.form-status{
  display:none; align-items:flex-start; gap:11px; margin-top:var(--s-4);
  padding:13px 15px; border-radius:var(--r-2); font-size:13.5px;
  background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--text);
}
.form-status.is-on{display:flex}

.contact-aside{display:grid; gap:var(--s-4)}
.contact-line{
  display:flex; gap:var(--s-4); align-items:flex-start;
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-3);
  padding:var(--s-5); box-shadow:var(--shadow-1);
}
.contact-line svg{width:20px; height:20px; flex:0 0 auto; margin-top:2px; stroke:var(--accent); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.contact-line b{display:block; font:600 14.5px/1.3 var(--f-body); margin-bottom:3px}
.contact-line span{font-size:13px; color:var(--text-mute)}

/* ---------- footer: zona escura da identidade ---------- */
.site-footer{
  /* zona invertida — os tokens são redefinidos no escopo, não reescritos por regra */
  --text:#FFFFFF;
  --text-mute:rgba(255,255,255,.62);
  --text-invert:#060A16;
  --line:rgba(255,255,255,.14);
  --line-strong:rgba(255,255,255,.3);
  --bg-elev:rgba(255,255,255,.06);
  --accent:var(--accent-on-dark);
  --accent-deep:var(--accent-on-dark-lift);
  --accent-soft:color-mix(in oklab, var(--accent-on-dark) 18%, transparent);
  --accent-line:color-mix(in oklab, var(--accent-on-dark) 44%, transparent);
  background:var(--bg-footer); color:var(--text);
  padding:var(--s-9) 0 var(--s-6);
}
.site-footer :focus-visible{outline-color:#FFFFFF}
.footer-grid{display:grid; grid-template-columns:1.3fr .8fr .8fr 1.4fr; gap:var(--s-7) var(--s-5)}
.site-footer h4{font:600 12px/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--text-mute); margin-bottom:var(--s-4); font-family:var(--f-mono)}
.site-footer nav{display:grid; gap:11px}
.site-footer nav a{font-size:14px; color:var(--text-mute); transition:color var(--dur-1) var(--ease)}
.site-footer nav a:hover{color:var(--accent)}
.site-footer .brand svg{color:var(--accent)}
.footer-about p{font-size:13.5px; color:var(--text-mute); margin-top:var(--s-4); max-width:34ch}

.newsletter .two{gap:10px; margin-bottom:var(--s-3)}
.newsletter .inp{padding:11px 13px; font-size:14px}
.newsletter .btn{padding:12px 20px; font-size:14px}

.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:var(--s-4); flex-wrap:wrap;
  margin-top:var(--s-8); padding-top:var(--s-5); border-top:1px solid var(--line);
}
.footer-bottom .note a{color:var(--accent)}

/* ---------- faixa de convite: cartão de marca na largura do conteúdo ---------- */
.cta-band-sec{padding:0 0 clamp(56px, 7vw, 96px)}
.cta-band{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; gap:clamp(20px, 2.6vw, 44px);
  border-radius:var(--r-6); padding:clamp(26px, 3.2vw, 44px) clamp(24px, 3.2vw, 52px);
  background-color:var(--bg-band); background-image:var(--bg-gradient-band);
  box-shadow:var(--shadow-3); color:var(--text-invert);
}
/* anéis concêntricos: a mesma ideia de textura da capa, com outra geometria */
.cta-band::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:var(--bg-rings);
  -webkit-mask-image:linear-gradient(96deg, #000 0%, transparent 58%);
  mask-image:linear-gradient(96deg, #000 0%, transparent 58%);
}
.cta-band > *{position:relative}
.cta-band :focus-visible{outline-color:var(--text-invert)}

.cta-band-mark{
  width:66px; height:66px; flex:0 0 auto; display:grid; place-items:center;
  border-radius:var(--r-3); background:var(--bg-elev); color:var(--accent);
  box-shadow:var(--shadow-2);
}
.cta-band-mark svg{width:36px; height:36px}
.cta-band-title{
  font-size:clamp(21px, 2.2vw, 29px); font-weight:700; line-height:1.2;
  color:var(--text-invert); margin-right:auto; max-width:24ch;
}
/* sobre o marinho da faixa, a hierarquia do botão inverte — mesma regra da capa */
.cta-band .btn-primary{background:var(--bg-elev); color:var(--accent-deep); flex:0 0 auto}
.cta-band .btn-primary:hover{background:var(--accent-soft); color:var(--accent-deep); box-shadow:var(--shadow-3)}

/* ---------- casos: coluna editorial fixa + trilha de cartões ---------- */
.casos-grid{
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,2.14fr);
  gap:clamp(28px, 3.6vw, 60px); align-items:start;
}
.casos-aside{position:sticky; top:calc(var(--header-h) + var(--s-6))}
.casos-title{font-size:var(--fs-h2); margin-bottom:var(--s-4); max-width:15ch}
.casos-aside .sec-lead{max-width:32ch; margin-bottom:var(--s-6)}

.casos-nav{display:flex; align-items:center; gap:var(--s-3); margin-top:var(--s-7)}
.casos-arrow{
  width:48px; height:48px; padding:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center;
  background:var(--bg-card); border:1px solid var(--line); color:var(--accent);
  box-shadow:var(--shadow-1);
  transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
             box-shadow var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease),
             transform var(--dur-2) var(--ease);
}
.casos-arrow svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.casos-arrow:hover{background:var(--accent-soft); border-color:var(--accent); box-shadow:var(--shadow-2)}
#casosPrev:hover{transform:translateX(-3px)}
#casosNext:hover{transform:translateX(3px)}
.casos-arrow[disabled]{opacity:.36; cursor:default; box-shadow:none}
.casos-arrow[disabled]:hover{background:var(--bg-card); border-color:var(--line); transform:none}

/* a trilha rola só dentro do próprio contêiner — a página nunca rola na horizontal */
.casos-track{
  display:flex; gap:var(--s-4); min-width:0;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
  padding-bottom:var(--s-2);
}
.casos-track::-webkit-scrollbar{display:none}

.caso{
  flex:0 0 calc((100% - var(--s-4)) / 2); scroll-snap-align:start;
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-4);
  box-shadow:var(--shadow-1);
  transition:transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
             box-shadow var(--dur-2) var(--ease);
}
.caso:hover{transform:translateY(-5px); border-color:var(--line-strong); box-shadow:var(--shadow-3)}
.caso-shot{margin:0; overflow:hidden; background:var(--bg-inset)}
.caso-shot img{width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform var(--dur-3) var(--ease)}
.caso:hover .caso-shot img{transform:scale(1.04)}

.caso-body{display:flex; flex-direction:column; gap:var(--s-3); padding:var(--s-5) var(--s-5) var(--s-6)}
.caso-tags{display:flex; flex-wrap:wrap; gap:8px}
.caso-tags li{
  font:500 11.5px/1 var(--f-mono); letter-spacing:.03em; color:var(--accent);
  background:var(--accent-soft); border-radius:var(--r-pill); padding:7px 11px;
}
.caso h3{font-size:var(--fs-h3); font-weight:700; line-height:1.26}
.caso p{
  font-size:var(--fs-small); line-height:1.62; color:var(--text-mute);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* filete de marca fechando a seção */
.casos-rule{
  margin:clamp(32px, 4vw, 56px) 0 0; border:0; height:2px; border-radius:1px;
  background:var(--accent); opacity:.9;
}

/* ============================================================
   DESKTOP — 1024px+
   ============================================================ */
@media (min-width:1024px){
  /* com o item de Casos, o menu inteiro precisa caber junto do botão de ação */
  .mainnav{gap:clamp(14px, 1.4vw, 24px)}
}

/* ---------- reveal ao rolar ---------- */
html.js .rv{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
html.js .rv-media{transform:translateY(22px) scale(.975); transition-duration:.9s}
html.js .rv.is-in{opacity:1; transform:none}
.rv-d1{transition-delay:.08s} .rv-d2{transition-delay:.16s} .rv-d3{transition-delay:.24s}

/* ---------- animações guiadas pela rolagem (progressivo: só onde o navegador suporta) ---------- */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){
    /* a moldura do hero desce um pouco mais devagar que a página */
    .hero .media-frame{animation:hero-drift linear both; animation-timeline:scroll(root); animation-range:0 100vh}
    @keyframes hero-drift{to{transform:translateY(56px)}}
    /* anéis da faixa de convite se assentam conforme ela entra na tela */
    .cta-band::before{animation:rings-settle linear both; animation-timeline:view(); animation-range:entry 0% cover 55%}
    @keyframes rings-settle{from{transform:scale(1.14) translateX(-2%)} to{transform:none}}
    /* filete de fecho dos casos desenha da esquerda pra direita */
    .casos-rule{animation:rule-draw linear both; animation-timeline:view(); animation-range:entry 0% entry 100%; transform-origin:left}
    @keyframes rule-draw{from{transform:scaleX(0)} to{transform:scaleX(1)}}
  }
}

/* ============================================================
   TABLET — 768px a 1023px
   ============================================================ */
@media (min-width:768px) and (max-width:1023px){
  /* nesta faixa o menu completo e o botão não cabem lado a lado:
     os links continuam visíveis, o CTA vive nas próprias seções */
  .mainnav{gap:var(--s-4)}
  .mainnav a{font-size:13.5px}
  .header-cta{display:none}
  .header-cta-sm{display:inline-flex}

  .solutions{grid-template-columns:repeat(2,1fr)}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}

  .produto-title{max-width:100%}
  .produto-float{bottom:14%; min-width:0}
  .produto-equipe{width:42%; right:4%}
  .plans{grid-template-columns:1fr; max-width:620px; margin:0 auto}
  .hero-grid{grid-template-columns:1fr; gap:var(--s-8)}
  .hero h1{max-width:18ch}
  .hero-media{max-width:620px}
  .platform-grid{grid-template-columns:1fr; gap:var(--s-7)}
  .quote-grid{grid-template-columns:1fr}
  .quote-side{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}

  .pillar{flex-basis:calc((100% - var(--s-4)) / 2)}
  .pillars-title{max-width:100%}

  /* faixa de convite e casos: a coluna editorial passa para cima dos cartões */
  .cta-band-title{max-width:100%}
  .casos-grid{grid-template-columns:1fr; gap:var(--s-7)}
  .casos-aside{position:static}
  .casos-title{max-width:22ch}
  .casos-aside .sec-lead{max-width:60ch}
  .casos-nav{margin-top:var(--s-5)}

  .segments{grid-template-columns:132px minmax(0,1fr)}
  .seg-tab{min-height:66px; font-size:12.5px}
  .seg-panel.is-on{grid-template-columns:1fr}
  .seg-shot{max-width:460px; aspect-ratio:5/4.6}
  .seg-ui{width:74%; left:6%; top:12%}
  .seg-person{width:50%; right:-2%}
}

/* ============================================================
   MOBILE — até 767px
   ============================================================ */
@media (max-width:767px){
  :root{--header-h:64px}

  .site-header .wrap{gap:var(--s-3)}
  .mainnav,.header-cta{display:none}
  .header-cta-sm{display:inline-flex}
  .nav-toggle{display:inline-flex}
  .nav-drawer{display:flex}

  .hero{padding:var(--s-7) 0 var(--s-8); border-radius:0 0 var(--r-4) var(--r-4)}
  .hero .watermark{width:70%; right:-16%; bottom:-14%}
  .hero-grid{grid-template-columns:1fr; gap:var(--s-7)}
  .hero h1{max-width:100%}
  .hero-lead{max-width:100%}
  .hero-actions .btn{width:100%}
  /* três métricas lado a lado, sem item órfão */
  .hero-meta{grid-template-columns:repeat(3,1fr); gap:var(--s-3); margin-top:var(--s-6)}
  .hero-meta div b{font-size:clamp(17px, 4.8vw, 20px)}
  .hero-meta div > span{font-size:11px}
  .hero-badge-more{display:none}
  .hero-tag{left:10px; top:12px; padding:9px 12px}
  .hero-media .btn-round{right:10px; bottom:-20px; width:52px; height:52px}
  .media-frame.is-cut{border-radius:6px 24px 6px 24px}

  .marquee-track img{height:40px; margin:0 var(--s-5)}

  .pillars-panel{border-radius:var(--r-4)}
  .pillars-head{flex-direction:column; align-items:flex-start; gap:var(--s-4)}
  .pillars-title{max-width:100%}
  .pillars-dots{padding-bottom:0}
  /* a trilha vai até a borda do painel: o cartão seguinte espia de verdade */
  .pillars-track{margin-inline:calc(-1 * var(--pp)); padding-inline:var(--pp); scroll-padding-inline:var(--pp)}
  .pillar{flex-basis:84%}
  .pillar:hover{transform:none}

  .solutions,.stats,.plans,.feature-grid{grid-template-columns:1fr}

  /* recursos: cartão compacto com ícone à esquerda — metade da altura do centralizado */
  .feature-grid{gap:var(--s-3)}
  .card.card--center{
    text-align:left; display:grid; grid-template-columns:44px minmax(0,1fr);
    column-gap:var(--s-4); row-gap:4px; padding:var(--s-5);
  }
  .card.card--center .ic{width:44px; height:44px; margin:0; grid-row:1/3}
  .card.card--center .ic svg{width:20px; height:20px}
  .card.card--center h3{grid-column:2; margin:0; font-size:17px; align-self:center}
  .card.card--center p{grid-column:2}
  .card.card--center::before{transform-origin:left; transform:scaleX(.18)}

  /* produto: a moldura vira largura cheia e o cartão flutuante encolhe */
  .produto-mark{width:54px; height:54px}
  .produto-title{max-width:100%; margin-bottom:var(--s-3)}
  .produto-frame{border-radius:var(--r-4)}
  .produto-float{
    bottom:24%; padding:var(--s-3) var(--s-4); gap:var(--s-2); min-width:0;
    border-radius:var(--r-2);
  }
  .produto-float b{font-size:17px}
  .produto-equipe{width:46%; right:3%}
  .feature-grid{margin-top:calc(-1 * var(--s-5))}

  /* depoimentos: as setas saem das bordas e entram na linha de navegação */
  .voices-title{max-width:100%}
  .voices-carousel{padding-inline:0}
  .voices-arrow{position:static; transform:none; width:48px; height:48px}
  .voices-arrow:hover{transform:none}
  .voice-author{gap:var(--s-3); margin-top:var(--s-6)}
  .voice-author img{width:54px; height:54px}
  .platform-grid,.quote-grid,.contact-grid{grid-template-columns:1fr}
  .quote-side{gap:var(--s-3)}
  .two{grid-template-columns:1fr}

  /* rodapé: as duas listas de links lado a lado, sobre e boletim em largura cheia */
  .footer-grid{grid-template-columns:1fr 1fr; gap:var(--s-6) var(--s-4)}
  .footer-about,.newsletter{grid-column:1/-1}
  .footer-bottom{flex-direction:column; align-items:flex-start}

  /* faixa de convite: empilha marca, chamada e botão */
  .cta-band{
    flex-direction:column; align-items:flex-start; gap:var(--s-5);
    border-radius:var(--r-4); padding:var(--s-6) var(--s-5);
  }
  .cta-band-mark{width:56px; height:56px}
  .cta-band-mark svg{width:30px; height:30px}
  .cta-band-title{max-width:100%; margin-right:0}
  .cta-band .btn-primary{width:100%}

  /* casos: um cartão por vez na trilha, coluna editorial acima */
  .casos-grid{grid-template-columns:1fr; gap:var(--s-6)}
  .casos-aside{position:static}
  .casos-title{max-width:100%}
  .casos-aside .sec-lead{max-width:100%}
  .casos-nav{margin-top:var(--s-5)}
  .casos-track{
    --wp:clamp(18px, 4vw, 40px);
    margin-inline:calc(-1 * var(--wp)); padding-inline:var(--wp); scroll-padding-inline:var(--wp);
  }
  .caso{flex-basis:84%}
  .caso:hover{transform:none}

  /* segmentos: a trilha vertical vira uma faixa rolável só dentro do próprio contêiner */
  .segments{grid-template-columns:1fr; gap:var(--s-5); padding:var(--s-5); border-radius:var(--r-4)}
  .seg-nav{
    display:flex; gap:8px; min-width:0; overflow-x:auto; overscroll-behavior-x:contain;
    padding:0 0 var(--s-4); scroll-snap-type:x proximity;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg, #000 86%, transparent);
    mask-image:linear-gradient(90deg, #000 86%, transparent);
  }
  .seg-nav::-webkit-scrollbar{display:none}
  .seg-nav::before{top:auto; bottom:0; left:0; right:0; width:auto; height:2px}
  .seg-tab{
    flex:0 0 auto; min-height:0; padding:11px 16px;
    font-size:13px; scroll-snap-align:start;
  }
  .seg-tab:hover{transform:none}
  .seg-tab[aria-selected="true"]::after{display:none}
  .seg-panel.is-on{grid-template-columns:1fr}
  .seg-shot{aspect-ratio:5/4.8}
  .seg-ui{width:76%; left:6%; top:11%}
  .seg-person{width:54%; right:-4%}
  .seg-mods{grid-template-columns:1fr 1fr; gap:9px var(--s-3)}
  /* métricas em linha: ícone à esquerda, número e legenda à direita */
  .seg-metrics{grid-template-columns:1fr; gap:var(--s-4)}
  .seg-metric{display:grid; grid-template-columns:40px minmax(0,1fr); column-gap:var(--s-3); align-items:center}
  .seg-metric .ic{margin:0; grid-row:1/3}
  .seg-metric b,.seg-metric span{grid-column:2}
  .seg-metric b{margin-bottom:1px}

  .sec-title{max-width:100%}
}

/* ============================================================
   Movimento reduzido
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  html.js .rv,html.js .rv-media{opacity:1; transform:none}
  .marquee-track{animation:none; transform:none}
  .hero .watermark{animation:none}
  .produto-float{animation:none}
  .hero-tag{animation:none}
  .hero-badge i{animation:none}
  .hero-media .btn-round svg{animation:none}
  .seg-panel.is-on .seg-mods li,.seg-panel.is-on .seg-metric,.seg-panel.is-on .seg-shot{animation:none}
  .nav-drawer-links a,.nav-drawer-foot{opacity:1; transform:none; transition:none}
  .pillars-track{scroll-behavior:auto}
  .casos-track{scroll-behavior:auto}
  .caso:hover .caso-shot img{transform:none}
}