/* GENERALES */

body{
    position: relative;
    color:#0d3b66;
    font-family:'Montserrat', sans-serif;
    line-height: 1.5;
}

/* INDEX DESKTOP */

body.landing_body{
    min-height:100vh;
    margin:0;
    background:#fbf4df;
    overflow:hidden;
    overscroll-behavior:none;
}

body.landing_body::before{
    content:none;
}

.landing_cover{
    position:relative;
    display:flex;
    flex-direction:column;
    width:min(100vw, 680px);
    height:100vh;
    margin:0 auto;
    text-decoration:none;
    color:inherit;
    background:#f3eddc;
    box-shadow:0 20px 55px rgba(13, 44, 74, 0.18);
    overflow:hidden;
}

.landing_top{
    position:relative;
    height:50vh;
    padding:48px 40px 140px;
    background:#113f6d;
    transform-origin:top center;
    transform-style:preserve-3d;
    transition:transform 1.1s cubic-bezier(0.22, 0.8, 0.2, 1), filter 1.1s ease;
    z-index:2;
    backface-visibility:hidden;
    overflow:visible;
}

.landing_top_back{
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.08) 100%),
        url('../img/fondo.png') center top / cover no-repeat;
    transform:rotateX(180deg);
    transform-origin:top center;
    backface-visibility:hidden;
    z-index:0;
}



.landing_flowers{
    position:relative;
    z-index:1;
    display:flex;
    justify-content:center;
    margin-top:18px;
}

.landing_flowers img{
    width:min(100%, 340px);
    height:auto;
    display:block;
    filter:drop-shadow(0 14px 20px rgba(0,0,0,0.12));
    opacity:0.98;
}

.landing_prompt{
    position:absolute;
    left:50%;
    top:58%;
    transform:translateX(-50%);
    width:300px;
    height:180px;
    text-align:center;
    z-index:2;
}

.landing_prompt_curve{
    width:100%;
    height:100%;
    display:block;
    overflow:visible;
}

.landing_prompt_text{
    font-family:'Cormorant Garamond', serif;
    font-size:24px;
    font-weight:600;
    color:#fff8e8;
    text-shadow:0 3px 8px rgba(0,0,0,0.18);
    fill:#fff8e8;
    letter-spacing:0.5px;
}

.landing_bottom{
    height:50vh;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.08) 100%),
        url('../img/fondo.png') center top / cover no-repeat;
}

.landing_seal_wrap{
    position:absolute;
    left:50%;
    bottom:-84px;
    transform:translate(-50%, -50%);
    z-index:3;
    width:170px;
    height:170px;
    transition:transform 1.1s cubic-bezier(0.22, 0.8, 0.2, 1), opacity 0.8s ease;
}

.landing_seal_shadow{
    position:absolute;
    inset:auto 18px 10px;
    height:24px;
    background:radial-gradient(circle, rgba(77, 39, 14, 0.38) 0%, rgba(77, 39, 14, 0) 72%);
    filter:blur(7px);
}

.landing_seal_image{
    position:relative;
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    filter:drop-shadow(0 12px 16px rgba(77,39,14,0.22));
}

.landing_cover{
    perspective:1800px;
}

.landing_flowers,
.landing_prompt{
    transition:transform 0.9s ease, opacity 0.7s ease;
}

body.landing_is_opening .landing_top{
    transform:rotateX(104deg);
    filter:brightness(1.04);
}

body.landing_is_opening .landing_flowers{
    transform:translateY(-10px);
}

body.landing_is_opening .landing_prompt{
    transform:translateX(-50%) translateY(-18px);
    opacity:0.18;
}

body.landing_is_opening .landing_seal_wrap{
    transform:translate(-50%, -50%) rotate(8deg) translateY(20px);
}

.landing_preload_frame{
    position:absolute;
    width:0;
    height:0;
    border:0;
    opacity:0;
    pointer-events:none;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url('../img/fondo.png');
    background-size: auto;
    background-repeat: repeat;
    background-position: top left;
    opacity: 0.8; /* 20% opacidad */
    pointer-events: none;
    z-index: -1;
}

.main_wrapper{
    padding:56px 32px 0;
}

.wedding_container{
    max-width:980px;
    margin:auto;
}

.section{
    margin-top:72px;
}

.center{
    text-align:center;
}

.passport{
    background: transparent;
    padding:24px 20px;
    border-radius:10px;
    border:none;
}

.passport_card{
    background: transparent;
    padding:50px;
    border-radius:12px;
    box-shadow:0 15px 40px rgba(0,0,0,0.1);
    border:none;
    position:relative;
}

.stamp {
    position: absolute;
    width: 140px;
    height: 140px;
    pointer-events: none;
    opacity: 0.78;
    transform-origin: center;
}

.stamp svg {
    width: 100%;
    height: 100%;
}

