/***********/
/*VARIABLES*/
/***********/

:root{
	--blanco: #EDF2FB;
	--blanco-real: #FFFFFF;
	--blanco-real-0: rgba(255,255,255,0);
    --blanco-real-50: rgba(255,255,255,0.5);
	--celeste: #A9D8F7;
	--celeste-hover: #99BEFF;
	--azul-texto: #254A8A;
	--azul: #001747;
	--azul-90: rgba(00,17,47,0.9);
	--azul-80: rgba(00,17,47,0.8);
	--azul-70: rgba(00,17,47,0.7);
	--azul-60: rgba(00,17,47,0.6);
	--azul-50: rgba(00,17,47,0.5);
	--azul-40: rgba(00,17,47,0.4);
	--azul-30: rgba(00,17,47,0.3);
	--azul-20: rgba(00,17,47,0.2);
	--azul-10: rgba(00,17,47,0.1);
	--azul-hover: #000B24;
	--azul-cobalto: #0043CC;
	--azul-oscuro: #001136;
	--sandia: #FF555E;
	--sandia-hover: #C24148;
	--sandia-active: #5C1F22;
	--gris: #737B8D;
	--gris2: #6D7587;
	--gris-reproductor: #A3A9B4;
	--gris-oscuro: #060A14;
	--disabled: #3D4961;
	--sociales: #7398E3;
	--celeste_leer: #BCD5FF;
	--verde_txt_leer: #135727;
}

/*************/
/* GENERALES */
/*************/

html, body{
    min-height: 100vh;

}
body, h1,h2,h3,h4,h5,h6,p, ul, li, a{margin: 0;padding: 0;font-family: 'Barlow', sans-serif;}

.hide{display: none !important;}
.hide-desktop{display: none;}

a{
    text-decoration: none;
}
button{
	border: 0;
}
.btn_principal{
	display: flex;
	gap:1em;
	width: auto;
	height: auto;
	cursor: pointer;
	align-items: center;
	flex-direction: row;
	margin: 0.5rem 0.3rem;
	padding: 1.3em 1.7em;
	font-size: 1.2em;
	border-radius: 2em;
	justify-content: center;
	box-sizing: border-box;
	transition: all 100ms linear;
	color: var(--blanco);
}
.btn_principal p{
    align-self: center;
    font-size: 1.2em;
    letter-spacing: 0;
	margin-top: -0.2em;
}

.btn_principal:active{
 
}

.btn_principal.disabled {
  background-color: #DBDBDB;
  box-shadow:  0px 0px 0px 0 rgba(0,0,0,0);
}
.btn_principal.disabled p{
    color: #1A2640;
    opacity: 0.4;
    -webkit-opacity: 0.4;
}
button.blanco, a.blanco, div.blanco {
    color: var(--azul-cobalto); 
    background-color: var(--blanco-real); 
    transition: background-color 0.3s, color 0.3s; 
}
.btn_principal.sandia{background-color:var(--sandia);}
.btn_principal.azul{background-color:var(--azul);}
.btn_principal.azul path{fill:var(--blanco);}
.btn_principal.azul p{
    color: rgba(255,255,255,0.9);
}
.btn_principal.sandia:active{
   
}

.btn_principal.azul:active{
   
}

.btn_principal.azul.disabled {
  background: #9B9B9B;
  box-shadow:  0px 0px 0px 0 rgba(0,0,0,0);
    border: 1px solid #8B8B8B;
}
.btn_principal.azul.disabled p{
    color: rgba(255,255,255,0.9);
}

.btn_circular{

	border-radius: 38px;
    height: 56px;
    width: 56px;
    transition: background-color 0.1s linear;
    -webkit-transition: background-color 0.1s linear;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.btn_circular .ico{
    margin-top: 5px;
}

.btn_circular.btn_transparente{
    background-color: transparent;
}
.btn_circular.btn_transparente rect,
.btn_circular.btn_transparente stroke,
.btn_circular.btn_transparente polygon,
.btn_circular.btn_transparente path{
    fill:var(--blanco);
}

.btn_azul{
    background-color: var(--azul);
}
.btn_azul rect,
.btn_azul stroke,
.btn_azul polygon,
.btn_azul path{
    fill:var(--blanco);
}

.btn_sandia{
    background-color: var(--sandia);
}
.btn_sandia rect,
.btn_sandia stroke,
.btn_sandia polygon,
.btn_sandia path{
    fill:var(--blanco);
}


.btn_cerrar{
	position: fixed;
	right: 1em;
	top: 1em;
	z-index: 5;
}
#btn_cerrar.kids:after{
	content: url('/img/commons/Logo-Kids.png');
	display: block;
	position: absolute;
	margin-top: 90px;
}

.btn_blanco{
	background-color: var(--blanco-real);
}
.btn_blanco rect,
.btn_blanco stroke,
.btn_blanco polygon,
.btn_blanco path{
    fill:var(--azul-cobalto);
}


/**SELECTORES RADIO**/

label.radio{
	width: auto;
	height: auto;
	cursor: pointer;
	align-items: center;
	background-color: transparent;
	border-radius: 100px;
	border: 2px solid var(--sociales);
	color: var(--blanco);
	transition: all 100ms linear;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	margin: 0.2rem 0.3rem; 
    padding: 1.1em 1.1em;
	flex-grow: 1;
    font-size: 1.1em; 
}


label.radio input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: none;
	cursor: pointer;
}



label.radio:has( input:checked ) {
	background-color: var(--celeste);
	color: var(--azul-texto);
	border-color: var(--celeste);
}

label.radio img{
	width: 1.3rem;
	display: inline-block;
}

label.radio:has( img ){
	display: flex;
}
label.radio:has( img ) p{
	float: right;
	padding-left: 0.7rem;
}

label.radio[disabled]{
	border-color: var(--disabled);
	color: var(--disabled);
    display: none;
}

/*---------------------------------------------------*/


.btn_interact{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    cursor: pointer;
    user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
    -webkit-touch-callout:none; /* Safari Mobile */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
   z-index: 99999 !important;
}
.btn_interact .interior{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0);
    transition: all .4s;
    -webkit-transition: all .4s;
    user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
    -webkit-touch-callout:none; /* Safari Mobile */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
}
.btn_interact .interior> *{
    border-radius: 50%;
    box-sizing: border-box;
    transition: all .4s;
    -webkit-transition: all .4s;
    user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
    -webkit-touch-callout:none; /* Safari Mobile */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
}

.btn_interact .interior span{
    font-size: 12px;
    position: absolute;
     transition: all .4s;
    -webkit-transition: all .4s;
}

.btn_interact .interior span::before,
.btn_interact .interior span::after,
.btn_interact .interior::before,
.btn_interact .interior::after{
    position:absolute;
    content:"";
    border-radius: 50%;
    box-sizing: border-box;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    box-shadow: 0px 0px 5px 0px #00093B;
     transition: all .4s;
    -webkit-transition: all .4s;
}

.btn_interact .interior::before{
    width: 100px;
    height: 100px;
    border: 4px solid rgba(255,255,255,0.2);
    animation: btnSig_A 1s infinite linear;
}
.btn_interact .interior::after{
    width: 79px;
    height: 79px;
    border: 4px solid rgba(255,255,255,0.4);
    animation: btnSig_B 1s infinite linear;
}
.btn_interact .interior span::before{
    width: 58px;
    height: 58px;
    border: 4px solid rgba(255,255,255,0.6);
    animation: btnSig_C 1s infinite linear;
    z-index: -1;
}
.btn_interact .interior span::after{
    width: 37px;
    height: 37px;
    border: 4px solid rgba(255,255,255,0.8);
    animation: btnSig_D 1s infinite linear;
    z-index: -1;
}
.btn_interact .interior span{
    width: 15px;
    height: 15px;
    background-color: #fff;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    text-align: center;
    font-size: 1px;
    color:#fff;
    z-index: 999;
    padding-top: 7px;
    box-sizing: border-box;
}

