/* Walk Productions · home */

@font-face { font-family: "Big Shoulders Display"; src: url("../fonts/big-shoulders-display-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@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: "Instrument Serif"; src: url("../fonts/instrument-serif-italic.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("../fonts/dm-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("../fonts/dm-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --fundo: #08080a;
  --fundo-2: #101014;
  --linha: #1e1e22;
  --tinta: #fafafa;
  --tinta-2: #a1a1a6;
  --bone: #f2efe6;
  --sinal: #EE3A0C;

  /* a página começa em bone com tinta preta e vira fundo com tinta bone nos clientes */
  --pagina: var(--bone);
  --texto: var(--fundo);

  --grosso: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --sans: "Switzer", system-ui, sans-serif;
  --serifa: "Instrument Serif", Georgia, serif;
  --mono: "DM Mono", ui-monospace, monospace;

  --curva: cubic-bezier(0.9, 0, 0.1, 1);
  --macia: cubic-bezier(0.16, 1, 0.3, 1);

  /* 1 px na tela de 1920 */
  --k: calc(100vw / 1920);
  --corpo: max(13px, calc(16.8 * var(--k)));
  --peq: max(11px, calc(13 * var(--k)));
}

html.escuro { --pagina: var(--fundo); --texto: var(--bone); }
/* sem JavaScript o fundo não troca: clientes e rodapé já nascem escuros */
html:not(.js) .clientes, html:not(.js) .rodape { background: var(--fundo); color: var(--bone); }

*, *::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(--pagina);
  color: var(--texto);
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--corpo);
  line-height: 1.286;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  transition: background-color .6s ease-out, color .6s ease-out;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--sinal); outline-offset: 3px; }

.mono { font-family: var(--mono); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; }
.serifa-it { font-family: var(--serifa); font-style: italic; font-weight: 400; text-transform: lowercase; color: var(--sinal); letter-spacing: 0; }
.hud-peq { font-size: var(--peq); }

.pular { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--fundo); color: var(--bone); padding: 10px 14px; }
.pular:focus { top: 12px; }

.wrap { padding: 0 calc(48 * var(--k)); position: relative; }
main, .rodape { position: relative; z-index: 2; }
.tela-gl { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none; }

/* ---------- botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  height: max(40px, calc(54 * var(--k))); padding: 0 max(18px, calc(28 * var(--k)));
  border-radius: calc(36 * var(--k));
  font-family: var(--sans); font-weight: 500; font-size: var(--corpo); text-transform: uppercase; letter-spacing: .01em;
  transition: background-color .3s, color .3s, border-color .3s;
}
.botao--sinal { background: var(--sinal); color: var(--fundo); }
.botao--sinal:hover { background: var(--texto); color: var(--pagina); }
.botao--peq { height: max(34px, calc(44 * var(--k))); }
.botao--pilula {
  flex: 1; height: max(48px, calc(60 * var(--k))); border: 1px solid currentColor; border-radius: calc(60 * var(--k));
  margin: 0 calc(153.6 * var(--k) - 33.6 * var(--k));
}
.botao--pilula:hover { background: var(--texto); color: var(--pagina); }
.link { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .3s var(--macia); }
.link:hover { background-size: 0 1px; background-position: 100% 100%; }

/* ---------- ícones pequenos ---------- */
.mais { display: inline-block; position: relative; width: calc(17 * var(--k)); height: calc(17 * var(--k)); min-width: 10px; min-height: 10px; vertical-align: middle; animation: girar 4s linear infinite; }
.mais::before, .mais::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; }
.mais::before { width: 100%; height: 1.5px; transform: translate(-50%, -50%); }
.mais::after { height: 100%; width: 1.5px; transform: translate(-50%, -50%); }
.mais--grande { width: calc(24 * var(--k)); height: calc(24 * var(--k)); }
@keyframes girar { to { transform: rotate(360deg); } }

.tique { position: absolute; width: 2px; height: calc(17 * var(--k)); min-height: 10px; overflow: hidden; background: color-mix(in srgb, currentColor 30%, transparent); }
.tique span { position: absolute; inset: 0; background: currentColor; animation: tique 2s linear infinite; }
@keyframes tique { 0% { transform: translateY(-100%); } 50% { transform: translateY(0); } 100% { transform: translateY(100%); } }

