/* ═══════════════════════════════════════════════════════════
   RAFAELA & PAULO — SITE DE CASAMENTO
   Tema: Aquarela · Papel · Botânico · Ouro · Verde Sage
   ═══════════════════════════════════════════════════════════ */

/* ─── CUSTOM PROPERTIES ─── */
:root {
  --cream:       #FDFAF5;
  --paper:       #F7F2EA;
  --paper-alt:   #F0EBE0;
  --gold:        #C9A84C;
  --gold-light:  #E8D5A3;
  --gold-pale:   #FBF7EE;
  --gold-dark:   #9E7B2E;
  --green-deep:  #3D5C36;
  --green:       #5C7A52;
  --green-light: #8DAF85;
  --green-pale:  #EAF2E7;
  --text:        #2A2522;
  --text-muted:  #7A6E68;
  --white:       #FFFFFF;
  --border:      rgba(201,168,76,0.28);
  --shadow-soft: 0 8px 40px rgba(42,37,34,0.10);
  --shadow-card: 0 4px 24px rgba(42,37,34,0.09);

  --font-script: 'Great Vibes', cursive;
  --font-title:  'Playfair Display', serif;
  --font-body:   'Cormorant Garamond', serif;
  --font-ui:     'Lato', sans-serif;

  --radius: 3px;
  --transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  background-color: var(--cream);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.7;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul, ol { list-style: none; }

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--gold-light); border-radius: 3px; }

/* ═══════════════════════════════════════════════════════════
   ENVELOPE SCREEN
   ═══════════════════════════════════════════════════════════ */
#envelope-scene {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.9s ease;
}

.watercolor-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 18% 22%, rgba(201,168,76,0.13) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 78%, rgba(92,122,82,0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 55% 48%, rgba(247,242,234,0.9) 0%, var(--cream) 100%);
  background-color: var(--cream);
}

.watercolor-backdrop::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 30% 70%, rgba(201,168,76,0.07) 0%, transparent 40%),
    radial-gradient(ellipse at 70% 15%, rgba(141,175,133,0.09) 0%, transparent 40%);
  pointer-events: none;
}

/* SVG botanical decorations on backdrop */
.watercolor-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cellipse cx='80' cy='80' rx='35' ry='18' fill='%235C7A52' opacity='0.06' transform='rotate(-25 80 80)'/%3E%3Cellipse cx='90' cy='65' rx='22' ry='11' fill='%238DAF85' opacity='0.07' transform='rotate(-15 90 65)'/%3E%3Cellipse cx='320' cy='320' rx='40' ry='20' fill='%235C7A52' opacity='0.06' transform='rotate(20 320 320)'/%3E%3Cellipse cx='330' cy='305' rx='25' ry='13' fill='%238DAF85' opacity='0.07' transform='rotate(30 330 305)'/%3E%3Cpath d='M60 100 Q120 80 70 130' stroke='%235C7A52' fill='none' stroke-width='1.5' opacity='0.1'/%3E%3Cpath d='M310 280 Q370 260 320 310' stroke='%235C7A52' fill='none' stroke-width='1.5' opacity='0.1'/%3E%3C/svg%3E");
  background-size: 400px 400px;
  pointer-events: none;
  opacity: 0.8;
}

/* ─── ENVELOPE WRAPPER ─── */
#envelope-wrapper {
  position: relative;
  z-index: 2;
}

/* Perspective container — governs 3D depth of the flap rotation */
.env-perspective {
  perspective: 1800px;
  perspective-origin: 50% 18%;
}

#envelope {
  /* Portrait ratio matching capa_convite_1.png (963×1263) */
  width: clamp(220px, 42vw, 380px);
  aspect-ratio: 963 / 1263;
  position: relative;
  cursor: pointer;
  animation: envFloat 5s ease-in-out infinite;
  will-change: transform;
  /* drop-shadow uses the transparent PNG contour */
  filter: drop-shadow(0 28px 64px rgba(42,37,34,0.22));
}

@keyframes envFloat {
  0%, 100% { transform: translateY(0px) rotate(-0.6deg); }
  50%       { transform: translateY(-12px) rotate(0.6deg); }
}
@keyframes envShake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-5px) rotate(-1deg); }
  40%      { transform: translateX(5px) rotate(1deg); }
  60%      { transform: translateX(-3px) rotate(-0.5deg); }
  80%      { transform: translateX(3px) rotate(0.5deg); }
}

/* ── Base image (full envelope, always visible) ── */
.env-base {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.env-base img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ── 3D flap element
      Same image cropped to the triangle via clip-path.
      Clips at 44.8% height (the real V-point measured from capa_convite_1.png).
      On open: rotates back with perspective → reveals inside face.         ── */
.env-flap-3d {
  position: absolute;
  inset: 0;
  transform-origin: top center;
  transform-style: preserve-3d;
  z-index: 20;
  transition: transform 1.35s cubic-bezier(0.35, 0.05, 0.15, 0.95);
  pointer-events: none;
}

/* Front face: same image, clipped to the flap triangle → perfectly matches base image */
.env-flap-front {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 44.8%);
  backface-visibility: hidden;
  overflow: hidden;
}
.env-flap-front img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Inside face: shown when flap has rotated ~180°, mimics interior of the envelope */
.env-flap-inside {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 44.8%);
  background: linear-gradient(175deg, #DDD8D2 0%, #CEC9C0 45%, #C2BDB3 100%);
  backface-visibility: hidden;
  transform: rotateX(180deg);
  border-radius: 1px;
}

/* Trigger class: flap folds back to ~160° (natural resting open angle) */
.env-flap-3d.open { transform: rotateX(-162deg); }

