/* TELA — revelações cinematográficas */

/* ============================================================================
   SCREEN · CINEMA  (id: cinema) - As "Revelações Cinematográficas"
   Tela parcial + 4 telas finais de resultado + consolidada.
   Número Heavy 900 branco sólido, unidade/acento
   na cor da etapa (Mel/Céu/Menta), fundo --gradient-ink + favo watermark sutil,
   entrada por fade/translate curtos e calmos.

   Sistema de acento (injetado inline via --cinema-accent por _cinemaShell):
     yellow → Mel  var(--favo-yellow-400)
     blue   → Céu  var(--favo-sky-300)
     teal   → Menta var(--favo-mint-400)
   Só estiliza classes desta tela; tokens/primitivas vêm do kernel.
   ========================================================================== */

/* ===== STAGE (fixed cover) ========================================= */
/* position:fixed cobre toda a viewport, então recria o fundo --gradient-ink
   próprio (o body fica atrás) + watermark via ::before. Sem glow/pulse. */
.partial-cinema {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: var(--space-6) var(--space-5);
  overflow-y: auto;
  overflow-x: hidden; /* impede scroll horizontal causado pelo watermark ::before (right negativo) */
  background:
    linear-gradient(160deg, var(--favo-ink-800) 0%, var(--favo-ink-950) 60%, var(--favo-black) 100%);
  /* fallback: mesmo default de opts.accent em cinema-shell.js */
  --cinema-accent: var(--favo-yellow-400);
  animation: cinemaFade var(--dur-slow) var(--ease-standard);
}
/* Acento por atributo (Task 16): antes vinha inline via style="--cinema-accent:...",
   que a CSP em <meta> (style-src sem 'unsafe-inline') bloqueia. */
.partial-cinema[data-accent="yellow"] { --cinema-accent: var(--favo-yellow-400); }
.partial-cinema[data-accent="blue"]   { --cinema-accent: var(--favo-sky-300); }
.partial-cinema[data-accent="teal"]   { --cinema-accent: var(--favo-mint-400); }

/* favo watermark - estático, sutil (~6%), sem animação */
.partial-cinema::before {
  content: "";
  position: absolute;
  right: -120px;
  top: 50%;
  width: 460px;
  height: 460px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201080%201080%22%3E%3Cpath%20fill%3D%22%23f3df47%22%20d%3D%22M467.78%2C74.41l180.64%2C447.52c7.14%2C17.67%2C7.14%2C37.44%2C0%2C55.11l-180.64%2C447.52c-7.5%2C18.56-25.5%2C30.72-45.52%2C30.72h-145.72c-20.01%2C0-38.02-12.16-45.52-30.72L50.38%2C577.04c-7.14-17.67-7.14-37.44%2C0-55.11L231.02%2C74.41c7.47-18.56%2C25.5-30.72%2C45.52-30.72h145.72c20.01%2C0%2C38.02%2C12.16%2C45.52%2C30.72Z%22/%3E%3Cpath%20fill%3D%22%23ebae34%22%20d%3D%22M775.27%2C43.68h-187.78l197.04%2C477.71c7.41%2C17.98%2C7.41%2C38.18%2C0%2C56.16l-197.04%2C477.71h187.78c20.01%2C0%2C38.02-12.16%2C45.52-30.72l184.35-456.72c4.75-11.78%2C4.75-24.97%2C0-36.75l-184.35-456.67c-7.5-18.56-25.5-30.72-45.52-30.72Z%22/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

@keyframes cinemaFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ===== INNER COLUMN =============================================== */
.cinema-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  margin: auto 0;
  text-align: center;
  animation: cinemaRise var(--dur-slow) var(--ease-out);
}

/* entrada calma: fade + translate curto (sem bounce). `visibility` viaja
   junto de `opacity` para que `opacity:0` nunca deixe um elemento (em
   especial um botão, ver .cinema-actions) clicável antes de aparecer. */
@keyframes cinemaRise {
  from { opacity: 0; visibility: hidden; transform: translateY(var(--shift-md, 10px)); }
  to   { opacity: 1; visibility: visible; transform: translateY(0); }
}

