/* ===== DESCENDANTS — REBELDE MAGICO ===== */

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      color-scheme: dark;
      --bg-primary: #0e0618;
      --bg-secondary: #1a0a2e;
      --bg-tertiary: #2d1555;
      --accent-purple: #9b4dca;
      --accent-pink: #d46ba3;
      --accent-rose: #e8829e;
      --accent-soft: #c8a2e8;
      --accent-lavender: #b388d9;
      --glow-purple: rgba(155, 77, 202, 0.45);
      --glow-pink: rgba(212, 107, 163, 0.35);
      --glow-rose: rgba(232, 130, 158, 0.25);
      --text-primary: #ede0f5;
      --text-secondary: #c8a2e8;
      --text-muted: #7a5e99;
      --card-bg: rgba(26, 10, 46, 0.85);
      --card-border: rgba(155, 77, 202, 0.2);
      --gold-soft: #e8c170;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Quicksand', sans-serif;
      font-weight: 500;
      margin: 0;
      padding: 0;
      background: var(--bg-primary);
      color: var(--text-primary);
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* === ATMOSPHERIC BACKGROUND === */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background:
        radial-gradient(ellipse 90% 60% at 15% 5%, rgba(155, 77, 202, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse 70% 55% at 85% 75%, rgba(212, 107, 163, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse 50% 45% at 50% 40%, rgba(232, 130, 158, 0.06) 0%, transparent 45%),
        radial-gradient(ellipse 80% 40% at 60% 90%, rgba(155, 77, 202, 0.1) 0%, transparent 50%),
        linear-gradient(165deg, rgba(14,6,24,0.85) 0%, rgba(21,11,40,0.8) 25%, rgba(26,10,46,0.75) 50%, rgba(18,7,31,0.8) 75%, rgba(14,6,24,0.85) 100%),
        url('/img/fondo-descendants.png') center/cover no-repeat;
      z-index: -2;
    }

    /* Particle layers — 3 capas a diferentes velocidades */
    .particles { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }

    .particles-layer {
      position: absolute;
      width: 200%;
      height: 200%;
      top: -50%;
      left: -50%;
    }

    /* Capa 1: estrellas grandes, lentas — profundidad */
    .particles-layer--slow {
      background:
        radial-gradient(2.5px 2.5px at 8% 15%, rgba(200, 162, 232, 0.7) 50%, transparent 100%),
        radial-gradient(2px 2px at 65% 8%, rgba(212, 107, 163, 0.55) 50%, transparent 100%),
        radial-gradient(3px 3px at 35% 52%, rgba(232, 130, 158, 0.4) 50%, transparent 100%),
        radial-gradient(2px 2px at 82% 40%, rgba(155, 77, 202, 0.5) 50%, transparent 100%),
        radial-gradient(2.5px 2.5px at 18% 75%, rgba(179, 136, 217, 0.6) 50%, transparent 100%),
        radial-gradient(2px 2px at 90% 70%, rgba(200, 162, 232, 0.45) 50%, transparent 100%),
        radial-gradient(3px 3px at 50% 90%, rgba(212, 107, 163, 0.35) 50%, transparent 100%),
        radial-gradient(2px 2px at 72% 22%, rgba(232, 200, 160, 0.3) 50%, transparent 100%),
        radial-gradient(2.5px 2.5px at 42% 5%, rgba(179, 136, 217, 0.55) 50%, transparent 100%),
        radial-gradient(2px 2px at 95% 32%, rgba(200, 162, 232, 0.5) 50%, transparent 100%),
        radial-gradient(3px 3px at 12% 48%, rgba(212, 107, 163, 0.4) 50%, transparent 100%),
        radial-gradient(2px 2px at 58% 65%, rgba(155, 77, 202, 0.45) 50%, transparent 100%),
        radial-gradient(2.5px 2.5px at 78% 85%, rgba(232, 130, 158, 0.5) 50%, transparent 100%),
        radial-gradient(2px 2px at 28% 92%, rgba(200, 162, 232, 0.4) 50%, transparent 100%),
        radial-gradient(3px 3px at 88% 12%, rgba(179, 136, 217, 0.35) 50%, transparent 100%),
        radial-gradient(2px 2px at 48% 28%, rgba(232, 200, 160, 0.3) 50%, transparent 100%),
        radial-gradient(2.5px 2.5px at 3% 60%, rgba(212, 107, 163, 0.6) 50%, transparent 100%),
        radial-gradient(2px 2px at 55% 78%, rgba(155, 77, 202, 0.45) 50%, transparent 100%),
        radial-gradient(3px 3px at 70% 48%, rgba(200, 162, 232, 0.5) 50%, transparent 100%),
        radial-gradient(2px 2px at 22% 35%, rgba(232, 130, 158, 0.35) 50%, transparent 100%),
        radial-gradient(2.5px 2.5px at 85% 58%, rgba(179, 136, 217, 0.55) 50%, transparent 100%),
        radial-gradient(2px 2px at 38% 12%, rgba(212, 107, 163, 0.4) 50%, transparent 100%),
        radial-gradient(3px 3px at 62% 38%, rgba(200, 162, 232, 0.45) 50%, transparent 100%),
        radial-gradient(2px 2px at 15% 88%, rgba(155, 77, 202, 0.5) 50%, transparent 100%),
        radial-gradient(2.5px 2.5px at 92% 52%, rgba(232, 200, 160, 0.3) 50%, transparent 100%),
        radial-gradient(2px 2px at 32% 68%, rgba(179, 136, 217, 0.6) 50%, transparent 100%),
        radial-gradient(3px 3px at 75% 95%, rgba(212, 107, 163, 0.4) 50%, transparent 100%),
        radial-gradient(2px 2px at 5% 42%, rgba(200, 162, 232, 0.55) 50%, transparent 100%),
        radial-gradient(2.5px 2.5px at 48% 8%, rgba(232, 130, 158, 0.45) 50%, transparent 100%),
        radial-gradient(2px 2px at 68% 72%, rgba(155, 77, 202, 0.4) 50%, transparent 100%),
        radial-gradient(3px 3px at 25% 55%, rgba(179, 136, 217, 0.5) 50%, transparent 100%),
        radial-gradient(2px 2px at 82% 18%, rgba(232, 200, 160, 0.35) 50%, transparent 100%);
      animation: drift-slow 25s linear infinite;
    }

    /* Capa 2: estrellas medianas, velocidad media */
    .particles-layer--mid {
      background:
        radial-gradient(1.5px 1.5px at 5% 30%, rgba(200, 162, 232, 0.5) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 25% 10%, rgba(212, 107, 163, 0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 45% 42%, rgba(155, 77, 202, 0.5) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 70% 18%, rgba(232, 130, 158, 0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 88% 55%, rgba(179, 136, 217, 0.5) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 15% 65%, rgba(200, 162, 232, 0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 55% 80%, rgba(212, 107, 163, 0.35) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 38% 25%, rgba(232, 200, 160, 0.25) 50%, transparent 100%),
        radial-gradient(1px 1px at 92% 85%, rgba(155, 77, 202, 0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 60% 60%, rgba(200, 162, 232, 0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 10% 8%, rgba(212, 107, 163, 0.5) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 80% 35%, rgba(179, 136, 217, 0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 33% 72%, rgba(200, 162, 232, 0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 52% 15%, rgba(155, 77, 202, 0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 75% 48%, rgba(232, 130, 158, 0.35) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 18% 90%, rgba(232, 200, 160, 0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 95% 22%, rgba(212, 107, 163, 0.45) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 42% 55%, rgba(200, 162, 232, 0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 68% 88%, rgba(179, 136, 217, 0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 8% 48%, rgba(155, 77, 202, 0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 85% 72%, rgba(232, 130, 158, 0.5) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 28% 38%, rgba(200, 162, 232, 0.35) 50%, transparent 100%),
        radial-gradient(1px 1px at 62% 5%, rgba(212, 107, 163, 0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 48% 92%, rgba(179, 136, 217, 0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 3% 68%, rgba(232, 200, 160, 0.3) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 72% 28%, rgba(155, 77, 202, 0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 35% 82%, rgba(200, 162, 232, 0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 90% 45%, rgba(212, 107, 163, 0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 22% 18%, rgba(232, 130, 158, 0.35) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 58% 38%, rgba(179, 136, 217, 0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 82% 62%, rgba(200, 162, 232, 0.5) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 12% 52%, rgba(155, 77, 202, 0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 40% 95%, rgba(232, 200, 160, 0.25) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 65% 75%, rgba(212, 107, 163, 0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 78% 8%, rgba(179, 136, 217, 0.5) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 50% 45%, rgba(200, 162, 232, 0.35) 50%, transparent 100%),
        radial-gradient(1px 1px at 15% 32%, rgba(232, 130, 158, 0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 88% 15%, rgba(155, 77, 202, 0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 30% 58%, rgba(212, 107, 163, 0.35) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 55% 22%, rgba(200, 162, 232, 0.45) 50%, transparent 100%);
      animation: drift-mid 18s linear infinite;
    }

    /* Capa 3: estrellas chiquitas, rapidas — primer plano */
    .particles-layer--fast {
      background:
        radial-gradient(1px 1px at 10% 22%, rgba(200, 162, 232, 0.6) 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 30% 5%, rgba(232, 200, 160, 0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 52% 38%, rgba(212, 107, 163, 0.45) 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 75% 12%, rgba(200, 162, 232, 0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 95% 45%, rgba(155, 77, 202, 0.4) 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 20% 58%, rgba(232, 130, 158, 0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 42% 75%, rgba(179, 136, 217, 0.45) 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 68% 88%, rgba(200, 162, 232, 0.35) 50%, transparent 100%),
        radial-gradient(1px 1px at 85% 30%, rgba(212, 107, 163, 0.4) 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 12% 90%, rgba(232, 200, 160, 0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 58% 15%, rgba(155, 77, 202, 0.5) 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 80% 65%, rgba(179, 136, 217, 0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 3% 42%, rgba(200, 162, 232, 0.55) 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 22% 78%, rgba(212, 107, 163, 0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 48% 8%, rgba(155, 77, 202, 0.5) 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 65% 52%, rgba(232, 130, 158, 0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 90% 72%, rgba(179, 136, 217, 0.4) 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 38% 92%, rgba(200, 162, 232, 0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 72% 35%, rgba(232, 200, 160, 0.35) 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 15% 18%, rgba(212, 107, 163, 0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 55% 62%, rgba(155, 77, 202, 0.45) 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 82% 48%, rgba(179, 136, 217, 0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 28% 32%, rgba(200, 162, 232, 0.4) 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 45% 85%, rgba(232, 130, 158, 0.35) 50%, transparent 100%),
        radial-gradient(1px 1px at 8% 55%, rgba(232, 200, 160, 0.45) 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 62% 28%, rgba(212, 107, 163, 0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 88% 82%, rgba(155, 77, 202, 0.4) 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 35% 48%, rgba(179, 136, 217, 0.55) 50%, transparent 100%),
        radial-gradient(1px 1px at 78% 15%, rgba(200, 162, 232, 0.45) 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 18% 68%, rgba(232, 130, 158, 0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 50% 95%, rgba(212, 107, 163, 0.5) 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 92% 38%, rgba(232, 200, 160, 0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 25% 5%, rgba(155, 77, 202, 0.55) 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 70% 58%, rgba(179, 136, 217, 0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 40% 22%, rgba(200, 162, 232, 0.5) 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 5% 82%, rgba(232, 130, 158, 0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 60% 45%, rgba(212, 107, 163, 0.35) 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 32% 62%, rgba(155, 77, 202, 0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 75% 8%, rgba(179, 136, 217, 0.45) 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 48% 72%, rgba(200, 162, 232, 0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 15% 35%, rgba(232, 200, 160, 0.5) 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 85% 55%, rgba(232, 130, 158, 0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 38% 18%, rgba(212, 107, 163, 0.55) 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 62% 92%, rgba(155, 77, 202, 0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 92% 25%, rgba(179, 136, 217, 0.5) 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 22% 48%, rgba(200, 162, 232, 0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 68% 68%, rgba(232, 130, 158, 0.35) 50%, transparent 100%),
        radial-gradient(0.8px 0.8px at 42% 38%, rgba(232, 200, 160, 0.4) 50%, transparent 100%);
      animation: drift-fast 12s linear infinite;
    }

    /* === KEYFRAMES === */

    @keyframes drift-slow {
      0% { transform: translate(0, 0); opacity: 0.6; }
      25% { opacity: 1; }
      50% { transform: translate(-3%, -4%); opacity: 0.7; }
      75% { opacity: 0.9; }
      100% { transform: translate(0, 0); opacity: 0.6; }
    }

    @keyframes drift-mid {
      0% { transform: translate(0, 0) rotate(0deg); }
      33% { transform: translate(2%, -3%) rotate(1deg); }
      66% { transform: translate(-2%, -1%) rotate(-1deg); }
      100% { transform: translate(0, 0) rotate(0deg); }
    }

    @keyframes drift-fast {
      0% { transform: translate(0, 0); opacity: 0.5; }
      20% { opacity: 0.9; }
      40% { transform: translate(-4%, 2%); opacity: 0.6; }
      60% { transform: translate(1%, -3%); opacity: 1; }
      80% { transform: translate(-2%, 1%); opacity: 0.5; }
      100% { transform: translate(0, 0); opacity: 0.5; }
    }

    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-12px); }
    }

    @keyframes bounce-arrow {
      0%, 100% { transform: translateY(0); opacity: 0.5; }
      50% { transform: translateY(10px); opacity: 1; }
    }

    @keyframes glow-pulse {
      0%, 100% { box-shadow: 0 0 15px var(--glow-purple), 0 0 40px rgba(155, 77, 202, 0.08); }
      50% { box-shadow: 0 0 25px var(--glow-pink), 0 0 60px rgba(212, 107, 163, 0.12); }
    }

    @keyframes gradient-shift {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    @keyframes pulse-glow {
      0%, 100% { filter: drop-shadow(0 0 8px var(--glow-purple)); transform: scale(1); }
      50% { filter: drop-shadow(0 0 20px var(--glow-pink)); transform: scale(1.04); }
    }

    @keyframes shimmer {
      0% { left: -100%; }
      100% { left: 200%; }
    }

    @keyframes title-glow {
      0%, 100% { filter: drop-shadow(0 0 6px rgba(200, 162, 232, 0.3)); }
      50% { filter: drop-shadow(0 0 18px rgba(212, 107, 163, 0.5)); }
    }

    @keyframes fade-in-up {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes crown-glow {
      0%, 100% { text-shadow: 0 0 8px rgba(200, 162, 232, 0.5), 0 0 20px rgba(155, 77, 202, 0.2); }
      50% { text-shadow: 0 0 15px rgba(212, 107, 163, 0.7), 0 0 35px rgba(232, 130, 158, 0.3); }
    }

    @keyframes border-glow {
      0%, 100% { border-color: rgba(155, 77, 202, 0.5); box-shadow: 0 0 20px var(--glow-purple), inset 0 0 15px rgba(155, 77, 202, 0.08); }
      50% { border-color: rgba(212, 107, 163, 0.5); box-shadow: 0 0 30px var(--glow-pink), inset 0 0 20px rgba(212, 107, 163, 0.08); }
    }

    @keyframes hero-breathe {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.02); }
    }

    @keyframes magical-float {
      0% { transform: translateY(0) rotate(0deg); opacity: 0; }
      10% { opacity: 1; }
      90% { opacity: 1; }
      100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; }
    }

    /* === SCROLL REVEAL === */
    .reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }
    .reveal-delay-4 { transition-delay: 0.4s; }

    /* ========================================
       GUEST INVITATION VIEW
       ======================================== */

    #private-info {
      display: none;
      max-width: 480px;
      margin: 0 auto;
    }

    /* ---- HERO SECTION ---- */
    .hero {
      min-height: 100vh;
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 30px 20px 50px;
      text-align: center;
      position: relative;
    }

    /* Floating magical particles */
    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 20% 30%, rgba(155, 77, 202, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 80% 60%, rgba(212, 107, 163, 0.1) 0%, transparent 35%);
      pointer-events: none;
    }

    /* Brand badge at top */
    .hero-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 22px;
      animation: float 5s ease-in-out infinite;
      background: rgba(155, 77, 202, 0.12);
      border: 1px solid rgba(200, 162, 232, 0.15);
      padding: 8px 20px;
      border-radius: 30px;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .hero-brand-icon {
      width: 32px;
      height: 32px;
      object-fit: contain;
      filter: drop-shadow(0 0 8px rgba(212, 107, 163, 0.5));
    }

    .hero-brand-text {
      font-family: 'Cinzel Decorative', serif;
      font-weight: 900;
      font-size: clamp(1.1rem, 4vw, 1.5rem);
      color: transparent;
      background: linear-gradient(135deg, var(--accent-soft), var(--accent-pink), var(--accent-lavender));
      -webkit-background-clip: text;
      background-clip: text;
      letter-spacing: 0.08em;
    }

    /* Main hero image in circular frame */
    .hero-frame {
      position: relative;
      width: clamp(200px, 55vw, 260px);
      height: clamp(200px, 55vw, 260px);
      border-radius: 50%;
      overflow: hidden;
      border: 3px solid rgba(155, 77, 202, 0.4);
      animation: border-glow 4s ease-in-out infinite, hero-breathe 6s ease-in-out infinite;
      margin-bottom: 24px;
      flex-shrink: 0;
      background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    }

    .hero-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 10%;
    }

    /* Decorative glow under the frame */
    .hero-frame::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 5%;
      right: 5%;
      height: 45%;
      background: linear-gradient(to top, rgba(155, 77, 202, 0.25), transparent);
      pointer-events: none;
    }

    .hero-text {
      margin-top: 4px;
    }

    .hero-name {
      font-family: 'Quicksand', sans-serif;
      font-size: clamp(1.1rem, 3.5vw, 1.4rem);
      font-weight: 500;
      color: var(--accent-soft);
      letter-spacing: 0.05em;
      margin-bottom: 2px;
    }

    .hero-name strong {
      display: block;
      font-family: 'Cinzel Decorative', serif;
      font-size: clamp(1.6rem, 7vw, 2.6rem);
      font-weight: 700;
      color: transparent;
      background: linear-gradient(135deg, var(--accent-soft), var(--accent-pink), var(--accent-rose), var(--accent-lavender));
      background-size: 200% 200%;
      -webkit-background-clip: text;
      background-clip: text;
      animation: gradient-shift 4s ease-in-out infinite;
      filter: drop-shadow(0 0 10px rgba(212, 107, 163, 0.3));
      line-height: 1.2;
      padding: 4px 0;
    }

    .hero-invite-label {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: clamp(0.9rem, 3vw, 1.15rem);
      color: var(--accent-pink);
      letter-spacing: 0.2em;
      text-transform: uppercase;
      text-shadow: 0 0 12px rgba(212, 107, 163, 0.3);
      margin: 30px 0 4px;
    }

    .hero-party-title {
      font-family: 'Cinzel Decorative', serif;
      font-weight: 900;
      font-size: clamp(1.6rem, 7vw, 2.8rem);
      color: transparent;
      background: linear-gradient(135deg, var(--accent-pink), var(--accent-rose), #f0a0c8, var(--accent-lavender), var(--accent-soft));
      background-size: 300% 300%;
      -webkit-background-clip: text;
      background-clip: text;
      animation: gradient-shift 5s ease-in-out infinite, title-glow 3s ease-in-out infinite;
      filter: drop-shadow(0 0 20px rgba(212, 107, 163, 0.5)) drop-shadow(0 0 40px rgba(155, 77, 202, 0.3));
      line-height: 1.25;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      margin-top: 100px;
    }

    .scroll-hint {
      position: absolute;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
    }

    .scroll-hint span {
      display: block;
      font-size: 0.7rem;
      color: var(--text-muted);
      letter-spacing: 0.1em;
      margin-bottom: 4px;
    }

    .scroll-arrow {
      font-size: 1.1rem;
      color: var(--accent-pink);
      animation: bounce-arrow 2s ease-in-out infinite;
    }

    /* ---- SECTION DIVIDER ---- */
    .section-divider {
      text-align: center;
      padding: 45px 0 25px;
    }

    .divider-logo {
      max-width: 160px;
      height: auto;
      object-fit: contain;
      filter: drop-shadow(0 0 14px rgba(212, 107, 163, 0.4));
      animation: pulse-glow 3s ease-in-out infinite;
    }

    .divider-line {
      display: block;
      width: 80px;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--accent-purple), var(--accent-pink), transparent);
      margin: 18px auto 0;
    }

    /* ---- PUBLIC INFO (Party Details) ---- */
    #public-info {
      display: none;
      padding: 0 20px;
    }

    /* ---- TITLE SECTION ---- */
    .title-section {
      text-align: center;
      padding: 10px 0 28px;
    }

    .title-crown {
      display: block;
      width: 50px;
      height: 50px;
      object-fit: contain;
      margin: 0 auto 8px;
      animation: crown-glow 3s ease-in-out infinite;
    }

    #party-title {
      font-family: 'Cinzel Decorative', serif;
      font-weight: 900;
      font-size: clamp(1.5rem, 5.5vw, 2.4rem);
      color: transparent;
      background: linear-gradient(135deg, var(--accent-soft), var(--accent-pink), var(--accent-lavender), var(--accent-rose));
      background-size: 300% 300%;
      -webkit-background-clip: text;
      background-clip: text;
      animation: gradient-shift 6s ease-in-out infinite, title-glow 4s ease-in-out infinite;
      line-height: 1.35;
      margin-bottom: 0;
    }

    .title-ornament {
      display: block;
      font-size: 13px;
      letter-spacing: 14px;
      color: var(--accent-pink);
      opacity: 0.35;
      margin-top: 12px;
    }

    /* ---- DETAIL CARDS ---- */
    .details-section {
      padding: 10px 0 20px;
    }

    .detail-card {
      background: linear-gradient(145deg, rgba(26, 10, 46, 0.88), rgba(14, 6, 24, 0.94));
      border: 1px solid var(--card-border);
      border-left: 4px solid var(--accent, var(--accent-purple));
      border-radius: 14px;
      padding: 20px 22px;
      margin: 14px 0;
      display: flex;
      align-items: center;
      gap: 16px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(155, 77, 202, 0.05);
      transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
      position: relative;
      overflow: hidden;
    }

    .detail-card::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 50%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(200, 162, 232, 0.03), transparent);
      animation: shimmer 5s ease-in-out infinite;
    }

    .detail-card:hover {
      transform: translateX(6px);
      border-left-color: var(--accent, var(--accent-pink));
      box-shadow: 0 4px 30px rgba(155, 77, 202, 0.2), 0 0 15px rgba(212, 107, 163, 0.08);
    }

    .detail-icon {
      font-size: 1.6rem;
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(155, 77, 202, 0.1);
      border-radius: 13px;
      flex-shrink: 0;
      border: 1px solid rgba(155, 77, 202, 0.1);
    }

    .detail-content { flex: 1; min-width: 0; }

    .detail-label {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 600;
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      color: var(--accent, var(--accent-soft));
      margin-bottom: 4px;
    }

    .detail-value {
      display: block;
      font-size: 1.02rem;
      font-weight: 600;
      color: var(--text-primary);
      line-height: 1.4;
    }

    /* ---- CHARACTER GALLERY ---- */
    .gallery-section {
      text-align: center;
      padding: 35px 0 25px;
    }

    .gallery-emblem {
      width: clamp(100px, 30vw, 140px);
      height: auto;
      margin: 0 auto 20px;
      display: block;
      filter: drop-shadow(0 0 20px var(--glow-purple));
      animation: pulse-glow 4s ease-in-out infinite;
    }

    .gallery-frame {
      display: inline-block;
      padding: 0;
      border: 2px solid rgba(155, 77, 202, 0.3);
      border-radius: 18px;
      background: linear-gradient(145deg, rgba(26, 10, 46, 0.95), rgba(14, 6, 24, 0.98));
      box-shadow: 0 0 25px rgba(155, 77, 202, 0.12), inset 0 0 15px rgba(155, 77, 202, 0.04);
      animation: glow-pulse 5s ease-in-out infinite;
      position: relative;
      overflow: hidden;
    }

    .gallery-frame::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to right, rgba(14, 6, 24, 0.85) 0%, transparent 15%, transparent 85%, rgba(14, 6, 24, 0.85) 100%),
        linear-gradient(to bottom, rgba(14, 6, 24, 0.5) 0%, transparent 15%, transparent 85%, rgba(14, 6, 24, 0.5) 100%);
      pointer-events: none;
      border-radius: 16px;
      z-index: 1;
    }

    .gallery-img {
      width: 100%;
      max-width: 360px;
      border-radius: 16px;
      display: block;
    }

    .gallery-caption {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 1rem;
      color: var(--accent-soft);
      margin-top: 14px;
      letter-spacing: 0.15em;
    }

    .gallery-label {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 600;
      font-size: 0.85rem;
      letter-spacing: 0.2em;
      color: var(--text-muted);
      margin-bottom: 10px;
      text-transform: uppercase;
    }

    /* ---- SUMMARY CARD ---- */
    .summary-section { padding: 25px 0; }

    .summary-card {
      background: linear-gradient(160deg, rgba(45, 21, 85, 0.8), rgba(14, 6, 24, 0.95));
      border: 1.5px solid rgba(200, 162, 232, 0.18);
      border-radius: 18px;
      padding: 26px 24px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 0 25px rgba(155, 77, 202, 0.08), inset 0 0 30px rgba(155, 77, 202, 0.03);
    }

    .summary-card::before {
      content: '';
      position: absolute;
      top: -1px;
      left: 20%;
      right: 20%;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--accent-pink), transparent);
      opacity: 0.4;
    }

    .summary-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 18px;
      padding-bottom: 13px;
      border-bottom: 1px solid rgba(155, 77, 202, 0.12);
    }

    .summary-icon {
      font-size: 1.5rem;
    }

    .summary-header span {
      font-family: 'Cinzel Decorative', serif;
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--accent-soft);
      letter-spacing: 0.08em;
    }

    .summary-body {
      display: flex;
      flex-direction: column;
    }

    .summary-row {
      display: flex;
      align-items: baseline;
      gap: 10px;
      padding: 10px 0;
      border-bottom: 1px solid rgba(155, 77, 202, 0.06);
      font-size: 0.9rem;
    }

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

    .summary-row .s-icon { flex-shrink: 0; width: 22px; text-align: center; }

    .summary-row .s-label {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 600;
      font-size: 0.75rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-muted);
      min-width: 75px;
    }

    .summary-row .s-value {
      flex: 1;
      font-weight: 600;
      color: var(--text-primary);
    }

    /* ---- CTA SECTION ---- */
    .cta-section {
      text-align: center;
      padding: 45px 20px 80px;
    }

    .cta-emblem {
      width: 70px;
      height: auto;
      margin-bottom: 18px;
      animation: pulse-glow 3.5s ease-in-out infinite;
    }

    .cta-question {
      font-family: 'Cinzel Decorative', serif;
      font-size: clamp(1.1rem, 4.5vw, 1.6rem);
      font-weight: 700;
      color: var(--accent-soft);
      text-shadow: 0 0 14px rgba(200, 162, 232, 0.35);
      margin-bottom: 26px;
      letter-spacing: 0.03em;
    }

    .cta-sparkle {
      font-size: 1.2rem;
      vertical-align: middle;
    }

    #whatsapp-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 15px 34px;
      background: linear-gradient(135deg, #25D366, #1da851);
      color: #fff;
      text-decoration: none;
      border-radius: 50px;
      font-family: 'Quicksand', sans-serif;
      font-weight: 700;
      font-size: 0.95rem;
      letter-spacing: 0.03em;
      border: 1.5px solid rgba(37, 211, 102, 0.3);
      transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
      box-shadow: 0 4px 25px rgba(37, 211, 102, 0.2), 0 0 40px rgba(29, 168, 81, 0.1);
      position: relative;
      overflow: hidden;
    }

    #whatsapp-btn::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 60%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
      transition: left 0.6s ease;
    }

    #whatsapp-btn:hover {
      background: linear-gradient(135deg, #1da851, #128C3e);
      transform: translateY(-3px);
      border-color: rgba(37, 211, 102, 0.5);
      box-shadow: 0 8px 35px rgba(37, 211, 102, 0.25), 0 0 50px rgba(29, 168, 81, 0.15);
    }

    #whatsapp-btn:hover::after { left: 200%; }

    .cta-footer {
      margin-top: 32px;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 0.9rem;
      color: var(--text-muted);
      letter-spacing: 0.1em;
    }

    /* ========================================
       NO INVITE / ERROR VIEWS
       ======================================== */
    #no-invite {
      display: none;
      margin: 0 auto;
      padding: 50px 35px;
      max-width: 480px;
      background: linear-gradient(145deg, rgba(26, 10, 46, 0.92), rgba(14, 6, 24, 0.96));
      border: 1.5px solid var(--card-border);
      border-radius: 18px;
      text-align: center;
      animation: fade-in-up 0.8s ease-out both, glow-pulse 5s ease-in-out infinite;
      position: relative;
      top: 25vh;
    }

    #no-invite::before {
      content: '🔮';
      display: block;
      font-size: 50px;
      margin: 0 auto 18px;
      filter: drop-shadow(0 0 10px var(--glow-purple));
    }

    #no-invite h2 {
      font-family: 'Cinzel Decorative', serif;
      font-weight: 700;
      font-size: 1.4rem;
      color: var(--accent-pink);
      margin-bottom: 12px;
    }

    #no-invite p {
      color: var(--text-muted);
      font-size: 0.95rem;
      line-height: 1.7;
    }

    #error-info {
      display: none;
      margin: 80px auto 20px;
      padding: 25px 30px;
      max-width: 480px;
      background: linear-gradient(145deg, rgba(40, 5, 30, 0.9), rgba(26, 10, 46, 0.9));
      border: 1.5px solid rgba(212, 107, 163, 0.4);
      border-radius: 16px;
      color: #e88aab;
      text-align: center;
      font-size: 0.95rem;
      box-shadow: 0 0 20px rgba(212, 107, 163, 0.1);
      animation: fade-in-up 0.6s ease-out both;
    }

    /* ========================================
       ADMIN STYLES — REBELDE MAGICO
       ======================================== */
    #admin-login {
      display: none;
      padding: 50px 40px;
      max-width: 440px;
      margin: 0 auto;
      background: linear-gradient(160deg, rgba(45, 21, 85, 0.85), rgba(14, 6, 24, 0.95));
      border: 1.5px solid var(--card-border);
      border-radius: 18px;
      text-align: center;
      color: var(--text-primary);
      position: relative;
      top: 20vh;
      box-shadow: 0 0 40px rgba(155, 77, 202, 0.12);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    #admin-login::before {
      content: '';
      position: absolute;
      top: -1px;
      left: 15%;
      right: 15%;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--accent-purple), var(--accent-pink), transparent);
      opacity: 0.5;
    }
    #admin-login h1 {
      font-family: 'Cinzel Decorative', serif;
      font-weight: 700;
      font-size: 1.5rem;
      color: var(--accent-soft);
      margin-bottom: 8px;
      letter-spacing: 0.05em;
    }
    #admin-login p {
      color: var(--text-muted);
      font-size: 0.9rem;
      margin-bottom: 24px;
    }
    #admin-login input {
      padding: 12px 18px;
      font-size: 15px;
      font-family: 'Quicksand', sans-serif;
      border: 1.5px solid rgba(155, 77, 202, 0.25);
      border-radius: 12px;
      width: 100%;
      max-width: 280px;
      color: var(--text-primary);
      background: rgba(26, 10, 46, 0.6);
      outline: none;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    #admin-login input:focus {
      border-color: var(--accent-purple);
      box-shadow: 0 0 15px rgba(155, 77, 202, 0.2);
    }
    #admin-login input::placeholder {
      color: var(--text-muted);
    }
    #admin-login button, .admin-btn {
      padding: 12px 28px;
      font-size: 15px;
      font-family: 'Quicksand', sans-serif;
      font-weight: 700;
      background: linear-gradient(135deg, var(--accent-purple), var(--accent-pink));
      color: white;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      margin-top: 16px;
      display: inline-block;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px var(--glow-purple);
      letter-spacing: 0.03em;
    }
    #admin-login button:hover, .admin-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 25px var(--glow-pink);
    }
    #login-error {
      color: var(--accent-rose);
      margin-top: 14px;
      display: none;
      font-size: 0.85rem;
    }

    #admin-panel {
      display: none;
      color: var(--text-primary);
      background: transparent;
      padding: 30px 20px;
      max-width: 700px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }
    #admin-panel h1 {
      font-family: 'Cinzel Decorative', serif;
      font-weight: 700;
      font-size: clamp(1.3rem, 4vw, 1.8rem);
      color: var(--accent-soft);
      text-align: center;
      margin-bottom: 24px;
      letter-spacing: 0.05em;
    }
    #admin-panel h2 {
      font-family: 'Cinzel Decorative', serif;
      font-weight: 700;
      font-size: 1.2rem;
      color: var(--accent-lavender);
      margin-top: 28px;
      margin-bottom: 14px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(155, 77, 202, 0.12);
    }
    #admin-panel h3 {
      font-family: 'Quicksand', sans-serif;
      font-weight: 700;
      color: var(--accent-soft);
      font-size: 1rem;
    }

    .guest-card {
      background: linear-gradient(145deg, rgba(45, 21, 85, 0.6), rgba(14, 6, 24, 0.8));
      border: 1px solid var(--card-border);
      border-radius: 14px;
      padding: 18px;
      margin: 12px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: var(--text-primary);
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .guest-card:hover {
      border-color: rgba(155, 77, 202, 0.35);
      box-shadow: 0 4px 20px rgba(155, 77, 202, 0.1);
    }
    .guest-card.is-confirmed {
      border-color: rgba(76, 175, 80, 0.55);
      background: linear-gradient(145deg, rgba(30, 60, 35, 0.55), rgba(14, 24, 16, 0.8));
    }
    .status-badge {
      display: inline-block;
      font-size: 0.65rem;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 999px;
      margin-left: 8px;
      vertical-align: middle;
      letter-spacing: 0.03em;
    }
    .status-badge.ok { background: rgba(76, 175, 80, 0.2); color: #a5d6a7; border: 1px solid rgba(76, 175, 80, 0.5); }
    .status-badge.pending { background: rgba(255, 255, 255, 0.06); color: var(--text-muted); border: 1px solid rgba(255, 255, 255, 0.12); }
    .confirm-form { margin: 8px 0 2px; }
    .toggle-switch {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      user-select: none;
    }
    .toggle-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
    .toggle-slider {
      position: relative;
      width: 44px;
      height: 24px;
      background: rgba(255, 255, 255, 0.15);
      border-radius: 999px;
      transition: background 0.25s ease;
      flex-shrink: 0;
    }
    .toggle-slider::before {
      content: "";
      position: absolute;
      top: 3px;
      left: 3px;
      width: 18px;
      height: 18px;
      background: #fff;
      border-radius: 50%;
      transition: transform 0.25s ease;
    }
    .toggle-switch input:checked + .toggle-slider { background: #4caf50; }
    .toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }
    .toggle-label { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; }
    .toggle-switch input:checked ~ .toggle-label { color: #a5d6a7; }
    .guest-card .info { flex: 1; min-width: 0; }
    .guest-card .name {
      font-weight: 700;
      font-size: 1.05rem;
      color: var(--text-primary);
    }
    .guest-card .details {
      color: var(--text-muted);
      font-size: 0.8rem;
      margin-top: 4px;
      font-family: monospace;
    }
    .guest-card .url {
      font-size: 0.65rem;
      color: var(--text-muted);
      word-break: break-all;
      margin-top: 6px;
      opacity: 0.7;
    }
    .guest-card .qr-container {
      margin-left: 15px;
      flex-shrink: 0;
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid rgba(155, 77, 202, 0.2);
    }
    .guest-card .qr-container img {
      display: block;
      border-radius: 9px;
    }

    #add-guest-section {
      background: linear-gradient(145deg, rgba(45, 21, 85, 0.5), rgba(14, 6, 24, 0.7));
      border: 1px solid var(--card-border);
      border-radius: 14px;
      padding: 22px;
      margin: 20px 0;
      color: var(--text-primary);
    }
    #add-guest-section h3 {
      margin-top: 0;
      margin-bottom: 14px;
    }
    #add-guest-section input, #add-guest-section select {
      padding: 10px 14px;
      font-size: 14px;
      font-family: 'Quicksand', sans-serif;
      border: 1.5px solid rgba(155, 77, 202, 0.25);
      border-radius: 10px;
      margin-right: 8px;
      color: var(--text-primary);
      background: rgba(26, 10, 46, 0.5);
      outline: none;
      transition: border-color 0.3s ease;
    }
    #add-guest-section input:focus, #add-guest-section select:focus {
      border-color: var(--accent-purple);
    }
    #add-guest-section input::placeholder {
      color: var(--text-muted);
    }
    .btn-add {
      padding: 10px 20px;
      font-size: 14px;
      font-family: 'Quicksand', sans-serif;
      font-weight: 700;
      background: linear-gradient(135deg, var(--accent-purple), var(--accent-pink));
      color: white;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 3px 12px var(--glow-purple);
    }
    .btn-add:hover {
      transform: translateY(-1px);
      box-shadow: 0 5px 18px var(--glow-pink);
    }

    .party-info {
      background: linear-gradient(145deg, rgba(45, 21, 85, 0.5), rgba(14, 6, 24, 0.7));
      border: 1px solid rgba(200, 162, 232, 0.15);
      border-radius: 14px;
      padding: 18px;
      margin-bottom: 20px;
      color: var(--text-primary);
    }
    .party-info strong {
      font-family: 'Cinzel Decorative', serif;
      color: var(--accent-soft);
      font-size: 1.05rem;
    }
    .party-info span {
      color: var(--text-secondary);
      font-size: 0.85rem;
    }

    .copy-btn {
      padding: 5px 12px;
      font-size: 0.75rem;
      font-family: 'Quicksand', sans-serif;
      font-weight: 600;
      background: rgba(155, 77, 202, 0.3);
      color: var(--accent-soft);
      border: 1px solid rgba(155, 77, 202, 0.25);
      border-radius: 8px;
      cursor: pointer;
      margin-top: 6px;
      transition: all 0.25s ease;
    }
    .copy-btn:hover {
      background: rgba(155, 77, 202, 0.5);
      border-color: var(--accent-purple);
    }
    .open-btn {
      padding: 5px 12px;
      font-size: 0.75rem;
      font-family: 'Quicksand', sans-serif;
      font-weight: 600;
      background: rgba(212, 107, 163, 0.25);
      color: var(--accent-rose);
      border: 1px solid rgba(212, 107, 163, 0.2);
      border-radius: 8px;
      cursor: pointer;
      margin-top: 6px;
      margin-left: 6px;
      text-decoration: none;
      display: inline-block;
      transition: all 0.25s ease;
    }
    .open-btn:hover {
      background: rgba(212, 107, 163, 0.4);
      border-color: var(--accent-pink);
    }
    #guest-count {
      color: var(--text-muted);
      font-size: 0.85rem;
      font-weight: 400;
    }
    #admin-panel, #admin-login { position: relative; z-index: 1; }

    /* ========================================
       RESPONSIVE
       ======================================== */
    @media (min-width: 769px) {
      body::before {
        background:
          radial-gradient(ellipse 90% 60% at 15% 5%, rgba(155, 77, 202, 0.18) 0%, transparent 55%),
          radial-gradient(ellipse 70% 55% at 85% 75%, rgba(212, 107, 163, 0.12) 0%, transparent 50%),
          radial-gradient(ellipse 50% 45% at 50% 40%, rgba(232, 130, 158, 0.06) 0%, transparent 45%),
          radial-gradient(ellipse 80% 40% at 60% 90%, rgba(155, 77, 202, 0.1) 0%, transparent 50%),
          linear-gradient(165deg, rgba(14,6,24,0.85) 0%, rgba(21,11,40,0.8) 25%, rgba(26,10,46,0.75) 50%, rgba(18,7,31,0.8) 75%, rgba(14,6,24,0.85) 100%),
          url('/img/fondo-desktop.png') center/cover no-repeat;
      }
    }

    @media (max-width: 420px) {
      .hero { padding: 20px 16px 45px; }
      .hero-frame {
        width: 180px;
        height: 180px;
      }
      .hero-name strong { font-size: 1.7rem; }

      #public-info { padding: 0 14px; }

      .detail-card { padding: 16px 16px; gap: 12px; }
      .detail-icon { width: 42px; height: 42px; font-size: 1.4rem; }
      .detail-label { font-size: 0.7rem; }
      .detail-value { font-size: 0.92rem; }

      .gallery-emblem { max-width: 110px; }
      .gallery-frame { padding: 6px; }
      .gallery-img { max-width: 280px; }

      .summary-card { padding: 20px 18px; }
      .summary-row .s-label { min-width: 60px; font-size: 0.68rem; }
      .summary-row { font-size: 0.82rem; }

      .cta-section { padding: 35px 16px 70px; }
      #whatsapp-btn { padding: 13px 26px; font-size: 0.88rem; }

      #no-invite { top: 15vh; padding: 40px 24px; }
      .section-divider { padding: 35px 0 18px; }
    }

    /* ---- COUNTDOWN SECTION ---- */
    .countdown-section {
      text-align: center;
      padding: 30px 0 10px;
    }

    .countdown-label {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 600;
      font-size: 0.8rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 18px;
    }

    .countdown-grid {
      display: flex;
      justify-content: center;
      gap: 12px;
    }

    .countdown-unit {
      background: linear-gradient(145deg, rgba(26, 10, 46, 0.9), rgba(14, 6, 24, 0.95));
      border: 1px solid var(--card-border);
      border-radius: 14px;
      padding: 16px 10px;
      min-width: 68px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      transition: border-color 0.4s ease, box-shadow 0.4s ease;
    }

    .countdown-unit::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 50%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(200, 162, 232, 0.04), transparent);
      animation: shimmer 4s ease-in-out infinite;
    }

    .countdown-number {
      display: block;
      font-family: 'Cinzel Decorative', serif;
      font-size: clamp(1.6rem, 6vw, 2.2rem);
      font-weight: 900;
      color: transparent;
      background: linear-gradient(135deg, var(--accent-soft), var(--accent-pink), var(--accent-lavender));
      background-size: 200% 200%;
      -webkit-background-clip: text;
      background-clip: text;
      animation: gradient-shift 4s ease-in-out infinite;
      line-height: 1.2;
    }

    .countdown-text {
      display: block;
      font-family: 'Cormorant Garamond', serif;
      font-size: 0.65rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-top: 4px;
    }

    .countdown-finished {
      font-family: 'Cinzel Decorative', serif;
      font-size: clamp(1.1rem, 4vw, 1.5rem);
      font-weight: 700;
      color: var(--accent-pink);
      text-shadow: 0 0 20px rgba(212, 107, 163, 0.4);
      padding: 20px 0;
    }

    /* ---- MUSIC TOGGLE ---- */
    .music-toggle {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 1000;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: 1.5px solid rgba(155, 77, 202, 0.4);
      background: linear-gradient(135deg, rgba(26, 10, 46, 0.95), rgba(45, 21, 85, 0.9));
      color: var(--accent-soft);
      font-size: 1.2rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 20px rgba(155, 77, 202, 0.2), 0 0 30px rgba(155, 77, 202, 0.08);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      transition: all 0.3s ease;
      animation: glow-pulse 4s ease-in-out infinite;
    }

    .music-toggle:hover {
      transform: scale(1.1);
      border-color: var(--accent-pink);
      box-shadow: 0 4px 30px rgba(212, 107, 163, 0.3);
    }

    .music-toggle .bar {
      display: inline-block;
      width: 3px;
      background: var(--accent-soft);
      border-radius: 2px;
      margin: 0 1.5px;
      animation: music-bar 0.8s ease-in-out infinite alternate;
    }

    .music-toggle .bar:nth-child(1) { height: 8px; animation-delay: 0s; }
    .music-toggle .bar:nth-child(2) { height: 14px; animation-delay: 0.15s; }
    .music-toggle .bar:nth-child(3) { height: 10px; animation-delay: 0.3s; }
    .music-toggle .bar:nth-child(4) { height: 16px; animation-delay: 0.1s; }
    .music-toggle .bar:nth-child(5) { height: 6px; animation-delay: 0.25s; }

    .music-toggle.paused .bar {
      animation: none;
      height: 3px !important;
    }

    @keyframes music-bar {
      0% { transform: scaleY(0.4); }
      100% { transform: scaleY(1.6); }
    }

    /* ---- ENVELOPE COVER ---- */
    html.envelope-locked {
      overflow: hidden !important;
      height: 100% !important;
    }
    body.envelope-locked {
      position: fixed !important;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      overflow: hidden !important;
      touch-action: none;
      overscroll-behavior: none;
    }

    .envelope-cover {
      position: fixed;
      inset: 0;
      z-index: 9999;
      overflow: hidden;
      overscroll-behavior: none;
      touch-action: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: var(--bg-primary);
      cursor: pointer;
      transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .envelope-cover.opening {
      opacity: 0;
      transform: scale(1.1);
      pointer-events: none;
    }

    .envelope-inner {
      text-align: center;
      animation: float 4s ease-in-out infinite;
    }

    .envelope-seal {
      width: clamp(80px, 25vw, 120px);
      height: auto;
      margin-bottom: 28px;
      filter: drop-shadow(0 0 25px rgba(212, 107, 163, 0.5));
      animation: pulse-glow 3s ease-in-out infinite;
    }

    .envelope-title {
      font-family: 'Cinzel Decorative', serif;
      font-weight: 700;
      font-size: clamp(1.1rem, 4vw, 1.6rem);
      color: transparent;
      background: linear-gradient(135deg, var(--accent-soft), var(--accent-pink), var(--accent-lavender));
      background-size: 200% 200%;
      -webkit-background-clip: text;
      background-clip: text;
      animation: gradient-shift 4s ease-in-out infinite;
      margin-bottom: 10px;
    }

    .envelope-subtitle {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: clamp(0.85rem, 3vw, 1rem);
      color: var(--text-muted);
      letter-spacing: 0.15em;
      margin-bottom: 36px;
    }

    .envelope-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 30px;
      border: 1.5px solid rgba(155, 77, 202, 0.4);
      border-radius: 50px;
      background: rgba(155, 77, 202, 0.1);
      color: var(--accent-soft);
      font-family: 'Quicksand', sans-serif;
      font-weight: 600;
      font-size: 0.85rem;
      letter-spacing: 0.08em;
      animation: glow-pulse 3s ease-in-out infinite;
      transition: all 0.3s ease;
    }

    .envelope-cta:hover {
      background: rgba(155, 77, 202, 0.2);
      border-color: var(--accent-pink);
    }

    .envelope-cta-icon {
      font-size: 1.1rem;
      animation: bounce-arrow 2s ease-in-out infinite;
    }

    /* ---- ENHANCED SCROLL REVEALS ---- */
    .reveal-left {
      opacity: 0;
      transform: translateX(-40px);
      transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .reveal-left.visible { opacity: 1; transform: translateX(0); }

    .reveal-right {
      opacity: 0;
      transform: translateX(40px);
      transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .reveal-right.visible { opacity: 1; transform: translateX(0); }

    .reveal-scale {
      opacity: 0;
      transform: scale(0.85);
      transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .reveal-scale.visible { opacity: 1; transform: scale(1); }

    /* Section narrative spacers */
    .section-narrative {
      text-align: center;
      padding: 15px 20px;
    }

    .narrative-text {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: clamp(0.95rem, 3vw, 1.15rem);
      color: var(--accent-soft);
      letter-spacing: 0.08em;
      line-height: 1.6;
      opacity: 0.8;
    }

    .narrative-text .accent {
      color: var(--accent-pink);
      font-weight: 600;
    }

    @media (max-width: 420px) {
      .countdown-grid { gap: 8px; }
      .countdown-unit { min-width: 58px; padding: 12px 6px; }
      .countdown-number { font-size: 1.5rem; }
      .music-toggle { bottom: 16px; right: 16px; width: 42px; height: 42px; }
    }

    @media (max-width: 340px) {
      .hero-frame { width: 160px; height: 160px; }
      .hero-name strong { font-size: 1.5rem; }
      .hero-party-title { font-size: 1.3rem; }
      #party-title { font-size: 1.3rem; }
      .countdown-unit { min-width: 50px; padding: 10px 4px; }
      .countdown-number { font-size: 1.3rem; }
    }