/* ============================================================
   Presença Digital — D2.3 (canvas v35)
   Valores portados de PD-D23-HANDOFF/02-DESIGN/fontes-do-canvas.

   Responsividade: adaptação fluida das duas composições oficiais.
   Em 1440 px e em 390 px todos os valores coincidem com o canvas;
   entre elas, margens, grades, larguras e tipografia se ajustam com
   clamp(). Nenhuma escala global: textos e controles mantêm tamanhos
   legíveis (corrido ≥ 16 px fora dos valores do canvas mobile, mono
   ≥ 12 px, toque ≥ 44 px).

   Faixas por componente:
   · ≥ 1200  Hero lado a lado (jornada desktop, escala 0,875–1,08)
   · ≥ 1024  demais seções na composição desktop, fluida
   · 830–1199 Hero empilhado com a jornada desktop
   · ≥ 760   Duas frentes com os círculos lado a lado (palco desktop)
   · ≤ 1023  composição mobile, fluida
   ============================================================ */

/* Fontes hospedadas no próprio site (antes vinham do Google Fonts). Arquivos woff2 e
   unicode-range idênticos aos servidos pelo Google; licença SIL OFL 1.1 em fonts/licencas/. */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url(../fonts/bricolage-grotesque-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* vietnamese */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url(../fonts/bricolage-grotesque-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin-ext */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url(../fonts/bricolage-grotesque-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url(../fonts/bricolage-grotesque-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* vietnamese */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url(../fonts/bricolage-grotesque-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin-ext */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url(../fonts/bricolage-grotesque-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap; src: url(../fonts/bricolage-grotesque-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* vietnamese */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap; src: url(../fonts/bricolage-grotesque-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin-ext */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap; src: url(../fonts/bricolage-grotesque-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin */
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/dm-mono-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin-ext */
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/dm-mono-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin */
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/dm-mono-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin-ext */
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/dm-mono-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/geist-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic-ext */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/geist-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* cyrillic */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/geist-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* vietnamese */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/geist-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin-ext */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/geist-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/geist-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic-ext */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/geist-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* cyrillic */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/geist-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* vietnamese */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/geist-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin-ext */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/geist-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/geist-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic-ext */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/geist-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* cyrillic */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/geist-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* vietnamese */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/geist-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin-ext */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/geist-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin */


:root {
  --ink:   #0C1E3F;
  --blue2: #1C3A74;
  --gold:  #DDAE49;
  --paper: #F1EEE6;
  --err:   #FF9A8A;

  --fd: 'Bricolage Grotesque', system-ui, sans-serif;
  --fb: 'Geist', system-ui, sans-serif;
  --fm: 'DM Mono', monospace;

  --e-out: cubic-bezier(.2,.7,.2,1);
  --e-io:  cubic-bezier(.4,0,.2,1);

  --bg-trabalhos: color-mix(in srgb, var(--paper) 92%, var(--blue2) 8%);

  /* margem lateral: 80 px em 1440, 20 px em 390 */
  --m: clamp(48px, 5.5556vw, 80px);
  /* escala da jornada do Hero (só o gráfico; 1,08 no canvas) */
  --sg: 1.08;
  --zg: 1;
  --zgm: 1;
  /* altura do cabeçalho: o fundo do Hero começa no topo da página, acima do Hero */
  --hdr: 48px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; position: relative;
  font-family: var(--fb); background: var(--ink); color: var(--paper);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  /* O canvas v35 renderiza a Bricolage no tamanho óptico padrão (14), não no automático. */
  font-variation-settings: "opsz" 14;
}
img { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
legend { padding: 0; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn-gold:focus-visible { outline-color: var(--paper); }
/* Títulos recebem foco programático na navegação por âncora; sem contorno permanente ao usar mouse/toque. */
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--gold); color: var(--ink); padding: 12px 20px;
  font-family: var(--fm); font-size: 13px;
}
.skip-link:focus { left: 20px; top: 20px; }

/* ---------- Quadro: até 1440 px, centralizado acima disso ---------- */
.c { position: relative; width: 100%; max-width: 1440px; margin: 0 auto; }
.so-m, .br-m { display: none; }

#problemas, #servicos, #trabalhos, #como-funciona, #confianca, #contato { scroll-margin-top: 16px; }

/* ---------- Componentes comuns ---------- */
.grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }

.eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--fm); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
}
.eyebrow::before { content: ""; display: block; width: 28px; height: 2px; background: var(--gold); }

.h-secao { font-family: var(--fd); font-weight: 800; font-size: clamp(64px, 6.6667vw, 96px); line-height: 0.96; letter-spacing: -0.05em; }

.sec-cab { position: relative; align-items: end; }
.sec-cab-titulo { grid-column: 1 / span 8; display: flex; flex-direction: column; gap: 30px; }
.sec-cab-apoio { grid-column: 10 / span 3; font-size: 18px; line-height: 1.5; opacity: 0.72; padding-bottom: 10px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; white-space: nowrap; transition: transform .25s;
}
.btn:hover { transform: translateY(-3px); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-outline { box-sizing: content-box; border: 1px solid color-mix(in srgb, var(--paper) 40%, transparent); color: var(--paper); }

.logo-ponto { color: var(--gold); }

/* ============================================================
   FUNDO DO HERO + CABEÇALHO
   ============================================================ */
/* O fundo fica dentro do palco do Hero (para acompanhar a fixação do Motion v3) e sobe até o topo
   da página, atrás do cabeçalho; em repouso ocupa exatamente a mesma posição de antes. */
.hero-palco { position: relative; }
.hero-fundo { position: absolute; top: calc(-1 * var(--hdr)); left: 0; right: 0; overflow: hidden; pointer-events: none; z-index: 0; }
/* Cobre qualquer altura de Hero; o excedente é recortado no fim do Hero. */
.hero-fundo-c { height: 2400px; }
.hero-fundo-svg { position: absolute; right: -320px; top: -200px; }
.hero-fundo-svg-m { position: absolute; right: -420px; top: -120px; }

.cabecalho { position: relative; z-index: 3; }
/* Altura renderizada nas duas referências desktop oficiais: o <header> de 96 px do canvas
   encolhe para 48 px porque o gráfico do Hero excede a altura do quadro (flex-shrink). */
.cabecalho-c {
  height: 48px; padding: 0 var(--m);
  display: flex; align-items: center; justify-content: space-between;
}
.logo { display: flex; align-items: center; font-family: var(--fd); font-weight: 700; font-size: 21px; letter-spacing: -0.02em; color: var(--paper); }
.cabecalho-c .logo { padding: 9px 0; margin: -9px 0; }
.nav-desktop { display: flex; gap: 40px; font-size: 15px; }
.nav-desktop a { position: relative; opacity: 0.75; transition: opacity .2s; padding: 12.5px 8px; margin: -12.5px -8px; }
.nav-desktop a::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 8.5px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .2s var(--e-out);
}
.nav-desktop a:hover, .nav-desktop a:focus-visible { opacity: 1; }
.nav-desktop a:hover::after { transform: scaleX(1); }
.btn-cabecalho { height: 48px; padding: 0 24px; font-weight: 600; font-size: 15px; gap: 10px; }

.btn-menu-mobile {
  display: none; box-sizing: content-box; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--paper) 35%, transparent);
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.btn-menu-mobile span { display: block; width: 18px; height: 1.5px; background: var(--paper); }

/* Menu mobile (camada cheia) */
.menu-mobile { display: none; position: fixed; inset: 0; z-index: 100; background: var(--ink); padding: 0 20px 32px; flex-direction: column; overflow-y: auto; }
.menu-mobile[data-aberto] { display: flex; }
.menu-mobile-topo { height: 72px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; }
.menu-mobile-topo .logo { font-size: 18px; }
.btn-fechar-menu {
  box-sizing: content-box; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--paper) 35%, transparent);
  display: flex; align-items: center; justify-content: center; color: var(--paper);
}
.menu-mobile-nav { display: flex; flex-direction: column; margin-top: 24px; border-top: 1px solid color-mix(in srgb, var(--paper) 15%, transparent); }
.menu-mobile-nav a {
  display: flex; align-items: center; gap: 14px; min-height: 64px;
  border-bottom: 1px solid color-mix(in srgb, var(--paper) 15%, transparent);
  font-family: var(--fd); font-weight: 700; font-size: 28px; letter-spacing: -0.02em; color: var(--paper);
}
.menu-mobile-num { font-family: var(--fm); font-weight: 400; font-size: 12px; letter-spacing: 0.1em; opacity: 0.6; }
.menu-mobile-base { margin-top: auto; padding-top: 32px; display: flex; flex-direction: column; gap: 14px; }
.menu-mobile-cta { height: 58px; font-weight: 700; font-size: 17px; gap: 12px; width: 100%; }
.menu-mobile-rodape { text-align: center; font-family: var(--fm); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; }

/* ============================================================
   HERO — Estado 01 estático
   ============================================================ */
/* clip-path no lugar de overflow:hidden: recorta igual (laterais e base), mas não cria contêiner de
   rolagem, o que permite a fixação (sticky) do palco; o recorte sobe 200 px para o fundo atrás do cabeçalho. */
/* overflow-x: clip remove o transbordamento lateral da jornada (14 px) sem criar contêiner de rolagem */
.hero { position: relative; z-index: 1; overflow-x: clip; clip-path: inset(-200px 0 0 0); }
.hero-c {
  /* 1032 do canvas + 48 px para a legenda aparecer inteira (N01); jornada e cards não se movem. */
  min-height: 1080px; padding: 48px var(--m) 0;
  display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); column-gap: 20px;
  grid-template-rows: max-content; align-content: start;
}
.hero-texto { display: flex; flex-direction: column; justify-content: center; gap: 34px; padding-bottom: 40px; }
.hero-eyebrow { font-family: var(--fm); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.hero-headline {
  font-family: var(--fd); font-weight: 800; font-size: clamp(56px, 4.7223vw, 68px); line-height: 1.02; letter-spacing: -0.045em;
  display: flex; flex-direction: column; gap: 10px;
}
.hero-frase { display: block; padding-left: 22px; border-left: 4px solid color-mix(in srgb, var(--paper) 22%, transparent); opacity: 0.68; }
.hero-frase--ativa { border-left-color: var(--gold); color: var(--gold); opacity: 1; }
.hero-frase-num { display: block; margin-bottom: 8px; font-family: var(--fm); font-weight: 400; font-size: 13px; letter-spacing: 0.08em; }
.hero-paragrafo { font-size: 19px; line-height: 1.5; max-width: 480px; opacity: 0.8; }
.hero-ctas { display: flex; gap: 16px; align-items: center; }
.btn-hero { height: 62px; padding: 0 32px; font-weight: 700; font-size: 17px; gap: 12px; }
.btn-hero--sec { padding: 0 28px; font-weight: 600; }

.hero-jornada { position: relative; min-width: 0; padding-top: 8px; }
.jornada-rotulo { font-family: var(--fm); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; margin-bottom: 20px; }
/* Caixa de 850 × 890 do canvas; a borda direita fica 14 px além do quadro, como na prancha. */
.jornada-grafico {
  position: relative; width: 850px; height: 890px;
  margin-left: calc(100% + var(--m) + 14px - 850px); margin-right: 0;
  transform: scale(var(--sg)); transform-origin: right top; pointer-events: none;
}
.jornada-grafico .jcard { pointer-events: auto; }
.jornada-svg, .jornada-svg-m { position: absolute; left: 0; top: 0; }

.jcard {
  position: absolute; width: 366px; padding: 26px 30px; border-radius: 28px;
  display: flex; align-items: center; gap: 20px; color: var(--paper);
  background: color-mix(in srgb, var(--paper) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--paper) 22%, transparent);
}
.jcard--ativo { background: var(--blue2); border: 1.5px solid var(--gold); }
.jcard--google   { left: 0;     top: 24px; }
.jcard--site     { left: 464px; top: 183px; }
.jcard--whatsapp { left: 49px;  top: 512px; }
.jcard--sistema  { left: 464px; top: 732px; }
.jcard-ponto {
  position: absolute; top: 16px; right: 16px; width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--paper) 35%, transparent);
}
.jcard--ativo .jcard-ponto { background: var(--gold); border: 0; }
.jcard-icone { width: 36px; height: 36px; flex-shrink: 0; stroke: var(--paper); }
.jcard--ativo .jcard-icone { stroke: var(--gold); }
.jcard-titulo { font-family: var(--fd); font-weight: 700; font-size: 25px; }
.jcard-sub { font-size: 16px; opacity: 0.8; }