/* helper de entrada escalonada - fade + sobe levemente, calmo */
@keyframes cinemaUp {
  from { opacity: 0; visibility: hidden; transform: translateY(var(--shift-sm, 4px)); }
  to   { opacity: 1; visibility: visible; transform: translateY(0); }
}

/* ===== EYEBROW ===================================================== */
.cinema-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--cinema-accent);
  margin-bottom: var(--space-3);
  opacity: 0;
  visibility: hidden;
  animation: cinemaUp var(--dur-normal) var(--ease-enter) calc(var(--stagger) * 1) forwards;
}

/* ===== PRELABEL =================================================== */
.cinema-prelabel {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-5);
  opacity: 0;
  visibility: hidden;
  animation: cinemaUp var(--dur-normal) var(--ease-enter) calc(var(--stagger) * 2) forwards;
}
.cinema-prelabel strong {
  color: var(--text-strong);
  font-weight: var(--weight-bold);
}

/* ===== VALUE (o número - Heavy 900 branco sólido) ================= */
/* Sem gradiente em texto, sem text-shadow, sem blur. O acento vive na
   unidade (.cinema-unit) na cor da etapa. JS preserva id/data-accent.
   tabular-nums + altura reservada: o count-up reescreve o texto ~60×/s em
   Roboto 900 proporcional, e sem isso o número treme de largura — "R$ 0" ->
   "R$ 12,34 MI" chega a mudar de número de linhas no meio da contagem. */
.cinema-value {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 13vw, 4rem);
  max-width: 100%;
  overflow-wrap: break-word;
  font-weight: var(--weight-heavy);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--text-strong);
  margin: var(--space-2) 0 var(--space-3);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  min-height: 2.1em;              /* duas linhas reservadas: o count-up não muda o layout */
  /* ...mas duas linhas só são necessárias onde a coluna é estreita. No
     desktop (md+, ver abaixo) "R$ 12,30 MI" cabe numa linha em qualquer
     ponto da contagem, e a segunda linha reservada era ~65px de vazio no
     meio da tela — em 5 telas. */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  animation: cinemaUp var(--dur-enter) var(--ease-enter) calc(var(--stagger) * 3) forwards;
}
/* a unidade/acento (ex.: "MI", "R$") na cor da etapa - cor sólida, sem glow */
.cinema-value .cinema-unit,
.cinema-value-alt .cinema-unit {
  color: var(--cinema-accent);
  font-weight: var(--weight-heavy);
}
/* .cinema-value-alt é adicionada quando accent≠yellow - sem gradiente/glow,
   permanece branco sólido; só a unidade muda de cor (regra acima). */
.cinema-value-alt {
  color: var(--text-strong);
}

/* ===== SUBLABEL =================================================== */
.cinema-sublabel {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--text-subtle);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-6);
  opacity: 0;
  visibility: hidden;
  animation: cinemaUp var(--dur-normal) var(--ease-enter) calc(var(--stagger) * 4) forwards;
}

/* ===== EXPLAIN (cálculo em uma frase) ============================= */
/* (2026-07-20) Era uma CAIXA: fundo, borda, raio e uma barra de 3px na
   cor da etapa à esquerda. É o mesmo cartão que saiu da home por parecer
   template — e aqui ainda custava ~32px de padding vertical em cada uma
   das 5 telas. Virou texto sob um fio, que é o vocabulário do funil. */
.cinema-explain {
  text-align: left;
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-3);
  margin: 0 0 var(--space-4);
  opacity: 0;
  visibility: hidden;
  animation: cinemaUp var(--dur-normal) var(--ease-enter) calc(var(--stagger) * 5) forwards;
}
.cinema-explain .ex-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--cinema-accent);
  margin-bottom: var(--space-1);
}
.cinema-explain .ex-text {
  font-size: var(--text-sm);
  color: var(--text-body);
  line-height: var(--leading-normal);
}
.cinema-explain .ex-text strong {
  color: var(--text-strong);
  font-weight: var(--weight-bold);
}