/* ── Inner card (the convite that slides up from inside) ── */
#inner-card {
  position: absolute;
  left: 9%;
  right: 9%;
  /* starts flush with bottom of the envelope body area (below flap) */
  bottom: 3%;
  height: 74%;          /* sits in the envelope body, not the flap zone */
  background: linear-gradient(165deg, var(--white) 0%, #FAF5EE 100%);
  border-radius: 2px;
  z-index: 5;           /* behind flap (z=20), above base (z=1) */
  transform: translateY(12px);
  opacity: 0;
  transition:
    transform 0.9s cubic-bezier(0.35, 0.05, 0.2, 0.9),
    opacity 0.55s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(201,168,76,0.22);
  overflow: hidden;
  box-shadow: 0 -4px 24px rgba(42,37,34,0.08);
}
#inner-card.visible  { opacity: 1; }
/* Slides up so the card emerges above the opened flap */
#inner-card.slide-up { transform: translateY(-56%); }

.inner-card-content {
  text-align: center;
  padding: 24px 20px;
  width: 100%;
}
.inner-card-tag {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 12px;
}
.inner-card-divider {
  width: 40px;
  height: 1px;
  background: var(--gold-light);
  margin: 8px auto 16px;
}
.inner-card-names {
  font-family: var(--font-script);
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  color: var(--text);
  line-height: 1.15;
  margin-bottom: 10px;
}
.inner-card-names em { color: var(--gold-dark); font-style: normal; }
.inner-card-date {
  font-size: 0.82rem;
  letter-spacing: 4px;
  color: var(--text-muted);
  font-family: var(--font-ui);
  margin-bottom: 4px;
}
.inner-card-location {
  font-size: 0.76rem;
  color: var(--green);
  font-family: var(--font-ui);
  letter-spacing: 1.5px;
}

/* Hover: subtle lift + glow */
#envelope:hover {
  filter: drop-shadow(0 36px 80px rgba(42,37,34,0.28)) drop-shadow(0 0 24px rgba(201,168,76,0.18));
}
#envelope:hover .env-base img {
  filter: brightness(1.02);
}

/* Open hint */
.open-hint {
  position: relative;
  z-index: 3;
  margin-top: 28px;
  text-align: center;
  color: var(--text-muted);
  transition: opacity 0.4s ease;
}
.open-hint span {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
.hint-chevron {
  margin-top: 6px;
  font-size: 1rem;
  animation: hintBounce 2.2s ease-in-out infinite;
  color: var(--gold);
}
@keyframes hintBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}

/* ═══════════════════════════════════════════════════════════
   MAIN CONTENT
   ═══════════════════════════════════════════════════════════ */
#main-content {
  display: none;
  opacity: 0;
  transition: opacity 0.9s ease;
}
#main-content.visible { opacity: 1; }

/* ─── NAVIGATION ─── */
#main-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: rgba(253,250,245,0.93);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.3s ease;
}
#main-nav.scrolled { box-shadow: 0 2px 20px rgba(42,37,34,0.08); }

.nav-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 28px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  font-family: var(--font-script);
  font-size: 1.6rem;
  color: var(--text);
  letter-spacing: 1px;
}
.nav-logo span { color: var(--gold); }
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-links a {
  font-family: var(--font-ui);
  font-size: 0.76rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--transition);
}
.nav-links a:hover, .nav-links a.active { color: var(--green-deep); }
.nav-cta {
  background: var(--green-deep) !important;
  color: var(--white) !important;
  padding: 8px 18px !important;
  border-radius: 2px;
  transition: background var(--transition), transform 0.2s ease !important;
}
.nav-cta:hover { background: var(--green) !important; transform: translateY(-1px) !important; }
.nav-admin {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  border: 1px solid var(--border);
  padding: 5px 11px !important;
  border-radius: 2px;
  opacity: 0.75;
  transition: opacity 0.2s ease, color 0.2s ease !important;
}
.nav-admin:hover { opacity: 1; color: var(--gold-dark) !important; }
.nav-mobile-btn {
  display: none;
  font-size: 1.4rem;
  color: var(--text);
  padding: 4px 8px;
}
.nav-mobile-menu {
  display: none;
  background: rgba(253,250,245,0.97);
  border-top: 1px solid var(--border);
  padding: 16px 28px 20px;
}
.nav-mobile-menu.open { display: block; }
.nav-mobile-menu li { padding: 10px 0; border-bottom: 1px solid var(--border); }
.nav-mobile-menu a {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ─── CONTAINERS & SECTIONS ─── */
.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px;
}
.section { padding: 96px 0; }
.section-light    { background-color: var(--cream); }
.section-green-pale { background-color: var(--green-pale); }
.section-gold-tint  { background-color: var(--gold-pale); }
.section-paper    { background-color: var(--paper); }

/* ─── TYPOGRAPHY ─── */
.section-tag {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold-dark);
  display: block;
  margin-bottom: 12px;
}
.section-title {
  font-family: var(--font-title);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 400;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 16px;
}
.ornament-divider {
  color: var(--gold-light);
  font-size: 1.1rem;
  letter-spacing: 12px;
  margin: 16px 0 28px;
  display: block;
}

/* ─── ANIMATE ON SCROLL ─── */
.aos {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.aos.visible { opacity: 1; transform: none; }
.aos-delay-1 { transition-delay: 0.12s; }
.aos-delay-2 { transition-delay: 0.24s; }
.aos-delay-3 { transition-delay: 0.36s; }
.aos-delay-4 { transition-delay: 0.48s; }

/* ═══════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════ */
#hero {
  position: relative;
  height: 100vh;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.82) contrast(0.93) brightness(0.96);
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(253,250,245,0.18) 0%,
    rgba(42,37,34,0.42) 50%,
    rgba(42,37,34,0.65) 100%
  );
}

