/* ========================================
   XV CAMILA ZABALA — 11 de Julio 2026
   styles.css — Diseño elegante premium (tema crema)
   ======================================== */

/* === VARIABLES === */
:root {
  /* Tema claro: crema (#f0e9e1) + blanco con acentos dorados.
     Conservamos los nombres semánticos originales:
       --petroleum      = color de fondo principal (antes oscuro, ahora crema)
       --petroleum-light= superficies elevadas / tarjetas (blanco)
       --champagne      = color de TEXTO sobre el fondo (antes claro, ahora café cálido)
  */
  --petroleum: #f5f0ec;
  --petroleum-light: #ffffff;
  --champagne: #6b5644;
  --champagne-dark: #8a7560;
  /* "Gold" reaprovechado como tono vino-rosado profundo: contrasta sobre
     crema y combina con el rosa de los detalles (antes era dorado #b08d4f,
     de bajo contraste sobre el fondo claro). */
  --gold: #9c4a57;
  --gold-light: #b85f6c;

  /* Acentos rosados — toque juvenil para los XV */
  --rose: #de9097;
  --rose-light: #f0c2c6;
  --rose-deep: #c96e77;
  --rose-soft: #f9e6e8;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --safe-top: env(safe-area-inset-top, 0);
  --safe-bottom: env(safe-area-inset-bottom, 0);
  --safe-left: env(safe-area-inset-left, 0);
  --safe-right: env(safe-area-inset-right, 0);
}

/* === RESET & BASE === */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }
@media (max-width: 640px) { html { font-size: clamp(14px, 4vw, 16px); } }
body { padding-left: var(--safe-left); padding-right: var(--safe-right); margin: 0; overflow-x: hidden; }
/* Gestos táctiles — permite scroll vertical en el body
   Los contenedores horizontales/verticales anidados declaran su propio touch-action */
@media (max-width: 768px) {
  /* El track horizontal del timeline */
  .tl-scroll-track { touch-action: pan-x pinch-zoom; }
  /* El track vertical de la galería */
  .gc-track { touch-action: pan-y pinch-zoom; }
}
::selection { background: rgba(201, 162, 39, 0.3); color: var(--petroleum); }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 4px; }
input, textarea, button, a, select { -webkit-tap-highlight-color: transparent; }

/* === TYPOGRAPHY === */
.font-display { font-family: 'Cormorant Garamond', Georgia, serif; }
/* Script caligráfico para nombres/títulos destacados (como la captura) */
.font-script { font-family: 'Pinyon Script', 'Great Vibes', cursive; font-weight: 400; }


/* === SEAMLESS SECTION TRANSITIONS === */
.section-dark {
  background: var(--petroleum);
  color: var(--champagne);
  position: relative;
}

/* Subtle radial glow on dark sections */
.section-dark::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(173,131,47,0.3), transparent);
  pointer-events: none;
}

/* === PAGE LOADER === */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--petroleum);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: opacity 1s var(--ease-out-expo), visibility 1s;
  text-align: center;
}
.page-loader.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.08);
  transition: opacity 1.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.6s, transform 2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Floating particles */
.loader-particles { position: absolute; inset: 0; pointer-events: none; }
.particle {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
}
.page-loader.animating .particle {
  animation: particleFloat 4s ease-in-out infinite;
}
.p1 { top: 20%; left: 15%; animation-delay: 0s !important; }
.p2 { top: 70%; left: 80%; animation-delay: 0.7s !important; }
.p3 { top: 40%; left: 90%; animation-delay: 1.4s !important; }
.p4 { top: 80%; left: 25%; animation-delay: 2.1s !important; }
.p5 { top: 10%; left: 60%; animation-delay: 0.4s !important; }
.p6 { top: 55%; left: 10%; animation-delay: 1.8s !important; }
@keyframes particleFloat {
  0%, 100% { opacity: 0; transform: translateY(0) scale(1); }
  20% { opacity: 0.6; }
  50% { opacity: 0.3; transform: translateY(-30px) scale(1.5); }
  80% { opacity: 0.5; }
}

/* Horizontal gold lines */
.loader-line {
  position: absolute;
  left: 50%; height: 1px;
  width: 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transition: width 1.2s var(--ease-out-expo) 0.3s;
  transform: translateX(-50%);
}
.loader-line-top { top: 28%; }
.loader-line-bottom { bottom: 28%; }
@media (max-width: 480px) {
  .loader-line-top { top: 22%; }
  .loader-line-bottom { bottom: 22%; }
}
.page-loader.animating .loader-line { width: min(80%, 500px); }

/* Center content */
.loader-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  z-index: 1;
  width: 100%;
  max-width: 500px;
  padding: 0 1.5rem;
  box-sizing: border-box;
}

/* Overline date */
.loader-overline {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.8s ease 0.2s, transform 0.8s var(--ease-out-expo) 0.2s;
  margin-bottom: 1.25rem;
}
.page-loader.animating .loader-overline { opacity: 0.7; transform: translateY(0); }

/* Names wrapper */
.loader-names-wrap {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
}
@media (max-width: 480px) {
  .loader-names-wrap {
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
  }
  .loader-names-wrap .loader-name {
    font-size: 2.25rem !important;
  }
  .loader-names-wrap .loader-ampersand {
    font-size: 1.75rem !important;
  }
}

.loader-name {
  opacity: 0;
  transition: opacity 1s ease, transform 1s var(--ease-out-expo), filter 1.2s ease;
  filter: blur(10px);
}
.loader-name-left { transform: translateX(40px); }
.loader-name-right { transform: translateX(-40px); }
.page-loader.animating .loader-name-left { opacity: 1; transform: translateX(0); filter: blur(0); }
.page-loader.animating .loader-name-right { opacity: 1; transform: translateX(0); filter: blur(0); transition-delay: 0.4s; }

/* Ampersand */
.loader-ampersand {
  opacity: 0;
  transform: scale(0.5) rotate(-20deg);
  transition: opacity 0.8s ease 0.6s, transform 0.8s var(--ease-out-expo) 0.6s;
}
.page-loader.animating .loader-ampersand { opacity: 1; transform: scale(1) rotate(0); }

/* Rings with draw animation + slow merge */
.loader-rings-container {
  opacity: 0;
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
  transition: opacity 0.6s ease 1s;
}
.page-loader.animating .loader-rings-container { opacity: 1; }

.ring-draw {
  stroke-dasharray: 101;
  stroke-dashoffset: 101;
  transform-origin: center;
}
/* Left ring: draw stroke, then slowly slide right to merge */
.page-loader.animating .ring-left {
  animation: ringDrawLeft 3.5s cubic-bezier(0.25, 0.1, 0.25, 1) 1s forwards;
}
/* Right ring: draw stroke (slightly delayed), then slowly slide left to merge */
.page-loader.animating .ring-right {
  animation: ringDrawRight 3.5s cubic-bezier(0.25, 0.1, 0.25, 1) 1.3s forwards;
}

@keyframes ringDrawLeft {
  0%   { stroke-dashoffset: 101; transform: translateX(0); }
  40%  { stroke-dashoffset: 0;   transform: translateX(0); }
  45%  { stroke-dashoffset: 0;   transform: translateX(0); }
  100% { stroke-dashoffset: 0;   transform: translateX(6px); }
}
@keyframes ringDrawRight {
  0%   { stroke-dashoffset: 101; transform: translateX(0); }
  40%  { stroke-dashoffset: 0;   transform: translateX(0); }
  45%  { stroke-dashoffset: 0;   transform: translateX(0); }
  100% { stroke-dashoffset: 0;   transform: translateX(-6px); }
}

/* ── Corona / tiara animada (temática XV) ── */
.crown-draw {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
}
.page-loader.animating .crown-base {
  animation: crownDraw 1.1s cubic-bezier(0.65,0,0.35,1) 1s forwards;
}
.page-loader.animating .crown-body {
  animation: crownDraw 1.8s cubic-bezier(0.65,0,0.35,1) 1.25s forwards;
}
@keyframes crownDraw {
  to { stroke-dashoffset: 0; }
}

/* Joyas: aparecen con un pop después del trazo */
.crown-gem {
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
  transform-box: fill-box;
}
.page-loader.animating .crown-gem-1 { animation: gemPop 0.5s cubic-bezier(0.34,1.56,0.64,1) 2.4s forwards; }
.page-loader.animating .crown-gem-2 { animation: gemPop 0.5s cubic-bezier(0.34,1.56,0.64,1) 2.6s forwards; }
.page-loader.animating .crown-gem-3 { animation: gemPop 0.5s cubic-bezier(0.34,1.56,0.64,1) 2.8s forwards; }
@keyframes gemPop {
  0%   { opacity: 0; transform: scale(0); }
  70%  { opacity: 1; transform: scale(1.35); }
  100% { opacity: 1; transform: scale(1); }
}

/* Destellos: titilan suavemente */
.crown-sparkles { opacity: 0; }
.page-loader.animating .crown-sparkles {
  animation: sparkleTwinkle 1.6s ease-in-out 3s infinite;
}
@keyframes sparkleTwinkle {
  0%, 100% { opacity: 0; transform: scale(0.8); }
  50%      { opacity: 0.9; transform: scale(1.1); }
}

/* Subtitle */
.loader-subtitle {
  opacity: 0;
  transform: translateY(8px);
  height: 0;
  overflow: hidden;
  transition: opacity 0.8s ease 2.4s, transform 0.8s var(--ease-out-expo) 2.4s, height 0.01s ease 2.4s;
}
.page-loader.animating .loader-subtitle { opacity: 1; transform: translateY(0); height: auto; }

/* ── Enter button ────────────────────────────────────────── */
.loader-enter-btn {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0.85rem 2.8rem;
  background: linear-gradient(135deg, rgba(173,131,47,0.07) 0%, rgba(212,168,75,0.04) 100%);
  border: 1px solid rgba(212,168,75,0.32);
  border-radius: 0.75rem;
  cursor: pointer;
  overflow: hidden;
  /* Entrada animada */
  opacity: 0;
  transform: translateY(18px);
  height: 0;
  margin-top: 0;
  transition:
    opacity 0.9s ease 3s,
    transform 0.9s cubic-bezier(0.16,1,0.3,1) 3s,
    height 0.01s ease 3s,
    margin 0.01s ease 3s,
    background 0.35s,
    border-color 0.35s,
    box-shadow 0.35s;
}
.page-loader.animating .loader-enter-btn {
  opacity: 1;
  transform: translateY(0);
  height: auto;
  margin-top: 2rem;
}

/* Shimmer sweep */
.loader-btn-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(212,168,75,0.18) 50%, transparent 65%);
  background-size: 200% 100%;
  background-position: -100% 0;
  transition: background-position 0s;
}
.loader-enter-btn:hover .loader-btn-shimmer {
  background-position: 200% 0;
  transition: background-position 0.7s ease;
}

.loader-btn-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  white-space: nowrap;
}

.loader-btn-text {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: clamp(1.05rem, 3vw, 1.35rem);
  font-weight: 300;
  font-style: italic;
  color: #fff;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.loader-btn-line {
  display: block;
  width: clamp(20px, 5vw, 36px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,168,75,0.6));
  flex-shrink: 0;
}
.loader-btn-line:last-child {
  background: linear-gradient(90deg, rgba(212,168,75,0.6), transparent);
}

.loader-btn-icon {
  font-size: 0.85rem !important;
  color: rgba(212,168,75,0.5);
  transition: color 0.3s, transform 0.3s;
}

.loader-enter-btn:hover {
  background: linear-gradient(135deg, rgba(173,131,47,0.16) 0%, rgba(212,168,75,0.10) 100%);
  border-color: rgba(212,168,75,0.6);
  box-shadow: 0 0 28px rgba(212,168,75,0.15), inset 0 0 16px rgba(212,168,75,0.05);
}
.loader-enter-btn:hover .loader-btn-icon {
  color: rgba(212,168,75,0.85);
  transform: scale(1.15);
}
.loader-enter-btn:active { transform: scale(0.97); }

@media (max-width: 400px) {
  .loader-enter-btn { padding: 0.85rem 1.5rem 0.95rem; }
  .loader-btn-text { font-size: 0.85rem; }
  .loader-btn-line { width: 16px; }
}

/* === HERO ENTRANCE === */
.hero-content .hero-text-item {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(8px);
  transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1), transform 1.4s cubic-bezier(0.4, 0, 0.2, 1), filter 1.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-content.entered .hero-text-item {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.hero-content.entered .hero-text-item:nth-child(1) { transition-delay: 0.3s; }
.hero-content.entered .hero-text-item:nth-child(2) { transition-delay: 0.6s; }
.hero-content.entered .hero-text-item:nth-child(3) { transition-delay: 0.9s; }
.hero-content.entered .hero-text-item:nth-child(4) { transition-delay: 1.2s; }
.hero-content.entered .hero-text-item:nth-child(5) { transition-delay: 1.5s; }

/* === HERO SLIDESHOW === */
.hero-slide {
  opacity: 0;
  transition: opacity 2s ease-in-out;
  will-change: opacity;
}
.hero-slide.active { opacity: 1; }

/* === SCROLL PROGRESS === */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--champagne));
  z-index: 100;
  transform-origin: left;
  transition: transform 0.1s linear;
}

/* === REVEAL ANIMATIONS — Elegantes con difuminación === */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  filter: blur(6px);
  transition: opacity 1.2s var(--ease-out-expo), transform 1.2s var(--ease-out-expo), filter 1.4s var(--ease-out-expo);
}
.reveal.visible { opacity: 1; transform: translateY(0); filter: blur(0); }

.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  filter: blur(6px);
  transition: opacity 1.2s var(--ease-out-expo), transform 1.2s var(--ease-out-expo), filter 1.4s var(--ease-out-expo);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); filter: blur(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  filter: blur(6px);
  transition: opacity 1.2s var(--ease-out-expo), transform 1.2s var(--ease-out-expo), filter 1.4s var(--ease-out-expo);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); filter: blur(0); }

/* Historia image — blue gradient overlay bottom */
.historia-img-wrap {
  position: relative;
}
.historia-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 25%,
    rgba(70, 46, 44, 0.35) 55%,
    rgba(60, 40, 38, 0.7) 85%,
    rgba(52, 34, 33, 0.85) 100%
  );
  pointer-events: none;
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.90);
  filter: blur(8px);
  transition: opacity 1.2s var(--ease-out-expo), transform 1.2s var(--ease-out-expo), filter 1.4s var(--ease-out-expo);
}
.reveal-scale.visible { opacity: 1; transform: scale(1); filter: blur(0); }

.reveal-blur {
  opacity: 0;
  filter: blur(20px);
  transition: opacity 1.4s var(--ease-out-expo), filter 1.6s var(--ease-out-expo);
}
.reveal-blur.visible { opacity: 1; filter: blur(0); }

.reveal-rotate {
  opacity: 0;
  transform: perspective(800px) rotateX(15deg) translateY(40px);
  filter: blur(6px);
  transition: opacity 1.2s var(--ease-out-expo), transform 1.2s var(--ease-out-expo), filter 1.4s var(--ease-out-expo);
}
.reveal-rotate.visible { opacity: 1; transform: perspective(800px) rotateX(0) translateY(0); filter: blur(0); }

/* Stagger delays — incrementados */
.delay-100 { transition-delay: 150ms; }
.delay-200 { transition-delay: 300ms; }
.delay-300 { transition-delay: 450ms; }
.delay-400 { transition-delay: 600ms; }
.delay-500 { transition-delay: 750ms; }
.delay-600 { transition-delay: 900ms; }
.delay-700 { transition-delay: 1050ms; }
.delay-800 { transition-delay: 1200ms; }

/* Stagger children */
.stagger-children > * {
  opacity: 0;
  transform: translateY(25px);
  filter: blur(4px);
  transition: opacity 1s var(--ease-out-expo), transform 1s var(--ease-out-expo), filter 1.2s var(--ease-out-expo);
}
.stagger-children.visible > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: translateY(0); filter: blur(0); }
.stagger-children.visible > *:nth-child(2) { transition-delay: 120ms; opacity: 1; transform: translateY(0); filter: blur(0); }
.stagger-children.visible > *:nth-child(3) { transition-delay: 240ms; opacity: 1; transform: translateY(0); filter: blur(0); }
.stagger-children.visible > *:nth-child(4) { transition-delay: 360ms; opacity: 1; transform: translateY(0); filter: blur(0); }
.stagger-children.visible > *:nth-child(5) { transition-delay: 480ms; opacity: 1; transform: translateY(0); filter: blur(0); }
.stagger-children.visible > *:nth-child(6) { transition-delay: 600ms; opacity: 1; transform: translateY(0); filter: blur(0); }

/* === GOLD GLOW BUTTON === */
.gold-glow {
  transition: transform 0.3s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
  -webkit-tap-highlight-color: transparent;
}
.gold-glow:hover, .gold-glow:focus-visible {
  box-shadow: 0 0 30px rgba(201, 162, 39, 0.5), 0 0 60px rgba(201, 162, 39, 0.15);
  transform: translateY(-3px);
}
@media (hover: none) {
  .gold-glow:active { transform: scale(0.98); }
}

/* === HEADER === */
.main-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 1rem 1.5rem;
  transition: all 0.4s var(--ease-out-expo);
  padding-top: max(1rem, var(--safe-top));
}
.main-header.scrolled {
  background: rgba(222, 144, 151, 0.95); /* rosa */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 24px rgba(201,110,119,0.25);
}

/* === NAV DOTS (Desktop) === */
.nav-dots a {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(173,131,47,0.35);
  transition: all 0.3s var(--ease-out-expo);
}
.nav-dots a:hover, .nav-dots a.active {
  background: var(--gold);
  transform: scale(1.4);
  box-shadow: 0 0 10px rgba(173,131,47,0.4);
}

