/* ═══════════════════════════════════════════════════════════════════
   ReplyAI — landing (site/)
   Design system = o do app Flutter (FE/lib/app/theme/app_colors.dart,
   app_typography.dart e shared/widgets). Nada aqui é inventado: cada
   token abaixo aponta para o widget/constante de origem.

   Portões de layout:
   - html.js-motion  → o JS está animando (GSAP carregou, sem reduced-motion)
   - html.spine-on   → a avaliação viaja pela página (desktop + js-motion)
   Sem esses portões (mobile, reduced-motion, sem JS) tudo empilha e o
   HTML já mostra o estado final.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Tokens ────────────────────────────────────────────────────── */
:root {
  /* TSColors (bloco Figma) */
  --primary: #2E5BFF;
  --primary-hover: #2449D1;
  --primary-soft: #E6EBFF;
  --canvas: #EEF1F8;
  --surface: #FFFFFF;
  --surface-muted: #F4F6FB;
  --border: #E3E7F0;
  --text: #1B2140;
  --text-secondary: #6B7385;
  --on-primary: #FFFFFF;
  --star: #F5B301;                 /* TSColors.starYellow (StarRating / dashboard) */
  --ifood: #EA1D2C;
  --google: #4285F4;
  --tag-light-blue: #39B6F0;
  --premium-navy: #1B2A6B;         /* PremiumPill */
  --badge-orange: #F26B21;         /* TSCountBadge */
  --sentiment-pos: #3AA655;
  --sentiment-mixed: #F2C500;
  --sentiment-neg: #D64545;
  --severity-critical: #D64545;
  --severity-critical-soft: #FDECEC;
  --severity-high: #F2C500;
  --severity-medium: #39B6F0;
  --severity-low: #9AA3B5;
  --competitors: #8B5CF6;          /* aba Concorrentes */
  --competitors-soft: #F1ECFE;

  /* TSTypography */
  --font: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* raios usados pelos widgets */
  --r-card: 16px;    /* TSSectionCard.radius, cartão do login */
  --r-review: 14px;  /* TSReviewCard */
  --r-item: 10px;    /* itens do menu lateral, TSSegmentedControl */
  --r-button: 8px;   /* ElevatedButton do tema */
  --r-pill: 8px;     /* PremiumPill */
  --r-badge: 6px;    /* TSReplyOriginBadge, TSCountBadge */

  --header-h: 72px;
  --container: 1180px;
  --gutter: 24px;
}

/* ─── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--canvas);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3 { font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: var(--text); }
h2 { font-size: clamp(28px, 3.4vw, 42px); }
h3 { font-size: 18px; }
p { color: var(--text); }
strong { font-weight: 700; }
button { font-family: inherit; }
.material-icons { font-size: 22px; line-height: 1; vertical-align: middle; user-select: none; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
/* estados iniciais das animações ficam fora da tela à direita; `clip` corta sem virar contexto de rolagem */
main { overflow-x: clip; }

.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 1000;
  background: var(--primary); color: var(--on-primary); padding: 10px 16px; border-radius: var(--r-button);
  font-weight: 700;
}
.skip-link:focus { top: 12px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ─── Tipografia auxiliar ───────────────────────────────────────── */
/* Parágrafos usam --text (como o corpo do TSReviewCard); --text-secondary fica para
   rótulos e legendas — sobre --canvas ele rende 4,2:1, abaixo do AA para texto corrido. */
.eyebrow-inline { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--primary); margin-right: 6px; }
.eyebrow-violet { color: var(--competitors); }
.kpi-label { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }

/* ─── Botões (ElevatedButton / OutlinedButton do tema) ──────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; border-radius: var(--r-button);
  font: 700 15px/1 var(--font); white-space: nowrap; cursor: pointer;
  border: 1px solid transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-outline { background: transparent; color: var(--text); border-color: var(--text); }
.btn-outline:hover { background: var(--surface); }
.btn-sm { padding: 10px 16px; font-size: 14px; }
.btn-lg { padding: 18px 32px; font-size: 16px; }
.btn-block { width: 100%; }
.link-quiet { font-weight: 700; font-size: 14px; color: var(--text); padding: 10px 6px; }
.link-quiet:hover { color: var(--primary); }
.link-inline { color: var(--primary); font-weight: 700; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

/* ─── Cartões (TSSectionCard / TSReviewCard) ────────────────────── */
.card { background: var(--surface); border-radius: var(--r-card); padding: 24px; }
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--border);
}
.card-head h3 { font-size: 16px; }

