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

html,
body{
    width:100%;
    height:100%;
    overflow-x:hidden;
    font-family: 'Georgia', serif;
}

/* Fondo de toda la invitación */

body{
    background-color:#F8F5F0;

    min-height:100vh;

    overflow-x:hidden;

    font-family:'Georgia', serif;

}
/*    esto era cuando usaba un fondo */
/*
body{
    background:
    linear-gradient(
        rgba(255,255,255,.20),
        rgba(255,255,255,.20)
    ),
    url("imagenes/fondo.jpg");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;

    min-height:100vh;
}

/* Capa adicional para futuros efectos */

.background{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    pointer-events:none;

    z-index:-1;

}



/* ===========================
PORTADA
=========================== */

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

.hero img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.overlay{

    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:100%;

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

    background:rgba(0,0,0,.25);

    text-align:center;
    padding:20px;

}

.overlay h1{

    color:white;

    font-size:3rem;

    font-weight:300;

    letter-spacing:2px;

    text-shadow:
        0 4px 12px rgba(0,0,0,.45);

}




/* ===========================
INDICADOR DE SCROLL
=========================== */

.scroll-indicator{

    position:absolute;

    bottom:35px;
    left:50%;

    transform:translateX(-50%);

    display:flex;
    flex-direction:column;
    align-items:center;

    color:#FFFFFF;

    z-index:10;

}

.scroll-indicator span{

    font-size:13px;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:10px;

    text-shadow:0 2px 8px rgba(0,0,0,.4);

}

.scroll-arrow{

    width:34px;
    height:34px;

    animation:scrollBounce 1.8s infinite;

    filter:drop-shadow(0 2px 8px rgba(0,0,0,.35));

}

@keyframes scrollBounce{

    0%,100%{
        transform:translateY(0);
        opacity:1;
    }

    50%{
        transform:translateY(12px);
        opacity:.65;
    }

}

/* ===========================
SECCIÓN INTRODUCCIÓN
=========================== */

.intro{

    width:100%;
    padding:100px 25px;

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

}

.intro-container{

    max-width:800px;
    text-align:center;

}

.intro-text{

    font-family:'Georgia', serif;

    font-size:1.4rem;

    line-height:2;

    color:#4a4a4a;

    font-style:italic;

}

/* ===========================
CEREMONIA
=========================== */

.ceremony{

    padding:100px 20px;

    display:flex;
    justify-content:center;

}

.ceremony-card{

    width:90%;
    /* width:100%; */
    max-width:500px;

    background:#ffffff;

    border-radius:18px;

    padding:50px 35px;

    text-align:center;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

}

.ceremony-icon{

    font-size:42px;

    margin-bottom:15px;

}

.ceremony h2{

    font-size:2rem;

    letter-spacing:3px;

    margin-bottom:25px;

    color:#333;

}

.church{

    color:#666;

    line-height:1.7;

    margin-bottom:40px;

}

.date-time{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:35px;

}

.date{

    padding-right:30px;

}

.date span{

    font-size:3.5rem;

    font-weight:bold;

    display:block;

    line-height:1;

}

.date p{

    letter-spacing:3px;

    margin-top:8px;

    font-size:1rem;

}

.divider{

    width:1px;

    height:70px;

    background:#c9c9c9;

}

.time{

    padding-left:30px;

    font-size:2rem;

    font-weight:600;

    color:#444;

}

.location{

    color:#666;

    margin-bottom:35px;

    font-size:1rem;

}

.location-button{

    display:inline-block;

    padding:14px 34px;

    border:2px solid #b79b6c;

    color:#b79b6c;

    text-decoration:none;

    border-radius:50px;

    letter-spacing:2px;

    font-size:.9rem;

    font-weight:bold;

    transition:.3s;

}

.location-button:hover{

    background:#b79b6c;

    color:white;

}

.rsvp{

    padding:100px 20px;

    display:flex;

    justify-content:center;

}

.reserved-box{

    margin:35px 0;

    background:#B89B6D;

    color:white;

    padding:15px;

    border-radius:40px;

    font-size:1rem;

}

.attendance{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-bottom:30px;

    text-align:left;

}

input,
select,
textarea{

    width:100%;

    padding:15px;

    margin-bottom:20px;

    border:1px solid #DDD;

    border-radius:10px;

    font-size:16px;

    font-family:inherit;

}

textarea{

    resize:vertical;

}

button{

    width:100%;

    padding:18px;

    border:none;

    border-radius:50px;

    background:#B89B6D;

    color:white;

    font-size:16px;

    letter-spacing:2px;

    cursor:pointer;

    transition:.3s;

}

button:hover{

    background:#A58556;

}

/*==============================
        CUENTA REGRESIVA
===============================*/

.countdown-section{

    padding:80px 20px;

    display:flex;

    justify-content:center;

}

.countdown-card{

    width:100%;
    max-width:700px;

    background:#FFFFFF;

    border-radius:18px;

    padding:45px 30px;

    text-align:center;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

}

.countdown-icon{

    color:#B89B6D;

    margin-bottom:20px;

}

.countdown-card h2{

    letter-spacing:3px;

    margin-bottom:35px;

    color:#3E3A36;

}

.countdown{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.count-box{

    width:120px;

    padding:20px;

    border-radius:12px;

    background:#F8F5F0;

}

.count-box span{

    display:block;

    font-size:2.6rem;

    font-weight:bold;

    color:#B89B6D;

}

.count-box small{

    display:block;

    margin-top:8px;

    color:#666;

    letter-spacing:1px;

}