/* === HERO === */
.hero-section {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center; overflow: hidden;
}
.hero-bg-overlay {
  position: absolute; inset: 0;
  /* Velo claro sobre la textura de mármol — para que el texto oscuro resalte */
  background: linear-gradient(180deg, rgba(245,240,236,0.55) 0%, rgba(245,240,236,0.35) 45%, rgba(245,240,236,0.85) 100%);
}
.hero-bottom-fade {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 150px;
  background: linear-gradient(to top, var(--petroleum), transparent);
  z-index: 2;
}

/* Section fade — seamless blending between all sections */
.section-fade-bottom::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(to top, var(--petroleum), transparent);
  z-index: 2;
  pointer-events: none;
}


/* Countdown */
.countdown-item {
  text-align: center;
  min-width: 4.5rem;
  padding: 0.75rem;
  background: rgba(173,131,47,0.08);
  border: 1px solid rgba(173,131,47,0.2);
  border-radius: 8px;
  backdrop-filter: blur(4px);
}
@media (max-width: 640px) {
  .countdown-item { min-width: 3.5rem; padding: 0.5rem; }
}

/* === CEREMONY CARDS === */
.ceremony-card {
  position: relative;
  padding: 2rem;
  background: rgba(245,235,224,0.04);
  border: 1px solid rgba(173,131,47,0.3);
  border-radius: 12px;
  text-align: center;
  transition: all 0.5s var(--ease-out-expo);
  overflow: hidden;
}
.ceremony-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity 0.4s;
}
.ceremony-card:hover {
  border-color: rgba(173,131,47,0.6);
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
.ceremony-card:hover::before { opacity: 1; }
@media (min-width: 768px) { .ceremony-card { padding: 3rem; } }

/* === MODERN TIMELINE === */
.tl-modern {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
}
.tl-modern-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold), var(--gold-light), var(--gold), transparent);
  transform: translateX(-50%);
}
@media (max-width: 640px) {
  .tl-modern-line { left: 24px; }
}

.tl-modern-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin-bottom: 3rem;
  opacity: 0;
  transform: translateY(30px);
  filter: blur(4px);
  transition: all 0.8s var(--ease-out-expo);
}
.tl-modern-item.visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.tl-modern-item:last-child { margin-bottom: 0; }

/* Left items */
.tl-modern-item.tl-item-left {
  flex-direction: row-reverse;
  text-align: right;
}
.tl-modern-item.tl-item-left .tl-modern-content {
  padding-right: 2.5rem;
  padding-left: 0;
}

/* Right items */
.tl-modern-item.tl-item-right {
  text-align: left;
}
.tl-modern-item.tl-item-right .tl-modern-content {
  padding-left: 2.5rem;
  padding-right: 0;
}

.tl-modern-content {
  flex: 1;
  padding: 1.25rem 1.5rem;
  background: rgba(245,235,224,0.04);
  border: 1px solid rgba(173,131,47,0.2);
  border-radius: 12px;
  transition: all 0.4s var(--ease-out-expo);
}
.tl-modern-content:hover {
  border-color: rgba(173,131,47,0.5);
  background: rgba(245,235,224,0.07);
  transform: translateY(-2px);
}

.tl-modern-node {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.tl-modern-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--petroleum);
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(173,131,47,0.2);
}
.tl-modern-icon .material-icons {
  color: var(--gold);
  font-size: 20px;
}

.tl-modern-time {
  display: inline-block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 0.25rem;
}
.tl-modern-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  color: var(--champagne);
  margin-bottom: 0.25rem;
}
.tl-modern-desc {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  color: rgba(239,238,236,0.5);
  font-weight: 300;
}

.tl-spacer-half { flex: 1; }

/* Mobile timeline */
@media (max-width: 640px) {
  .tl-modern-item,
  .tl-modern-item.tl-item-left {
    flex-direction: row;
    text-align: left;
  }
  .tl-modern-item .tl-modern-content,
  .tl-modern-item.tl-item-left .tl-modern-content {
    padding-left: 2rem;
    padding-right: 1rem;
    margin-left: 48px;
  }
  .tl-modern-node {
    left: 24px;
  }
  .tl-spacer-half { display: none; }
  .tl-modern-icon { width: 40px; height: 40px; }
  .tl-modern-icon .material-icons { font-size: 18px; }
  .tl-modern-time { font-size: 1.5rem; }
}

/* ============================================================
   GALLERY — Stacked Card Gallery
   ============================================================ */

#galeria {
  overflow: visible;
}

/* ── Escenario: contiene las cartas apiladas ── */
.sg-stage {
  position: relative;
  height: 72vw;
  max-height: 520px;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 3rem;
  /* Overflow visible para que las cartas del abanico no se corten */
  overflow: visible;
  touch-action: pan-y; /* permite scroll vertical, JS maneja swipe horizontal */
}

/* ── Cada carta — foto física con filo dorado ── */
.sg-card {
  position: absolute;
  width: min(85vw, 380px);
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  overflow: hidden;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
  transform-origin: center center;
  will-change: transform;

  /* Borde blanco base + filo dorado via box-shadow exterior */
  border: 5px solid #f8f6f0;
  box-shadow:
    0 0 0 1px rgba(212, 168, 75, 0.6),      /* filo dorado fino */
    0 12px 40px rgba(0, 0, 0, 0.55),         /* sombra profunda */
    0 2px 8px rgba(0, 0, 0, 0.3);            /* sombra cercana */

  z-index: 1;
  user-select: none;
}

/* Carta activa al tope */
.sg-card.sg-top {
  cursor: grab;
  box-shadow:
    0 0 0 1.5px rgba(212, 168, 75, 0.85),
    0 0 18px rgba(212, 168, 75, 0.2),
    0 16px 48px rgba(0, 0, 0, 0.6),
    0 2px 10px rgba(0, 0, 0, 0.35);
}

.sg-card:active { cursor: grabbing; }

.sg-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* ── Grain texture analógica ── */
.sg-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
  mix-blend-mode: overlay;
}

/* Indicador de navegación — puntos debajo del escenario */
.sg-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 0.5rem;
}
.sg-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(173,131,47,0.3);
  transition: background 0.3s ease, transform 0.3s ease;
}
.sg-dot.active {
  background: var(--gold-light);
  transform: scale(1.4);
}
@media (min-width: 769px) { .sg-dots { display: none; } }

/* ── Tablet (≥ 600px): 2 columnas uniformes ── */
@media (min-width: 600px) {
  .sg-stage {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(200px, 28vw, 300px);
    gap: 8px;
    height: auto !important;
    max-height: none !important;
    min-height: unset !important;
    margin-bottom: 1.5rem;
    overflow: visible;
    touch-action: auto;
  }
  .sg-card {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    transform: none !important;
    box-shadow:
      0 0 0 1px rgba(212,168,75,0.4),
      0 6px 20px rgba(0,0,0,0.4);
    border: 3px solid #f8f6f0;
    border-radius: 4px;
    z-index: auto !important;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .sg-card:hover {
    transform: scale(1.015) !important;
    box-shadow:
      0 0 0 1.5px rgba(212,168,75,0.75),
      0 12px 36px rgba(0,0,0,0.5);
  }
  .sg-grain { opacity: 0.04; }
  .sg-dots  { display: none !important; }
}

/* ── Desktop (≥ 900px): 3 columnas × 4 filas, 12 fotos uniformes ── */
@media (min-width: 900px) {
  .sg-stage {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: clamp(220px, 20vw, 320px);
    gap: 10px;
  }
}

/* ── Desktop grande (≥ 1280px) ── */
@media (min-width: 1280px) {
  .sg-stage {
    gap: 12px;
    grid-auto-rows: clamp(240px, 17vw, 340px);
  }
}

/* === LIGHTBOX === */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(62, 44, 42, 0.97);
  backdrop-filter: blur(16px);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s, visibility 0.4s;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 90vw; max-height: 85vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 25px 80px rgba(0,0,0,0.5);
  transform: scale(0.92);
  transition: transform 0.5s var(--ease-out-expo);
}
.lightbox.open img { transform: scale(1); }
.lightbox-close {
  position: absolute; top: 1.5rem; right: 1.5rem;
  width: 48px; height: 48px;
  background: rgba(245,235,224,0.1);
  border: 1px solid rgba(173,131,47,0.4);
  border-radius: 50%;
  color: var(--champagne);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  transition: all 0.3s;
}
.lightbox-close:hover { background: rgba(173,131,47,0.3); color: var(--gold); }
.lightbox-caption {
  position: absolute; bottom: 2rem;
  left: 50%; transform: translateX(-50%);
  color: var(--champagne);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 1.1rem;
  text-align: center; white-space: nowrap;
}
.lightbox-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  background: rgba(245,235,224,0.08);
  border: 1px solid rgba(173,131,47,0.3);
  border-radius: 50%;
  color: var(--champagne);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s;
}
.lightbox-nav:hover { background: rgba(173,131,47,0.3); }
.lightbox-prev { left: 1.5rem; }
.lightbox-next { right: 1.5rem; }

/* === RSVP FORM === */
#rsvp { z-index: 10; position: relative; }
.rsvp-form-container {
  position: relative;
  z-index: 10;
  background: rgba(245,235,224,0.04);
  border: 1px solid rgba(173,131,47,0.25);
  border-radius: 12px;
}
.rsvp-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(239,238,236,0.25);
  color: var(--champagne);
  padding: 0.75rem 0;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s;
  font-family: 'Montserrat', sans-serif;
  min-height: 44px;
}
.rsvp-input:focus { border-color: var(--gold); }
.rsvp-input::placeholder { color: rgba(239,238,236,0.35); }

/* Layout del formulario de deseos */
.wish-form-layout {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.wish-row-name { }
.wish-row-msg  { display: flex; flex-direction: column; gap: 0.5rem; }
.wish-row-btn  { display: flex; justify-content: flex-end; }

.wish-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 0.5rem;
}
.wish-submit-btn {
  padding: 0.85rem 2.5rem;
  background: var(--gold);
  color: var(--petroleum);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}
.wish-submit-btn:hover { background: var(--gold-light); }

/* Textarea de deseos — desktop */
.wish-textarea {
  resize: none;
  min-height: 140px !important;
  max-height: 140px !important;
  line-height: 1.6;
  padding: 0.5rem 0 !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  vertical-align: top;
}

/* Visibilidad desktop/mobile */
.wish-desktop-only { display: block; }
.wish-mobile-only  { display: none !important; }

@media (max-width: 640px) {
  .wish-desktop-only { display: none !important; }
  .wish-mobile-only  { display: flex !important; }
}

/* Trigger mobile — botón que simula el campo */
.wish-mobile-trigger {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0;
  border: none;
  border-bottom: 1px solid rgba(239,238,236,0.25);
  background: transparent;
  color: rgba(239,238,236,0.35);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 0.3s;
}
.wish-mobile-trigger .material-icons {
  color: rgba(212,168,75,0.5);
  font-size: 1.2rem;
  flex-shrink: 0;
}
.wish-mobile-trigger.has-value {
  color: var(--champagne);
  border-color: rgba(212,168,75,0.4);
}
#wishMobilePreview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

/* Modal flotante deseos — solo mobile */
.wish-bottom-sheet {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 9000;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  visibility: hidden;
  pointer-events: none;
}
.wish-bottom-sheet.open {
  visibility: visible;
  pointer-events: auto;
}
.wish-sheet-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 1.1s ease;
}
.wish-bottom-sheet.open .wish-sheet-overlay {
  opacity: 1;
}
.wish-sheet-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  background: linear-gradient(160deg,
    rgba(22,35,56,0.82) 0%,
    rgba(12,20,35,0.88) 100%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(212,168,75,0.22);
  border-radius: 22px;
  padding: 1.5rem 1.5rem 1.75rem;
  opacity: 0;
  transform: scale(0.88) translateY(24px);
  transition: opacity 1.3s cubic-bezier(0.16,1,0.3,1),
              transform 1.3s cubic-bezier(0.16,1,0.3,1);
  box-shadow: 0 32px 80px rgba(0,0,0,0.4),
              inset 0 1px 0 rgba(212,168,75,0.18);
}
.wish-bottom-sheet.open .wish-sheet-panel {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Solo mostrar en mobile */
@media (min-width: 641px) {
  .wish-bottom-sheet { display: none !important; }
}
.wish-sheet-handle {
  width: 36px;
  height: 3px;
  background: rgba(212,168,75,0.3);
  border-radius: 999px;
  margin: 0 auto 1.25rem;
}
.wish-sheet-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-style: italic;
  color: var(--gold);
  text-align: center;
  margin: 0 0 1rem;
}
.wish-sheet-textarea {
  width: 100%;
  min-height: 38vh;
  max-height: 38vh;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(212,168,75,0.2);
  border-radius: 10px;
  color: var(--champagne);
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  padding: 0.85rem;
  outline: none;
  resize: none;
  -webkit-overflow-scrolling: touch;
  transition: border-color 0.3s;
}
.wish-sheet-textarea:focus { border-color: rgba(212,168,75,0.5); }
.wish-sheet-textarea::placeholder { color: rgba(239,238,236,0.3); }
.wish-sheet-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}
.wish-sheet-btn {
  flex: 1;
  padding: 0.8rem;
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s;
}
.wish-sheet-btn-cancel {
  background: rgba(255,255,255,0.06);
  color: rgba(239,238,236,0.6);
  border: 1px solid rgba(239,238,236,0.15);
}
.wish-sheet-btn-confirm {
  background: var(--gold);
  color: var(--petroleum);
  font-weight: 600;
}

/* Autocomplete suggestions — elemento en el body, position fixed */
.guest-suggestions {
  position: fixed;
  z-index: 99999;
  background: #2c1d1d;
  border: 1px solid rgba(173,131,47,0.5);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(173,131,47,0.1);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Tamaño controlado por JS */
}
.guest-suggestions.hidden { display: none !important; }
.guest-suggestion-item {
  padding: 0.9rem 1.1rem;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: rgba(239,238,236,0.9);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-bottom: 1px solid rgba(173,131,47,0.1);
  user-select: none;
  touch-action: manipulation;
}
.guest-suggestion-item:last-child { border-bottom: none; }
.guest-suggestion-item:hover,
.guest-suggestion-item:active {
  background: rgba(173,131,47,0.2);
  color: #fff;
}
.guest-suggestion-item .suggestion-status {
  font-size: 0.7rem;
  color: rgba(173,131,47,0.6);
  margin-top: 0.15rem;
}

.rsvp-textarea {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(239,238,236,0.2);
  border-radius: 6px;
  color: var(--champagne);
  padding: 0.75rem;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.3s;
  font-family: 'Montserrat', sans-serif;
  resize: none;
}
.rsvp-textarea:focus { border-color: var(--gold); }
.rsvp-textarea::placeholder { color: rgba(239,238,236,0.35); }
.rsvp-btn {
  transition: all 0.5s var(--ease-out-expo);
  -webkit-tap-highlight-color: transparent;
}
.rsvp-btn.sending { pointer-events: none; opacity: 0.7; }
.rsvp-btn.sent { background: #166534 !important; color: white !important; transform: scale(1.02); }
.rsvp-btn.error { background: #991b1b !important; color: white !important; }

/* === CAMBIAR INVITADO BTN — subtle pulse loop === */
.rsvp-change-btn {
  animation: changeGlow 3s ease-in-out infinite;
}
@keyframes changeGlow {
  0%, 100% { border-color: rgba(173,131,47,0.2); box-shadow: none; }
  50% { border-color: rgba(173,131,47,0.5); box-shadow: 0 0 12px rgba(173,131,47,0.15); }
}
.rsvp-change-btn:hover {
  animation: none;
}

/* === RSVP PASS CARD + HOLOFOIL === */
.rsvp-pass-card {
  background: linear-gradient(160deg,
    #4a2f2c 0%,
    #3a2422 40%,
    #2c1d1b 100%
  );
  box-shadow:
    0 20px 60px rgba(0,0,0,0.5),
    0 0 0 1px rgba(212,168,75,0.25),
    inset 0 1px 0 rgba(212,168,75,0.3),
    inset 0 -1px 0 rgba(212,168,75,0.15);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  /* Variables CSS controladas por DeviceOrientation */
  --holo-x: 50%;
  --holo-y: 50%;
  --holo-angle: 135deg;
  --holo-opacity: 0;
}
.rsvp-pass-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--gold-light) 30%, #fff8e1 50%, var(--gold-light) 70%, transparent 100%);
  z-index: 3;
}
.rsvp-pass-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.6;
  z-index: 3;
}

/* Marca de agua decorativa */
.pass-watermark {
  position: absolute;
  font-size: 220px;
  color: rgba(212,168,75,0.04);
  right: -30px;
  bottom: -40px;
  line-height: 1;
  pointer-events: none;
  z-index: 0;
  font-family: 'Cormorant Garamond', serif;
  user-select: none;
}

/* Cabecera del pase */
.pass-header {
  position: relative;
  z-index: 2;
  padding: 2rem 1.75rem 1.5rem;
  text-align: center;
  border-bottom: 1px dashed rgba(212,168,75,0.2);
}

.pass-label-corner {
  position: absolute;
  top: 1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(212,168,75,0.35);
}
.pass-label-left { left: 1.25rem; }
.pass-label-right { right: 1.25rem; }

.pass-brand {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(212,168,75,0.7);
  margin: 0 0 0.75rem;
}

.pass-divider-ornament {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 auto 1rem;
  width: 60%;
}
.pass-divider-ornament::before,
.pass-divider-ornament::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,168,75,0.4));
}
.pass-divider-ornament::after {
  background: linear-gradient(90deg, rgba(212,168,75,0.4), transparent);
}
.pass-divider-ornament span {
  font-size: 0.55rem;
  color: rgba(212,168,75,0.6);
}

