/* ==========================================================================
   VILLANCICOS DEL MUNDO - PORTAL NAVIDEÑO
   Sistema de diseño navideño premium, animaciones dinámicas y glassmorphism
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     PALETA "NOCHE CÁLIDA DE NAVIDAD"
     Cielo nocturno teñido de verde abeto, luz de vela dorada, acebo rojo
     y nieve cálida. Menos brillo, más calma, más hogar.
     ---------------------------------------------------------------------- */
  --bg-night-sky: #0d1a15;
  --bg-deep-indigo: #12241c;
  --bg-midnight-card: rgba(24, 41, 33, 0.85);
  --bg-glass-card: rgba(28, 46, 37, 0.68);
  --bg-glass-modal: rgba(15, 27, 21, 0.96);

  /* Oro de vela: más cálido y suave que el amarillo puro anterior */
  --gold-primary: #dfa94b;
  --gold-light: #f3dca6;
  --gold-glow: rgba(223, 169, 75, 0.32);
  --gold-burnished: #b8823a;

  /* Rojo acebo / baya, usado con moderación */
  --crimson-holiday: #c0392f;
  --crimson-bright: #d94f43;
  --crimson-glow: rgba(192, 57, 47, 0.32);

  /* Verde abeto: acento secundario real */
  --emerald-pine: #2f7d5d;
  --emerald-light: #6cc79c;
  --emerald-glow: rgba(47, 125, 93, 0.3);

  /* Nieve cálida en lugar de blanco frío */
  --snow-white: #f6efe2;
  --frost-ice: #d9d0c1;
  --ice-blue: #a9c7bb;

  --border-subtle: rgba(246, 239, 226, 0.12);
  --border-gold: rgba(223, 169, 75, 0.3);
  --border-frost: rgba(169, 199, 187, 0.22);

  /* Tipografías */
  --font-display: 'Cinzel Decorative', Georgia, serif;
  --font-festive: 'Mountains of Christmas', cursive, sans-serif;
  --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-lyrics: 'Playfair Display', Georgia, serif;

  /* Sombras y elevaciones — más suaves, menos resplandor */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.38);
  --shadow-lg: 0 22px 50px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 28px 64px rgba(0, 0, 0, 0.55);
  --shadow-gold: 0 0 22px rgba(223, 169, 75, 0.22);
  --shadow-crimson: 0 0 22px rgba(192, 57, 47, 0.25);

  /* Curvaturas — un punto más generosas para un aire más suave */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  /* Ritmo vertical de secciones */
  --section-gap: clamp(3.5rem, 8vw, 6rem);
}

/* Reset y base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  color-scheme: dark;
}

[hidden] {
  display: none !important;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-night-sky);
  /* Luz de vela cálida arriba, verde abeto en el centro, un rescoldo de baya abajo */
  background-image:
    radial-gradient(ellipse 75% 45% at 25% -5%, rgba(232, 182, 96, 0.20) 0%, transparent 58%),
    radial-gradient(ellipse 85% 65% at 88% 30%, rgba(52, 138, 102, 0.20) 0%, transparent 55%),
    radial-gradient(ellipse 95% 55% at 45% 105%, rgba(168, 52, 46, 0.15) 0%, transparent 60%);
  background-attachment: fixed;
  color: var(--snow-white);
  line-height: 1.65;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

/* Canvas de Nieve que flota sobre el fondo */
.snow-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 100;
}

/* ==========================================================================
   ANIMACIÓN DEL TRINEO Y RENOS EN EL CIELO
   ========================================================================== */
.sky-sleigh {
  position: fixed;
  top: 6.5%;
  left: -220px;
  width: 150px;
  height: 50px;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.sky-sleigh.flying {
  opacity: 1;
  animation: flyAcrossSky 17s linear infinite;
}

/* Trineo diminuto (una sombra) surcando el cielo, con leve balanceo */
@keyframes flyAcrossSky {
  0% {
    transform: translate(0, 8px) scale(0.22) rotate(-4deg);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  30% {
    transform: translate(30vw, -12px) scale(0.27) rotate(2deg);
  }
  55% {
    transform: translate(55vw, 5px) scale(0.24) rotate(-3deg);
  }
  80% {
    transform: translate(80vw, -8px) scale(0.28) rotate(2deg);
  }
  92% {
    opacity: 1;
  }
  100% {
    transform: translate(calc(100vw + 260px), 0) scale(0.2) rotate(-2deg);
    opacity: 0;
  }
}

.sleigh-silhouette {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Silueta negra azulada, como una sombra recortada contra el cielo.
   Un tenue borde frío la hace perceptible sobre el fondo oscuro. */
.sleigh-art {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter:
    drop-shadow(0 0 1.5px rgba(148, 197, 253, 0.55))
    drop-shadow(0 0 10px rgba(10, 16, 34, 0.9));
}

/* Nariz roja luminosa del reno guía */
.reno-nariz {
  fill: #ff3b3b;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 5px #ff1e1e) drop-shadow(0 0 12px #ff4d4d);
  animation: narizBrillo 1.1s ease-in-out infinite alternate;
}

@keyframes narizBrillo {
  0% { opacity: 0.75; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1.3); }
}

/* Estela que se desvanece tras el trineo */
.sleigh-trail {
  position: absolute;
  z-index: 1;
  right: 62%;
  top: 46%;
  width: 340px;
  height: 10px;
  transform: translateY(-50%);
  background: linear-gradient(to left,
    rgba(226, 236, 255, 0.7) 0%,
    rgba(169, 199, 187, 0.3) 22%,
    rgba(169, 199, 187, 0.12) 55%,
    transparent 100%);
  border-radius: 50%;
  filter: blur(2px);
  animation: sleighTrailFade 1.4s ease-out infinite;
}

@keyframes sleighTrailFade {
  0%   { opacity: 0.85; width: 120px; }
  70%  { opacity: 0.25; width: 320px; }
  100% { opacity: 0;    width: 400px; }
}

/* ==========================================================================
   BARRA SUPERIOR DE UTILIDADES & CUENTA REGRESIVA
   ========================================================================== */
.top-nav-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(12, 23, 18, 0.88);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--border-subtle);
  padding: 0.7rem 1.6rem;
}

.nav-container {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.7rem 1rem;
}

.brand-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: 0.03em;
}

.holiday-icon {
  font-size: 1.15rem;
  animation: spinSlow 20s linear infinite;
}

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

/* Widget cuenta regresiva */
.countdown-widget {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(223, 169, 75, 0.08);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-full);
  padding: 0.35rem 0.95rem;
  font-size: 0.8rem;
}

.countdown-label {
  color: var(--gold-light);
  font-weight: 500;
  opacity: 0.9;
}

.countdown-digits {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-variant-numeric: tabular-nums;
}

.cd-unit b {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
}

.cd-sep {
  color: var(--gold-primary);
  opacity: 0.8;
}

