/* ============================================================
     Playbook Squad — Confeitarias · Stylesheet
     ------------------------------------------------------------
     TABLE OF CONTENTS
       1. Design tokens (:root) & base resets
       2. App shell & sidebar navigation
       3. Mobile header
       4. Content, sections & shared building blocks
       5. iPhone mockup
       6. Spotlight (CTA focus)
       7. Overview screen (hero, timeline, CTA, footer)
       8. Wizard (guided agent training overlay)
       9. Product examples list
      10. Integration hero (Etapa 3)
      11. Glow buttons
      12. Testimonial cards & overlay
      13. Catalog tutorial (situation question + steps)
      14. Training flow explorer
     ============================================================ */

  :root {
    --bg: #FFFFFF;
    --bg-2: #F9FAFB;
    --bg-3: #F3F4F6;
    --line: #E5E7EB;
    --line-2: #EEF0F3;
    --ink: #111827;
    --ink-2: #6B7280;
    --ink-3: #9CA3AF;

    --maky: #E91E8C;
    --waz:  #2DB67D;
    --fin:  #2563EB;

    --sidebar-w: 280px;
    --content-max: 720px;
    --r: 12px;
  }

  /* Registra um custom-property tipado para que o ângulo do conic-gradient
     usado no glow animado dos step-cards possa ser *interpolado* pela
     engine de animação. Sem @property o browser trata var() como string
     opaca e a animação fica em 0deg eterno. Inherits=true para que os
     pseudo-elementos consumam o valor que o .step-card está animando. */
  @property --step-glow-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: true;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; overflow-x: clip; }
  body {
    margin: 0;
    font-family: 'Fustat', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--ink);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip; /* personagens espiando não geram scroll horizontal */
  }
  a { color: inherit; }
  button { font: inherit; cursor: pointer; }
  h1, h2, h3, h4 { margin: 0; font-family: 'Fustat', sans-serif; letter-spacing: -0.02em; }
  p { margin: 0; }
  code { font-family: 'Fustat', ui-monospace, monospace; }

  /* ---------- App shell ---------- */
  .app {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100vh;
    position: relative; /* âncora pro waz-peek */
  }
  @media (max-width: 900px) {
    .app { grid-template-columns: 1fr; }
  }

  /* ---------- Sidebar (desktop) ---------- */
  .sidebar {
    border-right: 1px solid var(--line);
    background: #f0f0f0;
    position: sticky; top: 0;
    height: 100vh;
    padding: 28px 18px 24px;
    display: flex; flex-direction: column;
    overflow-y: auto;
  }
  .sidebar .brand {
    display: flex; align-items: center; gap: 8px;
    font-weight: 700; letter-spacing: -0.04em; font-size: 18px;
    padding: 0 10px 8px;
    text-decoration: none; color: var(--ink);
  }
  .sidebar .brand-sub {
    padding: 0 10px;
    font-family: 'Fustat', monospace;
    font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-3); margin-bottom: 22px;
  }
  .sidebar .label {
    padding: 0 12px;
    font-family: 'Fustat', monospace;
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-3); font-weight: 500;
    margin: 20px 0 8px;
  }
  .nav-link {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none; color: var(--ink-2);
    font-size: 14px; font-weight: 500;
    line-height: 1.4;
    border-left: 2px solid transparent;
    margin-left: -2px;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
  }
  .nav-link .ico {
    width: 18px; height: 18px; display: inline-flex;
    align-items: center; justify-content: center;
    color: var(--ink-3); flex: none;
  }
  .nav-link:hover { background: var(--bg-2); color: var(--ink); }
  .nav-link.active {
    color: var(--ink); background: var(--bg-2);
    border-left-color: var(--ink);
  }
  .nav-link.active .ico { color: var(--ink); }

  /* ---------- Sidebar subsections (Etapa 03 / 04) ---------- */
  .nav-subsections {
    list-style: none;
    margin: 2px 0 4px;
    padding: 0;
    padding-left: 26px;            /* recuo sob o link da etapa */
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .nav-subsections a {
    display: block;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--ink-3);
    text-decoration: none;
    border-left: 2px solid transparent;
    margin-left: -2px;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
  }
  .nav-subsections a:hover { color: var(--ink-2); background: var(--bg-2); }
  .nav-subsections a.active {
    color: var(--ink);
    font-weight: 500;
    border-left-color: var(--ink);
  }

  .nav-link.featured { font-weight: 600; color: var(--ink); font-size: 14px; }
  .nav-link.featured.active {
    border-left-width: 3px;
    margin-left: -3px;
  }

  /* ---------- Nav group (sub-navegação de etapas) ---------- */
  .nav-group { margin-bottom: 8px; }
  .nav-group .nav-link.featured {
    display: flex; align-items: center; gap: 10px;
  }
  .nav-subs {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 34px;
    padding-top: 4px;
    padding-bottom: 4px;
    margin-top: 2px;
  }
  .nav-sub {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 8px 12px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    color: var(--ink-3);
    line-height: 1.35;
    transition: color .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
    border-left: 2px solid transparent;
    margin-left: -2px;
  }
  .nav-sub:hover { color: var(--ink-2); }
  .nav-sub-status {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background .2s ease, border-color .2s ease;
  }
  .nav-sub-status[data-status="empty"] {
    background: transparent;
    border: 1.5px solid #C4C9D1;
  }
  .nav-sub-name {
    flex: 1;
    min-width: 0;
    white-space: normal;
    line-height: 1.35;
  }
  .nav-sub.is-viewing {
    color: var(--ink);
    font-weight: 500;
    border-left-color: var(--ink);
    background: transparent;
  }

  .stage[id] { scroll-margin-top: 100px; }
  @media (max-width: 900px) {
    .stage[id] { scroll-margin-top: 140px; }
  }


  /* ---------- Mobile header ---------- */
  .mobile-header { display: none; }
  @media (max-width: 900px) {
    .sidebar { display: none; }
    .mobile-header {
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px;
      position: sticky; top: 0; z-index: 30;
      background: rgba(255,255,255,.92);
      backdrop-filter: saturate(140%) blur(10px);
      border-bottom: 1px solid var(--line);
      padding: 12px 16px;
    }
    .mobile-header .brand {
      display: inline-flex; align-items: center; gap: 8px;
      font-weight: 700; letter-spacing: -0.04em; font-size: 16px;
      text-decoration: none; color: var(--ink);
    }
    .mobile-header select {
      font: inherit; font-size: 14px;
      background: var(--bg-2); border: 1px solid var(--line);
      border-radius: 8px; padding: 8px 10px;
      color: var(--ink);
    }
    /* Respiro entre o mobile-header (sticky) e o início do conteúdo
       (section-eyebrow / h1 da etapa) — sem isso ficavam quase colados. */
    .mobile-header + .doc {
      margin-top: 20px;
    }
  }

  /* ---------- Content ---------- */
  .content {
    padding: 36px clamp(20px, 5vw, 56px) 96px;
    min-width: 0;
  }
  .doc { max-width: var(--content-max); margin: 0 auto; }

  .badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    background: var(--bg-2); border: 1px solid var(--line);
    font-family: 'Fustat', monospace;
    font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ink-2);
  }
  .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--maky); }


  /* Section */
  .section {
    margin-top: 64px; padding-top: 4px;
    scroll-margin-top: 24px;
  }
  @media (max-width: 900px) { .section { scroll-margin-top: 72px; } }
  .section-eyebrow {
    font-family: 'Fustat', monospace;
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-3); margin-bottom: 10px;
  }
  .section h2 {
    font-size: clamp(24px, 3vw, 30px); font-weight: 700;
    letter-spacing: -0.025em; line-height: 1.15;
  }
  .section .sub {
    margin-top: 10px; color: var(--ink-2); font-size: 17px; max-width: 62ch;
  }

  /* Block (card) */
  .block {
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 22px;
    background: var(--bg);
  }
  .block + .block { margin-top: 14px; }
  .block p + p { margin-top: 10px; }
  .block p { color: var(--ink-2); }
  .block strong { color: var(--ink); font-weight: 600; }


  .btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;     /* pill shape — padrão de TODOS os botões */
    text-decoration: none;
    font-size: 14px; font-weight: 500;
    background: var(--ink); color: #fff;
    border: 1px solid var(--ink);
    min-height: 40px;
    transition: background .15s ease;
  }
  .btn:hover { background: #000; }
  .btn .arr { transition: transform .2s ease; }
  .btn:hover .arr { transform: translateX(2px); }

  /* Setup checklist */
  /* Cada etapa é uma .page isolada — sem margens/bordas herdadas do layout de scroll. */
  .stage { margin-top: 0; }

  .check-block {
    padding: 0;
    margin-top: 14px;
    background: var(--bg);
  }
  .task {
    padding: 16px 18px;
    border-bottom: 1px solid var(--line-2);
  }
  .task:last-child { border-bottom: none; }
  .task-row {
    display: grid; grid-template-columns: auto 1fr auto; gap: 12px;
    align-items: start;
  }
  .checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 20px; height: 20px;
    border: 1.5px solid var(--ink-3); border-radius: 5px;
    background: var(--bg);
    cursor: pointer;
    position: relative;
    margin-top: 2px;
    flex: none;
    transition: background .15s ease, border-color .15s ease;
  }
  .checkbox:hover { border-color: var(--ink); }
  .checkbox:checked { background: var(--ink); border-color: var(--ink); }
  .checkbox:checked::after {
    content: "";
    position: absolute; left: 5px; top: 1px;
    width: 6px; height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
  .task-text {
    font-size: 15.5px; font-weight: 500; color: var(--ink); cursor: pointer;
    line-height: 1.5;
    transition: opacity .2s ease;
  }
  .task input:checked ~ .task-main .task-text {
    opacity: .55;
    text-decoration: line-through;
    text-decoration-color: var(--ink-3);
  }
  .task-main { min-width: 0; }
  .task .meta {
    font-family: 'Fustat', monospace; font-size: 11px; color: var(--ink-3);
    letter-spacing: .06em; margin-top: 2px;
  }
  .details-inner { padding-top: 10px; }
  .details p { color: var(--ink-2); font-size: 15px; }
  /* iPhone mockup */
  .phone { 
    position: relative;
    width: 201px;
    aspect-ratio: 9 / 19.5;
    border-radius: 36px;
    background: #111;
    padding: 8px;
    flex: none;
    box-shadow: 0 0 0 1px rgba(0,0,0,.04);
    margin-top: 12px;
  }
  .phone-screen {
    width: 100%; height: 100%;
    background: var(--bg-3);
    border-radius: 28px;
    position: relative;
    overflow: hidden;
    display: flex; flex-direction: column;
  }
  .phone-status {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 16px 6px;
    font-size: 11px; font-weight: 600; color: var(--ink);
  }
  .phone-status .icons { display: inline-flex; gap: 4px; align-items: center; color: var(--ink); }
  .phone-status .icons svg { width: 12px; height: 12px; }
  .phone-notch {
    position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
    width: 68px; height: 15px;
    background: #111; border-radius: 999px;
    z-index: 2;
  }
  .phone-body {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 24px 18px;
    text-align: center;
    gap: 10px;
  }
  .phone-body.has-shot { padding: 0; gap: 0; }
  .phone-shot {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
  }
  /* Esconde o status bar fake quando o screenshot já traz o seu próprio */
  .phone-screen:has(.phone-shot) .phone-status { display: none; }

  .task-phone-wrap {
    margin-top: 14px;
    display: flex; justify-content: flex-start;
  }

  /* Callout */
  .callout {
    margin-top: 14px;
    border-left: 3px solid var(--ink);
    background: var(--bg-2);
    padding: 14px 16px;
    border-radius: 0 8px 8px 0;
    font-size: 14.5px;
    color: var(--ink);
    line-height: 1.55;
    display: flex; gap: 10px;
  }
  .callout .ico { flex: none; }
  .callout.waz  { border-left-color: var(--waz); }

  /* FAQ */
  .faq-list {
    border-top: 1px solid var(--line);
    margin-top: 22px;
  }
  .faq {
    border-bottom: 1px solid var(--line);
    /* Permite que `block-size: auto` seja interpolado em transitions.
       Sem isto a transição block-size 0 → auto não anima — fica salto. */
    interpolate-size: allow-keywords;
  }
  .faq summary {
    list-style: none; cursor: pointer;
    display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
    padding: 18px 4px;
    font-size: 16px; font-weight: 500; color: var(--ink);
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq .chev {
    width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
    /* easing alinhado ao do conteúdo abaixo para chev e caixa terminarem juntos */
    color: var(--ink-3); transition: transform .32s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .faq[open] .chev { transform: rotate(180deg); color: var(--ink); }
  .faq-a {
    padding: 0 4px 18px; color: var(--ink-2); font-size: 15px; line-height: 1.6;
    max-width: 64ch;
  }

  /* Animação suave de expandir/colapsar via `::details-content`
     (Chrome 131+, Safari 18.2+). Browsers sem suporte ignoram o pseudo
     e o <details> volta a abrir/fechar instantaneamente — degradação OK.
     `content-visibility` é `allow-discrete` para o pseudo participar da
     transição mesmo sendo uma propriedade não-interpolável por natureza. */
  .faq::details-content {
    block-size: 0;
    opacity: 0;
    overflow: clip;
    transition:
      block-size .32s cubic-bezier(0.32, 0.72, 0, 1),
      opacity .22s ease-out,
      content-visibility .32s allow-discrete;
  }
  .faq[open]::details-content {
    block-size: auto;
    opacity: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .faq .chev,
    .faq::details-content { transition: none; }
  }

  /* Helpers */
  .hidden { display: none; }

  @media (min-width: 720px) {
    .task-row.with-phone {
      grid-template-columns: auto 1fr 220px;
      gap: 16px 18px;
    }
    .task-row.with-phone .task-phone-wrap {
      grid-column: 3;
      grid-row: 1 / span 2;
      margin-top: 0;
      justify-content: flex-end;
    }
    .task-row.with-phone .phone { margin-top: 0; }
  }

  /* Phone toggle button: oculto no desktop por padrão */
  .phone-toggle { display: none; }

  /* Brand (logo): agora é uma imagem (squad.png — wordmark completo).
     Antes era um "dot" gradiente + texto "squad.com" em sans-serif.
     Tamanhos contextuais ficam abaixo, em cada uso de .brand. */
  .brand { transition: opacity .15s ease; display: inline-flex; align-items: center; }
  .brand:hover { opacity: .7; }
  .brand .brand-logo {
    display: block;
    width: auto;
    /* tamanho default; sobrescrito por contexto (sidebar/mobile/ov-nav) */
    height: 20px;
    object-fit: contain;
    /* O squad.png tem fundo branco. multiply faz branco × qualquer-cor = a-cor-de-baixo,
       então o fundo do PNG "vira" o background do container (#f0f0f0 no sidebar,
       branco no mobile-header e na hero — onde fica no-op visual). O traço preto do
       wordmark é preservado (preto × X = preto). */
    mix-blend-mode: multiply;
  }
  /* Tamanhos por contexto — proporcionais ao font-size que estava em cada .brand */
  .sidebar       .brand .brand-logo { height: 22px; }
  .mobile-header .brand .brand-logo { height: 18px; }
  .ov-nav        .brand .brand-logo { height: 24px; }

  /* ---------- Mobile: phone mockup escondido com toggle ---------- */
  @media (max-width: 900px) {
    .task-row.with-phone {
      grid-template-columns: auto 1fr;
    }
    .task-row.with-phone .task-phone-wrap {
      display: none;
    }
    .task-row.with-phone.phone-visible {
      grid-template-rows: auto auto;
    }
    .task-row.with-phone.phone-visible .task-phone-wrap {
      display: flex;
      grid-column: 1 / -1;
      justify-content: center;
      margin-top: 14px;
      animation: phoneSlideDown .3s ease both;
    }
    .task-row.with-phone.phone-visible .phone {
      width: 180px;
      max-width: 60vw;
      margin-top: 0;
    }
    @keyframes phoneSlideDown {
      from { opacity: 0; transform: translateY(-8px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .phone-toggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 500;
      color: var(--ink-3);
      background: none;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 5px 10px;
      cursor: pointer;
      margin-top: 10px;
      transition: color .2s ease, border-color .2s ease;
    }
    .phone-toggle:hover {
      color: var(--ink-2);
      border-color: var(--ink-3);
    }
    .phone-toggle .toggle-icon {
      width: 14px; height: 14px;
      transition: transform .2s ease;
    }
    .phone-toggle.is-open {
      color: var(--ink-2);
      border-color: var(--ink-3);
    }
    .phone-toggle.is-open .toggle-icon {
      transform: rotate(180deg);
    }
  }


  /* ============ Overview screen (home.html) ============ */
  .overview {
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    padding: 28px clamp(20px, 5vw, 56px) 96px;
    position: relative;
    overflow-x: hidden;
  }
  .ov-shell {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
  }

  .ov-nav {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 5px;
  }
  .ov-nav .brand {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 700; letter-spacing: -0.04em; font-size: 20px;
    color: var(--ink); text-decoration: none;
  }

  /* Hero em 2 colunas: imagem dos agentes à esquerda, conteúdo à direita.
     (Antes era uma coluna só, centralizada.) */
  .ov-hero {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.3fr);
    align-items: center;
    gap: clamp(24px, 5vw, 64px);
    max-width: 1100px;
    margin: 0 auto clamp(56px, 9vw, 96px);
    padding: 10px 0 40px;
    text-align: left;
  }
  /* Coluna esquerda — imagem dos agentes */
  .ov-hero-media img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 510px;
  }
  /* Coluna direita — todo o conteúdo que já existia */
  .ov-hero-content { min-width: 0; }
  /* No layout lado a lado, a timeline fica alinhada à esquerda e ocupa a coluna */
  .ov-hero .ov-timeline {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    justify-content: flex-start;
  }

  /* Telas estreitas (≤ 820px): hero empilha vertical — imagem CENTRALIZADA
     acima, e o conteúdo abaixo com tudo ALINHADO À ESQUERDA (título,
     subtítulo, timeline, botão). Layout simples, sem grid-areas. */
  @media (max-width: 820px) {
    .ov-hero {
      grid-template-columns: 1fr;
      text-align: left;
      gap: 16px;
      padding: 24px 0;
    }
    .ov-hero-media img {
      max-width: 220px;
      height: auto;
      margin: 0 auto;              /* imagem centralizada */
      display: block;
    }
    .ov-hero .ov-timeline {
      margin-left: 0;
      margin-right: auto;
      justify-content: flex-start;
      max-width: 560px;
    }
    /* Título 3–4px menor no mobile. Especificidade .ov-hero .ov-title vence
       a regra global em linha ~861. */
    .ov-hero .ov-title {
      font-size: clamp(32px, 5vw, 33px);
    }
  }
  /* Mobile real (≤ 480px): imagem um pouco menor pra economizar viewport */
  @media (max-width: 480px) {
    .ov-hero-media img { max-width: 180px; }
  }

  /* ---------- Overview timeline ---------- */
  .ov-timeline {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin: 32px auto 24px;
    width: 100%;
    max-width: 560px;
  }
  .ov-timeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 0 0 150px;
    width: 150px;
    text-align: center;
  }
  .ov-timeline-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--line);
    background: var(--bg);
    transition: all 0.3s ease;
  }
  .ov-timeline-step.is-done .ov-timeline-dot {
    background: var(--waz);
    border-color: transparent;
  }
  .ov-timeline-step.is-current .ov-timeline-dot {
    background: linear-gradient(135deg, #E91E8C, #8B5CF6, #2563EB, #2DB67D);
    border-color: transparent;
    box-shadow: 0 0 0 4px rgba(139,92,246,0.16), 0 2px 10px rgba(233,30,140,0.30);
    animation: dot-pulse 2s ease-in-out infinite;
  }
  @keyframes dot-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(139,92,246,0.16), 0 2px 10px rgba(233,30,140,0.30); }
    50%      { box-shadow: 0 0 0 8px rgba(139,92,246,0.08), 0 2px 14px rgba(233,30,140,0.20); }
  }
  @media (prefers-reduced-motion: reduce) {
    .ov-timeline-step.is-current .ov-timeline-dot { animation: none; }
  }
  .ov-timeline-step.is-future .ov-timeline-dot {
    border-color: var(--line);
    background: var(--bg);
  }
  .ov-timeline-line {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, #E91E8C, #8B5CF6, #2563EB, #2DB67D);
    border-radius: 999px;
    /* margens negativas estendem a linha em direção aos dots (menos espaço em branco) */
    margin: 6px -28px 0;
    min-width: 40px;
  }
  /* A linha após o passo atual (entre "Playbook" e "Call") ainda não foi percorrida */
  .ov-timeline-step.is-current + .ov-timeline-line {
    background: var(--line);
  }
  .ov-timeline-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
  .ov-timeline-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-3);
  }
  .ov-timeline-step.is-current .ov-timeline-title { color: var(--ink); }
  .ov-timeline-step.is-done .ov-timeline-title { color: var(--waz); }
  .ov-timeline-sub {
    font-size: 11px;
    color: var(--ink-3);
  }
  .ov-timeline-step.is-current .ov-timeline-sub {
    color: var(--ink);
    font-weight: 500;
  }
  .ov-timeline-step.is-done .ov-timeline-sub { color: var(--waz); }

  /* ---------- Overview meta ---------- */

  @media (max-width: 640px) {
    .ov-timeline {
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
      max-width: 300px;
    }
    /* Step vira horizontal (dot à esquerda, label à direita) e ganha um
       padding-bottom que vira o "trilho" da linha conectando ao próximo dot. */
    .ov-timeline-step {
      flex-direction: row;
      gap: 14px;
      flex: 0 0 auto;
      width: 100%;
      text-align: left;
      align-items: flex-start;
      position: relative;
      padding-bottom: 22px;            /* espaço pra linha respirar */
    }
    /* Linha vertical via pseudo, ancorada no DOT (não na altura do label).
       `left: 6px` = centro do dot (14px/2). Estende do fim do dot até o
       começo do próximo step, garantindo conexão visual real. */
    .ov-timeline-step:not(:last-child)::after {
      content: '';
      position: absolute;
      left: 6px;
      top: 18px;                       /* abaixo do dot (14px + 4 de respiro) */
      bottom: 0;
      width: 2px;
      background: var(--line);
      border-radius: 999px;
    }
    /* Linha do "is-done" usa o verde — já foi percorrida */
    .ov-timeline-step.is-done::after {
      background: var(--waz);
    }
    /* A <div class="ov-timeline-line"> separadora some no mobile —
       agora a conexão é o pseudo acima. */
    .ov-timeline-line {
      display: none;
    }
    .ov-timeline-label {
      align-items: flex-start;
    }
    .ov-timeline-dot {
      flex: 0 0 auto;                  /* dot não encolhe quando o label é longo */
    }
  }

  .ov-eyebrow {
    font-family: 'Fustat', monospace;
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-3);
    display: inline-flex; align-items: center; gap: 8px;
    margin-bottom: 22px;
  }
  
  .ov-title {
    font-size: clamp(36px, 5.4vw, 60px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.02;
    margin: 0;
  }
  .ov-title .accent-stripe {
    background-image: linear-gradient(90deg, var(--maky), var(--waz) 50%, var(--fin));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .ov-lede {
    margin-top: 22px;
    font-size: clamp(17px, 1.8vw, 19px);
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 56ch;
  }

  .ov-section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-bottom: 26px;
  }
  .ov-section-head h2 {
    font-size: clamp(26px, 3.4vw, 34px);
    font-weight: 700; letter-spacing: -0.025em; line-height: 1.1;
  }
  .ov-section-head p { color: var(--ink-2); max-width: 40ch; font-size: 15px; }

  /* CTA */
  .ov-cta {
    border: 1px solid var(--line);
    border-radius: 18px;
    background:
      radial-gradient(80% 80% at 10% 0%, color-mix(in oklab, var(--maky) 6%, transparent), transparent 55%),
      radial-gradient(80% 80% at 100% 100%, color-mix(in oklab, var(--fin) 6%, transparent), transparent 55%),
      var(--bg);
    padding: clamp(32px, 5vw, 56px);
    text-align: left;
  }
  .ov-cta h2 {
    font-size: clamp(26px, 3.4vw, 34px);
    font-weight: 700; letter-spacing: -0.025em; line-height: 1.1;
    /* 45ch comporta "Pronto pra colocar sua equipe pra trabalhar?" numa linha
       só em desktop. Em telas estreitas o limite real vira o próprio container
       e o texto quebra naturalmente — sem overflow. */
    max-width: 45ch;
  }
  .ov-cta p {
    margin-top: 14px;
    color: var(--ink-2);
    font-size: 16px; line-height: 1.55;
    max-width: 52ch;
  }
  .ov-cta-action { margin-top: 28px; }

  /* CTA gigante do fim da home — quase do tamanho do bloco .ov-cta */
  #start-setup {
    width: 100%;
    padding: clamp(32px, 5vw, 52px);
    border-radius: 16px;
  }
  #start-setup .btn-glow-content {
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 700;
    gap: 14px;
  }
  #start-setup .btn-glow-content svg {
    width: clamp(20px, 2.4vw, 28px);
    height: clamp(20px, 2.4vw, 28px);
  }

  .ov-foot {
    margin-top: 56px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    color: var(--ink-3); font-size: 13px;
  }

  .back-link { color: var(--ink-2) !important; }
  .back-link:hover { color: var(--ink) !important; background: var(--bg-2); }

  /* ---------- Training eyebrow (retido: usado no integration-hero da Etapa 03) ---------- */
  .training-eyebrow {
    display: block;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 12px;
    font-family: 'Fustat', monospace;
  }

  /* ---------- Wizard (treinamento guiado, full-screen overlay) ---------- */
  .wizard {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background:
      radial-gradient(ellipse 55% 45% at 5% 8%, rgba(233, 30, 140, 0.08) 0%, transparent 65%),
      radial-gradient(ellipse 45% 50% at 95% 90%, rgba(37, 99, 235, 0.07) 0%, transparent 65%),
      radial-gradient(ellipse 40% 40% at 90% 20%, rgba(45, 182, 125, 0.06) 0%, transparent 65%),
      radial-gradient(ellipse 38% 42% at 10% 95%, rgba(139, 92, 246, 0.05) 0%, transparent 65%),
      var(--bg);
    display: none;
    flex-direction: column;
    overflow: hidden;
  }
  body.in-wizard { overflow: hidden; }
  body.in-wizard .wizard { display: flex; animation: wizardIn .35s cubic-bezier(0.16, 1, 0.3, 1); }
  @keyframes wizardIn {
    from { opacity: 0; transform: scale(.985); }
    to   { opacity: 1; transform: none; }
  }

  .wizard-header {
    display: grid;
    grid-template-columns: 40px 1fr 80px;
    align-items: center;
    gap: 20px;
    padding: 20px clamp(20px, 5vw, 56px);
    border-bottom: 1px solid var(--line);
    background: rgba(255,255,255,.85);
    backdrop-filter: saturate(140%) blur(10px);
    flex-shrink: 0;
  }
  .wizard-close {
    appearance: none; background: none; border: none;
    width: 40px; height: 40px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink-2);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
  }
  .wizard-close:hover { background: var(--bg-2); color: var(--ink); }
  .wizard-close svg { width: 16px; height: 16px; }

  .wizard-progress {
    display: flex; align-items: center; gap: 12px;
    max-width: 480px; margin: 0 auto; width: 100%;
  }
  .wizard-progress-track {
    flex: 1;
    height: 3px;
    background: var(--line);
    border-radius: 999px;
    overflow: hidden;
  }
  .wizard-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--maky), var(--waz) 50%, var(--fin));
    border-radius: 999px;
    transition: width .4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .wizard-progress-text {
    font-family: 'Fustat', monospace;
    font-size: 12px;
    color: var(--ink-3);
    letter-spacing: .04em;
    white-space: nowrap;
  }

  .wizard-skip {
    appearance: none; background: none; border: none;
    font: inherit; font-size: 13px; font-weight: 500;
    color: var(--ink-3);
    cursor: pointer;
    justify-self: end;
    padding: 8px 12px;
    border-radius: 999px;
    transition: color .15s ease, background .15s ease;
  }
  .wizard-skip:hover { color: var(--ink-2); background: var(--bg-2); }

  .wizard-stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(24px, 6vh, 56px) clamp(20px, 5vw, 56px);
    overflow-y: auto;
  }
  .wizard-card {
    width: 100%;
    max-width: 620px;
    /* margin auto centraliza quando cabe, mas mantém o topo acessível
       (com scroll) quando o conteúdo é mais alto que a tela */
    margin: auto 0;
    transition: opacity .25s ease, transform .25s ease;
  }
  .wizard-card.is-leaving-forward { opacity: 0; transform: translateY(-10px); }
  .wizard-card.is-leaving-back { opacity: 0; transform: translateY(10px); }
  .wizard-card.is-entering-forward {
    animation: wizardSlideForward .35s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .wizard-card.is-entering-back {
    animation: wizardSlideBack .35s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  @keyframes wizardSlideForward {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes wizardSlideBack {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: none; }
  }

  .wizard-eyebrow {
    font-family: 'Fustat', monospace;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 18px;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .wizard-eyebrow::before {
    content: ""; width: 18px; height: 1px; background: var(--ink-3);
  }

  .wizard-q {
    font-size: clamp(24px, 3.4vw, 34px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    color: var(--ink);
    margin: 0 0 12px;
  }
  .wizard-hint {
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.5;
    margin: 0 0 28px;
    max-width: 56ch;
  }

  .wizard-input,
  .wizard-textarea {
    width: 100%;
    font: inherit;
    font-size: 17px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--bg);
    border: none;
    border-bottom: 2px solid var(--line);
    padding: 14px 0;
    outline: none;
    transition: border-color .2s ease;
    resize: none;
  }
  .wizard-input::placeholder,
  .wizard-textarea::placeholder { color: var(--ink-3); }
  .wizard-input:focus,
  .wizard-textarea:focus { border-bottom-color: var(--ink); }
  .wizard-textarea {
    min-height: 56px;
    max-height: 180px;
    overflow-y: auto;
    font-family: inherit;
  }

  /* Wizard options (single-choice, multi-choice, choice-with-followup) */
  .wizard-intro {
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.55;
    margin: 0 0 22px;
    max-width: 56ch;
    padding-left: 14px;
    border-left: 2px solid var(--line);
  }

  /* ---- Wizard: tela de transição entre partes ---- */
  .wizard-section-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 0;
    max-width: 480px;
  }
  .wizard-section-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-3);
    font-family: 'Fustat', monospace;
  }
  .wizard-section-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    line-height: 1.2;
  }
  .wizard-section-desc {
    font-size: 15px;
    color: var(--ink-2);
    margin: 0;
    line-height: 1.5;
  }
  .wizard-section-continue {
    margin-top: 8px;
    padding: 12px 24px;
    background: var(--ink);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .wizard-section-continue:hover {
    background: #333;
  }

  /* ---- Wizard: chips de sugestão rápida ---- */
  .wizard-examples {
    margin-top: 12px;
  }
  .wizard-examples-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-3);
    display: block;
    margin-bottom: 6px;
  }
  .wizard-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .wizard-chip {
    font-size: 12px;
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--bg);
    color: var(--ink-2);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    font-family: 'Fustat', sans-serif;
  }
  .wizard-chip:hover {
    border-color: var(--ink-3);
    background: var(--bg-2);
  }
  .wizard-chip.is-selected {
    border-color: var(--ink);
    background: var(--ink);
    color: white;
  }

  .wizard-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
  }
  /* Multi-choice com muitas opções: 2 colunas, mais enxuto */
  .wizard-options:has(.wizard-option.is-multi) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .wizard-options:has(.wizard-option.is-multi) .wizard-option {
    padding: 11px 14px;
    gap: 10px;
  }
  /* O campo "Outras" (textarea) ocupa a linha inteira */
  .wizard-options:has(.wizard-option.is-multi) .wizard-other {
    grid-column: 1 / -1;
  }
  @media (max-width: 560px) {
    .wizard-options:has(.wizard-option.is-multi) { grid-template-columns: 1fr; }
  }
  .wizard-option {
    appearance: none;
    background: var(--bg);
    border: 1.5px solid var(--line);
    border-radius: 12px;
    padding: 14px 18px;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: var(--ink);
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: border-color .15s ease, background .15s ease, transform .12s ease;
  }
  .wizard-option:hover {
    border-color: var(--ink-3);
    background: var(--bg-2);
  }
  .wizard-option:active { transform: scale(.995); }
  .wizard-option:focus-visible {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ink) 12%, transparent);
  }
  .wizard-option.is-selected {
    border-color: var(--ink);
    background: var(--bg);
  }
  .wizard-option-marker {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--ink-3);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;
    position: relative;
    transition: border-color .15s ease, background .15s ease;
  }
  .wizard-option.is-selected .wizard-option-marker {
    border-color: var(--ink);
    background: var(--ink);
  }
  .wizard-option.is-selected:not(.is-multi) .wizard-option-marker::after {
    content: '';
    position: absolute;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #fff;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
  }
  .wizard-option.is-multi .wizard-option-marker { border-radius: 5px; }
  .wizard-option.is-multi.is-selected .wizard-option-marker::after {
    content: '';
    position: absolute;
    left: 4px; top: 0;
    width: 5px; height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
  .wizard-option-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
  }
  .wizard-option-text strong {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
  }
  .wizard-option-text span {
    font-size: 13.5px;
    font-weight: 400;
    color: var(--ink-2);
    line-height: 1.4;
  }

  .wizard-followup, .wizard-other {
    padding: 4px 0 0 32px;
    margin-top: 4px;
    overflow: hidden;
    transition: opacity .2s ease, max-height .25s ease, margin-top .25s ease, padding-top .25s ease;
    max-height: 200px;
    opacity: 1;
  }
  .wizard-followup.is-hidden, .wizard-other.is-hidden {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    padding-top: 0;
    pointer-events: none;
  }
  .wizard-followup-hint {
    font-size: 13px;
    color: var(--ink-3);
    margin: 0 0 6px;
  }
  .wizard-followup-input { font-size: 16px; padding: 10px 0; }
  .wizard-other-input { font-size: 15px; padding: 10px 0; min-height: 44px; }

  .wizard-actions {
    margin-top: 32px;
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap;
  }
  .wizard-back {
    appearance: none;
    background: var(--bg);
    color: var(--ink-2);
    border: 1px solid var(--line);
    padding: 12px 18px;
    border-radius: 10px;
    font: inherit; font-size: 14px; font-weight: 500;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
  }
  .wizard-back:hover {
    background: var(--bg-2);
    color: var(--ink);
    border-color: var(--ink-3);
  }
  .wizard-back[disabled] { opacity: .35; cursor: not-allowed; }
  .wizard-actions-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }
  .wizard-next {
    appearance: none;
    background: var(--ink);
    color: #fff;
    border: 1px solid var(--ink);
    padding: 12px 22px;
    border-radius: 999px;
    font: inherit; font-size: 14px; font-weight: 600;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    transition: background .2s ease, transform .15s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
  }
  .wizard-next:hover:not(:disabled) {
    background: #000;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
  }
  .wizard-next:hover:not(:disabled) svg { transform: translateX(2px); }
  .wizard-next svg { transition: transform .15s ease; }
  .wizard-next:disabled {
    background: var(--line);
    color: var(--ink-3);
    border-color: var(--line);
    cursor: not-allowed;
    box-shadow: none;
  }
  .wizard-next:disabled svg { opacity: .5; }
  .wizard-next-skip {
    appearance: none;
    background: none;
    border: none;
    padding: 12px 14px;
    font: inherit; font-size: 13.5px; font-weight: 500;
    color: var(--ink-3);
    cursor: pointer;
    opacity: .55;
    border-radius: 999px;
    transition: opacity .2s ease, color .2s ease, background .15s ease;
  }
  .wizard-next-skip:hover {
    opacity: .9;
    color: var(--ink-2);
    background: var(--bg-2);
  }
  /* Completion screen */
  .wizard-done { text-align: left; }
  .wizard-done-mark {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--maky), var(--waz) 50%, var(--fin));
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 22px;
  }
  .wizard-done-mark svg { width: 24px; height: 24px; }
  .wizard-done h1 {
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin: 0 0 12px;
  }
  .wizard-done-sub {
    font-size: 17px;
    color: var(--ink-2);
    line-height: 1.55;
    margin: 0 0 28px;
    max-width: 52ch;
  }
  .wizard-summary {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg-2);
    padding: 18px 20px;
    margin-bottom: 26px;
    max-height: 280px;
    overflow-y: auto;
  }
  .wizard-summary-block { padding: 8px 0; }
  .wizard-summary-block + .wizard-summary-block { border-top: 1px solid var(--line); }
  .wizard-summary-eyebrow {
    font-family: 'Fustat', monospace;
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 8px;
  }
  .wizard-summary-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 14px;
    padding: 8px 0;
    font-size: 13.5px;
  }
  .wizard-summary-row .q { color: var(--ink-2); grid-column: 1 / -1; }
  .wizard-summary-row .a { color: var(--ink); font-weight: 500; line-height: 1.45; grid-column: 1; }
  .wizard-summary-row .a.empty { color: var(--ink-3); font-style: italic; font-weight: 400; }
  .wizard-summary-row .edit { grid-column: 2; align-self: start; padding-top: 2px; }
  .wizard-summary-row .edit {
    background: none; border: none; padding: 0 0 0 8px;
    font-family: 'Fustat', monospace; font-size: 11px;
    color: var(--ink-3); cursor: pointer;
  }
  .wizard-summary-row .edit:hover { color: var(--ink); }

  .wizard-done-actions {
    display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  }
  .wizard-download {
    appearance: none;
    background: var(--ink); color: #fff;
    border: 1px solid var(--ink);
    padding: 14px 24px;
    border-radius: 999px;
    font: inherit; font-size: 15px; font-weight: 600;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 10px;
    transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
  }
  .wizard-download:hover {
    background: #000;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
  }
  .wizard-download svg { width: 16px; height: 16px; }

  /* Botão "Copiar prompt" — secundário entre o primário "Baixar PDF"
     e o terciário "Revisar respostas". Mesmo formato/altura do PDF
     pra parecerem um par, mas com borda + texto escuro em vez de fill.
     Estado .is-copied: pisca verde por 1.8s ao concluir a cópia. */
  .wizard-copy {
    appearance: none;
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--ink);
    padding: 14px 22px;
    border-radius: 999px;
    font: inherit; font-size: 15px; font-weight: 600;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 10px;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .15s ease;
  }
  .wizard-copy:hover {
    background: var(--ink);
    color: #fff;
    transform: translateY(-1px);
  }
  .wizard-copy svg { width: 16px; height: 16px; }
  .wizard-copy.is-copied {
    background: var(--waz);          /* verde do design system */
    color: #fff;
    border-color: var(--waz);
    transform: none;
  }

  .wizard-review {
    appearance: none;
    background: transparent;
    color: var(--ink-2);
    border: 1px solid var(--line);
    padding: 14px 20px;
    border-radius: 999px;
    font: inherit; font-size: 14px; font-weight: 500;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
  }
  .wizard-review:hover { color: var(--ink); border-color: var(--ink-3); background: var(--bg-2); }
  .wizard-done-aux {
    margin-top: 18px;
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.5;
    max-width: 52ch;
  }
  .wizard-done-aux b { color: var(--ink); font-weight: 600; }

  @media (max-width: 640px) {
    .wizard-header {
      grid-template-columns: 36px 1fr 60px;
      gap: 10px;
      padding: 14px 16px;
    }
    .wizard-progress-text { font-size: 11px; }
    .wizard-actions { flex-direction: column-reverse; align-items: stretch; }
    .wizard-actions-right { width: 100%; margin-left: 0; gap: 8px; }
    .wizard-actions-right .wizard-next { flex: 1; justify-content: center; }
    .wizard-back { width: 100%; justify-content: center; }
    .wizard-next-skip { flex: none; padding: 12px 10px; }
    .wizard-summary-row { grid-template-columns: 1fr; }
    .wizard-summary-row .a { text-align: left; max-width: 100%; }
  }

  /* ---------- Product examples list ---------- */
  .product-examples {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 10px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--line);
  }
  .product-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg);
    transition: background .15s ease;
    animation: productFadeUp .3s ease both;
  }
  .product-item:hover { background: var(--bg-2); }
  .product-item + .product-item { border-top: 1px solid var(--line); }
  .product-item:nth-child(1) { animation-delay: .05s; }
  .product-item:nth-child(2) { animation-delay: .10s; }
  .product-item:nth-child(3) { animation-delay: .15s; }
  .product-item:nth-child(4) { animation-delay: .20s; }
  .product-item:nth-child(5) { animation-delay: .25s; }
  @keyframes productFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .product-img {
    width: 44px; height: 44px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-2);
  }
  .product-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .product-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
  }
  .product-desc {
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.3;
  }
  .product-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    font-family: inherit;
    letter-spacing: -0.01em;
  }
  @media (max-width: 640px) {
    .product-item { padding: 10px 12px; gap: 10px; }
    .product-img { width: 38px; height: 38px; border-radius: 8px; }
    .product-name { font-size: 13px; }
    .product-desc { font-size: 11px; }
    .product-price { font-size: 13px; }
  }

  /* ---------- Integration Hero Block (Etapa 3, dark full-bleed) ---------- */
  .integration-hero {
    background: #0A0A0A;
    border-radius: 0;
    padding: 48px clamp(24px, 5vw, 56px);
    margin-top: 16px;
    margin-bottom: 28px;
    margin-left: calc((100% - 100vw + var(--sidebar-w)) / 2);
    width: calc(100vw - var(--sidebar-w));
    position: relative;
    overflow: hidden;
    text-align: center;
  }
  @media (max-width: 900px) {
    .integration-hero {
      margin-left: calc((100% - 100vw) / 2);
      width: 100vw;
    }
  }
  .integration-hero-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .integration-hero-glow::before {
    content: '';
    position: absolute;
    top: -50%;
    left: 20%;
    width: 50%;
    height: 120%;
    background: radial-gradient(ellipse, rgba(45, 182, 125, 0.10) 0%, transparent 70%);
  }
  .integration-hero-glow::after {
    content: '';
    position: absolute;
    bottom: -40%;
    right: 10%;
    width: 50%;
    height: 100%;
    background: radial-gradient(ellipse, rgba(37, 99, 235, 0.08) 0%, transparent 70%);
  }
  .integration-hero-content {
    position: relative;
    z-index: 1;
    max-width: 560px;
    margin: 0 auto;
  }
  .integration-headline {
    font-size: 26px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.3;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
  }
  .integration-body {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 28px;
  }

  /* ---- Fluxo de integração: intro -> checklist (swipe) ---- */
  .integration-stage {
    position: relative;
    overflow: hidden;
    transition: height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .integration-slide {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  }
  /* o checklist começa fora da tela, à direita */
  .slide-checklist {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    transform: translateX(104%);
    opacity: 0;
    pointer-events: none;
  }
  .integration-stage.show .slide-intro {
    transform: translateX(-104%);
    opacity: 0;
    pointer-events: none;
  }
  .integration-stage.show .slide-checklist {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* Checklist (boxes marcáveis no hero escuro) */
  .integration-checklist {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 460px;
    margin: 4px auto 22px;
    text-align: left;
  }
  .int-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
  }
  .int-check:hover { border-color: rgba(255, 255, 255, 0.3); }
  .int-check-box {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
  }
  .int-check-mark {
    width: 22px; height: 22px;
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
    margin-top: 1px;
    position: relative;
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  .int-check-box:checked + .int-check-mark {
    background: var(--waz);
    border-color: var(--waz);
  }
  .int-check-box:checked + .int-check-mark::after {
    content: '';
    position: absolute;
    left: 6px; top: 2px;
    width: 5px; height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
  .int-check-box:focus-visible + .int-check-mark {
    box-shadow: 0 0 0 3px rgba(45, 182, 125, 0.45);
  }
  .int-check-text {
    font-size: 14px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.85);
  }
  .int-check-box:checked ~ .int-check-text { color: #fff; }

  /* Botão de agendamento: escondido até checar tudo */
  .integration-schedule.is-locked { display: none; }
  .integration-schedule:not(.is-locked) {
    animation: fadeSlideIn 0.45s ease both;
  }
  .integration-locked-hint {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
    margin: 2px 0 0;
    font-family: 'Fustat', monospace;
    letter-spacing: 0.02em;
  }
  @media (max-width: 640px) {
    .integration-hero {
      padding: 32px 20px;
      margin-top: 12px;
      margin-bottom: 20px;
    }
    .integration-headline { font-size: 21px; }
    .integration-body { font-size: 14px; }
  }

  /* ---------- Glow Button (CTA de máximo destaque) ---------- */
  .btn-glow {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    font: inherit;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: 999px;
    background: #0A0A0A;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease;
    margin-top: 4px;
  }
  .btn-glow:hover { transform: translateY(-2px); }
  .btn-glow:active { transform: translateY(0); }

  .btn-glow-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      #E91E8C,
      #8B5CF6,
      #2563EB,
      #2DB67D,
      #E91E8C
    );
    background-size: 300% 100%;
    opacity: 0.4;
    filter: blur(8px);
    transition: opacity 0.4s ease;
    animation: glow-shift 4s ease-in-out infinite;
  }
  .btn-glow:hover .btn-glow-bg {
    opacity: 0.75;
    filter: blur(10px);
  }
  @keyframes glow-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  .btn-glow::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 999px;
    background: linear-gradient(
      90deg,
      #E91E8C,
      #2563EB,
      #2DB67D
    );
    background-size: 300% 100%;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s ease;
    animation: glow-shift 4s ease-in-out infinite;
    filter: blur(12px);
  }
  .btn-glow:hover::after { opacity: 0.5; }

  .btn-glow-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }
  .btn-glow-content svg:last-child { transition: transform 0.2s ease; }
  .btn-glow:hover .btn-glow-content svg:last-child { transform: translateX(3px); }

  @media (max-width: 640px) {
    .btn-glow {
      padding: 12px 22px;
      border-radius: 999px;
      width: 100%;
      justify-content: center;
    }
    .btn-glow-content { font-size: 14px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .btn-glow-bg, .btn-glow::after { animation: none; }
  }

  /* Print friendliness */
  @media print {
    .sidebar, .mobile-header { display: none; }
    .content { padding: 0; }
  }

  /* ============================================================
     Logos slider (substituiu o antigo .ov-cases/.tcard).
     Loop CSS puro: .ov-logos-track tem 2× os logos lado a lado e
     translateX(-50%) ao fim da animação — emendar com o início da
     2ª passada cria o loop sem corte. O "progressive blur" das
     pontas é feito por mask-image em .ov-logos-viewport.
     ============================================================ */
  .ov-logos {
    margin-bottom: clamp(56px, 9vw, 96px);
  }

  .ov-logos-head {
    /* head centralizada — sem "Clique pra ler a história completa" do antigo cases */
    margin-bottom: 32px;
  }

  .ov-logos-viewport {
    position: relative;
    width: 100%;
    height: 140px;   /* aumentado de 100 → 140 pra acomodar legenda abaixo do logo */
    overflow: hidden;
    /* mask-image cria o fade progressivo nas duas extremidades */
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      black 200px,
      black calc(100% - 200px),
      transparent 100%
    );
            mask-image: linear-gradient(
      to right,
      transparent 0,
      black 200px,
      black calc(100% - 200px),
      transparent 100%
    );
  }

  .ov-logos-track {
    display: flex;
    align-items: center;
    gap: 48px;
    height: 100%;
    width: max-content;
    animation: ov-logos-scroll 30s linear infinite;
    will-change: transform;
  }

  .ov-logos-track:hover {
    animation-play-state: paused;
  }

  .ov-logo-item {
    flex: 0 0 auto;
    width: 160px;
    display: flex;
    flex-direction: column;     /* logo em cima, legenda embaixo */
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .ov-logo-item img {
    max-height: 80px;           /* reduzido de 100 → 80 (espaço pra legenda) */
    width: auto;
    border-radius: 10px;
    object-fit: contain;
    opacity: 0.85;
    transition: opacity 200ms ease;
  }

  .ov-logo-item img:hover {
    opacity: 1;
  }

  /* Legenda discreta abaixo do logo (estilo "eyebrow") */
  .ov-logo-name {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--ink-2);
    text-align: center;
    white-space: nowrap;        /* nomes não quebram linha (ex: "Oito Oitenta") */
  }

  @keyframes ov-logos-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); } /* 50% = exatamente a 1ª passada */
  }

  @media (max-width: 640px) {
    .ov-logos-viewport {
      height: 110px;             /* logo + legenda no mobile */
      -webkit-mask-image: linear-gradient(
        to right, transparent 0, black 80px, black calc(100% - 80px), transparent 100%
      );
              mask-image: linear-gradient(
        to right, transparent 0, black 80px, black calc(100% - 80px), transparent 100%
      );
    }
    .ov-logos-track { gap: 32px; }
    .ov-logo-item { width: 120px; gap: 8px; }
    .ov-logo-item img { max-height: 60px; }
    .ov-logo-name { font-size: 11px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .ov-logos-track { animation: none; }
  }

/* ============================================================
   ETAPA 1 — Catálogo (tutorial: manual vs Waz)
   ============================================================ */

/* ---- Stage intro text ---- */
.stage-intro {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: -4px 0 24px;
  max-width: 600px;
}

/* ---- Situation Question (já tem arquivo vs criar do zero) ---- */
.situation-question {
  margin-bottom: 8px;
}

.situation-q {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 16px;
}

.situation-options {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 12px;
  margin-bottom: 8px;
}

/* Opção (botão clicável) */
.situation-opt {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

.situation-opt:hover {
  border-color: var(--ink-3);
  background: var(--bg-2);
}

/* Opção selecionada */
.situation-opt.is-selected {
  border-color: var(--ink);
  background: var(--bg-2);
}

/* Opção recomendada — acento verde quando selecionada */
.situation-opt.is-recommended {
  border-color: var(--line);
  position: relative;
}

.situation-opt.is-recommended.is-selected {
  border-color: var(--waz);
  background: rgba(45, 182, 125, 0.04);
}

/* Header da opção */
.situation-opt-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.situation-opt-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: transparent;
  transition: all 0.2s ease;
}

.situation-opt.is-selected .situation-opt-check {
  border-color: var(--ink);
  background: var(--ink);
  color: white;
}

.situation-opt.is-recommended.is-selected .situation-opt-check {
  border-color: var(--waz);
  background: var(--waz);
}

.situation-opt-header strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

/* Descrição */
.situation-opt-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
  margin: 0;
}

