/* Landing D (09/10/2026): a PUBLICADA como base + herói sem o celular 3D + o fecho «Deu wirk.» com o W em 3D
   (vindo da landing B) + ajustes finos. Arquivo à parte, carregado depois do site.css: o site.css fica como está no ar.
   Cada bloco diz o porquê. Detalhe em estudo/COMPARACAO-PUBLICADA-x-B.md. */

/* ---------- 1. herói (a): aparelho PLANO, moldura limpa, a gravação real do app na tela ---------- */
/* anula o 3D da publicada (perspectiva, giro pelo cursor, flutuação, camadas, WebGL) */
.hero-visual { perspective: none; }
.hero-visual .aparelho.aparelho-heroi {
  --tam: clamp(236px, 19.5vw, 320px);
  transform: none; will-change: auto; transform-style: flat;
  left: 0; bottom: 0;
  border-radius: calc(var(--tam) * .14);
  padding: calc(var(--tam) * .024);
  background: linear-gradient(160deg, #1C2230 0%, #0A0D14 38%, #05070C 100%);
  /* aro fino claro + segunda borda escura + sombra em duas camadas (perto e longe): peça plana, não «3D» */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .10),
    0 0 0 1px rgba(11, 18, 32, .55),
    0 2px 4px rgba(11, 18, 32, .18),
    0 24px 48px -12px rgba(11, 18, 32, .38),
    0 60px 120px -30px rgba(11, 18, 32, .30);
}
.hero-visual .aparelho.aparelho-heroi .tela { inset: calc(var(--tam) * .024); border-radius: calc(var(--tam) * .118); background: #F4F6F9; transform: none; }
/* a gravação do app 1.1 não tem barra de status: a ilha fica em cima de um friso claro, como no app de verdade */
.hero-visual .aparelho.aparelho-heroi::before { top: calc(var(--tam) * .05); width: calc(var(--tam) * .25); height: calc(var(--tam) * .068); }
.hero-visual .aparelho.aparelho-heroi .tela > video { top: calc(var(--tam) * .1); height: calc(100% - var(--tam) * .1); object-fit: cover; object-position: 50% 0; background: #F4F6F9; }
.hero-visual .aparelho.aparelho-heroi .tela::after { background: linear-gradient(115deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 30%); }
.hero-visual .aparelho.aparelho-heroi .lateral { background: #252C3A; }

/* Pausar/Tocar (WCAG 2.2.2: vídeo que toca sozinho por mais de 5 s precisa de como parar); veio da D7 da landing B */
.filme-pausa {
  position: absolute; z-index: 3; left: calc(var(--tam-heroi, 280px) + 18px); bottom: 6px;
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 10px; border: 0; border-radius: 999px;
  font-family: inherit; font-weight: 600; font-size: 12.5px; line-height: 1; color: var(--tinta); background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 0 1px var(--linha), 0 6px 16px rgba(11, 18, 32, .10); cursor: pointer;
  transition: background var(--rapida), transform var(--rapida);
}
.filme-pausa:hover { background: #fff; }
.filme-pausa:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.filme-pausa .i { width: 14px; height: 14px; color: var(--azul-forte); }
.hero-visual { --tam-heroi: clamp(236px, 19.5vw, 320px); }
.heroi-marca { display: none; }

@media (max-width: 980px) {
  .hero-visual .aparelho.aparelho-heroi { --tam: 210px; }
  .hero-visual { --tam-heroi: 210px; }
}
@media (max-width: 640px) {
  .hero-visual .aparelho.aparelho-heroi { --tam: 158px; left: 8px; }
  .hero-visual { --tam-heroi: 166px; }
  .filme-pausa { bottom: 4px; padding: 6px 10px 6px 8px; font-size: 12px; }
}

/* ---------- 1b. herói (b), ?heroi=b: o W em 3D no painel claro, o aparelho plano com o vídeo real ao lado ---------- */
.heroi-b .foto-hero { background: #F4F6F9; }
html.heroi-b .hero .foto-hero img[data-lado] { display: none; }
.heroi-b .hero-visual::before { opacity: .55; }
.heroi-b .heroi-marca {
  display: block; position: absolute; z-index: 1; pointer-events: none;
  top: 12%; right: 2%; width: min(74%, 560px); aspect-ratio: 3 / 2;
}
.heroi-marca img, .heroi-marca video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.heroi-marca video { opacity: 0; }
.heroi-marca.com-video img { opacity: 0; }
.heroi-marca.com-video video { opacity: 1; }
@media (max-width: 640px) { .heroi-b .heroi-marca { top: 16%; right: -4%; width: 82%; } }

/* ---------- 2. fecho «Deu wirk.» com o W em 3D (da landing B; o Johnny adorou) ---------- */
/* fundo #F4F6F9 = o mesmo pintado no MP4 do W (Safari), pra não aparecer caixa */
.fecho { padding: clamp(88px, 11vw, 150px) var(--respiro) clamp(72px, 9vw, 120px); text-align: center; background: #F4F6F9; overflow: hidden; }
.marca3d { position: relative; width: clamp(240px, 30vw, 400px); aspect-ratio: 3 / 2; margin: clamp(-56px, -4vw, -24px) auto clamp(0px, 1vw, 12px); pointer-events: none; }
.marca3d img, .marca3d video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.marca3d video { opacity: 0; }
.marca3d.com-video img { opacity: 0; }
.marca3d.com-video video { opacity: 1; }
.fecho-titulo { margin: 0; font-size: clamp(72px, 15vw, 220px); font-weight: 600; letter-spacing: -.065em; line-height: .9; color: var(--tinta); }
.fecho-titulo .w { color: var(--azul); }
.fecho-titulo .letra { display: inline-block; will-change: transform; }
.fecho-titulo .palavra { display: inline-block; white-space: nowrap; }
.fecho-apoio { margin: 28px auto 0; font-size: clamp(17px, 1.4vw, 20px); color: var(--tinta-suave); max-width: 26em; }
@media (max-width: 600px) {
  .marca3d { width: min(270px, 70vw); margin-top: -32px; }
  .fecho-titulo { font-size: min(84px, 20vw); }
}

/* ---------- 3. a história: o aparelho grudado fica PLANO (o giro de ±16° com camadas era o mesmo 3D falso) ---------- */
/* ?historia3d=1 volta ao da publicada */
html:not(.historia3d) .grudado { perspective: none; }
html:not(.historia3d) .grudado .aparelho { transform: none; transform-style: flat; will-change: auto; }

/* ---------- 4. ajustes finos ---------- */
/* 4.1 «em nove passos.» saía com 14 px embaixo do título: a regra «.jornada span» pegava também o <span class="eco"> do h2 */
.jornada h2 .eco { display: inline; font-size: inherit; margin-top: 0; }
/* 4.2 faixa «Com quem o Wirk começa»: rola de lado, mas nada dizia isso (no celular só aparecia «Eletricista»).
   Esmaece a borda direita pra mostrar que continua. */
/* D4: a máscara que apagava a borda direita da faixa de ocupações saiu; a faixa agora quebra linha (site.css). */
/* 4.3 celular: o cartão flutuante do herói ficava colado na borda da foto e, com o aparelho plano, tapava a ilha.
   Mais estreito e afastado da borda: o aparelho e o cartão dividem a foto sem se cobrir no meio. */
@media (max-width: 640px) { .cartao-flutuante.topo-dir { top: 14px; right: 10px; max-width: 196px; padding: 10px 12px; gap: 10px; } .cartao-flutuante .retrato { width: 36px; height: 36px; } }

/* ---------- 5. leva 2 (09/10/2026): telas claras do app 1.1, lojas num lugar só, Baixar sem QR da web nem retrato ---------- */
/* 5.1 as telas novas são claras e não têm barra de status: o fundo da tela fica claro e a imagem desce abaixo da ilha
   (o mesmo friso do aparelho do herói). Corta ~5% de baixo, que é só a borda da barra de abas. */
.aparelho .tela:has(> img[src*="telas11/"]) { background: #F4F6F9; }
.aparelho .tela > img[src*="telas11/"] { top: calc(var(--tam, 300px) * .1); height: calc(100% - var(--tam, 300px) * .1); object-fit: cover; object-position: 50% 0; }
.aparelho:has(img[src*="telas11/"])::before { top: calc(var(--tam, 300px) * .05); width: calc(var(--tam, 300px) * .25); height: calc(var(--tam, 300px) * .068); }

/* 5.2 lojas: o selo da App Store é <a> (vira link no dia da aprovação, por assets/js/loja.js) */
a.loja { text-decoration: none; color: var(--tinta); }
.escuro a.loja { color: #fff; }
a.loja[aria-disabled="true"] { cursor: default; }
html[data-app-store="publicado"] a.loja[href] { cursor: pointer; }
html[data-app-store="publicado"] a.loja[href]:hover { box-shadow: inset 0 0 0 1.5px var(--azul); }
html[data-app-store="publicado"] .escuro a.loja[href]:hover { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
/* o botão grande do bloco Baixar só existe quando há loja pra onde ir (em análise, o próprio bloco já é o destino) */
html:not([data-app-store="publicado"]) .so-publicado { display: none; }

/* 5.3 Baixar: no lugar do QR da web (401), o ícone do app; no aparelho, uma tela real (o recibo do acordo), sem gente inventada */
.cartaz .qr.icone-app { padding: 0; background: none; border-radius: 22.5%; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 24px 60px rgba(0, 0, 0, .45); }
.cartaz .qr.icone-app img { image-rendering: auto; display: block; }
@media (max-width: 640px) { .cartaz .qr.icone-app { width: 112px; } }

/* 5.4 a história: o aparelho grudado troca de tela pela rolagem (assets/js/site.js, «historiaViva»).
   A tela que entra sobe de baixo e empurra a que sai pra cima, como uma tira, presas ao mesmo progresso; a luz passa de uma cor pra outra. Sem giro. As transições de CSS saem, porque quem anda é a rolagem. */
.historia.viva #aparelho-historia .tela > img { transition: none; will-change: opacity, transform; box-shadow: 0 -10px 28px rgba(11, 18, 32, .22); }
.historia.viva .grudado .aparelho { transition: none; }
.historia.viva .passos li { transition: color 260ms var(--curva), background 260ms var(--curva); }

/* ---------- lançamento (10/10/2026): selo OFICIAL da App Store (arte da Apple, sem alteração; altura ≥ 40 px) ---------- */
a.selo-app-store { display: inline-flex; align-items: center; align-self: center; justify-self: start; line-height: 0; border-radius: 9px; }
a.selo-app-store img { display: block; width: auto; height: 50px; }
a.selo-app-store:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
.escuro a.selo-app-store:focus-visible { outline-color: #fff; }
html[data-app-store="publicado"] .so-analise { display: none; }