/*
 * Camada de direção de arte da página oficial.
 *
 * O conteúdo e os componentes continuam no template. Este arquivo só muda a
 * forma como a história é apresentada quando o navegador suporta movimento.
 * Sem JavaScript ou com `prefers-reduced-motion`, tudo permanece no fluxo.
 */
:root {
  --ap-motion-noite: #07142f;
  --ap-motion-meia-noite: #101f4d;
  --ap-motion-azul: #1668e3;
  --ap-motion-ciano: #56c8ff;
  --ap-motion-branco: #f7fbff;
  --ap-motion-curva: cubic-bezier(.16, 1, .3, 1);
  --ap-motion-raio: 24px;
  --ap-motion-nav: 150px;
}

/* Textos nunca podem virar parte do recorte cenográfico. O espaço extra
   preserva acentos e descendentes mesmo com a entrelinha compacta dos títulos. */
.ap h1,
.ap h2,
.ap h3 {
  max-width: 100%;
  overflow: visible;
  overflow-wrap: break-word;
  padding-block: .08em .12em;
  text-wrap: balance;
  word-break: normal;
}

.ap p,
.ap li,
.ap summary,
.ap a,
.ap span {
  overflow-wrap: break-word;
  word-break: normal;
}

.ap .ap-recurso-texto,
.ap .ap-recurso-visual,
.ap .ap-dentro,
.ap .ap-heroi-texto { min-width: 0; }

/* A navegação vira uma peça flutuante, sem abandonar as âncoras existentes. */
.ap .ap-navegacao {
  top: 62px;
  width: min(1040px, calc(100% - 32px));
  margin: 14px auto -76px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  pointer-events: none;
}

.ap .ap-navegacao-dentro {
  width: 100%;
  padding: 8px 10px 8px 20px;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 84%, transparent);
  box-shadow: 0 18px 55px rgba(7, 20, 47, .13);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  pointer-events: auto;
}

.ap .ap-navegacao-cta {
  box-shadow: 0 5px 0 #0a47aa, 0 13px 28px rgba(22, 104, 227, .26);
  transition: transform .28s var(--ap-motion-curva), box-shadow .28s ease;
}

.ap .ap-navegacao-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 0 #0a47aa, 0 18px 35px rgba(22, 104, 227, .34);
}

/* ── Abertura ───────────────────────────────────────────────────── */
.ap .ap-hero-motion {
  position: relative;
  min-height: 100svh;
  padding-top: 150px;
  overflow: hidden;
  isolation: isolate;
}

.ap .ap-hero-motion::before {
  position: absolute;
  z-index: -3;
  inset: 0;
  background:
    radial-gradient(circle at 66% 42%, rgba(86, 200, 255, .16), transparent 29%),
    radial-gradient(circle at 23% 15%, rgba(22, 104, 227, .2), transparent 30%);
  content: "";
}

.ap .ap-hero-motion__marca {
  position: absolute;
  z-index: -2;
  right: -4vw;
  bottom: -5vh;
  left: -4vw;
  color: transparent;
  font-size: clamp(120px, 21vw, 390px);
  font-weight: 800;
  letter-spacing: -.105em;
  line-height: .72;
  text-align: center;
  white-space: nowrap;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .105);
  transform-origin: center bottom;
  pointer-events: none;
}

.ap .ap-hero-motion__orb {
  position: absolute;
  z-index: -1;
  width: clamp(230px, 30vw, 520px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .13), rgba(22, 104, 227, .025) 52%, transparent 72%);
  pointer-events: none;
}

.ap .ap-hero-motion__orb::before,
.ap .ap-hero-motion__orb::after {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: inherit;
  content: "";
}

.ap .ap-hero-motion__orb::before { inset: 12%; }
.ap .ap-hero-motion__orb::after { inset: 26%; }
.ap .ap-hero-motion__orb--um { top: 8%; right: -11%; }
.ap .ap-hero-motion__orb--dois { bottom: -23%; left: -13%; transform: scale(.72); }

.ap .ap-hero-motion__titulo {
  max-width: 15ch;
  font-size: clamp(48px, 5.25vw, 78px);
  letter-spacing: -.058em;
  line-height: .98;
}

.ap .ap-hero-motion__titulo .word,
.ap .ap-hero-motion__titulo .char {
  display: inline-block;
}

.ap .ap-hero-motion__titulo .word {
  overflow: visible;
  padding-block: .12em;
  margin-block: -.12em;
  vertical-align: top;
}

.ap .ap-hero-motion__titulo .char { line-height: inherit; }
.ap .ap-hero-motion__titulo .ap-destaque .char {
  background: linear-gradient(90deg, #8fb8ff, #c9dcff);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

.ap .ap-hero-motion__rolagem {
  position: absolute;
  bottom: 28px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, .62);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.ap .ap-hero-motion__rolagem i {
  position: relative;
  display: block;
  width: 42px;
  height: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, .22);
}

.ap .ap-hero-motion__rolagem i::after {
  position: absolute;
  inset: 0;
  background: #fff;
  content: "";
  animation: ap-motion-scroll 1.8s ease-in-out infinite;
  transform: scaleX(.25);
  transform-origin: left;
}

.ap .ap-cabine {
  transform-style: preserve-3d;
  will-change: transform;
}

.ap .ap-cabine::before {
  position: absolute;
  z-index: -1;
  inset: 14% -10% -12% 16%;
  border-radius: 50%;
  background: rgba(22, 104, 227, .34);
  filter: blur(60px);
  content: "";
}

@keyframes ap-motion-scroll {
  0%, 100% { transform: scaleX(.2); transform-origin: left; }
  50% { transform: scaleX(1); transform-origin: left; }
  51% { transform-origin: right; }
}

/* As cenas fixas já têm espaçamento próprio dentro do palco. O padding de
   `.ap-secao` somava mais 84 px acima e abaixo e empurrava parte da cena para
   fora da viewport. Removemos apenas essa duplicação quando o pin está ativo. */
.ap.ap-motion-desktop .ap-story--dores,
.ap.ap-motion-desktop .ap-story--recursos,
.ap.ap-motion-desktop .ap-story--passos { padding-block: 0; }

/* ── A pergunta que abre a dor ────────────────────────────────────── */
.ap .ap-provocacao {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #030813;
  color: var(--ap-motion-branco);
  isolation: isolate;
}

.ap .ap-provocacao::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(22, 104, 227, .16), transparent 42%),
    linear-gradient(90deg, #030813 0%, transparent 19%, transparent 81%, #030813 100%);
  content: "";
}

.ap .ap-provocacao::after {
  position: absolute;
  z-index: -3;
  right: -18%;
  bottom: -44%;
  left: -18%;
  height: 92%;
  background:
    linear-gradient(rgba(22, 104, 227, .11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 104, 227, .11) 1px, transparent 1px);
  background-size: 11vw 82px;
  content: "";
  mask-image: linear-gradient(to bottom, transparent, #000 32%, #000);
  opacity: .5;
  transform: perspective(520px) rotateX(63deg);
  transform-origin: center bottom;
}

.ap .ap-provocacao__palco {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 100svh;
  place-items: center;
}

.ap .ap-provocacao__sinal {
  position: absolute;
  top: 14%;
  left: 50%;
  margin: 0;
  color: rgba(247, 251, 255, .44);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  transform: translateX(-50%);
  white-space: nowrap;
}

.ap .ap-provocacao__frase {
  width: min(92vw, 1540px);
  max-width: 92vw;
  margin: 0;
  color: var(--ap-motion-branco);
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(54px, 5.9vw, 106px);
  font-weight: 500;
  letter-spacing: -.07em;
  line-height: .96;
  text-align: center;
  white-space: normal;
  will-change: transform, opacity;
}

.ap .ap-provocacao__frase .ap-provocacao__resposta {
  display: block;
  margin-top: .08em;
  color: var(--ap-motion-ciano);
}
.ap .ap-provocacao__frase .word { display: inline-block; will-change: transform, opacity; }

/* ── História das dores ─────────────────────────────────────────── */
.ap.ap-motion-desktop .ap-story--dores {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.ap.ap-motion-desktop .ap-story--dores .ap-dentro {
  display: grid;
  min-height: calc(100vh - var(--ap-motion-nav));
  grid-template: auto auto 1fr / minmax(280px, .78fr) minmax(430px, 1.22fr);
  grid-template-areas:
    "sobre dores"
    "titulo dores"
    "sub dores";
  align-items: center;
  column-gap: clamp(56px, 8vw, 130px);
  padding-block: 70px;
}

.ap.ap-motion-desktop .ap-story--dores .ap-sobretitulo { grid-area: sobre; align-self: end; }
.ap.ap-motion-desktop .ap-story--dores h2 { grid-area: titulo; align-self: start; font-size: clamp(42px, 4.7vw, 68px); }
.ap.ap-motion-desktop .ap-story--dores .ap-sub { grid-area: sub; align-self: start; }
.ap.ap-motion-desktop .ap-story--dores .ap-dores {
  position: relative;
  grid-area: dores;
  width: 100%;
  min-height: 440px;
}

.ap.ap-motion-desktop .ap-story--dores .ap-dor {
  position: absolute;
  inset: 0;
  display: flex;
  min-height: 390px;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(32px, 4vw, 60px);
  border-radius: var(--ap-motion-raio);
  box-shadow: 0 35px 90px rgba(7, 20, 47, .14);
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}

.ap.ap-motion-desktop .ap-story--dores .ap-dor::after {
  position: absolute;
  top: 26px;
  right: 30px;
  color: color-mix(in srgb, var(--muted) 28%, transparent);
  content: attr(data-ap-passo);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
}

.ap.ap-motion-desktop .ap-story--dores .ap-dor-icone { width: 58px; height: 58px; }
.ap.ap-motion-desktop .ap-story--dores .ap-dor h3 { max-width: 18ch; font-size: clamp(27px, 3vw, 42px); line-height: 1.04; letter-spacing: -.04em; }
.ap.ap-motion-desktop .ap-story--dores .ap-dor p { max-width: 49ch; margin-top: 14px; font-size: 16px; }

/* ── Recursos em um palco fixo ──────────────────────────────────── */
.ap .ap-story__progresso { display: none; }

.ap.ap-motion-desktop .ap-story--recursos {
  position: relative;
  overflow: hidden;
}

.ap.ap-motion-desktop .ap-story--recursos .ap-dentro {
  position: relative;
  display: grid;
  height: calc(100vh - var(--ap-motion-nav));
  grid-template-rows: auto auto auto minmax(0, 1fr);
  align-content: center;
  padding-block: 44px 34px;
}

.ap.ap-motion-desktop .ap-story--recursos .ap-sub { margin-bottom: 22px; }
.ap.ap-motion-desktop .ap-story__palco { position: relative; min-height: 0; }

.ap.ap-motion-desktop .ap-story--recursos .ap-recurso {
  position: absolute;
  inset: 0;
  gap: clamp(36px, 5vw, 76px);
  padding: 0 34px 0 0;
  border: 0;
  will-change: transform, opacity;
}

.ap.ap-motion-desktop .ap-story--recursos .ap-recurso-texto,
.ap.ap-motion-desktop .ap-story--recursos .ap-recurso-visual { will-change: transform, opacity; }

.ap.ap-motion-desktop .ap-story--recursos .ap-recurso h3 {
  font-size: clamp(25px, 2.55vw, 38px);
  letter-spacing: -.04em;
}

.ap.ap-motion-desktop .ap-story--recursos .ap-lista { gap: 7px; }
.ap.ap-motion-desktop .ap-story--recursos .ap-lista li { font-size: 13.5px; }

.ap.ap-motion-desktop .ap-story--recursos .ap-janela {
  box-shadow: 0 30px 80px rgba(16, 42, 87, .16);
  transform: perspective(1100px) rotateY(-2deg) rotateX(1deg);
}

.ap.ap-motion-desktop .ap-story__progresso {
  position: absolute;
  z-index: 8;
  top: 50%;
  right: 1px;
  display: grid;
  gap: 9px;
  transform: translateY(-50%);
}

.ap.ap-motion-desktop .ap-story__progresso span {
  display: block;
  width: 5px;
  height: 24px;
  border-radius: 999px;
  background: var(--border);
  transform-origin: center top;
  transition: height .35s var(--ap-motion-curva), background .35s ease;
}

.ap.ap-motion-desktop .ap-story__progresso span.ativo { height: 48px; background: var(--azul); }

/* ── Passagem cinematográfica da marca ─────────────────────────── */
.ap .ap-cinema {
  position: relative;
  height: 62vh;
  min-height: 420px;
  overflow: clip;
  background: var(--ap-motion-noite);
}

.ap .ap-cinema__fixo {
  position: relative;
  display: grid;
  height: 100%;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 50%, rgba(22, 104, 227, .24), transparent 32%),
    var(--ap-motion-noite);
}

/* O percurso do cinema vem DAQUI, nao de um ScrollTrigger: 240vh de
   altura davam 1.4 telas de rolagem para um zoom so. 170vh dao 0.7
   telas (-50%), e o zoom continua inteiro — ele e preso ao progresso
   da secao, entao andar menos rolagem apenas o faz andar mais rapido. */
.ap.ap-motion-desktop .ap-cinema { height: 170vh; }
.ap.ap-motion-desktop .ap-cinema__fixo { position: sticky; top: 0; height: 100vh; }

.ap .ap-cinema__marca {
  position: relative;
  z-index: 2;
  width: clamp(130px, 14vw, 220px);
  height: auto;
  filter: drop-shadow(0 25px 50px rgba(0, 0, 0, .25));
  will-change: transform, opacity;
}

.ap .ap-cinema__aneis,
.ap .ap-cinema__aneis i { position: absolute; border: 1px solid rgba(255, 255, 255, .1); border-radius: 50%; }
.ap .ap-cinema__aneis { width: min(72vw, 820px); aspect-ratio: 1; }
.ap .ap-cinema__aneis i:nth-child(1) { inset: 12%; }
.ap .ap-cinema__aneis i:nth-child(2) { inset: 27%; }
.ap .ap-cinema__aneis i:nth-child(3) { inset: 41%; background: rgba(22, 104, 227, .1); }

.ap .ap-cinema__claridade {
  position: absolute;
  z-index: 4;
  inset: 0;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

/* ── Passos conduzidos horizontalmente ─────────────────────────── */
.ap.ap-motion-desktop .ap-story--passos { position: relative; overflow: hidden; }

.ap.ap-motion-desktop .ap-story--passos .ap-dentro {
  display: flex;
  min-height: calc(100vh - var(--ap-motion-nav));
  flex-direction: column;
  justify-content: center;
  padding-block: 54px;
}

.ap.ap-motion-desktop .ap-story--passos h2 { font-size: clamp(44px, 5vw, 72px); }
.ap.ap-motion-desktop .ap-story--passos .ap-passos-inicio {
  display: flex;
  width: max-content;
  gap: 18px;
  margin-top: 38px;
  will-change: transform;
}

.ap.ap-motion-desktop .ap-story--passos .ap-passos-inicio li {
  display: flex;
  width: min(560px, 62vw);
  min-height: 360px;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: flex-end;
  padding: 38px;
  border-radius: var(--ap-motion-raio);
  box-shadow: 0 30px 70px rgba(16, 42, 87, .11);
}

.ap.ap-motion-desktop .ap-story--passos .ap-num { width: 48px; height: 48px; }
.ap.ap-motion-desktop .ap-story--passos h3 { font-size: clamp(28px, 3vw, 42px); letter-spacing: -.04em; }
.ap.ap-motion-desktop .ap-story--passos p { max-width: 46ch; margin-top: 12px; font-size: 16px; }

/* ── Entradas, cartões e encerramento ───────────────────────────── */
.ap .ap-dor,
.ap .ap-controle article,
.ap .ap-grupo,
.ap .ap-plano,
.ap .ap-faq details {
  transition: transform .35s var(--ap-motion-curva), box-shadow .35s ease, border-color .35s ease;
}

.ap .ap-controle article:hover,
.ap .ap-grupo:hover,
.ap .ap-plano:hover,
.ap .ap-faq details:hover {
  border-color: color-mix(in srgb, var(--azul) 42%, var(--border));
  box-shadow: 0 22px 50px rgba(16, 42, 87, .1);
  transform: translateY(-5px);
}

.ap .ap-btn,
.ap .ap-btn-contorno { position: relative; overflow: hidden; isolation: isolate; }

.ap .ap-btn::after,
.ap .ap-btn-contorno::after {
  position: absolute;
  z-index: -1;
  top: -110%;
  left: -42%;
  width: 30%;
  height: 320%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .42), transparent);
  content: "";
  transform: rotate(22deg);
  transition: left .72s var(--ap-motion-curva);
}

