*{box-sizing:border-box}
:root{--bg:#eee3d2;--paper:#fbf6ee;--ink:#675a4c;--line:rgba(94,77,59,.18);--brown:#81705e}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:Montserrat,sans-serif}
body{overflow:hidden}
button,input,select,textarea{font:inherit}
button{cursor:pointer}

/* COVER */
.cover{position:fixed;inset:0;background:#eadfcd;display:flex;align-items:center;justify-content:center;overflow:hidden;perspective:1400px}
.cover-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.seal-hotspot{
  position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);
  width:min(30vw,150px);aspect-ratio:1;border-radius:50%;border:0;background:transparent;z-index:10;
  -webkit-tap-highlight-color:transparent
}

/* animated duplicate of the envelope flap, clipped from the same exact cover image */
.flap-anim{
  position:absolute;inset:0;z-index:5;transform-origin:50% 44%;
  clip-path:polygon(3% 31%,97% 31%,70% 58%,50% 64%,30% 58%);
  backface-visibility:hidden;transform-style:preserve-3d;pointer-events:none;
}
.flap-anim img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.seal-glow{
  position:absolute;left:50%;top:58%;width:min(24vw,118px);aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);z-index:8;pointer-events:none;
  box-shadow:0 8px 28px rgba(91,58,25,.0),inset 0 0 0 0 rgba(255,232,175,.0)
}
.cover.opening .seal-glow{animation:sealPulse .55s ease forwards}
.cover.opening .flap-anim{animation:flapOpen 1.15s cubic-bezier(.32,.02,.19,1) forwards}
.cover.opening .cover-image{animation:baseShift 1.15s ease forwards}
.cover.opening{animation:coverAway .72s 1s ease forwards}
@keyframes sealPulse{
  0%{transform:translate(-50%,-50%) scale(.94);box-shadow:0 8px 25px rgba(91,58,25,.1)}
  45%{transform:translate(-50%,-50%) scale(1.08);box-shadow:0 12px 34px rgba(91,58,25,.35),inset 0 0 0 4px rgba(255,235,188,.18)}
  100%{transform:translate(-50%,-50%) scale(.72);opacity:0}
}
@keyframes flapOpen{
  0%{transform:rotateX(0deg) translateY(0);filter:brightness(1)}
  45%{transform:rotateX(-42deg) translateY(-1.5%);filter:brightness(1.03)}
  100%{transform:rotateX(-165deg) translateY(-5%);filter:brightness(.92)}
}
@keyframes baseShift{
  0%{transform:scale(1)}
  100%{transform:scale(1.015)}
}
@keyframes coverAway{to{opacity:0;visibility:hidden;transform:scale(1.018)}}