/* ===== PREMISES (premissas usadas) =============================== */
/* (2026-07-20) Eram 4 linhas numa caixa, cada uma com um TIQUE desenhado
   em CSS (dois cantos de borda girados 45°). Ícone decorativo — fora do
   vocabulário do funil — e ~120px de altura para dizer o que cabe em uma
   linha. Virou uma linha de dado em mono, separada por pontos médios:
   premissa é nota de rodapé do número, não checklist de features. */
.cinema-premises {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  line-height: 1.6;
  color: var(--text-faint);
  margin: 0 0 var(--space-4);
  opacity: 0;
  visibility: hidden;
  animation: cinemaUp var(--dur-normal) var(--ease-enter) calc(var(--stagger) * 6) forwards;
}
.cinema-premises .pr-label {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-subtle);
}
.cinema-premises .pr-label::after { content: ":"; }
/* o separador é do item, não um elemento: nada de <span> vazio no meio */
.cinema-premises .pr-item:not(:last-child)::after {
  content: " ·";
  color: var(--text-faint);
}
.cinema-premises strong {
  color: var(--text-muted);
  font-weight: var(--weight-bold);
}

/* ===== DESVIO (o diagrama da capa, com os números da pessoa) ====== */
/* Mesmo slot do breakdown na coreografia (stagger 7). O traçado vem de
   css/components/desvio.css; aqui só layout e o tom dos valores. */
.cinema-desvio {
  margin-bottom: var(--space-5);
  opacity: 0;
  visibility: hidden;
  animation: cinemaUp var(--dur-normal) var(--ease-enter) calc(var(--stagger) * 7) forwards;
}
.cinema-desvio .desvio-svg {
  max-width: 400px;
  margin-inline: auto;   /* a coluna do cinema é centrada; o desvio acompanha */
}
/* rótulos um ponto menores que na home: aqui dividem a cena com o número
   herói, não podem competir */
.cinema-desvio .lbl { font-size: 10.5px; }
/* responsivo local (o resto da folha organiza por breakpoint; o desvio é
   autocontido): cresce um degrau, e o font interno cai para o rótulo
   renderizado seguir ~12px */
@media (min-width: 900px) {
  .cinema-desvio .desvio-svg { max-width: 440px; }
  .cinema-desvio .lbl { font-size: 10px; }
}
@media (min-width: 1280px) {
  .cinema-desvio .desvio-svg { max-width: 480px; }
  .cinema-desvio .lbl { font-size: 9.5px; }
}

/* ===== BREAKDOWN (composição do número) ========================== */
.cinema-breakdown {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border-subtle);   /* hairline entre linhas */
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
  overflow: hidden;
  margin-bottom: var(--space-5);
  opacity: 0;
  visibility: hidden;
  animation: cinemaUp var(--dur-normal) var(--ease-enter) calc(var(--stagger) * 7) forwards;
}
.cinema-breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-1);   /* tingido de navy — antes preto puro sobre navy virava halo sujo */
  font-size: var(--text-sm);
}
.cinema-breakdown-row .lbl {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text-muted);
  text-align: left;
}
/* dot na cor da etapa - cor sólida, SEM box-shadow/glow */
.cinema-breakdown-row .lbl .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cinema-accent);
  flex: 0 0 auto;
}
.cinema-breakdown-row .val {
  font-family: var(--font-mono);            /* número em linha é dado: mono tabular */
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  white-space: nowrap;
}

/* ===== QUOTE (frase de fechamento) =============================== */
.cinema-quote {
  font-size: var(--text-sm);
  color: var(--text-body);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
  opacity: 0;
  visibility: hidden;
  animation: cinemaUp var(--dur-normal) var(--ease-enter) calc(var(--stagger) * 8) forwards;
}
.cinema-quote strong {
  color: var(--cinema-accent);
  font-weight: var(--weight-bold);
}

/* ===== ACTIONS (nav) ============================================= */
.cinema-actions {
  display: flex;
  gap: var(--space-3);
  width: 100%;
  opacity: 0;
  visibility: hidden;   /* opacity:0 sozinho não tira o botão da hit-area: ele ficava clicável antes de aparecer */
  animation: cinemaUp var(--dur-normal) var(--ease-enter) calc(var(--stagger) * 9) forwards;
}
/* Tela terminal: só o "Voltar" -> ocupa a largura toda, como CTA único. */
.cinema-actions-single .cinema-back { flex: 1; }

