/* ==========================================================================
   A Casa das Memórias (The Safekeep) — página de anúncio / imprensa
   Astral Cultural. Mobile-first.
   ========================================================================== */

:root {
  --marrom-escuro: #1c140e;
  --marrom-medio: #2c1f16;
  --marrom-claro: #4a3826;
  --preto: #120d09;
  --dourado: #c9974f;
  --dourado-claro: #e0b878;
  --dourado-rgb: 201, 151, 79;
  --azul-porcelana: #5f8aa3;
  --azul-porcelana-claro: #8fb4c8;
  --branco: #f6f0e6;
  --branco-suave: rgba(246, 240, 230, 0.78);

  --fonte-titulo: "Playfair Display", Georgia, serif;
  --fonte-corpo: "Jost", "Helvetica Neue", Arial, sans-serif;

  --largura-conteudo: 720px;
  --espaco: 1.25rem;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  color: var(--branco);
  font-family: var(--fonte-corpo);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.07) 0px, transparent 2px, transparent 4px),
    linear-gradient(180deg, var(--marrom-medio) 0%, var(--marrom-escuro) 18%, var(--preto) 50%, var(--marrom-escuro) 100%);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.pular-conteudo {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--dourado);
  color: var(--preto);
  padding: 0.75rem 1rem;
  z-index: 999;
}
.pular-conteudo:focus { left: 0; }

/* --------------------------------------------------------------------
   Aviso "gire o celular" — só mobile + retrato, controlado via JS
   (classe .visivel), some sozinho ao girar o aparelho.
   -------------------------------------------------------------------- */
