/* app.css — site Ricardo Muza · MZ Press
 *
 * NENHUM VALOR DE MARCA NASCE AQUI. Cor, tipo, espaço, raio e tempo vêm de
 * design-system/tokens/tokens.css (vendorizado do repositório
 * potenzia-digital/ricardo-muza-design-system). Falta um valor? Falta um token.
 *
 * REGRAS DA MARCA QUE ESTE ARQUIVO HONRA
 *  - raio 0 em tudo; sem sombra para separar plano (borda de 1px separa)
 *  - o vermelho ocupa no máximo 5% da peça: fio, rubrica, diagonal, botão primário
 *  - vermelho-500 sobre escuro é FORMA, nunca texto (texto sobre tinta: vermelho-400;
 *    sobre superfície escura: vermelho-300)
 *  - Archivo Black só em logotipo e número de grande destaque
 *  - fotografia em preto e branco de alto contraste
 *  - movimento: durations e easings dos tokens; tudo respeita prefers-reduced-motion
 *
 * SUPERFÍCIE SE COMPÕE, NÃO SE ENUMERA. Cada faixa declara as suas variáveis de
 * superfície (--s-*) e todo componente lê delas. Assim um cartão, um botão ou um
 * rótulo ficam legíveis em qualquer faixa sem listar seletor por seletor.
 */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  font-family: var(--mz-font-serif);
  font-size: var(--mz-text-base);
  line-height: var(--mz-leading-relaxed);
  color: var(--s-text);
  background: var(--s-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { max-width: 100%; }

/* ── superfícies ─────────────────────────────────────────────────────────── */

:root, .faixa--papel {
  --s-bg:        var(--mz-bg);
  --s-bg-alt:    var(--mz-bg-alt);
  --s-surface:   var(--mz-surface);
  --s-surface-2: var(--mz-surface-hover);
  --s-text:      var(--mz-text);
  --s-body:      var(--mz-text-body);
  --s-muted:     var(--mz-text-muted);
  --s-line:      var(--mz-border);
  --s-line-2:    var(--mz-border-strong);
  --s-accent:    var(--mz-accent);           /* texto/controle de acento */
  --s-accent-on-surface: var(--mz-accent);
  --s-textura:   var(--mz-tinta);
}

.faixa--alt {
  --s-bg:        var(--mz-bg-alt);
  --s-surface:   var(--mz-surface);
  --s-surface-2: var(--mz-neutro-25);
  --s-line:      var(--mz-neutro-200);
  --s-line-2:    var(--mz-neutro-300);
}

.faixa--escura {
  --s-bg:        var(--faixa-escura-bg);
  --s-bg-alt:    var(--mz-neutro-900);
  --s-surface:   var(--mz-tinta-superficie);
  --s-surface-2: var(--mz-neutro-700);
  --s-text:      var(--mz-branco);
  --s-body:      var(--mz-sobre-tinta);
  --s-muted:     var(--mz-cinza-claro);
  --s-line:      var(--mz-tinta-linha);
  --s-line-2:    var(--mz-neutro-600);
  --s-accent:    var(--mz-vermelho-claro);   /* 4,57 sobre tinta */
  --s-accent-on-surface: var(--mz-vermelho-300); /* 6,40 sobre superfície escura */
  --s-textura:   var(--mz-papel);
  color: var(--s-text);
  background: var(--s-bg);
}

/* O fundo das faixas escuras é uma variável, e não o token direto, porque a variante clara (fim do
   arquivo) troca este valor — inclusive na cunha dos cortes, que o lê pelo --corte-bg. */
:root { --faixa-escura-bg: var(--mz-tinta); }

/* Bloco suspenso (livros, D11) fica no HTML com hidden; nenhuma regra de display pode reabri-lo. */
[hidden] { display: none !important; }

:root { --sec-y: var(--mz-space-8); --sec-y-amplo: var(--mz-space-9); --cabeca-y: var(--mz-space-7); }
.faixa { position: relative; padding: var(--sec-y) var(--mz-space-4); background: var(--s-bg); color: var(--s-text); }
.faixa--curta { padding-top: var(--mz-space-6); padding-bottom: var(--mz-space-6); }
.faixa--ampla { padding-top: var(--sec-y-amplo); padding-bottom: var(--sec-y-amplo); }

.dentro { max-width: var(--mz-container); margin: 0 auto; }
.dentro--larga { max-width: var(--mz-container-wide); margin: 0 auto; }
/* Contêineres que carregam o próprio respiro lateral: somam o respiro à largura para alinhar com o conteúdo das faixas. */
.topo__barra, .topo__util-dentro, .painel__dentro { max-width: calc(var(--mz-container-wide) + 2 * var(--mz-space-4)); margin-left: auto; margin-right: auto; }
.estreito { max-width: var(--mz-container-prose); }

/* Textura diagonal da marca: opacidade máxima 0,14, sempre sob o conteúdo. */
.textura::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("design-system/ilustracoes/diagonal-textura.svg");
  background-size: 64px 64px;
  color: var(--s-textura);
  opacity: 0.35; /* o SVG já vem a 0,14 → efetivo ≈ 0,05 */
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}
.faixa > * { position: relative; }

/* ── tipografia ──────────────────────────────────────────────────────────── */

.rubrica {
  font-family: var(--mz-font-sans);
  font-weight: var(--mz-weight-semibold);
  font-size: var(--mz-text-xs);
  letter-spacing: var(--mz-tracking-widest);
  text-transform: uppercase;
  color: var(--s-accent);
  margin: 0 0 var(--mz-space-3);
  display: flex; align-items: center; gap: var(--mz-space-3);
}
.rubrica::before {
  content: ""; width: var(--mz-space-4); height: var(--mz-border-fio);
  background: var(--mz-marca-acento); flex: none;
}
.rubrica--solta::before { display: none; }
.rubrica--dupla { flex-direction: column; align-items: flex-start; gap: var(--mz-space-1); }
.rubrica--dupla::before { display: none; }
/* Os estratos do designer (três traços de larguras diferentes, 100/62/86%) sob a vinheta, no lugar
   do risco único (mentoria de 08/10). Medidas do manual da marca: 40px de largura, traços de 3px. */
.rubrica--dupla::after {
  content: ""; width: 40px; height: 15px; margin-top: var(--mz-space-2);
  background:
    linear-gradient(var(--mz-marca-acento), var(--mz-marca-acento)) 0 0 / 100% 3px no-repeat,
    linear-gradient(var(--mz-marca-acento), var(--mz-marca-acento)) 0 6px / 62% 3px no-repeat,
    linear-gradient(var(--mz-marca-acento), var(--mz-marca-acento)) 0 12px / 86% 3px no-repeat;
}
.rubrica--dupla span:nth-child(2) { color: var(--s-muted); letter-spacing: var(--mz-tracking-wider); }

h1, h2, h3, h4 {
  font-family: var(--mz-font-sans);
  font-weight: var(--mz-weight-bold);
  letter-spacing: var(--mz-tracking-tight);
  line-height: var(--mz-leading-tight);
  text-wrap: balance;
  margin: 0 0 var(--mz-space-4);
  color: var(--s-text);
}
h1 { font-size: var(--mz-text-4xl); letter-spacing: var(--mz-tracking-tighter); }
h2 { font-size: var(--mz-text-3xl); }
h3 { font-size: var(--mz-text-xl); font-weight: var(--mz-weight-semibold); letter-spacing: var(--mz-tracking-normal); line-height: var(--mz-leading-snug); }
h4 { font-size: var(--mz-text-lg); font-weight: var(--mz-weight-semibold); letter-spacing: var(--mz-tracking-normal); margin-bottom: var(--mz-space-2); }

p { margin: 0 0 var(--mz-space-4); max-width: 68ch; color: var(--s-body); }
p:last-child { margin-bottom: 0; }
strong { color: var(--s-text); }

.lead { font-size: var(--mz-text-lg); line-height: var(--mz-leading-snug); max-width: 58ch; }
.miudo { font-family: var(--mz-font-sans); font-size: var(--mz-text-sm); color: var(--s-muted); line-height: var(--mz-leading-normal); }
.destaque { color: var(--s-accent); font-weight: var(--mz-weight-semibold); }
.italico { font-style: italic; }

.display {
  font-family: var(--mz-font-display);
  font-weight: 400;
  font-size: var(--mz-text-5xl);
  line-height: var(--mz-leading-display);
  letter-spacing: var(--mz-tracking-tighter);
  text-transform: uppercase;
}

blockquote {
  font-style: italic;
  font-size: var(--mz-text-xl);
  line-height: var(--mz-leading-snug);
  border-left: var(--mz-border-fio) solid var(--mz-marca-acento);
  padding-left: var(--mz-space-4);
  margin: var(--mz-space-5) 0;
  max-width: 56ch;
  color: var(--s-text);
}

a { color: inherit; }

/* Link editorial: sublinhado que cresce da esquerda. */
.ligacao {
  font-family: var(--mz-font-sans);
  font-weight: var(--mz-weight-semibold);
  font-size: var(--mz-text-sm);
  letter-spacing: var(--mz-tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--s-text);
  display: inline-flex; align-items: center; gap: var(--mz-space-2);
  padding-bottom: 2px;
  background-image: linear-gradient(var(--mz-marca-acento), var(--mz-marca-acento));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: left bottom;
  transition: background-size var(--mz-duration-base) var(--mz-ease-standard),
              color var(--mz-duration-fast) var(--mz-ease-standard);
}
.ligacao:hover, .ligacao:focus-visible { background-size: 100% 2px; }
.ligacao .ico { transition: transform var(--mz-duration-base) var(--mz-ease-standard); }
.ligacao:hover .ico { transform: translate(2px, -2px); }

/* O sprite é referenciado por <use> externo: os atributos da raiz dele não descem até o símbolo,
   então o traço da grade de ícones (2px, ponta reta, junta em quina) é declarado aqui. */
.ico { width: var(--mz-icon-md); height: var(--mz-icon-md); flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: butt; stroke-linejoin: miter; }
.ico--sm { width: var(--mz-icon-sm); height: var(--mz-icon-sm); }

.fio { display: block; width: 100%; height: var(--mz-border-fio); background: var(--mz-marca-acento); border: 0; margin: 0; }

/* ── botões ──────────────────────────────────────────────────────────────── */

.acoes { display: flex; flex-wrap: wrap; gap: var(--mz-space-3); margin-top: var(--mz-space-5); }

.botao {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--mz-space-2);
  min-height: var(--mz-control-lg);
  padding: 0 var(--mz-space-5);
  font-family: var(--mz-font-sans);
  font-size: var(--mz-text-sm);
  font-weight: var(--mz-weight-semibold);
  letter-spacing: var(--mz-tracking-wide);
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--mz-radius);
  border: var(--mz-border-hairline) solid transparent;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--mz-duration-fast) var(--mz-ease-standard),
              border-color var(--mz-duration-fast) var(--mz-ease-standard),
              transform var(--mz-duration-base) var(--mz-ease-standard);
}
/* Preenchimento que entra pela diagonal da marca (o corte do Z). */
.botao::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--_preenche, transparent);
  /* recuo extra: a inclinação projeta a quina ~30px além da borda */
  transform: translateX(calc(-100% - 2.5rem)) skewX(-29.4deg);
  transform-origin: left;
  transition: transform var(--mz-duration-slow) var(--mz-ease-standard);
}
.botao:hover::before, .botao:focus-visible::before { transform: translateX(0) skewX(0); }
.botao .ico { transition: transform var(--mz-duration-base) var(--mz-ease-standard); }
.botao:hover .ico { transform: translateX(4px); }
.botao--sm { min-height: var(--mz-control-md); padding: 0 var(--mz-space-4); }

