/* ============================================================
   VARIABLES — cambia aquí los colores del sitio
   ============================================================ */
:root {
  --pink:       #CC0000;
  --cream:      #e8e8f0;
  --cream-mesh: #e0e0ec;
  --gold:       #C0C0C0;
  --gold-dark:  #6b6b6b;
  --text-dark:  #1e1b18;
  --text-mid:   #514346;
  --border:     #d5c5c5;
}

/* ============================================================
   RESET Y BASE
   ============================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--cream);
  font-family: 'Playfair Display', serif;
  color: var(--text-dark);
  overflow-x: hidden;
  padding-bottom: 80px; /* espacio para la barra de música */
}

/* ============================================================
   FONDO ANIMADO MESH GRADIENT
   ============================================================ */
.mesh-background {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background:
    linear-gradient(
      160deg,
      #f5f5f5  0%,
      #d8d8d8 12%,
      #a8a8a8 25%,
      #ececec 38%,
      #b8b8b8 50%,
      #f0f0f0 62%,
      #a0a0a0 75%,
      #e0e0e0 87%,
      #c8c8c8 100%
    );
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}

/* Manchas de brillo que se mueven lentamente */
.mesh-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
  pointer-events: none;
}
.mesh-blob-1 {
  background: radial-gradient(ellipse, rgba(255,255,255,0.75) 0%, transparent 70%);
  width: 80vw; height: 60vh;
  top: -20vh; left: 10vw;
  animation: wave1 22s ease-in-out infinite;
}
.mesh-blob-2 {
  background: radial-gradient(ellipse, rgba(255,255,255,0.55) 0%, transparent 65%);
  width: 70vw; height: 50vh;
  top: 25vh; right: -15vw;
  animation: wave2 30s ease-in-out infinite;
}
.mesh-blob-3 {
  background: radial-gradient(ellipse, rgba(200,200,200,0.50) 0%, transparent 65%);
  width: 75vw; height: 45vh;
  bottom: -10vh; left: -10vw;
  animation: wave3 25s ease-in-out infinite;
}
.mesh-blob-4 {
  background: radial-gradient(ellipse, rgba(255,255,255,0.45) 0%, transparent 60%);
  width: 65vw; height: 60vh;
  top: 40vh; left: 15vw;
  animation: wave4 35s ease-in-out infinite;
}
.mesh-blob-5 {
  background: radial-gradient(ellipse, rgba(180,180,180,0.40) 0%, transparent 60%);
  width: 60vw; height: 50vh;
  bottom: 5vh; right: -10vw;
  animation: wave5 28s ease-in-out infinite;
}

@keyframes wave1 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(8vw, 5vh); }
  100% { transform: translate(0, 0); }
}
@keyframes wave2 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-10vw, -8vh); }
  100% { transform: translate(0, 0); }
}
@keyframes wave3 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(12vw, -6vh); }
  100% { transform: translate(0, 0); }
}
@keyframes wave4 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-6vw, 8vh); }
  100% { transform: translate(0, 0); }
}
@keyframes wave5 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(5vw, -6vh); }
  100% { transform: translate(0, 0); }
}

/* ── Destellos (estrellas de 4 puntas) ── */
.sparkle {
  position: absolute;
  pointer-events: none;
  animation: twinkle var(--dur, 3s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.sparkle::before,
.sparkle::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: white;
  border-radius: 9999px;
}
.sparkle::before {
  width: var(--sz, 28px);
  height: 2px;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 6px 3px rgba(255,255,255,0.95), 0 0 18px 8px rgba(255,255,255,0.45);
}
.sparkle::after {
  width: 2px;
  height: var(--sz, 28px);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 6px 3px rgba(255,255,255,0.95), 0 0 18px 8px rgba(255,255,255,0.45);
}
@keyframes twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.6) rotate(0deg); }
  50%       { opacity: 1;    transform: scale(1)   rotate(20deg); }
}

