/*- volador . website
/*- 250325
/*- By: Gabriel Venier
/*- http://www.gabrielvenier.com.ar */

/*  reset  */
/* Box sizing rules */
*,
*::before,
*::after{
	box-sizing:border-box;
	margin:0;
	padding:0;
    text-decoration: none;
}


h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
figure{
    margin:0;
    list-style: none;
}

html,
html:focus-within{
	scroll-behavior:smooth;
}

img,
picture,
svg{
	max-width:100%;
	display:block;
    margin: 0;
    padding: 0;
}

@viewport{
  zoom:1.0;
  width:extend-to-zoom;
}


/* fonts */
.mulish{
    font-family: "Mulish", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}


/*  root  */
:root{

    --color-blanco:255, 255, 255;
    --color-negro:0, 0, 0;
    --color-amarillo:255, 204, 41;
    --color-rojo:237, 47, 89;
    --color-azul:81, 168, 177;

    --color-top_menu:250, 250, 250;

    --color-aprendo_jugando:230, 194, 32;
    --color-flashcards:87, 153, 101;
    --color-juegos_geniales:230, 95, 116;
    --color-juegos_guiados:102, 185, 193;
    --color-relajo_jugando:158, 113, 58;

    /* --f-shadow: -1px 3px 8px rgba(0,0,0,0.8); */
    --f-shadow: 4px 4px 3px rgba(66, 68, 90, 1);
    --shadow-box:0px 15px 16px -2px rgba(0,0,0,0.34);

    --fs-h1:clamp( 2.5rem , 5vw + 1rem , 4.5rem );
    --fs-h1-main-wrapper:clamp( 2.5rem , 5vw + 1rem , 4rem );

    --fs-h2-textos:clamp( 1rem , 1.5vw + 1rem , 2rem );
    --fs-h2-card:clamp( 2.4rem , 2vw + 1rem , 2.8rem );
    --fs-h2-card-related:clamp( 1.2rem , 3vw + 1rem , 2rem );
    --fs-h2-bottom:1.5rem;
    --fs-h2-faqs:1.4rem;

    --fs-h3-caracteristicas:1.3rem;
    --fs-h3-card:1.2rem;
    --fs-h3-related:clamp( 1rem , 1.5vw + 1rem , 2rem );

    --fs-p-banner:clamp( 1rem , 1vw + 1rem , 2rem );
    --fs-p-footer:1rem;
    --fs-p-main-wrapper:1.3rem;
    --fs-p-textos:clamp( .8rem , .5vw + 1rem , 1.5rem );
    --fs-p-caracteristicas:.8rem;
    --fs-p-card:1.3rem;
    --fs-p-card-related:clamp( .8rem , .5vw + 1rem , 1.5rem );
    --fs-p-bottom:1rem;
    --fs-p-faqs:1rem;

    --border-footer: 66px solid rgba(var(--color-negro));     /* borde inferior del site */

    --width-full:100%;                     /* ancho del texto en los banners */
    --width-main:min(1700px,95%);                       /* ancho maximo de los wrappers / contenidos */
    --width-bottom_links:min(1200px,95%);               /* ancho de los links de abajo */

    --padding-index:min(1.5rem, 2%);                    /* padding responsive del index */
    --padding-index-tiulos:min(4rem, 4%);               /* padding responsive titulos categorias index */
    --padding-caracteristicas:min(5rem, 4%);               /* padding responsive titulos categorias index */
    --padding-info:min(8rem, 4%);               /* padding responsive titulos categorias index */

}

/* fonts presets */
html{
    font-family: "Mulish", sans-serif;
    line-height: 1.1;
}
h1,
h2{
    font-family:var(--ff-h);
}

/* start layout ---------------------------------------------------------------------- */
body{
    background-color: rgba(var(--color-negro), .75);
}
main{
    background-color: rgb(var(--color-blanco));
}


/*  top fade ------------------------------------------------------------------------- */
.top_fade{
    position:fixed;
    top:-25px;
    left:-5vw;
    width:110vw;
    height:10px;
    box-shadow:0px 10px 20px rgba(0,0,0,1);
    z-index:10000;
}


/* top menu ------------------------------------------------------------------------- */
header{
    width:100%;
    /* background-color: rgb(var(--color-top_menu)); */
    position: absolute;
}

/* hide checkers */
#check,
.check-btn{
    display: none;
}

/* nav bar */
nav{
    width: var(--width-main);
    margin-inline: auto;
    padding-block: 1em;
    font-size: 1rem;
    font-weight: 600;

    display: flex;
    gap: 2em;
    align-items:center;
    justify-content: space-between;
    
    a:link,
    a:active,
    a:visited{
        color:rgb(var(--color-blanco));     /* texto del menu */
        text-shadow: var(--f-shadow);
    }

    img{
        height: 40px;
        filter: drop-shadow(3px 3px 3px black);
    }
}

