/* Walk · site v4 · opção 1
   Cor e voz: material-site/identidade.md. Grade de 12 colunas, calha 16, margem 32; medidas a 1920×1080. */

/* ---------- fontes ---------- */
@font-face { font-family: "Switzer"; src: url("../fonts/switzer-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/switzer-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  /* cor: material-site/identidade.md (não muda entre versões) */
  --fundo: #08080a;
  --fundo-2: #101014;
  --linha: #1e1e22;
  --tinta: #fafafa;
  --tinta-2: #a1a1a6;
  --bone: #f2efe6;
  --sinal: #EE3A0C;
  /* derivados por opacidade, para as seções claras (não são cores novas) */
  --tinta-clara-2: rgba(8, 8, 10, .64);   /* ≈ #5c5c5f sobre bone: 5,8:1 */
  --borda-clara: rgba(8, 8, 10, .2);      /* divisor das seções claras */

  /* vozes */
  --sans: "Switzer", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --serifa: "Instrument Serif", Georgia, serif;

  /* escala medida (96 · 64 · 32 · 20 · 16 · 14) */
  --h1: clamp(46px, 5vw, 96px);
  --h2: clamp(36px, 3.334vw, 64px);
  --h4: clamp(24px, 1.667vw, 32px);

  /* ritmo */
  --margem: 32px;
  --calha: 16px;
  --sec: clamp(64px, 6.667vw, 128px);
  --topo-h: 104px;

  /* o módulo do W: a célula do ASCII e da grade */
  --modulo: calc(12px * var(--vh-escala, 1));

  /* curvas da Walk */
  --curva: cubic-bezier(0.9, 0, 0.1, 1);
  --macia: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (max-width: 1023px) { :root { --margem: 16px; --topo-h: 72px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--tinta);
  font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 24px;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
::selection { background: var(--sinal); color: var(--fundo); }
:focus-visible { outline: 2px solid var(--sinal); outline-offset: 3px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: fixed; left: 16px; top: -60px; z-index: 10000; background: var(--sinal); color: var(--fundo); padding: 8px 12px; font-family: var(--mono); font-size: 14px; text-transform: uppercase; }
.pular:focus { top: 16px; }

/* ---------- grade: 12 × 140, calha 16, margem 32 ---------- */
.recipiente { margin: 0 var(--margem); max-width: 1920px; position: relative; }
@media (min-width: 1984px) { .recipiente { margin: 0 auto; padding: 0 var(--margem); } }
.grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--calha); }

/* ---------- tipografia ---------- */
.t-h1 { font-size: var(--h1); line-height: 1.1; letter-spacing: -0.035em; font-weight: 400; }
.t-h2 { font-size: var(--h2); line-height: 1.125; letter-spacing: -0.05em; font-weight: 500; }
.t-h4 { font-size: var(--h4); line-height: 1.25; letter-spacing: -0.025em; font-weight: 500; }
.t-mono { font-family: var(--mono); font-size: 16px; line-height: 24px; letter-spacing: -0.02em; text-transform: uppercase; }
.t-mono-sm { font-family: var(--mono); font-size: 14px; line-height: 21px; letter-spacing: -0.02em; text-transform: uppercase; }
/* a palavra-emoção: uma por tela, Instrument Serif itálico, minúscula, em sinal */
.emocao { font-family: var(--serifa); font-style: italic; font-weight: 400; color: var(--sinal); letter-spacing: -0.02em; padding-right: .04em; }
.rotulo-secao { font-family: var(--mono); font-size: 16px; line-height: 24px; letter-spacing: 0.025em; text-transform: uppercase; color: var(--sinal); white-space: nowrap; }
[data-tema="claro"] .rotulo-secao { color: var(--fundo); } /* sinal sobre bone só a partir de 48 px (3,48:1) */
.quadrado { display: inline-block; flex-shrink: 0; width: 8px; height: 8px; background: var(--sinal); }
.quadrado--12 { width: 12px; height: 12px; }
.quadrado--pulso { animation: pulso 2s linear infinite; }
@keyframes pulso { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.status { display: flex; align-items: flex-start; gap: 8px; color: var(--tinta-2); }
.status .quadrado { margin-top: 6px; }

/* ---------- temas por seção ---------- */
[data-tema="escuro"] { background: var(--fundo); color: var(--tinta); }
[data-tema="claro"] { background: var(--bone); color: var(--fundo); }

/* ---------- link sublinhado ---------- */
.sublinha { position: relative; display: inline-block; width: fit-content; }
.sublinha::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: currentColor; transform-origin: right; transition: transform .7s var(--macia); }
.sublinha:hover::after { transform: scaleX(0); }
@media (hover: hover) { .sublinha:hover::after { animation: sublinha .7s var(--macia) forwards; } }
@keyframes sublinha { 0% { transform: scaleX(1); transform-origin: right; } 45% { transform: scaleX(0); transform-origin: right; } 46% { transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } }

/* ---------- botão: rótulo + quadrado "+" (40 px), mono 14/500 ---------- */
.botao { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; font-family: var(--mono); font-size: 14px; font-weight: 500; line-height: 20px; text-transform: uppercase; white-space: nowrap; color: var(--fundo); --bg: var(--sinal); }
.botao--escuro { --bg: var(--fundo); color: var(--bone); }
.botao--claro { --bg: var(--tinta); color: var(--fundo); }
.botao__rotulo, .botao__mais { display: flex; align-items: center; justify-content: center; height: 40px; background: var(--bg); transition: transform .5s var(--macia); }
.botao__rotulo { padding: 0 12px; }
.botao__mais { width: 40px; flex-shrink: 0; }
.botao__mais svg { width: 12px; height: 12px; }
.botao__mais:first-child { position: absolute; left: 0; top: 0; transform: scale(0); }
.botao:hover .botao__mais:first-child, .botao:focus-visible .botao__mais:first-child { transform: scale(1); }
.botao:hover .botao__rotulo, .botao:focus-visible .botao__rotulo { transform: translateX(46px); }
.botao:hover .botao__mais--fim, .botao:focus-visible .botao__mais--fim { transform: translateX(46px) scale(0); }
.botao--cheio { width: 100%; }
.botao--cheio .botao__rotulo { flex: 1; }
.botao--cheio:hover .botao__rotulo { transform: none; margin-left: 46px; }

/* ---------- 01 · topo e menu ---------- */
.topo { position: fixed; inset: 0 0 auto; z-index: 9999; padding-top: 16px; background: none !important; color: var(--tinta); transition: transform .7s var(--macia); pointer-events: none; }
.topo > * { pointer-events: auto; }
.topo.is-fora { transform: translateY(-110%); }
.topo__faixa { transition: padding .7s var(--macia), background-color .7s var(--macia); }
.topo.is-rolado .topo__faixa { padding: 0 16px; background: rgba(16, 16, 20, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.topo[data-tema="claro"] { color: var(--fundo); }
.topo[data-tema="claro"].is-rolado .topo__faixa { background: color-mix(in srgb, var(--bone) 86%, var(--fundo)); }
.topo.is-aberto .topo__faixa { background: var(--fundo-2); padding: 0 16px; }
.topo.is-aberto { color: var(--tinta); }
.topo__barra { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 16px 0; }
.topo__marca { position: relative; display: block; height: 20px; width: 90px; overflow: hidden; justify-self: start; }
.topo__marca-rolo { display: flex; flex-direction: column; gap: 4px; transition: transform .7s var(--macia); }
.topo__marca img { height: 20px; width: auto; }
.topo__marca:hover .topo__marca-rolo { transform: translateY(-24px); }
.so-claro { display: none !important; }
.topo[data-tema="claro"]:not(.is-aberto) .so-claro { display: block !important; }
.topo[data-tema="claro"]:not(.is-aberto) .so-escuro { display: none !important; }
.topo__menu { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 16px; line-height: 16px; letter-spacing: -0.025em; text-transform: uppercase; justify-self: center; }
.topo__menu-rotulo { position: relative; height: 16px; width: 3.5em; overflow: hidden; }
.topo__menu-rolo { display: flex; flex-direction: column; gap: 2px; transition: transform .7s var(--macia); }
.topo__menu-rolo span { display: block; height: 16px; }
.topo.is-aberto .topo__menu-rolo { transform: translateY(-18px); }
.topo__menu-icone { position: relative; width: 16px; height: 16px; }
.topo__menu-icone i { position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: currentColor; transition: transform .5s var(--macia); }
.topo__menu-icone i:first-child { transform: translateY(-3px); }
.topo__menu-icone i:last-child { transform: translateY(3px); }
.topo.is-aberto .topo__menu-icone i:first-child { transform: rotate(45deg); }
.topo.is-aberto .topo__menu-icone i:last-child { transform: rotate(-45deg); }
.topo__cta { justify-self: end; }

.menu { margin-top: 0; }
.menu[hidden] { display: none; }
.menu__painel { background: var(--fundo-2); color: var(--tinta); padding: 64px; clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--curva); max-height: calc(100svh - 96px); overflow: auto; }
.topo.is-aberto .menu__painel { clip-path: inset(0 0 0 0); }
.menu__grade { row-gap: 32px; }
.menu__nav { grid-column: span 4; display: flex; flex-direction: column; gap: 4px; }
.menu__item { overflow: hidden; }
.menu__item a { display: block; padding: 4px 0; font-size: var(--h2); line-height: 1.125; letter-spacing: -0.05em; font-weight: 500; transition: color .3s, transform .7s var(--macia); }
.menu__item a:hover, .menu__item a[aria-current] { color: var(--sinal); }
.menu__contatos { grid-column: 6 / span 2; display: flex; flex-direction: column; gap: 24px; }
.menu__bloco { display: flex; flex-direction: column; gap: 4px; }
.menu__rotulo { color: var(--tinta-2); }
.menu__status { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.menu__cartoes { grid-column: 8 / span 5; display: flex; gap: 16px; }
.menu__cartao { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.menu__foto { display: block; flex: 1; min-height: 260px; overflow: hidden; background: var(--linha); }
.menu__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--macia); }
.menu__cartao:hover img { transform: scale(1.075); }
.menu__cartao:hover .t-mono-sm { color: var(--sinal); }
html.motion .menu__item a { transform: translateY(110%); }
html.motion .topo.is-aberto .menu__item a { transform: none; }
.topo.is-aberto .menu__item:nth-child(2) a { transition-delay: .05s; }
.topo.is-aberto .menu__item:nth-child(3) a { transition-delay: .1s; }
.topo.is-aberto .menu__item:nth-child(4) a { transition-delay: .15s; }
.topo.is-aberto .menu__item:nth-child(5) a { transition-delay: .2s; }

/* ---------- 02 · hero ---------- */
.hero { position: relative; min-height: 100svh; overflow: hidden; }
.hero__recipiente { padding-top: 52px; min-height: 100svh; }
.hero__grade { min-height: calc(100svh - 52px); }
.hero__texto { grid-column: span 7; position: relative; z-index: 10; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding-bottom: 32px; pointer-events: none; }
.hero__texto a, .hero__texto button { pointer-events: auto; }
.hero__bloco { margin: auto 0; display: flex; flex-direction: column; gap: 32px; max-width: 812px; padding-top: 96px; }
.hero__linha { max-width: 576px; color: var(--tinta-2); }
.hero__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.hero__clientes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; color: var(--tinta-2); font-weight: 500; font-size: 18px; letter-spacing: -0.02em; }
.hero__clientes .t-mono-sm { font-weight: 400; }
.hero__campo { grid-column: 8 / span 5; position: relative; min-height: 100%; }
.campo { width: 100%; height: 100%; }
.campo--hero { position: absolute; inset: 0; }
.fonte-video { position: absolute; width: 2px; height: 2px; opacity: 0; pointer-events: none; }

/* ---------- 03 · números ---------- */
.numeros { padding: var(--sec) 0; }
.numeros__grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--calha); }
.numeros__simbolo { min-height: clamp(300px, 31.4vw, 603px); background: var(--fundo); color: var(--bone); display: flex; flex-direction: column; justify-content: space-between; padding: 32px; }
.numeros__hud { color: var(--tinta-2); }
.numeros__w { width: 46%; margin: 0 auto; }
.numero { min-height: clamp(250px, 31.4vw, 603px); background: var(--tinta); display: flex; flex-direction: column; justify-content: space-between; padding: 32px; cursor: default; }
.numero__valor { display: flex; align-items: flex-start; font-size: var(--h1); line-height: 1.1; letter-spacing: -0.035em; font-weight: 300; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rolo-digito { display: inline-block; height: 1em; line-height: 1em; overflow: hidden; }
.rolo-digito > span { display: flex; flex-direction: column; will-change: transform; }
.rolo-digito > span > span { height: 1em; line-height: 1em; display: block; text-align: center; }
.rolo-fixo { display: inline-block; height: 1em; line-height: 1em; }
.numero__rotulo { max-width: 34ch; }

/* ---------- 04 · como funciona ---------- */
.processo { padding: var(--sec) 0; }
.processo__trilho { position: relative; height: 380vh; padding: var(--sec) 0; }
.processo__palco { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; }
.processo__palco > .recipiente { width: calc(100% - 2 * var(--margem)); }
.processo__miolo { grid-column: 3 / span 8; }
.processo__topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: clamp(32px, 4.4vh, 64px); }
.processo__topo .t-h2 { max-width: 920px; }
.processo__corpo { display: flex; }
.etapas { position: relative; flex: 1.333; display: flex; flex-direction: column; justify-content: center; gap: clamp(16px, 2.6vh, 40px); padding-right: 8%; }
.etapas__marca { position: absolute; left: 28px; top: 8px; width: 12px; height: 12px; background: var(--sinal); transition: transform .7s var(--macia); }
.etapa { padding-left: 56px; opacity: .6; transition: opacity .7s var(--macia); }
/* etapas inativas a 0,6, com o texto em --fundo: 5,1:1 */
.etapa:not(.is-ativa) .etapa__n, .etapa:not(.is-ativa) p { color: var(--fundo); }
.etapa.is-ativa { opacity: 1; }
.etapa__botao { display: flex; align-items: flex-start; gap: 16px; width: 100%; text-align: left; }
.etapa__n { margin-top: 8px; flex-shrink: 0; width: 20ch; font-family: var(--mono); font-size: 13px; line-height: 21px; text-transform: uppercase; letter-spacing: -0.02em; color: var(--tinta-clara-2); }
.etapa h3 { margin-bottom: 8px; }
.etapa p { color: var(--tinta-clara-2); max-width: 46ch; }
.painel { position: relative; flex: 1; aspect-ratio: 4 / 5; max-height: 66vh; overflow: hidden; background: var(--fundo); color: var(--tinta); }
.painel__rolo { display: flex; flex-direction: column; height: 100%; transition: transform .9s var(--curva); }
.painel__quadro { flex: 0 0 100%; height: 100%; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; font-family: var(--mono); font-size: 13px; line-height: 20px; letter-spacing: -0.02em; text-transform: uppercase; }
.painel__cab { display: flex; justify-content: space-between; color: var(--tinta-2); }
.painel__etiqueta { color: var(--fundo); background: var(--tinta-2); padding: 0 6px; }
.painel__grande { font-family: var(--sans); text-transform: none; font-size: clamp(40px, 3.334vw, 64px); line-height: 1; letter-spacing: -0.05em; font-weight: 300; }
.painel__grande small { display: block; margin-top: 12px; font-family: var(--mono); font-size: 13px; letter-spacing: -0.02em; text-transform: uppercase; color: var(--tinta-2); font-weight: 400; }
.painel__linhas li { display: grid; grid-template-columns: 12px 3ch 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--linha); color: var(--tinta-2); }
.painel__linhas li:last-child { border-bottom: 1px solid var(--linha); }
.painel__linhas li b { font-weight: 400; color: var(--tinta); }
.painel__linhas .q { width: 8px; height: 8px; border: 1px solid var(--tinta-2); }
.painel__linhas .feito .q { background: var(--tinta-2); }
.painel__linhas .agora .q { background: var(--sinal); border-color: var(--sinal); }
.painel__linhas .agora { color: var(--tinta); }
.painel__pe { color: var(--tinta-2); text-transform: none; font-family: var(--sans); font-size: 14px; line-height: 20px; letter-spacing: 0; }

