/* Home "E-commerce Pro" (Figma: node 507:761) — home.php + assets/js/ecom.js.
   Medidas do Figma em 1440px: conteúdo de 1200px com 120px de margem. */

@font-face{
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/BricolageGrotesque-latin.woff2') format('woff2');
}

:root{
  --roxo: #0D0D0D;
  --roxo-escuro: #000000;
  --preto: #191919;
  --branco: #FFFFFF;
  --superficie: #F8F4EE;
  --fundo-suave: #F8F4EE;
  --linha: #EAE1D4;
  --borda-card: #EAE1D4;
  --texto-64: rgba(25,25,25,.64);
  --verde-shopify: #95BF47;
  --sombra-roxa: 0 24px 48px -8px rgba(13,13,13,.14);

  --gutter: clamp(16px, 5vw, 120px);
  --section-y: clamp(72px, 9vw, 112px);
  --ease-out: cubic-bezier(.2,.75,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html:has(body.ecom){ overflow-x: clip; }
body.ecom{
  margin: 0;
  background: var(--branco);
  color: var(--preto);
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-optical-sizing: auto; /* títulos grandes usam o corte "display", como no Figma */
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* reset com :where() = especificidade zero, não atropela as classes dos componentes */
:where(.ecom) :where(img){ display: block; max-width: 100%; }
:where(.ecom) :where(a){ color: inherit; text-decoration: none; }
:where(.ecom) :where(p, h1, h2, h3, ul, ol, figure, blockquote){ margin: 0; padding: 0; }
:where(.ecom) :where(ul, ol){ list-style: none; }
:where(.ecom) :where(button){ font: inherit; }
.ecom :focus-visible{ outline: 2px solid var(--roxo); outline-offset: 3px; border-radius: 6px; }
.nowrap{ white-space: nowrap; }

.container{
  width: min(1200px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}
.section{ padding-block: var(--section-y); }
[id]{ scroll-margin-top: 96px; }

/* Barra de progresso de rolagem */
.scroll-progress{
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 120; pointer-events: none;
}
.scroll-progress span{
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--roxo), #D97016);
  transform-origin: 0 50%;
  transform: scaleX(var(--progress, 0));
}

/* ---------- Tipografia comum ---------- */
.eyebrow{
  font-size: 13px; font-weight: 600; letter-spacing: .08em;
  color: var(--roxo);
}
.eyebrow-light{ color: var(--superficie); }
.h2{
  font-size: clamp(34px, 4.2vw, 52px); font-weight: 700;
  line-height: 1.04; letter-spacing: -.03em;
}
.h2-48{ font-size: clamp(32px, 3.9vw, 48px); }
.lead{ font-size: 17px; line-height: 1.55; color: var(--texto-64); }

.section-head{ display: flex; gap: 32px; margin-bottom: 56px; }
.section-head.split{ align-items: flex-end; justify-content: space-between; }
.section-head.center{ flex-direction: column; align-items: center; gap: 16px; text-align: center; max-width: 760px; margin-inline: auto; margin-bottom: 64px; }
.section-title-wrap{ display: flex; flex-direction: column; gap: 16px; max-width: 660px; }
.section-aside{ max-width: 400px; }

/* ---------- Botões ---------- */
.btn{
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 22px; border-radius: 999px; border: 1px solid transparent;
  font-size: 15px; font-weight: 600; line-height: normal; white-space: nowrap;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .35s ease, translate .35s var(--ease-out);
  translate: var(--mx-btn, 0) var(--my-btn, 0);
}
.btn-lg{ padding: 16px 26px; font-size: 16px; }
.btn-arrow{ transition: transform .35s var(--ease-spring); }
.btn:hover .btn-arrow{ transform: translateX(4px); }
/* brilho que atravessa o botão */
.btn::after{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s ease;
}
.btn:hover::after{ transform: translateX(120%); }

.btn-primary{ background: var(--roxo); color: var(--branco); }
.btn-primary:hover{ background: var(--roxo-escuro); box-shadow: 0 14px 30px -10px rgba(13,13,13,.55); }
.btn-outline{ border-color: rgba(25,25,25,.2); color: var(--preto); background: transparent; }
.btn-outline:hover{ border-color: var(--preto); background: var(--preto); color: var(--branco); }
.btn-outline:hover .btn-arrow{ filter: invert(1); }
.btn-white{ background: var(--branco); color: var(--roxo); }
.btn-white:hover{ box-shadow: 0 16px 34px -10px rgba(13,13,13,.45); }
.btn-white::after{ background: linear-gradient(110deg, transparent 30%, rgba(13,13,13,.12) 50%, transparent 70%); }
.btn-ghost-light{ border-color: rgba(255,255,255,.4); color: var(--branco); }
.btn-ghost-light:hover{ border-color: var(--branco); background: rgba(255,255,255,.1); }

.pill{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 10px; border-radius: 999px;
  background: var(--branco); border: 1px solid #E6DCEE;
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.pill-dot{ animation: pulseDot 2.4s ease-in-out infinite; border-radius: 50%; }
.pulse-dot{ border-radius: 50%; animation: pulseGreen 2.4s ease-in-out infinite; }

/* ---------- Barra de anúncio ---------- */
.announce{
  background: var(--preto); color: var(--branco);
  padding: 11px var(--gutter);
  font-size: 13px; line-height: normal; text-align: center;
}
.announce p{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; }
.announce strong{ font-weight: 600; }
.announce-bullet{ opacity: .4; }
.announce-text{ opacity: .75; }
.announce-link{ font-weight: 600; color: var(--superficie); display: inline-block; transition: transform .3s var(--ease-spring), color .2s; }
.announce-link:hover{ color: #D97016; transform: translateX(3px); }

/* ---------- Navegação ---------- */
.nav{
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid #ECE6F1;
  transition: transform .45s var(--ease-out), box-shadow .3s ease;
}
.nav.is-scrolled{ box-shadow: 0 10px 30px -18px rgba(13,13,13,.35); }
.nav.is-hidden{ transform: translateY(-100%); }
.nav-inner{
  width: min(1200px, 100% - 2 * var(--gutter)); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-block: 22px;
  transition: padding .3s ease;
}
.nav.is-scrolled .nav-inner{ padding-block: 14px; }
.nav-logo img{ height: 28px; width: auto; }
.nav-links{ display: flex; align-items: center; gap: 36px; }
.nav-link{
  position: relative; font-size: 15px; font-weight: 500; color: rgba(25,25,25,.8);
  transition: color .2s ease;
}
.nav-link::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px;
  background: var(--roxo); transform: scaleX(0); transform-origin: right;
  transition: transform .35s var(--ease-out);
}
.nav-link:hover, .nav-link.is-current, .nav-link.is-page{ color: var(--preto); }
.nav-link.is-page{ color: var(--roxo); font-weight: 600; }
.nav-link:hover::after, .nav-link.is-current::after, .nav-link.is-page::after{ transform: scaleX(1); transform-origin: left; }
.nav-actions{ display: flex; align-items: center; gap: 20px; }
.nav-secondary{ position: relative; font-size: 15px; font-weight: 600; transition: color .2s; }
.nav-secondary:hover{ color: var(--roxo); }
.nav-mobile-actions{ display: none; }
.nav-toggle{
  display: none; position: relative; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid #ECE6F1; background: var(--branco); cursor: pointer; padding: 0;
}
.nav-toggle span{
  position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: var(--preto);
  transition: transform .35s var(--ease-out), opacity .2s;
}
.nav-toggle span:nth-child(1){ top: 15px; }
.nav-toggle span:nth-child(2){ top: 21px; }
.nav-toggle span:nth-child(3){ top: 27px; }
.nav-open .nav-toggle span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2){ opacity: 0; }
.nav-open .nav-toggle span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{
  position: relative; overflow: hidden;
  background: var(--fundo-suave);
  padding: 96px 0 112px;
}
.hero-glow{
  position: absolute; width: 720px; height: 720px; right: -200px; top: -260px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(13,13,13,.12), transparent);
  pointer-events: none;
  animation: glowDrift 14s ease-in-out infinite alternate;
}
.hero-inner{
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.hero-copy{ width: 600px; max-width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.hero-title{
  position: relative; z-index: 0; /* o grifo do destaque (z-index -1) fica atrás do texto, não do fundo */
  font-size: clamp(40px, 5.6vw, 64px); font-weight: 700; line-height: 1; letter-spacing: -.04em;
}
/* grifo como fundo do texto: acompanha o destaque mesmo quando ele quebra de linha */
.hero-mark{
  color: var(--roxo);
  background: linear-gradient(rgba(13,13,13,.16), rgba(13,13,13,.16)) no-repeat 0 92% / 0% .14em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  animation: markIn .9s var(--ease-out) 1.05s forwards;
}
.hero-text{ font-size: 19px; line-height: 1.55; color: var(--texto-64); }
.hero-ctas{ display: flex; flex-wrap: wrap; gap: 12px; }
.hero-stats{ display: flex; align-items: center; gap: 28px; padding-top: 8px; }
.hero-stat{ display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.hero-stat strong{ font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.hero-stat > span{ font-size: 13px; color: var(--texto-64); }
.hero-stat .metric-sign{ color: inherit; }
.hero-stats-sep{ width: 1px; height: 32px; background: var(--preto); }

/* Composição da direita: 576×560 no Figma; --u = 1px do Figma, escala junto com a largura. */
.hero-visual{
  position: relative; flex: 0 0 auto;
  width: min(576px, 100%); aspect-ratio: 576 / 560;
  container-type: inline-size;
}
.hero-visual > *{ --u: calc(100cqw / 576); position: absolute; }
.hv-window{
  left: calc(48 * var(--u)); top: calc(40 * var(--u));
  width: calc(528 * var(--u)); height: calc(420 * var(--u));
  display: flex; flex-direction: column;
  background: var(--preto); border-radius: calc(24 * var(--u)); overflow: hidden;
  box-shadow: var(--sombra-roxa);
}
.hv-bar{ display: flex; align-items: center; gap: calc(7 * var(--u)); padding: calc(14 * var(--u)) calc(18 * var(--u)); flex: 0 0 auto; }
.hv-bar > img{ width: calc(10 * var(--u)); height: calc(10 * var(--u)); }
.hv-url{
  background: rgba(255,255,255,.1); border-radius: 999px;
  padding: calc(5 * var(--u)) calc(14 * var(--u));
  font-size: calc(11 * var(--u)); line-height: normal; color: rgba(255,255,255,.64);
  white-space: nowrap; min-width: calc(103 * var(--u));
}
.hv-url-text.is-typing::after{ content: "|"; margin-left: 1px; animation: caret .8s steps(1) infinite; }
.hv-shot{ position: relative; flex: 1 1 auto; overflow: hidden; }
.hv-shot img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
/* janela com link (hero_image_url): leve zoom na loja e sombra maior */
a.hv-window{ transition: translate .6s var(--ease-out), box-shadow .4s ease; }
a.hv-window:hover{ box-shadow: 0 34px 60px -12px rgba(13,13,13,.28); }
a.hv-window:hover .hv-shot img{ transform: scale(1.03); }
.hv-shot::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
  transform: translateX(-130%);
  animation: gloss 7s ease-in-out 2.4s infinite;
}
.hv-card{
  background: var(--branco); border-radius: calc(20 * var(--u));
  filter: drop-shadow(0 calc(24 * var(--u)) calc(24 * var(--u)) rgba(13,13,13,.14));
}
.hv-label{ font-size: calc(13 * var(--u)); font-weight: 500; color: rgba(25,25,25,.78); white-space: nowrap; }
.hv-conv{
  left: 0; top: calc(372 * var(--u)); width: calc(236 * var(--u));
  padding: calc(20 * var(--u)) calc(22 * var(--u));
  display: flex; flex-direction: column; gap: calc(6 * var(--u));
}
.hv-conv-top{ display: flex; align-items: center; gap: calc(8 * var(--u)); }
.hv-conv-icon{
  width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: calc(8 * var(--u));
  background: var(--superficie); display: grid; place-items: center;
}
.hv-conv-icon img{ width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.hv-conv-value{ font-size: calc(36 * var(--u)); font-weight: 700; letter-spacing: -.03em; line-height: normal; }
.hv-conv-note{ font-size: calc(13 * var(--u)); font-weight: 600; color: var(--roxo); white-space: nowrap; }
.hv-orders{
  left: calc(368 * var(--u)); top: 0; width: calc(208 * var(--u));
  padding: calc(18 * var(--u)) calc(20 * var(--u));
  display: flex; flex-direction: column; gap: calc(12 * var(--u));
}
.hv-orders-top{ display: flex; align-items: center; justify-content: space-between; }
.hv-orders-delta{ font-size: calc(12 * var(--u)); font-weight: 600; color: var(--roxo); }
.hv-orders-value{ font-size: calc(32 * var(--u)); font-weight: 700; letter-spacing: -.03em; line-height: normal; }
.hv-chart{ display: flex; align-items: flex-end; gap: calc(6 * var(--u)); height: calc(44 * var(--u)); }
.hv-chart span{
  flex: 1 1 0; height: calc(var(--h) * var(--u)); border-radius: calc(3 * var(--u));
  background: var(--superficie);
  transform-origin: bottom;
  transition: height .7s var(--ease-out), background-color .3s;
}
.hv-chart span.is-peak{ background: var(--roxo); }
.hv-seal{
  left: calc(300 * var(--u)); top: calc(500 * var(--u));
  display: flex; align-items: center; gap: calc(8 * var(--u));
  padding: calc(10 * var(--u)) calc(16 * var(--u)) calc(10 * var(--u)) calc(12 * var(--u));
  border-radius: 999px; background: var(--preto); color: var(--branco);
  font-size: calc(13 * var(--u)); font-weight: 600; white-space: nowrap;
  filter: drop-shadow(0 calc(24 * var(--u)) calc(24 * var(--u)) rgba(13,13,13,.14));
}
.hv-seal img{ width: calc(8 * var(--u)); height: calc(8 * var(--u)); }
/* parallax do mouse (ecom.js define --px/--py) */
.hero-visual [data-depth]{
  translate: calc(var(--px, 0) * 1px) calc(var(--py, 0) * 1px);
  transition: translate .6s var(--ease-out);
}
.hv-card, .hv-seal{ transition: translate .6s var(--ease-out), scale .4s var(--ease-spring); }
.hv-card:hover, .hv-seal:hover{ scale: 1.04; }

/* ---------- Marcas ---------- */
.brands{ background: var(--branco); padding: 40px 0; }
.brands-inner{ display: flex; flex-direction: column; align-items: center; gap: 16px; }
.brands-label{ font-size: 12px; letter-spacing: .08em; color: rgba(25,25,25,.7); }
.brands-track{ width: 100%; overflow: hidden; }
.brands-row{ display: flex; align-items: center; justify-content: space-between; }
.brand{ display: flex; align-items: center; padding: 6px 0; opacity: .7; transition: opacity .3s, transform .4s var(--ease-spring); }
.brand:hover{ opacity: 1; transform: translateY(-3px) scale(1.08); }
.brand[aria-hidden="true"]{ display: none; }

/* ---------- Métricas ---------- */
.metrics{ background: var(--branco); }
.metrics-row{ display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--linha); }
.metric{ padding: 44px 32px; display: flex; flex-direction: column; gap: 10px; border-left: 1px solid var(--linha); position: relative; }
.metric:first-child{ padding-left: 0; border-left: 0; }
.metric::before{
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--roxo);
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out);
}
.metric:hover::before{ transform: scaleX(1); }
.metric-value{ font-size: clamp(44px, 4.4vw, 56px); font-weight: 700; line-height: 1; letter-spacing: -.04em; white-space: nowrap; }
.metric-value .metric-sign{ color: var(--roxo); display: inline-block; transition: transform .4s var(--ease-spring); }
.metric:hover .metric-sign{ transform: rotate(90deg) scale(1.15); }
.metric-text{ font-size: 15px; line-height: 1.45; color: var(--texto-64); max-width: 243px; }

/* ---------- Soluções ---------- */
.solutions-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 24px; }
.sol-card{
  --mx: 50%; --my: 50%;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: 20px; min-height: 287px;
  padding: 32px; border-radius: 24px;
  background: var(--fundo-suave); border: 1px solid var(--borda-card);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .3s, background-color .3s;
}
.sol-card::before{ /* luz que segue o mouse */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .35s;
  background: radial-gradient(360px circle at var(--mx) var(--my), rgba(13,13,13,.12), transparent 60%);
}
.sol-card:hover{ transform: translateY(-6px); border-color: rgba(13,13,13,.35); box-shadow: 0 28px 50px -24px rgba(13,13,13,.35); background: var(--branco); }
.sol-card:hover::before{ opacity: 1; }
.sol-card.is-featured{ background: var(--preto); border-color: var(--preto); color: var(--branco); }
.sol-card.is-featured::before{ background: radial-gradient(380px circle at var(--mx) var(--my), rgba(217,112,22,.35), transparent 60%); }
.sol-card.is-featured:hover{ background: var(--preto); border-color: var(--preto); }
.sol-icon{
  width: 52px; height: 52px; flex: 0 0 auto; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--branco); border: 1px solid var(--borda-card);
  transition: background-color .35s, border-color .35s, transform .5s var(--ease-spring);
}
.sol-icon img{ transition: filter .35s; }
.sol-card:hover .sol-icon{ background: var(--roxo); border-color: var(--roxo); }
.sol-card:hover .sol-icon img{ filter: brightness(0) invert(1); }
.sol-card.is-featured .sol-icon{ background: var(--roxo); border-color: var(--roxo); }
.sol-copy{ display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }
.sol-title{ font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: normal; }
.sol-text{ font-size: 16px; line-height: 1.55; color: var(--texto-64); }
.sol-card.is-featured .sol-text{ color: rgba(255,255,255,.64); }
.sol-link{ display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--roxo); }
.sol-card.is-featured .sol-link{ color: var(--superficie); }
.sol-link img{ transition: transform .35s var(--ease-spring); }
.sol-card:hover .sol-link img{ transform: translateX(5px); }

