@font-face { font-family: Geist; src: url('/landing/fontes/Geist-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Geist; src: url('/landing/fontes/Geist-Medio.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: Geist; src: url('/landing/fontes/Geist-Semibold.ttf') format('truetype'); font-weight: 600; font-display: swap; }

:root {
  /* Escala única de tipografia (23/10/2026): todo texto da landing usa um destes degraus. */
  --t-gigante: clamp(52px, 8vw, 124px);
  --t-secao: clamp(38px, 4.4vw, 70px);
  --t-ficha: clamp(32px, 3.2vw, 50px);
  --t-destaque: clamp(22px, 2.1vw, 32px);
  --t-grupo: clamp(19px, 1.5vw, 23px);
  --t-apoio: clamp(17px, 1.3vw, 20px);
  --t-item: 17px;
  --t-corpo: 16px;
  --t-pequeno: 15px;
  --fundo: #141210;
  --texto: #F4EDE3;
  --apoio: #D6CDC1;
  --ambar: #E8AE5E;
  --mola: cubic-bezier(.22, 1, .36, 1);
  --lateral: clamp(20px, 4.4vw, 68px);
  --recuo: calc(var(--lateral) + 96px);
  --sombra-texto: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 28px rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; overflow-anchor: none; }
body {
  background: var(--fundo);
  color: var(--texto);
  font-family: Geist, -apple-system, 'Helvetica Neue', sans-serif;
  font-size: var(--t-corpo);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11';
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--ambar); outline-offset: 4px; border-radius: 6px; }
::selection { background: rgba(232, 174, 94, .35); color: #fff; }
html { scrollbar-color: rgba(232, 174, 94, .45) var(--fundo); scrollbar-width: thin; }
h1, h2 { font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; text-wrap: pretty; }
p { text-wrap: pretty; }
/* Apoio com várias frases: cada frase na sua linha, nunca uma quebra no meio de uma frase curta */
.frase { display: block; }
ol, ul { list-style: none; }


/* Abertura: a mesma do app (versão curta), uma vez por sessão. Os tempos são os da partitura ESSENCIAL. */
:root { --ab: 2.7s; }
.ja-abriu { --ab: 0s; }
.preloader {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--fundo);
  animation: pre-sai .42s cubic-bezier(.55, 0, .9, .4) 2.6s forwards;
}
.ja-abriu .preloader { display: none; }
.pre-conjunto { display: flex; flex-direction: column; align-items: center; animation: pre-recua .42s cubic-bezier(.55, 0, .9, .4) 2.6s forwards; }
.pre-palco { position: relative; width: 96px; height: 96px; }
.pre-luz { position: absolute; inset: -60px; border-radius: 50%; background: radial-gradient(circle, rgba(232, 174, 94, .42) 0%, rgba(154, 91, 30, .16) 32%, transparent 70%); opacity: 0; transform: scale(.7); animation: pre-luz .9s cubic-bezier(.16, 1, .3, 1) .85s forwards; }
.pre-liquido { position: absolute; inset: 0; width: 96px; height: 96px; border-radius: 50%; opacity: 0; transform: scale(.82); animation: pre-liquido .9s cubic-bezier(.16, 1, .3, 1) .85s forwards; }
.pre-simbolo { position: absolute; inset: 0; width: 96px; height: 96px; overflow: visible; }
.pre-anel { fill: none; stroke: var(--ambar); stroke-width: 5.51; stroke-linecap: round; stroke-dasharray: 485.3; stroke-dashoffset: 485.3; animation: pre-anel .7s cubic-bezier(.65, 0, .35, 1) .15s forwards, pre-aro .9s cubic-bezier(.16, 1, .3, 1) .85s forwards; }
.pre-perna { stroke: var(--ambar); stroke-width: 8.92; stroke-linecap: square; stroke-dasharray: 37.78; stroke-dashoffset: 37.78; opacity: 0; animation: pre-perna .45s cubic-bezier(.16, 1, .3, 1) .6s forwards, pre-creme .9s cubic-bezier(.16, 1, .3, 1) .85s forwards; }
.pre-assinatura { display: flex; flex-direction: column; align-items: center; margin-top: 32px; text-align: center; }
.pre-janela { overflow: hidden; padding: 0 8px; }
.pre-nome { display: block; font-size: 44px; font-weight: 600; letter-spacing: -0.035em; line-height: 1.15; transform: translateY(56px); animation: pre-nome .65s cubic-bezier(.16, 1, .3, 1) 1s forwards; }
.pre-descritor { margin-top: 6px; font-size: 17px; color: var(--apoio); opacity: 0; animation: pre-entra .5s cubic-bezier(.16, 1, .3, 1) 1.25s forwards; }
.pre-fio { width: 24px; height: 2px; border-radius: 1px; margin: 22px 0 16px; background: var(--ambar); opacity: 0; transform: scaleX(0); animation: pre-fio .45s cubic-bezier(.16, 1, .3, 1) 1.45s forwards; }
.pre-deixa { font-size: 22px; font-weight: 500; color: var(--ambar); opacity: 0; animation: pre-entra .5s cubic-bezier(.16, 1, .3, 1) 1.6s forwards; }
@keyframes pre-anel { to { stroke-dashoffset: 0; } }
@keyframes pre-aro { to { stroke-opacity: .2; } }
@keyframes pre-perna { 0% { opacity: 1; } to { opacity: 1; stroke-dashoffset: 0; } }
@keyframes pre-creme { to { stroke: #FFF6E2; } }
@keyframes pre-luz { to { opacity: .85; transform: none; } }
@keyframes pre-liquido { to { opacity: 1; transform: none; } }
@keyframes pre-nome { to { transform: none; } }
@keyframes pre-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pre-fio { to { opacity: 1; transform: none; } }
@keyframes pre-sai { to { opacity: 0; visibility: hidden; } }
@keyframes pre-recua { to { transform: translateY(-14px) scale(.97); } }

/* Barra de navegação, como a das páginas de produto: vidro escuro, links ao centro, Instalar à direita */
.topo { position: fixed; inset: 0 0 auto 0; z-index: 30; padding-top: env(safe-area-inset-top); }
.nav {
  position: relative; display: flex; align-items: center; gap: 26px; height: 60px; padding: 0 var(--lateral);
  background: rgba(14, 12, 10, .62); backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border-bottom: 1px solid rgba(244, 237, 227, .08);
}
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 19px; min-height: 44px; flex: none; }
.marca img { width: 28px; height: 28px; transition: transform .6s var(--mola); }
.marca:hover img { transform: rotate(-12deg) scale(1.08); }
.nav-links { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
/* Em tela larga os links ficam no centro exato da página, não no meio do espaço que sobra: o lado
   direito (Entrar e o selo) é mais largo que a marca e puxava os links para a esquerda. */
@media (min-width: 1280px) {
  .nav-links { position: absolute; left: 50%; translate: -50% 0; margin: 0; }
  .entrar { margin-left: auto; }
}
/* Notebooks de 1280 a 1439: para os links centralizados não encostarem no Entrar, ele fica só com o
   cadeado (o nome segue para leitor de tela) e os links ficam um pouco mais justos. */
@media (min-width: 1280px) and (max-width: 1439px) {
  .nav-links a { padding: 0 9px; font-size: 14px; }
  .nav-links a::after { left: 9px; right: 9px; }
  .entrar { padding: 0; width: 40px; justify-content: center; }
  .entrar-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.nav-links a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-size: var(--t-pequeno); font-weight: 500; color: var(--apoio); text-decoration: none; transition: color .3s var(--mola);
}
.nav-links a::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 2px; border-radius: 2px; background: var(--ambar);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--mola);
}
.nav-links a:hover { color: var(--texto); }
.nav-links a.ativo { color: var(--texto); }
.nav-links a.ativo::after { transform: scaleX(1); }
.nav-progresso { position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--ambar); transform: scaleX(var(--total, 0)); transform-origin: left; opacity: .7; }
.selo {
  display: flex; align-items: center; gap: 10px; flex: none; min-height: 44px;
  background: var(--ambar); color: #1A140C; border-radius: 999px;
  padding: 4px 18px 4px 4px; min-height: 40px;
  text-decoration: none; font-size: var(--t-pequeno); font-weight: 600;
  box-shadow: 0 6px 24px -8px rgba(232, 174, 94, .8);
  transition: transform .4s var(--mola), box-shadow .4s var(--mola);
}
.selo:hover { transform: translateY(-1px); box-shadow: 0 10px 30px -8px rgba(232, 174, 94, .95); }
.selo-texto { padding-left: 14px; white-space: nowrap; }
/* Entrar: a versão web, discreta ao lado do selo, para não competir com ele. */
.entrar { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; color: var(--texto); font-size: 15px; font-weight: 500; border: 1px solid rgba(244, 237, 227, .22); transition: border-color .2s, background .2s; white-space: nowrap; }
.entrar:hover { border-color: rgba(244, 237, 227, .5); background: rgba(244, 237, 227, .06); }
.entrar .ico { width: 16px; height: 16px; }
.selo-qr { background: var(--texto); border-radius: 999px; padding: 3px; width: 32px; height: 32px; }
.selo-qr:not([hidden]) + .selo-texto { padding-left: 0; }
.nav-menu { display: none; }

