/* =====================================
RESET
===================================== */

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

html{

    scroll-behavior:smooth;

}

body{

    background:#ffffff;
    overflow-x:hidden;

}

/* =====================================
INVITACIÓN
===================================== */

#invitacion{

    width:100%;

}

#portada,
#informacion{

    width:100%;

    position:relative;

}

#portada img,
#informacion img{

    display:block;

    width:100%;

    height:auto;

}
/*======================================
SOBRE
======================================*/

#overlay{

    position:fixed;

    inset:0;

    background:#f8f3ec;

    z-index:9999;

    overflow:hidden;

}

#panelIzquierdo{

    position:absolute;

    left:0;
    top:0;

    width:50%;
    height:100%;

    background:#d8c7ad;

    transition:1.2s ease;

    box-shadow:8px 0 30px rgba(0,0,0,.18);

}

#panelDerecho{

    position:absolute;

    right:0;
    top:0;

    width:50%;
    height:100%;

    background:#e8dccb;

    transition:1.2s ease;

    box-shadow:-8px 0 30px rgba(0,0,0,.18);

}

#btnAbrir{

    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    width:145px;
    height:145px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    background:#f2e8da;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    box-shadow:0 15px 35px rgba(0,0,0,.18);

    transition:.35s;

    z-index:20;

}

#btnAbrir:hover{

    transform:translate(-50%,-50%) scale(1.05);

}

.monograma{

    font-family:'Cormorant Garamond',serif;

    font-size:60px;

    color:#8d6d3b;

    margin-bottom:10px;

}

.texto{

    font-family:'Cinzel',serif;

    font-size:12px;

    letter-spacing:4px;

    color:#8d6d3b;

}
/*======================================
CONTADOR
======================================*/

#informacion{
    position:relative;
}

#contador{

    position:absolute;

    left:50%;
    top:22%;

    transform:translateX(-50%);

    width:min(90%, 520px);

    display:flex;

    justify-content:center;

    gap:40px;

    align-items:flex-start;

    z-index:30;

}

.tiempo{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.tiempo span{

    font-family:'Cinzel', serif;

    font-size:clamp(38px,4.5vw,64px);

    color:#9b7c58;

    line-height:1;

}

.tiempo small{

    margin-top:10px;

    font-family:'Cinzel', serif;

    font-size:clamp(11px,1vw,14px);

    letter-spacing:3px;

    color:#9b7c58;

}
/*======================================
RESPONSIVE
======================================*/

/* ===========================
MÓVILES
=========================== */

@media (max-width: 768px){

    #contador{
        width:92%;
        gap:16px;
        top:22%;
    }

    .tiempo span{
        font-size:28px;
    }

    .tiempo small{
        font-size:9px;
        letter-spacing:1px;
    }

}

/* ===========================
TABLETS
=========================== */

@media (min-width:769px) and (max-width:1199px){

    #contador{
        width:min(90%,480px);
        gap:28px;
        top:23.5%;
    }

    .tiempo span{
        font-size:46px;
    }

    .tiempo small{
        font-size:12px;
        letter-spacing:2px;
    }

}

/* ===========================
ESCRITORIO
=========================== */

@media (min-width:1200px){

    #contador{
        width:min(90%,520px);
        gap:40px;
        top:25%;
    }

    .tiempo span{
        font-size:70px;
    }

    .tiempo small{
        font-size:18px;
        letter-spacing:3px;
    }

}
/*======================================
BOTÓN RSVP
======================================*/

#btnConfirmar{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    border:2px solid #b89463;

    border-radius:50px;

    background:#efe3d0;

    color:#8d6d3b;

    font-family:'Cinzel', serif;

    text-transform:uppercase;

    cursor:pointer;

    box-shadow:
        0 12px 30px rgba(0,0,0,.12),
        inset 0 1px 0 rgba(255,255,255,.8);

    transition:.35s;

    z-index:50;

}

#btnConfirmar:hover{

    transform:translateX(-50%) translateY(-2px);

    background:#f8efe1;

}

#btnConfirmar:active{

    transform:translateX(-50%) scale(.98);

}
/*======================================
RESPONSIVE BOTÓN
======================================*/

/* MÓVIL */

@media (max-width:768px){

    #btnConfirmar{

        width:190px;
        height:40px;

        font-size:9px;
        letter-spacing:1.8px;

        top:82%;

    }

}

/* TABLET */

@media (min-width:769px) and (max-width:1199px){

    #btnConfirmar{

        width:420px;
        height:76px;

        font-size:19px;
        letter-spacing:3px;

        top:84%;

    }

}

/* ESCRITORIO */

@media (min-width:1200px){

    #btnConfirmar{

        width:600px;
        height:100px;

        font-size:30px;
        letter-spacing:8px;

        top:84%;

    }

}
/*======================================
POPUP RSVP
======================================*/

#popupRSVP{

    position:fixed;

    inset:0;

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

    display:none;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

#ventanaRSVP{

    width:min(92%,460px);

    background:#faf5ee;

    border-radius:24px;

    padding:35px;

    position:relative;

    box-shadow:0 25px 60px rgba(0,0,0,.25);

}

#ventanaRSVP h2{

    font-family:'Cinzel',serif;

    text-align:center;

    color:#8d6d3b;

    margin-bottom:25px;

}

#ventanaRSVP input[type=text],
#ventanaRSVP select,
#ventanaRSVP textarea{

    width:100%;

    padding:14px;

    margin-bottom:18px;

    border:1px solid #d9c6a6;

    border-radius:12px;

    font-size:15px;

    background:white;

}

#ventanaRSVP textarea{

    resize:none;

    height:120px;

}

.opciones{

    display:flex;

    justify-content:space-between;

    margin-bottom:20px;

    font-family:'Cinzel',serif;

    color:#8d6d3b;

}

#enviarRSVP{

    width:100%;

    height:55px;

    border:none;

    border-radius:40px;

    background:#efe3d0;

    color:#8d6d3b;

    font-family:'Cinzel',serif;

    font-size:15px;

    cursor:pointer;

}

#cerrarRSVP{

    position:absolute;

    right:18px;

    top:15px;

    border:none;

    background:none;

    font-size:30px;

    cursor:pointer;

    color:#8d6d3b;

}