/* Grupo Mônaco · site
   Papel e onyx carregam a superfície; o vermelho é PONTUAÇÃO (palavra-chave,
   unidade, seta, um CTA). Forma RETA; separação por fio de 1px, sem sombra
   (a única sombra é do botão flutuante do simulador). Estrutura do Naka,
   linguagem da arte da Portabilidade e do PSD da Citação. Um papel, um
   componente. O movimento é do R3: aqui só existe o estado final, visível
   sem JS, e os atributos data-* que o R3 lê (ver pages/index.html). */

/* =======================================================================
   BASE
   ======================================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 24px); -webkit-text-size-adjust: 100%; }
/* Lenis (smooth scroll) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
/* Texto corrido em 300 (R3 A2: o corpo lia como negrito e a ênfase sumia). O kit
   jmi2ice ainda só tem 400 e 700: até a Mundial Light entrar nele o navegador usa
   a 400, e a página afina sozinha quando ela entrar, sem deploy. Ênfase fica em 700
   declarado (bolder a partir de 300 daria 400) e rótulo pequeno em 500. */
body {
  font-family: var(--font-body); font-size: var(--t-corpo); font-weight: 300; line-height: 1.6;
  color: var(--fg-1); background: var(--papel);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
strong, b { font-weight: 700; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
img, svg { max-width: 100%; display: block; }
/* <picture> (AVIF, WebP, JPEG) não gera caixa: a <img> de dentro se comporta como
   filha direta da moldura, e as regras de foto que já existiam continuam valendo */
picture { display: contents; }
/* peso herdado: sem isso o botão volta ao 400 do navegador (a lista de públicos) */
button { font-family: inherit; font-weight: inherit; cursor: pointer; }
a { color: inherit; }

h1, h2 {
  font-family: var(--font-display); font-weight: 400; font-size: var(--t-dobra);
  line-height: 1.08; letter-spacing: -.02em; color: var(--fg-1); text-wrap: balance;
}
h3 {
  font-family: var(--font-display); font-weight: 400; font-size: var(--t-card);
  line-height: 1.3; letter-spacing: -.01em; color: var(--fg-1); text-wrap: balance;
}
h4 { font-family: var(--font-body); font-weight: 700; font-size: var(--t-micro); line-height: 1.4; }
p { color: var(--fg-2); text-wrap: pretty; }
/* Viúva no RENDER (R4a): <br class="quebra-larga"> é quebra de desenho só em tela
   larga. No celular o trecho depois dela quebrava sozinho e deixava a última palavra
   só ("pessoa.", "conversa."); sem ela, o balance distribui o título inteiro. O
   espaço antes do <br> no HTML é o que separa as duas palavras quando ele some. */
@media (max-width: 560px) { br.quebra-larga { display: none; } }
.lead { font-size: var(--t-lead); line-height: 1.6; color: var(--fg-2); }
/* palavra-chave do título: vermelho de interface e peso 500 (leve + pesado na mesma frase) */
.hl { color: var(--monaco-red); font-weight: 500; }

/* superfície escura: um só lugar decide tinta de texto e acento */
.escura, .cta-band { background: var(--onyx); color: var(--on-dark-1); }
.escura h1, .escura h2, .escura h3, .cta-band h2 { color: var(--on-dark-1); }
.escura p, .cta-band p { color: var(--on-dark-2); }
.escura .hl, .cta-band .hl, .sim-pitch .hl { color: var(--red-on-dark); }

/* ---- pular para o conteúdo ---- */
.skip { position: absolute; left: -999px; top: 0; z-index: 200; display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 18px; background: var(--onyx); color: #fff; text-decoration: none; }
.skip:focus { left: 0; }

/* ---- foco visível (teclado) ---- */
:focus-visible { outline: 2px solid var(--monaco-red); outline-offset: 3px; }
.escura :focus-visible, .cta-band :focus-visible, .footer :focus-visible, .sim-pitch :focus-visible { outline-color: var(--red-on-dark); }
[hidden] { display: none !important; }

/* =======================================================================
   DOBRA (ritmo: três valores com o zero, sempre simétrica)
   ======================================================================= */
.section { position: relative; padding: var(--dobra-y) 0; }
/* dobra clara que segue outra clara: o respiro é o da de cima */
.section.cola { padding-top: 0; }

/* ---- cabeçalho de seção: h2 + parágrafo, à esquerda ou centrado. Nenhum rótulo
   acima do título (R6): o h2 é o primeiro filho e começa rente ao padding da dobra ---- */
.sec-head { max-width: 760px; margin-bottom: clamp(40px, 4.4vw, 64px); position: relative; z-index: 1; }
.sec-head > p { margin-top: 20px; max-width: 58ch; font-size: var(--t-lead); line-height: 1.6; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.center > p { margin-inline: auto; }

/* =======================================================================
   BOTÕES · duas alturas (52 e 44) por min-height, padding simétrico.
   Primário = Motion Button (radiumcoders) portado: bloco onyx, seta vermelha;
   no hover e no foco um painel vermelho entra da esquerda e colchetes nos
   quatro cantos FECHAM sobre o botão. Contorno = fio de 1px, painel onyx.
   Foco = hover. :active comprime de leve. Tudo some em reduced-motion.
   ======================================================================= */
.btn {
  --btn-bg: var(--onyx); --btn-fg: #fff; --btn-borda: var(--onyx);
  --btn-painel: var(--monaco-red); --btn-fg-hover: #fff;
  --btn-seta: var(--red-on-dark); --btn-seta-hover: #fff; --btn-canto: var(--onyx);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: var(--btn-h); padding: 0 26px;
  font-family: var(--font-body); font-weight: 400; font-size: 15px; line-height: 1.2; letter-spacing: .01em;
  color: var(--btn-fg); background: var(--btn-bg); border: 1px solid var(--btn-borda); border-radius: 0;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: color var(--dur-2) var(--ease-expo), transform var(--dur-1) var(--ease-expo);
}
.btn svg { width: 18px; height: 18px; flex: 0 0 18px; stroke-width: 1.8; color: var(--btn-seta);
  transition: color var(--dur-2) var(--ease-expo), transform var(--dur-2) var(--ease-expo); }
/* painel deslizante */
.btn::before { content: ""; position: absolute; inset: -1px; z-index: -1; background: var(--btn-painel);
  transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-2) var(--ease-expo); }
/* colchetes de canto (mesma geometria da .moldura; os do hover, ver ENQUADRAR) */
.btn::after, .moldura::before,
:where(.card-fio, .card-escuro, .anota, .cit, .result, .brand, li.lista-fios__item, .ticks li, .orbita__item,
       .dado, .conv-grade__lista li, .marco__corpo, .passo__no)::before {
  content: ""; position: absolute; pointer-events: none;
  background:
    linear-gradient(var(--c) 0 0) left top / var(--l) var(--t),
    linear-gradient(var(--c) 0 0) left top / var(--t) var(--l),
    linear-gradient(var(--c) 0 0) right top / var(--l) var(--t),
    linear-gradient(var(--c) 0 0) right top / var(--t) var(--l),
    linear-gradient(var(--c) 0 0) left bottom / var(--l) var(--t),
    linear-gradient(var(--c) 0 0) left bottom / var(--t) var(--l),
    linear-gradient(var(--c) 0 0) right bottom / var(--l) var(--t),
    linear-gradient(var(--c) 0 0) right bottom / var(--t) var(--l);
  background-repeat: no-repeat;
}
.btn::after { --c: var(--btn-canto); --l: 8px; --t: 1.5px; inset: -10px; opacity: 0;
  transition: inset var(--dur-2) var(--ease-expo), opacity var(--dur-1) linear; }
.btn:hover, .btn:focus-visible { color: var(--btn-fg-hover); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn:hover::after, .btn:focus-visible::after { inset: -5px; opacity: 1; }
.btn:hover svg, .btn:focus-visible svg { color: var(--btn-seta-hover); }
.btn:hover .lucide-arrow-right, .btn:focus-visible .lucide-arrow-right { transform: translateX(3px); }
.btn:focus-visible { outline: 0; }
.btn:active { transform: scale(.98); }

.btn-outline {
  --btn-bg: transparent; --btn-fg: var(--onyx); --btn-borda: var(--onyx);
  --btn-painel: var(--onyx); --btn-fg-hover: #fff;
  --btn-seta: var(--monaco-red); --btn-seta-hover: var(--red-on-dark);
}
/* sobre superfície escura */
.escura .btn-primary, .cta-band .btn-primary {
  --btn-bg: #fff; --btn-fg: var(--onyx); --btn-borda: #fff;
  --btn-seta: var(--monaco-red); --btn-canto: #fff;
}
.escura .btn-outline, .cta-band .btn-outline {
  --btn-fg: #fff; --btn-borda: rgba(255,255,255,.34); --btn-painel: #fff; --btn-fg-hover: var(--onyx);
  --btn-seta: var(--red-on-dark); --btn-seta-hover: var(--monaco-red); --btn-canto: #fff;
}
.btn-sm { min-height: var(--btn-h-compacto); padding: 0 16px; gap: 8px; font-size: 14px; }
.btn-sm svg { width: 16px; height: 16px; flex-basis: 16px; }
.btn-quadrado { width: var(--btn-h-compacto); padding: 0; }

/* ---- link com seta: Link Button (hyperiux) portado · sublinhado que se
   desenha e seta que gira de ↗ para → ---- */
.link-arrow {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-family: var(--font-body); font-weight: 700; font-size: 15px; line-height: 1.2;
  color: var(--monaco-red); text-decoration: none;
}
.link-arrow::after { content: ""; position: absolute; left: 0; right: 26px; bottom: 10px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-2) var(--ease-expo); }
.link-arrow svg { width: 18px; height: 18px; flex: 0 0 18px; stroke-width: 2; transform: rotate(-45deg);
  transition: transform var(--dur-2) var(--ease-expo); }
.link-arrow:hover::after, .link-arrow:focus-visible::after { transform: scaleX(1); }
.link-arrow:hover svg, .link-arrow:focus-visible svg { transform: none; }
.escura .link-arrow, .cta-band .link-arrow { color: var(--red-on-dark); }

/* =======================================================================
   ORNAMENTO (sempre aria-hidden no markup)
   ======================================================================= */
/* moldura de fio com marcas de canto em L (na dobra escura, fio e canto claros) */
.moldura { position: relative; border: 1px solid var(--fio); padding: 12px; }
.moldura::before { --c: var(--onyx); --l: 14px; --t: 1.5px; inset: -1px; z-index: 2;
  transition: inset var(--dur-2) var(--ease-expo); }
.escura .moldura { border-color: var(--onyx-line); }
.escura .moldura::before { --c: var(--on-dark-1); }
/* grade vermelha tênue da arte, passo de 40px; cada uso define a máscara */
.grade-fundo {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(to right, var(--grade-cor) 1px, transparent 1px),
                    linear-gradient(to bottom, var(--grade-cor) 1px, transparent 1px);
  background-size: var(--grade-passo) var(--grade-passo);
}
/* lead com fio vermelho à esquerda (o R3 cresce o fio por --lead-fio) */
.lead-fio { position: relative; padding-left: 22px; max-width: 46ch; font-size: var(--t-lead); line-height: 1.6; color: var(--fg-2); }
.lead-fio::before { content: ""; position: absolute; left: 0; top: .3em; bottom: .3em; width: 2px;
  background: var(--monaco-red); transform: scaleY(var(--lead-fio, 1)); transform-origin: top center; }
/* ladrilho de ícone de canto chanfrado (eco do corte do M), sem raio */
.ladrilho {
  display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px;
  background: var(--red-50); color: var(--monaco-red);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.ladrilho svg { width: 22px; height: 22px; stroke-width: 1.7; }
/* card de fio (claro) e card escuro com listras no ângulo do M */
.card-fio { background: var(--white); border: 1px solid var(--fio); padding: clamp(28px, 2.6vw, 40px); }
.card-escuro {
  background: var(--onyx-2) repeating-linear-gradient(127deg, var(--listra) 0 1px, transparent 1px 16px);
  border: 1px solid var(--onyx-line); padding: clamp(28px, 2.6vw, 40px); color: var(--on-dark-1);
}
.card-escuro h3 { color: var(--on-dark-1); }
.card-escuro p { color: var(--on-dark-2); }
/* selo: anel duplo em volta do ícone, dentro de card de fio */
.selo { position: relative; display: grid; place-items: center; width: 64px; height: 64px;
  border: 1px solid var(--fio); border-radius: var(--r-circulo); color: var(--monaco-red); }
.selo::after { content: ""; position: absolute; inset: 5px; border: 1px dashed var(--fio); border-radius: var(--r-circulo); }
.selo svg { width: 24px; height: 24px; stroke-width: 1.6; }
/* M da marca inline (marca d'água, traço, símbolo) */
.marca-m { fill: currentColor; }

/* =======================================================================
   CABEÇALHO · faixa do topo (microtexto) + barra (Naka). Sticky com top
   negativo = altura da faixa: a faixa sai de cena ao rolar, a barra fica.
   ======================================================================= */
.hdr { position: sticky; top: calc(var(--topbar-h) * -1); z-index: 50; background: var(--papel); }
.topbar { height: var(--topbar-h); border-bottom: 1px solid var(--fio); }
/* linha de microtexto da arte: dois textos nas pontas, ênfase em vermelho. No
   cabeçalho o fio é do .topbar (de ponta a ponta); fora dele, .microtexto--fio. */
.microtexto { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.microtexto--fio { padding-bottom: 14px; border-bottom: 1px solid var(--fio); }
.microtexto p { font-size: 13px; line-height: 1.2; color: var(--fg-2); white-space: nowrap; letter-spacing: .005em; }
.microtexto b { font-weight: 400; color: var(--monaco-red); }
.topbar .microtexto { height: 100%; }
.suporte { display: inline-flex; align-items: center; gap: 8px; }
.suporte svg { width: 14px; height: 14px; stroke-width: 1.8; color: var(--monaco-red); }
.suporte a { color: var(--fg-1); text-decoration: none; }
.suporte a:hover { text-decoration: underline; text-underline-offset: 3px; }

.navbar { position: relative; background: var(--papel); border-bottom: 1px solid var(--fio); }
.navbar__in { display: flex; align-items: center; gap: 20px; min-height: var(--nav-h); }
.brand { display: inline-flex; align-items: center; min-height: 44px; flex-shrink: 0; }
.brand img { height: 22px; width: auto; }
.nav { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; gap: 16px; }
.nav__links { display: flex; align-items: center; margin-left: 4px; }
.nav__links a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-size: 14px; font-weight: 400; color: var(--fg-2); text-decoration: none; white-space: nowrap; letter-spacing: .01em;
  transition: color var(--dur-1) linear; }
.nav__links a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 1px;
  background: var(--monaco-red); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-2) var(--ease-expo); }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--fg-1); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__redes { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* régua vermelha de progresso sob o cabeçalho (o R3 escreve --p de 0 a 1) */
.hdr-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--monaco-red);
  transform: scaleX(var(--p, 0)); transform-origin: left center; pointer-events: none; }