.sp-1  { top: 8%;  left: 22%; --sz:32px; --dur:3.2s; --delay:0s;   }
.sp-2  { top: 6%;  left: 68%; --sz:22px; --dur:2.8s; --delay:1.4s; }
.sp-3  { top: 28%; left: 85%; --sz:28px; --dur:3.5s; --delay:0.7s; }
.sp-4  { top: 52%; left: 10%; --sz:36px; --dur:4s;   --delay:2.1s; }
.sp-5  { top: 45%; left: 50%; --sz:20px; --dur:2.5s; --delay:3.3s; }
.sp-6  { top: 70%; left: 75%; --sz:30px; --dur:3.8s; --delay:0.3s; }
.sp-7  { top: 82%; left: 35%; --sz:26px; --dur:3s;   --delay:1.9s; }
.sp-8  { top: 18%; left: 42%; --sz:18px; --dur:2.6s; --delay:4s;   }
.sp-9  { top: 90%; left: 60%; --sz:24px; --dur:3.4s; --delay:2.6s; }
.sp-10 { top: 35%; left: 5%;  --sz:20px; --dur:2.9s; --delay:1s;   }
.sp-11 { top: 14%; left: 55%; --sz:24px; --dur:3.1s; --delay:2.3s; }
.sp-12 { top: 62%; left: 88%; --sz:18px; --dur:2.7s; --delay:0.5s; }
.sp-13 { top: 78%; left: 18%; --sz:30px; --dur:3.6s; --delay:3.7s; }
.sp-14 { top: 40%; left: 72%; --sz:22px; --dur:2.4s; --delay:1.6s; }
.sp-15 { top: 95%; left: 82%; --sz:28px; --dur:3.3s; --delay:0.9s; }
.sp-16 { top: 22%; left: 8%;  --sz:16px; --dur:2.2s; --delay:4.5s; }
.sp-17 { top: 58%; left: 40%; --sz:34px; --dur:4.2s; --delay:1.1s; }
.sp-18 { top: 3%;  left: 38%; --sz:20px; --dur:3s;   --delay:3s;   }
.sp-19 { top: 75%; left: 95%; --sz:26px; --dur:2.6s; --delay:2.8s; }
.sp-20 { top: 48%; left: 25%; --sz:18px; --dur:3.7s; --delay:0.2s; }
.sp-21 { top: 5%;  left: 80%; --sz:22px; --dur:3.0s; --delay:1.7s; }
.sp-22 { top: 11%; left: 33%; --sz:26px; --dur:2.5s; --delay:3.4s; }
.sp-23 { top: 19%; left: 95%; --sz:18px; --dur:3.9s; --delay:0.6s; }
.sp-24 { top: 30%; left: 60%; --sz:30px; --dur:2.3s; --delay:2.9s; }
.sp-25 { top: 37%; left: 45%; --sz:16px; --dur:4.1s; --delay:1.3s; }
.sp-26 { top: 43%; left: 3%;  --sz:28px; --dur:3.2s; --delay:4.8s; }
.sp-27 { top: 55%; left: 67%; --sz:20px; --dur:2.8s; --delay:0.4s; }
.sp-28 { top: 60%; left: 30%; --sz:24px; --dur:3.5s; --delay:2.2s; }
.sp-29 { top: 67%; left: 52%; --sz:32px; --dur:2.6s; --delay:3.6s; }
.sp-30 { top: 73%; left: 8%;  --sz:18px; --dur:4.3s; --delay:1.5s; }
.sp-31 { top: 80%; left: 92%; --sz:26px; --dur:3.1s; --delay:0.8s; }
.sp-32 { top: 87%; left: 48%; --sz:22px; --dur:2.9s; --delay:4.1s; }
.sp-33 { top: 93%; left: 15%; --sz:20px; --dur:3.4s; --delay:1.0s; }
.sp-34 { top: 98%; left: 70%; --sz:28px; --dur:2.7s; --delay:3.2s; }
.sp-35 { top: 2%;  left: 50%; --sz:16px; --dur:3.8s; --delay:2.5s; }
.sp-36 { top: 9%;  left: 15%; --sz:30px; --dur:2.4s; --delay:0.1s; }
.sp-37 { top: 16%; left: 77%; --sz:18px; --dur:4.0s; --delay:3.9s; }
.sp-38 { top: 24%; left: 28%; --sz:24px; --dur:3.3s; --delay:1.8s; }
.sp-39 { top: 32%; left: 90%; --sz:20px; --dur:2.6s; --delay:4.4s; }
.sp-40 { top: 50%; left: 58%; --sz:34px; --dur:3.6s; --delay:0.7s; }
.sp-41 { top: 57%; left: 82%; --sz:16px; --dur:2.2s; --delay:2.0s; }
.sp-42 { top: 64%; left: 22%; --sz:28px; --dur:3.9s; --delay:3.5s; }
.sp-43 { top: 71%; left: 65%; --sz:22px; --dur:2.8s; --delay:1.2s; }
.sp-44 { top: 76%; left: 43%; --sz:18px; --dur:4.2s; --delay:4.7s; }
.sp-45 { top: 84%; left: 7%;  --sz:26px; --dur:3.0s; --delay:0.3s; }
.sp-46 { top: 89%; left: 78%; --sz:20px; --dur:2.5s; --delay:2.7s; }
.sp-47 { top: 96%; left: 35%; --sz:30px; --dur:3.7s; --delay:1.6s; }
.sp-48 { top: 4%;  left: 62%; --sz:16px; --dur:2.3s; --delay:3.1s; }
.sp-49 { top: 13%; left: 48%; --sz:24px; --dur:4.4s; --delay:0.9s; }
.sp-50 { top: 21%; left: 18%; --sz:20px; --dur:3.1s; --delay:4.2s; }
.sp-51 { top: 26%; left: 73%; --sz:28px; --dur:2.7s; --delay:1.4s; }
.sp-52 { top: 33%; left: 38%; --sz:16px; --dur:3.5s; --delay:3.8s; }
.sp-53 { top: 41%; left: 88%; --sz:22px; --dur:2.9s; --delay:0.5s; }
.sp-54 { top: 46%; left: 15%; --sz:32px; --dur:4.1s; --delay:2.4s; }
.sp-55 { top: 54%; left: 55%; --sz:18px; --dur:3.3s; --delay:1.1s; }
.sp-56 { top: 61%; left: 2%;  --sz:26px; --dur:2.6s; --delay:4.6s; }
.sp-57 { top: 69%; left: 97%; --sz:20px; --dur:3.8s; --delay:0.6s; }
.sp-58 { top: 77%; left: 62%; --sz:24px; --dur:2.4s; --delay:3.0s; }
.sp-59 { top: 85%; left: 28%; --sz:30px; --dur:3.6s; --delay:1.7s; }
.sp-60 { top: 91%; left: 45%; --sz:16px; --dur:2.8s; --delay:4.9s; }