@keyframes btnSig_A {
  0%    {border: 4px solid rgba(255,255,255,0.2);box-shadow: 0px 0px 5px 0px rgba(0, 9, 59,0.2);width:79px;height:79px;}
  100%  {border: 4px solid rgba(255,255,255,0);box-shadow: 0px 0px 0px 0px rgba(0, 9, 59,0);width:100px;height:100px;}
}
@keyframes btnSig_B {
  0%    {border: 4px solid rgba(255,255,255,0.4);box-shadow: 0px 0px 5px 0px rgba(0, 9, 59,0.4);width:58px;height:58px;}
  100%  {border: 4px solid rgba(255,255,255,0.2);box-shadow: 0px 0px 0px 0px rgba(0, 9, 59,0);width:79px;height:79px;}
}
@keyframes btnSig_C {
    0%    {border: 4px solid rgba(255,255,255,0.6);box-shadow: 0px 0px 5px 0px rgba(0, 9, 59,0.6);width:37px;height:37px;}
  100%  {border: 4px solid rgba(255,255,255,0.4);box-shadow: 0px 0px 0px 0px rgba(0, 9, 59,0);width:58px;height:58px;}
}
@keyframes btnSig_D {
  0%    {border: 4px solid rgba(255,255,255,0.8);box-shadow: 0px 0px 5px 0px rgba(0, 9, 59,0.8);width:15px;height:15px;}
  100%  {border: 4px solid rgba(255,255,255,0.6);box-shadow: 0px 0px 0px 0px rgba(0, 9, 59,0);width:37px;height:37px;}
}
@keyframes btnSig_E {
  0%    {border: 4px solid rgba(255,255,255,0.8);box-shadow: 0px 0px 5px 0px #00093B;}
  100%  {border: 4px solid rgba(255,255,255,0);box-shadow: 0px 0px 0px 0px #00093B;}
}


.btn_adelante{
    width: 82px;
    height: 82px;
    position: absolute;
    top: calc(50% - 41px);
    right: 3%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
#btn_adelante{
    display: none;
}
.btn_adelante .interior{
    width: 130px;
    height: 50px;
    border-radius: 25px;
    background-color: rgba(237,242,250,1);
    box-shadow: inset 4px 4px 20px 0 rgba(255,255,255,0.5);
    margin-top:16px;
    transition: all .4s;
    -webkit-transition: all .4s;
    position: absolute;
    top: 0;
    display: flex;
    justify-content: flex-start;
    align-content: space-around;
}
.btn_adelante .interior> *{
    transition: all .4s;
    -webkit-transition: all .4s;
}

.btn_adelante .interior span{
    font-size: 1em;
    padding-top: 1em;
    padding-left: 1em;
    padding-right: 0.8em;
    color: var(--azul);
     transition: all .4s;
    -webkit-transition: all .4s;
	text-align: center;

}

.btn_adelante .interior .ico{
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background-color: var(--blanco);
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn_adelante .interior::before,
.btn_adelante .interior::after{
    position:absolute;
    content:"";
    box-sizing: border-box;
    transition: all .4s;
    -webkit-transition: all .4s;
    top: 0;
    position: absolute;
}

.btn_adelante .interior::before{
    width: 180px;
    height: 82px;
    border: 8px solid rgba(255,255,255,0.4);
    animation: btnSig_REAL_A 1s infinite linear;
     z-index: -1;
    margin-top: -16px;
    margin-left: -16px;
    border-radius: 41px;
}
.btn_adelante .interior::after{
    width: 164px;
    height: 66px;
    border: 8px solid rgba(255,255,255,0.6);
    animation: btnSig_REAL_B 1s infinite linear;
    z-index: -1;
    margin-top: -8px;
    margin-left: -8px;
    border-radius: 33px;
}


.btn_adelante .interior .ico ellipse.nofill,
.btn_adelante .interior .ico path.nofill{
    fill:none;
    stroke:var(--azul);
	stroke-width:1px;
}

@keyframes btnSig_REAL_A {
  0%    {
        width: 130px;
        height: 50px;
        margin-top:0;
        margin-left: 0;
        border-color: rgba(255,255,255,0.8);
        border-radius: 25px;
    }
  100%  {
        width: 162px;
        height: 82px;
        margin-top:-16px;
        margin-left: -16px;
        border-color: rgba(255,255,255,0);
        border-radius: 41px;
    }
}
@keyframes btnSig_REAL_B {
  
  0%  {
        width: 146px;
        height: 66px;
        margin-top:-8px;
        margin-left: -8px;
        border-color: rgba(255,255,255,0.4);
        border-radius: 33px;
    }
    
    50%    {
        width: 162px;
        height: 82px;
        margin-top:-16px;
        margin-left: -16px;
        border-color: rgba(255,255,255,0);
        border-radius: 41px;
    }
    51%    {
        width: 130px;
        height: 50px;
        margin-top:0;
        margin-left: 0;
        border-color: rgba(255,255,255,0.8);
        border-radius: 25px;
    }
    100%  {
         width: 146px;
        height: 66px;
      
        margin-top:-8px;
        margin-left: -8px;
        border-color: rgba(255,255,255,0.4);
        border-radius: 33px;
    }
}
/* BOTON ADELANTE MIN */
.btn_adelante{
	transition: all 1.5s;
    -webkit-transition: all 1.5s;
}
.btn_adelante.min{
	right: 1%;
}
.btn_adelante.min .interior{
	width: 50px;
}
.btn_adelante.min .interior span{
	display: none;
}
.btn_adelante.min .interior::before{
    animation: btnSig_REAL_A_min 1s infinite linear;
}
.btn_adelante.min .interior::after{
    animation: btnSig_REAL_B_min 1s infinite linear;
}

@keyframes btnSig_REAL_A_min {
  	0% {
        width: 50px;
        height: 50px;
        margin-top:0;
        margin-left: 0;
        border-color: rgba(255,255,255,0.8);
        border-radius: 25px;
    }
  	100%{
        width: 82px;
        height: 82px;
        margin-top:-16px;
        margin-left: -16px;
        border-color: rgba(255,255,255,0);
        border-radius: 41px;
    }
}
@keyframes btnSig_REAL_B_min {
  	0% {
        width: 66px;
        height: 66px;
        margin-top:-8px;
        margin-left: -8px;
        border-color: rgba(255,255,255,0.4);
        border-radius: 33px;
    }
    50% {
        width: 82px;
        height: 82px;
        margin-top:-16px;
        margin-left: -16px;
        border-color: rgba(255,255,255,0);
        border-radius: 41px;
    }
    51% {
        width: 50px;
        height: 50px;
        margin-top:0;
        margin-left: 0;
        border-color: rgba(255,255,255,0.8);
        border-radius: 25px;
    }
    100%{
        width: 66px;
        height: 66px;
      
        margin-top:-8px;
        margin-left: -8px;
        border-color: rgba(255,255,255,0.4);
        border-radius: 33px;
    }
}
/* FIN BOTON ADELANTE MIN */
/*PRELOAD*/
#preload_tutorial_modal{
    top: 0;
    left: 0;
    width: 100vw;
    min-height: 100vh;
    z-index: 999;
    background-color: var(--celeste);
    background-image: url(/img/commons/textura_bg.jpg);
    background-size: 183px auto;
    display: none;
    justify-content: center;
    align-items: center;
}

.title{
    height: 68px;
    border-radius: 40px;
/*    box-shadow: inset -4px -4px 20px 0 rgba(255,255,255,0.84), -20px -20px 30px 0 rgba(255,255,255,0.9), 20px 20px 50px 0 rgba(55,84,160,0.15);*/
    right: 0px;
    bottom: 30px;
    position: fixed;
    display: grid;
    grid-template-columns: auto 52px;
    grid-template-rows: 50% 50%;
    column-gap: 16px;
    box-sizing: border-box;
    padding-top: 8px;
    padding-left: 8px;
    padding-right: 32px;
}

.title .img_cont{
    min-width: 52px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    margin-left: 3px;
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;
    justify-self: end;
    background-color: var(--sandia);
}
.title .img_cont img{
    width: 100%;
	align-self: flex-end;
}
.title .indicador_porcentaje{
    right: 0%;
}
.title .indicador_porcentaje p{
    padding: 0;
	color: var(--blanco);
	font-size: 1em;
	text-align: right;
}


.title h2{
    color: var(--azul);
    font-size: 15px;
    letter-spacing: 0;
    line-height: 20px;
	text-align: right;
	right: 0%;
}


#modal_real {
    height: 501px;
    width: 600px;
    border-radius: 20px;
    background-color: rgba(237,242,250,0);

    padding-left: 40px;
    padding-right: 40px;
    padding-top: 40px;
    box-sizing: border-box;
}
#modal_real #tutorial{
    display: grid;
    grid-template-columns: 60px minmax(0, auto) 60px;
    grid-template-rows: 215px 60px 60px 20px auto;
}
#modal_real #tutorial .mask{
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 5;
    display: block;
    max-width: 100%;
    overflow: hidden;
}
#modal_real #tutorial .mask .wrapper{
    position: relative;
}

