/*======================================
KARLA & RICARDO
======================================*/

:root{

    --verde:#2F3B2D;
    --verde2:#3D4D39;
    --marfil:#F8F4EC;
    --dorado:#D5B676;
    --gris:#ECECEC;

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Montserrat',sans-serif;

    background:var(--verde);

    color:var(--marfil);

    overflow-x:hidden;

    line-height:1.8;

}

img{

    display:block;

    max-width:100%;

}

.container{

    width:min(1100px,90%);

    margin:auto;

}

a{

    text-decoration:none;

    color:inherit;

}

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

.hero{

    position:relative;
    width:100%;
    height:100vh;
    overflow:hidden;

}

.hero-img{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    filter:brightness(.42);

    animation:kenburns 18s ease-in-out infinite alternate;

}

@keyframes kenburns{

    0%{

        transform:scale(1);

    }

    100%{

        transform:scale(1.03);

    }

}

.overlay{

    position:absolute;
    inset:0;

    background:linear-gradient(

        rgba(0,0,0,.15),
        rgba(0,0,0,.42)

    );

}

.hero-content{

    position:absolute;

    top:34%;
    left:50%;

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

    width:90%;
    max-width:1000px;

    text-align:center;

    color:var(--marfil);

    z-index:2;

}

.hero-content h1{

    font-family:'Great Vibes',cursive;

    font-size:8.8rem;

    font-weight:400;

    line-height:1;

    word-spacing:18px;

    margin-bottom:14px;

    text-shadow:0 5px 18px rgba(0,0,0,.30);

}

.hero-content h2{

    font-family:'Cormorant Garamond',serif;

    font-size:1.65rem;

    font-weight:500;

    letter-spacing:8px;

    margin-bottom:14px;

    color:var(--marfil);

}

.fecha{

    font-family:'Montserrat',sans-serif;

    font-size:.82rem;

    letter-spacing:5px;

    text-transform:uppercase;

    color:var(--marfil);

}

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

.mensaje{

    padding:90px 0 40px;

    background:var(--verde);

    text-align:center;

}

.mensaje-texto{

    max-width:900px;

    margin:0 auto;

    font-family:'Montserrat',sans-serif;

    font-size:1.15rem;

    font-weight:300;

    line-height:2;

    color:var(--marfil);

}

/*======================================
PROGRAMACIÓN
======================================*/

.programacion{

    background:var(--verde);

    padding:70px 0 80px;

}

.programacion h2{

    font-family:'Cormorant Garamond',serif;

    font-size:3rem;

    font-weight:400;

    text-align:center;

    margin-bottom:55px;

}

.timeline{

    width:min(900px,90%);

    margin:auto;

}

.evento{

    display:grid;

    grid-template-columns:120px 1fr;

    gap:35px;

    align-items:center;

    padding:22px 0;

    border-bottom:1px solid rgba(248,244,236,.08);

}

.evento:last-child{

    border-bottom:none;

}

.hora{

    font-family:'Cormorant Garamond',serif;

    font-size:1.40rem;

    font-weight:400;

    letter-spacing:1px;

    color:var(--marfil);

}

.actividad{

    font-family:'Cormorant Garamond',serif;

    font-size:1.45rem;

    font-weight:400;

    line-height:1.4;

    color:var(--marfil);

    margin:0;

}

.despedida{

    font-family:'Cormorant Garamond',serif;

    font-size:1.05rem;

    margin-top:8px;

    color:rgba(248,244,236,.70);

}

/*======================================
RECEPCIÓN
======================================*/

.recepcion{

    padding:130px 0;

    background:var(--verde);

    text-align:center;

}

.recepcion h2{

    font-family:'Cormorant Garamond',serif;

    font-size:3rem;

    font-weight:400;

    margin-bottom:50px;

}

.foto-finca{

    width:40%;
    max-width:380px;

    margin:0 auto 40px;

    border-radius:18px;

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

}

.recepcion h3{

    font-family:'Cormorant Garamond',serif;

    font-size:2rem;

    font-weight:400;

    margin-top:10px;

    margin-bottom:20px;

}

.direccion{

    max-width:700px;

    margin:0 auto 40px;

    font-family:'Montserrat',sans-serif;

    font-size:1.5rem;

    line-height:2;

}

.indicaciones{

    max-width:760px;

    margin:0 auto 40px;

    font-family:'Montserrat',sans-serif;

    font-size:1.05rem;

    line-height:2;

}

.btn{

    display:inline-block;

    margin-top:15px;

    padding:16px 44px;

    border:1px solid rgba(255,255,255,.75);

    border-radius:40px;

    font-family:'Montserrat',sans-serif;

    font-size:.95rem;

    letter-spacing:2px;

    color:var(--marfil);

    transition:.35s;

}

.btn:hover{

    background:var(--marfil);

    color:var(--verde);

}

/*======================================
DRESS CODE
======================================*/

