/* ==========================================================================
   AWWWARDS-GRADE DESIGN SYSTEM & EDITORIAL AESTHETICS
   Inspirado en Helias Oils, Species in Pieces, Palomino & Everwonder Studio
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,600;0,6..96,800;1,6..96,400&family=Cinzel:wght@400;600;700;900&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,400;1,600&family=Great+Vibes&family=Italiana&family=Montserrat:wght@300;400;500;600;700&family=Pinyon+Script&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap');

:root {
  --bg-parchment: #FAF7F2;
  --bg-parchment-warm: #F4EFE6;
  --bg-card: rgba(255, 255, 255, 0.85);
  --bg-card-alt: rgba(253, 251, 247, 0.9);
  
  --text-primary: #221D18;
  --text-muted: #6E6259;
  --text-light: #9C8E84;
  
  --gold-primary: #C5A059;
  --gold-dark: #997531;
  --gold-light: #E9D8A6;
  --gold-gradient: linear-gradient(135deg, #C5A059 0%, #F3E5AB 50%, #A07936 100%);
  --gold-soft-gradient: linear-gradient(135deg, rgba(197, 160, 89, 0.15) 0%, rgba(243, 229, 171, 0.25) 100%);
  --gold-shimmer-gradient: linear-gradient(90deg, transparent 0%, rgba(255,248,220,0.6) 50%, transparent 100%);

  --rose-vintage: #D4A5A5;
  --olive-vintage: #7A8B7B;
  --burgundy-vintage: #6B2D35;

  --border-vintage: rgba(197, 160, 89, 0.38);
  --border-vintage-light: rgba(197, 160, 89, 0.2);

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-script: 'Pinyon Script', cursive;
  --font-display: 'Cinzel', serif;
  --font-editorial: 'Bodoni Moda', 'Italiana', serif;
  --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 9999px;

  --shadow-soft: 0 10px 30px rgba(44, 36, 30, 0.06);
  --shadow-hover: 0 20px 45px rgba(197, 160, 89, 0.18);
  --shadow-gold: 0 8px 32px rgba(197, 160, 89, 0.35);
}

/* 1. Reset Global & Textura de Grano Fílmico (Film Grain Overlay) */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: clamp(14px, 0.92rem + 0.25vw, 18px);
  scroll-behavior: initial; /* Lenis maneja el scroll */
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

body {
  font-family: var(--font-serif);
  background-color: var(--bg-parchment);
  color: var(--text-primary);
  line-height: 1.65;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  position: relative;
  transition: background-color 0.5s ease, color 0.5s ease;
  text-rendering: optimizeLegibility;
}

/* Film Grain Texture - Ubicado en z-index: 1, DETRÁS de .wedding-app-wrapper (z-index: 2) para no pixelar el texto */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.02'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

/* En modo preview o iframe, deshabilitar film grain para máxima fidelidad */
html.in-preview-iframe body::before,
body.in-preview-iframe::before {
  display: none !important;
}

body.lock-scroll {
  overflow: hidden;
  min-height: 100dvh;
  height: 100dvh;
}

#preloaderScreen {
  position: fixed;
  inset: 0;
  z-index: 10001; /* sobre .envelope-screen (10000) */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-parchment);
  opacity: 1;
  transition: opacity 0.3s ease;
}
.preloader-monogram {
  font-family: var(--font-script);
  font-size: clamp(2rem, 6vw, 3.5rem);
  color: var(--gold-primary);
}

/* 2. Cursor Magnético de Oro Líquido (Awwwards Grade) */
@media (hover: hover) and (pointer: fine) {
  body {
    cursor: none;
  }
  a, button, input, select, textarea, .theme-card-option, .wax-seal-btn {
    cursor: none !important;
  }
}

@media (hover: none) and (pointer: coarse), (max-width: 768px) {
  .award-cursor-dot,
  .award-cursor-ring,
  .award-cursor-label {
    display: none !important;
  }
}