.pass-guest-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-weight: 300;
  color: #f5f0e8;
  line-height: 1.2;
  margin: 0 0 0.5rem;
  text-shadow: 0 2px 20px rgba(212,168,75,0.15);
}

.pass-companion-tag {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(212,168,75,0.65);
  margin: 0;
}

/* Sección de acompañantes */
.pass-companions {
  position: relative;
  z-index: 2;
  padding: 1.25rem 1.75rem;
  border-bottom: 1px dashed rgba(212,168,75,0.2);
}
.pass-companions-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(212,168,75,0.5);
  text-align: center;
  margin: 0 0 0.85rem;
}
.pass-companions-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.5rem;
}
.pass-companion-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pass-companion-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(212,168,75,0.45);
  flex-shrink: 0;
}
.pass-companion-me .pass-companion-dot {
  background: var(--gold);
}
.pass-companion-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  font-weight: 400;
  color: rgba(239,238,236,0.88);
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}
.pass-companion-me .pass-companion-name {
  color: var(--gold-light);
}
.pass-companion-tipo {
  font-style: normal;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  color: rgba(212,168,75,0.5);
  letter-spacing: 0.05em;
}

/* Pie del pase */
.pass-footer {
  position: relative;
  z-index: 2;
  padding: 1rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: rgba(212,168,75,0.04);
}
.pass-footer-date,
.pass-footer-location {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  color: rgba(239,238,236,0.5);
}
.pass-footer-date .material-icons,
.pass-footer-location .material-icons {
  font-size: 0.9rem;
  color: rgba(212,168,75,0.5);
}
.pass-footer-count {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.85rem;
  background: rgba(212,168,75,0.12);
  border: 1px solid rgba(212,168,75,0.3);
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--gold);
}
.pass-footer-count .material-icons {
  font-size: 0.9rem;
}

/* Capa de brillo holofoil — sigue la orientación del dispositivo */
.holofoil-layer {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: var(--holo-opacity, 0);
  background:
    radial-gradient(
      ellipse 80% 55% at var(--holo-x, 50%) var(--holo-y, 50%),
      rgba(212, 168, 75, 0.28) 0%,
      rgba(173, 131, 47, 0.12) 40%,
      transparent 70%
    ),
    linear-gradient(
      var(--holo-angle, 135deg),
      rgba(255,210,100,0.07) 0%,
      rgba(200,140,255,0.05) 25%,
      rgba(80,200,255,0.05) 50%,
      rgba(80,255,160,0.05) 75%,
      rgba(255,190,80,0.07) 100%
    );
  mix-blend-mode: screen;
  transition: opacity 0.5s ease;
}

/* Punto especular de alta luz — más pequeño y brillante */
.holofoil-specular {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  background: radial-gradient(
    circle 55px at var(--holo-x, 50%) var(--holo-y, 50%),
    rgba(255, 245, 200, 0.22) 0%,
    rgba(212, 168, 75, 0.08) 50%,
    transparent 100%
  );
  mix-blend-mode: screen;
  transition: opacity 0.3s ease;
}

.rsvp-pass-card.holo-active .holofoil-specular {
  opacity: 1;
}

/* Inclinación 3D sutil de la tarjeta */
.rsvp-pass-card.holo-active {
  box-shadow:
    0 12px 50px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(173,131,47,0.2),
    0 0 0 1px rgba(173,131,47,0.12);
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   FAQ — Bento Grid Luxury Glass
   ============================================================ */

/* Grid container — asimétrico en desktop */
.faq-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 769px) {
  .faq-bento {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

/* Card ancha (col-span-2 en desktop) */
.faq-card-wide {
  grid-column: 1;
}
@media (min-width: 769px) {
  .faq-card-wide { grid-column: span 2; }
}

/* ── Tarjeta base ── */
.faq-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
  /* Glassmorphism */
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  /* Borde gradiente via outline + pseudo */
  border: 1px solid rgba(212,168,75,0.22);
  /* Profundidad */
  box-shadow:
    0 4px 24px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(212,168,75,0.08);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  -webkit-tap-highlight-color: transparent;
  transform-style: preserve-3d;
  /* will-change solo en interacción */
}

/* Línea de acento dorada en el tope */
.faq-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(212,168,75,0.4) 30%,
    rgba(212,168,75,0.7) 50%,
    rgba(212,168,75,0.4) 70%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Estado activo (abierto) */
.faq-card.faq-open {
  border-color: rgba(212,168,75,0.45);
  box-shadow:
    0 8px 40px rgba(0,0,0,0.35),
    0 0 0 0.5px rgba(212,168,75,0.15),
    inset 0 1px 0 rgba(212,168,75,0.12);
}

/* ── Inner — padding ── */
.faq-card-inner {
  padding: 1.5rem;
  position: relative;
  z-index: 0;
}
@media (min-width: 640px) {
  .faq-card-inner { padding: 1.75rem 2rem; }
}

/* ── Header: icono + pregunta + botón ── */
.faq-card-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

/* Icono envuelto en círculo */
.faq-card-icon-wrap {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(173,131,47,0.1);
  border: 1px solid rgba(173,131,47,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.1rem;
}
.faq-card-icon-wrap .material-icons {
  font-size: 1.1rem;
}

/* Pregunta */
.faq-card-q {
  flex: 1;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1rem, 2.5vw, 1.15rem);
  font-weight: 500;
  color: var(--champagne);
  line-height: 1.4;
  margin: 0;
  padding-right: 0.5rem;
}

/* Botón plus/x */
.faq-toggle {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(173,131,47,0.08);
  border: 1px solid rgba(173,131,47,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s ease, border-color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
  margin-top: 0.1rem;
}
.faq-toggle:hover {
  background: rgba(173,131,47,0.18);
  border-color: rgba(173,131,47,0.5);
}

/* Icono plus — dos líneas pseudo */
.faq-plus-icon {
  position: relative;
  width: 12px;
  height: 12px;
  display: block;
}
.faq-plus-icon::before,
.faq-plus-icon::after {
  content: '';
  position: absolute;
  background: var(--gold-light);
  border-radius: 1px;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.25s ease;
}
/* Barra horizontal */
.faq-plus-icon::before {
  width: 12px; height: 1.5px;
  top: 50%; left: 0;
  transform: translateY(-50%);
}
/* Barra vertical */
.faq-plus-icon::after {
  width: 1.5px; height: 12px;
  left: 50%; top: 0;
  transform: translateX(-50%);
}
/* Estado abierto: rota 45° → X */
.faq-card.faq-open .faq-plus-icon::before {
  transform: translateY(-50%) rotate(45deg);
}
.faq-card.faq-open .faq-plus-icon::after {
  transform: translateX(-50%) rotate(45deg);
}

/* ── Cuerpo / Respuesta ── */
.faq-card-body {
  /* Mask reveal: overflow hidden + height animado por GSAP */
  overflow: hidden;
  height: 0;
}

.faq-card-mask {
  /* Padding top da separación visual */
  padding: 1rem 0 0.25rem;
  padding-left: calc(40px + 1rem); /* alinea con el texto de la pregunta */
}
@media (min-width: 640px) {
  .faq-card-mask { padding-left: calc(40px + 1rem); }
}

.faq-card-a {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--champagne);
  line-height: 1.75;
  margin: 0;
  /* Cada línea se anima individualmente por GSAP stagger */
  opacity: 0;
  transform: translateY(8px);
}

/* === WISHES === */
.wishes-marquee-container {
  overflow: hidden;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
}
.wishes-marquee-row {
  display: flex;
  width: max-content;
  gap: 1rem;
  padding: 0.5rem 0;
  will-change: transform;
}
.wishes-marquee-row.left { animation: marqueeLeft 40s linear infinite; }
.wishes-marquee-row.right { animation: marqueeRight 40s linear infinite; }
.wishes-marquee-row:hover { animation-play-state: paused; }
@keyframes marqueeLeft {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}
@keyframes marqueeRight {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}
.wish-card {
  flex-shrink: 0;
  padding: 1rem 1.5rem;
  background: rgba(245,235,224,0.05);
  border: 1px solid rgba(173,131,47,0.15);
  border-radius: 10px;
  transition: border-color 0.3s;
  max-width: 320px;
  min-width: 220px;
}
.wish-card:hover { border-color: rgba(173,131,47,0.35); }

/* === ADMIN PANEL === */
.admin-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 300;
  background: rgba(201,110,119,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 0.5rem;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s, visibility 0.4s;
  /* Sin backdrop-filter — causa crash en Safari iOS */
}
@media (min-width: 640px) { .admin-overlay { padding: 1rem; } }
.admin-overlay.open { opacity: 1; visibility: visible; }
.admin-panel {
  width: 100%; max-width: 1100px;
  background: var(--petroleum-light);
  border: 1px solid rgba(173,131,47,0.3);
  border-radius: 10px;
  padding: 0.75rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  transform: translateY(20px);
  transition: transform 0.4s var(--ease-out-expo);
}
@media (min-width: 640px) {
  .admin-panel { padding: 1.5rem; margin-top: 1rem; border-radius: 12px; }
}
@media (min-width: 768px) { .admin-panel { padding: 2rem; } }
.admin-overlay.open .admin-panel { transform: translateY(0); }
.admin-stat {
  padding: 0.65rem 0.5rem;
  background: rgba(245,235,224,0.05);
  border: 1px solid rgba(173,131,47,0.2);
  border-radius: 8px;
  text-align: center;
}
@media (min-width: 640px) { .admin-stat { padding: 1rem; border-radius: 10px; } }
/* 5ta card ocupa ambas columnas en mobile para centrarla */
.admin-stat-full { grid-column: span 2; }
@media (min-width: 640px) { .admin-stat-full { grid-column: span 1; } }

/* Admin table — responsive */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.7rem;
}
@media (min-width: 640px) { .admin-table { font-size: 0.8rem; } }
.admin-table th {
  padding: 0.5rem 0.4rem;
  text-align: left;
  color: var(--gold);
  font-weight: 500;
  border-bottom: 1px solid rgba(173,131,47,0.3);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  position: sticky;
  top: 0;
  background: var(--petroleum-light);
  z-index: 2;
}
@media (min-width: 640px) {
  .admin-table th { padding: 0.6rem; font-size: 0.7rem; }
}
.admin-table td {
  padding: 0.5rem 0.4rem;
  color: var(--champagne);
  border-bottom: 1px solid rgba(176,141,79,0.15);
  vertical-align: top;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 640px) {
  .admin-table td { padding: 0.6rem; max-width: none; }
}
.admin-table tr:hover td { background: rgba(173,131,47,0.05); }

/* Mobile: card layout for table */
@media (max-width: 639px) {
  .admin-table-wrap { min-width: 700px; }
}

/* ── Admin guest cards (móvil) ─────────────────────────── */
.admin-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.admin-guest-card {
  background: rgba(245,235,224,0.04);
  border: 1px solid rgba(173,131,47,0.2);
  border-radius: 10px;
  padding: 0.85rem 1rem;
}
.admin-guest-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.4rem;
}
.admin-guest-card-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  color: var(--champagne);
  font-weight: 400;
  margin: 0;
}
.admin-guest-card-sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  color: rgba(239,238,236,0.4);
  margin: 0.1rem 0 0;
}
.admin-guest-card-song {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  color: rgba(212,168,75,0.7);
  margin: 0.35rem 0 0;
}
.admin-guest-card-date {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  color: rgba(239,238,236,0.3);
  margin: 0.2rem 0 0;
}
.admin-guest-card-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.65rem;
  flex-wrap: wrap;
}
/* Badges de asistencia */
.admin-badge {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.55rem;
  border-radius: 99px;
  flex-shrink: 0;
}
.admin-badge--si   { background: rgba(74,222,128,0.12); color: #4ade80; }
.admin-badge--no   { background: rgba(248,113,113,0.12); color: #f87171; }
.admin-badge--pend { background: rgba(250,204,21,0.12);  color: #facc15; }

/* ── Mensajes de invitados ─────────────────────────────── */
.admin-msgs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem;
}
.admin-msg-card {
  background: rgba(245,235,224,0.04);
  border: 1px solid rgba(173,131,47,0.18);
  border-radius: 10px;
  padding: 0.85rem 1rem;
}
.admin-msg-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.admin-msg-card-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.95rem;
  color: var(--champagne);
  margin: 0;
}
.admin-msg-card-status {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
}
.admin-msg-card-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.95rem;
  font-style: italic;
  color: rgba(239,238,236,0.65);
  line-height: 1.5;
  margin: 0;
}

/* ── Canciones solicitadas (admin) ─────────────────────── */
.admin-songs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.6rem;
}
.admin-song-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(173,131,47,0.06);
  border: 1px solid rgba(173,131,47,0.18);
  border-radius: 10px;
}
.admin-song-icon {
  color: var(--gold);
  opacity: 0.7;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.admin-song-info { min-width: 0; }
.admin-song-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--champagne);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
.admin-song-guest {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  color: rgba(212,168,75,0.6);
  margin: 0.15rem 0 0;
}

/* ── Libro de deseos (admin) ───────────────────────────── */
.admin-wishes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem;
}
.admin-wish-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: rgba(173,131,47,0.06);
  border: 1px solid rgba(173,131,47,0.22);
  border-radius: 10px;
  padding: 0.85rem 1rem;
}
.admin-wish-card-body { flex: 1; min-width: 0; }
.admin-wish-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  font-style: italic;
  color: var(--champagne);
  line-height: 1.5;
  margin: 0 0 0.35rem;
}
.admin-wish-author {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  color: rgba(212,168,75,0.65);
  margin: 0;
}
.admin-wish-edit-form { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.admin-wish-edit-form.hidden { display: none; }
.admin-wish-input {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(212,168,75,0.3);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  color: var(--champagne);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  outline: none;
}
.admin-wish-textarea {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(212,168,75,0.3);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  color: var(--champagne);
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.95rem;
  font-style: italic;
  resize: vertical;
  outline: none;
  line-height: 1.5;
}
.admin-wish-edit-actions { display: flex; gap: 0.5rem; align-items: center; }
.admin-wish-save-btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.3rem 0.75rem;
  background: rgba(173,131,47,0.25);
  border: 1px solid rgba(212,168,75,0.4);
  border-radius: 6px;
  color: var(--gold);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 0.2s;
}
.admin-wish-save-btn:hover { background: rgba(173,131,47,0.4); }
.admin-wish-cancel-btn {
  display: inline-flex; align-items: center;
  padding: 0.3rem 0.5rem;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: color 0.2s;
}
.admin-wish-cancel-btn:hover { color: rgba(255,255,255,0.7); }

/* Admin action buttons */
.admin-action-btn {
  background: transparent;
  border: 1px solid rgba(173,131,47,0.3);
  border-radius: 6px;
  padding: 4px 6px;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
}
@media (min-width: 640px) { .admin-action-btn { padding: 4px 8px; } }
.admin-action-btn:hover { background: rgba(173,131,47,0.2); }
.admin-action-btn.delete { border-color: rgba(239,68,68,0.4); }
.admin-action-btn.delete:hover { background: rgba(239,68,68,0.2); }

/* Admin actions wrap */
.admin-actions-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(212,168,75,0.12);
  border-radius: 12px;
}
.admin-filters-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.admin-btns-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.admin-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  border: 1px solid rgba(212,168,75,0.25);
  background: transparent;
  color: rgba(239,238,236,0.6);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}
.admin-filter .material-icons { font-size: 0.9rem; }
.admin-filter:hover { border-color: rgba(212,168,75,0.55); color: var(--champagne); }
.admin-filter.active,
.admin-filter[style*="rgba(173,131,47,0.3)"] {
  background: rgba(173,131,47,0.2);
  border-color: rgba(212,168,75,0.5);
  color: var(--gold);
}
.admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}
.admin-btn .material-icons { font-size: 0.95rem; }
.admin-btn-gold {
  background: rgba(173,131,47,0.18);
  border-color: rgba(212,168,75,0.35);
  color: var(--gold);
}
.admin-btn-gold:hover { background: rgba(173,131,47,0.32); }
.admin-btn-orange {
  background: rgba(194,120,40,0.15);
  border-color: rgba(251,146,60,0.3);
  color: rgb(251,146,60);
}
.admin-btn-orange:hover { background: rgba(194,120,40,0.28); }
.admin-btn-red {
  background: rgba(127,29,29,0.2);
  border-color: rgba(239,68,68,0.3);
  color: rgb(248,113,113);
}
.admin-btn-red:hover { background: rgba(127,29,29,0.35); }

@media (max-width: 639px) {
  .admin-actions-wrap { flex-direction: column; align-items: stretch; gap: 0.75rem; padding: 0.85rem; }
  .admin-filters-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
  }
  .admin-btns-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
  }
  .admin-filter, .admin-btn {
    font-size: 0.65rem;
    padding: 0.5rem 0.5rem;
    justify-content: center;
    text-align: center;
    width: 100%;
  }
}

/* Admin Confirm Modal */
.admin-confirm-overlay {
  position: fixed; inset: 0;
  z-index: 500;
  background: rgba(10,15,25,0.75);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
  padding: 1rem;
}
.admin-confirm-overlay.open { opacity: 1; visibility: visible; }
.admin-confirm-box {
  background: #ffffff;
  border: 1px solid rgba(222,144,151,0.3);
  border-radius: 18px;
  padding: 2rem 1.75rem 1.5rem;
  max-width: 400px; width: 100%;
  text-align: center;
  box-shadow: 0 20px 50px rgba(201,110,119,0.2);
  transform: translateY(16px);
  transition: transform 0.3s var(--ease-out-expo);
}
.admin-confirm-overlay.open .admin-confirm-box { transform: translateY(0); }
.admin-confirm-icon {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--rose-soft);
  border: 1px solid rgba(222,144,151,0.4);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