.review {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-review);
  padding: 20px;
}
.review-head { display: flex; align-items: center; gap: 12px; }
.review-author { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.review-when { font-weight: 400; font-size: 13px; color: var(--text-secondary); }
.review-text { margin-top: 12px; font-size: 15px; line-height: 1.5; }
.review-reply { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.reply-meta { display: flex; align-items: center; gap: 10px; }
.reply-status { font-size: 12px; color: var(--text-secondary); }

/* estrelas (StarRating: Icons.star em TSColors.alerta) */
.stars { display: inline-flex; gap: 1px; }
.stars i {
  width: 18px; height: 18px; display: inline-block; background: var(--border);
  clip-path: polygon(50% 2%, 61% 36%, 98% 36%, 68% 58%, 79% 94%, 50% 72%, 21% 94%, 32% 58%, 2% 36%, 39% 36%);
}
.stars[data-rating="5"] i, .stars[data-rating="4"] i:nth-child(-n+4), .stars[data-rating="3"] i:nth-child(-n+3),
.stars[data-rating="2"] i:nth-child(-n+2), .stars[data-rating="1"] i:nth-child(1) { background: var(--star); }
.stars-meter { position: relative; --fill: 100%; }
.stars-meter i { width: 19px; height: 18px; clip-path: none; background: transparent; }
.stars-meter::before, .stars-meter::after {
  content: ''; position: absolute; inset: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 18'%3E%3Cpath d='M9.5.36l2.09 6.12h7.03L12.9 10.5l2.09 6.48L9.5 12.96 4.01 16.98 6.1 10.5.38 6.48h7.03z'/%3E%3C/svg%3E") 0 0/19px 18px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 18'%3E%3Cpath d='M9.5.36l2.09 6.12h7.03L12.9 10.5l2.09 6.48L9.5 12.96 4.01 16.98 6.1 10.5.38 6.48h7.03z'/%3E%3C/svg%3E") 0 0/19px 18px repeat-x;
}
.stars-meter::before { background: var(--border); }
.stars-meter::after { width: var(--fill); background: var(--star); }

/* etiquetas de fonte (SourceBadge) */
.source { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: var(--r-badge); color: #fff; white-space: nowrap; }
/* Fontes com a marca oficial (img/mark-*.png, nunca recolorida): pílula neutra, a cor vem do logo */
.source-google, .source-ifood {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 5px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
}
.source img { width: 14px; height: 14px; object-fit: contain; border-radius: 3px; flex: none; }

/* selos, pílulas, chips */
.badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-badge); color: var(--on-primary); }
.badge-ai { background: var(--primary); }
.badge-soft { background: var(--primary-soft); color: var(--primary); }
.pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); color: #fff; white-space: nowrap; }
.pill-premium { background: var(--premium-navy); }
.pill-critical { background: var(--severity-critical); }
.pill-high { background: var(--severity-high); color: var(--text); }
.pill-medium { background: var(--severity-medium); }
.pill-low { background: var(--severity-low); }
.count-badge {
  display: inline-grid; place-items: center; min-width: 22px; height: 18px; padding: 0 6px;
  background: var(--badge-orange); color: #fff; font-size: 11px; font-weight: 700; border-radius: var(--r-badge);
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-block; font-size: 13px; font-weight: 700; padding: 6px 12px;
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface-muted); color: var(--text);
}
.chip.is-active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.chip-neg { background: var(--severity-critical-soft); border-color: transparent; color: var(--severity-critical); }
.chip-pos { background: #E9F6EC; border-color: transparent; color: var(--sentiment-pos); }
.chip-mix { background: #FFF3B0; border-color: transparent; color: var(--text); }

/* KPI (TSKpiCard) */
.kpi-row, .profile-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kpi-row-2 { grid-template-columns: 1fr 1fr; }
.kpi-value { display: flex; align-items: center; gap: 10px; font-size: 26px; font-weight: 700; margin-top: 6px; line-height: 1; }
.kpi-icon { color: var(--primary); font-size: 22px; }
.kpi-icon-star { color: var(--star); }
.kpi-icon-ok { color: var(--sentiment-pos); }
.kpi-icon-warn { color: var(--severity-high); }

/* lista com check */
.checks li { position: relative; padding-left: 32px; margin-top: 12px; font-size: 16px; color: var(--text); }
.checks li::before {
  content: 'check'; font-family: 'Material Icons'; font-size: 18px; line-height: 1;
  position: absolute; left: 0; top: 3px; width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 50%; background: var(--primary-soft); color: var(--primary);
}

/* ─── Cabeçalho fixo ───────────────────────────────────────────── */
#site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: rgba(238, 241, 248, 0.85);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease;
}
#site-header.is-scrolled { background: rgba(255, 255, 255, 0.92); border-color: var(--border); }
.header-inner {
  position: relative; /* referência para a nav centralizada */
  height: var(--header-h); max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 32px;
}
.header-logo img { height: 34px; width: auto; }
.header-nav { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: flex; gap: 28px; } /* centro real do cabeçalho, independe do logo e das ações */
.header-nav a { position: relative; font-size: 15px; font-weight: 700; color: var(--text); padding: 8px 0; transition: color .2s ease; }
.header-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px;
  background: var(--primary); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.header-nav a:hover, .header-nav a.is-active { color: var(--primary); }
.header-nav a.is-active::after { transform: scaleX(1); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.header-progress { height: 2px; }
.header-progress span { display: block; height: 100%; width: 100%; background: var(--primary); transform: scaleX(0); transform-origin: left; }
.header-menu { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; border-radius: var(--r-item); background: transparent; color: var(--text); cursor: pointer; }
.header-menu:hover { background: var(--surface); }
.mobile-menu { display: none; flex-direction: column; gap: 4px; padding: 8px var(--gutter) 20px; background: var(--surface); border-bottom: 1px solid var(--border); }
.mobile-menu a { padding: 12px 8px; font-weight: 700; border-radius: var(--r-item); }
.mobile-menu a:hover { background: var(--surface-muted); }
.mobile-menu .btn { margin-top: 8px; justify-content: center; }
.mobile-menu:not([hidden]) { display: flex; }

/* ─── A protagonista (cartão que viaja) ─────────────────────────── */
.slot { display: block; }
.protagonista { overflow: hidden; transition: padding .25s ease, border-radius .25s ease; }
.protagonista .review-text { transition: font-size .25s ease, margin-top .25s ease; }
.protagonista mark {
  background: transparent; color: inherit; border-radius: 3px; padding: 0 1px;
  transition: background-color .3s ease, box-shadow .3s ease;
}
.protagonista.is-marked .mk-entrega  { background: var(--severity-critical-soft); box-shadow: inset 0 -2px 0 var(--severity-critical); }
.protagonista.is-marked .mk-embalagem { background: #FFF3B0; box-shadow: inset 0 -2px 0 var(--severity-high); }
.protagonista.is-marked .mk-sabor    { background: #E9F6EC; box-shadow: inset 0 -2px 0 var(--sentiment-pos); }
.protagonista.is-compact { padding: 10px 14px; border-radius: var(--r-item); }
.protagonista.is-compact .review-author { font-size: 13px; }
.protagonista.is-compact .review-when { font-size: 12px; }
.protagonista.is-compact .stars i { width: 14px; height: 14px; }
.protagonista.is-compact .source { font-size: 11px; padding: 1px 7px 1px 4px; }
.protagonista.is-compact .source img { width: 12px; height: 12px; }
.protagonista.is-compact .review-text { margin-top: 6px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#spine { display: none; position: fixed; inset: 0; z-index: 50; pointer-events: none; }
html.spine-on #spine { display: block; }
#protagonista { position: absolute; top: 0; left: 0; will-change: transform, width, height; contain: layout paint; }
html.spine-on .slot > .protagonista { visibility: hidden; }

/* O logo que voa (desktop + js-motion): o clone cobre o logo do hero, o canto do cabeçalho fica vazio
   enquanto o hero está na tela; ao pousar (html.logo-landed) o logo real do cabeçalho (link) assume. */
#logo-fly { display: none; position: fixed; top: 0; left: 0; height: auto; z-index: 101; pointer-events: none; will-change: transform; transform-origin: 0 0; }
html.logo-fly-on #logo-fly { display: block; }
html.logo-fly-on .hero-logo { visibility: hidden; }                        /* mantém o lugar; o clone está por cima */
html.logo-fly-on:not(.logo-landed) .header-logo img { visibility: hidden; }
html.logo-fly-on.logo-landed #logo-fly { visibility: hidden; }

/* ─── Hero ─────────────────────────────────────────────────────── */
/* Hero: 7 "vozes" (iniciais em disco tingido + as marcas Google/iFood, anel na cor do token) em órbita
   em volta do logo, acima do título; a terceira palavra numa pílula. Um eixo central,
   grid de 8px; só a entrada se move (GSAP), nada fica em laço. A Mariana aparece em O problema (parada 0b). */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: calc(var(--header-h) + 48px) 0 112px; text-align: center;
}
.hero-copy { max-width: 920px; display: grid; justify-items: center; } /* 920: o título com a pílula cabe numa linha a 60px */
.hero-logo { display: block; width: min(240px, 56vw); height: auto; margin: 0; } /* PNG de 515px: nunca ampliado; centro da órbita */
.hero-title { margin: 0 0 16px; font-size: clamp(40px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -0.025em; color: var(--text); }
.hero-title .line { display: inline-block; }
.hero-title em { font-style: normal; color: var(--primary); }
.hero-sub { max-width: 520px; margin: 0 0 32px; font-size: 18px; line-height: 1.5; color: var(--text-secondary); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 0; }
.btn-lg { height: 52px; padding: 0 28px; font-size: 16px; }

/* Busca do hero: nome + cidade → /comecar (o app abre já buscando no Google Maps). */
.hero-search {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: min(720px, 100%);
  padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
}
.hero-search input {
  flex: 1 1 200px; min-width: 0; height: 52px; padding: 0 16px; font: inherit; font-size: 16px; color: var(--text);
  background: var(--surface-muted); border: 1px solid transparent; border-radius: var(--r-item);
}
.hero-search input:focus { outline: none; border-color: var(--primary); background: var(--surface); }
.hero-search .btn { flex: 0 0 auto; }
.hero-search-note { margin: 12px 0 0; font-size: 14px; color: var(--text-secondary); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* A pílula: a palavra que a ReplyAI promete, com o ponto verde de sentimento positivo.
   Alinhada pela LINHA DE BASE do texto (não pelo centro do flex): a mesma line-height do h1 e o ponto
   centrado por conta própria, senão o "Melhore." fica alguns px acima de "Responda. Entenda." */
.hero-pill {
  display: inline-flex; align-items: baseline; gap: .26em; vertical-align: baseline;
  padding: 0 .34em 0 .3em; border-radius: 999px; line-height: 1.02;
  background: var(--primary-soft); color: var(--primary);
}
.pill-dot { display: inline-block; align-self: center; width: .3em; height: .3em; border-radius: 50%; background: var(--sentiment-pos); }

/* As vozes em órbita: caixa fixa (680×320) com o logo no centro e os 7 círculos em posições absolutas
   numa elipse (--x/--y em % da caixa), sentido horário a partir do topo. translate/rotate individuais
   para não brigar com o transform (scale) da entrada do GSAP. */
.hero-orbit { position: relative; width: min(680px, 92vw); aspect-ratio: 680 / 320; display: grid; place-items: center; margin: 0 0 48px; }
.voices { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.voice {
  --vs: 60px; --vr: 0deg; --x: 50%; --y: 50%; --ring: var(--primary);
  position: absolute; left: var(--x); top: var(--y); width: var(--vs); height: var(--vs);
  translate: -50% -50%; rotate: var(--vr);
  border-radius: 50%; background: var(--surface); border: 2px solid var(--ring);
  display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(27, 33, 64, .08);
}
.voice-init {
  display: grid; place-items: center; width: calc(100% - 6px); height: calc(100% - 6px); border-radius: 50%;
  font-weight: 700; font-size: calc(var(--vs) * .4); line-height: 1; letter-spacing: -0.02em; color: var(--ring);
  background: color-mix(in srgb, var(--ring) 14%, var(--surface));
}
.voice-mark { display: grid; place-items: center; width: 100%; height: 100%; }
.voice-mark img { width: 52%; height: 52%; object-fit: contain; }
.v-ifood .voice-mark img { width: 46%; height: 46%; border-radius: 18%; } /* quadrado vermelho um pouco menor e com cantos suaves, como nos chips de fonte */
.v-a     { --x: 36%; --y: 6%;  --vs: 58px; --vr: -4deg; --ring: var(--sentiment-pos); }
.v-b     { --x: 80%; --y: 16%; --vs: 50px; --vr: 5deg;  --ring: var(--primary); }
.v-ifood { --x: 92%; --y: 48%; --vs: 60px; --vr: 0deg;  --ring: var(--ifood); } /* a marca é um quadrado: sem giro, senão parece torta */
.v-e     { --x: 76%; --y: 88%; --vs: 56px; --vr: 4deg;  --ring: var(--competitors); }
.v-d     { --x: 30%; --y: 86%; --vs: 52px; --vr: -5deg; --ring: var(--star); }
.v-c     { --x: 7%;  --y: 52%; --vs: 70px; --vr: -2deg; --ring: var(--severity-critical); }
.v-google{ --x: 18%; --y: 14%; --vs: 62px; --vr: 3deg;  --ring: var(--google); }

/* Legendas: 3 das 7 vozes mostram estrelas + 2–3 palavras (mistura honesta), do lado de FORA da órbita */
.voice-cap {
  position: absolute; top: 50%; translate: 0 -50%; rotate: calc(var(--vr) * -1);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font: 700 12px/1 var(--font); color: var(--text); padding: 6px 9px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-badge);
  box-shadow: 0 4px 14px rgba(27, 33, 64, .08);
}
[data-cap="right"] .voice-cap { left: calc(100% + 10px); }
[data-cap="left"]  .voice-cap { right: calc(100% + 10px); }
.voice-cap .stars i { width: 11px; height: 11px; }
@media (max-width: 1100px) { /* menos largura: a legenda da esquerda desce para baixo do círculo em vez de encostar na borda */
  [data-cap="left"] .voice-cap { right: auto; left: 50%; top: calc(100% + 10px); translate: -50% 0; }
}

.scroll-cue {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--text);
}
.scroll-cue .material-icons { animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ─── Pilares ──────────────────────────────────────────────────── */
.pillar {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--header-h) + 24px) 0 64px;
}
.pillar-alt { background: var(--surface); } /* classe explícita: o pin-spacer do ScrollTrigger quebra nth-of-type */
.pillar-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.pillar[data-side="right"] .pillar-copy { order: 2; }
.pillar[data-side="right"] .pillar-mock { order: 1; }
.pillar-copy h2 { margin-bottom: 18px; }
.pillar-copy > p { font-size: 17px; line-height: 1.6; color: var(--text); }
.pillar-copy .checks { margin-top: 20px; }
.pillar-mock { position: relative; }
.mock { will-change: transform, opacity; }
.pillar-alt .card, .pillar-alt .review { border: 1px solid var(--border); }

/* pilar 1 — perfil público (a varredura desce o cartão quando a avaliação chega) */
.mock-profile { position: relative; overflow: hidden; max-width: 520px; margin-left: auto; }
.sweep { position: absolute; left: 0; right: 0; top: 0; height: 84px; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(46,91,255,0), rgba(46,91,255,.10) 50%, rgba(46,91,255,0)); }
.sweep::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--primary); opacity: .5; }
html:not(.js-motion) .sweep { display: none; }
.profile-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.rating-big { display: flex; flex-direction: column; gap: 8px; }
.rating-number { font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.ring { width: 120px; height: 120px; flex: none; }
.ring-track { fill: none; stroke: var(--surface-muted); stroke-width: 10; }
.ring-fill { fill: none; stroke: var(--primary); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 4; transform: rotate(-90deg); transform-origin: 50% 50%; }
.ring-value { font: 700 22px var(--font); fill: var(--text); }
.ring-label { font: 400 10px var(--font); fill: var(--text-secondary); }
.profile-row { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.profile-last { margin-top: 18px; padding: 16px 8px 4px; margin-left: -8px; margin-right: -8px; border-top: 1px solid var(--border); border-radius: var(--r-item); }
.profile-last .kpi-label { margin-bottom: 8px; }

/* pilar 2 — resposta */
.mock-reply { max-width: 520px; display: flex; flex-direction: column; gap: 12px; }
.reply-panel { padding: 18px 20px; }
.tones { display: flex; flex-direction: column; gap: 8px; }
.reply-box { margin-top: 14px; padding: 14px 16px; background: var(--surface-muted); border-radius: var(--r-item); border: 1px solid var(--border); }
.reply-typed { font-size: 14.5px; line-height: 1.55; min-height: 6.2em; }
.typed::after, .reply-typed::after { content: ''; display: inline-block; width: 2px; height: 1em; background: var(--primary); vertical-align: -2px; margin-left: 2px; opacity: 0; }
.typed.is-typing::after, .reply-typed.is-typing::after { opacity: 1; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.reply-promo { margin-top: 10px; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--primary); }
.reply-promo .material-icons { font-size: 16px; }
.reply-actions { margin-top: 14px; display: flex; align-items: center; gap: 10px; }
.sent-badge { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); }

/* pilar 3 — pesquisa em três passos (monte · gere o QR · receba) */
.mock-steps { max-width: 540px; margin-left: auto; }
.steps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.step { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-item); background: var(--surface-muted); color: var(--text-secondary); font-size: 12px; font-weight: 700; line-height: 1.2; }
.step-n { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--border); color: var(--text); font-size: 11px; }
.step.is-active { background: var(--primary-soft); color: var(--primary); }
.step.is-active .step-n { background: var(--primary); color: var(--on-primary); }
.step.is-done .step-n { background: var(--sentiment-pos); color: #fff; }
.steps-body { display: grid; grid-template-columns: minmax(0, 1fr) 116px; gap: 16px; align-items: start; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.form-list { list-style: none; margin: 0; padding: 0; }
.form-q { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); }
.form-q:first-child { border-top: 0; padding-top: 0; }
.form-q p { font-size: 13px; font-weight: 700; }
.form-n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: 11px; font-weight: 700; }
.form-type { font-size: 11px; padding: 3px 8px; }
.qr-box { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.qr { width: 96px; height: 96px; flex: none; }
.qr rect { fill: var(--text); transform-box: fill-box; transform-origin: center; }
.qr-box .kpi-label { font-size: 11px; }
.feed { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.feed-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.feed-sources { display: inline-flex; gap: 6px; }
.feed-sources .source, .feed-row .source { font-size: 11px; padding: 2px 7px; }
.source-survey { background: var(--primary); }
.feed-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-item); background: var(--surface); }
.feed-when { font-size: 12px; color: var(--text-secondary); margin-right: 4px; }
.feed-row .chip { font-size: 12px; padding: 3px 9px; }

