@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Montserrat:wght@300;400;600;800&family=Great+Vibes&family=Cinzel:wght@400;700&display=swap');

:root{
  /* Tema: Mariposa | Lila + Negro */
  --bg:#f7f2ff;
  --accent:#b08cff;
  --accent-deep:#7a56d9;
  --black:#0b0b0f;
  --text: rgba(22,18,26,.82);

  --borde-suave: rgba(22,18,26,.10);
  --sombra-suave: 0 12px 34px rgba(22,18,26,.10);

  --ease: cubic-bezier(.2,.9,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  /* Safe-area + espacios del UI fijo */
  --menu-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  --menu-clear:  calc(env(safe-area-inset-bottom, 0px) + 120px);
  --wa-clear:    calc(env(safe-area-inset-bottom, 0px) + 92px);
}

*{ box-sizing:border-box; }
html,body{ 
  height:100%; 
  scroll-behavior: smooth;
}
body{
  margin:0;
  font-family:'Montserrat',sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x:hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
body.modal-open{ overflow:hidden; }

h1,h2,h3{ font-family:'Playfair Display',serif; }
.hidden{ opacity:0; pointer-events:none; }
.section-inner{ width:min(980px, 92vw); margin:0 auto; }
.muted{ opacity:.75; }

/* =========================
   PARTÍCULAS FLOTANTES (Mariposas sutiles)
========================= */
.particles-container{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  opacity: 0.15;
}

/* Generamos partículas con CSS puro */
.particles-container::before,
.particles-container::after {
  content: '🦋';
  position: absolute;
  font-size: 20px;
  animation: float 20s infinite ease-in-out;
  filter: blur(1px);
}

.particles-container::before {
  left: 10%;
  top: 20%;
  animation-delay: 0s;
}

.particles-container::after {
  right: 15%;
  top: 60%;
  animation-delay: 7s;
}

@keyframes float {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(30px, -40px) rotate(5deg);
  }
  50% {
    transform: translate(-20px, -80px) rotate(-5deg);
  }
  75% {
    transform: translate(40px, -120px) rotate(3deg);
  }
}

/* =========================
   BARRA DE PROGRESO
========================= */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(176,140,255,.12);
  z-index: 9998;
  pointer-events: none;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  width: 0%;
  transition: width 0.3s ease;
  box-shadow: 0 0 10px var(--accent);
}

/* =========================
   FLOAT-IN premium mejorado
========================= */
.animar-elemento{
  opacity:0;
  transform: translateY(32px) scale(.96);
  filter: blur(4px);
  transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
  will-change: transform, opacity, filter;
}
.elemento-visible{
  opacity:1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce){
  .animar-elemento{ opacity:1; transform:none; filter:none; }
}

/* =========================
   Títulos mejorados
========================= */
.titulo-seccion{
  font-size: clamp(2.2rem, 7vw, 3.2rem);
  color: var(--accent-deep);
  text-align:center;
  margin: 54px 0 36px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.titulo-icon {
  font-size: 0.85em;
  filter: drop-shadow(0 2px 4px rgba(122,86,217,.25));
}

.titulo-seccion::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  border-radius: 999px;
}

/* =========================
   PREMIUM CARD mejorada
========================= */
.premium-card{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(176,140,255,.20);
  border-radius: 28px;
  box-shadow: 
    0 20px 50px rgba(0,0,0,.08),
    0 4px 12px rgba(122,86,217,.10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.premium-card:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 28px 60px rgba(0,0,0,.12),
    0 8px 16px rgba(122,86,217,.15);
}

.premium-card::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(900px 380px at 18% 0%, rgba(176,140,255,.20), transparent 60%),
    radial-gradient(900px 380px at 82% 100%, rgba(11,11,15,.06), transparent 60%);
  pointer-events:none;
  opacity: 0.6;
}

.premium-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255,255,255,.3) 50%,
    transparent 70%
  );
  transform: rotate(45deg);
  animation: shimmer 8s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.premium-card > *{ position:relative; z-index:1; }

