/* ==========================================================
   ABERTURA (#inicio)
   Versão 2: o vídeo inteiro, de borda a borda, sem cartão nem película, como nas referências do sócio
   (Parque Una, Hurbana, All Resort, Cidade das Águas). Por cima, só o rótulo, a frase e o botão,
   centralizados e em letra leve, com uma sombra suave só atrás deles. A assinatura fica no cabeçalho.
   No celular, o vídeo em cima e o texto embaixo, no fundo claro.
   ========================================================== */
.abertura { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--fundo); color: var(--branco); }
.abertura-visual { position: absolute; inset: 0; }
.abertura-midia { position: absolute; inset: 0; background: var(--fundo-foto); }
.abertura-midia picture, .abertura-cartaz, .abertura-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.abertura-cartaz { animation: aproximar 2.6s cubic-bezier(.2, .7, .2, 1) both; }
/* A imagem da abertura com movimento lento (item 1): aproximação e deslocamento suaves, em laço de ida e volta.
   O botão de pausa para o movimento (classe pausada); com menos movimento, ela fica parada (base.css). */
.abertura-midia picture, .abertura-imagem { position: absolute; inset: 0; width: 100%; height: 100%; }
.abertura-imagem { object-fit: cover; object-position: 50% 58%; transform-origin: 62% 55%; animation: movimento-lento 28s ease-in-out infinite alternate; will-change: transform; }
.abertura.pausada .abertura-imagem { animation-play-state: paused; }
/* ?abertura=video: o vídeo de antes no lugar da imagem (o head do index.html põe data-abertura="video") */
.abertura-com-video { display: none; }
:root[data-abertura="video"] .abertura-com-video { display: block; }
:root[data-abertura="video"] .abertura-midia picture:first-child { display: none; }
@keyframes movimento-lento { from { transform: scale(1.03); } to { transform: scale(1.14) translate3d(-2.5%, -1.5%, 0); } }
/* O vídeo entra por cima do cartaz quando começa a tocar (classe tocando, js/secoes/inicio.js). */
.abertura-video { opacity: 0; transition: opacity .8s ease; }
.abertura-video.tocando { opacity: 1; }

.abertura-conteudo { position: relative; z-index: 1; display: flex; justify-content: center; padding-top: calc(var(--altura-cabecalho) + 24px); padding-bottom: 40px; }
.abertura-texto { position: relative; max-width: 760px; display: flex; flex-direction: column; align-items: center; text-align: center; }
/* A sombra suave só atrás do texto (não é película: o resto do vídeo fica como é) */
.abertura-texto::before { content: ""; position: absolute; z-index: -1; inset: -110px -190px; border-radius: 50%; background: radial-gradient(closest-side, rgba(20, 18, 15, .66), rgba(20, 18, 15, .6) 45%, rgba(20, 18, 15, .34) 75%, rgba(20, 18, 15, 0)); pointer-events: none; }
.abertura-texto > * { animation: entrar 1s cubic-bezier(.2, .7, .2, 1) both; }
.abertura-texto > :nth-child(2) { animation-delay: .15s; } .abertura-texto > :nth-child(3) { animation-delay: .3s; }
.abertura-rotulo { padding: 7px 16px; border-radius: var(--raio-botao); background: rgba(20, 18, 15, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 13px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }
/* A largura dos títulos em em, e não em ch: o ch vem da largura do "0" da fonte, e às vezes o navegador o calculava com a
   fonte de reserva, antes de a Notch chegar (o título quebrava em três linhas). 11,8em = os 18ch da Notch. */
.abertura h1 { max-width: 11.8em; margin-top: var(--espaco-3); font-size: clamp(34px, 3.8vw, 52px); font-weight: 400; line-height: 1.12; text-shadow: 0 2px 28px rgba(0, 0, 0, .4); }
.abertura-frase { max-width: 40ch; margin-top: var(--espaco-3); font-size: 19px; line-height: 1.5; text-shadow: 0 1px 14px rgba(0, 0, 0, .5); }
.abertura .botao { margin-top: var(--espaco-5); color: var(--texto); border-color: var(--branco); background: var(--branco); }
.abertura .botao:hover { background: transparent; color: var(--branco); border-color: var(--branco); }
/* PROVISÓRIO (COMPLAN 2026): os dois botões lado a lado; o de baixar a apresentação, cheio, vem primeiro, e o de
   conversar fica de contorno enquanto ele estiver aqui. No celular, um embaixo do outro. */
.abertura-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--espaco-3); margin-top: var(--espaco-5); }
.abertura-acoes .botao { margin-top: 0; }
.abertura .abertura-acoes .botao-contorno { background: transparent; color: var(--branco); }
.abertura .abertura-acoes .botao-contorno:hover { background: var(--branco); color: var(--texto); }

/* Pausar e tocar o vídeo: um botão redondo e discreto no canto inferior esquerdo (no direito, flutua o WhatsApp) */
.abertura-pausa { position: absolute; z-index: 2; left: var(--margem); bottom: clamp(24px, 5vh, 48px); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .72); color: var(--texto); cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .25s; }
.abertura-pausa:hover { background: var(--branco); }
.abertura-pausa-icone { width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.abertura-pausa.pausado .abertura-pausa-icone { width: 0; height: 0; margin-left: 4px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent currentColor; }

@keyframes aproximar { from { transform: scale(1.06); } to { transform: none; } }
@keyframes entrar { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* No celular (até 800 px): a assinatura no cabeçalho, a imagem e, embaixo, no fundo claro, o texto, centralizados */
@media (max-width: 800px) {
  .abertura { display: block; min-height: 0; padding-top: var(--altura-cabecalho); color: var(--texto); }
  /* A imagem fica com a altura que sobra para o cabeçalho (80 px, fixo), o título, a frase e os botões caberem na primeira tela
     acima do botão do WhatsApp, que flutua no canto de baixo (no máximo os 56% da tela; no mínimo, 160 px) */
  .abertura-visual { position: relative; height: 56vh; height: clamp(160px, calc(100svh - 468px), 56svh); min-height: 0; }
  .abertura-pausa { bottom: 16px; left: 16px; }
  .abertura-conteudo { flex-direction: column; align-items: center; padding-top: var(--espaco-4); padding-bottom: var(--espaco-6); }
  .abertura-texto::before { display: none; }
  .abertura-rotulo, .abertura h1, .abertura-frase, .abertura .botao { text-shadow: none; }
  .abertura-frase { font-size: 17px; color: var(--texto-suave); }
  .abertura-rotulo { padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 12px; letter-spacing: .18em; color: var(--texto-suave); }
  .abertura h1 { font-size: clamp(28px, 7.6vw, 32px); }
  .abertura .botao { margin-top: var(--espaco-4); color: var(--texto); border-color: currentColor; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .abertura .botao:hover { background: var(--texto); color: var(--fundo); }
  .abertura-acoes { flex-direction: column; align-items: stretch; gap: var(--espaco-2); margin-top: var(--espaco-4); }
  .abertura .abertura-acoes .botao-contorno { color: var(--texto); }
  .abertura .abertura-acoes .botao-contorno:hover { background: var(--texto); color: var(--fundo); }
  .abertura .abertura-acoes .botao { margin-top: 0; }
  .abertura .abertura-baixar { padding: 0 16px; font-size: 15px; background: var(--texto); color: var(--fundo); border-color: var(--texto); }
  .abertura .abertura-baixar:hover { background: transparent; color: var(--texto); }
}