:root {
  --ink: #101120;
  --muted: #67677d;
  --purple: #7138ff;
  --purple-soft: #f2edff;
  --line: #e9e7f2;
}

/* ================= Responsividade consolidada =================
   Esta camada fecha os conflitos entre a composição proporcional do desktop
   e as regras antigas de celular. Cada rolagem horizontal fica contida no
   componente que precisa dela; a página em si nunca cresce além da viewport. */
@media (max-width: 900px) {
  html, body.landing-page, .landing-page main { width: 100%; max-width: 100%; overflow-x: clip; }
  .landing-page section { max-width: 100%; }
  .process-section, .features-section, .pricing-section { overflow-x: clip; }
  .process-section .landing-shell { width: min(100% - 40px, 720px); }
  .journey-heading h2 { max-width: 620px; margin-inline: auto; }
  .journey-profiles { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; }
  .journey-profiles::-webkit-scrollbar { display: none; }
  .journey-profiles label { flex: 1 0 auto; }
  .product-preview { width: 100%; overflow: hidden; }
  .preview-main { min-width: 0; overflow: hidden; }
  .preview-main nav { max-width: 100%; overscroll-behavior-inline: contain; }
  .preview-quadro { max-width: 100%; overscroll-behavior-inline: contain; }
  .connections-character { pointer-events: none; }
}