.tut{
    min-height: 0;
    min-width: 0;
    box-sizing: border-box;
    position: absolute;
    width: 400px;
	height: 200px; 
/*	background-color: yellow;*/
}
.tut .icono{
	width: 100%;
	height: 95%;
	background-image: url('/img/commons/button_holder.svg');
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	display: flex;
	align-items: center;
}
.tut .icono .icon{
    width: 150px;
    height: 150px;
	border-radius: 75px;
	background-image: url('/img/commons/bg_buttons.jpg');
    background-position: center;
    background-repeat: no-repeat;
	align-self: center;
	margin: -4px auto 10px;
}

.tut .icono .icon:after{
	width: 150px;
	height: 150px;
	border-radius: 75px;
	content: "";
	position: absolute;
	background-color: var(--azul-20);
}
.tut.wide .icono{
	background-image: url('/img/commons/button_holder_wide.svg');
}
.tut.wide .icono .icon{
    width: 260px;
    height: 140px;
	border-radius: 70px;
	background-size: cover;
}
.tut.wide .icono .icon:after{
	width: 260px;
	height: 140px;
	border-radius: 70px;
}

.tut.wide.rectangular .icono{
	height: 159px;
	background-image: url('/img/commons/button_holder_wide2.svg');
}
.tut.wide.rectangular .icono .icon,
.tut.wide.rectangular .icono .icon:after{
	width: 252px;
	height: 126px;
	border-radius: 16px;
}

.tut h2{
    color: var(--azul);
    font-size: 20px;
    line-height: 20px;
    text-align: center;
    width: auto;
	align-self: center;
	margin-top: 200px;
}
.tut p{
    color: var(--azul);
    font-size: 15px;
    line-height: 20px;
    text-align: center;
    padding-top: 20px;
    padding-left: 2em;
    padding-right: 2em;
    box-sizing: border-box;
}

#tut01 .icono .btn_interact{
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    display: block!important;
}

#tut02{  margin-left: 800px;}
#tut03{  margin-left: 800px;}

#tut03 .icono .icon{
	background-image: url('/img/commons/bg_buttons3.jpg');
}

#tut02 .icono .btn_adelante{
    top: 52px;
    left: 50%;
    right: 0;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}
#tut03 .icono .btn_abrir_player{
	position: absolute;
    top: 40px;
    left: 50%;
    right: 0;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

#punto_tuto_container{
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 4;
    grid-row-end: 4;
    display: flex;
    justify-content: center;
    --max-width: 64px;
}


#punto_tuto_container:before{
	width: var(--max-width);
	content: '';
	position: absolute;
	height: 20px;
	z-index: 2;
	pointer-events: none;
	border-bottom: 1px solid var(--sandia);
	box-sizing: border-box;
}


.btn_flecha_tutorial.izq{
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 2;
    grid-row-end: 3;
    align-self: center;
}
.btn_flecha_tutorial.der{
    grid-column-start: 3;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    align-self: center;
}

#cargador{
    text-align: center;
	position: fixed;
	bottom: 0;
}

#barra_preload{
  height: 18px;
  width: 100vw;
}
#barra_preload .barra{
    top: 2px;
    margin-top: 1px;
    height: 16px;
    width: 0%;
    min-width: 16px;
	bottom: 0;
	background-color: var(--blanco);
}

#btn_init{
    left: 50%;
    position: relative;
    transform: translateX(-50%);
    display: none;
    margin-top: 30px;
	margin-left: 0;
}

#btn_volver_tutorial{
	position: fixed;
	top: 1em;
	left: 1em;
}

/*********/
/*PORTADA*/
/*********/
#portada_cuento > div{
	box-sizing: border-box;
}

.creditos{
    width: 100%;
    padding-top: 16px;
    padding-left: 2.5%;
    padding-right: 2.5%;
    box-sizing: border-box;
    z-index: 9;
}
#portada_cuento.creditos{
	display: flex;
}

.creditos .logo_vivaleer,
.creditos .empty{
    grid-column-start: 1;
    grid-column-end: 2;
    height: 100%;
}
.creditos .logo_vivaleer img{
    width: auto;
    height: 100%;
}
.imagen_portada{
    background-color: rgba(0,0,0,0.1);
	width: 100vw;
    height: 100vh;
	top: 0;
	left: 0;
	position: fixed;
	background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
}
.creditos .imagen_portada{
	z-index: -1;
}

