/* ==========================================================================
   iPost landing (clone estrutural de app-landing.framer.website / UpwardAI)
   Estrutura, layout, efeitos e animacoes copiados da referencia.
   So mudam: copy (PT/iPost), telas de celular (WhatsApp), paleta (gradiente
   iPost) e o conjunto de icones (6 redes + WhatsApp como hub).
   Build estatico, sem runtime de framework. Fundo branco limpo.
   ========================================================================== */

/* ---------- Fontes self-hosted ---------- */
@font-face {
  font-family: "Sora";
  src: url("../fonts/sora.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --ink: #1a0f24;
  --ink-2: #37373f;
  --muted: #9a9aa6;          /* cinza claro do titulo bicolor / subtitulos */
  --muted-2: #6c6c78;
  --line: #ece5dc;
  --line-2: #e2d9ce;
  --bg: #faf7f2;
  --card: #ffffff;
  --card-soft: #f3eee7;

  --pink: #e0356b;
  --pink-2: #c42a5c;
  --purple: #6b2fa0;
  --purple-2: #9b3fc9;
  --orange: #f5a623;
  --gold: #ffc83d;

  --grad: linear-gradient(100deg, #6b2fa0 0%, #b8329a 30%, #e0356b 58%, #f5a623 100%);
  --grad-soft: linear-gradient(100deg, rgba(245,166,35,.14), rgba(224,53,107,.14) 45%, rgba(107,47,160,.14));

  --radius: 22px;
  --radius-lg: 32px;
  --radius-sm: 14px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(16,16,32,.05), 0 4px 14px rgba(16,16,32,.05);
  --shadow: 0 10px 30px rgba(16,16,32,.08), 0 2px 8px rgba(16,16,32,.05);
  --shadow-lg: 0 30px 70px rgba(30,10,60,.16), 0 8px 24px rgba(30,10,60,.08);

  --maxw: 1160px;
  --gap: clamp(20px, 4vw, 28px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  position: relative;
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: #faf7f2;
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* textura de pontinhos bem sutil, atras das luzes gradientes (z-index mais
   negativo que o ::before), so pra tirar o "liso" do fundo branco */
body::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 100%;
  z-index: -2; pointer-events: none;
  background-image: radial-gradient(circle, rgba(11,11,18,.13) 1.1px, transparent 1.4px);
  background-size: 22px 22px;
  background-repeat: repeat;
}
/* glow decorativo no topo da pagina: rosa/roxo/laranja bem suaves, atras do conteudo */
body::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 100%;
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(700px 600px at 4% 4%, rgba(224,53,107,.40), transparent 66%),
    radial-gradient(720px 640px at 96% 2%, rgba(107,47,160,.38), transparent 66%),
    radial-gradient(640px 580px at 50% 12%, rgba(245,166,35,.28), transparent 68%),
    radial-gradient(620px 580px at 22% 24%, rgba(155,63,201,.26), transparent 68%),
    radial-gradient(660px 600px at 80% 22%, rgba(224,53,107,.22), transparent 66%),
    radial-gradient(680px 620px at 97% 36%, rgba(107,47,160,.28), transparent 66%),
    radial-gradient(620px 580px at 2% 44%, rgba(245,166,35,.24), transparent 66%),
    radial-gradient(640px 600px at 40% 52%, rgba(155,63,201,.20), transparent 68%),
    radial-gradient(680px 620px at 94% 60%, rgba(224,53,107,.26), transparent 66%),
    radial-gradient(620px 580px at 6% 68%, rgba(107,47,160,.24), transparent 66%),
    radial-gradient(680px 620px at 88% 78%, rgba(245,166,35,.24), transparent 68%),
    radial-gradient(620px 580px at 12% 88%, rgba(224,53,107,.26), transparent 66%),
    radial-gradient(700px 620px at 96% 96%, rgba(107,47,160,.28), transparent 66%),
    radial-gradient(620px 580px at 34% 98%, rgba(245,166,35,.22), transparent 68%);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-family: "Sora", "Inter", sans-serif;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.06;
  font-weight: 800;
}

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: 24px; }
.section { padding-block: clamp(40px, 5.5vw, 76px); position: relative; }
[id] { scroll-margin-top: 100px; }

/* ---------- Reveal on scroll (fade-up, igual referencia) ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }

/* ---------- Eyebrow + heads ---------- */
.eyebrow {
  display: inline-block;
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .01em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 16px;
}
.section-head { text-align: center; max-width: 640px; margin: 0 auto clamp(48px, 6vw, 74px); }
.section-head h2 { font-size: clamp(32px, 5vw, 52px); }
.section-head p { color: var(--muted-2); font-size: clamp(16px, 1.7vw, 19px); margin: 18px auto 0; max-width: 480px; }
/* titulos e paragrafos que precisam caber numa linha so, em telas
   nao-mobile. Usa o container inteiro (nao um max-width estreito) pra
   nowrap nunca estourar a largura e descentralizar o texto. */
#como .section-head, #precos .section-head, #depoimentos .section-head { max-width: 980px; }
#como .section-head h2, #precos .section-head h2, #depoimentos .section-head h2 { font-size: clamp(24px, 3.1vw, 42px); }
#como .section-head p, #precos .section-head p, #depoimentos .section-head p { max-width: 980px; }
@media (min-width: 900px) {
  #como .section-head h2, #precos .section-head h2, #depoimentos .section-head h2,
  #como .section-head p, #precos .section-head p, #depoimentos .section-head p { white-space: nowrap; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: "Sora", sans-serif; font-weight: 700; font-size: 15px;
  padding: 13px 26px; border-radius: var(--radius-pill);
  border: 1px solid transparent; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space: nowrap;
}
.btn-grad { background: var(--grad); color: #fff; box-shadow: 0 8px 22px rgba(36,81,201,.28); }
.btn-grad:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(36,81,201,.34); }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { transform: translateY(-2px); border-color: #d3d3df; }
.btn-soft { background: #fff; color: var(--ink); border: 1.5px solid var(--line-2); box-shadow: var(--shadow-sm); }
.btn-soft:hover { transform: translateY(-2px); background: #fafafc; border-color: #d3d3df; }
.btn-sm { padding: 10px 18px; font-size: 14px; }
.btn-block { width: 100%; }

/* ==========================================================================
   PILL-BADGE + FEAT-GRID: badge de secao com icone (pill), e grid de cards
   com icone/titulo/texto. Usado nas secoes Problema/Recursos/Pra quem e.
   ========================================================================== */
.pill-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: "Sora", sans-serif; font-weight: 700; font-size: 12.5px;
  letter-spacing: .02em; text-transform: uppercase;
  padding: 7px 16px 7px 12px; border-radius: var(--radius-pill);
  background: rgba(107,47,160,.1); color: var(--purple-2);
  margin-bottom: 18px;
}
.pill-badge svg { width: 15px; height: 15px; }
.pill-badge.warn { background: rgba(224,38,79,.1); color: #c21c46; }

.feat-grid { display: grid; gap: 20px; }
.feat-grid.cols-3 { grid-template-columns: repeat(3, 1fr); margin-top: 90px; }
.feat-grid.cols-4 { grid-template-columns: repeat(4, 1fr); margin-top: 90px; }
.feat-card {
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 28px 24px; box-shadow: var(--shadow-sm);
}
.feat-ic {
  width: 52px; height: 52px; border-radius: 14px; background: var(--grad-soft);
  color: var(--purple-2); display: grid; place-items: center; margin-bottom: 18px;
}
.feat-ic.warn { background: rgba(224,38,79,.1); color: #c21c46; }
.feat-ic svg { width: 24px; height: 24px; }
.feat-ic-photo {
  width: 200px; height: 200px; border-radius: 26px; background: none; overflow: hidden;
  margin: -100px auto 18px; display: block; position: relative; z-index: 2;
  box-shadow: var(--shadow-lg);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
}
.feat-ic-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feat-ic-photo-wide { width: 320px; height: 180px; margin: -90px auto 10px; }
.feat-card:hover .feat-ic-photo { transform: translateY(-8px) scale(1.05) rotate(-1.5deg); box-shadow: 0 34px 60px rgba(30,10,60,.3); }
.feat-card h3 { font-size: 17px; margin-bottom: 8px; font-family: "Sora", sans-serif; letter-spacing: -.01em; }
.feat-card p { color: var(--muted-2); font-size: 14.5px; line-height: 1.55; margin: 0; }

/* ---------- RECURSOS: mascote com baloes-accordion ao redor ---------- */
.feat-flow {
  display: grid; grid-template-columns: .82fr 1fr; align-items: center;
  gap: clamp(32px, 5vw, 64px);
}
.feat-text h2 { font-size: clamp(28px, 3.6vw, 42px); margin-bottom: 16px; }
.feat-text > p { color: var(--muted-2); font-size: 16px; line-height: 1.6; margin: 0 0 26px; max-width: 46ch; }
.feat-panel {
  background: var(--card-soft); border-radius: var(--radius); padding: 20px 22px;
  min-height: 106px; transition: background .2s ease;
}
.feat-panel h4 { font-family: "Sora", sans-serif; font-size: 15.5px; font-weight: 800; margin: 0 0 7px; color: var(--purple-2); }
.feat-panel p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.feat-mascot { position: relative; display: flex; justify-content: center; align-items: center; padding: 30px 0; }
.feat-mascot-img { width: min(620px, 96%); display: block; filter: drop-shadow(0 24px 40px rgba(30,10,60,.22)); position: relative; z-index: 1; }
.feat-chip {
  position: absolute; z-index: 5; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--ink); font-family: "Sora", sans-serif; font-weight: 700; font-size: 15px;
  padding: 10px 17px 10px 19px; border-radius: var(--radius-pill); box-shadow: var(--shadow);
  border: 0; white-space: nowrap;
  animation: badge-float 4.5s ease-in-out infinite;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.feat-chip:hover { transform: translateY(-3px); }
.feat-chip .fc-ic { width: 17px; height: 17px; color: var(--purple-2); flex: none; }
.feat-chip .fc-chev {
  width: 14px; height: 14px; color: var(--muted); flex: none; margin-left: 1px;
  animation: fcChevBounce 1.8s ease-in-out infinite;
}
.feat-chip.active { background: var(--grad); color: #fff; animation-play-state: paused; }
.feat-chip.active .fc-ic, .feat-chip.active .fc-chev { color: #fff; }
.feat-chip.active .fc-chev { transform: rotate(180deg); animation: none; }
@keyframes fcChevBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px); } }
.fc1 { top: 3%; left: 5%; animation-delay: .1s; }
.fc2 { top: 12.2%; right: 0.65%; animation-delay: .9s; }
.fc3 { top: 42%; left: -1%; animation-delay: .5s; }
.fc4 { top: 49.3%; right: 1.65%; animation-delay: 1.3s; }
.fc5 { bottom: 5%; left: 4%; animation-delay: 1.7s; }
.fc6 { bottom: 15.9%; right: 3.2%; animation-delay: .3s; }
@media (max-width: 900px) {
  .feat-flow { grid-template-columns: 1fr; }
  .feat-mascot { margin-top: 20px; }
}
@media (max-width: 560px) {
  .feat-chip { font-size: 9.5px; padding: 5px 9px 5px 10px; gap: 4px; }
  .feat-chip .fc-ic, .feat-chip .fc-chev { width: 9px; height: 9px; }
  .feat-mascot-img { width: 62%; }
  .fc1 { top: 2%; left: -2%; }
  .fc2 { top: 2%; right: -2%; }
  .fc3 { top: 42%; left: -6%; }
  .fc4 { top: 42%; right: -6%; }
  .fc5 { bottom: 4%; left: -2%; }
  .fc6 { bottom: 4%; right: -2%; }
}

.problem-close {
  text-align: center; font-size: clamp(17px, 2.2vw, 21px); font-weight: 700;
  font-family: "Sora", sans-serif; margin: clamp(28px, 4vw, 40px) auto 0; max-width: 700px;
}

/* ==========================================================================
   NAV (pill central, igual referencia)
   ========================================================================== */
.nav-wrap { position: sticky; top: 16px; z-index: 60; padding-inline: 16px; }
.nav {
  max-width: 1008px; margin: 0 auto;
  display: flex; align-items: center; justify-content: flex-start; gap: 28px;
  background: rgba(255,255,255,.82); backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid var(--line-2); border-radius: var(--radius-pill);
  padding: 17px 5% 17px 5%; box-shadow: var(--shadow);
}
.brand { display: inline-flex; align-items: center; gap: 9px; font-family: "Sora", sans-serif; font-weight: 800; font-size: 16px; letter-spacing: -.02em; }
.brand img { width: 72px; height: 72px; object-fit: contain; border-radius: 12px; }
.nav-links { display: flex; align-items: center; gap: 17px; }
.nav-links a { white-space: nowrap; }
.nav-links a { font-size: 14.5px; color: var(--ink-2); font-weight: 500; transition: color .15s; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px 0; border-radius: 2px; transition: .2s; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { text-align: center; padding-top: clamp(48px, 8vw, 92px); padding-bottom: clamp(48px, 8vw, 92px); position: relative; }
.hero .container { max-width: 1080px; position: relative; z-index: 2; }
.hero-flow {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: clamp(32px, 5vw, 64px); text-align: left;
}
.hero-badge { display: flex; justify-content: center; margin: 0; }
.hero-badge img {
  width: clamp(220px, 22vw, 320px); height: clamp(220px, 22vw, 320px); object-fit: contain;
  animation: badge-float 3.6s ease-in-out .9s infinite;
}
@keyframes badge-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-9px) rotate(-2.5deg); }
}
.hero h1 {
  font-size: clamp(36px, 5.4vw, 64px);
  line-height: 1.02;
  margin: 0;
  max-width: 12ch;
}
.hero .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lead { color: var(--muted-2); font-size: clamp(16px, 1.9vw, 20px); max-width: 560px; margin: 22px 0 0; }
.hero-cta { display: flex; gap: 14px; justify-content: flex-start; margin-top: 28px; flex-wrap: wrap; }
.hero-note { margin-top: 18px; font-size: 13.5px; color: var(--muted-2); display: inline-flex; align-items: center; gap: 8px; }
.hero-note svg { width: 16px; height: 16px; }
@media (max-width: 780px) {
  .hero-flow { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .hero-cta { justify-content: center; }
  .hero p.lead { margin: 22px auto 0; }
}

/* imagem maos + iphone (conversa ja embutida na imagem, sem overlay).
   Igual a referencia: a imagem e grande, sobe por baixo do bloco de texto/nav
   (a nav fica por cima, sticky com z-index maior), nao fica separada com
   respiro embaixo do texto. */
.hero-stage { position: relative; margin: clamp(-30px, -1.5vw, 10px) 0 0; width: 100vw; margin-left: calc(50% - 50vw); text-align: center; overflow: hidden; z-index: 1; }
.hero-stage img { width: clamp(280px, 34vw, 460px); height: auto; display: block; margin: 0 auto; will-change: transform; transform-origin: center; }

/* ==========================================================================
   ONE APP: titulo bicolor a esquerda + fileira de icones + linha + hub
   (a secao "One app for every way you work with ai" da referencia)
   ========================================================================== */
.oneapp-title {
  text-align: left;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.14;
  max-width: 42ch;
  font-family: "Sora", sans-serif;
  font-weight: 800;
  letter-spacing: -.02em;
}
.oneapp-title .dim { color: var(--muted); }

.oneapp-stage {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  margin-top: clamp(26px, 3.2vw, 40px);
  gap: 20px;
}
.oneapp-mobile { display: none; }
/* linha que conecta a fileira ao hub (atras dos icones), mais forte,
   com um brilho animado saindo do WhatsApp em direcao aos icones */
.oneapp-line {
  position: absolute; left: 17%; right: 4px; top: 50%;
  height: 10px; transform: translateY(-50%);
  background: var(--ink-2); opacity: .35; z-index: 1; overflow: hidden;
  border-radius: 999px;
}
.oneapp-line::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, transparent 40%, #e0356b 50%, transparent 60%, transparent 100%);
  background-size: 250% 100%;
  animation: oneapp-flow 2.6s linear infinite;
}
@keyframes oneapp-flow {
  0% { background-position: -150% 0; }
  100% { background-position: 100% 0; }
}
.oneapp-row { position: relative; z-index: 2; display: flex; align-items: center; gap: clamp(8px, 1.2vw, 16px); }
.oneapp-row .netic {
  position: relative;
  width: clamp(48px, 6.4vw, 82px); height: clamp(48px, 6.4vw, 82px);
  filter: drop-shadow(0 8px 16px rgba(20,20,40,.14));
  opacity: 0; transform: translateY(16px) scale(.85);
  transition: transform .25s ease, opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1);
}
.oneapp-row .netic img { width: 100%; height: 100%; object-fit: contain; }
.netic-label {
  position: absolute; top: 100%; left: 50%;
  margin-top: 9px; font-family: "Sora", sans-serif; font-size: 11px; font-weight: 700;
  color: #128c4a; background: rgba(224,53,107,.14); padding: 3px 10px; border-radius: var(--radius-pill);
  white-space: nowrap; opacity: 0; pointer-events: none;
  transform: translate(-50%, -4px); transition: opacity .3s ease, transform .3s ease;
}
.netic.posted .netic-label { opacity: 1; transform: translate(-50%, 0); }
.oneapp-traveler {
  position: absolute; z-index: 1; top: 0; left: 0;
  width: clamp(34px, 4.6vw, 56px); height: clamp(34px, 4.6vw, 56px);
  display: grid; place-items: center;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 8px 16px rgba(20,20,40,.22));
  transition: left .7s cubic-bezier(.4,0,.2,1), top .7s cubic-bezier(.4,0,.2,1), opacity .3s ease;
  opacity: 0; pointer-events: none;
}
.oneapp-traveler img { width: 100%; height: 100%; object-fit: contain; }
.oneapp-stage.in .oneapp-row .netic:hover {
  transform: translateY(-8px) scale(1.12);
  filter: drop-shadow(0 14px 22px rgba(20,20,40,.22));
}
.oneapp-stage.in .oneapp-row .netic { opacity: 1; transform: translateY(0) scale(1); }
.oneapp-row .netic:nth-child(1) { transition-delay: .05s; }
.oneapp-row .netic:nth-child(2) { transition-delay: .12s; }
.oneapp-row .netic:nth-child(3) { transition-delay: .19s; }
.oneapp-row .netic:nth-child(4) { transition-delay: .26s; }
.oneapp-row .netic:nth-child(5) { transition-delay: .33s; }
.oneapp-row .netic:nth-child(6) { transition-delay: .40s; }
.oneapp-row .netic:nth-child(7) { transition-delay: .47s; }
.oneapp-hub {
  position: relative; z-index: 2;
  width: clamp(128px, 20.8vw, 304px); height: auto; flex: none;
  transform: rotate(-12deg);
  filter: drop-shadow(0 24px 44px rgba(224,53,107,.28));
}
.oneapp-hub img { width: 100%; height: auto; }
.oneapp-stage.in .oneapp-hub { animation: oneapp-hub-float 3.4s ease-in-out .5s infinite; }
@keyframes oneapp-hub-float {
  0%, 100% { transform: rotate(-12deg) translateY(0); }
  50% { transform: rotate(-9deg) translateY(-10px); }
}

