@font-face {
      font-family: 'slight';
      src: url('https://royal-invite.com/wp-content/uploads/2026/01/slight-regular.ttf') format('truetype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    :root {
      /* Paleta: rosados pasteles + rose gold (misma firma .firma #B76E79) */
      --firma-rose: #B76E79;
      --palette-pastel-rose: #E8B4C4;
      --palette-dusty-rose: #C9A0A8;
      --palette-dusty-deep: #9A6B7A;
      --palette-champagne: #C9957E;
      --palette-champagne-light: #E8C4B0;
      --palette-powder: #FAD6E4;
      --palette-powder-soft: #FDF6F8;
      --palette-bg-mauve: #8B6974;
      --palette-accent-soft: #C49AAC;
      --dorado-inv: #B76E79;
      --texto-inv: #333;
    }

    html.lock-scroll, body.lock-scroll {
      overflow: hidden !important;
      height: 100vh !important;
      position: fixed !important;
      width: 100% !important;
    }

    .sparkle-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      overflow: hidden;
      z-index: 999999 !important;
    }

    .sparkle {
      position: absolute;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 252, 220, 0.8) 40%, transparent 100%);
      opacity: 0;
      box-shadow: 0 0 6px rgba(255, 255, 240, 0.9),
                  0 0 12px rgba(255, 245, 200, 0.6),
                  0 0 20px rgba(255, 235, 150, 0.4);
      animation-name: firefly-twinkle;
      animation-iteration-count: infinite;
      animation-fill-mode: both;
    }

    @keyframes firefly-twinkle {
      0% { opacity: 0; transform: scale(0.6); }
      30% { opacity: 1; transform: scale(1.4); }
      50% { opacity: 0.8; transform: scale(1.1); }
      70% { opacity: 1; transform: scale(1.3); }
      100% { opacity: 0; transform: scale(0.6); }
    }

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

    html {
      overflow-x: clip;
      max-width: 100%;
    }

    body {
      font-family: 'Antic Didone', serif;
      background-color: #f5e8ea;
      color: #333;
      overflow-x: clip;
      max-width: 100%;
      touch-action: pan-y pinch-zoom;
    }

    /* Misma imagen fondo-ro en toda la página (capa fija): recortes/olas ven la textura real, no un color sólido */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: -1;
      background-color: #f5e8ea;
      background-image: url('https://pub-a65601eb9ffe4b62a9bcbf111a23ee8c.r2.dev/invitations/custom-orders/daniela-sofia-xv/fondo-ro.webp');
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: scroll;
      pointer-events: none;
    }

    @media (min-width: 769px) {
      body::before { background-attachment: fixed; }
    }

    img { max-width: 100%; height: auto; display: block; }

    /* ══════════════════════════════════════════
       OVERLAY: posición + iPhone + animación (final)
    ══════════════════════════════════════════ */
    .overlay-container {
      position: fixed;
      inset: 0;
      width: 100%;
      max-width: 100%;
      height: 100vh;
      height: 100dvh;
      background-color: #eae3d5;
      z-index: 70;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      padding-left: env(safe-area-inset-left, 0);
      padding-right: env(safe-area-inset-right, 0);
      box-sizing: border-box;
    }

    .overlay-content {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #lazo {
      position: absolute;
      top: 50%;
      left: 54%;
      transform: translate(-50%, -50%) scale(1.7);
      width: 160vw;
      max-width: none;
      height: auto;
      max-height: none;
      object-fit: contain;
      z-index: 80;
      opacity: 1;
      pointer-events: none;
    }

    @media (min-width: 640px) {
      #lazo {
        top: 68%;
        transform: translate(-50%, -50%) scale(1.5);
        width: 150vw;
      }
    }

    #flores {
      position: absolute;
      top: 45%;
      left: 50%;
      width: 280px;
      height: 280px;
      z-index: 85;
      opacity: 1;
      pointer-events: none;
      transform-origin: center bottom;
      animation: balanceoHoja 4s ease-in-out infinite;
    }

    @keyframes balanceoHoja {
      0%   { transform: translate(-50%, -50%) rotate(-5deg); }
      25%  { transform: translate(-50%, -50%) rotate(-10deg); }
      75%  { transform: translate(-50%, -50%) rotate(0deg); }
      100% { transform: translate(-50%, -50%) rotate(-5deg); }
    }

    .notification-container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 90;
    }

    .notification {
      position: absolute;
      top: 140px;
      left: 50%;
      transform: translateX(-50%);
      background-color: transparent;
      color: #F5F2E9;
      text-shadow: 1px 3px 3px rgba(0,0,0,0.4);
      padding: 5px;
      font-size: 14px;
      text-align: center;
      white-space: nowrap;
      font-family: 'amsterdam-four.ttf', 'Antic Didone', serif;
      letter-spacing: 1px;
    }

    #selloButton {
      width: 100px;
      height: 100px;
      animation: pulso 1.5s infinite;
      z-index: 100;
      border: none !important;
      outline: none !important;
      background: transparent;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    @keyframes pulso {
      0% { transform: scale(1); }
      50% { transform: scale(1.1); }
      100% { transform: scale(1); }
    }

    #sobreDiv {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: visible;
      pointer-events: none;
    }

    .sobre {
      position: absolute;
      top: 0;
      height: 100% !important;
      height: 100dvh !important;
      max-width: none;
      margin: 0;
      padding: 0;
      border: none;
      box-sizing: border-box;
      pointer-events: none;
      overflow: hidden;
      transition: transform 1s ease-in-out, opacity 1s ease-in-out;
      /* Papel texturizado (#eac0b2) — solo CSS; forma de solapa con clip-path */
      --papel: #eac0b2;
      --papel-os: #d9a896;
      --papel-luz: #faf1eb;
      background-color: var(--papel);
      background-image:
        radial-gradient(ellipse 110% 65% at 50% -8%, var(--papel-luz), transparent 54%),
        linear-gradient(125deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 46%),
        linear-gradient(315deg, rgba(86, 76, 74, 0.08) 0%, rgba(86, 76, 74, 0) 44%),
        repeating-linear-gradient(
          84deg,
          rgba(255, 255, 255, 0.05) 0 1px,
          rgba(0, 0, 0, 0) 1px 5px
        ),
        linear-gradient(188deg, #efd4c9 0%, var(--papel) 40%, var(--papel-os) 100%);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -4px 18px rgba(86, 76, 74, 0.11);
    }

    .sobre::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0.28;
      background-image: repeating-linear-gradient(
        0deg,
        rgba(92, 72, 68, 0.06),
        rgba(92, 72, 68, 0.06) 1px,
        rgba(0, 0, 0, 0) 1px,
        rgba(0, 0, 0, 0) 3px
      );
      mix-blend-mode: multiply;
    }

    /* Segundo triángulo encima (capa ligera, misma familia de forma) */
    #sobre1::after,
    #sobre2::after,
    #sobre3::after,
    #sobre4::after {
      content: '';
      position: absolute;
      pointer-events: none;
      z-index: 1;
      opacity: 0.55;
      background: linear-gradient(
        105deg,
        rgba(255, 255, 255, 0.42) 0%,
        rgba(255, 255, 255, 0) 42%,
        rgba(72, 58, 54, 0.07) 100%
      );
    }

    /* Solapas: ancho completo del contenedor (evita recorte por 100vw en móvil) */
    #sobre1, #sobre2, #sobre3, #sobre4 {
      width: 100%;
      max-width: 100%;
    }

    /* Triángulo ancho, punta y bisagra con bordes redondeados (polígono suavizado) */
    #sobre1 {
      left: 0;
      right: auto;
      z-index: 40;
      transform-origin: left center;
      -webkit-clip-path: polygon(
        0% 5.5%,
        2% 0%,
        86% 43%,
        91.5% 47.5%,
        94% 50%,
        91.5% 52.5%,
        86% 57%,
        2% 100%,
        0% 94.5%
      );
      clip-path: polygon(
        0% 5.5%,
        2% 0%,
        86% 43%,
        91.5% 47.5%,
        94% 50%,
        91.5% 52.5%,
        86% 57%,
        2% 100%,
        0% 94.5%
      );
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -4px 18px rgba(86, 76, 74, 0.11),
        inset -10px 0 22px rgba(255, 255, 255, 0.22);
    }

    #sobre1::after {
      inset: 11% 14% 11% 0;
      -webkit-clip-path: polygon(
        0% 7%,
        2.5% 0%,
        82% 44%,
        88% 48%,
        91% 50%,
        88% 52%,
        82% 56%,
        2.5% 100%,
        0% 93%
      );
      clip-path: polygon(
        0% 7%,
        2.5% 0%,
        82% 44%,
        88% 48%,
        91% 50%,
        88% 52%,
        82% 56%,
        2.5% 100%,
        0% 93%
      );
    }

    #sobre2 {
      right: 0;
      left: auto;
      z-index: 40;
      transform-origin: right center;
      -webkit-clip-path: polygon(
        100% 5.5%,
        98% 0%,
        14% 43%,
        8.5% 47.5%,
        6% 50%,
        8.5% 52.5%,
        14% 57%,
        98% 100%,
        100% 94.5%
      );
      clip-path: polygon(
        100% 5.5%,
        98% 0%,
        14% 43%,
        8.5% 47.5%,
        6% 50%,
        8.5% 52.5%,
        14% 57%,
        98% 100%,
        100% 94.5%
      );
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -4px 18px rgba(86, 76, 74, 0.11),
        inset 10px 0 22px rgba(0, 0, 0, 0.05);
    }

    #sobre2::after {
      inset: 11% 0 11% 14%;
      -webkit-clip-path: polygon(
        100% 7%,
        97.5% 0%,
        18% 44%,
        12% 48%,
        9% 50%,
        12% 52%,
        18% 56%,
        97.5% 100%,
        100% 93%
      );
      clip-path: polygon(
        100% 7%,
        97.5% 0%,
        18% 44%,
        12% 48%,
        9% 50%,
        12% 52%,
        18% 56%,
        97.5% 100%,
        100% 93%
      );
    }

    #sobre3 {
      left: 0;
      right: auto;
      z-index: 30;
      transform-origin: left center;
      -webkit-clip-path: polygon(
        0% 5.5%,
        2% 0%,
        82% 44%,
        89% 48%,
        92% 50%,
        89% 52%,
        82% 56%,
        2% 100%,
        0% 94.5%
      );
      clip-path: polygon(
        0% 5.5%,
        2% 0%,
        82% 44%,
        89% 48%,
        92% 50%,
        89% 52%,
        82% 56%,
        2% 100%,
        0% 94.5%
      );
      filter: brightness(0.96) saturate(0.97);
    }

    #sobre3::after {
      inset: 13% 18% 13% 0;
      opacity: 0.45;
      -webkit-clip-path: polygon(
        0% 8%,
        2.8% 0%,
        78% 45%,
        85% 48.5%,
        88.5% 50%,
        85% 51.5%,
        78% 55%,
        2.8% 100%,
        0% 92%
      );
      clip-path: polygon(
        0% 8%,
        2.8% 0%,
        78% 45%,
        85% 48.5%,
        88.5% 50%,
        85% 51.5%,
        78% 55%,
        2.8% 100%,
        0% 92%
      );
    }

    #sobre4 {
      right: 0;
      left: auto;
      z-index: 30;
      transform-origin: right center;
      -webkit-clip-path: polygon(
        100% 5.5%,
        98% 0%,
        18% 44%,
        11% 48%,
        8% 50%,
        11% 52%,
        18% 56%,
        98% 100%,
        100% 94.5%
      );
      clip-path: polygon(
        100% 5.5%,
        98% 0%,
        18% 44%,
        11% 48%,
        8% 50%,
        11% 52%,
        18% 56%,
        98% 100%,
        100% 94.5%
      );
      filter: brightness(0.96) saturate(0.97);
    }

    #sobre4::after {
      inset: 13% 0 13% 18%;
      opacity: 0.45;
      -webkit-clip-path: polygon(
        100% 8%,
        97.2% 0%,
        22% 45%,
        15% 48.5%,
        11.5% 50%,
        15% 51.5%,
        22% 55%,
        97.2% 100%,
        100% 92%
      );
      clip-path: polygon(
        100% 8%,
        97.2% 0%,
        22% 45%,
        15% 48.5%,
        11.5% 50%,
        15% 51.5%,
        22% 55%,
        97.2% 100%,
        100% 92%
      );
    }

    /* Móvil: triángulo ancho hacia el centro de pantalla (punta ~50% del ancho del elemento) */
    @media (max-width: 639px) {
      #sobre1 {
        -webkit-clip-path: polygon(
          0% 5%,
          1.8% 0%,
          46% 44%,
          49.5% 47.5%,
          51.5% 50%,
          49.5% 52.5%,
          46% 56%,
          1.8% 100%,
          0% 95%
        );
        clip-path: polygon(
          0% 5%,
          1.8% 0%,
          46% 44%,
          49.5% 47.5%,
          51.5% 50%,
          49.5% 52.5%,
          46% 56%,
          1.8% 100%,
          0% 95%
        );
      }
      #sobre1::after {
        inset: 11% 22% 11% 0;
        -webkit-clip-path: polygon(
          0% 7%,
          2.2% 0%,
          44% 45%,
          48.5% 48.5%,
          50.5% 50%,
          48.5% 51.5%,
          44% 55%,
          2.2% 100%,
          0% 93%
        );
        clip-path: polygon(
          0% 7%,
          2.2% 0%,
          44% 45%,
          48.5% 48.5%,
          50.5% 50%,
          48.5% 51.5%,
          44% 55%,
          2.2% 100%,
          0% 93%
        );
      }
      #sobre2 {
        -webkit-clip-path: polygon(
          100% 5%,
          98.2% 0%,
          54% 44%,
          50.5% 47.5%,
          48.5% 50%,
          50.5% 52.5%,
          54% 56%,
          98.2% 100%,
          100% 95%
        );
        clip-path: polygon(
          100% 5%,
          98.2% 0%,
          54% 44%,
          50.5% 47.5%,
          48.5% 50%,
          50.5% 52.5%,
          54% 56%,
          98.2% 100%,
          100% 95%
        );
      }
      #sobre2::after {
        inset: 11% 0 11% 22%;
        -webkit-clip-path: polygon(
          100% 7%,
          97.8% 0%,
          56% 45%,
          51.5% 48.5%,
          49.5% 50%,
          51.5% 51.5%,
          56% 55%,
          97.8% 100%,
          100% 93%
        );
        clip-path: polygon(
          100% 7%,
          97.8% 0%,
          56% 45%,
          51.5% 48.5%,
          49.5% 50%,
          51.5% 51.5%,
          56% 55%,
          97.8% 100%,
          100% 93%
        );
      }
      #sobre3 {
        -webkit-clip-path: polygon(
          0% 5%,
          1.8% 0%,
          44% 45%,
          48% 48.5%,
          50% 50%,
          48% 51.5%,
          44% 55%,
          1.8% 100%,
          0% 95%
        );
        clip-path: polygon(
          0% 5%,
          1.8% 0%,
          44% 45%,
          48% 48.5%,
          50% 50%,
          48% 51.5%,
          44% 55%,
          1.8% 100%,
          0% 95%
        );
      }
      #sobre3::after {
        inset: 12% 26% 12% 0;
        -webkit-clip-path: polygon(
          0% 8%,
          2.4% 0%,
          42% 46%,
          47% 49%,
          49.2% 50%,
          47% 51%,
          42% 54%,
          2.4% 100%,
          0% 92%
        );
        clip-path: polygon(
          0% 8%,
          2.4% 0%,
          42% 46%,
          47% 49%,
          49.2% 50%,
          47% 51%,
          42% 54%,
          2.4% 100%,
          0% 92%
        );
      }
      #sobre4 {
        -webkit-clip-path: polygon(
          100% 5%,
          98.2% 0%,
          56% 45%,
          52% 48.5%,
          50% 50%,
          52% 51.5%,
          56% 55%,
          98.2% 100%,
          100% 95%
        );
        clip-path: polygon(
          100% 5%,
          98.2% 0%,
          56% 45%,
          52% 48.5%,
          50% 50%,
          52% 51.5%,
          56% 55%,
          98.2% 100%,
          100% 95%
        );
      }
      #sobre4::after {
        inset: 12% 0 12% 26%;
        -webkit-clip-path: polygon(
          100% 8%,
          97.6% 0%,
          58% 46%,
          53% 49%,
          50.8% 50%,
          53% 51%,
          58% 54%,
          97.6% 100%,
          100% 92%
        );
        clip-path: polygon(
          100% 8%,
          97.6% 0%,
          58% 46%,
          53% 49%,
          50.8% 50%,
          53% 51%,
          58% 54%,
          97.6% 100%,
          100% 92%
        );
      }
    }

    /* Escritorio: solapas más anchas (triángulos grandes) */
    @media (min-width: 640px) {
      #flores { left: calc(50% + 0.2%); }
      #sobre1, #sobre2 {
        width: 86vw;
      }
      #sobre3, #sobre4 {
        width: 76vw;
      }
      #sobre1, #sobre3 {
        left: 0;
        right: auto;
      }
      #sobre2, #sobre4 {
        right: 0;
        left: auto;
      }
    }

    .background {
      position: fixed;
      inset: 0;
      width: 100%;
      max-width: 100%;
      height: 100vh;
      height: 100dvh;
      background-color: #F5F2E9;
      z-index: 60;
      transition: opacity 1s ease-in-out;
    }

    #floatingButton {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 60px;
      height: 60px;
      background-color: #D2CFCE;
      border-radius: 50%;
      display: none;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 50;
      border: none !important;
      outline: none !important;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      -webkit-tap-highlight-color: transparent;
      gap: 3px;
    }

    #floatingButton .bar {
      width: 3px;
      border-radius: 2px;
      background-color: #3d3d3d;
    }

    #floatingButton.playing .bar {
      animation: equalizer 0.5s infinite alternate ease-in-out;
    }
    #floatingButton.playing .bar:nth-child(1) { animation-duration: 0.5s; }
    #floatingButton.playing .bar:nth-child(2) { animation-duration: 0.7s; animation-delay: 0.1s; }
    #floatingButton.playing .bar:nth-child(3) { animation-duration: 0.4s; animation-delay: 0.2s; }
    #floatingButton.playing .bar:nth-child(4) { animation-duration: 0.6s; animation-delay: 0.05s; }

    @keyframes equalizer {
      0% { height: 4px; }
      100% { height: 20px; }
    }

    #floatingButton.paused .bar { height: 8px; display: none; }
    #floatingButton.paused::after {
      content: '';
      width: 0; height: 0;
      border-style: solid;
      border-width: 9px 0 9px 15px;
      border-color: transparent transparent transparent #3d3d3d;
      margin-left: 4px;
    }

    .notification-container .loading-bar-bg {
      position: absolute;
      bottom: -30px;
      left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 4px;
      background-color: rgba(203, 204, 204, 0.4);
      border-radius: 4px;
      overflow: hidden;
      z-index: 96;
    }

    .notification-container .loading-bar-fill {
      width: 0%;
      height: 100%;
      background-color: #F5F2E9;
      border-radius: 2px;
      transition: width 0.1s linear;
    }

    /* ══════════════════════════════════════════
       SECCIONES PRINCIPALES (solo mobile)
    ══════════════════════════════════════════ */
    .page-wrapper {
      max-width: 480px;
      margin: 0 auto;
      overflow-x: clip;
      position: relative;
      z-index: 0;
    }

    /* ─── Decoración orgánica editorial (WebP + animación; fondo negro del arte → mix-blend-mode) ─── */
    .organic-editorial-canvas {
      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
      width: 100vw;
      min-height: 100vh;
      pointer-events: none;
      z-index: 6;
      overflow: visible;
      /* Costados casi opacos; solo un hueco suave al centro para el texto */
      -webkit-mask-image: linear-gradient(
        90deg,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 1) 12%,
        rgba(0, 0, 0, 0.92) 20%,
        rgba(0, 0, 0, 0.26) 32%,
        rgba(0, 0, 0, 0.1) 50%,
        rgba(0, 0, 0, 0.26) 68%,
        rgba(0, 0, 0, 0.92) 80%,
        rgba(0, 0, 0, 1) 88%,
        rgba(0, 0, 0, 1) 100%
      );
      mask-image: linear-gradient(
        90deg,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 1) 12%,
        rgba(0, 0, 0, 0.92) 20%,
        rgba(0, 0, 0, 0.26) 32%,
        rgba(0, 0, 0, 0.1) 50%,
        rgba(0, 0, 0, 0.26) 68%,
        rgba(0, 0, 0, 0.92) 80%,
        rgba(0, 0, 0, 1) 88%,
        rgba(0, 0, 0, 1) 100%
      );
      mask-mode: alpha;
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
    }
    .organic-motif {
      position: absolute;
      width: clamp(114px, 28vw, 226px);
      opacity: 1;
      will-change: transform;
    }
    .organic-motif--deep { opacity: 0.92; }
    .organic-motif--blur .organic-motif-inner {
      filter: blur(0.25px);
    }
    /* Dentro del canvas ya ancho viewport; anclar a bordes del canvas */
    .organic-motif--right {
      right: max(-18px, -3.2vw);
      left: auto;
    }
    .organic-motif--left {
      left: max(-18px, -3.2vw);
      right: auto;
    }
    .organic-motif-parallax {
      width: 100%;
      display: block;
      will-change: transform;
    }
    .organic-motif-inner {
      width: 100%;
      height: auto;
      transform-origin: 50% 92%;
      display: block;
    }
    .organic-motif-flip {
      display: block;
      width: 100%;
      line-height: 0;
    }
    .organic-motif--left .organic-motif-flip {
      transform: scaleX(-1);
    }
    .organic-motif--right .organic-motif-flip {
      transform: scaleX(-1);
    }
    .organic-motif-img {
      width: 100%;
      height: auto;
      display: block;
      /* Arte con fondo negro sobre invitación clara */
      mix-blend-mode: screen;
      opacity: 0.94;
      filter: contrast(1.06) saturate(1.06);
    }
    @keyframes organic-sway-a {
      0% { transform: rotate(-9deg) translate3d(-5px, 2px, 0); }
      100% { transform: rotate(8.5deg) translate3d(10px, -8px, 0); }
    }
    @keyframes organic-sway-b {
      0% { transform: rotate(8deg) translate3d(4px, 3px, 0); }
      100% { transform: rotate(-9deg) translate3d(-10px, 6px, 0); }
    }
    @keyframes organic-sway-c {
      0% { transform: rotate(-6.5deg) translate3d(-2px, 4px, 0); }
      100% { transform: rotate(7deg) translate3d(9px, -8px, 0); }
    }
    /* Brisa en inner; parallax en .organic-motif-parallax (GSAP no pisa el transform de la brisa) */
    .organic-motif.organic-sway-a .organic-motif-inner { animation: organic-sway-a 6.2s ease-in-out infinite alternate; }
    .organic-motif.organic-sway-b .organic-motif-inner { animation: organic-sway-b 7.2s ease-in-out infinite alternate; }
    .organic-motif.organic-sway-c .organic-motif-inner { animation: organic-sway-c 5.6s ease-in-out infinite alternate; }
    .organic-motif--w85 { width: clamp(126px, 30vw, 236px); }
    .organic-motif--w68 { width: clamp(100px, 23vw, 180px); }
    @media (max-width: 639px) {
      .organic-motif:nth-child(n + 9) { display: none; }
      .organic-motif--blur .organic-motif-inner { filter: none; opacity: 0.9; }
    }
    @media (prefers-reduced-motion: reduce) {
      .organic-motif-inner { animation: none !important; }
      .organic-motif--blur .organic-motif-inner { filter: none; }
      .inv-container .flora-back { animation: none !important; }
    }
    #mainContent > *:not(.organic-editorial-canvas):not(.svg-clip-defs) {
      position: relative;
      z-index: 5;
    }

    /* ─── Sección título (portada con foto, ancho pantalla, alto fijo) ─── */
    .section-titulo {
      position: relative;
      z-index: 2;
      width: 100vw;
      max-width: none;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      box-sizing: border-box;
      text-align: center;
      height: 634px;
      min-height: 634px;
      max-height: 634px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-direction: column;
      padding: 36px 20px 42px;
      overflow: hidden;
      isolation: isolate;
      /* Borde inferior: una ola suave (misma familia que los divisores, más minimal que antes) */
      -webkit-clip-path: url(#clip-ola-portada);
      clip-path: url(#clip-ola-portada);
    }
    .section-titulo::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        url('https://pub-a65601eb9ffe4b62a9bcbf111a23ee8c.r2.dev/invitations/custom-orders/daniela-sofia-xv/WhatsApp-Image-2026-05-08-at-23.32.37-scaled.webp')
        center 58% / cover no-repeat;
      z-index: 0;
    }
    .section-titulo::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.42) 0%,
        rgba(0, 0, 0, 0.28) 45%,
        rgba(0, 0, 0, 0.38) 100%
      );
      z-index: 1;
    }
    .section-titulo-inner {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      max-width: 100%;
      width: 100%;
      margin-top: auto;
      transform: translateY(-18px);
    }
    .section-titulo .mis-xv {
      position: absolute;
      top: clamp(52px, 11vh, 78px);
      left: 50%;
      transform: translateX(-50%);
      z-index: 3;
      width: 100%;
      font-family: 'Antic Didone', serif;
      font-size: clamp(3rem, 12vw, 4.75rem);
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #fff;
      margin: 0;
      line-height: 1;
      text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.35);
    }
    @media (max-width: 768px) {
      .section-titulo {
        padding-bottom: 44px;
      }
      .section-titulo .mis-xv {
        top: max(50px, calc(env(safe-area-inset-top, 0px) + 38px));
        font-size: clamp(2.85rem, 11.5vw, 3.75rem);
      }
      .section-titulo-inner {
        transform: translateY(-32px);
      }
    }
    .section-titulo-gap {
      display: none;
      min-height: 0;
      width: 100%;
    }
    .section-titulo .titulo-nombre {
      font-family: 'Antic Didone', serif;
      font-size: clamp(2rem, 7.5vw, 3rem);
      font-weight: 400;
      line-height: 1.08;
      color: #fff;
      margin: 0;
      text-shadow: 0 2px 20px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.35);
    }
    .section-titulo .titulo-fecha {
      font-family: 'Antic Didone', serif;
      font-style: italic;
      font-size: clamp(1.05rem, 3.8vw, 1.35rem);
      font-weight: 500;
      letter-spacing: 0.28em;
      color: #fff;
      margin: 0.35rem 0 0;
      padding-bottom: 4px;
      text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
    }

    /* ─── Textura full-width debajo de portada ─── */
    .fondo-textura-fullbleed {
      width: 100vw;
      max-width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      position: relative;
      z-index: 1;
      margin-top: clamp(-22px, -5vw, -14px);
      padding-top: clamp(22px, 5vw, 14px);
      padding-bottom: clamp(1.25rem, 4vw, 2.5rem);
      background-color: transparent;
      background-image: none;
    }

    /* ─── Invitación (sobre decorativo) ─── */
    .inv-container {
      position: relative;
      width: 100%;
      max-width: 480px;
      margin: 0 auto clamp(0.5rem, 2vw, 1rem);
      aspect-ratio: 480 / 900;
      background: transparent;
      z-index: 1;
    }
    .inv-container .layer {
      position: absolute;
      width: 100%;
      height: auto;
      top: 0;
      left: 0;
    }

    .slide-up {
      animation: slideUpEffect 3.5s ease-out forwards;
    }
    @keyframes slideUpEffect {
      0% { transform: translateY(50px); opacity: 0; }
      100% { transform: translateY(0); opacity: 1; }
    }

    .inv-container .z1 { z-index: 1; }
    .inv-container .z2 { z-index: 2; }
    .inv-container .z3 { z-index: 3; }
    .inv-container .z4 { z-index: 4; width: 96%; left: 1.5%; }
    .inv-container .z9 { z-index: 9; }
    .inv-container .z10 { z-index: 10; }

    @keyframes flora-back-sway {
      0% { transform: rotate(-5deg) translate3d(-3px, 2px, 0); }
      100% { transform: rotate(5.5deg) translate3d(4px, -5px, 0); }
    }
    .inv-container .flora-back {
      top: -7%;
      width: 40%;
      left: 60%;
      animation: flora-back-sway 6.8s ease-in-out infinite alternate;
      transform-origin: 78% 88%;
      will-change: transform;
    }

    .inv-container .lazo-crema {
      width: 92.2%;
      left: 3.5%;
      top: 26%;
    }

    .inv-container .flor {
      width: 38%;
      left: 28%;
      top: 31%;
      transform: rotate(-65deg);
    }

    .inv-container .sello {
      width: 26%;
      left: 37%;
      top: 38%;
    }

    .inv-container .paper-wrapper {
      position: absolute;
      top: 48%;
      left: 50%;
      width: 79%;
      transform: translateX(-50%);
      z-index: 5;
    }
    .inv-container .paper-img {
      width: 100%;
      filter: drop-shadow(0 9px 15px rgba(0, 0, 0, 0.1));
      display: block;
    }

    .inv-container .content-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 15% 10% 5% 10%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      box-sizing: border-box;
      font-family: 'Antic Didone', serif;
      font-style: italic;
    }

    .inv-container .names-row {
      display: flex;
      align-items: baseline;
      line-height: 1.4;
      margin-bottom: 0;
      font-style: normal;
    }

    .inv-container .txt-small {
      font-size: 2.8vw;
      line-height: 1.3;
      margin-bottom: 4%;
      color: #444;
    }

    .inv-container .section-title {
      font-size: 4.5vw;
      letter-spacing: 3px;
      margin: 3% 0;
      color: #222;
      font-weight: normal;
    }

    .inv-container .blessing {
      font-size: 3.2vw;
      color: var(--dorado-inv, #B76E79);
      margin-bottom: 4%;
    }

    .inv-container .parents-grid {
      display: flex;
      justify-content: center;
      width: 100%;
      margin-top: 2%;
      margin-bottom: 4%;
    }

    .inv-container .col-center p {
      font-size: 3.8vw;
      line-height: 1.4;
      margin-bottom: 4px;
      color: var(--texto-inv, #333);
      font-style: normal;
      font-weight: 400;
    }

    .inv-container .city {
      font-size: 2.5vw;
      letter-spacing: 2px;
      margin-top: 3%;
    }

    .inv-container .names-row-overlay {
      position: absolute;
      top: 63.5%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      text-align: center;
      z-index: 20;
      white-space: nowrap;
      pointer-events: none;
      padding: 15px 0;
    }

    .inv-container .script-full-overlay,
    .inv-container .script-full {
      font-family: 'slight', 'Brush Script MT', cursive;
      font-size: 5.5vw;
      color: var(--dorado-inv, #B76E79);
      line-height: 1.5;
      display: inline-block;
    }

    @media (min-width: 480px) {
      .inv-container .script-full-overlay,
      .inv-container .script-full { font-size: 32px; }
      .inv-container .txt-small { font-size: 13px; margin-bottom: 12px; }
      .inv-container .section-title { font-size: 22px; margin: 12px 0; }
      .inv-container .blessing { font-size: 15px; margin-bottom: 12px; }
      .inv-container .parents-grid { margin-bottom: 12px; margin-top: 8px; }
      .inv-container .col-center p { font-size: 18px; }
      .inv-container .city { font-size: 12px; margin-top: 10px; }
    }

    /* ─── Sección frase ─── */
    .section-frase {
      padding: 40px 30px;
      text-align: center;
      background-color: transparent;
      background-image: none;
    }
    .section-frase h3 {
      font-family: 'Antic Didone', serif;
      font-style: italic; font-size: 18px;
      line-height: 1.5; color: #444; font-weight: 400;
    }

    /* ─── Contenedor único: countdown + itinerario (textura) ─── */
    .bloque-countdown-itinerario-fondo {
      width: 100vw;
      max-width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      position: relative;
      background-color: transparent;
      background-image: none;
    }

    /* Cabecera nombre / Mis XV dentro del bloque countdown + itinerario */
    .cd-itinerario-head {
      width: 100%;
      max-width: 480px;
      margin: 0 auto;
      padding: clamp(1.25rem, 4vw, 1.75rem) 20px clamp(0.75rem, 2vw, 1rem);
      box-sizing: border-box;
    }
    .cd-itinerario-head .maria-post-head-fondo {
      margin: 0;
      padding: 0;
      background: none;
    }

    /* Títulos de sección — Slight (misma tipografía que el nombre en la hoja) */
    .titulo-seccion-slight-wrap {
      text-align: center;
      padding: 0 16px 8px;
      max-width: 100%;
      box-sizing: border-box;
    }
    h2.titulo-seccion-slight {
      font-family: 'slight', 'Brush Script MT', cursive;
      font-size: clamp(2rem, 7vw, 2.85rem);
      font-weight: 400;
      margin: 0;
      color: #222;
      line-height: 1.15;
      white-space: nowrap;
    }
    .section-timeline-heading {
      padding: 10px 20px 18px;
    }

    /* ─── Countdown ─── */
    .section-countdown {
      padding: clamp(1rem, 3vw, 1.5rem) 20px 8px;
      text-align: center;
    }
    .section-countdown .titulo-seccion-slight-wrap {
      margin-bottom: 4px;
    }
    .section-countdown h2.titulo-seccion-slight {
      margin: 0 0 18px;
      color: #333;
    }
    .section-countdown .countdown-wrap {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      gap: 2rem;
    }
    .section-countdown .cd-item {
      text-align: center;
      line-height: 1;
      flex: 0 0 auto;
      width: 50px;
    }
    .section-countdown .cd-number {
      font-family: 'Lustria', serif;
      font-size: 30px;
      color: #616161;
      display: block;
      line-height: 1;
      margin-bottom: 0.2rem;
    }
    .section-countdown .cd-label {
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 14px;
      color: #C9957E;
      text-transform: capitalize;
      letter-spacing: 0.03em;
    }
    .section-countdown .sub-title {
      font-family: 'Antic Didone', serif;
      font-style: italic; font-size: 16px;
      color: #888; margin-top: 16px;
    }
    .btn-calendario {
      display: inline-flex; align-items: center; gap: 8px;
      margin-top: 20px; padding: 10px 24px;
      background: var(--firma-rose, #B76E79); color: #F5F2E9;
      text-decoration: none; font-size: 12px;
      letter-spacing: 1px; text-transform: uppercase;
      border-radius: 4px; font-family: 'Montserrat', sans-serif;
      border: none;
      cursor: pointer;
    }

    .section-countdown .countdown-imagen-wrap {
      margin-top: clamp(1.25rem, 4vw, 2rem);
      padding: 0 16px;
      text-align: center;
    }
    .section-countdown .countdown-imagen {
      width: 100%;
      max-width: 400px;
      height: auto;
      max-height: min(88vh, 640px);
      object-fit: contain;
      display: block;
      margin: 0 auto;
      border-radius: 16px;
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
      vertical-align: middle;
    }

    /* ─── Línea de tiempo ─── */
    .bloque-countdown-itinerario-fondo .section-timeline {
      padding-top: 0;
      padding-bottom: clamp(0.75rem, 3vw, 1.5rem);
    }
    .section-timeline { padding: 20px 0; overflow-x: hidden; }
    .section-timeline .Container { width: 100%; max-width: 100%; margin: 0 auto; padding: 10px; position: relative; }
    .ag-timeline { display: inline-block; width: 100%; max-width: 100%; margin: 0 auto; position: relative; }
    .ag-timeline_item { margin: 0 0 10px; position: relative; min-height: 150px; }
    .ag-timeline_item:nth-child(2n) { text-align: right; }
    .ag-timeline_line {
      width: 4px; background-color: #ffffff;
      position: absolute; top: 2px; left: 50%; bottom: 0;
      transform: translateX(-50%);
      box-shadow: 0 0 5px rgba(0,0,0,.1); border-radius: 2px;
    }
    .ag-timeline_line-progress { width: 100%; height: 20%; background-color: #C9957E; }
    .ag-timeline-card_box {
      padding: 0 0 5px 50%; position: relative; z-index: 2;
      display: flex; align-items: center; min-height: 150px;
    }
    .ag-timeline_item:nth-child(2n) .ag-timeline-card_box { padding: 0 50% 5px 0; justify-content: flex-end; }
    .ag-timeline-card_point-box {
      display: flex; align-items: center;
      margin: 0 14px 0 -4px; z-index: 10; position: relative;
    }
    .ag-timeline_item:nth-child(2n) .ag-timeline-card_point-box { margin: 0 -4px 0 14px; order: 2; }
    .ag-timeline-card_point {
      height: 10px; line-height: 10px; width: 10px;
      border: 3px solid var(--palette-accent-soft, #C49AAC); background-color: var(--palette-accent-soft, #C49AAC);
      text-align: center; font-size: 0; color: transparent;
      border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,.2);
      transition: background-color .5s;
    }
    .js-ag-active .ag-timeline-card_point { background-color: #ffffff; border: 3px solid #1d1d1b; }
    .ag-timeline-card_meta-box { display: block; padding: 0; }
    .ag-timeline_item:nth-child(2n) .ag-timeline-card_meta-box { order: 1; }
    .ag-timeline-card_meta {
      font-family: 'Lustria', serif; font-weight: 700;
      font-size: 22px; color: var(--firma-rose, #B76E79); line-height: 1.2;
    }
    .ag-timeline-card_time {
      font-family: 'Antic Didone', serif; color: var(--firma-rose, #B76E79);
      font-size: 17px; font-weight: 500;
    }
    .ag-timeline-card_item {
      position: absolute; top: 50%; transform: translateY(-50%);
      width: 35%; padding: 10px; border-radius: 20px;
      background-color: rgba(255,255,255,.25);
      backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
      border: 1px solid rgba(255,255,255,.7);
      box-shadow: 0 10px 30px rgba(0,0,0,.1);
      opacity: 0; transition: transform .5s, opacity .5s; z-index: 1;
    }
    .ag-timeline_item:nth-child(2n+1) .ag-timeline-card_item { right: calc(50% + 15px); transform: translateX(-100%) translateY(-50%); }
    .ag-timeline_item:nth-child(2n) .ag-timeline-card_item { left: calc(50% + 15px); transform: translateX(100%) translateY(-50%); }
    .js-ag-active.ag-timeline_item:nth-child(2n+1) .ag-timeline-card_item,
    .js-ag-active.ag-timeline_item:nth-child(2n) .ag-timeline-card_item { opacity: 1; transform: translateX(0) translateY(-50%); }
    .ag-timeline-card_img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }

    /* ─── Bloque frase + foto fecha (fondo rosa pastel, olas arriba y abajo) ─── */
    .section-corazon-banner {
      width: 100vw;
      max-width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      position: relative;
      padding: clamp(3rem, 8vw, 4.25rem) 0 clamp(3rem, 8vw, 4.25rem);
      background: transparent;
      overflow: hidden;
      isolation: isolate;
    }
    .section-corazon-banner::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      background-color: #fdf6f8;
      background-image: url('https://pub-a65601eb9ffe4b62a9bcbf111a23ee8c.r2.dev/invitations/custom-orders/daniela-sofia-xv/fondo-rosa-2.webp');
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: scroll;
      -webkit-clip-path: url(#clip-ola-corazon-banner);
      clip-path: url(#clip-ola-corazon-banner);
      pointer-events: none;
    }

    @media (min-width: 769px) {
      .section-corazon-banner::before { background-attachment: fixed; }
    }

    .corazon-banner-max {
      max-width: min(540px, 94vw);
      margin: 0 auto;
      padding: 0;
      position: relative;
      z-index: 1;
      box-sizing: border-box;
    }
    .frase-corazon-post-hoja {
      position: relative;
      z-index: 12;
      max-width: min(480px, 92vw);
      margin: clamp(4.75rem, 15vw, 6.75rem) auto clamp(0.5rem, 2vw, 1rem);
      padding: clamp(0.75rem, 2.5vw, 1.25rem) clamp(1rem, 4vw, 1.5rem);
      text-align: center;
      box-sizing: border-box;
    }
    .corazon-frase-texto {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-width: 100%;
      margin: 0 auto;
      padding: 0;
      font-family: 'Antic Didone', serif;
      font-style: italic;
      font-size: clamp(0.98rem, 3.75vw, 1.28rem);
      font-weight: 500;
      line-height: 1.48;
      color: #453238;
      text-align: center;
      text-shadow: none;
    }
    .corazon-frase-line {
      display: block;
      width: max-content;
      max-width: 100%;
      margin: 0 auto;
      text-align: center;
      white-space: nowrap;
    }
    .corazon-foto-marco {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
      margin-bottom: 0;
    }
    .corazon-foto-marco img {
      width: 100%;
      height: auto;
      min-height: clamp(320px, 72vw, 520px);
      max-height: min(92vh, 720px);
      object-fit: cover;
      object-position: center 35%;
      display: block;
      vertical-align: middle;
    }
    .corazon-fecha-textos {
      position: absolute;
      left: 50%;
      bottom: clamp(14px, 4.5vw, 32px);
      transform: translateX(-50%);
      width: 92%;
      text-align: center;
      pointer-events: none;
    }
    .corazon-fecha-titulo {
      position: static;
      transform: none;
      width: 100%;
      margin: 0;
      padding: 0 8px;
      box-sizing: border-box;
      font-family: 'Antic Didone', serif;
      font-size: clamp(1.25rem, 5.2vw, 1.75rem);
      font-weight: 600;
      font-style: italic;
      color: #fff;
      text-align: center;
      line-height: 1.25;
      text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.9),
        0 4px 24px rgba(0, 0, 0, 0.65);
    }
    .corazon-hora {
      margin: 0.4rem 0 0;
      text-align: center;
      font-family: 'Antic Didone', serif;
      font-size: clamp(1.1rem, 4.5vw, 1.45rem);
      font-weight: 500;
      font-style: italic;
      color: #fff;
      letter-spacing: 0.08em;
      text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.9),
        0 4px 20px rgba(0, 0, 0, 0.6);
    }

    /* ─── Cabecera + foto (solo foto, centrada sin recorte) ─── */
    .section-maria-post-itinerario {
      width: 100vw;
      max-width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      position: relative;
      padding: 0;
      background: none;
    }
    .maria-post-hero {
      width: 100%;
      min-height: 0;
      background-color: transparent;
      background-image: none;
      display: block;
      padding: 0;
      box-sizing: border-box;
    }
    .maria-post-hero-photo {
      width: 100%;
      max-width: none;
      max-height: none;
      display: block;
      margin: 0;
    }
    .maria-post-hero-img {
      width: 100%;
      max-width: 100%;
      display: block;
      height: auto;
      max-height: min(92vh, 720px);
      object-fit: contain;
      object-position: center center;
      border-radius: 0;
      box-shadow: none;
    }

    /* ─── Ubicación: layout royal + tarjeta flip (estilos acotados a .section-ubicacion) ─── */
    .section-ubicacion {
      padding: 30px 20px;
      width: 100%;
      position: relative;
      background: transparent;
    }

    .section-ubicacion .royal-center-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      min-height: 450px;
    }
    .section-ubicacion .royal-visual-bounds {
      position: relative;
      width: 332px;
      height: 364px;
    }
    .section-ubicacion .royal-container {
      position: absolute;
      right: 0;
      top: 25px;
      width: 249px;
      height: 309px;
    }
    .section-ubicacion .itinerary-plant {
      position: absolute;
      width: 130px;
      z-index: 1;
      left: -33.035%;
      top: 76.5%;
      transform: rotate(205deg);
      pointer-events: none;
    }
    .section-ubicacion .wax-seal {
      position: absolute;
      width: 34%;
      z-index: 10;
      left: -25%;
      top: -8%;
      pointer-events: none;
      filter: drop-shadow(3px 4px 5px rgba(0, 0, 0, 0.4));
    }
    .section-ubicacion .itinerary-flip-card {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 5;
      perspective: 1000px;
      background-color: transparent;
    }
    .section-ubicacion .itinerary-inner {
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 0.8s;
      transform-style: preserve-3d;
      cursor: pointer;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    }
    .section-ubicacion .itinerary-flip-card:hover .itinerary-inner {
      transform: rotateY(180deg);
    }
    .section-ubicacion .itinerary-front,
    .section-ubicacion .itinerary-back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      background-size: cover;
      background-position: center;
    }
    .section-ubicacion .itinerary-front {
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #fff;
      background-image: url('https://pub-a65601eb9ffe4b62a9bcbf111a23ee8c.r2.dev/invitations/custom-orders/daniela-sofia-xv/fodno-3.webp');
    }
    .section-ubicacion .titulo-itinerario {
      font-family: 'slight', 'Brush Script MT', cursive;
      font-size: clamp(1.85rem, 5.5vw, 2.35rem);
      margin: 0;
      white-space: nowrap;
      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
      color: #fff;
    }
    .section-ubicacion .itinerary-back {
      z-index: 1;
      transform: rotateY(180deg);
      padding: 20px 15px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
        url('https://pub-a65601eb9ffe4b62a9bcbf111a23ee8c.r2.dev/invitations/custom-orders/daniela-sofia-xv/2-2.webp');
    }
    .section-ubicacion .itinerary-item {
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      gap: 12px;
    }
    .section-ubicacion .itinerary-item img {
      width: 50px;
    }
    .section-ubicacion .itinerary-text {
      text-align: right;
    }
    .section-ubicacion .itinerary-text h3 {
      font-family: 'Antic Didone', serif;
      font-size: 0.65rem;
      margin: 0;
      text-transform: uppercase;
      color: #1a1a1a;
    }
    .section-ubicacion .itinerary-text p {
      font-family: 'Antic Didone', serif;
      font-style: italic;
      font-size: 0.6rem;
      margin: 4px 0 8px;
      color: #444;
    }
    .section-ubicacion .btn-location {
      display: inline-block;
      padding: 6px 15px;
      border: 1px solid #000;
      text-decoration: none;
      font-size: 0.55rem;
      color: #000;
      text-transform: uppercase;
      letter-spacing: 1px;
      transition: all 0.3s ease;
    }
    .section-ubicacion .btn-location:hover {
      background: #000;
      color: #fff;
    }

    /* ─── Historia ─── */
    .section-historia { padding: 40px 20px; }
    .section-historia .titulo-sec {
      font-family: 'Antic Didone', serif;
      font-size: 11px; letter-spacing: 3px;
      text-transform: uppercase; color: #888;
      text-align: center; margin-bottom: 6px;
    }
    .slideshow-bg {
      width: 100%; min-height: 300px;
      aspect-ratio: 16 / 10;
      background-size: contain; background-position: center;
      background-repeat: no-repeat;
      background-color: #fdf6f8;
      background-image: url('https://pub-a65601eb9ffe4b62a9bcbf111a23ee8c.r2.dev/invitations/custom-orders/daniela-sofia-xv/111-scaled.webp');
      border-radius: 8px; margin-bottom: 20px;
      transition: background-image .5s ease;
    }
    .section-historia p {
      font-family: 'Antic Didone', serif;
      font-size: 16px; line-height: 1.7; color: #555;
      text-align: justify;
    }
    .section-historia p + p { margin-top: 14px; }
    .drop-cap {
      font-size: 52px; float: left; line-height: .8;
      margin-right: 10px; margin-top: 4px; color: #333;
      font-family: 'Lustria', serif;
    }

    /* ─── Me section ─── */
    .me-main-container {
      width: 100%; max-width: 500px;
      margin: 0 auto; padding: 40px 10px;
      display: flex; flex-direction: column;
      align-items: center; text-align: center;
      overflow-x: hidden;
    }
    .me-element { opacity: 0; will-change: transform, opacity; }
    .me-square-frame, .me-description-text { width: 340px; }
    .me-square-frame {
      height: 340px; margin: 25px 0;
      border-radius: 25px; overflow: hidden;
      box-shadow: 0 10px 30px rgba(0,0,0,.05);
      background-color: #fdf6f8;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .me-square-frame img { width: 100%; height: 100%; object-fit: contain; display: block; }
    .me-name-title {
      font-family: 'Lustria', serif; font-size: 38px;
      color: #B76E79; margin: 15px 0; white-space: nowrap; width: 100%;
    }
    .me-description-text {
      font-family: 'Antic Didone', serif; font-size: 17px;
      line-height: 1.6; color: #7A7A7A; margin: 20px 0; text-align: justify;
    }
    @media (max-width: 400px) {
      .me-square-frame, .me-description-text { width: 310px; }
      .me-square-frame { height: 310px; }
      .me-name-title { font-size: 32px; }
    }

    /* ─── Dress code (layout + GSAP); fondo = el del bloque con ubicación ─── */
    .section-dresscode {
      padding: 0;
      overflow: hidden;
      background: transparent;
    }

    .dc-general-wrapper {
      width: 100%;
      max-width: 500px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 30px;
      overflow: hidden;
    }
    .dc-gsap-up, .dc-gsap-left, .dc-gsap-right, .dc-gsap-logo, .dc-gsap-leaf {
      will-change: transform, opacity;
    }
    .dc-top-phrase { text-align: center; width: 90%; margin: 0 auto 10px auto; z-index: 50; }
    .dc-top-phrase p {
      font-family: 'Antic Didone', serif;
      font-size: 18px;
      color: #453238;
      line-height: 1.2;
      margin: 0;
    }
    .dc-canvas-container {
      position: relative;
      width: 100%;
      height: 520px;
      margin: 70px auto 0 auto;
    }
    .dc-leaf-asset { position: absolute; top: 15px; right: -120px; width: 240px; z-index: 1; }
    .card-top-pos { position: absolute; top: -50px; left: -40px; z-index: 5; }
    .dc-logo-asset {
      position: absolute;
      bottom: 30px;
      left: -65px;
      width: 210px;
      z-index: 20;
      pointer-events: none;
      filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.2));
    }
    .card-bottom-pos { position: absolute; bottom: -20px; right: -40px; z-index: 10; }
    .dc-flip-card {
      position: absolute;
      width: 340px;
      height: 225px;
      border-radius: 10px;
      cursor: pointer;
      box-shadow: none;
      overflow: hidden;
      -webkit-mask-image: -webkit-radial-gradient(white, black);
      transform: translateZ(0);
    }
    .dc-flip-inner { position: relative; width: 100%; height: 100%; }
    .dc-flip-front {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 2;
      background-size: cover;
      background-position: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .dc-text-overlay {
      width: 100%;
      padding: 18px 16px;
      text-align: center;
      background: transparent;
    }
    .dc-flip-back {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 1;
      background: #fcfcfc;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .dc-back-content {
      text-align: center;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .dc-gsap-left.active .dc-flip-front { transform: translateX(-100%); }
    .dc-gsap-right.active .dc-flip-front { transform: translateX(100%); }
    .dc-title-style {
      font-family: 'slight', 'Antic Didone', serif;
      font-size: clamp(1.75rem, 7vw, 2.15rem);
      color: var(--firma-rose, #B76E79);
      font-weight: 400;
      margin: 0;
      letter-spacing: 0.04em;
      text-shadow:
        0 0 1px rgba(255, 255, 255, 0.95),
        0 2px 14px rgba(255, 250, 252, 0.9),
        0 1px 3px rgba(74, 48, 58, 0.25);
    }
    .dc-more-link {
      font-family: 'Antic Didone', serif;
      font-size: 0.95rem;
      text-transform: uppercase;
      text-decoration: underline;
      text-underline-offset: 3px;
      color: #000000;
      margin-top: 8px;
      letter-spacing: 0.08em;
      text-shadow:
        0 0 2px rgba(255, 255, 255, 0.95),
        0 1px 8px rgba(255, 250, 252, 0.9);
    }
    .dc-back-main {
      font-family: 'Antic Didone', serif;
      font-size: 28px;
      color: #000;
      margin: 0;
    }
    .dc-back-sub {
      font-family: 'Antic Didone', serif;
      font-size: 15px;
      color: #000;
      line-height: 1.3;
      margin: 0;
    }
    .dc-back-content--texto {
      padding: 12px 18px;
      box-sizing: border-box;
    }
    .dc-back-content--texto .dc-back-main {
      margin-bottom: 10px;
    }
    .dc-back-content--texto .dc-back-sub {
      max-width: 280px;
      line-height: 1.45;
    }
    @media (max-width: 600px) {
      .dc-canvas-container {
        transform: scale(0.75);
        transform-origin: top center;
        height: 400px;
        margin-top: 50px;
      }
    }

    /* ─── Mesa de regalos ─── */
    .section-regalos {
      padding: 24px 16px 40px;
      position: relative;
      overflow-x: visible;
      overflow-y: visible;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: transparent;
      background-image: none;
    }

    @keyframes slideL { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
    @keyframes slideR { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
    .anim-in-left { animation: slideL 1.2s ease-out forwards; }
    .anim-in-right { animation: slideR 1.5s ease-out forwards; }

    .gift-wrap-left {
      position: relative;
      width: 100%;
      max-width: 500px;
      min-height: 700px;
      height: auto;
      margin: 0;
      padding-bottom: clamp(20px, 5vw, 44px);
      text-align: left;
      overflow: hidden;
    }

    .ovalo-fondo-left {
      position: absolute;
      top: 10px;
      left: 15px;
      width: 310px;
      height: 410px;
      background: url('https://pub-a65601eb9ffe4b62a9bcbf111a23ee8c.r2.dev/invitations/custom-orders/daniela-sofia-xv/mesa-fondo-e1773427293825.webp') no-repeat left center / contain;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 3;
      opacity: 1;
    }

    .centrado-interno-texto {
      width: 230px;
      text-align: center;
      font-family: 'Antic Didone', serif;
      color: #000000;
    }

    .gift-wrap-left .title { font-size: 20px; letter-spacing: 2px; font-style: italic; margin-bottom: 10px; color: #000000; font-weight: 600; }
    .gift-wrap-left .intro { font-size: clamp(13px, 3.4vw, 16px); line-height: 1.45; font-style: italic; margin-bottom: 8px; color: #000000; font-weight: 600; }
    .gift-wrap-left .info-banco p { margin: 1px 0; font-size: 10px; text-transform: uppercase; color: #000000; }
    .gift-wrap-left .mail { text-transform: lowercase !important; }

    .gift-wrap-left .divisor-horizontal {
      width: 40px;
      height: 1px;
      background-color: #000000;
      margin: 6px auto 4px;
    }

    .btn-copy-mini {
      display: inline-block;
      padding: 2px 7px;
      background: transparent;
      color: #000000;
      border: 1px solid #000000;
      border-radius: 15px;
      font-size: 7.5px;
      cursor: pointer;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-top: 5px;
      font-family: 'Antic Didone', serif;
    }

    .planta-inferior {
      position: absolute;
      width: 120px;
      top: 360px;
      left: 30px;
      z-index: 1;
      transform: rotate(180deg);
    }

    .foto-wrap {
      position: absolute;
      top: 290px;
      right: 0;
      width: 250px;
      z-index: 2;
      opacity: 1;
    }

    .foto-wrap img {
      width: 100%;
      height: auto;
      max-width: 100%;
      display: block;
      object-fit: contain;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }

    @media (max-width: 500px) {
      .gift-wrap-left { min-height: 550px; }
      .ovalo-fondo-left { width: 280px; height: 370px; left: 5px; }
      .centrado-interno-texto { width: 190px; }
      .planta-inferior { width: 100px; top: 320px; left: 15px; }
      .foto-wrap { width: 200px; top: 270px; }
    }

    /* ─── Separador cinta / sello (antes de RSVP, ancho pantalla) ─── */
    .elegant-separator {
      position: relative;
      width: 100vw;
      max-width: none;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      height: 160px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      background-color: transparent;
      margin-top: 0;
      margin-bottom: 0;
      overflow: hidden;
      flex-shrink: 0;
    }

    .fan-band {
      position: absolute;
      width: 110%;
      left: -5%;
      height: 45px;
      background: linear-gradient(90deg, rgba(183, 110, 121, 0.35) 0%, #E8B4C4 45%, #E8B4C4 55%, rgba(183, 110, 121, 0.35) 100%);
      transform-origin: center center;
      will-change: transform, opacity;
    }
    .fan-top-2 { transform: rotate(6deg); z-index: 1; opacity: 0.25; }
    .fan-top-1 { transform: rotate(3deg); z-index: 2; opacity: 0.5; }
    .fan-bottom-2 { transform: rotate(-6deg); z-index: 1; opacity: 0.25; }
    .fan-bottom-1 { transform: rotate(-3deg); z-index: 2; opacity: 0.5; }

    .ribbon-main-aligned {
      position: absolute;
      width: 92%;
      max-width: 1200px;
      height: 55px;
      z-index: 5;
      background: linear-gradient(90deg, #9A6B7A 0%, #B76E79 14%, #E8B4C4 42%, #FAD6E4 50%, #E8B4C4 58%, #B76E79 86%, #9A6B7A 100%);
      clip-path: polygon(0 0, 100% 0, calc(100% - 30px) 50%, 100% 100%, 0 100%, 30px 50%);
      transform-origin: center center;
      will-change: transform, opacity;
    }

    .ribbon-fold-3d {
      position: absolute;
      width: 70px;
      height: 65px;
      background: linear-gradient(145deg, #FAD6E4 0%, #E8B4C4 45%, #B76E79 100%);
      border-radius: 5px;
      z-index: 6;
      will-change: transform, opacity;
    }
    .ribbon-fold-3d.left { transform: translateX(-65px) perspective(150px) rotateY(25deg); }
    .ribbon-fold-3d.right { transform: translateX(65px) perspective(150px) rotateY(-25deg); }

    .bow-seal {
      position: relative;
      width: 115px;
      z-index: 10;
      cursor: pointer;
      will-change: transform, opacity;
    }

    .fade-in { opacity: 1; transform: none; transition: none; }
    .fade-in.visible { opacity: 1; transform: none; }

    .post-separator-photo {
      width: 100%;
      max-width: 480px;
      margin: 0 auto;
      padding: 0 16px 12px;
      box-sizing: border-box;
    }
    .post-separator-photo img {
      width: 100%;
      height: auto;
      max-height: none;
      object-fit: contain;
      object-position: center center;
      border-radius: 18px;
      display: block;
    }

    /* ─── RSVP (sobre / carta) ─── */
    .rsvp-caps-title {
      text-align: center;
      font-family: 'Antic Didone', serif;
      font-size: 1.35rem;
      font-weight: 400;
      letter-spacing: 0.42em;
      color: #333;
      margin: 32px 0 6px;
      text-transform: uppercase;
      width: 100%;
      max-width: 500px;
    }

    .royal-inv-main-wrapper {
      all: initial;
      display: block;
      width: 100%;
      --r-dorado: #B76E79;
      --r-texto: #333;
      --r-verde: #B76E79;
    }

    .royal-inv-container {
      position: relative;
      width: 100%;
      max-width: 480px;
      margin: 0 auto;
      min-height: 850px;
      height: auto;
      background: transparent !important;
      display: block;
      overflow: visible;
      font-family: 'Antic Didone', serif;
    }

    .royal-inv-layer { position: absolute; width: 100%; height: auto; top: 0; left: 0; pointer-events: none; }
    .royal-inv-z1 { z-index: 1; }
    .royal-inv-z8 { z-index: 8; }
    .royal-inv-z9 { z-index: 9; }
    .royal-inv-z10 { z-index: 10; }

    .royal-inv-lazo { top: 6%; width: 55%; left: 50%; transform: translateX(-20%) rotate(-40deg); }
    .royal-inv-sello { width: 22%; left: 38%; top: 12%; pointer-events: auto; }
    .royal-inv-plantita { width: 22%; top: 10%; left: 45%; transform: translateX(-50%) scaleX(-1); }

    .royal-inv-paper-wrapper {
      position: relative;
      top: 180px;
      left: 50%;
      width: 76%;
      transform: translateX(-50%);
      z-index: 5;
      display: flex;
      flex-direction: column;
      background-image: url('https://pub-a65601eb9ffe4b62a9bcbf111a23ee8c.r2.dev/invitations/custom-orders/daniela-sofia-xv/dsf-1.webp');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      filter: drop-shadow(0 9px 15px rgba(0, 0, 0, 0.1));
    }

    .royal-inv-content-overlay {
      position: relative;
      width: 100%;
      padding: 50px 25px;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
    }

    .royal-inv-form-inner { width: 100%; text-align: left; }
    .royal-inv-form-header { text-align: center; margin-bottom: 15px; }
    .royal-inv-form-title { font-style: italic; font-weight: normal; font-size: 24px; margin: 0 0 5px 0; color: var(--r-texto); }
    .royal-inv-form-subtitle { font-size: 12px; color: #555; margin: 0; line-height: 1.2; }

    .royal-inv-form-group { margin-bottom: 10px; }
    .royal-inv-form-group label {
      display: block;
      font-weight: bold;
      font-size: 11px;
      margin-bottom: 3px;
      text-transform: uppercase;
      color: var(--r-texto);
      letter-spacing: 0.5px;
    }

    .royal-inv-form-input {
      width: 100% !important;
      padding: 8px !important;
      border: 1px solid rgba(0, 0, 0, 0.15) !important;
      background: rgba(255, 255, 255, 0.4) !important;
      box-sizing: border-box !important;
      font-family: 'Antic Didone', serif !important;
      font-size: 14px !important;
      border-radius: 4px !important;
      margin: 0 !important;
    }

    .royal-inv-disabled { background-color: rgba(0, 0, 0, 0.05) !important; color: #777; cursor: not-allowed; }
    .royal-inv-textarea { height: 50px !important; resize: none !important; }
    .royal-inv-form-help { font-size: 11px; color: #666; font-style: italic; margin-top: 3px; margin-bottom: 0; }

    .royal-inv-submit-btn {
      width: 100%;
      background: var(--r-verde);
      color: white;
      padding: 12px;
      border: none;
      cursor: pointer;
      font-size: 13px;
      font-weight: bold;
      letter-spacing: 1px;
      border-radius: 4px;
      margin-top: 10px;
      font-family: 'Antic Didone', serif;
    }

    .royal-inv-success {
      text-align: center;
      padding: 40px 16px;
      font-family: 'Antic Didone', serif;
    }
    .royal-inv-success h2 {
      font-style: italic;
      font-weight: normal;
      color: var(--r-dorado);
      font-size: 26px;
      margin: 0 0 12px;
    }
    .royal-inv-success p { color: #555; font-size: 15px; margin: 0; line-height: 1.4; }

    @media (max-width: 480px) {
      .royal-inv-container { min-height: 850px; }
      .royal-inv-paper-wrapper {
        top: 160px;
        width: 82%;
      }
      .royal-inv-content-overlay { padding: 40px 20px; }
    }

    /* ─── Foto compartir ─── */
    .section-foto {
      padding: 30px 20px;
      text-align: center;
      background-color: transparent;
      background-image: none;
    }
    .foto-post-formulario {
      display: block;
      width: 100%;
      max-width: min(360px, 92vw);
      height: auto;
      max-height: min(88vh, 720px);
      object-fit: contain;
      margin: 0 auto 1.5rem;
      border-radius: 14px;
      box-shadow: 0 12px 36px rgba(74, 48, 58, 0.15);
    }

    .section-foto h2 { font-family: 'Antic Didone', serif; font-size: 20px; font-weight: 400; color: #333; margin-bottom: 8px; }
    .section-foto .hashtag {
      font-family: 'Lustria', serif; font-size: 22px;
      color: var(--firma-rose, #B76E79); margin: 10px 0;
    }
    .section-foto p { font-family: 'Antic Didone', serif; font-size: 14px; color: #888; line-height: 1.5; margin-bottom: 16px; }
    .btn-fotos {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 12px 28px; background: var(--firma-rose, #B76E79); color: #F5F2E9;
      text-decoration: none; font-size: 12px; letter-spacing: 1px;
      text-transform: uppercase; border-radius: 6px;
      font-family: 'Montserrat', sans-serif;
    }

    /* ─── Collage contacto (debajo de Subir fotos) ─── */
    .collage-master {
      position: relative;
      width: 100%;
      max-width: 500px;
      aspect-ratio: 9 / 14;
      margin: 28px auto 0;
      padding: 20px;
    }

    .collage-layer {
      position: absolute;
      transition: all 0.3s ease;
    }

    .collage-master .img-fluid {
      width: 100%;
      height: auto;
      display: block;
      filter: drop-shadow(5px 10px 15px rgba(0, 0, 0, 0.1));
    }

    .layer-monogram .img-fluid {
      filter: none;
    }

    .layer-monogram {
      width: 48%;
      top: 0%;
      left: 0%;
      z-index: 3;
    }

    .layer-couple {
      width: 70%;
      top: 22%;
      left: 18%;
      z-index: 2;
    }

    .layer-flipbox {
      width: 45%;
      bottom: -7%;
      right: 1%;
      z-index: 4;
    }

    .collage-master .flip-card {
      width: 100%;
      aspect-ratio: 190 / 209;
      perspective: 1000px;
    }

    .collage-master .flip-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 0.8s;
      transform-style: preserve-3d;
    }

    .collage-master .flip-card:hover .flip-card-inner {
      transform: rotateY(180deg);
    }

    .collage-master .flip-card-front,
    .collage-master .flip-card-back {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 6px;
      overflow: hidden;
    }

    .collage-master .flip-card-front {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #ffffff;
    }

    .collage-master .flip-card-front img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
    }

    .collage-master .front-text {
      position: relative;
      z-index: 1;
      text-align: center;
      width: 100%;
      padding: 0 8px;
      box-sizing: border-box;
    }

    .collage-master .royal-premium {
      font-family: 'antic Didone', cursive !important;
      font-size: 1.6rem !important;
      color: #000 !important;
      margin: 0;
    }

    .collage-master .antic-didone-front {
      font-family: 'Antic Didone', serif !important;
      font-size: 0.7rem !important;
      text-decoration: underline;
      color: #000;
      margin-top: 2px;
    }

    .collage-master .flip-card-back {
      background-color: #ffffff;
      background-image: none;
      display: flex;
      justify-content: center;
      align-items: center;
      transform: rotateY(180deg);
      border: none;
    }

    .collage-master .back-buttons {
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
      max-width: 100%;
      padding: 0 12px;
      box-sizing: border-box;
    }

    .collage-master .back-buttons a {
      padding: 9px 14px;
      background-color: rgba(255, 255, 255, 0.88);
      color: #7a5560;
      text-decoration: none;
      border: 1px solid rgba(183, 110, 121, 0.28);
      font-size: clamp(10px, 2.5vw, 11px);
      font-family: 'Antic Didone', serif !important;
      font-weight: 400;
      font-style: italic;
      line-height: 1.3;
      text-align: center;
      border-radius: 24px;
      letter-spacing: 0.05em;
      transition: background-color 0.25s ease, color 0.25s ease;
    }
    .collage-master .back-buttons a:hover {
      background-color: rgba(250, 214, 228, 0.55);
      color: #5a3a42;
    }

    @media (max-width: 400px) {
      .collage-master .royal-premium { font-size: 1.3rem !important; }
      .collage-master .back-buttons a { font-size: 9px; padding: 8px 10px; }
    }

    /* ─── Galería ─── */
    .section-galeria {
      padding: 20px 0;
      background-color: transparent;
      background-image: none;
    }
    .galeria-titulo { text-align: center; padding: 0 20px 20px; }
    .galeria-titulo .titulo-seccion-slight {
      color: #333;
      margin-bottom: 6px;
    }
    .galeria-titulo p { font-size: 13px; color: #888; font-family: 'Antic Didone', serif; font-style: italic; }
    #galeria-vj {
      width: 100%; height: 400px;
      position: relative; overflow: hidden;
      background-color: #1a1a1a;
    }
    #wrapper-vj {
      width: 100%; height: 100%; display: flex;
      background-size: cover; background-position: center;
      background-image: url('https://pub-a65601eb9ffe4b62a9bcbf111a23ee8c.r2.dev/invitations/custom-orders/daniela-sofia-xv/WhatsApp-Image-2026-05-08-at-23.32.37-scaled.webp');
    }
    .col-vj {
      flex: 1; height: 100%; cursor: pointer;
      border-right: 1px solid rgba(255,255,255,.1); z-index: 2;
    }
    .col-vj:last-child { border-right: none; }
    .col-vj:hover { background: rgba(255,255,255,.05); }

    /* ─── Contacto / cierre ─── */
    .section-cierre {
      padding: 40px 20px 60px;
      text-align: center;
      background-color: transparent;
      background-image: none;
    }
    .section-cierre h2 {
      font-family: 'Antic Didone', serif; font-size: 20px;
      font-weight: 400; font-style: italic; color: #555;
      line-height: 1.5; margin-bottom: 16px;
    }
    .section-cierre .firma {
      font-family: 'slight', 'Antic Didone', serif;
      font-size: clamp(1.75rem, 6vw, 2.25rem);
      font-weight: 400;
      color: var(--firma-rose, #B76E79);
      letter-spacing: 0.06em;
    }

    /* defs para clip-path de la portada (no visible en pantalla) */
    .svg-clip-defs {
      position: absolute;
      width: 0;
      height: 0;
      overflow: hidden;
    }

    /* ─── Divisor ─── */
    .wave-divider { width: 100%; overflow: hidden; line-height: 0; }
    .wave-divider svg { display: block; }
    .wave-divider .elementor-shape-fill { fill: currentColor; }

    /* Un bloque: ubicación + dress + versículo + mesa (fondo solo hasta arriba del lazo) */
    .bloque-ubicacion-dress-regalos {
      width: 100%;
      position: relative;
      background: transparent;
    }

    /* Fondo papel: solo hasta antes del lazo; la mitad superior del lazo repite la textura vía .separador-lazo-fondo-mitad::before */
    .bloque-fondo-ubicacion-tile {
      position: relative;
      width: 100vw;
      max-width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      background-color: #f5e8ea;
      background-image: url('https://pub-a65601eb9ffe4b62a9bcbf111a23ee8c.r2.dev/invitations/custom-orders/daniela-sofia-xv/fondo-nuevo-scaled.webp');
      background-size: 100% auto;
      background-repeat: repeat-y;
      background-position: center top;
      background-attachment: scroll;
    }

    /* Mitad superior del lazo = mismo fondo papel; mitad inferior = fondo general (body) */
    .separador-lazo-fondo-mitad {
      position: relative;
      width: 100vw;
      max-width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      overflow: hidden;
      flex-shrink: 0;
      padding-top: clamp(18px, 4.5vw, 36px);
    }
    .separador-lazo-fondo-mitad::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 50%;
      z-index: 0;
      pointer-events: none;
      background-color: #f5e8ea;
      background-image: url('https://pub-a65601eb9ffe4b62a9bcbf111a23ee8c.r2.dev/invitations/custom-orders/daniela-sofia-xv/fondo-nuevo-scaled.webp');
      background-size: 100% auto;
      background-repeat: repeat-y;
      background-position: center top;
    }
    .separador-lazo-fondo-mitad .elegant-separator {
      width: 100%;
      max-width: none;
      margin-left: 0;
      margin-right: 0;
      position: relative;
      z-index: 2;
    }

    .section-regalos--post-lazo {
      padding-top: clamp(10px, 3vw, 22px);
    }
    .frase-biblica-regalos {
      max-width: 500px;
      margin: 0 auto;
      padding: clamp(1.25rem, 4vw, 2rem) 20px clamp(0.5rem, 2vw, 1rem);
      text-align: center;
      border: none;
    }
    .frase-biblica-regalos p {
      font-family: 'Antic Didone', serif;
      font-style: italic;
      font-size: clamp(1rem, 3.8vw, 1.2rem);
      line-height: 1.55;
      color: #453238;
      margin: 0;
    }
    .frase-biblica-regalos cite {
      display: block;
      margin-top: 0.65rem;
      font-family: 'Montserrat', sans-serif;
      font-style: normal;
      font-size: 0.7rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #888;
    }

    /* ─── Separador doble línea (ancho contenido, no full bleed) ─── */
    .sep-doble-wrap {
      max-width: min(320px, 88%);
      margin-left: auto;
      margin-right: auto;
      padding: 0 24px;
    }
    .sep-doble {
      height: 10px;
      border: none;
      margin: 0;
      position: relative;
      background: transparent;
    }
    .sep-doble::before,
    .sep-doble::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      height: 1px;
      background: rgba(0, 0, 0, 0.22);
    }
    .sep-doble::before { top: 2px; }
    .sep-doble::after { bottom: 2px; }

    /* ─── Nombre invitado ─── */
    #invitacion {
      padding: 5px 0;
      width: 100%;
      max-width: 400px;
      margin: 0 auto;
      text-align: center;
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
      color: #020101;
      font-family: 'Antic Didone', serif;
      font-style: italic;
    }
    #invitacion.visible { display: block; opacity: 1; }
    #nombreInvitado {
      margin: 0;
      font-size: 4vw;
      line-height: 1.2;
      max-width: 100%;
      display: block;
      text-align: center;
      text-transform: uppercase;
      word-break: normal;
    }
    #pasesInvitado {
      margin: 10px 0 0 0;
      font-size: 3.5vw;
      text-align: center;
    }
    .bloque-nombre { display: inline-block; white-space: nowrap; }
    @media (min-width: 768px) {
      #invitacion { max-width: 600px; }
      #nombreInvitado { font-size: 3vw; }
      #pasesInvitado { font-size: 2.5vw; }
    }
    .hidden { display: none; }

    /* ─── Separadores decorativos ─── */
    .sep { border: none; border-top: 1px solid rgba(0,0,0,.08); margin: 0 30px; }
    .sep-dorado { border: none; border-top: 1px solid #C9957E; opacity: .5; margin: 0 40px; }

    /* ─── Legibilidad general (adultos) ─── */
    body { -webkit-font-smoothing: antialiased; }
    .section-frase h3,
    .inv-container .txt-small,
    .inv-container .blessing,
    .inv-container .section-title,
    .section-corazon-banner .corazon-frase-texto,
    .frase-corazon-post-hoja .corazon-frase-texto,
    .section-corazon-banner .corazon-fecha-titulo,
    .section-foto p,
    .section-foto h2,
    .section-cierre h2,
    .frase-biblica-regalos p,
    .dc-top-phrase p,
    .dc-back-sub,
    .royal-inv-form-subtitle,
    .section-ubicacion .itinerary-text p,
    .section-ubicacion .itinerary-text h3,
    .ag-timeline-card_meta,
    .ag-timeline-card_time {
      font-weight: 500;
    }
    .inv-container .txt-small { color: #333; }
    .section-frase h3 { font-size: clamp(1.05rem, 4vw, 1.25rem); color: #333; }
    .section-countdown .sub-title { font-size: 17px; font-weight: 500; }
    .section-countdown .cd-label { font-size: 15px; }
    .section-foto p { font-size: 15px; color: #666; }
    .galeria-titulo p { font-weight: 500; }