/* Tempo estimado */
.situation-opt-time {
  font-size: 11px;
  font-family: 'Fustat', monospace;
  color: var(--ink-3);
  letter-spacing: 0.02em;
  margin-top: auto;
}

.situation-opt.is-recommended .situation-opt-time {
  color: var(--waz);
}

/* ---- Situation Content (tutorial que aparece após escolha) ---- */
/* Visibilidade controlada por JS; a entrada animada vem de .is-entering
   (ver "Etapa 02 path animation" mais abaixo). */
.situation-content {
  display: none;
}

.situation-content.is-visible {
  display: block;
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Switch link (ver outro caminho) ---- */
.situation-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--ink-3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 0;
  margin-top: 8px;
  transition: color 0.15s ease;
  font-family: 'Fustat', sans-serif;
}

.situation-switch:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Tutorial Steps ---- */
.tutorial-steps {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-bottom: 32px;
}

.tutorial-step {
  display: flex;
  gap: 16px;
}

.tutorial-step-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: white;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.tutorial-step-body {
  flex: 1;
  min-width: 0;
}

.tutorial-step-body h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
}

.tutorial-step-body p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}

/* ---- Passo com telefone à esquerda / texto à direita (Etapa 02) ---- */
.tutorial-step.phone-left { align-items: center; }  /* centra o número junto do texto/telefone */
.tutorial-step.phone-left .tutorial-step-body {
  display: flex;
  flex-direction: row-reverse;    /* telefone à esquerda, texto à direita */
  align-items: center;            /* alinha verticalmente texto e telefone */
}
.tutorial-step.phone-left .tutorial-step-text {
  flex: 1 1 auto;                 /* texto cresce/encolhe pra preencher a direita */
  min-width: 0;
  max-width: calc(100% - 240px);  /* reserva o espaço do telefone -> sem lacunas */
  padding-left: 40px;             /* respiro entre telefone (esq.) e texto (dir.) */
}
.tutorial-step.phone-left .phone {
  flex: 0 0 auto;                 /* largura fixa: não cresce nem encolhe */
  width: 240px;
  margin: 0;
}
/* Leitura levemente maior no layout lado a lado */
.tutorial-step.phone-left .tutorial-step-text h4 { font-size: 17px; margin-bottom: 10px; }
.tutorial-step.phone-left .tutorial-step-text p,
.tutorial-step.phone-left .tutorial-step-text .tutorial-list li { font-size: 14.5px; }