/* faixa estreita de desktop: menu mais justo */
@media (max-width: 1260px) {
  .nav__links a { padding: 0 9px; font-size: 13.5px; }
  .nav__links a::after { left: 9px; right: 9px; }
  .navbar__in, .nav { gap: 12px; }
}
/* Até 1100 (R4 A4): o topo rola com a página e é só a faixa da tagline e o logo;
   o menu inteiro mora na barra de vidro do pé (MENU DO CELULAR). O logo fica à
   ESQUERDA, na margem da tagline e do herói (R5, pedido do cliente: centralizado,
   ele saía do alinhamento do resto do topo). */
@media (max-width: 1100px) {
  :root { --nav-h: 64px; }
  /* sem cabeçalho grudado, a âncora não precisa descontar a barra de cima, e sim a de baixo */
  html { scroll-padding-top: 24px; scroll-padding-bottom: calc(var(--barra-livre) + 16px); }
  .hdr { position: relative; top: auto; }
  .navbar__in { justify-content: flex-start; }
  .nav, .nav-actions, .navbar .hdr-progress { display: none; }
}
@media (max-width: 760px) {
  :root { --topbar-h: 36px; }
  .suporte { display: none; }
  .microtexto .tagline { font-size: 12px; }
}

/* =======================================================================
   MENU DO CELULAR (até 1100 · R4 A4, referência fluid.glass)
   Vidro fixo no pé: o M, o nome da página e o menu. Aberto, a barra encolhe
   no quadrado do X, o painel do mesmo vidro sobe acima dela e o véu escurece
   a página. O vidro é o PRÓPRIO .barra: o view-transition-name (motion.css)
   faz do elemento uma raiz de fundo, e um filho com blur ali dentro não veria
   a página. Reto como a marca. O fio de 1px é o que separa a barra da dobra
   onyx: sem ele, onyx a 80% sobre onyx dá 1,0:1 e a barra some.
   Véu a 60% (a referência usa 40%): é o que segura o rótulo "Menu" em
   --on-dark-3 acima de 4,5:1 com o painel sobre o papel (medido em qa/r4).
   ======================================================================= */
/* R7: barra de rolagem da página em vermelho da marca (pedido do usuário: "vermelha ao
   invés de cinza"). scrollbar-color cobre Chrome 121+ e Firefox; ::-webkit-* cobre o Safari. */
html { scrollbar-color: var(--monaco-red) var(--papel); }
html::-webkit-scrollbar { width: 10px; background: var(--papel); }
html::-webkit-scrollbar-thumb { background: var(--monaco-red); }

.menu-cel { display: none; }
@media (max-width: 1100px) {
  :root {
    --barra-h: 52px;
    --barra-b: calc(31px + env(safe-area-inset-bottom));  /* do pé da tela ao pé da barra */
    --barra-livre: calc(var(--barra-b) + var(--barra-h));  /* faixa que a barra ocupa */
  }
  /* Trava da rolagem. Com barra de rolagem clássica (janela estreita no desktop) ela some
     ao travar: --sb (medida pelo app.js) devolve a largura dela, e nada pula nem aparece
     a faixa clara que o scrollbar-gutter deixava ao lado do véu. No celular --sb é 0. */
  html.menu-aberto { overflow: hidden; padding-right: var(--sb, 0px); }
  .menu-aberto .barra, .menu-aberto .painel { right: var(--sb, 0px); }
  .menu-cel { display: block; }
  .barra, .painel {
    background: color-mix(in srgb, var(--onyx) 80%, transparent);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    color: var(--on-dark-1);
  }
  .menu-cel :focus-visible { outline-color: var(--red-on-dark); }

  /* ---- a barra: 287 de 390 como na referência, e nunca mais larga que isso ---- */
  .barra { position: fixed; z-index: 70; left: 0; right: 0; bottom: var(--barra-b); margin-inline: auto;
    width: min(73.6vw, 287px); height: var(--barra-h); overflow: hidden;
    /* R5: a barra inteira é o <button> do menu; tira o estilo nativo de botão */
    appearance: none; padding: 0; border: 0; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .barra:active { transform: scale(.97); }   /* retorno do toque */
  .barra::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--fio-escuro); pointer-events: none; }
  /* a régua de leitura vira o fio de cima da barra (vermelho de fundo escuro) */
  .barra .hdr-progress { top: 0; bottom: auto; z-index: 1; background: var(--red-on-dark); }
  .barra__marca, .barra__menu { position: absolute; top: 0; display: grid; place-items: center;
    width: var(--barra-h); height: var(--barra-h); color: inherit; }
  .barra__marca { left: 0; }
  .barra__marca img { width: 28px; height: auto; }
  .barra__menu { right: 0; padding: 0; background: none; border: 0; }
  .barra__menu svg { grid-area: 1 / 1; }
  .barra__fecha { opacity: 0; }
  .barra:focus-visible { outline: 2px solid var(--red-on-dark); outline-offset: -4px; }   /* dentro da barra */
  .barra__nome { position: absolute; inset: 0 var(--barra-h); overflow: hidden; pointer-events: none; text-align: center;
    font-family: var(--font-display); font-weight: 400; font-size: 13px; line-height: var(--barra-h);
    letter-spacing: .015em; white-space: nowrap; }
  .barra__nome > span { display: block; }

  /* ---- aberta: quadrado do X ---- */
  .menu-aberto .barra { width: var(--barra-h); }
  .menu-aberto .barra__marca { opacity: 0; visibility: hidden; }
  .menu-aberto .barra__nome > span { transform: translateY(-100%); }
  .menu-aberto .barra .hdr-progress { opacity: 0; }
  .menu-aberto .barra__abre { opacity: 0; }
  .menu-aberto .barra__fecha { opacity: 1; }

  .menu-cel__veu { position: fixed; inset: 0; z-index: 68; background: color-mix(in srgb, var(--onyx) 60%, transparent);
    opacity: 0; visibility: hidden; }
  .menu-aberto .menu-cel__veu { opacity: 1; visibility: visible; }

  /* ---- o painel: preso acima do quadrado, cresce para cima. --folga vai de 0 (tela de
     662px ou menos, espaços no mínimo: cabe no iPhone 13 com a barra do Safari aberta)
     a 80 (espaços da referência); abaixo disso o painel rola por dentro. ---- */
  .painel { --folga: clamp(0px, 100vh - 662px, 80px);
    position: fixed; z-index: 69; left: 0; right: 0; margin-inline: auto; width: min(85.4vw, 333px);
    bottom: calc(var(--barra-livre) + 16px + var(--folga) * .06);
    max-height: calc(100vh - var(--barra-livre) - 28px); overflow-y: auto; overscroll-behavior: contain;
    padding: calc(16px + var(--folga) * .4) min(10.67vw, 41.6px) calc(16px + var(--folga) * .2);
    border: 1px solid var(--fio-escuro);
    /* nasce da barra: sobe um pouco e cresce de .98 a partir do pé */
    opacity: 0; visibility: hidden; transform: translateY(20px) scale(.98); transform-origin: 50% 100%; }
  .menu-aberto .painel { opacity: 1; visibility: visible; transform: none; }
  .painel__rotulo { font-family: var(--font-body); font-weight: 500; font-size: var(--t-rotulo); line-height: 1.2;
    letter-spacing: .015em; color: var(--on-dark-3); }
  .painel__links { list-style: none; margin-top: calc(8px + var(--folga) * .15); }
  /* a linha sobe por dentro da máscara (o próprio link, com overflow) */
  .painel__links a { display: flex; align-items: center; min-height: 44px; overflow: hidden;
    font-family: var(--font-display); font-weight: 400; font-size: min(8.53vw, 34px); line-height: 1.125;
    letter-spacing: -.02em; color: var(--on-dark-1); text-decoration: none; }
  .painel__links a[aria-current="page"] { color: var(--red-on-dark); }
  .painel__links span { display: block; transform: translateY(110%); }
  .menu-aberto .painel__links span { transform: none; }
  /* duas zonas como na referência (links / contato): o vão entre elas é o maior do painel,
     pago com o topo, a base e o botão, para o total não mudar na tela mínima */
  .painel__pe { margin-top: calc(32px + var(--folga) * .05); opacity: 0; transform: translateY(8px); }
  .menu-aberto .painel__pe { opacity: 1; transform: none; }
  /* Duas colunas cheias como na referência: canais à esquerda (Contato, Instagram,
     WhatsApp), dado à direita (telefone, E-mail). O endereço completo tem 201px em 14px
     e a coluna de 360 tem 106, então ele vive no mailto e no aria-label. */
  .painel__sub { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: 16px; }
  .painel__sub a { display: inline-flex; align-items: center; min-height: 44px; font-size: clamp(14px, 3.85vw, 16px);
    line-height: 1.2; color: var(--on-dark-2); text-decoration: none; }
  .painel__cta { display: flex; width: 100%; margin-top: calc(12px + var(--folga) * .2);
    --btn-bg: var(--monaco-red); --btn-borda: var(--monaco-red); --btn-painel: var(--monaco-red-deep);
    --btn-seta: #fff; --btn-seta-hover: #fff; --btn-canto: #fff; }
  @media (hover: hover) {
    .painel__links a:hover { color: var(--red-on-dark); }
    .painel__sub a:hover { color: var(--on-dark-1); text-decoration: underline; text-underline-offset: 3px; }
  }
}
@supports (height: 100dvh) {
  @media (max-width: 1100px) {
    .painel { --folga: clamp(0px, 100dvh - 662px, 80px); max-height: calc(100dvh - var(--barra-livre) - 28px); }
  }
}
/* R5, mais suave (pedido do cliente; eram 300 ms para abrir e 220 para fechar, na
   curva expo, que arranca seco): abre em 560 ms e fecha em 400. A barra encolhe na
   curva de entrada e saída macia (--macia); o resto desacelera longo (--pousa). O
   vidro chega primeiro, as linhas sobem em cascata depois e o pé por último. Vale
   a transição da regra de DESTINO; o que some (visibility) só some no fim do fade. */
