/* ════════════════════════════════════════════════════════════════
   GestorPhone — Landing Page
   Tokens derivados de Guias/design-system-gestorphone.md
   ════════════════════════════════════════════════════════════════ */

/* Fontes locais, servidas do próprio domínio (assets/fonts/) com cache de 1
   ano, em vez de Fontshare/Google. Tira uma origem externa do caminho crítico
   e acaba com o "pisca" do título no primeiro carregamento. Satoshi não tem
   peso 600: font-weight 600 no CSS cai no 700, igual era com o Fontshare. */
@font-face {
  font-family: 'Satoshi'; src: url('/assets/fonts/satoshi-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi'; src: url('/assets/fonts/satoshi-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi'; src: url('/assets/fonts/satoshi-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi'; src: url('/assets/fonts/satoshi-900.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inconsolata'; src: url('/assets/fonts/inconsolata.woff2') format('woff2');
  font-weight: 500 600; font-style: normal; font-display: swap;
}

:root {
  /* Cores — light mode (design-system-gestorphone.md) */
  --primary: #0c3d5e;
  --primary-h: #0a3450;
  --primary-foreground: #ffffff;
  --background: #f7f9fb;
  --foreground: #111c26;
  --card: #ffffff;
  --muted: #eef0f3;
  --muted-foreground: #67707e;
  --secondary: #f1f4f7;
  --accent: #1e2d45;
  --accent-foreground: #ffffff;
  --border: #dde3ea;
  --success: #2dba6e;
  --warning: #f59e0b;
  --destructive: #f03e3e;

  /* Acento vivo — reaproveita o --primary do dark mode do design system (199 89% 48%) */
  --cyan: #0ea5e9;
  --cyan-soft: #38bdf8;

  /* Sidebar / seções escuras */
  --navy-950: #0a1420;
  --navy-900: #0d1b2b;
  --navy-800: #122236;

  --r-sm: 0.5rem;
  --r-md: 0.625rem;
  --r-lg: 0.75rem;

  --sh-card: 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --sh-elevated: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --sh-glow: 0 0 0 1px rgba(14,165,233,0.25), 0 8px 30px -8px rgba(14,165,233,0.35);

  --sans: 'Satoshi', ui-sans-serif, system-ui, sans-serif;
  --mono: 'Inconsolata', ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--foreground);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

::selection { background: rgba(14,165,233,0.25); color: var(--foreground); }
.hero ::selection, .dif-sec ::selection, .store-sec ::selection,
.pricing-sec ::selection, .cta-sec ::selection, .footer ::selection {
  background: rgba(56,189,248,0.32); color: #fff;
}

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

html { scrollbar-color: rgba(107,117,133,0.5) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(107,117,133,0.5); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(107,117,133,0.75); }

ul { list-style: none; margin: 0; padding: 0; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* Numerais de largura fixa sem trocar de família: o design system reserva a
   mono para bloco de código técnico, mas números em coluna ainda precisam
   alinhar (limites de plano, valores, numeração de passo). */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* ─── Painel (container padrão de listagem) ───
   Regra do design system: uma listagem vive dentro de UM card que contém
   cabeçalho e linhas juntos, nunca um card por linha nem lista solta. */
.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  overflow: hidden;
}

/* ─── Reveal on scroll ─── */
.rv {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}
.rv.on { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: 0.06s; }
.d2 { transition-delay: 0.13s; }
.d3 { transition-delay: 0.20s; }
.d4 { transition-delay: 0.27s; }
@media (prefers-reduced-motion: reduce) {
  .rv, .ha { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .mod-group + .mod-group::before { transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ─── Hero entrance ─── */
@keyframes hero-in {
  from { opacity: 0; filter: blur(10px); transform: translateY(14px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
.ha { opacity: 0; animation: hero-in 0.8s cubic-bezier(.2,.7,.2,1) forwards; }
.ha-1 { animation-delay: 0.05s; }
.ha-2 { animation-delay: 0.14s; }
.ha-3 { animation-delay: 0.23s; }
.ha-4 { animation-delay: 0.32s; }
.ha-5 { animation-delay: 0.41s; }

/* ─── Grain texture ─── */
.grain { position: relative; }
.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6875rem 1.25rem;
  border-radius: var(--r-md);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out, box-shadow 150ms ease-out, transform 150ms ease-out;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
  box-shadow: 0 1px 2px rgba(12,61,94,0.25);
}
.btn-primary:hover { background: var(--primary-h); border-color: var(--primary-h); }

.cta-sec .btn-primary,
.dif-sec .btn-primary,
.store-sec .btn-primary,
.pricing-sec .btn-primary {
  background: var(--cyan);
  color: #06202f;
  border-color: var(--cyan);
  box-shadow: var(--sh-glow);
}
.cta-sec .btn-primary:hover,
.dif-sec .btn-primary:hover,
.store-sec .btn-primary:hover,
.pricing-sec .btn-primary:hover { background: var(--cyan-soft); border-color: var(--cyan-soft); }

.btn-outline {
  background: transparent;
  color: var(--foreground);
  border-color: var(--border);
}
.btn-outline:hover { background: var(--secondary); }

.btn-ghost {
  background: transparent;
  color: var(--foreground);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--secondary); }

.btn-lg { padding: 0.9375rem 1.75rem; font-size: 1rem; }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; }

/* ─── Section shells ─── */
.sec { padding: 6rem 1.5rem; }
.sec-in { max-width: 1160px; margin: 0 auto; }
.sec-in-narrow { max-width: 720px; margin: 0 auto; }

.eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 1rem;
}

.h-display {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--foreground);
  max-width: 560px;
  margin: 0 0 1rem;
}
.h-display.on-dark { color: #fff; }

.body-lg { font-size: 1.0625rem; color: var(--muted-foreground); line-height: 1.7; }
.on-dark-sub { color: rgba(255,255,255,0.68); }

@media (max-width: 768px) {
  .sec { padding: 4.5rem 1.25rem; }
}

/* ════════════════════════ NAVBAR ════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background 250ms ease, box-shadow 250ms ease;
}
.nav.solid {
  background: rgba(247,249,251,0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(17,28,38,0.08);
}
/* Com o menu aberto o blur precisa ser CANCELADO, não apenas omitido: se a
   página já rolou, .solid está ativo ao mesmo tempo e o backdrop-filter dele
   cria containing block, fazendo o .nav-menu (position:fixed) se medir pela
   navbar de 64px em vez da viewport. Era esse o menu quebrado fora do hero. */
.nav[data-open] {
  background: var(--background);
  box-shadow: 0 1px 0 rgba(17,28,38,0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav:not(.solid):not([data-open]) .nav-links a { color: rgba(255,255,255,0.7); }
.nav:not(.solid):not([data-open]) .nav-links a:hover { color: #fff; }
.nav:not(.solid):not([data-open]) .nav-toggle { color: #fff; }
.nav:not(.solid):not([data-open]) .nav-toggle:hover { background: rgba(255,255,255,0.1); }
.nav:not(.solid):not([data-open]) .nav-logo { color: #fff; }

.nav-in {
  max-width: 1160px; margin: 0 auto; padding: 0 1.5rem; height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.nav-logo {
  display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0;
  font-weight: 700; font-size: 1.0625rem; text-decoration: none; color: var(--foreground);
}
.nav-logo-mark {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--r-sm);
  overflow: hidden; flex-shrink: 0;
}
.nav-logo-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }

.nav-links { display: none; align-items: center; gap: 1.75rem; flex: 1; justify-content: center; }
@media (min-width: 860px) { .nav-links { display: flex; } }
.nav-links a { font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground); text-decoration: none; transition: color 150ms ease; }
.nav-links a:hover { color: var(--foreground); }

.nav-cta { display: none; align-items: center; gap: 1.125rem; flex-shrink: 0; }
.nav-signin { font-size: 0.875rem; font-weight: 600; color: var(--muted-foreground); text-decoration: none; transition: color 150ms ease-out; }
.nav-signin:hover { color: var(--foreground); }
.nav:not(.solid):not([data-open]) .nav-signin { color: rgba(255,255,255,0.75); }
.nav:not(.solid):not([data-open]) .nav-signin:hover { color: #fff; }
@media (min-width: 860px) { .nav-cta { display: flex; } }

.nav-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; background: none; border: none; cursor: pointer;
  color: var(--foreground); border-radius: var(--r-sm); transition: background 150ms ease; flex-shrink: 0;
}
.nav-toggle:hover { background: var(--secondary); }
.nav-toggle .icon-close { display: none; }
.nav[data-open] .icon-menu { display: none; }
.nav[data-open] .icon-close { display: block; }
@media (min-width: 860px) { .nav-toggle { display: none; } }

/* Enquanto o menu cobre a tela, a página atrás não pode rolar junto. */
html.nav-locked, body.nav-locked { overflow: hidden; }

.nav-menu {
  display: none; position: fixed; top: 64px; left: 0; right: 0; bottom: 0;
  padding: 0.25rem 1.5rem 2rem; overflow-y: auto;
  background: var(--background); border-top: 1px solid var(--border);
}
.nav[data-open] .nav-menu { display: block; }
.nav-menu nav { display: flex; flex-direction: column; }
.nav-menu nav a { display: block; padding: 0.875rem 0; font-size: 0.9375rem; font-weight: 500; color: var(--foreground); text-decoration: none; border-bottom: 1px solid var(--border); }
.nav-menu nav a:last-child { border-bottom: none; }
.nav-menu-cta { display: flex; flex-direction: column; gap: 0.625rem; margin-top: 1.5rem; }
@media (min-width: 860px) { .nav-menu { display: none !important; } }

/* ════════════════════════ HERO ════════════════════════ */
.hero {
  position: relative;
  padding: 8.5rem 1.5rem 5rem;
  text-align: center;
  background:
    radial-gradient(1100px 520px at 18% -10%, rgba(14,165,233,0.28), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(30,45,69,0.6), transparent 55%),
    linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 60%, var(--navy-800) 100%);
  color: #fff;
  overflow: hidden;
}
.hero-in {
  position: relative;
  z-index: 2;
  max-width: 1160px;
  margin: 0 auto;
}
.hero-copy { max-width: 780px; margin: 0 auto; }
@media (min-width: 1024px) {
  .hero { padding: 9.5rem 3rem 6rem; }
}

.badge-pill {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 0.9rem; border-radius: 999px;
  background: rgba(14,165,233,0.12); border: 1px solid rgba(56,189,248,0.35);
  color: var(--cyan-soft); font-size: 0.8125rem; font-weight: 600; margin-bottom: 1.75rem;
}

.hero-h {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  letter-spacing: -0.028em; line-height: 1.12; margin: 0 0 1.25rem; color: #fff;
  text-wrap: balance;
}
.hero-h-accent { color: var(--cyan-soft); }

.hero-sub {
  font-size: 1.0625rem; color: rgba(255,255,255,0.7); line-height: 1.65;
  max-width: 54ch; margin: 0 auto 2.25rem; text-wrap: pretty;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: center; margin-bottom: 1.25rem; }
.hero-link {
  font-size: 0.9375rem; font-weight: 600; color: #fff; text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.35); text-underline-offset: 5px; text-decoration-thickness: 1px;
  transition: text-decoration-color 160ms ease-out;
}
.hero-link:hover { text-decoration-color: #fff; }
.hero .btn-primary { background: var(--cyan); color: #06202f; border-color: var(--cyan); box-shadow: var(--sh-glow); }
.hero .btn-primary:hover { background: var(--cyan-soft); border-color: var(--cyan-soft); }

.hero-note { font-size: 0.8125rem; line-height: 1.6; color: rgba(255,255,255,0.58); max-width: 52ch; margin: 0 auto; }

/* ─── Hero mockup ─── */
.hero-mockup-wrap { position: relative; margin-top: 4.5rem; }
.hero-mockup-frame {
  position: relative;
  max-width: 1060px;
  margin: 0 auto;
  background: rgba(9,18,29,0.9);
  border: 1px solid rgba(255,255,255,0.12);
  border-bottom: none;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.7);
  padding: 0.75rem 0.75rem 0;
  /* Dissolve na base em vez de terminar numa borda dura. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 46%, rgba(0,0,0,0.86) 62%, rgba(0,0,0,0.5) 78%, rgba(0,0,0,0.18) 90%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 46%, rgba(0,0,0,0.86) 62%, rgba(0,0,0,0.5) 78%, rgba(0,0,0,0.18) 90%, transparent 100%);
}
.hero-mockup-bar { display: flex; gap: 6px; padding: 0.35rem 0.5rem 0.75rem; }
.hero-mockup-bar span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.hero-mockup-bar span:nth-child(1) { background: #f0455f; opacity: 0.7; }
.hero-mockup-bar span:nth-child(2) { background: #f5b942; opacity: 0.7; }
.hero-mockup-bar span:nth-child(3) { background: #2dba6e; opacity: 0.7; }
.hero-mockup-img { display: block; width: 100%; height: auto; border-radius: var(--r-sm) var(--r-sm) 0 0; }

/* ─── Faixa de fatos ─── */
/* Grade 2x2 até 960px, onde o valor sobe para cima do rótulo. Acima disso a
   linha cabe inteira e vira uma faixa única com filetes entre os itens: com
   quebra de linha os filetes sobrariam no início de cada linha nova. */
.hero-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1rem; margin: 2.75rem auto 0; max-width: 440px;
  text-align: center; font-size: 0.75rem; color: rgba(255,255,255,0.6);
}
.hero-facts strong {
  display: block; margin-bottom: 0.15rem;
  font-size: 1.125rem; font-weight: 700; letter-spacing: -0.015em; color: #fff;
}

@media (min-width: 600px) {
  .hero-facts { max-width: 560px; gap: 1.75rem 2rem; font-size: 0.8125rem; }
  .hero-facts strong { font-size: 1.25rem; }
}

@media (min-width: 960px) {
  .hero-facts {
    display: flex; flex-wrap: nowrap; justify-content: center;
    gap: 2rem; max-width: none; margin-top: 3.5rem; font-size: 0.875rem;
  }
  .hero-facts li { position: relative; }
  .hero-facts li + li::before {
    content: ''; position: absolute; left: -1rem; top: 0.2em; bottom: 0.2em;
    width: 1px; background: rgba(255,255,255,0.16);
  }
  .hero-facts strong { display: inline; margin: 0; font-size: inherit; font-weight: 600; letter-spacing: 0; }
}

@media (max-width: 640px) {
  .hero { padding-top: 7rem; }
  .hero-mockup-wrap { margin-top: 3rem; }
  .hero-mockup-frame { padding: 0.5rem 0.5rem 0; }
  .hero-actions { flex-direction: column; gap: 1rem; }
  .hero-actions .btn { width: 100%; justify-content: center; }
}

/* ════════════════════════ PROBLEMA (rail + pilha de cards) ════════════════════════ */
/* Cada dor é um card independente com position:sticky e um topo levemente maior
   que o anterior: conforme a página rola, cada card trava e o seguinte sobe por
   cima, deixando só uma faixa de 14px do que ficou embaixo.
   Nenhum ancestral da pilha pode ter overflow diferente de visible, senão o
   sticky perde o scrollport e o empilhamento não acontece. */
.pain-split { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: 4rem; align-items: start; }
.pain-rail { position: sticky; top: 7rem; }
.pain-rail .h-display { max-width: 18ch; margin-bottom: 0; }
.pain-closing { margin: 1.5rem 0 1.75rem; font-size: 1rem; font-weight: 600; line-height: 1.5; color: var(--primary); max-width: 26ch; }
.pain-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.875rem; font-weight: 600; color: var(--primary); text-decoration: none;
  border-bottom: 1px solid rgba(12,61,94,0.25); padding-bottom: 3px;
  transition: gap 180ms ease-out, border-color 180ms ease-out;
}
.pain-link:hover { gap: 0.65rem; border-color: var(--primary); }

/* A pilha entra só com opacidade: um transform no ancestral atrapalharia o sticky. */
.pain-stack.rv { transform: none; }
.pain-stack.rv.on { transform: none; }

.pain-card {
  position: sticky;
  display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 1rem;
  align-items: start; padding: 1.6rem 1.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  /* Sombra para cima: é a borda que fica exposta quando o próximo card sobe. */
  box-shadow: 0 -14px 30px -18px rgba(17,28,38,0.40), 0 2px 6px -2px rgba(17,28,38,0.10);
  transition: box-shadow 220ms ease-out;
}
.pain-card + .pain-card { margin-top: 3rem; }
.pain-card:nth-child(1) { top: 6.5rem; }
.pain-card:nth-child(2) { top: calc(6.5rem + 14px); }
.pain-card:nth-child(3) { top: calc(6.5rem + 28px); }
.pain-card:nth-child(4) { top: calc(6.5rem + 42px); }
.pain-card:nth-child(5) { top: calc(6.5rem + 56px); }
.pain-card:nth-child(6) { top: calc(6.5rem + 70px); }
.pain-card:hover { box-shadow: 0 -14px 30px -18px rgba(17,28,38,0.40), 0 8px 20px -8px rgba(17,28,38,0.16); }

/* Tint destrutivo do design system: é um problema, não um recurso. */
.pain-mark {
  width: 38px; height: 38px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: rgba(240,62,62,0.10); border: 1px solid rgba(240,62,62,0.22); color: var(--destructive);
}
.pain-q { margin: 0 0 0.35rem; font-size: 1rem; font-weight: 600; line-height: 1.45; color: var(--foreground); text-wrap: pretty; }
.pain-p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--muted-foreground); text-wrap: pretty; }

@media (max-width: 900px) {
  .pain-split { grid-template-columns: 1fr; gap: 2rem; }
  .pain-rail { position: static; }
  .pain-rail .h-display { max-width: 22ch; }
  .pain-closing { margin-bottom: 1.25rem; }
  .pain-card { padding: 1.35rem 1.25rem; gap: 0.85rem; grid-template-columns: 34px minmax(0, 1fr); }
  .pain-card + .pain-card { margin-top: 1.75rem; }
  .pain-mark { width: 34px; height: 34px; }
  .pain-q { font-size: 0.9375rem; }
  .pain-p { font-size: 0.875rem; }
  /* A navbar fixa tem 64px: o topo da pilha precisa passar dela. */
  .pain-card:nth-child(1) { top: 5.5rem; }
  .pain-card:nth-child(2) { top: calc(5.5rem + 10px); }
  .pain-card:nth-child(3) { top: calc(5.5rem + 20px); }
  .pain-card:nth-child(4) { top: calc(5.5rem + 30px); }
  .pain-card:nth-child(5) { top: calc(5.5rem + 40px); }
  .pain-card:nth-child(6) { top: calc(5.5rem + 50px); }
}

/* Sem empilhamento para quem pediu menos movimento: vira uma coluna de cards. */
@media (prefers-reduced-motion: reduce) {
  .pain-card { position: static; }
}

/* ════════════════════════ DIFERENCIAIS (dark bento) ════════════════════════ */
.dif-sec {
  background:
    radial-gradient(900px 500px at 90% 10%, rgba(14,165,233,0.16), transparent 55%),
    linear-gradient(180deg, var(--navy-900), var(--navy-950));
}
.dif-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 2.75rem; }
.dif-card {
  position: relative; overflow: hidden;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--r-lg); padding: 1.6rem;
}
.dif-card-lg { grid-column: span 2; }

.dif-icon {
  width: 40px; height: 40px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center;
  background: rgba(56,189,248,0.12); color: var(--cyan-soft); margin-bottom: 1rem;
}

.dif-card h3 { font-size: 1rem; font-weight: 700; color: #fff; margin: 0 0 0.5rem; }
.dif-card p { font-size: 0.875rem; color: rgba(255,255,255,0.6); line-height: 1.6; margin: 0; }
.dif-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; }
.dif-chip {
  font-size: 0.75rem; font-weight: 600; padding: 0.3rem 0.65rem; border-radius: 999px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.75);
}
.dif-chip-live { position: relative; padding-left: 1.4rem; color: var(--cyan-soft); border-color: rgba(56,189,248,0.35); }
.dif-chip-live::before {
  content: ''; position: absolute; left: 0.6rem; top: 50%; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan-soft); transform: translateY(-50%);
  animation: dif-chip-pulse 2s ease-in-out infinite;
}
@keyframes dif-chip-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(56,189,248,0.55); }
  50% { box-shadow: 0 0 0 5px rgba(56,189,248,0); }
}