.admin-confirm-icon .material-icons { color: var(--rose-deep); font-size: 1.6rem; }
.admin-confirm-icon.danger { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3); }
.admin-confirm-icon.danger .material-icons { color: #f87171; }
.admin-confirm-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.7rem; font-weight: 400;
  color: var(--rose-deep); margin: 0 0 0.75rem;
}
.admin-confirm-msg {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem; color: var(--champagne);
  line-height: 1.6; margin: 0 0 1.5rem;
}
.admin-confirm-actions { display: flex; gap: 0.75rem; justify-content: center; }
.admin-confirm-cancel {
  flex: 1; padding: 0.7rem 1rem;
  border-radius: 999px; border: 1px solid rgba(107,86,68,0.25);
  background: transparent; color: var(--champagne-dark);
  font-family: 'Montserrat', sans-serif; font-size: 0.75rem;
  letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
  transition: all 0.2s;
}
.admin-confirm-cancel:hover { border-color: var(--rose); color: var(--rose-deep); }
.admin-confirm-ok {
  flex: 1; padding: 0.7rem 1rem;
  border-radius: 999px; border: none;
  background: var(--rose); color: #fff;
  font-family: 'Montserrat', sans-serif; font-size: 0.75rem;
  letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
  transition: all 0.2s;
}
.admin-confirm-ok:hover { background: var(--rose-deep); }
.admin-confirm-ok.danger {
  background: rgba(127,29,29,0.25); border-color: rgba(239,68,68,0.4); color: #f87171;
}
.admin-confirm-ok.danger:hover { background: rgba(127,29,29,0.4); }

/* Admin Modal */
.admin-modal {
  position: fixed; inset: 0;
  z-index: 350;
  background: rgba(62, 44, 42,0.9);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 0.75rem;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
@media (min-width: 640px) { .admin-modal { padding: 1rem; } }
.admin-modal.open { opacity: 1; visibility: visible; }
.admin-modal-content {
  background: var(--petroleum-light);
  border: 1px solid rgba(173,131,47,0.4);
  border-radius: 12px;
  padding: 1.25rem;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(20px) scale(0.95);
  transition: transform 0.4s var(--ease-out-expo);
}
@media (min-width: 640px) {
  .admin-modal-content { padding: 2rem; border-radius: 16px; }
}
.admin-modal.open .admin-modal-content { transform: translateY(0) scale(1); }
.admin-modal-input {
  width: 100%;
  background: rgba(62, 44, 42,0.5);
  border: 1px solid rgba(239,238,236,0.2);
  border-radius: 8px;
  color: var(--champagne);
  padding: 0.65rem 0.75rem;
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.3s;
  font-family: 'Montserrat', sans-serif;
  min-height: 44px;
}
.admin-modal-input:focus { border-color: var(--gold); }
.admin-modal-input::placeholder { color: rgba(239,238,236,0.3); }

/* Password modal */
.password-modal {
  position: fixed; inset: 0;
  z-index: 310;
  background: rgba(62, 44, 42,0.95);
  display: flex; align-items: center; justify-content: center;
  padding: 0.75rem;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
@media (min-width: 640px) { .password-modal { padding: 1rem; } }
.password-modal.open { opacity: 1; visibility: visible; }

/* === REGALOS — Datos bancarios === */
.bank-card {
  background: rgba(245,235,224,0.04);
  border: 1px solid rgba(173,131,47,0.25);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: left;
  transition: all 0.4s var(--ease-out-expo);
}
.bank-card:hover {
  border-color: rgba(173,131,47,0.5);
  background: rgba(245,235,224,0.07);
}
.bank-card-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(239,238,236,0.4);
  margin-bottom: 0.15rem;
}
.bank-card-value {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  color: var(--champagne);
  font-weight: 400;
}

/* === HOTEL === */
.hotel-card {
  background: rgba(245,235,224,0.04);
  border: 1px solid rgba(173,131,47,0.25);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  transition: all 0.4s var(--ease-out-expo);
}
.hotel-card:hover {
  border-color: rgba(173,131,47,0.5);
  transform: translateY(-4px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.2);
}

/* === VESTIMENTA TEXT — sin sombra (sobre textura clara) === */
#vestimenta .relative.z-10 h2,
#vestimenta .relative.z-10 p,
#vestimenta .relative.z-10 span {
  text-shadow: none;
}

/* === TOUCH TARGETS === */
.touch-target { min-height: 44px; min-width: 44px; }

/* === RESPONSIVE MOBILE PRIORITY === */
@media (max-width: 640px) {
  .ceremony-card { padding: 1.5rem; }
  .bank-card { padding: 1.25rem; }
  .rsvp-form-container { padding: 1.25rem !important; }
}

/* === PRINT === */
@media print {
  .main-header, .nav-dots, .scroll-progress, .page-loader, .lightbox, .admin-overlay, .password-modal, .admin-modal { display: none !important; }
}

/* ============================================================
   GSAP MOBILE — Magnetic Sections + Image Scale
   ============================================================ */

/* En desktop las imágenes arrancan visible sin escala reducida */
@media (min-width: 769px) {
  section:not(#hero) img,
  section:not(#hero) .gallery-item {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* En mobile: will-change para que el GPU acelere los transforms */
@media (max-width: 768px) {
  section:not(#hero) img,
  section:not(#hero) .gallery-item {
    will-change: transform, opacity;
  }

  /* GSAP controla el scroll suave — desactiva scroll-behavior nativo en mobile */
  html,
  html.scroll-smooth {
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   GSAP PRESS PHYSICS — Micro-interacción táctil
   ============================================================ */

/* Transform-origin centrado para que el "encogimiento" sea simétrico */
.gold-glow,
.ceremony-card,
.bank-card,
.rsvp-btn,
.rsvp-change-btn,
.loader-enter-btn,
.hotel-card,
.faq-item summary,
.gm-item {
  transform-origin: center center;
  /* Previene el highlight azul nativo en Android al tocar */
  -webkit-tap-highlight-color: transparent;
}

/* GPU hint solo en mobile para los elementos interactivos */
@media (max-width: 768px) {
  .gold-glow,
  .ceremony-card,
  .bank-card,
  .gm-item {
    will-change: transform, box-shadow;
  }
}

/* ============================================================
   STICKY ACTION BAR — Glassmorphism
   ============================================================ */

.sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;

  /* Glassmorphism */
  background: rgba(62, 44, 42, 0.82);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-top: 1px solid rgba(173, 131, 47, 0.22);
  box-shadow: 0 -6px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(212,168,75,0.1);

  /* Safe area iOS */
  padding-bottom: max(0.7rem, env(safe-area-inset-bottom));
  padding-top: 0.55rem;
  padding-left: max(0.5rem, env(safe-area-inset-left));
  padding-right: max(0.5rem, env(safe-area-inset-right));

  /* 3 zonas simétricas */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0;

  /* Oculta por defecto */
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

/* Solo mobile */
@media (min-width: 769px) {
  .sticky-bar { display: none !important; }
}

.sticky-bar.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Zona izquierda — música */
.sticky-bar-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 0.25rem;
}

/* Zona derecha — inicio */
.sticky-bar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 0.25rem;
}

/* Zona central — CTA */
.sticky-bar-center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.75rem;
}

/* Botones icono + label */
.sticky-bar-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0.3rem 0.9rem;
  background: transparent;
  border: none;
  color: rgba(239,238,236,0.6);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease;
  min-width: 56px;
}
.sticky-bar-btn .material-icons {
  font-size: 1.2rem;
}
.sticky-bar-btn:active,
.sticky-bar-btn:hover {
  color: var(--gold-light);
}

.sticky-bar-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 8.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Botón CTA central */
.sticky-bar-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 1.25rem;
  background: var(--gold);
  color: var(--petroleum);
  border-radius: 9999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 12px rgba(173,131,47,0.35);
}
.sticky-bar-cta:active {
  background: var(--gold-light);
  transform: scale(0.96);
}

/* Divisor — ya no se usa en el grid, pero se mantiene por compatibilidad */
.sticky-bar-divider { display: none; }

/* ============================================================
   PARTÍCULAS PARALLAX — Fondo flotante dorado
   ============================================================ */

#particlesLayer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.particle-dot {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,168,75,0.9) 0%, rgba(173,131,47,0.4) 60%, transparent 100%);
  will-change: transform;
  /* Posiciones y tamaños iniciales asignados por JS */
}

/* En desktop se reduce la opacidad para no distraer */
@media (min-width: 769px) {
  .particle-dot { opacity: 0.35; }
}

/* En mobile opacidad levemente mayor para el efecto 3D */
@media (max-width: 768px) {
  .particle-dot { opacity: 0.55; }
}

/* ============================================================
   TIMELINE — Horizontal Scroll Luxury Cards
   ============================================================ */

/* ── Mobile: scroll horizontal con snap ── */
.tl-scroll-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 1.5rem 1.5rem 2rem;
  perspective: 1000px;
  /* centra primera/última card */
  padding-left:  max(1.5rem, calc(50% - 40vw));
  padding-right: max(1.5rem, calc(50% - 40vw));
}
.tl-scroll-track::-webkit-scrollbar { display: none; }

/* Cada tarjeta */
.tl-card {
  flex: 0 0 82vw;
  max-width: 340px;
  min-height: 300px;
  scroll-snap-align: center;
  scroll-snap-stop: always;

  background: linear-gradient(145deg, rgba(78, 56, 54,0.92) 0%, rgba(62, 44, 42,0.96) 100%);
  border: 1px solid rgba(173,131,47,0.22);
  border-radius: 20px;
  padding: 1.75rem 1.5rem;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(212,168,75,0.12),
    0 0 0 0.5px rgba(173,131,47,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  position: relative;
  overflow: hidden;

  /* Estado inicial animación GSAP mobile */
  opacity: 0;
  transform: rotateY(15deg) translateX(20px);
  transform-origin: left center;
  will-change: transform, opacity, filter;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

/* ── Pantallas pequeñas (≤ 380px): tarjetas más compactas ── */
@media (max-width: 380px) {
  .tl-card {
    flex: 0 0 88vw;
    padding: 1.5rem 1.25rem;
    min-height: 270px;
  }
  .tl-card-time { font-size: 1.75rem !important; }
  .tl-card-title { font-size: 1.2rem !important; }
  .tl-scroll-track {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Línea decorativa superior */
.tl-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--gold-light), transparent);
  opacity: 0.7;
}

/* Icono de la tarjeta */
.tl-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(173,131,47,0.12);
  border: 1px solid rgba(173,131,47,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  flex-shrink: 0;
}
.tl-card-icon .material-icons {
  color: var(--gold);
  font-size: 22px;
}

/* Hora */
.tl-card-time {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.25rem;
  color: var(--gold-light);
  line-height: 1;
  letter-spacing: -0.01em;
}

/* Título */
.tl-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.45rem;
  color: var(--champagne);
  line-height: 1.3;
  margin: 0;
}

/* Descripción */
.tl-card-desc {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.88rem;
  color: rgba(239,238,236,0.82);
  line-height: 1.6;
  flex: 1;
}

/* Número de paso */
.tl-card-step {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: rgba(173,131,47,0.4);
  text-transform: uppercase;
  margin-top: auto;
  align-self: flex-end;
}

/* Tarjeta activa (centrada) — GSAP la gestiona, pero CSS da el baseline */
.tl-card.tl-active {
  border-color: rgba(173,131,47,0.4);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(212,168,75,0.2),
    0 0 20px rgba(173,131,47,0.08);
}

/* ── Tablet (≥ 600px): grid 2×2, sin scroll horizontal ── */
@media (min-width: 600px) {
  .tl-scroll-track {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: visible;
    scroll-snap-type: none;
    padding: 0.5rem 0 1rem;
    perspective: none;
    gap: 1.25rem;
  }
  .tl-card {
    flex: none;
    width: 100%;
    max-width: 100%;
    min-height: 260px;
    padding: 1.75rem 1.5rem;
    scroll-snap-align: none;
    scroll-snap-stop: unset;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .tl-card-time { font-size: 2rem; }
  .tl-swipe-indicator { display: none !important; }
  .tl-swipe-hint      { display: none !important; }
}

/* ── Tablet ancha / Laptop (≥ 768px): gap mayor ── */
@media (min-width: 768px) {
  .tl-scroll-track { gap: 1.5rem; }
  .tl-card { min-height: 280px; padding: 2rem 1.75rem; }
  .tl-card-time { font-size: 2.25rem; }
}

/* ── Desktop (≥ 1024px): cards más altas y padding generoso ── */
@media (min-width: 1024px) {
  .tl-scroll-track { gap: 1.75rem; }
  .tl-card { min-height: 300px; padding: 2.25rem 2rem; }
  .tl-card-time { font-size: 2.5rem; }
}

/* ── Desktop grande (≥ 1280px): máximo espacio ── */
@media (min-width: 1280px) {
  .tl-scroll-track { gap: 2rem; }
  .tl-card { min-height: 320px; padding: 2.5rem 2.25rem; }
  .tl-card-time { font-size: 2.75rem; }
}

/* ── Swipe Hint — overlay dentro de la primera tl-card ── */
.tl-swipe-hint {
  position: absolute;
  bottom: 1.25rem;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.5s ease;
  z-index: 3;
}
.tl-swipe-hint.hidden { opacity: 0; }
@media (min-width: 769px) { .tl-swipe-hint { display: none !important; } }

/* Gradiente sutil detrás del hint para legibilidad */
.tl-swipe-hint::before {
  content: '';
  position: absolute;
  inset: -1.5rem 0 -0.5rem;
  background: linear-gradient(to top, rgba(62, 44, 42,0.7) 0%, transparent 100%);
  pointer-events: none;
  z-index: -1;
  border-radius: 0 0 20px 20px;
}

.tl-swipe-track {
  position: relative;
  width: 160px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tl-swipe-cards {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tl-swipe-card-ghost {
  width: 28px;
  height: 40px;
  border-radius: 6px;
  background: rgba(173,131,47,0.1);
  border: 1px solid rgba(173,131,47,0.18);
  flex-shrink: 0;
}
.tl-swipe-card-main {
  width: 36px;
  height: 50px;
  background: rgba(173,131,47,0.18);
  border-color: rgba(173,131,47,0.4);
  box-shadow: 0 2px 12px rgba(173,131,47,0.15);
}

.tl-swipe-finger {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--gold-light);
  animation: tlFingerSwipe 1.8s ease-in-out infinite;
}
.tl-swipe-finger .material-icons {
  font-size: 1.8rem;
  filter: drop-shadow(0 0 6px rgba(212,168,75,0.7));
}

@keyframes tlFingerSwipe {
  0%   { transform: translate(calc(-50% + 16px), -50%); opacity: 0; }
  20%  { opacity: 1; }
  55%  { transform: translate(calc(-50% - 16px), -50%); opacity: 1; }
  80%  { opacity: 0; }
  100% { transform: translate(calc(-50% + 16px), -50%); opacity: 0; }
}

.tl-swipe-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  color: rgba(173,131,47,0.5);
  text-transform: uppercase;
  margin: 0;
}

/* ============================================================
   HERO H1 — Tipografía de Lujo
   ============================================================ */

.hero-h1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.05em;
  margin: 0 0 1rem;
  padding: 0;
  line-height: 1;
  letter-spacing: 0.02em;
  /* Sobre textura clara: sombra muy sutil */
  text-shadow: 0 2px 14px rgba(245,240,236,0.8);
}

/* Línea 1: "Mis" */
.hero-h1-line1 {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  color: var(--champagne);
  /* Escala fluida: 3.2rem mobile → 9rem desktop */
  font-size: clamp(3.2rem, 14vw, 9rem);
  line-height: 0.95;
}