/* Controles de la barra */
.nav-controls {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.control-btn {
  background: rgba(246, 239, 226, 0.06);
  border: 1px solid var(--border-subtle);
  color: var(--snow-white);
  padding: 0.42rem 0.85rem;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.control-btn:hover {
  background: rgba(246, 239, 226, 0.12);
  border-color: var(--border-gold);
  transform: translateY(-1px);
}

.control-btn.highlight-gold {
  background: rgba(223, 169, 75, 0.16);
  border-color: var(--border-gold);
  color: var(--gold-light);
}

/* ==========================================================================
   HERO SECTION & AURORA BOREAL
   ========================================================================== */
.hero-section {
  position: relative;
  text-align: center;
  padding: clamp(3rem, 7vw, 5rem) 1.5rem clamp(2.5rem, 5vw, 3.5rem);
  overflow: hidden;
}

.aurora-glow {
  position: absolute;
  top: -25%;
  left: 5%;
  width: 90%;
  height: 130%;
  background: radial-gradient(ellipse at center, rgba(47, 125, 93, 0.16) 0%, rgba(223, 169, 75, 0.08) 45%, transparent 72%);
  filter: blur(70px);
  pointer-events: none;
  z-index: 1;
  animation: auroraPulse 16s ease-in-out infinite alternate;
}

@keyframes auroraPulse {
  0% { transform: scale(1) translateY(0); opacity: 0.5; }
  100% { transform: scale(1.08) translateY(-14px); opacity: 0.75; }
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
}

.hero-badge {
  display: inline-block;
  font-family: var(--font-festive);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  color: var(--gold-light);
  background: rgba(223, 169, 75, 0.1);
  border: 1px solid var(--border-gold);
  padding: 0.35rem 1.2rem;
  border-radius: var(--radius-full);
  margin-bottom: 1.4rem;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 5.5vw, 4rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: 0.01em;
  background: linear-gradient(120deg, #fbf3e4 25%, #f3dca6 65%, #dfa94b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(223, 169, 75, 0.2));
  margin-bottom: 1.3rem;
}

.hero-subtitle {
  font-size: 1.08rem;
  color: var(--frost-ice);
  max-width: 640px;
  margin: 0 auto 2.4rem;
  font-weight: 300;
  line-height: 1.7;
}

.hero-subtitle strong {
  color: var(--gold-light);
  font-weight: 600;
}

.hero-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.stat-pill {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(246, 239, 226, 0.05);
  border: 1px solid var(--border-subtle);
  padding: 0.42rem 0.95rem;
  border-radius: var(--radius-full);
  font-size: 0.86rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.stat-pill:hover {
  background: rgba(246, 239, 226, 0.1);
  border-color: var(--border-gold);
  transform: translateY(-2px);
}

.stat-flag {
  font-size: 1.2rem;
}

.stat-count {
  font-weight: 700;
  color: var(--gold-light);
}

.stat-name {
  color: var(--frost-ice);
}

/* ==========================================================================
   SECCIÓN PUEBLO NAVIDEÑO ANIMADO (Snowy Christmas Village)
   ========================================================================== */
.village-section {
  max-width: 1240px;
  margin: 0 auto var(--section-gap);
  padding: 0 1.5rem;
}

.village-header {
  text-align: center;
  margin-bottom: 2.2rem;
}

.section-heading {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  font-weight: 700;
  color: var(--snow-white);
  margin-bottom: 0.7rem;
  letter-spacing: 0.01em;
}

/* Filigrana bajo los títulos de sección centrados */
.village-header .section-heading::after,
.curiosities-header .section-title::after {
  content: "";
  display: block;
  width: 84px;
  height: 3px;
  margin: 0.85rem auto 0;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, transparent, var(--emerald-pine) 20%, var(--gold-primary) 50%, var(--crimson-holiday) 80%, transparent);
  opacity: 0.85;
}

.heading-ornament {
  color: var(--emerald-light);
  font-size: 0.85em;
  vertical-align: middle;
  opacity: 0.7;
  margin: 0 0.3rem;
}

.section-desc {
  color: var(--frost-ice);
  max-width: 620px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.7;
}

.village-scene-wrapper {
  background: var(--bg-midnight-card);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg), var(--shadow-gold);
  position: relative;
}

.village-scene-card {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 620px;
  overflow: hidden;
  background: #101f18;
}

.village-main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s ease;
}

.village-scene-card:hover .village-main-image {
  transform: scale(1.02);
}

/* Hotspots y elementos interactivos sobre la imagen */
.interactive-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.village-hotspot {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.village-hotspot:hover {
  transform: scale(1.18);
}

.hotspot-badge {
  background: rgba(12, 23, 18, 0.85);
  border: 1px solid var(--gold-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-full);
  margin-top: 0.3rem;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   ESCENA ÚNICA DEL PUEBLO NAVIDEÑO CON MOVIMIENTO REAL DE VIDEO
   ========================================================================== */
.village-living-video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

/* ==========================================================================
   ÁRBOL DE NAVIDAD: LUCES CENTELLEANDO DE ALTA CLASE (POSICIÓN EXACTA)
   ========================================================================== */
.classy-tree-installation {
  position: absolute;
  top: 17%;
  left: 42%;
  width: 17%;
  height: 54%;
  pointer-events: auto;
  cursor: pointer;
  z-index: 15;
}

.tree-star-crown {
  position: absolute;
  top: 1.5%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 25;
}

.tree-star-crown .star-core {
  font-size: 1.85rem;
  display: block;
  filter: drop-shadow(0 0 16px #fde047);
  animation: starCrownBreathe 2s ease-in-out infinite alternate;
}

.tree-star-crown .star-aura {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(254, 240, 138, 0.8) 0%, rgba(223, 169, 75, 0.3) 55%, transparent 75%);
  border-radius: 50%;
  pointer-events: none;
  animation: starAuraPulse 2.6s ease-in-out infinite alternate;
}

@keyframes starCrownBreathe {
  0% { transform: scale(0.92); filter: drop-shadow(0 0 12px #fde047); }
  100% { transform: scale(1.22); filter: drop-shadow(0 0 28px #f59e0b) drop-shadow(0 0 42px rgba(254, 240, 138, 0.6)); }
}

@keyframes starAuraPulse {
  0% { transform: translate(-50%, -50%) scale(0.85); opacity: 0.55; }
  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0.95; }
}

/* Micro-luces centelleando sobre la copa cónica del abeto */
.tree-fairy-canopy {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fairy-bulb {
  position: absolute;
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  pointer-events: none;
  animation: classyTwinkle 2s ease-in-out infinite alternate;
}

@keyframes classyTwinkle {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.7);
    box-shadow: 0 0 3px currentColor;
  }
  50% {
    opacity: 1;
    transform: scale(1.45);
    box-shadow: 0 0 10px currentColor, 0 0 22px currentColor;
  }
}

/* Tonos nobles de las micro-luces */
.bulb-gold {
  color: #fde047;
  background-color: #f3dca6;
}

.bulb-champagne {
  color: #fffbeb;
  background-color: #fef3c7;
}

.bulb-ruby {
  color: #ef4444;
  background-color: #f87171;
}

.bulb-emerald {
  color: #10b981;
  background-color: #34d399;
}

.bulb-ice {
  color: #93c5fd;
  background-color: #bfdbfe;
}

/* Puntos atmosféricos interactivos sutiles */
.hotspot-church {
  position: absolute;
  top: 26%;
  left: 36%;
  width: 4.5%;
  height: 18%;
  cursor: pointer;
  z-index: 14;
}

.church-glow-beacon {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

.hotspot-church:hover .church-glow-beacon {
  background: radial-gradient(circle, rgba(254, 240, 138, 0.25) 0%, transparent 80%);
  box-shadow: 0 0 25px rgba(254, 240, 138, 0.4);
}

.hotspot-choir {
  position: absolute;
  top: 66%;
  left: 47%;
  width: 9%;
  height: 14%;
  cursor: pointer;
  z-index: 14;
}

.choir-lantern-halo {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

.hotspot-choir:hover .choir-lantern-halo {
  background: radial-gradient(ellipse at center, rgba(254, 243, 199, 0.3) 0%, transparent 85%);
  box-shadow: 0 0 30px rgba(245, 158, 11, 0.35);
}

/* Humo animado de chimeneas */
.village-chimney-smoke {
  position: absolute;
  width: 14px;
  height: 14px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  filter: blur(4px);
  pointer-events: none;
  animation: smokeRise 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.smoke-1 { top: 22%; left: 74px; animation-delay: 0s; }
.smoke-2 { top: 38%; left: 38%; animation-delay: 1.2s; }
.smoke-3 { top: 28%; right: 140px; animation-delay: 2.1s; }

@keyframes smokeRise {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0.7; }
  50% { transform: translate(8px, -28px) scale(1.4); opacity: 0.4; }
  100% { transform: translate(16px, -60px) scale(2.2); opacity: 0; }
}

/* Barra inferior del pueblo */
.village-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: rgba(13, 24, 19, 0.9);
  border-top: 1px solid var(--border-subtle);
}

.village-quote {
  font-style: italic;
  font-family: var(--font-lyrics);
  color: var(--gold-light);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.quote-symbol {
  font-size: 1.3rem;
  color: var(--gold-primary);
  font-style: normal;
}

.village-interactive-buttons {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.pill-action-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-subtle);
  color: #fff;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-family: var(--font-body);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
}

.pill-action-btn:hover {
  background: var(--gold-primary);
  color: #0c1712;
  border-color: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(223, 169, 75, 0.35);
}

/* ==========================================================================
   BARRA DE REPRODUCCIÓN FLOTANTE (MINI-PLAYER WEB AUDIO)
   ========================================================================== */
.music-player-bar {
  position: sticky;
  top: 54px;
  z-index: 45;
  background: rgba(13, 24, 19, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-gold);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  padding: 0.6rem 1.5rem;
  transition: all 0.3s ease;
}

.player-content {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.player-left {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.vinyl-disc {
  width: 42px;
  height: 42px;
  background: radial-gradient(circle, #334155 0%, #0f172a 70%, #ca8a04 100%);
  border: 2px solid var(--gold-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 0 10px rgba(223, 169, 75, 0.4);
}

.vinyl-disc.playing {
  animation: spinSlow 3s linear infinite;
}

.track-info {
  display: flex;
  flex-direction: column;
}

.now-playing-label {
  font-size: 0.72rem;
  color: var(--gold-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.track-title {
  font-size: 0.95rem;
  color: #fff;
  white-space: nowrap;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.track-origin {
  font-size: 0.75rem;
  color: var(--frost-ice);
}

/* Ecualizador animado */
.sound-wave-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 22px;
  padding: 0 0.5rem;
}

.wave-bar {
  width: 3px;
  height: 6px;
  background: var(--gold-primary);
  border-radius: 2px;
  transition: height 0.2s ease;
}

.sound-wave-bars.active .wave-bar:nth-child(1) { animation: soundWave 0.8s ease-in-out infinite alternate; }
.sound-wave-bars.active .wave-bar:nth-child(2) { animation: soundWave 0.5s ease-in-out infinite 0.2s alternate; }
.sound-wave-bars.active .wave-bar:nth-child(3) { animation: soundWave 1.1s ease-in-out infinite 0.1s alternate; }
.sound-wave-bars.active .wave-bar:nth-child(4) { animation: soundWave 0.6s ease-in-out infinite 0.3s alternate; }
.sound-wave-bars.active .wave-bar:nth-child(5) { animation: soundWave 0.9s ease-in-out infinite 0.15s alternate; }

@keyframes soundWave {
  0% { height: 4px; }
  100% { height: 22px; background: var(--crimson-bright); }
}

.player-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.track-dropdown {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-subtle);
  color: #fff;
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-family: var(--font-body);
  max-width: 220px;
}

.track-dropdown option {
  background: #101f18;
  color: #fff;
}

.player-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.player-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.08);
}

.player-btn.primary {
  background: var(--gold-primary);
  color: #0c1712;
  border-color: var(--gold-light);
  font-weight: 700;
  box-shadow: 0 0 12px rgba(223, 169, 75, 0.5);
}

.volume-container {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.9rem;
}

.volume-container input[type="range"] {
  width: 70px;
  accent-color: var(--gold-primary);
}

/* ==========================================================================
   CATÁLOGO & BARRA DE FILTROS / BÚSQUEDA
   ========================================================================== */
.catalog-section {
  max-width: 1240px;
  margin: 0 auto var(--section-gap);
  padding: 0 1.5rem;
}

.catalog-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 2.2rem;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.2vw, 2.4rem);
  font-weight: 700;
  color: var(--snow-white);
  letter-spacing: 0.01em;
  margin-bottom: 0.4rem;
}

.section-subtitle {
  color: var(--frost-ice);
  font-size: 1rem;
  line-height: 1.7;
}

.surprise-btn {
  background: linear-gradient(135deg, var(--crimson-bright), #b91c1c);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  padding: 0.6rem 1.4rem;
  border-radius: var(--radius-full);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-crimson);
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.surprise-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 0 25px rgba(217, 79, 67, 0.6);
}

/* Barra de Filtros */
.filters-search-toolbar {
  background: var(--bg-glass-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.2rem;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.language-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tab-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid transparent;
  color: var(--frost-ice);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.25s ease;
}

.tab-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.tab-btn.active {
  background: linear-gradient(135deg, rgba(223, 169, 75, 0.25), rgba(192, 57, 47, 0.2));
  border-color: var(--gold-primary);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 0 14px rgba(223, 169, 75, 0.3);
}

.tab-badge {
  background: rgba(0, 0, 0, 0.4);
  border-radius: var(--radius-full);
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
  color: var(--gold-light);
}

.search-sort-box {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.search-input-wrapper {
  flex: 1;
  min-width: 260px;
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 1rem;
  color: var(--frost-ice);
  pointer-events: none;
}

.search-input-wrapper input {
  width: 100%;
  background: rgba(12, 23, 18, 0.8);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 0.7rem 2.6rem 0.7rem 2.8rem;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: all 0.25s ease;
}

.search-input-wrapper input:focus {
  outline: none;
  border-color: var(--gold-primary);
  box-shadow: 0 0 16px rgba(223, 169, 75, 0.35);
}

.clear-btn {
  position: absolute;
  right: 0.8rem;
  background: none;
  border: none;
  color: var(--frost-ice);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0.2rem;
}

.sort-select-wrapper select {
  background: rgba(12, 23, 18, 0.8);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: #fff;
  padding: 0.7rem 1.2rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  cursor: pointer;
}

.results-feedback-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  color: var(--frost-ice);
  font-size: 0.88rem;
}

.active-tag {
  background: rgba(223, 169, 75, 0.15);
  border: 1px solid var(--gold-primary);
  color: var(--gold-light);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
}

/* ==========================================================================
   CUADRÍCULA DE TARJETAS DE VILLANCICOS (88 CARDS)
   ========================================================================== */
.carols-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.6rem;
}

.carol-card {
  background: var(--bg-glass-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  box-shadow: var(--shadow-sm);
}

.carol-card:hover {
  transform: translateY(-5px);
  border-color: var(--border-gold);
  box-shadow: var(--shadow-md);
}

/* Encabezado visual de la tarjeta con ilustración temática */
.card-art-banner {
  position: relative;
  width: 100%;
  height: 140px;
  overflow: hidden;
  background: #101f18;
}

.card-art-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.carol-card:hover .card-art-img {
  transform: scale(1.08);
}

.card-art-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(19, 33, 26, 0.95) 0%, rgba(19, 33, 26, 0.3) 60%, transparent 100%);
}

.card-badge-row {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  right: 0.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}

.card-id-pill {
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid var(--border-gold);
  color: var(--gold-light);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-full);
}

.card-fav-btn {
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  transition: transform 0.2s ease, background 0.2s ease;
}

.card-fav-btn:hover {
  transform: scale(1.2);
  background: rgba(192, 57, 47, 0.3);
}

.card-fav-btn.is-fav {
  background: rgba(192, 57, 47, 0.8);
  border-color: #f87171;
}

.card-lang-pill {
  position: absolute;
  bottom: 0.6rem;
  left: 0.8rem;
  z-index: 2;
  font-size: 0.75rem;
  background: rgba(13, 24, 19, 0.85);
  border: 1px solid var(--border-subtle);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  color: var(--snow-white);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* Cuerpo de la tarjeta */
.card-content {
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.25rem;
  line-height: 1.3;
}

.card-theme {
  font-size: 0.78rem;
  color: var(--gold-burnished);
  margin-bottom: 0.8rem;
  font-weight: 500;
}

.card-lyrics-preview {
  font-family: var(--font-lyrics);
  font-size: 0.88rem;
  color: var(--frost-ice);
  font-style: italic;
  line-height: 1.5;
  margin-bottom: 1.2rem;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
}

.card-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
}

.card-btn-primary {
  flex: 1;
  background: rgba(223, 169, 75, 0.14);
  border: 1px solid var(--border-gold);
  color: var(--gold-light);
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  text-align: center;
}

.card-btn-primary:hover {
  background: var(--gold-primary);
  color: #17130a;
  transform: translateY(-1px);
}

.card-btn-melody {
  background: rgba(223, 169, 75, 0.12);
  border: 1px solid rgba(223, 169, 75, 0.35);
  color: var(--gold-light);
  border-radius: var(--radius-sm);
  min-width: 44px;
  min-height: 40px;
  padding: 0 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.card-btn-melody:hover {
  background: rgba(223, 169, 75, 0.25);
  border-color: var(--gold-primary);
  color: #fff;
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 0 16px rgba(223, 169, 75, 0.45);
}

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

.card-btn-melody.is-playing {
  background: linear-gradient(135deg, var(--gold-primary), #f59e0b);
  color: #0c1712;
  border-color: #f3dca6;
  box-shadow: 0 0 20px rgba(223, 169, 75, 0.85);
  animation: cardMelodyPulse 1.2s infinite ease-in-out;
}

@keyframes cardMelodyPulse {
  0%, 100% {
    transform: scale(1.02);
    box-shadow: 0 0 12px rgba(223, 169, 75, 0.7);
  }
  50% {
    transform: scale(1.14);
    box-shadow: 0 0 24px rgba(223, 169, 75, 1);
  }
}

/* Botón de acceso al panel de estadísticas en el pie */
.footer-admin-row {
  margin-top: 1.8rem;
  display: flex;
  justify-content: center;
}

.footer-stats-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--frost-ice);
  padding: 0.55rem 1.25rem;
  border-radius: var(--radius-full);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.footer-stats-btn:hover {
  background: rgba(223, 169, 75, 0.16);
  border-color: var(--gold-primary);
  color: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(223, 169, 75, 0.25);
}

.highlight-gold {
  background: rgba(223, 169, 75, 0.18) !important;
  border-color: var(--gold-primary) !important;
  color: var(--gold-light) !important;
  text-decoration: none !important;
  font-weight: 600;
}

.highlight-gold:hover {
  background: var(--gold-primary) !important;
  color: #0c1712 !important;
}

/* ==========================================================================
   MODAL DIALOG DE LETRA COMPLETA (<dialog>)
   ========================================================================== */
.lyrics-dialog {
  border: none;
  background: transparent;
  padding: 0;
  max-width: 820px;
  width: 90vw;
  max-height: 90vh;
  margin: auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(223, 169, 75, 0.35);
  color: var(--snow-white);
  z-index: 1000;
}

.lyrics-dialog::backdrop {
  background: rgba(7, 14, 11, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.dialog-inner {
  background: var(--bg-glass-modal);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

.dialog-header {
  position: relative;
  background: rgba(19, 33, 26, 0.7);
  border-bottom: 1px solid var(--border-subtle);
}

.dialog-hero-banner {
  height: 180px;
  position: relative;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.2rem;
}

.banner-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 24, 19, 0.95) 0%, rgba(13, 24, 19, 0.4) 60%, transparent 100%);
}

.banner-badge-box {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.lang-tag, .theme-tag {
  background: rgba(12, 23, 18, 0.85);
  border: 1px solid var(--border-gold);
  color: var(--gold-light);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-full);
}

.fav-action-btn {
  background: rgba(12, 23, 18, 0.85);
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.fav-action-btn:hover {
  transform: scale(1.15);
}

.dialog-close-btn {
  position: relative;
  z-index: 2;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid var(--border-subtle);
  color: #fff;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  transition: all 0.2s ease;
}

.dialog-close-btn:hover {
  background: var(--crimson-holiday);
  transform: rotate(90deg);
}

.dialog-title-container {
  padding: 1rem 1.5rem 0.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.dialog-id-badge {
  background: rgba(223, 169, 75, 0.15);
  border: 1px solid var(--gold-primary);
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 900;
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-md);
}

.dialog-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.dialog-trivia {
  font-size: 0.85rem;
  color: var(--frost-ice);
  margin-top: 0.3rem;
}

/* Toolbar del dialog */
.dialog-toolbar {
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  background: rgba(0, 0, 0, 0.25);
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tool-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-subtle);
  color: var(--snow-white);
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-family: var(--font-body);
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.2s ease;
}

.tool-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: var(--gold-primary);
}

.tool-btn.highlight {
  background: linear-gradient(135deg, var(--gold-primary), var(--crimson-holiday));
  color: #0c1712;
  font-weight: 700;
  border-color: var(--gold-light);
}

.font-zoom-ctrl {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(255, 255, 255, 0.06);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
}

.zoom-label {
  font-size: 0.78rem;
  color: var(--frost-ice);
}

.zoom-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.78rem;
}

/* Cuerpo con Letra */
.dialog-body {
  padding: 1.8rem 2.2rem;
  overflow-y: auto;
  flex: 1;
  scroll-behavior: smooth;
}

.lyrics-sheet {
  font-family: var(--font-lyrics);
  font-size: 1.08rem;
  line-height: 1.8;
  color: #f1f5f9;
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
}

.lyrics-stanza {
  margin-bottom: 2rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-md);
  transition: background 0.3s ease, transform 0.3s ease;
  white-space: pre-line;
}

/* Modo Karaoke: Resalta la estrofa actual */
.lyrics-stanza.karaoke-active {
  background: rgba(223, 169, 75, 0.16);
  border: 1px dashed var(--gold-primary);
  transform: scale(1.03);
  color: #fff;
  text-shadow: 0 0 10px rgba(254, 240, 138, 0.6);
}

.lyrics-chorus-tag {
  display: block;
  font-family: var(--font-festive);
  font-size: 1.15rem;
  color: var(--gold-light);
  margin-bottom: 0.4rem;
  letter-spacing: 0.05em;
}

/* Pie del Dialog */
.dialog-footer {
  padding: 1rem 1.5rem;
  background: rgba(13, 24, 19, 0.9);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.dialog-nav-buttons {
  display: flex;
  gap: 0.5rem;
}

.nav-carol-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-subtle);
  color: #fff;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.2s;
}

.nav-carol-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: var(--gold-primary);
}

.primary-pill-btn {
  background: var(--gold-primary);
  color: #0c1712;
  border: 1px solid var(--gold-light);
  padding: 0.5rem 1.2rem;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
}

.primary-pill-btn:hover {
  background: var(--gold-light);
  transform: translateY(-1px);
}

/* ==========================================================================
   TOAST NOTIFICATION & FOOTER
   ========================================================================== */
.toast-notification {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: rgba(19, 33, 26, 0.95);
  border: 1px solid var(--gold-primary);
  color: #fff;
  padding: 0.75rem 1.4rem;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-gold), var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  z-index: 2000;
  transform: translateY(120px);
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.toast-notification.show {
  transform: translateY(0);
  opacity: 1;
}

.site-footer {
  position: relative;
  background: #050a16;
  padding: 4rem 1.5rem 3rem;
  text-align: center;
  border-top: 1px solid var(--border-subtle);
}

.footer-snow-drift {
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
  background: radial-gradient(ellipse at 50% 100%, #f8fafc 40%, rgba(248, 250, 252, 0.4) 70%, transparent 100%);
  filter: blur(2px);
}

.footer-tree-row {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  letter-spacing: 0.5rem;
}

.footer-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--gold-light);
  margin-bottom: 0.5rem;
}