/* ============================================================
   UTILIDADES
   ============================================================ */
.glass-section {
  background: rgba(232, 232, 244, 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.silk-ribbon {
  background: linear-gradient(135deg, var(--pink) 0%, #e63333 100%);
}

/* ============================================================
   ANIMACIONES DE ENTRADA (scroll reveal)
   ============================================================ */
.fade-up {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

/* ============================================================
   NAVBAR
   ============================================================ */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(235, 235, 238, 0.94) 30%,
    rgba(205, 207, 212, 0.95) 65%,
    rgba(175, 178, 185, 0.96) 100%
  );
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 1) inset,
    0 -1px 0 rgba(150, 152, 158, 0.4) inset,
    0 6px 28px rgba(100, 100, 110, 0.30),
    0 2px 6px  rgba(0, 0, 0, 0.12);
}
.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-brand {
  font-family: 'Parisienne', cursive;
  font-size: 1.9rem;
  color: #cc0000;
  text-decoration: none;
  white-space: nowrap;
  text-shadow:
    0 0 12px rgba(200, 0, 0, 0.85),
    0 0 28px rgba(200, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.02em;
}
.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
  align-items: center;
}
@media (max-width: 1024px) { .nav-links { display: none; } }

.nav-links a {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 700;
  color: #1e1b18;
  text-decoration: none;
  letter-spacing: 0.05em;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: color 0.3s, border-color 0.3s;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--pink);
  border-bottom-color: var(--pink);
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.btn-confirm {
  display: inline-block;
  background: linear-gradient(135deg, #cc0000, #ff2222);
  color: white;
  padding: 0.6rem 1.6rem;
  border-radius: 9999px;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(200, 0, 0, 0.45);
  transition: opacity 0.3s, box-shadow 0.3s;
  white-space: nowrap;
}
.btn-confirm:hover {
  opacity: 0.9;
  box-shadow: 0 6px 20px rgba(200, 0, 0, 0.6);
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: var(--pink);
  line-height: 1;
}
@media (max-width: 1024px) { .menu-toggle { display: block; } }

@media (max-width: 768px) {
  .menu-toggle  { display: none !important; }
  .btn-confirm  { display: none !important; }
  .nav-right    { display: none !important; }
  .nav-inner {
    justify-content: center;
  }
  .nav-brand {
    font-size: 1.5rem;
    white-space: normal;
    text-align: center;
  }
}

.mobile-menu {
  display: none;
  flex-direction: column;
  background: linear-gradient(
    180deg,
    rgba(210, 213, 220, 0.98) 0%,
    rgba(185, 190, 200, 0.97) 100%
  );
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  padding: 0.5rem 1.5rem 1rem;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 6px 18px rgba(140, 145, 160, 0.3);
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  color: var(--text-dark);
  text-decoration: none;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(213, 194, 197, 0.2);
  transition: color 0.3s;
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a:hover { color: var(--pink); }

/* ============================================================
   HERO
   ============================================================ */
#hero {
  min-height: 90dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5rem 1rem 0.5rem;
  position: relative;
  overflow: hidden;
}

.hero-card {
  position: relative;
  overflow: hidden;
  border-radius: 3rem;
  border: none;
  padding: 0;
  min-height: 480px;
  max-width: 1100px;
  width: 100%;
  background-image: url('assets/Ubicacion.jpg');
  background-size: cover;
  background-position: center;
  box-shadow: 0 8px 40px rgba(0,0,0,0.35);
}
@media (max-width: 480px) { .hero-card { min-height: 540px; } }

/* Rectángulo burdeos inset — las rosas quedan visibles alrededor */
.hero-card::before {
  content: '';
  position: absolute;
  inset: 30px;
  background: #800000;
  border-radius: 2rem;
  border: 12px solid #d4d4d4;
  box-shadow: 0 0 15px rgba(255,255,255,0.9), 0 0 35px rgba(220,220,220,0.8),
              inset 0 0 12px rgba(255,255,255,0.2);
  z-index: 0;
}

/* Título y mensaje se superponen: ambos llenan toda la tarjeta */
.hero-title-group,
.hero-typewriter-wrap {
  position: absolute;
  inset: 42px; /* 30px (inset ::before) + 12px (border) */
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 2rem;
  text-align: center;
}
@media (max-width: 768px) {
  .hero-title-group,
  .hero-typewriter-wrap {
    inset: 20px; /* 12px (inset mobile) + 8px (border mobile) */
    padding: 1rem 1.25rem;
  }
}

/* Título: transición de salida */
.hero-title-group {
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.hero-title-group.fade-out {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}

.hero-mis {
  font-family: 'Parisienne', cursive;
  font-size: clamp(3.2rem, 9vw, 5rem);
  color: #fff8e7;
  display: block;
  margin-bottom: 0.1rem;
  text-shadow:
    0 0 14px rgba(230, 230, 255, 0.95),
    0 0 32px rgba(230, 230, 255, 0.6),
    0 2px 6px rgba(0, 0, 0, 0.55);
}
.hero-xv {
  font-family: 'Playfair Display', serif;
  font-size: clamp(8rem, 22vw, 12rem);
  font-weight: 700;
  color: #fff8e7;
  line-height: 0.9;
  display: block;
  margin-top: -2rem;
  text-shadow:
    0 0 20px rgba(230, 230, 255, 0.95),
    0 0 50px rgba(230, 230, 255, 0.55),
    0 0 80px rgba(230, 230, 255, 0.25),
    0 3px 8px rgba(0, 0, 0, 0.6);
}
.hero-name {
  font-family: 'Parisienne', cursive;
  font-size: clamp(3.2rem, 11vw, 6rem);
  color: #fff8e7;
  display: block;
  text-shadow:
    0 0 14px rgba(230, 230, 255, 0.95),
    0 0 32px rgba(230, 230, 255, 0.6),
    0 2px 6px rgba(0, 0, 0, 0.55);
  margin-top: 1.5rem;
}

/* Mensaje: empieza invisible, aparece con fade simple */
.hero-typewriter-wrap {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.hero-typewriter-wrap.visible {
  opacity: 1;
}
.hero-quote {
  font-style: italic;
  color: #fff8e7;
  font-size: clamp(1.25rem, 3vw, 1.65rem);
  line-height: 1.8;
  text-shadow:
    0 0 12px rgba(230, 230, 255, 0.9),
    0 0 28px rgba(230, 230, 255, 0.6),
    0 0 48px rgba(230, 230, 255, 0.3),
    0 2px 6px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.03em;
}

/* Cada letra empieza invisible y aparece con fade */
.hero-letter {
  opacity: 0;
  transition: opacity 0.35s ease;
}
.hero-letter.visible {
  opacity: 1;
}

/* ============================================================
   INVITE
   ============================================================ */
#invite {
  padding: 1rem 1rem 2.5rem;
}

/* Marco exterior: imagen de rosas con bordes redondeados */
.invite-frame {
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 3rem;
  overflow: hidden;
  background-image: url('assets/Ubicacion.jpg');
  background-size: cover;
  background-position: center;
  padding: 40px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.35);
}

/* Tarjeta interior: burdeos con borde plateado brillante */
.invite-card {
  width: 100%;
  min-height: 400px;
  text-align: center;
  padding: 3rem 2rem;
  border-radius: 2rem;
  border: 12px solid #d4d4d4;
  background: #800000;
  box-shadow: 0 0 15px rgba(255,255,255,0.9), 0 0 35px rgba(220,220,220,0.8),
              inset 0 0 12px rgba(255,255,255,0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
}
.invite-card > * { position: relative; z-index: 1; }

.invite-photo-wrap { display: block; }
.invite-photo-frame {
  width: 260px;
  height: 380px;
  border-radius: 1rem;
  overflow: hidden;
  margin: 0 auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  outline: 4px solid rgba(255, 255, 255, 0.75);
  outline-offset: 4px;
}
@media (max-width: 480px) {
  .invite-photo-frame {
    width: 220px;
    height: 320px;
  }
}
.invite-photo {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.invite-heading {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  color: #fff8e7;
  line-height: 1.8;
  max-width: 900px;
  width: 100%;
  text-shadow:
    0 0 12px rgba(230, 230, 255, 0.9),
    0 0 28px rgba(230, 230, 255, 0.6),
    0 0 48px rgba(230, 230, 255, 0.3),
    0 2px 6px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.03em;
}

/* ============================================================
   DETAILS
   ============================================================ */
#details { padding: 2.5rem 1rem; }

/* Tarjeta contenedora con imagen de fondo */
.details-wrap {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 3rem;
  overflow: hidden;
  background-image: url('assets/Ubicacion.jpg');
  background-size: cover;
  background-position: center;
  padding: 40px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.35);
}

.details-inner {
  position: relative;
  z-index: 1;
  padding: 3.5rem 2.5rem;
  background: #800000;
  border: 12px solid #d4d4d4;
  border-radius: 2rem;
  box-shadow: 0 0 15px rgba(255,255,255,0.9), 0 0 35px rgba(220,220,220,0.8),
              inset 0 0 12px rgba(255,255,255,0.2);
}

.section-title-pill {
  display: flex;
  justify-content: center;
  margin-bottom: 3rem;
}
.pill {
  padding: 1.25rem 3rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.65);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(204, 0, 0, 0.15);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  text-align: center;
  width: 100%;
}
.pill h2 {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  color: #cc0000;
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  text-shadow: 0 0 18px rgba(204, 0, 0, 0.2);
}
#dresscode .pill h2 {
  font-size: clamp(2rem, 5vw, 3rem);
}
.pill-subt {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8a0000;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.details-cards {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: stretch;
}
@media (min-width: 768px) {
  .details-cards {
    flex-direction: row;
    align-items: stretch;
  }
}

.detail-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.75rem;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.65);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(204, 0, 0, 0.15);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}
.detail-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.detail-icon {
  font-family: 'Material Symbols Outlined';
  font-size: 2.8rem;
  color: #cc0000;
  display: block;
  margin-bottom: 0.75rem;
  text-shadow: 0 0 12px rgba(204, 0, 0, 0.35);
}
.detail-label {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8a0000;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.detail-value {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e1b18;
  line-height: 1.3;
}
.detail-sub {
  color: #514346;
  font-size: 0.95rem;
  font-weight: 600;
  margin-top: 0.3rem;
}

.parents-block {
  margin-top: 2rem;
  text-align: center;
  padding: 2rem 2rem;
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(204, 0, 0, 0.25);
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.parents-label {
  font-family: 'Parisienne', cursive;
  font-size: 1.6rem;
  letter-spacing: 0.03em;
  text-transform: none;
  color: #cc0000;
  font-weight: 400;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-shadow: 0 0 14px rgba(204, 0, 0, 0.25);
}
.parents-label::before,
.parents-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(204, 0, 0, 0.4), transparent);
  display: inline-block;
}
.parents-names {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
@media (min-width: 768px) {
  .parents-names { flex-direction: row; justify-content: center; gap: 4rem; }
}
.parents-names p {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #1e1b18;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ============================================================
   COUNTDOWN
   ============================================================ */
.countdown-mesh {
  background-color: rgb(100, 0, 0);
  position: relative;
  overflow: hidden;
  padding: 2.5rem 1rem;
}
.countdown-mesh-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(55px);
  pointer-events: none;
}
.countdown-mesh-blob-1 {
  background: rgb(200, 0, 0);
  width: 90vw; height: 400%;
  top: -150%; left: -20vw;
  opacity: 0.8;
  animation: cdwave1 8s ease-in-out infinite;
}
.countdown-mesh-blob-2 {
  background: rgb(150, 0, 0);
  width: 70vw; height: 350%;
  top: -120%; right: -15vw;
  opacity: 0.85;
  animation: cdwave2 11s ease-in-out infinite;
}
.countdown-mesh-blob-3 {
  background: rgb(185, 185, 195);
  width: 60vw; height: 300%;
  bottom: -100%; left: 20vw;
  opacity: 0.5;
  animation: cdwave3 7s ease-in-out infinite;
}
@keyframes cdwave1 {
  0%   { transform: translate(0%) scale(1) rotate(0deg); }
  25%  { transform: translate(8%, -10%) scale(1.08) rotate(5deg); }
  50%  { transform: translate(-5%, 12%) scale(0.95) rotate(-3deg); }
  75%  { transform: translate(10%, 5%) scale(1.05) rotate(7deg); }
  100% { transform: translate(0%) scale(1) rotate(0deg); }
}
@keyframes cdwave2 {
  0%   { transform: translate(0%) scale(1) rotate(0deg); }
  30%  { transform: translate(-12%, 18%) scale(1.1) rotate(-8deg); }
  55%  { transform: translate(-5%, 8%) scale(0.93) rotate(5deg); }
  80%  { transform: translate(-15%, 22%) scale(1.07) rotate(-6deg); }
  100% { transform: translate(0%) scale(1) rotate(0deg); }
}
@keyframes cdwave3 {
  0%   { transform: translate(0%) scale(1) rotate(0deg); }
  20%  { transform: translate(10%, -12%) scale(1.12) rotate(10deg); }
  50%  { transform: translate(-8%, -18%) scale(0.96) rotate(-7deg); }
  70%  { transform: translate(6%, -8%) scale(1.06) rotate(5deg); }
  100% { transform: translate(0%) scale(1) rotate(0deg); }
}

.countdown-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}
.countdown-title {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2rem;
}
.countdown-grid {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.countdown-item {
  background: rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 1rem;
  padding: 1.5rem 1.75rem;
  min-width: 90px;
}
.countdown-number {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.5rem, 7vw, 4rem);
  font-weight: 700;
  color: white;
  display: block;
  line-height: 1;
}
.countdown-unit {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 0.4rem;
  display: block;
}