/* secundário: voltar/início/painel - sóbrio sobre escuro */
.cinema-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--surface-sunken);
  border: 1.5px solid var(--border-default);
  color: var(--text-strong);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  min-height: var(--tap);
  padding: 0 18px;
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
@media (hover: hover) and (pointer: fine) {
  .cinema-back:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--border-strong);
    transform: translateY(-1px);
  }
}
.cinema-back:active { transform: scale(0.98); }

/* primário: continuar/concluir/encerrar - Mel sólido, texto navy */
.cinema-continue {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--accent);
  color: var(--text-on-accent);
  border: 1.5px solid transparent;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  min-height: var(--tap);
  padding: 0 18px;
  border-radius: var(--radius-control);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
@media (hover: hover) and (pointer: fine) {
  .cinema-continue:hover {
    background: var(--accent-hover);
    box-shadow: var(--shadow-accent);
    transform: translateY(-1px);
  }
}
.cinema-continue:active { transform: scale(0.98); }

/* ===== PROGRESS (pontos das revelações) ========================== */
.cinema-progress {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: var(--space-4);
  opacity: 0;
  visibility: hidden;
  animation: cinemaUp var(--dur-normal) var(--ease-enter) calc(var(--stagger) * 0) forwards;
}
/* Pílula por `width`, não por `scale`: escalar um círculo de 6px serrilha a
   borda (pixels não-inteiros em cada frame do easing). */
.cinema-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--border-default);
  transition: background var(--dur-normal) var(--ease-standard),
              width var(--dur-normal) var(--ease-enter);
}
.cinema-dot.done { background: rgba(255, 255, 255, 0.4); }
/* ativo na cor da etapa - vira pílula, SEM glow/box-shadow */
.cinema-dot.active {
  background: var(--cinema-accent);
  width: 18px;
}

/* ===== RESPONSIVO: 30-cinema ===== */
/*
 * 30-cinema.css — Responsividade das telas CINEMA / RESULTADO / CONSOLIDADO
 *
 * SELETORES TOCADOS (todos escopados sob .partial-cinema quando necessário):
 *   .partial-cinema, .cinema-inner, .cinema-eyebrow, .cinema-prelabel,
 *   .cinema-value, .cinema-value-alt, .cinema-sublabel,
 *   .cinema-explain, .cinema-explain .ex-label, .cinema-explain .ex-text,
 *   .cinema-premises, .cinema-premises .pr-label, .cinema-premises .pr-item,
 *   .cinema-breakdown, .cinema-breakdown-row,
 *   .cinema-breakdown-row .lbl, .cinema-breakdown-row .val,
 *   .cinema-quote, .cinema-actions, .cinema-back, .cinema-continue,
 *   .cinema-progress, .cinema-dot, .cinema-dot.active, .cinema-dot.done
 *
 * BREAKPOINTS COBERTOS: sm (600) · md (900) · lg (1280) · xl (1680) · xxl (2560)
 *
 * DECISÕES DE TELÃO (xl/xxl):
 *   - .cinema-value usa clamp() agressivo chegando a ~9rem em xxl para dominar
 *     a tela visível do fundo de uma sala.
 *   - .partial-cinema troca justify-content para center em lg+ para centralização
 *     vertical total (tela fixa, conteúdo não overflow na maioria dos casos).
 *   - .cinema-inner recebe max-width:var(--maxw-cinema) e margin-inline:auto
 *     em todos os breakpoints para centralização horizontal.
 *   - Watermark (::before) cresce proporcionalmente em xl/xxl.
 *   - .cinema-breakdown vai para 2 colunas em md+ quando há espaço.
 *   - Dots de progresso e botões de ação ganham escala em xl/xxl.
 *   - Todos os font-sizes de suporte (eyebrow, prelabel, sublabel, quote, etc.)
 *     crescem de forma escalonada para leitura de longe.
 */