.footer-text {
  color: var(--frost-ice);
  font-size: 0.95rem;
  max-width: 580px;
  margin: 0 auto 1.5rem;
}

.footer-credits {
  font-size: 0.85rem;
  color: rgba(248, 250, 252, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.footer-sep {
  color: var(--gold-primary);
}

/* ==========================================================================
   RESPONSIVIDAD Y OPTIMIZACIONES MÓVILES
   ========================================================================== */
@media (max-width: 768px) {
  .hero-section {
    padding: 2.2rem 1rem 1.5rem;
  }

  /* Portada más escueta en el móvil: la insignia sobra junto al título */
  .hero-badge {
    display: none;
  }
  .hero-subtitle {
    font-size: 1rem;
    margin-bottom: 1.8rem;
  }
  .home-menu-prompt {
    margin-bottom: 0.9rem;
  }

  .top-nav-bar {
    padding: 0.5rem 1rem;
  }

  .nav-container {
    justify-content: center;
  }

  .countdown-widget {
    order: 3;
    width: 100%;
    justify-content: center;
  }

  .village-scene-card {
    aspect-ratio: 4 / 3;
  }

  .carols-grid {
    grid-template-columns: 1fr;
  }

  .dialog-body {
    padding: 1.2rem 1rem;
  }

  .music-player-bar {
    top: 0;
  }
}

/* ==========================================================================
   ESTELA MÁGICA DE ESTRELLAS CON EL RATÓN (STARDUST CURSOR TRAIL)
   ========================================================================== */
.stardust-particle {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  z-index: 999;
  animation: stardustFade 0.9s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes stardustFade {
  0% {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(25px) scale(0.2) rotate(180deg);
  }
}

/* ==========================================================================
   CHIP DE AUTOR EN TARJETAS DEL CATÁLOGO
   ========================================================================== */
.card-author-chip {
  font-size: 0.76rem;
  color: var(--gold-light);
  background: rgba(223, 169, 75, 0.12);
  border: 1px solid rgba(223, 169, 75, 0.28);
  border-radius: var(--radius-full);
  padding: 0.18rem 0.65rem;
  margin-bottom: 0.45rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.author-icon {
  font-size: 0.85rem;
}

/* ==========================================================================
   FICHA HISTÓRICA EN EL MODAL DE LETRA (AUTOR Y REGISTROS ANTIGUOS)
   ========================================================================== */
.lyrics-history-card {
  background: linear-gradient(135deg, rgba(24, 41, 33, 0.92) 0%, rgba(15, 27, 21, 0.96) 100%);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.history-card-header {
  margin-bottom: 0.65rem;
}

.history-card-badge {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gold-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(223, 169, 75, 0.14);
  padding: 0.22rem 0.65rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(223, 169, 75, 0.35);
  display: inline-block;
}

.history-row {
  margin-bottom: 0.45rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #e2e8f0;
}

.history-row:last-child {
  margin-bottom: 0;
}

.history-label {
  color: var(--gold-light);
  font-weight: 600;
  margin-right: 0.35rem;
}

.history-val {
  color: #f8fafc;
}

/* ==========================================================================
   SECCIÓN DE CURIOSIDADES NAVIDEÑAS EN LA HISTORIA
   ========================================================================== */
.curiosities-section {
  padding: 4.5rem 1.5rem;
  max-width: 1380px;
  margin: 0 auto;
}

.curiosities-container {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}

.curiosities-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}

.curiosities-badge {
  display: inline-block;
  background: rgba(223, 169, 75, 0.15);
  border: 1px solid var(--border-gold);
  color: var(--gold-light);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 1rem;
  border-radius: var(--radius-full);
  margin-bottom: 0.8rem;
}

.curiosities-filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

.curiosity-filter-btn {
  background: var(--bg-glass-card);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--frost-ice);
  padding: 0.45rem 1.1rem;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  backdrop-filter: blur(10px);
}

.curiosity-filter-btn:hover {
  border-color: var(--gold-primary);
  color: var(--gold-light);
  transform: translateY(-2px);
}

.curiosity-filter-btn.active {
  background: var(--gold-primary);
  color: var(--bg-night-sky);
  border-color: var(--gold-light);
  box-shadow: 0 0 15px rgba(223, 169, 75, 0.4);
}

.curiosities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(295px, 1fr));
  gap: 2.2rem 1.8rem;
  padding-top: 1.2rem;
}

/* ==========================================================================
   FICHAS DE CUADERNO DE CRÓNICAS NAVIDEÑAS
   ========================================================================== */
.notebook-index-card {
  position: relative;
  background-color: #fdfcf7;
  /* Pautado horizontal de cuaderno (líneas tenues cada 26px) */
  background-image: repeating-linear-gradient(
    #fdfcf7,
    #fdfcf7 25px,
    #e2e8f0 25px,
    #e2e8f0 26px
  );
  /* Margen izquierdo de libreta en tono carmesí suave */
  border: 1px solid #e2dcd2;
  border-left: 4.5px solid #f87171;
  border-radius: 4px 8px 8px 4px;
  padding: 1.5rem 1.3rem 1.1rem 1.6rem;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
  cursor: default;
}

/* Ligera inclinación natural alterna de fichas de cuaderno sobre la mesa */
.notebook-index-card:nth-child(3n+1) {
  transform: rotate(-1.2deg);
}

.notebook-index-card:nth-child(3n+2) {
  transform: rotate(1.4deg);
}

.notebook-index-card:nth-child(3n) {
  transform: rotate(-0.7deg);
}

.notebook-index-card:hover {
  transform: rotate(0deg) translateY(-8px) scale(1.03);
  box-shadow: 0 22px 42px rgba(0, 0, 0, 0.6), 0 0 20px rgba(254, 240, 138, 0.3);
  z-index: 10;
}

/* Tira de cinta washi adhesiva navideña en la parte superior */
.notebook-tape-strip {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%) rotate(-1deg);
  width: 85px;
  height: 22px;
  background: rgba(192, 57, 47, 0.55);
  border: 1px dashed rgba(254, 226, 226, 0.7);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(2px);
  pointer-events: none;
}