.award-cursor-dot {
  position: fixed;
  top: -4px;
  left: -4px;
  width: 8px;
  height: 8px;
  background: var(--gold-primary);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999999;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.8);
  transition: transform 0.05s linear, width 0.2s, height 0.2s, opacity 0.2s;
}

.award-cursor-dot.hovering {
  width: 12px;
  height: 12px;
  background: #FFFFFF;
}

.award-cursor-dot.dot-hidden {
  opacity: 0;
  transform: scale(0);
}

.award-cursor-ring {
  position: fixed;
  top: -20px;
  left: -20px;
  width: 40px;
  height: 40px;
  border: 1.5px solid rgba(197, 160, 89, 0.6);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999998;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
              height 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
              top 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              left 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-radius 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.3s, 
              border-color 0.3s,
              box-shadow 0.35s ease;
}

.award-cursor-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #FFE8A3;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.award-cursor-ring.hovering {
  width: 58px;
  height: 58px;
  top: -29px;
  left: -29px;
  border-color: var(--gold-light);
  background-color: rgba(197, 160, 89, 0.12);
  backdrop-filter: blur(2px);
}

.award-cursor-ring.has-label {
  min-width: 90px;
  width: auto;
  height: 32px;
  top: -16px;
  left: -45px;
  padding: 0 16px;
  border-radius: 16px;
  background: rgba(15, 12, 8, 0.85);
  border-color: rgba(197, 160, 89, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 16px rgba(197, 160, 89, 0.35);
}

.award-cursor-ring.has-label .award-cursor-label {
  opacity: 1;
  transform: scale(1);
}

.award-cursor-ring.clicking {
  transform: scale(0.85);
  border-color: #FFFFFF;
}

/* 3. Canvas de Partículas en Fondo */
#petalsCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* 4. Barra Flotante de Acceso y Audio */
/* Anti-Recursión: Ocultar badges dentro de simulador Studio o preview */
html.in-preview-iframe #floatingNavigationBadges,
html.in-preview-iframe .floating-navigation-badges,
html.in-preview-iframe .admin-floating-badge,
html.in-preview-iframe a[href*="studio.html"],
body.in-preview-iframe #floatingNavigationBadges,
body.in-preview-iframe .floating-navigation-badges,
body.in-preview-iframe .admin-floating-badge,
body.in-preview-iframe a[href*="studio.html"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

.admin-floating-badge {
  background: var(--bg-card);
  border: 1px solid var(--border-vintage);
  color: var(--text-primary);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.admin-floating-badge:hover {
  border-color: var(--gold-primary);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.music-toggle-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  /* FAB solido: el icono oro sobre fondo blanco daba 2.46:1 (WCAG 1.4.11 pide
     3:1) — practicamente invisible. Ahora icono oscuro sobre oro = 6.2:1. */
  background: var(--gold-primary);
  border: 1px solid var(--gold-dark);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25), 0 0 0 4px rgba(255, 255, 255, 0.6);
  z-index: 99;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.music-toggle-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3), 0 0 0 4px rgba(255, 255, 255, 0.7);
}

.music-toggle-btn.is-playing {
  animation: spinSlow 8s linear infinite;
  background: var(--gold-dark);
  color: #FFFFFF;
}

/* 5. Apertura Ceremonial Dinámica de Alta Costura */
.envelope-screen {
  position: fixed;
  inset: 0;
  width: 100%;
  min-height: 100dvh;
  height: 100dvh;
  background: var(--envelope-bg, radial-gradient(circle at center, #1A2026 0%, #0E1114 100%));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  transition: background 0.6s ease;
  overflow: hidden;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  box-sizing: border-box;
}

.envelope-container {
  width: min(92vw, calc(78dvh * 0.86), 460px);
  max-height: 78dvh;
  aspect-ratio: 0.86;
  text-align: center;
  perspective: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: auto;
  position: relative;
}

.envelope-box {
  width: 100%;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--envelope-box-bg, rgba(25, 32, 40, 0.85));
  border: 1px solid var(--border-vintage, rgba(197, 160, 89, 0.4));
  border-radius: var(--radius-lg);
  padding: clamp(16px, 3.5vh, 40px) clamp(14px, 3.5vw, 28px);
  box-shadow: var(--shadow-luxury, 0 30px 80px rgba(0, 0, 0, 0.8)), 0 0 40px rgba(197, 160, 89, 0.2);
  backdrop-filter: blur(20px);
  position: relative;
  /* overflow visible: en pantallas bajas la estrella y el prompt sobresalen de
     la tarjeta y antes se recortaban. El glow ::before ya no necesita recorte
     porque se contiene con inset:0. */
  overflow: visible;
  transition: background 0.6s ease, border-color 0.6s ease;
  box-sizing: border-box;
}

.envelope-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at center, rgba(197, 160, 89, 0.15) 0%, transparent 60%);
  pointer-events: none;
}