/* Tablet: mantém a narrativa vertical, mas evita a ampliação de celular em 600–780 px. */
@media (min-width: 561px) and (max-width: 900px) {
  .landing-page { --u: calc(100vw * .8 / 390); }
  .landing-header { height: 76px; position: relative; background: #f8f6fd; }
  .landing-header .landing-shell { max-width: 720px; margin-inline: auto; padding-inline: 28px; }
  .desktop-nav, .header-cta { display: none; }
  .mobile-menu { display: block; }
  .hero { height: auto; min-height: 0; background: linear-gradient(180deg, #f8f6fd 0, #fff 45%, #f3effc 100%); }
  .hero-background { display: none; }
  .hero-inner { width: 100%; height: auto; min-height: 0; display: block; }
  .hero-copy { width: 100%; max-width: 720px; margin-inline: auto; padding: 18px 38px 0; }
  .hero h1 { max-width: 620px; font-size: clamp(43px, 7.2vw, 54px); line-height: 1.02; }
  .hero-lead { max-width: 470px; font-size: 18px; line-height: 1.5; }
  .hero-actions .hero-primary { width: 280px; min-height: 50px; font-size: 16px; }
  .hero-visual { position: relative; width: 100%; height: calc(500 * var(--u)); margin-top: calc(-164 * var(--u)); left: 0; right: 0; top: auto; bottom: auto; overflow: hidden; }
  .hero-scales { width: calc(780 * var(--u)); left: calc(-330 * var(--u)); top: 0; }
  .hero-commerce { width: calc(433 * var(--u)); left: calc(54 * var(--u)); top: calc(156 * var(--u)); }
  .hero-chameleon { width: calc(300 * var(--u)); left: calc(-78 * var(--u)); top: calc(166 * var(--u)); bottom: auto; }
  .journey-heading h2 { font-size: clamp(36px, 5.5vw, 45px); }
  .journey-profiles { justify-content: center; }
  .journey-profiles label { min-width: 170px; padding-inline: 18px; font-size: 16px; }
  .product-preview { margin-top: 68px; border-radius: 20px; }
  .preview-main { padding-inline: 24px; }
  .preview-main header { padding-block: 18px; }
  .preview-main article { grid-template-columns: 38px minmax(0, 1fr) 180px 14px; padding-inline: 16px; gap: 12px; }
  .preview-main article > span.preview-video { display: block; }
  .features-section { min-height: 820px; }
  .connections-heading h2 { font-size: clamp(46px, 7vw, 60px); }
  .connections-paths { width: min(680px, 96%); }
  .connection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .connection-grid h3 { font-size: 22px; }
  .connection-grid p { font-size: 15px; }
}

@media (max-width: 560px) {
  .landing-page { --u: 1px; }
  .landing-header { height: 64px; }
  .landing-header .landing-shell { padding-inline: 20px; }
  .landing-header .brand-mark { width: 30px; height: 30px; }
  .landing-header .landing-brand { font-size: 23px; }
  .mobile-menu { margin-right: -8px; }

  .hero-copy { padding: 14px 20px 0; }
  .hero h1 { max-width: 100%; font-size: clamp(30px, 9.5vw, 38px); line-height: 1.03; letter-spacing: -.05em; overflow-wrap: normal; }
  .hero h1 strong { display: inline; }
  .hero-lead { max-width: 315px; margin-top: 17px; font-size: clamp(14px, 4.2vw, 16px); line-height: 1.45; }
  .hero-actions { margin-top: 17px; }
  .hero-actions .hero-primary { width: min(100%, 272px); min-height: 44px; font-size: 14px; }
  .hero-visual { height: 430px; margin-top: -118px; }
  .hero-scales { width: 690px; left: -294px; }
  .hero-commerce { width: 382px; left: 42px; top: 144px; }
  .hero-chameleon { width: 265px; left: -65px; top: 157px; }

  .process-section { padding: 44px 0 12px; }
  .process-section .landing-shell { width: calc(100% - 40px); }
  .journey-heading { width: 100%; text-align: left; }
  .journey-heading h2 { max-width: 100%; margin: 0; font-size: clamp(28px, 8.8vw, 35px); line-height: 1.06; }
  .journey-profiles { width: calc(100vw - 40px); margin-top: 24px; justify-content: stretch; }
  .journey-profiles label { min-width: 0; flex: 1 0 33.333%; gap: 5px; padding-inline: 3px; font-size: clamp(11px, 3.5vw, 14px); }
  .journey-profiles label svg { width: 17px; height: 17px; }
  .journey-copy { max-width: 300px; margin-inline: auto; font-size: 12px; }
  .product-preview { margin-top: 48px; border-radius: 14px; }
  .preview-main { width: 100%; padding: 0 12px 14px; }
  .preview-main nav { left: 0; right: 0; width: 100%; padding-inline: 2px; }
  .preview-main header { display: grid; grid-template-columns: 1fr; align-items: center; gap: 8px; padding: 12px 0; }
  .preview-main h3 { font-size: clamp(20px, 7vw, 25px); white-space: normal; }
  .preview-main header > div { width: 100%; min-width: 0; justify-content: flex-start; flex-wrap: wrap; }
  .preview-main header button { min-height: 36px; padding: 7px 11px; }
  .preview-main h4 { font-size: clamp(14px, 4.7vw, 18px); line-height: 1.35; }
  .preview-main article { grid-template-columns: 30px minmax(0, 1fr) 8px; width: 100%; padding: 10px 8px; }
  .preview-main article p { width: 100%; overflow-wrap: anywhere; }
  .preview-main article > span.preview-video { width: 100%; height: auto; aspect-ratio: 16 / 8; }
  .preview-loja, .preview-projeto { max-width: 100%; }
  .preview-quadro { width: 100%; overflow-x: auto; }

  .features-section { padding: 48px 0 40px; }
  .features-section .landing-shell { padding-inline: 20px; }
  .connections-heading h2 { max-width: 100%; font-size: clamp(31px, 10vw, 39px); line-height: 1.02; overflow-wrap: normal; }
  .connections-heading h2 span { display: block; }
  .connections-heading h3 { max-width: 310px; font-size: 14px; }
  .connections-paths { height: 210px; margin-top: 20px; }
  .connections-spiral { width: 112px; height: 112px; }
  .connection-action small { font-size: 9px; }
  .connection-action strong { font-size: clamp(21px, 7.3vw, 27px); }
  .connection-action-create, .connection-action-sell { top: 70px; }
  .connection-action-edit { bottom: 1px; }
  .connections-character { width: 185px; right: -105px; top: 210px; }
  .connections-statement { font-size: clamp(25px, 8vw, 30px); }

  .pricing-heading { padding-inline: 20px; }
  .pricing-heading h2 { font-size: clamp(29px, 9vw, 34px); }
  .pricing-grid { padding-inline: 20px; scroll-padding-inline: 20px; }
  .price-card { flex-basis: min(306px, calc(100vw - 40px)); }
  .pricing-all { margin-inline: 20px; }
}

/* Em telas muito estreitas, os benefícios deixam de competir por três colunas. */
@media (max-width: 380px) {
  .hero h1 { font-size: 30px; }
  .hero-visual { height: 405px; }
  .journey-heading h2 { font-size: 28px; }
  .journey-profiles label { font-size: 11px; }
  .journey-profiles label svg { width: 15px; height: 15px; }
  .connection-grid { margin-top: 18px; grid-template-columns: 1fr; gap: 0; }
  .connection-grid article { min-height: 0; padding: 14px 8px; }
  .connection-grid article + article { border-left: 0; border-top: 1px solid #b993ff; }
  .connection-grid h3 { font-size: 18px; }
  .connection-grid p { font-size: 13px; }
  .connections-character { width: 155px; right: -92px; top: 225px; }
  .connections-statement { margin-top: 22px; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.landing-page { color: var(--ink); background: #fff; font-family: "Poppins", Arial, sans-serif; font-size: 14px; line-height: 1.45; overflow-x: hidden; }
.landing-page a { color: inherit; text-decoration: none; }
.landing-page svg { display: block; }
.landing-shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }

/* O topo é desenhado como um quadro de 1585x992 (fundo, escamas e composição
   têm esse tamanho). --stage é a largura do quadro: a tela inteira, ou menos
   quando a altura não cabe, para o quadro aparecer inteiro na primeira dobra.
   As medidas do topo são frações dela, então tudo escala junto. */
.landing-page { --stage: min(100vw, calc(100svh * 1.5978)); }
/* Janela larga e baixa: o quadro encolheria abaixo de ~980 px e o texto, que tem tamanho mínimo em px,
   passaria por cima da arte. Aqui o quadro para em 1000 px e o topo passa da primeira dobra. */
@media (min-width: 901px) and (max-height: 612px) {
  .landing-page { --stage: min(100vw, 1000px); }
}
.landing-header { height: clamp(64px, calc(var(--stage) * .073), 116px); background: transparent; position: absolute; left: 0; right: 0; top: 0; z-index: 20; }
.landing-header .landing-shell { width: calc(var(--stage) * .904); max-width: none; }
.header-inner { height: 100%; display: flex; align-items: center; }
.landing-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 32px; font-weight: 600; letter-spacing: -.045em; }
.landing-header .landing-brand { font-size: clamp(16px, calc(var(--stage) * .0168), 28px); }
.landing-header .brand-mark { width: clamp(26px, calc(var(--stage) * .021), 34px); height: clamp(26px, calc(var(--stage) * .021), 34px); }
.brand-mark { width: 40px; height: 40px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: radial-gradient(circle at 65% 32%, #bfc5ff 0 7%, #6335d8 30%, #24165f 66%, #9c80ff 71%, #f2efff 76%); box-shadow: inset 0 0 9px rgba(255,255,255,.65), 0 7px 18px rgba(72,39,181,.16); transform: rotate(-18deg); }
.brand-mark svg { width: 22px; height: 22px; }
.brand-mark-logo { background: none; box-shadow: none; transform: none; }
.brand-mark-logo img { width: 100%; height: 100%; object-fit: contain; }
.desktop-nav { display: flex; align-items: center; justify-content: flex-start; gap: calc(var(--stage) * .034); margin: 0 auto 0 calc(var(--stage) * .029); font-size: clamp(12px, calc(var(--stage) * .0084), 14px); font-weight: 400; color: #171621; }
.desktop-nav a, .footer-main nav a { transition: color .2s; }
.desktop-nav a:hover, .footer-main nav a:hover { color: var(--purple); }
.pill-button { min-height: 48px; padding: 0 23px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 24px; font-size: 12px; font-weight: 500; border: 1px solid transparent; white-space: nowrap; transition: transform .2s, box-shadow .2s, border-color .2s; }
.pill-button:hover { transform: translateY(-2px); }
.pill-button svg { width: 16px; height: 16px; }
.pill-button-dark { color: #fff !important; background: #0d0e17; box-shadow: 0 12px 25px rgba(12,13,23,.15); }
.pill-button-light { border-color: #bbb9ca; background: rgba(255,255,255,.72); }
.header-cta { min-height: clamp(34px, calc(var(--stage) * .0235), 38px); min-width: clamp(130px, calc(var(--stage) * .0935), 150px); margin-right: calc(var(--stage) * .115); padding-inline: 26px; color: #fff !important; background: linear-gradient(105deg, #6932eb, #8439ed); box-shadow: 0 12px 30px rgba(112,50,235,.18); font-size: clamp(12px, calc(var(--stage) * .0084), 14px); }
.mobile-menu { display: none; margin-left: auto; position: relative; }
.mobile-menu summary { list-style: none; width: 42px; height: 42px; display: grid; place-content: center; gap: 5px; cursor: pointer; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary span { width: 21px; height: 2px; background: var(--ink); }
.mobile-menu nav { position: absolute; right: 0; top: 50px; width: 220px; padding: 14px; display: grid; gap: 2px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(25,19,66,.15); border-radius: 8px; }
.mobile-menu nav a { padding: 10px 12px; border-radius: 6px; }
.mobile-menu nav a:hover { background: var(--purple-soft); }

.hero { height: calc(var(--stage) * 992 / 1585); position: relative; overflow: hidden; background: linear-gradient(90deg, #fff 0 45%, #ddd3f6 100%); isolation: isolate; }
/* O fundo fica no quadro, como as escamas; as bordas esmaecem para emendar
   com o degradê do .hero quando a tela é mais larga que o quadro. */
/* A fonte do desenho é a Plus Jakarta Sans, mais estreita que a Poppins do resto
   da página: com a Poppins o texto passava da área do texto e entrava no camaleão. */
.landing-header, .hero { font-family: "Plus Jakarta Sans", "Poppins", Arial, sans-serif; }
.hero-background { position: absolute; z-index: -3; top: 0; left: 50%; width: var(--stage); height: auto; max-width: none; transform: translateX(-50%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.hero-inner { width: var(--stage); height: 100%; margin-inline: auto; position: relative; z-index: 2; }
.hero-copy { width: calc(var(--stage) * .6); margin-left: calc(var(--stage) * .048); padding: calc(var(--stage) * .094) 0 28px; position: relative; z-index: 6; }
.eyebrow { color: #8b64ff; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .24em; }
.hero .eyebrow { display: none; }
.hero h1 { margin: 0; font-size: clamp(44px, calc(var(--stage) * .047), 80px); line-height: 1; letter-spacing: -.065em; font-weight: 400; }
.hero h1 strong { display: inline-block; white-space: nowrap; font-weight: 700; }
.hero-ponto { display: inline-block; width: .14em; height: .14em; margin-left: .07em; overflow: hidden; color: transparent; line-height: 0; background: #7836ed; }
.hero-lead { max-width: calc(var(--stage) * .332); margin-top: calc(var(--stage) * .02); color: #74738b; font-size: clamp(14px, calc(var(--stage) * .0113), 19px); line-height: 1.6; }
.hero-actions { display: flex; gap: 16px; margin-top: calc(var(--stage) * .021); }
.hero-actions .hero-primary { min-width: calc(var(--stage) * .211); min-height: calc(var(--stage) * .043); padding-inline: calc(var(--stage) * .021); justify-content: space-between; color: #fff; background: linear-gradient(105deg, #6932eb, #8439ed); box-shadow: 0 14px 28px rgba(113,56,255,.22); font-size: clamp(14px, calc(var(--stage) * .0112), 18px); }
.social-proof { margin-top: calc(var(--stage) * .02); display: flex; align-items: center; gap: calc(var(--stage) * .013); color: #77768d; font-size: clamp(11px, calc(var(--stage) * .0075), 12px); }
.social-proof > i { width: calc(var(--stage) * .025); height: 2px; background: #7c3aed; }
.proof-faces { display: flex; padding-left: 8px; }
.proof-faces span { width: 34px; height: 34px; margin-left: -8px; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 600; border: 2px solid #fff; border-radius: 50%; background: linear-gradient(145deg, #66524b, #c88d76); }
.proof-faces span:nth-child(2) { background: linear-gradient(145deg, #241c20, #b48978); }
.proof-faces span:nth-child(3) { background: linear-gradient(145deg, #674136, #ecc7ae); }
.proof-faces span:nth-child(4) { background: linear-gradient(145deg, #151827, #aa6a5a); }
/* O quadro: as posições abaixo são do desenho, em fração da largura dele. */
.hero-visual { position: absolute; z-index: 1; top: 0; left: 50%; width: var(--stage); aspect-ratio: 1585 / 992; transform: translateX(-50%); pointer-events: none; }
.hero-scales, .hero-commerce { position: absolute; z-index: 1; width: 100%; max-width: none; height: auto; pointer-events: none; }
.hero-scales { left: 0; top: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.hero-commerce { z-index: 2; width: 66.2%; left: 38%; top: calc(var(--stage) * .175); }
.hero-chameleon { position: absolute; z-index: 4; width: 36%; max-width: none; height: auto; left: 21%; top: calc(var(--stage) * .252); filter: drop-shadow(0 24px 20px rgba(45,14,82,.18)); }
.hero-motto { position: absolute; left: 10px; top: 115px; z-index: 3; color: #77728e; text-transform: uppercase; font-size: 11px; line-height: 1.5; letter-spacing: .23em; }
.hero-motto i { display: block; width: 28px; height: 2px; margin: 0 0 12px; background: #895cff; }
.hero-motto i:last-child { margin: 13px 0 0; }

.landing-section { padding: 44px 0; }
.pricing-section { padding-top: 32px; background: linear-gradient(180deg, #fff, #fcfbff 75%, #fff); }
.section-heading { margin-bottom: 24px; }
.split-heading { display: grid; grid-template-columns: 2fr 1fr; align-items: end; gap: 40px; }
.section-heading h2 { margin-top: 7px; font-size: 37px; line-height: 1.05; font-weight: 500; letter-spacing: 0; }
.section-heading > p { padding-bottom: 5px; color: #65667d; font-size: 12px; line-height: 1.45; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; align-items: stretch; }
.price-card { position: relative; min-height: 335px; padding: 29px 24px 20px; background: linear-gradient(135deg, #fbfaff, #f5f2fd); border: 1px solid #f0edf7; border-radius: 14px; display: flex; flex-direction: column; }
.price-card.featured { border-color: #a883ff; background: linear-gradient(145deg, #fff, #f3eeff); box-shadow: 0 14px 36px rgba(99,49,241,.1); }
.popular-label { position: absolute; height: 25px; left: -1px; right: -1px; top: -25px; border-radius: 14px 14px 0 0; display: grid; place-items: center; color: #fff; background: linear-gradient(90deg, #8250ff, #7134ef); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 600; }
.plan-heading { display: flex; align-items: center; gap: 15px; }
.feature-icon, .step-icon { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 13px; display: grid; place-items: center; color: var(--purple); background: linear-gradient(145deg, #eee6ff, #f7f4ff); box-shadow: inset 0 0 18px rgba(114,53,255,.05); }
.feature-icon svg { width: 29px; height: 29px; }
.plan-heading h3 { font-size: 18px; font-weight: 600; }
.plan-heading p { color: #66667b; font-size: 11px; }
.price { margin: 18px 0 12px; display: flex; align-items: baseline; }
.price small { font-size: 15px; font-weight: 600; margin-right: 6px; }
.price strong { font-size: 29px; line-height: 1; font-weight: 600; }
.price span { font-size: 13px; font-weight: 500; }
.price-card ul { display: grid; gap: 5px; list-style: none; margin-bottom: 18px; color: #4f4f65; font-size: 13px; }
.price-card li { display: flex; align-items: center; gap: 10px; }
.price-card li > span { width: 15px; height: 15px; color: var(--purple); }
.price-card li svg { width: 13px; height: 13px; }
.plan-button { min-height: 40px; margin-top: auto; padding: 0 18px; border: 1px solid #bcb9cc; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 58px; font-size: 11px; font-weight: 500; background: rgba(255,255,255,.6); }
.plan-button svg { width: 15px; height: 15px; }
.plan-button.selected { color: #fff; background: #0e0f18; border-color: #0e0f18; }

.process-section { padding-top: 32px; }
.steps { display: flex; align-items: flex-start; justify-content: space-between; list-style: none; padding: 2px 18px 0; }
.steps li { width: 155px; text-align: center; }
.step-icon { width: 61px; height: 61px; margin: 0 auto 15px; }
.step-icon svg { width: 27px; height: 27px; }
.steps b { display: block; font-size: 12px; font-weight: 600; }
.steps p { margin-top: 6px; color: #696a80; font-size: 13px; line-height: 1.45; }
.step-arrow { margin-top: 20px; color: #11121b; }
.step-arrow svg { width: 18px; height: 18px; }

.features-section { padding-top: 28px; }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px 18px; }
.feature-item { min-height: 105px; padding: 14px 18px; display: flex; align-items: center; gap: 16px; border-radius: 12px; background: linear-gradient(135deg, #fbfaff, #f6f3fc); }
.feature-item .feature-icon { width: 54px; height: 54px; }
.feature-item h3 { font-size: 13px; font-weight: 600; }
.feature-item p { margin-top: 4px; color: #6f6f83; font-size: 11px; line-height: 1.45; }
.automation { margin-top: 27px; display: grid; grid-template-columns: 35% 39% 26%; min-height: 198px; align-items: stretch; }
.automation-image { position: relative; overflow: hidden; background: #090a13; border-radius: 12px; }
.automation-image > span { position: absolute; z-index: 2; left: 27px; top: 28px; color: #d4d0e2; text-transform: uppercase; letter-spacing: .24em; font-size: 11px; line-height: 1.5; }
.automation-image i { display: block; width: 31px; height: 2px; margin-top: 15px; background: #a36dff; }
.automation-image img { position: absolute; width: 420px; max-width: none; height: auto; right: -145px; bottom: -72px; }
.automation-copy { align-self: center; padding: 16px 30px; }
.automation-copy h2 { margin: 7px 0 10px; font-size: 27px; line-height: 1.08; font-weight: 500; }
.automation-copy > p:last-child { color: #69697d; font-size: 11px; line-height: 1.55; }
.automation-list { align-self: center; list-style: none; padding: 16px 18px; display: grid; gap: 15px; border-radius: 12px; background: linear-gradient(140deg, #fbfaff, #f5f1ff); font-size: 11px; color: #555568; }
.automation-list li { display: flex; align-items: center; gap: 15px; }
.automation-list svg { width: 20px; height: 20px; color: var(--purple); }


.landing-footer { padding-bottom: 20px; }
.footer-main { min-height: 105px; display: grid; grid-template-columns: 220px 1fr 180px; align-items: center; border-bottom: 1px solid var(--line); }
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-brand .landing-brand { font-size: 18px; }
.footer-brand .brand-mark { width: 34px; height: 34px; }
.footer-brand p { padding-left: 13px; border-left: 1px solid var(--line); color: #6f6f83; text-transform: uppercase; letter-spacing: .18em; font-size: 11px; line-height: 1.6; }
.footer-main nav { display: flex; justify-content: center; gap: 30px; color: #4e4f62; font-size: 11px; }
.social-links { display: flex; justify-content: flex-end; gap: 21px; }
.social-links a { font-size: 11px; font-weight: 700; }
.footer-bottom { min-height: 45px; display: flex; align-items: end; justify-content: space-between; color: #89899c; font-size: 12px; gap: 16px; flex-wrap: wrap; }
.footer-bottom p:last-child { color: #9e79ff; text-transform: uppercase; letter-spacing: .2em; }
.footer-bottom i { display: inline-block; width: 28px; height: 1px; margin-left: 7px; vertical-align: middle; background: #8e5dff; }

@media (max-width: 1000px) {
  .desktop-nav { gap: 22px; }
  .hero-motto { display: none; }
  .automation { grid-template-columns: 34% 40% 26%; }
  .automation-copy { padding-inline: 20px; }
  .footer-main { grid-template-columns: 190px 1fr 130px; }
  .footer-main nav { gap: 15px; }
}

@media (max-width: 900px) {
  .landing-shell { width: min(100% - 32px, 560px); }
  /* No celular o topo não é o quadro: texto em cima, imagem embaixo. */
  /* Desenho do hero no celular, medido num quadro de 390px. --u vale 1px em 390px
     e acompanha a largura da tela (até 600px), então tudo escala junto e a cena
     fica presa ao fim do texto em vez de depender de uma altura fixa. Parar em
     480px deixava a cena pequena demais no tablet: a faixa de escamas acabava no
     meio da tela e a nota caía em cima dela. */
  .landing-page { --u: calc(min(100vw, 600px) / 390); }
  .hero .social-proof { display: none; }
  .landing-header { height: calc(64 * var(--u)); position: relative; z-index: 3; background: #f8f6fd; }
  .landing-header .landing-shell { width: 100%; padding-inline: calc(26 * var(--u)); }
  .landing-header .brand-mark { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
  .landing-header .landing-brand { gap: calc(8 * var(--u)); font-family: "Plus Jakarta Sans", "Poppins", Arial, sans-serif; font-size: calc(25 * var(--u)); font-weight: 700; letter-spacing: -.04em; }
  .desktop-nav, .header-cta { display: none; }
  .mobile-menu { display: block; margin-right: -11px; }
  .mobile-menu summary { gap: 4px; }
  .mobile-menu summary span { width: 20px; height: 2.5px; border-radius: 2px; background: var(--purple); }
  .hero { height: auto; min-height: 0; background: linear-gradient(180deg, #f8f6fd 0, #fff 45%, #f3effc 100%); font-family: "Plus Jakarta Sans", "Poppins", Arial, sans-serif; }
  .hero-background { display: none; }
  .hero-inner { width: 100%; height: auto; min-height: 0; display: block; }
  .hero-copy { width: 100%; margin-left: 0; padding: calc(10 * var(--u)) calc(26 * var(--u)) 0; text-align: left; }
  .hero h1 { font-size: calc(38 * var(--u)); line-height: calc(39 * var(--u)); letter-spacing: -.04em; }
  .hero h1 strong { white-space: normal; }
  .hero-lead { max-width: calc(262 * var(--u)); margin-top: calc(18 * var(--u)); color: #6b6a80; font-size: calc(15.5 * var(--u)); line-height: calc(20.5 * var(--u)); }
  .hero-actions { justify-content: flex-start; margin-top: calc(14 * var(--u)); }
  .hero-actions .hero-primary { width: calc(250 * var(--u)); min-width: 0; min-height: calc(42 * var(--u)); padding-inline: calc(20 * var(--u)); justify-content: center; gap: calc(12 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 500; box-shadow: 0 8px 18px rgba(113,56,255,.2); }
  .hero-actions .hero-primary svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
  .social-proof { justify-content: flex-start; margin-top: calc(18 * var(--u)); gap: calc(12 * var(--u)); font-size: max(10px, calc(11 * var(--u))); }
  .social-proof > i { width: calc(27 * var(--u)); }
  .hero-visual { position: relative; width: 100%; height: calc(500 * var(--u)); margin-top: calc(-164 * var(--u)); aspect-ratio: auto; transform: none; left: 0; right: 0; top: auto; bottom: auto; overflow: hidden; }
  .hero-scales { width: calc(780 * var(--u)); left: calc(-330 * var(--u)); top: 0; -webkit-mask-image: none; mask-image: none; }
  .hero-commerce { width: calc(433 * var(--u)); left: calc(54 * var(--u)); top: calc(156 * var(--u)); }
  .hero-chameleon { width: calc(300 * var(--u)); left: calc(-78 * var(--u)); top: calc(166 * var(--u)); bottom: auto; }
  .landing-section { padding: 55px 0; }
  .split-heading { display: block; text-align: center; }
  .section-heading h2 { font-size: 32px; }
  .section-heading > p { margin-top: 14px; }
  .pricing-grid { grid-template-columns: 1fr; gap: 38px; }
  .price-card { min-height: 350px; }
  .steps { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 16px; }
  .steps li { width: auto; }
  .step-arrow { display: none; }
  .steps li:last-of-type { grid-column: 1 / -1; width: 50%; justify-self: center; }
  .features-grid { grid-template-columns: 1fr; }
  .automation { grid-template-columns: 1fr; gap: 20px; }
  .automation-image { min-height: 220px; }
  .automation-copy { padding: 0; text-align: center; }
  .automation-list { padding: 22px; grid-template-columns: 1fr 1fr; }
  .footer-main { padding: 28px 0; display: flex; flex-wrap: wrap; gap: 28px; }
  .footer-main nav { width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: 12px 22px; }
  .social-links { margin-left: auto; }
}

@media (max-width: 430px) {
  .section-heading h2 { font-size: 28px; }
  .features-grid { gap: 10px; }
  .feature-item { padding-inline: 13px; }
  .automation-list { grid-template-columns: 1fr; }
  .footer-main { display: grid; grid-template-columns: 1fr; }
  .social-links { margin: 0; justify-content: flex-start; }
  .footer-bottom { padding-top: 18px; display: grid; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pill-button { transition: none; }
}

/* A prova social sem número inventado: só a frase. */
.social-proof p { margin: 0; }

/* ================= Aviso de cookies =================
   Só existe quando o pixel da Meta está configurado (META_PIXEL_ID): ver
   app/views/landing/_pixel_da_meta.html.erb. Fica no rodapé da tela, sem
   cobrir o botão de assinar no celular, e não bloqueia a página — quem não
   responde simplesmente não é medido. */
.aviso-cookies { position: fixed; z-index: 50; left: 16px; right: 16px; bottom: 16px; max-width: 620px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between; padding: 16px 18px; border-radius: 14px; background: #fff; color: #1c0e3e; box-shadow: 0 18px 40px rgba(28,14,62,.18); font-size: 13px; line-height: 1.5; }
.aviso-cookies[hidden] { display: none; }
.aviso-cookies p { margin: 0; flex: 1 1 280px; }
.aviso-cookies a { color: inherit; text-decoration: underline; }
.aviso-cookies-botoes { display: flex; gap: 8px; }
.aviso-cookies button { font: inherit; cursor: pointer; }

/* A landing segue a sequência da apresentação: produto, conexões e planos. */
.landing-page main { display: flex; flex-direction: column; }
.landing-page .hero { order: 0; }
.landing-page .process-section { order: 1; }
.landing-page .features-section { order: 2; }
.landing-page .pricing-section { order: 3; }

/* Demonstração do fluxo */
.process-section { padding: 50px 0 64px; scroll-margin-top: 92px; background: #f8f6ff; font-family: "Plus Jakarta Sans", "Poppins", Arial, sans-serif; }
.process-section .landing-shell { width: min(1665px, calc(100% - 96px)); }
.journey-heading { text-align: center; }
.journey-heading > input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.journey-heading h2 { font-size: clamp(32px, 3vw, 52px); line-height: 1.08; letter-spacing: -.05em; }
.journey-heading h2 span, .connections-heading h2 span, .pricing-heading h2 span { color: #7c35ef; }
.journey-profiles { width: fit-content; margin: 42px auto 12px; display: flex; border-bottom: 1px solid #e4dff0; color: #77718a; }
.journey-profiles label { min-width: 304px; padding: 0 24px 17px; display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 23px; cursor: pointer; transition: color .2s, border-color .2s; }
.journey-profiles label:hover { color: #7434ed; }
.journey-profiles label i { font-style: normal; }
.process-section .landing-shell:has(#perfil-influencer:checked) label[for="perfil-influencer"],
.process-section .landing-shell:has(#perfil-lojista:checked) label[for="perfil-lojista"],
.process-section .landing-shell:has(#perfil-editor:checked) label[for="perfil-editor"] { color: #7434ed; border-bottom: 4px solid #7434ed; }
.journey-profiles svg { width: 21px; height: 21px; }
.journey-copy { display: none; color: #77718a; font-size: 19px; }
.process-section .landing-shell:has(#perfil-influencer:checked) .journey-copy-influencer,
.process-section .landing-shell:has(#perfil-lojista:checked) .journey-copy-lojista,
.process-section .landing-shell:has(#perfil-editor:checked) .journey-copy-editor { display: block; }
.journey-panel { display: none; }
.process-section .landing-shell:has(#perfil-influencer:checked) .journey-panel-influencer { display: grid; }
.process-section .landing-shell:has(#perfil-lojista:checked) .journey-panel-lojista,
.process-section .landing-shell:has(#perfil-editor:checked) .journey-panel-editor { display: grid; }
.product-preview { min-height: 850px; margin-top: 94px; position: relative; grid-template-columns: 290px 1fr; overflow: visible; border: 1px solid #e4e0ed; border-radius: 28px; background: #fff; box-shadow: 0 24px 60px rgba(72,40,130,.06); }
.product-preview aside { padding: 38px 28px; border-right: 1px solid #e7e3ed; display: flex; flex-direction: column; gap: 8px; }
.product-preview aside > b { margin: 0 16px 28px; font-size: 34px; }
.product-preview aside span { padding: 13px 18px; display: flex; align-items: center; gap: 18px; border-radius: 10px; color: #6f6a80; font-size: 20px; }
.product-preview aside span.active { color: #7534ed; background: #eee5ff; }
.product-preview aside svg { width: 26px; height: 26px; flex: none; }
.preview-aside-bottom { margin-top: auto; padding-top: 25px; border-top: 1px solid #e7e3ed; }
.preview-main { min-width: 0; padding: 0 38px 22px; overflow: hidden; border-radius: 0 28px 28px 0; }
.preview-main nav { height: 62px; position: absolute; left: 290px; right: 0; top: -63px; display: flex; align-items: end; justify-content: center; gap: 58px; border-bottom: 1px solid #ebe8f0; color: #77718a; font-size: 19px; }
.preview-main nav span { height: 38px; }
.preview-main nav span.active { color: #7534ed; border-bottom: 3px solid #7534ed; }
.preview-main header { height: 102px; display: flex; align-items: center; justify-content: space-between; }
.preview-main h3 { font-size: 35px; }
.preview-main header > div { display: flex; gap: 12px; }
.preview-main header button { padding: 10px 20px; border: 1px solid #7c35ef; border-radius: 9px; color: #7434ed; background: #fff; font: inherit; }
.preview-main header button.save { color: #fff; background: #7c35ef; }
.preview-main h4 { padding: 18px 24px; border-radius: 14px; background: #f6f3fa; font-size: 24px; }
.preview-main article { min-height: 174px; margin-top: 20px; padding: 12px 22px; display: grid; grid-template-columns: 48px 1fr 322px 20px; align-items: center; gap: 18px; border: 1px solid #e8e3ef; border-radius: 18px; }
.preview-main article > i { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; color: #7434ed; background: #f0e8ff; font-style: normal; }
.preview-main article b { font-size: 20px; }
.preview-main article p { margin-top: 8px; padding: 10px 16px; border: 1px solid #e6e1ed; border-radius: 10px; color: #292632; font-size: 16px; line-height: 1.35; }
.preview-video { height: 150px; position: relative; overflow: hidden; display: block; border-radius: 11px; background: #d5b2ef; }
.preview-video img { width: 100%; height: 100%; object-fit: cover; }
.preview-main article > em { color: #77718a; font-size: 24px; font-style: normal; }
.preview-status { margin-top: 18px; padding-left: 20px; display: flex; align-items: center; justify-content: space-between; color: #16934b; font-size: 17px; }
.preview-status > span { padding: 10px 20px; display: flex; align-items: center; gap: 20px; border-radius: 8px; color: #fff; background: #7937ed; }
.preview-status svg { width: 16px; }
.preview-mascot { position: absolute; z-index: 3; width: 200px; height: auto; right: -225px; bottom: -38px; }
.process-section .steps { display: none; }
/* Telas do lojista e do editor, na mesma moldura do influencer. */
.preview-main nav.preview-nav-larga { left: 0; }
.journey-panel-lojista .preview-main header { height: 128px; }
.journey-panel-lojista .preview-main header > div:first-child { display: block; }
.preview-main header p { margin-top: 6px; color: #6f6a80; font-size: 19px; }
.preview-botao { min-height: 58px; padding: 0 30px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; border: 2px solid #7c35ef; border-radius: 10px; color: #7434ed; background: #fff; font-size: 20px; font-weight: 500; white-space: nowrap; }
.preview-botao.cheio { color: #fff; background: #7c35ef; }
.preview-botao svg { width: 26px; height: 26px; }
.preview-busca { width: 470px; min-height: 58px; padding: 0 20px; display: flex; align-items: center; gap: 14px; border: 1px solid #e3dfeb; border-radius: 10px; color: #8a8599; font-size: 19px; }
.preview-busca svg { width: 24px; height: 24px; color: #4a4658; }
.preview-loja { min-height: 170px; padding: 18px 32px 18px 20px; display: flex; align-items: center; gap: 28px; border: 1px solid #e8e3ef; border-radius: 18px; }
.preview-loja > img { width: 138px; height: 132px; flex: none; object-fit: contain; border-radius: 12px; background: #e3d6f6; }
.preview-loja-logo { width: 138px; height: 132px; flex: none; display: grid; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #a66bff, #6526cd); font-size: 62px; font-weight: 700; }
.preview-loja > div { flex: 1; min-width: 0; }
.preview-loja b { display: block; font-size: 34px; font-weight: 600; line-height: 1.2; }
.preview-loja > div > span { display: block; margin-top: 2px; color: #4f4b5c; font-size: 20px; }
.preview-loja p { margin-top: 6px; color: #77718a; font-size: 18px; line-height: 1.45; }
.preview-quadro { margin-top: 24px; padding: 22px; border: 1px solid #e8e3ef; border-radius: 18px; overflow-x: auto; }
.preview-quadro-topo { padding: 4px 4px 20px; display: flex; align-items: center; justify-content: space-between; }
.preview-quadro-topo b { font-size: 24px; font-weight: 600; }
.preview-quadro-topo span { display: flex; align-items: center; gap: 10px; color: #7434ed; font-size: 19px; }
.preview-quadro-topo svg { width: 20px; height: 20px; }
.preview-tabela { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid #ebe8f0; border-radius: 12px; overflow: hidden; text-align: left; font-size: 21px; }
.preview-tabela th { height: 50px; padding: 0 20px; color: #5f5b6d; background: #f6f4fa; font-size: 18px; font-weight: 400; }
.preview-tabela td { height: 92px; padding: 0 20px; border-top: 1px solid #ebe8f0; white-space: nowrap; }
.preview-tabela td.preview-miniatura { width: 11%; padding-right: 0; }
.preview-miniatura img { width: 95px; height: 70px; display: block; object-fit: cover; border-radius: 8px; background: #ece4f7; }
.preview-tabela td:nth-child(2) { width: 30%; }
.preview-tabela td:nth-child(3) { width: 19%; }
.preview-tabela td:nth-child(4) { width: 22%; }
.preview-etapa { padding: 7px 20px 7px 16px; display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; font-size: 20px; }
.preview-etapa::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.preview-etapa.ativo { color: #16934b; background: #e5f7ec; }
.preview-etapa.ativo::before { background: #22b35e; }
.preview-etapa.edicao { color: #7434ed; background: #efe7ff; }
.preview-etapa.revisao { color: #7a5600; background: #fff3c4; }
.preview-etapa.revisao::before { background: #f2b300; }
.preview-etapa.iniciar { color: #4f4b5c; background: #f0eef4; }
.preview-etapa.iniciar::before { background: #6b6779; }
.preview-acoes { display: flex; gap: 12px; }
.preview-acoes i { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 9px; color: #2b2734; background: #f6f4fa; font-style: normal; font-size: 24px; font-weight: 700; }
.preview-acoes svg { width: 24px; height: 24px; }
/* A fila do editor: o quadro é a própria tabela, sem título por cima. */
.preview-quadro-fila { margin-top: 0; padding: 0; border: 0; }
.preview-quadro-fila .preview-tabela { border-color: #e8e3ef; border-radius: 18px; }
.preview-quadro-fila th { height: 64px; padding-inline: 24px; font-size: 19px; }
.preview-quadro-fila td { height: 105px; padding-inline: 24px; }
.preview-quadro-fila td.preview-miniatura { width: 10%; padding-right: 0; }
.preview-quadro-fila .preview-miniatura img { width: 86px; height: 75px; }
.preview-quadro-fila td:nth-child(2) { width: 29%; }
.preview-quadro-fila td:nth-child(3) { width: 23%; }
.preview-quadro-fila td:nth-child(4) { width: 16%; }
.preview-quadro-fila b { font-weight: 600; }
.preview-quadro-fila tr.selecionado td { background: #f4eeff; }
.preview-tabela td.preview-mais { width: 40px; color: #2b2734; font-size: 26px; font-weight: 700; text-align: center; }
.preview-projeto { min-height: 205px; margin-top: 22px; padding: 22px 40px 22px 24px; display: flex; align-items: center; gap: 26px; border: 1px solid #e8e3ef; border-radius: 18px; background: #faf9fd; }
.preview-projeto > img { width: 166px; height: 157px; flex: none; object-fit: cover; border-radius: 10px; }
.preview-projeto > div { flex: 1; min-width: 0; }
.preview-projeto b { display: block; font-size: 23px; font-weight: 600; }
.preview-projeto > div > span { display: block; width: fit-content; margin-top: 4px; padding-bottom: 16px; border-bottom: 1px solid #e3dfeb; color: #6f6a80; font-size: 19px; }
.preview-projeto p { margin-top: 18px; display: flex; align-items: center; gap: 18px; font-size: 20px; }
.preview-projeto p svg { width: 28px; height: 28px; }
.preview-projeto p small { display: block; color: #6f6a80; font-size: 16px; }

/* Planos */
.pricing-section { min-height: 0; padding: 36px 0 72px; scroll-margin-top: 92px; background: #f8f6ff; font-family: "Plus Jakarta Sans", "Poppins", Arial, sans-serif; }
.pricing-section .landing-shell { width: min(1820px, calc(100% - 88px)); }
.pricing-heading { margin-bottom: 56px; text-align: center; }
.pricing-heading > p { display: flex; align-items: center; justify-content: center; gap: 22px; color: #8551f1; text-transform: uppercase; letter-spacing: .28em; font-size: 14px; font-weight: 600; }
.pricing-heading > p i { width: 72px; height: 2px; background: #8551f1; }
.pricing-heading h2 { margin-top: 32px; font-size: clamp(40px, 4.1vw, 66px); line-height: 1.04; letter-spacing: -.055em; }
.pricing-heading h3 { margin-top: 18px; color: #746f83; font-size: clamp(17px, 1.55vw, 27px); font-weight: 400; }
.pricing-heading small { display: block; margin-top: 10px; color: #8b8698; font-size: 16px; }
.pricing-grid { max-width: 1120px; margin-inline: auto; gap: 22px; align-items: stretch; }
.price-card { min-height: 0; padding: 30px 28px 22px; border: 1px solid #e3dfea; border-radius: 18px; background: #fff; }
.price-card.featured { border: 3px solid #7d39ed; background: linear-gradient(145deg, #fff, #f9f5ff); box-shadow: none; }
.popular-label { left: 50%; right: auto; width: max-content; max-width: 94%; padding: 0 20px; transform: translateX(-50%); top: -18px; height: 34px; border-radius: 999px; font-size: 12px; letter-spacing: .08em; }
.plan-heading .feature-icon { display: none; }
.plan-heading h3 { font-size: 32px; line-height: 1; letter-spacing: -.045em; }
.price-card.featured .plan-heading h3 { color: #7837ed; }
.plan-heading p { margin-top: 8px; color: #77718a; font-size: 15px; }
.price { margin: 22px 0 18px; white-space: nowrap; }
.price small { margin-right: 5px; font-size: 20px; }
.price strong { font-size: clamp(36px, 3vw, 46px); letter-spacing: -.055em; }
.price span { margin-left: 8px; color: #77718a; font-size: 18px; font-weight: 400; }
.price-card ul.plan-benefits { margin: 0 0 18px; padding-top: 16px; gap: 9px; border-top: 1px solid #e8e3ed; font-size: 15px; color: #231f2d; }
.price-card li { align-items: center; gap: 12px; }
.price-card li > span { flex: 0 0 auto; width: 34px; height: 34px; padding: 8px; border-radius: 50%; color: #77718a; background: #f1e9ff; }
.price-card li svg { width: 100%; height: 100%; }
.price-card ul.plan-benefits-secondary { margin-top: auto; margin-bottom: 18px; padding-top: 14px; border-top: 1px solid #e8e3ed; color: #77718a; }
.plan-button { min-height: 50px; border: 2px solid #7d39ed; border-radius: 10px; color: #7130df; font-size: 16px; font-weight: 600; }
.plan-button.selected { border-color: #7d39ed; background: #7d39ed; }
.price-card.featured .plan-button { color: #fff; border-color: #5d22bf; background: #5d22bf; }
.plan-delta { order: 3; margin: 0 0 18px; padding: 10px 14px; display: flex; align-items: center; gap: 12px; border-radius: 12px; background: #efe7ff; color: #77718a; font-size: 14px; line-height: 1.35; }
.plan-delta svg { flex: 0 0 auto; width: 22px; height: 22px; color: #7d39ed; }
.plan-delta b { color: #7130df; font-weight: 600; }
.price-card.featured .plan-delta { order: initial; }
.pricing-family[hidden] { display: none; }
/* As abas Sou Influencer / Lojista / Editor em cima dos preços: são as da demonstração, menores. */
.pricing-radios input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.journey-profiles.pricing-profiles { margin: -20px auto 44px; }
.pricing-profiles label { min-width: 210px; padding-bottom: 14px; gap: 10px; border-bottom: 4px solid transparent; font-size: 18px; }
.pricing-profiles svg { width: 19px; height: 19px; }
.landing-page main:has(#perfil-influencer:checked) .pricing-profiles label[for="perfil-influencer"],
.landing-page main:has(#perfil-lojista:checked) .pricing-profiles label[for="perfil-lojista"],
.landing-page main:has(#perfil-editor:checked) .pricing-profiles label[for="perfil-editor"] { color: #7434ed; border-bottom: 4px solid #7434ed; }
@media (max-width: 900px) {
  .journey-profiles.pricing-profiles { width: calc(100% - 40px); margin: 0 auto 26px; }
  .pricing-profiles label { min-width: 0; flex: 1; padding: 0 4px 10px; font-size: 14px; }
}
/* A escolha de perfil já é controlada pelos rádios da demonstração. Usar o
   mesmo estado aqui faz os planos mudarem mesmo antes do JavaScript carregar
   (ou quando o navegador ainda está com uma versão antiga dele em cache). */
.landing-page main:has(#perfil-editor:checked) .pricing-family[data-planos-perfil="criador"] { display: none; }
.landing-page main:has(#perfil-editor:checked) .pricing-family[data-planos-perfil="editor"] { display: block; }
.landing-page main:has(#perfil-lojista:checked) .pricing-family[data-planos-perfil="criador"] { display: none; }
.landing-page main:has(#perfil-lojista:checked) .pricing-family[data-planos-perfil="lojista"] { display: block; }
/* Editor: dois cartões do mesmo tamanho dos três de influencer/lojista (um terço da grade cada), no centro. */
.pricing-family-editor .pricing-grid { grid-template-columns: repeat(2, calc((100% - 2 * 22px) / 3)); justify-content: center; }
.pricing-all { min-height: 96px; margin-top: 31px; padding: 18px 265px; display: flex; align-items: center; justify-content: center; gap: 26px; border-radius: 14px; background: #efeafc; color: #77718a; font-size: 19px; white-space: nowrap; }
.pricing-all > span { flex: 0 0 auto; width: 34px; height: 34px; padding: 5px; color: #7d39ed; }
.pricing-all b { color: #1c0e3e; font-size: 22px; font-weight: 600; }
.pricing-all i { align-self: stretch; width: 1px; background: #ded7eb; }
@media (max-width: 1250px) { .pricing-all { padding: 18px 24px; flex-wrap: wrap; white-space: normal; text-align: center; } }
@media (max-width: 900px) {
  /* flex-start: com "center" o excesso do carrossel vaza para a esquerda e o primeiro card fica cortado. */
  .pricing-family-editor .pricing-grid { display: flex; justify-content: flex-start; }
}

/* Três caminhos: a seção editorial que apresenta os perfis antes dos planos. */
.features-section { position: relative; min-height: 1080px; padding: 82px 0 70px; overflow: hidden; background: radial-gradient(circle at 51% 43%, #fff 0 24%, #fbfaff 55%, #f0ebff 100%); }
.features-section .landing-shell { width: min(1820px, calc(100% - 88px)); position: relative; z-index: 1; }
.connections-heading { text-align: center; }
.connections-heading > p { color: #8551f1; text-transform: uppercase; letter-spacing: .32em; font-size: 13px; font-weight: 600; }
.connections-heading h2 { margin-top: 0; font-size: clamp(58px, 5.5vw, 98px); line-height: .98; letter-spacing: -.075em; }
.connections-heading h3 { margin-top: 20px; color: #77718a; font-size: clamp(18px, 1.6vw, 28px); font-weight: 400; }
.connections-paths { position: relative; width: min(920px, 64%); height: 300px; margin: 34px auto 0; }
.connection-action { position: absolute; z-index: 3; display: grid; color: #0e0918; text-align: center; text-transform: uppercase; line-height: .9; }
.connection-action small { color: #77718a; font-size: 17px; font-weight: 700; letter-spacing: .25em; }
.connection-action strong { margin-top: 10px; font-size: clamp(38px, 3.2vw, 62px); letter-spacing: -.06em; }
.connection-action-create { left: 0; top: 92px; }
.connection-action-sell { right: 0; top: 92px; }
.connection-action-edit { left: 50%; bottom: 0; transform: translateX(-50%); }
.connections-lines { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.connections-lines path { fill: none; stroke: #7429ff; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.connections-lines circle { fill: #7429ff; }
.connections-spiral { position: absolute; z-index: 2; left: 50%; top: 40%; width: 210px; height: 210px; display: grid; place-items: center; transform: translate(-50%, -50%); }
.connections-spiral img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 18px #7130df35); }
.connections-spiral img { animation: connections-spiral-gira 14s linear infinite; }
@keyframes connections-spiral-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .connections-spiral img { animation: none; } }
.connections-character { position: absolute; z-index: 2; width: 500px; height: auto; right: -190px; top: 385px; pointer-events: none; }
.connection-grid { position: relative; z-index: 3; margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); }
.connection-grid article { min-height: 126px; padding: 0 54px; text-align: center; }
.connection-grid article + article { border-left: 2px solid #b993ff; }
.connection-grid h3 { color: #6320ef; font-size: 27px; }
.connection-grid p { margin-top: 8px; color: #77718a; font-size: 18px; line-height: 1.45; }
.connections-statement { position: relative; z-index: 3; margin-top: 35px; color: #5b18ee; text-align: center; font-size: clamp(36px, 3.5vw, 64px); font-weight: 700; line-height: 1.04; letter-spacing: -.055em; }
.connections-cta { width: 390px; min-height: 68px; margin: 45px auto 0; padding: 0 36px; display: flex; align-items: center; justify-content: space-between; border-radius: 999px; color: #fff !important; background: #7835ed; box-shadow: 0 16px 32px #6f31d52f; font-size: 21px; }
.connections-cta svg { width: 20px; }
.connections-stage { display: contents; }
.connections-lines-stage { display: none; }

/* Desktop: a composição é a do desenho, num quadro de 2000 x 1251 px. --s vale 1px do desenho. */
@media (min-width: 901px) {
  .features-section { --w: min(100vw, 2000px); --s: calc(var(--w) / 2000); min-height: 0; padding: 0 0 calc(48 * var(--s)); background: linear-gradient(180deg, #fcfbff 0, #f9f7ff 70%, #f1ecff 100%); }
  .features-section .landing-shell { width: var(--w); max-width: none; }
  .connections-stage { display: block; position: relative; width: 100%; height: calc(1251 * var(--s)); }
  .connections-heading { position: absolute; left: 0; right: 0; top: calc(78 * var(--s)); z-index: 3; }
  .connections-heading h2 { font-size: calc(104 * var(--s)); line-height: calc(106 * var(--s)); letter-spacing: -.065em; font-weight: 700; color: #0d0a1a; }
  .connections-heading h2 span { color: #4b1ff2; }
  .connections-heading h3 { margin-top: calc(16 * var(--s)); font-size: calc(33 * var(--s)); line-height: 1.2; letter-spacing: -.02em; color: #7b7692; }
  .connections-paths { position: absolute; left: calc(330 * var(--s)); top: calc(460 * var(--s)); width: calc(1200 * var(--s)); height: calc(380 * var(--s)); margin: 0; }
  .connection-action { line-height: 1; transform: translateX(-50%); }
  .connection-action small { font-size: calc(23 * var(--s)); letter-spacing: .3em; padding-left: .3em; color: #77718a; }
  .connection-action strong { margin-top: calc(2 * var(--s)); font-size: calc(76 * var(--s)); line-height: 1; font-weight: 800; letter-spacing: -.045em; color: #0d0a1a; }
  .connection-action-create { left: 10%; right: auto; top: calc(34 * var(--s)); }
  .connection-action-sell { left: 85.83%; right: auto; top: calc(34 * var(--s)); }
  .connection-action-edit { left: 49.17%; bottom: auto; top: calc(283 * var(--s)); }
  .connections-lines:not(.connections-lines-stage) { display: none; }
  .connections-lines-stage { display: block; }
  .connections-lines path { stroke: #7429ff; stroke-width: 1.5; vector-effect: none; }
  .connections-spiral { left: 49.17%; top: 25%; width: calc(300 * var(--s)); height: calc(300 * var(--s)); }
  .connections-spiral img { filter: none; }
  .connections-character { width: calc(560 * var(--s)); height: auto; left: calc(1540 * var(--s)); right: auto; top: calc(465 * var(--s)); transform: none; }
  .connection-grid { position: absolute; left: calc(165 * var(--s)); width: calc(1705 * var(--s)); top: calc(883 * var(--s)); margin: 0; grid-template-columns: 502fr 600fr 603fr; }
  .connection-grid article { min-height: calc(126 * var(--s)); padding: 0 calc(24 * var(--s)); }
  .connection-grid article + article { border-left: 1px solid #a98bf0; }
  .connection-grid h3 { font-size: calc(42 * var(--s)); line-height: 1.1; letter-spacing: -.04em; font-weight: 700; color: #5b21ef; }
  .connection-grid p { margin-top: calc(4 * var(--s)); font-size: calc(27 * var(--s)); line-height: 1.45; letter-spacing: -.015em; color: #7b7692; }
  .connections-statement { position: absolute; left: 0; right: 0; top: calc(1052 * var(--s)); margin: 0; font-size: calc(58 * var(--s)); line-height: calc(66 * var(--s)); letter-spacing: -.05em; color: #5b21ef; }
  .connections-cta { margin-top: calc(24 * var(--s)); }
}

/* Footer legal */
.landing-footer { position: relative; padding: 54px 0 30px; overflow: hidden; background: radial-gradient(circle at 15% 0, #251347 0, #100b1d 34%), #100b1d; color: #fff; }
.landing-footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent 4%, #7c3aed 42%, #c06cff 58%, transparent 96%); opacity: .8; }
.footer-main { min-height: 112px; grid-template-columns: minmax(250px, .8fr) minmax(460px, 1.7fr) auto; gap: 36px; border-color: #ffffff20; }
.footer-brand { gap: 18px; }
.footer-brand .landing-brand { font-size: 21px; }
.footer-brand .brand-mark { width: 40px; height: 40px; }
.footer-brand p { color: #bcb3ce; border-color: #ffffff2b; font-size: 10px; }
.footer-main nav { justify-content: flex-start; flex-wrap: wrap; gap: 12px 28px; color: #d9d2e8; font-size: 12px; }
.footer-main nav a { padding: 6px 0; }
.footer-main nav a:hover { color: #b98bff; }
.footer-bottom { min-height: 92px; align-items: center; gap: 24px; color: #9f97b1; font-size: 12px; }
.footer-copyright { flex: 0 0 auto; }
.footer-legal { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; gap: 8px 18px; flex-wrap: wrap; color: #aaa2bc; font-style: normal; }
.footer-legal strong { color: #d9d2e8; font-weight: 500; }
.footer-empresa { display: inline-flex; align-items: center; gap: 10px; }
.footer-cnpj { padding: 7px 11px; border: 1px solid #ffffff21; border-radius: 999px; color: #cfc5e3; background: #ffffff08; white-space: nowrap; }
.footer-contato { display: inline-flex; align-items: center; gap: 5px; }
.footer-legal a { color: #d7baff; text-decoration: none; border-bottom: 1px solid #8d5bd4; }
.footer-legal a:hover { color: #fff; border-color: #fff; }

@media (max-width: 1000px) {
  .footer-main { grid-template-columns: 1fr; gap: 22px; padding-bottom: 28px; }
  .footer-main nav { justify-content: flex-start; }
  .social-links { margin-left: 0; justify-content: flex-start; }
  .footer-bottom { padding-top: 24px; display: grid; }
  .footer-legal { margin-left: 0; justify-content: flex-start; }
}

@media (max-width: 560px) {
  .landing-footer { padding: 42px 0 26px; }
  .footer-main { gap: 20px; }
  .footer-brand { align-items: flex-start; }
  .footer-main nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
  .footer-bottom { gap: 18px; }
  .footer-legal { align-items: flex-start; flex-direction: column; gap: 10px; }
  .footer-empresa { align-items: flex-start; flex-direction: column; gap: 7px; }
  .footer-contato { display: block; line-height: 1.7; }
  .footer-cnpj { margin-left: -2px; }
}

@media (max-width: 900px) {
  .journey-profiles label { min-width: 0; padding-inline: 14px; font-size: 16px; }
  .product-preview { grid-template-columns: 1fr; min-height: 0; }
  .product-preview aside { display: none; }
  .preview-main nav { left: 0; overflow-x: auto; }
  .preview-main article { grid-template-columns: 32px 1fr; }
  .preview-main article > span { display: none; }
  .preview-main header, .journey-panel-lojista .preview-main header { height: auto; padding-block: 24px; flex-wrap: wrap; gap: 16px; }
  .preview-busca { width: auto; flex: 1; }
  .preview-tabela { min-width: 760px; }
  .preview-loja, .preview-projeto { flex-wrap: wrap; }
  /* Fora da moldura ele empurrava a página para o lado. */
  .preview-mascot { width: 116px; right: -75px; bottom: -20px; }
  .pricing-section .landing-shell { width: min(100% - 32px, 650px); }
  .features-section .landing-shell { width: min(100% - 44px, 820px); }
  .pricing-grid { grid-template-columns: 1fr; }
  .price-card { min-height: 0; }
  .features-section { min-height: 900px; }
  .connections-paths { width: 86%; }
  .connections-character { width: 350px; right: -195px; top: 365px; }
  .connection-grid article { padding-inline: 20px; }
}

@media (max-width: 560px) {
  .process-section .landing-shell { width: calc(100% - 24px); }
  .journey-profiles { width: 100%; }
  .journey-profiles label { flex: 1; padding-inline: 4px; font-size: 11px; }
  .journey-heading > p { font-size: 12px; }
  .product-preview { margin-top: 28px; }
  .preview-main { padding-inline: 12px; }
  .preview-main nav { gap: 22px; font-size: 11px; }
  .preview-main header button { padding-inline: 10px; font-size: 11px; }
  .preview-main article p { font-size: 11px; }
  .preview-status > span { padding-inline: 12px; font-size: 10px; }
  .preview-main h3 { font-size: 26px; }
  .preview-main header p, .preview-busca, .preview-botao { font-size: 14px; }
  .preview-botao, .preview-busca { min-height: 44px; padding-inline: 14px; }
  .preview-main header > div { flex-wrap: wrap; }
  .preview-loja { padding: 14px; gap: 14px; }
  .preview-loja > img { width: 72px; height: 70px; }
  .preview-loja-logo { width: 72px; height: 70px; font-size: 34px; }
  .preview-loja b { font-size: 22px; }
  .preview-loja > div > span, .preview-loja p { font-size: 13px; }
  .preview-quadro { padding: 12px; }
  .preview-tabela { min-width: 600px; font-size: 14px; }
  .preview-tabela th { font-size: 13px; }
  .preview-tabela td, .preview-quadro-fila td { height: 70px; }
  .preview-miniatura img, .preview-quadro-fila .preview-miniatura img { width: 60px; height: 46px; }
  .preview-etapa { font-size: 13px; }
  .preview-projeto { padding: 14px; gap: 14px; }
  .preview-projeto > img { width: 90px; height: 86px; }
  .preview-projeto b { font-size: 17px; }
  .preview-projeto > div > span, .preview-projeto p { font-size: 13px; }
  .preview-mascot { width: 90px; right: -34px; bottom: -16px; }
  .pricing-section, .features-section { padding-block: 58px; }
  .pricing-heading > p { gap: 10px; font-size: 9px; }
  .pricing-heading > p i { width: 32px; }
  .price-card { padding: 34px 24px 24px; }
  .plan-heading h3 { font-size: 34px; }
  .price-card ul { font-size: 15px; }
  .connections-cta { width: 100%; }
  .footer-bottom { display: grid; }
}

/* Composição móvel da apresentação (390–480 px). */
.pricing-mobile-tabs, .pricing-mobile-controls { display: none; }

@media (max-width: 560px) {
  body.landing-page { background: #f8f6ff; }
  .hero .social-proof,
  .mobile-menu .mobile-login-link,
  .product-preview .preview-mascot,
  .features-section .connections-mascot { display: none; }

  /* Hero */
  .landing-header { height: calc(66 * var(--u)); }
  .landing-header .landing-shell { padding-inline: calc(25 * var(--u)); }
  .landing-header .brand-mark { width: calc(31 * var(--u)); height: calc(31 * var(--u)); }
  .landing-header .landing-brand { font-size: calc(25 * var(--u)); }
  .mobile-menu summary span { width: calc(22 * var(--u)); height: calc(2.5 * var(--u)); }
  .hero-copy { padding: calc(11 * var(--u)) calc(26 * var(--u)) 0; }
  .hero h1 { font-size: calc(39 * var(--u)); line-height: calc(40 * var(--u)); letter-spacing: -.055em; }
  .hero-lead { max-width: calc(295 * var(--u)); margin-top: calc(17 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(21 * var(--u)); }
  .hero-actions { margin-top: calc(17 * var(--u)); }
  .hero-actions .hero-primary { width: calc(250 * var(--u)); min-height: calc(43 * var(--u)); }
  .social-proof { margin-top: calc(17 * var(--u)); }
  .hero-visual { height: calc(500 * var(--u)); margin-top: calc(-151 * var(--u)); }
  .hero-scales { width: calc(780 * var(--u)); left: calc(-330 * var(--u)); }
  .hero-commerce { width: calc(434 * var(--u)); left: calc(55 * var(--u)); top: calc(156 * var(--u)); }
  .hero-chameleon { width: calc(300 * var(--u)); left: calc(-78 * var(--u)); top: calc(166 * var(--u)); }

  /* Demonstração */
  .process-section { padding: 38px 0 0; }
  .process-section .landing-shell { width: calc(100% - 48px); }
  .journey-heading { text-align: left; }
  .journey-heading h2 { font-size: 30px; line-height: 1.08; letter-spacing: -.055em; }
  .journey-profiles { width: 100%; margin: 22px 0 7px; }
  .journey-profiles label { min-width: 0; flex: 1; gap: 6px; padding: 0 2px 9px; font-size: 13px; white-space: nowrap; }
  .journey-profiles label svg { width: 18px; height: 18px; flex: none; }
  .journey-profiles .profile-prefix { display: none; }
  .journey-copy { text-align: center; font-size: 12px; line-height: 1.35; }
  .product-preview { margin-top: 45px; min-height: 0; overflow: visible; border-radius: 13px; }
  .preview-main { padding: 0 14px 14px; overflow: visible; border-radius: 13px; }
  /* A linha de abas rola de lado; o esmaecido na ponta mostra que tem mais. */
  .preview-main nav { height: 39px; top: -43px; gap: 20px; justify-content: flex-start; font-size: 12px; white-space: nowrap; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
  .preview-main nav::-webkit-scrollbar { display: none; }
  .preview-main nav span { height: 28px; flex: none; }
  .preview-main nav::after { content: ""; flex: 0 0 24px; }
  .preview-main header { min-height: 51px; padding: 9px 0; flex-wrap: nowrap; gap: 7px; }
  .preview-main h3 { flex: 1; font-size: 20px; white-space: nowrap; }
  .preview-main header > div { flex: 0 0 auto; gap: 6px; }
  .preview-main header button { padding: 7px 10px; border-radius: 7px; font-size: 10px; white-space: nowrap; }
  .preview-main h4 { padding: 10px 12px; border-radius: 9px; font-size: 15px; }
  .preview-main article { min-height: 0; margin-top: 11px; padding: 9px 8px; grid-template-columns: 31px 1fr 8px; align-items: start; gap: 6px; border-radius: 10px; }
  .preview-main article > i { width: 24px; height: 24px; font-size: 12px; }
  .preview-main article > div { min-width: 0; }
  .preview-main article b { font-size: 14px; }
  .preview-main article p { margin-top: 5px; padding: 6px 8px; font-size: 10.5px; line-height: 1.28; }
  .preview-main article > em { font-size: 18px; }
  .preview-main article > em { grid-column: 3; grid-row: 1; }
  .preview-main article > span.preview-video { width: 84%; height: 72px; margin: 7px auto 0; display: block; grid-column: 2 / 4; grid-row: 2; }
  .preview-status { margin-top: 10px; padding: 0 0 0 2px; flex-wrap: wrap; gap: 8px; font-size: 12px; }
  .preview-status > span { width: 100%; min-height: 34px; padding: 7px 16px; justify-content: center; font-size: 11px; }
  .preview-mascot { width: 78px; right: -41px; bottom: -4px; }

  /* Os painéis de Lojista e Editor continuam clicáveis e usam a mesma moldura móvel. */
  .journey-panel-lojista .preview-main header, .journey-panel-editor .preview-main header { flex-wrap: wrap; }
  .journey-panel-lojista .preview-main header p { font-size: 10px; }
  /* Loja: logo e texto lado a lado, o botão embaixo, na largura toda. */
  .preview-loja { min-height: 0; padding: 12px; display: grid; grid-template-columns: 55px 1fr; align-items: start; gap: 10px 12px; }
  .preview-loja > img, .preview-loja-logo { width: 55px; height: 55px; font-size: 26px; }
  .preview-loja b { font-size: 17px; }
  .preview-loja p br { display: none; }
  .preview-loja > .preview-botao, .preview-projeto > .preview-botao { grid-column: 1 / -1; width: 100%; }
  .preview-quadro { padding: 12px; overflow-x: visible; }
  .preview-quadro-fila { padding: 0; }
  .journey-panel-editor .preview-tabela td, .journey-panel-editor .preview-tabela th { padding-inline: 8px; }
  .journey-panel-editor .preview-tabela td.preview-miniatura { width: 56px; }
  .journey-panel-editor .preview-miniatura img { width: 48px; height: 44px; }
  .preview-quadro-topo { padding: 0 2px 12px; gap: 10px; }
  .preview-quadro-topo b { font-size: 17px; }
  .preview-quadro-topo span { gap: 6px; font-size: 13px; white-space: nowrap; }
  .preview-quadro-topo svg { width: 15px; height: 15px; }
  /* No celular a tabela fica com o essencial e cabe na tela, sem rolar de lado:
     lojista vê produto e preço; editor vê trabalho e etapa. */
  .preview-tabela, .preview-quadro-fila .preview-tabela { min-width: 0; table-layout: auto; }
  .preview-tabela th, .preview-quadro-fila th { height: 38px; padding: 0 10px; }
  .preview-tabela td, .preview-quadro-fila td { height: 64px; padding: 6px 10px; white-space: normal; line-height: 1.25; }
  .preview-tabela td:nth-child(n), .preview-quadro-fila td:nth-child(n) { width: auto; }
  .preview-tabela td.preview-miniatura, .preview-quadro-fila td.preview-miniatura { width: 66px; padding-right: 0; }
  .preview-miniatura img, .preview-quadro-fila .preview-miniatura img { width: 56px; height: 44px; }
  .journey-panel-lojista .preview-tabela th:nth-child(2), .journey-panel-lojista .preview-tabela th:nth-child(4),
  .journey-panel-lojista .preview-tabela td:nth-child(3), .journey-panel-lojista .preview-tabela td:nth-child(5),
  .journey-panel-editor .preview-tabela th:nth-child(2), .journey-panel-editor .preview-tabela th:nth-child(3),
  .journey-panel-editor .preview-tabela td:nth-child(3), .journey-panel-editor .preview-tabela td:nth-child(4),
  .journey-panel-editor .preview-tabela td:nth-child(6) { display: none; }
  .journey-panel-lojista .preview-tabela td:nth-child(4) { white-space: nowrap; text-align: right; }
  .journey-panel-lojista .preview-tabela th:nth-child(3) { text-align: right; }
  .preview-etapa { padding: 4px 10px 4px 8px; gap: 6px; font-size: 12px; white-space: nowrap; }
  .preview-etapa::before { width: 7px; height: 7px; }
  /* Editor: a busca ocupa a linha e o botão vai para baixo dela. */
  .journey-panel-editor .preview-main header > div { width: 100%; flex-wrap: wrap; }
  .journey-panel-editor .preview-busca { flex: 1 1 100%; width: 100%; min-height: 40px; font-size: 13px; }
  .journey-panel-editor .preview-main header .preview-botao { width: 100%; min-height: 40px; }
  .preview-projeto { padding: 12px; display: grid; grid-template-columns: 80px 1fr; align-items: start; gap: 10px 12px; }
  .preview-projeto > img { width: 80px; height: 76px; }
  .preview-projeto p { margin-top: 10px; gap: 8px; }
  .preview-projeto p svg { width: 20px; height: 20px; flex: none; }
  .preview-projeto > div > span { padding-bottom: 8px; }

  /* Três caminhos em uma composição compacta, ainda antes dos planos. */
  .features-section { min-height: 0; padding: 50px 0 38px; }
  .landing-page .features-section { order: 2; }
  .landing-page .pricing-section { order: 3; }
  .features-section .landing-shell { width: 100%; padding-inline: 24px; }
  .connections-heading > p { font-size: 10px; }
  .connections-heading h2 { margin-top: 0; font-size: 39px; line-height: 1; }
  .connections-heading h3 { max-width: 345px; margin: 13px auto 0; font-size: 14px; line-height: 1.4; }
  .connections-paths { width: 100%; height: 228px; margin-top: 24px; }
  .connection-action small { font-size: 10px; }
  .connection-action strong { margin-top: 6px; font-size: 27px; }
  .connection-action-create { left: 0; top: 75px; }
  .connection-action-sell { right: 0; top: 75px; }
  .connection-action-edit { bottom: 4px; }
  .connections-spiral { width: 128px; height: 128px; }
  .connections-character { width: 210px; right: -115px; top: 225px; opacity: .96; }
  .connection-grid { margin-top: 13px; grid-template-columns: repeat(3, 1fr); gap: 0; }
  .connection-grid article { min-height: 104px; padding: 0 8px; }
  .connection-grid h3 { font-size: 16px; }
  .connection-grid p { margin-top: 5px; font-size: 11px; line-height: 1.35; }
  .connections-statement { margin-top: 24px; font-size: 27px; }
  .connections-cta { width: 100%; min-height: 45px; margin-top: 24px; padding-inline: 28px; font-size: 15px; }

  /* Planos em faixa horizontal, pronta para gesto de arrastar. */
  .pricing-section { min-height: 0; padding: 46px 0 28px; overflow: hidden; }
  .pricing-section .landing-shell { width: 100%; }
  .pricing-heading { padding-inline: 22px; margin-bottom: 23px; }
  .pricing-heading > p { gap: 9px; font-size: 9px; }
  .pricing-heading > p i { width: 33px; }
  .pricing-heading h2 { margin-top: 18px; font-size: 32px; line-height: 1.04; }
  .pricing-heading h3 { margin-top: 12px; font-size: 0; }
  .pricing-heading h3::after { content: "Escolha a capacidade que acompanha sua rotina."; color: #746f83; font-size: 15px; }
  .pricing-heading small { margin-top: 7px; font-size: 13px; }
  .pricing-mobile-tabs { margin: 0 22px 27px; display: flex; border-bottom: 2px solid #e8e3f2; }
  .pricing-mobile-tabs a { flex: 1; padding-bottom: 8px; color: #504b64; text-align: center; font-size: 17px; }
  .pricing-mobile-tabs a.active { color: #7130df; border-bottom: 3px solid #7130df; font-weight: 600; }
  .pricing-grid { width: 100%; padding: 18px 23px 5px; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 23px; scrollbar-width: none; }
  .pricing-grid::-webkit-scrollbar { display: none; }
  .price-card { flex: 0 0 306px; min-height: 526px; padding: 28px 20px 17px; scroll-snap-align: center; border-radius: 10px; }
  /* No celular, o plano em destaque abre o carrossel. */
  .price-card.featured { order: -1; }
  .price-card.featured { border-width: 2px; }
  /* O selo cresce com o texto e fica centrado: com largura fixa a frase vazava. */
  .popular-label { left: 50%; right: auto; top: -14px; width: max-content; max-width: 92%; height: 28px; padding: 0 14px; display: block; line-height: 28px; text-align: center; transform: translateX(-50%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .03em; font-size: 10px; }
  .plan-heading h3 { font-size: 29px; }
  .plan-heading p { margin-top: 5px; font-size: 14px; }
  .price { margin: 21px 0 17px; }
  .price small { font-size: 22px; }
  .price strong { font-size: 42px; }
  .price span { margin-left: 4px; font-size: 22px; }
  .price-card ul.plan-benefits { padding-top: 17px; gap: 8px; font-size: 15px; }
  .price-card li { gap: 13px; }
  .price-card li > span { width: 38px; height: 38px; padding: 10px; }
  .plan-delta { margin-bottom: 15px; padding: 11px 13px; gap: 13px; font-size: 12px; }
  .plan-delta svg { width: 21px; height: 21px; }
  .price-card ul.plan-benefits-secondary { margin-bottom: 14px; padding-top: 13px; }
  .plan-button { min-height: 47px; font-size: 17px; }
  .pricing-mobile-controls { display: grid; place-items: center; gap: 8px; margin: 20px 0 24px; color: #77718a; }
  .pricing-mobile-controls > div { display: flex; align-items: center; gap: 28px; font-size: 14px; }
  .pricing-mobile-controls > div a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #d9ccf4; border-radius: 50%; color: #171321; background: #f0e9ff; }
  .pricing-mobile-controls > div a svg { width: 18px; height: 18px; }
  .pricing-mobile-controls > div a[aria-disabled] { opacity: .4; }
  .pricing-mobile-controls > p { font-size: 12px; }
  .pricing-mobile-controls .compare-plans { margin-top: 11px; display: flex; align-items: center; gap: 10px; color: #7130df; border-bottom: 1px solid #7130df; font-size: 15px; font-weight: 600; }
  .compare-plans svg { width: 20px; height: 20px; }
  .pricing-all { min-height: 79px; margin: 0 22px; padding: 12px 16px; justify-content: flex-start; flex-wrap: nowrap; gap: 13px; border: 1px solid #e6e0ed; background: #fff; white-space: normal; font-size: 0; }
  .pricing-all > span { width: 44px; height: 44px; padding: 8px; border-radius: 50%; background: #f0e9ff; }
  .pricing-all b { font-size: 14px; }
  .pricing-all b::after { content: "\A Recursos do seu perfil e Ranking."; white-space: pre; color: #77718a; font-size: 12px; font-weight: 400; }
  .pricing-all i { display: none; }
}

/* Ajustes finais: precisam vir depois das composições específicas acima. */
@media (max-width: 900px) {
  html, body.landing-page, .landing-page main { width: 100%; max-width: 100%; overflow-x: clip; }
  .landing-page section { max-width: 100%; }
  .process-section, .features-section, .pricing-section { overflow-x: clip; }
  .process-section .landing-shell { width: min(100% - 40px, 720px); }
  .journey-heading h2 { max-width: 620px; margin-inline: auto; }
  .journey-profiles { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; }
  .journey-profiles::-webkit-scrollbar { display: none; }
  .journey-profiles label { flex: 1 0 auto; }
  .product-preview { width: 100%; overflow: hidden; }
  .preview-main { min-width: 0; overflow: hidden; }
  .preview-main nav, .preview-quadro { max-width: 100%; overscroll-behavior-inline: contain; }
  .connections-lines, .connections-lines-stage { display: none; }
}

@media (min-width: 561px) and (max-width: 900px) {
  .landing-page { --u: calc(100vw * .8 / 390); }
  .landing-header .landing-shell { max-width: 720px; margin-inline: auto; padding-inline: 28px; }
  .hero-copy { max-width: 720px; margin-inline: auto; padding-inline: 38px; }
  .hero h1 { max-width: 620px; font-size: clamp(43px, 7.2vw, 54px); line-height: 1.02; }
  .hero-lead { max-width: 470px; font-size: 18px; line-height: 1.5; }
  .hero-actions .hero-primary { width: 280px; min-height: 50px; font-size: 16px; }
  .hero-visual { height: calc(500 * var(--u)); margin-top: calc(-164 * var(--u)); }
  .hero-scales { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
  .journey-heading h2 { font-size: clamp(36px, 5.5vw, 45px); }
  .journey-profiles { justify-content: center; }
  .journey-profiles label { min-width: 170px; padding-inline: 18px; font-size: 16px; }
  .product-preview { margin-top: 68px; border-radius: 20px; }
  .preview-main { padding-inline: 24px; }
  .preview-main article { grid-template-columns: 38px minmax(0, 1fr) 180px 14px; padding-inline: 16px; gap: 12px; }
  .preview-main article > span.preview-video { display: block; }
  .features-section { min-height: 820px; }
  .connections-heading h2 { font-size: clamp(46px, 7vw, 60px); }
  .connections-paths { width: min(680px, 96%); }
  .connection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .connection-grid h3 { font-size: 22px; }
  .connection-grid p { font-size: 15px; }
}

@media (max-width: 560px) {
  .landing-page { --u: 1px; }
  .landing-header { height: 64px; }
  .landing-header .landing-shell { padding-inline: 20px; }
  .landing-header .brand-mark { width: 30px; height: 30px; }
  .landing-header .landing-brand { font-size: 23px; }
  .mobile-menu { margin-right: -8px; }
  .hero-copy { padding: 14px 20px 0; }
  .hero h1 { max-width: 100%; font-size: clamp(30px, 9.5vw, 38px); line-height: 1.03; letter-spacing: -.05em; overflow-wrap: normal; }
  .hero h1 strong { display: inline; }
  .hero-lead { max-width: 315px; margin-top: 17px; font-size: clamp(14px, 4.2vw, 16px); line-height: 1.45; }
  .hero-actions .hero-primary { width: min(100%, 272px); min-height: 44px; font-size: 14px; }
  .hero-visual { height: 430px; margin-top: -118px; }
  .hero-scales { width: 690px; left: -294px; }
  .hero-commerce { width: 382px; left: 42px; top: 144px; }
  .hero-chameleon { width: 265px; left: -65px; top: 157px; }
  .process-section { padding: 44px 0 12px; }
  .process-section .landing-shell { width: calc(100% - 40px); }
  .journey-heading { width: 100%; text-align: left; }
  .journey-heading h2 { max-width: 100%; margin: 0; font-size: clamp(28px, 8.8vw, 35px); line-height: 1.06; }
  .journey-profiles { width: calc(100vw - 40px); margin-top: 24px; }
  .journey-profiles label { min-width: 0; flex: 1 0 33.333%; gap: 5px; padding-inline: 3px; font-size: clamp(11px, 3.5vw, 14px); }
  .journey-profiles label svg { width: 17px; height: 17px; }
  .journey-copy { max-width: 300px; margin-inline: auto; font-size: 12px; }
  .product-preview { margin-top: 48px; border-radius: 14px; }
  .preview-main { width: 100%; padding: 0 12px 14px; }
  .preview-main nav { left: 0; right: 0; width: 100%; padding-inline: 2px; }
  .preview-main header { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 12px 0; }
  .preview-main h3 { font-size: clamp(20px, 7vw, 25px); white-space: normal; }
  .preview-main header > div { width: 100%; min-width: 0; justify-content: flex-start; flex-wrap: wrap; }
  .preview-main header button { min-height: 36px; padding: 7px 11px; }
  .preview-main h4 { font-size: clamp(14px, 4.7vw, 18px); line-height: 1.35; }
  .preview-main article { grid-template-columns: 30px minmax(0, 1fr) 8px; width: 100%; padding: 10px 8px; }
  .preview-main article p { width: 100%; overflow-wrap: anywhere; }
  .preview-main article > span.preview-video { width: 100%; height: auto; aspect-ratio: 2 / 1; }
  .preview-loja, .preview-projeto, .preview-quadro { max-width: 100%; }
  .preview-quadro { width: 100%; overflow-x: auto; }
  .features-section { padding: 48px 0 40px; }
  .features-section .landing-shell { padding-inline: 20px; }
  .connections-heading h2 { max-width: 100%; font-size: clamp(31px, 10vw, 39px); line-height: 1.02; }
  .connections-heading h2 span { display: block; }
  .connections-heading h3 { max-width: 310px; font-size: 14px; }
  .connections-paths { height: 210px; margin-top: 20px; }
  .connections-spiral { width: 112px; height: 112px; }
  .connection-action small { font-size: 9px; }
  .connection-action strong { font-size: clamp(21px, 7.3vw, 27px); }
  .connection-action-create, .connection-action-sell { top: 70px; }
  .connection-action-edit { bottom: 1px; }
  .connections-character { width: 185px; right: -105px; top: 210px; }
  .connections-statement { font-size: clamp(25px, 8vw, 30px); }
  .pricing-heading { padding-inline: 20px; }
  .pricing-heading h2 { font-size: clamp(29px, 9vw, 34px); }
  .pricing-grid { padding-inline: 20px; scroll-padding-inline: 20px; }
  .price-card { flex-basis: min(306px, calc(100vw - 40px)); }
  .pricing-all { margin-inline: 20px; }
}

@media (max-width: 380px) {
  .hero h1 { font-size: 30px; }
  .hero-visual { height: 405px; }
  .journey-heading h2 { font-size: 28px; }
  .journey-profiles label { font-size: 11px; }
  .journey-profiles label svg { width: 15px; height: 15px; }
  .connection-grid { margin-top: 18px; grid-template-columns: 1fr; }
  .connection-grid article { min-height: 0; padding: 14px 8px; }
  .connection-grid article + article { border-left: 0; border-top: 1px solid #b993ff; }
  .connection-grid h3 { font-size: 18px; }
  .connection-grid p { font-size: 13px; }
  .connections-character { width: 155px; right: -92px; top: 225px; }
}

/* Ajustes de responsividade (tablet e celular), por último para vencer as camadas acima. */
/* A duração do vídeo fica no canto da miniatura: ao cortar a imagem, o canto direito tem de sobrar. */
.preview-video img { object-position: right bottom; }

/* O camaleão apontava por cima de "VENDE" (celular) e de "Editores" (tablet). Agora ele entra no fluxo,
   colado ao fim da linha dos três caminhos (a margem negativa o sobe para o vão ao lado de "EDITA"),
   e por isso não depende da altura do título nem de quebras de linha. A razão da altura é 1227/1320. */
@media (max-width: 900px) {
  .connections-character { position: relative; display: block; right: auto; top: auto; margin-left: auto; opacity: 1; }
}

/* As conexões pertencem somente à composição ampla. Inclui tablets de 1024 px
   e vence explicitamente qualquer regra proporcional declarada acima. */
@media (max-width: 1100px) {
  .features-section .connections-lines,
  .features-section .connections-lines-stage { display: none !important; }
}
@media (min-width: 561px) and (max-width: 900px) {
  .connections-character { width: 150px; margin-top: -140px; margin-right: -26px; }
}
@media (max-width: 560px) {
  .connections-character { width: 100px; margin-top: -93px; margin-right: -34px; }
}

/* Entre celulares largos e o primeiro breakpoint de tablet, a composição não
   pode criar uma faixa vazia à direita. O mascote continua no fluxo e aparece
   inteiro, sem alterar ou recortar a arte original. */
@media (min-width: 425px) and (max-width: 900px) {
  html:has(body.landing-page),
  body.landing-page,
  .landing-page main { width: 100%; max-width: 100%; overflow-x: clip; }
  .features-section { width: 100%; background-color: #f8f6ff; }
  .features-section .landing-shell { width: 100%; max-width: 100%; }
}
@media (min-width: 425px) and (max-width: 560px) {
  /* A composição móvel foi desenhada em 390 px. Acima disso, manter --u em
     1px deixava o quadro com 390 px e revelava uma faixa vazia à direita. */
  .landing-page { --u: calc(100vw / 390); }
  /* A faixa de escamas do hero tem largura fixa em px (690 px, até 396 px da tela); acompanha --u para chegar à borda. */
  .hero-scales { width: calc(690 * var(--u)); left: calc(-294 * var(--u)); }
  .connections-character {
    width: 145px;
    max-width: calc(100% - 24px);
    margin-top: -72px;
    margin-right: 0;
  }
}
@media (min-width: 561px) and (max-width: 900px) {
  .connections-character { width: 180px; margin-top: -105px; margin-right: 0; }
}

/* Tablet: as tabelas da demonstração cabem na moldura, sem barra de rolagem nem colunas cortadas. */
@media (min-width: 561px) and (max-width: 900px) {
  .preview-quadro { padding: 14px; }
  .preview-tabela { min-width: 0; font-size: 16px; }
  .preview-tabela th { height: 44px; padding: 0 12px; font-size: 15px; }
  .preview-tabela td { height: 78px; padding: 0 12px; }
  .preview-miniatura img { width: 72px; height: 54px; }
  .preview-quadro-fila th { height: 48px; padding-inline: 14px; font-size: 15px; }
  .preview-quadro-fila td { height: 84px; padding-inline: 14px; }
  .preview-quadro-fila .preview-miniatura img { width: 64px; height: 56px; }
  .preview-etapa { padding: 5px 12px 5px 10px; font-size: 14px; }
  .preview-acoes { gap: 8px; }
  .preview-acoes i { width: 36px; height: 36px; font-size: 20px; }
  .preview-acoes svg { width: 18px; height: 18px; }
}
@media (min-width: 561px) and (max-width: 900px) {
  /* Loja: o texto não pode ser espremido pelo botão; o botão desce para a linha de baixo quando falta espaço. */
  .preview-loja > div, .preview-projeto > div { flex: 1 1 220px; min-width: 220px; }
  /* Sem a coluna de ações (lojista) e sem o "⋮" (editor) as tabelas cabem inteiras. */
  .journey-panel-lojista .preview-tabela th:last-child, .journey-panel-lojista .preview-tabela td:last-child,
  .journey-panel-editor .preview-tabela td.preview-mais { display: none; }
  .journey-panel-editor .preview-tabela td { white-space: normal; }
  .journey-panel-editor .preview-tabela td:nth-child(4), .journey-panel-editor .preview-tabela td:nth-child(5) { white-space: nowrap; }
}
@media (min-width: 561px) and (max-width: 700px) {
  .journey-panel-editor .preview-tabela th:nth-child(2), .journey-panel-editor .preview-tabela td:nth-child(3) { display: none; }
}

/* O "Entrar" do menu só existe no celular; do tablet (561px) para cima sai. */
@media (min-width: 561px) {
  .mobile-menu .mobile-login-link { display: none; }
}

/* Tablet largo e notebook pequeno (901–1100 px): a demonstração mantém a moldura de desktop,
   mas com a lateral, o vídeo e as letras menores para o texto do roteiro não virar uma coluna estreita. */
@media (min-width: 901px) and (max-width: 1100px) {
  .product-preview { grid-template-columns: 210px minmax(0, 1fr); min-height: 0; }
  .product-preview aside { padding: 28px 14px; }
  .product-preview aside > b { margin: 0 10px 20px; font-size: 26px; }
  .product-preview aside span { padding: 10px 12px; gap: 12px; font-size: 16px; }
  .product-preview aside svg { width: 22px; height: 22px; }
  .preview-main { padding-inline: 22px; }
  .preview-main nav { left: 210px; gap: 26px; font-size: 15px; white-space: nowrap; overflow: hidden; }
  .preview-main header { height: 84px; }
  .preview-main h3 { font-size: 28px; }
  .preview-main h4 { padding: 14px 18px; font-size: 19px; }
  .preview-main article { grid-template-columns: 34px minmax(0, 1fr) 190px 12px; padding: 12px 16px; gap: 12px; }
  .preview-main article b { font-size: 17px; }
  .preview-main article p { font-size: 14px; }
  .preview-video { height: 120px; }
  /* Fila, busca, botões e projeto do Editor: no tamanho de desktop a tabela passava da moldura. */
  .preview-main header { gap: 12px; }
  .preview-main header h3 { white-space: nowrap; }
  .preview-main header > div { min-width: 0; flex: 1; justify-content: flex-end; }
  .preview-busca { width: auto; min-width: 0; flex: 1 1 auto; max-width: 320px; min-height: 44px; padding: 0 14px; gap: 10px; font-size: 14px; overflow: hidden; white-space: nowrap; }
  .preview-busca svg { width: 20px; height: 20px; flex: none; }
  .preview-botao { min-height: 44px; padding: 0 18px; font-size: 15px; }
  .preview-tabela { font-size: 15px; }
  .preview-quadro-fila th { height: 48px; padding-inline: 14px; font-size: 14px; }
  .preview-quadro-fila td { height: 84px; padding-inline: 14px; }
  .preview-quadro-fila .preview-miniatura img { width: 64px; height: 56px; }
  .preview-etapa { padding: 5px 12px 5px 10px; font-size: 14px; }
  .preview-tabela td.preview-mais { width: 24px; font-size: 22px; }
  .preview-projeto { padding: 16px 20px 16px 16px; gap: 18px; min-height: 0; }
  .preview-projeto > img { width: 120px; height: 113px; }
  .preview-projeto b { font-size: 19px; }
  .preview-projeto > div > span, .preview-projeto p { font-size: 15px; }
}

/* O mascote da demonstração fica na margem, fora do cartão. Em telas em que a margem é menor
   que ele, ele era cortado pela borda: agora encolhe para caber e some quando não sobra espaço. */
@media (min-width: 901px) {
  .preview-mascot { --largura: clamp(0px, calc((100vw - 100%) / 2 - 40px), 200px); width: var(--largura); right: calc(-1 * var(--largura) - 25px); }
}
@media (min-width: 901px) and (max-width: 1359px) {
  .product-preview .preview-mascot { display: none; }
}

/* Celular e tablet: a margem ao lado do cartão não comporta o mascote, que ficava cortado e escondido
   atrás do botão. Ele passa a ficar inteiro, pendurado no canto de baixo do cartão. */
@media (max-width: 900px) {
  .product-preview { overflow: visible; }
  .product-preview .preview-mascot { --largura: clamp(48px, 9vw, 58px); width: var(--largura); right: 8px; bottom: calc(12px - var(--largura) * 1.316); }
}

/* Planos em 901–1250 px: os três cartões têm recheio e texto largos demais para a coluna e empurravam
   a página para a direita (barra branca e rolagem lateral). As colunas passam a poder encolher. */
@media (min-width: 901px) and (max-width: 1250px) {
  .pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .price-card { min-width: 0; min-height: 0; padding: 32px 22px 24px; }
  .pricing-family-editor .pricing-grid { grid-template-columns: repeat(2, calc((100% - 2 * 14px) / 3)); }
  /* As três abas "Sou Influencer / Lojista / Editor" têm largura mínima de 304 px cada: acima de 900 px, mas perto disso, passavam da tela. */
  .journey-profiles { max-width: 100%; }
  .journey-profiles label { min-width: 0; flex: 1 1 0; padding-inline: 12px; gap: 10px; font-size: 19px; white-space: nowrap; }
}