/* ============================================================
   LOCATION
   ============================================================ */
#location { padding: 2.5rem 1rem; }

.location-wrap {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 3rem;
  overflow: hidden;
  background-image: url('assets/Ubicacion.jpg');
  background-size: cover;
  background-position: center;
  padding: 40px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.35);
}

.location-inner {
  position: relative;
  z-index: 1;
  padding: 2rem 1.5rem;
  background: #800000;
  border: 12px solid #d4d4d4;
  border-radius: 2rem;
  box-shadow: 0 0 15px rgba(255,255,255,0.9), 0 0 35px rgba(220,220,220,0.8),
              inset 0 0 12px rgba(255,255,255,0.2);
}
.map-wrapper {
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.12);
  border: 4px solid rgba(255, 255, 255, 0.5);
  margin-bottom: 1rem;
  width: 100%;
}
.map-wrapper iframe {
  width: 100%;
  height: 280px;
  display: block;
  border: 0;
}
@media (min-width: 768px) { .map-wrapper iframe { height: 340px; } }

.location-card {
  text-align: center;
  padding: 0.75rem 1.5rem;
  border-radius: 1.5rem;
  border: none;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.location-icon {
  font-family: 'Material Symbols Outlined';
  font-size: 2rem;
  color: var(--pink);
  display: block;
  margin-bottom: 0.4rem;
}
.location-card h5 {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  margin-bottom: 0.3rem;
}
.location-card p {
  color: var(--text-mid);
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
}
.btn-maps {
  display: inline-block;
  padding: 0.7rem 2rem;
  border-radius: 0.75rem;
  color: white;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.3s;
}
.btn-maps:hover { opacity: 0.85; }

/* ============================================================
   DRESSCODE
   ============================================================ */
#dresscode { padding: 2.5rem 1rem; }

.dresscode-wrap {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 2.5rem;
  overflow: hidden;
  background-image: url('assets/Ubicacion.jpg');
  background-size: cover;
  background-position: center;
  padding: 40px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.35);
}