.aviso-rotacionar {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(18, 13, 9, 0.97);
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.aviso-rotacionar.visivel { display: flex; }
.aviso-rotacionar__caixa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  text-align: center;
  color: var(--branco);
  max-width: 26ch;
}
.aviso-rotacionar__telefone {
  width: 60px;
  height: 60px;
  color: var(--dourado-claro);
  animation: girar-telefone 2.4s ease-in-out infinite;
}
@keyframes girar-telefone {
  0%, 18% { transform: rotate(0deg); }
  50%, 68% { transform: rotate(-90deg); }
  100% { transform: rotate(-90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .aviso-rotacionar__telefone { animation: none; }
}
.aviso-rotacionar__caixa p {
  font-family: var(--fonte-titulo);
  font-size: 1.15rem;
  line-height: 1.4;
  margin: 0;
}
.aviso-rotacionar__caixa button {
  background: none;
  border: 1px solid rgba(246, 240, 230, 0.4);
  color: var(--branco-suave);
  padding: 0.65rem 1.3rem;
  border-radius: 999px;
  font-family: var(--fonte-corpo);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.aviso-rotacionar__caixa button:hover,
.aviso-rotacionar__caixa button:focus-visible { border-color: var(--dourado); color: var(--dourado-claro); }

/* --------------------------------------------------------------------
   PALCO — hero de tela cheia: vídeo → revelação das capas
   -------------------------------------------------------------------- */
.palco-wrap {
  position: relative;
}

.palco {
  position: relative;
  height: 100dvh;
  min-height: 560px;
  width: 100%;
  overflow: hidden;
  background: var(--preto);
}

.palco__camada {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.palco__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 1;
  transition: opacity 1.4s ease;
}
.palco.revelado .palco__video { opacity: 0; pointer-events: none; }

/* Celular na vertical: o vídeo é 16:9, a tela é bem mais alta que larga —
   "cover" dá um zoom tão forte que corta o rosto e some com o espaço da
   legenda embutida. "contain" mostra o quadro inteiro (com barras pretas
   em cima/embaixo, que se camuflam no fundo escuro da página) — sem cortar
   nada. No desktop (retrato ou paisagem) e no celular já girado, cover
   continua valendo, é o melhor uso da tela nesses casos. */
/* Celular na vertical OU deitado (não tablet/laptop em paisagem — por isso
   o max-height de 500px, que é a altura típica de um celular deitado):
   o vídeo é 16:9, mas em ambas as orientações do celular a proporção da
   tela é diferente o bastante da do vídeo pra "cover" cortar demais —
   na vertical corta os lados/rosto, deitado corta o topo/base e aperta
   a legenda embutida contra a borda. "contain" sempre mostra o quadro
   inteiro (barras pretas que se camuflam no fundo escuro da página). */
@media (max-width: 860px) and (orientation: portrait),
       (max-height: 500px) and (orientation: landscape) {
  .palco__video { object-fit: contain; object-position: center 50%; background: var(--preto); }
}
@media (max-width: 860px) and (orientation: portrait) {
  /* Com "contain" o vídeo vira uma faixa centralizada bem mais baixa/curta
     que o modo "cover" — dá mais fôlego pra frase de baixo não encostar nela. */
  .palco__sub { margin-top: clamp(14rem, 40vh, 23rem); }
}
@media (max-height: 500px) and (orientation: landscape) {
  /* Deitado a tela é bem mais baixa — o bloco de título de cima e a frase
     de baixo precisam de menos espaço reservado pra não sobrar vazio. */
  .palco__texto { padding-top: clamp(3.5rem, 14vh, 5rem); }
  .palco__sub { margin-top: clamp(7rem, 30vh, 11rem); }
}

.palco__gradiente {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Escurece só o topo (legibilidade dos botões) e um pouco a base —
     leve o bastante pra não criar uma faixa escura em cima da legenda
     que já vem embutida no próprio vídeo. */
  background:
    linear-gradient(180deg, rgba(18,13,9,0.68) 0%, rgba(18,13,9,0.04) 24%, rgba(18,13,9,0.04) 60%, rgba(18,13,9,0.32) 100%);
}

/* Barra superior: selo + controles do vídeo */
.palco__topo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem var(--espaco);
}
.palco__marca {
  font-family: var(--fonte-corpo);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: var(--branco);
  text-decoration: none;
  opacity: 0.92;
}
.palco__marca strong { font-weight: 600; color: var(--dourado-claro); }

.palco__controles {
  display: flex;
  gap: 0.5rem;
}
.palco__botao-icone {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(18, 13, 9, 0.45);
  border: 1px solid rgba(246, 240, 230, 0.35);
  color: var(--branco);
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
  font-family: var(--fonte-corpo);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.palco__botao-icone:hover,
.palco__botao-icone:focus-visible { background: rgba(18, 13, 9, 0.7); border-color: var(--dourado); }
.palco__botao-icone svg { width: 15px; height: 15px; flex-shrink: 0; }
.palco.revelado .palco__botao-som,
.palco.revelado .palco__botao-pular { display: none; }
.palco__botao-replay { display: none; }
.palco.revelado .palco__botao-replay { display: flex; }

/* Conteúdo central de texto sobre o vídeo */
.palco__texto {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: clamp(4.5rem, 13vh, 6.5rem) var(--espaco) 2rem;
  pointer-events: none;
  opacity: 0;
  animation: palco-titulo-intro 6s ease forwards;
}
.palco.revelado .palco__texto,
.palco__texto--oculto { opacity: 0; animation: none; }

@keyframes palco-titulo-intro {
  0% { opacity: 0; transform: translateY(10px); }
  15% { opacity: 1; transform: translateY(0); }
  78% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .palco__texto { animation: none; opacity: 1; }
}
.palco__eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dourado-claro);
  margin: 0 0 0.9rem;
}
.palco__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: clamp(2.1rem, 8vw, 4.4rem);
  line-height: 1.05;
  margin: 0;
  text-shadow: 0 2px 18px rgba(0,0,0,0.45);
}
.palco__titulo em {
  display: block;
  font-style: italic;
  font-weight: 500;
  font-size: 0.42em;
  color: var(--branco-suave);
  margin-top: 0.6rem;
  letter-spacing: 0.02em;
}
.palco__sub {
  max-width: 32ch;
  /* Empurra a frase pra abaixo do título "VEM AÍ" embutido no vídeo —
     título/subtítulo ficam no topo, essa frase aparece só depois, na
     metade inferior do quadro. */
  margin: clamp(13rem, 36vh, 21rem) 0 0;
  font-size: 1rem;
  color: var(--branco-suave);
}

/* Camada de revelação das capas */
.palco__capas {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.7rem, 2.2vh, 1.4rem);
  padding: 4rem var(--espaco) 3rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.4s ease 0.3s;
}
.palco.revelado .palco__capas { opacity: 1; pointer-events: auto; }