.jornada-legenda {
  margin-top: 32px; width: calc(100% + var(--m)); font-size: 17px; line-height: 1.45;
  padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--paper) 22%, transparent);
}

/* Lado a lado abaixo de 1440: jornada reduzida só até 0,875 (subtítulo ≥ 14 px, como no
   canvas mobile) e o Hero passa a ter altura mínima, sem cortar a legenda. */
@media (max-width: 1439px) {
  :root { --sg: 1; }
  .hero-c { min-height: 1032px; }
  .jornada-grafico { margin-bottom: calc(890px * (var(--sg) - 1)); }
  .jornada-legenda { width: auto; }
}
@media (max-width: 1359px) { :root { --sg: .93; } }
@media (max-width: 1279px) { :root { --sg: .875; } }

/* ============================================================
   PROBLEMAS
   ============================================================ */
.problemas { position: relative; background: var(--paper); color: var(--ink); }
.problemas-c { padding: 128px var(--m) 120px; display: flex; flex-direction: column; gap: 88px; }

.problema {
  align-items: start; padding: 44px 0 46px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
}
.problema:last-child { border-bottom: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); }
.problema-num { grid-column: 1 / span 1; padding-top: 10px; font-family: var(--fm); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.66; }
.problema-titulo { grid-column: 2 / span 7; font-family: var(--fd); font-weight: 700; font-size: clamp(34px, 3.0556vw, 44px); line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; }
.problema-lado { grid-column: 9 / span 3; display: flex; flex-direction: column; gap: 18px; padding-top: 6px; }
.problema-consequencia { font-size: 18px; line-height: 1.5; opacity: 0.72; }
.problema-tag { display: flex; align-items: center; gap: 10px; font-family: var(--fm); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.66; }
.tag-ponto { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.problema-seta { grid-column: 12 / span 1; justify-self: end; margin-top: 4px; display: flex; align-items: center; justify-content: center; }
.problema-seta > span {
  box-sizing: content-box; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  transition: background .18s var(--e-out), color .18s var(--e-out), border-color .18s var(--e-out), transform .1s var(--e-out);
}
.seta-glifo { display: block; transition: transform .18s var(--e-out); }
/* Estados da seta (spec 9, SB-03) */
.problema-seta { border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.problema-seta:focus-visible { outline-color: var(--ink); }
@media (hover: hover) {
  .problema-seta:hover > span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  .problema-seta:hover .seta-glifo { transform: translateX(3px); }
}
.problema-seta:active > span { background: color-mix(in srgb, var(--ink) 88%, transparent); border-color: var(--ink); color: var(--paper); transform: scale(.94); }

/* ============================================================
   DUAS FRENTES — palco de 1280 × 620 em proporção; textos em HTML
   posicionados nas mesmas frações do canvas
   ============================================================ */
.frentes { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); }
.frentes-c { padding: 128px var(--m) 150px; display: flex; flex-direction: column; gap: 96px; }
.frentes-aneis { position: absolute; right: -420px; top: -260px; pointer-events: none; }
.frentes-aneis-m { position: absolute; right: -300px; top: -200px; pointer-events: none; }
.frentes .sec-cab-apoio { opacity: 0.75; }

.frentes-palco { position: relative; width: 100%; aspect-ratio: 1280 / 620; }
.frentes-svg, .frentes-svg-m { position: absolute; left: 0; top: 0; width: 100%; height: auto; overflow: visible; }
.frentes-conexao {
  position: absolute; left: 50%; top: 60%; transform: translateX(-50%);
  font-family: var(--fm); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold); white-space: nowrap; opacity: 0.9;
}
.frente { position: absolute; top: 15.4839%; display: flex; flex-direction: column; gap: 20px; }
.frente--presenca { left: 3.125%; width: 40.625%; }
.frente--operacao { left: 60.1563%; width: 37.5%; }
.frente-rotulo { font-family: var(--fm); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.65; }
.frente--operacao .frente-rotulo { color: var(--gold); opacity: 1; }
.frente-nome { font-family: var(--fd); font-weight: 800; font-size: clamp(48px, 6.3889vw, 92px); line-height: 0.96; letter-spacing: -0.05em; }
.frente-desc { font-size: clamp(18px, 1.5278vw, 22px); line-height: 1.4; opacity: 0.85; max-width: 380px; }
.no { position: absolute; top: 80%; transform: translateX(-50%); font-size: clamp(15px, 1.3195vw, 19px); font-weight: 600; white-space: nowrap; }
.no--1 { left: 4.6875%; }  .no--2 { left: 19.5313%; } .no--3 { left: 34.375%; }
.no--4 { left: 65.625%; }  .no--5 { left: 80.4688%; } .no--6 { left: 95.3125%; }

/* ============================================================
   TRABALHOS
   ============================================================ */
.trabalhos { position: relative; background: var(--bg-trabalhos); color: var(--ink); }
.trabalhos-c { padding: 128px var(--m) 140px; display: flex; flex-direction: column; gap: 120px; }

.caso-img img, .caso-img picture, .caso-recorte img { display: block; width: 100%; height: 100%; }
.caso-img img, .caso-recorte img { object-fit: cover; object-position: 50% 50%; }