/* INVITATION */
.invitation-view{min-height:100dvh;background:var(--bg);padding-bottom:max(18px,env(safe-area-inset-bottom));overflow:auto}
.invitation-container{display:flex;justify-content:center;width:100%;background:var(--bg)}
.invitation-image{display:block;width:100%;height:auto;max-width:760px;object-fit:contain}
.actions{
 position:sticky;bottom:0;display:flex;gap:10px;padding:12px max(12px,env(safe-area-inset-left));
 background:rgba(238,227,210,.94);backdrop-filter:blur(12px);z-index:10
}
.action{flex:1;border-radius:999px;padding:16px 12px;font-size:12px;letter-spacing:.08em;border:1px solid rgba(92,75,56,.16)}
.secondary{background:#f4e9da;color:#6c5e50}
.primary{background:#806f5d;color:#fff}

/* MODALS */
.modal{border:0;padding:0;background:transparent;width:min(92vw,680px);max-height:92dvh}
.modal::backdrop{background:rgba(50,43,35,.55);backdrop-filter:blur(4px)}
.sheet{position:relative;background:#fbf6ee;border-radius:28px;padding:34px 26px;max-height:92dvh;overflow:auto;box-shadow:0 22px 55px rgba(58,44,31,.22)}
.close{position:absolute;right:14px;top:10px;border:0;background:transparent;font-size:34px;color:#756654}
.kicker{font-size:11px;letter-spacing:.25em}
h2{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(38px,8vw,56px);line-height:1;margin:16px 0 28px}
.day{border-top:1px solid var(--line);padding:24px 0}
.day-title{font-size:13px;letter-spacing:.18em;margin-bottom:15px}
.item{margin:14px 0}
.item>div,.plain{font-family:"Cormorant Garamond",serif;font-size:25px;line-height:1.25}
.item a{display:inline-block;margin-top:6px;color:#756451;text-underline-offset:4px}
.plain{margin:10px 0}
fieldset{border:0;border-top:1px solid var(--line);padding:20px 0;margin:0}
legend{font-family:"Cormorant Garamond",serif;font-size:24px;padding:0 0 10px}
.choice{display:flex;gap:10px;padding:7px 0;align-items:center}
.field{display:block;margin:18px 0}
.field span{display:block;font-family:"Cormorant Garamond",serif;font-size:22px;margin-bottom:8px}
input[type=text],select,textarea{width:100%;border:1px solid var(--line);background:#fff;border-radius:12px;padding:13px;color:#564d44}
.submit{width:100%;border:0;border-radius:999px;padding:16px;background:#81705e;color:#fff;letter-spacing:.08em;margin-top:4px}
.honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}

@media (prefers-reduced-motion:reduce){
  .cover.opening .seal-glow,.cover.opening .flap-anim,.cover.opening .cover-image,.cover.opening{animation-duration:.01ms!important;animation-delay:0ms!important}
}


/* Personalización del sobre */
.family-on-envelope{
  position:absolute;
  left:9%;
  right:9%;
  top:44.2%;
  z-index:9;
  text-align:center;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(20px,5.8vw,34px);
  font-weight:500;
  color:#68594a;
  letter-spacing:.025em;
  line-height:1.05;
  text-shadow:0 1px 0 rgba(255,255,255,.42);
  pointer-events:none;
  transition:opacity .35s ease, transform .55s ease;
}

/* La tarjeta asoma detrás del sobre antes de entrar a pantalla completa */
.card-peek{
  position:absolute;
  left:14%;
  right:14%;
  top:31%;
  height:48%;
  z-index:2;
  overflow:hidden;
  border-radius:10px;
  box-shadow:0 14px 38px rgba(67,46,27,.16);
  transform:translateY(25%) scale(.94);
  opacity:0;
  pointer-events:none;
  transform-origin:center bottom;
}
.card-peek img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}

/* Copia exacta del sello de la imagen para darle relieve real durante el toque */
.seal-piece{
  position:absolute;
  inset:0;
  z-index:9;
  clip-path:circle(min(12vw,60px) at 50% 58%);
  pointer-events:none;
  transform-origin:50% 58%;
  filter:drop-shadow(0 5px 7px rgba(74,45,17,.24));
}
.seal-piece img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Secuencia de apertura más suave y profunda */
.cover.opening .seal-piece{
  animation:sealLift .72s cubic-bezier(.2,.75,.2,1) forwards;
}
.cover.opening .seal-glow{
  animation:sealPulseV2 .7s ease forwards;
}
.cover.opening .flap-anim{
  animation:flapOpenV2 1.15s cubic-bezier(.22,.72,.18,1) forwards;
}
.cover.opening .card-peek{
  animation:cardRise 1.18s .22s cubic-bezier(.16,.82,.22,1) forwards;
}
.cover.opening .family-on-envelope{
  animation:familyFade .55s .1s ease forwards;
}
.cover.opening .cover-image{
  animation:envelopeSettle 1.22s ease forwards;
}
.cover.opening{
  animation:coverAwayV2 .72s 1.12s ease forwards;
}

@keyframes sealLift{
  0%{transform:translateY(0) scale(1);opacity:1;filter:drop-shadow(0 5px 7px rgba(74,45,17,.24))}
  38%{transform:translateY(-5px) scale(1.10) rotate(-2deg);opacity:1;filter:drop-shadow(0 12px 16px rgba(74,45,17,.34))}
  70%{transform:translateY(6px) scale(.84) rotate(3deg);opacity:.78}
  100%{transform:translateY(18px) scale(.62) rotate(5deg);opacity:0}
}
@keyframes sealPulseV2{
  0%{transform:translate(-50%,-50%) scale(.9);opacity:0}
  32%{transform:translate(-50%,-50%) scale(1.18);opacity:.5;box-shadow:0 16px 42px rgba(91,58,25,.34)}
  100%{transform:translate(-50%,-50%) scale(1.45);opacity:0}
}
@keyframes flapOpenV2{
  0%{transform:perspective(1100px) rotateX(0deg) translateY(0);filter:brightness(1)}
  28%{transform:perspective(1100px) rotateX(-18deg) translateY(-.4%);filter:brightness(1.025)}
  68%{transform:perspective(1100px) rotateX(-112deg) translateY(-3%);filter:brightness(.98)}
  100%{transform:perspective(1100px) rotateX(-168deg) translateY(-5.5%);filter:brightness(.91);opacity:.45}
}
@keyframes cardRise{
  0%{transform:translateY(25%) scale(.94);opacity:0}
  28%{opacity:.45}
  72%{transform:translateY(-12%) scale(.985);opacity:1}
  100%{transform:translateY(-28%) scale(1.015);opacity:1}
}
@keyframes familyFade{
  to{opacity:0;transform:translateY(-8px)}
}
@keyframes envelopeSettle{
  0%{transform:scale(1) translateY(0)}
  60%{transform:scale(1.008) translateY(1.2%)}
  100%{transform:scale(1.018) translateY(2%)}
}
@keyframes coverAwayV2{
  to{opacity:0;visibility:hidden;transform:scale(1.025)}
}


/* === CORRECCIÓN FINAL: UNA SOLA PORTADA / SIN DOBLE SOBRE === */
.card-peek,.flap-anim,.seal-piece,.seal-glow{display:none!important}

.family-on-envelope{
  position:absolute;
  left:18%;
  right:18%;
  top:48.2%;
  z-index:9;
  text-align:center;
  font-family:"Cormorant Garamond",serif;
  color:#6b5b4b;
  line-height:1.02;
  pointer-events:none;
  text-shadow:0 1px rgba(255,255,255,.38);
}
.family-on-envelope .small-line{
  display:block;
  font-size:clamp(15px,4vw,23px);
  font-style:italic;
  font-weight:500;
}
.family-on-envelope .family-line{
  display:block;
  margin-top:1px;
  font-size:clamp(17px,4.5vw,27px);
  font-style:italic;
  font-weight:500;
}

.cover-image{
  transform-origin:center 58%;
  will-change:transform,filter,opacity;
}
.cover.opening .cover-image{
  animation:singleEnvelopeOpen 1.18s cubic-bezier(.18,.78,.22,1) forwards!important;
}
.cover.opening .family-on-envelope{
  animation:familySoftFade .48s .15s ease forwards;
}
.cover.opening{
  animation:singleCoverAway .64s 1.03s ease forwards!important;
}
@keyframes singleEnvelopeOpen{
  0%{transform:scale(1);filter:brightness(1)}
  22%{transform:scale(1.012);filter:brightness(1.025)}
  55%{transform:scale(1.03) translateY(1.2%);filter:brightness(1.015)}
  100%{transform:scale(1.06) translateY(2.5%);filter:brightness(.99)}
}
@keyframes familySoftFade{
  to{opacity:0;transform:translateY(-5px)}
}
@keyframes singleCoverAway{
  to{opacity:0;visibility:hidden;transform:scale(1.01)}
}


/* Ajuste final solicitado para el nombre personalizado */
.family-on-envelope{
  left:38% !important;
  right:auto !important;
  top:73% !important;
  width:42% !important;
  transform:translate(-38%,-73%) !important;
  text-align:center !important;
}
.family-on-envelope .small-line{
  display:block;
  font-size:clamp(14px,3.7vw,21px);
  line-height:1.05;
}
.family-on-envelope .family-line{
  display:block;
  margin-top:1px;
  font-size:clamp(16px,4.2vw,25px);
  line-height:1.05;
}
.cover.opening .family-on-envelope{
  animation:familySoftFadeFinal .48s .15s ease forwards !important;
}
@keyframes familySoftFadeFinal{
  to{opacity:0;transform:translate(-38%,-78%)}
}


/* === AJUSTE FINAL: NOMBRE ENCIMA DEL SELLO === */
.family-on-envelope{
  left:50% !important;
  right:auto !important;
  top:56.8% !important;
  width:58% !important;
  transform:translate(-50%,-50%) !important;
  text-align:center !important;
  z-index:9 !important;
}
.family-on-envelope .small-line{
  display:block;
  font-size:clamp(14px,3.7vw,21px) !important;
  line-height:1.05 !important;
}
.family-on-envelope .family-line{
  display:block;
  margin-top:1px !important;
  font-size:clamp(16px,4.2vw,25px) !important;
  line-height:1.05 !important;
}
.cover.opening .family-on-envelope{
  animation:familyFadeAboveSeal .48s .15s ease forwards !important;
}
@keyframes familyFadeAboveSeal{
  to{opacity:0;transform:translate(-50%,-56%)}
}


/* === PORTADA APROBADA FINAL === */
.cover{
  background:#eadfcd !important;
}
.cover-image{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
}
.family-on-envelope{
  display:none !important;
}

/* Apertura limpia conservando el resto de la web */
.cover.opening .cover-image{
  animation:approvedCoverOpen 1.08s cubic-bezier(.18,.78,.22,1) forwards !important;
}
.cover.opening{
  animation:approvedCoverAway .62s .95s ease forwards !important;
}
@keyframes approvedCoverOpen{
  0%{transform:scale(1);filter:brightness(1)}
  28%{transform:scale(1.012);filter:brightness(1.02)}
  70%{transform:scale(1.035) translateY(1%);filter:brightness(1.01)}
  100%{transform:scale(1.06) translateY(2%);filter:brightness(.99)}
}
@keyframes approvedCoverAway{
  to{opacity:0;visibility:hidden;transform:scale(1.01)}
}


/* === APERTURA MÁS RÁPIDA === */
.cover.opening .cover-image{
  animation:approvedCoverOpenFast .48s cubic-bezier(.18,.78,.22,1) forwards !important;
}
.cover.opening{
  animation:approvedCoverAwayFast .28s .38s ease forwards !important;
}
@keyframes approvedCoverOpenFast{
  0%{transform:scale(1);filter:brightness(1)}
  45%{transform:scale(1.018);filter:brightness(1.02)}
  100%{transform:scale(1.045) translateY(1.5%);filter:brightness(.99)}
}
@keyframes approvedCoverAwayFast{
  to{opacity:0;visibility:hidden;transform:scale(1.01)}
}


/* === CORRECCIÓN: SIN BARRAS/LINEAS DEL MOCKUP === */
.cover{
  background:#eadfcd !important;
  overflow:hidden !important;
}
.cover-image{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
}

/* Nombre personalizado, debajo de “Tenemos algo que contaros...” y encima del sello */
.family-on-envelope{
  display:block !important;
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  top:48.8% !important;
  width:62% !important;
  transform:translate(-50%,-50%) !important;
  text-align:center !important;
  z-index:12 !important;
  font-family:"Cormorant Garamond",serif !important;
  color:#6a5a49 !important;
  line-height:1.03 !important;
  pointer-events:none !important;
  text-shadow:0 1px rgba(255,255,255,.35) !important;
}
.family-on-envelope .small-line{
  display:block !important;
  font-size:clamp(15px,3.8vw,22px) !important;
  font-style:italic !important;
  font-weight:500 !important;
}
.family-on-envelope .family-line{
  display:block !important;
  margin-top:1px !important;
  font-size:clamp(17px,4.4vw,26px) !important;
  font-style:italic !important;
  font-weight:500 !important;
}

/* Mantener apertura rápida */
.cover.opening .cover-image{
  animation:cleanFastOpen .46s cubic-bezier(.18,.78,.22,1) forwards !important;
}
.cover.opening .family-on-envelope{
  animation:cleanFamilyFade .34s .08s ease forwards !important;
}
.cover.opening{
  animation:cleanCoverAway .24s .34s ease forwards !important;
}
@keyframes cleanFastOpen{
  0%{transform:scale(1);filter:brightness(1)}
  50%{transform:scale(1.015);filter:brightness(1.02)}
  100%{transform:scale(1.04) translateY(1%);filter:brightness(.99)}
}
@keyframes cleanFamilyFade{
  to{opacity:0;transform:translate(-50%,-56%)}
}
@keyframes cleanCoverAway{
  to{opacity:0;visibility:hidden;transform:scale(1.01)}
}


/* === PORTADA FINAL APROBADA === */
.cover{
  background:#eadfcd !important;
  overflow:hidden !important;
}
.cover-image{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
}
.family-on-envelope{display:none !important;}

.cover.opening .cover-image{
  animation:finalFastOpen .46s cubic-bezier(.18,.78,.22,1) forwards !important;
}
.cover.opening{
  animation:finalFastAway .24s .34s ease forwards !important;
}
@keyframes finalFastOpen{
  0%{transform:scale(1);filter:brightness(1)}
  50%{transform:scale(1.015);filter:brightness(1.02)}
  100%{transform:scale(1.04) translateY(1%);filter:brightness(.99)}
}
@keyframes finalFastAway{
  to{opacity:0;visibility:hidden;transform:scale(1.01)}
}


/* === PERSONALIZACIÓN DINÁMICA PARA TODOS LOS INVITADOS === */
.family-on-envelope{
  display:block !important;
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  top:50.7% !important;
  width:68% !important;
  transform:translate(-50%,-50%) !important;
  text-align:center !important;
  z-index:12 !important;
  font-family:"Cormorant Garamond",serif !important;
  color:#6a5a49 !important;
  line-height:1.03 !important;
  pointer-events:none !important;
  text-shadow:0 1px rgba(255,255,255,.35) !important;
}
.family-on-envelope .small-line{
  display:block !important;
  font-size:clamp(15px,3.7vw,22px) !important;
  font-style:italic !important;
  font-weight:500 !important;
}
.family-on-envelope .family-line{
  display:block !important;
  margin-top:1px !important;
  font-size:clamp(17px,4.4vw,26px) !important;
  font-style:italic !important;
  font-weight:500 !important;
}
.family-on-envelope .single-line{
  display:block !important;
  font-size:clamp(17px,4.4vw,26px) !important;
  font-style:italic !important;
  font-weight:500 !important;
}
.cover.opening .family-on-envelope{
  animation:guestNameFade .32s .06s ease forwards !important;
}
@keyframes guestNameFade{
  to{opacity:0;transform:translate(-50%,-56%)}
}


/* === AJUSTE FINAL COMO IMAGEN 2 === */
.family-on-envelope{
  display:block !important;
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  top:39.8% !important;
  width:72% !important;
  transform:translate(-50%,-50%) !important;
  text-align:center !important;
  z-index:12 !important;
  font-family:"Cormorant Garamond",serif !important;
  color:#6a5a49 !important;
  line-height:1.04 !important;
  pointer-events:none !important;
  text-shadow:0 1px rgba(255,255,255,.32) !important;
}
.family-on-envelope .small-line{
  display:block !important;
  font-size:clamp(15px,3.8vw,22px) !important;
  font-style:italic !important;
  font-weight:500 !important;
}
.family-on-envelope .family-line{
  display:block !important;
  margin-top:2px !important;
  font-size:clamp(17px,4.4vw,27px) !important;
  font-style:italic !important;
  font-weight:500 !important;
}
.family-on-envelope .single-line{
  display:block !important;
  font-size:clamp(17px,4.4vw,27px) !important;
  font-style:italic !important;
  font-weight:500 !important;
}
.cover.opening .family-on-envelope{
  animation:guestNameFadeImage2 .30s .05s ease forwards !important;
}
@keyframes guestNameFadeImage2{
  to{opacity:0;transform:translate(-50%,-57%)}
}



/* === AJUSTE FINO: NOMBRE ENTRE RAMAS Y SELLO === */
.family-on-envelope{
  display:block !important;
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  top:43.8% !important;
  width:70% !important;
  transform:translate(-50%,-50%) !important;
  text-align:center !important;
  z-index:12 !important;
}
.family-on-envelope .small-line{
  display:block !important;
  font-size:clamp(14px,3.5vw,20px) !important;
  line-height:1.02 !important;
}
.family-on-envelope .family-line{
  display:block !important;
  margin-top:1px !important;
  font-size:clamp(16px,4.1vw,24px) !important;
  line-height:1.02 !important;
}
.family-on-envelope .single-line{
  display:block !important;
  font-size:clamp(16px,4.1vw,24px) !important;
  line-height:1.02 !important;
}


/* === PORTADA PRINCIPAL NUEVA + PERSONALIZACIÓN === */
.cover{
  background:#eadfcd !important;
}
.cover-image{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
}
.family-on-envelope{
  display:block !important;
  position:absolute !important;
  left:50% !important;
  top:49.5% !important;
  width:68% !important;
  transform:translate(-50%,-50%) !important;
  text-align:center !important;
  z-index:12 !important;
  font-family:"Cormorant Garamond",serif !important;
  color:#685847 !important;
  line-height:1.04 !important;
  pointer-events:none !important;
  font-style:italic !important;
  text-shadow:0 1px rgba(255,255,255,.30) !important;
}
.family-on-envelope::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:120%;
  height:150%;
  transform:translate(-50%,-50%);
  background:rgba(242,219,183,.90);
  border-radius:18px;
  z-index:-1;
}
.family-on-envelope .small-line{
  display:block !important;
  font-size:clamp(15px,3.7vw,22px) !important;
  font-weight:500 !important;
}
.family-on-envelope .family-line,
.family-on-envelope .single-line{
  display:block !important;
  margin-top:2px !important;
  font-size:clamp(17px,4.4vw,27px) !important;
  font-weight:500 !important;
}
.cover.opening .family-on-envelope{
  animation:familyFadeNewCover .30s .04s ease forwards !important;
}
@keyframes familyFadeNewCover{
  to{opacity:0;transform:translate(-50%,-57%)}
}


/* === NOMBRE SEPARADO DE LA IMAGEN === */
.family-on-envelope{
  display:block !important;
  position:absolute !important;
  left:50% !important;
  top:43.6% !important;
  width:68% !important;
  transform:translate(-50%,-50%) !important;
  text-align:center !important;
  z-index:12 !important;
  font-family:"Cormorant Garamond",serif !important;
  color:#685847 !important;
  line-height:1.05 !important;
  pointer-events:none !important;
  font-style:italic !important;
  text-shadow:0 1px rgba(255,255,255,.28) !important;
  background:transparent !important;
}
.family-on-envelope::before{
  display:none !important;
  content:none !important;
}
.family-on-envelope .small-line{
  display:block !important;
  font-size:clamp(15px,3.8vw,22px) !important;
  font-weight:500 !important;
}
.family-on-envelope .family-line{
  display:block !important;
  margin-top:2px !important;
  font-size:clamp(17px,4.5vw,27px) !important;
  font-weight:500 !important;
}
.family-on-envelope .single-line{
  display:block !important;
  font-size:clamp(17px,4.5vw,27px) !important;
  font-weight:500 !important;
}
.cover.opening .family-on-envelope{
  animation:recipientFadeClean .30s .04s ease forwards !important;
}
@keyframes recipientFadeClean{
  to{opacity:0;transform:translate(-50%,-57%)}
}