.notebook-index-card:nth-child(even) .notebook-tape-strip {
  background: rgba(217, 119, 6, 0.55);
  border-color: rgba(254, 243, 199, 0.7);
  transform: translateX(-50%) rotate(1.8deg);
}

/* Fila superior de la ficha */
.notebook-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px dashed #cbd5e1;
}

.notebook-index-box {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.notebook-serial {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.06em;
}

.notebook-cat-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: #9a3412;
  background: #ffedd5;
  border: 1px solid #fed7aa;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  display: inline-block;
  width: fit-content;
}

/* Sello postal / cuño de fecha en tinta roja de época */
.notebook-stamp-date {
  border: 2px dashed #dc2626;
  color: #dc2626;
  border-radius: 4px;
  padding: 0.15rem 0.55rem;
  text-align: center;
  transform: rotate(3deg);
  line-height: 1.1;
  font-family: 'Courier New', Courier, monospace;
  background: rgba(254, 242, 242, 0.6);
  user-select: none;
}

.stamp-year {
  font-size: 0.96rem;
  font-weight: 900;
  display: block;
}

.stamp-ring {
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  display: block;
  opacity: 0.85;
}

/* Título de la anotación */
.notebook-entry-title {
  font-family: var(--font-display);
  font-size: 1.14rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 0.65rem;
  line-height: 1.35;
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}

.notebook-entry-title .entry-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* Texto del apunte pautado sobre las líneas del cuaderno */
.notebook-lined-body {
  flex-grow: 1;
}