.dresscode-inner {
  position: relative;
  z-index: 1;
  padding: 3.5rem 2.5rem;
  background: #800000;
  border: 12px solid #d4d4d4;
  border-radius: 2rem;
  box-shadow: 0 0 15px rgba(255,255,255,0.9), 0 0 35px rgba(220,220,220,0.8),
              inset 0 0 12px rgba(255,255,255,0.2);
}
.dresscode-cols {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  align-items: stretch;
  min-height: 420px;
}
.dresscode-card-item {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  overflow: hidden;
}

.dresscode-nota-img {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
  object-position: center;
  border-radius: 1rem;
  display: block;
}

.dresscode-tag {
  font-family: 'Parisienne', cursive;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  color: #0a0a0a;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.95),
    0 0 24px rgba(255, 255, 255, 0.8),
    0 0 48px rgba(230, 230, 255, 0.6),
    0 3px 8px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.03em;
}


/* Imagen descarga2 */
.dresscode-img-wrap {
  max-width: 340px;
  margin: 0 auto;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.dresscode-img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .dresscode-wrap   { overflow: hidden; border-radius: 1.5rem; }
  .dresscode-inner  { padding: 1.25rem 0.75rem; }
  .dresscode-cols   { flex-direction: column; min-height: 0; align-items: stretch; gap: 0.75rem; }
  .dresscode-card-item {
    display: block;
    flex: none;
    overflow: hidden;
    padding: 0.75rem;
  }
  .dresscode-nota-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    border-radius: 0.75rem;
  }
  .dresscode-img-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: 0.75rem;
  }
  .dresscode-img   { display: block; width: 100%; height: auto; }
  .dresscode-tag   { font-size: 1.4rem; line-height: 1.6; margin-top: 0.75rem; }
}

