/* V61 · Navegación móvil inmersiva, configurable y progresiva */
.mobile-section-nav{display:none}.mobile-section-nav[hidden],.mobile-back-top[hidden]{display:none!important}
@media(max-width:760px){
  #content{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  .mobile-section-nav{
    --invite-progress:0%;position:fixed;z-index:45;right:9px;bottom:max(7px,env(safe-area-inset-bottom));left:9px;
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:center;
    width:min(502px,calc(100% - 18px));min-height:57px;margin-inline:auto;padding:4px;
    overflow:hidden;border:1px solid color-mix(in srgb,var(--accent-color) 44%,#fff 13%);border-radius:18px;
    background:linear-gradient(150deg,color-mix(in srgb,var(--page-color) 88%,#fff 5%),color-mix(in srgb,var(--page-color) 89%,#000 11%));
    box-shadow:0 13px 36px #0007,0 2px 7px #0004,inset 0 1px #ffffff20;
    backdrop-filter:blur(20px) saturate(1.18);-webkit-backdrop-filter:blur(20px) saturate(1.18);
    transition:opacity .28s ease,transform .32s cubic-bezier(.2,.7,.25,1);
  }
  .mobile-section-nav:before{content:"";position:absolute;z-index:3;top:0;left:0;width:100%;height:2px;background:color-mix(in srgb,var(--accent-color) 18%,transparent)}
  .mobile-section-nav:after{content:"";position:absolute;z-index:4;top:0;left:0;width:var(--invite-progress);height:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--accent-color) 72%,#fff),var(--accent-color));box-shadow:0 0 9px var(--accent-color);transition:width .12s linear}
  .mobile-section-nav button{
    position:relative;display:flex;min-width:0;min-height:47px;padding:3px 2px;border:0;border-radius:13px;
    flex-direction:column;align-items:center;justify-content:center;gap:2px;
    color:var(--page-text);background:transparent;cursor:pointer;touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;transition:background .2s ease,color .2s ease,transform .2s ease;
  }
  .mobile-section-nav button+button:before{content:"";position:absolute;left:0;top:13px;bottom:13px;width:1px;background:color-mix(in srgb,var(--accent-color) 18%,transparent)}
  .mobile-section-nav button>span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;color:var(--accent-color);font:700 18px/1 Georgia,serif;transition:.2s ease}
  .mobile-section-nav button>small{max-width:100%;overflow:hidden;color:inherit;font:700 7.5px/1.05 Arial,sans-serif;letter-spacing:.15px;text-overflow:ellipsis;white-space:nowrap;opacity:.78}
  .mobile-section-nav button[aria-current="true"]{color:var(--accent-color);background:color-mix(in srgb,var(--accent-color) 9%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent-color) 14%,transparent)}
  .mobile-section-nav button[aria-current="true"]>span{width:30px;height:30px;color:var(--button-text,#fff);background:linear-gradient(145deg,color-mix(in srgb,var(--accent-color) 78%,#fff),var(--accent-color));box-shadow:0 5px 13px color-mix(in srgb,var(--accent-color) 27%,transparent),inset 0 1px #ffffff80;transform:translateY(-1px)}
  .mobile-section-nav .nav-confirm:not([aria-current="true"])>span{border:1px solid color-mix(in srgb,var(--accent-color) 76%,#fff 10%);font-size:14px}
  .rsvp-modal-open .mobile-section-nav{pointer-events:none;opacity:0;transform:translateY(24px)}
  .mobile-section-nav button:focus-visible{outline:2px solid #fff;outline-offset:-3px}

  /* Los controles de música, efectos y compartir se presentan como una sola cápsula. */
  .floating{z-index:46;top:max(10px,env(safe-area-inset-top));right:max(10px,calc((100vw - 520px)/2 + 10px));left:auto;width:auto;padding:4px;gap:3px;border:1px solid color-mix(in srgb,var(--accent-color) 45%,#fff 18%);border-radius:999px;background:color-mix(in srgb,var(--page-color) 83%,transparent);box-shadow:0 9px 25px #0005,inset 0 1px #ffffff25;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);transform:none;transition:opacity .25s ease,transform .3s ease}
  .floating button{width:37px;height:37px;border:0;background:transparent;color:var(--page-text);font-size:17px;backdrop-filter:none}
  .floating button+button{border-left:1px solid color-mix(in srgb,var(--accent-color) 20%,transparent);border-radius:0}
  .floating button:first-child{border-radius:50% 5px 5px 50%}.floating button:last-child{border-radius:5px 50% 50% 5px}
  .floating button:only-child{border-radius:50%}
  html.mobile-ui-hidden .mobile-section-nav{pointer-events:none;opacity:0;transform:translateY(calc(100% + 24px))}
  html.mobile-ui-hidden .floating{pointer-events:none;opacity:0;transform:translateY(-65px)}

  .mobile-section-toast{position:fixed;z-index:44;top:max(62px,calc(env(safe-area-inset-top) + 54px));left:50%;max-width:calc(100% - 40px);padding:8px 14px;border:1px solid color-mix(in srgb,var(--accent-color) 37%,#fff 20%);border-radius:999px;color:var(--page-text);background:color-mix(in srgb,var(--page-color) 82%,transparent);box-shadow:0 8px 24px #0004,inset 0 1px #ffffff20;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);font:700 10px/1 Arial,sans-serif;letter-spacing:1.2px;text-transform:uppercase;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,-8px);transition:opacity .22s ease,transform .28s ease}
  .mobile-section-toast.is-visible{opacity:.92;transform:translate(-50%,0)}
  .mobile-back-top{position:fixed;z-index:44;right:max(13px,calc((100vw - 520px)/2 + 13px));bottom:calc(73px + env(safe-area-inset-bottom,0px));display:grid;width:40px;height:40px;padding:0;border:1px solid color-mix(in srgb,var(--accent-color) 52%,#fff 18%);border-radius:50%;place-items:center;color:var(--button-text,#fff);background:linear-gradient(145deg,color-mix(in srgb,var(--accent-color) 80%,#fff),var(--accent-color));box-shadow:0 9px 24px #0005,inset 0 1px #ffffff60;font:700 20px/1 Georgia,serif;cursor:pointer;pointer-events:none;opacity:0;transform:translateY(10px) scale(.88);transition:opacity .22s ease,transform .25s ease}
  .mobile-back-top.is-visible{pointer-events:auto;opacity:.94;transform:none}
  html.mobile-ui-hidden .mobile-back-top,html.mobile-ui-hidden .mobile-section-toast{pointer-events:none;opacity:0;transform:translateY(12px) scale(.9)}

  /* Reserva visual mientras llega cada imagen y aplica un enfoque suave al cargar. */
  #content img.mobile-media-waiting{background:linear-gradient(110deg,color-mix(in srgb,var(--page-color) 86%,#fff 4%) 18%,color-mix(in srgb,var(--accent-color) 14%,var(--page-color)) 42%,color-mix(in srgb,var(--page-color) 86%,#fff 4%) 66%);background-size:240% 100%;animation:mobile-media-wait 1.4s linear infinite}
  #content img.mobile-media-ready{animation:mobile-media-focus .58s cubic-bezier(.2,.7,.25,1) both}

  /* Los destellos toman parte del dorado del evento y dejan de verse neón. */
  #petals[data-effect="sparkles"] i{opacity:.58;background:linear-gradient(145deg,color-mix(in srgb,var(--petal-color) 42%,#fff 12%),color-mix(in srgb,var(--petal-color) 42%,var(--accent-color) 58%));filter:saturate(.72) drop-shadow(0 2px 4px #0002)}
}
@keyframes mobile-media-wait{to{background-position:-220% 0}}
@keyframes mobile-media-focus{from{filter:blur(7px) saturate(.74);opacity:.84}to{filter:none;opacity:1}}
@media(max-width:350px){
  .mobile-section-nav{right:6px;left:6px;width:calc(100% - 12px);padding-inline:2px}
  .mobile-section-nav button>small{font-size:6.8px}
}
@media(prefers-reduced-motion:reduce){.mobile-section-nav,.mobile-section-nav:after,.mobile-section-nav button,.mobile-section-nav button>span,.floating,.mobile-section-toast,.mobile-back-top{transition:none!important}#content img.mobile-media-waiting,#content img.mobile-media-ready{animation:none!important}}