.ap .ap-btn:hover::after,
.ap .ap-btn-contorno:hover::after { left: 116%; }

.ap .ap-fechamento-motion { position: relative; min-height: 78vh; display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.ap .ap-fechamento-motion .ap-dentro { position: relative; z-index: 2; }
.ap .ap-fechamento-motion__halo {
  position: absolute;
  z-index: 0;
  width: min(72vw, 920px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(86, 200, 255, .19), transparent 63%);
  pointer-events: none;
}

.ap .ap-fechamento-motion__halo::before,
.ap .ap-fechamento-motion__halo::after { position: absolute; border: 1px solid rgba(255, 255, 255, .09); border-radius: 50%; content: ""; }
.ap .ap-fechamento-motion__halo::before { inset: 17%; }
.ap .ap-fechamento-motion__halo::after { inset: 35%; }

/* Em telas largas e baixas (como 1366/1920 × 768/900), o palco continua
   preso e sequencial, mas usa um enquadramento mais compacto. Assim o recurso
   inteiro — texto, lista e demonstração — cabe na área visível da cena. */
@media (min-width: 901px) and (max-height: 900px) {
  .ap .ap-hero-motion {
    min-height: calc(100svh - 56px);
    padding-top: 116px;
    padding-bottom: 42px;
  }

  .ap .ap-hero-motion .ap-heroi-dentro { gap: 34px; }
  .ap .ap-hero-motion__titulo {
    max-width: 16.5ch;
    margin-block: 12px 10px;
    font-size: clamp(44px, 4.35vw, 64px);
    line-height: .94;
  }

  .ap .ap-hero-motion .ap-heroi-chamada {
    font-size: 16px;
    line-height: 1.46;
  }

  .ap .ap-hero-motion .ap-acoes { margin-top: 16px; }
  .ap .ap-hero-motion .ap-garantias { margin-top: 13px; }
  .ap .ap-hero-motion .ap-cabine { scale: .9; }

  .ap.ap-motion-desktop .ap-story--dores .ap-dentro {
    grid-template-columns: minmax(280px, .82fr) minmax(420px, 1.18fr);
    column-gap: clamp(42px, 6vw, 90px);
    padding-block: 28px;
  }

  .ap.ap-motion-desktop .ap-story--dores h2 {
    max-width: 13ch;
    margin-block: 4px 8px;
    font-size: clamp(42px, 3.6vw, 54px);
    line-height: .98;
  }

  .ap.ap-motion-desktop .ap-story--dores .ap-sub {
    max-width: 38ch;
    margin: 0;
    font-size: 14px;
    line-height: 1.42;
  }

  .ap.ap-motion-desktop .ap-story--dores .ap-dores { min-height: 400px; }
  .ap.ap-motion-desktop .ap-story--dores .ap-dor {
    min-height: 360px;
    padding: 38px;
  }

  .ap.ap-motion-desktop .ap-story--dores .ap-dor h3 {
    font-size: clamp(26px, 2.4vw, 36px);
  }

  .ap.ap-motion-desktop .ap-story--dores .ap-dor p {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.48;
  }

  .ap.ap-motion-desktop .ap-story--passos .ap-dentro { padding-block: 22px; }
  .ap.ap-motion-desktop .ap-story--passos h2 {
    margin-block: 3px 6px;
    font-size: clamp(42px, 3.7vw, 56px);
    line-height: 1;
  }

  .ap.ap-motion-desktop .ap-story--passos .ap-passos-inicio {
    gap: 16px;
    margin-top: 18px;
  }

  .ap.ap-motion-desktop .ap-story--passos .ap-passos-inicio li {
    width: min(520px, 56vw);
    height: 330px;
    min-height: 0;
    padding: 28px;
  }

  .ap.ap-motion-desktop .ap-story--passos .ap-num {
    width: 42px;
    height: 42px;
    margin-bottom: 10px;
  }

  .ap.ap-motion-desktop .ap-story--passos h3 {
    margin-bottom: 5px;
    font-size: clamp(27px, 2.5vw, 34px);
    line-height: 1.05;
  }

  .ap.ap-motion-desktop .ap-story--passos p {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.45;
  }

  .ap.ap-motion-desktop .ap-story--recursos .ap-dentro {
    grid-template: auto auto minmax(0, 1fr) / minmax(0, .92fr) minmax(320px, 1.08fr);
    column-gap: clamp(28px, 4vw, 64px);
    padding-block: 14px 18px;
  }

  .ap.ap-motion-desktop .ap-story--recursos .ap-dentro > .ap-sobretitulo {
    grid-row: 1;
    grid-column: 1;
    align-self: end;
  }

  .ap.ap-motion-desktop .ap-story--recursos .ap-dentro > h2 {
    grid-row: 2;
    grid-column: 1;
    align-self: start;
    margin-block: 2px 8px;
    font-size: clamp(28px, 2.45vw, 38px);
    line-height: 1.04;
  }

  .ap.ap-motion-desktop .ap-story--recursos .ap-dentro > .ap-sub {
    grid-row: 1 / 3;
    grid-column: 2;
    align-self: center;
    max-width: 54ch;
    margin: 0;
    font-size: 14px;
    line-height: 1.42;
  }

  .ap.ap-motion-desktop .ap-story--recursos .ap-story__palco {
    grid-row: 3;
    grid-column: 1 / -1;
    margin-top: 6px;
  }

  .ap.ap-motion-desktop .ap-story--recursos .ap-recurso {
    gap: clamp(28px, 3.5vw, 52px);
    padding-right: 28px;
  }

  .ap.ap-motion-desktop .ap-story--recursos .ap-etiqueta {
    padding: 4px 10px;
    font-size: 11px;
  }

  .ap.ap-motion-desktop .ap-story--recursos .ap-recurso h3 {
    max-width: 20ch;
    margin: 8px 0 9px;
    font-size: clamp(27px, 2.7vw, 35px);
    line-height: 1.03;
  }

  .ap.ap-motion-desktop .ap-story--recursos .ap-recurso-texto > p {
    margin-bottom: 10px;
    font-size: 13.5px;
    line-height: 1.43;
  }

  .ap.ap-motion-desktop .ap-story--recursos .ap-lista { gap: 4px; }
  .ap.ap-motion-desktop .ap-story--recursos .ap-lista li {
    padding-left: 27px;
    font-size: 12.5px;
    line-height: 1.36;
  }

  .ap.ap-motion-desktop .ap-story--recursos .ap-lista li::before {
    width: 19px;
    height: 19px;
    font-size: 11px;
  }

  .ap.ap-motion-desktop .ap-story--recursos .ap-recurso-visual { scale: .86; }
}

/* O tema escuro mantém a direção de arte, mas usa as superfícies do próprio tema. */
html[data-tema="escuro"] .ap .ap-navegacao-dentro { background: color-mix(in srgb, var(--card) 86%, transparent); }
html[data-tema="escuro"] .ap.ap-motion-desktop .ap-story--dores .ap-dor { box-shadow: 0 35px 90px rgba(0, 0, 0, .34); }
html[data-tema="escuro"] .ap.ap-motion-desktop .ap-story--recursos .ap-janela { box-shadow: 0 30px 80px rgba(0, 0, 0, .38); }

@media (max-width: 900px) {
  :root { --ap-motion-nav: 82px; }
  .ap .ap-navegacao { top: 58px; width: calc(100% - 20px); margin-top: 10px; }
  .ap .ap-navegacao-dentro { padding-inline: 8px; }
  .ap .ap-hero-motion { min-height: auto; padding-top: 128px; }
  .ap .ap-hero-motion__marca { bottom: 4%; font-size: 31vw; }
  .ap .ap-hero-motion__titulo { font-size: clamp(42px, 11vw, 65px); }
  .ap .ap-hero-motion__rolagem { display: none; }
  .ap .ap-provocacao { min-height: 76svh; }
  .ap .ap-provocacao__palco { min-height: 76svh; padding: 120px 24px 82px; }
  .ap .ap-provocacao__sinal { top: 17%; }
  .ap .ap-provocacao__frase {
    width: auto;
    max-width: 12ch;
    font-size: clamp(42px, 10.5vw, 70px);
    line-height: .98;
    white-space: normal;
  }
  .ap .ap-story__palco { display: contents; }
  .ap .ap-cinema { height: 52vh; min-height: 350px; }
  .ap .ap-cinema__aneis { width: 104vw; }
  .ap .ap-fechamento-motion { min-height: 640px; }
}

@media (max-width: 520px) {
  .ap .ap-navegacao { display: none; }
  .ap .ap-hero-motion { padding-top: 64px; }
  .ap .ap-hero-motion__titulo { font-size: clamp(39px, 12vw, 54px); }
  .ap .ap-hero-motion__orb--um { right: -38%; }
  .ap .ap-hero-motion__orb--dois { left: -42%; }
  .ap .ap-provocacao__sinal {
    width: calc(100% - 40px);
    text-align: center;
    white-space: normal;
  }
  .ap .ap-fechamento-motion__halo { width: 150vw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .ap .ap-hero-motion__rolagem i::after { animation: none; }
  .ap .ap-hero-motion__orb,
  .ap .ap-hero-motion__marca,
  .ap .ap-cabine,
  .ap .ap-cinema__marca,
  .ap .ap-fechamento-motion__halo { transform: none !important; }
  .ap .ap-cinema { height: 48vh; }
  .ap .ap-provocacao__frase { transform: none !important; }
}

/* ══ AS TRÊS DEMONSTRAÇÕES (05/10/2026) ═══════════════════════════════
   Criador de Anúncios, Central de Promoções e Julia, montadas em HTML e
   CSS — não são prints. Cada etapa é um estado que o scroll avança, e o
   que aparece na tela é sempre uma peça do produto.

   TUDO FLUIDO, NADA CORTADO: `clamp()` na tipografia e nos espaços,
   `minmax(0, 1fr)` nos grids, e `min-height` só onde é mesmo preciso.
   Nenhum `overflow: hidden` em recipiente de conteúdo — só nos vidros,
   que são decoração.

   O AMARELO DA MARCA (#ffe600) entra SÓ como brilho de vidro, nunca como
   estado. É a regra do DESIGN.md: "Amarelo é exclusivamente marca, nunca
   estado" — num painel financeiro ele é lido como alerta e colidiria com
   o `--atencao`. Por isso o aviso de margem no limite usa `--atencao`, e
   não amarelo, mesmo tendo sido pedido assim. */

.ap .ap-demo__ganhos b { color: var(--text); font-weight: 700; }
.ap .ap-demo__acoes { margin-top: clamp(16px, 2vw, 24px); }
.ap .ap-demo__garantias { margin-top: clamp(10px, 1.4vw, 16px); color: var(--muted); }
.ap .ap-demo__garantias li::before { color: var(--ok-escuro); }

/* ── O VIDRO LÍQUIDO ────────────────────────────────────────────────
   Fica NAS LATERAIS, atrás de tudo, e nunca recebe o ponteiro. É
   acabamento: dá profundidade e sai de cena no celular. */
.ap .ap-recurso-visual { position: relative; isolation: isolate; }
.ap .ap-vidro {
  position: absolute; z-index: -1; pointer-events: none;
  inline-size: clamp(190px, 26vw, 330px); block-size: clamp(190px, 26vw, 330px);
  border-radius: 50%; filter: blur(42px); opacity: .5;
  background: radial-gradient(circle at 32% 32%, rgba(22, 104, 227, .85), rgba(86, 200, 255, .32) 55%, transparent 72%);
  transition: background .45s var(--ap-motion-curva), opacity .45s var(--ap-motion-curva);
}
.ap .ap-vidro--um { inset-block-start: -8%; inset-inline-start: -16%; }
.ap .ap-vidro--dois {
  inset-block-end: -10%; inset-inline-end: -14%;
  background: radial-gradient(circle at 60% 40%, rgba(255, 230, 0, .42), rgba(255, 230, 0, .12) 52%, transparent 70%);
  opacity: .38;
}
.ap .ap-vidro--onda { border-radius: 46% 54% 58% 42% / 48% 44% 56% 52%; filter: blur(38px); }

/* O brilho acompanha o veredito da margem — e o alerta é `--atencao`,
   nunca o amarelo da marca. */
.ap .ap-margem[data-ap-veredito="atencao"] ~ .ap-vidro--um,
.ap .ap-recurso-visual:has(.ap-margem__estado[data-ap-veredito="atencao"]) .ap-vidro--um {
  background: radial-gradient(circle at 32% 32%, rgba(217, 119, 6, .72), rgba(217, 119, 6, .22) 55%, transparent 72%);
}
.ap .ap-recurso-visual:has(.ap-margem__estado[data-ap-veredito="bloqueada"]) .ap-vidro--um {
  background: radial-gradient(circle at 32% 32%, rgba(217, 45, 32, .6), rgba(217, 45, 32, .18) 55%, transparent 72%);
}

/* ── CENA 1: O CRIADOR ──────────────────────────────────────────────
   As etapas são atributos no elemento raiz; o CSS só reage. Assim o
   estado inicial — sem JavaScript — já mostra o anúncio COMPLETO, que é
   o que precisa ser lido. A animação só subtrai e devolve. */
.ap .ap-criador-demo__corpo {
  display: grid; gap: clamp(8px, 1.1vw, 13px);
  padding: clamp(12px, 1.6vw, 18px);
}
.ap .ap-criador-demo__estado {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: clamp(11.5px, 1.05vw, 13px); font-weight: 700; color: var(--azul-forte);
}
.ap .ap-criador-demo__estado i {
  inline-size: 8px; block-size: 8px; border-radius: 50%; flex: none;
  background: var(--azul); box-shadow: 0 0 0 4px rgba(22, 104, 227, .16);
}
.ap .ap-criador-demo__fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ap .ap-criador-demo__fotos i {
  display: block; aspect-ratio: 1; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg);
  background-image: linear-gradient(135deg, rgba(22, 104, 227, .14), rgba(86, 200, 255, .1));
}
.ap .ap-criador-demo__completude { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.ap .ap-criador-demo__rotulo { font-size: clamp(11px, 1vw, 12.5px); color: var(--muted); }
.ap .ap-criador-demo__completude b { font-size: clamp(12px, 1.1vw, 14px); color: var(--azul-forte); font-variant-numeric: tabular-nums; }
.ap .ap-criador-demo__barra {
  grid-column: 1 / -1; display: block; block-size: 7px; border-radius: 999px;
  background: var(--linha); overflow: hidden;
}
.ap .ap-criador-demo__barra i {
  display: block; block-size: 100%; inline-size: 25%; border-radius: 999px;
  background: linear-gradient(90deg, var(--azul), #56c8ff);
  transition: inline-size .5s var(--ap-motion-curva);
}
.ap .ap-criador-demo__publicar { margin: 2px 0 0; }
.ap .ap-criador-demo__publicar span {
  display: block; text-align: center; padding: clamp(9px, 1.1vw, 12px);
  border-radius: 12px; background: var(--azul); color: #fff;
  font-size: clamp(12.5px, 1.1vw, 14.5px); font-weight: 700;
  transition: background .3s var(--ap-motion-curva);
}
.ap .ap-criador-demo[data-ap-etapa="publicado"] .ap-criador-demo__publicar span {
  background: var(--ok-escuro);
}

/* O painel que vem depois do anúncio. */
.ap .ap-painel-demo {
  margin-block-start: clamp(12px, 1.6vw, 18px);
  padding: clamp(12px, 1.5vw, 17px);
  border: 1px solid var(--border); border-radius: var(--ap-motion-raio, 18px);
  background: var(--card); display: grid; gap: clamp(9px, 1.2vw, 13px);
}
.ap .ap-painel-demo__barras { display: flex; align-items: flex-end; gap: 6px; block-size: clamp(40px, 5vw, 58px); }
.ap .ap-painel-demo__barras i {
  flex: 1; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, var(--azul), rgba(22, 104, 227, .45));
  block-size: 30%; transform-origin: 50% 100%;
}
.ap .ap-painel-demo__barras i:nth-child(1) { block-size: 34%; }
.ap .ap-painel-demo__barras i:nth-child(2) { block-size: 48%; }
.ap .ap-painel-demo__barras i:nth-child(3) { block-size: 41%; }
.ap .ap-painel-demo__barras i:nth-child(4) { block-size: 62%; }
.ap .ap-painel-demo__barras i:nth-child(5) { block-size: 55%; }
.ap .ap-painel-demo__barras i:nth-child(6) { block-size: 78%; }
.ap .ap-painel-demo__barras i:nth-child(7) { block-size: 100%; }
.ap .ap-painel-demo__numeros {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 112px), 1fr));
  gap: clamp(8px, 1.1vw, 12px); margin: 0;
}
.ap .ap-painel-demo__numeros dt { font-size: clamp(10.5px, .95vw, 12px); color: var(--muted); }
.ap .ap-painel-demo__numeros dd {
  margin: 2px 0 0; font-size: clamp(15px, 1.5vw, 19px); font-weight: 800;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.ap .ap-painel-demo__sinc {
  display: flex; align-items: center; gap: 7px; margin: 0;
  font-size: clamp(11px, 1vw, 12.5px); font-weight: 700; color: var(--ok-escuro);
}
.ap .ap-painel-demo__sinc i {
  inline-size: 7px; block-size: 7px; border-radius: 50%; flex: none; background: var(--ok);
}

/* ── CENA 2: A MARGEM ───────────────────────────────────────────────
   O controle é um `input type=range` de verdade: mouse, dedo e teclado
   já funcionam, e o leitor de tela anuncia o valor sem código nosso. */
.ap .ap-margem__corpo { display: grid; gap: clamp(10px, 1.3vw, 15px); padding: clamp(12px, 1.6vw, 18px); }
.ap .ap-margem__produto { margin: 0; font-weight: 700; font-size: clamp(13px, 1.2vw, 15px); }
.ap .ap-margem__controle { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; }
.ap .ap-margem__controle label {
  grid-column: 1 / -1; font-size: clamp(12px, 1.1vw, 14px); font-weight: 700; color: var(--text);
}
.ap .ap-margem__faixa { inline-size: 100%; accent-color: var(--azul); block-size: 26px; cursor: pointer; }
.ap .ap-margem__faixa:focus-visible { outline: 3px solid #8fb8ff; outline-offset: 3px; border-radius: 6px; }
.ap .ap-margem__alvo {
  font-size: clamp(15px, 1.5vw, 19px); font-weight: 800; color: var(--azul-forte);
  font-variant-numeric: tabular-nums; min-inline-size: 3.2ch; text-align: end;
}
.ap .ap-margem__contas { display: grid; gap: 7px; margin: 0; }
.ap .ap-margem__contas > div {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: baseline;
  font-size: clamp(12px, 1.1vw, 13.5px);
}
.ap .ap-margem__contas dt { color: var(--muted); min-inline-size: 0; }
.ap .ap-margem__contas dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.ap .ap-margem__destaque dd { color: var(--azul-forte); }
.ap .ap-margem__lucro {
  padding-block-start: 7px; border-block-start: 1px solid var(--border);
}
.ap .ap-margem__lucro dt { font-weight: 700; color: var(--text); }
.ap .ap-margem__lucro dd { color: var(--ok-escuro); font-size: clamp(14px, 1.3vw, 16px); }
.ap .ap-margem__estado {
  display: flex; align-items: center; gap: 8px; margin: 0;
  padding: clamp(8px, 1vw, 11px) clamp(10px, 1.2vw, 13px); border-radius: 12px;
  font-size: clamp(12px, 1.1vw, 13.5px); font-weight: 700; line-height: 1.4;
  background: var(--ok-suave); color: var(--ok-escuro);
  transition: background .3s var(--ap-motion-curva), color .3s var(--ap-motion-curva);
}
.ap .ap-margem__estado i { inline-size: 9px; block-size: 9px; border-radius: 50%; flex: none; background: currentColor; }
.ap .ap-margem__estado[data-ap-veredito="atencao"] { background: #fef3e2; color: #9a5b06; }
.ap .ap-margem__estado[data-ap-veredito="bloqueada"] { background: #fef2f2; color: #a21b12; }
.ap .ap-margem__analise { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; margin: 0; }
.ap .ap-margem__barra {
  grid-column: 1 / -1; display: block; block-size: 6px; border-radius: 999px;
  background: var(--linha); overflow: hidden;
}
.ap .ap-margem__barra i {
  display: block; block-size: 100%; inline-size: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--azul), #56c8ff);
  transition: inline-size .45s var(--ap-motion-curva);
}
.ap .ap-margem__analise b { font-size: clamp(10.5px, .95vw, 12px); color: var(--muted); font-weight: 600; }
.ap .ap-margem__publicar { margin: 0; }
.ap .ap-margem__publicar span {
  display: block; text-align: center; padding: clamp(9px, 1.1vw, 12px);
  border-radius: 12px; background: var(--azul); color: #fff;
  font-size: clamp(12.5px, 1.1vw, 14.5px); font-weight: 700;
  transition: background .3s var(--ap-motion-curva);
}
.ap .ap-margem[data-ap-etapa="publicada"] .ap-margem__publicar span { background: var(--ok-escuro); }

/* ── CENA 3: A JULIA ────────────────────────────────────────────────
   Sem cara de robô de site: é a tela de Perguntas do painel, com os
   mesmos balões que o Criador já usa. */
.ap .ap-julia-demo__corpo { display: grid; gap: clamp(9px, 1.2vw, 13px); padding: clamp(12px, 1.6vw, 18px); }
.ap .ap-julia-demo__estado {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: clamp(11.5px, 1.05vw, 13px); font-weight: 700; color: var(--azul-forte);
}
.ap .ap-julia-demo__estado i {
  inline-size: 8px; block-size: 8px; border-radius: 50%; flex: none;
  background: var(--azul); box-shadow: 0 0 0 4px rgba(22, 104, 227, .16);
}
.ap .ap-julia-demo__provas {
  list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 8px;
}
.ap .ap-julia-demo__provas li {
  font-size: clamp(10.5px, .95vw, 12px); font-weight: 600; color: var(--azul-forte);
  background: var(--azul-suave); padding: 5px 10px; border-radius: 999px;
}

/* ── CELULAR: nada preso, nada cortado, vidro de fora ───────────────
   O pedido cita 1920, 1440, 1024, 768, 400 e 360. Abaixo de 901px o
   sistema de cenas do painel já não liga; aqui só garantimos que nada
   estoure a largura e que a decoração saia do caminho. */
@media (max-width: 900px) {
  .ap .ap-vidro { display: none; }
  .ap .ap-demo__acoes { display: grid; gap: 10px; }
  .ap .ap-demo__acoes .ap-btn,
  .ap .ap-demo__acoes .ap-btn-contorno { inline-size: 100%; text-align: center; }
  .ap .ap-painel-demo__numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .ap .ap-margem__controle { grid-template-columns: 1fr; }
  .ap .ap-margem__alvo { text-align: start; }
  .ap .ap-criador-demo__fotos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── MOVIMENTO REDUZIDO: tudo visível, nada em transição ────────────
   Sem JavaScript ou com movimento reduzido, as demonstrações já nascem
   no estado FINAL — anúncio publicado, contas feitas, conversa inteira.
   O que se perde é a encenação, nunca a informação. */
@media (prefers-reduced-motion: reduce) {
  .ap .ap-vidro { display: none; }
  .ap .ap-criador-demo__barra i,
  .ap .ap-margem__barra i,
  .ap .ap-margem__estado,
  .ap .ap-criador-demo__publicar span,
  .ap .ap-margem__publicar span { transition: none !important; }
}

/* ══ O CRIADOR DE ANÚNCIOS, EM TRÊS PAINÉIS (05/10/2026) ═══════════════
   Composição conduzida por uma referência de layout: cabeçalho em duas
   colunas, três painéis altos e numerados, o último CLARO para marcar a
   conclusão, e formas angulares nos cantos.

   O QUE FOI ADAPTADO, e é o que impede isto de virar template: a faixa
   de destaque das formas é o AMARELO DA MARCA (#ffe600), não o vermelho
   da referência; os botões são CÁPSULA, como os 446 do painel desde
   22/09/2026; e os raios saem da escala do sistema (8/12/16/999), não de
   valores inventados por componente. Escondendo o logotipo, as cápsulas,
   o azul #1668e3 e o amarelo ainda dizem de quem é a página.

   As cores desta seção são próprias e CRAVADAS de propósito: é uma faixa
   escura dentro de uma página clara, e precisa ficar escura nos dois
   temas — herdar --card aqui faria o painel claro sumir no tema escuro. */
.ap .ap-cc {
  --ap-cc-fundo:#0a1430;
  --ap-cc-painel:#111c3d;
  --ap-cc-painel-2:#16224a;
  --ap-cc-claro:#eef4ff;
  --ap-cc-borda:rgba(255,255,255,.1);
  --ap-cc-texto:#ffffff;
  --ap-cc-apagado:#a9bbdd;   /* 8,4:1 sobre o fundo — passa de sobra */
  --ap-cc-vivo:#4d8df0;
  --ap-cc-amarelo:#ffe600;
  position:relative; isolation:isolate;
  background:var(--ap-cc-fundo); color:var(--ap-cc-texto);
  padding-block:clamp(26px, min(4vw, 4.6vh), 72px);
}

/* ── Cabeçalho em duas colunas ───────────────────────────────────── */
.ap .ap-cc-topo {
  display:grid; gap:clamp(20px, 3vw, 44px);
  grid-template-columns:1fr; align-items:start;
  margin-block-end:clamp(14px, min(2.6vw, 3vh), 40px);
}
@media (min-width:900px) {
  .ap .ap-cc-topo { grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); }
  .ap .ap-cc-apoio { padding-block-start:clamp(10px, min(2.6vw, 3vh), 40px); }
}
.ap .ap-cc-sobre {
  display:block; font-size:clamp(10.5px, 1.05vw, 12px); font-weight:800;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ap-cc-vivo);
  margin-block-end:clamp(6px, min(1.2vw, 1.4vh), 15px);
}
/* O texto fica em caixa normal na marcação e sobe para versalete AQUI:
   assim o leitor de tela não soletra, e a tela mostra como na referência. */
.ap .ap-cc-titulo {
  margin:0; text-transform:uppercase; font-weight:800;
  font-size:clamp(26px, min(4.3vw, 5.4vh), 48px); line-height:1.04; letter-spacing:-.025em;
  color:var(--ap-cc-texto); text-wrap:balance;
}
.ap .ap-cc-titulo em { font-style:normal; color:var(--ap-cc-vivo); }
.ap .ap-cc-apoio {
  margin:0; color:var(--ap-cc-apagado); max-width:46ch;
  font-size:clamp(14px, min(1.2vw, 1.8vh), 16px); line-height:1.58;
}

/* ── O botão primário. CÁPSULA, como o painel inteiro ────────────── */
.ap .ap-cc-botao {
  display:inline-flex; align-items:center; gap:10px;
  margin-block-start:clamp(14px, min(2.2vw, 2.6vh), 28px);
  min-block-size:clamp(48px, 5.6vh, 54px); padding:0 clamp(20px, 2vw, 28px);
  border-radius:var(--raio-pill, 999px);
  background:#1668e3; color:#fff; text-decoration:none;
  font-size:clamp(14.5px, 1.2vw, 16px); font-weight:700;
  box-shadow:0 2px 6px rgba(5,18,52,.45);
  transition:background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.ap .ap-cc-botao:hover { background:#2a7af0; transform:translateY(-3px);
                         box-shadow:0 8px 18px rgba(5,18,52,.5); }
.ap .ap-cc-botao:active { transform:translateY(-1px); }
.ap .ap-cc-botao:focus-visible { outline:3px solid var(--ap-cc-amarelo); outline-offset:3px; }
.ap .ap-cc-seta {
  display:inline-grid; place-items:center; inline-size:24px; block-size:24px;
  border-radius:var(--raio-sm, 6px); background:rgba(255,255,255,.17);
  transition:transform .16s ease;
}
.ap .ap-cc-botao:hover .ap-cc-seta { transform:translate(2px, -2px); }

/* ── Os três painéis ─────────────────────────────────────────────── */
.ap .ap-cc-paineis {
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(12px, min(1.6vw, 1.9vh), 22px); grid-template-columns:1fr;
}
@media (min-width:660px) and (max-width:999px) {
  /* Tablet: 2 em cima, o da conclusão ocupando a linha de baixo inteira. */
  .ap .ap-cc-paineis { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .ap .ap-cc-painel:last-child { grid-column:1 / -1; }
}
@media (min-width:1000px) {
  .ap .ap-cc-paineis { grid-template-columns:repeat(3, minmax(0,1fr)); }
}

.ap .ap-cc-painel {
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column;
  min-inline-size:0;
  padding:clamp(15px, min(2.2vw, 2.6vh), 28px) clamp(13px, 1.7vw, 24px) clamp(12px, min(1.8vw, 2vh), 22px);
  border:1px solid var(--ap-cc-borda); border-radius:var(--raio-xl, 16px);
  background:var(--ap-cc-painel);
  box-shadow:0 10px 30px rgba(3,10,30,.45);
}
.ap .ap-cc-painel[data-ap-painel="2"] { background:var(--ap-cc-painel-2); }
.ap .ap-cc-painel--claro {
  background:var(--ap-cc-claro); color:#101828; border-color:#cfdcf7;
}

/* As formas angulares dos cantos. Decoração: ficam ATRÁS de tudo e nunca
   pegam o ponteiro. A faixa fina é o amarelo da marca. */
.ap .ap-cc-formas {
  position:absolute; z-index:-1; pointer-events:none;
  inline-size:clamp(78px, 9vw, 120px); block-size:100%;
}
.ap .ap-cc-formas--esq { inset-block-start:0; inset-inline-start:0; }
.ap .ap-cc-formas--dir { inset-block-start:0; inset-inline-end:0; }
.ap .ap-cc-formas--pe  { inset-block-start:0; inset-inline-end:0; }

.ap .ap-cc-num {
  margin:0 0 clamp(6px, min(1vw, 1.2vh), 13px); text-align:center;
  font-size:clamp(10px, .95vw, 11.5px); font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ap-cc-apagado);
}
.ap .ap-cc-painel--claro .ap-cc-num { color:#4a5a7a; }
.ap .ap-cc-painel-titulo {
  margin:0 0 clamp(6px, min(.9vw, 1.1vh), 12px); text-align:center; text-wrap:balance;
  font-size:clamp(17px, min(1.75vw, 2.5vh), 23px); line-height:1.16; font-weight:800;
  letter-spacing:-.02em; color:inherit;
}
.ap .ap-cc-painel-texto {
  margin:0 0 clamp(11px, min(1.7vw, 2vh), 22px); text-align:center;
  font-size:clamp(12px, min(1.02vw, 1.5vh), 13.8px); line-height:1.5;
  color:var(--ap-cc-apagado);
}
.ap .ap-cc-painel--claro .ap-cc-painel-texto { color:#49597a; }

/* ── A "tela" do produto dentro de cada painel ───────────────────── */
.ap .ap-cc-tela {
  margin-block-start:auto; border-radius:var(--raio-lg, 12px);
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.045);
  overflow:hidden;
}
.ap .ap-cc-painel--claro .ap-cc-tela { border-color:#d3dff6; background:#fff; }
.ap .ap-cc-tela-barra {
  display:flex; align-items:center; gap:5px;
  padding:8px 11px; border-block-end:1px solid rgba(255,255,255,.1);
  font-size:11px; font-weight:700; color:var(--ap-cc-apagado);
}
.ap .ap-cc-painel--claro .ap-cc-tela-barra { border-color:#e6edfa; color:#5a6b8c; }
.ap .ap-cc-tela-barra i {
  inline-size:7px; block-size:7px; border-radius:50%;
  background:rgba(255,255,255,.22); display:block; flex:none;
}
.ap .ap-cc-painel--claro .ap-cc-tela-barra i { background:#d3dff6; }
.ap .ap-cc-tela-barra span { margin-inline-start:5px; }

.ap .ap-cc-campos, .ap .ap-cc-resumo { margin:0; padding:11px 13px 0; }
.ap .ap-cc-campos > div, .ap .ap-cc-resumo > div {
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding-block:clamp(3px, .55vh, 6px); border-block-end:1px solid rgba(255,255,255,.07);
}
.ap .ap-cc-painel--claro .ap-cc-resumo > div { border-color:#eef2fa; }
.ap .ap-cc-campos dt, .ap .ap-cc-resumo dt {
  font-size:11.5px; font-weight:600; color:var(--ap-cc-apagado); flex:none;
}
.ap .ap-cc-painel--claro .ap-cc-resumo dt { color:#64738f; }
.ap .ap-cc-campos dd, .ap .ap-cc-resumo dd {
  margin:0; font-size:12.5px; font-weight:700; text-align:end;
  overflow-wrap:anywhere; min-inline-size:0;
}

.ap .ap-cc-categoria {
  margin:10px 13px 0; padding:9px 11px; border-radius:var(--raio-md, 8px);
  background:rgba(77,141,240,.16); border:1px solid rgba(77,141,240,.3);
}
.ap .ap-cc-categoria span {
  display:block; font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ap-cc-vivo); margin-block-end:3px;
}
.ap .ap-cc-categoria b { font-size:12.5px; font-weight:700; }

.ap .ap-cc-estados { list-style:none; margin:11px 13px 0; padding:0;
                     display:grid; gap:5px; }
.ap .ap-cc-estados li {
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--ap-cc-apagado);
  opacity:.34; transition:opacity .25s ease, color .25s ease;
}
.ap .ap-cc-estados li::before {
  content:""; inline-size:14px; block-size:14px; border-radius:50%; flex:none;
  border:1.5px solid currentColor;
}
/* Etapa cumprida: visto e cor de confirmação. O verde vem do sistema. */
.ap .ap-cc-estados li[data-ap-feito] {
  opacity:1; color:#7fe0aa;
}
.ap .ap-cc-estados li[data-ap-feito]::before {
  border-color:#7fe0aa; background:#7fe0aa;
  box-shadow:inset 0 0 0 1.5px var(--ap-cc-painel);
}
.ap .ap-cc-estados li[data-ap-agora] { opacity:1; color:var(--ap-cc-vivo); }

.ap .ap-cc-titulo-campo { margin:12px 13px 0; }
.ap .ap-cc-titulo-campo label,
.ap .ap-cc-descricao label {
  display:block; font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ap-cc-apagado); margin-block-end:5px;
}
/* A CAIXA RESERVA O TEXTO FINAL, EM QUALQUER LARGURA.
   O pino trava a altura da fileira no instante em que ela e medida, e
   nesse instante o script ja rebobinou para a etapa 1, com os campos
   vazios: a altura travava pequena e o texto era CORTADO ao ser escrito —
   medido, 38 a 57px conforme a tela.
   A "sombra" e o texto inteiro, invisivel, ocupando o lugar; o texto que
   o scroll escreve passa por cima. Nada de altura cravada, que erraria em
   alguma largura, e o layout tambem para de pular entre as etapas. */
.ap .ap-cc-caixa { position:relative; }
.ap .ap-cc-sombra { visibility:hidden; }
.ap .ap-cc-caixa > [data-ap-digitar],
.ap .ap-cc-caixa > [data-ap-descricao] {
  position:absolute; inset:8px 10px;
}
.ap .ap-cc-titulo-campo p, .ap .ap-cc-descricao p {
  margin:0; padding:8px 10px;
  border-radius:var(--raio-md, 8px); border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  font-size:12.5px; line-height:1.45; font-weight:600;
}
.ap .ap-cc-titulo-pe {
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin-block-start:8px; flex-wrap:wrap;
}
.ap .ap-cc-titulo-pe small { font-size:11px; color:var(--ap-cc-apagado); }

.ap .ap-cc-selo {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 11px; border-radius:var(--raio-pill, 999px);
  background:rgba(255,230,0,.14); border:1px solid rgba(255,230,0,.4);
  color:var(--ap-cc-amarelo); font-size:10.5px; font-weight:800;
  letter-spacing:.03em; white-space:nowrap;
  transition:opacity .25s ease;
}
.ap .ap-cc-painel--claro .ap-cc-selo {
  background:#fff6c2; border-color:#e8d24a; color:#6b5600;
}
.ap .ap-cc-selo[hidden] { display:none; }

/* ── Painel 2: galeria, benefícios, descrição ────────────────────── */
.ap .ap-cc-galeria { display:flex; gap:9px; padding:12px 13px 0; }
.ap .ap-cc-foto {
  position:relative; flex:none; inline-size:clamp(68px, min(8vw, 10vh), 100px);
  border-radius:var(--raio-md, 8px); overflow:hidden;
  border:1px solid rgba(255,255,255,.14); background:#fff;
}
.ap .ap-cc-foto svg { display:block; inline-size:100%; block-size:auto; }
/* O SELO SAIU DE CIMA DA FOTO. Medido: ele pede 95px e a foto tem 75 a
   98 conforme a tela — por cima, era cortado em TODAS as larguras. Como
   legenda logo abaixo ele diz a mesma coisa e cabe sempre. */
.ap .ap-cc-principal { flex:none; display:grid; gap:5px; justify-items:center;
                       inline-size:clamp(68px, min(8vw, 10vh), 100px); }
.ap .ap-cc-principal .ap-cc-foto { inline-size:100%; }
.ap .ap-cc-selo--foto {
  padding:2px 6px; font-size:8.5px; letter-spacing:0; text-align:center;
  white-space:normal; line-height:1.25;
}
.ap .ap-cc-miniaturas {
  list-style:none; margin:0; padding:0; flex:1; min-inline-size:0;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px;
  align-content:start;
}
.ap .ap-cc-miniaturas li {
  block-size:clamp(22px, 3.2vh, 30px); border-radius:var(--raio-sm, 6px);
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.07);
  opacity:.2; transition:opacity .3s ease, transform .3s ease;
  transform:scale(.9);
}
.ap .ap-cc-miniaturas li[data-ap-dentro] { opacity:1; transform:none; }

.ap .ap-cc-linha-acao {
  display:flex; align-items:center; justify-content:space-between;
  gap:9px; margin:11px 13px 0; flex-wrap:wrap;
}
.ap .ap-cc-linha-acao small { font-size:11px; color:var(--ap-cc-apagado); }
.ap .ap-cc-linha-acao small b { color:#7fe0aa; }
.ap .ap-cc-botao-falso {
  display:inline-flex; align-items:center; justify-content:center;
  padding:7px 14px; border-radius:var(--raio-pill, 999px);
  border:1px solid rgba(77,141,240,.55); color:var(--ap-cc-vivo);
  font-size:11.5px; font-weight:700; white-space:nowrap;
}
.ap .ap-cc-botao-falso--cheio {
  inline-size:100%; padding:11px 16px; font-size:13px;
  background:#1668e3; border-color:#1668e3; color:#fff;
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}

.ap .ap-cc-beneficios {
  list-style:none; margin:11px 13px 0; padding:0;
  display:flex; flex-wrap:wrap; gap:5px;
}
.ap .ap-cc-beneficios li {
  padding:4px 9px; border-radius:var(--raio-pill, 999px);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  font-size:10px; font-weight:600; color:var(--ap-cc-apagado);
  opacity:.25; transition:opacity .3s ease;
}
.ap .ap-cc-beneficios li[data-ap-dentro] { opacity:1; color:#fff; }

.ap .ap-cc-descricao { margin:11px 13px 0; }

.ap .ap-cc-andamento {
  display:flex; align-items:center; justify-content:space-between; gap:9px;
  margin:12px 13px 6px; font-size:11.5px; font-weight:700;
  color:var(--ap-cc-apagado);
}
.ap .ap-cc-andamento b { font-size:13px; color:#fff; }
.ap .ap-cc-painel--claro .ap-cc-andamento { color:#5a6b8c; }
.ap .ap-cc-painel--claro .ap-cc-andamento b { color:#0b4fc0; font-size:15px; }
.ap .ap-cc-barra {
  margin:0 13px; block-size:6px; border-radius:var(--raio-pill, 999px);
  background:rgba(255,255,255,.12); overflow:hidden;
}
.ap .ap-cc-painel--claro .ap-cc-barra { background:#dce6fa; }
.ap .ap-cc-barra i {
  display:block; block-size:100%; inline-size:0;
  border-radius:inherit; background:linear-gradient(90deg,#1668e3,#4d8df0);
  transition:inline-size .4s cubic-bezier(.22,.61,.36,1);
}
.ap .ap-cc-painel--claro .ap-cc-barra i {
  background:linear-gradient(90deg,#0b4fc0,#1668e3);
}

/* ── Painel 3: publicação ────────────────────────────────────────── */
.ap .ap-cc-publicar { margin:0 13px 9px; }
.ap .ap-cc-publicar[data-ap-publicado="sim"] .ap-cc-botao-falso--cheio {
  background:#0b6b36; border-color:#0b6b36;
}
.ap .ap-cc-sucesso {
  margin:0 13px 9px; padding:8px 11px; border-radius:var(--raio-md, 8px);
  background:#d9f2e5; border:1px solid #a9dfc4; color:#0b6b36;
  font-size:12px; font-weight:800; text-align:center;
  transition:opacity .3s ease;
}
.ap .ap-cc-sucesso[hidden] { display:none; }
.ap .ap-cc-pronto { margin:0 13px; text-align:center; }

.ap .ap-cc-rodape {
  margin:clamp(20px, 2.4vw, 30px) 0 0; text-align:center;
  font-size:clamp(11.5px, 1vw, 12.5px); color:var(--ap-cc-apagado);
}

/* ── O vidro líquido das laterais ────────────────────────────────── */
/* Sem `overflow:clip` na seção — ele cortaria a fileira presa. O vidro
   fica dentro das bordas por posição, não por corte. */
.ap .ap-cc-vidro {
  position:absolute; z-index:-1; pointer-events:none;
  inline-size:clamp(220px, 30vw, 420px); block-size:clamp(220px, 30vw, 420px);
  border-radius:50%; filter:blur(70px); opacity:.5;
}
.ap .ap-cc-vidro--um {
  inset-block-start:2%; inset-inline-start:-4%;
  background:radial-gradient(circle at 36% 34%, rgba(22,104,227,.85), rgba(77,141,240,.26) 56%, transparent 74%);
}
.ap .ap-cc-vidro--dois {
  inset-block-end:4%; inset-inline-end:-3%;
  background:radial-gradient(circle at 60% 42%, rgba(255,230,0,.2), rgba(22,104,227,.3) 50%, transparent 72%);
  opacity:.4;
}
@media (max-width:900px) {
  .ap .ap-cc-vidro { inline-size:200px; block-size:200px; opacity:.3; filter:blur(56px); }
}
@media (prefers-reduced-motion: reduce) {
  .ap .ap-cc-botao, .ap .ap-cc-seta, .ap .ap-cc-barra i { transition:none; }
}

/* ── Qual painel está no ar ──────────────────────────────────────────
   Os três ficam SEMPRE visíveis e legíveis — o realce é só de foco, não
   de revelação. Painel que ainda não chegou continua lido por inteiro:
   quem olha a seção parada entende a sequência do mesmo jeito. */
.ap .ap-cc-painel {
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.ap .ap-cc-painel[data-ap-aceso] {
  border-color:rgba(77,141,240,.65); transform:translateY(-4px);
  box-shadow:0 14px 38px rgba(3,10,30,.55), 0 0 0 1px rgba(77,141,240,.3);
}
.ap .ap-cc-painel--claro[data-ap-aceso] {
  border-color:#1668e3;
  box-shadow:0 14px 38px rgba(3,10,30,.3), 0 0 0 1px rgba(22,104,227,.35);
}
/* A faixa amarela do canto acende junto: é o detalhe da marca marcando
   onde a atenção está, e some sem o script. */
.ap .ap-cc-painel[data-ap-aceso] .ap-cc-formas path:last-child { opacity:1; }

@media (prefers-reduced-motion: reduce) {
  .ap .ap-cc-painel { transition:none; transform:none; }
}

/* ══ A PÁGINA COMERCIAL (05/10/2026) ══════════════════════════════════
   O scroll-telling saiu inteiro: nenhuma seção prende a rolagem, nenhuma
   altura existe só para sustentar animação. O que sobrou de movimento é
   entrada ao aparecer, hover e as três encenações curtas dos painéis.

   As medidas saem da escala do sistema (--e1..--e10, --raio-*, --elev-*),
   não de valores inventados por componente: foi o que mais deixava esta
   página com cara de template. */

/* ── Seta dos botões, uma só família ─────────────────────────────── */
.ap .ap-seta {
  display:inline-grid; place-items:center; inline-size:22px; block-size:22px;
  margin-inline-start:9px; border-radius:var(--raio-sm, 6px);
  background:rgba(255,255,255,.18); transition:transform .16s ease;
}
.ap .ap-btn:hover .ap-seta { transform:translate(2px, -2px); }
@media (prefers-reduced-motion: reduce) { .ap .ap-seta { transition:none; } }

/* ── Hero: o painel compacto ─────────────────────────────────────── */
.ap .ap-placar {
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:var(--e2, 8px); margin:var(--e3, 12px) 0;
}
.ap .ap-placar > div {
  padding:var(--e2, 8px) var(--e3, 12px); border-radius:var(--raio-md, 8px);
  background:#f1f3f5;
}
.ap .ap-placar span { display:block; font-size:11px; color:#667085; font-weight:600; }
.ap .ap-placar b { font-size:18px; color:#101828; letter-spacing:-.02em; }

.ap .ap-grafico { margin:var(--e3, 12px) 0; }
.ap .ap-grafico-topo {
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--e2, 8px); margin:0 0 var(--e2, 8px);
  font-size:11.5px; color:#667085; font-weight:600;
}
.ap .ap-grafico-topo b { font-size:16px; color:#101828; }
.ap .ap-colunas {
  list-style:none; margin:0; padding:0; display:flex; align-items:flex-end;
  gap:6px; block-size:62px;
}
.ap .ap-colunas li {
  flex:1; block-size:var(--h); border-radius:4px 4px 0 0; background:#cfdcf7;
}
.ap .ap-colunas li.viva { background:#1668e3; }

/* ── 2. Dor e transformação ──────────────────────────────────────── */
.ap .ap-dor-grade {
  display:grid; gap:clamp(18px, 2.4vw, 34px); grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:860px) {
  .ap .ap-dor-grade { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
}
.ap .ap-dor-lista { list-style:none; margin:0; padding:0; display:grid; gap:var(--e2, 8px); }
.ap .ap-dor-lista li {
  position:relative; padding:var(--e3, 12px) var(--e4, 16px) var(--e3, 12px) 42px;
  border:1px solid var(--border); border-radius:var(--raio-lg, 12px);
  background:var(--card); color:var(--text); font-size:14.5px; font-weight:600;
}
.ap .ap-dor-lista li::before {
  content:"×"; position:absolute; inset-inline-start:14px; inset-block-start:50%;
  transform:translateY(-50%); inline-size:20px; block-size:20px;
  display:grid; place-items:center; border-radius:50%;
  background:var(--erro-tenue, #fef2f2); color:var(--erro, #d92d20);
  font-size:13px; font-weight:800;
}
.ap .ap-dor-depois {
  padding:clamp(20px, 2.4vw, 30px); border-radius:var(--raio-xl, 16px);
  border:1px solid var(--border); background:var(--azul-tenue, #eff6ff);
  box-shadow:var(--elev-2);
}
.ap .ap-dor-virada {
  margin:0 0 var(--e4, 16px); font-size:clamp(17px, 1.9vw, 21px);
  line-height:1.3; font-weight:800; letter-spacing:-.02em; color:var(--text);
}
.ap .ap-dor-ganhos { list-style:none; margin:0 0 var(--e5, 20px); padding:0; display:grid; gap:var(--e3, 12px); }
.ap .ap-dor-ganhos li { display:grid; gap:2px; }
.ap .ap-dor-ganhos b { font-size:14.5px; color:var(--text); }
.ap .ap-dor-ganhos span { font-size:13.5px; color:var(--muted); line-height:1.5; }

/* ── 6. Objeções ─────────────────────────────────────────────────── */
.ap .ap-objecoes {
  display:grid; gap:var(--e3, 12px); grid-template-columns:1fr;
}
@media (min-width:700px) { .ap .ap-objecoes { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1040px) { .ap .ap-objecoes { grid-template-columns:repeat(3, minmax(0,1fr)); } }
.ap .ap-objecoes article {
  padding:var(--e4, 16px) var(--e5, 20px); border:1px solid var(--border);
  border-radius:var(--raio-lg, 12px); background:var(--card); box-shadow:var(--elev-1);
}
.ap .ap-objecoes h3 { font-size:14.5px; font-weight:800; margin:0 0 6px; color:var(--text); }
.ap .ap-objecoes p { margin:0; font-size:13.5px; line-height:1.55; color:var(--muted); }

/* ── Como começa, em faixa ───────────────────────────────────────── */
.ap .ap-passos-faixa {
  list-style:none; margin:0; padding:0;
  display:grid; gap:var(--e4, 16px); grid-template-columns:1fr;
}
@media (min-width:780px) { .ap .ap-passos-faixa { grid-template-columns:repeat(3, minmax(0,1fr)); } }
.ap .ap-passos-faixa li {
  padding:var(--e5, 20px); border:1px solid var(--border);
  border-radius:var(--raio-lg, 12px); background:var(--bg);
}
.ap .ap-passos-faixa .ap-num {
  display:grid; place-items:center; inline-size:30px; block-size:30px;
  border-radius:50%; background:#1668e3; color:#fff;
  font-weight:800; font-size:14px; margin-block-end:var(--e3, 12px);
}
.ap .ap-passos-faixa h3 { font-size:15.5px; font-weight:800; margin:0 0 5px; }
.ap .ap-passos-faixa p { margin:0; font-size:13.5px; line-height:1.55; color:var(--muted); }

.ap .ap-garantias--centro { justify-content:center; }

/* ── Os painéis de solução, agora sem pino ───────────────────────── */
.ap .ap-cc-faixa-campo { padding:11px 13px 0; }
.ap .ap-cc-faixa-campo label {
  display:block; font-size:11px; font-weight:700; color:var(--ap-cc-apagado);
  margin-block-end:7px;
}
.ap .ap-cc-painel--claro .ap-cc-faixa-campo label { color:#5a6b8c; }
.ap .ap-cc-faixa-linha { display:flex; align-items:center; gap:10px; margin:0; }
.ap .ap-cc-faixa-linha input[type="range"] {
  flex:1; min-inline-size:0; accent-color:#4d8df0; block-size:20px; cursor:pointer;
}
.ap .ap-cc-faixa-linha b { font-size:15px; color:#fff; flex:none; }

.ap .ap-cc-veredito {
  margin:11px 13px 0; padding:8px 11px; border-radius:var(--raio-md, 8px);
  font-size:11.5px; font-weight:700; text-align:center;
  background:rgba(127,224,170,.14); border:1px solid rgba(127,224,170,.4); color:#7fe0aa;
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.ap .ap-cc-veredito[data-ap-veredito="atencao"] {
  background:rgba(240,195,119,.14); border-color:rgba(240,195,119,.45); color:#f0c377;
}
.ap .ap-cc-veredito[data-ap-veredito="bloqueada"] {
  background:rgba(242,109,100,.14); border-color:rgba(242,109,100,.45); color:#ffb4ad;
}
/* O marcador de ilustração usa a classe `ap-ilustracao` SOZINHA, e não
   combinada: há um teste que conta a string exata `class="ap-ilustracao"`
   na página, porque todo dado inventado precisa estar rotulado. Classe
   combinada passaria despercebida por ele. O ajuste de tamanho vem do
   contexto. */
/* O MARCADOR BASE E POSICIONADO EM ABSOLUTO (`right:12px; bottom:-26px`),
   para pendurar no canto de um cartao. Os que escrevi aqui sao legendas
   dentro do fluxo: sem isto os tres caem no MESMO ponto, um por cima do
   outro — visto na tela. O antigo e um <span>, os meus sao <p>, e e por
   ai que o seletor os separa sem precisar de uma segunda classe (que
   quebraria o teste, porque ele conta a string `class="ap-ilustracao"`). */
/* UMA REGRA SO, para todo marcador que eu escrevi. Antes eram duas, por
   contexto, e bastou a laje de Promocoes nao ser `.ap-cc-tela` para o
   rotulo voltar a ficar em absoluto e cair POR CIMA do botao e do
   veredito — visto na tela. O antigo e um <span>, os meus sao <p>. */
.ap p.ap-ilustracao {
  position:static; right:auto; bottom:auto;
  display:block; font-size:10px; letter-spacing:.02em;
  color:var(--ap-cc-apagado, #667085);
}
.ap .ap-laje p.ap-ilustracao { margin:12px 0 0; }
.ap .ap-cabine p.ap-ilustracao {
  margin:6px 0 0; color:#667085; text-align:end;
}

.ap .ap-cc-tela { padding-block-end:13px; }
.ap .ap-cc-tela .ap-ilustracao {
  display:block; margin:10px 13px 0; font-size:10px; line-height:1.4;
  color:var(--ap-cc-apagado); opacity:.8;
}
.ap .ap-cc-painel--claro .ap-cc-tela .ap-ilustracao { color:#64738f; }

/* A conversa da Julia dentro do painel claro. */
.ap .ap-cc-painel--claro .ap-julia {
  display:flex; align-items:center; gap:9px; padding:11px 13px 0;
}
.ap .ap-cc-painel--claro .ap-julia img { border-radius:50%; object-fit:cover; object-position:50% 12%; }
.ap .ap-cc-painel--claro .ap-julia b { display:block; font-size:13px; }
.ap .ap-cc-painel--claro .ap-julia small { font-size:11px; color:#64738f; }
.ap .ap-cc-painel--claro .ap-conversa { display:grid; gap:7px; padding:11px 13px 0; }
.ap .ap-cc-painel--claro .ap-balao {
  padding:8px 11px; border-radius:var(--raio-lg, 12px);
  font-size:12.5px; line-height:1.45; max-width:92%;
}
.ap .ap-cc-painel--claro .ap-balao.comprador {
  background:#eef2f8; color:#344054; justify-self:start;
  border-end-start-radius:4px;
}
.ap .ap-cc-painel--claro .ap-balao.julia {
  background:#1668e3; color:#fff; justify-self:end; border-end-end-radius:4px;
}
.ap .ap-cc-painel--claro .ap-cc-estados li { color:#5a6b8c; }
.ap .ap-cc-painel--claro .ap-cc-estados li[data-ap-feito] { color:#0b6b36; }
.ap .ap-cc-painel--claro .ap-cc-estados li[data-ap-feito]::before {
  border-color:#0b6b36; background:#0b6b36; box-shadow:inset 0 0 0 1.5px #fff;
}

/* ══ O PALCO CLARO (05/10/2026) ═══════════════════════════════════════
   MEDIDO, e e o que motivou tudo abaixo: seis secoes claras tinham ZERO
   por cento de interface, o maior elemento de cada uma era um contêiner
   de TEXTO, e havia 3.053px de branco puro seguidos. A pagina dizia o
   que o sistema faz; nao mostrava.

   Isto aqui e UMA camada, aplicada com `.ap-palco` — nao um estilo por
   secao. As quatro camadas da composicao, na ordem em que se empilham:

     1. FUNDO     gradiente frio entre branco, cinza e azul lavado, com
                  uma grade tecnica discreta por cima;
     2. CONTRASTE uma massa escura (`.ap-laje`) que da peso sem levar a
                  pagina para o modo escuro;
     3. PRODUTO   a interface do sistema, que e o MAIOR elemento da cena;
     4. PROFUNDIDADE o vidro das laterais, parcialmente fora da tela.

   O amarelo da marca entra uma vez por secao, e sempre no mesmo papel:
   marcar o estado concluido. Nunca como fundo, nunca como enfeite. */

.ap .ap-palco {
  position:relative; isolation:isolate; overflow:clip;
  background:
    radial-gradient(120% 90% at 8% 0%,   rgba(22,104,227,.07), transparent 58%),
    radial-gradient(100% 80% at 100% 100%, rgba(22,104,227,.05), transparent 60%),
    linear-gradient(180deg, #fbfcfe 0%, #f4f7fc 48%, #eef3fa 100%);
}
/* A grade tecnica: linhas de 1px a cada 46px, quase invisiveis, que dao
   a sensacao de planta baixa sem virar textura de fundo de tela. */
.ap .ap-palco::before {
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background-image:
    linear-gradient(to right,  rgba(16,27,61,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16,27,61,.045) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
/* Uma linha arquitetonica no alto, que separa a secao da anterior sem
   precisar de borda cinza. */
.ap .ap-palco::after {
  content:""; position:absolute; inset-block-start:0; inset-inline:0; block-size:1px;
  background:linear-gradient(90deg, transparent, rgba(22,104,227,.28), transparent);
  z-index:-1; pointer-events:none;
}

/* ── Formas geométricas cortadas nas laterais ────────────────────── */
.ap .ap-forma {
  position:absolute; z-index:-1; pointer-events:none;
  inline-size:clamp(90px, 13vw, 190px); block-size:auto;
  color:#101b3d;   /* as formas herdam a cor por `currentColor` */
}
.ap .ap-forma--esq { inset-block-start:0; inset-inline-start:0; }
.ap .ap-forma--dir { inset-block-end:0; inset-inline-end:0; }
@media (max-width:720px) { .ap .ap-forma { inline-size:68px; opacity:.5; } }

/* ── O vidro, parcialmente fora da tela ──────────────────────────── */
.ap .ap-palco .ap-bolha {
  position:absolute; z-index:-1; pointer-events:none; border-radius:50%;
  inline-size:clamp(230px, 32vw, 460px); block-size:clamp(230px, 32vw, 460px);
  filter:blur(80px); opacity:.5;
}
.ap .ap-palco .ap-bolha--um {
  inset-block-start:-14%; inset-inline-start:-11%;
  background:radial-gradient(circle at 36% 34%, rgba(22,104,227,.5), rgba(77,141,240,.16) 56%, transparent 74%);
}
.ap .ap-palco .ap-bolha--dois {
  inset-block-end:-16%; inset-inline-end:-9%;
  background:radial-gradient(circle at 60% 42%, rgba(255,230,0,.16), rgba(22,104,227,.22) 48%, transparent 72%);
  opacity:.42;
}
@media (max-width:900px) {
  .ap .ap-palco .ap-bolha { inline-size:210px; block-size:210px; filter:blur(62px); opacity:.3; }
}

/* ── CAMADA 2: a massa escura ────────────────────────────────────── */
.ap .ap-laje {
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:clamp(14px, 1.6vw, 22px);
  background:linear-gradient(158deg, #101b3d 0%, #16224a 54%, #0d1631 100%);
  color:#fff;
  box-shadow:0 30px 70px -28px rgba(10,20,48,.6), 0 2px 0 rgba(255,255,255,.06) inset;
}
/* O recorte diagonal: a mesma linguagem das formas dos paineis. */
.ap .ap-laje::before {
  content:""; position:absolute; z-index:0; pointer-events:none;
  inset-block-start:0; inset-inline-end:0;
  inline-size:34%; block-size:100%;
  background:linear-gradient(118deg, transparent 46%, rgba(22,104,227,.3) 46%, rgba(22,104,227,.12) 62%, transparent 62%);
}
.ap .ap-laje > * { position:relative; z-index:1; }

/* ── Títulos editoriais, alinhados à esquerda ─────────────────────── */
.ap .ap-manchete {
  margin:0 0 clamp(10px, 1.3vw, 16px);
  font-size:clamp(27px, 3.9vw, 48px); line-height:1.06; letter-spacing:-.028em;
  font-weight:800; color:var(--ap-noite, #101b3d);
  max-inline-size:17ch; text-wrap:balance;
}
.ap .ap-manchete em { font-style:normal; color:#1668e3; }
.ap .ap-palco .ap-sobretitulo { color:#1668e3; }
.ap .ap-dorzinha {
  margin:0 0 clamp(14px, 1.8vw, 22px); max-inline-size:52ch;
  font-size:clamp(14.5px, 1.3vw, 17px); line-height:1.58; color:#49597a;
}
/* A pergunta que abre a seção: é a dor do vendedor, e vem antes de tudo. */
.ap .ap-aberta {
  display:inline-block; margin:0 0 clamp(10px, 1.2vw, 15px);
  padding:6px 14px; border-radius:var(--raio-pill, 999px);
  background:#fff; border:1px solid #d7e2f5;
  font-size:clamp(12px, 1.05vw, 13.5px); font-weight:700; color:#1d4fb8;
  box-shadow:0 2px 8px -2px rgba(16,27,61,.12);
}

/* ── A composição padrão: texto à esquerda, produto à direita ─────── */
.ap .ap-cena {
  display:grid; gap:clamp(22px, 3vw, 46px); align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:960px) {
  .ap .ap-cena { grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); }
  /* 55% e pouco para o produto: ele e o maior elemento da cena, que era
     exatamente o que faltava. */
  .ap .ap-cena--espelho { grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr); }
  .ap .ap-cena--espelho .ap-cena-texto { order:2; }
  .ap .ap-cena--espelho .ap-cena-palco { order:1; }
}
.ap .ap-cena-texto { min-inline-size:0; }
.ap .ap-cena-palco { min-inline-size:0; }

/* No celular o TEXTO vem antes do produto, sempre. */
@media (max-width:959px) {
  .ap .ap-cena-texto { order:1; }
  .ap .ap-cena-palco { order:2; }
}

/* ── O CTA integrado à composição, não solto no fim ───────────────── */
.ap .ap-acao-cena {
  display:inline-flex; align-items:center; gap:10px;
  min-block-size:clamp(48px, 5.4vh, 54px); padding:0 clamp(18px, 1.9vw, 26px);
  border-radius:var(--raio-pill, 999px); background:#1668e3; color:#fff;
  text-decoration:none; font-weight:700; font-size:clamp(14px, 1.15vw, 15.5px);
  box-shadow:0 2px 6px rgba(16,27,61,.22);
  transition:background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.ap .ap-acao-cena:hover {
  background:#0b4fc0; transform:translateY(-3px);
  box-shadow:0 10px 20px -6px rgba(16,27,61,.4);
}
.ap .ap-acao-cena:focus-visible { outline:3px solid #ffe600; outline-offset:3px; }
@media (prefers-reduced-motion: reduce) {
  .ap .ap-acao-cena { transition:none; }
  .ap .ap-acao-cena:hover { transform:none; }
}

/* ══ O QUE VIVE DENTRO DAS LAJES ══════════════════════════════════════
   Reaproveita as peças que já existem (`.ap-cc-tela`, `.ap-cc-campos`,
   `.ap-cc-estados`, `.ap-cc-barra`, `.ap-cc-selo`), porque a laje é
   escura como os painéis eram. O que vem abaixo é só o que é novo. */

/* A laje precisa dos tokens de cor dos painéis para as peças herdadas. */
.ap .ap-laje {
  --ap-cc-apagado:#a9bbdd;
  --ap-cc-vivo:#4d8df0;
  --ap-cc-amarelo:#ffe600;
  --ap-cc-painel:#101b3d;
  padding:clamp(16px, 2vw, 26px);
}
.ap .ap-laje .ap-cc-tela {
  margin-block-start:0; background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.13);
}

/* ── A trilha que liga as três etapas do Criador ──────────────────── */
.ap .ap-trilha {
  list-style:none; margin:0 0 clamp(12px, 1.5vw, 18px); padding:0;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px;
  position:relative;
}
/* A linha azul por trás, que é a espinha da composição. */
.ap .ap-trilha::before {
  content:""; position:absolute; inset-inline:12%; inset-block-start:15px;
  block-size:2px; background:linear-gradient(90deg, #1668e3, #4d8df0);
  opacity:.5;
}
.ap .ap-trilha li {
  position:relative; display:grid; justify-items:center; gap:5px;
  font-size:10.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ap-cc-apagado);
}
.ap .ap-trilha li span {
  display:grid; place-items:center; inline-size:30px; block-size:30px;
  border-radius:50%; background:#16224a; border:1.5px solid rgba(255,255,255,.2);
  font-size:11px; color:#fff;
}
.ap .ap-trilha li[data-ap-aceso] { color:#fff; }
.ap .ap-trilha li[data-ap-aceso] span { background:#1668e3; border-color:#4d8df0; }
/* O amarelo da marca entra UMA vez: no estado concluído. */
.ap .ap-trilha li[data-ap-pronto] span {
  background:#0b6b36; border-color:#ffe600;
}

/* ── Promoções: o painel de cálculo ──────────────────────────────── */
.ap .ap-calculo-topo {
  display:grid; gap:2px; margin-block-end:clamp(12px, 1.5vw, 18px);
}
.ap .ap-calculo-topo span {
  font-size:10.5px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ap-cc-vivo);
}
.ap .ap-calculo-topo b { font-size:clamp(15px, 1.5vw, 18px); letter-spacing:-.01em; }

.ap .ap-antes-depois {
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:clamp(8px, 1.2vw, 16px); margin:clamp(12px, 1.6vw, 18px) 0;
  padding:clamp(12px, 1.6vw, 18px); border-radius:var(--raio-lg, 12px);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
}
.ap .ap-antes-depois > div { min-inline-size:0; }
.ap .ap-antes-depois span {
  display:block; font-size:10.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ap-cc-apagado);
}
.ap .ap-antes-depois b {
  display:block; font-size:clamp(19px, 2.3vw, 27px); letter-spacing:-.025em;
  line-height:1.15; margin-block:3px 2px;
}
.ap .ap-antes-depois small { font-size:10.5px; color:var(--ap-cc-apagado); }
.ap .ap-antes-depois__seta { font-size:19px; color:var(--ap-cc-vivo); }
.ap .ap-antes-depois__forte b { color:#7fe0aa; }

.ap .ap-resultado {
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px;
  margin:clamp(12px, 1.5vw, 16px) 0 0;
}
.ap .ap-resultado > div {
  padding:11px 13px; border-radius:var(--raio-md, 8px);
  background:rgba(22,104,227,.16); border:1px solid rgba(77,141,240,.3);
}
.ap .ap-resultado span {
  display:block; font-size:10.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ap-cc-apagado); margin-block-end:3px;
}
.ap .ap-resultado b { font-size:clamp(18px, 2vw, 24px); letter-spacing:-.02em; }

.ap .ap-laje .ap-cc-faixa-campo,
.ap .ap-laje .ap-cc-campos,
.ap .ap-laje .ap-cc-publicar,
.ap .ap-laje .ap-cc-veredito { padding-inline:0; margin-inline:0; }
.ap .ap-laje .ap-cc-campos { padding-block-start:4px; }

/* ── Julia: a moldura de atendimento ─────────────────────────────── */
.ap .ap-atendimento-topo {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding-block-end:clamp(12px, 1.5vw, 16px);
  border-block-end:1px solid rgba(255,255,255,.1);
}
.ap .ap-atendimento-topo img { border-radius:50%; object-fit:cover; object-position:50% 12%; flex:none; }
.ap .ap-atendimento-topo b { display:block; font-size:14.5px; }
.ap .ap-atendimento-topo small { font-size:11.5px; color:var(--ap-cc-apagado); }
.ap .ap-fora {
  margin-inline-start:auto; padding:5px 12px; border-radius:var(--raio-pill, 999px);
  background:rgba(255,230,0,.13); border:1px solid rgba(255,230,0,.4);
  color:#ffe600; font-size:10.5px; font-weight:800; white-space:nowrap;
}
.ap .ap-atendimento-corpo {
  display:grid; gap:clamp(12px, 1.6vw, 18px); grid-template-columns:1fr;
  padding-block:clamp(14px, 1.8vw, 20px);
}
@media (min-width:520px) {
  .ap .ap-atendimento-corpo { grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); }
}
.ap .ap-conversa-larga { display:grid; gap:9px; align-content:start; }
.ap .ap-conversa-larga .ap-balao {
  padding:11px 14px; border-radius:var(--raio-lg, 12px);
  font-size:13px; line-height:1.48; max-inline-size:94%;
}
.ap .ap-conversa-larga .ap-balao.comprador {
  background:rgba(255,255,255,.08); color:#e6eaf2; justify-self:start;
  border-end-start-radius:4px;
}
.ap .ap-conversa-larga .ap-balao.julia {
  background:#1668e3; color:#fff; justify-self:end; border-end-end-radius:4px;
}
.ap .ap-consulta {
  padding:12px 13px; border-radius:var(--raio-md, 8px);
  background:rgba(255,255,255,.045); border:1px dashed rgba(255,255,255,.17);
  align-self:start;
}
.ap .ap-consulta-titulo {
  margin:0 0 7px; font-size:10px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ap-cc-vivo);
}
.ap .ap-consulta ul { list-style:none; margin:0; padding:0; display:grid; gap:5px; }
.ap .ap-consulta li {
  font-size:11.5px; color:var(--ap-cc-apagado); padding-inline-start:14px;
  position:relative; opacity:.45; transition:opacity .3s ease, color .3s ease;
}
.ap .ap-consulta li::before {
  content:""; position:absolute; inset-inline-start:0; inset-block-start:6px;
  inline-size:6px; block-size:6px; border-radius:50%; background:currentColor;
}
.ap .ap-consulta li[data-ap-lido] { opacity:1; color:#7fe0aa; }

.ap .ap-estados-linha {
  display:flex; flex-wrap:wrap; gap:6px 16px; margin:0;
  padding-block-start:clamp(12px, 1.5vw, 16px);
  border-block-start:1px solid rgba(255,255,255,.1);
}

/* ── Dor: os canais soltos virando um painel ─────────────────────── */
.ap .ap-unificacao-antes, .ap .ap-unificacao-depois {
  margin:0; font-size:11px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ap-cc-apagado); text-align:center;
}
.ap .ap-unificacao-depois { color:#fff; letter-spacing:0; text-transform:none;
                            font-size:clamp(13.5px, 1.3vw, 15.5px); line-height:1.4; }
.ap .ap-canais-soltos {
  list-style:none; margin:10px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:7px;
}
.ap .ap-canais-soltos li {
  padding:10px 6px; border-radius:var(--raio-md, 8px); text-align:center;
  background:rgba(255,255,255,.05); border:1px dashed rgba(255,255,255,.2);
  font-size:11px; font-weight:700; color:var(--ap-cc-apagado);
}
.ap .ap-unificacao-seta { margin:12px 0; text-align:center; color:var(--ap-cc-vivo); }
.ap .ap-unificacao .ap-cc-tela { margin-block-start:12px; }

/* ── Ecossistema: a navegação do produto ─────────────────────────── */
.ap .ap-navegacao-produto .ap-cc-tela-barra {
  margin:calc(clamp(16px, 2vw, 26px) * -1) calc(clamp(16px, 2vw, 26px) * -1) 0;
  padding:10px 14px; border-block-end:1px solid rgba(255,255,255,.1);
}
.ap .ap-menu {
  display:grid; gap:clamp(12px, 1.6vw, 20px); grid-template-columns:1fr;
  padding-block-start:clamp(14px, 1.8vw, 20px);
}
@media (min-width:560px) { .ap .ap-menu { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.ap .ap-menu-grupo {
  padding:clamp(12px, 1.4vw, 16px); border-radius:var(--raio-md, 8px);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
}
/* Um grupo aceso, com o amarelo da marca: dá foco sem acender tudo. */
.ap .ap-menu-grupo--aceso {
  background:rgba(22,104,227,.17); border-color:rgba(77,141,240,.4);
  box-shadow:inset 3px 0 0 #ffe600;
}
.ap .ap-menu-grupo h3 {
  margin:0 0 8px; font-size:12px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ap-cc-vivo);
}
.ap .ap-menu-grupo ul { list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.ap .ap-menu-grupo li {
  font-size:12.5px; line-height:1.4; color:#dbe4f5;
  padding-inline-start:13px; position:relative;
}
.ap .ap-menu-grupo li::before {
  content:""; position:absolute; inset-inline-start:0; inset-block-start:7px;
  inline-size:5px; block-size:5px; border-radius:1px; background:rgba(77,141,240,.7);
}

/* ── A faixa preta de promessa ───────────────────────────────────── */
.ap .ap-faixa-forte {
  background:#06080f; color:#fff;
  padding-block:clamp(26px, 3.4vw, 46px);
  border-block:1px solid rgba(255,255,255,.08);
}
.ap .ap-faixa-forte p {
  margin:0; max-inline-size:30ch;
  font-size:clamp(18px, 2.4vw, 30px); line-height:1.25; letter-spacing:-.02em;
  font-weight:700; color:#aab6cc;
}
.ap .ap-faixa-forte b { color:#fff; font-weight:800; }

/* ── A lista de dor, agora na coluna de texto do palco ───────────── */
.ap .ap-palco .ap-dor-lista {
  list-style:none; margin:0 0 clamp(18px, 2.2vw, 26px); padding:0;
  display:grid; gap:7px;
}
.ap .ap-palco .ap-dor-lista li {
  position:relative; padding-inline-start:26px;
  font-size:14px; line-height:1.5; color:#49597a; font-weight:600;
}
.ap .ap-palco .ap-dor-lista li::before {
  content:"×"; position:absolute; inset-inline-start:0; inset-block-start:0;
  inline-size:18px; block-size:18px; display:grid; place-items:center;
  border-radius:50%; background:#fdeceb; color:#d92d20;
  font-size:12px; font-weight:800;
}

/* ── A variante calma do palco ───────────────────────────────────────
   Para as seções que são de LEITURA — objeções, planos e perguntas. Elas
   não precisam de massa escura nem de produto; precisam apenas deixar de
   ser branco puro, para a página ter respiração entre as cenas fortes.
   Mesma base, sem a grade técnica e sem as formas. */
.ap .ap-palco--calmo::before { display:none; }
.ap .ap-palco--calmo {
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(22,104,227,.05), transparent 60%),
    linear-gradient(180deg, #fbfcfe 0%, #f6f8fc 100%);
}

/* ── "Como começa": a faixa escura com a linha de processo ───────────
   É o terceiro ponto de contraste da página, entre a esteira preta e os
   planos claros. Os três passos ficam ligados por uma linha, que é a
   mesma linguagem da trilha do Criador — um design system, não três. */
.ap .ap-trilho-escuro {
  position:relative; isolation:isolate; overflow:clip;
  background:linear-gradient(160deg, #101b3d 0%, #16224a 58%, #0d1631 100%);
  color:#fff;
}
.ap .ap-trilho-escuro::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}
.ap .ap-trilho-escuro .ap-sobretitulo { color:#4d8df0; }
.ap .ap-trilho-escuro h2 { color:#fff; }
.ap .ap-trilho-escuro .ap-passos-faixa { position:relative; }
/* A linha que liga os três passos, só onde eles ficam lado a lado. */
@media (min-width:780px) {
  .ap .ap-trilho-escuro .ap-passos-faixa::before {
    content:""; position:absolute; inset-inline:16%; inset-block-start:42px;
    block-size:2px; background:linear-gradient(90deg, #1668e3, #4d8df0, rgba(255,230,0,.55));
    opacity:.6; z-index:0;
  }
}
.ap .ap-trilho-escuro .ap-passos-faixa li {
  position:relative; z-index:1;
  background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12);
}
.ap .ap-trilho-escuro .ap-passos-faixa h3 { color:#fff; }
.ap .ap-trilho-escuro .ap-passos-faixa p { color:#a9bbdd; }
/* O amarelo da marca fecha a linha, no último passo. */
.ap .ap-trilho-escuro .ap-passos-faixa li:last-child .ap-num {
  background:#0b6b36; box-shadow:0 0 0 2px #ffe600;
}

/* O veredito dentro da laje. A regra antiga vem da Central de Promoções do
   carrossel, que já saiu, e ainda pinta fundo claro e alinha à esquerda —
   dentro da laje escura isso deixava o texto encostado no topo e fora do
   tom. Aqui vale a versão da laje. */
.ap .ap-laje .ap-margem__estado {
  display:block; text-align:center; background:none; padding:9px 12px;
}
.ap .ap-laje .ap-margem__estado[data-ap-veredito="atencao"],
.ap .ap-laje .ap-margem__estado[data-ap-veredito="bloqueada"] { background:none; }

/* ══ DE VÁRIAS FERRAMENTAS PARA UMA OPERAÇÃO CONECTADA ════════════════
   Uma cena só, com profundidade — não uma tabela nem uma grade.

   A composição veio de quatro referências de direção de arte, traduzidas
   para a identidade da marca: o verde-petróleo delas NÃO entrou. Tudo é
   azul #1668e3 sobre azul-noite quase preto, e o amarelo #ffe600 aparece
   exclusivamente nos estados concluídos.

     1. interfaces sobrepostas  →  as sete janelas flutuantes da esquerda
     2. núcleo conectado        →  a Central de Operação, ao centro
     3. dashboard em perspectiva→  o painelzão da direita, inclinado
     4. rede de pontos e eventos→  a malha de fundo e os avisos

   Esta é a ÚNICA seção escura entre seções claras, e é de propósito: é a
   virada da página, e o contraste é o que a faz parar o olho. */

.ap .ap-cena-escura {
  position:relative; isolation:isolate; overflow:clip;
  padding-block:clamp(44px, 5.4vw, 86px);
  background:
    radial-gradient(70% 52% at 50% 34%, rgba(22,104,227,.26), transparent 70%),
    linear-gradient(180deg, #070b18 0%, #0a1024 48%, #060a16 100%);
  color:#fff;
}
/* A malha de pontos, apagando para as bordas. */
.ap .ap-malha {
  position:absolute; inset:0; inline-size:100%; block-size:100%;
  z-index:-2; pointer-events:none; opacity:.5;
}
/* A vinheta: escurece os cantos e empurra o olho para o centro. */
.ap .ap-vinheta {
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(78% 62% at 50% 44%, transparent 42%, rgba(4,7,16,.82) 100%);
}
/* O vidro das laterais, cortado pela borda. Nunca sobre texto: fica no
   z-index de baixo e as colunas de conteúdo sobem acima dele. */
.ap .ap-vidro-lateral {
  position:absolute; z-index:-1; pointer-events:none; border-radius:50%;
  inline-size:clamp(260px, 34vw, 520px); block-size:clamp(260px, 34vw, 520px);
  filter:blur(90px);
}
.ap .ap-vidro-lateral--esq {
  inset-block-start:4%; inset-inline-start:-14%;
  background:radial-gradient(circle at 40% 36%, rgba(22,104,227,.58), rgba(77,141,240,.14) 56%, transparent 74%);
}
.ap .ap-vidro-lateral--dir {
  inset-block-end:-10%; inset-inline-end:-12%;
  background:radial-gradient(circle at 56% 44%, rgba(255,230,0,.1), rgba(22,104,227,.42) 46%, transparent 72%);
}
@media (max-width:900px) {
  .ap .ap-vidro-lateral { inline-size:220px; block-size:220px; filter:blur(66px); opacity:.6; }
}

/* ── O cabeçalho ──────────────────────────────────────────────────── */
.ap .ap-cena-topo { max-inline-size:58ch; margin-block-end:clamp(26px, 3.4vw, 46px); }
.ap .ap-cena-sobre {
  display:inline-block; font-size:clamp(10.5px, 1.05vw, 12px); font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:#6ba3f5;
  margin-block-end:clamp(8px, 1.1vw, 14px);
}
.ap .ap-cena-manchete {
  margin:0 0 clamp(10px, 1.3vw, 16px); color:#fff;
  font-size:clamp(27px, 3.9vw, 50px); line-height:1.06; letter-spacing:-.028em;
  font-weight:800; max-inline-size:17ch; text-wrap:balance;
}
/* O azul luminoso do destaque: mais claro que o oficial, porque aqui o
   fundo é quase preto e o #1668e3 puro não alcançaria 4,5:1. */
.ap .ap-cena-manchete em { font-style:normal; color:#6ba3f5; }
.ap .ap-cena-apoio {
  margin:0; max-inline-size:52ch; color:#a9bbdd;
  font-size:clamp(14px, 1.25vw, 16.5px); line-height:1.58;
}

/* ── O palco: três planos ─────────────────────────────────────────── */
/* `ap-conexao-palco`, e nao `ap-cena-palco`: a segunda e a coluna do
   produto do Criador, das Promocoes, da Julia e do Ecossistema. Como
   este bloco vem depois no arquivo, redefini-la repartia aquelas
   quatro secoes em tres colunas — medido, 180/136/255px. */
.ap .ap-conexao-palco {
  display:grid; gap:clamp(26px, 3vw, 40px); grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:1080px) {
  .ap .ap-conexao-palco {
    grid-template-columns:minmax(0,.82fr) minmax(0,.62fr) minmax(0,1.16fr);
    gap:clamp(14px, 1.8vw, 28px);
  }
}
.ap .ap-lado { min-inline-size:0; }
.ap .ap-lado-titulo {
  margin:0 0 6px; font-size:clamp(15px, 1.5vw, 19px); font-weight:800;
  text-transform:uppercase; letter-spacing:.01em; color:#8a99b5;
}
.ap .ap-lado-titulo--claro { color:#6ba3f5; }
.ap .ap-lado-texto {
  margin:0 0 clamp(14px, 1.8vw, 22px); font-size:clamp(13px, 1.15vw, 14.5px);
  line-height:1.5; color:#8491ab; max-inline-size:34ch;
}
.ap .ap-lado-texto--claro { color:#a9bbdd; }

/* ── ESQUERDA: as sete janelas flutuantes ─────────────────────────── */
.ap .ap-flutuantes {
  position:relative; display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(7px, .9vw, 11px);
}
.ap .ap-fios-partidos {
  position:absolute; inset:0; inline-size:100%; block-size:100%;
  pointer-events:none; z-index:0; opacity:.7;
}
/* Cada janela tem o seu plano: tamanho, inclinação e brilho diferentes.
   Baixa iluminação, mas legível — quem está retratado aqui é o visitante. */
.ap .ap-flutua {
  position:relative; z-index:1; display:grid; gap:5px;
  padding:9px 11px 10px; border-radius:10px;
  background:linear-gradient(158deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 14px 30px -14px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter:blur(3px);
}
.ap .ap-flutua b { font-size:11.5px; font-weight:800; color:#dbe4f5; }
.ap .ap-flutua-tarefa {
  font-size:10px; font-weight:700; color:#8491ab;
  padding:3px 8px; border-radius:999px; justify-self:start;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
}
/* O atrito: a única nota quente do lado de cá, e uma só. */
.ap .ap-flutua--quente .ap-flutua-tarefa {
  color:#f0c377; background:rgba(224,149,42,.14); border-color:rgba(224,149,42,.34);
}
/* Os planos: medidos, não aleatórios. */
.ap .ap-flutua[data-ap-f="1"] { transform:rotate(-2.4deg) translateY(5px) scale(.97); }
.ap .ap-flutua[data-ap-f="2"] { transform:rotate(1.8deg) translateY(-7px); }
.ap .ap-flutua[data-ap-f="3"] { transform:rotate(2.6deg) translateY(8px); }
.ap .ap-flutua[data-ap-f="4"] { transform:rotate(-1.6deg) translateY(-3px) scale(1.03); z-index:2; }
.ap .ap-flutua[data-ap-f="5"] { transform:rotate(-3deg) translateY(7px) scale(.96); }
.ap .ap-flutua[data-ap-f="6"] { transform:rotate(1.4deg) translateY(-5px); }
.ap .ap-flutua[data-ap-f="7"] { transform:rotate(-2deg) translateY(4px) scale(.98);
                                grid-column:1 / -1; justify-self:center; inline-size:62%; }

/* ── CENTRO: a Central de Operação ────────────────────────────────── */
.ap .ap-nucleo-fora { display:grid; justify-items:center;
                      gap:clamp(26px, 3.4vw, 46px); }
.ap .ap-nucleo-anel {
  position:relative; display:grid; place-items:center;
  inline-size:clamp(200px, 23vw, 262px); aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 44%, rgba(22,104,227,.34), transparent 62%),
    radial-gradient(circle, #0c1328 54%, transparent 55%);
}
/* O anel de luz que contorna o núcleo. */
/* O ANEL DE LUZ E UM ELEMENTO, nao um `::before` do anel inteiro: o
   movimento ambiente gira SO ele. Enquanto era pseudo-elemento, girar
   significava girar o `.ap-nucleo-anel`, e os rotulos da orbita — que sao
   filhos dele — iam junto, tortos. Visto na tela. */
.ap .ap-nucleo-luz {
  position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 210deg, transparent 0deg, #1668e3 70deg, #6ba3f5 130deg, transparent 210deg, transparent 360deg);
  mask:radial-gradient(circle, transparent 0 49.5%, #000 50.5% 100%);
  opacity:.9;
}
.ap .ap-nucleo-anel::before {
  content:""; position:absolute; inset:9%; border-radius:50%;
  background:radial-gradient(circle at 50% 40%, rgba(107,163,245,.26), transparent 66%);
  box-shadow:inset 0 0 40px rgba(22,104,227,.4);
}
.ap .ap-nucleo-miolo {
  position:relative; z-index:1; display:grid; justify-items:center; gap:5px;
  text-align:center; padding:12px;
}
.ap .ap-nucleo-miolo img { inline-size:clamp(38px, 4.4vw, 54px); block-size:auto; }
.ap .ap-nucleo-miolo b {
  font-size:clamp(11.5px, 1.15vw, 13.5px); font-weight:800; color:#fff;
  letter-spacing:.01em;
}
.ap .ap-nucleo-pulso {
  font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:#6ba3f5; padding:3px 9px; border-radius:999px;
  background:rgba(22,104,227,.2); border:1px solid rgba(107,163,245,.34);
}
/* Quando termina de processar, o amarelo da marca marca o concluído. */
.ap .ap-nucleo-pulso[data-ap-pronto] {
  color:#ffe600; background:rgba(255,230,0,.12); border-color:rgba(255,230,0,.42);
}

/* Os oito em órbita, posicionados por ângulo. */
.ap .ap-orbita { list-style:none; margin:0; padding:0; position:absolute; inset:0; }
.ap .ap-orbita li {
  position:absolute; inset-block-start:50%; inset-inline-start:50%;
  font-size:9.5px; font-weight:700; letter-spacing:.03em; white-space:nowrap;
  padding:3px 8px; border-radius:999px; color:#a9bbdd;
  background:rgba(10,16,36,.86); border:1px solid rgba(107,163,245,.26);
  transform:translate(-50%,-50%) rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1));
  /* Folga medida: com 136px eles encostavam no anel de 131 de raio. */
  --r:clamp(118px, 13vw, 150px);
}
/* OS ANGULOS FOGEM DOS EXTREMOS. Com os oito a cada 45 graus, o de baixo
   caia sobre "Tudo conectado" e o da direita sumia atras do painel —
   visto na tela. Agora eles ocupam so os arcos de cima e de baixo, o que
   os mantem dentro da coluna do nucleo. */
.ap .ap-orbita li[data-ap-orb="1"] { --a:-120deg; }
.ap .ap-orbita li[data-ap-orb="2"] { --a:-100deg; }
.ap .ap-orbita li[data-ap-orb="3"] { --a:-80deg; }
.ap .ap-orbita li[data-ap-orb="4"] { --a:-60deg; }
.ap .ap-orbita li[data-ap-orb="5"] { --a:60deg; }
.ap .ap-orbita li[data-ap-orb="6"] { --a:80deg; }
.ap .ap-orbita li[data-ap-orb="7"] { --a:100deg; }
.ap .ap-orbita li[data-ap-orb="8"] { --a:120deg; }
@media (max-width:1079px) { .ap .ap-orbita { display:none; } }

.ap .ap-nucleo-dizer {
  margin:0; text-align:center; font-size:clamp(14px, 1.4vw, 17px);
  line-height:1.3; color:#8491ab; font-weight:600;
}
.ap .ap-nucleo-dizer b { color:#fff; font-weight:800; }

/* ── DIREITA: o painelzão, em perspectiva ─────────────────────────── */
.ap .ap-painelzao {
  position:relative; border-radius:clamp(12px, 1.3vw, 18px); overflow:hidden;
  background:linear-gradient(162deg, #0f1a3a 0%, #142048 56%, #0b1230 100%);
  border:1px solid rgba(107,163,245,.26);
  box-shadow:0 44px 90px -40px rgba(0,0,0,.9),
             0 0 0 1px rgba(255,255,255,.04) inset,
             -30px 0 70px -50px rgba(22,104,227,.7);
}
@media (min-width:1080px) {
  /* A inclinação vem da referência: o painel sai um pouco da cena. */
  .ap .ap-painelzao {
    transform:perspective(1500px) rotateY(-9deg) rotateX(2.4deg) translateZ(0);
    transform-origin:left center;
    margin-inline-end:clamp(-56px, -3vw, -14px);
  }
}
.ap .ap-painelzao-barra {
  display:flex; align-items:center; gap:5px; padding:9px 13px;
  border-block-end:1px solid rgba(255,255,255,.09);
  font-size:11px; font-weight:700; color:#a9bbdd;
}
.ap .ap-painelzao-barra i {
  inline-size:7px; block-size:7px; border-radius:50%; display:block; flex:none;
  background:rgba(255,255,255,.2);
}
.ap .ap-painelzao-barra span { margin-inline-start:5px; }

.ap .ap-painelzao-numeros {
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1px; background:rgba(255,255,255,.07);
}
@media (min-width:520px) {
  .ap .ap-painelzao-numeros { grid-template-columns:repeat(3, minmax(0,1fr)); }
}
.ap .ap-painelzao-numeros > div { padding:11px 12px; background:#101a3c; }
.ap .ap-painelzao-numeros span {
  display:block; font-size:9.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:#8c9cbd; margin-block-end:3px;
}
.ap .ap-painelzao-numeros b {
  font-size:clamp(17px, 1.9vw, 23px); letter-spacing:-.025em; color:#fff;
}

.ap .ap-painelzao-grafico { padding:13px 14px 4px; }
.ap .ap-painelzao-grafico p {
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin:0 0 9px; font-size:11px; font-weight:700; color:#8c9cbd;
}
.ap .ap-painelzao-grafico p b { font-size:clamp(15px, 1.6vw, 19px); color:#fff; }
.ap .ap-painelzao-grafico ul {
  list-style:none; margin:0; padding:0; display:flex; align-items:flex-end;
  gap:clamp(3px, .5vw, 6px); block-size:clamp(56px, 7vw, 84px);
}
.ap .ap-painelzao-grafico li {
  flex:1; block-size:var(--h); border-radius:3px 3px 0 0;
  background:linear-gradient(180deg, #2f6fd4, #1b4790);
}
.ap .ap-painelzao-grafico li.viva { background:linear-gradient(180deg, #6ba3f5, #1668e3); }

.ap .ap-painelzao-ok {
  display:flex; align-items:center; gap:7px; margin:0; padding:10px 14px;
  font-size:12px; font-weight:800; color:#7fe0aa;
  border-block-start:1px solid rgba(255,255,255,.08);
}
/* O concluído carrega o amarelo da marca — e é o único aqui. */
.ap .ap-painelzao-ok[data-ap-ok] svg { color:#ffe600; }
.ap .ap-painelzao .ap-ilustracao { margin:0 14px 12px; color:#7b89a6; }

/* ── Os quatro avisos ─────────────────────────────────────────────── */
.ap .ap-avisos {
  list-style:none; margin:clamp(28px, 3.4vw, 44px) 0 0; padding:0;
  display:grid; gap:clamp(8px, 1vw, 12px);
}
@media (min-width:860px) {
  .ap .ap-avisos { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
.ap .ap-avisos li {
  display:grid; gap:4px 10px; grid-template-columns:1fr; align-items:center;
  padding:clamp(11px, 1.3vw, 15px) clamp(13px, 1.5vw, 18px);
  border-radius:var(--raio-lg, 12px);
  background:linear-gradient(150deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 16px 34px -20px rgba(0,0,0,.8);
}
@media (min-width:560px) {
  .ap .ap-avisos li { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:clamp(10px, 1.2vw, 16px); }
}
.ap .ap-aviso-antes { font-size:clamp(12.5px, 1.1vw, 13.8px); line-height:1.4;
                      color:#8491ab; font-weight:600; }
.ap .ap-aviso-depois { font-size:clamp(12.5px, 1.1vw, 14px); line-height:1.4;
                       color:#fff; font-weight:800; }
.ap .ap-aviso-seta { display:grid; place-items:center; color:#6ba3f5; }
.ap .ap-aviso-seta svg { inline-size:26px; block-size:auto; }
@media (max-width:559px) {
  .ap .ap-aviso-seta { justify-self:start; transform:rotate(90deg); margin-block:1px; }
}

/* ── O fecho ──────────────────────────────────────────────────────── */
.ap .ap-cena-fecho {
  margin-block-start:clamp(30px, 3.8vw, 52px); text-align:center;
  display:grid; justify-items:center; gap:clamp(10px, 1.3vw, 16px);
}
.ap .ap-cena-fecho h3 {
  margin:0; max-inline-size:24ch; text-wrap:balance; color:#fff;
  font-size:clamp(21px, 2.8vw, 34px); line-height:1.14; letter-spacing:-.025em;
  font-weight:800;
}
.ap .ap-cena-fecho h3 em { font-style:normal; color:#6ba3f5; }
.ap .ap-cena-fecho > p {
  margin:0; max-inline-size:56ch; color:#a9bbdd;
  font-size:clamp(14px, 1.25vw, 16px); line-height:1.56;
}
.ap .ap-acao-noite {
  display:inline-flex; align-items:center; justify-content:center;
  min-block-size:clamp(48px, 5.4vh, 54px); padding:0 clamp(18px, 1.9vw, 26px);
  border-radius:var(--raio-pill, 999px);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.26);
  color:#fff; text-decoration:none; font-weight:700;
  font-size:clamp(14px, 1.15vw, 15.5px);
  transition:background .16s ease, border-color .16s ease;
}
.ap .ap-acao-noite:hover { background:rgba(255,255,255,.12); border-color:#6ba3f5; }
.ap .ap-acao-noite:focus-visible { outline:3px solid #ffe600; outline-offset:3px; }
.ap .ap-garantias--noite li { color:#a9bbdd; }

@media (max-width:620px) {
  .ap .ap-cena-fecho .ap-acoes { display:grid; gap:10px; inline-size:100%; }
  .ap .ap-cena-fecho .ap-acao-cena,
  .ap .ap-cena-fecho .ap-acao-noite { inline-size:100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ap .ap-acao-noite { transition:none; }
  .ap .ap-painelzao { transform:none; margin-inline-end:0; }
}

/* ══ O HERO (06/10/2026) ══════════════════════════════════════════════
   Fundo CLARO com profundidade — não branco vazio, que era o que fazia a
   primeira dobra parecer template. Quatro camadas: grade técnica, formas
   geométricas azul-marinho nas laterais, vidro nas bordas e o painel do
   sistema em escala.

   Tudo abaixo vive sob `.ap-heroi`. Nada aqui alcança outra seção. */

.ap .ap-heroi { position:relative; isolation:isolate; overflow:clip; }

/* A grade técnica: quase invisível, e apagando para as bordas. */
.ap .ap-heroi-grade {
  position:absolute; inset:0; inline-size:100%; block-size:100%;
  z-index:-3; pointer-events:none; opacity:.5;
  mask-image:radial-gradient(70% 60% at 42% 42%, #000 10%, transparent 72%);
}
.ap .ap-heroi-forma {
  position:absolute; z-index:-2; pointer-events:none;
  inline-size:clamp(70px, 10vw, 150px); block-size:auto;
}
.ap .ap-heroi-forma--esq { inset-block-start:0; inset-inline-start:0; }
.ap .ap-heroi-vidro {
  position:absolute; z-index:-2; pointer-events:none; border-radius:50%;
  inline-size:clamp(230px, 30vw, 450px); block-size:clamp(230px, 30vw, 450px);
  filter:blur(80px);
}
.ap .ap-heroi-vidro--um {
  inset-block-start:-12%; inset-inline-start:-10%;
  background:radial-gradient(circle at 38% 36%, rgba(22,104,227,.42), rgba(77,141,240,.12) 56%, transparent 74%);
}
.ap .ap-heroi-vidro--dois {
  inset-block-end:-16%; inset-inline-end:-8%;
  background:radial-gradient(circle at 58% 44%, rgba(255,230,0,.13), rgba(22,104,227,.3) 48%, transparent 72%);
}
@media (max-width:900px) {
  .ap .ap-heroi-vidro { inline-size:200px; block-size:200px; filter:blur(60px); opacity:.6; }
  .ap .ap-heroi-forma { inline-size:60px; opacity:.6; }
}

/* ── O selo das marcas ────────────────────────────────────────────────
   Cápsula azul-noite com borda azul elétrica, um reflexo amarelo num
   ponto dela, e os logos OFICIAIS sobrepostos à esquerda. Baixo e
   discreto: é uma introdução, não um botão. */
.ap .ap-selo-marcas {
  display:inline-flex; align-items:center; gap:10px; margin:0 0 clamp(14px, 1.8vw, 22px);
  padding:5px 16px 5px 7px; border-radius:var(--raio-pill, 999px);
  background:linear-gradient(140deg, #0d1528, #101b3d 60%, #0b1322);
  border:1px solid rgba(77,141,240,.55);
  box-shadow:0 2px 10px -2px rgba(10,20,48,.5), 0 0 16px -6px rgba(22,104,227,.5);
  color:#fff; font-size:clamp(12px, 1.1vw, 13.5px); font-weight:600;
  position:relative; overflow:hidden;
}
/* O reflexo amarelo, num ponto só da borda. */
.ap .ap-selo-marcas::after {
  content:""; position:absolute; inset-block-start:-1px; inset-inline-start:34%;
  inline-size:26%; block-size:1px;
  background:linear-gradient(90deg, transparent, #ffe600, transparent);
  opacity:.85;
}
.ap .ap-selo-marcas__logos { display:inline-flex; align-items:center; flex:none; }
.ap .ap-selo-marcas__logos i {
  inline-size:26px; block-size:26px; border-radius:50%; background:#fff;
  display:grid; place-items:center; padding:3px; flex:none;
  border:1.5px solid #101b3d; margin-inline-start:-9px;
}
.ap .ap-selo-marcas__logos i:first-child { margin-inline-start:0; }
.ap .ap-selo-marcas__logos img {
  max-inline-size:100%; max-block-size:100%; inline-size:auto; block-size:auto;
  object-fit:contain; display:block;
}
@media (max-width:560px) {
  .ap .ap-selo-marcas { gap:8px; padding:4px 13px 4px 6px; font-size:11.5px; }
  .ap .ap-selo-marcas__logos i { inline-size:22px; block-size:22px; margin-inline-start:-8px; }
}

/* ── A manchete ───────────────────────────────────────────────────── */
.ap .ap-heroi .ap-hero-motion__titulo { text-wrap:balance; }
/* A segunda linha leva o destaque da dobra. O ponto final é o amarelo da
   marca — o único ponto amarelo do hero, e por isso ele se vê. */

.ap .ap-heroi-ganhos {
  list-style:none; display:flex; flex-wrap:wrap; gap:8px 20px;
  margin:clamp(14px, 1.8vw, 20px) 0 0; padding:0;
}
.ap .ap-heroi-ganhos li {
  position:relative; padding-inline-start:23px;
  font-size:clamp(13px, 1.15vw, 14.5px); font-weight:600; color:#2c3a56;
}
/* Indicador pequeno e integrado — não um cartão. */
.ap .ap-heroi-ganhos li::before {
  content:""; position:absolute; inset-inline-start:0; inset-block-start:50%;
  transform:translateY(-50%); inline-size:15px; block-size:15px; border-radius:50%;
  background:#e7f0ff; border:1.5px solid #1668e3;
}
.ap .ap-heroi-ganhos li::after {
  content:""; position:absolute; inset-inline-start:4.5px; inset-block-start:calc(50% - 1px);
  inline-size:5px; block-size:2.5px; border-inline-start:1.8px solid #1668e3;
  border-block-end:1.8px solid #1668e3; transform:translateY(-50%) rotate(-45deg);
}

/* ── O palco do produto, com as camadas ──────────────────────────── */
.ap .ap-heroi-palco { position:relative; min-inline-size:0; }
.ap .ap-heroi-palco .ap-cabine { position:relative; z-index:1; }
.ap .ap-heroi-palco .ap-placar { grid-template-columns:repeat(3, minmax(0,1fr)); }

/* As camadas: partes do mesmo sistema, ligadas ao painel por um fio. */
.ap .ap-camada {
  position:absolute; z-index:2; display:grid; margin:0;
  grid-template-columns:auto 1fr; gap:2px 9px; align-items:center;
  padding:9px 13px; border-radius:var(--raio-lg, 12px);
  background:rgba(255,255,255,.96); border:1px solid #d9e3f5;
  box-shadow:0 12px 30px -12px rgba(16,27,61,.4);
  backdrop-filter:blur(4px);
}
.ap .ap-camada svg, .ap .ap-camada img { grid-row:1 / 3; align-self:center; }
.ap .ap-camada img { border-radius:50%; object-fit:cover; object-position:50% 12%; }
.ap .ap-camada b { font-size:12.5px; color:#101828; line-height:1.2; }
.ap .ap-camada small { font-size:11px; color:#667085; line-height:1.3; }
.ap .ap-camada--publicado { color:#0b6b36; inset-block-start:4%; inset-inline-start:-7%; }
.ap .ap-camada--margem { color:#0b4fc0; inset-block-end:24%; inset-inline-start:-11%; }
.ap .ap-camada--julia { inset-block-end:2%; inset-inline-end:-5%; }

/* Os fios: saem do painel e chegam às camadas. */
.ap .ap-fio {
  position:absolute; z-index:0; pointer-events:none; block-size:1px;
  background:linear-gradient(90deg, transparent, rgba(22,104,227,.55));
}
.ap .ap-fio--um { inset-block-start:11%; inset-inline-start:2%; inline-size:16%; }
.ap .ap-fio--dois { inset-block-end:30%; inset-inline-start:0; inline-size:14%; }
.ap .ap-fio--tres {
  inset-block-end:9%; inset-inline-end:2%; inline-size:14%;
  background:linear-gradient(270deg, transparent, rgba(22,104,227,.55));
}

/* No celular as camadas saem do flutuar e entram na coluna: flutuando
   elas sairiam da tela ou cobririam o painel. */
@media (max-width:959px) {
  .ap .ap-camada { position:static; margin-block-start:9px; }
  .ap .ap-fio { display:none; }
  .ap .ap-heroi-palco .ap-placar { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:620px) {
  /* Botões em largura total, com área de toque cheia. */
  .ap .ap-heroi .ap-acoes { display:grid; gap:10px; }
  .ap .ap-heroi .ap-btn, .ap .ap-heroi .ap-btn-contorno { inline-size:100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ap .ap-camada { backdrop-filter:none; }
}

/* ── O hero claro: o que dependia do fundo escuro ──────────────────────
   O fundo virou claro, então tudo o que era branco por estar sobre
   azul-marinho precisa de cor nova. Está tudo escopado em `.ap-heroi`:
   nenhuma destas regras alcança outra seção. */
.ap .ap-heroi .ap-heroi-chamada { color:#49597a; }
.ap .ap-heroi .ap-garantias li { color:#49597a; }
.ap .ap-heroi .ap-garantias li::before { color:#0b6b36; }
/* O azul elétrico do destaque, sobre claro. */
/* O destaque e pintado por um gradiente RECORTADO NO TEXTO, com o texto
   em `transparent`: trocar `color` nao muda nada, e foi o que tentei
   primeiro. O par claro de antes existia para um hero escuro; sobre claro
   ele nao alcançava 4,5:1.
   E o SplitType quebra a frase em `.char`, cada um com o SEU recorte —
   entao pintar so o pai tambem nao bastava. Sao os dois. */
.ap .ap-heroi .ap-destaque,
.ap .ap-heroi .ap-hero-motion__titulo .ap-destaque .char {
  background-image:linear-gradient(90deg, #1668e3 0%, #0b4fc0 100%);
}
/* O ponto final leva o amarelo da marca, e e o unico ponto amarelo da
   dobra. `-webkit-text-fill-color` porque o pai pinta por recorte. */
.ap .ap-heroi .ap-destaque em,
.ap .ap-heroi .ap-destaque em .char {
  font-style:normal; -webkit-text-fill-color:#ffe600; color:#ffe600;
  background-image:none;
}
/* A marca d'água era branca sobre escuro; agora é um traço no claro. */
.ap .ap-heroi .ap-hero-motion__marca { color:rgba(16,27,61,.045); }
/* O botão secundário deixa de ser contorno branco. */
.ap .ap-heroi .ap-btn-contorno {
  background:#fff; border-color:#c9d6ee; color:var(--ap-noite);
}
.ap .ap-heroi .ap-btn-contorno:hover { background:#eef4ff; border-color:#1668e3; }

/* ── A MASSA AZUL-NOITE ATRÁS DO PRODUTO ───────────────────────────────
   É o contraste da dobra: a base é clara e o escuro aparece só onde o
   sistema está, que é onde ele deve puxar o olho. */
.ap .ap-heroi-palco::before {
  content:""; position:absolute; z-index:0; pointer-events:none;
  inset:-6% -10% -8% -4%;
  border-radius:clamp(16px, 2vw, 26px);
  background:linear-gradient(158deg, #101b3d 0%, #16224a 56%, #0d1631 100%);
  box-shadow:0 34px 80px -34px rgba(10,20,48,.6);
}
/* NAO use `> *` aqui: isso tambem acerta as camadas, que sao
   `position:absolute`, e com a mesma especificidade vindo depois elas
   voltavam para o fluxo e desciam em fila sob o painel. Visto na tela.
   So o painel precisa subir acima da massa escura. */
.ap .ap-heroi-palco > .ap-cabine { position:relative; z-index:1; }
.ap .ap-heroi-palco .ap-ilustracao { color:rgba(255,255,255,.55); }
@media (max-width:959px) {
  .ap .ap-heroi-palco::before { inset:-4% -5%; }
}

/* ── A PRIMEIRA DOBRA PRECISA CABER ────────────────────────────────────
   MEDIDO: `min-height:100svh` somado a `padding-top:150px` deixava o hero
   com 1224px contra 1080 de janela a 1920, e o primeiro CTA caía 57px
   abaixo da dobra. A 1366 faltavam 10px; a 400, nove. O visitante não
   pode precisar rolar para achar o botão.

   Três ajustes, todos dentro do hero: menos respiro no topo, manchete com
   teto menor, e as folgas entre os blocos acompanhando a ALTURA da tela e
   não só a largura — numa tela baixa é a altura que falta. */
.ap .ap-hero-motion { padding-top:clamp(84px, 11vh, 128px); }
.ap .ap-heroi .ap-hero-motion__titulo {
  font-size:clamp(34px, min(4.6vw, 7.4vh), 62px);
  line-height:1.02;
}
.ap .ap-heroi .ap-selo-marcas { margin-block-end:clamp(10px, 1.6vh, 20px); }
.ap .ap-heroi .ap-heroi-chamada { margin-block-start:clamp(12px, 2vh, 22px); }
.ap .ap-heroi .ap-heroi-ganhos { margin-block-start:clamp(10px, 1.8vh, 20px); }
.ap .ap-heroi .ap-acoes { margin-block-start:clamp(14px, 2.2vh, 26px); }
.ap .ap-heroi .ap-garantias { margin-block-start:clamp(12px, 1.8vh, 22px); }
@media (max-width:959px) {
  /* Empilhado, o hero deixa de precisar encher a tela: quem manda e o
     conteudo, e forcar `100svh` so empurrava o botao para baixo. */
  .ap .ap-hero-motion { min-height:0; padding-top:clamp(70px, 9vh, 96px); }
}

@media (max-width:420px) {
  /* MEDIDO a 360x780: o segundo botão caía 44px abaixo da dobra, e 30
     deles vinham do PRIMEIRO — o rótulo quebrava em duas linhas e ele
     ficava com 82px de altura. Fonte um ponto menor resolve a quebra;
     o resto sai de folgas, sem tirar nada da tela. */
  .ap .ap-heroi .ap-btn,
  .ap .ap-heroi .ap-btn-contorno { font-size:14.5px; padding-inline:16px; }
  .ap .ap-heroi .ap-heroi-chamada { font-size:15px; line-height:1.5; }
  .ap .ap-heroi .ap-heroi-ganhos { gap:6px 16px; }
  .ap .ap-heroi .ap-garantias { margin-block-start:10px; }
}

/* ══ AS QUATRO ROTINAS ════════════════════════════════════════════════
   A direção visual aprovada continua — azul-noite, malha de pontos,
   vinheta, vidro nas laterais. O que mudou foi a COMUNICAÇÃO: saiu a
   comparação abstrata e entraram quatro rotinas reais, com as etapas que
   o vendedor faz hoje, uma a uma.

   Cada par fica JUNTO: o problema e a sua solução ficam na mesma linha no
   desktop e um sob o outro no celular. Ninguém precisa lembrar de um
   problema mostrado três blocos antes para entender a solução. */

.ap .ap-cena-virada {
  margin:clamp(14px, 1.8vw, 20px) 0 0; max-inline-size:52ch;
  font-size:clamp(14.5px, 1.3vw, 17px); line-height:1.5; font-weight:700;
  color:#6ba3f5;
}

.ap .ap-rotinas {
  list-style:none; margin:clamp(30px, 4vw, 52px) 0 0; padding:0;
  display:grid; gap:clamp(22px, 3vw, 40px);
}
.ap .ap-rotina {
  padding:clamp(18px, 2.2vw, 28px);
  border-radius:clamp(14px, 1.6vw, 20px);
  background:linear-gradient(158deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 20px 48px -28px rgba(0,0,0,.8);
}
.ap .ap-rotina-num {
  margin:0 0 clamp(14px, 1.8vw, 20px);
  font-size:clamp(15px, 1.5vw, 19px); font-weight:800; color:#fff;
  letter-spacing:-.015em;
}
.ap .ap-rotina-num span {
  display:inline-block; margin-inline-end:10px; padding:3px 11px;
  border-radius:var(--raio-pill, 999px); background:rgba(22,104,227,.2);
  border:1px solid rgba(107,163,245,.34); color:#6ba3f5;
  font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  vertical-align:middle;
}

/* ── O par: problema à esquerda, solução à direita ────────────────── */
.ap .ap-rotina-par {
  display:grid; gap:clamp(14px, 1.8vw, 22px); grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:980px) {
  .ap .ap-rotina-par {
    grid-template-columns:minmax(0,.84fr) auto minmax(0,1.16fr);
    column-gap:clamp(16px, 2vw, 30px);
  }
}
.ap .ap-rotina-rotulo {
  margin:0 0 clamp(10px, 1.2vw, 14px);
  font-size:10.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  color:#8491ab;
}
.ap .ap-rotina-rotulo--azul { color:#6ba3f5; }

/* As etapas, numeradas — é o que torna o trabalho de hoje concreto. */
.ap .ap-passinhos { list-style:none; margin:0; padding:0; counter-reset:passo; display:grid; gap:7px; }
.ap .ap-passinhos li {
  counter-increment:passo; position:relative; padding-inline-start:28px;
  font-size:clamp(12.5px, 1.08vw, 14px); line-height:1.45; color:#a9bbdd;
}
.ap .ap-passinhos li::before {
  content:counter(passo); position:absolute; inset-inline-start:0; inset-block-start:0;
  inline-size:19px; block-size:19px; border-radius:50%;
  display:grid; place-items:center; font-size:10px; font-weight:800;
  background:rgba(255,255,255,.08); color:#8491ab; border:1px solid rgba(255,255,255,.12);
}
/* Do lado do sistema as etapas vêm resolvidas, com visto no lugar do número. */
.ap .ap-passinhos--feito li { color:#dbe4f5; }
.ap .ap-passinhos--feito li::before {
  content:"✓"; background:rgba(22,104,227,.26); color:#7fe0aa;
  border-color:rgba(107,163,245,.4); font-size:11px;
}

.ap .ap-rotina-dor {
  margin:clamp(12px, 1.5vw, 16px) 0 0; font-size:clamp(13px, 1.15vw, 14.5px);
  line-height:1.5; color:#f0c377; font-weight:600;
}
.ap .ap-rotina-ganho {
  margin:clamp(12px, 1.5vw, 16px) 0 clamp(14px, 1.8vw, 20px);
  font-size:clamp(13.5px, 1.2vw, 15.5px); line-height:1.45; color:#fff;
  font-weight:800;
}

.ap .ap-rotina-seta { display:grid; place-items:center; color:#6ba3f5; }
.ap .ap-rotina-seta svg { inline-size:28px; block-size:auto; }
@media (max-width:979px) {
  /* No celular o par se lê de cima para baixo. */
  .ap .ap-rotina-seta { justify-self:start; transform:rotate(90deg); margin-block:2px; }
}

/* ── A tela demonstrativa de cada rotina ──────────────────────────── */
.ap .ap-rotina-tela {
  --ap-cc-apagado:#a9bbdd;
  --ap-cc-vivo:#4d8df0;
  --ap-cc-painel:#101b3d;
  border-radius:var(--raio-lg, 12px); overflow:hidden;
  border:1px solid rgba(255,255,255,.13);
  background:linear-gradient(162deg, #0f1a3a, #0b1230);
  padding-block-end:4px;
}
.ap .ap-rotina-tela .ap-cc-campos { padding:11px 13px 0; }
.ap .ap-rotina-tela .ap-cc-estados { margin:11px 13px 0; }
.ap .ap-rotina-tela .ap-conversa-larga { padding:12px 13px 0; gap:8px; }
.ap .ap-rotina-tela .ap-painelzao-numeros { gap:1px; }
.ap .ap-rotina-tela .ap-painelzao-ok { margin-block-start:0; }
.ap .ap-rotina-tela .ap-ilustracao { margin:10px 13px 10px; color:#7b89a6; }
.ap .ap-rotina-tela .ap-cc-andamento { margin:12px 13px 6px; }
.ap .ap-rotina-tela .ap-cc-barra { margin:0 13px 4px; }

/* O veredito da promoção, dentro da rotina. */
.ap .ap-rotina-tela .ap-cc-veredito {
  margin:11px 13px 0; padding:9px 12px; border-radius:var(--raio-md, 8px);
  font-size:12px; font-weight:700; text-align:center;
  background:rgba(127,224,170,.14); border:1px solid rgba(127,224,170,.4); color:#7fe0aa;
}
.ap .ap-rotina-tela .ap-cc-veredito[data-ap-veredito="bloqueada"] {
  background:rgba(242,109,100,.14); border-color:rgba(242,109,100,.45); color:#ffb4ad;
}