@import url('https://fonts.googleapis.com/css2?family=Dynalight&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap');
:root{
     --bg:#222;
     --fg:#fff;
     --muted:#cfcfd6;
     --gold:#d8b36c;
     --gold2:#b6985f;
     --rose:#f6efea;
     --card:#15151b;
     --accent:#9ad0ff;
}
 *{
    box-sizing:border-box
}
 html,body{
    margin:0;
    background:url('img/pattern.png');
    background-size: 250px;
    color:var(--fg);
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
    overflow-x: hidden;
}
 img{
    max-width:100%;
    display:block
}
 a{
    color:inherit;
    text-decoration:none
}
 section{
    padding:56px 20px
}
 .container{
    max-width:980px;
    margin:0 auto
}

.btn{
     display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.9rem 1.2rem;
    border-radius:999px;
     background:linear-gradient(135deg,var(--gold),#b88a3d);
    color:#15110a;
    font-weight:700;
    border:0;
    cursor:pointer; 
    transition:0.3s;
}

.btn:hover{
    transform: scale(1.04);
    background:linear-gradient(135deg,var(--gold2),#7e602c);
}


 .btn.ghost{
    background:transparent;
    color:var(--gold);
    border:1.5px solid var(--gold)
}

.btn.ghost:hover{
    background:rgba(84, 75, 46, 0.486);
    color:var(--gold2);
    border:1.5px solid var(--gold2);
}

 .badge{
    display:inline-block;
    padding:.35rem .7rem;
    border:1px solid var(--gold);
    border-radius:999px;
    color:var(--gold);
    letter-spacing:.08em;
    transform: scale(1.2);
    margin-bottom: 20px;
}
 .card{
    background:var(--card);
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    padding:20px
}
 .grid{
    display:grid;
    gap:16px
}
 @media(min-width:720px){
     .grid.cols-2{
        grid-template-columns:1fr 1fr
    }
     .grid.cols-3{
        grid-template-columns:repeat(3,1fr)
    }
}
/* ---- HERO ---- */
 .hero{
    position:relative;
    min-height:100dvh;
    display:grid;
    place-items:end center;
    padding:0;
    background:#000 url("img/IMG_2440.webp?v1") center/cover no-repeat;
    background-position: center 50%;
    background-attachment: fixed;
}
 .hero::after{
     content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.75) 50%,rgba(0,0,0,.9) 100%);
}
 .hero-inner{
    position:relative;
    z-index:2;
    text-align:center;
    padding:48px 20px;
    width:100%
}
 .hero h1{
    font-family: "Dancing Script", cursive;
    font-size:4.5em;
    margin:.25rem 0 0
}
 .hero .subtitle{
    font-family:"Dancing Script",serif;
    font-size:18px;
    letter-spacing:.25em;
    color:var(--muted)
}
 .play-wrap{
    margin:22px auto 10px;
    display:flex;
    justify-content:center;
    gap:18px;
    align-items:center
}
 .play-btn{
     width:64px;
    height:64px;
    border-radius:50%;
    display:grid;
    place-items:center;
     background:radial-gradient(circle at 30% 30%,#ffffff, #dcdcdc);
     color:#111;
    box-shadow:0 6px 24px rgba(0,0,0,.45);
    cursor:pointer;
    border:none;
    font-weight:900;
    font-size: 2.5em; 
}
 .play-btn:active{
    transform:scale(.97)
}
 .countdown{
    margin:16px auto 0;
    display:flex;
    gap:10px;
    justify-content:center;
    flex-wrap:wrap
}
 .cd-box{
    min-width:70px;
    text-align:center;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1);
    border-radius:14px;
    padding:10px
}
 .cd-box .num{
    font-size:26px;
    font-weight:800
}
 .cd-box .lbl{
    font-size:11px;
    color:var(--muted);
    letter-spacing:.12em
}
/* ---- CALENDARIO + RSVP ---- */
 .kv{
    display:flex;
    align-items:center;
    gap:14px;
    margin:8px 0;
    color:var(--muted);
    justify-content: center;
    font-size: 1.4em;
    text-align: center;
}
 .kv svg{
    opacity:.9
}
 .rsvp-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    justify-content: center;
}
/* ---- UBICACIÓN ---- */
 .map{
    border:0;
    width:100%;
    height:340px;
    border-radius:16px;
    filter:grayscale(.1) contrast(1.05)
}
/* ---- GALERÍA ---- */
 .gallery{
    grid-template-columns:repeat(auto-fill,minmax(160px,1fr))
}
 .gallery img{
    aspect-ratio:1/1;
    border-radius:14px;
    object-fit:cover;
    transition: 0.3s;
    cursor: pointer;
}

