/* ==========================================================================
   MAIN APP STYLES - Mobile-First & Cross-Platform (iOS / Android)
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  height: 100%;
  min-height: -webkit-fill-available;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: linear-gradient(175deg, var(--bg-top) 0%, var(--bg-mid) 45%, var(--bg-bottom) 100%);
  color: var(--text-main);
  overflow-x: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: background 0.6s ease, color 0.4s ease;
}

/* Standalone PWA adjustments for notch and home bar */
body {
  padding-top: max(12px, env(safe-area-inset-top));
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}

/* Background Petals Canvas */
#petals-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: auto; /* Permite interactuar con los pétalos al arrastrar o tocar */
  z-index: 1;
}

/* App Container */
#app-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 520px; /* Tamaño móvil óptimo */
  margin: 0 auto;
  min-height: calc(100vh - 30px);
  display: flex;
  flex-direction: column;
}

/* Screen Management */
.screen {
  display: none;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.screen.active {
  display: flex;
  animation: fadeInScreen 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ==========================================================================
   SCREEN 1: UNBOXING GIFT (Bienvenida mágica)
   ========================================================================== */
#screen-unboxing {
  min-height: 88vh;
  text-align: center;
  padding: 20px;
  position: relative;
}

.gift-tag {
  background: var(--card-bg);
  backdrop-filter: blur(14px);
  border: 1px solid var(--card-border);
  padding: 10px 24px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--text-main);
  box-shadow: var(--card-shadow);
  margin-bottom: 30px;
  display: inline-block;
  line-height: 1.5;
  transition: all 0.3s ease;
}

.gift-tag strong,
.gift-tag .recipient-name-target {
  color: var(--primary);
  font-weight: 700;
}

body[data-theme="midnight"] .gift-tag {
  background: rgba(30, 27, 75, 0.85);
  border: 1px solid rgba(165, 180, 252, 0.4);
  color: #f8fafc;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

body[data-theme="midnight"] .gift-tag strong,
body[data-theme="midnight"] .gift-tag .recipient-name-target {
  color: #facc15;
  text-shadow: 0 0 12px rgba(250, 204, 21, 0.5);
}

.gift-box-wrapper {
  position: relative;
  width: 220px;
  height: 220px;
  cursor: pointer;
  margin: 20px auto;
  perspective: 900px;
  animation: boxHeartbeat 3.2s ease-in-out infinite;
  transition: transform 0.3s ease;
  user-select: none;
}

.gift-box-wrapper:hover {
  animation-play-state: paused;
  transform: scale(1.03);
}

.gift-box-wrapper.gift-box-open {
  animation: none !important;
}

.gift-lid {
  position: absolute;
  top: 15px;
  left: 10px;
  width: 200px;
  height: 48px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: 12px 12px 6px 6px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  z-index: 5;
  transform-origin: bottom center;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform, opacity;
}

.gift-body {
  position: absolute;
  top: 50px;
  left: 20px;
  width: 180px;
  height: 150px;
  background: linear-gradient(160deg, var(--primary-light) 0%, var(--primary) 100%);
  border-radius: 6px 6px 18px 18px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
  z-index: 3;
  position: relative;
  transform-origin: center bottom;
  will-change: transform;
}

.gift-box-wrapper.gift-box-open .gift-body {
  animation: giftBodyReact 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.gift-sparkles-inner {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translate(-50%, 0) scale(0.5);
  font-size: 1.6rem;
  letter-spacing: 4px;
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}

.gift-box-wrapper.gift-box-open .gift-sparkles-inner {
  animation: floralSparklesRise 0.85s 0.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Golden Ribbons */
.ribbon-vertical {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 100%;
  background: linear-gradient(90deg, #fde047 0%, #eab308 50%, #ca8a04 100%);
  box-shadow: 0 0 8px rgba(234, 179, 8, 0.6);
}

.ribbon-horizontal {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 30px;
  background: linear-gradient(180deg, #fde047 0%, #eab308 50%, #ca8a04 100%);
  box-shadow: 0 0 8px rgba(234, 179, 8, 0.6);
}

.gift-bow {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 45px;
  z-index: 6;
  transform-origin: center center;
  will-change: transform, opacity;
}

.bow-loop-left, .bow-loop-right {
  position: absolute;
  width: 38px;
  height: 38px;
  border: 7px solid #fde047;
  border-radius: 50% 50% 10% 50%;
  background: linear-gradient(135deg, #facc15 0%, #ca8a04 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transform-origin: center bottom;
}

.bow-loop-left {
  left: 4px;
  transform: rotate(-35deg);
}

.bow-loop-right {
  right: 4px;
  transform: rotate(35deg) scaleX(-1);
}

.bow-center {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fef08a;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.tap-hint {
  margin-top: 40px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-muted);
  opacity: 0.9;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

/* ==========================================================================
   SCREEN 2: INTERACTIVE BIRTHDAY CAKE
   ========================================================================== */
#screen-cake {
  min-height: 88vh;
  text-align: center;
  padding: 24px 16px;
  justify-content: space-between;
  position: relative;
  border-radius: 28px;
  background: radial-gradient(circle at 50% 48%, rgba(254, 243, 199, 0.08) 0%, rgba(15, 23, 42, 0.42) 60%, rgba(15, 23, 42, 0.72) 100%);
  transition: background 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

#screen-cake.celebration-lit {
  background: radial-gradient(circle at 50% 45%, rgba(254, 243, 199, 0.18) 0%, rgba(15, 23, 42, 0.28) 60%, rgba(15, 23, 42, 0.55) 100%);
}

/* Envolvente Halo Festivo y Destellos Dorados en Celebración de Velas Apagadas */
#screen-cake.celebration-lit::before {
  content: '';
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 440px;
  max-width: 95vw;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 240, 138, 0.45) 0%, rgba(245, 158, 11, 0.25) 35%, rgba(234, 88, 12, 0.08) 60%, transparent 78%);
  filter: blur(35px);
  pointer-events: none;
  z-index: 0;
  animation: celebrationHaloPulse 2.4s ease-in-out infinite alternate;
}

#screen-cake.celebration-lit::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 28px;
  background-image: 
    radial-gradient(2px 2px at 20% 30%, #fde047 100%, transparent),
    radial-gradient(2px 2px at 40% 70%, #fef08a 100%, transparent),
    radial-gradient(3px 3px at 75% 25%, #facc15 100%, transparent),
    radial-gradient(2px 2px at 85% 65%, #fde047 100%, transparent),
    radial-gradient(2.5px 2.5px at 15% 85%, #fef08a 100%, transparent),
    radial-gradient(3px 3px at 60% 45%, #fde047 100%, transparent);
  background-size: 100% 100%;
  opacity: 0.85;
  pointer-events: none;
  z-index: 1;
  animation: celebrationHaloPulse 2s ease-in-out infinite alternate;
}

.cake-header h2 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 6px;
  position: relative;
  z-index: 2;
}

.cake-header p {
  font-size: 0.95rem;
  color: var(--text-muted);
  position: relative;
  z-index: 2;
}

/* Escenario y Aura Ambiental Temática */
.cake-stage {
  position: relative;
  width: 320px;
  max-width: 92vw;
  height: 330px;
  margin: 15px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* Resplandor ambiental temático que pulsa suavemente al compás de la llama */
.cake-stage::before {
  content: '';
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 240, 138, 0.38) 0%, rgba(245, 158, 11, 0.22) 40%, rgba(234, 88, 12, 0.06) 65%, transparent 75%);
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
  animation: cakeAuraPulse 3.2s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate;
  transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Auras temáticas para cada uno de los 7 escenarios de pastel */
.cake-stage[data-cake-theme="floral"]::before,
body[data-experience="floral"] .cake-stage::before {
  background: radial-gradient(circle, rgba(253, 164, 175, 0.42) 0%, rgba(254, 240, 138, 0.28) 40%, rgba(244, 63, 94, 0.08) 65%, transparent 75%);
}

.cake-stage[data-cake-theme="cosmic"]::before,
body[data-experience="cosmic"] .cake-stage::before {
  background: radial-gradient(circle, rgba(56, 189, 248, 0.48) 0%, rgba(139, 92, 246, 0.32) 40%, rgba(6, 182, 212, 0.1) 65%, transparent 75%);
}

.cake-stage[data-cake-theme="vintage_letter"]::before,
body[data-experience="vintage_letter"] .cake-stage::before {
  background: radial-gradient(circle, rgba(254, 243, 199, 0.48) 0%, rgba(245, 158, 11, 0.32) 40%, rgba(180, 83, 9, 0.1) 65%, transparent 75%);
}

.cake-stage[data-cake-theme="cinema"]::before,
body[data-experience="cinema"] .cake-stage::before {
  background: radial-gradient(circle, rgba(254, 240, 138, 0.52) 0%, rgba(234, 179, 8, 0.35) 40%, rgba(202, 138, 4, 0.12) 65%, transparent 75%);
}

.cake-stage[data-cake-theme="pirate"]::before,
body[data-experience="pirate"] .cake-stage::before {
  background: radial-gradient(circle, rgba(251, 146, 60, 0.48) 0%, rgba(234, 88, 12, 0.32) 40%, rgba(180, 83, 9, 0.12) 65%, transparent 75%);
}

.cake-stage[data-cake-theme="candy"]::before,
body[data-experience="candy"] .cake-stage::before {
  background: radial-gradient(circle, rgba(254, 205, 211, 0.46) 0%, rgba(244, 63, 94, 0.28) 40%, rgba(251, 146, 60, 0.1) 65%, transparent 75%);
}

.cake-stage[data-cake-theme="arcade"]::before,
body[data-experience="arcade"] .cake-stage::before {
  background: radial-gradient(circle, rgba(34, 211, 238, 0.5) 0%, rgba(236, 72, 153, 0.35) 40%, rgba(147, 51, 234, 0.12) 65%, transparent 75%);
}

#cake-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.14));
  position: relative;
  z-index: 1;
}

.candle {
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.candle:hover {
  transform: scale(1.03);
}

.candle-number text {
  user-select: none;
  -webkit-user-select: none;
}

.candle-flame {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: 50% 90%;
}

.candle-flame.flame-blowing {
  animation: flameBlowingTilt 0.14s forwards ease-out !important;
}

.cake-instructions {
  background: var(--card-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--card-border);
  padding: 12px 20px;
  border-radius: 16px;
  font-size: 0.95rem;
  color: var(--text-main);
  box-shadow: var(--card-shadow);
  margin-top: 10px;
  position: relative;
  z-index: 2;
}

/* Transición suave hacia el botón de continuar #btn-after-cake */
#btn-after-cake {
  background: linear-gradient(135deg, #f59e0b 0%, #ea580c 50%, #dc2626 100%);
  color: #ffffff;
  border: 1px solid rgba(254, 240, 138, 0.6);
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 15px 32px;
  font-size: 1.05rem;
  animation: btnSurpriseEntrance 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both, btnGoldenGlowPulse 2.4s ease-in-out 0.7s infinite alternate;
  box-shadow: 0 8px 24px rgba(234, 88, 12, 0.45);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
  position: relative;
  z-index: 3;
}

#btn-after-cake:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 12px 30px rgba(234, 88, 12, 0.6);
}

#btn-after-cake:active {
  transform: scale(0.97);
}

.btn-continue {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  border: none;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 600;
  box-shadow: 0 6px 20px var(--primary-glow);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-continue:active {
  transform: scale(0.96);
}

/* ==========================================================================
   SCREEN 3: MAIN EXPERIENCE HUB (Celebración Floral)
   ========================================================================== */
#screen-hub {
  padding: 8px 4px 60px 4px;
}

/* Top App Bar */
.hub-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  margin-bottom: 12px;
}

.user-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--card-border);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-main);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.header-actions {
  display: flex;
  gap: 8px;
}

.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  backdrop-filter: blur(10px);
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}

.icon-btn:active {
  transform: scale(0.92);
}

.icon-btn.playing {
  color: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 15px var(--primary-glow);
}

/* Hero Birthday Banner */
.hero-banner {
  width: 100%;
  background: var(--card-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--card-border);
  border-radius: 24px;
  padding: 24px 20px;
  text-align: center;
  box-shadow: var(--card-shadow);
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

.hero-banner::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
  opacity: 0.18;
  pointer-events: none;
}

.hero-subtitle {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--primary);
  font-weight: 700;
  margin-bottom: 4px;
}

.hero-title {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--primary-dark);
  line-height: 1.2;
  margin-bottom: 8px;
}

.hero-message {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Sections */
.section-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin: 24px 8px 12px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Garden Grid */
.garden-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  width: 100%;
}

.flower-card {
  background: var(--card-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: var(--card-shadow);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}

.flower-card:active {
  transform: scale(0.95);
}

.flower-preview {
  width: 80px;
  height: 80px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flower-preview img, .flower-preview svg {
  width: 100%;
  height: 100%;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.flower-card:hover .flower-preview img,
.flower-card:hover .flower-preview svg {
  transform: scale(1.1) rotate(5deg);
}

.flower-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 2px;
}

.flower-meaning {
  font-size: 0.78rem;
  color: var(--text-muted);
  opacity: 0.85;
}

/* Special Love Letter Section - Carta Pergamino Poética */
.letter-section {
  width: 100%;
  margin-top: 10px;
}

.letter-card {
  background: linear-gradient(135deg, #fffdf8 0%, #fcf7ed 40%, #f7eee0 100%);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 24px;
  padding: 28px 24px;
  box-shadow: 0 14px 40px rgba(120, 53, 15, 0.09), inset 0 0 45px rgba(217, 119, 6, 0.06), 0 0 0 1px rgba(217, 119, 6, 0.12);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.letter-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 45px rgba(120, 53, 15, 0.13), inset 0 0 50px rgba(217, 119, 6, 0.08), 0 0 0 1px rgba(217, 119, 6, 0.2);
}

/* Marca de agua decorativa sutil de fondo para textura pergamino */
.letter-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(circle at 10% 20%, rgba(217, 119, 6, 0.03) 0%, transparent 40%),
                    radial-gradient(circle at 90% 80%, rgba(217, 119, 6, 0.03) 0%, transparent 40%);
  pointer-events: none;
  border-radius: inherit;
}

.letter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  border-bottom: 1.5px dashed rgba(212, 175, 55, 0.45);
  padding-bottom: 14px;
  position: relative;
  z-index: 1;
}

.letter-header h3 {
  font-family: 'Playfair Display', 'Cormorant Garamond', 'Georgia', serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--primary-dark);
  letter-spacing: 0.5px;
}

/* Sello decorativo artesanal en relieve 3D auténtico */
.letter-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fb7185 0%, #e11d48 55%, #9f1239 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 6px 16px rgba(159, 18, 57, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.65), inset 0 -2px 4px rgba(0, 0, 0, 0.35);
  font-size: 1.4rem;
  transform: rotate(-8deg);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
  cursor: pointer;
  position: relative;
}

.letter-stamp::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

.letter-stamp:hover {
  transform: rotate(0deg) scale(1.12);
  box-shadow: 0 8px 20px rgba(159, 18, 57, 0.5), inset 0 2px 5px rgba(255, 255, 255, 0.8);
}

.letter-content {
  font-family: 'Playfair Display', 'Cormorant Garamond', 'Baskerville', 'Georgia', serif;
  font-size: 1.05rem;
  line-height: 1.95;
  color: var(--text-main);
  white-space: pre-line;
  font-style: italic;
  letter-spacing: 0.3px;
  position: relative;
  z-index: 1;
}

/* Capitular decorativa refinada para la primera letra */
.letter-content::first-letter {
  font-family: 'Playfair Display', 'Georgia', serif;
  font-size: 2.3em;
  float: left;
  font-weight: 700;
  line-height: 0.85;
  margin: 4px 8px 0 0;
  color: var(--primary-dark);
  font-style: normal;
  text-shadow: 1px 1px 0 rgba(212, 175, 55, 0.2);
}

.letter-footer {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  z-index: 1;
}

.letter-footer-seal-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  color: var(--primary-dark);
  font-size: 1.05rem;
  font-family: 'Playfair Display', 'Cormorant Garamond', 'Georgia', serif;
  letter-spacing: 0.5px;
}

.letter-wax-seal-signature {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform: rotate(-6deg);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease;
  user-select: none;
  flex-shrink: 0;
}

.letter-wax-seal-signature:hover {
  transform: rotate(0deg) scale(1.18);
}

.letter-wax-seal-signature .seal-icon {
  font-size: 1.2rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

/* ==========================================================================
   DISEÑOS Y AMBIENTACIÓN TEMÁTICA DE LA CARTA Y SELLOS POR MUNDO (7 TEMÁTICAS)
   ========================================================================== */

/* 1. Floral Clásico */
.letter-card.letter-thematic-floral {
  background: linear-gradient(135deg, #fffdfa 0%, #fff7ed 45%, #fef2f2 100%);
  border-color: rgba(244, 63, 94, 0.35);
  box-shadow: 0 14px 40px rgba(225, 29, 72, 0.08), inset 0 0 45px rgba(254, 205, 211, 0.15);
}

.letter-stamp.stamp-floral {
  background: radial-gradient(circle at 35% 30%, #fb7185 0%, #e11d48 55%, #9f1239 100%);
  border: 1.5px solid #ffe4e6;
  box-shadow: 0 6px 16px rgba(159, 18, 57, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.65);
}

/* 2. Odisea Cósmica */
.letter-card.letter-thematic-cosmic {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(30, 27, 75, 0.94) 50%, rgba(15, 23, 42, 0.98) 100%);
  border: 1.5px solid rgba(168, 85, 247, 0.45);
  box-shadow: 0 16px 45px rgba(99, 102, 241, 0.22), inset 0 0 50px rgba(168, 85, 247, 0.12), 0 0 25px rgba(168, 85, 247, 0.2);
  color: #f1f5f9;
}
.letter-card.letter-thematic-cosmic .letter-header h3 {
  color: #c084fc;
  text-shadow: 0 0 14px rgba(192, 132, 252, 0.5);
}
.letter-card.letter-thematic-cosmic .letter-content {
  color: #e2e8f0;
}
.letter-card.letter-thematic-cosmic .letter-content::first-letter {
  color: #38bdf8;
  text-shadow: 0 0 15px rgba(56, 189, 248, 0.6);
}
.letter-card.letter-thematic-cosmic .letter-footer {
  color: #a78bfa;
}
.letter-stamp.stamp-cosmic {
  background: radial-gradient(circle at 35% 30%, #c084fc 0%, #7c3aed 55%, #3b0764 100%);
  border: 1.5px solid #e9d5ff;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.7);
}

/* 3. Sobre Vintage 1920 */
.letter-card.letter-thematic-vintage {
  background: linear-gradient(135deg, #fdf8ee 0%, #f7ecd4 50%, #eee0be 100%);
  border: 2px solid #b45309;
  box-shadow: 0 14px 40px rgba(120, 53, 15, 0.16), inset 0 0 60px rgba(180, 83, 9, 0.12);
}
.letter-card.letter-thematic-vintage .letter-header h3 {
  color: #78350f;
  font-family: 'Playfair Display', 'Georgia', serif;
}
.letter-card.letter-thematic-vintage .letter-content {
  color: #451a03;
}
.letter-card.letter-thematic-vintage .letter-content::first-letter {
  color: #991b1b;
}
.letter-card.letter-thematic-vintage .letter-footer {
  color: #78350f;
}
.letter-stamp.stamp-vintage {
  background: radial-gradient(circle at 35% 30%, #b91c1c 0%, #7f1d1d 60%, #450a0a 100%);
  border: 2px solid #f59e0b;
  box-shadow: 0 6px 18px rgba(69, 10, 10, 0.6), inset 0 2px 4px rgba(254, 243, 199, 0.5);
}

/* 4. Premiere de Cine Gala */
.letter-card.letter-thematic-cinema {
  background: linear-gradient(135deg, rgba(24, 24, 27, 0.97) 0%, rgba(9, 9, 11, 0.99) 100%);
  border: 1.5px solid rgba(234, 179, 8, 0.5);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.6), inset 0 0 50px rgba(234, 179, 8, 0.08), 0 0 20px rgba(234, 179, 8, 0.25);
  color: #fafafa;
}
.letter-card.letter-thematic-cinema .letter-header h3 {
  color: #fde047;
  text-shadow: 0 0 12px rgba(253, 224, 71, 0.5);
}
.letter-card.letter-thematic-cinema .letter-content {
  color: #f4f4f5;
  letter-spacing: 0.4px;
}
.letter-card.letter-thematic-cinema .letter-content::first-letter {
  color: #eab308;
  font-family: 'Playfair Display', serif;
  text-shadow: 0 0 10px rgba(234, 179, 8, 0.5);
}
.letter-card.letter-thematic-cinema .letter-footer {
  color: #facc15;
}
.letter-stamp.stamp-cinema {
  background: radial-gradient(circle at 35% 30%, #fef08a 0%, #eab308 55%, #713f12 100%);
  border: 2px solid #fef9c3;
  box-shadow: 0 0 22px rgba(234, 179, 8, 0.7), inset 0 2px 4px rgba(255, 255, 255, 0.8);
  color: #18181b;
}

/* 5. Cofre Pirata Tesoro */
.letter-card.letter-thematic-pirate {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 40%, #f59e0b 100%);
  border: 2px solid #78350f;
  box-shadow: 0 16px 45px rgba(69, 26, 3, 0.2), inset 0 0 55px rgba(120, 53, 15, 0.2);
  color: #451a03;
}
.letter-card.letter-thematic-pirate .letter-header h3 {
  color: #78350f;
  text-shadow: 1px 1px 0 rgba(254, 243, 199, 0.8);
}
.letter-card.letter-thematic-pirate .letter-content {
  color: #290d02;
}
.letter-card.letter-thematic-pirate .letter-content::first-letter {
  color: #991b1b;
  text-shadow: 1px 1px 0 #fde68a;
}
.letter-card.letter-thematic-pirate .letter-footer {
  color: #78350f;
}
.letter-stamp.stamp-pirate {
  background: radial-gradient(circle at 35% 30%, #fbbf24 0%, #d97706 60%, #451a03 100%);
  border: 2px solid #fef3c7;
  box-shadow: 0 6px 18px rgba(120, 53, 15, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.6);
}

/* 6. Chocolatería Fina */
.letter-card.letter-thematic-candy {
  background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 50%, #fecdd3 100%);
  border: 1.5px solid rgba(225, 29, 72, 0.35);
  box-shadow: 0 14px 40px rgba(159, 18, 57, 0.1), inset 0 0 45px rgba(251, 113, 133, 0.15);
}
.letter-card.letter-thematic-candy .letter-header h3 {
  color: #9f1239;
}
.letter-card.letter-thematic-candy .letter-content {
  color: #4c0519;
}
.letter-card.letter-thematic-candy .letter-content::first-letter {
  color: #e11d48;
}
.letter-card.letter-thematic-candy .letter-footer {
  color: #881337;
}
.letter-stamp.stamp-candy {
  background: radial-gradient(circle at 35% 30%, #fda4af 0%, #f43f5e 55%, #881337 100%);
  border: 1.5px solid #fff1f2;
  box-shadow: 0 6px 16px rgba(190, 18, 60, 0.45), inset 0 2px 4px rgba(255, 255, 255, 0.6);
}

/* 7. Arcade Gamer 8-Bit */
.letter-card.letter-thematic-arcade {
  background: linear-gradient(135deg, #090d16 0%, #0f172a 100%);
  border: 2px solid #06b6d4;
  box-shadow: 0 16px 45px rgba(6, 182, 212, 0.25), inset 0 0 40px rgba(6, 182, 212, 0.1), 0 0 20px rgba(6, 182, 212, 0.3);
  color: #ecfeff;
}
.letter-card.letter-thematic-arcade .letter-header h3 {
  color: #22d3ee;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(34, 211, 238, 0.6);
}
.letter-card.letter-thematic-arcade .letter-content {
  color: #a5f3fc;
  font-size: 0.98rem;
}
.letter-card.letter-thematic-arcade .letter-content::first-letter {
  color: #f43f5e;
  text-shadow: 0 0 10px rgba(244, 63, 94, 0.6);
}
.letter-card.letter-thematic-arcade .letter-footer {
  color: #38bdf8;
}
.letter-stamp.stamp-arcade {
  background: #0f172a;
  border: 2px solid #06b6d4;
  box-shadow: 0 0 18px rgba(6, 182, 212, 0.8), inset 0 0 8px #06b6d4;
  color: #38bdf8;
}

/* Rods y cintas del pergamino enrollado por temática */
.scroll-rod.rod-cosmic {
  background: linear-gradient(90deg, #1e1b4b 0%, #6366f1 30%, #c084fc 50%, #6366f1 70%, #1e1b4b 100%);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.5);
}
.scroll-rod.rod-cosmic::before, .scroll-rod.rod-cosmic::after {
  background: radial-gradient(circle, #e9d5ff 20%, #7c3aed 70%, #1e1b4b 100%);
}
.scroll-rod.rod-vintage {
  background: linear-gradient(90deg, #451a03 0%, #78350f 30%, #d97706 50%, #78350f 70%, #451a03 100%);
}
.scroll-rod.rod-cinema {
  background: linear-gradient(90deg, #713f12 0%, #eab308 40%, #fef08a 50%, #eab308 60%, #713f12 100%);
  box-shadow: 0 0 14px rgba(234, 179, 8, 0.5);
}
.scroll-rod.rod-pirate {
  background: linear-gradient(90deg, #290d02 0%, #78350f 35%, #f59e0b 50%, #78350f 65%, #290d02 100%);
}
.scroll-rod.rod-candy {
  background: linear-gradient(90deg, #881337 0%, #f43f5e 35%, #fda4af 50%, #f43f5e 65%, #881337 100%);
}
.scroll-rod.rod-arcade {
  background: linear-gradient(90deg, #082f49 0%, #0284c7 35%, #38bdf8 50%, #0284c7 65%, #082f49 100%);
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.6);
}
.scroll-rod.rod-arcade::before, .scroll-rod.rod-arcade::after {
  background: radial-gradient(circle, #a5f3fc 20%, #0284c7 70%, #082f49 100%);
}

.scroll-ribbon-line.ribbon-cosmic {
  background: linear-gradient(90deg, #6366f1 0%, #a855f7 50%, #6366f1 100%);
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
}
.scroll-ribbon-line.ribbon-vintage {
  background: linear-gradient(90deg, #7f1d1d 0%, #b91c1c 50%, #7f1d1d 100%);
}
.scroll-ribbon-line.ribbon-cinema {
  background: linear-gradient(90deg, #ca8a04 0%, #facc15 50%, #ca8a04 100%);
  box-shadow: 0 0 8px rgba(250, 204, 21, 0.6);
}
.scroll-ribbon-line.ribbon-pirate {
  background: linear-gradient(90deg, #78350f 0%, #d97706 50%, #78350f 100%);
}
.scroll-ribbon-line.ribbon-candy {
  background: linear-gradient(90deg, #e11d48 0%, #fb7185 50%, #e11d48 100%);
}
.scroll-ribbon-line.ribbon-arcade {
  background: linear-gradient(90deg, #0284c7 0%, #22d3ee 50%, #0284c7 100%);
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.7);
}

.scroll-parchment-body.parchment-cosmic {
  background: linear-gradient(180deg, #1e1b4b 0%, #0f172a 100%);
  border-color: #6366f1;
  box-shadow: inset 0 0 25px rgba(168, 85, 247, 0.3);
}
.scroll-parchment-body.parchment-cinema {
  background: linear-gradient(180deg, #18181b 0%, #09090b 100%);
  border-color: #eab308;
  box-shadow: inset 0 0 25px rgba(234, 179, 8, 0.2);
}
.scroll-parchment-body.parchment-arcade {
  background: linear-gradient(180deg, #090d16 0%, #0f172a 100%);
  border-color: #06b6d4;
  box-shadow: inset 0 0 25px rgba(6, 182, 212, 0.3);
}

.scroll-invitation-text.text-cosmic { color: #c084fc; text-shadow: 0 0 8px rgba(192, 132, 252, 0.4); }
.scroll-invitation-text.text-cinema { color: #fde047; text-shadow: 0 0 8px rgba(253, 224, 71, 0.4); }
.scroll-invitation-text.text-arcade { color: #22d3ee; text-shadow: 0 0 8px rgba(34, 211, 238, 0.5); }
.scroll-invitation-text.text-candy { color: #9f1239; }
.scroll-invitation-text.text-pirate { color: #78350f; }
.scroll-invitation-text.text-vintage { color: #451a03; }

/* Hub Modules Structure & Responsive Containment */
.hub-module,
.gallery-module,
#module-gallery {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Polaroids Memory Gallery - Mobile & Desktop Polish */
.gallery-interactive-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.gallery-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  backdrop-filter: blur(12px);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  z-index: 10;
  transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.gallery-nav-arrow:active {
  transform: translateY(-50%) scale(0.9);
}

.gallery-nav-arrow.prev {
  left: 6px;
}

.gallery-nav-arrow.next {
  right: 6px;
}

.polaroids-container,
.memories-carousel-container {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 22px 44px 26px 44px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  box-sizing: border-box;
  overscroll-behavior-x: contain;
}

.polaroids-container::-webkit-scrollbar,
.memories-carousel-container::-webkit-scrollbar {
  display: none;
}

/* Tarjeta Polaroid con sombras suaves de fotografía instantánea analógica */
.polaroid-card {
  flex: 0 0 230px;
  width: 230px;
  max-width: 82vw;
  scroll-snap-align: center;
  background: #ffffff;
  border-radius: 12px;
  padding: 14px 14px 22px 14px;
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.14), 
              0 4px 12px -2px rgba(0, 0, 0, 0.06), 
              0 0 1px 1px rgba(0, 0, 0, 0.04),
              inset 0 0 0 1px rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
  cursor: pointer;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  touch-action: manipulation;
  position: relative;
}

/* Inclinación sutil orgánica de instantánea física sobre mesa */
.polaroid-card:nth-child(odd) {
  transform: rotate(-1.5deg);
}

.polaroid-card:nth-child(even) {
  transform: rotate(1.4deg);
}

.polaroid-card:nth-child(3n) {
  transform: rotate(-0.8deg);
}

.polaroid-card:hover {
  transform: translateY(-6px) rotate(0deg) scale(1.03);
  box-shadow: 0 20px 40px -6px rgba(0, 0, 0, 0.22), 
              0 8px 16px -4px rgba(0, 0, 0, 0.1),
              0 0 0 1px rgba(0, 0, 0, 0.06);
  z-index: 10;
}

.polaroid-card:active {
  transform: scale(0.97) rotate(0deg);
}

/* Cinta Adhesiva Washi Tape Decorativa en las esquinas */
.polaroid-card::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 16px;
  width: 52px;
  height: 18px;
  background: linear-gradient(135deg, rgba(254, 205, 211, 0.82) 0%, rgba(253, 164, 175, 0.72) 100%);
  border-left: 2px dashed rgba(244, 63, 94, 0.35);
  border-right: 2px dashed rgba(244, 63, 94, 0.35);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transform: rotate(-10deg);
  z-index: 5;
  pointer-events: none;
  backdrop-filter: blur(2px);
  opacity: 0.92;
}

.polaroid-card:nth-child(even)::before {
  left: auto;
  right: 16px;
  transform: rotate(8deg);
  background: linear-gradient(135deg, rgba(254, 240, 138, 0.85) 0%, rgba(250, 204, 21, 0.7) 100%);
  border-left-color: rgba(202, 138, 4, 0.35);
  border-right-color: rgba(202, 138, 4, 0.35);
}

.polaroid-card:nth-child(3n)::before {
  left: 50%;
  transform: translateX(-50%) rotate(-1deg);
  background: linear-gradient(135deg, rgba(199, 210, 254, 0.85) 0%, rgba(165, 180, 252, 0.7) 100%);
  border-left-color: rgba(99, 102, 241, 0.35);
  border-right-color: rgba(99, 102, 241, 0.35);
}

.polaroid-img-wrapper {
  width: 100%;
  height: 175px;
  border-radius: 8px;
  overflow: hidden;
  background: radial-gradient(circle, var(--bg-top) 0%, var(--bg-mid) 100%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.polaroid-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px var(--primary-glow));
  transition: transform 0.35s ease;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.polaroid-card img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
}

.polaroid-caption {
  margin-top: 14px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-main);
  text-align: center;
  line-height: 1.45;
  padding: 0 6px;
}

/* Indicadores de página de la galería (Dots) */
.gallery-dots-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  margin-bottom: 6px;
}

.gallery-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: none;
  background: rgba(120, 120, 120, 0.35);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 0;
}

.gallery-dot.active {
  width: 28px;
  background: var(--primary);
  box-shadow: 0 0 10px var(--primary-glow);
}

.gallery-hint-mobile {
  font-size: 0.78rem;
  text-align: center;
  color: var(--text-muted);
  margin-bottom: 14px;
  opacity: 0.85;
}

/* Adaptación específica para tema oscuro Noche Mágica (Midnight) */
body[data-theme="midnight"] .polaroid-card {
  background: rgba(22, 20, 58, 0.94);
  border: 1px solid rgba(165, 180, 252, 0.35);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.65), 0 0 16px rgba(129, 140, 248, 0.2);
}

body[data-theme="midnight"] .polaroid-card::before {
  background: linear-gradient(135deg, rgba(129, 140, 248, 0.65) 0%, rgba(99, 102, 241, 0.55) 100%);
  border-left-color: rgba(199, 210, 254, 0.45);
  border-right-color: rgba(199, 210, 254, 0.45);
}

body[data-theme="midnight"] .polaroid-img-wrapper {
  background: radial-gradient(circle, rgba(49, 46, 129, 0.75) 0%, rgba(15, 23, 42, 0.92) 100%);
  border: 1px solid rgba(129, 140, 248, 0.25);
}

body[data-theme="midnight"] .polaroid-caption {
  color: #f8fafc;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Floating Wish Bubbles */
.wishes-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 10px;
}

.wish-chip {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, background 0.2s ease;
}

.wish-chip:active {
  transform: scale(0.92);
  background: var(--primary-light);
}

/* ==========================================================================
   MODALS, BOTTOM SHEETS & OVERLAYS (Optimizados para pantallas móviles)
   ========================================================================== */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  z-index: 99;
  align-items: flex-end;
  justify-content: center;
}

.modal-overlay.active {
  display: flex;
}

.bottom-sheet {
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  border-radius: 28px 28px 0 0;
  border: 1px solid var(--card-border);
  border-bottom: none;
  width: 100%;
  max-width: 520px;
  max-height: 82vh;
  padding: 20px 20px max(55px, env(safe-area-inset-bottom)) 20px;
  overflow-y: auto;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.25);
  -webkit-overflow-scrolling: touch;
}

.sheet-handle {
  width: 44px;
  height: 5px;
  background: rgba(120, 120, 120, 0.35);
  border-radius: 999px;
  margin: 0 auto 16px auto;
}

/* Estilos para el Editor de Recuerdos Florales */
.memory-edit-card {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.memory-edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.memory-badge {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--primary);
  background: rgba(244, 63, 94, 0.12);
  padding: 4px 10px;
  border-radius: 8px;
}

.flower-select {
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid var(--card-border);
  background: #ffffff;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-main);
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.flower-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.sheet-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-dark);
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.6rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}

/* Form Groups inside Personalization Studio */
.settings-group {
  margin-bottom: 20px;
}

.settings-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 10px;
}

/* Theme selector radio tiles */
.theme-selector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.theme-pill {
  border: 1.5px solid var(--card-border);
  border-radius: 14px;
  padding: 10px 6px;
  text-align: center;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.75);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.theme-pill span {
  color: inherit;
}

.theme-pill.active {
  border-color: var(--primary);
  transform: scale(1.03);
  box-shadow: 0 4px 14px var(--primary-glow);
}

.color-dots {
  display: flex;
  gap: 4px;
}

.color-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
}

/* Input Fields */
.input-text, .input-textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--card-border);
  background: #ffffff;
  color: var(--text-main);
  font-size: 0.95rem;
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.input-text::placeholder, .input-textarea::placeholder {
  color: #64748b;
  opacity: 0.75;
}

.input-text:focus, .input-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

/* ==========================================================================
   TEMA NOCHE MÁGICA (MIDNIGHT) - FORMULARIOS & MODALES 100% CONTRASTADOS
   ========================================================================== */
body[data-theme="midnight"] .bottom-sheet {
  background: rgba(18, 15, 48, 0.96);
  border: 1px solid rgba(165, 180, 252, 0.35);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.7);
}

body[data-theme="midnight"] .sheet-handle {
  background: rgba(165, 180, 252, 0.4);
}

body[data-theme="midnight"] .sheet-header h3 {
  color: #f8fafc;
}

body[data-theme="midnight"] .close-btn {
  color: #cbd5e1;
}

body[data-theme="midnight"] .settings-label {
  color: #e2e8f0;
}

body[data-theme="midnight"] .theme-pill {
  background: rgba(28, 25, 72, 0.85);
  border-color: rgba(129, 140, 248, 0.25);
  color: #f8fafc;
}

body[data-theme="midnight"] .theme-pill.active {
  border-color: #818cf8;
  background: rgba(55, 48, 163, 0.6);
  box-shadow: 0 0 14px rgba(129, 140, 248, 0.5);
}

body[data-theme="midnight"] .memory-edit-card {
  background: rgba(26, 23, 68, 0.85);
  border: 1px solid rgba(129, 140, 248, 0.35);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
}

body[data-theme="midnight"] .memory-badge {
  background: rgba(129, 140, 248, 0.2);
  color: #facc15;
}

body[data-theme="midnight"] .flower-select {
  background: #0f172a;
  border: 1px solid rgba(129, 140, 248, 0.4);
  color: #f8fafc;
}

body[data-theme="midnight"] .flower-select option {
  background: #0f172a;
  color: #f8fafc;
}

body[data-theme="midnight"] .input-text,
body[data-theme="midnight"] .input-textarea {
  background: #0f172a;
  border: 1px solid rgba(129, 140, 248, 0.4);
  color: #ffffff;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

body[data-theme="midnight"] .input-text::placeholder,
body[data-theme="midnight"] .input-textarea::placeholder {
  color: #94a3b8;
  opacity: 0.85;
}

body[data-theme="midnight"] .input-text:focus,
body[data-theme="midnight"] .input-textarea:focus {
  background: #131b2e;
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.35), inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Toast Notifications */
#toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: rgba(20, 20, 20, 0.9);
  color: #fff;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  z-index: 1000;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}

#toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ==========================================================================
   DESKTOP & PC RESPONSIVE ENHANCEMENTS (Windows, Mac, Linux, Tablets)
   ========================================================================== */

/* Barra de desplazamiento estética para navegadores de PC */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.03);
}
::-webkit-scrollbar-thumb {
  background: var(--primary-light);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* Adaptaciones para Pantallas Medianas y Grandes (Tablets, Laptops, Monitores PC) */
@media (min-width: 768px) {
  body {
    padding: 24px;
  }

  #app-container {
    max-width: 880px;
  }

  .hero-banner {
    padding: 38px 32px;
  }

  .hero-title {
    font-size: 2.8rem;
  }

  .hero-message {
    font-size: 1.1rem;
    max-width: 620px;
    margin: 0 auto;
  }

  /* Jardín floral en 3 columnas en PC */
  .garden-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }

  .flower-card {
    padding: 22px 16px;
  }

  .flower-preview {
    width: 95px;
    height: 95px;
  }

  .flower-name {
    font-size: 1.15rem;
  }

  .letter-card {
    padding: 32px 30px;
  }

  .letter-content {
    font-size: 1.05rem;
    line-height: 1.85;
  }

  /* Escenario del pastel más espacioso en PC */
  .cake-stage {
    width: 380px;
    height: 390px;
    margin: 25px auto;
  }

  /* Caja de regalo en PC */
  .gift-box-wrapper {
    width: 260px;
    height: 260px;
    margin: 35px auto;
  }

  .gift-lid {
    width: 235px;
    height: 54px;
    left: 12.5px;
  }

  .gift-body {
    width: 215px;
    height: 175px;
    left: 22.5px;
  }

  /* Modales en PC: Diálogo flotante centrado en lugar de hoja inferior móvil */
  .modal-overlay {
    align-items: center;
    padding: 20px;
  }

  .bottom-sheet {
    border-radius: 28px;
    border-bottom: 1px solid var(--card-border);
    max-width: 580px;
    padding: 28px;
    animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .sheet-handle {
    display: none;
  }

  .polaroid-card {
    flex: 0 0 220px;
  }

  .polaroid-img-wrapper {
    width: 200px;
    height: 200px;
  }

  .desktop-shortcut-hint {
    display: block !important;
  }
}

@media (min-width: 1024px) {
  #app-container {
    max-width: 980px;
  }

  .garden-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
}

.desktop-shortcut-hint {
  display: none;
  font-size: 0.8rem;
  color: var(--text-muted);
  opacity: 0.8;
  margin-top: 8px;
}

/* ==========================================================================
   BOTÓN FLOTANTE GLOBAL DE PERSONALIZACIÓN (FAB) & MODO SOLO LECTURA
   ========================================================================== */
#btn-settings-toggle {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 9999;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--card-border);
  background: var(--card-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--text-main);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18), inset 0 1px 2px rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.25rem;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}

#btn-settings-toggle:hover {
  transform: scale(1.12) rotate(15deg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.26);
}

#btn-settings-toggle:active {
  transform: scale(0.92);
}

/* Espacio armónico en Pantalla 3 para que el botón de música y el FAB no colisionen */
.hub-header .header-actions {
  margin-right: 54px;
  transition: margin-right 0.3s ease;
}

body.mode-readonly .hub-header .header-actions {
  margin-right: 0;
}

body.mode-readonly #btn-settings-toggle,
body.in-welcome-screen #btn-settings-toggle,
body:has(#screen-welcome.active) #btn-settings-toggle,
#app-container:has(#screen-welcome.active) #btn-settings-toggle,
body.mode-readonly #settings-modal,
body.mode-readonly #share-modal,
body.mode-readonly #monetization-modal {
  display: none !important;
}

.recipient-readonly-section {
  display: none;
  width: 100%;
  margin-top: 25px;
  margin-bottom: 30px;
}

body.mode-readonly .recipient-readonly-section {
  display: block;
  animation: fadeInScreen 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.gift-dedication {
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-main);
  background: var(--card-bg);
  backdrop-filter: blur(14px);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 14px 20px;
  margin-bottom: 22px;
  line-height: 1.55;
  box-shadow: var(--card-shadow);
}

.gift-dedication .recipient-name-target,
.gift-dedication .sender-name-target {
  color: var(--primary);
  font-weight: 700;
}

.thank-you-card {
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  border: 1px solid var(--card-border);
  border-radius: 24px;
  padding: 24px 20px;
  text-align: center;
  box-shadow: var(--card-shadow);
}

.thank-you-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}

.thank-you-icon {
  font-size: 1.8rem;
}

.thank-you-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-main);
}

body[data-theme="midnight"] .thank-you-header h3,
body[data-theme="cosmic"] .thank-you-header h3,
body[data-theme="cinema"] .thank-you-header h3,
body[data-theme="arcade"] .thank-you-header h3 {
  color: #f8fafc !important;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.25);
}

.thank-you-text {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-main);
  margin-bottom: 18px;
}

.thank-you-text strong {
  color: var(--primary);
}

/* Botones de WhatsApp con Contraste Accesible WCAG AA y Centrado Perfecto */
#btn-send-whatsapp,
.whatsapp-reply,
#btn-reply-thanks {
  background: #128c7e !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(18, 140, 126, 0.38) !important;
  border: none !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 400px !important;
  margin: 0 auto !important;
  padding: 14px 20px !important;
  line-height: 1.4 !important;
  font-size: 0.95rem !important;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

#btn-send-whatsapp:hover,
#btn-send-whatsapp:active,
.whatsapp-reply:hover,
.whatsapp-reply:active,
#btn-reply-thanks:hover,
#btn-reply-thanks:active {
  background: #0d6e63 !important;
  transform: scale(1.02);
  box-shadow: 0 6px 20px rgba(18, 140, 126, 0.45) !important;
}

.btn-relive {
  background: rgba(255, 255, 255, 0.9);
  color: var(--primary-dark);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  font-size: 0.92rem;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.btn-relive:active,
.btn-relive:hover {
  transform: scale(1.03);
  background: #ffffff;
}

.create-own-link-wrapper {
  text-align: center;
  margin-top: 26px;
  padding-bottom: 14px;
}

.create-own-link {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-decoration: none;
  opacity: 0.78;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.create-own-link:hover {
  opacity: 1;
  color: var(--primary);
  text-decoration: underline;
}

/* ==========================================================================
   ESTILOS DE GESTIÓN MULTI-REGALO (CREATOR STUDIO)
   ========================================================================== */
.new-gift-bar {
  margin-bottom: 16px;
}

.btn-new-gift-action {
  width: 100%;
  padding: 11px 16px;
  border-radius: 14px;
  border: 1.5px dashed var(--primary);
  background: rgba(244, 63, 94, 0.08);
  color: var(--primary-dark);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.25s ease;
}

.btn-new-gift-action:hover,
.btn-new-gift-action:active {
  background: rgba(244, 63, 94, 0.16);
  transform: translateY(-1px);
}

.created-gifts-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  max-height: 220px;
  overflow-y: auto;
}

.empty-gifts-msg {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  padding: 8px 0;
  font-style: italic;
}

.created-gift-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 0.84rem;
  gap: 8px;
}

body[data-theme="midnight"] .created-gift-item {
  background: rgba(30, 27, 75, 0.8);
  border: 1px solid rgba(129, 140, 248, 0.3);
}

.created-gift-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: left;
}

.created-gift-name {
  font-weight: 700;
  color: var(--primary-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-theme="midnight"] .created-gift-name {
  color: #facc15;
}

.created-gift-date {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.btn-copy-gift-item {
  background: var(--primary);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.btn-copy-gift-item:hover {
  opacity: 0.9;
  transform: scale(1.03);
}

/* ==========================================================================
   ARQUITECTURA DE ENLACE ULTRA-CORTO (<25 CARACTERES) - SHARE MODAL
   ========================================================================== */

.share-modal-body {
  text-align: center;
  padding: 4px 0 25px 0;
}

.share-modal-title-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin-bottom: 14px;
}

/* Badge de Estado del Enlace Dinámico */
.short-link-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  margin: 0 auto 16px auto;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.short-link-badge.loading {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.short-link-badge.ready {
  background: rgba(16, 185, 129, 0.14);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.38);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.22);
  animation: badgePop 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.short-link-badge.offline {
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
  border: 1px solid rgba(100, 116, 139, 0.28);
}

@keyframes badgePop {
  0% { transform: scale(0.92); opacity: 0.6; }
  50% { transform: scale(1.04); }
  100% { transform: scale(1); opacity: 1; }
}

.badge-spinner {
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: badgeSpin 0.7s linear infinite;
}

@keyframes badgeSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Tarjeta y Contenedor de Código QR */
.qr-card-wrapper {
  position: relative;
  display: inline-block;
  margin: 0 auto 10px auto;
}

#qr-share-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  padding: 12px;
  border-radius: 18px;
  width: 150px;
  height: 150px;
  margin: 0 auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
  border: 2px solid rgba(255, 255, 255, 0.9);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#qr-share-container img,
#qr-share-container canvas,
#qr-share-container svg {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 6px;
}

.qr-caption-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 6px;
  margin-bottom: 16px;
  opacity: 0.88;
}

/* Fila de Input y Botón Copiar */
.share-input-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

#share-url-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-align: center;
  background: #ffffff;
  color: var(--text-main);
  border: 1.5px solid var(--card-border);
  border-radius: 14px;
  padding: 12px 14px;
  flex: 1;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#share-url-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.btn-copy-short {
  padding: 10px 18px;
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 14px;
  background: var(--primary);
  color: #ffffff;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 14px var(--primary-glow);
  transition: transform 0.2s ease, background 0.2s ease;
}

.btn-copy-short:active {
  transform: scale(0.97);
}

.btn-copy-short.copied {
  background: #059669 !important;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.4) !important;
}

/* Botón Principal WhatsApp Ultra-Corto */
.btn-whatsapp-action {
  width: 100%;
  padding: 14px 20px;
  border-radius: 16px;
  font-size: 0.98rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #128c7e !important;
  color: #ffffff !important;
  border: none !important;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(18, 140, 126, 0.38) !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, box-shadow 0.2s ease;
}

.btn-whatsapp-action:hover,
.btn-whatsapp-action:active {
  background: #0d6e63 !important;
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 8px 25px rgba(18, 140, 126, 0.48) !important;
}

.btn-whatsapp-action:disabled {
  opacity: 0.8;
  cursor: wait;
}

/* Opciones Avanzadas Colapsables */
.share-advanced-details {
  margin-top: 18px;
  text-align: left;
  border-top: 1px dashed var(--card-border);
  padding-top: 14px;
}

.share-advanced-summary {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 0;
  user-select: none;
  outline: none;
}

.share-advanced-summary:hover {
  color: var(--primary);
}

.share-advanced-body {
  margin-top: 10px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  font-size: 0.8rem;
}

/* Soporte Tema Noche Mágica (Midnight) */
body[data-theme="midnight"] .short-link-badge.loading {
  background: rgba(245, 158, 11, 0.2);
  color: #fde047;
  border-color: rgba(251, 191, 36, 0.4);
}

body[data-theme="midnight"] .short-link-badge.ready {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
  border-color: rgba(52, 211, 153, 0.45);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25);
}

body[data-theme="midnight"] .short-link-badge.offline {
  background: rgba(148, 163, 184, 0.15);
  color: #cbd5e1;
  border-color: rgba(148, 163, 184, 0.3);
}

body[data-theme="midnight"] #share-url-input {
  background: #0f172a;
  color: #f8fafc;
  border-color: rgba(129, 140, 248, 0.4);
}

/* ==========================================================================
   PASE DELUXE VIP PAYWALL & FREEMIUM SHARE GATE
   ========================================================================== */
.share-vip-paywall {
  text-align: center;
  padding: 4px 6px 12px 6px;
}

.vip-paywall-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #d97706;
  background: rgba(245, 158, 11, 0.14);
  border: 1.5px solid rgba(245, 158, 11, 0.4);
  border-radius: 999px;
  padding: 4px 14px;
  margin-bottom: 8px;
}

