:root{
  --cream:#fbf7ef;
  --paper:#fffdf8;
  --gold:#b8924a;
  --olive:#758066;
  --text:#1d1c1a;
  --muted:#6f6a60;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--text);
  font-family:Montserrat, sans-serif;
  letter-spacing:.08em;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 8% 12%, rgba(184,146,74,.12), transparent 22%),
    radial-gradient(circle at 92% 88%, rgba(117,128,102,.12), transparent 24%);
}
h1,h2{font-family:"Cormorant Garamond", serif;font-weight:500;text-transform:uppercase}
h2{text-align:center;font-size:2rem;letter-spacing:.22em;margin:0 0 .6rem}
.small,.section-kicker{text-transform:uppercase;text-align:center;font-size:.9rem;line-height:1.9}
.script{font-family:"Good Vibes", cursive;letter-spacing:0;font-size:2rem;color:var(--gold);text-align:center}
.heart{color:var(--gold);text-align:center;margin:1rem}
.music-btn,.menu-btn{
  position:fixed;z-index:10;top:18px;width:62px;height:62px;border-radius:50%;
  border:1px solid var(--gold);background:rgba(255,253,248,.88);color:var(--gold);
  box-shadow:0 10px 25px rgba(0,0,0,.08);backdrop-filter:blur(6px)
}
.music-btn{left:18px;font-size:1.5rem}
.music-btn span{display:block;font-size:.55rem;color:var(--text);line-height:1.1;letter-spacing:.05em}
.menu-btn{right:18px;font-size:1.6rem}
.menu{
  position:fixed;right:16px;top:90px;z-index:9;display:none;flex-direction:column;gap:.8rem;
  padding:1rem;background:var(--paper);border:1px solid rgba(184,146,74,.35);border-radius:18px;
  box-shadow:0 18px 40px rgba(0,0,0,.12)
}
.menu.open{display:flex}
.menu a{color:var(--text);text-decoration:none;font-size:.78rem;text-transform:uppercase}
.hero{
  min-height:100vh;position:relative;overflow:hidden;padding:6rem 1.3rem 4rem;
  display:grid;align-items:end;background:var(--paper)
}
.hero-photo{
  position:absolute;inset:0 0 auto 0;height:56vh;overflow:hidden;
  mask-image:linear-gradient(#000 70%, transparent 100%);
  -webkit-mask-image:linear-gradient(#000 70%, transparent 100%);
}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.hero-content{position:relative;z-index:2;max-width:760px;margin:45vh auto 0;text-align:center}
h1{font-size:clamp(3.8rem,12vw,7.8rem);line-height:.88;margin:0}
h1 span{display:block}
h1 em{font-family:"Great Vibes", cursive;color:var(--gold);text-transform:none;font-size:.5em;font-style:normal}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:1.5rem auto;width:70%}
.primary-btn{
  display:inline-block;border:1px solid var(--gold);border-radius:999px;padding:1rem 2rem;
  text-decoration:none;color:var(--text);text-transform:uppercase;background:rgba(255,253,248,.6)
}
.leaf:before,.leaf:after{
  content:"";position:absolute;border:1px solid rgba(117,128,102,.5);border-radius:80% 0 80% 0;
  width:85px;height:28px;transform:rotate(-32deg)
}
.leaf-left:before{left:8px;top:100px}.leaf-left:after{left:36px;top:145px}
.leaf-right:before{right:12px;top:35vh}.leaf-right:after{right:42px;top:39vh}
main{max-width:1100px;margin:auto}
section{padding:4rem 1.2rem}
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;max-width:620px;margin:1rem auto}
.countdown div,.actions a,.iban,.detail,.timeline article,.gallery-grid img,.panel,.confirm,.gift{
  background:rgba(255,253,248,.82);border:1px solid rgba(184,146,74,.24);
  border-radius:16px;box-shadow:0 10px 28px rgba(93,73,40,.06)
}
.countdown div{text-align:center;padding:1rem .4rem}
.countdown strong{display:block;color:var(--gold);font-family:"Cormorant Garamond",serif;font-size:2.2rem}
.countdown span{font-size:.7rem;text-transform:uppercase}
.details-card{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.detail{text-align:center;padding:2rem 1rem}
.detail strong{display:block;font-family:"Cormorant Garamond",serif;font-size:2rem;text-transform:uppercase}
.detail small{display:block;color:var(--gold);text-transform:uppercase}
.icon{color:var(--gold);font-size:2rem}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2rem}
.timeline img,.gallery-grid img{width:100%;height:190px;object-fit:cover;border-radius:12px}
.timeline article{padding:.6rem;text-align:center}
.timeline span{display:block;color:var(--gold);font-size:.75rem;margin:.6rem 0}
.timeline p{font-size:.76rem;letter-spacing:.03em}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2rem}
.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.actions a{text-align:center;color:var(--text);text-decoration:none;text-transform:uppercase;padding:1.3rem .8rem;font-size:.78rem}
.panel,.confirm,.gift{max-width:780px;margin:2rem auto;text-align:center;padding:2.4rem 1.4rem}
.confirm p,.gift p{letter-spacing:.03em;line-height:1.7}
.phones{color:var(--gold)}
.iban{display:flex;gap:1rem;align-items:center;justify-content:space-between;max-width:520px;margin:1.4rem auto;padding:1rem}
.iban button{border:0;background:var(--olive);color:white;border-radius:9px;padding:.8rem 1rem;text-transform:uppercase}
footer{text-align:center;padding:3rem 1rem;background:var(--paper)}
footer p{letter-spacing:.12em;text-transform:uppercase;font-size:.85rem}
@media (max-width:760px){
  .details-card,.timeline,.gallery-grid,.actions{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr 1fr}
  .timeline{grid-template-columns:1fr 1fr}
  .countdown{grid-template-columns:repeat(2,1fr)}
  .hero-photo{height:48vh}
  .hero-content{margin-top:38vh}
  h1{font-size:4.2rem}
}


