/*==================================================
    RESPONSIVE.CSS
    Invitación de Boda
    Ruth & JP
==================================================*/


/*==================================================
    1. MÓVIL
    0px - 767px

    - Sin tarjeta
    - Contenido en la zona superior
    - La pareja queda libre en la parte inferior
==================================================*/

@media (max-width:767px){

    /*------------------------------------------
                    HERO
    ------------------------------------------*/

    .hero{

        min-height:100svh;
        min-height:100dvh;

        display:flex;

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

        padding:
            13vh
            22px
            40px;

    }


    .hero-content{

        position:relative;

        z-index:2;

        width:100%;

        display:flex;

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

    }


    /*------------------------------------------
                FILTRO MÓVIL
    ------------------------------------------*/

    .hero-filter{

        background:
            linear-gradient(
                to bottom,

                rgba(0,0,0,.15) 0%,

                rgba(0,0,0,.20) 35%,

                rgba(0,0,0,.25) 60%,

                rgba(0,0,0,.55) 100%
            );

    }


    /*------------------------------------------
            SIN TARJETA EN MÓVIL
    ------------------------------------------*/

    .hero-card{

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

        padding:0;
        margin:0;

        background:transparent;

        backdrop-filter:none;
        -webkit-backdrop-filter:none;

        border:none;
        border-radius:0;

        box-shadow:none;

        text-align:center;

    }


    .hero-card::before{

        display:none;

    }


    /*------------------------------------------
                    LOGO
    ------------------------------------------*/

    .logo-container{

        display:flex;

        justify-content:center;

        margin-bottom:12px;

    }


    .logo{

        /*width:115px;*/
        width:150px;
        margin:0 auto;

    }


    /*------------------------------------------
                TEXTO HERO
    ------------------------------------------*/

    .hero-text{

        color:#FFFFFF;

        font-size:.82rem;

        line-height:1.45;

        letter-spacing:.5px;

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

    }


    /*------------------------------------------
                INVITADO
    ------------------------------------------*/

    #guest-name{

        margin:9px 0;

        color:#FFFFFF;

        font-size:
            clamp(
                2.2rem,
                10vw,
                2.9rem
            );

        line-height:1;

        text-shadow:
            0 3px 15px
            rgba(0,0,0,.85);

    }


    /*------------------------------------------
                    PASES
    ------------------------------------------*/

    .guest-pass{

        display:inline-flex;

        flex-direction:row;

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

        gap:7px;

        margin:
            14px
            auto
            12px;

        padding:
            8px
            16px;

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

        backdrop-filter:
            blur(8px);

        -webkit-backdrop-filter:
            blur(8px);

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

        border-radius:999px;

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

    }


    #guest-pass-number{

        color:#FFFFFF;

        font-size:1.25rem;

        font-weight:600;

    }


    #guest-pass-text{

        color:#FFFFFF;

        font-size:.74rem;

    }


    /*------------------------------------------
                DESCUBRIR
    ------------------------------------------*/

    .scroll-down{

        display:flex;

        flex-direction:column;

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

        width:100%;

        gap:3px;

        color:#FFFFFF;

        font-size:.74rem;

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

    }


    .scroll-down span{

        font-size:1.15rem;

    }


    /*==================================================
                    FRASE
    ==================================================*/

    .quote{

        padding:
            85px
            22px;

    }


    .quote h2{

        max-width:500px;

        font-size:1.8rem;

        line-height:1.45;

    }


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

    .countdown{

        padding:
            85px
            0;

    }



    .countdown-grid{

        width:88%;

        max-width:420px;

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

        gap:14px;

    }


    .time-box{

        padding:
            25px
            10px;

        border-radius:20px;

    }


    .time-box span{

        font-size:3rem;

    }


    .time-box p{

        margin-top:8px;

        font-size:.70rem;

        letter-spacing:1px;

    }


    /*==================================================
                MESA DE REGALOS
    ==================================================*/

    .gifts{

        padding:
            90px
            22px;

    }


    .section-logo{

        width:95px;

    }


    .gifts h2{

        font-size:2.2rem;

    }


    .gifts p{

        font-size:.92rem;

    }


    .gift-number{

        padding:
            15px
            25px;

        font-size:1rem;

    }


    /*==================================================
                    RSVP
    ==================================================*/

    .rsvp{

        padding:
            90px
            22px;

    }


    .rsvp h2{

        font-size:2.2rem;

    }


    .rsvp p{

        font-size:.92rem;

    }


    /*==================================================
                    BOTONES
    ==================================================*/

    .btn{

        width:100%;

        max-width:300px;

    }


    /*==================================================
                    FOOTER
    ==================================================*/

    footer{

        padding:
            65px
            20px;

    }

}



