/* =============================================================
   INTRO — Portada con sobre
   Desktop: fondo verde sólido, textos blancos (diseño original)
   Mobile: arco blanco central, textos verdes
   ============================================================= */

@font-face{
  font-family:'Great Vibes';
  src:url('fonts/GreatVibes-Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

body.intro-locked{overflow:hidden}

#intro{
  position:fixed;inset:0;z-index:99999;
  background:#706E46 url('assets/intro/fondo-intro.svg') center/cover no-repeat;
  color:#F5EFE6;
  overflow-y:auto;
  overflow-x:hidden;
  will-change:opacity, transform;
  -webkit-overflow-scrolling:touch;
}

/* ---- Florales PNG — ocultos, el SVG de fondo ya los trae ---- */
.intro-floral{
  display:none;
}
.fl-tl{top:0;left:0}
.fl-tr{top:0;right:0}
.fl-bl{bottom:0;left:0}
.fl-br{bottom:0;right:0}

/* ---- Arco blanco — OCULTO en desktop ---- */
.intro-arch{
  display:none;
}

/* ---- Contenedor centrado ---- */
.intro-inner{
  position:relative;z-index:2;
  min-height:100%;
  display:flex;flex-direction:column;align-items:center;
  padding:44px 20px 60px;
  gap:0;
  max-width:520px;
  margin:0 auto;
}

/* ---- Mes y año ---- */
.intro-mes{
  font-family:'Montserrat', sans-serif;
  font-size:clamp(11px, 2.6vw, 13px);
  letter-spacing:.35em;
  color:#F5EFE6;
  margin-bottom:10px;
  opacity:0;
  transform:translateY(-14px);
}

/* ---- Monograma R&K ---- */
.intro-monogram{
  display:block;
  width:min(240px, 50vw);
  height:auto;
  margin:0 auto 16px;
  filter:brightness(0) invert(1);
  opacity:0;
  transform:translateY(20px);
}

/* ---- Nombres en script (fallback) ---- */
.intro-couple{
  font-family:'English Script','Petit Formal Script','Allura','Great Vibes',cursive;
  color:#F5EFE6;
  text-align:center;
  line-height:.95;
  margin-bottom:26px;
  opacity:0;
  transform:translateY(20px);
}
.intro-couple .line1,
.intro-couple .line2{
  display:block;
  font-size:clamp(56px, 12vw, 96px);
  letter-spacing:0;
}
.intro-couple .amp{
  display:block;
  font-size:clamp(38px, 8vw, 62px);
  margin:2px 0;
  font-style:italic;
  opacity:.92;
}

/* ---- Sobre ---- */
.envelope-stage{
  position:relative;
  width:min(430px, 84vw);
  aspect-ratio: 3 / 2;
  cursor:pointer;
  outline:none;
  margin:2px 0 8px;
  perspective:1400px;
  transform-style:preserve-3d;
  z-index:3;
}
.envelope-stage:focus-visible{
  outline:2px dashed #F5EFE6;outline-offset:14px;border-radius:4px;
}
.env-shadow{
  position:absolute;
  left:8%;right:8%;bottom:-2%;
  height:10%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.35), transparent 70%);
  filter:blur(10px);
  z-index:0;
  opacity:0;
  transform:scaleX(.85);
}
.envelope-closed{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
  z-index:2;
  opacity:0;
  transform:translateY(30px) scale(.95);
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.35));
  will-change:opacity, transform;
}

/* ---- CTA ---- */
.intro-cta{
  text-align:center;
  margin:6px 0 44px;
  opacity:0;
  color:#F5EFE6;
}
.intro-cta .cta-top{
  font-family:'Montserrat', sans-serif;
  font-size:clamp(10px, 2.4vw, 12px);
  letter-spacing:.35em;
  margin-bottom:6px;
}
.intro-cta .cta-bottom{
  font-family:'English Script','Petit Formal Script','Allura','Great Vibes',cursive;
  font-size:clamp(22px, 5vw, 30px);
  font-style:italic;
  line-height:1;
}

/* ---- Divisor floral ---- */
.intro-divider{
  width:min(240px, 62vw);
  height:auto;
  margin:0 auto;
  opacity:0;
  transform:translateY(10px);
  display:block;
}
.intro-flores{
  width:min(280px, 68vw);
  filter:brightness(0) invert(1);
}

/* ---- Nombre del invitado ---- */
.intro-invitado{
  font-family:'Great Vibes','English Script','Petit Formal Script','Allura',cursive;
  font-size:clamp(34px, 7vw, 50px);
  color:#F5EFE6;
  text-align:center;
  margin:14px 0 16px;
  line-height:1;
  opacity:0;
  transform:translateY(12px);
}

