/* ==========================================================================
   BABY SHOWER DE ARIEL - CARMEN Y JUAN
   Styles & Advanced Underwater Animations
   ========================================================================== */

@font-face {
  font-family: 'Breathing';
  src: url('../fonts/Breathing.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MoonTime';
  src: url('../fonts/MoonTime-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'AliceCustom';
  src: url('../fonts/Alice-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color Palette matching original invitation & Little Mermaid theme */
  --color-purple-deep: #54336c;
  --color-purple-medium: #704787;
  --color-purple-soft: #8e62a8;
  --color-purple-light: #c4b5fd;
  
  --color-ariel-pink: #d92789;
  --color-ariel-pink-light: #f472b6;
  --color-ariel-pink-soft: #fbcfe8;
  
  --color-sea-blue: #38bdf8;
  --color-sea-cyan: #67e8f9;
  --color-sea-teal: #2dd4bf;
  --color-sea-light: #e0f2fe;

  --color-coral-btn: #d44c9b;
  --color-coral-btn-hover: #b83481;
  --color-whatsapp: #25d366;

  /* Typography */
  --font-serif-luxury: 'Playfair Display', 'Cinzel', Georgia, serif;
  --font-serif-classic: 'Cinzel', Georgia, serif;
  --font-script-royal: 'Great Vibes', 'Alex Brush', cursive;
  --font-sans-clean: 'Montserrat', system-ui, -apple-system, sans-serif;

  /* Effects */
  --glow-pink: 0 0 20px rgba(217, 39, 137, 0.45);
  --glow-purple: 0 0 25px rgba(112, 71, 135, 0.35);
  --glow-cyan: 0 0 25px rgba(56, 189, 248, 0.45);
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  height: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: #9cd5fb;
  background: radial-gradient(circle at 50% 20%, #c4b5fd 0%, #a5b4fc 25%, #93c5fd 60%, #7dd3fc 100%);
  font-family: var(--font-sans-clean);
  color: var(--color-purple-deep);
  overflow-x: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* --------------------------------------------------------------------------
   Full Background Canvas (Bubbles & Shimmer)
   -------------------------------------------------------------------------- */
#oceanCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  pointer-events: none; /* Never block buttons / links underneath */
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Ambient Caustic Light Rays
   -------------------------------------------------------------------------- */
.caustic-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.caustic-ray {
  position: absolute;
  top: -20%;
  width: 35vw;
  height: 140vh;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(224, 242, 254, 0.1) 45%, transparent 75%);
  filter: blur(28px);
  transform-origin: top center;
  animation: causticSweep 12s ease-in-out infinite alternate;
}

.ray-1 {
  left: 10%;
  animation-delay: 0s;
  animation-duration: 11s;
}

.ray-2 {
  left: 45%;
  animation-delay: -4s;
  animation-duration: 14s;
  opacity: 0.65;
}

.ray-3 {
  left: 75%;
  animation-delay: -8s;
  animation-duration: 10s;
  opacity: 0.75;
}

@keyframes causticSweep {
  0% {
    transform: rotate(-15deg) scaleX(0.85);
    opacity: 0.2;
  }
  50% {
    opacity: 0.45;
  }
  100% {
    transform: rotate(15deg) scaleX(1.2);
    opacity: 0.25;
  }
}

/* --------------------------------------------------------------------------
   Floating Undersea Jellyfish
   -------------------------------------------------------------------------- */
.floating-jellyfish {
  position: fixed;
  pointer-events: none;
  z-index: 3;
  opacity: 0.55;
  filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.4));
}

.jelly-1 {
  width: 90px;
  top: 18%;
  left: 4%;
  animation: floatJelly 14s ease-in-out infinite alternate;
}

.jelly-2 {
  width: 100px;
  top: 55%;
  right: 4%;
  animation: floatJelly 16s ease-in-out infinite alternate-reverse;
}

@keyframes floatJelly {
  0% {
    transform: translateY(0px) rotate(-6deg) scale(0.95);
  }
  50% {
    transform: translateY(-40px) rotate(4deg) scale(1.05);
  }
  100% {
    transform: translateY(20px) rotate(-3deg) scale(0.98);
  }
}

/* --------------------------------------------------------------------------
   Floating Audio Controller (Top Floating Pill)
   -------------------------------------------------------------------------- */
.music-floating-pill {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 20px rgba(112, 71, 135, 0.22),
              0 0 12px rgba(217, 39, 137, 0.2);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
}

.music-floating-pill:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 25px rgba(112, 71, 135, 0.3),
              0 0 18px rgba(217, 39, 137, 0.35);
}

.music-disc-wrapper {
  position: relative;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.music-disc {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d92789, #9333ea);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(217, 39, 137, 0.4);
}

.music-disc.rotating {
  animation: spinDisc 4s linear infinite;
}

.music-disc.paused {
  animation-play-state: paused;
  background: #a3a3a3;
  box-shadow: none;
}

.icon-music {
  width: 17px;
  height: 17px;
}

.music-waves {
  position: absolute;
  top: -4px;
  right: -4px;
  display: flex;
  gap: 2px;
  align-items: flex-end;
  height: 14px;
}

.music-waves span {
  width: 2.5px;
  background: #d92789;
  border-radius: 2px;
  animation: waveBar 1.2s ease-in-out infinite alternate;
}

.music-waves span:nth-child(1) { height: 6px; animation-delay: 0.1s; }
.music-waves span:nth-child(2) { height: 12px; animation-delay: 0.3s; }
.music-waves span:nth-child(3) { height: 8px; animation-delay: 0.2s; }

.music-disc.paused + .music-waves span {
  animation: none;
  height: 3px;
  background: #a3a3a3;
}

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

@keyframes waveBar {
  0% { transform: scaleY(0.3); }
  100% { transform: scaleY(1.2); }
}

.music-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-purple-deep);
  letter-spacing: 0.5px;
}