.filtro_portada{
	position: fixed;
	width: 100vw;
	height: 100%;
	left: 0;
	top: 0;
/*	background-image: radial-gradient(41.88% 57.99% at 68.76% 8.94%, rgba(0, 0, 24, 0.1) 0%, rgba(0, 0, 24, 0.28) 28.65%, #000F2F 100%);*/
	background-image: radial-gradient(62% 68% at 68.76% 8.94%, rgba(0, 0, 24, 0.3) 0%, rgba(0, 0, 24, 0.5) 28.65%, #000F2F 100%);
	content: '';
	opacity: 0.9;
}
.filtro_portada.transparencia.bg{
	background-image: radial-gradient(62% 68% at 50% 20%, rgba(0, 0, 18, 0.3) 0%, rgba(0, 0, 24, 0.5) 28.65%, #000018 100%);
}
.creditos .filtro_portada{
	z-index: -1;
	opacity: 1;
}

#portada_cuento.kids .filtro_portada{
	background-image: radial-gradient(150% 70% at 68.76% 8.94%, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 28.65%, #000000 100%);
}


.creditos .creditos_portada{
	position: relative;
	width: 40%;
	float: left;
	height: 90vh;
/*	overflow-y: scroll;*/
	overflow-x: hidden;
}
.creditos .creditos_portada .spacer{
	height: 30vh;
}
.creditos .creditos_portada.hide-desktop .spacer{
	height: 30vh;
}
.creditos .creditos_portada .premios{
	margin-bottom: 2em;
}
.creditos .creditos_portada .premios a{
	display: inline-block;
	width: 75px;
	margin-right: 2em;
}
.creditos .creditos_portada .premios a img{
	width: 100%;
}
.creditos .creditos_portada h1{
    color: var(--blanco);
    font-size: 2em;
    line-height: 38px;
    padding-top: 0.1em;
	padding-bottom: 1.1em;
}
.creditos .creditos_portada h2{
    color: var(--gris);
	font-size: 1em;
    padding-bottom: 0.1em;
}

.creditos .creditos_portada .descripcion{
    color: var(--blanco);
    font-size: 15px;
    letter-spacing: 0;
    line-height: 20px;
    padding-bottom: 30px;
}

.creditos .creditos_portada table {
    border-collapse: collapse;
    margin-bottom: 5%;
    width: 100%;
/*	display: flex;*/
}
.creditos .creditos_portada table a {
    color: var(--sociales); 
}
.creditos .creditos_portada table a:hover {
    text-decoration: underline; 
}
.creditos .creditos_portada table tr{}
.creditos .creditos_portada table tr td{
	color: var(--gris);
    font-size: 15px;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    width: 30%;
	vertical-align: text-top;
}
.creditos .creditos_portada table tr td:last-child{
	color: var(--blanco);
    width: 70%;
}

.creditos .creditos_portada table td:last-child{
	color: var(--sociales);
}
.creditos .creditos_portada table tr:last-child td:last-child a{
	color: var(--celeste);
}

.creditos .creditos_portada .preconfig{
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    grid-gap: 4%;
    justify-content: flex-start;
}
.creditos .creditos_portada .preconfig .preconfig_text{
    grid-column-start: 1;
    grid-column-end: 3;
    padding-bottom: 18px;
    color: #1A2640;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 11px;
    text-transform: uppercase;
}

.creditos .creditos_portada .links_externos,
.barra_share{
    display: flex;
    justify-content: flex-start;
	flex-flow: row wrap;
    align-items: center;
    margin-bottom: 2em;
	color: var(--gris);
}
.creditos .creditos_portada .links_externos{
	margin-bottom: 1em;
}
.barra_share{
    height: 45px;
    gap: 0 1em;
}

.creditos .creditos_portada .links_externos > p,
.barra_share > p{
	flex: 1 100%;
	padding-bottom: 1em;
}
.creditos .creditos_portada .links_externos a{
	margin-bottom: 1em;
}
.barra_share *{
}
#modal_compartir{
    /*	display: none;*/
        width: 100%;
        position: fixed;
        z-index: 9999;
    }
    #modal_compartir .barra_share{
        justify-self: center;
        justify-content:center;
        position: fixed;
        top: calc(50% - 45px);
        left: calc(50% - 166px);
    }
    #modal_compartir .barra_share p{
        text-align: center;
    }
.config{
	display: grid;
	float: left;
	width: 60%;
	padding-left: 2%;
	align-content: end;
	grid-template-columns: 1fr 2fr;
}
.config.one-languaje{
	grid-template-columns: 1fr 3fr;
}

.creditos .creditos_portada.hide-mobile{
	width: 35%;
}
.config.hide-mobile{
	width: 65%;
}

.creditos .creditos_portada.hide-mobile::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.creditos .creditos_portada.hide-mobile {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.seleccionar,
.botones_comenzar,
.ideas_despues_de_leer{
	display: flex;
    justify-content: flex-start;
	flex-flow: row wrap;
    align-items: center;
	padding-bottom: 1em;
	gap:0.5em;
}
.botones_comenzar,
.ideas_despues_de_leer{
	grid-column-start: 1;
	grid-column-end: 3;
}
.ideas_despues_de_leer{
	margin-top: 4.5em;
	gap: 1em;
}

.ideas_despues_de_leer{
	flex-flow: row;
}
.ideas_despues_de_leer > .btn_flecha_adelante{
    justify-content: start;
    align-items: center;
    display: flex;
    width: 100%;
    gap: 12px;
}
.ideas_despues_de_leer .ideas_despues_de_leer__info {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
.ideas_despues_de_leer .btn_circular{
	min-width: 56px;
}

.seleccionar{
	align-content: flex-start;
}
.seleccionar .preconfig_text {
	color: var(--blanco);
	flex: 1 100%;
	padding-bottom: 0.6em;
}

.ideas_despues_de_leer .encabezado{
	width: 75px;
	height: 110px;
	overflow: hidden;
	border-radius: 0 5px 5px ;
}
.ideas_despues_de_leer .encabezado p{
	background-color: var(--celeste_leer);
	color: var(--verde_txt_leer);
	padding: 1.2em 1em;
	font-size: 0.7em;
}
.ideas_despues_de_leer .encabezado img{
	width: 100%;
	height: auto;
}
.ideas_despues_de_leer .textos_comunicacion{
	flex-grow: 2;
}
.ideas_despues_de_leer .textos_comunicacion p{
	color: var(--gris2);
}
.ideas_despues_de_leer .textos_comunicacion h1{
	color: var(--blanco);
}

.creditos .btn_flecha,
.creditos .btn_favorito{
	margin-left: auto;
}

.btn_favorito.favorito { pointer-events: none; }

.btn_favorito .ico.lineal{ display: block;}
.btn_favorito .ico.pintada{display: none;}
.btn_favorito.favorito .ico.lineal{ display: none;}
.btn_favorito.favorito .ico.pintada{display: block;}


/*.btn_favorito .ico path{
    fill:var(--blanco);
}*/

.btn_favorito.favorito .ico.lineal{ display: none;}       
.btn_favorito.favorito .ico.pintada{display: block;}

#portada_cuento.creditos .creditos_portada .barra_share .btn_favorito .ico,
#final_cuento .creditos .creditos_portada .barra_share .btn_favorito .ico{
    margin-right: 0;
}

.btn_social{
    cursor: pointer;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
}

.btn_social path{
	fill: var(--sociales);
}

.barra_share .btn_social.link{ margin-right: 0; }

#modal_salida  {
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	width: 100%;
	position: fixed;
}
#modal_salida > *{z-index: 20;}
#modal_salida .wraper_modal{
	width: 45%;
	max-width: 600px;
/*	margin: 0 auto;*/
	display: flex;
  	justify-content: center;
	flex-flow: column;
  	align-items: center;
	min-height: 97vh;
	top: 0;
	position: fixed;
}
.transparencia.bg{
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: var(--azul-50);
	z-index: 0;
}
#modal_salida > p{
	color: var(--blanco);
	padding: 1em 0;
	font-size: 2em;
}
.miniatura_titulo{
	box-sizing: border-box;
	width: 50%;
	display: flex;
  	align-items: center;
	justify-content:space-between;
	background-color: var(--azul);
	margin: 0;
	border-radius: 1.5em;
	background-size: cover;
	height: 11em;
	overflow: hidden;
	background-position: center;
}

.miniatura_titulo .transparencia{
	width: 100%;
	background-color: var(--azul-50);
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content:space-between;
}
.miniatura_titulo h1{
	padding: 0em 45% 0em 1em;
	color: var(--blanco);
	font-size: 1.3em;
	z-index: 6;
}
#modal_salida .linea_botones{
	width: 100%;
	display: flex;
  	align-items: center;
	justify-content:space-between;
	padding: 0;
	margin: 0;
	gap:0.5em;
}
#modal_salida .linea_botones > * {
	flex-grow: 1;
}
#modal_salida .linea_botones .btn_principal{
	padding: 0.8em 1.3em;
	font-size: 1.2em;
	margin: 0;
}
#modal_salida .ideas_despues_de_leer{
	width: 100%;
}
.fade-in {
  animation: fadeIn 1s;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

#final_cuento{
    display: none;
    background-color: #E9EDF5;
    position: relative;
}