/* ---------- Migração ---------- */
.migration{ background: var(--preto); color: var(--branco); position: relative; overflow: hidden; }
.migration::before{
  content: ""; position: absolute; width: 640px; height: 640px; right: -180px; bottom: -320px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(13,13,13,.28), transparent); pointer-events: none;
  animation: glowDrift 16s ease-in-out infinite alternate-reverse;
}
.migration-inner{ position: relative; display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.migration-copy{ width: 540px; max-width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.migration .lead{ color: rgba(255,255,255,.64); }
.checklist{ display: flex; flex-direction: column; gap: 14px; padding: 4px 0 8px; }
.checklist li{ display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 500; color: rgba(255,255,255,.78); }
.check{
  width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; background: var(--roxo);
  display: grid; place-items: center;
}
.checklist li.is-in .check{ animation: checkPop .6s var(--ease-spring) calc(var(--d, 0) * 90ms + 200ms) both; }

.diagram{ display: flex; align-items: center; gap: 28px; flex: 0 0 auto; position: relative; }
.diagram-from{ width: 220px; display: flex; flex-direction: column; gap: 12px; }
.platform{
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px; border-radius: 16px;
  background: #262626; border: 1px solid rgba(255,255,255,.08);
  font-size: 16px; font-weight: 500; color: rgba(255,255,255,.78); white-space: nowrap;
  transition: border-color .4s, background-color .4s, transform .4s var(--ease-out), color .4s;
}
.platform-dot{ transition: transform .4s var(--ease-spring), filter .4s; border-radius: 50%; }
.platform:hover, .platform.is-active{ border-color: rgba(13,13,13,.7); background: #1A1714; color: var(--branco); transform: translateX(6px); }
.platform.is-active .platform-dot, .platform:hover .platform-dot{ transform: scale(1.4); filter: brightness(2.6); }
.diagram-arrow{ position: relative; width: 56px; height: 56px; flex: 0 0 auto; }
.diagram-arrow-circle{
  position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255,255,255,.08);
  transition: background-color .3s, transform .4s var(--ease-spring);
}
.diagram-arrow-circle img{ animation: nudge 1.8s ease-in-out infinite; }
.diagram:hover .diagram-arrow-circle{ background: var(--roxo); transform: scale(1.08); }
.diagram-flow{ /* pulso que viaja da origem até a Shopify */
  position: absolute; top: 50%; left: -28px; right: -28px; height: 2px; translate: 0 -50%;
  background: linear-gradient(90deg, transparent, rgba(217,112,22,.9), transparent) no-repeat;
  background-size: 40% 100%;
  animation: flow 1.8s linear infinite;
  opacity: .9;
}
.diagram-to{
  width: 240px; padding: 28px; border-radius: 24px; background: var(--roxo);
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 0 0 0 rgba(13,13,13,.5);
  animation: haloRoxo 3s ease-out infinite;
  transition: transform .5s var(--ease-out);
}
.diagram-to:hover{ transform: translateY(-4px) rotate(-1deg); }
.diagram-to-label{ font-size: 12px; font-weight: 600; letter-spacing: .08em; opacity: .7; }
.diagram-to-name{ font-size: 36px; font-weight: 700; letter-spacing: -.03em; line-height: normal; }
.diagram-tags{ display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.diagram-tags li{
  padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.14);
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,.78); white-space: nowrap;
  transition: background-color .3s, transform .3s var(--ease-spring);
}
.diagram-tags li:hover{ background: rgba(255,255,255,.26); transform: translateX(4px); }

/* ---------- Processo ---------- */
.process{ background: var(--fundo-suave); }
.process .h2{ max-width: 760px; }
.steps{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.step{ display: flex; flex-direction: column; gap: 8px; }
.step-marker{ display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.step-num{
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid var(--roxo); background: var(--branco); color: var(--roxo);
  font-size: 14px; font-weight: 700;
  transition: background-color .35s, color .35s, transform .45s var(--ease-spring), box-shadow .35s;
}
.step.is-active .step-num, .step:hover .step-num{ background: var(--roxo); color: var(--branco); }
.step:hover .step-num{ transform: scale(1.1); box-shadow: 0 0 0 6px rgba(13,13,13,.12); }
.step.is-hit .step-num{ animation: stepHit .7s var(--ease-spring); }
.step-line{ flex: 1 1 auto; height: 2px; background: rgba(13,13,13,.2); overflow: hidden; border-radius: 2px; }
.step-line span{ display: block; height: 100%; background: var(--roxo); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out); }
.step.is-done .step-line span{ transform: scaleX(1); }
.step-title{ font-size: 20px; font-weight: 600; letter-spacing: -.01em; line-height: normal; transition: color .3s; }
.step:hover .step-title{ color: var(--roxo); }
.step-text{ font-size: 15px; line-height: 1.55; color: var(--texto-64); }

/* ---------- Cases ---------- */
.cases{ background: var(--branco); }
.cases .section-head{ margin-bottom: 48px; }
.cases-title{ max-width: 640px; }
.cases-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.case{ display: flex; flex-direction: column; gap: 24px; }
.case-media{
  position: relative; height: 300px; border-radius: 24px; overflow: hidden; background: var(--superficie);
  transform: translateZ(0);
}
.case-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.case-media::after{
  content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(13,13,13,.28));
  opacity: 0; transition: opacity .5s;
}
.case:hover .case-media img{ transform: scale(1.06); }
.case:hover .case-media::after{ opacity: 1; }
.tags{ display: flex; flex-wrap: wrap; gap: 8px; }
.tags li{
  padding: 6px 12px; border-radius: 999px; background: var(--superficie);
  font-size: 12px; font-weight: 600; color: var(--roxo); white-space: nowrap;
  transition: background-color .3s, color .3s;
}
.case:hover .tags li{ background: #EBD6F8; }
.case-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.case-title{ font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: normal; }
.case-open{
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; border: 1px solid rgba(25,25,25,.15);
  display: grid; place-items: center;
  transition: background-color .35s, border-color .35s, transform .5s var(--ease-spring);
}
.case-open img{ transition: filter .35s; }
.case:hover .case-open{ background: var(--roxo); border-color: var(--roxo); transform: rotate(45deg); }
.case:hover .case-open img{ filter: brightness(0) invert(1); }
.case-result{ display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid rgba(25,25,25,.1); position: relative; }
.case-result::before{
  content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: var(--roxo);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out);
}
.case:hover .case-result::before{ transform: scaleX(1); }
.case-value{ font-size: 36px; font-weight: 700; letter-spacing: -.03em; color: var(--roxo); white-space: nowrap; line-height: normal; }
.case-value .metric-sign{ color: inherit; }
.case-text{ font-size: 14px; line-height: 1.4; color: var(--texto-64); }

/* ---------- Depoimentos ---------- */
.testimonials{ background: var(--superficie); }
.testimonials-inner{ display: flex; gap: 48px; align-items: flex-start; }
.testimonials-head{ width: 360px; flex: 0 0 auto; display: flex; flex-direction: column; gap: 20px; position: sticky; top: 120px; }
.testimonials-cards{ flex: 1 1 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.quote{
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  padding: 36px; border-radius: 24px; background: var(--branco);
  border: 1px solid transparent;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .3s;
}
.quote:hover{ transform: translateY(-6px) rotate(-.4deg); box-shadow: 0 30px 50px -28px rgba(13,13,13,.4); border-color: rgba(13,13,13,.25); }
.quote-top{ display: flex; flex-direction: column; gap: 20px; }
.quote-stars{ font-size: 18px; letter-spacing: .1em; color: var(--roxo); white-space: nowrap; }
.quote-stars span{ display: inline-block; }
.quote.is-in .quote-stars span{ animation: starPop .5s var(--ease-spring) calc(var(--i) * 80ms + 400ms) both; }
.quote:hover .quote-stars span{ animation: starWave .6s ease calc(var(--i) * 60ms); }
.quote-text{ font-size: 19px; font-weight: 500; line-height: 1.5; letter-spacing: -.01em; }
.quote-author{ display: flex; align-items: center; gap: 14px; padding-top: 24px; border-top: 1px solid rgba(25,25,25,.1); }
.avatar{
  width: 48px; height: 48px; flex: 0 0 auto; border-radius: 50%; background: var(--preto); color: var(--branco);
  display: grid; place-items: center; font-size: 15px; font-weight: 700;
  transition: background-color .3s, transform .45s var(--ease-spring);
}
.quote:hover .avatar{ background: var(--roxo); transform: scale(1.08); }
.quote-name{ display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.quote-name strong{ font-size: 16px; font-weight: 600; }
.quote-name span{ font-size: 14px; color: var(--texto-64); }

/* ---------- CTA final ---------- */
.cta{ background: var(--branco); }
.cta-block{
  --sx: 70%; --sy: 30%;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  padding: 72px; border-radius: 32px; background: var(--roxo); color: var(--branco);
}
.cta-glow{
  position: absolute; z-index: -1; width: 520px; height: 520px; right: -140px; top: -220px;
  animation: glowDrift 12s ease-in-out infinite alternate;
}
.cta-spot{
  position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--sx) var(--sy), rgba(255,255,255,.14), transparent 60%);
}
.cta-block:hover .cta-spot{ opacity: 1; }
.cta-copy{ width: 600px; max-width: 100%; display: flex; flex-direction: column; gap: 16px; }
.cta-text{ font-size: 18px; line-height: 1.55; color: rgba(255,255,255,.64); }
.cta-actions{ display: flex; flex-direction: column; gap: 12px; width: 305px; flex: 0 0 auto; }
.cta-actions .btn{ width: 100%; }

/* ---------- Rodapé ---------- */
.footer{ background: var(--preto); color: var(--branco); padding: 80px 0 40px; }
.footer-top{ display: flex; justify-content: space-between; gap: 48px; }
.footer-brand{ width: 340px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.footer-brand p{ font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.6); }
.footer-badge{
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.15); font-size: 13px; font-weight: 600; white-space: nowrap;
}
.footer-cols{ display: flex; gap: 80px; }
.footer-col{ display: flex; flex-direction: column; align-items: flex-start; gap: 14px; white-space: nowrap; }
.footer-col-title{ font-size: 12px; font-weight: 600; letter-spacing: .08em; color: rgba(255,255,255,.45); }
.footer-col a{ font-size: 15px; font-weight: 500; color: rgba(255,255,255,.85); transition: color .2s, transform .3s var(--ease-out); }
.footer-col a:hover{ color: var(--branco); transform: translateX(4px); }
.footer-base{
  margin-top: 56px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
  font-size: 13px; color: rgba(255,255,255,.5);
}
.footer-legal{ display: flex; flex-wrap: wrap; gap: 4px 20px; }
.footer-legal a, .footer-legal button{
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font-size: 13px; transition: color .2s;
}
.footer-legal a:hover, .footer-legal button:hover{ color: var(--branco); }