.top-menu-links{
    /* background-color: rgb(var(--color-top_menu)); */
    display: flex;
    gap: 1em;
}

/* boton tienda */
.boton_tienda{
    background-color: rgb(var(--color-negro));
    border-radius: 10rem;
    padding:.2em 1em;
}

/* ocultar el nombre solo en el index */
.index-header > .top-menu > :nth-child(3){
    opacity: 0;
    cursor: default;
}

/* media cambios ---------------------------------------------------------------------------------- */
@media (max-width: 670px){

    .top_menu-logo{
        order: -1;
    }

    .check-btn{
        display: block;
        z-index: 1010;
        color: rgb(var(--color-blanco));
        text-shadow: var(--f-shadow);

    }

    .top-menu-links{
        
        background-color: rgb(var(--color-negro));
        padding:3em 15%;
        top: 0;
        position: fixed;
        width: 100%;
        height: 100%;
        right: 100%;

        flex-direction: column;

        transition: all 300ms  ease;
    }

    #check:checked ~ .top-menu-links{
        right: 0;
    }

    label{
        display: none;
    }
}


/* index wrapper ------------------------------------------------------------------------------- */
.index_wrapper{
    width: 100%;

    display: grid;
    gap: 1em;
    
    padding-bottom: 2em;

    /* margin-top: calc((-40px - 2em)); */

    > :nth-child(n){        /* cada card */
        width: var(--width-bottom_links);
        height: 333px;

        background-position: center;
        background-repeat: no-repeat;

        display: flex;
        align-items: center;
    }

    > :nth-child(even){
        border-radius: 166px 0 0 166px;
        margin-inline: auto 0;

        box-shadow: 10px 10px 32px 0px rgba(0,0,0,0.42) inset;

        > img{     /* logo centrado */
            height: 111px;
            border-radius: 100rem;
            box-shadow: var(--shadow-box);

            margin-left: 111px;
        }

    }

    > :nth-child(odd){
        border-radius: 0 166px 166px 0;

        justify-content: flex-end;

        box-shadow: -10px 10px 32px 0px rgba(0,0,0,0.42) inset;

        > img{     /* logo centrado */
            height: 111px;
            border-radius: 100rem;
            box-shadow: var(--shadow-box);

            margin-right: 111px;
            
        }
    }

    > :first-child{     /* titulo de seccion / top banner */
        width: var(--width-full);
        border-radius: 0;
        height: 666px;

        justify-content: flex-start;

        > :first-child{
            text-shadow: var(--f-shadow);
            width: var(--width-bottom_links);
            margin-inline: auto;
            color: rgb(var(--color-blanco));

           > h1{
                font-size: var(--fs-h1-main-wrapper);
            }

            > p{
                font-size: var(--fs-p-banner);
            }
        }
    }

}



/* main ------------------------------------------------------------------------------- */
.card_wrapper{
    width: 100%;

    display: grid;
    gap: 1em;
    
    padding-bottom: 2em;

    > :nth-child(n){        /* cada card */
        width: var(--width-bottom_links);
        height: 333px;

        background-position: center;
        background-repeat: no-repeat;

        display: flex;
        align-items: center;
    }

    > :nth-child(even){
        border-radius: 166px 0 0 166px;
        margin-inline: auto 0;

        box-shadow: 10px 10px 32px 0px rgba(0,0,0,0.42) inset;

        > img{     /* logo centrado */
            height: 111px;
            border-radius: 100rem;
            box-shadow: var(--shadow-box);

            margin-left: 111px;
        }

    }

    > :nth-child(odd){
        border-radius: 0 166px 166px 0;

        justify-content: flex-end;

        box-shadow: -10px 10px 32px 0px rgba(0,0,0,0.42) inset;

        > img{     /* logo centrado */
            height: 111px;
            border-radius: 100rem;
            box-shadow: var(--shadow-box);

            margin-right: 111px;
            
        }
    }

    > :first-child{     /* titulo de seccion / top banner */
        width: var(--width-full);

        justify-content: flex-start;

        border-radius: 0;

        > :first-child{     /* text container */
            width: var(--width-bottom_links);
            margin-inline: auto;
            text-shadow: var(--f-shadow);
            padding-inline:2em ;
            color: rgb(var(--color-blanco));

           > h1{
                font-size: var(--fs-h1-main-wrapper);
            }

            > p{
                font-size: var(--fs-p-banner);
            }
        }
    }

}