/* pilar 4 — insights */
.mock-insights-wrap { position: relative; display: flex; flex-direction: column; gap: 12px; max-width: 540px; }
.temas-row { display: flex; align-items: center; gap: 12px; }
.temas-row .chip { font-size: 12px; }
.chip-fly { position: relative; }
.alert-strip { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--severity-critical-soft); border-radius: var(--r-item); color: var(--severity-critical); }
.alert-strip p { flex: 1; font-size: 14px; color: var(--text); }
.alert-strip .material-icons { color: var(--severity-critical); }
.evidence { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.evidence-row { display: grid; grid-template-columns: 150px 1fr 36px; gap: 12px; align-items: center; font-size: 13px; }
.evidence-label { color: var(--text-secondary); }
.evidence-bar { height: 10px; border-radius: 5px; background: var(--surface-muted); overflow: hidden; }
.evidence-bar .bar { display: block; height: 100%; width: var(--w); border-radius: 5px; transform-origin: left; }
.bar-neg { background: var(--sentiment-neg); }
.bar-pos { background: var(--sentiment-pos); }
.evidence-value { font-weight: 700; text-align: right; }
.insight-action { margin-top: 14px; font-size: 14px; color: var(--text-secondary); }
.evidence-list { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.link-evidence { font-size: 14px; font-weight: 700; color: var(--primary); }
.evidence-more { font-size: 12px; color: var(--text-secondary); }
/* pilar 5 — concorrência: a avaliação em cima, o ranking por tema embaixo (seis casas por fila) */
.mock-compete-wrap { position: relative; display: flex; flex-direction: column; gap: 12px; max-width: 540px; }
.compete-you .kpi-label { margin-bottom: 8px; }
.badge-violet { background: var(--competitors-soft); color: var(--competitors); }
/* Ranking por tema: em cada tema, a sua barra (violeta) contra a de quem lidera/rivaliza (cinza) — a
   comparação se lê de relance; a posição entra numa pílula quando as barras assentam */
.rank-list { display: flex; flex-direction: column; gap: 12px; }
.rank-row { display: flex; flex-direction: column; gap: 5px; padding-top: 10px; border-top: 1px solid var(--border); }
.rank-row:first-child { padding-top: 0; border-top: 0; }
.rank-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.rank-theme { font-size: 13px; font-weight: 700; }
.rank-pos { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-badge); white-space: nowrap; background: var(--surface-muted); color: var(--text-secondary); }
.rank-pos.pos-good { background: #E9F6EC; color: var(--sentiment-pos); }
.rank-pos.pos-bad { background: var(--severity-critical-soft); color: var(--severity-critical); }
.rank-bar-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) 30px; gap: 10px; align-items: center; font-size: 12px; color: var(--text-secondary); }
.rank-who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-you .rank-who, .rank-you .rank-score { color: var(--competitors); font-weight: 700; }
.rank-bar { display: block; height: 10px; border-radius: 5px; background: var(--surface-muted); overflow: hidden; }
.rank-bar i { display: block; height: 100%; width: var(--w); border-radius: 5px; background: var(--severity-low); transform-origin: left center; }
.rank-you .rank-bar i { background: var(--competitors); }
.rank-score { font-weight: 700; text-align: right; }
.compare-insight {
  margin-top: 16px; padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start;
  background: var(--competitors-soft); border-radius: var(--r-item);
}
.compare-insight .material-icons { color: var(--competitors); font-size: 20px; flex: none; }
.compare-insight p { font-size: 13px; line-height: 1.45; }
.compare-insight strong { color: var(--competitors); }