/* Telas médias (sidebar oculta): telefone um pouco menor */
@media (max-width: 860px) {
  .tutorial-step.phone-left .tutorial-step-text { max-width: calc(100% - 210px); }
  .tutorial-step.phone-left .phone { width: 210px; }
}
/* Mobile: empilha texto em cima, telefone embaixo */
@media (max-width: 640px) {
  .tutorial-step.phone-left .tutorial-step-body {
    flex-direction: column;
    align-items: stretch;
  }
  .tutorial-step.phone-left .tutorial-step-text { max-width: 100%; padding-left: 0; }
  .tutorial-step.phone-left .phone {
    width: 200px;
    margin: 12px auto 0;   /* centralizado horizontalmente */
    align-self: center;    /* idem, pro caso de flex parent */
    justify-self: center;  /* idem, pro caso de grid parent (.number-inside) */
  }
}

/* ---- Variante: número POSICIONADO entre o phone e o texto ----
   Aplicada no passo 3 do "Waz" via classe extra .number-inside.
   Source: [text, number, phone]; render (row-reverse): [phone, number, text].
   Os ajustes ficam isolados pra não interferir nos outros .phone-left. */
.tutorial-step.phone-left.number-inside .tutorial-step-body {
  gap: 18px;                       /* respiro entre phone, número e texto */
}
.tutorial-step.phone-left.number-inside .tutorial-step-text {
  padding-left: 0;                 /* respiro vem do `gap`, não do padding */
  /* phone (240px) + number (28px) + 2 gaps (36px) = 304px reservado */
  max-width: calc(100% - 304px);
}
@media (max-width: 860px) {
  .tutorial-step.phone-left.number-inside .tutorial-step-text {
    /* phone 210 + number 28 + 2 gaps 36 = 274 */
    max-width: calc(100% - 274px);
  }
}
@media (max-width: 640px) {
  /* Mobile: trocamos o flex herdado de `.phone-left .tutorial-step-body`
     por GRID com 2 áreas. Linha 1 = [number, text]; linha 2 = phone (full
     row, mas o phone interno só tem 200px de width). Isso garante:
       - number alinhado com a primeira linha do h4 (top da row 1)
       - phone numa linha separada abaixo, com tamanho compacto (200px)
     Mais robusto que flex+wrap, que não controla tamanho do item que faz wrap. */
  .tutorial-step.phone-left.number-inside .tutorial-step-body {
    display: grid;
    grid-template-columns: 28px 1fr;
    grid-template-areas:
      "num   text"
      "phone phone";
    column-gap: 12px;
    row-gap: 4px;
    align-items: start;
  }
  .tutorial-step.phone-left.number-inside .tutorial-step-number {
    grid-area: num;
  }
  .tutorial-step.phone-left.number-inside .tutorial-step-text {
    grid-area: text;
    /* reset do max-width herdado da regra de 860px */
    max-width: none;
    width: auto;
  }
  .tutorial-step.phone-left.number-inside .phone {
    grid-area: phone;
    width: 200px;          /* mesmo tamanho do .phone-left mobile original */
    margin-top: 8px;
  }

  /* Phone escondido por padrão no mobile pra economizar viewport.
     O botão `.phone-toggle` (injetado em main.js) revela ao clicar. */
  .tutorial-step.phone-left .phone {
    display: none;
  }
  .tutorial-step.phone-left.phone-visible .phone {
    display: block;
    animation: phoneSlideDown .3s ease both;
  }
  /* Toggle aparece SÓ no mobile (escondido por padrão no .phone-toggle base) */
  .tutorial-step.phone-left .phone-toggle {
    display: inline-flex;
    margin-top: 14px;
  }
}