#final_cuento .creditos{
	z-index: 2;
    position: relative;
	display: grid;
	grid-template-columns: 1fr 2fr;
	column-gap: 1rem;
	margin-top: 15%;
	grid-auto-rows: auto; 
    row-gap: 1em;	
}
#final_cuento .creditos .miniatura_container{
    grid-row-start: 1;
    grid-row-end: 3;
}
#final_cuento .miniatura_container p{
	background: linear-gradient(to right, #3C3F51 0%, #DAE4EC 10%, #6A7080 50%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	padding-bottom: 1em;
}
#final_cuento .miniatura_titulo{
	display: block;
    width: 100%;
	height: calc(100% - 2em);
    min-height: 14em;
}

#final_cuento .miniatura_titulo .btn_favorito{
	position: relative;
	left: auto;
	right: 1em;
	top: -90%;
}

#final_cuento .miniatura_titulo .transparencia{
	height: 100%;
}
#final_cuento .miniatura_titulo .btn_favorito{
	
}

#final_cuento .ideas_despues_de_leer{
    grid-column-start: 2;
    grid-column-end: 2;
    justify-content: flex-end;
    flex-flow: row;
	margin-top: 0;
	align-items: center;
	width: 100%;
	grid-row-start: 2;
    grid-row-end: 2;
    align-self: start;
}
#final_cuento .ideas_despues_de_leer .textos_comunicacion{
    text-align: right;
	margin-top: 1em;
}
#final_cuento .ideas_despues_de_leer .textos_comunicacion p{
    color: var(--azul-cobalto);
}
#final_cuento .ideas_despues_de_leer .textos_comunicacion h1{
    font-size: 1em;
}

#btn_volver_leer{
	float: left;
}
#btn_volver_leer .ico{
    align-self: center;
}


.botones_final{
    align-self: center;
}

.botones_final .btn_principal{
    padding: 0.75em 1.7em;
}

.ranking,
.pre-ranking{
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
}
.ranking h2,
.pre-ranking h2{
	flex: 1 100%;
	color: var(--gris);
	font-size: 1.4em;
	padding-bottom: 0.3em;
}
.ranking h2{
	font-size: 1em;
}
.ranking label,
.pre-ranking label{
	flex: none;
	background-color: var(--azul-oscuro);
	border: 2px solid var(--azul-oscuro);
	box-sizing: border-box;
	width: 56px;
	height: 52px;
	padding: 0.6em 0.75em;
}
.ranking label.radio:has( input:checked ) ,
.pre-ranking label.radio:has( input:checked ) {
    background-color: var(--azul-oscuro);
    border-color: var(--celeste-hover);
}

.ranking label{
	background-color: var(--azul);
}

#modal_calificacion{
	z-index: 99999;
	position: fixed;
	display: grid;
	align-items: center;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow-y: auto; 
}

#modal_calificacion .btn_cerrar{
	position: absolute;
}
#calificacion{
	z-index: 99999;
	position: relative;
	display: flex;
	flex-flow: column;
	margin: 0 auto;
	background-color: var(--azul-oscuro);
	border-radius: 25px;
	padding: 1em;
	box-sizing: border-box;
}
#calificacion h1{
	color: var(--blanco);
	font-size: 1.4em;
}
#calificacion h2{
	color: var(--gris);
	font-size: 1em;
	padding-top: 1.3em;
	padding-bottom: 0.3em;
}
#calificacion textarea{
	color: var(--blanco);
	font-size: 1em;
	padding-top: 1.3em;
	padding-bottom: 0.3em;
	padding-left: 2em;
	padding-right: 2em;
	background-color: var(--azul);
	border: 0;
	resize: none;
	border-radius: 25px;
	margin-bottom: 1em;
}

.select_estrellas{}
.select_estrellas .estrellas_container{
	background-color: var(--azul);
	border-radius: 25px;
	padding: 1em 2em;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: space-evenly;
	box-sizing: border-box;
}
.select_estrellas .estrellas_container.required{
	border: 1px solid var(--sandia);
}

.select_estrellas .estrellas_container .estrella{
	background-image: url("/img/commons/estrellas.png");
	width: 14px;
	height: 14px;
	background-color: transparent;
	background-position: -24px 0;
	box-sizing: border-box;
}
.select_estrellas .estrellas_container .estrella.selected{
	background-position: 0 0;
}
.select_estrellas .estrellas_container .estrella.temp{
	border-radius: 50%;
	border: 1px solid var(--sociales);
	background-color: var(--blanco);
}
.select_estrellas .estrellas_container .estrella.temp.selected{
	border: 1px solid var(--sandia);
	background-color: var(--azul);
}
/**/

#cuento{
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    overflow: hidden;
    box-sizing: border-box;
    display: none;
    background-color: #000;
}
#gira_pantalla{
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255,255,255,1);
    top: 0;
    left: 0;
    z-index: 9999999;
    box-sizing: border-box;
    padding: 16px;
    text-align: center;
    background-image: url(/img/commons/textura_bg.jpg);
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    justify-content: center;
    grid-gap: 45px;
}
#gira_pantalla .ico{
    justify-self: center end;
    margin-top: auto;
}
#gira_pantalla p{
    border-radius: 20px;
    background-color: rgba(237,242,250,0);
   
    padding: 25px 40px;
    box-sizing: border-box;
    font-size: 15px;
    margin-bottom: auto;
    color: #1A2640;
}

/********/
/*player*/
/********/
#player_container{
    bottom: 0;
    position: fixed;
    height: 90px;
    width: 100%;
    background: rgba(0,0,0,0);
    z-index: 4;
    pointer-events: none;
	display: flex;
	justify-content: center;
	column-gap: 0.8vw;
	left: 50%;
    transform: translateX(-50%);
}
#player_container.closed{
	width: 72px;
    left: auto;
    right: 0;
}
#player_container .btn_volver{
	pointer-events: auto;
}

/*boton abrir reproductor*/
#btn_volver_cuento,
.btn_abrir_player{
    pointer-events: auto;
	width: 72px;
	height: 72px;
}

#player_container .btn_abrir_player .ico.abrir{display: none;}
#player_container.closed .btn_abrir_player .ico.abrir{display: block;}
#player_container.closed .btn_abrir_player .ico.cerrar{display: none;}
#player_container.closed #player{
	
	position: absolute;
	z-index: -1;
	overflow: hidden;
}
#player_container.closed #player,
#player_container.closed #btn_volver_cuento{
	width: 70px;
	height: 70px;
	margin-top: 1px;
}
#player_container.closed #player *{
	display: none;
}
#player_container.closed #btn_volver_cuento{
	position: absolute;
	z-index: -1;
}

.btn_abrir_player p{
    opacity: 0.7;
    -webkit-opacity: 0.7;
    color: rgba(255,255,255,0.9);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.92px;
    line-height: 12px;
    text-transform: uppercase;
    padding-top: 9px;
}

#player {
    pointer-events: auto;
    display: flex;
    justify-content: flex-start;
    box-sizing: border-box;
    align-items: center;
    height: 72px;
    max-width: 1280px;
    width: calc(100% - 30px);
    border-radius: 38px;
    background-color: var(--blanco-real);
}


.player_btn {
    margin-left: 1.5%;
    cursor: pointer;
    border-radius: 50%;
    height: 45px;
    width: 45px;
    background-color: var(--blanco-real);
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    display: flex;
    align-items: center;
    justify-content: center;
}

.player_btn .ico {
    margin-top: 3px;
}
.player_btn .ico path,
.player_btn .ico rect,
.player_btn .ico polygon{
    fill: var(--sandia);
}

#player_btn_play_pause{
	
	background-color: var(--sandia);
    min-width: 33px;
}

#player_btn_play_pause .ico path,
#player_btn_play_pause .ico rect,
#player_btn_play_pause .ico polygon{
    fill: var(--blanco-real);
}