.vip-paywall-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 6px;
}

.vip-paywall-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin-bottom: 14px;
}

.vip-perks-box {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 12px 14px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

body[data-theme="midnight"] .vip-perks-box {
  background: rgba(24, 21, 55, 0.9);
  border-color: rgba(129, 140, 248, 0.3);
}

.vip-perk-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.vip-perk-item .perk-icon {
  font-size: 1.2rem;
  line-height: 1.2;
}

.vip-perk-item .perk-text strong {
  display: block;
  font-size: 0.82rem;
  color: var(--text-main);
}

.vip-perk-item .perk-text span {
  display: block;
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.vip-pricing-tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 14px;
}

.vip-pricing-tag .pricing-val {
  font-size: 1.6rem;
  font-weight: 900;
  color: #d97706;
  text-shadow: 0 0 16px rgba(245, 158, 11, 0.3);
}

.vip-pricing-tag .pricing-label {
  font-size: 0.74rem;
  color: var(--text-muted);
  font-weight: 600;
}

.vip-actions-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.btn-checkout-vip {
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  font-size: 0.95rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid #fde68a !important;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(217, 119, 6, 0.42) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: pulseGlow 2.5s infinite alternate;
}

.btn-checkout-vip:active {
  transform: scale(0.98);
}

.btn-switch-floral-free {
  width: 100%;
  padding: 11px 16px;
  border-radius: 14px;
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(244, 63, 94, 0.08);
  color: var(--primary);
  border: 1.5px solid var(--primary-glow);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.btn-switch-floral-free:hover,
.btn-switch-floral-free:active {
  background: rgba(244, 63, 94, 0.16);
  transform: translateY(-1px);
}

.vip-guarantee-note {
  font-size: 0.72rem;
  color: var(--text-muted);
  opacity: 0.85;
  margin: 0;
  line-height: 1.4;
}

.short-link-badge.vip-gold-badge {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #b45309 !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25) !important;
}

/* Armonización de fondos de unboxing con la paleta de tema activa */
.chest-cursed-ambience {
  background: radial-gradient(circle, var(--primary-glow, rgba(16, 185, 129, 0.2)) 0%, rgba(217, 119, 6, 0.18) 45%, transparent 75%) !important;
}

.clapper-gold-ambience {
  background: radial-gradient(circle, var(--primary-glow, rgba(234, 179, 8, 0.25)) 0%, rgba(251, 191, 36, 0.15) 45%, transparent 70%) !important;
}

body[data-theme="midnight"] .share-advanced-body {
  background: rgba(30, 27, 75, 0.5);
  border-color: rgba(129, 140, 248, 0.3);
}

/* ==========================================================================
   PERSONALIZACIÓN AVANZADA: RELACIONES, MÓDULOS ACTIVABLES Y RAMILLETE
   ========================================================================== */

/* 1. Selector de Tipo de Relación */
.relationship-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 6px;
  margin-bottom: 8px;
}

@media (min-width: 480px) {
  .relationship-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.rel-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 12px;
  background: var(--card-bg);
  border: 1.5px solid var(--card-border);
  border-radius: 12px;
  color: var(--text-main);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
}

.rel-pill:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.rel-pill.active {
  border-color: var(--primary);
  background: var(--primary-light, rgba(244, 63, 94, 0.12));
  color: var(--primary-dark, #881337);
  box-shadow: 0 2px 8px var(--primary-glow, rgba(244, 63, 94, 0.2));
}

.rel-icon {
  font-size: 1.1rem;
}

.btn-template-suggestion {
  width: 100%;
  padding: 10px 14px;
  margin-top: 6px;
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.08) 0%, rgba(245, 158, 11, 0.08) 100%);
  border: 1.5px dashed var(--primary);
  border-radius: 12px;
  color: var(--primary-dark, #881337);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.25s ease;
}

.btn-template-suggestion:hover {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.16) 0%, rgba(245, 158, 11, 0.16) 100%);
  transform: scale(1.01);
}

/* 2. Interruptores de Módulos (Switches On/Off) */
.modules-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.modules-hint-tag {
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--primary-light, rgba(244, 63, 94, 0.1));
  color: var(--primary);
  font-weight: 700;
}

.modules-toggle-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 8px;
}

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.18s ease;
}

.switch-row:hover {
  background: rgba(255, 255, 255, 0.6);
}

.switch-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-main);
  user-select: none;
}

.switch-icon {
  font-size: 1.15rem;
}

.switch-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.switch-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cbd5e1;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 34px;
}

.switch-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.switch-toggle input:checked + .switch-slider {
  background-color: var(--primary, #f43f5e);
}

.switch-toggle input:checked + .switch-slider:before {
  transform: translateX(20px);
}

.switch-toggle input:focus-visible + .switch-slider {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px var(--primary-glow);
}

/* Subgrupos de opciones y switches VIP */
.modules-subgroup-title {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 10px 4px 4px 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.modules-subgroup-title.vip-subgroup-header {
  color: #b45309;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--card-border, rgba(0, 0, 0, 0.12));
}

body[data-theme="midnight"] .modules-subgroup-title.vip-subgroup-header {
  color: #fde047;
}

.vip-switch-row {
  border-left: 3px solid var(--primary, #f59e0b) !important;
  background: rgba(245, 158, 11, 0.05);
}

body[data-theme="midnight"] .vip-switch-row {
  background: rgba(245, 158, 11, 0.1);
}

.vip-subcard.is-disabled {
  opacity: 0.58;
  background: rgba(0, 0, 0, 0.03);
  border-style: dashed;
}

body[data-theme="midnight"] .vip-subcard.is-disabled {
  background: rgba(255, 255, 255, 0.03);
}

.vip-subcard.is-disabled .vip-card-body {
  display: none !important;
}

.switch-toggle.switch-toggle-sm {
  width: 38px;
  height: 22px;
}

.switch-toggle.switch-toggle-sm .switch-slider:before {
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
}

.switch-toggle.switch-toggle-sm input:checked + .switch-slider:before {
  transform: translateX(16px);
}

/* 3. Estilo de Presentación Floral */
.flower-display-pills {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.display-pill {
  flex: 1;
  padding: 10px 12px;
  background: var(--card-bg);
  border: 1.5px solid var(--card-border);
  border-radius: 12px;
  color: var(--text-main);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all 0.22s ease;
}

.display-pill:hover {
  border-color: var(--primary);
}

.display-pill.active {
  border-color: var(--primary);
  background: var(--primary-light, rgba(244, 63, 94, 0.12));
  color: var(--primary-dark, #881337);
  box-shadow: 0 2px 8px var(--primary-glow, rgba(244, 63, 94, 0.15));
}

/* 4. Insignia de Significado Floral */
.flower-meaning-hint {
  font-size: 0.76rem;
  color: var(--primary-dark, #881337);
  background: var(--primary-light, rgba(244, 63, 94, 0.08));
  padding: 5px 10px;
  border-radius: 8px;
  margin: 4px 0 8px 0;
  border-left: 3px solid var(--primary);
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 5. COMPONENTE VISUAL DEL RAMILLETE (BOUQUET FLORAL EN EL HUB) */
.bouquet-module {
  text-align: center;
  padding: 10px 0 20px 0;
  width: 100%;
}

.bouquet-stage {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 10px auto 20px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 295px;
}

.bouquet-wrapper {
  position: relative;
  width: 280px;
  height: 290px;
  margin: 0 auto;
  user-select: none;
  animation: bouquetBreeze 6s ease-in-out infinite;
  transform-origin: bottom center;
}

/* Follaje decorativo de fondo */
.bouquet-foliage-bg {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  height: 200px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
}

/* Tallos continuos y convergentes hacia el lazo */
.bouquet-stems-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* Flores individuales en abanico sobre sus tallos */
.bouquet-flower-item {
  position: absolute;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
  will-change: transform;
}

.bouquet-flower-item img {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.18));
  transition: transform 0.3s ease;
}

/* Brote 'Bloom' Escalonado para las Flores del Ramillete */
.bouquet-flower-item.pos-0 img {
  animation: bloomPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}

.bouquet-flower-item.pos-1 img {
  animation: bloomPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.30s both;
}

.bouquet-flower-item.pos-2 img {
  animation: bloomPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s both;
}

/* Posiciones exactas: cúpula armoniosa y conectada al milímetro con los tallos */
.bouquet-flower-item {
  width: 96px;
  height: 96px;
}

.bouquet-flower-item.pos-0 {
  left: 36px;
  top: 54px;
  transform-origin: 48px 76px;
  transform: rotate(-22deg);
  z-index: 4;
}

.bouquet-flower-item.pos-1 {
  left: 92px;
  top: 30px;
  transform-origin: 48px 76px;
  transform: rotate(0deg);
  z-index: 5;
}

.bouquet-flower-item.pos-2 {
  left: 148px;
  top: 54px;
  transform-origin: 48px 76px;
  transform: rotate(22deg);
  z-index: 4;
}

/* Animación y realce al tocar o pasar el mouse */
.bouquet-flower-item:hover,
.bouquet-flower-item:active,
.bouquet-flower-item.highlighted {
  z-index: 10 !important;
}

.bouquet-flower-item.pos-0:hover,
.bouquet-flower-item.pos-0.highlighted {
  transform: rotate(-22deg) scale(1.14) translateY(-6px) !important;
  filter: drop-shadow(0 12px 24px var(--primary-glow, rgba(244, 63, 94, 0.5)));
}

.bouquet-flower-item.pos-1:hover,
.bouquet-flower-item.pos-1.highlighted {
  transform: rotate(0deg) scale(1.15) translateY(-8px) !important;
  filter: drop-shadow(0 14px 28px var(--primary-glow, rgba(244, 63, 94, 0.5)));
}

.bouquet-flower-item.pos-2:hover,
.bouquet-flower-item.pos-2.highlighted {
  transform: rotate(22deg) scale(1.14) translateY(-6px) !important;
  filter: drop-shadow(0 12px 24px var(--primary-glow, rgba(244, 63, 94, 0.5)));
}

/* Lazo Satén Decorativo en la Base */
.bouquet-ribbon-svg {
  position: absolute;
  top: 175px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 80px;
  z-index: 6;
  pointer-events: none;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.22));
}

/* Tarjetas de Significado de cada Flor en el Ramillete */
.bouquet-meanings-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  text-align: left;
}

.bouquet-meaning-card {
  display: flex;
  gap: 12px;
  align-items: center;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: var(--card-shadow, 0 4px 14px rgba(0, 0, 0, 0.06));
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.bouquet-meaning-card:hover,
.bouquet-meaning-card.active {
  border-color: var(--primary);
  background: var(--card-bg);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px var(--primary-glow, rgba(244, 63, 94, 0.18));
}

.bouquet-meaning-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--primary-light, rgba(244, 63, 94, 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  transition: transform 0.3s ease;
}

.bouquet-meaning-card:hover .bouquet-meaning-icon,
.bouquet-meaning-card.active .bouquet-meaning-icon {
  transform: scale(1.1) rotate(6deg);
}

.bouquet-meaning-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bouquet-meaning-content {
  flex: 1;
}

.bouquet-meaning-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bouquet-meaning-tag {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--primary-dark);
  background: var(--primary-light, rgba(244, 63, 94, 0.12));
  padding: 2px 8px;
  border-radius: 999px;
}

.bouquet-meaning-symb {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary-dark);
  margin: 2px 0 4px 0;
}

.bouquet-meaning-dedication {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-main);
  line-height: 1.5;
  padding: 6px 10px;
  background: var(--bg-surface, rgba(0, 0, 0, 0.03));
  border-left: 3px solid var(--primary);
  border-radius: 4px;
  margin-top: 6px;
  font-style: italic;
}

/* Clase de Visibilidad Modular */
.module-hidden {
  display: none !important;
}

/* Adaptaciones Tema Noche Mágica (Midnight) */
body[data-theme="midnight"] .rel-pill {
  background: rgba(30, 27, 75, 0.7);
  border-color: rgba(129, 140, 248, 0.3);
  color: #f8fafc;
}

body[data-theme="midnight"] .rel-pill.active {
  background: rgba(99, 102, 241, 0.25);
  border-color: #818cf8;
  color: #facc15;
}

body[data-theme="midnight"] .btn-template-suggestion {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(245, 158, 11, 0.15) 100%);
  border-color: #818cf8;
  color: #facc15;
}

body[data-theme="midnight"] .modules-toggle-list {
  background: rgba(30, 27, 75, 0.5);
  border-color: rgba(129, 140, 248, 0.25);
}

body[data-theme="midnight"] .switch-slider {
  background-color: rgba(255, 255, 255, 0.18);
}

body[data-theme="midnight"] .switch-row:hover {
  background: rgba(49, 46, 129, 0.4);
}

body[data-theme="midnight"] .display-pill {
  background: rgba(30, 27, 75, 0.7);
  border-color: rgba(129, 140, 248, 0.3);
  color: #f8fafc;
}

body[data-theme="midnight"] .display-pill.active {
  background: rgba(99, 102, 241, 0.25);
  border-color: #818cf8;
  color: #facc15;
}

body[data-theme="midnight"] .flower-meaning-hint {
  background: rgba(99, 102, 241, 0.2);
  color: #e0e7ff;
  border-left-color: #818cf8;
}

body[data-theme="midnight"] .bouquet-meaning-card {
  background: rgba(30, 27, 75, 0.85);
  border-color: rgba(129, 140, 248, 0.25);
}

body[data-theme="midnight"] .bouquet-meaning-name {
  color: #f8fafc;
}

body[data-theme="midnight"] .bouquet-meaning-tag {
  background: rgba(129, 140, 248, 0.22);
  color: #c7d2fe;
}

body[data-theme="midnight"] .bouquet-meaning-symb {
  color: #facc15;
}

body[data-theme="midnight"] .bouquet-meaning-dedication {
  background: rgba(255, 255, 255, 0.06);
  color: #cbd5e1;
  border-left-color: #818cf8;
}

/* Escala Responsiva del Ramillete (Tablets y PC) */
@media (min-width: 768px) {
  .bouquet-stage {
    max-width: 440px;
    min-height: 330px;
  }
  .bouquet-wrapper {
    width: 320px;
    height: 310px;
    transform: scale(1.1);
  }
}

/* ==========================================================================
   EXPERIENCIA / TEMÁTICA PRINCIPAL (FLORAL, CÓSMICA, VINTAGE)
   ========================================================================== */
.experience-selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.exp-pill {
  position: relative;
  background: var(--card-bg, rgba(255, 255, 255, 0.85));
  border: 1.5px solid var(--card-border, rgba(0, 0, 0, 0.1));
  border-radius: 14px;
  padding: 14px 10px 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.exp-badge-free {
  position: absolute;
  top: 6px;
  right: 6px;
  background: #10b981;
  color: #ffffff;
  font-size: 0.58rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
  letter-spacing: 0.5px;
}

.exp-badge-vip {
  position: absolute;
  top: 6px;
  right: 6px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #18181b;
  font-size: 0.58rem;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 999px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.35);
  border: 1px solid #fef08a;
}

.exp-pill:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
}

.exp-pill.active {
  border-color: var(--primary);
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.12) 0%, rgba(253, 224, 71, 0.1) 100%);
  box-shadow: 0 4px 14px rgba(244, 63, 94, 0.2);
  transform: scale(1.02);
}

.exp-icon {
  font-size: 1.8rem;
  margin-bottom: 6px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

.exp-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.exp-title {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-main);
}

.exp-desc {
  font-size: 0.68rem;
  color: var(--text-muted);
  line-height: 1.25;
}

body[data-theme="midnight"] .exp-pill {
  background: rgba(30, 27, 75, 0.7);
  border-color: rgba(129, 140, 248, 0.3);
}

body[data-theme="midnight"] .exp-pill.active {
  border-color: #818cf8;
  background: rgba(99, 102, 241, 0.25);
  box-shadow: 0 4px 16px rgba(129, 140, 248, 0.35);
}

/* ==========================================================================
   CÁPSULA CÓSMICA (UNBOXING - PANTALLA 1)
   ========================================================================== */
.cosmic-capsule-wrapper {
  position: relative;
  width: 220px;
  height: 240px;
  margin: 30px auto 25px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  perspective: 1000px;
  user-select: none;
}

.cosmic-orbit-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
  border: 1.5px dashed rgba(167, 139, 250, 0.6);
  box-shadow: 0 0 15px rgba(129, 140, 248, 0.35);
  transform-origin: center center;
}

.ring-outer {
  width: 220px;
  height: 220px;
  margin-top: -110px;
  margin-left: -110px;
  animation: cosmicRingSpin 14s linear infinite;
}

.ring-inner {
  width: 170px;
  height: 170px;
  margin-top: -85px;
  margin-left: -85px;
  border-color: rgba(56, 189, 248, 0.65);
  animation: cosmicRingSpinRev 9s linear infinite;
}

@keyframes cosmicRingSpin {
  from { transform: rotate(0deg) rotateX(65deg); }
  to { transform: rotate(360deg) rotateX(65deg); }
}

@keyframes cosmicRingSpinRev {
  from { transform: rotate(360deg) rotateY(65deg); }
  to { transform: rotate(0deg) rotateY(65deg); }
}

.cosmic-capsule-pod {
  width: 110px;
  height: 160px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: floatSlow 3.5s ease-in-out infinite alternate;
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.8s ease;
  z-index: 3;
}

.capsule-dome {
  width: 92px;
  height: 100px;
  border-radius: 46px 46px 12px 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(99, 102, 241, 0.35) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.5), inset 0 0 15px rgba(255, 255, 255, 0.4);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 3;
  transform-origin: bottom center;
  will-change: transform, opacity;
}

.capsule-starlight-core {
  position: absolute;
  top: 48px;
  left: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  margin-left: -22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  line-height: 1;
  text-align: center;
  z-index: 2;
  pointer-events: none;
  animation: cosmicCoreFloatPulse 2s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 10px #fde047);
  will-change: transform, filter;
  background: transparent !important;
  box-shadow: none !important;
}

@keyframes cosmicCoreFloatPulse {
  0% {
    transform: scale(0.95);
    filter: drop-shadow(0 0 8px #fde047) drop-shadow(0 0 16px rgba(250, 204, 21, 0.6));
  }
  100% {
    transform: scale(1.15);
    filter: drop-shadow(0 0 16px #fef08a) drop-shadow(0 0 30px rgba(234, 179, 8, 0.85)) drop-shadow(0 0 45px rgba(56, 189, 248, 0.7));
  }
}

.capsule-glass-glare {
  position: absolute;
  top: 10px;
  left: 14px;
  width: 14px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 100%);
  transform: rotate(-15deg);
}

.capsule-energy-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 60%, rgba(56, 189, 248, 0.4) 0%, transparent 70%);
  pointer-events: none;
}