/* Botão que abre a ficha de cada funcionalidade */
.mais {
  order: 4; display: inline-flex; align-items: center; gap: 12px; width: fit-content; min-height: 48px; padding: 0 22px 0 8px;
  border: 1px solid rgba(244, 237, 227, .22); border-radius: 999px;
  background: rgba(20, 17, 14, .55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: var(--texto); font: inherit; font-size: var(--t-pequeno); font-weight: 500; cursor: pointer;
  transition: border-color .35s var(--mola), background-color .35s var(--mola), transform .35s var(--mola);
}
.mais-icone { position: relative; width: 32px; height: 32px; border-radius: 50%; background: var(--ambar); flex: none; transition: transform .5s var(--mola); }
.mais-icone::before, .mais-icone::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: #1A140C; }
.mais-icone::after { transform: rotate(90deg); }
.mais:hover { border-color: var(--ambar); background: rgba(40, 30, 18, .7); }
.mais:hover .mais-icone { transform: rotate(90deg); }
.mais:active { transform: scale(.97); }
.mais:focus-visible { outline: 2px solid var(--ambar); outline-offset: 4px; }

/* Cenas fixas: o estágio prende e a rolagem vira progresso (--p, de 0 a 1) */
.cena-fixa { position: relative; height: var(--altura, 300svh); --p: 0; }
.estagio { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; }
.foto {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  transform: scale(calc(1.16 - var(--t, var(--p)) * .16)); transform-origin: 50% 40%;
  will-change: transform;
}
.veu { position: absolute; inset: 0; z-index: -1; }

.legenda { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 20px; max-width: 780px; text-shadow: var(--sombra-texto); }
.legenda > .mais { margin-top: 6px; }
.legenda > .hora { margin-top: -4px; }
.legenda h2 { font-size: var(--t-secao); }
.hora { order: 5; display: flex; align-items: center; gap: 12px; font-size: var(--t-pequeno); font-weight: 500; color: var(--ambar); font-variant-numeric: tabular-nums; }
.hora::before { content: ''; width: 26px; height: 1px; background: currentColor; opacity: .7; }
.apoio { font-size: var(--t-apoio); line-height: 1.45; color: var(--apoio); }
.legenda-topo { left: var(--recuo); top: 20svh; }
.legenda-base { left: var(--recuo); bottom: 11svh; }
/* As colunas de texto vão até o iPhone, menos uma folga: só quebram quando falta espaço */
.legenda-esquerda { left: var(--recuo); top: 50%; transform: translateY(-50%); max-width: calc(86vw - min(80svh, 800px) * .479 - var(--recuo) - 72px); }
.legenda-direita { right: var(--lateral); top: 50%; transform: translateY(-50%); max-width: calc(100vw - var(--recuo) - min(660px, 48vw) - var(--lateral) - 96px); }
.legenda-direita h2, .legenda-esquerda h2 { font-size: var(--t-secao); }
.cena-fixa:not(.abertura) .legenda > * {
  opacity: clamp(0, calc(var(--p) * 9 - .3), 1);
  translate: 0 calc((1 - clamp(0, calc(var(--p) * 9 - .3), 1)) * 28px);
}

/* iPhone 18 Pro em preto (150 x 71,9 mm): aro de alumínio, vidro preto com bordas iguais de 3,2 mm,
   ilha menor e os botões das laterais. Tudo sai da altura (--alto), para servir em qualquer tamanho. */
.iphone {
  --alto: 70svh;
  --aro: calc(var(--alto) * .0052);
  --borda: calc(var(--alto) * .0213);
  position: absolute; z-index: 1; height: var(--alto); aspect-ratio: 71.9 / 150;
  border-radius: calc(var(--alto) * .084);
  border: var(--aro) solid transparent;
  background:
    linear-gradient(#050506, #050506) padding-box,
    linear-gradient(155deg, #9a9aa0 0%, #45454a 12%, #1b1b1e 36%, #26262a 64%, #5e5e64 88%, #a2a2a8 100%) border-box;
  box-shadow: 0 calc(var(--alto) * .05) calc(var(--alto) * .12) calc(var(--alto) * -.03) rgba(0, 0, 0, .9), 0 0 calc(var(--alto) * .14) calc(var(--alto) * -.03) rgba(232, 174, 94, .3);
  will-change: transform;
}
/* Botões: ação e volume à esquerda; lateral e Controle da Câmera à direita */
.iphone::before, .iphone::after { content: ''; position: absolute; width: calc(var(--alto) * .0048); border-radius: calc(var(--alto) * .003); }
.iphone::before {
  left: calc(var(--aro) * -1 - var(--alto) * .0042); top: 17%; height: 31%;
  background: linear-gradient(180deg, #55555b 0 11%, transparent 11% 27%, #55555b 27% 58%, transparent 58% 69%, #55555b 69% 100%);
}
.iphone::after {
  right: calc(var(--aro) * -1 - var(--alto) * .0042); top: 25%; height: 39%;
  background: linear-gradient(180deg, #55555b 0 25%, transparent 25% 80%, #2c2c30 80% 100%);
}
.tela {
  position: absolute; inset: calc(var(--borda) - var(--aro)); overflow: hidden; isolation: isolate;
  border-radius: calc(var(--alto) * .0627); background: #141210; container-type: inline-size;
}
.tela > img { position: absolute; top: 11cqw; left: 2cqw; width: 96cqw; height: auto; }
/* Ilha dinâmica (menor no 18 Pro) e barra de status com a hora da cena */
.tela::before { content: ''; position: absolute; z-index: 6; top: 2.7cqw; left: 50%; width: 21cqw; height: 9cqw; translate: -50% 0; border-radius: 99px; background: #000; }
.tela::after {
  content: attr(data-hora); position: absolute; z-index: 6; inset: 2.7cqw 0 auto 0; height: 9cqw;
  display: flex; align-items: center; padding-left: 14.5cqw;
  font-size: 4.3cqw; font-weight: 600; letter-spacing: -0.01em; color: #fff; font-variant-numeric: tabular-nums;
  background: url(/landing/status.svg) no-repeat right 7cqw center / 17.5cqw auto;
}

/* Palavras que se revelam com a rolagem */
[data-palavras] .palavra { display: inline-block; opacity: clamp(.24, calc(var(--r) * (var(--n) + 3) - var(--i)), 1); transition: opacity .2s linear; }

/* 1. Abertura e construção */
.abertura {
  --altura: 330svh;
  --a: clamp(0, calc(var(--p) / .2), 1);
  --b: clamp(0, calc((var(--p) - .16) / .42), 1);
  --c: clamp(0, calc((var(--p) - .52) / .26), 1);
  --fone-h: min(76svh, 780px);
  --fone-topo: calc((100svh - var(--fone-h)) / 2);
  --orbe: clamp(240px, 44svh, 500px);
  /* No fim da construção, iPhone e orbe deslizam juntos para a direita e abrem espaço para a legenda */
  --desloca: clamp(0px, calc((100vw - 1180px) * 9999), 11vw);
  --dx: calc(var(--desloca) * clamp(0, calc((var(--p) - .5) / .25), 1));
}
.abertura .estagio { background: radial-gradient(ellipse 70% 60% at 50% 42%, #2c1e10 0%, var(--fundo) 70%); }
.poeira { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: calc(1 - var(--c) * .6); }
.orbe-palco {
  position: absolute; z-index: 4; left: 50%; top: var(--centro, 44svh); width: var(--orbe); aspect-ratio: 1;
  /* O centro do orbe desce até o botão de falar do iPhone (92% da altura da tela) */
  transform: translate(-50%, -50%)
    translateX(var(--dx))
    translateY(calc(var(--b) * var(--alvo-dy, 36svh)))
    scale(calc(1 - var(--b) * (1 - var(--orbe-fim, .13))));
  opacity: calc(1 - clamp(0, calc((var(--p) - .74) / .08), 1));
  will-change: transform;
}
.orbe-luz {
    /* A caixa é bem maior que o brilho: a borda da camada do orbe (will-change) fica fora da tela. */
  position: absolute; inset: -200%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(232, 174, 94, .34) 0%, rgba(232, 174, 94, .16) 12%, rgba(232, 174, 94, .06) 24%, rgba(232, 174, 94, .015) 37%, rgba(232, 174, 94, 0) 50%);
  animation: respirar 5.5s ease-in-out infinite alternate;
}
.orbe { position: relative; width: 100%; height: auto; animation: acender 2.2s var(--mola) var(--ab) both, flutuar 7s ease-in-out calc(var(--ab) + 2.2s) infinite alternate; }
/* Com WebGL, o orbe vivo toma o lugar da imagem fixa (que fica como reserva) */
.orbe-vivo { position: absolute; inset: 9.5%; width: 81%; height: 81%; animation: acender 2.2s var(--mola) var(--ab) both, boiar 7s ease-in-out calc(var(--ab) + 2.2s) infinite alternate; }
@keyframes boiar { from { transform: translateY(0); } to { transform: translateY(-12px); } }
.orbe-palco.vivo .orbe { opacity: 0; }
.abertura-texto {
  position: absolute; z-index: 5; left: var(--lateral); right: var(--lateral); top: calc(var(--centro, 44svh) + var(--orbe) / 2 - 1svh);
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
  opacity: calc(1 - var(--a)); filter: blur(calc(var(--a) * 14px)); translate: 0 calc(var(--a) * -6svh);
}
/* "Âmbar significa" e a palavra que troca ficam numa linha só: o tamanho vem da frase mais longa
   ("Âmbar significa constância."), que mede 12,1 vezes o tamanho da letra em Geist Semibold (medido no Chrome); 13,8 dá folga e deixa a letra um pouco menor. */
.titulo-abertura { font-size: min(var(--t-gigante), calc((100vw - 2 * var(--lateral)) / 13.8), 9.8svh); letter-spacing: -0.045em; line-height: 1.05; white-space: nowrap; }
.titulo-abertura .sig { display: inline; }
.sig-palavra {
  display: inline-block; color: var(--ambar);
  transition: opacity .42s var(--mola), filter .42s var(--mola), translate .42s var(--mola);
  animation: entrar 1.2s var(--mola) calc(var(--ab) + 1.5s) both;
}
.sig-palavra.saindo { opacity: 0; filter: blur(12px); translate: 0 -.16em; }
.sig-palavra.entrando { opacity: 0; filter: blur(12px); translate: 0 .16em; transition: none; }
.titulo-abertura .letra { display: inline-block; animation: letra 1.1s var(--mola) both; animation-delay: calc(var(--ab) + .9s + var(--i) * 45ms); white-space: pre; }
.descritor { font-size: min(var(--t-destaque), 4.6vw); color: var(--apoio); animation: entrar 1.2s var(--mola) calc(var(--ab) + 1.6s) both; }
.descer {
  margin-top: 14px; font-size: var(--t-pequeno); color: var(--apoio); min-height: 44px;
  display: inline-flex; align-items: center; gap: 10px; text-underline-offset: 6px;
  animation: entrar 1.2s var(--mola) calc(var(--ab) + 1.9s) both;
}
.descer::after { content: ''; width: 1px; height: 18px; background: currentColor; animation: pingar 1.8s ease-in-out infinite; }
.descer:hover { color: var(--texto); }
.iphone-construcao {
  --alto: var(--fone-h);
  left: 50%; top: var(--fone-topo); z-index: 2;
  translate: calc(-50% + var(--dx)) calc((1 - var(--b)) * 6svh);
  opacity: clamp(0, calc((var(--b) - .45) / .4), 1);
}
.contorno {
  position: absolute; z-index: 3; left: 50%; top: var(--fone-topo); height: var(--fone-h); aspect-ratio: 71.9 / 150;
  translate: calc(-50% + var(--dx)) calc((1 - var(--b)) * 6svh); overflow: visible; pointer-events: none;
}
.contorno rect { fill: none; stroke: var(--ambar); stroke-width: .35; stroke-dasharray: var(--comprimento, 420) 9999; stroke-dashoffset: calc(var(--comprimento, 420) * (1 - var(--b))); opacity: calc(1 - var(--c)); filter: drop-shadow(0 0 6px rgba(232, 174, 94, .8)); }
.iphone-construcao .tela > img { opacity: var(--c); filter: brightness(calc(.4 + var(--c) * .6)); }
.alvo-orbe { position: absolute; top: 202.5cqw; left: 50%; width: 16.7cqw; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; }
.reflexo {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .16) 45%, transparent 60%);
  background-size: 250% 100%; background-position: calc(140% - var(--c) * 160%) 0;
  opacity: calc(var(--c) * (1 - clamp(0, calc((var(--p) - .9) / .1), 1)));
}
.legenda-construcao { left: var(--recuo); top: 50%; transform: translateY(-50%); max-width: calc(50vw + var(--desloca) - var(--fone-h) * .24 - var(--recuo) - 64px); }
.legenda-construcao h2 { font-size: var(--t-secao); }
.legenda-construcao > * { opacity: clamp(0, calc((var(--p) - .6) / .14), 1); translate: 0 calc((1 - clamp(0, calc((var(--p) - .6) / .14), 1)) * 24px); }

@keyframes acender { from { opacity: 0; transform: scale(.7); filter: blur(18px) brightness(.3); } to { opacity: 1; transform: none; filter: none; } }
@keyframes flutuar { from { transform: translateY(0) rotate(0); } to { transform: translateY(-12px) rotate(2deg); } }
@keyframes respirar { from { opacity: .55; transform: scale(.92); } to { opacity: 1; transform: scale(1.06); } }
@keyframes entrar { from { opacity: 0; transform: translateY(20px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes letra { from { opacity: 0; transform: translateY(.45em) rotate(4deg); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes pingar { 0%, 100% { transform: scaleY(.4); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } }

/* 2. Avisos na tela de bloqueio */
.avisos { --altura: 170svh; }
.foto-desfocada { filter: blur(40px) brightness(.45) saturate(1.2); transform: scale(1.3); }
.veu-avisos { background: linear-gradient(90deg, rgba(20, 18, 16, .85) 0%, rgba(20, 18, 16, .35) 60%, rgba(20, 18, 16, .6) 100%); }
.iphone-bloqueio {
  --alto: min(80svh, 800px); right: 14vw; top: 50%;
  translate: 0 calc(-50% + (1 - clamp(0, calc(var(--p) * 4), 1)) * 20svh);
}
.tela > .papel { position: absolute; inset: 0; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.82); }
.bloqueio { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 17cqw 4.5cqw 0; color: #fff; }
.bloqueio-data { font-size: 4.6cqw; font-weight: 500; opacity: .92; text-shadow: 0 1px 10px rgba(0, 0, 0, .4); }
.bloqueio-hora { font-size: 25cqw; font-weight: 600; letter-spacing: -0.04em; line-height: 1; margin-top: .5cqw; text-shadow: 0 2px 24px rgba(0, 0, 0, .3); font-variant-numeric: tabular-nums; }
.pilha { margin-top: auto; margin-bottom: 18cqw; width: 100%; display: flex; flex-direction: column; gap: 2.4cqw; }
.pilha li {
  --c: clamp(0, calc((var(--p) - .12 - var(--k) * .22) * 7), 1);
  display: flex; gap: 3cqw; align-items: flex-start;
  padding: 3.4cqw 3.8cqw; border-radius: 6cqw;
  background: rgba(38, 33, 28, .72); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6);
  opacity: var(--c);
  transform: translateY(calc((1 - var(--c)) * -26cqw)) scale(calc(.9 + var(--c) * .1));
  transform-origin: 50% 0;
}
.pilha img { width: 10cqw; height: 10cqw; border-radius: 2.6cqw; background: #1b1714; flex: none; }
.pilha li > div { min-width: 0; }
.aviso-topo { display: flex; justify-content: space-between; gap: 2cqw; font-size: max(11.5px, 3.6cqw); color: rgba(255, 255, 255, .72); }
.aviso-topo b { font-weight: 600; color: #fff; }
/* Título em uma linha e descritivo sempre em duas, como o aviso do iPhone. */
.aviso-titulo { font-size: max(13px, 4.2cqw); font-weight: 600; line-height: 1.25; margin-top: .6cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aviso-corpo { font-size: max(13px, 4.2cqw); line-height: 1.32; min-height: 2.64em; color: rgba(255, 255, 255, .92); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 3. Seu dia, pronto: o sol nasce com a rolagem */
.dia { --altura: 170svh; --e: clamp(0, calc(var(--p) * 1.7), 1); }
.dia .foto { filter: brightness(calc(.32 + var(--p) * .78)) saturate(calc(.7 + var(--p) * .5)); }
.veu-dia { background: linear-gradient(90deg, rgba(20, 18, 16, .82) 0%, rgba(20, 18, 16, .4) 46%, transparent 70%), linear-gradient(0deg, rgba(20, 18, 16, .6), transparent 40%); }
.iphone-dia {
  --alto: min(70svh, 720px); right: 13vw; bottom: 9svh;
  transform: perspective(1600px) translateY(calc((1 - var(--e)) * 50svh)) rotateY(calc(-30deg + var(--e) * 16deg)) rotateX(calc(14deg - var(--e) * 8deg)) rotateZ(calc(4deg - var(--e) * 2deg));
  opacity: clamp(0, calc(var(--e) * 3), 1);
}

/* Entre uma cena e outra, um fio quase invisível: separa sem pesar. */
main > section + section { border-top: 1px solid rgba(244, 237, 227, .07); }

/* 4. Você fala: palco preto, como nos filmes de produto. O título fica no alto, no preto, e o carro
   inteiro numa caixa logo abaixo, sem texto por cima (pedido de 23/10: legível). A rolagem conduz:
   o filme abre (--a) e depois vai para a esquerda enquanto o CarPlay entra à direita (--b). */
.cinema { position: relative; background: #000; --p: 0; --pe: 0; }
.cinema-palco { position: sticky; top: 0; height: 100svh; overflow: hidden; background: #000; }
.fala { height: 300svh; }
.fala .cinema-palco {
  --a: clamp(0, calc(var(--p) / .2), 1);
  --b: clamp(0, calc((var(--p) - .34) / .32), 1);
  display: flex; flex-direction: column; gap: clamp(18px, 3svh, 32px);
  padding: calc(76px + 3svh) var(--lateral) 5svh;
}
.cinema-titulo {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex: none;
  opacity: clamp(0, calc(var(--a) * 1.8), 1); translate: 0 calc((1 - var(--a)) * 20px);
}
.cinema-titulo-texto { display: flex; flex-direction: column; gap: 8px; }
.cinema-titulo h2 { font-size: var(--t-gigante); }
.cinema-titulo-apoio { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; padding-bottom: 8px; }
.cinema-titulo .apoio { font-size: var(--t-destaque); font-weight: 500; letter-spacing: -0.01em; color: var(--texto); white-space: nowrap; }
.cinema-quadros { position: relative; flex: 1; min-height: 0; display: flex; gap: 20px; }
.cinema-filme {
  position: relative; height: 100%; flex: none;
  width: calc(100% - var(--b) * 50% - var(--b) * 10px);
  border-radius: 28px; overflow: hidden; background: #000;
  transform: scale(calc(.94 + var(--a) * .06)); transform-origin: 50% 0;
  box-shadow: 0 0 0 1px rgba(244, 237, 227, .08);
}
.filme { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.cinema-carplay {
  position: relative; margin: 0; height: 100%; flex: 1; min-width: 0; border-radius: 28px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(244, 237, 227, .08);
  opacity: clamp(0, calc((var(--b) - .2) * 2), 1); translate: calc((1 - var(--b)) * 12vw) 0;
}
.cinema-carplay img { width: 100%; height: 100%; object-fit: cover; }
.cinema-carplay figcaption {
  position: absolute; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px; border-radius: 999px; font-size: var(--t-pequeno); font-weight: 600;
  background: rgba(10, 9, 8, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(244, 237, 227, .14);
}
.etiqueta { padding: 3px 10px; border-radius: 999px; background: var(--ambar); color: #1A140C; font-size: 13px; font-weight: 700; }

/* 4b. Eu escrevo enquanto você fala: o iPhone se monta peça por peça (--c) e as caixas chegam (--d). */
.escrita { height: 300svh; }
.escrita .cinema-palco {
  --c: clamp(0, calc((var(--p) - .04) / .4), 1);
  --d: clamp(0, calc((var(--p) - .6) / .2), 1);
}
.escrita-texto {
  position: absolute; z-index: 2; left: var(--lateral); top: calc(76px + 9svh); width: min(560px, 44vw);
  display: flex; flex-direction: column; gap: 14px;
}
.escrita-texto h2 { font-size: var(--t-secao); }
.escrita-texto .apoio { font-size: var(--t-apoio); color: var(--apoio); }
.cinema-celular {
  position: absolute; z-index: 2; --alto: min(76svh, 760px);
  right: calc(var(--lateral) + 6vw); top: 50%; margin-top: calc(var(--alto) / -2 + 34px);
  height: var(--alto); aspect-ratio: 71.9 / 150;
  opacity: clamp(0, calc(var(--c) * 8), 1);
}
/* O contorno se desenha primeiro, em âmbar; depois o corpo acende por dentro dele */
.peca-contorno { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.peca-contorno rect {
  fill: none; stroke: var(--ambar); stroke-width: .5; --comprimento: 420;
  stroke-dasharray: var(--comprimento); stroke-dashoffset: calc(var(--comprimento) * (1 - clamp(0, calc(var(--c) * 3), 1)));
  opacity: calc(1 - clamp(0, calc((var(--c) - .45) * 3), 1));
}
.iphone-montagem {
  position: absolute; inset: 0; --alto: min(76svh, 760px);
  opacity: clamp(0, calc((var(--c) - .26) * 4), 1);
  transform: scale(calc(1.05 - clamp(0, calc((var(--c) - .26) * 2), 1) * .05));
  filter: blur(calc((1 - clamp(0, calc((var(--c) - .26) * 3), 1)) * 8px));
}
.peca-ilha { position: absolute; z-index: 7; top: 1.6%; left: 50%; width: 30%; height: 5.2%; translate: -50% calc((1 - clamp(0, calc((var(--c) - .4) * 5), 1)) * -60px); border-radius: 99px; background: #000; opacity: clamp(0, calc((var(--c) - .4) * 5), 1); }
/* As peças da tela chegam uma a uma, vindas de perto da câmera */
.cinema .esc-topo, .cinema .esc-fala, .cinema .esc-sugestoes, .cinema .esc-onda, .cinema .esc-palco {
  --entra: clamp(0, calc((var(--c) - var(--ordem)) * 6), 1);
  opacity: var(--entra); transform: translateY(calc((1 - var(--entra)) * 8cqw)) scale(calc(1.12 - var(--entra) * .12));
}
.cinema .esc-topo { --ordem: .5; }
.cinema .esc-palco { --ordem: .58; }
.cinema .esc-onda { --ordem: .66; }
.cinema .esc-fala { --ordem: .72; --r: clamp(0, calc((var(--pe) - .02) * 1.15), 1); }
.cinema .esc-fala .palavra {
  --v: clamp(0, calc(var(--r) * (var(--n) + 3) - var(--i)), 1);
  display: inline-block; opacity: var(--v); filter: blur(calc((1 - var(--v)) * 6px)); translate: 0 calc((1 - var(--v)) * .25em);
}
.cinema .esc-sugestoes { --ordem: .8; }
.cinema-caixas {
  position: absolute; z-index: 2; left: var(--lateral); bottom: 6svh; width: min(720px, 50vw);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.cinema-caixas li {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 20px;
  background: rgba(244, 237, 227, .045); border: 1px solid rgba(244, 237, 227, .09);
  --entra: clamp(0, calc((var(--d) - var(--k) * .14) * 2.4), 1);
  opacity: var(--entra); translate: 0 calc((1 - var(--entra)) * 26px);
}
.cinema-caixas .ico { width: 20px; height: 20px; color: var(--ambar); margin-bottom: 4px; }
.cinema-caixas b { font-size: var(--t-item); font-weight: 600; }
.cinema-caixas span { font-size: var(--t-pequeno); color: var(--apoio); line-height: 1.4; }
.mais-cinema { order: 0; }

/* 5. Eu organizo e confirmo: a fala se desmonta em campos */
.confirma { --altura: 170svh; }
.confirma .foto { filter: brightness(.6); }
/* Cenas neutras: grafite com uma grade de pontos quase apagada e uma luz âmbar baixa. Separam as fotos. */
.neutro {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 72% 62%, rgba(232, 174, 94, .10), transparent 70%),
    radial-gradient(rgba(244, 237, 227, .07) 1px, transparent 1.2px) 0 0 / 28px 28px,
    #0c0a09;
}
.veu-confirma { background: linear-gradient(90deg, rgba(12, 10, 9, .94) 0%, rgba(12, 10, 9, .82) 42%, rgba(12, 10, 9, .45) 72%, rgba(12, 10, 9, .6) 100%); }
/* A fala à esquerda, com cada trecho numerado; o cartão à direita; uma linha âmbar liga cada trecho
   ao campo que ele virou (referência de 23/10). O loop da cena conduz tudo por --p. */
.confirma { --cartao: clamp(360px, 31vw, 450px); }
.confirma-esquerda {
  position: absolute; z-index: 3; left: calc(var(--lateral) + 2vw); top: 50%; translate: 0 -50%;
  width: min(600px, calc(100vw - 2 * var(--lateral) - var(--cartao) - 10vw));
  display: flex; flex-direction: column; gap: clamp(40px, 7svh, 72px);
}
.legenda-confirma { position: relative; gap: 12px; max-width: none; }
.legenda-confirma h2 { font-size: clamp(34px, 3.3vw, 54px); font-weight: 500; letter-spacing: -0.03em; }
.legenda-confirma .apoio { font-size: var(--t-apoio); }
.legenda-confirma .hora { order: 0; margin-top: 4px; }
.legenda-confirma .mais { order: 0; margin-top: 4px; }
.citacao { position: relative; font-size: clamp(20px, 1.75vw, 28px); font-weight: 400; line-height: 2.5; color: var(--apoio); letter-spacing: -0.005em; text-shadow: var(--sombra-texto); }
.citacao span { position: relative; color: var(--texto); background-image: linear-gradient(var(--ambar), var(--ambar)); background-size: 0 1.5px; background-repeat: no-repeat; background-position: 0 86%; transition: color .5s var(--mola), background-size .7s var(--mola); }
.citacao span.ativo { color: var(--texto); background-size: 100% 1.5px; }
.citacao span.apontado { color: var(--ambar); }
.citacao span i, .campos li > i {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--ambar); color: #1A140C; font-style: normal; font-size: 12px; font-weight: 700; line-height: 1;
}
.citacao span i { position: absolute; left: 0; top: -1.02em; width: 17px; height: 17px; font-size: 10.5px; box-shadow: 0 0 0 3px #0c0a09; scale: 0; transition: scale .45s var(--mola); }
.citacao span.ativo i { scale: 1; }
.ligacoes { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.ligacoes path {
  fill: none; stroke: var(--ambar); stroke-width: 1; stroke-linecap: round; opacity: .5;
  stroke-dasharray: var(--l, 600); stroke-dashoffset: calc(var(--l, 600) * (1 - clamp(0, calc((var(--p) - .1 - var(--k) * .12) * 7), 1)));
}
.ligacoes circle { fill: var(--ambar); opacity: clamp(0, calc((var(--p) - .2 - var(--k) * .12) * 8), 1); }
.cartao-anotei {
  position: absolute; z-index: 3; left: auto; right: calc(var(--lateral) + 2vw); top: 50%; translate: 0 -50%;
  width: var(--cartao); padding: 24px 26px 26px; border-radius: 26px;
  display: flex; flex-direction: column; gap: 0;
  background: rgba(24, 21, 18, .9); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(244, 237, 227, .12);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), 0 30px 90px -40px rgba(232, 174, 94, .45);
  opacity: clamp(0, calc(var(--p) * 10), 1); transform: translateY(calc((1 - clamp(0, calc(var(--p) * 6), 1)) * 24px));
}
.cartao-topo { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid rgba(244, 237, 227, .08); font-size: 19px; font-weight: 600; }
.cartao-check { width: 28px; height: 28px; border-radius: 50%; background: var(--ambar); position: relative; flex: none; }
.cartao-check::after { content: ''; position: absolute; left: 8px; top: 8.5px; width: 11px; height: 6px; border-left: 2px solid #1A140C; border-bottom: 2px solid #1A140C; transform: rotate(-45deg); }
.campos { display: flex; flex-direction: column; gap: 0; margin-bottom: 18px; }
.campos li {
  --c: clamp(0, calc((var(--p) - .1 - var(--k) * .12) * 8), 1);
  display: grid; grid-template-columns: 20px 92px 20px minmax(0, 1fr); align-items: center; column-gap: 12px;
  padding: 13px 6px; margin: 0 -6px; border-radius: 12px; border-bottom: 1px solid rgba(244, 237, 227, .07);
  transition: background .3s var(--mola); cursor: default;
}
.campos li > * { opacity: var(--c); }
.campos li .valor { translate: calc((1 - var(--c)) * 18px) 0; filter: blur(calc((1 - var(--c)) * 4px)); }
.campos li > i { scale: calc(.4 + var(--c) * .6); }
.campos li.vazio > i { visibility: hidden; }
.campos li.apontado { background: rgba(232, 174, 94, .1); }
.ico-campo { width: 18px; height: 18px; fill: none; stroke: var(--apoio); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.campos .rotulo { font-size: 14px; color: var(--apoio); }
.campos .valor { font-size: 16px; font-weight: 500; line-height: 1.38; }
.campos .vazio .valor { color: var(--apoio); font-weight: 400; display: flex; flex-direction: column; gap: 2px; }
.campos .vazio small { font-size: 14px; color: var(--ambar); text-decoration: underline; text-underline-offset: 3px; }
.acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; opacity: clamp(0, calc((var(--p) - .7) * 6), 1); transform: translateY(calc((1 - clamp(0, calc((var(--p) - .7) * 6), 1)) * 12px)); }
.acao-sim { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border-radius: 999px; background: var(--ambar); color: #1A140C; font-size: 15px; font-weight: 600; box-shadow: 0 8px 28px -12px rgba(232, 174, 94, .7); transition: transform .25s var(--mola), box-shadow .25s var(--mola), background-color .25s; }
.acao-sim::before { content: ''; width: 13px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translateY(-2px); margin-right: 12px; }
.montagem.salvo .acao-sim { transform: scale(.97); background: #F3C27E; box-shadow: 0 0 0 4px rgba(232, 174, 94, .16), 0 8px 28px -12px rgba(232, 174, 94, .7); }
.guardado {
  position: absolute; left: 0; right: 0; top: calc(100% + 16px); display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 16px;
  background: rgba(24, 21, 18, .92); border: 1px solid rgba(232, 174, 94, .3); font-size: 15px; font-weight: 500;
  opacity: 0; translate: 0 10px; filter: blur(4px); transition: opacity .5s var(--mola), translate .5s var(--mola), filter .5s var(--mola);
}
.guardado::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ambar); box-shadow: 0 0 10px var(--ambar); flex: none; }
.montagem.salvo .guardado { opacity: 1; translate: 0 0; filter: none; }
.acao-nao { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(244, 237, 227, .22); color: var(--texto); font-size: 15px; }

/* 6. Galeria: duas telas sobem em velocidades diferentes */
.galeria { --altura: 170svh; }
.galeria .foto { filter: brightness(.42) saturate(1.1); }
.veu-galeria { background: linear-gradient(90deg, rgba(12, 10, 9, .9) 0%, rgba(12, 10, 9, .45) 46%, rgba(12, 10, 9, .2) 100%); }
.legenda-galeria { left: var(--recuo); top: 50%; transform: translateY(-50%); max-width: calc(93vw - min(62svh, 640px) * .958 - 56px - var(--recuo) - 80px); }
.legenda-galeria h2 { font-size: var(--t-secao); }
.tela-galeria { position: absolute; z-index: 1; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.tela-galeria .iphone { position: relative; --alto: min(62svh, 640px); }
.tela-galeria figcaption { font-size: var(--t-pequeno); font-weight: 500; color: var(--apoio); }
.tela-g1 { right: calc(7vw + min(62svh, 640px) * .479 + 56px); top: 14svh; translate: 0 calc((1 - var(--p)) * 30svh); }
.tela-g2 { right: 7vw; top: 14svh; translate: 0 calc((1 - var(--p)) * 70svh - 6svh); }

/* 7. Pergunte o que quiser: a pergunta em tamanho de cartaz */
.pergunta .foto { filter: brightness(.5) saturate(1.05); }
.pergunta { --altura: 170svh; --e: clamp(0, calc((var(--p) - .32) * 2.4), 1); }
.perguntas-escolha {
  position: absolute; z-index: 3; left: var(--lateral); top: calc(96px + 3.4 * var(--t-gigante) * .98); display: flex; flex-wrap: wrap; gap: 10px;
  opacity: clamp(0, calc(var(--p) * 3), 1);
}
.escolha {
  min-height: 40px; padding: 0 16px; border-radius: 999px; font: inherit; font-size: var(--t-pequeno); font-weight: 500; cursor: pointer;
  color: var(--apoio); background: rgba(244, 237, 227, .05); border: 1px solid rgba(244, 237, 227, .14);
  transition: color .25s var(--mola), background .25s var(--mola), border-color .25s var(--mola);
}
.escolha:hover { color: var(--texto); border-color: rgba(244, 237, 227, .3); }
.escolha.ativa { color: #1A140C; background: var(--ambar); border-color: var(--ambar); }
.escolha:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; }
.veu-pergunta { background: linear-gradient(0deg, rgba(20, 18, 16, .94) 0%, rgba(20, 18, 16, .25) 50%, rgba(20, 18, 16, .6) 100%); }
.pergunta-gigante {
  position: absolute; z-index: 1; left: var(--recuo); right: var(--lateral); top: 13svh;
  font-size: clamp(52px, 8.4vw, 148px); font-weight: 600; letter-spacing: -0.05em; line-height: .96;
  --r: clamp(0, calc(var(--p) * 2.2), 1);
  text-shadow: var(--sombra-texto);
}
.pergunta-gigante .destaque { color: var(--ambar); }
.pergunta .legenda h2 { font-size: var(--t-secao); }
.iphone-pergunta {
  --alto: min(64svh, 680px); right: 8vw; bottom: -14svh; z-index: 2;
  transform: translateY(calc((1 - var(--e)) * 70svh)) rotate(calc((1 - var(--e)) * 6deg));
}

/* 8. Privacidade */
.privacidade { position: relative; overflow: hidden; min-height: 88svh; display: grid; place-items: center; padding: 88px var(--lateral); background: var(--fundo); }
.foto-privacidade { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.38) saturate(1.05); }
.veu-privacidade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 10, 9, .92) 0%, rgba(12, 10, 9, .55) 55%, rgba(12, 10, 9, .35) 100%); }
.privacidade-miolo { position: relative; z-index: 1; }
.privacidade-miolo { width: min(1080px, 100%); padding-left: calc(var(--recuo) - var(--lateral)); display: flex; flex-direction: column; gap: 26px; }
.privacidade h2 { font-size: var(--t-gigante); letter-spacing: -0.045em; }
.garantias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 26px; }
.garantias li { display: flex; flex-direction: column; gap: 16px; }
.garantias svg { width: 42px; height: 42px; fill: none; stroke: var(--ambar); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.garantias p { font-size: var(--t-apoio); color: var(--apoio); line-height: 1.45; }
.surge { opacity: 0; translate: 0 30px; filter: blur(8px); transition: opacity 1s var(--mola), translate 1s var(--mola), filter 1s var(--mola); }
.surge.visto { opacity: 1; translate: 0 0; filter: none; }
.garantias li:nth-child(2) { transition-delay: .12s; }
.garantias li:nth-child(3) { transition-delay: .24s; }

/* 9. Fecho */
.fecho {
  position: relative; min-height: 100svh; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 10px; padding: 84px var(--lateral) max(48px, env(safe-area-inset-bottom));
}
.nascer { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 45% at 50% 108%, rgba(232, 174, 94, .5) 0%, rgba(160, 90, 30, .18) 45%, transparent 75%); }
.orbe-pequeno { width: 140px; height: auto; margin-bottom: 6px; animation: flutuar 6s ease-in-out infinite alternate; }
.nome { font-size: var(--t-gigante); letter-spacing: -0.045em; }
.assinatura { font-size: var(--t-destaque); color: var(--ambar); font-weight: 500; letter-spacing: -0.02em; }
.fecho-expert { margin-top: 4px; font-size: var(--t-apoio); color: var(--apoio); }
.instalar { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.moldura-qr {
  padding: 18px; border-radius: 32px;
  background: rgba(244, 237, 227, .05); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(232, 174, 94, .55);
  box-shadow: 0 0 70px -10px rgba(232, 174, 94, .45), inset 0 0 30px rgba(232, 174, 94, .08);
}
.qr-grande { width: clamp(200px, 20vw, 248px); height: auto; background: var(--texto); border-radius: 20px; padding: 16px; }
.instrucao { color: var(--apoio); font-size: var(--t-corpo); }
/* O selo oficial da Apple, sem alterar a arte; ao lado, a versão web com a mesma altura. */
.lojas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; }
.loja { display: block; line-height: 0; border-radius: 12px; }
.loja img { height: 56px; width: auto; }
.loja:not([href]) { cursor: default; }
.loja[href]:hover { transform: translateY(-1px); }
.botao-web { text-decoration: none; display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 24px; border-radius: 14px; border: 1px solid rgba(244, 237, 227, .3); color: var(--texto); font-size: var(--t-corpo); font-weight: 500; transition: border-color .2s, background .2s; }
.botao-web:hover { border-color: rgba(244, 237, 227, .6); background: rgba(244, 237, 227, .06); }
.botao-web .ico { width: 18px; height: 18px; }
.botao {
  display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 0 34px;
  background: var(--ambar); color: #1A140C; border-radius: 999px; font-weight: 600; font-size: var(--t-corpo); text-decoration: none;
  box-shadow: 0 14px 50px -12px rgba(232, 174, 94, .8);
  transition: transform .4s var(--mola);
}
.botao:active { transform: scale(.97); }


/* Títulos das cenas: cada palavra sobe de dentro de uma máscara, no ritmo da rolagem */
.cena-fixa:not(.abertura) .legenda > h2 { opacity: 1; translate: none; }
.legenda h2 .pm { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.legenda h2 .pm > span { display: inline-block; translate: 0 calc((1 - clamp(0, calc(var(--p) * 11 - var(--i) * .8), 1)) * 110%); }

/* Tela de gravação viva: o universo do orbe, a fala se escrevendo, sugestões e onda */
.tela-escuta { background: radial-gradient(ellipse 90% 60% at 50% 82%, #3a220d 0%, #0b0907 62%); }
.universo { position: absolute; inset: 0; width: 100%; height: 100%; }
.esc-topo { position: absolute; z-index: 2; top: 14cqw; left: 5cqw; right: 5cqw; display: flex; align-items: center; justify-content: space-between; }
.esc-botao { width: 11cqw; height: 11cqw; border-radius: 50%; display: grid; place-items: center; background: rgba(244, 237, 227, .08); }
.tela-escuta svg { width: 5.2cqw; height: 5.2cqw; fill: none; stroke: #F4EDE3; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.esc-tempo { display: inline-flex; align-items: center; gap: 2cqw; padding: 2.2cqw 3.8cqw; border-radius: 99px; background: rgba(244, 237, 227, .08); font-size: 4.2cqw; font-weight: 600; font-variant-numeric: tabular-nums; }
.esc-tempo i { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: var(--ambar); animation: pulsar 1.2s ease-in-out infinite; }
.esc-fala {
  position: absolute; z-index: 2; top: 32cqw; left: 6cqw; right: 6cqw;
  font-size: 7.4cqw; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; color: #F4EDE3;
  --r: clamp(0, calc((var(--p) - .04) * 1.3), 1);
}
.esc-fala .palavra { opacity: clamp(0, calc(var(--r) * (var(--n) + 3) - var(--i)), 1); }
.esc-sugestoes { position: absolute; z-index: 2; top: 96cqw; left: 6cqw; right: 6cqw; display: flex; flex-wrap: wrap; gap: 2.4cqw; }
.esc-sugestoes span {
  display: inline-flex; align-items: center; gap: 2cqw; padding: 2.4cqw 3.8cqw; border-radius: 6cqw;
  background: rgba(244, 237, 227, .08); border: 1px solid rgba(244, 237, 227, .16);
  font-size: 3.9cqw; font-weight: 500; color: #F4EDE3;
  opacity: 0; translate: 0 3cqw; filter: blur(4px); transition: opacity .45s var(--mola), translate .45s var(--mola), filter .45s var(--mola);
}
.esc-sugestoes span svg { stroke: var(--ambar); width: 4.4cqw; height: 4.4cqw; }
.esc-sugestoes span.visto { opacity: 1; translate: 0 0; filter: none; }
.esc-onda { position: absolute; z-index: 2; left: 8cqw; right: 8cqw; top: 141cqw; height: 12cqw; display: flex; align-items: center; justify-content: space-between; }
.esc-onda b { width: 1.1cqw; height: 100%; border-radius: 1cqw; background: var(--ambar); transform: scaleY(.08); opacity: .85; }
.esc-palco { position: absolute; z-index: 2; left: 6cqw; right: 6cqw; bottom: 16cqw; display: flex; align-items: center; justify-content: space-between; }
.esc-redondo { position: relative; width: 15cqw; height: 15cqw; border-radius: 50%; display: grid; place-items: center; background: rgba(244, 237, 227, .1); border: 1px solid rgba(244, 237, 227, .18); }
.esc-redondo small { position: absolute; top: 100%; left: 50%; translate: -50% 0; margin-top: 2.6cqw; font-size: 3.6cqw; color: var(--apoio); white-space: nowrap; }
.esc-pronto { background: var(--ambar); border-color: var(--ambar); }
.esc-pronto svg { stroke: #1A140C; stroke-width: 2.2; }
.esc-orbe { position: relative; width: 36cqw; aspect-ratio: 1; }
.esc-orbe > img, .esc-orbe .orbe-vivo { position: absolute; inset: 0; width: 100%; height: 100%; }
.esc-orbe.vivo > img { opacity: 0; }
.esc-orbe i {
  position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(232, 174, 94, .55);
  animation: onda 2.4s cubic-bezier(.16, 1, .3, 1) infinite; opacity: 0;
}
.esc-orbe i:nth-child(2) { animation-delay: .8s; }
.esc-orbe i:nth-child(3) { animation-delay: 1.6s; }
@keyframes onda { 0% { opacity: calc(.15 + var(--nv, .2) * .6); transform: scale(1); } 100% { opacity: 0; transform: scale(calc(1.6 + var(--nv, .2) * .7)); } }
@keyframes pulsar { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Tudo o que o app faz: ficha técnica, em grupos com fios finos */
.tudo { padding: 112px var(--lateral) 84px; background: linear-gradient(180deg, var(--fundo), #16120e 40%, var(--fundo)); }
.tudo-miolo { width: min(1180px, 100%); margin: 0 auto; }
.tudo h2 { font-size: var(--t-gigante); letter-spacing: -0.045em; }
.tudo-intro { margin-top: 16px; font-size: var(--t-apoio); color: var(--apoio); }
.tudo-grupo { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 3fr); gap: 22px 36px; padding: 30px 0; border-top: 1px solid rgba(244, 237, 227, .14); margin-top: 32px; }
.tudo-grupo + .tudo-grupo { margin-top: 0; }
.tudo-grupo h3 { font-size: var(--t-grupo); font-weight: 600; letter-spacing: -0.02em; color: var(--ambar); }
.tudo-grupo ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 36px; }
.tudo-grupo li { display: flex; flex-direction: column; gap: 6px; }
.tudo-grupo li b { font-size: var(--t-item); font-weight: 600; }
.tudo-grupo li span { font-size: var(--t-pequeno); line-height: 1.5; color: var(--apoio); }
.tudo-grupo li:nth-child(2) { transition-delay: .06s; }
.tudo-grupo li:nth-child(3) { transition-delay: .12s; }
.tudo-grupo li:nth-child(4) { transition-delay: .18s; }
.tudo-grupo li:nth-child(5) { transition-delay: .24s; }
.tudo-grupo li:nth-child(6) { transition-delay: .3s; }
.tudo-depois { margin-top: 30px; padding-top: 26px; border-top: 1px solid rgba(244, 237, 227, .14); font-size: var(--t-corpo); color: var(--apoio); }
.tudo-depois b { color: var(--texto); font-weight: 600; }

/* Ícones da privacidade se desenham ao aparecer */
.garantias svg * { stroke-dasharray: var(--comprimento, 80) 9999; stroke-dashoffset: var(--comprimento, 80); transition: stroke-dashoffset 1.6s cubic-bezier(.16, 1, .3, 1) .2s; }
.garantias .visto svg * { stroke-dashoffset: 0; }
.privacidade .mais { margin-top: 26px; }

/* Fecho: o orbe vivo e um brilho que passa pelo código */
.orbe-pequeno { position: relative; display: block; width: 160px; aspect-ratio: 1; margin-bottom: 6px; animation: flutuar 6s ease-in-out infinite alternate; }
.orbe-pequeno > img { width: 100%; height: 100%; }
.orbe-pequeno.vivo > img { opacity: 0; }
.moldura-qr { position: relative; overflow: hidden; }
.moldura-qr::after {
  content: ''; position: absolute; inset: -50%; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 236, 200, .35) 50%, transparent 58%);
  animation: brilho-qr 4.5s cubic-bezier(.16, 1, .3, 1) infinite;
}
@keyframes brilho-qr { 0% { transform: translateX(-60%); } 60%, 100% { transform: translateX(60%); } }

/* Fichas: abrem como as páginas de produto, crescendo do botão */
html.travado { overflow: hidden; }
.ficha {
  width: min(1180px, calc(100vw - 48px)); max-height: calc(100svh - 48px); margin: auto; padding: 0;
  border: 1px solid rgba(244, 237, 227, .12); border-radius: 36px; overflow: auto; overscroll-behavior: contain;
  background: radial-gradient(ellipse 70% 80% at 85% 30%, #2c1d0f 0%, #141110 60%); color: var(--texto);
  box-shadow: 0 40px 120px -20px rgba(0, 0, 0, .9);
}
.ficha::backdrop { background: rgba(6, 5, 4, .74); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.ficha[open] { animation: ficha-entra .6s cubic-bezier(.16, 1, .3, 1); }
.ficha[open]::backdrop { animation: fundo-entra .5s ease both; }
@keyframes ficha-entra { from { opacity: 0; transform: translateY(40px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes fundo-entra { from { opacity: 0; } to { opacity: 1; } }
.ficha-fechar {
  position: absolute; z-index: 5; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; border: 0; cursor: pointer; background: rgba(244, 237, 227, .1); color: var(--texto);
  transition: background-color .3s, transform .4s var(--mola);
}
.ficha-fechar:hover { background: rgba(244, 237, 227, .22); transform: rotate(90deg); }
.ficha-fechar svg, .ficha-lista svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ficha-miolo { overflow: clip; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 42px; align-items: center; padding: 48px 56px; }
.ficha h3 { font-size: var(--t-ficha); font-weight: 600; letter-spacing: -0.04em; line-height: 1; text-wrap: pretty; color: #fff; }
.ficha-intro { margin-top: 16px; font-size: var(--t-apoio); line-height: 1.45; color: var(--apoio); }
.ficha-lista { margin-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 32px; }
.ficha-lista li { display: flex; gap: 14px; align-items: flex-start; }
.ficha-lista svg { flex: none; box-sizing: content-box; width: 20px; height: 20px; padding: 9px; border-radius: 50%; color: var(--ambar); background: rgba(232, 174, 94, .12); box-shadow: inset 0 0 0 1px rgba(232, 174, 94, .22); }
.ficha-lista b { display: block; margin-top: 2px; font-size: var(--t-item); font-weight: 600; color: var(--texto); }
.ficha-lista p { margin-top: 4px; font-size: var(--t-pequeno); line-height: 1.5; color: rgba(214, 205, 193, .82); }
.ficha-visual { display: grid; place-items: center; min-height: 100%; }
.ficha-visual .iphone { position: relative; --alto: min(64svh, 600px); }
.ficha-orbe img { width: min(420px, 100%); height: auto; filter: drop-shadow(0 0 60px rgba(232, 174, 94, .4)); }
.ficha[open] .ficha-texto > *, .ficha[open] .ficha-lista li { animation: entrar .8s cubic-bezier(.16, 1, .3, 1) both; }
.ficha[open] .ficha-intro { animation-delay: .06s; }
.ficha[open] .ficha-lista li:nth-child(1) { animation-delay: .12s; }
.ficha[open] .ficha-lista li:nth-child(2) { animation-delay: .18s; }
.ficha[open] .ficha-lista li:nth-child(3) { animation-delay: .24s; }
.ficha[open] .ficha-lista li:nth-child(4) { animation-delay: .3s; }
.ficha[open] .ficha-visual { animation: subir 1s cubic-bezier(.16, 1, .3, 1) .1s both; }
@keyframes subir { from { opacity: 0; transform: translateY(60px) rotate(3deg); } to { opacity: 1; transform: none; } }
::view-transition-group(ficha) { animation-duration: .6s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
::view-transition-old(ficha), ::view-transition-new(ficha) { height: 100%; object-fit: cover; }


/* Rodapé no estilo das páginas da Apple: tipografia mínima, cores quase apagadas */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-links .ico { width: 15px; height: 15px; margin-right: 7px; opacity: .7; }
.nav-links a.ativo .ico { opacity: 1; color: var(--ambar); }
.tudo-grupo li { flex-direction: row; gap: 14px; }
.tudo-grupo li > div { display: flex; flex-direction: column; gap: 6px; }
.ico-tudo { width: 20px; height: 20px; margin-top: 3px; color: var(--ambar); }
.mapa { padding: 52px var(--lateral) max(26px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(244, 237, 227, .08); background: #0d0b09; font-size: 12px; line-height: 1.33; color: rgba(244, 237, 227, .5); }
.mapa > * { width: min(1024px, 100%); margin-left: auto; margin-right: auto; }
.mapa-topo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid rgba(244, 237, 227, .08); }
.mapa-topo .marca { font-size: 13px; min-height: 0; gap: 8px; color: rgba(244, 237, 227, .8); }
.mapa-topo .marca img { width: 18px; height: 18px; }
.mapa-topo p { font-size: 12px; color: rgba(244, 237, 227, .45); }
.mapa-grade { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 32px; margin-top: 26px; padding-bottom: 26px; border-bottom: 1px solid rgba(244, 237, 227, .08); }
.mapa-rotulo { font-size: 11px; font-weight: 500; color: rgba(244, 237, 227, .5); margin-bottom: 14px; }
.mapa-cols { display: grid; gap: 26px 20px; }
.mapa-app .mapa-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mapa-links { padding-left: 32px; border-left: 1px solid rgba(244, 237, 227, .1); }
.mapa-links .mapa-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mapa-col h3 { font-size: 12px; font-weight: 600; letter-spacing: 0; color: rgba(244, 237, 227, .72); }
.mapa-col ul { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
/* O que é do app: informação, sem reação ao mouse, bem apagado */
.mapa-app li { display: flex; align-items: center; gap: 7px; color: rgba(244, 237, 227, .5); cursor: default; }
.mapa-app li .ico { width: 12px; height: 12px; opacity: .7; }
/* O que é clicável: âmbar, com sublinhado e seta ao passar o mouse */
.mapa-docs a, .mapa-docs button {
  display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12px; color: rgba(232, 174, 94, .88); text-align: left; text-decoration: none; white-space: nowrap; transition: color .25s;
}
.mapa-docs a .ico, .mapa-docs button .ico { width: 12px; height: 12px; }
.mapa-docs a::after, .mapa-docs button::after { content: '\203A'; opacity: 0; translate: -4px 0; transition: opacity .25s, translate .3s var(--mola); }
.mapa-docs a:hover, .mapa-docs button:hover { color: #F3C27E; text-decoration: underline; text-underline-offset: 3px; }
.mapa-docs a:hover::after, .mapa-docs button:hover::after { opacity: 1; translate: 0 0; }
.mapa-docs a:focus-visible, .mapa-docs button:focus-visible { outline: 1px solid var(--ambar); outline-offset: 3px; border-radius: 3px; }
.mapa > .mapa-base { width: 100%; }
/* Selos: confiança à esquerda (âmbar quando abre a verificação pública, apagado quando só informa)
   e as lojas à direita. O Android ainda não existe: fica em opacidade baixa. */
.mapa > .mapa-selos { width: 100%; }
.mapa-selos { display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; margin-top: 22px; padding: 0 clamp(0px, 2vw, 26px) 22px; border-bottom: 1px solid rgba(244, 237, 227, .08); }
.selos-confianca { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.selo-confianca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: rgba(244, 237, 227, .5); }
.selo-confianca .ico { width: 18px; height: 18px; flex: none; }
.selo-confianca > span { display: flex; flex-direction: column; line-height: 1.3; }
.selo-confianca b { font-size: 12px; font-weight: 600; color: rgba(244, 237, 227, .75); }
.selo-confianca small { font-size: 11px; }
a.selo-confianca .ico, a.selo-confianca b { color: rgba(232, 174, 94, .9); }
a.selo-confianca:hover b { color: #F3C27E; text-decoration: underline; text-underline-offset: 3px; }
.selos-lojas { display: flex; align-items: center; gap: 12px; }
.loja-rodape img { height: 36px; width: auto; }
.loja-android { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 10px; border-radius: 8px; border: 1px solid rgba(244, 237, 227, .5); background: #000; color: #fff; opacity: .32; cursor: default; }
.loja-android .ico { width: 20px; height: 20px; }
.loja-android > span { display: flex; flex-direction: column; line-height: 1.05; }
.loja-android small { font-size: 9px; }
.loja-android b { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
/* Três colunas: a logo na esquerda, o descritivo no centro exato da tela, o endereço na direita. */
.mapa-base { display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, max-content) minmax(max-content, 1fr); align-items: center; gap: 16px 32px; margin-top: 18px; padding: 0 clamp(0px, 2vw, 26px); }
.logo-mm { justify-self: start; height: 32px; width: auto; }
.assinatura-texto { display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; font-size: 12px; color: rgba(244, 237, 227, .5); }
.assinatura-texto .ico { width: 13px; height: 13px; flex: none; color: var(--ambar); opacity: .85; }
.assinatura-texto b { font-weight: 600; color: rgba(244, 237, 227, .85); }
.mapa-base .versao { justify-self: end; font-size: 12px; color: var(--ambar); text-decoration: none; transition: color .2s; }
.mapa-base .versao:hover { color: #F3C27E; text-decoration: underline; text-underline-offset: 3px; }

/* Fichas de documento: só texto, em medida de leitura */
.ficha-doc { width: min(1240px, calc(100vw - 48px)); }
.ficha-doc .ficha-miolo { grid-template-columns: minmax(0, 1fr); padding: 52px 56px 56px; }
.ficha-doc .ficha-texto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 0 56px; align-items: start; }
.ficha-doc .ficha-texto > h3, .ficha-doc .ficha-texto > .ficha-intro { grid-column: 1; }
.ficha-doc .doc { grid-column: 2; grid-row: 1 / span 3; }
.doc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 42px; }
.doc section { padding-top: 18px; border-top: 1px solid rgba(244, 237, 227, .12); }
.doc h4 { display: flex; align-items: center; gap: 10px; color: var(--texto); font-size: var(--t-item); font-weight: 600; letter-spacing: -0.01em; }
.doc h4::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ambar); box-shadow: 0 0 10px rgba(232, 174, 94, .7); flex: none; }
.doc p { margin-top: 8px; font-size: var(--t-pequeno); line-height: 1.55; color: rgba(214, 205, 193, .82); }
.ficha[open] .doc section { animation: entrar .8s cubic-bezier(.16, 1, .3, 1) both; }
.ficha[open] .doc section:nth-child(2) { animation-delay: .06s; }
.ficha[open] .doc section:nth-child(3) { animation-delay: .12s; }
.ficha[open] .doc section:nth-child(4) { animation-delay: .18s; }
.ficha[open] .doc section:nth-child(5) { animation-delay: .24s; }

/* Telas médias */
@media (max-width: 1180px) {
  .nav-links a { padding: 0 8px; font-size: 14px; }
  .mapa-grade { grid-template-columns: minmax(0, 1fr); }
  .mapa-links { padding-left: 0; border-left: 0; padding-top: 26px; border-top: 1px solid rgba(244, 237, 227, .1); }
  :root { --recuo: var(--lateral); }
  .legenda-construcao { display: none; }
  .ficha-lista { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* Navegação compacta até 1060 px: o menu abre as seções */
@media (max-width: 1060px) {
  .nav { gap: 12px; height: 56px; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: 10px var(--lateral) 18px;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(14, 12, 10, .94); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    border-bottom: 1px solid rgba(244, 237, 227, .08);
    opacity: 0; translate: 0 -8px; pointer-events: none; visibility: hidden; transition: opacity .3s var(--mola), translate .3s var(--mola), visibility 0s .3s;
  }
  .nav.aberto .nav-links { opacity: 1; translate: 0 0; pointer-events: auto; visibility: visible; transition: opacity .3s var(--mola), translate .3s var(--mola), visibility 0s; }
  .nav-links a { padding: 0 4px; font-size: 18px; min-height: 48px; border-bottom: 1px solid rgba(244, 237, 227, .06); }
  .nav-links a::after { display: none; }
  .nav-menu { display: grid; place-content: center; gap: 6px; width: 44px; height: 44px; margin-left: auto; border: 0; background: none; cursor: pointer; }
  .nav-menu span { display: block; width: 20px; height: 1.5px; background: var(--texto); transition: transform .35s var(--mola); }
  .nav.aberto .nav-menu span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .nav.aberto .nav-menu span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  .selo { order: 2; padding: 4px 14px 4px 4px; font-size: 14px; }
  .entrar { order: 2; }
  .selo-texto { padding-left: 10px; }
  .marca { margin-right: auto; }
}
/* No celular, o Entrar vira só o ícone, para o selo caber inteiro. */
@media (max-width: 560px) {
  .entrar { width: 36px; min-height: 36px; padding: 0; justify-content: center; }
  .entrar-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Celular: legenda no alto, iPhone embaixo */
@media (max-width: 860px) {
  .mais { font-size: var(--t-pequeno); min-height: 44px; }
  .ficha { width: 100vw; max-width: 100vw; max-height: 100svh; height: 100svh; border-radius: 0; border: 0; }
  .ficha-miolo { grid-template-columns: minmax(0, 1fr); padding: 76px var(--lateral) 56px; gap: 42px; }
  .ficha-visual .iphone { --alto: 62svh; }
  .tudo { padding: 76px var(--lateral) 56px; }
  .tudo-grupo { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 32px 0; }
  .tudo-grupo ul { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .mapa { padding-top: 36px; }
  .mapa-app .mapa-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mapa-topo p { padding-left: 0; border-left: 0; flex-basis: 100%; }
  .mapa-base { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; }
  .logo-mm { justify-self: center; height: 30px; }
  .assinatura-texto .ico { display: none; }
  .mapa-base .versao { justify-self: center; }
  .mapa-selos { flex-direction: column; align-items: flex-start; }
  .selos-confianca { flex-direction: column; }
  .ficha-doc .ficha-miolo { padding: 76px var(--lateral) 56px; }
  .ficha-doc .ficha-texto { grid-template-columns: minmax(0, 1fr); }
  .ficha-doc .doc { grid-column: 1; grid-row: auto; margin-top: 32px; grid-template-columns: minmax(0, 1fr); }
  .ficha-lista { grid-template-columns: minmax(0, 1fr); }
  .legenda, .legenda-topo, .legenda-base, .legenda-direita, .legenda-esquerda, .legenda-galeria { left: var(--lateral); right: var(--lateral); top: 88px; bottom: auto; transform: none; max-width: none; gap: 10px; }
  .legenda h2, .legenda-direita h2, .legenda-esquerda h2 { font-size: clamp(34px, 10vw, 46px); }
  .apoio { font-size: var(--t-apoio); }
  .abertura { --fone-h: min(70svh, 560px); --fone-topo: calc(100svh - var(--fone-h) - 4svh); --orbe: min(80vw, 340px); }
  .iphone-dia, .iphone-pergunta, .iphone-bloqueio { --alto: 54svh; left: 50%; right: auto; top: auto; bottom: -6svh; margin-left: calc(var(--alto) * -71.9 / 150 / 2); }
  .iphone-bloqueio { --alto: 62svh; bottom: -3svh; margin-top: 0; }
  .iphone-bloqueio { translate: 0 calc((1 - clamp(0, calc(var(--p) * 4), 1)) * 20svh); }
  .iphone-dia { transform: perspective(1600px) translateY(calc((1 - var(--e)) * 40svh)) rotateY(calc(-20deg + var(--e) * 20deg)); }
  .transcricao { display: none; }
  .pilha { margin-bottom: 12cqw; }
  .veu-dia, .veu-pergunta, .veu-avisos { background: linear-gradient(180deg, rgba(20, 18, 16, .92) 0%, rgba(20, 18, 16, .5) 40%, rgba(20, 18, 16, .2) 70%, rgba(20, 18, 16, .6) 100%); }
  .confirma-esquerda { left: var(--lateral); right: var(--lateral); top: 88px; translate: none; width: auto; }
  .citacao, .ligacoes { display: none; }
  .cartao-anotei { left: var(--lateral); right: var(--lateral); top: auto; bottom: 4svh; translate: none; width: auto; padding: 18px; }
  .campos li { grid-template-columns: 20px 82px 20px minmax(0, 1fr); padding: 11px 4px; }
  .campos .rotulo { font-size: 14px; }
  .campos .valor { font-size: var(--t-pequeno); }
  .guardado { display: none; }
  .tela-galeria .iphone { --alto: 46svh; }
  .tela-galeria figcaption { font-size: 14px; }
  .tela-g1 { right: auto; left: var(--lateral); top: auto; bottom: 4svh; }
  .tela-g2 { right: var(--lateral); top: auto; bottom: 4svh; }
  /* A pergunta gigante é o título: a legenda fica só com o botão e a hora, logo abaixo dela */
  .pergunta .legenda h2, .pergunta .legenda .apoio { display: none; }
  .pergunta .legenda { top: calc(92px + 3 * clamp(46px, 13vw, 64px) * .96 + 20px); }
  .mapa-docs a, .mapa-docs button { min-height: 30px; }
  .mapa-docs ul { gap: 0; }
  .avisos .legenda { gap: 8px; }
  .iphone-bloqueio { --alto: 56svh; }
  .tela-galeria .iphone { --alto: min(46svh, calc((100vw - 2 * var(--lateral) - 12px) / 2 / .479)); }
  .pergunta-gigante { left: var(--lateral); top: 92px; font-size: clamp(46px, 13vw, 64px); }
  .perguntas-escolha { top: calc(92px + 3 * clamp(46px, 13vw, 64px) * .96 + 70px); right: var(--lateral); }
  .garantias { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .privacidade-miolo { padding-left: 0; }
}

/* Até 1060 px: as duas cenas viram coluna, já montadas; o filme toca na caixa de cima. */
@media (max-width: 1060px) {
  .fala, .escrita { height: auto; }
  .cinema-palco { position: relative; height: auto; overflow: visible; padding: 88px var(--lateral) 64px; display: flex; flex-direction: column; gap: 22px; }
  .fala .cinema-palco, .escrita .cinema-palco { --a: 1; --b: 1; --c: 1; --d: 1; }
  .cinema-titulo { flex-direction: column; align-items: flex-start; }
  .cinema-titulo-apoio { align-items: flex-start; }
  .cinema-titulo h2 { font-size: clamp(44px, 12vw, 64px); }
  .cinema-titulo .apoio { white-space: normal; font-size: var(--t-apoio); }
  .cinema-quadros { flex-direction: column; }
  .cinema-filme, .cinema-carplay { width: 100%; height: auto; aspect-ratio: 16 / 10; transform: none; translate: none; }
  .escrita-texto { position: relative; left: auto; top: auto; width: auto; }
  .cinema-celular { position: relative; right: auto; top: auto; margin: 6px auto 0; --alto: min(68svh, 600px); }
  .iphone-montagem { --alto: min(68svh, 600px); }
  .cinema-caixas { position: relative; left: auto; bottom: auto; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .surge { opacity: 1; translate: none; filter: none; }
  .preloader { display: none; }
  :root { --ab: 0s; }
  .cena-fixa { height: 100svh; }
  .fala, .escrita { height: auto; }
  .fala .cinema-palco, .escrita .cinema-palco { --a: 1; --b: 1; --c: 1; --d: 1; }
}

/* No cartão o loop refaz só o cartão e as linhas: o título e o apoio ficam parados, sempre legíveis. */
.legenda-confirma h2 .pm > span { translate: none; }
.cena-fixa .legenda-confirma > * { opacity: 1; translate: none; }

/* Celular: a cena da pergunta corre em coluna (pergunta, botão e hora, escolhas), sem nada por cima de nada. */
@media (max-width: 860px) {
  .pergunta .estagio { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding: 92px var(--lateral) 0; }
  .pergunta .pergunta-gigante { position: relative; inset: auto; order: 1; min-height: calc(3 * .96em); }
  .pergunta .estagio .legenda { position: relative; inset: auto; order: 2; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
  .pergunta .estagio .legenda .hora { order: 0; margin: 0; }
  .pergunta .perguntas-escolha { position: relative; inset: auto; order: 3; }

  /* Rodapé no celular: tudo no eixo do meio. */
  .mapa-topo { justify-content: center; text-align: center; }
  .mapa-rotulo, .mapa-col h3 { text-align: center; }
  .mapa-col ul { align-items: center; }
  .mapa-app li, .mapa-docs a, .mapa-docs button { justify-content: center; }
  .mapa-docs a::after, .mapa-docs button::after { display: none; }
  .mapa-selos { align-items: center; padding-left: 0; padding-right: 0; }
  .selos-confianca { align-items: center; }
  .selo-confianca { flex-direction: column; gap: 6px; text-align: center; }
  .selo-confianca > span { align-items: center; }
  .selos-lojas { justify-content: center; }
}
@media (max-width: 860px) {
  .pergunta .perguntas-escolha { flex-wrap: nowrap; overflow-x: auto; align-self: stretch; margin-right: calc(-1 * var(--lateral)); padding-right: var(--lateral); scrollbar-width: none; }
  .pergunta .perguntas-escolha::-webkit-scrollbar { display: none; }
  .pergunta .escolha { flex: none; }
  .pergunta .iphone-pergunta { position: relative; inset: auto; order: 4; align-self: center; flex: none; margin-top: 4px; }
}
@media (max-width: 860px) {
  .pergunta .perguntas-escolha { flex: none; }
  .pergunta .iphone-pergunta { margin-left: auto; margin-right: auto; }
}
/* As escolhas quebram em linhas, inteiras, em vez de sumir pela borda. */
@media (max-width: 860px) {
  .pergunta .perguntas-escolha { flex-wrap: wrap; overflow: visible; margin-right: 0; padding-right: 0; gap: 8px; }
  .pergunta .escolha { min-height: 38px; padding: 0 14px; font-size: 15px; }
}

/* Lançamento: a contagem até quarta, 28 de outubro, às 8h. Cada casa é um vidro escuro com fio âmbar;
   a dos segundos tem o anel que esvazia a cada minuto. Antes do lançamento o orbe encolhe um pouco
   e o "Ver como funciona" sai, para a contagem caber na primeira tela. */
.lancamento { display: none; }
.antes-do-lancamento .lancamento { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: clamp(10px, 2.4svh, 26px); animation: entrar 1.2s var(--mola) calc(var(--ab) + 1.9s) both; }
.antes-do-lancamento .abertura { --orbe: clamp(170px, 27svh, 340px); --centro: 35svh; }
.antes-do-lancamento .descer { display: none; }
.lancamento-rotulo { font-size: var(--t-pequeno); font-weight: 500; color: var(--ambar); letter-spacing: .01em; }
.lancamento-fio { position: relative; width: min(340px, 70vw); height: 1px; background: linear-gradient(90deg, transparent, rgba(232, 174, 94, .55) 30%, transparent 46%, transparent 54%, rgba(232, 174, 94, .55) 70%, transparent); }
.lancamento-fio::after { content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--ambar); box-shadow: 0 0 10px rgba(232, 174, 94, .8); translate: -50% -50%; }
.relogio { --casa: clamp(58px, min(6.2vw, 10.6svh), 94px); list-style: none; display: flex; align-items: flex-start; gap: clamp(14px, 1.8vw, 28px); margin-top: 6px; }
.relogio li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.relogio li + li::before { content: ''; position: absolute; left: calc(clamp(14px, 1.8vw, 28px) / -2); top: calc(var(--casa) / 2); width: 4px; height: 4px; border-radius: 50%; background: rgba(232, 174, 94, .7); translate: -50% -50%; }
.casa {
  position: relative; display: grid; place-items: center; width: var(--casa); height: var(--casa); border-radius: calc(var(--casa) * .22);
  background: linear-gradient(180deg, rgba(48, 36, 24, .62), rgba(20, 16, 12, .72));
  border: 1px solid rgba(232, 174, 94, .28);
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, .14), inset 0 -18px 30px rgba(0, 0, 0, .25), 0 18px 40px rgba(0, 0, 0, .35), 0 0 30px rgba(232, 174, 94, .06);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.casa b { font-size: calc(var(--casa) * .5); font-weight: 400; letter-spacing: -0.04em; line-height: 1; color: var(--texto); font-variant-numeric: tabular-nums; }
.casa b.virou { animation: virar .5s var(--mola); }
@keyframes virar { from { opacity: .25; translate: 0 -.12em; filter: blur(3px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
.casa-segundos { border-color: rgba(232, 174, 94, .14); }
.anel { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); overflow: visible; pointer-events: none; }
.anel rect { fill: none; stroke: var(--ambar); stroke-width: 1.8; stroke-linecap: round; transition: stroke-dashoffset .9s linear; filter: drop-shadow(0 0 4px rgba(232, 174, 94, .6)); }
.unidade { font-size: 13px; font-weight: 500; color: var(--apoio); }

/* Antes do lançamento, o Entrar e o "Usar no navegador" ficam apagados, sem clique, com a dica da data. */
[data-depois-do-lancamento][aria-disabled="true"] { position: relative; opacity: .42; cursor: not-allowed; }
[data-depois-do-lancamento][aria-disabled="true"]:hover { border-color: rgba(244, 237, 227, .22); background: none; }
[data-depois-do-lancamento][aria-disabled="true"]::after {
  content: attr(data-dica); position: absolute; top: calc(100% + 10px); right: 0; z-index: 30; white-space: nowrap;
  padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 500; color: var(--texto);
  background: rgba(24, 20, 16, .96); border: 1px solid rgba(232, 174, 94, .3);
  opacity: 0; translate: 0 -4px; pointer-events: none; transition: opacity .2s, translate .2s var(--mola);
}
[data-depois-do-lancamento][aria-disabled="true"]:hover::after, [data-depois-do-lancamento][aria-disabled="true"]:focus-visible::after { opacity: 1; translate: 0 0; }
.botao-web[aria-disabled="true"]::after { right: auto; left: 50%; translate: -50% -4px; }
.botao-web[aria-disabled="true"]:hover::after { translate: -50% 0; }

@media (max-width: 860px) {
  .antes-do-lancamento .abertura { --orbe: min(56vw, 230px); --centro: 33svh; }
  .relogio { --casa: min(17vw, 74px); gap: 12px; }
  .relogio li + li::before { left: -6px; }
  .unidade { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .anel rect { transition: none; }
}

/* Contador discreto: casas menores, fio e brilho mais leves, respiro maior acima da contagem. */
.antes-do-lancamento .lancamento { gap: clamp(10px, 1.6svh, 16px); margin-top: clamp(20px, 4.6svh, 52px); }
.lancamento-rotulo { font-size: clamp(13px, min(1.05vw, 1.9svh), 15px); color: rgba(232, 174, 94, .85); }
.lancamento-fio { width: min(260px, 60vw); opacity: .7; }
.lancamento-fio::after { width: 4px; height: 4px; box-shadow: 0 0 6px rgba(232, 174, 94, .6); }
.relogio { --casa: clamp(48px, min(4.4vw, 8.2svh), 72px); gap: clamp(12px, 1.4vw, 22px); margin-top: 4px; }
.relogio li { gap: 8px; }
.relogio li + li::before { left: calc(clamp(12px, 1.4vw, 22px) / -2); width: 3px; height: 3px; background: rgba(232, 174, 94, .45); }
.casa {
  border-radius: calc(var(--casa) * .26);
  background: linear-gradient(180deg, rgba(40, 32, 24, .45), rgba(18, 15, 12, .55));
  border-color: rgba(244, 237, 227, .1);
  box-shadow: inset 0 1px 0 rgba(255, 230, 190, .07), 0 10px 26px rgba(0, 0, 0, .28);
}
.casa b { font-size: calc(var(--casa) * .44); color: rgba(244, 237, 227, .92); }
.casa-segundos { border-color: rgba(244, 237, 227, .06); }
.anel rect { stroke-width: 1.4; stroke: rgba(232, 174, 94, .85); filter: none; }
.unidade { font-size: 12px; font-weight: 400; color: rgba(244, 237, 227, .5); }
@media (max-width: 860px) {
  .relogio { --casa: min(15vw, 62px); gap: 12px; }
  .relogio li + li::before { left: -6px; }
}
.lancamento-rotulo { display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: .14em; font-size: clamp(11px, min(.86vw, 1.6svh), 13px); font-weight: 600; }
.lancamento-rotulo .ico { width: 15px; height: 15px; flex: none; }
@media (max-width: 560px) {
  .lancamento-rotulo { letter-spacing: .08em; font-size: 11px; max-width: 290px; text-align: center; line-height: 1.5; }
}

/* As lojas ao lado da contagem, separadas por um fio; no celular descem para baixo dela. */
.lancamento-linha { display: flex; align-items: flex-start; gap: clamp(18px, 2.2vw, 34px); }
.lancamento-divisor { align-self: stretch; width: 1px; margin: 4px 0 22px; background: linear-gradient(180deg, transparent, rgba(244, 237, 227, .2) 20%, rgba(244, 237, 227, .2) 80%, transparent); }
.lancamento-lojas { list-style: none; display: flex; flex-direction: column; justify-content: center; gap: 8px; min-height: var(--casa-alta, clamp(48px, min(4.4vw, 8.2svh), 72px)); margin-top: 6px; }
.etiqueta-loja {
  display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 14px 0 11px; border-radius: 10px;
  border: 1px solid rgba(244, 237, 227, .14); background: rgba(20, 16, 12, .5); color: rgba(244, 237, 227, .78); text-align: left;
}
.etiqueta-loja .ico { width: 18px; height: 18px; color: var(--ambar); }
.etiqueta-loja > span { display: flex; flex-direction: column; line-height: 1.08; }
.etiqueta-loja small { font-size: 9.5px; letter-spacing: .04em; color: rgba(244, 237, 227, .5); }
.etiqueta-loja b { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
@media (max-width: 760px) {
  .lancamento-linha { flex-direction: column; align-items: center; gap: 14px; }
  .lancamento-divisor { align-self: center; width: min(180px, 50vw); height: 1px; margin: 0; background: linear-gradient(90deg, transparent, rgba(244, 237, 227, .2), transparent); }
  .lancamento-lojas { flex-direction: row; flex-wrap: wrap; justify-content: center; min-height: 0; margin-top: 0; }
}
@media (max-width: 560px) {
  .lancamento-rotulo { display: block; }
  .lancamento-rotulo .ico { display: inline-block; vertical-align: -3px; margin-right: 6px; width: 14px; height: 14px; }
}

/* O orbe encolhe sob o mouse e um pouco mais no toque, com mola; o brilho acende junto.
   A propriedade scale soma com o flutuar (transform) sem brigar com ele. */
.orbe-palco .orbe, .orbe-palco .orbe-vivo { transition: scale .55s cubic-bezier(.34, 1.56, .64, 1); }
.orbe-palco .orbe-luz { transition: opacity .5s var(--mola); }
@media (hover: hover) {
  .orbe-palco:hover .orbe, .orbe-palco:hover .orbe-vivo { scale: .93; }
}
.orbe-palco:active .orbe, .orbe-palco:active .orbe-vivo { scale: .86; transition-duration: .18s; }
.orbe-palco { -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: reduce) {
  .orbe-palco .orbe, .orbe-palco .orbe-vivo { transition: none; }
}