#player_btn_play_pause .ico.play{
    margin-left: 2px;
    display: none;
}
#player_btn_play_pause .ico.pause{
}

#player_btn_escena_ant{
    margin-left: auto;
}
.btn_fullscreen .volver_full{
    display: none;
}
#player_btn_config{
    margin-right: 15px;
}

/*data visor*/
.player_escenas_launcher {
/*    margin-left: auto;*/
    margin-left: 2%;
    height: 45px;
    min-width: 120px;
    border-radius: 23px;
    background-color: #FFF;
    display: flex;
}

#title_container {
    height: 45px;
    width: auto;
    border-radius: 23px;
    background-color: var(--blanco-real);
    display: flex;
    justify-content: space-around;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
}

#title_container .flecha{
	order: 9;
	margin-top: 3px;
}
#title_container .flecha path{
	fill: var(--azul-cobalto);
}
#title_container p{
    padding-left: 8px;
    padding-right: 8px;
    font-size: 15px;
    color: var(--azul-cobalto);
}
#title_container span{
    color: var(--azul-cobalto);
}
#title_container p:last-child{
    padding-right: 48px;
}
#punto_escena_container{
    display: flex;
    padding-left: 20px;
    padding-right: 20px;
}
.punto{
    width: 13px;
    height: 100%;
    cursor: pointer;
    position: relative;
}
#tutorial .punto{
	background-color: var(--azul);
}
#tutorial .mini_barra{
	position: absolute;
	display: inline-block;
	background-color: tomato;
	width: 40px;
	height: 20px;
}
#punto_tuto_container div:first-child{
	width: 18px;
	border-radius: 15px 0 0 15px;
}
#punto_tuto_container div:first-child .centro{
	left: calc(50% - 1px);
}
#punto_tuto_container > div:last-child{
	width: 18px;
	border-radius: 0 15px 15px 0;
}
#punto_tuto_container > div:last-child .centro{
	left: calc(50% - 6px);
}

.punto .centro{
    height: 8px;
    width: 8px;
    position: absolute;
    background-color: var(--blanco);
    border-radius: 50%;
    position: relative;
    left:calc(50% - 4px);
    top:calc(50% - 4px);
    transition: all 0.1s linear;
    -webkit-transition: all 0.1s linear;
}

.punto.current .centro{
   background-color: var(--sandia);
}

#punto_escena_container .punto:not(.current) .centro{
	width: 4px;
	height: 4px;
	left:calc(50% - 2px);
    top:calc(50% - 2px);
	background-color: var(--disabled);
}
/*desplegable*/
#container_desplegable{
    position: absolute;
    width: 460px;
    height: 0;
    z-index: -1;
    top:-445px;
    margin-left: -80px;
    overflow: hidden;
	pointer-events: none;
}
#desplegable_escenas_container{
    box-sizing: border-box;
    height: 420px;
    width: 360px;
    border-radius: 24px;
    background-color: var(--blanco-real);
    border: 1px solid var(--blanco-real);
    position: absolute;
    z-index: -1;
    padding: 16px;
    padding-right: 0px;
    display: grid;
    grid-template-columns: 85% auto 16px;
    grid-template-rows: 17px 14px auto;
    transition: all 0.6s cubic-bezier(.09,.53,.5,.96); 
    -webkit-transition: all 0.6s cubic-bezier(.09,.53,.5,.96);
    left: 80px;
	pointer-events:auto;
	
}
#desplegable_escenas_container.open { top: 80px;}
#desplegable_escenas_container.close { top: 610px;}
#desplegable_escenas_container h2{
    color: var(--gris);
    font-size: 15px;
	padding-left: 1em;
}
#desplegable_escenas_container h3{
	display: none;
    color: var(--gris);
    font-size: 12px;
    line-height: 14px;
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 2;
    grid-row-end: 2;
}
#desplegable_escenas_container .btn_cerrar{
	position: relative;
    height: 30px;
    width: 30px;
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    justify-self: end;
    z-index: 2;
}
#desplegable_escenas_container .btn_ocultar{
	position: relative;
    height: 30px;
    width: 30px;
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    justify-self: end;
    z-index: 2;
	cursor: pointer;
}
#desplegable_escenas_container .btn_ocultar .ico.hide-mobile path{
	fill: var(--sandia);
}
#desplegable_escenas_container .btn_ocultar .ico rect{
	fill: var(--sandia);
}

#listado_escenas{
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 3;
    height: 370px;    
}
.simplebar-scrollbar{
    cursor: pointer;
    width: 2px!important;
    right: 3px!important;
    background-color: rgba(0,0,0,0.5)!important;
}
#listado_escenas:before{
    width: calc(100% - 16px);
    height: 15px;
    background: var(--blanco-real);
    background: -moz-linear-gradient(top,  var(--blanco-real) 0%, var(--blanco-real-0) 100%);
    background: -webkit-linear-gradient(top,  var(--blanco-real) 0%,var(--blanco-real-0) 100%);
    background: linear-gradient(to bottom,  var(--blanco-real) 0%,var(--blanco-real-0) 100%);
    content: "";
    display: block;
    position: absolute;
}
#listado_escenas:after{
    width: calc(100% - 16px);
    height: 15px;
    background: var(--blanco-real);
    background: -moz-linear-gradient(top,  var(--blanco-real-0) 0%, var(--blanco-real) 100%);
    background: -webkit-linear-gradient(top,  var(--blanco-real-0) 0%,var(--blanco-real) 100%);
    background: linear-gradient(to bottom,  var(--blanco-real-0) 0%,var(--blanco-real) 100%);
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
}
#listado_escenas .masked{
    padding-top: 15px;
    padding-bottom: 15px;
}
#listado_escenas .item_listado_escena {
    box-sizing: border-box;
    height: 60px;
    width: calc(100% - 16px);
    border-radius: 30px;
    background-color: #FFF;
    margin-bottom: 8px;
     transition: all 0.1s linear;
    -webkit-transition: all 0.1s linear;
    border: 1px solid #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
}

#listado_escenas .item_listado_escena .img_cont{
    min-width: 52px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    margin-left: 3px;
	display: none;
}
#listado_escenas .item_listado_escena .img_cont img{
    width: 100%;
}
#listado_escenas .item_listado_escena .ico{
    height: 20px;
    width: 20px;
    background-color: #EEEEEE;
    border-radius: 50%;
    display: none;
    margin-left: 8px;
    margin-right: 6px;
    background-repeat: no-repeat;
    background-position: 60% 50%;
}
#listado_escenas .item_listado_escena .play path{ fill: var(--azul-cobalto);}
#listado_escenas .item_listado_escena .pause path{ fill: var(--azul);}

#listado_escenas .item_listado_escena .n_escena{
	display: none;
}
#listado_escenas .item_listado_escena .titulo_escena{
    color: var(--azul-cobalto);
    margin-right: 8px;
    font-size: 15px;
    font-weight: lighter;
}
#listado_escenas .item_listado_escena.current .titulo_escena{
    color: var(--azul);
}

#listado_escenas .item_listado_escena .pause{ display: none;}
#listado_escenas .item_listado_escena .play{ display: block;}
#listado_escenas .item_listado_escena.current .play{ display: none;}
#listado_escenas .item_listado_escena.current .pause{ display: block;}