/* Cor fixa: o site é sempre tema claro, e branco sobre vermelho-500 dá 5,88:1 em qualquer faixa. */
.botao--primario { background: var(--mz-vermelho-500); color: var(--mz-neutro-0); --_preenche: var(--mz-vermelho-600); }

.botao--secundario { background: transparent; color: var(--s-text); border-color: var(--s-line-2); --_preenche: var(--s-text); }
.botao--secundario:hover, .botao--secundario:focus-visible { color: var(--s-bg); border-color: var(--s-text); }

:focus-visible { outline: var(--mz-border-fio) solid var(--mz-focus); outline-offset: 2px; }

/* ── topo ──────────────────────────────────────────────────────────────────
 * Duas camadas. A faixa utilitária (assinatura da marca, contato, redes) sai de
 * cena sozinha ao rolar: o topo é sticky com top negativo igual à altura dela,
 * então só a barra principal fica presa. Nada de animar padding.
 */

.topo {
  --util-h: 40px;
  position: sticky; top: calc(-1 * var(--util-h)); z-index: 50;
  --s-bg: var(--mz-tinta); --s-text: var(--mz-branco); --s-body: var(--mz-sobre-tinta); --s-muted: var(--mz-cinza-claro); --s-line: var(--mz-tinta-linha); --s-accent: var(--mz-vermelho-claro);
  background: var(--s-bg); color: var(--s-text);
}

.topo__util { height: var(--util-h); background: var(--mz-neutro-900); border-bottom: var(--mz-border-hairline) solid var(--s-line); font-family: var(--mz-font-sans); font-size: var(--mz-text-xs); }
.topo__util-dentro { height: 100%; display: flex; align-items: center; gap: var(--mz-space-5); padding: 0 var(--mz-space-4); }
.topo__frase { margin: 0 auto 0 0; font-family: var(--mz-font-serif); font-style: italic; font-size: var(--mz-text-sm); color: var(--s-body); max-width: none; }
.topo__contato { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--mz-space-4); }
.topo__contato a { display: inline-flex; align-items: center; gap: var(--mz-space-2); color: var(--s-body); text-decoration: none; min-height: var(--util-h); font-variant-numeric: tabular-nums; transition: color var(--mz-duration-fast) var(--mz-ease-standard); }
.topo__contato a:hover { color: var(--s-text); }
.topo__contato .ico { color: var(--s-accent); }
.topo__util .redes { padding-left: var(--mz-space-4); border-left: var(--mz-border-hairline) solid var(--s-line); height: 100%; align-items: center; }
.topo__util .redes a { width: 32px; height: 32px; }
.topo__util .redes .ico { width: var(--mz-icon-sm); height: var(--mz-icon-sm); }

.topo__barra {
  display: flex; align-items: center; gap: var(--mz-space-6);
  height: 80px; padding: 0 var(--mz-space-4);
  border-bottom: var(--mz-border-hairline) solid var(--s-line);
}
/* A borda inferior ocupa a largura toda da janela, não só o contêiner. */
.topo { border-bottom: var(--mz-border-hairline) solid var(--s-line); }
.topo__barra { border-bottom: 0; }

.assinatura { display: inline-flex; align-items: center; gap: 0.3em; font-size: var(--mz-text-xl); color: var(--s-text); text-decoration: none; min-height: var(--mz-control-md); flex: none; }
/* Z e "MZ Press" com a MESMA altura, alinhados em cima e embaixo, como no cartão (mentoria de 08/10).
   O SVG é recortado no desenho (viewBox 6 8 52 48, sem a margem do símbolo) e mede a altura das
   maiúsculas da Archivo Black: 688/1000 do corpo. O espaço entre os dois (0,3em) substitui o
   respiro largo de antes, que ele achou grande demais. */
.assinatura svg { height: 0.688em; width: auto; aspect-ratio: 52 / 48; flex: none; transition: transform var(--mz-duration-slow) var(--mz-ease-standard); }
.assinatura:hover svg { transform: skewX(-6deg); }
.assinatura b { font-family: var(--mz-font-display); font-weight: 400; font-size: 1em; letter-spacing: var(--mz-tracking-tight); line-height: 1; white-space: nowrap; }

.menu { flex: 1; display: flex; align-items: center; justify-content: center; }
.menu__lista { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--mz-space-5); height: 80px; }
.menu__lista > li { height: 100%; display: flex; align-items: center; }
.menu__lista > li > a {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 100%;
  font-family: var(--mz-font-sans); font-size: 0.9375rem; font-weight: var(--mz-weight-medium);
  color: var(--s-body); text-decoration: none; white-space: nowrap;
  transition: color var(--mz-duration-fast) var(--mz-ease-standard);
}
.menu__lista > li > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: var(--mz-border-fio);
  background: var(--mz-marca-acento); transform: scaleX(0); transform-origin: left;
  transition: transform var(--mz-duration-base) var(--mz-ease-standard);
}
.menu__lista > li > a:hover, .menu__lista > li:focus-within > a, .menu__lista > li > a[aria-current="page"] { color: var(--s-text); }
.menu__lista > li > a:hover::after, .menu__lista > li > a:focus-visible::after, .menu__lista > li > a[aria-current="page"]::after { transform: scaleX(1); }
.menu__seta { color: var(--s-muted); transition: transform var(--mz-duration-base) var(--mz-ease-standard); }
.menu__rodape { display: none; }
.topo__cta { flex: none; }

/* Painel de “Para empresas”: abre em hover e em foco (teclado), fecha ao sair. */
.painel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--mz-tinta); border-top: var(--mz-border-hairline) solid var(--s-line); border-bottom: var(--mz-border-hairline) solid var(--s-line);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  clip-path: inset(0 0 100% 0);
  transition: opacity var(--mz-duration-base) var(--mz-ease-standard), transform var(--mz-duration-base) var(--mz-ease-standard),
              clip-path var(--mz-duration-slow) var(--mz-ease-standard), visibility 0s linear var(--mz-duration-slow);
}
.menu__item--painel:hover .painel, .menu__item--painel:focus-within .painel {
  opacity: 1; visibility: visible; transform: none; clip-path: inset(0 0 0 0); transition-delay: 0s;
}
.menu__item--painel:hover .menu__seta, .menu__item--painel:focus-within .menu__seta { transform: rotate(180deg); color: var(--s-accent); }
.painel__dentro { max-width: var(--mz-container-wide); margin: 0 auto; padding: var(--mz-space-6) var(--mz-space-4); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--mz-space-6); }
.painel__destaque {
  display: flex; flex-direction: column; gap: var(--mz-space-3);
  padding: var(--mz-space-5); background: var(--mz-tinta-superficie); border: var(--mz-border-hairline) solid var(--s-line);
  text-decoration: none; color: var(--s-text); position: relative; overflow: hidden;
}
.painel__destaque::after { content: ""; position: absolute; left: 0; bottom: 0; height: var(--mz-border-fio); width: 100%; background: var(--mz-marca-acento); transform: scaleX(0); transform-origin: left; transition: transform var(--mz-duration-slow) var(--mz-ease-standard); }
.painel__destaque:hover::after { transform: scaleX(1); }
.painel__destaque .ico--topo { width: var(--mz-icon-lg); height: var(--mz-icon-lg); color: var(--mz-vermelho-300); }
.painel__destaque b { font-family: var(--mz-font-sans); font-size: var(--mz-text-xl); line-height: var(--mz-leading-snug); font-weight: var(--mz-weight-semibold); }
.painel__destaque span { font-family: var(--mz-font-sans); font-size: var(--mz-text-sm); line-height: var(--mz-leading-normal); color: var(--s-body); max-width: 48ch; }
.painel__destaque .ligacao { font-style: normal; margin-top: var(--mz-space-2); align-self: flex-start; }
.painel__destaque:hover .ligacao { background-size: 100% 2px; }
.painel__lista { list-style: none; margin: 0; padding: 0; border-top: var(--mz-border-hairline) solid var(--s-line); align-self: start; }
.painel__lista li { border-bottom: var(--mz-border-hairline) solid var(--s-line); }
.painel__lista a {
  display: flex; align-items: center; gap: var(--mz-space-3); min-height: 64px;
  font-family: var(--mz-font-sans); font-size: var(--mz-text-base); font-weight: var(--mz-weight-medium);
  color: var(--s-text); text-decoration: none;
  transition: color var(--mz-duration-fast) var(--mz-ease-standard), transform var(--mz-duration-base) var(--mz-ease-standard);
}
.painel__lista a .ico { color: var(--s-muted); transition: color var(--mz-duration-fast) var(--mz-ease-standard); }
.painel__lista a:hover { transform: translateX(6px); }
.painel__lista a:hover .ico { color: var(--s-accent); }

.redes { display: flex; gap: var(--mz-space-1); }
.redes a {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--mz-control-md); height: var(--mz-control-md);
  color: var(--s-muted);
  transition: color var(--mz-duration-fast) var(--mz-ease-standard), transform var(--mz-duration-base) var(--mz-ease-standard);
}
.redes a:hover, .redes a:focus-visible { color: var(--s-text); transform: translateY(-2px); }

.menu__abrir {
  display: none; align-items: center; justify-content: center; margin-left: auto;
  width: var(--mz-control-md); height: var(--mz-control-md);
  background: transparent; border: var(--mz-border-hairline) solid var(--s-line); color: var(--s-text); cursor: pointer;
}
.menu__abrir .ico--fechar { display: none; }
.menu__abrir[aria-expanded="true"] .ico--menu { display: none; }
.menu__abrir[aria-expanded="true"] .ico--fechar { display: block; }

/* Fio de progresso: o único vermelho do topo. */
.progresso {
  position: absolute; left: 0; bottom: -1px; height: var(--mz-border-fio); width: 100%;
  background: var(--mz-marca-acento);
  transform: scaleX(var(--p, 0)); transform-origin: left;
}

/* ── herói ───────────────────────────────────────────────────────────────── */

.heroi { padding: var(--mz-space-8) var(--mz-space-4) var(--mz-space-7); overflow: hidden; }
.heroi__grade {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--mz-space-7); align-items: center;
}
.heroi__texto { max-width: 40rem; }
/* Frase e foto menores, a pedido do cliente (06/10). */
.heroi h1 { font-size: var(--mz-text-3xl); max-width: 20ch; margin-bottom: var(--mz-space-4); }
.heroi h1 .palavra { display: inline-block; overflow: hidden; vertical-align: bottom; }
.heroi h1 .palavra > span { display: inline-block; transform: translateY(110%); }
.pronto .heroi h1 .palavra > span {
  animation: sobe var(--mz-duration-slow) var(--mz-ease-enter) forwards;
  animation-delay: calc(var(--i) * 40ms + 120ms);
}
@keyframes sobe { to { transform: translateY(0); } }

.heroi__bio {
  margin-top: var(--mz-space-7); padding-top: var(--mz-space-4);
  border-top: var(--mz-border-hairline) solid var(--s-line);
  max-width: 36rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mz-space-3) var(--mz-space-5);
}
.heroi__bio h2 { font-size: var(--mz-text-base); font-weight: var(--mz-weight-semibold); line-height: var(--mz-leading-snug); margin: 0; }
.heroi__bio h2 span { display: block; color: var(--s-muted); font-weight: var(--mz-weight-regular); font-size: var(--mz-text-sm); margin-top: 2px; }

