/* =====================================================================
   apresentacao.css — a apresentação em tela cheia (js/apresentacao.js).
   Carregado só quando ela abre. Fundo marinho profundo; foto sangrando;
   legenda sobre o véu de legenda do site (rgba(6,26,69,.88) em degradê
   só de transparência, para a foto respirar em cima).
   ===================================================================== */
html.apres-aberta, html.apres-aberta body { overflow: hidden; }

.apres {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--marinho-profundo, #061A45);
  color: var(--branco, #fff);
  overflow: hidden;
  outline: none;
  font-family: var(--f-sans);
}
.apres:fullscreen { width: 100vw; height: 100vh; }

.apres__palco { position: absolute; inset: 0; }
.apres__camada { position: absolute; inset: -4%; opacity: 0; will-change: transform, opacity; }
.apres__foto { width: 100%; height: 100%; object-fit: cover; display: block; will-change: transform; }

/* O véu: escurece só a base e o topo, onde moram a legenda e os controles. */
.apres__veu {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(6, 26, 69, .92) 0%, rgba(6, 26, 69, .72) 24%, rgba(6, 26, 69, .3) 42%, rgba(6, 26, 69, 0) 58%),
    linear-gradient(to bottom, rgba(6, 26, 69, .55) 0%, rgba(6, 26, 69, 0) 18%);
}

.apres__legenda {
  position: absolute; left: clamp(20px, 5vw, 96px); right: clamp(20px, 5vw, 96px); bottom: clamp(36px, 7vh, 96px);
  max-width: 1100px;
  opacity: 0;
}
.apres__rotulo {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: clamp(.8125rem, .7rem + .3vw, 1rem); font-weight: 600; letter-spacing: .06em;
  color: var(--noite-2, #B9C3DA); font-variant-numeric: tabular-nums; margin: 0 0 .6em;
}
.apres__selo {
  display: inline-block; padding: .3em .7em; border-radius: var(--raio-controle, 4px);
  font-size: .8em; letter-spacing: .04em; color: #fff; background: var(--laterita, #9A4A2B);
}
.apres__selo--venda { background: rgba(255, 255, 255, .16); }
.apres__titulo {
  font-family: var(--f-serifa); font-weight: 500; letter-spacing: -0.015em; line-height: 1.04;
  font-size: clamp(1.5rem, 1rem + 1.8vw, 3rem); margin: 0; color: #fff;
  text-wrap: balance;
}
.apres__lugar { font-size: clamp(.9375rem, .8rem + .45vw, 1.25rem); color: var(--noite-2, #B9C3DA); margin: .45em 0 0; }
.apres__dados { font-size: clamp(.9375rem, .8rem + .45vw, 1.25rem); color: #fff; margin: .35em 0 0; }
.apres__preco {
  font-family: var(--f-serifa); font-weight: 500; font-variant-numeric: tabular-nums;
  font-size: clamp(1.375rem, .9rem + 1.5vw, 2.5rem); line-height: 1.1; margin: .35em 0 0; color: #fff;
}

.apres__marca {
  position: absolute; top: clamp(16px, 3vh, 36px); left: clamp(20px, 5vw, 96px);
  display: flex; align-items: center; gap: 14px;
}
.apres__marca img { width: clamp(36px, 3vw, 56px); height: auto; display: block; }
.apres__marca > span { display: flex; flex-direction: column; gap: 4px; line-height: 1.1; }
.apres__marca strong { font-family: var(--f-serifa); font-weight: 500; font-size: clamp(1.25rem, 1rem + .9vw, 2rem); }
.apres__marca > span > span { font-size: clamp(.8125rem, .7rem + .3vw, 1.0625rem); color: var(--noite-2, #B9C3DA); font-variant-numeric: tabular-nums; }

.apres__controles {
  position: absolute; top: clamp(12px, 3vh, 32px); right: clamp(12px, 3vw, 48px);
  display: flex; align-items: center; gap: 6px;
  transition: opacity 320ms var(--ease-estado, ease);
}
.apres__contador { font-size: .9375rem; color: var(--noite-2, #B9C3DA); font-variant-numeric: tabular-nums; margin-right: 8px; }
.apres__botao {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--raio-controle, 4px);
  background: rgba(6, 26, 69, .55); color: #fff; border: 1px solid rgba(255, 255, 255, .22);
  cursor: pointer; transition: background-color 150ms linear;
}
.apres__botao:hover { background: rgba(6, 26, 69, .85); }
.apres__botao:focus-visible { outline: 3px solid var(--azul-claro, #A9C1FF); outline-offset: 2px; }
.apres__botao svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.apres__botao [d^="M7 4.5"] { fill: currentColor; }

/* Mouse parado: some tudo que não é o imóvel (e o cursor). Teclado traz de volta. */
.apres--quieta { cursor: none; }
.apres--quieta .apres__controles { opacity: 0; }
.apres--quieta.apres--pausada .apres__controles { opacity: 1; }

.apres__progresso { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .12); }
.apres__progresso span { display: block; height: 100%; background: var(--azul-claro, #A9C1FF); transform: scaleX(0); transform-origin: left; }

.apres__aviso {
  position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px;
  font-size: 1.25rem; color: var(--noite-2, #B9C3DA); text-align: center;
}
.apres__aviso[hidden] { display: none; }

@media (max-width: 640px) {
  .apres__marca > span > span, .apres__contador { display: none; }
  .apres__botao { width: 44px; height: 44px; }
  .apres__controles [data-acao="anterior"], .apres__controles [data-acao="proximo"] { display: none; }
}