/* ─── Seções comuns ────────────────────────────────────────────── */
.section { padding: 104px 0; }
.section-head { max-width: 720px; margin-bottom: 44px; }
.section-head h2 { margin-top: 0; }
.trend-line { fill: none; stroke: var(--primary); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.trend-line-overall { stroke: #4FC3F7; stroke-width: 2; stroke-dasharray: 4 4; }

/* ─── Do nome ao painel (filmstrip) ────────────────────────────── */
.strip-section { position: relative; padding: 96px 0 72px; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.strip-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 36px; }
.strip-head .section-head { margin-bottom: 0; }
.strip-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; text-align: right; }
.strip-cta-line { font-size: 15px; color: var(--text-secondary); }
.strip-viewport { overflow: hidden; }
.strip-track { display: flex; flex-direction: column; gap: 28px; padding: 0 var(--gutter); max-width: var(--container); margin: 0 auto; }
.frame { flex: 0 0 auto; width: min(680px, 100%); display: flex; flex-direction: column; }
.frame-label { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; margin-bottom: 12px; }
.frame-num { width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 13px; display: grid; place-items: center; }
.frame > .card { flex: 1; border: 1px solid var(--border); }
/* quadro sem título: o cartão começa na mesma altura dos outros (26px de rótulo + 12px de margem) */
.frame-untitled { padding-top: 38px; }

/* quadro 1 — busca */
.field { margin-bottom: 12px; }
.field-label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.field-input { height: 44px; border: 1px solid var(--border); border-radius: var(--r-button); padding: 0 14px; display: flex; align-items: center; font-size: 15px; background: var(--surface); }
.btn-search { margin: 4px 0 18px; }
.result .kpi-label { margin-bottom: 8px; }
.candidate { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-item); background: var(--surface); }
.source-dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; flex: none; }
.source-dot-google, .source-dot-ifood { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-badge); }
.source-dot img { width: 18px; height: 18px; object-fit: contain; border-radius: 3px; }
.candidate-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.candidate-text strong { font-size: 14px; }
.candidate-text span { font-size: 12px; color: var(--text-secondary); }
.candidate-text .candidate-reason { color: var(--sentiment-pos); font-weight: 700; }
.candidate-cta { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; color: var(--primary); white-space: nowrap; }
.candidate-cta .material-icons { font-size: 18px; }

/* quadro 2 — mapa */
.map { width: 100%; height: 200px; border-radius: var(--r-item); background: var(--surface-muted); }
.map-dim { stroke: var(--text); stroke-width: 2; stroke-dasharray: 100; stroke-dashoffset: 0; }
.map-dim-label text { font: 700 12px var(--font); fill: #fff; }
.map-caption { margin: 14px 0 8px; }
.frame-foot { margin-top: 14px; font-size: 13px; color: var(--text-secondary); }

/* quadro 3 — coletamos as avaliações */
.stream-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.stream-count { font-size: 44px; font-weight: 700; line-height: 1; color: var(--primary); letter-spacing: -0.02em; }
.stream-sources { display: flex; gap: 6px; }
.stream { display: flex; flex-direction: column; gap: 8px; }
.stream-row { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-item); font-size: 13px; background: var(--surface); }
.stream-row .stars i { width: 13px; height: 13px; }
.stream-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stream-row-you { border-color: var(--primary); background: var(--primary-soft); }