/* Grid em vez de flex: com flex + flex-basis:0 o navegador encolhia a
   capa pra metade do esperado quando o filho usa aspect-ratio + width:100%
   (referência circular entre o tamanho do item flex e o do seu conteúdo).
   Grid resolve a largura da coluna ANTES de posicionar o conteúdo, então
   não tem essa ambiguidade. */
.capas-grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  align-items: start;
  gap: clamp(1rem, 4vw, 3rem);
  width: 100%;
}
.capa-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  max-width: 220px;
}
/* Caixa de tamanho fixo (proporção do trim físico do livro, 13,3 x 21cm)
   pras duas capas — mesmo as duas imagens tendo proporções de origem
   ligeiramente diferentes, elas têm que sair EXATAMENTE do mesmo tamanho,
   lado a lado. object-fit: cover preenche a caixa sem distorcer. */
.capa-card__moldura {
  position: relative;
  width: 100%;
  aspect-ratio: 0.633;
}
.capa-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
}
.capa-card__badge {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  background: rgba(18, 13, 9, 0.78);
  border: 1px solid rgba(var(--dourado-rgb), 0.55);
  color: var(--dourado-claro);
  font-size: clamp(0.5rem, 2.6vw, 0.6rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.22rem 0.4rem;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  white-space: nowrap;
}
.capa-card__legenda {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--branco-suave);
  max-width: 20ch;
}
.capa-card__legenda strong { display: block; color: var(--branco); font-family: var(--fonte-titulo); font-size: 0.95rem; font-weight: 600; margin-bottom: 0.15rem; }

.palco__capas-ponte {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: clamp(0.95rem, 2.4vw, 1.2rem);
  color: var(--branco);
  text-align: center;
  max-width: 34ch;
  margin: 0;
}

.palco__scroll-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--branco);
  text-decoration: none;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(246,240,230,0.4);
  padding-bottom: 0.2rem;
}
.palco__scroll-cta svg { width: 14px; height: 14px; animation: flutuar 1.8s ease-in-out infinite; }
@keyframes flutuar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* Rodapé — créditos do vídeo + barra de confiança.
   Fica FORA do .palco (é irmão da section, não filho): no mobile isso o
   coloca numa faixa própria logo abaixo do vídeo, nunca por cima da
   legenda embutida no próprio vídeo. No desktop vira coluna lateral
   (ver media query abaixo) — o vídeo permanece 100% da tela nos dois casos,
   só o que muda é onde os créditos/selos ficam ancorados. */
.palco__rodape {
  position: static;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.1rem var(--espaco) 1.4rem;
  background: var(--preto);
  text-align: center;
}

.palco__creditos {
  margin: 0;
  text-align: center;
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--branco-suave);
  max-width: 46ch;
  transition: opacity 0.6s ease;
}
/* .palco__rodape é irmão de .palco no DOM — usa o combinador de irmão geral
   pra esconder os créditos assim que as capas são reveladas. */
.palco.revelado ~ .palco__rodape .palco__creditos { display: none; }

/* Barra de confiança — visível nos dois estados */
.trust-bar-palco {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.6rem;
}
.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(18, 13, 9, 0.55);
  border: 1px solid rgba(var(--dourado-rgb), 0.45);
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--branco);
  white-space: nowrap;
  backdrop-filter: blur(4px);
}
.trust-chip svg { width: 12px; height: 12px; color: var(--dourado-claro); flex-shrink: 0; }
.trust-chip strong { color: var(--dourado-claro); font-weight: 500; }
.trust-chip__num { white-space: nowrap; }

/* --------------------------------------------------------------------
   Seções gerais (abaixo do palco)
   -------------------------------------------------------------------- */
.secao {
  position: relative;
  padding: 3.25rem var(--espaco);
  max-width: var(--largura-conteudo);
  margin: 0 auto;
}
.secao--larga { max-width: 980px; }
.secao--acento { background: rgba(var(--dourado-rgb), 0.05); }

.titulo-secao {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: clamp(1.5rem, 4.5vw, 2.1rem);
  text-align: center;
  margin: 0 0 0.5rem;
}
.subtitulo-secao {
  text-align: center;
  color: var(--branco-suave);
  font-size: 0.92rem;
  max-width: 46ch;
  margin: 0 auto 2.2rem;
}

