/* ========================================
   BODA ABEL & JHOSSELIN — 23 de Mayo 2026
   styles.css — Diseño elegante premium
   ======================================== */

/* === VARIABLES === */
:root {
  --petroleum: #1a2030;
  --petroleum-light: #243044;
  --champagne: #efeeec;
  --champagne-dark: #e8dcc8;
  --gold: #ad832f;
  --gold-light: #d4a84b;

  --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; }


/* === 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); }
}

/* 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: var(--gold, #d4a84b);
  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(18, 32, 60, 0.35) 55%,
    rgba(15, 25, 50, 0.7) 85%,
    rgba(12, 20, 45, 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(26, 32, 48, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 30px rgba(0,0,0,0.2);
}

/* === 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;
  background: linear-gradient(180deg, rgba(26,32,48,0.3) 0%, rgba(26,32,48,0.7) 50%, rgba(26,32,48,0.95) 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(26, 32, 48, 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: #141b2b;
  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,
    #1e2d45 0%,
    #162236 40%,
    #0f1a2b 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: 300;
  color: rgba(239,238,236,0.65);
  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(15,20,35,0.99);
  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: rgba(239,238,236,0.8);
  border-bottom: 1px solid rgba(239,238,236,0.08);
  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: linear-gradient(160deg, #1e2d45 0%, #162236 100%);
  border: 1px solid rgba(212,168,75,0.3);
  border-radius: 16px;
  padding: 2rem 1.75rem 1.5rem;
  max-width: 380px; width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(212,168,75,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: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(212,168,75,0.12);
  border: 1px solid rgba(212,168,75,0.3);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
.admin-confirm-icon .material-icons { color: var(--gold); font-size: 1.5rem; }
.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.4rem; font-weight: 300;
  color: var(--champagne); margin: 0 0 0.5rem;
}
.admin-confirm-msg {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem; color: rgba(239,238,236,0.55);
  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.6rem 1rem;
  border-radius: 8px; border: 1px solid rgba(255,255,255,0.12);
  background: transparent; color: rgba(239,238,236,0.5);
  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: rgba(255,255,255,0.25); color: var(--champagne); }
.admin-confirm-ok {
  flex: 1; padding: 0.6rem 1rem;
  border-radius: 8px; border: 1px solid rgba(212,168,75,0.4);
  background: rgba(173,131,47,0.2); color: var(--gold);
  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: rgba(173,131,47,0.35); }
.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(26,32,48,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(26,32,48,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(26,32,48,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 READABILITY === */
#vestimenta .relative.z-10 h2,
#vestimenta .relative.z-10 p,
#vestimenta .relative.z-10 span {
  text-shadow: 0 2px 12px rgba(26, 32, 48, 0.8), 0 1px 4px rgba(0,0,0,0.5);
}
#vestimenta .relative.z-10 h2 {
  text-shadow: 0 3px 16px rgba(26, 32, 48, 0.9), 0 1px 6px rgba(0,0,0,0.6);
}

/* === 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(26, 32, 48, 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(36,48,68,0.92) 0%, rgba(26,32,48,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(26,32,48,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;
  /* Sombra de profundidad sobre el slideshow */
  text-shadow:
    0 2px 8px  rgba(26, 32, 48, 0.60),
    0 4px 20px rgba(26, 32, 48, 0.45),
    0 8px 40px rgba(26, 32, 48, 0.25);
}

/* Línea 1: "El Viaje" */
.hero-h1-line1 {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  color: #f5f3f0;
  /* 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 dorado: no hereda text-shadow del padre → usa su propia sombra */
  text-shadow: none;
  background: linear-gradient(160deg, #edc96a 0%, #d4a84b 55%, #c49035 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(26, 32, 48, 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(26, 32, 48, 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(26,32,48,0.3) 70%,
    rgba(26,32,48,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: #d4a84b;
}

.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(26,32,48,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(26,32,48,0.45);
  backdrop-filter: blur(2px);
  transition: background 0.2s ease;
}
.ruta-map-preview:hover .ruta-map-overlay {
  background: rgba(26,32,48,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(26,32,48,0.45) 70%,
    rgba(26,32,48,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(26,32,48,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(26,32,48,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: #d4a84b;
  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, #1a2030 0%, rgba(26,32,48,0) 28%),
    /* Fade inferior — se funde con el fondo azul de abajo */
    linear-gradient(to top,   #1a2030 0%, rgba(26,32,48,0) 28%),
    /* Velo central muy suave para legibilidad */
    radial-gradient(ellipse at center, rgba(26,32,48,0.15) 0%, rgba(26,32,48,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: 300;
  font-size: clamp(1.05rem, 2.8vw, 1.65rem);
  color: rgba(239,238,236,0.82);
  line-height: 1.65;
  letter-spacing: 0.02em;
  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(36,48,68,0.7) 0%, rgba(26,32,48,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, #1e2535 0%, #161c2b 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(26,32,48,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;
}