/* Vale do Aço Digital — site institucional.
   Medidas tiradas da arte de 1920 px: --u vale 1 px da arte no desktop (≥ 900 px) e a página escala com a janela.
   Abaixo de 900 px o layout é próprio (fim do arquivo). Intro, hero e mapa: abertura.css. */

/* Montserrat (texto corrido, como na arte): arquivo próprio, subconjunto latino, eixo de peso 400–700. SIL Open Font License 1.1. */
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/montserrat-latin-400-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --escuro: #2d1604;
  --creme: #ffeed2;
  --tinta: #2d1604;
  --grad: linear-gradient(90deg, #d31b12 0%, #f2130f 20%, #f33117 52%, #f55d12 78%, #fba40b 100%);
  --grad-texto: linear-gradient(90deg, #ff9d14 0%, #ff6a14 48%, #ff3d1a 100%);

  /* usados por abertura.css */
  --red: #ff4b22;
  --orange: #ff7a1a;
  --amber: #ffae18;
  --ink: #2d1604;
  --mist: #ffeed2;
  --font-title: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wrap: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --radius: 10px;
  --header-h: 72px;
  --ease: cubic-bezier(0.22, 0.7, 0.2, 1);

  --fonte: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fonte-texto: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --texto-claro: #fffcf5;
  /* halo vermelho-escuro para texto claro que cruza o degradê: some sobre o marrom e segura a leitura sobre o laranja */
  --halo: 0 1px 1px rgba(84, 14, 0, 0.3), 0 0 max(8px, calc(16 * var(--u))) rgba(84, 14, 0, 0.5);
  --sai: cubic-bezier(0.16, 1, 0.3, 1);
  --vai: cubic-bezier(0.65, 0, 0.35, 1); /* ida e volta, troca de posição */
  --mola: cubic-bezier(0.34, 1.56, 0.64, 1); /* assenta com leve ultrapassagem */
  /* peso "medium" dos títulos: quatro sombras sem desfoque, 0,011em para cada lado (ver .t2) */
  --peso: 0.011em 0 currentColor, -0.011em 0 currentColor, 0 0.011em currentColor, 0 -0.011em currentColor;
  --u: calc(min(100vw, 2560px) / 1920);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--escuro); color: var(--creme);
  font-family: var(--fonte); font-size: 1rem; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; overflow-x: clip; /* hidden para navegador sem clip (iOS < 16): vai para o viewport e não quebra o sticky do hero */
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 4px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.defs-contorno { position: absolute; width: 0; height: 0; overflow: hidden; } /* filtros dos contornos (index.html, logo após o "pular") */
.skip { position: absolute; left: 16px; top: -64px; z-index: 100; padding: 10px 16px; border-radius: 8px; background: var(--creme); color: var(--tinta); text-decoration: none; }
.skip:focus { top: 12px; }

/* grão leve sobre o degradê, como na arte */
.grao::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.07;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- tipografia ---------- */
/* Helvetica regular engrossada um fio: o "medium" da arte, igual em Helvetica (Mac/iOS) e Arial (Windows/Android).
   O fio é text-shadow sem desfoque (--peso), não -webkit-text-stroke: com o contorno, o Chromium no Windows deixava um fio
   claro entre ele e o preenchimento nas curvas (O, C, S) — visto em 1× e 2×, com e sem GPU; pouco visível em branco sobre
   escuro, evidente em tinta sobre o creme. paint-order e text-rendering não resolveram; as sombras, sim. */
.t2 {
  --lh: 1.065;
  font-size: max(26px, calc(62 * var(--u))); font-weight: 400; letter-spacing: -0.012em; text-transform: uppercase;
  color: #fff; text-shadow: var(--peso);
}
.t2--tinta { --lh: 0.97; color: var(--tinta); }
/* texto corrido: Montserrat média e quase branca, como na arte (medido: #fffcf5, hastes de 3–4 px em 28 px) */
.corpo, .frente__texto { font-family: var(--fonte-texto); font-weight: 500; color: var(--texto-claro); text-shadow: var(--halo); }
.corpo { font-size: max(15px, calc(28 * var(--u))); line-height: 1.2; }
.corpo p + p { margin-top: 1.2em; }
.corpo--tinta { font-size: max(15px, calc(30 * var(--u))); line-height: 1.14; color: var(--tinta); text-shadow: none; }

/* linhas mascaradas: cada .ln recorta a sua; a caixa de 1.3em guarda acentos e descendentes, a margem negativa devolve o entrelinha */
.ln { display: block; overflow: hidden; line-height: 1.3; }
.ln + .ln { margin-top: calc((var(--lh, 1.1) - 1.3) * 1em); }
.ln > span { display: block; }

/* ---------- entradas ---------- */
.js [data-rv="linhas"] .ln > span { transform: translateY(105%); transition: transform 1.1s var(--sai) calc(var(--i, 0) * 0.09s); }
.js [data-rv="linhas"].is-in .ln > span { transform: none; }
.js [data-rv="sobe"] { opacity: 0; transform: translateY(calc(46 * var(--u) + 12px)); transition: opacity 0.9s ease calc(var(--i, 0) * 0.08s), transform 1.2s var(--sai) calc(var(--i, 0) * 0.08s); }
.js [data-rv="sobe"].is-in { opacity: 1; transform: none; }
/* clip e varre: o recorte fica num filho. No próprio elemento observado ele zera a área que o IntersectionObserver enxerga
   (inset(100%) → interseção 0) e a entrada nunca dispararia — foi o que deixou a foto do movimento escondida na primeira versão. */
.js [data-rv="clip"] .foto__janela { clip-path: inset(100% 0 0 0 round calc(50 * var(--u))); transition: clip-path 1.4s var(--sai); }
.js [data-rv="clip"] img { scale: 1.18; transition: scale 1.8s var(--sai); }
.js [data-rv="clip"].is-in .foto__janela { clip-path: inset(0 0 0 0 round calc(50 * var(--u))); }
.js [data-rv="clip"].is-in img { scale: 1; }
.js [data-rv="varre"] > img { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s var(--sai) 0.1s; }
.js [data-rv="varre"].is-in > img { clip-path: inset(0 0 0 0); }

/* ---------- assinatura "powered by" (vetores do logo do hero, recortados pelo viewBox) ---------- */
.powered { overflow: hidden; height: auto; }

/* ---------- menu ---------- */
.menu-btn {
  position: fixed; z-index: 60; top: max(14px, calc(74 * var(--u))); right: max(14px, calc(84 * var(--u)));
  width: max(48px, calc(100 * var(--u))); height: max(48px, calc(86 * var(--u)));
  display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; color: #fff;
  transition: color 0.35s ease;
}
[data-tema-atual="claro"] .menu-btn { color: var(--tinta); }
/* a barra de rolagem some com a página travada: o botão compensa a largura dela (--sbw, medida por site.js) e não pula */
.menu-aberto .menu-btn { color: var(--tinta); margin-right: var(--sbw, 0px); }
.intro-on .menu-btn { opacity: 0; }
.no-js .menu-btn { display: none; }
.menu-btn__barras { display: grid; gap: max(5px, calc(8.5 * var(--u))); width: max(30px, calc(72 * var(--u))); }
.menu-btn__barras i { display: block; height: max(3px, calc(8 * var(--u))); border-radius: 99px; background: currentColor; transform-origin: center; transition: transform 0.5s var(--sai), opacity 0.25s ease, width 0.4s var(--sai); }
.menu-btn:hover .menu-btn__barras i:nth-child(2) { transform: scaleX(0.72); }
.menu-aberto .menu-btn__barras i:nth-child(1) { transform: translateY(calc(max(5px, 8.5 * var(--u)) + max(3px, 8 * var(--u)))) rotate(45deg); }
.menu-aberto .menu-btn__barras i:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.menu-aberto .menu-btn__barras i:nth-child(3) { transform: translateY(calc(-1 * (max(5px, 8.5 * var(--u)) + max(3px, 8 * var(--u))))) rotate(-45deg); }

/* Cortina em tela cheia, no modelo do menu do Siteflux: desce do topo já com o conteúdo, os links entram da esquerda em
   sequência e, no hover, uma faixa escura atravessa a linha enquanto as letras rolam. As cores são as do Vale: cortina creme
   e tinta (os tons claro/escuro que lá são lima e verde), faixa em tinta e letras no degradê laranja das "três frentes". */
.menu {
  --m-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --m-lado: max(22px, calc(268 * var(--u)));
  position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  padding: max(78px, calc(150 * var(--u))) 0 max(22px, calc(54 * var(--u)));
  background: var(--creme); color: var(--tinta);
  transform: translateY(-101%); visibility: hidden;
  transition: transform 0.55s var(--m-ease), visibility 0s 0.55s;
}
.menu-aberto .menu { transform: none; visibility: visible; transition: transform 0.55s var(--m-ease), visibility 0s; }
/* trava só o <html>: com overflow no <body> ele virava o contêiner de rolagem do hero e o palco pinado saltava ao abrir o menu */
.menu-aberto { overflow: hidden; }
.menu-aberto body { padding-right: var(--sbw, 0px); }
section:focus { outline: none; } /* a seção recebe o foco ao chegar por um link do menu (tabindex="-1" via site.js) */

.menu__nav { margin-block: auto; }
.menu__nav li { opacity: 0; transform: translateX(-30px); transition: opacity 0.55s var(--m-ease), transform 0.55s var(--m-ease); border-bottom: 1px solid rgba(45, 22, 4, 0.13); }
.menu__nav li:first-child { border-top: 1px solid rgba(45, 22, 4, 0.13); }
.menu-aberto .menu__nav li { opacity: 1; transform: none; transition-delay: calc(0.08s + var(--i, 0) * 0.06s); }
/* o link ocupa a linha inteira: a faixa é dele (::before), então hover, toque e foco por teclado acendem a mesma coisa */
.menu__nav a {
  position: relative; z-index: 0; display: block; white-space: nowrap;
  padding: max(5px, 0.7vh) 4vw max(5px, 0.7vh) var(--m-lado);
  font-size: clamp(30px, min(calc(92 * var(--u)), 8vh), 110px); line-height: 1.25; letter-spacing: -0.02em; text-transform: uppercase;
  text-decoration: none; text-shadow: 0.009em 0 currentColor, -0.009em 0 currentColor, 0 0.009em currentColor, 0 -0.009em currentColor; color: var(--tinta); transition: color 0.3s ease;
}
.menu__nav a::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tinta);
  transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--m-ease); pointer-events: none;
}
.menu__nav a:focus-visible { outline-offset: -5px; }
.menu__nav a:focus-visible, .menu__nav a:active { color: var(--amber); }
.menu__nav a:focus-visible::before, .menu__nav a:active::before { transform: scaleX(1); }
/* letras em rolagem (site.js monta .roll só com ponteiro fino e movimento permitido): cada letra é uma janela de uma linha
   com duas cópias empilhadas; no hover o trilho sobe meia altura, letra após letra (--d). A segunda cópia leva a cor do
   degradê na posição da letra (--t, de 0 a 1). --m repõe o kerning que os blocos separados perdem. */
