/* ==========================================================================
   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;
  /* AA: #9C8E84 daba 2.97:1 sobre --bg-parchment. */
  --text-light: #7A6F67;
  
  --gold-primary: #C5A059;
  --gold-dark: #997531;
  --gold-light: #E9D8A6;
  /* TEXTO, no decoracion. Los tres metales de arriba se usan en bordes,
     gradientes y fondos, donde el contraste no aplica; como color de texto
     sobre el fondo claro no alcanzaban WCAG AA (--gold-primary daba 2.30:1).
     Los usos de `color:` apuntan aqui. Cada tema lo recalcula en
     css/themes.css y tests/theme-contrast.test.mjs lo guarda. */
  --gold-text: #8D6B2C;
  --danger-text: #B22222;
  --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-text);
}

/* 2. Cursor Magnético de Oro Líquido (Awwwards Grade)
 *
 * El cursor del sistema SOLO se oculta cuando el dorado está activo de verdad:
 * js/cursor.js pone `cursor-oro` en <html> al primer movimiento del ratón, y
 * solo con ratón, ventana ancha y soporte de :has(). Antes se ocultaba por tipo
 * de puntero, existiera o no el dorado, y el cursor desaparecía en las páginas
 * sin js/cursor.js (pago, cancelación, entrega), en ventanas estrechas (la vista
 * previa de teléfono del Studio) y con un <dialog> modal abierto, que va en la
 * capa superior y tapa al dorado. Ver tests/cursor-browser.mjs. */
html.cursor-oro:not(:has(dialog:modal)) body {
  cursor: none;
}
html.cursor-oro:not(:has(dialog:modal)) :is(a, button, input, select, textarea, .theme-card-option, .wax-seal-btn) {
  cursor: none !important;
}

html:not(.cursor-oro) :is(.award-cursor-dot, .award-cursor-ring, #cursorTrailCanvas),
html:has(dialog:modal) :is(.award-cursor-dot, .award-cursor-ring, #cursorTrailCanvas) {
  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;
  /* contrast-ok: el sobre es siempre una superficie oscura (--envelope-bg
     va de #2C241E a #15100C), donde --gold-light da 10.9:1. Esta regla no se
     aplica nunca sobre el fondo pergamino. */
  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-text);
  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-text);
  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-text);
  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-text);
  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-text);
  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-text);
  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-text);
  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-text);
  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-text);
  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-text);
  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;
  /* Estaba hardcodeado en #B22222: sobre los temas oscuros daba 2.63:1. */
  color: var(--danger-text, #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-text);
  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 {
  /* El fondo es --gold-text, que cumple AA contra --bg-parchment. El contraste
     es simetrico, asi que poner --bg-parchment como color de texto garantiza
     EXACTAMENTE el mismo ratio. Blanco fijo NO vale: en los temas oscuros
     --gold-text es un metal claro y blanco daba 1.73:1 sobre el. */
  background: var(--gold-text);
  color: var(--bg-parchment);
  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 {
  /* Oscurecer con brightness en vez de cambiar a --gold-dark: escala fondo y
     texto por igual, asi que conserva el ratio (--gold-dark daba 4.25:1). */
  filter: brightness(0.88);
  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-text);
  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-text);
  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-text);
  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-text);
  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;
  /* Objetivo táctil de 44 px: el cierre de la confirmación se toca con el pulgar. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.btn-modal-close:hover,
.btn-modal-close:active {
  background: rgba(197, 160, 89, 0.1);
  border-color: var(--gold-primary);
  color: var(--text-primary);
}

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

/* Franja inferior de controles flotantes en moviles angostos.
   --------------------------------------------------------------------------
   Dos controles fijos viven en el borde inferior: el panel de accesibilidad
   (abajo-izquierda, ~40px de alto) y el FAB de musica (abajo-derecha, 54px).
   Con 844px de alto ocupan y=784..824 y y=762..823.

   Medido el 2026-09-18: la cita del hero caia en y=766..871, es decir DENTRO
   de la franja, asi que en el primer pintado el panel tapaba las primeras
   palabras y el boton de musica tapaba el final de la linea. Afectaba a 7 de
   los 9 arquetipos (todos menos boda y gala).

   Se comprime el ritmo vertical del hero para que su ultimo bloque termine por
   encima de la franja. No se reduce ningun texto: solo los margenes verticales
   entre bloques, que en movil estaban heredados de la medida de escritorio. */
@media (max-width: 640px) {
  .hero-section {
    padding: 18px 0 72px;
  }

  .hero-subtitle-top {
    margin-bottom: 8px;
  }

  .hero-kinetic-title {
    margin: 5px 0;
  }

  .hero-photo-frame {
    /* La foto es el bloque mas alto y el unico elastico del hero. Se acota por
       la ALTURA DEL VIEWPORT ademas de por ancho, para que el contenido del
       hero termine siempre por encima de la franja donde flotan los controles
       de accesibilidad y de musica.

       La constante NO es a ojo: es 844 (viewport de referencia) menos la altura
       de foto que deja el ultimo bloque de texto del hero por encima de esa
       franja en el PEOR de los 9 arquetipos. Medido con
       `scratch/measure-hero-geometry.mjs` (2026-09-18): la ciudad del hero
       terminaba en y=805 en `aniversario`.

       Afinar margen a margen no sirvio: el ajuste movia la colision de un
       elemento a otro (la cita en `xv`, la fecha en `graduacion`, la ciudad en
       `gala`). Con la altura del viewport en la formula, el hero cabe en los 9
       sin perseguir cual es el ultimo bloque.
       El suelo de 240px evita que la foto desaparezca en pantallas muy bajas. */
    max-height: min(380px, max(240px, calc(100dvh - 556px)));
    margin: 12px auto;
  }

  .hero-quote {
    margin: 9px auto;
  }

  /* El FAB de musica flota abajo-derecha y su anillo de 4px hacia que su borde
     superior (y=762) fuese el limite REAL de la franja, mas alto que el panel
     de accesibilidad (y=786). Se reduce a 46px —por encima del minimo tactil
     de 44px— y se baja al borde: unos 19px de holgura sin tener que encoger
     mas la foto del hero. */
  .music-toggle-btn {
    width: 46px;
    height: 46px;
    bottom: 14px;
    right: 14px;
    font-size: 1.2rem;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.25), 0 0 0 3px rgba(255, 255, 255, 0.6);
  }
}

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