.dress{

    padding:120px 0;

    background:var(--verde);

    text-align:center;

}

.dress h2{

    font-family:'Cormorant Garamond',serif;

    font-size:3rem;

    font-weight:400;

    margin-bottom:60px;

}

.dress-grid{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:50px;

    flex-wrap:wrap;

}

.dress-card{

    width:300px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    border-radius:20px;

    overflow:hidden;

}

.dress-card img{

    width:100%;

    height:280px;

    object-fit:contain;

    background:#4A5844;

    display:block;

    padding:8px;

}

.dress-info{

    padding:22px;

}

.dress-card h3{

    font-family:'Cormorant Garamond',serif;

    font-size:2rem;

    font-weight:400;

    margin-bottom:12px;

}

.dress-card p{

    font-family:'Montserrat',sans-serif;

    font-size:1rem;

    line-height:1.8;

}

.nota-novia{

    margin-top:45px;

    margin-bottom:40px;

}

.nota-novia h3{

    font-family:'Cormorant Garamond',serif;

    font-size:1.8rem;

    font-weight:400;

    color:var(--dorado);

    margin-bottom:10px;

}

.nota-novia p{

    font-family:'Montserrat',sans-serif;

    font-size:1rem;

    letter-spacing:1px;

}

.dress-text{

    max-width:850px;

    margin:auto;

}

.dress details{

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    padding:18px 24px;

    text-align:left;

}

.dress summary{

    list-style:none;

    cursor:pointer;

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-family:'Cormorant Garamond',serif;

    font-size:1.55rem;

    font-weight:400;

}

.dress summary::-webkit-details-marker{

    display:none;

}

.dress summary::after{

    content:"+";

    font-size:1.6rem;

}

.dress details[open] summary::after{

    content:"−";

}

.dress details p{

    margin-top:18px;

    font-family:'Montserrat',sans-serif;

    font-size:1rem;

    line-height:1.9;

}

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

.contador{

    padding:70px 0;

    background:var(--verde);

    text-align:center;

}

.contador h2{

    font-family:'Cormorant Garamond',serif;

    font-size:3rem;

    font-weight:400;

    margin-bottom:60px;

}

.countdown{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

    width:min(900px,90%);

    margin:auto;

}

.count-item{

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    padding:35px 20px;

}

.count-item span{

    display:block;

    font-family:'Cormorant Garamond',serif;

    font-size:3.2rem;

    font-weight:500;

    color:var(--marfil);

    margin-bottom:10px;

}

.count-item small{

    display:block;

    font-family:'Montserrat',sans-serif;

    font-size:.80rem;

    text-transform:uppercase;

    letter-spacing:3px;

    color:rgba(248,244,236,.75);

}

/*======================================
PREGUNTAS FRECUENTES
======================================*/

.faq{

    padding:120px 0;

    background:var(--verde);

}

.faq h2{

    text-align:center;

    font-family:'Cormorant Garamond',serif;

    font-size:3rem;

    font-weight:400;

    margin-bottom:60px;

}

.faq details{

    max-width:850px;

    margin:0 auto 20px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    padding:22px 28px;

}

.faq summary{

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    list-style:none;

    font-family:'Cormorant Garamond',serif;

    font-size:1.55rem;

    font-weight:400;

}

.faq summary::-webkit-details-marker{

    display:none;

}

.faq summary::after{

    content:"+";

    font-size:1.8rem;

    transition:.3s;

}

.faq details[open] summary::after{

    content:"−";

}

.faq p{

    margin-top:18px;

    font-family:'Montserrat',sans-serif;

    font-size:1rem;

    line-height:1.9;

}

.contacto{

    text-align:left;

}

/*======================================
CONFIRMACIÓN
======================================*/

.confirmacion{

    padding:120px 0;

    background:var(--verde);

    text-align:center;

}

.confirmacion h2{

    font-family:'Cormorant Garamond',serif;

    font-size:3rem;

    font-weight:400;

    margin-bottom:20px;

}

.confirmacion-texto{

    max-width:700px;

    margin:0 auto 45px;

    font-family:'Montserrat',sans-serif;

    font-size:1rem;

    line-height:1.9;

}

.campo{

    max-width:650px;

    margin:0 auto 25px;

    text-align:left;

}

.campo label{

    display:block;

    margin-bottom:10px;

    font-family:'Cormorant Garamond',serif;

    font-size:1.45rem;

}

.campo input[type="text"]{

    width:100%;

    padding:16px;

    border-radius:14px;

    border:1px solid rgba(255,255,255,.15);

    background:rgba(255,255,255,.05);

    color:var(--marfil);

    font-family:'Montserrat',sans-serif;

    font-size:1rem;

}

.campo input::placeholder{

    color:rgba(248,244,236,.45);

}

