@property --u{syntax:'<length>';inherits:true;initial-value:4px}
/* Edición 5 «Papel». Todo se mide en --u (1% del ancho del pliego), así la miniatura y la invitación son el mismo diseño. */
.invitation-surface.inv-edition-5{background:var(--bg);color:var(--ink)}
.e5{container-type:inline-size;position:relative;isolation:isolate;overflow:hidden;width:100%;background:var(--paper);color:var(--ink);font-family:var(--text);text-align:center}
.inv-hero.e5{padding:0;margin:0;display:flex;align-items:center;justify-content:center;min-height:0}.inv-edition-5 .inv-hero.e5{min-height:100svh}
.e5-sheet{--u:min(1cqi,5.2px,.7svh);display:flex;flex-direction:column;width:calc(100*var(--u));min-height:calc(140*var(--u));margin:auto}
.e5-copy{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(1.6*var(--u));padding:calc(10*var(--u)) calc(11*var(--u))}
.e5-occ{margin:0;font-size:calc(3.7*var(--u));line-height:1.3;color:var(--ink);opacity:.82}
.e5-names{--fit:calc(78*var(--u));--k:var(--fitk,1.7);margin:0;font-family:var(--display);font-weight:var(--w);font-style:var(--slant);letter-spacing:var(--track);text-transform:var(--case);line-height:1.04;font-size:min(calc(13*var(--u)),calc(var(--fit)/var(--word)*var(--k)));overflow-wrap:anywhere}
.e5-names em{display:block;font-size:.6em;font-style:italic;font-weight:400;letter-spacing:0;text-transform:none;color:var(--accent);line-height:1.1}
.e5-names.is-long{font-size:min(calc(9.6*var(--u)),calc(var(--fit)/var(--word)*var(--k)))}.e5-names.is-xlong{font-size:min(calc(7*var(--u)),calc(var(--fit)/var(--word)*var(--k)))}
.e5-when,.e5-place,.e5-age{margin:0;font-size:calc(3.7*var(--u));line-height:1.45}
.e5-when b{font-weight:600}.e5-time{white-space:nowrap}.e5-age b{font-family:var(--display);font-size:2.4em;line-height:1;color:var(--accent)}
.e5-actions{margin-top:calc(2.4*var(--u))}
.e5-open{display:inline-flex;align-items:center;justify-content:center;min-height:max(44px,calc(10*var(--u)));padding:0 calc(7*var(--u));border:1px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);font:inherit;font-size:max(14px,calc(3.6*var(--u)));cursor:pointer;transition:background .2s,color .2s}
.template-card .e5-open{min-height:calc(9*var(--u));font-size:calc(3.4*var(--u));cursor:inherit}.template-card .s-min .e5-open{min-height:calc(6*var(--u))}
.e5-open:hover{background:var(--ink);color:var(--paper)}.e5-open:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.e5-art{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.e5-photos{position:relative;z-index:2;display:grid;grid-template-columns:repeat(6,1fr);gap:calc(2.4*var(--u));width:calc(78*var(--u));margin:0 auto calc(12*var(--u))}
.e5-photo{margin:0;overflow:hidden;background:var(--soft);min-width:0}.e5-photo img{display:block;width:100%;height:100%}
.e5-photos.count-1 .e5-photo{grid-column:2/6;aspect-ratio:4/5}.e5-photos.count-2 .e5-photo{grid-column:span 3;aspect-ratio:4/5}
.e5-photos.count-3 .e5-photo:first-child{grid-column:span 4;grid-row:span 2;aspect-ratio:4/5}.e5-photos.count-3 .e5-photo:not(:first-child){grid-column:span 2;align-self:stretch}
.has-photos .e5-copy{flex:0 0 auto;justify-content:flex-start;gap:calc(1.3*var(--u));padding-top:calc(13*var(--u));padding-bottom:calc(5*var(--u))}
.has-photos .e5-sheet{justify-content:center}
.s-for .e5-photo{padding:calc(1*var(--u));background:none;border:1px solid var(--accent)}.s-for.has-photos .e5-crest{margin-top:calc(11*var(--u))}.s-for.has-photos .e5-copy{padding-top:calc(10*var(--u))}.s-for.l-1 .e5-photo,.s-for.l-9 .e5-photo,.s-for.l-1 .e5-photo img,.s-for.l-9 .e5-photo img{border-radius:999px 999px 0 0}
.s-rom .e5-photo{border-radius:999px;box-shadow:0 0 0 calc(1*var(--u)) var(--paper),0 0 0 calc(1.3*var(--u)) var(--accent)}.s-rom.has-photos .e5-copy{padding-top:calc(24*var(--u))}.s-rom.has-photos .e5-photos{margin-bottom:calc(26*var(--u))}
.s-div .e5-photo{padding:calc(1.5*var(--u)) calc(1.5*var(--u)) calc(5*var(--u));background:#fff;box-shadow:calc(1*var(--u)) calc(1*var(--u)) 0 var(--ink);rotate:-2.4deg}.s-div .e5-photo:nth-child(2){rotate:2deg}.s-div .e5-photo:nth-child(3){rotate:-1.2deg}.s-div.has-photos .e5-copy{margin-top:calc(12*var(--u));margin-bottom:calc(4*var(--u));padding-top:calc(5*var(--u))}
.s-ani .e5-photo{border-radius:calc(4*var(--u));border:calc(.8*var(--u)) solid var(--paper)}.s-ani.has-photos .e5-copy{margin-top:calc(10*var(--u));margin-bottom:calc(4*var(--u));padding-top:calc(6*var(--u));padding-bottom:calc(6*var(--u))}

/* Minimalista: tipografía, aire y una sola marca. Sin dibujos, sombras ni fondos decorados. */
.s-min .e5-occ{font-size:calc(3.2*var(--u));opacity:.62}.s-min .e5-when,.s-min .e5-place{font-size:calc(3.3*var(--u));color:var(--second)}.s-min .e5-when b{font-weight:400;color:var(--ink)}
.s-min .e5-names em{color:var(--ink);opacity:.5;font-style:normal;font-weight:300}
.s-min .e5-open{border-width:0 0 1px;padding:0 calc(1*var(--u));min-height:44px}.s-min .e5-open:hover{background:none;color:var(--accent);border-color:var(--accent)}
.e5-mark{display:block;background:var(--accent)}.m-rule{width:calc(10*var(--u));height:1px}.m-long{width:calc(34*var(--u));height:1px}.m-dot{width:calc(1.6*var(--u));height:calc(1.6*var(--u));border-radius:50%}.m-bar{width:1px;height:calc(10*var(--u))}
.e5-big{font-family:var(--display);font-weight:300;line-height:.9;color:var(--accent);font-size:calc(46*var(--u));letter-spacing:-.04em}
.s-min.l-1 .e5-copy,.s-min.l-8 .e5-copy{justify-content:flex-end;align-items:flex-start;text-align:left;padding-bottom:calc(14*var(--u))}
.s-min.l-2 .e5-copy{justify-content:flex-start;align-items:flex-start;text-align:left;padding-top:calc(14*var(--u))}.s-min.l-2 .e5-when{margin-top:auto}
.s-min.l-3 .e5-copy{align-items:flex-start;text-align:left;justify-content:flex-end}.s-min.l-3 .e5-big{margin-bottom:auto}.s-min.l-3 .e5-day{display:none}
.s-min.l-4 .e5-sheet{background:linear-gradient(var(--soft) 0 36%,transparent 36%)}.s-min.l-4 .e5-copy{justify-content:flex-end;padding-bottom:calc(16*var(--u))}
.s-min.l-5 .e5-sheet{position:relative}.s-min.l-5 .e5-sheet::before{content:"";position:absolute;left:calc(11*var(--u));top:calc(11*var(--u));bottom:calc(11*var(--u));width:1px;background:var(--accent)}.s-min.l-5 .e5-copy{align-items:flex-start;text-align:left;padding-left:calc(18*var(--u));padding-right:calc(9*var(--u))}.s-min.l-5 .e5-names{--fit:calc(70*var(--u))}
.s-min.l-6 .e5-big{font-size:calc(66*var(--u));font-weight:300;position:absolute;right:calc(7*var(--u));top:calc(4*var(--u));opacity:.13;color:var(--ink);text-transform:uppercase}.s-min.l-6 .e5-copy{align-items:flex-start;text-align:left;justify-content:flex-end}
.s-min.l-7 .e5-sheet::before{content:"";position:absolute;inset:calc(5*var(--u));border:1px solid var(--ink);opacity:.5}
.s-min.l-8 .e5-copy{align-items:flex-end;text-align:right}
.v-1.s-min .e5-names{font-weight:200}.v-2.s-min .e5-occ{letter-spacing:.2em}.v-3.s-min .e5-when{letter-spacing:.06em}.v-4.s-min .e5-place{font-style:italic}

/* Formal: simetría, oro y marco grabado. */
.s-for .e5-sheet,.s-min.l-7 .e5-sheet{position:relative}.s-for .e5-frame{fill:none;stroke:var(--accent);stroke-width:1.1px}.s-for .e5-frame *{vector-effect:non-scaling-stroke}.s-for .e5-frame .thin{stroke-width:.6px}.s-for .e5-crest{fill:none;stroke:var(--accent);stroke-width:1.2}
.e5-crest{position:relative;z-index:2;display:block;flex:none;width:calc(26*var(--u));height:calc(26*var(--u));margin:calc(13*var(--u)) auto calc(-9*var(--u))}.s-for .e5-copy{padding:calc(11*var(--u)) calc(16*var(--u)) calc(15*var(--u))}
.s-for .e5-occ{font-family:var(--text);font-style:italic;font-size:calc(3.6*var(--u));letter-spacing:.04em;opacity:1;color:var(--accent)}
.s-for .e5-names{font-size:min(calc(11*var(--u)),calc(var(--fit)/var(--word)*var(--k)));--fit:calc(64*var(--u))}
.s-for .e5-when{font-family:var(--text)}.s-for .e5-day{font-size:1.5em;font-weight:400;color:var(--accent)}.s-for .e5-place{font-family:var(--text);font-style:italic}
.s-for .e5-open{border-color:var(--accent);color:var(--ink);letter-spacing:.06em}.s-for .e5-open:hover{background:var(--accent);color:var(--paper)}
.s-for.l-6 .e5-copy{padding-inline:calc(19*var(--u))}.s-for.l-6 .e5-crest,.s-for.l-9 .e5-crest,.s-for.l-1 .e5-crest{margin-top:calc(17*var(--u))}

/* Romántica: acuarela y flores en los bordes, letra suave. */
.s-rom .wash{fill:var(--soft);opacity:.75}.s-rom .stem{fill:none;stroke:var(--second);stroke-width:.35}.s-rom .leaf{fill:var(--second);opacity:.8}.s-rom .pet0{fill:var(--soft);stroke:var(--accent);stroke-width:.12}.s-rom .pet1{fill:var(--accent);opacity:.72}.s-rom .pet2{fill:var(--ink);opacity:.34}.s-rom .core{fill:var(--second)}
.s-rom .e5-copy{padding:calc(30*var(--u)) calc(15*var(--u))}.s-rom .e5-names{font-size:min(calc(15*var(--u)),calc(var(--fit)/var(--word)*1.9));--fit:calc(66*var(--u))}
.s-rom .e5-open{border-radius:99px;background:var(--ink);color:var(--paper);border:0}.s-rom .e5-open:hover{background:var(--accent);color:var(--ink)}
.s-rom.l-2 .e5-copy,.s-rom.l-7 .e5-copy{padding-bottom:calc(36*var(--u))}.s-rom.l-1 .e5-copy,.s-rom.l-4 .e5-copy{padding-top:calc(36*var(--u))}.s-rom.l-3 .e5-copy{padding-left:calc(24*var(--u))}.s-rom.l-9 .e5-copy{padding-right:calc(24*var(--u))}

/* Divertida: color pleno, formas grandes y letra con peso. */
.s-div .fill1{fill:var(--accent)}.s-div .fill2{fill:var(--second)}.s-div .fill3{fill:var(--soft)}.s-div .line{fill:none;stroke:var(--ink);stroke-width:.9}
.s-div .e5-copy{margin:calc(24*var(--u)) calc(9*var(--u));padding:calc(7*var(--u)) calc(6*var(--u));flex:0 1 auto;background:var(--soft);border:calc(.8*var(--u)) solid var(--ink);box-shadow:calc(1.6*var(--u)) calc(1.6*var(--u)) 0 var(--ink);rotate:-1.6deg}
.s-div.l-2 .e5-copy,.s-div.l-5 .e5-copy,.s-div.l-7 .e5-copy{rotate:1.8deg}.s-div.l-3 .e5-copy{border-radius:calc(7*var(--u))}.s-div.l-6 .e5-copy{border-radius:50% 50% calc(5*var(--u)) calc(5*var(--u))/calc(18*var(--u)) calc(18*var(--u)) calc(5*var(--u)) calc(5*var(--u));padding-top:calc(12*var(--u))}.s-div.l-9 .e5-copy{margin-left:calc(20*var(--u));margin-right:calc(5*var(--u))}
.s-div .e5-names{--fit:calc(64*var(--u));--k:1.25}
.s-div .e5-names em{font-style:normal;color:var(--accent)}.s-div .e5-open{background:var(--accent);color:var(--ink);border:calc(.6*var(--u)) solid var(--ink);border-radius:99px;font-weight:700}.s-div .e5-open:hover{background:var(--ink);color:var(--soft)}
.s-div .e5-day{font-size:1.5em;color:var(--accent)}

/* Animada: el fondo se mueve siempre; la tarjeta queda fija y legible. */
.e5-scene{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}.e5-scene i{position:absolute;left:calc(var(--x)*1%);top:0;display:block;width:calc(9*var(--u)*var(--s));height:calc(9*var(--u)*var(--s));animation:e5-float var(--t) linear infinite var(--d);background:var(--accent)}
.e5-scene i:nth-child(3n){background:var(--second)}.e5-scene i:nth-child(3n+1){background:var(--soft)}
.s-ani .e5-copy{margin:auto calc(11*var(--u));padding:calc(8*var(--u)) calc(6*var(--u));flex:0 1 auto;background:var(--paper);border-radius:calc(4*var(--u))}
.s-ani .e5-open{background:var(--ink);color:var(--paper);border:0;border-radius:99px}.s-ani .e5-open:hover{background:var(--accent);color:var(--ink)}
.s-ani .e5-names{--fit:calc(62*var(--u))}
@keyframes e5-float{from{transform:translateY(calc(145*var(--u)))}to{transform:translateY(calc(-14*var(--u)))}}
@keyframes e5-fall{from{transform:translateY(calc(-14*var(--u))) rotate(0)}to{transform:translateY(calc(145*var(--u))) rotate(540deg)}}
@keyframes e5-twinkle{0%,100%{opacity:.15;transform:scale(.5)}50%{opacity:1;transform:scale(1.1)}}
@keyframes e5-drift{from{transform:translateX(calc(-30*var(--u)))}to{transform:translateX(calc(104*var(--u)))}}
@keyframes e5-burst{0%{opacity:0;transform:scale(.1)}30%{opacity:1}100%{opacity:0;transform:scale(2.4)}}
@keyframes e5-spin{to{transform:rotate(360deg)}}
@keyframes e5-wave{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(calc(-3*var(--u))) scaleY(1.2)}}
@keyframes e5-curtain{0%,12%{transform:scaleX(1)}55%,100%{transform:scaleX(.2)}}
.sc-globos i{border-radius:50% 50% 48% 52%/42% 42% 58% 58%;height:calc(9*var(--u)*var(--s))}
.sc-petalos i{border-radius:80% 10% 80% 10%;animation-name:e5-fall}
.sc-burbujas i{border-radius:50%;background:none!important;border:calc(.4*var(--u)) solid var(--accent)}
.sc-estrellas i{top:calc(var(--y)*1%);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);animation-name:e5-twinkle;animation-timing-function:ease-in-out}
.sc-olas i{left:-10%;width:120%;top:auto;bottom:calc((var(--c)*7 + var(--x)*.08)*1%);height:calc(12*var(--u));border-radius:50% 50% 0 0;opacity:.5;animation-name:e5-wave;animation-timing-function:ease-in-out}
.sc-rayos i{left:50%;top:50%;width:calc(140*var(--u));height:calc(140*var(--u));margin:calc(-70*var(--u));background:none!important;animation:none}.sc-rayos::before{content:"";position:absolute;left:50%;top:50%;width:calc(240*var(--u));height:calc(240*var(--u));margin:calc(-120*var(--u));background:repeating-conic-gradient(var(--accent) 0 10deg,transparent 10deg 20deg);opacity:.5;animation:e5-spin 40s linear infinite}
.sc-telon i{display:none}.sc-telon::before,.sc-telon::after{content:"";position:absolute;top:0;bottom:0;width:50%;background:repeating-linear-gradient(90deg,var(--accent) 0 calc(5*var(--u)),var(--second) calc(5*var(--u)) calc(10*var(--u)));animation:e5-curtain 7s ease-in-out infinite alternate}.sc-telon::before{left:0;transform-origin:left}.sc-telon::after{right:0;transform-origin:right}
.sc-fuegos i{top:calc(var(--y)*1%);border-radius:50%;background:none!important;border:calc(.5*var(--u)) dotted var(--accent);animation-name:e5-burst;animation-timing-function:ease-out}
.sc-nubes i{top:calc(var(--y)*1%);border-radius:99px;width:calc(26*var(--u)*var(--s));height:calc(8*var(--u)*var(--s));animation-name:e5-drift;left:0;opacity:.8}
.sc-cintas i{width:calc(1.4*var(--u));height:calc(26*var(--u));border-radius:9px;animation-name:e5-fall}
.template-card .e5-scene i,.template-card .e5-scene::before,.template-card .e5-scene::after{animation-play-state:paused}
.is-dark .e5-occ{opacity:.9}
.has-photos.s-min.l-3 .e5-big,.has-photos.s-min.l-6 .e5-big{display:none}.has-photos.s-min.l-3 .e5-day{display:inline}.has-photos.s-min.l-4 .e5-sheet{background:none}.has-photos.s-min .e5-copy{justify-content:flex-start}.has-photos.s-min.l-2 .e5-when{margin-top:0}
/* Pantalla ancha o celular acostado: con fotos, texto y fotos van lado a lado */
@container (min-width:860px){.has-photos .e5-sheet{flex-direction:row;align-items:center;width:calc(190*var(--u));min-height:calc(130*var(--u))}.has-photos .e5-copy{flex:0 0 calc(100*var(--u));margin-block:auto}.has-photos .e5-crest{position:absolute;left:calc(37*var(--u));top:0;margin-top:calc(4*var(--u))!important}.has-photos .e5-photos{flex:1;width:auto;margin:auto calc(5*var(--u))}}
@media (orientation:landscape) and (max-height:520px){.e5-sheet{--u:min(1cqi,.72svh)}.has-photos .e5-sheet{flex-direction:row;align-items:center;width:calc(186*var(--u));min-height:calc(136*var(--u))}.has-photos .e5-copy{flex:0 0 calc(100*var(--u));margin-block:auto}.has-photos .e5-crest{position:absolute;left:calc(37*var(--u));top:0;margin-top:calc(4*var(--u))!important}.has-photos .e5-photos{flex:1;width:auto;margin:auto calc(4*var(--u))}}
@media (prefers-reduced-motion:reduce){.e5-scene i,.e5-scene::before,.e5-scene::after{animation:none}}
@media print{.e5-scene{display:none}}

/* Miniaturas vivas: catálogo, selector del editor y panel */
.template-card.is-e5 .template-card-visual,.design-choice .choice-live,.row-preview.is-e5{display:block;overflow:hidden;background:none}
.template-card.is-e5 .template-card-visual{aspect-ratio:5/7}.design-choice .choice-live{aspect-ratio:5/7;width:100%}.row-preview.is-e5{width:66px;height:89px;flex:none}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.choice-live .e5-scene i,.choice-live .e5-scene::before,.choice-live .e5-scene::after,.row-preview .e5-scene i,.row-preview .e5-scene::before,.row-preview .e5-scene::after{animation-play-state:paused}
.choice-live .e5-open{min-height:calc(9*var(--u));font-size:calc(3.4*var(--u))}.row-preview .e5-open{min-height:calc(9*var(--u));font-size:calc(3.4*var(--u))}
