/* ==========================================================================
   MOBIOH SISTEMAS — Design System + Home
   Autor: front-end estático (HTML/CSS/JS puro)
   Sumário:
   01. Tokens
   02. Reset & base
   03. Tipografia
   04. Utilitários (container, section, eyebrow, ticks, link)
   05. Botões & ícones
   06. Header / Navegação
   07. Hero + diagrama
   08. Marquee de plataformas
   09. Sobre Nós (stats, MVV, time)
   10. Integrações (steps, split/código, benefícios)
   11. Produtos (tabs, cards)
   12. Diferenciais (bloco escuro)
   13. Cases (resultados, slider, segmentos)
   14. Recursos (cards, FAQ/accordion)
   15. CTA
   16. Contato (form, canais)
   17. Rodapé
   18. Flutuantes (to-top, cookies)
   19. Animações de entrada
   20. Responsivo
   ========================================================================== */

/* ─────────────────────────────── 01. TOKENS ─────────────────────────────── */
:root{
  /* ── Marca (extraída dos arquivos oficiais de identidade visual) ──
     Navy #13294B e turquesa #69DBC8 são as cores do logotipo.
     Coral #DC583B é o destaque usado na comunicação da marca.        */
  --navy-950:#08121F;
  --navy-900:#0E1F3A;
  --navy-800:#13294B;   /* primária — cor do logotipo */
  --navy-700:#1D3760;
  --navy-600:#364966;   /* secundária — grafismos */
  --teal-600:#2FB79E;
  --teal-500:#4ACFB8;
  --teal-400:#69DBC8;   /* acento — grafismo do logotipo */
  --teal-300:#87E2D3;   /* acento claro — grafismos */
  --teal-100:#D8F5EF;
  --teal-50:#EFFBF8;
  --coral:#DC583B;      /* destaque pontual */

  /* Neutros */
  --ink:#13294B;
  --body:#5B6B84;
  --muted:#8593A8;
  --line:#E5E9EF;
  --line-strong:#D2DAE5;
  --bg:#F7F9FA;
  --surface:#FFFFFF;

  /* Tipografia — Poppins é a fonte oficial da marca */
  --font-display:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;

  /* Raios */
  --r-xs:8px;
  --r-sm:12px;
  --r:18px;
  --r-lg:26px;
  --r-xl:34px;
  --r-pill:999px;

  /* Sombras */
  --sh-xs:0 1px 2px rgba(19,41,75,.06);
  --sh-sm:0 4px 14px rgba(19,41,75,.06);
  --sh:0 12px 34px rgba(19,41,75,.08);
  --sh-lg:0 28px 70px rgba(19,41,75,.14);

  /* Layout */
  --container:1200px;
  --gutter:clamp(20px, 5vw, 40px);
  --section-y:clamp(72px, 9vw, 128px);

  /* Transição */
  --t:.35s cubic-bezier(.22,.61,.36,1);
  --t-fast:.2s ease;
}

/* ──────────────────────────── 02. RESET & BASE ──────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

img,svg{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer; background:none; border:0}
ul,ol{margin:0; padding:0; list-style:none}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
hr{border:0; border-top:1px solid var(--line)}

::selection{background:var(--navy-800); color:#fff}

:focus-visible{
  outline:2px solid var(--teal-500);
  outline-offset:3px;
  border-radius:4px;
}

.sprite{position:absolute; width:0; height:0; overflow:hidden}

.skip-link{
  position:fixed; top:-100px; left:16px; z-index:200;
  background:var(--navy-800); color:#fff;
  padding:12px 20px; border-radius:var(--r-xs); font-weight:600;
  transition:top var(--t-fast);
}
.skip-link:focus{top:16px}

/* ───────────────────────────── 03. TIPOGRAFIA ───────────────────────────── */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5{
  font-family:var(--font-display);
  color:var(--ink);
  font-weight:800;
  line-height:1.14;
  letter-spacing:-.02em;
  margin:0 0 .5em;
  text-wrap:balance;
}
.h1{font-size:clamp(2.4rem, 5vw, 3.9rem)}
h2,.h2{font-size:clamp(1.9rem, 3.6vw, 2.85rem)}
h3,.h3{font-size:clamp(1.45rem, 2.4vw, 1.95rem)}
h4,.h4{font-size:clamp(1.2rem, 1.8vw, 1.45rem)}
h5,.h5{font-size:1.11rem; font-weight:700; letter-spacing:-.01em}

strong{color:var(--ink); font-weight:600}
em{font-style:normal}

/* ──────────────────────────── 04. UTILITÁRIOS ───────────────────────────── */
.container{
  width:100%;
  max-width:calc(var(--container) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{padding-block:var(--section-y); position:relative}
.section--tint{background:linear-gradient(180deg, var(--teal-50), #fff 60%)}
.section--dark{
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(105,219,200,.16), transparent 60%),
    radial-gradient(700px 400px at 92% 110%, rgba(54,73,102,.55), transparent 60%),
    var(--navy-800);
  color:rgba(255,255,255,.76);
}
.section--dark h2,.section--dark h3,.section--dark .h2,.section--dark .h3,
.section--dark .h4,.section--dark .h5,.section--dark strong{color:#fff}

.section__head{max-width:760px; margin-bottom:clamp(40px,5vw,64px)}
.section__head--split{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,64px);
  align-items:end; max-width:none;
}
.section__title{margin-bottom:.35em}
.section__lead{font-size:clamp(1.02rem,1.3vw,1.15rem); max-width:62ch}
.section--dark .section__lead{color:rgba(255,255,255,.72)}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display);
  font-size:.79rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--navy-700);
  background:var(--teal-100);
  border:1px solid var(--teal-300);
  padding:7px 15px; border-radius:var(--r-pill);
  margin:0 0 18px;
}
.eyebrow--light{
  color:#fff;
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.2);
}

.link{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--navy-700); font-weight:600;
  border-bottom:1.5px solid var(--teal-300);
  padding-bottom:2px;
  transition:color var(--t-fast), border-color var(--t-fast), gap var(--t-fast);
}
.link:hover{color:var(--navy-800); border-color:var(--navy-700); gap:11px}