/* Retrato menor, como o cliente pediu. O plano vermelho atrás é o único plano de cor
   do herói e desliza com parallax em sentido oposto ao da foto. */
.heroi__retrato { position: relative; margin: 0; max-width: 18rem; justify-self: end; width: 100%; }
.heroi__retrato::before {
  content: ""; position: absolute; inset: var(--mz-space-4) calc(-1 * var(--mz-space-4)) calc(-1 * var(--mz-space-4)) var(--mz-space-4);
  background: var(--mz-marca-acento);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 78%, 22% 78%, 22% 100%, 0 100%);
  transform: translateY(calc(var(--py, 0) * -0.5px));
  z-index: 0;
}
.heroi__retrato img {
  position: relative; z-index: 1;
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border: var(--mz-border-hairline) solid var(--s-line);
  filter: grayscale(1) contrast(1.06);
  transform: translateY(calc(var(--py, 0) * 1px));
}
.heroi__retrato figcaption {
  position: relative; z-index: 1;
  font-family: var(--mz-font-sans); font-size: var(--mz-text-sm); font-weight: var(--mz-weight-semibold);
  color: var(--mz-branco); margin-top: 0;
  background: var(--mz-tinta); padding: var(--mz-space-3) var(--mz-space-3) var(--mz-space-3) var(--mz-space-3);
  border-left: var(--mz-border-fio) solid var(--mz-marca-acento);
  display: block; /* bloco de tinta na largura da foto: o vermelho fica só como moldura deslocada */
}
.heroi__retrato figcaption span { display: block; font-weight: var(--mz-weight-regular); color: var(--mz-sobre-tinta); margin-top: 2px; }

.pronto .heroi__retrato { animation: entra var(--mz-duration-slow) var(--mz-ease-enter) 240ms both; }
.pronto .heroi .rubrica, .pronto .heroi .lead, .pronto .heroi .acoes, .pronto .heroi__bio { animation: entra var(--mz-duration-slow) var(--mz-ease-enter) both; }
.pronto .heroi .rubrica { animation-delay: 40ms; }
.pronto .heroi .lead { animation-delay: 420ms; }
.pronto .heroi .acoes { animation-delay: 520ms; }
.pronto .heroi__bio { animation-delay: 640ms; }
@keyframes entra { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* No herói da home o retrato já é a figura; o símbolo de fundo fica para as capas internas. */
.heroi .simbolo-fundo { display: none; }

/* O símbolo em escala de composição, ao fundo, em parallax lento. */
.simbolo-fundo {
  position: absolute; right: -6%; top: 50%; width: 46vw; max-width: 640px; height: auto;
  color: var(--s-text); opacity: 0.045; pointer-events: none;
  transform: translateY(calc(-50% + var(--py, 0) * 0.35px));
}

.heroi__rolar {
  position: absolute; left: var(--mz-space-4); bottom: var(--mz-space-4);
  font-family: var(--mz-font-sans); font-size: var(--mz-text-xs); letter-spacing: var(--mz-tracking-wider); text-transform: uppercase;
  color: var(--s-muted); text-decoration: none; display: inline-flex; align-items: center; gap: var(--mz-space-2); min-height: var(--mz-control-md);
}
.heroi__rolar .ico { animation: desce 1.8s var(--mz-ease-standard) infinite; }
@keyframes desce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ── janelas: o post mais recente de cada seção ──────────────────────────── */

.janelas { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 0; border: var(--mz-border-hairline) solid var(--s-line); background: var(--s-line); }
.janela {
  position: relative; display: flex; flex-direction: column; gap: var(--mz-space-3);
  background: var(--s-surface); padding: var(--mz-space-5) var(--mz-space-4);
  text-decoration: none; color: var(--s-text); min-height: 100%;
  transition: background var(--mz-duration-base) var(--mz-ease-standard);
}
.janela::after {
  content: ""; position: absolute; left: 0; top: 0; height: var(--mz-border-fio); width: 100%;
  background: var(--mz-marca-acento); transform: scaleX(0); transform-origin: left;
  transition: transform var(--mz-duration-slow) var(--mz-ease-standard);
}
.janela:hover, .janela:focus-visible { background: var(--s-surface-2); }
.janela:hover::after, .janela:focus-visible::after { transform: scaleX(1); }
.janela__meta { display: flex; justify-content: space-between; gap: var(--mz-space-2); }
.janela__meta .rubrica { margin: 0; }
.janela__meta time { font-family: var(--mz-font-sans); font-size: var(--mz-text-xs); color: var(--s-muted); font-variant-numeric: tabular-nums; }
.janela h3 { font-size: var(--mz-text-lg); margin: 0; flex: 1; }
.janela .ligacao { align-self: flex-start; }

/* ── serviços: índice editorial em vez de grade de cartões ────────────────── */

.servicos { list-style: none; margin: 0; padding: 0; border-top: var(--mz-border-hairline) solid var(--s-line); counter-reset: servico; }
.servicos > li { border-bottom: var(--mz-border-hairline) solid var(--s-line); }
.servico {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: var(--mz-icon-xl) minmax(0, 1fr) minmax(0, 1.25fr) 11rem;
  gap: var(--mz-space-5); align-items: center;
  padding: var(--mz-space-5) var(--mz-space-4);
  color: var(--s-text); text-decoration: none;
}
.servico::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--s-surface);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform var(--mz-duration-slow) var(--mz-ease-standard);
}
.servico:hover::before, .servico:focus-visible::before { transform: scaleY(1); }
.servico__ico { width: var(--mz-icon-lg); height: var(--mz-icon-lg); color: var(--s-accent-on-surface); }
.servico h3 { margin: 0; font-size: var(--mz-text-xl); font-weight: var(--mz-weight-semibold); line-height: var(--mz-leading-snug); transition: transform var(--mz-duration-base) var(--mz-ease-standard); }
.servico:hover h3 { transform: translateX(6px); }
.servico p { margin: 0; font-family: var(--mz-font-sans); font-size: var(--mz-text-sm); line-height: var(--mz-leading-normal); }
.servico .ligacao, .para-quem .ligacao { white-space: nowrap; }
.servico .ligacao { justify-self: end; }
.servico:hover .ligacao { background-size: 100% 2px; }
.servico:hover .ligacao .ico { transform: translateX(4px); }

/* Para quem é: o porte em número de destaque, os momentos como marcas. */
.para-quem {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--mz-space-4) var(--mz-space-6); align-items: center;
  margin-top: var(--mz-space-6); padding: var(--mz-space-5) var(--mz-space-4);
  border: var(--mz-border-hairline) solid var(--s-line); background: var(--s-bg-alt);
}
.para-quem__porte { margin: 0; padding-right: var(--mz-space-6); border-right: var(--mz-border-hairline) solid var(--s-line); font-family: var(--mz-font-sans); font-size: var(--mz-text-sm); color: var(--s-body); }
.para-quem__porte b { display: block; font-family: var(--mz-font-display); font-weight: 400; font-size: var(--mz-text-3xl); line-height: 1; letter-spacing: var(--mz-tracking-tight); color: var(--s-text); margin-bottom: var(--mz-space-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.para-quem h3 { margin: 0 0 var(--mz-space-1); font-size: var(--mz-text-lg); }
.para-quem p { margin: 0 0 var(--mz-space-3); font-family: var(--mz-font-sans); font-size: var(--mz-text-sm); line-height: var(--mz-leading-normal); }
.para-quem .ligacao { justify-self: end; }
.momentos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--mz-space-2); }
.momentos li {
  display: inline-flex; align-items: center; gap: var(--mz-space-2);
  padding: 6px var(--mz-space-3); border: var(--mz-border-hairline) solid var(--s-line-2);
  font-family: var(--mz-font-sans); font-size: var(--mz-text-sm); color: var(--s-text); line-height: var(--mz-leading-snug);
}
.momentos li::before { content: ""; width: 6px; height: 6px; flex: none; background: var(--mz-marca-acento); transform: skewX(-29.4deg); }

/* ── letreiro (setores) ──────────────────────────────────────────────────── */

.letreiro { overflow: hidden; border-top: var(--mz-border-hairline) solid var(--s-line); border-bottom: var(--mz-border-hairline) solid var(--s-line); padding: var(--mz-space-4) 0; }
.letreiro__trilha { display: flex; width: max-content; gap: 0; animation: corre 48s linear infinite; }
.letreiro:hover .letreiro__trilha { animation-play-state: paused; }
.letreiro ul { list-style: none; margin: 0; padding: 0; display: flex; }
.letreiro li {
  font-family: var(--mz-font-sans); font-weight: var(--mz-weight-semibold); font-size: var(--mz-text-sm);
  letter-spacing: var(--mz-tracking-wider); text-transform: uppercase; color: var(--s-muted);
  padding: 0 var(--mz-space-5); display: flex; align-items: center; gap: var(--mz-space-5); white-space: nowrap;
}
.letreiro li::after { content: ""; width: var(--mz-space-2); height: var(--mz-space-2); background: var(--mz-marca-acento); transform: skewX(-29.4deg); }
@keyframes corre { to { transform: translateX(-50%); } }

/* ── grades e cartões ────────────────────────────────────────────────────── */

.grade { display: grid; gap: var(--mz-space-4); }
.grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dividido .grade--2 { grid-template-columns: minmax(0, 1fr); }
.grade--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.grade--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.grade--colada { gap: 0; border: var(--mz-border-hairline) solid var(--s-line); background: var(--s-line); }
.grade--colada > * { border: 0 !important; }

.cartao {
  position: relative; display: flex; flex-direction: column;
  background: var(--s-surface); border: var(--mz-border-hairline) solid var(--s-line);
  padding: var(--mz-space-5); color: var(--s-text); text-decoration: none;
  transition: border-color var(--mz-duration-base) var(--mz-ease-standard), background var(--mz-duration-base) var(--mz-ease-standard), transform var(--mz-duration-base) var(--mz-ease-standard);
}
.cartao::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: var(--mz-border-fio); width: 100%;
  background: var(--mz-marca-acento); transform: scaleX(0); transform-origin: left;
  transition: transform var(--mz-duration-slow) var(--mz-ease-standard);
}
.cartao:hover, .cartao:focus-within { border-color: var(--s-line-2); }
.cartao:hover::after, .cartao:focus-within::after { transform: scaleX(1); }
a.cartao:hover { transform: translateY(-3px); }
.cartao h3, .cartao h4 { margin-bottom: var(--mz-space-2); }
.cartao p { font-size: var(--mz-text-sm); font-family: var(--mz-font-sans); line-height: var(--mz-leading-normal); }
.cartao .ligacao { margin-top: auto; padding-top: var(--mz-space-4); }
.cartao--realce { border-color: var(--s-line-2); }

.num {
  font-family: var(--mz-font-display); font-size: var(--mz-text-2xl); line-height: 1;
  color: var(--s-accent-on-surface); display: block; margin-bottom: var(--mz-space-3);
}
.cartao .ico--topo { width: var(--mz-icon-lg); height: var(--mz-icon-lg); color: var(--s-accent-on-surface); margin-bottom: var(--mz-space-3); }

/* ── listas ──────────────────────────────────────────────────────────────── */

.lista { margin: 0 0 var(--mz-space-4); padding: 0; list-style: none; }
.lista li { position: relative; padding-left: var(--mz-space-4); margin-bottom: var(--mz-space-3); color: var(--s-body); }
.lista li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: var(--mz-space-3); height: 2px; background: var(--mz-marca-acento); }
.lista--nao li::before { background: var(--s-muted); }