.blocos { position: relative; display: block; width: calc(33.6 * var(--k)); height: calc(33.6 * var(--k)); min-width: 16px; min-height: 16px; }
.blocos i { position: absolute; background: currentColor; }
.blocos i:nth-child(1) { left: 0; top: 50%; width: 50%; height: 50%; animation: bl-a 2s linear infinite; }
.blocos i:nth-child(2) { left: 50%; top: 0; width: 29%; height: 50%; animation: bl-b 2s linear infinite; }
.blocos i:nth-child(3) { left: 50%; top: 50%; width: 50%; height: 25%; animation: bl-c 2s linear infinite; }
.blocos i:nth-child(4) { left: 0; top: 0; width: 25%; height: 25%; animation: bl-d 2s linear infinite; }
.blocos--sinal { color: var(--sinal); }
@keyframes bl-a { 0%, 100% { width: 50%; } 50% { width: 25%; } }
@keyframes bl-b { 0%, 100% { height: 50%; opacity: 1; } 50% { height: 100%; opacity: .4; } }
@keyframes bl-c { 0%, 100% { width: 50%; } 50% { width: 0; } }
@keyframes bl-d { 0%, 100% { height: 25%; opacity: 1; } 50% { height: 50%; opacity: 0; } }

/* ---------- 01 · menu ---------- */
.topo { position: fixed; left: 0; top: 0; width: 100%; height: calc(108 * var(--k)); min-height: 64px; z-index: 50; color: var(--texto); transition: color .6s ease-out; }
.topo__wrap { display: flex; align-items: center; height: 100%; padding: 0 calc(48 * var(--k)); }
.topo__esq, .topo__dir { flex: 1; display: flex; align-items: center; }
.topo__dir { justify-content: flex-end; gap: calc(24 * var(--k)); }
.topo__centro { flex: 0 0 auto; }
.logo { display: block; width: calc(45 * var(--k)); height: calc(45 * var(--k)); min-width: 30px; min-height: 30px; }
.logo svg { width: 100%; height: 100%; fill: currentColor; }
.logo:hover svg path { animation: piscar .6s steps(2) 1; }
@keyframes piscar { 50% { opacity: .2; } }

.menu { position: relative; padding: calc(20 * var(--k)) calc(36 * var(--k)); }
.menu__fundo { position: absolute; inset: 0; border-radius: calc(36 * var(--k)); background: color-mix(in srgb, var(--pagina) 88%, transparent); border: 1px solid color-mix(in srgb, var(--texto) 14%, transparent); opacity: 0; transition: opacity .3s, background-color .6s; backdrop-filter: blur(6px); }
.topo.rolou .menu__fundo { opacity: 1; }
.menu__lista { position: relative; display: flex; gap: calc(24 * var(--k)); text-transform: uppercase; }
.menu__item > a { position: relative; display: inline-block; padding: 2px 0; }
.menu__item > a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .3s var(--macia); }
.menu__item > a:hover::after, .menu__item > a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.menu__item--sub { position: relative; }
.submenu { position: absolute; left: calc(-18 * var(--k)); top: 100%; padding-top: calc(28 * var(--k)); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .3s, transform .3s var(--macia), visibility .3s; }
.submenu::before { content: ""; position: absolute; inset: calc(16 * var(--k)) 0 0; border-radius: calc(6 * var(--k)); background: var(--pagina); border: 1px solid color-mix(in srgb, var(--texto) 14%, transparent); box-shadow: rgba(0,0,0,.1) 0 6px 6px; }
.submenu li { position: relative; }
.submenu a { display: block; padding: calc(6 * var(--k)) calc(18 * var(--k)); white-space: nowrap; }
.submenu li:first-child a { padding-top: calc(14 * var(--k)); }
.submenu li:last-child a { padding-bottom: calc(14 * var(--k)); }
.submenu a:hover { text-decoration: underline; text-underline-offset: 3px; }
.menu__item--sub:hover .submenu, .menu__item--sub:focus-within .submenu { opacity: 1; visibility: visible; transform: none; }
.idioma { font-size: var(--peq); }
.abrir-menu { display: none; }
.menu-cheio, .fixo-base { display: none; }

/* ---------- 02 · abertura ---------- */
.abertura { padding-top: calc(108 * var(--k)); margin-bottom: calc(192 * var(--k)); text-align: center; }
.gigante {
  margin: 0; font-family: var(--grosso); font-weight: 800; text-transform: uppercase;
  font-size: calc(305.6 * var(--k)); line-height: .78; letter-spacing: -.005em; user-select: none;
}
.gigante .row { display: block; overflow: hidden; margin: 0 calc(-12 * var(--k)); padding: 0 calc(12 * var(--k)); }
.gigante .line { display: block; }

