/* ==========================================================================
   Wirk — site público (appwirk.com) · edição clara
   Direção: a página de lançamento de um aplicativo feito por uma equipe.
   Papel branco, tinta da marca, o azul só onde há ação, fotografia de gente
   grande, o telefone sobre a foto. Escuro só onde o produto aparece.
   A diagonal de 71,6° (o risco do «w») é o único ângulo decorativo.
   ========================================================================== */

@font-face { font-family: "Montserrat"; src: url("../fontes/montserrat-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fontes/montserrat-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fontes/montserrat-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fontes/montserrat-800.ttf") format("truetype"); font-weight: 800; font-display: swap; }

:root {
  --papel: #FFFFFF;
  --fundo: #F3F4F6;
  --fundo-fundo: #E9EBEF;
  --gelo: #E6F4FE;
  --tinta: #0B1220;
  --tinta-suave: #3F4A5C;
  --tinta-fraca: #6C7689;
  --azul: #2563FF;
  --azul-forte: #1F4FD6;
  --azul-claro: #DCE6FF;
  --ciano: #00C2FF;
  --verde: #116339;
  --noite: #0B1220;
  --noite-alta: #16213A;
  --linha: rgba(11, 18, 32, .12);
  --linha-forte: rgba(11, 18, 32, .22);
  --sombra: 0 24px 60px rgba(11, 18, 32, .14);

  --inclinacao: 18.4deg;
  --luz: 112, 84, 46;
  --luz-forca: .5;
  --luz-hero: 34, 84, 170;
  --luz-hero-contratar: 196, 150, 90;

  --curva: cubic-bezier(.22, 1, .36, 1);
  --rapida: 160ms;
  --media: 300ms;

  --largura: 1320px;
  --respiro: clamp(20px, 5vw, 96px);
  /* quanto uma peça pode sangrar até a borda da janela, a partir do contêiner */
  --sangria: max(var(--respiro), (100vw - var(--largura)) / 2);
  --raio: 20px;
  --raio-grande: 32px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font-family: "Montserrat", "Segoe UI", system-ui, sans-serif; font-size: 17px; line-height: 1.55;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 4px; }
/* D4 (11/10/2026): «Pular para o conteúdo», o mesmo padrão do painel. Fica fora da tela até receber o foco (1º Tab). */
.pular {
  position: fixed; left: 12px; top: 12px; z-index: 100; padding: 10px 16px; border-radius: 12px;
  background: var(--tinta); color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; transform: translateY(-160%);
}
.pular:focus { transform: none; }
#conteudo { scroll-margin-top: 80px; }
#conteudo:focus { outline: none; }   /* o <main> recebe o foco do «Pular», mas não é um controle: sem moldura */
svg.i { width: 22px; height: 22px; flex: none; }
.pele { width: min(var(--largura), 100% - 2 * var(--respiro)); margin-inline: auto; }