/* Línea 2: "hacia el Sí" */
.hero-h1-line2 {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  /* Ligeramente más pequeño que la línea 1 para jerarquía */
  font-size: clamp(2.6rem, 11.5vw, 7.5rem);
  line-height: 1;
  letter-spacing: 0.01em;
  /* Gradiente rosa-vino para resaltar sobre la textura clara */
  text-shadow: none;
  background: linear-gradient(160deg, #de9097 0%, #c96e77 55%, #9c4a57 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ============================================================
   MODAL CONFIRMAR ASISTENCIA
   ============================================================ */
/* Modal reutilizable (Sí y No) */
.rsvp-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  align-items: flex-end;
  justify-content: center;
  background: rgba(62, 44, 42, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.rsvp-confirm-modal-card {
  width: 100%;
  max-width: 480px;
  background: linear-gradient(160deg, #1e2840 0%, #161e30 100%);
  border: 1px solid rgba(212,168,75,0.2);
  border-bottom: none;
  border-radius: 1.25rem 1.25rem 0 0;
  padding: 1.5rem 1.5rem max(1.5rem, calc(env(safe-area-inset-bottom) + 1.5rem));
  transform: translateY(30px);
  animation: slideUpModal 0.4s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes slideUpModal {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@media (min-width: 640px) {
  .rsvp-confirm-modal { align-items: center; }
  .rsvp-confirm-modal-card { border-radius: 1.25rem; border-bottom: 1px solid rgba(212,168,75,0.2); padding: 2rem; }
}

.rsvp-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: flex-end;        /* sube desde abajo en mobile */
  justify-content: center;
  background: rgba(62, 44, 42, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s;
}
.rsvp-modal.open {
  opacity: 1;
  visibility: visible;
}

.rsvp-modal-card {
  width: 100%;
  max-width: 480px;
  background: linear-gradient(160deg, var(--petroleum-light) 0%, var(--petroleum) 100%);
  border: 1px solid rgba(173,131,47,0.25);
  border-radius: 24px 24px 0 0;
  padding: 0 1.5rem 2rem;
  position: relative;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  /* safe area iOS */
  padding-bottom: max(2rem, calc(env(safe-area-inset-bottom) + 1.5rem));
}
.rsvp-modal.open .rsvp-modal-card {
  transform: translateY(0);
}

/* En desktop: modal centrado */
@media (min-width: 640px) {
  .rsvp-modal { align-items: center; }
  .rsvp-modal-card {
    border-radius: 20px;
    transform: scale(0.92) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .rsvp-modal.open .rsvp-modal-card {
    transform: scale(1) translateY(0);
  }
}

.rsvp-modal-line {
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--gold-light), var(--gold), transparent);
  margin: 0 -1.5rem 1.5rem;
}

.rsvp-modal-header {
  text-align: center;
  padding: 0.25rem 0 1.25rem;
}

.rsvp-modal-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.rsvp-modal-field { width: 100%; }

.rsvp-modal-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.rsvp-modal-btn-cancel {
  flex: 0 0 auto;
  padding: 0.75rem 1.25rem;
  border: 1px solid rgba(239,238,236,0.15);
  border-radius: 10px;
  background: transparent;
  color: rgba(239,238,236,0.5);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.rsvp-modal-btn-cancel:hover { border-color: rgba(239,238,236,0.35); color: var(--champagne); }

.rsvp-modal-btn-confirm {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  background: var(--gold);
  color: var(--petroleum);
  border: none;
  border-radius: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.rsvp-modal-btn-confirm:hover { background: var(--gold-light); }
.rsvp-modal-btn-confirm:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Bank Card Compacta — 2 columnas ── */
.bank-card-compact {
  background: rgba(245,235,224,0.04);
  border: 1px solid rgba(173,131,47,0.2);
  border-radius: 12px;
  padding: 0.85rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.bank-card-compact-bank {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.8rem;
  color: var(--gold-light);
  font-style: italic;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid rgba(173,131,47,0.15);
  padding-bottom: 0.35rem;
}

.bank-card-compact-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.bank-card-compact-row span {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(239,238,236,0.4);
}
.bank-card-compact-row strong {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--champagne);
  word-break: break-all;
}

/* ── Nuevas bank transfer cards — apiladas, simétricas ── */
.bank-transfer-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(173,131,47,0.28);
  border-radius: 16px;
  padding: 1.1rem 1.25rem;
  text-align: left;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.bank-transfer-card:hover {
  border-color: rgba(173,131,47,0.5);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

/* Header: nombre banco + badge tipo */
.bank-transfer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(173,131,47,0.15);
}
.bank-transfer-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  font-style: italic;
  color: var(--gold-light);
  letter-spacing: 0.03em;
}
.bank-transfer-badge {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(173,131,47,0.6);
  border: 1px solid rgba(173,131,47,0.25);
  border-radius: 99px;
  padding: 0.15rem 0.55rem;
}

/* Filas de datos */
.bank-transfer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0;
}
.bank-transfer-row span {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(239,238,236,0.4);
}
.bank-transfer-row strong {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--champagne);
}

/* Bloque número de cuenta + botón copiar */
.bank-transfer-account-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.6rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(173,131,47,0.12);
}

/* Número grande y centrado */
.bank-copy-num {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: 0.1em;
  text-align: center;
}

/* Botón "Copiar" centrado */
.bank-copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: rgba(173,131,47,0.1);
  border: 1px solid rgba(173,131,47,0.3);
  border-radius: 10px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
  touch-action: manipulation;
  min-height: 40px;
}
.bank-copy-btn:active,
.bank-copy-btn:hover {
  background: rgba(173,131,47,0.22);
  border-color: rgba(173,131,47,0.55);
}

.bank-copy-label,
.bank-copy-ok {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.bank-copy-label { color: rgba(212,168,75,0.85); }
.bank-copy-ok    { color: #4ade80; }
.hidden { display: none !important; }

/* Galería desktop: imágenes sin blur ni scale */
/* Desktop: imágenes sin blur ni scale — limpias */
@media (min-width: 769px) {
  .gc-slide img {
    transform: none !important;
    filter: brightness(0.92) saturate(0.95) !important;
    transition: filter 0.5s ease !important;
  }
  .gc-slide:hover img {
    filter: brightness(1) saturate(1) !important;
  }
  .gc-swipe-hint { display: none !important; }
}

/* ── Hint de swipe galería — encima de la primera foto ── */
.gc-swipe-hint {
  /* Posición absoluta dentro de .gc-slide */
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.5s ease;
}
.gc-swipe-hint.hidden { opacity: 0; }
@media (min-width: 769px) { .gc-swipe-hint { display: none !important; } }

.gc-swipe-finger-wrap {
  color: rgba(212,168,75,0.9);
  animation: gcFingerUp 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(212,168,75,0.7));
}
.gc-swipe-finger-wrap .material-icons { font-size: 2rem; }

/* Flecha que sube — indica deslizar hacia arriba */
@keyframes gcFingerUp {
  0%   { transform: translateY(8px);  opacity: 0; }
  20%  { opacity: 1; }
  65%  { transform: translateY(-8px); opacity: 1; }
  85%  { opacity: 0; }
  100% { transform: translateY(8px);  opacity: 0; }
}

.gc-swipe-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: rgba(239,238,236,0.7);
  text-transform: uppercase;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* ── Transición galería: más suave, sin titilar ──
   Reduce el rango de blur para que no sea tan agresivo */
@media (max-width: 768px) {
  .gc-slide img {
    /* Estado base más suave — menos blur inicial */
    transform: scale(1.05);
    filter: blur(5px) brightness(0.9) saturate(0.95);
  }
}

/* ── Timeline swipe indicator ── */
.tl-swipe-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 0 0.5rem;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.tl-swipe-indicator.hidden { opacity: 0; }
@media (min-width: 769px) { .tl-swipe-indicator { display: none; } }

/* Tres flechas chevron en cascada */
.tl-swipe-ind-inner {
  display: flex;
  align-items: center;
  gap: 2px;
}

.tl-swipe-ind-arrow {
  display: block;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid rgba(212,168,75,0.7);
  border-bottom: 1.5px solid rgba(212,168,75,0.7);
  transform: rotate(-45deg);  /* apunta a la derecha */
  animation: tlArrowPulse 1.4s ease-in-out infinite;
}
.tl-swipe-ind-arrow:nth-child(1) { animation-delay: 0s;    opacity: 0.35; }
.tl-swipe-ind-arrow:nth-child(2) { animation-delay: 0.2s;  opacity: 0.65; }
.tl-swipe-ind-arrow:nth-child(3) { animation-delay: 0.4s;  opacity: 1;   }

@keyframes tlArrowPulse {
  0%, 60%, 100% { transform: rotate(-45deg) translate(0, 0); }
  30%           { transform: rotate(-45deg) translate(3px, -3px); }
}

.tl-swipe-ind-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(212,168,75,0.45);
  margin: 0;
}

/* ============================================================
   MAPA — Dos Pasos (Minimalismo de Lujo)
   ============================================================ */

/* Tipografía del encabezado */
.dp-overline {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
  opacity: 0;
  transition: opacity 2s ease;
}
.dp-overline.dp-visible { opacity: 1; }

.dp-heading {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 300;
  color: var(--champagne);
  margin: 0 0 0.75rem;
  line-height: 1.1;
  opacity: 0;
  transition: opacity 2s ease 0.3s;
}
.dp-heading.dp-visible { opacity: 1; }

.dp-subheading {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 300;
  color: rgba(239,238,236,0.4);
  letter-spacing: 0.12em;
  margin: 0;
  opacity: 0;
  transition: opacity 2s ease 0.6s;
}
.dp-subheading.dp-visible { opacity: 1; }

/* Layout dos columnas — vertical en mobile, fila en desktop */
.dp-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  position: relative;
}

@media (min-width: 768px) {
  .dp-layout {
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: 0;
  }
}

/* Bloque individual */
.dp-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem 2.5rem;
  opacity: 0;
  transition: opacity 2s ease;
}
.dp-block.dp-visible { opacity: 1; }

#dpBlockA { transition-delay: 0.4s; }
#dpBlockB { transition-delay: 0.9s; }

/* Ícono SVG de hilo fino */
.dp-icon-wrap {
  width: 72px;
  height: 72px;
  margin-bottom: 1.75rem;
  position: relative;
}

/* Halo de pulso sutil detrás del ícono */
.dp-icon-wrap::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(173,131,47,0.18);
  animation: dpIconPulse 3s ease-in-out infinite;
}
@keyframes dpIconPulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50%       { transform: scale(1.12); opacity: 0.2; }
}

.dp-icon {
  width: 100%;
  height: 100%;
}

/* Etiqueta de hora */
.dp-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.6rem;
  opacity: 0.85;
}

/* Nombre del lugar — Cormorant */
.dp-place {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  font-weight: 300;
  color: var(--champagne);
  margin: 0 0 0.5rem;
  line-height: 1.2;
}

/* Dirección — susurro */
.dp-address {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 300;
  color: rgba(239,238,236,0.38);
  line-height: 1.7;
  letter-spacing: 0.06em;
  margin-bottom: 1.5rem;
}

/* Mapa cápsula */
.dp-map-pill {
  width: 100%;
  max-width: 260px;
  height: 130px;
  border-radius: 100px;
  overflow: hidden;
  position: relative;
  margin-bottom: 1.5rem;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.5s ease;
  -webkit-tap-highlight-color: transparent;
}
.dp-map-pill:hover,
.dp-map-pill:focus-visible { opacity: 1; outline: none; }
.dp-map-pill:focus-visible { box-shadow: 0 0 0 2px rgba(173,131,47,0.6); }

.dp-map-iframe {
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  margin: -20px;
  border: none;
  pointer-events: none;
  filter: grayscale(100%) invert(88%) contrast(88%) brightness(0.9) sepia(8%);
  display: block;
}

/* Velo sobre el mapa para el look discreto */
.dp-map-veil {
  position: absolute;
  inset: 0;
  border-radius: 100px;
  background: radial-gradient(
    ellipse 80% 70% at 50% 50%,
    transparent 20%,
    rgba(62, 44, 42,0.3) 70%,
    rgba(62, 44, 42,0.65) 100%
  );
  pointer-events: none;
}

/* Botones outline elegantes */
.dp-btns {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  width: 100%;
  max-width: 260px;
}

.dp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 42px;
  padding: 0 1.25rem;
  background: transparent;
  border-radius: 4px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.dp-btn:active { transform: scale(0.98); }

.dp-btn-maps {
  border: 1px solid rgba(173,131,47,0.45);
  color: rgba(212,168,75,0.8);
}
.dp-btn-maps:hover {
  background: rgba(173,131,47,0.08);
  border-color: rgba(212,168,75,0.7);
  color: var(--gold-light);
}

.dp-btn-waze {
  border: 1px solid rgba(239,238,236,0.18);
  color: rgba(239,238,236,0.45);
}
.dp-btn-waze:hover {
  background: rgba(239,238,236,0.04);
  border-color: rgba(239,238,236,0.35);
  color: rgba(239,238,236,0.75);
}
.dp-btn-waze svg { opacity: 0.6; }

/* Separador — línea dorada vertical animada */
.dp-divider {
  display: none;
}

@media (min-width: 768px) {
  .dp-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 2.5rem;
    gap: 0.75rem;
    position: relative;
    min-height: 300px;
  }
}

.dp-divider-line {
  width: 1px;
  height: 0; /* animado a 100% con JS */
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(173,131,47,0.6) 20%,
    rgba(212,168,75,0.9) 50%,
    rgba(173,131,47,0.6) 80%,
    transparent 100%
  );
  flex: 1;
  transition: height 1.6s cubic-bezier(0.4,0,0.2,1) 0.5s;
  max-height: 200px;
}
.dp-divider-line.dp-visible { height: 200px; }

/* Píldora central en el separador */
.dp-divider-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(173,131,47,0.3);
  border-radius: 99px;
  background: rgba(62, 44, 42,0.8);
  opacity: 0;
  transition: opacity 1.5s ease 1.2s;
}
.dp-divider-pill.dp-visible { opacity: 1; }

.dp-divider-icon {
  font-size: 0.7rem;
  color: rgba(173,131,47,0.7);
  line-height: 1;
}
.dp-divider-km {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(173,131,47,0.55);
  white-space: nowrap;
}

/* Divisor horizontal en mobile */
@media (max-width: 767px) {
  .dp-block:not(:last-child)::after {
    content: '';
    display: block;
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, rgba(173,131,47,0.5), rgba(173,131,47,0.1));
    margin: 0.5rem auto 0;
  }
}

/* Nota logística */
.dp-logistics {
  text-align: center;
  margin-top: 3rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(239,238,236,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  opacity: 0;
  transition: opacity 2s ease 1.5s;
}
.dp-logistics.dp-visible { opacity: 1; }

.dp-logistics-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(173,131,47,0.4);
  flex-shrink: 0;
}

/* ============================================================
   MAPA — Ruta Cinemática v2 — (estilos de compatibilidad)
   ============================================================ */

/* Contenedor de la ruta vertical */
.ruta-path {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Cada nodo (iglesia / villa) */
.ruta-node {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

/* Ícono en círculo */
.ruta-dot {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(173,131,47,0.12);
  border: 1.5px solid rgba(173,131,47,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px rgba(173,131,47,0.15);
  position: relative;
  z-index: 2;
  margin-top: 0.25rem;
}
.ruta-dot-end {
  background: rgba(212,168,75,0.18);
  border-color: rgba(212,168,75,0.6);
  box-shadow: 0 0 20px rgba(212,168,75,0.2);
}

/* Tarjeta glassmorphism */
.ruta-card {
  flex: 1;
  background: rgba(255,255,255,0.025);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(173,131,47,0.2);
  border-radius: 24px;
  padding: 1.5rem;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(212,168,75,0.08);
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.ruta-card:hover {
  border-color: rgba(212,168,75,0.38);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.35),
    0 0 0 0.5px rgba(212,168,75,0.12),
    inset 0 1px 0 rgba(212,168,75,0.12);
}

.ruta-card-tag {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.4rem;
}

.ruta-card-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--champagne);
  margin: 0 0 0.4rem;
  line-height: 1.3;
}

.ruta-card-address {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  color: rgba(239,238,236,0.65);
  line-height: 1.5;
  margin-bottom: 1rem;
}
.ruta-card-sub {
  font-size: 0.7rem;
  color: rgba(239,238,236,0.4);
}

/* Preview de mapa estético (SVG fallback — se oculta si existe iframe-map) */
.ruta-map-preview {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 1rem;
  height: 100px;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.2s ease;
}
.ruta-map-preview:active { opacity: 0.85; }

.ruta-map-bg {
  width: 100%;
  height: 100%;
  display: block;
}

.ruta-map-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  background: rgba(62, 44, 42,0.45);
  backdrop-filter: blur(2px);
  transition: background 0.2s ease;
}
.ruta-map-preview:hover .ruta-map-overlay {
  background: rgba(62, 44, 42,0.3);
}

.ruta-map-pin {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(173,131,47,0.25);
  border: 1.5px solid rgba(173,131,47,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-light);
  animation: mapPinPulse 2s ease-in-out infinite;
}
.ruta-map-pin-gold {
  background: rgba(212,168,75,0.3);
  border-color: rgba(212,168,75,0.8);
  color: #edc96a;
}
.ruta-map-pin .material-icons { font-size: 1.1rem; }

@keyframes mapPinPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(173,131,47,0.3); }
  50%       { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(173,131,47,0); }
}

.ruta-map-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(239,238,236,0.6);
  margin: 0;
}

/* Botones de acción */
.ruta-card-actions {
  display: flex;
  gap: 0.6rem;
}

.ruta-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 50px;
  border-radius: 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease, transform 0.15s ease;
}
.ruta-btn:active { transform: scale(0.97); }

.ruta-btn-maps {
  background: rgba(173,131,47,0.15);
  border: 1px solid rgba(173,131,47,0.35);
  color: var(--gold-light);
}
.ruta-btn-maps:hover { background: rgba(173,131,47,0.25); }

.ruta-btn-waze {
  background: rgba(120,220,80,0.1);
  border: 1px solid rgba(120,220,80,0.3);
  color: #7adc50;
}
.ruta-btn-waze:hover { background: rgba(120,220,80,0.18); }

/* Línea animada entre nodos */
.ruta-line-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 0;
  width: 48px;
  align-self: flex-start;
  margin-top: 0;
}

.ruta-line {
  width: 2px;
  height: 100px;
  background: linear-gradient(to bottom,
    rgba(173,131,47,0.6) 0%,
    rgba(173,131,47,0.2) 50%,
    rgba(173,131,47,0.6) 100%
  );
  border-radius: 1px;
  position: relative;
}
.ruta-line::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100%;
  height: var(--line-progress, 0%);
  background: var(--gold-light);
  border-radius: 1px;
  transition: height 0.1s linear;
}

/* Auto animado */
.ruta-car {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0);
  filter: drop-shadow(0 0 6px rgba(212,168,75,0.6));
  transition: top 0.1s linear;
}

/* Micro-copy tiempo de viaje */
.ruta-travel-time {
  position: absolute;
  right: -5rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: rgba(173,131,47,0.6);
  white-space: nowrap;
}
@media (max-width: 480px) {
  .ruta-travel-time { display: none; }
}

/* Logística */
.ruta-logistics {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(173,131,47,0.15);
  border-radius: 16px;
}
.ruta-logistics-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  color: rgba(239,238,236,0.6);
  font-weight: 300;
}
.ruta-logistics-item .material-icons { font-size: 1rem; flex-shrink: 0; }

/* Botón Uber */
.ruta-uber-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 50px;
  padding: 0 1.5rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(239,238,236,0.15);
  border-radius: 99px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(239,238,236,0.65);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.ruta-uber-btn:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(239,238,236,0.3);
  color: var(--champagne);
}
.ruta-uber-btn .material-icons { font-size: 1rem; }

/* ============================================================
   MAPA ARTÍSTICO — Iframe con trayecto dorado SVG
   ============================================================ */