/* ---------- Aviso de cookies (partials/analytics-consent.php) ---------- */
.cookie-banner{
  position: fixed; left: 24px; bottom: 24px; z-index: 200;
  display: flex; flex-direction: column; gap: 16px;
  width: min(420px, calc(100vw - 48px)); padding: 20px;
  background: var(--preto); color: var(--branco);
  border: 1px solid rgba(255,255,255,.12); border-radius: 20px;
  box-shadow: 0 20px 50px rgba(13,13,13,.35);
  animation: popIn .5s var(--ease-out) both;
}
.cookie-banner[hidden]{ display: none; }
.cookie-banner-text{ font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.8); }
.cookie-banner-text a{ color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.cookie-banner-actions{ display: flex; justify-content: flex-end; gap: 8px; }
.cookie-btn{
  padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; line-height: 1; cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.cookie-btn--ghost{ background: transparent; color: var(--branco); border: 1px solid rgba(255,255,255,.3); }
.cookie-btn--ghost:hover{ border-color: rgba(255,255,255,.7); }
.cookie-btn--primary{ background: var(--roxo); color: var(--branco); border: 1px solid transparent; }
.cookie-btn--primary:hover{ background: var(--roxo-escuro); }

/* ---------- Animações de entrada (só com JS; ver ecom.js) ---------- */
/* Entrada por animação (fill "backwards"): ao terminar, o elemento volta às
   próprias regras, então os efeitos de hover (transform/transition) continuam valendo. */
.js [data-reveal]:not(.is-in){ opacity: 0; }
.js [data-reveal].is-in{ animation: revealUp .9s var(--ease-out) backwards; animation-delay: calc(var(--d, 0) * 90ms); }
.js [data-reveal="left"].is-in{ animation-name: revealLeft; }
.js [data-reveal="scale"].is-in{ animation-name: revealScale; }

.js .hero-title .w{
  display: inline-block; opacity: 0; transform: translateY(.45em) rotate(3deg);
  animation: wordIn .9s var(--ease-out) forwards;
  animation-delay: calc(var(--i) * 70ms + 120ms);
}
.js .hero-visual .hv-window{ animation: windowIn 1.1s var(--ease-out) .25s backwards; }
.js .hero-visual .hv-orders{ animation: popIn .8s var(--ease-spring) .75s backwards, floatY 6s ease-in-out 1.6s infinite; }
.js .hero-visual .hv-conv{ animation: popIn .8s var(--ease-spring) .95s backwards, floatY 7s ease-in-out 1.8s infinite reverse; }
.js .hero-visual .hv-seal{ animation: popIn .8s var(--ease-spring) 1.15s backwards, floatY 5.5s ease-in-out 2s infinite; }
.js .hv-chart span{ animation: barIn .8s var(--ease-out) backwards; animation-delay: calc(var(--i) * 80ms + 1.1s); }

.js .diagram:not(.is-in) .platform, .js .diagram:not(.is-in) .diagram-tags li, .js .steps:not(.is-in) .step{ opacity: 0; }
.js .diagram.is-in .platform{ animation: revealLeft .6s var(--ease-out) backwards; animation-delay: calc(var(--i) * 110ms + 150ms); }
.js .diagram.is-in .diagram-tags li{ animation: revealUp .5s var(--ease-spring) backwards; animation-delay: calc(var(--i) * 120ms + 700ms); }
.js .steps.is-in .step{ animation: revealUp .7s var(--ease-out) backwards; animation-delay: calc(var(--i) * 110ms); }

@keyframes revealUp{ from{ opacity: 0; transform: translateY(28px); } }
@keyframes revealLeft{ from{ opacity: 0; transform: translateX(-24px); } }
@keyframes revealScale{ from{ opacity: 0; transform: scale(.94); } }
@keyframes wordIn{ to{ opacity: 1; transform: none; } }
@keyframes markIn{ to{ background-size: 100% .14em; } }
@keyframes windowIn{ from{ opacity: 0; transform: translateY(30px) scale(.96); } to{ opacity: 1; transform: none; } }
@keyframes popIn{ from{ opacity: 0; scale: .8; } to{ opacity: 1; scale: 1; } }
@keyframes floatY{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }
@keyframes barIn{ from{ transform: scaleY(0); } to{ transform: scaleY(1); } }
@keyframes gloss{ 0%{ transform: translateX(-130%); } 35%, 100%{ transform: translateX(130%); } }
@keyframes caret{ 50%{ opacity: 0; } }
@keyframes glowDrift{ from{ transform: translate(0, 0) scale(1); } to{ transform: translate(-60px, 50px) scale(1.12); } }
@keyframes pulseDot{ 0%, 100%{ box-shadow: 0 0 0 0 rgba(13,13,13,.45); } 60%{ box-shadow: 0 0 0 6px rgba(13,13,13,0); } }
@keyframes pulseGreen{ 0%, 100%{ box-shadow: 0 0 0 0 rgba(149,191,71,.6); } 60%{ box-shadow: 0 0 0 6px rgba(149,191,71,0); } }
@keyframes checkPop{ from{ transform: scale(0) rotate(-45deg); } to{ transform: none; } }
@keyframes nudge{ 0%, 100%{ transform: translateX(-2px); } 50%{ transform: translateX(3px); } }
@keyframes flow{ from{ background-position: -60% 0; } to{ background-position: 160% 0; } }
@keyframes haloRoxo{ 0%{ box-shadow: 0 0 0 0 rgba(13,13,13,.4); } 70%, 100%{ box-shadow: 0 0 0 18px rgba(13,13,13,0); } }
@keyframes stepHit{ 0%{ transform: scale(1); } 40%{ transform: scale(1.22); background: var(--roxo); color: var(--branco); } 100%{ transform: scale(1); } }
@keyframes starPop{ from{ opacity: 0; transform: scale(0) rotate(-60deg); } to{ opacity: 1; transform: none; } }
@keyframes starWave{ 50%{ transform: translateY(-4px) scale(1.2); } }
@keyframes marquee{ to{ transform: translateX(-50%); } }

/* ---------- Responsivo ---------- */
@media (max-width: 1180px){
  .hero{ padding: 72px 0 88px; }
  .hero-inner{ flex-direction: column; align-items: stretch; gap: 56px; }
  .hero-copy{ width: 100%; max-width: 680px; }
  .hero-visual{ align-self: center; }
  .migration-inner{ flex-direction: column; align-items: stretch; }
  .migration-copy{ width: 100%; max-width: 640px; }
  .diagram{ align-self: center; }
  .testimonials-inner{ flex-direction: column; }
  .testimonials-head{ position: static; width: 100%; max-width: 560px; }
  .testimonials-cards{ width: 100%; }
  .cta-block{ flex-direction: column; align-items: flex-start; padding: 56px; }
  .footer-top{ flex-direction: column; }
}

@media (max-width: 1024px){
  .nav-inner{ padding-block: 16px; }
  .nav-toggle{ display: block; }
  .nav-actions .nav-secondary{ display: none; }
  .nav-links{
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 24px;
    background: var(--branco); border-bottom: 1px solid #ECE6F1;
    box-shadow: 0 30px 40px -30px rgba(13,13,13,.35);
    max-height: calc(100dvh - 72px); overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity .3s, transform .4s var(--ease-out), visibility .3s;
  }
  .nav-open .nav-links{ opacity: 1; visibility: visible; transform: none; }
  .nav-link{ padding: 16px 0; font-size: 18px; border-bottom: 1px solid #F1ECF5; }
  .nav-link::after{ display: none; }
  .nav-open .nav-link{ animation: wordIn .5s var(--ease-out) both; }
  .nav-mobile-actions{ display: flex; flex-direction: column; gap: 10px; padding-top: 20px; }
  .nav-mobile-actions .btn{ padding: 14px 22px; font-size: 16px; }

  .metrics-row{ grid-template-columns: repeat(2, 1fr); }
  .metric{ padding: 32px 24px; }
  .metric:nth-child(odd){ padding-left: 0; border-left: 0; }
  .metric:nth-child(n+3){ border-top: 1px solid var(--linha); }
  .solutions-grid{ grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .steps{ grid-template-columns: 1fr; gap: 0; max-width: 560px; margin-inline: auto; }
  .step{ display: grid; grid-template-columns: 44px 1fr; column-gap: 20px; row-gap: 6px; padding-bottom: 32px; position: relative; }
  .step-marker{ grid-row: 1 / span 2; flex-direction: column; margin: 0; align-self: stretch; }
  .step-line{ width: 2px; height: auto; flex: 1 1 auto; margin-bottom: -32px; }
  .step-line span{ width: 100%; height: 100%; transform: scaleY(0); transform-origin: top; }
  .step.is-done .step-line span{ transform: scaleY(1); }
  .step-title{ padding-top: 10px; }
  .cases-grid{ grid-template-columns: repeat(2, 1fr); }
  .footer-cols{ gap: 48px; flex-wrap: wrap; }
}

@media (max-width: 768px){
  .section-head, .section-head.split{ flex-direction: column; align-items: flex-start; margin-bottom: 40px; gap: 20px; }
  .section-head.center{ align-items: center; }
  .hero{ padding: 48px 0 64px; }
  .hero-copy{ gap: 24px; }
  .hero-text{ font-size: 17px; }
  .hero-stats{ gap: 18px; }
  .hero-stat strong{ font-size: 22px; }
  .hero-inner{ gap: 40px; }
  .hero-visual{ width: min(576px, 100% + 8px); }

  .announce{ font-size: 12px; }
  .announce-bullet, .announce-text{ display: none; }

  .brands{ padding: 32px 0; }
  .brands-track{ mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
  .brands-row{ width: max-content; justify-content: flex-start; gap: 56px; padding-right: 56px; animation: marquee 22s linear infinite; }
  .brand[aria-hidden="true"]{ display: flex; }

  .metric-value{ font-size: 40px; }
  .metric-text{ font-size: 14px; }
  .solutions-grid, .cases-grid, .testimonials-cards{ grid-template-columns: 1fr; }
  .sol-card{ min-height: 0; padding: 28px; }
  .case-media{ height: auto; aspect-ratio: 384 / 300; }

  .diagram{ flex-direction: column; width: 100%; gap: 16px; }
  .diagram-from{ width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .platform{ padding: 14px 16px; font-size: 15px; }
  .platform:hover, .platform.is-active, .js .diagram.is-in .platform:hover, .js .diagram.is-in .platform.is-active{ transform: translateY(-3px); }
  .diagram-arrow{ transform: rotate(90deg); }
  .diagram-to{ width: 100%; }
  .diagram-tags{ flex-direction: row; flex-wrap: wrap; }

  .quote{ padding: 28px; }
  .quote-text{ font-size: 17px; }
  .cta-block{ padding: 40px 24px; border-radius: 24px; }
  .cta-actions{ width: 100%; }
  .cta-glow{ right: -260px; top: -300px; }
  .footer{ padding-top: 64px; }
  .footer-brand{ width: 100%; }
  .footer-cols{ display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .cookie-banner{ left: 16px; right: 16px; bottom: 16px; width: auto; }
  .cookie-banner-actions .cookie-btn{ flex: 1; }
}

@media (max-width: 420px){
  .hero-stats{ gap: 14px; }
  .hero-stat > span{ font-size: 12px; }
  .metrics-row{ grid-template-columns: 1fr; }
  .metric, .metric:nth-child(odd){ padding: 28px 0; border-left: 0; }
  .metric + .metric{ border-top: 1px solid var(--linha); }
  .hero-ctas .btn{ flex: 1 1 auto; }
}

/* Telas sem mouse: sem efeitos de hover "presos" e sem parallax */
@media (hover: none){
  .sol-card:hover, .quote:hover, .platform:hover{ transform: none; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js [data-reveal], .js .hero-title .w, .js .platform, .js .step, .js .diagram-tags li{ opacity: 1 !important; transform: none !important; animation: none !important; }
  .brands-row{ animation: none !important; }
  .hero-mark{ background-size: 100% .14em; }
}

/* =====================================================================
   TEMA — cores e tipografia na linha de budadigital.com.br
   Space Grotesk fina (300) + negrito (700), preto / branco / cinza #F5F5F7,
   violeta #0D0D0D (sobre o preto #D97016), rosa #FF007F, cantos retos,
   botões e etiquetas em caixa alta com espaçamento largo, números em mono.
   Fica no fim do arquivo de propósito: sobrescreve as regras acima.
   ===================================================================== */
@font-face{
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/SpaceGrotesk-var-latin.woff2') format('woff2');
}
@font-face{
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/JetBrainsMono-var-latin.woff2') format('woff2');
}
:root{
  --roxo: #0D0D0D;
  --roxo-escuro: #000000;
  --roxo-claro: #D97016;
  --rosa: #FF007F;
  --preto: #000000;
  --card-escuro: #050505;
  --borda-escura: #333333;
  --fundo-suave: #F5F5F7;
  --superficie: #F5F5F7;
  --linha: #E5E5E5;
  --borda-card: #E5E5E5;
  --texto: #364153;
  --texto-64: #4A5565;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --sombra-roxa: 0 24px 48px -12px rgba(0,0,0,.45);
}
body.ecom{ font-family: 'Space Grotesk', system-ui, sans-serif; color: var(--preto); }

/* Sora no site todo; o header (barra de anúncio + menu) continua em Space Grotesk.
   Os números em mono (--mono) não mudam. */
@font-face{
  font-family: 'Sora';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/Sora-var-latin.woff2') format('woff2');
}
body.ecom{ font-family: 'Sora', system-ui, sans-serif; }
body.ecom .announce, body.ecom .nav{ font-family: 'Space Grotesk', system-ui, sans-serif; }
/* Sora é mais larga: títulos grandes com menos aperto e botões do CTA que crescem com o texto */
body.ecom .hero-title, body.ecom .legal-title{ letter-spacing: -.03em; }
/* hero em 3 linhas no desktop: "E-commerce que / vende mais, do / design ao checkout."
   (largura em em para manter as quebras em qualquer tamanho da fonte) */
@media (min-width: 1025px){ body.ecom .hero-title{ width: 9.7em; max-width: none; } }
body.ecom .cta-actions{ width: auto; min-width: 305px; }
@media (max-width: 640px){ body.ecom .cta-actions{ width: 100%; min-width: 0; } }
/* "Como trabalhamos": título em 2 linhas no desktop (com Sora, 760px dava 3) */
body.ecom .process .section-head.center, body.ecom .process .h2{ max-width: 1100px; text-wrap: balance; }
body.ecom .process .section-head .lead{ max-width: 760px; }
/* "Cases": título em 2 linhas ao lado do botão */
body.ecom .cases-title{ max-width: 920px; }
body.ecom .cases-title .h2{ text-wrap: balance; }

/* cantos retos em tudo (menos bolinhas e avatares) */
body.ecom *, body.ecom *::before, body.ecom *::after{ border-radius: 0 !important; }
body.ecom .pill-dot, body.ecom .pulse-dot, body.ecom .avatar, body.ecom .platform-dot,
body.ecom .cv-live, body.ecom .cv-benefits img{ border-radius: 50% !important; }

/* ---- tipografia ---- */
.eyebrow{ font-size: 12px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--roxo); }
.eyebrow-light, .migration .eyebrow, .cta .eyebrow{ color: var(--roxo-claro); }
.h2{ font-size: clamp(34px, 4.4vw, 58px); font-weight: 300; line-height: 1.2; letter-spacing: -.025em; }
.h2-48{ font-size: clamp(32px, 3.7vw, 48px); }
.h2 strong{ font-weight: 700; }
.lead{ font-size: 18px; font-weight: 300; line-height: 1.625; color: var(--texto); }
.hero-title{ font-weight: 300; letter-spacing: -.05em; line-height: .98; font-size: clamp(42px, 6vw, 76px); }
.hero-mark{ color: inherit; font-weight: 700; background: none; animation: none; }
.sol-title, .step-title, .case-title, .quote-name strong{ font-weight: 700; letter-spacing: -.025em; }
.sol-text, .step-text, .case-text, .metric-text, .quote-name span{ font-weight: 300; color: var(--texto-64); }
.quote-text{ font-weight: 400; }

/* ---- botões ---- */
.btn{ font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 14px 22px; border-width: 2px; }
.btn-lg{ font-size: 13px; padding: 18px 30px; }
.btn::after{ display: none; }
.btn-primary{ background: var(--preto); color: #fff; border-color: var(--preto); }
.btn-primary:hover{ background: var(--roxo); border-color: var(--roxo); box-shadow: none; }
.btn-outline{ border-color: var(--preto); color: var(--preto); }
.btn-outline:hover{ background: var(--preto); color: #fff; }
.btn-white{ background: #fff; color: var(--preto); border-color: #fff; }
.btn-white:hover{ background: var(--roxo-claro); border-color: var(--roxo-claro); box-shadow: none; }
.btn-ghost-light{ border-color: #fff; color: #fff; }
.btn-ghost-light:hover{ background: #fff; color: var(--preto); }
/* sobre fundo preto: botão principal branco, contorno branco */
.hero .btn-primary, .migration .btn-primary{ background: #fff; color: var(--preto); border-color: #fff; }
.hero .btn-primary .btn-arrow, .migration .btn-primary .btn-arrow{ filter: invert(1); }
.hero .btn-primary:hover, .migration .btn-primary:hover{ background: var(--roxo-claro); border-color: var(--roxo-claro); }
.hero .btn-outline{ border-color: #fff; color: #fff; }
.hero .btn-outline:hover{ background: #fff; color: var(--preto); }

/* ---- menu ---- */
.announce{ background: var(--preto); letter-spacing: .02em; }
.announce-link{ color: var(--roxo-claro); }
.nav{ background: rgba(255,255,255,.94); border-bottom-color: var(--linha); }
.nav-link, .nav-secondary{ font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--preto); }
.nav-link{ opacity: .85; }
.nav-link:hover, .nav-link.is-current, .nav-link.is-page{ opacity: 1; }
.nav-link.is-page{ color: var(--roxo); }
.nav-toggle{ border-color: var(--linha); }
/* header novo (Figma 533:1163): símbolo + logotipo, blur 7px, botão 16.5/24 */
.nav{ backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
/* assinatura (Figma 544:6169): símbolo e logotipo com a mesma altura, espaço = 18/48 da altura.
   Altura em --logo-h (painel: Cabeçalho / Rodapé → Logo); padrão 30px no menu, 48px no rodapé. */
.nav-logo, .footer-logo{ display: flex; align-items: center; gap: calc(var(--logo-h) * .375); }
.nav-logo{ --logo-h: 30px; }
.footer-logo{ --logo-h: 48px; }
body.ecom .nav-logo img, .footer-logo img{ display: block; flex: none; height: var(--logo-h); width: auto; }
@media (max-width: 640px){
  .nav-logo{ --logo-h-max: 20px; } /* Figma mobile 545:6569 */
  .footer-logo{ --logo-h-max: 28px; }
  body.ecom .nav-logo img, .footer-logo img{ height: min(var(--logo-h), var(--logo-h-max)); }
  .nav-logo, .footer-logo{ gap: calc(min(var(--logo-h), var(--logo-h-max)) * .375); }
}
.nav-link{ color: #0D0D0D; }
.nav-actions .btn{ padding: 16.5px 24px; letter-spacing: .12em; }
@media (max-width: 1024px){ .nav-actions{ margin-left: auto; } }
/* no celular o botão fica dentro do menu (nav-mobile-actions) */
@media (max-width: 640px){ .nav-actions{ display: none; } .nav-toggle{ margin-left: auto; } }

/* ---- hero escuro ---- */
.hero{
  background-color: var(--preto); color: #fff;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
}
.hero-glow{ background: radial-gradient(closest-side, rgba(13,13,13,.38), transparent); }
.hero-title{ color: #fff; }
.hero-text{ color: rgba(255,255,255,.8); font-weight: 300; font-size: 20px; line-height: 1.625; }
.hero-stat strong{ color: #fff; font-weight: 700; }
.hero-stat > span{ color: rgba(255,255,255,.62); }
.hero-stats-sep{ background: rgba(255,255,255,.25); }
.pill{
  background: none; border: 0; padding: 2px 0 2px 16px; border-left: 2px solid var(--rosa);
  font-size: 12px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.85);
}
.pill .pill-dot{ display: none; }
.hv-window{ background: var(--card-escuro); border: 1px solid var(--borda-escura); }
.hv-url{ font-family: var(--mono); }
.hv-seal{ background: var(--card-escuro); border: 1px solid var(--borda-escura); }
.hv-conv-note, .hv-orders-delta{ color: var(--roxo); }
.hv-chart span{ background: #EFE6DA; }
.hv-chart span.is-peak{ background: var(--roxo); }
a.hv-window:hover{ box-shadow: 0 30px 70px -10px rgba(13,13,13,.45); }

/* ---- marcas e números ---- */
.brands-label{ font-size: 12px; font-weight: 700; letter-spacing: .24em; color: var(--texto-64); }
.metric-value{ font-weight: 300; letter-spacing: -.04em; }
.metric-value .metric-sign{ color: var(--roxo); font-weight: 700; }
.metric::before{ background: var(--roxo); }

/* ---- soluções ---- */
.solutions{ background: var(--fundo-suave); }
.sol-card{ background: #fff; border: 1px solid var(--borda-card); }
.sol-card:hover{ background: #fff; border-color: var(--preto); box-shadow: 0 24px 40px -28px rgba(0,0,0,.35); }
.sol-card::before{ background: radial-gradient(360px circle at var(--mx) var(--my), rgba(13,13,13,.08), transparent 60%); }
.sol-card.is-featured, .sol-card.is-featured:hover{ background: var(--preto); border-color: var(--preto); }
.sol-card.is-featured::before{ background: radial-gradient(380px circle at var(--mx) var(--my), rgba(217,112,22,.22), transparent 60%); }
.sol-icon{ background: var(--fundo-suave); border-color: var(--borda-card); }
.sol-link{ font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--roxo); }
.sol-card.is-featured .sol-link{ color: var(--roxo-claro); }

/* ---- migração ---- */
.migration{ background: var(--preto); }
.migration::before{ background: radial-gradient(closest-side, rgba(13,13,13,.35), transparent); }
.platform{ background: var(--card-escuro); border-color: var(--borda-escura); }
.platform:hover, .platform.is-active{ border-color: var(--roxo-claro); background: #1A1714; }
.diagram-arrow-circle{ background: var(--card-escuro); border: 1px solid var(--borda-escura); }
.diagram:hover .diagram-arrow-circle{ background: var(--roxo); border-color: var(--roxo); }
.diagram-to-label{ font-family: var(--mono); letter-spacing: .12em; }
.diagram-flow{ background-image: linear-gradient(90deg, transparent, rgba(217,112,22,.9), transparent); }

/* ---- processo ---- */
.process{ background: #fff; }
.step-num{ font-family: var(--mono); font-weight: 500; font-size: 13px; border-color: var(--preto); color: var(--preto); }
.step.is-active .step-num, .step:hover .step-num{ background: var(--roxo); border-color: var(--roxo); color: #fff; }
.step:hover .step-num{ box-shadow: 0 0 0 6px rgba(13,13,13,.12); }
.step-line{ background: rgba(13,13,13,.18); }

/* ---- cases ---- */
.cases{ background: var(--fundo-suave); }
.case-media{ background: #fff; }
.tags li{ background: #fff; color: var(--roxo); font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .02em; border: 1px solid var(--borda-card); }
.case:hover .tags li{ background: #fff; border-color: var(--roxo); }
.case-open{ border-color: var(--preto); }
.case-result{ border-top-color: var(--linha); }
.case-value{ font-weight: 300; letter-spacing: -.04em; }

/* ---- depoimentos ---- */
.testimonials{ background: #fff; }
.quote{ background: var(--fundo-suave); border-color: var(--fundo-suave); }
.quote:hover{ border-color: var(--preto); box-shadow: 0 24px 40px -30px rgba(0,0,0,.35); }
.quote-author{ border-top-color: var(--linha); }

/* ---- chamada final ---- */
.cta-block{ background: var(--preto); }
.cta-block::before{
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px circle at 85% 0%, rgba(13,13,13,.45), transparent 65%),
              radial-gradient(420px circle at 0% 120%, rgba(255,0,127,.18), transparent 60%);
}
.cta-title{ color: #fff; }
.cta-text{ color: rgba(255,255,255,.72); font-weight: 300; }
.cta-spot{ background: radial-gradient(420px circle at var(--sx) var(--sy), rgba(217,112,22,.16), transparent 60%); }

/* ---- rodapé claro ---- */
.footer{ background: #fff; color: var(--preto); border-top: 1px solid var(--linha); }
.footer-brand p{ color: var(--texto-64); font-weight: 300; }
.footer-badge{ border-color: var(--linha); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.footer-col-title{ font-size: 12px; font-weight: 700; letter-spacing: .24em; color: var(--texto-64); }
.footer-col a{ color: var(--texto); font-weight: 400; }
.footer-col a:hover{ color: var(--preto); }
.footer-base{ border-top-color: var(--linha); color: var(--texto-64); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.footer-legal a:hover, .footer-legal button:hover{ color: var(--preto); }

/* ---- aviso de cookies ---- */
.cookie-banner{ background: var(--preto); border-color: var(--borda-escura); }
.cookie-btn{ font-size: 12px; letter-spacing: .1em; text-transform: uppercase; border-width: 2px; }
.cookie-btn--primary{ background: #fff; color: var(--preto); }
.cookie-btn--primary:hover{ background: var(--roxo-claro); }

/* ajustes do tema */
.hv-card{ color: var(--preto); }
.hero-title{ font-size: clamp(40px, 5.2vw, 66px); }
.cta-glow{ opacity: .45; }
.footer-legal button{ text-transform: inherit; letter-spacing: inherit; font-size: 12px; }

/* =====================================================================
   EFEITOS REDUZIDOS — versão mais sóbria enquanto a paleta é definida.
   Sai: brilhos coloridos, loops infinitos, efeitos que seguem o mouse,
   reflexo nos botões e giros/zooms no hover. Fica: entradas no scroll,
   contadores, linha do processo e trocas de cor/borda no hover.
   Para voltar ao que era, basta apagar este bloco.
   ===================================================================== */
.hero-glow, .cta-glow, .cta-spot, .migration::before, .sol-card::before, .cta-block::before{ display: none; }
.btn::after, .hv-shot::after{ display: none; }
.btn, [data-depth]{ translate: none !important; }
.pill-dot, .pulse-dot, .diagram-arrow-circle img, .diagram-to{ animation: none; }
.diagram-flow{ animation: none; background-image: none; }
.js .hero-visual .hv-orders, .js .hero-visual .hv-conv, .js .hero-visual .hv-seal{ animation: popIn .6s var(--ease-out) .6s backwards; }
.btn:hover .btn-arrow, .sol-card:hover .sol-link img{ transform: translateX(2px); }
.brand:hover, .metric:hover .metric-sign, .diagram:hover .diagram-arrow-circle, .diagram-to:hover,
.case:hover .case-open, .quote:hover .avatar, .step:hover .step-num, .platform:hover, .platform.is-active,
.diagram-tags li:hover, .announce-link:hover, .footer-col a:hover{ transform: none; }
.sol-card:hover, .quote:hover{ transform: translateY(-2px); }
.case:hover .case-media img, a.hv-window:hover .hv-shot img{ transform: none; }
.step:hover .step-num{ box-shadow: none; }
.step.is-hit .step-num, .quote:hover .quote-stars span{ animation: none; }

/* =====================================================================
   PALETA DE TESTE — preto #0D0D0D + laranja #D97016 + caramelo #BF9663.
   O preto é a base (fundos escuros, títulos, botões); o laranja é o
   destaque (var --amarelo, nome mantido) — só sobre o preto ou como fundo
   com texto preto. O caramelo (var --cinza) fica nos textos de apoio sobre
   o preto e nos fios; claro, vira os fundos areia. Sobre branco, o tom de
   destaque em texto é o caramelo escuro (--caramelo-escuro).
   ===================================================================== */
:root{
  --amarelo: #D97016;
  --preto: #0D0D0D;
  --roxo: var(--preto);
  --roxo-escuro: color-mix(in srgb, var(--preto) 80%, #000);
  --roxo-claro: var(--amarelo);
  --rosa: var(--amarelo);
  --card-escuro: #1A1714;
  --borda-escura: #3A3128;
  --texto: #3B342B;
  --texto-64: #6B5F50;
  --fundo-suave: #F8F4EE;
  --superficie: var(--fundo-suave);
  --linha: #EAE1D4;
  --borda-card: var(--linha);
}
/* destaque laranja com texto preto */
.btn-primary:hover{ background: var(--amarelo); border-color: var(--amarelo); color: var(--preto); }
.btn-primary:hover .btn-arrow{ filter: invert(1); }
.hero .btn-primary:hover, .migration .btn-primary:hover, .btn-white:hover{ color: var(--preto); }
.hero-mark{ color: var(--amarelo); }
.step.is-active .step-num, .step:hover .step-num{ background: var(--amarelo); border-color: var(--amarelo); color: var(--preto); }
.metric::before, .hv-chart span.is-peak{ background: var(--amarelo); }
.hv-chart span{ background: color-mix(in srgb, var(--cinza) 20%, #fff); }
.diagram-to{ background: var(--amarelo); color: var(--preto); }
.diagram:hover .diagram-arrow-circle{ background: var(--amarelo); border-color: var(--amarelo); }
.diagram:hover .diagram-arrow-circle img{ filter: brightness(0); }
.platform:hover, .platform.is-active{ background: var(--card-escuro); }
.cookie-btn--primary:hover{ color: var(--preto); }
.scroll-progress span{ background: var(--amarelo); }
.diagram-tags li{ color: #000; background: rgba(0,0,0,.07); }
.diagram-tags li:hover{ background: rgba(0,0,0,.12); }
.hero{ background-image: none; }

/* fios de energia do diagrama de migração (desenhados pelo ecom.js) */
.diagram-arrow{ margin-left: 20px; }
.diagram-from, .diagram-arrow, .diagram-to{ position: relative; z-index: 1; }
.diagram-wires{ position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 0; }
.wire-base{ fill: none; stroke: var(--amarelo); stroke-width: 1.5; opacity: .55; }
.wire-pulse{
  fill: none; stroke: var(--amarelo); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 12 188; stroke-dashoffset: 12;
  filter: drop-shadow(0 0 4px var(--amarelo));
  animation: wireFlow 2.4s linear infinite;
}
.diagram-arrow-circle{ border-color: color-mix(in srgb, var(--amarelo) 55%, transparent); }
@keyframes wireFlow{ from{ stroke-dashoffset: 12; } to{ stroke-dashoffset: -100; } }
@media (max-width: 768px){ .diagram-arrow{ margin-left: 0; } .diagram-wires{ display: none; } }
@media (prefers-reduced-motion: reduce){ .wire-pulse{ display: none; } }

/* hero: composição sem efeitos de hover */
a.hv-window:hover{ box-shadow: var(--sombra-roxa); }
.hv-card:hover, .hv-seal:hover{ scale: none; }

/* caramelo #BF9663 da paleta (var --cinza): textos de apoio sobre o preto, linhas e fios */
:root{ --cinza: #BF9663; }
.hero-text, .hero-stat > span, .migration .lead, .cta-text, .sol-card.is-featured .sol-text{ color: var(--cinza); }
.hero-stats-sep{ background: var(--cinza); }
.platform{ color: color-mix(in srgb, var(--cinza) 25%, #fff); }
.platform-dot{ filter: grayscale(1); }
.wire-base{ stroke: var(--cinza); opacity: .8; }
.step-line{ background: color-mix(in srgb, var(--cinza) 30%, transparent); }

/* harmonia preto + laranja + caramelo: o laranja pontua (marca do título,
   números, estrelas, sublinhado do menu); o caramelo escuro faz os rótulos
   sobre fundo claro, onde o laranja e o caramelo puros ficariam fracos */
:root{ --caramelo-escuro: #8A6538; }
.eyebrow{ color: var(--caramelo-escuro); }
.eyebrow-light, .migration .eyebrow, .cta .eyebrow{ color: var(--cinza); }
.tags li{ color: var(--caramelo-escuro); }
.case:hover .tags li{ border-color: var(--cinza); }
.metric-value .metric-sign, .quote-stars{ color: var(--amarelo); }
.metric::before{ background: var(--amarelo); }
.nav-link::after{ background: var(--amarelo); }
.diagram-to-label{ color: color-mix(in srgb, var(--preto) 60%, transparent); }
.announce-link{ color: var(--amarelo); }

/* ícones inline (site_icon): seguem a cor do texto via currentColor */
.sol-icon, .hv-conv-icon, .btn-white .btn-arrow{ color: var(--preto); }
.sol-icon svg{ transition: color .35s; }
.sol-card:hover .sol-icon{ color: #fff; }
.hv-conv-icon svg{ width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.sol-link svg{ transition: transform .35s var(--ease-out); }
.sol-card:hover .sol-link svg{ transform: translateX(2px); }

/* =====================================================================
   CELULAR (até 640px) — Figma "Mobile E-commerce Pro" (545:6569, 390px).
   Fica no fim de propósito: sobrescreve o tema e os breakpoints acima.
   Seções com 40px em cima/embaixo; Soluções, Processo, Cases e Depoimentos
   viram carrossel lateral (.carousel-ind + ecom.js); colunas do rodapé em acordeão.
   ===================================================================== */
.carousel-ind{ display: none; }
@media (max-width: 640px){
  body.ecom{ --gutter: 20px; }
  body.ecom .section{ padding-block: 40px; }
  /* Sora é ~8% mais larga que a Space Grotesk do Figma: 32/30 aqui ≈ 34/32 lá (mesmas quebras) */
  body.ecom .h2{ font-size: 32px; line-height: 1.12; }
  body.ecom .h2-48{ font-size: 30px; }
  body.ecom .lead{ font-size: 16px; line-height: 1.5; }
  body.ecom .section-head, body.ecom .section-head.split{ margin-bottom: 32px; gap: 16px; }
  body.ecom .section-title-wrap{ gap: 16px; }
  body.ecom .btn-lg{ padding: 20px 32px; font-size: 13px; letter-spacing: .12em; }

  /* faixa de aviso: destaque em cima, texto embaixo, sem o link */
  body.ecom .announce{ padding: 10px 16px; font-size: 13px; }
  body.ecom .announce p{ flex-direction: column; gap: 2px; }
  body.ecom .announce-text{ display: block; }
  body.ecom .announce-bullet, body.ecom .announce-link{ display: none; }

  /* menu: 66px, ☰ de 3 traços (24/24/16) sem caixa */
  body.ecom .nav-inner{ padding-block: 18px; }
  body.ecom .nav-toggle{ flex: 0 0 30px; width: 30px; height: 30px; border: 0; background: none; }
  body.ecom .nav-toggle span{ left: auto; right: 3px; width: 24px; }
  body.ecom .nav-toggle span:nth-child(1){ top: 7px; }
  body.ecom .nav-toggle span:nth-child(2){ top: 14px; }
  body.ecom .nav-toggle span:nth-child(3){ top: 21px; width: 16px; }
  body.ecom.nav-open .nav-toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  body.ecom.nav-open .nav-toggle span:nth-child(3){ width: 24px; transform: translateY(-7px) rotate(-45deg); }
  body.ecom .nav-links{ max-height: calc(100dvh - 66px); }

  /* hero */
  body.ecom .hero{ padding: 36px 0 32px; }
  body.ecom .hero-inner{ gap: 40px; }
  body.ecom .hero-copy{ gap: 24px; }
  body.ecom .hero-title{ font-size: 37px; line-height: 1.12; letter-spacing: -.04em; }
  body.ecom .hero-text{ font-size: 17px; line-height: 1.5; }
  body.ecom .hero-ctas{ flex-direction: column; width: 100%; gap: 12px; }
  body.ecom .hero-ctas .btn{ width: 100%; }
  body.ecom .hero-stats{ width: 100%; justify-content: space-between; gap: 0; }
  body.ecom .hero-stat strong{ font-size: 22px; }
  body.ecom .hero-stat > span{ font-size: 13px; }
  body.ecom .hero-visual{ width: 100%; }

  /* marcas: paradas, quebrando linha, a 78% do tamanho */
  body.ecom .brands{ padding: 22px 0; }
  body.ecom .brands-label{ font-size: 12px; }
  body.ecom .brands-track{ mask-image: none; -webkit-mask-image: none; }
  body.ecom .brands-row{ width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: 16px 20px; padding: 0; animation: none; }
  body.ecom .brand[aria-hidden="true"]{ display: none; }
  body.ecom .brand img{ zoom: .78; }

  /* números: 2 × 2 */
  body.ecom .metrics-row{ grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 24px; }
  body.ecom .metric, body.ecom .metric:nth-child(odd){ padding: 28px 8px 28px 0; border: 0; }
  body.ecom .metric:nth-child(even){ padding-left: 20px; border-left: 1px solid var(--linha); }
  body.ecom .metric + .metric{ border-top: 0; }
  body.ecom .metric-value{ font-size: 34px; line-height: 1.12; }
  body.ecom .metric-text{ font-size: 15px; line-height: 1.45; }

  /* carrosséis laterais */
  body.ecom .solutions-grid, body.ecom #processo .steps, body.ecom .cases-grid, body.ecom #depoimentos .testimonials-cards{
    display: flex; grid-template-columns: none; gap: 12px; max-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    overscroll-behavior-x: contain; scrollbar-width: none;
  }
  body.ecom .solutions-grid::-webkit-scrollbar, body.ecom #processo .steps::-webkit-scrollbar,
  body.ecom .cases-grid::-webkit-scrollbar, body.ecom #depoimentos .testimonials-cards::-webkit-scrollbar{ display: none; }
  body.ecom .solutions-grid > *, body.ecom #processo .steps > *, body.ecom .cases-grid > *, body.ecom #depoimentos .testimonials-cards > *{ scroll-snap-align: start; }
  .carousel-ind{ display: flex; align-items: center; justify-content: space-between; margin-top: 32px; }
  .testimonials-inner > .carousel-ind{ margin-top: 0; width: 100%; }
  .carousel-dots{ display: flex; align-items: center; gap: 6px; }
  body.ecom .carousel-dots button{
    width: 6px; height: 6px; padding: 0; border: 0; border-radius: 3px !important; cursor: pointer;
    background: #D9CDBB; transition: width .3s var(--ease-out), background-color .3s;
  }
  body.ecom .carousel-dots button.is-active{ width: 20px; background: var(--amarelo); }
  .carousel-hint{ font-family: var(--mono); font-size: 11px; letter-spacing: .11em; text-transform: uppercase; color: var(--caramelo-escuro); }

  /* soluções */
  body.ecom .sol-card{ flex: 0 0 270px; min-height: 340px; padding: 33px 24px; background: var(--branco); }
  body.ecom .sol-text{ font-size: 16px; line-height: 1.55; }

  /* migração */
  body.ecom .migration-inner{ gap: 40px; }
  body.ecom .migration-copy{ gap: 22px; }
  body.ecom .migration-copy .btn{ width: 100%; }
  body.ecom .checklist{ padding: 4px 0; }
  body.ecom .diagram{ gap: 12px; }
  body.ecom .diagram-from{ grid-template-columns: 1fr 1fr; gap: 10px; }
  body.ecom .platform{ height: 52px; padding: 0 14px; gap: 10px; font-size: 15px; }
  body.ecom .diagram-arrow{ display: none; }
  body.ecom .diagram-to{ padding: 28px; gap: 16px; }
  body.ecom .diagram-to-name{ font-size: 28px; }
  body.ecom .diagram-tags{ flex-direction: column; align-items: flex-start; }

  /* processo: etapas lado a lado, com a linha na horizontal */
  body.ecom .process .section-head{ margin-bottom: 36px; }
  body.ecom #processo .step{ display: flex; flex-direction: column; gap: 8px; flex: 0 0 250px; padding-bottom: 0; }
  body.ecom #processo .step-marker{ flex-direction: row; align-self: auto; margin: 0 0 12px; }
  body.ecom #processo .step-line{ width: auto; height: 2px; flex: 1 1 auto; margin-bottom: 0; }
  body.ecom #processo .step-line span{ transform: scaleX(0); transform-origin: left; }
  body.ecom #processo .step.is-done .step-line span{ transform: scaleX(1); }
  body.ecom #processo .step-title{ padding-top: 0; font-size: 17px; }
  body.ecom #processo .step-text{ font-size: 15px; line-height: 1.55; }

  /* cases */
  body.ecom .cases .section-head{ gap: 24px; }
  body.ecom .cases-title{ max-width: none; }
  body.ecom .case{ flex: 0 0 280px; }
  body.ecom .case-media{ height: 300px; aspect-ratio: auto; }
  body.ecom .case-value{ font-size: 28px; }
  body.ecom .case-text{ font-size: 14px; line-height: 1.4; }

  /* depoimentos */
  body.ecom #depoimentos .testimonials-inner{ gap: 32px; }
  body.ecom .testimonials-head{ gap: 20px; }
  body.ecom #depoimentos .quote{ flex: 0 0 300px; min-height: 448px; padding: 37px 24px; }
  body.ecom .quote-text{ font-size: 19px; line-height: 1.5; }

  /* chamada final */
  body.ecom .cta-block{ gap: 28px; padding: 36px 24px; }
  body.ecom .cta-copy{ gap: 16px; }
  body.ecom .cta-text{ font-size: 16px; line-height: 1.5; }
  body.ecom .cta-actions .btn{ padding-inline: 13px; font-size: 11px; letter-spacing: .05em; white-space: normal; text-align: center; }

  /* rodapé: colunas em acordeão (a 1ª aberta; ecom.js alterna .is-open) */
  body.ecom .footer{ padding: 45px 0 22px; }
  body.ecom .footer-top{ gap: 32px; }
  body.ecom .footer-brand{ gap: 20px; }
  body.ecom .footer-brand p{ font-size: 15px; line-height: 24px; }
  body.ecom .footer-cols{ display: block; }
  body.ecom .footer-col{
    display: flex; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 0;
    border-bottom: 1px solid var(--linha); white-space: normal;
    transition: padding-bottom .4s var(--ease-out);
  }
  body.ecom .footer-col-title{
    display: flex; align-items: center; justify-content: space-between; padding: 18px 0; cursor: pointer;
  }
  body.ecom .footer-col-title::after{
    content: ""; width: 16px; height: 16px; flex: none; transition: transform .3s var(--ease-out);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M3 5.5 8 10.5 13 5.5' stroke='%236B5F50' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E") no-repeat center;
  }
  body.ecom .footer-col.is-open .footer-col-title::after{ transform: rotate(180deg); }
  /* abrir/fechar suave: a coluna cresce e os links surgem um a um (desce 6px + fade) */
  body.ecom .footer-col a{
    display: block; font-size: 15px; line-height: 19px; overflow: hidden;
    max-height: 0; margin-top: 0; opacity: 0; transform: translateY(-6px); visibility: hidden;
    transition: max-height .4s var(--ease-out), margin-top .4s var(--ease-out),
                opacity .25s ease, transform .25s ease, visibility 0s linear .4s;
  }
  body.ecom .footer-col.is-open{ padding-bottom: 20px; }
  body.ecom .footer-col.is-open a{
    max-height: 40px; margin-top: 14px; opacity: 1; transform: none; visibility: visible;
    transition: max-height .4s var(--ease-out), margin-top .4s var(--ease-out),
                opacity .45s ease var(--d, 0ms), transform .45s var(--ease-out) var(--d, 0ms), visibility 0s;
  }
  body.ecom .footer-col.is-open a:first-of-type{ margin-top: 0; }
  body.ecom .footer-col a:nth-of-type(2){ --d: 50ms; }
  body.ecom .footer-col a:nth-of-type(3){ --d: 100ms; }
  body.ecom .footer-col a:nth-of-type(4){ --d: 150ms; }
  body.ecom .footer-col a:nth-of-type(5){ --d: 200ms; }
  body.ecom .footer-col a:nth-of-type(n+6){ --d: 250ms; }
  body.ecom .footer-base{ flex-direction: column; gap: 14px; margin-top: 32px; padding-top: 29px; }
  body.ecom .footer-legal{ gap: 8px 16px; }
}