:root{
--marfil:#f8f4ee;
--dorado:#c8a96b;
--olivo:#6b705c;
--texto:#3f3f3f;
--blanco:#ffffff;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Montserrat',sans-serif;
background:var(--marfil);
color:var(--texto);
overflow-x:hidden;
}

/* HERO */

.hero{
position:relative;
height:100vh;
overflow:hidden;
}

.hero img{
position:absolute;
width:100%;
height:100%;
object-fit:cover;
}

.hero-overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.35);
}

.hero-content{
position:relative;
z-index:2;
height:100%;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
color:white;
padding:20px;
}

.invitation-text{
letter-spacing:5px;
text-transform:uppercase;
font-size:.8rem;
margin-bottom:20px;
}

.hero h1{
font-family:'Cormorant Garamond',serif;
font-size:7rem;
font-weight:500;
margin-bottom:15px;
}

.date{
font-size:1.3rem;
letter-spacing:4px;
margin-bottom:40px;
}

.hero-btn{
text-decoration:none;
padding:16px 40px;
border:1px solid var(--dorado);
color:white;
transition:.4s;
}

.hero-btn:hover{
background:var(--dorado);
}

/* MUSICA */

.music-btn{
position:fixed;
top:20px;
right:20px;
z-index:999;
background:white;
border:none;
padding:14px 22px;
border-radius:50px;
cursor:pointer;
box-shadow:0 10px 30px rgba(0,0,0,.15);
}

/* SECCIONES */

section{
padding:120px 20px;
}

.container{
max-width:1200px;
margin:auto;
}

/* VERSICULO */

.verse{
background:white;
text-align:center;
}

.verse h2{
font-family:'Cormorant Garamond',serif;
font-size:3rem;
max-width:900px;
margin:auto;
line-height:1.5;
}

.verse span{
display:block;
margin-top:25px;
letter-spacing:3px;
color:var(--dorado);
}

/* CONTADOR */

.countdown-section{
text-align:center;
}

.countdown-section h2{
font-family:'Cormorant Garamond',serif;
font-size:4rem;
margin-bottom:50px;
}

.countdown{
display:flex;
justify-content:center;
gap:25px;
flex-wrap:wrap;
}