.ticks{display:grid; gap:11px; margin:22px 0 0}
.ticks--2{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:24px}
.ticks li{display:flex; align-items:flex-start; gap:11px; font-size:.97rem}
.ticks .icon{
  flex:0 0 auto; width:23px; height:23px; padding:5px; stroke-width:2.6;
  color:var(--navy-700); background:var(--teal-100);
  border-radius:50%; margin-top:1px;
}

/* ───────────────────────── 05. BOTÕES & ÍCONES ──────────────────────────── */
.icon{
  width:22px; height:22px; flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:1.75;
  stroke-linecap:round; stroke-linejoin:round;
}
.icon--sm{width:17px; height:17px}
.icon--xs{width:14px; height:14px; stroke-width:2}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-display); font-weight:700; font-size:.95rem;
  letter-spacing:-.01em;
  padding:13px 24px; border-radius:var(--r-pill);
  border:1.5px solid transparent;
  transition:transform var(--t-fast), background var(--t-fast),
             color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn .icon{transition:transform var(--t-fast)}
.btn:hover .icon{transform:translateX(3px)}

.btn--primary{background:var(--navy-800); color:#fff; box-shadow:0 8px 22px rgba(19,41,75,.24)}
.btn--primary:hover{background:var(--navy-700); box-shadow:0 12px 28px rgba(19,41,75,.3)}

.btn--ghost{background:transparent; color:var(--navy-800); border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--navy-800); background:var(--teal-50)}

.btn--light{background:#fff; color:var(--navy-800); box-shadow:0 8px 22px rgba(0,0,0,.14)}
.btn--light:hover{background:var(--teal-50)}

.btn--outline-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.35)}
.btn--outline-light:hover{border-color:#fff; background:rgba(255,255,255,.1)}

.btn--sm{padding:9px 17px; font-size:.87rem}
.btn--lg{padding:16px 30px; font-size:1rem}
.btn--block{width:100%}

/* ─────────────────────── 06. HEADER / NAVEGAÇÃO ─────────────────────────── */
.header{position:sticky; top:0; z-index:100}
.header__bar{
  background:rgba(250,247,248,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.header.is-stuck .header__bar{
  background:rgba(255,255,255,.92);
  border-bottom-color:var(--line);
  box-shadow:var(--sh-sm);
}
.header__inner{display:flex; align-items:center; gap:24px; height:78px}

/* Marca — arquivos oficiais do manual de identidade visual.
   Os SVGs têm margem de respiro embutida (a mancha ocupa ~34% da altura),
   por isso a altura declarada é maior do que a altura visual do logotipo. */
.brand{display:inline-flex; align-items:center; flex:0 0 auto}
.brand img{height:60px; width:auto; transition:opacity var(--t-fast)}
.brand:hover img{opacity:.82}
.brand--light img{height:76px}

/* Nav desktop */
.nav{display:flex; align-items:center; margin-left:auto}
.nav__list{display:flex; align-items:center; gap:2px}
.nav__item{position:relative}
.nav__link{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--font-display); font-weight:600; font-size:.92rem;
  color:var(--ink); padding:10px 13px; border-radius:var(--r-pill);
  white-space:nowrap;
  transition:color var(--t-fast), background var(--t-fast);
}
.nav__link:hover, .nav__item.is-active > .nav__link{color:var(--navy-800); background:var(--teal-100)}
.nav__item.has-sub > .nav__link .icon{transition:transform var(--t-fast); opacity:.6}
.nav__item.has-sub:hover > .nav__link .icon{transform:rotate(180deg)}
.nav__toggle{display:none}
.nav__close{display:none}
.nav__cta{display:none}

.nav__sub{
  position:absolute; top:calc(100% + 10px); left:0;
  min-width:255px;
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--sh);
  padding:8px;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
.nav__item.has-sub:hover .nav__sub,
.nav__item.has-sub:focus-within .nav__sub{opacity:1; visibility:visible; transform:translateY(0)}
.nav__sub::before{content:''; position:absolute; inset:-12px 0 100% 0}
.nav__sub a{
  display:block; padding:10px 14px; border-radius:var(--r-xs);
  font-size:.9rem; font-weight:500; color:var(--body);
  transition:background var(--t-fast), color var(--t-fast), padding-left var(--t-fast);
}
.nav__sub a:hover{background:var(--teal-50); color:var(--navy-800); padding-left:19px}

.header__actions{display:flex; align-items:center; gap:12px; flex:0 0 auto}
.burger{
  display:none; width:44px; height:44px; border-radius:var(--r-xs);
  align-items:center; justify-content:center;
  color:var(--navy-800); border:1px solid var(--line-strong); background:#fff;
}
.nav-overlay{
  position:fixed; inset:0; background:rgba(8,18,31,.5);
  backdrop-filter:blur(2px); z-index:98;
}

/* ────────────────────────── 07. HERO + DIAGRAMA ─────────────────────────── */
.hero{position:relative; padding-block:clamp(56px,7vw,104px) clamp(64px,8vw,112px); overflow:hidden}
.hero__bg{position:absolute; inset:0; pointer-events:none}
.blob{position:absolute; border-radius:50%; filter:blur(90px); opacity:.55}
.blob--1{width:620px; height:620px; top:-260px; left:-180px;
  background:radial-gradient(circle, var(--teal-300), transparent 68%)}
.blob--2{width:720px; height:720px; top:-160px; right:-280px;
  background:radial-gradient(circle, rgba(105,219,200,.2), transparent 66%)}
.grid-lines{
  position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px, transparent 1px),
                   linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 75%);
  opacity:.6;
}

.hero__inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,5vw,72px); align-items:center;
}
.hero__title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.05rem, 4.6vw, 3.75rem);
  line-height:1.08; letter-spacing:-.032em; color:var(--ink);
  margin-bottom:22px;
}
.hero__title .hl{position:relative; color:var(--navy-800); white-space:nowrap}
.hero__title .hl::after{
  content:''; position:absolute; left:0; right:0; bottom:.06em; height:.28em;
  background:var(--teal-300); border-radius:4px; z-index:-1;
}
.hero__title em{display:block; color:var(--coral)}
.hero__text{font-size:clamp(1.02rem,1.35vw,1.16rem); max-width:56ch; margin-bottom:32px}
.hero__actions{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:36px}
.hero__trust{display:flex; flex-wrap:wrap; gap:12px 26px; font-size:.9rem; font-weight:500}
.hero__trust li{display:inline-flex; align-items:center; gap:8px}
.hero__trust .icon{color:var(--navy-700)}