/*==================================================
    2. MÓVILES MUY PEQUEÑOS
    Hasta 380px
==================================================*/

@media (max-width:380px){

    .hero{

        padding:
            10vh
            18px
            30px;

    }


    .logo{

        /*width:100px;*/
        width:130px;

    }


    .logo-container{

        margin-bottom:8px;

    }


    .hero-text{

        font-size:.76rem;

    }


    #guest-name{

        margin:8px 0;

        font-size:2.15rem;

    }


    .guest-pass{

        margin:
            11px
            auto
            10px;

        padding:
            7px
            14px;

    }


    #guest-pass-number{

        font-size:1.1rem;

    }


    #guest-pass-text{

        font-size:.68rem;

    }


    .scroll-down{

        font-size:.68rem;

    }


    .countdown-grid{

        width:92%;

        gap:10px;

    }


    .time-box span{

        font-size:2.5rem;

    }

}



/*==================================================
    3. TABLET
    768px - 1199px

    - Sin tarjeta
    - Contenido inferior derecho
    - Puente y pareja quedan libres
==================================================*/

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

    section{

        padding:
            120px
            0;

    }


    /*------------------------------------------
                    HERO
    ------------------------------------------*/

    .hero{

        min-height:100dvh;

        display:flex;

        align-items:flex-end;

        justify-content:center;

        padding:
            50px
            6%
            80px;

    }


    .hero-content{

        position:relative;

        z-index:2;

        width:100%;

        display:flex;

        justify-content:flex-end;

        align-items:flex-end;

    }


    /*------------------------------------------
            SIN TARJETA EN TABLET
    ------------------------------------------*/

    .hero-card{

        width:340px;

        max-width:43%;

        padding:0;

        margin:0;

        background:transparent;

        backdrop-filter:none;

        -webkit-backdrop-filter:none;

        border:none;

        border-radius:0;

        box-shadow:none;

        text-align:center;

    }


    .hero-card::before{

        display:none;

    }


    /*------------------------------------------
                    LOGO
    ------------------------------------------*/

    .logo-container{

        display:flex;

        justify-content:center;

        margin-bottom:15px;

    }


    .logo{

        /*width:135px;*/
        width:175px;

        margin:0 auto;

    }


    /*------------------------------------------
                    TEXTO
    ------------------------------------------*/

    .hero-text{

        color:#FFFFFF;

        font-size:.85rem;

        line-height:1.55;

        letter-spacing:.5px;

        text-shadow:
            0 2px 12px
            rgba(0,0,0,.75);

    }


    #guest-name{

        margin:12px 0;

        color:#FFFFFF;

        font-size:3rem;

        line-height:1;

        text-shadow:
            0 4px 22px
            rgba(0,0,0,.80);

    }


    /*------------------------------------------
                    PASES
    ------------------------------------------*/

    .guest-pass{

        display:inline-flex;

        flex-direction:row;

        align-items:center;

        justify-content:center;

        gap:8px;

        margin:
            18px
            auto
            15px;

        padding:
            9px
            18px;

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

        backdrop-filter:
            blur(10px);

        -webkit-backdrop-filter:
            blur(10px);

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

        border-radius:999px;

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

    }


    #guest-pass-number{

        color:#FFFFFF;

        font-size:1.35rem;

    }


    #guest-pass-text{

        color:#FFFFFF;

        font-size:.75rem;

    }


    /*------------------------------------------
                DESCUBRIR
    ------------------------------------------*/

    .scroll-down{

        display:flex;

        flex-direction:column;

        align-items:center;

        justify-content:center;

        width:100%;

        gap:5px;

        color:#FFFFFF;

        font-size:.78rem;

        text-shadow:
            0 2px 10px
            rgba(0,0,0,.70);

    }


    .scroll-down span{

        font-size:1.25rem;

    }


    /*------------------------------------------
                CUENTA REGRESIVA
    ------------------------------------------*/

    .countdown-grid{

        width:90%;

        max-width:850px;

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

        gap:25px;

    }

}



