/* ____________________________________________________________________________________________________________________|  FONTS
*/

* {
    border: 0 solid;
    outline: 1px solid transparent;
}

@font-face {
    font-family: 'BentonBook';
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/BentonSansBBVA-Book.otf") format("opentype");
}

@font-face {
    font-family: 'BentonMedium';
    font-style: normal;
    font-weight: bold;
    src: url("../fonts/BentonSansBBVA-Medium.otf") format("opentype");
}

@font-face {
    font-family: 'BentonBold';
    font-style: normal;
    font-weight: bold;
    src: url("../fonts/BentonSansBBVA-Bold.otf") format("opentype");
}


/* ____________________________________________________________________________________________________________________|  BASICS
*/


body, html{
    height: 100%;
    color: #fff;
    overflow-y: auto;
    overflow-x: hidden;
    font-family: 'BentonBook';
    outline: none;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;    
    width: 100%;
  }

b, strong {
    font-family: 'BentonBold';
    font-weight: bolder;
}

h1{ font-family: 'BentonBold';   }
h2{ font-family: 'BentonBold';   }
.bold{ font-family: 'BentonBold';   }
.w100{ width: 100%; }
.h100{ height: 100%; }
.block{ display: block; }
.w15em{ width: 15em; }


.minwidth10 {    min-width: 10vw; }
.minwidth15 {    min-width: 15vw; }
.minwidth20 {    min-width: 20vw; }
.minwidth25 {    min-width: 25vw; }
.minwidth30 {    min-width: 30vw; }
.minwidth35 {    min-width: 35vw; }
.minwidth40 {    min-width: 40vw; }
.minwidth45 {    min-width: 45vw; }
.minwidth50 {    min-width: 50vw; }
.minwidth55 {    min-width: 55vw; }
.minwidth60 {    min-width: 60vw; }
.minwidth65 {    min-width: 65vw; }

strong{
    font-family: 'BentonBold';   
}




/* ____________________________________________________________________________________________________________________|  COLORES
*/