.capsule-base {
  width: 104px;
  height: 52px;
  margin-top: -6px;
  background: linear-gradient(180deg, #312e81 0%, #1e1b4b 100%);
  border-radius: 10px 10px 22px 22px;
  border: 2px solid #818cf8;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}

.capsule-status-light {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 10px #38bdf8, 0 0 16px #38bdf8;
  animation: pulseGlow 1.2s infinite alternate;
}

.capsule-insignia {
  font-size: 0.62rem;
  letter-spacing: 1.5px;
  color: #c7d2fe;
  font-weight: 800;
  white-space: nowrap;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.capsule-steam {
  position: absolute;
  width: 32px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(56, 189, 248, 0.45) 60%, transparent 100%);
  filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

.capsule-steam.steam-left {
  left: -8px;
  top: -6px;
}

.capsule-steam.steam-right {
  right: -8px;
  top: -6px;
}

.cosmic-capsule-wrapper {
  perspective: 900px;
}

.cosmic-capsule-wrapper .capsule-dome {
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

.cosmic-capsule-wrapper.capsule-open .capsule-dome {
  animation: domeLevitateSpace 1.1s forwards cubic-bezier(0.22, 1, 0.36, 1);
}

.cosmic-capsule-wrapper.capsule-open .capsule-starlight-core {
  animation: cosmicCoreAscend 1.05s forwards cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 10;
}

.cosmic-capsule-wrapper.capsule-open .ring-outer {
  animation: orbitWarpOuter 1.2s forwards cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cosmic-capsule-wrapper.capsule-open .ring-inner {
  animation: orbitWarpInner 1.2s forwards cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cosmic-capsule-wrapper.capsule-open .steam-left {
  animation: steamBurstLeft 0.85s forwards ease-out;
}

.cosmic-capsule-wrapper.capsule-open .steam-right {
  animation: steamBurstRight 0.85s forwards ease-out;
}

/* ==========================================================================
   SOBRE VINTAGE CON LACRE (UNBOXING - PANTALLA 1)
   ========================================================================== */
.vintage-envelope-wrapper {
  position: relative;
  width: 240px;
  height: 180px;
  margin: 30px auto 25px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  perspective: 1000px;
}

.envelope-body {
  position: relative;
  width: 230px;
  height: 155px;
  background: linear-gradient(135deg, #f7efe2 0%, #ecd9be 100%);
  border-radius: 8px;
  border: 1px solid #d4bda0;
  box-shadow: 0 12px 28px rgba(92, 51, 23, 0.22), inset 0 0 20px rgba(180, 130, 80, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: floatSlow 4s ease-in-out infinite alternate;
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
}

.vintage-envelope-wrapper.envelope-open .envelope-body {
  animation-play-state: paused;
}

.envelope-inner-letter {
  position: absolute;
  top: 15px;
  width: 204px;
  height: 125px;
  background: #fffdfa;
  border-radius: 6px;
  border: 1px solid #d4bda0;
  box-shadow: 0 4px 12px rgba(92, 51, 23, 0.12);
  z-index: 2;
  overflow: hidden;
  padding: 12px 14px;
  transform-origin: center bottom;
  transform: translateZ(2px);
  will-change: transform, box-shadow;
}

.inner-letter-lines {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    transparent,
    transparent 14px,
    rgba(212, 189, 160, 0.45) 15px,
    transparent 16px
  );
}

.envelope-pocket {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  clip-path: polygon(0% 100%, 100% 100%, 100% 30%, 50% 0%, 0% 30%);
  background: linear-gradient(180deg, #ebd4b5 0%, #deb887 100%);
  border-radius: 0 0 8px 8px;
  z-index: 3;
  transform: translateZ(4px);
  box-shadow: 0 -2px 10px rgba(120, 53, 15, 0.08);
  pointer-events: none;
}

.envelope-flap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 85px;
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
  background: linear-gradient(180deg, #ecd9be 0%, #deb887 100%);
  transform-origin: top center;
  z-index: 4;
  transform: translateZ(5px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  backface-visibility: visible;
  will-change: transform;
}

.vintage-envelope-wrapper.envelope-open .envelope-flap {
  animation: vintageFlapOpen3D 0.85s 0.15s cubic-bezier(0.34, 1.25, 0.64, 1) forwards;
}

.vintage-envelope-wrapper.envelope-open .envelope-inner-letter {
  animation: vintageLetterEmerge 0.85s 0.38s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  z-index: 5;
}

.wax-seal-stamp {
  position: absolute;
  top: 55px;
  left: 50%;
  transform: translateX(-50%) translateZ(6px);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e11d48 0%, #9f1239 60%, #4c0519 100%);
  box-shadow: 0 4px 14px rgba(159, 18, 57, 0.45), inset 0 2px 4px rgba(255, 255, 255, 0.3);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s ease, opacity 0.5s ease;
  cursor: pointer;
}

.wax-seal-inner {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px dashed rgba(254, 226, 226, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wax-seal-emblem {
  font-size: 1.1rem;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}

.wax-seal-stamp.seal-broken {
  animation: waxSealFracture 0.65s forwards cubic-bezier(0.4, 0, 0.2, 1);
}

.vintage-postage-stamp {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 42px;
  background: #fff;
  border: 1.5px dashed #b45309;
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transform: rotate(6deg);
  z-index: 2;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vintage-stamp-preview {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* ==========================================================================
   MÓDULO CÓSMICO (SISTEMA SOLAR & ASTROS)
   ========================================================================== */
.cosmic-stage {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 0 auto 20px auto;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cosmic-galaxy-wrapper {
  position: relative;
  width: 280px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.galaxy-orbits-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.galaxy-core-sun {
  position: absolute;
  font-size: 2.2rem;
  filter: drop-shadow(0 0 16px #fde047);
  animation: pulseGlow 2s infinite alternate;
}

.galaxy-orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(167, 139, 250, 0.45);
  box-shadow: inset 0 0 15px rgba(129, 140, 248, 0.15);
}

.galaxy-orbit-ring.ring-1 { width: 140px; height: 140px; }
.galaxy-orbit-ring.ring-2 { width: 200px; height: 200px; }
.galaxy-orbit-ring.ring-3 { width: 260px; height: 260px; border-color: rgba(56, 189, 248, 0.35); }

.galaxy-bodies-grid {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 3;
}

.cosmic-body-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 8px;
}

.cosmic-body-item:hover,
.cosmic-body-item:active,
.cosmic-body-item.highlighted {
  transform: scale(1.22) translateY(-6px);
}

.cosmic-body-img {
  width: 65px;
  height: 65px;
  filter: drop-shadow(0 4px 12px rgba(168, 85, 247, 0.45));
}

.cosmic-body-label {
  font-size: 0.75rem;
  font-weight: 700;
  margin-top: 4px;
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.7);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--card-border);
}

body[data-theme="midnight"] .cosmic-body-label {
  background: rgba(30, 27, 75, 0.85);
  color: #f8fafc;
  border-color: rgba(129, 140, 248, 0.35);
}

.cosmic-meanings-container,
.vintage-meanings-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 480px;
  margin: 12px auto 0 auto;
}

.cosmic-meaning-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card-bg, rgba(255, 255, 255, 0.85));
  border: 1px solid var(--card-border, rgba(0, 0, 0, 0.08));
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: var(--card-shadow, 0 4px 16px rgba(0, 0, 0, 0.05));
  cursor: pointer;
  transition: all 0.25s ease;
}

.cosmic-meaning-card:hover,
.cosmic-meaning-card.active {
  border-color: #818cf8;
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.25);
  transform: translateY(-2px);
}

.cosmic-meaning-icon img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.cosmic-meaning-content {
  flex: 1;
}

.cosmic-meaning-name {
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-main);
}

.cosmic-meaning-tag {
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(129, 140, 248, 0.18);
  color: #4338ca;
  font-weight: 600;
}

body[data-theme="midnight"] .cosmic-meaning-tag {
  background: rgba(129, 140, 248, 0.25);
  color: #c7d2fe;
}

.cosmic-meaning-symb {
  font-size: 0.78rem;
  color: #6366f1;
  font-weight: 600;
  margin: 2px 0 4px 0;
}

.cosmic-meaning-dedication {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.5);
  padding: 6px 10px;
  border-radius: 8px;
  border-left: 2.5px solid #818cf8;
}

body[data-theme="midnight"] .cosmic-meaning-card {
  background: rgba(30, 27, 75, 0.85);
  border-color: rgba(129, 140, 248, 0.25);
}

body[data-theme="midnight"] .cosmic-meaning-dedication {
  background: rgba(255, 255, 255, 0.06);
  color: #cbd5e1;
}

/* ==========================================================================
   MÓDULO VINTAGE (ESCRITORIO EPISTOLAR & SELLOS)
   ========================================================================== */
.vintage-stage {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 0 auto 20px auto;
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vintage-stamps-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vintage-parchment-desk {
  width: 100%;
  max-width: 320px;
  box-sizing: border-box;
  min-height: 200px;
  background: linear-gradient(135deg, #fdfbf7 0%, #f4ecdf 100%);
  border: 1px solid #d4c5b1;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(120, 53, 15, 0.12), inset 0 0 20px rgba(180, 140, 90, 0.08);
  padding: 18px 12px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 8px;
}

.vintage-stamp-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: #ffffff;
  padding: 6px 6px 8px 6px;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  border: 1.5px dashed #b45309;
}

.vintage-stamp-item.stamp-pos-0 { transform: rotate(-4deg); }
.vintage-stamp-item.stamp-pos-1 { transform: rotate(2deg) translateY(-4px); }
.vintage-stamp-item.stamp-pos-2 { transform: rotate(5deg); }

.vintage-stamp-item:hover,
.vintage-stamp-item:active,
.vintage-stamp-item.highlighted {
  transform: scale(1.18) translateY(-8px) rotate(0deg) !important;
  box-shadow: 0 8px 22px rgba(180, 83, 9, 0.35);
  border-color: #f59e0b;
  z-index: 10;
}

.stamp-serrated-border {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
  border-radius: 3px;
  overflow: hidden;
}

.stamp-graphic {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.stamp-postmark {
  font-size: 0.55rem;
  letter-spacing: 1px;
  font-weight: 800;
  color: #78350f;
  opacity: 0.75;
  margin-top: 4px;
}

.stamp-title-tag {
  font-size: 0.7rem;
  font-weight: 700;
  color: #451a03;
  margin-top: 2px;
}

.vintage-meaning-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fffdf9;
  border: 1px solid #e7d8c5;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 4px 12px rgba(120, 53, 15, 0.06);
  cursor: pointer;
  transition: all 0.25s ease;
}

.vintage-meaning-card:hover,
.vintage-meaning-card.active {
  border-color: #b45309;
  box-shadow: 0 6px 18px rgba(180, 83, 9, 0.2);
  transform: translateY(-2px);
}

.vintage-meaning-icon img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.vintage-meaning-content {
  flex: 1;
}

.vintage-meaning-name {
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #451a03;
}

.vintage-meaning-tag {
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(180, 83, 9, 0.12);
  color: #92400e;
  font-weight: 600;
}

.vintage-meaning-symb {
  font-size: 0.78rem;
  color: #b45309;
  font-weight: 600;
  margin: 2px 0 4px 0;
}

.vintage-meaning-dedication {
  font-size: 0.82rem;
  font-style: italic;
  color: #451a03;
  background: #fdf6ec;
  padding: 6px 10px;
  border-radius: 8px;
  border-left: 2.5px solid #b45309;
}

/* ==========================================================================
   1. CINE & PREMIERE HOLLYWOOD GATSBY VIP (UNBOXING & HUB)
   ========================================================================== */
.cinema-clapper-wrapper {
  position: relative;
  width: 220px;
  height: 210px;
  margin: 55px auto 25px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  perspective: 900px;
  user-select: none;
}

.clapper-gold-ambience {
  position: absolute;
  width: 250px;
  height: 220px;
  background: radial-gradient(circle, rgba(234, 179, 8, 0.28) 0%, rgba(217, 119, 6, 0.1) 50%, transparent 75%);
  border-radius: 50%;
  pointer-events: none;
  animation: pulseGlow 3.5s ease-in-out infinite alternate;
}

.clapper-board {
  width: 200px;
  background: linear-gradient(145deg, #18181c 0%, #0d0d10 60%, #050507 100%);
  border-radius: 8px;
  border: 2px solid #ca8a04;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.8), 0 0 22px rgba(234, 179, 8, 0.25), inset 0 0 12px rgba(0, 0, 0, 0.7);
  overflow: visible;
  position: relative;
  animation: floatSlow 3.8s ease-in-out infinite alternate;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.6s ease;
}

.clapper-projector-beam {
  position: absolute;
  top: 40px;
  left: 50%;
  width: 320px;
  height: 360px;
  transform: translate(-50%, -50%) scale(0.2);
  background: radial-gradient(ellipse at 50% 90%, rgba(254, 240, 138, 0.75) 0%, rgba(234, 179, 8, 0.35) 45%, transparent 75%);
  clip-path: polygon(42% 100%, 58% 100%, 100% 0%, 0% 0%);
  filter: blur(5px);
  pointer-events: none;
  opacity: 0;
  z-index: 1;
}

/* Esquinas de metal dorado pulido */
.clapper-corner-gold {
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: #fde047;
  border-style: solid;
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(250, 204, 21, 0.6));
}
.clapper-corner-gold.tl { top: 4px; left: 4px; border-width: 2px 0 0 2px; border-top-left-radius: 4px; }
.clapper-corner-gold.tr { top: 4px; right: 4px; border-width: 2px 2px 0 0; border-top-right-radius: 4px; }
.clapper-corner-gold.bl { bottom: 4px; left: 4px; border-width: 0 0 2px 2px; border-bottom-left-radius: 4px; }
.clapper-corner-gold.br { bottom: 4px; right: 4px; border-width: 0 2px 2px 0; border-bottom-right-radius: 4px; }

/* Brazo superior con franjas chevron de oro 24k foil */
.clapper-top-arm {
  height: 35px;
  width: 100%;
  position: relative;
  background: #09090b;
  border-bottom: 2px solid #ca8a04;
  border-radius: 7px 7px 0 0;
  transform-origin: 12px 30px;
  transform: rotate(-10deg);
  overflow: hidden;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
  z-index: 8;
  will-change: transform;
}

.clapper-hinge-bolt {
  position: absolute;
  top: 11px;
  left: 8px;
  width: 12px;
  height: 12px;
  background: radial-gradient(circle, #fef08a 0%, #ca8a04 60%, #78350f 100%);
  border-radius: 50%;
  border: 1px solid #fef9c3;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
  z-index: 9;
}

.clapper-stripes-gold {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    #09090b 0px,
    #09090b 12px,
    #b45309 12px,
    #facc15 16px,
    #fef08a 20px,
    #ca8a04 24px
  );
  filter: drop-shadow(0 0 4px rgba(234, 179, 8, 0.4));
}

.clapper-base {
  padding: 10px 12px 12px 12px;
  background: radial-gradient(circle at 50% 30%, #1c1917 0%, #09090b 100%);
  border-radius: 0 0 7px 7px;
}

.clapper-stripes-base-gold {
  height: 8px;
  background: repeating-linear-gradient(
    45deg,
    #09090b 0px,
    #09090b 9px,
    #b45309 9px,
    #facc15 13px,
    #fef08a 17px,
    #ca8a04 20px
  );
  border-radius: 3px;
  margin-bottom: 8px;
  border: 1px solid rgba(234, 179, 8, 0.4);
}

.clapper-content {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #f4f4f5;
}

.clapper-header-tag {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 1.2px;
  color: #fde047;
  text-shadow: 0 0 8px rgba(234, 179, 8, 0.6);
  margin-bottom: 6px;
  border-bottom: 1px dashed rgba(234, 179, 8, 0.35);
  padding-bottom: 4px;
}

.clapper-gold-stars {
  color: #f59e0b;
  font-size: 0.60rem;
}

.clapper-scene-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.68rem;
  margin-bottom: 4px;
  background: rgba(255, 255, 255, 0.03);
  padding: 2px 5px;
  border-radius: 4px;
}

.clapper-lbl {
  color: #a1a1aa;
  font-weight: 700;
  font-size: 0.60rem;
  letter-spacing: 0.6px;
}

.clapper-val {
  color: #fef08a;
  font-weight: 800;
  letter-spacing: 0.4px;
  font-size: 0.68rem;
  text-shadow: 0 0 6px rgba(254, 240, 138, 0.3);
}

.clapper-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 8px;
}

.clapper-rec-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.60rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid #ef4444;
  padding: 3px 6px;
  border-radius: 999px;
}

.rec-dot {
  width: 6px;
  height: 6px;
  background: #ef4444;
  border-radius: 50%;
  box-shadow: 0 0 8px #ef4444;
  animation: bulbChaser 0.8s infinite alternate;
}

.clapper-action-tag {
  flex: 1;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 900;
  color: #18181b;
  background: linear-gradient(135deg, #fde047 0%, #f59e0b 50%, #d97706 100%);
  border: 1px solid #fef08a;
  border-radius: 5px;
  padding: 4px 0;
  letter-spacing: 0.8px;
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.4);
}

.cinema-clapper-wrapper.clapper-snap .clapper-top-arm {
  animation: clapperSnapAndOpen 0.85s forwards cubic-bezier(0.22, 1, 0.36, 1);
}

.cinema-clapper-wrapper.clapper-snap .clapper-board {
  animation: clapperBoardReact 0.85s forwards cubic-bezier(0.22, 1, 0.36, 1);
}

.cinema-clapper-wrapper.clapper-snap .clapper-projector-beam {
  animation: clapperProjectorBeam 0.9s 0.22s forwards cubic-bezier(0.16, 1, 0.3, 1);
}

/* Destello de Flash de Cámara Paparazzi a Pantalla Completa */
.cinema-flash-strobe {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle, #ffffff 0%, rgba(254, 240, 138, 0.85) 40%, rgba(255, 255, 255, 0) 100%);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
}
.cinema-flash-strobe.active {
  animation: cameraStrobe 0.8s ease-out forwards;
}

/* MARQUESINA HOLLYWOOD GALA PREMIERE (STAGE) */
.cinema-stage {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto 24px auto;
  min-height: 290px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cinema-marquee-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Focos Reflectores de Gran Gala en el Escenario */
.cinema-spotlight-beam {
  position: absolute;
  top: -40px;
  width: 90px;
  height: 280px;
  background: linear-gradient(180deg, rgba(253, 224, 71, 0.28) 0%, rgba(234, 179, 8, 0.05) 70%, transparent 100%);
  pointer-events: none;
  filter: blur(14px);
  z-index: 1;
}
.cinema-spotlight-beam.left {
  left: 5%;
  transform-origin: top center;
  animation: spotlightSweepLeft 5s ease-in-out infinite alternate;
}
.cinema-spotlight-beam.right {
  right: 5%;
  transform-origin: top center;
  animation: spotlightSweepRight 5s ease-in-out infinite alternate;
}

.cinema-marquee-board {
  width: 100%;
  max-width: 340px;
  box-sizing: border-box;
  background: radial-gradient(circle at 50% 10%, #2e0808 0%, #120404 60%, #080202 100%);
  border: 3px solid #eab308;
  border-radius: 16px;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.85), 0 0 35px rgba(234, 179, 8, 0.35), inset 0 0 25px rgba(0, 0, 0, 0.9);
  padding: 18px 14px 14px 14px;
  position: relative;
  overflow: hidden;
  z-index: 2;
}

/* Fila de Bombillas Luminosas Incandescentes Circundantes */
.cinema-bulbs-track {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px 10px 4px;
}

.marquee-bulb {
  width: 9px;
  height: 9px;
  background: radial-gradient(circle, #fffbeb 0%, #fde047 50%, #ca8a04 100%);
  border-radius: 50%;
  box-shadow: 0 0 8px #facc15;
  animation: bulbChaser 1.2s infinite alternate;
}
.marquee-bulb:nth-child(even) {
  animation-delay: -0.6s;
}

.cinema-marquee-header {
  text-align: center;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(234, 179, 8, 0.45);
  position: relative;
}

.cinema-title-banner {
  font-family: 'Playfair Display', 'Cinzel', Georgia, serif;
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 3px;
  color: #fef08a;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 14px rgba(234, 179, 8, 0.8);
}

.cinema-subtitle-banner {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: #f59e0b;
  margin-top: 2px;
}

.cinema-items-grid {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  margin-top: 16px;
  padding: 10px 4px 6px 4px;
}

.cinema-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 6px;
  position: relative;
}

.cinema-item:hover,
.cinema-item:active,
.cinema-item.highlighted {
  transform: scale(1.22) translateY(-8px);
}

.cinema-item-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70px;
  height: 70px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(250, 204, 21, 0.4) 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.cinema-item.highlighted .cinema-item-glow,
.cinema-item:hover .cinema-item-glow {
  opacity: 1;
}

.cinema-item-img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(234, 179, 8, 0.55));
  transition: filter 0.3s ease;
}

.cinema-item-label {
  font-size: 0.74rem;
  font-weight: 800;
  margin-top: 8px;
  color: #fef08a;
  background: linear-gradient(135deg, rgba(24, 24, 27, 0.95) 0%, rgba(9, 9, 11, 0.95) 100%);
  padding: 3px 10px;
  border-radius: 999px;
  border: 1.5px solid #eab308;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.5px;
}

/* Alfombra Roja con Postes de Cordón de Terciopelo */
.cinema-red-carpet-container {
  margin-top: 14px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cinema-stanchions {
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin-bottom: -5px;
  z-index: 3;
}

.stanchion-pole {
  width: 7px;
  height: 18px;
  background: linear-gradient(180deg, #fef08a 0%, #ca8a04 50%, #78350f 100%);
  border-radius: 3px 3px 0 0;
  position: relative;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
}
.stanchion-pole::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -2px;
  width: 11px;
  height: 6px;
  background: #fde047;
  border-radius: 50%;
  box-shadow: 0 0 4px #eab308;
}

.cinema-red-carpet {
  width: 100%;
  height: 18px;
  background: linear-gradient(90deg, #7f1d1d 0%, #b91c1c 30%, #ef4444 50%, #b91c1c 70%, #7f1d1d 100%);
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(185, 28, 28, 0.65), inset 0 1px 3px rgba(254, 202, 202, 0.4);
  position: relative;
}

.cinema-meanings-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 480px;
  margin: 16px auto 0 auto;
}

.cinema-meaning-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(145deg, rgba(24, 24, 27, 0.95) 0%, rgba(12, 10, 18, 0.98) 100%);
  border: 1.5px solid rgba(234, 179, 8, 0.4);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), inset 0 0 12px rgba(234, 179, 8, 0.08);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

.cinema-meaning-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #fef08a 0%, #ca8a04 100%);
}

.cinema-meaning-card:hover,
.cinema-meaning-card.active {
  border-color: #facc15;
  box-shadow: 0 8px 30px rgba(234, 179, 8, 0.4), inset 0 0 20px rgba(234, 179, 8, 0.15);
  transform: translateY(-3px) scale(1.01);
}

.cinema-meaning-icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(234, 179, 8, 0.5));
}

.cinema-meaning-content {
  flex: 1;
}

.cinema-meaning-name {
  font-weight: 800;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fef08a;
  letter-spacing: 0.5px;
}

.cinema-meaning-tag {
  font-size: 0.66rem;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.25) 0%, rgba(180, 83, 9, 0.35) 100%);
  color: #fde047;
  font-weight: 800;
  border: 1px solid rgba(250, 204, 21, 0.4);
}

.cinema-meaning-symb {
  font-size: 0.8rem;
  color: #facc15;
  font-weight: 700;
  margin: 3px 0 6px 0;
}

.cinema-meaning-dedication {
  font-size: 0.84rem;
  font-style: italic;
  color: #f4f4f5;
  background: rgba(255, 255, 255, 0.05);
  padding: 8px 12px;
  border-radius: 8px;
  border-left: 3px solid #eab308;
  line-height: 1.5;
}


/* ==========================================================================
   2. COFRE DEL TESORO PIRATA LEGENDARIO & ORO AZTECA (UNBOXING & HUB)
   ========================================================================== */
.pirate-chest-wrapper {
  position: relative;
  width: 250px;
  height: 210px;
  margin: 20px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  perspective: 900px;
  user-select: none;
}

.chest-cursed-ambience {
  position: absolute;
  width: 280px;
  height: 240px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.2) 0%, rgba(217, 119, 6, 0.18) 40%, transparent 75%);
  border-radius: 50%;
  pointer-events: none;
  animation: pulseGlow 3.5s ease-in-out infinite alternate;
}

.chest-box {
  width: 220px;
  height: 165px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  perspective: 900px;
  perspective-origin: 50% 65%;
  transform-style: preserve-3d;
  animation: floatSlow 3.8s ease-in-out infinite alternate;
  transition: transform 0.6s ease;
}

/* Tapa Abovedada con Caoba Naval Profunda y Vetras */
.chest-lid {
  width: 220px;
  height: 68px;
  background: linear-gradient(180deg, #5c2409 0%, #3d1404 60%, #200801 100%);
  border-radius: 36px 36px 4px 4px;
  border: 2.5px solid #854d0e;
  position: relative;
  transform-origin: bottom center;
  transition: transform 0.75s cubic-bezier(0.2, 0.9, 0.3, 1), filter 0.6s ease;
  z-index: 4;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6), inset 0 2px 6px rgba(254, 215, 170, 0.15);
}

.chest-wood-grain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    180deg,
    transparent 0px,
    transparent 12px,
    rgba(0, 0, 0, 0.35) 12px,
    rgba(0, 0, 0, 0.35) 14px
  );
  pointer-events: none;
  border-radius: inherit;
}

.chest-base {
  width: 210px;
  height: 100px;
  background: linear-gradient(180deg, #421603 0%, #290d02 60%, #150500 100%);
  border-radius: 4px 4px 14px 14px;
  border: 2.5px solid #854d0e;
  position: relative;
  margin-top: -3px;
  z-index: 2;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.75), inset 0 0 20px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 12px;
}