/* ---------- 05 · trabalho ---------- */
.trabalho { padding: var(--sec) 0; }
.trabalho > .recipiente { padding: var(--sec) 0; }
.trabalho__lado { grid-column: span 3; }
.trabalho__fixo { position: sticky; top: var(--topo-h); height: calc(100vh - var(--topo-h)); display: flex; flex-direction: column; justify-content: space-between; padding: 32px 0; }
.trabalho__fixo .t-h2 { margin-bottom: 24px; }
.trabalho__linha { color: var(--tinta-2); max-width: 44ch; }
.miniaturas { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.miniatura { display: flex; align-items: center; gap: 12px; }
.miniatura__img { display: grid; place-items: center; width: 128px; aspect-ratio: 16 / 9; overflow: hidden; opacity: .4; transition: opacity .3s; background: var(--fundo-2); font-family: var(--mono); font-size: 12px; color: var(--tinta-2); }
.miniatura__img img { width: 100%; height: 100%; object-fit: cover; }
.miniatura__img--sistema { border: 1px solid var(--linha); }
.miniatura i { width: 8px; height: 8px; background: var(--sinal); opacity: 0; transition: opacity .3s; }
.miniatura.is-ativa .miniatura__img, .miniatura:hover .miniatura__img { opacity: 1; }
.miniatura.is-ativa i { opacity: 1; }
.cartoes { grid-column: 5 / span 8; display: flex; flex-direction: column; gap: 64px; padding: 32px 0; }
.cartao__midia { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--fundo-2); }
.cartao__desloca { position: absolute; left: 0; right: 0; top: -15%; height: 130%; will-change: transform; }
.cartao__desloca img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--macia); }
.cartao__midia:hover .cartao__desloca img { transform: scale(1.04); }
.cartao__sistema { display: flex; flex-direction: column; justify-content: space-between; padding: calc(15% / 1.3 + 32px) 40px; border: 1px solid var(--linha); }
.cartao__hud { color: var(--tinta-2); }
.cartao__modulos li { font-size: clamp(22px, 2.2vw, 40px); line-height: 1.25; letter-spacing: -0.035em; font-weight: 300; padding: 6px 0; border-bottom: 1px solid var(--linha); }
.cartao__modulos li::before { content: ""; display: inline-block; width: .28em; height: .28em; margin: 0 .5em .12em 0; background: var(--tinta-2); vertical-align: middle; }
.cartao__midia:hover .cartao__modulos li::before { background: var(--sinal); }
.cartao__ficha { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-top: 16px; }
.cartao__nome { font-family: var(--mono); font-weight: 400; font-size: 20px; line-height: 32px; letter-spacing: -0.02em; text-transform: uppercase; }
.cartao__linha { margin-top: 2px; color: var(--tinta-2); font-size: 14px; line-height: 20px; max-width: 64ch; }
.cartao__tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; color: var(--tinta-2); font-family: var(--mono); font-size: 14px; line-height: 21px; letter-spacing: -0.02em; text-transform: uppercase; text-align: right; flex-shrink: 0; max-width: 46%; padding-top: 5px; }

