/* Funil de aquisição, conversão e relacionamento — B2C, D2C e B2B. */
.acquisition { position: relative; isolation: isolate; overflow: hidden; margin-bottom: var(--sec); background: #090f25; padding-block: clamp(64px,7vw,108px); }
.acquisition::before { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 26% 52%,#663bdd27,transparent 52%),radial-gradient(ellipse at 76% 100%,#0f837323,transparent 55%); }
.af-heading { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px 80px; align-items: end; margin-bottom: 48px; }
.af-heading .eyebrow { grid-column: 1/-1; }
.af-heading h2 { font-size: clamp(34px,3.7vw,54px); line-height: 1.1; max-width: 20ch; }
.af-heading h2 em { color: #b99eff; font-style: normal; }
.af-heading > p { color: #bcc5df; font-size: 18px; line-height: 1.65; max-width: 49ch; }
.af-layout { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.85fr); gap: clamp(40px,5vw,80px); align-items: center; }
.af-visual { min-width: 0; margin: 0; }
.af-topline { display: flex; justify-content: space-between; align-items: center; color: #a8b6d3; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 0 0 15px; }
.af-topline > span { display: inline-flex; gap: 9px; align-items: center; }
.af-topline > span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #79efb6; box-shadow: 0 0 12px #79efb6; }
.aq-motion { border: 0; background: none; padding: 8px 0 8px 10px; font-size: 11px; color: #a8b6d3; }
.af-funnel { position: relative; padding: 7px 38px 26px 0; }
.af-flow { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; pointer-events: none; overflow: visible; }
.af-flow .af-thread { stroke: #cabaff; stroke-width: 1; opacity: .2; }
.af-flow .af-return { stroke: #66dca4; stroke-width: 1.2; opacity: .5; stroke-dasharray: 4 6; }
.af-flow .af-particle { stroke: #c0ffdf; stroke-width: 4.5; stroke-dasharray: 1.5 23.5; stroke-linecap: round; filter: drop-shadow(0 0 5px #87efbb); animation: af-travel 6s linear infinite; }
.af-flow .af-particle:nth-of-type(2) { stroke: #c6acff; animation-delay: -2.5s; }
.af-flow .af-particle:nth-of-type(4) { animation-delay: -4s; }
.af-flow .af-particle:nth-of-type(6) { animation-delay: -1s; }
.af-stages { display: flex; flex-direction: column; align-items: center; gap: 12px; position: relative; }
.af-stages > li { width: var(--af-width); position: relative; }
.af-stage { position: relative; isolation: isolate; border: 0; padding: 19px 12%; width: 100%; min-height: 94px; display: flex; flex-direction: column; gap: 5px; justify-content: center; align-items: center; color: #fff; background: transparent; text-align: center; transition: filter .25s; }
.af-stage::before { content: ''; position: absolute; inset: 0; z-index: -1; clip-path: polygon(0 0,100% 0,94% 100%,6% 100%); background: linear-gradient(180deg,#ffffff24 0 1px,transparent 1px),linear-gradient(110deg,var(--af-color),var(--af-shade)); box-shadow: inset 0 -1px 0 #ffffff2b; }
.af-stage::after { content: ''; position: absolute; inset: 0; z-index: -1; clip-path: polygon(0 0,100% 0,94% 100%,6% 100%); background: linear-gradient(110deg,transparent 25%,#ffffff13 48%,transparent 65%); opacity: .35; }
.af-stage:hover, .af-stage[aria-pressed="true"] { filter: brightness(1.3) drop-shadow(0 0 16px #8752ff24); }
.af-stage[aria-pressed="true"]::after { opacity: 1; box-shadow: inset 0 2px 0 #e2d5ff; }
.af-stage:focus-visible { outline: 2px solid #bcefd8; outline-offset: 3px; }
.af-stage-top { display: inline-flex; gap: 8px; align-items: center; font: 500 10px/1.3 var(--font-body); letter-spacing: .13em; text-transform: uppercase; color: #e2dcff; }
.af-stage-top .i { width: 13px; height: 13px; }
.af-stage strong { font: 600 clamp(16px,1.45vw,21px)/1.25 var(--font-display); letter-spacing: -.02em; }
.af-stage small { color: #e1dcf5; font-size: 12px; line-height: 1.45; }
.af-stage-brand { display: inline-flex; align-items: center; gap: 8px; }
.af-stage-brand { width: min(177px,100%); }
.af-stage-brand img { width: 100%; height: auto; }
.af-stages > li:nth-child(4) .af-stage { min-height: 112px; }
.af-stages > li:nth-child(5) .af-stage { min-height: 106px; }
.af-stages > li:nth-child(5) .af-stage-top, .af-stages > li:nth-child(5) .af-stage small { color: #cdf3e3; }
.af-loop-label { position: absolute; right: -10px; top: 62%; writing-mode: vertical-rl; color: #84d9b2; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.af-caption { color: #abb8d3; font-size: 12px; line-height: 1.5; text-align: center; padding-right: 38px; margin-top: 8px; }
.af-caption span { color: #8becbc; }
.af-explain { min-width: 0; border-top: 1px solid #ffffff25; padding-top: 28px; }
.af-panel { min-height: 390px; }
.af-panel-label { color: #8eedbf; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .15em; margin-bottom: 20px; display: block; }
.af-panel h3 { font-size: clamp(25px,2.35vw,34px); line-height: 1.18; margin-bottom: 20px; max-width: 22ch; }
.af-panel > p { color: #b7c1db; font-size: 16px; line-height: 1.65; }
.af-tactics { display: grid; gap: 16px; margin-top: 25px; }
.af-tactics li { display: grid; grid-template-columns: 6px 1fr; gap: 12px; align-items: baseline; color: #aebbd6; font-size: 14px; line-height: 1.6; }
.af-tactics li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #b294ff; }
.af-tactics b { color: #f0ebff; font-weight: 600; }
.af-panel-note { font-size: 11px !important; color: #92a1bf !important; margin-top: 20px; }
.af-panel-note a { text-underline-offset: 3px; }
.af-nav { display: flex; gap: 8px; align-items: center; padding-block: 22px; }
.af-nav-label { color: #a9b5cf; font-size: 12px; margin-right: auto; }
.af-dot { border: 1px solid #ffffff28; border-radius: 50%; background: transparent; color: #afbbd6; width: 30px; height: 30px; font-size: 11px; }
.af-dot[aria-pressed="true"] { color: #fff; background: #7033ff; border-color: #a27cff; }
.af-cta { padding-top: 24px; border-top: 1px solid #ffffff1c; }
.af-cta .link-arrow { font-size: 15px; }
.af-support { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 22px; border-top: 1px solid #ffffff1f; margin-top: 52px; padding-top: 25px; }
.af-support > span { color: #8c99b6; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.af-support ul { display: flex; flex-wrap: wrap; gap: 10px 23px; }
.af-support li { display: flex; gap: 7px; align-items: center; color: #c1cce3; font-size: 12px; }
.af-support .i { width: 15px; height: 15px; color: #ad94ec; }
.acquisition[data-paused="true"] .af-particle, .acquisition.aq-offscreen .af-particle { animation-play-state: paused; }
@keyframes af-travel { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@media (max-width:1099px) {
  .af-heading { gap: 20px 40px; }
  .af-heading h2 { font-size: 39px; }
  .af-heading > p { font-size: 16px; }
  .af-layout { gap: 30px; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); }
  .af-funnel { padding-right: 24px; }
  .af-stage { padding-inline: 9%; }
  .af-stage strong { font-size: 16px; }
  .af-stage small { font-size: 11px; }
  .af-stage-top { font-size: 9px; }
  .af-stages > li { width: calc(var(--af-width) + (100% - var(--af-width)) * .22); }
  .af-panel { min-height: 430px; }
  .af-panel h3 { font-size: 27px; }
  .af-support { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width:759px) {
  .af-heading { grid-template-columns: 1fr; margin-bottom: 32px; }
  .af-heading h2 { font-size: 34px; max-width: 19ch; }
  .af-heading > p { max-width: 50ch; }
  .af-layout { grid-template-columns: 1fr; gap: 38px; }
  .af-visual { max-width: 580px; width: 100%; margin-inline: auto; }
  .af-funnel { padding-right: 20px; }
  .af-stages { gap: 10px; }
  .af-stage { min-height: 100px; padding-block: 16px; gap: 7px; }
  .af-stage strong { font-size: 16px; }
  .af-stage small { font-size: 11px; }
  .af-stages > li { width: calc(var(--af-width) + (100% - var(--af-width)) * .4); }
  .af-stage-top { font-size: 9px; }
  .af-loop-label { right: -2px; }
  .af-caption { padding-right: 0; }
  .af-panel { min-height: 380px; }
  .af-panel h3 { font-size: 27px; max-width: 25ch; }
  .af-panel > p { font-size: 15px; }
  .af-topline { font-size: 9px; letter-spacing: .1em; }
  .af-tactics { gap: 18px; }
  .af-support { margin-top: 36px; }
  .af-support ul { gap: 13px 20px; }
}

/* A loja se destaca como destino de conversão, independentemente da etapa ativa. */
.af-stage.af-conversion { color: #231546; filter: drop-shadow(0 0 20px #b39aff35); padding-block: 17px; gap: 7px; }
.af-stage.af-conversion::before { background: linear-gradient(115deg,#f8f4ff,#d9c7ff); box-shadow: inset 0 2px 0 #fff; }
.af-stage.af-conversion .af-stage-top { color: #614788; }
.af-stage.af-conversion .af-stage-brand strong { font-size: clamp(19px,1.75vw,25px); }
.af-stage.af-conversion small { color: #614788; }
.af-conversion-tag { font-size: 12px; line-height: 1.4; font-weight: 700; }
.af-stage.af-conversion:hover, .af-stage.af-conversion[aria-pressed="true"] { filter: brightness(1.06) drop-shadow(0 0 24px #b39aff60); }
.af-stage.af-conversion:focus-visible { outline-color: #b99eff; }
.af-integration-copy { grid-column: 1/-1; color: #aebbd6; font-size: 14px; line-height: 1.75; max-width: 110ch; }
.af-integration-copy strong { color: #e1e8fa; font-weight: 600; }
.af-integration-copy a { display: inline-flex; align-items: center; gap: 6px; color: #8eedbf; text-underline-offset: 4px; white-space: nowrap; }
.af-integration-copy a .i { color: currentColor; }
@media (max-width:759px) {
  .af-stage.af-conversion .af-stage-brand strong { font-size: 18px; }
  .af-stage-brand { width: min(154px,100%); }
  .af-conversion-tag { font-size: 11px; }
  .af-integration-copy { font-size: 13px; }
}

@media (prefers-reduced-motion:reduce) {
  .acquisition .af-particle { animation: none; stroke-dashoffset: 35; }
  .acquisition .af-stage { transition: none; }
  .acquisition .aq-motion { display: none; }
}
