/* InvitaSalón · Edición 4. Escenas por capas con profundidad real. La tarjeta nunca comparte zona con la escena,
   así el texto siempre se lee. Movimiento solo con transform y opacity. */
.e4,.e4 *{box-sizing:border-box}
.inv-edition-4 .inv-hero.e4{padding:0;min-height:min(100svh,760px);display:flex;text-align:center}.invitation-surface.inv-edition-4{background:var(--bg);color:var(--ink)}
.e4{container-type:inline-size;position:relative;isolation:isolate;overflow:hidden;min-height:min(100svh,860px);display:flex;flex-direction:column;color:var(--ink);background:linear-gradient(180deg,var(--top),var(--bot));font-family:var(--text);--card-r:18px;--card-b:1px solid color-mix(in srgb,var(--detail) 55%,transparent);--card-s:0 18px 40px -22px color-mix(in srgb,var(--ink) 70%,transparent)}
.e4-world{position:absolute;inset:0;z-index:0;perspective:900px;perspective-origin:50% 62%;pointer-events:none;overflow:hidden}
.e4-3d{position:absolute;inset:-5%;transform-style:preserve-3d;will-change:transform}
.e4-layer{position:absolute;inset:0;transform-style:preserve-3d}
.e4-far{transform:translateZ(-160px) scale(1.18)}.e4-mid{transform:translateZ(-60px) scale(1.07)}.e4-act{transform:translateZ(10px)}.e4-near{transform:translateZ(90px) scale(.9)}
.e4-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Personaje */
.e4-actor{position:absolute;left:50%;bottom:3%;width:min(78cqi,440px);aspect-ratio:4/5;margin-left:calc(min(78cqi,440px)/-2);will-change:transform}
.is-mirror .e4-actor{scale:-1 1}
.e4-sprite{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;animation:e4-breathe 3.4s ease-in-out infinite alternate}
@keyframes e4-breathe{to{transform:translateY(-1.6%) scale(1.012)}}
.e4-actor::before{content:'';position:absolute;inset:6% -6% 2%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--glow) 55%,transparent),transparent)}
.e4-shadow{position:absolute;left:14%;right:14%;bottom:1.5%;height:8%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--ink) 55%,transparent),transparent)}
.e4-loop{position:absolute;inset:0;overflow:hidden}
.e4-loop-row{position:absolute;left:0;top:0;width:600%;height:200%;animation:e4-row 4.8s steps(2,end) infinite}
.e4-loop img{display:block;width:100%;height:100%;max-width:none;animation:e4-col .8s steps(6,end) infinite}
@keyframes e4-col{to{transform:translateX(-100%)}}@keyframes e4-row{to{transform:translateY(-100%)}}
/* Partículas y efectos de apertura */
.e4-parts{position:absolute;inset:0;overflow:hidden}
.e4-p{position:absolute;left:var(--x);top:calc(var(--d)*24%);width:10px;height:10px;opacity:0;will-change:transform,opacity}
.e4-p-petalo{border-radius:0 80% 0 80%;background:var(--accent)}.e4-p-destello{width:9px;height:9px;background:var(--detail);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
.e4-p-burbuja{border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff,color-mix(in srgb,var(--accent) 30%,transparent) 70%)}.e4-p-mota{width:6px;height:6px;border-radius:50%;background:var(--glow)}
.e4-p-confeti{width:8px;height:14px;border-radius:2px;background:var(--accent)}.e4-p-confeti:nth-child(3n){background:var(--detail)}.e4-p-confeti:nth-child(3n+1){background:var(--card)}
.e4-p-chispa{width:5px;height:12px;border-radius:3px;background:var(--glow)}
.e4-p-estrella{width:13px;height:13px;background:var(--detail);clip-path:polygon(50% 0,63% 36%,100% 38%,70% 60%,80% 96%,50% 75%,20% 96%,30% 60%,0 38%,37% 36%)}
.e4-open-fx{position:absolute;inset:0;perspective:900px;overflow:hidden}
.fx-door{position:absolute;top:0;bottom:0;width:50%;background:linear-gradient(90deg,color-mix(in srgb,var(--ink) 92%,#000),color-mix(in srgb,var(--ink) 70%,var(--detail)));backface-visibility:hidden}
.fx-door.fx-l{left:0;transform-origin:0 50%;border-right:2px solid var(--detail)}.fx-door.fx-r{right:0;transform-origin:100% 50%;border-left:2px solid var(--detail)}
.fx-veil{position:absolute;inset:-10% 0;background:linear-gradient(180deg,color-mix(in srgb,var(--card) 92%,transparent),color-mix(in srgb,var(--card) 60%,transparent));transform-origin:top}
.fx-curtain{position:absolute;top:0;bottom:0;width:52%;background:repeating-linear-gradient(90deg,var(--accent) 0 14px,color-mix(in srgb,var(--accent) 62%,#000) 14px 28px)}
.fx-curtain.fx-l{left:0;transform-origin:left}.fx-curtain.fx-r{right:0;transform-origin:right}
.fx-spot{position:absolute;left:50%;top:-30%;width:120%;height:150%;margin-left:-60%;background:conic-gradient(from 165deg at 50% 0,transparent 0 0deg,color-mix(in srgb,var(--glow) 70%,transparent) 15deg,transparent 30deg);transform-origin:50% 0}
.fx-cloud{position:absolute;top:0;bottom:0;width:62%;background:radial-gradient(circle at 70% 30%,#fff 0 34%,transparent 35%),radial-gradient(circle at 44% 56%,#fff 0 42%,transparent 43%),radial-gradient(circle at 70% 82%,#fff 0 36%,transparent 37%),linear-gradient(#fff,#fff) 0 0/60% 100% no-repeat}
.fx-cloud.fx-l{left:0}.fx-cloud.fx-r{right:0;scale:-1 1}
.fx-ring{position:absolute;left:50%;top:60%;width:180cqi;height:180cqi;border-radius:50%;border:6px solid var(--card);opacity:0}
.fx-dawn{position:absolute;inset:0;background:linear-gradient(180deg,var(--ink),var(--ink) 40%,var(--glow))}
.fx-box{position:absolute;left:50%;bottom:6%;width:64cqi;height:44cqi;margin-left:-32cqi;background:linear-gradient(90deg,transparent 44%,var(--detail) 44% 56%,transparent 56%),var(--accent);border-radius:8px;box-shadow:inset -14px 0 0 color-mix(in srgb,#000 12%,transparent)}
.fx-lid{position:absolute;left:50%;bottom:calc(6% + 42cqi);width:72cqi;height:14cqi;margin-left:-36cqi;background:linear-gradient(90deg,transparent 45%,var(--detail) 45% 55%,transparent 55%),var(--accent);border-radius:7px;filter:brightness(1.1)}
.fx-toybox{position:absolute;left:50%;bottom:6%;width:58cqi;height:58cqi;margin-left:-29cqi;border-radius:14px;background:repeating-linear-gradient(45deg,var(--accent) 0 18px,var(--detail) 18px 36px);box-shadow:inset 0 0 0 6px var(--card)}
.fx-rocket{position:absolute;left:50%;bottom:0;width:26cqi;height:60cqi;margin-left:-13cqi;background:linear-gradient(var(--card),var(--card) 60%,var(--accent) 60%);border-radius:50% 50% 12px 12px/60% 60% 8px 8px}
.fx-page{position:absolute;inset:0 0 0 50%;transform-origin:0 50%;background:linear-gradient(90deg,color-mix(in srgb,var(--ink) 18%,var(--card)),var(--card) 18%);backface-visibility:visible}
.fx-burst{position:absolute;left:50%;top:60%;width:170cqi;height:170cqi;background:repeating-conic-gradient(var(--glow) 0 11deg,transparent 11deg 22deg);border-radius:50%}
/* Tarjeta */
.e4-copy{position:relative;z-index:3;display:flex;flex:1;min-height:195cqi;padding:clamp(18px,5cqi,44px) clamp(16px,5cqi,44px)}
.e4-card{width:min(92%,470px);margin-inline:auto;padding:clamp(14px,4.2cqi,28px) clamp(16px,5cqi,30px);background:var(--card);border:var(--card-b);border-radius:var(--card-r);box-shadow:var(--card-s);text-align:center;align-self:flex-start;display:flex;flex-direction:column;align-items:center}
.e4-mark{display:block;width:34px;height:2px;background:var(--detail);margin-bottom:7px}
.e4-occasion{margin:0 0 4px;font-size:clamp(14px,3.8cqi,17px);letter-spacing:.02em;color:color-mix(in srgb,var(--ink) 78%,var(--card))}
.e4-names{margin:0;font-family:var(--display);font-weight:var(--name-weight);font-style:var(--name-style);letter-spacing:var(--name-track);text-transform:var(--name-case);font-size:min(clamp(38px,12.4cqi,64px),calc(var(--fit)/var(--word)));line-height:1.02;overflow-wrap:break-word;text-wrap:balance}
.e4-names em{display:inline-block;font-style:italic;font-weight:400;font-size:.72em;color:var(--strong)}
.e4-names.is-long{font-size:min(clamp(30px,9.2cqi,48px),calc(var(--fit)/var(--word)))}.e4-names.is-xlong{font-size:min(clamp(24px,7cqi,36px),calc(var(--fit)/var(--word)));line-height:1.1}
.e4-age{margin:2px 0 0;display:flex;gap:.3em;align-items:baseline;justify-content:center}.e4-age b{font-family:var(--display);font-size:40px;line-height:1;color:var(--strong)}
.e4-when{text-wrap:balance;margin:10px 0 0;font-size:clamp(14px,3.9cqi,16px);line-height:1.45}.e4-when b{font-family:var(--display);font-size:1.5em;color:var(--strong);vertical-align:-.08em;padding:0 .08em}.e4-time{white-space:nowrap;color:color-mix(in srgb,var(--ink) 74%,var(--card))}.e4-time:before{content:'· '}
.e4-place{margin:4px 0 0;font-size:clamp(14px,3.9cqi,16px);text-wrap:balance}
.e4-actions{margin-top:9px;display:flex;flex-direction:column;gap:7px;align-items:center}
.e4-open{appearance:none;border:0;cursor:pointer;min-height:44px;padding:12px 26px;border-radius:999px;background:var(--btn,var(--strong));color:var(--card);font:600 15px/1.1 var(--text)}
.e4-open:focus-visible,.e4-actions a:focus-visible{outline:3px solid var(--detail);outline-offset:2px}
.e4-actions a{color:inherit;font-size:13px;padding:5px 8px;text-underline-offset:2px}
/* Fotos: quedan en una banda propia, delante de la escena */
.e4-photos{position:relative;z-index:2;order:2;display:flex;justify-content:center;gap:10px;padding:0 clamp(16px,5cqi,44px);margin-top:auto}
.e4-photo{margin:0;overflow:hidden;background:var(--card);padding:5px;box-shadow:var(--card-s);flex:0 1 auto}
.e4-photo img{display:block;width:100%;height:100%;object-fit:cover}
.e4-photos.count-1 .e4-photo{width:min(62cqi,300px);aspect-ratio:4/5}.e4-photos.count-2 .e4-photo{width:min(44cqi,220px);aspect-ratio:4/5}.e4-photos.count-3 .e4-photo{width:min(30cqi,170px);aspect-ratio:3/4}
.e4.has-photos .e4-actor{width:min(44cqi,230px);margin-left:calc(min(44cqi,230px)/-2);bottom:0;top:auto}
.has-photos .e4-copy{flex:0 0 auto;min-height:0;align-items:flex-start}.has-photos .e4-copy .e4-card{align-self:flex-start}.has-photos .e4-photos{padding-bottom:min(58cqi,300px);margin-top:0}
/* ---------- Composición propia de cada ocasión ---------- */
/* Bodas: papel de algodón con filo dorado */
.e4-boda{--card-r:4px}.e4-boda .e4-card{outline:1px solid var(--detail);outline-offset:-7px}
.l-dedicatoria .e4-copy{align-items:flex-end}.l-dedicatoria .e4-card{align-self:flex-end}
.l-dedicatoria .e4-actor{bottom:clamp(215px,62cqi,320px);top:auto;width:min(66cqi,380px);margin-left:calc(min(66cqi,380px)/-2)}
.l-umbral .e4-card{--card-r:200px 200px 6px 6px;padding-top:48px}
.e4-boda.l-umbral .e4-card{outline:0}
/* XV: placa de gala inclinada */
.e4-xv{--card-r:0}.e4-xv .e4-card{clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px)}
.e4-xv .e4-names{color:var(--strong)}
.l-pasarela .e4-copy{align-items:flex-end}.l-pasarela .e4-card{align-self:flex-end}.l-pasarela .e4-actor{bottom:clamp(215px,62cqi,320px);top:auto;width:min(66cqi,380px);margin-left:calc(min(66cqi,380px)/-2)}
.l-retrato .e4-card{width:min(86%,430px);margin-inline:0 auto}
/* Bautizo: almohada */
.e4-bautizo{--card-r:34px;--card-b:0;--card-s:0 16px 34px -14px color-mix(in srgb,var(--accent) 45%,transparent)}
.l-almohada .e4-copy{align-items:flex-end}.l-almohada .e4-card{align-self:flex-end}.l-almohada .e4-actor{bottom:clamp(215px,62cqi,320px);top:auto;width:min(66cqi,380px);margin-left:calc(min(66cqi,380px)/-2)}
.l-globo .e4-card{--card-r:50% 50% 50% 50%/34% 34% 42% 42%;padding-block:38px}
/* Comunión: lápida en ojiva */
.e4-comunion{--card-r:160px 160px 0 0}.e4-comunion .e4-card{padding-top:42px;border:2px solid var(--detail)}
.l-lapida .e4-copy{align-items:flex-end}.l-lapida .e4-card{align-self:flex-end}.l-lapida .e4-actor{bottom:clamp(215px,62cqi,320px);top:auto;width:min(66cqi,380px);margin-left:calc(min(66cqi,380px)/-2)}
.l-nave .e4-card{--card-r:8px}
/* Cumpleaños: calcomanía con sombra dura */
.e4-cumple{--card-r:14px;--card-b:3px solid var(--ink);--card-s:7px 7px 0 var(--ink)}.e4-cumple .e4-card{rotate:-1.6deg}.e4-cumple .e4-mark{display:none}
.e4-cumple .e4-names{color:var(--strong);line-height:.98}
.l-torre .e4-copy{align-items:flex-end}.l-torre .e4-card{align-self:flex-end;rotate:1.4deg}.l-torre .e4-actor{bottom:clamp(215px,62cqi,320px);top:auto;width:min(66cqi,380px);margin-left:calc(min(66cqi,380px)/-2)}
.l-pizarra .e4-card{--btn:var(--strong);--strong:var(--detail);background:var(--ink);color:var(--card)}.l-pizarra .e4-open{background:var(--detail);color:var(--ink)}.l-pizarra .e4-names{color:var(--detail)}.l-pizarra .e4-occasion,.l-pizarra .e4-time{color:inherit}
/* Convivio: boleto troquelado */
.e4-convivio{--card-r:6px;--card-b:0;--card-s:0 12px 0 -6px color-mix(in srgb,var(--ink) 30%,transparent)}
.e4-convivio .e4-card{-webkit-mask:radial-gradient(circle 10px at 0 62%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 10px at 100% 62%,transparent 98%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 10px at 0 62%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 10px at 100% 62%,transparent 98%,#000) right/51% 100% no-repeat}
.e4-convivio .e4-copy{padding-top:clamp(110px,30cqi,170px)}
.l-letrero .e4-card{--strong:var(--detail);background:var(--ink);color:var(--card);-webkit-mask:none;mask:none;border-radius:4px;box-shadow:0 0 0 4px var(--detail)}.l-letrero .e4-occasion,.l-letrero .e4-time{color:inherit}.l-letrero .e4-names{color:var(--glow)}.l-letrero .e4-open{background:var(--glow);color:var(--ink)}
.l-menu .e4-copy{align-items:flex-end;padding-top:18px}.l-menu .e4-card{align-self:flex-end}.l-menu .e4-actor{bottom:clamp(215px,62cqi,320px);top:auto;width:min(66cqi,380px);margin-left:calc(min(66cqi,380px)/-2)}
/* Cumpleaños infantiles: etiqueta cosida */
.e4-infantil{--card-r:26px;--card-b:3px dashed var(--strong);--card-s:0 10px 0 -2px color-mix(in srgb,var(--ink) 22%,transparent)}.e4-infantil .e4-mark{display:none}.e4-infantil .e4-names{color:var(--strong)}
.l-escalera .e4-copy{align-items:flex-end}.l-escalera .e4-card{align-self:flex-end;rotate:-1deg}.l-escalera .e4-actor{bottom:clamp(215px,62cqi,320px);top:auto;width:min(66cqi,380px);margin-left:calc(min(66cqi,380px)/-2)}
.l-burbuja .e4-card{--card-r:50%/42%;padding-block:34px}
/* Mundos planos en 2D */
.is-2d .e4-sprite{animation-duration:2.6s}
/* Colecciones especiales */
.w-diamante .e4-card,.w-champana .e4-card{background:linear-gradient(160deg,var(--card),color-mix(in srgb,var(--card) 86%,var(--detail)));outline:1px solid color-mix(in srgb,var(--strong) 50%,transparent);outline-offset:-6px}
/* Encuadre del protagonista y luz de la escena */
.f-1 .e4-actor{translate:-12cqi 0}.f-2 .e4-actor{translate:12cqi 0}
.e4-world::after{content:'';position:absolute;inset:0;pointer-events:none}.t-1 .e4-world::after{background:linear-gradient(180deg,transparent 55%,color-mix(in srgb,var(--glow) 34%,transparent))}.t-2 .e4-world::after{background:radial-gradient(ellipse at 50% 62%,transparent 46%,color-mix(in srgb,var(--ink) 34%,transparent))}
/* Tablet y escritorio: la escena gana aire y la tarjeta pasa a un costado */
@container (min-width:760px){
 .e4-copy{min-height:0;align-items:center;justify-content:flex-end;padding-inline:6cqi}.e4-card,.l-retrato .e4-card{margin-inline:0;width:min(42cqi,500px);align-self:center}
 .e4-3d{inset:0 auto 0 3cqi;width:min(50cqi,600px)}
 .e4-svg{-webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
 .e4 .e4-actor,.e4.has-photos .e4-actor{translate:none;left:6%;right:auto;top:auto;bottom:2%;margin-left:0;width:88%}
 .has-photos .e4-copy{align-items:flex-start;padding-top:4cqi;padding-bottom:16px}.has-photos .e4-copy .e4-card{align-self:flex-start}
 .e4.has-photos .e4-photos{align-self:flex-end;width:min(42cqi,500px);margin:0 6cqi 0 0;padding:0 0 4cqi;justify-content:center}
 .has-photos .e4-photos .e4-photo{width:min(13cqi,170px)}
}
@media (min-width:760px){.e4{min-height:min(100svh,720px)}}
@media (prefers-reduced-motion:reduce){.e4-3d,.e4-actor{will-change:auto}.e4-loop,.e4-parts{display:none}.e4-sprite{animation:none}}

/* Música: botón discreto, sobre todas las ediciones */
.music-toggle{position:fixed;right:max(14px,env(safe-area-inset-right,0px));bottom:max(14px,env(safe-area-inset-bottom,0px));z-index:40;width:44px;height:44px;border:0;border-radius:50%;background:rgba(20,16,30,.72);color:#fff;font-size:20px;line-height:1;cursor:pointer;backdrop-filter:blur(6px)}
.music-toggle.is-playing{background:rgba(20,16,30,.9)}.music-toggle:not(.is-playing){opacity:.78}.music-toggle:focus-visible{outline:3px solid #fff;outline-offset:2px}
.music-panel{border:1px solid var(--line,#ddd);border-radius:12px;padding:14px 16px;margin:18px 0}.music-panel h3{margin:0 0 6px}.music-options{display:flex;flex-wrap:wrap;gap:8px 16px;margin:8px 0}.music-option{display:inline-flex;gap:6px;align-items:center;min-height:32px}.music-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:8px 0}
/* Catálogo: miniaturas verticales de Escena Viva */
.template-card.is-e4 .template-card-visual{aspect-ratio:1/1.95}.template-card.is-e4 .template-card-visual img{width:100%;height:100%;object-fit:cover;object-position:top}
.design-choice.is-e4 img{aspect-ratio:1/1.95;object-fit:cover;object-position:top;height:auto}
.catalog-more{grid-column:1/-1;display:flex;justify-content:center;padding:20px 0}
@media (prefers-reduced-motion:reduce){.e4-open-fx{display:none}}