.tutorial-list {
  margin: 8px 0;
  padding-left: 0;
  list-style: none;
}
.tutorial-list li {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
  padding: 4px 0;
  padding-left: 16px;
  position: relative;
}
.tutorial-list li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--ink-3);
  font-weight: 700;
}

/* ---- Tag "recomendado" ---- */
.tag-recommended {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--waz);
  background: rgba(45, 182, 125, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 4px;
  font-family: 'Fustat', monospace;
  vertical-align: middle;
}

/* Badge "recomendado" no canto direito da opção do wizard */
.wizard-option-rec {
  margin-left: auto;
  align-self: flex-start;
  flex-shrink: 0;
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .situation-options {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .situation-opt {
    padding: 16px;
  }
  .situation-q {
    font-size: 16px;
  }
  .tutorial-step {
    gap: 12px;
  }
  .tutorial-step-number {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
}

/* ============================================================
   ETAPA 2 — Treine seus agentes (dois fluxos + escalação)
   ============================================================ */

/* ---- Flow Explorer (horizontal rotating spotlight) ---- */
.flow-explorer {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 32px;
}

.flow-item {
  flex: 1;
  cursor: pointer;
  transition: opacity 0.4s ease;
  opacity: 0.35;
  position: relative;
  padding: 0 0 20px;
  outline: none;
}

.flow-item.is-active {
  opacity: 1;
}

/* ---- Bar (horizontal, topo de cada card) ---- */
.flow-bar {
  height: 3px;
  background: var(--line);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}

.flow-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #E91E8C,
    #8B5CF6,
    #6D28D9,
    #2563EB
  );
  background-size: 200% 100%;
  animation: none;
}