/* ─── Widgets visuais dentro dos cards ─── */
.dif-visual { position: relative; z-index: 1; margin-top: 1.25rem; }

/* Todos os widgets abaixo só animam com o card em hover (desktop) ou tocado (mobile/tablet, via .is-touched no JS) */

/* Card 1 — terminal de estoque */
.dif-term {
  border: 1px solid rgba(255,255,255,0.08); border-radius: var(--r-md);
  background: rgba(0,0,0,0.22); overflow: hidden;
}
.dterm-bar { display: flex; align-items: center; gap: 0.3rem; padding: 0.55rem 0.7rem; border-bottom: 1px solid rgba(255,255,255,0.07); }
.dterm-bar span:not(.dterm-label) { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.15); }
.dterm-label { margin-left: auto; font-size: 0.625rem; color: rgba(255,255,255,0.3); }
.dterm-body { padding: 0.75rem 0.9rem 0.9rem; display: flex; flex-direction: column; gap: 0.5rem; }
.dterm-line {
  display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: rgba(255,255,255,0.6);
  opacity: 0; transform: translateX(-8px);
  transition: opacity 380ms ease, transform 380ms ease;
}
.dif-card:hover .dterm-line,
.dif-card.is-touched .dterm-line { opacity: 1; transform: translateX(0); }
.dterm-line:nth-child(1) { transition-delay: 60ms; }
.dterm-line:nth-child(2) { transition-delay: 220ms; }
.dterm-line:nth-child(3) { transition-delay: 380ms; }
.dterm-prompt { color: var(--cyan-soft); font-family: var(--mono); }
.dterm-txt { flex: 1; color: rgba(255,255,255,0.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dterm-tag { font-family: var(--mono); font-size: 0.625rem; color: var(--success); background: rgba(45,186,110,0.14); padding: 0.1rem 0.4rem; border-radius: 999px; flex-shrink: 0; }
.dterm-cursor {
  display: block; width: 6px; height: 12px; margin-left: 1.35rem; background: var(--cyan-soft);
  opacity: 0; animation: dterm-blink 1s step-end infinite; animation-play-state: paused;
}
.dif-card:hover .dterm-cursor,
.dif-card.is-touched .dterm-cursor { animation-play-state: running; }
@keyframes dterm-blink {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* Card 2 — checklist de inspeção */
.dif-inspect { display: flex; flex-direction: column; gap: 0.5rem; }
.dinsp-row {
  display: flex; align-items: center; gap: 0.55rem; font-size: 0.8125rem; color: rgba(255,255,255,0.6);
  opacity: 0; transform: translateX(-6px);
  transition: opacity 350ms ease, transform 350ms ease;
}
.dif-card:hover .dinsp-row,
.dif-card.is-touched .dinsp-row { opacity: 1; transform: translateX(0); }
.dinsp-row:nth-child(1) { transition-delay: 80ms; }
.dinsp-row:nth-child(2) { transition-delay: 260ms; }
.dinsp-row:nth-child(3) { transition-delay: 440ms; }
.dinsp-check {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 16px; height: 16px; border-radius: 50%; background: rgba(45,186,110,0.18); color: var(--success);
  transform: scale(0); transition: transform 300ms cubic-bezier(.34,1.56,.64,1);
}
.dinsp-check.dinsp-warn { background: rgba(245,158,11,0.18); color: var(--warning); }
.dif-card:hover .dinsp-check,
.dif-card.is-touched .dinsp-check { transform: scale(1); }
.dif-card:hover .dinsp-row:nth-child(1) .dinsp-check, .dif-card.is-touched .dinsp-row:nth-child(1) .dinsp-check { transition-delay: 260ms; }
.dif-card:hover .dinsp-row:nth-child(2) .dinsp-check, .dif-card.is-touched .dinsp-row:nth-child(2) .dinsp-check { transition-delay: 440ms; }
.dif-card:hover .dinsp-row:nth-child(3) .dinsp-check, .dif-card.is-touched .dinsp-row:nth-child(3) .dinsp-check { transition-delay: 620ms; }
.dinsp-flow {
  display: flex; align-items: center; gap: 0.5rem; margin-top: 0.3rem;
  opacity: 0; transition: opacity 350ms ease 760ms;
}
.dif-card:hover .dinsp-flow,
.dif-card.is-touched .dinsp-flow { opacity: 1; }
.dinsp-flow-line {
  display: block; flex: 1; height: 1px; background: rgba(255,255,255,0.12); position: relative; overflow: hidden;
}
.dinsp-flow-line::after {
  content: ''; position: absolute; inset: 0; width: 40%;
  background: linear-gradient(90deg, transparent, var(--cyan-soft), transparent);
  transform: translateX(-100%);
  animation: dinsp-sweep 1.8s ease-in-out 900ms infinite; animation-play-state: paused;
}
.dif-card:hover .dinsp-flow-line::after,
.dif-card.is-touched .dinsp-flow-line::after { animation-play-state: running; }
@keyframes dinsp-sweep {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(340%); }
}
.dinsp-flow-tag { font-size: 0.6875rem; color: var(--cyan-soft); flex-shrink: 0; }

/* Card 2b — gauge de avaliação (continua o fluxo do checklist) */
.dgrade-row { display: flex; justify-content: space-between; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; color: rgba(255,255,255,0.3); }
.dgrade-hit {
  display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-top: -3px;
  border-radius: 50%; color: var(--cyan-soft);
  animation: dgrade-pulse 2s ease-in-out 1.1s infinite; animation-play-state: paused;
}
.dif-card:hover .dgrade-hit,
.dif-card.is-touched .dgrade-hit { animation-play-state: running; }
@keyframes dgrade-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(56,189,248,0.5); }
  50% { box-shadow: 0 0 0 5px rgba(56,189,248,0); }
}
.dgrade-track { position: relative; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.dgrade-fill {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--cyan-soft));
  transition: width 900ms cubic-bezier(.2,.7,.2,1) 900ms;
}
.dif-card:hover .dgrade-fill,
.dif-card.is-touched .dgrade-fill { width: 88%; }
.dgrade-out {
  display: flex; align-items: baseline; gap: 0.5rem;
  opacity: 0; transform: translateY(4px);
  transition: opacity 400ms ease 1.5s, transform 400ms ease 1.5s;
}
.dif-card:hover .dgrade-out,
.dif-card.is-touched .dgrade-out { opacity: 1; transform: translateY(0); }
.dgrade-out-label { font-size: 0.6875rem; color: rgba(255,255,255,0.45); }
.dgrade-out-val { font-size: 0.8125rem; font-weight: 700; color: #fff; margin-left: auto; }
.dgrade-out-delta { font-size: 0.6875rem; font-weight: 700; color: var(--success); }

/* Card 3 — matriz de permissões */
.dif-team { display: flex; flex-direction: column; gap: 0.55rem; }
.dteam-row {
  display: flex; align-items: center; gap: 0.6rem; font-size: 0.75rem; color: rgba(255,255,255,0.6);
  opacity: 0; transform: translateX(-6px);
  transition: opacity 350ms ease, transform 350ms ease;
}
.dif-card:hover .dteam-row,
.dif-card.is-touched .dteam-row { opacity: 1; transform: translateX(0); }
.dteam-row:nth-child(1) { transition-delay: 60ms; }
.dteam-row:nth-child(2) { transition-delay: 220ms; }
.dteam-row:nth-child(3) { transition-delay: 380ms; }
.dteam-name { width: 4.6rem; flex-shrink: 0; }
.dteam-perms { display: flex; gap: 0.25rem; }
.dteam-perms i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan-soft); }
.dteam-perms i.off { background: rgba(255,255,255,0.15); }
.dteam-switch { margin-left: auto; width: 26px; height: 14px; border-radius: 999px; background: rgba(255,255,255,0.1); position: relative; flex-shrink: 0; }
.dteam-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transition: left 320ms cubic-bezier(.34,1.56,.64,1), background 320ms ease;
}
.dteam-switch.on::after { background: var(--success); }
.dif-card:hover .dteam-switch.on::after,
.dif-card.is-touched .dteam-switch.on::after { left: 14px; }