/* ============================================================
   LLUVIA DE SOBRES
   ============================================================ */
.envelopes-section {
  padding: 0 1rem 2.5rem;
  max-width: 1100px;
  margin: 0 auto;
}
.envelopes-wrap {
  position: relative;
  border-radius: 2.5rem;
  overflow: hidden;
  background-image: url('assets/Ubicacion.jpg');
  background-size: cover;
  background-position: center;
  padding: 40px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.35);
}
.envelopes-card {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 2.5rem 2rem;
  border-radius: 1.5rem;
  background: #800000;
  border: 12px solid #d4d4d4;
  box-shadow: 0 0 15px rgba(255,255,255,0.9), 0 0 35px rgba(220,220,220,0.8),
              inset 0 0 12px rgba(255,255,255,0.2);
}
.envelopes-icon {
  font-family: 'Material Symbols Outlined';
  font-size: 3.2rem;
  color: #d4d4d4;
  display: block;
  margin-bottom: 0.75rem;
  text-shadow: 0 0 12px rgba(255,255,255,0.6);
}
.envelopes-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 700;
  color: #d4d4d4;
  margin-bottom: 0.75rem;
}
.envelopes-text {
  color: #d4d4d4;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.7;
}

/* ============================================================
   RSVP
   ============================================================ */
#rsvp { padding: 2.5rem 1rem; }

.rsvp-wrap {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 3rem;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
  background-image: url('assets/Ubicacion.jpg');
  background-size: cover;
  background-position: center;
}

.rsvp-inner {
  position: relative;
  z-index: 1;
  padding: 2rem 1.5rem;
}
.rsvp-card {
  background: #800000;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  padding: 2rem 2rem;
  border-radius: 2rem;
  border: 12px solid #d4d4d4;
  box-shadow: 0 8px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(230,230,255,0.3),
              0 0 15px rgba(255,255,255,0.9), 0 0 35px rgba(220,220,220,0.8),
              inset 0 0 12px rgba(255,255,255,0.2);
}
@media (min-width: 640px) { .rsvp-card { padding: 2.5rem 3rem; } }