/* Diagrama */
.diagram{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(32px,1fr) auto minmax(22px,.7fr) auto;
  align-items:center; gap:0;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(6px);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-lg);
  padding:26px 22px;
}
.diagram__col{display:grid; gap:14px}
.diagram__col--right{justify-items:end}
.node{
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--line-strong);
  border-radius:var(--r-pill); box-shadow:var(--sh-xs);
  padding:10px 15px; font-size:.8rem; font-weight:600;
  font-family:var(--font-display); color:var(--ink);
  white-space:nowrap;
  animation:node-in .5s both;
}
.diagram__col--left .node:nth-child(1){animation-delay:.1s}
.diagram__col--left .node:nth-child(2){animation-delay:.2s}
.diagram__col--left .node:nth-child(3){animation-delay:.3s}
.diagram__col--left .node:nth-child(4){animation-delay:.4s}
@keyframes node-in{from{opacity:0; transform:translateX(-14px)} to{opacity:1; transform:none}}

.node--erp{
  flex-direction:column; gap:2px; align-items:flex-start;
  background:var(--navy-800); color:#fff; border-color:var(--navy-800);
  border-radius:var(--r); padding:15px 18px;
  box-shadow:0 14px 34px rgba(19,41,75,.3);
}
.node--erp strong{color:#fff; font-size:.98rem}
.node--erp small{color:var(--teal-300); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase}

.diagram__wires{height:230px; align-self:center; min-width:32px}
.diagram__wires svg{width:100%; height:100%; overflow:visible}
.diagram__wires path{
  fill:none; stroke:var(--teal-400); stroke-width:1.6;
  stroke-dasharray:5 7; opacity:.9;
  animation:flow 1.4s linear infinite;
}
.diagram__wires--out path{stroke:var(--navy-600); animation-direction:normal}
@keyframes flow{to{stroke-dashoffset:-24}}

.diagram__core{
  position:relative;
  display:grid; justify-items:center; gap:3px;
  background:linear-gradient(160deg, var(--teal-100), #fff);
  border:1px solid var(--teal-300);
  border-radius:var(--r-lg);
  padding:18px 15px;
  text-align:center;
  box-shadow:0 12px 30px rgba(105,219,200,.28);
  color:var(--navy-800);
}
.diagram__core strong{font-family:var(--font-display); font-size:.98rem; color:var(--navy-800)}
.diagram__core small{font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-600)}
.diagram__core .icon{color:var(--navy-700); animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.diagram__pulse{
  position:absolute; inset:-8px; border-radius:inherit;
  border:1.5px solid var(--teal-400);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{transform:scale(.94); opacity:.7}
  70%{transform:scale(1.08); opacity:0}
  100%{opacity:0}
}

.diagram__legend{
  display:flex; flex-wrap:wrap; gap:10px 24px;
  margin-top:18px; padding-left:6px;
  font-size:.8rem; color:var(--muted);
}
.diagram__legend li{display:inline-flex; align-items:center; gap:8px}
.dot{width:9px; height:9px; border-radius:50%}
.dot--in{background:var(--teal-400)}
.dot--out{background:var(--navy-600)}

@media (prefers-reduced-motion:reduce){
  .diagram__wires path,.diagram__core .icon,.diagram__pulse,.node{animation:none}
}

/* ───────────────────── 08. MARQUEE DE PLATAFORMAS ───────────────────────── */
.strip{padding-block:clamp(28px,4vw,44px) clamp(36px,5vw,60px); overflow:hidden}
.strip__label{
  font-family:var(--font-display); font-size:.75rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  text-align:center; margin-bottom:24px;
}
.marquee{
  position:relative;
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track{display:flex; width:max-content; animation:marquee 42s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__group{display:flex; gap:14px; padding-right:14px}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .marquee__track{animation:none} }

/* Chips do marquee: agora carregam o logotipo real do parceiro. */
.chip{
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-pill); padding:14px 28px;
  min-width:158px; height:76px;
  box-shadow:var(--sh-xs);
  transition:border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.chip:hover{border-color:var(--teal-300); transform:translateY(-2px); box-shadow:var(--sh-sm)}
.chip__logo{height:38px; width:auto; max-width:158px; object-fit:contain}
/* Marcas de proporção quadrada: sem isso ficariam desproporcionalmente largas. */
.chip__logo--quadrado{height:42px; width:42px; border-radius:8px}

/* ───────────────────────────── 09. SOBRE NÓS ────────────────────────────── */
.about{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(28px,4.5vw,64px); align-items:start;
  margin-bottom:clamp(48px,6vw,80px);
}
.about__story p{margin-bottom:1.1em}
.about__stats{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.stat{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:26px 22px; box-shadow:var(--sh-xs);
  transition:transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.stat:hover{transform:translateY(-4px); box-shadow:var(--sh); border-color:var(--teal-300)}
.stat__num{
  display:block; font-family:var(--font-display); font-weight:800;
  font-size:clamp(2rem,3.4vw,2.6rem); line-height:1;
  color:var(--navy-800); letter-spacing:-.03em; margin-bottom:8px;
}
.stat__label{font-size:.87rem; color:var(--muted); display:block; line-height:1.45}

/* Número-âncora: ocupa a linha inteira acima dos demais. */
.stat--destaque{
  grid-column:1 / -1;
  background:
    radial-gradient(520px 220px at 88% 0%, rgba(105,219,200,.22), transparent 62%),
    linear-gradient(145deg, var(--navy-800), var(--navy-900));
  border-color:var(--navy-800);
}
.stat--destaque:hover{border-color:var(--teal-400)}
.stat--destaque .stat__num{color:#fff; font-size:clamp(2.4rem,4.4vw,3.2rem)}
.stat--destaque .stat__label{color:var(--teal-300); font-weight:500; font-size:.92rem}

/* Missão, Visão e Valores */
.mvv{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  margin-bottom:clamp(48px,6vw,80px);
}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px 28px; box-shadow:var(--sh-xs);
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.card:hover{transform:translateY(-5px); box-shadow:var(--sh); border-color:var(--teal-300)}
.card__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:var(--r-sm);
  background:var(--navy-800); color:#fff; margin-bottom:18px;
  box-shadow:0 8px 20px rgba(19,41,75,.22);
}
.card__icon--soft{background:var(--teal-100); color:var(--navy-800); box-shadow:none}
.card__list{display:grid; gap:8px; margin-top:14px}
.card__list li{position:relative; padding-left:18px; font-size:.94rem}
.card__list li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--teal-400);
}
.card--mvv p{font-size:.97rem}

/* Time */
.team{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,4.5vw,64px); align-items:start}
.team__intro .link{margin-top:18px}
.team__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.card--role{padding:26px 22px}
.card--role p{font-size:.92rem; margin:0}
.card--role .card__icon{width:44px; height:44px; margin-bottom:14px}

/* ──────────────────────────── 10. INTEGRAÇÕES ───────────────────────────── */
.steps{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  margin-bottom:clamp(52px,7vw,96px);
}
.step{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); padding:30px 26px 28px;
  box-shadow:var(--sh-xs);
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.step:hover{transform:translateY(-5px); box-shadow:var(--sh); border-color:var(--teal-300)}
.step::after{
  content:''; position:absolute; top:44px; right:-9px; z-index:2;
  width:18px; height:18px; border-radius:50%;
  background:var(--teal-300); border:4px solid #fff;
}
.step:last-child::after{display:none}
.step__num{
  display:inline-block; font-family:var(--font-display); font-weight:800;
  font-size:.82rem; letter-spacing:.1em; color:var(--navy-800);
  background:var(--teal-100); border-radius:var(--r-pill);
  padding:5px 13px; margin-bottom:16px;
}
.step p{font-size:.93rem; margin:0}

/* Split com painel de código */
.split{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,72px); align-items:center;
  margin-bottom:clamp(52px,7vw,96px);
}
.split__media,.split__content{min-width:0}
.split__content .btn{margin-top:28px}
.panel{
  min-width:0; max-width:100%;
  background:var(--navy-950);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.panel__bar{
  display:flex; align-items:center; gap:7px;
  padding:14px 18px; background:rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.panel__bar span{width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.2)}
.panel__bar span:first-child{background:var(--teal-400)}
.panel__bar em{
  margin-left:auto; font-family:var(--font-mono); font-size:.72rem;
  color:rgba(255,255,255,.42); letter-spacing:.04em;
}
.panel__code{
  margin:0; padding:22px 20px 26px;
  font-family:var(--font-mono); font-size:.78rem; line-height:1.85;
  color:rgba(255,255,255,.8);
  overflow-x:auto; white-space:pre;
  -webkit-overflow-scrolling:touch;
}
.panel__code .c-k{color:var(--teal-400); font-weight:700}
.panel__code .c-p{color:#A8C7F0}
.panel__code .c-s{color:#87E2D3}
.panel__code .c-n{color:#F0B79E}
.panel__code .c-c{color:rgba(255,255,255,.38); font-style:italic}

/* Benefícios */
.benefits h3{margin-bottom:28px}
.benefits__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.card--benefit{padding:28px 24px}
.card--benefit p{font-size:.92rem; margin:0}
.card--benefit .card__icon{width:46px; height:46px; background:var(--teal-100); color:var(--navy-800); box-shadow:none}

/* ───────────────────────────── 11. PRODUTOS ─────────────────────────────── */
.tabs__nav{
  display:inline-flex; flex-wrap:wrap; gap:6px;
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-pill); padding:6px;
  margin-bottom:32px; box-shadow:var(--sh-xs);
}
.tabs__btn{
  font-family:var(--font-display); font-weight:700; font-size:.9rem;
  padding:11px 22px; border-radius:var(--r-pill); color:var(--body);
  transition:background var(--t-fast), color var(--t-fast);
}
.tabs__btn:hover{color:var(--navy-800); background:var(--teal-50)}
.tabs__btn.is-active{background:var(--navy-800); color:#fff}

.tabs__panel{display:none}
.tabs__panel.is-active{display:block; animation:fade-up .45s both}
@keyframes fade-up{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}

.cards-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.cards-grid--5{grid-template-columns:repeat(5,1fr)}
.cards-grid--2{grid-template-columns:repeat(2,1fr)}

.card--product{position:relative; padding:28px 24px; display:flex; flex-direction:column}
.card--product p{font-size:.92rem}
.card--product h3{margin-bottom:.45em}
.card__badge{
  display:inline-block; align-self:flex-start;
  font-family:var(--font-display); font-size:.68rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--navy-700); background:var(--teal-100);
  border-radius:var(--r-pill); padding:5px 11px; margin-bottom:16px;
}
.card--featured{
  background:linear-gradient(165deg, var(--navy-800), var(--navy-900));
  border-color:var(--navy-800); color:rgba(255,255,255,.78);
}
.card--featured h3,.card--featured strong{color:#fff}
.card--featured .card__badge{background:rgba(255,255,255,.14); color:#fff}
.card--featured .card__list li::before{background:var(--teal-400)}
.card--featured:hover{border-color:var(--teal-500)}

/* Logotipos dos PDVs nos cards de Frente de Loja.
   Altura fixa para alinhar marcas de proporções bem diferentes. */
.pdv-logo{
  display:flex; align-items:center; justify-content:flex-start;
  height:52px; margin-bottom:16px;
}
.pdv-logo img{max-height:52px; max-width:100%; width:auto; object-fit:contain}
/* Assets entregues com fundo chapado próprio (branco vazado sobre cor):
   viram um ladrilho quadrado em vez de flutuar sobre o card. */
.pdv-logo img.is-bleed{
  height:52px; width:52px; max-height:none;
  border-radius:10px; object-fit:cover;
}

.marcas{
  margin-top:14px; font-size:.78rem; color:var(--muted); max-width:70ch;
}

.tabs__note{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:22px; padding:16px 20px;
  background:var(--teal-50); border:1px dashed var(--teal-300);
  border-radius:var(--r); font-size:.92rem;
}
.tabs__note .icon{color:var(--navy-700)}

/* ─────────────────────── 11b. COBERTURA FUNCIONAL ───────────────────────── */
/* Painel de resumo: anel de progresso + números + barra empilhada. */
.cf__painel{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(28px,4vw,56px);
  align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(28px,3.5vw,44px); box-shadow:var(--sh);
  margin-bottom:clamp(28px,3.5vw,44px);
}

.cf__ring{position:relative; width:168px; height:168px; flex:0 0 auto}
.cf__ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.cf__ring circle{fill:none; stroke-width:11; stroke-linecap:round}
.cf__ring-track{stroke:var(--teal-100)}
.cf__ring-fill{
  stroke:var(--teal-400);
  stroke-dasharray:326.73;
  stroke-dashoffset:326.73;          /* começa vazio; anima ao entrar em tela */
  transition:stroke-dashoffset 1.6s cubic-bezier(.22,.61,.36,1);
}
.cf__painel.is-in .cf__ring-fill{stroke-dashoffset:29.4}   /* 326.73 × (1 − 0,91) */
.cf__ring-txt{
  position:absolute; inset:0; display:grid; place-content:center; text-align:center; gap:2px;
}
.cf__ring-txt strong{
  font-family:var(--font-display); font-weight:800; font-size:2.6rem; line-height:1;
  color:var(--navy-800); letter-spacing:-.04em;
}
.cf__ring-txt strong i{font-style:normal; font-size:1.3rem; color:var(--teal-600)}
.cf__ring-txt small{
  font-size:.68rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}

.cf__numeros{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:24px}
.cf__numeros strong{
  display:block; font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.9rem,3vw,2.5rem); line-height:1; color:var(--navy-800);
  letter-spacing:-.03em; margin-bottom:6px;
}
.cf__numeros span{font-size:.85rem; color:var(--muted); line-height:1.4; display:block; max-width:18ch}

.cf__barra{
  height:12px; border-radius:var(--r-pill); overflow:hidden;
  background:var(--line-strong); margin-bottom:14px;
}
.cf__barra span{
  display:block; height:100%; width:0; border-radius:inherit;
  background:linear-gradient(90deg, var(--teal-600), var(--teal-400));
  transition:width 1.6s cubic-bezier(.22,.61,.36,1);
}
.cf__painel.is-in .cf__barra span{width:91.3%}

.cf__legenda{display:flex; flex-wrap:wrap; gap:8px 24px; font-size:.85rem; color:var(--muted); margin:0}
.cf__legenda span{display:inline-flex; align-items:center; gap:8px}
.cf__dot{width:10px; height:10px; border-radius:3px; flex:0 0 auto}
.cf__dot--ok{background:var(--teal-400)}
.cf__dot--no{background:var(--line-strong)}

/* Cartões por domínio */
.cf__grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; align-items:start}
.cf__dom{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 26px 24px; box-shadow:var(--sh-xs);
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.cf__dom:hover{transform:translateY(-4px); box-shadow:var(--sh); border-color:var(--teal-300)}

.cf__dom-head{display:flex; align-items:center; gap:14px; margin-bottom:14px}
.cf__dom-head h3{margin:0; flex:1 1 auto}
.cf__dom-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:var(--r-sm); flex:0 0 auto;
  background:var(--teal-100); color:var(--navy-800);
}
.cf__frac{font-family:var(--font-display); font-size:.95rem; color:var(--muted); white-space:nowrap}
.cf__frac strong{font-size:1.5rem; font-weight:800; color:var(--navy-800); letter-spacing:-.02em}

.cf__prog{height:7px; border-radius:var(--r-pill); background:var(--teal-100); overflow:hidden; margin-bottom:20px}
.cf__prog span{
  display:block; height:100%; border-radius:inherit;
  background:linear-gradient(90deg, var(--teal-600), var(--teal-400));
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.2s cubic-bezier(.22,.61,.36,1) .15s;
}
.cf__dom.is-in .cf__prog span{transform:scaleX(1)}

/* Recursos como chips: lê muito mais leve que 84 bullets empilhados. */
.cf__chips{display:flex; flex-wrap:wrap; gap:7px}
.cf__chips li{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--teal-50); border:1px solid var(--teal-100);
  border-radius:var(--r-pill); padding:6px 13px 6px 9px;
  font-size:.82rem; color:var(--navy-700); line-height:1.3;
}
.cf__chips li::before{
  content:''; flex:0 0 auto;
  width:11px; height:6px; margin-top:-2px;
  border-left:2px solid var(--teal-600); border-bottom:2px solid var(--teal-600);
  transform:rotate(-45deg);
}

.cf__nota{
  display:flex; align-items:flex-start; gap:12px;
  margin-top:clamp(24px,3vw,36px); padding:20px 24px;
  background:#fff; border:1px dashed var(--line-strong);
  border-radius:var(--r); font-size:.9rem;
}
.cf__nota .icon{flex:0 0 auto; color:var(--navy-700); margin-top:3px}

@media (prefers-reduced-motion:reduce){
  .cf__ring-fill,.cf__barra span,.cf__prog span{transition:none}
}

/* ──────────────────────────── 12. DIFERENCIAIS ──────────────────────────── */
.diffs{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.diff{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg); padding:30px 26px;
  transition:background var(--t), transform var(--t), border-color var(--t);
}
.diff:hover{background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.24); transform:translateY(-5px)}
.diff p{font-size:.94rem; margin:0; color:rgba(255,255,255,.7)}
.diff__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:50px; height:50px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.1); color:var(--teal-300); margin-bottom:18px;
}
.diff--cta{
  background:#fff; border-color:#fff;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
}
.diff--cta .h5{color:var(--ink)}
.diff--cta p{color:var(--body); margin-bottom:20px}
.diff--cta .btn{box-shadow:none; background:var(--navy-800); color:#fff}
.diff--cta .btn:hover{background:var(--navy-700)}

/* ────────────────────────────── 13. CASES ───────────────────────────────── */
.results{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  margin-bottom:clamp(40px,5vw,64px);
}
.result{
  background:linear-gradient(160deg, var(--teal-50), #fff);
  border:1px solid var(--teal-300); border-radius:var(--r-lg);
  padding:30px 28px;
}
.result span{display:block; font-size:.92rem; color:var(--body); max-width:26ch}

/* Slider */
.slider{margin-bottom:clamp(44px,6vw,72px)}
.slider__viewport{overflow:hidden; border-radius:var(--r-lg)}
.slider__track{display:flex; transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.slide{flex:0 0 100%; padding:2px}
.quote{
  position:relative; margin:0;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(30px,4vw,48px); box-shadow:var(--sh-xs);
}
.quote__mark{width:40px; height:40px; color:var(--teal-300); fill:currentColor; stroke:none; margin-bottom:18px}
.quote p{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.08rem,1.8vw,1.42rem); line-height:1.5;
  color:var(--ink); letter-spacing:-.015em; margin-bottom:26px;
  text-wrap:pretty;
}
.quote footer{display:flex; align-items:center; gap:14px}
.quote footer span{display:flex; flex-direction:column}
.quote footer strong{font-family:var(--font-display); font-size:.97rem}
.quote footer small{color:var(--muted); font-size:.85rem}
.avatar{
  width:48px; height:48px; border-radius:50%;
  background:var(--navy-800); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:.9rem;
  flex:0 0 auto;
}
.slider__controls{display:flex; align-items:center; gap:14px; margin-top:22px}
.slider__btn{
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line-strong); background:#fff; color:var(--navy-800);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.slider__btn:hover{background:var(--navy-800); color:#fff; border-color:var(--navy-800)}
.slider__dots{display:flex; gap:8px; margin-left:auto}
.slider__dots button{
  width:9px; height:9px; border-radius:var(--r-pill); background:var(--line-strong);
  transition:width var(--t-fast), background var(--t-fast);
}
.slider__dots button.is-active{width:28px; background:var(--navy-800)}

/* Segmentos */
.segments h3{margin-bottom:20px}
.segments__list{display:flex; flex-wrap:wrap; gap:12px}
.segments__list li{
  display:inline-flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-pill);
  padding:11px 20px; font-size:.92rem; font-weight:500;
  box-shadow:var(--sh-xs);
}
.segments__list .icon{color:var(--navy-700)}

/* ───────────────────────────── 14. RECURSOS ─────────────────────────────── */
.resources{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  margin-bottom:clamp(52px,7vw,96px);
}
.res{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px 24px; box-shadow:var(--sh-xs);
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.res:hover{transform:translateY(-5px); box-shadow:var(--sh); border-color:var(--teal-300)}
.res p{font-size:.92rem; margin-bottom:20px}
.res__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:var(--r-sm);
  background:var(--teal-100); color:var(--navy-800); margin-bottom:18px;
}
.res__link{
  margin-top:auto; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-display); font-weight:700; font-size:.86rem; color:var(--navy-800);
  transition:gap var(--t-fast);
}
.res:hover .res__link{gap:12px}