/* Card 4 — cadeia fornecedor → lojista */
.dif-chain { display: flex; align-items: center; gap: 0.6rem; }
.dchain-node {
  flex: 1; text-align: center; font-size: 0.6875rem; font-weight: 600; color: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.1); border-radius: var(--r-sm); padding: 0.5rem 0.4rem;
  background: rgba(255,255,255,0.03); transition: color 380ms ease, border-color 380ms ease;
}
.dif-card:hover .dchain-node-active,
.dif-card.is-touched .dchain-node-active { color: var(--cyan-soft); border-color: rgba(56,189,248,0.4); }
.dchain-track { position: relative; flex: 1.3; height: 3px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: visible; }
.dchain-dot {
  position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan-soft); box-shadow: 0 0 8px 1px rgba(56,189,248,0.6);
  animation: dchain-move 2.2s ease-in-out infinite; animation-play-state: paused;
}
.dif-card:hover .dchain-dot,
.dif-card.is-touched .dchain-dot { animation-play-state: running; }
@keyframes dchain-move {
  0%, 100% { left: 0; }
  50% { left: calc(100% - 8px); }
}

/* Card 5 — ordem de serviço */
.dif-repair { display: flex; flex-direction: column; gap: 0.5rem; }
.drep-step {
  display: flex; align-items: center; gap: 0.55rem; font-size: 0.8125rem; color: rgba(255,255,255,0.5);
  opacity: 0; transform: translateX(-6px);
  transition: opacity 350ms ease, transform 350ms ease;
}
.dif-card:hover .drep-step,
.dif-card.is-touched .drep-step { opacity: 1; transform: translateX(0); }
.drep-step:nth-child(1) { transition-delay: 80ms; }
.drep-step:nth-child(2) { transition-delay: 260ms; }
.drep-step:nth-child(3) { transition-delay: 440ms; }
.drep-dot {
  width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.15); flex-shrink: 0;
  transition: background 300ms ease;
}
.drep-step.done .drep-dot,
.drep-step.active .drep-dot { background: var(--cyan-soft); }
.drep-step.active .drep-dot {
  animation: dgrade-pulse 2s ease-in-out infinite; animation-play-state: paused;
}
.dif-card:hover .drep-step.active .drep-dot,
.dif-card.is-touched .drep-step.active .drep-dot { animation-play-state: running; }