/* ── cabeçalho de seção ──────────────────────────────────────────────────── */

.cabeca { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--mz-space-6); align-items: end; margin-bottom: var(--cabeca-y); }
.cabeca h2 { margin-bottom: 0; max-width: 20ch; }
.cabeca .lead { margin-bottom: 0; }
.cabeca--uma { grid-template-columns: minmax(0, 1fr); }
.cabeca__acao { justify-self: end; }

/* ── afirmação (o problema) ──────────────────────────────────────────────── */

/* O título do cliente (01/10) é uma frase de duas orações, não um bordão: no corpo de manchete ia a
   sete linhas. Um degrau abaixo e medida maior. */
.afirmacao h2 { font-size: var(--mz-text-3xl); max-width: 24ch; }
.afirmacao .grande { font-size: var(--mz-text-xl); line-height: var(--mz-leading-snug); font-style: italic; }
.afirmacao__grade { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--mz-space-7); align-items: start; }
.afirmacao__lado { border-left: var(--mz-border-hairline) solid var(--s-line); padding-left: var(--mz-space-5); }

/* ── método (rolagem com coluna fixa) ────────────────────────────────────── */

.metodo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--mz-space-7); align-items: start; }
.metodo__fixo { position: sticky; top: calc(80px + var(--mz-space-6)); }
.metodo__passos { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; border-top: var(--mz-border-hairline) solid var(--s-line); }
.passo {
  display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--mz-space-4);
  padding: var(--mz-space-5) 0; border-bottom: var(--mz-border-hairline) solid var(--s-line);
  position: relative;
}
.passo .num { margin: 0; font-size: var(--mz-text-3xl); color: var(--s-muted); /* 5,18:1 inativo; acende em vermelho quando ativo */ transition: color var(--mz-duration-slow) var(--mz-ease-standard); }
.passo.ativo .num { color: var(--s-accent); }
.passo::after { content: ""; position: absolute; left: 0; bottom: -1px; height: var(--mz-border-fio); width: 100%; background: var(--mz-marca-acento); transform: scaleX(0); transform-origin: left; transition: transform var(--mz-duration-slow) var(--mz-ease-standard); }
.passo.ativo::after { transform: scaleX(1); }
.passo h3 { margin-bottom: var(--mz-space-2); }
.passo p { font-family: var(--mz-font-sans); font-size: var(--mz-text-sm); line-height: var(--mz-leading-normal); }

/* ── ilustração: três esferas do método ────────────────────────────────────
 * Três planos isométricos a 29,4° (o ângulo do corte do Z), empilhados.
 * Ao entrar na tela eles se afastam, a leitura vermelha desce e atravessa
 * os três, e os rótulos entram um a um. Estado final = estado sem movimento.
 */
.esferas { display: block; width: 100%; max-width: 24rem; height: auto; margin-top: var(--mz-space-6); color: var(--s-text); overflow: visible; }
.esferas .plano { transform: translateY(var(--d, 0)); transition: transform 900ms var(--mz-ease-enter) 100ms; }
.esferas .plano__face { fill: var(--s-bg); stroke: currentColor; stroke-width: 1.25; stroke-linejoin: miter; }
.esferas .plano__lado { fill: currentColor; opacity: 0.1; }
.esferas .plano__lado--escuro { opacity: 0.22; }
.esferas .leitura { stroke: var(--mz-marca-acento); stroke-width: 3; stroke-dasharray: 280; stroke-dashoffset: 280; transition: stroke-dashoffset 800ms var(--mz-ease-standard) 650ms; }
.esferas .no { fill: var(--mz-marca-acento); opacity: 0; transition: opacity var(--mz-duration-base) var(--mz-ease-enter); transition-delay: calc(750ms + var(--i) * 220ms); }
.esferas .rotulo { opacity: 0; transform: translateX(-8px); transition: opacity var(--mz-duration-slow) var(--mz-ease-enter), transform var(--mz-duration-slow) var(--mz-ease-enter); transition-delay: calc(900ms + var(--i) * 140ms); }
.esferas .rotulo path { stroke: currentColor; stroke-width: 1; opacity: 0.45; fill: none; }
.esferas .rotulo text { fill: currentColor; font-family: var(--mz-font-sans); font-size: 11px; font-weight: 600; letter-spacing: 2.2px; }
.esferas.visto .plano { transform: none; }
.esferas.visto .leitura { stroke-dashoffset: 0; }
.esferas.visto .no { opacity: 1; }
.esferas.visto .rotulo { opacity: 1; transform: none; }
/* A figura já anima por dentro; a revelação genérica só não pode deslocá-la. */
.esferas.revela { transform: none; }
html.sem-js .esferas .plano, html.sem-js .esferas .rotulo { transform: none; opacity: 1; }
html.sem-js .esferas .leitura { stroke-dashoffset: 0; }
html.sem-js .esferas .no { opacity: 1; }

/* ── dividido (texto + foto) ─────────────────────────────────────────────── */

.dividido { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--mz-space-7); align-items: center; }
.dividido--inverso > :first-child { order: 2; }
.moldura { position: relative; margin: 0; overflow: hidden; border: var(--mz-border-hairline) solid var(--s-line); }
.moldura img { display: block; width: 100%; height: auto; filter: grayscale(1) contrast(1.06); transform: scale(1.08) translateY(calc(var(--py, 0) * 0.35px)); transition: transform var(--mz-duration-slow) var(--mz-ease-standard); }
.moldura--4x5 img { aspect-ratio: 4 / 5; object-fit: cover; }
.moldura--16x9 img { aspect-ratio: 16 / 9; object-fit: cover; }
.moldura figcaption { position: absolute; left: 0; bottom: 0; padding: var(--mz-space-3) var(--mz-space-4); background: var(--mz-tinta); color: var(--mz-branco); font-family: var(--mz-font-sans); font-size: var(--mz-text-sm); font-weight: var(--mz-weight-medium); border-top: var(--mz-border-fio) solid var(--mz-marca-acento); }

/* ── números ─────────────────────────────────────────────────────────────── */

.numeros { list-style: none; margin: var(--mz-space-5) 0 0; padding: 0; border-top: var(--mz-border-hairline) solid var(--s-line); }
.numero { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--mz-space-4); align-items: baseline; padding: var(--mz-space-4) 0; border-bottom: var(--mz-border-hairline) solid var(--s-line); }
.numero b { font-family: var(--mz-font-display); font-weight: 400; font-size: var(--mz-text-3xl); line-height: 1; color: var(--s-text); font-variant-numeric: tabular-nums; }
.numero b em { font-style: normal; color: var(--s-accent); }
.numero > span { font-family: var(--mz-font-sans); font-size: var(--mz-text-sm); color: var(--s-body); line-height: var(--mz-leading-normal); }

/* ── livros ──────────────────────────────────────────────────────────────── */

.estante { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--mz-space-5); }
.livro { display: flex; flex-direction: column; gap: var(--mz-space-3); text-decoration: none; color: var(--s-text); }
.capa {
  position: relative; aspect-ratio: 2 / 3; display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--mz-space-4); background: var(--mz-tinta); color: var(--mz-papel);
  border: var(--mz-border-hairline) solid var(--s-line);
  overflow: hidden;
  transform: perspective(1200px) rotateY(0) translateY(0);
  transition: transform var(--mz-duration-slow) var(--mz-ease-standard), border-color var(--mz-duration-base) var(--mz-ease-standard);
}
.capa--papel { background: var(--mz-papel); color: var(--mz-tinta); }
.capa--vermelha { background: var(--mz-vermelho-500); color: var(--mz-neutro-0); }
.capa::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: rgba(0,0,0,0.28); }
.capa__ano { font-family: var(--mz-font-sans); font-size: var(--mz-text-xs); letter-spacing: var(--mz-tracking-wider); text-transform: uppercase; opacity: 0.85; }
.capa__titulo { font-family: var(--mz-font-sans); font-weight: var(--mz-weight-bold); font-size: var(--mz-text-lg); line-height: var(--mz-leading-tight); letter-spacing: var(--mz-tracking-tight); }
.capa__titulo small { display: block; font-family: var(--mz-font-serif); font-weight: var(--mz-weight-regular); font-size: var(--mz-text-sm); margin-top: var(--mz-space-2); font-style: italic; opacity: 0.85; }
.capa .estratos { width: var(--mz-space-5); height: auto; }
.capa--papel .estratos, .capa .estratos { color: var(--mz-marca-acento); }
.capa--vermelha .estratos rect { fill: currentColor; }
.livro:hover .capa, .livro:focus-visible .capa { transform: perspective(1200px) rotateY(-8deg) translateY(-6px); border-color: var(--s-line-2); }
.livro h3 { font-size: var(--mz-text-base); margin: 0; }
.livro p { font-family: var(--mz-font-sans); font-size: var(--mz-text-sm); line-height: var(--mz-leading-normal); }
.livro__acoes { display: flex; gap: var(--mz-space-3); margin-top: auto; }

/* Livro em linha: capa estreita encostada no texto, não metade da página. */
.livro-linha { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--mz-space-7); align-items: center; padding: var(--mz-space-7) 0; border-top: var(--mz-border-hairline) solid var(--s-line); }
.livro-linha h2 { font-size: var(--mz-text-2xl); }

/* ── bio (sobre) ─────────────────────────────────────────────────────────── */

.sobre { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--mz-space-7); align-items: start; }
.sobre__foto { position: sticky; top: calc(80px + var(--mz-space-6)); }
.dobras { border-top: var(--mz-border-hairline) solid var(--s-line); margin-top: var(--mz-space-5); }
.dobra { border-bottom: var(--mz-border-hairline) solid var(--s-line); }
.dobra summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--mz-space-4);
  padding: var(--mz-space-4) 0; font-family: var(--mz-font-sans); font-weight: var(--mz-weight-semibold); font-size: var(--mz-text-lg); color: var(--s-text);
  transition: color var(--mz-duration-fast) var(--mz-ease-standard);
}
.dobra summary::-webkit-details-marker { display: none; }
.dobra summary .ico { transition: transform var(--mz-duration-base) var(--mz-ease-standard); color: var(--s-accent); }
.dobra[open] summary .ico { transform: rotate(45deg); }
.dobra summary:hover { color: var(--s-accent); }
.dobra__corpo { padding: 0 0 var(--mz-space-5); }
.dobra__corpo ul { margin-top: 0; }
.dobra__corpo .lista li { font-family: var(--mz-font-sans); font-size: var(--mz-text-sm); line-height: var(--mz-leading-normal); }
.dobra__corpo h3 { font-size: var(--mz-text-xs); letter-spacing: var(--mz-tracking-widest); text-transform: uppercase; color: var(--s-muted); margin: var(--mz-space-4) 0 var(--mz-space-3); }
.dobra__corpo h3:first-child { margin-top: 0; }

/* ── conversa (chamada final) ────────────────────────────────────────────── */