.opciones{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.opciones label{

    display:flex;

    align-items:center;

    gap:12px;

    font-family:'Montserrat',sans-serif;

    font-size:1rem;

    cursor:pointer;

}

.opciones input{

    accent-color:#F8F4EC;

}

.confirmacion .btn{

    display:block;

    width:100%;

    margin-top:20px;

    padding:18px;

    background:transparent;

    border:1px solid rgba(255,255,255,.8);

    border-radius:40px;

    color:#D5B676;

    font-family:'Montserrat',sans-serif;

    font-size:1rem;

    font-weight:600;

    letter-spacing:1px;

    cursor:pointer;

    transition:.35s;

}

.confirmacion .btn:hover{

    background:#D5B676;

    color:#2F3B2D;

}

/*======================================
DESPLEGAR CONFIRMACIÓN
======================================*/

.confirmacion-toggle{

    max-width:850px;

    margin:auto;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    overflow:hidden;

}

.confirmacion-toggle summary{

    list-style:none;

    cursor:pointer;

    padding:24px 30px;

    text-align:center;

    font-family:'Cormorant Garamond',serif;

    font-size:2rem;

    font-weight:400;

    color:var(--dorado);

}

.confirmacion-toggle summary::after{

    content:"+";

    float:right;

    font-size:2rem;

    transition:.3s;

    color:var(--dorado);

}

.confirmacion-toggle summary::-webkit-details-marker{

    display:none;

}

.confirmacion-toggle summary::after{

    content:"+";

    margin-left:15px;

    font-size:2rem;

    transition:.3s;

}

.confirmacion-toggle[open] summary::after{

    content:"−";

}

.confirmacion-contenido{

    padding:10px 40px 40px;

}

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

.final{

    padding:50px 0 120px;

    background:var(--verde);

    text-align:center;

}

.final h2{

    font-family:'Cormorant Garamond',serif;

    font-size:2.8rem;

    font-weight:400;

    line-height:1.3;

    margin-bottom:25px;

}

.despedida{

    font-family:'Cormorant Garamond',serif;

    font-size:2rem;

    font-weight:400;

    margin-bottom:20px;

}

.avion{

    width:300px;

    margin:25px auto 40px;

    animation:flotar 4s ease-in-out infinite;

}

@keyframes flotar{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

.final h3{

    font-family:'Great Vibes',cursive;

    font-size:4rem;

    font-weight:400;

    margin-bottom:12px;

}

.fecha-final{

    font-family:'Montserrat',sans-serif;

    font-size:.90rem;

    letter-spacing:5px;

    color:var(--marfil);

}

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

@media screen and (max-width:768px){

    /* PORTADA */

    .hero{

        height:100vh;

    }

    .hero-content{

        top:32%;

        width:92%;

    }

    .hero-content h1{

        font-size:5rem;

        word-spacing:8px;

    }

    .hero-content h2{

        font-size:1.15rem;

        letter-spacing:5px;

    }

    .fecha{

        font-size:.70rem;

        letter-spacing:3px;

    }

    /* SECCIONES */

    .mensaje,
    .programacion,
    .recepcion,
    .dress,
    .contador,
    .faq,
    .confirmacion,
    .final{

        padding:90px 25px;

    }

    .programacion h2,
    .recepcion h2,
    .dress h2,
    .contador h2,
    .faq h2,
    .confirmacion h2,
    .final h2{

        font-size:2.4rem;

    }

    /* PROGRAMACIÓN */

    .evento{

        grid-template-columns:1fr;

        gap:10px;

        text-align:center;

    }

    .hora{

        font-size:1.15rem;

    }

    .actividad{

        font-size:1.35rem;

    }

    /* RECEPCIÓN */

    .foto-finca{

        width:90%;

        max-width:340px;

    }

    /* DRESS CODE */

    .dress-grid{

        flex-direction:column;

        align-items:center;

        gap:35px;

    }

    .dress-card{

        width:100%;

        max-width:320px;

    }

    .dress-card img{

        height:240px;

    }

    /* CUENTA REGRESIVA */

    .countdown{

        grid-template-columns:repeat(2,1fr);

        gap:18px;

    }

    .count-item{

        padding:25px 15px;

    }

    .count-item span{

        font-size:2.4rem;

    }

    /* PREGUNTAS */

    .faq summary{

        font-size:1.25rem;

    }

    /* CONFIRMACIÓN */

    #rsvp-form{

        width:100%;

    }

    .campo label{

        font-size:1.3rem;

    }

    .opciones{

        gap:12px;

    }

    .confirmacion .btn{

        width:100%;

    }

    /* FINAL */

    .despedida{

        font-size:1.5rem;

    }

    .final h3{

        font-size:2.5rem;

    }

    .fecha-final{

        font-size:.70rem;

        letter-spacing:3px;

    }

    .avion{

        width:350px;

    }


}

/* CONFIRMACIÓN */

.confirmacion{

    padding:90px 25px;

}

.confirmacion h2{

    font-size:2.4rem;

}

.campo{

    width:100%;

}

.btn-confirmar{

    width:100%;

    text-align:center;

}