/* Walk Productions · site v4 · versão 2
   Medidas: as da captura de referência (viewport 1920). Cor: identidade da Walk. */

@font-face { font-family: "Panchang"; src: url("../fonts/panchang-800.woff2") format("woff2"); font-weight: 800; 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-style: italic; font-weight: 400; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  /* cor · Walk (10-walk-site-v3/css/styles.css) */
  --fundo: #08080a;
  --fundo-2: #101014;
  --linha: #1e1e22;
  --tinta: #fafafa;
  --tinta-2: #a1a1a6;
  --bone: #f2efe6;
  --sinal: #EE3A0C;
  --sobre-sinal: #08080a;          /* texto sobre o sinal: 5,0:1 (branco daria 3,84:1) */
  --borda: rgba(250, 250, 250, .18); /* mesma proporção da borda #454545 sobre #1d1d1d da referência */
  --trilho: rgba(250, 250, 250, .3); /* milestones_track da referência: branco a 30% */
  --veu: rgba(8, 8, 10, .5);

  /* tipo · vozes */
  --display: "Panchang", "Arial Black", sans-serif;   /* afirmação (no lugar da Extenda) */
  --sans: "Switzer", Arial, sans-serif;               /* corpo e interface */
  --serifa: "Instrument Serif", Georgia, serif;       /* emoção */
  --mono: "Geist Mono", ui-monospace, monospace;      /* sistema / HUD */

  /* escala: a captura é 1920; tudo que é display acompanha a largura */
  --k: calc(min(100vw, 1920px) / 1920);
  --gutter: 24px;
  --gap: 16px;

  /* movimento */
  --entra: cubic-bezier(.16, 1, .3, 1);
  --curva: cubic-bezier(.9, 0, .1, 1);
  color-scheme: dark;
}