/* --------------------------------------------------------------------------
   Welcome / Entrance Gate Overlay
   -------------------------------------------------------------------------- */
.welcome-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 35%, rgba(240, 249, 255, 0.95) 0%, rgba(196, 181, 253, 0.96) 55%, rgba(147, 197, 253, 0.98) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  transition: opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.85s ease;
}

.welcome-overlay.opened {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.welcome-card {
  position: relative;
  width: 100%;
  max-width: 360px;
  background: rgba(255, 255, 255, 0.85);
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: 36px;
  padding: 36px 24px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(112, 71, 135, 0.25),
              0 0 30px rgba(217, 39, 137, 0.25);
  animation: welcomePop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

@keyframes welcomePop {
  0% {
    transform: scale(0.85) translateY(20px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.shell-opener-icon {
  position: relative;
  width: 110px;
  height: 110px;
  margin: 0 auto 16px auto;
  animation: clamPulse 3s ease-in-out infinite;
}

.clam-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 6px 12px rgba(112, 71, 135, 0.25));
}

.clam-top {
  transform-origin: 50% 60%;
  animation: shellOpenAnim 2.8s ease-in-out infinite alternate;
}

@keyframes shellOpenAnim {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(-30deg) translateY(-6px);
  }
}

@keyframes clamPulse {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-8px) scale(1.05);
  }
}

.welcome-sub {
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-purple-medium);
  margin-bottom: 6px;
}

.welcome-title {
  font-family: var(--font-script-royal);
  font-size: 2.8rem;
  line-height: 1.1;
  color: var(--color-ariel-pink);
  margin-bottom: 4px;
  text-shadow: 0 2px 10px rgba(217, 39, 137, 0.25);
}

.welcome-parents {
  font-family: var(--font-serif-luxury);
  font-size: 1.15rem;
  letter-spacing: 2px;
  color: var(--color-purple-deep);
  margin-bottom: 24px;
}

.open-invite-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 24px;
  background: linear-gradient(135deg, #d92789 0%, #a855f7 100%);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  font-family: var(--font-sans-clean);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 8px 25px rgba(217, 39, 137, 0.45);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

.open-invite-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%);
  transform: rotate(25deg);
  animation: btnSheen 3.2s infinite;
}

@keyframes btnSheen {
  0% { transform: translateX(-100%) rotate(25deg); }
  40%, 100% { transform: translateX(100%) rotate(25deg); }
}

.open-invite-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 30px rgba(217, 39, 137, 0.6);
}

.open-invite-btn:active {
  transform: translateY(1px) scale(0.98);
}

