/* Filme "Do clique à venda" na hero (SL-12).
   Medidas em cqw do palco: o mesmo filme serve do desktop ao celular, e em pé
   uma container query reorganiza as cenas que não cabem. Cor só por token: cada
   cena declara data-modo, e os tokens semânticos do tema resolvem para o modo
   dela. O movimento é do scripts/filme.js; este arquivo só desenha o estado. */

/* ── palco ── */
.hero-filme {
  position: relative; z-index: 2;
  --topo: 64px;
  min-height: 100svh; padding-top: var(--topo);
  display: flex; align-items: center; justify-content: center;
  background: var(--color-fundo);
}
.filme {
  position: relative; margin: 0; width: 100%; height: calc(100svh - var(--topo));
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
/* Piso de leitura: em palco pequeno (celular em pé ou deitado) o texto de
   leitura não cai abaixo de 14 px, por mais que o cqw encolha. */
.filme { --piso: 14px; }
.filme-palco {
  position: relative; width: min(100%, calc((100svh - var(--topo)) * 16 / 9)); aspect-ratio: 16 / 9;
  container: filme / size;
  background: var(--color-fundo); color: var(--color-texto);
}
@media (max-aspect-ratio: 4 / 5) {
  .hero-filme { align-items: flex-start; }
  .filme-palco { width: min(100%, calc((100svh - var(--topo)) * 9 / 16)); aspect-ratio: 9 / 16; }
}

/* ── sem JS: o estado final, parado ── */
.filme-sem-js {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4cqw;
  text-align: center;
}
.filme-sem-js-titulo {
  font-family: var(--font-display); font-weight: var(--peso-display);
  font-size: 7cqw; letter-spacing: -0.03em; line-height: 1;
}
.filme[data-js] .filme-sem-js { display: none; }

/* ── cenas ── */
.filme-cenas { position: absolute; inset: 0; }
.cena {
  position: absolute; inset: 0;
  background: var(--color-fundo); color: var(--color-texto);
  /* Sem borda: a composição fica inteira no palco, e o fundo da cena se
     estende até a borda da tela; quem recorta é o .filme. */
  box-shadow: 0 0 0 100vmax var(--color-fundo);
  visibility: hidden; opacity: 0;
}
.filme .ac { color: var(--color-acento); }
.filme .su { color: var(--color-texto-suave); }
.filme .disp {
  font-family: var(--font-display); font-weight: var(--peso-display);
  letter-spacing: -0.04em; line-height: 0.92;
}
.filme .rotulo {
  font-family: var(--font-utilitario); font-weight: var(--peso-mono);
  font-size: max(var(--piso), 1.15cqw); letter-spacing: 0.1em; text-transform: uppercase;
}
.filme .rotulo-forte {
  font-family: var(--font-utilitario); font-weight: var(--peso-mono-forte);
  font-size: max(var(--piso), 1.6cqw); letter-spacing: 0.08em; text-transform: uppercase;
}
.filme .centro { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.filme .balao {
  position: absolute;
  font-family: var(--font-texto); font-weight: var(--peso-normal);
  line-height: 1.3; letter-spacing: 0;
  border-radius: var(--radius-lg); padding: 1.3cqw 1.875cqw 1.09cqw;
  border: max(1px, 0.1cqw) solid var(--color-borda-controle);
  color: var(--color-texto);
}
.filme [data-modo="claro"] .balao { background: var(--color-superficie); }
.filme [data-modo="escuro"] .balao { background: var(--color-superficie-elevada); }
.filme .balao .hora {
  display: block; text-align: right; margin-top: 0.5em;
  font-family: var(--font-utilitario); font-size: max(var(--piso), 0.42em); letter-spacing: 0.08em;
  color: var(--color-texto-suave);
}
.filme .ponto { display: inline-block; flex: none; width: 0.73cqw; height: 0.73cqw; border-radius: 50%; background: currentColor; }
.filme .ponto.neutro { background: var(--color-borda-controle); }
.filme .ponto.alta { background: var(--color-alta); }

.linha-sinal { position: absolute; left: 0; width: 100%; height: auto; overflow: visible; }
.linha-sinal path { fill: none; stroke: var(--color-acento); stroke-width: 0.55; stroke-dasharray: 1; stroke-dashoffset: 1; }

/* 01 · Anúncio. */
.c01-palavra { font-size: 19cqw; }

/* 02 · Clique. — o anel abre no ponto final */
.c02-palavra { position: relative; display: inline-block; font-size: 19cqw; line-height: 1; }
.c02-anel {
  position: absolute; width: 8cqw; height: 8cqw;
  right: calc(0.1035em - 4cqw); top: calc(0.7535em - 4cqw);
  border: 0.31cqw solid var(--color-acento); border-radius: 50%;
}
.c02-anel2 { width: 14cqw; height: 14cqw; right: calc(0.1035em - 7cqw); top: calc(0.7535em - 7cqw); border-width: 0.16cqw; }

/* 03 · Mensagem. */
.c03-palavra { position: absolute; left: 5cqw; top: 6.98cqw; font-size: 15cqw; }
.c03-balao { right: 8.02cqw; bottom: 8.02cqw; font-size: 4.22cqw; }

/* 04 · Sem resposta */
.c04-mosaico {
  position: absolute; left: 3.02cqw; right: 3.02cqw; top: 3.02cqw; bottom: 11.98cqw;
  display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr);
  gap: 1.61cqw; align-items: start;
}
.c04-mosaico .balao { position: relative; font-size: max(var(--piso), 1.77cqw); padding: 0.89cqw 1.2cqw 0.68cqw; opacity: 0; }
.c04-placa-w { position: absolute; left: 0; right: 0; top: 0; bottom: 6.25cqw; display: flex; align-items: center; justify-content: center; }
.c04-placa {
  background: var(--color-superficie); border: max(1px, 0.1cqw) solid var(--color-divisoria);
  border-radius: var(--radius-md); padding: 2.4cqw 4.22cqw 1.98cqw; text-align: center;
}
.c04-relogio { position: relative; font-size: 13cqw; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.c04-ph { visibility: hidden; }
.c04-t { position: absolute; left: 0; right: 0; top: 0; text-align: center; visibility: hidden; }
.c04-sem { margin-top: 1.2cqw; font-size: max(var(--piso), 2.08cqw); color: var(--color-queda); display: flex; align-items: center; justify-content: center; gap: 0.78cqw; }
.c04-sem .ponto { background: var(--color-queda); }
.c04-linha { bottom: 3.49cqw; }
.c04-linha path { stroke: var(--color-foco); }

/* 05 · A demora levou. */
.c05-texto, .c15-texto, .c12-texto {
  position: absolute; left: 6cqw; right: 6cqw; top: 0; bottom: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.c05-l1, .c15-l1 { font-size: 6cqw; letter-spacing: -0.03em; }
.c05-l2, .c15-l2 { font-size: 11.5cqw; margin-top: 1.6cqw; }
.c05-linha { bottom: 3.49cqw; }
.c05-linha path { stroke-width: 0.4; }

/* 06 · A Glifo cuida */
.c06-l1 { position: absolute; left: 6cqw; top: 15cqw; font-size: 6.6cqw; letter-spacing: -0.03em; }
.c06-l2 { position: absolute; right: 6cqw; bottom: 13cqw; font-size: 6.6cqw; letter-spacing: -0.03em; }
.c06-linha { top: 23.75cqw; }
.c06-linha path { stroke-width: 0.6; }
.c06-linha circle { fill: var(--color-acento); transform-box: fill-box; transform-origin: center; }

/* 07 e 11 · layout editorial */
.editorial .chrome { position: absolute; left: 5cqw; right: 5cqw; top: 3.23cqw; display: flex; justify-content: space-between; align-items: center; }
.marca-mini { display: block; width: max(140px, 10cqw); color: var(--color-acento); line-height: 0; }
.marca-mini svg { display: block; width: 100%; height: auto; }
.regua { position: absolute; left: 5cqw; right: 5cqw; top: 8.39cqw; height: max(1px, 0.1cqw); background: var(--color-divisoria); transform-origin: left center; }
.regua-acento { position: absolute; inset: 0; background: var(--color-acento); }
.editorial-titulo { position: absolute; left: 5cqw; bottom: 5cqw; }
.c07-titulo { font-size: 13.5cqw; }
.c11-titulo { font-size: 11.5cqw; }
.editorial-rotulos {
  position: absolute; right: 5cqw; bottom: 6.2cqw;
  display: flex; flex-direction: column; align-items: flex-end;
  font-size: max(var(--piso), 1.51cqw); line-height: 1.9;
}
.filme .editorial-rotulos { font-size: max(var(--piso), 1.51cqw); }
.c11-numero { position: relative; display: inline-block; }
#c11-n02 { position: absolute; right: 0; top: 0; visibility: hidden; }

/* 08 · Pra quem tá perto */
.c08-texto {
  position: absolute; left: 6cqw; top: 0; bottom: 0;
  display: flex; flex-direction: column; justify-content: center;
  font-size: 6.15cqw; letter-spacing: -0.03em; line-height: 1;
}
.c08-radar { position: absolute; right: 2.08cqw; top: 5.2cqw; width: 45.8cqw; height: 45.8cqw; }
.c08-anel, .c08-onda, .c08-pinanel {
  position: absolute; left: 50%; top: 50%; border-radius: 50%;
  border: max(1px, 0.12cqw) solid var(--color-divisoria);
}
.c08-a1 { width: 28%; height: 28%; margin: -14% 0 0 -14%; }
.c08-a2 { width: 56%; height: 56%; margin: -28% 0 0 -28%; }
.c08-a3 { width: 84%; height: 84%; margin: -42% 0 0 -42%; }
.c08-onda, .c08-pinanel { width: 12%; height: 12%; margin: -6% 0 0 -6%; border-color: var(--color-acento); }
.c08-pinanel { border-width: max(1px, 0.32cqw); }
.c08-pin { position: absolute; left: 50%; top: 50%; width: 4.4%; height: 4.4%; margin: -2.2% 0 0 -2.2%; border-radius: 50%; background: var(--color-acento); }
.c08-ponto { position: absolute; width: 2.2%; height: 2.2%; margin: -1.1% 0 0 -1.1%; border-radius: 50%; background: var(--color-borda-controle); }
.c08-ponto.aceso { width: 2.8%; height: 2.8%; margin: -1.4% 0 0 -1.4%; background: var(--color-acento); }

/* 09 · Cada real, medido */
.c09-titulo { position: absolute; left: 5cqw; top: 4.58cqw; font-size: 6.6cqw; letter-spacing: -0.03em; }
.c09-abas { position: absolute; left: 5cqw; top: 17cqw; display: flex; gap: 1.2cqw; }
.c09-abas .rotulo { border: max(1px, 0.1cqw) solid var(--color-divisoria); border-radius: var(--radius-sm); padding: 0.68cqw 0.99cqw; }
.c09-grafico { position: absolute; left: 5cqw; bottom: 4.48cqw; width: 90cqw; height: 28.02cqw; overflow: visible; }
.c09-grade path { fill: none; stroke: var(--color-divisoria); stroke-width: 2; }
.c09-sinal { fill: none; stroke: var(--color-acento); stroke-width: 7; stroke-dasharray: 1; stroke-dashoffset: 1; }
.c09-cursor { fill: none; stroke: var(--color-acento); stroke-width: 3; stroke-dasharray: 13 13; }
.c09-ponto { fill: var(--color-acento); transform-box: fill-box; transform-origin: center; }

/* 10 · +R$ 200 mil */
.c10-bloco { position: absolute; left: 6cqw; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; }
.c10-numero { display: flex; align-items: flex-start; font-size: 16.5cqw; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.c10-janela { display: block; height: 1em; overflow: hidden; }
.c10-tira { display: block; }
.c10-tira span { display: block; height: 1em; text-align: center; }
.c10-rotulo { font-family: var(--font-texto); font-weight: var(--peso-normal); font-size: 3.39cqw; letter-spacing: 0; margin-top: 1.6cqw; }

/* 12 · Atende como vendedor */
.c12-l1 { font-size: 5.42cqw; letter-spacing: -0.03em; }
.c12-riscado { position: relative; display: inline-block; white-space: nowrap; }
.c12-risco { position: absolute; left: -2%; right: -2%; top: 52%; height: 0.52cqw; background: var(--color-acento); transform-origin: left center; }
.c12-l2 { font-size: 10.52cqw; margin-top: 2.19cqw; }

/* 13 · A conversa */
.c13 .balao { font-size: 3.28cqw; }
.c13-b1 { left: 5cqw; top: 4.48cqw; }
.c13-b2 { left: 5cqw; top: 12.4cqw; }
.c13-b3 { left: 5cqw; top: 20.3cqw; }
.c13-esperou { position: absolute; left: 5cqw; top: 31.5cqw; max-width: 40cqw; display: flex; align-items: center; gap: 0.78cqw; }
.filme .c13-esperou, .filme .c13-resumo { font-size: max(var(--piso), 1.82cqw); }
.c13-digitando { right: 5cqw; top: 23.02cqw; display: flex; gap: 0.73cqw; align-items: center; padding: 1.56cqw 1.875cqw; }
.c13-digitando i { display: block; width: 0.83cqw; height: 0.83cqw; border-radius: 50%; background: var(--color-texto-suave); }
.c13-resposta { right: 5cqw; top: 23.02cqw; width: 46.98cqw; font-size: 3.02cqw; border-left: 0.47cqw solid var(--color-cobalto); }
.filme .c13-resposta { font-size: 3.02cqw; }
.c13-resumo { position: absolute; right: 5cqw; bottom: 5.8cqw; color: var(--color-alta); display: flex; align-items: center; gap: 0.78cqw; }

/* 14 · Técnica de vendedor */
.c14-palco { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; perspective: 120cqw; }
.c14-cards { display: grid; grid-template-columns: repeat(3, 29cqw); gap: 1.61cqw; transform: rotateY(-11deg) rotateX(6deg); }
.c14-card {
  display: flex; align-items: center; gap: 1.2cqw;
  background: var(--color-superficie-elevada); border: max(1px, 0.1cqw) solid var(--color-divisoria);
  border-radius: var(--radius-md); padding: 2.08cqw 1.875cqw;
  font-family: var(--font-texto); font-weight: var(--peso-forte); font-size: max(var(--piso), 2.5cqw); line-height: 1.2; letter-spacing: 0;
}
#c14-k6 { grid-column: 2; }
.c14-check { position: relative; flex: none; width: 2.6cqw; height: 2.6cqw; }
.c14-check::after {
  content: ''; position: absolute; left: 34%; top: 8%; width: 30%; height: 62%;
  border: solid var(--color-acento); border-width: 0 0.3cqw 0.3cqw 0; transform: rotate(45deg);
}

/* 16 · Tudo que a Glifo faz */
.c16-pano { position: absolute; top: 0; bottom: 0; left: -30cqw; right: -30cqw; display: flex; align-items: center; }
.c16-faixas { width: 100%; display: flex; flex-direction: column; gap: 1.41cqw; transform: rotate(-9deg); }
.c16-faixa {
  white-space: nowrap; font-family: var(--font-display); font-weight: var(--peso-display);
  font-size: 5.42cqw; letter-spacing: -0.03em; line-height: 1.05;
}
.c16-faixa .apagada { color: var(--color-divisoria); }
.c16-faixa .meia { color: var(--color-borda-controle); }
.c16-faixa .acesa { color: var(--color-texto); }
.c16-faixa .sep { color: var(--color-acento); font-size: 0.55em; margin: 0 0.9em; position: relative; top: -0.18em; }
.c16-foco { padding-left: 36.5cqw; }

/* 17 · No que a gente acredita */
.c17-valor { font-size: 15cqw; text-align: center; line-height: 0.95; }
.c17-v3 { font-size: 12cqw; }

/* 18 e 19 · Assinatura */
.c18-grade {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--color-superficie) max(1px, 0.1cqw), transparent max(1px, 0.1cqw)),
    linear-gradient(90deg, var(--color-superficie) max(1px, 0.1cqw), transparent max(1px, 0.1cqw));
  background-size: 6cqw 6cqw; background-position: center center;
}
.c18-linha { position: absolute; left: -60cqw; top: 26.2cqw; width: 102.6cqw; height: 0.36cqw; background: var(--color-acento); transform-origin: left center; }
.c18-marca {
  --desloc-sim: 15.48cqw;
  position: absolute; left: 27cqw; top: 22.1cqw; width: 46cqw;
  color: var(--color-acento); line-height: 0;
  translate: calc(var(--desloc-sim) * (1 - var(--p-sim, 0))) 0;
  clip-path: inset(0% 56% 0% 0%);
}
.c18-marca svg { display: block; width: 100%; height: auto; overflow: visible; }
.c18-marca svg > g > path { mask: url(#filme-mascara); }
.c18-canto { position: absolute; width: 2.4cqw; height: 2.4cqw; border: 0 solid var(--color-acento); }
.c18-k1 { left: 40.3cqw; top: 19.91cqw; border-left-width: 0.21cqw; border-top-width: 0.21cqw; }
.c18-k2 { left: 57.31cqw; top: 19.91cqw; border-right-width: 0.21cqw; border-top-width: 0.21cqw; }
.c18-k3 { left: 40.3cqw; top: 33.94cqw; border-left-width: 0.21cqw; border-bottom-width: 0.21cqw; }
.c18-k4 { left: 57.31cqw; top: 33.94cqw; border-right-width: 0.21cqw; border-bottom-width: 0.21cqw; }
.c18-pixel { position: absolute; width: 1.3cqw; height: 1.3cqw; }
.c18-x0 { left: 20.99cqw; top: 15.99cqw; background: color-mix(in srgb, var(--color-texto) 70%, transparent); }
.c18-x1 { left: 74.01cqw; top: 11.98cqw; background: var(--color-acento); }
.c18-x2 { left: 80cqw; top: 40cqw; background: color-mix(in srgb, var(--color-texto) 50%, transparent); }
.c18-x3 { left: 15.99cqw; top: 41.98cqw; background: color-mix(in srgb, var(--color-acento) 80%, transparent); }
.c18-do, .c18-venda { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; font-size: 5cqw; letter-spacing: -0.03em; white-space: nowrap; }
.c18-do { right: 62.72cqw; }
.c18-venda { left: 62.72cqw; }
.c18-rot-e { position: absolute; left: 5cqw; bottom: 5.8cqw; }
.c18-rot-d { position: absolute; right: 5cqw; bottom: 5.8cqw; }

/* máscara que desenha o símbolo: só o alfa importa */
.filme-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.filme-mascara { mask-type: alpha; }
.filme-traco { fill: none; stroke: var(--color-texto); stroke-width: 172; stroke-dasharray: 1; stroke-dashoffset: 1; }
.filme-traco-1 { stroke-width: 150; }

/* ── final: o botão debaixo do lockup ── */
.filme-final {
  position: absolute; left: 0; right: 0; top: 38cqw; z-index: 3;
  display: flex; justify-content: center;
  visibility: hidden; opacity: 0;
}
.btn.btn-filme { font-size: 12px; padding: 15px 34px; min-height: 48px; display: inline-flex; align-items: center; }

/* ── controles ── */
.filme-controles { position: absolute; right: 12px; bottom: 12px; z-index: 6; display: flex; gap: 8px; }
.filme-controles[hidden] { display: none; }
/* Pausar e rever não aparecem para mouse e toque; quem navega por teclado os
   encontra com Tab, e aí eles surgem (WCAG 2.2.2). */
.filme-controles:not(:focus-within) { opacity: 0; pointer-events: none; }
/* Celular deitado */
@media (orientation: landscape) and (max-height: 540px) {
  /* Com o piso de 14 px, quatro fileiras de balões não cabem na altura: o
     mosaico fica com três. O relógio da placa continua contando até 07:15. */
  .c04-mosaico { grid-template-rows: repeat(3, 1fr); }
  #c04-m12, #c04-m13, #c04-m14, #c04-m15 { display: none; }
}
.filme-botao {
  width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  background: color-mix(in srgb, var(--color-fundo) 72%, transparent);
  border: var(--espessura-fina) solid var(--color-borda-controle); border-radius: var(--radius-md);
  color: var(--color-texto);
  transition: border-color var(--duracao-controle), color var(--duracao-controle);
}
.filme-botao:hover { border-color: var(--color-acento); color: var(--color-acento); }
.ico { position: relative; display: block; width: 14px; height: 14px; }
.ico-pausa::before, .ico-pausa::after { content: ''; position: absolute; top: 1px; bottom: 1px; width: 4px; background: currentColor; }
.ico-pausa::before { left: 2px; }
.ico-pausa::after { right: 2px; }
.ico-tocar { background: currentColor; clip-path: polygon(18% 4%, 96% 50%, 18% 96%); }
.ico-rever { border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; }
.ico-rever::after {
  content: ''; position: absolute; top: -3px; right: 0; width: 5px; height: 5px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(20deg);
}

.so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── em pé ── */
@container filme (orientation: portrait) {
  .filme-sem-js-titulo { font-size: 11cqw; }
  .filme .rotulo { font-size: max(var(--piso), 3.4cqw); }
  .filme .rotulo-forte { font-size: max(var(--piso), 4.2cqw); }
  .filme .ponto { width: 1.8cqw; height: 1.8cqw; }

  .c01-palavra { font-size: 17cqw; }
  .c03-palavra { left: 7cqw; top: 30cqw; font-size: 15cqw; }
  .c03-balao { right: 7cqw; bottom: 45cqw; font-size: 6.5cqw; padding: 3cqw 4.5cqw 2.5cqw; }

  .c04-mosaico { left: 5cqw; right: 5cqw; top: 5cqw; bottom: 24cqw; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(8, 1fr); gap: 2.4cqw; }
  .c04-mosaico .balao { font-size: max(var(--piso), 3.6cqw); padding: 2cqw 2.6cqw 1.6cqw; }
  .c04-placa-w { bottom: 16cqw; }
  .c04-placa { padding: 5cqw 7cqw 4cqw; }
  .c04-relogio { font-size: 22cqw; }
  .c04-sem { font-size: max(var(--piso), 3.8cqw); margin-top: 2.5cqw; gap: 1.6cqw; }
  .c04-linha, .c05-linha { bottom: 8cqw; }

  .c05-texto, .c15-texto, .c12-texto { left: 7cqw; right: 7cqw; }
  .c05-l1, .c15-l1 { font-size: 8.5cqw; }
  .c05-l2, .c15-l2 { font-size: 15cqw; margin-top: 3cqw; }

  .c06-l1 { left: 7cqw; right: 7cqw; top: 34cqw; font-size: 10cqw; }
  .c06-l2 { right: 7cqw; bottom: 40cqw; font-size: 10cqw; }
  .c06-linha { top: 83.6cqw; }

  .editorial .chrome { left: 7cqw; right: 7cqw; top: 8cqw; }
  .regua { left: 7cqw; right: 7cqw; top: 22cqw; }
  .editorial-titulo { left: 7cqw; bottom: 12cqw; }
  .c07-titulo { font-size: 21cqw; }
  .c11-titulo { font-size: 13cqw; }
  .editorial-rotulos, .filme .editorial-rotulos { right: 7cqw; top: 27cqw; bottom: auto; font-size: max(var(--piso), 3.6cqw); }

  .c08-texto { left: 7cqw; top: auto; bottom: 14cqw; font-size: 9.5cqw; justify-content: flex-end; }
  .c08-radar { right: auto; left: 7cqw; top: 10cqw; width: 86cqw; height: 86cqw; }

  .c09-titulo { left: 7cqw; right: 7cqw; top: 12cqw; font-size: 10cqw; }
  .c09-abas { left: 7cqw; right: 7cqw; top: 50cqw; display: grid; grid-template-columns: repeat(2, max-content); gap: 2.4cqw; }
  .c09-abas .rotulo { padding: 1.4cqw 2cqw; }
  .c09-grafico { left: 7cqw; width: 86cqw; height: 26.8cqw; bottom: 30cqw; }

  .c10-bloco { left: 7cqw; right: 7cqw; }
  .c10-numero { font-size: 12.5cqw; }
  .c10-rotulo { font-size: 5.6cqw; margin-top: 3cqw; }

  .c12-l1 { font-size: 7.6cqw; }
  .c12-risco { height: 1cqw; }
  .c12-l2 { font-size: 14cqw; margin-top: 4cqw; }

  .c13 .balao { font-size: 6cqw; padding: 3cqw 4cqw 2.4cqw; }
  .c13-b1 { left: 7cqw; top: 16cqw; }
  .c13-b2 { left: 7cqw; top: 31cqw; }
  .c13-b3 { left: 7cqw; top: 46cqw; }
  .c13-esperou { left: 7cqw; top: 67cqw; max-width: none; gap: 1.6cqw; }
  .filme .c13-esperou, .filme .c13-resumo { font-size: max(var(--piso), 3.6cqw); }
  .c13-digitando { right: 7cqw; top: 80cqw; gap: 1.6cqw; padding: 3.4cqw 4cqw; }
  .c13-digitando i { width: 1.8cqw; height: 1.8cqw; }
  .c13-resposta, .filme .c13-resposta { right: 7cqw; top: 80cqw; width: 80cqw; font-size: 5.6cqw; border-left-width: 1cqw; }
  .c13-resumo { right: 7cqw; bottom: 14cqw; gap: 1.6cqw; }

  .c14-cards { grid-template-columns: 82cqw; gap: 2.6cqw; transform: rotateX(8deg); }
  .c14-card { font-size: max(var(--piso), 5cqw); padding: 3.6cqw 4cqw; gap: 3cqw; }
  #c14-k6 { grid-column: auto; }
  .c14-check { width: 5cqw; height: 5cqw; }
  .c14-check::after { border-width: 0 0.7cqw 0.7cqw 0; }

  .c16-pano { left: -45cqw; right: -45cqw; }
  .c16-faixas { gap: 4cqw; }
  .c16-faixa { font-size: 10cqw; }
  .c16-foco { padding-left: 52cqw; }

  .c17-valor { font-size: 15cqw; }
  #c17-v2 { font-size: 13cqw; }
  .c17-v3 { font-size: 13cqw; }

  .c18-linha { left: -60cqw; top: 86.2cqw; width: 98.7cqw; height: 0.9cqw; }
  .c18-marca { --desloc-sim: 23.56cqw; left: 15cqw; top: 79.7cqw; width: 70cqw; }
  .c18-canto { width: 5cqw; height: 5cqw; }
  .c18-k1 { left: 33.56cqw; top: 74.7cqw; border-left-width: 0.5cqw; border-top-width: 0.5cqw; }
  .c18-k2 { left: 61.44cqw; top: 74.7cqw; border-right-width: 0.5cqw; border-top-width: 0.5cqw; }
  .c18-k3 { left: 33.56cqw; top: 98.05cqw; border-left-width: 0.5cqw; border-bottom-width: 0.5cqw; }
  .c18-k4 { left: 61.44cqw; top: 98.05cqw; border-right-width: 0.5cqw; border-bottom-width: 0.5cqw; }
  .c18-pixel { width: 3cqw; height: 3cqw; }
  .c18-x0 { left: 12cqw; top: 50cqw; }
  .c18-x1 { left: 80cqw; top: 40cqw; }
  .c18-x2 { left: 84cqw; top: 130cqw; }
  .c18-x3 { left: 10cqw; top: 140cqw; }
  .c18-do, .c18-venda { left: 0; right: 0; bottom: auto; justify-content: center; font-size: 10cqw; }
  .c18-do { top: 60cqw; }
  .c18-venda { top: 106cqw; }
  .c18-rot-e { left: 7cqw; bottom: 8cqw; }
  .c18-rot-d { right: 7cqw; bottom: 8cqw; }

  .filme-final { top: 108cqw; }
}

/* ── celular: sem cabeçalho enquanto o filme está na tela ──
   O filme ocupa a tela inteira; a barra do topo desce quando a seção
   seguinte chega ao topo. Só com JS (a classe vem do scripts/filme.js): sem
   JS a barra fica onde sempre esteve. */
@media (max-aspect-ratio: 4 / 5), (max-height: 540px) {
  .nav-recolhivel .hero-filme { --topo: 0px; }
  .nav-recolhivel .nav {
    transform: translateY(-100%); visibility: hidden;
    transition: transform 240ms ease, visibility 0s linear 240ms;
  }
  .nav-recolhivel.nav-visivel .nav {
    transform: none; visibility: visible;
    transition: transform 240ms ease, visibility 0s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav-recolhivel .nav, .nav-recolhivel.nav-visivel .nav { transition: none; }
}