:root[data-theme="claro"] {
  --fundo: #f2efe6;
  --fundo-2: #fafafa;
  --linha: #dcd8cc;
  --tinta: #08080a;
  --tinta-2: #5d5c5a;              /* 5,81:1 sobre o bone */
  --borda: rgba(8, 8, 10, .2);
  --trilho: rgba(8, 8, 10, .3);
  --veu: rgba(8, 8, 10, .5);
  color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 500 16px/1.5 var(--sans);
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  transition: background-color .6s var(--entra), color .6s var(--entra);
  overflow-x: clip;
}
img, video, canvas, svg { 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, p, ul, figure, blockquote { margin: 0; padding: 0; font-weight: inherit; font-size: inherit; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
::selection { background: var(--sinal); color: var(--sobre-sinal); }

.pular { position: fixed; left: 24px; top: -60px; z-index: 2000; background: var(--sinal); color: var(--sobre-sinal); padding: 10px 14px; border-radius: 4px; }
.pular:focus { top: 12px; }

.wrap { margin-inline: max(var(--gutter), calc((100vw - 1872px) / 2)); position: relative; }
.grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }

.espaco { height: clamp(64px, calc(112 * var(--k)), 112px); }
.espaco--24 { height: 24px; }
.espaco--80 { height: clamp(48px, calc(80 * var(--k)), 80px); }

.mono { font-family: var(--mono); font-weight: 500; font-size: 14px; line-height: 1.5; letter-spacing: .03em; text-transform: uppercase; }
.apagado { color: var(--tinta-2); }
.apag { font-weight: inherit; color: var(--tinta-2); }

.t-display { font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: .85; letter-spacing: -.01em; }
/* a Panchang é ~45% mais larga que a Extenda: o display entra a 78% para manter a medida de linha da referência */
.t112 { font-size: clamp(36px, calc(112 * .78 * var(--k)), 87px); }
.t72 { font-size: clamp(34px, calc(72 * var(--k)), 72px); line-height: 1; letter-spacing: -.03em; }
.t32 { font-size: clamp(22px, calc(32 * var(--k)), 32px); line-height: 1.2; letter-spacing: -.01em; }
.t24 { font-size: clamp(19px, calc(24 * var(--k)), 24px); line-height: 1.3; letter-spacing: 0; }
.t20 { font-size: clamp(17px, calc(20 * var(--k)), 20px); line-height: 1.3; letter-spacing: -.01em; }
.t18 { font-size: 18px; line-height: 1.2; letter-spacing: -.01em; }
.t14 { font-size: 14px; line-height: 1.5; letter-spacing: -.01em; }

/* emoção: uma palavra por tela, Instrument Serif itálico em sinal */
.emo { font-family: var(--serifa); font-style: italic; font-weight: 400; text-transform: none; color: var(--sinal); letter-spacing: 0; }
.t-display .emo { font-size: 1.12em; line-height: .7; }
.t72 .emo { font-size: 1.08em; }

/* máscara por palavra (word-mask da referência: y 79 → 0) */
.p-mascara { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em .06em .16em 0; margin: -.1em -.06em -.16em 0; }
.emo .p-mascara { padding-right: .18em; margin-right: -.18em; }
.p-palavra { display: inline-block; }

/* selo REC (no lugar do selo de parceiro da referência) */
.selo { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 2px; background: var(--sinal); color: var(--sobre-sinal); font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.rec { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: rec 1.6s steps(2, jump-none) infinite; }
@keyframes rec { 50% { opacity: .25; } }

/* ---------- botão (button_main_wrap) ---------- */
.btn { position: relative; display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 8px 16px 8px 8px; line-height: 16px; isolation: isolate; }
.btn__fundo { position: absolute; inset: 0; z-index: -1; border-radius: 4px; background: var(--fundo-2); transition: inset .6s var(--entra); }
.btn--sinal { color: var(--sobre-sinal); }
.btn--sinal .btn__fundo { background: var(--sinal); }
.btn__img { width: 32px; height: 32px; border-radius: 2px; overflow: hidden; background: var(--sobre-sinal); color: var(--sinal); display: grid; place-items: center; flex: none; }
.btn__img svg { width: 16px; height: 16px; }
.btn__txt { display: block; overflow: hidden; padding: 4px 0; font-size: 16px; line-height: 1.3; white-space: nowrap; }
.btn__seta { width: 24px; height: 12px; flex: none; }
@media (hover: hover) { .btn:hover .btn__fundo { inset: .125em; } }

/* letras que rolam no hover (btn-animate-chars) */
[data-chars] .c { display: inline-block; text-shadow: 0 1.3em currentColor; transition: transform .6s var(--entra); transition-delay: calc(var(--i) * 12ms); }
[data-chars] .c--sp { width: .25em; }
@media (hover: hover) {
  .btn:hover [data-chars] .c, .rodape__cta:hover [data-chars] .c { transform: translateY(-1.3em) rotate(.001deg); }
}

/* ---------- 01 · menu ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 1000; pointer-events: none; }
.nav__barra { display: flex; align-items: flex-start; justify-content: space-between; padding-top: 24px; }
.nav__logo { pointer-events: auto; display: block; height: 28px; margin-top: 10px; color: var(--tinta); opacity: 0; transition: opacity .2s ease; }
.nav__logo.is-pronto { opacity: 1; }
.nav__logo svg { height: 28px; width: auto; }
@media (hover: hover) { .nav__logo:hover { opacity: .7; } }
.nav__ctrl { display: flex; align-items: flex-start; gap: 8px; pointer-events: auto; }

.menu { width: 220px; border-radius: 4px; overflow: hidden; background: var(--fundo-2); color: var(--tinta); }
.menu__botao { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 48px; padding: 0 12px; line-height: 16px; }
.menu__icone { position: relative; width: 10px; height: 10px; }
.menu__icone::before, .menu__icone::after { content: ""; position: absolute; background: currentColor; transition: transform .6s var(--entra); }
.menu__icone::before { width: 10px; height: 1px; top: 4.5px; left: 0; }
.menu__icone::after { width: 1px; height: 10px; left: 4.5px; top: 0; }
.menu[data-aberto] .menu__icone::after { transform: scaleY(0); }
.menu__painel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--entra); }
.menu[data-aberto] .menu__painel { grid-template-rows: 1fr; }
.menu__dentro { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s .6s; }
.menu[data-aberto] .menu__dentro { visibility: visible; transition-delay: 0s; }
.menu__lista { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 12px; }
.menu__link { display: block; line-height: 22.4px; color: var(--tinta-2); transition: color .2s ease; }
.menu__link.is-atual, .menu__link:hover { color: var(--tinta); }
.menu__idioma { padding-top: 8px; color: var(--tinta-2); font-size: 12px; }
.menu__idioma [aria-current] { color: var(--tinta); }

/* ---------- 02 · hero ---------- */
.hero { position: relative; min-height: max(100svh, 640px); display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 64px; }
.hero__selo-linha { position: absolute; top: 24px; left: 0; right: 0; height: 48px; display: flex; align-items: center; padding-left: calc(126px + 32px); pointer-events: none; z-index: 1001; }
.hero__selo-linha .selo { pointer-events: auto; }

.reel { padding: clamp(110px, calc(240 * var(--k)), 240px) 0 16px; display: flex; justify-content: center; }
.reel__card { position: relative; width: clamp(300px, calc(450 * var(--k)), 450px); display: flex; flex-direction: column; gap: 16px; }
.reel__midia { position: relative; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: var(--fundo-2); }
.reel__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel__ui { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 16px; padding: 24px; color: #fafafa;
  background: linear-gradient(to top, rgba(8, 8, 10, .55), rgba(8, 8, 10, 0)); transform: translateY(16px); opacity: 0; transition: transform .6s var(--entra), opacity .6s var(--entra); }
.reel__card:hover .reel__ui, .reel__card:focus-within .reel__ui { transform: none; opacity: 1; }
.reel__tocar, .reel__tela { position: relative; z-index: 4; width: 24px; height: 24px; flex: none; }
.reel__tocar svg, .reel__tela svg { width: 24px; height: 24px; }
.reel__tocar .i-play { display: none; }
.reel__tocar[data-parado] .i-play { display: block; }
.reel__tocar[data-parado] .i-pausa { display: none; }
.reel__tempo { font-size: 12px; line-height: 1; white-space: nowrap; }
.reel__tempo .apagado { color: rgba(250, 250, 250, .5); }
.reel__linha { position: relative; flex: 1; height: 4.8px; border-radius: 16px; background: rgba(250, 250, 250, .15); overflow: hidden; }
.reel__linha span { position: absolute; inset: 0; background: #fafafa; border-radius: 16px; transform-origin: left; transform: scaleX(0); }
.reel__info { display: flex; justify-content: space-between; align-items: center; height: 28px; font-size: 20px; line-height: 26px; letter-spacing: -.02em; }
.reel__texto { display: inline-flex; align-items: center; gap: 8px; }
.reel__icone { width: 16px; height: 16px; }
.reel__clique { position: absolute; inset: 0; z-index: 2; }

.hero__base { position: relative; z-index: 1; }
.hero__grade { align-items: end; row-gap: 32px; }
.hero__cabeca { grid-column: 1 / span 9; }
.hero__sobre { max-width: 340px; margin-bottom: 32px; color: var(--tinta-2); }
.hero__titulo { font-size: clamp(34px, calc(96 * .78 * var(--k)), 75px); }
.hero__linha { grid-column: 10 / span 3; max-width: 400px; }

.tema { position: fixed; right: 24px; bottom: 13px; z-index: 900; width: 42px; height: 42px; border-radius: 4px; background: var(--fundo-2); color: var(--tinta); display: grid; place-items: center; transition: opacity .6s var(--entra), transform .6s var(--entra), background-color .6s; }
.tema svg { width: 22px; height: 22px; }
.tema.is-fora { opacity: 0; transform: translateX(44px); pointer-events: none; }

/* ---------- 03 · 06 · 08 · cabeças (main-head) ---------- */
.cabeca__titulo { grid-column: 4 / span 7; padding-bottom: 64px; }
.cabeca__sub { grid-column: 8 / span 3; max-width: 456px; margin-bottom: 24px; }

/* ---------- 04 · clientes ---------- */
.logos__dentro { display: flex; flex-direction: column; gap: 24px; }
.logos__titulo { grid-column: 4 / span 9; }
.logos__trilhos { display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.logos__trilho { display: flex; will-change: transform; }
.logos__lista { display: flex; gap: 16px; padding-right: 16px; flex: none; }

.cartao-logo { position: relative; flex: none; width: 240px; aspect-ratio: 2.92 / 1.6; border: 1px solid var(--borda); display: grid; place-items: center; padding: 16px; text-align: center; }
.cartao-logo--largo { width: 480px; aspect-ratio: auto; height: 131.5px; }
.cartao-logo__nome { font-size: 26px; line-height: 1.05; letter-spacing: -.03em; }
.cartao-logo__nome.mono { font-size: 13px; letter-spacing: .04em; color: var(--tinta); max-width: 360px; }
.cartao-logo__svg { width: 150px; height: auto; color: var(--tinta); }
.cartao-logo > i { position: absolute; width: 2px; height: 2px; background: var(--tinta); }
.cartao-logo > i:nth-of-type(1) { top: -1px; left: -1px; }
.cartao-logo > i:nth-of-type(2) { top: -1px; right: -1px; }
.cartao-logo > i:nth-of-type(3) { bottom: -1px; left: -1px; }
.cartao-logo > i:nth-of-type(4) { bottom: -1px; right: -1px; }

/* ---------- 05 · prova conferida ---------- */
.prova__grade { align-items: start; row-gap: 48px; }
.prova__esq { grid-column: 1 / span 3; display: flex; flex-direction: column; align-items: flex-start; }
.prova__meta { display: flex; justify-content: space-between; align-items: baseline; width: 100%; }
.prova__trilho { width: 100%; height: 1px; margin-top: 12px; background: var(--trilho); }
.prova__trilho span { display: block; height: 1px; background: var(--tinta); transform-origin: left; transform: scaleX(0); }
.prova__numeros { display: grid; width: 100%; margin-top: 40px; }
.prova__numero { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 16px; visibility: hidden; }
.prova__numero .t72 { line-height: 1.1; }
.prova__numero.is-ativo { visibility: visible; }
.prova__marcas { display: grid; padding-top: 40px; }
.prova__marca { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .6s var(--entra), visibility 0s .6s; }
.prova__marca.is-ativo { visibility: visible; opacity: 1; transition: opacity .6s var(--entra) .1s, visibility 0s; }
.prova__setas { display: flex; gap: 8px; margin-top: 32px; }
.seta-btn { width: 48px; height: 48px; border-radius: 4px; background: var(--fundo-2); display: grid; place-items: center; transition: background-color .2s; }
.seta-btn svg { width: 16px; height: 8px; }
@media (hover: hover) { .seta-btn:hover { background: var(--linha); } }
.prova__dir { grid-column: 5 / span 6; display: grid; }
.prova__slide { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 64px; visibility: hidden; }
.prova__slide.is-ativo { visibility: visible; }
.prova__slide figcaption { display: flex; flex-direction: column; gap: 12px; }
.linha { display: block; overflow: hidden; padding: .1em 0; margin: -.1em 0; }
.linha > span { display: block; }

/* ---------- 07 · trabalho ---------- */
.trabalho { position: relative; overflow-x: clip; }
.trabalho__fixo { height: 100svh; min-height: 640px; display: flex; flex-direction: column; justify-content: center; }
.trabalho__conteudo { grid-column: 4 / span 9; display: flex; flex-direction: column; gap: clamp(32px, calc(64 * var(--k)), 64px); }
.trabalho__topo { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.trabalho__cabeca { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; }
.trabalho__titulo { text-transform: uppercase; }
.trabalho__w { width: clamp(32px, calc(56 * var(--k)), 56px); height: auto; color: var(--tinta); flex: none; }
.link-seta { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; }
.link-seta svg { width: 24px; height: 12px; }
.link-seta::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .6s var(--entra); }
@media (hover: hover) { .link-seta:hover::after { transform: scaleX(1); transform-origin: left; } }

.trabalho__lista { display: flex; gap: 16px; width: max-content; will-change: transform; }
.obra { position: relative; flex: none; width: clamp(260px, calc(480 * var(--k)), 480px); aspect-ratio: 6 / 7; }
.obra__link { position: absolute; inset: 0; display: block; overflow: hidden; background: var(--fundo-2); border-radius: 0; }
.obra__img { position: absolute; inset: 0; overflow: hidden; }
.obra__img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transform: scale(1.25); will-change: transform; }
.obra__img--esq img { object-position: 12% 20%; }
.obra__link::after { content: ""; position: absolute; inset: 0; background: rgba(8, 8, 10, .2); opacity: 0; transition: opacity .6s var(--entra); pointer-events: none; }
.obra__bloco { position: absolute; inset: 0; padding: 28px; display: flex; flex-direction: column; gap: 28px; }
.obra__bloco-linha { max-width: 24ch; }
.obra__modulos { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--tinta-2); }
.obra__modulos li::before { content: "— "; }
.obra__ficha { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; background: var(--fundo); color: var(--tinta); padding: 14px 16px 16px; border-radius: 4px; }
.obra__etiqueta { font-size: 11px; color: var(--tinta-2); }
.obra__nome { margin-top: 6px; font-size: 20px; line-height: 1.15; letter-spacing: -.02em; }
.obra__extra { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--entra); }
.obra__extra > div { min-height: 0; overflow: hidden; }
.obra__linha { font-size: 15px; line-height: 1.35; color: var(--tinta-2); padding-top: 10px; }
.obra__verbos { display: flex; justify-content: space-between; font-size: 11px; padding-top: 10px; }
@media (hover: hover) {
  .obra__link:hover::after, .obra__link:focus-visible::after { opacity: 1; }
  .obra__link:hover .obra__extra, .obra__link:focus-visible .obra__extra { grid-template-rows: 1fr; }
}
.trabalho__regua { display: flex; height: 24px; }
.trabalho__regua span { position: relative; width: 8px; height: 24px; overflow: hidden; }
.trabalho__regua span::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--tinta-2); }
.trabalho__regua span i { position: absolute; inset: 0 1px 0 0; background: var(--tinta); transform: translateX(-100%); }