.revelar { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.revelar--visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .revelar { opacity: 1; transform: none; transition: none; }
}

/* --- Conheça mais: acordeão editorial --- */
.conheca {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.conheca__item {
  border: 1px solid rgba(var(--dourado-rgb), 0.28);
  border-radius: 10px;
  padding: 0;
  background: rgba(0,0,0,0.14);
  overflow: hidden;
}
.conheca__item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.05rem 1.2rem;
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  font-family: var(--fonte-titulo);
  font-size: 1.05rem;
  font-weight: 600;
}
.conheca__item summary::-webkit-details-marker { display: none; }
.conheca__numero {
  font-family: var(--fonte-corpo);
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--dourado-claro);
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.conheca__item summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--fonte-corpo);
  font-size: 1.3rem;
  color: var(--dourado-claro);
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.conheca__item[open] summary::after { transform: rotate(45deg); }
.conheca__corpo {
  padding: 0 1.2rem 1.4rem;
  font-size: 0.92rem;
  color: var(--branco-suave);
}
.conheca__corpo p { margin: 0 0 0.85rem; }
.conheca__corpo p:last-child { margin-bottom: 0; }
.conheca__corpo strong { color: var(--branco); font-weight: 500; }

.personagens {
  display: grid;
  gap: 0.9rem;
}
.personagem { border-left: 2px solid var(--dourado); padding-left: 0.9rem; }
.personagem__nome { display: block; font-family: var(--fonte-titulo); color: var(--branco); font-size: 1rem; margin-bottom: 0.15rem; }

.pull-quotes { display: flex; flex-direction: column; gap: 1rem; }
.pull-quote { border-left: 2px solid var(--azul-porcelana); padding-left: 0.9rem; }
.pull-quote p { font-style: italic; font-family: var(--fonte-titulo); font-size: 1rem; margin: 0 0 0.3rem; }
.pull-quote cite { font-style: normal; font-size: 0.75rem; color: var(--dourado-claro); }

.comparaveis {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.comparaveis li { display: flex; gap: 0.5rem; align-items: baseline; }
.comparaveis strong { font-family: var(--fonte-titulo); color: var(--branco); font-weight: 600; }
.comparaveis span { color: var(--branco-suave); font-size: 0.85rem; }

/* --- Capas lado a lado (versão em página, seção de contexto editorial) --- */
.tradutor-nota {
  text-align: center;
  max-width: 52ch;
  margin: 0 auto 2rem;
  color: var(--branco-suave);
  font-size: 0.92rem;
}

/* --- CTA final --- */
.cta-final {
  text-align: center;
  padding: 3.5rem var(--espaco) 4rem;
}
.cta-final__grade { display: contents; }
.botao {
  display: inline-block;
  font-family: var(--fonte-corpo);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 0.9rem 1.9rem;
  border-radius: 999px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.botao--dourado {
  background: linear-gradient(180deg, var(--dourado-claro), var(--dourado));
  color: var(--preto);
  box-shadow: 0 8px 24px rgba(var(--dourado-rgb), 0.3);
}
.botao--dourado:hover, .botao--dourado:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(var(--dourado-rgb), 0.42); }
.botao--outline {
  border: 1px solid rgba(246,240,230,0.5);
  color: var(--branco);
}
.botao--outline:hover, .botao--outline:focus-visible { border-color: var(--dourado); color: var(--dourado-claro); }
.cta-final__grupo { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; margin-top: 1.4rem; }

/* --- Cortesia de imprensa --- */
.formulario-cortesia {
  max-width: 420px;
  margin: 2.2rem auto 0;
  text-align: left;
}
.formulario-cortesia__intro {
  text-align: center;
  font-size: 0.86rem;
  color: var(--branco-suave);
  margin: 0 0 1.4rem;
}
.formulario {
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(var(--dourado-rgb), 0.22);
  border-radius: 6px;
  padding: 1.5rem;
}
.formulario__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--dourado-claro);
  margin: 0 0 0.6rem;
  text-align: center;
}
.campo { margin-bottom: 1rem; }
.campo label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--branco-suave);
  margin-bottom: 0.35rem;
}
.campo input {
  width: 100%;
  padding: 0.7rem 0.75rem;
  background: rgba(246, 240, 230, 0.06);
  border: 1px solid rgba(246, 240, 230, 0.4);
  border-radius: 3px;
  color: var(--branco);
  font-family: var(--fonte-corpo);
  font-size: 0.95rem;
}
.campo input:focus {
  outline: none;
  border-color: var(--dourado);
}
/* Honeypot anti-spam — fora da tela (não display:none, pra bots simples
   que ignoram CSS ainda "acharem" o campo preenchível). */