.caso-indice { font-family: var(--fm); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8; }
.caso-cab { display: flex; flex-direction: column; gap: 18px; }
.caso-nome { font-family: var(--fd); font-weight: 800; font-size: clamp(44px, 4.4445vw, 64px); line-height: 0.98; letter-spacing: -0.045em; }
.campo-caso { display: flex; flex-direction: column; gap: 8px; }
.campo-caso dt { font-family: var(--fm); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8; }
.campo-caso dd { font-size: 17px; line-height: 1.45; opacity: 0.85; }
.status { display: flex; align-items: center; gap: 10px; font-family: var(--fm); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.88; }
.status-ponto { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.status-ponto--interno { background: var(--blue2); }

/* 01 SARÉ */
.caso--sare { display: flex; flex-direction: column; gap: 36px; }
.caso-img--sare { width: 100%; aspect-ratio: 1280 / 600; border-radius: 4px; overflow: hidden; }
.caso--sare .caso-info { align-items: start; }
.caso--sare .caso-cab { grid-column: 1 / span 6; }
.caso--sare .caso-nome { font-size: clamp(56px, 6.1112vw, 88px); line-height: 0.96; letter-spacing: -0.05em; }
.caso--sare .caso-campos { grid-column: 8 / span 5; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; padding-top: 44px; }

/* 02 Bruna */
.caso--bruna { align-items: start; }
.caso--bruna .caso-info { grid-column: 1 / span 4; grid-row: 1; padding-top: 64px; display: flex; flex-direction: column; gap: 30px; }
.caso--bruna .caso-campos { display: flex; flex-direction: column; gap: 24px; max-width: 340px; }
.caso-imgs { grid-column: 5 / span 8; grid-row: 1; position: relative; padding-bottom: 70px; }
.caso-img--bruna { width: 100%; aspect-ratio: 845 / 600; background: linear-gradient(to right, #1f1720 19.9%, #14101a 19.9%); }
.caso-img--bruna img { object-fit: contain; object-position: 50% 0%; }
/* 300 × 200 sobre 845, deslocado 84 px para a esquerda em 1440; abaixo disso o avanço sobre a ficha diminui */
.caso-recorte {
  position: absolute; left: max(-9.9408%, calc(-84px + (1440px - 100vw) * 0.2)); bottom: 0; width: 35.503%; aspect-ratio: 3 / 2;
  box-sizing: content-box; border: 10px solid var(--bg-trabalhos);
}

/* 03 Lead Hunter — 850 × 680 em oito colunas (845,3 px em 1440: o canvas excede 4,7 px) */
.caso--lead { align-items: end; }
.caso-img--lead { grid-column: 1 / span 8; width: calc(100% * 850 / 845.3333); aspect-ratio: 850 / 680; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 20%, transparent); }
.caso-img--lead img { object-position: 50% 0%; }
.caso--lead .caso-info { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 34px; padding-bottom: 6px; }
.caso--lead .caso-campos { display: flex; flex-direction: column; gap: 24px; }

/* ============================================================
   COMO FUNCIONA
   ============================================================ */
.processo { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); }
.processo-c { padding: 128px var(--m) 150px; display: flex; flex-direction: column; gap: 110px; }
.processo-aneis { position: absolute; right: -380px; bottom: -520px; pointer-events: none; }
.processo-aneis-m { position: absolute; right: -420px; bottom: -380px; pointer-events: none; }
.processo-cab { position: relative; display: flex; flex-direction: column; gap: 30px; }
.h-processo { font-family: var(--fd); font-weight: 800; font-size: clamp(80px, 7.7778vw, 112px); line-height: 0.94; letter-spacing: -0.055em; }
.processo-corpo { position: relative; display: flex; flex-direction: column; gap: 56px; }

/* Trilha: nós no início de cada coluna (10 px para dentro), progresso até 104/296 da coluna 3 */
.trilha { position: relative; height: 60px; --col: calc((100% - 96px) / 4); }
.trilha-base {
  position: absolute; left: 10px; right: 10px; top: 29px; height: 2px;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--paper) 22%, transparent) 0 3px, transparent 3px 12px);
}
.trilha-prog, .trilha-brilho { position: absolute; left: 10px; width: calc(var(--col) * 2.35135 + 54px); background: var(--gold); }
.trilha-prog { top: 28.4px; height: 3.2px; }
.trilha-brilho { top: 25px; height: 10px; opacity: 0.12; filter: blur(6px); }
.trilha-no {
  position: absolute; top: 30px; width: 22.4px; height: 22.4px; margin: -11.2px 0 0 -11.2px;
  border-radius: 50%; background: var(--gold);
}
.trilha-no--1 { left: 10px; }
.trilha-no--2 { left: calc(10px + var(--col) + 32px); }
.trilha-no--3 { left: calc(10px + (var(--col) + 32px) * 2); }
.trilha-no--4 { left: calc(10px + (var(--col) + 32px) * 3); background: var(--ink); box-shadow: inset 0 0 0 2.4px var(--gold); }
.trilha-marca { position: absolute; top: 30px; left: calc(var(--col) * 2.35135 + 64px); }
.trilha-marca::before, .trilha-marca::after { content: ""; position: absolute; border-radius: 50%; background: var(--gold); }
.trilha-marca::before { width: 26px; height: 26px; margin: -13px 0 0 -13px; opacity: 0.28; }
.trilha-marca::after { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; }

.processo-lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; }
.passo-trilho { display: none; }
.passo-conteudo { display: flex; flex-direction: column; gap: 22px; }
.passo-num { font-family: var(--fd); font-weight: 800; font-size: clamp(104px, 10.8334vw, 156px); line-height: 0.85; letter-spacing: -0.06em; color: var(--gold); }
.passo--futuro .passo-num { color: color-mix(in srgb, var(--paper) 22%, transparent); }
.passo-nome-grupo { display: flex; flex-direction: column; gap: 12px; }
.passo-nome { font-family: var(--fd); font-weight: 700; font-size: clamp(30px, 2.7778vw, 40px); line-height: 1; letter-spacing: -0.03em; }
.passo-micro { font-family: var(--fm); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.passo-desc { font-size: 18px; line-height: 1.5; opacity: 0.72; max-width: 270px; }

/* ============================================================
   CONFIANÇA + FAQ
   ============================================================ */
.confianca { position: relative; background: var(--paper); color: var(--ink); }
.confianca-c { padding: 120px var(--m) 130px; display: flex; flex-direction: column; gap: 130px; }
.confianca-bloco { display: flex; flex-direction: column; gap: 64px; }
.confianca-cab { display: flex; flex-direction: column; gap: 30px; }
.h-confianca { font-family: var(--fd); font-weight: 800; font-size: clamp(52px, 4.7223vw, 68px); line-height: 1.02; letter-spacing: -0.045em; max-width: 980px; }
.confianca-lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; }
.compromisso { display: flex; flex-direction: column; gap: 18px; padding-top: 22px; border-top: 2px solid var(--ink); }
.compromisso-num { font-family: var(--fm); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.66; }
.compromisso-titulo { font-family: var(--fd); font-weight: 700; font-size: clamp(24px, 1.9445vw, 28px); line-height: 1.1; letter-spacing: -0.03em; }

.faq { align-items: start; }
.faq-cab { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 26px; }
.h-faq { font-family: var(--fd); font-weight: 800; font-size: clamp(48px, 3.8889vw, 56px); line-height: 1; letter-spacing: -0.045em; }
.faq-lista { grid-column: 6 / span 7; }
.faq-item { border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); }
.faq-item:last-child { border-bottom: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); }
.faq-item h3 { font: inherit; }
.faq-pergunta {
  width: 100%; padding: 32px 0; text-align: left;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 30px;
}
.faq-pergunta[aria-expanded="true"] { padding-bottom: 0; }
.faq-texto { font-family: var(--fd); font-weight: 700; font-size: clamp(24px, 1.9445vw, 28px); line-height: 1.15; letter-spacing: -0.025em; max-width: 640px; }
.faq-icone {
  box-sizing: content-box; width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
  display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1;
}
.faq-icone::before { content: "+"; }
.faq-pergunta[aria-expanded="true"] .faq-icone::before { content: "–"; }
.faq-painel { padding: 16px 0 36px; }
.faq-painel[hidden] { display: none; }
html:not(.js) .faq-painel[hidden] { display: block; }
html:not(.js) .btn-menu-mobile { display: none; }
.faq-painel p { font-size: 18px; line-height: 1.55; opacity: 0.72; max-width: 620px; }

/* ============================================================
   CTA FINAL + RODAPÉ
   ============================================================ */
.cta { position: relative; overflow: hidden; background: color-mix(in srgb, var(--ink) 82%, var(--blue2) 18%); color: var(--paper); }
.cta-c { padding: 140px var(--m) 0; display: flex; flex-direction: column; gap: 130px; }
.cta-aneis { position: absolute; left: -460px; top: -420px; pointer-events: none; }
.cta-aneis-m { position: absolute; left: -380px; top: -340px; pointer-events: none; }
.cta-grade { position: relative; align-items: center; }
.cta-texto { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: 44px; }
.h-cta { font-family: var(--fd); font-weight: 800; font-size: clamp(88px, 9.1667vw, 132px); line-height: 0.92; letter-spacing: -0.055em; }
.cta-apoio { font-size: clamp(18px, 1.4584vw, 21px); line-height: 1.5; opacity: 0.78; max-width: 520px; }

.form-contato {
  grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 30px; padding: 44px; border-radius: 30px;
  border: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
  background: color-mix(in srgb, var(--paper) 4%, transparent);
}
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label, .campo legend { font-family: var(--fm); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; }
.campo-chips { display: block; }
.campo-chips legend { margin-bottom: 14px; }
.campo input {
  width: 100%; height: 67px; padding: 31px 0 12px; border: 0; border-radius: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--paper) 40%, transparent);
  background: transparent; font-size: 19px; line-height: 23px; color: var(--paper);
  text-overflow: ellipsis;
}
.campo--desc input { height: 77px; padding-top: 41px; }
.campo input::placeholder { color: color-mix(in srgb, var(--paper) 50%, transparent); opacity: 1; }
.campo input:focus-visible { outline: none; border-bottom-color: var(--gold); box-shadow: 0 1px 0 0 var(--gold); }
.campo input[aria-invalid="true"] { border-bottom-color: var(--err); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font-size: 16px; font-weight: 600; padding: 11px 18px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--paper) 38%, transparent);
  transition: background .15s, border-color .15s;
}
@media (hover: hover) { .chip:hover { border-color: color-mix(in srgb, var(--paper) 70%, transparent); } }
.chip[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--ink); }

/* Erros ocupam a faixa vazia do topo do campo (padding superior do input), entre o rótulo e o
   texto digitado: nenhum controle se desloca e nada é sobreposto. */