.notebook-entry-text {
  font-size: 0.89rem;
  line-height: 26px; /* Ajuste milimétrico con el pautado de 26px */
  color: #334155;
  font-weight: 500;
  margin: 0;
}

/* Pie de la ficha de libreta */
.notebook-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding-top: 0.45rem;
  border-top: 1px solid #e2e8f0;
  font-size: 0.72rem;
  color: #94a3b8;
  font-family: 'Courier New', Courier, monospace;
}

.notebook-archive-tag {
  color: #059669;
  font-weight: 700;
}

/* ==========================================================================
   MODAL DE ESTADÍSTICAS Y CONTADOR DE VISITAS (<dialog>)
   ========================================================================== */
.stats-dialog {
  border: none;
  background: transparent;
  padding: 0;
  max-width: 780px;
  width: 92vw;
  max-height: 90vh;
  margin: auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(223, 169, 75, 0.25);
  color: var(--snow-white);
  z-index: 1100;
}

.stats-dialog::backdrop {
  background: rgba(7, 14, 11, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.stats-dialog-inner {
  background: var(--bg-glass-modal);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

.stats-dialog-header {
  padding: 1.4rem 1.8rem;
  background: linear-gradient(135deg, rgba(19, 33, 26, 0.95) 0%, rgba(28, 51, 40, 0.8) 100%);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.stats-badge {
  display: inline-block;
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.5);
  color: #6ee7b7;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full);
  margin-bottom: 0.4rem;
}

.stats-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
  font-weight: 700;
  color: #fff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.stats-subtitle {
  font-size: 0.85rem;
  color: var(--frost-ice);
  margin: 0.25rem 0 0;
}

.stats-dialog-body {
  padding: 1.6rem 1.8rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

/* Tarjeta Hero Principal */
.stats-hero-card {
  background: linear-gradient(135deg, rgba(223, 169, 75, 0.15) 0%, rgba(16, 185, 129, 0.12) 100%);
  border: 1px solid rgba(223, 169, 75, 0.4);
  border-radius: var(--radius-md);
  padding: 1.6rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.stats-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6ee7b7;
  background: rgba(4, 120, 87, 0.25);
  border: 1px solid rgba(110, 231, 183, 0.3);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  margin-bottom: 0.8rem;
}

.live-dot {
  width: 8px;
  height: 8px;
  background-color: #10b981;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 10px #10b981;
  animation: pulse-live 1.8s infinite ease-in-out;
}

@keyframes pulse-live {
  0% { transform: scale(0.9); opacity: 0.7; box-shadow: 0 0 4px #10b981; }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 12px #10b981; }
  100% { transform: scale(0.9); opacity: 0.7; box-shadow: 0 0 4px #10b981; }
}

.stats-hero-number-box {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.4rem 0;
}

.stats-hero-number {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 4rem);
  font-weight: 900;
  color: var(--gold-light);
  line-height: 1;
  text-shadow: 0 0 24px rgba(223, 169, 75, 0.5);
}

.stats-hero-unit {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--frost-ice);
}

.stats-hero-desc {
  font-size: 0.86rem;
  color: rgba(248, 250, 252, 0.75);
  margin: 0.3rem auto 0;
  max-width: 520px;
}

/* Cuadrícula de 4 tarjetas */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

.stat-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 1.1rem 1rem;
  text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--gold-primary);
  background: rgba(255, 255, 255, 0.08);
}

.stat-icon {
  font-size: 1.5rem;
  margin-bottom: 0.4rem;
}

.stat-value {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 0.25rem;
}

.stat-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--frost-ice);
  margin-bottom: 0.2rem;
}

.stat-sub {
  font-size: 0.7rem;
  color: rgba(248, 250, 252, 0.45);
}

/* Fechas de visitas */
.stats-info-box {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1rem 1.4rem;
}

.stats-time-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.84rem;
}

.stats-time-label {
  color: var(--frost-ice);
  margin-right: 0.4rem;
}

.stats-time-row strong {
  color: #fff;
}

/* Tabla de historial */
.stats-history-section {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.stats-section-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--gold-light);
  margin: 0;
}

.stats-table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

.stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  text-align: left;
}

.stats-table th {
  background: rgba(255, 255, 255, 0.08);
  padding: 0.65rem 0.9rem;
  color: var(--gold-light);
  font-weight: 600;
  border-bottom: 1px solid var(--border-subtle);
}

.stats-table td {
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: rgba(248, 250, 252, 0.85);
}

.stats-table tr:hover td {
  background: rgba(255, 255, 255, 0.04);
}

/* Banner de Tips de acceso */
.stats-tip-banner {
  background: rgba(47, 125, 93, 0.14);
  border: 1px solid rgba(47, 125, 93, 0.35);
  border-radius: var(--radius-md);
  padding: 1rem 1.2rem;
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  font-size: 0.83rem;
  color: var(--frost-ice);
}

.tip-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
}

.tip-content strong {
  display: block;
  color: var(--gold-light);
  margin-bottom: 0.35rem;
}

.tip-content p {
  margin: 0;
  line-height: 1.55;
}

.tip-content kbd {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  padding: 0.15rem 0.45rem;
  font-size: 0.76rem;
  font-family: monospace;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}

/* Footer del dialog de estadísticas */
.stats-dialog-footer {
  padding: 1.1rem 1.8rem;
  background: rgba(13, 24, 19, 0.9);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.stats-footer-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.tool-btn.danger-hover:hover {
  background: rgba(225, 29, 72, 0.3) !important;
  border-color: #f43f5e !important;
  color: #ffe4e6 !important;
}

/* ==========================================================================
   MEJORAS: ACCESIBILIDAD, FOCO DE TECLADO Y AJUSTES RESPONSIVE
   ========================================================================== */

/* Anillo de foco visible y coherente para navegación con teclado.
   Solo aparece con :focus-visible, no al hacer clic con el ratón. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
.stat-pill:focus-visible,
.village-hotspot:focus-visible,
.classy-tree-installation:focus-visible {
  outline: 3px solid var(--gold-light);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* El buscador ya tiene su propio resplandor dorado al enfocar */
.search-input-wrapper input:focus-visible {
  outline: none;
}

/* Imágenes de tarjeta: reservar proporción para evitar saltos de layout (CLS) */
.card-art-img {
  aspect-ratio: 16 / 9;
}

/* ==========================================================================
   RESPETO A "REDUCIR MOVIMIENTO" DEL SISTEMA (prefers-reduced-motion)
   Mantiene la web usable y festiva sin animaciones que mareen.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  html {
    scroll-behavior: auto;
  }

  /* Ocultar por completo los elementos puramente decorativos en movimiento */
  .snow-canvas,
  .sky-sleigh,
  .aurora-glow,
  .stardust-particle,
  .village-chimney-smoke,
  .sleigh-trail {
    display: none !important;
  }

  /* Dejar las luces del árbol y la estrella encendidas de forma fija */
  .fairy-bulb {
    opacity: 0.9 !important;
    transform: none !important;
  }
  .tree-star-crown .star-core {
    filter: drop-shadow(0 0 16px #fde047) !important;
  }
}

/* ==========================================================================
   AJUSTES RESPONSIVE ADICIONALES
   ========================================================================== */

/* Tablets y móviles grandes: apilar cabeceras que competían por el espacio */
@media (max-width: 900px) {
  .catalog-header,
  .village-actions-bar {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .village-quote {
    justify-content: center;
  }
  .village-interactive-buttons,
  .catalog-header .surprise-btn {
    justify-content: center;
  }
  .surprise-btn {
    align-self: center;
  }
}

@media (max-width: 768px) {
  /* La barra superior y el reproductor son ambos "sticky": en móvil el
     reproductor deja de pegarse para no comerse media pantalla al hacer scroll */
  .music-player-bar {
    position: static;
  }

  .player-content {
    justify-content: center;
    row-gap: 0.6rem;
  }

  .track-title {
    max-width: 70vw;
  }

  /* Ondas de sonido: ruido visual innecesario en pantallas estrechas */
  .sound-wave-bars {
    display: none;
  }

  .nav-controls {
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
  }

  .control-btn {
    font-size: 0.78rem;
    padding: 0.35rem 0.65rem;
  }

  .hero-title {
    font-size: clamp(2rem, 9vw, 3rem);
  }

  .dialog-hero-banner {
    height: 130px;
  }

  .dialog-toolbar {
    justify-content: center;
  }

  .dialog-footer,
  .stats-dialog-footer {
    justify-content: center;
  }

  .dialog-nav-buttons {
    width: 100%;
    justify-content: space-between;
  }

  /* Fichas de curiosidades: quitar la rotación para que se lean rectas */
  .notebook-index-card,
  .notebook-index-card:nth-child(3n+1),
  .notebook-index-card:nth-child(3n+2),
  .notebook-index-card:nth-child(3n) {
    transform: none;
  }
}

/* Móviles pequeños: evitar desbordes horizontales del reproductor */
@media (max-width: 420px) {
  .player-right {
    justify-content: center;
  }
  .track-dropdown {
    max-width: 100%;
    flex: 1;
  }
  .countdown-widget {
    font-size: 0.76rem;
  }
}

/* Pantallas táctiles: los efectos hover de escala quedan "pegados" tras tocar.
   Se desactivan las transformaciones de hover en dispositivos sin puntero fino. */
@media (hover: none) {
  .carol-card:hover,
  .stat-pill:hover,
  .notebook-index-card:hover,
  .curiosity-filter-btn:hover,
  .tab-btn:hover {
    transform: none;
  }
}

/* ==========================================================================
   PARTITURA DE LA MELODÍA PRINCIPAL (render de abcjs dentro del modal)
   ========================================================================== */
.score-panel {
  background: linear-gradient(135deg, rgba(24, 41, 33, 0.92), rgba(15, 27, 21, 0.96));
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem 1.2rem;
  margin: 0 auto 1.6rem;
  max-width: 640px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.score-panel-head {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.75rem;
}

.score-panel-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gold-light);
}

.score-panel-note {
  font-size: 0.78rem;
  color: var(--frost-ice);
}

/* Hoja de partitura: fondo claro para que la notación negra se lea.
   abcjs pinta con currentColor, así que fijamos un color oscuro aquí. */
.score-render {
  background: #fbfaf5;
  color: #16213a;
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.6rem;
  overflow-x: auto;
}

.score-render svg text {
  fill: #16213a;
}

.score-render svg {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

.score-render .score-error {
  color: #7a1d1d;
  font-size: 0.85rem;
  padding: 0.6rem;
  text-align: center;
}

.tool-btn[aria-expanded="true"] {
  background: rgba(223, 169, 75, 0.22);
  border-color: var(--gold-primary);
  color: var(--gold-light);
}

@media print {
  .score-panel {
    background: #fff;
    border-color: #999;
    box-shadow: none;
  }
  .score-panel-title,
  .score-panel-note { color: #222; }
}

/* ==========================================================================
   SELECTOR DE IDIOMA EN LA BARRA SUPERIOR
   ========================================================================== */
.lang-switcher-wrap {
  display: flex;
  align-items: center;
}

.lang-switcher {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-subtle);
  color: var(--snow-white);
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.25s ease;
}

.lang-switcher:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--gold-primary);
}