.sacred-geometry-medallion {
  width: clamp(75px, 15dvh, 120px);
  height: clamp(75px, 15dvh, 120px);
  margin: 0 auto clamp(6px, 1.8dvh, 18px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sacred-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.6));
}

.wax-seal-wrapper {
  margin: 20px auto;
  position: relative;
}

.wax-seal-btn {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: none;
  background: transparent;
  padding: 0;
  outline: none;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.6));
}

.wax-seal-btn img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Sello alterno: los 15 tipos de apertura que no son 'wax-seal' mostraban la
   MISMA foto de lacre que la boda. Este disco dorado con glifo propio los
   diferencia sin necesitar 15 fotografías nuevas. */
.seal-glyph {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  line-height: 1;
  background: var(--gold-gradient, linear-gradient(135deg, #A07936 0%, #FFF2B2 50%, #A07936 100%));
  box-shadow:
    inset 0 3px 7px rgba(255, 255, 255, 0.5),
    inset 0 -4px 9px rgba(0, 0, 0, 0.32);
}

/* Sello de cera procedural (Dimensión 1.5): la FORMA la aporta el SVG que se
   inyecta como data-URI en #sealImage, y las LETRAS viven en este span del DOM
   porque un <img src="data:image/svg+xml,…"> se renderiza aislado y no carga
   los web fonts: el monograma caería a una fuente genérica. */
.seal-monogram {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* 22px deja las letras holgadas dentro del anillo interior del cuño (r=60
     sobre un viewBox de 200); a 26px rozaban el bisel en las ceras más claras. */
  font-size: 22px;
  letter-spacing: 1px;
  line-height: 1;
  color: #FFF6E2;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  background: none;
  -webkit-text-fill-color: currentColor;
  pointer-events: none;
}

/* Ceras claras (mármol, cuarzo): letras oscuras para mantener el contraste. */
.seal-monogram--oscuro {
  color: #2A2118;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.45);
}

/* Tipografías ornamentales del monograma. Se declaran DESPUÉS de
   .envelope-monogram para ganarle por orden de fuente, a igual especificidad. */
.monogram-font-cinzel { font-family: 'Cinzel Decorative', var(--font-display); }
.monogram-font-pinyon { font-family: 'Pinyon Script', var(--font-script); }
.monogram-font-greatvibes { font-family: 'Great Vibes', var(--font-script); }
.monogram-font-cormorant { font-family: 'Cormorant Garamond', var(--font-serif); }
.monogram-font-italiana { font-family: 'Italiana', var(--font-editorial); }

/* Con lacre procedural, el fondo rojo del botón sobra: estaba pensado para el
   JPG, que lo cubría por completo. Como el SVG tiene las esquinas
   transparentes, el rojo asomaba como un anillo alrededor de la cera.
   Se usa doble clase (0,2,0) para ganar a la regla de css/animations.css
   (0,1,0) sin depender del orden de carga de las hojas. */
.wax-seal-btn.is-procedural-seal {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.envelope-monogram {
  font-family: var(--font-editorial);
  font-size: 2.8rem;
  letter-spacing: 4px;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 5px;
}

.envelope-subtitle {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--gold-light);
  margin-bottom: 20px;
}

.envelope-prompt {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: 2px;
  color: #F0F4F8;
  margin-top: 15px;
  text-transform: uppercase;
  animation: pulsePrompt 2s ease-in-out infinite;
}

/* 6. Layout Principal de la Invitación */
.wedding-app-wrapper {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 24px 100px;
  position: relative;
  z-index: 2;
}

/* 7. Hero Section Cinemático & Kinetic Typography (Palomino Style) */
.hero-section {
  text-align: center;
  padding: 70px 0 90px;
  position: relative;
}

.hero-subtitle-top {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 3.5px;
  color: var(--gold-dark);
  margin-bottom: 20px;
}

.hero-kinetic-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 15px 0;
}

.hero-name-item {
  font-family: var(--font-editorial);
  font-size: clamp(2.5rem, 7vw, 4.8rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: var(--text-primary);
  display: block;
}

.hero-ampersand {
  font-family: var(--font-script);
  font-size: clamp(2.8rem, 8vw, 5rem);
  color: var(--gold-primary);
  line-height: 0.8;
  margin: 8px 0;
}

.hero-photo-frame {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 4 / 5;
  max-height: min(560px, 75dvh);
  height: auto;
  margin: 40px auto;
  border-radius: 200px 200px 24px 24px;
  padding: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-vintage);
  box-shadow: var(--shadow-hover);
  position: relative;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-photo-frame img {
  width: 100%;
  height: 100%;
  border-radius: 190px 190px 18px 18px;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-photo-frame:hover img {
  transform: scale(1.04);
}

.hero-quote {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-style: italic;
  color: var(--text-muted);
  max-width: 520px;
  margin: 25px auto;
  line-height: 1.6;
}

.hero-date-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 2px;
  color: var(--gold-dark);
  background: var(--gold-soft-gradient);
  border: 1px solid var(--border-vintage);
  padding: 12px 32px;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(8px);
}

/* 8. Tarjetas Esculturales 3D (Tilt Cards) */
.reveal-card {
  background: var(--bg-card);
  border: 1px solid var(--border-vintage);
  border-radius: var(--radius-md);
  padding: 40px 30px;
  margin-bottom: 45px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.reveal-card:hover {
  border-color: var(--gold-primary);
  box-shadow: var(--shadow-hover);
}

.vintage-section-header {
  text-align: center;
  margin-bottom: 35px;
}

.section-pretitle {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--gold-dark);
  display: block;
  margin-bottom: 8px;
}

.section-title {
  font-family: var(--font-editorial);
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  font-weight: 400;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}

/* 9. Scrollytelling Horizontal del Cronograma (Orano Innovation Style) */
.timeline-horizontal-wrapper {
  width: 100%;
  position: relative;
  overflow: hidden;
  padding: 40px 0 80px;
}

.timeline-scrub-bar-container {
  width: 80%;
  max-width: 600px;
  height: 3px;
  background: rgba(197, 160, 89, 0.2);
  margin: 0 auto 40px;
  border-radius: 4px;
  overflow: hidden;
}

.timeline-scrub-progress {
  width: 100%;
  height: 100%;
  background: var(--gold-gradient);
  transform-origin: left;
  transform: scaleX(0);
}

.timeline-horizontal-track {
  display: flex;
  gap: 30px;
  padding: 0 40px;
  width: max-content;
}

.timeline-milestone-card {
  width: 290px;
  background: var(--bg-card);
  border: 1px solid var(--border-vintage);
  border-radius: var(--radius-md);
  padding: 32px 24px;
  text-align: center;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
  position: relative;
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  flex-shrink: 0;
}

.timeline-milestone-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: var(--gold-primary);
  box-shadow: var(--shadow-gold);
}

.milestone-icon {
  font-size: 2.8rem;
  margin-bottom: 15px;
  display: inline-block;
  filter: drop-shadow(0 4px 10px rgba(197, 160, 89, 0.3));
}

.milestone-time {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gold-dark);
  margin-bottom: 6px;
}