.campo { position: relative; }
.campo-erro {
  position: absolute; left: 0; right: 0; bottom: 39px; pointer-events: none;
  display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.25; color: var(--err);
}
.campo-erro::before {
  content: "!"; flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--err);
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px;
}
.campo-erro[hidden] { display: none; }

.form-acao { display: flex; flex-direction: column; gap: 14px; }
.form-botao { width: 100%; height: 64px; font-weight: 700; font-size: 18px; gap: 12px; }
.form-botao:disabled { cursor: wait; transform: none; opacity: 0.85; }
.form-microcopy { font-size: 14px; opacity: 0.55; text-align: center; }
.form-link-apoio { display: block; text-align: center; font-size: 14px; opacity: 0.8; }
.form-link-apoio a { text-decoration: underline; }
.form-link-apoio[hidden] { display: none; }
/* Link discreto para o aviso de privacidade (fase 2): mesmo tom do microtexto; área de toque de 44 px sem ocupar espaço visual extra. */
.form-privacidade { text-align: center; font-size: 13px; line-height: 20px; }
.form-privacidade a { display: inline-block; padding: 12px 8px; margin: -12px -8px; opacity: 0.55; text-decoration: underline; text-underline-offset: 3px; }
.form-privacidade a:hover, .form-privacidade a:focus-visible { opacity: 0.9; }

.rodape {
  position: relative; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 24px;
  padding: 34px 0 40px; border-top: 1px solid color-mix(in srgb, var(--paper) 20%, transparent); font-size: 15px;
}
.rodape-marca { font-family: var(--fd); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
.rodape-cidade { font-family: var(--fb); font-weight: 400; font-size: 15px; letter-spacing: 0; opacity: 0.6; margin-left: 10px; }
.rodape-contatos { font-family: var(--fm); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.6; }

/* CTA abaixo de 1280: o formulário ganha a coluna livre (5 colunas) para os campos não cortarem. */
@media (max-width: 1279px) {
  .form-contato { grid-column: 8 / span 5; }
}

/* ============================================================
   HERO EMPILHADO (< 1200): texto e, abaixo, a jornada
   ============================================================ */
@media (max-width: 1199px) {
  .hero-c { display: block; height: auto; min-height: 0; padding: 40px var(--m) 64px; }
  .hero-texto { gap: 30px; padding-bottom: 0; max-width: 720px; }
  .hero-headline { font-size: clamp(40px, calc(3.9216vw + 24.696px), 68px); gap: 12px; }
  .hero-paragrafo { font-size: clamp(17px, calc(0.3922vw + 15.470px), 19px); max-width: 560px; }

  .hero-jornada { padding-top: 64px; display: flex; flex-direction: column; gap: 22px; }
  .jornada-rotulo { margin-bottom: 0; }
  .jornada-grafico { transform: none; margin: 0; zoom: var(--zg); }
  .jornada-legenda { margin-top: 0; width: auto; max-width: calc(850px * var(--zg)); }
}
@media (max-width: 959px) { :root { --zg: .875; } }

/* ============================================================
   COMPOSIÇÃO MOBILE (≤ 1023), fluida até 390 e abaixo
   ============================================================ */
@media (max-width: 1023px) {
  :root { --m: clamp(20px, 5.1282vw, 48px); }
  .so-d, .br-d { display: none; }
  .so-m { display: block; }
  .br-m { display: inline; }

  .eyebrow { gap: 12px; }
  .eyebrow::before { width: 22px; }

  .sec-cab { display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
  .sec-cab-titulo { gap: 24px; }
  .sec-cab-apoio { font-size: 16px; line-height: 1.5; padding-bottom: 0; max-width: 620px; }

  /* Cabeçalho */
  :root { --hdr: 72px; }
  .cabecalho-c { height: 72px; }
  .cabecalho-c .logo { height: 44px; padding-right: 16px; font-size: 18px; }
  .nav-desktop, .btn-cabecalho { display: none; }
  .btn-menu-mobile { display: flex; }

  /* Problemas */
  .problemas-c { padding: 80px var(--m) 72px; gap: 48px; }
  .problemas .h-secao { font-size: clamp(45px, calc(4.4262vw + 27.728px), 72px); line-height: 0.98; }
  .problema {
    display: grid; grid-template-columns: minmax(0, 1fr) 44px; row-gap: 16px;
    grid-template-areas: "num seta" "titulo titulo" "lado lado";
    padding: 26px 0 30px;
  }
  .problema-num { grid-area: num; align-self: center; padding-top: 0; opacity: 0.78; }
  .problema-seta { grid-area: seta; width: 44px; height: 44px; margin: -3px -3px -3px 0; justify-self: end; }
  .problema-seta > span { width: 38px; height: 38px; font-size: 16px; }
  .problema-seta:active { background: color-mix(in srgb, var(--ink) 6%, transparent); }
  .problema-seta:active > span { background: var(--ink); }
  .problema-titulo { grid-area: titulo; font-size: clamp(29px, calc(1.1475vw + 24.520px), 36px); line-height: 1.1; max-width: 760px; }
  .problema-lado { grid-area: lado; gap: 16px; padding-top: 0; max-width: 620px; }
  .problema-consequencia { font-size: 16px; }
  .problema-tag { opacity: 0.78; }
  .tag-ponto { width: 6px; height: 6px; }

  /* Duas frentes (palco desktop até 760 px; ver abaixo) */
  .frentes-c { padding: 80px var(--m); gap: 56px; }
  .frentes .h-secao { font-size: clamp(50px, calc(3.6066vw + 35.930px), 72px); }

  /* Trabalhos */
  .trabalhos-c { padding: 80px var(--m) 88px; gap: 72px; }
  .trabalhos .h-secao { font-size: clamp(56px, calc(3.9344vw + 40.646px), 80px); }
  .caso, .caso--bruna, .caso--lead { display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
  .caso-info, .caso--bruna .caso-info, .caso--lead .caso-info { display: flex; flex-direction: column; gap: 28px; padding: 0; }
  .caso-cab { gap: 14px; }
  .caso-nome, .caso--sare .caso-nome { font-size: clamp(46px, calc(2.9508vw + 34.490px), 64px); line-height: 0.98; }
  .caso-campos, .caso--sare .caso-campos, .caso--bruna .caso-campos, .caso--lead .caso-campos {
    display: flex; flex-direction: column; gap: 20px; padding-top: 0; max-width: 620px;
  }
  .campo-caso { gap: 6px; }
  .campo-caso dd { font-size: 16px; }
  .caso-imgs { width: 100%; padding-bottom: 36px; }
  .caso-img--bruna { aspect-ratio: 350 / 248; }
  .caso-recorte { left: auto; right: -6px; width: 42.857%; border-width: 6px; }
  .caso-img--lead { width: 100%; aspect-ratio: 350 / 280; }

  /* Como funciona */
  .processo-c { padding: 80px var(--m) 88px; gap: 56px; }
  .processo-cab { gap: 24px; }
  .h-processo { font-size: clamp(54px, calc(5.5738vw + 32.260px), 88px); }
  .processo-corpo { gap: 0; }
  .trilha { display: none; }
  .processo-lista { display: block; }
  .passo { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 22px; }
  .passo-trilho { display: flex; flex-direction: column; align-items: center; padding-top: 20px; }
  .passo-no { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); border: 2px solid var(--gold); }
  .passo-linha { flex: 1; width: 3px; margin-top: 6px; background: var(--gold); box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 45%, transparent); }
  .passo--atual .passo-no {
    width: 26px; height: 26px; margin-left: -3px; border: 0;
    background: color-mix(in srgb, var(--gold) 28%, transparent);
    display: flex; align-items: center; justify-content: center;
  }
  .passo--atual .passo-no span { width: 14px; height: 14px; border-radius: 50%; background: var(--gold); }
  .passo--atual .passo-linha { width: 0; background: none; box-shadow: none; border-left: 2px dotted color-mix(in srgb, var(--paper) 30%, transparent); }
  .passo--futuro .passo-no { background: var(--ink); }
  .passo-conteudo { gap: 14px; padding-bottom: 52px; }
  .passo:last-child .passo-conteudo { padding-bottom: 0; }
  .passo-num { font-size: clamp(76px, calc(3.9344vw + 60.646px), 100px); }
  .passo--futuro .passo-num { color: color-mix(in srgb, var(--paper) 50%, transparent); }
  .passo-nome-grupo { gap: 8px; }
  .passo-nome { font-size: clamp(32px, calc(0.6557vw + 29.440px), 36px); }
  .passo-desc { font-size: 16px; max-width: 280px; }

  /* Confiança + FAQ */
  .confianca-c { padding: 72px var(--m) 80px; gap: 80px; }
  .confianca-bloco { gap: 40px; }
  .confianca-cab { gap: 24px; }
  .h-confianca { font-size: clamp(36px, calc(2.623vw + 25.770px), 52px); line-height: 1.04; max-width: 760px; }
  .confianca-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; }
  .compromisso { gap: 14px; padding-top: 18px; }
  .compromisso-num { opacity: 0.78; }
  .compromisso-titulo { font-size: clamp(21px, calc(0.4918vw + 19.080px), 24px); }
  .faq { display: flex; flex-direction: column; gap: 32px; }
  .faq-cab { gap: 22px; }
  .h-faq { font-size: clamp(44px, calc(1.9672vw + 36.318px), 56px); }
  .faq-pergunta { padding: 24px 0; gap: 20px; }
  .faq-texto { font-size: clamp(21px, calc(0.4918vw + 19.080px), 24px); line-height: 1.18; }
  .faq-icone { width: 34px; height: 34px; font-size: 18px; }
  .faq-painel { padding: 14px 0 28px; }
  .faq-painel p { font-size: 16px; max-width: 310px; }

  /* CTA + rodapé */
  .cta-c { padding: 80px var(--m) 0; gap: 64px; }
  .cta-grade { display: flex; flex-direction: column; align-items: stretch; gap: 36px; }
  .cta-texto { gap: 30px; }
  .h-cta { font-size: clamp(58px, calc(6.2295vw + 33.700px), 96px); line-height: 0.94; }
  .cta-apoio { font-size: 17px; max-width: 620px; }
  .form-contato { gap: 26px; padding: 26px 22px; border-radius: 26px; }
  .campo input { height: 59px; padding: 27px 0 10px; font-size: 17px; line-height: 21px; }
  .campo--desc input { height: 67px; padding-top: 35px; }
  .campo input::placeholder { color: color-mix(in srgb, var(--paper) 64%, transparent); }
  .campo-chips legend { margin-bottom: 12px; }
  .chips { gap: 10px 8px; }
  .chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; font-size: 15px; }
  .form-acao { gap: 12px; }
  .form-botao { height: 58px; font-size: 17px; }
  .form-microcopy { font-size: 13px; }
  .campo-erro { bottom: 35px; font-size: 12px; line-height: 1.2; }

  .rodape { flex-direction: column; align-items: flex-start; gap: 18px; padding: 28px 0 36px; }
  .rodape-cidade { font-size: 14px; margin-left: 8px; }
  .rodape-contatos { line-height: 1.9; }
  .rodape-contatos span:not(.rodape-sep) { display: block; }
  .rodape-sep { display: none; }
}

