/* Metallic gold overlay — targets solid #D4AF37 usage in inline styles */
      [style*="background:#D4AF37"],
      [style*="background: #D4AF37"],
      [style*="background-color:#D4AF37"],
      [style*="background-color: #D4AF37"],
      .bg-\[\#D4AF37\] {
        background: linear-gradient(135deg, #E5C25D 0%, #FFF6C9 45%, #E5C25D 100%) !important;
        color: #FFFFFF !important;
        text-shadow: 0 1px 0 rgba(80,55,10,0.35);
      }
      /* Dress Code: refined joyful animations */
      @keyframes dcBob {
        0%   { transform: translateY(0) rotate(-0.4deg) scale(1); }
        25%  { transform: translateY(-5px) rotate(0.2deg) scale(1.006); }
        50%  { transform: translateY(-9px) rotate(0.5deg) scale(1.01); }
        75%  { transform: translateY(-5px) rotate(-0.2deg) scale(1.006); }
        100% { transform: translateY(0) rotate(-0.4deg) scale(1); }
      }
      @keyframes dcGlow {
        0%, 100% { opacity: 0.45; transform: scaleX(0.95); }
        50%      { opacity: 0.95; transform: scaleX(1.2); }
      }
      /* Couple entrance: she from the left, he from the right */
      @keyframes dcEnterLeft {
        0%   { transform: translateX(-45%) rotate(-2deg); opacity: 0; filter: blur(4px); }
        60%  { opacity: 1; filter: blur(0); }
        100% { transform: translateX(0) rotate(0);        opacity: 1; filter: blur(0); }
      }
      @keyframes dcEnterRight {
        0%   { transform: translateX(45%) rotate(2deg);  opacity: 0; filter: blur(4px); }
        60%  { opacity: 1; filter: blur(0); }
        100% { transform: translateX(0) rotate(0);       opacity: 1; filter: blur(0); }
      }
      .__dc-half {
        position: absolute;
        inset: 0;
        will-change: transform, opacity;
      }
      .__dc-half img {
        width: 100%;
        height: auto;
        display: block;
      }
      .__dc-half-she {
        clip-path: inset(0 50% 0 0);
        -webkit-clip-path: inset(0 50% 0 0);
        animation: dcEnterLeft 1.4s cubic-bezier(0.22, 1, 0.32, 1) 0.15s both;
      }
      .__dc-half-he {
        clip-path: inset(0 0 0 50%);
        -webkit-clip-path: inset(0 0 0 50%);
        animation: dcEnterRight 1.4s cubic-bezier(0.22, 1, 0.32, 1) 0.55s both;
      }
      /* Ambient bob after entrance */
      @keyframes dcBobLeft {
        0%, 100% { transform: translateY(0) rotate(-0.35deg); }
        50%      { transform: translateY(-6px) rotate(0.3deg); }
      }
      @keyframes dcBobRight {
        0%, 100% { transform: translateY(0) rotate(0.35deg); }
        50%      { transform: translateY(-6px) rotate(-0.3deg); }
      }
      .__dc-half-she { animation: dcEnterLeft 1.4s cubic-bezier(0.22,1,0.32,1) 0.15s both, dcBobLeft 5.4s ease-in-out 1.7s infinite; }
      .__dc-half-he  { animation: dcEnterRight 1.4s cubic-bezier(0.22,1,0.32,1) 0.55s both, dcBobRight 5.6s ease-in-out 2.1s infinite; }
      @media (prefers-reduced-motion: reduce) {
        .__dc-half-she, .__dc-half-he { animation: none !important; }
      }
      /* V3 outfit float — soft rise/fall for each garment */
      @keyframes dcFloat {
        0%, 100% { transform: translateY(0) rotate(-0.6deg); }
        50%      { transform: translateY(-6px) rotate(0.6deg); }
      }
      @keyframes dcFloat2 {
        0%, 100% { transform: translateY(0) rotate(0.6deg); }
        50%      { transform: translateY(-8px) rotate(-0.6deg); }
      }
      /* V3 wardrobe rack — gentle sway from the ground pivot */
      @keyframes dcRackSway {
        0%, 100% { transform: translateY(0) rotate(-0.35deg) scale(1); }
        25%      { transform: translateY(-3px) rotate(0.15deg) scale(1.004); }
        50%      { transform: translateY(-6px) rotate(0.4deg) scale(1.008); }
        75%      { transform: translateY(-3px) rotate(-0.15deg) scale(1.004); }
      }
      /* V4 boutique display — soft zoom breath, more magazine cover */
      @keyframes dcBoutiqueZoom {
        0%, 100% { transform: scale(1); }
        50%      { transform: scale(1.015); }
      }
      /* V5 minimalist icon bob — subtle sway for each garment icon */
      @keyframes dcIconBob {
        0%, 100% { transform: translateY(0) rotate(-1deg); }
        50%      { transform: translateY(-6px) rotate(1deg); }
      }
      @keyframes dcIconBob2 {
        0%, 100% { transform: translateY(0) rotate(1deg); }
        50%      { transform: translateY(-8px) rotate(-1deg); }
      }
      /* V5 hairline ornament — traveling gold shimmer on the divider */
      @keyframes dcV5Line {
        0%   { background-position: -200% 0; }
        100% { background-position: 200% 0; }
      }
      .__dc-v5-tag {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 6px 14px;
        border-radius: 999px;
        background: rgba(255,255,255,0.7);
        box-shadow: 0 4px 14px -6px rgba(92,42,138,0.28), inset 0 0 0 1px rgba(184,146,214,0.55);
        font-family: 'Bodoni Moda', serif;
        font-style: italic;
        font-size: 12px;
        letter-spacing: 0.32em;
        text-transform: uppercase;
        color: #7A2C48;
      }
      .__dc-v5-icons {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        gap: clamp(24px, 6vw, 60px);
        max-width: 640px;
        margin: 30px auto 0;
        padding: 0 8px;
      }
      .__dc-v5-half {
        position: relative;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: flex-end;
      }
      .__dc-v5-half img {
        width: auto;
        height: clamp(180px, 40vw, 260px);
        display: block;
        filter: drop-shadow(0 12px 22px rgba(92,42,138,0.15));
        will-change: transform;
      }
      .__dc-v5-half-l img { animation: dcIconBob 5.4s ease-in-out infinite; transform-origin: 50% 100%; }
      .__dc-v5-half-r img { animation: dcIconBob2 5.8s ease-in-out infinite; transform-origin: 50% 100%; }
      .__dc-v5-label {
        font-family: 'Bodoni Moda', serif;
        font-style: italic;
        font-weight: 800;
        font-size: clamp(20px, 4.6vw, 26px);
        letter-spacing: 0.01em;
        color: #5C2A8A;
        text-align: center;
        margin-top: 8px;
      }
      .__dc-v5-desc {
        font-family: 'Bodoni Moda', serif;
        font-style: italic;
        font-weight: 500;
        font-size: clamp(14px, 3.2vw, 17px);
        color: #9A7BC2;
        text-align: center;
        line-height: 1.5;
        max-width: 220px;
        margin: 6px auto 0;
      }
      .__dc-v5-divider {
        height: 3px;
        margin: 26px auto 0;
        width: min(220px, 70%);
        background: radial-gradient(circle, #B892D6 1.5px, transparent 2px);
        background-size: 10px 3px;
      }
      @media (prefers-reduced-motion: reduce) {
        .__dc-v5-half-l img, .__dc-v5-half-r img { animation: none !important; }
      }
      /* Gift Option A — venue-style pink card with bulbs */
      @keyframes giftImgSway {
        0%, 100% { transform: rotate(-1.5deg) translateY(0); }
        50%      { transform: rotate(1.5deg)  translateY(-4px); }
      }
      @keyframes giftBulbBlink {
        0%, 100% { opacity: 0.5; transform: scale(0.85); }
        50%      { opacity: 1;   transform: scale(1.1); }
      }
      .__gift-card {
        position: relative;
        max-width: 560px;
        margin: 24px auto 0;
        padding: 40px 28px 32px 28px;
        border-radius: 8px;
        background: linear-gradient(180deg, #F8DAE6 0%, #FBEBF0 50%, #F8DAE6 100%);
        box-shadow:
          0 0 0 4px #D8BF6B,
          0 0 0 6px #D6709C,
          0 0 0 10px #D8BF6B,
          0 0 0 12px #D8BF6B,
          0 28px 80px rgba(214,112,156,0.35);
      }
      .__gift-bulb {
        position: absolute;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        pointer-events: none;
        background: radial-gradient(circle at 30% 30%, #FFFFFF, #FBFAF7 50%, #D8BF6B 100%);
        box-shadow: 0 0 8px #FBFAF7, 0 0 14px #FFD980;
        z-index: 3;
        animation: giftBulbBlink 1.4s ease-in-out infinite;
      }
      /* Gift Option B — vertical pink event ticket with pinked edges + notches */
      @keyframes giftTicketFloat {
        0%, 100% { transform: translateY(0) rotate(-0.3deg); }
        50%      { transform: translateY(-4px) rotate(0.3deg); }
      }
      @keyframes giftTicketSheen {
        0%   { transform: translateX(-160%); }
        55%  { transform: translateX(160%); }
        100% { transform: translateX(160%); }
      }
      .__gift-sparkle {
        position: absolute;
        pointer-events: none;
        font-size: 12px;
        color: #FFE28A;
        text-shadow: 0 0 6px rgba(255,226,138,0.7);
        animation: dcSparkle 3.6s ease-in-out infinite;
      }
      .__gift-ticket-v {
        position: relative;
        display: block;
        box-sizing: border-box;
        width: min(360px, 86vw);
        aspect-ratio: 320 / 660;
        margin: 26px auto 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        animation: giftTicketFloat 5.6s ease-in-out infinite;
        transform-origin: 50% 50%;
        filter: drop-shadow(0 22px 34px rgba(214,112,156,0.35)) drop-shadow(0 6px 12px rgba(214,112,156,0.2));
      }
      .__gift-ticket-svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: visible;
      }
      .__gift-ticket-content {
        position: absolute;
        inset: 5% 8%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        color: #FFFFFF;
        text-align: center;
        z-index: 3;
      }
      .__gift-ticket-sheen {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.25) 48%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0.25) 52%, transparent 70%);
        transform: translateX(-160%);
        animation: giftTicketSheen 6s ease-in-out infinite;
        z-index: 2;
        mix-blend-mode: overlay;
        opacity: 0.9;
      }
      @media (prefers-reduced-motion: reduce) {
        .__gift-ticket-v, .__gift-sparkle, .__gift-ticket-sheen, .__gift-bulb, .__gift-img { animation: none !important; }
      }
      /* Center both gift tickets bulletproof + mobile aspect + content padding */
      .__gift-ticket-v, .__gift-ticket-h {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
      }
      @media (max-width: 640px) {
        .__gift-ticket-h {
          aspect-ratio: 5 / 4 !important;
          min-height: 300px !important;
        }
      }
      /* RSVP Option 1: two ticket halves that start attached, then scissors
         cuts + they physically separate (one-shot animation) */
      .__rsvp-stack {
        position: relative;
        max-width: 520px;
        margin: 0 auto;
      }
      .__rsvp-card-top, .__rsvp-card-bottom {
        position: relative;
        background: linear-gradient(180deg, #F8DAE6 0%, #FBEBF0 50%, #F8DAE6 100%);
        border: 1px solid rgba(178,154,85,0.55);
        box-shadow:
          inset 0 0 0 3px rgba(255,255,255,0.6),
          inset 0 0 0 4px rgba(178,154,85,0.5),
          inset 0 0 0 8px rgba(178,154,85,0.15),
          0 20px 48px rgba(214,112,156,0.28);
        overflow: hidden;
      }
      .__rsvp-card-top {
        border-radius: 12px 12px 0 0;
        border-bottom: none;
        margin-bottom: 0;
        transform: translateY(0);
        transform-origin: 50% 100%;
      }
      .__rsvp-card-bottom {
        border-radius: 0 0 12px 12px;
        border-top: none;
        transform: translateY(0);
      }
      /* Zigzag torn edges only appear AFTER the tear animation runs */
      .__rsvp-card-top.__rsvp-torn {
        clip-path: polygon(
          0% 0%, 100% 0%,
          100% 97%,
          95% 100%, 90% 97%, 85% 100%, 80% 97%, 75% 100%, 70% 97%, 65% 100%, 60% 97%, 55% 100%, 50% 97%,
          45% 100%, 40% 97%, 35% 100%, 30% 97%, 25% 100%, 20% 97%, 15% 100%, 10% 97%, 5% 100%, 0% 97%
        );
      }
      .__rsvp-card-bottom.__rsvp-torn {
        clip-path: polygon(
          0% 3%, 5% 0%, 10% 3%, 15% 0%, 20% 3%, 25% 0%, 30% 3%, 35% 0%, 40% 3%, 45% 0%, 50% 3%,
          55% 0%, 60% 3%, 65% 0%, 70% 3%, 75% 0%, 80% 3%, 85% 0%, 90% 3%, 95% 0%, 100% 3%,
          100% 100%, 0% 100%
        );
      }
      /* Single infinite cycle — starts paused, plays when opt1 enters viewport */
      @keyframes rsvpTopCycle {
        0%, 15%   { transform: translateY(0); }
        25%       { transform: translateY(-2px); }
        40%, 90%  { transform: translateY(-28px); }
        100%      { transform: translateY(0); }
      }
      @keyframes rsvpBottomCycle {
        0%, 15%   { transform: translateY(0); }
        40%, 90%  { transform: translateY(6px); }
        100%      { transform: translateY(0); }
      }
      @keyframes rsvpScissorsCycle {
        0%, 15%   { left: 3%;  opacity: 0; }
        18%       { left: 3%;  opacity: 1; }
        35%       { left: 97%; opacity: 1; }
        42%       { left: 97%; opacity: 0; }
        50%, 100% { left: 3%;  opacity: 0; }
      }
      @keyframes rsvpDashesCycle {
        0%, 15%   { opacity: 0; }
        20%, 92%  { opacity: 0.9; }
        100%      { opacity: 0; }
      }
      @keyframes rsvpNotchCycle {
        0%, 34%   { opacity: 0; }
        44%, 90%  { opacity: 1; }
        100%      { opacity: 0; }
      }
      /* Animations driven by JS style changes (see injectRsvpOptions) */
      /* ============ 3D Merry-Go-Round Carousel ============ */
      .mgr-3d {
        --mgr-size: 200px;
        --mgr-radius: 68px;
        --mgr-duration: 18s;
        --mgr-count: 6;
        --mgr-gold: #D8BF6B;
        --mgr-gold-hi: #FFE28A;
        --mgr-gold-lo: #B8892A;
        --mgr-ivory: #FFF6EA;
        --mgr-rose: #F5B5CD;
        --mgr-rose-deep: #D6709C;
        width: var(--mgr-size);
        height: var(--mgr-size);
        margin: 32px auto 12px;
        -webkit-perspective: 520px;
        perspective: 520px;
        -webkit-perspective-origin: 50% 32%;
        perspective-origin: 50% 32%;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
      }
      @media (max-width: 540px) {
        .mgr-3d {
          --mgr-size: 170px;
          --mgr-radius: 58px;
          perspective: 480px;
        }
      }
      .mgr-3d__scene {
        position: relative;
        width: 100%;
        height: 100%;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-animation: mgr-spin var(--mgr-duration) linear infinite;
        animation: mgr-spin var(--mgr-duration) linear infinite;
        will-change: transform;
      }
      @-webkit-keyframes mgr-spin {
        0%   { -webkit-transform: rotateX(14deg) rotateY(0deg); transform: rotateX(14deg) rotateY(0deg); }
        100% { -webkit-transform: rotateX(14deg) rotateY(360deg); transform: rotateX(14deg) rotateY(360deg); }
      }
      @keyframes mgr-spin {
        0%   { -webkit-transform: rotateX(14deg) rotateY(0deg); transform: rotateX(14deg) rotateY(0deg); }
        100% { -webkit-transform: rotateX(14deg) rotateY(360deg); transform: rotateX(14deg) rotateY(360deg); }
      }
      .mgr-3d__horse {
        position: absolute;
        top: 50%; left: 50%;
        width: 46px; height: 68px;
        margin: -34px 0 0 -23px;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        /* Face TANGENT to the ring (side profile visible), not radial */
        -webkit-transform:
          rotateY(calc(var(--i) * (360deg / var(--mgr-count))))
          translateZ(var(--mgr-radius))
          rotateY(90deg);
        transform:
          rotateY(calc(var(--i) * (360deg / var(--mgr-count))))
          translateZ(var(--mgr-radius))
          rotateY(90deg);
      }
      .mgr-3d__bob {
        width: 100%;
        height: 100%;
        -webkit-animation: mgr-bob 2.6s ease-in-out infinite;
        animation: mgr-bob 2.6s ease-in-out infinite;
        -webkit-animation-delay: calc(var(--i) * -0.43s);
        animation-delay: calc(var(--i) * -0.43s);
        will-change: transform;
      }
      @-webkit-keyframes mgr-bob {
        0%, 100% { -webkit-transform: translateY(3px); transform: translateY(3px); }
        50%      { -webkit-transform: translateY(-7px); transform: translateY(-7px); }
      }
      @keyframes mgr-bob {
        0%, 100% { -webkit-transform: translateY(3px); transform: translateY(3px); }
        50%      { -webkit-transform: translateY(-7px); transform: translateY(-7px); }
      }
      .mgr-3d__horse svg {
        display: block;
        width: 100%;
        height: 100%;
        filter:
          drop-shadow(0 4px 5px rgba(184,137,42,0.4))
          drop-shadow(0 0 6px rgba(255,226,138,0.25));
        backface-visibility: hidden;
      }
      /* Canopy — floats above the ring, doesn't spin (billboards toward camera) */
      .mgr-3d__canopy {
        position: absolute;
        top: -8px; left: 50%;
        width: calc(var(--mgr-size) - 10px);
        height: 76px;
        margin-left: calc((var(--mgr-size) - 10px) / -2);
        pointer-events: none;
        z-index: 3;
        transform-style: preserve-3d;
      }
      .mgr-3d__canopy svg { display: block; width: 100%; height: 100%; }
      /* Base ring — sits at bottom, part of the 3D scene */
      .mgr-3d__base {
        position: absolute;
        bottom: 6px; left: 50%;
        width: calc(var(--mgr-radius) * 2 + 40px);
        height: 26px;
        margin-left: calc((var(--mgr-radius) * 2 + 40px) / -2);
        transform: rotateX(78deg);
        transform-style: preserve-3d;
        background: radial-gradient(ellipse at center, rgba(216,191,107,0.55), rgba(216,191,107,0.15) 60%, transparent 80%);
        border-radius: 50%;
        z-index: 1;
      }
      /* Warm gold glow underneath */
      .mgr-3d__glow {
        position: absolute;
        bottom: -6px; left: 50%;
        width: 140px;
        height: 24px;
        margin-left: -70px;
        background: radial-gradient(ellipse at center, rgba(255,226,138,0.65), transparent 70%);
        filter: blur(6px);
        z-index: 0;
        pointer-events: none;
      }
      /* Reduce Motion → composed signature pose (not just "paused") */
      @media (prefers-reduced-motion: reduce) {
        .mgr-3d__scene {
          -webkit-animation: none !important;
          animation: none !important;
          /* 28° yaw shows 3 caballos delanteros + profundidad ring;
             14° tilt matches normal animation base tilt */
          -webkit-transform: rotateX(14deg) rotateY(28deg) !important;
          transform: rotateX(14deg) rotateY(28deg) !important;
        }
        /* Keep staggered bob delays but freeze — each horse settles at its
           own point in the bob cycle → natural "poised" heights, not uniform */
        .mgr-3d__bob {
          -webkit-animation-play-state: paused !important;
          animation-play-state: paused !important;
        }
      }

      /* ============ 3D Premium Gift Box — luxury XV invitation ============ */
      .gift-3d {
        --gb-w: 220px;
        --gb-h: 260px;
        --gb-body-h: 148px;
        --gb-lid-h: 50px;
        --gb-open-angle: -112deg;
        --gb-duration: 11s;
        width: var(--gb-w);
        height: var(--gb-h);
        margin: 6px auto 26px;
        -webkit-perspective: 1000px;
        perspective: 1000px;
        -webkit-perspective-origin: 50% 30%;
        perspective-origin: 50% 30%;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        filter: drop-shadow(0 18px 24px rgba(122,14,79,0.16))
                drop-shadow(0 4px 8px rgba(184,137,42,0.12));
      }
      @media (max-width: 540px) {
        .gift-3d { --gb-w: 186px; --gb-h: 226px; --gb-body-h: 130px; --gb-lid-h: 44px; }
      }
      .gift-3d__scene {
        position: relative;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        animation: giftIdle 5.6s ease-in-out infinite;
      }
      @keyframes giftIdle {
        0%, 100% { transform: translateY(0) rotateX(-4deg) rotateY(-1.5deg); }
        50%      { transform: translateY(-3px) rotateX(-3deg) rotateY(1.5deg); }
      }
      /* Interior — sits inside the box, revealed when the lid opens */
      .gift-3d__interior {
        position: absolute;
        left: 7%; right: 7%;
        top: calc(var(--gb-lid-h) + 4px);
        height: calc(var(--gb-body-h) - 16px);
        transform: translateZ(-18px);
        border-radius: 3px;
        overflow: hidden;
        background:
          linear-gradient(180deg, #FFF6EA 0%, #F0E4C8 100%);
        box-shadow:
          inset 0 14px 22px rgba(184,137,42,0.30),
          inset 0 -6px 10px rgba(122,14,79,0.06);
        opacity: 0;
        animation: giftInteriorReveal var(--gb-duration) ease-in-out infinite;
      }
      @keyframes giftInteriorReveal {
        0%, 14%   { opacity: 0; }
        26%, 74%  { opacity: 1; }
        86%, 100% { opacity: 0; }
      }
      .gift-3d__interior svg { position: absolute; inset: 0; width: 100%; height: 100%; }
      /* Warm champagne glow radiating from inside when open */
      .gift-3d__glow {
        position: absolute;
        left: 50%; top: calc(var(--gb-lid-h) + 12px);
        width: 130%; height: 70%;
        margin-left: -65%;
        pointer-events: none;
        background: radial-gradient(ellipse at 50% 24%,
          rgba(255,246,206,0.62) 0%,
          rgba(255,226,138,0.36) 24%,
          rgba(216,191,107,0.16) 50%,
          transparent 74%);
        filter: blur(5px);
        opacity: 0;
        transform: translateZ(2px);
        animation: giftGlowPulse var(--gb-duration) ease-in-out infinite;
      }
      @keyframes giftGlowPulse {
        0%, 16%   { opacity: 0; }
        30%, 70%  { opacity: 1; }
        86%, 100% { opacity: 0; }
      }
      /* Sparkles rising from the open box */
      .gift-3d__sparkle {
        position: absolute;
        pointer-events: none;
        left: 50%; top: calc(var(--gb-lid-h) + 30px);
        width: 3px; height: 3px;
        margin: 0 0 0 -1.5px;
        opacity: 0;
        border-radius: 50%;
        background: radial-gradient(circle, #FFF6CE 0%, #FFE28A 50%, transparent 100%);
        box-shadow: 0 0 4px rgba(255,226,138,0.9), 0 0 10px rgba(216,191,107,0.5);
        animation: giftSparkleRise var(--gb-duration) ease-in-out infinite;
        animation-delay: calc(var(--i) * 0.22s);
        transform: translate3d(var(--x, 0), 0, 24px);
        will-change: transform, opacity;
      }
      @keyframes giftSparkleRise {
        0%, 24%   { opacity: 0; transform: translate3d(var(--x, 0), 8px, 24px) scale(0.3); }
        36%       { opacity: 1; transform: translate3d(var(--x, 0), -16px, 24px) scale(0.9); }
        62%       { opacity: 0.85; transform: translate3d(var(--x, 0), -46px, 24px) scale(1); }
        78%       { opacity: 0; transform: translate3d(var(--x, 0), -76px, 24px) scale(1.1); }
        100%      { opacity: 0; }
      }
      /* Body of the box */
      .gift-3d__body {
        position: absolute;
        left: 0; right: 0;
        top: var(--gb-lid-h);
        height: var(--gb-body-h);
        transform: translateZ(0);
      }
      .gift-3d__body svg { display: block; width: 100%; height: 100%; overflow: visible; }
      /* Lid — hinges from its back-bottom edge (the top of the box) */
      .gift-3d__lid-wrap {
        position: absolute;
        left: -3%; right: -3%;
        top: 0;
        height: var(--gb-lid-h);
        transform-style: preserve-3d;
        transform-origin: 50% 100%;
        animation: giftLidOpen var(--gb-duration) cubic-bezier(0.34, 1.15, 0.64, 1) infinite;
      }
      @keyframes giftLidOpen {
        0%, 12%   { transform: rotateX(0deg); }
        22%       { transform: rotateX(calc(var(--gb-open-angle) * 0.55)); }
        30%, 72%  { transform: rotateX(var(--gb-open-angle)); }
        86%, 100% { transform: rotateX(0deg); }
      }
      .gift-3d__lid { position: relative; width: 100%; height: 100%; }
      .gift-3d__lid svg { display: block; width: 100%; height: 100%; overflow: visible; }
      /* Bow rides on the lid */
      .gift-3d__bow {
        position: absolute;
        left: 50%;
        top: -34px;
        width: 96px;
        height: 68px;
        margin-left: -48px;
        transform: translateZ(3px);
      }
      .gift-3d__bow svg { display: block; width: 100%; height: 100%; overflow: visible; }
      /* Reduce Motion → composed signature pose: gift box abierto elegante */
      @media (prefers-reduced-motion: reduce) {
        .gift-3d__scene {
          -webkit-animation: none !important;
          animation: none !important;
          /* Ligera inclinación 3/4 view para lucir tapa + interior + costados */
          -webkit-transform: translateY(-2px) rotateX(-4deg) rotateY(3deg) !important;
          transform: translateY(-2px) rotateX(-4deg) rotateY(3deg) !important;
        }
        .gift-3d__lid-wrap {
          -webkit-animation: none !important;
          animation: none !important;
          /* -78° (no -90°): la tapa se ve inclinada hacia atrás sin quedar plana */
          -webkit-transform: rotateX(-78deg) !important;
          transform: rotateX(-78deg) !important;
        }
        .gift-3d__interior {
          -webkit-animation: none !important;
          animation: none !important;
          opacity: 1 !important;
        }
        .gift-3d__glow {
          -webkit-animation: none !important;
          animation: none !important;
          opacity: 0.9 !important;
        }
        /* Sparkles: ocultos en estado estático (evita puntos flotando raros
           sin trayectoria). El glow + interior + sobres ya dan la magia. */
        .gift-3d__sparkle {
          -webkit-animation: none !important;
          animation: none !important;
          display: none !important;
        }
      }
      /* Kill Chrome/Safari yellow autofill background inside RSVP inputs */
      .__rsvp-opt1 input:-webkit-autofill,
      .__rsvp-opt1 input:-webkit-autofill:hover,
      .__rsvp-opt1 input:-webkit-autofill:focus,
      .__rsvp-opt1 input:-webkit-autofill:active,
      .__rsvp-opt1 select:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 1000px #FBEBF0 inset !important;
        box-shadow: 0 0 0 1000px #FBEBF0 inset !important;
        -webkit-text-fill-color: #7A2C48 !important;
        caret-color: #7A2C48;
        transition: background-color 5000s ease-in-out 0s;
      }
      /* ============ Unified Maps Button System (Google · Maps · Waze) ============ */
      /* 4-column grid: top row [Google][Maps], bottom row [Waze centered]
         — spans give all 3 buttons identical effective width */
      .__maps-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        column-gap: 8px !important;
        row-gap: 14px !important;
        max-width: 340px !important;
        margin: 18px auto 10px !important;
        padding: 0 6px !important;
        align-items: stretch !important;
        justify-items: stretch !important;
      }
      .__maps-grid > .__maps-btn:nth-child(1) { grid-column: 1 / span 2 !important; grid-row: 1 !important; }
      .__maps-grid > .__maps-btn:nth-child(2) { grid-column: 3 / span 2 !important; grid-row: 1 !important; }
      .__maps-grid > .__maps-btn:nth-child(3) { grid-column: 2 / span 2 !important; grid-row: 2 !important; }
      @media (max-width: 380px) {
        .__maps-grid { column-gap: 6px !important; row-gap: 12px !important; max-width: 320px !important; }
      }
      .__maps-btn {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        box-sizing: border-box !important;
        height: 44px !important;
        width: 100% !important;
        padding: 0 10px !important;
        background: linear-gradient(180deg, #FFF6EA 0%, #F5E1D8 100%) !important;
        border: 1px solid #D8BF6B !important;
        border-radius: 999px !important;
        box-shadow: 0 2px 8px rgba(184,137,42,0.18), inset 0 1px 0 rgba(255,255,255,0.65) !important;
        font-family: 'Bodoni Moda', serif !important;
        font-style: italic !important;
        font-weight: 700 !important;
        font-size: 12px !important;
        letter-spacing: 0.04em !important;
        color: #7A0E4F !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        line-height: 1 !important;
        transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 200ms cubic-bezier(0.23, 1, 0.32, 1) !important;
        cursor: pointer !important;
      }
      @media (max-width: 380px) {
        .__maps-btn { height: 42px !important; font-size: 11px !important; padding: 0 8px !important; gap: 5px !important; }
      }
      .__maps-btn:hover {
        box-shadow: 0 4px 12px rgba(184,137,42,0.26), inset 0 1px 0 rgba(255,255,255,0.75) !important;
      }
      .__maps-btn:active {
        transform: scale(0.97) !important;
        box-shadow: 0 1px 4px rgba(184,137,42,0.18), inset 0 1px 0 rgba(255,255,255,0.55) !important;
      }
      .__maps-btn__icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 16px !important;
        height: 16px !important;
        flex-shrink: 0 !important;
      }
      .__maps-btn__icon svg { display: block; width: 100%; height: 100%; }
      .__maps-btn__label {
        display: inline-block !important;
        font-family: inherit !important;
        font-style: inherit !important;
        font-weight: inherit !important;
        font-size: inherit !important;
        color: inherit !important;
        letter-spacing: inherit !important;
        line-height: 1 !important;
      }
      /* ============ RESERVAR button — premium glow pulse ============ */
      @keyframes reservarPulse {
        0%, 100% {
          box-shadow:
            0 6px 14px rgba(214,112,156,0.35),
            0 0 0 0 rgba(214,112,156,0.42),
            inset 0 1px 0 rgba(255,255,255,0.25);
        }
        50% {
          box-shadow:
            0 10px 22px rgba(214,112,156,0.48),
            0 0 0 12px rgba(214,112,156,0),
            inset 0 1px 0 rgba(255,255,255,0.30);
        }
      }
      .__reservar-btn {
        animation: reservarPulse 2.6s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
        transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), filter 200ms ease-out !important;
      }
      .__reservar-btn:hover {
        animation-play-state: paused !important;
        transform: translateY(-1px) !important;
        filter: brightness(1.05) !important;
      }
      .__reservar-btn:active {
        transform: scale(0.97) !important;
        animation-play-state: paused !important;
      }
      /* HARD HIDE — React RSVP section (form + gate + Confirmar button).
         Our custom flow lives in .__rsvp-opt1 injected BEFORE #rsvp-section.
         !important beats React inline styles unless React also uses !important. */
      #rsvp-section {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        max-height: 0 !important;
        overflow: hidden !important;
      }
      /* Loading spinner for state machine bootstrap */
      @keyframes __zoeSpin { to { transform: rotate(360deg); } }
      /* ============ Deadline banner — placed above the countdown ============ */
      .__deadline-wrap {
        display: flex;
        justify-content: center;
        padding: 8px 20px 12px;
      }
      /* Spanish gets a bit more breathing room above the banner */
      .__deadline-wrap.__lang-es {
        padding-top: 44px;
      }
      .__deadline-banner {
        position: relative;
        width: 100%;
        max-width: 380px;
        padding: 26px 26px 22px;
        background: linear-gradient(180deg, #F8DAE6 0%, #FBEBF0 50%, #F8DAE6 100%);
        border: 1px solid rgba(216,191,107,0.55);
        border-radius: 14px;
        box-shadow:
          0 10px 28px rgba(214,112,156,0.18),
          0 0 0 4px rgba(255,255,255,0.5),
          inset 0 1px 0 rgba(255,255,255,0.7);
        text-align: center;
        animation: deadlineGlow 3.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      }
      @keyframes deadlineGlow {
        0%, 100% { box-shadow: 0 10px 28px rgba(214,112,156,0.18), 0 0 0 4px rgba(255,255,255,0.5), inset 0 1px 0 rgba(255,255,255,0.7); }
        50%      { box-shadow: 0 14px 36px rgba(214,112,156,0.28), 0 0 0 6px rgba(214,112,156,0.05), inset 0 1px 0 rgba(255,255,255,0.85); }
      }
      /* Ornamental gold rules — top + bottom */
      .__deadline-banner::before,
      .__deadline-banner::after {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 70px;
        height: 1px;
        background: linear-gradient(90deg, transparent, #D8BF6B, transparent);
      }
      .__deadline-banner::before { top: 12px; }
      .__deadline-banner::after  { bottom: 12px; }
      /* Corner ornaments (rose asterisks) */
      .__deadline-banner__corner {
        position: absolute;
        color: #D6709C;
        font-size: 11px;
        opacity: 0.85;
        pointer-events: none;
      }
      .__deadline-banner__corner.tl { top: 8px;  left: 12px; }
      .__deadline-banner__corner.tr { top: 8px;  right: 12px; }
      .__deadline-banner__corner.bl { bottom: 8px; left: 12px; }
      .__deadline-banner__corner.br { bottom: 8px; right: 12px; }
      .__deadline-banner__label {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-family: 'Bodoni Moda', serif;
        font-size: 11px;
        letter-spacing: 0.32em;
        text-transform: uppercase;
        font-weight: 700;
        color: #B29A55;
        margin-bottom: 14px;
      }
      .__deadline-banner__label .__star {
        color: #D8BF6B;
        font-size: 12px;
        text-shadow: 0 0 6px rgba(255,226,138,0.6);
      }
      .__deadline-banner__date {
        font-family: 'Bodoni Moda', serif;
        font-style: italic;
        font-weight: 800;
        font-size: clamp(24px, 6.4vw, 32px);
        color: #7A0E4F;
        letter-spacing: 0.02em;
        line-height: 1.05;
        margin: 4px 0 6px;
      }
      .__deadline-banner__date .__dot {
        color: #D8BF6B;
        font-weight: 400;
        margin: 0 8px;
        font-style: normal;
      }
      .__deadline-banner__sub {
        font-family: 'Bodoni Moda', serif;
        font-style: italic;
        font-weight: 500;
        font-size: 13px;
        color: #B29A55;
        margin-top: 10px;
        letter-spacing: 0.02em;
      }
      /* Loading spinner for state machine bootstrap (dup safe) */
      /* Override "★ Confirmar ★" gate button text via CSS pseudo-element.
         React cannot modify pseudo-element content, so this survives re-renders. */
      /* Hide the "★ Confirmar ★" gate button by its unique inline style
         (rose→purple gradient) + hide its containing form via :has() */
      button[style*="#D6709C"][style*="#9A7BC2"],
      button[style*="D6709C"][style*="9A7BC2"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
      }
      form:has(button[style*="#D6709C"][style*="#9A7BC2"]),
      form:has(button[style*="D6709C"][style*="9A7BC2"]) {
        display: none !important;
        visibility: hidden !important;
      }
      /* JS fallback classes (older browsers without :has support) */
      .__zoe-cta-renamed,
      .__zoe-cta-hidden-wrap {
        display: none !important;
        visibility: hidden !important;
      }
      /* ============ Music toggle pill (replaces WhatsApp FAB) ============ */
      /* Redesigns the tiny 🎵 emoji button into a wider, obviously-a-control
         pill: speaker icon + "MUSIC ON/OFF" label. 56px height for touch
         (WCAG 2.5.5), 999px radius, gradient rose+gold matches page palette. */
      .__zoe-music-pill {
        position: fixed !important;
        bottom: 18px !important;
        right: 18px !important;
        width: auto !important;
        height: 44px !important;
        min-width: 108px !important;
        padding: 0 16px 0 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        border-radius: 999px !important;
        border: 1.5px solid #FFFFFF !important;
        background: linear-gradient(180deg, #FFEFAF 0%, #FFEB80 55%, #E6C25E 100%) !important;
        box-shadow:
          0 8px 20px rgba(214,112,156,0.3),
          0 0 0 1px rgba(214,112,156,0.5),
          inset 0 1px 0 rgba(255,255,255,0.7) !important;
        color: #7A2C48 !important;
        font-family: 'Bodoni Moda', serif !important;
        font-style: italic !important;
        font-weight: 800 !important;
        font-size: 11px !important;
        letter-spacing: 0.18em !important;
        text-transform: uppercase !important;
        cursor: pointer !important;
        z-index: 100 !important;
        transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), filter 200ms ease-out, box-shadow 260ms ease-out !important;
      }
      .__zoe-music-pill:hover {
        filter: brightness(1.05);
      }
      .__zoe-music-pill:active {
        transform: scale(0.97) !important;
      }
      /* Off state — cooler tone so the "muted" reads immediately */
      .__zoe-music-pill.__off {
        background: linear-gradient(180deg, #F2E9D9 0%, #E5D7B7 100%) !important;
        color: #7A6B4A !important;
        box-shadow:
          0 8px 20px rgba(0,0,0,0.14),
          0 0 0 1px rgba(0,0,0,0.05),
          inset 0 1px 0 rgba(255,255,255,0.55) !important;
      }
      .__zoe-music-pill__ico {
        width: 18px;
        height: 18px;
        display: inline-block;
        transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
      }
      .__zoe-music-pill:active .__zoe-music-pill__ico {
        transform: scale(0.9);
      }
      .__zoe-music-pill__label {
        white-space: nowrap;
        line-height: 1;
      }
      /* Subtle sound-wave pulse when playing, ties the visual to the audio */
      @keyframes zoeMusicWave {
        0%, 100% { transform: scaleX(0.85); opacity: 0.55; }
        50%      { transform: scaleX(1);    opacity: 1; }
      }
      .__zoe-music-pill.__on .__zoe-music-pill__wave {
        transform-origin: left center;
        animation: zoeMusicWave 1.6s ease-in-out infinite;
      }
      .__zoe-music-pill.__on .__zoe-music-pill__wave--2 {
        animation-delay: 0.2s;
      }
      /* Legacy WhatsApp FAB — hidden completely per client request */
      .__zoe-wa-hidden {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
      }
      /* Nuclear hide for stray RSVP headings/pills that React re-renders */
      .__zoe-heading-hidden {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        max-height: 0 !important;
        overflow: hidden !important;
      }
      /* ============ Coming Soon modal for Galería / Mesas ============ */
      .__zoe-cs-backdrop {
        position: fixed;
        inset: 0;
        background: radial-gradient(ellipse at center, rgba(122, 14, 79, 0.55) 0%, rgba(20, 5, 15, 0.85) 100%);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 220ms cubic-bezier(0.23, 1, 0.32, 1);
      }
      .__zoe-cs-backdrop.__open {
        opacity: 1;
        pointer-events: auto;
      }
      .__zoe-cs-card {
        max-width: 420px;
        width: 100%;
        background: linear-gradient(180deg, #FFF8E7 0%, #FFEB80 100%);
        border-radius: 20px;
        padding: 40px 32px 32px;
        text-align: center;
        position: relative;
        box-shadow:
          0 24px 60px rgba(0,0,0,0.35),
          inset 0 0 0 8px #F2A5B5,
          inset 0 0 0 12px #D4AF6B;
        transform: scale(0.92) translateY(8px);
        transition: transform 260ms cubic-bezier(0.23, 1, 0.32, 1);
      }
      .__zoe-cs-backdrop.__open .__zoe-cs-card {
        transform: scale(1) translateY(0);
      }
      .__zoe-cs-star {
        display: block;
        font-size: 32px;
        color: #D4AF6B;
        margin-bottom: 8px;
        text-shadow: 0 0 12px rgba(255,226,138,0.8);
      }
      .__zoe-cs-eyebrow {
        font-family: 'Bodoni Moda', serif;
        font-size: 11px;
        letter-spacing: 0.35em;
        text-transform: uppercase;
        font-weight: 700;
        color: #B29A55;
        margin-bottom: 12px;
      }
      .__zoe-cs-title {
        font-family: 'Bodoni Moda', serif;
        font-style: italic;
        font-weight: 800;
        font-size: clamp(28px, 6.5vw, 40px);
        color: #7A0E4F;
        letter-spacing: 0.01em;
        line-height: 1.1;
        margin: 0 0 12px 0;
      }
      .__zoe-cs-body {
        font-family: 'Bodoni Moda', serif;
        font-style: italic;
        font-weight: 500;
        font-size: clamp(15px, 3.8vw, 17px);
        color: #7A2C48;
        line-height: 1.5;
        margin: 0 0 24px 0;
      }
      .__zoe-cs-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px 32px;
        border: none;
        background: linear-gradient(180deg, #D6709C 0%, #B0587A 100%);
        color: #FFFFFF;
        font-family: 'Bodoni Moda', serif;
        font-style: italic;
        font-weight: 800;
        font-size: 14px;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        border-radius: 999px;
        cursor: pointer;
        box-shadow: 0 8px 20px rgba(214,112,156,0.4);
        transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), filter 200ms ease-out;
      }
      .__zoe-cs-close:active {
        transform: scale(0.97);
        filter: brightness(1.06);
      }
      /* NOTE: Previously hid the direct previous sibling of #rsvp-section
         with :has(+ #rsvp-section). Removed on 2026-07-12 — that heading
         is "★ Reclama tu Boleto ★" which Claudia wants visible above the
         reservation ticket. #rsvp-section itself is already display:none
         via the earlier form-based rule, so no orphan-heading issue. */
      /* Hide the giant "★ RSVP ★" pink pill anchor CTA that React puts on the
         hero. It's an <a href="#rsvp-section"> — target by href since it's the
         only anchor pointing to that fragment. */
      a[href="#rsvp-section"],
      a[href="#rsvp-section"] * {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        max-height: 0 !important;
        overflow: hidden !important;
      }
      /* ============ Reserva el Show — hero CTA between hero and countdown ============ */
      .__reserva-show-wrap {
        display: flex;
        justify-content: center;
        padding: 28px 20px 12px;
        margin: 0 auto;
      }
      .__reserva-show-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 16px 36px;
        border: none;
        background: linear-gradient(180deg, #D6709C 0%, #B0587A 100%);
        color: #FFFFFF;
        font-family: 'Bodoni Moda', serif;
        font-style: italic;
        font-weight: 800;
        font-size: clamp(13px, 3.4vw, 16px);
        letter-spacing: 0.22em;
        text-transform: uppercase;
        border-radius: 999px;
        cursor: pointer;
        text-decoration: none;
        box-shadow:
          0 10px 26px rgba(214,112,156,0.42),
          0 0 0 0 rgba(214,112,156,0.5),
          inset 0 1px 0 rgba(255,255,255,0.28);
        animation: reservaShowPulse 2.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), filter 200ms ease-out;
        white-space: nowrap;
      }
      .__reserva-show-cta__star {
        color: #FFE28A;
        font-size: 0.9em;
        text-shadow: 0 0 8px rgba(255,226,138,0.6);
      }
      @keyframes reservaShowPulse {
        0%, 100% {
          box-shadow:
            0 10px 26px rgba(214,112,156,0.42),
            0 0 0 0 rgba(214,112,156,0.5),
            inset 0 1px 0 rgba(255,255,255,0.28);
        }
        50% {
          box-shadow:
            0 14px 34px rgba(214,112,156,0.55),
            0 0 0 14px rgba(214,112,156,0),
            inset 0 1px 0 rgba(255,255,255,0.32);
        }
      }
      .__reserva-show-cta:hover {
        animation-play-state: paused;
        transform: translateY(-1px);
        filter: brightness(1.06);
      }
      .__reserva-show-cta:active {
        transform: scale(0.97);
        animation-play-state: paused;
      }
      .__reserva-show-hint {
        font-family: 'Bodoni Moda', serif;
        font-style: italic;
        font-weight: 700;
        font-size: 14px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #D6709C;
        margin-top: 4px;
      }
      .__reserva-show-hint__arrow {
        display: inline-block;
        margin-left: 6px;
        animation: reservaHintBounce 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      }
      @keyframes reservaHintBounce {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(5px); }
      }
      /* Placeholder styling for RSVP inputs — light gray, slightly smaller */
      .__zoe-rsvp-state input::placeholder,
      .__zoe-rsvp-state textarea::placeholder {
        color: #C4BAA8 !important;
        font-size: 13.5px !important;
        font-style: italic;
        opacity: 1;
      }
      .__zoe-rsvp-state input::-webkit-input-placeholder,
      .__zoe-rsvp-state textarea::-webkit-input-placeholder {
        color: #C4BAA8 !important;
        font-size: 13.5px !important;
        font-style: italic;
      }
      /* Notches carved into the seam — appear once cards separate */
      .__rsvp-card-top::before, .__rsvp-card-top::after,
      .__rsvp-card-bottom::before, .__rsvp-card-bottom::after {
        content: '';
        position: absolute;
        width: 22px; height: 22px;
        border-radius: 50%;
        background: #FDF8F0;
        box-shadow: inset 0 0 0 1px rgba(178,154,85,0.28);
        opacity: 0;
        z-index: 3;
      }
      .__rsvp-card-top::before  { bottom: -11px; left:  -11px; }
      .__rsvp-card-top::after   { bottom: -11px; right: -11px; }
      .__rsvp-card-bottom::before { top: -11px; left:  -11px; }
      .__rsvp-card-bottom::after  { top: -11px; right: -11px; }
      @keyframes rsvpNotchReveal {
        0%   { opacity: 0; }
        100% { opacity: 1; }
      }
      /* Top card: attached → scissors cuts → detaches → holds separated → back to attached */
      @keyframes rsvpTopDetach {
        0%, 10%    { transform: translateY(0); }
        25%        { transform: translateY(-3px); }
        40%, 85%   { transform: translateY(-24px); }
        100%       { transform: translateY(0); }
      }
      @keyframes rsvpBottomHold {
        0%, 10%    { transform: translateY(0); }
        40%, 85%   { transform: translateY(4px); }
        100%       { transform: translateY(0); }
      }
      /* Seam-line container that holds the scissors */
      .__rsvp-seam {
        position: relative;
        height: 0;
        margin: 0 auto;
        max-width: 520px;
      }
      .__rsvp-seam-dashes {
        position: absolute;
        left: 8px; right: 8px; top: -1px;
        height: 2px;
        background-image: repeating-linear-gradient(90deg, #B29A55 0 6px, transparent 6px 12px);
        opacity: 0;
      }
      @keyframes rsvpSeamDashesShow { 0% { opacity: 0; } 100% { opacity: 0.85; } }
      @keyframes rsvpSeamDashesFade { 0% { opacity: 0.85; } 100% { opacity: 0; } }
      /* Scissors that slides across the seam */
      .__rsvp-seam-scissors {
        position: absolute;
        top: 0;
        left: 3%;
        transform: translate(-50%, -50%) rotate(-10deg);
        background: transparent;
        padding: 0;
        z-index: 5;
        line-height: 1;
        display: inline-flex;
        opacity: 0;
      }
      @keyframes rsvpSeamScissors {
        0%        { left: 3%;  opacity: 0; }
        5%        { opacity: 1; }
        18%       { left: 50%; }
        30%       { left: 97%; opacity: 1; }
        35%, 100% { left: 97%; opacity: 0; }
      }
      @media (prefers-reduced-motion: reduce) {
        .__rsvp-card-top, .__rsvp-card-bottom,
        .__rsvp-seam-dashes, .__rsvp-seam-scissors,
        .__rsvp-card-top::before, .__rsvp-card-top::after,
        .__rsvp-card-bottom::before, .__rsvp-card-bottom::after {
          animation: none !important;
        }
        .__rsvp-card-top { transform: translateY(-24px); }
        .__rsvp-card-top::before, .__rsvp-card-top::after,
        .__rsvp-card-bottom::before, .__rsvp-card-bottom::after { opacity: 1; }
      }
      /* Replace React-side purple particle backgrounds/borders (not text colors)
         so the hero confetti reads pink+gold without breaking body text. */
      [style*="background:#9A7BC2"],
      [style*="background: #9A7BC2"],
      [style*="background:\"#9A7BC2\""],
      [style*="background-color:#9A7BC2"],
      [style*="background-color: #9A7BC2"] {
        background: #D6709C !important;
        background-color: #D6709C !important;
      }
      [style*="border:1.5px solid #9A7BC2"],
      [style*="border: 1.5px solid #9A7BC2"],
      [style*="border-color:#9A7BC2"],
      [style*="border-color: #9A7BC2"] {
        border-color: #D6709C !important;
      }
      [style*="background:#C7A8E0"],
      [style*="background: #C7A8E0"],
      [style*="background-color:#C7A8E0"],
      [style*="background-color: #C7A8E0"] {
        background: #F5B5CD !important;
        background-color: #F5B5CD !important;
      }
      [style*="border:1.5px solid #C7A8E0"],
      [style*="border: 1.5px solid #C7A8E0"] {
        border-color: #F5B5CD !important;
      }
      /* Hero telón "★ EL SHOW ★" — back to original + a touch of light */
      .__hero-marquee {
        text-shadow:
          0 1px 0 rgba(255,255,255,0.55),
          0 0 6px rgba(255,246,206,0.5),
          0 0 14px rgba(255,200,87,0.4) !important;
      }
      /* Option-badge pill above each gift card */
      .__gift-opt-tag {
        display: inline-block;
        padding: 4px 14px;
        border-radius: 999px;
        background: rgba(214,112,156,0.14);
        font-family: 'Bodoni Moda', serif;
        font-style: italic;
        font-size: 12px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: #D6709C;
      }
      /* V4 dotted leader shimmer */
      @keyframes dcLeaderShine {
        0%   { background-position: -200% 0; }
        100% { background-position: 200% 0; }
      }
      .__dc-v4-tag {
        display:inline-flex; align-items:center; gap:8px;
        padding: 6px 14px;
        border-radius: 999px;
        background: #FFFFFF;
        box-shadow: 0 4px 14px -6px rgba(92,42,138,0.28), inset 0 0 0 1px rgba(214,112,156,0.35);
        font-family: 'Bodoni Moda', serif;
        font-style: italic;
        font-size: 12px;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: #7A2C48;
      }
      .__dc-v4-row {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: baseline;
        gap: 10px;
        padding: 10px 4px;
        border-bottom: 1px dashed rgba(214,112,156,0.28);
      }
      .__dc-v4-row:last-child { border-bottom: none; }
      .__dc-v4-num {
        font-family: 'Bodoni Moda', serif;
        font-style: italic;
        font-weight: 800;
        font-size: clamp(14px, 3vw, 17px);
        color: #D6709C;
        letter-spacing: 0.05em;
      }
      .__dc-v4-label {
        font-family: 'Bodoni Moda', serif;
        font-style: italic;
        font-size: clamp(15px, 3.6vw, 19px);
        color: #5C2A8A;
        font-weight: 700;
      }
      .__dc-v4-desc {
        font-family: 'Bodoni Moda', serif;
        font-style: italic;
        font-size: clamp(14px, 3.2vw, 17px);
        color: #9A7BC2;
        text-align: right;
        line-height: 1.4;
      }
      .__dc-v4-row.__dc-v4-reserved {
        background: linear-gradient(90deg, transparent, rgba(248,218,230,0.55), transparent);
        border-radius: 8px;
        padding: 14px 8px;
        border-bottom: none;
        margin-top: 4px;
      }
      .__dc-v4-row.__dc-v4-reserved .__dc-v4-num { color: #7A0E4F; }
      .__dc-v4-row.__dc-v4-reserved .__dc-v4-label { color: #7A0E4F; }
      .__dc-v4-row.__dc-v4-reserved .__dc-v4-desc { color: #7A0E4F; font-weight: 600; }
      /* V2 couples — cheerful bounce + subtle tilt */
      @keyframes dcCoupleBounce {
        0%, 100% { transform: translateY(0) rotate(-0.5deg) scale(1); }
        20%      { transform: translateY(-6px) rotate(0.25deg) scale(1.006); }
        40%      { transform: translateY(-10px) rotate(0.6deg) scale(1.012); }
        60%      { transform: translateY(-6px) rotate(0.25deg) scale(1.006); }
        80%      { transform: translateY(-2px) rotate(-0.25deg) scale(1.002); }
      }
      /* V2 sparkle burst pulse */
      @keyframes dcConfettiPop {
        0%   { transform: translate3d(0,0,0) rotate(0deg) scale(0.4); opacity: 0; }
        18%  { opacity: 1; }
        50%  { transform: translate3d(var(--dx,10px), calc(var(--dy,-14px)), 0) rotate(140deg) scale(1); opacity: 0.95; }
        100% { transform: translate3d(calc(var(--dx,10px) * 1.8), calc(var(--dy,-14px) * 2.2), 0) rotate(280deg) scale(0.6); opacity: 0; }
      }
      /* V2 glow breathe */
      @keyframes dcBreathe {
        0%, 100% { opacity: 0.55; transform: scale(0.94); }
        50%      { opacity: 1;    transform: scale(1.08); }
      }
      .__dc-confetti {
        position: absolute;
        top: 50%; left: 50%;
        pointer-events: none;
        will-change: transform, opacity;
        animation: dcConfettiPop 3.6s ease-out infinite;
        font-size: 14px;
        line-height: 1;
        z-index: 2;
      }
      @media (prefers-reduced-motion: reduce) {
        .__dc-v2-img-el, .__dc-confetti { animation: none !important; }
      }
      /* Rotating spotlight beam behind the couple */
      @keyframes dcSpot {
        0%   { transform: translate(-50%, -50%) rotate(-14deg); opacity: 0.55; }
        50%  { transform: translate(-50%, -50%) rotate(14deg);  opacity: 0.85; }
        100% { transform: translate(-50%, -50%) rotate(-14deg); opacity: 0.55; }
      }
      /* Falling petal trajectory + tumble */
      @keyframes dcFall {
        0%   { transform: translate3d(0, -20px, 0) rotate(0deg);    opacity: 0; }
        10%  { opacity: 1; }
        50%  { transform: translate3d(30px, 250px, 0) rotate(180deg); }
        90%  { opacity: 1; }
        100% { transform: translate3d(-20px, 500px, 0) rotate(360deg); opacity: 0; }
      }
      @keyframes dcFall2 {
        0%   { transform: translate3d(0, -20px, 0) rotate(0deg);    opacity: 0; }
        12%  { opacity: 1; }
        60%  { transform: translate3d(-35px, 260px, 0) rotate(-200deg); }
        88%  { opacity: 1; }
        100% { transform: translate3d(20px, 520px, 0) rotate(-380deg); opacity: 0; }
      }
      @keyframes dcFall3 {
        0%   { transform: translate3d(0, -20px, 0) rotate(0deg);    opacity: 0; }
        15%  { opacity: 1; }
        50%  { transform: translate3d(15px, 240px, 0) rotate(120deg); }
        85%  { opacity: 1; }
        100% { transform: translate3d(-30px, 500px, 0) rotate(240deg); opacity: 0; }
      }
      .__dc-petal {
        position: absolute;
        top: 0;
        pointer-events: none;
        color: #D6709C;
        font-size: 12px;
        text-shadow: 0 0 6px rgba(214,112,156,0.4);
        will-change: transform, opacity;
      }
      .__dc-spot {
        position: absolute;
        left: 50%;
        top: 55%;
        width: 130%;
        height: 130%;
        background: conic-gradient(from 60deg, transparent 0deg, rgba(212,175,55,0.28) 30deg, rgba(255,246,201,0.28) 60deg, transparent 90deg, transparent 360deg);
        border-radius: 50%;
        transform: translate(-50%, -50%) rotate(-14deg);
        pointer-events: none;
        z-index: 0;
        mix-blend-mode: screen;
        filter: blur(20px);
        animation: dcSpot 9s ease-in-out infinite;
      }
      @keyframes dcSparkle {
        0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
        30%      { opacity: 1; transform: scale(1) rotate(10deg); }
        60%      { opacity: 0.8; transform: scale(1.1) rotate(-6deg); }
      }
      @keyframes dcWarnPulse {
        0%, 100% { transform: scale(1); box-shadow: 0 4px 12px rgba(214,112,156,0.55), inset 0 -1px 0 rgba(0,0,0,0.15), 0 0 0 0 rgba(214,112,156,0.55); }
        50%      { transform: scale(1.08); box-shadow: 0 6px 16px rgba(214,112,156,0.7), inset 0 -1px 0 rgba(0,0,0,0.15), 0 0 0 8px rgba(214,112,156,0); }
      }
      .__dc-sparkle {
        position: absolute;
        pointer-events: none;
        font-size: 14px;
        color: #D4AF37;
        text-shadow: 0 0 6px rgba(212,175,55,0.55);
        animation: dcSparkle 3.6s ease-in-out infinite;
        transform-origin: center;
      }
      @media (prefers-reduced-motion: reduce) {
        .__dc-img, .__dc-sparkle { animation: none !important; }
      }
      @keyframes goldShineSweep {
        0%   { transform: translateX(-160%); }
        55%  { transform: translateX(160%); }
        100% { transform: translateX(160%); }
      }
      @keyframes goldBgShift {
        0%, 100% { background-position: 0% 50%; }
        50%      { background-position: 100% 50%; }
      }
      .countdown-metallic {
        animation: goldBgShift 5s ease-in-out infinite !important;
      }
      /* Text in gold — solid + embossed sheen, still crisp against cream */
      [style*="color:#D4AF37"],
      [style*="color: #D4AF37"],
      .text-\[\#D4AF37\] {
        color: #B8892A !important;
        text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(80,55,10,0.18), 0 0 8px rgba(212,175,55,0.18);
        font-weight: 500;
      }

      /* Metallic gold card behind the Countdown block */
      .countdown-metallic {
        background: linear-gradient(135deg, #A88727 0%, #E5C25D 30%, #F7DC85 48%, #FFF3B8 52%, #F0CE68 58%, #C29B32 80%, #A88727 100%) !important;
        background-size: 220% 100%;
        border-radius: 22px;
        padding: 32px 24px !important;
        margin: 12px 16px;
        box-shadow: 0 22px 55px -22px rgba(168,135,39,0.55), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(70,45,10,0.35);
        position: relative;
        overflow: hidden;
        isolation: isolate;
      }
      .countdown-metallic::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.45) 48%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0.45) 52%, transparent 70%);
        transform: translateX(-160%);
        animation: goldShineSweep 5s ease-in-out infinite;
        z-index: 1;
        border-radius: 22px;
      }
      .countdown-metallic > * { position: relative; z-index: 2; }
      /* Numbers on the metallic bg — ivory */
      .countdown-metallic span[class*="tabular-nums"],
      .countdown-metallic p,
      .countdown-metallic span {
        color: #FFFBEA !important;
        text-shadow: 0 1px 2px rgba(70,45,10,0.55), 0 0 8px rgba(255,240,180,0.35);
      }