:root{
  --navy:#07172b;
  --navy-2:#0b2038;
  --white:#f8f6f0;
  --gold:#d7b77a;
  --gold-soft:#b99558;
  --shadow:rgba(0,0,0,.42);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--navy);color:var(--white);font-family:Montserrat,Arial,sans-serif;font-weight:300}
button{font:inherit}
.hero{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:
    linear-gradient(rgba(3,14,27,.08),rgba(3,14,27,.18)),
    url("assets/backgrounds/background-boda.png") center center / cover no-repeat;
}
.grain{position:absolute;inset:0;opacity:.13;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E")}
.gold-frame{position:absolute;inset:18px;border:1px solid rgba(215,183,122,.6);pointer-events:none}
.gold-frame:before,.gold-frame:after{content:"✦";position:absolute;color:var(--gold);font-size:15px}
.gold-frame:before{left:-7px;top:50%;transform:translateY(-50%)}
.gold-frame:after{right:-7px;top:14%;transform:translateY(-50%)}
.top{position:relative;z-index:4;display:flex;justify-content:space-between;align-items:flex-start;padding:34px 7vw}
.eyebrow{margin:0;letter-spacing:.38em;font-size:11px;line-height:1.8;color:#eee6d8}
.music{display:flex;align-items:center;gap:12px;background:none;border:0;color:#f4ead9;letter-spacing:.08em;font-size:12px;cursor:pointer;padding:5px}
.music-note{font-size:25px;color:var(--gold)}
.speaker{font-size:20px}
.intro{position:relative;z-index:2;text-align:center}
.wedding-title{font-family:"Cormorant Garamond",serif;font-weight:500;letter-spacing:.34em;font-size:13px;color:#eee6d8;margin:0 0 18px}
.monogram{font-family:"Cormorant Garamond",serif;font-size:78px;line-height:.8;color:#e5c98e;letter-spacing:-.08em;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.monogram span{font-size:.65em}
.intro h1{font-family:"Allura","Cormorant Garamond",serif;font-weight:400;letter-spacing:.02em;font-size:58px;line-height:1;margin:0 0 12px;color:#f4ead9}
.intro h1 span{font-family:"Cormorant Garamond",serif;color:var(--gold);font-size:.72em;margin:0 .12em}
.rule{width:105px;height:1px;background:var(--gold);margin:0 auto 14px;opacity:.8}
.date{letter-spacing:.35em;font-size:12px;margin:0 0 9px}
.quote{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:22px;line-height:1.25;color:#ddc49a;margin:25px auto 0;max-width:520px}
.envelope-stage{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;margin-top:24px}
.envelope{position:relative;width:min(62vw,610px);aspect-ratio:1.65/1;filter:drop-shadow(0 28px 35px var(--shadow));transition:transform 1s ease}
.env-back{position:absolute;inset:0;background:linear-gradient(145deg,#152e47,#07172b 70%);border:1px solid rgba(215,183,122,.75);border-radius:2px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);overflow:hidden}
.env-back:after{content:"";position:absolute;inset:0;opacity:.25;background:repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 1px,transparent 1px 5px)}
.flap{position:absolute;transition:transform 1.15s cubic-bezier(.77,0,.18,1),opacity .55s ease;transform-origin:center}
.flap-top{inset:0;background:#0d2239;clip-path:polygon(0 0,100% 0,50% 58%);border-top:1px solid rgba(215,183,122,.75);z-index:5}
.flap-bottom{inset:0;background:#0a1b30;clip-path:polygon(0 100%,100% 100%,50% 43%);z-index:6}
.flap-left{inset:0;background:#102942;clip-path:polygon(0 0,50% 50%,0 100%);z-index:7}
.flap-right{inset:0;background:#0b2038;clip-path:polygon(100% 0,50% 50%,100% 100%);z-index:7}
.flap:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(215,183,122,.45)}
.card{position:absolute;left:9%;right:9%;top:7%;bottom:7%;background:var(--white);color:#152033;padding:9px;z-index:3;transform:translateY(0);transition:transform 1.25s cubic-bezier(.2,.8,.2,1),z-index 0s 0s}
.card-border{height:100%;border:1px solid #c9a96e;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;font-family:"Cormorant Garamond",serif}
.card-monogram{font-size:30px;color:#9a7844}
.card strong{font-size:21px;letter-spacing:.18em;font-weight:500}
.card small{font-family:Montserrat,sans-serif;letter-spacing:.25em;font-size:9px}
.seal{
  position:absolute;
  z-index:10;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:128px;
  height:128px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:transparent;
  box-shadow:none;
  cursor:pointer;
  transition:transform .65s cubic-bezier(.2,.9,.2,1),opacity .45s;
}
.open-button{margin-top:28px;min-width:290px;padding:14px 28px;border:1px solid #e2bd79;border-radius:40px;background:transparent;color:#f3e5ce;letter-spacing:.3em;font-size:11px;cursor:pointer;transition:.3s}
.open-button:hover{background:rgba(215,183,122,.1);transform:translateY(-2px)}
.open-button span{font-size:20px;vertical-align:-2px;margin-left:12px;color:var(--gold)}
.hint{font-size:10px;letter-spacing:.15em;color:#bba98a;margin:13px 0 0;opacity:.8}
.bottom{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:flex-end;padding:26px 8vw 30px;color:#d7c6a8}
.scroll{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:22px}
.scroll span{font-size:8px;letter-spacing:.3em}
.bottom p{font-family:"Cormorant Garamond",serif;font-style:italic;text-align:right;font-size:16px;line-height:1.2;margin:0}
.after{min-height:100svh;background:var(--white);color:#132033;display:grid;place-items:center;padding:70px 8vw}
.after-inner{text-align:center;max-width:650px}
.small-mark{color:#9a7844;letter-spacing:.25em}
.after h2{font-family:"Cormorant Garamond",serif;font-size:48px;font-weight:500;margin:18px 0}
.after p{line-height:1.8;color:#4b5563}
.line{width:80px;height:1px;background:#b99558;margin:30px auto}
.signature{font-family:"Cormorant Garamond",serif;font-size:28px!important;font-style:italic}

.opened .flap-top{
  transform:translateY(-115%) rotateX(18deg) scale(.96);
  opacity:0;
  z-index:1;
}
.opened .flap-left{
  transform:translateX(-125%) rotate(-10deg) scale(.94);
  opacity:0;
}
.opened .flap-right{
  transform:translateX(125%) rotate(10deg) scale(.94);
  opacity:0;
}
.opened .flap-bottom{
  transform:translateY(125%) rotateX(-12deg) scale(.94);
  opacity:0;
}
.opened .card{
  transform:translateY(-45%) scale(1.02);
  z-index:12;
}
.opened .seal{
  transform:translate(-50%,-50%) scale(.05) rotate(45deg);
  opacity:0;
}
.opened.envelope{transform:translateY(-5px)}
.opened + .open-button{opacity:.35;pointer-events:none}

@media (max-width:700px){
  .gold-frame{inset:10px}
  .top{padding:25px 7vw}
  .eyebrow{font-size:8px}
  .music{font-size:9px;gap:7px}
  .music-note{font-size:20px}
  .monogram{font-size:62px}
  .wedding-title{font-size:10px;letter-spacing:.28em;margin-bottom:14px}
  .intro h1{font-size:46px;margin:0 0 10px}
  .quote{font-size:20px;margin-top:18px}
  .envelope-stage{margin-top:28px}
  .envelope{width:82vw}
  .seal{width:105px;height:105px}
  .seal span{font-size:18px}
  .open-button{min-width:250px;font-size:9px;margin-top:22px}
  .bottom{padding:24px 10vw 28px}
  .bottom p{display:none}
}

/* En portada móvil, la frase debe respetar siempre el marco dorado. */
@media (max-width:700px){
  .intro{
    width:100%;
    padding:0 20px;
  }
  .quote{
    width:100%;
    max-width:340px;
    margin-left:auto;
    margin-right:auto;
    font-size:19px;
    line-height:1.22;
  }
}

/* Imagen del sello dentro del sobre */
.seal img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 0;
}


/* Flujo de apertura: portada -> contenido del sobre -> página principal */
.open-button {
  position: relative;
  z-index: 20;
}

.envelope-stage.opened .hint {
  opacity: 0;
}

.after {
  min-height: 100svh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(215,184,120,.10), transparent 32%),
    #f8f4ea;
  color: #182333;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(18px);
  transition: opacity 1s ease, transform 1s ease, visibility 1s ease;
}

.after.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.after-inner {
  width: min(88%, 780px);
  text-align: center;
  padding: 80px 20px;
}

.after-title {
  font-family: "Cormorant Garamond", serif;
  letter-spacing: .30em;
  font-size: 12px;
  margin: 20px 0 18px;
  color: #9d7b3e;
}

.after h2 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  line-height: 1.05;
  margin: 0 auto 28px;
  color: #172334;
}

.after .welcome {
  max-width: 720px;
  margin: 0 auto;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  line-height: 1.55;
  color: #3a3d42;
}

.after .welcome strong {
  font-weight: 600;
}

.continue-button {
  margin-top: 34px;
  border: 1px solid #b99554;
  background: transparent;
  color: #705321;
  padding: 13px 25px;
  letter-spacing: .18em;
  font-size: .68rem;
  cursor: pointer;
  transition: .35s ease;
}

.continue-button:hover {
  background: #b99554;
  color: #fffaf0;
}

@media (max-width: 700px) {
  .after-inner { padding: 60px 18px; }
  .after .welcome { font-size: 1.08rem; }
}

/* Evita el "flash" del contenido posterior mientras carga la página */
.after {
  display: none !important;
}
.after.show {
  display: grid !important;
}

/* Fondo decorativo principal */
.botanical-left,
.botanical-right {
  display: none !important;
}

/* La portada ahora termina directamente en la invitación principal */
.transition-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}


/* ============================================================
   INVITACIÓN EN IFRAME
   El diseño de boda.html permanece completamente aislado.
   ============================================================ */

#invitationFrame {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 100;
  transition: opacity 1s ease, visibility 0s linear 1s;
}

#invitationFrame.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 1s ease;
}

#bodaFrame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Tarjeta de apertura — solo bienvenida y frase */
.card-welcome{
  display:block;
  margin-bottom:14px;
  color:#b99655;
  font-family:'Montserrat',sans-serif;
  font-size:clamp(17px,2.4vw,28px);
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
}
.card-phrase{
  display:block;
  max-width:90%;
  margin:0 auto;
  color:#26364d;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(22px,3.4vw,38px);
  font-weight:400;
  line-height:1.08;
}


/* Tarjeta de apertura: diseño gráfico aprobado */
.card{
  padding:0;
  overflow:hidden;
  background:#f8f6ef;
}
.card-welcome-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* ============================================================
   AJUSTE DE LA FRASE EN LA PORTADA — móvil
   No modifica el sobre; solo evita que la frase salga del marco.
   ============================================================ */
.quote{
  max-width:min(88vw,520px);
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  line-height:1.15;
  overflow-wrap:normal;
  word-break:normal;
}
@media (max-width:600px){
  .quote{
    max-width:82vw;
    font-size:clamp(20px,5.8vw,28px);
    line-height:1.12;
    padding:0 4px;
  }
}


/* "Toca para descubrir nuestra historia" — mismo tamaño que la frase principal */
.hint.same-as-quote{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-size:22px !important;
  line-height:1.25;
  letter-spacing:.01em;
}
@media(max-width:700px){
  .hint.same-as-quote{
    font-size:20px !important;
  }
}

/* Apertura del sobre más pausada, conservando exactamente la misma animación */
.envelope{
  transition:transform 1.45s ease !important;
}
.flap{
  transition:
    transform 1.70s cubic-bezier(.77,0,.18,1),
    opacity .90s ease !important;
}
.card{
  transition:
    transform 1.85s cubic-bezier(.2,.8,.2,1),
    z-index 0s 0s !important;
}
.seal{
  transition:
    transform 1.05s cubic-bezier(.2,.9,.2,1),
    opacity .75s !important;
}