/*==================================================
    4. COMPUTADORA
    1200px - 1599px

    - Sin tarjeta
    - Contenido inferior izquierdo
    - Aprovecha el agua como espacio negativo
==================================================*/

@media (min-width:1200px) and (max-width:1599px){

    section{

        padding:
            140px
            0;

    }


    /*------------------------------------------
                    HERO
    ------------------------------------------*/

    .hero{

        min-height:100dvh;

        display:flex;

        align-items:flex-end;

        justify-content:center;

        padding:
            60px
            8%
            80px;

    }


    .hero-content{

        position:relative;

        z-index:2;

        width:100%;

        max-width:1400px;

        display:flex;

        justify-content:flex-start;

        align-items:flex-end;

    }


    /*------------------------------------------
                SIN TARJETA
    ------------------------------------------*/

    .hero-card{

        width:360px;

        padding:0;

        margin:0;

        background:transparent;

        backdrop-filter:none;

        -webkit-backdrop-filter:none;

        border:none;

        border-radius:0;

        box-shadow:none;

        text-align:center;

    }


    .hero-card::before{

        display:none;

    }


    /*------------------------------------------
                    LOGO
    ------------------------------------------*/

    .logo-container{

        display:flex;

        justify-content:center;

        margin-bottom:16px;

    }


    .logo{

        /*width:145px;*/
        width:190px;
        margin:0 auto;

    }


    /*------------------------------------------
                    TEXTO
    ------------------------------------------*/

    .hero-text{

        color:#FFFFFF;

        font-size:.90rem;

        line-height:1.6;

        letter-spacing:.6px;

        text-shadow:
            0 2px 12px
            rgba(0,0,0,.75);

    }


    #guest-name{

        margin:14px 0;

        color:#FFFFFF;

        font-size:3.4rem;

        line-height:1;

        text-shadow:
            0 4px 22px
            rgba(0,0,0,.80);

    }


    /*------------------------------------------
                    PASES
    ------------------------------------------*/

    .guest-pass{

        display:inline-flex;

        flex-direction:row;

        align-items:center;

        justify-content:center;

        gap:9px;

        margin:
            20px
            auto
            16px;

        padding:
            10px
            20px;

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

        backdrop-filter:
            blur(10px);

        -webkit-backdrop-filter:
            blur(10px);

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

        border-radius:999px;

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

    }


    #guest-pass-number{

        color:#FFFFFF;

        font-size:1.4rem;

    }


    #guest-pass-text{

        color:#FFFFFF;

        font-size:.78rem;

    }


    /*------------------------------------------
                DESCUBRIR
    ------------------------------------------*/

    .scroll-down{

        display:flex;

        flex-direction:column;

        align-items:center;

        justify-content:center;

        width:100%;

        gap:6px;

        color:#FFFFFF;

        font-size:.80rem;

        text-shadow:
            0 2px 10px
            rgba(0,0,0,.70);

    }


    .scroll-down span{

        font-size:1.3rem;

    }


    /*------------------------------------------
                CUENTA REGRESIVA
    ------------------------------------------*/

    .countdown-grid{

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

    }

}



/*==================================================
    5. PANTALLAS GRANDES
    Desde 1600px
==================================================*/

@media (min-width:1600px){

    section{

        padding:
            150px
            0;

    }


    .hero{

        min-height:100dvh;

        display:flex;

        align-items:flex-end;

        justify-content:center;

        padding:
            70px
            10%
            95px;

    }


    .hero-content{

        position:relative;

        z-index:2;

        width:100%;

        max-width:1500px;

        display:flex;

        justify-content:flex-start;

        align-items:flex-end;

    }


    .hero-card{

        width:390px;

        padding:0;

        background:transparent;

        backdrop-filter:none;

        -webkit-backdrop-filter:none;

        border:none;

        border-radius:0;

        box-shadow:none;

        text-align:center;

    }


    .hero-card::before{

        display:none;

    }


    .logo-container{

        display:flex;

        justify-content:center;

        margin-bottom:18px;

    }


    .logo{

        /*width:155px;*/
        width:190px;
        margin:0 auto;

    }


    .hero-text{

        color:#FFFFFF;

        font-size:.95rem;

        text-shadow:
            0 2px 12px
            rgba(0,0,0,.75);

    }


    #guest-name{

        margin:15px 0;

        color:#FFFFFF;

        font-size:3.7rem;

        text-shadow:
            0 4px 24px
            rgba(0,0,0,.80);

    }


    .guest-pass{

        display:inline-flex;

        margin:
            20px
            auto
            16px;

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

        backdrop-filter:
            blur(10px);

        -webkit-backdrop-filter:
            blur(10px);

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

    }


    #guest-pass-number,
    #guest-pass-text{

        color:#FFFFFF;

    }


    .scroll-down{

        display:flex;

        flex-direction:column;

        align-items:center;

        width:100%;

        color:#FFFFFF;

        text-shadow:
            0 2px 10px
            rgba(0,0,0,.70);

    }


    .countdown-grid{

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

    }

}