.faixa { position: relative; height: calc(21.6 * var(--k)); min-height: 18px; overflow: hidden; }
.abertura__faixa { margin-top: calc(24 * var(--k)); }
.marquee { position: absolute; left: 0; top: 0; display: flex; white-space: nowrap; will-change: transform; }
.marquee__trilho { display: flex; }
.marquee__grupo { display: flex; align-items: center; flex: 0 0 auto; }
.marquee .tag { display: inline-block; padding: 0 calc(58 * var(--k)); }
.marquee .tag:hover { text-decoration: underline; text-underline-offset: 3px; }

.colunas { position: relative; height: calc(804 * var(--k)); margin-top: calc(24 * var(--k)); text-align: left; }
.tique--1 { left: 0; top: calc(114 * var(--k)); }
.tique--2 { right: 0; top: calc(114 * var(--k)); }
.tique--3 { left: 0; top: calc(574 * var(--k)); }
.tique--4 { right: 0; top: calc(574 * var(--k)); }

.codigo { position: absolute; left: 0; top: calc(264 * var(--k)); width: calc(228 * var(--k)); text-align: center; transition: opacity .3s; }
.codigo:hover { opacity: .6; }
.codigo__barras { display: block; overflow: hidden; height: calc(66 * var(--k)); }
.codigo__trilho { display: flex; width: 200%; height: 100%; animation: barras 12s linear infinite; }
.codigo__trilho svg { width: 50%; height: 100%; color: currentColor; }
@keyframes barras { to { transform: translateX(-50%); } }
.codigo__rotulo { display: block; margin-top: calc(6 * var(--k)); }

.extra { position: absolute; left: calc(307.2 * var(--k)); top: calc(501.6 * var(--k)); width: calc(228 * var(--k)); opacity: .62; }

.quadro { position: absolute; left: calc(607.2 * var(--k)); top: 0; width: calc(480 * var(--k)); height: calc(625 * var(--k)); }
.quadro__ascii { position: relative; width: 100%; height: 100%; background: var(--fundo); overflow: hidden; }
.quadro__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.quadro__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.quadro.gl .quadro__video { opacity: 0; }
.quadro__hud { position: absolute; z-index: 2; font-size: var(--peq); color: var(--bone); }
.quadro__hud--rec { left: calc(18 * var(--k)); top: calc(16 * var(--k)); display: flex; align-items: center; gap: .5em; }
.quadro__hud--frame { right: calc(18 * var(--k)); bottom: calc(16 * var(--k)); }
.frame { font-weight: 400; }
.ponto { display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: var(--sinal); animation: rec 1.2s steps(2) infinite; }
@keyframes rec { 50% { opacity: 0; } }

.conteudo { position: absolute; left: calc(1108.8 * var(--k)); top: calc(72 * var(--k)); width: calc(451.2 * var(--k)); }
.desenho { position: relative; height: calc(153.6 * var(--k)); margin: calc(-28.8 * var(--k)) 0 0 calc(-120 * var(--k)); pointer-events: none; }
.desenho .serifa-it { display: inline-block; font-size: calc(116 * var(--k)); line-height: 1.1; clip-path: inset(-10% 0 -10% 0); }
.texto { text-align: justify; hyphens: auto; }
.conteudo .texto { margin-top: calc(24 * var(--k)); }
.texto p + p { margin-top: calc(21.6 * var(--k)); }
.conteudo .botao { margin-top: calc(6 * var(--k)); }

.local { position: absolute; right: 0; top: calc(307.2 * var(--k)); text-align: right; font-size: var(--corpo); transition: opacity .3s; }
.local:hover { opacity: .6; }

/* ---------- 03 · trabalho ---------- */
.trabalho { margin: calc(192 * var(--k)) 0; }
.trabalho__intro, .clientes__intro { position: relative; display: flex; align-items: flex-start; margin-bottom: calc(72 * var(--k)); }
.lado { flex: 0 0 calc(153.6 * var(--k)); display: flex; flex-direction: column; gap: calc(14 * var(--k)); }
.lado--dir { align-items: flex-end; }
.grande {
  flex: 1; display: flex; justify-content: space-between; margin: calc(-6 * var(--k)) 0 0;
  font-family: var(--grosso); font-weight: 800; text-transform: uppercase;
  font-size: calc(192 * var(--k)); line-height: .75; letter-spacing: -.005em;
}
.grande { position: relative; }
.grande .parte { display: block; will-change: transform; }
.trabalho .grande { padding: 0 calc(100 * var(--k)); }
.grande--sinal { color: var(--sinal); }