.time-box{
width:150px;
height:150px;
background:white;
border-radius:25px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.time-box span{
font-size:3rem;
font-weight:bold;
color:var(--dorado);
}

.time-box small{
margin-top:10px;
text-transform:uppercase;
letter-spacing:2px;
}

/* HISTORIA */


.story{
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
background:white;
}

.story-image{
overflow:hidden;
}

.story-image img{
width:100%;
height:auto;
display:block;
}

.story-content{max-width:700px;
margin:auto;
background:white;
padding:80px;
display:flex;
flex-direction:column;
justify-content:center;
}

.story-content h2{
font-family:'Cormorant Garamond',serif;
font-size:5rem;
font-weight:500;
line-height:1.1;
margin-bottom:30px;
color:#3f3f3f;
}

.story-content p{
font-size:1.2rem;
line-height:1.9;
color:#555;
margin-bottom:20px;
}

/* SOLO ADULTOS */

.adults-only{
    padding:120px 20px;
    background:white;
    display:flex;
    justify-content:center;
}

.adults-card{
    max-width:700px;
    text-align:center;
    background:#fff;
    padding:60px;
    border-radius:30px;
    box-shadow:0 20px 50px rgba(0,0,0,.06);
}

.adults-icon{
    font-size:2rem;
    display:block;
    margin-bottom:20px;
}

.adults-card h2{
    font-family:'Cormorant Garamond',serif;
    font-size:3rem;
    color:#3f3f3f;
    margin-bottom:20px;
}

.adults-card p{
    font-size:1.15rem;
    line-height:1.8;
    color:#666;
    max-width:550px;
    margin:auto;
}

/* EVENTOS */

.events{
text-align:center;
}

.events h2{
font-family:'Cormorant Garamond',serif;
font-size:4rem;
margin-bottom:60px;
}

.event-grid{
display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;
}

.event-card{
background:white;
width:420px;
padding:45px;
border-radius:25px;
box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.event-card h3{
font-size:2rem;
margin-bottom:15px;
}

.event-card a{
display:inline-block;
margin-top:25px;
background:var(--olivo);
color:white;
text-decoration:none;
padding:12px 28px;
border-radius:40px;
}

/* GALERIA */

.gallery{
background:white;
text-align:center;
}

.gallery h2{
font-family:'Cormorant Garamond',serif;
font-size:4rem;
margin-bottom:60px;
}

.gallery-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}

.gallery-grid img{
width:100%;
height:500px;
object-fit:cover;
border-radius:25px;
transition:.4s;
}

.gallery-grid img:hover{
transform:scale(1.03);
}

/* RSVP */

.rsvp{
text-align:center;
}

.rsvp h2{
font-family:'Cormorant Garamond',serif;
font-size:4rem;
margin-bottom:20px;
}

.rsvp p{
margin-bottom:40px;
}

.whatsapp-btn{
background:#25D366;
color:white;
padding:18px 40px;
text-decoration:none;
border-radius:50px;
font-weight:bold;
}

/* FOOTER */

footer{
background:#1f1f1f;
color:white;
text-align:center;
padding:80px 20px;
}

footer h3{
font-family:'Cormorant Garamond',serif;
font-size:3rem;
margin-bottom:10px;
}

/* RESPONSIVE */

@media(max-width:900px){

.hero h1{
font-size:4rem;
}

.story{
grid-template-columns:1fr;
}

.story-content{
padding:50px 30px;
}

.gallery-grid{
grid-template-columns:1fr;
}

.gallery-grid img{
height:350px;
}

.time-box{
width:120px;
height:120px;
}

.time-box span{
font-size:2rem;
}
}
.section-tag
.story
.story-image img
.story-content
.story-content h2
.story-content p
.fade-up{
opacity:0;
transform:translateY(50px);
transition:all 1s ease;
}

.fade-up.show{
opacity:1;
transform:translateY(0);
}

/* =========================
TIMELINE PREMIUM
========================= */

.timeline{
padding:140px 20px;
background:#ffffff;
}

.timeline .section-tag{
display:block;
text-align:center;
letter-spacing:4px;
color:#c8a96b;
margin-bottom:15px;
font-size:.9rem;
}

.timeline h2{
text-align:center;
font-family:'Cormorant Garamond',serif;
font-size:4.5rem;
font-weight:500;
margin-bottom:90px;
color:#3f3f3f;
}

.timeline-wrapper{
max-width:700px;
margin:auto;
position:relative;
}

.timeline-wrapper::before{
content:'';
position:absolute;
left:50%;
top:0;
width:2px;
height:100%;
background:#c8a96b;
transform:translateX(-50%);
}

.timeline-item{
position:relative;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:60px;
}

.timeline-icon{
width:70px;
height:70px;
background:#fff;
border:2px solid #c8a96b;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:1.8rem;
z-index:2;
box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.timeline-info{
background:#faf8f4;
padding:25px 35px;
border-radius:20px;
margin-left:30px;
box-shadow:0 15px 35px rgba(0,0,0,.05);
min-width:280px;
}

.timeline-info h3{
font-family:'Cormorant Garamond',serif;
font-size:2rem;
color:#6b705c;
margin-bottom:5px;
}

.timeline-info p{
font-size:1rem;
color:#666;
}

.timeline-item.final .timeline-icon{
background:#c8a96b;
color:white;
}

.timeline-item.final .timeline-info{
background:#6b705c;
}

.timeline-item.final h3,
.timeline-item.final p{
color:white;
}

@media(max-width:768px){

.timeline h2{
font-size:3rem;
}

.timeline-wrapper::before{
left:35px;
}

.timeline-item{
justify-content:flex-start;
}

.timeline-icon{
margin-left:0;
}

.timeline-info{
margin-left:20px;
min-width:auto;
width:100%;
}

}

/* LIGHTBOX */

.lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.92);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.lightbox img{
    max-width:90%;
    max-height:90vh;
    border-radius:12px;
}

.close-lightbox{
    position:absolute;
    top:30px;
    right:40px;
    color:white;
    font-size:50px;
    cursor:pointer;
}

/* ==========================
   PANTALLA DE BIENVENIDA
========================== */

.welcome-screen{
    position:fixed;
    inset:0;
    background:#f8f4ee;
    z-index:10000;

    display:flex;
    justify-content:center;
    align-items:center;

    transition:all 1s ease;
}

.welcome-screen.hide{
    opacity:0;
    visibility:hidden;
}

.welcome-content{
    text-align:center;
}

.welcome-tag{
    letter-spacing:6px;
    text-transform:uppercase;
    color:#c8a96b;
    font-size:.8rem;
}

.welcome-content h1{
    font-family:'Cormorant Garamond',serif;
    font-size:5rem;
    color:#3f3f3f;
    margin:20px 0;
}

.welcome-content p{
    letter-spacing:3px;
    margin-bottom:40px;
}

.enter-btn{
    background:transparent;
    border:1px solid #c8a96b;
    padding:18px 40px;
    cursor:pointer;
    transition:.4s;
    font-size:1rem;
}

.enter-btn:hover{
    background:#c8a96b;
    color:white;
}

/* ==========================
   MENSAJE FINAL
========================== */

.final-message{
    padding:180px 20px;
    background:#f8f4ee;
    text-align:center;
}

.final-content{
    max-width:900px;
    margin:auto;
}

.final-tag{
    display:block;
    letter-spacing:5px;
    color:#c8a96b;
    margin-bottom:20px;
    font-size:.9rem;
}

.final-message h2{
    font-family:'Cormorant Garamond',serif;
    font-size:4rem;
    font-weight:500;
    line-height:1.2;
    color:#3f3f3f;
    margin-bottom:40px;
}

.final-message p{
    font-size:1.2rem;
    line-height:2;
    color:#666;
    max-width:750px;
    margin:auto;
}

.signature{
    margin-top:60px;
    font-family:'Cormorant Garamond',serif;
    font-size:3rem;
    color:#6b705c;
}

.final-date{
    margin-top:15px;
    letter-spacing:3px;
    color:#c8a96b;
}

@media(max-width:768px){

    .final-message{
        padding:120px 25px;
    }

    .final-message h2{
        font-size:2.7rem;
    }

    .signature{
        font-size:2.3rem;
    }

}