#marcador_escena{
    position: absolute;
    z-index: -1;
    top: 0;
    right: 2%;
    display: flex;
    align-items: center;
    pointer-events: auto;
	display: none;
}
#marcador_escena .btn_fullscreen{
    height: 40px;
    width: 40px;
    box-shadow: 0 0 0 0 #000, 0 0 0 0 #000;;
    border: 1px solid rgba(255,255,255,0.7);
    background-color: rgba(243,247,255,0.3);
}
#marcador_escena .btn_fullscreen .ico{
    margin-left: 1px;
}
#marcador_escena .btn_fullscreen .ico svg path{
    fill: #fff;
}
#marcador_escena .container_marcador{
    display: flex;
    width: 58px;
    height: 29px;
    border: 0.5px solid rgba(255,255,255,0.7);
    border-radius: 25px;
    background-color: rgba(243,247,255,0.3);
    align-items: center;
    justify-content: center;
    margin-right: 16px;
}

#marcador_escena .container_marcador .actual p {
    border-right: 1px solid rgba(255,255,255,0.7);
}

#marcador_escena .container_marcador p{
    padding-left: 3px;
    padding-right: 3px;
    color: #fff;
    font-size: 13px;
    line-height: 15px;
}

/*tootip*/
.tooltip{
    height: 26px;
    width: auto;
    border-radius: 16px;
    background-color: var(--gris-oscuro);
    color:#fff;
    text-align: center;
    padding-top: 4px;
    box-sizing: border-box;
    font-size: 13px;
    letter-spacing: 0.24px;
    line-height: 15px;
    z-index: 2;
    border: 1px solid var(--blanco-real);
    position: fixed;
    top: 0;
    left: 0;
    padding-left: 10px;
    padding-right: 10px;
}
.triangulito{
    margin-top: 0px;
}
.triangulito .st0{fill-rule:evenodd;clip-rule:evenodd;fill:var(--gris-oscuro);}
.triangulito .st1{fill:none;stroke:var(--blanco-real);stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}

#tooltip_alto{
    height: 40px;
    width: auto;
    align-items: center;
    justify-content: space-between;
    padding: 0;
}

#tooltip_alto .img_cont{
    margin-top: 3px;
    margin-left: 3px;
    border-radius: 15px;
    overflow: hidden;
    float: left;
	box-sizing: border-box;
}
#tooltip_alto img{
    height: 30px;
    width: 30px;
    background-color: red;
}
#tooltip_alto p{
    text-align: left;
    padding-left: 45px;
    padding-top: 11px;
    padding-bottom: 7px;
    padding-right: 10px;
}
#tooltip_bajo p{
    white-space: nowrap;
}
#tooltip_alto .triangulito{
    margin-left: 0px;
    left: calc(50% - 5px);
    position: absolute;
}
#container_configurador{
    position: absolute;
    width: 240px;
    z-index: -1;
    overflow: hidden;
    right: 0;
    transition: all 0.6s cubic-bezier(.09,.53,.5,.96); 
    -webkit-transition: all 0.6s cubic-bezier(.09,.53,.5,.96);
}
#container_configurador.open{height: 150px; top: -150px;}
#container_configurador.close{ height: 0; top:0;}

#configurador{
    box-sizing: border-box;
    height: 107px;
    width: 180px;
    border-radius: 14px;
    background-color: var(--blanco-real);
    border: 1px solid #FFF;
    display: grid;
    grid-template-columns: 50% auto;
    grid-template-rows: auto auto;
    padding: 16px;
    grid-row-gap: 18px;
    align-items: center;
    position: absolute;
    right: 16px;
    transition: all 0.6s cubic-bezier(.09,.53,.5,.96); 
    -webkit-transition: all 0.6s cubic-bezier(.09,.53,.5,.96);
}
#configurador.open{ top: 40px;}
#configurador.close{ top: 80px;}
    
#configurador p{
    color: var(--azul);
    font-size: 15px;
}

/************************/
/*CHECKBOKS CONFIGURADOR*/
/************************/

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
    justify-self:end;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--gris);
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: var(--blanco-real);
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {

	background-color: var(--sandia);
    -webkit-transition: all .4s;
  transition: all .4s;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(24px);
  -ms-transform: translateX(24px);
  transform: translateX(24px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/************/
/*SUBTITULOS*/
/************/
#subtitulos {
    bottom: 106px;
    position: fixed;
    width: 100%;
    z-index: 5;
}

#subtitulos p {
    padding-left: 10%;
    padding-right: 10%;
    font-size: 22px;
    line-height: 28px;
    text-align: center;
    color: var(--blanco);
    text-shadow: 1px 1px 2px var(--azul-hover), -1px -1px 2px var(--azul), 2px 2px 4px var(--azul-hover), -2px -2px 4px var(--azul), 0px 0px 6px var(--azul-hover);
    
}

/***********/
/*escenario*/
/***********/
/*comunes*/
#escenario{
/*    fullHD*/
    position: absolute;
    width: 1920px;
    height: 1080px;
    z-index: 0;
    box-sizing: border-box;
    overflow: hidden;
    display: none;
}
#escenario *{
    position: absolute;
}
#escenario .escena,
#escenario .interact{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#escenario .escena .fondo,
#escenario .escena .fondo2{
    width: 100%;
    height: 100%;
}

#escenario .escena .filtro_azul{
	width: 200%;
	height: 200%;
	top: -50%;
	left: -50%;
	pointer-events: none;
	background-color: var(--azul-60);
    z-index: 99999;
    display: none;
}

/*************/
/*Indicadores*/
/*************/
.drag_tolltip{
    display: none;
/*    display: grid !important;*/
    height: auto;
    width: 174px;
    border-radius: 14px 14px 0 0;
    background-color: #F7F9FC;
    box-sizing: border-box;
    grid-template-rows: 78px auto;
    grid-template-columns: 1fr;
    z-index: 99999;
    user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
    -webkit-touch-callout:none; /* Safari Mobile */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
}
.drag_tolltip .cabecera{
    overflow: hidden;
    width: 100%;
    height: 78px;
    border-radius: 14px 14px 0 0;
    grid-row-start: 1;
    grid-column-start: 1;
}
.drag_tolltip img{
	width: 100%;
}
.drag_tolltip p{
    padding-top: 8px;
    grid-row-start: 3;
    grid-column-start: 1;
    padding-left: 16px;
    padding-bottom: 16px;
    padding-right: 16px;
    background-color: var(--celeste);
    border-radius: 0 0 14px 14px;
    color: var(--azul);
    font-size: 1em;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 2em;
    text-transform: uppercase;
    user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
    -webkit-touch-callout:none; /* Safari Mobile */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
}

@keyframes giro {
  0%    {transform: rotate(0deg);-webkit-transform: rotate(0deg);}
  100%  {transform: rotate(360deg);-webkit-transform: rotate(360deg);}
}

.indicador_interactividad{
    border-radius: 50%;
    border: 3px dashed #F7F9FC;
    animation: giro 40s linear infinite;
    z-index: 1;
}


#subtitulos{
    pointer-events: none;
}
#marcador_escena .container_marcador{
    margin-right: 0px;
}
#marcador_escena .player_btn{
    margin-left: 16px;
    height: 40px;
    width: 40px;
    box-shadow: 0 0 0 0 #000, 0 0 0 0 #000;
    border: 1px solid rgba(255,255,255,0.7);
    background-color: rgba(243,247,255,0.3);
}

#marcador_escena .player_btn .ico svg path {
    fill: #fff;
}

#senas_container{
    position: absolute;
    box-sizing: border-box;
    right: 80px;
    bottom: 120px;
}
#senas_container .bg{
    padding: 20px;
    background-color: #EDF1FC;
    border-radius: 20px;
    border: 1px solid #fff;
}
#senas_container .bg .video_container{
    width: 446px;
    height: 560px;
    border-radius: 15px;
    overflow: hidden;
}
#senas_container .cerrar{
    position: absolute;
    top: 35px;
    right: 35px;
}
#senas_container .controllers_container{
/*    background-color: tomato;*/
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 56%;
    bottom: 30px;
    position: absolute;
    box-sizing: border-box;
    left: 50%;
    margin-left: -28%;
}