.welcome-hint {
  display: block;
  font-size: 0.78rem;
  color: var(--color-purple-soft);
  margin-top: 14px;
}

/* --------------------------------------------------------------------------
   Main Invitation Canvas Frame (Mobile-first, Luxury Card)
   -------------------------------------------------------------------------- */
.invitation-container {
  position: relative;
  z-index: 20;
  width: 100%;
  max-width: 440px;
  margin: 20px auto 40px auto;
  padding: 0 12px;
}

.card-glass-frame {
  position: relative;
  width: 100%;
  border-radius: 40px;
  /* Authentic high-res background from original PDF with dreamy under-the-sea aesthetics */
  background: url('../images/mermaid_bg.jpg') center top / cover no-repeat,
              linear-gradient(180deg, #c4b5fd 0%, #93c5fd 50%, #bfdbfe 100%);
  background-attachment: local;
  box-shadow: 0 25px 60px rgba(84, 51, 108, 0.35),
              0 0 35px rgba(196, 181, 253, 0.45),
              inset 0 0 0 1.5px rgba(255, 255, 255, 0.75);
  padding: 38px 24px 34px 24px;
  text-align: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.4s ease-out;
}

/* Ambient inner water shimmer */
.card-glass-frame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.45) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}

/* Ensure inner contents are above background */
.card-glass-frame > * {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* --------------------------------------------------------------------------
   Section 1: Header / Proclamation
   -------------------------------------------------------------------------- */
.section-header {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Round Purple Play Button (Matching PDF) */
.pdf-play-bubble {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ca86d7 0%, #9856ad 60%, #763b8b 100%);
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 6px 18px rgba(118, 59, 139, 0.35),
              0 0 15px rgba(202, 134, 215, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  cursor: pointer;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pdf-play-bubble:hover {
  transform: scale(1.12);
}

.play-triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #ffffff;
  margin-left: 3px;
}

.pdf-play-bubble.playing .play-triangle {
  width: 12px;
  height: 14px;
  border-style: double;
  border-width: 0 0 0 12px;
  border-color: #ffffff;
  margin-left: 0;
}

.play-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(202, 134, 215, 0.6);
  animation: playRings 2.2s infinite;
  pointer-events: none;
}

@keyframes playRings {
  0% { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.4); opacity: 0; }
}

.banner-proclamation {
  font-family: var(--font-sans-clean);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--color-purple-deep);
  text-transform: uppercase;
  margin-top: 2px;
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.85);
}

/* --------------------------------------------------------------------------
   Section 2: Ariel in Seashell Illustration
   -------------------------------------------------------------------------- */
.character-seashell-section {
  margin: 10px 0 16px 0;
  display: flex;
  justify-content: center;
  perspective: 800px;
}

.seashell-wrapper {
  position: relative;
  width: 250px;
  max-width: 85%;
  margin: 0 auto;
}

.ariel-seashell-img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 20px rgba(112, 71, 135, 0.28));
  position: relative;
  z-index: 2;
  transition: transform 0.3s ease;
}

.magical-glow-disc {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 210px;
  height: 210px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.75) 0%, rgba(244, 114, 182, 0.25) 45%, transparent 70%);
  filter: blur(16px);
  z-index: 1;
  pointer-events: none;
  animation: auraGlow 4s ease-in-out infinite alternate;
}

@keyframes auraGlow {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.9; }
}

/* Float animation */
.float-anim {
  animation: floatBobbing 5s ease-in-out infinite;
}

@keyframes floatBobbing {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(1deg);
  }
}

/* Bubble sparkles floating near seashell */
.bubble-sparkle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, rgba(244, 114, 182, 0.6) 60%, rgba(56, 189, 248, 0.8) 100%);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
  animation: sparkleRise 4s infinite ease-in-out;
}

.bs-1 { width: 10px; height: 10px; top: 15%; left: 8%; animation-delay: 0.2s; }
.bs-2 { width: 14px; height: 14px; top: 40%; right: 6%; animation-delay: 1.1s; }
.bs-3 { width: 8px; height: 8px; bottom: 15%; left: 12%; animation-delay: 2.3s; }
.bs-4 { width: 12px; height: 12px; bottom: 25%; right: 15%; animation-delay: 1.7s; }