/* Marco de lujo que envuelve todo el bloque cartográfico */
.mapa-art-frame {
  position: relative;
  border-radius: 40px;
  overflow: hidden;
  /* Borde gradiente dorado metálico vía outline + pseudo-elemento */
  background: #111827;
  box-shadow:
    0 0 0 1px rgba(173,131,47,0.55),
    0 0 0 2px rgba(212,168,75,0.18),
    0 30px 80px rgba(0,0,0,0.6),
    0 0 60px rgba(173,131,47,0.08) inset;
  margin-bottom: 2rem;
}

/* Borde gradiente animado sutil en el perímetro */
.mapa-art-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 40px;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(212,168,75,0.8) 0%,
    rgba(173,131,47,0.3) 25%,
    rgba(212,168,75,0.6) 50%,
    rgba(173,131,47,0.2) 75%,
    rgba(212,168,75,0.7) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 5;
  animation: mapaFrameShimmer 4s ease-in-out infinite;
}

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

/* Contenedor del iframe */
.mapa-art-iframe-wrap {
  position: relative;
  width: 100%;
  height: 420px;
  overflow: hidden;
  border-radius: 40px;
}

@media (max-width: 640px) {
  .mapa-art-iframe-wrap { height: 300px; }
}

/* Iframe con filtro estilo mapa minimalista crema */
.mapa-art-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  /* Filtro: escala de grises, inversión suave → tonos crema/blanco/gris */
  filter: grayscale(100%) invert(90%) contrast(90%) brightness(0.92) sepia(12%);
  pointer-events: none; /* desactiva scroll-wheel por defecto */
  transition: filter 0.4s ease;
}

/* Al activar interacción (clase .active), re-habilita el pointer */
.mapa-art-iframe-wrap.interactive .mapa-art-iframe {
  pointer-events: auto;
  filter: grayscale(100%) invert(90%) contrast(90%) brightness(0.92) sepia(12%);
}

/* Overlay radial — oscurece bordes, centra la atención */
.mapa-art-vignette {
  position: absolute;
  inset: 0;
  border-radius: 40px;
  background: radial-gradient(
    ellipse 70% 60% at 50% 50%,
    transparent 30%,
    rgba(62, 44, 42,0.45) 70%,
    rgba(62, 44, 42,0.85) 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* Capa SVG del trayecto dorado — se dibuja encima del iframe */
.mapa-art-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}

/* Trayecto dorado discontinuo — animación DrawSVG via stroke-dashoffset */
.mapa-trayecto {
  fill: none;
  stroke: #D4AF37;
  stroke-width: 3;
  stroke-dasharray: 10 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(212,168,75,0.8));
  /* stroke-dashoffset se controla vía JS con GSAP */
  stroke-dashoffset: var(--path-offset, 0);
}

/* Halo luminoso detrás del trayecto */
.mapa-trayecto-glow {
  fill: none;
  stroke: rgba(212,168,75,0.25);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: blur(4px);
}

/* Pins artísticos: círculo exterior con pulso */
.mapa-pin-outer {
  animation: mapaPinPing 2.2s ease-out infinite;
  transform-origin: center;
}
.mapa-pin-outer-b {
  animation: mapaPinPing 2.2s ease-out 0.7s infinite;
  transform-origin: center;
}
@keyframes mapaPinPing {
  0%   { opacity: 0.8; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(2.2); }
  100% { opacity: 0;   transform: scale(2.2); }
}

/* Botón "activar mapa interactivo" */
.mapa-art-activate {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.4rem;
  background: rgba(62, 44, 42,0.75);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(173,131,47,0.45);
  border-radius: 99px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(212,168,75,0.9);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s ease, border-color 0.25s ease, opacity 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}
.mapa-art-activate:hover {
  background: rgba(62, 44, 42,0.9);
  border-color: rgba(212,168,75,0.75);
}
.mapa-art-activate.hidden-btn {
  opacity: 0;
  pointer-events: none;
}
.mapa-art-activate .material-icons { font-size: 0.95rem; }

/* Etiquetas de pin sobre el mapa */
.mapa-pin-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: rgba(212,168,75,0.9);
  font-weight: 600;
}

/* ── Botones Flotantes de Navegación ── */
.mapa-nav-btns {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

@media (min-width: 480px) {
  .mapa-nav-btns { flex-direction: row; }
}

.mapa-nav-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0 1.5rem;
  border-radius: 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.2s ease;
  position: relative;
  overflow: hidden;
}
.mapa-nav-btn:active { transform: scale(0.97); }

/* Efecto shimmer en hover */
.mapa-nav-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
}
.mapa-nav-btn:hover::after { left: 160%; }

/* Google Maps — dorado */
.mapa-nav-btn-gmaps {
  background: linear-gradient(135deg, rgba(173,131,47,0.2) 0%, rgba(212,168,75,0.12) 100%);
  border: 1px solid rgba(173,131,47,0.5);
  color: var(--gold-light);
  box-shadow: 0 4px 20px rgba(173,131,47,0.15);
}
.mapa-nav-btn-gmaps:hover {
  background: linear-gradient(135deg, rgba(173,131,47,0.32) 0%, rgba(212,168,75,0.22) 100%);
  box-shadow: 0 6px 28px rgba(173,131,47,0.25);
}

/* Waze — verde neón suave */
.mapa-nav-btn-waze {
  background: linear-gradient(135deg, rgba(50,200,80,0.12) 0%, rgba(80,230,100,0.07) 100%);
  border: 1px solid rgba(80,210,80,0.35);
  color: #6ee87a;
  box-shadow: 0 4px 20px rgba(80,210,80,0.08);
}
.mapa-nav-btn-waze:hover {
  background: linear-gradient(135deg, rgba(50,200,80,0.22) 0%, rgba(80,230,100,0.14) 100%);
  box-shadow: 0 6px 28px rgba(80,210,80,0.16);
}

/* Ícono waze SVG */
.mapa-nav-btn-waze svg { flex-shrink: 0; }

/* ============================================================
   FOTO PAREJA — Full Bleed
   ============================================================ */
.pareja-foto-wrap {
  position: relative;
  width: 100%;
  height: clamp(340px, 65vw, 680px);
  overflow: hidden;
}
.pareja-foto-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  transform: scale(1.08);
  transition: transform 3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.pareja-foto-wrap.pf-visible .pareja-foto-img {
  transform: scale(1);
}
.pareja-foto-overlay {
  position: absolute;
  inset: 0;
  background:
    /* Fade superior — se funde con el fondo azul de arriba */
    linear-gradient(to bottom, #3a2422 0%, rgba(62, 44, 42,0) 28%),
    /* Fade inferior — se funde con el fondo azul de abajo */
    linear-gradient(to top,   #3a2422 0%, rgba(62, 44, 42,0) 28%),
    /* Velo central muy suave para legibilidad */
    radial-gradient(ellipse at center, rgba(62, 44, 42,0.15) 0%, rgba(62, 44, 42,0.45) 100%);
  pointer-events: none;
}
/* ── Foto overlay — sin caption, solo difuminado ── */
.pareja-foto-line {
  display: block;
  width: 44px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(173,131,47,0.6), transparent);
}

/* ── Versículo debajo de la foto ── */
.pareja-versiculo {
  background: var(--petroleum);
  text-align: center;
  padding: 2.5rem 1.5rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}
.pareja-versiculo-line {
  display: block;
  width: 48px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(173,131,47,0.55), transparent);
}
.pareja-versiculo-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.2rem, 3.2vw, 1.8rem);
  color: var(--champagne);
  line-height: 1.6;
  letter-spacing: 0.01em;
  max-width: 640px;
  margin: 0;
}
.pareja-versiculo-ref {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(173,131,47,0.7);
  font-style: normal;
}

/* ============================================================
   DRESSCODE — Paleta de colores
   ============================================================ */
.dc-palette {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.dc-palette-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(173,131,47,0.65);
}
.dc-swatches {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
}
.dc-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: default;
  flex-shrink: 0;
}
@media (min-width: 480px) {
  .dc-swatch { width: 36px; height: 36px; }
}
.dc-swatch:hover {
  transform: scale(1.18) translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
.dc-palette-avoid {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 300;
  color: rgba(239,238,236,0.3);
  letter-spacing: 0.05em;
  max-width: 320px;
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.dc-avoid-center {
  justify-content: center;
  margin-top: 1.5rem;
  text-align: left;
}
.dc-avoid-dot {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(239,120,100,0.5);
  margin-top: 0.35rem;
}

/* Aviso — Paleta Reservada (minimalista) */
.dc-avoid-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  margin-top: 2rem;
  background: rgba(173,131,47,0.08);
  border: 1px solid rgba(212,168,75,0.18);
  border-radius: 12px;
  padding: 1.2rem 1.6rem;
  max-width: 420px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.dc-avoid-dot-lg { display: none; }

.dc-avoid-swatches {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: nowrap;
}
@media (max-width: 360px) {
  .dc-avoid-swatches { flex-wrap: wrap; }
}
.dc-avoid-swatches .dc-swatch {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 3px 10px rgba(0,0,0,0.4);
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
@media (min-width: 480px) {
  .dc-avoid-swatches .dc-swatch { width: 44px; height: 44px; }
}
.dc-avoid-swatches .dc-swatch:active {
  transform: scale(0.9);
}

/* Tooltip del nombre del color */
.dc-swatch-tooltip {
  position: fixed;
  transform: translateX(-50%);
  background: rgba(15,20,35,0.95);
  border: 1px solid rgba(212,168,75,0.4);
  border-radius: 8px;
  padding: 0.35rem 0.75rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: rgba(239,238,236,0.92);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 9999;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.dc-swatch-tooltip.visible {
  opacity: 1;
}
.dc-avoid-text {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.7rem, 1.8vw, 0.78rem);
  font-style: normal;
  font-weight: 300;
  color: rgba(239,238,236,0.72);
  letter-spacing: 0.04em;
  line-height: 1.7;
  text-align: center;
  margin: 0;
  max-width: 320px;
}

/* ============================================================
   MÚSICA — Visualizador de barras
   ============================================================ */
.music-btn-wrap { position: relative; }

.music-bars {
  display: none;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
}
.music-bar {
  width: 3px;
  border-radius: 2px;
  background: #D4AF37;
  animation: musicBarBounce 0.8s ease-in-out infinite;
  transform-origin: bottom;
}
.music-bar:nth-child(1) { height: 6px;  animation-delay: 0s; }
.music-bar:nth-child(2) { height: 12px; animation-delay: 0.15s; }
.music-bar:nth-child(3) { height: 8px;  animation-delay: 0.3s; }
.music-bar:nth-child(4) { height: 14px; animation-delay: 0.1s; }

@keyframes musicBarBounce {
  0%, 100% { transform: scaleY(0.4); opacity: 0.6; }
  50%       { transform: scaleY(1);   opacity: 1; }
}

/* Cuando la música está activa */
.music-btn-wrap.music-playing .music-bars { display: flex; }
.music-btn-wrap.music-playing .music-icon-static { display: none; }

/* ============================================================
   MÚSICA — Control de volumen
   ============================================================ */
/* Contenedor inline: ícono + slider siempre visibles */
.volume-inline {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
.vol-toggle-btn {
  padding: 0.3rem 0.5rem !important;
  min-width: unset !important;
}
.vol-toggle-btn .material-icons {
  font-size: 1.2rem;
  color: rgba(239,238,236,0.6);
  transition: color 0.2s ease;
}
.vol-toggle-btn.music-playing .material-icons {
  color: var(--gold);
}
.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 64px;
  height: 3px;
  border-radius: 2px;
  background: rgba(173,131,47,0.25);
  outline: none;
  cursor: pointer;
  flex-shrink: 0;
}
.volume-slider.vc-visible { display: block; }
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.volume-slider::-webkit-slider-thumb:hover { transform: scale(1.3); }
.volume-slider::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--gold);
  border: none;
  cursor: pointer;
}
@media (max-width: 380px) {
  .volume-slider { width: 48px; }
}

/* ============================================================
   COUNTDOWN — Mensajes especiales (día y post-boda)
   ============================================================ */
.countdown-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  animation: fadeSlideUp 1s var(--ease-out-expo) both;
}
.countdown-message.hidden { display: none; }
.countdown-msg-icon {
  font-size: 2.2rem !important;
  color: var(--gold);
  animation: heartBeat 1.6s ease-in-out infinite;
}
.countdown-msg-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  font-style: italic;
  font-weight: 300;
  color: rgba(239,238,236,0.95);
  line-height: 1.2;
  text-align: center;
}
.countdown-msg-sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(212,168,75,0.6);
  text-align: center;
}

/* ============================================================
   COUNTDOWN — Estado post-boda (legacy)
   ============================================================ */
.countdown-complete {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  animation: fadeSlideUp 0.8s var(--ease-out-expo) both;
}
.countdown-complete-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  font-style: italic;
  color: var(--gold-light);
  font-weight: 300;
  line-height: 1.2;
  text-align: center;
}
.countdown-complete-sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(212,168,75,0.55);
}
.countdown-complete-hearts {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.25rem;
}
.countdown-complete-hearts span {
  font-size: 0.7rem;
  animation: heartBeat 1.4s ease-in-out infinite;
}
.countdown-complete-hearts span:nth-child(2) { animation-delay: 0.2s; }
.countdown-complete-hearts span:nth-child(3) { animation-delay: 0.4s; }
@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  25%       { transform: scale(1.3); }
}

/* ============================================================
   RSVP — Card confirmado (reemplaza el form)
   ============================================================ */
.rsvp-done-card {
  text-align: center;
  padding: 3rem 2rem 3.5rem;
  background: linear-gradient(145deg, rgba(78, 56, 54,0.7) 0%, rgba(62, 44, 42,0.9) 100%);
  border: 1px solid rgba(173,131,47,0.35);
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(212,168,75,0.12);
  margin: 2rem auto 0;
  max-width: 520px;
  width: 100%;
  opacity: 0;
  transform: translateY(30px) scale(0.97);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}
.rsvp-done-card--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.rsvp-done-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(173,131,47,0.12);
  border: 1px solid rgba(173,131,47,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  animation: heartBeat 1.6s ease-in-out infinite;
}
.rsvp-done-icon .material-icons {
  font-size: 2rem;
  color: var(--gold);
}
.rsvp-done-icon--no { animation: none; background: rgba(239,238,236,0.05); }
.rsvp-done-icon--no .material-icons { color: rgba(239,238,236,0.4); }
.rsvp-done-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 300;
  color: var(--champagne);
  margin: 0 0 0.4rem;
  line-height: 1.2;
}
.rsvp-done-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  font-style: italic;
  color: rgba(212,168,75,0.85);
  margin: 0 0 1rem;
  line-height: 1.4;
}
/* El acompañante al mismo tamaño/estilo que el nombre principal */
.rsvp-done-companion {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1em;
  font-style: italic;
  color: rgba(212,168,75,0.85);
  opacity: 1;
}
.rsvp-done-msg {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 300;
  color: rgba(239,238,236,0.55);
  line-height: 1.8;
  margin: 0 0 1.5rem;
}
.rsvp-done-divider {
  width: 48px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(173,131,47,0.5), transparent);
  margin: 0 auto 1rem;
}
.rsvp-done-date {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  color: rgba(212,168,75,0.7);
  margin: 0 0 0.25rem;
}
.rsvp-done-place {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(239,238,236,0.3);
  margin: 0 0 1.5rem;
}
.rsvp-done-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}
.rsvp-done-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid rgba(212,168,75,0.35);
  border-radius: 0.5rem;
  background: rgba(212,168,75,0.07);
  color: rgba(212,168,75,0.8);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rsvp-done-action-btn .material-icons { font-size: 0.95rem; }
.rsvp-done-action-btn:hover {
  background: rgba(212,168,75,0.15);
  border-color: rgba(212,168,75,0.6);
  color: rgba(212,168,75,1);
}
/* Dropdown calendario universal */
.rsvp-cal-wrap { position: relative; }
.rsvp-cal-dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  background: #1e2840;
  border: 1px solid rgba(212,168,75,0.3);
  border-radius: 0.6rem;
  padding: 0.4rem 0;
  z-index: 50;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.rsvp-cal-dropdown.hidden { display: none; }
.rsvp-cal-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 1rem;
  background: transparent;
  border: none;
  color: rgba(239,238,236,0.75);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.rsvp-cal-option:hover {
  background: rgba(212,168,75,0.1);
  color: rgba(212,168,75,1);
}

/* ============================================================
   MODAL ÉXITO POST-RSVP
   ============================================================ */
.success-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(10,14,22,0.85);
  backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.success-modal.open {
  opacity: 1;
  pointer-events: auto;
}
.success-modal-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: linear-gradient(145deg, #43292a 0%, #311f1f 100%);
  border: 1px solid rgba(173,131,47,0.35);
  border-radius: 24px;
  padding: 2.5rem 2rem 2rem;
  text-align: center;
  overflow: hidden;
  transform: scale(0.88) translateY(20px);
  transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(212,168,75,0.12);
}
.success-modal.open .success-modal-card {
  transform: scale(1) translateY(0);
}
.success-confetti-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: 24px;
}
.success-rings {
  margin-bottom: 1.25rem;
}
.success-ring {
  stroke-dasharray: 88;
  stroke-dashoffset: 88;
  transition: stroke-dashoffset 0.9s ease;
}
.success-modal.open .success-ring-l {
  stroke-dashoffset: 0;
  transition-delay: 0.3s;
}
.success-modal.open .success-ring-r {
  stroke-dashoffset: 0;
  transition-delay: 0.55s;
}
.success-modal-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.75rem;
  font-weight: 300;
  color: var(--champagne);
  margin: 0 0 0.25rem;
  line-height: 1.2;
}
.success-modal-names {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  font-style: italic;
  color: rgba(212,168,75,0.8);
  margin: 0 0 0.1rem;
}
.success-modal-date {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  color: rgba(173,131,47,0.5);
  margin-bottom: 1.25rem;
}
.success-modal-msg {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 300;
  color: rgba(239,238,236,0.55);
  line-height: 1.7;
  margin-bottom: 1.75rem;
}
.success-modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 2rem;
  background: transparent;
  border: 1px solid rgba(173,131,47,0.4);
  border-radius: 4px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(212,168,75,0.8);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.success-modal-btn:hover {
  background: rgba(173,131,47,0.1);
  border-color: rgba(212,168,75,0.65);
}