@media (max-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .menu-cel { --abre: 560ms; --fecha: 400ms; --macia: cubic-bezier(.65, 0, .35, 1); --pousa: cubic-bezier(.22, 1, .36, 1); }
  .barra { transition: width var(--fecha) var(--macia), transform 200ms var(--pousa); }
  .menu-aberto .barra { transition: width var(--abre) var(--macia), transform 200ms var(--pousa); }
  /* ao fechar, o M e o nome voltam depois que a barra já alargou um pouco */
  .barra__marca { transition: opacity var(--fecha) var(--pousa) 120ms, visibility 0s; }
  .menu-aberto .barra__marca { transition: opacity 240ms var(--pousa), visibility 0s linear 240ms; }
  .barra__nome > span { transition: transform var(--fecha) var(--pousa) 80ms; }
  .menu-aberto .barra__nome > span { transition: transform 360ms var(--pousa); }
  .barra__menu svg, .barra .hdr-progress { transition: opacity var(--fecha) var(--pousa), transform 0s; }
  .menu-aberto .barra__menu svg { transition: opacity var(--abre) var(--pousa), transform 0s; }
  .menu-cel__veu { transition: opacity var(--fecha) var(--pousa), visibility 0s linear var(--fecha); }
  .menu-aberto .menu-cel__veu { transition: opacity var(--abre) var(--pousa), visibility 0s; }
  .painel { transition: opacity var(--fecha) var(--pousa), transform var(--fecha) var(--pousa), visibility 0s linear var(--fecha); }
  .menu-aberto .painel { transition: opacity var(--abre) var(--pousa) 60ms, transform var(--abre) var(--pousa) 60ms, visibility 0s; }
  /* as linhas sobem da máscara em cascata; ao fechar, voltam para baixo dela só depois do fade */
  .painel__links span { transition: transform 0s linear var(--fecha); }
  .menu-aberto .painel__links span { transition: transform 620ms var(--pousa) calc(140ms + var(--i, 0) * 45ms); }
  .painel__pe { transition: opacity 0s linear var(--fecha), transform 0s linear var(--fecha); }
  .menu-aberto .painel__pe { transition: opacity 480ms var(--pousa) 340ms, transform 480ms var(--pousa) 340ms; }
}
/* saída para outra página: o app.js fecha sem transição antes do instantâneo */
html.menu-instantaneo .menu-cel, html.menu-instantaneo .menu-cel * { transition: none !important; }

/* =======================================================================
   HERO (home) · dividido: texto à esquerda, foto em moldura à direita
   ======================================================================= */
.hero { position: relative; overflow: hidden; padding: var(--dobra-y-curta) 0; }
.hero > .wrap { position: relative; z-index: 1; }
.hero__grade { -webkit-mask-image: radial-gradient(70% 75% at 80% 42%, #000 25%, transparent 80%);
               mask-image: radial-gradient(70% 75% at 80% 42%, #000 25%, transparent 80%); }
.hero__m { position: absolute; z-index: 0; top: 6%; right: -21%; width: min(1180px, 82vw); height: auto;
  color: var(--m-tom); pointer-events: none; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: clamp(40px, 5.6vw, 88px); align-items: center; }
.hero__txt h1 { max-width: 12em; }
.hero__txt .lead-fio { margin-top: 28px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.prova { display: flex; align-items: center; gap: 16px; margin-top: 32px; }
.avatars { display: flex; flex: 0 0 auto; }
.avatars span { width: 40px; height: 40px; margin-left: -10px; overflow: hidden;
  border: 2px solid var(--papel); border-radius: var(--r-circulo); background: var(--fio); }
.avatars span:first-child { margin-left: 0; }
.avatars img { width: 100%; height: 100%; object-fit: cover; }
.prova__txt { font-size: 14px; line-height: 1.45; color: var(--fg-2); }
.prova__txt strong { font-family: var(--font-display); font-weight: 500; color: var(--fg-1); font-variant-numeric: tabular-nums; }
.stars { display: inline-flex; vertical-align: -2px; color: var(--monaco-red); }
.stars svg { width: 15px; height: 15px; fill: currentColor; }

.hero__fig { position: relative; }
.hero__img { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--r-foto); }
/* anotações em colchete (SignalIQ): superfície própria, porque sobre foto
   nenhuma tinta fixa passa em contraste */
.anota { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 6px;
  padding: 14px 18px 16px; background: var(--white); border: 1px solid var(--fio); }
/* posição: --esq/--dir são os mesmos lugares de --taxa/--prazo, nomeados pelo
   lado (as linhas de produto da /solucoes apontam o colchete para o texto).
   Saem mais para fora da foto que antes (eram -40, R4a): com as fotos definitivas
   o rosto da pessoa à esquerda fica a ~25% da largura, e a -40 a caixa de 195px
   cobria a têmpora dela a 1200. No herói (retrato, sem folga lateral no recorte)
   precisa de -64; nas linhas, a foto já encosta à esquerda (object-position 0%) e
   -52 basta, sem chegar a menos de 27px do parágrafo vizinho a 1200. --baixo desce
   a anotação ao pé da foto quando nem o recorte tira o rosto de baixo dela. */
.anota--taxa { left: -64px; top: 12%; }
.anota--esq { left: -52px; top: 12%; }
.anota--prazo, .anota--dir { right: -24px; bottom: 11%; }
.anota--baixo { top: auto; bottom: 11%; }
/* 981 a 1180: a foto encolhe e a caixa não; o rosto chega na anotação e o vão entre
   as colunas não deixa ela sair mais. Aí a anotação da esquerda vai para o pé, onde
   não há rosto, e volta aos -40px (lá embaixo ela encostaria nos botões). */
@media (min-width: 981px) and (max-width: 1180px) {
  .anota--taxa, .anota--esq { left: -40px; top: auto; bottom: 11%; }
}
/* fotos da R3: a 11% a caixa do cartão e o colchete da portabilidade encostavam nos
   dedos do consultor; a 4% só pegam mesa e perna. Só no desktop: até 980 a anotação
   é relative e um bottom a empurraria para cima. */
@media (min-width: 981px) { #cartao .anota, #portabilidade .anota { bottom: 4%; } }
.anota__rot { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--fg-2); }
.anota__rot::before, .anota__frase::before { content: ""; width: 6px; height: 6px; flex: 0 0 6px; background: var(--monaco-red); }
.anota__val { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.05; letter-spacing: -.02em;
  color: var(--fg-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.anota__val .u { color: var(--monaco-red); }
.anota__val .s { font-size: .5em; letter-spacing: 0; }
/* frase única (produto sem número no texto): a frase inteira no corpo de card, o
   quadradinho do rótulo como marcador na primeira linha. Rótulo + valor partia uma
   frase em duas ("Juros" / "bem menores..."); rótulo + valor fica só para número. */
.anota__frase { position: relative; max-width: calc(16ch + 16px); padding-left: 16px;
  font-family: var(--font-display); font-weight: 400; font-size: var(--t-card); line-height: 1.25;
  letter-spacing: -.01em; color: var(--fg-1); text-wrap: balance; }
.anota__frase::before { position: absolute; left: 0; top: calc(.625em - 3px); }
.anota__nota { max-width: 21ch; font-size: 12px; line-height: 1.4; color: var(--fg-2); }
.colchete { position: absolute; top: 50%; width: 40px; height: 22px; border: 0 solid var(--fg-1); pointer-events: none; }
.anota--taxa .colchete, .anota--esq .colchete { left: 100%; border-top-width: 1px; border-right-width: 1px; }
.anota--prazo .colchete, .anota--dir .colchete { right: 100%; border-top-width: 1px; border-left-width: 1px; }

/* convênios: grade de fio com cabeçalho hachurado (os fios são o gap de 1px) */
.conv-grade { margin-top: clamp(48px, 5vw, 72px); background: var(--white); border: 1px solid var(--fio); }
.conv-grade__cap { padding: 12px 16px; border-bottom: 1px solid var(--fio); text-align: center;
  font-size: var(--t-rotulo); font-weight: 500; line-height: 1.4; color: var(--fg-2);
  background: repeating-linear-gradient(-45deg, var(--hachura) 0 1px, transparent 1px 7px); }
.conv-grade__lista { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--fio); }
.conv-grade__lista li { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 76px; padding: 12px 8px;
  background: var(--white); text-align: center; font-family: var(--font-display); font-weight: 400; font-size: 14px;
  line-height: 1.25; letter-spacing: -.01em; color: var(--fg-1); white-space: nowrap; }
.conv-grade__lista svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--monaco-red); stroke-width: 1.6; }

/* =======================================================================
   SOBRE NÓS (bloco escuro dividido): M em traço à esquerda, manifesto
   ======================================================================= */
.sobre-bloco__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 112px); align-items: center; }
.sobre-bloco__m { width: 100%; height: auto; overflow: visible; }
/* traço em unidade do viewBox (3,3 = 1,5px a 1440): sem non-scaling-stroke, porque
   com ele o pathLength="1" deixa de normalizar o tracejado e o R3 perde o desenho
   por stroke-dasharray: 1 / stroke-dashoffset: 1 -> 0. */
.sobre-bloco__m path { fill: none; stroke: #3A3A40; stroke-width: 3.3; }
.sobre-bloco__m .apice { stroke: var(--red-on-dark); }
.sobre-bloco .manifesto { font-family: var(--font-display); font-weight: 400;
  font-size: clamp(20px, .75vw + 15px, 27px); line-height: 1.45; letter-spacing: -.015em; color: var(--on-dark-1); }
/* O manifesto é container de dois parágrafos. Sem o `inherit`, a regra `.escura p`
   atinge os filhos direto e vence a herança: o texto escurece E o scroll-read
   passa a acender para a cor errada, que é o defeito de 25/09 no Safari. */
.sobre-bloco .manifesto p { color: inherit; }
.sobre-bloco .manifesto p + p { margin-top: .85em; }

/* =======================================================================
   ABAS DE SOLUÇÕES (Naka + Scroll Reveal Content A): lista com linha de
   progresso à esquerda, foto da aba à direita. Sem JS tudo aberto; com
   html.js fica aberta a aba de aria-expanded="true" e só a foto dela.
   ======================================================================= */
.abas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.abas__lista { border-top: 1px solid var(--fio); }
.aba { position: relative; border-bottom: 1px solid var(--fio); }
.aba__cab { display: flex; align-items: center; gap: 16px; }
.aba__tit { flex: 1 1 auto; min-width: 0; }
.aba__btn { display: flex; align-items: center; width: 100%; min-height: 76px; padding: 12px 0;
  background: none; border: 0; text-align: left; font: inherit; letter-spacing: inherit; color: inherit;
  transition: color var(--dur-2) var(--ease-expo); }
/* selo "Mais procurado" AO LADO do título da aba da home; acima de título ele não
   entra (R6: saiu da linha de produto da /solucoes) */
.aba__selo { flex: 0 0 auto; padding: 5px 10px; border: 1px solid var(--monaco-red);
  font-size: 12px; font-weight: 500; line-height: 1.2; color: var(--monaco-red); white-space: nowrap; }
.aba__corpo { display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows var(--dur-2) var(--ease-expo), visibility var(--dur-2) linear; }
/* folga de 6px por dentro: o anel de foco do link não é cortado pelo overflow */
.aba__dentro { min-height: 0; overflow: hidden; margin: -6px; padding: 6px; }
.aba__dentro p { max-width: 50ch; }
.aba__dentro .link-arrow { margin: 6px 0 16px; }
.aba__progresso { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--monaco-red);
  transform: scaleX(var(--p, 0)); transform-origin: left center; pointer-events: none; }