/* =========================
   Modal mejorado
========================= */
.modal-overlay{
  position:fixed; inset:0;
  z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(1200px 700px at 20% 20%, rgba(176,140,255,.28), transparent 60%),
    radial-gradient(900px 500px at 80% 20%, rgba(11,11,15,.15), transparent 60%),
    radial-gradient(900px 600px at 50% 80%, rgba(255,255,255,.18), transparent 70%);
  animation: modalFadeIn 0.6s var(--ease);
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(10px);
  }
}

.modal-overlay::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(248,244,255,.82);
  backdrop-filter: blur(12px);
}

.modal-content{
  position:relative; z-index:1;
  background: rgba(255,255,255,.95);
  border:1px solid rgba(176,140,255,.25);
  box-shadow: 
    var(--sombra-suave),
    0 0 0 1px rgba(255,255,255,.5) inset;
  padding: 44px 28px 34px;
  border-radius: 28px;
  text-align:center;
  width:min(440px, 92vw);
  animation: modalSlideUp 0.6s var(--ease-spring);
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-sparkle {
  font-size: 2.5rem;
  animation: sparkle 2s infinite ease-in-out;
  display: inline-block;
  margin-bottom: 10px;
}

@keyframes sparkle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-15deg) scale(1.1); }
  50% { transform: rotate(15deg) scale(1.15); }
  75% { transform: rotate(-10deg) scale(1.1); }
}

.modal-kicker{
  text-transform:uppercase;
  letter-spacing:2.5px;
  margin:0 0 8px;
  font-size:.9rem;
  opacity:.80;
  font-weight: 600;
}

.modal-title{
  color: var(--accent-deep);
  font-size: 3.8rem;
  margin:0;
  font-family:'Great Vibes',cursive;
  text-shadow: 2px 2px 8px rgba(122,86,217,.15);
}

.modal-subtitle {
  font-size: 1.05rem;
  color: var(--accent-deep);
  margin: 8px 0 0;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.modal-note{ 
  margin:18px 0 0; 
  font-size:.95rem; 
  opacity:.70;
  line-height: 1.6;
}

.btn-primary{
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  gap:12px;
  margin-top: 24px;
  padding: 14px 32px;
  background: linear-gradient(135deg, var(--accent-deep), var(--accent));
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 1.05rem;
  letter-spacing: 1px;
  font-weight: 700;
  cursor:pointer;
  text-decoration:none;
  transition: transform .25s var(--ease), filter .25s var(--ease), box-shadow .25s var(--ease);
  box-shadow: 
    0 14px 30px rgba(122,86,217,.30),
    0 0 0 0 rgba(122,86,217,.4);
  position: relative;
  overflow: hidden;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 
      0 14px 30px rgba(122,86,217,.30),
      0 0 0 0 rgba(122,86,217,.4);
  }
  50% {
    box-shadow: 
      0 14px 30px rgba(122,86,217,.30),
      0 0 0 8px rgba(122,86,217,0);
  }
}

.btn-primary:hover{ 
  transform: translateY(-2px) scale(1.02); 
  filter:saturate(1.08); 
}

.btn-primary:active {
  transform: translateY(0) scale(0.98);
}

.btn-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.3),
    transparent
  );
  animation: btnShimmer 3s infinite;
}

@keyframes btnShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

/* =========================
   HERO mejorado
========================= */
.hero-section{
  position:relative;
  min-height: 100vh;
  min-height: 100dvh;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  padding: 18px 0 calc(var(--menu-clear) + 10px);
  overflow:hidden;
}

.parallax-layer{
  position:absolute; inset:-10%;
  background-position:center;
  background-size:cover;
  will-change: transform;
  filter: saturate(1.08) contrast(1.03) brightness(1.02);
  transform: translate3d(0px, var(--pys,0px), 0);
  transition: filter 0.3s ease;
}

.layer-base{ background-image: var(--heroBase); }

body.parallax-on .parallax-layer{
  transform: translate3d(var(--px,0px), calc(var(--py,0px) + var(--pys,0px)), 0);
}

.hero-vignette{
  position:absolute; inset:0;
  background: radial-gradient(900px 600px at 50% 35%, rgba(0,0,0,.04), rgba(0,0,0,.55));
  pointer-events:none;
  z-index: 2;
}