.carousel-container{
  position:relative;
  margin-top:2rem;
  overflow:hidden;
}

.carousel-track{
  display:flex;
  gap:1rem;
  overflow-x:auto;
  scroll-behavior:smooth;
  padding-bottom:1rem;
  scrollbar-width:none;
}

.carousel-track::-webkit-scrollbar{
  display:none;
}

.carousel-track img{
  min-width:78%;
  height:420px;
  object-fit:cover;
  border-radius:22px;
  box-shadow:0 15px 30px rgba(0,0,0,.08);
  border:1px solid rgba(184,146,74,.25);
}

.carousel-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:44px;
  height:44px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,.9);
  color:#b8924a;
  font-size:1.4rem;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}

.carousel-btn.prev{left:10px}
.carousel-btn.next{right:10px}

@media (min-width:768px){
  .carousel-track img{
    min-width:38%;
  }
}


/* FIX FOTO CABECERA */
.hero{
  padding-top:0;
}

.hero-photo{
  height:72vh !important;
}

.hero-photo img{
  object-fit:cover;
  object-position:center center;
  filter:none;
}

.hero-content{
  margin-top:52vh !important;
  background:linear-gradient(to top, rgba(251,247,239,.96), rgba(251,247,239,.65), transparent);
  padding-top:5rem;
  border-radius:40px 40px 0 0;
}

@media (max-width:760px){
  .hero-photo{
    height:68vh !important;
  }

  .hero-content{
    margin-top:48vh !important;
    padding-top:4rem;
  }
}
/* HOJAS DECORATIVAS */

body{
  background:#fbf7ef;
  overflow-x:hidden;
}

/* HOJAS */
body::before,
body::after{
  content:"";
  position:fixed;
  width:170px;
  height:420px;
  background-size:contain;
  background-repeat:no-repeat;
  pointer-events:none;
  z-index:1;
  opacity:.95;
}

body::before{
  top:0;
  left:-20px;
  background-image:url("assets/hojas-izquierda.png");
}

body::after{
  bottom:0;
  right:-20px;
  background-image:url("assets/hojas-derecha.png");
}

/* LÍNEAS DORADAS */

.gold-line-top,
.gold-line-bottom{
  position:fixed;
  width:170px;
  height:170px;
  pointer-events:none;
  z-index:2;
}

.gold-line-top{
  top:25px;
  right:20px;
  border-top:1px solid #b8924a;
  border-right:1px solid #b8924a;
}

.gold-line-bottom{
  bottom:25px;
  left:20px;
  border-bottom:1px solid #b8924a;
  border-left:1px solid #b8924a;
}

/* CONTENIDO ENCIMA */

header,
main,
section,
footer{
  position:relative;
  z-index:3;
}
a[href^="tel"],
a[href^="sms"]{
  color: #c89b3c !important;
  text-decoration: none !important;
}

/* Tus teléfonos */
.phones,
.phones a{
  color: #c89b3c !important;
  text-decoration: none !important;
}

.carousel-container{
  position:relative;
  overflow:hidden;
  width:100%;
}

.carousel-track{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-behavior:smooth;
  scrollbar-width:none;
  padding:10px 20px 20px;
}

.carousel-track::-webkit-scrollbar{
  display:none;
}

.carousel-track img{
  flex:0 0 82%;
  width:82%;
  height:420px;
  object-fit:cover;
  border-radius:22px;
}

.carousel-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:20;
  width:44px;
  height:44px;
  border-radius:50%;
  border:0;
  background:white;
  color:#b8924a;
  font-size:1.5rem;
}

.carousel-btn.prev{
  left:10px;
}

.carousel-btn.next{
  right:10px;
}