/* Herrajes de Hierro Forjado con Relieve y Remaches de Bronce */
.chest-iron-band {
  position: absolute;
  top: 0;
  width: 18px;
  height: 100%;
  background: linear-gradient(90deg, #1c1917 0%, #44403c 45%, #78716c 55%, #1c1917 100%);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.8), inset 0 0 3px rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 6px 0;
}
.chest-iron-band.band-left { left: 34px; }
.chest-iron-band.band-center { left: 50%; transform: translateX(-50%); }
.chest-iron-band.band-right { right: 34px; }

.rivet {
  width: 7px;
  height: 7px;
  background: radial-gradient(circle, #fde047 0%, #b45309 70%, #451a03 100%);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* Cerradura de Calavera Azteca de Oro Cursada con Ojos de Rubí */
.chest-skull-lock {
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
  height: 38px;
  background: radial-gradient(circle at center, #fef08a 0%, #f59e0b 45%, #92400e 100%);
  border-radius: 8px 8px 12px 12px;
  border: 2px solid #fef9c3;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7), 0 0 10px rgba(245, 158, 11, 0.5);
  transition: transform 0.6s ease, filter 0.6s ease;
}

.skull-face {
  position: relative;
  width: 24px;
  height: 22px;
  background: #78350f;
  border-radius: 6px 6px 4px 4px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 3px;
}

.ruby-eye {
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, #fca5a5 0%, #ef4444 60%, #991b1b 100%);
  border-radius: 50%;
  box-shadow: 0 0 6px #ef4444;
  animation: rubyEyeGlow 1.4s infinite alternate;
}

.skull-teeth {
  position: absolute;
  bottom: 2px;
  width: 12px;
  height: 4px;
  background: repeating-linear-gradient(90deg, #fef08a 0px, #fef08a 2px, #451a03 2px, #451a03 4px);
  border-radius: 1px;
}

/* Tesoro de Monedas y Joyas Desbordante */
.chest-treasure-overflow {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  font-size: 1.35rem;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 2px 8px rgba(254, 240, 138, 0.8));
}

.chest-golden-glow {
  position: absolute;
  width: 120px;
  height: 60px;
  background: radial-gradient(circle, rgba(254, 240, 138, 0.9) 0%, rgba(245, 158, 11, 0.4) 50%, transparent 75%);
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.chest-god-rays {
  position: absolute;
  top: -20px;
  left: 50%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(253, 224, 71, 0.42) 0deg 12deg, transparent 12deg 24deg);
  opacity: 0;
  pointer-events: none;
  filter: blur(3px);
  transform: translate(-50%, -50%);
  transition: opacity 0.5s ease;
  z-index: 1;
}

.chest-insignia {
  font-size: 0.68rem;
  letter-spacing: 2px;
  color: #fde68a;
  font-weight: 900;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.pirate-chest-wrapper.chest-open .chest-lid {
  animation: pirateLidOpenBurst 0.95s forwards cubic-bezier(0.25, 1, 0.5, 1);
}

.pirate-chest-wrapper.chest-open .chest-skull-lock {
  animation: skullLockDrop 0.65s forwards ease-in;
}

.pirate-chest-wrapper.chest-open .chest-golden-glow {
  opacity: 1;
  transform: translateX(-50%) scale(2.2);
  animation: pulseGlow 1.5s infinite alternate;
  z-index: 4;
}

.pirate-chest-wrapper.chest-open .chest-god-rays {
  opacity: 1;
  animation: godRaysRotate 5s linear infinite;
  z-index: 1;
}

.pirate-chest-wrapper.chest-open .chest-treasure-overflow {
  opacity: 1;
  transform: translateX(-50%) translateY(-26px) scale(1.25);
  filter: drop-shadow(0 0 16px rgba(253, 224, 71, 0.95)) drop-shadow(0 6px 14px rgba(0, 0, 0, 0.7));
  z-index: 10;
}

/* MAPA DEL TESORO PIRATA AUTÉNTICO (STAGE) */
.pirate-stage {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto 24px auto;
  min-height: 290px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pirate-treasure-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pergamino Quemado y Envejecido con Textura Cartográfica */
.pirate-treasure-map {
  width: 100%;
  max-width: 340px;
  box-sizing: border-box;
  min-height: 250px;
  background: radial-gradient(ellipse at center, #fef3c7 0%, #fde68a 45%, #d97706 80%, #78350f 100%);
  border: 4px solid #451a03;
  border-radius: 18px;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.8), inset 0 0 40px rgba(69, 26, 3, 0.85);
  padding: 16px 14px 18px 14px;
  position: relative;
  overflow: hidden;
}

/* Ilustración de Rosa de los Vientos 3D con Aguja Giratoria */
.pirate-map-compass {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 46px;
  height: 46px;
  background: radial-gradient(circle, #fef08a 0%, #d97706 70%, #78350f 100%);
  border-radius: 50%;
  border: 2px solid #fef9c3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  z-index: 3;
}

.pirate-map-header {
  text-align: center;
  padding-bottom: 8px;
  border-bottom: 2px dashed rgba(120, 53, 15, 0.45);
  margin-right: 50px;
}

.pirate-map-title {
  font-family: 'Georgia', serif;
  font-size: 0.88rem;
  font-weight: 900;
  letter-spacing: 2px;
  color: #451a03;
  text-shadow: 0 1px 2px rgba(254, 240, 138, 0.6);
}

.pirate-map-subtitle {
  font-size: 0.66rem;
  font-weight: 700;
  color: #78350f;
  letter-spacing: 1px;
}

.pirate-relics-grid {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  margin-top: 16px;
  position: relative;
  z-index: 2;
}

.pirate-relic-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 6px;
  position: relative;
}

.pirate-relic-item:hover,
.pirate-relic-item:active,
.pirate-relic-item.highlighted {
  transform: scale(1.24) translateY(-8px);
}

.pirate-relic-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70px;
  height: 70px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(239, 68, 68, 0.4) 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.pirate-relic-item.highlighted .pirate-relic-glow,
.pirate-relic-item:hover .pirate-relic-glow {
  opacity: 1;
}

.pirate-relic-img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(120, 53, 15, 0.65));
  transition: filter 0.3s ease;
}

.pirate-relic-label {
  font-size: 0.74rem;
  font-weight: 800;
  margin-top: 8px;
  color: #fef3c7;
  background: linear-gradient(135deg, #451a03 0%, #290d02 100%);
  padding: 3px 10px;
  border-radius: 999px;
  border: 1.5px solid #d97706;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  font-family: 'Georgia', serif;
}

.pirate-x-mark-container {
  margin-top: 16px;
  text-align: center;
  position: relative;
}

.pirate-x-mark {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 2px;
  color: #7f1d1d;
  background: rgba(254, 243, 199, 0.85);
  border: 1.5px dashed #b91c1c;
  padding: 4px 14px;
  border-radius: 6px;
  text-shadow: 0 0 6px rgba(239, 68, 68, 0.4);
  animation: pulseGlow 2.5s infinite alternate;
}

.pirate-meanings-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 480px;
  margin: 16px auto 0 auto;
}

.pirate-meaning-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(145deg, #fffbeb 0%, #fef3c7 100%);
  border: 1.5px solid #d97706;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 6px 20px rgba(120, 53, 15, 0.2), inset 0 0 15px rgba(217, 119, 6, 0.1);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

.pirate-meaning-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(180deg, #d97706 0%, #78350f 100%);
}

.pirate-meaning-card:hover,
.pirate-meaning-card.active {
  border-color: #b45309;
  box-shadow: 0 8px 28px rgba(120, 53, 15, 0.35), inset 0 0 20px rgba(217, 119, 6, 0.2);
  transform: translateY(-3px) scale(1.01);
}

.pirate-meaning-icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(180, 83, 9, 0.5));
}

.pirate-meaning-content {
  flex: 1;
}

.pirate-meaning-name {
  font-weight: 800;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #451a03;
  font-family: 'Georgia', serif;
}

.pirate-meaning-tag {
  font-size: 0.66rem;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.2) 0%, rgba(146, 64, 14, 0.3) 100%);
  color: #78350f;
  font-weight: 800;
  border: 1px solid rgba(180, 83, 9, 0.3);
}

.pirate-meaning-symb {
  font-size: 0.8rem;
  color: #b45309;
  font-weight: 700;
  margin: 3px 0 6px 0;
}

.pirate-meaning-dedication {
  font-size: 0.84rem;
  font-style: italic;
  color: #290d02;
  background: rgba(254, 243, 199, 0.7);
  padding: 8px 12px;
  border-radius: 8px;
  border-left: 3px solid #b45309;
  line-height: 1.5;
  font-family: 'Georgia', serif;
}

/* ==========================================================================
   3. CHOCOLATERÍA FINA WONDERLAND (UNBOXING & HUB)
   ========================================================================== */
.candy-box-wrapper {
  position: relative;
  width: 210px;
  height: 190px;
  margin: 25px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  perspective: 900px;
  user-select: none;
}

.candy-heart-box {
  width: 190px;
  height: 170px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: floatSlow 3.6s ease-in-out infinite alternate;
  transition: transform 0.6s ease;
}

.candy-box-lid {
  width: 180px;
  height: 85px;
  background: linear-gradient(135deg, #e11d48 0%, #be123c 55%, #881337 100%);
  border-radius: 20px 20px 10px 10px;
  border: 2.5px solid #fde047;
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(225, 29, 72, 0.4), 0 0 12px rgba(250, 204, 21, 0.35);
  transform-origin: bottom center;
  transition: transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform, opacity;
}

.candy-box-base {
  width: 170px;
  height: 80px;
  background: linear-gradient(135deg, #be123c 0%, #881337 100%);
  border-radius: 10px 10px 24px 24px;
  border: 2px solid #fda4af;
  position: relative;
  margin-top: -6px;
  z-index: 2;
  box-shadow: 0 12px 28px rgba(136, 19, 55, 0.4);
}

.candy-satin-ribbon {
  position: absolute;
  width: 18px;
  height: 100%;
  background: linear-gradient(90deg, #fef08a 0%, #f59e0b 50%, #d97706 100%);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}

.candy-box-bow {
  position: absolute;
  top: -16px;
  width: 72px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.candy-bow-loop-left, .candy-bow-loop-right {
  position: absolute;
  width: 32px;
  height: 30px;
  border: 5px solid #fde047;
  border-radius: 50% 50% 12% 50%;
  background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.candy-bow-loop-left {
  left: 3px;
  transform: rotate(-30deg);
}

.candy-bow-loop-right {
  right: 3px;
  transform: rotate(30deg) scaleX(-1);
}

.candy-bow-knot {
  position: relative;
  font-size: 1.4rem;
  z-index: 6;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.candy-lid-label {
  font-size: 0.62rem;
  letter-spacing: 2px;
  color: #fff1f2;
  font-weight: 800;
  margin-top: 16px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.candy-base-glow {
  position: absolute;
  inset: -12px;
  border-radius: 16px;
  background: radial-gradient(circle, rgba(254, 240, 138, 0.8) 0%, rgba(244, 63, 94, 0.35) 50%, transparent 75%);
  opacity: 0;
  pointer-events: none;
  filter: blur(8px);
  z-index: 1;
}

.candy-inside-treats {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  font-size: 1.8rem;
  letter-spacing: 5px;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 4px 12px rgba(244, 63, 94, 0.5));
  z-index: 4;
  will-change: transform, opacity;
}

.candy-box-wrapper.candy-box-open .candy-box-lid {
  animation: candyLidGlide3D 0.92s forwards cubic-bezier(0.22, 1, 0.36, 1);
}

.candy-box-wrapper.candy-box-open .candy-inside-treats {
  animation: candyTreatsFloat 0.85s 0.15s forwards cubic-bezier(0.22, 1, 0.36, 1);
}

.candy-box-wrapper.candy-box-open .candy-base-glow {
  animation: candyGlowPulse 0.9s forwards ease-out;
}

.candy-stage {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 0 auto 20px auto;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.candy-showcase-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.candy-showcase-tray {
  width: 100%;
  max-width: 320px;
  box-sizing: border-box;
  min-height: 220px;
  background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 50%, #fecdd3 100%);
  border: 2px solid #f43f5e;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(244, 63, 94, 0.25), inset 0 0 20px rgba(251, 113, 133, 0.15);
  padding: 16px 12px;
  position: relative;
  overflow: hidden;
}

.candy-tray-header {
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px dashed #fb7185;
}

.candy-ribbon-tag {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: #be123c;
}

.candy-sweets-grid {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 14px;
}

.candy-sweet-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 6px;
}

.candy-sweet-item:hover,
.candy-sweet-item:active,
.candy-sweet-item.highlighted {
  transform: scale(1.22) translateY(-6px);
}

.candy-sweet-img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(225, 29, 72, 0.35));
}

.candy-sweet-label {
  font-size: 0.72rem;
  font-weight: 700;
  margin-top: 6px;
  color: #881337;
  background: rgba(255, 255, 255, 0.9);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #fda4af;
}

.candy-meanings-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 480px;
  margin: 12px auto 0 auto;
}

.candy-meaning-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff5f6;
  border: 1px solid #fecdd3;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.08);
  cursor: pointer;
  transition: all 0.25s ease;
}

.candy-meaning-card:hover,
.candy-meaning-card.active {
  border-color: #f43f5e;
  box-shadow: 0 6px 18px rgba(244, 63, 94, 0.25);
  transform: translateY(-2px);
}

.candy-meaning-icon img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.candy-meaning-content {
  flex: 1;
}

.candy-meaning-name {
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #881337;
}

.candy-meaning-tag {
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(244, 63, 94, 0.15);
  color: #be123c;
  font-weight: 600;
}

.candy-meaning-symb {
  font-size: 0.78rem;
  color: #e11d48;
  font-weight: 600;
  margin: 2px 0 4px 0;
}

.candy-meaning-dedication {
  font-size: 0.82rem;
  font-style: italic;
  color: #4c0519;
  background: #fff0f3;
  padding: 6px 10px;
  border-radius: 8px;
  border-left: 2.5px solid #f43f5e;
}

/* ==========================================================================
   4. ARCADE RETRO 8-BIT GAMER (UNBOXING & HUB)
   ========================================================================== */
.arcade-console-wrapper {
  position: relative;
  width: 200px;
  height: 230px;
  margin: 20px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}

.arcade-handheld {
  width: 180px;
  height: 215px;
  background: linear-gradient(180deg, #6366f1 0%, #4338ca 60%, #312e81 100%);
  border-radius: 20px 20px 35px 35px;
  border: 3px solid #818cf8;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), inset 0 2px 6px rgba(255, 255, 255, 0.4);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: floatSlow 3.5s ease-in-out infinite alternate;
  transition: transform 0.6s ease;
}

.arcade-screen-bezel {
  width: 150px;
  height: 110px;
  background: #1e1b4b;
  border-radius: 8px;
  border: 2px solid #312e81;
  padding: 6px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
}

.arcade-screen-crt {
  width: 100%;
  height: 100%;
  background: #080c16;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border: 1px solid #1e293b;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.9);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.crt-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0px,
    rgba(255, 255, 255, 0) 2px,
    rgba(0, 0, 0, 0.35) 3px,
    rgba(0, 0, 0, 0.35) 4px
  );
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.4s ease;
}

.arcade-pixel-art {
  font-size: 1.8rem;
  opacity: 0.15;
  transform: scale(0.9);
  filter: grayscale(0.8) brightness(0.5);
  transition: all 0.4s ease;
  z-index: 2;
}

.arcade-start-text {
  font-family: monospace;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 2px;
  color: #4ade80;
  text-shadow: 0 0 6px #22c55e;
  margin-top: 4px;
  opacity: 0.2;
  transition: opacity 0.4s ease;
  z-index: 2;
}

@keyframes blinkFast {
  to { visibility: hidden; }
}

.arcade-controls-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding: 0 8px;
}

.arcade-dpad {
  width: 38px;
  height: 38px;
  position: relative;
}

.dpad-cross {
  width: 100%;
  height: 100%;
  background: #1e1b4b;
  clip-path: polygon(35% 0%, 65% 0%, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0% 65%, 0% 35%, 35% 35%);
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.arcade-buttons {
  display: flex;
  gap: 8px;
}

.btn-round {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-family: monospace;
  font-weight: 900;
  font-size: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-b {
  background: #ec4899;
  transform: translateY(6px);
}

.btn-a {
  background: #ef4444;
}

.crt-beam-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 4px;
  opacity: 0;
  z-index: 5;
}

.arcade-console-wrapper.console-power-on .arcade-handheld {
  animation: consoleBounce 0.45s ease forwards;
}

.arcade-console-wrapper.console-power-on .crt-beam-flash {
  animation: crtBeamExpandAuthentic 0.75s forwards ease-out;
}

.arcade-console-wrapper.console-power-on .arcade-screen-crt {
  border-color: #22d3ee;
  box-shadow: 0 0 30px rgba(34, 197, 94, 0.9), inset 0 0 16px rgba(134, 239, 172, 0.6);
}

.arcade-console-wrapper.console-power-on .crt-scanlines {
  opacity: 0.75;
  animation: scanlineSweep 4s linear infinite;
}

.arcade-console-wrapper.console-power-on .btn-a {
  animation: neonButtonIgnitionA 0.6s forwards cubic-bezier(0.2, 0.8, 0.2, 1);
}

.arcade-console-wrapper.console-power-on .btn-b {
  animation: neonButtonIgnitionB 0.6s forwards cubic-bezier(0.2, 0.8, 0.2, 1);
}

.arcade-console-wrapper.console-power-on .arcade-pixel-art {
  animation: pixelArtBoot 0.75s 0.18s forwards cubic-bezier(0.22, 1, 0.36, 1);
}

.arcade-console-wrapper.console-power-on .arcade-start-text {
  animation: pressStartBoot 0.8s 0.25s forwards, blinkFast 0.8s 0.85s steps(2, start) infinite;
}

.arcade-stage {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 0 auto 20px auto;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arcade-vault-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arcade-powerup-rack {
  width: 100%;
  max-width: 320px;
  box-sizing: border-box;
  min-height: 220px;
  background: linear-gradient(135deg, #090d16 0%, #111827 100%);
  border: 2px solid #06b6d4;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(6, 182, 212, 0.25), inset 0 0 20px rgba(6, 182, 212, 0.15);
  padding: 14px 10px;
  position: relative;
  overflow: hidden;
}

.arcade-rack-header {
  text-align: center;
  padding-bottom: 8px;
  border-bottom: 1px dashed #06b6d4;
}

.arcade-neon-title {
  font-family: monospace;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 2px;
  color: #22d3ee;
  text-shadow: 0 0 10px #06b6d4;
}

.arcade-powerups-grid {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 14px;
}

.arcade-powerup-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 6px;
}

.arcade-powerup-item:hover,
.arcade-powerup-item:active,
.arcade-powerup-item.highlighted {
  transform: scale(1.22) translateY(-6px);
}

.arcade-powerup-img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(6, 182, 212, 0.6));
}

.arcade-powerup-label {
  font-family: monospace;
  font-size: 0.7rem;
  font-weight: 800;
  margin-top: 6px;
  color: #67e8f9;
  background: rgba(15, 23, 42, 0.85);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #0891b2;
}

.arcade-meanings-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 480px;
  margin: 12px auto 0 auto;
}

.arcade-meaning-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(17, 24, 39, 0.95);
  border: 1px solid rgba(6, 182, 212, 0.35);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: all 0.25s ease;
}

.arcade-meaning-card:hover,
.arcade-meaning-card.active {
  border-color: #22d3ee;
  box-shadow: 0 6px 20px rgba(6, 182, 212, 0.35);
  transform: translateY(-2px);
}

.arcade-meaning-icon img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.arcade-meaning-content {
  flex: 1;
}

.arcade-meaning-name {
  font-family: monospace;
  font-weight: 700;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #67e8f9;
}

.arcade-meaning-tag {
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(6, 182, 212, 0.2);
  color: #22d3ee;
  font-weight: 700;
}

.arcade-meaning-symb {
  font-size: 0.78rem;
  color: #a5f3fc;
  font-weight: 600;
  margin: 2px 0 4px 0;
}

.arcade-meaning-dedication {
  font-size: 0.82rem;
  font-style: italic;
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.06);
  padding: 6px 10px;
  border-radius: 6px;
  border-left: 2.5px solid #06b6d4;
}

/* ====================================================================
   ESTILOS TEMÁTICOS PERSONALIZADOS POR EXPERIENCIA (MOLDES DEDICADOS)
   Garantiza que cada temática posea su propia UI inmersiva única,
   manteniendo Floral 100% intacta.
   ==================================================================== */

/* --- 1. 🌌 ODISEA CÓSMICA (cosmic) --- */
body[data-experience="cosmic"] #hub-user-badge {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.45);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.25), inset 0 0 10px rgba(56, 189, 248, 0.15);
  color: #e0f2fe;
  letter-spacing: 0.5px;
}

body[data-experience="cosmic"] #hub-hero-banner {
  background: radial-gradient(ellipse at 50% 0%, rgba(30, 27, 75, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 1px solid rgba(129, 140, 248, 0.35);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), 0 0 25px rgba(56, 189, 248, 0.15);
}

body[data-experience="cosmic"] #hero-subtitle-text {
  color: #38bdf8;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.7);
  letter-spacing: 2px;
  font-weight: 700;
}

body[data-experience="cosmic"] #hub-hero-banner .hero-title {
  color: #f8fafc;
  text-shadow: 0 0 20px rgba(168, 85, 247, 0.5), 0 2px 8px rgba(0, 0, 0, 0.8);
}

body[data-experience="cosmic"] #hero-message-text {
  color: #cbd5e1;
}

body[data-experience="cosmic"] .card-cosmic-hologram {
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(56, 189, 248, 0.45);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 0 18px rgba(56, 189, 248, 0.25), inset 0 0 15px rgba(56, 189, 248, 0.08);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

body[data-experience="cosmic"] .card-cosmic-hologram .hud-corners {
  position: absolute;
  inset: 6px;
  pointer-events: none;
  z-index: 3;
}

body[data-experience="cosmic"] .card-cosmic-hologram .hud-corner {
  position: absolute;
  color: #38bdf8;
  font-size: 0.75rem;
  font-family: monospace;
  opacity: 0.85;
  text-shadow: 0 0 6px #38bdf8;
}

body[data-experience="cosmic"] .card-cosmic-hologram .hud-corner.tl { top: 2px; left: 2px; }
body[data-experience="cosmic"] .card-cosmic-hologram .hud-corner.tr { top: 2px; right: 2px; }
body[data-experience="cosmic"] .card-cosmic-hologram .hud-corner.bl { bottom: 2px; left: 2px; }
body[data-experience="cosmic"] .card-cosmic-hologram .hud-corner.br { bottom: 2px; right: 2px; }

body[data-experience="cosmic"] .card-cosmic-hologram .cosmic-holo-visor {
  width: 100%;
  height: 165px;
  background: radial-gradient(circle, rgba(14, 116, 144, 0.35) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

body[data-experience="cosmic"] .card-cosmic-hologram .holo-grid-lines {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(56, 189, 248, 0.08) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(56, 189, 248, 0.08) 1px, transparent 1px);
  background-size: 16px 16px;
  pointer-events: none;
}

body[data-experience="cosmic"] .card-cosmic-hologram .holo-scanline {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(56, 189, 248, 0.12) 51%, transparent 52%);
  background-size: 100% 8px;
  pointer-events: none;
}

body[data-experience="cosmic"] .card-cosmic-hologram .cosmic-holo-img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(56, 189, 248, 0.6));
  z-index: 2;
}

body[data-experience="cosmic"] .card-cosmic-hologram .cosmic-telemetry-tag {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-family: monospace;
  font-size: 0.7rem;
  color: #38bdf8;
  margin-top: 10px;
  padding: 0 4px;
  letter-spacing: 0.5px;
}

body[data-experience="cosmic"] .card-cosmic-hologram .telemetry-status {
  color: #4ade80;
}

body[data-experience="cosmic"] .card-cosmic-hologram .cosmic-holo-caption {
  font-size: 0.88rem;
  color: #e0f2fe;
  text-align: center;
  margin-top: 6px;
  line-height: 1.4;
}

body[data-experience="cosmic"] #hub-letter-card {
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(56, 189, 248, 0.4);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 25px rgba(56, 189, 248, 0.2), inset 0 0 25px rgba(56, 189, 248, 0.05);
  border-radius: 16px;
}

body[data-experience="cosmic"] #hub-letter-card .letter-header {
  border-bottom: 1px solid rgba(56, 189, 248, 0.25);
}

body[data-experience="cosmic"] #hub-letter-card #letter-card-heading {
  font-family: monospace;
  font-size: 1rem;
  letter-spacing: 1px;
  color: #38bdf8;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
}

body[data-experience="cosmic"] #hub-letter-card .letter-stamp {
  background: radial-gradient(circle, rgba(56, 189, 248, 0.2) 0%, rgba(15, 23, 42, 0.8) 100%);
  border: 1.5px solid #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
}

body[data-experience="cosmic"] #hub-letter-card .letter-content {
  font-family: system-ui, -apple-system, sans-serif;
  font-style: normal;
  font-size: 0.98rem;
  line-height: 1.8;
  color: #e2e8f0;
}

body[data-experience="cosmic"] #hub-letter-card .letter-footer {
  font-family: monospace;
  color: #38bdf8;
  letter-spacing: 1px;
}

body[data-experience="cosmic"] .wish-chip {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #e0f2fe;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 0 8px rgba(56, 189, 248, 0.12);
}

body[data-experience="cosmic"] .wish-chip:hover,
body[data-experience="cosmic"] .wish-chip:active {
  background: rgba(30, 58, 138, 0.9);
  border-color: #38bdf8;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.5);
}


/* --- 2. 📜 SOBRE & LACRE VINTAGE (vintage_letter) --- */
body[data-experience="vintage_letter"] #hub-user-badge {
  background: #fbf7ee;
  border: 1px solid #d4af37;
  box-shadow: 0 4px 14px rgba(78, 59, 49, 0.12), inset 0 0 8px rgba(212, 175, 55, 0.15);
  color: #4a3525;
  font-family: "Georgia", serif;
}

body[data-experience="vintage_letter"] #hub-hero-banner {
  background: linear-gradient(135deg, #fefcf6 0%, #f6edd9 100%);
  border: 2px solid #c8a86b;
  box-shadow: 0 10px 30px rgba(60, 42, 33, 0.12), inset 0 0 40px rgba(200, 168, 107, 0.18);
}

body[data-experience="vintage_letter"] #hero-subtitle-text {
  font-family: "Georgia", serif;
  color: #8c6239;
  letter-spacing: 2px;
}

body[data-experience="vintage_letter"] #hub-hero-banner .hero-title {
  font-family: "Georgia", "Times New Roman", serif;
  color: #3e2723;
}

body[data-experience="vintage_letter"] #hero-message-text {
  font-family: "Georgia", serif;
  font-style: italic;
  color: #5d4037;
}

body[data-experience="vintage_letter"] .card-vintage-daguerreotype {
  background: #fdfaf2;
  border: 2px solid #dcd1be;
  box-shadow: 0 8px 24px rgba(62, 39, 35, 0.14), inset 0 0 20px rgba(184, 150, 90, 0.12);
  border-radius: 6px;
  position: relative;
  padding: 16px 14px 20px 14px;
}

body[data-experience="vintage_letter"] .card-vintage-daguerreotype .brass-corners {
  position: absolute;
  inset: 4px;
  pointer-events: none;
}

body[data-experience="vintage_letter"] .card-vintage-daguerreotype .brass-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: #c5a059;
  border-style: solid;
  pointer-events: none;
}

body[data-experience="vintage_letter"] .card-vintage-daguerreotype .brass-tl { top: 0; left: 0; border-width: 3px 0 0 3px; }
body[data-experience="vintage_letter"] .card-vintage-daguerreotype .brass-tr { top: 0; right: 0; border-width: 3px 3px 0 0; }
body[data-experience="vintage_letter"] .card-vintage-daguerreotype .brass-bl { bottom: 0; left: 0; border-width: 0 0 3px 3px; }
body[data-experience="vintage_letter"] .card-vintage-daguerreotype .brass-br { bottom: 0; right: 0; border-width: 0 3px 3px 0; }

body[data-experience="vintage_letter"] .card-vintage-daguerreotype .vintage-dag-wrapper {
  width: 100%;
  height: 165px;
  background: radial-gradient(circle, #f5ebd7 0%, #dfcfb2 100%);
  border: 1px solid #bba582;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 8px rgba(62, 39, 35, 0.15);
}

body[data-experience="vintage_letter"] .card-vintage-daguerreotype .dag-sepia-grain {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 40%, rgba(93, 64, 55, 0.25) 100%);
  pointer-events: none;
}

body[data-experience="vintage_letter"] .card-vintage-daguerreotype .vintage-dag-img {
  width: 85px;
  height: 85px;
  object-fit: contain;
  filter: sepia(0.35) contrast(1.05) drop-shadow(0 4px 10px rgba(62, 39, 35, 0.25));
}

body[data-experience="vintage_letter"] .card-vintage-daguerreotype .vintage-script-date {
  font-family: "Georgia", serif;
  font-size: 0.7rem;
  font-weight: 700;
  color: #8c6239;
  letter-spacing: 1.5px;
  text-align: center;
  margin-top: 10px;
  border-bottom: 1px solid rgba(140, 98, 57, 0.2);
  padding-bottom: 4px;
}

body[data-experience="vintage_letter"] .card-vintage-daguerreotype .vintage-script-text {
  font-family: "Georgia", serif;
  font-style: italic;
  font-size: 0.9rem;
  color: #3e2723;
  text-align: center;
  margin-top: 6px;
  line-height: 1.45;
}

body[data-experience="vintage_letter"] #hub-letter-card {
  background: #fdf8eb;
  border: 2px solid #c5a059;
  box-shadow: 0 14px 36px rgba(62, 39, 35, 0.18), inset 0 0 50px rgba(184, 150, 90, 0.25);
  border-radius: 8px;
  position: relative;
}

body[data-experience="vintage_letter"] #hub-letter-card .letter-header {
  border-bottom: 2px double #c5a059;
}

body[data-experience="vintage_letter"] #hub-letter-card #letter-card-heading {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 1.25rem;
  color: #4a3525;
  letter-spacing: 1px;
}

body[data-experience="vintage_letter"] #hub-letter-card .letter-stamp {
  background: radial-gradient(circle at 35% 35%, #b91c1c 0%, #7f1d1d 90%);
  border: 2px solid #d4af37;
  box-shadow: 0 4px 12px rgba(127, 29, 29, 0.4), inset 0 2px 4px rgba(254, 240, 138, 0.5);
  color: #fef08a;
}

body[data-experience="vintage_letter"] #hub-letter-card .letter-content {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 1.05rem;
  line-height: 1.9;
  color: #2b1d14;
}

body[data-experience="vintage_letter"] #hub-letter-card .letter-footer {
  font-family: "Georgia", serif;
  color: #8c6239;
}

body[data-experience="vintage_letter"] .wish-chip {
  background: #fbf6ec;
  border: 1px solid #c5a059;
  color: #4a3525;
  font-family: "Georgia", serif;
  box-shadow: 0 3px 8px rgba(62, 39, 35, 0.08);
}

body[data-experience="vintage_letter"] .wish-chip:hover,
body[data-experience="vintage_letter"] .wish-chip:active {
  background: #f3e5c8;
  border-color: #8c6239;
  box-shadow: 0 4px 12px rgba(140, 98, 57, 0.25);
}


/* --- 3. 🎬 PREMIERE DE CINE HOLLYWOOD GATSBY VIP (cinema) --- */
body[data-experience="cinema"] #hub-user-badge {
  background: linear-gradient(135deg, #18181c 0%, #0d0d10 100%);
  border: 1.5px solid #eab308;
  box-shadow: 0 0 18px rgba(234, 179, 8, 0.4), inset 0 0 8px rgba(234, 179, 8, 0.15);
  color: #fef08a;
  letter-spacing: 1.2px;
  font-weight: 800;
  text-transform: uppercase;
}

body[data-experience="cinema"] #hub-hero-banner {
  background: radial-gradient(ellipse at 50% 0%, #2e0808 0%, #150404 50%, #080202 100%);
  border: 2.5px solid #ca8a04;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.85), 0 0 35px rgba(234, 179, 8, 0.3), inset 0 0 30px rgba(0, 0, 0, 0.8);
  position: relative;
  overflow: hidden;
}

body[data-experience="cinema"] #hub-hero-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #ca8a04, #fef08a, #eab308, #ca8a04);
}

body[data-experience="cinema"] #hero-subtitle-text {
  color: #facc15;
  letter-spacing: 3px;
  font-weight: 900;
  text-shadow: 0 0 14px rgba(250, 204, 21, 0.7);
  font-family: 'Playfair Display', 'Cinzel', Georgia, serif;
}

body[data-experience="cinema"] #hub-hero-banner .hero-title {
  color: #ffffff;
  font-family: 'Playfair Display', 'Cinzel', Georgia, serif;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.9), 0 0 25px rgba(234, 179, 8, 0.5);
  letter-spacing: 0.5px;
}

body[data-experience="cinema"] #hero-message-text {
  color: #e4e4e7;
  font-size: 0.92rem;
  line-height: 1.6;
}

body[data-experience="cinema"] .card-cinema-filmstrip {
  background: linear-gradient(180deg, #18181b 0%, #09090b 100%);
  border: 2px solid #ca8a04;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.85), 0 0 22px rgba(234, 179, 8, 0.25);
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
  position: relative;
}

body[data-experience="cinema"] .filmstrip-sprockets {
  display: flex;
  justify-content: space-around;
  padding: 8px 12px;
  background: #09090b;
  width: 100%;
  border-bottom: 1px solid rgba(234, 179, 8, 0.3);
}

body[data-experience="cinema"] .sprocket-hole {
  width: 14px;
  height: 10px;
  background: #1c1917;
  border-radius: 3px;
  border: 1.5px solid #ca8a04;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.9), 0 0 6px rgba(234, 179, 8, 0.35);
}

body[data-experience="cinema"] .filmstrip-slate-tag {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, monospace;
  font-size: 0.74rem;
  font-weight: 800;
  color: #fef08a;
  background: linear-gradient(90deg, #1c1917 0%, #27272a 50%, #1c1917 100%);
  padding: 5px 12px;
  letter-spacing: 1.5px;
  border-bottom: 1.5px solid rgba(234, 179, 8, 0.4);
  text-align: center;
}

body[data-experience="cinema"] .filmstrip-frame {
  width: 100%;
  height: 165px;
  background: radial-gradient(circle at 50% 50%, #3f1a1a 0%, #180808 60%, #080202 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  position: relative;
  overflow: hidden;
}

body[data-experience="cinema"] .filmstrip-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(254, 240, 138, 0.04) 0px,
    rgba(254, 240, 138, 0.04) 1px,
    transparent 1px,
    transparent 12px
  );
  pointer-events: none;
}

body[data-experience="cinema"] .filmstrip-img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(250, 204, 21, 0.65));
}

body[data-experience="cinema"] .filmstrip-caption {
  padding: 10px 14px 12px 14px;
  background: #09090b;
  text-align: center;
  border-top: 1px solid rgba(234, 179, 8, 0.3);
}

body[data-experience="cinema"] .film-cue {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 0.72rem;
  color: #ca8a04;
  letter-spacing: 1.5px;
  font-weight: 700;
  text-transform: uppercase;
}

body[data-experience="cinema"] .film-dialogue {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.88rem;
  color: #f4f4f5;
  margin: 5px 0 0 0;
  line-height: 1.45;
  font-style: italic;
}

body[data-experience="cinema"] #hub-letter-card {
  background: #fffdf5;
  border: 2px solid #ca8a04;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.8), 0 0 25px rgba(234, 179, 8, 0.2);
  border-radius: 8px;
  border-left: 10px solid #ca8a04;
  position: relative;
}

body[data-experience="cinema"] #hub-letter-card .letter-header {
  border-bottom: 2px solid #ca8a04;
  padding-bottom: 10px;
}

body[data-experience="cinema"] #hub-letter-card #letter-card-heading {
  font-family: 'Playfair Display', 'Cinzel', Georgia, serif;
  font-weight: 900;
  color: #18181b;
  letter-spacing: 1.5px;
  font-size: 1.2rem;
}

body[data-experience="cinema"] #hub-letter-card .letter-stamp {
  background: linear-gradient(135deg, #18181c 0%, #09090b 100%);
  border: 2px solid #facc15;
  color: #fef08a;
  box-shadow: 0 0 14px rgba(234, 179, 8, 0.5);
}

body[data-experience="cinema"] #hub-letter-card .letter-content {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: normal;
  font-size: 1.02rem;
  line-height: 1.85;
  color: #1c1917;
}

body[data-experience="cinema"] #hub-letter-card .letter-footer {
  font-family: 'Playfair Display', Georgia, serif;
  color: #854d0e;
  font-weight: 800;
  letter-spacing: 1px;
}

body[data-experience="cinema"] .wish-chip {
  background: linear-gradient(135deg, #18181c 0%, #0d0d10 100%);
  border: 1.5px solid #ca8a04;
  color: #fef08a;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  font-weight: 700;
}

body[data-experience="cinema"] .wish-chip:hover,
body[data-experience="cinema"] .wish-chip:active {
  background: linear-gradient(135deg, #ca8a04 0%, #eab308 100%);
  color: #18181b;
  box-shadow: 0 0 20px rgba(234, 179, 8, 0.8);
}


/* --- 4. 🏴‍☠️ COFRE DEL TESORO PIRATA & ORO AZTECA (pirate) --- */
body[data-experience="pirate"] #hub-user-badge {
  background: linear-gradient(135deg, #2a1508 0%, #170902 100%);
  border: 1.5px solid #d97706;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7), inset 0 0 10px rgba(217, 119, 6, 0.3);
  color: #fef3c7;
  font-family: 'Georgia', serif;
  letter-spacing: 0.8px;
}

body[data-experience="pirate"] #hub-hero-banner {
  background: radial-gradient(ellipse at 50% 0%, #3d1404 0%, #200a01 50%, #0d0300 100%);
  border: 2.5px solid #b45309;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.85), inset 0 0 35px rgba(180, 83, 9, 0.3);
  position: relative;
  overflow: hidden;
}

body[data-experience="pirate"] #hub-hero-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #78350f, #f59e0b, #b45309, #78350f);
}

body[data-experience="pirate"] #hero-subtitle-text {
  color: #f59e0b;
  letter-spacing: 3px;
  font-weight: 800;
  font-family: 'Georgia', serif;
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}

body[data-experience="pirate"] #hub-hero-banner .hero-title {
  font-family: 'Georgia', serif;
  color: #fef3c7;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.95), 0 0 20px rgba(217, 119, 6, 0.4);
}

body[data-experience="pirate"] #hero-message-text {
  color: #fed7aa;
  line-height: 1.6;
}

body[data-experience="pirate"] .card-pirate-plank {
  background: linear-gradient(180deg, #4a220a 0%, #2e1104 60%, #1a0801 100%);
  border: 2.5px solid #854d0e;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(0, 0, 0, 0.6);
  border-radius: 10px;
  position: relative;
  padding: 16px 14px 20px 14px;
}

body[data-experience="pirate"] .plank-rivet {
  position: absolute;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, #fde047 0%, #b45309 60%, #451a03 100%);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}

body[data-experience="pirate"] .plank-rivet.tl { top: 8px; left: 8px; }
body[data-experience="pirate"] .plank-rivet.tr { top: 8px; right: 8px; }
body[data-experience="pirate"] .plank-rivet.bl { bottom: 8px; left: 8px; }
body[data-experience="pirate"] .plank-rivet.br { bottom: 8px; right: 8px; }

body[data-experience="pirate"] .plank-rope-knot {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.2rem;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.8));
}

body[data-experience="pirate"] .plank-img-wrapper {
  width: 100%;
  height: 165px;
  background: radial-gradient(circle at center, #2e1003 0%, #150500 100%);
  border: 1.5px solid #b45309;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  overflow: hidden;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.8);
}

body[data-experience="pirate"] .plank-img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(245, 158, 11, 0.6));
}

body[data-experience="pirate"] .plank-brass-plaque {
  background: linear-gradient(135deg, #f59e0b 0%, #b45309 50%, #78350f 100%);
  border: 1.5px solid #fef08a;
  border-radius: 6px;
  padding: 8px 10px;
  margin-top: 12px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}

body[data-experience="pirate"] .plank-coords {
  font-size: 0.72rem;
  font-weight: 800;
  color: #fef9c3;
  letter-spacing: 1.5px;
}

body[data-experience="pirate"] .plank-caption {
  font-size: 0.88rem;
  color: #ffffff;
  font-weight: 700;
  margin-top: 3px;
  line-height: 1.4;
  font-family: 'Georgia', serif;
}

body[data-experience="pirate"] #hub-letter-card {
  background: radial-gradient(ellipse at center, #fffbeb 0%, #fef3c7 70%, #fde68a 100%);
  border: 2.5px solid #854d0e;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.75), inset 0 0 40px rgba(180, 83, 9, 0.3);
  border-radius: 14px;
  position: relative;
}

body[data-experience="pirate"] #hub-letter-card .letter-header {
  border-bottom: 2px dashed #b45309;
}

body[data-experience="pirate"] #hub-letter-card #letter-card-heading {
  font-family: 'Georgia', serif;
  color: #451a03;
  font-size: 1.25rem;
  font-weight: 800;
}

body[data-experience="pirate"] #hub-letter-card .letter-stamp {
  background: radial-gradient(circle at center, #991b1b 0%, #450a0a 100%);
  border: 2px solid #f59e0b;
  color: #fef3c7;
  box-shadow: 0 4px 12px rgba(69, 10, 10, 0.5);
}

body[data-experience="pirate"] #hub-letter-card .letter-content {
  font-family: 'Georgia', serif;
  font-size: 1.05rem;
  line-height: 1.9;
  color: #290d02;
}

body[data-experience="pirate"] #hub-letter-card .letter-footer {
  font-family: 'Georgia', serif;
  color: #b45309;
  font-weight: 700;
}

body[data-experience="pirate"] .wish-chip {
  background: linear-gradient(135deg, #2a1508 0%, #1a0a02 100%);
  border: 1.5px solid #b45309;
  color: #fde68a;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  font-family: 'Georgia', serif;
}

body[data-experience="pirate"] .wish-chip:hover,
body[data-experience="pirate"] .wish-chip:active {
  background: linear-gradient(135deg, #b45309 0%, #d97706 100%);
  color: #ffffff;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.7);
}


/* --- 5. 🍫 CHOCOLATERÍA FINA (candy) --- */
body[data-experience="candy"] #hub-user-badge {
  background: #fff1f2;
  border: 1px solid #fb7185;
  box-shadow: 0 4px 14px rgba(244, 63, 94, 0.15);
  color: #881337;
  font-family: "Georgia", serif;
}

body[data-experience="candy"] #hub-hero-banner {
  background: linear-gradient(135deg, #fff5f5 0%, #ffe4e6 50%, #fecdd3 100%);
  border: 2px solid #fb7185;
  box-shadow: 0 10px 30px rgba(244, 63, 94, 0.15), inset 0 0 25px rgba(255, 255, 255, 0.6);
}

body[data-experience="candy"] #hero-subtitle-text {
  color: #e11d48;
  letter-spacing: 2px;
  font-weight: 700;
}

body[data-experience="candy"] #hub-hero-banner .hero-title {
  font-family: "Georgia", serif;
  color: #4c0519;
}

body[data-experience="candy"] #hero-message-text {
  color: #881337;
}