.hero-gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(176,140,255,.08) 0%,
    transparent 30%,
    transparent 70%,
    rgba(247,242,255,.15) 100%
  );
  pointer-events: none;
  z-index: 2;
}

.hero-section::before{
  content:"";
  position:absolute; inset:0;
  z-index:3;
  pointer-events:none;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 60%,
    rgba(247,242,255,.92) 100%
  );
}

.hero-content{
  position:relative; z-index:4;
  width: min(440px, 92vw);
  padding: 26px 20px 22px;
  border-radius: 32px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 
    0 28px 65px rgba(0,0,0,.32),
    0 0 0 1px rgba(255,255,255,.15) inset;
  text-align:center;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 10px;

  transform: none;
  transition: transform .15s ease;
}

body.parallax-on .hero-content{
  transform: perspective(900px) rotateX(var(--tiltX,0deg)) rotateY(var(--tiltY,0deg));
}

.hero-content::after{
  content:"";
  position:absolute; inset:-1px;
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(255,255,255,.25), transparent 55%);
  pointer-events:none;
}

.hero-badge {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-deep), var(--accent));
  display: grid;
  place-items: center;
  color: white;
  font-size: 1.3rem;
  margin-bottom: 8px;
  box-shadow: 
    0 8px 20px rgba(122,86,217,.35),
    0 0 0 3px rgba(255,255,255,.3);
  animation: badgePulse 3s infinite;
}

@keyframes badgePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 
      0 8px 20px rgba(122,86,217,.35),
      0 0 0 3px rgba(255,255,255,.3);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 
      0 12px 28px rgba(122,86,217,.45),
      0 0 0 5px rgba(255,255,255,.2);
  }
}

.hero-kicker{ 
  letter-spacing:3.5px; 
  margin:0; 
  opacity:.98; 
  color:#fff; 
  text-shadow: 0 2px 6px rgba(0,0,0,.40);
  font-weight: 700;
  font-size: 0.85rem;
}

.hero-title{
  font-family:'Great Vibes',cursive;
  font-size: clamp(3.5rem, 12vw, 5.5rem);
  margin:0;
  line-height:1;
  color:#fff;
  text-shadow: 
    2px 2px 8px rgba(0,0,0,.50),
    0 0 20px rgba(176,140,255,.3);
}

.hero-date{
  font-size: .95rem;
  letter-spacing: 3.5px;
  margin: 4px 0 6px;
  text-transform:uppercase;
  color:#fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.50);
  font-weight: 600;
}

/* ===== Counter mejorado ===== */
.countdown{
  display:flex;
  gap: 12px;
  justify-content:center;
  align-items:stretch;
  margin-top: 14px;
}

.pill{
  position:relative; 
  overflow:hidden; 
  isolation:isolate;
  width: 68px;
  height: 82px;
  border-radius:18px;
  background: rgba(255,255,255,.18);
  border: 1.6px solid rgba(176,140,255,.50);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 
    0 12px 28px rgba(0,0,0,.35), 
    0 0 0 1px rgba(255,255,255,.12) inset;
  display:flex; 
  flex-direction:column; 
  align-items:center; 
  justify-content:center;
}

.pill-glow-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 0%,
    rgba(176,140,255,.15),
    transparent 70%
  );
  pointer-events: none;
}

.pill::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.12), transparent 60%);
  pointer-events:none;
}

.digits{
  font-size: 30px;
  font-weight: 800;
  color:#fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.50);
  font-variant-numeric: tabular-nums;
  min-width: 48px;
  text-align: center;
  position: relative;
}

.digits.flip {
  animation: flipAnimation 0.6s var(--ease);
}

@keyframes flipAnimation {
  0% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(90deg);
    opacity: 0.3;
  }
  100% {
    transform: rotateX(0deg);
  }
}

.label{
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform:uppercase;
  color:rgba(255,255,255,.92);
  text-shadow: 0 1px 4px rgba(0,0,0,.40);
  margin-top: 2px;
  font-weight: 700;
}

/* =========================
   Familia mejorada
========================= */
.family-section{ 
  padding: 54px 0; 
  background: 
    radial-gradient(900px 500px at 50% 0%, rgba(176,140,255,.06), transparent 60%);
}