/* Tablet (600–1023): aproveita a largura com padrões da própria composição desktop */
@media (min-width: 600px) and (max-width: 1023px) {
  .caso--sare .caso-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: none; }
  .caso-recorte { border-width: 10px; right: -10px; }
  .passo-desc { max-width: 520px; }
  .faq-painel p { max-width: 620px; }
}
@media (min-width: 760px) and (max-width: 1023px) {
  .confianca-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============================================================
   HERO: jornada com a geometria mobile (< 830)
   ============================================================ */
@media (max-width: 829px) {
  .jornada-svg { display: none; }
  .jornada-svg-m { display: block; width: 100%; height: 100%; }
  .jornada-grafico { width: 100%; max-width: 350px; height: 504px; zoom: var(--zgm); }
  .jcard { width: 82.857%; min-height: 84px; padding: 0 22px; border-radius: 22px; gap: 16px; }
  .jcard--google   { left: 0;        top: 0; }
  .jcard--site     { left: 17.143%;  top: 140px; }
  .jcard--whatsapp { left: 0;        top: 280px; }
  .jcard--sistema  { left: 17.143%;  top: 420px; }
  .jcard-ponto { top: 12px; right: 12px; width: 10px; height: 10px; }
  .jcard-icone { width: 30px; height: 30px; }
  .jcard-titulo { font-size: 21px; line-height: 1.1; }
  .jcard-sub { font-size: 14px; margin-top: 3px; }
  .jornada-legenda { font-size: 15px; max-width: calc(350px * var(--zgm)); }
}
@media (min-width: 520px) and (max-width: 829px) { :root { --zgm: 1.2; } }
@media (min-width: 640px) and (max-width: 829px) { :root { --zgm: 1.35; } }
@media (min-width: 830px) and (max-width: 1023px) {
  .jornada-svg { display: block; }
  .jornada-svg-m { display: none; }
}

/* ============================================================
   DUAS FRENTES: palco mobile 350 × 900 (< 760)
   ============================================================ */
@media (min-width: 760px) and (max-width: 1023px) {
  .frentes-svg { display: block; }
  .frentes-svg-m { display: none; }
}
@media (max-width: 759px) {
  .frentes-palco { max-width: 420px; aspect-ratio: 350 / 900; }
  .frentes-conexao { left: 53.4286%; top: 50.1111%; transform: none; }
  .frente { left: 0; width: 100%; gap: 14px; }
  .frente--presenca { top: 2.2222%; }
  .frente--operacao { left: 0; top: 80.8889%; width: 100%; }
  .frente-nome { font-size: 62px; }
  .frente-desc { font-size: 18px; max-width: 300px; }
  .no { font-size: 15px; top: 28.2222%; }
  .no--4, .no--5, .no--6 { top: 73.1111%; }
  .no--1, .no--4 { left: 9.1429%; }
  .no--2, .no--5 { left: 48.5714%; }
  .no--3, .no--6 { left: 88%; }
}

/* ============================================================
   CELULAR (< 600)
   ============================================================ */
@media (max-width: 599px) {
  .hero-eyebrow { font-size: 12px; }
  .hero-frase { padding-left: 16px; border-left-width: 3px; }
  .hero-frase-num { font-size: 12px; margin-bottom: 6px; }
  .hero-paragrafo { max-width: none; }
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 12px; }
  .btn-hero, .btn-hero--sec { height: 58px; padding: 0; font-size: 17px; }
  .caso-img--sare { aspect-ratio: 350 / 270; }
}

/* N05: as artes de fundo são retângulos finitos; fora de 390/1440 suas bordas apareciam.
   Máscara suave nas bordas que ficam visíveis em cada faixa (390 e ≥ 1440 inalterados). */
@media (min-width: 391px) and (max-width: 1023px) {
  .hero-fundo-svg-m {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28%), linear-gradient(to bottom, #000 50%, transparent 92%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 28%), linear-gradient(to bottom, #000 50%, transparent 92%);
    mask-composite: intersect;
  }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .hero-fundo-svg {
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 98%);
    mask-image: linear-gradient(to bottom, #000 55%, transparent 98%);
  }
}
@media (min-width: 1281px) and (max-width: 1439px) {
  .hero-fundo-svg {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%);
    mask-image: linear-gradient(to right, transparent 0, #000 14%);
  }
}

/* ============================================================
   MOTION SYSTEM v3 (05-MOTION/PD-D23-MOTION-SPEC.md, SB-01 a SB-08)

   · Sem JavaScript nada daqui muda a página: estados iniciais, camadas e
     variáveis só valem sob html.mo, classe adicionada pelo script. Única
     exceção: a entrada do Hero (H-08 a H-10), CSS puro que termina visível.
   · Estado (A): custom properties escritas pelo controlador de scroll, sem
     transition (reversível). Entrada (C): classe .rv-in, uma vez. Ambiente
     (B): @keyframes em .amb, pausados fora da tela e com a aba oculta.
   ============================================================ */

/* ---------- Repouso sem script = estático aprovado ---------- */
.leg--2, .leg--3, .hero-etapa { display: none; }
.jt { opacity: 0; }
.jt-f.jt1, .jt-f.jt2, .jt-g.jt0, .jt-a.jt0 { opacity: 1; }
.f-token, .f-halo { opacity: 0; }
.jcard-ponto i { display: none; }

/* ---------- Animações por relógio, em TODAS as mídias (M05) ----------
   Uma animação CSS recomeça quando sua declaração deixa de valer e volta a valer. Declaradas só em
   @media screen, a entrada do Hero e o ambiente recomeçavam ao voltar da impressão. Aqui elas não
   dependem da mídia: na impressão a entrada já terminou (ou foi encerrada por html.entrada-feita) e o
   ambiente fica apenas pausado. */
/* ---------- Entrada inicial do Hero (camada C, relógio, uma vez) ---------- */
@keyframes pd-entra-y { from { opacity: 0; transform: translateY(var(--en-y, 12px)); } }
@keyframes pd-entra { from { opacity: 0; } }
html.js .hero-texto  { animation: pd-entra-y 480ms var(--e-out) backwards; }
html.js .hero-jornada { animation: pd-entra 480ms var(--e-out) 120ms backwards; }
html.js .hero-fundo  { animation: pd-entra 640ms var(--e-out) 320ms backwards; }
@media (max-width: 1023px) { html.js .hero-texto { --en-y: 10px; } }
/* entrada concluída, ou impressão iniciada no meio dela: nunca mais roda neste carregamento */
html.entrada-feita .hero-texto, html.entrada-feita .hero-jornada, html.entrada-feita .hero-fundo { animation: none; }
.campo-erro:not([hidden]) { animation: pd-entra 200ms var(--e-out); }
html.mo .jornada-svg .jt-a   { animation: pd-fluxo 1.7s linear infinite; }
html.mo .jornada-svg-m .jt-a { animation: pd-fluxo-m 1.7s linear infinite; }
html.mo .jt-cometa { offset-rotate: auto; animation: pd-cometa 3.2s linear infinite; }
html.mo .hero-aneis { transform-origin: 700px 480px; animation: pd-gira 200s linear infinite; }
html.mo .jcard-ponto i::after { background: var(--gold); animation: pd-pulso 2.2s ease-in-out infinite; }
html.mo .frentes-svg .f-conexao   { animation: pd-fluxo-f 1.6s linear infinite; }
html.mo .frentes-svg-m .f-conexao { animation: pd-fluxo-fm 1.6s linear infinite; }
html.mo .f-no-cx-ponto { animation: pd-pulso-cx 2.4s var(--e-io) infinite; }
html.mo .f-token-halo { transform-box: fill-box; transform-origin: center; animation: pd-halo .8s var(--e-io) infinite alternate; }
/* Definições e parâmetros do ambiente válidos em todas as mídias (M05): sem os @keyframes ou com outra
   duração na impressão, a animação era cancelada e recriada do zero ao voltar para a tela. */