.flow-item.is-running .flow-bar-fill {
  animation: flow-fill 7s linear forwards, flow-gradient-shift 3s ease-in-out infinite;
}

/* Hover ou clique (is-paused) congela a barra — dá tempo de ler */
.flow-explorer:hover .flow-bar-fill,
.flow-explorer.is-paused .flow-bar-fill {
  animation-play-state: paused;
}

@keyframes flow-fill {
  from { width: 0%; }
  to { width: 100%; }
}

@keyframes flow-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Reset bar quando não está rodando */
.flow-item:not(.is-running) .flow-bar-fill {
  width: 0%;
  animation: none;
}

/* ---- Connector line between cards ---- */

/* ---- Content ---- */
.flow-item-content {
  padding: 0 20px 0 0;
}

.flow-item:last-child .flow-item-content {
  padding-right: 0;
}

.flow-item-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.flow-item-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s ease, color 0.3s ease;
}

.flow-item.is-active .flow-item-number {
  background: var(--ink);
  color: white;
}

.flow-item-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

/* ---- Details (sempre visíveis; o atenuado vem da opacidade do .flow-item) ---- */
.flow-item-details {
  margin-top: 14px;
}

.flow-item-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 10px;
}

.flow-item-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: 'Fustat', monospace;
  color: #8B5CF6;
}

