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

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


html,
body {

    width: 100%;
    height: 100%;

    overflow: hidden;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    background: #f5f7fb;

    color: #222;

}



/* =====================================================
   HEADER
===================================================== */


header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 20;

    padding-top:
        env(safe-area-inset-top);

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

    backdrop-filter:
        blur(12px);

}



header h1 {

    text-align: center;

    font-size: 22px;

    padding: 14px 0 12px;

    font-weight: 700;

}




/* =====================================================
   CONTENEDOR PRINCIPAL
===================================================== */


main {

    height: 100vh;

    padding-top: 90px;

    padding-bottom:
        calc(70px + env(safe-area-inset-bottom));

}



.slides {


    height: 100%;

    width: 100%;


    display: flex;


    overflow-x: auto;


    scroll-snap-type:
        x mandatory;


    scroll-behavior:
        smooth;


    scrollbar-width:
        none;

}


.slides::-webkit-scrollbar {

    display:none;

}



/* =====================================================
   SLIDES
===================================================== */


.slide {


    flex:
        0 0 100%;


    width:100%;


    height:100%;


    scroll-snap-align:
        center;

    scroll-snap-stop: always;


    display:flex;


    flex-direction:column;


    align-items:center;


    justify-content:center;


    padding:20px;


    text-align:center;


    animation:
        fadeIn .4s ease;


}



@keyframes fadeIn {

    from {

        opacity:0;

        transform:
            translateX(20px);

    }


    to {

        opacity:1;

        transform:
            translateX(0);

    }

}




.slide h2 {


    font-size:28px;

    margin-top:22px;

}



.slide p {


    max-width:350px;


    margin-top:15px;


    font-size:18px;


    line-height:1.45;


    color:#555;


}



/* =====================================================
   IMAGEN
===================================================== */


.image-container {


    position:relative;


    width:100%;


    max-width:420px;


}



.image-container img {


    width:100%;


    height:58vh;


    object-fit:contain;


    background:white;


    border-radius:22px;


    box-shadow:

        0 12px 35px

        rgba(0,0,0,.15);


}



/* =====================================================
   FLECHAS
===================================================== */


.nav {


    position:absolute;


    top:50%;


    transform:
        translateY(-50%);



    width:48px;


    height:48px;



    border-radius:50%;



    border:none;



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



    color:white;



    font-size:28px;



    z-index:5;



    display:flex;



    align-items:center;



    justify-content:center;



    backdrop-filter:
        blur(5px);



    cursor:pointer;


}



.nav:active {


    transform:
        translateY(-50%)
        scale(.9);

}



.prev {


    left:-10px;


}



.next {


    right:-10px;


}



.hidden {


    opacity:0;


    pointer-events:none;


}



/* =====================================================
   PUNTOS
===================================================== */


footer {


    position:fixed;


    bottom:0;


    left:0;


    width:100%;


    z-index:20;


    padding-bottom:
        calc(18px + env(safe-area-inset-bottom));


}



.dots {


    display:flex;


    justify-content:center;


    gap:10px;


}



.dot {


    width:10px;


    height:10px;


    border-radius:50%;


    border:none;


    background:#bbb;


    transition:.3s;


}



.dot.active {


    width:28px;


    border-radius:10px;


    background:#1976d2;


}



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


.final-slide {


    justify-content:center;


}



.done {


    width:90px;


    height:90px;


    border-radius:50%;


    background:#1976d2;


    color:white;


    display:flex;


    align-items:center;


    justify-content:center;


    font-size:55px;


    margin-bottom:25px;


}



.remember {


    margin:35px 0;


    display:flex;


    align-items:center;


    gap:12px;


    font-size:17px;


}



.remember input {


    width:22px;


    height:22px;


}



.albumButton {


    width:90%;


    max-width:360px;


    padding:20px;


    border:0;


    border-radius:18px;


    background:#1976d2;


    color:white;


    font-size:22px;


    font-weight:800;


    box-shadow:


        0 10px 25px

        rgba(25,118,210,.35);


}



.albumButton:active {


    transform:
        scale(.97);


}



/* =====================================================
   DARK MODE
===================================================== */


@media (prefers-color-scheme: dark) {


body {

    background:#121212;

    color:white;

}



header {


    background:

        rgba(20,20,20,.85);


}



.slide p {


    color:#ccc;


}


.image-container img {


    background:#222;


}


.progress {


    background:#333;


}


.dot {


    background:#555;


}

}