@media (prefers-reduced-motion: reduce) {
  .dif-chip-live::before,
  .dterm-cursor, .dinsp-flow-line::after, .dgrade-hit, .dchain-dot, .drep-step.active .drep-dot { animation: none; }
  .dterm-line, .dinsp-row, .dinsp-check, .dinsp-flow, .dgrade-fill, .dgrade-out, .dteam-row, .dteam-switch::after, .drep-step {
    transition: none; opacity: 1; transform: none; width: var(--w, auto); left: auto;
  }
}

@media (max-width: 900px) { .dif-grid { grid-template-columns: repeat(2, 1fr); } .dif-card-lg { grid-column: span 2; } }
@media (max-width: 620px) { .dif-grid { grid-template-columns: 1fr; } .dif-card-lg { grid-column: span 1; } }

/* ════════════════════════ FUNCIONALIDADES (índice de módulos) ════════════════════════ */
.mod-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 3rem; align-items: end; }
.mod-head-copy .h-display { margin-bottom: 0; }
.mod-head-note { margin: 0; font-size: 0.9375rem; line-height: 1.65; color: var(--muted-foreground); max-width: 44ch; }
.mod-head-count { font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }

/* Um painel único com as 5 áreas dentro, em vez de 23 itens soltos sobre o fundo. */
.mod-index { margin-top: 2.75rem; }
.mod-group { position: relative; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 2.25rem; padding: 2rem 2rem; }
.mod-group + .mod-group::before {
  content: ''; position: absolute; top: 0; left: 2rem; right: 2rem; height: 1px; background: var(--border);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 720ms cubic-bezier(.16,1,.3,1) 60ms;
}
.mod-group.on::before { transform: scaleX(1); }

