/*======================================================
        INVITACIÓN - ANDRÉS & YESSICA
======================================================*/

/*==========================================
            CONFIGURACIÓN GENERAL
==========================================*/

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:#FAF8F3;

    color:#4D4D4D;

    overflow-x:hidden;

}

/*==========================================
        PARTE 1 - PORTADA
==========================================*/

#cover{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100vh;

    background:#FAF8F3;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:30px;

    z-index:9999;

}
.cover-container{

    position:relative;

    width:340px;

    max-width:100%;

    text-align:center;

    transform:translateY(-50px);

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

.cover-envelope{

    width:88%;

    display:block;

    margin:0 auto;

    filter:drop-shadow(0 30px 30px rgba(0,0,0,.18));

}
/*==========================================
            SELLO
==========================================*/

.cover-seal{

    position:absolute;

    left:46%;

    top:52%;

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

    background:none;

    border:none;

    padding:0;

    cursor:pointer;

    transition:.30s;

}

.cover-seal img{

    width:85px;

    display:block;

}

.cover-seal:hover{

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

}

.cover-seal:active{

    transform:translate(-50%,-50%) scale(.94);

}

/*==========================================
            TEXTO
==========================================*/

.cover-text{

    margin-bottom:45px;

}

.cover-title{

    font-family:'Great Vibes', cursive;

    font-size:60px;

    font-weight:400;

    color:#4A4A4A;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

}

.cover-title .name{

    color:#4A4A4A;

    font-size:60px;

}

.cover-title .ampersand{

    color:#8A9A5B;

    font-size:42px;

}
.cover-text p{

    margin-bottom:35px;

    font-size:15px;

    letter-spacing:4px;

    text-transform:uppercase;

    color:#8A9A5B;

}

/*==========================================
        ANIMACIÓN TEXTO
==========================================*/

@keyframes pulseText{

    0%{

        opacity:.4;

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:.4;

    }

}

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

@media(max-width:768px){

    .cover-container{

        width:310px;

    }

    .cover-seal img{

        width:75px;

    }

    .cover-text h1{

        font-size:50px;

    }
.cover-open-text{

    margin-top:18px;
    margin-bottom:20px;

}

.cover-subtitle{

    margin:0 0 15px;

    font-family:'Great Vibes',cursive;

    font-size:40px;

    font-weight:600;

    color:#8A9D54;

    text-align:center;

}

.cover-message{

    max-width:330px;

    margin:0 auto;

    font-family:'Great Vibes',cursive;

    font-size:25px;

    color:#666;

    text-align:center;

}

}

/*==========================================
      FIN PARTE 1 - PORTADA
==========================================*/
/*==========================================
        PARTE 2 - SOBRE CON FOTOGRAFÍA
==========================================*/

#section-envelope{

    width:100%;

    background:#FAF8F3;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:10px 20px 50px;

    margin-top:-70px;

}



/*==========================================
            FLORES SUPERIORES
==========================================*/

#flowers-top{

    position:absolute;

    width:130px;

     right:-5px;

     top:150px;

    z-index:25;

}

/*==========================================
            MARCO FOTOGRAFÍA
==========================================*/

#photo-frame{

    position:absolute;

    width:220px;

    height:280px;

    background:#FFFFFF;

    padding:12px;

    left:60px;

    top:110px;

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

    transform:rotate(6deg);

    z-index:5;

    overflow:hidden;

}

#photo{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

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

#envelope{

    position:absolute;

    width:330px;     /* antes 300 */

    left:5px;

    bottom:40px;     /* antes 0 */

    z-index:10;

}
#envelope-open{

    position:absolute;

    width:330px;

    left:5px;

    bottom:37px;

    z-index:2;

}
#envelope-container{

    position:relative;

    width:340px;

    height:450px;

    margin:70px auto 0;
}
/*==========================================
            FLORES INFERIORES
==========================================*/

#flowers-bottom{

    position:absolute;

    width:150px;

    left:-30px;

    bottom:-20px;

    z-index:20;

}

/*==========================================
        PARTE 2 - MENSAJE
==========================================*/

#section-message{

    width:100%;

    padding:35px 25px 5px;

    text-align:center;

}

.message-container{

    max-width:600px;

    margin:0 auto;

}

.message-title{

    font-family:'Great Vibes',cursive;

    font-size:56px;

    font-weight:400;

    line-height:1.2;

    color:#4A4A4A;

    text-align:center;

    margin-bottom:15px;

}
.message-title span{

    display:inline;

    font-size:40px;

    color:#8A9A5B;

    margin:0 15px;

    vertical-align:middle;

}
   
.message-text{

    font-family:'Great Vibes',cursive;

    font-size:24px;

    line-height:1.8;

    color:#666;

    max-width:320px;

    margin:0 auto;

}
/*==========================================
      FIN PARTE 2 - SOBRE CON FOTOGRAFÍA
==========================================*/

