/* =========================================================
==========               PADRÃO GLOBAL             ========
========================================================= */

/* Reset e box-sizing */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Fonte, cores e background padrão do site */
body {
  font-family: 'Cardo', serif;
  background-color: #f9f9f9;
  color: #607654;
}

/* Transição global para fade, aplicada apenas via JS por página */
body.fade-out {
  opacity: 0;
}
body.show {
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* =========================================================
==========               PAGINA INICIAL             ========
========================================================= */

.pagina-inicial * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.pagina-inicial body,
.pagina-inicial {
  font-family: 'Cardo', serif;
  color: #607654;
  background-color: #f9f9f9;
}

/* HERO / CONTAINER PRINCIPAL */
.pagina-inicial .hero {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  overflow: hidden;
}

.pagina-inicial .background {
  width: 100%;
  height: auto;
  display: block;
}

/* ------------------ LOGO E NOMES ------------------ */
.pagina-inicial .logo {
  position: absolute;
  top: 17%;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  cursor: pointer;
}

.pagina-inicial .nome {
  position: absolute;
  top: 31.5%;
  left: 50%;
  transform: translateX(-50%);
  width: 72.5%;
}

/* ------------------ TEXTOS PRINCIPAIS ------------------ */
.pagina-inicial .intro-text {
  position: absolute;
  top: 34%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1rem;
  text-align: center;
  line-height: 1.4;
  width: 90%;
  max-width: 700px;
}

.pagina-inicial .horario {
  position: absolute;
  top: 39%;
  left: 50%;
  transform: translateX(-50%);
  width: 81.25%;
}

.pagina-inicial .igreja {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  text-align: center;
  font-weight: 600;
  width: 90%;
  max-width: 720px;
}

/* ------------------ INTERAÇÃO E ÍCONES ------------------ */
.pagina-inicial .interagir-text {
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1rem;
  text-align: center;
  line-height: 1.4;
  width: 90%;
  max-width: 700px;
  animation: piscar 1.5s ease-in-out infinite;
}
@keyframes piscar {0%, 100% {opacity: 1;} 50% {opacity: 0;}
}


.pagina-inicial .icon-container {
  position: absolute;
  top: 57%;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 8%;
  box-sizing: border-box;
}


.pagina-inicial .icon-item {
  text-align: center;
}

.pagina-inicial .icon-item:hover .icon {
  transform: scale(1.15);
}

.pagina-inicial .icon {
  width: 70px;
  height: auto;
  cursor: pointer;
  transition: transform 0.3s ease; /* isso é importante */
}

.pagina-inicial .icon-item p {
  font-size: 0.7rem;
  margin-top: 8px;
}


/* ------------------ VERSÍCULO ------------------ */
.pagina-inicial .versiculo {
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1rem;
  text-align: center;
  line-height: 1.3;
  width: 90%;
  max-width: 900px;
}

/* ------------------ ANIMAÇÃO DO CORAÇÃO ------------------ */
.pagina-inicial .heart {
  position: absolute;
  color: red;
  font-size: 96px;
  pointer-events: none;
  animation: floatUp 1s ease-out forwards;
}

@keyframes floatUp {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-100px) scale(1.5);
  }
}