.itens { font-size: 0; margin: 0 calc(-9.6 * var(--k)); }
.item, .bloco { display: inline-block; vertical-align: top; font-size: var(--corpo); position: relative; }
.item { margin: 0 calc(9.6 * var(--k)) calc(192 * var(--k)); }
.item--largo { width: calc(1824 * var(--k)); }
.item--meia { width: calc(902.4 * var(--k)); }
.item--margem-peq { margin-bottom: calc(24 * var(--k)); }
.item--folga { width: calc(748.8 * var(--k)); margin-left: calc(153.6 * var(--k)); }
.item--alto { margin-top: calc(276 * var(--k)); }
.item--maior { width: calc(1209.6 * var(--k)); }
.item--ultimo { margin-bottom: 0; }

.item__tags { display: flex; align-items: center; height: calc(21.6 * var(--k)); min-height: 18px; margin-bottom: calc(16.8 * var(--k)); white-space: nowrap; }
.item__tags .tag { display: inline-block; }
.item__tags .mais { margin: 0 auto; }
.t1 .tag:nth-child(1) { width: calc(153.6 * var(--k)); }
.t1 .tag:nth-child(2) { margin-right: auto; }
.t1 .tag:nth-child(4) { margin-right: calc(240 * var(--k)); }
.t2 { justify-content: flex-start; }
.t2 .mais { margin: 0 calc(200 * var(--k)) 0 calc(170 * var(--k)); }
.t2 .tag:nth-child(3) { margin-right: calc(150 * var(--k)); }
.t3 .mais { margin: 0 calc(310 * var(--k)) 0 calc(10 * var(--k)); }
.t3 .tag:nth-child(2) { margin-right: calc(150 * var(--k)); }
.t4 .tag:nth-child(1) { margin-right: calc(240 * var(--k)); }
.t5 .tag:nth-child(1) { width: calc(153.6 * var(--k)); }
.t5 .mais { margin: 0 calc(240 * var(--k)) 0 calc(150 * var(--k)); }
.t5 .tag:last-child { margin-left: auto; margin-right: calc(150 * var(--k)); }
.t6 .tag:nth-child(1) { width: calc(288 * var(--k)); }
.t6 .tag:nth-child(2) { margin-right: auto; }
.t6 .tag:nth-child(4) { margin-left: auto; margin-right: calc(220 * var(--k)); }

.item__imgs { display: flex; gap: calc(19.2 * var(--k)); height: calc(676.8 * var(--k)); }
.item--folga .item__imgs { height: calc(561.6 * var(--k)); }
.item--maior .item__imgs { height: calc(906 * var(--k)); }
.pix { position: relative; display: block; flex: 1; height: 100%; overflow: hidden; background: var(--fundo-2); }
.pix img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: opacity .4s; }
html.gl-pronto .pix.gl { background: transparent; }
html.gl-pronto .pix.gl img { opacity: 0; }
.pix--quadrado { height: calc(288 * var(--k)); }

.item__titulo { display: flex; align-items: flex-start; margin-top: calc(30 * var(--k)); position: relative; }
.num { font-size: var(--peq); width: calc(36 * var(--k)); min-width: 26px; margin-top: calc(4.8 * var(--k)); }
.nome { font-size: calc(38.4 * var(--k)); line-height: 1.22; font-weight: 400; transition: transform .3s var(--macia); }
.item:hover .nome { transform: translateX(calc(8 * var(--k))); }
.item__linha { display: block; max-width: calc(560 * var(--k)); margin: calc(10 * var(--k)) 0 0 calc(36 * var(--k)); opacity: .62; }