#invitation{

    display:none;

    opacity:0;

}

/*==========================================
      TRANSICIÓN PORTADA → INVITACIÓN
==========================================*/

#invitation{

    display:none;

    opacity:0;

}

.fadeOut{

    animation:fadeOut 1.2s forwards;

}

.fadeIn{

    display:block !important;

    animation:fadeIn .8s forwards;

}

@keyframes fadeOut{

    from{

        opacity:1;

    }

    to{

        opacity:0;

    }

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

/*==========================================
        PARTE 3 - ANIMACIÓN FOTO
==========================================*/

.photo-rise{

    animation:photoRise 2.5s ease forwards;

}

@keyframes photoRise{

    0%{

        transform:translateY(0) rotate(6deg);

    }

    80%{

         transform:translateY(-75px) rotate(6deg);

    }

    90%{

         transform:translateY(-68px) rotate(6deg);

    }

    100%{

        transform:translateY(-72px) rotate(6deg);

    }

}
/*==========================================
            DESCUBRE MÁS
==========================================*/

.discover-more{

    margin-top:45px;

    text-align:center;

    cursor:pointer;

    user-select:none;

}

.discover-text{

    display:block;

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

    font-size:13px;

    letter-spacing:4px;

    text-transform:uppercase;

    color:#8A9A5B;

    margin-bottom:10px;

}

.discover-arrow{

    font-size:28px;

    color:#8A9A5B;

    animation:discoverBounce 1.8s infinite;

}

@keyframes discoverBounce{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(8px);

    }

}

/*==========================================
            NUESTRA HISTORIA
==========================================*/

#section-story{

    width:100%;

    padding:40px 20px 20px;

    display:flex;

    justify-content:center;

}

.story-card{

    position:relative;

    width:300px;

    margin:0 auto;
    left:40px;

}
.story-board{

    width:100%;

    display:block;

}
.story-content{

    position:absolute;

    top:70px;

    left:45px;

    right:45px;

    text-align:center;

}
.story-text{

    font-family:'Cormorant Garamond',serif;

    font-size:18px;

    line-height:1.55;

    color:#6B6754;

}
.story-names{

    margin-top:25px;

    font-family:'Great Vibes',cursive;

    font-size:40px;

    line-height:0.95;

    font-weight:400;

    color:#6F7451;

}
.story-flower{

    position:absolute;

    width:150px;

    left:-50px;

    bottom:20px;

}
/*==========================================
        PARTE 4 - CEREMONIA Y RECEPCIÓN
==========================================*/

#section-eventos{

    width:100%;

    padding:20px 20px 60px;

    display:flex;

    justify-content:center;

}

.event-container{

    position:relative;

    width:360px;

    height:620px;

}

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

#event1-envelope{

    position:absolute;

    width:280px;

    top:60px;

    left:20px;

    z-index:1;

}

#event1-seal{

    position:absolute;

    width:70px;

    top:185px;

    left:150px;

    z-index:5;

}

/*==========================================
       eventos
==========================================*/
#section-eventos{

    display:flex;

    justify-content:center;

    margin:-80px 0;

}

.event-container{

    position:relative;

    width:360px;

    height:520px;

}
#event1-envelope{

    position:absolute;

    width:290px;

    left:0px;

    top:80px;
    z-index:1;

}
#event1-seal{

    position:absolute;

    width:90px;

    left:90px;

    top:160px;

    z-index:4;

}
#event1-card{

    position:absolute;

    width:230px;

    left:105px;

    top:195px;

    z-index:2;

}
#event1-card-image{

    width:70px;

    margin-top:-10px;

}
#event2-card{

    position:absolute;

    width:220px;

    left:-25px;

    top:350px;

    z-index:2;

}

#event2-card-image{

    position:absolute;

    width:110px;

    left:35px;

    top:480px;

    z-index:3;

}
#event1-content{

    position:absolute;

    width:230px;

    left:105px;

    top:220px;

    z-index:5;

    display:flex;

    flex-direction:column;

    align-items:center;

}
.event-title{

   

    font-family:'Great Vibes',cursive;

    font-size:32px;

    color:#6e7351;

}
.event-time{

    margin:5px 0 15px;

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

    font-size:15px;

    color:#6e7351;

}
.event-button{

    position:relative;
    top:5px;

    padding:8px 20px;   /* Antes: 10px 30px */

    border-radius:30px;

    background:#b8c394;

    color:#fff;

    text-decoration:none;

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

    font-size:12px;     /* Reduce la letra */

    font-weight:600;

}
#event2-content{

    position:absolute;
    

    width:220px;

    left:-26px;

    top:430px;

    z-index:5;

    text-align:center;
     

}
.event-place{

    margin-top:95px;
    

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

    font-size:14px;

    color:#ffffff;

    line-height:1.4;

}