/* ---------- 09 · os cinco verbos ---------- */
.verbos__palco { padding: clamp(120px, calc(220 * var(--k)), 220px) 0 clamp(60px, calc(106 * var(--k)), 106px); }
.verbos__fileira { position: relative; }
.verbos__palavras { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.verbos__grupo { position: absolute; inset: 0; }
.verbos__palavra { position: absolute; left: calc((var(--c) - 1) * (100% + var(--gap)) / 12); top: calc(var(--t) * var(--k));
  font-size: calc(96 * var(--k)); line-height: .9; letter-spacing: -.04em; white-space: nowrap; overflow: hidden; padding-bottom: .22em; margin-bottom: -.22em; visibility: hidden; }
.verbos__palavra > span { display: block; }
.verbos__cartoes { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; width: calc(1466 / 1872 * 100%); margin-inline: auto; }
.verbo { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: clamp(420px, calc(557 * var(--k)), 557px); padding: 28px; border-radius: 4px; background: var(--fundo-2); }
.verbo__cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.verbo__cabeca .t32 { line-height: 1.2; }
.verbo__seta { width: 24px; height: 12px; flex: none; transform: translateX(-24px); opacity: 0; transition: transform .6s var(--entra), opacity .6s var(--entra); }
.verbo__detalhe { display: block; margin-top: auto; }
.mascara { display: block; overflow: hidden; }
.mascara > span { display: block; transform: translateY(105%); transition: transform .6s var(--entra); }
.verbo__itens { display: flex; flex-direction: column; font-size: 12px; line-height: 1.6; color: var(--tinta-2); }
.verbo__itens .mascara > span { transform: translateY(30px); }
.verbo__formato { color: var(--tinta); }
.verbo.is-ativo .verbo__seta { transform: none; opacity: 1; }
.verbo.is-ativo .mascara > span { transform: none; }
.verbo.is-ativo .verbo__itens .mascara:nth-child(2) > span { transition-delay: 40ms; }
.verbo.is-ativo .verbo__itens .mascara:nth-child(3) > span { transition-delay: 80ms; }
.verbo.is-ativo .verbo__itens .mascara:nth-child(4) > span { transition-delay: 120ms; }

/* ---------- 10 · cena ASCII (sempre escura: é cena, não superfície) ---------- */
.cena { position: relative; min-height: max(100svh, 640px); overflow: hidden; display: flex; flex-direction: column; color: #fafafa; background: #08080a; }
.cena__fundo { position: absolute; inset: 0; }
.cena__ascii { width: 100%; height: 100%; }
.cena__video { position: absolute; width: 2px; height: 2px; opacity: 0; pointer-events: none; }
.cena__fundo.sem-webgl { background: #08080a url("../media/video/walk-hero-poster.jpg") center / cover no-repeat; }
.cena__veu { position: absolute; inset: 0; background: rgba(8, 8, 10, .5); pointer-events: none; }
.cena__dentro { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; pointer-events: none; }
.cena__bloco { pointer-events: auto; }
.cena__titulo { max-width: calc(1400 * var(--k)); margin-bottom: 40px; }
.cena__linha { max-width: 460px; margin-bottom: 24px; }

/* ---------- 11 · perguntas ---------- */
.perguntas__cta { grid-column: 1 / span 3; }
.perguntas__cta-dentro { position: sticky; top: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.perguntas__img { align-self: stretch; }
.perguntas__img { aspect-ratio: 2 / 2.5; overflow: hidden; background: var(--fundo-2); }
.perguntas__img img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; }
.perguntas__cta p { max-width: 400px; }
.perguntas__lista { grid-column: 5 / span 8; }
.perguntas__titulo { margin-bottom: 40px; }
.faq__item { position: relative; border-bottom: 1px solid var(--borda); isolation: isolate; }
.faq__botao { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 24px 0; text-align: left; transition: padding .6s var(--entra); }
.faq__icone { position: relative; width: 28px; height: 28px; flex: none; }
.faq__icone::before, .faq__icone::after { content: ""; position: absolute; background: currentColor; left: 4px; top: 13.25px; width: 20px; height: 1.5px; transition: transform .6s var(--entra); }
.faq__icone::after { transform: rotate(90deg); }
.faq__botao[aria-expanded="true"] .faq__icone::after { transform: rotate(0deg); }
.faq__resposta { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--entra); }
.faq__resposta > div { min-height: 0; overflow: hidden; }
.faq__resposta p { padding: 16px 16px 32px; max-width: 553px; font-size: 16px; line-height: 1.5; }
.faq__botao[aria-expanded="true"] + .faq__resposta, .faq__item.is-aberto .faq__resposta { grid-template-rows: 1fr; }
.faq__cortina { position: absolute; inset: 0 0 auto; height: 0; background: var(--fundo-2); z-index: -1; transition: height .6s var(--entra); }
@media (hover: hover) {
  .faq__item:hover .faq__botao { padding-inline: 16px; }
  .faq__item:hover .faq__cortina { height: 100%; }
}

/* ---------- 12 · rodapé ---------- */
.rodape { position: relative; background: var(--fundo-2); }
.rodape__topo { padding: clamp(56px, calc(80 * var(--k)), 80px) 0 clamp(64px, calc(112 * var(--k)), 112px); }
.rodape__grade { row-gap: 64px; align-items: stretch; }
.rodape__cta { grid-column: 1 / span 6; position: relative; align-self: end; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; }
.rodape__cta-texto { display: block; overflow: hidden; padding: .22em 0; margin: -.22em 0; white-space: nowrap; }
.rodape__cta-texto .c { text-shadow: 0 1.3em currentColor; }
.rodape__cta-seta { width: 48px; height: 24px; flex: none; transition: transform .6s var(--entra); }
.rodape__cta:hover .rodape__cta-seta { transform: translateX(8px); }
.rodape__cta-linha { position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor; }
.rodape__nav { grid-column: 8 / span 5; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 48px; }
.rodape__nav section:first-child { grid-column: span 2; }
.rodape__nav section:last-child { grid-column: span 3; }
.rodape__rotulo { color: var(--tinta-2); margin-bottom: 32px; }
.rodape__link { display: inline-block; padding: 8px 0; font-size: clamp(24px, calc(32 * var(--k)), 32px); line-height: 1.25; transition: opacity .2s; }
@media (hover: hover) { .rodape__link:hover { opacity: .6; } }

.rodape__base { overflow: hidden; }
.rodape__grade-base { align-items: end; row-gap: 24px; padding-bottom: 16px; color: var(--tinta-2); }
.rodape__grade-base a { transition: color .2s; }
.rodape__grade-base a:hover { color: var(--tinta); }
.rodape__ano { grid-column: 1 / span 3; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.rodape__ano p { padding: 5.6px 0; }
.rodape__direto { grid-column: 4 / span 2; }
.rodape__social { grid-column: 8 / span 3; }
.rodape__direto li, .rodape__social li { padding: 4px 0; }

.rodape__marca { padding-top: 8px; }
.rodape__marca { font-size: var(--marca, 9vw); }
.rodape__marca-fileira { position: relative; background: var(--fundo-2); padding-top: 4px; overflow: hidden; }
.rodape__marca-fileira span { display: block; width: max-content; font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; line-height: .8; white-space: nowrap; font-size: 1em; }
.rodape__marca-fileira--1 { z-index: 1; margin-bottom: -.46em; }
.rodape__marca-fileira--2 { z-index: 2; margin-bottom: -.46em; }
.rodape__marca-fileira--3 { z-index: 3; }

/* modal do vídeo */
.modal-reel { width: min(92vw, 1600px); padding: 0; border: 0; background: #000; color: #fafafa; }
.modal-reel::backdrop { background: rgba(8, 8, 10, .92); }
.modal-reel__video { width: 100%; aspect-ratio: 16 / 9; }
.modal-reel__fechar { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 8px 12px; background: rgba(8, 8, 10, .7); border-radius: 4px; font-size: 12px; }

/* ---------- estado inicial do movimento (só com JS, html.mov) ---------- */
html.mov [data-surge] { opacity: 0; }
html.mov [data-split] { visibility: hidden; }
html.mov [data-split].is-dividido { visibility: visible; }

/* ---------- responsivo (a captura só tem 1920) ---------- */
@media (max-width: 1100px) {
  .grade > * { grid-column: 1 / -1 !important; }
  .hero__selo-linha { display: none; }
  .hero__linha { max-width: 520px; }
  .hero__titulo { font-size: clamp(34px, 7.4vw, 72px); }
  .cabeca__titulo { font-size: clamp(30px, 6vw, 56px); }
  .cabeca__sub { margin-left: auto; }
  .trabalho__conteudo { gap: 32px; }
  .obra { width: clamp(240px, 62vw, 420px); }
  .verbos__palavras { display: none; }
  .verbos__palco { padding: 0; }
  .verbos__cartoes { width: 100%; grid-template-columns: 1fr; }
  .verbo { min-height: 0; }
  .verbo .mascara > span, .verbo .verbo__itens .mascara > span { transform: none; }
  .verbo__seta { transform: none; opacity: 1; }
  .verbo__detalhe { margin-top: 24px; }
  .perguntas__cta-dentro { position: static; }
  .perguntas__img { aspect-ratio: 16 / 9; }
  .perguntas__cta { margin-bottom: 48px; }
  .rodape__nav { grid-template-columns: 1fr 1fr; }
  .rodape__nav section:first-child, .rodape__nav section:last-child { grid-column: auto; }
  .prova__esq { max-width: 456px; }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .nav__barra { padding-top: 16px; }
  .menu { width: 128px; }
  .nav__cta .btn__txt { font-size: 14px; }
  .nav__cta .btn__img, .nav__cta .btn__seta { display: none; }
  .nav__cta { padding: 8px 12px; }
  .reel { padding: 104px var(--gutter) 16px; }
  .reel__card { width: 100%; }
  .t112, .hero__titulo { font-size: 8.4vw; }
  .rodape__cta-texto { white-space: nowrap; font-size: 6.4vw; }
  .rodape__cta-seta { width: 32px; height: 16px; }
  .cartao-logo { width: 180px; }
  .cartao-logo--largo { width: 320px; height: 98.6px; }
  .cartao-logo__nome { font-size: 20px; }
  .obra { width: 78vw; }
  .tema { bottom: 12px; right: 16px; }
}

/* tema claro: o sinal só fica em display de 48 px ou mais (3,48:1 sobre o bone) */
:root[data-theme="claro"] .emo { color: var(--tinta); }
@media (min-width: 960px) { :root[data-theme="claro"] .t-display .emo { color: var(--sinal); } }
@media (min-width: 1280px) { :root[data-theme="claro"] .t72 .emo { color: var(--sinal); } }

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
  .verbos__palavras { display: none; }
  .verbo .mascara > span, .verbo .verbo__itens .mascara > span { transform: none; }
  .verbo__seta { transform: none; opacity: 1; }
}