body[data-experience="candy"] .card-candy-pastry {
  background: #ffffff;
  border: 2px dashed #fda4af;
  box-shadow: 0 8px 24px rgba(244, 63, 94, 0.14);
  border-radius: 18px;
  position: relative;
  padding: 18px 14px 20px 14px;
}

body[data-experience="candy"] .pastry-satin-bow {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.5rem;
  filter: drop-shadow(0 2px 6px rgba(244, 63, 94, 0.3));
}

body[data-experience="candy"] .pastry-img-wrapper {
  width: 100%;
  height: 160px;
  background: radial-gradient(circle, #fff1f2 0%, #ffe4e6 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.04);
}

body[data-experience="candy"] .pastry-img {
  width: 85px;
  height: 85px;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(244, 63, 94, 0.25));
}

body[data-experience="candy"] .pastry-menu-card {
  margin-top: 12px;
  text-align: center;
}

body[data-experience="candy"] .pastry-flavor-note {
  font-size: 0.68rem;
  font-weight: 700;
  color: #e11d48;
  letter-spacing: 1.2px;
  background: #fff1f2;
  padding: 2px 8px;
  border-radius: 999px;
}

body[data-experience="candy"] .pastry-caption {
  font-size: 0.9rem;
  color: #4c0519;
  font-weight: 600;
  margin-top: 6px;
  line-height: 1.4;
}

body[data-experience="candy"] #hub-letter-card {
  background: #fffafa;
  border: 2px solid #fda4af;
  box-shadow: 0 12px 35px rgba(244, 63, 94, 0.15), inset 0 0 30px rgba(254, 226, 226, 0.5);
  border-radius: 20px;
}

body[data-experience="candy"] #hub-letter-card .letter-header {
  border-bottom: 2px dotted #fb7185;
}

body[data-experience="candy"] #hub-letter-card #letter-card-heading {
  font-family: "Georgia", serif;
  color: #881337;
}

body[data-experience="candy"] #hub-letter-card .letter-stamp {
  background: #ffe4e6;
  border: 2px solid #f43f5e;
  color: #e11d48;
}

body[data-experience="candy"] #hub-letter-card .letter-content {
  font-family: "Georgia", serif;
  font-size: 1rem;
  line-height: 1.85;
  color: #4c0519;
}

body[data-experience="candy"] #hub-letter-card .letter-footer {
  font-family: "Georgia", serif;
  color: #e11d48;
}

body[data-experience="candy"] .wish-chip {
  background: #ffffff;
  border: 1px solid #fda4af;
  color: #881337;
  box-shadow: 0 3px 8px rgba(244, 63, 94, 0.1);
}

body[data-experience="candy"] .wish-chip:hover,
body[data-experience="candy"] .wish-chip:active {
  background: #fb7185;
  color: #ffffff;
  box-shadow: 0 0 14px rgba(251, 113, 133, 0.5);
}


/* --- 6. 👾 ARCADE RETRO 8-BIT (arcade) --- */
body[data-experience="arcade"] #hub-user-badge {
  background: #0f172a;
  border: 2px solid #22d3ee;
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.4), inset 0 0 8px rgba(34, 211, 238, 0.2);
  color: #a5f3fc;
  font-family: monospace;
  letter-spacing: 1px;
  font-weight: 700;
}

body[data-experience="arcade"] #hub-hero-banner {
  background: #090d16;
  border: 2px solid #06b6d4;
  box-shadow: 0 0 25px rgba(6, 182, 212, 0.35), inset 0 0 20px rgba(6, 182, 212, 0.15);
  border-radius: 8px;
  position: relative;
}

body[data-experience="arcade"] #hero-subtitle-text {
  font-family: monospace;
  color: #22d3ee;
  letter-spacing: 2px;
  font-weight: 800;
  text-shadow: 0 0 10px #06b6d4;
}

body[data-experience="arcade"] #hub-hero-banner .hero-title {
  font-family: monospace;
  color: #ffffff;
  text-shadow: 0 0 15px rgba(236, 72, 153, 0.7), 2px 2px 0 #06b6d4;
}

body[data-experience="arcade"] #hero-message-text {
  font-family: monospace;
  color: #a5f3fc;
}

body[data-experience="arcade"] .card-arcade-pixel {
  background: #0f172a;
  border: 2px solid #06b6d4;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), 0 0 16px rgba(6, 182, 212, 0.3);
  border-radius: 6px;
  padding: 0;
  overflow: hidden;
}

body[data-experience="arcade"] .arcade-card-header {
  background: #1e293b;
  display: flex;
  justify-content: space-between;
  padding: 6px 12px;
  font-family: monospace;
  font-size: 0.72rem;
  color: #38bdf8;
  border-bottom: 2px solid #06b6d4;
  font-weight: 700;
}

body[data-experience="arcade"] .arcade-card-header .crt-status {
  color: #4ade80;
}

body[data-experience="arcade"] .arcade-pixel-screen {
  width: 100%;
  height: 155px;
  background: #020617;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

body[data-experience="arcade"] .arcade-scanlines {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.35) 50%);
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 2;
}

body[data-experience="arcade"] .arcade-pixel-img {
  width: 85px;
  height: 85px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 14px rgba(34, 211, 238, 0.6));
  z-index: 1;
}

body[data-experience="arcade"] .arcade-pixel-caption {
  background: #0f172a;
  padding: 10px 12px;
  font-family: monospace;
  font-size: 0.82rem;
  color: #e2e8f0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-top: 1px solid rgba(6, 182, 212, 0.3);
}

body[data-experience="arcade"] .arcade-dialogue-prompt {
  line-height: 1.4;
  flex: 1;
}

body[data-experience="arcade"] .blinking-cursor {
  color: #ec4899;
  animation: blinkCursor 0.8s infinite;
  font-size: 0.8rem;
  margin-left: 6px;
}

@keyframes blinkCursor {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

body[data-experience="arcade"] #hub-letter-card {
  background: #1e3a8a;
  border: 3px double #ffffff;
  box-shadow: 0 0 25px rgba(30, 58, 138, 0.7), inset 0 0 20px rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  position: relative;
}

body[data-experience="arcade"] #hub-letter-card .letter-header {
  border-bottom: 2px dashed #93c5fd;
}

body[data-experience="arcade"] #hub-letter-card #letter-card-heading {
  font-family: monospace;
  color: #fbbf24;
  font-size: 1rem;
  letter-spacing: 1px;
  text-shadow: 1px 1px 0 #000000;
}

body[data-experience="arcade"] #hub-letter-card .letter-stamp {
  background: #0f172a;
  border: 2px solid #38bdf8;
  color: #f472b6;
}

body[data-experience="arcade"] #hub-letter-card .letter-content {
  font-family: monospace;
  font-style: normal;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

body[data-experience="arcade"] #hub-letter-card .letter-footer {
  font-family: monospace;
  color: #fbbf24;
  letter-spacing: 1px;
}

body[data-experience="arcade"] .wish-chip {
  background: #0f172a;
  border: 2px solid #06b6d4;
  color: #67e8f9;
  font-family: monospace;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}

body[data-experience="arcade"] .wish-chip:hover,
body[data-experience="arcade"] .wish-chip:active {
  background: #06b6d4;
  color: #0f172a;
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.7);
}

/* ====================================================================
   COLECCIONES INDIVIDUALES (MODO CUADRÍCULA / DISPLAYMODE: 'GARDEN')
   ==================================================================== */

.cosmic-grid,
.vintage-grid,
.cinema-grid,
.pirate-grid,
.candy-grid,
.arcade-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  width: 100%;
}

@media (max-width: 360px) {
  .cosmic-grid,
  .vintage-grid,
  .cinema-grid,
  .pirate-grid,
  .candy-grid,
  .arcade-grid {
    gap: 10px;
  }
}

.theme-item-card {
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}

.theme-item-card:active {
  transform: scale(0.95);
}

.theme-item-preview {
  width: 78px;
  height: 78px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-item-preview img,
.theme-item-preview svg {
  width: 100%;
  height: 100%;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.theme-item-card:hover .theme-item-preview img,
.theme-item-card:hover .theme-item-preview svg {
  transform: scale(1.12) rotate(4deg);
}

.theme-item-name {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 2px;
}

.theme-item-meaning {
  font-size: 0.78rem;
  line-height: 1.3;
}

/* 1. Odisea Cósmica - Observatorio */
.cosmic-item-card {
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(129, 140, 248, 0.4);
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.8), inset 0 0 16px rgba(99, 102, 241, 0.15);
}

.cosmic-item-card:hover,
.cosmic-item-card:active {
  border-color: #818cf8;
  box-shadow: 0 0 22px rgba(129, 140, 248, 0.55);
}

.cosmic-item-card .theme-item-name {
  color: #f8fafc;
  text-shadow: 0 0 10px rgba(129, 140, 248, 0.6);
}

.cosmic-item-card .theme-item-meaning {
  color: #cbd5e1;
}

/* 2. Sobre Vintage - Álbum Filatélico */
.vintage-item-card {
  background: #fffdf7;
  border: 2px solid #b45309;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(120, 53, 15, 0.18), inset 0 0 14px rgba(180, 83, 9, 0.06);
}

.vintage-item-card:hover,
.vintage-item-card:active {
  border-color: #d97706;
  box-shadow: 0 8px 24px rgba(180, 83, 9, 0.3);
}

.vintage-item-card .theme-item-name {
  font-family: "Georgia", serif;
  color: #78350f;
}

.vintage-item-card .theme-item-meaning {
  font-family: "Georgia", serif;
  font-style: italic;
  color: #92400e;
}

/* 3. Premiere de Cine - Paseo de la Fama */
.cinema-item-card {
  background: #18181b;
  border: 2px solid #eab308;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.85), 0 0 15px rgba(234, 179, 8, 0.25);
}

.cinema-item-card:hover,
.cinema-item-card:active {
  border-color: #fde047;
  box-shadow: 0 0 25px rgba(234, 179, 8, 0.65);
}

.cinema-item-card .theme-item-name {
  color: #fef08a;
  text-shadow: 0 0 8px rgba(234, 179, 8, 0.5);
}

.cinema-item-card .theme-item-meaning {
  color: #e4e4e7;
}

/* 4. Cofre Pirata - Bóveda de Reliquias */
.pirate-item-card {
  background: linear-gradient(145deg, #1c1917, #292524);
  border: 2px solid #d97706;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.9), inset 0 0 12px rgba(217, 119, 6, 0.2);
}

.pirate-item-card:hover,
.pirate-item-card:active {
  border-color: #f59e0b;
  box-shadow: 0 0 22px rgba(245, 158, 11, 0.55);
}

.pirate-item-card .theme-item-name {
  color: #fbbf24;
  text-shadow: 0 0 8px rgba(217, 119, 6, 0.4);
}

.pirate-item-card .theme-item-meaning {
  color: #fed7aa;
}

/* 5. Chocolatería Fina - Vitrina de Degustación */
.candy-item-card {
  background: linear-gradient(135deg, #fff5f7, #fdf2f8);
  border: 2px solid #f472b6;
  border-radius: 22px;
  box-shadow: 0 6px 20px rgba(244, 114, 182, 0.25), inset 0 0 12px rgba(251, 207, 232, 0.4);
}

.candy-item-card:hover,
.candy-item-card:active {
  border-color: #ec4899;
  box-shadow: 0 0 20px rgba(236, 72, 153, 0.45);
}

.candy-item-card .theme-item-name {
  color: #be185d;
}

.candy-item-card .theme-item-meaning {
  color: #831843;
}

/* 6. Arcade Retro - Sala de Trofeos 8-Bit */
.arcade-item-card {
  background: #0f172a;
  border: 2px solid #06b6d4;
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.9), 0 0 12px rgba(6, 182, 212, 0.3);
  font-family: monospace;
}

.arcade-item-card:hover,
.arcade-item-card:active {
  border-color: #38bdf8;
  box-shadow: 0 0 22px rgba(56, 189, 248, 0.7);
}

.arcade-item-card .theme-item-name {
  font-family: monospace;
  color: #38bdf8;
  text-shadow: 0 0 8px #06b6d4;
}

.arcade-item-card .theme-item-meaning {
  font-family: monospace;
  color: #a5f3fc;
}

/* ==========================================================================
   PASE DELUXE VIP • ESTILOS DE LA SUITE DE MONETIZACIÓN INTERACTIVA
   ========================================================================== */
.deluxe-vip-module {
  margin: 35px auto 25px auto;
  max-width: 520px;
  width: 100%;
  padding: 0 10px;
}

.deluxe-vip-header-card {
  background: linear-gradient(145deg, #18181c 0%, #0d0d10 60%, #050507 100%);
  border: 2px solid #ca8a04;
  border-radius: 18px;
  padding: 20px 16px 14px 16px;
  text-align: center;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.75), 0 0 25px rgba(234, 179, 8, 0.25);
  position: relative;
  overflow: hidden;
}

.deluxe-vip-header-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #b45309, #fde047, #f59e0b, #b45309);
  animation: goldFoilShine 4s linear infinite;
  background-size: 200% auto;
}

.deluxe-vip-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #fef08a;
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.3) 0%, rgba(146, 64, 14, 0.4) 100%);
  border: 1px solid #facc15;
  padding: 4px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.deluxe-crown-icon {
  font-size: 0.95rem;
}

.deluxe-vip-title {
  font-family: 'Playfair Display', 'Cinzel', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  margin: 4px 0 6px 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(234, 179, 8, 0.3);
}

.deluxe-vip-subtitle {
  font-size: 0.85rem;
  color: #cbd5e1;
  margin: 0 auto 16px auto;
  line-height: 1.45;
  max-width: 440px;
}

/* Selector de Pestañas Deluxe */
.deluxe-nav-tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  border-top: 1px dashed rgba(234, 179, 8, 0.35);
  padding-top: 14px;
}

.deluxe-tab-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(234, 179, 8, 0.3);
  color: #f4f4f5;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  gap: 6px;
}

.deluxe-tab-btn:hover {
  background: rgba(234, 179, 8, 0.2);
  border-color: #facc15;
}

.deluxe-tab-btn.active {
  background: linear-gradient(135deg, #facc15 0%, #d97706 100%);
  color: #18181b;
  border-color: #fef08a;
  box-shadow: 0 4px 14px rgba(234, 179, 8, 0.45);
  transform: translateY(-2px);
}

/* Paneles de Contenido de Pestañas */
.deluxe-tab-panel {
  display: none;
  margin-top: 16px;
  animation: fadeIn 0.4s ease-out forwards;
}

.deluxe-tab-panel.active {
  display: block;
}

/* --------------------------------------------------------------------------
   1. RASCA Y GANA DIGITAL (SCRATCH-TO-REVEAL)
   -------------------------------------------------------------------------- */
.scratch-card-container {
  background: linear-gradient(145deg, #1c1917 0%, #0c0a09 100%);
  border: 2px solid #ca8a04;
  border-radius: 16px;
  padding: 18px 14px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.75), inset 0 0 20px rgba(0, 0, 0, 0.8);
  text-align: center;
}

.scratch-card-header h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  color: #fef08a;
  margin: 6px 0 4px 0;
}

.scratch-badge {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #f59e0b;
  text-transform: uppercase;
}

.scratch-instruction {
  font-size: 0.8rem;
  color: #a1a1aa;
  margin-bottom: 14px;
}

.scratch-stage {
  position: relative;
  width: 320px;
  height: 240px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 15px rgba(234, 179, 8, 0.25);
  border: 2px solid #ca8a04;
  user-select: none;
}

/* Tarjeta Sorpresa Oculta */
.scratch-hidden-card {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, #fffbeb 0%, #fef3c7 60%, #fde68a 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 14px;
  text-align: center;
  z-index: 1;
  border-radius: 12px;
}

.scratch-prize-icon {
  font-size: 2.2rem;
  filter: drop-shadow(0 4px 10px rgba(217, 119, 6, 0.4));
  margin-bottom: 4px;
}

.scratch-prize-tag {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #991b1b;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid #ef4444;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 6px;
}

.scratch-prize-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: #451a03;
  margin: 0 0 4px 0;
  line-height: 1.25;
}

.scratch-prize-desc {
  font-size: 0.78rem;
  color: #78350f;
  margin: 0 0 8px 0;
  line-height: 1.35;
}

.scratch-prize-code {
  font-family: monospace;
  font-size: 0.72rem;
  font-weight: 800;
  color: #b45309;
  letter-spacing: 1.5px;
  background: rgba(255, 255, 255, 0.65);
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px dashed #d97706;
  margin-bottom: 8px;
}

.btn-scratch-claim {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
  color: #ffffff;
  border: 1px solid #a7f3d0;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
  transition: transform 0.2s ease;
}
.btn-scratch-claim:active {
  transform: scale(0.96);
}

/* Canvas de Raspado */
#scratch-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 320px;
  height: 240px;
  z-index: 2;
  cursor: crosshair;
  touch-action: none; /* Crucial para evitar scroll mientras se raspa en iPhone y Android */
  transition: opacity 0.5s ease;
}

.scratch-footer {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.scratch-progress-bar-wrapper {
  flex: 1;
  text-align: left;
}

.scratch-progress-label {
  font-size: 0.74rem;
  color: #a1a1aa;
  margin-bottom: 4px;
}

.scratch-progress-label strong {
  color: #fde047;
}

.scratch-progress-track {
  width: 100%;
  height: 8px;
  background: #27272a;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid #3f3f46;
}

.scratch-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #fde047);
  border-radius: 999px;
  transition: width 0.15s ease;
}

.btn-scratch-reset {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(234, 179, 8, 0.35);
  color: #fef08a;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-scratch-reset:hover {
  background: rgba(234, 179, 8, 0.2);
}

/* --------------------------------------------------------------------------
   2. CUPONERA DE VALES CANJEABLES
   -------------------------------------------------------------------------- */
.vouchers-showcase-container {
  background: linear-gradient(145deg, #18181b 0%, #0d0d10 100%);
  border: 2px solid #ca8a04;
  border-radius: 16px;
  padding: 18px 14px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.75);
}

.vouchers-intro {
  text-align: center;
  margin-bottom: 16px;
}

.vouchers-icon {
  font-size: 1.8rem;
}

.vouchers-intro h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  color: #fef08a;
  margin: 4px 0;
}

.vouchers-intro p {
  font-size: 0.8rem;
  color: #a1a1aa;
}

.vouchers-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.voucher-ticket {
  display: flex;
  background: radial-gradient(circle at center, #fffdfa 0%, #fef8ee 100%);
  border: 2px solid #ca8a04;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s ease;
}

.voucher-ticket:hover {
  transform: translateY(-2px);
}

.voucher-stub {
  width: 70px;
  background: linear-gradient(180deg, #27272a 0%, #18181b 100%);
  border-right: 2px dashed #ca8a04;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 4px;
  position: relative;
}

.voucher-stub::before,
.voucher-stub::after {
  content: '';
  position: absolute;
  right: -9px;
  width: 16px;
  height: 16px;
  background: #18181b;
  border-radius: 50%;
  border: 2px solid #ca8a04;
}
.voucher-stub::before { top: -9px; }
.voucher-stub::after { bottom: -9px; }

.voucher-stub-icon {
  font-size: 1.6rem;
  margin-bottom: 4px;
}

.voucher-stub-code {
  font-family: monospace;
  font-size: 0.65rem;
  font-weight: 800;
  color: #facc15;
  letter-spacing: 1px;
}

.voucher-body {
  flex: 1;
  padding: 12px 14px 12px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.voucher-badge {
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 1px;
  color: #b45309;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.voucher-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 0.95rem;
  font-weight: 800;
  color: #18181b;
  margin: 0 0 4px 0;
  line-height: 1.25;
}

.voucher-desc {
  font-size: 0.78rem;
  color: #52525b;
  margin: 0 0 10px 0;
  line-height: 1.35;
}

.voucher-actions {
  display: flex;
  align-items: center;
}

.btn-redeem-voucher {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff;
  border: 1px solid #fef08a;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(217, 119, 6, 0.4);
  transition: all 0.2s ease;
}

.btn-redeem-voucher.redeemed-whatsapp {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
  border-color: #a7f3d0;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.4);
}

/* Sello de Canjeado */
.voucher-stamp-overlay {
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  z-index: 10;
  text-align: center;
}

.voucher-ticket.is-redeemed .voucher-stamp-overlay {
  opacity: 1;
  animation: stampSlam 0.55s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.voucher-ticket.is-redeemed .voucher-body {
  opacity: 0.65;
}

/* Estado Bloqueado: Límite de 1 cupón por persona */
.voucher-ticket.is-locked {
  opacity: 0.42;
  filter: grayscale(0.85);
  border-color: #94a3b8 !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed;
  position: relative;
}

.voucher-ticket.is-locked:hover {
  transform: none !important;
}

.voucher-ticket.is-locked .btn-redeem-voucher {
  background: #475569 !important;
  color: #cbd5e1 !important;
  border-color: #64748b !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  pointer-events: none !important;
  opacity: 0.9;
}

.voucher-limit-notice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(202, 138, 4, 0.12);
  border: 1px solid rgba(202, 138, 4, 0.4);
  color: var(--text-main);
  font-size: 0.76rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 20px;
  margin-top: 6px;
}

.rubber-stamp {
  border: 3px solid #dc2626;
  color: #dc2626;
  font-family: 'Impact', 'Arial Black', sans-serif;
  font-size: 1.35rem;
  letter-spacing: 3px;
  padding: 4px 14px;
  border-radius: 6px;
  text-transform: uppercase;
  mask-image: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8));
  box-shadow: 0 0 10px rgba(220, 38, 38, 0.35);
}

.stamp-date {
  font-family: monospace;
  font-size: 0.64rem;
  font-weight: 900;
  color: #dc2626;
  letter-spacing: 2px;
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   3. REPRODUCTOR DE CASSETTE RETRO (NOTA DE VOZ)
   -------------------------------------------------------------------------- */
.cassette-showcase-container {
  background: linear-gradient(145deg, #18181b 0%, #0d0d10 100%);
  border: 2px solid #ca8a04;
  border-radius: 16px;
  padding: 18px 14px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.75);
}

.cassette-intro {
  text-align: center;
  margin-bottom: 16px;
}

.cassette-icon {
  font-size: 1.8rem;
}

.cassette-intro h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  color: #fef08a;
  margin: 4px 0;
}

.cassette-intro p {
  font-size: 0.8rem;
  color: #a1a1aa;
}

/* Cuerpo Físico del Cassette */
.retro-cassette-widget {
  max-width: 330px;
  margin: 0 auto;
}

.cassette-body {
  width: 100%;
  height: 180px;
  background: linear-gradient(145deg, #27272a 0%, #18181b 50%, #09090b 100%);
  border: 3px solid #ca8a04;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(255, 255, 255, 0.08);
  position: relative;
  padding: 10px;
  overflow: hidden;
}

/* Tornillos de fijación metálicos */
.cassette-screw {
  position: absolute;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, #e4e4e7 0%, #71717a 100%);
  border-radius: 50%;
  border: 1px solid #27272a;
}
.cassette-screw.tl { top: 6px; left: 6px; }
.cassette-screw.tr { top: 6px; right: 6px; }
.cassette-screw.bl { bottom: 6px; left: 6px; }
.cassette-screw.br { bottom: 6px; right: 6px; }

/* Pegatina Adhesiva de Papel */
.cassette-sticker {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1.5px solid #d97706;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.cassette-sticker-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.62rem;
  font-weight: 800;
  color: #92400e;
  letter-spacing: 1px;
}

.cassette-brand {
  color: #b45309;
}

.cassette-title-written {
  font-family: 'Playfair Display', 'Georgia', cursive, serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #451a03;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ventana Acrílica con Bobinas */
.cassette-window {
  width: 78%;
  height: 52px;
  background: rgba(0, 0, 0, 0.75);
  border: 2px solid #52525b;
  border-radius: 6px;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 14px;
}

.cassette-spool {
  position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cassette-gear {
  width: 24px;
  height: 24px;
  background: repeating-conic-gradient(from 0deg, #f4f4f5 0deg 30deg, #27272a 30deg 60deg);
  border-radius: 50%;
  border: 2px solid #d4d4d8;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
  animation: spinCassetteSpool 2.5s linear infinite;
  animation-play-state: paused;
}

.retro-cassette-widget.is-playing .cassette-gear {
  animation-play-state: running;
}

.cassette-tape-roll {
  position: absolute;
  border-radius: 50%;
  background: #3f1a07;
  border: 2px solid #290d02;
  z-index: -1;
}
.left-roll {
  width: 34px;
  height: 34px;
}
.right-roll {
  width: 26px;
  height: 26px;
}

.cassette-tape-bridge {
  position: absolute;
  top: 50%;
  left: 20%;
  right: 20%;
  height: 4px;
  background: #2e1003;
  transform: translateY(-50%);
  z-index: -1;
}

/* Barras de Ecualizador */
.cassette-equalizer {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
  height: 26px;
  margin-top: 8px;
}

.eq-bar {
  width: 6px;
  background: #ca8a04;
  border-radius: 2px;
  height: 20%;
  transition: height 0.15s ease;
}

.retro-cassette-widget.is-playing .eq-bar.b1 { animation: equalizerDance1 0.7s infinite ease-in-out; }
.retro-cassette-widget.is-playing .eq-bar.b2 { animation: equalizerDance2 0.85s infinite ease-in-out; }
.retro-cassette-widget.is-playing .eq-bar.b3 { animation: equalizerDance3 0.6s infinite ease-in-out; }
.retro-cassette-widget.is-playing .eq-bar.b4 { animation: equalizerDance4 0.9s infinite ease-in-out; }
.retro-cassette-widget.is-playing .eq-bar.b5 { animation: equalizerDance5 0.75s infinite ease-in-out; }
.retro-cassette-widget.is-playing .eq-bar.b6 { animation: equalizerDance2 0.8s infinite ease-in-out; }
.retro-cassette-widget.is-playing .eq-bar.b7 { animation: equalizerDance4 0.65s infinite ease-in-out; }
.retro-cassette-widget.is-playing .eq-bar.b8 { animation: equalizerDance1 0.95s infinite ease-in-out; }

/* Controles de Reproducción */
.cassette-controls-bar {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.btn-cassette-play {
  flex: 1;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #18181b;
  border: 1px solid #fef08a;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(234, 179, 8, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.2s ease;
}
.btn-cassette-play:active {
  transform: scale(0.97);
}

.cassette-timer {
  font-family: monospace;
  font-size: 0.85rem;
  font-weight: 800;
  color: #fef08a;
  background: #18181b;
  border: 1px solid rgba(234, 179, 8, 0.4);
  padding: 8px 12px;
  border-radius: 8px;
}

.cassette-vintage-note {
  margin-top: 14px;
  background: rgba(234, 179, 8, 0.08);
  border: 1px dashed rgba(234, 179, 8, 0.35);
  border-radius: 10px;
  padding: 8px 14px;
  text-align: center;
  font-size: 0.78rem;
  color: #fef08a;
  letter-spacing: 0.3px;
}

.btn-monetization-details {
  background: #18181b;
  border: 1.5px solid #ca8a04;
  color: #fef08a;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s ease;
}
.btn-monetization-details:hover {
  background: #27272a;
  border-color: #facc15;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(202, 138, 4, 0.4);
}

/* --------------------------------------------------------------------------
   4. MODAL DE MONETIZACIÓN & PROMO EN PANEL CREADOR
   -------------------------------------------------------------------------- */
#monetization-modal .bottom-sheet {
  background: #09090b !important;
  color: #f4f4f5 !important;
  border-top: 2px solid #ca8a04 !important;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.85) !important;
}

#monetization-modal .sheet-header h3 {
  color: #fef08a !important;
}

#monetization-modal .close-btn {
  color: #fef08a !important;
}

#monetization-modal .sheet-handle {
  background: rgba(254, 240, 138, 0.4) !important;
}

.deluxe-creator-promo-box {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.12) 0%, rgba(180, 83, 9, 0.18) 100%);
  border: 1.5px solid #ca8a04;
  border-radius: 12px;
  padding: 14px;
  margin-top: 18px;
  text-align: center;
}

.deluxe-promo-header {
  font-size: 0.85rem;
  color: #fef08a;
  margin-bottom: 4px;
}

.deluxe-promo-desc {
  font-size: 0.78rem;
  color: #d4d4d8;
  margin-bottom: 10px;
  line-height: 1.4;
}

.btn-deluxe-promo {
  background: linear-gradient(135deg, #facc15 0%, #d97706 100%);
  color: #18181b;
  border: 1px solid #fef08a;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(234, 179, 8, 0.35);
}

.monetization-content-wrapper {
  padding: 10px 4px 20px 4px;
}

.monetization-tier-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 18px;
}

.tier-card {
  border-radius: 14px;
  padding: 16px 14px;
  text-align: left;
  position: relative;
}