@keyframes pd-fluxo   { to { stroke-dashoffset: -66; } }
@keyframes pd-fluxo-m { to { stroke-dashoffset: -48; } }
@keyframes pd-cometa  { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes pd-pulso   { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes pd-gira    { to { transform: rotate(360deg); } }
@keyframes pd-fluxo-f  { to { stroke-dashoffset: -22; } }
@keyframes pd-fluxo-fm { to { stroke-dashoffset: -19; } }
@keyframes pd-pulso-cx { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes pd-halo     { from { transform: scale(1); } to { transform: scale(1.25); } }
html.mo .jornada-svg-m .jt-cometa { animation-duration: 2.6s; }
/* O ponto pulsante dos cards existe (display e content) em todas as mídias; no papel fica só invisível. */
html.mo .jcard-ponto i { display: block; }
html.mo .jcard-ponto i::after { content: ""; display: block; }

/* Ciclo de impressão (M04): da entrada na impressão até dois quadros depois do retorno, nenhuma
   transição roda. A geometria de tela volta de uma vez, igual a antes, sem reflow animado. */
html.imprimindo, html.imprimindo *, html.imprimindo *::before, html.imprimindo *::after { transition: none !important; }
/* Durante o ciclo, a ancoragem de rolagem do navegador fica desligada: ela elegia uma âncora no layout de
   impressão (sem a trilha de 200vh do Hero) e, ao voltar, deslocava a página em 2160 px. */
html.imprimindo { overflow-anchor: none; }
/* Montagem (fase 1 de produção): enquanto o script aplica os estados iniciais, as entradas não transicionam;
   fora da tela elas ficam ocultas de uma vez, sem fade-out (as que já estão na tela aparecem prontas, P01).
   Só os elementos de entrada: desligar as transições da página inteira deixava o Firefox com estilo antigo
   no Hero ao remover a classe, e o modo do Hero era decidido com medidas do modo compacto. */
html.montando .rvc, html.montando .rvs, html.montando .rvp::before, html.montando .rvp::after { transition: none !important; }

/* Todo o motion vale só na tela: na impressão a página é sempre a versão estática aprovada,
   com ou sem o evento beforeprint (M02). */
@media screen {


/* ---------- Hero: trilha e palco fixado (H.3.1), só lado a lado ---------- */
@media (min-width: 1200px) {
  html.mo .hero-palco { position: sticky; top: var(--hero-top, 0px); }
  html.mo .hero::after { content: ""; display: block; height: 200vh; height: 200svh; }

  /* Telas baixas (B1). O script mede a altura disponível e escolhe:
     · cheio     — geometria aprovada, fixada (rótulo, texto, cards e legenda cabem);
     · compacta  — espaçamentos internos menores e gráfico em escala --sge (mínimo 0,875,
                   subtítulo dos cards ≥ 14 px), fixada;
     · livre     — nem a escala mínima cabe: sem fixação nem trilha, rolagem natural, estados
                   pela posição da jornada (como no Hero empilhado). */
  html.mo .hero.hero-compacta .hero-c { min-height: 0; padding-top: 16px; }
  html.mo .hero.hero-compacta .hero-jornada { padding-top: 0; }
  html.mo .hero.hero-compacta .jornada-rotulo { margin-bottom: 14px; }
  html.mo .hero.hero-compacta .jornada-grafico { transform: scale(var(--sge, 1)); margin-bottom: calc(890px * (var(--sge, 1) - 1)); }
  html.mo .hero.hero-compacta .jornada-legenda { margin-top: 14px; padding-top: 12px; }
  html.mo .hero.hero-livre .hero-palco { position: relative; top: auto; }
  html.mo .hero.hero-livre::after { display: none; }
}

/* Frases (H-01): cor, opacidade e borda por P_k */
html.mo .hero-frase {
  color: color-mix(in srgb, var(--gold) calc(var(--pk, 0) * 100%), var(--paper));
  opacity: calc(.68 + .32 * var(--pk, 0));
  border-left-color: color-mix(in srgb, var(--gold) calc(var(--pk, 0) * 100%), color-mix(in srgb, var(--paper) 22%, transparent));
}

/* Trechos (H-03): futuro Fs_i, percorrido Ds_i, ativo As_i */
html.mo .jt-f.jt0 { opacity: var(--sf0); } html.mo .jt-f.jt1 { opacity: var(--sf1); } html.mo .jt-f.jt2 { opacity: var(--sf2); }
html.mo .jt-d.jt0 { opacity: var(--sd0); } html.mo .jt-d.jt1 { opacity: var(--sd1); } html.mo .jt-d.jt2 { opacity: var(--sd2); }
html.mo .jt-g.jt0, html.mo .jt-a.jt0, html.mo .jt-c.jt0 { opacity: var(--sa0); }
html.mo .jt-g.jt1, html.mo .jt-a.jt1, html.mo .jt-c.jt1 { opacity: var(--sa1); }
html.mo .jt-g.jt2, html.mo .jt-a.jt2, html.mo .jt-c.jt2 { opacity: var(--sa2); }

/* Ambiente do Hero (H-04, H-05, H-07, anéis): dois períodos do tracejado por ciclo, sem salto */

/* Cards (H-06): camadas futuro (::before) e ativa (::after); bordas próprias transparentes
   mantêm a geometria de cada card fixa em qualquer estado. */
html.mo .jcard { --bw: 1px; z-index: 0; background: transparent; border-color: transparent; opacity: calc(1 - .22 * var(--nd, 0)); }
html.mo .jcard--ativo { --bw: 1.5px; }
html.mo .jcard::before, html.mo .jcard::after {
  content: ""; position: absolute; inset: calc(-1 * var(--bw)); z-index: -1; border-radius: inherit; pointer-events: none;
}
html.mo .jcard::before { background: color-mix(in srgb, var(--paper) 5%, transparent); border: 1px solid color-mix(in srgb, var(--paper) 22%, transparent); opacity: var(--nf, 0); }
html.mo .jcard::after  { background: var(--blue2); border: 1.5px solid var(--gold); opacity: calc(var(--na, 0) + var(--nd, 0)); }
html.mo .jcard .jcard-icone { stroke: color-mix(in srgb, var(--gold) calc((var(--na, 0) + var(--nd, 0)) * 100%), var(--paper)); }
html.mo .jcard .jcard-ponto { background: none; border: 0; }
html.mo .jcard-ponto::before, html.mo .jcard-ponto::after, html.mo .jcard-ponto i, html.mo .jcard-ponto i::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
}
html.mo .jcard-ponto::before { box-sizing: border-box; border: 1px solid color-mix(in srgb, var(--paper) 35%, transparent); opacity: var(--nf, 0); }
html.mo .jcard-ponto::after  { background: var(--ponto-d, var(--gold)); opacity: var(--nd, 0); }
html.mo .jcard-ponto i { display: block; opacity: var(--na, 0); }
html.mo .jcard-ponto i::after { background: var(--gold); }
/* Mobile (board M23-Hero-Legenda): percorrido = blue2 62 %, borda ouro 45 %, ponto 55 %, ícone 80 %, sem opacidade */
@media (max-width: 829px) {
  html.mo .jcard {
    --ponto-d: color-mix(in srgb, var(--gold) 55%, transparent);
    opacity: 1;
    background: color-mix(in srgb, var(--blue2) calc(var(--nd, 0) * 62%), transparent);
    outline: 1px solid color-mix(in srgb, var(--gold) calc(var(--nd, 0) * 45%), transparent); outline-offset: -1px;
  }
  html.mo .jcard::after { opacity: var(--na, 0); }
  html.mo .jcard .jcard-icone {
    stroke: color-mix(in srgb, color-mix(in srgb, var(--gold) calc(100% - var(--nd, 0) * 20%), transparent) calc((var(--na, 0) + var(--nd, 0)) * 100%), var(--paper));
  }
}

/* Legenda desktop (H-02): três textos na mesma célula; altura = maior texto, sem deslocamento */
html.mo .jornada-legenda { display: grid; transition: opacity 150ms var(--e-io); }
html.mo .leg { grid-area: 1 / 1; display: block; }
html.mo .leg:not(.leg--on) { visibility: hidden; }
html.mo .jornada-legenda.saindo { opacity: 0; }

/* Legenda de etapa fixa (H.11.2, board M23-Hero-Legenda), Hero empilhado */
@media (max-width: 1199px) {
  html.mo .hero-etapa:not([hidden]) {
    position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 800;
    height: 48px; padding: 0 var(--m); display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: color-mix(in srgb, var(--ink) 94%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--paper) 22%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--paper) 22%, transparent);
    opacity: 0; visibility: hidden; transition: opacity 150ms ease, visibility 0s 150ms;
  }
  html.mo .hero-etapa.on { opacity: 1; visibility: visible; transition: opacity 150ms ease, visibility 0s; }
  html.menu-aberto .hero-etapa.on { visibility: hidden; }
}
.hero-etapa-txt { display: flex; align-items: center; gap: 12px; min-width: 0; transition: opacity 150ms var(--e-io); }
.hero-etapa.saindo .hero-etapa-txt { opacity: 0; }
.hero-etapa-num { font-family: var(--fm); font-size: 12px; letter-spacing: 0.08em; color: var(--gold); }
.hero-etapa-traco { display: block; width: 14px; height: 2px; flex-shrink: 0; background: var(--gold); }
.hero-etapa-frase { font-family: var(--fd); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; color: var(--paper); white-space: nowrap; }
.hero-etapa-marcas { display: flex; gap: 5px; align-items: center; flex-shrink: 0; }
.hero-etapa-marcas span { display: block; width: 22px; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--paper) 30%, transparent); }
.hero-etapa-marcas span.m-d { background: color-mix(in srgb, var(--gold) 50%, transparent); }
.hero-etapa-marcas span.m-a { background: var(--gold); }
/* abaixo de 390 px os marcadores (decorativos) saem para a frase caber inteira */
@media (max-width: 389px) { .hero-etapa-marcas { display: none; } }