#event2-content .event-title{

    color:#ffffff !important;

}
/*==========================================
        CÓDIGO DE VESTUARIO
==========================================*/

#section-vestuario{

    display:flex;

    justify-content:center;

    margin-top:50px;

}

.dress-container{

    position:relative;

    width:360px;

    height:650px;

}
#dress-flowers{

    position:absolute;

    width:200px;

    left:0;

    top:130px;

    z-index:1;

}

#dress-title{

    position:absolute;

    width:170px;

    left:208px;

    top:130px;

    z-index:3;

}

#dress-card{

    position:absolute;

    width:270px;

    left:45px;

    top:220px;

    z-index:2;

}

#dress-woman{

    position:absolute;

    width:85px;

    left:110px;

    top:295px;

    z-index:4;

}

#dress-man{

    position:absolute;

    width:95px;

    left:170px;

    top:290px;

    z-index:4;

}
#dress-title-content{

    position:absolute;

    width:170px;

    left:210px;   /* Ajustaremos este valor */

    top:195px;    /* Ajustaremos este valor */

    z-index:5;

    text-align:center;

}

.dress-title-text{

    margin:0;

    font-family:'Great Vibes',cursive;

    font-size:28px;

    font-weight:normal;

    color:#ffffff;

    line-height:0.9;

}
#dress-card-content{

    position:absolute;

    width:270px;

    left:40px;      /* Igual que la tarjeta */

    top:250px;      /* Lo ajustaremos luego */

    z-index:5;

    text-align:center;

}

.dress-card-title{

    margin:0;

    font-family:'Cormorant Garamond',serif;

    font-size:19px;

    font-weight:500;

    color:#6e7351;

}
#dress-woman-text{

    position:absolute;

    width:75px;

    left:100px;

    top:440px;

    text-align:center;

    font-family:'Cormorant Garamond',serif;

    font-size:16px;

    color:#6e7351;

    z-index:5;

}

#dress-man-text{

    position:absolute;

    width:75px;

    left:170px;

    top:440px;

    text-align:center;

    font-family:'Cormorant Garamond',serif;

    font-size:16px;

    color:#6e7351;

    z-index:5;

}
#dress-message{

    position:absolute;

    width:250px;

    left:55px;

    top:500px;    /* Quedará cerca de Mujer/Hombre */

    text-align:center;

    font-family:'Great Vibes', cursive;

    font-size:48px;

    font-style:italic;

    color:#6e7351;

    line-height:1.4;

    z-index:5;

}
/*====================================
DESCUBRE MÁS 2
====================================*/

.discover-more2{

    margin-top:160px;

    margin-bottom:45px;

    text-align:center;

    cursor:pointer;

    user-select:none;

}

.discover-text2{

    display:block;

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

    font-size:13px;

    letter-spacing:4px;

    text-transform:uppercase;

    color:#8A9A5B;

    margin-bottom:10px;

}

.discover-arrow2{

    font-size:36px;

    color:#8A9A5B;

    animation:discoverBounce2 1.8s infinite;

}

@keyframes discoverBounce2{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(8px);

    }

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

#section-countdown{

    width:100%;

    padding:40px 20px 60px;

    text-align:center;

}

#count-title{

    margin:0 0 25px;

    font-family:'Great Vibes',cursive;

    font-size:72px;

    font-weight:normal;

    color:#6e7351;

}

#countdown{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:10px;

    flex-wrap:nowrap;

}

.time-box{

    display:flex;

    flex-direction:column;

    align-items:center;

    min-width:70px;

}

.time-box span{

    font-family:'Cormorant Garamond',serif;

    font-size:45px;

    color:#6e7351;

    line-height:1;

}

.time-box small{

    margin-top:10px;

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

    font-size:12px;

    letter-spacing:2px;

    color:#6e7351;

}

.separator{

    font-family:'Cormorant Garamond',serif;

    font-size:48px;

    color:#6e7351;

    line-height:1;

    margin-top:-4px;

}

#count-subtitle{

    margin-top:25px;

    font-family:'Great Vibes',cursive;

    font-size:60px;

    font-weight:normal;

    color:#6e7351;

    line-height:1.1;

}
.count-line{

    width:230px;

    height:1px;

    background:#8A9A5B;

    margin:0 auto 45px auto;

    opacity:.45;

}
#lluvia-envelope{

    position:absolute;

    width:290px;

    left:70px;

    top:60px;

    z-index:1;

}
/*====================================================
  LLUVIA DE SOBRES
====================================================*/

#section-lluvia{

    display:flex;

    justify-content:center;

    margin-top:-60px;

    margin-bottom:10px;

}