.rsvp-header {
  text-align: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(230, 230, 255, 0.3);
}
.rsvp-header h2 {
  font-family: 'Parisienne', cursive;
  font-size: clamp(2.5rem, 6vw, 4rem);
  color: #e8e8f4;
  margin-bottom: 0.5rem;
  text-shadow:
    0 0 6px rgba(255, 255, 255, 1),
    0 0 16px rgba(255, 255, 255, 0.95),
    0 0 36px rgba(200, 200, 255, 0.85),
    0 0 70px rgba(180, 180, 255, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.4);
}
.rsvp-header p {
  font-size: 0.82rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #f0f0ff;
}

/* Layout de 2 columnas en desktop */
.rsvp-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 3rem;
}
.rsvp-form-grid .form-group-full {
  grid-column: 1 / -1;
}
@media (max-width: 768px) {
  .rsvp-form-grid { grid-template-columns: 1fr; }
}

.form-group { margin-bottom: 1rem; }

.form-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #f0f0ff;
  margin-bottom: 0.6rem;
}
.form-input,
.form-textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-bottom: 1px solid rgba(230, 230, 255, 0.6);
  padding: 0.65rem 0.5rem;
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  color: #ffffff;
  outline: none;
  border-radius: 0.25rem 0.25rem 0 0;
  transition: border-color 0.3s, background 0.3s;
}
.form-input:focus,
.form-textarea:focus {
  border-bottom-color: #f0f0ff;
  background: rgba(230, 230, 255, 0.12);
}
.form-input::placeholder,
.form-textarea::placeholder { color: rgba(255, 255, 255, 0.45); }
.form-textarea { resize: vertical; min-height: 90px; }

.radio-group {
  display: flex;
  gap: 1rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}
.radio-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: #ffffff;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  border: 1px solid rgba(230, 230, 255, 0.5);
  transition: all 0.3s;
}
.radio-label:hover {
  border-color: #f0f0ff;
  color: #f0f0ff;
  background: rgba(230, 230, 255, 0.1);
}
.radio-label input[type="radio"] { accent-color: #f0f0ff; cursor: pointer; }


.btn-whatsapp {
  width: 100%;
  color: #1a0000;
  border: none;
  cursor: pointer;
  padding: 1.2rem 2rem;
  border-radius: 9999px;
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #b0b0c8 0%, #e8e8f0 50%, #9898b0 100%);
  box-shadow: 0 4px 24px rgba(230, 230, 255, 0.45), 0 2px 8px rgba(0,0,0,0.3);
  transition: transform 0.2s, box-shadow 0.2s;
  margin-top: 1rem;
}
.btn-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(230, 230, 255, 0.6), 0 4px 12px rgba(0,0,0,0.3);
}
.btn-whatsapp:active { transform: translateY(0); }

/* ============================================================
   CLOSING
   ============================================================ */
#closing { padding: 2.5rem 1rem; }

.closing-wrap {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 3rem;
  overflow: hidden;
  background-image: url('assets/Ubicacion.jpg');
  background-size: cover;
  background-position: center;
  padding: 40px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.35);
}

.closing-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 2rem 2rem;
  background: #800000;
  border: 12px solid #d4d4d4;
  border-radius: 2rem;
  box-shadow: 0 0 15px rgba(255,255,255,0.9), 0 0 35px rgba(220,220,220,0.8),
              inset 0 0 12px rgba(255,255,255,0.2);
}
.closing-card {
  padding: 0;
  border-radius: 1.5rem;
  border: none;
  overflow: hidden;
  background: transparent;
}

.closing-layout {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 160px;
}
@media (max-width: 768px) {
  .closing-layout { flex-direction: column; }
}