/*==================================================
    6. TELÉFONO EN HORIZONTAL
==================================================*/

@media (max-width:767px) and (orientation:landscape){

    /*==================================================
                        ITINERARIO
    ==================================================*/

    .itinerary{

        padding:
            90px
            22px;

    }


    .itinerary h2{

        font-size:2.2rem;

    }


    .itinerary-divider{

        margin:
            22px
            auto
            45px;

    }


    /* Línea a la izquierda */

    .timeline::before{

        left:18px;

    }


    /* Cada evento */

    .timeline-item{

        display:block;

        min-height:auto;

        padding:
            0
            0
            42px
            55px;

    }


    /* Último evento */

    .timeline-item:last-child{

        padding-bottom:0;

    }


    /* Punto */

    .timeline-dot{

        top:5px;

        left:18px;

    }


    /* Todos alineados igual */

    .timeline-info,
    .timeline-item:nth-child(even) .timeline-info{

        padding:0;

        text-align:left;

    }


    /* Hora */

    .timeline-time{

        margin-bottom:5px;

        font-size:.72rem;

    }


    /* Evento */

    .timeline-info h3{

        font-size:1.45rem;

    }

    .hero{

        min-height:650px;

        padding:
            40px
            30px
            30px;

    }


    .logo{

        width:90px;

    }


    .logo-container{

        margin-bottom:7px;

    }


    .hero-text{

        font-size:.72rem;

    }


    #guest-name{

        margin:6px 0;

        font-size:2rem;

    }


    .guest-pass{

        margin:
            9px
            auto;

        padding:
            6px
            13px;

    }


    .scroll-down{

        font-size:.68rem;

    }

}



/*==================================================
    7. TABLET CON POCA ALTURA
==================================================*/

@media
(min-width:768px)
and
(max-width:1199px)
and
(max-height:700px){

    .hero{

        min-height:700px;

        padding-bottom:45px;

    }


    .logo{

        width:105px;

    }


    #guest-name{

        font-size:2.5rem;

    }


    .guest-pass{

        margin:
            12px
            auto;

    }

}



/*==================================================
    8. PC CON POCA ALTURA
==================================================*/

@media
(min-width:1200px)
and
(max-height:750px){

    .hero{

        min-height:750px;

        padding-bottom:50px;

    }


    .logo{

        width:115px;

    }


    #guest-name{

        margin:10px 0;

        font-size:2.8rem;

    }


    .guest-pass{

        margin:
            14px
            auto
            12px;

    }

}



/*==================================================
    9. IMPRESIÓN
==================================================*/

@media print{

    .scroll-down,
    .btn{

        display:none;

    }

}
/*==================================================
            FOOTER - TABLET
==================================================*/

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

    .wedding-footer{

        height:70vh;
        min-height:600px;

    }


    .footer-logo-main{

        width:165px;

    }


    .footer-content{

        padding-bottom:60px;

    }


    .footer-names{

        font-size:3rem;

    }

}


/*==================================================
            FOOTER - TELÉFONO
==================================================*/

@media (max-width:767px){

    .wedding-footer{

        height:75vh;

        min-height:580px;
        max-height:720px;

    }


    .footer-image{

        object-position:center;

    }


    .footer-content{

        padding:
            30px
            20px
            50px;

    }


    .footer-logo-main{

        width:145px;

        margin-bottom:20px;

    }


    .footer-text{

        font-size:.65rem;

        letter-spacing:3px;

    }


    .footer-names{

        font-size:2.6rem;

    }

}