.conversa { text-align: left; }
.conversa h2 { font-size: var(--mz-text-4xl); max-width: 16ch; }
.conversa__grade { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--mz-space-7); align-items: center; }
.contato { list-style: none; margin: 0; padding: 0; border-top: var(--mz-border-hairline) solid var(--s-line); }
.contato li { border-bottom: var(--mz-border-hairline) solid var(--s-line); }
.contato a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--mz-space-4);
  padding: var(--mz-space-4) 0; text-decoration: none; color: var(--s-text); font-family: var(--mz-font-sans); font-size: var(--mz-text-base);
  transition: color var(--mz-duration-fast) var(--mz-ease-standard);
}
.contato a > span { font-variant-numeric: tabular-nums; transition: transform var(--mz-duration-base) var(--mz-ease-standard); }
.contato a:hover > span { transform: translateX(var(--mz-space-3)); }
.contato a > span > span { display: block; font-size: var(--mz-text-xs); letter-spacing: var(--mz-tracking-wider); text-transform: uppercase; color: var(--s-muted); margin-bottom: 2px; }
.contato a:hover { color: var(--s-accent); }
.contato a .ico { color: var(--s-accent); }

/* ── rodapé ──────────────────────────────────────────────────────────────── */

.rodape { padding: var(--mz-space-7) var(--mz-space-4) var(--mz-space-5); font-family: var(--mz-font-sans); font-size: var(--mz-text-sm); }
.rodape__grade { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--mz-space-6); padding-bottom: var(--mz-space-6); border-bottom: var(--mz-border-hairline) solid var(--s-line); }
.rodape__titulo { font-family: var(--mz-font-sans); font-size: var(--mz-text-xs); letter-spacing: var(--mz-tracking-widest); text-transform: uppercase; color: var(--s-muted); margin-bottom: var(--mz-space-3); }
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: var(--mz-space-2); }
.rodape a { color: var(--s-text); text-decoration: none; }
.rodape a:hover { color: var(--s-accent); }
.rodape .assinatura__frase { font-family: var(--mz-font-serif); font-style: italic; font-size: var(--mz-text-lg); color: var(--s-text); max-width: 28ch; margin-top: var(--mz-space-4); }
.rodape__fim { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--mz-space-3); padding-top: var(--mz-space-4); color: var(--s-muted); }
.rodape__fim p { color: var(--s-muted); max-width: none; }

.topo-voltar {
  position: fixed; right: var(--mz-space-4); bottom: var(--mz-space-4); z-index: 40;
  width: var(--mz-control-md); height: var(--mz-control-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mz-tinta); color: var(--mz-branco); border: var(--mz-border-hairline) solid var(--mz-tinta-linha);
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity var(--mz-duration-base) var(--mz-ease-standard), transform var(--mz-duration-base) var(--mz-ease-standard);
}
.topo-voltar.visivel { opacity: 1; pointer-events: auto; transform: none; }

/* ── pop-up (promoções e venda de livros) ────────────────────────────────
 * Duas colunas: à esquerda o livro como objeto, em perspectiva sobre a
 * textura da marca; à direita o texto, em medida curta e com ar. O foco
 * inicial cai na caixa (sem anel), não no botão de fechar.
 */

.popup { border: 0; padding: 0; background: transparent; width: min(92vw, 54rem); max-width: none; overflow: visible; }
.popup::backdrop { background: rgba(16, 17, 20, 0.64); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.popup[open] { animation: popup-entra var(--mz-duration-slow) var(--mz-ease-enter); }
.popup[open]::backdrop { animation: popup-fundo var(--mz-duration-slow) var(--mz-ease-enter); }
@keyframes popup-entra { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes popup-fundo { from { opacity: 0; } to { opacity: 1; } }

.popup__caixa {
  --s-bg: var(--mz-tinta); --s-text: var(--mz-branco); --s-body: var(--mz-sobre-tinta); --s-muted: var(--mz-cinza-claro); --s-line: var(--mz-tinta-linha); --s-line-2: var(--mz-neutro-600); --s-accent: var(--mz-vermelho-claro);
  position: relative;
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  background: var(--s-bg); color: var(--s-text); border: var(--mz-border-hairline) solid var(--s-line);
  box-shadow: var(--mz-shadow-overlay); /* teto permitido: elemento que flutua sobre conteúdo */
}
.popup__caixa:focus { outline: none; }

.popup__capa {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: var(--mz-space-7) var(--mz-space-6);
  background: var(--mz-neutro-900);
  border-right: var(--mz-border-hairline) solid var(--s-line);
}
.popup__capa::before {
  content: ""; position: absolute; inset: 0;
  background: url("design-system/ilustracoes/diagonal-textura.svg") 0 0 / 64px 64px;
  opacity: 0.5;
}
/* A diagonal da marca atravessa o painel, uma vez, por trás do livro. */
.popup__capa::after {
  content: ""; position: absolute; left: 50%; top: -10%; width: 3px; height: 120%;
  background: var(--mz-marca-acento); transform: rotate(29.4deg);
}
.popup__livro { position: relative; z-index: 1; width: 100%; max-width: 13.5rem; perspective: 1200px; }
.popup__livro .capa {
  transform: rotateY(-14deg) rotateX(2deg);
  box-shadow: 24px 32px 48px rgba(0, 0, 0, 0.45), 4px 6px 12px rgba(0, 0, 0, 0.3);
  transition: transform var(--mz-duration-slow) var(--mz-ease-standard);
}
.popup__livro:hover .capa { transform: rotateY(-6deg); }
.popup[open] .popup__livro .capa { animation: livro-entra 700ms var(--mz-ease-enter) 80ms both; }
@keyframes livro-entra { from { opacity: 0; transform: rotateY(-32deg) translateX(-12px); } to { opacity: 1; transform: rotateY(-14deg) rotateX(2deg); } }
.popup__livro .capa__ano { white-space: nowrap; letter-spacing: var(--mz-tracking-wide); }

.popup__texto { padding: var(--mz-space-8) var(--mz-space-6) var(--mz-space-6); display: flex; flex-direction: column; justify-content: center; }
.popup__texto h2 { font-size: var(--mz-text-2xl); font-weight: var(--mz-weight-semibold); letter-spacing: var(--mz-tracking-tight); line-height: var(--mz-leading-tight); max-width: 17ch; margin-bottom: var(--mz-space-4); }
.popup__texto > p:not(.rubrica) { font-size: var(--mz-text-base); line-height: var(--mz-leading-relaxed); color: var(--s-body); max-width: 36ch; margin-bottom: 0; hyphens: manual; text-wrap: pretty; }
.popup__acoes { display: flex; flex-wrap: nowrap; gap: var(--mz-space-3); margin-top: var(--mz-space-6); }
.popup__acoes .botao { min-height: var(--mz-control-md); padding: 0 var(--mz-space-4); white-space: nowrap; }

.popup__fechar {
  position: absolute; top: var(--mz-space-2); right: var(--mz-space-2); z-index: 2;
  width: var(--mz-control-md); height: var(--mz-control-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--s-muted); cursor: pointer;
  transition: color var(--mz-duration-fast) var(--mz-ease-standard), transform var(--mz-duration-base) var(--mz-ease-standard);
}
.popup__fechar:hover { color: var(--s-text); transform: rotate(90deg); }

/* ── páginas internas ────────────────────────────────────────────────────── */

.capa-pagina { padding: var(--mz-space-8) var(--mz-space-4) var(--mz-space-7); overflow: hidden; }
.capa-pagina h1 { max-width: 20ch; }
/* Nas capas internas o símbolo inteiro cabe na faixa, alinhado à margem do contêiner. */
.capa-pagina .simbolo-fundo { right: max(var(--mz-space-4), calc((100vw - var(--mz-container-wide)) / 2)); width: min(30vw, 360px); opacity: 0.05; }
.capa-pagina .lead { max-width: 60ch; }
.migalhas { list-style: none; margin: 0 0 var(--mz-space-5); padding: 0; display: flex; gap: var(--mz-space-2); font-family: var(--mz-font-sans); font-size: var(--mz-text-xs); letter-spacing: var(--mz-tracking-wider); text-transform: uppercase; color: var(--s-muted); }
.migalhas a { color: var(--s-muted); text-decoration: none; }
.migalhas a:hover { color: var(--s-text); }
.migalhas li + li::before { content: "/"; margin-right: var(--mz-space-2); }

.artigos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: var(--mz-space-5); }
.artigo { display: flex; flex-direction: column; gap: var(--mz-space-3); text-decoration: none; color: var(--s-text); }
.artigo__imagem { aspect-ratio: 3 / 2; background: var(--mz-tinta); border: var(--mz-border-hairline) solid var(--s-line); position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: var(--mz-space-3); }
.artigo__imagem .estratos { width: var(--mz-space-6); height: auto; color: var(--mz-marca-acento); }
.artigo__imagem::after { content: ""; position: absolute; inset: 0; background: url("design-system/ilustracoes/diagonal-textura.svg") 0 0 / 64px 64px; color: var(--mz-papel); opacity: 0.5; transition: transform var(--mz-duration-slow) var(--mz-ease-standard); }
.artigo:hover .artigo__imagem::after { transform: translate(-8px, 5px); }
.artigo h3 { font-size: var(--mz-text-lg); margin: 0; transition: color var(--mz-duration-fast) var(--mz-ease-standard); }
.artigo:hover h3 { color: var(--s-accent); }
.artigo time { font-family: var(--mz-font-sans); font-size: var(--mz-text-xs); letter-spacing: var(--mz-tracking-wider); text-transform: uppercase; color: var(--s-muted); }
.artigo p { font-family: var(--mz-font-sans); font-size: var(--mz-text-sm); line-height: var(--mz-leading-normal); }

.abas { display: flex; gap: 0; border-bottom: var(--mz-border-hairline) solid var(--s-line); margin-bottom: var(--mz-space-6); }
.abas a {
  position: relative; display: inline-flex; align-items: center; min-height: var(--mz-control-lg); padding: 0 var(--mz-space-4);
  font-family: var(--mz-font-sans); font-size: var(--mz-text-sm); font-weight: var(--mz-weight-semibold); letter-spacing: var(--mz-tracking-wide); text-transform: uppercase;
  color: var(--s-muted); text-decoration: none;
}
.abas a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: var(--mz-border-fio); background: var(--mz-marca-acento); transform: scaleX(0); transform-origin: left; transition: transform var(--mz-duration-base) var(--mz-ease-standard); }
.abas a:hover, .abas a[aria-current] { color: var(--s-text); }
.abas a[aria-current]::after, .abas a:hover::after { transform: scaleX(1); }

/* ── corte: a transição entre faixas ─────────────────────────────────────
 * A faixa anterior invade a seguinte numa cunha diagonal, com o fio vermelho
 * na hipotenusa (o corte do Z). Ao rolar, a cunha se achata até sumir:
 * app.js escreve --corte-k de 1 (faixa entrando) a 0 (faixa assentada).
 * A cunha é um SVG que app.js insere (polígono + fio, com antialiasing).
 * Com movimento reduzido fica um corte curto e parado.
 */