.mod-group-head {
  align-self: start;
  display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 0.8rem; align-items: center;
}
.mod-group-icon {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--r-md);
  background: rgba(12,61,94,0.08); color: var(--primary);
}
.mod-group-head h3 { grid-column: 2; margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--foreground); }
.mod-group-head p { grid-column: 2; margin: 0.7rem 0 0; font-size: 0.875rem; line-height: 1.55; color: var(--muted-foreground); text-wrap: pretty; }
.mod-group-count {
  grid-column: 2; justify-self: start; margin-top: 0.8rem;
  padding: 0.2rem 0.55rem; border-radius: var(--r-sm);
  background: rgba(12,61,94,0.07); color: var(--primary);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; font-variant-numeric: tabular-nums;
}

.mod-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2.5rem; }
.mod-item { display: flex; flex-direction: column; gap: 0.25rem; padding-left: 0.9rem; border-left: 1px solid var(--border); }
.mod-name { font-size: 0.9375rem; font-weight: 600; line-height: 1.4; color: var(--foreground); }
.mod-desc { font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); text-wrap: pretty; }

/* Selo "Em breve": módulo já anunciado mas ainda não entregue. Texto em âmbar
   escuro (não o --warning puro) porque #f59e0b sobre um fundo quase branco
   fica em ~2:1 de contraste, abaixo do mínimo de 4.5:1 para texto pequeno. */