.flow-item-tags span:nth-child(even) {
  color: var(--line);
}

/* ---- Training CTA Block ---- */
.training-cta-block {
  margin-top: 32px;
  margin-bottom: 28px;
  position: relative;
}

/* Waz espiando na borda da sidebar, na altura do .training-cta-block
   (rola junto com a seção; o `top` é definido via JS). */
.waz-peek {
  position: absolute;
  left: calc(var(--sidebar-w) - 18px);
  top: 0;
  width: 167px;
  /* aspect-ratio explícito (843/1264 nativo da imagem) garante que o browser
     reserve a altura ANTES da imagem carregar — sem isso, o JS calculava
     offsetHeight = 0 em reload com cache e jogava o Fin sobre o Waz. */
  aspect-ratio: 843 / 1264;
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 40;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.22));
}
/* Maky espiando na borda DIREITA da tela, um pouco acima da linha do Waz
   (rola junto com a seção; o `top` é definido via JS). */
.maky-peek {
  position: absolute;
  right: -10px;
  top: 0;
  width: 175px;
  aspect-ratio: 912 / 1174;          /* dimensões nativas — reserva altura */
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 40;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.22));
}
/* Fin espiando do mesmo lado que o Waz (esquerda), logo ABAIXO dele.
   `top` calculado em main.js como `wazTop + wazHeight - 30` para uma
   leve sobreposição que faz parecer um trio empilhado. */