.bglight{ background-color: #CAEEFD; }
.bgbluehome{ background-color: #49A5E6;}
.bgdarkblue{ background-color:  #043263;}
.bgblue{ background-color:  #004481;}
.bgbluenew { background-color:  #1464A5;}
.bgmidblue{ background-color:  #1973b8; }
.bgaqua{ background-color:  #028484;background-color:  #5BBEFF;}
.bgaqualight{ background-color:  #2dcccd; }
.bglightblue{ background-color:  #49a5e6;}
.bgmidaqua { background-color:  #008585; }
.blueblue{ background-color:  #5bbeff; }
.newbgaqua{ background-color: #02A5A5 ;}

.familiablue{ color: #4BCDCE; }
.aqua{ color: #2dcccd; }
.yellow{ color: #f8cd51;}
.blue{ color: #1973b8;}
.darkblue { color: #072146; }
.white{ color: #fff; }
.midblue{ color: #002e65; }
.newblue{color: #082E64;}


/* ____________________________________________________________________________________________________________________|  NOSELECT
*/


.noselect{
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}


/* ____________________________________________________________________________________________________________________|  EXTRAS
*/

.col{
    padding-right: 0px;
    padding-left: 0px;
}

.col img{
    border-radius: 1em;
}

.oksign{
    width: 6vw;
}

.p-4{
    font-size: 1.2em;
}

.pp4{
    font-size: 1.2em;
}

.tab-title{
    font-size: 1.4em;
}


.row{
    margin-right: 0px;
    margin-left: 0px;
}

.congratsbar {
    min-width: 70vw;
    width: 100%;
}

.clickable, .clickable_nosound{
    cursor: pointer;
}


.showgrid{
    background-color: rgba(0, 255, 255, 0.137);       
    border:1px solid; 
}

.container{
    max-width: 1400px;
    opacity: 1;
}

.container {        
    display: grid;
    grid-template-rows: 1fr;
    place-items: center;    
    min-height: 900px;
}

.container-fluid{
    border: 0;
    /*
    position: absolute;
    top: 0px;    
    */
}


.home{
    display: grid;
    grid-template-columns: 1fr 2fr;    
}

.rel{
    position: relative;
}

.abs{
    position: absolute;
}

.home_e1{
    position: relative;
    z-index: 2;
}





/* ____________________________________________________________________________________________________________________|  FONDOS
*/


.fondo-root{
    background-image: url( ../assets/caratula/caratula-anim.svg);
    background-size: cover;
    background-position: top left;
}

.fondo-menu{
    background-image: url( ../assets/menu/fondo.svg);
    background-size: cover;
    background-position: top center;
}

.fondo-J-1A{
    background-image: url( ../assets/jimena/J-1A/fondo-anim.svg);    
    background-size: cover;    
    background-position: center;
}

.fondo-L-1A{
    background-image: url( ../assets/lulu/L-1A/fondo-anim.svg);    
    background-size: cover;    
    background-position: center;
}

.fondo-J-H1, .fondo-J-H2, .fondo-J-H3{
    background-image: url( ../assets/confetti.svg);    
    background-size: cover;
    background-position: top center;
}

.fondo-L-H1, .fondo-L-H2, .fondo-L-H3{
    background-image: url( ../assets/confetti.svg);    
    background-size: cover;
    background-position: top center;
}

/* ____________________________________________________________________________________________________________________|  BOTONES
*/

.flecha{
    display: grid;
    place-items: center;
    opacity: 0;
}

.boton-box-1{
    background-color: #C49735;
    color: #fff;
    font-weight: bold;
    padding: 1em 2em;
    box-shadow: 5px 5px 0px #9c6c01;
    transition: all 0.33s ease;
}

.boton-box-1:hover{
    box-shadow: 1px 1px 0px #9c6c01;
    transition: all 0.11s ease;
}

.btn{
    padding: 0.5em 2.5em;
    background: #2DCCCD;
    color: #fff;
    font-size: 1.5em;
    font-weight: bold;
}


.btn_plus{
    width: 3em;
}

.btn_plus:hover{
    background-color: #40f8f9;
    border-radius: 10em;
}

#btn_plus-a{
    position: absolute;
    width: 35em;
    bottom: -5em;
    left: -5em;
    z-index: 2;
}

#btn_plus-b{
    position: absolute;
    width: 35em;
    bottom: -5em;
    right: -6em;
    z-index: 2;
}


.boton{
    background: #2DCCCD;
    border: 0px solid;
    color: #fff;
    padding: 0.5em;
    font-weight: bold;
    font-size: 1.5em;
    font-family: 'BentonBold';
    outline: none;
    width: 11em;
    text-align: center;
    margin: auto;
    cursor: pointer;
    z-index: 2;
    position: relative;
}

.boton2{
    background-color:  #1973b8;
    border: 0px solid;
    color: #fff;
    padding: 0.5em;
    font-weight: bold;
    font-size: 1.2em;
    font-family: 'BentonBold';
    outline: none;
    width: 11em;
    text-align: center;
    margin: auto;
    cursor: pointer;
    z-index: 2;
    position: relative;
}

.boton3{
    background-color:  #2dcccd;
    border: 0px solid;
    color: #fff;
    padding: 0.5em;
    font-weight: bold;
    font-size: 1.2em;
    font-family: 'BentonBold';
    outline: none;
    width: 22em;
    text-align: center;
    margin: auto;
    cursor: pointer;
    z-index: 2;
    position: relative;
}

.boton:hover{
    background-color:  #49f0f1;
}

.boton2:hover{
    background-color:  #2f95e4;
}

.boton3:hover{
    background-color:  #60fcfc;
}


.opcion{
    font-family: 'BentonBold';
    background-color: #2DCCCD;
    color: #043263;        
    cursor: pointer;
    text-align: center;
}

.opciondos{
    font-family: 'BentonBold';
    background-color: #2DCCCD;
    color: #fff;
    cursor: pointer;
    text-align: center;
}

.opciontres{
    font-family: 'BentonBold';
    background-color: #043263;
    color: #fff;
    cursor: pointer;
    text-align: center;
}

.opcion:hover{
    background-color: #40f8f9;
}

.opciontres:hover{
    color: #072146;
    background-color: #40f8f9;
}



/* ____________________________________________________________________________________________________________________|  LOGO
*/
.logo{
    position: absolute;
    padding-top: 2em;
    padding-left: 4em;
    z-index: 2;
}

.logo img{
    width: 15em;
}


/* ____________________________________________________________________________________________________________________|  TAMAÑOS TEXTO
*/

.ts1_1{ font-size: 1.1em; }
.ts1_2{ font-size: 1.2em; }
.ts1_4{ font-size: 1.4em; }
.ts1_6{ font-size: 1.6em; }
.ts1_8{ font-size: 1.8em; }
.ts2{ font-size: 2em; }
.ts2_5{ font-size: 2.5em; }
.ts3{ font-size: 3em; }
.ts3_5{ font-size: 3.5em; }
.ts4{ font-size: 4em; }
.ts4_5{ font-size: 4.5em; }
.ts5{ font-size: 5em; }


.parraforespuesta{
    font-size: 1.2em;
}

/* ____________________________________________________________________________________________________________________|  FLEX
*/

.flexcenter{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}


/* ____________________________________________________________________________________________________________________|  GRID
*/

.gridcenter{
    display: grid;
    place-items: center;
}

.grid-row{
    display: grid;
    grid-template-rows: 1fr;
    font-size: 1.2em;
}

.grid2col{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    width: 100%;
}

.grid2coltabbed{
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    align-items: center;
    width: 100%;
    padding-top: 1em;
    box-sizing: border-box;
}


/* ____________________________________________________________________________________________________________________|  HIDE SHOW MOBILE
*/

.showmobile{ display: none; }
.hidemobile{ display: block; }



/* ____________________________________________________________________________________________________________________|  ROOT
*/

.root-pane{
    background: #055289e8;
    border-radius: 1em;
    padding: 3em 5em;
    text-align: center;
}

.root-e1{
    position: absolute;
    right: -12em;
    bottom: 0px;
    overflow: hidden;
}

.root-e1 img{    
    height: 42em;
}

#root{
    overflow: hidden;
    max-height: 100vh;
}

/* ____________________________________________________________________________________________________________________|  tabbed-PANE
*/


.tabbed {
    display: none;
    grid-template-rows: 1fr;
    place-items: center;
    height: 100%;
    min-height: 900px;
    /*overflow-x: hidden;*/
}

.tabbed-pane{        
    border-radius: 15px 0em 15px 15px;
    padding-top: 0em;
    padding-bottom: 0em;
    width: 80vw;    
    height: 100%;
    max-width: 1400px;
}

.tabbed-tab{
    font-family: 'BentonBold';
    position: absolute;    
    border-radius: 15px 15px 0em 0em;
    top: -3.3em;
    right: 0em;
    padding: 1em 4em 1em 4em;
    display: grid;
    grid-template-columns: 2fr 1fr;
    place-items: center;
}

.tabbed-tab .icon{
    position: absolute;
    display: block;
    width: 5em;
    right: 5px;
    top: 5px;
}

.tabbed-inner{
    display: grid;
    grid-template-columns: 1fr 10%;    
}

.tabbed-inner img{
    width: 100%;
}


.progreso{
    display: grid;
    grid-template-columns: 20% 10% 70%;
    color: #fff;        
    padding-top: 2em;
}

.medallas{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 15em;
    position: relative;
    top: 0.7em;
}

.medallas img{
    width: 4em;
}


/* ____________________________________________________________________________________________________________________|  FIN INDICADORES
*/

.grid_medallas{
    display: grid;
    grid-template-columns: auto auto auto;
    padding-left: 1em;
    gap: 1em;
}

.fin_indicador_texto{
    font-size: 1.5em;
    font-weight: bold;
    font-family: 'BentonBold';
}

.fin_indicador_numero{
    font-size: 3em;
    font-weight: bold;
    font-family: 'BentonBold';
}

.fin_medallas{    
    display: block;
}

.fin_title{
    font-size: 1.3em;
    display: block;
    padding-bottom: 1em;
    font-weight: bold;
    font-family: 'BentonBold';
}




/* ____________________________________________________________________________________________________________________|  PROGRESS BAR
*/


.barra{
    position: relative;
}

.barra img{
    position: relative;
    /*z-index: 1;*/
}

.barra-fill{
    width: 0%;
    background-color: #2DCCCD;
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
}

/* ____________________________________________________________________________________________________________________|  PANES              
*/


.panes{
    position: absolute;
    top: 0px;   
    width: 100%;
}


#blind{
    position: absolute;
    width: 0px;
    height: 0px;
}


/* ____________________________________________________________________________________________________________________|  COLOR MODIFIERS
*/


.bkyellowmod{
    background-color: #F8CD51;
}

.bkorangemod{
    background-color: #F9A162;
}

.btnorangemod{
    background-color: #D8732C;
    box-shadow: 5px 5px 0px #C65302;
}

.bkcyanmod{
    background-color: #2DCCCD;
}

.btncyanmod{
    background-color: #02A5A5;
    box-shadow: 5px 5px 0px #028484;
}

.bkbluemod{
    background-color: #5BBEFF;
}

.btnbluemod{
    background-color: #49A5E6;
    box-shadow: 5px 5px 0px #1464A5;
}

.bksilvermod{
    background-color: #D4EDFC;
}


.tabbedfixed {
    display: none;
    grid-template-rows: 1fr;
    justify-content: center;
    align-items: flex-start;
    padding-top: 7em;
    height: 100%;
}






/* ____________________________________________________________________________________________________________________|  MEDIAQUERIES              
*/

@media (min-aspect-ratio: 1280/700) {  
    .container {        
        min-height: unset;
    }
    .tabbed {
        display: none;
        grid-template-rows: 1fr;
        justify-content: center;
        align-items: flex-start;
        padding-top: 7em;
        height: 100%;
        min-height: 100%;
    }   
    #root{          
        font-size: 0.8em;
    }

    #menu > .container{
        max-width: 80vw;
    }
    #menu > .container > .row{
        width: 100%;
    }
    #menu > .container > .row > .opcion{
        font-size: 1em;
        width: 25em;
    }
    #menu h4{
        font-size: 1.3em;
    }
    #menu h1{
        font-size: 1.6em;
        padding-bottom: 1em !important;        
    }

    #J-1A h1, #L-1A h1{
        font-size: 1.4em;
        padding: 0 !important;        
        padding-top: 3em !important;
    }

    #J-1A .pp4, #L-1A .pp4{
        font-size: 0.8em;
        padding: 0rem !important;
        margin-top: 2em;
    }

    #J-1A .barra, #L-1A .barra{        
        background-color: #012b4e;
    }

    .medallas {
        top: 0em;
        width: 14em;
    }
    .medallas img {
        width: 2em;
    }
    .progreso {
        padding-top: 0.5em;
    }
    .opciondos {
        font-size: 1em;
    }

    .grid2coltabbed {  
        grid-template-columns: 1fr 2fr;
        /*max-height: 25em;*/
    }
    .boton-box-1 {
        padding: 0.5em 2em;
    }
    /*
    .specialk{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
    */

    #J-16A > .mt-5, #J-9A-R > .mt-5{
        margin-top: 0px;
    }

}

@media (min-width: 1200px){
    /*
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1400px;
    }
    */
}

@media (max-height: 770px) {    
    /*
    .tabbed {
        display: none;
        grid-template-rows: 1fr;
        justify-content: center;
        align-items: flex-start;
        padding-top: 7em;
        height: 100%;
    }
    */
}



@media (min-aspect-ratio: 200/80) {

    /*
    .tabbed {
        display: none;
        grid-template-rows: 1fr;
        justify-content: center;
        align-items: flex-start;
        padding-top: 7em;
        height: 100%;
    }   
    */
}


@media screen and (max-width: 1280px) {
    .ts4{
        font-size: 3em;
    }
    .p-4{
        font-size: 1em;
    }
    .tab-title{
        font-size: 1em;
    }
    .grid-row{
        font-size: 1em;
    }
}


@media screen and (max-width: 1024px) {
    .ts4{
        font-size: 2em;
    }
}

@media screen and (max-width: 750px) {

    .home{
        z-index: 2;
        position: relative;
    }

    .showmobile{ display: block; }
    .hidemobile{ display: none; }


    body,html{
        overflow-y: auto;
    }
    .logo{
        position: relative;         
        padding-left: 3em;     
    }
    .logo img {
        width: 14em;
    }
    .ts1_1 {
        font-size: 1em;
    }
    .ts2_5 {
        font-size: 1.5em;
    }
    .ts3_5 {
        font-size: 2em;
    }
    .h4, h4 {
        font-size: 1.2rem;
    }
    .container{
        padding-top: 4em;
        position: relative;
        padding-bottom: 3em;
    }    
    .panes{
        position: absolute;
        top: 0px;
        margin-bottom: -1px;
        margin-top: 10em;
    }
    .h100 {
        height: auto;
    }
    .row {        
        display: block;
    }
    .grid2col {
        display: grid;
        grid-template-columns: 1fr;
    }

    .grid2coltabbed{
        display: grid;
        grid-template-columns: 1fr;
    }
    .progreso {
        display: grid;
        grid-template-columns: 1fr;
    }        
    .tabbed-inner img {
        width: 50px;
    }   

    .tabbed-tab {
        top: -3.5em;
    }

    .tabbed-pane {
        border-radius: 0px 0em 15px 15px;
        width: 90vw;
        padding-inline: 1em;
    }
    .grid-row {
        display: grid;
        grid-template-rows: 1fr;
        place-items: center;        
    }
    .barra {
        position: relative;
        max-width: 100%;
        height: 5em;
        margin-top: 1em;
        overflow: hidden;
    }
    .barra img{
        max-width: 286px;
        height: 50px;
        object-fit: cover;
    }
    .barra-fill {
        height: 50px;
    }
    .congratsbar {
        width: auto;
    }
    .p-4 {
        padding: 2em 0em !important;
    }
    #btn_plus-a, #btn_plus-b {     
        width: 25em;
    }
    #btn_plus-b {     
        width: 25em;
        right: -4em;
    }



}