.balao { position: relative; display: inline-block; width: calc(17 * var(--k)); height: calc(17 * var(--k)); min-width: 10px; min-height: 10px; margin: calc(6 * var(--k)) 0 0 calc(8 * var(--k)); background: currentColor; border-radius: 50% 50% 50% 0; flex: 0 0 auto; }
.balao__caixa { position: absolute; left: 50%; bottom: calc(32 * var(--k)); transform: translateX(-50%); width: max-content; max-width: 320px; padding: 10px 14px; border-radius: calc(6 * var(--k)); background: var(--texto); color: var(--pagina); opacity: 0; pointer-events: none; transition: opacity .3s, bottom .3s var(--macia); text-align: left; box-shadow: rgba(0,0,0,.1) 0 6px 6px; z-index: 5; }
.balao__l { display: block; font-size: 11px; opacity: .7; }
.balao__i { display: block; font-size: 14px; line-height: 1.3; font-weight: 400; text-transform: none; }
.item:hover .balao__caixa, .item:focus-visible .balao__caixa, .cli__grande:hover .balao__caixa { opacity: 1; bottom: calc(42 * var(--k)); }

.bloco { margin: calc(38.4 * var(--k)) calc(9.6 * var(--k)) 0; padding-left: calc(153.6 * var(--k)); }
.bloco--manifesto { width: calc(902.4 * var(--k)); }
.normal { margin: 0; font-family: var(--grosso); font-weight: 800; text-transform: uppercase; font-size: calc(96 * var(--k)); line-height: .82; text-align: justify; text-align-last: left; }
.normal .serifa-it { font-size: 1.08em; line-height: .7; }
.normal .palavra { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .04em; }
.normal .palavra > span { display: inline-block; }
.bloco--manifesto .texto { width: calc(442 * var(--k)); margin: calc(96 * var(--k)) 0 0 auto; }
.bloco--menor { width: calc(595.2 * var(--k)); }
.bloco__img { position: relative; }
.tique--bloco { left: calc(-40 * var(--k)); top: calc(30 * var(--k)); }
.desenho--bloco { position: absolute; left: calc(160 * var(--k)); top: calc(190 * var(--k)); margin: 0; height: auto; z-index: 3; }
.desenho--bloco .serifa-it { font-size: calc(124 * var(--k)); }
.bloco--menor .texto { margin-top: calc(72 * var(--k)); }
.bloco--menor .texto p + p { margin-top: calc(12 * var(--k)); }
.fatos { margin-top: calc(24 * var(--k)); font-size: var(--peq); }
.fatos li { padding: calc(8 * var(--k)) 0; border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); }

.botoes { display: flex; align-items: center; margin-top: calc(96 * var(--k)); }
.nota { margin-top: calc(24 * var(--k)); font-size: var(--peq); text-align: center; opacity: .62; }