.abas__paineis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.aba__painel img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-foto); }
html.js .aba:has(.aba__btn[aria-expanded="false"]) .aba__corpo { grid-template-rows: 0fr; visibility: hidden; }
html.js .aba__btn[aria-expanded="false"] { color: var(--fg-2); }
html.js .aba__btn[aria-expanded="false"]:hover { color: var(--fg-1); }
html.js .abas__paineis { grid-template-columns: minmax(0, 1fr); }
html.js .aba__painel { grid-area: 1 / 1; opacity: 0; visibility: hidden;
  transition: opacity var(--dur-2) var(--ease-expo), visibility var(--dur-2) linear; }
html.js .abas:has(.aba:nth-child(1) .aba__btn[aria-expanded="true"]) .aba__painel:nth-child(1),
html.js .abas:has(.aba:nth-child(2) .aba__btn[aria-expanded="true"]) .aba__painel:nth-child(2),
html.js .abas:has(.aba:nth-child(3) .aba__btn[aria-expanded="true"]) .aba__painel:nth-child(3),
html.js .abas:has(.aba:nth-child(4) .aba__btn[aria-expanded="true"]) .aba__painel:nth-child(4) { opacity: 1; visibility: visible; }

/* =======================================================================
   PARA QUEM ATENDEMOS (escuro): 2x2 em volta do símbolo, separados por fio
   ======================================================================= */
.orbita { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(32px, 4.5vw, 72px); }
.orbita__col { list-style: none; }
.orbita__item { padding: 32px 0; border-top: 1px solid var(--onyx-line); }
.orbita__item:last-child { border-bottom: 1px solid var(--onyx-line); }
.orbita__item svg { width: 26px; height: 26px; margin-bottom: 18px; color: var(--red-on-dark); stroke-width: 1.5; }
.orbita__item h3 { margin-bottom: 8px; }
.orbita__item p { max-width: 34ch; font-size: 15px; }
.orbita__simbolo { position: relative; display: grid; place-items: center; width: clamp(220px, 21vw, 300px); aspect-ratio: 1;
  border: 1px solid var(--onyx-line); border-radius: var(--r-circulo); }
.orbita__simbolo::before { content: ""; position: absolute; inset: 22px; border: 1px solid var(--onyx-line); border-radius: var(--r-circulo); }
.orbita__simbolo svg { position: relative; width: 52%; height: auto; }
/* R4: o logo oficial para fundo escuro (monaco-mark-white.svg), branco e vermelho do
   manual; o cinza tom sobre tom sumia no onyx (pedido do cliente, desktop e celular) */
.orbita__simbolo path { fill: #fff; }
.orbita__simbolo .apice { fill: var(--monaco-red-manual); }
.segmentos__acao, .selos__acao { display: flex; justify-content: center; margin-top: 44px; }

/* =======================================================================
   EM NÚMEROS · grade só de fios, unidade vermelha, e o bloco de CTA onyx
   ======================================================================= */
.dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--fio); }
.dado { padding: 36px 40px 36px 0; border-bottom: 1px solid var(--fio); }
.dado:nth-child(even) { padding: 36px 0 36px 40px; border-left: 1px solid var(--fio); }
.dado__n { font-family: var(--font-display); font-weight: 400; font-size: clamp(44px, 2.6vw + 22px, 72px); line-height: 1;
  letter-spacing: -.03em; color: var(--fg-1); font-variant-numeric: tabular-nums; }
.dado__n .u { color: var(--monaco-red); }
/* o espaço mora DENTRO do .s ("<span class="s"> mil</span>"): o texto lido fica
   "+18 mil", e o vão sai no corpo pequeno, não nos 72px do número */
.dado__n .s { margin-left: 4px; font-size: .32em; letter-spacing: 0; }
.dado__t { margin-top: 14px; max-width: 38ch; font-size: 15px; }
/* bloco de CTA da arte: faixa clara com o isotipo, onyx, seta vermelha para baixo */
.cta-bloco { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  margin-top: 48px; background: var(--onyx); color: #fff; text-decoration: none; }
.cta-bloco::before { content: ""; position: absolute; inset: 32px 0 0; z-index: -1; background: var(--monaco-red);
  transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-2) var(--ease-expo); }
.cta-bloco__faixa { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; height: 32px; background: #DCDAD8; }
.cta-bloco__faixa svg { width: auto; height: 13px; }
.cta-bloco__faixa path { fill: var(--onyx); }
.cta-bloco__faixa .apice { fill: var(--monaco-red-manual); }
.cta-bloco__txt { padding: 26px clamp(24px, 3vw, 40px); font-family: var(--font-display); font-weight: 400;
  font-size: clamp(24px, 1.2vw + 17px, 36px); line-height: 1.1; letter-spacing: -.02em; }
.cta-bloco .lucide { width: 32px; height: 32px; margin-right: clamp(24px, 3vw, 40px); color: var(--red-on-dark); stroke-width: 1.6;
  transition: color var(--dur-2) var(--ease-expo), transform var(--dur-2) var(--ease-expo); }
.cta-bloco:hover::before, .cta-bloco:focus-visible::before { transform: scaleX(1); }
.cta-bloco:hover .lucide, .cta-bloco:focus-visible .lucide { color: #fff; transform: translateY(3px); }

/* =======================================================================
   SIMULADOR · só a forma; a lógica mora no app.js e não mudou.
   Invariantes: overflow clip no .sim-split (com hidden o sticky morre),
   coluna minmax(0,1fr) no celular, .result empilha abaixo de 420px.
   ======================================================================= */
/* overflow: clip recorta igual ao hidden, mas NÃO vira contêiner de rolagem:
   sem isso o botão sticky do WhatsApp gruda no card, e não na tela.
   O hidden fica antes como recuo para navegador sem clip. */
/* Colunas iguais (R4a; eram .9fr e 1.1fr): "Veja sua parcela" mede 462px a 48px e a
   coluna do título dava 425, então "segundos." ficava sozinho a 1440 e a 1200. Iguais,
   o título dá 483 e 463 e fecha em duas linhas, "em segundos." embaixo. */
.sim-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--white);
  border: 1px solid var(--fio); border-radius: 0; overflow: hidden; overflow: clip; }
.sim-pitch { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
  padding: 56px 48px; background: var(--onyx); color: var(--on-dark-1); }
.sim-pitch h2 { position: relative; margin: 0 0 18px; color: var(--on-dark-1); }
.sim-pitch p { position: relative; color: var(--on-dark-2); }
.sim-pitch .mark-watermark { position: absolute; top: 32px; right: 32px; height: 56px; width: auto; opacity: .14; }
.sim { padding: 48px; }
/* wrap: onde o título não cabe ao lado do ladrilho (390: 230px contra 281), ele desce
   para a linha de baixo inteiro, em vez de deixar "consignado" sozinho */
.sim .top { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 28px; }
.sim .top h3 { font-size: var(--t-card); }
.sim .fld { margin-bottom: 24px; }
.sim label, .sim-lab { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 700; line-height: 1.3;
  letter-spacing: .01em; color: var(--fg-2); }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button { flex: 1; min-width: fit-content; min-height: 44px; padding: 0 12px; background: var(--white);
  border: 1px solid var(--fio); border-radius: 0; color: var(--fg-2); font-family: var(--font-body);
  font-size: 14px; font-weight: 400; line-height: 1.2;
  transition: background var(--dur-1) linear, border-color var(--dur-1) linear, color var(--dur-1) linear; }