/* ============================================================
   RESPONSIVE — Tablet, Laptop, Desktop
   768px → tablet · 1024px → laptop · 1280px → desktop
   ============================================================ */

/* ── TABLET (≥ 768px) ── */
@media (min-width: 768px) {
  .pareja-versiculo {
    padding: 3rem 2.5rem 4rem;
  }

  /* Base de secciones — más respiro vertical */
  .section-dark {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  /* Countdown más grande */
  .countdown-item {
    min-width: 6rem;
    padding: 1rem 1.25rem;
  }

  /* Foto pareja — altura generosa en tablet */
  .pareja-foto-wrap {
    height: clamp(420px, 55vw, 600px);
  }

  /* Galería — más alta en tablet */
  .sg-stage {
    height: 60vw;
    max-height: 560px;
  }
  .sg-card {
    width: min(72vw, 420px);
  }

  /* RSVP form — padding generoso */
  .rsvp-form-container {
    padding: 2.5rem 3rem;
  }

  /* Ceremony cards — más padding */
  .ceremony-card {
    padding: 2.75rem 2.5rem;
  }

  /* Historia — imagen lateral más grande */
  .historia-img-wrap {
    width: 22rem !important;
  }

  /* Vestimenta — padding vertical */
  #vestimenta .max-w-2xl {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}

/* ── LAPTOP (≥ 1024px) ── */
@media (min-width: 1024px) {

  html { font-size: 17px; }

  /* Secciones — espacio generoso con padding lateral */
  .section-dark {
    padding-top: 9rem;
    padding-bottom: 9rem;
    padding-left: 3rem;
    padding-right: 3rem;
  }

  /* Contenedores — más anchos en pantalla grande */
  .max-w-3xl { max-width: 54rem !important; }
  .max-w-4xl { max-width: 64rem !important; }
  .max-w-5xl { max-width: 76rem !important; }

  /* Hero — contenido más amplio y centrado */
  #heroContent {
    max-width: 56rem;
  }

  /* Foto pareja — vista panorámica */
  .pareja-foto-wrap {
    height: clamp(480px, 48vw, 720px);
  }

  /* Galería — más grande */
  .sg-stage {
    height: 50vw;
    max-height: 640px;
  }
  .sg-card {
    width: min(55vw, 480px);
  }

  /* Historia — imagen lateral más grande */
  .historia-img-wrap {
    width: 26rem !important;
  }

  /* Ceremony cards — padding amplio */
  .ceremony-card {
    padding: 3.5rem 3rem;
  }
  .ceremony-card:hover {
    transform: translateY(-8px);
  }

  /* FAQ — más ancho */
  #faq .max-w-4xl {
    max-width: 66rem;
  }

  /* Galería — margen extra */
  #galeria .sg-stage {
    margin-bottom: 4rem;
  }

  /* Mapa — más alto */
  .mapa-iframe-wrap {
    height: 480px;
  }
}

/* ── DESKTOP (≥ 1280px) ── */
@media (min-width: 1280px) {

  html { font-size: 18px; }

  /* Secciones — máximo respiro con padding lateral amplio */
  .section-dark {
    padding-top: 10rem;
    padding-bottom: 10rem;
    padding-left: 4rem;
    padding-right: 4rem;
  }

  /* Foto pareja — cinematic, mucho más alta en desktop */
  .pareja-foto-wrap {
    height: clamp(680px, 70vh, 960px);
  }

  /* Galería */
  .sg-stage {
    height: 42vw;
    max-height: 700px;
  }
  .sg-card {
    width: min(45vw, 540px);
  }

  /* Ceremony grid — más espacio entre tarjetas */
  #ceremonia .grid {
    gap: 3rem;
  }

  /* Historia — texto más legible con line-height */
  #historia-content p {
    font-size: 1.1rem;
    line-height: 1.9;
  }

  /* Deseos — más ancho */
  #deseos .max-w-3xl {
    max-width: 60rem;
  }

  /* Regalos — centrado con respiro */
  #regalos .max-w-3xl {
    max-width: 56rem;
  }
}

/* ── WIDESCREEN (≥ 1536px) ── */
@media (min-width: 1536px) {
  .max-w-3xl { max-width: 60rem !important; }
  .max-w-4xl { max-width: 72rem !important; }
  .max-w-5xl { max-width: 84rem !important; }

  .pareja-foto-wrap {
    height: clamp(600px, 40vw, 880px);
  }

  .sg-card {
    width: min(38vw, 580px);
  }

  /* Timeline — 2×2 también en widescreen */
  .tl-scroll-track {
    grid-template-columns: 1fr 1fr;
    gap: 2.25rem;
  }
  .tl-card {
    flex: none;
    min-height: 300px;
  }
}

/* ============================================================
   DESKTOP — Control de volumen flotante
   ============================================================ */
#desktopMusicControl {
  display: none;
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 55;
  align-items: center;
  gap: 0.5rem;
  background: rgba(62, 44, 42,0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(173,131,47,0.25);
  border-radius: 9999px;
  padding: 0.5rem 1rem 0.5rem 0.65rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
@media (min-width: 769px) {
  #desktopMusicControl { display: flex; }
}
#desktopMuteBtn {
  display: flex;
  align-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: rgba(239,238,236,0.7);
  padding: 0.1rem;
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
#desktopMuteBtn:hover { color: var(--gold-light); }
#desktopMuteBtn .material-icons {
  font-size: 1.15rem;
  transition: color 0.2s ease;
  color: var(--gold);
}
#desktopMuteBtn.muted .material-icons {
  color: rgba(239,238,236,0.35);
}
#desktopVolumeSlider {
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: 3px;
  background: rgba(173,131,47,0.3);
  border-radius: 9999px;
  outline: none;
  cursor: pointer;
}
#desktopVolumeSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  transition: transform 0.15s ease;
}
#desktopVolumeSlider::-webkit-slider-thumb:hover { transform: scale(1.3); }
#desktopVolumeSlider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
  border: none;
  cursor: pointer;
}

/* ============================================================
   TEMA CLARO — XV CAMILA ZABALA
   Ajustes sobre el diseño original (que era oscuro) para que
   funcione sobre el fondo crema #f0e9e1. Se mantienen oscuros
   solo los overlays sobre fotografías y algunas tarjetas
   premium (pase, modal de éxito) que lucen bien sobre crema.
   ============================================================ */