#birds-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  color: var(--white);
  padding: 20px;
  animation: heroReveal 1.2s ease forwards;
}
@keyframes heroReveal {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
.hero-tag {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 18px;
}
.hero-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  line-height: 1;
}
.hero-name {
  font-family: var(--font-script);
  font-size: clamp(3rem, 10vw, 6.5rem);
  color: var(--white);
  text-shadow: 0 2px 24px rgba(0,0,0,0.25);
  display: block;
}
.hero-amp {
  font-family: var(--font-script);
  font-size: clamp(2rem, 6vw, 4rem);
  color: var(--gold-light);
  display: block;
  line-height: 1.2;
}
.hero-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 20px auto;
  width: 200px;
}
.divider-line {
  flex: 1;
  height: 1px;
  background: rgba(232,213,163,0.5);
}
.divider-ornament { color: var(--gold-light); font-size: 0.75rem; }
.hero-date {
  font-family: var(--font-title);
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  letter-spacing: 5px;
  color: rgba(255,255,255,0.9);
  margin-bottom: 6px;
  font-weight: 400;
}
.hero-location {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 40px;
}
.hero-scroll {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.75);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  transition: color 0.3s;
}
.hero-scroll:hover { color: var(--gold-light); }
.scroll-arrow {
  animation: scrollBounce 2s ease-in-out infinite;
  font-size: 1.1rem;
}
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(7px); }
}

/* ═══════════════════════════════════════════════════════════
   BOAS-VINDAS
   ═══════════════════════════════════════════════════════════ */
.welcome-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.welcome-message {
  font-size: 1.15rem;
  color: var(--text-muted);
  margin-bottom: 18px;
  line-height: 1.8;
}
.families-block {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 32px 0;
  border-top: 1px solid var(--border);
}
.family { flex: 1; }
.family-title {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.family-name {
  font-family: var(--font-title);
  font-size: 1.1rem;
  color: var(--text);
  margin-bottom: 6px;
  font-style: italic;
}
.family-parents {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.family-separator { color: var(--gold-light); font-size: 1.2rem; }

/* ═══════════════════════════════════════════════════════════
   INÍCIO — convite formal, fundo branco, letras pretas
   ═══════════════════════════════════════════════════════════ */
.inicio-section {
  background: #ffffff;
  padding: 100px 32px;
}

.inicio-inner {
  max-width: 580px;
  margin: 0 auto;
  text-align: center;
}

/* Linhas decorativas horizontais no topo e base */
.inicio-topo-linha,
.inicio-base-linha {
  width: 60px;
  height: 1px;
  background: #1a1a1a;
  margin: 0 auto;
}
.inicio-topo-linha { margin-bottom: 48px; }
.inicio-base-linha { margin-top: 48px; }

/* "Com alegria," — abertura em itálico elegante */
.inicio-alegria {
  font-family: var(--font-body);   /* Cormorant Garamond */
  font-size: 1.25rem;
  font-style: italic;
  color: #1a1a1a;
  margin-bottom: 36px;
  letter-spacing: 0.5px;
}

/* Bloco de cada família */
.inicio-familia {
  margin-bottom: 12px;
}

/* Nomes dos pais — Playfair Display, destaque */
.inicio-pais-nome {
  font-family: var(--font-title);  /* Playfair Display */
  font-size: clamp(1rem, 2.2vw, 1.18rem);
  font-weight: 400;
  color: #1a1a1a;
  line-height: 1.55;
  letter-spacing: 0.3px;
}

/* "pais da noiva Rafaela" */
.inicio-pais-role {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: #4a4a4a;
  margin-top: 6px;
  margin-bottom: 28px;
  letter-spacing: 0.3px;
}
.inicio-pais-role em {
  font-style: italic;
  color: #1a1a1a;
}

/* "e" separador entre famílias */
.inicio-e {
  font-family: var(--font-body);
  font-size: 1rem;
  font-style: italic;
  color: #6a6a6a;
  margin-bottom: 28px;
}

/* Parágrafo principal do convite */
.inicio-convidam {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2vw, 1.12rem);
  color: #1a1a1a;
  line-height: 1.95;
  margin-top: 36px;
  letter-spacing: 0.2px;
}
.inicio-convidam strong {
  font-weight: 600;
  color: #000000;
}

@media (max-width: 600px) {
  .inicio-section { padding: 72px 24px; }
  .inicio-pais-nome { font-size: 0.98rem; }
  .inicio-convidam  { font-size: 1rem; }
}

/* ═══════════════════════════════════════════════════════════
   BOAS-VINDAS — invitation-style white section with birds
   ═══════════════════════════════════════════════════════════ */
.bv-section {
  position: relative;
  background: var(--white);
  padding: 96px 32px;
  overflow: hidden;
  text-align: center;
}

/* Birds canvas — sits on top, pointer-events off so text is clickable */
.bv-birds {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* Inner content sits above canvas (z-index 3) */
.bv-inner {
  position: relative;
  z-index: 3;
  max-width: 680px;
  margin: 0 auto;
}

/* Ornamental rules */
.bv-rule-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 auto 36px;
  max-width: 380px;
}
.bv-rule-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.5), transparent);
}
.bv-rule-glyph {
  font-size: 1.1rem;
  color: var(--gold);
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.8;
}

/* Opening phrase — Great Vibes, generous size */
.bv-opening {
  font-family: var(--font-script);
  font-size: clamp(1.9rem, 4.5vw, 2.8rem);
  color: var(--text);
  line-height: 1.45;
  margin-bottom: 32px;
}

/* Central gem separator */
.bv-gem {
  font-size: 0.7rem;
  color: var(--gold);
  letter-spacing: 12px;
  margin-bottom: 36px;
}

/* Parents block */
.bv-parents {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.bv-parent-pair { flex: 1; min-width: 180px; }
.bv-parent-names {
  font-family: var(--font-script);
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 4px;
}
.bv-parent-role {
  font-family: var(--font-ui);
  font-size: 0.62rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold-dark);
}
.bv-parent-sep {
  font-size: 0.65rem;
  color: var(--gold-light);
  flex-shrink: 0;
  align-self: center;
}