.seg button.active { background: var(--onyx); border-color: var(--onyx); color: #fff; }
.seg button:hover:not(.active) { border-color: var(--onyx); color: var(--fg-1); }
/* Prazos: grade fixa. Em flex-wrap os 10 botões quebravam 9 + 1 e o "120x"
   sozinho esticava por toda a largura. */
#segParcelas { display: grid; grid-template-columns: repeat(5, 1fr); }
#segParcelas button { flex: none; min-width: 0; }
@media (max-width: 420px) { #segParcelas { grid-template-columns: repeat(4, 1fr); } }
/* régua de valor: trilho de 4px dentro de uma caixa de 44px (alvo de toque) */
.range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0;
  background: transparent; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 4px; background: var(--fio); }
.range::-moz-range-track { height: 4px; background: var(--fio); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px;
  background: var(--monaco-red); border: 3px solid var(--white); outline: 1px solid var(--monaco-red); }
.range::-moz-range-thumb { width: 14px; height: 14px; background: var(--monaco-red); border: 3px solid var(--white);
  outline: 1px solid var(--monaco-red); border-radius: 0; }
.valrow { display: flex; justify-content: space-between; align-items: baseline; }
.valrow .sim-lab { margin: 0; }
.valrow .v { font-family: var(--font-display); font-weight: 400; font-size: 26px; color: var(--fg-1); font-variant-numeric: tabular-nums; }
.valrow .mm { font-size: 12px; color: var(--fg-4); font-variant-numeric: tabular-nums; }
.result { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 8px;
  padding: 22px 24px; background: var(--onyx); color: #fff; border-radius: 0; }
.result .lab { font-size: 13px; font-weight: 700; letter-spacing: .01em; color: var(--on-dark-2); }
.result .pm { font-family: var(--font-display); font-weight: 400; font-size: 34px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
/* Sobre onyx o vermelho de interface cai para 3,71:1; este passa. */
.result .pm .cur { margin-right: 4px; font-size: 18px; color: var(--red-on-dark); }
.result .sub { margin-top: 6px; font-size: 12px; color: var(--on-dark-3); }
/* Lado a lado, rótulo e "R$ 8.174,30" somam mais que o card estreito. Empilhado,
   o número usa a largura inteira e não força a coluna a crescer. */
@media (max-width: 420px) {
  .result { flex-direction: column; align-items: flex-start; gap: 12px; container-type: inline-size; }
  /* Medido a 360: "R$ 7.266,04" dá 229,6px em 34px contra 208px livres no bloco.
     14% da largura do bloco cabe de 320 a 420 e trava em 34px acima disso. */
  .result .pm { font-size: min(34px, 14cqi); }
}
.sim .fineprint { margin-top: 20px; font-size: 12px; line-height: 1.55; color: var(--fg-4); }
.sim .sub-hint { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-size: 13px; font-weight: 700;
  color: var(--monaco-red); text-decoration: underline; text-underline-offset: 3px; }
/* Botão do WhatsApp no card. No primeiro ajuste da pessoa ele vira "Continuar
   simulação com atendimento humanizado" e leva a simulação na mensagem. Os dois
   rótulos moram na MESMA célula de grid e trocam só por opacidade: a caixa mede
   o maior dos dois desde a carga, então nada pula quando o texto troca. */
.sim-cta { display: grid; place-items: center; width: 100%; min-height: 56px; padding: 0 16px; margin-top: 16px;
  background: var(--monaco-red); color: #fff; border-radius: 0; text-decoration: none;
  font-family: var(--font-body); font-weight: 500; font-size: 15px; line-height: 1.3;
  transition: background var(--dur-1) linear; }
.sim-cta:hover, .sim-cta:active { background: var(--monaco-red-deep); }
.sim-cta__lbl { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 12px;
  opacity: 0; transition: opacity .35s var(--ease-expo); }
.sim-cta__lbl.is-on { opacity: 1; }
.sim-cta svg { width: 20px; height: 20px; flex: 0 0 20px; }
/* Sem caber numa linha, quebra ANTES de "com", nunca no meio da frase. */
.sim-cta .l2 { display: inline-block; }
/* No celular o botão acompanha a pessoa pelo card inteiro: gruda na base da tela
   enquanto o card cruza a tela e pousa no lugar dele no fim. As 2 linhas ficam
   reservadas desde a carga, para a troca de rótulo não mudar a altura. É a
   única sombra do sistema: ali o botão flutua sobre o conteúdo.
   R4 A4: gruda 12px ACIMA da barra do pé. Entrando e saindo do card, o sticky o
   prende ao topo do card e ali ele cruzaria a barra: nesse trecho o app.js põe
   .sob-barra e ele some, para os dois nunca se sobreporem. */
@media (max-width: 760px) {
  .sim-cta { position: sticky; bottom: calc(var(--barra-livre) + 12px); z-index: 5; min-height: 64px; box-shadow: var(--sombra-sim); }
  .sim-cta.sob-barra { opacity: 0; pointer-events: none; }
  .sim-cta .l2 { display: block; }
}

/* =======================================================================
   CITAÇÃO (PSD Home - Citacao): card de fio reto 50/50, grade tênue atrás
   ======================================================================= */
.citacao { overflow: hidden; }
.cit-palco { position: relative; padding: clamp(24px, 2.8vw, 40px) 0; }
/* a grade sai da coluna e vai até as bordas da tela (a dobra recorta) */
.cit-palco__grade { left: -50vw; right: -50vw;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent);
          mask-image: radial-gradient(closest-side, #000 55%, transparent); }
.cit { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--white); border: 1px solid var(--fio); }
.cit__txt { display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 57px); }
.cit__q p { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 1.95vw + 12px, 40px);
  line-height: 1.11; letter-spacing: -.04em; color: var(--fg-1); }
.cit__q .l { display: block; }
/* "2018," num bloco que CONTÉM a caixa inteira da fonte: topo do Ê (0,94em, Termina 500)
   ao fundo do g (0,23em), mais folga de 0,12em nos quatro lados. line-height 0 põe a
   linha de base 0,375em abaixo do topo do conteúdo (meio de ascent 1,09 e descent 0,34),
   daí os paddings: 1,06 - 0,375 = 0,685 em cima; 0,35 + 0,375 = 0,725 embaixo.
   A linha cresce para conter o bloco, então ele não encosta na linha de baixo. */
.hl-box { display: inline-block; line-height: 0; padding: .685em .12em .725em;
  background: var(--monaco-red); color: var(--white); font-weight: 500; }
.cit__fio { display: block; width: 233px; max-width: 100%; height: 3px; margin-top: 14px; background: var(--monaco-red); }
.cit__ass { margin-top: 12px; font-family: var(--font-display); font-weight: 400; font-size: 14px; line-height: 20px;
  letter-spacing: .02em; color: var(--fg-3); text-wrap: balance; }
/* overflow: o recorte do zoom de hover (a foto cresce, o recorte não) */
.cit__foto { position: relative; min-height: 360px; overflow: hidden; }
.cit__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* =======================================================================
   SEGURANÇA EM DESTAQUE · selos em card de fio, linha de base travada.
   A mesma grade de três serve os valores da /sobre (card de fio com
   ladrilho no lugar do selo): subgrid trava ícone, título e texto por linha.
   ======================================================================= */
.selos, .valores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; gap: 0 24px; }
.selo-card, .valor-card { grid-row: span 3; display: grid; grid-template-rows: subgrid; }
.selo-card .selo, .valor-card .ladrilho { margin-bottom: 28px; }
.selo-card h3, .valor-card h3 { margin-bottom: 12px; }
.selo-card p, .valor-card p { font-size: 15px; }

/* =======================================================================
   BANDA DE CTA (Naka): frase à esquerda, dois botões à direita, grade tênue.
   Mesmo componente nas internas, sem rótulo acima do título (R6): h2, frase, botões.
   ======================================================================= */
.cta-band { overflow: hidden; }
/* a grade da arte em vermelho sobre onyx: na banda de CTA e nas dobras escuras que
   eram chapadas (/sobre história, /solucoes cartão e refinanciamento; as escuras da
   home e o simulador ficam lisos). Cada uso define a máscara, sempre bem difusa. */
.cta-band::before, .historia::before, .prod.escura::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, var(--grade-cor-escura) 1px, transparent 1px),
                    linear-gradient(to bottom, var(--grade-cor-escura) 1px, transparent 1px);
  background-size: var(--grade-passo) var(--grade-passo); }
.cta-band::before {
  -webkit-mask-image: radial-gradient(60% 100% at 82% 50%, #000 15%, transparent 80%);
          mask-image: radial-gradient(60% 100% at 82% 50%, #000 15%, transparent 80%); }
/* abaixo do conteúdo: a dobra isola a pilha e a grade vai para o fundo dela */
.historia, .prod.escura { isolation: isolate; }
/* os cantos do hover do marco esperam 33px fora da caixa (ENQUADRAR) e, a 390,
   viravam 9px de rolagem lateral. Corta só o eixo x: clip não cria contêiner de
   rolagem, então nada sticky morre. */
.historia { overflow-x: clip; }
.historia::before, .prod.escura::before { z-index: -1; }
/* história: atrás do título e do vídeo; cartão e refinanciamento: atrás da foto */
.historia::before {
  -webkit-mask-image: radial-gradient(70% 38% at 50% 22%, #000 10%, transparent 85%);
          mask-image: radial-gradient(70% 38% at 50% 22%, #000 10%, transparent 85%); }
.prod.escura::before {
  -webkit-mask-image: radial-gradient(48% 75% at 27% 50%, #000 10%, transparent 85%);
          mask-image: radial-gradient(48% 75% at 27% 50%, #000 10%, transparent 85%); }
.cta-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(32px, 5vw, 80px); align-items: end; }
.cta-inner > * { grid-column: 1; }
.cta-inner > p { margin-top: 18px; max-width: 52ch; font-size: var(--t-lead); }
/* botões empilhados na coluna da direita, ao lado do h2 e da frase: lado a lado eles
   comiam 484px e o título quebrava em 3 a 4 linhas; empilhados, a frase fica em duas */
.cta-inner > .hero-cta { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin: 0;
  flex-direction: column; align-items: stretch; }

/* =======================================================================
   RODAPÉ (escuro, sobre fio) + palavra-marca gigante tom sobre tom
   ======================================================================= */
.footer { position: relative; overflow: hidden; background: var(--onyx); color: var(--on-dark-3); }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 44px;
  padding-top: var(--dobra-y-curta); border-top: 1px solid var(--onyx-line); }
.foot-logo img { height: 28px; width: auto; }
.foot-about { margin-top: 24px; max-width: 38ch; font-size: 14px; line-height: 1.65; color: var(--on-dark-3); }
.foot-addr { margin-top: 14px; max-width: 38ch; font-style: normal; font-size: 14px; line-height: 1.65; color: var(--on-dark-3); }
.foot-addr a { display: flex; align-items: center; width: fit-content; min-height: 44px; color: var(--on-dark-2);
  text-decoration: underline; text-underline-offset: 3px; }
.foot-addr a:hover { color: var(--on-dark-1); }
.foot-social { display: flex; gap: 8px; margin-top: 8px; }
.foot-social a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--onyx-line);
  color: var(--on-dark-1); transition: border-color var(--dur-1) linear; }
.foot-social a:hover { border-color: var(--on-dark-1); }
.foot-social svg { width: 18px; height: 18px; stroke-width: 1.8; }
.footer h4 { margin-bottom: 12px; color: var(--on-dark-1); }
.footer ul { list-style: none; }
.footer li { margin-bottom: 2px; }
.footer li a { display: inline-flex; align-items: center; min-height: 36px; font-size: 14px; color: var(--on-dark-2); text-decoration: none; }
.footer li a:hover, .foot-credito a:hover { color: var(--on-dark-1); text-decoration: underline; text-underline-offset: 3px; }
.footer li small { display: block; margin-top: -4px; font-size: 12.5px; color: var(--on-dark-3); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px;
  margin-top: 56px; padding: 24px 0; border-top: 1px solid var(--onyx-line); font-size: 13px; color: var(--on-dark-3); }
/* crédito numa linha só em qualquer largura; o link tem a tinta da linha */
.foot-credito { white-space: nowrap; }
.foot-credito a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }   /* alvo de toque */
/* Palavra-marca: o corpo mora na CAIXA para a folga de cima ser em em. Com entrelinha
   de .78 o topo do circunflexo do Ô fica 0,175em acima da linha; .26em de folga
   põe o acento inteiro dentro da caixa. Só o eixo x recorta (o letreiro é mais largo
   que a tela); o corte de baixo, a palavra sentada no pé, é o overflow do .footer. */
.foot-palavra { overflow-x: clip; overflow-y: visible; padding-top: .26em; font-size: 9vw; line-height: .78;
  user-select: none; pointer-events: none; }
.foot-palavra span { display: block; width: max-content; margin: 0 auto; font-family: var(--font-display); font-weight: 400;
  letter-spacing: -.02em; color: var(--m-tom-escuro); white-space: nowrap; }
/* Até 1100 a barra do pé cobriria o crédito e a palavra: o rodapé ganha a faixa da
   barra e mais 24px embaixo. O corte da palavra sentada passa a ser da própria caixa
   (overflow: clip), senão a margem mostraria a parte que o rodapé cortava. A folga é
   margem da palavra, não padding do footer: padding de dobra entra na conta de ritmo. */
@media (max-width: 1100px) {
  .foot-palavra { overflow: clip; margin-bottom: calc(var(--barra-livre) + 24px); }
}

/* ---- voltar ao topo (reto; some no celular, onde cobria o "96x" do simulador) ---- */
.to-top { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: grid; place-items: center; width: 48px; height: 48px;
  border: 0; border-radius: 0; background: var(--monaco-red); color: #fff;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity var(--dur-2) var(--ease-expo), transform var(--dur-2) var(--ease-expo), visibility var(--dur-2) linear, background var(--dur-1) linear; }
.to-top.visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--monaco-red-deep); }
.to-top svg { width: 20px; height: 20px; stroke-width: 2; }
/* 760, não 700: até 760 o botão do WhatsApp do simulador gruda na base da tela,
   e entre 701 e 760 os dois se sobreporiam no canto direito. De 761 a 1100 ele
   divide o pé com a barra de vidro: mesmo centro vertical, e a barra tem no máximo
   287px no meio da tela, longe do canto dele. */
@media (max-width: 1100px) { .to-top { bottom: calc(var(--barra-b) + 2px); } }
@media (max-width: 760px) { .to-top { display: none; } }

/* =======================================================================
   RESPONSIVO (home e componentes novos)
   ======================================================================= */
@media (max-width: 980px) {
  .wrap { padding: 0 24px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__m { top: auto; bottom: -4%; right: -40%; width: 120vw; }
  .hero__fig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .hero__moldura { grid-column: 1 / -1; }
  /* no fluxo, sob a foto; relative (não static) para os cantos do hover terem caixa */
  .anota { position: relative; inset: auto; }
  .colchete { display: none; }
  .conv-grade__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .conv-grade__lista li { white-space: normal; }
  .conv-grade__lista li:last-child { grid-column: 1 / -1; }
  .sobre-bloco__grid { grid-template-columns: minmax(0, 1fr); }
  .sobre-bloco__m { width: min(320px, 70%); }
  .sobre-bloco__m path { stroke-width: 5; }
  .abas { grid-template-columns: minmax(0, 1fr); }
  .orbita { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .orbita__simbolo { order: -1; justify-self: center; width: 180px; margin-bottom: 32px; }
  .orbita__col + .orbita__col .orbita__item:first-child { border-top: 0; }
  .orbita__col:first-of-type .orbita__item:last-child { border-bottom: 0; }
  /* Coluna única com piso ZERO: `1fr` é minmax(auto, 1fr), e o número grande da
     parcela empurrava a coluna para 355 a 389px dentro de um card de 342. O
     overflow: clip cortava a borda direita, inclusive o botão do WhatsApp. */
  .sim-split { grid-template-columns: minmax(0, 1fr); }
  .sim-split > * { min-width: 0; }
  /* R6: sem o rótulo, o h2 abre rente ao padding e passa por baixo da marca-d'água
     (medido: cruzava a 360, 390, 430 e 900). Empilhado não sobra canto livre: ela sai. */
  .sim-pitch .mark-watermark { display: none; }
  .cit { grid-template-columns: minmax(0, 1fr); }
  .cit__foto { min-height: 0; aspect-ratio: 16 / 10; }
  .selos, .valores { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 16px; }
  .selo-card, .valor-card { grid-row: auto; display: block; }
  .cta-inner { grid-template-columns: minmax(0, 1fr); }
  .cta-inner > .hero-cta { grid-column: 1; grid-row: auto; margin-top: 32px; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .footer li a { min-height: 44px; }
}
@media (max-width: 560px) {
  .hero-cta .btn { flex: 1 1 100%; }
  .anota { padding: 12px 14px; }
  .anota__val { font-size: 26px; }
  .dados { grid-template-columns: minmax(0, 1fr); }
  .dado, .dado:nth-child(even) { padding: 28px 0; border-left: 0; }
  .sim, .sim-pitch { padding: 36px 24px; }
  .cit__txt { padding: 36px 24px; }
  /* A 360 "o braço direito do" (10,4em com -0,04em) precisa caber em 264px */
  .cit__q p { font-size: min(7vw, 28px); }
  .sim .fld > .valrow:first-child { flex-direction: column; align-items: flex-start; gap: 2px; }
  .valrow .v { font-size: 24px; }
  .foot-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* =======================================================================
   PÁGINAS INTERNAS (R2). Um papel, um componente: o herói interno É o .hero
   da home; cabeçalho de seção, card de fio com ladrilho, selo, grade de
   convênios, moldura, anotação em colchete e banda de CTA são os da home.
   Componente novo só onde a home não tem o papel: linha de produto, linha
   do tempo, passos, lista em fios, palco de públicos e formulário.
   Movimento: aqui mora só o estado FINAL (visível sem JS); os data-* são o
   contrato com o R3, e o estado inicial fica no motion.css dele.
   ======================================================================= */

/* ---- herói interno: microtexto de canto sobre fio, só com a trilha (R6: o rótulo
   à direita dela saiu, nenhum texto acima do título além da trilha) ---- */
.hero__micro { margin-bottom: clamp(32px, 4.4vw, 64px); }
.crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.2; letter-spacing: .005em;
  color: var(--fg-2); white-space: nowrap; }
/* a trilha é o único link do microtexto: alvo de toque de 44px */
.crumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg-2); text-decoration: none;
  transition: color var(--dur-1) linear; }
.crumb a:hover { color: var(--monaco-red); }
.crumb [aria-current] { color: var(--fg-1); }
/* visual sem foto (/convenios, /seguranca, /contato): o M em traço sobre a
   grade, na mesma moldura e na mesma proporção da foto. Nenhum texto. */
.hero__marca { position: relative; display: grid; place-items: center; aspect-ratio: 5 / 4; overflow: hidden;
  background: var(--white); }
.hero__marca .grade-fundo { -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent);
                                    mask-image: radial-gradient(closest-side, #000 35%, transparent); }
/* traço em unidade do viewBox, sem non-scaling-stroke (ver .sobre-bloco__m):
   4,4 dá 1,5px com o M a 325px (1440) */
.m-traco { position: relative; width: 62%; height: auto; overflow: visible; }
.m-traco path { fill: none; stroke: var(--fg-1); stroke-width: 4.4; }
.m-traco .apice { stroke: var(--monaco-red); }

/* ---- linha de produto (/solucoes) e texto + figura do mapa (/convenios) ----
   Mesma divisão do herói (1 : 1,04); na alternada a figura vai para a
   esquerda e leva a coluna maior junto. */
.prod-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: clamp(40px, 5.6vw, 88px);
  align-items: center; }
.prod.alt .prod-row { grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); }
.prod.alt .prod-fig { order: -1; }
.prod-txt h2 { margin-bottom: 20px; }
.prod-txt > p { max-width: 52ch; margin-bottom: 28px; font-size: var(--t-lead); line-height: 1.6; }
.prod-txt > p strong { font-weight: 700; color: var(--fg-1); }
.escura .prod-txt > p strong { color: var(--on-dark-1); }
/* benefícios em fios: a mesma régua de 1px que separa o resto do site */
.ticks { list-style: none; max-width: 52ch; margin-bottom: 32px; border-top: 1px solid var(--fio); }
.ticks li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--fio);
  font-size: 15px; line-height: 1.4; color: var(--fg-2); }
.ticks svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--monaco-red); stroke-width: 2; }
.escura .ticks, .escura .ticks li { border-color: var(--onyx-line); }
.escura .ticks li { color: var(--on-dark-2); }
.escura .ticks svg { color: var(--red-on-dark); }
.escura .colchete { border-color: var(--on-dark-1); }
.prod-fig { position: relative; margin: 0; }
.prod-fig img { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--r-foto); }
/* recorte por foto (R3): a anotação --esq --baixo ocupa o pé esquerdo da foto. Na
   portabilidade a foto encosta à esquerda (0%) e a mão solta do consultor fica fora da
   caixa a 1440 e 1200; no consignado 10% deixa as mãos do servidor livres até 1000px
   sem colar o rosto da consultora na borda direita (a 0% ele ficava a 17px dela). */