/* Selección de texto: dorado con texto blanco */
::selection { background: rgba(176,141,79,0.35); color: #fff; }

/* Loader y fondos sólidos que eran oscuros → crema */
.page-loader { background: var(--petroleum); }
.loader-name, .loader-overline, .loader-subtitle { color: var(--champagne); }

/* Header: el logo "Camila" debe resaltar. Al hacer scroll el header se
   oscurece, por eso usamos el claro protagonista #ece5db con sombra. */
/* Logo "Camila":
   - Estado inicial (sobre el hero claro): vino oscuro para que se lea.
   - Al hacer scroll (.scrolled, header rosa): blanco. */
.main-header a {
  color: var(--rose-deep) !important;
  text-shadow: 0 1px 6px rgba(245,240,236,0.8);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: color 0.4s var(--ease-out-expo), text-shadow 0.4s var(--ease-out-expo);
}
.main-header.scrolled a {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(156,74,87,0.6), 0 2px 10px rgba(156,74,87,0.4);
}

/* Tarjetas con tinte translúcido claro: dar un blanco suave visible sobre crema */
.ceremony-card,
.rsvp-form-container,
.admin-stat,
.bank-transfer-card,
.momento-card.tl-card,
.faq-card-inner {
  background: rgba(255,255,255,0.55);
  box-shadow: 0 8px 30px rgba(140,117,96,0.10);
}

/* Tarjetas del muro de deseos y del panel admin: superficie blanca legible */
.wish-card,
.admin-msg-card,
.admin-song-card,
.admin-wish-card {
  background: rgba(255,255,255,0.7);
}

/* La tarjeta "confirmado" se mantiene oscura (texto claro) → luce premium sobre crema */

/* Sombras de texto pensadas para fondo oscuro → suaves sobre crema
   (solo donde el texto NO va sobre fotografía) */
.section-dark h2,
.section-dark h3,
.section-dark p,
.section-dark .tl-card-title,
.section-dark .faq-card-q { text-shadow: none; }

/* Notas/avisos translúcidos */
.dc-avoid-block { background: rgba(255,255,255,0.45); }

/* Sticky action bar: de vidrio oscuro → vidrio claro */
.sticky-bar {
  background: rgba(255,255,255,0.82) !important;
  border-top: 1px solid rgba(176,141,79,0.25);
  backdrop-filter: blur(14px);
}
.sticky-bar-btn, .sticky-bar-label { color: var(--champagne); }

/* Control de música desktop */
#desktopMusicControl { background: rgba(255,255,255,0.85); }
#desktopMuteIcon { color: var(--gold); }

/* Panel admin y modales que heredan var(--petroleum-light)=blanco quedan ok.
   Inputs admin sobre blanco: texto oscuro */
.admin-modal-input,
#adminSearchInput,
#adminPassword { color: var(--champagne) !important; }

/* Foto historia / vestimenta: las imágenes de fondo seguían con brightness(0.3).
   Las suavizamos para que el tema claro respire, conservando legibilidad del texto
   blanco mediante el overlay propio de cada sección. */
#historia .absolute.inset-0.z-0 img { filter: none !important; }

/* Footer: el texto del crédito y cita ya usan variables, queda ok */

/* ============================================================
   ACENTOS ROSADOS — toque juvenil
   ============================================================ */

/* Fondo general: tono neutro cálido (sin rosa); el rosa va en los detalles */
body { background: #f5f0ec; }
.section-dark { background: transparent; }

/* Líneas/divisores dorados → mezcla rosa-dorado */
.section-dark::before {
  background: linear-gradient(90deg, transparent, rgba(217,138,163,0.45), transparent);
}

/* "Capítulo / overline" en rosa para dar frescura */
.section-dark .text-gold.uppercase.tracking-\[0\.3em\] { color: var(--rose-deep); }

/* Divisor central de preludio: punto rosa */
#preludio .bg-gold\/60 { background: var(--rose) !important; }

/* Botones principales: rosa sólido */
.gold-glow,
.rsvp-btn,
.loader-enter-btn,
.sticky-bar-cta,
.wish-submit-btn {
  background: var(--rose) !important;
  color: #fff !important;
}
.gold-glow:hover,
.rsvp-btn:hover,
.loader-enter-btn:hover,
.sticky-bar-cta:hover,
.wish-submit-btn:hover { background: var(--rose-deep) !important; }
.hero-section a.bg-gold { background: var(--rose) !important; color:#fff !important; }
.hero-section a.bg-gold:hover { background: var(--rose-deep) !important; }

/* Iconos circulares de tarjetas con tinte rosa */
.ceremony-card .bg-gold\/10 { background: var(--rose-soft) !important; }
.ceremony-card .material-icons.text-gold { color: var(--rose-deep) !important; }

/* Burbuja/etiqueta de countdown y chips → rosa suave */
.countdown-item { border-color: rgba(217,138,163,0.25); }

/* Scrollbar rosa */
::-webkit-scrollbar-thumb { background: var(--rose); }
::selection { background: rgba(217,138,163,0.4); color: #fff; }

/* ============================================================
   MURO DE MENSAJES — composer tipo nota + tarjetas post-it
   ============================================================ */
.wish-composer {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  background: #fffdf9;
  border: 1px solid rgba(217,138,163,0.25);
  border-radius: 14px;
  padding: 1.75rem 1.5rem 1.25rem;
  box-shadow: 0 14px 40px rgba(192,107,134,0.14);
  transform: rotate(-1deg);
}
@media (max-width: 640px) {
  /* En móvil: sin rotación para que no se desborde y entre todo */
  .wish-composer { transform: none; padding: 1.5rem 1.25rem 1.1rem; }
  .wish-composer .wish-submit-btn { padding: 0.55rem 1rem; font-size: 0.68rem; }
  .wish-composer-text { font-size: 1.1rem; min-height: 80px; }
}
.wish-composer-tape {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 110px; height: 26px;
  background: rgba(242,192,207,0.65);
  border: 1px solid rgba(217,138,163,0.35);
  border-radius: 3px;
}
.wish-composer-text,
.wish-composer-trigger {
  width: 100%;
  min-height: 90px;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--champagne);
}
.wish-composer-text::placeholder { color: rgba(107,86,68,0.4); font-style: italic; }
.wish-composer-trigger {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
  color: rgba(107,86,68,0.55);
  font-style: italic;
}
.wish-composer-trigger .material-icons { color: var(--rose); }
.wish-composer-footer {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-top: 0.75rem;
  padding-top: 0.85rem;
  border-top: 1px dashed rgba(217,138,163,0.3);
}
.wish-composer-name {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  color: var(--champagne);
  padding: 0.4rem 0;
}
.wish-composer-name::placeholder { color: rgba(107,86,68,0.4); }
.wish-composer .wish-submit-btn {
  flex-shrink: 0;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
}

/* Tarjetas del muro → estilo post-it con cinta y leve rotación */
.wish-card {
  background: #fffdf9 !important;
  border: 1px solid rgba(217,138,163,0.22) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 26px rgba(192,107,134,0.12) !important;
  padding: 1.25rem 1.4rem !important;
}
.wishes-marquee-row > .wish-card:nth-child(3n)   { transform: rotate(1.2deg); }
.wishes-marquee-row > .wish-card:nth-child(3n+1) { transform: rotate(-1.4deg); }
.wishes-marquee-row > .wish-card:nth-child(3n+2) { transform: rotate(0.6deg); }
.wish-card p:last-child { color: var(--rose-deep) !important; opacity: 1 !important; }

/* ============================================================
   RED DE SEGURIDAD — nada puede quedar invisible
   Si por cualquier motivo el observer de JS no añade .visible
   (scroll restaurado, IO que no dispara, error JS previo),
   este fallback revela los elementos tras 1.2s. La animación
   solo afecta a los que NO tengan ya .visible.
   ============================================================ */
.reveal:not(.visible),
.reveal-left:not(.visible),
.reveal-right:not(.visible),
.reveal-scale:not(.visible),
.reveal-blur:not(.visible),
.reveal-rotate:not(.visible) {
  animation: revealFallback 0.8s ease 1.2s forwards;
}
@keyframes revealFallback {
  to { opacity: 1; transform: none; filter: blur(0); }
}

/* ============================================================
   RSVP — confirmación libre (opciones Sí/No)
   ============================================================ */
.rsvp-choice { flex: 1; cursor: pointer; }
.rsvp-choice-input { position: absolute; opacity: 0; pointer-events: none; }
.rsvp-choice-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1rem;
  border: 1.5px solid rgba(222,144,151,0.35);
  border-radius: 12px;
  background: rgba(255,255,255,0.5);
  color: var(--champagne);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  transition: all 0.25s var(--ease-out-expo);
}
.rsvp-choice-box .material-icons { color: var(--rose); font-size: 1.25rem; }
.rsvp-choice:hover .rsvp-choice-box { border-color: var(--rose); background: var(--rose-soft); }
.rsvp-choice-input:checked + .rsvp-choice-box {
  border-color: var(--rose-deep);
  background: var(--rose-soft);
  color: var(--rose-deep);
  box-shadow: 0 6px 18px rgba(201,110,119,0.18);
}
.rsvp-choice-input:checked + .rsvp-choice-box .material-icons { color: var(--rose-deep); }
.rsvp-choice-input:focus-visible + .rsvp-choice-box { outline: 2px solid var(--rose); outline-offset: 2px; }

.rsvp-input--error { border-color: var(--rose-deep) !important; box-shadow: 0 0 0 2px rgba(201,110,119,0.2); }

/* RSVP siempre visible — sección crítica, no debe depender de la animación */
#rsvp .reveal,
#rsvp .reveal-scale,
#rsvp .reveal-left,
#rsvp .reveal-right {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* RSVP — formulario visible sobre el tema claro
   (los inputs originales eran transparentes para el tema oscuro). */
.rsvp-form-container {
  background: #ffffff !important;
  border: 1px solid rgba(222,144,151,0.35) !important;
  box-shadow: 0 14px 40px rgba(201,110,119,0.14) !important;
}
.rsvp-input {
  background: #fbf6f3 !important;
  border: 1px solid rgba(201,110,119,0.3) !important;
  border-radius: 10px;
  padding: 0.8rem 1rem !important;
  color: var(--champagne) !important;
}
.rsvp-input:focus {
  border-color: var(--rose-deep) !important;
  box-shadow: 0 0 0 3px rgba(222,144,151,0.18);
}
.rsvp-input::placeholder { color: rgba(107,86,68,0.45) !important; }

/* Emblema decorativo en el panel de Historia (reemplaza la foto) */
.historia-card-emblem {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.25rem;
  color: var(--rose-deep);
}
.historia-card-emblem .material-icons { font-size: 3rem; opacity: 0.85; }
.historia-card-xv {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3.5rem; font-weight: 300; line-height: 1;
  color: var(--champagne);
}


/* ============================================================
   RSVP RECONSTRUIDO — autocontenido, siempre visible
   No depende de .reveal, observers ni del tema. Estilos
   explícitos para que el formulario SIEMPRE se vea.
   ============================================================ */
.xv-rsvp {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative;
  z-index: 5;
  padding: 4rem 1.25rem 5rem;
  background: #f5f0ec;
}
.xv-rsvp-inner {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}
.xv-rsvp-eyebrow {
  color: #c96e77;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
}
.xv-rsvp-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2rem, 7vw, 3rem);
  color: #6b5644;
  margin: 0 0 0.75rem;
  font-weight: 400;
}
.xv-rsvp-sub {
  color: #8a7560;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0 auto 2rem;
  max-width: 420px;
}
.xv-rsvp-card {
  background: #ffffff;
  border: 1px solid rgba(222,144,151,0.3);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(201,110,119,0.15);
  padding: 1.75rem 1.5rem;
  text-align: left;
}
.xv-field { margin-bottom: 1.35rem; display: flex; flex-direction: column; }
.xv-label {
  display: block;
  color: #c96e77;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.xv-input {
  width: 100%;
  background: #fbf6f3;
  border: 1px solid rgba(201,110,119,0.3);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  color: #5a4a3a;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.xv-input::placeholder { color: rgba(107,86,68,0.45); }
.xv-input:focus {
  border-color: #c96e77;
  box-shadow: 0 0 0 3px rgba(222,144,151,0.18);
}
.xv-choices { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.xv-choice { flex: 1; min-width: 140px; cursor: pointer; }
.xv-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.xv-choice-box {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.9rem 1rem;
  border: 1.5px solid rgba(222,144,151,0.4);
  border-radius: 12px;
  background: #fbf6f3;
  color: #6b5644;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  text-align: center;
  transition: all 0.2s;
}
.xv-choice-box svg { color: #de9097; flex-shrink: 0; margin-right: 0.15rem; }
.xv-choice input:checked + .xv-choice-box svg { color: #c96e77; }
.xv-choice:hover .xv-choice-box { border-color: #de9097; background: #f9e6e8; }
.xv-choice input:checked + .xv-choice-box {
  border-color: #c96e77;
  background: #f9e6e8;
  color: #c96e77;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(201,110,119,0.18);
}
.xv-submit {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 1rem;
  border: none;
  border-radius: 999px;
  background: #de9097;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.xv-submit:hover { background: #c96e77; }
.xv-submit:active { transform: scale(0.98); }
.xv-submit:disabled { opacity: 0.6; cursor: default; }
.xv-input--error { border-color: #c96e77; box-shadow: 0 0 0 3px rgba(201,110,119,0.2); }
.xv-done-icon { color: #c96e77; display: flex; justify-content: center; }
.xv-done-title { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; color: #6b5644; margin: 0.5rem 0 0.25rem; }
.xv-done-msg { color: #8a7560; font-family: 'Montserrat', sans-serif; font-size: 0.9rem; margin: 0; }
.xv-done-name { font-family: 'Pinyon Script', cursive; font-size: 2rem; color: #c96e77; margin: 0.75rem 0 0; }
.xv-done-date { color: rgba(107,86,68,0.6); font-size: 0.75rem; margin: 0.25rem 0 0; }
@media (min-width: 640px) {
  .xv-rsvp-card { padding: 2.5rem 2rem; }
}

/* ============================================================
   TEXTURA FLORAL REAL — fondo de secciones alternadas
   La ilustración botánica (fondo.jpg) se aplica vía ::before y
   se DIFUMINA hacia el fondo de la plataforma (#f5f0ec) en los
   bordes superior e inferior con una máscara de degradado, para
   que las secciones se fundan suavemente entre sí.
   ============================================================ */
/* La textura va en el BACKGROUND de la sección (no en ::before, que ya lo
   usa .section-dark para el glow). El difuminado superior/inferior hacia el
   fondo de la plataforma se logra con degradados crema apilados sobre la
   imagen. Un ::after añade un velo muy ligero para legibilidad. */
.has-floral {
  position: relative;
  background-color: #f5f0ec;
  background-image:
    linear-gradient(to bottom,
      #f5f0ec 0%, rgba(245,240,236,0) 14%,
      rgba(245,240,236,0) 86%, #f5f0ec 100%),
    url("assets/img/tex/floral-real.webp");
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 620px auto;
  background-position: center, center;
}
.has-floral::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(245,240,236,0.35);
  pointer-events: none;
}
.has-floral > * { position: relative; z-index: 1; }

/* ============================================================
   LOADER v2 — diseño nuevo + tiara realista de princesa
   ============================================================ */
.loader-center--v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  padding: 1.5rem;
}

/* — Tiara — */
.loader-tiara-wrap {
  opacity: 0;
  transform: translateY(-12px) scale(0.92);
  transition: opacity 1s ease 0.2s, transform 1.1s cubic-bezier(0.16,1,0.3,1) 0.2s;
  filter: drop-shadow(0 6px 14px rgba(176,141,79,0.28));
  margin-bottom: 0.6rem;
}
.page-loader.animating .loader-tiara-wrap { opacity: 1; transform: translateY(0) scale(1); }
.loader-tiara { width: clamp(180px, 46vw, 240px); height: auto; }

/* Trazo animado de la tiara */
.t-draw { stroke-dasharray: 240; stroke-dashoffset: 240; }
.page-loader.animating .t-band   { animation: tiaraDraw 1s ease 0.5s forwards; }
.page-loader.animating .t-band2  { animation: tiaraDraw 1s ease 0.7s forwards; }
.page-loader.animating .t-spikeLL,
.page-loader.animating .t-spikeRR { animation: tiaraDraw 0.9s ease 0.9s forwards; }
.page-loader.animating .t-spikeL,
.page-loader.animating .t-spikeR { animation: tiaraDraw 0.9s ease 1.05s forwards; }
.page-loader.animating .t-scroll { animation: tiaraDraw 1.2s ease 1.2s forwards; }
@keyframes tiaraDraw { to { stroke-dashoffset: 0; } }

/* Joyas — aparecen con brillo después del trazo */
.t-gem { opacity: 0; transform: scale(0); transform-origin: center; transform-box: fill-box; }
.page-loader.animating .t-gem-center { animation: gemShine 0.6s cubic-bezier(0.34,1.56,0.64,1) 1.9s forwards; }
.page-loader.animating .t-gem-1 { animation: gemShine 0.5s cubic-bezier(0.34,1.56,0.64,1) 2.1s forwards; }
.page-loader.animating .t-gem-2 { animation: gemShine 0.5s cubic-bezier(0.34,1.56,0.64,1) 2.2s forwards; }
.page-loader.animating .t-gem-3 { animation: gemShine 0.5s cubic-bezier(0.34,1.56,0.64,1) 2.3s forwards; }
.page-loader.animating .t-gem-4 { animation: gemShine 0.5s cubic-bezier(0.34,1.56,0.64,1) 2.35s forwards; }
/* las dos joyas sin clase numerada (centro inferior) */
.page-loader.animating .t-gem:not([class*="t-gem-"]) { animation: gemShine 0.5s cubic-bezier(0.34,1.56,0.64,1) 2.0s forwards; }
@keyframes gemShine {
  0% { opacity: 0; transform: scale(0); }
  70% { opacity: 1; transform: scale(1.3); }
  100% { opacity: 1; transform: scale(1); }
}
.t-pearls { opacity: 0; }
.page-loader.animating .t-pearls { animation: fadeIn 0.6s ease 2.4s forwards; }
@keyframes fadeIn { to { opacity: 1; } }
.loader-sparkle-grp { opacity: 0; }
.page-loader.animating .loader-sparkle-grp { animation: sparkleTwinkle 1.8s ease-in-out 2.6s infinite; }

/* — Fecha — */
.loader-overline--v2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.62rem, 2.4vw, 0.72rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--champagne-dark);
  margin: 0.4rem 0 0.9rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.8s ease 1.5s, transform 0.8s ease 1.5s;
}
.page-loader.animating .loader-overline--v2 { opacity: 0.85; transform: translateY(0); }

/* — Línea ornamental — */
.loader-orn {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  margin-bottom: 1rem;
  opacity: 0; transition: opacity 0.9s ease 1.7s;
}
.page-loader.animating .loader-orn { opacity: 1; }
.loader-orn-line { width: clamp(34px, 14vw, 64px); height: 1px;
  background: linear-gradient(90deg, transparent, var(--rose)); }
.loader-orn-line:last-child { background: linear-gradient(90deg, var(--rose), transparent); }
.loader-orn-diamond { width: 7px; height: 7px; background: var(--rose-deep);
  transform: rotate(45deg); border-radius: 1px; }

/* — Nombre v2: combinación tipográfica — */
.loader-name-v2 {
  display: flex; flex-direction: column; align-items: center; line-height: 1;
  margin-bottom: 0.5rem;
}
.loader-mis {
  font-style: italic;
  font-size: clamp(1.1rem, 4.5vw, 1.6rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--champagne);
  opacity: 0; transform: translateY(12px) translateX(-6px);
  transition: opacity 0.9s ease 1.9s, transform 1s cubic-bezier(0.16,1,0.3,1) 1.9s;
}
.page-loader.animating .loader-mis { opacity: 1; transform: translateY(0) translateX(0); }
.loader-camila {
  font-size: clamp(3.4rem, 16vw, 6rem);
  color: var(--rose-deep);
  line-height: 0.9;
  margin-top: -0.1em;
  opacity: 0; transform: translateY(16px) scale(0.96);
  transition: opacity 1s ease 2.1s, transform 1.1s cubic-bezier(0.16,1,0.3,1) 2.1s;
  text-shadow: 0 4px 18px rgba(201,110,119,0.22);
}
.page-loader.animating .loader-camila { opacity: 1; transform: translateY(0) scale(1); }

/* — Subtítulo v2 — */
.loader-subtitle--v2 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(0.95rem, 3.5vw, 1.15rem);
  letter-spacing: 0.18em;
  color: var(--champagne-dark);
  margin: 0.3rem 0 0;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.9s ease 2.4s, transform 0.9s ease 2.4s;
}
.page-loader.animating .loader-subtitle--v2 { opacity: 0.8; transform: translateY(0); }

/* — Botón v2 — */
.loader-enter-btn--v2 {
  opacity: 0 !important;
  transform: translateY(18px) !important;
  height: auto !important;
  margin-top: 1.6rem !important;
  padding: 0.9rem 2.6rem !important;
  background: var(--rose) !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 26px rgba(201,110,119,0.28) !important;
  transition: opacity 0.9s ease 2.7s, transform 0.9s cubic-bezier(0.16,1,0.3,1) 2.7s,
              background 0.3s ease, box-shadow 0.3s ease !important;
}
.page-loader.animating .loader-enter-btn--v2 { opacity: 1 !important; transform: translateY(0) !important; }
.loader-enter-btn--v2:hover { background: var(--rose-deep) !important; box-shadow: 0 14px 32px rgba(201,110,119,0.36) !important; }
.loader-enter-btn--v2 .loader-btn-text {
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-style: normal !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}

/* ============================================================
   PANEL ADMIN — tema claro: texto legible sobre fondo blanco
   ============================================================ */
.admin-panel,
.admin-panel h2, .admin-panel h3, .admin-panel p, .admin-panel span,
.admin-table td, .admin-guest-card-name, .admin-guest-card-sub,
.admin-guest-card-date, .admin-guest-card-song,
.admin-msg-card, .admin-wish-card, .admin-song-card { color: var(--champagne); }
.admin-guest-card {
  background: #fbf6f3 !important;
  border: 1px solid rgba(176,141,79,0.18) !important;
}
.admin-guest-card-sub, .admin-guest-card-date { color: var(--champagne-dark) !important; opacity: 0.9; }
.admin-stat { background: #fbf6f3 !important; border-color: rgba(176,141,79,0.22) !important; }
.admin-table tr:hover td { background: rgba(222,144,151,0.06); }
.admin-msg-card, .admin-wish-card, .admin-song-card {
  background: #fbf6f3 !important;
  border: 1px solid rgba(176,141,79,0.16) !important;
}
.admin-song-card { background: var(--rose-soft) !important; border-color: rgba(222,144,151,0.28) !important; }
.admin-song-icon { color: var(--rose-deep) !important; opacity: 1 !important; }
.admin-song-title { color: var(--champagne) !important; }
.admin-song-guest { color: var(--rose-deep) !important; }
/* Inputs admin */
.admin-modal-input, #adminSearchInput, #adminPassword,
#modalGuestName, #modalGuestNum {
  background: #fbf6f3 !important;
  color: var(--champagne) !important;
  border: 1px solid rgba(201,110,119,0.3) !important;
}
.admin-modal-input::placeholder, #adminSearchInput::placeholder { color: rgba(107,86,68,0.45) !important; }
/* Modal admin (agregar/editar) sobre fondo claro */
.admin-modal-content { background: #ffffff !important; }

/* ── Filtros y botones del panel: texto bien visible ── */
.admin-filter {
  color: var(--champagne) !important;
  border-color: rgba(176,141,79,0.3) !important;
  font-weight: 500;
}
.admin-filter .material-icons { color: var(--rose) !important; }
.admin-filter:hover { border-color: var(--rose) !important; color: var(--rose-deep) !important; background: var(--rose-soft) !important; }
.admin-filter.active,
.admin-filter[style*="rgba(173,131,47,0.3)"] {
  background: var(--rose-deep) !important;
  border-color: var(--rose-deep) !important;
  color: #fff !important;
}
.admin-filter.active .material-icons { color: #fff !important; }

.admin-btn { font-weight: 500; }
.admin-btn-gold {
  background: var(--rose-soft) !important;
  border: 1px solid rgba(222,144,151,0.4) !important;
  color: var(--rose-deep) !important;
}
.admin-btn-gold .material-icons { color: var(--rose-deep) !important; }
.admin-btn-gold:hover { background: rgba(222,144,151,0.25) !important; }
.admin-btn-orange { color: #b9621f !important; }
.admin-btn-orange .material-icons { color: #b9621f !important; }
.admin-btn-red { color: #c0392b !important; }
.admin-btn-red .material-icons { color: #c0392b !important; }

/* Encabezados de tabla y títulos: contraste */
.admin-table th { color: var(--rose-deep) !important; }
.admin-panel h2, .admin-panel h3 { color: var(--champagne) !important; }
#adminWishCount, #adminSongCount { color: var(--rose-deep) !important; }

/* ── Entrada celebratoria de la tarjeta de confirmación ── */
.xv-done--pop { animation: xvDonePop 0.7s cubic-bezier(0.34,1.56,0.64,1) both; }
@keyframes xvDonePop {
  0%   { opacity: 0; transform: scale(0.85) translateY(20px); }
  60%  { opacity: 1; transform: scale(1.03) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.xv-done--pop .xv-done-icon { animation: xvIconPulse 1.4s ease-in-out 0.5s 2; transform-origin: center; }
@keyframes xvIconPulse {
  0%,100% { transform: scale(1) rotate(0); }
  25%     { transform: scale(1.18) rotate(-8deg); }
  75%     { transform: scale(1.12) rotate(8deg); }
}
.xv-done--pop .xv-done-name { animation: xvNameGlow 2s ease-in-out 0.3s 1; }
@keyframes xvNameGlow {
  0%,100% { text-shadow: 0 2px 10px rgba(201,110,119,0.2); }
  50%     { text-shadow: 0 2px 26px rgba(222,144,151,0.7); }
}

/* Botón del loader v2 con texto más largo: que entre bien en móvil */
@media (max-width: 480px) {
  .loader-enter-btn--v2 { padding: 0.85rem 1.6rem !important; max-width: 90vw; }
  .loader-enter-btn--v2 .loader-btn-text {
    white-space: normal !important;
    font-size: 0.7rem !important;
    line-height: 1.35;
    text-align: center;
  }
}

/* ============================================================
   VENUE CARD — diseño moderno tipo "event ticket" (Hotel Zeus)
   ============================================================ */
.venue-card {
  position: relative;
  background: #ffffff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(176,141,79,0.16), 0 4px 14px rgba(201,110,119,0.08);
  border: 1px solid rgba(222,144,151,0.18);
}

/* — Foto con overlay — */
.venue-card-photo {
  position: relative;
  height: 230px;
  overflow: hidden;
}
@media (max-width: 640px) { .venue-card-photo { height: 200px; } }
.venue-card-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 6s ease;
}
.venue-card:hover .venue-card-img { transform: scale(1.06); }
.venue-card-shade {
  position: absolute; inset: 0;
  /* Más oscuro abajo para que el texto blanco resalte bien */
  background: linear-gradient(180deg, rgba(50,32,30,0) 25%, rgba(50,32,30,0.45) 58%, rgba(45,28,26,0.88) 100%);
}
.venue-card-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.25rem 1.5rem 1.1rem;
  text-align: left;
}
.venue-card-tag {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #f8dcb6;
  margin-bottom: 0.25rem;
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}
.venue-card-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.1rem;
  font-weight: 600;
  color: #fff;
  line-height: 1;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0,0,0,0.55), 0 4px 18px rgba(0,0,0,0.45);
}
.venue-card-sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  margin: 0.35rem 0 0;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}

/* — Separador perforado tipo ticket — */
.venue-card-perf {
  position: relative;
  display: flex; align-items: center;
  height: 26px;
  background: #ffffff;
}
.venue-perf-line {
  flex: 1;
  height: 0;
  margin: 0 14px;
  border-top: 2px dashed rgba(222,144,151,0.4);
}
.venue-perf-notch {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #f5f0ec;           /* color del fondo de la sección */
  box-shadow: inset 0 1px 2px rgba(176,141,79,0.18);
}
.venue-perf-notch.left  { margin-left: -11px; }
.venue-perf-notch.right { margin-right: -11px; }

/* — Cuerpo con detalles (diseño centrado, como antes) — */
.venue-card-body {
  padding: 1.5rem 1.75rem 2rem;
}
.venue-card-body--centered { text-align: center; }