.tier-card.free-tier {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.tier-card.free-tier .tier-name {
  color: #f4f4f5;
}

.tier-card.free-tier .tier-price {
  color: #e4e4e7;
}

.tier-card.free-tier .tier-features {
  color: #d4d4d8;
}

.tier-card.free-tier .tier-badge {
  color: #a1a1aa;
}

.tier-card.deluxe-tier {
  background: linear-gradient(145deg, #1c1917 0%, #0c0a09 100%);
  border: 2px solid #eab308;
  box-shadow: 0 8px 30px rgba(234, 179, 8, 0.25);
}

.tier-badge {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #a1a1aa;
}

.tier-badge-vip {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #18181b;
  background: #facc15;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 4px;
}

.tier-name {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 4px 0;
  color: #ffffff;
}

.tier-price {
  font-size: 1.35rem;
  font-weight: 900;
  color: #fef08a;
  margin-bottom: 10px;
}

.tier-price span {
  font-size: 0.75rem;
  color: #a1a1aa;
  font-weight: 400;
}

.tier-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.8rem;
  color: #d4d4d8;
  line-height: 1.4;
}

.monetization-faq {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
}

.monetization-faq h4 {
  font-size: 0.88rem;
  color: #fef08a;
  margin: 0 0 8px 0;
}

.monetization-faq p {
  font-size: 0.8rem;
  color: #a1a1aa;
  margin: 0;
  line-height: 1.5;
}

/* ==========================================================================
   WIDGET CALCULADOR DE PRECIOS DINÁMICO & PERSONALIZACIÓN VIP AVANZADA
   ========================================================================== */
.price-calculator-wrapper {
  margin: 10px 0 20px 0;
}

.calc-pricing-card {
  background: var(--card-bg, rgba(255, 255, 255, 0.88));
  border: 1.5px solid var(--primary, #ca8a04);
  border-radius: 16px;
  padding: 16px 14px;
  box-shadow: 0 10px 30px -5px var(--primary-glow, rgba(244, 63, 94, 0.2)), inset 0 0 15px rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.calc-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.calc-title-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.calc-icon {
  font-size: 1.4rem;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
}

.calc-heading {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-main, #18181b);
  margin: 0;
  line-height: 1.2;
}

.calc-subheading {
  font-size: 0.72rem;
  color: var(--text-muted, #71717a);
  margin: 2px 0 0 0;
}

/* Badges de Precios */
.calc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.8px;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.calc-badge-free {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border: 1px solid #a7f3d0;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

.calc-badge-vip {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff;
  border: 1px solid #fef08a;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.45);
  animation: vipPulseGlow 2.5s infinite alternate;
}

@keyframes vipPulseGlow {
  0% { transform: scale(1); box-shadow: 0 0 8px rgba(245, 158, 11, 0.3); }
  100% { transform: scale(1.03); box-shadow: 0 0 16px rgba(245, 158, 11, 0.6); }
}

/* Área de Precio Principal */
.calc-price-hero {
  text-align: center;
  padding: 12px 10px 14px 10px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 12px;
  margin-bottom: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

body[data-theme="midnight"] .calc-price-hero {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.calc-amount-wrapper {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}

.calc-currency {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary, #f59e0b);
}

.calc-price-val {
  font-size: 2.1rem;
  font-weight: 900;
  color: var(--text-main, #18181b);
  letter-spacing: -0.5px;
  line-height: 1;
}

.calc-currency-code {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-muted, #71717a);
  margin-left: 4px;
}

.calc-tier-subtitle {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted, #71717a);
  margin-top: 4px;
}

/* Desglose de características */
.calc-features-breakdown {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  border-top: 1px dashed var(--card-border, rgba(0, 0, 0, 0.1));
  padding-top: 10px;
}

.calc-feature-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.76rem;
  color: var(--text-main, #3f3f46);
  padding: 3px 0;
}

.calc-feature-icon {
  margin-right: 6px;
  font-size: 0.95rem;
}

.calc-feature-name {
  flex: 1;
  text-align: left;
  font-weight: 500;
}

.calc-feature-price {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.calc-feature-price.price-free {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.calc-feature-price.price-demo {
  background: rgba(234, 179, 8, 0.12);
  color: #b45309;
  border: 1px solid rgba(234, 179, 8, 0.3);
}

.calc-feature-price.price-vip {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, rgba(217, 119, 6, 0.22) 100%);
  color: #b45309;
  border: 1px solid #facc15;
}

body[data-theme="midnight"] .calc-feature-price.price-free {
  color: #34d399;
}
body[data-theme="midnight"] .calc-feature-price.price-demo,
body[data-theme="midnight"] .calc-feature-price.price-vip {
  color: #fde047;
}

/* Callout de Previsualización Gratuita */
.calc-preview-callout {
  background: rgba(245, 158, 11, 0.08);
  border: 1px dashed var(--primary, #f59e0b);
  border-radius: 12px;
  padding: 10px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.calc-preview-text {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  color: var(--text-muted, #78350f);
  line-height: 1.35;
  text-align: left;
}

.calc-eye-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.btn-calc-live-preview {
  background: linear-gradient(135deg, var(--primary, #f59e0b) 0%, var(--primary-dark, #d97706) 100%);
  color: #ffffff;
  border: 1px solid var(--primary-light, #fef08a);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px var(--primary-glow, rgba(245, 158, 11, 0.4));
  transition: all 0.25s ease;
  width: 100%;
}

.btn-calc-live-preview:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px var(--primary-glow, rgba(245, 158, 11, 0.55));
}

.btn-calc-live-preview:active {
  transform: scale(0.98);
}

/* ==========================================================================
   TARJETAS DE PERSONALIZACIÓN VIP AVANZADA
   ========================================================================== */
#group-vip-customization {
  margin-top: 14px;
}

.vip-custom-main-header {
  margin-bottom: 12px;
}

.vip-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vip-crown-badge {
  font-size: 1.4rem;
  filter: drop-shadow(0 2px 6px rgba(245, 158, 11, 0.4));
}

.vip-custom-cards-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vip-subcard {
  background: var(--card-bg, rgba(255, 255, 255, 0.85));
  border: 1.5px solid var(--card-border, rgba(0, 0, 0, 0.1));
  border-radius: 14px;
  padding: 14px 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.vip-subcard-highlighted {
  border-color: var(--primary, #ca8a04) !important;
  box-shadow: 0 6px 20px var(--primary-glow, rgba(244, 63, 94, 0.25)) !important;
  transform: translateY(-1px);
}

.vip-subcard-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 0.88rem;
  color: var(--text-main, #18181b);
}

.vip-pill-icon {
  font-size: 1.1rem;
}

.vip-pill-tag {
  margin-left: auto;
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.35);
  padding: 2px 7px;
  border-radius: 999px;
}

body[data-theme="midnight"] .vip-pill-tag {
  color: #fde047;
}

.vip-subcard-desc {
  font-size: 0.74rem;
  color: var(--text-muted, #71717a);
  margin: 0 0 10px 0;
  line-height: 1.35;
}

.vip-input-field {
  margin-bottom: 8px;
}

.vip-field-label {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-main, #27272a);
  margin-bottom: 3px;
}

.vip-voucher-item-box {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 8px;
}

body[data-theme="midnight"] .vip-voucher-item-box {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

.vip-voucher-item-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  color: var(--text-main, #18181b);
  margin-bottom: 6px;
}

.voucher-mini-badge {
  background: var(--primary, #f59e0b);
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
}

/* ==========================================================================
   ESTILOS HUD ARCADE & ESTRELLA CÓSMICA
   ========================================================================== */
.arcade-hud-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  margin: 2px auto 4px auto;
  font-family: 'Press Start 2P', monospace, sans-serif;
  font-size: 0.58rem;
  color: #38bdf8;
  text-shadow: 0 0 6px #06b6d4;
  letter-spacing: 0.5px;
  z-index: 4;
  position: relative;
}

.arcade-vault-hud {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 4px;
  font-family: monospace;
  font-size: 0.72rem;
  color: #38bdf8;
  text-shadow: 0 0 6px #06b6d4;
}

.galaxy-constellation-tag {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(129, 140, 248, 0.45);
  border-radius: 999px;
  padding: 3px 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: #e2e8f0;
  box-shadow: 0 0 12px rgba(129, 140, 248, 0.35);
  white-space: nowrap;
  z-index: 5;
  backdrop-filter: blur(4px);
}

.constellation-star-name {
  color: #fde047;
  font-weight: 800;
}

/* ==========================================================================
   1. MODO PROPIETARIO EXCLUSIVO (ALL-INCLUSIVE MASTER EDITION)
   ========================================================================== */
.header-crown-trigger {
  cursor: pointer;
  display: inline-block;
  font-size: 1.15rem;
  margin-left: 6px;
  vertical-align: middle;
  transition: transform 0.25s ease, filter 0.25s ease;
  user-select: none;
}

.header-crown-trigger:hover {
  transform: scale(1.25) rotate(8deg);
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.7));
}

.owner-mode-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, rgba(217, 119, 6, 0.25) 100%);
  border: 1.5px solid #f59e0b;
  border-radius: 12px;
  padding: 10px 14px;
  margin: 8px 12px 14px 12px;
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.25);
  animation: ownerBarGlow 3s infinite alternate;
}

@keyframes ownerBarGlow {
  0% { box-shadow: 0 0 10px rgba(245, 158, 11, 0.2); }
  100% { box-shadow: 0 0 22px rgba(245, 158, 11, 0.45); }
}

.owner-badge-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.owner-crown-pulse {
  font-size: 1.25rem;
  animation: pulseCrown 1.6s infinite ease-in-out;
}

@keyframes pulseCrown {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2) rotate(6deg); }
}

.owner-badge-text {
  font-size: 0.78rem;
  font-weight: 800;
  color: #b45309;
  letter-spacing: 0.4px;
}

body[data-theme="midnight"] .owner-badge-text {
  color: #fde047;
}

.owner-mode-toggle-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(255, 255, 255, 0.6);
  padding: 6px 10px;
  border-radius: 8px;
}

body[data-theme="midnight"] .owner-mode-toggle-box {
  background: rgba(15, 23, 42, 0.6);
}

.owner-sim-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
}

.btn-owner-toggle {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.3);
}

.btn-owner-toggle.is-simulating {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
}

.btn-owner-toggle:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

/* ==========================================================================
   2. SELECTOR DE TIERS EN CALCULADOR DE PRECIOS ($1.00 USD MODEL)
   ========================================================================== */
.calc-tiers-selector {
  display: flex;
  gap: 6px;
  margin: 10px 0 14px 0;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.calc-tiers-selector::-webkit-scrollbar {
  display: none;
}

.calc-tier-chip {
  flex: 1;
  min-width: 82px;
  background: rgba(255, 255, 255, 0.75);
  border: 1.5px solid var(--card-border, rgba(0, 0, 0, 0.12));
  border-radius: 10px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-align: center;
}

body[data-theme="midnight"] .calc-tier-chip {
  background: rgba(30, 27, 75, 0.7);
}

.calc-tier-chip:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
}

.calc-tier-chip.active {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.2) 100%);
  border-color: var(--primary, #f59e0b);
  box-shadow: 0 4px 12px var(--primary-glow, rgba(245, 158, 11, 0.25));
  transform: scale(1.03);
}

.tier-chip-name {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

.tier-chip-val {
  font-size: 0.85rem;
  font-weight: 900;
  color: var(--text-main);
  margin-top: 1px;
}

/* ==========================================================================
   3. WIDGET DE REPRODUCTOR DE MÚSICA (YOUTUBE / SPOTIFY)
   ========================================================================== */
.hub-music-player-widget {
  width: 100%;
  max-width: 580px;
  margin: 12px auto 16px auto;
  padding: 0 14px;
}

.custom-music-player-box {
  background: var(--card-bg, rgba(255, 255, 255, 0.85));
  border: 1.5px solid var(--card-border, rgba(0, 0, 0, 0.12));
  border-radius: 16px;
  padding: 10px 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.custom-music-player-box.yt-box {
  border-color: rgba(239, 68, 68, 0.35);
}

.custom-music-player-box.sp-box {
  border-color: rgba(16, 185, 129, 0.35);
}

.player-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.player-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-main);
}

.player-icon {
  font-size: 1.1rem;
}

.provider-pill {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
}

.provider-pill.yt {
  background: #ef4444;
  color: #ffffff;
}

.provider-pill.sp {
  background: #10b981;
  color: #ffffff;
}

.btn-player-mini {
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid var(--card-border, rgba(0, 0, 0, 0.1));
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

body[data-theme="midnight"] .btn-player-mini {
  background: rgba(255, 255, 255, 0.08);
}

.btn-player-mini:hover {
  background: var(--primary);
  color: #ffffff;
}

.yt-embed-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #000000;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4);
}

.yt-embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.yt-local-card-wrapper {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.yt-card-cover-box {
  position: relative;
  width: 100%;
  height: 220px;
  background: #000000;
  overflow: hidden;
}

.yt-card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
  transition: transform 0.4s ease;
}

.yt-card-cover-box:hover .yt-card-thumb {
  transform: scale(1.03);
}

.yt-card-glass-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  padding: 16px;
  text-align: center;
}

.btn-play-yt-pulse {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  text-decoration: none;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.6);
  margin-bottom: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: pulsePlayBtn 1.8s infinite;
}

.btn-play-yt-pulse:hover {
  transform: scale(1.1);
  box-shadow: 0 0 28px rgba(239, 68, 68, 0.85);
}

@keyframes pulsePlayBtn {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  70% { box-shadow: 0 0 0 14px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.yt-card-main-title {
  color: #ffffff;
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.3px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.yt-card-sub-info {
  color: #f4f4f5;
  font-size: 0.74rem;
  margin-top: 3px;
  opacity: 0.9;
}

.btn-try-embed-anyway {
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 0.68rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-try-embed-anyway:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Acciones del reproductor de música y fallback de YouTube */
.player-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-open-yt-external {
  font-size: 0.68rem;
  font-weight: 700;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  padding: 3px 8px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-open-yt-external:hover {
  background: #ef4444;
  color: #ffffff;
}

.yt-fallback-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 8px;
  font-size: 0.74rem;
  color: var(--text-muted);
}

.yt-fallback-text {
  display: flex;
  align-items: center;
  gap: 6px;
}

.yt-info-icon {
  font-size: 0.9rem;
}

.yt-direct-link {
  font-weight: 800;
  color: #ef4444;
  text-decoration: none;
  padding: 4px 10px;
  background: rgba(239, 68, 68, 0.12);
  border-radius: 6px;
  transition: all 0.2s ease;
}

.yt-direct-link:hover {
  background: #ef4444;
  color: #ffffff;
}

/* ==========================================================================
   Grabadora de Voz y Gestor de Audio del Cassette VIP
   ========================================================================== */
.cassette-recorder-box {
  margin-top: 12px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--card-border, rgba(0, 0, 0, 0.08));
  border-radius: 12px;
  padding: 14px;
}

body[data-theme="midnight"] .cassette-recorder-box {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

.recorder-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.btn-recorder-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

.btn-recorder-action.btn-record {
  background: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(225, 29, 72, 0.35);
}

.btn-recorder-action.btn-record:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(225, 29, 72, 0.45);
}

.btn-recorder-action.btn-stop {
  background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.35);
  animation: pulseRecordingBtn 1.2s infinite;
}

@keyframes pulseRecordingBtn {
  0% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(234, 88, 12, 0); }
  100% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0); }
}

.recording-live-indicator {
  margin-top: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #ef4444;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pulse-rec-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  animation: pulseRecDot 1s infinite;
  display: inline-block;
}

@keyframes pulseRecDot {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); transform: scale(0.95); }
  70% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); transform: scale(1.15); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); transform: scale(0.95); }
}

.recorder-or-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 12px 0;
  color: var(--text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.recorder-or-divider::before,
.recorder-or-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px dashed var(--card-border, rgba(0, 0, 0, 0.12));
}

.recorder-or-divider span {
  padding: 0 8px;
}

.btn-recorder-upload {
  display: block;
  text-align: center;
  padding: 10px 14px;
  background: var(--input-bg, rgba(255, 255, 255, 0.8));
  border: 1.5px dashed var(--primary);
  border-radius: 10px;
  color: var(--text-main);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-recorder-upload:hover {
  background: rgba(244, 63, 94, 0.08);
  border-color: var(--primary);
}

.uploaded-filename {
  display: block;
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--primary);
  font-weight: 600;
}

.recorder-preview-wrap {
  margin-top: 14px;
  padding: 12px;
  background: rgba(16, 185, 129, 0.08);
  border: 1.5px solid rgba(16, 185, 129, 0.35);
  border-radius: 10px;
}

.preview-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.badge-audio-ready {
  font-size: 0.78rem;
  font-weight: 700;
  color: #10b981;
}

.btn-delete-voice {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-delete-voice:hover {
  background: #ef4444;
  color: #ffffff;
}

/* ==========================================================================
   4. MÓDULO CANDADO SECRETO / MINI QUIZ ("Secret Love Lock")
   ========================================================================== */
.secret-lock-module {
  margin: 24px auto;
  max-width: 580px;
}

.secret-lock-card {
  background: var(--card-bg, rgba(255, 255, 255, 0.88));
  border: 1.5px solid var(--card-border, rgba(244, 63, 94, 0.2));
  border-radius: 20px;
  padding: 22px 18px;
  box-shadow: 0 12px 36px -6px var(--primary-glow, rgba(244, 63, 94, 0.2));
  text-align: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}

.lock-graphic-container {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.lock-icon-halo {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.25) 0%, rgba(245, 158, 11, 0.03) 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.35);
  border: 1.5px solid rgba(245, 158, 11, 0.4);
}

.secret-lock-svg {
  width: 36px;
  height: 36px;
  color: #f59e0b;
  filter: drop-shadow(0 2px 6px rgba(245, 158, 11, 0.4));
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
}

.lock-shackle {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: 7px 11px;
}

.secret-lock-svg.unlocked {
  color: #10b981;
  filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.6));
}

.secret-lock-svg.unlocked .lock-shackle {
  transform: translateY(-5px) rotate(-35deg);
}

.secret-lock-svg.shake-error {
  animation: lockShake 0.5s ease-in-out;
  color: #ef4444;
}

@keyframes lockShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px) rotate(-6deg); }
  40%, 80% { transform: translateX(8px) rotate(6deg); }
}

.quiz-question-box {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--card-border, rgba(0, 0, 0, 0.08));
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

body[data-theme="midnight"] .quiz-question-box {
  background: rgba(255, 255, 255, 0.05);
}

.quiz-q-badge {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--primary);
  display: block;
  margin-bottom: 4px;
}

.quiz-question-text {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
  line-height: 1.4;
}

.quiz-form-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 480px) {
  .quiz-form-row {
    flex-direction: row;
  }
  .quiz-input {
    flex: 1;
  }
}

.quiz-input {
  text-align: center;
  font-size: 0.92rem;
  border-radius: 10px;
}

.btn-quiz-unlock {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 12px 18px;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px var(--primary-glow);
  transition: all 0.25s ease;
  white-space: nowrap;
}

.btn-quiz-unlock:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

.quiz-feedback-box {
  margin-top: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 8px;
}

.quiz-feedback-box.error {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.quiz-revealed-panel {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(217, 119, 6, 0.14) 100%);
  border: 2px solid #f59e0b;
  border-radius: 16px;
  padding: 16px 14px;
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.25);
}