.prod-fig img.prod-foto--consignado { object-position: 10% 50%; }
.prod-fig img.prod-foto--portabilidade { object-position: 0% 50%; }

/* ---- mapa de atendimento (/convenios): texto + mapa em moldura ----
   Onyx = UF atendida no convênio escolhido, cinza = fora dele. Vermelho SÓ na UF
   sob o ponteiro ou o toque e no ponto da sede: 20 estados vermelhos seriam parede.
   Geometria em partials/mapa-uf.html (tools/gerar-mapa-uf.mjs); JS no app.js. */
/* Termina medida (R2): "Onde houver servidor," dá 620px a 48px e 605px a 46,8px.
   1.16fr dá 626px de coluna a 1440 e 611px a 1200: o título fica em 2 linhas sem
   <br> (text-wrap: balance escolhe a única divisão que cabe). No celular ele
   equilibra em 3 linhas sozinho, sem "servidor," ilhado. */
.atende .prod-row { grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr); }
.atende-seg { max-width: 400px; }
.atende-fig { margin: 0; }
.atende-moldura { padding: clamp(16px, 2vw, 28px); background: var(--white); }
.mapa { position: relative; max-width: 560px; margin: 0 auto; }
.mapa-uf { width: 100%; height: auto; overflow: visible; }
.mapa-uf path { fill: var(--onyx); stroke: #fff; stroke-width: .75px; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; cursor: pointer; transition: fill .35s var(--ease-expo); }
.mapa-uf path.is-off { fill: var(--fio); }
/* Onda (entrada e troca SIAPE/Governos): cada UF espera o atraso da sua distância à sede. */
.mapa-uf.is-onda path { transition: fill .5s var(--ease-expo) var(--d, 0ms); }
/* Armado e fora da tela: sem preenchimento. A volta é instantânea, ninguém a vê. */
.mapa-uf.is-armado:not(.is-in) path { fill: transparent; transition: none; }
.mapa-uf path.is-foco { fill: var(--monaco-red); transition: fill .15s var(--ease-expo); }
.mapa-uf .uf-alvo { fill: transparent; cursor: pointer; }
.mapa-uf .uf-sigla { font-family: var(--font-body); font-size: 11px; font-weight: 700; fill: #fff; pointer-events: none; }
.mapa-uf .mapa-sede { fill: var(--monaco-red); stroke: #fff; stroke-width: 2px; vector-effect: non-scaling-stroke; pointer-events: none; }
.mapa-rotulo { position: absolute; z-index: 2; transform: translate(-50%, calc(-100% - 10px)); pointer-events: none; white-space: nowrap;
  padding: 8px 11px; background: var(--white); color: var(--fg-1); border: 1px solid var(--fio);
  font-size: 13px; letter-spacing: .015em; line-height: 1; }
.mapa-legenda { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 13px; letter-spacing: .015em; color: var(--fg-2); }
.mapa-ponto { width: 10px; height: 10px; flex: 0 0 10px; border-radius: var(--r-circulo); background: var(--monaco-red); }
.atende-nota { margin-top: 14px; font-size: 15px; line-height: 1.5; }
/* o link é uma frase: inline-block com 11px de folga dá 44px de alvo por linha */
.atende-nota a { display: inline-block; padding: 11px 0; color: var(--fg-2); text-underline-offset: 3px; }
.atende-nota a:hover { color: var(--monaco-red); }
.atende-lista { list-style: none; display: grid; gap: 6px; margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--fg-4); }
/* a 1440 a lista dos governos quebrava deixando "e TO." sozinho na segunda linha */
.atende-lista li { text-wrap: balance; }

/* ---- palco de públicos (/convenios): palco do ícone em moldura + lista em
   fio. A troca é do app.js (.is-active por hover e foco); sem JS fica o 1º. ---- */
.publicos { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(24px, 3.4vw, 56px);
  align-items: stretch; }
/* sem overflow: hidden: ele cortava as marcas de canto da moldura (inset -1px) */
.pub-stage { display: grid; place-content: center; justify-items: center; gap: 26px; min-height: 420px; padding: 44px;
  background: var(--white); }
.pub-stage .grade-fundo { -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent);
                                  mask-image: radial-gradient(closest-side, #000 30%, transparent); }
.pub-visual { position: relative; width: 150px; height: 150px; }
.pub-ico { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.9) translateY(10px);
  transition: opacity .35s var(--ease-expo), transform .35s var(--ease-expo); }
.pub-ico.is-active { opacity: 1; transform: none; }
.pub-ico svg { width: 116px; height: 116px; color: var(--monaco-red); stroke-width: 1.2; }
/* Nomes empilhados em grid, não em absolute com left:0: o absolute deixava o
   .pub-caption com largura zero e os nomes escapavam para a direita do palco.
   As tags (estados, forças) moram DENTRO do nome, sob ele (R3 A2): na lista elas
   abriam no item ativo e empurravam a dobra de baixo. Aqui a célula empilhada já
   mede o nome mais alto (com tags) desde a carga, então trocar de público não
   muda altura nenhuma. Topo alinhado: o nome fica sempre na mesma linha. */
.pub-caption { position: relative; display: grid; justify-items: center; align-items: start; text-align: center; }
.pub-name { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: 12px;
  white-space: nowrap; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(22px, 1.1vw + 13px, 30px); line-height: 1.2; letter-spacing: -.02em; color: var(--fg-1);
  opacity: 0; transform: translateY(10px); transition: opacity .35s var(--ease-expo), transform .35s var(--ease-expo); }
.pub-name.is-active { opacity: 1; transform: none; }
.pub-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.pub-tags span { padding: 5px 10px; font-family: var(--font-body); font-size: 12px; font-weight: 500; line-height: 1.2;
  letter-spacing: .015em; color: var(--fg-2); background: var(--white); border: 1px solid var(--fio); }
.pub-list { list-style: none; border-top: 1px solid var(--fio); }
.pub-list > li { border-bottom: 1px solid var(--fio); }
.pub-item { display: flex; align-items: center; gap: 20px; width: 100%; padding: 20px 0; background: none; border: 0;
  text-align: left; color: inherit; cursor: pointer; }
.pub-item .ladrilho { transition: background .2s var(--ease-expo), color .2s var(--ease-expo); }
.pub-item-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pub-item-txt strong { font-family: var(--font-display); font-weight: 400; font-size: var(--t-card); line-height: 1.3;
  letter-spacing: -.01em; color: var(--fg-1); }
.pub-item-txt small { font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.pub-item-arrow { flex: 0 0 18px; width: 18px; height: 18px; margin-left: auto; color: var(--monaco-red);
  opacity: 0; transform: translateX(-8px); transition: opacity .22s var(--ease-expo), transform .22s var(--ease-expo); }
.pub-item.is-active .ladrilho { background: var(--monaco-red); color: #fff; }
.pub-item.is-active .pub-item-arrow { opacity: 1; transform: none; }

/* ---- linha do tempo (/sobre): favorito Timeline (Aceternity) ----
   Ano sticky à esquerda, com o ponto em cima do trilho. O trilho leva
   data-beam; o feixe é o ::after dele e cresce por scaleY(var(--p, 1)):
   o app.js (R3) escreve --p de 0 a 1 pela rolagem; sem JS, inteiro. */
.linha-tempo { position: relative; max-width: 940px; margin: clamp(56px, 6vw, 96px) auto 0; }
.linha-tempo__trilho { position: absolute; left: 8px; top: 0; bottom: 0; width: 1px; background: var(--fio);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 88%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 88%, transparent); }
.linha-tempo__trilho::after { content: ""; position: absolute; top: 0; bottom: 0; left: -.5px; width: 2px;
  background: var(--monaco-red); transform: scaleY(var(--p, 1)); transform-origin: top center; }
.linha-tempo__lista { list-style: none; }
.marco { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); column-gap: 40px;
  padding: 0 0 clamp(64px, 7vw, 112px) 48px; }
.marco:last-child { padding-bottom: 0; }
.marco__ano { position: sticky; top: calc(var(--nav-h) + 40px); align-self: start;
  font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 1.4vw + 20px, 44px); line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--fg-1); }