.faixa > .corte__cunha {
  position: absolute; left: 0; top: -1px; z-index: 1; display: block; width: 100%;
  height: calc(var(--corte-h, clamp(32px, 5vw, 72px)) * var(--corte-k, 0.45));
  opacity: min(1, calc(var(--corte-k, 0.45) * 12));
  overflow: visible; pointer-events: none;
}
.corte__cunha polygon { fill: var(--corte-bg); }
.corte__cunha line { stroke: var(--mz-marca-acento); stroke-width: 2; vector-effect: non-scaling-stroke; }
.faixa--curta.corte { --corte-h: clamp(24px, 3vw, 40px); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── o problema: o relatório onde as perdas não constam ──────────────────── */

.perdas { margin: var(--mz-space-4) 0 0; background: var(--s-surface); border: var(--mz-border-hairline) solid var(--s-line); font-family: var(--mz-font-sans); }
.perdas__topo {
  display: flex; justify-content: space-between; gap: var(--mz-space-3);
  padding: var(--mz-space-2) var(--mz-space-3); border-bottom: var(--mz-border-hairline) solid var(--s-line-2);
  font-size: var(--mz-text-xs); font-weight: var(--mz-weight-semibold); letter-spacing: var(--mz-tracking-wider); text-transform: uppercase; color: var(--s-muted);
}
.perdas ul { list-style: none; margin: 0; padding: 0; }
.perdas li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--mz-space-3); align-items: baseline;
  padding: var(--mz-space-3); border-bottom: var(--mz-border-hairline) solid var(--s-line);
}
.perdas li span { font-size: var(--mz-text-base); line-height: var(--mz-leading-snug); color: var(--s-text); }
.perdas li span::first-letter { text-transform: uppercase; }
.perdas li em {
  display: inline-flex; align-items: center; gap: var(--mz-space-2); white-space: nowrap;
  font-style: normal; font-size: var(--mz-text-xs); font-weight: var(--mz-weight-semibold); letter-spacing: var(--mz-tracking-wide); text-transform: uppercase; color: var(--s-muted);
}
.perdas li em::before { content: ""; width: var(--mz-space-3); height: 2px; background: var(--mz-marca-acento); }
.perdas figcaption { padding: var(--mz-space-3); font-family: var(--mz-font-serif); font-style: italic; font-size: var(--mz-text-base); color: var(--s-text); }

/* As linhas entram uma a uma; depois o texto de cada perda esmaece devagar
   (perde devagar), sem cair abaixo do contraste do texto secundário. */
.perdas li { opacity: 0; transform: translateX(-8px); transition: opacity var(--mz-duration-slow) var(--mz-ease-enter), transform var(--mz-duration-slow) var(--mz-ease-enter); transition-delay: calc(300ms + var(--i) * 160ms); }
.perdas li span { transition: color 2400ms var(--mz-ease-standard); transition-delay: calc(1400ms + var(--i) * 400ms); }
.perdas li em { opacity: 0; transition: opacity var(--mz-duration-slow) var(--mz-ease-enter); transition-delay: calc(700ms + var(--i) * 160ms); }
.perdas li em::before { transform: scaleX(0); transform-origin: left; transition: transform var(--mz-duration-slow) var(--mz-ease-enter); transition-delay: calc(760ms + var(--i) * 160ms); }
.visto .perdas li { opacity: 1; transform: none; }
.visto .perdas li span { color: var(--s-muted); }
.visto .perdas li em { opacity: 1; }
.visto .perdas li em::before { transform: none; }
html.sem-js .perdas li, html.sem-js .perdas li em { opacity: 1; transform: none; }

/* Citação-ponte: fecha o problema e abre “Para empresas”. */
.ponte { margin: var(--mz-space-8) 0 0; max-width: 34ch; font-size: var(--mz-text-2xl); line-height: var(--mz-leading-snug); }
.ponte em { font-style: normal; font-weight: var(--mz-weight-semibold); }
.ponte cite {
  display: block; margin-top: var(--mz-space-4);
  font-family: var(--mz-font-sans); font-style: normal; font-size: var(--mz-text-xs); font-weight: var(--mz-weight-semibold);
  letter-spacing: var(--mz-tracking-wider); text-transform: uppercase; color: var(--s-muted);
}

/* ── para empresas: a tela é consequência ────────────────────────────────── */

.cabeca--figura { align-items: center; }
.cabeca--figura h2 { margin-bottom: var(--mz-space-4); }
.cabeca--figura .lead strong { color: var(--s-text); font-weight: var(--mz-weight-semibold); }

.origem { margin: 0; width: 100%; max-width: 28rem; justify-self: end; font-family: var(--mz-font-sans); }
.origem__tela { background: var(--s-surface); border: var(--mz-border-hairline) solid var(--s-line-2); }
.origem__barra {
  display: flex; align-items: center; gap: var(--mz-space-2);
  padding: var(--mz-space-2) var(--mz-space-3); border-bottom: var(--mz-border-hairline) solid var(--s-line);
  font-size: var(--mz-text-xs); font-weight: var(--mz-weight-semibold); letter-spacing: var(--mz-tracking-wider); text-transform: uppercase; color: var(--s-body);
}
.origem__barra::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--mz-marca-acento); transform: skewX(-29.4deg); }
.origem__resultado { display: grid; gap: 6px; padding: var(--mz-space-3); }
.origem__resultado + .origem__resultado { border-top: var(--mz-border-hairline) solid var(--s-line); }
.origem__resultado i { display: block; height: 5px; width: var(--w); background: var(--s-line-2); transform-origin: left; }
.origem__resultado i:first-child { height: 8px; width: calc(var(--w) * 0.6); background: var(--s-muted); }
.origem__fios { display: block; width: 100%; height: var(--mz-space-7); overflow: visible; }
.origem__fios path { fill: none; stroke: var(--s-line-2); stroke-width: 1.5; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.origem__fios path:nth-child(2) { stroke: var(--mz-marca-acento); }
.origem__base { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mz-space-2); }
.origem__base li {
  display: flex; align-items: center; justify-content: center; text-align: center; min-height: var(--mz-control-lg);
  padding: var(--mz-space-2); border: var(--mz-border-hairline) solid var(--s-line-2);
  font-size: var(--mz-text-sm); font-weight: var(--mz-weight-medium); line-height: var(--mz-leading-snug); color: var(--s-text);
}
/* A informação sobe dos três pés até a tela, enquanto a figura está em cena. */
.origem.em-cena .origem__fios path { animation: sobe-fio 1.2s linear infinite; }
@keyframes sobe-fio { to { stroke-dashoffset: -16; } }
.origem .origem__resultado i { transform: scaleX(0); transition: transform 600ms var(--mz-ease-enter); }
.origem .origem__resultado i:nth-child(2) { transition-delay: 90ms; }
.origem .origem__resultado i:nth-child(3) { transition-delay: 180ms; }
.origem .origem__resultado + .origem__resultado i { transition-delay: 300ms; }
.origem.visto .origem__resultado i { transform: none; }
html.sem-js .origem__resultado i { transform: none; }

/* ── método: exemplos por etapa ──────────────────────────────────────────── */

.exemplo {
  margin-top: var(--mz-space-4); max-width: 30rem; padding: var(--mz-space-3);
  background: var(--s-surface); border: var(--mz-border-hairline) solid var(--s-line);
  font-family: var(--mz-font-sans); font-size: var(--mz-text-xs); line-height: var(--mz-leading-snug); color: var(--s-body);
}
.exemplo p { font-size: inherit; margin: 0; }
.exemplo .ia__dossie, .exemplo .plano-tab__nota { margin-top: var(--mz-space-3); }
.exemplo__rotulo, .dia__cabeca, .ia__fontes li, .cruza__linha > span, .plano-tab__cabeca span {
  font-weight: var(--mz-weight-semibold); letter-spacing: var(--mz-tracking-wider); text-transform: uppercase;
}

/* 01 · um dia in company */
.dia__cabeca { display: flex; justify-content: space-between; margin-bottom: var(--mz-space-2); color: var(--s-muted); }
.dia__cabeca span:first-child { color: var(--s-text); }
.dia__agenda { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
.dia__agenda li { position: relative; padding: var(--mz-space-3) var(--mz-space-2) var(--mz-space-2); background: var(--s-bg-alt); color: var(--s-text); font-weight: var(--mz-weight-medium); overflow-wrap: anywhere; }
.dia__agenda li::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--s-text);
  transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--mz-ease-enter); transition-delay: calc(var(--i) * 220ms);
}
.dia__agenda li:last-child::before { background: var(--mz-marca-acento); }
.passo.feito .dia__agenda li::before { transform: none; }

/* 02 · a mesma pergunta em três IAs */
.ia__fontes { list-style: none; margin: 0 0 var(--mz-space-2); padding: 0; display: flex; flex-wrap: wrap; gap: var(--mz-space-1); }
.ia__fontes li { padding: 2px var(--mz-space-2); border: var(--mz-border-hairline) solid var(--s-line-2); color: var(--s-text); }
.ia__janelas { display: grid; gap: var(--mz-space-1); }
.ia__janela {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); grid-template-areas: "nome pergunta" ". resposta"; gap: 6px var(--mz-space-2);
  padding: var(--mz-space-2); background: var(--s-bg); border: var(--mz-border-hairline) solid var(--s-line);
}
.ia__nome { grid-area: nome; font-weight: var(--mz-weight-semibold); color: var(--s-muted); }
.ia__pergunta { grid-area: pergunta; color: var(--s-text); font-weight: var(--mz-weight-medium); }
.ia__resposta { grid-area: resposta; display: grid; gap: 4px; }
.ia__resposta i { display: block; height: 4px; width: var(--w); background: var(--s-line-2); transform-origin: left; }
.ia__dossie { display: flex; align-items: center; gap: var(--mz-space-2); color: var(--s-text); font-weight: var(--mz-weight-semibold); letter-spacing: var(--mz-tracking-wide); text-transform: uppercase; }
.ia__dossie .ico { color: var(--mz-marca-acento); }
/* A pergunta é digitada igual nas três; as respostas saem diferentes. */
.ia__pergunta { clip-path: inset(0 100% 0 0); transition: clip-path 900ms steps(30, end); transition-delay: calc(200ms + var(--i) * 420ms); }
.ia__resposta i { transform: scaleX(0); transition: transform 500ms var(--mz-ease-enter); transition-delay: calc(1000ms + var(--i) * 420ms); }
.ia__resposta i + i { transition-delay: calc(1120ms + var(--i) * 420ms); }
.ia__dossie { opacity: 0; transform: translateY(4px); transition: opacity var(--mz-duration-slow) var(--mz-ease-enter) 2200ms, transform var(--mz-duration-slow) var(--mz-ease-enter) 2200ms; }
.passo.feito .ia__pergunta { clip-path: inset(0 0 0 0); }
.passo.feito .ia__resposta i { transform: none; }
.passo.feito .ia__dossie { opacity: 1; transform: none; }

/* 03 · dentro × fora */
.cruza__linha { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--mz-space-2); align-items: center; margin-bottom: var(--mz-space-2); }
.cruza__linha > span { color: var(--s-text); white-space: nowrap; }
.cruza__barra { position: relative; height: 12px; background: var(--s-bg-alt); }
.cruza__linha + .cruza__linha .cruza__barra { background: repeating-linear-gradient(-60deg, var(--mz-vermelho-100) 0 2px, transparent 2px 6px); }
.cruza__barra i { position: absolute; top: 0; bottom: 0; left: var(--x); width: var(--w); background: var(--s-text); transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--mz-ease-enter); }
.cruza__linha + .cruza__linha .cruza__barra i { transition-delay: 500ms; }
.cruza__distancia { margin-left: calc(6.5rem + var(--mz-space-2)); display: flex; align-items: center; gap: var(--mz-space-2); color: var(--s-accent); font-weight: var(--mz-weight-semibold); letter-spacing: var(--mz-tracking-wider); text-transform: uppercase; opacity: 0; transition: opacity var(--mz-duration-slow) var(--mz-ease-enter) 1200ms; }
.cruza__distancia::before { content: ""; width: 10px; height: 10px; flex: none; background: repeating-linear-gradient(-60deg, var(--mz-vermelho-100) 0 2px, transparent 2px 4px); border: var(--mz-border-hairline) solid var(--mz-marca-acento); }
.passo.feito .cruza__barra i { transform: none; }
.passo.feito .cruza__distancia { opacity: 1; }