.campo-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.formulario .botao { width: 100%; text-align: center; border: none; cursor: pointer; margin-top: 0.2rem; }
.formulario__status {
  margin: 0.9rem 0 0;
  font-size: 0.82rem;
  min-height: 1.1em;
  text-align: center;
}
.formulario__status[data-tipo="sucesso"] { color: var(--dourado-claro); }
.formulario__status[data-tipo="erro"] { color: #e08a7d; }

/* --- Rodapé --- */
.rodape {
  text-align: center;
  padding: 2.5rem var(--espaco) 3rem;
  border-top: 1px solid rgba(var(--dourado-rgb), 0.18);
}
.rodape__selo { font-family: var(--fonte-corpo); text-transform: lowercase; letter-spacing: 0.1em; font-size: 0.85rem; margin: 0 0 0.9rem; }
.rodape__selo strong { color: var(--dourado-claro); }
.rodape__redes { list-style: none; display: flex; justify-content: center; gap: 1rem; margin: 0 0 1rem; padding: 0; font-size: 0.78rem; }
.rodape__redes a { text-decoration: none; opacity: 0.8; }
.rodape__redes a:hover { opacity: 1; color: var(--dourado-claro); }
.rodape__creditos { font-size: 0.68rem; color: var(--branco-suave); max-width: 46ch; margin: 0.8rem auto 0; }

/* --------------------------------------------------------------------
   Desktop
   -------------------------------------------------------------------- */
@media (min-width: 860px) {
  .palco__topo { padding: 1.5rem 2.2rem; }
  .capas-grade { grid-template-columns: auto auto; }
  .capa-card__moldura { width: auto; height: clamp(280px, 52vh, 620px); }
  .capa-card { width: auto; max-width: 22vw; }
  .secao { padding: 5rem var(--espaco); }
  .conheca__item summary { font-size: 1.2rem; padding: 1.3rem 1.6rem; }
  .conheca__corpo { padding: 0 1.6rem 1.7rem; font-size: 0.98rem; }

  /* Créditos + selos viram uma coluna lateral sobre o vídeo — a legenda
     embutida no vídeo fica sempre desimpedida embaixo/ao centro. */
  :root { --largura-lateral: clamp(230px, 22vw, 300px); }
  .palco__rodape {
    position: absolute;
    inset: 0 0 0 auto;
    z-index: 8;
    width: var(--largura-lateral);
    justify-content: center;
    align-items: flex-start;
    gap: 1.1rem;
    padding: 2.5rem 1.75rem;
    background: linear-gradient(90deg, rgba(18,13,9,0) 0%, rgba(18,13,9,0.5) 30%, rgba(18,13,9,0.68) 100%);
    text-align: left;
  }
  .palco__creditos { text-align: left; font-size: 0.74rem; max-width: 24ch; }
  .trust-bar-palco { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 0.6rem; }
  .trust-chip { font-size: 0.75rem; padding: 0.5rem 1rem; white-space: normal; text-align: left; justify-content: flex-start; }

  /* Título e capas não passam por baixo da coluna lateral */
  .palco__texto, .palco__capas { padding-right: var(--largura-lateral); }

  /* Fechamento: informação à esquerda, formulário de cortesia à direita —
     em vez de empilhado e centralizado, ocupa a largura e fica mais baixo. */
  .cta-final { padding: 4.5rem var(--espaco) 5rem; }
  .cta-final__grade {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 3.5rem;
    align-items: center;
    max-width: 980px;
    margin: 0 auto;
  }
  .cta-final__info { text-align: left; }
  .cta-final__info .titulo-secao { text-align: left; }
  .cta-final__info .subtitulo-secao { text-align: left; margin: 0.9rem 0 0; max-width: 40ch; }
  .formulario-cortesia { margin: 0; max-width: 420px; }
}

@media (min-width: 1100px) {
  .secao--larga.conheca-wrap { max-width: 900px; }
}