/* o ponto anda com o ano, centrado no trilho (x = 8,5) */
.marco__ano::before { content: ""; position: absolute; left: -48px; top: .5em; width: 17px; height: 17px; margin-top: -8.5px;
  border: 1px solid var(--fio); border-radius: var(--r-circulo);
  background: radial-gradient(circle, var(--monaco-red) 0 3px, var(--papel) 3.5px); }
.marco__corpo h3 { margin-bottom: 8px; }
.marco__corpo p { max-width: 52ch; font-size: 15px; }
.escura .linha-tempo__trilho { background: var(--onyx-line); }
.escura .linha-tempo__trilho::after { background: var(--red-on-dark); }
.escura .marco__ano { color: var(--on-dark-1); }
.escura .marco__ano::before { border-color: var(--onyx-line);
  background: radial-gradient(circle, var(--red-on-dark) 0 3px, var(--onyx) 3.5px); }

/* ---- vídeo de apresentação (/sobre): na moldura; a lógica é do app.js ---- */
  border-radius: var(--r-foto); background: var(--onyx-2); }
  border: 0; border-radius: var(--r-circulo); background: var(--monaco-red); color: #fff;
  transition: transform var(--dur-2) var(--ease-expo), background var(--dur-1) linear; }
/* Sobre foto nenhuma tinta fixa passa em contraste: a legenda e o aviso
   "Vídeo em breve" ganham superfície sólida (nada de opacidade). */
  font-size: 13px; letter-spacing: .015em; color: #fff; background: var(--onyx-2); }

/* ---- passos (/solucoes): favorito How It Works ----
   O palco (data-steps) segura o cabeçalho e os quatro passos (data-step),
   ligados por um fio que passa pelo centro dos nós. O fio cheio é o ::after
   e cresce por scaleX(var(--p, 1)). A pista só ganha altura, e o palco só
   gruda, com JS, movimento e tela larga; sem isso é uma dobra comum, sem
   percurso vazio. Estados vêm do app.js do R3: .is-ativo = o passo da vez,
   .is-feito = os de antes; os que ainda não chegaram ficam em cinza AA
   (cor, nunca opacidade). Sem sticky o app.js acende tudo. */
.passos { position: relative; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.passos::before, .passos::after { content: ""; position: absolute; top: 21.5px; height: 1px;
  left: calc((100% - 96px) / 8); right: calc((100% - 96px) / 8); background: var(--fio); }
.passos::after { top: 21px; height: 2px; background: var(--monaco-red); transform: scaleX(var(--p, 1)); transform-origin: left center; }
.passo { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.passo__no { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 28px;
  border: 1px solid var(--fg-1); border-radius: var(--r-circulo); background: var(--papel);
  font-family: var(--font-display); font-size: 14px; line-height: 1; color: var(--fg-1); font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-2) var(--ease-expo), background var(--dur-2) var(--ease-expo), color var(--dur-2) var(--ease-expo); }
/* -8px de cada lado, dentro do vão de 32px: a 1200 a coluna tem 256px e "Envie os
   documentos" 261, e sem isso "documentos" caía sozinho (o texto é centrado; em
   coluna única o margin do bloco de 980px zera isto) */
.passo h3 { margin-bottom: 10px; margin-inline: -8px; transition: color var(--dur-2) var(--ease-expo); }
.passo p { max-width: 28ch; font-size: 15px; transition: color var(--dur-2) var(--ease-expo); }
/* o passo da vez: nó vermelho cheio. No estado final (tudo aceso) só o último
   fica assim, porque os anteriores levam .is-feito junto. */
.passo.is-ativo:not(.is-feito) .passo__no { border-color: var(--monaco-red); background: var(--monaco-red); color: #fff; }
html.js .passo[data-step]:not(.is-ativo):not(.is-feito) .passo__no { border-color: var(--fio); color: var(--fg-3); }
html.js .passo[data-step]:not(.is-ativo):not(.is-feito) h3,
html.js .passo[data-step]:not(.is-ativo):not(.is-feito) p { color: var(--fg-3); }
/* movimento reduzido: o app.js marca todos só com .is-ativo; o nó fica no traço */
@media (prefers-reduced-motion: reduce) {
  .passo.is-ativo:not(.is-feito) .passo__no { border-color: var(--fg-1); background: var(--papel); color: var(--fg-1); }
}
@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  html.js .passos-pista { height: calc(100svh - var(--nav-h) + 120svh); }
  html.js .passos-palco { position: sticky; top: var(--nav-h); display: grid; align-content: center;
    min-height: calc(100svh - var(--nav-h)); }
}

/* ---- lista em fios (/seguranca compromissos, /contato canais) ----
   Linhas separadas por fio, ladrilho à esquerda. --larga abre título e texto
   lado a lado; --compacta é a lista de canais, onde a linha inteira é o link. */
.lista-fios { list-style: none; border-top: 1px solid var(--fio); }
.lista-fios > li { border-bottom: 1px solid var(--fio); }
.lista-fios__item { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 24px; align-items: start; padding: 28px 0; }
/* primeira linha do título no centro do ladrilho: (48 - 26) / 2 */
.lista-fios__txt h3 { margin-top: 11px; }
.lista-fios__txt p { max-width: 58ch; margin-top: 8px; font-size: 15px; }
.lista-fios--larga .lista-fios__txt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 48px; align-items: start; }
.lista-fios--larga .lista-fios__txt p { margin-top: 13px; }
.lista-fios--compacta .lista-fios__item { column-gap: 16px; align-items: center; padding: 16px 0; color: inherit; text-decoration: none; }
.lista-fios--compacta strong { display: block; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--fg-1);
  overflow-wrap: anywhere; transition: color var(--dur-1) linear; }
.lista-fios--compacta small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--fg-2); }
a.lista-fios__item .ladrilho { transition: background var(--dur-1) linear, color var(--dur-1) linear; }
a.lista-fios__item:hover strong { color: var(--monaco-red); }
a.lista-fios__item:hover .ladrilho, a.lista-fios__item:focus-visible .ladrilho { background: var(--monaco-red); color: #fff; }

/* ---- contato: formulário em card de fio + canais em lista de fios ---- */
.contato-grade { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(32px, 4.4vw, 64px); align-items: start; }
.form-contato h2, .contato-canais h2 { font-size: var(--t-card); line-height: 1.3; letter-spacing: -.01em; }
.form-contato h2 { margin-bottom: 28px; }
.contato-canais h2 { margin-bottom: 16px; }
/* lado a lado, o título dos canais desce até a linha do título do formulário
   (o do formulário mora dentro do card: padding + fio) */
.contato-canais { padding-top: calc(clamp(28px, 2.6vw, 40px) + 1px); }
.form-linha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.campo-bloco { margin-bottom: 20px; }
.campo-bloco label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: .01em;
  color: var(--fg-2); transition: color var(--dur-1) linear; }
/* Campo reto na altura do botão. Borda em --fg-3 (4,8:1 no branco): o limite
   de um controle precisa de 3:1 (WCAG 1.4.11), e o fio de 1,3:1 some. */
.campo { display: block; width: 100%; min-height: var(--btn-h); padding: 0 16px; background: var(--white);
  border: 1px solid var(--fg-3); border-radius: 0; color: var(--fg-1);
  font-family: var(--font-body); font-size: 16px; line-height: 1.4; -webkit-appearance: none; appearance: none;
  transition: border-color var(--dur-1) linear; }
