:root{
  --primary:#c7aa78;--secondary:#8b806d;--text:#575756;--hero-text:#fff;
  --title-font:'DM Serif Display',serif;--body-font:'Nunito',sans-serif;--max-width:1100px;
  --video-overlay-rgb:21,17,15;--video-overlay-opacity:.4;--video-fit:cover;
  --video-position:center center;--video-brightness:1;--video-blur:0px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#161310}
html,body{margin:0;min-height:100%;width:100%}
body{color:var(--text);font-family:var(--body-font);overflow-x:hidden;background:transparent}
body.modal-open{overflow:hidden}
button,input,select,textarea{font:inherit}
#invitation-app{position:relative;min-height:100dvh;isolation:isolate}
.runtime-error{min-height:100dvh;display:grid;place-content:center;gap:10px;background:#fff;color:#222;padding:30px;text-align:center;font-family:system-ui,sans-serif}
.runtime-error strong{font-size:1.15rem}.runtime-error span{color:#8a3040}

.global-video-layer{position:fixed;inset:0;z-index:-3;overflow:hidden;background:#15110f}
.global-video-layer video{width:100%;height:100%;object-fit:var(--video-fit);object-position:var(--video-position);filter:brightness(var(--video-brightness)) blur(var(--video-blur));transform:scale(1.02)}
.global-video-overlay{position:absolute;inset:0;background:rgba(var(--video-overlay-rgb),var(--video-overlay-opacity));pointer-events:none}

.invitation-shell{position:relative;width:min(100%,var(--max-width));min-height:100dvh;margin:0 auto;background:transparent;z-index:1;overflow:visible}
.invitation-content{position:relative;width:100%}
.floating-overlay-wrap{position:absolute;top:0;left:0;right:0;pointer-events:none;overflow:visible;z-index:99999}
.floating-overlay-stage{position:absolute;top:0;left:50%;width:390px;height:var(--overlay-total-height,0px);transform:translateX(-50%) scale(var(--overlay-scale,1));transform-origin:top center;overflow:visible}
.floating-overlay-stage .design-element{pointer-events:auto}
.inv-section{position:relative;width:100%;overflow:visible;background:rgba(var(--section-rgb,255,255,255),var(--section-alpha,0));isolation:isolate}
.canvas-wrap{position:relative;width:100%;display:flex;justify-content:center;overflow:visible}
.canvas-stage{position:absolute;top:0;left:50%;width:390px;height:var(--canvas-height,700px);transform:translateX(-50%) scale(var(--canvas-scale,1));transform-origin:top center;overflow:visible}
.canvas-stage.cover-stage,.canvas-stage.contain-stage{top:50%;transform:translate(-50%,-50%) scale(var(--canvas-scale,1));transform-origin:center}

.public-welcome-shell{position:fixed;top:0;bottom:0;left:50%;width:min(100vw,520px);max-width:520px;height:100dvh;overflow:hidden;background:#fff;z-index:9999;transform:translateX(-50%);box-shadow:0 0 45px rgba(0,0,0,.35)}
.public-welcome-section{height:100dvh!important;min-height:100dvh;overflow:hidden;background:#fff}
.public-welcome-section .canvas-wrap{height:100dvh!important;overflow:hidden}
.public-welcome-section.opening{opacity:0;visibility:hidden;filter:blur(4px);transform:scale(1.018);transition:opacity var(--welcome-exit-duration,1500ms) var(--experience-ease),visibility var(--welcome-exit-duration,1500ms) var(--experience-ease),transform var(--welcome-exit-duration,1500ms) var(--experience-ease),filter var(--welcome-exit-duration,1500ms) var(--experience-ease)}
.editor-welcome-shell{width:100%;height:100dvh;overflow:hidden;background:#161310}
.editor-screen-welcome .welcome-section{height:100dvh!important;overflow:hidden}
.editor-screen-welcome .welcome-section .canvas-wrap{height:100dvh!important;overflow:hidden}
.editor-screen-welcome .global-video-layer,.editor-screen-welcome .music-control{display:none!important}
.editor-screen-invitation .welcome-section{display:none!important}

.floral-divider{position:absolute;left:0;width:100%;height:108px;z-index:80;pointer-events:none;--floral-shift:0px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.floral-divider.top{top:-2px;transform:translateY(var(--floral-shift))}.floral-divider.bottom{bottom:-2px;transform:translateY(var(--floral-shift))}.floral-divider img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center;user-select:none}.floral-divider.bottom img{transform:rotate(180deg)}

.section-grid{position:absolute;inset:0;z-index:900;pointer-events:none;opacity:0;background-image:linear-gradient(to right,rgba(123,93,247,.17) 1px,transparent 1px),linear-gradient(to bottom,rgba(123,93,247,.17) 1px,transparent 1px);background-size:var(--editor-grid-size,8px) var(--editor-grid-size,8px)}
.editor-mode.show-grid .section-grid{opacity:1}
.center-guide-v,.center-guide-h{position:absolute;z-index:1100;background:#ff43dc;pointer-events:none;display:none}
.center-guide-v{top:0;bottom:0;left:195px;width:1px}.center-guide-h{left:0;right:0;top:50%;height:1px}
.center-guide-v.show,.center-guide-h.show{display:block}

.design-element{position:absolute;left:calc(var(--x)*1px);top:calc(var(--y)*1px);width:calc(var(--w)*1px);height:calc(var(--h)*1px);min-width:1px;min-height:1px;z-index:var(--z);opacity:var(--opacity);transform:rotate(calc(var(--rotation)*1deg));transform-origin:center;border:calc(var(--border-width)*1px) solid rgba(var(--border-rgb),var(--border-alpha));border-radius:calc(var(--radius)*1px);background:rgba(var(--background-rgb),var(--background-alpha));box-shadow:var(--shadow);padding:calc(var(--padding)*1px);color:var(--color);font-family:var(--font-family);font-size:calc(var(--font-size)*1px);font-weight:var(--font-weight);line-height:var(--line-height);letter-spacing:calc(var(--letter-spacing)*1px);text-align:var(--text-align);display:flex;align-items:center;justify-content:center;white-space:pre-line;overflow:visible}
.design-element.auto-height{height:auto;min-height:1px}
.design-element.element-shape.shape-rectangle{border-radius:0}
.design-element.element-shape.shape-rounded-rect{border-radius:calc(var(--radius,20)*1px)}
.design-element.element-shape.shape-circle{border-radius:999px}
.design-element.element-shape.shape-pill{border-radius:999px}
.design-element.element-shape.shape-diamond{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.design-element.element-shape.shape-triangle{clip-path:polygon(50% 0,0 100%,100% 100%)}
.design-element.element-shape.shape-hexagon{clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.design-element.element-shape.shape-heart{clip-path:polygon(50% 96%,12% 62%,3% 43%,2% 25%,10% 9%,25% 2%,39% 7%,50% 20%,61% 7%,75% 2%,90% 9%,98% 25%,97% 43%,88% 62%)}

.element-text-content{width:100%;word-break:break-word}.element-text-content[contenteditable=true]{outline:none}
.element-shape{padding:0}
.element-image{padding:0;overflow:hidden}
.image-crop-frame{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.image-crop-frame img{display:block;width:100%;height:100%;object-fit:var(--object-fit);object-position:var(--object-position);transform:translate(calc(var(--crop-x)*1px),calc(var(--crop-y)*1px)) scale(var(--crop-scale));transform-origin:center center;user-select:none;pointer-events:none}
.element-button{appearance:none;text-decoration:none;gap:9px;cursor:pointer;transition:filter .2s ease,box-shadow .2s ease}
.element-button:hover{filter:brightness(.96)}
.button-icon{width:var(--icon-size,24px);height:var(--icon-size,24px);object-fit:contain;flex:0 0 auto}
.element-button.icon-right{flex-direction:row-reverse}.element-button.icon-top{flex-direction:column}.element-button.icon-bottom{flex-direction:column-reverse}
.element-button.icon-background{overflow:hidden}.element-button.icon-background .button-icon{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.element-countdown{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:0;background:rgba(var(--background-rgb),var(--background-alpha))}
.count-unit{min-width:0;text-align:center;border-right:1px solid var(--separator-color);display:flex;flex-direction:column;justify-content:center}
.count-unit:last-child{border-right:0}.count-number{font-family:var(--font-family);font-size:var(--font-size);line-height:1;color:var(--color)}.count-label{font-family:var(--font-family);font-size:max(12px,calc(var(--font-size)*.42));color:var(--accent-color);margin-top:10px}
.invalid-countdown{outline:2px dashed #ff7188!important}
.element-gallery{padding:0;background:transparent;border:0}
.gallery-stage{position:absolute;inset:0 0 38px;overflow:hidden}.gallery-slide{position:absolute;inset:0;opacity:0;transform:translateX(8%) scale(.97);transition:opacity .55s ease,transform .55s ease;display:grid;place-items:center}.gallery-slide.active{opacity:1;transform:none}
.gallery-polaroid{width:82%;height:94%;background:#fff;padding:10px 10px 34px;box-shadow:0 12px 30px rgba(0,0,0,.18);border:1px solid #e7e7e7}.gallery-polaroid img{width:100%;height:100%;object-fit:cover}
.gallery-dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:12px}.gallery-dot{width:10px;height:10px;border-radius:50%;border:0;background:rgba(199,170,120,.45)}.gallery-dot.active{background:#c7aa78}

.editor-mode .design-element{cursor:move;touch-action:none}
.editor-mode .design-element:hover{outline:1px dashed rgba(123,93,247,.9);outline-offset:2px}
.editor-mode .design-element.selected{outline:2px solid #7b5df7;outline-offset:2px}
.editor-mode .design-element.selected::before{content:attr(data-name);position:absolute;left:0;top:-26px;z-index:2100;background:#7b5df7;color:#fff;border-radius:5px;padding:5px 7px;font:600 11px/1 var(--body-font);white-space:nowrap}
.locked::after{content:'🔒';position:absolute;right:2px;top:2px;font-size:12px}
.resize-handle{display:none;position:absolute;width:14px;height:14px;border-radius:3px;background:#fff;border:2px solid #7b5df7;z-index:2200;touch-action:none}
.editor-mode .design-element.selected>.resize-handle{display:block}
.resize-handle[data-dir="nw"]{left:-8px;top:-8px;cursor:nwse-resize}.resize-handle[data-dir="n"]{left:50%;top:-8px;transform:translateX(-50%);cursor:ns-resize}.resize-handle[data-dir="ne"]{right:-8px;top:-8px;cursor:nesw-resize}.resize-handle[data-dir="e"]{right:-8px;top:50%;transform:translateY(-50%);cursor:ew-resize}.resize-handle[data-dir="se"]{right:-8px;bottom:-8px;cursor:nwse-resize}.resize-handle[data-dir="s"]{left:50%;bottom:-8px;transform:translateX(-50%);cursor:ns-resize}.resize-handle[data-dir="sw"]{left:-8px;bottom:-8px;cursor:nesw-resize}.resize-handle[data-dir="w"]{left:-8px;top:50%;transform:translateY(-50%);cursor:ew-resize}

.music-control{position:fixed;z-index:5000;width:var(--music-size,46px);height:var(--music-size,46px);border:1px solid rgba(255,255,255,.34);border-radius:50%;background:rgba(var(--music-bg-rgb,255,255,255),var(--music-bg-alpha,.72));-webkit-backdrop-filter:blur(var(--music-blur,7px));backdrop-filter:blur(var(--music-blur,7px));box-shadow:0 6px 22px rgba(0,0,0,.16);display:grid;place-items:center;color:var(--music-color,#5a5145);cursor:pointer;opacity:var(--music-opacity,.62);transition:opacity .2s ease,transform .2s ease,box-shadow .2s ease;-webkit-tap-highlight-color:transparent}
.music-control:hover,.music-control:focus-visible{opacity:1;transform:scale(1.04);box-shadow:0 8px 26px rgba(0,0,0,.22);outline:none}
.music-control:active{transform:scale(.96)}
.music-control.pos-bottom-right{right:max(var(--music-offset,14px),env(safe-area-inset-right));bottom:max(var(--music-offset,14px),env(safe-area-inset-bottom))}
.music-control.pos-bottom-left{left:max(var(--music-offset,14px),env(safe-area-inset-left));bottom:max(var(--music-offset,14px),env(safe-area-inset-bottom))}
.music-control.pos-top-right{right:max(var(--music-offset,14px),env(safe-area-inset-right));top:max(var(--music-offset,14px),env(safe-area-inset-top))}
.music-control.pos-top-left{left:max(var(--music-offset,14px),env(safe-area-inset-left));top:max(var(--music-offset,14px),env(safe-area-inset-top))}
.music-control .note{font-size:calc(var(--music-size,46px)*.4);line-height:1;transform:translateY(-1px)}
.music-control .music-label{position:absolute;right:0;top:calc(var(--music-size,46px) - 3px);font:500 12px var(--body-font);white-space:nowrap;text-shadow:0 1px 2px rgba(255,255,255,.9);pointer-events:none}
.music-control.no-label .music-label{display:none}
.music-control.pos-bottom-left .music-label,.music-control.pos-top-left .music-label{left:0;right:auto}

.modal-backdrop{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.62);backdrop-filter:blur(5px);display:grid;place-items:center;padding:20px}
.modal-card{position:relative;width:min(100%,570px);max-height:88dvh;overflow:auto;border-radius:24px;background:rgba(var(--modal-rgb,255,255,255),var(--modal-alpha,.98));padding:30px;box-shadow:0 28px 90px rgba(0,0,0,.35)}
.modal-card h2{font:400 42px/1 var(--title-font);color:var(--primary);text-align:center;margin:10px 0 24px}.modal-close{position:absolute;right:14px;top:12px;width:38px;height:38px;border:0;border-radius:50%;background:rgba(0,0,0,.08);font-size:22px;cursor:pointer}.modal-body{line-height:1.6}.modal-body img{max-width:100%;height:auto}.dress-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal-form{display:grid;gap:13px}.modal-form label{display:grid;gap:5px;font-size:14px}.modal-form input,.modal-form select,.modal-form textarea{width:100%;padding:12px;border:1px solid rgba(0,0,0,.15);border-radius:10px;font:inherit}.modal-submit{border:0;border-radius:12px;background:var(--primary);color:#fff;padding:13px 18px;font:600 17px var(--body-font);cursor:pointer}

@media(max-width:600px){.invitation-shell{width:100%}.modal-card{padding:24px 20px}.modal-card h2{font-size:34px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Invitation Studio PRO 3.0: navegación táctil/rueda sin barras visibles */
html,body,.modal-card{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar,.modal-card::-webkit-scrollbar{width:0;height:0;display:none}
.element-lottie{padding:0;background:transparent;border:0;overflow:visible}
.element-lottie>div{width:100%;height:100%;pointer-events:none}

/* Animaciones recuperadas y parametrizables */
.has-animation{--anim-duration:700ms;--anim-delay:0ms}
.public-experience .has-animation.anim-fade-up:not(.is-visible){opacity:0;transform:translateY(28px) rotate(calc(var(--rotation)*1deg))}
.public-experience .has-animation.anim-fade-in:not(.is-visible){opacity:0}
.public-experience .has-animation.anim-zoom-in:not(.is-visible){opacity:0;transform:scale(.92) rotate(calc(var(--rotation)*1deg))}
.public-experience .has-animation.anim-slide-left:not(.is-visible){opacity:0;transform:translateX(36px) rotate(calc(var(--rotation)*1deg))}
.public-experience .has-animation.anim-slide-right:not(.is-visible){opacity:0;transform:translateX(-36px) rotate(calc(var(--rotation)*1deg))}
.public-experience .has-animation.is-visible{transition:opacity var(--anim-duration) ease var(--anim-delay),transform var(--anim-duration) cubic-bezier(.2,.75,.2,1) var(--anim-delay)}
.public-experience .has-animation.anim-pulse.is-visible{animation:invPulse var(--anim-duration) ease-in-out var(--anim-delay) infinite}
.public-experience .has-animation.anim-bounce.is-visible{animation:invBounce var(--anim-duration) ease-in-out var(--anim-delay) infinite}
.public-experience .has-animation.anim-float.is-visible{animation:invFloat var(--anim-duration) ease-in-out var(--anim-delay) infinite}
@keyframes invPulse{0%,100%{transform:scale(1) rotate(calc(var(--rotation)*1deg))}50%{transform:scale(1.05) rotate(calc(var(--rotation)*1deg))}}
@keyframes invBounce{0%,100%{transform:translateY(0) rotate(calc(var(--rotation)*1deg))}50%{transform:translateY(11px) rotate(calc(var(--rotation)*1deg))}}
@keyframes invFloat{0%,100%{transform:translateY(0) rotate(calc(var(--rotation)*1deg))}50%{transform:translateY(-8px) rotate(calc(var(--rotation)*1deg))}}
.modal-card{animation:invModalIn .36s cubic-bezier(.2,.75,.2,1)}
@keyframes invModalIn{from{opacity:0;transform:translateY(-28px) scale(.94)}to{opacity:1;transform:none}}


/* Experiencia cinematográfica: carga -> sobre -> tarjeta */
.cinematic-preloader{position:fixed;inset:0;z-index:20000;display:grid;place-items:center;overflow:hidden;background:rgba(var(--loader-rgb,247,243,237),var(--loader-alpha,1));opacity:1;filter:blur(0);transform:scale(1);transition:opacity var(--loader-fade,850ms) var(--experience-ease),filter var(--loader-fade,850ms) var(--experience-ease),transform var(--loader-fade,850ms) var(--experience-ease)}
.cinematic-preloader.leaving{opacity:0;filter:blur(8px);transform:scale(1.025);pointer-events:none}
.preloader-glow{position:absolute;width:min(85vw,460px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(199,170,120,.18),rgba(199,170,120,0) 68%);animation:loaderGlow 2.8s ease-in-out infinite}
.preloader-hearts{position:relative;display:flex;align-items:center;justify-content:center;gap:13px;min-height:90px;z-index:2}
.preloader-heart{width:42px;height:42px;opacity:.35;transform:translateY(8px) scale(.82);animation:loaderHeart 1.45s var(--experience-ease) infinite;animation-delay:calc(var(--heart-index)*.16s)}
.preloader-heart>div,.preloader-heart svg{width:100%!important;height:100%!important}
.preloader-text{position:absolute;top:calc(50% + 70px);font:400 17px/1.4 var(--body-font);letter-spacing:.06em;color:var(--primary);text-align:center}
@keyframes loaderHeart{0%,100%{opacity:.28;transform:translateY(8px) scale(.8)}45%{opacity:1;transform:translateY(-5px) scale(1.12)}70%{opacity:.58;transform:translateY(1px) scale(.94)}}
@keyframes loaderGlow{0%,100%{opacity:.35;transform:scale(.92)}50%{opacity:.8;transform:scale(1.08)}}
.welcome-arriving .public-welcome-shell{animation:welcomeCinematicIn var(--welcome-enter-duration,950ms) var(--experience-ease) both}
@keyframes welcomeCinematicIn{0%{opacity:0;filter:blur(12px);transform:translateX(-50%) scale(1.035)}100%{opacity:1;filter:blur(0);transform:translateX(-50%) scale(1)}}
.card-entering .public-invitation-shell,.card-entering .global-video-layer{animation:cardCinematicIn var(--card-enter-duration,1200ms) var(--experience-ease) both}
.card-entering .music-control{animation:musicCinematicIn var(--card-enter-duration,1200ms) var(--experience-ease) both;animation-delay:350ms}
@keyframes cardCinematicIn{0%{opacity:0;filter:blur(var(--card-enter-blur,10px));transform:scale(var(--card-enter-zoom,1.025)) translateY(18px)}100%{opacity:1;filter:blur(0);transform:scale(1) translateY(0)}}
@keyframes musicCinematicIn{0%{opacity:0;transform:translateY(18px) scale(.85)}100%{opacity:1;transform:none}}

/* Flecha indicadora extraída, con pulso y descenso suave */
.public-experience .has-animation.anim-scroll-cue.is-visible{animation:invScrollCue var(--anim-duration,1800ms) var(--experience-ease) var(--anim-delay,0ms) infinite}
@keyframes invScrollCue{0%{opacity:.2;transform:translateY(-7px) scale(.94) rotate(calc(var(--rotation)*1deg))}38%{opacity:1;transform:translateY(3px) scale(1) rotate(calc(var(--rotation)*1deg))}68%{opacity:.78;transform:translateY(11px) scale(.98) rotate(calc(var(--rotation)*1deg))}100%{opacity:.15;transform:translateY(18px) scale(.93) rotate(calc(var(--rotation)*1deg))}}

/* Crossfade cinematográfico real: sobre y tarjeta se superponen durante la transición */
body.cinematic-crossfade-active{overflow:hidden}
.cinematic-card-layer{position:relative;z-index:2;opacity:0;filter:blur(9px);transform:translateY(12px) scale(1.012);transition:opacity 1.55s var(--experience-ease),filter 1.7s var(--experience-ease),transform 1.7s var(--experience-ease)}
.cinematic-welcome-layer{z-index:9999;opacity:1;filter:blur(0);transform:translateX(-50%) scale(1);transition:opacity 1.45s var(--experience-ease),filter 1.55s var(--experience-ease),transform 1.65s var(--experience-ease)}
.cinematic-fade-veil{position:fixed;inset:0;z-index:9998;pointer-events:none;background:rgba(250,247,241,0);backdrop-filter:blur(0);transition:background 1.5s var(--experience-ease),backdrop-filter 1.5s var(--experience-ease)}
.cinematic-crossfade-active .cinematic-card-layer{opacity:1;filter:blur(0);transform:none}
.cinematic-crossfade-active .global-video-layer{animation:softVideoReveal 1.8s var(--experience-ease) both}
.cinematic-crossfade-active .cinematic-welcome-layer{opacity:0;filter:blur(5px);transform:translateX(-50%) scale(1.018);pointer-events:none}
.cinematic-crossfade-active .cinematic-fade-veil{background:rgba(250,247,241,.08);backdrop-filter:blur(1.5px)}
.cinematic-crossfade-active .music-control{animation:musicCinematicIn 1.8s var(--experience-ease) .55s both}
@keyframes softVideoReveal{0%{opacity:0;filter:blur(10px)}45%{opacity:.45;filter:blur(5px)}100%{opacity:1;filter:blur(0)}}

.design-element.cross-section-anchor{outline:1px dashed rgba(162,132,255,.55);outline-offset:2px}

/* Corrección 3.2.3: cambio directo del sobre a la tarjeta, sin desenfoque. */
body:not(.welcome-arriving) .public-invitation-shell,
body:not(.welcome-arriving) .global-video-layer {
  filter: none;
}

/* =========================================================
   AJUSTE RESPONSIVO DEFINITIVO — móvil, tableta y escritorio
   Mantiene el lienzo original de 390 px sin recortes laterales.
   ========================================================= */
html{
  width:100%;
  max-width:100%;
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overscroll-behavior-x:none;
}
body{
  width:100%;
  max-width:100%;
  overflow-x:clip!important;
  overscroll-behavior-x:none;
  touch-action:pan-y;
  -webkit-tap-highlight-color:transparent;
}
#invitation-app,
.invitation-shell,
.invitation-content,
.inv-section,
.canvas-wrap,
.floating-overlay-wrap{
  max-width:100%;
}
.invitation-shell{
  width:min(100%,430px)!important;
  overflow-x:clip!important;
}
.invitation-content,
.inv-section{
  overflow-x:clip!important;
  overflow-y:visible!important;
}
.canvas-wrap,
.floating-overlay-wrap{
  overflow-x:clip!important;
  overflow-y:visible!important;
}
.public-welcome-shell{
  width:min(100vw,430px)!important;
  max-width:430px!important;
  height:100dvh!important;
  min-height:100svh;
  overflow:hidden!important;
}
.public-welcome-section,
.public-welcome-section .canvas-wrap{
  width:100%!important;
  height:100dvh!important;
  min-height:100svh!important;
  overflow:hidden!important;
}
.public-welcome-section .canvas-stage.contain-stage{
  top:50%!important;
  left:50%!important;
  transform:translate(-50%,-50%) scale(var(--canvas-scale,1))!important;
  transform-origin:center center!important;
}
.design-element{
  flex-shrink:0;
}
.element-text-content{
  width:100%;
  max-width:100%;
  word-break:normal!important;
  overflow-wrap:normal!important;
  hyphens:none;
}
.global-video-layer{
  position:fixed!important;
  inset:0!important;
  width:100dvw!important;
  height:100dvh!important;
  min-height:100svh!important;
  overflow:hidden!important;
}
.global-video-layer video{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  object-fit:cover!important;
  object-position:50% 50%!important;
  transform:none!important;
  filter:brightness(var(--video-brightness)) blur(var(--video-blur))!important;
}
.global-video-overlay{inset:0!important}
img,video,svg,canvas{
  max-width:100%;
}
.image-crop-frame{
  max-width:100%;
}

/* Ventanas emergentes: nunca exceden el ancho ni alto visible. */
.modal-backdrop{
  width:100dvw!important;
  height:100dvh!important;
  min-height:100svh!important;
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))!important;
  overflow:hidden!important;
  overscroll-behavior:contain;
}
.modal-card{
  width:min(100%,540px)!important;
  max-width:calc(100dvw - max(24px,env(safe-area-inset-left) + env(safe-area-inset-right)))!important;
  max-height:calc(100dvh - max(24px,env(safe-area-inset-top) + env(safe-area-inset-bottom)))!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  box-sizing:border-box!important;
}
.modal-body,
.modal-form,
.modal-form label,
.modal-form input,
.modal-form select,
.modal-form textarea{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
.modal-body img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:contain;
}
.dress-grid{
  width:100%;
  max-width:100%;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  align-items:start;
}
.dress-grid img{
  width:100%;
  height:auto;
  max-height:52dvh;
  object-fit:contain;
}

/* Control de música discreto y respetando la zona segura. */
.music-control{
  width:42px!important;
  height:42px!important;
  right:max(12px,env(safe-area-inset-right))!important;
  bottom:max(12px,env(safe-area-inset-bottom))!important;
  background:rgba(255,255,255,.48)!important;
  backdrop-filter:blur(5px)!important;
  -webkit-backdrop-filter:blur(5px)!important;
  box-shadow:0 5px 16px rgba(0,0,0,.14)!important;
}
.music-control .note{font-size:18px!important}
.music-control .music-label{display:none!important}

@media (max-width:430px){
  .invitation-shell,
  .public-welcome-shell{
    width:100vw!important;
    max-width:100vw!important;
  }
  .modal-card{
    border-radius:20px!important;
    padding:24px 18px max(24px,env(safe-area-inset-bottom))!important;
  }
  .modal-card h2{
    font-size:clamp(30px,9vw,36px)!important;
    line-height:1.05!important;
    margin:8px 34px 20px!important;
  }
  .modal-body{font-size:15px!important;line-height:1.55!important}
}

@media (orientation:landscape) and (max-height:560px){
  .modal-card{max-height:calc(100dvh - 16px)!important;padding-top:20px!important}
  .dress-grid img{max-height:62dvh}
}