/* ==================== FADE ENTRE PÁGINAS ==================== */
.pagina-inicial body {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.pagina-inicial body.show {
  opacity: 1;
}

.pagina-inicial body.fade-out {
  opacity: 0;
}

/* =========================================================
==========        RESPONSIVIDADE (BREAKPOINTS)     ======
========================================================= */

/* TABLET */
@media (min-width: 481px) and (max-width: 1024px) {
  .pagina-inicial .intro-text { font-size: 1.5rem; top: 34%; }
  .pagina-inicial .horario { top: 38%; }
  .pagina-inicial .igreja { font-size: 1.4rem; top: 47%; }
  .pagina-inicial .interagir-text { top: 55%; font-size: 1.5rem; }
  .pagina-inicial .icon { width: 100px; }
  .pagina-inicial .icon-item p { font-size: 1.1rem; }
  .pagina-inicial .icon-container { padding: 0 10%; top: 58%; }
  .pagina-inicial .versiculo { font-size: 1.5rem; width: 90%; }
}

/* DESKTOP */
@media (min-width: 1025px) {
  .pagina-inicial .intro-text { font-size: 2.2rem; top: 34%; width: 90%; text-align: center; }
  .pagina-inicial .horario { top: 39%; width: 90%; text-align: center; }
  .pagina-inicial .igreja {
    top: 48%;
    width: 90%;
    max-width: none;
    text-align: center;
    line-height: 1.3;
    font-size: 2.8rem;
    white-space: normal;
    word-break: keep-all;
  }
  .pagina-inicial .interagir-text { top: 53%; font-size: 3.5rem; }
  .pagina-inicial .icon-container { top: 56%; padding: 0 10%; display: flex; justify-content: center; align-items: center; gap: 5rem; }
  .pagina-inicial .icon { width: 200px; }
  .pagina-inicial .icon-item p { font-size: 2.5rem; }
  .pagina-inicial .versiculo { font-size: 2.6rem; width: 90%; margin: 0 auto; line-height: 1.4; text-align: center; word-break: normal; }  
}

/* =========================================================
==========         PAGINA COMO CHEGAR (ENCAPSULADA)    ========
========================================================= */

.pagina-como-chegar {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  color: #607654;
  font-family: 'Cardo', serif;
  overflow-x: hidden;
  overscroll-behavior-y: contain; /* Evita rebote no mobile */
  z-index: -1;
}

/* Fundo */
.pagina-como-chegar .background-container {
  position: relative;
  width: 100%;
}
.pagina-como-chegar .background-container .background {
  width: 100%;
  display: block; 
  height: auto;
}

/* Botão Voltar */
.pagina-como-chegar .btn-voltar {
  position: absolute;
  bottom: 4%;
  left: 5%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #607654;
  text-decoration: none;
  padding: 10px 18px;
  font-size: 1.2rem;
  border-radius: 16px;
  z-index: 10;
  transition: background 0.3s ease, transform 0.2s ease, border-radius 0.2s ease;
}
.pagina-como-chegar .btn-voltar:hover,
.pagina-como-chegar .btn-voltar:focus,
.pagina-como-chegar .btn-voltar:active {
  background: rgba(255, 255, 255, 0.9);
  transform: scale(1.15);
  border-radius: 200px;
  outline: none;
}

/* Blocos principais */
.pagina-como-chegar .bloco {
  position: absolute;
  width: 90%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

/* Ajuste do top para cada bloco */
.pagina-como-chegar .bloco-cerimonia { top: 38%; }
.pagina-como-chegar .bloco-recepcao { top: 62%; }

/* Tipografia */
.pagina-como-chegar .texto-medio {
  font-size: 1rem;
  letter-spacing: 1.1px;
  font-weight: bold;
  text-decoration: underline;
  margin-bottom: 10px;
}
.pagina-como-chegar .texto-grande {
  font-size: 0.9rem;
  margin: 8px 0;
}
.pagina-como-chegar .texto-pequeno {
  font-size: 1.1rem;
  line-height: 1.4;
  margin: 2px 0;
}

/* Linha de endereço e ícones */
.pagina-como-chegar .linha-endereco {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.pagina-como-chegar .icon,
.pagina-como-chegar .icon2 {
  width: 75px;
  height: auto;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.pagina-como-chegar .icon:hover,
.pagina-como-chegar .icon2:hover {
  transform: scale(1.2);
}
.pagina-como-chegar .icon-checkpoint {
  width: 20px;
  height: auto;
  opacity: 0.8;
  cursor: default;
}
.pagina-como-chegar .icon-container {
  display: flex;
  justify-content: space-evenly;
  gap: 30px;
  margin-top: 12px;
}
.pagina-como-chegar .icon-item p {
  margin-top: 3px;
  font-size: 0.9rem;
}

/* ===================== RESPONSIVIDADE ===================== */

/* TABLET */
@media (min-width: 481px) and (max-width: 1024px) {
  .pagina-como-chegar .bloco-cerimonia { top: 42%; }
  .pagina-como-chegar .bloco-recepcao { top: 62%; }

  .pagina-como-chegar .texto-medio { font-size: 1.6rem; margin-bottom: 20px; }
  .pagina-como-chegar .texto-grande { font-size: 1.8rem; margin-bottom: 20px; }
  .pagina-como-chegar .texto-pequeno { font-size: 1.6rem; margin-bottom: 20px; }

  .pagina-como-chegar .icon, .pagina-como-chegar .icon2 { width: 100px; }
  .pagina-como-chegar .icon-item p { font-size: 1.2rem; margin-top: 4px; }

  .pagina-como-chegar .btn-voltar {
    position: fixed;
    font-size: 1.5rem;
    padding: 12px 20px;
    bottom: 20px;
    left: 2%;
  }
}

/* DESKTOP */
@media (min-width: 1025px) {
  .pagina-como-chegar .bloco-cerimonia { top: 44%; }
  .pagina-como-chegar .bloco-recepcao { top: 67%; }

  .pagina-como-chegar .texto-medio { font-size: 3.2rem; line-height: 5rem; margin-bottom: 40px; }
  .pagina-como-chegar .texto-grande { font-size: 3.5rem; margin-bottom: 40px; }
  .pagina-como-chegar .texto-pequeno { font-size: 3.2rem; margin-bottom: 50px; }

  .pagina-como-chegar .icon, .pagina-como-chegar .icon2 { width: 200px; }
  .pagina-como-chegar .icon-checkpoint { width: 60px; }
  .pagina-como-chegar .icon-item p { font-size: 2.8rem; margin-top: 2px; }

  .pagina-como-chegar .btn-voltar {
    font-size: 3rem;
    padding: 14px 24px;
    left: 2%;
    bottom: 20px;
  }
}

/* =========================================================
MANUAL DO CONVIDADO – MOBILE FIRST (Encapsulado)
========================================================= */

.pagina-manual-convidado {
  position: absolute;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  font-family: 'Cardo', serif;
  color: #4b3c2b;
  text-align: center;
  overflow-x: hidden;
  min-height: 100vh;
  padding-bottom: 120px; /* garante espaço para o botão voltar */
}

/* Fundo fixo */
.background-container {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.background-container .background {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Botão voltar */
.pagina-manual-convidado .btn-voltar {
  position: fixed;
  bottom: 20px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #607654;
  text-decoration: none;
  padding: 12px 20px;
  font-size: 1.2rem;
  border-radius: 16px;
  transition: all 0.3s ease;
  z-index: 10;
}

.pagina-manual-convidado .btn-voltar:hover {
  background: rgba(255,255,255,0.95);
  transform: scale(1.1);
}

/* Texto principal */
.bloco-manual-texto {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 90%;
  text-align: center; /* adicionado aqui */
}

.bloco-manual-texto .texto-grande {
  font-family: 'Parisienne', cursive;
  font-size: 2.2rem;
  margin-bottom: 10px;
  color: #607654;
  font-weight: bold;
  display: inline-block; /* centraliza dentro do text-align center */
  width: auto; /* remove o 90% que estava “puxando” o texto pra esquerda */
}

.bloco-manual-texto .texto-pequeno.aviso {
  font-size: 1rem;
  color: #607654;
  font-style: italic;
  animation: piscar 1.5s ease-in-out infinite;
}
@keyframes piscar {0%, 100% {opacity: 1;} 50% {opacity: 0;}
}

/* Botões / grade */
.bloco-manual-itens {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  width: 90%;
  max-width: 900px;
}

.bloco-manual-itens .grade-botoes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  justify-items: center;
  align-items: center;
  margin: 0 auto;
}

.bloco-manual-itens .item {
  cursor: pointer;
  transition: all 0.3s ease;
  max-width: 130px;
  width: 100%;
  background: transparent;
}

.bloco-manual-itens .item:hover {
  transform: translateY(-20px);
}

.bloco-manual-itens .item img {
  width: 70px;
  height: auto;
  object-fit: contain;
  margin-bottom: 4px;
  background: transparent;
}

.bloco-manual-itens .item p {
  font-size: 0.9rem;
  color: #607654;
  margin: 0;
  line-height: 1.2;
}

/* Modal flutuante */
.pagina-manual-convidado .modal {
  display: none;
  position: fixed;
  z-index: 20;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center; /* centraliza horizontal */
  align-items: center;     /* centraliza vertical */
}

/* Conteúdo do modal */
.pagina-manual-convidado .modal-content {
  position: relative;
  background: #fff;
  border-radius: 15px;
  padding: 10px;
  max-width: 90%;      /* largura máxima do modal */
  max-height: 85vh;    /* altura máxima do modal */
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Imagem dentro do modal */
.pagina-manual-convidado .modal-content img {
  max-width: 100%;     /* nunca ultrapassa a largura do modal */
  max-height: 80vh;    /* nunca ultrapassa 80% da altura da tela */
  width: auto;         /* mantém proporção */
  height: auto;        /* mantém proporção */
  border-radius: 10px;
  object-fit: contain; /* mantém proporção dentro do container */
}

/* Botão de fechar modal */
.pagina-manual-convidado .fechar-modal {
  position: absolute;
  top: -10px;
  right: -10px;
  background: #fff;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  line-height: 32px;
  font-size: 22px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

.pagina-manual-convidado .fechar-modal:hover {
  background: #f5d1d1;
}

/* ============================
TELAS MAIORES (TABLET)
============================ */
@media (min-width: 600px) and (max-width: 1023px) {

  .pagina-manual-convidado {position: relative; margin: 0 auto; max-width: 1024px; text-align: center;}

  /* Texto principal */
  .bloco-manual-texto {
    position: absolute;
    top: 12%;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
  }
  .bloco-manual-texto .texto-grande {
    margin-bottom: 10px;
    font-size: 4rem; /* proporcional ao desktop */
  }
  .bloco-manual-texto .texto-pequeno.aviso {
    font-size: 1.8rem;
    margin-bottom: 10px;
  }

  /* Bloco de itens */
  .bloco-manual-itens {
    position: absolute;
    top: 24%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 900px;
  }
  .bloco-manual-itens .grade-botoes {
    gap: 5pxx 50px; /* vertical/horizontal */
    justify-items: center;
    align-items: center;
  }
  .bloco-manual-itens .item {
    max-width: 180px;
    width: 100%;
    padding: 16px 10px;
  }
  .bloco-manual-itens .item img {
    width: 100px;
    height: auto;
  }
  .bloco-manual-itens .item p {
    font-size: 1.8rem;
    margin: 8px 0 0 0;
    line-height: 1.2;
    text-align: center;
    max-width: 100%;
  }

  /* Botão voltar */
  .pagina-manual-convidado .btn-voltar {
    position: absolute;
    font-size: 2rem;
    padding: 10px 18px;
    bottom: 18px;
    left: 2%;
  }

}


/* ============================
TELAS MAIORES (DESKTOP)
============================ */
@media (min-width: 1024px) {

.pagina-manual-convidado {position: relative; margin: 0 auto; max-width: 1440px; text-align: center;}

/* Texto principal */
.bloco-manual-texto {
  position: absolute; top: 10%; left: 50%; transform: translateX(-50%); width: 80%;}
  .bloco-manual-texto .texto-grande {margin-bottom: 25px; font-size: 8rem;}
  .bloco-manual-texto .texto-pequeno.aviso {font-size: 3.5rem; margin-bottom: 15px;}

  /* Bloco de itens */
  .bloco-manual-itens {position: absolute; top: 21%; left: 50%; transform: translateX(-50%); width: 90%; max-width: 1200px;}
  .bloco-manual-itens .grade-botoes {gap: 2px 120px; justify-items: center; align-items: center;}
  .bloco-manual-itens .item {max-width: 260px; width: 100%; padding: 20px 14px;}
  .bloco-manual-itens .item img {width: 260px; height: auto;}
  .bloco-manual-itens .item p {font-size: 2.8rem; margin: 10px 0 0 0;line-height: 1.2;}

  /* Botão voltar */
  .pagina-manual-convidado .btn-voltar {position: absolute; font-size: 2.5rem; padding: 12px 20px; bottom: 20px; left: 2%;}
}

  /* =========================================================
  PÁGINA CONFIRMAR PRESENÇA — estilo completo (mobile first)
  Substitua a seção .pagina-confirmar existente por este bloco
========================================================= */

.pagina-confirmar {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Background fixo */
.pagina-confirmar .background-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -1;
}

.pagina-confirmar .background {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Botão Voltar (igual padrão) */
.pagina-confirmar .btn-voltar {
  position: fixed;
  bottom: 4%;
  left: 5%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #607654;
  text-decoration: none;
  padding: 10px 18px;
  font-size: 1.1rem;
  border-radius: 16px;
  transition: 0.25s ease;
  z-index: 12;
  background: transparent;
}
.pagina-confirmar .btn-voltar:hover {
  background: rgba(255,255,255,0.95);
  transform: scale(1.07);
}

.bloco-confirmar {
  position: relative;   /* ✅ vira elemento normal do fluxo */
  width: 92%;
  max-width: 420px;
  margin: 120px auto 40px; /* ✅ controla a posição pelo fluxo */
  padding: 20px;
  background: rgba(255,255,255,0.92);
  border-radius: 14px;
  text-align: center;
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* Tipografia */
.pagina-confirmar .texto-grande {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: #607654;
}

.pagina-confirmar .texto-pequeno {
  font-size: 0.95rem;
  color: #607654;
  margin-bottom: 18px;
}

/* Labels e inputs */
.label-confirmar {
  display: block;
  font-size: 0.98rem;
  text-align: left;
  margin: 12px 0 6px;
  font-family: "Cardo", serif;
  color: #607654;
}

.input-confirmar {
  width: 100%;
  padding: 12px;
  font-size: 1rem;
  border-radius: 10px;
  border: 1.4px solid #607654;
  outline: none;
  margin-bottom: 12px;
  background: rgba(255,255,255,0.96);
  font-family: "Cardo", serif;
  color: #607654;
}

.input-confirmar:focus {
  border-color: #b88a50;
  box-shadow: 0 0 8px rgba(177,136,80,0.18);
}

/* Checkbox */
.checkbox-confirmar {
  font-size: 1rem;
  display: block;
  margin: 12px 0 6px;
  text-align: left;
  color: #607654;
}
.checkbox-confirmar input { transform: scale(1.2); margin-right: 10px; }

/* Botão confirmar */
.btn-confirmar {
  width: 100%;
  padding: 14px;
  background: #607654;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 1.15rem;
  cursor: pointer;
  margin-top: 10px;
  transition: background 0.25s ease, transform 0.12s ease;
  font-family: "Cardo", serif;
}
.btn-confirmar:active { transform: translateY(1px); }
.btn-confirmar:hover:not(:disabled) { background: #d1a86d; }
.btn-confirmar:disabled { background: #bfbfbf; cursor: not-allowed; }

/* Mensagem inline (fallback) */
.msg-retorno {
  margin-top: 14px;
  font-size: 1rem;
  font-family: "Cardo", serif;
  color: #4b3c2b;
  text-align: left;
  min-height: 1.2em;
}

/* Aviso de obrigatórios */
.aviso-obrigatorio {
  font-size: 0.85rem;
  margin-top: 10px;
  opacity: 0.8;
  text-align: left;
  color: #6b6b5f;
}

/* =========================================================
  MODAL INTEGRADO (central, responsivo) - substitui modal antigo
========================================================= */

#modalConfirmacao {
  display: none; /* toggled via JS */
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(0,0,0,0.56);
  backdrop-filter: blur(3px);
  justify-content: center;
  align-items: center;
  padding: 18px;
}

.modal-box {
  width: 92%;
  max-width: 460px;
  background: rgba(255,255,255,0.98);
  border-radius: 16px;
  padding: 26px 20px;
  text-align: center;
  box-shadow: 0 14px 36px rgba(11,9,6,0.18);
  animation: modalPop 260ms cubic-bezier(.2, .9, .2, 1);
}

@keyframes modalPop {
  from { transform: translateY(18px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.modal-box p {
  font-size: 1.2rem;
  color: #4b3c2b;
  font-weight: 700;
  margin-bottom: 18px;
  line-height: 1.3;
}

.modal-box .modal-actions {
  display: flex;
  gap: 12px;
  margin-top: 6px;
}

.modal-box .modal-btn {
  flex: 1;
  padding: 12px 14px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-family: "Cardo", serif;
  font-size: 1rem;
}
.modal-box .modal-btn.ok {
  background: #607654;
  color: #fff;
}
.modal-box .modal-btn.ok:hover { background: #d1a86d; }
.modal-box .modal-btn.ghost {
  background: transparent;
  color: #4b3c2b;
  border: 1px solid rgba(75,60,43,0.12);
}

/* =========================================================
  RESPONSIVIDADE ESPECÍFICA PARA A PÁGINA (TABLET / DESKTOP)
  segue o mesmo padrão dos outros arquivos: breakpoints 481-1024 e 1025+
========================================================= */

/* TABLET */
@media (min-width: 481px) and (max-width: 1024px) {

  .bloco-confirmar {
    margin: 90px auto 60px;
    padding: 28px;
    max-width: 520px;
    border-radius: 16px;
  }

  .pagina-confirmar .texto-grande { font-size: 2.4rem; }
  .pagina-confirmar .texto-pequeno { font-size: 1.3rem; margin-bottom: 22px; }

  .label-confirmar { font-size: 1.15rem; margin-top: 14px; }
  .input-confirmar { padding: 14px; font-size: 1.05rem; }

  .btn-confirmar { padding: 16px; font-size: 1.25rem; border-radius: 14px; }

  .modal-box { max-width: 520px; padding: 32px 28px; }
  .modal-box p { font-size: 1.7rem; }
  .modal-box .modal-btn { font-size: 1.25rem; padding: 14px 18px; }
}

/* =========================================================
   ======== GALERIA MODERNA — MASONRY & LIGHTBOX ==========
========================================================= */
.pagina-galeria .hero {
    text-align: center;
    padding-top: 15px;
    font-family: Cardo, serif;
}

.pagina-galeria .background {
    position: fixed;
    width: 100%;
    height: 100%;
    object-fit: cover;
    inset: 0;
    z-index: -1;
}

.logo-galeria { width: 20%;}

.logo-galeria:hover {
  transform: scale(1.05);
}

.titulo-galeria { font-size: 1.6rem; margin: 5px 0 10px; color: #607654; }

.icon-container-galeria-pagina {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 15px 0 25px;
}
.icon-item { text-align: center; cursor: pointer; transition: 0.25s; }
.icon-item img { width: 60px; transition: transform 0.25s ease; }
.icon-item:hover img { transform: scale(1.12); }
.icon-item p { margin-top: 5px; font-size: 0.8rem; color: #607654; }

/* ==========================
   GRID MASONRY
========================== */
.galeria-grid {
    width: 92%;
    margin: 10px auto 80px;
    display: none; /* inicia oculta */
    column-count: 2;
    column-gap: 12px;
}

.galeria-grid img {
    width: 100%;
    margin-bottom: 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.4s ease;
    opacity: 0;
    break-inside: avoid;
    object-fit: cover;
    display: block;
}

.galeria-grid img.show { opacity: 1; transform: scale(1); }

/* ==========================
   MODAL DE REGISTRO
========================== */
.modal-galeria {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    justify-content: center;
    align-items: center;
    padding: 20px;
    z-index: 1000;
}

.modal-box {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    width: 90%;
    max-width: 360px;
    position: relative;
    text-align: center;
}

.fechar-modal {
    position: absolute;
    right: -10px;
    top: -10px;
    background: white;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 22px;
    line-height: 34px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.30);
}

.modal-texto { font-size: 1.3rem; margin-bottom: 20px; }
.modal-opcoes { display: flex; gap: 10px; }
.modal-btn {
    flex: 1;
    padding: 12px;
    background: #607654;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.25s;
}
.modal-btn:hover { background: #d1a86d; }

/* ==========================
   MODAL DE IMAGEM (MAIN)
========================== */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    justify-content: center;
    align-items: center;
    z-index: 3000;
    padding: 20px;
}

.imagem-modal {
    max-width: 90%;
    max-height: 90%;
    border-radius: 14px;
    object-fit: contain;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    transition: opacity 0.4s ease-in-out;
}

/* efeito de fade ao trocar de imagem */
.fade-in {
    opacity: 0;
    animation: fadeIn 0.6s forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

/* Botões do modal */
.nav-btn,
.btn-fechar,
.btn-excluir {
    position: absolute;
    background: rgba(0,0,0,0.45);
    border: none;
    color: #fff;
    border-radius: 50%;
    font-size: 28px;
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s;
}

.nav-btn:hover,
.btn-fechar:hover,
.btn-excluir:hover {
    background: rgba(209,168,109,0.7);
    transform: scale(1.1);
}

/* Navegação lateral */
#btn-anterior { left: 4%; top: 50%; transform: translateY(-50%); }
#btn-proximo { right: 4%; top: 50%; transform: translateY(-50%); }

/* Fechar e excluir */
.btn-fechar { top: 20px; right: 20px; font-size: 26px; }
.btn-excluir { bottom: 30px; right: 20px; font-size: 22px; }

/* Responsivo */
@media (max-width: 700px) {
    #btn-anterior, #btn-proximo { font-size: 24px; width: 40px; height: 40px; }
    .btn-fechar, .btn-excluir { width: 42px; height: 42px; font-size: 22px; }
}

/* ==========================
   LIGHTBOX PROPORCIONAL
========================== */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    padding: 20px;
}

.lightbox-content {
    position: relative;
    max-width: 95vw;
    max-height: 95vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Wrapper da imagem */
.lb-image-wrap {
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 12px;
}

.lb-image {
    max-width: 100%;
    max-height: 100%;
    border-radius: 12px;
    object-fit: contain;
    transition: transform 0.25s ease, opacity 0.25s ease;
    cursor: grab;
    user-select: none;
}

#lbImage {
  transition: opacity 0.4s ease, transform 0.4s ease;
  opacity: 1;
}

.lb-fade {
  opacity: 0;
}

.lb-close {
    position: absolute;
    top: -15px;
    right: -15px;
    font-size: 30px;
    color: white;
    background: rgba(0,0,0,0.3);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
}

/* Botões de navegação */
.lb-prev, .lb-next {
    position: absolute; /* em relação ao .lightbox */
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px;
    color: white;
    background: rgba(0,0,0,0.3);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2100;
}

.lb-prev { left: 20px; }
.lb-next { right: 20px; }

@media (max-width: 600px) {
@media (max-width: 600px) {
    .lb-prev {
        width: 44px;
        height: 44px;
        font-size: 28px;
        left: 6px;    /* distância da esquerda */
        right: auto;   /* garante que não pegue a regra do right */
    }

    .lb-next {
        width: 44px;
        height: 44px;
        font-size: 28px;
        right: 6px;   /* distância da direita */
        left: auto;    /* garante que não pegue a regra do left */
    }

    .logo-galeria { width: 36%; }
}

/* ==========================
   PREVIEW DE UPLOAD
========================== */
#previewArea {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 10px;
}

#previewArea img {
    width: 100px;
    height: auto;
    border-radius: 8px;
    opacity: 0.5;
    object-fit: cover;
    transition: transform 0.2s, opacity 0.2s;
}
#previewArea img:hover { transform: scale(1.05); opacity: 0.9; }

/* ==========================
   Excluir
========================== */

.foto-container {
  position: relative;
}

.btn-excluir-foto {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  padding: 4px 6px;
  font-size: 14px;
  display: none;
}

.foto-container:hover .btn-excluir-foto {
  display: block;
}

/* ==========================
   RESPONSIVO
========================== */
@media (min-width: 481px) and (max-width: 1024px) {
    .galeria-grid { column-count: 3; column-gap: 14px; }
}
@media (min-width: 1025px) {
    .galeria-grid { column-count: 4; column-gap: 15px; }
}

/* Small polish */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
}


/* =========================================================
   ======== MURAL DOS NOIVOS ==========
========================================================= */

.pagina-mural {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: 'Cardo', serif;
}

/* Background fixo */
.pagina-mural .background-container {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: -1;
}

.pagina-mural .background-container .background {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Botão voltar */
.pagina-mural .btn-voltar {
  position: fixed;
  bottom: 4%;
  left: 4%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #607654;
  text-decoration: none;
  padding: 10px 16px;
  font-size: 1rem;
  border-radius: 16px;
  z-index: 10;
  transition: background 0.3s ease, transform 0.2s ease, border-radius 0.2s ease;
}

.pagina-mural .btn-voltar:hover,
.pagina-mural .btn-voltar:focus,
.pagina-mural .btn-voltar:active {
  background: rgba(255, 255, 255, 0.9);
  transform: scale(1.1);
  border-radius: 200px;
  outline: none;
}

/* Mural Section centralizado */
.pagina-mural .mural-section {
  position: fixed;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 600px;
  padding: 10px 10px 5px 10px;
  background-color: rgba(249, 249, 245, 0.9);
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  text-align: center;
  z-index: 1;
}

.pagina-mural .mural-section h2 {
  color: #607654;
  margin-bottom: 5px;
  font-size: 1.8rem;
}

/* Inputs e textarea */
#nome-input,
#mensagem-input {
  width: 100%;
  padding: 6px;
  margin-bottom: 2px;
  border-radius: 10px;
  border: 1px solid #dcdccd;
  background-color: #ffffff;
  color: #607654;
  font-family: 'Cardo', serif;
  font-size: 1rem;
}

#mensagem-input {
  resize: none;
}

/* Contador de caracteres */
.contador {
  font-size: 0.75rem;
  color: #607654;
  text-align: right;
  margin-bottom: 10px;
}

/* Botão enviar */
.form-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
  flex-wrap: wrap;
  gap: 6px;
}

.form-footer button {
  background-color: #aab799;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
  font-size: 1rem;
}

.form-footer button:hover {
  background-color: #90a080;
}

/* Mural de mensagens */
.mural-messages {
  margin-top: 25px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 350px;   /* Limita a altura do mural */
  overflow-y: auto;    /* Ativa scroll automático quando encher */
  padding-right: 5px;  /* Para scrollbar não encostar no card */
}

/* Scrollbar fina */
.mural-messages::-webkit-scrollbar {
  width: 6px;
}
.mural-messages::-webkit-scrollbar-thumb {
  background-color: rgba(96, 118, 84, 0.3);
  border-radius: 3px;
}
.mural-messages::-webkit-scrollbar-track {
  background: transparent;
}

.message-card {
  background: rgba(255, 255, 255, 0.85); /* Transparência leve */
  padding: 12px 18px;
  border-radius: 12px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
  text-align: left;
  word-break: break-word;  /* Quebra linhas longas */
}

.message-card .nome {
  font-weight: bold;
  margin-bottom: 6px;
  color: #607654;
  font-size: 0.95rem;
}

.message-card .mensagem {
  font-size: 0.95rem;
  color: #607654;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===================== MURAL - EXCLUSÃO ===================== */
.message-card {
  position: relative;
  background: rgba(255,255,255,0.85);
  padding: 15px;
  border-radius: 12px;
  margin-bottom: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.message-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

/* Botão invisível (excluir) */
.btn-excluir {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: rgba(0,0,0,0.4);
  font-size: 20px;
  cursor: pointer;
  display: none;
}

.message-card:hover .btn-excluir {
  display: block;
}

/* Toast mensagem */
.toast-msg {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 16px;
  z-index: 9999;
  animation: aparecer 0.3s ease;
}

@keyframes aparecer {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}



/* ===================== BREAKPOINT TABLET ===================== */
@media (min-width: 481px) and (max-width: 1024px) {
  .pagina-mural .mural-section {
    width: 70%;
    top: 20%;
    padding: 25px;
  }

  .pagina-mural .mural-section h2 {
    font-size: 2rem;
  }

  #nome-input,
  #mensagem-input {
    font-size: 1.05rem;
  }

  .form-footer button {
    font-size: 1.05rem;
  }

  .message-card .nome,
  .message-card .mensagem {
    font-size: 1rem;
  }
}

/* ===================== BREAKPOINT DESKTOP ===================== */
@media (min-width: 1025px) {
  .pagina-mural .mural-section {
    width: 50%;
    top: 22%;
    padding: 30px;
  }

  .pagina-mural .mural-section h2 {
    font-size: 2.2rem;
  }

  #nome-input,
  #mensagem-input {
    font-size: 1.1rem;
  }

  .form-footer button {
    font-size: 1.1rem;
  }

  .message-card .nome,
  .message-card .mensagem {
    font-size: 1.05rem;
  }
}

@media (max-width: 480px) {
  .mural-messages {
    max-height: 250px; /* menor para telas pequenas */
  }
}

/* =========================================================
   ======== QUIZ DOS NOIVOS (estilo MURAL) ========== 
========================================================= */

.pagina-quiz {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: 'Cardo', serif;
  background: none;
}

/* Background fixo */
.pagina-quiz .background-container {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: -1;
}
.pagina-quiz .background {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

/* Botão voltar */
.pagina-quiz .btn-voltar {
  position: fixed;
  bottom: 4%;
  left: 4%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #607654;
  text-decoration: none;
  padding: 10px 16px;
  font-size: 1rem;
  border-radius: 16px;
  z-index: 10;
  transition: background 0.25s ease, transform 0.18s ease;
}
.pagina-quiz .btn-voltar:hover { background: rgba(255,255,255,0.9); transform: scale(1.05); }

/* Card central (como mural) */
.pagina-quiz .quiz-section {
  position: fixed;
  top: 22%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 600px;
  margin-top: 10px;
  padding: 18px;
  background-color: rgba(249, 249, 245, 0.95);
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  text-align: center;
  z-index: 1;
}

.pagina-quiz .quiz-section h2 {
  color: #607654;
  margin: 0 0 6px 0;
  font-size: 1.4rem;
}

.pagina-quiz .quiz-section .subtitulo {
  color: #607654;
  font-size: 1rem;
  margin: 0 0 16px 0;
  line-height: 1.45;
}

/* início */
.inicio-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* input nome */
#nome-jogador {
  width: 100%;
  max-width: 480px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #dcdccd;
  background-color: #ffffff;
  color: #607654;
  font-size: 0.8rem;
  text-align: center;
  box-sizing: border-box;
}

/* botão estilo mural */
.form-btn {
  background-color: #607654;
  color: white;
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.12s ease;
  font-size: 1rem;
  min-width: 150px;
}
.form-btn:hover { background-color: #90a080; transform: translateY(-2px); }

/* quiz-card */
.hidden { display: none !important; }

.quiz-card {
  margin-top: 12px;
  background-color: rgba(249,249,245,0.98);
  padding: 14px;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.06);
  text-align: center;
  animation: fadeIn 0.4s ease;
}

#contador-pergunta { color: #607654; font-size: 0.9rem; margin-bottom: 6px; }

/* pergunta */
.pergunta {
  color: #607654;
  font-size: 1.15rem;
  margin: 8px 0 14px 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  text-align: center;
  animation: fadeIn 0.4s ease;
}

/* opções */
.opcoes {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.opcao {
  background-color: #ffffff;
  color: #607654;
  border: 1px solid #dcdccd;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1rem;
  min-width: 140px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.opcao:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 12px rgba(0,0,0,0.08);
  background-color: #f5f6f4;
}
.opcao.correta { background-color: #b6d7a8 !important; color: #2e4e1f; }
.opcao.errada { background-color: #f4c7c3 !important; color: #703534; }

/* feedback */
#feedback {
  color: #607654;
  min-height: 22px;
  font-weight: bold;
  animation: fadeIn 0.4s ease;
}

/* resultado final */
.resultado {
  margin-top: 12px;
  background-color: rgba(249,249,245,0.98);
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.06);
  color: #607654;
  text-align: center;
  transition: all 0.3s ease;
}

/* estilos do resultado e ranking */
.resultado-pontuacao { 
    font-size: 1.3rem; 
    font-weight: bold; 
    color: #4a5a3f; 
    margin-bottom: 6px;
}
.resultado-mensagem { 
    font-size: 1.1rem; 
    color: #607654; 
    margin-bottom: 6px;
}
.resultado-agradecimento { 
    font-size: 0.95rem; 
    font-style: italic; 
    color: #607654; 
    margin-bottom: 12px;
}
.ranking-titulo { 
    font-size: 1.15rem; 
    font-weight: bold; 
    color: #4a5a3f; 
    margin-bottom: 4px;
}
.ranking-list li { 
    margin: 2px 0; 
    color: #607654;
}
.ranking-ultimo { 
    margin-top: 6px; 
    font-weight: bold; 
    color: #703534;
}
.ranking-ninguem { 
    color: #607654; 
    font-style: italic; 
}

/* animações */
@keyframes fadeIn { from {opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
@keyframes fadeOut { from {opacity:1; transform:translateY(0);} to{opacity:0; transform:translateY(-8px);} }

/* responsividade */
@media (max-width: 480px) {
  .pagina-quiz .quiz-section { top: 12%; padding: 14px; }
  .pergunta { font-size: 1rem; min-height: 52px; }
  .opcao { min-width: 120px; padding: 10px 12px; }
  #nome-jogador { font-size: 0.95rem; }
}
@media (min-width: 481px) and (max-width: 1024px) {
  .pagina-quiz .quiz-section { width: 70%; top: 18%; }
}
@media (min-width: 1025px) {
  .pagina-quiz .quiz-section { width: 50%; top: 22%; padding: 20px; }
  .pergunta { font-size: 1.2rem; }
  .opcao { min-width: 160px; }
}

/* ================================ */
/* LISTA DE PRESENTES – ESTILOS BASE */
/* ================================ */

body.pagina-lista-presentes {
    font-family: "Cardo", serif;
    color: #607654;
    padding-bottom: 80px;
    background: #fefcf5;
}

.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    padding-top: 10px;
    text-align: center;
}

.topo-logo {
    text-align: center;
    margin-top: 5px;
    margin-bottom: 10px;
}

.topo-logo img {
    max-width: 100px;
    height: auto;
}


/* TÍTULO */
h1 {
    font-size: 2rem;
    margin-bottom: 15px;
    font-weight: 700;
}

/* INTRO */
.intro-texto {
    font-size: 1.15rem;
    line-height: 1.55;
    max-width: 750px;
    margin: 0 auto 20px auto;
    text-align: center;
    color: #607654;
}

/* ORIENTAÇÕES */
.orientacoes {
    max-width: 750px;
    margin: 0 auto 30px auto;
    text-align: left;
    font-size: 1.05rem;
    line-height: 1.45;
    color: #4b4b4b;
}

.orientacoes ul { padding-left: 20px; margin-top:10px; }
.orientacoes li { margin-bottom:8px; }

/* BOTÕES DE CATEGORIA */
.categoria-botoes {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 28px;
}

.cat-btn {
    padding: 10px 14px;
    border: none;
    font-size: 1.05rem;
    border-radius: 14px;
    background-color: #607654;
    cursor: pointer;
    transition: 0.18s;
    color: white;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.15);
    flex:1;
    min-width: 130px;
    max-width: 240px;
}

.cat-btn[aria-pressed="true"] {
    background-color: #6d8a6d;
    font-weight: 700;
    box-shadow: 0px 6px 16px rgba(0,0,0,0.18);
}

/* GRADE */
.grade-presentes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 40px;
}

.grid-hidden { display: none; }

/* CARD */
.item-presente {
    background: #60765452;
    border-radius: 18px;
    padding: 12px;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.18s;
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 260px;
}

.item-presente:hover { transform: translateY(-4px); }

.img-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #ffffff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 12px;
}

.item-presente img { width: 100%; height: 100%; object-fit: contain; }

.item-nome { font-size:1.05rem; font-weight:700; margin-bottom:6px; color:#607654; text-align:center; }

.item-valor { font-size:1rem; color:#7a5a5a; margin-bottom:6px; font-weight:700; text-align:left; }

.nota-valor { font-size:0.75rem; color:#c54b4b; font-weight:300; margin-top:2px; text-align:left; }

.esgotado-overlay {
    position:absolute;
    inset:0;
    background: rgba(80,50,50,0.72);
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-size:1.2rem;
    font-weight:bold;
    border-radius:18px;
}

/* ----------- MODAL ----------- */
.modal-bg {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.modal {
    background: #fff;
    padding: 24px;
    border-radius: 16px;
    width: 90%;
    max-width: 520px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.35);
    position: relative;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.modal-img { width:100%; border-radius:10px; margin:12px 0; max-height:320px; object-fit:contain; }

.modal-obs { font-size:0.98rem; margin-bottom:12px; text-align:left; }

.modal-msg { text-align: center; max-width: 380px; padding: 28px 24px; }

.modal-msg h2 { color: #607654; margin-bottom: 10px; font-size: 1.4rem; }

.modal-msg p { font-size: 1rem; color: #4b4b4b; }

.modal input, .modal textarea {
    width:100%;
    margin-bottom:10px;
    padding:10px;
    border-radius:10px;
    border:1px solid #ddd;
    font-family: inherit;
    box-sizing:border-box;
}

.label-valor { display:block; text-align:left; margin-bottom:6px; font-size:0.95rem; }

.valor-wrapper { display: none; }

.btn-confirmar {
    width:100%;
    padding:12px;
    background:#607654;
    border:none;
    color:#fff;
    font-size:1.05rem;
    border-radius:12px;
    cursor:pointer;
    margin-top:6px;
}

.fechar-modal {
    position:absolute;
    top:5px;
    right:5px;
    cursor:pointer;
    text-decoration:underline;
    font-size:0.95rem;
    opacity:0.3;
}

/* MODAL PIX */
.modal-pix .pix-titulo { color:#607654; margin-bottom:6px; }
.modal-pix .pix-item { font-weight:700; color:#3e3e3e; margin-bottom:8px; }
.modal-pix .pix-valor { color:#7a5a5a; margin-bottom:12px; }

.modal-pix .pix-info-box {
    width:100%;
    padding:12px;
    border-radius:10px;
    background:#fff;
    border:1px solid #eee;
    margin-bottom:10px;
}

.modal-pix .pix-info-label { font-size:0.85rem; text-align:left; margin-bottom:6px; }

.modal-pix .pix-info-campo { display:flex; gap:8px; }

.modal-pix #pixChaveInput { flex:1; padding:8px; border-radius:8px; border:1px solid #ddd; }

.modal-pix .btn-pix-copiar { width:auto; padding:8px 12px; }

.modal-pix .pix-msg-copiado { margin-top:6px; font-size:0.85rem; color:#007a00; display:none; }

.modal-pix .pix-qr-area { margin:8px 0; }
.modal-pix .pix-qr-img { width:220px; height:220px; border-radius:8px; background:#fff; }

.modal-pix .pix-titular-texto { font-size:0.9rem; color:#4b4b4b; margin-top:12px; }

@media (max-width:720px) { .grade-presentes { grid-template-columns: repeat(2,1fr); } }
@media (max-width:420px) { .grade-presentes { grid-template-columns: repeat(1,1fr); } }


/* =============================================
   ESPAÇO DOS CONVIDADOS – Encapsulado
   ============================================= */

.pagina-espaco-convidados {
  position: absolute;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  font-family: 'Cardo', serif;
  color: #4b3c2b;
  overflow-x: hidden;
  min-height: 100vh;
  text-align: center;
}

/* Fundo */
.background-container-espaco {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.background-espaco {
  width: 100%;
  height: AUTO;
  object-fit: cover;
}

/* Botão voltar */
.btn-voltar-espaco {
  position: absolute;
  bottom: 10px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #607654;
  text-decoration: none;
  padding: 12px 20px;
  font-size: 1.2rem;
  border-radius: 16px;
  transition: all 0.3s ease;
  z-index: 10;
}

.btn-voltar-espaco:hover {
  background: rgba(255,255,255,0.9);
  transform: scale(1.1);
}

/* Título */
.bloco-espaco-texto {
  width: 100%;
  height: AUTO;
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
}

.texto-grande-espaco {
  font-family: 'Parisienne', cursive;
  font-size: 2.2rem;
  color: #607654;
  font-weight: bold;
  margin-bottom: 15px;
}

.texto-pequeno-espaco {
  font-size: 1rem;
  color: #607654;
  font-style: italic;
  animation: piscar 1.5s infinite;
}

@keyframes piscar {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Botões em coluna */
.bloco-espaco-botoes {
  position: absolute;
  top: 24%;
  width: 95%;
  left: 50%;
  transform: translateX(-50%);
  gap: 10px;
  margin-top: 15px;
}

.coluna-botoes-espaco {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 85%;
  max-width: 500px;
  margin: 0 auto;
}

.botao-espaco {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: rgba(255,255,255,0.85);
  padding: 12px;
  border-radius: 18px;
  text-decoration: none;
  color: #607654;
  transition: all 0.3s ease;
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

.botao-espaco:hover {
  transform: translateY(-8px);
  background: rgba(255,255,255,1);
}

.botao-espaco img {
  width: 60px;
  height: auto;
  margin-right: 12px; /* espaço entre ícone e texto */
  flex-shrink: 0;     /* impede de encolher */
}

.botao-espaco p {
  font-size: 1.4rem;
  margin: 0;
  line-height: 1.2;
  text-align:center ;   /* força o texto ficar à direita */
  flex: 1;            /* ocupa o espaço restante do card */
}

/* DEBUG: mostra o botão admin enquanto testa; remova ou defina opacity: 0 depois */
.admin-secret {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  opacity: 0;        /* mude pra 0 quando finalizar */
  background: rgba(255,255,255,0.12);
  border: 2px dashed rgba(96,118,84,0.6);
  border-radius: 8px;
  cursor: pointer;
  z-index: 9999;
}