/* FAQ */
.faq{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px,4.5vw,64px); align-items:start}
.faq__intro .btn{margin-top:18px}
.accordion{display:grid; gap:12px}
.acc{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.acc.is-open{border-color:var(--teal-300); box-shadow:var(--sh-sm)}
.acc__head{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  width:100%; text-align:left; padding:20px 24px;
  font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--ink);
  transition:color var(--t-fast);
}
.acc__head:hover{color:var(--navy-800)}
.acc__head .icon{flex:0 0 auto; color:var(--navy-700); transition:transform var(--t-fast)}
.acc.is-open .acc__head .icon{transform:rotate(180deg)}
.acc__body{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows var(--t);
}
.acc.is-open .acc__body{grid-template-rows:1fr}
.acc__body > p{
  overflow:hidden; margin:0;
  padding:0 24px; font-size:.95rem;
  transition:padding var(--t);
}
.acc.is-open .acc__body > p{padding:0 24px 22px}

/* ─────────────────────────────── 15. CTA ────────────────────────────────── */
.cta{padding-block:0 var(--section-y)}
.cta__box{
  display:grid; grid-template-columns:1.35fr .65fr;
  gap:clamp(24px,4vw,56px); align-items:center;
  background:
    radial-gradient(600px 300px at 85% 0%, rgba(105,219,200,.2), transparent 65%),
    linear-gradient(150deg, var(--navy-800), var(--navy-950));
  border-radius:var(--r-xl);
  padding:clamp(36px,5vw,64px);
  color:rgba(255,255,255,.76);
  box-shadow:var(--sh-lg);
}
.cta__box h2{color:#fff; margin-bottom:.45em}
.cta__actions{display:flex; flex-direction:column; gap:12px}
.cta__actions .btn{width:100%}

/* ────────────────────────────── 16. CONTATO ─────────────────────────────── */
.contact{display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(28px,4vw,56px); align-items:start}
.form{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(26px,3.5vw,40px); box-shadow:var(--sh-xs);
  display:grid; gap:18px;
}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
/* Honeypot: precisa existir no DOM e ficar fora do alcance de quem usa o site. */
.honeypot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.field{display:grid; gap:7px}
.field label{
  font-family:var(--font-display); font-weight:600; font-size:.86rem; color:var(--ink);
}
.field input,.field select,.field textarea{
  width:100%; padding:13px 16px;
  background:var(--bg); border:1.5px solid var(--line);
  border-radius:var(--r-sm); font-size:.95rem; color:var(--ink);
  transition:border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.field input::placeholder,.field textarea::placeholder{color:#B3A6AD}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; background:#fff; border-color:var(--teal-400);
  box-shadow:0 0 0 4px var(--teal-100);
}
.field textarea{resize:vertical; min-height:110px}
.field select{
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B7F87' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:17px;
  padding-right:42px;
}
.field.has-error input,.field.has-error select,.field.has-error textarea{
  border-color:#D14343; background:#FEF5F5;
}
.field__error{color:#C13333; font-size:.8rem; display:none}
.field.has-error .field__error{display:block}

.check{display:flex; align-items:flex-start; gap:11px; font-size:.87rem; cursor:pointer}
.check input{
  appearance:none; flex:0 0 auto;
  width:20px; height:20px; margin-top:2px;
  border:1.5px solid var(--line-strong); border-radius:6px; background:#fff;
  transition:background var(--t-fast), border-color var(--t-fast);
}
.check input:checked{
  background:var(--navy-800) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/13px no-repeat;
  border-color:var(--navy-800);
}
.check.has-error input{border-color:#D14343}

.form__status{font-size:.9rem; margin:0; display:none}
.form__status.is-ok{display:block; color:#1E7A4B; background:#EAF7F0; border:1px solid #BFE6D2;
  padding:13px 16px; border-radius:var(--r-sm)}
.form__status.is-err{display:block; color:#C13333; background:#FEF3F3; border:1px solid #F3CFCF;
  padding:13px 16px; border-radius:var(--r-sm)}

/* Canais */
.channels{display:grid; gap:10px; align-content:start}
.channels h3{margin-bottom:8px}
.channel{
  display:flex; align-items:center; gap:14px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:16px 18px; box-shadow:var(--sh-xs);
  transition:border-color var(--t-fast), transform var(--t-fast);
}
a.channel:hover{border-color:var(--teal-400); transform:translateX(4px)}
.channel span:last-child{display:flex; flex-direction:column; min-width:0}
.channel strong{font-family:var(--font-display); font-size:.94rem}
.channel small{color:var(--muted); font-size:.85rem; overflow-wrap:anywhere}
.channel__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--r-xs); flex:0 0 auto;
  background:var(--teal-100); color:var(--navy-800);
}
.channels__box{
  margin-top:10px; padding:22px;
  background:linear-gradient(160deg, var(--navy-800), var(--navy-900));
  border-radius:var(--r); color:rgba(255,255,255,.76);
}
.channels__box .icon{color:var(--teal-300); margin-bottom:12px}
.channels__box p{font-size:.92rem; margin-bottom:14px}
.channels__box .link{color:#fff; border-color:rgba(255,255,255,.3)}
.channels__box .link:hover{color:#fff; border-color:#fff}

/* ────────────────────────────── 17. RODAPÉ ──────────────────────────────── */
.footer{
  background:var(--navy-900);
  color:rgba(255,255,255,.66);
  padding-top:clamp(40px,5vw,64px);
}
.footer__features{
  display:grid; grid-template-columns:repeat(5,1fr); gap:8px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-lg);
  padding:26px 22px;
  margin-bottom:clamp(44px,5vw,72px);
}
.feat{display:grid; gap:4px; padding:0 14px; position:relative}
.feat + .feat::before{
  content:''; position:absolute; left:0; top:6px; bottom:6px;
  width:1px; background:rgba(255,255,255,.1);
}
.feat__icon{color:var(--teal-400); margin-bottom:6px}
.feat strong{
  font-family:var(--font-display); font-size:.78rem; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:var(--teal-300);
}
.feat small{font-size:.86rem; line-height:1.5; color:rgba(255,255,255,.62)}

.footer__main{
  display:grid; grid-template-columns:1.1fr 2.2fr;
  gap:clamp(32px,5vw,72px);
  padding-bottom:clamp(36px,4vw,56px);
}
.footer__brand p{font-size:.93rem; margin:20px 0 20px; max-width:40ch}

.footer__contato{
  display:grid; gap:11px; margin-bottom:24px;
  font-style:normal; font-size:.9rem; max-width:44ch;
}
.footer__contato a,.footer__contato span{
  display:flex; align-items:flex-start; gap:10px;
  color:rgba(255,255,255,.72); transition:color var(--t-fast);
}
.footer__contato a:hover{color:#fff}
.footer__contato .icon{flex:0 0 auto; color:var(--teal-400); margin-top:3px}

.social{display:flex; gap:10px}
.social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.8);
  transition:background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.social a:hover{background:#fff; color:var(--navy-800); border-color:#fff}

.footer__nav{display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.footer__col h4{
  font-size:.79rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; margin-bottom:16px;
}
.footer__col ul{display:grid; gap:11px}
.footer__col a{
  font-size:.92rem; color:rgba(255,255,255,.66);
  transition:color var(--t-fast), padding-left var(--t-fast);
}
.footer__col a:hover{color:#fff; padding-left:5px}

.footer__bottom{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px;
  border-top:1px solid rgba(255,255,255,.1);
  padding-block:24px 28px;
  font-size:.85rem;
}
.footer__legal{display:flex; flex-wrap:wrap; gap:10px 22px}
.footer__legal a{color:rgba(255,255,255,.6); transition:color var(--t-fast)}
.footer__legal a:hover{color:#fff}
.footer__site{
  margin-left:auto; font-family:var(--font-display); font-weight:700;
  color:var(--teal-300); letter-spacing:.02em;
}

/* ──────────────────────────── 18. FLUTUANTES ────────────────────────────── */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:90;
  width:48px; height:48px; border-radius:50%;
  background:var(--navy-800); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(19,41,75,.35);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast), background var(--t-fast);
}
.to-top.is-visible{opacity:1; visibility:visible; transform:none}
.to-top:hover{background:var(--navy-700)}

.cookies{
  position:fixed; left:22px; bottom:22px; z-index:95;
  max-width:430px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-lg); padding:22px 24px;
  animation:fade-up .5s both .8s;
}
.cookies p{font-size:.87rem; margin-bottom:16px}
.cookies__actions{display:flex; flex-wrap:wrap; gap:10px}

/* ─────────────────────── 19. ANIMAÇÕES DE ENTRADA ───────────────────────── */
/* O estado inicial só é aplicado quando há JS para reverter (classe .js no <html>). */
.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1)}
.js .reveal.is-in{opacity:1; transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}
.reveal[data-delay="4"]{transition-delay:.32s}
.reveal[data-delay="5"]{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1; transform:none; transition:none}
  .btn:hover{transform:none}
}

/* ───────────────────────────── 20. RESPONSIVO ───────────────────────────── */
/* Com 8 itens no menu, o espaço fica curto antes do breakpoint mobile. */
@media (max-width:1400px){
  .brand img{height:54px}
  .nav__list{gap:0}
  .nav__link{padding:10px 10px; font-size:.88rem}
  .header__cta{padding:9px 17px; font-size:.87rem}
}

@media (max-width:1180px){
  .brand img{height:50px}
  .nav__link{padding:10px 8px; font-size:.84rem}
  .nav__item.has-sub > .nav__link .icon{display:none}
  .resources,.benefits__grid,.steps{grid-template-columns:repeat(2,1fr)}
  .step::after{display:none}
  .cards-grid--5{grid-template-columns:repeat(3,1fr)}
  .footer__features{grid-template-columns:repeat(3,1fr); gap:22px 8px}
  .feat:nth-child(4)::before{display:none}
}

@media (max-width:1024px){
  .header__inner{height:70px}
  .hero__inner{grid-template-columns:1fr; gap:48px}
  .hero__visual{max-width:640px}
  .about,.team,.split,.faq,.contact,.section__head--split{grid-template-columns:1fr}
  .cf__grid{grid-template-columns:1fr}
  .cf__painel{grid-template-columns:1fr; justify-items:center; text-align:center}
  .cf__numeros{max-width:520px; margin-inline:auto}
  .cf__legenda{justify-content:center}
  .split__media{order:2}
  .cta__box{grid-template-columns:1fr}
  .cta__actions{flex-direction:row; flex-wrap:wrap}
  .cta__actions .btn{width:auto}
  .team__grid,.mvv,.diffs,.results{grid-template-columns:repeat(2,1fr)}
  .footer__main{grid-template-columns:1fr}
  .diff--cta{grid-column:span 2}
}

/* Menu mobile */
@media (max-width:960px){
  .burger{display:inline-flex}
  .header__cta{display:none}

  .nav{
    position:fixed; top:0; right:0; z-index:99;
    width:min(390px, 88vw); height:100dvh;
    background:#fff; box-shadow:var(--sh-lg);
    flex-direction:column; align-items:stretch;
    padding:78px 22px 32px;
    overflow-y:auto;
    transform:translateX(105%);
    transition:transform var(--t);
    margin-left:0;
  }
  .nav.is-open{transform:none}

  .nav__close{
    display:inline-flex; align-items:center; justify-content:center;
    position:absolute; top:18px; right:18px;
    width:42px; height:42px; border-radius:var(--r-xs);
    border:1px solid var(--line-strong); color:var(--navy-800);
  }
  .nav__list{flex-direction:column; align-items:stretch; gap:2px}
  .nav__item{border-bottom:1px solid var(--line)}
  .nav__link{
    justify-content:flex-start; padding:15px 6px; font-size:1rem; border-radius:0;
  }
  .nav__link:hover{background:transparent}
  .nav__item.has-sub > .nav__link .icon{display:none}
  .nav__toggle{
    display:inline-flex; align-items:center; justify-content:center;
    position:absolute; top:6px; right:0;
    width:44px; height:44px; color:var(--navy-800);
  }
  .nav__toggle .icon{transition:transform var(--t-fast)}
  .nav__toggle[aria-expanded="true"] .icon{transform:rotate(180deg)}

  /* Submenu recolhido: max-height em vez do truque 0fr/1fr, que só colapsa
     o primeiro filho quando o grid tem vários itens. */
  .nav__sub{
    position:static; opacity:1; visibility:visible; transform:none;
    min-width:0; border:0; box-shadow:none; background:transparent;
    display:block; overflow:hidden;
    max-height:0; padding:0 0 0 12px;
    transition:max-height var(--t), padding var(--t);
  }
  .nav__sub::before{display:none}
  .nav__item.is-expanded .nav__sub,
  .nav__item.has-sub.is-expanded:hover .nav__sub{max-height:340px; padding:0 0 10px 12px}
  .nav__item.has-sub:hover .nav__sub{max-height:0}
  .nav__item.has-sub.is-expanded:hover .nav__sub{max-height:340px}
  .nav__sub a{padding:9px 12px; border-left:2px solid var(--line)}
  .nav__sub a:hover{padding-left:16px}

  .nav__cta{display:inline-flex; margin-top:26px}
}

@media (max-width:760px){
  html{scroll-padding-top:82px}
  .br-desktop{display:none}
  .section__head{margin-bottom:34px}
  .about__stats,.mvv,.team__grid,.steps,.benefits__grid,
  .cards-grid,.cards-grid--5,.cards-grid--2,.diffs,.results,
  .resources,.footer__features,.footer__nav,
  .cf__grid{grid-template-columns:1fr}
  /* Três colunas mesmo no celular: empilhados, os números esticavam demais a seção. */
  .cf__numeros{grid-template-columns:repeat(3,1fr); gap:10px}
  .cf__numeros strong{font-size:1.65rem}
  .cf__numeros span{font-size:.75rem; max-width:none}
  .cf__ring{width:140px; height:140px}
  .cf__ring-txt strong{font-size:2.1rem}
  .cf__dom{padding:22px 20px 20px}
  .diff--cta{grid-column:auto}
  .feat + .feat::before{display:none}
  .footer__features{padding:24px 20px; gap:26px}
  .footer__nav{gap:30px}
  .ticks--2{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
  .hero__actions .btn{width:100%}
  .tabs__nav{display:grid; grid-template-columns:1fr; border-radius:var(--r)}
  .tabs__btn{border-radius:var(--r-sm)}
  .cookies{left:14px; right:14px; bottom:14px; max-width:none}
  .to-top{right:14px; bottom:120px}
  .footer__bottom{flex-direction:column; align-items:flex-start}
  .footer__site{margin-left:0}
  .slider__dots{margin-left:0}
  .slider__controls{justify-content:space-between}
}

@media (max-width:620px){
  .diagram{grid-template-columns:1fr; gap:16px; padding:22px 18px}
  .diagram__wires{display:none}
  .diagram__col{gap:10px}
  .diagram__col--left{grid-template-columns:repeat(2,1fr)}
  .diagram__col--left .node{width:100%}
  .diagram__col--right{justify-items:stretch}
  .node--erp{align-items:center}
  .quote p{font-size:1.05rem}
  .brand img{height:58px}
}