.lluvia-container{

    position:relative;

    width:360px;

    height:520px;

}
#lluvia-envelope{

    position:absolute;

    width:290px;

    left:70px;

    top:60px;

    z-index:1;

}

#lluvia-seal{

    position:absolute;

    width:90px;

    left:170px;

    top:145px;

    z-index:4;

}

#lluvia-card{

    position:absolute;

    width:230px;

    left:15px;

    top:185px;

    z-index:2;

}

#lluvia-icon{

    position:absolute;

    width:150px;

    left:54px;

    top:260px;

    z-index:5;

}
#lluvia-content{

    position:absolute;

    width:230px;

    left:15px;

    top:220px;

    z-index:5;

    display:flex;

    flex-direction:column;

    align-items:center;

}

.lluvia-title{

    margin:0;

    font-family:'Great Vibes',cursive;

    font-size:30px;

    font-weight:normal;

    color:#6e7351;

    text-align:center;

}
/*====================================================
  VERSICULO
====================================================*/

#section-versiculo{

    display:flex;

    justify-content:center;

    margin:-70px 0;

}

.versiculo-container{

    position:relative;

    width:360px;

    height:330px;

}

#versiculo-board{

    position:absolute;

    width:330px;

    left:15px;

    top:0;

    z-index:1;

}

#versiculo-flower{

    position:absolute;

    width:120px;

    right:0px;

    bottom:60px;

    z-index:3;

}

#versiculo-content{

    position:absolute;

    width:250px;

    left:55px;

    top:55px;

    z-index:2;

    text-align:center;

}

.versiculo-texto{

    margin:0;

    font-family:'Cormorant Garamond', serif;

    font-size:18px;

    line-height:1.45;

    color:#5d563f;

}

.versiculo-cita{

    margin-top:12px;

    font-family:'Cormorant Garamond', serif;

    font-size:16px;

    color:#5d563f;

    font-weight:600;

}
/*====================================================
  FOTO NOVIOS
====================================================*/

#section-foto{

    display:flex;

    justify-content:center;

    margin:30px 0 40px 0;

}

.foto-container{

    width:360px;

    display:flex;

    justify-content:center;

}

#foto-novios{

    width:230px;

    display:block;

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

}
/*====================================================
  CONFIRMAR ASISTENCIA
====================================================*/

#section-confirmacion{

    display:flex;

    justify-content:center;

    margin:30px 0 50px 0;

}

.confirmacion-container{

    position:relative;

    width:360px;

    height:520px;

}

/*==============================
  FLORES ATRAS
==============================*/

#confirmacion-flor-back{

    position:absolute;

    width:180px;

    left:-20px;

    top:40px;

    z-index:1;

}

/*==============================
  SOBRE ABIERTO (ATRAS)
==============================*/

#confirmacion-sobre-back{

    position:absolute;

    width:300px;

    left:30px;

    top:45px;

    z-index:2;

}

/*==============================
  TARJETA
==============================*/

#confirmacion-card{

    position:absolute;

    width:230px;

    left:65px;

    top:40px;

    z-index:3;

}

/*==============================
  FRENTE DEL SOBRE
==============================*/

#confirmacion-sobre-front{

    position:absolute;

    width:310px;

    left:23px;

    top:170px;

    z-index:4;

}

/*==============================
  SELLO
==============================*/

#confirmacion-sello{

    position:absolute;

    width:75px;

    left:145px;

    top:245px;

    z-index:5;

}

/*==============================
  FLORES DELANTE
==============================*/

#confirmacion-flor-front{

    position:absolute;

    width:180px;

    right:-15px;

    bottom:70px;

    z-index:6;

}

/*==============================
  CONTENIDO
==============================*/

#confirmacion-content{

    position:absolute;

    width:210px;

    left:65px;

    top:60px;

    z-index:7;

    text-align:center;
    
    padding:0 18px;

}

.confirmacion-title{

    margin:0;

    font-family:'Great Vibes', cursive;

    font-size:26px;

    font-weight:normal;

    color:#6e7351;

    line-height:1.1;

    text-align:center;

}

.confirmacion-texto{

    margin-top:14px;

    font-family:'Cormorant Garamond', serif;

    font-size:16px;

    line-height:1.35;

    color:#5d563f;

    text-align:center;

}


.confirmacion-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:18px;

    width:115px;

    height:32px;

    background:#b7c39a;

    color:#ffffff;

    text-decoration:none;

    border-radius:22px;

    font-family:'Cormorant Garamond', serif;

    font-size:13px;

    font-weight:600;

    box-shadow:0 3px 8px rgba(0,0,0,.15);

    transition:.30s ease;

}

.confirmacion-btn:hover{

    background:#a8b78a;

    transform:translateY(-2px);

}