/* main info ------------------------------------------------------------------------------- */
.info_wrapper{
    width: 100%;
    padding-bottom: 20em;

    background-position: center bottom;
    background-repeat: no-repeat;

    display: grid;
    gap: 2em;

    > :first-child{     /* titulo de seccion / top banner */
        width: 100%;
        height: 333px;

        background-position: center;
        background-repeat: no-repeat;

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

        > :first-child{
            width: var(--width-bottom_links);
            text-shadow: var(--f-shadow);
            padding-inline:2em ;
            color: rgb(var(--color-blanco));

           > h1{
                font-size: var(--fs-h1-main-wrapper);
            }

            > p{
                font-size: var(--fs-p-banner);
            }
        }
    }

    > :nth-child(2){    /* texto */
        width: var(--width-bottom_links);
        margin-inline: auto;
        padding: 3em 2em;

        display: grid;
        gap: 1.3em;

        > h2{
            font-size: var(--fs-h2-textos);
        }

        > p{
            font-size: var(--fs-p-textos);
        }
    }

    > :nth-child(3){      /* fast data */
        width: var(--width-bottom_links);
        padding-inline: 3em;
        margin-inline: auto;

        display: flex;
        gap: 1em;
        flex-wrap: wrap;


        > :nth-child(n){
            background-color: rgb(var(--color-negro));
            color: rgb(var(--color-blanco));
            border-radius: 10em;
            padding: .5em 1.5em;
            text-align: center;
            font-size: var(--fs-p-card);
        }

        > :nth-child(1){     /* logo redondo */
            background: transparent;
            width: 50px;
            padding: 0;
            border-radius: 50%;
        }
    }

    > :last-child{      /* caracteristicas */
        width: var(--width-bottom_links);
        margin-inline: auto;

        display: flex;
        gap: 1em;
        flex-wrap: wrap;

        > :nth-child(n){        /* cada card o grupo */
            border-radius: 1em;
            padding: 1em;

            flex: 1 1 300px;
            align-content: flex-start;

            display: flex;
            gap: .5em;
            flex-wrap: wrap;

            > :nth-child(n){        /* cada pill */
                background-color: rgba(var(--color-blanco), .4);
                color: rgb(var(--color-blanco));
                padding: .2em .8em;
                border-radius: 10em;
                font-size: var(--fs-p-caracteristicas);
            }

            > :first-child{     /* titulo */
                background-color: transparent;
                font-size: var(--fs-h3-caracteristicas);
                padding: 0;
                margin-bottom: .5em;
                flex: 1 1 100%;

            }
        }
    }

    .juegos_geniales{
        > :nth-child(n){
            background-color: rgb(var(--color-juegos_geniales));
        }
    }

    .juegos_guiados{
        > :nth-child(n){
            background-color: rgb(var(--color-juegos_guiados));
        }
    }

    .relajo_jugando{
        > :nth-child(n){
            background-color: rgb(var(--color-relajo_jugando));
        }
    }

    .aprendo_jugando{
        > :nth-child(n){
            background-color: rgb(var(--color-aprendo_jugando));
        }
    }

    .flashcards{
        > :nth-child(n){
            background-color: rgb(var(--color-flashcards));
        }
    }
}


/* volador info ------------------------------------------------------------------------------- */
.volador_wrapper{
    width: 100%;
    padding-bottom: 20em;

    background-position: center bottom;
    background-repeat: no-repeat;

    display: grid;
    gap: 2em;

    > :first-child{     /* titulo de seccion / top banner */
        width: 100%;
        height: 333px;

        background-position: center;
        background-repeat: no-repeat;

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

        > :first-child{
            width: var(--width-bottom_links);
            text-shadow: var(--f-shadow);
            padding-inline:2em ;
            color: rgb(var(--color-blanco));

           > h1{
                font-size: var(--fs-h1-main-wrapper);
            }

            > p{
                font-size: var(--fs-p-banner);
            }
        }
    }

    > :nth-child(2){    /* texto */
        width: var(--width-bottom_links);
        margin-inline: auto;
        padding: 3em 2em;

        display: grid;
        gap: 1.3em;

        > h2{
            font-size: var(--fs-h2-textos);
        }

        > p{
            font-size: var(--fs-p-textos);
        }
    }


    
}