/* ---------- 06 · os verbos ---------- */
.verbos { padding: var(--sec) 0; }
.verbos__topo { margin-bottom: 64px; }
.verbos__titulo { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.verbos__titulo .t-h2 { max-width: 60%; }
.verbos__selo { display: flex; align-items: center; gap: 8px; margin-top: 32px; }
.verbos__grade { row-gap: 0; }
.verbo { grid-column: span 4; display: block; min-height: 177px; }
.verbo__nome { position: relative; display: flex; align-items: center; padding: 32px 0 20px; font-family: var(--mono); font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: -0.02em; text-transform: uppercase; border-bottom: 1px solid var(--borda-clara); }
.verbo__nome .quadrado { position: absolute; left: 0; top: 38px; transform: scale(0); transition: transform .5s var(--macia); }
.verbo__nome span:last-child { transition: transform .5s var(--macia); }
.verbo:hover .verbo__nome .quadrado, .verbo:focus-visible .verbo__nome .quadrado { transform: scale(1); }
.verbo:hover .verbo__nome span:last-child, .verbo:focus-visible .verbo__nome span:last-child { transform: translateX(24px); }
.verbo p { color: var(--tinta-clara-2); max-width: 66.666%; padding-top: 20px; }
.verbo .verbo__hud { padding: 12px 0 32px; color: var(--tinta-clara-2); font-size: 12px; line-height: 18px; max-width: 90%; }
.verbo p:last-child:not(.verbo__hud) { padding-bottom: 32px; }

/* ---------- 07 · perguntas ---------- */
.perguntas { padding: clamp(64px, 5vw, 96px) 0; }
.perguntas__lado { grid-column: span 4; }
.perguntas__lado .t-h2 { position: sticky; top: var(--topo-h); padding: 32px 0; }
.perguntas__lista { grid-column: 6 / span 6; }
.pergunta { border-bottom: 1px solid var(--linha); }
.pergunta h3 { font: inherit; }
.pergunta__botao { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 16px; padding: 24px 0; text-align: left; color: var(--tinta-2); font-family: var(--mono); font-size: 16px; line-height: 24px; letter-spacing: -0.02em; text-transform: uppercase; transition: color .3s; }
.pergunta__botao:hover, .pergunta__botao[aria-expanded="true"] { color: var(--tinta); }
.pergunta__botao i { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.pergunta__botao i::before, .pergunta__botao i::after { content: ""; position: absolute; left: 0; right: 0; top: 7.5px; height: 1px; background: currentColor; transition: transform .5s var(--macia); }
.pergunta__botao i::after { transform: rotate(90deg); }
.pergunta__botao[aria-expanded="true"] i::after { transform: rotate(0); }
.pergunta__resposta { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--macia); }
.pergunta__resposta > div { overflow: hidden; }
.pergunta__resposta p { padding-bottom: 24px; max-width: 66.666%; color: var(--tinta-2); }
.pergunta.is-aberta .pergunta__resposta { grid-template-rows: 1fr; }
html:not(.js) .pergunta__resposta { grid-template-rows: 1fr; }

/* ---------- 08 · começar ---------- */
.comecar { position: relative; z-index: 2; padding: var(--sec) 0; }
.comecar__esq { grid-column: span 6; display: flex; flex-direction: column; gap: 80px; }
.comecar__foto { aspect-ratio: 16 / 9; overflow: hidden; background: var(--fundo); }
.comecar__foto img { width: 100%; height: 100%; object-fit: cover; }
.comecar__dir { grid-column: 8 / span 4; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 48px; }
.comecar__contato a { border-bottom: 1px solid currentColor; }
.comecar__acoes { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }

/* ---------- 09 · rodapé ---------- */
.rodape { position: relative; z-index: 1; min-height: 100svh; overflow: hidden; padding-top: 48px; color: var(--tinta); }
.campo--rodape { position: absolute; left: 0; right: 0; top: 12.5%; height: 87.5%; z-index: 1; pointer-events: none; 
  /* some no topo (onde estão as colunas) e abre um vão no meio (onde está o © 2026) */
  -webkit-mask-image: radial-gradient(ellipse 22% 13% at 50% 34%, transparent 45%, #000 100%), linear-gradient(to bottom, transparent 0, #000 22%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(ellipse 22% 13% at 50% 34%, transparent 45%, #000 100%), linear-gradient(to bottom, transparent 0, #000 22%);
  mask-composite: intersect; }
.rodape__conteudo { position: relative; z-index: 3; display: flex; flex-direction: column; min-height: calc(100svh - 48px); pointer-events: none; }
.rodape__conteudo a, .rodape__conteudo button, .rodape__conteudo input { pointer-events: auto; }
.rodape__grade { row-gap: 48px; }
.rodape__form { grid-column: span 3; display: flex; flex-direction: column; gap: 16px; }
.form { display: flex; flex-direction: column; gap: 6px; }
.rodape__titulo { font-weight: 500; margin-bottom: 8px; }
.form input { width: 100%; height: 40px; padding: 8px 12px; font: inherit; font-size: 14px; line-height: 20px; color: var(--tinta); background: var(--fundo-2); border: 1px solid var(--linha); border-radius: 0; }
.form input::placeholder { color: var(--tinta-2); }
.form input:focus-visible { outline: 2px solid var(--sinal); outline-offset: 0; }
.form input[aria-invalid="true"] { border-color: var(--sinal); }
.form__ajuda { font-size: 14px; line-height: 20px; color: var(--tinta-2); }
.rodape__status { display: flex; flex-direction: column; gap: 4px; }
.rodape__nav { grid-column: 6 / span 2; }
.rodape__nav ul { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rodape__nav a { font-family: var(--mono); font-size: 16px; line-height: 24px; letter-spacing: -0.02em; text-transform: uppercase; color: var(--tinta-2); transition: color .3s; }
.rodape__nav a:hover { color: var(--tinta); }
.rodape__direto { grid-column: 10 / span 3; display: flex; flex-direction: column; gap: 16px; }
.rodape__links { display: flex; flex-direction: column; gap: 4px; color: var(--tinta-2); font-size: 18px; line-height: 24px; }
.rodape__links .sublinha:hover { color: var(--tinta); }
.rodape__atalhos { display: flex; flex-direction: column; gap: 4px; color: var(--tinta-2); }
.rodape__atalhos button { display: flex; align-items: center; gap: 6px; text-transform: uppercase; opacity: .85; transition: opacity .3s; }
.rodape__atalhos button:hover, .rodape__atalhos button[aria-pressed="true"] { opacity: 1; color: var(--tinta); }
kbd { font-family: var(--mono); background: var(--fundo-2); border: 1px solid var(--linha); padding: 2px 6px; }
.rodape__base { margin-top: auto; padding: 12vh 0 30vw; display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--tinta-2); }
.rodape__marca { position: absolute; left: var(--margem); right: var(--margem); bottom: -1.2vw; width: calc(100% - 2 * var(--margem)); height: auto; z-index: 2; color: var(--linha); pointer-events: none; }

/* ---------- grade sobreposta (atalho G) ---------- */
.grade-sobreposta { position: fixed; inset: 0; z-index: 9998; pointer-events: none; display: none; background-image: linear-gradient(to right, rgba(238, 58, 12, .14) 1px, transparent 1px), linear-gradient(to bottom, rgba(238, 58, 12, .14) 1px, transparent 1px); background-size: var(--modulo) var(--modulo); }
.grade-sobreposta .recipiente, .grade-sobreposta .grade { height: 100%; }
.grade-sobreposta i { background: rgba(238, 58, 12, .06); border-left: 1px solid rgba(238, 58, 12, .3); border-right: 1px solid rgba(238, 58, 12, .3); }
html.com-grade .grade-sobreposta { display: block; }

/* ---------- linhas divididas (máscara e wipe) ---------- */
.linha-mascara { display: block; overflow: clip; padding-bottom: .08em; margin-bottom: -.08em; }
.linha-mascara > span { display: block; }
.linha-wipe { position: relative; display: inline-block; white-space: nowrap; }
.linha-wipe__a, .linha-wipe__b { position: absolute; inset: -0.1em; transform: scaleX(0); transform-origin: left; pointer-events: none; }
.linha-wipe__a { background: var(--sinal); }
.linha-wipe__b { background: currentColor; }

html.motion .linha-mascara > span { transform: translateY(110%); }
html.motion .is-visto .linha-mascara > span { animation: sobeLinha 1.4s var(--macia) forwards; animation-delay: calc(var(--i, 0) * .08s + .25s); }
@keyframes sobeLinha { from { transform: translateY(110%); } to { transform: translateY(0); } }

html.motion .linha-wipe__txt { opacity: 0; }
html.motion .is-visto .linha-wipe__txt { animation: aparece 0s linear forwards; animation-delay: calc(var(--i, 0) * .1s + .45s); }
html.motion .is-visto .linha-wipe__a { animation: wipe .9s var(--curva) forwards; animation-delay: calc(var(--i, 0) * .1s); }
html.motion .is-visto .linha-wipe__b { animation: wipe .9s var(--curva) forwards; animation-delay: calc(var(--i, 0) * .1s + .08s); }
@keyframes wipe { 0% { transform: scaleX(0); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; } 50.01% { transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }
@keyframes aparece { to { opacity: 1; } }

/* entradas simples (botões, clientes) e subidas de cartão */
html.motion .entra { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--macia), transform .7s var(--macia); transition-delay: .6s; }
html.motion .is-visto .entra, html.motion .entra.is-visto { opacity: 1; transform: none; }
html.motion .sobe { opacity: 0; transform: translateY(151px); }
html.motion .sobe.is-visto { opacity: 1; transform: none; transition: opacity 1s var(--macia), transform 1.2s var(--macia); transition-delay: calc(var(--i, 0) * .08s); }
html.motion [data-linhas]:not(.is-dividido) { visibility: hidden; }
html.motion-pronto:not(.motion-ok) [data-linhas] { visibility: visible; }
.sem-webgl .hero__campo { background: url("../media/video/walk-hero-poster.jpg") center / cover; opacity: .35; }
/* saída de emergência: se o JS não assumir em 2,5 s, tudo aparece */
html.motion-pronto:not(.motion-ok) .linha-mascara > span,
html.motion-pronto:not(.motion-ok) .linha-wipe__txt,
html.motion-pronto:not(.motion-ok) .entra,
html.motion-pronto:not(.motion-ok) .sobe { opacity: 1 !important; transform: none !important; }

/* ---------- celular e tablet ---------- */
.cta-fixo { display: none; }
@media (max-width: 1023px) {
  .topo__cta { display: none; }
  .topo__barra { grid-template-columns: 1fr auto; }
  .topo__menu { justify-self: end; }
  .menu__painel { padding: 32px 24px 96px; min-height: calc(100svh - 72px); }
  .campo--rodape { opacity: .45; }
  .menu__nav, .menu__contatos, .menu__cartoes { grid-column: 1 / -1; }
  .menu__cartoes { display: none; }
  .cta-fixo { display: flex; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9990; }
  .cta-fixo .botao { width: 100%; }
  .cta-fixo .botao__rotulo { flex: 1; }

  .hero__texto { grid-column: 1 / -1; }
  .hero__campo { position: absolute; inset: 0; opacity: .55; }
  .hero__bloco { padding-top: 40vh; }
  .hero__clientes { font-size: 15px; gap: 6px 14px; padding-bottom: 88px; }

  .numeros__grade { grid-template-columns: 1fr 1fr; }
  .numeros__simbolo, .numero { min-height: 300px; padding: 20px; }
  .numero__valor { font-size: clamp(40px, 11vw, 72px); }

  .processo__trilho { height: auto; padding: 0; }
  .processo__palco { position: static; height: auto; display: block; }
  .processo__miolo { grid-column: 1 / -1; }
  .processo__topo { flex-direction: column; align-items: flex-start; margin-bottom: 32px; }
  .processo__corpo { flex-direction: column; gap: 40px; }
  .etapas { padding-right: 0; gap: 32px; }
  .etapas__marca { display: none; }
  .etapa { opacity: 1; padding-left: 0; }
  .etapa__botao { flex-direction: column; gap: 4px; cursor: default; }
  .painel { max-height: none; }

  .trabalho > .recipiente { padding: 0; }
  .trabalho__lado { grid-column: 1 / -1; }
  .trabalho__fixo { position: static; height: auto; gap: 24px; padding: 0 0 40px; }
  .miniaturas { display: none; }
  .cartoes { grid-column: 1 / -1; gap: 48px; padding: 0; }
  .cartao__ficha { flex-direction: column; gap: 8px; }
  .cartao__tags { justify-content: flex-start; text-align: left; max-width: none; padding-top: 0; }
  .cartao__nome { font-size: 16px; line-height: 24px; }
  .cartao__sistema { padding: calc(15% / 1.3 + 16px) 20px; }
  .cartao__modulos li { font-size: 15px; padding: 3px 0; }

  .verbos__titulo { flex-direction: column; align-items: flex-start; }
  .verbos__titulo .t-h2 { max-width: none; }
  .verbo { grid-column: 1 / -1; }
  .verbo p { max-width: none; }

  .perguntas__lado, .perguntas__lista { grid-column: 1 / -1; }
  .perguntas__lado .t-h2 { position: static; padding: 0 0 24px; }
  .pergunta__resposta p { max-width: none; }

  .comecar__esq, .comecar__dir { grid-column: 1 / -1; }
  .comecar__esq { gap: 32px; margin-bottom: 40px; }
  .comecar__dir { gap: 32px; }

  .rodape__form, .rodape__nav, .rodape__direto { grid-column: 1 / -1; }
  .rodape__nav ul { align-items: flex-start; }
  .rodape__base { padding-bottom: 40vw; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .numeros__grade { grid-template-columns: repeat(4, 1fr); }
  .verbo { grid-column: span 6; }
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .quadrado--pulso { animation: none; }
}
html.pausado *, html.pausado *::before, html.pausado *::after { animation-play-state: paused !important; }