/* ── Carrusel (columna izquierda) ── */
.closing-carousel {
  position: relative;
  overflow: hidden;
  width: 393px;
  flex: 0 0 393px;
  height: 524px;
  border-radius: 1rem;
  margin: 1.5rem 0 1.5rem 1.5rem;
}
@media (max-width: 768px) {
  .closing-carousel {
    width: 100%;
    flex: none;
    height: 0;
    padding-bottom: 133%;
    position: relative;
    margin: 1rem 0;
  }
  .carousel-track {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
  }
  .carousel-slide {
    position: relative;
    min-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
  }
  .carousel-dots {
    position: absolute;
    bottom: 0.75rem;
    z-index: 2;
  }
}
.carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}
.carousel-slide {
  min-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  flex-shrink: 0;
}
.carousel-dots {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.4rem;
}
.carousel-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 0.3s;
}
.carousel-dot.active { background: #fff; }

/* ── Mensaje (columna derecha) ── */
.closing-message {
  flex: 1;
  text-align: center;
  padding: 1.25rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}
@media (max-width: 768px) {
  .closing-message { padding: 1.5rem 1.25rem; }
}
.closing-quote {
  font-family: 'Parisienne', cursive;
  font-size: clamp(2rem, 5vw, 3rem);
  color: #fff8e7;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  line-height: 1.3;
  text-shadow:
    0 0 14px rgba(230, 230, 255, 0.95),
    0 0 32px rgba(230, 230, 255, 0.6),
    0 2px 6px rgba(0, 0, 0, 0.55);
}
.closing-text {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  color: #fff8e7;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  line-height: 1.9;
  text-shadow:
    0 0 12px rgba(230, 230, 255, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.5);
}
.closing-no-me-falles {
  font-family: 'Parisienne', cursive;
  color: #fff8e7;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  text-shadow:
    0 0 14px rgba(230, 230, 255, 0.9),
    0 0 32px rgba(230, 230, 255, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.5);
  margin-top: 0.5rem;
}
.closing-heart {
  margin-top: 1.25rem;
  font-size: 3rem;
  color: #f0f0ff;
  -webkit-user-select: none;
  user-select: none;
  text-shadow:
    0 0 6px rgba(255, 255, 255, 1),
    0 0 18px rgba(255, 255, 255, 0.95),
    0 0 40px rgba(200, 200, 255, 0.85),
    0 0 80px rgba(180, 180, 255, 0.6),
    0 0 80px rgba(200, 200, 255, 0.3);
  animation: heartPulse 2s ease-in-out infinite;
}

.closing-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
  flex-wrap: wrap;
  font-family: 'Playfair Display', serif;
  font-size: clamp(0.85rem, 2vw, 1.1rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff8e7;
  text-shadow:
    0 0 10px rgba(230, 230, 255, 0.7),
    0 2px 4px rgba(0, 0, 0, 0.5);
}
.closing-meta-dot {
  color: #f0f0ff;
  font-size: 0.6rem;
  text-shadow: 0 0 8px rgba(230, 230, 255, 1);
}

@keyframes heartPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.18); }
}


/* ============================================================
   REPRODUCTOR DE MÚSICA
   ============================================================ */
.music-player {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
}


/* ============================================================
   MUSIC PLAYER — estado inicial icono pausa
   ============================================================ */
.icon-pause-hidden { display: none; }

/* ============================================================
   RESPONSIVE MÓVIL — max-width: 768px
   ============================================================ */
@media (max-width: 768px) {

  /* --- Secciones: reduce padding exterior --- */
  #invite  { padding: 0.75rem 0.75rem 1.5rem; }
  #details { padding: 1.25rem 0.75rem; }
  #location { padding: 1.25rem 0.75rem; }
  #dresscode { padding: 1.25rem 0.75rem; }
  #closing { padding: 1.25rem 0.75rem; }
  .envelopes-section { padding: 0 0.75rem 1.5rem; }

  /* --- Frames exteriores (marco de rosas): reduce padding --- */
  .invite-frame,
  .details-wrap,
  .location-wrap,
  .envelopes-wrap,
  .closing-wrap {
    padding: 15px;
    border-radius: 1.5rem;
  }
  .dresscode-wrap  { padding: 15px; }
  .rsvp-wrap       { border-radius: 1.5rem; }

  /* --- Tarjetas interiores: reduce padding, borde y radio --- */
  .invite-card {
    padding: 1.5rem 1rem;
    border: 8px solid #d4d4d4;
    border-radius: 1.25rem;
  }
  .details-inner {
    padding: 1.5rem 1rem;
    border: 8px solid #d4d4d4;
    border-radius: 1.25rem;
  }
  .location-inner {
    padding: 1rem 0.75rem;
    border: 8px solid #d4d4d4;
    border-radius: 1.25rem;
  }
  .dresscode-inner {
    border: 8px solid #d4d4d4;
    border-radius: 1.25rem;
  }
  .envelopes-card {
    padding: 1.5rem 1rem;
    border: 8px solid #d4d4d4;
    border-radius: 1rem;
  }
  .closing-inner {
    padding: 1.25rem 0.75rem;
    border: 8px solid #d4d4d4;
    border-radius: 1.25rem;
  }
  .rsvp-inner  { padding: 1rem 0.75rem; }
  .rsvp-card {
    padding: 1.25rem 1rem;
    border: 8px solid #d4d4d4;
    border-radius: 1.25rem;
  }

  /* --- Hero --- */
  .hero-card {
    min-height: 360px;
    border-radius: 1.5rem;
  }
  .hero-card::before {
    inset: 12px;
    border: 8px solid #d4d4d4;
    border-radius: 1.25rem;
  }

  /* --- Pill / título de sección --- */
  .section-title-pill { margin-bottom: 1.5rem; }
  .pill { padding: 1rem 1.25rem; border-radius: 1.25rem; }

  /* --- Tarjetas de detalles (fecha/hora/lugar) --- */
  .details-cards { gap: 0.75rem; }
  .detail-card   { padding: 1.25rem 1rem; }

  /* --- Countdown --- */
  .countdown-mesh  { padding: 1.5rem 0.75rem; }
  .countdown-item  { padding: 1rem 1rem; min-width: 70px; }

  /* --- Closing layout ya cambia a column en 768px (existente) --- */
  .closing-card { border-radius: 1rem; }

  /* --- Hero quote: reduce tamaño y espaciado para que quepa --- */
  .hero-quote {
    font-size: clamp(0.95rem, 3.5vw, 1.3rem);
    line-height: 1.6;
  }
  .hero-card { min-height: 470px; }
}