/* "convidam" — hero verb in script */
.bv-convidam {
  font-family: var(--font-script);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  color: var(--green-deep);
  margin-bottom: 18px;
  line-height: 1;
}

/* Body paragraph */
.bv-body {
  font-family: var(--font-body);
  font-size: 1.12rem;
  color: var(--text-muted);
  line-height: 1.82;
  margin-bottom: 32px;
}
.bv-body em {
  font-style: italic;
  color: var(--green-deep);
  font-weight: 500;
}

/* Timing strip */
.bv-timing {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 36px;
  padding: 14px 28px;
  border: 1px solid var(--border);
  border-radius: 1px;
}
.bv-timing strong { color: var(--text); font-weight: 600; }
.bv-timing-sep { color: var(--gold-light); font-size: 1rem; }

@media (max-width: 640px) {
  .bv-section  { padding: 72px 24px; }
  .bv-parents  { flex-direction: column; gap: 16px; }
  .bv-parent-sep { display: none; }
  .bv-timing   { flex-direction: column; gap: 8px; text-align: center; }
}

/* ─── PHOTO FRAMES ─── */
.photo-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
}
.photo-frame::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 1px;
  pointer-events: none;
  z-index: 2;
}
.photo-watercolor {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88) contrast(0.95) brightness(1.01);
  transition: filter 0.5s ease, transform 0.6s ease;
  display: block;
}
.photo-frame:hover .photo-watercolor {
  filter: saturate(1) contrast(1) brightness(1.03);
  transform: scale(1.025);
}
.photo-frame-tall { aspect-ratio: 3 / 4; }

/* ═══════════════════════════════════════════════════════════
   NOSSA HISTÓRIA
   ═══════════════════════════════════════════════════════════ */
#nossa-historia { text-align: center; }
.historia-text {
  max-width: 560px;
  margin: 0 auto 56px;
  font-size: 1.15rem;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.85;
}
.photo-gallery {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 20px;
  max-height: 580px;
}
.gallery-item { overflow: hidden; border-radius: var(--radius); }
.gallery-large { height: 100%; }
.gallery-col { display: flex; flex-direction: column; gap: 20px; }
.gallery-col .gallery-item { flex: 1; }
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88) contrast(0.95) brightness(1.01);
  transition: transform 0.7s ease, filter 0.5s ease;
}
.gallery-item:hover img {
  transform: scale(1.04);
  filter: saturate(1) contrast(1);
}

/* ═══════════════════════════════════════════════════════════
   COUNTDOWN
   ═══════════════════════════════════════════════════════════ */
#contagem { text-align: center; }
.countdown-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 44px;
  flex-wrap: wrap;
}
.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
}
.countdown-number {
  font-family: var(--font-title);
  font-size: clamp(2.4rem, 7vw, 4.5rem);
  font-weight: 300;
  color: var(--text);
  line-height: 1;
  display: block;
  min-width: 80px;
  text-align: center;
}
.countdown-label {
  font-family: var(--font-ui);
  font-size: 0.67rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 8px;
}
.countdown-sep {
  font-family: var(--font-title);
  font-size: 2.5rem;
  color: var(--gold-light);
  padding-bottom: 28px;
  font-weight: 300;
}

/* ═══════════════════════════════════════════════════════════
   PHOTO SECTION — cerimônia & recepção
   Fundo fotográfico + caixa translúcida centralizada
   Tipografia: Playfair Display (mesma do hero-date)
   ═══════════════════════════════════════════════════════════ */
.ps-section {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 32px;
  overflow: hidden;
}

/* Foto de fundo */
.ps-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Overlay escuro suave para não apagar a foto */
.ps-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 12, 8, 0.38);
  pointer-events: none;
}

/* Caixa translúcida — glassmorphism sutil */
.ps-box {
  position: relative;
  z-index: 1;
  max-width: 560px;
  width: 100%;
  padding: 52px 56px;
  text-align: center;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
}

/* Sombra de texto compartilhada — garante leitura sobre qualquer foto */
.ps-title, .ps-main, .ps-complement, .ps-address, .ps-map-btn {
  text-shadow: 0 1px 8px rgba(0,0,0,0.75), 0 2px 24px rgba(0,0,0,0.55);
}

/* Título */
.ps-title {
  font-family: var(--font-title);
  font-size: clamp(1.9rem, 4.5vw, 2.8rem);
  font-weight: 400;
  letter-spacing: 7px;
  color: #ffffff;
  text-transform: uppercase;
  margin-bottom: 20px;
  line-height: 1.2;
}

/* Régua dourada */
.ps-rule {
  width: 50px;
  height: 1px;
  background: rgba(232, 213, 163, 0.85);
  margin: 0 auto 28px;
  box-shadow: 0 0 6px rgba(0,0,0,0.4);
}

/* Texto principal */
.ps-main {
  font-family: var(--font-title);
  font-size: 1.05rem;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.82;
  margin-bottom: 22px;
  letter-spacing: 0.3px;
}

/* Texto complementar */
.ps-complement {
  font-family: var(--font-title);
  font-size: 0.97rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.90);
  line-height: 1.78;
  margin-bottom: 26px;
  letter-spacing: 0.2px;
}

/* Endereço */
.ps-address {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(232, 213, 163, 1);
  line-height: 1.8;
  margin-bottom: 30px;
}

/* Botão Ver no mapa */
.ps-map-btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.60);
  padding: 10px 24px;
  border-radius: 1px;
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.2s;
}
.ps-map-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.90);
  transform: translateY(-2px);
}

@media (max-width: 600px) {
  .ps-section { padding: 60px 20px; min-height: 100svh; }
  .ps-box     { padding: 38px 28px; }
}

/* ═══════════════════════════════════════════════════════════
   CERIMÔNIA HERO (legado — mantido para não quebrar nada)
   ═══════════════════════════════════════════════════════════ */