.mod-tag {
  display: inline-block; margin-left: 0.5rem; padding: 0.05rem 0.5rem;
  border-radius: 999px; vertical-align: 1px;
  background: rgba(245,158,11,0.14); border: 1px solid rgba(245,158,11,0.4);
  color: #92400e; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.01em;
}

@media (max-width: 1024px) {
  .mod-head { grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
  .mod-head-note { max-width: 56ch; }
  .mod-group { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.75rem; }
  .mod-group + .mod-group::before { left: 1.75rem; right: 1.75rem; }
  /* Empilhado, o apoio e a contagem voltam à margem esquerda: indentados sob o
     título eles desalinhariam da lista de módulos logo abaixo. */
  .mod-group-head p, .mod-group-count { grid-column: 1 / -1; }
  .mod-group-head p { margin-top: 0.85rem; }
}
@media (max-width: 620px) {
  .mod-group { padding: 1.5rem 1.15rem; }
  .mod-group + .mod-group::before { left: 1.15rem; right: 1.15rem; }
  .mod-list { grid-template-columns: 1fr; gap: 1.15rem; }
}

/* ════════════════════════ MAIS FUNCIONALIDADES (accordion + preview) ════════════════════════ */
.store-sec {
  background:
    radial-gradient(800px 460px at 8% 100%, rgba(14,165,233,0.16), transparent 55%),
    linear-gradient(180deg, var(--navy-950), var(--navy-900));
}
.store-in { display: grid; gap: 3rem; align-items: start; }
@media (min-width: 960px) { .store-in { grid-template-columns: 1fr 1fr; align-items: center; } }
/* De 1200px pra cima o quadro acompanha a altura da coluna do acordeão (stretch):
   os dois lados começam e terminam na mesma linha.
   Tentei estender isso para baixo de 1200px também (usando a mesma lógica com
   object-fit: contain, que não corta), mas de 960 a 1199px o texto do
   acordeão quebra em mais linhas enquanto a coluna estreita, e a altura da
   coluna dispara (chega a 492px numa coluna de só 432px de largura, quase
   1:1 vertical) — o quadro ficava enorme e a foto sobrava minúscula no meio
   dele. Por isso essa faixa mantém uma proporção FIXA (ver .mfeat-preview),
   não ligada à altura real da coluna. */
@media (min-width: 1200px) { .store-in { align-items: stretch; } }

/* Accordion (padrão shadcn Accordion: título + chevron, sem ícone por item) */
.mfeat-accordion { margin-top: 1.75rem; }
.mfeat-item { border-bottom: 1px solid rgba(255,255,255,0.12); }
.mfeat-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: none; padding: 1.1rem 0; cursor: pointer; text-align: left; gap: 1rem;
}
.mfeat-title { font-size: 1.0625rem; font-weight: 600; color: rgba(255,255,255,0.55); transition: color 200ms ease; line-height: 1.3; }
.mfeat-item.open .mfeat-title, .mfeat-trigger:hover .mfeat-title { color: #fff; }
.mfeat-caret { flex-shrink: 0; color: rgba(255,255,255,0.4); transition: transform 220ms ease, color 200ms ease; }
.mfeat-item.open .mfeat-caret { transform: rotate(180deg); color: var(--cyan-soft); }
.mfeat-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 280ms cubic-bezier(.22,1,.36,1); }
.mfeat-item.open .mfeat-body { grid-template-rows: 1fr; }
.mfeat-body-inner { overflow: hidden; }
.mfeat-desc { font-size: 0.9375rem; color: rgba(255,255,255,0.6); line-height: 1.65; padding-bottom: 1.25rem; margin: 0; }

.mfeat-mobile-preview { display: block; margin: 0 0 1.25rem; }
@media (min-width: 960px) { .mfeat-mobile-preview { display: none; } }

/* Painel sticky à direita (desktop) */
/* O respiro mora no painel interno, não aqui: o mockup ilustrativo precisa de
   margem, mas a foto real é arte pronta e tem que encostar nas quatro bordas. */
/* Sem aspect-ratio fixo a partir de 1200px: ali quem define a altura é o
   stretch do grid (a coluna do acordeão) e a foto se acomoda pelo cover. */
.mfeat-preview {
  border-radius: var(--r-lg); border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
/* 960–1199px: proporção fixa em vez de acompanhar a coluna (ver nota em
   .store-in acima). Escolhida em 8:7 (~1,143:1) para casar com o alvo de
   1600x1400 recomendado no painel de upload — a mesma imagem que fica quase
   sem faixa no desktop (~1,11–1,17:1) também fica sem faixa aqui. */
@media (max-width: 1199px) and (min-width: 960px) { .mfeat-preview { aspect-ratio: 8 / 7; } }
@media (max-width: 959px) { .mfeat-preview { display: none; } }
.mfeat-preview-panel { display: none; width: 100%; justify-content: center; padding: 2rem; }
.mfeat-preview-panel.active { display: flex; animation: xfp-in 300ms cubic-bezier(.22,1,.36,1) both; }
/* Painel que recebeu foto: sem respiro e esticado na altura toda do quadro. */
.mfeat-preview-panel:has(.mfeat-mock-photo) { padding: 0; align-self: stretch; }

/* Mockups compartilhados (mesma marcação usada no painel desktop e no inline mobile) */
.mfeat-mock {
  width: 100%; background: rgba(13,27,43,0.75); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-md); padding: 1.25rem;
}
/* Só no painel fixo do desktop o card tem teto de largura, pra não ficar gigante */
.mfeat-preview .mfeat-mock { max-width: 320px; }

/* Foto real enviada pelo painel, substituindo o mockup ilustrativo.
   Sem padding/fundo do .mfeat-mock: a própria imagem já traz o visual pronto. */
.mfeat-mock-photo {
  display: block; width: 100%; border-radius: var(--r-md); border: 1px solid rgba(255,255,255,0.1);
}
/* contain, não cover: a altura do quadro segue o acordeão (ver .store-in),
   que varia por item e raramente cai exatamente em 4:3. cover cortaria uma
   fatia fixa dos dois lados sempre, mesmo com margem de segurança na arte;
   contain nunca corta, ao custo de uma faixa fina do fundo do quadro
   aparecer quando a proporção da foto não bate com a do quadro.
   Sem borda e sem raio próprios: quem arredonda é o overflow do quadro. */