.family-grid{ 
  display:grid; 
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); 
  gap: 20px; 
  margin-top: 32px; 
}

.family-card{ 
  padding: 28px 22px; 
  text-align:center; 
}

.family-icon-wrap {
  display: inline-block;
  margin-bottom: 16px;
}

.family-icon{
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-deep), var(--accent));
  display:grid;
  place-items:center;
  color:#fff;
  font-size: 1.8rem;
  box-shadow: 
    0 12px 28px rgba(122,86,217,.28),
    0 0 0 4px rgba(255,255,255,.5);
  transition: transform 0.3s var(--ease-spring);
}

.family-card:hover .family-icon {
  transform: scale(1.08) rotate(5deg);
}

.family-card h3{ 
  margin: 0 0 14px; 
  color: var(--accent-deep); 
  font-size: 1.35rem;
}

.family-card p{ 
  margin: 6px 0; 
  font-size: 1rem;
  line-height: 1.6;
}

.family-card p strong{ 
  color: var(--black); 
  font-weight: 700;
}

.q-message{ 
  max-width: 680px; 
  margin: 32px auto 0; 
  padding: 32px 26px; 
  position: relative;
}

.quote-icon {
  position: absolute;
  top: -10px;
  left: 20px;
  font-size: 5rem;
  color: var(--accent);
  opacity: 0.15;
  font-family: 'Playfair Display', serif;
  line-height: 1;
}

.q-msg{ 
  font-style:italic; 
  font-size: 1.15rem; 
  margin:0; 
  color: rgba(22,18,26,.80);
  line-height: 1.75;
  position: relative;
  z-index: 1;
}

.q-sign{
  margin-top: 18px;
  font-family:'Great Vibes',cursive;
  font-size: 2rem;
  color: var(--accent-deep);
  text-align: right;
}

/* =========================
   Itinerario mejorado
========================= */
.timeline-section{ 
  padding: 54px 0; 
  position: relative;
}

.parallax-section{
  position: relative;
  overflow: hidden;
}

.parallax-bg{
  position: absolute;
  inset: -20%;
  background: 
    radial-gradient(900px 600px at 30% 20%, rgba(176,140,255,.10), transparent 60%),
    radial-gradient(900px 600px at 70% 80%, rgba(11,11,15,.05), transparent 60%);
  will-change: transform;
  transform: translateY(var(--pys,0px));
}

.timeline-container {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
}

.timeline-line {
  position: absolute;
  left: 50%;
  top: 40px;
  bottom: 40px;
  width: 3px;
  background: linear-gradient(
    180deg,
    transparent,
    var(--accent) 20%,
    var(--accent) 80%,
    transparent
  );
  transform: translateX(-50%);
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(176,140,255,.3);
}

@media (max-width: 640px) {
  .timeline-line {
    left: 32px;
  }
}

.timeline-row{
  position: relative;
  padding: 20px 0;
  display: flex;
  align-items: center;
  gap: 24px;
}

@media (max-width: 640px) {
  .timeline-row {
    padding-left: 64px;
  }
}

.timeline-dot {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, var(--accent-deep), var(--accent));
  border: 4px solid #fff;
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 
    0 4px 12px rgba(122,86,217,.4),
    0 0 0 6px rgba(176,140,255,.15);
  z-index: 2;
  animation: dotPulse 2s infinite;
}

@media (max-width: 640px) {
  .timeline-dot {
    left: 32px;
  }
}

@keyframes dotPulse {
  0%, 100% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.15);
  }
}

.timeline-card{
  flex: 1;
  padding: 24px;
  text-align: center;
}

.event-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--accent-deep), var(--accent));
  color: #fff;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
  box-shadow: 0 8px 20px rgba(122,86,217,.25);
}

.timeline-time{
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: var(--accent-deep);
  margin: 8px 0 12px;
  font-family: 'Playfair Display', serif;
}

.event-place{
  font-size: 1.05rem;
  color: rgba(22,18,26,.75);
  margin: 8px 0 16px;
  line-height: 1.5;
}