.fin-peek {
  position: absolute;
  left: calc(var(--sidebar-w) - 24px);   /* 3px mais à esquerda que o Waz */
  top: 0;
  width: 185px;          /* ligeiramente menor que o Waz pra dar variação visual */
  aspect-ratio: 455 / 548;               /* dimensões nativas — reserva altura */
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 39;           /* atrás do Waz quando houver sobreposição */
  /* `fin.png` é o personagem "inteiro" com fundo branco (não a versão
     -character recortada). `mix-blend-mode: multiply` faz branco × fundo
     = fundo, então o branco do PNG some sobre a sidebar (#f0f0f0) e
     sobre o conteúdo (branco). Preto e cores escuras das sombras
     são preservadas (preto × X = preto). drop-shadow removido —
     com multiply ele aplicaria mesmo ao branco antes do blend e cria
     um halo escuro indesejado em volta do recorte. */
  mix-blend-mode: multiply;
}
@media (max-width: 900px) {
  .waz-peek,
  .maky-peek,
  .fin-peek { display: none; } /* sidebar some / tela estreita no mobile */
}

/* Label discreto acima do botão gigante */
.training-cta-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  margin-bottom: 12px;
}

/* Botão XL — o bloco escuro É o botão (ocupa a largura toda) */
.btn-glow-xl {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 40px 32px;
  border-radius: 999px;
  background: #0A0A0A;
  position: relative;
  overflow: hidden;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
  text-decoration: none;
  margin-top: 0;
}

.btn-glow-xl:hover {
  transform: translateY(-2px);
}

/* glow externo acompanha o raio do botão xl */
.btn-glow-xl::after {
  border-radius: 999px;
}

.btn-glow-xl .btn-glow-content {
  font-size: 20px;
  font-weight: 700;
  gap: 10px;
}

.btn-glow-xl .btn-glow-content svg {
  width: 18px;
  height: 18px;
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .flow-explorer {
    flex-direction: column;
    gap: 0;
  }
  .flow-bar {
    width: 100%;
  }
  .flow-item-content {
    padding: 0;
  }
  .flow-item-title {
    font-size: 15px;
  }
  .btn-glow-xl {
    padding: 32px 20px;
  }
  .btn-glow-xl .btn-glow-content {
    font-size: 17px;
  }
}

/* ============================================================
   Paged setup (setup.html) — one .page visible at a time
   ============================================================ */
.page { display: none; }
.page.is-active { display: block; }

/* Page header: "Etapa XX" eyebrow + título (h1) */
.page .section-eyebrow { margin-bottom: 8px; }
.page h1 {
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 24px;
}

/* Alvos das subseções da sidebar — respiro ao rolar (e sob o header fixo no mobile) */
#int-instagram,
#int-pagamento,
#integration-hero,
#auto-copiloto,
#auto-piloto { scroll-margin-top: 100px; }
@media (max-width: 900px) {
  #int-instagram,
  #int-pagamento,
  #integration-hero,
  #auto-copiloto,
  #auto-piloto { scroll-margin-top: 140px; }
}

/* Fade-in applied (via JS) to a page when it becomes active */
@keyframes pageFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-enter { animation: pageFade 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* ---- Page navigation (Anterior / Próximo) ---- */
.page-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.page-prev,
.page-next {
  appearance: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;   /* funciona pra <button> e também pra <a> (sem sublinhado) */
  transition: background 0.2s ease, transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.page-prev {
  background: var(--bg);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.page-prev:hover {
  background: var(--bg-2);
  color: var(--ink);
  border-color: var(--ink-3);
}
.page-next {
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  margin-left: auto; /* push to the right when "Anterior" is hidden */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.page-next:hover {
  background: #000;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.page-prev svg,
.page-next svg { transition: transform 0.15s ease; }
.page-prev:hover svg { transform: translateX(-2px); }
.page-next:hover svg { transform: translateX(2px); }
.page-prev[hidden],
.page-next[hidden] { display: none; }

/* ============================================================
   Etapa 02 path animation — picker slides out right,
   chosen path slides in from the left
   ============================================================ */
.situation-stage {
  position: relative;
  overflow: hidden;
}

@keyframes pathSlideOutRight {
  from { transform: translateX(0);     opacity: 1; }
  to   { transform: translateX(110%);  opacity: 0; }
}
@keyframes pathSlideInLeft {
  from { transform: translateX(-110%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

/* While leaving, the picker is lifted out of flow so it can slide off
   without affecting the height the chosen path will occupy. */
.situation-question.is-leaving {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  animation: pathSlideOutRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.situation-content.is-entering {
  animation: pathSlideInLeft 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .page-enter,
  .situation-question.is-leaving,
  .situation-content.is-entering { animation: none; }
}

/* ============================================================
   (NOVO) "O que o Waz não deve fazer" — gerador de prompt + modal
   ============================================================ */
.waz-guard {
  margin-top: 28px;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-2);
}
.waz-guard-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 8px;
}
.waz-guard-desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 18px;
  max-width: 62ch;
}
/* Lista de checkboxes em 2 colunas (1 no mobile) */
.waz-guard-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
@media (max-width: 600px) { .waz-guard-options { grid-template-columns: 1fr; } }
.waz-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  cursor: pointer;
  font-size: 14px;
  color: var(--ink);
  transition: border-color .15s ease, background .15s ease;
}
.waz-check:hover { border-color: var(--ink-3); }
.waz-check:has(.waz-check-box:checked) { border-color: var(--ink); }
.waz-check-box { position: absolute; opacity: 0; width: 0; height: 0; }
.waz-check-mark {
  width: 18px; height: 18px;
  border: 1.5px solid var(--ink-3);
  border-radius: 5px;
  flex-shrink: 0;
  position: relative;
  transition: background .15s ease, border-color .15s ease;
}
.waz-check-box:checked + .waz-check-mark { background: var(--ink); border-color: var(--ink); }
.waz-check-box:checked + .waz-check-mark::after {
  content: '';
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.waz-check-box:focus-visible + .waz-check-mark {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ink) 18%, transparent);
}
.waz-check-text { line-height: 1.35; }
/* Campos de texto (Outro + observação livre) */
.waz-guard-input {
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 11px 14px;
  outline: none;
  transition: border-color .15s ease;
  resize: vertical;
}
.waz-guard-input:focus { border-color: var(--ink); }
.waz-guard-input::placeholder { color: var(--ink-3); }
.waz-guard-outro { margin-bottom: 14px; }
.waz-guard-outro.is-hidden { display: none; }
.waz-guard-field { display: block; margin-bottom: 18px; }
.waz-guard-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 8px;
}
.waz-guard-generate { margin-top: 4px; }

/* Modal do prompt gerado */
.waz-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;            /* acima do wizard (1000) */
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.waz-modal.is-open { display: flex; }
.waz-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.waz-modal-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  animation: wazModalIn .25s ease both;
}
@keyframes wazModalIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.waz-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  border: none; background: none;
  border-radius: 8px;
  color: var(--ink-2);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.waz-modal-close:hover { background: var(--bg-2); color: var(--ink); }
.waz-modal-title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 4px; }
.waz-modal-sub { font-size: 14px; color: var(--ink-2); margin: 0 0 16px; }
.waz-modal-text {
  font-family: 'Fustat', ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0 0 16px;
}
.waz-modal-actions { display: flex; justify-content: flex-end; }
.waz-modal-copy.is-copied { background: var(--waz); border-color: var(--waz); }
@media (prefers-reduced-motion: reduce) { .waz-modal-card { animation: none; } }

/* ============================================================
   "Treine seus agentes" — hub de 2 passos (page-1) + FAQ + depoimentos
   ============================================================ */
/* Dois blocos lado a lado (passos 01 e 02) */
.steps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 24px;
  margin-bottom: 40px;
}
@media (max-width: 760px) {
  .steps-grid { grid-template-columns: 1fr; }   /* empilha no mobile */
}
/* ------------------------------------------------------------
   Step-cards com BRILHO ANIMADO nas bordas no hover.
   Técnica "gradient border via mask-composite":
     - `::after` é uma camada do tamanho do card +2px em volta
     - background = conic-gradient(maky → waz → fin → maky) que
       gira porque --step-glow-angle (registrado via @property) é
       animado pelo .step-card e herdado pelo pseudo
     - dois mask layers (`content-box` + caixa cheia) com
       `mask-composite: exclude` recortam o miolo, deixando só
       uma moldura de 2px visível
   O glow radial interno (rosa/azul) que vivia no antigo ::before
   foi movido para o `background:` multi-layer do .step-card.
   ------------------------------------------------------------ */
