V* { box-sizing: border-box; } html, body {
  height: 100%;
  margin: 0;
  overflow-x: hidden; 
  overflow-y: auto;   /* permite rolagem em celulares pequenos */
  font-family: 'Playfair Display', serif;
  background-color: #0b0c10;
}
 /* Fundo gradiente */ .bg-grad { position: absolute; inset: 0; background: radial-gradient(ellipse at bottom, #2a2a35 0%, #0b0c10 100%); z-index: 0; } /* ======== VÍDEO DE ABERTURA EM TELA CHEIA ======== */ /* ======== VÍDEO / IMAGEM DE ABERTURA TOTALMENTE AJUSTÁVEL ======== */ #abertura { position: relative; width: 100vw; height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; } /* Para vídeos de fundo (sem cortes em nenhuma tela) */ .video-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; /* <— ajusta proporcionalmente mesmo que estique */ z-index: 0; background-color: #000; /* evita bordas brancas caso falhe o carregamento */ } /* Para imagens estáticas de fundo */ .bg-grad, .convite-bg img, .envelope-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; /* faz a imagem preencher toda a tela */ z-index: 0; } /* Botão de abrir */ .abrir-btn { position: absolute; bottom: 10%; border: 2px solid #fff; background: rgba(255,255,255,0.08); color: #fff; padding: 12px 32px; border-radius: 12px; z-index: 2; backdrop-filter: blur(6px); transition: all 0.3s ease; } .abrir-btn:hover { background: #fff; color: #000; transform: scale(1.05); } /* ---- Página principal ---- */ .convite-body {
  background-color: #0b0c10;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;   /* permite rolar se necessário */
  color: #fff;
  position: relative;
  font-family: 'Playfair Display', serif;
}
 /* Fundo dourado cinematográfico */ .convite-bg { position: fixed; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.7)), url('assets/bg_convite.png') center/cover no-repeat; filter: brightness(0.98); z-index: 0; } /* Container principal centralizado */ main.container { position: relative; z-index: 2; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; /* Centraliza verticalmente */ align-items: center; padding-top: 8vh; padding-bottom: 6vh; } /* Texto principal */ main h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); letter-spacing: 2px; background: linear-gradient(90deg, #f5d98b, #f3b33d, #f0dfac); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 8px rgba(255, 230, 150, 0.4); margin-bottom: 0.4em; } main p.lead { color: #f7d67a; font-style: italic; text-shadow: 0 0 12px rgba(255, 210, 110, 0.5); margin-bottom: 2em; } .row.g-3 { max-width: 700px; margin: 0 auto; } /* Botões dourados */ .convite-btn { display: inline-block; width: 100%; padding: 12px 18px; background: linear-gradient(145deg, #b4862e, #e4b757); border: 2px solid #f5e1a4; border-radius: 14px; color: #fff; font-size: 1rem; text-transform: uppercase; font-weight: 600; text-shadow: 0 0 8px rgba(0,0,0,0.6); box-shadow: 0 0 25px rgba(255,215,100,0.25); transition: all 0.35s ease; backdrop-filter: blur(4px); position: relative; z-index: 2; } .convite-btn:hover { transform: scale(1.08); box-shadow: 0 0 40px rgba(255,215,100,0.5); background: linear-gradient(145deg, #f6d96f, #eec55a); color: #000; } /* Modais */ .custom-modal { display: none; position: fixed; inset: 0; background: rgba(10, 10, 10, 0.8); justify-content: center; align-items: center; z-index: 999; backdrop-filter: blur(10px); } .custom-modal.active { display: flex; animation: fadeInModal 0.6s ease forwards; } @keyframes fadeInModal { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } .modal-content { background: linear-gradient(160deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05)); border: 1px solid rgba(255, 225, 130, 0.4); border-radius: 18px; padding: 2em 1.5em; text-align: center; max-width: 360px; color: #fff; box-shadow: 0 0 25px rgba(255,230,150,0.3); position: relative; z-index: 3; } .modal-content h2 { font-size: 1.6rem; background: linear-gradient(90deg, #f2d18b, #e6b957); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 0.6em; } .modal-content p { color: #fef9e6; font-size: 1rem; line-height: 1.5; opacity: 0.9; } .fechar { margin-top: 1.4em; border: none; background: linear-gradient(145deg, #f8d36b, #eeb950); color: #000; padding: 0.6em 1.6em; border-radius: 12px; cursor: pointer; font-weight: 600; text-transform: uppercase; transition: all 0.25s ease; } .fechar:hover { background: #fff5cc; transform: scale(1.07); } /* ===== EFEITO DE PARTÍCULAS DOURADAS ===== */ #particles { position: fixed; inset: 0; z-index: 1; pointer-events: none; } /* ===== FONTES PERSONALIZADAS ===== */ .titulo-principal { font-family: 'Cinzel', serif; font-weight: 700; font-size: clamp(2.6rem, 5vw, 4.5rem); background: linear-gradient(90deg, #f9e49c, #f2c24d, #f7e9b4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 14px rgba(255, 230, 150, 0.45); letter-spacing: 3px; } .subtitulo { font-family: 'Great Vibes', cursive; color: #f5d36b; font-size: clamp(1.4rem, 3vw, 2rem); text-shadow: 0 0 10px rgba(255, 230, 120, 0.5); } /* ===== CONTADOR ===== */ .contador { font-family: 'Cinzel', serif; color: #ffecb3; font-size: clamp(1.2rem, 3vw, 1.8rem); text-shadow: 0 0 12px rgba(255, 215, 100, 0.6); letter-spacing: 2px; animation: brilho 3s ease-in-out infinite; } @keyframes brilho { 0%, 100% { text-shadow: 0 0 12px rgba(255,215,100,0.6); } 50% { text-shadow: 0 0 22px rgba(255,235,150,1); } } /* ===== AJUSTES RESPONSIVOS ===== */ @media (max-width: 768px) { .abrir-btn { bottom: 10%; padding: 10px 26px; font-size: 1rem; } }







/* ===== MENSAGEM TOPO ===== */
.mensagem-topo {
  font-family: 'Great Vibes', cursive;
  font-size: 1.4rem;
  color: #f3d98a;
  text-shadow: 0 0 10px rgba(255, 230, 120, 0.6);
  max-width: 600px;
  margin: 0 auto 1rem;
}

/* ===== MODAL PRESENTEAR ===== */
.pix-btn, .cartao-btn {
  padding: 10px 18px;
  margin: 6px 0;
  border: none;
  border-radius: 10px;
  background: linear-gradient(145deg, #b4862e, #e4b757);
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}
.pix-btn:hover, .cartao-btn:hover {
  background: linear-gradient(145deg, #f6d96f, #eec55a);
  color: #000;
  transform: scale(1.05);
}

.pix-chave {
  font-size: 1.2rem;
  color: #fff3b0;
  font-weight: bold;
  margin-top: 8px;
}

.cartao-box select {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
}

#linkPagamento a {
  word-break: break-all;
  color: #f7d67a !important;
  text-decoration: underline;
}

/* ===== DATA E HORÁRIO FIXOS ===== */
.data-horario {
  font-family: 'Cinzel', serif;
  color: #f5e6b8;
  font-size: clamp(1rem, 2.8vw, 1.4rem);
  text-shadow: 0 0 10px rgba(255, 215, 100, 0.5);
  letter-spacing: 1px;
  margin-bottom: 0.6em;
}

.pix-qrcode {
  width: 180px;
  height: 180px;
  border-radius: 12px;
  border: 2px solid rgba(255, 230, 150, 0.6);
  box-shadow: 0 0 20px rgba(255, 215, 100, 0.4);
  margin-top: 10px;
}
/* ===== CORREÇÃO PARA CELULARES PEQUENOS ===== */
@media (max-height: 700px) {
  body, html {
    overflow-y: auto !important; /* permite rolar */
  }

  main.container {
    min-height: auto !important; /* remove altura forçada */
    padding-top: 4vh !important;
    padding-bottom: 4vh !important;
  }

  .convite-btn {
    padding: 10px 14px !important;
    font-size: 0.9rem !important;
  }

  .mensagem-topo {
    font-size: 0.9rem !important;
    padding: 0 20px;
  }
}