:root {
    /* Paleta AIME Tech (painel de identidade de 14/10/2026): Azul Profundo #0B2D3B, turquesa da logo #4F6B8F (escolhido em 02/10/2026), Branco e Cinza Neutro.
       Tons intermediários são só essas cores com transparência. */
    --navy: #0B2D3B;          /* Azul Profundo */
    --navy-deep: #0B2D3B;
    --navy-mid: #103848;      /* Azul Profundo + 7% de branco (cartões sobre fundo azul) */
    --gold: #4F6B8F;          /* Turquesa da logo #4F6B8F (nome antigo da variável mantido) */
    --gold-bright: #A7AFC7;   /* mesmo turquesa com 20% de branco: texto pequeno sobre azul (contraste 4,9:1) */
    --ink: #0B2D3B;
    --muted: #575E66;         /* Azul Profundo a 75% sobre branco (contraste 5,7:1) */
    --paper: #FFFFFF;
    --card: #F7F6F2;          /* Cinza Neutro */
    --white: #FFFFFF;
    --line: rgba(11,45,59,0.14);
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --paper: #0B2D3B; --card: #103848; --ink: #F7F6F2; --muted: #C6CBD6; --line: rgba(255,255,255,0.1);
    }
  }
  :root[data-theme="dark"] {
    --paper: #0B2D3B; --card: #103848; --ink: #F7F6F2; --muted: #C6CBD6; --line: rgba(255,255,255,0.1);
    color-scheme: dark;
  }
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-padding-top: calc(92px + env(safe-area-inset-top, 0px)); scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  html, body { margin: 0; }
  body {
    background: var(--paper); color: var(--ink);
    font-family: 'Inter', Calibri, Arial, sans-serif;
    font-size: 17px; line-height: 1.6;
  }
  img { max-width: 100%; }
  [hidden] { display: none !important; }
  /* Explicação curta de termo técnico: abaixo do termo em listas, entre parênteses no texto corrido. */
  .gloss { display: block; margin-top: 2px; font-size: 0.85em; font-weight: 400; line-height: 1.4; opacity: 0.85; }
  .gloss-inline { font-weight: 400; }
  h1, h2, h3 { font-family: 'Inter', 'Inter', Arial, sans-serif; }
  a { color: inherit; }
  a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  .wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }

  /* Header */
  header.top {
    position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
    background: var(--paper); border-bottom: 1px solid var(--line);
  }
  header.top .wrap { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; }
  .brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; line-height: 1.1; }
  .logo-icon { height: 48px; width: auto; display: block; }
  .logo-wordmark { height: 48px; width: auto; display: block; }
  .logo-footer { height: 72px; width: auto; display: block; }
  .mark { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.6rem; color: var(--navy); letter-spacing: -0.01em; }
  .mark span { color: var(--gold); }
  .submark { font-size: 0.78rem; color: #575E66; margin-top: 1px; white-space: nowrap; }
  nav { display: flex; align-items: center; }
  nav a { text-decoration: none; margin-left: 26px; font-size: 0.92rem; color: var(--navy); }
  nav a:not(.btn):hover { text-decoration: underline; text-underline-offset: 4px; }
  nav a:not(.btn).active, :root[data-theme] nav a:not(.btn).active { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gold); text-decoration-thickness: 2px; color: var(--navy); }

  .btn {
    display: inline-block; background: var(--navy); color: var(--white);
    padding: 12px 22px; border-radius: 3px; text-decoration: none; font-size: 0.95rem; font-weight: 600;
    border: 1px solid var(--navy); transition: background 0.15s ease;
  }
  .btn:hover { background: var(--navy-mid); }
  .btn.gold { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); }
  .btn.gold:hover { background: #A7AFC7; border-color: #A7AFC7; } /* turquesa #4F6B8F com 20% de branco */
  .btn.ghost-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.35); font-weight: 500; }
  .btn.ghost-light:hover { background: rgba(255,255,255,0.07); }
  .btn.big { padding: 16px 28px; font-size: 1.05rem; }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .mark, :root:not([data-theme="light"]) nav a:not(.btn) { color: #F7F6F2; }
  }
  :root[data-theme="dark"] .mark, :root[data-theme="dark"] nav a:not(.btn) { color: #F7F6F2; }

  section { padding: 84px 0; }
  h2.section-title { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 600; line-height: 1.2; margin: 0 0 14px; max-width: 24ch; letter-spacing: -0.01em; }
  p.section-sub { color: var(--muted); max-width: 58ch; margin: 0 0 44px; }

  /* Hero */
  .hero {
    position: relative; overflow: hidden; padding: 88px 0 92px; color: var(--ink);
    background: linear-gradient(180deg, #F7F6F2 0%, #ffffff 100%); border-bottom: 1px solid var(--line);
  }
  .hero::before {
    content: ""; position: absolute; inset: 0;
    background-image: linear-gradient(rgba(11,45,59,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(11,45,59,0.06) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(ellipse 70% 60% at 70% 35%, black 10%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 35%, black 10%, transparent 75%);
  }
  .hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
  .hero .tag { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; color: #0B2D3B; margin-bottom: 22px; background: #fff; border: 1px solid rgba(79,107,143,0.55); padding: 6px 12px; border-radius: 3px; }
  .hero .tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
  .hero h1 { font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 600; line-height: 1.1; margin: 0 0 20px; max-width: 22ch; letter-spacing: -0.02em; text-wrap: balance; color: var(--navy-deep); }
  .hero .cursor { display: inline-block; width: 0.09em; height: 0.8em; background: var(--gold); margin-left: 0.08em; vertical-align: -0.05em; animation: blink 1s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .hero .cursor { animation: none; } }
  .hero p.subhead { font-family: 'Inter', sans-serif; font-size: clamp(1.3rem, 2.3vw, 1.7rem); font-weight: 600; line-height: 1.3; color: #0B2D3B; margin: 0 0 18px; max-width: 30ch; }
  .hero p.lede { font-size: 1.15rem; max-width: 46ch; color: var(--muted); margin: 0 0 32px; }
  .hero p.subhead span { white-space: nowrap; }
  .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
  .hero .btn.ghost-light { color: var(--navy); border-color: rgba(11,45,59,0.35); }
  .hero .btn.ghost-light:hover { background: rgba(11,45,59,0.06); }
  .hero .for-whom { margin: 0 0 14px; font-size: 0.98rem; font-weight: 500; color: var(--navy); max-width: 44ch; }
  .hero .fineprint { font-size: 0.88rem; color: var(--muted); margin: 0; }
  .hero .fineprint b { color: var(--ink); font-weight: 600; }

  /* Hero video — the memorable element */
  /* Vídeo horizontal (1280x720), reto */
  .hero-video {
    position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0B2D3B; border-radius: 10px;
    border: 1px solid rgba(79,107,143,0.45); box-shadow: 0 30px 60px -24px rgba(11,45,59,0.45);
  }
  .brand-video { display: block; width: 100%; height: 100%; object-fit: cover; }

  /* Twin promise */
  .twin { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); }
  .twin > div { padding: 36px 34px; background: var(--card); }
  .twin > div + div { border-left: 1px solid var(--line); }
  .twin .word { font-family: 'Inter', sans-serif; font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--navy); margin: 0 0 8px; }
  .twin .word.safe { color: #0B2D3B; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .twin .word { color: #F7F6F2; } :root:not([data-theme="light"]) .twin .word.safe { color: var(--gold-bright); } }
  :root[data-theme="dark"] .twin .word { color: #F7F6F2; } :root[data-theme="dark"] .twin .word.safe { color: var(--gold-bright); }
  .twin .how { color: var(--muted); margin: 0 0 22px; max-width: 42ch; }
  .twin ul { list-style: none; margin: 0; padding: 0; }
  .twin li { padding: 10px 0 10px 18px; border-top: 1px solid var(--line); position: relative; font-size: 0.95rem; }
  .twin li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 7px; height: 7px; background: var(--gold); }
  .twin-note { margin: 28px 0 0; max-width: 64ch; font-size: 1.05rem; }
  @media (max-width: 760px) { .twin { grid-template-columns: 1fr; } .twin > div + div { border-left: none; border-top: 1px solid var(--line); } }

  /* Problem */
  .problem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
  .problem-cell { background: var(--paper); padding: 26px 24px; }
  .problem-cell h3 { margin: 0 0 8px; font-size: 1.05rem; font-weight: 600; }
  .problem-cell p { margin: 0; color: var(--muted); font-size: 0.93rem; }
  .source { margin: 12px 0 0; font-size: 0.8rem; color: var(--muted); }
  .band .source, .why-grid p.source { color: #C6CBD6; }
  .source a { color: inherit; text-underline-offset: 3px; }
  .problem-cell .cost { display: block; margin-top: 14px; font-size: 0.82rem; color: #575E66; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .problem-cell .cost { color: #C6CBD6; } }
  :root[data-theme="dark"] .problem-cell .cost { color: #C6CBD6; }

  /* Use cases: before/after */
  .cases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .case {
    display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line);
    border-radius: 8px; padding: 26px 22px 22px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  }
  .case:hover { transform: translateY(-4px); border-color: rgba(79,107,143,0.7); box-shadow: 0 18px 36px -22px rgba(11,45,59,0.45); }
  @media (prefers-reduced-motion: reduce) { .case, .case:hover { transition: none; transform: none; } }
  .case-icon {
    width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 18px;
    background: rgba(79,107,143,0.15); color: #0B2D3B;
  }
  .case-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .case h3 { margin: 0 0 16px; font-size: 1.12rem; font-weight: 600; color: var(--navy); }

  .ba { display: flex; flex-direction: column; gap: 10px; flex: 1; }
  .ba-before, .ba-after { border-radius: 6px; padding: 12px 14px; }
  .ba p { margin: 4px 0 0; font-size: 0.88rem; line-height: 1.45; }
  .ba-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; }
  .ba-before { background: rgba(11,45,59,0.06); }
  .ba-before .ba-label { color: #575E66; }
  .ba-before p { color: var(--muted); }
  .ba-after { position: relative; flex: 1; background: rgba(79,107,143,0.12); border: 1px solid rgba(79,107,143,0.45); }
  .ba-after .ba-label { color: #0B2D3B; }
  .ba-after p { color: var(--ink); font-weight: 500; font-size: 0.92rem; }
  .ba-after::before {
    content: "↓"; position: absolute; top: -17px; left: 50%; transform: translateX(-50%);
    width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
    background: var(--gold); color: var(--navy-deep); font-size: 0.8rem; font-weight: 700; border: 3px solid var(--card);
  }

  .case.custom { background: var(--navy); border-color: var(--navy); color: #F7F6F2; }
  .case.custom .case-icon { background: rgba(79,107,143,0.16); color: var(--gold-bright); }
  .case.custom h3 { color: var(--gold-bright); }
  .case.custom p { margin: 0 0 22px; font-size: 0.92rem; color: #F7F6F2; }
  .case.custom .btn { margin-top: auto; text-align: center; padding-left: 14px; padding-right: 14px; }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .case h3 { color: var(--gold-bright); }
    :root:not([data-theme="light"]) .case-icon { color: var(--gold-bright); }
    :root:not([data-theme="light"]) .ba-before .ba-label { color: #C6CBD6; }
    :root:not([data-theme="light"]) .ba-after .ba-label { color: #4F6B8F; }
  }
  :root[data-theme="dark"] .case h3 { color: var(--gold-bright); }
  :root[data-theme="dark"] .case-icon { color: var(--gold-bright); }
  :root[data-theme="dark"] .ba-before .ba-label { color: #C6CBD6; }
  :root[data-theme="dark"] .ba-after .ba-label { color: #4F6B8F; }

  /* Páginas de solução */
  .case-more { margin-top: 14px; font-size: 0.88rem; font-weight: 600; color: var(--navy); text-underline-offset: 4px; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .case-more { color: var(--gold-bright); } }
  :root[data-theme="dark"] .case-more { color: var(--gold-bright); }
  .hero-page .wrap { grid-template-columns: 1fr; }
  .hero-page h1 { max-width: 28ch; }
  .breadcrumb { margin: 0 0 18px; font-size: 0.85rem; color: var(--muted); }
  .breadcrumb a { color: var(--navy); text-underline-offset: 3px; }
  .breadcrumb span { margin: 0 6px; }
  .problem-grid.problem-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .page-ba { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: start; }
  .page-ba .section-sub { margin-bottom: 0; }
  .page-more { margin: 22px 0 0; }
  .page-more a { color: var(--navy); font-weight: 600; text-underline-offset: 4px; }
  @media (max-width: 900px) { .page-ba, .problem-grid.problem-grid-3 { grid-template-columns: 1fr; } }

  /* Results (prova social) */
  .results { padding-top: 0; }
  .results-numbers {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; list-style: none; margin: 0 0 28px; padding: 0;
    background: var(--line); border: 1px solid var(--line);
  }
  .results-numbers li, .result-case { min-width: 0; overflow-wrap: anywhere; }
  .results-numbers li { display: flex; flex-direction: column; gap: 4px; padding: 22px 24px; background: var(--card); }
  .results-numbers strong { font-family: 'Inter', sans-serif; font-size: 2.2rem; font-weight: 600; line-height: 1; color: var(--navy); }
  .results-numbers span { color: var(--muted); font-size: 0.9rem; }
  .results-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .result-case { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: 8px; padding: 24px 22px; }
  .result-client { margin: 0 0 14px; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1.1rem; color: var(--navy); }
  .result-case dl { margin: 0 0 18px; }
  .result-case dt { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: #0B2D3B; }
  .result-case dd { margin: 2px 0 12px; color: var(--muted); font-size: 0.92rem; }
  .result-number { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.92rem; }
  .result-number strong { display: block; font-family: 'Inter', sans-serif; font-size: 1.8rem; line-height: 1.1; color: #0B2D3B; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .results-numbers strong, :root:not([data-theme="light"]) .result-client { color: var(--gold-bright); }
    :root:not([data-theme="light"]) .result-number strong { color: #4F6B8F; }
  }
  :root[data-theme="dark"] .results-numbers strong, :root[data-theme="dark"] .result-client { color: var(--gold-bright); }
  :root[data-theme="dark"] .result-number strong { color: #4F6B8F; }

  /* Process band */
  .band { background: #103848; color: #F7F6F2; border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); }
  .band h2 { color: var(--white); }
  .band p.section-sub { color: #C6CBD6; }
  .how { background: #F7F6F2; border-top: 1px solid var(--line); }
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
  .step { padding: 28px 28px 8px 0; }
  .step + .step { padding-left: 28px; border-left: 1px solid var(--line); }
  .step .num { font-family: 'Inter', monospace; font-size: 0.95rem; color: #0B2D3B; margin-bottom: 10px; }
  .step h3 { margin: 0 0 8px; font-size: 1.2rem; font-weight: 600; color: var(--navy-deep); }
  .step p { margin: 0 0 14px; color: var(--muted); font-size: 0.95rem; }
  .step .price { font-size: 0.9rem; font-weight: 600; color: #0B2D3B; }

  /* Offer: ways to work, tiers, consulting, comparison */
  .offer { background: var(--navy-deep); color: #F7F6F2; }
  .offer h2, .offer h3, .offer h4 { color: #fff; }
  .offer .section-title { margin-bottom: 16px; max-width: none; }
  .offer-rule { width: 48px; height: 3px; margin: 0 0 22px; border: 0; background: var(--gold); }
  .offer .section-sub { color: #C6CBD6; margin-bottom: 32px; }
  .offer-block { margin-top: 76px; scroll-margin-top: calc(100px + env(safe-area-inset-top, 0px)); }
  .offer-heading { margin: 0 0 10px; font-size: clamp(1.4rem, 2.4vw, 1.75rem); font-weight: 600; letter-spacing: -0.01em; }
  .offer-lead { margin: 0 0 28px; max-width: 52ch; color: #C6CBD6; font-size: 0.95rem; }

  .o-card { background: #103848; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 24px; }
  .o-pill { display: inline-block; margin-bottom: 12px; padding: 3px 9px; border-radius: 3px; background: var(--gold-bright); color: var(--navy-deep); font-size: 0.72rem; font-weight: 600; }
  .paths { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .path { display: block; text-decoration: none; transition: border-color 0.2s ease, transform 0.2s ease; }
  .path:hover { border-color: rgba(79,107,143,0.7); transform: translateY(-3px); }
  .path h3 { margin: 0 0 8px; font-size: 1.35rem; font-weight: 600; }
  .path p { margin: 0; color: #C6CBD6; font-size: 0.92rem; }

  .o-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .o-tier {
    display: flex; flex-direction: column; overflow: hidden; background: #103848;
    border: 1px solid rgba(255,255,255,0.1); border-top: 3px solid var(--gold); border-radius: 8px;
  }
  .o-tier-body { flex: 1; padding: 24px 22px 16px; }
  .o-tier h4 { margin: 0 0 6px; font-size: 1.3rem; font-weight: 600; }
  .o-tier .what { min-height: 2.9em; margin: 0 0 22px; color: #C6CBD6; font-size: 0.88rem; line-height: 1.45; }
  .o-label { margin: 0 0 6px; color: #C6CBD6; font-size: 0.72rem; }
  .o-tier ul { list-style: none; margin: 0; padding: 0; }
  .o-tier li { position: relative; padding: 8px 0 8px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 0.9rem; }
  .o-tier li:last-child { border-bottom: 0; }
  .o-tier li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 6px; height: 6px; background: var(--gold); }
  .o-tier-foot {
    display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 22px;
    background: rgba(255,255,255,0.03); border-top: 1px solid rgba(255,255,255,0.08);
  }
  .o-tier-price { padding: 12px 22px; border-top: 1px solid rgba(255,255,255,0.08); }
  .o-tier-price p { margin: 0; color: #C6CBD6; font-size: 0.85rem; line-height: 1.7; }
  .o-tier-price strong { color: #fff; font-family: 'Inter', sans-serif; font-size: 1rem; }
  .o-tier-foot span { color: #C6CBD6; font-size: 0.8rem; }
  .o-tier-foot strong { color: var(--gold-bright); font-family: 'Inter', sans-serif; font-size: 1.1rem; }

  .o-strip {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; padding: 14px 16px 14px 22px;
    background: #103848; border-left: 4px solid var(--gold); border-radius: 8px;
  }
  .o-strip > strong { color: #fff; font-size: 0.9rem; }
  .o-strip > p { margin: 0; color: #C6CBD6; font-size: 0.9rem; }
  .o-strip > p strong { color: #fff; }
  .o-strip .btn { margin-left: auto; padding: 10px 18px; font-size: 0.9rem; }
  .o-checks { display: flex; flex-wrap: wrap; gap: 8px 16px; list-style: none; margin: 0; padding: 0; }
  .o-checks li { position: relative; padding-left: 18px; color: #C6CBD6; font-size: 0.82rem; }
  .o-checks li::before {
    content: ""; position: absolute; left: 3px; top: 0.3em; width: 5px; height: 9px;
    border: solid var(--gold-bright); border-width: 0 2px 2px 0; transform: rotate(45deg);
  }
  .o-note { margin: 12px 0 0; color: #C6CBD6; font-size: 0.78rem; }
  .btn.outline-gold { background: transparent; border-color: var(--gold); color: var(--gold-bright); }
  .btn.outline-gold:hover { background: rgba(79,107,143,0.12); }

  .o-consult { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  @media (max-width: 1100px) { .o-consult { grid-template-columns: 1fr 1fr; } }
  .o-consult .o-card { display: flex; flex-direction: column; }
  .o-consult h4 { margin: 0 0 10px; font-size: 1.2rem; font-weight: 600; line-height: 1.25; }
  .o-consult p { margin: 0 0 20px; color: #C6CBD6; font-size: 0.88rem; line-height: 1.55; }
  .o-lead-by { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08); color: var(--gold-bright); font-size: 0.8rem; }

  .o-table-wrap { overflow-x: auto; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; }
  .o-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 0.88rem; }
  .o-table th, .o-table td { padding: 16px 20px; text-align: left; vertical-align: middle; border-top: 1px solid rgba(255,255,255,0.07); }
  .o-table thead th, .o-table thead td { border-top: 0; color: #F7F6F2; font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 600; }
  .o-table tbody th { width: 18%; color: #C6CBD6; font-weight: 500; }
  .o-table td { color: #C6CBD6; }
  .o-table .us { background: #103848; color: var(--gold-bright); font-weight: 600; }
  .o-table thead .us { background: #21507A; color: #fff; }
  @media (prefers-reduced-motion: reduce) { .path, .path:hover { transition: none; transform: none; } }

  /* Security */
  .why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
  .why-grid .stat { font-family: 'Inter', sans-serif; font-size: 3.4rem; color: var(--gold-bright); font-weight: 600; line-height: 1; }
  .why-grid p { color: #C6CBD6; }
  .band-deep { background: var(--navy-deep); }
  .review { margin-top: 56px; }
  .review h3 { margin: 0 0 18px; font-size: 1.35rem; font-weight: 600; color: #fff; }
  .review-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin: 0; padding: 0; list-style: none; counter-reset: passo; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08); }
  .review-steps li { counter-increment: passo; display: flex; flex-direction: column; gap: 6px; padding: 20px 18px; background: #103848; }
  .review-steps li::before { content: counter(passo, decimal-leading-zero); font-family: 'Inter', monospace; font-size: 0.85rem; color: var(--gold-bright); }
  .review-steps strong { color: #fff; font-size: 0.98rem; line-height: 1.3; }
  .review-steps span { color: #C6CBD6; font-size: 0.86rem; line-height: 1.5; }
  @media (max-width: 900px) { .review-steps { grid-template-columns: 1fr 1fr; } .review-steps li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
  @media (max-width: 640px) { .review-steps { grid-template-columns: 1fr; } }

  /* Team */
  #equipe { background: var(--card); }
  .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  /* Sem JS (cartão expande no lugar), cada cartão cresce sozinho */
  html:not(.tem-janela) .team-grid { align-items: start; }
  @media (max-width: 1100px) { .team-grid { grid-template-columns: 1fr 1fr; } }
  .team-card {
    display: flex; flex-direction: column; overflow: hidden; background: #fff;
    border: 1px solid var(--line); border-radius: 10px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .team-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -26px rgba(11,45,59,0.45); }
  .team-photo { aspect-ratio: 1 / 1; overflow: hidden; background: var(--navy-deep); }
  .team-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
  .team-card:hover .team-photo img { transform: scale(1.04); }
  @media (prefers-reduced-motion: reduce) { .team-card, .team-card:hover, .team-photo img, .team-card:hover .team-photo img { transition: none; transform: none; } }
  .team-caption { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 24px 20px; background: var(--navy); }
  .team-caption h3 { margin: 0; font-size: clamp(1.2rem, 1.6vw, 1.35rem); font-weight: 600; color: #fff; white-space: nowrap; }
  .team-card .role-tag { font-size: 0.78rem; font-weight: 600; color: var(--navy); background: var(--gold); padding: 3px 9px; border-radius: 3px; }
  .team-body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 20px 24px 24px; border-top: 3px solid var(--gold); }
  .team-card .area-pill { margin-bottom: 16px; padding: 4px 10px; border-radius: 4px; background: var(--card); color: var(--navy); font-size: 0.75rem; font-weight: 600; }
  .team-quote { margin: 0 0 12px; font-family: 'Inter', sans-serif; font-size: 1.2rem; font-weight: 600; line-height: 1.3; color: var(--navy); }
  @media (min-width: 1101px) { .team-quote { min-height: 5.2em; } }
  .team-card .bio { margin: 0 0 22px; color: var(--muted); font-size: 0.9rem; line-height: 1.6; }
  .team-card ul.credentials { list-style: none; width: 100%; margin: auto 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); }
  .team-card ul.credentials li { position: relative; margin-bottom: 8px; padding-left: 16px; color: var(--muted); font-size: 0.85rem; }
  .team-card ul.credentials li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; background: var(--gold); }
  /* "Ler mais" da equipe: bio, credenciais e redes ficam recolhidas */
  .team-more { width: 100%; margin-top: auto; border-top: 1px solid var(--line); }
  .team-more summary {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 0 2px; cursor: pointer; list-style: none;
    font-size: 0.9rem; font-weight: 600; color: var(--navy);
  }
  .team-more summary::-webkit-details-marker { display: none; }
  .team-more summary::after {
    content: ""; width: 9px; height: 9px; margin-right: 4px; border: solid var(--gold); border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(-3px); transition: transform 0.2s ease;
  }
  .team-more[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
  .team-more summary { justify-content: flex-start; }
  .team-more summary::after { margin-left: auto; }
  .team-more .txt-menos, .team-more[open] .txt-mais { display: none; }
  .team-more[open] .txt-menos { display: inline; }
  .team-more .bio { margin-top: 12px; }
  .team-card .team-more ul.credentials { margin-top: 0; }
  .team-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
  .team-social a {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px;
    border: 1px solid rgba(11,45,59,0.2); color: var(--navy); font-size: 0.82rem; font-weight: 600; text-decoration: none;
  }
  .team-social a:hover { border-color: var(--gold); background: rgba(79,107,143,0.1); }
  .team-social svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  @media (prefers-reduced-motion: reduce) { .team-more summary::after { transition: none; } }

  /* FAQ */
  .faq { max-width: 780px; border-top: 1px solid var(--line); }
  .faq details { border-bottom: 1px solid var(--line); }
  .faq summary { cursor: pointer; list-style: none; padding: 20px 36px 20px 0; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1.08rem; position: relative; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font-size: 1.5rem; font-weight: 400; color: var(--gold); transition: transform 0.2s ease; }
  .faq details[open] summary::after { transform: rotate(45deg); }
  .faq details p { margin: 0 0 22px; color: var(--muted); max-width: 64ch; }

  /* Final CTA */
  .final { background: var(--navy-deep); color: var(--white); text-align: left; }
  .final .wrap { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items: center; }
  .final h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin: 0 0 14px; line-height: 1.15; max-width: 18ch; letter-spacing: -0.01em; }
  .final p { color: #C6CBD6; margin: 0; max-width: 50ch; }
  .final .ctas { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
  .final .ctas .btn { text-align: center; }
  .final .ctas small { color: #C6CBD6; font-size: 0.85rem; text-align: center; }

  /* Contact form */
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .final .wrap.contact-wrap { display: block; margin-top: 56px; }
  .contact-form { max-width: 780px; padding: 28px; background: #103848; border: 1px solid rgba(255,255,255,0.1); border-top: 3px solid var(--gold); border-radius: 10px; }
  .contact-form h3 { margin: 0 0 18px; font-size: 1.35rem; font-weight: 600; color: #fff; }
  .contact-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
  .contact-form fieldset:disabled { opacity: 0.55; }
  .contact-form.is-sent fieldset { display: none; }
  .form-off { margin: 0 0 18px; padding: 12px 14px; border-left: 3px solid var(--gold); background: rgba(255,255,255,0.04); color: #F7F6F2; font-size: 0.92rem; }
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; }
  .field { display: flex; flex-direction: column; }
  .field-wide { grid-column: 1 / -1; }
  .field label { margin-bottom: 6px; color: #F7F6F2; font-size: 0.9rem; font-weight: 500; }
  .field .optional { color: #C6CBD6; font-weight: 400; }
  .field input, .field textarea {
    width: 100%; padding: 11px 12px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.28);
    background: #0B2D3B; color: #fff; font: inherit; font-size: 1rem;
  }
  .field textarea { resize: vertical; min-height: 110px; }
  .field input:focus-visible, .field textarea:focus-visible, .consent input:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; border-color: var(--gold-bright); }
  .field [aria-invalid="true"] { border-color: #f0a595; }
  .field-error { min-height: 1.4em; margin: 4px 0 8px; color: #f4b3a6; font-size: 0.82rem; }
  .consent { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: start; margin-top: 6px; }
  .consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--gold); }
  .consent label { margin: 0; font-weight: 400; color: #C6CBD6; font-size: 0.88rem; }
  .consent label a { color: var(--gold-bright); }
  .consent .field-error { grid-column: 2; }
  .contact-form button { margin-top: 6px; cursor: pointer; font-family: inherit; }
  .contact-form button:disabled { cursor: progress; }
  .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
  .form-status { margin: 14px 0 0; font-size: 0.95rem; color: #F7F6F2; }
  .form-status:empty { display: none; }
  .form-status.carregando::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px; border: 2px solid var(--gold-bright); border-right-color: transparent; border-radius: 50%; animation: gira 0.8s linear infinite; }
  @keyframes gira { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .form-status.carregando::before { animation: none; } }
  .form-status.sucesso { padding: 14px 16px; border-left: 3px solid #4F6B8F; background: rgba(79,107,143,0.1); }
  .form-status.sucesso:focus { outline: none; }
  .form-status.erro { color: #f4b3a6; }
  .form-status.erro a { color: var(--gold-bright); }
  @media (max-width: 640px) {
    .form-grid { grid-template-columns: 1fr; }
    .contact-form { padding: 22px 18px; }
    .contact-form button { width: 100%; }
  }

  footer { padding: 36px 0 40px; border-top: 1px solid var(--line); }
  footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; }
  footer p { color: #575E66; font-size: 0.86rem; margin: 0; }
  .footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
  .footer-links a { color: #575E66; font-size: 0.86rem; text-underline-offset: 3px; }
  .footer-links a:hover { color: var(--ink); }
  /* Página de texto (política de privacidade) */
  .doc { max-width: 760px; }
  .doc h2 { margin: 36px 0 10px; font-size: 1.3rem; font-weight: 600; }
  .doc p, .doc li { color: var(--muted); }
  .doc ul { padding-left: 20px; }
  .doc li { margin-bottom: 6px; }
  .doc a { color: var(--navy); text-underline-offset: 3px; }

  .link-btn { padding: 0; border: 0; background: none; color: #575E66; font: inherit; font-size: 0.86rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .link-btn:hover { color: var(--ink); }

  /* Cookie banner */
  .cookie-banner {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40; max-width: 720px; margin: 0 auto;
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding: 18px 20px;
    background: var(--navy-deep); color: #F7F6F2; border: 1px solid rgba(79,107,143,0.45); border-radius: 10px;
    box-shadow: 0 20px 40px -20px rgba(0,0,0,0.6);
  }
  .cookie-banner p { flex: 1 1 320px; margin: 0; font-size: 0.9rem; line-height: 1.5; }
  .cookie-banner a { color: var(--gold-bright); }
  .cookie-actions { display: flex; gap: 10px; }
  .cookie-actions .btn { cursor: pointer; font-family: inherit; }
  .btn.outline-light { background: transparent; border-color: rgba(255,255,255,0.45); color: #fff; }
  .btn.outline-light:hover { background: rgba(255,255,255,0.08); }

  /* Mobile sticky CTA */
  .sticky-cta { display: none; }

  @media (max-width: 900px) {
    .hero .wrap, .final .wrap, .why-grid { grid-template-columns: 1fr; }
    .hero-video { max-width: 720px; }
    .problem-grid { grid-template-columns: 1fr 1fr; }
    .cases, .team-grid { grid-template-columns: 1fr 1fr; }
    .results-cases { grid-template-columns: 1fr; }
    .o-tiers, .o-consult { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
    .step, .step + .step { padding: 24px 0 8px; border-left: none; border-bottom: 1px solid var(--line); }
  }
  @media (max-width: 640px) {
    .wrap { padding: 0 20px; }
    section { padding: 64px 0; }
    header.top .btn { padding: 9px 14px; font-size: 0.85rem; }
    .submark { display: none; }
    .logo-icon { height: 40px; }
    .logo-wordmark { height: 40px; }
    .mark { font-size: 1.4rem; }
    .problem-grid, .cases, .team-grid, .results-numbers { grid-template-columns: 1fr; }
    .paths { grid-template-columns: 1fr; }
    .o-tier .what { min-height: 0; }
    .o-strip .btn { margin-left: 0; width: 100%; text-align: center; }
    .sticky-cta {
      display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
      background: var(--navy-deep); border-top: 1px solid rgba(79,107,143,0.4);
      padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    }
    .sticky-cta .btn { display: block; text-align: center; }
    body { padding-bottom: 72px; }
    .cookie-banner { bottom: 80px; left: 12px; right: 12px; padding: 16px; }
    .cookie-actions { width: 100%; }
    .cookie-actions .btn { flex: 1; text-align: center; }
  }

  /* Fluxos com ícones (Como funciona e Como revisamos) */
  .flow-icon {
    position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
    background: var(--paper); border: 2px solid var(--gold); color: var(--navy);
  }
  .flow-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .steps.flow { gap: 32px; border-top: 0; }
  .steps.flow .step, .steps.flow .step + .step { position: relative; padding: 0; border: 0; }
  .steps.flow .step:not(:last-child)::after {
    content: ""; position: absolute; top: 28px; left: 68px; right: -32px; height: 2px; background: var(--gold);
  }
  .steps.flow .flow-icon { margin-bottom: 16px; }
  .steps.flow .num { margin-bottom: 4px; font-size: 0.8rem; letter-spacing: 0.04em; }
  .steps.flow .price { display: inline-block; padding: 4px 10px; border-radius: 4px; background: var(--paper); border: 1px solid var(--line); font-size: 0.85rem; }

  .review-steps.flow { gap: 24px; background: none; border: 0; counter-reset: none; }
  .review-steps.flow li { position: relative; padding: 0; background: none; gap: 6px; }
  .review-steps.flow li::before { content: none; }
  .review-steps.flow li:not(:last-child)::after {
    content: ""; position: absolute; top: 28px; left: 68px; right: -24px; height: 2px; background: rgba(79,107,143,0.6);
  }
  .review-steps.flow .flow-icon { margin-bottom: 10px; background: var(--navy); color: var(--gold); }
  .review-steps.flow li:last-child:nth-child(odd) { grid-column: auto; }

  @media (max-width: 900px) {
    .steps.flow, .review-steps.flow { grid-template-columns: 1fr; gap: 26px; }
    .steps.flow .step, .steps.flow .step + .step, .review-steps.flow li { padding-left: 76px; min-height: 56px; border: 0; }
    .steps.flow .flow-icon, .review-steps.flow .flow-icon { position: absolute; left: 0; top: 0; margin: 0; }
    .steps.flow .step:not(:last-child)::after, .review-steps.flow li:not(:last-child)::after {
      top: 60px; bottom: -24px; left: 27px; right: auto; width: 2px; height: auto;
    }
    .review-steps.flow li:last-child:nth-child(odd) { grid-column: auto; }
  }

  /* Gráfico dos 45% */
  .stat-chart { display: flex; align-items: center; gap: 22px; margin-bottom: 14px; }
  .donut { position: relative; flex: none; width: 132px; height: 132px; margin: 0; }
  .donut svg { width: 100%; height: 100%; }
  .donut circle { fill: none; stroke-width: 16; }
  .donut-track { stroke: rgba(255,255,255,0.16); }
  .donut-value { stroke: var(--gold); stroke-linecap: butt; }
  .donut.anima .donut-value { animation: donut-enche 1.2s ease-out both; }
  @keyframes donut-enche { from { stroke-dasharray: 0 314.16; } }
  @media (prefers-reduced-motion: reduce) { .donut.anima .donut-value { animation: none; } }
  .donut-label { position: absolute; inset: 0; display: grid; place-items: center; font-family: 'Inter', sans-serif; font-size: 1.9rem; font-weight: 600; color: #fff; }
  .donut-legend { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; color: #C6CBD6; }
  .donut-legend li { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
  .donut-legend .sw { width: 12px; height: 12px; border-radius: 2px; }
  .donut-legend .sw-on { background: var(--gold); }
  .donut-legend .sw-off { background: rgba(255,255,255,0.16); }

  /* Gráfico de prazos */
  .timeline-chart { margin: 0 0 28px; padding: 22px 24px 18px; background: #103848; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; }
  .timeline-chart figcaption { margin-bottom: 16px; color: #fff; font-family: 'Inter', sans-serif; font-weight: 600; }
  .tl-row { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 14px; margin-bottom: 12px; }
  .tl-name { color: #F7F6F2; font-size: 0.9rem; font-weight: 600; }
  .tl-track { position: relative; height: 30px; border-radius: 4px; background: rgba(255,255,255,0.06); }
  .tl-bar { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; border-radius: 4px; background: var(--gold); }
  .tl-val { color: var(--navy); font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
  .tl-axis-row { margin: 0; }
  .tl-axis { position: relative; height: 18px; }
  .tl-axis span { position: absolute; transform: translateX(-50%); color: #C6CBD6; font-size: 0.75rem; }
  .timeline-chart.anima .tl-bar { animation: barra-cresce 0.9s ease-out both; transform-origin: left; }
  @keyframes barra-cresce { from { transform: scaleX(0); } }
  @media (prefers-reduced-motion: reduce) { .timeline-chart.anima .tl-bar { animation: none; } }
  @media (max-width: 640px) {
    .timeline-chart { padding: 18px 14px 14px; }
    .tl-row { grid-template-columns: 70px 1fr; gap: 8px; }
    .tl-name { font-size: 0.82rem; }
    .tl-val { font-size: 0.7rem; }
  }
  .tl-name small { display: none; }
  @media (max-width: 640px) {
    .tl-name small { display: block; color: #C6CBD6; font-size: 0.72rem; font-weight: 400; }
    .tl-val { display: none; }
  }

  /* Carrossel dos tipos de sistema: faixa que rola para o lado */
  .carousel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
  .carousel-head .section-sub { margin-bottom: 0; }
  .carousel-nav { display: flex; gap: 10px; flex: none; }
  .carousel-btn {
    display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border-radius: 50%; cursor: pointer;
    background: var(--paper); border: 1px solid rgba(11,45,59,0.25); color: var(--navy); transition: background 0.15s ease, border-color 0.15s ease;
  }
  .carousel-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .carousel-btn:hover:not(:disabled) { background: var(--gold); border-color: var(--gold); }
  .carousel-btn:disabled { opacity: 0.35; cursor: default; }
  .carousel-play .ic-play, .carousel-play[aria-pressed="true"] .ic-pause { display: none; }
  .carousel-play[aria-pressed="true"] .ic-play { display: block; }
  .carousel-play .ic-play { fill: currentColor; stroke: none; width: 18px; height: 18px; }
  .cases.carousel {
    display: flex; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    padding: 8px 0 18px; scrollbar-width: thin; scrollbar-color: var(--gold) var(--card);
  }
  .cases.carousel::-webkit-scrollbar { height: 8px; }
  .cases.carousel::-webkit-scrollbar-track { background: var(--card); border-radius: 4px; }
  .cases.carousel::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 4px; }
  .cases.carousel:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
  .cases.carousel .case { flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start; }
  @media (prefers-reduced-motion: reduce) { .cases.carousel { scroll-behavior: auto; } }
  @media (max-width: 900px) { .cases.carousel .case { flex-basis: calc((100% - 20px) / 2); } }
  @media (max-width: 640px) {
    .carousel-head { align-items: flex-start; flex-direction: column; gap: 14px; }
    .cases.carousel .case { flex-basis: 100%; }
  }

  /* Janela com o perfil completo da equipe */
  html.modal-aberto { overflow: hidden; }
  .team-modal {
    width: min(920px, calc(100% - 32px)); max-height: calc(100% - 48px); padding: 0; border: 0; border-radius: 14px;
    background: var(--paper); color: var(--ink); box-shadow: 0 40px 80px -30px rgba(11,45,59,0.6); overflow: hidden;
  }
  .team-modal::backdrop { background: rgba(11,45,59,0.65); }
  .team-modal[open] { display: flex; animation: modal-entra 0.2s ease-out; }
  @keyframes modal-entra { from { opacity: 0; transform: translateY(12px); } }
  @media (prefers-reduced-motion: reduce) { .team-modal[open] { animation: none; } }
  .team-modal-corpo { display: grid; grid-template-columns: 0.85fr 1.15fr; width: 100%; overflow-y: auto; }
  .team-modal-foto { background: var(--navy); }
  .team-modal-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .team-modal-info { display: flex; flex-direction: column; align-items: flex-start; padding: 32px 32px 30px; }
  .team-modal-info .role-tag { font-size: 0.78rem; font-weight: 600; color: var(--navy-deep); background: var(--gold); padding: 3px 9px; border-radius: 3px; }
  .team-modal-info h2 { margin: 12px 0 14px; font-size: 1.8rem; font-weight: 600; line-height: 1.15; color: var(--navy); }
  .team-modal-info .area-pill { margin-bottom: 16px; padding: 4px 10px; border-radius: 4px; background: var(--card); color: var(--navy); font-size: 0.78rem; font-weight: 600; }
  .team-modal-info .team-quote { min-height: 0; margin: 0 0 14px; font-family: 'Inter', sans-serif; font-size: 1.25rem; font-weight: 600; line-height: 1.3; color: var(--navy); }
  .team-modal-info .bio { margin: 0 0 20px; color: var(--muted); font-size: 0.95rem; line-height: 1.65; }
  .team-modal-info ul.credentials { list-style: none; width: 100%; margin: 0 0 18px; padding: 16px 0 0; border-top: 1px solid var(--line); }
  .team-modal-info ul.credentials li { position: relative; margin-bottom: 8px; padding-left: 16px; color: var(--muted); font-size: 0.9rem; }
  .team-modal-info ul.credentials li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; background: var(--gold); }
  .team-modal-fechar {
    position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
    border: 0; border-radius: 50%; background: var(--paper); color: var(--navy); cursor: pointer; box-shadow: 0 2px 10px rgba(11,45,59,0.2);
  }
  .team-modal-fechar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
  .team-modal-fechar:hover { background: var(--card); }
  .team-modal-fechar:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  @media (max-width: 760px) {
    .team-modal { max-height: calc(100% - 24px); width: calc(100% - 24px); }
    .team-modal-corpo { grid-template-columns: 1fr; }
    .team-modal-foto img { height: auto; max-height: 300px; aspect-ratio: 1 / 1; }
    .team-modal-info { padding: 22px 20px 24px; }
    .team-modal-info h2 { font-size: 1.5rem; }
  }
  /* Com a janela ativa (JS), a seta aponta para o lado e o cartão inteiro é clicável */
  .tem-janela .team-more summary::after { transform: rotate(-45deg) translateY(-1px); }
  .tem-janela .team-card { cursor: pointer; }
  .tem-janela .team-card:hover .team-more summary .txt-mais { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; }
  /* Título opcional acima das credenciais (ex.: "Formação") */
  .cred-label { width: 100%; margin: 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); }
  .team-card .cred-label + ul.credentials, .team-modal-info .cred-label + ul.credentials { border-top: 0; padding-top: 10px; }

  /* Leitura integrada das quatro atuações, abaixo dos cartões da equipe */
  .team-integrada { margin-top: 44px; padding: 30px 30px 26px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
  .team-integrada h3 { margin: 0 0 20px; font-size: 1.3rem; font-weight: 600; color: var(--navy); }
  .team-integrada ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; }
  .team-integrada li { padding-top: 14px; border-top: 3px solid var(--gold); color: var(--muted); font-size: 0.92rem; line-height: 1.55; }
  .team-integrada li strong { display: block; margin-bottom: 4px; font-family: 'Inter', sans-serif; font-size: 1.08rem; color: var(--navy); }
  @media (max-width: 1100px) { .team-integrada ul { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 640px) { .team-integrada { padding: 22px 18px; } .team-integrada ul { grid-template-columns: 1fr; gap: 18px; } }

  /* Botão para ouvir a narração do vídeo do topo (o vídeo começa sem som) */
  .video-som {
    position: absolute; left: 14px; top: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px; border: 0; border-radius: 24px; background: rgba(11,45,59,0.88); color: #fff;
    font: 600 0.9rem 'Inter', sans-serif; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  }
  .video-som svg { width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .video-som:hover { background: var(--navy); }
  .video-som:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

  /* ---------- Revisão 10/2026: navegação, leitura e movimento ---------- */

  /* Rótulo curto acima do título de cada seção: ajuda quem passa o olho a saber onde está */
  .eyebrow {
    margin: 0 0 12px; font-family: 'Inter', monospace; font-size: 0.78rem; font-weight: 500;
    letter-spacing: 0.08em; text-transform: uppercase; color: #4F6B8F;
  }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .eyebrow { color: var(--gold-bright); } }
  :root[data-theme="dark"] .eyebrow { color: var(--gold-bright); }

  /* Menu: links no desktop, gaveta abaixo de 1080px */
  .nav-links { display: flex; align-items: center; }
  .menu-toggle {
    display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; margin-left: 10px; padding: 0 11px;
    border: 1px solid var(--line); border-radius: 6px; background: transparent; cursor: pointer;
  }
  .menu-toggle span { display: block; height: 2px; border-radius: 2px; background: var(--navy); transition: transform 0.25s ease, opacity 0.2s ease; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  header.top { transition: box-shadow 0.25s ease; }
  header.top.rolou { box-shadow: 0 8px 24px -18px rgba(11,45,59,0.5); }
  @media (max-width: 1080px) {
    .nav-links { display: none; }
    .tem-menu .menu-toggle { display: inline-flex; }
    .tem-menu .nav-links {
      display: flex; flex-direction: column; align-items: stretch; position: absolute; top: 100%; left: 0; right: 0;
      padding: 8px 20px 18px; background: var(--paper); border-bottom: 1px solid var(--line);
      box-shadow: 0 18px 30px -20px rgba(11,45,59,0.45);
      opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    }
    .tem-menu .nav-links.aberto { opacity: 1; visibility: visible; transform: none; }
    .tem-menu .nav-links a { margin: 0; padding: 14px 4px; font-size: 1.02rem; border-bottom: 1px solid var(--line); }
    .tem-menu .nav-links a:last-child { border-bottom: 0; }
  }
  @media (max-width: 420px) { header.top .btn { padding: 9px 12px; font-size: 0.82rem; } .menu-toggle { margin-left: 8px; } }

  /* Topo: palavra "planilha" sublinhada com traço que se desenha */
  .hero h1 .hl { position: relative; white-space: nowrap; }
  .hero h1 .hl::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0.04em; height: 0.14em; border-radius: 2px;
    background: var(--gold); transform-origin: left; animation: traco 0.9s 0.6s cubic-bezier(.2,.7,.2,1) both;
  }
  @keyframes traco { from { transform: scaleX(0); } }
  .hero .lede b { color: var(--navy); font-weight: 600; }
  .hero > .wrap > div:first-child > * { animation: sobe 0.7s cubic-bezier(.2,.7,.2,1) both; }
  .hero > .wrap > div:first-child > :nth-child(2) { animation-delay: 0.08s; }
  .hero > .wrap > div:first-child > :nth-child(3) { animation-delay: 0.16s; }
  .hero > .wrap > div:first-child > :nth-child(4) { animation-delay: 0.24s; }
  .hero > .wrap > div:first-child > :nth-child(5) { animation-delay: 0.32s; }
  .hero > .wrap > div:first-child > :nth-child(6) { animation-delay: 0.40s; }
  .hero-video { animation: sobe 0.9s 0.2s cubic-bezier(.2,.7,.2,1) both; }
  .hero::before { animation: grade 18s linear infinite; }
  @keyframes sobe { from { opacity: 0; transform: translateY(18px); } }
  @keyframes grade { to { background-position: 42px 42px; } }

  /* Entrada dos blocos ao rolar (só com JS; sem JS tudo aparece normalmente) */
  .tem-revelar .revela { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--atraso, 0s); }
  .tem-revelar .revela.visivel { opacity: 1; transform: none; }

  /* Linhas dos fluxos se desenham quando a seção aparece */
  .tem-revelar .flow > :not(:last-child)::after { transform: scaleX(0); transform-origin: left; transition: transform 0.8s ease; transition-delay: calc(var(--atraso, 0s) + 0.35s); }
  .tem-revelar .flow > .visivel:not(:last-child)::after { transform: none; }
  @media (max-width: 900px) {
    .tem-revelar .flow > :not(:last-child)::after { transform: scaleY(0); transform-origin: top; }
  }

  /* Botões: leve retorno ao passar o mouse */
  .btn { transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease; }
  .btn.gold:hover, .btn.big:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(11,45,59,0.55); }
  .btn.gold.big { position: relative; overflow: hidden; }
  .btn.gold.big::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent); transform: skewX(-20deg);
    animation: brilho 5s 2s ease-in-out infinite;
  }
  @keyframes brilho { 0%, 70% { left: -60%; } 100% { left: 130%; } }

  /* Comparativo, agora na seção de alternativas (fundo claro) */
  .compare { margin-top: 48px; }
  .compare-heading { margin: 0 0 16px; font-size: 1.25rem; font-weight: 600; color: var(--navy); }
  .compare .o-table-wrap { border-color: var(--line); }
  .compare .o-table th, .compare .o-table td { border-top-color: var(--line); }
  .compare .o-table thead th, .compare .o-table thead td { color: var(--navy); }
  .compare .o-table tbody th { color: var(--muted); }
  .compare .o-table td { color: var(--muted); }
  .compare .o-table .us { background: rgba(79,107,143,0.12); color: var(--navy); }
  .compare .o-table thead .us { background: var(--navy); color: #fff; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .compare-heading, :root:not([data-theme="light"]) .compare .o-table thead th, :root:not([data-theme="light"]) .compare .o-table .us { color: #F7F6F2; }
  }
  :root[data-theme="dark"] .compare-heading, :root[data-theme="dark"] .compare .o-table thead th, :root[data-theme="dark"] .compare .o-table .us { color: #F7F6F2; }

  /* Tabela no celular: cada linha vira um cartão, sem rolagem lateral */
  @media (max-width: 640px) {
    .compare .o-table-wrap { overflow: visible; border: 0; }
    .compare .o-table { min-width: 0; }
    .compare .o-table thead { display: none; }
    .compare .o-table tr { display: block; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
    .compare .o-table tbody th { display: block; width: auto; padding: 12px 14px; background: var(--card); color: var(--navy); font-weight: 600; border: 0; }
    .compare .o-table td { display: grid; grid-template-columns: 42% 1fr; gap: 10px; padding: 10px 14px; }
    .compare .o-table td::before { content: attr(data-rotulo); font-size: 0.78rem; font-weight: 600; color: var(--navy); }
  }

  /* Tablet e celular: ritmo de leitura */
  @media (max-width: 1080px) and (min-width: 901px) {
    .hero .wrap { grid-template-columns: 1fr 1fr; gap: 32px; }
  }
  @media (max-width: 900px) {
    .hero { padding: 56px 0 64px; }
    .hero .wrap { gap: 36px; }
    .hero h1 { max-width: 18ch; }
    .hero-video { width: 100%; }
  }
  @media (max-width: 640px) {
    .hero { padding: 36px 0 48px; }
    .hero .tag { margin-bottom: 16px; font-size: 0.8rem; }
    .hero h1 { font-size: 1.95rem; }
    .hero p.lede { font-size: 1.04rem; margin-bottom: 24px; }
    .hero-actions .btn { flex: 1 1 100%; text-align: center; }
    h2.section-title { font-size: 1.55rem; }
    p.section-sub { margin-bottom: 32px; }
    .offer-block { margin-top: 56px; }
    .team-integrada ul { gap: 14px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero > .wrap > div:first-child > *, .hero-video, .hero::before, .hero h1 .hl::after, .btn.gold.big::after { animation: none; }
    .tem-revelar .revela, .tem-revelar .flow > :not(:last-child)::after { opacity: 1; transform: none; transition: none; }
    .btn, .btn:hover { transform: none; }
  }

  /* ---------- Celular: vídeo em tela cheia, faixas deslizantes e divisões claras ---------- */

  /* Rótulo de seção com traço: marca o começo de cada parte */
  .eyebrow { display: flex; align-items: center; gap: 10px; }
  .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--gold); flex: none; }

  /* Barra do WhatsApp: com JS, só aparece depois dos botões do topo e some no contato */
  .tem-barra .sticky-cta { transition: transform 0.3s ease; }
  .tem-barra:not(.mostra-barra) .sticky-cta { transform: translateY(110%); }

  @media (max-width: 640px) {
    /* Topo: o vídeo sobe para logo abaixo do título e ocupa a largura toda */
    .hero { padding-bottom: 0; background: #F7F6F2; }
    .hero .wrap { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
    .hero .wrap > div:first-child { display: contents; }
    .hero .tag { order: 1; align-self: flex-start; }
    .hero .for-whom { order: 2; }
    .hero h1 { order: 3; margin-bottom: 22px; }
    .hero-video { order: 4; }
    .hero p.lede { order: 5; margin-top: 24px; }
    .hero-actions { order: 6; }
    .hero .fineprint { order: 7; padding-bottom: 36px; }
    .hero-video {
      margin: 0 -20px; width: auto; aspect-ratio: auto; overflow: visible;
      border: 0; border-radius: 0; box-shadow: none; background: none;
    }
    .brand-video { aspect-ratio: 16 / 9; height: auto; background: var(--navy); }
    .video-som { position: static; margin: 12px 20px 0; box-shadow: none; }

    /* Seções alternam fundo; o primeiro bloco depois do topo fica branco com linha */
    #exemplos { border-top: 1px solid var(--line); }
    #rapido-seguro, #problema, #duvidas { background: var(--paper); }
    section { padding: 56px 0; }
    .eyebrow { margin-bottom: 10px; }

    /* Cartões em faixa que desliza para o lado, com o próximo aparecendo na borda */
    .team-grid, .team-integrada ul {
      display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
      margin: 0 -20px; padding: 4px 20px 16px; scroll-padding: 0 20px; scrollbar-width: none;
      background: none; border: 0;
    }
    .team-grid::-webkit-scrollbar, .team-integrada ul::-webkit-scrollbar { display: none; }
    .team-grid > *, .team-integrada li {
      flex: 0 0 84%; scroll-snap-align: start;
    }
    .problem-cell { border: 1px solid var(--line); border-radius: 8px; }
    .team-grid { align-items: stretch; }
    .team-integrada { padding: 22px 0 6px; overflow: hidden; }
    .team-integrada h3 { padding: 0 18px; }
    .team-integrada ul { margin: 0; padding: 4px 18px 16px; }
    .team-integrada li { flex-basis: 78%; }
    .o-tier .what { min-height: 0; }
    .o-tier-foot strong { white-space: nowrap; }

    /* Dica de deslizar, escrita pelo JS abaixo de cada faixa */
    .dica-deslize { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; font-size: 0.8rem; color: var(--muted); }
    .dica-deslize::after { content: "→"; color: var(--gold); font-weight: 700; animation: desliza 1.6s ease-in-out infinite; }
    .offer .dica-deslize, .band .dica-deslize { color: #C6CBD6; }
    @keyframes desliza { 50% { transform: translateX(5px); } }
  }
  @media (min-width: 641px) { .dica-deslize { display: none; } }
  @media (prefers-reduced-motion: reduce) { .dica-deslize::after { animation: none; } .tem-barra .sticky-cta { transition: none; } }

  /* Celular: cartões empilham ao rolar. Cada um gruda no topo e o próximo desliza por cima;
     o de baixo encolhe e escurece um pouco (escala e brilho vêm do js/main.js). */
  @media (max-width: 640px) {
    .empilha { display: block; background: none; border: 0; margin: 0; padding: 0; }
    .empilha > * {
      position: sticky; top: calc(84px + var(--i, 0) * 12px); margin: 0 0 16px;
      transform-origin: center top; will-change: transform;
      box-shadow: 0 -10px 30px -18px rgba(11,45,59,0.45);
    }
    .empilha > *:last-child { margin-bottom: 0; }
    .problem-grid.empilha > * { background: var(--paper); }
    .tem-revelar .empilha > .revela { opacity: 1; transform: none; transition: none; }
    .offer .empilha > * { box-shadow: 0 -12px 30px -14px rgba(0,0,0,0.55); }
  }

  /* Celular: só o essencial. Explicações, legendas e blocos repetidos ficam para telas maiores;
     no celular cada seção mostra título, a informação-chave e o próximo passo. */
  @media (max-width: 640px) {
    /* Subtítulos explicativos das seções (o título e o rótulo já dizem do que se trata) */
    #exemplos p.section-sub, #como-funciona p.section-sub, #rapido-seguro p.section-sub,
    .band p.section-sub, #problema p.section-sub, #investimento > .wrap > p.section-sub,
    #equipe p.section-sub, .offer-lead { display: none; }

    /* Topo: etiqueta e título bastam; a frase de público e o botão secundário saem */
    .hero .for-whom, .hero .btn.ghost-light { display: none; }

    /* Soluções: o carrossel já desliza com o dedo; as setas saem */
    .carousel-nav { display: none; }
    .carousel-head { margin-bottom: 8px; }

    /* Prazo e segurança: ficam as listas, sai a frase de apoio de cada coluna */
    .twin .how { display: none; }
    .twin > div { padding: 24px 20px; }

    /* Revisão: fica o número e os nomes das etapas; saem a legenda do gráfico e as descrições */
    .donut-legend, .review-steps.flow li > span:not(.flow-icon) { display: none; }
    .review { margin-top: 36px; }
    .review-steps.flow { gap: 18px; }

    /* Alternativas: os quatro cartões bastam; a tabela repetia a comparação */
    .compare { display: none; }

    /* Investimento: os dois caminhos ficam só com o nome; faixas sem gráfico e sem exemplos */
    .paths .o-card p { display: none; }
    .timeline-chart, .o-tier .o-label, .o-tier ul { display: none; }
    .o-tier .what { margin-bottom: 0; }
    .o-consult .o-card p { display: none; }
    .o-consult h4 { margin-bottom: 4px; }
    .o-lead-by { padding-top: 10px; }
    .offer-block { margin-top: 44px; }

    /* Equipe: cartões com nome, área e frase; a leitura integrada repetia o mesmo */
    .team-integrada { display: none; }

    /* Contato: o formulário ainda desligado ocupava a tela sem servir para nada */
    .contact-wrap:has(.contact-form.is-off) { display: none; }
    #contato:has(.contact-form.is-off) .ctas small { display: none; }
  }

  /* Celular: últimas seções compactas */
  @media (max-width: 640px) {
    /* Investimento: os dois "caminhos" só apontavam para os blocos logo abaixo */
    .paths { display: none; }
    .o-tier-body { padding: 16px 18px 12px; }
    .o-tier h4 { font-size: 1.15rem; margin-bottom: 4px; }
    .o-tier-foot { padding: 10px 18px; }
    .o-strip { padding: 14px 16px; gap: 10px; }
    .o-checks { gap: 6px 14px; }
    .o-consult .o-card { padding: 16px 18px; }
    .o-consult h4 { font-size: 1.05rem; }

    /* Sócios: lista compacta. Foto redonda, nome e área; tocar abre o perfil completo */
    .team-grid { display: grid; grid-template-columns: 1fr; gap: 10px; overflow: visible; margin: 0; padding: 0; }
    .team-grid + .dica-deslize { display: none; }
    .team-card {
      display: grid; grid-template-columns: 64px 1fr 16px; grid-template-areas: "foto nome seta" "foto area seta";
      align-items: center; gap: 2px 14px; padding: 12px 16px 12px 12px; border-radius: 12px;
    }
    .team-card:hover { transform: none; }
    .team-card::after {
      content: ""; grid-area: seta; width: 9px; height: 9px; border: solid var(--gold); border-width: 0 2px 2px 0;
      transform: rotate(-45deg); justify-self: center;
    }
    .team-photo { grid-area: foto; width: 64px; height: 64px; border-radius: 50%; }
    .team-caption { grid-area: nome; align-self: end; padding: 0; background: none; }
    .team-caption h3 { color: var(--navy); font-size: 1.08rem; }
    .team-card .role-tag, .team-quote, .team-more { display: none; }
    .team-body { grid-area: area; align-self: start; padding: 0; border: 0; }
    .team-card .area-pill { margin: 0; padding: 0; background: none; color: var(--muted); font-size: 0.82rem; font-weight: 500; line-height: 1.35; }

    /* Dúvidas: perguntas mais justas */
    .faq summary { padding: 15px 32px 15px 0; font-size: 1rem; line-height: 1.35; }
    .faq summary::after { top: 11px; }

    /* Contato: formulário enxuto (o cargo, opcional, fica para telas maiores) */
    .final .wrap { gap: 24px; }
    .final .wrap.contact-wrap { margin-top: 32px; }
    .contact-form { padding: 20px 16px; }
    .contact-form h3 { font-size: 1.15rem; margin-bottom: 12px; }
    .field:has(#f-cargo) { display: none; }
    .field textarea { min-height: 84px; }
    .field-error { min-height: 0; margin: 4px 0 10px; }

    /* Rodapé */
    footer { padding: 26px 0 30px; }
    footer .wrap { gap: 12px; }
    .logo-footer { height: 52px; }
  }

  /* Vídeo sem controles no celular: some também o botão de play que o iPhone desenha por cima */
  .brand-video.sem-controles { cursor: pointer; }
  .brand-video.sem-controles::-webkit-media-controls,
  .brand-video.sem-controles::-webkit-media-controls-panel,
  .brand-video.sem-controles::-webkit-media-controls-start-playback-button,
  .brand-video.sem-controles::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }

  /* Topo (tablet e desktop): os dois botões dividem a largura da coluna e terminam
     alinhados com a borda do título e do texto */
  @media (min-width: 641px) {
    /* Mesma largura máxima do texto de apoio (46ch no corpo de 1,15rem) */
    .hero-actions { font-size: 1.15rem; max-width: 46ch; }
    /* Cada botão parte da largura natural e cresce até preencher a linha */
    .hero-actions .btn { flex: 1 1 auto; text-align: center; white-space: nowrap; }
  }

  /* Equipe (tablet e desktop): "Como os quatro atuam" como fluxo do projeto.
     Fundo azul, foto de cada sócio, fase em que atua e linha ligando as fotos. */
  @media (min-width: 641px) {
    .team-integrada { padding: 34px 36px 32px; background: var(--navy); border: 0; border-radius: 12px; }
    .team-integrada h3 { margin-bottom: 26px; color: #fff; }
    .team-integrada ul { gap: 28px; }
    .team-integrada li { position: relative; padding-top: 0; border-top: 0; color: #C6CBD6; }
    .team-integrada li strong { margin: 0 0 4px; color: #fff; }
    .team-integrada li:not(:last-child)::after {
      content: ""; position: absolute; top: 28px; left: 70px; right: -20px; height: 2px;
      background: linear-gradient(90deg, var(--gold), rgba(79,107,143,0.25));
    }
    .ti-foto {
      position: relative; z-index: 1; display: block; width: 56px; height: 56px; margin-bottom: 14px;
      border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); background: var(--navy-mid);
    }
    .ti-fase {
      display: block; margin-bottom: 6px; font-family: 'Inter', monospace; font-size: 0.72rem;
      letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-bright);
    }
    .tem-revelar .team-integrada li:not(:last-child)::after { transform: scaleX(0); transform-origin: left; transition: transform 0.8s ease calc(var(--atraso, 0s) + 0.3s); }
    .tem-revelar .team-integrada li.visivel:not(:last-child)::after { transform: none; }
  }
  @media (min-width: 641px) and (max-width: 1100px) {
    .team-integrada li:not(:last-child)::after { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .tem-revelar .team-integrada li:not(:last-child)::after { transform: none; transition: none; }
  }

  /* Equipe em ordem de projeto: cada cartão traz a fase em que o sócio atua,
     com um ponto sobre uma linha que liga os quatro cartões (tablet e desktop). */
  .team-fase { display: none; }
  @media (min-width: 641px) {
    .team-grid { position: relative; padding-top: 58px; }
    .team-grid::before {
      content: ""; position: absolute; top: 9px; left: 6px; right: 6px; height: 2px;
      background: linear-gradient(90deg, var(--gold), rgba(79,107,143,0.3));
    }
    .team-card { position: relative; overflow: visible; }
    .team-photo { border-radius: 10px 10px 0 0; }
    /* A linha passa só pelos pontos; o nome da fase fica abaixo dela, sem cruzar o texto */
    .team-fase {
      position: absolute; top: -58px; left: 0; display: block; margin: 0; padding-top: 26px;
      font-family: 'Inter', monospace; font-size: 0.74rem; font-weight: 500; line-height: 20px;
      letter-spacing: 0.08em; text-transform: uppercase; color: #4F6B8F;
    }
    .team-fase::before {
      content: ""; position: absolute; top: 2px; left: 0; width: 14px; height: 14px; border-radius: 50%;
      background: var(--card); border: 3px solid var(--gold); box-sizing: border-box;
    }
    .team-card .role-tag { display: none; }
    .team-caption { padding: 16px 24px 18px; }
    .team-quote { font-size: 1.02rem; font-weight: 500; line-height: 1.45; color: var(--ink); }
    .tem-revelar .team-grid::before { transform: scaleX(0); transform-origin: left; transition: transform 1.1s ease 0.2s; }
    .tem-revelar .team-grid:has(.visivel)::before { transform: none; }
  }
  @media (min-width: 1101px) { .team-quote { min-height: 4.4em; } }
  @media (min-width: 641px) and (max-width: 1100px) {
    .team-grid { row-gap: 60px; }
    .team-grid::before { display: none; }
  }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .team-fase { color: var(--gold-bright); } }
  :root[data-theme="dark"] .team-fase { color: var(--gold-bright); }
  @media (prefers-reduced-motion: reduce) { .tem-revelar .team-grid::before { transform: none; transition: none; } }

  /* Faixa de marcas: sistemas que a iSolutis criou e empresas que atende (prova de autoridade
     logo após o topo). Logos nas cores originais; ao passar o mouse, crescem um pouco. */
  .marcas { padding: 36px 0 40px; background: var(--paper); border-bottom: 1px solid var(--line); }
  .marcas-titulo {
    margin: 0 0 22px; text-align: center; font-family: 'Inter', monospace; font-size: 0.78rem;
    font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  }
  .marcas-lista {
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; gap: 24px 36px;
    margin: 0 auto; padding: 0; max-width: 1040px; list-style: none;
  }
  .marcas-lista li { display: flex; align-items: center; justify-content: center; height: 64px; }
  .marcas-lista img { display: block; width: auto; max-width: 100%; max-height: 52px; object-fit: contain; mix-blend-mode: multiply; }
  .marcas-lista li:nth-child(3) img { max-height: 64px; } /* EasyProcess tem respiro em volta do nome */
  @media (hover: hover) {
    .marcas-lista img { transition: transform 0.3s ease; }
    .marcas-lista li:hover img { transform: scale(1.06); }
  }
  @media (min-width: 641px) and (max-width: 900px) {
    .marcas-lista { gap: 20px 22px; }
    .marcas-lista img { max-height: 40px; }
    .marcas-lista li:nth-child(3) img { max-height: 50px; }
  }
  @media (max-width: 640px) {
    .marcas { padding: 28px 0 30px; }
    .marcas-titulo { margin-bottom: 16px; }
    /* Duas por linha; a quinta marca fica centralizada na última linha */
    .marcas-lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 24px; }
    .marcas-lista li { flex: 0 0 calc(50% - 12px); height: 52px; }
    .marcas-lista img { max-height: 42px; }
    .marcas-lista li:nth-child(3) img { max-height: 52px; }
    #exemplos { border-top: 0; }
  }
  @media (prefers-reduced-motion: reduce) { .marcas-lista img { transition: none; } .marcas-lista li:hover img { transform: none; } }

  /* Desktop: links do menu centralizados entre a logo e o botão, sem o vão grande à esquerda */
  @media (min-width: 1081px) {
    header.top nav { flex: 1; margin-left: 0; }
    .nav-links { flex: 1; justify-content: center; gap: 4px 30px; }
    .nav-links a { margin-left: 0; }
    header.top nav > .btn { margin-left: 0; flex: none; }
  }

  /* ---------- Página enxuta: menos blocos e mais respiro ---------- */

  /* Mais espaço entre as seções em telas grandes */
  @media (min-width: 901px) {
    section { padding: 120px 0; }
    .marcas { padding: 44px 0 48px; }
    h2.section-title { margin-bottom: 18px; }
    p.section-sub { margin-bottom: 56px; }
  }
  .carousel-head { justify-content: flex-end; }

  /* Como funciona: a segurança vira uma linha, com o número em destaque */
  .seguranca {
    display: flex; align-items: center; gap: 24px; max-width: 720px; margin: 64px 0 0; padding-top: 32px;
    border-top: 1px solid var(--line);
  }
  .seguranca-num {
    margin: 0; flex: none; font-family: 'Inter', sans-serif; font-size: clamp(2.6rem, 5vw, 3.4rem);
    font-weight: 600; line-height: 1; color: var(--navy);
  }
  .seguranca-txt { margin: 0; color: var(--muted); max-width: 46ch; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .seguranca-num { color: var(--gold-bright); } }
  :root[data-theme="dark"] .seguranca-num { color: var(--gold-bright); }

  /* Investimento: faixas enxutas, um botão e a consultoria em lista */
  .offer .eyebrow { color: var(--gold-bright); }
  .offer #faixas { margin-top: 0; }
  .offer .o-tier .what { min-height: 0; margin-bottom: 4px; }
  .offer-cta { margin: 36px 0 0; }
  .consult-lista { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,0.12); }
  .consult-lista li { display: flex; flex-direction: column; gap: 4px; padding: 20px 24px 4px 0; }
  .consult-lista li + li { padding-left: 24px; border-left: 1px solid rgba(255,255,255,0.12); }
  .consult-lista strong { color: #fff; font-family: 'Inter', sans-serif; font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
  .consult-lista span { color: var(--gold-bright); font-size: 0.85rem; }
  @media (max-width: 900px) {
    .consult-lista { grid-template-columns: 1fr 1fr; }
    .consult-lista li:nth-child(3) { padding-left: 0; border-left: 0; }
  }
  @media (max-width: 640px) {
    .seguranca { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 40px; padding-top: 24px; }
    .offer-cta .btn { display: block; text-align: center; }
    .consult-lista { grid-template-columns: 1fr; }
    .consult-lista li, .consult-lista li + li { padding: 14px 0; border-left: 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
  }

  /* ---------- Ritmo de cores entre as seções ----------
     Topo (branco para cinza) > Marcas (branco) > Soluções (cinza, cartões brancos) >
     Como funciona (turquesa suave) > Investimento (azul com brilho turquesa) >
     Equipe (cinza) > Dúvidas (branco) > Contato (azul em degradê com brilho turquesa) */
  :root { --turquesa-suave: #ECEFF4; }

  .hero { background: linear-gradient(180deg, #ffffff 0%, #F7F6F2 100%); }

  #exemplos { background: var(--card); }
  #exemplos .case:not(.custom) { background: #fff; }
  #exemplos .ba-after::before { border-color: #fff; }
  #exemplos .carousel-btn { background: #fff; }
  #exemplos .cases.carousel { scrollbar-color: var(--gold) #fff; }

  #como-funciona { background: var(--turquesa-suave); border-top: 0; }
  #como-funciona .steps.flow .price { background: #fff; border-color: rgba(79,107,143,0.35); }
  #como-funciona .flow-icon { background: #fff; }
  #como-funciona .seguranca { border-top-color: rgba(11,45,59,0.12); }

  .offer {
    background:
      radial-gradient(ellipse 55% 60% at 100% 0%, rgba(79,107,143,0.22) 0%, transparent 70%),
      var(--navy-deep);
  }
  .final {
    background:
      radial-gradient(ellipse 60% 70% at 0% 100%, rgba(79,107,143,0.25) 0%, transparent 70%),
      linear-gradient(135deg, #0B2D3B 0%, #081F29 100%);
  }

  @media (max-width: 640px) {
    .hero { background: linear-gradient(180deg, #ffffff 0%, #F7F6F2 100%); }
    #exemplos { border-top: 0; }
  }

  /* ---------- Revisão de UI: hierarquia e alinhamento ---------- */

  /* Topo (desktop): coluna de texto mais larga, título em 3 linhas */
  @media (min-width: 1081px) {
    .hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
    .hero h1 { max-width: 18ch; }
  }

  /* Soluções: título e controles do carrossel na mesma linha */
  #exemplos .carousel-head { justify-content: space-between; align-items: flex-end; margin-bottom: 32px; }
  #exemplos .carousel-head .section-title { margin-bottom: 0; }

  /* Como funciona: a linha acima dos 45% ocupa a largura toda */
  .seguranca { max-width: none; }

  /* Dúvidas (desktop): título à esquerda, perguntas à direita */
  @media (min-width: 901px) {
    .duvidas-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 64px; align-items: start; }
    .duvidas-cabeca { position: sticky; top: 120px; }
    .duvidas-wrap .faq { max-width: none; }
  }

  /* Contato: texto e WhatsApp à esquerda, formulário à direita */
  .final .wrap.contato-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
  .contato-texto h2 { max-width: 14ch; }
  .contato-texto p { margin-bottom: 32px; }
  .contato-texto .ctas { align-items: flex-start; max-width: 340px; }
  .contato-texto .ctas .btn { width: 100%; }
  .contato-texto .ctas small { text-align: left; }
  .contato-form .contact-form { max-width: none; }
  @media (max-width: 900px) {
    .final .wrap.contato-grid { grid-template-columns: 1fr; gap: 40px; }
    .contato-texto .ctas { max-width: none; }
  }

  /* ---------- Responsividade: tamanho das seções, toque e legibilidade ---------- */

  /* Equipe em telas médias: 4 cartões lado a lado de 901 a 1100px */
  @media (min-width: 901px) and (max-width: 1100px) {
    .team-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; row-gap: 16px; }
    .team-grid::before { display: block; }
    .team-caption { padding: 14px 16px 16px; }
    .team-caption h3 { font-size: 1.05rem; white-space: normal; }
    .team-body { padding: 16px 16px 18px; }
    .team-card .area-pill { font-size: 0.78rem; }
    .team-quote { font-size: 0.94rem; }
  }
  /* De 641 a 900px: a lista compacta do celular, em duas colunas */
  @media (min-width: 641px) and (max-width: 900px) {
    .team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 0; }
    .team-grid::before, .team-fase { display: none; }
    .team-card {
      display: grid; grid-template-columns: 64px 1fr 16px; grid-template-areas: "foto nome seta" "foto area seta";
      align-items: center; gap: 2px 14px; padding: 12px 16px 12px 12px; border-radius: 12px;
    }
    .team-card:hover { transform: none; }
    .team-card::after {
      content: ""; grid-area: seta; width: 9px; height: 9px; border: solid var(--gold); border-width: 0 2px 2px 0;
      transform: rotate(-45deg); justify-self: center;
    }
    .team-photo { grid-area: foto; width: 64px; height: 64px; border-radius: 50%; }
    .team-caption { grid-area: nome; align-self: end; padding: 0; background: none; }
    .team-caption h3 { color: var(--navy); font-size: 1.08rem; }
    .team-card .role-tag, .team-quote, .team-more { display: none; }
    .team-body { grid-area: area; align-self: start; padding: 0; border: 0; }
    .team-card .area-pill { margin: 0; padding: 0; background: none; color: var(--muted); font-size: 0.82rem; font-weight: 500; line-height: 1.35; }
  }

  /* Legibilidade: nenhum texto abaixo de 12px */
  .ba-label { font-size: 0.78rem; }
  .team-fase { font-size: 0.78rem; }
  .cred-label { font-size: 0.76rem; }

  /* Toque: links e botões pequenos ganham área mínima de 44px em telas de toque */
  @media (hover: none), (max-width: 900px) {
    .case-more { display: inline-flex; align-items: center; min-height: 44px; }
    .video-som { min-height: 44px; }
  }

  /* ---------- Telas grandes (monitores de 24" a 32") ----------
     O conteúdo cresce em degraus: mais largura útil e tipografia maior,
     para não sobrar faixa vazia nas laterais nem texto pequeno demais. */
  @media (min-width: 1600px) {
    html { font-size: 17px; }
    body { font-size: 18px; }
    .wrap { max-width: 1320px; }
    .marcas-lista { max-width: 1240px; }
    .logo-wordmark { height: 52px; }
  }
  @media (min-width: 2000px) {
    html { font-size: 18.5px; }
    body { font-size: 19.5px; }
    .wrap { max-width: 1520px; padding: 0 40px; }
    .marcas-lista { max-width: 1400px; }
    .marcas-lista img { max-height: 60px; }
    .marcas-lista li { height: 72px; }
    .logo-wordmark { height: 58px; }
    header.top .wrap { padding-top: 18px; padding-bottom: 18px; }
  }
  @media (min-width: 2400px) {
    html { font-size: 20px; }
    body { font-size: 21px; }
    .wrap { max-width: 1720px; padding: 0 48px; }
    .marcas-lista { max-width: 1560px; }
    .marcas-lista img { max-height: 68px; }
    .marcas-lista li { height: 80px; }
    .logo-wordmark { height: 64px; }
    section { padding: 140px 0; }
  }

  /* ---------- Soluções: grade limpa no lugar do carrossel ----------
     Cartões brancos de mesma altura; "Antes" e "Depois" como texto separado por uma linha fina,
     sem caixas internas. Desktop 4 x 2, tablet 2 colunas, celular desliza para o lado. */
  #exemplos .carousel-head { margin-bottom: 40px; }
  #exemplos .cases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  #exemplos .case {
    display: flex; flex-direction: column; padding: 26px 24px 22px; border: 1px solid rgba(11,45,59,0.1);
    border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(11,45,59,0.04);
  }
  #exemplos .case:hover { transform: translateY(-3px); border-color: rgba(79,107,143,0.5); box-shadow: 0 16px 32px -22px rgba(11,45,59,0.4); }
  #exemplos .case-icon { width: 40px; height: 40px; margin-bottom: 16px; border-radius: 10px; background: var(--turquesa-suave); color: #4F6B8F; }
  #exemplos .case-icon svg { width: 20px; height: 20px; }
  #exemplos .case h3 { margin: 0 0 18px; font-size: 1.12rem; color: var(--navy); }
  #exemplos .ba { gap: 0; flex: 1; }
  #exemplos .ba-before, #exemplos .ba-after { padding: 0; border: 0; border-radius: 0; background: none; flex: none; }
  #exemplos .ba-after { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(11,45,59,0.1); }
  #exemplos .ba-after::before { content: none; }
  #exemplos .ba-label { letter-spacing: 0.1em; }
  #exemplos .ba-before .ba-label { color: #575E66; }
  #exemplos .ba-after .ba-label { color: #4F6B8F; }
  #exemplos .ba-before p { margin-top: 4px; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
  #exemplos .ba-after p { margin-top: 4px; color: var(--navy); font-size: 0.95rem; font-weight: 600; line-height: 1.45; }
  #exemplos .case-more {
    align-self: flex-start; margin-top: 18px; padding-top: 0; font-size: 0.88rem; font-weight: 600; color: var(--navy);
    text-decoration: none;
  }
  #exemplos .case-more::after { content: "→"; margin-left: 6px; color: #4F6B8F; transition: margin 0.2s ease; }
  #exemplos .case-more:hover { color: #4F6B8F; }
  #exemplos .case-more:hover::after { margin-left: 10px; }

  /* Sob demanda: destaque leve em turquesa, sem competir com as soluções */
  #exemplos .case.custom { background: var(--turquesa-suave); border-color: rgba(79,107,143,0.45); color: var(--ink); }
  #exemplos .case.custom .case-icon { background: #fff; color: #4F6B8F; }
  #exemplos .case.custom h3 { color: var(--navy); }
  #exemplos .case.custom p { flex: 1; margin: 0 0 20px; color: var(--muted); font-size: 0.92rem; }
  #exemplos .case.custom .btn { margin-top: auto; }

  /* Tablet em pé: desliza para o lado, com dois cartões visíveis */
  @media (max-width: 900px) and (min-width: 641px) {
    #exemplos .cases {
      display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
      margin: 0 -28px; padding: 2px 28px 18px; scroll-padding: 0 28px; scrollbar-width: none;
    }
    #exemplos .cases::-webkit-scrollbar { display: none; }
    #exemplos .case { flex: 0 0 calc(50% - 8px); scroll-snap-align: start; }
    #exemplos .dica-deslize { display: flex; }
  }
  @media (min-width: 901px) and (max-width: 1100px) {
    #exemplos .cases { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
    #exemplos .case { padding: 22px 18px 18px; }
  }
  @media (max-width: 640px) {
    #exemplos .carousel-head { margin-bottom: 24px; }
    #exemplos .cases {
      display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
      margin: 0 -20px; padding: 2px 20px 18px; scroll-padding: 0 20px; scrollbar-width: none;
    }
    #exemplos .cases::-webkit-scrollbar { display: none; }
    #exemplos .case { flex: 0 0 82%; scroll-snap-align: start; }
    #exemplos .case:hover { transform: none; }
  }
  @media (prefers-reduced-motion: reduce) { #exemplos .case:hover { transform: none; } #exemplos .case-more::after { transition: none; } }
  @media (max-width: 900px) and (min-width: 641px) {
    #exemplos .dica-deslize { align-items: center; gap: 8px; margin: 2px 0 0; font-size: 0.85rem; color: var(--muted); }
    #exemplos .dica-deslize::after { content: "→"; color: var(--gold); font-weight: 700; animation: desliza 1.6s ease-in-out infinite; }
  }

  /* Cabeçalho no toque: logo e botão com área mínima de 44px, sem mudar o tamanho visual */
  @media (max-width: 1080px) {
    header.top .brand { min-height: 44px; }
    header.top nav > .btn { display: inline-flex; align-items: center; min-height: 44px; }
  }
  /* Investimento no celular: o subtítulo agora é curto e informa o essencial (valor fechado, sem compromisso) */
  @media (max-width: 640px) { #investimento > .wrap > p.section-sub { display: block; margin-bottom: 24px; } }
  @media (hover: none), (max-width: 900px) { .page-more a { display: inline-flex; align-items: center; min-height: 44px; } }

  /* Celulares de tela baixa: topo mais compacto para o botão principal caber na primeira tela */
  @media (max-width: 640px) and (max-height: 800px) {
    .hero { padding-top: 22px; }
    .hero .tag { margin-bottom: 12px; padding: 4px 10px; font-size: 0.76rem; }
    .hero h1 { font-size: 1.72rem; margin-bottom: 16px; }
    .hero p.lede { margin-top: 16px; margin-bottom: 18px; font-size: 0.98rem; line-height: 1.5; }
    .video-som { margin-top: 10px; }
    .hero .fineprint { padding-bottom: 28px; }
  }
  @media (max-width: 640px) and (max-height: 620px) {
    .hero h1 { font-size: 1.55rem; }
    .video-som { display: none !important; }
  }

  /* Monitores 4K sem ampliação do sistema */
  @media (min-width: 3200px) {
    html { font-size: 26px; }
    body { font-size: 27px; }
    .wrap { max-width: 2300px; padding: 0 64px; }
    .marcas-lista { max-width: 2100px; }
    .marcas-lista img { max-height: 90px; }
    .marcas-lista li { height: 104px; }
    .logo-wordmark { height: 84px; }
    section { padding: 180px 0; }
  }
  /* Celulares bem baixos (iPhone SE e afins): o botão sobe para antes do texto de apoio */
  @media (max-width: 640px) and (max-height: 720px) {
    .hero-actions { order: 5; margin-top: 18px; }
    .hero .fineprint { order: 6; margin-top: 10px; padding-bottom: 0; }
    .hero p.lede { order: 7; margin-top: 22px; margin-bottom: 0; padding-bottom: 30px; }
  }

  /* Prazo e segurança: fundo branco entre Como funciona (turquesa suave) e Investimento (azul) */
  #rapido-seguro { background: var(--paper); }
  #rapido-seguro .twin { border-radius: 14px; overflow: hidden; }
  #rapido-seguro .seguranca { margin-top: 56px; }
  @media (max-width: 640px) { #rapido-seguro .seguranca { margin-top: 36px; } }

  /* ---------- Revisão final de cores e resumo no celular ---------- */

  /* Equipe em branco: a divisão com Como funciona (turquesa suave) fica nítida,
     e a sequência segue clara > turquesa > branca > azul */
  #equipe { background: var(--paper); }
  #equipe .team-fase::before { background: var(--paper); }
  #equipe .team-card { box-shadow: 0 1px 2px rgba(11,45,59,0.05), 0 12px 28px -22px rgba(11,45,59,0.35); }

  /* Celular: Prazo e segurança só com o essencial. O terceiro item de cada coluna repete
     Como funciona (preço fechado e manutenção) e a explicação do OWASP sai. */
  @media (max-width: 640px) {
    #rapido-seguro .twin li:nth-child(3), #rapido-seguro .twin .gloss { display: none; }
    #rapido-seguro .twin .word { font-size: 2rem; margin-bottom: 4px; }
    #rapido-seguro .twin > div { padding: 20px 18px 14px; }
  }

  /* ---------- Como funciona + Prazo e segurança numa seção só ----------
     Etapas em cima; embaixo, três cartões: Rápido, Seguro e o dado de 45%. */
  .garantias {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 56px;
  }
  .garantia {
    display: flex; flex-direction: column; padding: 26px 26px 22px; background: #fff;
    border: 1px solid rgba(79,107,143,0.3); border-radius: 14px;
  }
  .garantia-titulo {
    margin: 0 0 14px; font-family: 'Inter', sans-serif; font-size: 1.7rem; font-weight: 700;
    line-height: 1; letter-spacing: -0.02em; color: var(--navy);
  }
  .garantia ul { list-style: none; margin: 0; padding: 0; }
  .garantia li {
    position: relative; padding: 10px 0 10px 18px; border-top: 1px solid rgba(11,45,59,0.08);
    color: var(--ink); font-size: 0.95rem; line-height: 1.45;
  }
  .garantia li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 7px; height: 7px; background: var(--gold); }
  .garantia-dado { background: var(--navy); border-color: var(--navy); justify-content: center; }
  .garantia-dado .seguranca-num { margin: 0 0 10px; color: var(--gold-bright); font-size: clamp(2.6rem, 4.5vw, 3.4rem); }
  .garantia-dado .seguranca-txt { margin: 0; color: #C6CBD6; font-size: 0.95rem; line-height: 1.5; max-width: none; }

  @media (min-width: 641px) and (max-width: 1000px) {
    .garantias { grid-template-columns: 1fr 1fr; }
    .garantia-dado { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 24px; }
    .garantia-dado .seguranca-num { margin: 0; }
  }
  @media (max-width: 640px) {
    .garantias { grid-template-columns: 1fr; gap: 14px; margin-top: 40px; }
    .garantia { padding: 20px 18px 14px; }
    .garantia-titulo { font-size: 1.5rem; margin-bottom: 8px; }
    .garantia li { font-size: 0.92rem; padding: 9px 0 9px 18px; }
  }

  /* ---------- Lógica final de cores ----------
     Sequência: Topo (claro) > Marcas (branco) > Soluções (cinza) > Como funciona (branco)
     > Equipe (turquesa suave) > Investimento (azul) > Dúvidas (branco) > Contato (azul).
     Nenhum par vizinho com o mesmo brilho; azul só nos momentos de decisão. */
  #como-funciona { background: var(--paper); }
  #como-funciona .garantia:not(.garantia-dado) { background: var(--turquesa-suave); border-color: rgba(79,107,143,0.35); }
  #como-funciona .steps.flow .price { background: var(--turquesa-suave); }
  #equipe { background: var(--turquesa-suave); }
  #equipe .team-fase::before { background: var(--turquesa-suave); }

  /* Celular: Como funciona com as etapas e o dado de 45%; Rápido e Seguro ficam no desktop
     (o título já diz isso e o prazo aparece em Investimento) */
  @media (max-width: 640px) {
    #como-funciona .garantia:not(.garantia-dado) { display: none; }
    #como-funciona .garantias { margin-top: 32px; }
  }

  /* Sócios em cinza neutro (mais sóbrio que o turquesa suave): cartões brancos destacam
     as fotos; vizinhas seguem distintas (Como funciona branco > Equipe cinza > Investimento azul) */
  #equipe { background: var(--card); }
  #equipe .team-fase::before { background: var(--card); }

  /* ---------- Celular: primeira tela mais leve, cabeçalho refinado e ícones com movimento ---------- */
  @media (max-width: 640px) {
    /* Abaixo do botão só "Sem compromisso." */
    .hero .fineprint .fp-resto { display: none; }
    .hero .fineprint { padding-bottom: 28px; }

    /* "Ouvir narração" compacto, sobre o canto inferior do vídeo */
    .hero-video { position: relative; }
    .video-som {
      position: absolute; left: 12px; bottom: 12px; top: auto; margin: 0; min-height: 36px; padding: 7px 12px;
      gap: 6px; font-size: 0.78rem; border-radius: 999px; background: rgba(11,45,59,0.78);
      backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    }
    .video-som svg { width: 15px; height: 15px; }
    .video-som::after { content: ""; position: absolute; inset: -6px; } /* área de toque de 48px */

    /* Cabeçalho mais fino: botão em pílula e menu sem caixa */
    header.top .wrap { padding-top: 10px; padding-bottom: 10px; }
    .logo-wordmark { height: 36px; }
    header.top nav > .btn {
      min-height: 40px; padding: 0 16px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em;
      box-shadow: 0 6px 14px -8px rgba(11,45,59,0.6);
    }
    .menu-toggle { width: 44px; height: 44px; margin-left: 6px; padding: 0 11px; border: 0; background: transparent; }
    .menu-toggle span { height: 2px; }
    .menu-toggle span:nth-child(2) { width: 70%; margin-left: auto; }
    .menu-toggle[aria-expanded="true"] span:nth-child(2) { width: 100%; }

    /* Ícones entram com movimento quando o bloco aparece */
    .tem-revelar .revela .case-icon, .tem-revelar .revela .flow-icon { transform: scale(0.4) rotate(-20deg); opacity: 0; }
    .tem-revelar .revela.visivel .case-icon, .tem-revelar .revela.visivel .flow-icon {
      animation: icone-entra 0.7s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(var(--atraso, 0s) + 0.15s);
    }
    .tem-revelar .revela.visivel .flow-icon svg { animation: icone-brilho 2.8s ease-in-out 1.2s infinite; }
  }
  /* Celulares bem baixos: só título, vídeo e botão na primeira tela (o texto de apoio sai) */
  @media (max-width: 640px) and (max-height: 720px) {
    .hero p.lede { display: none; }
    .hero .fineprint { padding-bottom: 26px; }
  }
  @keyframes icone-entra { from { transform: scale(0.4) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes icone-brilho { 0%, 70%, 100% { transform: none; } 80% { transform: scale(1.18); } 90% { transform: scale(0.96); } }
  @media (prefers-reduced-motion: reduce) {
    .tem-revelar .revela .case-icon, .tem-revelar .revela .flow-icon { transform: none; opacity: 1; animation: none !important; }
    .tem-revelar .revela.visivel .flow-icon svg { animation: none; }
  }

  /* Marcas no celular: uma linha que desliza em loop, logos na mesma altura e bordas esmaecidas */
  .marcas-lista > li[aria-hidden="true"] { display: none; }
  @media (max-width: 640px) {
    .marcas { padding: 26px 0 28px; }
    .marcas .wrap { padding: 0; overflow: hidden; }
    .marcas-titulo { padding: 0 20px; margin-bottom: 18px; font-size: 0.72rem; letter-spacing: 0.06em; }
    .marcas-lista.marquee {
      display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 0; width: max-content; max-width: none;
      margin: 0; padding: 0; animation: marcas-rolam 26s linear infinite;
    }
    /* Espaço como margem de cada item: metade da faixa = um conjunto exato, sem pulo na emenda */
    .marcas-lista.marquee > li, .marcas-lista.marquee > li[aria-hidden="true"] { display: flex; flex: none; height: 44px; margin-right: 44px; }
    .marcas-lista.marquee img { max-height: 32px; width: auto; }
    .marcas-lista.marquee > li:nth-child(5n+3) img { max-height: 40px; } /* EasyProcess tem respiro em volta */
    .marcas-lista.marquee > li.revela { opacity: 1; transform: none; transition: none; }
    .marcas .wrap { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
                    mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); }
    .marcas-titulo { -webkit-mask-image: none; mask-image: none; }
    /* Sem animação (menos movimento): uma linha que desliza com o dedo */
    .marcas-lista:not(.marquee) {
      display: flex; flex-wrap: nowrap; gap: 36px; overflow-x: auto; padding: 0 22px; scrollbar-width: none; justify-content: flex-start;
    }
    .marcas-lista:not(.marquee) > li { flex: none; height: 44px; }
    .marcas-lista:not(.marquee) img { max-height: 32px; }
  }
  @keyframes marcas-rolam { to { transform: translateX(-50%); } }

  /* ---------- Identidade visual (manual revisão 02) ----------
     Logo plana oficial; wordmark com no mínimo 160px de largura em cabeçalhos e rodapés. */
  .logo-wordmark { height: 53px; width: auto; }
  .logo-footer { height: 60px; width: auto; }
  @media (min-width: 1600px) { .logo-wordmark { height: 56px; } }
  @media (min-width: 2000px) { .logo-wordmark { height: 62px; } }
  @media (min-width: 2400px) { .logo-wordmark { height: 68px; } }
  @media (min-width: 3200px) { .logo-wordmark { height: 90px; } }
  @media (max-width: 640px) {
    .logo-wordmark { height: 53px; }   /* 160px de largura, o mínimo do manual */
    .logo-footer { height: 54px; }
    header.top .wrap { padding-top: 8px; padding-bottom: 8px; }
  }
  /* Celulares estreitos: logo no tamanho mínimo + menu; o convite fica no topo da página e na barra do WhatsApp */
  @media (max-width: 440px) { header.top nav > .btn { display: none; } }

  /* Com o cinza de fundo do manual (#F7F6F2) mais claro, uma linha fina reforça a divisão entre seções claras */
  #exemplos, #equipe { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  h1, h2, h3, h4, .garantia-titulo, .seguranca-num { letter-spacing: -0.01em; }

  /* Celulares estreitos: o botão do cabeçalho volta, mais curto ("Agendar"), ao lado da logo no tamanho mínimo */
  @media (max-width: 440px) {
    header.top nav > .btn { display: inline-flex; padding: 0 14px; }
    header.top nav > .btn .btn-extra { display: none; }
  }

/* Botão do cabeçalho é flex e descarta o espaço inicial do span; o espaço vem do CSS */
.btn-extra::before { content: "\00a0"; }

/* Celular: Soluções em lista vertical. O carrossel lateral disputava o gesto com a rolagem da página */
@media (max-width: 640px) {
  #exemplos .cases { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
  #exemplos .case { padding: 18px 18px 16px; }
  #exemplos .case:not(.custom) { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: center; }
  #exemplos .case:not(.custom) .case-icon { margin: 0; }
  #exemplos .case:not(.custom) h3 { margin: 0; }
  #exemplos .case:not(.custom) .ba, #exemplos .case:not(.custom) .case-more { grid-column: 1 / -1; }
  #exemplos .case:not(.custom) .ba { margin-top: 14px; }
  #exemplos .ba-after { margin-top: 10px; padding-top: 10px; }
  #exemplos .case-more { margin-top: 12px; }
  #exemplos .dica-deslize { display: none !important; }
}

/* Celular: etapas de Como funciona empilham e se recolhem. Cada etapa gruda no topo; quando a
   próxima sobe por cima, a de baixo encolhe e esconde o texto, ficando só ícone e nome.
   --cob (0 a 1) vem do js/main.js. */
@media (max-width: 640px) {
  #como-funciona .steps.flow.empilha > .step {
    position: sticky; top: calc(84px + var(--i, 0) * 70px);
    padding: 20px 18px 20px 88px; min-height: 0; background: #fff; border: 1px solid rgba(11,45,59,0.1);
    border-radius: 14px; margin-bottom: 14px;
  }
  #como-funciona .steps.flow.empilha > .step:last-child { margin-bottom: 0; }
  #como-funciona .steps.flow.empilha .flow-icon { left: 18px; top: 18px; background: var(--turquesa-suave); }
  #como-funciona .steps.flow.empilha .step::after { content: none; }
  #como-funciona .steps.flow.empilha .step p,
  #como-funciona .steps.flow.empilha .step .price {
    opacity: calc(1 - var(--cob, 0) * 1.6); transform: translateY(calc(var(--cob, 0) * -8px));
  }
  #como-funciona .steps.flow.empilha .step h3 { transform: translateY(calc(var(--cob, 0) * 4px)); }
}
@media (max-width: 640px) {
  #exemplos .case:not(.custom) .ba { margin-top: 10px; }
  #exemplos .ba-label { display: none; }
  #exemplos .ba-before p { margin: 0; font-size: 0.86rem; }
  #exemplos .ba-after { margin-top: 6px; padding-top: 0; border-top: 0; }
  #exemplos .ba-after p { margin: 0; font-size: 0.92rem; }
  #exemplos .ba-after p::before { content: "→ "; color: #4F6B8F; }
  #exemplos .case-more { margin-top: 10px; font-size: 0.84rem; }
}

/* Tablet em pé: Soluções em grade de 2 colunas, sem deslizar para o lado */
@media (max-width: 900px) and (min-width: 641px) {
  #exemplos .cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
  #exemplos .case { flex: none; }
}
@media (max-width: 640px) {
  .marcas-titulo { font-size: 0.75rem; }
  .video-som { min-height: 40px; }
}

/* Celular: Soluções começa com 4 cartões; o botão abre os outros 3 na própria página */
.cases-mais { display: none; }
@media (max-width: 640px) {
  #exemplos .cases:not(.aberta) .case-extra { display: none; }
  #exemplos .cases-mais {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; width: 100%;
    border: 1px solid rgba(11,45,59,0.18); border-radius: 12px; background: #fff; color: var(--navy);
    font: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer;
  }
  #exemplos .cases-mais::after { content: "↓"; color: #4F6B8F; }
  #exemplos .cases.aberta .cases-mais { display: none; }
  #exemplos .cases.aberta .case-extra { animation: sobe 0.45s ease-out both; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  #exemplos .cases.aberta .case-extra { animation: none; }
}
#exemplos .case-extra:focus { outline: none; }


/* ---------- AIME Tech: páginas internas (soluções e privacidade) ----------
   Botões de ação em champagne, logo provisória e fundo off-white, conforme o guia de redesign. */
body { font-family: 'Inter', system-ui, sans-serif; background: #F7F6F2; color: #2E3338; }
h1, h2, h3, h4, .section-title { letter-spacing: -0.02em; }
.btn.gold, .btn.gold:visited { background: #D9C8B1; color: #0B2D3B; border-color: #D9C8B1; }
.btn.gold:hover { background: #CBB797; border-color: #CBB797; }
.btn.outline-gold { border-color: rgba(217,200,177,0.7); color: #D9C8B1; background: transparent; }
.btn.outline-gold:hover { border-color: #D9C8B1; background: rgba(217,200,177,0.08); }
header.top nav > .btn { background: #0B2D3B; color: #F7F6F2; border-color: #0B2D3B; border-radius: 8px; }
header.top .logo-wordmark { width: 190px; height: auto !important; }
footer .logo-footer { width: 320px; max-width: 100%; height: auto !important; }
@media (max-width: 767px) { header.top .logo-wordmark { width: 180px; } }
.hero { background: #F7F6F2; }
.hero .tag { background: #fff; border-color: rgba(79,107,143,0.35); color: #0B2D3B; }
.hero .tag .dot { background: #D9C8B1; }
.final { background: radial-gradient(60% 80% at 15% 10%, rgba(11,45,59,0.9), transparent 70%), #07131D; }
.btn { border-radius: 8px; }
header.top nav > .btn { white-space: nowrap; min-height: 44px; }
@media (max-width: 440px) { header.top nav > .btn { padding: 0 12px; font-size: 14px; } }
@media (max-width: 479px) { header.top nav > .btn { display: none !important; } }

h1, h2, h3, h4, .section-title { font-family: 'Inter', system-ui, sans-serif; font-weight: 600; }