.milestone-title {
  font-family: var(--font-editorial);
  font-size: 1.3rem;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.milestone-desc {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* 10. Cuenta Regresiva & Botones de Calendario */
.countdown-grid {
  display: grid;
  /* "Días" puede llegar a 3 dígitos (eventos a más de 99 días); horas/
     minutos/segundos nunca pasan de 2. repeat(4, 1fr) los apretaba a todos
     por igual. */
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 15px;
  max-width: 440px;
  margin: 0 auto 30px;
  width: 100%;
}

@media (max-width: 360px) {
  .countdown-grid {
    gap: 6px;
  }
  .countdown-box {
    padding: 10px 4px;
  }
  .countdown-num {
    font-size: 1.55rem;
  }
  .countdown-label {
    font-size: 0.62rem;
    letter-spacing: 0.8px;
  }
}

.countdown-box {
  background: var(--bg-card-alt);
  border: 1px solid var(--border-vintage-light);
  border-radius: var(--radius-sm);
  padding: 16px 8px;
  text-align: center;
}

.countdown-num {
  font-family: var(--font-editorial);
  font-size: clamp(1.5rem, 6vw, 2.2rem);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--gold-dark);
  display: block;
  line-height: 1;
}

.countdown-label {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  margin-top: 6px;
  display: block;
}

.calendar-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.btn-vintage-secondary {
  background: var(--bg-card);
  border: 1px solid var(--border-vintage);
  color: var(--text-primary);
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--shadow-soft);
}