h1, h2, h3 { font-weight: 800; letter-spacing: -.038em; line-height: 1; margin: 0; }
.titulo-secao { font-size: clamp(32px, 3.6vw, 58px); max-width: 17ch; }
.apoio-secao { color: var(--tinta-suave); font-size: clamp(17px, 1.3vw, 20px); max-width: 56ch; margin: 18px 0 0; line-height: 1.6; }
.miudo { font-size: 13.5px; color: var(--tinta-fraca); }
.link { font-weight: 700; color: var(--azul-forte); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.link .i { width: 18px; height: 18px; transition: transform var(--rapida) var(--curva); }
.link:hover .i { transform: translateX(3px); }

/* ---------- cabeçalho ---------- */
.topo {
  position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .86); backdrop-filter: blur(14px);
  display: flex; align-items: center; justify-content: space-between; padding: 14px var(--respiro);
  box-shadow: 0 1px 0 transparent; transition: box-shadow var(--media);
}
.topo.colado { box-shadow: 0 1px 0 var(--linha); }
.topo .marca { display: inline-flex; align-items: center; }
.topo .marca svg { width: 84px; height: 36px; }
.topo nav { display: flex; align-items: center; gap: 2px; }
.topo nav a { text-decoration: none; font-weight: 600; font-size: 14.5px; color: var(--tinta-suave); padding: 9px 12px; border-radius: 999px; transition: color var(--rapida), background var(--rapida); }
.topo nav a:hover, .topo nav a[aria-current="page"] { color: var(--tinta); background: var(--fundo); }
.topo nav .botao { margin-left: 10px; }
.topo nav a.botao-acao, .topo nav a.botao-acao:hover { color: #fff; background: var(--azul); }
.topo nav a.botao-acao:hover { background: var(--azul-forte); }
@media (max-width: 1180px) { .topo nav a:not(.botao) { display: none; } }

/* marca vetorial: tinta segue o fundo; gradiente e pingo são da marca */
.marca-svg .tinta { stroke: currentColor; }
.marca-svg .tinta-preenchida { fill: currentColor; }
.marca-svg .pingo { fill: var(--ciano); }

/* ---------- botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: 999px; border: 0;
  font-weight: 700; font-size: 15.5px; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform var(--rapida) var(--curva), background var(--rapida), box-shadow var(--media), color var(--rapida);
}
.botao:active { transform: scale(.97); }
.botao .i { width: 20px; height: 20px; }
.botao-acao { background: var(--azul); color: #fff; box-shadow: 0 10px 28px rgba(37, 99, 255, .28); }
.botao-acao:hover { background: var(--azul-forte); }
.botao-tinta { background: var(--tinta); color: #fff; }
.botao-tinta:hover { background: #1A2438; }
.botao-papel { background: #fff; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--linha-forte); }
.botao-papel:hover { box-shadow: inset 0 0 0 1.5px var(--tinta); }
.botao-pequeno { min-height: 42px; padding: 0 16px; font-size: 14px; }

/* lojas «em breve»: sem selo oficial, sem link */
.lojas { display: flex; flex-wrap: wrap; gap: 10px; }
.loja {
  display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 6px 16px 6px 12px; border-radius: 14px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--linha); color: var(--tinta); cursor: default;
}
.loja .i { width: 22px; height: 22px; }
.loja small { display: block; font-size: 10.5px; font-weight: 600; color: var(--tinta-fraca); line-height: 1.1; }
.loja strong { display: block; font-size: 15px; font-weight: 700; line-height: 1.15; }
.loja .breve { margin-left: 4px; font-size: 11px; font-weight: 700; color: var(--azul-forte); padding: 3px 8px; border-radius: 999px; background: var(--azul-claro); white-space: nowrap; }
.escuro .loja { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); color: #fff; }
.escuro .loja small { color: rgba(255, 255, 255, .65); }
.escuro .loja .breve { color: #fff; background: rgba(255, 255, 255, .16); }

/* ---------- o aparelho ---------- */
.aparelho {
  position: relative; width: var(--tam, 300px); aspect-ratio: 393 / 852; border-radius: calc(var(--tam, 300px) * .135);
  background: #05070C; padding: calc(var(--tam, 300px) * .028);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .2), 0 0 0 calc(var(--tam, 300px) * .012) #141A25, var(--sombra), 0 40px 90px rgba(11, 18, 32, .28);
}
.aparelho::before { content: ""; position: absolute; top: calc(var(--tam, 300px) * .055); left: 50%; transform: translateX(-50%); width: calc(var(--tam, 300px) * .27); height: calc(var(--tam, 300px) * .072); border-radius: 999px; background: #05070C; z-index: 3; }
.aparelho .tela { position: absolute; inset: calc(var(--tam, 300px) * .028); border-radius: calc(var(--tam, 300px) * .11); overflow: hidden; background: #0B1220; }
.aparelho .tela img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.03); transition: opacity 480ms var(--curva), transform 680ms var(--curva); }
.aparelho .tela img.ativa { opacity: 1; transform: none; }

/* ---------- hero ---------- */
.hero { padding: clamp(28px, 5vh, 72px) 0 clamp(40px, 7vh, 96px); }
.hero .pele { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.hero h1 { font-size: clamp(38px, 4.9vw, 84px); letter-spacing: -.045em; line-height: .94; }
.hero h1 .linha { display: block; overflow: hidden; }
.hero h1 .linha span { display: inline-block; }
.apoio-hero { font-size: clamp(17px, 1.4vw, 21px); color: var(--tinta-suave); max-width: 40ch; margin: 28px 0 30px; line-height: 1.55; }
.apoio-hero b { color: var(--tinta); font-weight: 700; }

.alternador { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: var(--fundo); margin-bottom: 26px; isolation: isolate; }
.alternador-opcao { position: relative; z-index: 1; background: transparent; border: 0; cursor: pointer; padding: 9px 18px; border-radius: 999px; font-weight: 700; font-size: 13.5px; color: var(--tinta-suave); transition: color var(--media); white-space: nowrap; }
.alternador-opcao[aria-pressed="true"] { color: #fff; }
.alternador-pista { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--tinta); transition: transform var(--media) var(--curva); }
.hero[data-lado="contratar"] .alternador-pista { transform: translateX(100%); }
.lado-copy { min-height: 3.1em; margin: 0 0 22px; }
.lado-copy p { margin: 0; color: var(--tinta-suave); max-width: 44ch; }
.lado-copy p b { color: var(--tinta); }
.acoes-hero { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 16px; }
.nota-hero { margin: 0; }

.hero-visual { position: relative; padding: 0 0 56px 40px; margin-right: calc(-1 * var(--sangria)); }
.foto-hero { position: relative; aspect-ratio: 4 / 4.6; max-height: 640px; border-radius: var(--raio-grande) 0 0 var(--raio-grande); overflow: hidden; background: var(--fundo); }
.foto-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; opacity: 0; transition: opacity 520ms var(--curva); }
.foto-hero img.ativa { opacity: 1; }
.hero-visual .aparelho { --tam: clamp(220px, 19vw, 330px); position: absolute; left: 0; bottom: 0; transform: rotate(-5deg); z-index: 2; }
.cartao-flutuante {
  position: absolute; z-index: 2; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center;
  padding: 12px 16px 12px 12px; border-radius: 16px; background: #fff; box-shadow: var(--sombra); max-width: 280px; z-index: 3;
}
.cartao-flutuante .retrato { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; }
.cartao-flutuante small { display: block; font-size: 11.5px; font-weight: 700; color: var(--azul-forte); }
.cartao-flutuante strong { display: block; font-size: 14px; font-weight: 700; line-height: 1.25; }
.cartao-flutuante span { display: block; font-size: 12.5px; color: var(--tinta-suave); }
.cartao-flutuante.topo-dir { top: 26px; right: var(--respiro); }
.cartao-flutuante [data-lado] { display: none; }
.hero[data-lado="trabalhar"] [data-lado="trabalhar"], .hero[data-lado="contratar"] [data-lado="contratar"] { display: block; }
.hero .tela img[data-lado] { display: block; }

/* ---------- faixa de ocupações ---------- */
.ocupacoes { border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
/* D4 (11/10/2026): lista simples, sem link e com quebra de linha. Antes rolava de lado com a barra escondida e as pílulas
   da direita ficavam cortadas, sem como chegar a elas com o mouse; e todas levavam ao mesmo #lados. */
.ocupacoes .pele { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 10px 0; }
.ocupacoes-lista { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 280px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ocupacoes .rotulo { flex: none; font-size: 12.5px; font-weight: 700; color: var(--tinta-fraca); padding-right: 10px; margin-right: 6px; border-right: 1px solid var(--linha); }
.ocupacao { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--tinta); text-decoration: none; transition: background var(--rapida); }
.ocupacao .i { width: 18px; height: 18px; color: var(--azul-forte); }
@media (max-width: 980px) {   /* D4: no celular e no tablet as pílulas quebram em linhas compactas, sem esconder nenhuma */
  .ocupacoes .rotulo { border-right: 0; padding-right: 0; margin-right: 0; }
  .ocupacoes-lista { flex-basis: 100%; gap: 2px 4px; }
  .ocupacao { padding: 6px 10px; gap: 6px; font-size: 13px; }
  .ocupacao .i { width: 16px; height: 16px; }
}

/* ---------- provas (três colunas com fio no topo) ---------- */
.provas { padding: clamp(48px, 8vh, 88px) 0 8px; }
.provas .pele { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.prova { border-top: 2px solid var(--tinta); padding-top: 18px; }
.prova .i { width: 26px; height: 26px; color: var(--azul-forte); margin-bottom: 12px; }
.prova strong { display: block; font-size: 19px; font-weight: 700; margin-bottom: 8px; letter-spacing: -.01em; }
.prova p { margin: 0; color: var(--tinta-suave); font-size: 16px; line-height: 1.55; }

/* ---------- verbos: bento de quatro peças, cada uma um material ---------- */
.verbos { padding: clamp(56px, 9vh, 120px) 0 0; }
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
.peca { position: relative; overflow: hidden; border-radius: var(--raio-grande); min-height: 380px; padding: 34px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; text-decoration: none; color: inherit; isolation: isolate; }
.peca .texto { align-self: start; max-width: 30ch; }
.peca h3 { font-size: clamp(26px, 2.6vw, 34px); margin-bottom: 10px; }
.peca p { margin: 0 0 18px; font-size: 15.5px; line-height: 1.5; }
.peca .aparelho { --tam: 180px; align-self: end; margin: 0 -30px -150px 0; transform: rotate(-6deg); transition: transform 600ms var(--curva); }
.peca:hover .aparelho { transform: rotate(-6deg) translateY(-14px); }
.peca-gelo { background: var(--gelo); }
.peca-gelo p { color: var(--tinta-suave); }
.peca-noite { background: var(--noite); color: #fff; }
.peca-noite p { color: rgba(255, 255, 255, .78); }
.peca-noite .link { color: #fff; }
.peca-azul { background: var(--azul); color: #fff; }
.peca-azul p { color: #fff; }   /* D4: era .84 (3,9:1); branco sólido dá 4,9:1 */
.peca-azul .link { color: #fff; }
.peca-fundo { background: var(--fundo); }
.peca-fundo p { color: var(--tinta-suave); }

/* ---------- a história: banda escura com o aparelho grudado ---------- */
.historia { margin-top: clamp(56px, 9vh, 120px); background: var(--noite); color: #fff; padding: clamp(32px, 5vh, 72px) 0 0; }
.historia .banda { padding: 0; }
.historia .grade { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 5vw, 96px); align-items: start; }
.grudado { position: sticky; top: 72px; display: grid; justify-items: center; align-content: center; min-height: calc(100vh - 96px); }
.grudado > * { position: relative; }
.grudado .campo { position: absolute; inset: -20% -30%; pointer-events: none; z-index: 0; background: radial-gradient(closest-side, rgba(var(--luz), var(--luz-forca)) 0%, rgba(var(--luz), calc(var(--luz-forca) * .35)) 40%, rgba(11, 18, 32, 0) 72%); filter: blur(12px); transition: background 900ms var(--curva); }
.grudado .aparelho { --tam: clamp(250px, 25vw, 360px); z-index: 1; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .16), 0 40px 90px rgba(0, 0, 0, .5), 0 30px 120px rgba(var(--luz), calc(var(--luz-forca) * .6)); transition: box-shadow 700ms var(--curva); }
.passos { list-style: none; margin: 22px 0 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; z-index: 1; }
.passos li { font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .5); padding: 6px 11px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); transition: color var(--media), background var(--media); }
.passos li.ativo { color: #fff; background: rgba(255, 255, 255, .14); }
.capitulos { position: relative; padding: 6vh 0 6vh 36px; }
.trilha { position: absolute; left: 0; top: 8vh; bottom: 8vh; width: 2px; border-radius: 2px; background: rgba(255, 255, 255, .12); }
.trilha-fio { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--p, 0) * 100%); border-radius: 2px; background: linear-gradient(180deg, var(--azul), var(--ciano)); box-shadow: 0 0 18px rgba(37, 99, 255, .55); }
.capitulo { min-height: 62vh; display: grid; align-content: center; padding: 5vh 0; }
.capitulo .verbo { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; font-size: 15px; letter-spacing: .02em; color: rgba(255, 255, 255, .55); margin: 0 0 14px; }
.capitulo .verbo::before { content: ""; width: 6px; height: 18px; border-radius: 3px; background: rgb(var(--luz-capitulo, 37, 99, 255)); transform: rotate(var(--inclinacao)); }
.capitulo h2 { font-size: clamp(30px, 3.4vw, 48px); max-width: 15ch; margin-bottom: 18px; }
.capitulo p { color: rgba(255, 255, 255, .78); max-width: 46ch; margin: 0 0 14px; font-size: 17.5px; line-height: 1.6; }
.capitulo p b { color: #fff; }
.capitulo .miudo { color: rgba(255, 255, 255, .55); }
.capitulo .miudo a { color: #fff; }
.capitulo .fato { display: inline-flex; align-items: baseline; gap: 10px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .08); font-size: 14px; color: rgba(255, 255, 255, .8); }
.capitulo .fato strong { color: #fff; font-size: 20px; font-weight: 800; }
.telas-moveis { display: none; }

/* ---------- a declaração: tipografia gigante sobre o azul ---------- */
.declaracao { margin: clamp(56px, 9vh, 120px) 0 0; background: var(--azul); color: #fff; padding: clamp(56px, 10vh, 120px) 0; position: relative; overflow: hidden; }
.declaracao::before { content: ""; position: absolute; width: 22%; height: 240%; top: -70%; right: 12%; transform: rotate(var(--inclinacao)); background: rgba(255, 255, 255, .04); }
.declaracao p { position: relative; margin: 0; font-weight: 800; font-size: clamp(30px, 5.2vw, 72px); line-height: .98; letter-spacing: -.035em; text-transform: uppercase; max-width: 18ch; }
.declaracao small { position: relative; display: block; margin-top: 26px; font-size: 15px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: #fff; }   /* D4: era .8 (3,7:1) */

/* ---------- compatibilidade: foto com cartões + lista com fios ---------- */
.compat { padding: clamp(64px, 11vh, 140px) 0; }
.compat .grade { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.compat-foto { position: relative; margin: 0; aspect-ratio: 4 / 5; max-height: 620px; border-radius: var(--raio-grande); overflow: hidden; background: var(--fundo); }
.compat-foto img { width: 100%; height: 100%; object-fit: cover; }
.flutuante { position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: #fff; box-shadow: var(--sombra); font-size: 14px; font-weight: 600; line-height: 1.25; }
.flutuante small { display: block; color: var(--tinta-suave); font-weight: 500; font-size: 12.5px; }
.flutuante .i { width: 20px; height: 20px; color: var(--azul-forte); }
.flutuante strong { font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--azul-forte); }
.f1 { left: 20px; top: 20px; } .f2 { right: 20px; top: 44%; } .f3 { left: 20px; bottom: 22px; }
.lista-fio { list-style: none; margin: 22px 0 0; padding: 0; }
.lista-fio li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid var(--linha); }
.lista-fio li:last-child { border-bottom: 1px solid var(--linha); }
.lista-fio .n { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 14px; background: var(--gelo); color: var(--azul-forte); }
.lista-fio .i { width: 24px; height: 24px; color: var(--azul-forte); margin-top: 2px; }
.lista-fio strong { display: block; font-size: 16.5px; font-weight: 700; }
.lista-fio span { display: block; font-size: 14.5px; color: var(--tinta-suave); margin-top: 2px; }

/* ---------- galeria de telas: banda cinza rolável ---------- */
.galeria { background: var(--fundo); padding: clamp(56px, 9vh, 120px) 0; }
.galeria .trilho { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 34px var(--respiro) 20px; margin: 0 calc(-1 * var(--respiro)); scrollbar-width: none; }
.galeria .trilho::-webkit-scrollbar { display: none; }
.galeria figure { flex: none; scroll-snap-align: start; margin: 0; width: 220px; }
.galeria .aparelho { --tam: 220px; }
.galeria figcaption { margin-top: 16px; }
.galeria figcaption strong { display: block; font-size: 15px; font-weight: 700; }
.galeria figcaption span { display: block; font-size: 13px; color: var(--tinta-suave); }
.galeria .setas { display: flex; gap: 8px; }
.seta-botao { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; box-shadow: inset 0 0 0 1px var(--linha); display: grid; place-items: center; cursor: pointer; color: var(--tinta); }
.seta-botao:hover { box-shadow: inset 0 0 0 1px var(--tinta); }
.seta-botao .i { width: 18px; height: 18px; }
.seta-botao.volta .i { transform: rotate(180deg); }
.cabeca-galeria { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; }

/* ---------- dois lados: foto + lista, alternando ---------- */
.lado { padding: clamp(64px, 11vh, 140px) 0 0; }
.lado .grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.lado.invertido .grade > .foto { order: 2; }
.lado .foto { position: relative; margin: 0; aspect-ratio: 4 / 5; max-height: 600px; border-radius: var(--raio-grande); overflow: hidden; background: var(--fundo); }
.lado .foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.lado .foto .aparelho { --tam: 170px; position: absolute; right: 22px; bottom: -40px; transform: rotate(5deg); }
.lado .porta { font-size: 14px; font-weight: 700; color: var(--azul-forte); margin: 0 0 10px; }
.lado .acoes { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- a jornada em nove passos ---------- */
.jornada { padding: clamp(64px, 11vh, 140px) 0 0; }
.jornada ol { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; counter-reset: passo; }
.jornada li { counter-increment: passo; border-top: 1px solid var(--linha); padding: 18px 0 22px; display: grid; grid-template-columns: 44px 1fr; gap: 10px; }
.jornada li::before { content: counter(passo, decimal-leading-zero); font-weight: 800; font-size: 15px; color: var(--azul-forte); padding-top: 2px; }
.jornada strong { display: block; font-size: 16px; font-weight: 700; }
.jornada span { display: block; font-size: 14px; color: var(--tinta-suave); margin-top: 3px; }
.jornada .marco strong { color: var(--verde); }
.jornada .marco::before { color: var(--verde); }

/* ---------- premium: o bloco azul ---------- */
.premium { margin-top: clamp(64px, 11vh, 140px); background: var(--azul); color: #fff; padding: clamp(56px, 8vh, 96px) 0; position: relative; overflow: hidden; isolation: isolate; }
.premium::before { content: ""; position: absolute; z-index: -1; width: 22%; height: 220%; top: -60%; left: 46%; transform: rotate(var(--inclinacao)); background: rgba(255, 255, 255, .04); }   /* D4: era .06; com .06 nem o branco sólido passava de 4,5:1 sobre a faixa */
.premium-cartaz { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 80px); align-items: center; }
.premium-texto h2 { font-size: clamp(28px, 3.2vw, 42px); margin-bottom: 14px; }
.premium-texto p { color: rgba(255, 255, 255, .86); margin: 0 0 14px; max-width: 44ch; }
.premium-texto .miudo { color: rgba(255, 255, 255, .7); }
.premium-tabela { border-radius: 18px; background: rgba(11, 18, 32, .28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); overflow: hidden; }
.premium-tabela .linha { display: grid; grid-template-columns: 1.4fr 1fr 1fr; align-items: center; gap: 12px; padding: 14px 18px; font-size: 14.5px; }
.premium-tabela .linha + .linha { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
.premium-tabela .cabeca { font-weight: 800; font-size: 13px; color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .08); }
.premium-tabela [role="rowheader"] { font-weight: 600; }
.premium-tabela [role="cell"] { color: rgba(255, 255, 255, .85); }
.premium-tabela [role="cell"] strong { color: #fff; font-weight: 800; font-size: 18px; }
.premium-tabela .destaque { color: #fff; font-weight: 700; }
.premium-tabela .ok { width: 20px; height: 20px; color: #B8FFD7; }

/* ---------- privacidade: lista em duas colunas com fios ---------- */
.privacidade { padding: clamp(64px, 11vh, 140px) 0 0; }
.priv-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin-top: 28px; }
.priv { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 22px 0; border-top: 1px solid var(--linha); }
.priv .i { width: 26px; height: 26px; color: var(--azul-forte); margin-top: 2px; }
.priv strong { display: block; font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.priv p { margin: 0; color: var(--tinta-suave); font-size: 15px; }

/* ---------- o que já existe e o que vem ---------- */
.estado { padding: clamp(64px, 11vh, 140px) 0 0; }
.estado .grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.coluna { border-radius: var(--raio); padding: 26px 28px; }
.coluna-ok { background: var(--gelo); }
.coluna-vem { background: var(--fundo); }
.coluna-vem .miudo { color: var(--tinta-suave); }   /* D4: tinta-fraca sobre o cinza dava 4,2:1 */
.coluna strong.titulo { display: block; font-size: 15px; font-weight: 800; margin-bottom: 14px; }
.coluna ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.coluna li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--tinta-suave); }
.coluna li .i { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.coluna-ok li .i { color: var(--verde); }
.coluna-vem li .i { color: var(--tinta-fraca); }
.coluna .miudo { margin: 16px 0 0; }

/* ---------- perguntas: linhas com fio ---------- */
.perguntas { padding: clamp(64px, 11vh, 140px) 0 0; }
.faq-grade { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.faq details { border-top: 1px solid var(--linha); }
.faq details:last-child { border-bottom: 1px solid var(--linha); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-weight: 700; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { width: 22px; height: 22px; color: var(--tinta); transition: transform var(--media) var(--curva); }
.faq details[open] summary .i { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 0 22px; color: var(--tinta-suave); font-size: 15.5px; max-width: 60ch; }

/* ---------- baixar: banda escura com o QR ---------- */
.baixar { margin-top: clamp(64px, 11vh, 140px); background: var(--noite); color: #fff; padding: clamp(56px, 8vh, 96px) 0; position: relative; overflow: hidden; isolation: isolate; }
.baixar::before { content: ""; position: absolute; z-index: -1; width: 24%; height: 220%; top: -60%; right: 8%; transform: rotate(var(--inclinacao)); background: rgba(255, 255, 255, .04); }
.cartaz { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.cartaz .qr { width: clamp(180px, 22vw, 250px); aspect-ratio: 1; border-radius: 20px; background: #fff; padding: 16px; display: grid; place-items: center; }
.cartaz .qr img { width: 100%; height: 100%; image-rendering: pixelated; }
.cartaz h2 { font-size: clamp(28px, 3.4vw, 44px); max-width: 16ch; margin-bottom: 12px; }
.cartaz p { color: rgba(255, 255, 255, .8); max-width: 46ch; margin: 0 0 22px; }
.cartaz .lojas { margin-top: 20px; }
.cartaz .aviso { margin-top: 18px; font-size: 13px; color: rgba(255, 255, 255, .62); max-width: 58ch; }
.cartoes-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: clamp(28px, 4vh, 48px); }
.duo { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 22px 24px; border-radius: var(--raio); text-decoration: none; color: #fff; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); transition: background var(--rapida); }
.duo:hover { background: rgba(255, 255, 255, .12); }
.duo .icone { width: 52px; height: 52px; border-radius: 14px; background: #fff; display: grid; place-items: center; color: var(--tinta); }
.duo .icone .i { width: 24px; height: 24px; }
.duo .icone .marca-svg { width: 30px; height: 26px; }
.duo strong { display: block; font-weight: 800; font-size: 17px; }
.duo small { display: block; font-size: 13.5px; color: rgba(255, 255, 255, .7); margin-top: 2px; }
.duo > .i { width: 20px; height: 20px; }

/* ---------- rodapé ---------- */
.rodape { background: var(--fundo); padding: 56px 0 36px; }
.rodape .colunas { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 28px; margin-bottom: 36px; }
.rodape .col-marca .marca-svg { width: 84px; height: 36px; margin-bottom: 14px; }
.rodape .assinatura { margin: 0 0 8px; font-weight: 800; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; }
.rodape .assinatura .r { color: var(--azul-forte); }
.rodape .mini { font-size: 14px; color: var(--tinta-suave); max-width: 34ch; margin: 0; }
.rodape nav { display: grid; gap: 8px; align-content: start; }
.rodape nav strong { font-size: 13px; font-weight: 800; margin-bottom: 4px; }
.rodape nav a { font-size: 14.5px; color: var(--tinta-suave); text-decoration: none; }
.rodape nav a:hover { color: var(--tinta); }
.rodape .linha2 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--tinta-suave); border-top: 1px solid var(--linha); padding-top: 22px; }

/* ---------- páginas de texto ---------- */
.pagina { padding: clamp(36px, 6vh, 72px) 0 clamp(64px, 11vh, 140px); }
.pagina .cabeca { max-width: 62ch; margin-bottom: 40px; }
.pagina h1 { font-size: clamp(34px, 5vw, 64px); margin-bottom: 16px; }
.pagina .cabeca p { font-size: 19px; color: var(--tinta-suave); margin: 0; }
.pagina .cabeca .data { margin-top: 14px; font-size: 13px; color: var(--tinta-fraca); }
.prosa { max-width: 68ch; }
.prosa h2 { font-size: clamp(22px, 2.4vw, 30px); margin: 44px 0 12px; }
.prosa h3 { font-weight: 700; font-size: 18px; margin: 26px 0 8px; }
.prosa p, .prosa li { color: var(--tinta-suave); }
.prosa p b, .prosa li b { color: var(--tinta); font-weight: 700; }
.prosa ul { padding-left: 20px; }
.prosa li { margin: 6px 0; }
.prosa table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 14px 0; }
.prosa th, .prosa td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.prosa th { color: var(--tinta); font-weight: 700; font-size: 13px; }
.prosa td { color: var(--tinta-suave); }
.prosa .quadro { padding: 18px 20px; border-radius: 14px; background: var(--gelo); margin: 18px 0; }
.prosa .quadro p { margin: 0; color: var(--tinta); }
.tabela-rolavel { overflow-x: auto; }
.quem .verbos-quem { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 26px 0 8px; }
.quem .verbos-quem div { padding: 20px 22px; border-radius: 16px; background: var(--fundo); }
.quem .verbos-quem strong { display: block; font-weight: 800; font-size: 22px; margin-bottom: 6px; }
.quem .verbos-quem p { margin: 0; font-size: 15px; }
.quem .naoe { display: grid; gap: 8px; padding: 0; list-style: none; }
.quem .naoe li { display: flex; gap: 12px; align-items: baseline; }
.quem .naoe li::before { content: ""; width: 5px; height: 14px; border-radius: 3px; background: var(--tinta-fraca); transform: rotate(var(--inclinacao)); flex: none; }

/* ---------- responsivo ---------- */
@media (max-width: 980px) {
  .hero .pele { grid-template-columns: 1fr; }
  .hero-visual { padding: 0 0 30px 20px; max-width: 520px; }
  .hero-visual .aparelho { --tam: 200px; }
  .cartao-flutuante.topo-dir { right: 0; }
  .provas .pele { grid-template-columns: 1fr; gap: 18px; }
  .bento { grid-template-columns: 1fr; }
  .peca { min-height: 0; grid-template-columns: 1fr; padding: 28px 24px 0; }
  .peca .aparelho { margin: 10px auto -120px; --tam: 170px; transform: none; }
  .historia .grade { grid-template-columns: 1fr; }
  .grudado { display: none; }
  .telas-moveis { display: block; }
  .capitulo { min-height: 0; padding: 5vh 0; }
  .capitulo .tela-movel { display: grid; place-items: center; margin: 18px 0 6px; }
  .capitulo .tela-movel .aparelho { --tam: min(240px, 60vw); }
  .compat .grade, .lado .grade, .faq-grade, .estado .grade, .priv-grade, .cartoes-duo { grid-template-columns: 1fr; }
  .lado.invertido .grade > .foto { order: 0; }
  .lado .foto { max-height: 460px; aspect-ratio: 4 / 3; }
  .lado .foto .aparelho { display: none; }
  .compat-foto { max-height: 460px; aspect-ratio: 4 / 3; }
  .jornada ol { grid-template-columns: 1fr; }
  .premium-cartaz { grid-template-columns: 1fr; }
  .cartaz { grid-template-columns: 1fr; }
  .rodape .colunas { grid-template-columns: 1fr 1fr; }
  .quem .verbos-quem { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .topo { padding: 12px 20px; }
  .topo nav .botao { min-height: 42px; padding: 0 14px; font-size: 13.5px; margin-left: 0; }
  .hero h1 { font-size: clamp(32px, 9.4vw, 46px); }
  .alternador { display: grid; width: 100%; }
  .acoes-hero .botao, .cartaz .botao { width: 100%; }
  .lojas { width: 100%; }
  .loja { flex: 1 1 100%; }
  .hero-visual { padding-left: 0; }
  .hero-visual .aparelho { --tam: 150px; left: 8px; }
  .cartao-flutuante { max-width: 230px; }
  .premium-tabela .linha { grid-template-columns: 1.2fr 1fr 1fr; font-size: 13px; padding: 12px; }
  .rodape .colunas { grid-template-columns: 1fr; }
  .galeria figure, .galeria .aparelho { width: 200px; --tam: 200px; }
  .declaracao p { font-size: clamp(30px, 10vw, 44px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .hero h1 .linha span { transform: none !important; }
}

@media (min-width: 1600px) {
  :root { --largura: 1480px; }
  .peca { min-height: 440px; }
  .peca .aparelho { --tam: 210px; margin-bottom: -170px; }
  .galeria figure, .galeria .aparelho { width: 250px; --tam: 250px; }
  .grudado .aparelho { --tam: 360px; }
}
@media (max-width: 980px) {
  .hero-visual { margin-right: 0; }
  .foto-hero { aspect-ratio: 4 / 5; border-radius: var(--raio-grande); }
  .cartao-flutuante.topo-dir { right: 0; }
}

/* ---------- acabamento em tela larga: nada de área morta ---------- */
.declaracao-grade { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.declaracao-aparelho { display: grid; justify-items: end; }
.declaracao-aparelho .aparelho { --tam: clamp(220px, 17vw, 300px); transform: rotate(6deg); }
.faq-lateral { margin-top: 28px; padding: 24px; border-radius: var(--raio); background: var(--fundo); display: grid; gap: 8px; justify-items: start; max-width: 380px; }
.faq-lateral .i { width: 26px; height: 26px; color: var(--azul-forte); }
.faq-lateral strong { font-size: 17px; font-weight: 800; }
.faq-lateral p { margin: 0 0 6px; font-size: 14.5px; color: var(--tinta-suave); }
.cartaz { grid-template-columns: auto minmax(0, 1fr) auto; }
.cartaz-aparelho { display: grid; align-items: end; }
.cartaz-aparelho .aparelho { --tam: clamp(200px, 15vw, 260px); transform: rotate(-6deg); }
@media (min-width: 1180px) {
  .compat-foto, .lado .foto { aspect-ratio: 1 / 1; max-height: none; }
}
@media (max-width: 1180px) {
  .cartaz { grid-template-columns: auto minmax(0, 1fr); }
  .cartaz-aparelho { display: none; }
}
@media (max-width: 980px) {
  .declaracao-grade { grid-template-columns: 1fr; }
  .declaracao-aparelho { display: none; }
  .cartaz { grid-template-columns: 1fr; }
}

/* ---------- menu do celular ---------- */
.menu-botao { display: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--fundo); place-items: center; cursor: pointer; color: var(--tinta); }
.menu-botao .i { width: 22px; height: 22px; }
@media (max-width: 1180px) {
  .topo { flex-wrap: wrap; }
  .topo .marca { margin-right: auto; }
  .menu-botao { display: grid; order: 3; }
  .topo .cta-fora { display: inline-flex; order: 2; margin-right: 10px; }
  .topo nav { order: 4; flex-basis: 100%; display: none; flex-direction: column; align-items: stretch; gap: 2px; padding: 12px 0 6px; border-top: 1px solid var(--linha); margin-top: 12px; }
  .topo.aberto nav { display: flex; }
  .topo nav a:not(.botao) { display: block; padding: 12px 10px; font-size: 16px; border-radius: 10px; }
  .topo nav .botao { margin: 8px 0 0; order: 5; }
  .topo nav .botao-acao { justify-content: center; }
}
@media (max-width: 1180px) and (min-width: 521px) {
  .topo nav .botao { display: inline-flex; }
}

.simbolos { position: absolute; }
.espaco-cima { margin-top: 16px; }

/* ==========================================================================
   v4 — a gramática do aplicativo na página: luz da foto, trajetória na
   diagonal, a lombada como estrutura de fundo, e o produto em movimento
   ========================================================================== */
.hero, .verbos, .jornada, .perguntas { position: relative; isolation: isolate; overflow: hidden; }
.lombada { position: absolute; z-index: -1; top: -60%; right: 14%; width: 22vw; height: 220%; transform: rotate(var(--inclinacao)); pointer-events: none; will-change: transform; }
.lombada.esquerda { right: auto; left: 6%; }
.lombada-gelo { background: var(--gelo); }
.lombada-fundo { background: var(--fundo); }
.hero .lombada { right: 30%; width: 26vw; }
.verbos { padding-bottom: 8px; }

/* o campo de luz do hero: a cor vem da fotografia, como no aplicativo */
.hero-visual::before { content: ""; position: absolute; z-index: -1; inset: -12% -18% -6% -20%; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--luz-hero), .42) 0%, rgba(var(--luz-hero), .18) 45%, rgba(255, 255, 255, 0) 72%); filter: blur(18px); transition: background 800ms var(--curva); pointer-events: none; }
.hero[data-lado="contratar"] .hero-visual::before { background: radial-gradient(closest-side, rgba(var(--luz-hero-contratar), .42) 0%, rgba(var(--luz-hero-contratar), .18) 45%, rgba(255, 255, 255, 0) 72%); }

/* o aparelho: filme do app dentro, vidro por cima, e a troca de tela viaja pela diagonal */
.aparelho .tela video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0B1220; }
.aparelho .tela > video, .aparelho .tela > img { opacity: 0; transform: translate(-16%, 48%) scale(.98); transition: opacity 420ms var(--curva), transform 620ms var(--curva); }
.aparelho .tela > video.ativa, .aparelho .tela > img.ativa { opacity: 1; transform: none; }
.aparelho .tela > .saindo { opacity: 0; transform: translate(16%, -48%) scale(.98); }
.aparelho .tela::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(112deg, rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, .03) 28%, rgba(255, 255, 255, 0) 46%); }
.aparelho .lateral { position: absolute; right: -3px; top: 22%; width: 3px; height: 9%; border-radius: 2px; background: #1B2230; }
.aparelho .lateral.b { top: 34%; height: 6%; right: auto; left: -3px; }
.aparelho .lateral.c { top: 42%; height: 6%; right: auto; left: -3px; }
.hero-visual .aparelho { transition: transform 420ms var(--curva); transform-style: preserve-3d; }

/* a foto do hero anda mais devagar que o aparelho na rolagem */
.foto-hero { will-change: transform; }
.cartao-flutuante { transition: transform 620ms var(--curva), opacity 420ms var(--curva); }
.cartao-flutuante.troca { transform: translate(10%, -30%); opacity: 0; }

@media (max-width: 980px) {
  .lombada { width: 40vw; }
  .hero .lombada { right: -6%; }
}
@media (prefers-reduced-motion: reduce) {
  .aparelho .tela > video, .aparelho .tela > img { transform: none; }
}


/* ---------- o aparelho em três dimensões (17/09/2026) ---------- */
/* perspectiva sem preserve-3d no contêiner: com ele, a foto e o aparelho dividiam o mesmo espaço e se cortavam */
.hero-visual { perspective: 1400px; perspective-origin: 62% 38%; }
.hero-visual .aparelho {
  --rx: 0deg; --ry: -14deg; --rz: -5deg; --flut: 0px;
  transform: translate3d(0, var(--flut), 0) rotate(var(--rz)) rotateY(var(--ry)) rotateX(var(--rx));
  transition: none; will-change: transform; backface-visibility: hidden;
}
.hero-visual .aparelho .camada {
  position: absolute; inset: 0; border-radius: inherit; background: #0A0D14;
  transform: translateZ(calc(-1px * var(--n))); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
  backface-visibility: hidden;
}
.hero-visual .aparelho .camada.fundo {
  background: linear-gradient(160deg, #1A2030, #05070C 70%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14);
  display: grid; place-items: center; backface-visibility: visible; transform: translateZ(calc(-1px * var(--n))) rotateY(180deg);
}
.hero-visual .aparelho .camada.fundo img { width: 30%; opacity: .6; filter: drop-shadow(0 0 14px rgba(255, 255, 255, .18)); }
.hero-visual .aparelho .tela { transform: translateZ(1px); }
.hero-visual .aparelho .tela::after {
  background: linear-gradient(calc(100deg + var(--bx, 0deg)), rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, .16) 47%, rgba(255, 255, 255, .04) 54%, rgba(255, 255, 255, 0) 62%);
  transition: none;
}
.aparelho-sombra {
  position: absolute; left: 4%; bottom: 18px; width: calc(var(--tam, 270px) * 1.1); height: calc(var(--tam, 270px) * .16);
  border-radius: 50%; background: radial-gradient(ellipse at center, rgba(11, 18, 32, .48), rgba(11, 18, 32, 0) 68%);
  filter: blur(9px); transform: translateX(var(--sx, 0px)) scale(var(--ss, 1)); z-index: 1; pointer-events: none;
}
@media (max-width: 980px) {
  .hero-visual { perspective: 1000px; }
  .aparelho-sombra { --tam: 190px; }
}
@media (max-width: 640px) {
  .aparelho-sombra { --tam: 150px; left: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual .aparelho { --ry: -8deg; }
}


/* ---------- o salto (17/09/2026, tarde): WebGL no hero e corpo no aparelho da história ---------- */
/* canvas é elemento substituído: width/height auto = 300×150, então o tamanho vai explícito (com folga pro giro e pro flutuar) */
.hero-visual canvas.aparelho-3d { position: absolute; top: -8%; left: -12%; width: 120%; height: 126%; z-index: 2; pointer-events: none; display: block; }
.hero-visual .aparelho.escondido { opacity: 0 !important; pointer-events: none; box-shadow: none; }
.hero-visual .aparelho.escondido .camada { display: none; }
/* a história: o aparelho grudado com espessura, verso e giro pela rolagem */
.grudado { perspective: 1500px; perspective-origin: 50% 40%; }
.grudado .aparelho { --rx: 0deg; --ry: -16deg; transform: rotateY(var(--ry)) rotateX(var(--rx)); transform-style: preserve-3d; will-change: transform; backface-visibility: hidden; }
.grudado .aparelho .camada { position: absolute; inset: 0; border-radius: inherit; background: #0A0D14; transform: translateZ(calc(-1px * var(--n))); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); backface-visibility: hidden; }
.grudado .aparelho .camada.fundo { background: linear-gradient(160deg, #1A2030, #05070C 70%); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14); display: grid; place-items: center; backface-visibility: visible; transform: translateZ(calc(-1px * var(--n))) rotateY(180deg); }
.grudado .aparelho .camada.fundo img { width: 30%; opacity: .6; }
.grudado .aparelho .tela { transform: translateZ(1px); }
@media (max-width: 980px) { .capitulos { padding-left: 0; } .trilha { display: none; } }
@media (prefers-reduced-motion: reduce) { .grudado .aparelho { --ry: -8deg; } }

/* ---------- proporção (17/09, noite): o alternador como olho da manchete ---------- */
.hero .alternador { margin-bottom: 22px; }
.apoio-hero[hidden] { display: none; }
@media (min-width: 981px) {
  .hero .pele { min-height: min(760px, calc(100vh - 120px)); }
}
@media (min-width: 1600px) { .hero-visual .aparelho { --tam: 360px; } }

/* páginas legais v1.0 AUT: tabela de finalidades rola em tela estreita em vez de espremer as colunas */
@media (max-width: 640px) {
  .tabela-rolavel table { min-width: 600px; }
}

/* A ilha do aparelho não cobre o app: o print do app web não tem barra de status, então a tela começa
   logo abaixo da ilha, como num iPhone de verdade (antes a ilha tapava «Salvos para decidir»). */
.aparelho .tela img, .aparelho .tela > img, .aparelho .tela > video { top: calc(var(--tam, 300px) * .105); bottom: auto; height: calc(100% - var(--tam, 300px) * .105); object-position: 50% 0; }

/* ── Acabamento 22/09 (régua de /johnny/referencias-front/landing.md, sem cortar nada) ─────────────── */
/* Títulos: 700 em vez de 800 — o acabamento vem do tamanho e do aperto, não do negrito máximo. */
h1, h2, h3 { font-weight: 700; letter-spacing: -.034em; }
.declaracao p, .flutuante strong, .capitulo .fato strong { font-weight: 700; }
/* Título em duas cores: a frase-chave na tinta, a continuação um tom abaixo (Linear, Stripe, Apple).
   color-mix com currentColor serve nas seções claras e nas escuras sem regra separada. */
h2 .eco { color: color-mix(in srgb, currentColor 46%, transparent); }
/* Parágrafo de apoio com medida de leitura (≈ 460–520 px; estava em 566). */
.apoio-secao { max-width: 46ch; }
/* Celular: os dois selos de loja lado a lado (o «em breve» continua visível, quebra dentro do selo). */
@media (max-width: 560px) {
  .lojas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .loja { flex-wrap: wrap; row-gap: 4px; }
  .loja .breve { margin-left: 0; }
}
/* Barra de ação fixa no celular (Uber, Cash App): um botão só, depois do topo. */
.barra-cta { display: none; }
@media (max-width: 980px) {
  .barra-cta { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 -1px 0 rgba(11, 18, 32, .08); transform: translateY(110%); transition: transform .32s var(--curva); }
  .barra-cta.visivel { transform: none; }
  .barra-cta .botao { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .barra-cta { transition: none; } }