/* ===== 01_header.css ===== */
/* =====================================================================
   01 · Barra de telefones (.top-) · Cabeçalho fixo (.hd-)
        Menu suspenso Funcionalidades (.mega-) · Menu mobile (.drawer-)
   Depende das variáveis do DS: --topbar-h, --header-h, --header-h-scrolled
   ===================================================================== */

/* ---------- Barra de telefones ---------- */
.top-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 220;
  height: var(--topbar-h); padding-right: var(--hd-sbw, 0px);
  background: var(--navy); color: rgba(255, 255, 255, .82);
  font-size: 12.5px; line-height: 1.2;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06);
}
.top-bar__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.top-bar__group { display: flex; align-items: center; gap: 12px; min-width: 0; white-space: nowrap; }
.top-bar__group > * { flex: none; } /* nada encolhe (ícones viram pontos); o que não couber é escondido por breakpoint */
.top-bar__left { overflow: hidden; padding-block: 8px; margin-block: -8px; } /* o recorte não corta o anel de foco */
.top-bar__right { gap: 10px; flex: none; }
.top-q { font-weight: 700; color: #fff; }
.top-q--soft { font-weight: 500; color: rgba(255, 255, 255, .62); }
.top-sup, .top-link, .top-sales {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0;
  color: rgba(255, 255, 255, .82); transition: color var(--dur-2);
}
.top-sup { color: #fff; font-weight: 600; }
.top-sup__ico { display: none; }
.top-link::after, .top-sales::after, .top-sup::after {
  content: ""; position: absolute; left: 20px; right: 0; bottom: 1px; height: 1px; background: currentColor; opacity: .55;
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-2) var(--ease-out);
}
.top-sup::after { left: 0; }
.top-link:hover, .top-link:focus-visible { color: #fff; }
.top-link:hover::after, .top-sales:hover::after, .top-sup:hover::after { transform: scaleX(1); }
.top-ico { display: inline-grid; place-items: center; color: var(--teal-bright); transition: transform var(--dur-3) var(--ease-spring); }
.top-ico svg { width: 14px; height: 14px; max-width: none; }
.top-link--mail .top-ico { color: rgba(255, 255, 255, .7); }
.top-link:hover .top-ico, .top-sales:hover .top-ico, .top-sup:hover .top-ico { transform: scale(1.2) rotate(-10deg); }
.top-dot { color: rgba(255, 255, 255, .4); }
.top-sales { color: var(--teal-bright); }
.top-sales:hover { color: #8FE6CF; }

/* ---------- Cabeçalho fixo ---------- */
.hd {
  position: fixed; top: var(--topbar-h); left: 0; right: 0; z-index: 210;
  height: var(--header-h); padding-right: var(--hd-sbw, 0px);
  background: rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 12px 32px -20px rgba(45, 54, 69, 0);
  transition: height var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2);
}
html.scrolled .hd { height: var(--header-h-scrolled); background: rgba(255, 255, 255, .97); box-shadow: 0 12px 32px -20px rgba(45, 54, 69, .35); }
.hd.is-mega-open { box-shadow: 0 12px 32px -20px rgba(45, 54, 69, .35); }
.hd__in { height: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; }
.hd__logo { display: inline-flex; align-items: center; min-width: 123px; border-radius: 8px; } /* largura fixa: a nav não desloca quando o logo encolhe */
.hd__logo img { height: 40px; width: auto; transition: height var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.hd__logo:hover img { transform: translateY(-1px); }
html.scrolled .hd__logo img { height: 36px; }

/* navegação */
.hd__nav { position: relative; justify-self: center; height: 100%; }
.hd__list { display: flex; align-items: stretch; height: 100%; gap: 2px; }
.hd__item { display: flex; align-items: center; }
.hd__link {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 10px;
  font-weight: 600; font-size: 15px; color: var(--ink); white-space: nowrap; transition: color var(--dur-2);
}
.hd__link:hover, .hd__item.is-active > .hd__link, .hd__item.is-open > .hd__link, .hd__item--mega:hover > .hd__link { color: var(--teal-d); }
.hd__link .badge-novo { position: relative; margin-left: 1px; }
.hd__link .badge-novo::after {
  content: ""; position: absolute; inset: -3px; border-radius: 9px; border: 2px solid var(--teal); opacity: 0;
  animation: hdPing 2.2s var(--ease-out) 1.6s 3;
}
.hd__item--mega > .hd__link { padding-right: 0; border-radius: 10px 0 0 10px; }
.hd__caret {
  width: 24px; height: 34px; margin-right: 4px; display: grid; place-items: center; border-radius: 0 10px 10px 0;
  color: var(--muted); transition: color var(--dur-2);
}
.hd__caret svg { width: 13px; height: 13px; transition: transform var(--dur-3) var(--ease-spring); }
.hd__item--mega:hover .hd__caret, .hd__item.is-open .hd__caret { color: var(--teal-d); }
.hd__item.is-open .hd__caret svg { transform: rotate(180deg); }
.hd__ind {
  position: absolute; left: 0; top: calc(50% + 12px); height: 2px; width: 0; border-radius: 2px; background: var(--teal);
  opacity: 0; pointer-events: none;
  transition: transform .45s var(--ease-out), width .45s var(--ease-out), opacity .25s;
}
.hd__ind.is-on { opacity: 1; }

/* ações à direita */
.hd__actions { display: flex; align-items: center; gap: 14px; justify-self: end; }
.hd__login {
  position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 8px 4px 8px 18px;
  font-weight: 600; font-size: 15px; color: var(--ink); white-space: nowrap; transition: color var(--dur-2);
}
.hd__login::before { content: ""; position: absolute; left: 0; top: 50%; height: 22px; width: 1px; background: var(--line-2); transform: translateY(-50%); }
.hd__login:hover { color: var(--teal-d); }
.hd__login-ico { display: none; color: var(--teal-d); }
.hd__burger { display: none; width: 44px; height: 44px; border-radius: 12px; place-items: center; color: var(--navy); transition: background var(--dur-2); }
.hd__burger:hover { background: var(--bg); }
.hd__burger-box { position: relative; display: block; width: 22px; height: 16px; }
.hd__burger-box span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1), top var(--dur-2) var(--ease-out), width var(--dur-2) var(--ease-out);
}
.hd__burger-box span:nth-child(1) { top: 0; }
.hd__burger-box span:nth-child(2) { top: 7px; width: 72%; }
.hd__burger-box span:nth-child(3) { top: 14px; }
.hd__burger.is-open .hd__burger-box span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.hd__burger.is-open .hd__burger-box span:nth-child(2) { opacity: 0; width: 0; transform: translateX(-6px); }
.hd__burger.is-open .hd__burger-box span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* ---------- Menu suspenso Funcionalidades ---------- */
.mega {
  position: absolute; top: 100%; left: 50%; z-index: 5; width: 800px; margin-left: -400px; padding-top: 10px;
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transform-origin: 50% 0;
  transition: opacity .18s ease, transform .18s ease, visibility 0s .18s;
}
.mega.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .28s var(--ease-out), transform .28s var(--ease-out), visibility 0s; }
.mega::before { /* seta que aponta para o item do menu */
  content: ""; position: absolute; z-index: 2; top: 4px; left: var(--notch, 60px); width: 12px; height: 12px;
  background: #fff; border-radius: 2px; transform: rotate(45deg); box-shadow: -1px -1px 0 rgba(45, 54, 69, .06);
}
.mega__panel {
  display: grid; grid-template-columns: 1fr 356px; background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 32px 70px -24px rgba(20, 30, 45, .45), 0 0 0 1px rgba(45, 54, 69, .06);
}
.mega__col { padding: 22px 22px 24px; min-width: 0; }
.mega__title { margin: 0 0 12px 12px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.mega__list { display: grid; gap: 2px; }
.mega__item { position: relative; display: flex; align-items: center; gap: 14px; padding: 9px 12px; border-radius: 12px; isolation: isolate; }
.mega__item::before { /* fundo que desliza no hover */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 12px; background: var(--bg);
  opacity: 0; transform: scaleX(.55); transform-origin: left; transition: transform .38s var(--ease-out), opacity .22s;
}
.mega__item:hover::before, .mega__item:focus-visible::before { opacity: 1; transform: none; }
.mega__item::after { /* seta que surge */
  content: "→"; margin-left: auto; padding-left: 10px; font-weight: 700; color: var(--c); opacity: 0;
  transform: translateX(-6px); transition: transform .3s var(--ease-out), opacity .2s;
}
.mega__item:hover::after, .mega__item:focus-visible::after { opacity: 1; transform: none; }
.mega__ico {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px;
  background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c);
  transition: background var(--dur-2), color var(--dur-2), transform .45s var(--ease-spring);
}
.mega__ico svg { width: 18px; height: 18px; }
.mega__item:hover .mega__ico, .mega__item:focus-visible .mega__ico { background: var(--c); color: #fff; transform: scale(1.06) rotate(-5deg); }
.mega__txt { display: grid; gap: 1px; min-width: 0; }
.mega__name { font-weight: 700; font-size: 15px; line-height: 1.25; color: var(--navy); }
.mega__desc { font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.mega__col--news { display: flex; flex-direction: column; background: var(--grad-dark); color: #fff; }
.mega__col--news .mega__title { margin-left: 0; color: var(--teal-bright); }
.mega__news { display: grid; gap: 10px; }
.mega__card {
  display: grid; gap: 3px; padding: 12px 14px; border-radius: 12px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
  transition: background var(--dur-2), border-color var(--dur-2), transform .35s var(--ease-out);
}
.mega__card:hover, .mega__card:focus-visible { background: rgba(255, 255, 255, .13); border-color: rgba(93, 211, 180, .55); transform: translateX(4px); }
.mega__card-t { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; color: #fff; }
.mega__card .mega__desc { color: var(--on-dark-muted); }
.mega__all { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-weight: 700; font-size: 14px; color: var(--teal-bright); }
.mega__all .arr { display: inline-block; transition: transform var(--dur-2) var(--ease-out); }
.mega__all:hover .arr { transform: translateX(4px); }
/* coreografia de entrada: itens escalonados 30 ms */
.mega.is-open .mega__list > li, .mega.is-open .mega__news > li, .mega.is-open .mega__all {
  animation: hdMegaItem .5s var(--ease-out) both; animation-delay: calc(50ms + var(--i, 0) * 30ms);
}

/* ---------- Menu mobile (drawer) ---------- */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 300; background: rgba(20, 26, 34, .5);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s .35s;
}
.drawer-overlay.is-open { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }
.drawer {
  position: fixed; top: 0; right: 0; z-index: 310; height: 100vh; height: 100dvh; width: min(320px, calc(100vw - 44px));
  display: flex; flex-direction: column; background: #fff; box-shadow: -30px 0 60px -30px rgba(20, 30, 45, .5);
  transform: translateX(102%); visibility: hidden; transition: transform .45s var(--ease-out), visibility 0s .45s;
}
.drawer.is-open { transform: none; visibility: visible; transition: transform .45s var(--ease-out), visibility 0s; }
.drawer:focus, .drawer:focus-visible { outline: none; } /* o foco inicial vai para o diálogo em si */
.drawer__head { display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--line); }
.drawer__logo { display: inline-flex; border-radius: 8px; }
.drawer__logo img { height: 32px; width: auto; }
.drawer__close { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--bg); color: var(--navy); transition: background var(--dur-2), transform var(--dur-3) var(--ease-out); }
.drawer__close:hover { background: #E9EDF1; transform: rotate(90deg); }
.drawer__close svg { width: 20px; height: 20px; }
.drawer__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 10px 12px 18px; }
.drawer__list { display: grid; gap: 2px; }
.drawer__link {
  display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 8px 10px; border-radius: 10px;
  font-weight: 700; font-size: 15.5px; line-height: 1.25; color: var(--navy); transition: background var(--dur-2), color var(--dur-2);
}
.drawer__link:hover, .drawer__link:active { background: var(--bg); color: var(--teal-d); }
.drawer__link .badge-novo { margin-left: 2px; }
.drawer__label { margin: 18px 10px 8px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.drawer__link--etapa, .drawer__link--news { font-weight: 700; font-size: 15px; }
.drawer__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 14%, #fff); }
.drawer__txt { display: grid; min-width: 0; }
.drawer__txt small { font-size: 12.5px; font-weight: 500; line-height: 1.3; color: var(--muted); }
.drawer__news-t { display: inline-flex; align-items: center; gap: 8px; }
.drawer__contact { margin: 18px 10px 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13.5px; font-weight: 600; }
.drawer__contact a { display: inline-flex; align-items: center; gap: 8px; color: var(--teal-d); min-height: 44px; }
.drawer__contact-ico { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--teal-l); }
.drawer__foot {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line); background: #fff;
}
.drawer__foot .btn { padding-inline: 12px; }
.drawer.is-open .drawer__anim { animation: hdDrawerItem .55s var(--ease-out) both; animation-delay: calc(90ms + var(--i, 0) * 28ms); }

/* trava do scroll enquanto o drawer está aberto (compensa a barra de rolagem) */
html.hd-lock, html.hd-lock body { overflow: hidden; }
html.hd-lock body { padding-right: var(--hd-sbw, 0px); }

/* ---------- Coreografia de entrada (carregamento da página) ---------- */
html.js .top-bar { animation: hdTopIn .55s var(--ease-out) both; }
html.js .hd { animation: hdBarIn .6s var(--ease-out) .08s both; }
html.js .hd__logo, html.js .hd__item > .hd__link, html.js .hd__caret, html.js .hd__login, html.js .hd__cta, html.js .hd__burger {
  animation: hdItemIn .55s var(--ease-out) both; animation-delay: calc(.24s + var(--n, 0) * 45ms);
}
.hd__item:nth-child(2) { --n: 1; } .hd__item:nth-child(3) { --n: 2; } .hd__item:nth-child(4) { --n: 3; }
.hd__item:nth-child(5) { --n: 4; } .hd__item:nth-child(6) { --n: 5; }
.hd__login { --n: 6; } .hd__cta { --n: 7; } .hd__burger { --n: 7; }