.btn-vintage-secondary:hover {
  border-color: var(--gold-primary);
  background: var(--gold-soft-gradient);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

/* 11. Ubicaciones & Mapas */
.venue-card {
  background: var(--bg-card);
  border: 1px solid var(--border-vintage);
  border-radius: var(--radius-md);
  padding: 32px 24px;
  margin-bottom: 24px;
  text-align: center;
}

.venue-icon-wrapper {
  font-size: 2.6rem;
  margin-bottom: 12px;
}

.venue-type {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--gold-dark);
  margin-bottom: 6px;
}

.venue-name {
  font-family: var(--font-editorial);
  font-size: 1.6rem;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.venue-time {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--gold-primary);
  margin-bottom: 8px;
}

.venue-address {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.venue-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-map {
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s;
}

.btn-google-maps {
  background: #1A73E8;
  color: #FFFFFF;
}

.btn-waze {
  background: #33CCFF;
  color: #1A202C;
}

/* 12. Dress Code de Gala con Colores Prohibidos */
.dress-code-badge {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 2px;
  color: var(--gold-dark);
  margin-bottom: 15px;
}

.dress-code-rules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin: 25px 0;
}

.rule-box {
  background: var(--bg-card-alt);
  border: 1px solid var(--border-vintage-light);
  border-radius: var(--radius-sm);
  padding: 18px 14px;
  text-align: center;
}

.rule-title {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--gold-dark);
  margin-bottom: 6px;
}

.rule-desc {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--text-primary);
}

.prohibited-colors-banner {
  background: rgba(180, 40, 40, 0.06);
  border: 1px dashed rgba(180, 40, 40, 0.35);
  border-radius: var(--radius-sm);
  padding: 18px;
  margin: 20px 0;
  text-align: center;
}

.prohibited-title {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  color: #B22222;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.prohibited-tags {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.tag-no-color {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  color: #1F2937;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.color-sample {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
}

.palette-grid {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
  flex-wrap: wrap;
}

.palette-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}

.palette-dot:hover {
  transform: scale(1.2);
}

/* 13. Sólo Adultos & Hashtag */
.special-notes-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 45px;
}

@media (max-width: 768px) {
  .special-notes-section {
    grid-template-columns: 1fr;
  }
}