/* ==========================================================================
   Mockup do #como: a FOTO real (celular + moldura + header + rodape +
   papel de parede, tudo ja pronto na imagem) e a conversa e o UNICO
   elemento dinamico, sobreposto (absolute) exatamente na area vazia de
   chat da foto. Sem moldura/status/header/rodape proprios em CSS.
   ========================================================================== */
.sc-phone { position: relative; container-type: inline-size; flex: none; width: 288px; max-width: 100%; }
.mockup-img { width: 100%; display: block; }
.wa-body {
  position: absolute; left: 12.7%; right: 12.8%; top: 15.7%; bottom: 12.6%;
  padding: 1% 0; display: flex; flex-direction: column; gap: 3.2%;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  background: transparent;
  font-family: "Inter", sans-serif;
}
.wa-body::-webkit-scrollbar { display: none; width: 0; }
/* modo animacao: cada bolha/botao nasce escondida e o JS vai revelando uma
   por vez, tipo uma conversa acontecendo ao vivo (ver main.js) */
.wa-body > * { opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
.wa-body > *.show { opacity: 1; transform: none; }
.bub { max-width: 82%; padding: 3.4% 4.2%; border-radius: 8px; font-size: 8px; line-height: 1.32; box-shadow: 0 1px 2px rgba(0,0,0,.25); position: relative; }
.bub.in { background: #202c33; align-self: flex-start; border-top-left-radius: 0; color: #e9edef; }
.bub.out { background: #005c4b; align-self: flex-end; border-top-right-radius: 0; color: #e9edef; }
/* rabinho da bolha, igual o WhatsApp de verdade */
.bub.in::before {
  content: ""; position: absolute; top: 0; left: -6px; width: 0; height: 0;
  border-style: solid; border-width: 0 7px 8px 0; border-color: transparent #202c33 transparent transparent;
}
.bub.out::before {
  content: ""; position: absolute; top: 0; right: -6px; width: 0; height: 0;
  border-style: solid; border-width: 0 0 8px 7px; border-color: transparent transparent transparent #005c4b;
}
.bub .t { font-size: 5.8px; opacity: .6; text-align: right; margin-top: 3%; }
.bub.out .t::after { content: " ✓✓"; color: #53bdeb; opacity: 1; }
.bub.doc { display: flex; align-items: center; gap: 5%; background: #005c4b; }
.doc-ic { width: 22.5px; height: 22.5px; border-radius: 8px; background: #fff; display: grid; place-items: center; flex: none; overflow: hidden; }
.doc-ic img { width: 100%; height: 100%; object-fit: cover; }
.doc-ic svg { width: 62%; height: 62%; }
.doc-meta .dn { font-weight: 600; font-size: 7.3px; }
.doc-meta .ds { font-size: 6px; opacity: .7; }
.wa-btns { display: flex; flex-direction: column; margin-top: 1%; background: #202c33; border-radius: 0 8px 8px 8px; overflow: hidden; }
.wa-btn { text-align: left; background: transparent; color: #53bdeb; font-weight: 600; font-size: 7.3px; padding: 2.6% 4%; border-top: 1px solid rgba(255,255,255,.08); }
.wa-btn:first-child { border-top: 0; }
.wa-btn.primary { color: #e0356b; }
.chips { display: flex; flex-wrap: wrap; gap: 3%; margin-top: 3%; }
.chip { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 999px; padding: 2.2% 4%; font-size: 3.2cqw; display: inline-flex; align-items: center; gap: 4px; }
.chip img { width: 4.6cqw; height: 4.6cqw; }

/* log de postagem em tempo real (data/hora, plataforma, perfil, link), uma
   bolha por rede publicada, igual o bot manda de verdade */
.bub.log { display: flex; flex-direction: column; gap: 1.6%; }
.bub.log .log-h { display: flex; align-items: center; gap: 2%; font-weight: 700; font-size: 7.3px; }
.bub.log .log-h img { width: 9.5px; height: 9.5px; border-radius: 4px; object-fit: contain; }
.bub.log .log-l { font-size: 6px; opacity: .68; }
.bub.log .log-l.link { color: #53bdeb; opacity: 1; word-break: break-all; }

/* ==========================================================================
   COMO FUNCIONA: texto de um lado, 1 celular do outro fazendo o fluxo
   completo animado (nao e uma 2a hero: sem gradiente grande nem botao de
   CTA duplicado, so um bloco de conteudo normal tipo a secao de qualidade).
   ========================================================================== */
.como-flow {
  display: grid; grid-template-columns: 1fr .82fr; align-items: center;
  gap: clamp(32px, 5vw, 64px);
}
.como-info h2 { font-size: clamp(28px, 4vw, 42px); margin-bottom: 16px; }
.como-info > p { color: var(--muted-2); font-size: 16px; line-height: 1.6; margin: 0 0 26px; max-width: 46ch; }
.como-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.como-steps li { display: flex; align-items: center; gap: 13px; font-size: 15.5px; color: var(--ink-2); font-weight: 600; }
.cs-n {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--grad-soft); color: var(--purple-2);
  display: grid; place-items: center; font-family: "Sora", sans-serif; font-size: 12.5px; font-weight: 800;
}
.como-visual { position: relative; display: flex; justify-content: center; }
/* baloes flutuantes ao redor do celular (callouts decorativos) */
.float-chip {
  position: absolute; z-index: 5;
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: var(--ink); font-family: "Sora", sans-serif; font-weight: 700; font-size: 11.5px;
  padding: 7px 13px; border-radius: var(--radius-pill); box-shadow: var(--shadow);
  white-space: nowrap;
  animation: badge-float 4s ease-in-out infinite;
}
.float-chip svg { width: 13px; height: 13px; color: var(--purple-2); flex: none; }
.float-chip.grad { background: var(--grad); color: #fff; }
.float-chip.grad svg { color: #fff; }
.fc-1 { top: 17%; left: calc(-11% + 90px); animation-delay: .2s; }
.fc-2 { bottom: 15%; left: calc(-9% + 65px); animation-delay: 1.3s; }
.fc-3 { top: 80%; right: -9%; animation-delay: .7s; }
.fc-4 { top: 32%; right: -8%; animation-delay: 1.9s; }

/* iPhone real: foto do aparelho (bezel/notch/botoes) por cima, com um
   recorte transparente exatamente na area da tela; o conteudo WhatsApp fica
   posicionado por baixo, dentro desse recorte (mesma tecnica de mockup real
   usada em landing pages de app). Recorte com uma margem de seguranca pra
   dentro (nunca maior que o furo transparente de verdade) pra garantir que
   o conteudo nunca vaze por cima do bezel. */
.mockup-img { filter: drop-shadow(0 26px 46px rgba(30,10,60,.22)); }

/* ==========================================================================
   QUALIDADE: comparativo "outras ferramentas x iPost" (card elevado,
   paleta e tipografia do proprio site, telas WhatsApp reaproveitadas)
   ========================================================================== */
.quality-card {
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: center;
  gap: clamp(32px, 5vw, 64px);
  padding: clamp(12px, 2vw, 24px) 0;
}
.quality-ic {
  width: 56px; height: 56px; border-radius: 15px; background: var(--grad);
  display: grid; place-items: center; margin-bottom: 22px;
}
.quality-ic svg { width: 26px; height: 26px; }
.quality-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(107,47,160,.1); color: var(--purple-2);
  font-family: "Sora", sans-serif; font-weight: 700; font-size: 12.5px;
  letter-spacing: .02em; text-transform: uppercase;
  padding: 7px 14px 7px 10px; border-radius: var(--radius-pill); margin-bottom: 18px;
}
.quality-badge svg { width: 15px; height: 15px; }
.quality-info h2 { font-size: clamp(28px, 4vw, 42px); margin-bottom: 16px; }
.quality-info > p { color: var(--muted-2); font-size: 16px; line-height: 1.6; margin: 0 0 24px; }
.quality-info > p strong { color: var(--ink); font-weight: 700; }
.quality-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.quality-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.qchk { flex: none; width: 26px; height: 26px; display: grid; place-items: center; margin-top: 1px; }
.qchk img { width: 100%; height: 100%; object-fit: contain; }

.ba-slider {
  position: relative; width: 100%; max-width: 460px; aspect-ratio: 16 / 9; margin: 0 auto 20px;
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
  cursor: ew-resize; touch-action: pan-y; user-select: none;
}
.ba-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  -webkit-user-drag: none; user-select: none; pointer-events: none;
}
.ba-after { z-index: 1; }
.ba-before { z-index: 2; }
.ba-tag {
  position: absolute; top: 10px; z-index: 3; font-family: "Sora", sans-serif;
  font-size: 10.5px; font-weight: 700; padding: 4px 11px; border-radius: var(--radius-pill); color: #fff;
  pointer-events: none;
}
.ba-tag-before { left: 10px; background: rgba(224,38,79,.92); }
.ba-tag-after { right: 10px; background: rgba(224,53,107,.95); }
.ba-line {
  position: absolute; top: 0; bottom: 0; width: 3px; background: #fff;
  transform: translateX(-50%); z-index: 4; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 2px 12px rgba(0,0,0,.3);
}
.ba-handle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 38px; height: 38px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center; gap: 1px;
  box-shadow: var(--shadow-lg);
}
.ba-handle svg { width: 9px; height: 14px; }

.quality-compare { display: flex; flex-direction: column; gap: 12px; }
.qc-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; }
.qc-row strong { display: block; font-family: "Sora", sans-serif; font-size: 14.5px; margin-bottom: 2px; }
.qc-ic { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); display: grid; place-items: center; }
.qc-ic svg { width: 13px; height: 13px; }
.qc-bad { background: #fdecf0; color: #8a1533; }
.qc-bad strong { color: #c21c46; }
.qc-good { background: #e8f9ee; color: #0e6b3c; }
.qc-good strong { color: #128c4a; }

/* ==========================================================================
   PRICING (painel unico com planos, estilo referencia)
   ========================================================================== */
.plan-notes {
  display: flex; justify-content: center; margin: 30px auto 0;
  max-width: 100%; overflow-x: auto;
}
.plan-note {
  display: inline-flex; align-items: center;
  border: 3px solid transparent; border-radius: var(--radius-pill);
  background-image: linear-gradient(#fff, #fff), var(--grad);
  background-origin: border-box; background-clip: padding-box, border-box;
  padding: 9px 22px;
  font-size: clamp(10.5px, 1.35vw, 13px); font-weight: 600; color: var(--ink-2);
  box-shadow: var(--shadow-sm); white-space: nowrap;
}
.plan {
  background: transparent; border-radius: var(--radius);
  padding: 16px 22px 26px; display: flex; flex-direction: column;
}
.plan.highlight { background: #fff; box-shadow: var(--shadow-sm); border: 1px solid var(--line-2); }
.plan:not(.highlight):not(.popular) { background: #ececf1; border: 1px solid var(--line-2); }
.plan.popular {
  border: 3px solid transparent;
  background-image: linear-gradient(#2b2b34, #2b2b34), var(--grad);
  background-origin: border-box; background-clip: padding-box, border-box;
  position: relative;
}
.plan.popular .p-name, .plan.popular .price { color: #fff; }
.plan.popular .p-desc, .plan.popular .p-sub, .plan.popular .p-list li, .plan.popular .price small {
  color: rgba(255,255,255,.62);
}
.plan.popular .p-addon-main { color: rgba(255,255,255,.85); }
.plan.popular .p-addon {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3);
}
.plan.popular .addon-box { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.45); }
.plan-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--grad); color: #fff; font-family: "Sora", sans-serif;
  font-weight: 700; font-size: 11.5px; letter-spacing: .02em; text-transform: uppercase;
  padding: 6px 16px; border-radius: var(--radius-pill); box-shadow: 0 6px 16px rgba(36,81,201,.35);
  white-space: nowrap;
}
.plan .p-ic {
  width: 46px; height: 46px; border-radius: 13px; background: var(--grad);
  display: grid; place-items: center; margin-bottom: 20px;
}
.plan .p-ic svg { width: 24px; height: 24px; }
.plan.popular .p-ic { background: linear-gradient(135deg, #ffc83d, #f5a623); }
.plan .p-name { font-family: "Sora",sans-serif; font-weight: 800; font-size: 26px; letter-spacing: -.02em; margin-bottom: 10px; }
.plan .p-desc { font-size: 14px; color: var(--muted-2); min-height: 60px; margin-bottom: 16px; line-height: 1.5; }
.price { font-family: "Sora",sans-serif; font-weight: 800; font-size: 40px; letter-spacing: -.03em; line-height: 1; }
.price small { font-size: 15px; font-weight: 500; color: var(--muted-2); letter-spacing: 0; }
.plan .p-sub { font-size: 13px; color: var(--muted-2); margin: 8px 0 18px; align-self: start; }
.plan .p-div { border: 0; border-top: 1px solid var(--line-2); margin: 4px 0 18px; }
.plan.popular .p-div { border-color: rgba(255,255,255,.18); }
.p-list { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.p-list li { font-size: 14.5px; color: var(--muted-2); }
.p-networks { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.p-networks img {
  width: 28px; height: 28px; border-radius: 7px; object-fit: contain;
  transition: transform .2s ease, filter .2s ease;
}
.p-networks img:hover {
  transform: translateY(-4px) scale(1.15);
  filter: drop-shadow(0 6px 10px rgba(20,20,40,.25));
}

/* ---------- Toggle mensal/anual + banner de trial (plano unico) ---------- */
.trial-banner {
  max-width: 640px; margin: 0 auto 26px; padding: 16px 26px; text-align: center;
  border-radius: var(--radius-lg); background: var(--grad-soft);
  border: 1px solid rgba(107,47,160,.2); font-size: 14.5px; line-height: 1.5; color: var(--ink-2);
}
.trial-banner strong { color: var(--purple-2); }
.trial-banner small { color: var(--muted-2); }
.billing-toggle-wrap { display: flex; justify-content: center; margin-bottom: 30px; }
.billing-toggle {
  display: inline-flex; padding: 5px; gap: 4px;
  background: var(--card-soft); border-radius: var(--radius-pill);
}
.bt-opt {
  border: 0; background: transparent; cursor: pointer;
  font-family: "Sora", sans-serif; font-weight: 700; font-size: 14px; color: var(--muted-2);
  padding: 10px 22px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.bt-opt.active { background: var(--grad); color: #fff; box-shadow: var(--shadow-sm); }
.bt-save { font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: rgba(107,47,160,.12); color: var(--purple-2); }
.bt-opt.active .bt-save { background: rgba(255,255,255,.25); color: #fff; }
.pricing-panel-v2 {
  max-width: 800px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: stretch;
  /* linhas nomeadas por card: nome / preco / subtitulo / divisor / lista / botao.
     Cada .plan usa subgrid nessas mesmas faixas (abaixo), entao nome alinha com
     nome, preco com preco etc entre os 2 cards, nao importa a diferenca de
     texto entre os planos (isso e o que garante a simetria "padronizada"). */
  grid-template-rows: auto auto minmax(38px, auto) auto 1fr auto;
}
.pricing-panel-v2 .plan {
  width: 100%; grid-row: 1 / -1;
  display: grid; grid-template-rows: subgrid; gap: 0;
}

/* ---------- secao de precos dividida: features (sem card) + planos ---------- */
.pricing-flow {
  display: grid; grid-template-columns: minmax(260px, .58fr) 1fr; align-items: center;
  gap: clamp(24px, 4vw, 48px); margin-top: clamp(28px, 4vw, 40px);
}
.pricing-feats { position: static; }
.pf-head { text-align: left; margin: 0 0 24px; max-width: none; }
.pf-head .eyebrow { display: inline-block; }
.pf-head h2 { font-size: clamp(22px, 2.6vw, 30px); margin: 8px 0 10px; }
.pf-head p { color: var(--muted-2); font-size: 14px; line-height: 1.55; margin: 0; max-width: 40ch; }
.pf-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; }
.pf-list li { display: flex; align-items: flex-start; gap: 14px; }
.pf-ic {
  flex: none; width: 40px; height: 40px; border-radius: 12px;
  background: var(--grad-soft); display: grid; place-items: center;
}
.pf-ic svg { width: 20px; height: 20px; color: var(--purple-2); }
.pf-list h3 { font-family: "Sora", sans-serif; font-size: 15.5px; font-weight: 800; margin: 0 0 4px; letter-spacing: -.01em; }
.pf-list p { font-size: 13.5px; color: var(--muted-2); line-height: 1.55; margin: 0; }
.pricing-plans { min-width: 0; }
@media (max-width: 900px) {
  .pricing-flow { grid-template-columns: 1fr; gap: 36px; }
  .pricing-feats { position: static; }
}

/* ---------- addon de automacao (checkbox dentro da lista do plano) ----------
   layout original: linha 1 (checkbox + selo Instagram + "Automacao"), linha 2
   (sub "Comentario vira Direct"), preco sozinho na 3a linha. */
.p-addon { position: relative; background: rgba(107,47,160,.07); border: 1.5px dashed rgba(107,47,160,.3); border-radius: 12px; padding: 10px 12px; margin: 2px 0; }
.p-addon label { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; cursor: pointer; user-select: none; }
.p-addon-main { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; width: 100%; color: var(--ink-2); font-weight: 600; font-size: 13.5px; line-height: 1.35; }
.p-addon-row1 { display: flex; align-items: center; gap: 11px; }
.p-addon-sub { font-weight: 500; color: var(--muted-2); font-size: 13px; }
.p-addon-price { align-self: flex-start; font-family: "Sora", sans-serif; font-weight: 800; font-size: 15.5px; color: var(--purple-2); white-space: nowrap; }
.p-addon-ig { width: 17px; height: 17px; object-fit: contain; vertical-align: -3px; border-radius: 5px; }
.p-addon-ig[alt="Colaborador"] { width: 24px; height: 24px; vertical-align: -6px; border-radius: 0; }
.plan.popular .p-addon { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); }
.plan.popular .p-addon-sub { color: rgba(255,255,255,.55); }
.plan.popular .p-addon-price { color: #fff; }
.addon-checkbox { position: relative; width: 22px; height: 22px; flex: none; display: inline-block; }
.addon-checkbox input.addon-check { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.addon-box {
  position: absolute; inset: 0; border-radius: 7px;
  border: 2px solid var(--purple); background: #fff;
  display: grid; place-items: center;
  transition: background .15s, border-color .15s, transform .15s;
}
.plan.popular .addon-box { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.45); }
.addon-check-icon { width: 26px; height: 26px; object-fit: contain; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .2s; }
.addon-checkbox input.addon-check:hover ~ .addon-box { transform: scale(1.06); }
.addon-checkbox input.addon-check:checked ~ .addon-box { background: transparent; border-color: transparent; }
.addon-checkbox input.addon-check:checked ~ .addon-box .addon-check-icon { opacity: 1; transform: scale(1); }

/* variante estatica (sem checkbox): "Automacao nao inclusa" no plano gratis,
   mesma caixa dos planos pagos, so que com o X e sem interacao */
.p-addon-static-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; }
.p-addon-off { margin-top: auto; }
.p-addon-off .p-addon-main { color: var(--muted-2); }
.addon-box-off { border: 0; background: transparent; }
.addon-box-off .addon-check-icon { opacity: 1; transform: scale(1); width: 22px; height: 22px; }
.p-addon-notincl { color: #e0473c; }

/* selo "Opcional" no canto do addon (automacao/colaborador) */
.p-addon-tag {
  position: absolute; top: -9px; right: 12px;
  background: #fff; border: 1px solid rgba(107,47,160,.3); color: var(--purple-2);
  font-family: "Sora", sans-serif; font-weight: 700; font-size: 10.5px; letter-spacing: .02em;
  padding: 2px 9px; border-radius: 999px; line-height: 1.4;
}
.plan.popular .p-addon-tag { background: #2b2b34; border-color: rgba(255,255,255,.4); color: #fff; }

/* addon de colaborador: mesma caixa, mas com contador +/- ao lado do preco
   em vez de um valor fixo (cada unidade soma R$10/mes se o check tiver marcado) */
.p-team-row { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px; margin-top: 8px; }
.p-team-stepper { display: flex; align-items: center; gap: 8px; flex: none; }
.stepper-btn {
  width: 24px; height: 24px; border-radius: 7px; flex: none; padding: 0;
  border: 1.5px solid rgba(107,47,160,.35); background: #fff; color: var(--purple-2);
  font-family: "Sora", sans-serif; font-weight: 800; font-size: 15px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: background .15s, transform .15s;
}
.stepper-btn:hover { background: rgba(107,47,160,.1); transform: scale(1.06); }
.stepper-value { min-width: 14px; text-align: center; font-family: "Sora", sans-serif; font-weight: 800; font-size: 14px; color: var(--ink-2); }
.plan.popular .stepper-btn { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.08); color: #fff; }
.plan.popular .stepper-value { color: #fff; }

/* ==========================================================================
   TESTIMONIALS (2 colunas masonry, cards cinza claro)
   ========================================================================== */
.testi-note { text-align: center; font-size: 13px; color: var(--muted-2); margin: -30px auto 42px; display: flex; align-items: center; gap: 7px; justify-content: center; }
.testi-note .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
/* marquee infinito, um sentido so, sem seta/botao: a faixa desliza sozinha
   pra esquerda pra sempre. O HTML repete os 6 depoimentos 2x seguidas (2o
   bloco com aria-hidden) e a animacao anda exatamente metade da largura da
   faixa (-50%), que cai igual ao ponto de partida (bloco 1 = bloco 2) e faz
   o loop parecer perfeitamente continuo, sem "costura" visivel. */
.testi-carousel { position: relative; max-width: 1040px; margin: 0 auto; }
.testi-viewport { overflow: hidden; }
.testi-track {
  display: flex; gap: 20px; width: max-content;
  animation: testiMarquee 32s linear infinite;
}
.testi-carousel:hover .testi-track { animation-play-state: paused; }
@keyframes testiMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .testi-track { animation: none; } }
.testi { flex: 0 0 min(430px, 82vw); min-width: 0; }
.testi {
  background: var(--card-soft); border: 0;
  border-radius: var(--radius-lg); padding: 28px 28px 24px;
}
.testi h4 { font-size: 20px; font-weight: 700; margin-bottom: 12px; font-family: "Sora",sans-serif; letter-spacing: -.01em; }
.testi p { color: var(--muted-2); font-size: 15px; margin: 0 0 20px; line-height: 1.55; }
.testi .who { display: flex; align-items: center; gap: 11px; border-top: 1px solid var(--line-2); padding-top: 18px; }
.testi .who img {
  width: 57px; height: 57px; box-sizing: border-box;
  padding: 2.5px; background: var(--grad);
  border-radius: 50%; object-fit: cover;
}
.testi .who .n { font-weight: 600; font-size: 14.5px; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-flow {
  display: grid; grid-template-columns: 430px 1fr; align-items: center;
  gap: clamp(24px, 4vw, 48px); max-width: 1080px; margin: 0 auto;
}
.faq-mascot-img { width: 100%; max-width: 430px; filter: drop-shadow(0 20px 34px rgba(30,10,60,.2)); justify-self: center; }
.faq-col { min-width: 0; }
.faq-head-text { text-align: left; margin: 0 0 24px; }
.faq-head-text h2 { font-size: clamp(28px, 3.6vw, 42px); margin: 8px 0 0; }
.faq {
  max-width: 560px; margin: 0; background: var(--card);
  border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 8px 22px; box-shadow: var(--shadow-sm);
}
@media (max-width: 900px) {
  .faq-flow { grid-template-columns: 1fr; }
  .faq-mascot-img { display: none; }
  .faq-head-text { text-align: center; }
  .faq { max-width: 100%; margin: 0 auto; }
}
.faq-item { border-bottom: 1px solid var(--line-2); }
.faq-item:last-child { border-bottom: 0; }
.faq-q {
  width: 100%; background: none; border: 0; text-align: left; cursor: pointer;
  padding: 24px 4px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: "Sora",sans-serif; font-weight: 600; font-size: 16.5px; color: var(--ink);
}
.faq-q .pm { width: 24px; height: 24px; flex: none; position: relative; transition: transform .25s; }
.faq-q .pm::before, .faq-q .pm::after { content: ""; position: absolute; background: var(--ink-2); border-radius: 2px; }
.faq-q .pm::before { left: 4px; right: 4px; top: 11px; height: 2px; }
.faq-q .pm::after { top: 4px; bottom: 4px; left: 11px; width: 2px; transition: opacity .2s, transform .25s; }
.faq-item.open .faq-q .pm::after { opacity: 0; transform: rotate(90deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a p { color: var(--muted-2); font-size: 15px; margin: 0 4px 24px; }

/* ==========================================================================
   DOWNLOAD CTA (secao "Download Now": badge + heading + botao + telefone)
   ========================================================================== */
.download { text-align: center; overflow: hidden; }
.download .badge {
  width: 76px; height: 76px; border-radius: 20px; margin: 0 auto 26px;
  background: var(--grad); display: grid; place-items: center; box-shadow: 0 16px 34px rgba(36,81,201,.3);
}
.download .badge img { width: 60%; height: 60%; object-fit: contain; }
.download h2 { font-size: clamp(32px, 5vw, 52px); }
.download p { color: var(--muted-2); font-size: clamp(16px,1.7vw,19px); max-width: 640px; margin: 18px auto 30px; }
.download-phone { max-width: 1380px; margin: clamp(70px,9vw,100px) auto -70px; }
.download-phone img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { border-top: 1px solid var(--line); padding-block: 60px 42px; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 34px; }
.footer .brand { margin-bottom: 16px; }
.footer .fdesc { color: var(--muted-2); font-size: 14px; max-width: 30ch; line-height: 1.6; }
.footer h4 { font-family: "Sora",sans-serif; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; font-weight: 700; }
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer ul a { font-size: 14.5px; color: var(--ink-2); }
.footer ul a:hover { color: var(--ink); }
.footer-bottom { border-top: 1px solid var(--line); margin-top: 44px; padding-top: 24px; font-size: 13px; color: var(--muted-2); text-align: center; }

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 900px) {
  .feat-grid.cols-3, .feat-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav { max-width: 460px; }
  .nav.open .nav-links {
    display: flex; position: absolute; top: 62px; left: 16px; right: 16px;
    flex-direction: column; align-items: flex-start; gap: 6px;
    background: #fff; border: 1px solid var(--line-2); border-radius: 20px; padding: 16px 20px; box-shadow: var(--shadow);
  }
  .nav.open .nav-links a { padding: 8px 0; width: 100%; }

  /* one-app no mobile: MODELO ISOLADO do desktop (classes m-* proprias, sem
     compartilhar seletor com .oneapp-stage/.netic/.oneapp-traveler). Espinha
     central com ramos curtos ate cada rede, WhatsApp no topo. Logo pura, sem
     card/fundo (so o drop-shadow natural), com um selinho "Postado!" (texto,
     igual o do desktop). Brilho verde continuo desliza pelo tronco/ramos, e
     o arquivo entra em cada logo de verdade antes de seguir pra proxima. */
  .oneapp-title { max-width: 100%; text-align: center; }
  .oneapp-stage { display: none; }
  .oneapp-mobile {
    display: flex; position: relative; flex-direction: column; align-items: center;
    gap: clamp(20px, 5vw, 30px); margin-top: clamp(24px, 7vw, 40px); padding-block: 4px;
  }
  .m-zigzag { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
  #mZigzagFlow { filter: blur(1.2px); }

  .m-hub { position: relative; z-index: 2; width: clamp(68px, 16vw, 88px); align-self: center; }
  .m-hub img { width: 100%; height: auto; }

  .m-row { display: contents; }
  .m-netic { position: relative; z-index: 2; }
  .m-netic img {
    width: clamp(64px, 8.8vw, 96px); height: clamp(64px, 8.8vw, 96px);
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(20,20,40,.18));
    transition: filter .3s ease;
  }
  .m-row .m-netic:nth-child(odd)  { align-self: flex-end;   margin-right: 9%; }
  .m-row .m-netic:nth-child(even) { align-self: flex-start; margin-left: 9%; }
  .m-netic.posted img {
    filter: drop-shadow(0 8px 16px rgba(20,20,40,.18)) drop-shadow(0 0 16px rgba(224,53,107,.65));
  }

  /* selo "postado": pilula de texto, igual o do desktop */
  .m-netic-label {
    position: absolute; top: 100%; left: 50%; margin-top: 6px;
    font-family: "Sora", sans-serif; font-size: 11px; font-weight: 700;
    color: #128c4a; background: #fff; padding: 3px 10px; border-radius: var(--radius-pill);
    box-shadow: 0 4px 10px rgba(20,20,40,.12);
    white-space: nowrap; opacity: 0; pointer-events: none;
    transform: translate(-50%, -4px); transition: opacity .3s ease, transform .3s ease;
  }
  .m-netic.posted .m-netic-label { opacity: 1; transform: translate(-50%, 0); }

  .m-traveler {
    position: absolute; z-index: 1; top: 0; left: 0;
    width: clamp(30px, 6vw, 42px); height: clamp(30px, 6vw, 42px);
    display: grid; place-items: center;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 8px 16px rgba(20,20,40,.22));
    transition: left .7s cubic-bezier(.4,0,.2,1), top .7s cubic-bezier(.4,0,.2,1), opacity .3s ease;
    opacity: 0; pointer-events: none;
  }
  .m-traveler img { width: 100%; height: 100%; object-fit: contain; }

  /* showcase: carrossel continua no mobile, so ajusta o padding lateral pra
     o 1o/ultimo celular poderem centralizar no scroll-snap */
  .phone { width: 210px; }
  .como-flow { grid-template-columns: 1fr; text-align: center; }
  .como-info > p { margin-inline: auto; }
  .como-steps { align-items: center; max-width: 260px; margin: 0 auto; }
  .como-visual { order: -1; margin-bottom: 12px; padding: 0 34px; }
  .float-chip { font-size: 10px; padding: 5px 10px; }
  .float-chip svg { width: 11px; height: 11px; }
  .fc-1 { top: 10%; left: 0; }
  .fc-2 { bottom: 13%; left: 0; }
  .fc-3 { top: 80%; right: 0; }
  .fc-4 { top: 32%; right: 0; }

  /* quality: empilha texto acima do comparativo visual, centralizado (menos
     os cartoes de comparacao ruim/bom, que ficam a esquerda do proprio
     icone, igual antes) */
  .quality-card { grid-template-columns: 1fr; text-align: center; }
  .quality-ic { margin-inline: auto; }
  .quality-badge { margin-inline: auto; }
  .quality-list { max-width: 420px; margin-inline: auto; }
  .qc-row { text-align: left; }

  /* pill de notas dos planos: quebra linha em vez de cortar/rolar */
  .plan-notes { overflow-x: visible; }
  .plan-note { white-space: normal; text-align: center; }
}
@media (max-width: 560px) {
  /* no mobile os cards empilham (1 por linha): desliga o subgrid de
     alinhamento entre colunas, senao os cards, ao pedir a MESMA faixa de
     linhas do grid pai, ficariam desenhados um em cima do outro. */
  .pricing-panel-v2 { grid-template-columns: 1fr; grid-template-rows: none; max-width: 380px; }
  .pricing-panel-v2 .plan { grid-row: auto; display: flex; flex-direction: column; }
  .feat-grid.cols-3, .feat-grid.cols-4 { grid-template-columns: 1fr; }
  .feat-grid.cols-3, .feat-grid.cols-4 { margin-top: 70px; }
  .feat-ic-photo { width: 150px; height: 150px; margin: -75px auto 16px; border-radius: 22px; }
  .feat-ic-photo-wide { width: 270px; height: 152px; margin: -76px auto 10px; }
  .testi { flex-basis: 86vw; }
  .testi-track { animation-duration: 26s; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-cta .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .oneapp-row .netic { opacity: 1 !important; transform: none !important; }
}

/* ---------- Meta Tech Provider ---------- */
.tp-wrap { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(32px, 5vw, 64px); }
.tp-card { position: relative; display: grid; place-items: center; }
.tp-glow { position: absolute; inset: 6% 4%; border-radius: 40px; background: radial-gradient(closest-side, rgba(224,53,107,.32), rgba(155,63,201,.16) 60%, transparent); filter: blur(30px); z-index: -1; }
.tp-seal { width: 100%; max-width: 440px; height: auto; filter: drop-shadow(0 24px 44px rgba(224,53,107,.32)); }
.tp-text h2 { font-size: clamp(28px, 4vw, 42px); margin-bottom: 16px; }
.tp-lead { color: var(--muted-2); font-size: 16px; line-height: 1.6; margin: 0 0 26px; }
.tp-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tp-benefit { display: flex; gap: 13px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 17px; box-shadow: var(--shadow-sm); }
.tp-benefit h3 { font-family: "Sora", sans-serif; font-size: 15.5px; line-height: 1.3; margin: 0 0 4px; color: var(--ink); }
.tp-benefit p { font-size: 14px; color: var(--muted-2); line-height: 1.45; margin: 0; }
.tp-ic { flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--grad); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 18px -8px rgba(36,81,201,.55); }
.tp-ic svg { width: 19px; height: 19px; }
.tp-pills { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.tp-pill { font-family: "Sora", sans-serif; font-size: 12.5px; font-weight: 700; color: var(--purple-2); background: rgba(107,47,160,.08); border: 1px solid rgba(107,47,160,.16); padding: 7px 14px; border-radius: var(--radius-pill); }
@media (max-width: 900px) {
  .tp-wrap { grid-template-columns: 1fr; text-align: center; }
  .tp-seal { max-width: 330px; }
  .tp-lead { max-width: 520px; margin-inline: auto; }
  .tp-benefit { text-align: left; }
  .tp-pills { justify-content: center; }
}
@media (max-width: 600px) {
  .tp-benefits { grid-template-columns: 1fr; }
}