.quiz-revealed-panel.revealed-animate {
  animation: revealSecret 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes revealSecret {
  0% { opacity: 0; transform: scale(0.9) translateY(15px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.quiz-revealed-badge {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.8px;
  color: #b45309;
  margin-bottom: 6px;
}

body[data-theme="midnight"] .quiz-revealed-badge {
  color: #fde047;
}

.quiz-revealed-heading {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 10px 0;
}

.quiz-secret-message-box {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  border-left: 3px solid #f59e0b;
  font-style: italic;
}

body[data-theme="midnight"] .quiz-secret-message-box {
  background: rgba(15, 23, 42, 0.7);
}

.quiz-revealed-date-tag {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* ==========================================================================
   5. MÓDULO CONTADOR DE TIEMPO / RELOJ DE AMOR ("Love & Moments Counter")
   ========================================================================== */
.love-counter-module {
  margin: 24px auto;
  max-width: 580px;
}

.counter-main-card {
  background: var(--card-bg, rgba(255, 255, 255, 0.88));
  border: 1.5px solid var(--card-border, rgba(244, 63, 94, 0.2));
  border-radius: 20px;
  padding: 20px 16px;
  box-shadow: 0 12px 36px -6px var(--primary-glow, rgba(244, 63, 94, 0.2));
  text-align: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.counter-header-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 4px;
}

.counter-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulseDot 1.5s infinite;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.3); }
}

.counter-since-tag {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-bottom: 16px;
  font-weight: 600;
}

.counter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.counter-unit-box {
  background: rgba(255, 255, 255, 0.75);
  border: 1.5px solid var(--card-border, rgba(0, 0, 0, 0.1));
  border-radius: 14px;
  padding: 10px 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

body[data-theme="midnight"] .counter-unit-box {
  background: rgba(30, 27, 75, 0.65);
}

.counter-num-display {
  font-family: 'Outfit', sans-serif;
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--primary);
  line-height: 1.1;
  text-shadow: 0 2px 8px var(--primary-glow);
}

.counter-num-display.pulse-seconds {
  animation: secondTick 1s infinite cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes secondTick {
  0% { transform: scale(1); }
  10% { transform: scale(1.08); }
  30% { transform: scale(1); }
}

.counter-unit-lbl {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-top: 4px;
}

.counter-quote-footer {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 4px;
}

/* ==========================================================================
   6. MÓDULO SOUVENIR FÍSICO IMPRIMIBLE ("Printable Keepsake Ticket")
   ========================================================================== */
.souvenir-module {
  margin: 28px auto;
  max-width: 600px;
}

.keepsake-ticket {
  background: linear-gradient(135deg, #fffdf5 0%, #fef3c7 50%, #fffbeb 100%);
  border: 2px solid #ca8a04;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 16px 40px -10px rgba(180, 83, 9, 0.28), inset 0 0 20px rgba(254, 240, 138, 0.4);
  position: relative;
  overflow: hidden;
  color: #451a03;
}

.ticket-outer-frame {
  border: 1.5px solid rgba(180, 83, 9, 0.4);
  border-radius: 12px;
  padding: 14px 12px;
  background: rgba(255, 255, 255, 0.45);
}

.ticket-header-banner {
  text-align: center;
  border-bottom: 1.5px dashed rgba(180, 83, 9, 0.35);
  padding-bottom: 10px;
  margin-bottom: 12px;
}

.ticket-crown-icon {
  font-size: 1.4rem;
  margin-bottom: 2px;
}

.ticket-badge-tag {
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 1px;
  color: #b45309;
}

.ticket-main-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.8px;
  color: #78350f;
  margin: 4px 0;
}

.ticket-stars-row {
  color: #d97706;
  font-size: 0.72rem;
  letter-spacing: 4px;
}

.ticket-main-layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

@media (min-width: 520px) {
  .ticket-main-layout {
    flex-direction: row;
    align-items: center;
  }
  .ticket-info-col {
    flex: 1;
  }
  .ticket-stub-col {
    border-left: 1.5px dashed rgba(180, 83, 9, 0.4);
    padding-left: 14px;
  }
}

.ticket-info-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ticket-field-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.78rem;
}

.field-lbl {
  font-weight: 800;
  color: #92400e;
  font-size: 0.68rem;
  letter-spacing: 0.5px;
}

.field-val {
  color: #451a03;
  font-size: 0.88rem;
}

.ticket-dedication-box {
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.7);
  border-left: 2px solid #b45309;
  border-radius: 4px;
  padding: 6px 10px;
}

.ticket-dedication-box p {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 0.8rem;
  font-style: italic;
  margin: 0;
  color: #78350f;
  line-height: 1.4;
}

.ticket-stub-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.ticket-qr-frame {
  background: #ffffff;
  padding: 6px;
  border-radius: 8px;
  border: 1px solid rgba(180, 83, 9, 0.35);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.souvenir-qr-container {
  width: 104px;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.souvenir-qr-container img {
  width: 100% !important;
  height: 100% !important;
}

.ticket-qr-hint {
  font-size: 0.62rem;
  font-weight: 700;
  color: #92400e;
  max-width: 120px;
  line-height: 1.2;
}

.ticket-serial-num {
  font-family: monospace;
  font-size: 0.68rem;
  font-weight: 800;
  color: #b45309;
  letter-spacing: 0.5px;
}

.ticket-watermark-row {
  border-top: 1.5px dashed rgba(180, 83, 9, 0.35);
  margin-top: 10px;
  padding-top: 8px;
  text-align: center;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #92400e;
}

.ticket-cut-guide {
  display: none;
}

.souvenir-actions-bar {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.btn-print-souvenir {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(180, 83, 9, 0.35);
  font-weight: 800;
}

.btn-print-souvenir:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

/* ==========================================================================
   7. REGLAS @media print (IMPRESIÓN EXCLUSIVA DEL SOUVENIR)
   ========================================================================== */
@media print {
  /* Ocultar toda la interfaz visual ordinaria */
  *, *::before, *::after {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    background: #ffffff !important;
    color: #1c1917 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Ocultar todos los elementos salvo el módulo de souvenir */
  header,
  footer,
  nav,
  .screen:not(#screen-hub),
  .hub-header,
  .hero-banner,
  .hub-music-player-widget,
  .bouquet-module,
  .garden-module,
  .cosmic-module,
  .vintage-module,
  .cinema-module,
  .pirate-module,
  .candy-module,
  .arcade-module,
  .letter-module,
  .gallery-module,
  .wishes-module,
  .love-counter-module,
  .secret-lock-module,
  .deluxe-vip-module,
  .recipient-readonly-section,
  .modal-overlay,
  .toast,
  .cinema-flash-strobe,
  .souvenir-actions-bar,
  .section-title,
  .section-subtitle,
  .desktop-shortcut-hint {
    display: none !important;
  }

  #screen-hub {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #module-printable-souvenir {
    display: block !important;
    width: 100% !important;
    max-width: 180mm !important;
    margin: 20mm auto !important;
    padding: 0 !important;
    page-break-inside: avoid !important;
  }

  .keepsake-ticket {
    background: #fffdf5 !important;
    border: 2px dashed #b45309 !important;
    border-radius: 12px !important;
    padding: 12mm !important;
    color: #451a03 !important;
    page-break-inside: avoid !important;
  }

  .ticket-outer-frame {
    background: #ffffff !important;
    border: 1.5px solid #b45309 !important;
  }

  .ticket-cut-guide {
    display: block !important;
    text-align: center !important;
    font-size: 8pt !important;
    font-weight: 800 !important;
    color: #78350f !important;
    margin-bottom: 6mm !important;
    letter-spacing: 0.5px !important;
  }

  .souvenir-qr-container {
    width: 32mm !important;
    height: 32mm !important;
  }

  .souvenir-qr-container img {
    display: block !important;
  }
}

/* ==========================================================================
   ESCENARIOS DE FONDO INMERSIVOS TEMÁTICOS (7 MUNDOS MÁGICOS)
   ========================================================================== */
.thematic-scenery-backdrop {
  position: fixed;
  top: -24px;
  left: -24px;
  right: -24px;
  bottom: -24px;
  width: calc(100vw + 48px);
  height: calc(100vh + 48px);
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  transition: opacity 0.8s ease;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.thematic-scenery-backdrop > div {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 1. JARDÍN FLORAL PRIMAVERAL */
body[data-experience="floral"] .thematic-scenery-backdrop .scenery-layer-sky {
  background: radial-gradient(ellipse at 50% -10%, #fff7ed 0%, #fdf2f8 35%, #fce7f3 70%, #fbcfe8 100%);
}
body[data-experience="floral"] .thematic-scenery-backdrop .scenery-layer-deep {
  background: 
    radial-gradient(circle at 10% 85%, rgba(251, 113, 133, 0.25) 0%, transparent 45%),
    radial-gradient(circle at 90% 80%, rgba(244, 114, 182, 0.28) 0%, transparent 45%),
    radial-gradient(circle at 50% 95%, rgba(52, 211, 153, 0.20) 0%, transparent 55%);
  animation: floralBreezePulse 7s ease-in-out infinite alternate;
}
body[data-experience="floral"] .thematic-scenery-backdrop .scenery-layer-glow {
  position: absolute;
  top: -20vh;
  left: -20vw;
  width: 140vw;
  height: 140vh;
  background: radial-gradient(ellipse at 50% 0%, rgba(254, 240, 138, 0.5) 0%, rgba(253, 164, 175, 0.2) 50%, transparent 80%);
  animation: floralSunbeams 8s ease-in-out infinite alternate;
}
body[data-experience="floral"] .thematic-scenery-backdrop .scenery-layer-horizon {
  background: linear-gradient(to top, rgba(255, 255, 255, 0.65) 0%, transparent 35%);
}

/* 2. ODISEA CÓSMICA / GALAXIA */
body[data-experience="cosmic"] .thematic-scenery-backdrop .scenery-layer-sky {
  background: radial-gradient(ellipse at 50% 30%, #0c0824 0%, #050414 55%, #020108 100%);
}
body[data-experience="cosmic"] .thematic-scenery-backdrop .scenery-layer-deep {
  position: absolute;
  top: -30vh;
  left: -30vw;
  width: 160vw;
  height: 160vh;
  transform-origin: center center;
  background: 
    radial-gradient(ellipse 65% 55% at 75% 25%, rgba(168, 85, 247, 0.45) 0%, rgba(139, 92, 246, 0.18) 35%, transparent 65%),
    radial-gradient(ellipse 60% 60% at 20% 70%, rgba(56, 189, 248, 0.40) 0%, rgba(6, 182, 212, 0.15) 35%, transparent 68%),
    radial-gradient(circle at 50% 50%, rgba(236, 72, 153, 0.28) 0%, rgba(219, 39, 119, 0.12) 30%, transparent 60%);
  filter: blur(25px);
  animation: cosmicNebulaFloat 20s ease-in-out infinite alternate;
}
body[data-experience="cosmic"] .thematic-scenery-backdrop .scenery-layer-glow {
  background: radial-gradient(ellipse at 50% 45%, rgba(129, 140, 248, 0.25) 0%, transparent 75%);
}
body[data-experience="cosmic"] .thematic-scenery-backdrop .scenery-layer-particles {
  background-image: 
    radial-gradient(1.5px 1.5px at 15% 20%, #ffffff 100%, transparent),
    radial-gradient(2px 2px at 85% 15%, #fde047 100%, transparent),
    radial-gradient(1.5px 1.5px at 45% 35%, #38bdf8 100%, transparent),
    radial-gradient(2px 2px at 70% 65%, #c084fc 100%, transparent),
    radial-gradient(1.5px 1.5px at 25% 85%, #f472b6 100%, transparent),
    radial-gradient(2.5px 2.5px at 90% 75%, #ffffff 100%, transparent),
    radial-gradient(1.5px 1.5px at 35% 10%, #fde047 100%, transparent),
    radial-gradient(2px 2px at 60% 90%, #38bdf8 100%, transparent);
  background-size: 100% 100%;
  animation: cosmicStarsTwinkle 3s ease-in-out infinite alternate;
}
body[data-experience="cosmic"] .thematic-scenery-backdrop .scenery-layer-vignette {
  background: radial-gradient(circle at 50% 50%, transparent 45%, rgba(0, 0, 0, 0.65) 100%);
}

/* 3. CARTA VINTAGE / ESTUDIO EPISTOLAR 1920 */
body[data-experience="vintage_letter"] .thematic-scenery-backdrop .scenery-layer-sky {
  background: radial-gradient(ellipse at 50% 42%, #faf3e0 0%, #ecd9b9 45%, #452411 88%, #200f06 100%);
}
body[data-experience="vintage_letter"] .thematic-scenery-backdrop .scenery-layer-deep {
  background: 
    radial-gradient(circle at 15% 15%, rgba(217, 119, 6, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 85% 85%, rgba(180, 83, 9, 0.28) 0%, transparent 50%);
}
body[data-experience="vintage_letter"] .thematic-scenery-backdrop .scenery-layer-glow {
  background: radial-gradient(circle at 80% 20%, rgba(251, 191, 36, 0.38) 0%, rgba(245, 158, 11, 0.15) 45%, transparent 70%);
  animation: vintageLampFlicker 4.5s ease-in-out infinite alternate;
}
body[data-experience="vintage_letter"] .thematic-scenery-backdrop .scenery-layer-vignette {
  box-shadow: inset 0 0 100px rgba(42, 20, 8, 0.85), inset 0 0 200px rgba(0, 0, 0, 0.65);
}

/* 4. NOCHE DE CINE HOLLYWOOD GATSBY */
body[data-experience="cinema"] .thematic-scenery-backdrop .scenery-layer-sky {
  background: radial-gradient(ellipse at 50% 100%, #1e1404 0%, #0c0b14 50%, #030307 100%);
}
body[data-experience="cinema"] .thematic-scenery-backdrop .scenery-layer-deep {
  position: absolute;
  top: -35vh;
  left: -35vw;
  width: 170vw;
  height: 170vh;
  transform-origin: 50% 95%;
  background: 
    /* Haz de reflector izquierdo */
    linear-gradient(75deg, transparent 43%, rgba(254, 240, 138, 0.10) 47%, rgba(250, 204, 21, 0.28) 50%, rgba(254, 240, 138, 0.10) 53%, transparent 57%),
    /* Haz de reflector derecho */
    linear-gradient(-75deg, transparent 43%, rgba(254, 240, 138, 0.10) 47%, rgba(250, 204, 21, 0.28) 50%, rgba(254, 240, 138, 0.10) 53%, transparent 57%),
    /* Resplandor áureo en la base de la alfombra roja */
    radial-gradient(ellipse at 50% 95%, rgba(234, 179, 8, 0.30) 0%, rgba(202, 138, 4, 0.12) 35%, transparent 65%);
  filter: blur(10px);
  animation: cinemaSpotlightsSweep 11s ease-in-out infinite alternate;
}
body[data-experience="cinema"] .thematic-scenery-backdrop .scenery-layer-horizon {
  background: linear-gradient(to top, rgba(234, 179, 8, 0.22) 0%, transparent 35%);
}
body[data-experience="cinema"] .thematic-scenery-backdrop .scenery-layer-particles {
  background-image: 
    radial-gradient(2px 2px at 20% 40%, #fde047 100%, transparent),
    radial-gradient(2.5px 2.5px at 80% 30%, #fef08a 100%, transparent),
    radial-gradient(2px 2px at 50% 70%, #ca8a04 100%, transparent),
    radial-gradient(3px 3px at 30% 80%, #ffffff 100%, transparent),
    radial-gradient(2px 2px at 70% 85%, #facc15 100%, transparent);
  background-size: 100% 100%;
  animation: cinemaPaparazziFlash 2.5s infinite;
}

/* 5. TESORO PIRATA */
body[data-experience="pirate"] .thematic-scenery-backdrop .scenery-layer-sky {
  background: radial-gradient(circle at 75% 20%, #1a365d 0%, #0c1a2e 50%, #030812 100%);
}
body[data-experience="pirate"] .thematic-scenery-backdrop .scenery-layer-deep {
  background: 
    radial-gradient(circle at 75% 20%, rgba(254, 243, 199, 0.38) 0%, rgba(56, 189, 248, 0.18) 30%, transparent 65%),
    radial-gradient(circle at 50% 55%, rgba(245, 158, 11, 0.15) 0%, transparent 55%);
}
body[data-experience="pirate"] .thematic-scenery-backdrop .scenery-layer-horizon {
  background: linear-gradient(to top, rgba(12, 74, 110, 0.6) 0%, rgba(14, 116, 144, 0.28) 22%, transparent 45%);
  animation: pirateSeaSway 7s ease-in-out infinite alternate;
}
body[data-experience="pirate"] .thematic-scenery-backdrop .scenery-layer-particles {
  background-image: 
    radial-gradient(2px 2px at 25% 65%, #38bdf8 100%, transparent),
    radial-gradient(2px 2px at 60% 75%, #fde047 100%, transparent),
    radial-gradient(2.5px 2.5px at 80% 60%, #67e8f9 100%, transparent);
  background-size: 100% 100%;
  animation: pirateBioluminescence 4s ease-in-out infinite alternate;
}

/* 6. CHOCOLATERÍA Y PATISSERIE FINA */
body[data-experience="candy"] .thematic-scenery-backdrop .scenery-layer-sky {
  background: radial-gradient(ellipse at 50% 35%, #fff1f2 0%, #ffe4e6 45%, #4c0519 90%, #25020c 100%);
}
body[data-experience="candy"] .thematic-scenery-backdrop .scenery-layer-deep {
  background: 
    radial-gradient(circle at 20% 30%, rgba(251, 113, 133, 0.32) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(244, 63, 94, 0.28) 0%, transparent 55%),
    radial-gradient(circle at 50% 10%, rgba(251, 191, 36, 0.22) 0%, transparent 45%);
  animation: candySweetBreathe 6.5s ease-in-out infinite alternate;
}
body[data-experience="candy"] .thematic-scenery-backdrop .scenery-layer-horizon {
  background: linear-gradient(to top, rgba(136, 19, 55, 0.35) 0%, transparent 40%);
}

/* 7. ARCADE RETRO GAMER */
body[data-experience="arcade"] .thematic-scenery-backdrop .scenery-layer-sky {
  background: linear-gradient(180deg, #070014 0%, #180033 45%, #2d004d 75%, #050010 100%);
}
body[data-experience="arcade"] .thematic-scenery-backdrop .scenery-layer-deep {
  background: radial-gradient(circle at 50% 65%, rgba(236, 72, 153, 0.55) 0%, rgba(147, 51, 234, 0.32) 40%, transparent 65%);
}
body[data-experience="arcade"] .thematic-scenery-backdrop .scenery-layer-horizon {
  background: 
    linear-gradient(rgba(34, 211, 238, 0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.4) 1px, transparent 1px);
  background-size: 40px 40px;
  transform: perspective(280px) rotateX(60deg);
  transform-origin: 50% 100%;
  position: absolute;
  bottom: 0;
  left: -20%;
  width: 140%;
  height: 52%;
  mask-image: linear-gradient(to top, rgba(0,0,0,1) 30%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 30%, transparent 100%);
  animation: synthwaveGridMove 7s linear infinite;
}
body[data-experience="arcade"] .thematic-scenery-backdrop .scenery-layer-glow {
  background: radial-gradient(ellipse at 50% 70%, rgba(236, 72, 153, 0.5) 0%, transparent 60%);
}

/* ==========================================================================
   PANTALLA 0: ESTUDIO DE CREACIÓN & CONFIGURACIÓN INICIAL (4TA PANTALLA)
   ========================================================================== */
.screen-welcome {
  width: 100%;
  max-width: 640px;
  padding: 15px 12px 75px 12px;
  display: none;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  box-sizing: border-box;
}

.screen-welcome.active {
  display: flex !important;
  animation: fadeInScreen 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

body.mode-readonly #screen-welcome,
body.mode-readonly .creator-preview-topbar {
  display: none !important;
}

.welcome-studio-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.welcome-studio-header {
  text-align: center;
  padding: 10px 8px 12px 8px;
}

.welcome-studio-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid var(--card-border);
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--primary-dark);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  margin-bottom: 8px;
}

.badge-sparkle {
  color: #f59e0b;
}

.welcome-studio-title {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.25;
  margin-bottom: 6px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.welcome-studio-subtitle {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.45;
  max-width: 440px;
  margin: 0 auto;
}

/* Tarjetas del Estudio */
.welcome-studio-card {
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 16px;
  box-shadow: var(--card-shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.welcome-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
  padding-bottom: 10px;
}

.welcome-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.4) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}

.welcome-card-header h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 2px;
}

.welcome-card-header p {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.3;
}

.welcome-input-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 440px) {
  .welcome-input-row {
    grid-template-columns: 1fr;
  }
}

.welcome-input-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.welcome-input-group label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-main);
}

/* Grid de Temáticas en Estudio */
.welcome-themes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.welcome-theme-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.65);
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}

.welcome-theme-card:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.85);
}

.welcome-theme-card.active {
  border-color: var(--primary);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 20px -2px var(--primary-glow);
  transform: scale(1.02);
}

.theme-card-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}

.theme-card-info {
  flex: 1;
}

.theme-card-name {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 6px;
}

.theme-card-desc {
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.25;
  margin-top: 2px;
}

.theme-badge-free {
  font-size: 0.62rem;
  font-weight: 800;
  background: #dcfce7;
  color: #166534;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid #86efac;
}

.theme-badge-vip {
  font-size: 0.62rem;
  font-weight: 800;
  background: #fef3c7;
  color: #92400e;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid #fde047;
}

.theme-card-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 900;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.welcome-theme-card.active .theme-card-check {
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 2px 8px var(--primary-glow);
}

/* Plantillas de Dedicatoria Rápida */
.welcome-templates-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.templates-label {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-muted);
}

.btn-template-chip {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.18s ease;
}

.btn-template-chip:hover,
.btn-template-chip:active {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
  transform: scale(1.04);
}

/* Extras Acordeón */
.welcome-extras-details summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.welcome-extras-details summary::-webkit-details-marker {
  display: none;
}
.summary-arrow {
  font-size: 1.1rem;
  color: var(--text-muted);
  transition: transform 0.25s ease;
}
.welcome-extras-details[open] .summary-arrow {
  transform: rotate(180deg);
}

.welcome-extras-content {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

.welcome-submodule-box {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.submodule-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 8px;
}

/* Soporte de contraste para modo oscuro (Midnight) en el Estudio */
body[data-theme="midnight"] .welcome-studio-badge {
  background: rgba(30, 27, 75, 0.85);
  border-color: rgba(129, 140, 248, 0.35);
  color: #a5b4fc;
}

body[data-theme="midnight"] .welcome-theme-card {
  background: rgba(30, 27, 75, 0.7);
  border-color: rgba(129, 140, 248, 0.2);
}

body[data-theme="midnight"] .welcome-theme-card:hover {
  background: rgba(49, 46, 129, 0.85);
}

body[data-theme="midnight"] .welcome-theme-card.active {
  background: rgba(49, 46, 129, 0.95);
  border-color: #818cf8;
  box-shadow: 0 6px 20px -2px rgba(129, 140, 248, 0.4);
}

body[data-theme="midnight"] .welcome-theme-card .theme-card-name {
  color: #f8fafc;
}

body[data-theme="midnight"] .welcome-theme-card .theme-card-desc {
  color: #cbd5e1;
}

body[data-theme="midnight"] .btn-template-chip {
  background: rgba(30, 27, 75, 0.8);
  border-color: rgba(129, 140, 248, 0.3);
  color: #f8fafc;
}

body[data-theme="midnight"] .welcome-submodule-box {
  background: rgba(15, 23, 42, 0.65);
  border-color: rgba(129, 140, 248, 0.2);
}

body[data-theme="midnight"] .welcome-extras-content {
  border-top-color: rgba(255, 255, 255, 0.12);
}

/* Acciones Principales del Estudio */
.welcome-studio-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.btn-welcome-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #ffffff;
  border: none;
  border-radius: 18px;
  padding: 14px 20px;
  cursor: pointer;
  box-shadow: 0 8px 25px -4px var(--primary-glow);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-align: left;
}

.btn-welcome-main:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -4px var(--primary-glow);
}

.btn-welcome-main:active {
  transform: scale(0.98);
}

.btn-welcome-main .action-icon {
  font-size: 1.7rem;
}

.btn-welcome-main .action-texts {
  display: flex;
  flex-direction: column;
}

.btn-welcome-main .action-title {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.btn-welcome-main .action-sub {
  font-size: 0.74rem;
  opacity: 0.92;
  font-weight: 500;
}

.btn-welcome-share {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border: 2px solid var(--primary);
  border-radius: 16px;
  padding: 12px 20px;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--primary-dark);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  text-align: center;
}

.btn-welcome-share:hover {
  background: var(--primary);
  color: #ffffff;
}

/* Barra superior de regreso al Estudio para el Creador */
.creator-preview-topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 15px;
  z-index: 900;
  position: sticky;
  top: 12px;
}

.btn-back-to-studio {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border: 1.5px solid var(--primary);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--primary-dark);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-back-to-studio:hover,
.btn-back-to-studio:active {
  background: var(--primary);
  color: #ffffff;
  transform: scale(1.04);
}

.btn-quick-share-preview {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.82rem;
  font-weight: 800;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-quick-share-preview:hover {
  transform: scale(1.04);
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.5);
}

/* ==========================================================================
   PERGAMINO INTERACTIVO EN CARTA DEL HUB (ENROLLAR / DESPLEGAR)
   ========================================================================== */
.letter-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-letter-toggle-scroll {
  background: rgba(254, 243, 199, 0.7);
  border: 1px solid rgba(217, 119, 6, 0.4);
  color: #92400e;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 6px rgba(180, 83, 9, 0.08);
}

.btn-letter-toggle-scroll:hover,
.btn-letter-toggle-scroll:active {
  background: #fef3c7;
  border-color: #d97706;
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 4px 10px rgba(180, 83, 9, 0.15);
}

.letter-unrolled-body {
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: top center;
}

.letter-card.is-rolled .letter-unrolled-body {
  display: none !important;
}

.letter-rolled-preview {
  padding: 20px 10px;
  cursor: pointer;
  user-select: none;
  animation: floatScroll 3.5s ease-in-out infinite;
}

.rolled-scroll-graphic {
  max-width: 290px;
  margin: 0 auto;
  position: relative;
}

.scroll-rod {
  height: 14px;
  background: linear-gradient(90deg, #78350f 0%, #b45309 20%, #fde047 50%, #b45309 80%, #78350f 100%);
  border-radius: 999px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  position: relative;
}

.scroll-rod::before,
.scroll-rod::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 14px;
  height: 18px;
  background: radial-gradient(circle, #fde047 30%, #b45309 80%, #78350f 100%);
  border-radius: 4px;
  transform: translateY(-50%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.scroll-rod::before { left: -6px; }
.scroll-rod::after { right: -6px; }

.scroll-parchment-body {
  background: linear-gradient(180deg, #fef3c7 0%, #fde68a 50%, #fef3c7 100%);
  border-left: 2px solid #d97706;
  border-right: 2px solid #d97706;
  padding: 24px 16px;
  text-align: center;
  position: relative;
  box-shadow: inset 0 0 20px rgba(180, 83, 9, 0.15);
}

.scroll-ribbon-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, #dc2626 0%, #ef4444 50%, #dc2626 100%);
  transform: translateY(-50%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.scroll-seal-wax {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ef4444 0%, #b91c1c 60%, #7f1d1d 100%);
  box-shadow: 0 6px 14px rgba(185, 28, 28, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.3);
  margin: 0 auto;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #fecaca;
  transition: transform 0.25s ease;
}

.letter-rolled-preview:hover .scroll-seal-wax {
  transform: scale(1.12);
}

.scroll-seal-wax .seal-icon {
  font-size: 1.25rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.scroll-invitation-text {
  margin-top: 14px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #78350f;
  margin-bottom: 0;
}

@keyframes floatScroll {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* ==========================================================================
   POSTAL DIGITAL PARA REDES SOCIALES (HISTORIAS WHATSAPP / INSTAGRAM)
   ========================================================================== */
.postal-story-module {
  margin-top: 26px;
  margin-bottom: 20px;
}

.postal-story-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(254, 249, 240, 0.94) 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.35);
  border-radius: 24px;
  padding: 24px 20px;
  box-shadow: 0 12px 35px rgba(217, 119, 6, 0.12);
  text-align: center;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(12px);
}

.postal-story-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #f59e0b 0%, #ec4899 50%, #8b5cf6 100%);
}

.postal-story-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
}

.postal-story-icon {
  font-size: 1.6rem;
  animation: pulse 2.5s infinite;
}

.postal-story-header h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.22rem;
  font-weight: 800;
  color: var(--text-main, #1e293b);
  margin: 0;
}

.postal-story-text {
  font-size: 0.9rem;
  color: var(--text-muted, #64748b);
  max-width: 440px;
  margin: 0 auto;
  line-height: 1.5;
}

.btn-postal-story {
  background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
  color: #ffffff !important;
  font-weight: 800;
  border-radius: 999px;
  padding: 12px 24px;
  box-shadow: 0 6px 20px rgba(234, 88, 12, 0.35);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-postal-story:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 25px rgba(234, 88, 12, 0.45);
}

.postal-format-btn {
  background: rgba(255, 255, 255, 0.85);
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main, #334155);
  cursor: pointer;
  transition: all 0.2s ease;
}

.postal-format-btn.active {
  background: var(--primary, #e11d48);
  border-color: var(--primary, #e11d48);
  color: #ffffff;
  box-shadow: 0 4px 12px var(--primary-glow, rgba(225, 29, 72, 0.35));
}

/* ==========================================================================
   SISTEMA DE CONTROL FINANCIERO: LIBRO CONTABLE DIGITAL (ACCOUNTING LEDGER)
   ========================================================================== */

/* ==========================================================================
   SEGURIDAD FINANCIERA: EL LIBRO CONTABLE ES 100% INVISIBLE POR DEFECTO
   Nadie (ni clientes que entren a crear un regalo, ni receptores) verá datos contables.
   ÚNICAMENTE visible en el dispositivo del Dueño/Administrador (body.owner-authorized).
   ========================================================================== */
#btn-welcome-open-ledger,
.btn-ledger-badge,
.btn-topbar-ledger,
.btn-open-ledger-shortcut,
.btn-open-ledger-trigger,
#accounting-ledger-modal,
.price-calculator-wrapper,
#group-price-calculator,
#monetization-modal {
  display: none !important;
}

/* Botón de acceso en la cabecera del Estudio de Creación */
.btn-ledger-badge {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(5, 150, 105, 0.18) 100%);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #065f46;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}

.btn-ledger-badge:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}

body[data-theme="midnight"] .btn-ledger-badge {
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(52, 211, 153, 0.5);
  color: #6ee7b7;
}

/* Botón de acceso en la barra superior del creador */
.btn-topbar-ledger {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
  transition: all 0.2s ease;
}

.btn-topbar-ledger:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.45);
}

/* Botón atajo en la tarjeta 7 del calculador */
.btn-open-ledger-shortcut {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(5, 150, 105, 0.18) 100%);
  border: 1.5px dashed #10b981;
  color: #065f46;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 9px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-open-ledger-shortcut:hover {
  background: #10b981;
  color: #ffffff;
  border-style: solid;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
}

body[data-theme="midnight"] .btn-open-ledger-shortcut {
  color: #6ee7b7;
  border-color: #34d399;
}

/* Contenedor del modal del libro contable */
.ledger-bottom-sheet {
  background: var(--card-bg, #ffffff) !important;
  border: 1.5px solid var(--card-border, rgba(0, 0, 0, 0.12)) !important;
  border-radius: 24px 24px 0 0 !important;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.25) !important;
}

@media (min-width: 681px) {
  .ledger-bottom-sheet {
    border-radius: 24px !important;
  }
}

body[data-theme="midnight"] .ledger-bottom-sheet {
  background: #0f172a !important;
  border-color: rgba(52, 211, 153, 0.3) !important;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.85) !important;
}

/* Grid de KPIs Financieros */
.ledger-kpis-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

@media (min-width: 520px) {
  .ledger-kpis-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.ledger-kpi-card {
  background: rgba(255, 255, 255, 0.7);
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
  backdrop-filter: blur(8px);
}

.ledger-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.ledger-kpi-card.kpi-total {
  border-color: rgba(16, 185, 129, 0.4);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(5, 150, 105, 0.12) 100%);
}

.ledger-kpi-card.kpi-today {
  border-color: rgba(245, 158, 11, 0.4);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(217, 119, 6, 0.12) 100%);
}

.ledger-kpi-card.kpi-month {
  border-color: rgba(59, 130, 246, 0.4);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(37, 99, 235, 0.12) 100%);
}

.ledger-kpi-card.kpi-count {
  border-color: rgba(139, 92, 246, 0.4);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(124, 58, 237, 0.12) 100%);
}

body[data-theme="midnight"] .ledger-kpi-card {
  background: rgba(30, 41, 59, 0.7);
  border-color: rgba(255, 255, 255, 0.1);
}

body[data-theme="midnight"] .ledger-kpi-card.kpi-total {
  background: rgba(6, 78, 59, 0.3);
  border-color: rgba(52, 211, 153, 0.4);
}

body[data-theme="midnight"] .ledger-kpi-card.kpi-today {
  background: rgba(120, 53, 15, 0.3);
  border-color: rgba(251, 191, 36, 0.4);
}

body[data-theme="midnight"] .ledger-kpi-card.kpi-month {
  background: rgba(30, 58, 138, 0.3);
  border-color: rgba(96, 165, 250, 0.4);
}

body[data-theme="midnight"] .ledger-kpi-card.kpi-count {
  background: rgba(76, 29, 149, 0.3);
  border-color: rgba(167, 139, 250, 0.4);
}

.kpi-icon-badge {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.kpi-content {
  display: flex;
  flex-direction: column;
}

.kpi-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #64748b);
}

body[data-theme="midnight"] .kpi-label {
  color: #94a3b8;
}

.kpi-value {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--text-main, #0f172a);
  line-height: 1.2;
  margin: 2px 0 1px;
}

body[data-theme="midnight"] .kpi-value {
  color: #f8fafc;
}

.kpi-subtext {
  font-size: 0.64rem;
  color: var(--text-muted, #94a3b8);
}

/* Barra de Herramientas */
.ledger-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.btn-ledger-primary {
  flex: 1;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
  transition: all 0.2s ease;
}

.btn-ledger-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.45);
}

.btn-ledger-secondary {
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-main, #1e293b);
  border: 1.5px solid var(--card-border, rgba(0, 0, 0, 0.12));
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}

body[data-theme="midnight"] .btn-ledger-secondary {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(255, 255, 255, 0.15);
  color: #f8fafc;
}

.btn-ledger-secondary:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  transform: translateY(-1px);
}

body[data-theme="midnight"] .btn-ledger-secondary:hover {
  background: rgba(51, 65, 85, 0.8);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Panel del Formulario Manual */
.ledger-form-panel {
  background: rgba(16, 185, 129, 0.04);
  border: 1.5px solid rgba(16, 185, 129, 0.3);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 20px;
  animation: fadeInDown 0.3s ease;
}

body[data-theme="midnight"] .ledger-form-panel {
  background: rgba(6, 78, 59, 0.2);
  border-color: rgba(52, 211, 153, 0.35);
}

.ledger-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.ledger-form-header h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-main, #0f172a);
}

body[data-theme="midnight"] .ledger-form-header h4 {
  color: #f8fafc;
}

.ledger-form-tag {
  font-size: 0.66rem;
  font-weight: 800;
  background: rgba(16, 185, 129, 0.15);
  color: #065f46;
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

body[data-theme="midnight"] .ledger-form-tag {
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.25);
}

.ledger-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 500px) {
  .ledger-form-grid {
    grid-template-columns: 1fr 1fr;
  }
  .ledger-form-group.full-width {
    grid-column: span 2;
  }
}

.ledger-form-group {
  display: flex;
  flex-direction: column;
}

.ledger-label {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-main, #334155);
  margin-bottom: 4px;
}

body[data-theme="midnight"] .ledger-label {
  color: #cbd5e1;
}

.ledger-input-prefix-box {
  position: relative;
  display: flex;
  align-items: center;
}

.currency-prefix {
  position: absolute;
  left: 12px;
  font-weight: 900;
  color: #10b981;
  font-size: 0.95rem;
  pointer-events: none;
}

.ledger-input-amount {
  padding-left: 28px !important;
  font-weight: 800;
  font-size: 1rem !important;
  color: #065f46 !important;
}

body[data-theme="midnight"] .ledger-input-amount {
  color: #6ee7b7 !important;
}

.ledger-form-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.btn-ledger-save {
  flex: 1;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.3);
}

.btn-ledger-save:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.btn-ledger-cancel {
  background: transparent;
  color: var(--text-muted, #64748b);
  border: 1px solid var(--card-border, rgba(0, 0, 0, 0.15));
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-ledger-cancel:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-main, #0f172a);
}

body[data-theme="midnight"] .btn-ledger-cancel {
  color: #94a3b8;
  border-color: rgba(255, 255, 255, 0.15);
}

/* Encabezado y Filtros de la Tabla */
.ledger-table-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 8px;
}

.table-title-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ledger-section-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text-main, #1e293b);
}

body[data-theme="midnight"] .ledger-section-title {
  color: #f1f5f9;
}

.ledger-count-pill {
  font-size: 0.68rem;
  font-weight: 800;
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-muted, #64748b);
  padding: 2px 8px;
  border-radius: 999px;
}

body[data-theme="midnight"] .ledger-count-pill {
  background: rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
}

.ledger-filter-box {
  display: flex;
  align-items: center;
  gap: 6px;
}

.filter-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted, #64748b);
}

body[data-theme="midnight"] .filter-label {
  color: #94a3b8;
}

.ledger-select-mini {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--card-border, rgba(0, 0, 0, 0.15));
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-main, #1e293b);
  cursor: pointer;
}

body[data-theme="midnight"] .ledger-select-mini {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.15);
  color: #f8fafc;
}

/* Tabla de Movimientos */
.ledger-table-responsive-container {
  background: rgba(255, 255, 255, 0.6);
  border: 1.5px solid var(--card-border, rgba(0, 0, 0, 0.08));
  border-radius: 16px;
  overflow-x: auto;
  max-height: 380px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.02);
}

body[data-theme="midnight"] .ledger-table-responsive-container {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(255, 255, 255, 0.1);
}

.ledger-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  text-align: left;
}

.ledger-table thead {
  background: rgba(0, 0, 0, 0.03);
  position: sticky;
  top: 0;
  z-index: 2;
  backdrop-filter: blur(4px);
}

body[data-theme="midnight"] .ledger-table thead {
  background: rgba(30, 41, 59, 0.8);
}

.ledger-table th {
  padding: 10px 12px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #64748b);
  border-bottom: 1px solid var(--card-border, rgba(0, 0, 0, 0.08));
  white-space: nowrap;
}

body[data-theme="midnight"] .ledger-table th {
  color: #94a3b8;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.ledger-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  color: var(--text-main, #1e293b);
  vertical-align: middle;
}

body[data-theme="midnight"] .ledger-table td {
  border-bottom-color: rgba(255, 255, 255, 0.05);
  color: #f1f5f9;
}

.ledger-table tr:hover {
  background: rgba(16, 185, 129, 0.04);
}

body[data-theme="midnight"] .ledger-table tr:hover {
  background: rgba(16, 185, 129, 0.1);
}

/* Badges de Métodos de Pago */
.badge-method {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  white-space: nowrap;
}

.badge-method.badge-yappy {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.2) 100%);
  color: #065f46;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

body[data-theme="midnight"] .badge-method.badge-yappy {
  color: #6ee7b7;
  border-color: rgba(52, 211, 153, 0.5);
}

.badge-method.badge-card {
  background: rgba(59, 130, 246, 0.12);
  color: #1e40af;
  border: 1px solid rgba(59, 130, 246, 0.35);
}

body[data-theme="midnight"] .badge-method.badge-card {
  color: #93c5fd;
}

.badge-method.badge-ach {
  background: rgba(139, 92, 246, 0.12);
  color: #5b21b6;
  border: 1px solid rgba(139, 92, 246, 0.35);
}

body[data-theme="midnight"] .badge-method.badge-ach {
  color: #c4b5fd;
}

.badge-method.badge-cash {
  background: rgba(245, 158, 11, 0.12);
  color: #92400e;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

body[data-theme="midnight"] .badge-method.badge-cash {
  color: #fde68a;
}

.ledger-amount-pill {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: 0.92rem;
  color: #059669;
}

body[data-theme="midnight"] .ledger-amount-pill {
  color: #34d399;
}

.btn-ledger-delete-row {
  background: transparent;
  border: none;
  color: var(--text-muted, #94a3b8);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.btn-ledger-delete-row:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
  transform: scale(1.15);
}

/* Estado Vacío de la Tabla */
.ledger-empty-box {
  padding: 36px 20px;
  text-align: center;
}

.ledger-empty-box .empty-icon {
  font-size: 2.2rem;
  margin-bottom: 8px;
  opacity: 0.8;
}

.ledger-empty-box h5 {
  margin: 0 0 6px;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-main, #1e293b);
}

body[data-theme="midnight"] .ledger-empty-box h5 {
  color: #f8fafc;
}

.ledger-empty-box p {
  margin: 0 auto;
  max-width: 360px;
  font-size: 0.78rem;
  color: var(--text-muted, #64748b);
  line-height: 1.45;
}

body[data-theme="midnight"] .ledger-empty-box p {
  color: #94a3b8;
}

/* Pie del Libro Contable */
.ledger-footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  flex-wrap: wrap;
  gap: 10px;
}

.ledger-tip {
  font-size: 0.68rem;
  color: var(--text-muted, #64748b);
  max-width: 420px;
  line-height: 1.35;
}

body[data-theme="midnight"] .ledger-tip {
  color: #94a3b8;
}

.btn-ledger-clear-text {
  background: transparent;
  border: none;
  font-size: 0.7rem;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.btn-ledger-clear-text:hover {
  color: #ef4444;
  text-decoration: underline;
}

/* Selector de Entorno de Compartir: Pruebas Locales vs Internet Netlify */
.share-env-selector {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  background: rgba(0, 0, 0, 0.05);
  padding: 4px;
  border-radius: 12px;
}

body[data-theme="midnight"] .share-env-selector {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.share-env-btn {
  flex: 1;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  background: transparent;
  color: var(--text-muted);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.share-env-btn:hover {
  background: rgba(255, 255, 255, 0.5);
  color: var(--text-main);
}

body[data-theme="midnight"] .share-env-btn:hover {
  background: rgba(51, 65, 85, 0.6);
  color: #f8fafc;
}

.share-env-btn.active {
  background: var(--primary, #10b981) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px var(--primary-glow, rgba(16, 185, 129, 0.35));
}

body[data-theme="midnight"] .share-env-btn.active {
  background: #10b981 !important;
  color: #ffffff !important;
}

/* ==========================================================================
   SELLOS DE CERA TEMÁTICOS Y APERTURA DE CARTA POR MUNDO
   ========================================================================== */
.scroll-seal-wax {
  cursor: pointer;
  user-select: none;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease;
}

.scroll-seal-wax:active {
  transform: scale(0.92);
}

/* 1. Floral */
.scroll-seal-wax.seal-wax-floral {
  background: radial-gradient(circle at 35% 35%, #f43f5e 0%, #be123c 65%, #881337 100%);
  box-shadow: 0 6px 16px rgba(190, 18, 60, 0.45), inset 0 2px 4px rgba(255, 255, 255, 0.4);
  border: 1.5px solid #fecdd3;
}

/* 2. Cósmico */
.scroll-seal-wax.seal-wax-cosmic {
  background: radial-gradient(circle at 35% 35%, #a855f7 0%, #6366f1 55%, #1e1b4b 100%);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.6);
  border: 1.5px solid #c084fc;
}

/* 3. Vintage Epistolar 1920 */
.scroll-seal-wax.seal-wax-vintage {
  background: radial-gradient(circle at 35% 35%, #991b1b 0%, #450a0a 70%, #1c0505 100%);
  box-shadow: 0 6px 18px rgba(69, 10, 10, 0.6), inset 0 1px 3px rgba(251, 191, 36, 0.4);
  border: 2px solid #d97706;
}

/* 4. Cine Gatsby */
.scroll-seal-wax.seal-wax-cinema {
  background: radial-gradient(circle at 35% 35%, #fde047 0%, #ca8a04 55%, #422006 100%);
  box-shadow: 0 0 20px rgba(250, 204, 21, 0.65), inset 0 2px 4px rgba(255, 255, 255, 0.7);
  border: 2px solid #fef08a;
  color: #18181b;
}

/* 5. Pirata Tesoro */
.scroll-seal-wax.seal-wax-pirate {
  background: radial-gradient(circle at 35% 35%, #d97706 0%, #78350f 65%, #290d02 100%);
  box-shadow: 0 6px 16px rgba(120, 53, 15, 0.55), inset 0 2px 4px rgba(254, 243, 199, 0.4);
  border: 2px solid #f59e0b;
}

/* 6. Chocolatería Fina */
.scroll-seal-wax.seal-wax-candy {
  background: radial-gradient(circle at 35% 35%, #fb7185 0%, #e11d48 60%, #4c0519 100%);
  box-shadow: 0 6px 16px rgba(225, 29, 72, 0.45), inset 0 2px 4px rgba(255, 255, 255, 0.4);
  border: 2px solid #fda4af;
}

/* 7. Arcade Retro */
.scroll-seal-wax.seal-wax-arcade {
  background: #0f172a;
  box-shadow: 0 0 18px rgba(6, 182, 212, 0.8), inset 0 0 8px #06b6d4;
  border: 2px solid #22d3ee;
  color: #38bdf8;
}

/* ==========================================================================
   PIE DE PÁGINA LEGAL & CUMPLIMIENTO (ESTUDIO DE CREACIÓN)
   ========================================================================== */
.welcome-studio-footer-legal {
  margin-top: 36px;
  padding: 20px 14px 28px 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  text-align: center;
}

body[data-theme="midnight"] .welcome-studio-footer-legal {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.legal-links-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.btn-legal-link {
  background: transparent;
  border: none;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  text-decoration: underline;
  transition: all 0.2s ease;
}

.btn-legal-link:hover {
  color: var(--primary, #e11d48);
  background: rgba(0, 0, 0, 0.04);
}

body[data-theme="midnight"] .btn-legal-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #f43f5e;
}

.legal-dot {
  font-size: 0.65rem;
  color: var(--text-muted, #94a3b8);
  opacity: 0.6;
}

.legal-copy-notice {
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--text-muted, #94a3b8);
  max-width: 480px;
  margin: 0 auto;
}

/* ==========================================================================
   MODAL DE DOCUMENTOS LEGALES (TÉRMINOS, PRIVACIDAD, REEMBOLSOS)
   ========================================================================== */
#legal-modal.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#legal-modal.modal-overlay.active {
  display: flex !important;
}

.legal-modal-container {
  background: var(--bg-card, #ffffff);
  border-radius: 20px;
  width: 100%;
  max-width: 620px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(0, 0, 0, 0.1);
  overflow: hidden;
  animation: modalScaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body[data-theme="midnight"] .legal-modal-container {
  background: #0f172a;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85);
}

.legal-modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body[data-theme="midnight"] .legal-modal-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.legal-modal-header h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-main, #0f172a);
}

body[data-theme="midnight"] .legal-modal-header h3 {
  color: #f8fafc;
}

.legal-tabs-bar {
  display: flex;
  overflow-x: auto;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

body[data-theme="midnight"] .legal-tabs-bar {
  background: rgba(255, 255, 255, 0.03);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.legal-tab-btn {
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.legal-tab-btn.active {
  background: var(--primary, #e11d48);
  color: #ffffff;
}

.legal-modal-body {
  padding: 20px;
  overflow-y: auto;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--text-main, #334155);
}

body[data-theme="midnight"] .legal-modal-body {
  color: #cbd5e1;
}

.legal-modal-body h4 {
  font-size: 0.95rem;
  font-weight: 800;
  margin-top: 14px;
  margin-bottom: 6px;
  color: var(--text-main, #0f172a);
}

body[data-theme="midnight"] .legal-modal-body h4 {
  color: #f1f5f9;
}

.legal-modal-body p {
  margin-bottom: 10px;
}

.legal-modal-footer {
  padding: 12px 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  text-align: right;
  background: rgba(0, 0, 0, 0.02);
}

body[data-theme="midnight"] .legal-modal-footer {
  border-top-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

/* ====================================================================
   PANTALLA DE ACCESO A LA BÓVEDA PRIVADA (PIN DE CREADOR)
   ==================================================================== */
.screen-vault-lock {
  display: none;
  min-height: 100vh;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  z-index: 100;
  position: relative;
}

.screen-vault-lock.active {
  display: flex !important;
}

.vault-card-wrapper {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15), 0 0 35px var(--primary-glow, rgba(244, 63, 94, 0.18));
  border-radius: 28px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  padding: 32px 22px 24px;
  position: relative;
  overflow: hidden;
  animation: vaultCardFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

body[data-theme="midnight"] .vault-card-wrapper {
  background: rgba(15, 23, 42, 0.88);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 35px rgba(99, 102, 241, 0.25);
}

@keyframes vaultCardFadeIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.vault-shield-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.15), rgba(251, 191, 36, 0.2));
  border: 2px solid var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: 0 8px 24px rgba(244, 63, 94, 0.22);
  animation: vaultPulseGlow 3s ease-in-out infinite;
}

@keyframes vaultPulseGlow {
  0%, 100% {
    box-shadow: 0 8px 24px rgba(244, 63, 94, 0.22);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 12px 32px var(--primary-glow, rgba(244, 63, 94, 0.4));
    transform: scale(1.05);
  }
}

.vault-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 4px;
  letter-spacing: -0.3px;
}

.vault-subtitle {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.vault-pin-display {
  margin-bottom: 20px;
}

.pin-dots {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 8px;
}

.pin-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  background: transparent;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pin-dot.filled {
  background: var(--primary);
  transform: scale(1.15);
  box-shadow: 0 0 12px var(--primary-glow, var(--primary));
}

.pin-dot.success {
  background: #10b981 !important;
  border-color: #10b981 !important;
  box-shadow: 0 0 16px #10b981 !important;
  transform: scale(1.25);
}

.pin-dot.error {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 16px #ef4444 !important;
  transform: scale(1.15);
}

.pin-dots.shake {
  animation: vaultShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes vaultShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

.vault-hint {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  min-height: 18px;
  transition: color 0.2s ease;
}

.vault-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 270px;
  margin: 0 auto 18px;
}

.vault-key {
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.75);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s ease;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

body[data-theme="midnight"] .vault-key {
  background: rgba(30, 41, 59, 0.75);
  border-color: rgba(255, 255, 255, 0.08);
  color: #f8fafc;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.vault-key:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px var(--primary-glow, rgba(244, 63, 94, 0.3));
}

.vault-key:active {
  transform: scale(0.92);
  background: var(--primary);
  color: #fff;
}

.vault-key-action {
  font-size: 1.15rem;
  background: rgba(0, 0, 0, 0.04);
}

body[data-theme="midnight"] .vault-key-action {
  background: rgba(255, 255, 255, 0.05);
}

.vault-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 14px;
  font-size: 0.74rem;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

body[data-theme="midnight"] .vault-footer {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.vault-default-hint {
  color: var(--primary);
  font-size: 0.74rem;
  background: var(--primary-soft, rgba(244, 63, 94, 0.08));
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--primary-border, rgba(244, 63, 94, 0.2));
  display: inline-block;
}

.vault-tag {
  font-size: 0.72rem;
  opacity: 0.75;
}

/* ==========================================================================
   MOMENTOS WOW SENSORIALES: ATMÓSFERA, FÍSICA 3D, HÁPTICA Y EXPERIENCIAS
   ========================================================================== */

/* 1. DIMMER AMBIENTAL DE SALÓN A MEDIA LUZ PARA EL PASTEL (#screen-cake) */
.cake-ambient-dimmer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, rgba(15, 8, 3, 0.42) 0%, rgba(8, 4, 1, 0.8) 65%, rgba(0, 0, 0, 0.94) 100%);
  pointer-events: none;
  z-index: 1;
  opacity: 0.88;
  transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

#screen-cake.lights-up .cake-ambient-dimmer {
  opacity: 0;
}

#screen-cake.lights-up::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 45%, rgba(254, 240, 138, 0.32) 0%, rgba(251, 191, 36, 0.16) 40%, rgba(255, 255, 255, 0) 75%);
  pointer-events: none;
  z-index: 1;
  animation: lightsUpBurst 1.8s ease-out forwards;
}

@keyframes lightsUpBurst {
  0% { opacity: 0; transform: scale(0.7); }
  35% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0.65; transform: scale(1); }
}

/* 2. GIRO 3D DE FOTOS POLAROID CON DEDICATORIA MANUSCRITA AL REVERSO */
.polaroid-card {
  perspective: 1000px !important;
  cursor: pointer !important;
  user-select: none !important;
}

.polaroid-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.68s cubic-bezier(0.34, 1.25, 0.64, 1);
  transform-style: preserve-3d;
}

.polaroid-card.is-flipped .polaroid-flip-inner {
  transform: rotateY(180deg);
}

.polaroid-flip-front,
.polaroid-flip-back {
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.polaroid-flip-front {
  position: relative;
}

.polaroid-flip-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  pointer-events: none;
  letter-spacing: 0.5px;
  transition: opacity 0.2s ease;
  z-index: 5;
}

.polaroid-flip-back {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateY(180deg);
  background: #fffdf5;
  border-radius: 8px;
  padding: 20px 16px 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: inset 0 0 25px rgba(217, 119, 6, 0.08), 0 8px 24px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(217, 119, 6, 0.22);
  box-sizing: border-box;
}

.polaroid-back-washi-tape {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 65px;
  height: 16px;
  background: rgba(251, 191, 36, 0.65);
  backdrop-filter: blur(2px);
  border-left: 2px dashed rgba(180, 83, 9, 0.35);
  border-right: 2px dashed rgba(180, 83, 9, 0.35);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.polaroid-back-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dashed rgba(180, 83, 9, 0.2);
  padding-bottom: 6px;
}

.polaroid-back-tag {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #92400e;
}

.polaroid-back-body {
  margin: 14px 0;
  text-align: center;
}

.polaroid-back-quote {
  font-family: "Georgia", "Times New Roman", serif;
  font-style: italic;
  font-size: 0.88rem;
  line-height: 1.6;
  color: #451a03;
  margin: 0 0 10px 0;
}

.polaroid-back-signature {
  font-size: 0.78rem;
  font-weight: 700;
  color: #b45309;
}

.polaroid-back-footer {
  text-align: center;
  border-top: 1px dashed rgba(180, 83, 9, 0.2);
  padding-top: 6px;
}

.polaroid-flip-tip {
  font-size: 0.68rem;
  color: #a16207;
  font-weight: 600;
}

/* 3. OVERLAYS DE MOMENTOS WOW TEMÁTICOS */
.wow-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
  box-sizing: border-box;
  padding: 16px;
  animation: fadeIn 0.3s ease-out;
}

.wow-overlay.fade-out {
  opacity: 0;
  transition: opacity 0.4s ease-out;
}

/* Floral Dew & Timelapse Bloom */
.floral-dew-overlay {
  background: radial-gradient(circle, rgba(254, 240, 138, 0.25) 0%, rgba(244, 63, 94, 0.15) 50%, rgba(255, 255, 255, 0) 80%);
}

.floral-golden-flower-timelapse {
  position: relative;
  width: 130px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: goldenFlowerBloom 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.golden-flower-center {
  font-size: 2.5rem;
  z-index: 3;
  animation: spinSlow 6s linear infinite;
}

.golden-petal {
  position: absolute;
  width: 42px;
  height: 70px;
  border-radius: 50% 50% 20% 20%;
  background: linear-gradient(180deg, #fef08a 0%, #eab308 60%, #ca8a04 100%);
  opacity: 0.9;
  box-shadow: 0 0 15px rgba(250, 204, 21, 0.8);
}

.golden-petal.p1 { transform: rotate(0deg) translateY(-22px); }
.golden-petal.p2 { transform: rotate(72deg) translateY(-22px); }
.golden-petal.p3 { transform: rotate(144deg) translateY(-22px); }
.golden-petal.p4 { transform: rotate(216deg) translateY(-22px); }
.golden-petal.p5 { transform: rotate(288deg) translateY(-22px); }

.golden-flower-halo {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(250, 204, 21, 0.45) 0%, transparent 70%);
  animation: pulseGlow 1.2s infinite alternate;
}

@keyframes goldenFlowerBloom {
  0% { transform: scale(0.2) rotate(-90deg); opacity: 0; }
  60% { transform: scale(1.15) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.floral-dew-banner,
.candy-melt-banner {
  margin-top: 20px;
  background: rgba(255, 255, 255, 0.94);
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  font-weight: 700;
  font-size: clamp(0.82rem, 3.8vw, 0.95rem);
  color: #881337;
  border: 1px solid rgba(244, 63, 94, 0.3);
  animation: slideUpFade 0.4s ease-out;
  max-width: min(90vw, 480px);
  width: auto;
  text-align: center;
  box-sizing: border-box;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Cosmic Warp Speed */
.cosmic-warp-overlay {
  background: radial-gradient(circle, rgba(15, 23, 42, 0.75) 0%, rgba(2, 6, 23, 0.95) 100%);
}

.warp-tunnel {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  perspective: 400px;
}

.warp-streak {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 160px;
  background: linear-gradient(180deg, #38bdf8, #a855f7, #ffffff);
  transform-origin: top center;
  box-shadow: 0 0 15px #38bdf8;
  animation: warpFly 0.8s linear infinite;
}

.warp-streak.s1 { transform: rotate(30deg) translateZ(0); animation-delay: 0.1s; }
.warp-streak.s2 { transform: rotate(90deg) translateZ(0); animation-delay: 0.25s; }
.warp-streak.s3 { transform: rotate(150deg) translateZ(0); animation-delay: 0.05s; }
.warp-streak.s4 { transform: rotate(210deg) translateZ(0); animation-delay: 0.3s; }
.warp-streak.s5 { transform: rotate(270deg) translateZ(0); animation-delay: 0.15s; }
.warp-streak.s6 { transform: rotate(330deg) translateZ(0); animation-delay: 0.2s; }

@keyframes warpFly {
  0% { transform: rotate(var(--rot, 45deg)) translateY(-40px) scaleY(0.4); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: rotate(var(--rot, 45deg)) translateY(280px) scaleY(2.5); opacity: 0; }
}

.cosmic-constellation-title {
  background: rgba(15, 23, 42, 0.92);
  border: 1.5px solid rgba(56, 189, 248, 0.5);
  box-shadow: 0 0 30px rgba(56, 189, 248, 0.35);
  border-radius: 16px;
  padding: 16px 20px;
  text-align: center;
  color: #f8fafc;
  max-width: min(90vw, 440px);
  width: 100%;
  box-sizing: border-box;
  animation: modalPopIn 0.5s cubic-bezier(0.34, 1.25, 0.64, 1);
}

.constellation-badge {
  font-size: 0.65rem;
  letter-spacing: 2px;
  color: #38bdf8;
  font-weight: 800;
  display: block;
  margin-bottom: 6px;
}

.cosmic-constellation-title h3 {
  font-size: clamp(1.05rem, 4.5vw, 1.35rem);
  color: #fde047;
  text-shadow: 0 0 15px rgba(250, 204, 21, 0.6);
  margin: 0 0 6px 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Vintage Heat Ink */
.vintage-heat-interactive-bar {
  margin: 10px 0 16px 0;
  text-align: center;
}

.btn-vintage-heat {
  background: rgba(180, 83, 9, 0.12);
  border: 1px dashed rgba(180, 83, 9, 0.45);
  color: #78350f;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  max-width: 90vw;
  box-sizing: border-box;
}

.btn-vintage-heat:hover,
.btn-vintage-heat.is-active {
  background: #78350f;
  color: #fef3c7;
  border-style: solid;
  box-shadow: 0 0 15px rgba(217, 119, 6, 0.35);
}

.vintage-gold-ink-revealed {
  color: #78350f !important;
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.45), 0 1px 1px #fffbeb !important;
  font-weight: 600 !important;
  transition: color 1.2s ease, text-shadow 1.2s ease;
}

/* Cinema Premiere Marquee */
.cinema-banner-marquee {
  background: #000000;
  border: 3px solid #eab308;
  border-radius: 14px;
  padding: 16px 20px;
  text-align: center;
  box-shadow: 0 0 45px rgba(234, 179, 8, 0.6);
  color: #ffffff;
  max-width: min(90vw, 440px);
  width: 100%;
  box-sizing: border-box;
  animation: modalPopIn 0.4s ease-out;
}

.cinema-take {
  font-size: 0.72rem;
  letter-spacing: 2px;
  color: #eab308;
  font-weight: 800;
}

.cinema-banner-marquee h2 {
  font-size: clamp(1.05rem, 4.5vw, 1.35rem);
  letter-spacing: 2px;
  margin: 6px 0;
  color: #fde047;
  text-shadow: 0 0 15px #ca8a04;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.cinema-banner-marquee p {
  font-size: clamp(0.82rem, 3.6vw, 0.95rem);
  margin: 0;
  color: #e2e8f0;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Pirate Doubloons Shower */
.pirate-coins-overlay {
  background: radial-gradient(circle, rgba(234, 179, 8, 0.15) 0%, transparent 70%);
}

.coins-shower-wrapper {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.pirate-coin-item {
  position: absolute;
  top: -60px;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  animation: coinFallBounce 1.6s ease-in forwards;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.25));
  will-change: transform;
}

@keyframes coinFallBounce {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  65% { transform: translateY(72vh) rotate(240deg); }
  80% { transform: translateY(64vh) rotate(300deg); }
  100% { transform: translateY(85vh) rotate(360deg); opacity: 0; }
}

.pirate-banner-toast {
  position: absolute;
  bottom: clamp(60px, 12vh, 120px);
  left: 50%;
  transform: translateX(-50%);
  background: #451a03;
  color: #fde68a;
  border: 2px solid #ca8a04;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 800;
  font-size: clamp(0.8rem, 3.6vw, 0.95rem);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  max-width: min(92vw, 460px);
  width: max-content;
  text-align: center;
  box-sizing: border-box;
  white-space: normal;
  line-height: 1.3;
}

/* Arcade Level Up Banner */
.arcade-level-up-overlay {
  background: rgba(0, 0, 0, 0.85);
}

.arcade-pixel-banner-box {
  background: #020617;
  border: 3px solid #22c55e;
  border-radius: 8px;
  padding: 18px 16px;
  text-align: center;
  box-shadow: 0 0 35px rgba(34, 197, 94, 0.55), inset 0 0 20px rgba(34, 197, 94, 0.2);
  color: #22c55e;
  font-family: 'Courier New', monospace;
  max-width: min(92vw, 420px);
  width: 100%;
  box-sizing: border-box;
  animation: arcadeZoom 0.35s cubic-bezier(0.34, 1.25, 0.64, 1);
}

.arcade-stars-row {
  color: #facc15;
  font-size: clamp(0.85rem, 3.8vw, 1.05rem);
  letter-spacing: 1px;
  font-weight: 900;
}

.arcade-winner-name {
  font-size: clamp(1.15rem, 5vw, 1.55rem);
  color: #38bdf8;
  margin: 6px 0;
  text-shadow: 0 0 12px #0284c7;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.arcade-level-badge {
  background: #dc2626;
  color: #ffffff;
  padding: 4px 10px;
  display: inline-block;
  font-weight: 900;
  font-size: clamp(0.75rem, 3.5vw, 0.85rem);
  margin-bottom: 10px;
}

.arcade-stats-list {
  background: rgba(255, 255, 255, 0.05);
  padding: 8px 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.arcade-stat-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: clamp(0.7rem, 3.2vw, 0.8rem);
  margin: 3px 0;
}

.arcade-insert-coin-blink {
  font-size: 0.75rem;
  color: #facc15;
  animation: pulseGlow 0.6s infinite alternate;
}

@keyframes arcadeZoom {
  0% { transform: scale(0.3); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes slideUpFade {
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes slideUpFade {
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ==========================================================================
   ESTILOS DE MOMENTOS WOW ULTRA-SENSORIALES (34 MOMENTOS)
   ========================================================================== */

/* 1. Cake Dimmer & Ambient Glow */
body.cake-dimmed #screen-cake {
  background: radial-gradient(circle at center 60%, rgba(30, 15, 25, 0.94) 0%, rgba(10, 5, 12, 0.98) 100%) !important;
  transition: background 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
body.cake-dimmed .cake-platform {
  box-shadow: 0 0 70px rgba(251, 191, 36, 0.45), 0 0 140px rgba(245, 158, 11, 0.25);
  transition: box-shadow 1s ease;
}

/* 2. Sparkler Candles Particles */
.sparkler-spark {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px #fde047, 0 0 12px #f59e0b;
  pointer-events: none;
  z-index: 25;
  animation: sparklerFly 0.5s ease-out forwards;
}
@keyframes sparklerFly {
  0% { transform: translate(0, 0) scale(1.4); opacity: 1; }
  100% { transform: translate(var(--tx, 10px), var(--ty, -20px)) scale(0.2); opacity: 0; }
}

/* 3. Music Audio Glow */
.music-audio-glow-active::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  border: 3px solid transparent;
  box-shadow: inset 0 0 35px rgba(244, 63, 94, 0.28), inset 0 0 70px rgba(251, 191, 36, 0.18);
  animation: audioGlowBreathe 1.8s ease-in-out infinite alternate;
}
@keyframes audioGlowBreathe {
  0% { opacity: 0.35; filter: hue-rotate(0deg); }
  100% { opacity: 0.85; filter: hue-rotate(30deg); }
}

/* 4. God Rays */
.god-rays-overlay {
  position: fixed;
  top: -20vh;
  left: -20vw;
  width: 140vw;
  height: 140vh;
  pointer-events: none;
  z-index: 1;
  background: repeating-conic-gradient(
    from 180deg at 50% 0%,
    rgba(254, 240, 138, 0.08) 0deg 8deg,
    transparent 8deg 20deg,
    rgba(253, 224, 71, 0.06) 20deg 28deg,
    transparent 28deg 40deg
  );
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  animation: godRaysRotate 60s linear infinite;
}

/* 5. Anamorphic Lens Flares */
.lens-flare-anamorphic {
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, rgba(56, 189, 248, 0.8) 25%, #ffffff 50%, rgba(244, 63, 94, 0.8) 75%, transparent 100%);
  filter: drop-shadow(0 0 16px rgba(56, 189, 248, 0.9)) blur(0.5px);
  pointer-events: none;
  z-index: 99998;
  overflow: hidden;
  will-change: transform, opacity;
  animation: lensFlareStreak 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes lensFlareStreak {
  0% { transform: translate3d(0, -50%, 0) scaleX(0.05); opacity: 0; }
  35% { opacity: 1; transform: translate3d(0, -50%, 0) scaleX(1); height: 6px; }
  100% { transform: translate3d(0, -50%, 0) scaleX(1.3); opacity: 0; height: 1px; }
}

/* 6. Cheer Applause Floaters */
.cheer-applause-floater {
  position: fixed;
  font-size: clamp(1.2rem, 4vw, 1.6rem);
  pointer-events: none;
  z-index: 9999;
  will-change: transform, opacity;
  animation: cheerFloatUp 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes cheerFloatUp {
  0% { transform: translate3d(0, 0, 0) scale(0.6) rotate(0deg); opacity: 0; }
  25% { opacity: 1; transform: translate3d(0, -30px, 0) scale(1.2) rotate(var(--rot, 8deg)); }
  100% { transform: translate3d(0, -140px, 0) scale(0.9) rotate(var(--rot, -12deg)); opacity: 0; }
}

/* 7. Figurative Smoke (Corazón / Estrella) */
.figurative-smoke-heart {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  pointer-events: none;
  z-index: 30;
  filter: drop-shadow(0 0 10px rgba(254, 205, 211, 0.8));
  will-change: transform, opacity;
  animation: smokeHeartDrift 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes smokeHeartDrift {
  0% { transform: translate3d(-50%, 0, 0) scale(0.4); opacity: 0; }
  30% { opacity: 0.95; transform: translate3d(-50%, -35px, 0) scale(1.2); }
  70% { opacity: 0.7; transform: translate3d(-48%, -85px, 0) scale(1.4); }
  100% { opacity: 0; transform: translate3d(-52%, -140px, 0) scale(1.8); }
}

/* 8. Fairy Dust Particles */
.fairy-dust-sparkle {
  position: fixed;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  background: radial-gradient(circle, #ffffff 0%, #fde047 60%, #f59e0b 100%);
  box-shadow: 0 0 8px #facc15;
  will-change: transform, opacity;
  animation: fairyDustFade 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes fairyDustFade {
  0% { transform: translate3d(-50%, -50%, 0) scale(1.2) rotate(0deg); opacity: 1; }
  100% { transform: translate3d(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 8px)), 0) scale(0.1) rotate(180deg); opacity: 0; }
}

/* 9. Floating 3D Balloons */
.floating-balloons-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  overflow: hidden;
}
.floating-balloon {
  position: absolute;
  width: clamp(38px, 10vw, 54px);
  height: clamp(48px, 13vw, 68px);
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  touch-action: pan-y;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15));
  will-change: transform;
  animation: balloonDrift 14s ease-in-out infinite alternate;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.floating-balloon::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 12px;
  width: 12px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transform: rotate(-35deg);
}
.floating-balloon::after {
  content: '';
  position: absolute;
  bottom: -22px;
  left: 50%;
  width: 2px;
  height: 24px;
  background: rgba(180, 180, 180, 0.6);
  transform: translateX(-50%);
}
.floating-balloon:hover {
  transform: scale(1.12);
}
.floating-balloon.b-rose { background: radial-gradient(circle at 35% 30%, #fda4af, #f43f5e 75%, #be123c 100%); }
.floating-balloon.b-gold { background: radial-gradient(circle at 35% 30%, #fef08a, #eab308 75%, #a16207 100%); }
.floating-balloon.b-sky { background: radial-gradient(circle at 35% 30%, #bae6fd, #0284c7 75%, #0369a1 100%); }
.floating-balloon.b-purple { background: radial-gradient(circle at 35% 30%, #e9d5ff, #a855f7 75%, #7e22ce 100%); }
@keyframes balloonDrift {
  0% { transform: translate3d(0, 0, 0) rotate(-3deg); }
  50% { transform: translate3d(0, -40px, 0) rotate(4deg); }
  100% { transform: translate3d(0, -80px, 0) rotate(-2deg); }
}

/* 10. Water Ripples */
.water-ripple-wave {
  position: fixed;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.5), inset 0 0 12px rgba(255, 255, 255, 0.3);
  pointer-events: none;
  z-index: 99990;
  animation: rippleExpand 0.75s ease-out forwards;
}
@keyframes rippleExpand {
  0% { transform: translate(-50%, -50%) scale(0.05); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* 11. Bloom on Scroll */
.bloom-scroll-ready {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.34, 1.25, 0.64, 1);
}
.bloom-scroll-ready.is-bloomed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 12. Interactive Cake Slice */
.cake-slice-prompt-bar {
  margin: 18px auto 6px auto;
  text-align: center;
  animation: fadeInDown 0.5s ease-out;
}
.btn-slice-cake {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  border: none;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(217, 119, 6, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-slice-cake:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 25px rgba(217, 119, 6, 0.5);
}
.cake-slice-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}
.cake-slice-card {
  background: var(--card-bg, #ffffff);
  border-radius: 20px;
  padding: 26px 30px;
  text-align: center;
  max-width: 360px;
  width: 90%;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
  animation: modalPopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cake-slice-icon {
  font-size: 4rem;
  margin-bottom: 8px;
  display: inline-block;
  animation: pulse 1.6s infinite;
}

/* 13. Scratch Shavings */
.scratch-shaving {
  position: fixed;
  width: 5px;
  height: 5px;
  background: linear-gradient(135deg, #fef08a, #ca8a04);
  border-radius: 1px;
  pointer-events: none;
  z-index: 99995;
  animation: shavingFall 0.65s ease-in forwards;
}
@keyframes shavingFall {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--sx, 12px), var(--sy, 45px)) rotate(360deg); opacity: 0; }
}

/* 14. Polaroid 3D Flip */
.polaroid-card-3d {
  perspective: 900px;
  cursor: pointer;
}
.polaroid-card-3d .polaroid-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.75s cubic-bezier(0.34, 1.25, 0.64, 1);
  transform-style: preserve-3d;
}
.polaroid-card-3d.is-flipped .polaroid-inner {
  transform: rotateY(180deg);
}
.polaroid-back-side {
  position: absolute;
  inset: 0;
  background: #fefce8;
  border-radius: 12px;
  padding: 18px;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  border: 1px solid #fde047;
}

/* 15. Polaroid Chem Reveal */
.polaroid-chem-revealing img {
  filter: blur(8px) contrast(0.6) brightness(1.6) saturate(0.2);
  transition: filter 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.polaroid-chem-revealed img {
  filter: blur(0px) contrast(1) brightness(1) saturate(1);
}

/* 16. Polaroid Live Zoom */
.polaroid-card-3d.is-live-zoomed {
  transform: scale(1.12);
  box-shadow: 0 20px 45px rgba(244, 63, 94, 0.35);
  z-index: 10;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
}

/* 17. Vinyl Record Needle Drop */
.vinyl-player-widget {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 10px auto;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, #18181b 0%, #18181b 2px, #09090b 3px, #09090b 4px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.vinyl-spinning {
  animation: spinSlow 3s linear infinite;
}
.vinyl-tonearm {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 40px;
  height: 60px;
  border-right: 3px solid #d4d4d8;
  border-top: 3px solid #d4d4d8;
  border-top-right-radius: 12px;
  transform-origin: top right;
  transform: rotate(20deg);
  transition: transform 0.6s cubic-bezier(0.34, 1.25, 0.64, 1);
}

/* 18. Music Box Crank Handle */
.musicbox-crank-handle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(244, 63, 94, 0.1);
  border: 1px dashed var(--accent, #f43f5e);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--accent, #f43f5e);
  transition: background 0.2s, transform 0.2s;
  user-select: none;
}
.musicbox-crank-handle:hover {
  background: rgba(244, 63, 94, 0.2);
  transform: scale(1.05);
}

/* 19. Cassette Neon Waveform */
.cassette-neon-waveform {
  position: absolute;
  top: 48%;
  left: 28%;
  right: 28%;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  pointer-events: none;
  z-index: 5;
}
.cassette-wave-bar {
  width: 3px;
  height: 100%;
  background: #38bdf8;
  border-radius: 2px;
  box-shadow: 0 0 6px #38bdf8;
  transform-origin: bottom center;
  animation: waveBarBounce 0.8s ease-in-out infinite alternate;
}
.cassette-wave-bar:nth-child(2) { animation-delay: 0.15s; background: #ec4899; box-shadow: 0 0 6px #ec4899; }
.cassette-wave-bar:nth-child(3) { animation-delay: 0.3s; background: #facc15; box-shadow: 0 0 6px #facc15; }
.cassette-wave-bar:nth-child(4) { animation-delay: 0.45s; background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.cassette-wave-bar:nth-child(5) { animation-delay: 0.2s; background: #a855f7; box-shadow: 0 0 6px #a855f7; }
@keyframes waveBarBounce {
  0% { transform: scaleY(0.2); }
  100% { transform: scaleY(1); }
}

/* 22. Shooting Stars */
.shooting-star-streak {
  position: fixed;
  top: 15vh;
  left: 10vw;
  width: 140px;
  height: 2px;
  background: linear-gradient(90deg, #ffffff, rgba(254, 240, 138, 0.8), transparent);
  filter: drop-shadow(0 0 8px #fde047);
  transform: rotate(-32deg);
  pointer-events: auto;
  cursor: pointer;
  z-index: 99990;
  animation: shootingStarGlide 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes shootingStarGlide {
  0% { transform: translate(-100px, -80px) rotate(-32deg) scaleX(0.2); opacity: 0; }
  30% { opacity: 1; transform: translate(60px, 40px) rotate(-32deg) scaleX(1); }
  100% { transform: translate(320px, 200px) rotate(-32deg) scaleX(1.4); opacity: 0; }
}
.floating-star-wish {
  position: fixed;
  background: #1e1b4b;
  color: #fde047;
  border: 1px solid #a855f7;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: clamp(0.72rem, 3.2vw, 0.84rem);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.6);
  pointer-events: none;
  z-index: 99995;
  max-width: min(88vw, 360px);
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  will-change: transform, opacity;
  animation: wishFloatRise 2.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes wishFloatRise {
  0% { transform: translate3d(-50%, 0, 0) scale(0.8); opacity: 0; }
  20% { opacity: 1; transform: translate3d(-50%, -20px, 0) scale(1.1); }
  100% { transform: translate3d(-50%, -100px, 0) scale(0.9); opacity: 0; }
}

/* 23. Boarding Pass Ticket */
.boarding-pass-badge-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  color: #fde047;
  border: 1px solid #ca8a04;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s, box-shadow 0.2s;
  margin: 10px auto;
}
.boarding-pass-badge-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(234, 179, 8, 0.35);
}

/* 24. Time Capsule */
.time-capsule-card {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.85));
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 16px;
  padding: clamp(12px, 4vw, 16px) clamp(12px, 4vw, 20px);
  margin: 18px auto;
  width: min(92vw, 440px);
  box-sizing: border-box;
  text-align: center;
  color: #f8fafc;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.time-capsule-timer {
  display: flex;
  justify-content: center;
  gap: clamp(6px, 2vw, 12px);
  margin: 10px 0;
  font-family: 'Courier New', monospace;
}
.time-capsule-unit {
  background: rgba(0, 0, 0, 0.3);
  padding: 6px clamp(6px, 2vw, 10px);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.time-capsule-num {
  font-size: clamp(1rem, 3.5vw, 1.25rem);
  font-weight: 900;
  color: #38bdf8;
  display: block;
}
.time-capsule-lbl {
  font-size: clamp(0.58rem, 2vw, 0.65rem);
  color: #94a3b8;
  letter-spacing: 1px;
}

/* 25. Trophy 3D */
.trophy-3d-card {
  margin: 18px auto;
  width: min(92vw, 440px);
  box-sizing: border-box;
  background: radial-gradient(circle at 50% 20%, rgba(254, 240, 138, 0.15) 0%, rgba(30, 20, 10, 0.4) 100%);
  border: 1px solid #eab308;
  border-radius: 18px;
  padding: clamp(14px, 4vw, 20px);
  text-align: center;
  box-shadow: 0 12px 35px rgba(234, 179, 8, 0.25);
}
.trophy-3d-icon {
  font-size: clamp(2.8rem, 8vw, 3.5rem);
  display: inline-block;
  cursor: grab;
  user-select: none;
  filter: drop-shadow(0 6px 14px rgba(234, 179, 8, 0.5));
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.trophy-3d-icon:hover {
  transform: scale(1.15) rotate(8deg);
}

/* 26. Cinema Curtain Intro */
.cinema-curtain-intro {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: flex;
  pointer-events: none;
  overflow: hidden;
}
.curtain-panel {
  width: 50%;
  height: 100%;
  background: repeating-linear-gradient(90deg, #881337 0%, #4c0519 25px, #9f1239 50px);
  box-shadow: inset 0 0 80px rgba(0,0,0,0.8);
  will-change: transform;
  transition: transform 1.6s cubic-bezier(0.77, 0, 0.175, 1);
}
.curtain-panel.left { transform: translate3d(0, 0, 0); }
.curtain-panel.right { transform: translate3d(0, 0, 0); }
.cinema-curtain-intro.curtains-open .curtain-panel.left { transform: translate3d(-102%, 0, 0); }
.cinema-curtain-intro.curtains-open .curtain-panel.right { transform: translate3d(102%, 0, 0); }
.curtain-intro-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fef08a;
  font-size: clamp(1rem, 3.5vw, 1.2rem);
  font-weight: 800;
  text-align: center;
  text-shadow: 0 4px 12px rgba(0,0,0,0.8);
  pointer-events: none;
  transition: opacity 0.6s ease;
}

/* 28. Shockwave Burst */
.shockwave-burst-ring {
  position: fixed;
  border-radius: 50%;
  border: 4px solid rgba(254, 240, 138, 0.95);
  box-shadow: 0 0 30px rgba(245, 158, 11, 0.9), inset 0 0 20px rgba(254, 240, 138, 0.7);
  pointer-events: none;
  z-index: 99992;
  will-change: transform, opacity;
  animation: shockwaveExpand 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes shockwaveExpand {
  0% { transform: translate3d(-50%, -50%, 0) scale(0.1); opacity: 1; }
  100% { transform: translate3d(-50%, -50%, 0) scale(2.8); opacity: 0; }
}

/* 31. Vintage Unboxing Epistolary Calligraphy Overlay */
.vintage-unboxing-overlay {
  background: radial-gradient(circle, rgba(254, 240, 138, 0.15) 0%, rgba(120, 53, 15, 0.2) 100%);
}
.vintage-quill-timelapse {
  position: relative;
  text-align: center;
  max-width: min(92vw, 460px);
  box-sizing: border-box;
  animation: modalPopIn 0.5s cubic-bezier(0.34, 1.25, 0.64, 1);
}
.vintage-quill-icon {
  font-size: clamp(2.4rem, 7vw, 3.2rem);
  filter: drop-shadow(0 4px 12px rgba(180, 83, 9, 0.6));
  animation: floatSlow 3s ease-in-out infinite alternate;
}
.vintage-dispatch-banner {
  margin-top: 14px;
  background: #fefce8;
  border: 2px solid #b45309;
  border-radius: 12px;
  padding: clamp(10px, 3.5vw, 14px) clamp(14px, 4vw, 22px);
  color: #78350f;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  font-family: Georgia, serif;
  max-width: min(92vw, 460px);
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Widget de Caja Musical de Cuerda Interactiva */
.music-box-interactive-widget {
  margin: 1.25rem auto;
  max-width: 480px;
  width: min(92vw, 480px);
  box-sizing: border-box;
  animation: fadeInDown 0.5s ease-out;
}
.music-box-crank-card {
  background: var(--card-bg, rgba(255, 255, 255, 0.85));
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-color, rgba(251, 113, 133, 0.25));
  border-radius: 1.25rem;
  padding: clamp(1rem, 3.5vw, 1.2rem) clamp(1rem, 3.5vw, 1.4rem);
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
}
.music-box-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.music-box-icon {
  font-size: 1.5rem;
}
.music-box-crank-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
}
.btn-crank-turn {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid #ca8a04;
  background: radial-gradient(circle, #fef08a 0%, #eab308 60%, #a16207 100%);
  box-shadow: 0 4px 14px rgba(202, 138, 4, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-crank-turn:active {
  transform: scale(0.92);
  box-shadow: 0 2px 8px rgba(202, 138, 4, 0.5);
}
.btn-crank-turn .crank-base {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #78350f;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
.btn-crank-turn .crank-arm {
  position: absolute;
  width: 4px;
  height: 28px;
  background: #92400e;
  top: 10px;
  transform-origin: bottom center;
  border-radius: 2px;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-crank-turn .crank-knob {
  position: absolute;
  top: -6px;
  left: -5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fde047;
  border: 1.5px solid #78350f;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.crank-hint-text {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent, #e11d48);
}

/* Soporte y Respeto para Preferencias de Reducción de Movimiento (Accesibilidad) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .screen-micro-shake {
    animation: none !important;
  }
  .floating-balloon,
  .fairy-dust-sparkle,
  .water-ripple-wave,
  .sparkler-spark,
  .shooting-star-streak {
    display: none !important;
  }
}

/* ==========================================================================
   MONETIZACIÓN VIP - LEMON SQUEEZY MODAL & BADGES
   ========================================================================== */

/* Botón VIP en la cabecera */
.btn-vip-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #fef08a 0%, #eab308 60%, #ca8a04 100%);
  color: #78350f;
  border: 1.5px solid #facc15;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(202, 138, 4, 0.35);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  margin-left: auto;
}

.btn-vip-header-badge:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 18px rgba(202, 138, 4, 0.5);
}

.btn-vip-header-badge.is-active {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border-color: #34d399;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.35);
}

/* Modal VIP Lemon Squeezy */
.lemon-vip-sheet {
  max-width: 540px !important;
  margin: 0 auto;
  border-radius: 1.75rem 1.75rem 0 0;
  background: #0f172a !important;
  color: #f8fafc !important;
  border: 2px solid #ca8a04;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(234, 179, 8, 0.25);
  padding-bottom: 24px;
}

.lemon-vip-header {
  position: relative;
  text-align: center;
  padding: 10px 20px 16px;
  border-bottom: 1px solid rgba(234, 179, 8, 0.25);
}

.lemon-vip-badge-tag {
  display: inline-block;
  background: rgba(234, 179, 8, 0.15);
  color: #facc15;
  border: 1px solid rgba(234, 179, 8, 0.4);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}

.lemon-vip-header h3 {
  font-size: 1.3rem;
  color: #fef08a;
  margin: 4px 0 6px;
  font-weight: 800;
}

.lemon-vip-subtitle {
  font-size: 0.85rem;
  color: #94a3b8;
  margin: 0;
  line-height: 1.4;
}

.lemon-vip-body {
  padding: 16px 20px;
  max-height: 75vh;
  overflow-y: auto;
}

/* Cuadrícula de Planes VIP (Básico $2.99 vs Ilimitado $7.99) */
.lemon-plans-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

@media (max-width: 520px) {
  .lemon-plans-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.lemon-plan-card {
  position: relative;
  background: rgba(30, 41, 59, 0.75);
  border: 1.5px solid rgba(148, 163, 184, 0.25);
  border-radius: 16px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.lemon-plan-card:hover {
  transform: translateY(-2px);
  border-color: rgba(234, 179, 8, 0.5);
}

.lemon-plan-card.featured {
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
  border: 2px solid #ca8a04;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 20px rgba(234, 179, 8, 0.2);
}

.plan-ribbon {
  position: absolute;
  top: -10px;
  right: 14px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #000000;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.plan-badge {
  display: inline-block;
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.3);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 6px;
}

.plan-badge.gold {
  background: rgba(234, 179, 8, 0.15);
  color: #facc15;
  border-color: rgba(234, 179, 8, 0.4);
}

.plan-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #f8fafc;
  margin: 2px 0 6px;
}

.lemon-plan-card.featured .plan-title {
  color: #fef08a;
}

.plan-price-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 4px;
}

.plan-price {
  font-size: 1.6rem;
  font-weight: 900;
  color: #f8fafc;
}

.lemon-plan-card.featured .plan-price {
  color: #fde047;
}

.plan-currency {
  font-size: 0.8rem;
  font-weight: 700;
  color: #94a3b8;
}

.plan-period {
  font-size: 0.75rem;
  color: #64748b;
  margin-left: 2px;
}

.plan-old-price {
  font-size: 0.9rem;
  color: #64748b;
  text-decoration: line-through;
  margin-left: 6px;
}

.plan-tagline {
  font-size: 0.72rem;
  color: #94a3b8;
  margin: 0 0 10px;
  line-height: 1.3;
}

.plan-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  font-size: 0.74rem;
  line-height: 1.45;
  color: #cbd5e1;
}

.plan-features-list li {
  margin-bottom: 6px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.plan-features-list li.disabled {
  color: #64748b;
}

.check-icon {
  color: #4ade80;
  font-weight: 800;
  flex-shrink: 0;
}

.check-icon.gold {
  color: #facc15;
}

.cross-icon {
  color: #f87171;
  font-weight: 800;
  flex-shrink: 0;
}

.btn-lemon-plan {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  border: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.btn-lemon-plan:active {
  transform: scale(0.97);
}

.btn-plan-basic {
  background: #334155;
  color: #f8fafc;
  border: 1px solid #475569;
}

.btn-plan-basic:hover {
  background: #475569;
}

.btn-plan-unlimited {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 60%, #b45309 100%);
  color: #000000;
  box-shadow: 0 4px 16px rgba(217, 119, 6, 0.4);
}

.btn-plan-unlimited:hover {
  filter: brightness(1.08);
}

.btn-plan-hint {
  font-size: 0.65rem;
  font-weight: 600;
  opacity: 0.85;
  margin-top: 2px;
}

.price-guarantee {
  display: block;
  font-size: 0.72rem;
  color: #94a3b8;
  text-align: center;
  margin-bottom: 14px;
}

/* Caja de Licencia */
.lemon-license-box {
  background: rgba(30, 41, 59, 0.5);
  border: 1px dashed rgba(148, 163, 184, 0.3);
  border-radius: 14px;
  padding: 14px 16px;
}

.license-label {
  display: block;
  font-size: 0.8rem;
  color: #cbd5e1;
  font-weight: 600;
  margin-bottom: 8px;
}

.license-input-row {
  display: flex;
  gap: 8px;
}

.license-input {
  flex: 1;
  background: #020617 !important;
  color: #f8fafc !important;
  border: 1px solid #334155 !important;
  font-family: monospace;
  font-size: 0.88rem;
  text-transform: uppercase;
  padding: 10px 12px;
  border-radius: 10px;
}

.btn-activate-key {
  background: #3b82f6;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 0 18px;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-activate-key:hover {
  background: #2563eb;
}

.vip-feedback {
  font-size: 0.78rem;
  margin-top: 6px;
  min-height: 18px;
}

.vip-feedback.success {
  color: #4ade80;
}

.vip-feedback.error {
  color: #f87171;
}

.demo-key-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 0.75rem;
  color: #94a3b8;
}

.btn-link-demo {
  background: none;
  border: none;
  color: #facc15;
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0;
}

/* Tarjeta de VIP Activo */
.vip-active-card {
  text-align: center;
  padding: 14px 10px;
}

.active-check-icon {
  font-size: 2.5rem;
  color: #facc15;
  margin-bottom: 6px;
  animation: floatSlow 3s ease-in-out infinite alternate;
}

.vip-active-card h4 {
  color: #fef08a;
  font-size: 1.25rem;
  margin: 0 0 6px;
}

.vip-active-card p {
  color: #cbd5e1;
  font-size: 0.85rem;
  margin: 0 0 14px;
}

.license-display-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(234, 179, 8, 0.15);
  border: 1px solid rgba(234, 179, 8, 0.4);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  color: #fde047;
}