.cerimonia-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 32px;
  overflow: hidden;
}

/* Photo layer with Ken Burns slow zoom */
.cerimonia-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  animation: cerKenBurns 22s ease-in-out alternate infinite;
  will-change: transform;
}
@keyframes cerKenBurns {
  from { transform: scale(1.0); }
  to   { transform: scale(1.07); }
}

/* Gradient overlay: nearly transparent at top, warm-dark at bottom */
.cerimonia-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(253,250,245,0.08) 0%, transparent 55%),
    linear-gradient(
      180deg,
      rgba(20,16,12,0.14) 0%,
      rgba(20,16,12,0.10) 28%,
      rgba(20,16,12,0.32) 60%,
      rgba(20,16,12,0.58) 100%
    );
  pointer-events: none;
  z-index: 1;
}

/* ─── Invitation card ─── */
.cerimonia-card {
  position: relative;
  z-index: 2;
  max-width: 540px;
  width: 100%;
  padding: 50px 52px 42px;
  text-align: center;
  background: rgba(253,250,245,0.93);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(201,168,76,0.38);
  border-top: 3px solid var(--gold);
  border-radius: 1px;
  box-shadow:
    0 36px 90px rgba(20,16,12,0.32),
    0 2px 0 rgba(255,255,255,0.5) inset,
    0 -1px 0 rgba(201,168,76,0.15) inset;
}

/* ─── Ornament rows ─── */
.cer-orn-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.cer-orn-bot { margin-top: 26px; margin-bottom: 0; }
.cer-orn-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.55), transparent);
}
.cer-orn-glyph {
  font-size: 1.15rem;
  color: var(--gold);
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.85;
}

/* ─── Tag & title ─── */
.cer-supertag {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.63rem;
  letter-spacing: 5.5px;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 14px;
}
.cer-title {
  font-family: var(--font-script);
  font-size: clamp(2.6rem, 5.5vw, 3.8rem);
  font-weight: 400;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

/* ─── Mid rule ─── */
.cer-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0 20px;
}
.cer-rule-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}
.cer-rule-gem {
  font-size: 0.55rem;
  color: var(--gold);
  flex-shrink: 0;
}

/* ─── Body copy ─── */
.cer-body {
  font-family: var(--font-body);
  font-size: 1.08rem;
  color: var(--text);
  line-height: 1.80;
  margin-bottom: 16px;
}
.cer-body em {
  font-style: italic;
  color: var(--green-deep);
  font-weight: 500;
}

/* ─── Timing ─── */
.cer-timing {
  font-family: var(--font-body);
  font-size: 0.96rem;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.72;
  margin-bottom: 22px;
}
.cer-timing strong {
  font-style: normal;
  font-weight: 600;
  color: var(--text);
}

/* ─── Address ─── */
.cer-address {
  font-style: normal;
  display: inline-flex;
  align-items: flex-start;
  gap: 7px;
  font-family: var(--font-ui);
  font-size: 0.76rem;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 30px;
  text-align: left;
}
.cer-pin {
  width: 15px;
  height: 15px;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 1px;
}

/* ─── Buttons ─── */
.cer-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.btn-cer {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 20px;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  border-radius: 1px;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform 0.2s, box-shadow 0.2s;
}
.btn-cer svg { width: 13px; height: 13px; flex-shrink: 0; }

.btn-cer-gold {
  background: var(--gold);
  color: var(--text);
  border: 1.5px solid var(--gold);
  box-shadow: 0 4px 18px rgba(201,168,76,0.30);
}
.btn-cer-gold:hover {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201,168,76,0.38);
}
.btn-cer-outline {
  background: transparent;
  color: var(--green-deep);
  border: 1.5px solid var(--green);
}
.btn-cer-outline:hover {
  background: var(--green-deep);
  border-color: var(--green-deep);
  color: var(--white);
  transform: translateY(-2px);
}