.btn-mapa{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(176,140,255,.12);
  color: var(--accent-deep);
  padding: 10px 18px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  border: 1px solid rgba(176,140,255,.25);
  transition: all 0.3s var(--ease);
}

.btn-mapa:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(122,86,217,.25);
}

/* =========================
   Galería mejorada
========================= */
.gallery-section{ 
  padding: 54px 0; 
}

.deck-wrap{ 
  position:relative; 
  max-width: 460px; 
  margin: 0 auto; 
}

.deck{
  position:relative;
  width:100%;
  aspect-ratio: 3/4;
  margin: 0 auto;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.deck:active {
  cursor: grabbing;
}

.deck-card{
  position:absolute;
  inset: 8px;
  background-image: var(--deckImage);
  background-size:cover;
  background-position:center;
  border-radius: 24px;
  box-shadow: 0 18px 45px rgba(0,0,0,.22);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  border: 4px solid #fff;
  cursor: pointer;
  overflow: hidden;
}

.deck-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.05) 100%
  );
  pointer-events: none;
}

.deck-card:hover {
  box-shadow: 0 24px 55px rgba(0,0,0,.28);
}

.deck-card.vuela-derecha,
.deck-card.vuela-izquierda{
  transition: transform .3s var(--ease), opacity .3s var(--ease);
  pointer-events: none;
}

.deck-card.vuela-derecha{ 
  transform: translate(340px, -60px) rotate(25deg) !important; 
  opacity:0; 
}

.deck-card.vuela-izquierda{ 
  transform: translate(-340px, -60px) rotate(-25deg) !important; 
  opacity:0; 
}

.deck-controls {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.deck-hint{
  text-align:center;
  font-size: .9rem;
  letter-spacing: 1.5px;
  color: var(--accent-deep);
  opacity: .80;
  font-weight: 700;
}

.deck-counter {
  font-size: 0.95rem;
  color: rgba(22,18,26,.70);
  font-weight: 600;
  background: rgba(176,140,255,.10);
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(176,140,255,.20);
}

/* =========================
   Lightbox
========================= */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  transition: opacity 0.3s var(--ease);
}

.lightbox.hidden {
  opacity: 0;
  pointer-events: none;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.3s var(--ease);
  z-index: 10;
}

.lightbox-close:hover {
  background: rgba(255,255,255,.25);
  transform: scale(1.1) rotate(90deg);
}

.lightbox-content {
  max-width: 90vw;
  max-height: 90vh;
  padding: 20px;
}

.lightbox-content img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}

/* =========================
   Dress mejorado
========================= */
.dress-section{ padding: 54px 0; }

.dress{ 
  display:grid; 
  gap: 18px; 
  max-width: 620px; 
  margin:0 auto; 
  padding: 24px; 
}