.roll { display: inline-block; transition: transform 0.3s var(--m-ease); }
.roll-w { display: inline-block; white-space: nowrap; }
.roll-c { display: inline-block; height: 1.25em; overflow: hidden; vertical-align: top; padding-inline: 0.05em; margin-inline: calc(var(--m, 0em) - 0.05em) -0.05em; }
.roll-t { display: block; transition: transform 0.3s var(--m-ease) var(--d, 0ms); }
.roll-t > span { display: block; height: 1.25em; }
.roll-t > span + span { color: var(--orange); color: color-mix(in srgb, #ff4a1c calc(var(--t, 0) * 100%), #ffa114); }
.menu__nav a:focus-visible .roll-t { transform: translateY(-50%); }
@media (hover: hover) and (pointer: fine) {
  .menu__nav a:hover { color: var(--amber); }
  .menu__nav a:hover::before { transform: scaleX(1); }
  .menu__nav a:hover .roll { transform: translateX(10px); }
  .menu__nav a:hover .roll-t { transform: translateY(-50%); }
}

/* rodapé da cortina: a chamada (pílula escura, como o botão do menu do Siteflux) e as redes; sobe depois dos links */
.menu__pe {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 34px; padding: max(20px, 3.4vh) 4vw 0 var(--m-lado);
  opacity: 0; transform: translateY(14px); transition: opacity 0.3s ease, transform 0.3s ease;
}
.menu-aberto .menu__pe { opacity: 1; transform: none; transition: opacity 0.6s ease 0.46s, transform 0.7s var(--m-ease) 0.46s; }
.menu__redes { display: flex; flex-wrap: wrap; gap: 6px 28px; font-size: max(13px, calc(20 * var(--u))); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.menu__redes a { display: inline-block; padding-block: 10px; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 7px) / 0 2px no-repeat; transition: background-size 0.35s var(--m-ease); }
.menu__redes a:hover, .menu__redes a:focus-visible { background-size: 100% 2px; }

/* ---------- hero: ajustes sobre abertura.css para a composição da arte ---------- */
.hero { --hero-bg: var(--escuro); }
.hero__logo { top: max(18px, calc(62 * var(--u))); width: clamp(150px, calc(300 * var(--u)), 360px); }
.hero__powered { position: absolute; z-index: 3; left: max(18px, calc(76 * var(--u))); top: max(30px, calc(104 * var(--u))); width: clamp(150px, calc(446 * var(--u)), 520px); filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45)); }
/* --barra (abertura.css): o que o palco pinado passa da tela enquanto a barra de endereço do celular está aberta; 0 no desktop */
.hero__end { bottom: calc(4vh + var(--barra, 0px)); width: min(100% - var(--gutter) * 2, 1000px); }
.hero__phrase { width: min(100%, clamp(320px, calc(880 * var(--u)), 1000px)); }
.hero__start { bottom: calc(20vh + var(--barra, 0px)); max-width: none; display: none; }
.js .hero.is-scrub .hero__start, .js .hero.is-play .hero__start { display: flex; justify-content: center; }
.hero__rolar { display: grid; justify-items: center; gap: 6px; color: #fff; }
.hero__mouse { display: block; width: 30px; height: 48px; border: 2.5px solid currentColor; border-radius: 16px; position: relative; }
.hero__mouse i { position: absolute; left: 50%; top: 8px; width: 3px; height: 9px; margin-left: -1.5px; border-radius: 3px; background: currentColor; animation: rolar 1.8s var(--sai) infinite; }
/* celular (toque e tela estreita): mesmo traço do mouse, cantos de aparelho, o alto-falante no topo e um dedo que desce a tela */
.hero__fone { display: none; width: 30px; height: 54px; border: 2.5px solid currentColor; border-radius: 9px; position: relative; }
.hero__fone::before { content: ""; position: absolute; left: 50%; top: 5px; width: 8px; height: 2.5px; margin-left: -4px; border-radius: 2px; background: currentColor; }
.hero__fone i { position: absolute; left: 50%; top: 15px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: currentColor; animation: rolar-fone 1.8s var(--sai) infinite; }
.hero__rolar svg { width: 14px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: rolar-seta 1.8s ease-in-out infinite; }
@keyframes rolar { 0% { transform: translateY(0); opacity: 1; } 70%, 100% { transform: translateY(12px); opacity: 0; } }
@keyframes rolar-fone { 0% { transform: translateY(0) scale(0.6); opacity: 0; } 14% { transform: translateY(0) scale(1); opacity: 1; } 72%, 100% { transform: translateY(19px) scale(1); opacity: 0; } }
@keyframes rolar-seta { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
/* a indicação some logo no começo da rolagem (abertura.js liga .is-off): parada, não fica animando fora da vista pelo resto da página */
.hero__start.is-off .hero__rolar * { animation: none; }
@media (max-width: 899px), (hover: none) and (pointer: coarse) {
  .hero__mouse { display: none; }
  /* sobre o cabelo da personagem o traço branco ganha um halo escuro. É box-shadow no contorno, não filter no conjunto: um
     filtro em volta de filhos animados obrigava a recompor a cada quadro (medido com a CPU a 1/4: ~4 ms a mais por quadro
     enquanto o mapa animava, mesmo com a indicação já fora da tela) */
  .hero__fone { display: block; box-shadow: 0 0 7px rgba(20, 9, 2, 0.5), inset 0 0 7px rgba(20, 9, 2, 0.35); }
}

/* ---------- 1 · o movimento ---------- */
.presente { position: relative; padding: calc(138 * var(--u)) 0 calc(292 * var(--u)); background: var(--escuro); }
.presente__faixa { position: absolute; inset: calc(683 * var(--u)) 0 calc(-90 * var(--u)); background: var(--grad); }
/* costura com o hero: a base dele termina sob a sombra da frase — rgba(20, 9, 2, 0.72) sobre --escuro (.hero__shade, abertura.css) — e
   esta seção começava em --escuro puro: via-se a linha entre as duas. A mesma sombra continua aqui, com a mesma opacidade na emenda,
   e se desfaz devagar. As paradas seguem uma curva suave (sai sem inclinação e chega sem inclinação): não há degrau nem faixa. */
.presente::before {
  content: ""; position: absolute; inset: 0 0 auto; height: max(380px, calc(540 * var(--u))); pointer-events: none;
  background: linear-gradient(to bottom, rgba(20, 9, 2, 0.72) 0%, rgba(20, 9, 2, 0.7) 10%, rgba(20, 9, 2, 0.645) 20%, rgba(20, 9, 2, 0.564) 30%, rgba(20, 9, 2, 0.467) 40%, rgba(20, 9, 2, 0.36) 50%, rgba(20, 9, 2, 0.253) 60%, rgba(20, 9, 2, 0.156) 70%, rgba(20, 9, 2, 0.075) 80%, rgba(20, 9, 2, 0.02) 90%, rgba(20, 9, 2, 0) 100%);
}
.presente__grade {
  position: relative; display: grid; grid-template-columns: calc(706 * var(--u)) calc(690 * var(--u)); column-gap: calc(86 * var(--u));
  align-items: start; padding-left: calc(268 * var(--u));
}
.foto { position: relative; height: calc(877 * var(--u)); border-radius: calc(50 * var(--u)); }
.foto__janela { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: #1d0d02; }
.foto img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; object-fit: cover; }
.presente__texto { padding-top: calc(4 * var(--u)); }
.presente__texto .corpo { margin-top: calc(46 * var(--u)); }

.presente__acoes { position: relative; margin-top: calc(34 * var(--u)); }
.presente__powered { width: calc(570 * var(--u)); margin-left: calc(328 * var(--u)); }
/* as chamadas ficam soltas sobre a divisa entre os cartões e o mapa: metade sobre o degradê, metade sobre o escuro (elas são da
   seção dos cartões, que fica por cima da do mapa). A barra de vidro escuro que as reunia saiu em 09/10/2026; cada pílula leva
   agora uma sombra quente própria, que a descola do degradê vermelho onde a cor das duas primeiras quase se confunde com o fundo */
.pilulas {
  position: absolute; left: 50%; bottom: 0; z-index: 3; translate: -50% 50%;
  display: flex; gap: max(10px, calc(16 * var(--u)));
}
.pilulas li { flex: none; }
.pilulas .pilula__rot, .pilulas .pilula__seta { box-shadow: 0 calc(14 * var(--u)) calc(34 * var(--u)) rgba(64, 8, 0, 0.34); }

.pilula { --h: max(46px, calc(75 * var(--u))); display: inline-flex; align-items: center; gap: max(4px, calc(7 * var(--u))); text-decoration: none; }
/* resposta ao clique: comprime e volta (com ponteiro fino, site.js junta esta transição à do ímã) */
.pilula, .cta { transition: scale 0.25s var(--sai); }
.pilula:active, .cta:active { scale: 0.97; }
.pilula__rot, .pilula__seta { height: var(--h); border-radius: 99px; background: var(--pb); color: var(--pc); transition: background-color 0.35s ease, color 0.35s ease, transform 0.6s var(--sai); }
.pilula__rot {
  display: inline-flex; align-items: center; padding: 0 max(18px, calc(28 * var(--u)));
  /* rótulos pequenos em negrito de verdade: o fio de contorno abaixo de ~1 px embaçava e colava as letras */
  font-size: max(12px, calc(20 * var(--u))); font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; white-space: nowrap;
}
.pilula__seta { display: grid; place-items: center; width: var(--h); flex: none; }
.pilula__seta svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; transition: transform 0.6s var(--sai); }
.pilula--a { --pb: #ff452c; --pc: #fff; }
.pilula--b { --pb: #ff7417; --pc: #fff; }
.pilula--c { --pb: var(--creme); --pc: var(--tinta); }
.pilula--d { --pb: var(--tinta); --pc: var(--creme); } /* sobre o creme do menu */
.pilula:hover .pilula__rot, .pilula:focus-visible .pilula__rot, .pilula:hover .pilula__seta, .pilula:focus-visible .pilula__seta { background: var(--tinta); color: var(--creme); }
.pilula--c:hover .pilula__rot, .pilula--c:focus-visible .pilula__rot, .pilula--c:hover .pilula__seta, .pilula--c:focus-visible .pilula__seta { background: #fff; color: var(--tinta); }
.pilula--d:hover .pilula__rot, .pilula--d:focus-visible .pilula__rot, .pilula--d:hover .pilula__seta, .pilula--d:focus-visible .pilula__seta { background: var(--orange); color: var(--tinta); }
.pilula:hover .pilula__seta, .pilula:focus-visible .pilula__seta { transform: translateX(max(4px, calc(7 * var(--u)))); }
.pilula:hover .pilula__seta svg, .pilula:focus-visible .pilula__seta svg { transform: rotate(45deg); }

/* ---------- 2 · como construímos ---------- */
.como { position: relative; z-index: 1; background: var(--creme); color: var(--tinta); }
/* o letreiro começa 220 px da arte acima do creme: a palavra atravessa a troca de fundo */
.letreiro { position: relative; height: calc(262 * var(--u)); top: calc(-220 * var(--u)); margin-bottom: calc(-220 * var(--u)); overflow-x: clip; }
.letreiro__palavra { position: absolute; left: calc(-26 * var(--u)); top: 0; white-space: nowrap; font-size: calc(364 * var(--u)); font-weight: 700; letter-spacing: -0.035em; line-height: 0.74; }
.letreiro__palavra span { display: block; padding: 0.02em 0.04em 0.03em 0; background: linear-gradient(90deg, #ff8c0a 0%, #ff6412 38%, #ff3a18 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.letreiro__frase { --lh: 1.04; position: absolute; left: calc(1065 * var(--u)); top: calc(76 * var(--u)); font-size: max(20px, calc(50 * var(--u))); letter-spacing: -0.012em; text-transform: uppercase; color: #fff; text-shadow: var(--peso), var(--halo); }

.como__grade { display: grid; grid-template-columns: calc(787 * var(--u)) calc(700 * var(--u)); padding: calc(122 * var(--u)) 0 0 calc(268 * var(--u)); align-items: start; }
.como__grade .corpo { padding-top: calc(4 * var(--u)); }

.chamada { --lh: 0.97; margin-top: calc(96 * var(--u)); padding: 0 0 calc(4 * var(--u)) calc(345 * var(--u)); font-size: calc(146 * var(--u)); font-weight: 700; letter-spacing: -0.028em; text-transform: uppercase; overflow-x: clip; }
.chamada .ln { white-space: nowrap; }
.chamada .ln > span { width: max-content; padding-right: 0.06em; background: var(--grad-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* acentos (É, Ê): o degradê (background-clip: text) só pinta dentro da caixa de quem o leva, e a caixa de 1.3em da linha mal chegava
   ao alto dos acentos — numa tela de 903 px eles saíam cortados (15/10/2026). A linha ganha 0.2em em cima, devolvidos pela margem:
   as letras ficam onde estavam. No celular quem leva o degradê é cada parte (.cl, "até 899 px"). Inteiros, os acentos sobem a 0.93em
   da linha de base (Arial, medido) e, com a entrelinha de 0.89 de antes, entravam nas letras de cima: daí os 0.97 (aqui e no celular). */
@media (min-width: 900px) {
  .chamada .ln > span { padding-top: 0.2em; }
  .chamada .ln { margin-top: -0.2em; }
  .chamada .ln + .ln { margin-top: calc((var(--lh) - 1.3) * 1em - 0.2em); }
}

/* ---------- 3 · para quem é ---------- */
/* Três cartões no modelo da arte: marrom com fio creme sobre o degradê. Com JS e movimento permitido eles esperam empilhados na casa
   do meio, como um baralho, e abrem quando a pilha está à vista (site.js liga .is-in). --k é a casa de cada um (-1 esquerda, 0 centro,
   1 direita) e também a altura na pilha: o da direita fica por cima, um pouco para cima e para a direita. Só transform e opacity.
   Acabamento: o cartão é de uma cor só, sem borda (a borda clara saiu em 08/10/2026); no alto vai o selo do público e sob o título
   um fio curto. Com ponteiro fino o cartão responde ao cursor: sobe um pouco, a sombra aprofunda, uma luz acompanha o ponteiro
   (--mx/--my, escritos por site.js), o selo gira e o fio se estende. As duas camadas do hover (::before, a luz; ::after, a sombra funda) já estão prontas e só mudam de
   opacidade — nada de animar box-shadow. */
.publicos { position: relative; z-index: 2; padding: calc(126 * var(--u)) calc(150 * var(--u)) calc(140 * var(--u)); background: var(--grad); }
.publicos__defs { position: absolute; }
.publicos__lista { --vao: calc(64 * var(--u)); --leque: calc(15 * var(--u)); position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--vao); }
.publico {
  --mx: 50%; --my: 0px;
  position: relative; z-index: calc(2 + var(--k)); display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: calc(384 * var(--u)); padding: calc(46 * var(--u)) calc(50 * var(--u)) calc(50 * var(--u)); text-align: center;
  border-radius: calc(38 * var(--u)); background: #2a1104;
  box-shadow: 0 calc(26 * var(--u)) calc(64 * var(--u)) rgba(92, 14, 0, 0.36);
  transition: translate 0.6s var(--sai);
}
.publico::before, .publico::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity 0.45s ease; }
.publico::before { background: radial-gradient(circle max(180px, calc(300 * var(--u))) at var(--mx) var(--my), rgba(255, 190, 90, 0.2), rgba(255, 122, 26, 0.07) 46%, rgba(255, 122, 26, 0) 72%); }
.publico::after { z-index: -1; box-shadow: 0 calc(46 * var(--u)) calc(84 * var(--u)) rgba(64, 8, 0, 0.5); }
.publico > * { position: relative; }
/* selo do cartão: círculo na cor da marca, com sombra quente, um anel fino em volta e o ícone do público em traço branco (o brilho
   branco no alto saiu em 14/10/2026, a pedido do Walter). No hover o selo gira um pouco e cresce, e o anel se abre. */
.publico__sinal {
  --t: max(56px, calc(88 * var(--u)));
  display: grid; place-items: center; width: var(--t); height: var(--t); margin-bottom: calc(28 * var(--u)); border-radius: 50%;
  background: linear-gradient(150deg, #ffa51c 0%, #ff6c16 44%, #e3291a 100%);
  box-shadow: 0 calc(12 * var(--u)) calc(30 * var(--u)) rgba(214, 52, 10, 0.42), inset 0 -3px 8px rgba(120, 22, 0, 0.32);
  transition: scale 0.6s var(--mola), rotate 0.6s var(--mola);
}
.publico__sinal::before { content: ""; position: absolute; inset: calc(var(--t) * -0.13); border-radius: 50%; border: 1px solid rgba(255, 208, 138, 0.34); transition: scale 0.6s var(--sai), border-color 0.45s ease; }
.publico__sinal svg { width: 50%; height: 50%; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1px rgba(110, 22, 0, 0.45)); }
.publico__nome { font-size: max(21px, calc(36 * var(--u))); font-weight: 700; letter-spacing: -0.015em; line-height: 1.1; color: #fff; }
.publico__nome::after { content: ""; display: block; width: max(34px, calc(62 * var(--u))); height: 2px; margin: calc(16 * var(--u)) auto calc(18 * var(--u)); border-radius: 2px; background: linear-gradient(90deg, #ffae18, #ff5a1c); transform: scaleX(0.4); transition: transform 0.6s var(--sai); }
.publico__texto { max-width: 17em; font-family: var(--fonte-texto); font-size: max(15px, calc(25 * var(--u))); line-height: 1.36; color: var(--creme); text-wrap: balance; }
/* hover só com ponteiro fino e com o baralho já aberto (sem JS a lista nunca esteve empilhada) */
@media (hover: hover) and (pointer: fine) {
  :is(html:not(.js) .publico, .publicos__lista.is-in .publico):hover { translate: 0 calc(-10 * var(--u)); }
  :is(html:not(.js) .publico, .publicos__lista.is-in .publico):hover::before, :is(html:not(.js) .publico, .publicos__lista.is-in .publico):hover::after { opacity: 1; }
  :is(html:not(.js) .publico, .publicos__lista.is-in .publico):hover .publico__sinal { scale: 1.08; rotate: -8deg; }
  :is(html:not(.js) .publico, .publicos__lista.is-in .publico):hover .publico__sinal::before { scale: 1.16; border-color: rgba(255, 208, 138, 0.6); }
  :is(html:not(.js) .publico, .publicos__lista.is-in .publico):hover .publico__nome::after { transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  /* a troca de casa vai em ease-in-out, um cartão logo após o outro; o conteúdo só entra com o cartão quase assentado.
     As transições do hover (translate do cartão, scale da peça) entram nas mesmas listas para não se perderem. */
  .js .publico { transition: transform 1.05s var(--vai) calc(0.22s + (var(--k) + 1) * 0.07s), translate 0.6s var(--sai); }
  .js .publico > * { transition: opacity 0.5s ease calc(0.86s + (var(--k) + 1) * 0.08s), transform 0.7s var(--sai) calc(0.86s + (var(--k) + 1) * 0.08s), scale 0.6s var(--mola), rotate 0.6s var(--mola); }
  /* o anel do selo se abre quando o cartão assenta (também no toque, onde não há hover). Só preenche para trás: depois o hover manda */
  .js .publicos__lista.is-in .publico__sinal::before { animation: ps-anel 1.1s var(--sai) calc(1.05s + (var(--k) + 1) * 0.1s) backwards; }
  @keyframes ps-anel { from { scale: 0.62; opacity: 0; } }
  .js .publicos__lista:not(.is-in) .publico { transform: translate(calc(var(--k) * (var(--leque) - 100% - var(--vao))), calc(var(--k) * var(--leque) * -0.9)); }
  .js .publicos__lista:not(.is-in) .publico > * { opacity: 0; transform: translateY(calc(16 * var(--u))); }
}

/* ---------- 4 · a região ---------- */
/* só o mapa, solto sobre o fundo: os municípios do Vale do Aço e a teia de conexões (o quadro com grade saiu em 07/10/2026).
   O brilho quente atrás dele é o que o prende à página: é fundo da seção, não um elemento — assim nunca passa da largura da janela
   (como elemento, no celular ele empurrava a página 66 px para o lado). O SVG e a animação estão em abertura.css. */
.regiao {
  position: relative; overflow-x: clip; padding: calc(150 * var(--u)) 0 calc(130 * var(--u));
  background: radial-gradient(ellipse 31% 43% at 69% 51%, rgba(255, 122, 26, 0.17), rgba(255, 122, 26, 0.05) 62%, rgba(255, 122, 26, 0)) var(--escuro);
}
/* o mapa vai para a direita; à esquerda, o letreiro "Conectando o Vale do Aço" em três linhas que deslizam com a rolagem em ritmos e
   sentidos diferentes (data-px-x no HTML) e passam por cima do mapa. A primeira linha é cheia, em creme, na mesma letra das outras
   (o contorno saiu em 09/10/2026: vazada, ela parecia de outra fonte); as outras, no degradê das letras grandes. O letreiro funde com
   o que está atrás (screen): sobre o fundo escuro ele fica como é, e onde cruza o mapa os fios e os nós acendem através das letras. */
.mapa { position: relative; width: calc(800 * var(--u)); margin: 0 calc(140 * var(--u)) 0 auto; }
.regiao__titulo {
  --lh: 0.86; position: absolute; z-index: 2; left: calc(150 * var(--u)); top: 50%; translate: 0 -50%; margin: 0;
  font-weight: 700; letter-spacing: -0.035em; text-transform: uppercase; pointer-events: none; mix-blend-mode: screen;
}
.regiao__titulo .ln { white-space: nowrap; }
.regiao__titulo .ln > span { width: max-content; padding-right: 0.06em; }
.regiao__l1 { font-size: calc(150 * var(--u)); }
.regiao__l1 > span { color: var(--creme); }
.regiao__l2, .regiao__l3 { font-size: calc(250 * var(--u)); }
.regiao__l2 > span, .regiao__l3 > span { background: var(--grad-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }
.regiao__l3 { padding-left: calc(330 * var(--u)); }
.mapa svg.net--map { width: 100%; height: auto; }

/* ---------- 5 · marco zero ---------- */
/* Só o vídeo do encontro, de ponta a ponta (em 13/10/2026 saíram a marca em traço, a tela recortada e, depois, o texto e o véu).
   .marco__fundo leva a capa local e, por cima dela, o vídeo do YouTube mudo e em loop (site.js). O vídeo é um iframe 16:9 que cobre a
   caixa como object-fit: cover (unidades de contêiner) e cresce 18% para os cantos do player (título, logo) ficarem fora da tela; a
   capa fica por cima do vídeo (z-index: o iframe entra depois dela no HTML) e só sai quando o player avisa que está tocando e os
   controles dele já sumiram (.is-tocando). Este é o quadro parado (sem JS e com movimento reduzido): a seção tem a proporção do
   vídeo (16:9) até a altura da tela; no celular o vídeo aparece inteiro, num palco mais alto (ver "até 899 px"). Com movimento, o
   vídeo cresce de cartão até a tela inteira (logo abaixo, "o vídeo preenche a tela"). */
.marco { position: relative; isolation: isolate; overflow: hidden; height: min(100vh, 56.25vw); background: #1d0d02; }
@supports (height: 100svh) { .marco { height: min(100svh, 56.25vw); } }
.marco__palco, .marco__janela { position: absolute; inset: 0; }
.marco__fundo { position: absolute; inset: 0; z-index: -1; overflow: hidden; container-type: size; }
.marco__capa, .marco__fundo iframe { position: absolute; left: 50%; top: 50%; translate: -50% -50%; border: 0; pointer-events: none; }
.marco__capa { z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: opacity 1.2s ease; }
.marco__fundo iframe { width: max(100cqw, 177.78cqh); height: max(56.25cqw, 100cqh); scale: 1.18; }
.marco.is-tocando .marco__capa { opacity: 0; }
/* a seção inteira é o link para assistir com som; o play só aparece no hover e no foco do teclado */
.marco__play { position: absolute; inset: 0; display: grid; place-items: center; color: #e8401a; -webkit-tap-highlight-color: transparent; }
.marco__botao {
  display: grid; place-items: center; width: max(64px, calc(112 * var(--u))); aspect-ratio: 1; border-radius: 50%; background: rgba(255, 238, 210, 0.94);
  box-shadow: 0 calc(12 * var(--u)) calc(34 * var(--u)) rgba(10, 4, 0, 0.45); opacity: 0; scale: 0.82; transition: opacity 0.35s ease, scale 0.5s var(--mola);
}
.marco__botao svg { width: 44%; height: 44%; fill: currentColor; translate: 6% 0; }
@media (hover: hover) and (pointer: fine) { .marco__play:hover .marco__botao { opacity: 1; scale: 1; } }
.marco__play:focus-visible .marco__botao { opacity: 1; scale: 1; }
/* o vídeo preenche a tela (com JS e movimento permitido: site.js põe .marco--expande e mede o cartão). A seção ganha duas telas de
   altura e o palco, do tamanho da tela, fica preso no alto enquanto ela passa (sticky). O vídeo chega como um cartão 16:9 de cantos
   redondos no meio da tela e cresce até a tela inteira: a janela abre por recorte (clip-path, de --mz-y/--mz-x até --mz-yf/0) e o
   vídeo cresce junto (scale, de --mz-s até --mz-sf), na mesma curva, o que o mantém cobrindo a janela a cada quadro. No cartão ele
   aparece inteiro; no fim, como capa da tela cheia. Na tela em pé (celular, tablet), onde a capa cortaria os lados do vídeo, ele
   termina na largura toda, inteiro, numa faixa no meio da tela (--mz-yf, --mz-sf; sem o site.js, 0 e 1 = tela cheia).
   Ritmo (faixas da linha do tempo da seção): o crescimento começa com o cartão ainda subindo (entry 70%), para o movimento emendar no
   da página, e termina na metade do trecho preso (contain 50%); a curva sai devagar e assenta sem tranco. A outra metade segura o
   vídeo cheio; na saída, a janela inteira (recorte e vídeo) anda mais devagar que a página (parallax) — se só o vídeo andasse, a
   faixa da tela em pé ficaria vazia em cima. A rolagem conduz tudo no próprio navegador (animation-timeline); onde não há, as mesmas
   animações ficam paradas e o site.js as posiciona pelo progresso (--mz-a, --mz-b). */
@media (prefers-reduced-motion: no-preference) {
  .marco.marco--expande {
    --mz-r: max(16px, calc(28 * var(--u))); --mz-curva: cubic-bezier(0.45, 0, 0.3, 1);
    height: 200vh; overflow: visible; background: var(--escuro); view-timeline: --marco;
  }
  .marco.marco--expande::before { content: none; }
  .marco--expande .marco__palco {
    position: sticky; top: 0; height: 100vh; overflow: hidden;
    background: radial-gradient(ellipse 46% 40% at 50% 50%, rgba(255, 122, 26, 0.2), rgba(243, 49, 23, 0.07) 60%, rgba(243, 49, 23, 0)) var(--escuro);
  }
  .marco--expande .marco__janela { clip-path: inset(var(--mz-y, 18%) var(--mz-x, 22%) round var(--mz-r)); }
  /* o vídeo é o retângulo 16:9 que cobre o palco, inteiro (sem o recorte do .marco__fundo: quem recorta é a janela); --mz-s o
     reduz até a largura do cartão */
  .marco--expande .marco__fundo { inset: 0; width: auto; height: auto; margin: 0; overflow: visible; box-shadow: none; scale: var(--mz-s, 0.56); }
  .marco--expande .marco__capa { width: max(100cqw, 177.78cqh); height: max(56.25cqw, 100cqh); max-width: none; }
  .marco--expande .marco__fundo iframe { width: max(100cqw, 177.78cqh); height: max(56.25cqw, 100cqh); scale: 1.18; }
  .marco--expande .marco__janela, .marco--expande .marco__fundo { animation-fill-mode: both; animation-timing-function: var(--mz-curva); }
  .marco--expande .marco__janela { animation-name: mz-janela, mz-sai; animation-timing-function: var(--mz-curva), linear; }
  .marco--expande .marco__fundo { animation-name: mz-video; }
  @supports (animation-timeline: view()) {
    .marco--expande .marco__janela, .marco--expande .marco__fundo { animation-duration: auto; animation-timeline: --marco; animation-range: entry 70% contain 50%; }
    .marco--expande .marco__janela { animation-timeline: --marco, --marco; animation-range: entry 70% contain 50%, exit 0% exit 100%; }
  }
  @supports not (animation-timeline: view()) {
    .marco--expande .marco__janela, .marco--expande .marco__fundo { animation-duration: 1s; animation-play-state: paused; }
    .marco--expande .marco__janela { animation-delay: calc(var(--mz-a, 0) * -1s), calc(var(--mz-b, 0) * -1s); }
    .marco--expande .marco__fundo { animation-delay: calc(var(--mz-a, 0) * -1s); }
  }
}
@keyframes mz-janela { from { clip-path: inset(var(--mz-y, 18%) var(--mz-x, 22%) round var(--mz-r)); } to { clip-path: inset(var(--mz-yf, 0px) 0px round 0px); } }
@keyframes mz-video { from { scale: var(--mz-s, 0.56); } to { scale: var(--mz-sf, 1); } }
@keyframes mz-sai { from { translate: 0 0; } to { translate: 0 24vh; } }
/* o vídeo com som, numa janela sobre a página (só com mouse; site.js monta e desmonta) */
.marco-modal {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 72px 24px 32px;
  background: rgba(20, 9, 2, 0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.35s ease;
}
.marco-modal.is-aberto { opacity: 1; }
.marco-modal__tela {
  position: relative; width: min(100%, calc((100vh - 120px) * 16 / 9), 1280px); aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px;
  background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); scale: 0.96; transition: scale 0.5s var(--sai);
}
.marco-modal.is-aberto .marco-modal__tela { scale: 1; }
.marco-modal__tela iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.marco-modal__fechar { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--creme); color: var(--tinta); cursor: pointer; transition: scale 0.3s var(--mola); }
.marco-modal__fechar:hover, .marco-modal__fechar:focus-visible { scale: 1.08; }
.marco-modal__fechar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.marco-modal-aberto { overflow: hidden; }

/* ---------- 6 · três frentes ---------- */
.frentes { position: relative; padding: calc(128 * var(--u)) 0 calc(150 * var(--u)); background: var(--grad); }
.frentes__lista { position: relative; z-index: 1; }
.frente { position: relative; display: grid; grid-template-columns: calc(1113 * var(--u)) calc(700 * var(--u)); align-items: center; padding: 0 0 0 calc(55 * var(--u)); }
.frente + .frente { padding-top: calc(39 * var(--u)); }
.frente::after { content: ""; position: absolute; left: calc(68 * var(--u)); right: calc(54 * var(--u)); bottom: 0; height: 1px; background: rgba(255, 238, 210, 0.7); transform-origin: left; }
.frente__nome { font-size: calc(126 * var(--u)); font-weight: 700; letter-spacing: -0.03em; line-height: 1.25; text-transform: uppercase; overflow: hidden; }
/* a palavra inteira (sem JS, ou até site.js separar as letras) e o conjunto de letras partilham a sombra e o deslize do hover.
   A sombra ficou mais funda: laranja sobre vermelho tem pouco contraste (1,3–2,5:1 na arte) e é ela que desenha as letras. */
.frente__palavra, .frente__letras { display: block; width: max-content; padding-right: 0.05em; filter: drop-shadow(0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(110, 6, 0, 0.42)); transition: translate 0.7s var(--sai); }
.frente__palavra, .frente__letras .lt { background: linear-gradient(90deg, #ffa114 0%, #ff7016 55%, #ff4a1c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* letra a letra: cada bloco pinta a sua fatia (--x) de um degradê com a largura da palavra (--w), então a cor segue contínua.
   A folga lateral (--pad, devolvida pela margem negativa) guarda a tinta que passa da caixa — o A e o V encostam na borda; --m repõe o kerning.
   Tudo em em (site.js mede uma vez): vale em qualquer largura de janela. */
.frente__letras .lt {
  display: inline-block; padding-inline: var(--pad); margin-inline: calc(var(--m, 0em) - var(--pad)) calc(var(--pad) * -1);
  background-size: var(--w) 100%; background-position: calc(var(--pad) - var(--x)) 0; background-repeat: no-repeat; transform-origin: 0 100%;
}
.frente--clara .frente__palavra, .frente--clara .frente__letras .lt { background: none; color: var(--creme); }
/* medida da arte (a primeira linha quebra depois de "para"): mais estreita, a coluna não avança sobre a ponta amarela do degradê */
.frente__texto { font-size: max(15px, calc(30 * var(--u))); line-height: 1.14; max-width: calc(660 * var(--u)); }
/* pulso de luz no fio (só existe com JS; site.js anima na entrada e no hover): o mesmo vocabulário das conexões do mapa */
.frente__pulso { position: absolute; left: calc(68 * var(--u)); bottom: -1px; width: max(90px, calc(190 * var(--u))); height: 3px; border-radius: 3px; background: linear-gradient(90deg, rgba(255, 244, 214, 0), #fff4d6 75%, #fff); opacity: 0; pointer-events: none; }
@media (hover: hover) {
  .frente:hover .frente__palavra, .frente:hover .frente__letras { translate: calc(22 * var(--u)) 0; }
}
.js [data-rv="frente"] .frente__palavra { transform: translateY(105%); transition: transform 1.2s var(--sai) calc(var(--i, 0) * 0.12s), translate 0.7s var(--sai); }
/* as letras sobem da máscara uma após a outra (34 ms entre letras; a última de "Conectividade" parte aos 0,41 s) */
.js [data-rv="frente"] .lt { transform: translateY(112%) rotate(6deg); transition: transform 0.95s var(--sai) calc(var(--i, 0) * 0.12s + var(--k, 0) * 34ms); }
.js [data-rv="frente"] .frente__texto { opacity: 0; transform: translateY(calc(30 * var(--u))); transition: opacity 0.9s ease calc(0.25s + var(--i, 0) * 0.12s), transform 1.1s var(--sai) calc(0.25s + var(--i, 0) * 0.12s); }
.js [data-rv="frente"]::after { transform: scaleX(0); transition: transform 1.5s var(--sai) calc(0.1s + var(--i, 0) * 0.12s); }
.js [data-rv="frente"].is-in .frente__palavra, .js [data-rv="frente"].is-in .lt, .js [data-rv="frente"].is-in .frente__texto { opacity: 1; transform: none; }
.js [data-rv="frente"].is-in::after { transform: none; }

/* ---------- 7 · programa comércio digital ---------- */
.programa { position: relative; z-index: 1; background: var(--escuro); }
/* a foto começa 26 px da arte acima da seção: o cabelo da comerciante encosta na faixa das frentes */
.programa__cena { position: relative; top: calc(-26 * var(--u)); margin-bottom: calc(-26 * var(--u)); }
.programa__foto img { width: 100%; }
.programa__titulo { position: absolute; left: calc(1045 * var(--u)); top: calc(349 * var(--u)); width: calc(645 * var(--u)); }
.programa__marcas { position: absolute; left: calc(75 * var(--u)); top: calc(841 * var(--u)); width: calc(720 * var(--u)); }

.cta {
  --h: max(54px, calc(80 * var(--u)));
  position: absolute; left: 50%; top: calc(985 * var(--u)); margin-left: calc(-225 * var(--u));
  display: inline-flex; align-items: center; justify-content: space-between; gap: calc(30 * var(--u));
  width: calc(451 * var(--u)); height: var(--h); padding: 0 calc(11 * var(--u)) 0 calc(62 * var(--u)); border-radius: 99px;
  background: linear-gradient(90deg, #d42511 0%, #f31f12 45%, #f4541a 100%); color: #fff; text-decoration: none;
  box-shadow: 0 calc(14 * var(--u)) calc(34 * var(--u)) rgba(20, 6, 0, 0.35);
}
.cta__rot { font-size: max(15px, calc(29 * var(--u))); font-weight: 700; letter-spacing: 0; text-transform: uppercase; white-space: nowrap; }
.cta__seta { display: grid; place-items: center; width: calc(var(--h) * 0.74); height: calc(var(--h) * 0.74); flex: none; border-radius: 50%; background: var(--creme); color: #f0401a; transition: transform 0.6s var(--sai), background-color 0.3s ease; }
.cta__seta svg { width: 52%; height: 52%; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.6s var(--sai); }
.cta:hover .cta__seta, .cta:focus-visible .cta__seta { background: #fff; transform: scale(1.08); }
.cta:hover .cta__seta svg, .cta:focus-visible .cta__seta svg { transform: translateX(14%); }

/* ---------- 8 · parceiros ---------- */
/* Sem JS ou com movimento reduzido: a lista parada, como na arte. Com JS ela vira esteira (.is-esteira, site.js): três cópias lado a
   lado andam uma largura de lista por volta, então a emenda nunca aparece (cobre janelas de até duas listas de largura).
   A esteira para sob o ponteiro, fora da tela e em aba oculta. A folga vertical da faixa é o espaço do salto e do pulso do hover. */
.parceiros { padding: calc(140 * var(--u)) 0 calc(210 * var(--u)); background: var(--escuro); }
.parceiros__lista { display: flex; align-items: center; justify-content: space-between; padding-inline: calc(100 * var(--u)); }
.parceiros__lista li { position: relative; flex: none; }
.parceiros__lista img { height: calc(118 * var(--u)); width: auto; transition: opacity 0.4s ease, scale 0.6s var(--sai), translate 0.6s var(--sai); }
.is-esteira {
  overflow: hidden; margin-block: calc(-40 * var(--u)); padding-block: calc(40 * var(--u));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.is-esteira .parceiros__trilho { --vao: calc(112 * var(--u)); display: flex; width: max-content; animation: esteira 48s linear infinite; }
.is-esteira .parceiros__lista { flex: none; justify-content: flex-start; gap: var(--vao); padding-inline: 0 var(--vao); }
.is-esteira.is-fora .parceiros__trilho, .js.is-hidden .parceiros__trilho { animation-play-state: paused; }
@keyframes esteira { to { transform: translateX(calc(-100% / 3)); } }
/* hover (só ponteiro fino): a esteira para, as outras marcas recuam e a apontada se anima — sobe com mola e um pulso de luz passa por
   baixo dela, no vocabulário dos fios das frentes e do mapa. Fora do hover essas animações não existem. */
.parceiros__lista li::after {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: calc(-14 * var(--u)); height: 2px; border-radius: 2px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 174, 24, 0), #ffae18 42%, #fff1d6 58%, rgba(255, 174, 24, 0));
}
@media (hover: hover) and (pointer: fine) {
  .is-esteira:hover .parceiros__trilho { animation-play-state: paused; }
  .parceiros__faixa:hover img { opacity: 0.36; }
  .parceiros__lista li:hover img { opacity: 1; scale: 1.08; translate: 0 -6%; transition: opacity 0.25s ease, scale 0.6s var(--mola), translate 0.6s var(--mola); }
  .parceiros__lista li:hover::after { animation: marca-pulso 0.95s var(--vai) 0.06s both; }
}
@keyframes marca-pulso { 0% { opacity: 0; transform: translateX(-46%) scaleX(0.55); } 22%, 72% { opacity: 1; } 100% { opacity: 0; transform: translateX(46%) scaleX(0.55); } }

/* ---------- rodapé ---------- */
.rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding: max(22px, calc(40 * var(--u))) max(20px, calc(100 * var(--u))); border-top: 1px solid rgba(255, 238, 210, 0.12); font-size: max(13px, calc(18 * var(--u))); text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255, 238, 210, 0.7); }
.rodape ul { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.rodape a { text-decoration: none; transition: color 0.25s; }
.rodape a:hover { color: #fff; }
/* crédito de autoria: marca oficial da Siteflux na variante para fundo escuro, numa linha própria sob o rodapé */
.rodape__credito { flex-basis: 100%; display: flex; justify-content: center; margin-top: max(6px, calc(14 * var(--u))); padding-top: max(14px, calc(26 * var(--u))); border-top: 1px solid rgba(255, 238, 210, 0.08); font-size: max(11px, calc(15 * var(--u))); font-weight: 700; letter-spacing: 0.14em; line-height: 1; }
.rodape__credito a { display: inline-flex; align-items: center; gap: 0.9em; min-height: 44px; color: rgba(255, 238, 210, 0.62); }
.rodape__credito img { height: clamp(26px, calc(38 * var(--u)), 40px); width: auto; transition: scale 0.5s var(--sai); }
.rodape__credito a:hover img, .rodape__credito a:focus-visible img { scale: 1.05; }

/* ---------- abaixo de 900 px: layout próprio, sem depender das medidas da arte ---------- */
@media (max-width: 899px) {
  :root { --lado: 22px; } /* margem lateral do conteúdo; cresce no tablet (bloco seguinte) */
  .hero__powered { display: none; }
  .hero__logo { width: clamp(132px, 38vw, 190px); top: 18px; }
  .hero__end { bottom: calc(7vh + var(--barra, 0px)); }
  /* a indicação de rolagem fica baixa, onde depois entra a frase: as duas nunca estão na tela ao mesmo tempo */
  .hero__start { bottom: calc(7vh + var(--barra, 0px)); }

  /* no celular o texto ocupa a largura toda e as três barras passavam por cima das linhas: fora do hero o botão ganha uma
     base translúcida (escura ou creme, conforme a seção) e some com o menu aberto */
  .menu-btn::before {
    content: ""; position: absolute; inset: 3px; z-index: -1; border-radius: 13px; background: rgba(45, 22, 4, 0.62);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity 0.35s ease, background-color 0.35s ease;
  }
  .fora-hero .menu-btn::before { opacity: 1; }
  [data-tema-atual="claro"] .menu-btn::before { background: rgba(255, 238, 210, 0.8); }
  .menu-aberto .menu-btn::before { opacity: 0; }

  /* menu: uma linha por link (o mais longo, "Como construímos", define o corpo), linhas altas para o dedo */
  .menu { --m-lado: var(--lado); }
  .menu__nav a { padding: max(9px, 1.5vh) 14px max(9px, 1.5vh) var(--m-lado); font-size: clamp(21px, min(7.4vw, 6.2vh), 56px); }
  .menu__pe { padding-right: 14px; }
  /* celular deitado: a tela é baixa demais para as linhas altas — tudo se compacta para caber sem rolagem */
  @media (max-height: 480px) {
    .menu { padding: 56px 0 12px; }
    .menu__nav a { padding-block: 4px; font-size: clamp(19px, 5.6vh, 26px); }
    .menu__pe { padding-top: 10px; }
    .menu__pe .pilula { --h: 44px; }
  }

  .presente { padding: 56px 0 0; overflow-x: clip; } /* as linhas do título entram de fora da tela (deslizes do celular, no fim da folha) */
  .presente__faixa { display: none; }
  .presente__grade { display: flex; flex-direction: column; padding: 0 var(--lado); gap: 34px; }
  .foto { order: 2; width: 100%; height: auto; aspect-ratio: 706 / 800; border-radius: 28px; }
  .foto img { top: -14%; height: 128%; } /* folga maior para o parallax da foto no celular */
  .js [data-rv="clip"] .foto__janela { clip-path: inset(100% 0 0 0 round 28px); }
  .js [data-rv="clip"].is-in .foto__janela { clip-path: inset(0 0 0 0 round 28px); }
  .presente__texto { display: contents; }
  .presente__texto .t2 { order: 1; font-size: clamp(30px, 9vw, 46px); }
  /* texto corrido do celular: 17 px com entrelinha de leitura, e quebras que evitam palavra sozinha na última linha */
  .corpo, .frente__texto { text-wrap: pretty; }
  .presente__texto .corpo { order: 3; margin-top: 0; font-size: 17px; line-height: 1.38; }
  .presente__acoes { margin-top: 44px; padding: 44px var(--lado) 30vw; background: var(--grad); } /* embaixo: a frase do letreiro */
  .presente__powered { width: min(100%, 320px); margin: 0; }
  /* no celular as três chamadas se empilham, todas da largura da maior; a do meio fica sobre a divisa */
  .pilulas { flex-direction: column; gap: 10px; }
  .pilulas .pilula { display: flex; }
  .pilulas .pilula__rot { flex: 1; justify-content: center; }
  .pilula { --h: 52px; }
  /* encolhe abaixo de ~380 px: em 320 a terceira pílula passava 6 px da tela (15 px com o rótulo em negrito) */
  .pilula__rot { font-size: clamp(10.5px, 3.4vw, 13px); padding: 0 clamp(12px, 4.4vw, 20px); }

  /* a palavra inteira, de margem a margem: site.js mede a palavra na fonte do aparelho (Helvetica no iPhone, Roboto no Android,
     Arial no Windows têm larguras diferentes) e acerta o corpo; 15vw é o que vale sem JS. O deslize com a rolagem é menor que a
     margem (data-px-x-m no HTML: ±2,9vw), para nenhuma letra sair da tela. Cruza a troca de fundo no último terço da altura.
     A frase fica por cima da palavra, encostada no alto dela e sempre acima da troca de fundo, mesmo com o deslize vertical
     (-34 → até 2,8vw): termina em 1,3vw, só encostando nas letras; a troca está em 8vw. "O Vale do Aço" vai em contorno (.contorno-m); "por completo!",
     cheio. Entrelinha mais aberta que a da arte: a 1,04 a cedilha de "AÇO" pousava sobre o E de "COMPLETO". */
  .letreiro { height: auto; top: -8vw; margin-bottom: -8vw; }
  .letreiro__palavra { position: relative; left: 0; padding: 0 4vw; font-size: 15vw; }
  .letreiro__frase { --lh: 1.12; left: auto; right: var(--lado); top: -13vw; font-size: 6.4vw; }
  .letreiro__frase .contorno-m { color: #fff0dc; text-shadow: none; filter: url(#contorno-fino); }
  .como__grade { display: block; padding: 56px var(--lado) 0; }
  .como__grade .t2 { font-size: clamp(24px, 7.4vw, 44px); }
  .como__grade .corpo { padding-top: 26px; font-size: 17px; line-height: 1.38; }
  /* a chamada com corpo de manchete, como no desktop: cada metade quebra em duas linhas (ESSE / MOVIMENTO, É PARA / VOCÊ QUE…).
     A linha interna leva a entrelinha (--lh) e um respiro acima e abaixo que a máscara de .ln guarda para os acentos (É, Ê) */
  .chamada { --lh: 0.97; margin-top: 64px; padding: 0 var(--lado) 6px; font-size: 13.6vw; }
  .chamada .ln { white-space: normal; }
  .chamada .ln > span { width: auto; padding: 0.22em 0 0.16em 0; line-height: var(--lh); }
  .chamada .cl { display: block; width: max-content; padding-right: 0.06em; white-space: nowrap; }
  /* cada parte leva o degradê (fim da folha) e a caixa dela tem só a entrelinha (0.92em): sem esta folga o alto do É e do Ê ficava
     sem tinta. Os 0.24em voltam pela margem, e as letras ficam onde estavam */
  .chamada .cl { padding-top: 0.24em; margin-top: -0.24em; }
  .como__grade { overflow-x: clip; } /* as linhas do título entram de fora da tela (deslizes do celular, abaixo) */

  /* cartões em coluna; a pilha se forma na casa do meio (o de cima desce, o de baixo sobe) e abre na vertical */
  /* embaixo, espaço para a metade de cima da pilha das chamadas (176 px de altura) */
  .publicos { padding: 52px var(--lado) 148px; }
  .publicos__lista { --vao: 14px; --leque: 9px; grid-template-columns: 1fr; grid-auto-rows: 1fr; }
  .publico { min-height: 0; padding: 26px 22px 28px; border-radius: 24px; }
  .publico__sinal { --t: 58px; margin-bottom: 16px; }
  .publico__nome { font-size: 23px; }
  .publico__nome::after { margin: 10px auto 12px; }
  .publico__texto { max-width: 20em; font-size: 16px; line-height: 1.4; }

  /* no celular o letreiro vem em cima, na largura da tela, e o mapa sobe por baixo das últimas letras, encostado à direita */
  .regiao { padding: 138px 0 44px; background: radial-gradient(ellipse 70% 36% at 58% 68%, rgba(255, 122, 26, 0.17), rgba(255, 122, 26, 0.05) 62%, rgba(255, 122, 26, 0)) var(--escuro); }
  .regiao__titulo { --lh: 0.88; position: relative; left: auto; top: auto; translate: none; padding: 0 var(--lado); }
  .regiao__l1 { font-size: 12.2vw; }
  .regiao__l2, .regiao__l3 { font-size: 20vw; }
  .regiao__l3 { padding-left: 6vw; }
  .mapa { width: min(90%, 520px); margin: -30vw 2vw 0 auto; }

  /* quadro parado do Marco Zero no celular (sem JS e com movimento reduzido; com movimento vale "o vídeo preenche a tela", na
     seção 5): o vídeo aparece inteiro, 16:9 na largura da tela (no quadro 4:5 de antes ele perdia dois terços da largura), num palco
     mais alto, no escuro da seção do mapa (sem emenda com ela), com um brilho quente atrás e uma folga em cima e embaixo
     (--mv-curso). No celular deitado a largura do vídeo para em 150% da altura da tela, para ele caber nela. */
  .marco { --mv-w: min(100vw, 150vh); --mv-curso: 15vh; --mv-h: calc(var(--mv-w) * 0.5625); height: calc(var(--mv-h) + var(--mv-curso) * 2); background: var(--escuro); }
  @supports (height: 100svh) { .marco { --mv-w: min(100vw, 150svh); --mv-curso: 15svh; } }
  .marco::before {
    content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background: radial-gradient(ellipse 100% 44% at 50% 50%, rgba(255, 122, 26, 0.46), rgba(243, 49, 23, 0.2) 48%, rgba(243, 49, 23, 0) 74%);
  }
  .marco__fundo { inset: auto 0; top: 50%; width: var(--mv-w); height: var(--mv-h); margin: calc(var(--mv-h) / -2) auto 0; box-shadow: 0 22px 60px rgba(8, 3, 0, 0.55); }
  .marco__fundo iframe { width: 100cqw; height: 100cqh; scale: 1; }

  .frentes { padding: 44px 0 56px; overflow-x: clip; } /* os nomes entram de fora da tela (idem) */
  .frente { display: block; padding: 26px var(--lado) 24px; }
  .frente + .frente { padding-top: 26px; }
  .frente::after { left: var(--lado); right: var(--lado); }
  .frente__pulso { left: var(--lado); }
  .frente__nome { font-size: 10.4vw; }
  .frente__texto { margin-top: 6px; font-size: 17px; line-height: 1.38; max-width: none; }

  .programa__cena { top: -5vw; margin-bottom: -5vw; display: flex; flex-direction: column; align-items: center; padding-bottom: 20px; }
  /* o título sobe para cima da foto (antes ficava abaixo da comerciante): a metade de baixo da foto escurece num degradê até o
     fundo e o título entra sobre ela, maior, com uma sombra que o descola da cena */
  .programa__foto { position: relative; width: 100%; overflow: hidden; }
  .programa__foto::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(180deg, rgba(45, 22, 4, 0) 0%, rgba(45, 22, 4, 0.6) 48%, var(--escuro) 97%); pointer-events: none; }
  .programa__foto img { width: 190%; max-width: none; margin-left: -34%; }
  /* relative (para ficar sobre a foto): left/top da arte zerados, senão viram deslocamento */
  .programa__titulo { position: relative; left: auto; top: auto; z-index: 1; width: min(86vw, 420px); margin-top: -40vw; filter: drop-shadow(0 8px 22px rgba(20, 6, 0, 0.6)); }
  .programa__marcas { position: static; width: min(84vw, 420px); margin-top: 30px; }
  .cta { position: static; margin: 34px 0 0; width: auto; gap: 22px; padding: 0 9px 0 30px; }

  .parceiros { padding: 56px 0 72px; }
  .parceiros__lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 12px; justify-items: center; padding-inline: var(--lado); }
  .is-esteira { margin-block: -20px; padding-block: 20px; }
  .is-esteira .parceiros__trilho { --vao: 38px; animation-duration: 30s; }
  .is-esteira .parceiros__lista { display: flex; }
  .parceiros__lista img { height: clamp(58px, 17vw, 84px); }
  .rodape { justify-content: center; text-align: center; }
  /* links do rodapé com altura de toque (eram 15 px): a folga vertical entra no próprio link e sai do espaço entre as linhas */
  .rodape ul { gap: 0 28px; justify-content: center; }
  .rodape ul a { display: inline-block; padding-block: 14px; }
}
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  .js .publicos__lista:not(.is-in) .publico { transform: translate(calc(var(--k) * var(--leque)), calc(var(--k) * (-100% - var(--vao) - var(--leque)))); }
}

/* ---------- 600 a 899 px (tablet em pé, celular grande deitado): o mesmo layout em coluna, com as medidas de uma tela maior.
   Sem isto o desenho do celular só esticava: texto de 17 px em linhas de mais de 90 letras e a foto ocupando a tela inteira. */
@media (min-width: 600px) and (max-width: 899px) {
  :root { --lado: clamp(30px, 6vw, 52px); }
  .foto { aspect-ratio: 1 / 1; }
  .presente__texto .corpo, .como__grade .corpo, .frente__texto { font-size: clamp(18px, 2.5vw, 21px); line-height: 1.42; max-width: 34em; }
  .presente__powered { width: min(100%, 400px); }
  .pilula__rot { font-size: 13px; padding: 0 20px; }
  .presente__acoes { padding-bottom: 24vw; }
  .letreiro__frase { top: -9.6vw; font-size: 5vw; }
  .chamada { font-size: 8.6vw; } /* aqui cada metade cabe numa linha, como no desktop */
  .chamada .cl { display: inline-block; }
  .como__grade .t2 { font-size: clamp(36px, 6.2vw, 52px); }
  .presente__texto .t2 { font-size: clamp(40px, 6.6vw, 56px); }
  .publicos { padding-block: 64px 160px; }
  .publicos__lista { --vao: 18px; max-width: 600px; margin-inline: auto; }
  .publico { padding: 32px 30px 34px; }
  .publico__sinal { --t: 62px; margin-bottom: 20px; }
  .publico__nome::after { margin: 14px auto 16px; }
  .publico__nome { font-size: 27px; }
  .publico__texto { font-size: 18px; }
  .regiao { padding: 150px 0 56px; }
  .regiao__l1 { font-size: 10vw; }
  .regiao__l2, .regiao__l3 { font-size: 16.5vw; }
  .regiao__l3 { padding-left: 10vw; }
  .mapa { width: min(78%, 600px); margin: -22vw var(--lado) 0 auto; }
  .frente { padding-block: 30px 28px; }
  .frente__texto { margin-top: 8px; }
  .programa__foto img { width: 150%; margin-left: -22%; }
  .programa__titulo { width: min(56vw, 440px); margin-top: -30vw; }
  .parceiros__lista { grid-template-columns: repeat(4, 1fr); gap: 26px 16px; }
  .parceiros__lista img { height: clamp(52px, 9vw, 78px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* entradas: tudo no lugar, sem transição. A lista é explícita de propósito: o antigo ".js [data-rv] *" também zerava transform e
     opacity dos grupos internos do mapa (a figura dele é um [data-rv]) e, com movimento reduzido, o mapa perdia o enquadramento. */
  .js [data-rv], .js [data-rv] .ln > span, .js [data-rv] .foto__janela, .js [data-rv] .foto__janela img, .js [data-rv="varre"] > img,
  .js [data-rv] .frente__palavra, .js [data-rv] .lt, .js [data-rv] .frente__texto, .js [data-rv]::after {
    transition: none !important; transform: none !important; opacity: 1 !important; clip-path: none !important; scale: 1 !important;
  }
  .hero__mouse i, .hero__fone i, .hero__rolar svg { animation: none; }
  .menu, .menu-aberto .menu, .menu__nav li, .menu__nav a::before, .menu__pe, .menu-aberto .menu__pe, .roll, .roll-t, .pilula, .cta { transition: none; }
  .frente__pulso { display: none; }
  .publico, .publico::before, .publico::after, .publico__sinal, .publico__sinal::before, .publico__nome::after { transition: none; }
  .marco__capa, .marco__play, .marco__botao, .marco-modal, .marco-modal__tela, .parceiros__lista img, .rodape__credito img { transition: none; }
}

/* ---------- chat (OdinChat) ---------- */
/* cores, ícone do botão (assets/img/chat-icone.svg) e tema da conversa vêm da configuração montada no <head> do index.html */
/* fora de cena durante a intro e com o menu aberto: o widget usa z-index 999999 e ficaria por cima dos dois */
#my-widget-container { transition: opacity 0.4s ease, visibility 0s; }
.intro-on #my-widget-container, .menu-aberto #my-widget-container, .marco-modal-aberto #my-widget-container { opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s 0.25s; }
/* janela da conversa: o widget a abre com 494 × 676 px fixos e 100 px embaixo para o botão, sem limite de altura. Numa tela de
   notebook (≈ 650 px úteis de altura) o topo saía da tela. Aqui ela fica menor (400 × 600) e nunca passa da área visível; a sombra
   roxa do widget vira a do site. Em tela baixa (celular deitado) ela abre em tela cheia, como o próprio widget faz até 480 px de
   largura. O "html" na frente vence as regras do widget, que entram depois desta folha. */
@media (min-width: 481px) {
  html #my-widget-window { width: 400px; height: 600px; max-width: calc(100vw - 40px); max-height: calc(100vh - 116px); box-shadow: 0 14px 44px rgba(45, 22, 4, 0.34), 0 4px 16px rgba(0, 0, 0, 0.12); }
  @supports (height: 100svh) { html #my-widget-window { max-height: calc(100svh - 116px); } }
}
@media (min-width: 481px) and (max-height: 520px) {
  html #my-widget-window { top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; max-width: none; max-height: none; border-radius: 0; }
}
/* com a conversa em tela cheia (até 480 px de largura ou tela baixa) ela já tem o seu × no alto: o botão flutuante, que vira um X,
   cobria o microfone do campo */
@media (max-width: 480px), (max-height: 520px) { #my-widget-container:has(#my-widget-window.open) #my-widget-button { opacity: 0; visibility: hidden; pointer-events: none; } }

/* ---------- deslizes do celular (até 899 px): letras que cruzam a tela e planos de parallax ----------
   No celular o parallax é conduzido pela rolagem no compositor (animation-timeline: view()), colado ao dedo, sem esperar o JS a
   cada quadro. Dois tipos de movimento, os mesmos em toda a página:
   · letras grandes cruzam a tela: cada peça entra de um lado, assenta alinhada enquanto está na faixa de leitura e sai pelo lado
     oposto (o cruzamento das linhas do desktop, com amplitude de celular). Cada peça usa a própria passagem pela tela (cover 0% →
     100%), então as de baixo chegam um pouco depois, em cascata. Títulos do movimento e do "como", DIGITALIZAR e a frase, a chamada
     (ESSE ←, MOVIMENTO →, É PARA ←, VOCÊ QUE… →), "Conectando o Vale do Aço" e os nomes das três frentes.
   · imagens em planos: a foto anda mais devagar que a página dentro da sua janela (plano distante), e o que está por cima dela
     (o mapa sob o letreiro, o título e as marcas do Programa) anda mais depressa (plano próximo). No meio da passagem tudo está na
     posição do desenho. (O Marco Zero tem o efeito próprio, igual no celular e no desktop: "o vídeo preenche a tela", na seção 5.)
   Quem tem janela própria (overflow hidden: a foto do movimento, a do Programa) dá nome à linha do tempo
   (view-timeline) e o de dentro a usa: view() no de dentro olharia para a janela, que não rola, e a animação ficaria parada.
   Só onde o navegador faz isso; nos outros, e com movimento reduzido, fica o deslize curto do site.js (data-px-m-css no HTML). */
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .letreiro__palavra, .letreiro__frase .ln, .como__grade .t2 .ln, .chamada .cl, .presente__texto .t2 .ln, .regiao__titulo .ln, .mapa,
    .frente__nome, .foto__janela img, .programa__foto img, .programa__titulo, .programa__marcas {
      animation-duration: auto; animation-fill-mode: both; animation-timing-function: linear;
      animation-timeline: view(); animation-range: cover 0% cover 100%;
    }
    .letreiro__palavra { animation-name: dz-palavra; }
    .letreiro__frase .ln:nth-child(2) { animation-name: dz-frase-1; } /* o 1º filho é o texto só para leitor de tela */
    .letreiro__frase .ln:nth-child(3) { animation-name: dz-frase-2; }
    .como__grade .t2 .ln:nth-child(1) { animation-name: dz-titulo-esq; }
    .como__grade .t2 .ln:nth-child(2) { animation-name: dz-titulo-dir; }
    .presente__texto .t2 .ln:nth-child(odd) { animation-name: pz-titulo-esq; }
    .presente__texto .t2 .ln:nth-child(2) { animation-name: pz-titulo-dir; }
    .chamada .ln .cl:nth-child(1) { animation-name: dz-esq; }
    .chamada .ln .cl:nth-child(2) { animation-name: dz-dir; }
    /* v1.15: o resto também anda, como no desktop — o texto corrido em plano próximo, o texto de cada frente atrás do nome, as
       chamadas (pílulas) e o "powered by" entrando de lados alternados */
    .presente__texto .corpo, .como__grade .corpo, .frente__texto, .pilulas > li, .presente__powered {
      animation-duration: auto; animation-fill-mode: both; animation-timing-function: linear;
      animation-timeline: view(); animation-range: cover 0% cover 100%;
    }
    .presente__texto .corpo, .como__grade .corpo { animation-name: tz-plano; }
    .frente:nth-child(odd) .frente__texto { animation-name: fz-texto-dir; }
    .frente:nth-child(even) .frente__texto { animation-name: fz-texto-esq; }
    .pilulas > li:nth-child(odd) { animation-name: pl-esq; }
    .pilulas > li:nth-child(even) { animation-name: pl-dir; }
    .presente__powered { animation-name: pl-esq; }
    .publicos { overflow-x: clip; } /* as pílulas entram de fora da tela */
    .regiao__l1 { animation-name: rz-l1; }
    .regiao__l2 { animation-name: rz-l2; }
    .regiao__l3 { animation-name: rz-l3; }
    .mapa { animation-name: rz-mapa; }
    .frente:nth-child(odd) .frente__nome { animation-name: fz-dir; }
    .frente:nth-child(even) .frente__nome { animation-name: fz-esq; }
    .foto { view-timeline: --foto; }
    .foto__janela img { animation-name: pz-foto; animation-timeline: --foto; }
    .programa__foto { view-timeline: --programa-foto; }
    /* 44%: o centro da parte à vista; 0: o zoom cresce para baixo, a partir do alto da foto, e a cabeça da comerciante (que sai da
       colagem e encosta no alto da imagem) nunca passa da borda da moldura */
    .programa__foto img { transform-origin: 44% 0; animation-name: pg-foto; animation-timeline: --programa-foto; }
    .programa__titulo { animation-name: pg-titulo; }
    .programa__marcas { animation-name: pg-marcas; }
    /* o degradê sai da linha inteira e vai para cada parte: num elemento que desliza ele não acompanharia o texto */
    /* a máscara de cada linha recorta só na vertical: com overflow hidden ela virava contêiner de rolagem e prendia a linha do tempo
       das partes (view() olharia para ela, não para a página); e o recorte lateral cortaria as partes na margem */
    .chamada .ln { overflow-x: visible; overflow-y: clip; }
    .chamada .ln > span { background: none; }
    .chamada .cl { background: var(--grad-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }
  }
}
/* entrada desacelerando, saída acelerando; o trecho parado é o da leitura */
@keyframes dz-palavra {
  0% { translate: 72vw 0; animation-timing-function: cubic-bezier(0.2, 0.7, 0.25, 1); }
  34%, 84% { translate: 0 0; animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45); }
  100% { translate: -32vw 0; }
}
@keyframes dz-frase-1 { 0% { translate: 62vw 0; animation-timing-function: cubic-bezier(0.2, 0.7, 0.25, 1); } 40%, 100% { translate: 0 0; } }
@keyframes dz-frase-2 { 0% { translate: 92vw 0; animation-timing-function: cubic-bezier(0.2, 0.7, 0.25, 1); } 46%, 100% { translate: 0 0; } }
@keyframes dz-titulo-esq { 0% { translate: -46vw 0; animation-timing-function: cubic-bezier(0.2, 0.7, 0.25, 1); } 38%, 100% { translate: 0 0; } }
@keyframes dz-titulo-dir { 0% { translate: 46vw 0; animation-timing-function: cubic-bezier(0.2, 0.7, 0.25, 1); } 42%, 100% { translate: 0 0; } }
/* o título do movimento é o primeiro depois da abertura: chega de menos longe e assenta mais cedo, ainda na metade de baixo da tela */
@keyframes pz-titulo-esq { 0% { translate: -34vw 0; animation-timing-function: cubic-bezier(0.2, 0.7, 0.25, 1); } 30%, 100% { translate: 0 0; } }
@keyframes pz-titulo-dir { 0% { translate: 34vw 0; animation-timing-function: cubic-bezier(0.2, 0.7, 0.25, 1); } 30%, 100% { translate: 0 0; } }
@keyframes dz-esq {
  0% { translate: -64vw 0; animation-timing-function: cubic-bezier(0.2, 0.7, 0.25, 1); }
  32%, 80% { translate: 0 0; animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45); }
  100% { translate: 34vw 0; }
}
@keyframes dz-dir {
  0% { translate: 64vw 0; animation-timing-function: cubic-bezier(0.2, 0.7, 0.25, 1); }
  32%, 80% { translate: 0 0; animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45); }
  100% { translate: -34vw 0; }
}
/* "Conectando o Vale do Aço" e os nomes das três frentes chegam de lados alternados e saem pouco (4–5vw, menos que a margem
   lateral --lado: a primeira letra não sai da tela), para o mapa continuar sob as letras */
@keyframes rz-l1 {
  0% { translate: 40vw 0; animation-timing-function: cubic-bezier(0.2, 0.7, 0.25, 1); }
  36%, 80% { translate: 0 0; animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45); }
  100% { translate: -4vw 0; }
}
@keyframes rz-l2 {
  0% { translate: -50vw 0; animation-timing-function: cubic-bezier(0.2, 0.7, 0.25, 1); }
  40%, 80% { translate: 0 0; animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45); }
  100% { translate: 10vw 0; }
}
@keyframes rz-l3 {
  0% { translate: 58vw 0; animation-timing-function: cubic-bezier(0.2, 0.7, 0.25, 1); }
  44%, 80% { translate: 0 0; animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45); }
  100% { translate: -5vw 0; }
}
/* CONECTIVIDADE e SEGURANÇA pela direita, DADOS pela esquerda */
@keyframes fz-dir {
  0% { translate: 34vw 0; animation-timing-function: cubic-bezier(0.2, 0.7, 0.25, 1); }
  36%, 76% { translate: 0 0; animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45); }
  100% { translate: -4vw 0; }
}
@keyframes fz-esq {
  0% { translate: -34vw 0; animation-timing-function: cubic-bezier(0.2, 0.7, 0.25, 1); }
  36%, 76% { translate: 0 0; animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45); }
  100% { translate: 4vw 0; }
}
/* planos: lineares, como a rolagem. A foto do movimento tem 14% de folga em cima e embaixo (site.css, "até 899 px"). A do Programa
   se afasta (1,12 → 1) e desce dentro da moldura (0 → 8%), nunca sobe: em cima o que se abre é a faixa transparente da imagem, e
   embaixo o corte fica sob o degradê. Na v1.13 ela ampliava a partir do centro e cortava a cabeça da comerciante. */
@keyframes pz-foto { from { translate: 0 -10%; scale: 1.12; } to { translate: 0 10%; scale: 1; } } /* v1.15: e se afasta, como a do Programa */
/* texto corrido em plano próximo: anda um pouco mais depressa que a página (no desktop o bloco de texto tem parallax próprio) */
@keyframes tz-plano { from { translate: 0 6vh; } to { translate: 0 -6vh; } }
/* o texto de cada frente vem atrás do nome, do mesmo lado e de menos longe, e assenta um pouco depois dele */
@keyframes fz-texto-dir {
  0% { translate: 20vw 0; animation-timing-function: cubic-bezier(0.2, 0.7, 0.25, 1); }
  44%, 76% { translate: 0 0; animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45); }
  100% { translate: -3vw 0; }
}
@keyframes fz-texto-esq {
  0% { translate: -20vw 0; animation-timing-function: cubic-bezier(0.2, 0.7, 0.25, 1); }
  44%, 76% { translate: 0 0; animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45); }
  100% { translate: 3vw 0; }
}
/* pílulas e "powered by": entram de lados alternados e assentam no terço de baixo da tela */
@keyframes pl-esq { 0% { translate: -42vw 0; animation-timing-function: cubic-bezier(0.2, 0.7, 0.25, 1); } 34%, 100% { translate: 0 0; } }
@keyframes pl-dir { 0% { translate: 42vw 0; animation-timing-function: cubic-bezier(0.2, 0.7, 0.25, 1); } 34%, 100% { translate: 0 0; } }
@keyframes pg-foto { from { translate: 0 0; scale: 1.12; } to { translate: 0 8%; scale: 1; } }
@keyframes pg-titulo { from { translate: 0 16vw; } to { translate: 0 -16vw; } }
@keyframes pg-marcas { from { translate: 0 6vw; } to { translate: 0 -6vw; } }
@keyframes rz-mapa { from { translate: 0 16vw; } to { translate: 0 -16vw; } }