:root{
  --ivory:#fbf7ef; --paper:#f6efe3; --paper-edge:#e4d6bf;
  --gold:#b98f45; --gold-soft:#e9d3a0; --ink:#6b5a43;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{background:radial-gradient(circle at 50% 30%,#f3e6cc,#d9bf8e);font-family:'Cormorant Garamond',serif;color:var(--ink)}

/* ---------- Contenedor (funciona a pantalla completa o dentro de un iframe) ---------- */
.inv{position:fixed;top:0;right:0;bottom:0;left:0;max-width:480px;margin:0 auto;overflow:hidden;background:var(--ivory)}
.script{font-family:'Great Vibes',cursive;font-weight:400}

/* ---------- SOBRE ---------- */
.env{position:absolute;inset:0;z-index:5;background:var(--paper);transition:opacity 1s ease .1s;perspective:1100px;perspective-origin:50% 50%}
.env.gone{opacity:0;pointer-events:none}
.env .glow{position:absolute;inset:0;opacity:0;
  background:radial-gradient(ellipse 40% 55% at 50% 50%,#fffbe8 0%,#ffe39a 16%,#f4bb4e 42%,#c9892a 80%,#a8691a 100%)}
.env.open .glow{animation:glowUp 2.6s ease-in forwards}
@keyframes glowUp{0%{opacity:0;transform:scale(1)}15%{opacity:1}100%{opacity:1;transform:scale(2.2)}}

/* destello central (lens flare) */
.flare{position:absolute;left:50%;top:50%;width:0;height:0;z-index:4;pointer-events:none;opacity:0}
.flare::before{content:"";position:absolute;left:-160px;top:-160px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,rgba(255,246,205,.95) 10%,rgba(255,214,120,.5) 32%,transparent 68%)}
.flare::after{content:"";position:absolute;left:-210px;top:-2px;width:420px;height:4px;border-radius:50%;
  background:radial-gradient(ellipse,#fff 0%,rgba(255,235,160,.7) 40%,transparent 72%);filter:blur(1.5px)}
.flare i{position:absolute;left:-2px;top:-120px;width:4px;height:240px;border-radius:50%;
  background:radial-gradient(ellipse,#fff 0%,rgba(255,235,160,.6) 40%,transparent 72%);filter:blur(1.5px)}
.env.open .flare{animation:flareIn 2.6s ease-in forwards}
@keyframes flareIn{0%{opacity:0;transform:scale(.15)}28%{opacity:.95;transform:scale(.8)}54%{opacity:1;transform:scale(1.1)}100%{opacity:1;transform:scale(3.4)}}

/* video de apertura opcional (modo híbrido) */
.env video{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform:scale(var(--vz,1)) translateY(var(--vy,0%));transform-origin:50% 50%;z-index:7;background:var(--paper)}
.env.hasvideo video{display:block}
.env.hasvideo .panel,.env.hasvideo .glow,.env.hasvideo .flare{display:none}
.panel{position:absolute;inset:0;filter:drop-shadow(0 4px 7px rgba(110,80,30,.28));backface-visibility:hidden;will-change:transform}
.panel.top{transform-origin:50% 0}
.panel.bot{transform-origin:50% 100%}
.panel.lef{transform-origin:0 50%}
.panel.rig{transform-origin:100% 50%}
/* luz dorada que tiñe las solapas al inclinarse */
.panel .shape::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease .15s}
.panel.top .shape::after{background:linear-gradient(180deg,rgba(255,196,80,0) 28%,rgba(255,190,70,.8) 100%)}
.panel.bot .shape::after{background:linear-gradient(0deg,rgba(255,196,80,0) 28%,rgba(255,190,70,.8) 100%)}
.panel.lef .shape::after{background:linear-gradient(90deg,rgba(255,196,80,0) 28%,rgba(255,190,70,.8) 100%)}
.panel.rig .shape::after{background:linear-gradient(270deg,rgba(255,196,80,0) 28%,rgba(255,190,70,.8) 100%)}
.env.open .shape::after{opacity:1}
.panel .shape{position:absolute;inset:0}
.panel svg{position:absolute;inset:0;width:100%;height:100%}
.panel.top .shape{background:linear-gradient(180deg,#fcf8ef,#f2e8d6);clip-path:polygon(0 0,100% 0,50% 50%)}
.panel.bot .shape{background:linear-gradient(0deg,#f6eddc,#efe3cd);clip-path:polygon(0 100%,100% 100%,50% 50%)}
.panel.lef .shape{background:linear-gradient(90deg,#fbf6ea,#f3e9d7);clip-path:polygon(0 0,50% 50%,0 100%)}
.panel.rig .shape{background:linear-gradient(270deg,#fbf6ea,#f3e9d7);clip-path:polygon(100% 0,100% 100%,50% 50%)}
.panel.top{z-index:3}.panel.bot{z-index:3}.panel.lef{z-index:2}.panel.rig{z-index:2}
/* apertura en 2 tiempos: entreabre (la luz se asoma) y luego abre del todo */
.env.open .top{animation:oTop 2.6s cubic-bezier(.45,0,.25,1) forwards}
.env.open .bot{animation:oBot 2.6s cubic-bezier(.45,0,.25,1) forwards}
.env.open .lef{animation:oLef 2.6s cubic-bezier(.45,0,.25,1) .08s forwards}
.env.open .rig{animation:oRig 2.6s cubic-bezier(.45,0,.25,1) .08s forwards}
@keyframes oTop{0%{transform:rotateX(0)}38%{transform:rotateX(-26deg)}54%{transform:rotateX(-28deg)}82%{transform:rotateX(-100deg);opacity:1}100%{transform:rotateX(-112deg);opacity:0}}
@keyframes oBot{0%{transform:rotateX(0)}38%{transform:rotateX(26deg)}54%{transform:rotateX(28deg)}82%{transform:rotateX(100deg);opacity:1}100%{transform:rotateX(112deg);opacity:0}}
@keyframes oLef{0%{transform:rotateY(0)}38%{transform:rotateY(20deg)}54%{transform:rotateY(22deg)}82%{transform:rotateY(100deg);opacity:1}100%{transform:rotateY(112deg);opacity:0}}
@keyframes oRig{0%{transform:rotateY(0)}38%{transform:rotateY(-20deg)}54%{transform:rotateY(-22deg)}82%{transform:rotateY(-100deg);opacity:1}100%{transform:rotateY(-112deg);opacity:0}}

/* repujado: relieve con luz arriba-izquierda */
.emb{fill:#f7f0e4;stroke:#e2d3ba;stroke-width:.7;
  filter:drop-shadow(1.2px 1.2px 0.6px rgba(255,255,255,.95)) drop-shadow(-1px -1px 1px rgba(150,115,70,.38))}
.emb-stem{fill:none;stroke:#e2d3ba;stroke-width:2;stroke-linecap:round;
  filter:drop-shadow(1px 1px .5px rgba(255,255,255,.95)) drop-shadow(-.8px -.8px .8px rgba(150,115,70,.35))}

/* sello de lacre */
.seal{position:absolute;z-index:6;left:50%;top:37%;width:92px;height:92px;margin:-46px 0 0 -46px;border:0;cursor:pointer;
  border-radius:52% 48% 50% 50% / 50% 52% 48% 50%;
  background:radial-gradient(circle at 35% 30%,#ffffff,#f3ead9 55%,#e1d2b6 100%);
  box-shadow:0 6px 14px rgba(90,60,20,.35),inset 0 2px 3px #fff,inset 0 -3px 5px rgba(150,115,70,.35);
  display:grid;place-items:center;transition:transform .5s ease,opacity .5s ease;animation:pulse 2.4s ease-in-out infinite}
.seal::before{content:"";position:absolute;inset:9px;border-radius:50%;border:1.5px solid rgba(185,143,69,.45);box-shadow:inset 0 1px 2px rgba(255,255,255,.9)}
.seal span{font-family:'Great Vibes',cursive;font-size:34px;color:var(--gold);text-shadow:0 1px 0 #fff,0 -1px 1px rgba(120,90,40,.4);line-height:1}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.env.open .seal{animation:none}
.hint{position:absolute;z-index:6;left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:90%;padding:9px 18px;border-radius:999px;background:rgba(255,255,255,.9);box-shadow:0 2px 10px rgba(120,90,40,.2);bottom:calc(7% + env(safe-area-inset-bottom));text-align:center;letter-spacing:.35em;text-transform:uppercase;font-size:12px;font-weight:600;color:#7a5a22;animation:hintblink 2s ease-in-out infinite;transition:opacity .4s}
.env.open .hint{opacity:0}
@keyframes blink{0%,100%{opacity:.4}50%{opacity:1}}

/* destello + chispas */
.flash{position:absolute;inset:-20%;z-index:9;pointer-events:none;opacity:0;
  background:radial-gradient(circle,#fff 0%,#fff3cf 30%,rgba(255,225,150,.6) 50%,transparent 72%)}
.flash.go{animation:flash 1.4s ease-out forwards}
@keyframes flash{0%{opacity:0;transform:scale(.15)}35%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.6)}}
#spark{position:absolute;inset:0;z-index:8;pointer-events:none;width:100%;height:100%}

/* ---------- TARJETA INTERIOR ---------- */
.card{position:absolute;inset:0;z-index:2;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;
  opacity:0;visibility:hidden;transform:scale(1.05);transition:opacity 1.4s ease,transform 1.8s ease,visibility 0s 1.4s;
  background:
   radial-gradient(circle at 20% 10%,rgba(233,211,160,.25),transparent 40%),
   radial-gradient(circle at 80% 90%,rgba(233,211,160,.25),transparent 40%),var(--ivory)}
.card.show{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.frame{position:absolute;inset:10px;z-index:4;pointer-events:none;border:1px solid var(--gold);opacity:0;transition:opacity 1.5s ease 1s}
.frame::after{content:"";position:absolute;inset:4px;border:1px solid rgba(185,143,69,.45)}
.frame.show{opacity:1}
section{position:relative;padding:56px 34px;text-align:center}
.reveal{opacity:0;transform:translateY(22px);transition:opacity 1s ease,transform 1s ease}
.reveal.in{opacity:1;transform:none}
.eyebrow{letter-spacing:.32em;text-transform:uppercase;font-size:12px;color:var(--gold);margin-bottom:14px}
h2.script{font-size:42px;color:var(--gold);line-height:1.1;margin-bottom:10px}
p{font-size:19px;line-height:1.55}

.hero{min-height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding-top:calc(44px + env(safe-area-inset-top))}
.arch{position:relative;width:100%;max-width:340px;padding:150px 28px 54px;border-radius:999px 999px 0 0;
  border:1.5px solid var(--gold);
  background:linear-gradient(180deg,#fff4dc 0%,#fdf0dd 45%,#fbf7ef 100%);
  box-shadow:inset 0 0 0 6px var(--ivory),inset 0 0 0 7px rgba(185,143,69,.5),0 18px 40px rgba(150,115,60,.18)}
.arch .pre{font-size:17px;letter-spacing:.06em}
.arch .names{font-size:58px;color:var(--gold);line-height:1.02;margin:12px 0 6px}
.arch .amp{display:block;font-size:34px;color:#c9ab6c}
.arch .date{margin-top:18px;letter-spacing:.3em;font-size:14px;text-transform:uppercase}
.floral{position:absolute;top:-10px;width:130px;height:147px;pointer-events:none}
.floral.l{left:-18px}.floral.r{right:-18px;transform:scaleX(-1)}
.g-fill{fill:var(--gold-soft);stroke:#c9a45c;stroke-width:.6}
.g-stem{fill:none;stroke:#c9a45c;stroke-width:1.4;stroke-linecap:round}
.scroll{margin-top:30px;font-size:12px;letter-spacing:.35em;text-transform:uppercase;color:var(--gold);animation:blink 2s infinite}
.scroll i{display:block;width:10px;height:10px;margin:8px auto 0;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(45deg)}

.divider{display:flex;align-items:center;justify-content:center;gap:12px;margin:22px auto;color:var(--gold)}
.divider::before,.divider::after{content:"";width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.divider::after{transform:scaleX(-1)}

.event{border:1px solid rgba(185,143,69,.55);padding:30px 22px;margin:18px 0;background:rgba(255,255,255,.55);position:relative}
.event::before{content:"";position:absolute;inset:4px;border:1px solid rgba(185,143,69,.25);pointer-events:none}
.event h3{font-family:'Great Vibes',cursive;font-weight:400;font-size:34px;color:var(--gold);margin-bottom:6px}
.event .when{font-weight:600;letter-spacing:.08em}
.btn{display:inline-block;margin-top:16px;padding:12px 26px;border:1px solid var(--gold);color:var(--gold);text-decoration:none;letter-spacing:.25em;text-transform:uppercase;font-size:12px;transition:.3s;background:transparent}
.btn:hover,.btn.solid{background:var(--gold);color:#fff}
.btn.solid:hover{filter:brightness(1.08)}

.count{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:20px}
.count div{border:1px solid rgba(185,143,69,.5);padding:14px 0}
.count b{display:block;font-size:34px;font-weight:500;color:var(--gold);line-height:1}
.count small{font-size:11px;letter-spacing:.2em;text-transform:uppercase}
footer{padding:50px 34px calc(70px + env(safe-area-inset-bottom));text-align:center}
footer .script{font-size:44px;color:var(--gold)}

.music{position:absolute;z-index:7;right:20px;bottom:20px;width:44px;height:44px;border-radius:50%;border:1px solid var(--gold);background:rgba(255,255,255,.85);color:var(--gold);font-size:18px;cursor:pointer;display:none;box-shadow:0 4px 12px rgba(120,90,40,.2)}
.music.on{display:block}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01s!important}}

/* video de apertura */
.env.hasvideo .hint{z-index:8}
.env.playing .hint{opacity:0}

/* botón sobre el sello cuando se usa video */
.sealhot{display:none;position:absolute;z-index:8;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;border:0;border-radius:50%;cursor:pointer;
  background:radial-gradient(circle,rgba(255,236,170,.0) 52%,rgba(255,226,140,.65) 68%,rgba(255,226,140,0) 72%);
  animation:ring 2.2s ease-out infinite;-webkit-tap-highlight-color:transparent}
.sealhot::after{content:"";position:absolute;inset:34px;border-radius:50%;box-shadow:0 0 22px 8px rgba(255,226,140,.55);animation:blink 2s ease-in-out infinite}
@keyframes ring{0%{transform:scale(.75);opacity:.95}100%{transform:scale(1.55);opacity:0}}
.env.hasvideo .sealhot{display:block}
.env.playing .sealhot{display:none}

/* monograma superpuesto sobre el sello del video (personalizable por cliente) */
.mono-ov{display:none;position:absolute;z-index:8;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;
  font-family:'Great Vibes',cursive;line-height:1;white-space:nowrap;
  font-size:calc(min(100vw,480px) * var(--ms,.11));
  color:var(--gold);
  text-shadow:0 1px 0 rgba(255,246,214,.85),0 -1px 1px rgba(110,78,28,.45),0 0 10px rgba(255,214,120,.45);
  animation:monoglow 2.4s ease-in-out infinite;transition:opacity .9s ease}
.mono-ov span{display:inline-block}
.mono-ov .m1{transform:translate(8%,-14%)}
.mono-ov .am{font-size:.62em;margin:0 -.04em;transform:translateY(-4%)}
.mono-ov .m2{transform:translate(-8%,16%)}
.env.hasvideo .mono-ov{display:block}
.mono-ov.fade{opacity:0}
@keyframes monoglow{0%,100%{text-shadow:0 1px 0 rgba(255,246,214,.85),0 -1px 1px rgba(110,78,28,.45),0 0 8px rgba(255,214,120,.35)}
  50%{text-shadow:0 1px 0 rgba(255,246,214,.95),0 -1px 1px rgba(110,78,28,.45),0 0 22px rgba(255,222,140,.95),0 0 40px rgba(255,214,120,.6)}}

@keyframes hintblink{0%,100%{opacity:.78}50%{opacity:1}}

/* fondo de papel repujado (opcional) */
.paper-bg{display:none;position:absolute;inset:0;z-index:1;background:#e0d3c0;overflow:hidden}
.paper-bg i{position:absolute;top:0;bottom:0;width:50%;background-repeat:no-repeat;background-size:auto 100%}
.paper-bg .pl{left:0;background-position:left center;-webkit-mask-image:linear-gradient(90deg,#000 55%,transparent 100%);mask-image:linear-gradient(90deg,#000 55%,transparent 100%)}
.paper-bg .pr{right:0;background-position:right center;-webkit-mask-image:linear-gradient(270deg,#000 55%,transparent 100%);mask-image:linear-gradient(270deg,#000 55%,transparent 100%)}
.paper-bg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
   linear-gradient(90deg,rgba(236,227,210,0) 6%,rgba(236,227,210,.62) 30%,rgba(236,227,210,.62) 70%,rgba(236,227,210,0) 94%),
   radial-gradient(ellipse at 50% 38%,rgba(255,255,255,.2),rgba(255,255,255,0) 70%)}
.inv.has-paper .paper-bg{display:block}
.inv.has-paper .card{background:transparent}

/* legibilidad sobre el relieve */
.inv.has-paper .floral{display:none}
.inv.has-paper .reveal h2,.inv.has-paper .reveal p,.inv.has-paper .eyebrow{text-shadow:0 0 10px rgba(240,232,216,.9),0 0 3px rgba(240,232,216,.8)}
.inv.has-paper .event{background:rgba(250,246,238,.78)}