.dress-box{
  border-radius: 24px;
  padding: 24px;
  text-align:center;
  background: linear-gradient(
    135deg,
    rgba(176,140,255,.12),
    rgba(176,140,255,.06)
  );
  border: 1px solid rgba(176,140,255,.25);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dress-title{ 
  font-size: 2rem; 
  color: var(--accent-deep);
  font-family: 'Playfair Display', serif;
  margin: 0;
}

.dress-badges {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.dress-badge {
  background: rgba(255,255,255,.7);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.9rem;
  color: rgba(22,18,26,.75);
  border: 1px solid rgba(176,140,255,.20);
  font-weight: 600;
}

.dress-badge strong {
  color: var(--black);
  font-weight: 800;
}

.dress-theme {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  background: rgba(255,255,255,.5);
  padding: 16px;
  border-radius: 16px;
  border: 1px dashed rgba(176,140,255,.35);
}

.theme-icon {
  font-size: 2.5rem;
  filter: drop-shadow(0 4px 8px rgba(122,86,217,.25));
}

.dress-note{
  font-size: 1rem;
  color: rgba(22,18,26,.80);
  margin: 4px 0;
  font-weight: 600;
}

.dress-note strong{ 
  color: var(--accent-deep); 
  letter-spacing: .06em; 
}

.dress-colors {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 0.95rem;
  color: rgba(22,18,26,.70);
  font-weight: 600;
}

.color-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

.dress-grid{ 
  display:grid; 
  grid-template-columns: 1fr 1fr; 
  gap:14px; 
}

.dress-item{ 
  padding: 18px; 
  display:flex; 
  flex-direction:column; 
  align-items:center; 
  background: rgba(255,255,255,.5);
  border-radius: 20px;
  border: 1px solid rgba(176,140,255,.15);
  transition: transform 0.3s var(--ease);
}

.dress-item:hover {
  transform: translateY(-4px);
}

.dress-cap{ 
  margin-top:14px; 
  font-weight:800; 
  color: var(--accent-deep);
  letter-spacing:.5px; 
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dress-img-real{
  width:100%;
  height: 200px;
  border-radius: 18px;
  border: 2px dashed rgba(176,140,255,.40);
  background: rgba(247,242,255,.80);
  display:grid;
  place-items:center;
  overflow:hidden;
  transition: border-color 0.3s var(--ease);
}

.dress-item:hover .dress-img-real {
  border-color: var(--accent);
}

.dress-img-real img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
}

/* =========================
   Gifts mejorado
========================= */
.gift-section{ 
  text-align:center; 
  padding: 54px 16px; 
  background: 
    radial-gradient(900px 500px at 50% 50%, rgba(176,140,255,.06), transparent 60%);
}

.gift-box{
  border: 2px dashed rgba(176,140,255,.45);
  background: linear-gradient(
    135deg,
    rgba(247,242,255,.70),
    rgba(255,255,255,.70)
  );
  padding: 36px 22px;
  max-width: 600px;
  margin: 12px auto 0;
}

.gift-icon-wrap {
  display: inline-block;
  margin-bottom: 16px;
}

.gift-icon{ 
  font-size: 4rem; 
  margin-bottom: 18px;
  filter: drop-shadow(0 4px 12px rgba(122,86,217,.25));
  animation: giftBounce 2s infinite;
}

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

.gift-title{ 
  margin:0 0 14px; 
  color: var(--accent-deep);
  font-family:'Playfair Display',serif; 
  font-size: 2rem;
}

.gift-text{ 
  font-style:italic; 
  font-size: 1.1rem; 
  margin-top: 12px; 
  color: rgba(22,18,26,.75);
  line-height: 1.7;
}

/* =========================
   RSVP mejorado
========================= */
.rsvp-section{ 
  padding: 54px 0 var(--menu-clear); 
  background: #fff; 
  text-align:center; 
}

.rsvp-card{ 
  max-width: 680px; 
  margin: 0 auto; 
  padding: 32px 24px; 
}

.rsvp-header {
  margin-bottom: 24px;
}

.rsvp-subtitle {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent-deep);
  margin: 0 0 10px;
}

.rsvp-note {
  font-size: 1rem;
  color: rgba(22,18,26,.70);
  margin: 0;
  line-height: 1.6;
}

/* =========================
   MUSIC PILL mejorada
========================= */
.music-pill{
  position: fixed;
  top: env(safe-area-inset-top, 12px);
  top: 12px;
  right: 12px;
  z-index: 7000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.60);
  background: rgba(255,255,255,.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 
    0 12px 28px rgba(0,0,0,.18),
    0 0 0 1px rgba(255,255,255,.25) inset;
  cursor: pointer;
  color: rgba(22,18,26,.85);
  letter-spacing: .15em;
  font-weight: 700;
  font-size: .72rem;
  text-transform: uppercase;
  transition: all .22s var(--ease);
}

.music-pill:hover{ 
  transform: translateY(-2px); 
  box-shadow: 
    0 20px 45px rgba(0,0,0,.25),
    0 0 0 1px rgba(255,255,255,.25) inset;
}

.music-pill:active {
  transform: translateY(0) scale(0.98);
}

.music-pill.hidden{ 
  opacity:0; 
  pointer-events:none; 
  transform: translateY(-10px); 
}

.pill-glow {
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    rgba(176,140,255,.4),
    rgba(122,86,217,.4)
  );
  opacity: 0;
  filter: blur(8px);
  transition: opacity 0.3s var(--ease);
  z-index: -1;
}

.music-pill.is-on .pill-glow {
  opacity: 1;
  animation: glowPulse 2s infinite;
}