.lang-switcher:focus-visible {
  outline: 3px solid var(--gold-light);
  outline-offset: 2px;
}

.lang-switcher option {
  background: #101f18;
  color: #fff;
}

@media (max-width: 768px) {
  .lang-switcher-wrap {
    order: 4;
    width: 100%;
    justify-content: center;
    margin-top: 0.2rem;
  }
}

/* ==========================================================================
   MENÚ DE INICIO Y NAVEGACIÓN POR VISTAS
   La portada solo muestra este menú; cada colección se abre en su vista.
   ========================================================================== */
.home-menu {
  margin-top: 0.5rem;
}

.home-menu-prompt {
  font-family: var(--font-festive);
  font-size: 1.2rem;
  color: var(--gold-light);
  letter-spacing: 0.03em;
  margin-bottom: 1.1rem;
  opacity: 0.9;
}

.home-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem 1rem;
  max-width: 640px;
  margin: 0 auto;
  perspective: 1100px;
  perspective-origin: 50% 30%;
}

/* --------------------------------------------------------------------------
   CADA OPCIÓN ES UN REGALO ENVUELTO EN 3D
   El papel y el lazo se pintan con gradientes; el volumen sale de una sombra
   sólida que hace de canto de la caja más una ligera inclinación en X.
   -------------------------------------------------------------------------- */
.menu-tile {
  --paper-a: #b8433a;
  --paper-b: #8f2f28;
  --ribbon: #f3dca6;
  --ribbon-dim: rgba(243, 220, 166, 0.3);
  --edge: rgba(0, 0, 0, 0.35);

  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
  padding: 2.35rem 0.7rem 1rem;
  border: none;
  border-radius: 7px;
  color: var(--snow-white);
  font-family: var(--font-body);
  cursor: pointer;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.14) 0%, transparent 42%),
    linear-gradient(180deg, var(--paper-a) 0%, var(--paper-b) 100%);
  transform-style: preserve-3d;
  transform: rotateX(7deg);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 9px 0 -1px var(--edge),
    0 16px 24px rgba(0, 0, 0, 0.45);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.28s ease,
              filter 0.28s ease;
}

/* Papel estampado + cintas del lazo (detrás del texto) */
.menu-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    /* base oscura donde se asienta el texto, para que siempre se lea */
    linear-gradient(180deg, transparent 52%, rgba(0, 0, 0, 0.42) 78%, rgba(0, 0, 0, 0.5) 100%),
    /* cinta vertical */
    linear-gradient(90deg, transparent calc(50% - 11px), var(--ribbon-dim) calc(50% - 11px), var(--ribbon-dim) calc(50% + 11px), transparent calc(50% + 11px)),
    /* cinta horizontal, a la altura de la tapa */
    linear-gradient(180deg, transparent 26px, var(--ribbon-dim) 26px, var(--ribbon-dim) 44px, transparent 44px),
    /* costura de la tapa */
    linear-gradient(180deg, transparent 51px, rgba(0, 0, 0, 0.22) 51px, rgba(0, 0, 0, 0.22) 52px, transparent 52px),
    /* estampado del papel */
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.07) 0 6px, transparent 6px 14px);
}

/* Lazo sobre la tapa */
.menu-tile::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  z-index: 2;
  width: 54px;
  height: 33px;
  transform: translateX(-50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 62'%3E%3Cg fill='%23f6efe2'%3E%3Cpath d='M50 28 C 32 6, 8 10, 9 26 C 10 40, 33 38, 50 28 Z'/%3E%3Cpath d='M50 28 C 68 6, 92 10, 91 26 C 90 40, 67 38, 50 28 Z'/%3E%3Cpath d='M46 30 C 38 42, 32 52, 27 60 L39 57 C 43 49, 47 40, 50 33 Z'/%3E%3Cpath d='M54 30 C 62 42, 68 52, 73 60 L61 57 C 57 49, 53 40, 50 33 Z'/%3E%3Cellipse cx='50' cy='28' rx='9' ry='8'/%3E%3C/g%3E%3C/svg%3E");
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), filter 0.28s ease;
}

/* Al pasar por encima el regalo se endereza y se acerca */
.menu-tile:hover {
  transform: rotateX(0deg) translateY(-7px) scale(1.03);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 12px 0 -1px var(--edge),
    0 22px 34px rgba(0, 0, 0, 0.5),
    0 0 26px rgba(223, 169, 75, 0.45);
  filter: brightness(1.06);
}

.menu-tile:hover::after {
  transform: translateX(-50%) scale(1.12) rotate(-3deg);
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 8px rgba(255, 240, 200, 0.7));
}

/* Al elegirlo: destello dorado antes de abrir la colección */
.menu-tile.is-opening {
  animation: giftOpen 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 3;
}