@keyframes sparkleRise {
  0%, 100% { transform: translateY(0) scale(0.8); opacity: 0.4; }
  50% { transform: translateY(-12px) scale(1.15); opacity: 1; }
}

/* --------------------------------------------------------------------------
   Section 3: Announcement & Parents
   -------------------------------------------------------------------------- */
.section-announcement {
  margin-bottom: 20px;
}

.sub-lead {
  font-family: var(--font-sans-clean);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 2.5px;
  color: var(--color-purple-medium);
  text-transform: uppercase;
  margin-bottom: 6px;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
}

.parents-names {
  font-family: var(--font-serif-luxury);
  font-size: 2.15rem;
  font-weight: 700;
  letter-spacing: 3px;
  color: #653b7c;
  line-height: 1.15;
  margin-bottom: 12px;
  text-shadow: 0 2px 10px rgba(101, 59, 124, 0.2),
               0 1px 2px rgba(255, 255, 255, 0.9);
}

.invite-msg {
  font-family: var(--font-sans-clean);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 1.2px;
  color: #5d3574;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
}

/* --------------------------------------------------------------------------
   Section 4: Baby Ariel Ribbon Name Banner
   -------------------------------------------------------------------------- */
.baby-name-section {
  margin: 12px 0 24px 0;
  position: relative;
  width: 100%;
}

.banner-container {
  position: relative;
  width: 290px;
  max-width: 95%;
  margin: 0 auto;
}

.name-banner-img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(112, 71, 135, 0.25));
}

.banner-name-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -44%);
  width: 100%;
  text-align: center;
  pointer-events: none;
  z-index: 3;
}

.name-ariel {
  font-family: 'Breathing', cursive, sans-serif;
  font-size: 3.6rem;
  line-height: 1;
  color: #df1884;
  display: inline-block;
  transform: rotate(-2deg);
  -webkit-text-stroke: 1.2px #ffffff;
  paint-order: stroke fill;
  filter: drop-shadow(0 2px 8px rgba(180, 20, 100, 0.35));
  animation: nameShine 3.5s ease-in-out infinite alternate;
}

.name-ariel .capital-a {
  display: inline-block;
  font-family: inherit;
  font-size: 1.08em;
  margin-right: -2px;
}

@keyframes nameShine {
  0% {
    filter: brightness(1) drop-shadow(0 0 5px rgba(216, 27, 131, 0.4));
  }
  100% {
    filter: brightness(1.15) drop-shadow(0 0 14px rgba(244, 114, 182, 0.8));
  }
}

.stardust-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.star-sparkle {
  position: absolute;
  font-size: 1.1rem;
  color: #fbcfe8;
  animation: starTwinkle 2.5s infinite ease-in-out;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
}

.s1 { top: 12%; left: 16%; animation-delay: 0.2s; color: #f472b6; }
.s2 { top: 22%; right: 18%; animation-delay: 0.9s; font-size: 1.3rem; }
.s3 { bottom: 10%; left: 24%; animation-delay: 1.6s; }
.s4 { bottom: 12%; right: 22%; animation-delay: 1.1s; font-size: 1.2rem; color: #c084fc; }

@keyframes starTwinkle {
  0%, 100% { transform: scale(0.5) rotate(0deg); opacity: 0.2; }
  50% { transform: scale(1.3) rotate(45deg); opacity: 1; }
}

/* --------------------------------------------------------------------------
   Section 5: Date, Time & Countdown
   -------------------------------------------------------------------------- */
.section-datetime {
  margin: 10px 0 24px 0;
  width: 100%;
}

.date-badge-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.day-arch {
  font-family: var(--font-serif-classic);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 4px;
  color: #653b7c;
  text-transform: uppercase;
  margin-bottom: 2px;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9);
}

.date-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
}

.side-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.divider-line {
  display: block;
  width: 100%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(101, 59, 124, 0.6), transparent);
  margin-bottom: 6px;
}