/* 04 · o plano por frentes */
.plano-tab__linha { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 0.7fr); gap: var(--mz-space-3); align-items: center; padding: 6px 0; border-bottom: var(--mz-border-hairline) solid var(--s-line); }
.plano-tab__cabeca { padding-top: 0; border-bottom-color: var(--s-line-2); color: var(--s-muted); }
.plano-tab__linha > span { color: var(--s-text); font-weight: var(--mz-weight-medium); }
.plano-tab__cabeca > span { color: var(--s-muted); }
.plano-tab__linha > i { display: block; height: 6px; width: var(--w); background: var(--s-line-2); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--mz-ease-enter); transition-delay: calc(250ms + var(--i) * 200ms); }
.plano-tab__linha > i + i { background: var(--s-text); transition-delay: calc(400ms + var(--i) * 200ms); }
.plano-tab__nota { display: flex; align-items: center; gap: var(--mz-space-2); color: var(--s-text); font-weight: var(--mz-weight-semibold); letter-spacing: var(--mz-tracking-wide); text-transform: uppercase; }
.plano-tab__nota .ico { color: var(--mz-marca-acento); }
.passo.feito .plano-tab__linha > i { transform: none; }

html.sem-js .ia__pergunta { clip-path: none; }
html.sem-js .exemplo i, html.sem-js .dia__agenda li::before { transform: none; }
html.sem-js .ia__dossie, html.sem-js .cruza__distancia { opacity: 1; transform: none; }

/* As camadas acompanham a etapa: 01 lê a empresa por dentro, 02 o que está por fora
   (digital e offline), 03 e 04 cruzam as três com a leitura. */
.esferas .plano { transition: transform 900ms var(--mz-ease-enter) 100ms, opacity 400ms var(--mz-ease-standard); }
.esferas .plano__face { transition: stroke-width 400ms var(--mz-ease-standard); }
.esferas .rotulo text { transition: fill 400ms var(--mz-ease-standard); }
.esferas[data-etapa] .rotulo { transition-delay: 0s; }
.esferas[data-etapa="1"] [data-camada]:not([data-camada="empresa"]),
.esferas[data-etapa="2"] [data-camada="empresa"] { opacity: 0.25; }
.esferas[data-etapa="1"] .plano[data-camada="empresa"] .plano__face,
.esferas[data-etapa="2"] .plano:not([data-camada="empresa"]) .plano__face { stroke-width: 2.5; }
.esferas[data-etapa="1"] .rotulo[data-camada="empresa"] text,
.esferas[data-etapa="2"] .rotulo:not([data-camada="empresa"]) text { fill: var(--s-accent); }
.esferas[data-etapa="1"] .leitura, .esferas[data-etapa="2"] .leitura { stroke-dashoffset: 280; transition-delay: 0s; }
.esferas[data-etapa="1"] .no, .esferas[data-etapa="2"] .no { opacity: 0; transition-delay: 0s; }
.esferas[data-etapa="4"] .leitura { stroke-width: 5; }

/* ── para profissionais: visor de câmera sobre a foto ────────────────────── */

.visor__quadro { position: absolute; inset: var(--mz-space-4); z-index: 1; pointer-events: none; font-family: var(--mz-font-sans); }
.visor__quadro i { position: absolute; width: 22px; height: 22px; border: 2px solid var(--mz-branco); }
.visor__quadro i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.visor__quadro i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.visor__quadro i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.visor__quadro i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.visor__rec, .visor__cena {
  position: absolute; top: 0; height: 26px; line-height: 26px; padding: 0 var(--mz-space-2);
  background: var(--mz-tinta); color: var(--mz-branco);
  font-size: var(--mz-text-xs); font-weight: var(--mz-weight-semibold); letter-spacing: var(--mz-tracking-wider); text-transform: uppercase;
}
.visor__rec { left: 30px; display: inline-flex; align-items: center; gap: 6px; }
.visor__rec::before { content: ""; width: 8px; height: 8px; background: var(--mz-marca-acento); }
.visor__cena { right: 30px; overflow: hidden; }
.visor__cena > span { display: block; height: 26px; }
.visor.em-cena .visor__rec::before { animation: grava 1.4s steps(2, jump-none) infinite; }
.visor.em-cena .visor__cena > span { animation: cenas 10s var(--mz-ease-standard) infinite; }
@keyframes grava { 50% { opacity: 0.15; } }
@keyframes cenas {
  0%, 21% { transform: translateY(0); }
  25%, 46% { transform: translateY(-100%); }
  50%, 71% { transform: translateY(-200%); }
  75%, 96% { transform: translateY(-300%); }
  100% { transform: translateY(0); }
}
.visor figcaption { z-index: 2; }

/* ── sobre: a trajetória em linha do tempo ───────────────────────────────── */

.trajetoria { position: relative; list-style: none; margin: var(--mz-space-5) 0; padding: 0; display: grid; gap: var(--mz-space-3); font-family: var(--mz-font-sans); }
.trajetoria::before, .trajetoria::after { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: var(--s-line-2); }
.trajetoria::after { background: var(--mz-marca-acento); transform: scaleY(0); transform-origin: top; transition: transform 1600ms var(--mz-ease-standard) 200ms; }
.trajetoria li { position: relative; z-index: 1; padding-left: var(--mz-space-5); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--mz-space-2); }
.trajetoria li::before {
  content: ""; position: absolute; top: 4px; left: 0; width: 12px; height: 12px;
  background: var(--s-bg); border: 2px solid var(--s-text);
  transform: rotate(45deg) scale(0.4); opacity: 0;
  transition: transform var(--mz-duration-slow) var(--mz-ease-enter), opacity var(--mz-duration-slow) var(--mz-ease-enter);
  transition-delay: calc(300ms + var(--i) * 400ms);
}
.trajetoria li:last-child::before { background: var(--mz-marca-acento); border-color: var(--mz-marca-acento); }
.trajetoria b { font-size: var(--mz-text-base); font-weight: var(--mz-weight-semibold); line-height: var(--mz-leading-snug); color: var(--s-text); }
.trajetoria span { font-size: var(--mz-text-sm); line-height: var(--mz-leading-snug); color: var(--s-muted); }
.trajetoria.visto::after { transform: none; }
.trajetoria.visto li::before { transform: rotate(45deg); opacity: 1; }
html.sem-js .trajetoria::after { transform: none; }
html.sem-js .trajetoria li::before { transform: rotate(45deg); opacity: 1; }

/* ── conversa: a mensagem que o WhatsApp já abre escrita ──────────────────── */

.conversa__lado { display: grid; gap: var(--mz-space-5); }
.previa {
  display: grid; gap: var(--mz-space-3); padding: var(--mz-space-4);
  background: var(--s-surface); border: var(--mz-border-hairline) solid var(--s-line);
  color: var(--s-text); text-decoration: none; font-family: var(--mz-font-sans);
  transition: border-color var(--mz-duration-base) var(--mz-ease-standard);
}
.previa:hover, .previa:focus-visible { border-color: var(--s-line-2); }
.previa__topo { display: flex; justify-content: space-between; gap: var(--mz-space-3); font-size: var(--mz-text-xs); font-weight: var(--mz-weight-semibold); letter-spacing: var(--mz-tracking-wider); text-transform: uppercase; color: var(--s-muted); }
.previa__balao {
  justify-self: end; max-width: 30ch; display: flex; align-items: flex-end; gap: var(--mz-space-2);
  padding: var(--mz-space-3); background: var(--s-bg); border: var(--mz-border-hairline) solid var(--s-line-2);
  font-family: var(--mz-font-serif); font-size: var(--mz-text-base); line-height: var(--mz-leading-snug);
}
.previa__balao .ico { color: var(--s-accent-on-surface); flex: none; }
.previa__acao { justify-self: end; display: inline-flex; align-items: center; gap: var(--mz-space-2); font-size: var(--mz-text-sm); font-weight: var(--mz-weight-semibold); letter-spacing: var(--mz-tracking-wide); text-transform: uppercase; }
.previa__acao .ico { transition: transform var(--mz-duration-base) var(--mz-ease-standard); }
.previa:hover .previa__acao .ico { transform: translateX(4px); }
/* Digita uma vez, quando a conversa entra em cena. */
.previa .previa__texto { clip-path: inset(0 100% 0 0); transition: clip-path 1600ms steps(46, end) 300ms; }
.previa .previa__balao .ico { opacity: 0; transition: opacity var(--mz-duration-slow) var(--mz-ease-enter) 2000ms; }
.previa.digitado .previa__texto { clip-path: inset(0 0 0 0); }
.previa.digitado .previa__balao .ico { opacity: 1; }
html.sem-js .previa__texto { clip-path: none; }
html.sem-js .previa__balao .ico { opacity: 1; }

@media (max-width: 48rem) {
  .ponte { margin-top: var(--mz-space-7); font-size: var(--mz-text-xl); }
  .origem { justify-self: stretch; max-width: none; }
  .origem__base li { font-size: var(--mz-text-xs); }
  /* No celular o exemplo sai da coluna do texto e usa a largura do passo inteiro. */
  .exemplo { margin-left: calc(-3rem - var(--mz-space-4)); max-width: none; }
  .dia__agenda { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .visor__cena { top: 32px; left: 30px; right: auto; }
  .plano-tab__linha { grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 0.7fr); gap: var(--mz-space-2); }
  .perdas li { grid-template-columns: minmax(0, 1fr); gap: var(--mz-space-1); }
  .perdas li span { font-size: var(--mz-text-sm); }
  .trajetoria li { flex-direction: column; }
  .trajetoria span { margin-top: 2px; }
  .previa__balao { max-width: none; }
  .heroi__bio { flex-direction: column; align-items: flex-start; }
  .cabeca__acao { justify-self: start; }
}

/* ── revelação por rolagem ───────────────────────────────────────────────── */

.revela { opacity: 0; transform: translateY(20px); transition: opacity var(--mz-duration-slow) var(--mz-ease-enter), transform var(--mz-duration-slow) var(--mz-ease-enter); transition-delay: calc(var(--i, 0) * 70ms); }
.revela.visto { opacity: 1; transform: none; }
.revela--esq { transform: translateX(-24px); }
.revela--escala { transform: scale(0.96); }
html.sem-js .revela { opacity: 1; transform: none; }

/* ── movimento reduzido ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .revela { opacity: 1; transform: none; }
  .heroi h1 .palavra > span { transform: none; }
  .heroi__retrato img, .heroi__retrato::before, .simbolo-fundo, .moldura img { transform: none; }
  .letreiro__trilha { animation: none; flex-wrap: wrap; width: auto; }
  .letreiro__trilha ul:last-child { display: none; }
  .esferas .plano, .esferas .rotulo { transform: none; opacity: 1; }
  .esferas .leitura { stroke-dashoffset: 0; }
  .esferas .no { opacity: 1; }
  .popup__livro .capa { animation: none; }
  .perdas li, .perdas li em { opacity: 1; transform: none; }
  .visor__cena > span, .visor__rec::before, .origem__fios path { animation: none !important; }
  .ia__pergunta, .previa .previa__texto { clip-path: none; }
}

/* ── telas menores ───────────────────────────────────────────────────────── */