@media (max-width: 640px) {
  .cerimonia-hero { padding: 56px 20px; min-height: 100svh; }
  .cerimonia-card { padding: 36px 26px 32px; }
  .cer-buttons    { flex-direction: column; align-items: stretch; }
  .btn-cer        { justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════
   CERIMÔNIA & RECEPÇÃO
   ═══════════════════════════════════════════════════════════ */
.event-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.event-layout-reverse .event-photo { order: 2; }
.event-layout-reverse .event-info  { order: 1; }

.event-detail {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 28px;
  padding: 20px;
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: background var(--transition);
}
.event-detail:hover { background: rgba(255,255,255,0.9); }
.detail-icon { font-size: 1.3rem; margin-top: 2px; flex-shrink: 0; }
.detail-label {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}
.detail-value {
  font-size: 1rem;
  color: var(--text);
  font-weight: 500;
  line-height: 1.5;
}
.detail-sub {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.6;
}
.event-note {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 28px;
  font-style: italic;
}

/* ─── BUTTONS ─── */
.btn-location {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px;
  border: 1.5px solid var(--green);
  color: var(--green-deep);
  font-family: var(--font-ui);
  font-size: 0.76rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 2px;
  transition: background var(--transition), color var(--transition), transform 0.2s;
}
.btn-location:hover {
  background: var(--green-deep);
  color: var(--white);
  transform: translateY(-2px);
}
.btn-primary {
  display: inline-block;
  padding: 13px 32px;
  background: var(--green-deep);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  border-radius: 2px;
  border: none;
  cursor: pointer;
  transition: background var(--transition), transform 0.2s, box-shadow 0.2s;
}
.btn-primary:hover {
  background: var(--green);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(61,92,54,0.25);
}
.btn-full { width: 100%; text-align: center; }
.btn-gold {
  background: var(--gold-dark);
}
.btn-gold:hover { background: var(--gold); }

/* ═══════════════════════════════════════════════════════════
   TIMELINE
   ═══════════════════════════════════════════════════════════ */
#timeline { text-align: center; }
.timeline {
  max-width: 640px;
  margin: 0 auto;
  position: relative;
  padding: 20px 0;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, var(--gold-light) 15%, var(--gold-light) 85%, transparent 100%);
  transform: translateX(-50%);
}
.timeline-item {
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  gap: 20px;
  align-items: center;
  margin-bottom: 32px;
}
.timeline-item:nth-child(odd)  .timeline-time { text-align: right; }
.timeline-item:nth-child(odd)  .timeline-text { text-align: left; }
.timeline-item:nth-child(even) .timeline-time { text-align: left; grid-column: 3; grid-row: 1; }
.timeline-item:nth-child(even) .timeline-dot  { grid-column: 2; grid-row: 1; }
.timeline-item:nth-child(even) .timeline-text { text-align: right; grid-column: 1; grid-row: 1; }
.timeline-time {
  font-family: var(--font-title);
  font-size: 1.2rem;
  color: var(--gold-dark);
  font-weight: 400;
}
.timeline-dot {
  width: 14px;
  height: 14px;
  background: var(--gold);
  border-radius: 50%;
  justify-self: center;
  box-shadow: 0 0 0 4px var(--gold-pale), 0 0 0 5px var(--gold-light);
  transition: transform 0.3s ease;
}
.timeline-item:hover .timeline-dot { transform: scale(1.3); }
.timeline-text strong {
  display: block;
  font-family: var(--font-title);
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 2px;
}
.timeline-text p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════
   DRESS CODE — foto de fundo, caixas transparentes
   ═══════════════════════════════════════════════════════════ */
.dc-section {
  position: relative;
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 40px;
  overflow: hidden;
  gap: 48px;
}

.dc-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* sombra de texto base — garante leitura sobre qualquer tom de foto */
.dc-title, .dc-subtitle, .dc-card-title, .dc-card-text, .dc-card-icon {
  text-shadow: 0 1px 8px rgba(0,0,0,0.80), 0 2px 28px rgba(0,0,0,0.60);
}

/* ── Cabeçalho central ── */
.dc-header {
  position: relative;
  z-index: 1;
  text-align: center;
}
.dc-title {
  font-family: var(--font-title);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 400;
  letter-spacing: 7px;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 16px;
  line-height: 1.2;
}
.dc-rule {
  width: 50px;
  height: 1px;
  background: rgba(232,213,163,0.85);
  margin: 0 auto 16px;
  box-shadow: 0 0 6px rgba(0,0,0,0.4);
}
.dc-subtitle {
  font-family: var(--font-title);
  font-size: 1rem;
  font-style: italic;
  color: rgba(255,255,255,0.90);
  letter-spacing: 0.3px;
}

/* ── Linha das duas caixas ── */
.dc-cards {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 60px;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: 860px;
}

/* ── Cada caixa — totalmente transparente ── */
.dc-card {
  flex: 1;
  max-width: 340px;
  text-align: center;
  background: transparent;
  border: none;
}
.dc-card-icon {
  font-size: 2.2rem;
  margin-bottom: 12px;
  display: block;
}
.dc-card-title {
  font-family: var(--font-title);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 400;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 14px;
  line-height: 1.2;
}
.dc-card-rule {
  width: 36px;
  height: 1px;
  background: rgba(232,213,163,0.85);
  margin: 0 auto 18px;
  box-shadow: 0 0 6px rgba(0,0,0,0.4);
}
.dc-card-text {
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 400;
  color: rgba(255,255,255,0.93);
  line-height: 1.85;
  letter-spacing: 0.2px;
}

@media (max-width: 640px) {
  .dc-section { padding: 60px 24px; gap: 36px; min-height: 100svh; }
  .dc-cards   { flex-direction: column; align-items: center; gap: 40px; }
  .dc-card    { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   DRESS CODE (legado — não usado)
   ═══════════════════════════════════════════════════════════ */
.dresscode-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.dresscode-type {
  font-family: var(--font-title);
  font-size: 1.6rem;
  color: var(--text);
  margin-bottom: 24px;
  font-style: italic;
}
.dresscode-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}
.dresscode-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.dresscode-icon { font-size: 1.5rem; flex-shrink: 0; }
.dresscode-item strong { display: block; font-family: var(--font-title); font-size: 1rem; margin-bottom: 2px; }
.dresscode-item p { font-size: 0.9rem; color: var(--text-muted); }
.dresscode-note {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.7;
  padding: 16px;
  border-left: 3px solid var(--gold-light);
  background: rgba(232,213,163,0.12);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* ═══════════════════════════════════════════════════════════
   PRESENTES
   ═══════════════════════════════════════════════════════════ */
#presentes { text-align: center; }
.gifts-intro {
  max-width: 520px;
  margin: 0 auto 36px;
  font-size: 1.1rem;
  color: var(--text-muted);
  line-height: 1.8;
  font-style: italic;
}

/* Category filter */
.gifts-filter {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 44px;
}
.filter-btn {
  padding: 7px 18px;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 1.5px solid var(--border);
  border-radius: 2px;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  transition: all var(--transition);
}
.filter-btn:hover, .filter-btn.active {
  border-color: var(--green);
  color: var(--green-deep);
  background: rgba(92,122,82,0.07);
}

/* Gifts grid */
.gifts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
  text-align: left;
  margin-bottom: 72px;
}
.gift-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease, opacity 0.3s ease;
  display: flex;
  flex-direction: column;
}
.gift-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 48px rgba(42,37,34,0.12);
}
.gift-card.selected-card {
  opacity: 0.6;
  pointer-events: none;
}
.gift-card-img {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  position: relative;
  overflow: hidden;
}
.gift-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}
.gift-card-body {
  padding: 16px 18px 12px;
  flex: 1;
}
.gift-category {
  font-family: var(--font-ui);
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 6px;
}
.gift-name {
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 8px;
}
.gift-price {
  font-family: var(--font-title);
  font-size: 1.15rem;
  color: var(--green-deep);
  font-weight: 400;
}
.gift-card-footer {
  padding: 12px 18px 16px;
  border-top: 1px solid rgba(201,168,76,0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.btn-gift {
  flex: 1;
  padding: 9px 14px;
  background: var(--green-deep);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 2px;
  transition: background 0.3s, transform 0.2s;
  text-align: center;
}
.btn-gift:hover { background: var(--green); transform: translateY(-1px); }
.gift-status-badge {
  font-size: 0.68rem;
  font-family: var(--font-ui);
  color: var(--text-muted);
  text-align: right;
  line-height: 1.3;
  flex-shrink: 0;
}
.gift-status-badge.reserved {
  color: var(--gold-dark);
  font-weight: bold;
}

/* Category color palettes */
.gift-cat-cozinha    { background: linear-gradient(135deg, #FFF8E8 0%, #FFF0CC 100%); }
.gift-cat-quarto     { background: linear-gradient(135deg, #FFF0F3 0%, #FFE4EC 100%); }
.gift-cat-sala       { background: linear-gradient(135deg, #EFF9EF 0%, #E0F2E0 100%); }
.gift-cat-banheiro   { background: linear-gradient(135deg, #EFF7FF 0%, #DCEEFF 100%); }
.gift-cat-bebe       { background: linear-gradient(135deg, #FFF5EE 0%, #FFE8D9 100%); }
.gift-cat-lavanderia { background: linear-gradient(135deg, #F3F0FF 0%, #E8E0FF 100%); }
.gift-cat-homeoffice { background: linear-gradient(135deg, #F0F5F9 0%, #E0EBF5 100%); }
.gift-cat-jantar     { background: linear-gradient(135deg, #EAF5F0 0%, #D9EEE7 100%); }
.gift-cat-organiz    { background: linear-gradient(135deg, #FBF8EE 0%, #F5F0D8 100%); }
.gift-cat-default    { background: linear-gradient(135deg, #F9F6F0 0%, #F2EDDF 100%); }

/* Pix section */
.pix-section {
  border: 1.5px solid var(--border);
  border-radius: 3px;
  background: linear-gradient(135deg, rgba(201,168,76,0.05) 0%, rgba(92,122,82,0.05) 100%);
  padding: 48px;
}
.pix-content {
  display: flex;
  align-items: center;
  gap: 60px;
  justify-content: center;
}
.pix-text { flex: 1; max-width: 400px; }
.pix-text h3 {
  font-family: var(--font-title);
  font-size: 1.6rem;
  margin-bottom: 12px;
  font-weight: 400;
  font-style: italic;
}
.pix-text p { font-size: 1rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 24px; }
.pix-qr { text-align: center; flex-shrink: 0; }
.qr-image {
  width: 130px;
  height: 130px;
  object-fit: contain;
  border: 6px solid var(--white);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius);
  margin: 0 auto 10px;
}
.pix-qr p {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════
   RSVP / CONFIRMAÇÃO
   ═══════════════════════════════════════════════════════════ */
.rsvp-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}
.rsvp-text {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 16px;
}
.rsvp-text strong { color: var(--text); }
.rsvp-photo { margin-top: 36px; }

/* Form styles */
.rsvp-form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 36px;
  box-shadow: var(--shadow-card);
}
.rsvp-form-card h3 {
  font-family: var(--font-title);
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: 28px;
  color: var(--text);
  font-style: italic;
}
.form-group {
  margin-bottom: 20px;
}
.form-group label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 7px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 11px 14px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text);
  background: var(--cream);
  border: 1.5px solid rgba(201,168,76,0.3);
  border-radius: 2px;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
  appearance: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(92,122,82,0.1);
}
.form-group textarea { resize: vertical; min-height: 80px; line-height: 1.6; }
/* ─── Caixas de confirmação (sim/não) ─── */
.rsvp-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.rsvp-choice {
  display: block;
  padding: 14px 20px;
  text-align: center;
  cursor: pointer;
  border: 2px solid #d0d0d0;
  border-radius: 3px;
  background: #f7f7f7;
  color: #666666;
  font-family: var(--font-ui);
  font-size: 0.83rem;
  letter-spacing: 0.5px;
  transition: background 0.22s, border-color 0.22s, color 0.22s;
  user-select: none;
}
.rsvp-choice input[type="radio"] { display: none; }
.rsvp-choice.confirmed {
  background: #2e7d32;
  border-color: #2e7d32;
  color: #ffffff;
  font-weight: 600;
}
.rsvp-choice.declined {
  background: #c62828;
  border-color: #c62828;
  color: #ffffff;
  font-weight: 600;
}

.radio-group { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.radio-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 1rem;
  color: var(--text);
}
.radio-label input[type="radio"] { accent-color: var(--green); }

/* RSVP Success */
.rsvp-success {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 48px 36px;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.rsvp-success.hidden { display: none; }
.success-icon { font-size: 3rem; margin-bottom: 16px; }
.rsvp-success h3 {
  font-family: var(--font-script);
  font-size: 2rem;
  color: var(--green-deep);
  margin-bottom: 12px;
}
.rsvp-success p { font-size: 1rem; color: var(--text-muted); margin-bottom: 8px; }
.rsvp-success p strong { color: var(--text); }
#rsvp-qr-container { margin-top: 24px; display: flex; justify-content: center; }
#rsvp-qr-container canvas { border: 6px solid var(--white); box-shadow: var(--shadow-card); }

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
#footer {
  background: var(--text);
  color: rgba(255,255,255,0.75);
  text-align: center;
  padding: 64px 32px;
}
.footer-ornament {
  color: var(--gold);
  letter-spacing: 16px;
  font-size: 0.8rem;
  margin-bottom: 24px;
}
.footer-names {
  font-family: var(--font-script);
  font-size: 2.8rem;
  color: var(--white);
  margin-bottom: 8px;
}
.footer-names span { color: var(--gold); }
.footer-date {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 24px;
}
.footer-quote {
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-style: italic;
  color: rgba(255,255,255,0.5);
  margin-bottom: 36px;
}
.footer-divider {
  width: 60px;
  height: 1px;
  background: rgba(201,168,76,0.35);
  margin: 0 auto 20px;
}
.footer-copy {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.3);
}

/* ═══════════════════════════════════════════════════════════
   PHOTO BACKGROUND SECTIONS
   ═══════════════════════════════════════════════════════════ */
.section-photo-bg {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.section-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(20,16,12,0.65) 0%, rgba(30,24,18,0.58) 100%);
  pointer-events: none;
  z-index: 0;
}
.section-photo-bg .container { position: relative; z-index: 1; }
.section-photo-bg .section-tag    { color: var(--gold-light); }
.section-photo-bg .section-title  { color: var(--cream); }
.section-photo-bg .ornament-divider { color: var(--gold-light); }
.section-photo-bg .event-detail {
  background: rgba(20,16,12,0.42);
  border-color: rgba(201,168,76,0.38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.section-photo-bg .event-detail:hover { background: rgba(20,16,12,0.60); }
.section-photo-bg .detail-label  { color: var(--gold-light); }
.section-photo-bg .detail-value  { color: var(--cream); }
.section-photo-bg .detail-sub    { color: rgba(253,250,245,0.78); }
.section-photo-bg .event-note    { color: rgba(253,250,245,0.84); }
.section-photo-bg .btn-location  { border-color: var(--gold-light); color: var(--gold-light); }
.section-photo-bg .btn-location:hover { background: var(--gold); color: var(--text); border-color: var(--gold); }
.section-photo-bg .dresscode-type { color: var(--gold-light); }
.section-photo-bg .dresscode-item {
  background: rgba(20,16,12,0.42);
  border-color: rgba(201,168,76,0.38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.section-photo-bg .dresscode-item strong { color: var(--cream); }
.section-photo-bg .dresscode-item p      { color: rgba(253,250,245,0.82); }
.section-photo-bg .dresscode-note {
  color: rgba(253,250,245,0.80);
  background: rgba(201,168,76,0.14);
  border-left-color: var(--gold);
}

/* Centered info column used inside photo-bg sections */
.event-info-centered,
.dresscode-centered {
  max-width: 580px;
  margin: 0 auto;
  text-align: center;
}
.event-info-centered .event-detail,
.dresscode-centered  .dresscode-details,
.dresscode-centered  .dresscode-note  { text-align: left; }

/* ─── INVITE IMAGE LIGHTBOX ─── */
#convite-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(20,16,12,0.92);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  animation: lbFadeIn 0.3s ease;
}
#convite-lightbox.open { display: flex; }
@keyframes lbFadeIn { from { opacity: 0; } to { opacity: 1; } }
#convite-lightbox img {
  max-width: min(90vw, 520px);
  max-height: 92vh;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  cursor: default;
}
#convite-lightbox-close {
  position: absolute;
  top: 18px;
  right: 24px;
  color: var(--cream);
  font-size: 2.2rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.72;
  transition: opacity 0.2s;
  font-family: var(--font-ui);
  font-weight: 300;
}
#convite-lightbox-close:hover { opacity: 1; }

/* ─── UTILITY ─── */
.hidden { display: none !important; }
.text-center { text-align: center; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .section { padding: 72px 0; }
  .welcome-layout,
  .event-layout,
  .dresscode-layout,
  .rsvp-layout,
  .pix-content { grid-template-columns: 1fr; gap: 40px; }

  .event-layout-reverse .event-photo { order: unset; }
  .event-layout-reverse .event-info  { order: unset; }

  .families-block { flex-direction: column; gap: 24px; text-align: center; }
  .family-separator { display: none; }

  .photo-gallery { grid-template-columns: 1fr; max-height: none; }
  .gallery-col { flex-direction: row; }
  .gallery-large { height: 320px; }
  .gallery-col .gallery-item { height: 180px; }

  .timeline::before { left: 20px; }
  .timeline-item { grid-template-columns: 40px 1fr; gap: 16px; }
  .timeline-item:nth-child(even) .timeline-time { grid-column: auto; grid-row: auto; }
  .timeline-item:nth-child(even) .timeline-dot  { grid-column: auto; }
  .timeline-item:nth-child(even) .timeline-text { grid-column: auto; text-align: left; }
  .timeline-time { display: none; }
  .timeline-text { text-align: left !important; }

  .pix-section { padding: 32px 24px; }
  .pix-qr { order: -1; }

  .nav-links { display: none; }
  .nav-mobile-btn { display: block; }
}

@media (max-width: 600px) {
  /* Envelope: constrain height on short mobile screens */
  #envelope {
    width: clamp(180px, 58vw, 280px);
  }
  .container { padding: 0 20px; }
  .section { padding: 56px 0; }
  .section-title { font-size: 1.7rem; }

  .hero-name { font-size: 2.8rem; }
  .hero-amp  { font-size: 2rem; }

  .countdown-display { gap: 12px; }
  .countdown-number  { font-size: 2.2rem; min-width: 56px; }
  .countdown-sep     { font-size: 1.8rem; padding-bottom: 20px; }

  .gifts-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .gift-card-img { height: 120px; font-size: 2.2rem; }
  .gift-name { font-size: 0.88rem; }
  .gift-price { font-size: 1rem; }

  .rsvp-form-card { padding: 24px 20px; }

  .timeline-dot { width: 12px; height: 12px; }

  .nav-inner { padding: 0 20px; }
}

@media (max-width: 400px) {
  .gifts-grid { grid-template-columns: 1fr; }
}