/* ---------- Duas frentes (Parte IV): f escrito no palco ---------- */
html.mo .f-circ-p { opacity: var(--fcp, 1); }
html.mo .f-circ-o, html.mo .f-lente { opacity: var(--fco, 1); }
html.mo .frente--presenca { opacity: var(--ftp, 1); transform: translateY(calc((1 - var(--ftp, 1)) * 12px)); }
html.mo .frente--operacao { opacity: var(--fto, 1); transform: translateY(calc((1 - var(--fto, 1)) * 12px)); }
html.mo .f-linha-p { stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--flp, 1)); }
html.mo .f-linha-o { stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--flo, 1)); }
html.mo .f-mask-trilho { stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--frc, 1)); }
html.mo .f-mask-tudo { opacity: var(--frt, 1); }
html.mo .f-no-cx { transform-box: fill-box; transform-origin: center; transform: scale(calc(.6 + .4 * var(--fcx, 1))); opacity: var(--fcx, 1); }
html.mo .frentes-conexao { opacity: calc(.9 * var(--fcx, 1)); }
html.mo .f-no1 { opacity: calc(.3 + .7 * var(--fu1, 1)); } html.mo .no--1 { opacity: calc(.55 + .45 * var(--fu1, 1)); }
html.mo .f-no2 { opacity: calc(.3 + .7 * var(--fu2, 1)); } html.mo .no--2 { opacity: calc(.55 + .45 * var(--fu2, 1)); }
html.mo .f-no3 { opacity: calc(.3 + .7 * var(--fu3, 1)); } html.mo .no--3 { opacity: calc(.55 + .45 * var(--fu3, 1)); }
html.mo .f-no4 { opacity: calc(.3 + .7 * var(--fu4, 1)); } html.mo .no--4 { opacity: calc(.55 + .45 * var(--fu4, 1)); }
html.mo .f-no5 { opacity: calc(.3 + .7 * var(--fu5, 1)); } html.mo .no--5 { opacity: calc(.55 + .45 * var(--fu5, 1)); }
html.mo .f-no6 { opacity: calc(.3 + .7 * var(--fu6, 1)); } html.mo .no--6 { opacity: calc(.55 + .45 * var(--fu6, 1)); }
html.mo .f-halo { transform-box: fill-box; transform-origin: center; }
html.mo .f-halo1 { opacity: calc(.3 * var(--fh1, 0)); transform: scale(calc((7 + 6 * var(--fh1, 0)) / 13)); }
html.mo .f-halo2 { opacity: calc(.3 * var(--fh2, 0)); transform: scale(calc((7 + 6 * var(--fh2, 0)) / 13)); }
html.mo .f-halo3 { opacity: calc(.3 * var(--fh3, 0)); transform: scale(calc((7 + 6 * var(--fh3, 0)) / 13)); }
html.mo .f-halo4 { opacity: calc(.3 * var(--fh4, 0)); transform: scale(calc((7 + 6 * var(--fh4, 0)) / 13)); }
html.mo .f-halo5 { opacity: calc(.3 * var(--fh5, 0)); transform: scale(calc((7 + 6 * var(--fh5, 0)) / 13)); }
html.mo .f-halo6 { opacity: calc(.3 * var(--fh6, 0)); transform: scale(calc((7 + 6 * var(--fh6, 0)) / 13)); }
html.mo .f-token { opacity: var(--ftk, 0); }
/* Ambiente (F-09 a F-11): um período do tracejado por 1,6 s */

/* ---------- Processo (Parte VI): sem transition em linha, nós, números e halo ---------- */
html.mo .processo { --u1: 1; --u2: 1; --u3: 1; --u4: 0; --h1: 0; --h2: 0; --h3: 1; --h4: 0; --g1: 1; --g2: 1; --g3: 0; }
html.mo .passo:nth-child(1), html.mo .trilha-no--1 { --u: var(--u1); --h: var(--h1); --g: var(--g1); }
html.mo .passo:nth-child(2), html.mo .trilha-no--2 { --u: var(--u2); --h: var(--h2); --g: var(--g2); }
html.mo .passo:nth-child(3), html.mo .trilha-no--3 { --u: var(--u3); --h: var(--h3); --g: var(--g3); }
html.mo .passo:nth-child(4), html.mo .trilha-no--4 { --u: var(--u4); --h: var(--h4); --g: 0; }
/* Desktop: linha com a extensão total e scaleX(q); cabeça por translateX */
html.mo .trilha-prog, html.mo .trilha-brilho { width: calc((var(--col) + 32px) * 3); transform: scaleX(var(--q, .7622)); transform-origin: left center; }
/* --cabx em px (o percentual de --col não serve dentro de translateX) */
html.mo .trilha-marca { left: 10px; transform: translateX(var(--cabx, 0px)); }
html.mo .trilha-no { background: var(--ink); box-shadow: inset 0 0 0 2.4px var(--gold); }
html.mo .trilha-no::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--gold); opacity: var(--u); }
/* Número: base apagada + camada dourada com opacity u_i (sem animar color em texto grande) */
html.mo .passo .passo-num { position: relative; color: color-mix(in srgb, var(--paper) 22%, transparent); }
html.mo .passo-num::after { content: attr(data-num); position: absolute; left: 0; top: 0; color: var(--gold); opacity: var(--u); }
@media (max-width: 1023px) {
  html.mo .passo .passo-num { color: color-mix(in srgb, var(--paper) 50%, transparent); }
  /* Nó: anel (futuro), núcleo dourado (feito; 14 px no atual) e halo de 26 px (atual) */
  html.mo .passo .passo-no { position: relative; z-index: 0; display: block; width: 20px; height: 20px; margin-left: 0; border: 0; background: none; }
  html.mo .passo .passo-no::before { content: ""; position: absolute; inset: 0; box-sizing: border-box; border-radius: 50%; background: var(--ink); border: 2px solid var(--gold); opacity: calc(1 - var(--h)); }
  html.mo .passo .passo-no::after {
    content: ""; position: absolute; left: -3px; top: -3px; width: 26px; height: 26px; z-index: -1; border-radius: 50%;
    background: color-mix(in srgb, var(--gold) 28%, transparent); opacity: var(--h); transform: translateY(calc(var(--h) * 3px));
  }
  html.mo .passo .passo-no > span {
    position: absolute; inset: 0; width: auto; height: auto; border-radius: 50%; background: var(--gold);
    opacity: var(--u); transform: translateY(calc(var(--h) * 3px)) scale(calc(1 - .3 * var(--h)));
  }
  /* Linha: base pontilhada + preenchimento dourado scaleY(g_i) */
  html.mo .passo .passo-linha { position: relative; width: 0; background: none; box-shadow: none; border-left: 2px dotted color-mix(in srgb, var(--paper) 30%, transparent); }
  html.mo .passo .passo-linha::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -2.5px; width: 3px; background: var(--gold);
    box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 45%, transparent); transform: scaleY(var(--g)); transform-origin: top;
  }
}

/* ---------- Entradas (padrão reveal, seção 4) ---------- */
html.mo .rvc, html.mo .rvs {
  transition: opacity var(--rv-dur, 560ms) var(--e-out) calc(var(--rv-d, 0ms) + var(--rv-b, 0ms)),
              transform var(--rv-dur, 560ms) var(--e-out) calc(var(--rv-d, 0ms) + var(--rv-b, 0ms));
}
html.mo .rvp:not(.rv-in) .rvc, html.mo .rvs:not(.rv-in) { opacity: 0; transform: translate(var(--rv-x, 0px), var(--rv-y, 16px)); }
/* Linhas divisórias (P-02, C-02): scaleX a partir da esquerda, 500 ms, e(u) */
html.mo .problema.rvp, html.mo .compromisso.rvp { position: relative; border-top-color: transparent; }
html.mo .problema.rvp:last-child { border-bottom-color: transparent; }
html.mo .problema.rvp::before, html.mo .problema.rvp:last-child::after, html.mo .compromisso.rvp::before {
  content: ""; position: absolute; left: 0; right: 0; transform-origin: left center;
  transition: transform 500ms cubic-bezier(.45, 0, .55, 1) var(--rv-b, 0ms);
}
html.mo .problema.rvp::before { top: -1px; height: 1px; background: color-mix(in srgb, var(--ink) 22%, transparent); }
html.mo .problema.rvp:last-child::after { bottom: -1px; height: 1px; background: color-mix(in srgb, var(--ink) 22%, transparent); }
html.mo .compromisso.rvp::before { top: -2px; height: 2px; background: var(--ink); }
html.mo .rvp:not(.rv-in)::before, html.mo .rvp:not(.rv-in)::after { transform: scaleX(0); }
/* Já acima da viewport ao carregar: estado final direto */
html.mo .rv-ja, html.mo .rv-ja .rvc, html.mo .rv-ja::before, html.mo .rv-ja::after { transition: none !important; }

