:root {
      --ribbonbow_z: 99990;
      --ribbonbow_ease: cubic-bezier(0.33, 1, 0.36, 1);
      --ribbonbow_ease_rebote: cubic-bezier(0.34, 1.45, 0.64, 1);
      --ribbonbow_dur_entrada: 1.1s;
      --ribbonbow_dur_fondo: 0.5s;
      --ribbonbow_dur_salida: 0.45s;

      --ribbonbow_color_marco: var(--c_1);
      --ribbonbow_color_tarjeta: #faf8f6;
      --ribbonbow_marco_dorado: #c9a227;
      --ribbonbow_marco_dorado_grosor: 5px;

      /* Texto: una variable por línea */
      --ribbonbow_color_texto_familia: #2c1810;
      --ribbonbow_color_texto_invitacion: #3d2418;
      --ribbonbow_color_texto_nombres: #2c1810;

      /* Tinte del PNG del moño (transparent = sin tinte). Misma URL que el <img>. */
      --ribbonbow_url_cinta: url("../recursos/sobres/ribbonrow.png");
      --ribbonbow_tinte_cinta: var(--c_1);
      --ribbonbow_tinte_modo_cinta: multiply;

      /* Corazón SVG: borde (color independiente del fondo de la tarjeta si quieres) */
      --ribbonbow_corazon_tam: min(42vw, 140px);
      --ribbonbow_corazon_dur_anim: 3.2s;
      --ribbonbow_corazon_borde_grosor: 5;
      --ribbonbow_corazon_borde_color: #c9a227;

      --ribbonbow_tarjeta_ancho: min(88vw, 600px);
      --ribbonbow_tarjeta_alto: min(78vh, 740px);
      --ribbonbow_tarjeta_radio: 6px;
      --ribbonbow_tarjeta_sombra:
        0 4px 0 rgba(0, 0, 0, 0.06) inset,
        0 20px 50px rgba(0, 0, 0, 0.28);

      --ribbonbow_cinta_posicion_vertical: 85%;
      --ribbonbow_cinta_ancho: 100%;
      --ribbonbow_cinta_max_altura: min(38vmin, 200px);

      /* Destello / brillo sobre el moño (PNG) */
      --ribbonbow_destello_dur: 3s;
    }

    .ribbonbow_padre {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      min-height: 100dvh;
      z-index: var(--ribbonbow_z);
      overflow: hidden;
      pointer-events: auto;
      isolation: isolate;
    }

    .ribbonbow_fondo {
      position: absolute;
      inset: 0;
      z-index: 0;
      background: var(--ribbonbow_color_marco);
      opacity: 0;
      animation: ribbonbow_fondo_entra var(--ribbonbow_dur_fondo) var(--ribbonbow_ease) forwards;
    }

    .ribbonbow_escena {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      min-height: 100dvh;
      padding: clamp(0.75rem, 4vw, 1.5rem);
      box-sizing: border-box;
      pointer-events: none;
    }

    .ribbonbow_tarjeta {
      position: relative;
      width: var(--ribbonbow_tarjeta_ancho);
      flex-shrink: 0;
      animation: ribbonbow_tarjeta_entra var(--ribbonbow_dur_entrada) var(--ribbonbow_ease_rebote) 0.06s both;
      will-change: opacity, transform;
    }

    .ribbonbow_tarjeta_blanca {
      width: 100%;
      height: var(--ribbonbow_tarjeta_alto);
      border-radius: var(--ribbonbow_tarjeta_radio);
      background: var(--ribbonbow_color_tarjeta);
      box-shadow: var(--ribbonbow_tarjeta_sombra);
      box-sizing: border-box;
      padding: clamp(0.5rem, 2vw, 0.75rem);
    }

    .ribbonbow_tarjeta_marco_dorado {
      height: 100%;
      box-sizing: border-box;
      border: var(--ribbonbow_marco_dorado_grosor) solid var(--ribbonbow_marco_dorado);
      border-radius: calc(var(--ribbonbow_tarjeta_radio) - 3px);
      padding: clamp(0.85rem, 3.2vw, 1.35rem) clamp(0.75rem, 2.8vw, 1.1rem);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      justify-content: flex-start;
      overflow-y: auto;
    }

    .ribbonbow_texto {
      margin: 0;
      max-width: 100%;
    }


    .ribbonbow_texto_invitacion {
      font-family: var(--f_FF1);
      font-size: clamp(1.8, 5.6vw, 2.1rem);
      font-weight: 500;
      font-style: italic;
      line-height: 1.4;
      margin-top: 5rem;
      color: var(--ribbonbow_color_texto_invitacion);
    }

    .ribbonbow_texto_nombres {
      font-family: var(--f_FFEspecial);
      font-size: clamp(3.5rem, 14vw, 5rem);
      font-weight: 400;
      line-height: 1.2;
      margin-top: 0.5rem;
			margin-bottom: 3rem;
      color: var(--ribbonbow_color_texto_nombres);
    }

    /* Foto novios: corazón real vía SVG (clipPath + trazo borde) */
    .ribbonbow_corazon {
      position: relative;
      width: var(--ribbonbow_corazon_tam);
      height: var(--ribbonbow_corazon_tam);
      margin-top: 0.75rem;
      flex-shrink: 0;
      animation: ribbonbow_corazon_vivo var(--ribbonbow_corazon_dur_anim) ease-in-out infinite;
      will-change: transform, filter;
    }

    .ribbonbow_corazon_svg {
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
    }

    .ribbonbow_corazon_img {
      width: 100%;
      height: 100%;
    }

    .ribbonbow_corazon_borde_path {
      stroke: var(--ribbonbow_corazon_borde_color);
      stroke-width: var(--ribbonbow_corazon_borde_grosor);
      pointer-events: none;
    }

    .ribbonbow_acciones {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 0.4rem 0.55rem;
      margin-top: 0.65rem;
      padding-top: 0.45rem;
      width: 100%;
      pointer-events: auto;
			z-index: 1000 !important;
    }

    .ribbonbow_btn {
      font-family: var(--f_FF1);
      font-size: 2.6rem;
      font-style: italic;
      font-weight: 500;
      padding: 0.38em 0.75em;
      margin: 0;
      border: 1px solid rgba(44, 24, 16, 0.2);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.4);
      color: var(--ribbonbow_color_texto_invitacion);
      cursor: pointer;
      transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
      -webkit-tap-highlight-color: transparent;
      pointer-events: auto;
    }

    .ribbonbow_btn:hover {
      border-color: rgba(44, 24, 16, 0.32);
      color: rgba(44, 24, 16, 0.88);
      background: rgba(255, 255, 255, 0.62);
    }

    .ribbonbow_btn:active {
      border-color: rgba(44, 24, 16, 0.38);
    }

    .ribbonbow_btn:focus-visible {
      outline: 2px solid rgba(201, 162, 39, 0.55);
      outline-offset: 2px;
    }

    @media (max-width: 26rem) {
      .ribbonbow_acciones {
        flex-direction: column;
        gap: 0.45rem;
      }

      /*.ribbonbow_btn {
        width: 100%;
        max-width: 30rem;
      }*/
    }

    @keyframes ribbonbow_corazon_vivo {
      0%,
      100% {
        transform: translateY(0) scale(1);
        filter: drop-shadow(0 5px 14px rgba(0, 0, 0, 0.14));
      }
      45% {
        transform: translateY(-6px) scale(1.03);
        filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.2));
      }
      55% {
        transform: translateY(-4px) scale(1.025);
        filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.18));
      }
    }

    /* Cinta + tinte (mask = misma silueta que el PNG) */
    .ribbonbow_cinta {
      position: absolute;
      left: 50%;
      top: var(--ribbonbow_cinta_posicion_vertical);
      transform: translate(-50%, -50%);
      width: var(--ribbonbow_cinta_ancho);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
      pointer-events: none;
      will-change: opacity, transform;
    }

    .ribbonbow_cinta_fig {
      position: relative;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      animation: ribbonbow_cinta_entra var(--ribbonbow_dur_entrada) var(--ribbonbow_ease_rebote) 0.18s both;
    }

    /* Destello elegante: franja clara que cruza el moño (misma máscara que el PNG) */
    .ribbonbow_cinta_fig::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
      -webkit-mask-image: var(--ribbonbow_url_cinta);
      mask-image: var(--ribbonbow_url_cinta);
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-position: center;
      background: linear-gradient(
        118deg,
        transparent 0%,
        transparent 42%,
        rgba(255, 255, 255, 0.15) 46%,
        rgba(255, 252, 245, 0.95) 50%,
        rgba(255, 255, 255, 0.2) 54%,
        transparent 58%,
        transparent 100%
      );
      background-size: 220% 100%;
      background-position: 0% 0;
      mix-blend-mode: soft-light;
      animation: ribbonbow_moño_destello var(--ribbonbow_destello_dur) ease-in-out infinite;
    }

    .ribbonbow_cinta_fig::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      background: var(--ribbonbow_tinte_cinta);
      mix-blend-mode: var(--ribbonbow_tinte_modo_cinta);
      -webkit-mask-image: var(--ribbonbow_url_cinta);
      mask-image: var(--ribbonbow_url_cinta);
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-position: center;
    }

    @keyframes ribbonbow_moño_destello {
      0% {
        background-position: -120% 0;
        opacity: 0.65;
      }
      40% {
        opacity: 1;
      }
      100% {
        background-position: 120% 0;
        opacity: 0.65;
      }
    }

    .ribbonbow_img {
      position: relative;
      z-index: 0;
      display: block;
      width: 100%;
      height: auto;
      object-fit: contain;
      object-position: center center;
      transform-origin: center center;
      filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.18));
    }

    @keyframes ribbonbow_fondo_entra {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    @keyframes ribbonbow_tarjeta_entra {
      from {
        opacity: 0;
        transform: scale(0.92) translateY(20px);
      }
      65% {
        opacity: 1;
        transform: scale(1.02) translateY(0);
      }
      to {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    @keyframes ribbonbow_cinta_entra {
      from {
        opacity: 0;
        transform: scale(0.88);
      }
      70% {
        opacity: 1;
        transform: scale(1.03);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    .ribbonbow_padre.ribbonbow_padre--cerrando .ribbonbow_fondo {
      animation: ribbonbow_fondo_sale var(--ribbonbow_dur_salida) ease forwards;
    }

    .ribbonbow_padre.ribbonbow_padre--cerrando .ribbonbow_tarjeta {
      animation: ribbonbow_tarjeta_sale var(--ribbonbow_dur_salida) var(--ribbonbow_ease) forwards;
    }

    .ribbonbow_padre.ribbonbow_padre--cerrando .ribbonbow_cinta_fig {
      animation: ribbonbow_cinta_sale var(--ribbonbow_dur_salida) var(--ribbonbow_ease) forwards;
    }

    @keyframes ribbonbow_fondo_sale {
      to {
        opacity: 0;
      }
    }

    @keyframes ribbonbow_tarjeta_sale {
      to {
        opacity: 0;
        transform: scale(0.96) translateY(12px);
      }
    }

    @keyframes ribbonbow_cinta_sale {
      to {
        opacity: 0;
        transform: scale(0.94);
      }
    }

    .ribbonbow_padre.ribbonbow_padre--oculto {
      visibility: hidden;
      pointer-events: none !important;
    }

    .ribbonbow_padre.ribbonbow_padre--oculto .ribbonbow_fondo {
      cursor: default;
    }
				
		@media (max-width: 600px) {
			
      .ribbonbow_btn{
				font-size: 4rem;
				
				}
			.ribbonbow_texto_invitacion{
				font-size: 6rem;
			}
			.ribbonbow_texto_nombres{
			 font-size: 7rem;	
			}
			}
    @media (prefers-reduced-motion: reduce) {
      .ribbonbow_fondo {
        animation: none;
        opacity: 1;
      }

      .ribbonbow_tarjeta {
        animation: none;
        opacity: 1;
        transform: none;
      }

      .ribbonbow_cinta_fig {
        animation: none;
        opacity: 1;
        transform: none;
        filter: none;
      }

      .ribbonbow_cinta_fig::before {
        animation: none;
        opacity: 0;
      }

      .ribbonbow_corazon {
        animation: none;
        transform: none;
        filter: drop-shadow(0 5px 14px rgba(0, 0, 0, 0.14));
      }

      .ribbonbow_padre.ribbonbow_padre--cerrando .ribbonbow_fondo,
      .ribbonbow_padre.ribbonbow_padre--cerrando .ribbonbow_tarjeta,
      .ribbonbow_padre.ribbonbow_padre--cerrando .ribbonbow_cinta_fig {
        animation: none;
        opacity: 0;
      }
    }