/* quadro 4 — o painel nasce: a tela de montagem do app (sete etapas) numa janela de navegador. No desktop
   com movimento a janela depois VOA (#win-fly, buildWinFlight) e vira o shell do tour com o Dashboard já
   montado. O HTML guarda o estado final: todas as etapas concluídas. */
.build { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.win { display: flex; flex-direction: column; background: var(--surface); }
.build .win { flex: none; aspect-ratio: 1132 / 640; } /* a mesma proporção do shell do tour: o voo não corta nem estica */
.win-bar { display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 14px; background: var(--surface-muted); border-bottom: 1px solid var(--border); flex: none; }
.win-dots { display: inline-flex; gap: 6px; }
.win-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.win-url { flex: 1; max-width: 320px; height: 22px; margin: 0 auto; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--text-secondary); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
.win-body { flex: 1; min-height: 0; }
.build-screen { display: flex; flex-direction: column; gap: 16px; padding: 22px 24px; background: var(--canvas); }
.build-screen-head { display: flex; align-items: center; gap: 14px; }
.build-screen-head img { width: 36px; height: auto; flex: none; }
.build-screen-head h3 { font-size: 17px; }
.build-screen-head .kpi-label { margin-top: 2px; }
.build-steps { display: flex; flex-direction: column; gap: 7px; }
.build-steps li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 13px; font-weight: 700; color: var(--text); }
.step-dot { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); }
.step-check { font-size: 14px; color: #fff; }
.build-steps li.is-done .step-dot { background: var(--sentiment-pos); border-color: var(--sentiment-pos); }
.build-progress { height: 8px; border-radius: 4px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.build-progress-fill { display: block; height: 100%; width: 100%; background: var(--primary); border-radius: 4px; transform-origin: left; }

/* a passagem para o tour: clone fixo que cresce do quadro 3 até o shell; dentro, a tela de carregamento
   (por cima) some e revela o clone do shell (por baixo), escalado para a largura corrente da caixa */
#win-fly { display: none; position: fixed; left: 0; top: 0; z-index: 60; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--canvas); pointer-events: none; will-change: transform, width, height; }
html.win-fly-on #win-fly { display: block; }
#win-fly .fly-loading { position: absolute; inset: 0; z-index: 2; }
#win-fly .fly-shell { position: absolute; left: 0; top: 0; transform-origin: 0 0; border: 0; border-radius: 0; container-type: size; container-name: shell; }
#win-fly .fly-shell .pane:not([data-stop="dashboard"]) { display: none; }
html.win-flying #como-funciona .frame-build .win { visibility: hidden; }     /* a janela do quadro virou o clone */
html.win-fly-on:not(.win-landed) #recursos .shell { visibility: hidden; }    /* o shell real só aparece quando o clone pousa */
.td-right { text-align: right; }
.td-center { text-align: center; }
.td-rating { font-weight: 700; white-space: nowrap; }
.td-rating .material-icons { font-size: 14px; color: var(--star); margin-left: 3px; vertical-align: -2px; }
.build-dots circle, .dash-dots circle { fill: var(--surface); stroke: var(--primary); stroke-width: 2; transform-box: fill-box; }
.build-dots .dot-low, .dash-dots .dot-low { stroke: var(--sentiment-neg); }
.build-bar { margin-top: auto; padding: 14px 18px 16px; background: var(--surface); border-top: 1px solid var(--border); }
.build-bar-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.build-enter .material-icons { font-size: 18px; }

/* ─── Dê uma olhada no produto (tour) ──────────────────────────── */
.tour-section { padding: 104px 0; }
/* título + cinco abas em linha; o shell do app ocupa o container inteiro embaixo */
.tour-stack { display: flex; flex-direction: column; gap: 20px; }
.tour-captions { margin-top: 18px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.tour-captions li { padding-top: 10px; border-top: 3px solid var(--border); transition: opacity .3s ease, border-color .3s ease; }
.tour-captions li.is-active { border-top-color: var(--primary); }
.tour-captions h3 { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.tour-captions h3 .pill { font-size: 10px; padding: 2px 7px; }
.tour-captions p { margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); height: 640px; background: var(--canvas); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.shell-side { padding: 18px 12px; display: flex; flex-direction: column; }
.shell-logo { height: 28px; width: auto; align-self: flex-start; margin: 4px 0 20px 10px; }
.shell-menu { position: relative; display: flex; flex-direction: column; gap: 4px; }
.shell-highlight { position: absolute; left: 0; right: 0; top: 0; height: 40px; border-radius: var(--r-item); background: var(--primary); z-index: 0; }
.shell-item { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: var(--r-item); font-size: 13.5px; font-weight: 500; color: var(--text); white-space: nowrap; }
.shell-item .material-icons { font-size: 20px; color: var(--text-secondary); }
.shell-item.is-active { color: var(--on-primary); font-weight: 600; }
.shell-item.is-active .material-icons { color: var(--on-primary); }
.shell-item .count-badge, .shell-item .pill { margin-left: auto; }
.shell-item .pill { font-size: 10px; padding: 2px 7px; }
.shell-menu-head { position: relative; z-index: 1; padding: 12px 12px 4px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
.shell-user { margin-top: auto; display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-review); padding: 10px 12px; font-size: 13px; font-weight: 700; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-size: 12px; flex: none; }
.shell-user-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.shell-user .material-icons { color: var(--text-secondary); font-size: 20px; }
.shell-pane { position: relative; padding: 18px; overflow: hidden; }
.pane { display: flex; flex-direction: column; gap: 10px; }
.pane + .pane { margin-top: 24px; }
.pane-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pane-head h3 { font-size: 18px; display: flex; align-items: center; gap: 8px; }
.pane-head .kpi-label { flex-basis: 100%; }
.pane-head > div > .kpi-label { flex-basis: auto; margin-top: 2px; }
.chips-filter .chip { font-size: 12px; padding: 4px 10px; background: var(--surface); }
.pane-card { padding: 14px 16px; border: 1px solid var(--border); }
.pane-card .card-head { padding-bottom: 10px; margin-bottom: 10px; }
.pane-card .card-head h3 { font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pane-card .card-head .badge { white-space: nowrap; font-size: 11px; padding: 3px 8px; }
.pane-two { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; }
.pane .pane-card { min-width: 0; overflow: hidden; }
.pane .mini-table th { font-size: 10px; letter-spacing: .02em; }
.pane-two .kpi-row-2 { grid-template-columns: 1fr; gap: 10px; }
.pane .kpi-value { font-size: 20px; }
.pane-chart { display: block; width: 100%; height: 84px; } /* o JS redesenha no tamanho real da caixa: nada estica */
/* dentro das telas, o chip ativo vence o fundo branco dos chips de filtro/índice */
.chips-filter .chip.is-active, .chips-index .chip.is-active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.pane-text { font-size: 13px; }
.btn-xs { padding: 7px 11px; font-size: 12px; gap: 6px; }
.btn-xs .material-icons { font-size: 15px; }
.btn.is-disabled { opacity: .45; }
.mini-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mini-table th { text-align: left; padding: 4px 8px 4px 0; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); white-space: nowrap; }
.mini-table td { padding: 6px 8px 6px 0; border-top: 1px solid var(--border); white-space: nowrap; }
.mini-table th:last-child, .mini-table td:last-child { padding-right: 0; }
.pos-good { color: var(--sentiment-pos); font-weight: 700; }
.pos-bad { color: var(--sentiment-neg); font-weight: 700; }
.pos-mid { color: var(--text-secondary); }

/* corpo em duas colunas: conteúdo + trilho de filtros (GlobalFilterRail, 288px no app; aqui proporcional) */
.pane-body { display: grid; grid-template-columns: minmax(0, 1fr) 176px; gap: 12px; align-items: start; }
.pane-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pane-rail { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.rail-title { font-size: 12px; font-weight: 700; margin-bottom: 2px; }
.rail-label { font-size: 10.5px; color: var(--text-secondary); }
.rail-field { display: flex; flex-direction: column; gap: 3px; }
.rail-value { display: flex; align-items: center; justify-content: space-between; height: 28px; padding: 0 8px; font-size: 11.5px; border: 1px solid var(--border); border-radius: var(--r-button); background: var(--surface); }
.rail-value .material-icons { font-size: 16px; color: var(--text-secondary); }
.rail-checks { display: flex; flex-wrap: wrap; gap: 4px; }
.rail-checks-col { flex-direction: column; }
.rail-check { font-size: 10.5px; font-weight: 700; padding: 3px 7px; border-radius: 6px; border: 1px solid var(--border); color: var(--text-secondary); background: var(--surface-muted); }
.rail-check.is-on { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.pane-rail .btn-block { margin-top: 4px; }

/* Dashboard — últimos comentários (carrossel do app, aqui dois cartões) */
.comments-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.comment-card { border: 1px solid var(--border); border-radius: var(--r-review); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.comment-meta { font-size: 12px; }
.comment-card .stars i { width: 12px; height: 12px; }
.comment-text { font-size: 12px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.comment-card .kpi-label { display: flex; align-items: center; gap: 6px; }
.comment-card .source { font-size: 10px; padding: 1px 6px 1px 4px; }
.comment-card .source img { width: 11px; height: 11px; }

/* Avaliações pendentes — cartão com editor de resposta (Rascunho ReplyAI · Gerar resposta · Enviar) */
.pending-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pending-list .review { padding: 10px 12px; }
.pending-list .review-text { margin-top: 6px; font-size: 13px; }
.pending-store { margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.pending-store .material-icons { font-size: 14px; }
.reply-editor { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.reply-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.draft-badge { font-size: 10px; padding: 2px 7px; }
.reply-field { min-height: 36px; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--r-button); background: var(--surface-muted); font-size: 12px; line-height: 1.45; }
.pend-typed { min-height: 52px; }
.pend-typed::after { content: ''; display: inline-block; width: 2px; height: 1em; background: var(--primary); vertical-align: -2px; margin-left: 2px; opacity: 0; }
.pend-typed.is-typing::after { opacity: 1; animation: caret 1s steps(1) infinite; }
.reply-placeholder { color: var(--text-secondary); }
.pending-list .reply-actions { margin-top: 8px; justify-content: flex-end; }

/* Insights — índice, bloco de alertas (tinta vermelha, trilho à esquerda) e escada de insights */
.chips-index .chip { font-size: 11.5px; padding: 4px 10px; background: var(--surface); }
.alerts-block { position: relative; background: var(--severity-critical-soft); border-color: transparent; border-left: 4px solid var(--severity-critical); }
.alert-kicker { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--severity-critical); margin-bottom: 4px; }
.alerts-block .card-head { border-bottom-color: rgba(214, 69, 69, .18); margin-bottom: 6px; }
.alert-row { margin-top: 6px; }
.alert-row-head { display: flex; align-items: center; gap: 8px; }
.alert-row-head .material-icons { font-size: 18px; color: var(--severity-critical); }
.alert-sev { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--severity-critical); }
.alert-expand { margin-left: auto; color: var(--text-secondary) !important; }
.alert-quote { margin: 4px 0 2px; font-size: 13px; font-style: italic; line-height: 1.4; }
.ladder { display: flex; flex-direction: column; gap: 8px; }
.ladder-item { position: relative; padding: 8px 10px 8px 14px; border: 1px solid var(--border); border-radius: var(--r-item); background: var(--surface); }
.ladder-item::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--severity-low); }
.ladder-item[data-sev="high"]::before { background: var(--severity-high); }
.ladder-item[data-sev="medium"]::before { background: var(--severity-medium); }
.ladder-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.ladder-head strong { flex: 1; min-width: 0; }
.ladder-head .pill { font-size: 10px; padding: 2px 7px; }
.ladder-fav { font-size: 16px; color: var(--star); }
.anatomy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.anatomy-col { display: flex; flex-direction: column; gap: 4px; }
.anatomy-k { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.anatomy-bar { display: block; height: 4px; width: var(--w); border-radius: 2px; background: var(--primary); transform-origin: left center; }
.anatomy-col p { font-size: 11.5px; line-height: 1.4; }

/* Concorrentes — "Sua loja" + lista (posição · avatar · nome · fontes) + pódio */
.pane-body-comp { grid-template-columns: 200px minmax(0, 1fr); }
.your-store-name { font-size: 14px; }
.big-rating { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; font-size: 26px; font-weight: 700; line-height: 1; }
.big-rating .material-icons { font-size: 20px; color: var(--star); align-self: center; }
.src-ratings { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.src-ratings .source { font-size: 11px; }
.comp-list { display: flex; flex-direction: column; gap: 6px; }
.comp-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--border); font-size: 12px; }
.comp-row:first-child { border-top: 0; padding-top: 0; }
.comp-pos { display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--primary-soft); color: var(--primary); font-size: 11px; font-weight: 700; }
.avatar-sm { width: 24px; height: 24px; font-size: 10px; }
.comp-text { flex: 1 1 120px; min-width: 96px; display: flex; flex-direction: column; }
.comp-text strong { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comp-text .kpi-label { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comp-row .source { font-size: 10.5px; padding: 1px 6px 1px 4px; }
.comp-row .source img { width: 11px; height: 11px; }
.source-add { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border: 1px solid var(--primary); color: var(--primary); border-radius: var(--r-badge); white-space: nowrap; }
.source-collecting { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--text-secondary); white-space: nowrap; }
.spinner { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--primary); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.comp-del { font-size: 16px; color: var(--text-secondary); }
.comp-slot { display: flex; align-items: center; justify-content: center; gap: 6px; height: 30px; border: 1px dashed var(--border); border-radius: var(--r-item); color: var(--text-secondary); font-size: 11.5px; }
.comp-slot .material-icons { font-size: 16px; }
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.podium-item { display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px solid var(--border); border-radius: var(--r-item); font-size: 13px; }
.podium-you { border-color: var(--competitors); background: var(--competitors-soft); }
.podium-medal { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 10px; font-weight: 700; color: #fff; }
.medal-gold { background: var(--sentiment-mixed); color: var(--text); }
.medal-silver { background: var(--severity-low); }
.medal-bronze { background: #C77B3B; }
.podium-rating { font-size: 22px; font-weight: 700; }
.podium-item .badge { align-self: flex-start; font-size: 10px; padding: 2px 7px; }

/* ─── As telas se adaptam ao shell: em vez de cortar ou esticar, cada tela solta o bloco menos importante
   quando o shell fica baixo (laptops) ou estreito. Só vale onde o shell tem tamanho fixo (desktop + js-motion
   e o clone do voo); no celular tudo empilha e aparece inteiro. ── */
@container shell (max-height: 600px) {
  .pane-dashboard .comments-card, .pane-pendentes .pending-card + .pending-card, .pane-insights .ladder-item + .ladder-item,
  .pane-concorrentes .podium-card, .pane-estrutura .brands-card { display: none; }
}
@container shell (max-height: 500px) {
  .pane-rail, .pane-insights .anatomy, .pane-insights .chips-index, .pane-concorrentes .comp-slot { display: none; }
  /* a barra lateral também encurta: sem o bloco do usuário e com itens mais baixos */
  .shell-user { display: none; }
  .shell-item { height: 36px; font-size: 13px; }
  .shell-logo { margin-bottom: 12px; }
  .shell-menu-head { padding-top: 8px; }
  .pane-body { grid-template-columns: minmax(0, 1fr); }
  .pane { gap: 8px; }
  .pane .pane-card { padding: 10px 12px; }
  .pane-head .kpi-label { display: none; }
}
@container shell (max-width: 1000px) {
  .pane-rail, .pane-dashboard .comments-card, .pane-concorrentes .your-store { display: none; }
  .pane-body, .pane-body-comp { grid-template-columns: minmax(0, 1fr); }
}

/* Marcas e estrutura — tabelas "Lojas" e "Bandeiras" (Bandeira › Região › Loja) */
.pane-tools { display: flex; align-items: center; gap: 8px; }
.field-search { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r-button); background: var(--surface); font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; }
.field-search .material-icons { font-size: 16px; }
.stores-table, .brands-table { font-size: 11.5px; }
.stores-table th, .brands-table th { font-size: 10px; padding-right: 6px; }
.stores-table td, .brands-table td { padding: 7px 6px 7px 0; }
/* os dois ícones ocupam a mesma célula de um grid inline (position:absolute dentro de <td> não é confiável) */
.link-stack { display: inline-grid; place-items: center; vertical-align: middle; }
.link-stack > .material-icons { grid-area: 1 / 1; }
html:not(.js-motion) .link-off { display: none; } /* sem movimento, a loja já aparece conectada: só o ✓ */
.link-ok { font-size: 18px; color: var(--sentiment-pos); }
.link-off { font-size: 18px; color: var(--severity-low); }
.status { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: var(--r-badge); }
.status-on { background: color-mix(in srgb, var(--sentiment-pos) 12%, var(--surface)); color: var(--sentiment-pos); }
.td-actions .material-icons { font-size: 16px; margin-right: 6px; }
.act-edit { color: var(--primary); }
.act-del { color: var(--sentiment-neg); }

/* ─── Planos (segmented control do app) ────────────────────────── */
.plans-wrap { max-width: 720px; margin: 0 auto; }
.plan-card { padding: 32px; }
.seg { display: inline-flex; padding: 4px; background: var(--canvas); border-radius: var(--r-item); }
.seg-btn { min-width: 110px; height: 36px; padding: 0 20px; border: 0; border-radius: var(--r-button); background: transparent; font: 600 13px var(--font); color: var(--text); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.seg-btn[aria-selected="true"] { background: var(--primary); color: var(--on-primary); }
.plan-price { margin: 18px 0 0; font: 700 28px var(--font); color: var(--text); }
.plan-helper { margin: 6px 0 4px; font-size: 14px; color: var(--text-secondary); }
.plan-note { margin: 12px 0 0; font-size: 13px; color: var(--text-secondary); text-align: center; }
.plan-rows li { overflow: hidden; }
.plan-rows li[hidden] { display: none; }
.plan-teaser { margin-top: 20px; padding: 14px 16px; border-radius: var(--r-item); background: var(--competitors-soft); overflow: hidden; }
.plan-teaser .kpi-label { margin-bottom: 10px; }
.plan-cta { margin-top: 24px; width: 100%; }
.mini-bench { display: flex; flex-direction: column; gap: 8px; }
.mini-row { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; font-size: 12px; color: var(--text-secondary); }
.mini-bar { position: relative; height: 8px; border-radius: 4px; background: var(--surface); }
.mini-bar::before { content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--border); }
.mini-bar i { position: absolute; top: 0; bottom: 0; width: calc(var(--w) / 2); border-radius: 4px; }
.mini-bar i.pos { left: 50%; background: var(--sentiment-pos); }
.mini-bar i.neg { right: 50%; background: var(--sentiment-neg); }

/* ─── Comece agora de graça ────────────────────────────────────── */
.section-start { background: var(--surface); border-top: 1px solid var(--border); }
.start-wrap { max-width: 720px; margin: 0 auto; text-align: center; }
.start-sub { margin-top: 12px; font-size: 20px; line-height: 1.5; font-weight: 700; color: var(--primary); }
.start-actions { display: flex; justify-content: center; margin-top: 28px; }
.start-wrap .hero-note { margin-top: 14px; }

/* ─── Rodapé ───────────────────────────────────────────────────── */
.footer { background: var(--surface); border-top: 1px solid var(--border); padding: 40px 0; }
.footer-inner { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.footer-logo img { height: 30px; width: auto; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-nav a { font-size: 14px; font-weight: 700; color: var(--text-secondary); }
.footer-nav a:hover { color: var(--text); }
.footer-note { margin-left: auto; font-size: 13px; color: var(--text-secondary); }

/* ─── Portão desktop + movimento: pin, strip horizontal, tour ──── */
@media (min-width: 901px) {
  html.js-motion .strip-section { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header-h) + 16px) 0 28px; }
  html.js-motion .strip-head { margin-bottom: 24px; }
  html.js-motion .strip-viewport { overflow: hidden; }
  html.js-motion .strip-track {
    flex-direction: row; max-width: none; margin: 0;
    --pad: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
    padding: 0 var(--pad); will-change: transform;
  }
  html.js-motion .frame { width: min(680px, 78vw); }
  html.js-motion .tour-section { min-height: 100vh; display: flex; align-items: center; padding: calc(var(--header-h) + 8px) 0 24px; }
  html.js-motion .shell { height: clamp(440px, calc(100vh - 290px), 680px); container-type: size; container-name: shell; } /* a seção fixada nunca passa da janela; as telas se adaptam ao tamanho do shell (container queries abaixo) */
  html.js-motion .tour-captions li { opacity: .7; } /* .7 mantém 4,5:1 sobre o canvas */
  html.js-motion .tour-captions li.is-active { opacity: 1; }
  html.js-motion .pane { position: absolute; inset: 18px; margin: 0; }
}

/* ─── Sem o portão: shell empilhado (mobile, reduced-motion, sem JS) ── */
@media (max-width: 900px) {
  .shell-side { display: none; }
  .shell { grid-template-columns: minmax(0, 1fr); height: auto; background: transparent; border: 0; overflow: visible; }
  .shell-pane { padding: 0; overflow: visible; min-width: 0; }
  .pane { background: var(--canvas); border: 1px solid var(--border); border-radius: var(--r-card); padding: 16px; }
}
html:not(.js-motion) .shell-side { display: none; }
html:not(.js-motion) .shell { grid-template-columns: minmax(0, 1fr); height: auto; background: transparent; border: 0; overflow: visible; }
html:not(.js-motion) .shell-pane { padding: 0; overflow: visible; min-width: 0; }
html:not(.js-motion) .pane { background: var(--canvas); border: 1px solid var(--border); border-radius: var(--r-card); padding: 16px; }

/* ─── Responsivo ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-grid { gap: 40px; }
}

@media (max-width: 900px) {
  :root { --header-h: 64px; }
  .header-nav, .header-actions { display: none; }
  .header-menu { display: grid; place-items: center; }
  .hero { padding: calc(var(--header-h) + 40px) 0 72px; min-height: 0; }
  /* órbita vira fila de 5 círculos acima do logo */
  .hero-orbit { width: auto; aspect-ratio: auto; display: grid; justify-items: center; margin-bottom: 28px; }
  .hero-logo { width: min(240px, 64vw); }
  .voices { position: static; display: flex; justify-content: center; gap: 10px; margin: 0 0 28px; }
  .voice { position: relative; left: auto; top: auto; translate: 0 0; rotate: 0deg; --vs: 44px; }
  .voice-cap, .v-d, .v-e { display: none; }
  .hero-grid, .pillar-grid, .strip-head { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .tour-captions { grid-template-columns: minmax(0, 1fr); }
  .tour-captions p { display: block; }
  .pillar-copy, .pillar-mock, .hero-copy { min-width: 0; }
  .scroll-cue { display: none; }
  .pillar { min-height: 0; padding: 80px 0; }
  .pillar[data-side="right"] .pillar-copy { order: 1; }
  .pillar[data-side="right"] .pillar-mock { order: 2; }
  .mock-profile, .mock-reply, .mock-insights-wrap, .mock-compete-wrap { max-width: 100%; margin-left: 0; }
  .strip-cta { align-items: flex-start; text-align: left; }
  .frame-untitled { padding-top: 0; }
  .pane-body, .pane-body-comp, .pane-two { grid-template-columns: minmax(0, 1fr); }
  .pane-rail { display: none; }
  .comments-row { grid-template-columns: 1fr; }
  .anatomy { grid-template-columns: 1fr; }
  .pane { min-width: 0; }
  .pane .pane-card { overflow: visible; overflow-x: auto; }
  .pane-card .card-head .badge, .mini-table th, .mini-table td { white-space: normal; }
  .mock-steps { max-width: 100%; margin-left: 0; }
  .section, .tour-section { padding: 72px 0; }
  .strip-section { padding: 72px 0 56px; }
  .strip-head { gap: 20px; }
  .tour-captions { gap: 14px; }
  .pane-two { grid-template-columns: 1fr; }
  .podium { grid-template-columns: 1fr; }
  .build-bar-row { flex-direction: column; align-items: flex-start; }
  .footer-note { margin-left: 0; }
}

@media (max-width: 560px) {
  :root { --gutter: 16px; }
  h2 { font-size: 28px; }
  .hero-title { font-size: 36px; }
  .hero-title .line { display: block; }
  .hero-sub { font-size: 17px; }
  .hero-actions .btn { width: 100%; white-space: normal; height: auto; padding: 14px 20px; line-height: 1.25; } /* o rótulo quebra: sem ele a página inteira transbordava a 375px */
  .hero-search { flex-direction: column; }
  .hero-search input, .hero-search .btn { flex: 0 0 auto; width: 100%; }
  .voices { gap: 8px; }
  .voice { --vs: 40px; }
  .kpi-row, .profile-row { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .steps-body { grid-template-columns: 1fr; }
  .qr-box { flex-direction: row; text-align: left; }
  .profile-top { flex-direction: column; align-items: flex-start; }
  .rating-number { font-size: 48px; }
  .evidence-row { grid-template-columns: 110px 1fr 32px; }
  .card { padding: 20px; }
  .plan-card { padding: 24px; }
  .seg { width: 100%; }
  .seg-btn { flex: 1; min-width: 0; }
  .start-actions .btn { width: 100%; white-space: normal; height: auto; padding: 14px 20px; line-height: 1.25; }
  .rank-bar-row { grid-template-columns: 88px minmax(0, 1fr) 28px; gap: 8px; }
  .stream-count { font-size: 36px; }
}

/* ─── Movimento reduzido ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .mock, .strip-track, #protagonista { will-change: auto; }
}

/* ─── O problema (estático, sem GSAP) ──────────────────────────── */
.problem-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 420px); gap: 48px; align-items: center; margin-bottom: 44px; } /* 420px = largura de referência do cartão da Mariana (parada 0b, a primeira) */
.problem-head .section-head { margin-bottom: 0; }
.problem-slot { width: 100%; }
.problem-lead, .section-lead { margin: 0; max-width: 640px; font-size: 18px; line-height: 1.55; color: var(--text-secondary); }
.problem-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
/* Mini esquemas: traço 2px, só tokens; acentos limitados às cores de severidade/fontes */
.problem-card .mini { display: block; width: 100%; height: 96px; margin-bottom: 16px; color: var(--primary); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mini .ln-soft { stroke: var(--border); }
.mini .ln-mid { stroke: var(--primary); opacity: .35; }
.mini .acc-neg { stroke: var(--severity-critical); }
.mini .dash { stroke-dasharray: 4 4; }
.mini .dot-neg { fill: var(--severity-critical); stroke: none; }
.mini .dot-google { fill: var(--google); stroke: none; }
.mini .dot-ifood { fill: var(--ifood); stroke: none; }
.mini .fill-soft { fill: var(--primary-soft); stroke: none; }
.mini .fill-star { fill: var(--star); stroke: none; }
.problem-card h3 { margin: 0; font-size: 17px; line-height: 1.3; }

/* ─── Seções alternadas (O problema, FAQ) ─────────────────────── */
.section-alt { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } /* alterna com o canvas do hero/ponte */

/* ─── Integrações oficiais — um motion graphic (faixa navy) ─────────
   Marcas oficiais (nunca recoloridas) ligadas por uma linha ao símbolo ReplyAI;
   pontos de luz fluem para o centro em loop lento (buildIntegrationsFlow). */
.integ { padding: 96px 0; background: var(--premium-navy); color: #fff; text-align: center; }
.integ h2 { color: #fff; margin: 0 auto 40px; max-width: 640px; }
.integ-graphic { position: relative; width: 100%; max-width: 800px; margin: 0 auto; aspect-ratio: 800 / 260; }
.ig-lines { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(255, 255, 255, .28); stroke-width: 1.5; stroke-linecap: round; }
.ig-mark { position: absolute; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 10px; }
.ig-ifood { left: 12.5%; }
.ig-google { left: 87.5%; }
.ig-mark img { width: 72px; height: 72px; padding: 8px; object-fit: contain; background: #fff; border-radius: 16px; box-shadow: 0 12px 32px rgba(0, 0, 0, .25); }
.ig-label { font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .85); white-space: nowrap; }
.ig-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 96px; height: 96px;
  display: grid; place-items: center; background: #fff; border-radius: 50%;
  box-shadow: 0 0 0 10px rgba(57, 182, 240, .12), 0 16px 40px rgba(0, 0, 0, .3);
}
html.js-motion .ig-core { transform: none; } /* o GSAP centra com xPercent/yPercent para poder escalar */
.ig-core img { width: 44px; height: auto; }
.ig-dot { position: absolute; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--tag-light-blue); box-shadow: 0 0 12px var(--tag-light-blue); opacity: 0; }
html:not(.js-motion) .ig-dot { display: none; }

/* ─── FAQ (details/summary nativo, sem JS) ─────────────────────── */
.faq-list { display: grid; gap: 10px; max-width: 760px; }
.faq-list details { padding: 0 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); }
.faq-list summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0; font-weight: 700; font-size: 16px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .material-icons { flex: none; color: var(--primary); transition: transform .2s ease; }
.faq-list details[open] summary .material-icons { transform: rotate(180deg); }
.faq-list details p { margin: 0 0 20px; line-height: 1.55; color: var(--text-secondary); }

@media (max-width: 900px) {
  .problem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .integ { padding: 72px 0; }
  .ig-mark img { width: 56px; height: 56px; padding: 6px; }
  .ig-core { width: 72px; height: 72px; }
  .ig-core img { width: 32px; }
  .ig-label { font-size: 12px; }
  .problem-head { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 560px) {
  .problem-grid { grid-template-columns: minmax(0, 1fr); }
  .ig-label { white-space: normal; max-width: 110px; line-height: 1.25; }
}