.mfeat-preview .mfeat-mock-photo {
  width: 100%; height: 100%; max-width: none;
  object-fit: contain; border: none; border-radius: 0;
}

/* IMEI */
.mfeat-imei-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.mfeat-imei-icon {
  width: 34px; height: 34px; border-radius: var(--r-sm); background: rgba(56,189,248,0.14); color: var(--cyan-soft);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mfeat-imei-badge {
  display: flex; align-items: center; gap: 0.3rem; font-size: 0.7rem; font-weight: 600; color: #4ade80;
  background: rgba(45,186,110,0.15); padding: 0.25rem 0.6rem; border-radius: 999px;
}
.mfeat-imei-label { display: block; font-size: 0.7rem; color: rgba(255,255,255,0.4); margin-bottom: 0.3rem; }
.mfeat-imei-num { display: block; font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 1rem; letter-spacing: 0.06em; }
.mfeat-imei-row { display: flex; justify-content: space-between; font-size: 0.78rem; padding: 0.5rem 0; border-top: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.55); }
.mfeat-imei-row span:last-child { color: #fff; font-weight: 600; }

/* Rastreio do pedido */
.mfeat-mock-track { padding-left: 1.5rem; }
.mfeat-track-step { position: relative; padding-bottom: 1.25rem; }
.mfeat-track-step:last-child { padding-bottom: 0; }
.mfeat-track-step::before {
  content: ''; position: absolute; left: -1.16rem; top: 12px; bottom: -4px; width: 1px; background: rgba(255,255,255,0.15);
}
.mfeat-track-step:last-child::before { display: none; }
.mfeat-track-dot { position: absolute; left: -1.5rem; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.2); }
.mfeat-track-step.done .mfeat-track-dot { background: #4ade80; }
.mfeat-track-step.active .mfeat-track-dot { background: var(--cyan-soft); box-shadow: 0 0 0 4px rgba(56,189,248,0.25); }
.mfeat-track-step strong { display: block; font-size: 0.85rem; font-weight: 600; color: #fff; }
.mfeat-track-step small { font-size: 0.72rem; color: rgba(255,255,255,0.4); }

/* Comissão */
.mfeat-comm-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.85rem; }
.mfeat-comm-row:last-child { margin-bottom: 0; }
.mfeat-comm-name { width: 52px; flex-shrink: 0; font-size: 0.75rem; color: rgba(255,255,255,0.5); }
.mfeat-comm-track { flex: 1; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.1); overflow: hidden; }
.mfeat-comm-fill { height: 100%; border-radius: 999px; background: var(--cyan-soft); }
.mfeat-comm-val { width: 68px; flex-shrink: 0; text-align: right; font-size: 0.75rem; font-weight: 600; color: #fff; }

/* Assistência técnica */
.mfeat-doc-head { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 700; color: #fff; margin-bottom: 1.1rem; }
.mfeat-doc-head svg { color: var(--cyan-soft); flex-shrink: 0; }
.mfeat-doc-line { height: 7px; border-radius: 4px; background: rgba(255,255,255,0.12); margin-bottom: 0.55rem; }
.mfeat-doc-sign { margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.72rem; color: rgba(255,255,255,0.4); }
.mfeat-doc-sign-svg { width: 100%; height: 28px; color: var(--cyan-soft); margin-top: 0.4rem; }

/* ════════════════════════ COMO FUNCIONA (linha de passos) ════════════════════════ */
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin: 3rem 0 0; padding: 0; list-style: none; }
.flow-step { position: relative; padding-top: 3.25rem; }
.flow-step::before { content: ''; position: absolute; top: 15.5px; left: 40px; right: -2rem; height: 1px; background: var(--border); }
.flow-step-last::before { display: none; }
.flow-tick {
  position: absolute; top: 0; left: 0; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--card);
  display: grid; place-items: center; box-shadow: var(--sh-card);
}
.flow-num { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; color: var(--muted-foreground); }
.flow-step-last .flow-tick { background: var(--primary); border-color: var(--primary); }
.flow-step-last .flow-num { color: #fff; }
.flow-step h3 { margin: 0 0 0.4rem; font-size: 1rem; font-weight: 700; color: var(--foreground); }
.flow-step p { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); }

@media (max-width: 860px) {
  .flow { grid-template-columns: 1fr; gap: 0; margin-top: 2.5rem; }
  .flow-step { padding: 0 0 1.75rem 3rem; }
  .flow-step:last-child { padding-bottom: 0; }
  .flow-step::before { top: 34px; bottom: 0; left: 15.5px; right: auto; width: 1px; height: auto; }
}

/* ════════════════════════ PLANOS ════════════════════════ */
.pricing-sec {
  background:
    radial-gradient(1100px 520px at 18% -10%, rgba(14,165,233,0.22), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(30,45,69,0.6), transparent 55%),
    linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 60%, var(--navy-800) 100%);
}
.pricing-in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pricing-in .h-display { margin-left: auto; margin-right: auto; }
.pricing-eyebrow { color: rgba(255,255,255,0.58); }
.pricing-lede { max-width: 48ch; margin: 0 auto 3rem; font-size: 1rem; line-height: 1.65; }

.pricing-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem;
  max-width: 900px; width: 100%; margin: 0 auto; text-align: left; align-items: start;
}
.price-card {
  background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r-lg); padding: 2rem 1.875rem; position: relative;
}
.price-card-featured { background: rgba(14,165,233,0.07); border-color: var(--cyan-soft); box-shadow: 0 18px 40px -22px rgba(6,32,47,0.9); }
.price-tag {
  position: absolute; top: -12px; left: 1.875rem; background: var(--cyan); color: #06202f;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; padding: 0.3rem 0.75rem; border-radius: 999px;
}
.price-name { font-size: 1rem; font-weight: 700; margin: 0 0 0.4rem; color: #fff; }
.price-desc { font-size: 0.875rem; line-height: 1.55; color: rgba(255,255,255,0.62); margin: 0 0 1.5rem; min-height: 3.1em; }

.price-amount { display: flex; align-items: baseline; gap: 0.3rem; margin: 0 0 0.4rem; }
.price-cur { font-size: 1rem; font-weight: 600; color: rgba(255,255,255,0.7); }
.price-num { font-size: 2.75rem; font-weight: 700; letter-spacing: -0.035em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.price-per { font-size: 0.9375rem; font-weight: 500; color: rgba(255,255,255,0.58); }
.price-billing { font-size: 0.8125rem; color: rgba(255,255,255,0.58); margin: 0 0 1.5rem; }
.price-cta { width: 100%; justify-content: center; }
.price-card:not(.price-card-featured) .btn-outline { color: #fff; border-color: rgba(255,255,255,0.28); }
.price-card:not(.price-card-featured) .btn-outline:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.45); }

.price-sub {
  margin: 1.875rem 0 0.4rem; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.58);
}
.price-limits { margin: 0; }
.price-limit {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 0;
}
.price-limit + .price-limit { border-top: 1px solid rgba(255,255,255,0.09); }
.price-limit dt { font-size: 0.875rem; color: rgba(255,255,255,0.72); }
.price-limit dd { margin: 0; }
.price-limit-v { font-size: 0.9375rem; font-weight: 600; color: #fff; }
.price-limit-inf { font-size: 0.8125rem; font-weight: 600; color: var(--cyan-soft); }

.price-list { display: flex; flex-direction: column; gap: 0.6rem; }
.price-list li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.875rem; line-height: 1.5; color: rgba(255,255,255,0.85); }
.price-list li svg { color: var(--success); flex-shrink: 0; margin-top: 0.25em; }