.gallery img:hover{
    transform: scale(1.07);
    transition: 0.3s;
}
/* ---- ITINERARIO ---- */
 .timeline{
    /* border-left:2px solid rgba(255,255,255,.15); */
    padding-left:16px;
    margin-left:8px;
    font-size: 1.4em;
}

 .timeline li{
    margin:14px 0;
    list-style:none;
    position:relative;
    padding-left: 15px;
}
 .timeline li::before{
     content:"";
    position:absolute;
    left:-11px;
    top:.6rem;
    width:12px;
    height:12px;
    border-radius:50%;
     background:linear-gradient(135deg,var(--gold),#b88a3d);
    box-shadow:0 0 0 3px rgba(216,179,108,.18) 
}

 .time{
    font-weight:700;
    color:var(--gold)
}
/* ---- FRASE ---- */
 .quote{
    font-family:"Dancing Script",serif;
    font-size:22px;
    line-height:1.5;
    text-align:center;
    color:var(--rose)
}
 .figure{
    overflow:hidden;
    border-radius:20px
}
 .figure img{
    width:100%;
    height:100%;
    object-fit:cover;
}
/* ---- MESA DE REGALOS ---- */
 .registry{
    display:flex;
    align-items:center;
    justify-content: center;
    gap:12px;
    flex-wrap:wrap
}
/* ---- FOTOS DE LA FIESTA ---- */
 .camera-zone{
    display:grid;
    gap:14px;
    place-items:center;
    text-align:center
}
 .cam-btn{
     width:84px;
    height:84px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.1);
     border:2px dashed rgba(255,255,255,.25);
    cursor:pointer 
}
 .cam-btn:hover{
    background:rgba(255,255,255,.16)
}
 .preview{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
    gap:8px;
    width:100%
}
 .preview img{
    border-radius:10px;
    aspect-ratio:1/1;
    object-fit:cover
}
/* ---- FOOTER ---- */
 footer{
    padding:32px 20px;
    text-align:center;
    color:var(--muted)
}

footer a{
    font-size: 0.8em;
}

 footer a:hover{
    text-decoration: underline;
 }

 .small{
    font-size:.9rem;
    color:var(--muted)
}
 hr.sep{
    border:0;
    border-top:1px solid rgba(255,255,255,.08);
    margin:28px 0
}
 .sticky-cta{
    position:fixed;
    bottom:16px;
    right: 16px;
    display:flex;
    justify-content:center;
    margin-top:12px;
    z-index:5 
}

#itinerario-card{
    background: var(--card);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
    padding: 20px;
}

#fotos-container{
    background: var(--card);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
    padding: 20px;
}

 
h2{
    font-size: 2.4em;
    margin-bottom: 20px !important;
    text-align: center;
}

i{
   font-size: 1.2em;
}

@media (max-width:900px) {
    .hero h1{
        font-size: 3em;
    }

     .timeline{
        font-size: 1em;
    }

    .kv{
        display:flex;
        align-items:center;
        gap:14px;
        margin:8px 0;
        color:var(--muted);
        justify-content: center;
        font-size: 1.2em;
        text-align: center;
    }
}



/* --- Lightbox --- */
.lightbox{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,0,0,.92);z-index:9999}
.lightbox.open{display:grid}
.lightbox__img{max-width:96vw;max-height:90vh;object-fit:contain;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.lightbox__caption{margin-top:10px;color:#ddd;text-align:center;font-size:.95rem}
.lightbox__btn{position:absolute;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;z-index: 10;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;cursor:pointer}
.lightbox__close{top:14px;right:14px}
.lightbox__prev{left:12px;top:50%;transform:translateY(-50%)}
.lightbox__next{right:12px;top:50%;transform:translateY(-50%)}
.lightbox__counter{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);color:#aaa;font-size:.85rem}
body.lb-lock{overflow:hidden}