/* ==========================================================================
   sm — 600px: celular grande / tablet pequeno em pé
   ========================================================================== */
@media (min-width: 600px) {
  .partial-cinema {
    padding: var(--space-7) var(--space-6);
    justify-content: center;
  }

  .cinema-inner {
    max-width: var(--maxw-cinema, 540px);
    margin-inline: auto;
    margin-block: 0;
  }

  .cinema-value {
    min-height: 1.15em;
    font-size: clamp(3rem, 14vw, 4.5rem);
    margin: var(--space-3) 0 var(--space-4);
  }

  .cinema-prelabel {
    font-size: var(--text-base);
  }

  .cinema-sublabel,
  .cinema-quote,
  .cinema-explain .ex-text,
}

/* ==========================================================================
   md — 900px: tablet / notebook pequeno
   ========================================================================== */
@media (min-width: 900px) {
  .partial-cinema {
    padding: var(--space-8) var(--space-7);
    justify-content: center;
  }

  .cinema-inner {
    max-width: var(--maxw-cinema, 700px);
    margin-inline: auto;
    margin-block: 0;
  }

  .cinema-value {
    /* 5,5rem era escala de outdoor; o número já domina a tela a 4rem e a
       diferença é altura pura. Uma linha só (ver comentário na base). */
    font-size: clamp(3rem, 7vw, 4rem);
    min-height: 1.15em;
    margin: var(--space-2) 0 var(--space-3);
  }

  .cinema-prelabel {
    font-size: var(--text-md);
    margin-bottom: var(--space-4);
  }

  .cinema-sublabel {
    font-size: var(--text-sm);
    margin-bottom: var(--space-5);
  }

  .cinema-eyebrow {
    font-size: var(--text-xs);
    margin-bottom: var(--space-3);
  }

  /* Breakdown em 2 colunas quando há mais de 2 linhas */
  .cinema-breakdown {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    margin-bottom: var(--space-4);
  }

  .cinema-breakdown-row {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
  }

  /* explain e premises não são mais caixas: sem padding lateral, o fio
     de cima é que separa (ver base) */
  .cinema-explain {
    padding-top: var(--space-3);
    margin-bottom: var(--space-4);
  }

  .cinema-premises {
    margin-bottom: var(--space-4);
  }

  .cinema-explain .ex-label {
    font-size: var(--text-2xs);
    margin-bottom: var(--space-1);
  }

  .cinema-explain .ex-text {
    font-size: var(--text-sm);
  }

  .cinema-quote {
    font-size: var(--text-base);
    margin-bottom: var(--space-5);
  }

  .cinema-actions {
    gap: var(--space-4);
  }

  .cinema-back,
  .cinema-continue {
    font-size: var(--text-base);
    min-height: 48px;
    padding: 0 24px;
  }

  .cinema-progress {
    gap: 8px;
    margin-bottom: var(--space-5);
  }

  .cinema-dot {
    width: 8px;
    height: 8px;
  }
}

/* ==========================================================================
   lg — 1280px: desktop (alvo principal)
   ========================================================================== */