@keyframes glowPulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

.music-waves{ 
  display:flex; 
  align-items:center; 
  gap: 4px; 
}

.music-waves .wave{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent-deep);
  opacity: .40;
  transform: translateY(0);
  transition: all 0.3s var(--ease);
}

.music-pill.is-on .music-waves .wave{
  opacity: 1;
  animation: waveMove .60s ease-in-out infinite;
}

.music-pill.is-on .music-waves .wave:nth-child(2){ animation-delay: .15s; }
.music-pill.is-on .music-waves .wave:nth-child(3){ animation-delay: .30s; }
.music-pill.is-off .music-waves .wave{ 
  opacity:.20; 
  animation:none; 
  filter: grayscale(1); 
}

@keyframes waveMove{ 
  0%,100%{ transform: translateY(0) scaleY(1); } 
  50%{ transform: translateY(-7px) scaleY(1.3); } 
}

/* =========================
   MENÚ mejorado
========================= */
.menu-flotante{
  position:fixed;
  bottom: var(--menu-bottom);
  left:50%;
  transform: translateX(-50%);
  z-index:5000;

  background: rgba(255,255,255,.92);
  border: 1px solid rgba(176,140,255,.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 
    0 20px 45px rgba(0,0,0,.12),
    0 0 0 1px rgba(255,255,255,.5) inset;

  padding: 10px 16px;
  border-radius: 999px;
  display:flex;
  gap: 18px;

  transition: all .45s var(--ease);
  isolation:isolate;
  
  max-width: 90vw;
  overflow: visible;
}

.menu-flotante.hidden{
  opacity:0;
  pointer-events:none;
  transform: translateX(-50%) translateY(20px);
}

.menu-flotante a{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  color: rgba(110,110,120,.92);
  transition: all .22s var(--ease);
  position: relative;
  z-index:2;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.nav-ripple {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: var(--accent);
  opacity: 0;
  transform: scale(0);
  transition: all 0.5s var(--ease);
}

.menu-flotante a:active .nav-ripple {
  opacity: 0.3;
  transform: scale(1);
}

.menu-flotante a:hover{
  transform: translateY(-3px);
  background: rgba(176,140,255,.12);
  color: var(--accent-deep);
  box-shadow: 0 4px 12px rgba(122,86,217,.15);
}

.menu-flotante a:active {
  transform: translateY(0) scale(0.95);
}

.menu-flotante a.is-active{ 
  color: var(--accent-deep);
}

.nav-bubble{
  position:absolute;
  z-index:1;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  left: var(--bubble-x, 0px);
  top: 50%;
  transform: translateY(-50%);
  transition: left .35s var(--ease), width .35s var(--ease);
  background: linear-gradient(
    135deg,
    rgba(176,140,255,.18),
    rgba(176,140,255,.10)
  );
  border: 1px solid rgba(176,140,255,.25);
  box-shadow: 
    0 14px 30px rgba(122,86,217,.15),
    0 0 0 2px rgba(176,140,255,.08) inset;
}

/* =========================
   Footer mejorado
========================= */
.vip-footer{
  background:
    radial-gradient(900px 520px at 20% 0%, rgba(176,140,255,.18), transparent 60%),
    radial-gradient(900px 520px at 80% 0%, rgba(11,11,15,.08), transparent 60%),
    linear-gradient(180deg, #ffffff, #fbf8ff);
  border-top: 1px solid rgba(22,18,26,.08);
  padding: 44px 0 var(--menu-clear);
}

.vip-footer-inner{ 
  width:min(800px, 92vw); 
  margin:0 auto; 
  text-align:center; 
}

.vip-brand{ 
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  gap: 10px;
  text-decoration:none; 
  transition: transform 0.3s var(--ease);
}

.vip-brand:hover {
  transform: scale(1.02);
}

.vip-brand-text{
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  color: #111;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
  text-decoration-color: var(--accent);
}

.vip-brand-badge {
  background: linear-gradient(135deg, var(--accent-deep), var(--accent));
  color: #fff;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  box-shadow: 0 4px 12px rgba(122,86,217,.25);
}

.vip-cta{ 
  margin: 18px 0 20px; 
  font-weight:700; 
  color: rgba(22,18,26,.80);
  font-size: 1.1rem;
}

.vip-whatsapp{
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  gap:10px;
  padding: 16px 30px;
  border-radius: 16px;
  background: #25D366;
  color:#fff;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.4px;
  font-size: 1.05rem;
  box-shadow: 0 16px 35px rgba(37,211,102,.25);
  transition: all .25s var(--ease);
}

.vip-whatsapp i{ font-size: 1.3rem; }

.vip-whatsapp:hover{ 
  transform: translateY(-3px); 
  filter: saturate(1.06); 
  box-shadow: 0 20px 45px rgba(37,211,102,.35);
}

.vip-whatsapp:active {
  transform: translateY(0) scale(0.98);
}

.vip-features {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 24px 0;
  font-size: 0.95rem;
}

.vip-features span {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(176,140,255,.10);
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--accent-deep);
  font-weight: 700;
  border: 1px solid rgba(176,140,255,.20);
}

.vip-features i {
  color: var(--accent);
}

.vip-copy{ 
  margin: 20px 0 0; 
  font-weight:800; 
  color: rgba(22,18,26,.85);
  font-size: 0.95rem;
}

.vip-copy a{ 
  color: #111; 
  text-decoration: underline; 
}

.vip-legal{
  margin: 16px auto 0;
  max-width: 680px;
  font-size: .9rem;
  line-height: 1.7;
  color: rgba(22,18,26,.65);
}

/* =========================
   WhatsApp flotante mejorado
========================= */
.wa-float{
  position:fixed;
  right: 16px;
  bottom: var(--wa-clear);
  z-index: 6000;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 999px;
  text-decoration:none;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(176,140,255,.15);
  box-shadow: 
    0 14px 30px rgba(0,0,0,.16),
    0 0 0 1px rgba(255,255,255,.5) inset;
  backdrop-filter: blur(10px);
  transition: all .25s var(--ease);
  color: rgba(22,18,26,.88);
  position: relative;
}

.wa-float i{
  width: 48px; 
  height: 48px;
  border-radius: 50%;
  display:grid; 
  place-items:center;
  background: #25D366;
  color:#fff;
  font-size: 1.35rem;
  box-shadow: 0 12px 26px rgba(37,211,102,.25);
  position: relative;
  z-index: 2;
}

.wa-pulse {
  position: absolute;
  left: 11px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #25D366;
  opacity: 0.6;
  animation: waPulse 2s infinite;
  z-index: 1;
}

@keyframes waPulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.3;
  }
  100% {
    transform: scale(1);
    opacity: 0.6;
  }
}