.adults-only-card,
.hashtag-card {
  background: var(--bg-card);
  border: 1px solid var(--border-vintage);
  border-radius: var(--radius-md);
  padding: 30px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.adults-only-title {
  font-family: var(--font-editorial);
  font-size: 1.35rem;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.adults-only-desc {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.hashtag-badge {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold-dark);
  letter-spacing: 1px;
  margin: 10px 0;
  display: inline-block;
}

/* 14. Mesa de Regalos & Datos Bancarios */
.gift-card {
  background: var(--bg-card);
  border: 1px solid var(--border-vintage);
  border-radius: var(--radius-md);
  padding: 30px 24px;
  margin-bottom: 20px;
  text-align: center;
}

.gift-card-title {
  font-family: var(--font-editorial);
  font-size: 1.4rem;
  color: var(--text-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.bank-info-box {
  background: var(--bg-card-alt);
  border: 1px solid var(--border-vintage-light);
  border-radius: var(--radius-sm);
  padding: 18px;
  margin: 15px auto;
  max-width: 440px;
  text-align: left;
}

.bank-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(197, 160, 89, 0.15);
  font-size: 0.88rem;
}

.bank-row:last-child {
  border-bottom: none;
}

.bank-label {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.bank-val {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--text-primary);
  text-align: right;
  overflow-wrap: anywhere;
}

/* En pantallas estrechas, apilar etiqueta y valor: si no, el nombre del
   beneficiario se rompe a una palabra por linea. */
@media (max-width: 430px) {
  .bank-row {
    flex-direction: column;
    gap: 2px;
  }
  .bank-val {
    text-align: left;
  }
}

.btn-copy-data {
  background: var(--gold-primary);
  color: #FFFFFF;
  border: none;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  margin-top: 12px;
  transition: all 0.3s;
}

.btn-copy-data:hover {
  background: var(--gold-dark);
  transform: translateY(-2px);
}

/* 15. Galería de Momentos */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.gallery-item {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-vintage);
  height: 240px;
}

.gallery-item.full-width {
  grid-column: span 2;
  height: 320px;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-item:hover img {
  transform: scale(1.06);
}

.photo-placeholder {
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gold-primary) 0%, var(--accent-color, var(--gold-dark)) 100%);
  color: #FFFFFF;
  border-radius: inherit;
}

.hero-photo-frame .photo-placeholder {
  border-radius: 190px 190px 18px 18px;
}

img[data-photo-slot].no-photo {
  display: none;
}

/* .photo-placeholder arranca oculto (display:none inline y de clase) para no
   destellar antes de que photo-slots.js decida; al ocultar la <img> vía
   .no-photo, esta regla la reactiva como flex sin tocar el módulo JS. */
img[data-photo-slot].no-photo + .photo-placeholder {
  display: flex;
}

/* 16. Formulario RSVP con Pases Personalizados */
.rsvp-card {
  background: var(--bg-card);
  border: 1.5px solid var(--gold-primary);
  border-radius: var(--radius-md);
  padding: 35px 25px;
  box-shadow: var(--shadow-gold);
}

.rsvp-guest-header {
  text-align: center;
  margin-bottom: 25px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-vintage-light);
}

.rsvp-guest-greeting {
  font-family: var(--font-script);
  font-size: 2.2rem;
  color: var(--gold-dark);
  line-height: 1;
}

.rsvp-guest-name {
  font-family: var(--font-editorial);
  font-size: 1.8rem;
  color: var(--text-primary);
  margin: 6px 0;
}

.rsvp-passes-tag {
  display: inline-block;
  background: var(--gold-soft-gradient);
  border: 1px solid var(--border-vintage);
  color: var(--gold-dark);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
}

.rsvp-form-group {
  margin-bottom: 20px;
  text-align: left;
}

.rsvp-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.rsvp-field-hint {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: var(--text-light);
  margin-top: 6px;
  line-height: 1.4;
}

.rsvp-radio-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rsvp-radio-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card-alt);
  border: 1px solid var(--border-vintage-light);
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-sans);
  font-size: 0.88rem;
}

.rsvp-radio-card:hover {
  border-color: var(--gold-primary);
}

.rsvp-select,
.rsvp-input,
.rsvp-textarea {
  width: 100%;
  background: var(--bg-card-alt);
  border: 1px solid var(--border-vintage);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s;
}

.rsvp-select:focus,
.rsvp-input:focus,
.rsvp-textarea:focus {
  border-color: var(--gold-primary);
  box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.2);
}