.button,
.memory_link_box,
.final_boarding_link,
.map_browser_link{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:64px;
    padding:14px 30px;
    border-radius:999px;
    border:4px solid transparent;
    font-family:'Montserrat', sans-serif;
    font-weight:700;
    letter-spacing:0.8px;
    text-transform:uppercase;
    text-decoration:none;
    white-space:nowrap;
    cursor:pointer;
    overflow:hidden;
    box-shadow:none;
    transition:transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.button::before,
.memory_link_box::before,
.final_boarding_link::before,
.map_browser_link::before{
    content:"";
    position:absolute;
    top:7px;
    left:14px;
    right:78px;
    height:38%;
    border-radius:999px;
    background:rgba(255,255,255,0.22);
    pointer-events:none;
}

.button::after,
.memory_link_box::after,
.final_boarding_link::after,
.map_browser_link::after{
    content:none;
}

.button:hover,
.memory_link_box:hover,
.final_boarding_link:hover,
.map_browser_link:hover{
    transform:translateY(-2px);
    box-shadow:none;
    filter:brightness(1.04);
}

.button:active,
.memory_link_box:active,
.final_boarding_link:active,
.map_browser_link:active{
    transform:translateY(1px);
    box-shadow:none;
}

.button{
    margin-top:20px;
    background:linear-gradient(180deg, #1b5d9e 0%, #124674 55%, #0d3b66 100%);
    border-color:#0d3b66;
    color:#faf0ca;
    font-size:15px;
}

.button::after{
    color:#0d3b66;
}

.button_check_in{
    background:linear-gradient(180deg, #1b5d9e 0%, #124674 55%, #0d3b66 100%);
    border-color:#0d3b66;
    color:#faf0ca;
}

.button_check_in::after{
    color:#0d3b66;
}

.passport_info{
    text-align:center;
    margin-bottom:44px;
    font-size:18px;
    line-height: 1.6;
}

.qr_box{
    width:160px;
    height:160px;
    margin:auto;
    border:none;
    border-radius:10px;
}

.qr_img{
    width:140px;
    height:140px;
    margin-top: 5%;
    border-radius:8px;
    box-shadow:0 5px 12px rgba(0,0,0,0.15);
}

.final_message{
    margin-top:50px;
    font-style:italic;
}

.novios_final{
    margin-top:10px;
    font-weight:bold;
    font-size:20px;
}

.map_container{
    margin-top:20px;
    border:none;
    border-radius:15px;
    overflow:hidden;
    cursor:pointer;
    transition:0.4s ease;
    box-shadow:0 8px 25px rgba(0,0,0,0.12);
}

.map_container:hover{
    transform:scale(1.03);
    box-shadow:0 15px 40px rgba(0,0,0,0.2);
}

.map_container iframe{
    width:100%;
    height:350px;
    border:0;
    display:block;
}

/* PRIMERA PAGINA */

.title{
    font-family:'Times new roman MT', serif;
    text-align:center;
    font-size:64px;
    color:#0d3b66;
    margin:0 0 8px;
    letter-spacing: 1px;
}

.subtitle{
    text-align:center;
    margin-bottom:36px;
    font-size:20px;
}

.imagen_inicio{
    width: min(100%, 700px);
    height: 700px;
    margin: -36px auto 0;
    overflow: hidden;
    display: flex;
}

.imagen_inicio img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    margin-top:4%;
}

.novios{
    font-family: 'Dancing Script', cursive;
    text-align: center;
    font-size: 54px;
    margin-top: -36px;
    color: #0d3b66;
    font-weight: 600;
    line-height: 1.1;
}

/* SEGUNDA PAGINA */

.video_section {
    text-align: center;
    margin-top: 40px;
}

.video_container {
    margin: 20px 0;
    display: flex;
    justify-content: center;
}

.video_container video {
    border: 2px solid #d8c7a3;
    border-radius: 8px;
    max-width: 100%;
    height: auto;
}

.title_historia{
    border-bottom:none;
    padding-bottom:8px;
    margin-bottom:15px;
    font-family: 'Dancing Script', cursive;
    font-size:22px;
}

.historia{
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
}

/* TERCERA PAGINA */

.countdown_section{
    position:relative;
    text-align:center;
    margin-top:60px;
    padding:40px 20px;
}

.countdown_section .imagen_fecha{
    position:relative;
    width:120px;
    margin:0 auto 18px;
    z-index:1;
}

.countdown_section .imagen_fecha_img{
    display:block;
    width:100%;
    height:auto;
}

.event_date{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    margin-bottom:25px;
}

.big_date{
    font-size:150px;
    font-family:'Playfair Display', serif;
    color:#0d3b66;
    height: 270px;
    font: weight 700px;
    align-items:center;
    justify-content:center;
}

.date_info{
    text-align:left;
}

.month,
.year,
.time{
    display:block;
    font-size:20px;
    color:#0d3b66;
}

.month,
.year{
    letter-spacing:2px;
}

.year{
    margin-top: 0;
}

.time{
    margin-top:2px;
}

.countdown_title{
    font-size:20px;
    letter-spacing:2px;
    margin-bottom:30px;
    font-family:'Playfair Display', serif;
    color:#0d3b66;
}

#countdown{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
    overflow-x:visible;
    padding: 0 10px;
}

.circle{
    margin-top: 0%;
    width: 90px;
    height: 90px;
    min-width: 0px;
    border-radius:50%;
    background:#0d3b66;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:#faf0ca;
    box-shadow:0 6px 15px rgba(0,0,0,0.15);
    text-align:center;
    padding:8px;
}

.circle span{
    font-size:45px;
    font-weight:800;
    line-height:1;
    margin-top: 0%;
}

.circle p{
    margin:3px 0 0;
    font-size:15px;
    letter-spacing:0.6px;
}

/* CUARTA PAGINA */

.cuarta_vista{
    margin-top: 88px;
}

.title_ubicacion{
    font-family:'Times New Roman', serif;
    font-size: 54px;
    text-align: center;
    margin-top: 0;
    margin-bottom: 28px;
}

.imagen_Embarque{
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.imagen_Embarque_img{
    display: block;
    width: min(100%, 320px);
    height: auto;
}

#map{
    height: 460px;
    width: min(100%, 860px);
    margin: 32px auto 0;
    border-radius: 18px;
    box-shadow:0 12px 28px rgba(0,0,0,0.10);
}

.map_browser_link{
    display: flex;
    width: 320px;
    min-height: 112px;
    margin: 22px auto 0;
    padding: 22px 36px;
    background: linear-gradient(180deg, #1b5d9e 0%, #124674 55%, #0d3b66 100%);
    border-color: #0d3b66;
    color: #faf0ca;
    font-size: 26px;
    text-align: center;
    z-index: 5;
}

.map_browser_link::after{
    color: #0d3b66;
}

.map_browser_link:hover{
    color: #faf0ca;
    text-decoration: none;
}

.imagen_recorrido_2,
.imagen_recorrido_2_img{
    pointer-events: none;
}

/* QUINTA PAGINA */

.quinta_vista{
    position: relative;
    margin-top: 96px;
    padding: 24px 30px 30px;
}

.title_itinerario{
    font-family:'Times New Roman', serif;
    font-size: 54px;
    text-align: center;
    color:#0d3b66;
    margin: 0 0 40px;
}

.plan_vuelo{
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    padding: 10px 0 20px;
}

.plan_vuelo_linea{
    position: absolute;
    top: 40px;
    bottom: 40px;
    left: 50%;
    width: 4px;
    transform: translateX(-50%);
    background: repeating-linear-gradient(
        to bottom,
        #5d7890 0,
        #5d7890 18px,
        transparent 18px,
        transparent 28px
    );
    opacity: 0.9;
}

.plan_vuelo_item{
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 96px 1fr;
    align-items: center;
    gap: 24px;
    min-height: 110px;
}

.plan_vuelo_texto{
    font-family:'Montserrat', sans-serif;
    font-size: 20px;
    color:#365c85;
}

.plan_vuelo_texto_izq{
    text-align: right;
}

.plan_vuelo_texto_der{
    text-align: left;
    font-family: 'Dancing Script', cursive;
    font-size: 28px;
    color:#1f4e79;
}

.plan_vuelo_punto{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    margin: 0 auto;
    border-radius: 50%;
    background: #23496d;
    color:#0d3b66;
    font-family:'Times New Roman', serif;
    font-size: 38px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}

.imagen_Recepcion_img{
    display: block;
    width: 72%;
    height: 72%;
    object-fit: contain;
}

/* SEXTA PAGINA */

.section_passport{
    margin-top: 96px;
    text-align: center;
}

.boarding_title{
    font-family:'Times New Roman', serif;
    font-size: 58px;
    line-height: 1.08;
    letter-spacing: 1px;
    text-align: center;
    margin: 0 0 48px;
    color:#0d3b66;
}

.dress_code_grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 42px 70px;
    align-items: center;
    justify-content: center;
    max-width: 760px;
    margin: 0 auto 36px;
}

.dress_code_item{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.dress_code_icon{
    width: 132px;
    height: auto;
    object-fit: contain;
}

.dress_code_copy{
    color:#0d3b66;
}

.dress_code_label{
    margin: 0;
    font-family: 'Blosta Script', 'Dancing Script', cursive;
    font-size: 46px;
    line-height: 0.95;
}

.dress_code_text{
    margin: 4px 0 0;
    font-family:'Montserrat', sans-serif;
    font-size: 24px;
    line-height: 1.2;
}

.boarding_note{
    max-width: 760px;
    margin: 22px auto 12px;
    font-family:'Montserrat', sans-serif;
    font-size: 22px;
    line-height: 1.55;
    color:#244f77;
    text-align: justify;
}

.boarding_note strong{
    font-weight: 700;
}

.boarding_chill{
    margin: 24px 0 10px;
    font-family: 'Blosta Script', 'Dancing Script', cursive;
    font-size: 60px;
    line-height: 1;
    color:#0d3b66;
}

.boarding_message{
    max-width: 760px;
    margin: 0 auto;
    font-family:'Montserrat', sans-serif;
    font-size: 22px;
    line-height: 1.55;
    color:#244f77;
    text-align: justify;
}

.boarding_discobox{
    display: flex;
    justify-content: center;
    margin-top: 34px;
}

.boarding_disco{
    width: min(240px, 32vw);
    height: auto;
}

/* SEPTIMA PAGINA */

.memory_control{
    position: relative;
    margin-top: 96px;
    padding: 24px 20px 40px;
    text-align: center;
    overflow: hidden;
}

.memory_title{
    margin: 0 0 28px;
    font-family:'Times New Roman', serif;
    font-size: 58px;
    line-height: 1.08;
    color:#0d3b66;
}

.memory_intro{
    max-width: 760px;
    margin: 0 auto 34px;
    font-family:'Montserrat', sans-serif;
    font-size: 22px;
    line-height: 1.55;
    color:#244f77;
    text-align: justify;
}

.memory_qr_wrap{
    width: 320px;
    margin: 0 auto 30px;
    padding: 0;
}

.memory_qr_img{
    display: block;
    width: 100%;
    height: auto;
}

.memory_script{
    margin: 10px 0 18px;
    font-family: 'Blosta Script', 'Dancing Script', cursive;
    font-size: 54px;
    line-height: 1;
    color:#0d3b66;
}

.memory_gift_text{
    max-width: 760px;
    margin: 0 auto 34px;
    font-family:'Montserrat', sans-serif;
    font-size: 22px;
    line-height: 1.55;
    color:#244f77;
    text-align: justify;
}

.memory_link_box{
    width:320px;
    min-height:112px;
    margin:0 auto;
    padding:22px 36px;
    background:linear-gradient(180deg, #1b5d9e 0%, #124674 55%, #0d3b66 100%);
    border-color:#0d3b66;
    color:#faf0ca;
    font-size:26px;
}

.memory_link_box::after{
    color:#0d3b66;
}

.memory_link_box:hover{
    color:#faf0ca;
    text-decoration:none;
}

/* OCTAVA PAGINA */

.final_boarding{
    margin-top: 96px;
    padding: 28px 0 0;
    text-align: center;
    overflow: hidden;
}

.final_boarding_title{
    margin: 0 0 24px;
    padding: 0 20px;
    font-family: 'Blosta Script', 'Dancing Script', cursive;
    font-size: 64px;
    line-height: 1;
    color:#0d3b66;
}

.final_boarding_intro{
    max-width: 760px;
    margin: 0 auto 32px;
    padding: 0 20px;
    font-family:'Montserrat', sans-serif;
    font-size: 22px;
    line-height: 1.55;
    color:#244f77;
    text-align: justify;
}

.final_boarding_link{
    width:320px;
    min-height:112px;
    margin:0 auto 32px;
    padding:22px 36px;
    background:linear-gradient(180deg, #1b5d9e 0%, #124674 55%, #0d3b66 100%);
    border-color:#0d3b66;
    color:#faf0ca;
    font-size:26px;
}

.final_boarding_link::after{
    color:#0d3b66;
}

.final_boarding_link:hover{
    color:#faf0ca;
    text-decoration:none;
}

.final_boarding_message{
    max-width: 760px;
    margin: 0 auto 28px;
    padding: 0 20px;
    font-family:'Montserrat', sans-serif;
    font-size: 22px;
    line-height: 1.55;
    color:#244f77;
    text-align: justify;
}

.final_boarding_names{
    margin: 0 0 28px;
    padding: 0 20px;
    font-family: 'Blosta Script', 'Dancing Script', cursive;
    font-size: 54px;
    line-height: 1;
    color:#0d3b66;
}

.final_footer{
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 0;
}

.final_footer_image{
    display:block;
    width: min(100%, 760px);
    margin: 0 auto;
    max-width: none;
    height: auto;
}

/* FIX RESPONSIVE DESKTOP (versión móvil adaptada a PC) */

@media (min-width: 769px){
    body{
        overflow-x:hidden;
    }

    .main_wrapper,
    .wedding_container{
        max-width:1100px;
        margin:0 auto;
        overflow-x:hidden;
    }

    .title{
        font-size:58px;
        margin:24px auto 10px;
    }

    .subtitle{
        font-size:22px;
        margin:0 auto 24px;
    }

    .imagen_inicio{
        width:min(100%, 760px);
        height:auto;
        margin-left: 250px; 
        margin-top: 40px;
    }

    .imagen_inicio img{
        width:70%;
        height:70%;
        margin-top:0;
    }

    .novios{
        font-size:40px;
        margin-top: 60px;
    }

    .segunda_vista{
        position:relative;
        padding:40px 28px 24px;
        margin-top:48px;
        overflow:hidden;
    }

    .segunda_vista::before,
    .segunda_vista::after{
        content:"";
        position:absolute;
        left:50%;
        width:140%;
        height:34%;
        background-image:url('../img/recorrido_avion.png');
        background-repeat:no-repeat;
        background-position:center;
        background-size:100% 100%;
        pointer-events:none;
        z-index:-1;
        opacity:0.8;
    }

    .segunda_vista::before{
        top:6%;
        transform:rotate(125deg);
        left:-20%;
    }

    .segunda_vista::after{
        top:60%;
        left:-20%;
        transform:rotate(0deg);
    }

    .segunda_vista .video_container video{
        width:min(50%, 400px);
        height:auto;
        border-radius:12px;
        border:2px solid #d8c7a3;
        box-shadow:0 12px 26px rgba(0,0,0,0.12);
    }

    .segunda_vista .title_historia{
        font-size:32px;
        margin-top:18px;
    }

    .segunda_vista .historia_1,
    .segunda_vista .historia_2,
    .segunda_vista .historia_3{
        font-size:16px;
        line-height:1.6;
        text-align:justify;
    }

    .countdown_section{
        padding:44px 24px 32px;
        margin-top:58px;
    }

    .countdown_section .imagen_fecha{
        width:150px;
        margin-bottom:16px;
    }

    .countdown_section .event_date{
        gap:20px;
        margin-bottom:20px;
    }

    .countdown_section .big_date{
        font-size:124px;
        height:auto;
        line-height:0.9;
    }

    .countdown_section .month,
    .countdown_section .year,
    .countdown_section .time{
        font-size:18px;
    }

    .countdown_section .countdown_title_2{
        font-size:34px;
        margin:18px auto 8px;
        font-family:'Dancing Script', cursive;
    }

    .countdown_section .countdown_title_3{
        font-size:22px;
        margin:8px auto 18px;
    }

    .countdown_section .circle{
        width:82px;
        height:82px;
        border-radius:42%;
    }

    .countdown_section .circle span{
        font-size:28px;
    }

    .countdown_section .circle p{
        font-size:13px;
    }

    .cuarta_vista{
        margin-top:70px;
    }

    .title_ubicacion{
        font-size:48px;
        margin-bottom:18px;
    }

    .imagen_Embarque_img{
        width:min(100%, 360px);
    }

    .map_browser_link{
        width:280px;
        min-height:84px;
        font-size:22px;
    }

    .quinta_vista{
        margin-top:78px;
        padding:28px 36px 36px;
    }

    .title_itinerario{
        font-size:48px;
        margin-bottom:24px;
    }

    .plan_vuelo_item{
        grid-template-columns:1fr 86px 1fr;
        gap:18px;
        min-height:120px;
    }

    .plan_vuelo_texto{
        font-size:18px;
    }

    .plan_vuelo_texto_der{
        font-size:24px;
    }

    .plan_vuelo_punto{
        width:92px;
        height:92px;
        font-size:32px;
    }

    .section_passport{
        margin-top:78px;
    }

    .boarding_title{
        font-size:50px;
        margin-bottom:28px;
    }

    .dress_code_grid{
        max-width:820px;
        gap:28px 42px;
    }

    .dress_code_icon{
        width:120px;
    }

    .dress_code_label{
        font-size:40px;
    }

    .dress_code_text{
        font-size:20px;
    }

    .boarding_note,
    .boarding_message{
        max-width:760px;
        font-size:20px;
    }

    .memory_control{
        margin-top:78px;
        padding:28px 24px 40px;
    }

    .memory_title{
        font-size:50px;
    }

    .memory_intro,
    .memory_gift_text{
        max-width:760px;
        font-size:20px;
    }

    .memory_qr_wrap{
        width:260px;
    }

    .memory_link_box,
    .final_boarding_link{
        width:280px;
        min-height:84px;
        font-size:22px;
    }

    .final_boarding{
        margin-top:78px;
        padding:28px 24px 0;
    }

    .final_boarding_title{
        font-size:56px;
    }

    .final_boarding_intro,
    .final_boarding_message{
        font-size:20px;
    }

    .final_boarding_names{
        font-size:46px;
    }

    .final_footer_image{
        width:min(100%, 860px);
    }
}

/* FIX RESPONSIVE */

@media (max-width:768px){
    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
        overscroll-behavior-x:none;
        touch-action:pan-y;
    }

    body{
        position:relative;
    }

    .main_wrapper,
    .wedding_container{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }

    
    /* primera pagina */
    .wedding_container{
        max-width:100%;
        margin-top: 0%;
        
    }
    .title{
        font-family:'Times new roman MT', serif;
        font-size:50px;
        color:#0d3b66;
        margin:20px auto;
        text-align:center;
        margin-top: 20%; 
    }

    .subtitle{
        text-align:center;
        margin:0 auto 20px;
        margin-top: -5%;
    }

    .imagen_inicio{
        width: 90%;
        height: 280px;
        margin:20px auto;
        overflow: hidden;
        display: flex;
        justify-content:center;
        margin-top: -10%;
    }

    .imagen_inicio img{
        width: 90%;
        height: 90%;
        object-fit: cover;
        object-position: center center;
        display: block;
        margin-left: -5%;
        margin-top: 10%;
    }

    .novios{
        font-family: 'Dancing Script', cursive;
        text-align: center;
        font-size: 28px;
        margin:20px auto;
        color: #0d3b66;
        font-weight: 600;
        line-height: 1.1;
        margin-top: -5%;
    }

    .passport_info{
        padding:15px;
        margin:20px auto;
        text-align:center;
        margin-top: -5%;
        
    }

    /* Segunda pagina */
    
    .segunda_vista{
        position: relative;
        background-image: none;
        padding: 32px 18px 10px;
        margin-top: -20%;
        overflow: hidden;
    }

    .segunda_vista::before,
    .segunda_vista::after{
        content: "";
        position: absolute;
        left: 50%;
        width: 140%;
        height: 40%;
        background-image: url('../img/recorrido_avion.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        pointer-events: none;
        z-index: -1;
    }

    .segunda_vista::before{
        top: 5%;
        transform: rotate(135deg);
        left: -20%;
    }

    .segunda_vista::after{
        top: 50%;
        transform: rotate(0deg);
        left: -20%;
        
    }
    .segunda_vista > *{
        position: relative;
        z-index: 1;
    }

    .segunda_vista .video_section{
        margin-top: 10%;
    }

    .segunda_vista .title_video{
        font-family:'Times new roman MT', serif;
        font-size: 32px;
        text-align: center;
        margin-top: 20%;
    }

    .segunda_vista .video_container{
        margin: 0 auto 10px;
        display: flex;
        justify-content: center;
        margin-top: 10%;
    }

    .segunda_vista .video_container video{
        width: 182px;
        height: 325px;
        border-radius: 0;
        border: none;
        box-shadow: none;
        object-fit: cover;
        background: #b3b0a6;
    }

    .segunda_vista .section{
        margin-top: 8px;
        padding: 0 10px;
    }

    .segunda_vista .title_historia{
        font-family: 'Dancing Script', cursive;
        font-size: 28px;
        text-align:center;
        margin: 8px auto 12px;
        margin-top: 10%;
    }

    .segunda_vista .historia_1{
        margin-top: -0%;
        font-family: 'Montserrat', sans-serif;
        font-size: 15px;
        line-height: 1.45;
        text-align: justify;
        margin-bottom: 8px;

    }

    .segunda_vista .historia_2{
        margin-top: 0;
        font-family: 'Montserrat', sans-serif;
        font-size: 15px;
        line-height: 1.45;
        text-align: justify;
        margin-bottom: 8px;
        
    }

    .segunda_vista .historia_3{
        margin-top: 0;
        font-family: 'Montserrat', sans-serif;
        font-size: 15px;
        line-height: 1.45;
        text-align: justify;
        
    }

    /* tercera pagina */

    .countdown_section{
        position: relative;
        background-image: none;
        padding: 32px 18px 10px;
        margin-top: 0%;
        overflow: hidden;
    }

    .countdown_section::before,
    .countdown_section::after{
        content: "";
        position: absolute;
        left: 50%;
        width: 140%;
        height: 30%;
        background-image: url('../img/recorrido_avion_2.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        pointer-events: none;
        z-index: -1;
    }

    .countdown_section::before{
        top: -2%;
        transform: rotate(0deg);
        left: -20%;
    }


    .countdown_section .imagen_fecha{
        position:relative;
        width:150px;
        margin:0 auto 14px;
        margin-top: 20%;
        z-index:1;
    }

    .countdown_section .imagen_fecha_img{
        display:block;
        width:100%;
        height:auto;    
    }

    /* FECHA GRANDE */

    .countdown_section .event_date{
        display:flex;
        justify-content:center;
        align-items:center;
        gap:15px;
        margin-bottom:25px;
        margin-top:0;
    }

    .countdown_section .big_date{
        font-size:120px;
        font-family:'Times New Roman', serif;
        color:#0d3b66;
        height:auto;
        font: weight 700px;
        align-items:center;
        justify-content:center;
        margin-top:0;
        line-height:0.9;
    }

    .countdown_section .date_info{
        text-align:left;
        margin-top:0;
        font-family:'Montserrat', serif;
    }

    .countdown_section .month{
        display:block;
        font-size:15px;
        letter-spacing:2px;
        color:#0d3b66;
        font-family:'Montserrat', serif;
    }

    .countdown_section .year{
        margin-top: 0px;
        display:block;
        font-size:15px;
        letter-spacing:2px;
        color:#0d3b66;
        font-family:'Montserrat', serif;
    }

    .countdown_section .time{
        display:block;
        font-size:15px;
        color:#0d3b66;
        margin-top:2px;
    }

    .countdown_section .countdown_title_2{
        font-size:28px;
        margin:20px auto;
        font-family: 'Dancing Script', cursive;
        text-align: center;
        margin-top: 0%;
    }

    .countdown_section .countdown_title_3{
        font-size:20px;
        margin:20px auto;
        font-family:'Montserrat', serif;
        text-align: center;
    }

    /* CONTADOR */

    .countdown_section #countdown{
        display:flex;
        justify-content:center;
        gap:20px;
        flex-wrap:wrap;
        overflow-x:visible;
        padding: 0 10px;
    }

    /* CIRCULOS */

    .countdown_section .circle{
        
        margin-top: 10%;
        margin-left: -5%;
        width: 60px;
        height: 75px;
        min-width: 0px;
        border-radius:40%;
        background:#0d3b66;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        color:#faf0ca;
        box-shadow:0 6px 15px rgba(0,0,0,0.15);
        text-align:center;
        padding:8px;
    }

    .countdown_section .circle span{
        font-size:20px;
        font-weight:800;
        line-height:1;
        margin-top: 0%;
    }

    .countdown_section .circle p{
        margin:3px 0 0;
        font-size:11px;
        letter-spacing:0.6px;
    }
    .countdown_section .imagen_recorrido_img{
        width: 140%;
        height: 40%;
        margin-top: -15%;
        margin-left: -20%;
        transform: rotate(180deg);
    }

    /* cuarta pagina */
    .cuarta_vista{
        margin-top: 0%;
    }

    .title_ubicacion{
        font-family:'Times new roman', serif;
        font-size: 40px;
        text-align: center;
        margin-top: 5%;
    }

    .Direccion_info{
        text-align: center;
        margin-top: 10px;
        font-family:'Montserrat', sans-serif;
        font-size: 16px;
    }
    
   .imagen_Embarque{
        display: flex;
        justify-content: center;
        margin-top: -10%;
    }

    .imagen_Ubicacion_img{
        display: block;
        width: 50%;
        height: 50%;
        object-fit: contain;
        margin-left: 25%;
        margin-top: -10%;
    }

    .imagen_Embarque_img{
        display: block;
        width: 100%;
        height: auto;
    }


    .map_browser_link{
        width: 230px;
        min-height: 66px;
        max-width: 250px;
        margin: 16px auto 0;
        padding: 14px 24px;
        font-size: 18px;
    }

    .imagen_recorrido_2_img{
        width: 140%;
        height: 40%;
        margin-top: -50%;
        margin-left: -20%;
        transform: rotate(145deg);
    }

    /* quinta pagina */
    .quinta_vista{
        position: relative;
        background-image: none;
        padding: 32px 18px 10px;
        margin-top: -40%;
        overflow: hidden;
    }

    .quinta_vista::before,
    .quinta_vista::after{
        content: "";
        position: absolute;
        left: 50%;
        width: 140%;
        height: 20%;
        background-image: url('../img/recorrido_avion_2.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        pointer-events: none;
        z-index: -1;
    }

    .quinta_vista::before{
        top: 30%;
        transform: rotate(25deg);
        left: -20%;
    }

    .quinta_vista::after{
        top: 70%;
        left: -20%;
        transform: scaleX(-1) scaleY(-1) rotate(-25deg);
        
    }

    .quinta_vista .title_itinerario{
        font-family:'Times new roman MT', serif;
        font-size: 32px;
        text-align: center;
        margin-top: 20%;
    }

    .plan_vuelo{
        padding: 10px 0 30px;
    }

    .plan_vuelo_linea{
        top: 40px;
        bottom: 60px;
        width: 3px;
    }

    .plan_vuelo_item{
        grid-template-columns: 1fr 74px 1fr;
        gap: 10px;
        min-height: 110px;
    }

    .plan_vuelo_texto{
        font-size: 16px;
    }

    .plan_vuelo_texto_der{
        font-size: 20px;
    }

    .plan_vuelo_punto{
        width: 70px;
        height: 70px;
        font-size: 28px;
    }
    
    .imagen_Recepcion_img{
    display: block;
    width: 80%;
    height: 80%;
    object-fit: contain;
    }

    .imagen_Ceremonia_img{
    display: block;
    width: 80%;
    height: 80%;
    object-fit: contain;
    }

    .imagen_Cena_img{
    display: block;
    width: 80%;
    height: 80%;
    object-fit: contain;
    }

    .imagen_Fiesta_img{
    display: block;
    width: 80%;
    height: 80%;
    object-fit: contain;
    }

    .imagen_Fin_img{
    display: block;
    width: 80%;
    height: 80%;
    object-fit: contain;
    }
    /* sexta pagina */
    .section_passport{
        background: transparent;
        padding: 26px 18px 10px;
        border-radius:10px;
        border:none;
        margin-top: -20%;
    }

    .section_passport .boarding_title{
        font-size: 40px;
        line-height: 1.12;
        letter-spacing: 0.4px;
        margin-bottom: 18px;
    }

    .section_passport .dress_code_grid{
        display: block;
        max-width: 320px;
        margin: 0 auto 12px;
        margin-left: -15px;
    }

    .section_passport .dress_code_item{
        position: relative;
        gap: 10px;
        width: 100%;
    }

    .section_passport .dress_code_item_men{
        justify-content: flex-start;
        max-width: 250px;
        margin-left: 0px;
    }

    .section_passport .dress_code_item_women{
        max-width: 250px;
        margin-top: 10px;
        margin-left: auto;
        justify-content: flex-end;
        margin-left: 95px;
    }

   

    .section_passport .dress_code_icon{
        width: 82px;
    }

    .section_passport .dress_code_item_men .dress_code_copy{
        text-align: center;
        margin-top: -4px;
    }

    .section_passport .dress_code_item_women .dress_code_copy{
        text-align: center;
        margin-top: 2px;
        margin-right: 6px;
        order: -1;
    }

    .section_passport .dress_code_label{
        font-size: 28px;
    }

    .section_passport .dress_code_text{
        margin-top: -2px;
        font-size: 15px;
        line-height: 1.15;
        text-align: justify;
    }

    .section_passport .boarding_note{
        max-width: 292px;
        margin: 20px auto 12px;
        font-size: 15px;
        line-height: 1.42;
        text-align: justify;
    }

    .section_passport .boarding_chill{
        font-size: 28px;
        margin: 10px 0 2px;
    }

    .section_passport .boarding_message{
        max-width: 292px;
        font-size: 15px;
        line-height: 1.35;
        text-align: justify;
    }

    .section_passport .boarding_discobox{
        margin-top: 18px;
    }

    .section_passport .boarding_disco{
        width: 126px;
    }


    /* septima pagina */
    .memory_control{
        margin-top: 0%;
        padding: 18px 18px 26px;
    }

    .memory_control::before{
        content: "";
        position: absolute;
        left: 50%;
        width: 150%;
        height: 40%;
        background-image: url('../img/recorrido_avion.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        pointer-events: none;
        z-index: -1;
    }

    .memory_control::before{
        top: 70%;
        left: -30%;
        transform: rotate(-40deg);
    }


    .memory_control .memory_title{
        font-size: 30px;
        line-height: 1.42;
        margin-bottom: 14px;
    }

    .memory_control .memory_intro{
        max-width: 260px;
        margin-bottom: 18px;
        font-size: 15px;
        line-height: 1.42;
        text-align: justify;
    }

    .memory_control .memory_qr_wrap{
        width: 200px;
        margin-bottom: 18px;
        padding: 0;
    }

    .memory_control .memory_script{
        font-size: 35px;
        margin: 2px 0 10px;
    }

    .memory_control .memory_gift_text{
        max-width: 270px;
        margin-bottom: 18px;
        font-size: 15px;
        line-height: 1.42;
        text-align: justify;
    }

    .memory_control .memory_link_box{
        width: 230px;
        min-height: 66px;
        padding: 14px 24px;
        font-size: 18px;
    }
    
    .imagen_Regalo_img {
        display: block;
        width: 50%;
        height: 50%;
        object-fit: contain;
        margin-left: 28%;
    }

      /* octava pagina */
    .final_boarding{
        position: relative;
        left: 50%;
        right: 50%;
        width: 100vw;
        margin-top: 0%;
        margin-left: -50vw;
        margin-right: -50vw;
        padding: 16px 0 0;
    }

    .final_boarding .final_boarding_title{
        font-size: 40px;
        margin-bottom: 14px;
        margin-top: 7%;
    }

    .final_boarding .final_boarding_intro{
        max-width: 285px;
        margin-bottom: 18px;
        font-size: 15px;
        line-height: 1.42;
        text-align: justify;
        margin-top: 7%;
    }

    .final_boarding .final_boarding_link{
        width: 210px;
        min-height: 66px;
        padding: 14px 24px;
        font-size: 18px;
        margin-top: 7%;
    }

    .final_boarding .final_boarding_message{
        max-width: 285px;
        margin-bottom: 16px;
        font-size: 15px;
        line-height: 1.42;
        text-align: justify;
        margin-top: 7%;
    }
    .Fecha_limite_reserva{
        font-size: 17px;
        line-height: 1.42;
        text-align: center;
        font-weight: bold;
    }

    .final_boarding .final_boarding_names{
        font-size: 28px;
        margin-bottom: 14px;
        margin-top: 7%;
    }

    .final_footer{
        position: relative;
        left: 50%;
        right: 50%;
        width: 100vw;
        margin-left: -50vw;
        margin-right: -50vw;
    }
    .final_footer .final_footer_image{
        width: 100vw;
        max-width: none;
    }

    /* INDEX */
    body.landing_body{
        height:100vh;
        margin:0;
        background:#f3eddc;
        overflow:hidden;
        overscroll-behavior:none;
        touch-action:none;
    }

    body.landing_body::before{
        content:none;
    }

    .landing_cover{
        position:relative;
        display:flex;
        flex-direction:column;
        width:min(100vw, 430px);
        height:100vh;
        margin:0 auto;
        text-decoration:none;
        color:inherit;
        background:#f3eddc;
        box-shadow:0 16px 45px rgba(13, 44, 74, 0.18);
        overflow:hidden;
    }

    .landing_top{
        position:relative;
        height:50vh;
        padding:36px 24px 120px;
        background:#113f6d;
        transform-origin:top center;
        transform-style:preserve-3d;
        transition:transform 1.1s cubic-bezier(0.22, 0.8, 0.2, 1), filter 1.1s ease;
        z-index:2;
        backface-visibility:hidden;
        overflow:visible;
    }

    .landing_top_back{
        position:absolute;
        inset:0;
        background:
            linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.08) 100%),
            url('../img/fondo.png') center top / cover no-repeat;
        transform:rotateX(180deg);
        transform-origin:top center;
        backface-visibility:hidden;
        z-index:0;
    }


    .landing_flowers{
        position:relative;
        z-index:1;
        display:flex;
        justify-content:center;
        margin-top:70px;
    }

    .landing_flowers img{
        width:min(100%, 290px);
        height:auto;
        display:block;
        filter:drop-shadow(0 12px 18px rgba(0,0,0,0.12));
        opacity:0.98;
    }

    .landing_prompt{
        position:absolute;
        top:65%;
        left:50%;
        bottom:72px;
        transform:translateX(-50%);
        width:260px;
        height:160px;
        text-align:center;
        z-index:2;
    }

    .landing_prompt_curve{
        width:100%;
        height:100%;
        display:block;
        overflow:visible;
    }

    .landing_prompt_text{
        font-family:'Cormorant Garamond', serif;
        font-size:24px;
        font-weight:600;
        color:#fff8e8;
        text-shadow:0 3px 8px rgba(0,0,0,0.18);
        fill:#fff8e8;
        letter-spacing:0.5px;
        
    }

    .landing_bottom{
        height:50vh;
        background:
            linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.08) 100%),
            url('../img/fondo.png') center top / cover no-repeat;
    }

    .landing_seal_wrap{
        position:absolute;
        left:50%;
        bottom:-74px;
        top: 100%;
        transform:translate(-50%, -50%);
        z-index:3;
        width:150px;
        height:150px;
        transition:transform 1.1s cubic-bezier(0.22, 0.8, 0.2, 1), opacity 0.8s ease;
    }

    .landing_seal_shadow{
        position:absolute;
        inset:auto 18px 8px;
        height:24px;
        background:radial-gradient(circle, rgba(77, 39, 14, 0.38) 0%, rgba(77, 39, 14, 0) 72%);
        filter:blur(7px);
    }

    .landing_seal_image{
        position:relative;
        width:100%;
        height:100%;
        display:block;
        object-fit:contain;
        filter:drop-shadow(0 10px 14px rgba(77,39,14,0.22));
    }

    .nombres_carta{
        font-size:28px;
        color:#fff8e8;
        font-family: 'Dancing Script', cursive;
        margin-top: 20%;
        }
}