.wa-float:hover{ 
  transform: translateY(-3px); 
  filter: saturate(1.05); 
  box-shadow: 
    0 18px 40px rgba(0,0,0,.20),
    0 0 0 1px rgba(255,255,255,.5) inset;
}

.wa-float:active {
  transform: translateY(0) scale(0.98);
}

.wa-text{ 
  font-weight: 800; 
  font-size: 1rem; 
  white-space:nowrap; 
}

@media (max-width: 520px){
  .wa-text{ display:none; }
  .wa-float{ padding: 8px; border-radius: 999px; }
  .wa-pulse { left: 8px; }
}

/* =========================
   Ajustes móvil
========================= */
@media (max-width: 380px){
  .pill{ width:62px; height:76px; }
  .digits{ font-size: 28px; }
  .label{ font-size: 9.5px; }
  
  .menu-flotante { 
    gap: 14px; 
    padding: 8px 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  }
  .menu-flotante a { 
    width: 38px; 
    height: 38px;
    font-size: 0.95rem;
  }
  .nav-bubble {
    width: 42px;
    height: 42px;
  }
  
  .music-pill {
    top: 8px;
    right: 8px;
    padding: 6px 10px;
    font-size: .68rem;
    gap: 6px;
  }
  
  .music-waves .wave {
    width: 5px;
    height: 5px;
  }
}

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

/* Smooth rendering */
.premium-card,
.hero-content,
.pill,
.menu-flotante,
.music-pill,
.wa-float {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translateZ(0);
  backface-visibility: hidden;
}