@media (min-width: 1280px) {
  /* Compacto por padrão: a tela de resultado é fixa (overflow próprio).
     Mantém impacto do número, mas cabe inteira em 1080p e em laptops
     (1470×956, 1440×900) sem scroll interno. */
  .partial-cinema {
    padding: var(--space-4) var(--pad-inline, 40px);
    justify-content: center;
  }

  .partial-cinema::before {
    width: 460px;
    height: 460px;
    right: -90px;
    opacity: 0.06;
  }

  .cinema-inner {
    max-width: var(--maxw-cinema, 860px);
    margin-inline: auto;
    margin-block: 0;
  }

  .cinema-value {
    min-height: 1.15em;
    font-size: clamp(2.75rem, 4.6vw, 4.25rem);
    letter-spacing: var(--tracking-tighter);
    margin: 0.5rem 0 0.75rem;
  }

  .cinema-eyebrow {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-overline);
    margin-bottom: 0.625rem;
  }

  .cinema-prelabel {
    font-size: var(--text-md);
    margin-bottom: 0.75rem;
  }

  .cinema-sublabel {
    font-size: var(--text-xs);
    margin-bottom: 0.75rem;
  }

  .cinema-explain {
    padding-top: 0.75rem;
    margin-bottom: 0.875rem;
  }

  .cinema-explain .ex-label {
    font-size: var(--text-xs);
    margin-bottom: 0.25rem;
  }

  .cinema-explain .ex-text {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .cinema-premises {
    margin-bottom: 0.875rem;
  }

  .cinema-premises .pr-label {
    font-size: var(--text-xs);
    margin-bottom: 0.25rem;
  }



  .cinema-breakdown {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 0.875rem;
  }

  .cinema-breakdown-row {
    padding: 0.625rem 1.25rem;
    font-size: 0.95rem;
  }

  .cinema-breakdown-row .val {
    font-size: 0.95rem;
  }

  .cinema-quote {
    font-size: var(--text-base);
    line-height: 1.5;
    margin-bottom: 1rem;
  }

  .cinema-actions {
    gap: var(--space-3);
  }

  .cinema-back,
  .cinema-continue {
    font-size: var(--text-base);
    min-height: 48px;
    padding: 0 24px;
  }

  .cinema-progress {
    gap: 10px;
    margin-bottom: 0.875rem;
  }

  .cinema-dot {
    width: 9px;
    height: 9px;
  }
}

/* ==========================================================================
   xl — 1680px: TELÃO (1080p fullscreen)
   ========================================================================== */

/* ==========================================================================
   xxl — 2560px: telão 4K — escala adicional
   ========================================================================== */