/* ---------- 04 · clientes ---------- */
.clientes { padding: calc(96 * var(--k)) 0; }
.clientes .grande { justify-content: space-between; }
.clientes__intro { margin-bottom: calc(60 * var(--k)); }
.citacao { position: absolute; left: 50%; top: calc(-20 * var(--k)); transform: translateX(-50%); width: calc(390 * var(--k)); height: calc(190 * var(--k)); display: flex; align-items: center; justify-content: center; text-align: center; }
.citacao__texto { padding: 0 calc(66 * var(--k)); }
.parentese { position: absolute; top: 0; width: calc(48 * var(--k)); height: 100%; }
.parentese svg { width: 100%; height: 100%; fill: none; stroke: var(--sinal); stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.parentese--esq { left: 0; }
.parentese--dir { right: 0; }

.colunas-texto { display: grid; grid-template-columns: calc(153.6 * var(--k)) calc(460.8 * var(--k)) calc(460.8 * var(--k)) 1fr; column-gap: calc(19.2 * var(--k)); padding: 0 0 0 calc(153.6 * var(--k)); margin-bottom: calc(96 * var(--k)); }
.clientes .colunas-texto .col.mono { font-size: var(--peq); }
.col--icone { justify-self: end; color: var(--sinal); }

.nuvem { position: relative; padding: 0 calc(140 * var(--k)); }
.tique--n1 { left: 0; top: 50%; }
.tique--n2 { right: 0; top: 50%; }
.nuvem__lista { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: calc(26 * var(--k)); row-gap: calc(6 * var(--k)); }
.cli { display: inline-flex; align-items: center; gap: calc(22 * var(--k)); }
.cli__grande { position: relative; font-size: calc(48 * var(--k)); line-height: 1; text-transform: uppercase; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; }
.cli__grande .balao { margin: 0 0 0 calc(4 * var(--k)); vertical-align: top; width: calc(13 * var(--k)); height: calc(13 * var(--k)); color: var(--bone); }
.balao--claro .balao__caixa { background: var(--bone); color: var(--fundo); white-space: normal; }
.cli__peq { display: flex; flex-direction: column; font-size: var(--corpo); line-height: 1.07; color: color-mix(in srgb, var(--texto) 62%, transparent); text-align: left; }
.cli:nth-child(even) .cli__peq { order: -1; text-align: right; }

/* ---------- 05 · rodapé ---------- */
.rodape { padding-top: calc(60 * var(--k)); }
.divisor { height: 1px; background: var(--sinal); margin-bottom: calc(24 * var(--k)); }
.rodape__faixa { margin-bottom: calc(84 * var(--k)); }
.grande--contato { display: flex; justify-content: space-between; margin-bottom: calc(60 * var(--k)); transition: color .3s; }
.grande--contato:hover { color: var(--bone); }
.colunas-texto--rodape { grid-template-columns: calc(153.6 * var(--k)) calc(307.2 * var(--k)) calc(615 * var(--k)) 1fr 1fr; padding: 0; margin-bottom: calc(162 * var(--k)); }
.colunas-texto--rodape .col:nth-child(3) { grid-column: 4; }
.colunas-texto--rodape .col:nth-child(4) { grid-column: 5; }
.colunas-texto--rodape .texto p + p { margin-top: calc(12 * var(--k)); }
.col--dir { text-align: right; }
.base__wrap { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: calc(48 * var(--k)); }
.base__esq, .base__dir { flex: 1; font-size: var(--peq); }
.base__esq a { margin-right: 1.4em; }
.base__esq a:hover { color: var(--sinal); }
.base__dir { text-align: right; }
.base__centro { flex: 0 0 auto; text-align: center; }
.base__simbolo { width: calc(54 * var(--k)); height: calc(54 * var(--k)); min-width: 32px; min-height: 32px; fill: var(--sinal); display: block; margin: 0 auto calc(16 * var(--k)); }
.assinatura { font-size: calc(24 * var(--k)); font-weight: 400; }

/* ---------- estado inicial do movimento (só com JS) ---------- */
html.mov .gigante .line { transform: translateY(105%); }
html.mov .abertura__faixa, html.mov .codigo, html.mov .mtag, html.mov .conteudo .texto, html.mov .local, html.mov .extra, html.mov .topo { opacity: 0; }
html.mov .quadro { opacity: 0; }
html.mov .abertura .desenho .serifa-it { clip-path: inset(-10% 100% -10% 0); }

/* ---------- reduzir movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01s !important; }
  .marquee { position: static; justify-content: center; width: 100%; }
}

/* ---------- celular e tablet ---------- */
@media (max-width: 820px) {
  :root { --m: calc(100vw / 390); --corpo: 15px; --peq: 11px; }
  .wrap, .topo__wrap { padding: 0 16px; }
  .topo { height: 64px; }
  .topo__centro, .topo__dir .idioma, .topo__dir .botao { display: none; }
  .abrir-menu { display: inline-block; text-transform: uppercase; font-weight: 500; padding: 10px 0; }
  .menu-cheio:not([hidden]) { display: flex; position: fixed; inset: 0; z-index: 45; background: var(--pagina); color: var(--texto); align-items: center; padding: 80px 16px 100px; }
  .menu-cheio ul { display: flex; flex-direction: column; gap: 14px; }
  .menu-cheio a { font-family: var(--grosso); font-weight: 800; text-transform: uppercase; font-size: 56px; line-height: .9; }
  .menu-cheio__verbos a, .menu-cheio .mono a { font-family: var(--mono); font-weight: 400; font-size: 13px; }
  .menu-cheio__verbos { margin: -4px 0 8px; }
  .botao { border-radius: 30px; }
  .fixo-base { display: inline-flex; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 48; height: 48px; border-radius: 30px; transform: translateY(140%); transition: transform .4s var(--macia), background-color .3s, color .3s; }
  html.passou-hero .fixo-base { transform: none; }

  .abertura { padding-top: 84px; margin-bottom: 96px; }
  .gigante { font-size: calc(76 * var(--m)); }
  .gigante .row { margin: 0 -6px; padding: 0 6px; }
  .abertura__faixa { margin-top: 14px; }
  .marquee .tag { padding: 0 22px; }
  .colunas { height: auto; display: flex; flex-direction: column; margin-top: 20px; padding-top: 4px; }
  .tique { display: none; }
  .quadro { position: relative; left: auto; transform: none; width: 100%; height: auto; aspect-ratio: 1 / 1.02; order: 1; }
  .conteudo { position: relative; left: auto; top: auto; width: 100%; order: 2; margin-top: 0; }
  .desenho { margin: -46px 0 0 auto; height: 70px; text-align: right; }
  .desenho .serifa-it { font-size: 76px; }
  .quadro__hud--frame { top: 12px; bottom: auto; right: 12px; }
  .quadro__hud--rec { left: 12px; top: 12px; }
  .mtag { position: absolute; left: 0; top: 14px; }
  .conteudo .texto { margin-top: 10px; }
  .conteudo .botao { width: 100%; margin-top: 18px; }
  .extra { position: relative; left: auto; top: auto; width: auto; order: 3; margin-top: 30px; }
  .codigo { position: relative; top: auto; order: 4; margin-top: 28px; width: 180px; }
  .codigo__barras { height: 48px; }
  .local { position: absolute; right: 0; top: auto; bottom: 0; order: 5; }

  .trabalho { margin: 96px 0; }
  .trabalho__intro, .clientes__intro { flex-direction: column; margin-bottom: 36px; }
  .lado { flex: 0 0 auto; flex-direction: row; align-items: center; margin-bottom: 18px; }
  .lado--dir { display: none; }
  .grande { font-size: calc(92 * var(--m)); width: 100%; }
  .trabalho .grande { padding: 0; }
  .itens { margin: 0; }
  .item, .item--largo, .item--meia, .item--folga, .item--maior, .bloco, .bloco--manifesto, .bloco--menor { width: 100%; margin: 0 0 72px; padding-left: 0; }
  .item__tags { overflow: hidden; gap: 16px; }
  .item__tags .tag { width: auto !important; margin: 0 !important; }
  .item__tags .mais { margin: 0 !important; }
  .item__imgs, .item--folga .item__imgs, .item--maior .item__imgs { height: auto; flex-direction: column; gap: 8px; }
  .pix { flex: none; aspect-ratio: 16 / 9; height: auto; }
  .pix--quadrado { aspect-ratio: 3 / 2; height: auto; }
  .item__imgs .pix + .pix { display: none; }
  .item__titulo { margin-top: 16px; }
  .nome { font-size: 26px; }
  .item__linha { margin-left: 26px; max-width: none; }
  .balao { width: 11px; height: 11px; }
  .balao__caixa { display: none; }
  .normal { font-size: calc(54 * var(--m)); }
  .bloco--manifesto .texto { width: 100%; margin-top: 24px; }
  .desenho--bloco { left: auto; right: 10px; top: auto; bottom: -34px; }
  .desenho--bloco .serifa-it { font-size: 72px; }
  .bloco--menor .texto { margin-top: 48px; }
  .fatos { margin-top: 18px; }
  .botoes { margin-top: 0; }
  .botoes .lado { display: none; }
  .botao--pilula { margin: 0; }
  .nota { text-align: left; }

  .clientes { padding: 72px 0; }
  .citacao { position: relative; left: auto; top: auto; transform: none; width: 100%; height: 120px; margin-top: 22px; }
  .parentese { width: 26px; }
  .colunas-texto, .colunas-texto--rodape { grid-template-columns: 1fr; row-gap: 18px; padding: 0; margin-bottom: 48px; }
  .colunas-texto--rodape .col:nth-child(3), .colunas-texto--rodape .col:nth-child(4) { grid-column: auto; }
  .col--icone { display: none; }
  .col--dir { text-align: left; }
  .nuvem { padding: 0; }
  .nuvem .tique { display: none; }
  .nuvem__lista { column-gap: 14px; row-gap: 14px; }
  .cli { gap: 10px; }
  .cli__grande { font-size: 26px; white-space: normal; }
  .cli__peq { font-size: 12px; }
  .cli .balao { display: none; }

  .rodape { padding-top: 30px; padding-bottom: 80px; }
  .rodape__faixa { margin-bottom: 40px; }
  .grande--contato { font-size: calc(40 * var(--m)); margin-bottom: 36px; }
  .base__wrap { flex-direction: column; align-items: flex-start; gap: 22px; }
  .base__centro { text-align: left; }
  .base__simbolo { margin: 0 0 10px; }
  .assinatura { font-size: 20px; }
  .base__dir { text-align: left; }
}