/* faqs section ------------------------------------------------------------------------------- */
.faqs_wrapper{
    width: 100%;
    padding-bottom: 20em;

    background-position: center bottom;
    background-repeat: no-repeat;

    display: grid;
    gap: 2em;

    > :first-child{     /* titulo de seccion / top banner */
        width: 100%;
        height: 333px;

        background-position: center;
        background-repeat: no-repeat;

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

        > :first-child{
            width: var(--width-bottom_links);
            text-shadow: var(--f-shadow);
            padding-inline:2em ;
            color: rgb(var(--color-blanco));

           > h1{
                font-size: var(--fs-h1-main-wrapper);
            }

            > p{
                font-size: var(--fs-p-banner);
            }
        }
    }

    > :nth-child(2){    /* faqs content */
        width: var(--width-bottom_links);
        margin-inline: auto;
        padding: 3em 2em;

        > :nth-child(n){    /* ul */
            display: grid;
            gap: 1em;

            > :nth-child(n){    /* li */
                border-radius: 1em;
                padding:2em 3em;
                box-shadow: 0px 6px 10px -1px rgba(0,0,0,0.34),
                            0px -6px 10px -1px rgba(0,0,0,0.05);

                > label{        /* pregunta */
                    display: flex;
                    align-items: center;
                    font-size: var(--fs-h2-faqs);
                    cursor: pointer;

                    > :first-child::before{
                        content: '¿';
                    }

                    > :first-child::after{
                        content: '?';
                    }


                }

                > label::before{
                    content: '+';
                    margin-inline: .5em;
                    font-weight: bold;
                }

                > input{
                    display: none;
                }

                > :last-child{      /* respuesta */
                    padding:0 .5em;
                    max-height: 0;
                    overflow: hidden;
                    transition: max-height .2s, padding .2s;
                }

                > input:checked + label + .respuesta{
                    max-height: 500px;
                    padding: .75em;
                    padding-bottom: 1em;
                }

                > input:checked + label::before{
                    content: '-';
                }

            }
        }

        > p{
            font-size: var(--fs-p-textos);
        }
    }

}


/* reviews ------------------------------------------------------------------------------- */
.reviews_wrapper{       /* wrapper */
    width: var(--width-full);
    background-color: rgb(var(--color-blanco));
    padding-block: 2em;
    padding-bottom: 4em;

    > :first-child{     /* titulo seccion */
        width: var(--width-bottom_links);
        text-align: center;
        margin-bottom: 2.5em;
        margin-inline: auto;

    }

    > :last-child{      /* card contaainer */
        width: var(--width-bottom_links);
        margin-inline: auto;

        display: flex;
        flex-wrap: wrap;
        gap: 2em;

        > :nth-child(n){        /* card */
            background-color: rgb(var(--color-azul));
            color: rgb(var(--color-blanco));
            padding: 1.5em;
            border-radius: 2em 2em 0 2em;

            flex: 1 1 350px;

            > :first-child{     /* comentario */
                font-size: var(--fs-h3-caracteristicas);

                &::before{
                    content: '"';
                    font-weight: bold;
                    margin-inline: .5em;
                }

                &::after{
                    content: '"';
                    font-weight: bold;
                    margin-inline: .5em;
                }

            }

            > :last-child{      /* autor */
                font-size: var(--fs-p-caracteristicas);
                text-align: right;
                margin-top: .5em;
            }
        }
    }

}


/* bottom logo ------------------------------------------------------------------------------- */
.bottom-logo{
	width:min(300px,70%);
    margin:5rem auto ;
    margin-bottom: 6em;
}

/* bottom links ------------------------------------------------------------------------------- */
.bottom-links-wrapper{
    color: rgb(var(--color-blanco));
	width:var(--width-bottom_links);
    margin:2em auto ;
    text-align: left;
    font-family: var(--ff-base);
    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3em;

    > :nth-child(n){
        flex: 1 1 320px;
        box-shadow: var(--shadow-box);
        display: subgrid;
        border-radius: 1em;
        padding: 1rem 1.5rem;
    }

    h2{
        font-family: var(--ff-base);
        font-size: var(--fs-h2-bottom);
        margin-bottom: .5em;
    }

    p{
        margin-bottom: 1em;
        font-size: var(--fs-p-bottom);
        font-weight: 700;
    }

    a:link,
    a:active,
    a:visited{
        color: var(--color-negro);
        font-size: var(--fs-p-bottom);
        display: block;
        margin: .5em 1em;
        font-weight: 700;
    }

    a:before{
        content: '+ ';
        margin-left: -1em;
    }

    a:hover{
        color: var(--color-azul);
    }

    i{
        width: 1.5rem;
        text-align: center;
    }

}


/* footer ------------------------------------------------------------------------------------------- */
footer{
    margin-top: 6em;
    border-bottom:var(--border-footer);
    padding-bottom:var(--padding-index-tiulos);
    color: rgb(var(--color-blanco));

    p{
        width:var(--width-bottom_links);
        margin-inline:auto;
        font-size: var(--fs-p-footer);
        text-align: center;
        margin-bottom: 2em;
    }

    > :last-child{
        width:min(200px,70%);
        margin: 0 auto;
        display: grid;
        grid-template-columns:1fr 1fr 1fr;
        gap: 1em;
    }

    img{
        border-radius: 100rem;
        box-shadow: var(--shadow-box);
    }
}