/* Recuperado de _responsive/30-cinema.css — cinema (xl/xxl) */
@media (min-width: 1680px) {
  .partial-cinema {
    padding: 0 var(--pad-inline, 56px);
    justify-content: center;
    align-items: center;
  }

  /* Watermark ampliado para telão */
  .partial-cinema::before {
    width: 720px;
    height: 720px;
    right: -60px;
    opacity: 0.07;
  }

  .cinema-inner {
    max-width: var(--maxw-cinema, 1200px);
    margin-inline: auto;
    margin-block: 0;
    text-align: center;
  }

  /* NÚMERO HERÓI — domina a sala */
  .cinema-value {
    min-height: 1.15em;
    font-size: clamp(5rem, 8.5vw, 9rem);
    letter-spacing: -0.03em;
    line-height: 1;
    margin: var(--space-5) 0 var(--space-6);
  }

  .cinema-eyebrow {
    font-size: var(--text-sm);
    letter-spacing: 0.22em;
    margin-bottom: var(--space-5);
  }

  .cinema-prelabel {
    font-size: var(--text-xl);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-7);
  }

  .cinema-sublabel {
    font-size: var(--text-sm);
    margin-bottom: var(--space-8);
  }

  .cinema-explain {
    padding-top: var(--space-3);
    border-left-width: 4px;
    margin-bottom: var(--space-7);
  }

  .cinema-explain .ex-label {
    font-size: var(--text-sm);
    margin-bottom: var(--space-3);
  }

  .cinema-explain .ex-text {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
  }

  .cinema-premises {
        margin-bottom: var(--space-7);
  }

  .cinema-premises .pr-label {
    font-size: var(--text-sm);
    margin-bottom: var(--space-3);
  }



  .cinema-breakdown {
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: var(--border-subtle);
    margin-bottom: var(--space-7);
  }

  .cinema-breakdown-row {
    padding: var(--space-5) var(--space-7);
    font-size: var(--text-lg);
  }

  .cinema-breakdown-row .lbl {
    gap: 12px;
  }

  .cinema-breakdown-row .lbl .dot {
    width: 9px;
    height: 9px;
  }

  .cinema-breakdown-row .val {
    font-size: var(--text-xl);
  }

  .cinema-quote {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-9);
  }

  .cinema-actions {
    gap: var(--space-5);
  }

  .cinema-back,
  .cinema-continue {
    font-size: var(--text-lg);
    min-height: 60px;
    padding: 0 36px;
    border-radius: var(--radius-lg);
  }

  .cinema-progress {
    gap: 12px;
    margin-bottom: var(--space-7);
  }

  .cinema-dot {
    width: 11px;
    height: 11px;
  }

  .cinema-dot.active {
    width: 32px;
  }
}
@media (min-width: 2560px) {
  .partial-cinema {
    padding: 0 var(--pad-inline, 72px);
  }

  .partial-cinema::before {
    width: 960px;
    height: 960px;
    right: -40px;
    opacity: 0.065;
  }

  .cinema-inner {
    max-width: var(--maxw-cinema, 1440px);
  }

  /* Número herói em 4K — ainda maior */
  .cinema-value {
    min-height: 1.15em;
    font-size: clamp(7rem, 9vw, 12rem);
    margin: var(--space-6) 0 var(--space-7);
  }

  .cinema-eyebrow {
    font-size: var(--text-base);
    letter-spacing: 0.24em;
    margin-bottom: var(--space-6);
  }

  .cinema-prelabel {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-8);
  }

  .cinema-sublabel {
    font-size: var(--text-base);
    margin-bottom: var(--space-9);
  }

  .cinema-explain {
    padding-top: var(--space-3);
    border-left-width: 5px;
    margin-bottom: var(--space-8);
  }

  .cinema-explain .ex-label {
    font-size: var(--text-base);
    margin-bottom: var(--space-4);
  }

  .cinema-explain .ex-text {
    font-size: var(--text-xl);
  }

  .cinema-premises {
        margin-bottom: var(--space-8);
  }

  .cinema-premises .pr-label {
    font-size: var(--text-base);
    margin-bottom: var(--space-4);
  }



  .cinema-breakdown {
    gap: 3px;
    margin-bottom: var(--space-8);
  }

  .cinema-breakdown-row {
    padding: var(--space-6) var(--space-8);
    font-size: var(--text-xl);
  }

  .cinema-breakdown-row .lbl {
    gap: 16px;
  }

  .cinema-breakdown-row .lbl .dot {
    width: 11px;
    height: 11px;
  }

  .cinema-breakdown-row .val {
    font-size: var(--text-2xl);
  }

  .cinema-quote {
    font-size: var(--text-xl);
    margin-bottom: 5rem;
  }

  .cinema-actions {
    gap: var(--space-6);
  }

  .cinema-back,
  .cinema-continue {
    font-size: var(--text-xl);
    min-height: 72px;
    padding: 0 48px;
    border-radius: var(--radius-xl);
  }

  .cinema-progress {
    gap: 16px;
    margin-bottom: var(--space-8);
  }

  .cinema-dot {
    width: 14px;
    height: 14px;
  }

  .cinema-dot.active {
    width: 40px;
  }
}

/* ===== CTA DE FECHAMENTO (tela 5 do resultado e "já preenchido") ==
   Reusa o palco do cinema (.partial-cinema/.cinema-inner) porque é a mesma
   jornada — mas sem o número gigante: aqui a manchete é a PERGUNTA, não um
   valor. Por isso o título assume o peso tipográfico que o .cinema-value
   tem nas outras telas, um degrau abaixo. */
.cinema-cta-title {
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  color: var(--text-strong);
  margin-bottom: var(--space-4);
  opacity: 0;
  visibility: hidden;
  animation: cinemaUp var(--dur-normal) var(--ease-enter) calc(var(--stagger) * 3) forwards;
}
/* O título recebe foco na troca de tela (focarTitulo); sem isto o browser
   desenha o anel de foco em volta de um bloco de 3 linhas. */
.cinema-cta-title:focus { outline: none; }

.cinema-cta-text {
  font-size: var(--text-sm);
  color: var(--text-body);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
  opacity: 0;
  visibility: hidden;
  animation: cinemaUp var(--dur-normal) var(--ease-enter) calc(var(--stagger) * 5) forwards;
}
.cinema-cta-text strong {
  color: var(--cinema-accent);
  font-weight: var(--weight-bold);
}

/* O CTA é um <a> (navegação para fora do app), então precisa das regras que
   .cinema-continue não herda por ser <button>: sem sublinhado e alinhado. */
.cta-whatsapp {
  text-decoration: none;
  flex: 1;
}