.month-text, .time-text {
  font-family: var(--font-sans-clean);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 2px;
  color: #603677;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}

.main-day-number {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.day-digits {
  font-family: var(--font-serif-luxury);
  font-size: 5.2rem;
  font-weight: 700;
  line-height: 0.95;
  color: #8c5aa5;
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 10px rgba(101, 59, 124, 0.25),
               0 1px 2px #ffffff;
}

.day-glow {
  position: absolute;
  font-family: var(--font-serif-luxury);
  font-size: 5.2rem;
  font-weight: 700;
  line-height: 0.95;
  color: #c4b5fd;
  filter: blur(12px);
  z-index: 1;
  opacity: 0.7;
}

/* Dynamic Live Countdown Box */
.countdown-widget {
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 24px;
  padding: 16px 14px;
  box-shadow: 0 8px 25px rgba(112, 71, 135, 0.15),
              inset 0 0 15px rgba(255, 255, 255, 0.5);
  margin: 0 auto;
  max-width: 380px;
}

.countdown-caption {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--color-purple-medium);
  margin-bottom: 10px;
  text-transform: uppercase;
}

.countdown-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.count-box {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(196, 181, 253, 0.5);
  border-radius: 14px;
  padding: 8px 10px;
  min-width: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4px 10px rgba(112, 71, 135, 0.12);
  transition: transform 0.2s ease;
}

.count-num {
  font-family: var(--font-serif-luxury);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--color-purple-deep);
  line-height: 1;
}

.count-unit {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-purple-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 3px;
}

.count-sep {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-ariel-pink);
  opacity: 0.75;
  animation: sepBlink 1s infinite alternate;
}

@keyframes sepBlink {
  0% { opacity: 0.3; }
  100% { opacity: 1; }
}

.calendar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.9);
  border: 1.5px solid rgba(196, 181, 253, 0.8);
  border-radius: 999px;
  font-family: var(--font-sans-clean);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-purple-deep);
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(112, 71, 135, 0.15);
  transition: all 0.25s ease;
}

.calendar-btn:hover {
  background: #ffffff;
  color: var(--color-ariel-pink);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(217, 39, 137, 0.25);
}

.btn-svg-icon {
  width: 15px;
  height: 15px;
}

/* --------------------------------------------------------------------------
   Section 6: Dirección / Location
   -------------------------------------------------------------------------- */
.section-location {
  margin: 14px 0 26px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.script-title {
  font-family: var(--font-script-royal);
  font-size: 3.5rem;
  line-height: 1;
  color: #7b458f;
  margin-bottom: 6px;
  text-shadow: 0 2px 8px rgba(123, 69, 143, 0.25),
               0 1px 2px #ffffff;
}

.title-location {
  transform: rotate(-2deg);
}

.location-details {
  margin-bottom: 14px;
}

.loc-line-1 {
  font-family: var(--font-sans-clean);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #552d6a;
  text-transform: uppercase;
  margin-bottom: 4px;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
}

.loc-line-2 {
  font-family: var(--font-sans-clean);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: #63367b;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
}

/* --------------------------------------------------------------------------
   Pill Buttons (Exact Pink Color and Rounded Shape from PDF)
   -------------------------------------------------------------------------- */
.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 28px;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--font-sans-clean);
  font-size: 0.96rem;
  font-weight: 600;
  color: #2b1735;
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 8px 20px rgba(184, 52, 129, 0.32);
}