@keyframes hdTopIn { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes hdBarIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes hdItemIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes hdPing { 0% { transform: scale(.85); opacity: .7; } 60%, 100% { transform: scale(1.3); opacity: 0; } }
@keyframes hdMegaItem { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes hdDrawerItem { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

/* ---------- Responsivo ---------- */
@media (max-width: 1280px) {
  .hd__in { gap: 14px; }
  .hd__link { font-size: 14.5px; padding: 8px 9px; }
  .hd__actions { gap: 10px; }
  .hd__login { padding-left: 14px; }
}
@media (max-width: 1100px) {
  .hd__nav { display: none; }
  .hd__burger { display: grid; }
  .hd__login { padding-left: 0; }
  .hd__login::before { display: none; }
  .hd__login-ico { display: inline-grid; }
}
@media (max-width: 1200px) {
  .top-link--mail, .top-dot { display: none; }
}
@media (max-width: 980px) {
  .top-q { display: none; }
}
@media (max-width: 800px) {
  .top-link--p2, .top-link--p3 { display: none; }
}
@media (max-width: 680px) {
  .top-link--p1 { display: none; }
  .top-sup__ico { display: inline-grid; }
  .top-sup { font-weight: 700; }
  .top-bar__group { gap: 8px; }
  .hd__in { gap: 10px; }
  .hd__actions { gap: 4px; }
  .hd__cta { display: none; }
  .hd__logo { min-width: 0; }
  .hd__logo img { height: 34px; }
  html.scrolled .hd__logo img { height: 32px; }
}
@media (max-width: 420px) {
  .top-sales__num { display: none; }
  .top-bar { font-size: 12px; }
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .hd__link .badge-novo::after { display: none; }
  .mega { transform: none; }
  .drawer { transform: translateX(102%); }
  .drawer.is-open { transform: none; }
}


/* ===== 02_hero.css ===== */
/* =====================================================================
   02 · Hero + faixa de números  (prefixo .hero-)
   Coreografia de entrada no load (CSS, atrasos encadeados):
   kicker → pill → H1 linha a linha (mask reveal) → parágrafo → chips (pop,
   70 ms entre eles) → caixa NOVO → botões → nota. Visual: moldura entra da
   direita relaxando a rotação; card do Agente IA "pop" (~1,35 s) e depois o
   JS faz bolha → pontinhos → digitação. Linha tracejada se desenha em 2,5 s.
   ===================================================================== */

.hero {
  /* sangria do visual para a direita do container (só em telas largas) */
  --hero-bleed: clamp(0px, (100vw - 1200px) / 2 - 20px, 80px);
  --hero-overhang: 205px;            /* quanto o card do agente desce abaixo da moldura */
  padding-top: calc(var(--header-total) + 56px);
  padding-bottom: 0;
}
.hero-body { position: relative; padding-bottom: clamp(56px, 6vw, 76px); }

/* ---------- Fundo: brilho teal + rota tracejada ---------- */
.hero-bg { position: absolute; inset: calc(-1 * (var(--header-total) + 56px)) 0 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-glow {
  position: absolute; right: -12%; top: -28%; width: 62%; height: 78%;
  background: radial-gradient(ellipse at center, rgba(67, 176, 152, .34) 0%, rgba(67, 176, 152, .12) 38%, rgba(67, 176, 152, 0) 68%);
}
.hero-route { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-route__line { fill: none; stroke: #fff; stroke-opacity: .25; stroke-width: 2; stroke-dasharray: 9 9; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hero-route__draw { fill: none; stroke: #fff; stroke-width: 18; stroke-dasharray: 1; stroke-dashoffset: 1; animation: pxDash 2.5s cubic-bezier(.45, 0, .2, 1) .3s forwards; }

/* ---------- Grid ---------- */
.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  column-gap: 36px; align-items: center;
}
.hero-text { min-width: 0; }

/* ---------- Coluna de texto ---------- */
.hero-kicker {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  font-size: 19px; font-weight: 700; letter-spacing: -.01em; line-height: 1.4;
  animation: pxFadeUp .8s var(--ease-out) .05s backwards;
}
.hero-kicker__sep { color: rgba(255, 255, 255, .38); }
.hero-kicker__teal { color: var(--teal-bright); }

.hero-pill { margin-top: 18px; max-width: 100%; white-space: normal; animation: pxFadeUp .8s var(--ease-out) .15s backwards; }
.hero-pill__star { flex: none; color: var(--teal-bright); }

.hero-h1 { margin-top: 22px; font-size: clamp(2.2rem, 1.66rem + 1.76vw, 3.25rem); line-height: 1.08; letter-spacing: -.025em; }
.hero-h1__line { display: block; overflow: visible clip; padding: .08em 0 .12em; margin: -.08em 0 -.12em; }
.hero-h1__inner { display: block; animation: heroLineUp 1s var(--ease-out) .25s backwards; }
.hero-h1__line:nth-child(2) .hero-h1__inner { animation-delay: .37s; }
.hero-h1__teal { color: var(--teal-bright); }
@keyframes heroLineUp { from { transform: translateY(112%); opacity: 0; } to { transform: none; opacity: 1; } }

.hero-lead { margin-top: 24px; max-width: 34em; font-size: 17.5px; line-height: 1.6; color: var(--on-dark-muted); animation: pxFadeUp .8s var(--ease-out) .5s backwards; }
.hero-lead strong { color: #fff; }

/* chips da jornada */
.hero-chips { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; }
.hero-chips__item { display: flex; align-items: center; animation: pxPop .55s var(--ease-spring) calc(.62s + var(--i, 0) * 70ms) backwards; }
.hero-chips__item + .hero-chips__item::before { content: "›"; margin: 0 7px; color: rgba(255, 255, 255, .4); font-size: 15px; font-weight: 700; line-height: 1; }
.hero .hero-chip {
  gap: 7px; padding: 6px 10px; font-size: 11px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; line-height: 1.3;
  transition: border-color var(--dur-2), background-color var(--dur-2), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2);
}
.hero .hero-chip .dot { width: 7px; height: 7px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 28%, transparent); }
.hero .hero-chip:hover { border-color: rgba(255, 255, 255, .42); background: rgba(255, 255, 255, .13); transform: translateY(-1px); }
.hero .chip.hero-chip--fill { background: var(--teal); border-color: var(--teal); color: #fff; box-shadow: 0 10px 22px -8px var(--teal-glow), 0 0 0 4px rgba(67, 176, 152, .16); }
.hero .chip.hero-chip--fill:hover { background: #3CA48C; border-color: #3CA48C; box-shadow: 0 12px 26px -8px var(--teal-glow), 0 0 0 6px rgba(67, 176, 152, .18); }
.hero-chip__ico { display: inline-flex; }
.hero-chip__ico svg { width: 13px; height: 13px; }

/* caixa NOVO */
.hero-novo {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; max-width: 100%;
  margin-top: 22px; padding: 10px 16px 10px 12px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 12px;
  background: rgba(255, 255, 255, .04); font-size: 15px; color: var(--on-dark-muted);
  animation: pxFadeUp .8s var(--ease-out) .88s backwards;
}
.hero-novo__text { flex: 1 1 200px; min-width: 0; }
.hero-novo strong { color: #fff; }

/* botões e nota */
.hero-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero-actions .btn { animation: pxFadeUp .8s var(--ease-out) .98s backwards; }
.hero-actions .btn:nth-child(2) { animation-delay: 1.06s; }
.hero-note { margin-top: 18px; font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, .64); animation: pxFadeUp .8s var(--ease-out) 1.14s backwards; }
.hero-note strong { color: #fff; }
.hero-note__item { white-space: nowrap; }
.hero-note__item:not(:last-child)::after { content: "·"; margin: 0 3px 0 7px; color: rgba(255, 255, 255, .4); }

/* ---------- Visual: moldura 3D + card do Agente IA ---------- */
.hero-visual { position: relative; min-width: 0; margin-right: calc(-1 * var(--hero-bleed)); padding-bottom: var(--hero-overhang); }
.hero-float { position: relative; perspective: 1400px; animation: pxFloat 7s ease-in-out infinite; }
/* A entrada da moldura é uma TRANSIÇÃO (estado inicial → .is-in), não uma animação:
   uma @keyframes no elemento 3D faz o Chromium headless descartar a camada em
   capturas de página inteira (fullPage), o que atrapalharia a revisão do protótipo. */
.hero-frame {
  margin: 0; transform: rotateY(-7deg) rotateX(2deg); transform-origin: 50% 50%;
  transition: transform 1.4s var(--ease-out), opacity 1s var(--ease-out);
}
html.js .hero-visual:not(.is-in) .hero-frame { opacity: 0; transform: translateX(72px) rotateY(-20deg) rotateX(5deg); }
.hero-visual:hover .hero-frame { transform: rotateY(-1.5deg) rotateX(.5deg); transition-duration: 1s; }
.hero-frame__img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: left top; }

.hero-agent {
  position: absolute; right: 0; bottom: calc(-1 * var(--hero-overhang)); z-index: 2;
  width: 300px; max-width: 100%; background: #fff; color: var(--ink); border-radius: 16px;
  box-shadow: 0 36px 70px -22px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .55);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
html.js .hero-visual:not(.is-in) .hero-agent { opacity: 0; }
.hero-visual.is-in .hero-agent { animation: pxPop .75s var(--ease-spring) 1.2s backwards; }
.hero-agent:hover { transform: translateY(-3px); box-shadow: 0 44px 80px -24px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .6); }

.hero-agent__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.hero-agent__avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-teal); color: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(67, 176, 152, .45); }
.hero-agent__avatar svg { width: 18px; height: 18px; }
.hero-agent__bar { flex: none; width: 3px; height: 22px; border-radius: 2px; background: var(--teal); }
.hero-agent__title { font-weight: 800; font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); }
.hero-agent__status { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--teal-l); color: var(--atrair-text); font-size: 11.5px; font-weight: 800; }
.hero-agent__dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #2DBE7A; animation: pxBreath 2.4s ease-in-out infinite; }
.hero-agent__dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid #2DBE7A; animation: pxPulseRing 2.4s ease-out infinite; }

.hero-agent__body { display: grid; gap: 10px; padding: 12px 14px 14px; }
.hero-agent__mode { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #FAFBFC; }
.hero-agent__mode-ico { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--decidir-soft); color: var(--decidir); }
.hero-agent__mode-ico svg { width: 16px; height: 16px; }
.hero-agent__mode-text { display: grid; min-width: 0; line-height: 1.25; }
.hero-agent__mode-text b { font-size: 12.5px; font-weight: 800; color: var(--navy); }
.hero-agent__mode-text small { font-size: 11px; color: var(--muted); }
.hero-agent__mode-on { margin-left: auto; flex: none; font-size: 11.5px; font-weight: 800; color: var(--atrair-text); } /* variante escura: 11,5 px sobre claro */

.hero-agent__bubble {
  justify-self: start; max-width: 100%; padding: 8px 12px; border-radius: 12px 12px 12px 4px;
  background: #EEF1F4; font-size: 12.5px; line-height: 1.45; color: var(--ink);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.hero-agent__bubble strong { color: var(--navy); }
html.js .hero-agent__bubble:not(.is-on) { opacity: 0; transform: translateY(6px) scale(.97); }

.hero-agent__label { display: flex; align-items: center; gap: 6px; margin-top: -2px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-d); }
.hero-agent__label svg { width: 14px; height: 14px; }

.hero-agent__sug {
  position: relative; min-height: calc(12.5px * 1.5 * 3 + 20px);
  padding: 9px 12px; border: 1px solid rgba(67, 176, 152, .55); border-radius: 10px;
  background: var(--teal-l); font-size: 12.5px; line-height: 1.5; color: var(--ink);
}
.hero-agent__typing { display: none; position: absolute; left: 12px; top: 14px; gap: 4px; align-items: center; height: 14px; }
.hero-agent__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); animation: heroDots 1s ease-in-out infinite; }
.hero-agent__typing i:nth-child(2) { animation-delay: .15s; }
.hero-agent__typing i:nth-child(3) { animation-delay: .3s; }
.hero-agent__sug.is-typing .hero-agent__typing { display: flex; }
@keyframes heroDots { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
html.js .hero-agent__sug-text:not(.is-on) { opacity: 0; }
.hero-agent__sug-text.is-writing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--teal-d); animation: pxBreath .7s steps(2, end) infinite; }

.hero-agent__actions { display: flex; gap: 8px; }
.hero-agent__btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 9px; font-size: 12.5px; font-weight: 700; background: #EEF1F4; color: var(--navy); line-height: 1.2; }
.hero-agent__btn--send { background: var(--navy); color: #fff; }
.hero-agent.is-ready .hero-agent__btn--send { animation: heroPulse 1.1s ease-out 1; }
@keyframes heroPulse { from { box-shadow: 0 0 0 0 rgba(67, 176, 152, .65); } to { box-shadow: 0 0 0 14px rgba(67, 176, 152, 0); } }

/* ---------- Faixa de números ---------- */
.hero-stats { position: relative; z-index: 1; background: rgba(16, 24, 32, .32); border-top: 1px solid rgba(255, 255, 255, .1); }
.hero-stats__list { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 56px; padding: 22px 0; }
.hero-stat { display: flex; align-items: baseline; gap: 8px; }
.hero-stat__num { position: relative; display: inline-block; font-size: 27px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: #fff; }
.hero-stat__ghost { visibility: hidden; }
.hero-stat__val { position: absolute; left: 0; top: 0; white-space: nowrap; }
.hero-stat__label { font-size: 14px; color: var(--on-dark-muted); }

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  .hero { padding-top: calc(var(--header-total) + 40px); }
  .hero-grid { grid-template-columns: minmax(0, 1fr); row-gap: 52px; }
  .hero-text { max-width: 720px; }
  .hero-h1 { font-size: clamp(2.1rem, 1.3rem + 3vw, 3.4rem); }
  .hero-visual { --hero-overhang: 120px; margin-right: 0; max-width: 760px; }
  .hero-float { perspective: none; }
  .hero-frame, .hero-visual:hover .hero-frame { transform: none; }
  html.js .hero-visual:not(.is-in) .hero-frame { transform: translateY(28px); }
  .hero-agent { width: 272px; }
  .hero-stats__list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; }
}

@media (max-width: 680px) {
  .hero { padding-top: calc(var(--header-total) + 28px); }
  .hero-grid { row-gap: 40px; }
  .hero-kicker { font-size: 16px; }
  .hero-kicker__sep { display: none; } /* as duas frases quebram em linhas próprias: sem ponto solto no fim da linha */
  .hero-lead { font-size: 16px; }
  /* chips em rolagem horizontal, sangrando até as bordas da tela, com máscara nas pontas */
  .hero-chips {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)) calc(-1 * var(--gutter-r));
    padding: 6px var(--gutter-r) 10px var(--gutter);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - 40px), transparent);
  }
  .hero-chips::-webkit-scrollbar { display: none; }
  .hero-chips__item { flex: none; scroll-snap-align: start; scroll-margin-left: var(--gutter); }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  /* visual: moldura reta e card pendurado no canto inferior direito, sem sair da tela */
  .hero-visual { padding-bottom: 0; }
  .hero-float { animation: none; }
  .hero-agent { position: relative; right: auto; bottom: auto; width: min(280px, 100%); margin: -56px 0 0 auto; }
  .hero-stats__list { gap: 18px 16px; padding: 20px 0; }
  .hero-stat { flex-direction: column; align-items: flex-start; gap: 2px; }
  .hero-stat__num { font-size: 24px; }
  .hero-stat__label { font-size: 13px; line-height: 1.35; }
}

@media (max-width: 420px) {
  .hero-pill { font-size: 12px; }
  .hero-actions .btn { white-space: normal; text-align: center; font-size: 15px; padding-inline: 18px; }
  .hero-novo { font-size: 14px; }
  .hero-agent { width: 100%; margin-top: -40px; }
}

@media (max-width: 380px) {
  .hero-pill { font-size: 11px; padding-inline: 12px; }
}

/* ---------- Movimento reduzido: nada fica escondido esperando atraso ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero *, .hero *::before, .hero *::after { animation-delay: 0s !important; }
  .hero-float { animation: none; }
  .hero-frame, .hero-visual:hover .hero-frame { transform: none; }
  .hero-route__draw { stroke-dashoffset: 0; }
}


/* ===== 03_video_resumo.css ===== */
/* =====================================================================
   03 · Vídeo institucional (prefixo .vid-)  +  Resumo da Jornada (prefixo .jor-)

   Coreografia 2 (vídeo): o cabeçalho revela (.rv); a capa entra em escala
   (.rv--scale, 80 ms depois); ao assentar, um brilho atravessa a capa uma
   única vez e, em seguida, dois anéis passam a pulsar sobre o botão
   "Assistir ao vídeo" desenhado na capa. Micro: hover eleva a capa 4 px e
   repete o brilho; foco visível; o painel in-page abre com fade do overlay +
   "pop" do cartão e fecha com a transição inversa.

   Coreografia 3 (jornada): os 5 cards revelam escalonados (--i); quando um
   card entra (.in) a barra colorida cresce da esquerda para a direita e os
   três checks surgem em sequência (120 / 240 / 360 ms). A faixa fecha a
   sequência com os ✓ "carimbando" um a um. Micro: hover eleva o card
   (.card--lift), engrossa a barra (5 → 7 px), dá um bounce no ícone e a seta
   do link desce.
   ===================================================================== */

/* ---------- 2 · Vídeo institucional ---------- */
.vid .sec-head { max-width: 880px; }   /* o título curto cabe numa linha a partir de 1280 px, como no mockup; a margem inferior é a padrão do DS (igual às outras seções) */
.vid-pill__ico { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--teal-d); color: #fff; }
.vid-pill__ico svg { width: 9px; height: 9px; margin-left: 1px; }

.vid-stage { max-width: 972px; margin: 0 auto; }
.vid-cover {
  --vid-ring-x: 8.22%;  /* centro do botão play desenhado na capa (medido na imagem, em % dela) */
  --vid-ring-y: 86.85%;
  position: relative; display: block; width: 100%; padding: 0; border-radius: 22px; overflow: hidden; isolation: isolate;
  background: #1F2A36; text-align: left; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 30px 60px -20px rgba(15, 31, 46, .38), 0 0 0 1px rgba(45, 54, 69, .06);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.vid-cover:hover { transform: translateY(-4px); box-shadow: 0 42px 72px -24px rgba(15, 31, 46, .5), 0 0 0 1px rgba(45, 54, 69, .08); }
.vid-cover:active { transform: translateY(-1px); transition-duration: var(--dur-1); }
.vid-cover:focus-visible { outline: 3px solid var(--teal); outline-offset: 5px; border-radius: 22px; }
.vid-cover__img { width: 100%; height: auto; display: block; }

/* brilho que atravessa a capa: ::before uma vez na entrada, ::after a cada hover */
.vid-cover::before, .vid-cover::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -30%; width: 160%; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .13) 50%, transparent 60%);
  transform: translateX(-60%);
}
html.js .vid-stage.in .vid-cover::before { animation: vidSheen .9s var(--ease-out) .6s 1; }
.vid-cover:hover::after { animation: vidSheen .9s var(--ease-out) 1; }
@keyframes vidSheen {
  0% { transform: translateX(-60%); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateX(60%); opacity: 0; }
}

/* anéis pulsantes sobre o botão desenhado (só depois que a capa assentou) */
.vid-ring {
  position: absolute; left: var(--vid-ring-x); top: var(--vid-ring-y); z-index: 3; pointer-events: none;
  width: clamp(30px, 7.2%, 70px); aspect-ratio: 1; transform: translate(-50%, -50%);
}
.vid-ring::before, .vid-ring::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: 0;
  border: 2px solid rgba(93, 211, 180, .95); box-shadow: 0 0 16px rgba(67, 176, 152, .45), inset 0 0 10px rgba(67, 176, 152, .25);
}
html.js .vid-stage.in .vid-ring::before { animation: pxPulseRing 2.6s cubic-bezier(.2, .6, .3, 1) 1.5s infinite; }
html.js .vid-stage.in .vid-ring::after { animation: pxPulseRing 2.6s cubic-bezier(.2, .6, .3, 1) 2.4s infinite; }

/* selo de duração (o mockup o adiciona por HTML sobre a capa) */
.vid-dur {
  position: absolute; right: 18px; bottom: 16px; z-index: 3; padding: 5px 9px; border-radius: 7px;
  background: rgba(10, 20, 30, .85); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; backdrop-filter: blur(4px);
}

/* painel in-page (vive no <body> depois do init) */
.vid-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; }
.vid-modal__overlay { position: absolute; inset: 0; background: rgba(20, 26, 34, .82); backdrop-filter: blur(6px); opacity: 0; transition: opacity var(--dur-2) ease; }
.vid-modal__box {
  position: relative; z-index: 1; width: min(920px, 100%); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow: auto;
  background: #fff; color: var(--ink); border-radius: 22px; box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .65);
  opacity: 0; transform: translateY(18px) scale(.96);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.vid-modal.is-open .vid-modal__overlay { opacity: 1; }
.vid-modal.is-open .vid-modal__box { opacity: 1; transform: none; }
.vid-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 22px; border-bottom: 1px solid var(--line); }
.vid-modal__title { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 15px; font-weight: 800; color: var(--navy); line-height: 1.3; }
.vid-modal__ico { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--teal-l); color: var(--teal-d); }
.vid-modal__ico svg { width: 12px; height: 12px; margin-left: 1px; }
.vid-modal__dur { font-weight: 700; color: var(--muted); }
.vid-modal__title .proto-tag { margin-left: 0; }
.vid-modal__close { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--navy); background: var(--bg); transition: background var(--dur-2), transform var(--dur-3) var(--ease-out); }
.vid-modal__close:hover { background: #E6EBEF; transform: rotate(90deg); }
.vid-modal__close-ico { display: grid; place-items: center; }
.vid-modal__media { position: relative; margin: 0; background: #1F2A36; }
.vid-modal__media img { width: 100%; height: auto; display: block; }
.vid-modal__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; padding: 16px 22px 18px; }
.vid-modal__msg { font-size: 15px; line-height: 1.5; color: var(--ink); }
.vid-modal__link { font-size: 15px; white-space: nowrap; min-height: 44px; }

/* ---------- 3 · Resumo da Jornada ---------- */
.jor .sec-head { max-width: 1040px; }   /* idem: uma linha em 1440, duas (balanceadas) abaixo disso */
.jor-pill__ico { display: inline-flex; color: var(--teal-bright); }
.jor-pill__ico svg { width: 14px; height: 14px; }

.jor-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.jor-item { display: flex; min-width: 0; }
.jor .jor-card {
  flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; padding: 26px 20px 20px;
  color: var(--ink); border-radius: 16px; box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .55);
}
.jor .jor-card:hover { box-shadow: 0 34px 60px -24px rgba(0, 0, 0, .6); }

/* barra superior: cresce da esquerda para a direita quando o card entra; engrossa no hover */
.jor .jor-card.card--strip::before { height: 5px; transform-origin: left center; transition: height var(--dur-2) var(--ease-out), transform .9s var(--ease-out); }
html.js .jor-item .jor-card.card--strip::before { transform: scaleX(0); }
html.js .jor-item.in .jor-card.card--strip::before { transform: scaleX(1); transition-delay: 0s, calc(var(--i, 0) * 80ms + 160ms); }
.jor .jor-card:hover.card--strip::before { height: 7px; }

.jor-card__head { display: flex; align-items: center; gap: 12px; }
.jor .jor-card__ico { width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--c) 13%, #fff); color: var(--c); }
.jor .jor-card:hover .jor-card__ico { animation: jorBounce .55s var(--ease-spring); }
@keyframes jorBounce {
  0% { transform: translateY(0); }
  35% { transform: translateY(-5px) scale(1.06); }
  70% { transform: translateY(1px); }
  100% { transform: translateY(0); }
}
.jor-card__etapa { font-size: 16px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; color: var(--ct, var(--c)); } /* --ct: variante escura da etapa (AA sobre branco) */

.jor .jor-card__q { margin-top: 16px; font-size: 1.1rem; line-height: 1.32; letter-spacing: -.015em; font-weight: 800; color: var(--navy); }

.jor-card__list { margin-top: 14px; gap: 9px; font-size: 14.25px; line-height: 1.45; color: #4A5563; }
.jor-card__list li { padding-left: 22px; }
.jor-card__list li::before { top: 1px; font-size: 13px; }
html.js .jor-item .jor-card__list li { opacity: 0; }
html.js .jor-item.in .jor-card__list li { animation: pxFadeUp .6s var(--ease-out) both; }
html.js .jor-item.in .jor-card__list li:nth-child(1) { animation-delay: calc(var(--i, 0) * 80ms + 120ms); }
html.js .jor-item.in .jor-card__list li:nth-child(2) { animation-delay: calc(var(--i, 0) * 80ms + 240ms); }
html.js .jor-item.in .jor-card__list li:nth-child(3) { animation-delay: calc(var(--i, 0) * 80ms + 360ms); }

.jor-card__link {
  display: inline-flex; align-items: flex-end; gap: 6px; width: fit-content; margin-top: auto; padding-top: 18px; min-height: 44px;
  font-size: 14.5px; font-weight: 800; line-height: 1.2; color: var(--ct, var(--c));
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; text-decoration-thickness: 1.5px;
  transition: text-decoration-color var(--dur-2);
}
.jor-card__link .arr { display: inline-block; transition: transform var(--dur-2) var(--ease-out); }
.jor-card__link:hover, .jor-card__link:focus-visible { text-decoration-color: currentColor; }
.jor-card__link:hover .arr, .jor-card__link:focus-visible .arr { transform: translateY(3px); }
.jor .jor-card__link:focus-visible { outline-color: var(--c); border-radius: 6px; }

/* dica de rolagem (só no celular) */
.jor-hint { display: none; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: rgba(255, 255, 255, .62); transition: opacity var(--dur-3); }
.jor-hint.is-done { opacity: 0; }
.jor-hint__arr { display: inline-block; animation: jorNudge 1.6s ease-in-out 6; }
.jor-hint.is-done .jor-hint__arr { animation: none; }
@keyframes jorNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }

/* faixa translúcida */
.jor-band { margin-top: 28px; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; background: rgba(255, 255, 255, .06); }
.jor-band__list { display: flex; flex-wrap: wrap; justify-content: space-evenly; gap: 10px 18px; }
.jor-band__item { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; line-height: 1.4; color: #E3E9EF; }
.jor-band__check { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; color: var(--teal-bright); }
.jor-band__check svg { width: 14px; height: 14px; stroke-width: 3; }
html.js .jor-band:not(.in) .jor-band__check { opacity: 0; }
html.js .jor-band.in .jor-band__check { animation: pxPop .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms + 250ms); }

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  /* 3 + 2 (os dois últimos centralizados), cards com a mesma largura */
  .jor-grid { display: flex; flex-wrap: wrap; justify-content: center; }
  .jor-item { flex: 1 1 280px; max-width: calc((100% - 36px) / 3); }
}
@media (max-width: 920px) {
  .jor-item { max-width: calc((100% - 18px) / 2); }
}
@media (max-width: 680px) {
  .vid-cover { border-radius: 16px; }
  .vid-cover:focus-visible { border-radius: 16px; }
  .vid-dur { right: 10px; bottom: 10px; padding: 4px 7px; font-size: 11.5px; }
  .vid-modal { padding: 12px; }
  .vid-modal__box { border-radius: 16px; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
  .vid-modal__head { padding: 8px 8px 8px 16px; }
  .vid-modal__title { font-size: 14px; }
  .vid-modal__foot { padding: 14px 16px 16px; }
  .vid-modal__msg, .vid-modal__link { font-size: 14.5px; }

  /* fileira com rolagem horizontal e snap; sangra até as bordas da tela */
  .jor-grid {
    display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 14px;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    padding: 10px var(--gutter-r) 44px var(--gutter); margin: 0 calc(-1 * var(--gutter-r)) -28px calc(-1 * var(--gutter));
    scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - 16px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - 16px), transparent);
  }
  .jor-grid::-webkit-scrollbar { display: none; }
  .jor-item { flex: 0 0 82vw; max-width: 360px; scroll-snap-align: start; }
  .jor .jor-card { padding: 24px 18px 18px; }
  .jor-hint { display: flex; }
  .jor-band { margin-top: 16px; padding: 16px 18px; }
  .jor-band__list { flex-direction: column; align-items: flex-start; gap: 10px; }
  .jor-band__item { font-size: 14px; }
}
@media (max-width: 420px) {
  .jor-item { flex-basis: 84vw; }
}

/* ---------- Movimento reduzido: tudo visível de imediato, sem atrasos nem laços ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .vid-stage.in .vid-cover::before, .vid-cover:hover::after { animation: none; }
  html.js .vid-stage.in .vid-ring::before, html.js .vid-stage.in .vid-ring::after { animation: none; }
  html.js .jor-item .jor-card.card--strip::before { transform: scaleX(1); transition: none; }
  html.js .jor-item .jor-card__list li { opacity: 1; animation: none; }
  html.js .jor-item.in .jor-card__list li:nth-child(n) { animation: none; }
  html.js .jor-band:not(.in) .jor-band__check { opacity: 1; }
  html.js .jor-band.in .jor-band__check { animation: none; }
  .jor .jor-card:hover .jor-card__ico, .jor-hint__arr { animation: none; }
}


/* ===== 04_jornada.css ===== */
/* =====================================================================
   04 · Carrossel da Jornada (#jornada, prefixo .jn-)
   5 abas (cards com ícone) + painel grande; troca automática com linha de
   progresso (PX.tabs) e botão de pausa. O fundo da seção recebe um "wash"
   de 6% da cor da etapa ativa: [data-etapa] (atualizado pelo JS a cada
   troca) escolhe --jn-c e a cor transita em 600 ms.
   ===================================================================== */
.jn { --jn-c: var(--atrair); --jn-d: 220ms; --jn-slide: 24px; scroll-margin-top: calc(var(--header-total) + 12px); }
.jn[data-etapa="atender"] { --jn-c: var(--atender); }
.jn[data-etapa="operar"] { --jn-c: var(--operar); }
.jn[data-etapa="relacionar"] { --jn-c: var(--relacionar); }
.jn[data-etapa="decidir"] { --jn-c: var(--decidir); }
.jn.is-settled { --jn-d: 0ms; } /* depois da entrada, as trocas de aba animam sem o atraso inicial */
.sec.jn { background-color: color-mix(in srgb, var(--jn-c) 6%, #fff); transition: background-color 600ms ease; }

/* ---------- Linha de apoio ---------- */
.jn-lead { text-align: center; color: #4A5563; font-size: var(--fs-lead); font-weight: 500; line-height: 1.5; max-width: 640px; margin: 0 auto clamp(24px, 3vw, 34px); text-wrap: balance; }

/* ---------- Abas (cards) ---------- */
.jn-tabs { position: relative; }
.jn-tabs__list { display: flex; justify-content: center; align-items: stretch; gap: 16px; }
.jn-tab {
  --c: var(--teal);
  position: relative; isolation: isolate; overflow: hidden;
  flex: 0 1 170px; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 20px 12px 22px; border-radius: 14px;
  background: #fff; border: 1px solid var(--line-2);
  color: #4A5563; font-weight: 700; font-size: 15px; line-height: 1.2; letter-spacing: -.005em;
  box-shadow: 0 1px 2px rgba(45, 54, 69, .04);
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), border-color var(--dur-2), color var(--dur-2), background-color var(--dur-2);
}
.jn-tab:focus-visible { border-radius: 14px; }
.jn-tab__ico {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px;
  background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c);
  transition: transform var(--dur-3) var(--ease-spring), background-color var(--dur-2), color var(--dur-2), box-shadow var(--dur-3) var(--ease-out);
}
.jn-tab__ico svg { width: 22px; height: 22px; }
.jn-tab__name { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) {
  .jn-tab:not([aria-selected="true"]):hover { transform: translateY(-2px); color: var(--navy); border-color: color-mix(in srgb, var(--c) 45%, var(--line-2)); box-shadow: 0 12px 24px -16px rgba(45, 54, 69, .35); }
  .jn-tab:not([aria-selected="true"]):hover .jn-tab__ico { transform: scale(1.06); background: color-mix(in srgb, var(--c) 18%, #fff); }
}
.jn-tab:active { transform: translateY(0) scale(.98); }
/* ativa: borda 2px na cor (1px da borda + 1px interno, sem mexer no layout), anel suave e sombra colorida */
.jn-tab[aria-selected="true"] {
  color: var(--navy); border-color: var(--c);
  box-shadow: inset 0 0 0 1px var(--c), 0 0 0 4px color-mix(in srgb, var(--c) 12%, transparent), 0 16px 30px -18px color-mix(in srgb, var(--c) 55%, transparent);
}
.jn-tab[aria-selected="true"] .jn-tab__ico { background: var(--c); color: #fff; transform: scale(1.08); box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--c) 70%, transparent); }
/* linha de progresso da troca automática (criada pelo PX.tabs dentro da aba ativa; cor via --c da aba) */
.jn-tab .tab__progress { left: 14px; right: 14px; bottom: 7px; height: 3px; border-radius: 3px; }

/* ---------- Pausa (espaço reservado: nada pula quando o botão some) ---------- */
.jn-ctrl { display: flex; justify-content: center; align-items: center; min-height: 36px; margin: 20px 0 24px; }
.jn-pause { position: relative; gap: 8px; }
.jn-pause::before { content: ""; position: absolute; inset: -6px; } /* alvo de toque ≥ 44px sem engordar o botão */
.jn-pause:focus-visible { border-radius: var(--r-pill); }
.jn-pause__ico { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); color: var(--navy); transition: background-color var(--dur-2), color var(--dur-2); }
.jn-pause__ico svg { width: 10px; height: 10px; }
.jn-pause:hover .jn-pause__ico { background: var(--teal-l); color: var(--teal-d); }

/* ---------- Painel ---------- */
.jn-panels { min-width: 0; }
.jn-panel {
  --c: var(--teal);
  min-width: 0; border-radius: 24px; background: #fff; box-shadow: var(--sh-md);
  padding: clamp(28px, 3.8vw, 52px) clamp(22px, 4vw, 56px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 56px); align-items: center;
}
.jn-panel:focus-visible { border-radius: 24px; }
.jn-panel__text { min-width: 0; }
.jn-panel__tags { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.jn-panel__pill { text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; padding: 6px 12px; color: var(--ct); } /* --ct: variante escura da etapa (a mistura padrão do .pill--etapa fica em 4,15:1 no laranja) */
.jn-panel__tags .proto-tag { margin-left: 0; }
.jn-panel__title { font-size: 1.9rem; line-height: 1.12; letter-spacing: -.025em; margin-top: 18px; color: var(--navy); }
.jn-panel__desc { margin-top: 14px; font-size: 16.5px; line-height: 1.6; color: var(--muted); max-width: 60ch; }

.jn-list { display: grid; gap: 18px; margin-top: 30px; }
.jn-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; }
.jn-item__ico { width: 34px; height: 34px; border-radius: 10px; margin-top: 2px; transition: background-color var(--dur-2), color var(--dur-2), transform var(--dur-3) var(--ease-spring); }
.jn-item__ico svg { width: 16px; height: 16px; }
.jn-item:hover .jn-item__ico { background: var(--c); color: #fff; transform: scale(1.06); }
.jn-item__body { min-width: 0; }
.jn-item__title { display: block; font-weight: 800; font-size: 16px; line-height: 1.3; color: var(--navy); letter-spacing: -.01em; }
.jn-item__text { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.5; color: #4A5563; }

.jn-panel__media { position: relative; min-width: 0; }
.jn-panel__media::before { /* halo suave na cor da etapa, atrás da moldura */
  content: ""; position: absolute; inset: 8% -6% -2%; z-index: 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 16%, transparent), transparent 72%);
}
.jn-figure { position: relative; z-index: 1; margin: 0; }
.jn-frame img { width: 100%; height: auto; max-height: 400px; object-fit: cover; object-position: top center; }
.jn-caption { margin-top: 14px; }

/* ---------- Coreografia ----------
   Entrada (a seção entra na tela → .is-in, pelo JS): linha de apoio, abas em
   cascata, botão de pausa e o card subindo. Troca de painel (.is-active, além
   do crossfade do DS): pill → título → parágrafo → 4 itens em cascata, com a
   moldura deslizando de +24px para 0. --jn-d é o atraso extra da primeira
   entrada (o JS zera com .is-settled depois que tudo assentou). */
@media (prefers-reduced-motion: no-preference) {
  html.js .jn:not(.is-in) .jn-lead,
  html.js .jn:not(.is-in) .jn-tab,
  html.js .jn:not(.is-in) .jn-ctrl,
  html.js .jn:not(.is-in) .jn-panels { opacity: 0; }
  .jn.is-in .jn-lead { animation: pxFadeUp .7s var(--ease-out) backwards; }
  .jn.is-in .jn-tab { animation: jnTabIn .7s var(--ease-out) calc(80ms + var(--i, 0) * 70ms) backwards; }
  .jn.is-in .jn-ctrl { animation: pxFadeUp .6s var(--ease-out) 520ms backwards; }
  .jn.is-in .jn-panels { animation: jnRise .85s var(--ease-out) 200ms backwards; }
  .jn.is-in .jn-panel.is-active .jn-panel__tags { animation: pxFadeUp .55s var(--ease-out) calc(var(--jn-d) + 40ms) backwards; }
  .jn.is-in .jn-panel.is-active .jn-panel__title { animation: pxFadeUp .6s var(--ease-out) calc(var(--jn-d) + 100ms) backwards; }
  .jn.is-in .jn-panel.is-active .jn-panel__desc { animation: pxFadeUp .6s var(--ease-out) calc(var(--jn-d) + 160ms) backwards; }
  .jn.is-in .jn-panel.is-active .jn-item { animation: pxFadeUp .6s var(--ease-out) calc(var(--jn-d) + 240ms + var(--i, 0) * 80ms) backwards; }
  .jn.is-in .jn-panel.is-active .jn-figure { animation: jnFrameIn .8s var(--ease-out) calc(var(--jn-d) + 120ms) backwards; }
}
@keyframes jnTabIn { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes jnRise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes jnFrameIn { from { opacity: 0; transform: translateX(var(--jn-slide)); } to { opacity: 1; transform: none; } }

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  .jn-tabs__list { gap: 12px; }
  .jn-tab { padding: 18px 10px 20px; font-size: 14.5px; }
}
@media (max-width: 920px) {
  /* abas viram pílulas (ícone + texto) em rolagem horizontal com snap */
  .jn-tabs__list {
    justify-content: flex-start; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--gutter)) calc(-1 * var(--gutter-r)); padding: 8px var(--gutter) 12px;
  }
  .jn-tabs__list::-webkit-scrollbar { display: none; }
  .jn-tab { flex: none; flex-direction: row; gap: 10px; min-height: 48px; padding: 7px 18px 7px 9px; border-radius: 12px; font-size: 14.5px; scroll-snap-align: center; }
  .jn-tab:focus-visible { border-radius: 12px; }
  .jn-tab__ico { width: 32px; height: 32px; border-radius: 9px; }
  .jn-tab__ico svg { width: 17px; height: 17px; }
  /* dentro do contêiner de rolagem a sombra longa seria cortada: fica só borda 2px + anel */
  .jn-tab[aria-selected="true"] { background: color-mix(in srgb, var(--c) 6%, #fff); box-shadow: inset 0 0 0 1px var(--c), 0 0 0 4px color-mix(in srgb, var(--c) 12%, transparent); }
  .jn-tab[aria-selected="true"] .jn-tab__ico { transform: scale(1.04); box-shadow: none; }
  .jn-tab .tab__progress { left: 12px; right: 12px; bottom: 3px; height: 3px; }
  .jn-ctrl { margin: 10px 0 20px; }
  /* painel empilha: texto, depois imagem. A altura segue a aba ativa (--jn-h, medida pelo JS; a transição
     suaviza a troca) em vez do painel mais alto, para não sobrar vão; o clip com folga esconde o painel que
     entra enquanto a altura acompanha, sem cortar sombra nem anel de foco */
  .jn-panels { height: var(--jn-h, auto); transition: height 500ms var(--ease-out); overflow: clip; padding: 8px 8px 32px; margin: -8px -8px -32px; }
  .jn-panels > .jn-panel { align-self: start; }
  .jn-panel { grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
  .jn-panel__media { order: 2; }
  .jn-panel__media::before { inset: 12% -4% 0; }
  .jn-frame img { max-height: 360px; }
}
@media (max-width: 680px) {
  .jn { --jn-slide: 16px; }
  .jn-lead { font-size: 1rem; margin-bottom: 18px; }
  .jn-panel { padding: 26px 20px 24px; border-radius: 20px; gap: 24px; }
  .jn-panel:focus-visible { border-radius: 20px; }
  .jn-panel__title { font-size: 1.5rem; margin-top: 16px; }
  .jn-panel__desc { font-size: 15.5px; margin-top: 12px; }
  .jn-list { gap: 14px; margin-top: 22px; }
  .jn-item { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; }
  .jn-item__ico { width: 32px; height: 32px; border-radius: 9px; }
  .jn-item__title { font-size: 15.5px; }
  .jn-item__text { font-size: 14px; }
  .jn-caption { margin-top: 12px; font-size: 12.5px; }
}
@media (max-width: 420px) {
  .jn-tab { padding: 6px 14px 6px 8px; font-size: 14px; }
  .jn-panel { padding: 22px 16px 22px; }
}


/* ===== 05_whatsapp_novidades.css ===== */
/* =====================================================================
   05 · WhatsApp com IA (prefixo .wa-)  +  5.1 · Também é novidade (prefixo .nov-)
   Coreografia 5: os blocos da esquerda revelam em cascata (.rv + --i, 80 ms
   entre eles); a moldura entra pela direita; quando ela aparece, o card do
   Agente de IA faz "pop" 300 ms depois (pxPop) e o chip ATIVO respira duas
   vezes (pxBreath). Micro: ícone do bullet gira -6° e sobe 1 px no hover;
   ponto "online" do card respira em loop discreto; botão com seta que avança.
   Coreografia 5.1: cabeçalho e cards revelam escalonados; no hover o card
   sobe (.card--lift) e a imagem dá um leve zoom; seta do link sobe.
   ===================================================================== */

/* ---------- 5 · WhatsApp com IA ---------- */
.wa {
  --wa-bleed: clamp(0px, (100vw - 1240px) / 2 - 16px, 72px);   /* a moldura avança um pouco para a direita do container em telas largas (16 px de folga para barra de rolagem) */
  --wa-overhang: 64px;                                   /* quanto o card do agente desce abaixo da moldura */
  --wa-hang-left: 36px;                                  /* quanto o card sai pela esquerda da moldura */
}
.wa-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 56px; align-items: center; }
.wa-copy { min-width: 0; }

.wa-pill { max-width: 100%; white-space: normal; }
.wa-pill__ico { display: inline-flex; color: var(--teal-bright); }
.wa-pill__ico svg { width: 14px; height: 14px; }

.wa-title { margin-top: 20px; font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -.025em; } /* mesma escala de H2 das outras seções (o H1 do hero é o único maior) */
.wa-lead { margin-top: 22px; max-width: 36em; font-size: 17px; line-height: 1.6; color: var(--on-dark-muted); }

.wa-incluso {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 24px; padding: 16px 20px;
  border: 1px solid rgba(93, 211, 180, .45); border-radius: 14px; background: rgba(93, 211, 180, .08);
  font-size: 15px; line-height: 1.55; color: var(--on-dark-muted);
}
.wa-incluso strong { color: #fff; }
.wa-incluso__check { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; color: var(--teal-bright); }
.wa-incluso__check svg { width: 18px; height: 18px; stroke-width: 2.6; }

.wa-list { margin-top: 26px; display: grid; gap: 14px; }
.wa-item { display: flex; gap: 14px; align-items: flex-start; }
.wa .wa-item__ico {
  background: rgba(67, 176, 152, .18); color: var(--teal-bright); box-shadow: inset 0 0 0 1px rgba(93, 211, 180, .22);
  transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-2), box-shadow var(--dur-2);
}
.wa-item:hover .wa-item__ico { transform: rotate(-6deg) translateY(-1px); background: rgba(67, 176, 152, .3); box-shadow: inset 0 0 0 1px rgba(93, 211, 180, .5); }
.wa-item__text { min-width: 0; padding-top: 1px; }
.wa-item__title { display: block; font-weight: 800; font-size: 17px; line-height: 1.3; letter-spacing: -.01em; color: #fff; }
.wa-item__desc { margin-top: 3px; font-size: 15px; line-height: 1.5; color: var(--on-dark-muted); }

.wa-cta { margin-top: 32px; }
.wa-btn { max-width: 100%; }

/* visual: moldura + card do agente */
.wa-visual { position: relative; min-width: 0; margin-right: calc(-1 * var(--wa-bleed)); }
.wa-stage { position: relative; padding-bottom: var(--wa-overhang); }
.wa-frame { margin: 0; }
.wa-frame__shot { position: relative; background: #F6F8FA; }
.wa-frame__img { display: block; width: 100%; height: auto; }
/* O print traz, no canto inferior esquerdo, o próprio card do mockup recortado. Este escudo (em % da imagem) cobre
   essa região com as cores de fundo da tela (sidebar navy · faixa cinza · painel branco da lista) e o card em HTML
   fica por cima, funcionando em qualquer largura. Some quando o print limpo substituir o asset. */
.wa-frame__shield {
  position: absolute; left: 0; bottom: 0; width: 53.1%; height: 45%; pointer-events: none;
  background: linear-gradient(90deg, #2D3545 0 24.86%, #F6F8FA 24.86% 60.27%, #FEFEFE 60.27%);
}

.wa-agent {
  position: absolute; left: calc(-1 * var(--wa-hang-left)); bottom: 0; z-index: 2;
  width: 352px; max-width: calc(100% + var(--wa-hang-left)); padding: 18px 18px 16px;
  background: #fff; color: var(--ink); border-radius: 18px;
  box-shadow: 0 34px 70px -24px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .5);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.wa-agent:hover { transform: translateY(-3px); box-shadow: 0 42px 80px -26px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .6); }
.wa-agent__head { display: flex; align-items: center; gap: 12px; }
.wa-agent__ico { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #E8F9EE; color: #25D366; }
.wa-agent__ico svg { width: 24px; height: 24px; }
.wa-agent__dot { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: #2DBE7A; box-shadow: 0 0 0 2.5px #fff; animation: waBreath 2.6s ease-in-out infinite; }
.wa-agent__dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid #2DBE7A; animation: pxPulseRing 2.6s ease-out infinite; }
@keyframes waBreath { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.86); opacity: .62; } }
.wa-agent__title { font-size: 1.25rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; color: var(--navy); }
.wa-agent__sub { margin-top: 12px; font-size: 12.5px; font-weight: 800; letter-spacing: -.005em; color: var(--navy); }
.wa-agent__mode {
  display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 12px 12px 14px;
  border: 1.5px solid #BFE6DA; border-radius: 12px; background: #F6FBF9;
}
.wa-agent__mode-text { flex: 1; min-width: 0; }
.wa-agent__mode-text b { display: block; font-size: 13px; font-weight: 800; line-height: 1.3; color: var(--navy); }
.wa-agent__mode-text small { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.wa-agent__side { flex: none; display: grid; justify-items: end; gap: 8px; }
.wa-agent__chip { display: inline-block; padding: 3px 8px; border-radius: 999px; background: var(--teal-l); color: var(--atrair-text); font-size: 10.5px; font-weight: 800; letter-spacing: .07em; line-height: 1.3; }
.wa-agent__off { display: inline-block; padding: 8px 12px; border-radius: 8px; background: #8C96A2; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .05em; line-height: 1.2; }

/* entrada: o card espera a moldura entrar na tela (JS marca .is-in) */
html.js .wa-visual:not(.is-in) .wa-agent { opacity: 0; }
.wa-visual.is-in .wa-agent { animation: pxPop .7s var(--ease-spring) .3s backwards; }
.wa-visual.is-in .wa-agent__chip { animation: pxBreath .8s ease-in-out 1.05s 2; }

.wa-caption { margin-top: 16px; text-align: right; padding-right: 2px; }

/* ---------- 5.1 · Também é novidade ---------- */
.nov-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: clamp(28px, 3.4vw, 40px); }
.nov .nov-head__text { margin: 0; max-width: 680px; }
.nov .nov-head__text .nov-title { margin-top: 0; font-size: var(--fs-h2); } /* mesma escala de H2 das outras seções */
.nov .nov-head__text .lead { margin-top: 8px; }
.nov-head__link { flex: none; padding-bottom: 6px; font-size: 15px; }
.nov-head__link:hover .arr { transform: translateY(-3px); }

.nov-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.nov-card { display: flex; flex-direction: column; min-width: 0; }
.nov-card.card--strip::before { z-index: 2; }
/* Área de imagem com proporção constante (585×280 no desktop = 280 px de altura a 1440) e respiros em %: assim o
   recorte dos prints é idêntico em qualquer largura. No BI, a object-position esconde exatamente a barra de menu
   verde do print (112 px de 841) e mostra os indicadores e o gráfico, como no mockup. */
.nov-card__media { position: relative; aspect-ratio: 585 / 280; overflow: hidden; }
.nov-card__media img { display: block; transition: transform .9s var(--ease-out); }
.nov-card:hover .nov-card__media img { transform: scale(1.035); }
.nov-card__media--orc { background: #EEF3FD; padding: 4.4% 0 0; }
.nov-card__media--orc img {
  width: min(400px, 68%); height: 100%; margin: 0 auto; object-fit: cover; object-position: top;
  border-radius: 12px 12px 0 0; transform-origin: 50% 100%;
  box-shadow: 0 18px 40px -18px rgba(31, 58, 124, .4), 0 0 0 1px rgba(47, 111, 219, .1);
}
.nov-card__media--bi { background: #1F2A44; padding: 4.4% 4.4% 0; }
.nov-card__media--bi img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 66%;
  border-radius: 10px 10px 0 0; transform-origin: 50% 100%;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08);
}
.nov-card__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 26px 30px 30px; }
.nov-card__tag { color: var(--ct); } /* --ct: variante escura da etapa (AA) */
.nov-card__title { margin-top: 16px; font-size: var(--fs-h3); }
.nov-card__text { margin-top: 10px; max-width: 36em; font-size: 16px; line-height: 1.6; color: var(--muted); }
.nov-card__checks { margin-top: 18px; font-size: 15.5px; color: var(--ink); }
.nov-card__checks strong { color: var(--navy); }

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  .wa { --wa-hang-left: 20px; }
  .wa-grid { gap: 40px; }
  .wa-agent { width: 320px; }
}

@media (max-width: 920px) {
  .wa { --wa-hang-left: 0px; --wa-overhang: 56px; }
  .wa-grid { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .wa-copy { max-width: 640px; }
  .wa-visual { max-width: 720px; margin-right: 0; }
  .wa-caption { text-align: center; padding-right: 0; }
  .nov-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 680px) {
  .wa { --wa-overhang: 0px; }
  .wa-lead { font-size: 16px; }
  .wa-incluso { padding: 14px 16px; font-size: 14.5px; }
  .wa-item__title { font-size: 16px; }
  .wa-item__desc { font-size: 14.5px; }
  .wa-cta { margin-top: 28px; }
  .wa-btn { width: 100%; white-space: normal; text-align: center; line-height: 1.25; }
  /* card pendurado no canto inferior esquerdo da moldura, sem sair da tela */
  .wa-agent { position: relative; left: auto; bottom: auto; width: min(340px, calc(100% - 14px)); max-width: none; margin: -44px auto 0 0; padding: 16px 16px 14px; }
  .wa-caption { margin-top: 14px; }
  .nov-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .nov-head__link { padding-bottom: 0; }
  .nov-card__media { aspect-ratio: 2 / 1; }
  .nov-card__media--orc img { width: min(400px, 78%); }
  .nov-card__media--bi img { object-position: 50% 82%; }
  .nov-card__body { padding: 22px 20px 26px; }
  .nov-card__text { font-size: 15.5px; }
  .nov-card__checks { font-size: 15px; }
}

@media (max-width: 420px) {
  .wa-pill { font-size: 12px; }
  .wa-agent__title { font-size: 1.15rem; }
  .wa-agent__mode { padding: 10px 10px 10px 12px; gap: 10px; }
}

/* ---------- Movimento reduzido: nada fica escondido esperando atraso ---------- */
@media (prefers-reduced-motion: reduce) {
  .wa-visual .wa-agent, .wa-visual .wa-agent__chip { animation-delay: 0s; }
  .wa-agent__dot, .wa-agent__dot::after { animation: none; }
  .nov-card:hover .nov-card__media img { transform: none; }
}


/* ===== 06_clientes_tour.css ===== */
/* =====================================================================
   06 · Quem já embarcou (prefixo .cli-)  +  07 · Tour por dentro (prefixo .tour-)

   06 · Coreografia: cabeçalho revela (.rv escalonado); quando a faixa de
        logos entra na tela, os tiles "pousam" em cascata (70 ms entre eles)
        e só então a esteira começa a andar (36 s por volta). Hover: o logo
        ganha cor e o tile sobe 3 px. Pausa no hover/foco (DS) e por um botão
        de teclado, invisível até receber foco.
   07 · Coreografia: cabeçalho e cápsula de abas revelam (.rv); quando a
        cena entra na tela, a moldura desliza da esquerda, os 4 destaques
        sobem em cascata (80 ms) e os marcadores 1–4 "pipocam" sobre o print.
        Troca de aba: a moldura nova entra deslizando na direção da aba
        (±28 px → 0 com fade), destaques em cascata, marcadores em pop.
        Micro: chip "Ampliar" no hover da moldura, marcador ↔ destaque
        (anel pulsante / elevação), lightbox ao clicar.
   ===================================================================== */

/* =====================================================================
   06 · Quem já embarcou
   ===================================================================== */
.cli .sec-head .lead { max-width: 720px; }
/* a pill do DS tem o mesmo teal-claro do fundo tint da seção: sem fundo branco ela desaparece */
.cli .pill { background: #fff; border-color: rgba(42, 125, 106, .16); }

.cli-strip { position: relative; }
.cli-marquee { --mq-dur: 36s; --mq-gap: 24px; padding-block: 16px; }

.cli-set { list-style: none; margin: 0; padding: 0; }
.cli-tile {
  flex: none; display: block; width: 170px; height: 84px; padding: 14px;
  background: #fff; border-radius: 14px;
  box-shadow: 0 10px 22px -14px rgba(45, 54, 69, .32), 0 0 0 1px rgba(45, 54, 69, .05);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.cli-tile img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  filter: grayscale(1); opacity: .75;
  transition: filter var(--dur-2), opacity var(--dur-2), transform var(--dur-3) var(--ease-out);
}
.cli-tile:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.cli-tile:hover img { filter: none; opacity: 1; transform: scale(1.04); }

/* entrada: tiles pousam em cascata; a esteira só anda depois de entrar na tela */
@media (prefers-reduced-motion: no-preference) {
  html.js .cli-strip:not(.is-in) .cli-tile { opacity: 0; }
  html.js .cli-strip:not(.is-in) .marquee__track { animation-play-state: paused; }
  html.js .cli-strip.is-in .cli-tile { animation: cliTileIn .7s var(--ease-out) calc(var(--i, 0) * 70ms) backwards; }
}
@keyframes cliTileIn {
  from { opacity: 0; transform: translateY(14px) scale(.92); }
  to { opacity: 1; transform: none; }
}

/* botão de pausa para teclado: aparece só com foco (ou enquanto pausado) */
.cli-pause {
  position: absolute; right: var(--gutter-r); bottom: -30px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; min-height: 32px;
  border-radius: var(--r-pill); border: 1px solid var(--line-2); background: #fff; color: var(--muted);
  font-size: 12.5px; font-weight: 600; box-shadow: var(--sh-sm);
  transition: color var(--dur-2), border-color var(--dur-2);
}
.cli-pause:hover { color: var(--navy); border-color: var(--teal); }
.cli-pause__ico { display: inline-flex; color: var(--teal-d); }
.cli-pause__ico svg { width: 14px; height: 14px; }
.cli-pause:not(:focus-visible):not(.is-on) {
  width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; border: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
  left: var(--gutter); right: auto; /* escondido, ancora à esquerda: o texto interno não passa da borda direita da janela */
}

/* movimento reduzido: logos parados, em grade centralizada, sem duplicata */
@media (prefers-reduced-motion: reduce) {
  .cli-marquee { -webkit-mask-image: none; mask-image: none; padding-inline: var(--gutter) var(--gutter-r); }
  .cli-marquee .marquee__track { justify-content: center; }
  .cli-marquee .marquee__set[aria-hidden="true"] { display: none; }
  .cli-set { flex: 0 1 auto; max-width: 100%; flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 680px) {
  .cli-marquee { --mq-gap: 16px; padding-block: 12px; }
}
@media (max-width: 680px) and (prefers-reduced-motion: reduce) {
  .cli-tile { width: 150px; height: 76px; padding: 12px; } /* 2 por linha na grade estática */
}

/* =====================================================================
   07 · Tour por dentro
   ===================================================================== */
.tour-pill__ico { display: inline-flex; color: var(--teal-d); }
.tour-pill__ico svg { width: 14px; height: 14px; }

/* ---------- Abas (cápsula centralizada; rola na horizontal no celular) ---------- */
.tour-tabs__bar {
  display: flex; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  margin-inline: calc(-1 * var(--gutter)) calc(-1 * var(--gutter-r));
  padding: 8px var(--gutter-r) 8px var(--gutter);
}
.tour-tabs__bar::-webkit-scrollbar { display: none; }
.tour-tabs .tabs__list { flex: none; margin-inline: auto; }
.tour-tabs .tab { white-space: nowrap; }
html:not(.js) .tour-tabs .tab[aria-selected="true"] { background: var(--navy); }

/* ---------- Cena: moldura + destaques ---------- */
.tour-stage {
  max-width: calc(1284px + var(--gutter) + var(--gutter-r));
  margin: clamp(22px, 2.6vw, 30px) auto 0;
  padding-inline: var(--gutter) var(--gutter-r);
}
/* os painéis não deslocam na vertical: quem anima são a moldura e os destaques */
.tour .tabs__panels > [role="tabpanel"]:not(.is-active) { transform: none; }
.tour .tabs__panels > [role="tabpanel"].is-active { transition: opacity 0s; }

.tour-row {
  display: grid; grid-template-columns: minmax(0, 930px) minmax(0, 320px);
  gap: 34px; justify-content: center; align-items: center;
}

/* moldura (é um botão que abre o lightbox) */
.tour-frame {
  display: block; width: 100%; min-width: 0; text-align: left; cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.tour-frame:hover { transform: translateY(-2px); box-shadow: 0 36px 70px -26px rgba(20, 30, 45, .5), 0 0 0 1px var(--line-2); }
.tour-frame:focus-visible { outline-offset: 4px; }
.tour-shot { position: relative; display: block; background: #fff; transition: transform var(--dur-3) var(--ease-out); }
.tour-frame:hover .tour-shot { transform: scale(1.01); }
.tour-shot__img { width: 100%; height: auto; -webkit-user-drag: none; user-select: none; }

/* chip "Ampliar" */
.tour-frame__zoom {
  position: absolute; right: 14px; bottom: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: var(--r-pill);
  background: rgba(45, 54, 69, .9); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .01em; line-height: 1.2;
  box-shadow: 0 10px 24px -10px rgba(20, 30, 45, .6); backdrop-filter: blur(4px);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur-2), transform var(--dur-2) var(--ease-out);
}
.tour-frame__zoom-ico { display: inline-flex; }
.tour-frame__zoom-ico svg { width: 14px; height: 14px; }
.tour-frame:hover .tour-frame__zoom, .tour-frame:focus-visible .tour-frame__zoom { opacity: 1; transform: none; }
@media (hover: none) { .tour-frame__zoom { opacity: 1; transform: none; } }

/* marcadores numerados sobre o print (posição em % via --x/--y, lidas de data-x/data-y) */
.tour-mark {
  position: absolute; left: var(--x, 50%); top: var(--y, 50%); z-index: 2;
  width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy); color: #fff; font-size: 11.5px; font-weight: 800; line-height: 1;
  box-shadow: 0 0 0 2px #fff, 0 6px 14px -4px rgba(45, 54, 69, .6);
  transition: transform var(--dur-2) var(--ease-spring), opacity var(--dur-2), background-color var(--dur-2);
}
.tour-mark::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--teal); opacity: 0; }
.tour-mark.is-hot { background: var(--teal-d); transform: scale(1.18); }
.tour-mark.is-hot::after { animation: pxPulseRing 1.1s var(--ease-out) infinite; }
.tour-panel.has-focus .tour-mark:not(.is-hot) { opacity: .3; }
html:not(.js) .tour-mark { display: none; }

/* destaques */
.tour-hls { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; align-content: center; min-width: 0; }
.tour-hl {
  position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 9px; align-items: center;
  padding: 12px 16px 12px 14px; min-width: 0;
  background: var(--teal-l); border-left: 4px solid var(--teal); border-radius: 0 12px 12px 0;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2);
}
.tour-hl__num {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy); color: #fff; font-size: 10.5px; font-weight: 800; line-height: 1;
  transition: background-color var(--dur-2), transform var(--dur-2) var(--ease-spring);
}
.tour-hl__title { display: block; font-size: 15.5px; font-weight: 800; color: var(--navy-deep); line-height: 1.3; letter-spacing: -.01em; }
.tour-hl__text { grid-column: 2; display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: #4A5563; }
.tour-hl:hover, .tour-hl.is-raised { transform: translateY(-3px); background: #DFF3EC; box-shadow: 0 16px 28px -18px rgba(42, 125, 106, .55); }
.tour-hl:hover .tour-hl__num, .tour-hl.is-raised .tour-hl__num { background: var(--teal-d); transform: scale(1.1); }

/* ---------- Coreografia da cena ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .tour-stage:not(.is-ready) .tour-frame,
  html.js .tour-stage:not(.is-ready) .tour-hl,
  html.js .tour-stage:not(.is-ready) .tour-mark { opacity: 0; }
}
.tour-panel.is-anim .tour-frame { animation: tourSlide .75s var(--ease-out) backwards; }
.tour-panel.is-anim .tour-hl { animation: pxFadeUp .6s var(--ease-out) calc(140ms + var(--i, 0) * 80ms) backwards; }
.tour-panel.is-anim .tour-mark { animation: pxPop .5s var(--ease-spring) calc(520ms + var(--i, 0) * 90ms) backwards; }
@keyframes tourSlide {
  from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 28px)); }
  to { opacity: 1; transform: none; }
}

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  .tour-row { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .tour-hls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .tour-hls { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tour-mark { visibility: hidden; pointer-events: none; } /* visibility (e não display) para não reiniciar a animação ao redimensionar */
  .tabs--capsule.tour-tabs .tab { padding: 12px 16px; min-height: 44px; }
  .tour-frame__zoom { right: 10px; bottom: 10px; padding: 6px 10px; font-size: 11.5px; }
  .tour-hl { padding: 11px 14px 11px 12px; }
}


/* ===== 07_checkin.css ===== */
/* =====================================================================
   07 · Check-in (cartão de embarque, prefixo .ck-) — seção 9 do pacote
   Coreografia disparada por PX.onEnter (o JS marca .is-armed e depois .is-in):
   o cartão "sai da impressora" (clip-path de cima para baixo, 900 ms);
   o avião do cabeçalho pousa vindo da esquerda; os ✓ das listas aparecem em
   cascata; os carimbos 1–4 carimbam em sequência (140 ms) e a caixa 5% faz pop.
   Sem JS, sem IntersectionObserver ou com prefers-reduced-motion nada é armado:
   tudo fica visível e estático (não há !important reanimando nada).
   (A Migração assistida, seção 11, mora em 08_migracao.* para ficar depois
   das Integrações, como na ordem aprovada: Check-in → Integrações → Migração.)
   ===================================================================== */

/* ---------- Cabeçalho ---------- */
.ck .sec-head { max-width: 900px; }
.ck .sec-head .lead { max-width: 700px; text-wrap: balance; }
.ck-nobr { white-space: nowrap; } /* "check-in" nunca quebra no hífen */
.ck-pill__ico { display: inline-flex; }
.ck-pill__ico svg { width: 14px; height: 14px; }

/* =====================================================================
   Seção 9 · Cartão de embarque
   ===================================================================== */
/* o wrapper (sem clip) é o alvo do IntersectionObserver: um alvo com clip-path
   de área zero nunca atinge o threshold no Chromium */
.ck-cardwrap { max-width: 1180px; margin: 0 auto; }
.ck-card {
  position: relative; border-radius: 18px; overflow: hidden;
  background: #fff; box-shadow: var(--sh-lg), 0 0 0 1px rgba(45, 54, 69, .05);
}

/* cabeçalho degradê */
.ck-card__head {
  display: flex; align-items: center; gap: clamp(22px, 3vw, 44px); min-height: 68px; padding: 12px 34px;
  background: linear-gradient(90deg, #2D3645 0%, #2A4A4A 58%, #2C5A52 100%); color: #fff;
}
.ck-card__brand { flex: none; font-size: 14px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-bright); white-space: nowrap; }
.ck-card__fields { display: flex; flex-wrap: wrap; gap: 8px clamp(22px, 2.6vw, 40px); margin: 0; min-width: 0; }
.ck-field { display: grid; gap: 3px; line-height: 1.2; }
.ck-field dt { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .64); }
.ck-field dd { margin: 0; font-size: 15px; font-weight: 700; color: #fff; white-space: nowrap; }
.ck-card__plane { margin-left: auto; flex: none; display: inline-flex; color: var(--teal-bright); }
.ck-card__plane-ico { display: inline-flex; transition: transform var(--dur-3) var(--ease-out); }
.ck-card__plane-ico svg { width: 22px; height: 22px; }
.ck-card__head:hover .ck-card__plane-ico { transform: translate(5px, -4px); }

/* corpo em 3 colunas com separadores tracejados e picotes */
.ck-card__body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ck-col { position: relative; min-width: 0; padding: 34px 34px 38px; }
.ck-col + .ck-col::before, .ck-col + .ck-col::after { content: ""; position: absolute; pointer-events: none; }
.ck-col + .ck-col::before {
  left: -1px; top: 0; bottom: 0; width: 2px;
  background: repeating-linear-gradient(180deg, var(--line-2) 0 6px, transparent 6px 12px);
}
.ck-col + .ck-col::after {
  /* dois "furos" de 20 px nas pontas da linha (o de baixo é cortado pelo overflow do cartão = picote) */
  --ck-hole: radial-gradient(circle at 10px 10px, var(--bg) 8.6px, rgba(45, 54, 69, .14) 9.3px, transparent 10.4px);
  left: -10px; top: -10px; bottom: -10px; width: 20px; z-index: 1;
  background: var(--ck-hole) top / 20px 20px no-repeat, var(--ck-hole) bottom / 20px 20px no-repeat;
}

.ck-col__step { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-d); }
.ck-col__num { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: 0; }
.ck-col__title { margin-top: 16px; font-size: 2rem; line-height: 1.1; }
.ck-col__desc { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.ck-checks { margin-top: 22px; font-size: 14.5px; }
.ck-checks li { text-wrap: pretty; }

/* carimbos */
.ck-stamps { --ck-stamp: 30px; display: grid; grid-template-columns: repeat(9, var(--ck-stamp)); gap: 6px; margin-top: 22px; }
.ck-stamp {
  position: relative; width: var(--ck-stamp); height: var(--ck-stamp); border-radius: 50%; border: 1.5px dashed #C3CBD3;
  display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: var(--muted); background: #fff;
}
.ck-stamp__seal { position: absolute; inset: -1.5px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; box-shadow: 0 4px 10px -4px rgba(42, 125, 106, .65); }
.ck-stamp__seal svg { width: 14px; height: 14px; }
.ck-stamp:hover { animation: ckWiggle .6s ease; }
@keyframes ckWiggle { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } 80% { transform: rotate(-3deg); } }

/* caixa 5% */
.ck-bonus {
  display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 16px 18px; border-radius: 12px;
  background: var(--grad-teal); color: #fff; box-shadow: var(--sh-teal), inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.ck-bonus__num { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.ck-bonus__text { font-size: 13.5px; line-height: 1.4; font-weight: 600; }

/* botão e link abaixo do cartão */
.ck-cta { margin-top: clamp(34px, 4vw, 48px); text-align: center; }
.ck-cta__alt { margin-top: 16px; font-size: 14.5px; color: #5E6875; } /* mais escuro que --muted: AA sobre o fundo --bg */
.ck-cta__alt .link:hover .arr { transform: translateY(3px); }

/* ---------- Coreografia do cartão ---------- */
html.js .ck-card.is-armed { transition: clip-path .9s var(--ease-out); }
html.js .ck-card.is-armed:not(.is-in) { clip-path: inset(-140px -140px 100% -140px); }
html.js .ck-card.is-armed.is-in { clip-path: inset(-140px); }
html.js .ck-card.is-printed { clip-path: none; transition: none; }
html.js .ck-card.is-armed:not(.is-in) :is(.ck-card__plane, .ck-stamp__seal, .ck-bonus) { opacity: 0; }
html.js .ck-card.is-armed:not(.is-in) .ck-checks li::before { opacity: 0; }

.ck-card.is-in .ck-card__plane { animation: ckPlaneIn 1s var(--ease-out) .25s both; }
.ck-card.is-in .ck-checks li::before { animation: ckTick .55s var(--ease-spring) calc(.6s + var(--i, 0) * 110ms) both; }
.ck-card.is-in .ck-stamp__seal { animation: ckStampIn .55s cubic-bezier(.2, .8, .3, 1.15) calc(1.05s + var(--i, 0) * 140ms) both; }
.ck-card.is-in .ck-bonus { animation: pxPop .65s var(--ease-spring) 1.8s both; }
@keyframes ckPlaneIn { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes ckTick { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes ckStampIn {
  0% { opacity: 0; transform: scale(1.8) rotate(-8deg); }
  60% { opacity: 1; transform: scale(.92) rotate(1deg); }
  100% { opacity: 1; transform: none; }
}

/* =====================================================================
   Responsivo
   ===================================================================== */
@media (max-width: 1200px) {
  .ck-col { padding: 30px 30px 34px; }
  .ck-stamps { --ck-stamp: 28px; gap: 5px; }
}

@media (max-width: 1100px) {
  .ck-card__head { gap: 20px; padding-inline: 26px; }
  .ck-card__brand { font-size: 13px; }
  .ck-card__fields { gap: 8px 18px; }
  .ck-field dd { font-size: 14px; }
  .ck-col { padding: 28px 26px 32px; }
  .ck-col__title { font-size: 1.8rem; }
  .ck-stamps { grid-template-columns: repeat(5, var(--ck-stamp)); gap: 6px; }
}

@media (max-width: 920px) {
  /* cabeçalho em duas linhas: marca + avião / campos */
  .ck-card__head { flex-wrap: wrap; gap: 12px 16px; padding: 16px 26px 18px; }
  .ck-card__brand { order: 1; flex: 1 1 auto; }
  .ck-card__plane { order: 2; }
  .ck-card__fields { order: 3; flex: 1 1 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .14); }
  .ck-field dd { white-space: normal; }
  /* 3 blocos empilhados, separadores horizontais com picotes nas laterais */
  .ck-card__body { grid-template-columns: minmax(0, 1fr); }
  .ck-col { padding: 28px 26px 30px; }
  .ck-col + .ck-col::before { left: 0; right: 0; top: -1px; bottom: auto; width: auto; height: 2px; background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 12px); }
  .ck-col + .ck-col::after { left: -10px; right: -10px; top: -10px; bottom: auto; width: auto; height: 20px; background: var(--ck-hole) left / 20px 20px no-repeat, var(--ck-hole) right / 20px 20px no-repeat; }
  .ck-stamps { --ck-stamp: 30px; grid-template-columns: repeat(9, var(--ck-stamp)); gap: 8px; }
}

@media (max-width: 680px) {
  .ck-card__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ck-col { padding: 24px 22px 26px; }
  .ck-col__title { font-size: 1.65rem; }
  .ck-stamps { grid-template-columns: repeat(5, var(--ck-stamp)); }
  .ck-cta .btn { width: 100%; white-space: normal; text-align: center; }
}

@media (max-width: 420px) {
  .ck-card__head { gap: 10px 12px; padding-inline: 22px; }
  .ck-card__brand { flex: 1 1 0; min-width: 0; font-size: 11.5px; letter-spacing: .09em; white-space: normal; }
  .ck-col { padding-inline: 20px; }
}


/* ===== 08_integracoes.css ===== */
/* =====================================================================
   08 · Integrações (prefixo .int-) — fundo degradê escuro

   Coreografia: textos revelam (.rv escalonado). Quando os 3 passos entram
   na tela (.int-text.is-in), acendem em sequência (600 ms de intervalo):
   o número preenche com teal e um anel expande (pxPulseRing), a borda do
   card ganha teal por 1 s e volta; depois do 3º passo, a caixa "COM O
   PAXPRO" recebe um ✓ que pipoca e se desenha (stroke-dashoffset).
   Parede de logos: os tiles "pousam" em cascata quando entram na tela
   (.int-wall.is-in) e só então as esteiras andam (40 s ↑ / 46 s ↓);
   pausa no hover/foco (DS) e por botão de teclado.
   Micro: tiles em leve grayscale que ganham cor e sobem 2 px no hover;
   chips sobem 1 px; link com seta que avança; cards reagem ao hover.
   Sem JS (ou com movimento reduzido) tudo já nasce no estado final.
   ===================================================================== */
.int-grid { display: grid; grid-template-columns: 1fr .9fr; gap: 56px; align-items: start; }
.int-text { min-width: 0; max-width: 620px; }

.int-pill { gap: 8px; }
.int-pill__ico { width: 14px; height: 14px; flex: none; }
.int-h2 { font-size: var(--fs-h2); margin-top: 18px; }
.int-h2__l2 { display: block; }
.int-lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--on-dark-muted); margin-top: 14px; max-width: 58ch; }

/* ---------- 3 passos ---------- */
.int-steps { display: grid; gap: 12px; margin-top: 28px; }
.int-step {
  --d: calc(350ms + var(--i, 0) * 600ms); /* instante em que o passo acende */
  position: relative; display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px; border-radius: 14px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
  transition: background-color var(--dur-2), border-color var(--dur-2);
}
.int-step:hover { background: rgba(255, 255, 255, .085); border-color: rgba(255, 255, 255, .2); }
.int-step__num {
  position: relative; flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-top: 1px;
  border-radius: 50%; border: 2px solid var(--teal); background: var(--teal); color: #fff;
  font-size: 13px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
}
.int-step__num::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--teal-bright); opacity: 0; pointer-events: none; }
.int-step__body { min-width: 0; }
.int-step__title { font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; color: #fff; text-wrap: pretty; }
.int-step__desc { margin-top: 4px; font-size: 14.5px; line-height: 1.55; color: var(--on-dark-muted); }

/* ---------- Comparativo ---------- */
.int-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.int-box { position: relative; min-width: 0; padding: 14px 16px 15px; border-radius: 14px; border: 1.5px dashed rgba(255, 255, 255, .3); }
.int-box__label { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 22px; font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; line-height: 1.3; color: rgba(255, 255, 255, .66); }
.int-box__text { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .7); } /* esmaecido, mas ainda AA sobre o degradê escuro */
.int-box--com { border: 1.5px solid var(--teal); background: rgba(67, 176, 152, .12); }
.int-box--com .int-box__label { color: var(--teal-bright); }
.int-box--com .int-box__text { color: rgba(255, 255, 255, .92); }
.int-box__check { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--teal); color: #fff; box-shadow: 0 6px 14px -6px rgba(67, 176, 152, .8); }
.int-box__check svg { width: 13px; height: 13px; }
.int-box__check-path { stroke-dasharray: 1; stroke-dashoffset: 0; }

/* ---------- Chips + link ---------- */
.int-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.int-chips .chip { cursor: default; transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2), background-color var(--dur-2); }
.int-chips .chip:hover { transform: translateY(-1px); border-color: rgba(93, 211, 180, .5); background: rgba(255, 255, 255, .1); }
.int-more { margin-top: 18px; }
.int-link { font-size: 15px; padding-block: 4px; }
.int-link .arr { display: inline-block; }

/* ---------- Sequência dos passos (estado "armado" só com JS; final é o padrão) ---------- */
html.js .int-text:not(.is-in) .int-step__num { background: transparent; border-color: rgba(93, 211, 180, .55); color: var(--teal-bright); }
html.js .int-text:not(.is-in) .int-box__check { opacity: 0; transform: scale(.4); }
html.js .int-text:not(.is-in) .int-box__check-path { stroke-dashoffset: 1; }
html.js .int-text.is-in .int-step__num { animation: intNumFill .5s var(--ease-out) var(--d) both; }
html.js .int-text.is-in .int-step__num::after { animation: pxPulseRing .9s ease-out calc(var(--d) + 120ms) forwards; }
html.js .int-text.is-in .int-step { animation: intCardFlash 1s ease var(--d); }
html.js .int-text.is-in .int-box__check { animation: intCheckPop .45s var(--ease-spring) 2300ms both; }
html.js .int-text.is-in .int-box__check-path { animation: intCheckDraw .45s var(--ease-out) 2550ms both; }
html.js .int-text.is-in .int-box--com { animation: intBoxGlow .9s ease-out 2400ms; }
@keyframes intNumFill {
  0% { background: transparent; border-color: rgba(93, 211, 180, .55); color: var(--teal-bright); transform: scale(1); }
  55% { transform: scale(1.14); }
  100% { background: var(--teal); border-color: var(--teal); color: #fff; transform: scale(1); }
}
@keyframes intCardFlash {
  0% { border-color: rgba(255, 255, 255, .12); box-shadow: 0 0 0 0 rgba(93, 211, 180, 0); }
  18%, 70% { border-color: rgba(93, 211, 180, .75); box-shadow: 0 0 0 1px rgba(93, 211, 180, .18), 0 12px 30px -16px rgba(67, 176, 152, .55); }
  100% { border-color: rgba(255, 255, 255, .12); box-shadow: 0 0 0 0 rgba(93, 211, 180, 0); }
}
@keyframes intCheckPop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes intCheckDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes intBoxGlow { from { box-shadow: 0 0 0 0 rgba(93, 211, 180, .45); } to { box-shadow: 0 0 0 14px rgba(93, 211, 180, 0); } }
/* movimento reduzido: sem sequência — o padrão já é o estado final (número cheio, ✓ desenhado) */
@media (prefers-reduced-motion: reduce) {
  html.js .int-text.is-in .int-step, html.js .int-text.is-in .int-step__num, html.js .int-text.is-in .int-step__num::after,
  html.js .int-text.is-in .int-box__check, html.js .int-text.is-in .int-box__check-path, html.js .int-text.is-in .int-box--com { animation: none; }
}

/* ---------- Parede de logos (2 carrosséis verticais) ---------- */
.int-wall { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; min-width: 0; }
.int-col { --mq-h: 620px; --mq-gap: 20px; min-width: 0; }
.int-col--a { --mq-dur: 40s; }
.int-col--b { --mq-dur: 46s; margin-top: 52px; }
.int-set { list-style: none; margin: 0; padding: 0; }
.int-tile {
  position: relative; flex: none; display: grid; place-items: center; width: 100%; height: 104px; padding: 16px;
  border-radius: 14px; background: #fff;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.int-tile img {
  display: block; width: auto; max-width: 100%; height: auto; max-height: 60px; object-fit: contain;
  filter: grayscale(.9); opacity: .85;
  transition: filter var(--dur-2), opacity var(--dur-2), transform var(--dur-3) var(--ease-out);
}
.int-tile:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .55), 0 0 0 1px rgba(93, 211, 180, .4); }
.int-tile:hover img { filter: none; opacity: 1; transform: scale(1.04); }
/* logo que veio em branco no pacote: mostra o nome até o arquivo certo chegar */
.int-tile__name { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .02em; color: var(--navy); opacity: .7; }

/* entrada: tiles pousam em cascata; as esteiras só andam depois de entrar na tela */
@media (prefers-reduced-motion: no-preference) {
  html.js .int-wall:not(.is-in) .int-tile { opacity: 0; }
  html.js .int-wall:not(.is-in) .marquee__track { animation-play-state: paused; }
  html.js .int-wall.is-in .int-tile { animation: intTileIn .7s var(--ease-out) calc(min(var(--i, 0), 6) * 70ms) backwards; }
}
@keyframes intTileIn { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }

/* botão de pausa para teclado: aparece só com foco (ou enquanto pausado) */
.int-pause {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 2;
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; min-height: 32px;
  border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .28); background: rgba(31, 42, 54, .92); color: #fff;
  font-size: 12.5px; font-weight: 600; box-shadow: var(--sh-sm); backdrop-filter: blur(4px);
  transition: border-color var(--dur-2);
}
.int-pause:hover { border-color: var(--teal-bright); }
.int-pause__ico { display: inline-flex; color: var(--teal-bright); }
.int-pause__ico svg { width: 14px; height: 14px; }
.int-pause:not(:focus-visible):not(.is-on) {
  width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; border: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
  left: 0; right: auto; /* escondido, ancora à esquerda: o texto interno não passa da borda direita da janela */
}

/* movimento reduzido: parede estática (6 logos por coluna), sem duplicata nem máscara */
@media (prefers-reduced-motion: reduce) {
  .int-col { height: auto; -webkit-mask-image: none; mask-image: none; }
  .int-col--b { margin-top: 0; }
  .int-wall .int-col .marquee__track { animation: none; } /* o reset do DS perde para .marquee--v/--reverse; sem isto a coluna invertida fica deslocada */
  .int-set[aria-hidden="true"] { display: none; }
  .int-set .int-tile:nth-child(n + 7) { display: none; }
  .int-pause { display: none; }
}

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  .int-grid { grid-template-columns: 1fr; gap: 44px; }
  .int-text { max-width: 680px; }
  .int-wall { max-width: 680px; }
  .int-col { --mq-h: 420px; }
  .int-col--b { margin-top: 0; }
}
@media (max-width: 680px) {
  .int-grid { gap: 36px; }
  .int-steps { margin-top: 24px; }
  .int-compare { grid-template-columns: 1fr; }
  /* UM carrossel horizontal com 2 fileiras: as duas colunas viram fileiras sincronizadas
     (mesmo sentido, mesma duração), sangrando até as bordas da tela */
  .int-wall { grid-template-columns: 1fr; gap: 12px; max-width: none; margin-inline: calc(-1 * var(--gutter)) calc(-1 * var(--gutter-r)); }
  .int-wall .int-col {
    --mq-dur: 40s; --mq-gap: 12px; height: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .int-wall .int-col .marquee__track { flex-direction: row; width: max-content; height: auto; animation-name: pxMarqueeX; animation-direction: normal; }
  .int-wall .int-col .marquee__set { flex-direction: row; }
  .int-tile { width: 150px; height: 76px; padding: 12px; }
  .int-tile img { max-height: 48px; }
  .int-pause { right: var(--gutter-r); }
}
@media (max-width: 680px) and (prefers-reduced-motion: reduce) {
  .int-wall .int-col { -webkit-mask-image: none; mask-image: none; padding-inline: var(--gutter) var(--gutter-r); }
  .int-wall .int-col .marquee__track { width: auto; }
  .int-set { flex: 0 1 auto; max-width: 100%; flex-wrap: wrap; }
}
@media (max-width: 420px) {
  .int-step { padding: 14px; gap: 12px; }
  .int-box { padding: 12px 14px 13px; }
}


/* ===== 08_migracao.css ===== */
/* =====================================================================
   08 · Migração assistida (prefixo .mig-) — seção 11 do pacote
   (arquivo nomeado 08_* para ser montado DEPOIS de 08_integracoes.*,
   na ordem aprovada: Check-in → Integrações → Migração)
   Coreografia disparada por PX.onEnter (o JS marca .is-armed e depois .is-in):
   a parada 1 aparece, o avião decola e percorre a rota (offset-path, 2,4 s)
   desenhando a linha tracejada atrás de si; cada parada faz pop quando o
   avião passa; a 4ª (preenchida) recebe um anel de pulso ao pousar.
   Sem JS, sem IntersectionObserver ou com prefers-reduced-motion nada é
   armado: tudo fica visível e estático (não há !important reanimando nada).
   ===================================================================== */

/* ---------- Cabeçalho ---------- */
.mig .sec-head .lead { max-width: 700px; text-wrap: balance; }
.mig-pill__ico { display: inline-flex; }
.mig-pill__ico svg { width: 14px; height: 14px; }
.mig-h2__l2 { display: block; }

/* linha do tempo */
.mig-route { position: relative; max-width: 1200px; margin: 0 auto; }
.mig-route__svg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mig-route__line { fill: none; stroke: #43B098; stroke-opacity: .5; stroke-width: 2; stroke-dasharray: 6 6; stroke-linecap: round; }
.mig-route__draw { fill: none; stroke: #fff; stroke-width: 14; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }

.mig-stops { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.mig-stop { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.mig-stop__dot {
  position: relative; width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--teal); background: #fff;
  display: grid; place-items: center; font-size: 20px; font-weight: 800; color: var(--teal-d); box-shadow: 0 0 0 4px #fff;
}
.mig-stop--last .mig-stop__dot { background: var(--teal); border-color: var(--teal); color: #fff; box-shadow: 0 0 0 4px #fff, var(--sh-teal); }
.mig-stop__dot::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--teal); opacity: 0; pointer-events: none; }
.mig-stop__text { margin-top: 22px; min-width: 0; }
.mig-stop__kicker { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-d); }
.mig-stop__title { margin-top: 6px; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.mig-stop__desc { margin: 8px auto 0; max-width: 240px; font-size: 14.5px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }

/* linha de reserva (só sem JS, quando o SVG não recebe o caminho) */
html:not(.js) .mig-stops::before {
  content: ""; position: absolute; z-index: -1; left: 28px; right: 28px; top: 27px; height: 2px;
  background: repeating-linear-gradient(90deg, rgba(67, 176, 152, .5) 0 6px, transparent 6px 12px);
}
html:not(.js) .mig-plane { display: none; }

/* o avião que percorre a rota (CSS Motion Path; o JS informa o path) */
.mig-plane { position: absolute; left: 0; top: 0; z-index: 2; width: 22px; height: 22px; display: grid; place-items: center; color: var(--teal-d); pointer-events: none; offset-rotate: auto; }
.mig-plane__ico { display: inline-flex; transform: rotate(45deg); }
.mig-plane__ico svg { width: 22px; height: 22px; fill: currentColor; stroke-width: 1.5; }
@supports not (offset-path: path("M0 0 L1 1")) { .mig-plane { display: none; } }

/* ---------- Coreografia da rota ---------- */
html.js .mig-route .mig-plane { opacity: 0; }
html.js .mig-route.is-armed:not(.is-in) :is(.mig-stop__dot, .mig-stop__text) { opacity: 0; }
.mig-route.is-in .mig-stop__dot { animation: pxPop .6s var(--ease-spring) var(--d, 0ms) both; }
.mig-route.is-in .mig-stop__text { animation: pxFadeUp .7s var(--ease-out) calc(var(--d, 0ms) + 120ms) both; }
.mig-route.is-in .mig-stop--last .mig-stop__dot::after { animation: pxPulseRing .9s ease-out calc(var(--d, 0ms) + 250ms) forwards; }
.mig-route.is-in .mig-plane { animation: migFly 2.4s cubic-bezier(.4, 0, .2, 1) .15s both, migPlaneIn .4s ease .15s both; }
.mig-route.is-in .mig-route__draw { animation: pxDash 2.4s cubic-bezier(.4, 0, .2, 1) .15s both; }
/* movimento reduzido ou sem observer: o JS marca .is-static e tudo aparece de imediato */
.mig-route.is-static .mig-stop__dot, .mig-route.is-static .mig-stop__text, .mig-route.is-static .mig-stop--last .mig-stop__dot::after,
.mig-route.is-static .mig-plane, .mig-route.is-static .mig-route__draw { animation-delay: 0ms; }
@keyframes migFly { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes migPlaneIn { from { opacity: 0; } to { opacity: 1; } }

/* faixa escura */
.mig-band {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px;
  margin-top: clamp(44px, 5.5vw, 64px); padding: 32px 36px; border-radius: 18px; color: #fff;
  background: radial-gradient(560px circle at 88% 0%, rgba(67, 176, 152, .34), transparent 62%), var(--grad-dark);
  box-shadow: var(--sh-lg);
}
.mig-band__text { flex: 1 1 420px; min-width: 0; }
.mig-band__title { font-size: 22px; color: #fff; }
.mig-band__desc { margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--on-dark-muted); max-width: 62ch; text-wrap: pretty; }
.mig-band__btn { flex: none; }

/* =====================================================================
   Responsivo
   ===================================================================== */
@media (max-width: 920px) {
  /* linha do tempo vertical: linha à esquerda, paradas à direita */
  .mig-route { max-width: 640px; }
  .mig-stops { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .mig-stop { flex-direction: row; align-items: flex-start; text-align: left; gap: 20px; }
  .mig-stop__dot { flex: none; }
  .mig-stop__text { margin-top: 0; padding-top: 5px; }
  .mig-stop__desc { margin-inline: 0; max-width: 42ch; }
  html:not(.js) .mig-stops::before { left: 27px; right: auto; top: 28px; bottom: 28px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, rgba(67, 176, 152, .5) 0 6px, transparent 6px 12px); }
}

@media (max-width: 680px) {
  .mig-stop { gap: 16px; }
  .mig-stop__dot { width: 48px; height: 48px; font-size: 18px; }
  .mig-stop__text { padding-top: 2px; }
  html:not(.js) .mig-stops::before { left: 23px; top: 24px; bottom: 24px; }
  .mig-band { padding: 26px 22px; gap: 20px; }
  .mig-band__btn { width: 100%; white-space: normal; text-align: center; }
}

@media (max-width: 420px) {
  .mig-band__title { font-size: 20px; }
}


/* ===== 09_depoimentos_planos.css ===== */
/* =====================================================================
   12 · Quem usa recomenda (prefixo .dep-)  +  13 · Planos (prefixo .pl-)
   Coreografia 12: cabeçalho, card destaque e os 3 cards revelam em cascata
   (.rv + --i). Quando cada card entra, a barra das 5 cores recebe um brilho
   que a atravessa da esquerda para a direita (depShine), as aspas crescem
   (.6 → 1, com mola) e, no card da TZ, as 3 caixas de resultado sobem em
   sequência. Micro: card sobe no hover; a bolinha do chip da etapa cresce;
   o logo da mídia dá um zoom leve. O controle Plano A/B (só protótipo)
   troca a mídia com crossfade e ajusta a altura do topo dos 3 cards.
   Coreografia 13: topo escuro revela; os 5 cards sobem em cascata e, em
   cada um, a tripulação (ícones de usuário) "embarca" um a um; o selo
   "Mais escolhido" faz pop. Ao trocar Mensal/Anual, o valor antigo sobe e
   some, o novo entra de baixo (260 ms, escalonado por card), a linha
   riscada esmaece e a nota do anual recolhe com transição de altura.
   ===================================================================== */

/* ---------- 12 · Quem usa recomenda ---------- */
.dep.sec--dark { background: linear-gradient(160deg, #25544E 0%, #2C665A 55%, #357A6B 100%); }
.dep-pill__ico { display: inline-flex; }
.dep-pill__ico svg { width: 14px; height: 14px; }

/* controle A/B (só protótipo) */
.dep-switch {
  position: absolute; top: 22px; right: calc(var(--gutter-r) + 4px); z-index: 3;
  display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .2); backdrop-filter: blur(4px);
}
.dep-switch__lbl { padding: 0 8px 0 10px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.dep-switch__btn {
  min-height: 34px; padding: 7px 13px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, .78);
  transition: background-color var(--dur-2), color var(--dur-2), box-shadow var(--dur-2);
}
.dep-switch__btn:not([aria-pressed="true"]):hover { color: #fff; background: rgba(255, 255, 255, .1); }
.dep-switch__btn[aria-pressed="true"] { background: #fff; color: var(--navy); box-shadow: var(--sh-sm); }

/* mídias dos dois planos empilhadas na mesma área; o controle só troca a opacidade */
.dep-media {
  position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden;
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out), visibility 0s .55s;
}
.dep-media--a { background: repeating-linear-gradient(135deg, #EEF3F2 0 12px, #E6EEEC 12px 24px); }
.dep.is-plano-b .dep-media--a, .dep:not(.is-plano-b) .dep-media--b { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(.97); }
.dep.is-plano-b .dep-media--b, .dep:not(.is-plano-b) .dep-media--a { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* caixa tracejada "FOTO" (plano A, provisório) */
.dep-photo {
  display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: calc(100% - 48px); padding: 18px 26px;
  border: 2px dashed #9CCBBF; border-radius: 14px; color: #3E6E63; text-align: center;
}
.dep-photo--sm { padding: 14px 22px; }
.dep-photo__ico { width: 54px; height: 54px; color: #7FB9AB; }
.dep-photo--sm .dep-photo__ico { width: 46px; height: 46px; }
.dep-photo__k { font-size: 13px; font-weight: 700; letter-spacing: .12em; line-height: 1.2; }
.dep-photo__t { font-size: 12.5px; line-height: 1.3; }

/* card destaque TZ */
.dep-feat-wrap { max-width: 1182px; margin: 0 auto; }
.dep-feat {
  display: grid; grid-template-columns: 400px minmax(0, 1fr); border-radius: 24px; color: var(--ink);
  box-shadow: 0 30px 60px -22px rgba(0, 0, 0, .5);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.dep .dep-feat:hover { transform: translateY(-4px); box-shadow: 0 38px 70px -24px rgba(0, 0, 0, .55); }
.dep-feat::before { height: 6px; }
.dep-feat::before, .dep-card::before { z-index: 3; }   /* a barra das 5 cores fica sobre a mídia (que é absoluta) */
.dep-feat__media { position: relative; min-width: 0; }
.dep-feat .dep-media--b { background: radial-gradient(circle at 50% 45%, #0B4C7D, #00355D 70%); }
.dep-feat__badge {
  position: absolute; right: 20px; bottom: 20px; width: 132px; height: 132px; border-radius: 50%; overflow: hidden;
  border: 4px solid #fff; background: #00355D; box-shadow: 0 10px 24px -6px rgba(0, 0, 0, .45);
}
.dep-feat__badge img { width: 100%; height: 100%; }
.dep-feat__logo { width: 210px; height: 210px; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .35)); transition: transform .9s var(--ease-out); }
.dep-feat:hover .dep-feat__logo { transform: scale(1.04); }

.dep-feat__body { display: flex; flex-direction: column; min-width: 0; padding: 40px 44px 34px; }
.dep-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.dep-tag {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: var(--r-pill);
  background: #F3F5F7; color: #3A4452; font-size: 12.5px; font-weight: 700; line-height: 1.2;
  transition: background-color var(--dur-2), color var(--dur-2);
}
.dep-tag:hover { background: color-mix(in srgb, var(--c) 12%, #fff); color: color-mix(in srgb, var(--c) 60%, var(--ink)); } /* mistura escura: AA (laranja/rosa puros não passam) */
.dep-tag__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); transition: transform var(--dur-2) var(--ease-spring); }
.dep-tag:hover .dep-tag__dot { transform: scale(1.5); }
.dep-tag--all { background: #0F2A40; color: #fff; padding: 6px 12px; }
.dep-tag--all:hover { background: #0F2A40; color: #fff; }
.dep-tag__star { width: 12px; height: 12px; }

/* aspas grandes (crescem quando o card entra) */
.dep-q {
  position: absolute; left: 0; top: 0; font-family: Georgia, 'Times New Roman', serif; font-style: normal; font-size: 44px; line-height: 1;
  color: #2A8F6F; transform-origin: left bottom;
  transition: opacity .6s var(--ease-spring), transform .6s var(--ease-spring);
  transition-delay: calc(var(--i, 0) * 80ms + 350ms);
}
html.js .rv:not(.in) .dep-q { opacity: 0; transform: scale(.6); }

.dep-feat__quote { position: relative; margin: 22px 0 0; padding-top: 34px; }
.dep-feat__text { font-size: 19px; line-height: 1.6; font-style: italic; color: #2F3946; max-width: 40em; }
.dep-feat__text .proto-tag { font-style: normal; }

.dep-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.dep-results__item {
  padding: 12px 16px; border-radius: 12px; background: #F2F5F6;
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), background-color var(--dur-2);
}
.dep-results__item:hover { background: #ECF1F2; }
.dep-results__item:nth-child(1) { transition-delay: calc(var(--i, 0) * 80ms + 420ms); }
.dep-results__item:nth-child(2) { transition-delay: calc(var(--i, 0) * 80ms + 540ms); }
.dep-results__item:nth-child(3) { transition-delay: calc(var(--i, 0) * 80ms + 660ms); }
html.js .rv:not(.in) .dep-results__item { opacity: 0; transform: translateY(16px); }
.dep-results__item b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: #0F2A40; }
.dep-results__item span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: #5E6875; }

.dep-sign { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding-top: 18px; border-top: 1px solid #E8ECEF; }
.dep-avatar {
  flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--navy); color: #fff; font-size: 15px; font-weight: 800; letter-spacing: .02em;
}
.dep-sign__text { min-width: 0; }
.dep-sign__name { display: block; font-size: 16px; font-weight: 800; line-height: 1.3; color: var(--navy); }
.dep-sign__role { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: #5E6875; }
.dep-sign__meta { display: block; font-size: 12.5px; line-height: 1.45; color: #5E6875; } /* --muted-2 fica em 3:1 sobre branco */

/* três cards */
.dep-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 1182px; margin: 24px auto 0; }
.dep-grid__item { display: flex; min-width: 0; }
.dep-card {
  flex: 1; display: flex; flex-direction: column; min-width: 0; border-radius: 22px; color: var(--ink);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .45);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.dep .dep-card:hover { transform: translateY(-4px); box-shadow: 0 32px 60px -22px rgba(0, 0, 0, .5); }
/* --c-d: variante escura do DS para texto pequeno sobre fundo claro (AA) */
.dep-card--atrair { --c: var(--atrair); --c-soft: var(--atrair-soft); --c-d: var(--atrair-text); }
.dep-card--atender { --c: var(--atender); --c-soft: var(--atender-soft); --c-d: var(--atender-text); }
.dep-card--decidir { --c: var(--decidir); --c-soft: var(--decidir-soft); --c-d: var(--decidir-text); }

.dep-card__media { position: relative; height: 280px; transition: height .5s var(--ease-out); }
.dep.is-plano-b .dep-card__media { height: 150px; }
/* plano A: chip com o logo sobre a foto */
.dep-chip {
  position: absolute; right: 16px; bottom: 16px; display: flex; align-items: center; justify-content: center; overflow: hidden;
  border: 3px solid #fff; box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .45);
}
.dep-chip--clube { height: 52px; padding: 0 8px; border-radius: 12px; background: linear-gradient(90deg, #1B3E86, #24539B); }
.dep-chip--clube img { width: 104px; height: auto; }
.dep-chip--eleven { width: 72px; height: 72px; border-radius: 50%; background: #17225E; }
.dep-chip--eleven img { width: 100%; height: 100%; }
.dep-chip--will { height: 52px; padding: 0 8px; border-radius: 12px; background: #1C2D48; }
.dep-chip--will img { width: 96px; height: auto; }
/* plano B: logo centralizado sobre a cor da marca */
.dep-logo img { height: auto; transition: transform .9s var(--ease-out); }
.dep-card:hover .dep-logo img { transform: scale(1.04); }
.dep-logo--clube { background: linear-gradient(90deg, #1B3E86, #24539B); }
.dep-logo--clube img {
  width: 290px; max-width: 88%;
  -webkit-mask-image: radial-gradient(ellipse 72% 80% at 50% 50%, #000 78%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 80% at 50% 50%, #000 78%, transparent 100%);
}
.dep-logo--eleven { background: #17225E; }
.dep-logo--eleven img { width: 118px; height: 118px; }
.dep-logo--will { background: #1C2D48; }
.dep-logo--will img { width: 230px; max-width: 70%; }

.dep-card__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 28px 26px 24px; }
.dep-journey { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dep-journey__lbl { margin-right: 4px; }
.dep-journey__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); transition: transform var(--dur-2) var(--ease-spring); }
.dep-journey__dot:hover { transform: scale(1.4); }
.dep-hl { margin-top: 10px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--c-soft); color: var(--c-d); font-size: 12px; font-weight: 700; line-height: 1.3; }
.dep-quote { position: relative; flex: 1; align-self: stretch; margin: 12px 0 18px; padding-top: 34px; }
.dep-card .dep-q { color: var(--c); font-size: 40px; }
.dep-quote__text { font-size: 15.5px; line-height: 1.62; color: #3A4452; }
.dep-result { align-self: stretch; padding: 11px 16px; border-left: 3px solid var(--c); border-radius: 0 10px 10px 0; background: #F2F5F6; }
.dep-result b { display: block; font-size: 16.5px; font-weight: 800; line-height: 1.3; color: var(--c-d); }
.dep-result span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: #5E6875; }
.dep-sign--sm { align-self: stretch; gap: 12px; margin-top: 20px; }
.dep-sign--sm .dep-avatar { width: 48px; height: 48px; font-size: 14px; }
.dep-avatar--c { background: var(--c); }
.dep-sign--sm .dep-sign__text { display: flex; flex-direction: column; justify-content: center; min-height: 78px; }   /* 4 linhas: as caixas de resultado ficam alinhadas entre os cards */
.dep-sign--sm .dep-sign__name { font-size: 14.5px; }
.dep-sign--sm .dep-sign__role { font-size: 13px; }
.dep:not(.is-plano-b) .dep-sign--sm .dep-avatar { display: none; }   /* plano A: foto no topo, sem iniciais */

/* brilho que atravessa a barra das 5 cores quando o card entra */
.dep-feat::after, .dep-card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; z-index: 4; pointer-events: none;
  background: linear-gradient(90deg, transparent 44%, rgba(255, 255, 255, .9) 50%, transparent 56%);
  background-size: 200% 100%; background-position: -100% 0; background-repeat: no-repeat;
}
.dep-feat::after { height: 6px; background-image: linear-gradient(90deg, transparent 46%, rgba(255, 255, 255, .9) 50%, transparent 54%); }
.rv.in .dep-feat::after, .rv.in .dep-card::after { animation: depShine 1.3s var(--ease-out) calc(var(--i, 0) * 80ms + 450ms) both; }
@keyframes depShine { from { background-position: 200% 0; } to { background-position: -100% 0; } }

.dep .sec-head .lead, .dep-foot { text-wrap: balance; }
.dep-foot { margin-top: 44px; text-align: center; font-size: 15px; color: #D6E7E2; }
.dep-foot b { color: #fff; }

/* ---------- 13 · Planos ---------- */
.pl { padding-top: clamp(20px, 3vw, 44px); }
.pl-head {
  position: relative; z-index: 0; isolation: isolate; overflow: hidden;
  /* 206 px embaixo: os cards sobem 150 px, o card "Mais escolhido" mais 18 px e o selo mais 15 px → sobram ≥ 20 px até a nota (ou até o switch, no mensal) */
  margin-inline: clamp(12px, 2vw, 30px); padding: clamp(56px, 6vw, 84px) 24px 206px; border-radius: 28px;
  background: var(--grad-dark); color: #fff; text-align: center;
}
.pl-head::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 70% at 50% 0%, rgba(67, 176, 152, .16), transparent 70%); }
.pl-head .pl-head__in { margin-bottom: 0; }
.pl-head__title { color: #fff; }
.pl-head .pl-head__lead { max-width: 740px; color: var(--on-dark-muted); text-wrap: balance; }
.pl-switchwrap { display: flex; justify-content: center; margin-top: 26px; }
.pl-switch__opt { min-height: 40px; }
.pl-note { display: grid; grid-template-rows: 1fr; max-width: 760px; margin: 16px auto 0; transition: grid-template-rows .45s var(--ease-out), opacity .35s var(--ease-out), margin-top .45s var(--ease-out); }
.pl-note__inner { min-height: 0; overflow: hidden; }
.pl-note__text { font-size: 12.5px; line-height: 1.55; color: rgba(255, 255, 255, .74); text-wrap: balance; }
.pl.is-mensal .pl-note { grid-template-rows: 0fr; opacity: 0; margin-top: 0; }

/* grade de cards sobre o topo escuro */
.pl-grid {
  --pl-bleed: clamp(0px, (100vw - 1240px) / 2 - 16px, 40px);   /* em telas largas os cards avançam 40 px para cada lado, como no mockup */
  position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; align-items: stretch;
  margin: -150px calc(-1 * var(--pl-bleed)) 0;
}
.pl-grid__item { display: flex; min-width: 0; }
.pl-card {
  position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 26px 18px 22px;
  border-radius: 18px; background: #fff; color: var(--ink); text-align: center;
  box-shadow: 0 30px 60px -24px rgba(31, 42, 54, .45), 0 0 0 1px rgba(227, 232, 236, .9);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.pl .pl-card:hover { transform: translateY(-4px); box-shadow: 0 40px 70px -26px rgba(31, 42, 54, .5), 0 0 0 1px rgba(227, 232, 236, .9); }
.pl-card--pop {
  margin-block: -18px; padding-top: 36px;
  background: linear-gradient(165deg, #48B89F 0%, #3AA389 100%); color: #fff;
  box-shadow: 0 36px 70px -24px rgba(42, 125, 106, .7), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.pl .pl-card--pop:hover { box-shadow: 0 44px 80px -26px rgba(42, 125, 106, .75), inset 0 1px 0 rgba(255, 255, 255, .25); }
.pl-card--net {
  background: linear-gradient(165deg, #2D3645 0%, #263241 100%); color: #fff;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .6), 0 0 0 1.5px var(--teal-bright);
}
.pl .pl-card--net:hover { box-shadow: 0 40px 70px -26px rgba(0, 0, 0, .65), 0 0 0 1.5px var(--teal-bright); }

.pl-card__badge {
  position: absolute; top: -15px; left: 0; right: 0; width: max-content; max-width: calc(100% - 16px); margin-inline: auto;
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--navy); color: #fff; font-size: 12.5px; font-weight: 800; line-height: 1.2; white-space: nowrap;
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .5);
}
.pl-card__star { width: 12px; height: 12px; }
html.js .rv:not(.in) .pl-card__badge { opacity: 0; }
.rv.in .pl-card__badge { animation: pxPop .6s var(--ease-spring) calc(var(--i, 0) * 80ms + 500ms) backwards; }

/* tripulação: ícones de usuário que "embarcam" um a um */
.pl-crew { display: flex; align-items: center; justify-content: center; gap: 3px; min-height: 16px; color: var(--teal); }
.pl-crew__ico, .pl-crew__plus {
  display: inline-flex; transition: opacity .45s var(--ease-spring), transform .45s var(--ease-spring);
  transition-delay: calc(var(--i, 0) * 80ms + 320ms + var(--k, 0) * 70ms);
}
.pl-crew__ico svg { width: 14px; height: 14px; }
.pl-crew__plus { margin-left: 1px; font-size: 14px; font-weight: 800; line-height: 1; }
html.js .rv:not(.in) .pl-crew__ico, html.js .rv:not(.in) .pl-crew__plus { opacity: 0; transform: translateY(6px) scale(.5); }
.pl-card--pop .pl-crew { color: rgba(255, 255, 255, .92); }
.pl-card--net .pl-crew { color: var(--teal-bright); }

.pl-card__num { margin-top: 8px; font-size: 3rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; }
.pl-card__label { margin-top: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pl-card__sub { margin-top: 8px; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--navy); }
.pl-card__div { width: 100%; height: 1px; margin: 18px 0 14px; border: 0; background: var(--line); }
.pl-card--pop .pl-card__num, .pl-card--net .pl-card__num, .pl-card--pop .pl-card__sub, .pl-card--net .pl-card__sub { color: #fff; }
.pl-card--pop .pl-card__label { color: rgba(255, 255, 255, .78); }
.pl-card--net .pl-card__label { color: var(--on-dark-muted); }
.pl-card--pop .pl-card__div { background: rgba(255, 255, 255, .28); }
.pl-card--net .pl-card__div { background: rgba(255, 255, 255, .14); }

/* preço */
.pl-price-block { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; }
.pl-price__was { display: block; min-height: 1.4em; font-size: 12.5px; line-height: 1.4; color: var(--muted); text-decoration: line-through; transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s; }
.pl.is-mensal .pl-price__was { opacity: 0; visibility: hidden; transform: translateY(4px); transition-delay: 0s, 0s, .3s; }
.pl-card--pop .pl-price__was { color: rgba(255, 255, 255, .85); }
.pl-price { display: inline-flex; align-items: baseline; gap: 3px; margin-top: 2px; line-height: 1; color: var(--navy); }
.pl-price__cur { font-size: 15px; font-weight: 800; }
.pl-price__val { display: inline-block; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }   /* inline-block (não flex): o texto copiado/lido fica "109,65" contíguo */
.pl-price__int { font-size: 2.25rem; }
.pl-price__dec { font-size: 1.3rem; }
.pl-price__per { font-size: 14px; font-weight: 600; color: var(--muted); }
.pl-price__meta { margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--teal-d); }
.pl-card--pop .pl-price, .pl-card--pop .pl-price__per, .pl-card--pop .pl-price__meta { color: #fff; }
.pl-card--pop .pl-price__per { color: rgba(255, 255, 255, .85); }
.pl-card__custom { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: #fff; }
.pl-card__custom-sub { margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--teal-bright); }
/* troca Mensal/Anual: sai para cima, entra por baixo */
.pl-swap.is-out { animation: plSwapOut 260ms var(--ease-out) forwards; }
.pl-swap.is-in { animation: plSwapIn 260ms var(--ease-out) backwards; }
@keyframes plSwapOut { to { opacity: 0; transform: translateY(-12px); } }
@keyframes plSwapIn { from { opacity: 0; transform: translateY(12px); } }

/* tokens */
.pl-tokens {
  display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 16px; padding: 10px 12px;
  border: 1px solid #D6EFE7; border-radius: 12px; background: var(--teal-l); text-align: left;
}
.pl-tokens__ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #fff; color: var(--teal-d); }
.pl-tokens__ico svg { width: 16px; height: 16px; }
.pl-tokens__text { display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 49px; }   /* título + 2 linhas: caixas iguais mesmo quando o valor quebra */
.pl-tokens__text b { display: block; font-size: 13px; font-weight: 800; line-height: 1.3; color: var(--navy); }
.pl-tokens__text span { display: block; font-size: 12.5px; line-height: 1.35; color: #5E6875; } /* --muted sobre teal-claro fica em 4,2:1 */
.pl-card--pop .pl-tokens { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .25); }
.pl-card--pop .pl-tokens__ico { background: rgba(255, 255, 255, .22); color: #fff; }
.pl-card--pop .pl-tokens__text b { color: #fff; }
.pl-card--pop .pl-tokens__text span { color: rgba(255, 255, 255, .85); }
.pl-card--net .pl-tokens { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); }
.pl-card--net .pl-tokens__ico { background: rgba(255, 255, 255, .12); color: var(--teal-bright); }
.pl-card--net .pl-tokens__text b { color: #fff; }
.pl-card--net .pl-tokens__text span { color: var(--on-dark-muted); }

.pl-card__btn { width: 100%; margin-top: 16px; padding: 13px 12px; font-size: 14px; line-height: 1.25; white-space: normal; }
.pl-card__fine { margin-top: 12px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.pl-card--pop .pl-card__fine { color: rgba(255, 255, 255, .85); }
.pl-card--net .pl-card__fine { color: var(--on-dark-muted); }

/* incluso em todos os planos */
.pl-incl { margin-top: 32px; padding: 22px 28px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.pl-incl__title { font-size: 15px; font-weight: 800; color: var(--navy); }
.pl-incl__list { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 12px; font-size: 14.5px; color: #3A4452; }
.pl-incl__item { position: relative; padding-left: 20px; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); transition-delay: calc(200ms + var(--k, 0) * 45ms); }
.pl-incl__item::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--atrair); }
html.js .rv:not(.in) .pl-incl__item { opacity: 0; transform: translateY(8px); }

/* banner: grandes agências e redes */
.pl-banner {
  display: grid; grid-template-columns: minmax(0, 1fr) 400px; margin-top: 20px; border-radius: 22px; overflow: hidden;
  background: linear-gradient(120deg, #26303D 0%, #2B3A48 55%, #2C5A52 100%); color: #fff; box-shadow: var(--sh-lg);
}
.pl-banner__main { min-width: 0; padding: 40px 44px; }
.pl-banner__title { margin-top: 18px; max-width: 620px; font-size: 27px; line-height: 1.3; color: #fff; }
.pl-banner__text { margin-top: 12px; max-width: 620px; font-size: 15.5px; line-height: 1.6; color: var(--on-dark-muted); }
.pl-banner__chips { display: flex; flex-wrap: wrap; gap: 9px; max-width: 640px; margin-top: 20px; }
.pl-banner__chip {
  padding: 7px 12px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; background: rgba(255, 255, 255, .08);
  font-size: 13.5px; color: #E3E9EF;
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), background-color var(--dur-2), border-color var(--dur-2);
  transition-delay: calc(250ms + var(--k, 0) * 60ms);
}
.pl-banner__chip:hover { background: rgba(255, 255, 255, .14); border-color: rgba(93, 211, 180, .5); transition-delay: 0s; }
.pl-banner__chip::before { content: "✓"; margin-right: 7px; font-weight: 800; color: var(--teal-bright); }
html.js .rv:not(.in) .pl-banner__chip { opacity: 0; transform: translateY(8px); }
.pl-banner__btn { margin-top: 24px; }
.pl-banner__side { display: flex; flex-direction: column; justify-content: center; gap: 16px; min-width: 0; padding: 40px 28px; border-left: 1px solid rgba(255, 255, 255, .1); }
.pl-banner__kicker { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: #9FB0BF; }
.pl-nets { display: grid; gap: 16px; }
.pl-net {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; background: rgba(255, 255, 255, .06);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), background-color var(--dur-2);
  transition-delay: calc(350ms + var(--k, 0) * 120ms);
}
.pl-net:hover { background: rgba(255, 255, 255, .1); transform: translateX(4px); transition-delay: 0s; }
html.js .rv:not(.in) .pl-net { opacity: 0; transform: translateX(16px); }
.pl-net__logo { flex: none; width: 64px; height: 64px; border-radius: 50%; }
.pl-net__logo--tile { width: 110px; height: 48px; border-radius: 10px; object-fit: cover; }
.pl-net__text { min-width: 0; }
.pl-net__text b { display: block; font-size: 17px; font-weight: 800; line-height: 1.3; }
.pl-net__text span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; letter-spacing: -.005em; color: #B9C4CF; }
.pl-net__text em { font-style: normal; font-weight: 700; color: var(--teal-bright); }

.pl-foot { margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: #5E6875; } /* --muted sobre --bg fica em 4,3:1 */

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  .dep-feat { grid-template-columns: 320px minmax(0, 1fr); }
  .dep-feat__body { padding: 32px 32px 28px; }
  .dep-feat__text { font-size: 17.5px; }
  .dep-results { gap: 10px; }
  .dep-results__item b { font-size: 18px; }
  .dep-grid { gap: 18px; }
  .dep-card__body { padding: 24px 20px 20px; }

  .pl-head { padding-bottom: 160px; }   /* cards sobem 110 px + selo 15 px → 35 px de respiro */
  /* 3 + 2: grade de 6 colunas (3 cards de 2 colunas, depois 2 cards de 3) para a segunda fileira fechar a largura */
  .pl-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: -110px; }
  .pl-grid__item { grid-column: span 2; }
  .pl-grid__item:nth-child(n+4) { grid-column: span 3; }
  .pl-tokens__text { min-height: 0; }
  .pl-card--pop { margin-block: 0; padding-top: 34px; }
  .pl-banner { grid-template-columns: minmax(0, 1fr) 340px; }
  .pl-banner__main { padding: 34px 32px; }
  .pl-banner__side { padding: 34px 28px; }
}

@media (max-width: 920px) {
  .dep-switch { position: static; display: flex; width: max-content; max-width: 100%; margin: 0 auto 22px; }
  .dep-feat { grid-template-columns: minmax(0, 1fr); }
  .dep-feat__media { height: 280px; }
  .dep-grid { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
  .dep-card__media { height: 270px; }
  .dep.is-plano-b .dep-card__media { height: 160px; }

  .pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-grid__item, .pl-grid__item:nth-child(n+4) { grid-column: auto; }
  .pl-grid__item:last-child { grid-column: 1 / -1; }
  .pl-banner { grid-template-columns: minmax(0, 1fr); }
  .pl-banner__side { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .1); padding: 28px 32px 32px; }
}

@media (max-width: 680px) {
  .dep-feat { border-radius: 20px; }
  .dep-feat__media { height: 240px; }
  .dep-feat__badge { width: 100px; height: 100px; right: 14px; bottom: 14px; }
  .dep-feat__logo { width: 160px; height: 160px; }
  .dep-feat__body { padding: 24px 20px 22px; }
  .dep-feat__quote { margin-top: 18px; }
  .dep-feat__text { font-size: 16.5px; }
  .dep-results { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 18px; }
  .dep-sign { gap: 12px; }
  .dep-avatar { width: 46px; height: 46px; font-size: 14px; }
  .dep-foot { margin-top: 32px; font-size: 14.5px; }

  .pl { padding-top: 16px; }
  .pl-head { margin-inline: 8px; padding: 48px 18px 120px; border-radius: 22px; }
  .pl-note { margin-top: 14px; }
  .pl-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: -84px; }
  .pl-grid__item:last-child { grid-column: auto; }
  .pl-card { padding: 24px 20px 20px; }
  .pl-card--pop { padding-top: 34px; }
  .pl-incl { margin-top: 24px; padding: 18px 18px 20px; }
  .pl-incl__list { gap: 8px 18px; font-size: 14px; }
  .pl-banner { margin-top: 16px; border-radius: 18px; }
  .pl-banner__main { padding: 26px 20px 28px; }
  .pl-banner__title { font-size: 22px; }
  .pl-banner__text { font-size: 15px; }
  .pl-banner__btn { width: 100%; }
  .pl-banner__side { padding: 24px 20px 26px; }
  .pl-net { gap: 12px; padding: 12px 14px; }
  .pl-net__logo { width: 56px; height: 56px; }
  .pl-net__logo--tile { width: 92px; height: 40px; }
  .pl-net__text b { font-size: 16px; }
}

@media (max-width: 420px) {
  .dep-switch__lbl { display: none; }
  .dep-switch__btn { padding: 7px 11px; font-size: 12px; }
  .dep-feat__media { height: 220px; }
  .dep-tags { gap: 8px; }
  .dep-tag { padding: 5px 10px; font-size: 12px; }
  .pl-switch__opt { padding-inline: 14px; }
  .pl-card__num { font-size: 2.6rem; }
  .pl-price__int { font-size: 2rem; }
}

/* ---------- Movimento reduzido: nada espera atraso nem fica escondido ---------- */
@media (prefers-reduced-motion: reduce) {
  .dep-q, .dep-results__item, .pl-crew__ico, .pl-crew__plus, .pl-incl__item, .pl-banner__chip, .pl-net { transition-delay: 0s; }
  .rv.in .dep-feat::after, .rv.in .dep-card::after, .rv.in .pl-card__badge { animation: none; }
  .dep-feat:hover .dep-feat__logo, .dep-card:hover .dep-logo img { transform: none; }
}

/* ===== Destaque: Integração Trade (parceria) — substitui o card da TZ (03/11/2026) ===== */
.dep-feat--itrade .dep-media--a { background: #EDEFF1; }
.dep-feat__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transition: transform .9s var(--ease-out); }
.dep-feat--itrade:hover .dep-feat__photo { transform: scale(1.03); }
.dep-feat__badge--wide { width: auto; height: auto; padding: 10px 14px; border-radius: 14px; background: #fff; display: flex; align-items: center; justify-content: center; }
.dep-feat__badge--wide img { width: 150px; height: auto; }
.dep-feat .dep-media--itrade { background: radial-gradient(circle at 50% 45%, #FFFFFF, #E9EEF3 75%); }
.dep-feat__logo--wide { width: 260px; height: auto; filter: drop-shadow(0 10px 20px rgba(15, 42, 64, .18)); }
@media (max-width: 680px) {
  .dep-feat__badge--wide { padding: 8px 10px; }
  .dep-feat__badge--wide img { width: 118px; }
  .dep-feat__logo--wide { width: 200px; }
}

/* ===== Fotos reais nos cards (03/11/2026: Gustavo e Willian) ===== */
.dep-card__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.dep-card:hover .dep-card__photo { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .dep-card:hover .dep-card__photo { transform: none; } }
.dep-chip--left { right: auto; left: 16px; }   /* Willian: rosto à direita, logo sobre o céu à esquerda */


/* ===== 10_allana_faq_fechamento_footer.css ===== */
/* =====================================================================
   10 · Allana (#allana · .al-) + FAQ (#faq · .faq-) + Fechamento
   (#fechamento · .cta-) + Rodapé (#rodape · .ft-)
   Depende de css/ds.css (variáveis, .sec, .btn, .pill, .acc, .rv, .ico).
   ===================================================================== */

/* =====================================================================
   14 · Allana
   Coreografia: a coluna de texto entra pela esquerda e os 3 itens sobem
   em cascata; a moldura do vídeo entra pela direita e o print do widget
   "pousa" logo depois (rv--scale). Em loop, só dois pulsos discretos:
   o ponto "online" e o anel do play.
   ===================================================================== */
.al-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.al-copy { min-width: 0; }

/* identidade */
.al-id { display: flex; align-items: center; gap: 14px; }
.al-avatar {
  position: relative; flex: none; width: 56px; height: 56px; border-radius: 50%;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--teal-l);
}
.al-avatar__img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; }
.al-online {
  position: absolute; right: 0; bottom: 1px; width: 14px; height: 14px; border-radius: 50%;
  background: #2EBE7D; border: 2.5px solid #fff; box-sizing: border-box;
}
.al-online::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid #2EBE7D;
  animation: pxPulseRing 2.6s ease-out infinite;
}
.al-id__txt { display: grid; line-height: 1.25; }
.al-id__name { color: var(--navy); font-weight: 800; font-size: 16px; }
.al-id__status { color: var(--muted); font-size: 13px; font-weight: 600; margin-top: 2px; }

.al-title { font-size: var(--fs-h2); margin-top: 22px; max-width: 24ch; }
.al-lead { font-size: var(--fs-lead); color: var(--muted); line-height: 1.6; margin-top: 14px; max-width: 54ch; }

/* itens */
.al-list { display: grid; gap: 18px; margin-top: 28px; }
.al-item { display: flex; align-items: flex-start; gap: 14px; }
.al-item__ico {
  width: 44px; height: 44px; border-radius: 12px;
  transition: background var(--dur-2), color var(--dur-2), transform var(--dur-3) var(--ease-spring);
}
.al-item:hover .al-item__ico { background: var(--teal); color: #fff; transform: translateY(-2px) rotate(-4deg); }
.al-item__txt { min-width: 0; padding-top: 1px; }
.al-item__txt strong { display: block; color: var(--navy); font-size: 16px; line-height: 1.35; }
.al-item__txt p { color: var(--muted); font-size: 15px; line-height: 1.55; margin-top: 3px; }
/* cascata dos itens quando a coluna é revelada */
html.js .al-copy:not(.in) .al-item { opacity: 0; }
.al-copy.in .al-item { animation: pxFadeUp .65s var(--ease-out) both; animation-delay: calc(.28s + var(--i, 0) * 100ms); }

.al-cta { margin-top: 32px; }

/* vídeo */
.al-media { min-width: 0; }
.al-video {
  position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, #1F2A36 0%, #263B44 50%, #2C5A52 100%);
  box-shadow: 0 32px 60px -26px rgba(20, 30, 45, .55), 0 0 0 1px rgba(45, 54, 69, .06);
}
.al-video__el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #1F2A36; }
.al-cover {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; text-align: left; color: #fff; overflow: hidden;
  border-radius: 20px; cursor: pointer;
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.al-cover::before { /* brilho teal atrás do play */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(42% 70% at 67% 50%, rgba(67, 176, 152, .38), transparent 70%);
}
.al-cover__img {
  position: absolute; left: 0; top: 0; height: 100%; width: auto; max-width: 46%; object-fit: cover; object-position: 50% 0;
  -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent 100%); mask-image: linear-gradient(90deg, #000 72%, transparent 100%);
  transition: transform .9s var(--ease-out), filter .6s;
}
.al-cover:hover .al-cover__img { transform: scale(1.025); }
.al-cover__body {
  position: absolute; inset: 0 0 0 34%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 16px 18px;
}
.al-play { position: relative; width: 76px; height: 76px; display: grid; place-items: center; flex: none; }
.al-play__ring {
  position: absolute; inset: 5px; border-radius: 50%; border: 2px solid rgba(93, 211, 180, .85);
  animation: pxPulseRing 2.4s ease-out infinite;
}
.al-play__btn {
  position: relative; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center;
  background: var(--teal); color: #fff; box-shadow: 0 18px 36px -12px rgba(67, 176, 152, .9);
  transition: transform .5s var(--ease-spring), background var(--dur-2);
}
.al-play__btn svg { width: 28px; height: 28px; margin-left: 4px; }
.al-cover:hover .al-play__btn, .al-cover:focus-visible .al-play__btn { transform: scale(1.09); background: #4CBDA4; }
.al-cover:active .al-play__btn { transform: scale(.98); }
.al-cover:focus-visible { outline-offset: -5px; } /* a moldura tem overflow hidden: anel de foco por dentro */
.al-cover__label {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 8px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(4px);
  font-size: 13px; font-weight: 600; line-height: 1.3; text-align: left; color: #fff;
}
.al-cover__label-ico { display: inline-flex; flex: none; color: var(--teal-bright); }
.al-cover__label-ico svg { width: 14px; height: 14px; }
.al-video.is-playing .al-cover { opacity: 0; transform: scale(1.03); pointer-events: none; }
.al-video.is-loading .al-play__btn { animation: pxBreath 1s ease-in-out infinite; }

/* print do widget */
.al-widget {
  position: relative; z-index: 2; max-width: 360px; margin: 20px -14px 0 auto; padding: 10px;
  background: #fff; border-radius: 18px; box-shadow: var(--sh-lg), 0 0 0 1px var(--line);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.al-widget:hover { transform: translateY(-4px); box-shadow: 0 36px 66px -24px rgba(45, 54, 69, .46), 0 0 0 1px var(--line); }
.al-widget__cap { display: flex; align-items: center; gap: 8px; padding: 4px 6px 10px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.al-widget__dot { width: 8px; height: 8px; border-radius: 50%; background: #2EBE7D; box-shadow: 0 0 0 3px rgba(46, 190, 125, .18); }
.al-widget__img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); }

/* =====================================================================
   15 · FAQ
   Coreografia: cabeçalho e abas sobem (.rv); as perguntas da aba ativa
   entram em cascata (50 ms) quando a lista aparece e a cada troca de aba.
   ===================================================================== */
.faq-tabs__bar {
  display: flex; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  margin-inline: calc(-1 * var(--gutter)) calc(-1 * var(--gutter-r));
  padding: 8px var(--gutter-r) 14px var(--gutter);
}
.faq-tabs__bar::-webkit-scrollbar { display: none; }
.faq-tabs__list { display: flex; gap: 12px; flex: none; margin-inline: auto; }
.faq-tab {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: 999px;
  border: 1px solid var(--line-2); background: #fff; color: var(--navy); font-weight: 700; font-size: 15px; white-space: nowrap;
  transition: background var(--dur-2), color var(--dur-2), border-color var(--dur-2), box-shadow var(--dur-2), transform var(--dur-2) var(--ease-out);
}
.faq-tab:hover { border-color: var(--teal); transform: translateY(-1px); }
.faq-tab[aria-selected="true"] { background: var(--navy); color: #fff; border-color: var(--navy); box-shadow: 0 16px 30px -14px rgba(45, 54, 69, .6); }
.faq-tab__ico { display: inline-flex; color: var(--teal-d); transition: color var(--dur-2), transform var(--dur-3) var(--ease-spring); }
.faq-tab__ico svg { width: 18px; height: 18px; }
.faq-tab:hover .faq-tab__ico { transform: translateY(-1px) rotate(-6deg); }
.faq-tab[aria-selected="true"] .faq-tab__ico { color: var(--teal-bright); }
.faq-tab__n {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px;
  background: #E9EDF1; color: #4A5563; font-size: 12px; font-weight: 800; line-height: 1;
  transition: background var(--dur-2), color var(--dur-2);
}
.faq-tab[aria-selected="true"] .faq-tab__n { background: var(--teal); color: #fff; }

.faq-panels { max-width: 940px; margin: 10px auto 0; }
html.js .faq-panel:not(.is-active) { display: none; }
.faq-acc { display: grid; gap: 12px; }
.faq-q { font: inherit; letter-spacing: normal; color: inherit; margin: 0; text-wrap: initial; }
.faq-q__txt { flex: 1; min-width: 0; line-height: 1.35; }
.faq-q .acc__btn { padding: 20px 22px; }
.faq-q .acc__btn:hover { color: var(--teal-d); }
.faq-acc .acc__body p + p { margin-top: 10px; }
.faq-acc .acc__body strong { white-space: nowrap; } /* "3–4 usuários", "5–8 usuários" não quebram no travessão */
.faq-note { font-size: 12.5px; color: var(--muted); line-height: 1.55; } /* --muted-2 fica em 3:1 sobre branco */
.faq-a { color: var(--teal-d); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.faq-a:hover { color: #1F6E55; }
/* cascata das perguntas */
html.js .faq-panels.is-armed .faq-panel:not(.is-anim) .acc__item { opacity: 0; }
.faq-panel.is-anim .acc__item { animation: pxFadeUp .55s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 50ms); }

.faq-foot {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px;
  margin-top: 36px; text-align: center; color: #5E6875; font-size: 15px; /* --muted sobre --bg fica em 4,3:1 */
}
.faq-foot__item { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0 6px; }
.faq-foot__sep { color: var(--muted-2); font-weight: 700; }

/* =====================================================================
   16 · Fechamento
   Coreografia: o card entra em escala (.rv--scale); a rota tracejada se
   desenha (máscara) e o avião aparece na ponta; depois os traços seguem
   deslizando bem devagar (pxDash, 12 s, em loop).
   ===================================================================== */
.cta.sec { padding-top: 0; }
.cta-card {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; padding: 72px 48px; text-align: center; color: #fff;
  background: linear-gradient(120deg, #43B098, #2E8A76);
  box-shadow: 0 36px 70px -28px rgba(46, 138, 118, .65), var(--sh-teal);
}
.cta-route { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; }
.cta-route__line {
  fill: none; stroke: #fff; stroke-opacity: .35; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 7 11; stroke-dashoffset: 180; animation: pxDash 12s linear infinite;
}
.cta-route__draw {
  fill: none; stroke: #fff; stroke-width: 8; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--ease-out) .35s;
}
html:not(.js) .cta-route__draw { stroke-dashoffset: 0; }
.cta-card.in .cta-route__draw { stroke-dashoffset: 0; }
.cta-plane {
  position: absolute; z-index: 0; left: var(--x, 93.5%); top: var(--y, 13%); width: 28px; height: 28px; margin: -14px 0 0 -14px;
  transform: rotate(var(--a, -4deg)); color: #fff; opacity: .95; pointer-events: none;
  filter: drop-shadow(0 8px 10px rgba(20, 60, 50, .35));
}
html.js .cta-card:not(.in) .cta-plane { opacity: 0; }
.cta-card.in .cta-plane { transition: opacity .7s var(--ease-out) 2.3s; }
.cta-plane__bob { display: block; animation: ctaBob 4.2s ease-in-out infinite; }
.cta-plane svg { width: 28px; height: 28px; display: block; transform: rotate(90deg); }
@keyframes ctaBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.cta-body { position: relative; z-index: 1; }
.cta-pill { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .38); backdrop-filter: blur(4px); }
.cta-pill__ico { display: inline-flex; }
.cta-pill__ico svg { width: 14px; height: 14px; }
.cta-title { color: #fff; font-size: var(--fs-h2); margin-top: 18px; } /* mesmo tamanho dos outros H2 da página */
.cta-text { font-size: var(--fs-lead); line-height: 1.6; color: rgba(255, 255, 255, .92); max-width: 640px; margin: 14px auto 0; }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 32px; }
.cta-actions .btn--ghost { border-color: rgba(255, 255, 255, .72); }
.cta-actions .btn--ghost:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .12); }
.cta-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; margin-top: 24px; font-size: 14.5px; font-weight: 700; }
.cta-meta__sep { opacity: .7; }

/* =====================================================================
   17 · Rodapé
   ===================================================================== */
.ft { padding: 64px 0 28px; }
/* o conteúdo do rodapé é um único .rv (fica longe da borda inferior, que o rootMargin do DS exclui);
   logo/tagline, colunas e copyright entram escalonados quando ele recebe .in */
html.js .ft-inner:not(.in) .ft-top, html.js .ft-inner:not(.in) .ft-cols, html.js .ft-inner:not(.in) .ft-copy { opacity: 0; }
.ft-inner.in .ft-top, .ft-inner.in .ft-cols, .ft-inner.in .ft-copy { animation: pxFadeUp .7s var(--ease-out) both; }
.ft-inner.in .ft-cols { animation-delay: .12s; }
.ft-inner.in .ft-copy { animation-delay: .26s; }
.ft-top { display: grid; justify-items: center; gap: 18px; text-align: center; }
.ft-logo { display: inline-block; border-radius: 6px; transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2); }
.ft-logo img { height: 36px; width: auto; }
.ft-logo:hover { transform: translateY(-2px); }
.ft-tagline { display: grid; font-weight: 800; font-size: clamp(1.25rem, 1rem + .9vw, 1.6rem); line-height: 1.25; letter-spacing: -.015em; }
.ft-tagline__l1 { color: #fff; }
.ft-tagline__l2 { color: var(--teal-bright); }
.ft-cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 40px;
  max-width: 900px; margin: 40px auto 0; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .14);
}
.ft-col { min-width: 0; }
.ft-col__title { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: #fff; margin-bottom: 14px; }
.ft-links { display: grid; gap: 8px; justify-items: start; }
.ft-links li { display: flex; align-items: center; flex-wrap: wrap; }
.ft-link {
  position: relative; display: inline-block; padding: 2px 0; color: var(--on-dark-muted); font-size: 14.5px; line-height: 1.5;
  transition: color var(--dur-2);
}
.ft-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; border-radius: 2px; background: var(--teal-bright);
  transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-3) var(--ease-out);
}
.ft-link:hover, .ft-link:focus-visible { color: #fff; }
.ft-link:hover::after, .ft-link:focus-visible::after { transform: scaleX(1); }
.ft-copy { margin-top: 44px; text-align: center; font-size: 12.5px; color: rgba(255, 255, 255, .72); } /* .55 ficava em 3,6:1 */

/* =====================================================================
   Responsivo
   ===================================================================== */
@media (max-width: 1100px) {
  .al-widget { margin-right: 0; }
  .cta-card { padding: 60px 40px; }
}
@media (max-width: 920px) {
  .al-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .al-title { max-width: none; }
  .al-widget { margin: 20px auto 0; }
  .cta-card { padding: 56px 32px; border-radius: 24px; }
  .ft-cols { gap: 28px 24px; }
}
@media (max-width: 680px) {
  .al-cover__body { gap: 12px; padding: 12px 14px; }
  .al-play { width: 64px; height: 64px; }
  .al-play__btn { width: 56px; height: 56px; }
  .al-play__btn svg { width: 24px; height: 24px; }
  .al-cover__label { font-size: 12.5px; padding: 7px 12px; text-align: center; }
  .al-widget { max-width: 340px; }
  .faq-tab { padding: 11px 18px; font-size: 14.5px; }
  .faq-q .acc__btn { padding: 16px 16px; font-size: 15.5px; }
  .faq-acc .acc__body { padding: 0 16px 18px; font-size: 15px; }
  .faq-foot { flex-direction: column; gap: 12px; }
  .faq-foot__sep { display: none; }
  .faq-foot .link { padding: 4px 0; }
  .cta-card { padding: 48px 22px; border-radius: 22px; }
  .cta-text { font-size: 1rem; }
  .cta-actions { flex-direction: column; align-items: stretch; max-width: 360px; margin-inline: auto; }
  .cta-meta { font-size: 13.5px; }
  .ft { padding: 56px 0 24px; }
  .ft-cols { grid-template-columns: minmax(0, 1fr); gap: 30px; text-align: center; }
  .ft-links { justify-items: center; gap: 2px; }
  .ft-links li { justify-content: center; }
  .ft-link { padding: 9px 0; }
  .ft-copy { margin-top: 36px; }
}
@media (max-width: 420px) {
  .al-cover__body { left: 32%; }
  .al-cover__label { font-size: 12px; }
  .faq-tab { padding: 10px 16px; }
}

/* movimento reduzido: o DS zera durações; aqui zeramos também os atrasos para nada "aparecer tarde" */
@media (prefers-reduced-motion: reduce) {
  .cta-route__draw, .cta-card.in .cta-plane, .al-copy.in .al-item, .faq-panel.is-anim .acc__item,
  .ft-inner.in .ft-top, .ft-inner.in .ft-cols, .ft-inner.in .ft-copy { transition-delay: 0s; animation-delay: 0s; }
  .cta-route__line { stroke-dashoffset: 0; }
}