.menu-tile.is-opening::after {
  animation: giftBowPop 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes giftOpen {
  0% {
    transform: rotateX(0deg) translateY(-7px) scale(1.03);
    box-shadow: 0 12px 0 -1px var(--edge), 0 22px 34px rgba(0, 0, 0, 0.5), 0 0 26px rgba(223, 169, 75, 0.45);
    filter: brightness(1.06);
  }
  45% {
    transform: rotateX(0deg) translateY(-16px) scale(1.09);
    box-shadow: 0 16px 0 -1px var(--edge), 0 26px 40px rgba(0, 0, 0, 0.55),
                0 0 46px 10px rgba(255, 226, 150, 0.95), 0 0 90px 22px rgba(223, 169, 75, 0.6);
    filter: brightness(1.5) saturate(1.15);
  }
  100% {
    transform: rotateX(0deg) translateY(-10px) scale(1.05);
    box-shadow: 0 14px 0 -1px var(--edge), 0 24px 36px rgba(0, 0, 0, 0.5),
                0 0 34px 6px rgba(255, 226, 150, 0.75);
    filter: brightness(1.22);
  }
}

@keyframes giftBowPop {
  0%   { transform: translateX(-50%) scale(1.12) rotate(-3deg); }
  45%  { transform: translateX(-50%) scale(1.4) rotate(6deg);
         filter: drop-shadow(0 0 12px rgba(255, 245, 214, 1)); }
  100% { transform: translateX(-50%) scale(1.24) rotate(2deg);
         filter: drop-shadow(0 0 8px rgba(255, 245, 214, 0.9)); }
}

/* ---- Papeles de regalo: cada colección, su envoltorio ---- */
.menu-tile[data-lang="all"] { --paper-a: #d8a33f; --paper-b: #a9741f; --edge: rgba(78, 50, 8, 0.6); }
.menu-tile[data-lang="en"]  { --paper-a: #b8433a; --paper-b: #8a2b25; --edge: rgba(66, 16, 13, 0.6); }
.menu-tile[data-lang="de"]  { --paper-a: #38875f; --paper-b: #235841; --edge: rgba(14, 45, 32, 0.6); }
.menu-tile[data-lang="fr"]  { --paper-a: #3f5f96; --paper-b: #27406c; --edge: rgba(13, 26, 50, 0.6); }
.menu-tile[data-lang="es"]  { --paper-a: #c9622f; --paper-b: #963f1c; --edge: rgba(72, 28, 10, 0.6); }
.menu-tile[data-lang="it"]  { --paper-a: #2f8474; --paper-b: #1c5750; --edge: rgba(11, 44, 40, 0.6); }
.menu-tile[data-lang="fav"] { --paper-a: #a8456b; --paper-b: #772c4b; --edge: rgba(60, 18, 34, 0.6); }

/* Curiosidades: papel kraft de cuaderno viejo, para que se distinga */
.menu-tile-curiosities {
  --paper-a: #9c8358;
  --paper-b: #6d5a38;
  --edge: rgba(48, 38, 20, 0.6);
  --ribbon-dim: rgba(46, 82, 62, 0.6);
}

/* ---- Variante ancha: la cinta se corre a la izquierda para no cruzar el texto ---- */
.menu-tile-wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.15rem 1rem 1.15rem 4.6rem;
}

.menu-tile-wide::before {
  background:
    linear-gradient(90deg, transparent calc(2.3rem - 11px), var(--ribbon-dim) calc(2.3rem - 11px), var(--ribbon-dim) calc(2.3rem + 11px), transparent calc(2.3rem + 11px)),
    linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.14) 50%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.07) 0 6px, transparent 6px 14px);
}

.menu-tile-wide::after {
  top: 50%;
  left: 2.3rem;
  width: 46px;
  height: 28px;
  transform: translate(-50%, -50%);
}

.menu-tile-wide:hover::after {
  transform: translate(-50%, -50%) scale(1.12) rotate(-3deg);
}

.menu-tile-wide.is-opening::after {
  animation: giftBowPopWide 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes giftBowPopWide {
  0%   { transform: translate(-50%, -50%) scale(1.12) rotate(-3deg); }
  45%  { transform: translate(-50%, -50%) scale(1.4) rotate(6deg);
         filter: drop-shadow(0 0 12px rgba(255, 245, 214, 1)); }
  100% { transform: translate(-50%, -50%) scale(1.24) rotate(2deg);
         filter: drop-shadow(0 0 8px rgba(255, 245, 214, 0.9)); }
}

.menu-tile-wide .tile-icon { font-size: 1.4rem; }
.menu-tile-wide .tile-label { font-size: 1.05rem; }

/* ---- Contenido de la etiqueta, siempre por encima del papel ---- */
.tile-icon,
.tile-label,
.tile-count {
  position: relative;
  z-index: 1;
}

.tile-icon {
  font-size: 1.55rem;
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}

.tile-label {
  font-size: 0.92rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.01em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 2px 8px rgba(0, 0, 0, 0.7);
}

.tile-count {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold-light);
  background: rgba(0, 0, 0, 0.42);
  border-radius: var(--radius-full);
  padding: 0.05rem 0.6rem;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

.menu-tile-wide .tile-count {
  font-size: 0.85rem;
}

/* Botón "volver al inicio" en cabecera de cada vista */
.back-home-btn {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.45rem;
  background: rgba(246, 239, 226, 0.06);
  border: 1px solid var(--border-subtle);
  color: var(--frost-ice);
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 600;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  margin-bottom: 1.6rem;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.back-home-btn:hover {
  background: rgba(223, 169, 75, 0.14);
  border-color: var(--border-gold);
  color: var(--gold-light);
}

/* Aparición suave al cambiar de vista */
body[data-view] #catalogSection:not([hidden]),
body[data-view] #curiositiesSection:not([hidden]),
body[data-view="home"] #heroSection:not([hidden]) {
  animation: viewFadeIn 0.35s ease both;
}

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

/* La vista de catálogo ya no necesita tanto margen superior (viene el botón volver) */
body[data-view="catalog"] .catalog-section,
body[data-view="curiosities"] .curiosities-section {
  padding-top: 1.5rem;
}

@media (max-width: 620px) {
  .home-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-view] #catalogSection,
  body[data-view] #curiositiesSection,
  body[data-view="home"] #heroSection {
    animation: none !important;
  }
}

/* Regalos: sin volumetría ni destello si el sistema pide reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  .home-menu-grid { perspective: none; }
  .menu-tile,
  .menu-tile:hover {
    transform: none !important;
    animation: none !important;
    filter: none !important;
  }
  .menu-tile::after,
  .menu-tile:hover::after {
    animation: none !important;
  }
}

/* ==========================================================================
   EL AGUINALDO
   Una nota al pie de la letra, no un botón. Aparece solo al final de una
   canción, en el tipo de letra del cuerpo y en tamaño pequeño: tiene que
   leerse como una posdata escrita a mano, no como una llamada a la acción.
   ========================================================================== */
.aguinaldo-note {
  max-width: 34rem;
  margin: 2.6rem auto 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-style: normal;
  line-height: 1.7;
  color: var(--frost-ice);
  text-align: center;
  opacity: 0.85;
}

.aguinaldo-note a {
  color: var(--gold-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.aguinaldo-note a:hover {
  color: var(--gold-light);
}

/* La línea del cantoral impreso: invisible en pantalla, sobria en papel */
.print-only-footer {
  display: none;
}

@media print {
  .aguinaldo-note {
    display: none;
  }
  .print-only-footer {
    display: block;
    margin-top: 1.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid #999;
    font-family: Georgia, serif;
    font-size: 8pt;
    font-style: italic;
    color: #333;
    text-align: center;
  }
}

/* ==========================================================================
   SOBRE ESTE PROYECTO
   Tiene que funcionar entera aunque se quite el enlace de pago: primero lo
   que es el proyecto, y el aguinaldo como última línea, nunca como titular.
   ========================================================================== */
.about-section {
  max-width: 640px;
  margin: 0 auto var(--section-gap);
  padding: 1.5rem 1.5rem 0;
}

.about-container {
  display: flex;
  flex-direction: column;
}

.about-section .section-title {
  text-align: center;
  margin-bottom: 1.8rem;
}

.about-body {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  font-family: var(--font-lyrics);
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--frost-ice);
  text-align: center;
}

.about-body .about-closing {
  color: var(--snow-white);
}

.about-tip {
  margin-top: 2.2rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--border-subtle);
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.86rem;
}

.about-tip a {
  color: var(--gold-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.about-tip a:hover {
  color: var(--gold-light);
}

/* Enlace discreto en los créditos del pie */
.footer-about-link {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: rgba(246, 239, 226, 0.6);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.footer-about-link:hover {
  color: var(--gold-light);
}

/* ==========================================================================
   VISTA DE MINIJUEGOS
   El hub vive en un iframe para que sus estilos no colisionen con los de la web.
   ========================================================================== */
.games-section {
  max-width: 1180px;
  margin: 0 auto var(--section-gap);
  padding: 1.5rem 1rem 0;
}

.games-container {
  display: flex;
  flex-direction: column;
}

.games-frame-wrap {
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: #0d1a15;
}

.games-frame {
  display: block;
  width: 100%;
  height: min(82vh, 900px);
  border: 0;
}

/* El regalo de los juegos: papel azul noche */
.menu-tile-games {
  --paper-a: #3f5f96;
  --paper-b: #27406c;
  --edge: rgba(13, 26, 50, 0.6);
}

@media (max-width: 768px) {
  .games-section { padding: 1rem 0.5rem 0; }
  .games-frame { height: 78vh; }
}

/* Regalo de adornos y cocina: papel canela */
.menu-tile-adornos {
  --paper-a: #b0743a;
  --paper-b: #7c4c1f;
  --edge: rgba(56, 32, 10, 0.6);
}


/* ==========================================================================
   CUENTA ATRÁS GRANDE DE LA PORTADA (marcador de fichas que pasan)
   ========================================================================== */
body[data-view="home"] .countdown-widget { display: none; }
.countdown-widget .cd-today { display: none; color: var(--gold-light); font-weight: 600; }
.countdown-widget.is-xmas-day .countdown-label,
.countdown-widget.is-xmas-day .countdown-digits { display: none; }
.countdown-widget.is-xmas-day .cd-today { display: inline; }

.xmas-clock {
  --flap-w: clamp(27px, 7vw, 58px);
  --flap-h: calc(var(--flap-w) * 1.42);
  --flap-r: calc(var(--flap-w) * 0.13);
  margin: 1.4rem auto 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  max-width: 100%;
}
.xmas-clock-lead,
.xmas-clock-tail,
.xmas-clock-today {
  margin: 0;
  font-family: 'Mountains of Christmas', 'Cinzel Decorative', cursive;
  font-weight: 700;
  line-height: 1.1;
  color: #f6efe2;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), 0 0 16px rgba(246, 239, 226, 0.22);
}
.xmas-clock-lead { font-size: clamp(1.35rem, 3.6vw, 2.1rem); }
.xmas-clock-tail { font-size: clamp(1.55rem, 4.4vw, 2.5rem); }
.xmas-clock-today { font-size: clamp(2rem, 6.5vw, 3.6rem); color: var(--gold-light); }

.xmas-clock-board {
  display: flex;
  justify-content: center;
  gap: calc(var(--flap-w) * 0.32);
  padding-top: calc(var(--flap-w) * 0.14);
}
.clock-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.clock-flaps {
  position: relative;
  display: flex;
  gap: calc(var(--flap-w) * 0.07);
}
/* Un poco de nieve posada sobre cada grupo de fichas */
.clock-flaps::before {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  top: calc(var(--flap-w) * -0.1);
  height: calc(var(--flap-w) * 0.2);
  border-radius: 999px 999px 45% 45% / 999px 999px 100% 100%;
  background: linear-gradient(#ffffff, #e9eef5);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);
  z-index: 4;
  pointer-events: none;
}
.clock-unit {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(0.62rem, 1.7vw, 0.86rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-light);
  white-space: nowrap;
}

.flap {
  position: relative;
  width: var(--flap-w);
  height: var(--flap-h);
  perspective: calc(var(--flap-h) * 4);
  font-family: 'Oswald', 'Outfit', sans-serif;
  font-weight: 600;
  font-size: calc(var(--flap-h) * 0.74);
  line-height: var(--flap-h);
  color: #fff8ee;
  text-align: center;
  font-variant-numeric: tabular-nums;
  border-radius: var(--flap-r);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
}
.flap-half {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background: linear-gradient(#d9473c, #bc352c);
}
.flap-half > span { display: block; height: var(--flap-h); }
.flap-top,
.flap-leaf-top { top: 0; border-radius: var(--flap-r) var(--flap-r) 0 0; }
.flap-bottom,
.flap-leaf-bottom {
  bottom: 0;
  border-radius: 0 0 var(--flap-r) var(--flap-r);
  background: linear-gradient(#b9322a, #98231d);
}
.flap-bottom > span,
.flap-leaf-bottom > span { transform: translateY(-50%); }
/* Bisagra central con sus dos remaches */
.flap::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: rgba(45, 6, 5, 0.6);
  z-index: 3;
}
.flap::before {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  top: 50%;
  height: 6px;
  margin-top: -3px;
  background:
    radial-gradient(circle at 2px 3px, #7a1b16 2px, transparent 2.5px) left / 6px 6px no-repeat,
    radial-gradient(circle at 4px 3px, #7a1b16 2px, transparent 2.5px) right / 6px 6px no-repeat;
  z-index: 3;
}
.flap-leaf-top,
.flap-leaf-bottom { visibility: hidden; z-index: 2; backface-visibility: hidden; }
.flap-leaf-top { transform-origin: 50% 100%; }
.flap-leaf-bottom { transform-origin: 50% 0; transform: rotateX(90deg); }
.flap.is-flipping .flap-leaf-top { visibility: visible; animation: flapFall 0.3s ease-in forwards; }
.flap.is-flipping .flap-leaf-bottom { visibility: visible; animation: flapLand 0.3s 0.3s ease-out forwards; }
@keyframes flapFall { from { transform: rotateX(0deg); } to { transform: rotateX(-90deg); } }
@keyframes flapLand { from { transform: rotateX(90deg); } to { transform: rotateX(0deg); } }

@media (prefers-reduced-motion: reduce) {
  .flap-leaf-top, .flap-leaf-bottom { display: none; }
}

/* Separación sutil del marcador respecto al resto de la portada */
.xmas-clock::before,
.xmas-clock::after {
  content: '';
  display: block;
  width: min(420px, 78%);
  height: 1px;
  margin: 0.2rem auto 0.9rem;
  background: linear-gradient(90deg, transparent, rgba(223, 169, 75, 0.45), transparent);
}
.xmas-clock::after { margin: 1rem auto 0.2rem; }
.xmas-clock { padding-top: 0.4rem; }


/* Línea de patrocinio: una sola frase fina en el pie, nunca un logotipo grande */
.sponsor-line {
  margin: 0.9rem auto 0;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(223, 169, 75, 0.18);
  max-width: 34rem;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  color: rgba(246, 239, 226, 0.55);
  text-align: center;
}
.sponsor-line a, .sponsor-line #sponsorName { color: var(--gold-light); text-decoration: none; }
.sponsor-line a:hover { text-decoration: underline; }


/* Huecos de publicidad: separados del contenido y siempre rotulados */
.ad-slot {
  margin: 2.5rem auto 1rem;
  max-width: 970px;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(223, 169, 75, 0.18);
  text-align: center;
}
.ad-slot-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(246, 239, 226, 0.45);
}
.about-privacy {
  margin-top: 1.4rem;
  font-size: 0.84rem;
  line-height: 1.6;
  color: rgba(246, 239, 226, 0.7);
}
@media print { .ad-slot { display: none !important; } }

/* Si Google no sirve anuncio (web aún sin aprobar, sin inventario…), el hueco
   desaparece entero: nunca queda un rótulo «Publicidad» sobre un espacio vacío */
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
.ad-slot:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none !important; }

/* ============================================================
   Aviso legal, privacidad y cookies (reutiliza la ventana de estadísticas)
   ============================================================ */
.legal-dialog { max-width: 720px; }
.legal-text { gap: 1.2rem; line-height: 1.6; font-size: 0.95rem; color: var(--frost-ice); }
.legal-text section + section { border-top: 1px solid var(--border-subtle); padding-top: 1.1rem; }
.legal-text h3 { font-family: var(--font-display); color: var(--gold-light); font-size: 1.2rem; margin: 0 0 0.6rem; }
.legal-text h4 { color: var(--snow-white); font-size: 1rem; margin: 0.9rem 0 0.3rem; }
.legal-text p { margin: 0 0 0.6rem; }
.legal-text ul { margin: 0 0 0.6rem; padding-left: 1.2rem; }
.legal-text li { margin-bottom: 0.5rem; }
.legal-text a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.legal-owner { background: rgba(223, 169, 75, 0.08); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 0.75rem 0.95rem; }

/* Contador de visitas a la vista en el pie (se abre el panel al pulsarlo) */
.footer-admin-row { flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.visit-counter {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.5rem 1.15rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-gold);
  background: rgba(223, 169, 75, 0.12);
  color: var(--snow-white);
  cursor: pointer;
  font: inherit;
  transition: background 0.2s ease, transform 0.2s ease;
}
.visit-counter[hidden] { display: none; }
.visit-counter:hover { background: rgba(223, 169, 75, 0.22); transform: translateY(-1px); }
.visit-counter:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.visit-counter-icon { font-size: 1rem; align-self: center; }
.visit-counter-num { font-family: 'Oswald', var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--gold-light); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.visit-counter-label { font-size: 0.85rem; color: var(--frost-ice); }

/* ==========================================================================
   REGALOS CON PAPEL DE VERDAD (fotografías de papel de lujo y lazo de raso)
   Cada regalo lleva su papel en --papel; las cintas de raso las pinta el CSS
   para que encajen en cualquier tamaño, y el lazo es una imagen con fondo
   transparente que conserva sus animaciones al pasar y al abrir.
   ========================================================================== */
.menu-tile {
  --papel: none;
  --sombra-texto: 0.36;
  --raso: linear-gradient(90deg, #e9dcc0 0%, #fffaf0 35%, #f3e6c8 55%, #d9c49b 100%);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.16) 0%, transparent 38%),
    var(--papel) center / cover no-repeat,
    linear-gradient(180deg, var(--paper-a) 0%, var(--paper-b) 100%);
}
.menu-tile::before {
  background:
    /* base oscura donde se asienta el texto */
    linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, calc(var(--sombra-texto) * 0.8)) 72%, rgba(0, 0, 0, var(--sombra-texto)) 100%),
    /* cinta de raso vertical, con brillo en el centro */
    linear-gradient(90deg, transparent calc(50% - 12px), rgba(0, 0, 0, 0.18) calc(50% - 12px), transparent calc(50% - 10px),
                    transparent calc(50% + 10px), rgba(0, 0, 0, 0.18) calc(50% + 12px), transparent calc(50% + 12px)),
    linear-gradient(90deg, transparent calc(50% - 11px), rgba(250, 240, 215, 0.92) calc(50% - 11px), rgba(255, 252, 242, 0.98) 50%, rgba(232, 214, 176, 0.92) calc(50% + 11px), transparent calc(50% + 11px)),
    /* cinta horizontal a la altura de la tapa */
    linear-gradient(180deg, transparent 25px, rgba(0, 0, 0, 0.2) 25px, rgba(250, 240, 215, 0.92) 27px, rgba(255, 252, 242, 0.98) 35px, rgba(232, 214, 176, 0.92) 43px, rgba(0, 0, 0, 0.2) 45px, transparent 45px);
}
.menu-tile::after {
  top: -10px;
  width: 58px;
  height: 54px;
  background-image: url("assets/regalos/lazo.png");
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45));
}
.menu-tile .tile-label { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.6); }

.menu-tile[data-lang="all"] { --papel: url("assets/regalos/papel-oro.jpg"); --sombra-texto: 0.55; }
.menu-tile[data-lang="en"]  { --papel: url("assets/regalos/papel-rojo.jpg"); }
.menu-tile[data-lang="de"]  { --papel: url("assets/regalos/papel-verde.jpg"); }
.menu-tile[data-lang="fr"]  { --papel: url("assets/regalos/papel-azul.jpg"); }
.menu-tile[data-lang="es"]  { --papel: url("assets/regalos/papel-naranja.jpg"); }
.menu-tile[data-lang="it"]  { --papel: url("assets/regalos/papel-turquesa.jpg"); }
.menu-tile[data-lang="fav"] { --papel: url("assets/regalos/papel-frambuesa.jpg"); }
.menu-tile-adornos          { --papel: url("assets/regalos/papel-kraft.jpg"); --sombra-texto: 0.62; }
.menu-tile-games            { --papel: url("assets/regalos/papel-medianoche.jpg"); }
.menu-tile-curiosities      { --papel: url("assets/regalos/papel-pergamino.jpg"); --sombra-texto: 0.68; }

/* Variante ancha: cinta vertical a la izquierda, sin cinta horizontal */
.menu-tile-wide::before {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, calc(var(--sombra-texto) * 0.25)), rgba(0, 0, 0, calc(var(--sombra-texto) * 0.75)) 30%, rgba(0, 0, 0, calc(var(--sombra-texto) * 0.75)) 80%, rgba(0, 0, 0, calc(var(--sombra-texto) * 0.25))),
    linear-gradient(90deg, transparent calc(2.3rem - 12px), rgba(0, 0, 0, 0.18) calc(2.3rem - 12px), transparent calc(2.3rem - 10px),
                    transparent calc(2.3rem + 10px), rgba(0, 0, 0, 0.18) calc(2.3rem + 12px), transparent calc(2.3rem + 12px)),
    linear-gradient(90deg, transparent calc(2.3rem - 11px), rgba(250, 240, 215, 0.92) calc(2.3rem - 11px), rgba(255, 252, 242, 0.98) 2.3rem, rgba(232, 214, 176, 0.92) calc(2.3rem + 11px), transparent calc(2.3rem + 11px));
}
.menu-tile-wide::after {
  top: 50%;
  width: 50px;
  height: 46px;
}
/* En los regalos anchos el papel se repite a la misma escala que en los pequeños */
.menu-tile-wide {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.16) 0%, transparent 38%),
    var(--papel) center / 240px auto repeat,
    linear-gradient(180deg, var(--paper-a) 0%, var(--paper-b) 100%);
}
/* El pergamino de las curiosidades es una hoja entera: sin repetir */
.menu-tile-wide.menu-tile-curiosities {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.16) 0%, transparent 38%),
    var(--papel) center / cover no-repeat,
    linear-gradient(180deg, var(--paper-a) 0%, var(--paper-b) 100%);
}