/* Pink Location Button from PDF */
.btn-location {
  background: linear-gradient(135deg, #d8579e 0%, #ca428c 100%);
  color: #22102e;
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.btn-location .btn-label {
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
  color: #1f0b29;
}

.pin-icon {
  font-size: 1.25rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  animation: pinBounce 2s infinite ease-in-out;
}

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

.btn-location:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 28px rgba(184, 52, 129, 0.45);
  background: linear-gradient(135deg, #e068a9 0%, #d83d94 100%);
}

/* --------------------------------------------------------------------------
   Section 7: Confirmación / RSVP
   -------------------------------------------------------------------------- */
.section-confirmation {
  margin: 14px 0 28px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title-confirm {
  transform: rotate(-2deg);
}

.confirm-text-block {
  margin-bottom: 16px;
  line-height: 1.6;
}

.confirm-text-block p {
  font-family: var(--font-sans-clean);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1.3px;
  color: #552d6a;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.85);
}

/* WhatsApp Button from PDF */
.btn-whatsapp {
  background: linear-gradient(135deg, #d8579e 0%, #c5428a 100%);
  color: #1f0b29;
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 8px 24px rgba(197, 66, 138, 0.38);
}

.btn-whatsapp .btn-label {
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
  color: #1f0b29;
  font-size: 0.94rem;
}

.wa-btn-icon {
  width: 26px;
  height: 26px;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
  animation: waIconPulse 2.5s infinite ease-in-out;
}

@keyframes waIconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15) rotate(6deg); }
}

.btn-whatsapp:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 30px rgba(197, 66, 138, 0.52);
  background: linear-gradient(135deg, #e464a9 0%, #ce408f 100%);
}

/* --------------------------------------------------------------------------
   Section 8: Closing & Ariel Bottom Illustration
   -------------------------------------------------------------------------- */
.section-closing {
  margin-top: 10px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.script-closing {
  font-family: var(--font-script-royal);
  font-size: 4rem;
  line-height: 1;
  color: #7b458f;
  margin-bottom: 6px;
  text-shadow: 0 2px 10px rgba(123, 69, 143, 0.3),
               0 1px 3px #ffffff;
  animation: glowClosing 4s ease-in-out infinite alternate;
}

@keyframes glowClosing {
  0% {
    text-shadow: 0 2px 8px rgba(123, 69, 143, 0.25), 0 1px 2px #ffffff;
  }
  100% {
    text-shadow: 0 2px 16px rgba(217, 39, 137, 0.45), 0 0 8px rgba(255, 255, 255, 0.9);
  }
}

.bottom-ariel-wrapper {
  position: relative;
  width: 270px;
  max-width: 90%;
  margin: 0 auto;
}

.ariel-bottom-img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 24px rgba(84, 51, 108, 0.32));
  position: relative;
  z-index: 2;
  transition: transform 0.3s ease;
}

.ariel-aura {
  position: absolute;
  top: 55%;
  left: 50%;
  width: 240px;
  height: 160px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.8) 0%, rgba(244, 114, 182, 0.35) 45%, transparent 75%);
  filter: blur(18px);
  z-index: 1;
  pointer-events: none;
  animation: auraPulse 4s infinite alternate ease-in-out;
}

@keyframes auraPulse {
  0% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.95; }
}

.float-subtle {
  animation: floatGentle 5.5s ease-in-out infinite;
}

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

/* --------------------------------------------------------------------------
   Footer Note
   -------------------------------------------------------------------------- */
.card-footer {
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid rgba(112, 71, 135, 0.15);
  width: 100%;
}

.footer-note {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-purple-medium);
  letter-spacing: 0.5px;
}

/* --------------------------------------------------------------------------
   Advanced Ripple Micro-interactions
   -------------------------------------------------------------------------- */
.action-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
}

.action-btn:active::before {
  animation: rippleClick 0.6s ease-out;
}

@keyframes rippleClick {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(25); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Responsive Breakpoints & Mobile Optimization
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .music-floating-pill {
    top: 12px;
    right: 12px;
    padding: 5px 10px 5px 5px;
  }

  .invitation-container {
    padding: 0 6px;
    margin: 10px auto 30px auto;
  }

  .card-glass-frame {
    border-radius: 32px;
    padding: 30px 16px 26px 16px;
  }

  .parents-names {
    font-size: 1.85rem;
    letter-spacing: 2px;
  }

  .name-ariel {
    font-size: 3.3rem;
  }

  .day-digits, .day-glow {
    font-size: 4.6rem;
  }

  .count-box {
    min-width: 50px;
    padding: 6px 6px;
  }

  .count-num {
    font-size: 1.25rem;
  }

  .script-title {
    font-size: 3.1rem;
  }

  .script-closing {
    font-size: 3.5rem;
  }

  .action-btn {
    padding: 11px 22px;
    font-size: 0.88rem;
  }
}

@media (min-width: 768px) {
  .invitation-container {
    max-width: 480px;
    margin: 40px auto 60px auto;
  }

  .card-glass-frame {
    padding: 44px 30px 40px 30px;
    border-radius: 44px;
    box-shadow: 0 35px 80px rgba(84, 51, 108, 0.4),
                0 0 50px rgba(196, 181, 253, 0.5),
                inset 0 0 0 2px rgba(255, 255, 255, 0.8);
  }

  .name-ariel {
    font-size: 4.1rem;
  }

  .parents-names {
    font-size: 2.35rem;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}