/* ============================================================
     ZF Partners - Hero (paridade com o frame "Hero final", 1920px)
     Toda a arte é posicionada a partir de um palco central de
     1920px: --stage-x é a borda esquerda desse palco na viewport.
     ============================================================ */

  :root {
    --font-ui: 'Archivo', system-ui, -apple-system, sans-serif;
    --stage-x: calc(50% - (var(--stage) / 2));

    /* apelidos locais apontando para a escala do DS */
    --step-eyebrow: var(--size-eyebrow);
    --step-h1: var(--size-display-hero);
    --step-lead: var(--size-lead);
    --step-btn: var(--size-body);
    --step-nav: var(--size-body-sm);
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    font-family: var(--font-ui);
    color: var(--text-on-inverse);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  /* 1198 de conteúdo + 24 de respiro = borda em 361px numa viewport de 1920 */
  .container { width: 100%; max-width: calc(var(--container) + 48px); margin-inline: auto; padding-inline: 24px; }

  /* ---------------- Header ---------------- */
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-header);
    height: var(--header-h);
    background: var(--bg-page);
    display: flex;
    align-items: center;
  }
  #headerSpacer { display: block; height: var(--header-h); }
  /* Pill state: floating fixed after scroll (Brilliant Navbar C pílula) — right 8px to match top/bottom */
  .site-header.is-pinned {
    position: fixed;
    top: 16px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(1296px, calc(100% - 32px));
    height: 64px;
    padding: 8px 8px 8px 28px;
    background: var(--bg-card);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-lg);
    z-index: 100;
  }
  .site-header.is-pinned .header-inner {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .site-header.is-pinned .header-left { gap: 48px; }
  .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  .header-left  { display: flex; align-items: center; gap: 64px; }
  .logo-zf      { height: 26px; width: auto; display: block; }

  .nav-links { display: flex; align-items: center; gap: 32px; }
  .nav-links a {
    font-size: var(--step-nav);
    font-weight: var(--weight-medium);
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition-base);
  }
  .nav-links a:hover { color: var(--text-primary); }

  /* ---------------- Botões ---------------- */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: var(--radius-pill);
    font-size: var(--step-btn);
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition-base), transform var(--transition-base);
  }
  .btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
  .btn .icon { width: 24px; height: 24px; flex: none; display: block; }

  .btn-primary { background: var(--accent); color: var(--text-on-accent); font-weight: var(--weight-bold); padding: var(--space-4) var(--space-7); }
  .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }

  .btn-nav { background: var(--accent); color: var(--text-on-accent); font-weight: var(--weight-bold); padding: var(--space-3) var(--space-5); }
  .btn-nav:hover { background: var(--accent-hover); }
  .btn-nav:focus-visible { outline-color: var(--focus-ring-inverse); }

  .btn-ghost {
    background: var(--bg-glass);
    border: 1px solid var(--white);
    color: var(--text-on-inverse);
    font-weight: var(--weight-regular);
    padding: var(--space-4) var(--space-7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .btn-ghost:hover { background: var(--bg-glass-hover); }

  /* ---------------- Hero ---------------- */
  .hero {
    position: relative;
    height: var(--hero-h);
    margin-top: calc(var(--hero-art-offset) - var(--header-h));  /* arte em y=91 sob header de 96 */
    background: var(--bg-inverse);
    overflow: hidden;
    isolation: isolate;             /* segura os blend modes dentro do hero */
  }

  .hero-art { position: absolute; inset: 0; pointer-events: none; }
  .hero-art > * { position: absolute; top: 0; height: 100%; }

  /* Foto única em full bleed à direita + merge que costura no navy */
  .hero-photo,
  picture.hero-photo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--stage-x) + 820px);
    right: 0;
  }
  picture.hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 38%;
    display: block;
  }
  .hero-merge {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--stage-x) + 820px);
    right: 0;
    background: linear-gradient(90deg,
      var(--bg-inverse) 0%,
      var(--hero-merge-strong) 22%,
      var(--hero-merge-soft) 52%,
      var(--hero-merge-faint) 100%);
  }

  /* ---------------- Coluna de texto ---------------- */
  .hero-content { position: relative; z-index: 2; height: 100%; }

  .hero-copy {
    position: absolute;
    margin-left: 4px;               /* coluna de texto em 365, header em 361 */
    top: 103px;                       /* 212 no frame - 91 do topo da arte, -15% p/ respirar do ticker */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    max-width: 720px;
  }

  .eyebrow {
    margin: 0;
    font-size: var(--step-eyebrow);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-eyebrow);
    color: var(--text-on-inverse);
    white-space: nowrap;
  }

  .h1-wrap { position: relative; max-width: 606px; }
  .h1 {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: var(--step-h1);
    font-weight: var(--h1-weight, var(--weight-semibold));
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-display);
    color: var(--text-on-inverse);
  }
  .h1 .rh { color: var(--text-on-accent); }
  /* Marca-texto animada: varre da esquerda ao entrar (JS soma .on).
     reduced-motion resolve sozinho: tokens.css zera transitions. */
  .h1 .hl {
    background-image: linear-gradient(var(--accent), var(--accent));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 92%;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    border-radius: var(--radius-sm);
    padding: 0 0.1em;
    margin: 0 -0.1em;
    color: var(--text-on-inverse);
    transition: background-size var(--duration-slow), color var(--duration-slow);
  }
  .h1 .hl.on {
    background-size: 100% 92%;
    color: var(--text-on-accent);
  }

  .lead {
    margin: 0;
    max-width: 540px;
    font-size: var(--step-lead);
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);
    color: var(--text-on-inverse);
    text-wrap: pretty;             /* evita quebra feia tipo "no / seu tamanho" */
  }

  .actions { display: flex; align-items: center; gap: 24px; flex-wrap: nowrap; }

  /* ---------------- Ticker de logos ---------------- */
  .ticker-card {
    position: absolute;
    top: 684px;                       /* 775 no frame - 91 */
    left: 50%;
    transform: translateX(-50%);
    width: min(var(--container-wide), calc(100% - 48px));
    height: var(--ticker-card-h);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    overflow: hidden;
    z-index: 3;
  }
  .ticker-label {
    flex: none;
    padding-left: 50px;
    padding-right: 24px;
    font-size: var(--size-body);
    color: var(--text-secondary);
    white-space: nowrap;
  }
  .ticker-viewport { position: relative; flex: 1; height: 64px; overflow: hidden; }
  .ticker-track {
    display: flex;
    align-items: center;
    gap: var(--ticker-gap);
    width: max-content;
    height: 100%;
    animation: ticker var(--ticker-duration) linear infinite;
  }
  /* A pausa no hover veio do recorte; o cliente preferiu que o carrossel
     rode sempre, sem parar quando o mouse passa por cima (11/09). */
  @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  .ticker-item {
    flex: none;
    width: var(--ticker-item-w);
    height: 63.29px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ticker-item img { max-width: 84%; max-height: 32px; width: auto; height: auto; display: block; }
  .ticker-item.is-tall img { max-height: 46px; max-width: 60%; }
  /* Produtécnica é larga e baixa: precisa de casinha mais larga para crescer */
  .ticker-item.is-wide { width: 190px; }
  .ticker-item.is-wide img { max-width: 84%; max-height: 46px; }

  .ticker-fade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg,
      var(--bg-card) 0%, var(--white-fade) 7%,
      var(--white-fade) 93%, var(--bg-card) 100%);
  }

  /* ============================================================
     Mobile / tablet - a arte reflui, o texto manda
     ============================================================ */
  @media (max-width: 1100px) {
    :root {
      --step-h1: clamp(2.35rem, 1.2rem + 5vw, 4.2rem);
      --step-lead: clamp(1rem, 0.94rem + 0.5vw, 1.25rem);
      --step-eyebrow: 13px;
      --step-btn: 16px;
    }

    .nav-links { display: none; }
    .btn-nav .btn-label { display: none; }
    .btn-nav { padding: 12px; }

    .hero { height: auto; margin-top: 0; display: flex; flex-direction: column; }
    .hero-content { height: auto; order: 1; }
    .hero-art     { order: 2; }
    .ticker-card  { order: 3; }
    .hero-copy {
      position: static;
      margin-left: 0;
      padding-top: 56px;
      max-width: 100%;
      gap: 24px;
    }
    .eyebrow { white-space: normal; }
    .actions { width: 100%; flex-wrap: wrap; }
    .actions .btn { flex: 1 1 auto; justify-content: center; }

    /* A arte vira um bloco abaixo do texto: foto cheia com merge
       vertical costurando no navy do topo. */
    .hero-art {
      position: relative;
      inset: auto;
      height: clamp(320px, 84vw, 440px);
      margin-top: 32px;
      overflow: hidden;
    }
    .hero-photo, picture.hero-photo {
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
    picture.hero-photo img {
      object-position: 62% 28%;
    }
    .hero-merge {
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: linear-gradient(180deg,
        var(--bg-inverse) 0%,
        var(--hero-merge-strong) 30%,
        var(--navy-fade) 82%);
    }

    .ticker-card {
      position: relative;
      top: auto;
      left: auto;
      transform: none;
      width: calc(100% - 32px);
      margin: -28px auto 32px;
      height: auto;
      flex-direction: column;
      align-items: stretch;
      gap: 4px;
      padding: 20px 0 22px;
      z-index: 4;
    }
    .ticker-label { padding: 0 20px 4px; font-size: 14px; }
    .ticker-viewport { height: 52px; }
    .ticker-item { width: 118px; height: 52px; }
    .ticker-item.is-wide { width: 150px; }
    .ticker-item img { max-height: 26px; }
    .ticker-item.is-tall img { max-height: 34px; }

    .site-header.is-pinned {
      top: 12px;
      width: calc(100% - 24px);
      height: 60px;
      padding: 6px 6px 6px 18px;
    }
  }

  @media (max-width: 560px) {
    .actions { flex-direction: column; align-items: stretch; }
    .actions .btn { width: 100%; }
  }

  /* ---------------- Ícones (Lucide, traço 1.75) ---------------- */
  .icon {
    width: var(--icon-md);
    height: var(--icon-md);
    stroke: currentColor;
    fill: none;
    stroke-width: var(--icon-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
  }
  .icon-lg { width: var(--icon-lg); height: var(--icon-lg); }

  /* ============================================================
     Seção 2 - Autoridade · "Quem está do outro lado" var 03
     (Brilliant 16166525566aa870, aprovada pelo Caio 2026-09-08)
     Cabeçalho em duas colunas com as bases alinhadas, placa de
     dossiê que solda foto, texto e crachá num objeto só, e ficha
     de provas como fecho horizontal. A régua navy do crachá é o
     único bloco escuro da seção. Lima só na faixa e no selo.
     ============================================================ */
  .section-authority {
    background: var(--bg-page);
    padding-block: var(--space-section);
    color: var(--text-primary);
  }
  .authority-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-11);
    min-width: 0;
  }

  /* Cabeçalho: claim à esquerda, lead à direita, bases alinhadas */
  .authority-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--auth-lead-w));
    gap: var(--space-11);
    align-items: end;
    min-width: 0;
  }
  .authority-claim {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
  }
  .section-authority .h2 {
    font-size: var(--auth-h2-size);
    letter-spacing: var(--auth-h2-tracking);
  }
  .authority-lead {
    margin: 0;
    font-size: var(--size-lead);
    line-height: var(--leading-normal);
    color: var(--auth-lead-color);
    text-wrap: pretty;
    overflow-wrap: break-word;
  }

  .section-eyebrow {
    margin: 0;
    font-size: var(--size-caption);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1;
  }
  .section-eyebrow + .h2 {
    margin-top: var(--eyebrow-to-title);
  }

  .h2 {
    margin: 0;
    max-width: 100%;
    font-size: var(--size-display-2);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-display);
    color: var(--text-primary);
    overflow-wrap: break-word;
  }

  /* Placa de dossiê: rosto, trajetória e crachá no mesmo objeto */
  .authority-dossie {
    border-radius: var(--radius-xl);
    overflow: hidden;
    min-width: 0;
  }
  .authority-signal {
    display: block;
    height: var(--auth-signal-h);
    background: var(--accent);
  }
  .authority-dossie-top {
    display: grid;
    grid-template-columns: var(--auth-dossie-cols);
    min-width: 0;
  }
  .authority-photo {
    margin: 0;
    min-width: 0;
    aspect-ratio: var(--auth-photo-ratio);
    background: var(--bg-muted);
    position: relative;
  }
  .authority-seal-badge {
    position: absolute;
    left: var(--space-5);
    bottom: var(--space-5);
    width: 132px;
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
  }
  .authority-photo picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
  }
  .authority-photo picture {
    display: block;
    width: 100%;
    height: 100%;
  }
  .authority-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--auth-panel-pad);
    background: var(--bg-subtle);
    min-width: 0;
  }
  .authority-panel p {
    margin: 0;
    font-size: var(--size-body);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
    text-wrap: pretty;
    overflow-wrap: break-word;
  }
  .authority-panel p.is-highlight {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    color: var(--text-primary);
    font-weight: var(--weight-medium);
  }

  /* Crachá: selo do prêmio à esquerda, bagagem corporativa à direita */
  .authority-credential {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-9);
    padding: var(--auth-cred-pad);
    background: var(--bg-inverse);
  }
  .authority-seal {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin: 0;
    min-width: 0;
  }
  .authority-seal-bar {
    flex: none;
    width: var(--auth-seal-bar-w);
    height: var(--auth-seal-bar-h);
    background: var(--accent);
    border-radius: var(--radius-xs);
  }
  .authority-seal strong {
    display: block;
    font-size: var(--size-eyebrow);
    font-weight: var(--weight-semibold);
    line-height: 1.3;
    color: var(--text-on-inverse);
  }
  .authority-seal-meta {
    display: block;
    font-size: var(--size-caption);
    font-weight: var(--weight-regular);
    line-height: 1.3;
    color: var(--text-on-inverse-muted);
  }
  .authority-logos {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--auth-cred-logo-gap);
    margin: 0;
    padding: 0;
    min-width: 0;
  }
  .authority-logos li {
    display: flex;
    align-items: center;
    min-width: 0;
  }
  .authority-logos img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: var(--auth-cred-logo-h);
    object-fit: contain;
    /* marca de terceiro vira monocromia branca sobre o navy */
    filter: brightness(0) invert(1);
  }
  .authority-logos li.is-wide img {
    max-height: var(--auth-cred-logo-h-wide);
  }

  /* Ficha de provas: fecho horizontal sob um fio contínuo */
  .proof-row {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    counter-reset: proof;
    min-width: 0;
  }
  .proof-row li {
    padding-top: var(--space-7);
    padding-right: var(--space-10);
    border-top: 1px solid var(--border-subtle);
    counter-increment: proof;
    min-width: 0;
  }
  .proof-row li::before {
    content: counter(proof, decimal-leading-zero);
    display: block;
    margin-bottom: var(--space-3);
    font-size: var(--size-caption);
    font-weight: var(--weight-bold);
    letter-spacing: var(--auth-proof-tracking);
    color: var(--text-brand);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .proof-row strong {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--size-body);
    font-weight: var(--weight-semibold);
    line-height: 1.3;
    color: var(--text-primary);
  }
  .proof-row span {
    font-size: var(--size-body-sm);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
    text-wrap: pretty;
  }
  .nowrap {
    white-space: nowrap;
    text-wrap: nowrap;
  }

  @media (min-width: 900px) {
    /* no desktop cada frase vira linha; abaixo disso elas fluem
       separadas pelo espaço literal do markup */
    .authority-h2-line { display: block; }
  }
  @media (max-width: 1099px) {
    .authority-head {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-6);
      align-items: start;
    }
    .authority-credential {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-6);
    }
  }
  @media (max-width: 899px) {
    .authority-dossie-top {
      grid-template-columns: minmax(0, 1fr);
    }
    .authority-seal-badge { width: 104px; }
    .authority-panel {
      padding: var(--space-8);
    }
    .proof-row {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-7);
    }
    .proof-row li {
      padding-right: 0;
    }
  }
  @media (max-width: 699px) {
    /* grade 2x2: quatro marcas de larguras muito diferentes viram
       fileira irregular quando quebram soltas */
    .authority-logos {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-6) var(--space-8);
      width: 100%;
    }
  }

  /* ============================================================
     Seção 3 - Dor · var 04 dark (Brilliant, aprovada pelo Caio)
     Barras de alerta sobre navy: triângulo rosa sem fill, ferroada
     em semibold branco, fecho com "braço direito" em marca-texto.
     ============================================================ */
  .section-dor {
    background: var(--bg-inverse);
    padding-block: var(--space-section);
    color: var(--text-on-inverse);
  }
  .section-dor .section-eyebrow { color: var(--text-on-inverse-muted); }
  .section-dor .h2 { color: var(--text-on-inverse); }
  .dor-h2 {
    max-width: 100%;
    text-wrap: balance;
  }

  .dor-alerts {
    list-style: none;
    margin: var(--space-10) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .dor-alerts li {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: var(--space-6) var(--space-7);
  }
  .dor-alert-icon {
    width: var(--icon-md);
    height: var(--icon-md);
    flex: none;
    color: var(--signal-alert);
  }
  .dor-pain {
    margin: 0;
    font-size: var(--size-body-md);
    font-weight: var(--weight-medium);
    line-height: var(--leading-snug);
    color: var(--text-secondary);
    text-wrap: pretty;
  }
  .dor-pain strong {
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
  }
  .dor-closing {
    display: flex;
    align-items: center;
    gap: var(--space-8) var(--space-10);
    margin-top: var(--space-12);
  }
  .dor-relief {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    max-width: var(--measure-body);
    font-size: var(--size-h3);
    font-weight: var(--weight-medium);
    line-height: var(--leading-snug);
    color: var(--text-on-inverse);
    text-wrap: pretty;
  }
  .dor-hl {
    background: var(--accent);
    color: var(--text-on-accent);
    border-radius: var(--radius-sm);
    padding: 0 0.25em;
    font-weight: var(--weight-semibold);
    white-space: nowrap;
  }
  .dor-cta {
    flex: none;
  }
  @media (max-width: 899px) {
    .dor-closing {
      flex-direction: column;
      align-items: stretch;
    }
    .dor-cta .btn { justify-content: center; }
  }

  /* ============================================================
     Seção 4 - Solução · estrutura do wireframe
     H2 + duas frentes + âncora em destaque + grade de 5 serviços
     em acordeão + CTA. Lima só no botão.
     ============================================================ */
  .section-solucao {
    position: relative;
    overflow: hidden;
    background: var(--bg-page);
    padding-block: var(--space-section);
    color: var(--text-primary);
  }
  .solucao-mark {
    position: absolute;
    top: -140px;
    right: -160px;
    width: 640px;
    height: auto;
    opacity: 0.07;
    pointer-events: none;
  }
  .solucao-stack {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-10);
    min-width: 0;
  }
  .solucao-fronts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
    min-width: 0;
  }
  .solucao-front {
    background: var(--bg-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    min-width: 0;
  }
  .solucao-front-label {
    margin: 0 0 var(--space-2);
    font-size: var(--size-body);
    font-weight: var(--weight-semibold);
    line-height: 1.3;
    color: var(--text-primary);
  }
  .solucao-front-body {
    margin: 0;
    font-size: var(--size-body);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
    text-wrap: pretty;
  }
  .solucao-anchor {
    background: var(--bg-card);
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-lg);
    padding: var(--space-9) var(--space-10);
    min-width: 0;
  }
  .solucao-anchor-title {
    margin: 0;
    font-size: var(--size-h3);
    font-weight: var(--weight-semibold);
    line-height: var(--solucao-anchor-leading);
    letter-spacing: var(--solucao-anchor-tracking);
    color: var(--text-primary);
    text-wrap: balance;
  }
  .solucao-anchor-lead {
    margin: var(--space-4) 0 0;
    max-width: var(--measure-body);
    font-size: var(--size-body);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
    text-wrap: pretty;
  }
  .solucao-services {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
    min-width: 0;
  }
  .solucao-item {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    min-width: 0;
  }
  .solucao-item.is-wide { grid-column: span 2; }
  .solucao-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    cursor: pointer;
    list-style: none;
    font-size: var(--size-body);
    font-weight: var(--weight-semibold);
    line-height: 1.3;
    color: var(--text-primary);
  }
  .solucao-item summary::-webkit-details-marker { display: none; }
  .solucao-item summary::marker { content: ""; }
  .solucao-item summary:focus-visible {
    outline: 3px solid var(--focus-ring-inverse);
    outline-offset: var(--space-1);
    border-radius: var(--radius-sm);
  }
  .solucao-item[open] summary { padding-bottom: var(--space-2); }
  .solucao-item .icon {
    color: var(--text-primary);
    transition: transform 360ms var(--ease);
  }
  .solucao-item[open] .icon { transform: rotate(180deg); }
  .solucao-item p {
    margin: var(--space-2) 0 0;
    font-size: var(--size-body-sm);
    line-height: var(--solucao-index-leading);
    color: var(--text-secondary);
    text-wrap: pretty;
  }
  .solucao-cta {
    display: flex;
    min-width: 0;
  }
  .section-solucao .btn-primary:focus-visible {
    outline-color: var(--focus-ring-inverse);
  }
  @media (prefers-reduced-motion: reduce) {
    .solucao-item p,
    .solucao-item .icon {
      transition: none !important;
    }
  }

  @media (max-width: 899px) {
    .solucao-fronts,
    .solucao-services {
      grid-template-columns: minmax(0, 1fr);
    }
    .solucao-item.is-wide { grid-column: auto; }
    .solucao-anchor { padding: var(--space-8); }
    .solucao-mark { width: 320px; top: -80px; right: -120px; }
    .solucao-cta .btn { flex: 1 1 auto; justify-content: center; }
  }

  /* ============================================================
      Seção 5 - Método · var 01 (Brilliant, aprovada pelo Caio)
      3 cartões brancos alinhados, pulso sequencial indicando a fluidez
      1 → 2 → 3, fecho com barra lima. Sem CTA (tensão segue).
     ============================================================ */
  .section-metodo {
    position: relative;
    overflow: hidden;
    background: var(--bg-subtle);
    padding-block: var(--space-section);
    color: var(--text-primary);
  }

  .metodo-track li:nth-child(3) { position: relative; }
  .metodo-lead {
    margin: var(--space-6) 0 0;
    max-width: var(--measure-body);
    font-size: var(--size-lead);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
    text-wrap: pretty;
    overflow-wrap: break-word;
  }
  .metodo-track {
    list-style: none;
    margin: var(--space-11) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
    align-items: start;
  }
  .metodo-card {
    position: relative;
    z-index: 1;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    animation: metodo-pulse 2400ms var(--ease) infinite;
    will-change: transform, box-shadow;
  }
  .metodo-track > li:nth-child(1) .metodo-card { animation-delay: 0s; }
  .metodo-track > li:nth-child(2) .metodo-card { animation-delay: 300ms; }
  .metodo-track > li:nth-child(3) .metodo-card { animation-delay: 600ms; }
  @keyframes metodo-pulse {
    0%, 45%, 100% { transform: scale(1); box-shadow: 0 1px 2px rgba(17,47,96,0.04); }
    15% { transform: scale(1.015); box-shadow: 0 8px 24px rgba(17,47,96,0.10); }
  }
  .metodo-card-head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
  }
  .metodo-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-10);
    height: var(--space-10);
    border-radius: var(--radius-md);
    background: var(--bg-inverse);
    color: var(--text-on-inverse);
    flex: none;
  }
  .metodo-chip--accent {
    background: var(--accent);
    color: var(--text-on-accent);
  }
  .metodo-step {
    margin: 0;
    font-size: var(--size-caption);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--text-brand);
  }
  .metodo-card h3 {
    margin: 0 0 var(--space-3);
    font-size: var(--size-h3);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-normal);
    color: var(--text-primary);
    text-wrap: balance;
    overflow-wrap: break-word;
  }
  .metodo-card p {
    margin: 0;
    font-size: var(--size-body);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
    text-wrap: pretty;
    overflow-wrap: break-word;
  }
  .metodo-closing {
    margin: var(--space-8) 0 0;
    max-width: var(--measure-body);
    border-left: 4px solid var(--accent);
    padding-left: var(--space-5);
    font-size: var(--size-h3);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    color: var(--text-primary);
    text-wrap: pretty;
    overflow-wrap: break-word;
  }
  @media (max-width: 899px) {
    .metodo-track {
      grid-template-columns: 1fr;
    }
    .metodo-break { display: none; }
  }

  /* ============================================================
     Seção 6 - Sobre · var 01 (Brilliant, aprovada pelo Caio)
     Retrato à esquerda, bio à direita, trilha de carreira abaixo.
     Lima no CTA e no ponto Hoje. Ícones sociais sem URL ainda.
     ============================================================ */
  .section-sobre {
    background: var(--bg-page);
    padding-block: var(--space-section);
    color: var(--text-primary);
  }
  .sobre-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
  }
  .sobre-head {
    display: grid;
    grid-template-columns: var(--sobre-photo-w) minmax(0, 1fr);
    column-gap: var(--sobre-gap);
    align-items: start;
    min-width: 0;
  }
  .sobre-retrato {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: min(var(--sobre-photo-w), 100%);
    min-width: 0;
  }
  .sobre-foto {
    position: relative;
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: var(--sobre-rule-h) solid var(--sobre-photo-ring);
    background: var(--bg-muted);
  }
  .sobre-foto::before {
    content: "";
    display: block;
    padding-bottom: calc(var(--sobre-photo-h) / var(--sobre-photo-w) * 100%);
  }
  .sobre-foto img,
  .sobre-foto picture img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }
  .sobre-retrato figcaption {
    margin: 0;
    font-size: var(--size-caption);
    line-height: var(--sobre-graf-leading);
    color: var(--text-secondary);
    overflow-wrap: break-word;
  }
  .sobre-bio {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-width: 0;
  }
  .section-sobre .h2 {
    line-height: var(--sobre-h-leading);
    letter-spacing: var(--sobre-h-tracking);
  }
  .sobre-bio .h2 {
    margin-bottom: -8px;
  }
  .sobre-grafs {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .sobre-grafs p {
    margin: 0;
    font-size: var(--size-body);
    line-height: var(--sobre-graf-leading);
    color: var(--text-secondary);
    text-wrap: pretty;
    overflow-wrap: break-word;
  }
  .sobre-pull {
    margin: 0;
    font-size: var(--size-lead);
    font-weight: var(--weight-medium);
    line-height: var(--sobre-pull-leading);
    color: var(--text-primary);
    text-wrap: pretty;
    overflow-wrap: break-word;
  }
  .sobre-cert {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--size-body-sm);
    line-height: var(--sobre-graf-leading);
    color: var(--text-secondary);
  }
  .sobre-cert li {
    position: relative;
    padding-left: var(--space-5);
  }
  .sobre-cert li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-xs);
    background: var(--accent);
  }
  .sobre-credential-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-9);
    align-items: stretch;
  }
  .sobre-credential-left {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    justify-content: center;
    min-width: 0;
  }
  .sobre-rule {
    width: var(--sobre-rule-w);
    height: var(--sobre-rule-h);
    background: var(--border-subtle);
  }
  .sobre-cta-row {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
    margin-top: var(--space-4);
  }
  .section-sobre .btn-primary:focus-visible {
    outline-color: var(--focus-ring-inverse);
  }
  .sobre-social {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .sobre-social-label {
    margin: 0;
    font-size: var(--size-caption);
    line-height: var(--leading-snug);
    color: var(--text-secondary);
  }
  .sobre-social-icons {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
  }
  .sobre-social-icon {
    display: inline-flex;
    color: var(--text-primary);
    text-decoration: none;
  }
  a.sobre-social-icon:hover { color: var(--text-brand); }
  a.sobre-social-icon:focus-visible {
    outline: 3px solid var(--focus-ring-inverse);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }
  .sobre-social-icon svg {
    width: var(--icon-md);
    height: var(--icon-md);
    fill: currentColor;
    stroke: none;
    display: block;
  }

  .sobre-foto picture {
    display: contents;
  }

  /* Trilha: ano, ponto, título, desc. Linha só no desktop 4 colunas. */
  .sobre-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--space-8);
    position: relative;
    min-width: 0;
  }
  .sobre-timeline::before {
    content: "";
    position: absolute;
    top: calc(var(--sobre-year-lh) + var(--space-4) + (var(--sobre-dot) / 2) - (var(--sobre-track-h) / 2));
    left: calc(var(--sobre-dot) / 2);
    right: calc((100% - 3 * var(--space-8)) / 4 - var(--sobre-dot) / 2);
    height: var(--sobre-track-h);
    background: var(--border-subtle);
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1400ms var(--ease);
  }
  .reveal.is-visible .sobre-timeline::before {
    transform: scaleX(1);
  }
  .sobre-year {
    margin: 0 0 var(--space-4);
    font-size: var(--size-caption);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--sobre-year-tracking);
    line-height: var(--sobre-year-lh);
    color: var(--sobre-year);
  }
  .sobre-dot {
    display: block;
    width: var(--sobre-dot);
    height: var(--sobre-dot);
    margin-bottom: var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--text-primary);
    position: relative;
    z-index: 1;
    transform: scale(0);
    transition: transform 600ms var(--ease), background 400ms var(--ease);
  }
  .reveal.is-visible .sobre-dot {
    transform: scale(1);
  }
  .reveal.is-visible .sobre-timeline > li:nth-child(1) .sobre-dot { transition-delay: 300ms; }
  .reveal.is-visible .sobre-timeline > li:nth-child(2) .sobre-dot { transition-delay: 600ms; }
  .reveal.is-visible .sobre-timeline > li:nth-child(3) .sobre-dot { transition-delay: 900ms; }
  .reveal.is-visible .sobre-timeline > li:nth-child(4) .sobre-dot { transition-delay: 1200ms; }
  .sobre-timeline li.is-now .sobre-year { color: var(--text-primary); }
  .sobre-timeline li.is-now .sobre-dot { background: var(--accent); }
  .sobre-timeline h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--size-body);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    color: var(--text-primary);
  }
  .sobre-stop-desc {
    margin: 0;
    font-size: var(--size-body-sm);
    line-height: var(--sobre-stop-leading);
    color: var(--text-secondary);
    text-wrap: pretty;
    overflow-wrap: break-word;
  }
  .sobre-timeline li { min-width: 0; }

  @media (max-width: 899px) {
    .sobre-head {
      grid-template-columns: 1fr;
      row-gap: var(--space-8);
    }
    .sobre-timeline {
      grid-template-columns: 1fr 1fr;
      row-gap: var(--space-8);
    }
    .sobre-timeline::before { display: none; }
  }
  @media (max-width: 699px) {
    .sobre-timeline {
      grid-template-columns: 1fr;
      row-gap: var(--space-6);
    }
  }

  /* ============================================================
     Seção 8 - Mídia · var 04 (Brilliant, aprovada pelo Caio)
     Prova de terceiros: 2 destaques + 4 vídeos/conversas.
     O card inteiro é link externo (nova aba). Sem CTA WhatsApp.
     ============================================================ */
  .section-midia {
    background: var(--bg-subtle);
    padding-block: var(--space-section);
    color: var(--text-primary);
  }
  .midia-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }
  .midia-lead,
  .midia-sub {
    min-width: 0;
  }
  .midia-sub {
    margin: 0;
    font-size: var(--size-body-md);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
    text-wrap: pretty;
    overflow-wrap: break-word;
  }
  .midia-featured,
  .midia-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--midia-gap);
  }
  .midia-featured {
    margin-top: var(--space-10);
  }
  .midia-grid {
    margin-top: var(--midia-gap);
  }
  .midia-featured > li,
  .midia-grid > li {
    min-width: 0;
  }
  .midia-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
    height: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    text-decoration: none;
  }
  .midia-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    margin-top: auto;
  }
  .midia-grid .midia-card {
    padding: var(--space-6);
    gap: var(--space-5);
  }
  .midia-grid .midia-copy {
    gap: var(--space-3);
  }
  .midia-card:hover .midia-go {
    text-decoration: underline;
  }
  .midia-card:focus-visible {
    outline: 3px solid var(--focus-ring-inverse);
    outline-offset: 3px;
  }
  .midia-card--navy {
    background: var(--bg-inverse);
    border-color: var(--border-on-inverse);
  }
  .midia-card--navy .midia-tag { color: var(--text-on-inverse-muted); }
  .midia-card--navy .midia-title { color: var(--text-on-inverse); }
  .midia-card--navy .midia-go { color: var(--accent); }
  .midia-logo {
    display: block;
    width: auto;
    max-width: 100%;
  }
  .midia-logo--correio { height: var(--midia-logo-press-h); }
  .midia-logo--video { height: var(--midia-logo-video-h); }
  .midia-logo--ifood { height: var(--midia-logo-ifood-h); }
  .midia-chip {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
  }
  .midia-chip img {
    display: block;
    width: auto;
    max-width: 100%;
    height: var(--midia-logo-grh-h);
  }
  .midia-tag {
    margin: 0;
    font-size: var(--size-caption);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: var(--leading-snug);
  }
  .midia-title {
    margin: 0;
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-normal);
    color: var(--text-primary);
    text-wrap: balance;
    overflow-wrap: break-word;
  }
  .midia-featured .midia-title { font-size: var(--size-h3); }
  .midia-grid .midia-title { font-size: var(--size-body); }
  .midia-go {
    margin: 0;
    font-size: var(--size-body-sm);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
  }
  @media (min-width: 700px) {
    .midia-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 900px) {
    .midia-head {
      flex-direction: row;
      align-items: flex-end;
      gap: var(--space-10);
    }
    .midia-lead { flex: 1.15 1 0; }
    .midia-sub { flex: 1 1 0; }
    .midia-featured {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 1100px) {
    .midia-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  /* ============================================================
     Seção 9 - FAQ · var 01 (Brilliant 4a48c4e2467d7ced)
     Porta à esquerda (H2 + sub + card navy), lista numerada à direita.
     Primeira resposta aberta. Um item por vez. Sem a nota de palco.
     ============================================================ */
  .section-faq {
    background: var(--bg-page);
    padding-block: var(--space-section);
    color: var(--text-primary);
  }
  .faq-wrap {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: var(--eyebrow-to-title);
  }
  .faq-wrap > .section-eyebrow {
    grid-column: 1 / -1;
  }
  .faq-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
    min-width: 0;
  }
  .faq-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
    min-width: 0;
  }
  .section-faq .h2 {
    line-height: var(--faq-h-leading);
    letter-spacing: var(--faq-h-tracking);
  }
  .faq-sub {
    margin: 0;
    font-size: var(--size-body);
    line-height: var(--faq-answer-leading);
    color: var(--text-secondary);
    text-wrap: pretty;
  }
  .faq-cta {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
    max-width: var(--faq-side-w);
    background: var(--bg-inverse);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    color: var(--text-on-inverse);
  }
  .faq-cta-title {
    margin: 0;
    font-size: var(--size-lead);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    color: var(--text-on-inverse);
  }
  .faq-cta-body {
    margin: 0;
    font-size: var(--size-body-sm);
    line-height: var(--faq-answer-leading);
    color: var(--text-on-inverse-muted);
    text-wrap: pretty;
  }
  .faq-cta .btn-primary {
    width: 100%;
    justify-content: center;
    padding-block: var(--faq-cta-btn-py);
    padding-inline: var(--space-7);
  }
  .faq-cta .btn-primary:focus-visible {
    outline-color: var(--focus-ring);
  }
  .faq-list {
    min-width: 0;
  }
  .faq-item + .faq-item {
    border-top: 1px solid var(--faq-rule);
  }
  .faq-item summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--faq-toggle-size);
    column-gap: var(--space-5);
    align-items: start;
    padding-block: var(--space-7);
    cursor: pointer;
    list-style: none;
  }
  .faq-item:first-child summary { padding-top: 0; }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::marker { content: ""; }
  .faq-item summary:focus-visible {
    outline: 3px solid var(--focus-ring-inverse);
    outline-offset: var(--space-1);
    border-radius: var(--radius-sm);
  }
  .faq-item[open] summary { padding-bottom: var(--space-3); }
  .faq-q {
    font-size: var(--size-lead);
    font-weight: var(--weight-semibold);
    line-height: 1.3;
    color: var(--text-primary);
  }
  .faq-toggle {
    width: var(--faq-toggle-size);
    height: var(--faq-toggle-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    border: var(--faq-toggle-stroke) solid var(--border-subtle);
    color: var(--text-primary);
    background: transparent;
  }
  .faq-toggle .icon {
    width: var(--faq-toggle-icon);
    height: var(--faq-toggle-icon);
  }
  .faq-item[open] .faq-toggle {
    background: var(--accent);
    border-color: var(--accent);
  }
  .faq-item[open] .faq-plus-arm { display: none; }
  .faq-item p {
    margin: 0;
    padding: 0 calc(var(--faq-toggle-size) + var(--space-5)) var(--space-7) 0;
    font-size: var(--size-body);
    line-height: var(--faq-answer-leading);
    color: var(--text-secondary);
    text-wrap: pretty;
  }

  @media (min-width: 900px) {
    .faq-wrap {
      grid-template-columns: var(--faq-side-w) minmax(0, 1fr);
      column-gap: var(--faq-gap);
      align-items: start;
    }
    .faq-body {
      display: contents;
    }
  }

  /* ============================================================
     Seção 10 - CTA final · var 01 (Brilliant, aprovada pelo Caio)
     Pico de conversão: tipo gigante, botão lima grande, três
     garantias em linha. Um H2, o H1 segue só no hero.
     ============================================================ */
  .section-cta {
    background: var(--bg-inverse);
    padding-block: var(--space-section);
    color: var(--text-on-inverse);
  }
  .cta-title {
    margin: 0;
    font-size: var(--size-display-1);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-display);
    color: var(--text-on-inverse);
    text-wrap: balance;
    overflow-wrap: break-word;
  }
  .cta-sub {
    margin: var(--space-7) 0 0;
    max-width: var(--measure-narrow);
    font-size: var(--size-lead);
    line-height: var(--leading-normal);
    color: var(--text-on-inverse-muted);
    text-wrap: pretty;
    overflow-wrap: break-word;
  }
  .cta-actions {
    margin-top: var(--space-10);
  }
  .section-cta .btn-primary {
    padding: var(--cta-btn-pad);
  }
  .cta-points {
    list-style: none;
    margin: var(--space-10) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-8);
  }
  .cta-points li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--size-body-sm);
    font-weight: var(--weight-medium);
    color: var(--text-on-inverse);
  }
  .cta-points .icon {
    color: var(--accent);
  }

  /* ============================================================
     Rodapé · var 02 (Brilliant, aprovada pelo Caio)
     Faixa profunda: logo clara, sociais em linha, regra sutil.
     E-mail genérico até o cliente confirmar o real.
     ============================================================ */
  .site-footer {
    background: var(--footer-bg);
    color: var(--text-on-inverse);
    padding: var(--space-12) 0 var(--space-9);
    margin-top: -1px;
  }
  .footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-8) var(--space-10);
    flex-wrap: wrap;
  }
  .footer-logo {
    display: block;
    width: auto;
    height: var(--space-8);
  }
  .footer-social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
  }
  .footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--footer-icon);
    height: var(--footer-icon);
    border-radius: var(--radius-pill);
    border: 1px solid var(--footer-rule);
    color: var(--text-on-inverse);
    text-decoration: none;
  }
  .footer-social-link--wa {
    background: var(--accent);
    border-color: var(--accent);
  }
  .footer-social-link img {
    display: block;
    width: var(--icon-md);
    height: var(--icon-md);
  }
  .footer-social-link svg {
    width: var(--icon-md);
    height: var(--icon-md);
    fill: currentColor;
    stroke: none;
    display: block;
  }
  .footer-social-link:focus-visible,
  .footer-mail:focus-visible,
  .footer-top-link:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
  }
  .footer-mail {
    font-size: var(--size-body-sm);
    color: var(--text-on-inverse-muted);
    text-decoration: none;
    overflow-wrap: break-word;
  }
  .footer-mail:hover {
    text-decoration: underline;
  }
  .footer-base {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4) var(--space-6);
    flex-wrap: wrap;
    margin-top: var(--space-10);
    border-top: 1px solid var(--footer-rule);
    padding-top: var(--space-8);
  }
  .footer-copy {
    margin: 0;
    font-size: var(--size-caption);
    color: var(--text-on-inverse-muted);
  }
  .footer-top-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--size-caption);
    font-weight: var(--weight-bold);
    color: var(--text-on-inverse);
    text-decoration: none;
  }
  .footer-top-link:hover {
    text-decoration: underline;
  }
  .footer-top-link .icon {
    width: var(--icon-sm);
    height: var(--icon-sm);
    color: var(--accent);
  }

  /* ============================================================
     WhatsApp flutuante · fixo no canto inferior direito, só ícone.
     Verde oficial da marca (token --wa-green, terceiro).
     ============================================================ */
  .wa-float {
    position: fixed;
    right: var(--space-6);
    bottom: var(--space-6);
    z-index: var(--z-overlay);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: var(--wa-green);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-lg);
    transition: background var(--transition-base), transform var(--transition-base);
  }
  .wa-float:hover {
    background: var(--wa-green-hover);
    transform: translateY(-2px);
  }
  .wa-float:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
  }
  .wa-float img {
    display: block;
    width: 32px;
    height: 32px;
  }
  @media (max-width: 699px) {
    .wa-float {
      right: var(--space-4);
      bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
      width: 56px;
      height: 56px;
    }
  }

  /* ============================================================
     Motion — Hero choreography + smooth scroll + section reveals
     Personality: Premium / Corporate — 420ms slow, 220ms base,
     --ease (0.22,0.61,0.36,1), sem overshoot. Três camadas:
     primária (posição+opacidade), secundária (escala/blend),
     ambiente (luz). 1/3 rule: máx 1/3 em movimento.
     ============================================================ */
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 88px;
  }

  /* --- Hero — estado inicial (antes de .is-ready) --- */
  .hero .eyebrow,
  .hero .h1,
  .hero .lead,
  .hero .actions {
    opacity: 0;
    transform: translateY(14px);
  }
  .hero .ticker-card {
    opacity: 0;
    transform: translateX(-50%) translateY(14px);
  }
  @media (max-width: 1100px) {
    .hero .ticker-card {
      transform: translateY(14px);
    }
  }
  .hero .eyebrow {
    transition: opacity 420ms var(--ease), transform 600ms var(--ease);
  }
  .hero .h1 {
    transition: opacity 420ms var(--ease), transform 640ms var(--ease);
  }
  .hero .h1 .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 420ms var(--ease), transform 640ms var(--ease);
    will-change: opacity, transform;
  }
  .hero .lead {
    transition: opacity 420ms var(--ease) 80ms, transform 600ms var(--ease) 80ms;
  }
  .hero .actions {
    transition: opacity 420ms var(--ease) 120ms, transform 600ms var(--ease) 120ms;
  }
  .hero .ticker-card {
    transition: opacity 500ms var(--ease), transform 600ms var(--ease);
  }
  /* Imagem hero — entra da direita com leve escala (premium, sem bounce) */
  .hero .hero-photo,
  .hero picture.hero-photo {
    opacity: 0;
    transform: translateX(24px) scale(1.02);
    transition: opacity 640ms var(--ease), transform 720ms var(--ease);
    will-change: opacity, transform;
  }
  .hero .hero-merge {
    opacity: 0;
    transition: opacity 600ms var(--ease);
  }
  /* --- Hero — pronto (disparado via JS) --- */
  .hero.is-ready .eyebrow {
    opacity: 1;
    transform: none;
    transition-delay: 80ms;
  }
  .hero.is-ready .h1 {
    opacity: 1;
    transform: none;
    transition-delay: 180ms;
  }
  .hero.is-ready .h1 .word {
    opacity: 1;
    transform: none;
  }
  .hero.is-ready .lead {
    opacity: 1;
    transform: none;
    transition-delay: 520ms;
  }
  .hero.is-ready .actions {
    opacity: 1;
    transform: none;
    transition-delay: 680ms;
  }
  .hero.is-ready .hero-photo,
  .hero.is-ready picture.hero-photo {
    opacity: 1;
    transform: none;
    transition-delay: 160ms;
  }
  .hero.is-ready .hero-merge {
    opacity: 1;
    transition-delay: 140ms;
  }
  .hero.is-ready .ticker-card {
    opacity: 1;
    transform: translateX(-50%);
    transition-delay: 860ms;
  }
  @media (max-width: 1100px) {
    .hero.is-ready .ticker-card {
      transform: none;
    }
  }
  /* Highlight — último ato, depois que palavras estabilizam */
  .hero .h1 .hl {
    transition-delay: 0ms;
  }
  .hero.is-ready .h1 .hl {
    transition-delay: 0ms;
  }
  .hero.is-ready .h1 .hl.on {
    /* o JS soma .on em ~1180ms, varre o lima em 420ms */
  }
  .dor-h2 .hl,
  .cta-title .hl {
    background-image: linear-gradient(var(--accent), var(--accent));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 92%;
    border-radius: var(--radius-sm);
    padding: 0 0.12em;
    margin: 0 -0.12em;
    color: var(--text-on-accent);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  /* --- Section reveals — fade up suave --- */
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 560ms var(--ease), transform 640ms var(--ease);
    will-change: opacity, transform;
  }
  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
  /* Stagger leve para filhos de grids (opcional, 1/3 rule) */
  .reveal.is-visible .dor-alerts li,
  .reveal.is-visible .proof-list li,
  .reveal.is-visible .metodo-track > li,
  .reveal.is-visible .sobre-timeline > li,
  .reveal.is-visible .midia-featured > li,
  .reveal.is-visible .midia-grid > li {
    opacity: 1;
    transform: none;
  }
  .dor-alerts li,
  .proof-list li,
  .metodo-track > li,
  .sobre-timeline > li,
  .midia-featured > li,
  .midia-grid > li {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 420ms var(--ease), transform 560ms var(--ease);
  }
  /* delays em cascata (micro 40ms, total <200ms) */
  .reveal.is-visible .proof-list li:nth-child(1) { transition-delay: 80ms; }
  .reveal.is-visible .proof-list li:nth-child(2) { transition-delay: 120ms; }
  .reveal.is-visible .proof-list li:nth-child(3) { transition-delay: 160ms; }
  .reveal.is-visible .metodo-track > li:nth-child(1) { transition-delay: 80ms; }
  .reveal.is-visible .metodo-track > li:nth-child(2) { transition-delay: 130ms; }
  .reveal.is-visible .metodo-track > li:nth-child(3) { transition-delay: 180ms; }
  .reveal.is-visible .sobre-timeline > li:nth-child(1) { transition-delay: 60ms; }
  .reveal.is-visible .sobre-timeline > li:nth-child(2) { transition-delay: 100ms; }
  .reveal.is-visible .sobre-timeline > li:nth-child(3) { transition-delay: 140ms; }
  .reveal.is-visible .sobre-timeline > li:nth-child(4) { transition-delay: 180ms; }
  .reveal.is-visible .midia-featured > li:nth-child(1) { transition-delay: 80ms; }
  .reveal.is-visible .midia-featured > li:nth-child(2) { transition-delay: 140ms; }
  .reveal.is-visible .midia-grid > li:nth-child(1) { transition-delay: 60ms; }
  .reveal.is-visible .midia-grid > li:nth-child(2) { transition-delay: 100ms; }
  .reveal.is-visible .midia-grid > li:nth-child(3) { transition-delay: 140ms; }
  .reveal.is-visible .midia-grid > li:nth-child(4) { transition-delay: 180ms; }
  .reveal.is-visible .dor-alerts li:nth-child(1) { transition-delay: 90ms; }
  .reveal.is-visible .dor-alerts li:nth-child(2) { transition-delay: 190ms; }
  .reveal.is-visible .dor-alerts li:nth-child(3) { transition-delay: 290ms; }
  .reveal.is-visible .dor-alerts li:nth-child(4) { transition-delay: 390ms; }
  .reveal.is-visible .dor-alerts li:nth-child(5) { transition-delay: 490ms; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero .eyebrow,
    .hero .h1,
    .hero .h1 .word,
    .hero .lead,
    .hero .actions,
    .hero .hero-photo,
    .hero picture.hero-photo,
    .hero .hero-merge,
    .hero .ticker-card,
    .hero .h1 .hl,
    .reveal,
    .dor-alerts li,
    .proof-list li,
    .metodo-track > li,
    .sobre-timeline > li,
    .midia-featured > li,
    .midia-grid > li {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
    .hero .h1 .hl { background-size: 100% 92% !important; color: var(--text-on-accent) !important; }
    .metodo-card { animation: none !important; }
    .sobre-timeline::before,
    .sobre-dot { transform: none !important; transition: none !important; }
  }

  /* Pular para o conteudo: invisivel ate receber foco pelo teclado. Serve a
     quem navega por teclado e sinaliza estrutura semantica para leitores e LLMs. */
  .skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-inverse);
    color: var(--text-on-inverse);
    border-radius: 0 0 var(--radius-md) 0;
    font-weight: 600;
    text-decoration: none;
  }
  .skip-link:focus-visible {
    left: 0;
    outline: 3px solid var(--accent);
    outline-offset: 2px;
  }