/* ============================================================
   Invitation — vibra oaxaqueña colorida.
   Solo aplica a la página pública /i/{slug}-{token}.
   ============================================================ */

:root {
  --inv-magenta: #C2185B;
  --inv-rosa:    #EC407A;
  --inv-turq:    #00ACC1;
  --inv-amarillo:#FBC02D;
  --inv-naranja: #F4511E;
  --inv-verde:   #43A047;
  --inv-purpura: #8E24AA;
  --inv-crema:   #FDF6E3;
  --inv-papel:   #FFF9EC;
  --inv-tinta:   #2A1810;
  /* === Capa Oaxaca v2: textiles, talavera, cempasúchil === */
  --inv-cobalto:       #1E40AF;
  --inv-terracota:     #B7410E;
  --inv-jade:          #0F766E;
  --inv-cempasuchil:   #FF6F00;
  --inv-granate:       #9D174D;
  --inv-dorado:        #A16207;
  --inv-rosa-mexicano: #FF1493;
  --inv-tinta-suave:   #3A1F1A;
  --inv-grad-fiesta:   linear-gradient(135deg, #C2185B 0%, #FF6F00 50%, #FBC02D 100%);
  --inv-grad-textil:   linear-gradient(90deg, #1E40AF 0%, #0F766E 50%, #9D174D 100%);
}

.inv-root {
  font-family: 'Cormorant Infant', 'Cormorant Garamond', Georgia, serif;
  color: var(--inv-tinta);
  background: var(--inv-papel);
  scroll-behavior: smooth;
}

.inv-script  { font-family: 'Great Vibes', 'Caveat', cursive; }
.inv-display { font-family: 'Cormorant Garamond', 'Cormorant Infant', Georgia, serif; letter-spacing: 0.01em; }
.inv-body    { font-family: 'Poppins', system-ui, sans-serif; }
.inv-tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ===== Botón flotante de música (play/pause) ===== */
.inv-music-toggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #C2185B 0%, #F4511E 100%);
  color: #FFF1D6;
  border: 2px solid rgba(255, 241, 214, 0.85);
  box-shadow: 0 6px 18px rgba(194, 24, 91, 0.35), 0 2px 4px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .3s ease;
}
.inv-music-toggle:hover { transform: scale(1.06); box-shadow: 0 8px 22px rgba(194, 24, 91, 0.45), 0 3px 6px rgba(0, 0, 0, 0.18); }
.inv-music-toggle:active { transform: scale(0.96); }
.inv-music-toggle:focus-visible { outline: 3px solid #FBC02D; outline-offset: 3px; }
.inv-music-toggle svg { width: 22px; height: 22px; display: none; }
.inv-music-toggle.is-paused .inv-music-icon-play { display: block; margin-left: 2px; }
.inv-music-toggle.is-playing .inv-music-icon-pause { display: block; }
.inv-music-toggle.is-playing { background: linear-gradient(135deg, #00ACC1 0%, #43A047 100%); box-shadow: 0 6px 18px rgba(0, 172, 193, 0.35), 0 2px 4px rgba(0, 0, 0, 0.15); }
.inv-music-toggle.is-playing::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 9999px;
  border: 2px solid rgba(0, 172, 193, 0.5);
  animation: inv-music-pulse 1.6s ease-out infinite;
  pointer-events: none;
}
@keyframes inv-music-pulse {
  0%   { transform: scale(0.85); opacity: 0.85; }
  100% { transform: scale(1.25); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .inv-music-toggle, .inv-music-toggle:hover, .inv-music-toggle:active { transition: none; transform: none; }
  .inv-music-toggle.is-playing::after { animation: none; }
}

/* ===== Sobre fullscreen — apertura en 2 stages ===== */

.inv-envelope-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: radial-gradient(120% 80% at 50% 0%, #FFF1D6 0%, #FFE5EC 45%, #FFD7E0 100%);
  transition: opacity .45s ease;
  overflow: hidden;
}
.inv-envelope-overlay.is-fading {
  opacity: 0;
  pointer-events: none;
}

.inv-envelope-papel-strip {
  position: relative;
  height: 78px;
  flex-shrink: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.inv-envelope-stage {
  flex: 0 1 auto;
  align-self: center;
  position: relative;
  display: block;
  width: min(calc(100vw - 24px), calc((100dvh - 110px) * 5 / 7), 720px);
  aspect-ratio: 5 / 7;
  margin: 8px auto 16px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.inv-envelope-stage:focus-visible {
  outline: 3px solid #C2185B;
  outline-offset: 4px;
  border-radius: 10px;
}

/* Cuerpo del sobre — rectángulo crema fullscreen con texto adentro */
.inv-envelope-body {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background:
    repeating-linear-gradient(45deg, rgba(194,24,91,.025) 0 2px, transparent 2px 5px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.22'/></svg>"),
    linear-gradient(170deg, #FDF6E3 0%, #F8E8C8 100%);
  background-size: auto, 160px 160px, auto;
  box-shadow:
    0 30px 60px -20px rgba(194,24,91,.40),
    0 18px 30px -15px rgba(0,0,0,.25),
    inset 0 0 0 1px rgba(200,136,29,.30);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* 40% del width ≈ 28% del height (sobre 5:7) — alinea con la punta + 80px de aire bajo el sello */
  padding: min(calc(40% + 80px), 400px) 22px 32px;
  text-align: center;
  transform: translateY(0);
  opacity: 1;
  will-change: transform, opacity;
  transition:
    transform .75s cubic-bezier(.6, .04, .98, .335) .52s,
    opacity .75s ease-in .52s;
  z-index: 1;
}
.inv-envelope-body::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 4px;
  border: 1px dashed rgba(200,136,29,.35);
  pointer-events: none;
}

/* Solapa triangular de arriba — punta curva, textura tejido oaxaqueño */
.inv-envelope-flap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 28%;
  max-height: 280px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.10) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.12) 0 2px, transparent 2px 8px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><g fill='rgba(255,255,255,.08)'><circle cx='10' cy='10' r='1.2'/><circle cx='40' cy='25' r='1'/><circle cx='65' cy='12' r='1.3'/><circle cx='20' cy='50' r='1'/><circle cx='55' cy='60' r='1.2'/><circle cx='72' cy='45' r='1'/></g></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='9'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.32'/></svg>"),
    linear-gradient(180deg, #9D174D 0%, #6B0F38 100%);
  background-size: auto, auto, 80px 80px, 160px 160px, auto;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M0,0 L100,0 L100,55 L50,100 L0,55 Z' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M0,0 L100,0 L100,55 L50,100 L0,55 Z' fill='black'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  filter: drop-shadow(0 6px 8px rgba(107,15,56,.35));
  transform: translateY(0);
  opacity: 1;
  will-change: transform, opacity;
  transition:
    transform .65s cubic-bezier(.7, 0, .84, 0),
    opacity .55s ease-in .1s;
  z-index: 2;
}

/* Tipografía y elementos internos del cuerpo */
.inv-envelope-eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #C2185B;
  margin: 0 0 14px;
}
.inv-envelope-name {
  font-family: 'Cormorant Infant', 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(38px, 11vw, 76px);
  line-height: 1;
  color: #2A1810;
  margin: 0 0 18px;
  word-break: break-word;
  max-width: 100%;
}
.inv-envelope-divider {
  color: #C8881D;
  margin: 4px 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.inv-envelope-divider::before,
.inv-envelope-divider::after {
  content: '';
  display: block;
  width: 48px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(200,136,29,.6), transparent);
}
.inv-envelope-cta {
  margin: auto 0 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #C2185B;
}

/* Sello E&G dorado — centrado en la punta del triángulo */
.inv-seal {
  position: absolute;
  top: min(28%, 280px);
  left: 50%;
  z-index: 3;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 1;
  will-change: transform, opacity;
  transition:
    transform .65s cubic-bezier(.7, 0, .84, 0),
    opacity .55s ease-in .1s;
}
.inv-envelope-stage.is-open .inv-seal {
  transform: translate(-50%, -50%) translateY(-360%);
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .inv-seal {
    transition: opacity .2s ease !important;
  }
  .inv-envelope-stage.is-open .inv-seal {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.inv-seal-disc {
  width: 96px; height: 96px; border-radius: 999px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' seed='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23w)'/></svg>"),
    radial-gradient(circle at 30% 25%, #FFF7DD 0%, #F5C45A 55%, #C8881D 100%);
  background-blend-mode: multiply, normal;
  display: grid; place-items: center;
  box-shadow:
    0 8px 16px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -8px 12px rgba(0,0,0,.22),
    inset 0 0 0 2px rgba(200,136,29,.5);
  transform: rotate(-6deg);
}

/* Estados de apertura — 2 stages secuenciales */
.inv-envelope-stage.is-open .inv-envelope-flap {
  transform: translateY(-130%);
  opacity: 0;
}
.inv-envelope-stage.is-open .inv-envelope-body {
  transform: translateY(115%);
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .inv-envelope-flap,
  .inv-envelope-body {
    transition: opacity .2s ease !important;
  }
  .inv-envelope-stage.is-open .inv-envelope-flap,
  .inv-envelope-stage.is-open .inv-envelope-body {
    transform: none;
    opacity: 0;
  }
}

/* ===== Papel picado SVG ===== */

.inv-banderines {
  position: absolute;
  inset: 0 0 auto 0;
  pointer-events: none;
  z-index: 1;
  height: 90px;
  overflow: hidden;
}
.inv-banderines-line {
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  height: 1.5px;
  background-image: linear-gradient(to right, #3A1F1A 50%, transparent 50%);
  background-size: 6px 1.5px;
  background-repeat: repeat-x;
  opacity: 0.55;
}
.inv-banderines-row {
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  padding: 0 8px;
}
.inv-banderin {
  display: block;
  width: clamp(18px, 4.5vw, 38px);
  aspect-ratio: 1 / 1.4;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
  transform-origin: top center;
  animation: inv-sway 4.5s ease-in-out infinite;
  box-shadow: inset 0 -4px 6px rgba(0,0,0,.08);
  flex: 0 0 auto;
}
.inv-banderin:nth-child(2n) { animation-duration: 5.2s; }
.inv-banderin:nth-child(3n) { animation-duration: 6s; }
.inv-banderin:nth-child(4n) { animation-duration: 4.1s; }
@keyframes inv-sway {
  0%,100% { transform: rotate(-3deg); }
  50%     { transform: rotate(3deg); }
}
@media (max-width: 480px) {
  .inv-banderin:nth-child(n+13) { display: none; }
}

/* ===== Reveal on scroll ===== */

.inv-reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.inv-reveal.is-visible { opacity: 1; transform: translateY(0); }
.inv-reveal.delay-1 { transition-delay: .1s; }
.inv-reveal.delay-2 { transition-delay: .2s; }
.inv-reveal.delay-3 { transition-delay: .3s; }
.inv-reveal.delay-4 { transition-delay: .4s; }

/* ===== Cards / sections ===== */

.inv-card {
  background: #FFFDF8;
  border-radius: 24px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 30px 40px -28px rgba(40,10,30,.18),
    0 10px 15px -10px rgba(40,10,30,.10);
  border: 1px solid rgba(194,24,91,.08);
}
.inv-card-warm {
  background: linear-gradient(180deg, #FFF9EC 0%, #FFFDF6 100%);
}

.inv-divider {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  color: var(--inv-magenta);
}
.inv-divider::before, .inv-divider::after {
  content: ''; flex: 0 0 60px; height: 1px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: .5;
}

.inv-section {
  position: relative;
  padding: clamp(48px, 9vw, 96px) 1.25rem;
}
.inv-section-tag {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: .35em; text-transform: uppercase;
  color: var(--inv-magenta);
  padding: 6px 14px; border-radius: 999px;
  background: rgba(194,24,91,.08);
}
.inv-section-tag--jade {
  color: var(--inv-jade);
  background: rgba(15,118,110,.10);
}

/* ===== Buttons ===== */

.inv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px;
  letter-spacing: .04em;
  background: linear-gradient(135deg, #C2185B 0%, #F4511E 100%);
  color: #fff;
  border: none;
  box-shadow: 0 14px 24px -10px rgba(194,24,91,.55), 0 4px 8px -4px rgba(0,0,0,.18);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  cursor: pointer; min-height: 48px;
}
.inv-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 30px -12px rgba(194,24,91,.6); }
.inv-btn:active { transform: translateY(0) scale(.98); }
.inv-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.inv-btn-ghost {
  background: transparent; color: var(--inv-magenta);
  border: 2px solid currentColor; box-shadow: none;
}
.inv-btn-ghost:hover { background: rgba(194,24,91,.08); box-shadow: none; }

.inv-rsvp-pill {
  flex: 1;
  padding: 14px 16px; border-radius: 16px;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px;
  background: #F8EDE3; color: var(--inv-tinta);
  border: 2px solid transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
  cursor: pointer; min-height: 48px;
}
.inv-rsvp-pill:hover { transform: translateY(-1px); }
.inv-rsvp-pill.is-yes  { background: #2E7D32; color: #fff; border-color: #1B5E20; box-shadow: 0 10px 20px -8px rgba(46,125,50,.5); }
.inv-rsvp-pill.is-no   { background: #C62828; color: #fff; border-color: #8E0000; box-shadow: 0 10px 20px -8px rgba(198,40,40,.5); }

/* ===== Gallery ===== */

.inv-gallery {
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
  .inv-gallery { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 14px; }
  .inv-gallery > *:nth-child(5n+1) { grid-row: span 2; }
  .inv-gallery > *:nth-child(5n+4) { grid-row: span 2; }
}
.inv-photo {
  position: relative; overflow: hidden; border-radius: 18px;
  box-shadow: 0 20px 30px -22px rgba(40,10,30,.4);
}
.inv-photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .4s ease;
  display: block;
}
.inv-photo:hover img { transform: scale(1.06); filter: saturate(1.1); }
.inv-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(40,10,30,.4) 100%);
  opacity: 0; transition: opacity .35s ease;
}
.inv-photo:hover::after { opacity: 1; }

/* ===== Color swatches dress code ===== */

.inv-swatch {
  width: 56px; height: 56px; border-radius: 999px;
  border: 4px solid #fff;
  box-shadow: 0 8px 14px -6px rgba(0,0,0,.3), 0 0 0 1px rgba(0,0,0,.05);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.inv-swatch:hover { transform: translateY(-4px) scale(1.08) rotate(-3deg); }
.inv-swatch--lg { width: 72px; height: 72px; border-width: 5px; }
.inv-swatch-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 88px;
}
.inv-swatch-label {
  font-family: 'Poppins', sans-serif;
  font-size: 10px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--inv-jade);
  text-align: center;
  line-height: 1.2;
}

/* ===== Greca decorativa ===== */

.inv-greca {
  height: 14px; width: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14'><path d='M0 7h6V1h6v6h6V1h6v6h6V1h6v6h6V1h6v6h6V1h6v12H0z' fill='%23C2185B' fill-opacity='.18'/></svg>");
  background-repeat: repeat-x; background-size: auto 100%;
}

/* ===== Confetti burst (RSVP success) ===== */

.inv-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.inv-confetti span {
  position: absolute; top: 50%; left: 50%;
  width: 8px; height: 14px; border-radius: 2px;
  opacity: 0;
  animation: inv-confetti-pop .9s ease-out forwards;
}
@keyframes inv-confetti-pop {
  0%   { opacity: 1; transform: translate(-50%,-50%) rotate(0); }
  100% { opacity: 0; transform: translate(var(--tx,0),var(--ty,-200%)) rotate(var(--r,360deg)); }
}

/* ===== Hero con foto de fondo (sutil) ===== */
.inv-hero-photo h1,
.inv-hero-photo p { text-shadow: 0 1px 2px rgba(255,253,248,.6); }
.inv-hero-photo .inv-card { background: rgba(255,255,255,.94); backdrop-filter: blur(6px); }

/* ===== Hero pass card chips ===== */
.inv-pass-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600;
  white-space: nowrap;
}

/* ===== Card hover effects (dress, event, gift, lodging) ===== */
.inv-card-warm {
  position: relative;
  transition: transform .35s cubic-bezier(.2,.8,.2,1),
              box-shadow .35s ease,
              border-color .35s ease;
}
.inv-card-warm::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(194,24,91,.4), rgba(244,81,30,.35), rgba(251,192,45,.4)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s ease;
  pointer-events: none;
}
.inv-card-warm::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%),
                              rgba(255,229,236,.45), transparent 40%);
  opacity: 0; transition: opacity .4s ease;
  pointer-events: none;
}
.inv-card-warm:hover {
  transform: translateY(-6px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 40px 60px -28px rgba(194,24,91,.35),
    0 18px 30px -16px rgba(40,10,30,.18);
}
.inv-card-warm:hover::before { opacity: 1; }
.inv-card-warm:hover::after  { opacity: 1; }

/* ===== Itinerario — efectos ===== */
.inv-timeline { position: relative; }
.inv-timeline-spine {
  position: absolute;
  top: 0; bottom: 0;
  left: 22px;
  width: 2px;
  background: linear-gradient(180deg, #C2185B 0%, #F4511E 50%, #FBC02D 100%);
  opacity: .35;
  transform-origin: top center;
  animation: inv-spine-grow 1.6s ease-out both;
}
@media (min-width: 640px) {
  .inv-timeline-spine { left: 50%; transform: translateX(-50%); }
}
@keyframes inv-spine-grow {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: .35; }
}
@media (min-width: 640px) {
  @keyframes inv-spine-grow {
    from { transform: translateX(-50%) scaleY(0); opacity: 0; }
    to   { transform: translateX(-50%) scaleY(1); opacity: .35; }
  }
}

.inv-timeline-item.inv-reveal { transform: translateY(28px) translateX(-22px); }
.inv-timeline-item.inv-right.inv-reveal { transform: translateY(28px) translateX(22px); }
.inv-timeline-item.inv-reveal.is-visible,
.inv-timeline-item.inv-right.inv-reveal.is-visible {
  transform: translate(0, 0);
}

.inv-timeline-bullet {
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
}
.inv-timeline-bullet::before {
  content: ''; position: absolute; inset: -6px; border-radius: 999px;
  background: radial-gradient(circle, rgba(194,24,91,.35), transparent 70%);
  animation: inv-pulse 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes inv-pulse {
  0%,100% { transform: scale(.85); opacity: .7; }
  50%     { transform: scale(1.25); opacity: 0; }
}
.inv-timeline-item:hover .inv-timeline-bullet {
  transform: scale(1.12) rotate(-4deg);
  box-shadow: 0 18px 30px -10px rgba(194,24,91,.55);
}

/* ===== Divider strips (fotos entre secciones) ===== */

/* ===== Divider strips (fotos entre secciones) ===== */
.inv-divider-strip { height: 380px; }
@media (min-width: 768px)  { .inv-divider-strip { height: 70vh; min-height: 540px; max-height: 760px; } }
@media (min-width: 1280px) { .inv-divider-strip { height: 78vh; min-height: 620px; max-height: 860px; } }

/* ===== Scroll snap horizontal (modo mosaic) ===== */
.inv-scroll-snap { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.inv-scroll-snap::-webkit-scrollbar { height: 6px; }
.inv-scroll-snap::-webkit-scrollbar-thumb { background: rgba(194,24,91,.35); border-radius: 3px; }

/* ===== Gift card (mesa de regalos) ===== */
.inv-gift-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, #FFFDF6 0%, #FFF1D6 100%);
  border: 1px solid rgba(194,24,91,.12);
  box-shadow: 0 14px 24px -18px rgba(40,10,30,.25);
  transition: transform .25s ease, box-shadow .25s ease;
  text-decoration: none; color: inherit;
}
a.inv-gift-card:hover { transform: translateY(-3px); box-shadow: 0 22px 30px -18px rgba(194,24,91,.35); }
.inv-gift-icon {
  flex: 0 0 auto;
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #FFE5EC, #FFF0E0);
  color: #C2185B;
  border: 1px solid rgba(194,24,91,.15);
}

/* ===== Footer notes / disclaimers ===== */
.inv-footer-notes {
  list-style: none; padding: 0; margin: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 11px; line-height: 1.5;
  color: #6B4F46;
}
.inv-footer-notes li {
  position: relative; padding-left: 14px; margin-bottom: 4px;
}
.inv-footer-notes li::before {
  content: '✦';
  position: absolute; left: 0; top: 0;
  color: #C2185B; font-size: 10px;
}
/* Variante dentro de card clara: borde superior y color tinta */
.inv-footer-notes--card { border-top-style: solid; border-top-width: 1px; }

/* ============================================================
   ===== Capa Oaxaca v2 — colorines, textiles y movimiento =====
   ============================================================ */

/* Pétalos de cempasúchil cayendo sobre el hero */
.inv-petals {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}
.inv-petal {
  position: absolute;
  top: -40px;
  width: 18px; height: 18px;
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
  background: radial-gradient(circle at 35% 30%, #FFD180 0%, #FF9800 55%, #BF360C 100%);
  box-shadow: 0 1px 2px rgba(120,40,0,.25), inset 0 -2px 3px rgba(120,40,0,.25);
  opacity: .85;
  will-change: transform, opacity;
  animation: inv-petals-fall var(--dur, 11s) linear var(--delay, 0s) infinite;
}
.inv-petal.is-rosa { background: radial-gradient(circle at 35% 30%, #FFC1E3 0%, #FF1493 55%, #9D174D 100%); }
.inv-petal.is-amarillo { background: radial-gradient(circle at 35% 30%, #FFF59D 0%, #FBC02D 55%, #A16207 100%); }
@keyframes inv-petals-fall {
  0%   { transform: translate3d(0,-10vh,0) rotate(0deg); opacity: 0; }
  10%  { opacity: .9; }
  50%  { transform: translate3d(var(--drift, 30px), 50vh, 0) rotate(180deg); }
  90%  { opacity: .85; }
  100% { transform: translate3d(calc(var(--drift, 30px) * -1), 110vh, 0) rotate(360deg); opacity: 0; }
}

/* Cards flotantes (EventCard, padrinos, gift, lodging) */
.inv-card-float { animation: inv-card-float 6s ease-in-out infinite alternate; }
.inv-card-float:nth-child(2n)   { animation-duration: 7.2s; animation-delay: -1.4s; }
.inv-card-float:nth-child(3n)   { animation-duration: 5.6s; animation-delay: -2.6s; }
.inv-card-float:nth-child(4n+1) { animation-duration: 6.8s; animation-delay: -0.8s; }
@keyframes inv-card-float {
  0%   { transform: translateY(0) rotate(0); }
  100% { transform: translateY(-5px) rotate(.25deg); }
}

/* Swash decorativo animado debajo de los nombres del hero.
   Reemplaza al gradient-text por una decoración separada del fill del texto. */
.inv-name-swash {
  display: block;
  margin: 4px auto 0;
  width: clamp(120px, 38vw, 220px);
  height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' fill='none'><path d='M2 8 Q 30 -2, 60 8 T 120 8 T 180 8 T 238 8' stroke='%23C2185B' stroke-width='1.6' stroke-linecap='round'/><circle cx='60' cy='8' r='1.6' fill='%23FF6F00'/><circle cx='120' cy='8' r='1.6' fill='%23FBC02D'/><circle cx='180' cy='8' r='1.6' fill='%230F766E'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform-origin: center;
  animation: inv-name-swash 5.6s ease-in-out infinite;
}
@keyframes inv-name-swash {
  0%,100% { transform: scaleX(.96); opacity: .85; }
  50%     { transform: scaleX(1.04); opacity: 1; }
}

/* Bullet bloom — anillos rotando colores en el timeline */
.inv-timeline-bullet { background: var(--inv-grad-fiesta) !important; }
.inv-timeline-bullet::after {
  content: ''; position: absolute; inset: -10px; border-radius: 999px;
  border: 2px solid var(--inv-turq);
  opacity: 0;
  animation: inv-bullet-bloom 3.6s ease-out infinite;
  pointer-events: none;
}
.inv-timeline-item:nth-child(2n) .inv-timeline-bullet::after { border-color: var(--inv-amarillo); animation-delay: -1.2s; }
.inv-timeline-item:nth-child(3n) .inv-timeline-bullet::after { border-color: var(--inv-jade); animation-delay: -2.4s; }
.inv-timeline-item:nth-child(4n) .inv-timeline-bullet::after { border-color: var(--inv-cobalto); animation-delay: -1.8s; }
@keyframes inv-bullet-bloom {
  0%   { transform: scale(.6); opacity: .8; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Greca zapoteca animada (banda viva) */
.inv-greca-march {
  height: 18px; width: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 18'><g fill='none' stroke-width='2' stroke-linejoin='miter'><path d='M0 9h6V3h6v6h6V3h6v6h6V3h6v6h6V3h6v6h6V3h6v6h6V3h6v6h6' stroke='%231E40AF'/><path d='M2 14h76' stroke='%230F766E' stroke-width='1.2'/><circle cx='10' cy='14' r='1.2' fill='%23FF6F00' stroke='none'/><circle cx='30' cy='14' r='1.2' fill='%23FF1493' stroke='none'/><circle cx='50' cy='14' r='1.2' fill='%23FBC02D' stroke='none'/><circle cx='70' cy='14' r='1.2' fill='%23B7410E' stroke='none'/></g></svg>");
  background-repeat: repeat-x;
  background-size: auto 100%;
  animation: inv-greca-march 24s linear infinite;
  opacity: .85;
}
@keyframes inv-greca-march {
  from { background-position: 0 0; }
  to   { background-position: 240px 0; }
}

/* Gallery grid — tilt + sombra rotativa de paleta */
.inv-photo-tilt {
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}
.inv-photo-tilt:hover {
  transform: scale(1.04) rotate(-1.2deg);
  box-shadow: 0 24px 40px -18px var(--tilt-shadow, rgba(194,24,91,.55));
}
.inv-photo-tilt:nth-child(6n+1) { --tilt-shadow: rgba(194,24,91,.55); }
.inv-photo-tilt:nth-child(6n+2) { --tilt-shadow: rgba(0,172,193,.55); }
.inv-photo-tilt:nth-child(6n+3) { --tilt-shadow: rgba(255,111,0,.55); }
.inv-photo-tilt:nth-child(6n+4) { --tilt-shadow: rgba(15,118,110,.55); }
.inv-photo-tilt:nth-child(6n+5) { --tilt-shadow: rgba(251,192,45,.55); }
.inv-photo-tilt:nth-child(6n)   { --tilt-shadow: rgba(30,64,175,.55); }
.inv-photo-tilt:nth-child(2n):hover { transform: scale(1.04) rotate(1.2deg); }

/* Glow pulse — sello del sobre + CTA "toca para abrir" */
.inv-glow-pulse {
  animation: inv-glow-pulse 3.2s ease-in-out infinite;
}
@keyframes inv-glow-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(194,24,91,.0), 0 14px 24px -10px rgba(194,24,91,.45); }
  35%     { box-shadow: 0 0 0 12px rgba(255,111,0,.0), 0 14px 24px -10px rgba(255,111,0,.55); }
  70%     { box-shadow: 0 0 0 18px rgba(251,192,45,.0), 0 14px 24px -10px rgba(251,192,45,.55); }
}

/* Confetti — papelitos picados (rectángulos con muesca zigzag) */
.inv-confetti span.is-papel {
  width: 12px; height: 18px; border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% 65%, 80% 100%, 60% 65%, 40% 100%, 20% 65%, 0 100%);
}

/* Stagger cascade — hijos directos en grids con .inv-stagger entran cascadeados */
.inv-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
.inv-stagger.is-visible > *               { opacity: 1; transform: none; }
.inv-stagger.is-visible > *:nth-child(1)  { transition-delay: .05s; }
.inv-stagger.is-visible > *:nth-child(2)  { transition-delay: .13s; }
.inv-stagger.is-visible > *:nth-child(3)  { transition-delay: .21s; }
.inv-stagger.is-visible > *:nth-child(4)  { transition-delay: .29s; }
.inv-stagger.is-visible > *:nth-child(5)  { transition-delay: .37s; }
.inv-stagger.is-visible > *:nth-child(6)  { transition-delay: .45s; }
.inv-stagger.is-visible > *:nth-child(7)  { transition-delay: .53s; }
.inv-stagger.is-visible > *:nth-child(8)  { transition-delay: .61s; }
.inv-stagger.is-visible > *:nth-child(n+9){ transition-delay: .69s; }

/* Acentos color rotativo para gift-icon */
.inv-gift-card:nth-child(6n+1) .inv-gift-icon { background: linear-gradient(135deg,#FFE5EC,#FFD5B0); color: var(--inv-magenta); }
.inv-gift-card:nth-child(6n+2) .inv-gift-icon { background: linear-gradient(135deg,#D1F0F4,#FFF0E0); color: var(--inv-cobalto); }
.inv-gift-card:nth-child(6n+3) .inv-gift-icon { background: linear-gradient(135deg,#FFE6D6,#FFF7E0); color: var(--inv-terracota); }
.inv-gift-card:nth-child(6n+4) .inv-gift-icon { background: linear-gradient(135deg,#D8F3EA,#FFF5E5); color: var(--inv-jade); }
.inv-gift-card:nth-child(6n+5) .inv-gift-icon { background: linear-gradient(135deg,#FFF1B8,#FFE4F0); color: var(--inv-dorado); }
.inv-gift-card:nth-child(6n)   .inv-gift-icon { background: linear-gradient(135deg,#E8DBF5,#FFE5EC); color: var(--inv-purpura); }

/* Tarjeta de hospedaje — flor talavera al inicio del nombre + ícono tel jade */
.inv-lodging-card .inv-display {
  display: flex; align-items: center; gap: 10px;
}
.inv-lodging-card .inv-display::before {
  content: '';
  flex: 0 0 auto;
  width: 14px; height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><g><circle cx='7' cy='7' r='2' fill='%231E40AF'/><circle cx='7' cy='2.5' r='1.7' fill='%23FF6F00'/><circle cx='11.5' cy='7' r='1.7' fill='%23FBC02D'/><circle cx='7' cy='11.5' r='1.7' fill='%230F766E'/><circle cx='2.5' cy='7' r='1.7' fill='%239D174D'/></g></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}
.inv-lodging-card:nth-child(2n) .inv-display::before { transform: rotate(45deg); }
.inv-lodging-tel {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(15,118,110,.10); color: var(--inv-jade) !important;
  font-weight: 600;
}

/* Pass chips — versión Oaxaca */
.inv-pass-chip.is-cobalto  { background: rgba(30,64,175,.10);  color: var(--inv-cobalto)  !important; }
.inv-pass-chip.is-jade     { background: rgba(15,118,110,.12); color: var(--inv-jade)     !important; }
.inv-pass-chip.is-granate  { background: rgba(157,23,77,.10);  color: var(--inv-granate)  !important; }
.inv-pass-chip.is-dorado   { background: rgba(161,98,7,.12);   color: var(--inv-dorado)   !important; }

/* Borde superior gradiente textil para EventCards */
.inv-card-textil-top {
  background: var(--inv-grad-textil) !important;
}

/* Nota del dress code: pergamino enmarcado con esquinas talavera */
.inv-dress-note {
  position: relative;
  padding: 28px 32px;
  background:
    linear-gradient(180deg, rgba(255,253,248,.95), rgba(255,247,228,.95)),
    repeating-linear-gradient(0deg, rgba(157,23,77,.04) 0 1px, transparent 1px 28px);
  border: 1px solid rgba(157,23,77,.18);
  border-radius: 6px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 18px 28px -22px rgba(40,10,30,.25);
}
.inv-dress-note::before {
  content: '';
  position: absolute; inset: 6px;
  border: 1px dashed rgba(30,64,175,.28);
  border-radius: 4px;
  pointer-events: none;
}
.inv-dress-note-corner {
  position: absolute;
  width: 22px; height: 22px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><g><circle cx='11' cy='11' r='2.4' fill='%231E40AF'/><circle cx='11' cy='4.5' r='1.8' fill='%23FF6F00'/><circle cx='17.5' cy='11' r='1.8' fill='%23FBC02D'/><circle cx='11' cy='17.5' r='1.8' fill='%230F766E'/><circle cx='4.5' cy='11' r='1.8' fill='%239D174D'/></g></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}
.inv-dress-note-corner--tl { top: -10px; left: -10px; }
.inv-dress-note-corner--tr { top: -10px; right: -10px; transform: rotate(90deg); }
.inv-dress-note-corner--bl { bottom: -10px; left: -10px; transform: rotate(-90deg); }
.inv-dress-note-corner--br { bottom: -10px; right: -10px; transform: rotate(180deg); }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .inv-reveal { opacity: 1; transform: none; transition: none; }
  .inv-banderin { animation: none; }
  .inv-envelope, .inv-envelope-flap, .inv-seal-disc { transition: none; }
  .inv-envelope-overlay { transition: none; }
  .inv-photo img { transition: none; }
  .inv-confetti span { animation: none; opacity: 0; }
  .inv-petal,
  .inv-card-float,
  .inv-name-swash,
  .inv-timeline-bullet::after,
  .inv-greca-march,
  .inv-glow-pulse { animation: none; }
  .inv-stagger > * { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}