.price-footnote { margin: 2.25rem auto 0; max-width: 62ch; font-size: 0.8125rem; line-height: 1.65; color: rgba(255,255,255,0.58); }

@media (max-width: 760px) {
  .pricing-grid { grid-template-columns: 1fr; gap: 2rem; }
  .price-desc { min-height: 0; }
  .price-num { font-size: 2.5rem; }
}

/* ════════════════════════ PROVA SOCIAL ════════════════════════ */
.testi-sec { background: var(--secondary); overflow: hidden; }
.testi-sec .sec-in { position: relative; z-index: 1; }

.testi-wall {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 1160px;
  margin: 2.75rem auto 0;
  height: 640px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.testi-col { overflow: hidden; }
.testi-track {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  animation: testi-scroll 32s linear infinite;
}
.testi-col:nth-child(1) .testi-track { animation-duration: 34s; }
.testi-col:nth-child(2) .testi-track { animation-duration: 40s; }
.testi-col:nth-child(3) .testi-track { animation-duration: 28s; }
.testi-track-reverse { animation-direction: reverse; }
.testi-col:hover .testi-track { animation-play-state: paused; }

@keyframes testi-scroll {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

.testi-card {
  margin: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 1.75rem; box-shadow: var(--sh-card);
}
.testi-card p { font-size: 1rem; font-weight: 500; color: var(--foreground); line-height: 1.6; margin: 0 0 1.125rem; }
.testi-card footer { display: flex; align-items: center; gap: 0.65rem; font-style: normal; }
.testi-card footer strong { display: block; font-size: 0.875rem; font-weight: 600; color: var(--foreground); }
.testi-card footer small { display: block; font-size: 0.8125rem; color: var(--muted-foreground); }
.testi-avatar {
  flex: none; width: 2.25rem; height: 2.25rem; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; color: #fff;
}

.testi-col-mid { display: none; }
.testi-col-last { display: none; }

.trust-badge {
  display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 2.5rem;
  padding: 0.7rem 1.25rem; border-radius: 999px; background: var(--card); border: 1px solid var(--border);
  font-size: 0.875rem; font-weight: 600; color: var(--primary); box-shadow: var(--sh-card);
}

@media (min-width: 701px) {
  .testi-wall { grid-template-columns: repeat(2, 1fr); }
  .testi-col-mid { display: block; }
}
@media (min-width: 1000px) {
  .testi-wall { grid-template-columns: repeat(3, 1fr); }
  .testi-col-last { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .testi-track { animation: none; }
}

/* ════════════════════════ FAQ ════════════════════════ */
.faq-list { display: flex; flex-direction: column; gap: 0.75rem; }
.faq-list-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  gap: 0.75rem 1.5rem;
  align-items: start;
}
@media (max-width: 700px) {
  .faq-list-2col { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
}
.faq-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.35rem; background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--sans); font-size: 0.9375rem; font-weight: 600; color: var(--foreground);
}
.faq-caret { flex-shrink: 0; color: var(--muted-foreground); transition: transform 220ms ease; }
.faq-item[data-open] .faq-caret { transform: rotate(180deg); color: var(--primary); }

.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 240ms ease; }
.faq-a > p { overflow: hidden; margin: 0; padding: 0 1.35rem; font-size: 0.9rem; color: var(--muted-foreground); line-height: 1.65; }
.faq-item[data-open] .faq-a { grid-template-rows: 1fr; }
.faq-item[data-open] .faq-a > p { padding-bottom: 1.25rem; }

/* ════════════════════════ CTA FINAL ════════════════════════ */
.cta-sec {
  text-align: center;
  background:
    radial-gradient(900px 480px at 50% 0%, rgba(14,165,233,0.22), transparent 60%),
    linear-gradient(180deg, var(--navy-900), var(--navy-950));
}
.cta-in { display: flex; flex-direction: column; align-items: center; }
.cta-in .h-display { margin-left: auto; margin-right: auto; }
.cta-in .body-lg { margin: 1rem auto 2rem; max-width: 46ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 0.875rem; justify-content: center; }
.cta-sec .btn-ghost { color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.22); }
.cta-sec .btn-ghost:hover { background: rgba(255,255,255,0.08); color: #fff; }
.cta-note { margin: 1.5rem 0 0; font-size: 0.8125rem; color: rgba(255,255,255,0.58); }

/* ════════════════════════ FOOTER ════════════════════════ */
.footer { background: var(--navy-950); color: rgba(255,255,255,0.7); padding-top: 4rem; }
.footer-in { display: flex; flex-wrap: wrap; gap: 3rem; justify-content: space-between; padding: 0 1.5rem 3rem; }
.footer-brand .nav-logo { color: #fff; margin-bottom: 0.75rem; }
.footer-brand p { font-size: 0.875rem; line-height: 1.6; color: rgba(255,255,255,0.58); max-width: 30ch; }
.footer-links { display: flex; flex-wrap: wrap; gap: 3rem; }
.footer-h { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.55); margin-bottom: 0.9rem; }
.footer-links a { display: block; font-size: 0.875rem; color: rgba(255,255,255,0.68); text-decoration: none; margin-bottom: 0.65rem; transition: color 150ms ease-out; }
.footer-links a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); }
.footer-bottom-in { padding: 1.5rem 1.5rem; font-size: 0.8125rem; color: rgba(255,255,255,0.55); }

@media (max-width: 560px) { .footer-links { gap: 2rem; } }

/* ════════════════════════ BACK TO TOP ════════════════════════ */
.back-top {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 40;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--card); color: var(--primary); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-elevated);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
.back-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }