/* ============================================================
   home-teste-deferred.css — GERADO (T006). NAO editar a mao.
   Copia COMPLETA do CSS da /home-teste. Carregado async (loadCSS
   pattern): estabelece a cascata final identica ao inline original.
   O critical above-fold fica inline no blade so pro primeiro paint.
   Fonte: resources/views/home-teste.blade.php (<style>).
   ============================================================ */
  /* T003 — fontes subsetadas (latin pt-BR, kerning preservado). woff2 único:
     o .ttf nunca era baixado (woff2 universal) e as duplicatas de src eram
     resquício de um hack de path de preview antigo. */
  @font-face {
    font-family: "Agrandir";
    src: url("/home-teste-assets/fonts/pp-agrandir-variable.woff2?v=t003") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Inter";
    src: url("/home-teste-assets/fonts/inter-latin.woff2?v=t003") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
  }

  /* T006 — fallback metric-matched do Agrandir (ver blade critical). Mantido aqui pra
     a copia completa estabelecer a cascata final identica + o --font-display abaixo. */
  @font-face {
    font-family: "Agrandir-fallback";
    src: local("Arial"), local("Liberation Sans"), local("Helvetica Neue"), local("Roboto");
    size-adjust: 102.8%;
  }

  /* ─────────────────────────────────────────────────────
     PROTO-2 APPLE — minimalismo extremo. Quietness as confidence.
     Sobrescritas locais sobre o DS Triagi.
     ───────────────────────────────────────────────────── */

  :root {
    --font-display: "Agrandir", "Agrandir-fallback", "Inter", system-ui, sans-serif;
    --font-body: "Inter", system-ui, sans-serif;
    --ap-bg: #fbfbfa;
    --ap-bg-2: #f5f4f1;
    --ap-line: rgba(10,10,11,0.07);
    --ap-line-2: rgba(10,10,11,0.12);
    --ap-ink: #0a0a0b;
    --ap-ink-2: #5a5a60;
    --ap-ink-3: #666666;
    --ap-accent: #007aff;
  }

  html {
    overflow-x: hidden;
  }
  body {
    overflow-x: hidden;
    overflow-x: clip; /* hidden criaria scroll container e mataria sticky */
  }

  #cases {
    padding: clamp(84px, 9vw, 128px) 0;
    background: var(--ap-bg-2);
  }
  #cases .marquee {
    --review-marquee-shift: 0px;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
  }

  #cases .marquee-track {
    animation-name: review-marquee-scroll;
    transform: translate3d(var(--review-marquee-shift), 0, 0);
    will-change: transform;
  }

  #cases .marquee:hover .marquee-track {
    animation-play-state: running;
  }

  #cases .marquee.is-review-interacting {
    cursor: grabbing;
  }

  #cases .marquee.is-review-interacting .marquee-track {
    animation-play-state: paused;
  }

  #cases .mini-card {
    width: min(360px, calc(100vw - 56px));
    min-height: 138px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
  }

  #cases .mini-card p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  #cases .mini-card .who {
    margin-top: auto;
    min-height: 43px;
  }

  @media (max-width: 600px) {
    #cases .mini-card {
      flex-basis: min(320px, calc(100vw - 52px));
      padding: 20px;
    }
  }

  @keyframes review-marquee-scroll {
    to {
      transform: translate3d(calc(-50% + var(--review-marquee-shift)), 0, 0);
    }
  }

  body {
    font-family: var(--font-body);
    background: var(--ap-bg);
    font-feature-settings: "ss01", "cv11";
    letter-spacing: -0.011em;
  }

  ::selection { background: rgba(37,99,255,0.18); color: var(--ap-ink); }

  /* Smoothing de seções */
  .ap-section {
    position: relative;
    padding: clamp(84px, 9vw, 128px) 0;
  }
  .ap-section.dense { padding: clamp(72px, 10vw, 128px) 0; }
  .ap-section.warm { background: var(--ap-bg-2); }
  .ap-section.dark { background: #0a0a0b; color: white; }
  .ap-section.dark .ap-eyebrow { color: rgba(255,255,255,0.55); }
  .ap-section.dark .ap-sub { color: rgba(255,255,255,0.65); }
  #equipe {
    background: var(--ap-bg);
    overflow: hidden;
    isolation: isolate;
    padding-top: clamp(48px, 6vw, 84px);
  }
  #equipe.ap-agent-scroll-sync {
    min-height: max(1680px, 260vh);
    overflow: visible;
    overflow-anchor: none;
    padding-bottom: clamp(72px, 10vw, 132px);
  }
  #equipe.ap-agent-scroll-sync * {
    overflow-anchor: none;
  }
  #equipe > .ap-container {
    position: relative;
    z-index: 2;
  }
  #equipe.ap-agent-scroll-sync > .ap-container {
    min-height: max(1500px, calc(260vh - 180px));
  }

  .ap-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
  }
  @media (min-width: 768px) { .ap-container { padding: 0 56px; } }

  .ap-narrow { max-width: 880px; margin: 0 auto; }
  .ap-narrower { max-width: 720px; margin: 0 auto; }

  /* ── NAV ─────────────────────────────────────────── */
  .ap-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 90;
    padding: 16px 0;
    transition: background 280ms, backdrop-filter 280ms, border-color 280ms;
    border-bottom: 1px solid transparent;
  }
  .ap-nav.scrolled {
    background: rgba(251, 251, 250, 0.78);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom-color: var(--ap-line);
  }
  .ap-nav-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px;
  }
  .ap-nav-logo { height: 22px; width: auto; opacity: 0.92; }
  .ap-nav-links {
    display: none;
    gap: 32px;
  }
  @media (min-width: 920px) { .ap-nav-links { display: flex; } }
  .ap-nav-link {
    font-size: 13px; color: var(--ap-ink-2); font-weight: 400;
    letter-spacing: -0.005em;
    transition: color 200ms;
  }
  .ap-nav-link:hover { color: var(--ap-ink); }

  .ap-nav-actions { display: flex; align-items: center; gap: 18px; }
  .ap-nav-enter {
    display: none;
    font-size: 13px; color: var(--ap-ink-2);
    letter-spacing: -0.005em;
    transition: color 200ms;
  }
  @media (min-width: 700px) { .ap-nav-enter { display: inline; } }
  .ap-nav-enter:hover { color: var(--ap-ink); }
  .ap-nav-cta {
    display: none;
    align-items: center; gap: 6px;
    font-size: 13px; color: white; font-weight: 500;
    letter-spacing: -0.005em;
    padding: 9px 16px;
    background: var(--ap-ink);
    border-radius: 999px;
    transition: background 200ms, transform 200ms;
  }
  @media (min-width: 700px) { .ap-nav-cta { display: inline-flex; } }
  .ap-nav-cta:hover { background: #232326; }
  .ap-nav-cta .ph { font-size: 14px; }

  /* Hamburger button (mobile only) */
  .ap-nav-burger {
    display: flex;
    align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: 999px;
    background: var(--ap-bg-2);
    color: var(--ap-ink);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 200ms;
  }
  .ap-nav-burger:hover { background: #ece9e2; }
  .ap-nav-burger .ph { font-size: 20px; }
  .ap-burger-lines,
  .ap-burger-lines::before,
  .ap-burger-lines::after {
    display: block;
    width: 18px;
    height: 1.5px;
    border-radius: 999px;
    background: currentColor;
  }
  .ap-burger-lines {
    position: relative;
  }
  .ap-burger-lines::before,
  .ap-burger-lines::after {
    content: "";
    position: absolute;
    left: 0;
  }
  .ap-burger-lines::before { top: -6px; }
  .ap-burger-lines::after { top: 6px; }
  @media (min-width: 920px) { .ap-nav-burger { display: none; } }

  /* Mobile drawer */
  .ap-mobile-menu {
    position: fixed; inset: 0;
    z-index: 95;
    background: var(--ap-bg);
    display: flex; flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms var(--ease-out);
  }
  .ap-mobile-menu.open { opacity: 1; pointer-events: auto; }
  .ap-mobile-menu-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--ap-line);
  }
  .ap-mobile-menu-head img { height: 22px; opacity: 0.92; }
  .ap-mobile-menu-close {
    width: 40px; height: 40px;
    border-radius: 999px;
    background: var(--ap-bg-2);
    color: var(--ap-ink);
    border: 0;
    display: grid; place-items: center;
    cursor: pointer;
  }
  .ap-mobile-menu-close .ph { font-size: 18px; }
  .ap-mobile-menu-body {
    flex: 1;
    padding: 32px 24px;
    display: flex; flex-direction: column;
  }
  .ap-mobile-menu-body a.link {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 32px;
    letter-spacing: -0.028em;
    line-height: 1.1;
    color: var(--ap-ink);
    padding: 14px 0;
    border-bottom: 1px solid var(--ap-line);
    display: flex; align-items: center; justify-content: space-between;
  }
  .ap-mobile-menu-body a.link:last-of-type { border-bottom: 0; }
  .ap-mobile-menu-body a.link .ph { font-size: 18px; color: var(--ap-ink-3); }
  .ap-mobile-menu-foot {
    padding: 24px;
    display: grid; gap: 12px;
    border-top: 1px solid var(--ap-line);
  }
  .ap-mobile-menu-foot .enter {
    text-align: center;
    font-size: 14px;
    color: var(--ap-ink-2);
    padding: 12px 0;
  }
  .ap-mobile-menu-foot .cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--ap-ink); color: white;
    padding: 16px 20px;
    border-radius: 999px;
    font-size: 15px; font-weight: 500;
    letter-spacing: -0.005em;
  }
  body.menu-open { overflow: hidden; }

  /* Sticky scroll CTA — same shimmer-btn treatment, fixed-position override */
  .ap-sticky-cta {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 24px);
    z-index: 80;
    height: 50px;
    padding: 0 26px;
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: -0.005em;
    box-shadow:
      0 10px 24px -8px rgba(10,10,11,0.30),
      0 4px 12px -4px rgba(10,10,11,0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 280ms var(--ease-out),
      transform 360ms var(--ease-out),
      visibility 0s linear 360ms;
    white-space: nowrap;
  }
  .ap-sticky-cta.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition:
      opacity 280ms var(--ease-out),
      transform 360ms var(--ease-out),
      visibility 0s linear 0s;
  }
  @media (max-width: 480px) {
    .ap-sticky-cta { left: 16px; right: 16px; transform: translateY(24px); }
    .ap-sticky-cta.visible { transform: translateY(0); }
  }

  /* ── HERO ────────────────────────────────────────── */
  .ap-hero {
    position: relative;
    padding: 108px 0 clamp(80px, 12vw, 150px);
    text-align: center;
    overflow: visible;
  }
  .ap-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .ap-hero h1 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(48px, 7.4vw, 100px);
    letter-spacing: -0.045em;
    line-height: 0.96;
    margin: 0 auto;
    max-width: 14ch;
    color: var(--ap-ink);
  }
  .ap-hero h1 em {
    font-style: normal;
    color: var(--ap-ink-3);
  }
  .ap-hero-sub {
    font-size: clamp(17px, 1.4vw, 22px);
    line-height: 1.45;
    color: var(--ap-ink-2);
    max-width: 42ch;
    margin: 24px auto 0;
    letter-spacing: -0.013em;
    text-align: center;
  }
  .ap-hero-actions {
    display: inline-flex; gap: 24px; flex-wrap: wrap; align-items: center;
    justify-content: center;
    margin-top: 36px;
  }
  .ap-shimmer {
    --shimmer-color: rgba(255,255,255,1);
    --shimmer-cut: 0.09em;
    --shimmer-speed: 3.5s;
    --shimmer-bg: var(--ap-ink);
    height: 50px;
    padding: 0 26px;
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: -0.005em;
  }
  .ap-shimmer::after {
    background: conic-gradient(from 0deg,
      transparent 0deg,
      var(--shimmer-color) 60deg,
      transparent 120deg,
      transparent 360deg);
    opacity: 1;
    filter: blur(1.5px);
  }
  .ap-link {
    display: inline-flex;
    align-items: center; gap: 4px;
    font-size: 14.5px;
    color: var(--ap-ink);
    font-weight: 400;
    letter-spacing: -0.005em;
    transition: opacity 200ms;
  }
  .ap-link:hover { opacity: 0.55; }
  .ap-link .ph { font-size: 14px; transition: transform 240ms var(--ease-out); }
  .ap-link:hover .ph { transform: translateX(3px); }

  /* Hero image */
  .ap-hero-stage {
    position: relative;
    margin-top: clamp(16px, 2vw, 24px);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
  }
  .ap-hero-image {
    display: block;
    width: min(500px, 82vw);
    height: auto;
    border-radius: 0;
    border: 0;
    position: relative;
    opacity: 1;
    filter: none;
    mix-blend-mode: normal;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.84) 0%, #000 7%, #000 78%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.84) 0%, #000 7%, #000 78%, rgba(0,0,0,0) 100%);
  }
  @media (min-width: 768px) {
    .ap-hero-image { width: min(520px, 40vw); }
  }
  @media (max-width: 919px) {
    .ap-hero .ap-container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .ap-hero-copy { display: contents; }
    .ap-hero h1 { order: 1; }
    .ap-hero-sub { order: 2; }
    .ap-hero-actions {
      order: 3;
      flex-direction: column;
      gap: 14px;
    }
    .ap-hero-stage { order: 4; }
  }
  @media (min-width: 920px) {
    .ap-hero {
      /* Conteúdo no topo (não mais centrado vertical numa tela cheia): título e
         foto aparecem logo abaixo do nav. Mantido em sincronia com o critical
         inline da home-teste.blade.php. */
      padding: calc(88px + 16px) 0 clamp(64px, 8vw, 100px);
      text-align: left;
    }
    .ap-hero .ap-container {
      display: grid;
      grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
      align-items: start;
      column-gap: clamp(40px, 6vw, 88px);
    }
    .ap-hero-copy {
      grid-column: 1;
      align-items: flex-start;
      padding-top: 0;
    }
    .ap-hero h1 {
      grid-column: 1;
      margin: 0;
      max-width: 12.5ch;
      font-size: clamp(38px, 5.6vw, 72px);
      letter-spacing: -0.04em;
      line-height: 1;
    }
    .ap-hero-sub {
      grid-column: 1;
      margin: 24px 0 0;
      text-align: left;
      max-width: 32em;
      font-size: clamp(16px, 1.3vw, 19px);
      line-height: 1.42;
      letter-spacing: -0.011em;
    }
    .ap-hero-actions {
      grid-column: 1;
      justify-content: flex-start;
      margin-top: 30px;
    }
    .ap-hero-stage {
      grid-column: 2;
      width: 100%;
      margin: 0;
      align-self: center;
      align-items: flex-end;
    }
    .ap-hero-image {
      width: min(590px, 46vw);
      max-width: 100%;
    }
    #equipe {
      padding-top: 44px;
    }
    #equipe.ap-agent-scroll-sync {
      min-height: max(1580px, 240vh);
    }
    #equipe.ap-agent-scroll-sync > .ap-container {
      min-height: max(1420px, calc(240vh - 160px));
    }
  }
  .ap-phone::before {
    content: "";
    position: absolute;
    top: 16px; left: 50%;
    transform: translateX(-50%);
    width: 96px; height: 26px;
    background: #0a0a0b;
    border-radius: 999px;
    z-index: 5;
  }
  .ap-phone-screen {
    width: 100%; height: 100%;
    border-radius: 32px;
    background: linear-gradient(180deg, #efeae3 0%, #f5f1ea 100%);
    overflow: hidden;
    position: relative;
    display: flex; flex-direction: column;
  }
  .ap-phone-bar {
    height: 44px;
    display: flex; align-items: flex-end; justify-content: space-between;
    padding: 0 20px 6px;
    font-size: 11px; font-weight: 600; color: #0a0a0b;
    font-feature-settings: "tnum";
    flex-shrink: 0;
  }
  .ap-phone-bar .ind { display: inline-flex; gap: 4px; align-items: center; }
  .ap-phone-bar .ind .ph { font-size: 11px; }
  .ap-wa-head {
    background: #075e54;
    color: white;
    padding: 14px 16px;
    display: flex; align-items: center; gap: 12px;
    flex-shrink: 0;
  }
  .ap-wa-head .av {
    width: 38px; height: 38px;
    border-radius: 999px;
    background: linear-gradient(135deg, #d4d0c8, #b5b0a4);
    display: grid; place-items: center;
    font-size: 14px; font-weight: 600;
    color: white;
  }
  .ap-wa-head .meta strong { display: block; font-size: 13px; letter-spacing: -0.005em; line-height: 1.2; }
  .ap-wa-head .meta span { font-size: 11px; opacity: 0.78; }
  .ap-wa-body {
    flex: 1;
    background: #ece5dd;
    padding: 16px 12px;
    display: flex; flex-direction: column; gap: 8px;
    overflow: hidden;
    background-image:
      radial-gradient(rgba(255,255,255,0.4) 1px, transparent 1px),
      radial-gradient(rgba(0,0,0,0.04) 1px, transparent 1px);
    background-size: 16px 16px, 24px 24px;
    background-position: 0 0, 8px 8px;
  }
  .ap-bubble {
    max-width: 78%;
    padding: 7px 10px 5px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.32;
    letter-spacing: -0.005em;
    color: #0a0a0b;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,0.06);
  }
  .ap-bubble.them {
    background: white;
    align-self: flex-start;
    border-bottom-left-radius: 3px;
  }
  .ap-bubble.us {
    background: #dcf8c6;
    align-self: flex-end;
    border-bottom-right-radius: 3px;
  }
  .ap-bubble .time { font-size: 9px; color: #6b6b6b; margin-left: 6px; font-feature-settings: "tnum"; }
  .ap-bubble.us .time { color: #4a8e60; }
  .ap-typing {
    align-self: flex-start;
    padding: 8px 12px;
    background: white;
    border-radius: 12px;
    border-bottom-left-radius: 3px;
    display: inline-flex; gap: 3px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.06);
  }
  .ap-typing span {
    width: 6px; height: 6px; border-radius: 999px;
    background: #b5b5b5;
    animation: typing-dot 1.2s ease-in-out infinite;
  }
  .ap-typing span:nth-child(2) { animation-delay: 0.18s; }
  .ap-typing span:nth-child(3) { animation-delay: 0.36s; }
  @keyframes typing-dot {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
    30% { transform: translateY(-3px); opacity: 1; }
  }

  /* Soft ambient ring around hero image */
  .ap-hero-stage::before {
    content: "";
    display: none;
    position: absolute;
    width: min(680px, 100vw);
    aspect-ratio: 1 / 1;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(37,99,255,0.10), transparent 62%);
    pointer-events: none;
    z-index: -1;
  }

  /* ── SECTION HEAD ────────────────────────────────── */
  .ap-eyebrow {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--ap-ink-3);
    text-transform: none;
  }
  .ap-h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(38px, 5.6vw, 72px);
    letter-spacing: -0.04em;
    line-height: 1;
    margin: 16px 0 0;
    color: var(--ap-ink);
    max-width: 18ch;
    text-wrap: balance;
  }
  .ap-h2 em { font-style: normal; color: var(--ap-ink-3); }
  .ap-h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(28px, 3.4vw, 44px);
    letter-spacing: -0.028em;
    line-height: 1.04;
    margin: 0;
    color: var(--ap-ink);
  }
  .ap-h4 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(22px, 2.4vw, 30px);
    letter-spacing: -0.022em;
    line-height: 1.1;
    margin: 0;
    color: var(--ap-ink);
  }
  .ap-sub {
    font-size: clamp(16px, 1.3vw, 19px);
    line-height: 1.55;
    color: var(--ap-ink-2);
    margin: 24px 0 0;
    letter-spacing: -0.011em;
    max-width: 32em;
  }
  .ap-section.dark .ap-h2,
  .ap-section.dark .ap-h3,
  .ap-section.dark .ap-h4 { color: white; }
  .ap-section.dark .ap-h2 em { color: rgba(255,255,255,0.72); }

  .ap-section-head {
    text-align: center;
    margin-bottom: clamp(64px, 8vw, 104px);
  }
  .ap-section-head .ap-h2,
  .ap-section-head .ap-sub { margin-left: auto; margin-right: auto; }
  .ap-section-head .ap-sub { max-width: 44em; }
  @media (min-width: 920px) {
    .ap-section-head .ap-sub { max-width: 34em; }
  }

  /* ── SECTION 1: visão (intro) ───────────────────── */
  .ap-pill-row {
    display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
    margin-top: 40px;
  }
  .ap-pill {
    padding: 10px 18px;
    background: white;
    border: 1px solid var(--ap-line);
    border-radius: 999px;
    font-size: 13px;
    color: var(--ap-ink-2);
    letter-spacing: -0.005em;
  }

  /* ── SECTION 2: tab interaction (3 IAs) ─────────── */
  .ap-tabs-wrap {
    --ap-tabs-width: min(330px, calc(100vw - 32px));
    --ap-tabs-fixed-left: 0px;
    --ap-tabs-fixed-width: var(--ap-tabs-width);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ap-tabs-width);
    max-width: var(--ap-tabs-width);
    margin: clamp(26px, 3.4vw, 44px) auto 0;
    padding: 10px 0;
    overflow: visible;
    min-height: 100px;
    z-index: 86;
  }
  .ap-tabs-wrap:not(.is-visible) .ap-tabs {
    opacity: 0;
    pointer-events: none;
    transform: translateY(24px) scale(0.985);
  }
  .ap-tabs-wrap.is-floating .ap-tabs {
    position: fixed;
    left: var(--ap-tabs-fixed-left);
    right: auto;
    bottom: 22px;
    z-index: 86;
    width: var(--ap-tabs-fixed-width);
    margin-inline: 0;
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .ap-tabs-wrap.is-hiding .ap-tabs {
    opacity: 0;
    transform: translateY(24px) scale(0.985);
    pointer-events: none;
  }
  .ap-tabs {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    padding: 8px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(10,10,11,0.04);
    border-radius: 999px;
    scrollbar-width: none;
    box-shadow: 0 26px 56px -34px rgba(10,10,11,0.28), 0 12px 26px -20px rgba(10,10,11,0.18);
    backdrop-filter: blur(22px);
    transition:
      opacity 420ms cubic-bezier(0.23, 1, 0.32, 1),
      transform 520ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .ap-tabs::-webkit-scrollbar { display: none; }
  .ap-tab:focus-visible {
    outline: 2px solid rgba(0,122,255,0.34);
    outline-offset: 3px;
  }
  .ap-tab {
    position: relative;
    min-width: 0;
    flex: 0 0 45px;
    min-height: 45px;
    padding: 3px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    color: var(--ap-ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    text-align: left;
    white-space: nowrap;
    overflow: visible;
    box-shadow: none;
    transition:
      flex 260ms cubic-bezier(0.23, 1, 0.32, 1),
      border-radius 220ms cubic-bezier(0.23, 1, 0.32, 1),
      background 220ms cubic-bezier(0.23, 1, 0.32, 1),
      box-shadow 220ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .ap-tab:not(.active):hover .ap-tab-avatar {
    border-color: rgba(10,10,11,0.24);
  }
  .ap-tab:hover { background: transparent; }
  .ap-tab.active {
    flex: 0 0 150px;
    min-height: 48px;
    justify-content: flex-start;
    padding: 4px 7px 4px 5px;
    gap: 6px;
    background: rgba(255,255,255,0.98);
    color: var(--ap-ink);
    border-color: transparent;
    border-radius: 999px;
    box-shadow: none;
    overflow: hidden;
  }
  .ap-tab-avatar {
    width: 38px;
    height: 38px;
    display: block;
    border-radius: 50%;
    flex: 0 0 auto;
    object-fit: cover;
    border: 1px solid rgba(10,10,11,0.18);
    background: #f6f5f1;
    box-shadow: none;
  }
  .ap-tab.active .ap-tab-avatar {
    width: 38px;
    height: 38px;
    border-color: rgba(10,10,11,0.18);
  }
  .ap-tab-copy {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1px;
    opacity: 1;
    width: auto;
    overflow: hidden;
    line-height: 1.05;
    transform: translateX(0);
    transition:
      opacity 180ms cubic-bezier(0.23, 1, 0.32, 1),
      transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .ap-tab.active .ap-tab-copy {
    opacity: 1;
    width: auto;
    transform: translateX(0);
  }
  .ap-tab:not(.active) .ap-tab-copy {
    opacity: 0;
    width: 0;
    flex-basis: 0;
    transform: translateX(-4px);
  }
  .ap-tab-indicator {
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-radius: 999px;
    flex: 0 0 auto;
    background: #1478d4;
    box-shadow: 0 0 0 2px rgba(20,120,212,0.12);
    opacity: 0;
    transform: scale(0.7);
    transition:
      opacity 180ms cubic-bezier(0.23, 1, 0.32, 1),
      transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .ap-tab.active .ap-tab-indicator {
    opacity: 1;
    transform: scale(1);
  }
  .ap-tab:not(.active) .ap-tab-indicator {
    width: 0;
    margin-left: 0;
    flex-basis: 0;
    box-shadow: none;
  }
  .ap-tab-title,
  .ap-tab-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ap-tab-title {
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--ap-ink);
  }
  .ap-tab-name {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 400;
    color: var(--ap-ink-3);
    letter-spacing: 0;
  }
  .ap-team-title > span {
    display: inline-block;
    font-size: 1em;
  }
  @media (max-width: 979px) {
    #equipe.ap-agent-scroll-sync {
      min-height: max(1960px, 285vh);
      padding-bottom: 92px;
    }
    #equipe.ap-agent-scroll-sync > .ap-container {
      min-height: max(1840px, calc(285vh - 120px));
    }
    #equipe .ap-container {
      display: flex;
      flex-direction: column;
    }
    #equipe .ap-section-head {
      order: 1;
      margin-bottom: 12px;
    }
    #equipe .ap-tabs-wrap {
      order: 2;
      position: relative;
      z-index: 87;
      margin-top: 12px;
      margin-bottom: 22px;
    }
    #equipe .ap-tab-stage {
      order: 3;
    }
    .ap-tabs-wrap {
      --ap-tabs-width: min(388px, calc(100vw - 24px));
      max-width: none;
      width: var(--ap-tabs-width);
      margin-left: calc((100% - var(--ap-tabs-width)) / 2);
      margin-right: calc((100% - var(--ap-tabs-width)) / 2);
      padding: 10px 0;
      min-height: 88px;
    }
    .ap-tabs-wrap.is-floating .ap-tabs {
      position: fixed;
      top: 72px;
      bottom: auto;
      left: var(--ap-tabs-fixed-left);
      width: var(--ap-tabs-fixed-width);
      margin-inline: 0;
    }
    #equipe .ap-tabs-wrap:not(.is-hiding) .ap-tabs {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }
    .ap-tabs-wrap.is-hiding .ap-tabs {
      opacity: 0;
      transform: translateY(-18px) scale(0.985);
      pointer-events: none;
    }
    .ap-tabs {
      gap: 8px;
      padding: 8px;
      border-radius: 999px;
    }
    .ap-tab {
      flex: 0 0 62px;
      min-height: 62px;
      border-radius: 50%;
      padding: 3px;
      justify-content: center;
      gap: 0;
    }
    .ap-tab.active {
      flex: 0 0 186px;
      min-height: 70px;
      padding: 7px 12px 7px 7px;
      gap: 8px;
      border-radius: 999px;
      justify-content: flex-start;
    }
    .ap-tab-avatar {
      width: 56px;
      height: 56px;
      border-width: 1px;
    }
    .ap-tab.active .ap-tab-avatar {
      width: 56px;
      height: 56px;
      border-color: #1478d4;
      box-shadow: 0 0 0 4px rgba(20,120,212,0.18);
    }
    .ap-tab.active .ap-tab-indicator {
      display: none;
    }
    .ap-tab-title { font-size: 18.5px; }
    .ap-tab-name { font-size: 13px; }
  }
  @media (min-width: 400px) and (max-width: 719px) {
    .ap-tab.active {
      flex-basis: 202px;
    }
  }
  @media (max-width: 360px) {
    .ap-tabs-wrap {
      --ap-tabs-width: min(326px, calc(100vw - 24px));
    }
    .ap-tab {
      flex-basis: 56px;
      min-height: 56px;
      padding: 3px;
    }
    .ap-tab.active {
      flex-basis: 174px;
      padding: 6px 10px 6px 6px;
    }
    .ap-tab-avatar {
      width: 50px;
      height: 50px;
    }
    .ap-tab.active .ap-tab-avatar {
      width: 50px;
      height: 50px;
    }
  }
  @media (min-width: 720px) {
    #equipe .ap-tabs-wrap {
      --ap-tabs-width: 66px;
      position: absolute;
      top: clamp(210px, 24vw, 320px);
      right: clamp(18px, 2.6vw, 42px);
      width: var(--ap-tabs-width);
      max-width: var(--ap-tabs-width);
      min-height: 224px;
      margin: 0;
      padding: 0;
    }
    #equipe .ap-tabs-wrap:not(.is-visible) .ap-tabs {
      transform: translateX(18px) scale(0.985);
    }
    #equipe .ap-tabs-wrap.is-floating .ap-tabs {
      position: fixed;
      top: 50%;
      bottom: auto;
      left: var(--ap-tabs-fixed-left);
      width: var(--ap-tabs-fixed-width);
      transform: translateY(-50%);
    }
    #equipe .ap-tabs-wrap.is-hiding .ap-tabs {
      opacity: 0;
      transform: translateX(18px) scale(0.985);
      pointer-events: none;
    }
    #equipe .ap-tabs-wrap.is-floating.is-hiding .ap-tabs,
    #equipe .ap-tabs-wrap.is-floating:not(.is-visible) .ap-tabs {
      transform: translate(18px, -50%) scale(0.985);
    }
    #equipe .ap-tabs {
      flex-direction: column;
      width: 66px;
      max-width: 66px;
      gap: 10px;
      padding: 9px;
      border-radius: 999px;
      overflow: visible;
    }
    #equipe .ap-tab,
    #equipe .ap-tab.active {
      flex: 0 0 48px;
      width: 48px;
      min-width: 48px;
      min-height: 48px;
      padding: 4px;
      gap: 0;
      justify-content: center;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 50%;
      box-shadow: none;
      overflow: visible;
    }
    #equipe .ap-tab:hover,
    #equipe .ap-tab.active:hover {
      background: transparent;
    }
    #equipe .ap-tab-avatar,
    #equipe .ap-tab.active .ap-tab-avatar {
      width: 40px;
      height: 40px;
      border: 2px solid transparent;
      transition:
        border-color 180ms cubic-bezier(0.23, 1, 0.32, 1),
        box-shadow 180ms cubic-bezier(0.23, 1, 0.32, 1),
        transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    #equipe .ap-tab:not(.active):hover .ap-tab-avatar,
    #equipe .ap-tab:not(.active):focus-visible .ap-tab-avatar {
      border-color: transparent;
      box-shadow: 0 10px 24px -18px rgba(10,10,11,0.34);
      transform: translateX(-1px);
    }
    #equipe .ap-tab.active .ap-tab-avatar {
      border-color: #1478d4;
      box-shadow: 0 0 0 4px rgba(20,120,212,0.18);
    }
    #equipe .ap-tab-copy,
    #equipe .ap-tab.active .ap-tab-copy,
    #equipe .ap-tab:not(.active) .ap-tab-copy {
      position: absolute;
      top: 50%;
      right: calc(100% + 12px);
      z-index: 2;
      width: 148px;
      min-width: 148px;
      flex: none;
      display: flex;
      gap: 3px;
      padding: 11px 13px;
      border: 1px solid rgba(10,10,11,0.08);
      border-radius: 16px;
      background: rgba(255,255,255,0.92);
      box-shadow: 0 20px 42px -26px rgba(10,10,11,0.36), 0 10px 22px -18px rgba(10,10,11,0.2);
      backdrop-filter: blur(18px);
      opacity: 0;
      pointer-events: none;
      transform: translate(8px, -50%) scale(0.98);
      transition:
        opacity 160ms cubic-bezier(0.23, 1, 0.32, 1),
        transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    #equipe .ap-tab:hover .ap-tab-copy,
    #equipe .ap-tab:focus-visible .ap-tab-copy {
      opacity: 1;
      transform: translate(0, -50%) scale(1);
    }
    #equipe .ap-tab-title {
      font-size: 13px;
      line-height: 1.12;
    }
    #equipe .ap-tab-name {
      font-size: 10px;
      line-height: 1.15;
    }
    #equipe .ap-tab-indicator,
    #equipe .ap-tab.active .ap-tab-indicator,
    #equipe .ap-tab:not(.active) .ap-tab-indicator {
      display: none;
    }
  }

  .ap-tab-stage {
    position: relative;
    --agent-video-card-width: min(100%, 430px);
    --agent-video-card-height: clamp(344px, 46.4vw, 395px);
    --agent-video-stage-min: var(--agent-video-card-height);
    min-height: var(--agent-video-stage-min);
  }
  #equipe.ap-agent-scroll-sync .ap-tab-stage {
    --ap-agent-stage-top: 120px;
    --ap-agent-stage-bottom-gap: clamp(72px, 10vh, 112px);
    --ap-agent-stage-height: min(700px, calc(100svh - var(--ap-agent-stage-top) - var(--ap-agent-stage-bottom-gap)));
    position: relative;
    display: grid;
    align-items: center;
    justify-items: center;
    z-index: 3;
    height: var(--ap-agent-stage-height);
    min-height: 0;
    overflow: visible;
  }
  #equipe.ap-agent-scroll-sync .ap-tab-stage.is-scroll-pinned {
    position: fixed;
    top: var(--ap-agent-stage-top);
    left: var(--ap-agent-stage-left);
    width: var(--ap-agent-stage-width);
  }
  #equipe.ap-agent-scroll-sync .ap-tab-stage.is-scroll-released {
    position: absolute;
    top: var(--ap-agent-stage-release-top);
    left: var(--ap-agent-stage-release-left);
    width: var(--ap-agent-stage-width);
  }
  @media (min-width: 720px) {
    #equipe.ap-agent-scroll-sync .ap-tab-stage.is-scroll-released {
      margin-bottom: clamp(64px, 8vh, 112px);
    }
  }
  @media (max-width: 719px) {
    #equipe.ap-agent-scroll-sync .ap-tab-stage {
      --ap-agent-stage-top: 188px;
      --ap-agent-stage-bottom-gap: 10px;
      /* 100svh: viewport com a barra do Safari VISÍVEL — o stage sempre cabe na área
         visível (lvh cortava o rodapé atrás da barra). Estabilidade vem do JS (probe). */
      --ap-agent-stage-height: calc(100svh - var(--ap-agent-stage-top) - 10px);
      height: var(--ap-agent-stage-height);
      min-height: 0;
    }
   }
  .ap-tab-panel {
    display: none;
    min-height: var(--agent-video-stage-min);
    animation: panel-fade 600ms var(--ease-out);
  }
  .ap-tab-panel.active {
    display: grid;
    place-items: center;
  }
  #equipe.ap-agent-scroll-sync .ap-tab-panel {
    display: grid;
    grid-area: 1 / 1;
    width: 100%;
    min-height: var(--agent-video-stage-min);
    place-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(18px);
    animation: none;
    transition:
      opacity 240ms cubic-bezier(0.23, 1, 0.32, 1),
      transform 260ms cubic-bezier(0.23, 1, 0.32, 1),
      visibility 0s linear 260ms;
  }
  #equipe.ap-agent-scroll-sync .ap-tab-panel.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition:
      opacity 260ms cubic-bezier(0.23, 1, 0.32, 1),
      transform 280ms cubic-bezier(0.23, 1, 0.32, 1),
      visibility 0s;
    z-index: 2;
  }
  @keyframes panel-fade {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .ap-grid-2 {
    display: grid;
    gap: 48px;
    align-items: center;
  }
  @media (min-width: 880px) {
    .ap-grid-2 { grid-template-columns: 1fr 1.05fr; gap: 88px; }
  }
  .ap-agent-video-only {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: var(--agent-video-stage-min);
    padding: 0;
  }
  .ap-agent-panel-layout {
    width: min(100%, var(--agent-video-card-width));
    display: grid;
    align-items: center;
    justify-items: center;
    gap: 0;
    margin-inline: auto;
  }
  .ap-agent-panel-layout .ap-agent-video-only {
    min-height: 0;
  }
  .ap-agent-story {
    --agent-story-offset-y: clamp(-34px, -2.6vw, -18px);
    --agent-story-bg-start: calc(clamp(34px, 4.5vw, 56px) * 0.98 + 10px);
    width: min(100%, 540px);
    min-height: calc(var(--agent-story-bg-start) + 190px);
    position: relative;
    z-index: 4;
    margin-top: var(--agent-story-offset-y);
    text-align: center;
  }
  .ap-agent-story::before,
  .ap-agent-story::after {
    content: none;
  }
  .ap-agent-story-title {
    position: relative;
    z-index: 1;
    max-width: 9em;
    margin: 0 auto;
    font-family: var(--font-display);
    font-size: clamp(34px, 4.5vw, 56px);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: -0.04em;
    color: var(--ap-ink);
  }
  .ap-agent-story-title em {
    font-style: normal;
    color: inherit;
  }
  .ap-agent-story-sub {
    position: relative;
    z-index: 1;
    max-width: 27em;
    margin: 10px auto 0;
    font-family: var(--font-body);
    font-size: clamp(16px, 1.3vw, 19px);
    line-height: 1.55;
    letter-spacing: -0.011em;
    color: var(--ap-ink-2);
  }
  .ap-agent-story-copy {
    position: relative;
    z-index: 1;
  }
  .ap-agent-story-card {
    width: min(100%, 389px);
    aspect-ratio: 3 / 2;
    flex: none;
    align-self: center;
    margin: clamp(20px, 2.7vw, 30px) auto 0;
  }
  .ap-agent-glass {
    position: relative;
    margin-top: clamp(24px, 3vw, 34px);
    overflow: visible;
    background: transparent;
  }
  .ap-agent-glass-rail {
    position: relative;
    overflow: visible;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    user-select: none;
    cursor: default;
    scroll-behavior: smooth;
    background: transparent;
  }
  .ap-agent-glass-rail:active { cursor: default; }
  .ap-agent-glass-rail::-webkit-scrollbar { display: none; }
  .ap-agent-glass-track {
    display: flex;
    gap: 13px;
    width: max-content;
    padding: 2px 20px 14px;
    background: transparent;
  }
  .ap-agent-mini-card {
    position: relative;
    isolation: isolate;
    width: clamp(278px, 35.9vw, 389px);
    min-height: 196px;
    flex: 0 0 clamp(278px, 35.9vw, 389px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    padding: 13px;
    border-radius: 18px;
    overflow: hidden;
    scroll-snap-align: start;
    background:
      linear-gradient(145deg, rgba(255,255,255,0.34), rgba(219,234,231,0.12) 48%, rgba(164,186,190,0.16)),
      rgba(224,238,235,0.10);
    border: 1px solid rgba(150,166,168,0.30);
    box-shadow:
      22px 28px 48px -30px rgba(33,41,44,0.34),
      0 18px 42px -32px rgba(0,0,0,0.30),
      inset 1px 1px 0 rgba(255,255,255,0.76),
      inset -1px -1px 0 rgba(96,116,119,0.15),
      inset 0 0 22px rgba(255,255,255,0.22);
    backdrop-filter: blur(18px) saturate(138%);
    -webkit-backdrop-filter: blur(18px) saturate(138%);
    color: var(--ap-ink);
  }
  .ap-agent-mini-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(circle at 18% 24%, rgba(255,255,255,0.46), transparent 29%),
      radial-gradient(circle at 86% 18%, rgba(168,202,195,0.18), transparent 25%),
      linear-gradient(145deg, rgba(255,255,255,0.24), transparent 43%, rgba(88,112,116,0.09));
    opacity: 0.86;
  }
  .ap-agent-mini-card::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: 0;
    pointer-events: none;
    border-radius: 17px;
    border: 1px solid rgba(255,255,255,0.46);
    box-shadow:
      inset 12px 14px 22px rgba(255,255,255,0.26),
      inset -18px -20px 34px rgba(95,116,120,0.10);
  }
  .ap-agent-mini-card > * {
    position: relative;
    z-index: 1;
  }
  .ap-agent-mini-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.095em;
    text-transform: uppercase;
    color: rgba(10,10,11,0.54);
  }
  .ap-agent-mini-label .ph {
    font-size: 15px;
    color: rgba(10,10,11,0.58);
  }
  .ap-agent-mini-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.38;
    letter-spacing: -0.012em;
  }
  @media (min-width: 980px) {
    .ap-agent-panel-layout {
      width: min(100%, 940px);
      grid-template-columns: minmax(0, 344px) minmax(300px, 389px);
      grid-template-rows: auto auto;
      column-gap: clamp(46px, 7vw, 92px);
      row-gap: clamp(18px, 2.4vw, 30px);
      align-items: center;
      justify-content: center;
      position: relative;
      isolation: isolate;
      --agent-video-render-height: 316px;
    }
    .ap-agent-panel-layout::before,
    .ap-agent-panel-layout::after {
      content: none;
    }
    .ap-agent-panel-layout .ap-agent-video-only {
      grid-column: 1;
      grid-row: 1;
      justify-self: center;
      position: relative;
      z-index: 2;
    }
    .ap-agent-story {
      display: contents;
      text-align: center;
    }
    .ap-agent-story::before,
    .ap-agent-story::after {
      content: none;
    }
    .ap-agent-story-copy {
      grid-column: 1;
      grid-row: 2;
      align-self: start;
      justify-self: center;
      width: min(100%, 344px);
      margin-top: 0;
      position: relative;
      z-index: 2;
    }
    .ap-agent-story-title {
      margin-left: auto;
      margin-right: auto;
    }
    .ap-agent-story-sub {
      margin-left: auto;
      margin-right: auto;
    }
    .ap-agent-panel-layout .ap-agent-story-card {
      grid-column: 2;
      grid-row: 1 / span 2;
      width: min(100%, 389px);
      align-self: center;
      justify-self: center;
      margin: 0;
      position: relative;
      z-index: 2;
    }
    #panel-atendimento .ap-queue-flow {
      grid-column: 2;
      grid-row: 1 / span 2;
      align-self: center;
      justify-self: center;
      margin-top: clamp(20px, 2.4vw, 30px);
    }
  }
  @media (max-width: 979px) {
    .ap-agent-story {
      text-align: center;
    }
    .ap-agent-story-title,
    .ap-agent-story-sub {
      margin-left: auto;
      margin-right: auto;
    }
    .ap-agent-glass {
      text-align: left;
    }
  }
  @media (min-width: 720px) and (max-width: 979px) {
    #equipe.ap-agent-scroll-sync .ap-tab-stage {
      --ap-agent-stage-top: 150px;
      --ap-agent-stage-bottom-gap: 28px;
      --ap-agent-stage-height: calc(100svh - var(--ap-agent-stage-top) - var(--ap-agent-stage-bottom-gap));
      height: var(--ap-agent-stage-height);
      min-height: 0;
    }
    #equipe.ap-agent-scroll-sync .ap-tab-panel {
      height: 100%;
      min-height: 0;
      transform: none;
      transition:
        opacity 170ms cubic-bezier(0.23, 1, 0.32, 1),
        visibility 0s linear 170ms;
    }
    #equipe.ap-agent-scroll-sync .ap-tab-panel.active {
      transform: none;
      transition:
        opacity 190ms cubic-bezier(0.23, 1, 0.32, 1),
        visibility 0s;
    }
    #equipe.ap-agent-scroll-sync .ap-agent-panel-layout {
      --agent-mobile-stage-height: var(--ap-agent-stage-height, calc(100svh - 180px));
      --agent-mobile-video-width: var(--agent-mobile-video-fit, clamp(278px, 43vw, 360px));
      width: min(100%, 520px);
      height: 100%;
      min-height: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--agent-mobile-gap, clamp(14px, 1.45svh, 20px));
      overflow: visible;
    }
    #equipe.ap-agent-scroll-sync .ap-agent-video-only {
      width: var(--agent-mobile-video-width);
      min-height: 0;
      flex: 0 0 auto;
      align-self: center;
    }
    #equipe.ap-agent-scroll-sync .ap-agent-video-only .ap-demo-card.ap-video-demo {
      width: 100%;
      max-width: none;
    }
    #equipe.ap-agent-scroll-sync .ap-agent-story {
      display: contents;
      width: auto;
      max-width: none;
      min-height: 0;
      margin: 0;
      text-align: center;
    }
    #equipe.ap-agent-scroll-sync .ap-agent-story-copy {
      flex: 0 0 auto;
      width: min(100%, 480px);
      align-self: center;
      text-align: center;
    }
    #equipe.ap-agent-scroll-sync .ap-agent-story-title {
      max-width: none;
      margin: 0;
      font-size: clamp(34px, 4.75vw, 42px);
      line-height: 1;
    }
    #equipe.ap-agent-scroll-sync .ap-agent-story-sub {
      max-width: 38ch;
      margin: 7px auto 0;
      font-size: clamp(14px, 1.85vw, 16px);
      line-height: 1.32;
    }
    #equipe.ap-agent-scroll-sync .ap-queue-flow,
    #equipe.ap-agent-scroll-sync .ap-agent-story-card,
    #equipe.ap-agent-scroll-sync .ap-carlos-codepen-stage {
      flex: 0 0 auto;
      min-height: 0;
      align-self: center;
      margin-top: 0;
    }
    #equipe.ap-agent-scroll-sync .ap-queue-flow {
      --queue-connector-height: clamp(20px, 2.6svh, 34px);
      width: min(100%, 440px);
      max-width: min(100%, 440px);
      display: grid;
      align-content: center;
    }
    #equipe.ap-agent-scroll-sync .ap-queue-stack {
      height: clamp(66px, 8.8svh, 88px);
    }
    #equipe.ap-agent-scroll-sync .ap-queue-card,
    #equipe.ap-agent-scroll-sync .ap-queue-response {
      border-radius: 18px;
    }
    #equipe.ap-agent-scroll-sync .ap-melissa-card {
      --melissa-crm-offset: 16px;
      --melissa-crm-enter-offset: 34px;
      width: min(100%, 448px);
      min-height: 0;
      height: clamp(210px, calc(var(--agent-mobile-stage-height) * 0.31), 264px);
      max-height: none;
      padding: 9px 12px 0;
      overflow: visible;
    }
    #equipe.ap-agent-scroll-sync .ap-melissa-calendar {
      width: 58%;
      min-height: calc(100% - 18px);
      padding: 10px;
      border-radius: 17px;
    }
    #equipe.ap-agent-scroll-sync .ap-melissa-week,
    #equipe.ap-agent-scroll-sync .ap-melissa-days {
      gap: 4px;
      margin-top: 7px;
    }
    #equipe.ap-agent-scroll-sync .ap-melissa-days span {
      height: 18px;
      border-radius: 7px;
      font-size: 9px;
    }
    #equipe.ap-agent-scroll-sync .ap-melissa-slots {
      gap: 5px;
      margin-top: 8px;
    }
    #equipe.ap-agent-scroll-sync .ap-melissa-slot {
      padding: 6px 9px;
      border-radius: 11px;
    }
    #equipe.ap-agent-scroll-sync .ap-melissa-slot span,
    #equipe.ap-agent-scroll-sync .ap-melissa-slot strong {
      font-size: 9.6px;
    }
    #equipe.ap-agent-scroll-sync .ap-melissa-kanban {
      width: 60%;
      min-height: calc(100% - 24px);
      margin: calc((var(--agent-mobile-stage-height) * -0.17)) 0 0 auto;
      padding: 10px;
      border-radius: 17px;
    }
    #equipe.ap-agent-scroll-sync .ap-melissa-lanes {
      min-height: 78px;
      gap: 6px;
      margin-top: 7px;
      padding: 7px;
      border-radius: 14px;
    }
    #equipe.ap-agent-scroll-sync .ap-melissa-lane {
      padding: 8px 7px;
      border-radius: 12px;
    }
    #equipe.ap-agent-scroll-sync .ap-melissa-lead {
      top: 44px;
      min-height: 44px;
      padding: 7px;
      gap: 6px;
      border-radius: 12px;
    }
    #equipe.ap-agent-scroll-sync .ap-melissa-lead-avatar {
      width: 24px;
      height: 24px;
    }
    #equipe.ap-agent-scroll-sync .ap-melissa-lead strong {
      font-size: 10px;
    }
    #equipe.ap-agent-scroll-sync .ap-carlos-codepen-stage {
      width: min(100%, 430px);
      max-width: none;
      height: var(--agent-mobile-carlos-stage-height, clamp(218px, calc(var(--agent-mobile-stage-height) * 0.34), 286px));
      left: auto;
      transform: none;
      margin-inline: auto;
      margin-top: 0;
      margin-bottom: 0;
      place-items: start center;
      overflow: hidden;
      -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%);
      mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%);
    }
    #equipe.ap-agent-scroll-sync .ap-carlos-codepen {
      --size: var(--agent-mobile-carlos-size, clamp(6.1px, 0.82vw, 6.9px));
      --height: 80em;
      padding-top: 0;
      transform: translateY(0);
    }
    #equipe.ap-agent-scroll-sync .ap-tab-panel.active .ap-melissa-calendar {
      animation: none;
      opacity: 0.78;
      transform: rotate(-2deg) translateX(-18px);
      filter: none;
    }
    #equipe.ap-agent-scroll-sync .ap-tab-panel.active .ap-melissa-kanban {
      animation: none;
      opacity: var(--crm-opacity, 0.86);
      transform: translateX(var(--melissa-crm-offset)) translateZ(0);
      filter: none;
    }
    #equipe.ap-agent-scroll-sync .ap-tab-panel.active .ap-carlos-codepen .phone,
    #equipe.ap-agent-scroll-sync .ap-tab-panel.active .ap-carlos-codepen .ap-carlos-bento-card {
      animation: none;
      opacity: 1;
      transform: scale3d(1, 1, 1);
    }
  }
  @media (max-width: 719px) {
    .ap-agent-panel-layout {
      gap: 0;
    }
    .ap-agent-story {
      width: 100%;
      max-width: calc(100vw - 36px);
      margin-top: -18px;
    }
    .ap-agent-story-title {
      font-size: 34px;
      line-height: 1.02;
    }
    .ap-agent-story-sub {
      max-width: 32ch;
    }
    .ap-agent-story-card {
      width: min(100%, 278px);
    }
    .ap-agent-glass {
      margin-inline: 0;
    }
    .ap-agent-glass-rail {
      mask-image: none;
      -webkit-mask-image: none;
    }
    .ap-agent-glass-track {
      padding-inline: 0;
    }
    .ap-agent-mini-card {
      width: 278px;
      min-height: 196px;
      flex-basis: 278px;
    }
    #equipe.ap-agent-scroll-sync .ap-tab-panel {
      height: 100%;
      min-height: 0;
      transform: none;
      transition:
        opacity 140ms cubic-bezier(0.23, 1, 0.32, 1),
        visibility 0s linear 140ms;
    }
    #equipe.ap-agent-scroll-sync .ap-tab-panel.active {
      transform: none;
      transition:
        opacity 160ms cubic-bezier(0.23, 1, 0.32, 1),
        visibility 0s;
    }
    #equipe.ap-agent-scroll-sync .ap-agent-panel-layout {
      --agent-mobile-stage-height: var(--ap-agent-stage-height, calc(100svh - 200px));
      --agent-mobile-video-width: var(--agent-mobile-video-fit, clamp(198px, 58vw, 340px));
      width: min(100%, clamp(342px, 56vw, 520px));
      height: 100%;
      min-height: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: var(--agent-mobile-gap, clamp(10px, 1.55svh, 18px));
      overflow: visible;
    }
    #equipe.ap-agent-scroll-sync .ap-agent-video-only {
      width: var(--agent-mobile-video-width);
      min-height: 0;
      flex: 0 0 auto;
      align-self: center;
    }
    #equipe.ap-agent-scroll-sync .ap-agent-video-only .ap-demo-card.ap-video-demo {
      width: 100%;
      max-width: none;
    }
    #equipe.ap-agent-scroll-sync .ap-agent-story {
      display: contents;
      width: auto;
      max-width: none;
      min-height: 0;
      margin: 0;
      text-align: center;
    }
    #equipe.ap-agent-scroll-sync .ap-agent-story-copy {
      flex: 0 0 auto;
      width: min(100%, 336px);
      align-self: center;
      text-align: center;
    }
    #equipe.ap-agent-scroll-sync .ap-agent-story-title {
      max-width: none;
      margin: 0;
      font-size: clamp(26px, 7.4vw, 35px);
      line-height: 1;
    }
    #equipe.ap-agent-scroll-sync .ap-agent-story-sub {
      max-width: 31ch;
      margin: 5px auto 0;
      font-size: clamp(12px, 3.2vw, 14px);
      line-height: 1.2;
    }
    #equipe.ap-agent-scroll-sync .ap-queue-flow,
    #equipe.ap-agent-scroll-sync .ap-agent-story-card,
    #equipe.ap-agent-scroll-sync .ap-carlos-codepen-stage {
      flex: 0 0 auto;
      min-height: 0;
      align-self: center;
      margin-top: 0;
    }
    #equipe.ap-agent-scroll-sync .ap-queue-flow {
      --queue-connector-height: clamp(16px, 3.6svh, 28px);
      width: min(100%, 330px);
      max-width: min(100%, 330px);
      display: grid;
      align-content: center;
    }
    #equipe.ap-agent-scroll-sync .ap-queue-stack {
      height: clamp(54px, 10svh, 72px);
    }
    #equipe.ap-agent-scroll-sync .ap-queue-card {
      padding: 10px 13px;
      gap: 9px;
      border-radius: 15px;
    }
    #equipe.ap-agent-scroll-sync .ap-queue-avatar {
      width: 32px;
      height: 32px;
    }
    #equipe.ap-agent-scroll-sync .ap-queue-name {
      font-size: 12.8px;
    }
    #equipe.ap-agent-scroll-sync .ap-queue-msg {
      font-size: 11px;
    }
    #equipe.ap-agent-scroll-sync .ap-queue-badge {
      padding: 3px 7px;
      font-size: 9px;
    }
    #equipe.ap-agent-scroll-sync .ap-queue-response {
      padding: 12px 13px;
      gap: 9px;
      border-radius: 16px;
    }
    #equipe.ap-agent-scroll-sync .ap-queue-thais-avatar {
      width: 34px;
      height: 34px;
    }
    #equipe.ap-agent-scroll-sync .ap-queue-response-name {
      font-size: 13px;
    }
    #equipe.ap-agent-scroll-sync .ap-queue-response-msg {
      min-height: 26px;
      font-size: 11.3px;
      line-height: 1.2;
    }
    #equipe.ap-agent-scroll-sync .ap-queue-response-status {
      margin-top: 2px;
    }
    #equipe.ap-agent-scroll-sync .ap-melissa-card {
      --melissa-crm-offset: 10px;
      --melissa-crm-enter-offset: 24px;
      width: min(100%, 338px);
      min-height: 0;
      height: clamp(124px, calc(var(--agent-mobile-stage-height) * 0.24), 184px);
      max-height: none;
      padding: 5px 8px 0;
      overflow: visible;
    }
    #equipe.ap-agent-scroll-sync .ap-melissa-calendar {
      width: 58%;
      min-height: calc(100% - 12px);
      padding: 7px;
      border-radius: 15px;
    }
    #equipe.ap-agent-scroll-sync .ap-melissa-cal-head span,
    #equipe.ap-agent-scroll-sync .ap-melissa-board-head span {
      font-size: 10.8px;
    }
    #equipe.ap-agent-scroll-sync .ap-melissa-week,
    #equipe.ap-agent-scroll-sync .ap-melissa-days {
      gap: 3px;
      margin-top: 5px;
    }
    #equipe.ap-agent-scroll-sync .ap-melissa-days span {
      height: 15px;
      border-radius: 6px;
      font-size: 8px;
    }
    #equipe.ap-agent-scroll-sync .ap-melissa-slots {
      gap: 3px;
      margin-top: 5px;
    }
    #equipe.ap-agent-scroll-sync .ap-melissa-slot {
      padding: 4px 7px;
      border-radius: 9px;
    }
    #equipe.ap-agent-scroll-sync .ap-melissa-slot span,
    #equipe.ap-agent-scroll-sync .ap-melissa-slot strong {
      font-size: 8.6px;
    }
    #equipe.ap-agent-scroll-sync .ap-melissa-kanban {
      width: 62%;
      min-height: calc(100% - 16px);
      margin: calc((var(--agent-mobile-stage-height) * -0.21)) 0 0 auto;
      padding: 7px;
      border-radius: 15px;
    }
    #equipe.ap-agent-scroll-sync .ap-melissa-lanes {
      min-height: 58px;
      gap: 4px;
      margin-top: 5px;
      padding: 5px;
      border-radius: 12px;
    }
    #equipe.ap-agent-scroll-sync .ap-melissa-lane {
      padding: 6px 5px;
      border-radius: 10px;
    }
    #equipe.ap-agent-scroll-sync .ap-melissa-lane i {
      height: 23px;
      margin-top: 8px;
      border-radius: 9px;
    }
    #equipe.ap-agent-scroll-sync .ap-melissa-lead {
      top: 34px;
      min-height: 38px;
      padding: 6px;
      gap: 5px;
      border-radius: 11px;
    }
    #equipe.ap-agent-scroll-sync .ap-melissa-lead-avatar {
      width: 20px;
      height: 20px;
    }
    #equipe.ap-agent-scroll-sync .ap-melissa-lead strong {
      font-size: 9px;
    }
    #equipe.ap-agent-scroll-sync .ap-carlos-codepen-stage {
      width: min(100vw, 430px);
      max-width: none;
      min-height: 0;
      height: var(--agent-mobile-carlos-stage-height, clamp(132px, calc(var(--agent-mobile-stage-height) * 0.28), 220px));
      left: auto;
      transform: none;
      margin-inline: calc((100% - min(100vw, 430px)) / 2);
      margin-top: 0;
      margin-bottom: 0;
      place-items: start center;
      overflow: hidden;
      -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
      mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
    }
    #equipe.ap-agent-scroll-sync .ap-carlos-codepen {
      --size: var(--agent-mobile-carlos-size, clamp(5.4px, 1.6vw, 7.1px));
      --height: 80em;
      padding-top: 0;
      transform: translateY(0);
    }
    #equipe.ap-agent-scroll-sync .ap-tab-panel.active .ap-melissa-calendar {
      animation: none;
      opacity: 0.78;
      transform: rotate(-2deg) translateX(-16px);
      filter: none;
    }
    #equipe.ap-agent-scroll-sync .ap-tab-panel.active .ap-melissa-kanban {
      animation: none;
      opacity: var(--crm-opacity, 0.86);
      transform: translateX(var(--melissa-crm-offset)) translateZ(0);
      filter: none;
    }
    #equipe.ap-agent-scroll-sync .ap-tab-panel.active .ap-carlos-codepen .phone,
    #equipe.ap-agent-scroll-sync .ap-tab-panel.active .ap-carlos-codepen .ap-carlos-bento-card {
      animation: none;
      opacity: 1;
      transform: scale3d(1, 1, 1);
    }
  }
  .ap-agent-video-only .ap-demo-card.ap-video-demo {
    width: min(80%, 344px);
    height: auto;
    min-height: 0;
    max-width: 344px;
    margin-inline: auto;
    aspect-ratio: 540 / 620;
    transform: none;
  }
  .ap-mini-stat {
    margin-top: 32px;
    display: flex; gap: 32px; flex-wrap: wrap;
  }
  .ap-mini-stat .v {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 400;
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--ap-ink);
    font-feature-settings: "tnum";
  }
  .ap-mini-stat .l {
    font-size: 12.5px;
    color: var(--ap-ink-3);
    letter-spacing: -0.005em;
    margin-top: 4px;
  }

  /* Demo container — agenda mockup */
  .ap-demo-card {
    background: white;
    border: 1px solid var(--ap-line);
    border-radius: 24px;
    padding: 24px;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.6) inset,
      0 30px 60px -30px rgba(10,10,11,0.10),
      0 12px 32px -16px rgba(10,10,11,0.06);
  }
  .ap-demo-card.ap-video-demo {
    /* TRIAGI_VIDEO_TUNE_OFF
       Ajustes de cor DESLIGADOS a pedido:
       --ana-video-hue: 0deg;
       --ana-video-saturation: 1;
       --ana-video-brightness: 1;
       --ana-video-contrast: 1;
       --ana-video-temperature-strength: 0;
       --ana-video-temperature-hue: 0deg;
       filter: none;
    */
    width: min(100%, 430px);
    margin-inline: auto;
    padding: 0;
    aspect-ratio: 540 / 620;
    overflow: hidden;
    border: 0;
    background: transparent;
    box-shadow: none !important;
    text-shadow: none;
    isolation: isolate;
    position: relative;
    --demo-bottom-overlay-start: 70%;
    --demo-video-mask-start: 78%;
  }
  .ap-demo-card.ap-video-demo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    box-shadow: none !important;
    background: linear-gradient(to bottom, rgba(251,251,250,0) var(--demo-bottom-overlay-start), var(--ap-bg) 100%);
  }
  .ap-demo-video {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
    background: transparent;
    box-shadow: none !important;
    filter: none;
    transform: none;
    transform-origin: center;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 var(--demo-video-mask-start), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 var(--demo-video-mask-start), transparent 100%);
  }

  .ap-carlos-codepen-stage {
    width: min(100%, 389px);
    min-height: clamp(316px, 32vw, 390px);
    height: clamp(316px, 32vw, 390px);
    display: grid;
    place-items: center;
    overflow: visible;
    background: transparent;
    aspect-ratio: auto;
  }
  @media (min-width: 980px) {
    #panel-detector .ap-carlos-codepen-stage {
      grid-column: 2;
      grid-row: 1 / span 2;
      align-self: center;
      justify-self: center;
      margin: 0;
      position: relative;
      z-index: 2;
    }
  }
  .ap-carlos-codepen {
    --size: 4.86px;
    --height: 80em;
    --pad: 1.25em;
    --border-radius: 6.666em;
    --gutter: calc(var(--pad) * 2);
    --button-width: 0.333em;
    --notch-height: 3.33em;
    --notch-width: 33.3%;
    --notch-radius: calc(var(--border-radius) - calc(var(--pad) * 2));
    --notch-duration: 0.333s;
    --ease: cubic-bezier(.666, 0, .4, 1);
    --ease-spring: cubic-bezier(.666, 0, .4, 1.2);
    --ease-out: cubic-bezier(.15, 0, .333, 1);
    --border-width: 0.4em;
    --deep-purple: 284;
    --c-h: var(--deep-purple);
    --c-s: 100%;
    --c-l: 50%;
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 3px;
    box-sizing: border-box;
    overflow: visible;
    font-family: Inter, sans-serif;
    font-size: var(--size);
  }
  .ap-carlos-codepen .phone-con {
    flex-basis: 100%;
    display: flex;
    justify-content: center;
  }
  .ap-carlos-codepen .phone {
    position: relative;
    z-index: 1;
    aspect-ratio: 37 / 76;
    background: #000;
    height: var(--height);
    border-radius: var(--border-radius);
    box-shadow: 0 0 0.1em 0.25em hsl(var(--c-h), 20%, 25%), 0 0 0 var(--border-width) hsl(var(--c-h), 30%, 85%);
    box-sizing: border-box;
    opacity: 0;
    transform: scale3d(1.1, 1.1, 1);
    animation: ap-carlos-codepen-appear 1s var(--ease-out) forwards;
    backface-visibility: hidden;
  }
  .ap-carlos-codepen .phone::before {
    content: "";
    position: absolute;
    top: var(--border-radius);
    right: calc(var(--border-width) * -1);
    bottom: var(--border-radius);
    left: calc(var(--border-width) * -1);
    border: 0.5em solid hsl(var(--c-h), 20%, 30%);
    border-left-width: 0;
    border-right-width: 0;
  }
  .ap-carlos-codepen .buttons {
    position: absolute;
    inset: calc(var(--border-width) * -1);
    pointer-events: none;
  }
  .ap-carlos-codepen .buttons .left,
  .ap-carlos-codepen .buttons .right {
    position: absolute;
    width: var(--button-width);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.5em;
  }
  .ap-carlos-codepen .buttons .left {
    right: 100%;
    top: calc(var(--border-radius) * 2);
  }
  .ap-carlos-codepen .buttons .left .button:nth-child(1) {
    height: 3em;
    margin-bottom: 0.5em;
  }
  .ap-carlos-codepen .buttons .right {
    left: 100%;
    transform: scale3d(-1, 1, 1);
    top: calc(var(--border-radius) * 3);
  }
  .ap-carlos-codepen .buttons .right .button {
    height: 9.5em;
  }
  .ap-carlos-codepen .button {
    background: hsl(var(--c-h), 20%, 95%);
    height: 6em;
    box-shadow: inset -0.15em 0 0.1em #000, inset 0 0 0.1em hsl(var(--c-h), 30%, 90%), inset 0 0.2em 0.1em hsl(var(--c-h), 30%, 90%), inset 0 -0.2em 0.1em hsl(var(--c-h), 30%, 90%), inset -0.1em 0.333em 0.1em rgba(0, 0, 0, 0.5), inset -0.1em -0.333em 0.1em rgba(0, 0, 0, 0.5);
    border-top-left-radius: 0.2em;
    border-bottom-left-radius: 0.2em;
  }
  .ap-carlos-codepen .screen-container {
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius);
    border: var(--pad) solid #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--pad) * 2);
    overflow: hidden;
  }
  .ap-carlos-codepen .screen-container::before {
    content: "";
    position: absolute;
    z-index: 5;
    background: #fff;
    width: 36.6%;
    bottom: calc(var(--pad) * 0.75);
    height: calc(var(--pad) * 0.5);
    border-radius: calc(var(--pad) * 0.25);
    filter: drop-shadow(0 0.1em 0.25em rgba(0, 0, 0, 0.1));
  }
  .ap-carlos-codepen .camera {
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--notch-height);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    pointer-events: none;
    position: absolute;
    z-index: 8;
    top: calc(var(--pad) * 2);
    right: calc(50% - calc(var(--notch-width) * 0.5));
    margin-right: calc(var(--pad) * 0.333);
  }
  .ap-carlos-codepen .camera::before {
    content: "";
    height: 33.3%;
    aspect-ratio: 1;
    border-radius: inherit;
    box-shadow:
      inset 0 0 0.13em rgba(255, 255, 255, 0.16),
      inset 0 0 0.42em rgba(3, 8, 30, 0.95),
      0 0 0.2em rgba(86, 113, 255, 0.42);
    background:
      radial-gradient(circle at 34% 30%, rgba(142, 161, 255, 0.95) 0 11%, transparent 12%),
      radial-gradient(circle at 48% 52%, #233a9f 0 22%, #08143a 56%, #02040d 100%);
  }
  .ap-carlos-codepen .notch-container {
    position: absolute;
    z-index: 7;
    top: var(--pad);
    right: var(--pad);
    left: var(--pad);
    display: flex;
    justify-content: center;
    height: 100%;
    max-height: calc(var(--notch-radius) * 2);
    pointer-events: none;
    outline: none;
    transition: var(--notch-duration) var(--ease);
    transition-property: max-height, max-width, filter, transform;
    will-change: max-width, max-height, filter;
  }
  .ap-carlos-codepen .notch-container.is-instant {
    transition-duration: 0ms;
  }
  .ap-carlos-codepen .notch-container.is-expanded {
    --shadow-opacity: 0.5;
    left: calc(var(--pad) * 0.35);
    right: calc(var(--pad) * 0.35);
    transition-timing-function: var(--ease-spring);
  }
  .ap-carlos-codepen .notch-container.is-expanded .content {
    --content-padding: 1.45em;
    --content-gap: 0.72em;
  }
  .ap-carlos-codepen .notch-container.is-expanded .content .text {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  .ap-carlos-codepen .notch-container.is-expanded .content .tile {
    opacity: 1;
    transform: scale(1);
  }
  .ap-carlos-codepen .notch-container.is-expanded .notch {
    max-width: 100%;
    max-height: 100%;
    transform: scale3d(1, 1, 1);
  }
  .ap-carlos-codepen .notch-container.is-expanded ~ .notch-blur {
    opacity: 1;
    max-height: calc(var(--notch-radius) * 3.333 + var(--pad));
  }
  .ap-carlos-codepen .notch {
    position: relative;
    border-radius: var(--notch-radius);
    pointer-events: none;
    overflow: hidden;
    color: #fff;
    display: flex;
    cursor: default;
    width: 100%;
    transition: inherit;
    transition-property: inherit;
    will-change: inherit;
    filter: drop-shadow(0 1em 2em hsl(0 0% 0% / var(--shadow-opacity, 0)));
    transform: scale3d(0.375, 0.4, 1);
    transform-origin: top;
  }
  .ap-carlos-codepen .notch::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #000;
    border-radius: inherit;
  }
  .ap-carlos-codepen .content {
    --content-padding: 1.55em;
    --duration-height: 0.5em;
    --content-gap: 1em;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: stretch;
    padding: var(--content-padding);
    gap: var(--content-gap);
    font-size: 146%;
    transition: var(--notch-duration) var(--ease-out);
    transition-property: padding;
    will-change: padding;
    position: relative;
  }
  .ap-carlos-codepen .content .left,
  .ap-carlos-codepen .content .right {
    height: 100%;
    max-height: calc(100% - var(--bar-height, 0%));
    display: flex;
    align-items: center;
    gap: 1em;
  }
  .ap-carlos-codepen .content .left {
    flex-grow: 2;
    min-width: 0;
    justify-content: flex-start;
  }
  .ap-carlos-codepen .content .right {
    display: none;
  }
  .ap-carlos-codepen .content .text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.2em;
    opacity: var(--bar-opacity, 0);
    transform: translate3d(-0.35em, 0, 0);
    transition: var(--notch-duration) var(--ease-out);
    transition-property: opacity, transform;
    font-family: Inter, sans-serif;
    line-height: 1.08;
    text-align: left;
    align-items: flex-start;
  }
  .ap-carlos-codepen .ap-carlos-notification-title {
    order: 1;
    color: #fff;
    font-size: 1.2em;
    font-weight: 780;
    letter-spacing: 0;
  }
  .ap-carlos-codepen .ap-carlos-notification-message {
    order: 2;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.1em;
    font-weight: 580;
    letter-spacing: 0;
    max-width: 21em;
    white-space: normal;
  }
  .ap-carlos-codepen .content .tile {
    background: #fff;
    height: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    position: relative;
    flex: 0 0 auto;
    opacity: 0;
    transform: scale(0.72);
    transition: var(--notch-duration) var(--ease-out);
    transition-property: opacity, transform;
    box-shadow: inset 0 0 0 0.08em rgba(255, 255, 255, 0.9), 0 0.18em 0.6em rgba(0, 0, 0, 0.28);
    overflow: hidden;
  }
  .ap-carlos-codepen .content .tile::before {
    content: "";
    position: absolute;
    inset: 18%;
    background: url("/home-teste-assets/assets/logos/logovector.svg") center / contain no-repeat;
  }
  .ap-carlos-codepen .notch-blur {
    position: absolute;
    z-index: 6;
    top: calc(var(--pad) - 3px);
    right: calc(var(--pad) - 3px);
    left: calc(var(--pad) - 3px);
    height: 100%;
    max-height: calc(var(--notch-radius) * 1.5);
    backdrop-filter: blur(0.2em);
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
    opacity: 0;
    border-radius: calc(var(--border-radius) - var(--pad));
    pointer-events: none;
    transition: var(--notch-duration) var(--ease);
    transition-property: max-height, max-width, opacity, transform;
    will-change: max-width, max-height;
  }
  .ap-carlos-codepen .screen {
    position: relative;
    z-index: 1;
    width: 100%;
    flex-grow: 1;
    overflow: hidden;
    border-radius: calc(var(--border-radius) - var(--pad));
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(7, minmax(0, 1fr));
    align-content: stretch;
    gap: 0.86em;
    padding: calc(var(--gutter) * 4.92) var(--gutter) var(--gutter);
    box-sizing: border-box;
    background: linear-gradient(180deg, #fbfcff 0%, #f3f7fa 56%, #edf3f6 100%);
  }
  .ap-carlos-codepen .screen::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 22%),
      linear-gradient(180deg, rgba(255,255,255,0) 58%, rgba(255,255,255,0.82) 86%, #fff 100%);
    z-index: 2;
  }
  .ap-carlos-codepen .ap-carlos-bento-card {
    --scale: 1.55;
    --duration: 0.82s;
    position: relative;
    z-index: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.5em;
    padding: 0.92em;
    border-radius: 1.55em;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(255,255,255,0.44), rgba(255,255,255,0.16) 58%, rgba(255,255,255,0.22));
    border: 0.1em solid rgba(255,255,255,0.34);
    box-shadow:
      0 1.1em 2.5em rgba(0,0,0,0.08),
      0 0 0 0.08em rgba(0,122,255,0.035),
      inset 0 0.1em 0 rgba(255,255,255,0.42),
      inset 0 0 1.1em rgba(255,255,255,0.05);
    backdrop-filter: blur(1.3em) saturate(124%);
    -webkit-backdrop-filter: blur(1.3em) saturate(124%);
    color: rgba(7,17,15,0.9);
    opacity: 0;
    transform: scale3d(var(--scale), var(--scale), 1);
  }
  .ap-tab-panel.active .ap-carlos-codepen .ap-carlos-bento-card {
    animation: ap-carlos-codepen-appear var(--duration) var(--ease-out) forwards;
  }
  .ap-carlos-codepen .ap-carlos-bento-card::before {
    content: none;
  }
  .ap-carlos-codepen .ap-carlos-bento-card:nth-child(1),
  .ap-carlos-codepen .ap-carlos-bento-card:nth-child(2),
  .ap-carlos-codepen .ap-carlos-bento-card:nth-child(6) {
    --scale: 1.76;
    --duration: 1s;
  }
  .ap-carlos-codepen .ap-carlos-bento-card:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    transform-origin: 125% 200%;
  }
  .ap-carlos-codepen .ap-carlos-bento-card:nth-child(2) {
    grid-column: 3 / 5;
    grid-row: 1 / 3;
    transform-origin: -25% 200%;
  }
  .ap-carlos-codepen .ap-carlos-bento-card:nth-child(3) {
    display: none;
    grid-column: 1 / 2;
    grid-row: 6 / 8;
    transform-origin: 175% 230%;
  }
  .ap-carlos-codepen .ap-carlos-bento-card:nth-child(4) {
    grid-column: 1 / 3;
    grid-row: 6 / 8;
    transform-origin: -25% 230%;
  }
  .ap-carlos-codepen .ap-carlos-bento-card:nth-child(5) {
    grid-column: 3 / 5;
    grid-row: 6 / 8;
    transform-origin: 50% 110%;
  }
  .ap-carlos-codepen .ap-carlos-bento-card:nth-child(6) {
    grid-column: 1 / 5;
    grid-row: 3 / 6;
    transform-origin: -125% 80%;
  }
  .ap-carlos-codepen .ap-carlos-bento-icon {
    width: auto;
    height: auto;
    display: inline-grid;
    place-items: center;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: rgba(0,92,210,0.92);
  }
  .ap-carlos-codepen .ap-carlos-bento-icon .ph {
    font-size: 1.68em;
    line-height: 1;
  }
  .ap-carlos-codepen .ap-carlos-bento-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8em;
  }
  .ap-carlos-codepen .ap-carlos-bento-value {
    display: block;
    font-family: var(--font-display);
    font-size: 2.08em;
    line-height: 0.94;
    letter-spacing: 0;
    color: rgba(7,17,15,0.92);
  }
  .ap-carlos-codepen .ap-carlos-bento-label {
    display: block;
    margin-top: 0.24em;
    font-size: 0.86em;
    line-height: 1.12;
    font-weight: 650;
    letter-spacing: 0;
    color: rgba(7,17,15,0.56);
  }
  .ap-carlos-codepen .ap-carlos-bento-chip {
    display: inline-flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
    padding: 0.34em 0.68em;
    border-radius: 999px;
    background: rgba(0,122,255,0.10);
    border: 0.08em solid rgba(0,122,255,0.12);
    color: rgba(0,92,210,0.92);
    font-family: Inter, system-ui, sans-serif;
    font-size: 0.78em;
    line-height: 1;
    font-weight: 730;
    white-space: nowrap;
  }
  .ap-carlos-codepen .ap-carlos-bento-mini {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.38em;
    align-items: end;
    height: 2.3em;
    margin-top: 0.2em;
  }
  .ap-carlos-codepen .ap-carlos-bento-mini i {
    display: block;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(0,122,255,0.72), rgba(0,122,255,0.22));
    min-height: 0.42em;
  }
  .ap-carlos-codepen .ap-carlos-bento-mini i:nth-child(1) { height: 44%; opacity: 0.48; }
  .ap-carlos-codepen .ap-carlos-bento-mini i:nth-child(2) { height: 66%; opacity: 0.58; }
  .ap-carlos-codepen .ap-carlos-bento-mini i:nth-child(3) { height: 52%; opacity: 0.50; }
  .ap-carlos-codepen .ap-carlos-bento-mini i:nth-child(4) { height: 88%; opacity: 0.70; }
  .ap-carlos-codepen .ap-carlos-bento-funnel {
    display: grid;
    gap: 0.42em;
    margin-top: 0.2em;
  }
  .ap-carlos-codepen .ap-carlos-bento-funnel span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
    padding: 0.44em 0.58em;
    border-radius: 0.95em;
    background: rgba(255,255,255,0.16);
    border: 0.08em solid rgba(255,255,255,0.18);
    color: rgba(7,17,15,0.62);
    font-family: Inter, system-ui, sans-serif;
    font-size: 0.78em;
    font-weight: 680;
  }
  .ap-carlos-codepen .ap-carlos-bento-funnel em,
  .ap-carlos-codepen .ap-carlos-bento-funnel strong {
    font-style: normal;
    color: inherit;
  }
  .ap-carlos-codepen .ap-carlos-bento-funnel strong {
    color: rgba(0,92,210,0.9);
    font-weight: 760;
  }
  .ap-carlos-codepen .ap-carlos-bento-bar {
    height: 0.58em;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(0,122,255,0.10);
  }
  .ap-carlos-codepen .ap-carlos-bento-bar span {
    display: block;
    height: 100%;
    width: var(--bar, 64%);
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(0,122,255,0.90), rgba(0,92,210,0.56));
  }
  .ap-carlos-codepen .ap-demo-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    background: #fff;
    filter: none;
    transform: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  @keyframes ap-carlos-codepen-appear {
    to {
      transform: scale3d(1, 1, 1);
      opacity: 1;
    }
  }
  @media (max-width: 700px) {
    .ap-carlos-codepen-stage {
      width: min(100vw, 430px);
      max-width: none;
      min-height: clamp(298px, 78vw, 332px);
      height: clamp(298px, 78vw, 332px);
      margin: 22px 0 clamp(-96px, -22vw, -70px);
      position: relative;
      left: 50%;
      transform: translateX(calc(-50% - 6px));
      place-items: start center;
      overflow: visible;
    }
    .ap-carlos-codepen {
      --size: clamp(6.45px, 1.82vw, 7.45px);
      padding-top: 0;
    }
    .ap-carlos-codepen .screen {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: 10.2em 16.8em;
      align-content: start;
      gap: 1.15em;
      padding-top: calc(var(--gutter) * 5.12);
    }
    .ap-carlos-codepen .screen::after {
      background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 22%);
    }
    .ap-carlos-codepen .ap-carlos-bento-card {
      border-radius: 1.5em;
      gap: 0.58em;
      padding: 1em;
    }
    .ap-carlos-codepen .ap-carlos-bento-card:nth-child(1) {
      grid-column: 1 / 3;
      grid-row: 1 / 2;
    }
    .ap-carlos-codepen .ap-carlos-bento-card:nth-child(2) {
      grid-column: 3 / 5;
      grid-row: 1 / 2;
    }
    .ap-carlos-codepen .ap-carlos-bento-card:nth-child(6) {
      display: flex;
      grid-column: 1 / 5;
      grid-row: 2 / 3;
      padding: 1.15em 1.08em 1.02em;
    }
    .ap-carlos-codepen .ap-carlos-bento-card:nth-child(3),
    .ap-carlos-codepen .ap-carlos-bento-card:nth-child(4),
    .ap-carlos-codepen .ap-carlos-bento-card:nth-child(5) {
      display: none;
    }
    .ap-carlos-codepen .ap-carlos-bento-mini {
      display: grid;
      height: 2.05em;
      margin-top: 0.12em;
    }
    .ap-carlos-codepen .ap-carlos-bento-funnel {
      gap: 0.28em;
      margin-top: 0.16em;
    }
    .ap-carlos-codepen .ap-carlos-bento-funnel span {
      padding: 0.3em 0.48em;
      border-radius: 0.78em;
      font-size: 0.66em;
    }
    .ap-carlos-codepen .ap-carlos-bento-chip {
      padding: 0.28em 0.54em;
      font-size: 0.72em;
    }
    .ap-carlos-codepen .ap-carlos-bento-value {
      font-size: 2.04em;
    }
    .ap-carlos-codepen .ap-carlos-bento-label {
      margin-top: 0.16em;
      font-size: 0.82em;
      line-height: 1.08;
    }
    .ap-carlos-codepen .ap-carlos-bento-icon .ph {
      font-size: 1.48em;
    }
  }
  .ap-agenda-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 4px 18px;
    border-bottom: 1px solid var(--ap-line);
    margin-bottom: 18px;
  }
  .ap-agenda-head strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--ap-ink);
    letter-spacing: -0.005em;
  }
  .ap-agenda-head em {
    font-style: normal;
    font-size: 12px;
    color: var(--ap-ink-3);
    font-feature-settings: "tnum";
  }
  .ap-slot {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 8px;
    border-radius: 12px;
    transition: background 200ms;
  }
  .ap-slot:hover { background: var(--ap-bg-2); }
  .ap-slot .time {
    font-size: 13px;
    color: var(--ap-ink-2);
    font-feature-settings: "tnum";
    letter-spacing: -0.005em;
    font-weight: 500;
  }
  .ap-slot .body strong {
    display: block;
    font-size: 14px;
    color: var(--ap-ink);
    letter-spacing: -0.005em;
    line-height: 1.3;
  }
  .ap-slot .body span {
    display: block;
    font-size: 12px;
    color: var(--ap-ink-3);
    margin-top: 2px;
  }
  .ap-slot .tag {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--ap-bg-2);
    color: var(--ap-ink-2);
  }
  .ap-slot .tag.ok { background: rgba(52, 199, 89, 0.12); color: #1c8a4a; }
  .ap-slot .tag.new { background: rgba(37, 99, 255, 0.10); color: #1e54e8; }
  .ap-slot.ghost { opacity: 0.5; }

  /* Conversa demo */
  .ap-chat {
    background: #ece5dd;
    border-radius: 18px;
    padding: 18px 14px;
    display: flex; flex-direction: column; gap: 8px;
    background-image:
      radial-gradient(rgba(255,255,255,0.45) 1px, transparent 1px);
    background-size: 18px 18px;
  }

  /* Detector demo */
  .ap-alert-row {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 16px;
    border: 1px solid var(--ap-line);
    border-radius: 16px;
    background: white;
    transition: border-color 240ms;
  }
  .ap-alert-row + .ap-alert-row { margin-top: 10px; }
  .ap-alert-row .ic {
    width: 36px; height: 36px;
    border-radius: 999px;
    background: rgba(255, 149, 0, 0.10);
    color: #e07c00;
    display: grid; place-items: center;
    font-size: 17px;
    flex-shrink: 0;
  }
  .ap-alert-row.priority .ic { background: rgba(210, 82, 107, 0.12); color: #c44359; }
  .ap-alert-row .copy strong {
    display: block;
    font-size: 13.5px;
    color: var(--ap-ink);
    letter-spacing: -0.005em;
    line-height: 1.35;
    margin-bottom: 2px;
  }
  .ap-alert-row .copy span {
    font-size: 12.5px;
    color: var(--ap-ink-2);
    line-height: 1.45;
    letter-spacing: -0.005em;
  }
  .ap-alert-row .when {
    font-size: 11px;
    color: var(--ap-ink-3);
    font-feature-settings: "tnum";
    margin-left: auto;
    flex-shrink: 0;
    align-self: center;
  }

  /* ── SECTION 3: número (impacto silencioso) ─────── */
  .ap-impact {
    text-align: center;
    padding: clamp(120px, 16vw, 200px) 0;
  }
  .ap-impact .num {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(96px, 16vw, 200px);
    letter-spacing: -0.055em;
    line-height: 0.92;
    color: var(--ap-ink);
    font-feature-settings: "tnum";
    margin: 0;
  }
  .ap-impact .num em {
    font-style: normal;
    color: var(--ap-ink-3);
    font-size: 0.42em;
    letter-spacing: -0.02em;
    margin-left: 0.05em;
    vertical-align: 0.18em;
  }
  .ap-impact .lead {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(22px, 2.6vw, 32px);
    letter-spacing: -0.025em;
    line-height: 1.18;
    color: var(--ap-ink);
    max-width: 22ch;
    margin: 32px auto 0;
    text-wrap: balance;
  }
  .ap-impact .source {
    font-size: 13px;
    color: var(--ap-ink-3);
    margin-top: 24px;
    letter-spacing: -0.005em;
  }

  /* ── SECTION 4: humanização (compare antes/depois) ─ */
  .ap-compare-stage {
    margin-top: clamp(48px, 6vw, 72px);
    display: grid; gap: 16px;
  }
  @media (min-width: 800px) { .ap-compare-stage { grid-template-columns: 1fr 1fr; } }
  .ap-compare-card {
    background: white;
    border: 1px solid var(--ap-line);
    border-radius: 22px;
    padding: 24px;
    display: flex; flex-direction: column;
    min-height: 380px;
  }
  .ap-compare-card.bad { background: #faf6f3; }
  .ap-compare-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ap-ink-3);
    margin-bottom: 18px;
  }
  .ap-compare-card.bad .ap-compare-label { color: #c44359; }
  .ap-compare-card.good .ap-compare-label { color: #1c8a4a; }
  .ap-meta-bottom {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--ap-line);
    font-size: 12.5px;
    color: var(--ap-ink-3);
    letter-spacing: -0.005em;
    line-height: 1.45;
  }

  /* ── HUMANIZAÇÃO DARK ──────────────────────────── */
  .ap-section-hum {
    position: relative;
    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,0.46) 0%,
        rgba(0,0,0,0.46) 34%,
        rgba(0,0,0,0.74) 68%,
        rgba(0,0,0,1) 100%
      ),
      url('/home-teste-assets/mpowafkr-teste2.webp') center / cover no-repeat,
      #02040b;
    overflow: hidden;
    isolation: isolate;
  }
  .hum-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    display: flex;
    justify-content: center;
  }

  .hum-head {
    position: relative;
    width: min(100%, 880px);
    max-width: 880px;
    margin: 0 auto;
    padding: clamp(34px, 5vw, 62px) clamp(24px, 5vw, 70px);
    overflow: visible;
    border-radius: clamp(22px, 3.2vw, 34px);
    display: grid;
    gap: clamp(22px, 3vw, 34px);
    align-items: stretch;
    grid-template-columns: minmax(180px, 0.9fr) minmax(0, 1.1fr);
    background:
      linear-gradient(145deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05) 54%, rgba(255,255,255,0.08)),
      rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow:
      0 18px 56px rgba(0,0,0,0.10),
      inset 0 1px 0 rgba(255,255,255,0.34),
      inset 0 -1px 0 rgba(255,255,255,0.06),
      inset 0 0 16px 3px rgba(255,255,255,0.08);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    text-align: left;
  }
  .hum-head::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.86), transparent);
  }
  .hum-head > * {
    position: relative;
    z-index: 1;
  }
  .hum-media {
    position: relative;
    min-width: 0;
    min-height: 320px;
    border-radius: clamp(18px, 2.4vw, 28px);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
    align-self: stretch;
    isolation: isolate;
  }
  .hum-media img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
  }
  .hum-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
  }
  .hum-head .ap-h2 {
    color: #fff;
    margin: 0 0 22px;
    max-width: 16ch;
    text-shadow: 0 10px 32px rgba(0,0,0,0.26);
  }
  .hum-head .ap-h2 em { color: rgba(255,255,255,0.36); }
  .hum-head .ap-sub {
    color: rgba(255,255,255,0.84);
    margin: 0;
    max-width: 48ch;
    text-align: left;
    text-shadow: 0 8px 24px rgba(0,0,0,0.24);
  }
  .hum-learn {
    display: inline-flex;
    align-items: center;
    gap: 0;
    width: fit-content;
    margin-top: 26px;
    color: #fff;
    font-size: 15px;
    font-weight: 430;
    letter-spacing: -0.006em;
    padding-bottom: 3px;
    border-bottom: 1px solid currentColor;
    text-decoration: none;
    transition: opacity 200ms var(--ease-out);
  }
  .hum-learn:hover { opacity: 0.72; }
  .hum-learn .ph {
    font-size: 14px;
    transition: transform 220ms var(--ease-out);
  }
  .hum-learn:hover .ph { transform: translate(2px, -2px); }
  .hum-proof {
    grid-column: 1 / -1;
    min-width: 0;
    position: relative;
    overflow: hidden;
    scroll-margin-top: 96px;
    margin-top: clamp(2px, 1.2vw, 10px);
    padding-top: clamp(18px, 2.4vw, 26px);
    padding-bottom: clamp(14px, 2vw, 22px);
    border-top: 1px solid rgba(255,255,255,0.14);
  }
  .hum-proof-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 20px;
  }
  .hum-proof-title {
    margin: 0;
    max-width: 44ch;
    color: rgba(255,255,255,0.86);
    font-size: 15px;
    font-weight: 430;
    line-height: 1.35;
    letter-spacing: -0.006em;
    text-align: center;
  }
  .hum-proof-controls {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
  }
  .hum-proof-btn {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.08);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 200ms var(--ease-out), transform 200ms var(--ease-out);
  }
  .hum-proof-btn:hover {
    background: rgba(255,255,255,0.16);
    transform: translateY(-1px);
  }
  .hum-proof-rail {
    --hum-proof-fade: clamp(26px, 4.5vw, 72px);
    overflow-x: hidden;
    overflow-y: hidden;
    height: var(--hum-proof-active-height, auto);
    margin: 0 0 calc(clamp(8px, 1vw, 12px) * -1);
    padding: 2px 0 clamp(8px, 1vw, 12px);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--hum-proof-fade), #000 calc(100% - var(--hum-proof-fade)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--hum-proof-fade), #000 calc(100% - var(--hum-proof-fade)), transparent 100%);
    scroll-snap-type: none;
    scrollbar-width: none;
    scroll-behavior: smooth;
    overscroll-behavior-inline: contain;
    user-select: none;
    transition: height 240ms var(--ease-out);
  }
  .hum-proof-rail::-webkit-scrollbar { display: none; }
  .hum-proof-track {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    width: max-content;
  }
  .hum-mini-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    flex: 0 0 clamp(278px, 35.9vw, 389px);
    align-self: flex-start;
    padding: 13px;
    border-radius: 18px;
    overflow: hidden;
    scroll-snap-align: start;
    background:
      linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.075) 54%, rgba(255,255,255,0.105)),
      rgba(255,255,255,0.09);
    border: 1px solid rgba(255,255,255,0.20);
    box-shadow:
      0 18px 44px rgba(0,0,0,0.12),
      inset 0 1px 0 rgba(255,255,255,0.34),
      inset 0 -1px 0 rgba(255,255,255,0.06),
      inset 0 0 14px 2px rgba(255,255,255,0.08);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    color: #07110f;
  }
  .hum-mini-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(circle at 18% 24%, rgba(220,248,198,0.07), transparent 26%),
      radial-gradient(circle at 82% 16%, rgba(255,255,255,0.035), transparent 23%),
      linear-gradient(180deg, rgba(255,255,255,0.012), transparent 58%);
    opacity: 0.28;
  }
  .hum-mini-kicker {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    color: rgba(255,255,255,0.72);
    font-size: 11.5px;
    font-weight: 650;
    letter-spacing: 0.075em;
    text-transform: uppercase;
  }
  .hum-mini-kicker .ph { font-size: 16px; color: rgba(255,255,255,0.66); }
  .hum-proof-caption {
    width: min(100%, 50ch);
    min-height: calc(1.46em * 2);
    margin: 24px 0 0;
    color: rgba(255,255,255,0.68);
    font-size: 16px;
    line-height: 1.46;
    text-align: left;
    transition:
      opacity 180ms var(--ease-out),
      transform 180ms var(--ease-out);
  }
  .hum-proof-caption.is-changing {
    opacity: 0;
    transform: translateY(4px);
  }
  .hum-phone {
    position: relative;
    isolation: isolate;
    z-index: 1;
    flex: 0 0 auto;
    min-height: 0;
    padding: 11px 10px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    justify-content: flex-start;
    overflow: hidden;
    background:
      linear-gradient(135deg, rgba(236,229,221,0.07), rgba(236,229,221,0.025)),
      rgba(10,18,17,0.40);
    border: 1px solid rgba(255,255,255,0.11);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.16),
      inset 0 -18px 34px rgba(0,0,0,0.12);
  }
  .hum-phone::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(rgba(255,255,255,0.052) 1px, transparent 1px),
      radial-gradient(rgba(0,0,0,0.08) 1px, transparent 1px);
    background-size: 15px 15px, 23px 23px;
    background-position: 0 0, 8px 8px;
    opacity: 0.12;
  }
  .hum-phone > * {
    position: relative;
    z-index: 1;
  }
  .hum-bubble {
    position: relative;
    width: fit-content;
    max-width: 86%;
    min-width: 34px;
    padding: 8px 10px 6px;
    border-radius: 13px 13px 13px 4px;
    align-self: flex-start;
    background:
      linear-gradient(145deg, rgba(250,252,249,0.96), rgba(231,237,232,0.90)),
      rgba(246,249,246,0.94);
    border: 1px solid rgba(255,255,255,0.52);
    color: #07110f;
    font-size: 11px;
    font-weight: 590;
    line-height: 1.24;
    letter-spacing: -0.004em;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.36),
      0 5px 16px rgba(0,0,0,0.13);
  }
  .hum-bubble.ai {
    align-self: flex-start;
    border-radius: 13px 13px 13px 4px;
  }
  .hum-bubble.user {
    align-self: flex-end;
    border-radius: 13px 13px 4px 13px;
    background:
      linear-gradient(145deg, rgba(220,248,198,0.96), rgba(194,231,176,0.90)),
      rgba(220,248,198,0.94);
    border-color: rgba(220,248,198,0.58);
    color: #04170e;
  }
  .hum-bubble.compact {
    max-width: 74%;
  }
  .hum-bubble.react {
    display: inline-grid;
    place-items: center;
    align-self: auto;
    position: absolute;
    right: -7px;
    bottom: -10px;
    z-index: 2;
    margin: 0;
    min-width: 26px;
    width: 26px;
    height: 22px;
    padding: 0;
    border-radius: 999px;
    background:
      linear-gradient(145deg, rgba(255,255,255,0.98), rgba(238,241,238,0.94)),
      rgba(255,255,255,0.96);
    border: 1px solid rgba(255,255,255,0.74);
    font-size: 16px;
    line-height: 1;
    box-shadow: 0 5px 13px rgba(0,0,0,0.14);
    transform-origin: 80% 80%;
  }
  .hum-react-wrap {
    position: relative;
    align-self: flex-end;
    max-width: 86%;
    padding-bottom: 9px;
  }
  .hum-react-wrap .hum-bubble.user {
    max-width: 100%;
  }
  .hum-mini-card.is-selected .hum-bubble.react {
    animation: hum-reaction-pop 420ms cubic-bezier(0.23, 1, 0.32, 1) both;
  }
  .hum-duration {
    color: #111814;
    font-size: 9px;
    font-feature-settings: "tnum";
    line-height: 1;
    white-space: nowrap;
  }
  .hum-reply {
    display: block;
    margin: 0 0 6px;
    padding: 5px 7px;
    border-left: 2px solid rgba(20,114,69,0.34);
    border-radius: 8px;
    background: rgba(20,114,69,0.10);
    color: #07110f;
    font-size: 10px;
    line-height: 1.15;
  }
  .hum-dots {
    display: inline-flex;
    gap: 3px;
    align-items: center;
    padding: 10px 12px;
  }
  .hum-dots i {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: rgba(20,42,34,0.58);
    animation: hum-dot 1.2s ease-in-out infinite;
  }
  .hum-dots i:nth-child(2) { animation-delay: 0.16s; }
  .hum-dots i:nth-child(3) { animation-delay: 0.32s; }
  .hum-media-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    width: min(100%, 158px);
  }
  .hum-media-grid.single {
    grid-template-columns: 1fr;
    width: min(100%, 166px);
  }
  .hum-media-note {
    display: block;
    margin-top: 7px;
  }
  .hum-thumb {
    min-height: 58px;
    border-radius: 11px;
    background:
      linear-gradient(135deg, rgba(220,248,198,0.42), rgba(255,255,255,0.12)),
      radial-gradient(circle at 48% 30%, rgba(255,255,255,0.36), transparent 26%),
      rgba(24,58,45,0.30);
    display: grid;
    place-items: center;
    color: rgba(255,255,255,0.86);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    overflow: hidden;
  }
  .hum-thumb.photo {
    min-height: 96px;
    background: rgba(24,58,45,0.18);
  }
  .hum-thumb.photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
  .hum-bubble.media {
    overflow: hidden;
    padding: 5px;
  }
  .hum-bubble.media .hum-thumb.photo {
    width: 148px;
    min-height: 108px;
  }
  .hum-bubble.media .hum-thumb.photo img {
    border-radius: 9px;
  }
  .hum-bubble.media.wide .hum-thumb.photo {
    width: 172px;
    min-height: 0;
    aspect-ratio: 717 / 611;
  }
  .hum-bubble.media.wide .hum-thumb.photo img {
    object-fit: contain;
  }
  .hum-phone-audio {
    gap: 5px;
    padding-block: 9px;
  }
  .hum-phone-audio .hum-audio-row {
    padding: 7px 9px;
  }
  .hum-phone-audio .hum-bubble.ai {
    max-width: 94%;
    padding: 7px 9px 6px;
    font-size: 10.5px;
    line-height: 1.18;
  }
  .hum-audio-row,
  .hum-pause-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 9px;
    border-radius: 13px;
    background:
      linear-gradient(145deg, rgba(250,252,249,0.96), rgba(231,237,232,0.90)),
      rgba(246,249,246,0.94);
    border: 1px solid rgba(255,255,255,0.52);
    color: #07110f;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.40), 0 5px 16px rgba(0,0,0,0.13);
  }
  .hum-audio-row {
    width: min(100%, 176px);
    align-self: flex-start;
  }
  .hum-audio-row.user {
    align-self: flex-end;
    background:
      linear-gradient(145deg, rgba(220,248,198,0.96), rgba(194,231,176,0.90)),
      rgba(220,248,198,0.94);
    border-color: rgba(220,248,198,0.58);
    color: #04170e;
  }
  .hum-pause-row span:first-child {
    flex: 1;
    min-width: 0;
    color: #07110f;
    font-size: 11px;
    line-height: 1.2;
  }
  .hum-wave {
    flex: 1;
    height: 24px;
    background: repeating-linear-gradient(90deg, rgba(20,114,69,0.58) 0 3px, transparent 3px 8px);
    mask-image: linear-gradient(180deg, transparent 8%, #000 42%, #000 58%, transparent 92%);
  }
  .hum-toggle {
    width: 38px;
    height: 22px;
    padding: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, #1b8df0 0%, #1478d4 100%);
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.42) inset,
      0 8px 18px -10px rgba(20,120,212,0.72);
    display: flex;
    justify-content: flex-end;
  }
  .hum-toggle::before {
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(10,10,11,0.18);
  }
  @keyframes hum-dot {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.45; }
    40% { transform: translateY(-3px); opacity: 1; }
  }
  @keyframes hum-reaction-pop {
    0% { opacity: 0; transform: translateY(4px) scale(0.84); }
    58% { opacity: 1; transform: translateY(-1px) scale(1.08); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hum-dots i,
    .hum-mini-card.is-selected .hum-bubble.react {
      animation: none;
    }
  }
  @media (max-width: 900px) {
    .hum-head {
      grid-template-columns: 1fr;
      width: 100%;
    }
    .hum-media {
      min-height: 260px;
      order: -1;
    }
    .hum-proof {
      display: flex;
      flex-direction: column;
    }
    .hum-proof-head {
      display: contents;
    }
    .hum-proof-rail {
      order: 2;
      margin-inline: 0;
      padding: 2px 0 8px;
      overflow-x: hidden;
      scroll-padding-inline: 0;
      scroll-snap-type: none;
      touch-action: pan-y;
      overscroll-behavior-inline: contain;
      -webkit-overflow-scrolling: touch;
      -webkit-mask-image: linear-gradient(90deg, #000 0, #000 74%, transparent 100%);
      mask-image: linear-gradient(90deg, #000 0, #000 74%, transparent 100%);
      cursor: default;
    }
    .hum-proof-track {
      gap: 12px;
      width: max-content;
      padding-right: calc(100vw - min(74.8vw, 224px) - 44px);
    }
    .hum-proof-title {
      order: 1;
      margin-bottom: 20px;
      max-width: 30ch;
      text-align: left;
    }
    .hum-proof-controls {
      position: static;
      transform: none;
      order: 4;
      align-self: center;
      margin-top: 19px;
    }
    .hum-proof-caption {
      order: 3;
      width: min(100%, 30ch);
      min-height: 0;
      margin-top: 22px;
      margin-right: 0;
      margin-left: 0;
      font-size: 15.5px;
    }
    .hum-mini-card {
      flex-basis: min(76.5vw, 258px);
      padding: 13px;
      scroll-snap-align: start;
      scroll-snap-stop: always;
    }
  }

  /* Badge — texto circular em SVG, centro travado */
  .hum-badge {
    position: absolute;
    top: clamp(-62px, -3.8vw, -44px);
    right: clamp(-76px, -4.6vw, -54px);
    width: clamp(132px, 8.8vw, 156px);
    aspect-ratio: 1;
    z-index: 2;
    display: grid;
    place-items: center;
    pointer-events: none;
  }
  .hum-badge-logo {
    position: absolute;
    inset: 50% auto auto 50%;
    z-index: 2;
    width: 46%;
    height: 46%;
    display: block;
    transform: translate(-50%, -50%);
    filter: invert(1);
  }
  .hum-badge-svg {
    width: 100%;
    height: 100%;
    display: block;
    animation: hum-orbit 24s linear infinite;
    overflow: visible;
    transform-origin: center;
    transform-box: fill-box;
  }
  .hum-badge-text {
    color: rgba(255,255,255,0.96);
    fill: currentColor;
    font-family: Agrandir, Inter, sans-serif;
    font-size: 15.5px;
    font-weight: 380;
    font-stretch: normal;
    font-variation-settings: "wght" 380, "wdth" 100;
    letter-spacing: 0.038em;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
    dominant-baseline: middle;
    text-transform: none;
  }
  @keyframes hum-orbit {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hum-badge-svg { animation-duration: 200s; }
  }
  @media (max-width: 880px) {
    .hum-badge {
      top: clamp(206px, 50vw, 282px);
      right: -24px;
      width: 136px;
    }
  }

  /* ── Fila de pacientes / Queue flow visualization ────────── */
  .ap-queue-flow {
    --queue-connector-height: 52px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-top: 28px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 380px;
  }

  /* Stack de mensagens — uma substitui a outra de cima pra baixo */
  .ap-queue-stack {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 90px;
    z-index: 1;
  }
  .ap-queue-card {
    position: absolute;
    box-sizing: border-box;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    text-align: left;
    isolation: isolate;
    background:
      linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.075) 54%, rgba(255,255,255,0.105)),
      rgba(255,255,255,0.09);
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 18px;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
      0 18px 44px rgba(0,0,0,0.12),
      inset 0 1px 0 rgba(255,255,255,0.34),
      inset 0 -1px 0 rgba(255,255,255,0.06),
      inset 0 0 14px 2px rgba(255,255,255,0.08);
    opacity: 0;
    transform: translateY(-16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
    z-index: 0;
  }
  .ap-queue-card.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    z-index: 2;
  }
  .ap-queue-card::before,
  .ap-queue-card::after {
    content: "";
    position: absolute;
    left: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 260ms var(--ease-out);
  }
  .ap-queue-card::after {
    top: calc(100% - 1px);
    width: 4.6px;
    height: calc(var(--queue-connector-height) + 24px);
    border-radius: 999px;
    transform: translateX(-50%);
    background:
      linear-gradient(
        180deg,
        rgba(0,122,255,0.34) 0%,
        rgba(255,255,255,0.28) 25%,
        rgba(0,122,255,0.38) 54%,
        rgba(255,255,255,0.20) 78%,
        rgba(0,122,255,0.28) 100%
      );
    box-shadow:
      0 0 6px rgba(255,255,255,0.16),
      0 0 15px rgba(0,122,255,0.23),
      inset 0 0 3px rgba(255,255,255,0.30);
    backdrop-filter: blur(4px) saturate(150%);
    -webkit-backdrop-filter: blur(4px) saturate(150%);
  }
  .ap-queue-card::before {
    top: calc(100% - 1px);
    width: 6px;
    height: 26px;
    border-radius: 999px;
    transform: translateX(-50%);
    background:
      linear-gradient(
        180deg,
        transparent 0%,
        rgba(0,122,255,0.26) 18%,
        rgba(255,255,255,0.86) 48%,
        rgba(0,122,255,0.58) 72%,
        transparent 100%
      );
    filter: blur(0.15px);
    box-shadow:
      0 0 9px rgba(255,255,255,0.22),
      0 0 18px rgba(0,122,255,0.32);
    mix-blend-mode: screen;
  }
  .ap-queue-card.is-active::before,
  .ap-queue-card.is-active::after {
    opacity: 1;
  }
  .ap-queue-card.is-active::before {
    animation: ap-queue-line-rim 3s cubic-bezier(0.23, 1, 0.32, 1) infinite;
  }
  @keyframes ap-queue-line-rim {
    0% {
      top: calc(100% - 1px);
      opacity: 0;
    }
    8% { opacity: 1; }
    62% {
      top: calc(100% + var(--queue-connector-height) + 12px);
      opacity: 1;
    }
    74% { opacity: 0; }
    100% {
      top: calc(100% + var(--queue-connector-height) + 12px);
      opacity: 0;
    }
  }
  .ap-queue-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid rgba(0,0,0,0.06);
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  }
  .ap-queue-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .ap-queue-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    flex: 1;
    min-width: 0;
    text-align: left;
  }
  .ap-queue-name {
    font-family: Inter, system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: rgba(7,17,15,0.90);
  }
  .ap-queue-msg {
    font-family: Inter, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: rgba(7,17,15,0.62);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ap-queue-badge {
    box-sizing: border-box;
    padding: 5px 11px;
    border-radius: 999px;
    background:
      linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.07)),
      rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.32);
    box-shadow:
      0 4px 12px rgba(0,0,0,0.06),
      inset 0 1px 0 rgba(255,255,255,0.34),
      inset 0 -1px 0 rgba(0,0,0,0.04);
    backdrop-filter: blur(12px) saturate(135%);
    -webkit-backdrop-filter: blur(12px) saturate(135%);
    font-size: 11px;
    font-weight: 560;
    text-transform: none;
    letter-spacing: 0.005em;
    flex-shrink: 0;
  }
  .ap-queue-badge.is-lead {
    color: rgba(7,17,15,0.64);
  }
  .ap-queue-badge.is-paciente {
    color: rgba(7,17,15,0.64);
  }

  /* Espaçador do conector; a linha nasce do card ativo para acompanhar a troca. */
  .ap-queue-connector {
    position: relative;
    width: 3px;
    height: var(--queue-connector-height);
    background: transparent;
    pointer-events: none;
  }

  /* Card de resposta Thais */
  .ap-queue-response {
    position: relative;
    z-index: 3;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 24px 22px 18px;
    text-align: left;
    background:
      linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.075) 54%, rgba(255,255,255,0.105)),
      rgba(255,255,255,0.09);
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 20px;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
      0 18px 44px rgba(0,0,0,0.12),
      inset 0 1px 0 rgba(255,255,255,0.34),
      inset 0 -1px 0 rgba(255,255,255,0.06),
      inset 0 0 14px 2px rgba(255,255,255,0.08);
    animation: ap-response-pop 0.6s ease-out both;
    animation-delay: 0.3s;
    transform-origin: center top;
  }
  .ap-queue-response::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18px;
    right: 18px;
    height: 2px;
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(0,122,255,0.36) 15%,
        rgba(255,255,255,0.92) 48%,
        rgba(0,122,255,0.54) 72%,
        transparent 100%
      );
    box-shadow:
      0 0 9px rgba(255,255,255,0.24),
      0 0 18px rgba(0,122,255,0.34),
      0 1px 12px rgba(0,122,255,0.20);
    mix-blend-mode: screen;
    transform: scaleX(0.42);
    transform-origin: center;
  }
  .ap-queue-response.is-answering::before {
    animation: ap-queue-response-rim 2s cubic-bezier(0.23, 1, 0.32, 1) both;
  }
  @keyframes ap-queue-response-rim {
    0% { opacity: 0; transform: scaleX(0.34); }
    12% { opacity: 1; }
    58% { opacity: 0.92; transform: scaleX(1); }
    100% { opacity: 0; transform: scaleX(1); }
  }
  @keyframes ap-response-pop {
    0% { opacity: 0; transform: scale(0.94) translateY(-10px); }
    70% { transform: scale(1.01) translateY(0); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
  }
  .ap-queue-thais-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 0;
    box-shadow: 0 8px 18px rgba(0,0,0,0.16);
    overflow: hidden;
    flex-shrink: 0;
  }
  .ap-queue-thais-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .ap-queue-response-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
  }
  .ap-queue-response-name {
    font-family: Inter, system-ui, sans-serif;
    font-size: 16px;
    font-weight: 650;
    color: rgba(7,17,15,0.90);
  }
  .ap-queue-response-msg {
    display: block;
    width: 100%;
    font-family: Inter, system-ui, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: rgba(7,17,15,0.62);
    min-height: 36px;
    line-height: 1.28;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }
  .ap-queue-response-typing {
    align-self: flex-start;
    padding: 7px 11px;
    background: rgba(255,255,255,0.42);
    border: 1px solid rgba(255,255,255,0.24);
    box-shadow:
      0 8px 18px rgba(0,0,0,0.06),
      inset 0 1px 0 rgba(255,255,255,0.38);
    backdrop-filter: blur(10px) saturate(135%);
    -webkit-backdrop-filter: blur(10px) saturate(135%);
  }
  .ap-queue-response-text {
    display: inline;
  }
  .ap-queue-response.is-typing .ap-queue-response-text {
    display: none;
  }
  .ap-queue-response:not(.is-typing) .ap-queue-response-typing {
    display: none;
  }
  .ap-queue-response-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
  }
  .ap-queue-response-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #25d366;
    animation: ap-status-blink 1.5s ease-in-out infinite;
  }
  @keyframes ap-status-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }
  .ap-queue-response-label {
    font-family: Inter, system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #25d366;
  }

  /* Responsivo */
  @media (max-width: 600px) {
    .ap-queue-flow {
      --queue-connector-height: 42px;
      width: min(100%, calc(100vw - 44px));
      max-width: calc(100vw - 44px);
      margin-top: 20px;
    }
    .ap-queue-stack { height: 82px; }
    .ap-queue-card { padding: 14px 22px 14px 16px; gap: 12px; border-radius: 16px; }
    .ap-queue-avatar { width: 38px; height: 38px; }
    .ap-queue-name { font-size: 14px; }
    .ap-queue-msg { font-size: 12px; }
    .ap-queue-badge { font-size: 10px; padding: 4px 9px; transform: none; }
    .ap-queue-response { padding: 20px 18px 16px; gap: 12px; border-radius: 18px; }
    .ap-queue-thais-avatar { width: 46px; height: 46px; }
    .ap-queue-response-name { font-size: 15px; }
    .ap-queue-response-msg { max-width: none; font-size: 13px; }
  }

  /* ── Melissa: agenda + CRM glass story ────────── */
  .ap-melissa-card {
    --melissa-cycle: 8s;
    --melissa-crm-offset: 46px;
    --melissa-crm-enter-offset: 82px;

    --melissa-crm-lanes-bg: 0.006;
    --melissa-crm-lane-bg: 0.010;
    --melissa-crm-lead-bg-top: 0.105;
    --melissa-crm-lead-bg-bottom: 0.032;
    --melissa-crm-lead-bg-base: 0.030;

    display: block;
    min-height: 356px;
    aspect-ratio: auto;
    padding: 16px;
    overflow: visible;
    text-align: left;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .ap-melissa-card::before,
  .ap-melissa-card::after {
    content: none;
  }
  .ap-melissa-calendar,
  .ap-melissa-kanban {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
  }
  .ap-melissa-calendar {
    border: 1px solid rgba(255,255,255,0.22);
    background:
      linear-gradient(145deg, rgba(255,255,255,0.17), rgba(255,255,255,0.078) 56%, rgba(255,255,255,0.12)),
      rgba(255,255,255,0.10);
    box-shadow:
      0 18px 44px rgba(0,0,0,0.13),
      inset 0 1px 0 rgba(255,255,255,0.36),
      inset 0 -1px 0 rgba(255,255,255,0.07),
      inset 0 0 16px rgba(255,255,255,0.08);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    width: 72%;
    min-height: 238px;
    padding: 16px;
    border-radius: 22px;
    opacity: 0.78;
    transform: rotate(-2deg) translateX(-16px);
  }
  .ap-tab-panel.active .ap-melissa-calendar {
    animation: ap-melissa-calendar-enter 820ms cubic-bezier(0.23, 1, 0.32, 1) both;
  }
  .ap-melissa-cal-head,
  .ap-melissa-board-head,
  .ap-melissa-storyline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-family: Inter, system-ui, sans-serif;
  }
  .ap-melissa-cal-head span,
  .ap-melissa-board-head span {
    font-size: 13px;
    font-weight: 680;
    letter-spacing: -0.01em;
    color: rgba(7,17,15,0.82);
  }
  .ap-melissa-cal-head strong,
  .ap-melissa-board-head strong {
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,0.20);
    border: 1px solid rgba(255,255,255,0.30);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.38);
    font-size: 10px;
    font-weight: 650;
    color: rgba(7,17,15,0.58);
  }
  .ap-melissa-week,
  .ap-melissa-days {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 7px;
    margin-top: 14px;
    font-family: Inter, system-ui, sans-serif;
    text-align: center;
  }
  .ap-melissa-week span {
    font-size: 10px;
    font-weight: 650;
    color: rgba(7,17,15,0.36);
  }
  .ap-melissa-days span {
    display: grid;
    place-items: center;
    height: 27px;
    border-radius: 10px;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.16);
    font-size: 11px;
    color: rgba(7,17,15,0.58);
  }
  .ap-melissa-days .is-soft {
    opacity: 0.54;
  }
  .ap-melissa-days .is-active {
    color: rgba(7,17,15,0.88);
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.28);
  }
  .ap-melissa-days .is-booked {
    color: rgba(7,17,15,0.75);
    background: rgba(0,122,255,0.13);
    border-color: rgba(0,122,255,0.18);
  }
  .ap-melissa-slots {
    position: relative;
    display: grid;
    gap: 7px;
    margin-top: 12px;
  }
  .ap-melissa-slot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 14px;
    background:
      linear-gradient(145deg, rgba(255,255,255,0.26), rgba(255,255,255,0.11)),
      rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.32);
    box-shadow:
      0 12px 24px rgba(0,0,0,0.09),
      inset 0 1px 0 rgba(255,255,255,0.42);
    font-family: Inter, system-ui, sans-serif;
    animation: ap-melissa-slot-sync var(--melissa-cycle) cubic-bezier(0.23, 1, 0.32, 1) infinite;
  }
  .ap-tab-panel.active .ap-melissa-slot:nth-child(2) {
    animation:
      ap-melissa-slot-enter 540ms cubic-bezier(0.23, 1, 0.32, 1) 780ms both,
      ap-melissa-slot-sync var(--melissa-cycle) cubic-bezier(0.23, 1, 0.32, 1) 2.2s infinite;
  }
  .ap-tab-panel.active .ap-melissa-slot:nth-child(3) {
    animation:
      ap-melissa-slot-enter 540ms cubic-bezier(0.23, 1, 0.32, 1) 1050ms both,
      ap-melissa-slot-sync var(--melissa-cycle) cubic-bezier(0.23, 1, 0.32, 1) 2.2s infinite;
  }
  .ap-melissa-slot span {
    font-size: 12px;
    font-weight: 700;
    color: rgba(0,122,255,0.82);
  }
  .ap-melissa-slot strong {
    font-size: 12px;
    font-weight: 620;
    color: rgba(7,17,15,0.68);
  }
  .ap-melissa-kanban {
    width: 82%;
    margin: -78px 0 0 auto;
    padding: 14px;
    border-radius: 22px;
    opacity: var(--crm-opacity, 0.86);
    transform: translateX(var(--melissa-crm-offset)) translateZ(0);
    border: 1px solid rgba(255,255,255,0.20);
    background:
      radial-gradient(circle at 16% 18%, rgba(0,122,255,var(--crm-blue-glow, 0.035)), transparent 34%),
      linear-gradient(145deg, rgba(255,255,255,var(--crm-bg-top, 0.15)), rgba(255,255,255,var(--crm-bg-mid, 0.022)) 54%, rgba(255,255,255,var(--crm-bg-bottom, 0.050))),
      rgba(255,255,255,var(--crm-bg-base, 0.014));
    box-shadow:
      0 14px 34px rgba(0,0,0,0.075),
      inset 0 1px 0 rgba(255,255,255,0.24),
      inset 0 -1px 0 rgba(255,255,255,0.045),
      inset 0 0 14px rgba(255,255,255,0.030);
    backdrop-filter: blur(var(--crm-blur, 24px)) saturate(var(--crm-saturate, 128%));
    -webkit-backdrop-filter: blur(var(--crm-blur, 24px)) saturate(var(--crm-saturate, 128%));
    isolation: isolate;
    backface-visibility: hidden;
    will-change: transform, opacity;
  }
  .ap-melissa-kanban::after {
    content: none;
  }
  .ap-tab-panel.active .ap-melissa-kanban {
    animation: ap-melissa-kanban-enter 760ms cubic-bezier(0.23, 1, 0.32, 1) 1700ms both;
  }
  .ap-melissa-kanban::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18px;
    right: 18px;
    z-index: 2;
    height: 2px;
    border-radius: 999px;
    pointer-events: none;
    opacity: 0;
    background:
      linear-gradient(90deg, transparent, rgba(0,122,255,0.34) 18%, rgba(255,255,255,0.88) 52%, rgba(0,122,255,0.50) 74%, transparent);
    box-shadow:
      0 0 10px rgba(255,255,255,0.24),
      0 0 18px rgba(0,122,255,0.32);
    mix-blend-mode: screen;
    animation: ap-melissa-board-rim var(--melissa-cycle) cubic-bezier(0.23, 1, 0.32, 1) infinite;
  }
  .ap-melissa-lanes {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-height: 130px;
    margin-top: 12px;
    padding: 8px;
    border-radius: 18px;
    background: rgba(255,255,255,var(--melissa-crm-lanes-bg));
    border: 1px solid rgba(255,255,255,0.056);
    overflow: visible;
  }
  .ap-melissa-board-head {
    position: relative;
    z-index: 1;
  }
  .ap-melissa-lane {
    position: relative;
    min-width: 0;
    padding: 10px 8px;
    border-radius: 14px;
    background: rgba(255,255,255,var(--melissa-crm-lane-bg));
    border: 1px solid rgba(255,255,255,0.058);
  }
  .ap-melissa-lane span {
    display: block;
    font-family: Inter, system-ui, sans-serif;
    font-size: 10px;
    font-weight: 680;
    color: rgba(7,17,15,0.48);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ap-melissa-lane i {
    display: block;
    height: 38px;
    margin-top: 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.008);
    border: 1px dashed rgba(7,17,15,0.060);
  }
  .ap-melissa-lead {
    position: absolute;
    z-index: 2;
    left: 8px;
    top: 48px;
    width: calc((100% - 24px) / 2 + 18px);
    min-height: 52px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 9px;
    border-radius: 15px;
    background:
      linear-gradient(145deg, rgba(255,255,255,var(--melissa-crm-lead-bg-top)), rgba(255,255,255,var(--melissa-crm-lead-bg-bottom))),
      rgba(255,255,255,var(--melissa-crm-lead-bg-base));
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow:
      0 12px 24px rgba(0,0,0,0.105),
      0 0 0 1px rgba(0,122,255,0.06),
      inset 0 1px 0 rgba(255,255,255,0.24);
    font-family: Inter, system-ui, sans-serif;
    opacity: 0;
    animation: ap-melissa-lead-flow calc(var(--melissa-cycle) * 3) cubic-bezier(0.23, 1, 0.32, 1) 2.72s infinite both;
  }
  .ap-melissa-lead:nth-of-type(4) { animation-delay: calc(2.72s + (var(--melissa-cycle) * 0.5)); }
  .ap-melissa-lead:nth-of-type(5) { animation-delay: calc(2.72s + (var(--melissa-cycle) * 1)); }
  .ap-melissa-lead:nth-of-type(6) { animation-delay: calc(2.72s + (var(--melissa-cycle) * 1.5)); }
  .ap-melissa-lead:nth-of-type(7) { animation-delay: calc(2.72s + (var(--melissa-cycle) * 2)); }
  .ap-melissa-lead:nth-of-type(8) { animation-delay: calc(2.72s + (var(--melissa-cycle) * 2.5)); }
  .ap-melissa-lead > span:last-child {
    min-width: 0;
  }
  .ap-melissa-lead-avatar {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(0,122,255,0.16);
    color: rgba(0,92,210,0.92);
    font-size: 12px;
    font-weight: 760;
    overflow: hidden;
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.70),
      0 6px 12px rgba(0,0,0,0.12);
  }
  .ap-melissa-lead-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .ap-melissa-lead strong,
  .ap-melissa-lead small {
    display: block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ap-melissa-lead strong {
    font-size: 11.7px;
    font-weight: 720;
    color: rgba(7,17,15,0.82);
  }
  .ap-melissa-storyline {
    margin-top: 10px;
  }
  .ap-melissa-storyline span {
    position: relative;
    flex: 1;
    min-width: 0;
    padding: 7px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.28);
    font-size: 9px;
    font-weight: 650;
    line-height: 1.05;
    text-align: center;
    color: rgba(7,17,15,0.50);
    animation: ap-melissa-step var(--melissa-cycle) ease-in-out infinite;
  }
  .ap-melissa-storyline span:nth-child(2) { animation-delay: 2.45s; }
  .ap-melissa-storyline span:nth-child(3) { animation-delay: 4.95s; }
  @keyframes ap-melissa-calendar-enter {
    from {
      opacity: 0;
      transform: rotate(-2deg) translateX(-34px);
      filter: blur(4px);
    }
    to {
      opacity: 0.78;
      transform: rotate(-2deg) translateX(-16px);
      filter: blur(0);
    }
  }
  @keyframes ap-melissa-slot-enter {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes ap-melissa-kanban-enter {
    from {
      opacity: 0;
      transform: translateX(var(--melissa-crm-enter-offset)) translateZ(0);
      filter: blur(4px);
    }
    to {
      opacity: var(--crm-opacity, 0.86);
      transform: translateX(var(--melissa-crm-offset)) translateZ(0);
      filter: blur(0);
    }
  }
  @keyframes ap-melissa-lead-flow {
    0% {
      left: 8px;
      opacity: 0;
      transform: translateY(7px) scale(0.985);
    }
    1.8%, 6% {
      left: 8px;
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    10.5%, 13.5% {
      left: calc(8px + ((100% - 24px) / 2) + 8px);
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    16.66%, 100% {
      left: calc(8px + ((100% - 24px) / 2) + 8px);
      opacity: 0;
      transform: translateY(-6px) scale(0.985);
    }
  }
  @keyframes ap-melissa-slot-sync {
    0%, 30%, 100% {
      box-shadow:
        0 12px 24px rgba(0,0,0,0.09),
        inset 0 1px 0 rgba(255,255,255,0.42);
    }
    42%, 62% {
      box-shadow:
        0 14px 30px rgba(0,122,255,0.16),
        0 0 24px rgba(0,122,255,0.12),
        inset 0 1px 0 rgba(255,255,255,0.52);
    }
  }
  @keyframes ap-melissa-day-pulse {
    0%, 34%, 100% { transform: scale(1); }
    44%, 60% { transform: scale(1.08); }
  }
  @keyframes ap-melissa-board-rim {
    0%, 62%, 100% { opacity: 0; transform: scaleX(0.34); }
    72% { opacity: 0.95; }
    88% { opacity: 0.72; transform: scaleX(1); }
    96% { opacity: 0; transform: scaleX(1); }
  }
  @keyframes ap-melissa-step {
    0%, 22%, 100% {
      color: rgba(7,17,15,0.50);
      background: rgba(255,255,255,0.12);
    }
    9%, 17% {
      color: rgba(0,82,190,0.82);
      background: rgba(0,122,255,0.12);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.34),
        0 0 16px rgba(0,122,255,0.10);
    }
  }
  @media (max-width: 600px) {
    .ap-melissa-card {
      --melissa-crm-offset: 24px;
      --melissa-crm-enter-offset: 58px;
      width: min(100%, 340px);
      min-height: 346px;
      padding: 13px;
      border-radius: 18px;
    }
    .ap-melissa-calendar {
      width: 74%;
      min-height: 228px;
      padding: 13px;
      border-radius: 19px;
    }
    .ap-melissa-week,
    .ap-melissa-days {
      gap: 5px;
      margin-top: 11px;
    }
    .ap-melissa-days span {
      height: 24px;
      border-radius: 9px;
      font-size: 10px;
    }
    .ap-melissa-slots {
      gap: 6px;
      margin-top: 10px;
    }
    .ap-melissa-slot {
      padding: 8px 10px;
    }
    .ap-melissa-kanban {
      width: 86%;
      margin: -72px 0 0 auto;
      padding: 12px;
      border-radius: 19px;
      transform: translateX(var(--melissa-crm-offset)) translateZ(0);
    }
    .ap-melissa-board-head {
      gap: 8px;
    }
    .ap-melissa-board-head strong {
      padding: 4px 7px;
      font-size: 9px;
    }
    .ap-melissa-lanes {
      gap: 6px;
      min-height: 122px;
      padding: 7px;
    }
    .ap-melissa-lane {
      padding: 9px 6px;
      border-radius: 12px;
    }
    .ap-melissa-lane span {
      font-size: 9px;
    }
    .ap-melissa-lead {
      left: 7px;
      top: 45px;
      width: calc((100% - 20px) / 2 + 12px);
      min-height: 50px;
      gap: 6px;
      padding: 8px;
      border-radius: 13px;
    }
    .ap-melissa-lead-avatar {
      width: 24px;
      height: 24px;
      font-size: 11px;
    }
    .ap-melissa-lead strong {
      font-size: 10.7px;
    }
    .ap-melissa-storyline span {
      padding: 6px 5px;
      font-size: 8.5px;
    }
    @keyframes ap-melissa-lead-flow {
      0% {
        left: 7px;
        opacity: 0;
        transform: translateY(7px) scale(0.985);
      }
      1.8%, 6% {
        left: 7px;
        opacity: 1;
        transform: translateY(0) scale(1);
      }
      10.5%, 13.5% {
        left: calc(7px + ((100% - 20px) / 2) + 6px);
        opacity: 1;
        transform: translateY(0) scale(1);
      }
      16.66%, 100% {
        left: calc(7px + ((100% - 20px) / 2) + 6px);
        opacity: 0;
        transform: translateY(-6px) scale(0.985);
      }
    }
  }

  /* ── SECTION 5: especialidades carousel ────────── */
  .ap-rail-wrap { margin-top: clamp(48px, 6vw, 80px); }
  .apple-carousel { position: relative; }
  .ap-rail {
    display: flex; gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 24px;
    padding: 8px 24px 32px;
    margin: 0 -24px;
    scrollbar-width: none;
  }
  .ap-rail::-webkit-scrollbar { display: none; }
  @media (min-width: 768px) {
    .ap-rail { padding: 8px 56px 40px; margin: 0 -56px; scroll-padding-left: 56px; }
  }
  .ap-rail-card {
    scroll-snap-align: start;
    flex: 0 0 auto;
    width: 320px; height: 420px;
    border-radius: 28px;
    overflow: hidden;
    position: relative;
    background: var(--ap-bg-2);
    transition: transform 360ms var(--ease-out);
  }
  @media (min-width: 768px) {
    .ap-rail-card { width: 360px; height: 460px; }
  }
  .ap-rail-card:hover { transform: translateY(-4px); }
  .ap-rail-card .grad {
    position: absolute; inset: 0;
    background:
      linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.38) 35%, rgba(0,0,0,0.78) 70%, rgba(0,0,0,0.96) 100%);
  }
  .ap-rail-card .meta {
    position: absolute; inset: auto 0 0 0;
    padding: 28px;
    color: white;
  }
  .ap-rail-card .meta h4 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -0.028em;
    line-height: 1.05;
    margin: 0 0 8px;
  }
  .ap-rail-card .meta p {
    font-size: 13px;
    color: rgba(255,255,255,0.78);
    line-height: 1.45;
    margin: 0;
    max-width: 28ch;
    letter-spacing: -0.005em;
  }
  .ap-card-derm,
  .ap-card-odon,
  .ap-card-cir,
  .ap-card-psi,
  .ap-card-outras {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .ap-card-derm   { background-image: url('/home-teste-assets/assets/photos/hof.webp'); }
  .ap-card-odon   { background-image: url('/home-teste-assets/assets/photos/odonto.webp'); }
  .ap-card-cir    { background-image: url('/home-teste-assets/assets/photos/plastica.webp'); }
  .ap-card-psi    { background-image: url('/home-teste-assets/assets/photos/psi.webp'); }
  .ap-card-outras { background-image: url('/home-teste-assets/assets/photos/outras.webp'); }

  .ap-rail-arrows {
    position: static;
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    width: max-content;
    margin: 0 auto;
    z-index: 3;
  }
  .ap-rail-arrows button {
    width: 32px; height: 32px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.12);
    background: rgba(0,0,0,0.045);
    display: grid;
    place-items: center;
    font-size: 16px;
    color: rgba(0,0,0,0.68);
    transition: background 200ms var(--ease-out), transform 200ms var(--ease-out);
    cursor: pointer;
  }
  .ap-rail-arrows button:hover {
    background: rgba(0,0,0,0.08);
    transform: translateY(-1px);
  }
  .ap-rail-arrows button:disabled { opacity: 0.32; cursor: not-allowed; }
  @media (max-width: 900px) {
    .ap-rail-arrows {
      justify-content: center;
      margin: 0 auto;
    }
  }

  /* ── SECTION: pricing (transparente) ─────────── */
  .ap-pricing .ap-section-head { margin-bottom: clamp(56px, 7vw, 88px); }
  .ap-pricing-grid {
    display: grid;
    gap: 20px;
    max-width: 980px;
    margin: 0 auto;
  }
  @media (min-width: 820px) {
    .ap-pricing-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  }
  .ap-pricing-card {
    background: var(--ap-bg);
    border: 1px solid var(--ap-line);
    border-radius: 28px;
    padding: clamp(40px, 4.5vw, 56px);
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-height: 100%;
  }
  .ap-pricing-card.is-primary {
    background: var(--ap-bg-2);
    border-color: transparent;
  }
  .ap-pricing-step {
    font-family: var(--font-display);
    font-size: 13px;
    color: var(--ap-ink-3);
    letter-spacing: 0.04em;
    font-feature-settings: "tnum";
  }
  .ap-pricing-value {
    display: flex;
    align-items: baseline;
    gap: 8px;
    line-height: 0.88;
    margin-top: -4px;
  }
  .ap-pricing-value .cur {
    font-size: clamp(20px, 2vw, 26px);
    color: var(--ap-ink-2);
    font-weight: 500;
    letter-spacing: -0.015em;
  }
  .ap-pricing-value .v {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(72px, 9vw, 112px);
    letter-spacing: -0.05em;
    color: var(--ap-ink);
    font-feature-settings: "tnum";
  }
  .ap-pricing-value .per {
    font-size: clamp(15px, 1.3vw, 17px);
    color: var(--ap-ink-3);
    letter-spacing: -0.005em;
  }
  .ap-pricing-hd {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--ap-ink);
    margin: 4px 0 0;
  }
  .ap-pricing-body {
    font-size: 16px;
    color: var(--ap-ink-2);
    line-height: 1.5;
    letter-spacing: -0.005em;
    max-width: 32ch;
  }
  .ap-pricing-card .shimmer-btn {
    align-self: flex-start;
    margin-top: auto;
  }
  .ap-pricing-cta-block {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .ap-pricing-cta-block .shimmer-btn {
    margin-top: 0;
  }
  .ap-pricing-cta-note {
    margin: 0;
    font-size: 13.5px;
    color: var(--ap-ink-3);
    letter-spacing: -0.005em;
  }
  .ap-pricing-foot {
    margin-top: auto;
    font-size: 13.5px;
    color: var(--ap-ink-3);
    letter-spacing: -0.005em;
  }
  @media (max-width: 520px) {
    .ap-pricing-card { padding: 32px 26px; }
    .ap-pricing-card .shimmer-btn { align-self: stretch; justify-content: center; }
    .ap-pricing-cta-block { align-items: stretch; }
    .ap-pricing-cta-note { text-align: center; }
  }

  /* ── SECTION: setup (heading + iPhone image) ─ */
  .ap-setup {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(40px, 6vw, 64px);
    align-items: center;
  }
  @media (min-width: 880px) {
    .ap-setup { grid-template-columns: 1fr 1fr; gap: clamp(56px, 8vw, 96px); }
  }
  .ap-setup-copy { max-width: 38rem; }
  .ap-setup-copy .ap-h2 { margin: 0 0 18px; text-wrap: balance; }
  .ap-setup-copy .ap-sub { margin: 0; max-width: 38ch; }
  .ap-setup-cta { margin-top: clamp(32px, 4vw, 44px); }
  .ap-setup-figure {
    margin: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .ap-setup-figure img {
    display: block;
    width: 100%;
    max-width: clamp(280px, 50vw, 520px);
    height: auto;
  }
  @media (max-width: 879px) {
    .ap-setup-figure img { max-width: 320px; }
    .ap-setup-copy { text-align: center; max-width: none; }
    .ap-setup-copy .ap-sub { margin-left: auto; margin-right: auto; }
    .ap-setup-cta { text-align: center; }
  }

  /* ── SECTION: import (migrar de outros sistemas) ─ */
  .ap-import {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(40px, 6vw, 64px);
    align-items: center;
  }
  @media (min-width: 880px) {
    .ap-import { grid-template-columns: 0.95fr 1.05fr; gap: clamp(56px, 8vw, 96px); }
    .ap-import .ap-marquee { order: -1; }
    .ap-import-copy { order: 0; }
  }
  .ap-import-copy { max-width: 38rem; }
  .ap-import-copy .ap-h2 { margin: 0 0 18px; text-wrap: balance; }
  .ap-import-copy .ap-sub { margin: 0; max-width: 40ch; }
  .ap-import-cta { margin-top: clamp(28px, 4vw, 40px); }
  @media (max-width: 879px) {
    .ap-import-copy { text-align: center; max-width: none; }
    .ap-import-copy .ap-sub { margin-left: auto; margin-right: auto; }
    .ap-import-cta { text-align: center; }
  }

  /* Marquee chassis: vertical on desktop, horizontal on mobile */
  .ap-marquee {
    --marquee-duration: 14s;
    --marquee-fade: 18%;
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  @media (min-width: 880px) {
    .ap-marquee {
      height: clamp(380px, 44vw, 520px);
      width: 100%;
      max-width: 360px;
      margin-right: auto;
      margin-left: 0;
      -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black var(--marquee-fade), black calc(100% - var(--marquee-fade)), transparent 100%);
              mask-image: linear-gradient(to bottom, transparent 0%, black var(--marquee-fade), black calc(100% - var(--marquee-fade)), transparent 100%);
    }
  }
  @media (max-width: 879px) {
    .ap-marquee {
      height: 84px;
      width: 100%;
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--marquee-fade), black calc(100% - var(--marquee-fade)), transparent 100%);
              mask-image: linear-gradient(to right, transparent 0%, black var(--marquee-fade), black calc(100% - var(--marquee-fade)), transparent 100%);
    }
  }

  .ap-marquee-track {
    display: flex;
    gap: 0;
    will-change: transform;
  }
  .ap-marquee-set {
    display: flex;
    flex: 0 0 auto;
    gap: 16px;
  }
  @media (min-width: 880px) {
    .ap-marquee-track {
      flex-direction: column;
      animation: ap-marquee-vert var(--marquee-duration) linear infinite;
    }
    .ap-marquee-set {
      flex-direction: column;
      padding-bottom: 16px;
    }
  }
  @media (max-width: 879px) {
    .ap-marquee-track {
      flex-direction: row;
      animation: ap-marquee-horiz var(--marquee-duration) linear infinite;
    }
    .ap-marquee-set {
      flex-direction: row;
      padding-right: 16px;
    }
  }
  @keyframes ap-marquee-vert {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
  }
  @keyframes ap-marquee-horiz {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .ap-marquee-track { animation-duration: 42s; }
  }

  /* Each logo chip: real image mark + wordmark, B&W muted */
  .ap-marq-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    height: 70px;
    padding: 0 22px;
    background: white;
    border: 1px solid var(--ap-line);
    border-radius: 16px;
    color: var(--ap-ink);
    opacity: 0.7;
    transition: opacity 240ms var(--ease-out);
  }
  @media (min-width: 880px) {
    .ap-marq-logo { width: 100%; }
  }
  @media (max-width: 879px) {
    .ap-marq-logo {
      min-width: 172px;
      padding: 0 18px;
    }
  }
  .ap-marquee:hover .ap-marq-logo { opacity: 0.84; }
  .ap-marq-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    filter: grayscale(1) saturate(0) contrast(1.14) brightness(0.44);
    opacity: 0.94;
    flex-shrink: 0;
  }
  .ap-marq-name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 16.5px;
    letter-spacing: -0.012em;
    color: var(--ap-ink);
    white-space: nowrap;
  }

  /* ── SECTION: official WhatsApp / Meta credibility (linha discreta) ─ */
  .ap-official {
    padding: clamp(22px, 3vw, 32px) 0;
    background: #f1f1ef;
  }
  .ap-official-line {
    display: grid;
    position: relative;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    width: min(100%, 640px);
    margin: 0 auto;
    color: rgba(0,0,0,0.4);
    font-size: clamp(14px, 1.4vw, 17px);
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
  }
  .ap-official-mark {
    display: block;
    height: clamp(21px, 2.4vw, 29px);
    width: clamp(61px, 7vw, 85px);
    max-width: min(100%, 136px);
    justify-self: center;
    color: inherit;
    background: currentColor;
    -webkit-mask: url("/home-teste-assets/assets/meta-business-partner.png") center / contain no-repeat;
    mask: url("/home-teste-assets/assets/meta-business-partner.png") center / contain no-repeat;
  }
  .ap-official-divider {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 44px;
    background: rgba(0,0,0,0.12);
    transform: translate(-50%, -50%);
  }
  .ap-official-copy {
    grid-column: 2;
    justify-self: start;
    max-width: 320px;
    padding-left: clamp(22px, 3vw, 30px);
  }
  @media (max-width: 879px) {
    .ap-official { padding: 30px 0; }
    .ap-official-line {
      width: 100%;
    }
    .ap-official-mark {
      height: 27px;
      width: 80px;
      max-width: min(100%, 106px);
    }
    .ap-official-divider {
      height: 52px;
    }
    .ap-official-copy {
      padding-left: 18px;
      padding-right: 8px;
    }
  }

  /* ── SECTION: setup steps (linha do tempo silenciosa) ─ */
  @media (min-width: 880px) { .ap-steps { grid-template-columns: repeat(3, 1fr); } }
  .ap-step {
    background: white;
    border: 1px solid var(--ap-line);
    border-radius: 22px;
    padding: 32px;
    display: flex; flex-direction: column;
    min-height: 240px;
  }
  .ap-step .num {
    font-family: var(--font-display);
    font-size: 13px;
    color: var(--ap-ink-3);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 18px;
  }
  .ap-step h4 {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: -0.022em;
    line-height: 1.1;
    margin: 0 0 12px;
    color: var(--ap-ink);
    max-width: 12ch;
  }
  .ap-step p {
    font-size: 14px;
    color: var(--ap-ink-2);
    line-height: 1.5;
    letter-spacing: -0.005em;
    margin: auto 0 0;
    max-width: 28ch;
  }

  /* ── SECTION: journey timeline (Dia 1 → Semana 1 → Mês 1) ─ */
  @property --tl-fill {
    syntax: '<number>';
    initial-value: 0;
    inherits: true;
  }

  /* Wider-than-container wrapper for the timeline */
  .ap-journey-wide {
    max-width: 1440px;
    margin: clamp(48px, 6vw, 80px) auto 0;
    padding: 0 24px;
  }
  @media (min-width: 768px) { .ap-journey-wide { padding: 0 56px; } }

  .ap-timeline {
    --tl-fill: 0;
    position: relative;
  }

  /* Track (background hairline) — inset to align with col 1 and col 3 centers */
  .ap-timeline-track {
    position: absolute;
    top: 22px;
    left: calc((100% - 2 * var(--col-gap)) / 6);
    right: calc((100% - 2 * var(--col-gap)) / 6);
    height: 1px;
    background: var(--ap-line-2);
  }

  /* Progressive line — gradient evolves from neutral gray (start) to Interaction Blue (end) */
  .ap-timeline-fill {
    position: absolute;
    inset: -1px 0 -1px 0;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(
      to right,
      var(--ap-ink-3) 0%,
      var(--ap-ink-2) 28%,
      color-mix(in oklab, var(--ap-ink-2), var(--ap-accent) 60%) 65%,
      var(--ap-accent) 100%
    );
    clip-path: inset(0 calc((1 - var(--tl-fill)) * 100%) 0 0 round 999px);
    transition: clip-path 2800ms cubic-bezier(0.65, 0, 0.35, 1);
  }

  /* Comet head — follows the fill tip, color matches local gradient stop */
  .ap-timeline-comet {
    position: absolute;
    top: 50%;
    left: calc(var(--tl-fill) * 100%);
    transform: translate(-50%, -50%);
    width: 10px; height: 10px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--ap-ink-3), var(--ap-accent) calc(var(--tl-fill) * 100%));
    transition: left 2800ms cubic-bezier(0.65, 0, 0.35, 1), opacity 320ms, background 2800ms cubic-bezier(0.65, 0, 0.35, 1);
    z-index: 2;
  }
  .ap-timeline-comet::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--ap-ink-3), var(--ap-accent) calc(var(--tl-fill) * 100%));
    opacity: 0.18;
    animation: tl-pulse 1.8s ease-in-out infinite;
  }
  .ap-timeline:not(.is-in) .ap-timeline-comet { opacity: 0; }
  .ap-timeline.is-done .ap-timeline-comet { opacity: 0; }
  .ap-timeline.is-scroll-linked .ap-timeline-fill,
  .ap-timeline.is-scroll-linked .ap-timeline-comet {
    transition: none;
  }
  @keyframes tl-pulse {
    0%, 100% { transform: scale(0.85); opacity: 0.18; }
    50%      { transform: scale(1.4); opacity: 0; }
  }

  /* Nodes — sit on the track in a 3-col grid matching the cards grid */
  .ap-timeline-nodes {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--col-gap);
    pointer-events: none;
  }
  .ap-node {
    align-self: start;
    justify-self: center;
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    gap: 14px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--ap-ink-3);
    pointer-events: auto;
    transition: color 320ms var(--ease-out);
  }
  .ap-node::before {
    content: "";
    width: 44px; height: 44px;
    border-radius: 999px;
    background: var(--ap-bg-2);
    border: 1px solid var(--ap-line-2);
    transition:
      background 360ms var(--ease-out),
      border-color 360ms var(--ease-out),
      transform 240ms var(--ease-out);
  }
  .ap-node::after {
    content: "";
    position: absolute;
    top: 18px;
    width: 8px; height: 8px;
    border-radius: 999px;
    background: var(--ap-ink-3);
    transition: background 360ms var(--ease-out), transform 360ms var(--ease-out);
  }
  .ap-node-label {
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ap-ink-3);
    transition: color 360ms var(--ease-out);
    font-feature-settings: "tnum";
  }
  .ap-node.reached::before {
    background: white;
    border-color: var(--ap-accent);
  }
  .ap-node.reached::after { background: var(--ap-accent); transform: scale(1.25); }
  .ap-node.reached .ap-node-label { color: var(--ap-ink); }
  .ap-node:hover::before { transform: scale(1.08); }

  /* Per-step color evolution: Dia 1 = neutral, Semana 1 = mid, Mês 1 = full blue */
  .ap-node:nth-of-type(1).reached::before {
    border-color: var(--ap-ink-3);
  }
  .ap-node:nth-of-type(1).reached::after {
    background: var(--ap-ink-3);
  }
  .ap-node:nth-of-type(2).reached::before {
    border-color: color-mix(in oklab, var(--ap-ink-3), var(--ap-accent) 65%);
  }
  .ap-node:nth-of-type(2).reached::after {
    background: color-mix(in oklab, var(--ap-ink-3), var(--ap-accent) 65%);
  }

  /* Cards as dialog balloons — alternating above/below the line */
  .ap-timeline-cards {
    --col-gap: 32px;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: var(--col-gap);
    align-items: start;
    justify-items: center;
  }
  @media (min-width: 1100px) { .ap-timeline-cards { --col-gap: 56px; } }

  /* The track lives in the middle row of the grid, spans all cols */
  .ap-timeline-track-row {
    grid-column: 1 / -1;
    grid-row: 2;
    position: relative;
    width: 100%;
    height: 78px;
  }

  /* All balloons sit below the line */
  .ap-tl-card[data-card="0"] { grid-column: 1; grid-row: 3; margin-top: 28px; }
  .ap-tl-card[data-card="1"] { grid-column: 2; grid-row: 3; margin-top: 28px; }
  .ap-tl-card[data-card="2"] { grid-column: 3; grid-row: 3; margin-top: 28px; }

  /* Shimmering blue rim around the Mês 1 card — the "final stage" reward (desktop only) */
  @property --tl-rim-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
  }
  /* Rim applies on all viewports (mobile included) */
  .ap-tl-card[data-card="2"] {
    position: relative;
    isolation: isolate;
  }
  .ap-tl-card[data-card="2"]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(
      from var(--tl-rim-angle),
      rgba(0, 122, 255, 0) 0deg,
      rgba(0, 122, 255, 1) 55deg,
      rgba(0, 122, 255, 0) 110deg,
      rgba(0, 122, 255, 0) 250deg,
      rgba(0, 122, 255, 1) 305deg,
      rgba(0, 122, 255, 0) 360deg
    );
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: tl-rim-spin 3.5s linear infinite;
    pointer-events: none;
    opacity: 0;
    transition: opacity 480ms var(--ease-out);
  }
  .ap-tl-card[data-card="2"].in::before { opacity: 1; }
  @keyframes tl-rim-spin {
    to { --tl-rim-angle: 360deg; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ap-tl-card[data-card="2"]::before { animation: none; }
    .ap-queue-card::before,
    .ap-queue-card::after,
    .ap-queue-response.is-answering::before { animation: none; }
  }

  .ap-tl-card {
    position: relative;
    background: white;
    border: 1px solid var(--ap-line);
    border-radius: 20px;
    padding: 18px;
    opacity: 0;
    transform: translateY(10px) scale(0.97);
    transform-origin: top center;
    box-shadow:
      0 1px 2px rgba(10, 10, 11, 0.04),
      0 8px 24px rgba(10, 10, 11, 0.05);
    transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
  }
  .ap-tl-card.in { opacity: 1; transform: translateY(0) scale(1); }

  /* Image placeholder slot */
  .ap-tl-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--ap-bg-2);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 18px;
  }
  .ap-tl-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: white;
  }
  /* Only show placeholder styling when no real image */
  .ap-tl-image--placeholder::before {
    content: attr(data-placeholder);
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 11.5px;
    letter-spacing: 0.04em;
    color: var(--ap-ink-3);
    text-align: center;
    padding: 0 12px;
  }
  .ap-tl-image--placeholder::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(135deg, transparent 49%, var(--ap-line) 49%, var(--ap-line) 51%, transparent 51%);
    opacity: 0.4;
  }

  .ap-tl-card h4 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(20px, 1.7vw, 24px);
    letter-spacing: -0.022em;
    line-height: 1.15;
    color: var(--ap-ink);
    margin: 0 0 12px;
    padding: 0 8px;
    text-wrap: balance;
  }
  .ap-tl-card p {
    font-size: 14px;
    color: var(--ap-ink-2);
    line-height: 1.55;
    letter-spacing: -0.005em;
    margin: 0 0 8px;
    padding: 0 8px 4px;
  }

  /* Cards sit cleanly in their columns — node + balloon share column center */
  .ap-tl-card::before,
  .ap-tl-card::after { content: none; }

  /* Mobile-only step header (node + label, mirroring desktop visual) */
  .ap-tl-mhead { display: none; }

  /* Mobile: vertical mirror of the desktop timeline */
  @media (max-width: 879px) {
    .ap-journey-wide { padding: 0 20px; }
    .ap-timeline-track-row { display: none; }

    .ap-timeline {
      position: relative;
      padding-left: 60px;
    }
    /* Vertical gray hairline track (top/bottom set by JS to match first/last node) */
    .ap-timeline::before {
      content: "";
      position: absolute;
      left: 21px;
      width: 2px;
      border-radius: 999px;
      background: var(--ap-line-2);
      top: var(--mob-track-top, 22px);
      height: var(--mob-track-height, calc(100% - 44px));
    }
    /* Animated gradient fill — same x and width, evolves gray→blue from top to bottom */
    .ap-timeline::after {
      content: "";
      position: absolute;
      left: 21px;
      width: 2px;
      border-radius: 999px;
      background: linear-gradient(
        to bottom,
        var(--ap-ink-3) 0%,
        var(--ap-ink-2) 28%,
        color-mix(in oklab, var(--ap-ink-2), var(--ap-accent) 60%) 65%,
        var(--ap-accent) 100%
      );
      top: var(--mob-track-top, 22px);
      height: var(--mob-track-height, 100%);
      clip-path: inset(0 0 calc((1 - var(--tl-fill)) * 100%) 0 round 999px);
      transition: clip-path 2800ms cubic-bezier(0.65, 0, 0.35, 1);
    }
    .ap-timeline.is-scroll-linked::after {
      transition: none;
    }

    .ap-timeline-cards {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      row-gap: 40px;
      column-gap: 0;
    }
    .ap-tl-card[data-card="0"],
    .ap-tl-card[data-card="1"],
    .ap-tl-card[data-card="2"] {
      grid-column: 1;
      grid-row: auto;
      margin: 0;
      align-self: stretch;
      transform-origin: top center;
      transform: translateY(10px) scale(0.97);
      max-width: 100%;
      width: 100%;
      justify-self: stretch;
    }
    .ap-tl-card.in { transform: translateY(0) scale(1); }

    /* Step header — node circle + label, mirroring desktop node visual */
    .ap-tl-mhead {
      display: flex;
      align-items: center;
      gap: 14px;
      margin: 0 0 18px;
      padding: 0;
      position: relative;
      min-height: 44px;
    }
    .ap-tl-mhead .node {
      position: absolute;
      left: -76px;
      top: 50%;
      transform: translateY(-50%);
      width: 44px; height: 44px;
      border-radius: 999px;
      background: var(--ap-bg-2);
      border: 1px solid var(--ap-line-2);
      transition:
        background 360ms var(--ease-out),
        border-color 360ms var(--ease-out);
    }
    .ap-tl-mhead .node::after {
      content: "";
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 8px; height: 8px;
      border-radius: 999px;
      background: var(--ap-ink-3);
      transition: background 360ms var(--ease-out), transform 360ms var(--ease-out);
    }
    .ap-tl-card.reached .ap-tl-mhead .node {
      background: white;
      border-color: var(--ap-accent);
    }
    .ap-tl-card.reached .ap-tl-mhead .node::after {
      background: var(--ap-accent);
      transform: translate(-50%, -50%) scale(1.25);
    }

    /* Per-step color evolution on mobile nodes too */
    .ap-tl-card[data-card="0"].reached .ap-tl-mhead .node {
      border-color: var(--ap-ink-3);
    }
    .ap-tl-card[data-card="0"].reached .ap-tl-mhead .node::after {
      background: var(--ap-ink-3);
    }
    .ap-tl-card[data-card="1"].reached .ap-tl-mhead .node {
      border-color: color-mix(in oklab, var(--ap-ink-3), var(--ap-accent) 65%);
    }
    .ap-tl-card[data-card="1"].reached .ap-tl-mhead .node::after {
      background: color-mix(in oklab, var(--ap-ink-3), var(--ap-accent) 65%);
    }
    .ap-tl-mhead .lab {
      font-size: 12px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-weight: 500;
      color: var(--ap-ink-3);
      transition: color 360ms var(--ease-out);
      font-feature-settings: "tnum";
    }
    .ap-tl-card.reached .ap-tl-mhead .lab { color: var(--ap-ink); }

    /* Tighten card padding so head/image breathe */
    .ap-tl-card { padding: 16px; }
  }

  /* ── SECTION: sumário (split list) ───────────── */
  .ap-split {
    display: grid; gap: 24px;
    margin-top: clamp(48px, 6vw, 80px);
  }
  @media (min-width: 880px) { .ap-split { grid-template-columns: 1fr 1fr; } }
  .ap-split-card {
    background: white;
    border: 1px solid var(--ap-line);
    border-radius: 24px;
    padding: 40px;
  }
  .ap-split-card.dark {
    background: var(--ap-ink);
    color: white;
    border-color: rgba(255,255,255,0.08);
  }
  .ap-split-card h4 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 28px;
    letter-spacing: -0.025em;
    line-height: 1.05;
    margin: 0 0 28px;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .ap-split-icon {
    display: inline-grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: 999px;
    background: rgba(10,10,11,0.04);
    border: 1px solid var(--ap-line);
    color: var(--ap-ink-2);
    font-size: 18px;
    flex-shrink: 0;
  }
  .ap-split-card.dark .ap-split-icon {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.10);
    color: white;
  }
  .ap-split-card ul {
    list-style: none;
    padding: 0; margin: 0;
    display: grid; gap: 14px;
  }
  .ap-split-card li {
    display: flex; gap: 12px; align-items: flex-start;
    font-size: 15px;
    line-height: 1.45;
    letter-spacing: -0.005em;
    color: var(--ap-ink-2);
  }
  .ap-split-card.dark li { color: rgba(255,255,255,0.8); }
  .ap-split-card li .ph {
    font-size: 17px;
    color: #34c759;
    flex-shrink: 0;
    margin-top: 1px;
  }
  .ap-split-card.dark li .ph { color: #6ee7b7; }

  /* ── FAQ ────────────────────────────────────── */
  .ap-faq { padding: clamp(96px, 12vw, 160px) 0; }
  .ap-faq-list { max-width: 780px; margin: 0 auto; }
  .ap-faq details {
    border-top: 1px solid var(--ap-line);
    padding: 28px 0;
  }
  .ap-faq details:last-child { border-bottom: 1px solid var(--ap-line); }
  .ap-faq summary {
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--font-body);
    font-size: clamp(17px, 1.4vw, 20px);
    font-weight: 500;
    letter-spacing: -0.013em;
    cursor: pointer;
    list-style: none;
    color: var(--ap-ink);
  }
  .ap-faq summary::-webkit-details-marker { display: none; }
  .ap-faq summary .ph {
    font-size: 18px;
    color: var(--ap-ink-2);
    transition: transform 280ms var(--ease-out);
  }
  .ap-faq details[open] summary .ph { transform: rotate(45deg); }
  .ap-faq .a {
    margin-top: 18px;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--ap-ink-2);
    max-width: 64ch;
    letter-spacing: -0.011em;
  }

  /* ── FOOTER ───────────────────────────────── */
  .ap-footer {
    padding: clamp(80px, 10vw, 120px) 0 32px;
    background: var(--ap-bg);
    border-top: 1px solid var(--ap-line);
  }
  .ap-footer-grid {
    display: grid; gap: 48px;
    margin-bottom: 64px;
  }
  @media (min-width: 800px) {
    .ap-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 64px; }
  }
  .ap-footer-brand img { height: 18px; margin-bottom: 16px; opacity: 0.8; }
  .ap-footer-brand p {
    font-size: 13px;
    color: var(--ap-ink-3);
    line-height: 1.55;
    max-width: 28ch;
    margin: 0;
    letter-spacing: -0.005em;
  }
  .ap-footer h5 {
    font-size: 13px;
    font-weight: 600;
    color: var(--ap-ink);
    margin: 0 0 18px;
    letter-spacing: -0.005em;
  }
  .ap-footer ul {
    list-style: none;
    padding: 0; margin: 0;
    display: grid; gap: 12px;
  }
  .ap-footer ul a {
    font-size: 13px;
    color: var(--ap-ink-2);
    letter-spacing: -0.005em;
    transition: color 200ms;
  }
  .ap-footer ul a:hover { color: var(--ap-ink); }
  .ap-footer-bottom {
    display: flex; justify-content: space-between;
    flex-wrap: wrap; gap: 16px;
    padding-top: 28px;
    border-top: 1px solid var(--ap-line);
    font-size: 12px;
    color: var(--ap-ink-3);
    letter-spacing: -0.005em;
  }
  .ap-footer-bottom .legal { display: flex; gap: 24px; flex-wrap: wrap; }
  .ap-footer-bottom .legal a { color: var(--ap-ink-3); transition: color 200ms; }
  .ap-footer-bottom .legal a:hover { color: var(--ap-ink); }

  /* Responsive niceties */
  @media (max-width: 700px) {
    .ap-hero { padding: 94px 0 80px; }
    .ap-hero h1 { font-size: clamp(53px, 8.1vw, 110px); }
    .ap-hero-stage {
      margin-top: 18px;
      margin-bottom: 0;
    }
    .ap-hero-image {
      width: 100vw;
      max-width: none;
      border: 0;
      border-radius: 0;
      -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.88) 0%, #000 6%, #000 76%, rgba(0,0,0,0) 100%);
      mask-image: linear-gradient(to bottom, rgba(0,0,0,0.88) 0%, #000 6%, #000 76%, rgba(0,0,0,0) 100%);
    }
    .ap-h2 { font-size: clamp(38px, 4.4vw, 58px); }
    .ap-h3 { font-size: clamp(28px, 2.9vw, 40px); }
    .ap-h4 { font-size: clamp(22px, 2vw, 28px); }
    .ap-section-head { margin-bottom: 56px; }
    .ap-hero-actions {
      flex-direction: column;
      gap: 14px;
    }
  }

  /* Quiet entrance for content */
  /* ── SECTION: porte da clínica (enxuta x escala) ── */
  .ap-fit-grid {
    display: grid;
    gap: 22px;
    margin-top: clamp(48px, 6vw, 80px);
  }
  @media (min-width: 880px) {
    .ap-fit-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  }
  .ap-fit-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ap-line);
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 30px 60px -46px rgba(10,10,11,0.5);
  }
  .ap-fit-card--scale { border-color: rgba(0,122,255,0.16); }
  /* image lives inside the card as a full-bleed top banner */
  .ap-fit-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }
  .ap-fit-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .ap-fit-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(26px, 3vw, 40px);
  }
  /* density motif — fewer dots = lean, more dots = scale */
  .ap-fit-dots {
    display: grid;
    width: max-content;
    gap: 9px;
    margin-bottom: 2px;
  }
  .ap-fit-dots i {
    display: block;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #9aa0aa;
    opacity: .18;
    transform: scale(.84);
    animation: apFitPulse 2.65s ease-in-out infinite;
  }
  .ap-fit-dots--lean { grid-template-columns: repeat(3, auto); }
  .ap-fit-dots--scale { grid-template-columns: repeat(6, auto); gap: 8px; }
  .ap-fit-dots--lean i:nth-child(2) { animation-delay: .16s; }
  .ap-fit-dots--lean i:nth-child(3) { animation-delay: .32s; }
  .ap-fit-dots--scale i:nth-child(6n+2) { animation-delay: .12s; }
  .ap-fit-dots--scale i:nth-child(6n+3) { animation-delay: .24s; }
  .ap-fit-dots--scale i:nth-child(6n+4) { animation-delay: .36s; }
  .ap-fit-dots--scale i:nth-child(6n+5) { animation-delay: .48s; }
  .ap-fit-dots--scale i:nth-child(6n+6) { animation-delay: .60s; }
  @keyframes apFitPulse {
    0%, 100% {
      opacity: .18;
      transform: scale(.84);
      box-shadow: 0 0 0 rgba(154,160,170,0);
    }
    48%, 58% {
      opacity: .54;
      transform: scale(1.18);
      box-shadow: 0 0 10px rgba(154,160,170,0.18);
    }
  }
  .ap-fit-kicker {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ap-ink-3);
  }
  .ap-fit-kicker .ph { font-size: 16px; }
  .ap-fit-card--scale .ap-fit-kicker { color: var(--ap-accent); }
  .ap-fit-title {
    box-sizing: border-box;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(24px, 2.6vw, 33px);
    letter-spacing: -0.026em;
    line-height: 1.04;
    margin: 0;
    color: var(--ap-ink);
  }
  .ap-fit-desc {
    font-size: clamp(14.5px, 1.15vw, 16px);
    line-height: 1.55;
    color: var(--ap-ink-2);
    margin: 0;
    max-width: 38ch;
  }
  @media (prefers-reduced-motion: reduce) {
    .ap-fit-dots i { animation: none !important; opacity: .38; transform: none; }
  }

  /* ── SECTION: inteligência certa / orquestração ── */
  .ap-ai-stack {
    position: relative;
    overflow: visible;
    isolation: isolate;
    background: #fff;
    color: var(--ap-ink);

    /* ═══════════════════════════════════════════════════════════════
       CONTROLE DO DEGRADÊ / OVERLAY DO FUNDO   (ctrl+F: AI-OVERLAY)
       ---------------------------------------------------------------
       Atrás do painel tem a imagem de vidro azul (inteligencia-bg.jpg),
       que é clara e reflexiva. Por cima dela colocamos um overlay PRETO
       que cobre MAIS o lado ESQUERDO (onde fica o texto, pra dar leitura)
       e revela MAIS a imagem à DIREITA (atrás dos cards, pra dar reflexo).

       Mexa só nestes valores — tudo é aplicado lá embaixo no
       `.ap-ai-panel::before`. Não precisa caçar o gradient na mão.

       • --ai-ov-angle  : direção do degrade horizontal.
                          90deg = esquerda→direita reto; 100deg = leve diagonal ↘.
       • --ai-ov-N      : OPACIDADE do preto em 4 pontos (0 = transparente / vê a
                          imagem; 1 = preto sólido). N=1 é o lado do TEXTO (mais
                          escuro) e N=4 é o lado dos CARDS (mais imagem exposta).
                          → Quer ver MAIS imagem nas pontas? baixe --ai-ov-3 / --ai-ov-4.
                          → Texto difícil de ler? suba --ai-ov-1 / --ai-ov-2.
       • --ai-ov-N-stop : POSIÇÃO (%) de cada parada, da esquerda (0%) à direita (100%).
                          Empurra onde o preto "abre" pra imagem.
       • --ai-vig-top / --ai-vig-bot : vinheta preta no TOPO e na BASE do painel
                          (0 = sem vinheta). Só assenta a cena, não afeta leitura.
       • --ai-img-pos   : enquadramento da imagem (ex.: 'center right', 'center',
                          '70% center'). Move qual parte do vidro aparece.
       ═══════════════════════════════════════════════════════════════ */
    --ai-ov-angle: 100deg;
    --ai-ov-1: 2;  --ai-ov-1-stop: 0%;    /* lado do TEXTO  — mais preto   */
    --ai-ov-2: 2;   --ai-ov-2-stop: 32%;
    --ai-ov-3: 2;   --ai-ov-3-stop: 62%;
    --ai-ov-4: 2;   --ai-ov-4-stop: 80%;  /* lado dos CARDS — revela imagem */
    --ai-vig-top: 0.30;
    --ai-vig-bot: 0.2;
    --ai-img-pos: center right;
  }
  .ap-ai-stack > .ap-container {
    position: relative;
    z-index: 1;
  }
  .ap-ai-panel {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 0.96fr);
    align-items: center;
    gap: clamp(32px, 5vw, 72px);
    min-height: clamp(480px, 48vw, 600px);
    padding: clamp(40px, 6vw, 80px);
    border-radius: clamp(22px, 3.2vw, 34px);
    background: #04050a;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 26px 70px rgba(5,8,12,0.22);
  }
  /* Imagem de vidro azul ao fundo + overlay alpha->preto: escuro no lado do
     texto (esquerda) e revelando a imagem atras dos cards de vidro (direita)
     para dar reflexo, sem prejudicar a leitura. */
  /* Overlay aplicado: TODOS os valores vêm do bloco AI-OVERLAY lá em cima.
     Edite as variáveis --ai-* na regra .ap-ai-stack, não aqui. */
  .ap-ai-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      /* 1) overlay horizontal: preto no lado do texto -> revela a imagem nos cards */
      linear-gradient(var(--ai-ov-angle),
        rgba(4,5,9, var(--ai-ov-1)) var(--ai-ov-1-stop),
        rgba(4,5,9, var(--ai-ov-2)) var(--ai-ov-2-stop),
        rgba(4,5,9, var(--ai-ov-3)) var(--ai-ov-3-stop),
        rgba(4,5,9, var(--ai-ov-4)) var(--ai-ov-4-stop)),
      /* 2) vinheta vertical pra assentar topo/base */
      linear-gradient(180deg,
        rgba(4,5,9, var(--ai-vig-top)) 0%,
        rgba(4,5,9,0) 30%,
        rgba(4,5,9,0) 70%,
        rgba(4,5,9, var(--ai-vig-bot)) 100%),
      /* 3) a imagem de vidro azul ao fundo */
      url('/home-teste-assets/assets/inteligencia-bg.webp') var(--ai-img-pos) / cover no-repeat;
  }
  .ap-ai-copy {
    max-width: 610px;
    text-align: left;
    position: relative;
    z-index: 1;
  }
  .ap-ai-copy .ap-h2 {
    margin: 0;
    color: #fff;
    max-width: 15ch;
  }
  /* Titulo todo branco, em duas linhas limpas. */
  .ap-ai-copy .ap-h2 em {
    display: block;
    color: #fff;
    font-style: normal;
  }
  .ap-ai-h2-line {
    display: block;
    white-space: normal;
  }
  .ap-ai-copy .ap-sub {
    margin: 22px 0 0;
    max-width: 30em;
    color: rgba(255,255,255,0.70);
    text-align: left;
    font-size: clamp(16px, 1.3vw, 19px);
    line-height: 1.55;
    letter-spacing: -0.011em;
  }

  /* ── Board: Triagi (coordenadora) no topo + 3 IAs em cards de vidro ── */
  .ap-ai-board {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(28px, 3.4vw, 46px);
  }

  /* Triagi — tile QUADRADO, so o icone da marca, vidro neutro. */
  .ap-ai-core {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(78px, 8vw, 98px);
    height: clamp(78px, 8vw, 98px);
    border-radius: clamp(20px, 2vw, 26px);
    background: linear-gradient(158deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
    border: 1px solid rgba(255,255,255,0.18);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
    box-shadow:
      0 30px 64px rgba(0,0,0,0.52),
      inset 0 1px 0 rgba(255,255,255,0.26),
      inset 0 -1px 0 rgba(255,255,255,0.05);
  }
  .ap-ai-core img {
    width: clamp(44px, 4.6vw, 56px);
    height: auto;
    opacity: 0.98;
  }

  /* Stage: cards de vidro orbitam em loop infinito (3 posicoes: centro-frente,
     direita-fundo, esquerda-fundo). Cada card roda a mesma animacao com delay
     defasado, entao sempre ha um em cada posicao. */
  .ap-ai-row {
    position: relative;
    width: 100%;
    height: clamp(196px, 23vw, 246px);
  }
  .ap-ai-card {
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: clamp(9px, 1.1vw, 13px);
    width: clamp(132px, 14vw, 178px);
    height: clamp(150px, 16.5vw, 186px);
    padding: clamp(14px, 1.6vw, 20px) clamp(10px, 1.2vw, 16px);
    border-radius: clamp(18px, 1.8vw, 24px);
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.16);
    -webkit-backdrop-filter: blur(20px) saturate(135%);
    backdrop-filter: blur(20px) saturate(135%);
    box-shadow:
      0 26px 56px rgba(0,0,0,0.42),
      inset 0 1px 0 rgba(255,255,255,0.20),
      inset 0 -1px 0 rgba(255,255,255,0.04);
    transform: translate(-50%, -50%);
    animation: ap-ai-orbit 12s cubic-bezier(0.65, 0, 0.35, 1) infinite;
    will-change: transform, opacity;
  }
  /* offsets de fase: 4 cards, cada um comeca num ponto diferente do ciclo de
     16s. As 4 posicoes (frente / direita / fundo / esquerda) ficam sempre
     ocupadas, entao o conjunto gira continuamente. */
  .ap-ai-card { animation-duration: 16s; }
  .ap-ai-card--triagi { animation-delay: 0s; }
  .ap-ai-card--gemini { animation-delay: -4s; }
  .ap-ai-card--gpt    { animation-delay: -8s; }
  .ap-ai-card--claude { animation-delay: -12s; }

  @keyframes ap-ai-orbit {
    /* 0% = centro/frente (maior, nitido) */
    0%, 100% {
      transform: translate(-50%, calc(-50% - 4px)) scale(1.06);
      opacity: 1;
      z-index: 4;
    }
    /* 25% = direita/meio */
    25% {
      transform: translate(calc(-50% + 132px), calc(-50% + 10px)) scale(0.86);
      opacity: 0.92;
      z-index: 3;
    }
    /* 50% = fundo/centro (menor, recuado pra dar profundidade) */
    50% {
      transform: translate(-50%, calc(-50% + 30px)) scale(0.72);
      opacity: 0.78;
      z-index: 1;
    }
    /* 75% = esquerda/meio */
    75% {
      transform: translate(calc(-50% - 132px), calc(-50% + 10px)) scale(0.86);
      opacity: 0.92;
      z-index: 3;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .ap-ai-card { animation: none; }
    .ap-ai-card--triagi { transform: translate(-50%, calc(-50% - 4px)) scale(1.06); z-index: 4; }
    .ap-ai-card--gemini { transform: translate(calc(-50% - 132px), calc(-50% + 10px)) scale(0.86); opacity: 0.92; z-index: 3; }
    .ap-ai-card--gpt    { transform: translate(-50%, calc(-50% + 30px)) scale(0.72); opacity: 0.78; z-index: 1; }
    .ap-ai-card--claude { transform: translate(calc(-50% + 132px), calc(-50% + 10px)) scale(0.86); opacity: 0.92; z-index: 3; }
  }

  .ap-ai-logo {
    display: block;
    width: auto;
    height: clamp(30px, 3.4vw, 40px);
    max-width: 72%;
    object-fit: contain;
  }
  /* o mark da Triagi e compacto (so o simbolo), entao pesa menos que os
     wordmarks — sobe um tiquinho a altura pra equilibrar visualmente. */
  .ap-ai-logo--triagi {
    height: clamp(48px, 5.6vw, 62px);
    max-width: 80%;
    margin-top: 2px;
  }
  .ap-ai-card strong {
    color: #fff;
    font-family: var(--font-display);
    font-size: clamp(16px, 1.5vw, 20px);
    font-weight: 390;
    letter-spacing: -0.034em;
    line-height: 1;
  }
  .ap-ai-role {
    color: rgba(255,255,255,0.56);
    font-size: clamp(12px, 1vw, 14px);
    line-height: 1.3;
    letter-spacing: -0.016em;
    max-width: 13ch;
  }
  @media (max-width: 900px) {
    .ap-ai-panel {
      grid-template-columns: 1fr;
      min-height: 0;
      gap: clamp(30px, 8vw, 44px);
      padding: clamp(28px, 7vw, 40px);
      border-radius: 30px;
    }
    .ap-ai-copy { max-width: 100%; text-align: left; }
    .ap-ai-copy .ap-h2 { max-width: 13ch; }
    .ap-ai-copy .ap-sub { max-width: 34em; }
    .ap-ai-board { width: 100%; max-width: 420px; margin: 0 auto; gap: clamp(24px, 7vw, 36px); }
    .ap-ai-row { height: clamp(176px, 52vw, 208px); }
    .ap-ai-card {
      width: clamp(96px, 27vw, 120px);
      height: clamp(140px, 40vw, 164px);
    }
    .ap-ai-logo { height: clamp(28px, 7.5vw, 36px); }
    .ap-ai-logo--triagi { height: clamp(34px, 9vw, 44px); }
    @keyframes ap-ai-orbit {
      0%, 100% {
        transform: translate(-50%, calc(-50% - 6px)) scale(1.0);
        opacity: 1; z-index: 4;
      }
      25% {
        transform: translate(calc(-50% + 104px), calc(-50% + 8px)) scale(0.72);
        opacity: 0.78; z-index: 3;
      }
      50% {
        transform: translate(-50%, calc(-50% + 26px)) scale(0.6);
        opacity: 0.6; z-index: 1;
      }
      75% {
        transform: translate(calc(-50% - 104px), calc(-50% + 8px)) scale(0.72);
        opacity: 0.78; z-index: 3;
      }
    }
  }

  /* ── SECTION: contexto / memória (Ela já conhece o paciente) ── */
  #contexto {
    /* CONTROLES DO CONTEXTO - DESKTOP
       x = move para os lados: negativo vai para a esquerda, positivo vai para a direita.
       y = move para cima/baixo: negativo sobe, positivo desce.
       scale = tamanho: 1 mantem, 1.08 aumenta 8%, 0.94 diminui 6%.
    */

    /* Elemento azul/reflexo central. */
    --mem-gem-x: 55px;
    --mem-gem-y: 0px;
    --mem-gem-scale: 1.23;

    /* Card da esquerda, com historico/memoria do paciente. */
    --mem-record-x: clamp(-75px, -7vw, -100px);
    --mem-record-y: -8px;
    --mem-record-scale: 1;

    /* Card da direita, com conversa/telefone. */
    --mem-phone-x: clamp(20px, 7vw, 76px);
    --mem-phone-y: -30px;
    --mem-phone-scale: 0.92;
  }
  .ap-mem-grid {
    display: grid;
    /* Desktop 50/50: metade titulo/copy, metade elementos visuais. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 5vw, 72px);
    margin-top: clamp(40px, 5vw, 72px);
  }
  .ap-mem-copy { max-width: 38em; margin: 0; text-align: left; }
  .ap-mem-copy .ap-sub { max-width: 30em; margin-left: 0; margin-right: 0; }
  .ap-mem-points {
    list-style: none;
    padding: 0;
    margin: clamp(22px, 3vw, 30px) 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  .ap-mem-points li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid var(--ap-line-2);
    background: rgba(255,255,255,0.62);
    font-size: 13px;
    font-weight: 560;
    letter-spacing: -0.006em;
    color: var(--ap-ink);
  }
  .ap-mem-points li i { font-size: 14px; color: var(--ap-accent); flex-shrink: 0; }

  /* stage: dois cards de vidro flutuando, com o elemento solto ao fundo */
  .ap-mem-stage {
    position: relative;
    display: grid;
    justify-items: center;
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    padding: clamp(40px, 7vw, 76px) 0;
  }
  /* elemento solto ao fundo — o centro AZUL fica atrás da sobreposição dos cards,
     pra refratar através do vidro translúcido */
  .ap-mem-gem {
    position: absolute;
    z-index: 0;
    width: clamp(280px, 44vw, 400px);
    top: 50%; left: 50%;
    transform: translate(calc(-50% + var(--mem-gem-x)), calc(-50% + var(--mem-gem-y))) scale(var(--mem-gem-scale));
    pointer-events: none;
    filter: drop-shadow(0 34px 60px rgba(12,32,68,0.24));
  }

  /* card de histórico: a memória que a Triagi consulta antes de responder */
  .ap-mem-record {
    position: relative;
    z-index: 3;
    width: min(80%, 264px);
    justify-self: center;
    transform: translate(var(--mem-record-x), var(--mem-record-y)) scale(var(--mem-record-scale));
    padding: 13px 14px 14px;
    border-radius: 17px;
    background:
      linear-gradient(150deg, rgba(255,255,255,0.52), rgba(255,255,255,0.34));
    border: 1px solid rgba(255,255,255,0.78);
    box-shadow:
      0 22px 48px -20px rgba(14,38,78,0.28),
      inset 0 1px 0 rgba(255,255,255,0.85);
    backdrop-filter: blur(12px) saturate(145%);
    -webkit-backdrop-filter: blur(12px) saturate(145%);
  }
  .ap-mem-note {
    display: flex; align-items: flex-start; gap: 7px;
    margin-top: 11px; padding-top: 10px;
    border-top: 1px solid var(--ap-line);
    font-size: 11px; line-height: 1.32; letter-spacing: -0.006em;
    color: var(--ap-ink);
  }
  .ap-mem-note i { font-size: 13px; color: var(--ap-accent); flex-shrink: 0; margin-top: 1px; }
  .ap-mem-rec-kicker {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 11px;
    font-size: 10px; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--ap-accent);
  }
  .ap-mem-rec-kicker i { font-size: 13px; }
  .ap-mem-rec-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
  .ap-mem-ava {
    width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.16);
  }
  .ap-mem-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ap-mem-id { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
  .ap-mem-id strong { font-size: 13.5px; font-weight: 650; color: var(--ap-ink); letter-spacing: -0.01em; }
  .ap-mem-id span { font-size: 10.5px; color: var(--ap-ink-2); font-weight: 500; }
  .ap-mem-rows { display: grid; gap: 8px; }
  .ap-mem-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: 11.5px; letter-spacing: -0.006em;
  }
  .ap-mem-row span { color: var(--ap-ink-2); font-weight: 500; }
  .ap-mem-row strong { color: var(--ap-ink); font-weight: 600; }
  .ap-mem-row + .ap-mem-row { border-top: 1px solid var(--ap-line); padding-top: 8px; }

  /* chat: a Triagi responde já com o contexto — mesmo vidro claro do card de histórico */
  .ap-mem-phone {
    position: relative;
    z-index: 2;
    width: min(84%, 304px);
    justify-self: center;
    transform: translate(var(--mem-phone-x), var(--mem-phone-y)) scale(var(--mem-phone-scale));
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 16px 14px 15px;
    border-radius: 20px;
    background:
      linear-gradient(150deg, rgba(255,255,255,0.48), rgba(255,255,255,0.30));
    border: 1px solid rgba(255,255,255,0.74);
    box-shadow:
      0 26px 54px -22px rgba(14,38,78,0.32),
      inset 0 1px 0 rgba(255,255,255,0.85);
    backdrop-filter: blur(12px) saturate(145%);
    -webkit-backdrop-filter: blur(12px) saturate(145%);
  }
  /* bolhas: deixa o vidro do card aparecer (sem fundo escuro do hum-phone) */
  .ap-mem-phone .hum-bubble { font-size: 11.5px; box-shadow: 0 4px 12px rgba(14,38,78,0.10); }
  /* bolha da Triagi: branco limpo (sem o tom esverdeado do hum-bubble padrão) */
  .ap-mem-phone .hum-bubble.ai {
    background:
      linear-gradient(145deg, rgba(255,255,255,0.97), rgba(248,250,253,0.92));
    border-color: rgba(255,255,255,0.7);
    color: #0c1620;
  }

  /* reveal sutil e único: os cards flutuam pra dentro */
  .ap-mem-record,
  .ap-mem-phone {
    opacity: 0;
    transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  }
  .ap-mem-record { transition-delay: 120ms; }
  .ap-mem-phone { transition-delay: 240ms; }
  /* preserva o deslocamento (refração) ao revelar — só anima opacity/blur de entrada */
  .ap-mem-record { transform: translate(var(--mem-record-x), calc(var(--mem-record-y) + 10px)) scale(var(--mem-record-scale)); }
  .ap-mem-phone  { transform: translate(var(--mem-phone-x), calc(var(--mem-phone-y) + 10px)) scale(var(--mem-phone-scale)); }
  .ap-mem-stage.in .ap-mem-record { transform: translate(var(--mem-record-x), var(--mem-record-y)) scale(var(--mem-record-scale)); opacity: 1; }
  .ap-mem-stage.in .ap-mem-phone  { transform: translate(var(--mem-phone-x), var(--mem-phone-y)) scale(var(--mem-phone-scale)); opacity: 1; }
  @media (prefers-reduced-motion: reduce) {
    .ap-mem-record { transition: none; opacity: 1; transform: translate(var(--mem-record-x), var(--mem-record-y)) scale(var(--mem-record-scale)); }
    .ap-mem-phone  { transition: none; opacity: 1; transform: translate(var(--mem-phone-x), var(--mem-phone-y)) scale(var(--mem-phone-scale)); }
  }

  @media (max-width: 600px) {
    #contexto {
      /* CONTROLES DO CONTEXTO - MOBILE
         Mesmo padrao do desktop, mas separado para celular.
         x: esquerda/direita | y: cima/baixo | scale: tamanho.
      */

      /* Elemento azul/reflexo central. */
      --mem-gem-x: 80px;
      --mem-gem-y: 0px;
      --mem-gem-scale: 1.4;

      /* Card da esquerda, com historico/memoria do paciente. */
      --mem-record-x: -40px;
      --mem-record-y: -14px;
      --mem-record-scale: 1;

      /* Card da direita, com conversa/telefone. */
      --mem-phone-x: 50px;
      --mem-phone-y: -40px;
      --mem-phone-scale: .92;
    }
    .ap-mem-grid { display: block; }
    .ap-mem-copy { margin: 0 auto; text-align: center; }
    .ap-mem-copy .ap-sub { margin-left: auto; margin-right: auto; }
    .ap-mem-stage { max-width: 400px; margin-top: clamp(40px, 5vw, 64px); padding: clamp(30px, 9vw, 48px) 0; }
    .ap-mem-gem { width: clamp(230px, 64vw, 300px); }
    .ap-mem-record { width: min(78%, 244px); }
    .ap-mem-phone  { width: min(82%, 280px); }
  }

  .reveal-fade {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
  }
  .reveal-fade.in {
    opacity: 1;
    transform: translateY(0);
  }

  /* MELISSA CRM CONTROLE FINAL: esta regra fica no fim do CSS para vencer conflitos.
     Edite os valores inline no próprio <div class="ap-melissa-kanban">. */
  .ap-melissa-card .ap-melissa-kanban {
    opacity: var(--crm-opacity, 0.86);
    background:
      radial-gradient(circle at 16% 18%, rgba(0,122,255,var(--crm-blue-glow, 0.035)), transparent 34%),
      linear-gradient(
        145deg,
        rgba(255,255,255,var(--crm-bg-top, 0.15)),
        rgba(255,255,255,var(--crm-bg-mid, 0.022)) 54%,
        rgba(255,255,255,var(--crm-bg-bottom, 0.050))
      ),
      rgba(255,255,255,var(--crm-bg-base, 0.014)) !important;
    border-color: rgba(255,255,255,var(--crm-border, 0.20)) !important;
    backdrop-filter: blur(var(--crm-blur, 24px)) saturate(var(--crm-saturate, 128%)) !important;
    -webkit-backdrop-filter: blur(var(--crm-blur, 24px)) saturate(var(--crm-saturate, 128%)) !important;
  }

  /* ═══════════════════════════════════════════════════════════
     T002 — CRITICAL above-the-fold extraído dos CSS agora async.
     Mantém ícones (nav/hero/sticky) e CTAs estilizados durante o
     carregamento async de phosphor + inspira. Fonte fiel:
       · vendor/phosphor/regular/style.css (@font-face + .ph + 3 glifos usados acima da dobra)
       · assets/components/inspira.css (.shimmer-btn base)
     Tokens (--ink/--r-pill/--ease-out) vêm de triagi.css, mantido síncrono.
     ═══════════════════════════════════════════════════════════ */
  @font-face {
    font-family: "Phosphor";
    src: url("/home-teste-assets/vendor/phosphor/regular/Phosphor.woff2?v=t003") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  .ph {
    font-family: "Phosphor" !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .ph.ph-arrow-right:before { content: "\e06c"; }
  .ph.ph-arrow-up-right:before { content: "\e092"; }
  .ph.ph-x:before { content: "\e4f6"; }

  .shimmer-btn {
    --shimmer-color: rgba(255,255,255,0.92);
    --shimmer-cut: 0.05em;
    --shimmer-speed: 3s;
    --shimmer-bg: var(--ink);
    position: relative;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 28px;
    border-radius: var(--r-pill);
    border: 1px solid rgba(255,255,255,0.10);
    color: white;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
    white-space: nowrap;
    background: var(--shimmer-bg);
    overflow: hidden;
    transform: translateZ(0);
    transition: transform 300ms var(--ease-out);
  }
  .shimmer-btn:active { transform: translateY(1px); }
  .shimmer-btn .ph { font-size: 17px; transition: transform 240ms var(--ease-out); }
  .shimmer-btn:hover .ph { transform: translateX(3px); }
  .shimmer-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--shimmer-bg);
    margin: var(--shimmer-cut);
  }
  .shimmer-btn::after {
    content: "";
    position: absolute;
    inset: -100%;
    z-index: -2;
    background: conic-gradient(from 0deg,
      transparent 0deg,
      var(--shimmer-color) 60deg,
      transparent 120deg,
      transparent 240deg,
      var(--shimmer-color) 300deg,
      transparent 360deg);
    animation: shimmer-spin var(--shimmer-speed) linear infinite;
    opacity: 0.85;
    filter: blur(1px);
  }
  @keyframes shimmer-spin { to { transform: rotate(360deg); } }

  /* T004 — render-delay: adia paint/layout das secoes ABAIXO DA DOBRA.
     content-visibility:auto so pula o que esta FORA do viewport (renderiza ao chegar perto);
     o conteudo continua no DOM -> find-in-page, leitor de tela e SEO intactos (nao e display:none).
     contain-intrinsic-size 'auto 700px' = placeholder ate o 1o render; o 'auto' lembra a altura
     real depois (anti-CLS). Progressive enhancement: browser sem suporte ignora e renderiza normal.
     EXCLUIDOS de proposito: .ap-hero (elemento do LCP, above-fold) e #equipe (scroll-sync que mede posicoes). */
  #humanizacao, #contexto, #especialidades, #porte, #inteligencia-certa,
  #jornada, #cta, #migrar, #cases, #preco, #whatsapp-oficial, .ap-faq {
    content-visibility: auto;
    contain-intrinsic-size: auto 700px;
  }