/* ---------- FAQ (Parte VIII) ---------- */
html.mo .faq-painel { display: grid; grid-template-rows: 1fr; padding: 0; overflow: hidden; transition: grid-template-rows 320ms var(--e-io), visibility 0s; }
html.mo .faq-painel[hidden] { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 260ms var(--e-io), visibility 0s 260ms; }
/* o item da grade não tem padding (senão o painel fechado guardaria 52 px); o respiro fica no texto */
html.mo .faq-painel-in { min-height: 0; overflow: hidden; }
html.mo .faq-painel-in > p { padding: 16px 0 36px; }
html.mo .faq-painel p { transition: opacity 220ms var(--e-out) 60ms; }
html.mo .faq-painel[hidden] p { opacity: 0; transition: opacity 220ms var(--e-out); }
html.mo .faq-pergunta { --pb: 32px; position: relative; transition: padding-bottom 260ms var(--e-io); }
html.mo .faq-pergunta[aria-expanded="true"] { --pb: 0px; transition: padding-bottom 320ms var(--e-io); }
/* Ícone: barra horizontal fixa e barra vertical que recolhe (Q-04); medidas do glifo aprovado */
html.mo .faq-icone { position: relative; transition: background-color 160ms var(--e-out); }
html.mo .faq-icone::before, html.mo .faq-icone::after { content: ""; position: absolute; background: currentColor; }
html.mo .faq-icone::before { left: 14px; top: 19.15px; width: 10px; height: 1.5px; }
html.mo .faq-icone::after { left: 18.25px; top: 15px; width: 1.5px; height: 9.75px; transition: transform 220ms var(--e-out), opacity 220ms var(--e-out); }
html.mo .faq-pergunta[aria-expanded="true"] .faq-icone::before { content: ""; }
html.mo .faq-pergunta[aria-expanded="true"] .faq-icone::after { transform: scaleY(0); opacity: 0; }
@media (hover: hover) { html.mo .faq-pergunta:hover .faq-icone { background-color: color-mix(in srgb, var(--ink) 6%, transparent); } }
html.mo .faq-pergunta:active .faq-icone { background-color: color-mix(in srgb, var(--ink) 10%, transparent); transition-duration: 100ms; }
/* Foco (Q-06): anel ink de 2 px afastado 6 px da linha da pergunta */
html.mo .faq-pergunta:focus-visible { outline: none; }
html.mo .faq-pergunta:focus-visible::after {
  content: ""; position: absolute; left: -6px; right: -6px; top: calc(32px - 6px); bottom: calc(var(--pb) - 6px);
  border: 2px solid var(--ink); border-radius: 8px; pointer-events: none;
}

/* ---------- CTA e formulário (Parte IX) ---------- */
.campo label, .campo legend { transition: color 180ms var(--e-out), opacity 180ms var(--e-out); }
.campo input { transition: border-color 180ms var(--e-out), box-shadow 180ms var(--e-out); }
.campo:has(input:focus-visible) label { color: var(--gold); opacity: 1; }
.campo:has(input[aria-invalid="true"]) label { color: var(--err); opacity: 1; }
html.mo .campo:not(.campo-chips)::after {
  content: ""; position: absolute; right: 2px; bottom: 21px; width: 10px; height: 5px; pointer-events: none;
  border-left: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: rotate(-45deg);
  opacity: 0; transition: opacity 180ms var(--e-out);
}
html.mo .campo.campo--ok::after { opacity: 1; }
html.mo .campo.campo--ok input { padding-right: 24px; }
.chip { transition: background-color 160ms var(--e-out), border-color 160ms var(--e-out), color 160ms var(--e-out), transform 100ms var(--e-out); }
.chip:active { transform: scale(.97); }
.form-botao { transition: transform .25s, box-shadow 200ms var(--e-out); }
.form-botao > span[aria-hidden] { display: inline-block; transition: transform 200ms var(--e-out); }
@media (hover: hover) {
  .form-botao:hover { box-shadow: 0 10px 28px color-mix(in srgb, var(--gold) 25%, transparent); }
  .form-botao:hover > span[aria-hidden] { transform: translateX(2px); }
}
.form-botao:active { transform: translateY(0) scale(.985); transition-duration: 100ms; }
.form-botao[aria-busy="true"] { cursor: wait; transform: none; opacity: 0.85; box-shadow: none; }

/* ---------- Cabeçalho e menu mobile (Parte X) ---------- */
.nav-desktop a:focus-visible { outline-offset: 4px; border-radius: 4px; }
.btn-menu-mobile span { transition: transform 240ms var(--e-io); }
.btn-menu-mobile[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.btn-menu-mobile[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
html.mo .menu-mobile { opacity: 0; transition: opacity 180ms var(--e-io); }
html.mo .menu-mobile.visivel { opacity: 1; transition: opacity 240ms var(--e-out); }
html.mo .menu-mobile-nav a { opacity: 0; transform: translateY(12px); }
html.mo .menu-mobile.visivel .menu-mobile-nav a { opacity: 1; transform: none; transition: opacity 320ms var(--e-out), transform 320ms var(--e-out); }
html.mo .menu-mobile.visivel .menu-mobile-nav a:nth-child(1) { transition-delay: 80ms; }
html.mo .menu-mobile.visivel .menu-mobile-nav a:nth-child(2) { transition-delay: 120ms; }
html.mo .menu-mobile.visivel .menu-mobile-nav a:nth-child(3) { transition-delay: 160ms; }
html.mo .menu-mobile.visivel .menu-mobile-nav a:nth-child(4) { transition-delay: 200ms; }

/* ---------- Pausa do ambiente (fora da tela, aba oculta) ---------- */
.pausa .amb, .pausa .amb::after, html.aba-oculta .amb, html.aba-oculta .amb::after { animation-play-state: paused !important; }

@media (max-width: 1023px) {
  html.mo .faq-painel-in > p { padding: 14px 0 28px; }
  html.mo .faq-pergunta { --pb: 24px; }
  html.mo .faq-pergunta:focus-visible::after { top: calc(24px - 6px); }
  html.mo .faq-icone::before { left: 12.5px; top: 16.5px; width: 9px; }
  html.mo .faq-icone::after { left: 16.25px; top: 13.25px; height: 8.5px; }
  html.mo .campo:not(.campo-chips)::after { bottom: 18px; }
}
} /* fim de @media screen (motion) */

/* ---------- Reduced motion (seção 21) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.001ms !important; transition-delay: 0s !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
  .btn:hover { transform: none; }
  html.js .hero-texto, html.js .hero-jornada, html.js .hero-fundo, .campo-erro:not([hidden]) { animation: none; }
  html.mo .amb, html.mo .amb::after { animation: none !important; }
  /* cometa parado no fim do trecho ativo (H.10) */
  html.mo .jt-cometa { offset-distance: 100%; }
  .chip:active, .form-botao:active, .problema-seta:active > span { transform: none; }
  @media (hover: hover) { .problema-seta:hover .seta-glifo, .form-botao:hover > span[aria-hidden] { transform: none; } }
}

/* ---------- Impressão (M02): conteúdo completo e estados finais ---------- */
@media print {
  /* ambiente apenas pausado (remover a animação a faria recomeçar ao voltar para a tela) */
  .amb, .amb::after { animation-play-state: paused !important; }
  html.mo .jcard-ponto i { visibility: hidden; }
  /* Os SVGs animados nunca recebem display:none no papel (isso destruiria as animações quando a página
     impressa tem outra largura e troca de composição); o que não corresponde à composição impressa
     fica apenas invisível. */
  html.mo .hero-fundo-svg, html.mo .hero-fundo-svg-m, html.mo .jornada-svg, html.mo .jornada-svg-m,
  html.mo .frentes-svg, html.mo .frentes-svg-m { display: block !important; }
  /* posição de fixação gravada pelo script não se aplica no papel */
  .hero-palco { top: auto !important; }
  /* FAQ (spec 18): todas as respostas abertas, independentemente da escolha do visitante */
  .faq-painel[hidden] { display: block !important; }
  .faq-pergunta[aria-expanded="false"] { padding-bottom: 0; }
  .faq-pergunta .faq-icone::before { content: "–"; }
  /* Processo (16.1, q = 1 / s = 3): as quatro etapas concluídas */
  .passo--futuro .passo-num { color: var(--gold); }
  .trilha-prog, .trilha-brilho { width: calc((var(--col) + 32px) * 3); }
  .trilha-marca { left: calc(10px + (var(--col) + 32px) * 3); }
  .trilha-no--4 { background: var(--gold); box-shadow: none; }
}
@media print and (max-width: 1023px) { html.mo .hero-fundo-svg { visibility: hidden; } }
@media print and (min-width: 1024px) { html.mo .hero-fundo-svg-m { visibility: hidden; } }
@media print and (max-width: 829px) { html.mo .jornada-svg { visibility: hidden; } }
@media print and (min-width: 830px) { html.mo .jornada-svg-m { visibility: hidden; } }
@media print and (max-width: 759px) { html.mo .frentes-svg { visibility: hidden; } }
@media print and (min-width: 760px) { html.mo .frentes-svg-m { visibility: hidden; } }
@media print and (max-width: 1023px) {
  /* etapas 01–03 concluídas, etapa 04 com o halo de etapa atual, linha inteira dourada */
  .passo--atual .passo-no { width: 20px; height: 20px; margin-left: 0; display: block; border: 2px solid var(--gold); background: var(--gold); }
  .passo--atual .passo-no span { display: none; }
  .passo--atual .passo-linha { width: 3px; border-left: 0; background: var(--gold); box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 45%, transparent); }
  .passo--futuro .passo-no {
    width: 26px; height: 26px; margin-left: -3px; border: 0; display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--gold) 28%, transparent);
  }
  .passo--futuro .passo-no span { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); }
  .passo--futuro .passo-num { color: var(--gold); }
}