/* iOS Safari hace auto-zoom al enfocar un campo de texto con font-size < 16px,
   y desde que el viewport permite el zoom (se quito user-scalable=no) no vuelve
   a alejar. En movil se fuerza 16px en px absolutos: el root usa clamp() y con
   rem bajaria de 16. Radio/checkbox/range no disparan el zoom. */
@media (max-width: 768px) {
  .rsvp-input,
  .rsvp-select,
  .rsvp-textarea,
  input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="hidden"]),
  select,
  textarea {
    font-size: 16px;
  }
}

.btn-rsvp-submit {
  width: 100%;
  background: var(--gold-gradient);
  color: #2C241E;
  border: none;
  padding: 16px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  box-shadow: var(--shadow-gold);
  cursor: pointer;
  transition: all 0.3s;
  margin-top: 10px;
}

.btn-rsvp-submit:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

/* 17. Footer */
.wedding-footer {
  text-align: center;
  padding: 60px 0 20px;
  border-top: 1px solid var(--border-vintage-light);
  margin-top: 60px;
}

.footer-monogram {
  font-family: var(--font-editorial);
  font-size: 2.2rem;
  color: var(--gold-primary);
  letter-spacing: 2px;
}

.footer-quote {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--text-muted);
  margin: 10px 0;
}

.footer-credits {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--text-light);
  letter-spacing: 1px;
}

.footer-admin-link,
.footer-legal-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 6px 14px;
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--text-light);
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: color 0.2s ease, background-color 0.2s ease;
  box-sizing: border-box;
}

.footer-admin-link:hover,
.footer-legal-link:hover {
  color: var(--gold-primary);
  background-color: rgba(255, 255, 255, 0.06);
}

/* 18. Modales */
.modal-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  min-height: 100dvh;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(8px);
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  box-sizing: border-box;
  overflow-y: auto;
}

.modal-overlay.is-active {
  opacity: 1;
  pointer-events: all;
}

.modal-box {
  background: var(--bg-card);
  border: 1px solid var(--gold-primary);
  border-radius: var(--radius-md);
  padding: clamp(20px, 3vh, 35px) clamp(16px, 3vw, 25px);
  max-width: 440px;
  width: 90%;
  max-height: 90dvh;
  overflow-y: auto;
  text-align: center;
  box-shadow: var(--shadow-gold);
  margin: auto;
}

.modal-icon-success {
  font-size: 3rem;
  margin-bottom: 12px;
}

.modal-title {
  font-family: var(--font-editorial);
  font-size: 1.6rem;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.modal-desc {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.btn-modal-close {
  background: transparent;
  border: 1px solid var(--border-vintage);
  color: var(--text-muted);
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  cursor: pointer;
}

/* Animaciones Clave */
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulsePrompt {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.03); }
}

/* El FAB de música flota fijo en la esquina inferior derecha (54px + 24px de
   margen). En móviles angostos, la esquina derecha de los CTAs de ancho
   completo puede quedar bajo su huella mientras la página hace scroll.
   Se reserva un margen seguro a la derecha en esos controles. */
@media (max-width: 480px) {
  .btn-rsvp-submit,
  .venue-buttons .btn-map:last-child {
    margin-right: 6px;
  }

  .rsvp-section,
  .itinerary-section {
    padding-right: 14px;
  }
}

/* Respeta la preferencia del sistema de reducir movimiento: desactiva
   transiciones/animaciones decorativas largas en toda la invitación pública. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   ELEVACIÓN AWWWARDS & ACCESIBILIDAD UNIVERSAL (WCAG AAA)
   Anillo de foco áureo de alta costura y micro-interacciones sensoriales
   ========================================================================== */
:where(button, a, input, select, textarea, [tabindex="0"]):focus-visible {
  outline: 2px solid var(--gold-primary, #C5A059) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 14px rgba(197, 160, 89, 0.45) !important;
}

.venue-card, .dress-code-card, .btn-map, .btn-rsvp-submit {
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms ease, border-color 200ms ease;
}