.campo::placeholder { color: var(--fg-3); opacity: 1; }
.campo:hover { border-color: var(--fg-1); }
.campo:focus-visible { border-color: var(--fg-1); outline: 2px solid var(--monaco-red); outline-offset: 2px; }
textarea.campo { min-height: 132px; padding: 14px 16px; line-height: 1.5; resize: vertical; }
select.campo { padding-right: 44px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-1) 50%), linear-gradient(135deg, var(--fg-1) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
/* erro por cor (campo e rótulo) e por texto (a mensagem nativa do navegador,
   que o required dispara no envio); :user-invalid só acende depois do uso */
.campo:user-invalid { border-color: var(--monaco-red); }
.campo-bloco:has(.campo:user-invalid) label { color: var(--monaco-red); }
.form-contato .btn { width: 100%; margin-top: 8px; }
.form-contato .fineprint { margin-top: 16px; font-size: 12px; line-height: 1.5; color: var(--fg-4); }

/* ===== responsivo (internas) ===== */
@media (max-width: 980px) {
  .prod-row, .prod.alt .prod-row, .atende .prod-row { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .prod.alt .prod-fig { order: 0; }
  .prod-fig { display: grid; gap: 12px; }
  .hero__marca { aspect-ratio: 16 / 10; }
  .m-traco { width: min(62%, 300px); }
  .m-traco path { stroke-width: 6.5; }
  .publicos { grid-template-columns: minmax(0, 1fr); }
  /* 32 + 110 + 20 + legenda com tags em duas linhas (97) + 32 = 291: as tags
     cabem e o palco segue com os 300px de antes */
  .pub-stage { min-height: 300px; padding: 32px; gap: 20px; }
  .pub-visual { width: 110px; height: 110px; }
  .pub-ico svg { width: 88px; height: 88px; }
  .contato-grade { grid-template-columns: minmax(0, 1fr); }
  .contato-canais { padding-top: 0; }
  .lista-fios--larga .lista-fios__txt { grid-template-columns: minmax(0, 1fr); }
  .lista-fios--larga .lista-fios__txt p { margin-top: 8px; }
  /* passos em coluna: nó à esquerda, e o fio vira segmento entre um nó e o
     próximo, vermelho quando o passo de cima já foi feito */
  .passos { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .passos::before, .passos::after { display: none; }
  .passo { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 20px; align-items: start;
    padding-bottom: 32px; text-align: left; }
  .passo:last-child { padding-bottom: 0; }
  .passo:not(:last-child)::before, .passo:not(:last-child)::after { content: ""; position: absolute; top: 44px; bottom: 0;
    left: 21.5px; width: 1px; background: var(--fio); }
  .passo:not(:last-child)::after { left: 21px; width: 2px; background: var(--monaco-red);
    transform: scaleY(0); transform-origin: top center; transition: transform var(--dur-3) var(--ease-expo); }
  .passo.is-feito::after { transform: scaleY(1); }
  .passo__no { grid-row: 1 / span 2; margin: 0; }
  .passo h3 { grid-column: 2; margin: 9px 0 6px; }
  .passo p { grid-column: 2; max-width: none; }
}
@media (max-width: 760px) {
  .marco { grid-template-columns: minmax(0, 1fr); row-gap: 12px; padding-left: 40px; }
  .marco__ano { position: relative; top: auto; }
  .marco__ano::before { left: -40px; }
}
@media (max-width: 560px) {
  .form-linha { grid-template-columns: minmax(0, 1fr); }
  .lista-fios__item { column-gap: 16px; padding: 24px 0; }
}
/* Lista larga no celular estreito: ladrilho em cima e texto na largura toda. Ao lado
   dele, a 390, o título tinha 278px e "Sem urgência agressiva" mede 288. */
@media (max-width: 420px) {
  .lista-fios--larga .lista-fios__item { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .lista-fios--larga .lista-fios__txt h3 { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pub-ico, .pub-name, .pub-item .ladrilho, .pub-item-arrow { transition: none; }
  .mapa-uf path, .mapa-uf path.is-foco { transition: none; }
}

/* =======================================================================
   ENQUADRAR (R3 A2) · hover em tudo que não é texto, numa linguagem só.
   Reta, sem sombra, sem raio novo; hover só com transform, opacity, cor e
   clip (nenhuma caixa muda, nenhum vizinho anda). 0,42 s em --ease-expo.
   Referências do 21st: Dot Border Button (cantos que se desenham) e Motion
   Button (colchetes que fecham). O mesmo papel, o mesmo comportamento:
   - card, célula, item de lista, marco, passo, selo, anotação: o fio de 1px
     escurece (onyx no claro, --on-dark-2 no escuro), as marcas de canto em L
     (a geometria da .moldura) entram pelos cantos, e o ícone do card
     (.ladrilho, .selo) enche de vermelho com ícone branco e sobe 2px;
   - foto em moldura: zoom de 1,03 DENTRO do recorte e os cantos da moldura
     fecham sobre a foto.
   O fio escuro é um ::after por cima do fio claro, trocado por opacidade: o
   transition do reveal (motion.css) mora no próprio card e apagaria um
   border-color animado ali. Os cantos são o ::before.
   Toque (hover: none): nada depende de hover. Os cantos se desenham na
   chegada e ficam, junto com o reveal (.is-in); onde o reveal não chega
   (lista da /seguranca, nós dos passos, resultado do simulador), a rolagem
   desenha (view()). :active é o retorno do toque; o ícone não fica vermelho.
   Movimento reduzido: só a cor do fio.
   ======================================================================= */
.card-fio, .card-escuro, .result, .brand, li.lista-fios__item, .ticks li, .orbita__item, .dado,
.conv-grade__lista li, .marco__corpo, .passo__no, .avatars span { position: relative; }
/* o marco enquadra só o texto: a caixa encolhe até ele (a quebra não muda) */
.marco__corpo { justify-self: start; }

/* cantos: fora e apagados em repouso; --iy/--ix é onde pousam */
:where(.card-fio, .card-escuro, .anota, .cit, .result, .brand, li.lista-fios__item, .ticks li, .orbita__item,
       .dado, .conv-grade__lista li, .marco__corpo, .passo__no)::before {
  --c: var(--onyx); --l: 14px; --t: 1.5px; --iy: -1px; --ix: -1px;
  z-index: 2; opacity: 0; inset: calc(var(--iy) - 17px) calc(var(--ix) - 17px);
  transition: inset var(--dur-2) var(--ease-expo), opacity var(--dur-2) var(--ease-expo);
}
:where(.card-escuro, .orbita__item, .escura .ticks li, .escura .marco__corpo)::before { --c: var(--on-dark-1); }
/* caixa cheia (resultado) pousa a 6px, como o colchete do botão; logo e nó são
   pequenos; o marco respira em volta do texto */
:where(.result)::before { --iy: -6px; --ix: -6px; }
:where(.brand)::before { --l: 10px; --ix: -10px; }
:where(.passo__no)::before { --l: 10px; --iy: -8px; --ix: -8px; }
:where(.marco__corpo)::before { --iy: -16px; --ix: -16px; }

/* fio escuro por cima do fio claro (em linha de lista, só o de cima e o de baixo;
   o de cima é o do vizinho, que o -1px alcança) */
:where(.card-fio, .card-escuro, .anota, .cit, .moldura, .conv-grade__lista li, li.lista-fios__item, .ticks li,
       .orbita__item, .dado)::after {
  content: ""; position: absolute; z-index: 1; inset: -1px; pointer-events: none;
  border: 1px solid var(--onyx); opacity: 0; transition: opacity var(--dur-2) var(--ease-expo);
}
:where(li.lista-fios__item, .ticks li, .orbita__item, .dado)::after { inset: -1px 0; border-inline: 0; }
:where(.card-escuro, .orbita__item, .escura .ticks li, .escura .moldura)::after { border-color: var(--on-dark-2); }

/* o que muda em peças que não são o ::before/::after */
.ladrilho, .selo { transition: background-color var(--dur-2) var(--ease-expo), color var(--dur-2) var(--ease-expo),
  border-color var(--dur-2) var(--ease-expo), translate var(--dur-2) var(--ease-expo); }
.selo::after, .marco__ano::before { transition: border-color var(--dur-2) var(--ease-expo); }
.avatars span { transition: border-color var(--dur-2) var(--ease-expo); }
.range::-webkit-slider-runnable-track { transition: background-color var(--dur-2) var(--ease-expo); }
.range::-webkit-slider-thumb { transition: outline-offset var(--dur-2) var(--ease-expo); }
.range::-moz-range-thumb { transition: outline-offset var(--dur-2) var(--ease-expo); }
/* foto: zoom de 1,03 dentro do recorte. Onde a foto tem a folga da moldura (12px) o
   recorte é um clip-path na própria foto, recuado na proporção do zoom: (1 - 1/1,03)/2
   = 1,4563% por lado, raio 10/1,03. Em repouso o mesmo clip, sem recuo, para o
   recuo interpolar. Na cit e no vídeo o pai já recorta. */
.hero__img, .prod-fig img, .aba__painel img { clip-path: inset(0 round var(--r-foto));
  transition: scale var(--dur-2) var(--ease-expo), clip-path var(--dur-2) var(--ease-expo); }
.cit__foto img, .avatars img, .m-traco { transition: scale var(--dur-2) var(--ease-expo); }
/* a foto do herói tem data-focus: o motion.css põe a transição do foco nela (e o
   atraso da coreografia); aqui ela ganha o zoom junto, sem atraso no hover */
html.js .hero__img[data-focus] { transition: filter 1.5s var(--ease-expo), transform 1.8s var(--ease-expo),
  scale var(--dur-2) var(--ease-expo), clip-path var(--dur-2) var(--ease-expo); }
html.js .hero__img[data-focus].is-in { transition-delay: var(--d, 0ms), var(--d, 0ms), 0s, 0s; }

/* ---- ponteiro: o fio escurece (vale também no movimento reduzido) ---- */
@media (hover: hover) {
  :where(.card-fio, .card-escuro, .anota, .cit, .moldura, .conv-grade__lista li, li.lista-fios__item, .ticks li,
         .orbita__item, .dado):hover::after { opacity: 1; }
  .selo-card:hover .selo, .avatars span:hover, .marco:hover .marco__ano::before { border-color: var(--onyx); }
  /* o avatar vem para a frente: o anel escuro inteiro, sem o vizinho por cima */
  .avatars span:hover { z-index: 1; }
  .escura .marco:hover .marco__ano::before { border-color: var(--on-dark-2); }
  .passo:hover .passo__no,
  html.js .passo[data-step]:hover:not(.is-ativo):not(.is-feito) .passo__no { border-color: var(--fg-1); }
  .range:hover::-webkit-slider-runnable-track { background-color: var(--onyx); }
  .range:hover::-moz-range-track { background-color: var(--onyx); }
}
/* ---- ponteiro: cantos, ícone, zoom (fora do movimento reduzido) ---- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :where(.card-fio, .card-escuro, .anota, .cit, .result, .brand, li.lista-fios__item, .ticks li, .orbita__item,
         .dado, .conv-grade__lista li):hover::before,
  .marco:hover .marco__corpo::before, .passo:hover .passo__no::before { inset: var(--iy) var(--ix); opacity: 1; }
  /* a moldura já tem os cantos: eles fecham sobre a foto. O seletor com data-draw
     vence o estado final do reveal; o hover vai sem o atraso da coreografia. */
  .moldura:hover::before, html.js .moldura[data-draw].is-in:hover::before { inset: 5px;
    transition: inset var(--dur-2) var(--ease-expo), opacity .3s linear; }
  :is(.valor-card, li.lista-fios__item, .sim .top):hover .ladrilho,
  .selo-card:hover .selo { background-color: var(--monaco-red); color: #fff; translate: 0 -2px; }
  .selo-card:hover .selo { border-color: var(--monaco-red); }
  .selo-card:hover .selo::after { border-color: #fff; }
  :is(.hero__moldura, .prod-fig .moldura, .aba__painel):hover img {
    scale: 1.03; clip-path: inset(1.4563% round calc(var(--r-foto) / 1.03)); }
  .cit:hover .cit__foto img, .avatars span:hover img,
  .hero__moldura:hover .m-traco { scale: 1.03; }
  .range:hover::-webkit-slider-thumb { outline-offset: 3px; }
  .range:hover::-moz-range-thumb { outline-offset: 3px; }
}
/* ---- toque: :active é o retorno; nada fica aceso ---- */
@media (hover: none) {
  :where(.card-fio, .card-escuro, .anota, .cit, .moldura, .conv-grade__lista li, li.lista-fios__item, .ticks li,
         .orbita__item, .dado):active::after { opacity: 1; }
  .range:active::-webkit-slider-runnable-track { background-color: var(--onyx); }
  .range:active::-moz-range-track { background-color: var(--onyx); }
}
/* ---- toque: os cantos se desenham na chegada e ficam (como a moldura) ---- */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  :where(.card-fio, .card-escuro, .anota, .cit, .ticks li, .orbita__item, .dado, .conv-grade__lista li).is-in::before,
  .marco.is-in .marco__corpo::before { inset: var(--iy) var(--ix); opacity: 1; transition-delay: var(--d, 0ms); }
  .brand:active::before { inset: var(--iy) var(--ix); opacity: 1; }
  .range:active::-webkit-slider-thumb { outline-offset: 3px; }
  .range:active::-moz-range-thumb { outline-offset: 3px; }
  /* sem reveal por item: a rolagem desenha (e, sem view(), eles já nascem desenhados) */
  @supports (animation-timeline: view()) {
    :where(li.lista-fios__item, .passo__no, .result) { view-timeline: --chega block; }
    :where(li.lista-fios__item, .passo__no, .result)::before { animation: canto-chega linear both;
      animation-timeline: --chega; animation-range: entry 0% entry 100%; }
  }
  @supports not (animation-timeline: view()) {
    :where(li.lista-fios__item, .passo__no, .result)::before { inset: var(--iy) var(--ix); opacity: 1; }
  }
}
@keyframes canto-chega { to { inset: var(--iy) var(--ix); opacity: 1; } }

/* =======================================================================
   MOVIMENTO REDUZIDO · tudo desligado (o JS do R3 também respeita)
   ======================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0s !important; transition-delay: 0s !important;
    animation-duration: 0s !important; animation-iteration-count: 1 !important;
  }
  .btn:active { transform: none; }
}