/* Desktop estreito: o menu inteiro ainda cabe, com respiro menor. */
@media (max-width: 72rem) {
  .topo__barra { gap: var(--mz-space-5); }
  .menu__lista { gap: var(--mz-space-4); }
  .menu__lista > li > a { font-size: var(--mz-text-sm); }
  .topo__cta .ico { display: none; }
  .topo__frase { display: none; }
  .topo__util-dentro { justify-content: flex-end; }
}

@media (max-width: 64rem) {
  .heroi__grade { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--mz-space-6); }
  .rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .simbolo-fundo { width: 60vw; }
  .servico { grid-template-columns: var(--mz-icon-xl) minmax(0, 1fr) auto; grid-template-areas: "ico titulo acao" ". texto texto"; row-gap: var(--mz-space-2); }
  .servico__ico { grid-area: ico; }
  .servico h3 { grid-area: titulo; }
  .servico p { grid-area: texto; max-width: 60ch; }
  .servico .ligacao { grid-area: acao; }
  .para-quem { grid-template-columns: auto minmax(0, 1fr); }
  .para-quem .ligacao { grid-column: 2; justify-self: start; }
}

/* Abaixo de 1024px: menu em painel de tela cheia. */
@media (max-width: 63.98rem) {
  .topo { --util-h: 0px; }
  .topo__util, .topo__cta, .painel, .menu__seta { display: none; }
  .topo__barra { height: 64px; justify-content: space-between; }
  .menu__abrir { display: inline-flex; }
  .assinatura { font-size: var(--mz-text-lg); }
  .topo__barra .assinatura, .menu__abrir { position: relative; z-index: 62; }

  .menu {
    position: fixed; inset: 0; z-index: 60;
    padding: calc(64px + var(--mz-space-4)) var(--mz-space-4) calc(var(--mz-space-5) + env(safe-area-inset-bottom, 0px));
    background: var(--mz-tinta); color: var(--mz-branco);
    flex-direction: column; align-items: stretch; justify-content: space-between;
    transform: translateY(-100%); visibility: hidden;
    transition: transform var(--mz-duration-slow) var(--mz-ease-standard), visibility 0s linear var(--mz-duration-slow);
  }
  .menu.aberto { transform: none; visibility: visible; transition-delay: 0s; }
  .menu__lista { flex-direction: column; align-items: stretch; gap: 0; height: auto; border-top: var(--mz-border-hairline) solid var(--mz-tinta-linha); }
  .menu__lista > li { height: auto; border-bottom: var(--mz-border-hairline) solid var(--mz-tinta-linha); opacity: 0; transform: translateY(12px); transition: opacity var(--mz-duration-slow) var(--mz-ease-enter), transform var(--mz-duration-slow) var(--mz-ease-enter); }
  .menu.aberto .menu__lista > li { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 50ms + 120ms); }
  .menu__lista > li > a { width: 100%; min-height: 60px; font-size: var(--mz-text-xl); font-weight: var(--mz-weight-bold); letter-spacing: var(--mz-tracking-tight); color: var(--mz-branco); }
  .menu__lista > li > a::after { bottom: -1px; }
  .menu__rodape { display: flex; flex-direction: column; gap: var(--mz-space-4); }
  .menu__rodape .botao { width: 100%; }
  body.menu-aberto { overflow: hidden; }
}

@media (max-width: 48rem) {
  :root { --sec-y: var(--mz-space-7); --sec-y-amplo: var(--mz-space-8); --cabeca-y: var(--mz-space-5); }
  .faixa { padding-left: var(--mz-space-4); padding-right: var(--mz-space-4); }
  h1 { font-size: var(--mz-text-3xl); }
  h2, .afirmacao h2, .conversa h2 { font-size: var(--mz-text-2xl); }
  .rubrica { letter-spacing: var(--mz-tracking-wider); }
  .heroi { padding-top: var(--mz-space-6); padding-bottom: var(--mz-space-7); }
  .heroi h1 { font-size: var(--mz-text-2xl); }
  .heroi__grade { grid-template-columns: 1fr; gap: var(--mz-space-6); }
  .heroi__retrato { max-width: 12rem; justify-self: start; }
  .heroi__retrato::before { inset: var(--mz-space-3) calc(-1 * var(--mz-space-3)) calc(-1 * var(--mz-space-3)) var(--mz-space-3); }
  .heroi__bio { margin-top: var(--mz-space-6); }
  .heroi__rolar { display: none; }
  .simbolo-fundo { width: 90vw; right: -30%; opacity: 0.035; }
  .acoes .botao { width: 100%; }
  .cartao { padding: var(--mz-space-4); }

  .janelas { grid-template-columns: 1fr; }
  .cabeca, .afirmacao__grade, .metodo, .dividido, .sobre, .conversa__grade { grid-template-columns: 1fr; gap: var(--mz-space-5); }
  .dividido--inverso > :first-child { order: 0; }
  .metodo__fixo, .sobre__foto { position: static; }
  .afirmacao__lado { border-left: 0; padding-left: 0; border-top: var(--mz-border-hairline) solid var(--s-line); padding-top: var(--mz-space-5); }
  .passo { grid-template-columns: 3rem minmax(0, 1fr); }
  .servico { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ico" "titulo" "texto" "acao"; row-gap: var(--mz-space-3); padding-left: 0; padding-right: 0; }
  .servico::before { inset: 0 calc(-1 * var(--mz-space-4)); }
  .servico .ligacao { justify-self: start; margin-top: var(--mz-space-1); }
  .para-quem { grid-template-columns: minmax(0, 1fr); padding: var(--mz-space-4); }
  .para-quem__porte { padding: 0 0 var(--mz-space-4); border-right: 0; border-bottom: var(--mz-border-hairline) solid var(--s-line); }
  .para-quem .ligacao { grid-column: auto; }
  .numero { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .sobre__foto { order: 2; }
  .grade--2 { grid-template-columns: minmax(0, 1fr); }
  .livro-linha { grid-template-columns: minmax(0, 1fr); gap: var(--mz-space-4); padding: var(--mz-space-6) 0; }
  .livro-linha .livro { max-width: 10rem; }
  .livro-linha h2 { font-size: var(--mz-text-xl); }
  .livro-linha .acoes { flex-direction: column; }
  .capa-pagina .simbolo-fundo { display: none; }
  .estante { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mz-space-5) var(--mz-space-3); }
  .capa { padding: var(--mz-space-3); }
  .capa__titulo { font-size: var(--mz-text-base); }
  .moldura--4x5 { max-width: 22rem; }
  .rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mz-space-6) var(--mz-space-4); }
  .rodape__grade > :first-child { grid-column: 1 / -1; }
  .popup__caixa { grid-template-columns: 1fr; }
  .popup__capa { padding: var(--mz-space-5) var(--mz-space-4) var(--mz-space-4); border-right: 0; border-bottom: var(--mz-border-hairline) solid var(--s-line); }
  .popup__livro { max-width: 10rem; }
  .popup__livro .capa__ano { font-size: 0.7rem; letter-spacing: var(--mz-tracking-normal); }
  .popup__texto { padding: var(--mz-space-5) var(--mz-space-4) var(--mz-space-5); }
  .popup__texto h2 { font-size: var(--mz-text-xl); }
  .popup__acoes { margin-top: var(--mz-space-5); }
  .popup__acoes .botao { flex: 1; width: auto; padding: 0 var(--mz-space-3); }
  .esferas { max-width: 20rem; }
}

/* ── blog: releases dos clientes, em formato de revista ──────────────────
 * O release mais recente abre a página em destaque (imagem e texto lado a lado);
 * os anteriores seguem na grade. Releases são gerados por gerar-paginas.py.
 */
.artigos--revista .artigo--destaque { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--mz-space-6); align-items: center; padding-bottom: var(--mz-space-6); border-bottom: var(--mz-border-hairline) solid var(--s-line); }
.artigo__texto { display: flex; flex-direction: column; gap: var(--mz-space-3); }
.artigo__texto .rubrica { margin: 0; }
.artigo--destaque h3 { font-size: var(--mz-text-2xl); }
.artigo--destaque p { font-size: var(--mz-text-base); }
@media (max-width: 48rem) {
  .artigos--revista .artigo--destaque { grid-template-columns: 1fr; gap: var(--mz-space-4); }
}

.release p { font-size: var(--mz-text-lg); line-height: var(--mz-leading-relaxed); }
.release p.miudo { font-size: var(--mz-text-sm); text-transform: uppercase; letter-spacing: var(--mz-tracking-wider); }

/* ── variante clara (D18, pedida pelo cliente em 06/10) ───────────────────
 * "Mais clara e menos pesada". Liga com data-variante="clara" no <html> (variante.js).
 * As faixas escuras passam a papel quente e a tinta vira texto; o vermelho, os botões
 * e as legendas sobre foto ficam como estão. Nada de cor nasce aqui: só tokens.
 */
html[data-variante="clara"] { --faixa-escura-bg: var(--mz-neutro-50); }
html[data-variante="clara"] .faixa--escura,
html[data-variante="clara"] .topo {
  --s-bg-alt:    var(--mz-neutro-100);
  --s-surface:   var(--mz-neutro-0);
  --s-surface-2: var(--mz-neutro-25);
  --s-text:      var(--mz-text);
  --s-body:      var(--mz-text-body);
  --s-muted:     var(--mz-text-muted);
  --s-line:      var(--mz-neutro-200);
  --s-line-2:    var(--mz-neutro-300);
  --s-accent:    var(--mz-accent);
  --s-accent-on-surface: var(--mz-accent);
  --s-textura:   var(--mz-tinta);
}
html[data-variante="clara"] .topo { --s-bg: var(--mz-neutro-0); }
html[data-variante="clara"] .topo__util { background: var(--mz-neutro-25); }
html[data-variante="clara"] .painel { background: var(--mz-neutro-0); }
html[data-variante="clara"] .painel__destaque { background: var(--mz-neutro-25); }
html[data-variante="clara"] .painel__destaque .ico--topo { color: var(--mz-accent); }
html[data-variante="clara"] .topo-voltar { background: var(--mz-neutro-0); color: var(--mz-text); border-color: var(--mz-neutro-200); }
@media (max-width: 63.98rem) {
  html[data-variante="clara"] .menu { background: var(--mz-neutro-0); color: var(--mz-text); }
  html[data-variante="clara"] .menu__lista,
  html[data-variante="clara"] .menu__lista > li { border-color: var(--mz-neutro-200); }
  html[data-variante="clara"] .menu__lista > li > a { color: var(--mz-text); }
}

/* Seletor de variante: só na fase de validação (variante.js, MOSTRAR_SELETOR). Flutua, então
   pode ter sombra — a mesma exceção do pop-up. */
.seletor-variante {
  position: fixed; left: var(--mz-space-4); bottom: var(--mz-space-4); z-index: 45;
  display: flex; border: var(--mz-border-hairline) solid var(--mz-neutro-700); background: var(--mz-tinta);
  font-family: var(--mz-font-sans); font-size: var(--mz-text-xs); letter-spacing: var(--mz-tracking-wider); text-transform: uppercase;
  box-shadow: var(--mz-shadow-overlay);
}
.seletor-variante span { padding: 0 var(--mz-space-3); display: inline-flex; align-items: center; color: var(--mz-cinza-claro); }
.seletor-variante a { display: inline-flex; align-items: center; min-height: var(--mz-control-sm); padding: 0 var(--mz-space-3); color: var(--mz-neutro-0); text-decoration: none; font-weight: var(--mz-weight-semibold); }
.seletor-variante a[aria-current] { background: var(--mz-vermelho-500); }
.seletor-variante a:not([aria-current]):hover { background: var(--mz-neutro-800); }