#senas_container .controllers_container .scale_controller,
#senas_container .controllers_container .alpha_controller{
    background-color: #EDF1FC;
    display: flex;
    padding: 5px;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    border-radius: 20px;
}
#senas_container .controllers_container .scale_controller .btn_scale{
    width: 30px;
    height: 30px;
    background-color: #fff;
    border-radius: 50%;
    cursor: pointer;
}
#senas_container .controllers_container .scale_controller .btn_scale.mas::after{
    content: '';
    background-color: #434343;
    width: 3px;
    height: 19px;
    position: absolute;
    top: 11px;
    margin-left: 13px;
}
#senas_container .controllers_container .scale_controller .btn_scale::before{
    content: '';
    background-color: #434343;
    width: 19px;
    height: 3px;
    position: absolute;
    top: 19px;
    margin-left: 5px;
}
#senas_container .controllers_container .scale_controller .porcentaje,
#senas_container .controllers_container .alpha_controller .porcentaje{
    color: #434343;
    text-align: center;
    min-width: 60px;
}
#senas_container .controllers_container .alpha_controller .contrast_ico{
    width: 30px;
    height: 30px;
    background-color: #4C6172;
    border-radius: 50%;
}
#senas_container .controllers_container .alpha_controller .flecha{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
#senas_container .controllers_container .alpha_controller .contrast_ico::before{
    content: '';
    background-color: #EDF1FC;
    width: 15px;
    height: 30px;
    position: absolute;
    border-radius: 30px 0 0 30px;
    border:2px solid #4C6172;
    box-sizing: border-box;
    border-right: 0;
    transform: rotate(45deg);
    transform-origin: right;
}

#alpha_slider{
    display: flex;
    right: 0;
    background-color: #EDF1FC;
    width: 130px;
    height: 35px;
    position: absolute;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 20px;
    box-shadow: 2px 5px 10px rgba(0,0,0,0.3);
    transition: all 0.3s cubic-bezier(.09,.53,.5,.96); 
    -webkit-transition: all 0.3s cubic-bezier(.09,.53,.5,.96);
}
#alpha_slider.close{
    top:0px;
    z-index: -1;
}
#alpha_slider.open{
    top:50px;
}

#alpha_slider .slider{
    position: relative;
    background-color: transparent;
}
#alpha_slider .slider .knob{
    box-shadow: 2px 5px 10px rgba(0,0,0,0.3);
}
#alpha_slider .slider:before{
    display: none;
}
#alpha_slider .slider .fondo .value{
    display: none;
}
.tut{
    margin-left: 800px;
}
#tut04 .icono .player_btn{
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    margin-left: 0;
}
@media (hover: hover){
    button.blanco:hover, a.blanco:hover {
        background-color: var(--azul-cobalto); 
        color: var(--blanco-real); 
    }
    
    button.blanco:hover svg path, a.blanco:hover svg path  {
        fill: var(--blanco-real); 
    }
	.btn_principal.sandia:hover{
		background-color:var(--sandia-hover);
	}
	.btn_principal.azul:hover{
		background-color:var(--azul-hover);
	}
	.btn_azul:hover{
		background-color: var(--blanco);
	}
	.btn_azul:hover .ico rect,
	.btn_azul:hover .ico stroke,
	.btn_azul:hover .ico polygon,
	.btn_azul:hover .ico path{
		fill: var(--azul);
	}
	.btn_sandia:hover{
		background-color: var(--blanco);
	}
	.btn_sandia:hover .ico rect,
	.btn_sandia:hover .ico stroke,
	.btn_sandia:hover .ico polygon,
	.btn_sandia:hover .ico path{
		fill: var(--sandia);
	}
	.btn_blanco:hover{
		background-color: var(--azul-cobalto);
	}
	.btn_blanco:hover rect,
	.btn_blanco:hover stroke,
	.btn_blanco:hover polygon,
	.btn_blanco:hover path{
		fill:var(--blanco-real);
	}
	label.radio:hover {
		border-color: var(--celeste-hover);
	}
	label.radio:hover:has( input:checked) {
		border-color: var(--celeste);
	}
	.btn_interact .interior:hover{
		border: 1px solid #fff;
		width: 82px;
		height: 82px;
		margin-top: 9px;
		margin-left: 9px;
	}
	.btn_interact .interior:hover::before,
	.btn_interact .interior:hover::after,
	.btn_interact .interior:hover span::before,
	.btn_interact .interior:hover span::after{
		width: 82px;
		height: 82px;
		box-shadow: 0px 0px 0px 0px rgba(0, 9, 59,0);
		border: 0px solid #fff;
		opacity: 0;
	}
	.btn_interact .interior:hover span{
		width: 68px;
		height: 68px;
		box-shadow: 0px 0px 0px 0px rgba(0, 9, 59,0);
		border: 0px solid #fff;
		color: #000;
		font-size: 12px;
		padding-top: 25px;
		z-index: 999;
	}
	.btn_adelante .interior:hover{}

	.btn_adelante .interior:hover::before,
	.btn_adelante .interior:hover::after{
		border: 3px solid rgba(255,255,255,0.6);
	}
	.btn_adelante .interior:hover span{
		color: var(--azul);
	}

	.btn_adelante .interior:hover .ico path,
	.btn_adelante .interior:hover .ico rect,
	.btn_adelante .interior:hover .ico polygon{
		fill: var(--azul);
	}
	.btn_adelante .interior:hover .ico path.nofill{
		fill:none;
		stroke:var(--azul);
	}
	.btn_favorito:hover .ico path.nofill{
		fill:none;
	}
	.btn_social:hover .ico path{ 
		fill: var(--celeste); 
	}
	.player_btn:hover{
	  background-color: var(--sandia);
	}
	.player_btn:hover .ico path,
	.player_btn:hover .ico rect,
	.player_btn:hover .ico polygon{
		fill: var(--blanco-real);
	}
	.player_btn:hover .ico path.nofill{
		fill:none;
		stroke:  var(--azul-cobalto);
	}
	#player_btn_play_pause:hover{
		background-color: var(--blanco-real);
	}
	#player_btn_play_pause:hover .ico path,
	#player_btn_play_pause:hover .ico rect,
	#player_btn_play_pause:hover .ico polygon{
		fill: var(--sandia);
	}
	.punto:hover .centro{
	   background-color: var(--sandia);
	}
	#listado_escenas .item_listado_escena:hover{
		padding-left: 1em;
	}
}


/*css calificador*/

span.wpcf7-list-item-label {
    display: none;
}
#comentario_calificacion {
    height: 45px;
}
#miFormulario p {
    display: flex;
}
#miFormulario label.radio img {
    position: absolute;
    width: 1.4rem;
}
#enviarEncuesta {
    margin: 0px;
    padding: 0px;
}
.wpcf7 form .wpcf7-response-output {
    text-align: center;
    color: #fff;
    border-color: #001136 !important;
    margin-top: -19px;
}
#enviarEncuesta p {
    width: 100%;
    display: inline-grid;
}
span#califica_cuento, #califica_navegacion, #califica_tematica {
    display: flex;
}
span.star-rating-control {
    display: contents;
}
input#btn_enviar_comentarios {
    background-color: var(--sandia);
    display: flex;
    gap: 1em;
    width: auto;
    height: auto;
    cursor: pointer;
    align-items: center;
    flex-direction: row;
    margin: 0.5rem 0.3rem;
    padding: 1.3em 1.7em;
    font-size: 1.2em;
    border-radius: 2em;
    border-style: none;
    justify-content: center;
    box-sizing: border-box;
    transition: all 100ms linear;
    color: var(--blanco);
}
/*css calificador*/