.step-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    radial-gradient(80% 80% at 0% 0%, color-mix(in oklab, var(--maky) 5%, transparent), transparent 55%),
    radial-gradient(80% 80% at 100% 100%, color-mix(in oklab, var(--fin) 5%, transparent), transparent 55%),
    var(--bg);
  position: relative;
  /* overflow:hidden removido — a moldura precisa extravasar via inset:-2px */
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  /* Animação fica SEMPRE atribuída ao card, pausada até o hover.
     Hover só troca o play-state, evitando "saltos" no reinício. */
  animation: step-card-glow-spin 2s linear infinite paused;
}

/* A moldura colorida animada — efeito "cometa":
   ~3/4 do conic é transparente; só um arco de ~120° tem cor, com
   pico em #fff bem no meio. Como o ângulo (--step-glow-angle)
   roda, o arco varre o perímetro e parece um "ponto brilhante"
   percorrendo a borda do card. */
.step-card::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 18px;           /* radius do card (16) + inset (2) */
  padding: 2px;                  /* espessura da moldura */
  background: conic-gradient(
    from var(--step-glow-angle),
    transparent 0deg,
    transparent 240deg,           /* 2/3 do perímetro sem nada */
    var(--maky)   295deg,         /* entrada do "cometa" */
    #395ff5       325deg,         /* núcleo brilhante (o "ponto forte") */
    var(--waz)    350deg,         /* cauda saindo */
    transparent   360deg
  );
  /* mask: tira o miolo (content-box) e mantém só o "anel" do padding */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.step-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
  border-color: var(--ink-3);    /* borda sutil no resto do perímetro,
                                    enquanto o cometa não está passando */
  animation-play-state: running;
}
.step-card:hover::after { opacity: 1; }

@keyframes step-card-glow-spin {
  to { --step-glow-angle: 360deg; }
}

/* Acessibilidade — desliga a rotação para quem pediu menos movimento.
   A moldura colorida ainda aparece no hover, só não roda. */
@media (prefers-reduced-motion: reduce) {
  .step-card { animation: none; }
}
.step-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--bg-2);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.step-icon svg { display: block; }
.step-num {
  font-family: 'Fustat', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.step-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.25;
}
.step-desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 22px;
  flex: 1;            /* mantém os botões alinhados na base dos cards */
}
.step-btn { align-self: flex-start; }

/* FAQ rápido na hub (reaproveita .faq / .faq-list) */
.step-faq {
  margin-top: 8px;
  margin-bottom: 32px;
}
.step-faq h2,
.step-testimonials h2 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 10px;
}

/* Depoimentos curtos */
.step-testimonials { margin-bottom: 24px; }
.step-tlist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 760px) { .step-tlist { grid-template-columns: 1fr; } }
.step-quote {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
}
.step-quote-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 12px;
  font-style: italic;
}
.step-quote-author {
  font-size: 12.5px;
  color: var(--ink-3);
  margin: 0;
}
.step-quote-author strong { color: var(--ink); font-weight: 600; }

/* ============================================================
   ETAPA 02 — Página "Catálogo / Dicas e detalhes"
   ------------------------------------------------------------
   Estilos pros tip-blocks da nova catalogo-dicas.html, mais o
   link inline ".catalog-tips-link" que aparece na Etapa 02 do
   setup.html (logo abaixo do passo 3 "Envie o arquivo") chamando
   pra essa página.
   ============================================================ */

/* Link "Dicas e detalhes" na Etapa 02 do setup.html — fica entre o
   passo 3 do caminho Waz e o botão "Prefiro cadastrar manualmente".
   Estilo minimalista: sem fundo, só uma borda fina inferior que aparece
   no hover. Block-level com max-width pra ocupar uma linha própria, com
   margin-bottom generoso pra separar do toggle abaixo. */
.catalog-tips-link {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0 36px;          /* mais respiro acima e ABAIXO (separa do toggle) */
  padding: 12px 4px;
  max-width: 440px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14.5px;
  line-height: 1.35;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.catalog-tips-link:hover {
  border-bottom-color: var(--line);
}
.catalog-tips-link > svg:first-of-type {
  flex: 0 0 auto;
  color: var(--maky);
}
.catalog-tips-link-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.catalog-tips-link strong {
  font-weight: 600;
  letter-spacing: -0.005em;
}
.catalog-tips-link-sub {
  font-size: 13px;
  color: var(--ink-2);
}
.catalog-tips-link-arr {
  margin-left: auto;
  color: var(--ink-3);
  transition: transform .2s ease, color .2s ease;
}
.catalog-tips-link:hover .catalog-tips-link-arr {
  transform: translateX(4px);
  color: var(--ink);
}

/* Bloco "dica" — usado em catalogo-dicas.html.
   Cada dica é um <article class="tip-block"> com eyebrow + h2
   + descrição + exemplo visual + lista de bullets + link "Saiba mais". */
.tip-block {
  margin-top: clamp(32px, 5vw, 48px);
  padding-top: clamp(24px, 4vw, 32px);
  border-top: 1px solid var(--line);
}
.tip-block:first-of-type {
  border-top: 0;
  padding-top: 8px;
  margin-top: 24px;
}
.tip-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.tip-title {
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 12px;
  line-height: 1.2;
}
.tip-subtitle {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 24px 0 8px;
}
.tip-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 18px;
  max-width: 64ch;
}
.tip-list {
  margin: 0 0 18px;
  padding-left: 0;
  list-style: none;
}
.tip-list li {
  position: relative;
  padding-left: 18px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.tip-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 11px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink-3);
}
.tip-list strong, .tip-list em {
  color: var(--ink);
  font-style: normal;
  font-weight: 600;
}

/* "Saiba mais" — link discreto, alinhado à esquerda, com setinha */
.tip-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-3);
  padding-bottom: 2px;
  transition: border-color .18s ease, gap .18s ease;
}
.tip-more:hover {
  border-color: var(--ink);
  gap: 10px;
}

/* Exemplos visuais dentro dos tip-blocks ------------------- */
.tip-example {
  margin: 4px 0 20px;
}

/* Comparativo lado-a-lado: sem foto × com foto */
.tip-example-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.tip-example-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.tip-example-card--bad {
  opacity: 0.85;
}
.tip-example-tag {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--bg-2);
  padding: 4px 8px;
  border-radius: 6px;
  margin-bottom: 12px;
}
.tip-example-tag--good {
  color: #fff;
  background: var(--waz);
}
.tip-example-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.tip-example-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tip-example-thumb--empty {
  color: var(--ink-3);
  border: 1px dashed var(--line);
}
.tip-example-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.tip-example-price {
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 2px;
}

/* Grid de variações (3 colunas em desktop, 1 em mobile) */
.tip-example-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.tip-variation-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
}
.tip-variation-axis {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.tip-variation-card ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.tip-variation-card li {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
  padding: 4px 0;
  border-top: 1px solid var(--line-2);
}
.tip-variation-card li:first-child { border-top: 0; }

/* Botão "Voltar para Cadastrar produtos" — no fim da página */
.catalogo-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(40px, 6vw, 56px);
  padding: 12px 22px;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.catalogo-back-btn:hover {
  background: #000;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,.14);
}

/* Mobile: o comparativo "sem foto × com foto" continua LADO A LADO
   (cada card metade da largura), só com paddings/fontes reduzidos pra
   caber confortável em telas estreitas. O grid de variações (3 cards
   com listas longas) ainda empilha pra leitura ficar fluida. */
@media (max-width: 640px) {
  .tip-example-grid { grid-template-columns: 1fr; }
  .tip-example-compare { gap: 10px; }
  .tip-example-card {
    padding: 10px;
    border-radius: 12px;
  }
  .tip-example-tag {
    font-size: 9.5px;
    padding: 3px 6px;
    margin-bottom: 8px;
  }
  .tip-example-thumb {
    margin-bottom: 8px;
    border-radius: 8px;
  }
  .tip-example-name { font-size: 12.5px; }
  .tip-example-price { font-size: 11.5px; }

  .catalog-tips-link { padding: 12px 14px; gap: 12px; }
  .catalog-tips-link-sub { font-size: 12.5px; }
  .catalogo-back-btn { width: 100%; justify-content: center; }
}