/* ---- Reservado para N personas ---- */
.intro-reservado{
  text-align:center;
  margin-top:22px;
  color:#F5EFE6;
  opacity:0;
  transform:translateY(12px);
}
.intro-reservado .rsv-label{
  font-family:'Montserrat', sans-serif;
  font-size:clamp(10px, 2.4vw, 12px);
  letter-spacing:.35em;
  padding-left:.35em;
  line-height:1.6;
}
.intro-reservado .rsv-count{
  font-family:'Cormorant Garamond','Fraunces', serif;
  font-size:clamp(38px, 8vw, 52px);
  line-height:1;
  margin:-4px 0 14px;
  font-weight:400;
  display:block;
  text-align:center;
}

#intro.opening .envelope-stage,
#intro.opening .intro-cta{pointer-events:none}

/* ===========================================================
   MOBILE — Arco blanco + textos verdes + todo en 100vh
   =========================================================== */
@media (max-width:768px){
  #intro{overflow:hidden}

  .intro-arch{
    display:block;
    position:absolute;
    z-index:1;
    left:50%;
    transform:translateX(-50%);
    top:2.5%;
    width:92vw;
    bottom:2.5%;
    pointer-events:none;
    background:#fff;
    border-radius:50% 50% 6px 6px / 26% 26% 0 0;
    box-shadow:0 8px 30px rgba(0,0,0,.12);
  }

  .intro-inner{
    height:100%;min-height:0;
    justify-content:space-evenly;
    padding:6vh 22px 5vh;
    max-width:100%;
    gap:0;
  }

  .intro-mes{display:none}

  .intro-monogram{
    width:min(135px, 36vw);
    filter:none;
    margin:0 auto clamp(4px, 0.8vh, 10px);
  }

  .intro-couple{
    color:#706E46;
    line-height:.82;
    margin:0 0 clamp(4px, 0.8vh, 10px);
  }
  .intro-couple .line1,
  .intro-couple .line2{font-size:clamp(64px, 15vw, 110px)}
  .intro-couple .amp{
    font-size:clamp(40px, 9vw, 68px);
    margin:0;
    opacity:.75;
  }

  .envelope-stage{
    width:min(340px, 72vw);
    margin:clamp(4px, 1vh, 14px) 0 clamp(6px, 1.2vh, 14px);
  }
  .envelope-stage:focus-visible{outline-color:#706E46}

  .intro-cta{
    color:#8a8758;
    margin:clamp(2px, 0.5vh, 6px) 0 clamp(10px, 1.8vh, 20px);
  }
  .intro-cta .cta-top{display:block}
  .intro-cta .cta-bottom{
    font-size:clamp(22px, 5vw, 32px);
    opacity:.85;
  }

  .intro-divider{
    width:min(220px, 56vw);
    margin:clamp(2px, 0.4vh, 6px) auto;
  }
  .intro-divider path,
  .intro-divider circle{stroke:#706E46}
  .intro-divider path[fill]{fill:#706E46;fill-opacity:.3}
  .intro-flores{
    width:min(200px, 52vw);
    filter:none;
  }

  .intro-invitado{
    color:#706E46;
    font-size:clamp(34px, 7.5vw, 56px);
    margin:clamp(8px, 1.4vh, 16px) 0;
    line-height:1;
  }

  .intro-reservado{color:#706E46;margin-top:clamp(6px, 1.2vh, 14px)}
  .intro-reservado .rsv-label{
    font-size:clamp(10px, 2.4vw, 13px);
    letter-spacing:.35em;
  }
  .intro-reservado .rsv-count{
    font-size:clamp(36px, 8vw, 56px);
    margin:-4px 0 14px;
  }

  .intro-floral{
    width:34vw;
    min-width:120px;
    max-width:220px;
  }
}

/* Pantallas muy pequeñas */
@media (max-width:380px){
  .intro-floral{width:36vw;min-width:100px;opacity:.55!important}
  .intro-arch{width:94vw}
  .intro-inner{padding:5vh 18px 4vh}
  .intro-couple .line1,
  .intro-couple .line2{font-size:clamp(56px, 14vw, 92px)}
  .intro-couple .amp{font-size:clamp(36px, 8.5vw, 60px)}
  .envelope-stage{width:min(400px, 86vw)}
  .intro-invitado{font-size:clamp(30px, 7vw, 46px)}
  .intro-reservado .rsv-count{font-size:clamp(32px, 7.5vw, 48px)}
}

/* Pantallas cortas (landscape o barras de navegación grandes) */
@media (max-height:700px) and (max-width:768px){
  .intro-inner{padding:3vh 18px 3vh}
  .intro-couple .line1,
  .intro-couple .line2{font-size:clamp(44px, 10vw, 76px)}
  .intro-couple .amp{font-size:clamp(28px, 6vw, 48px)}
  .envelope-stage{width:min(320px, 64vw)}
  .intro-invitado{font-size:clamp(26px, 5.5vw, 40px)}
  .intro-reservado .rsv-count{font-size:clamp(28px, 6vw, 42px)}
}