/* ============================================================
   v6.56 — linha dos nomes ampliada + efeitos premium preservados
   Carregado por último: resolve 3 problemas reais encontrados
   por medição de DOM (não só leitura visual) e adiciona
   acabamentos discretos, sem voltar à estética de "card/banner".
   ============================================================ */

/* ----------------------------------------------------------
   1) DATA / HORÁRIO — divisor estava 11px fora do centro real
   (a proporção 1.08fr / 0.92fr da v6.39 superdimensionou o
   ajuste óptico). Colunas iguais = eixo central verdadeiro.
   ---------------------------------------------------------- */
.date-time-grid {
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) !important;
}

/* ----------------------------------------------------------
   2) PATINHAS AO LADO DOS NOMES — ficaram com display:none
   herdado de v6.49→v6.53 enquanto o restante do estilo (cor,
   rotação, opacidade) seguia sendo refinado nas versões
   seguintes. Reativando com o desenho mais recente (v6.45):
   discretas, giradas, baixa opacidade — e com uma respiração
   suave para reforçar o acabamento premium.
   ---------------------------------------------------------- */
.name-plaque .name-paw {
  display: grid !important;
}

@media (prefers-reduced-motion: no-preference) {
  .name-plaque .name-paw-rose {
    animation: v655-paw-breathe-rose 4.6s ease-in-out infinite !important;
  }
  .name-plaque .name-paw-blue {
    animation: v655-paw-breathe-blue 4.6s ease-in-out .7s infinite !important;
  }
  @keyframes v655-paw-breathe-rose {
    0%, 100% { opacity: .26; transform: translateY(-50%) rotate(-9deg) scale(.90); }
    50%      { opacity: .58; transform: translateY(-50%) rotate(-9deg) scale(1.06); }
  }
  @keyframes v655-paw-breathe-blue {
    0%, 100% { opacity: .26; transform: translateY(-50%) rotate(9deg) scale(.90); }
    50%      { opacity: .58; transform: translateY(-50%) rotate(9deg) scale(1.06); }
  }
}

/* ----------------------------------------------------------
   3) BLOCO "SUGESTÃO DE PRESENTE" — ícone + texto centralizados
   como grupo horizontal faziam o texto LEGÍVEL cair ~17px à
   direita do eixo real (o olho segue o texto, não a caixa
   combinada). Passa para o mesmo padrão vertical já usado em
   Local: ícone em cima, texto centralizado embaixo — e ganha
   o mesmo flutuar suave do ícone do mapa, para consistência.
   ---------------------------------------------------------- */
.gift-main {
  flex-direction: column !important;
  gap: 8px !important;
}
.gift-main > i {
  font-size: 30px !important;
  opacity: .64 !important;
  color: rgba(184, 137, 51, .82) !important;
  transform: none !important;
}
@media (prefers-reduced-motion: no-preference) {
  .gift-main > i {
    animation: v644-pin-float 5.8s ease-in-out infinite;
  }
}

/* ============================================================
   EFEITOS PREMIUM
   ============================================================ */

/* --- Brilho de "folha dourada" cruzando a placa dos nomes ---
   Uma faixa de luz diagonal muito discreta que passa uma vez
   a cada ~7.5s. Fica por cima do texto (mix-blend soft-light),
   então clareia em vez de tampar — efeito de metal/verniz que
   convites impressos premium costumam ter. */
.name-plaque {
  overflow: visible !important;
}
.name-plaque::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
  border: 0 !important;
  box-shadow: none !important;
  background: linear-gradient(115deg,
    transparent 42%,
    rgba(255, 255, 255, .60) 50%,
    transparent 58%) !important;
  background-size: 260% 100% !important;
  background-position: 160% 0 !important;
  background-repeat: no-repeat !important;
  mix-blend-mode: soft-light !important;
  opacity: 0 !important;
}
@media (prefers-reduced-motion: no-preference) {
  .name-plaque::before {
    animation: v655-foil-sweep 7.5s ease-in-out infinite !important;
  }
  @keyframes v655-foil-sweep {
    0%, 54%  { background-position: 160% 0; opacity: 0; }
    62%      { opacity: .85; }
    72%      { background-position: -60% 0; opacity: 0; }
    100%     { background-position: -60% 0; opacity: 0; }
  }
}

/* Mantém o divisor ornamental como elemento independente do brilho.
   Na v6.55 ambos disputavam o ::after; agora a linha volta a aparecer
   e ganha mais extensão para acompanhar melhor a largura dos nomes. */
.name-plaque::after {
  width: 96% !important;
  height: 18px !important;
  margin-top: 17px !important;
}

/* --- Estrelas divisórias com leve cintilar ---
   As "✦" que separam cada bloco ganham um pulso de brilho
   dessincronizado entre si, como pequenas luzes acendendo aos
   poucos ao longo da rolagem — link visual entre as seções. */
@media (prefers-reduced-motion: no-preference) {
  .event-fact-unified::after,
  .countdown::after,
  .gift-block::after,
  .pix-block::after,
  .venue-block::after {
    animation: v655-star-twinkle 4.2s ease-in-out infinite;
  }
  .countdown::after   { animation-delay: .35s; }
  .gift-block::after  { animation-delay: .70s; }
  .pix-block::after   { animation-delay: 1.05s; }
  .venue-block::after { animation-delay: 1.40s; }
  @keyframes v655-star-twinkle {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(216, 168, 76, 0)); opacity: .64; }
    50%      { filter: drop-shadow(0 0 3px rgba(216, 168, 76, .55)); opacity: 1; }
  }
}

/* --- Micro-interação premium no botão de RSVP ---
   Elevação e brilho dourado mais presentes ao toque/hover,
   sem reintroduzir sombra pesada de "card". */
.rsvp-button {
  transition: transform .22s ease, box-shadow .3s ease !important;
}
.rsvp-button:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 0 0 5px rgba(209, 154, 61, .12),
    0 12px 26px rgba(148, 49, 86, .16) !important;
}
.rsvp-button:active {
  transform: translateY(0) scale(.985) !important;
  box-shadow:
    0 0 0 4px rgba(209, 154, 61, .10),
    0 6px 16px rgba(148, 49, 86, .14) !important;
}

@media (max-width: 359px) {
  .name-plaque::before { background-size: 220% 100%; }
  .name-plaque::after { width: 100% !important; }
}

@media (min-width: 360px) and (max-width: 430px) {
  .name-plaque::after { width: 100% !important; }
}