/*
 * Descripción: CUSTOM
 * Copyright (c) 2022
*/


/*===================================
	Google Fonts siempre primero
=====================================*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap');

/*
	font-family: 'Open Sans', sans-serif;
*/

/*=========================
        Generales
=========================*/

strong, b{font-weight:700;}
.semibold{font-weight:600;}
.normal{font-weight:400;}
.thin{font-weight:300;}

a{color: #fff;}
a:hover, a:focus {color: #fff;}/*cambia color*/

#dimensions {background:#000\9; background-color:rgba(0, 0, 0, 0.8); color: #fff;}

::selection { background:#fd0796;  color:#fff;}/*colordest*/
::-moz-selection { background:#fd0796; color:#fff;}/*colordest*/

.redondo{border-radius:6px !important; -moz-border-radius: 6px !important; -webkit-border-radius: 6px !important;}
.redondo.borde-l-size{border-radius:8px !important; -moz-border-radius: 8px !important; -webkit-border-radius: 8px !important;}
.redondo.borde-s-size{border-radius:4px !important; -moz-border-radius: 4px !important; -webkit-border-radius: 4px !important;}/*antes: rendondo-min*/
.redondo.borde-xl-size{border-radius:10px !important; -moz-border-radius: 10px !important; -webkit-border-radius: 10px !important;}/*antes: redondo-big*/



/*=========================
          CUSTOM
=========================*/

body{overflow: hidden;}
html{height:100%;}


.card {height:100%; position: relative; z-index: 1; display: flex; flex-direction: column; -webkit-flex-direction: column; min-width: 0; word-wrap: break-word; background-clip: border-box; border-radius: inherit; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}

.card-body {max-width: calc(100%); position: relative; display: flex; flex-direction: column; overflow: hidden; flex-grow: 1; flex-shrink: 1;}

.card-header {padding: 15px; position: relative; display: flex; flex-wrap: wrap; z-index: 1; background-color: #000; color: #ccc; padding: 8px 15px;}
.card-header .titulo-top{font-weight: bold; font-size: large; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin:0 auto; width:100%}
.card-header .titulo-top img{height:20px !important; margin-right:5px; vertical-align:bottom;}


.card-content {max-height: 100%; height: 100%; overflow: auto; padding:15px; display: grid; place-items: center;}

.card-footer {width: 100%; display: flex; background-color: #000;}

.zona-flechas img{opacity:0.2; padding:0 5px;}
.zona-flechas a img{opacity:1;}

.zona-story{position:relative; overflow:hidden;}
.zona-story .img-max-height{max-height:80vh; max-width: 480px; border-radius:8px !important; -moz-border-radius: 8px !important; -webkit-border-radius: 8px !important;}

.tab-left{position:absolute; top:20%; left:0px; height:60%; width:50%; z-index:20; /*background:rgba(0,0,255,0.3)*/}
.tab-right{position:absolute; top:20%; right:0px; height:60%; width:50%; z-index:20; /*background:rgba(255,0,0,0.3)*/}

.zona-barra-carga{position:absolute; top:5px; left:0px; right:0px; z-index:10; padding:0 10px; display:flex;}
.zona-barra {position: relative; width: 100%; height: 2px; margin:10px 2px 0px 2px; background: #ccc; opacity:0.6; overflow: hidden; display:inline-block;}
span.progreso {position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #fff; opacity:1; transition: all .3s; z-index:2}
.counter{font-size:0.7em; text-align:center; display:none}

.zona-derecha-top{position:absolute; top:36px; right:10px; z-index:10; width:40%;overflow:hidden; text-align:right;}
.zona-izquierda-top{position:absolute; top:30px; left:10px; z-index:10; width:60%;overflow:hidden;}
.zona-derecha-bottom{position:absolute; bottom:15px; right:10px; z-index:10}
.zona-izquierda-bottom{position:absolute; bottom:15px; left:10px; z-index:10;}

.zona-foto-video{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width:100%; height: 80vh; border-radius:inherit;}
.foto-video-rounded{overflow: hidden; border-radius:8px !important; -moz-border-radius: 8px !important; -webkit-border-radius: 8px !important;}

.usuario{display:flex;}
.usuario img{width:40px; border:1px solid rgba(0,0,0,0.1);}
.usuario p{font-size: 0.875em; color:white; align-self: center; margin:0px 5px; text-shadow: 2px 2px 2px rgba(0,0,0,0.8); line-height:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.zona-texto-abajo{position:absolute;bottom:40px; left:0px; z-index:10;}
.contenedor-texto{color:white;padding:10px 10px 20px 10px;text-align:center;margin:0 auto; display:block;text-shadow: 2px 2px 2px rgb(0 0 0 / 80%);}
.texto-info{font-size: clamp(1rem, 1.5vw, 1.25rem); line-height:1.3}/*El texto cambia de tamaño en función del espacio del contenedor - Parámetros clamp(min, val, max) -> min:fuente pequeña, val: resultado entre entre los valores mínimo y máximo, max: fuente grande*/
.texto-info{animation:1s anitext 0.5s ease-out 1 both;}

/*animación texto*/
@keyframes anitext{
	from{
		opacity: 0;
		transform: perspective(500px) translate3d(0px, 0px, -150px) rotate3d(1, 1, 0, 0deg);
	}
	to{
		opacity: 1;
		transform: perspective(500px) translate3d(0, 0, 0);
	}
}

/*animación imagen*/
.zoomentra{animation-duration: 6s; animation-name: zoomin; }
@keyframes zoomin { from { transform: scale(1);  } to { transform: scale(1.1); } }
.zoomentra.alternate { animation-direction: alternate; animation-iteration-count: infinite; }













.full-height {height: calc(100% -100px); flex: 1 1 auto;}

.fill-content {
    display: block;
    height: 0;
    max-height: 100%;
    max-width: 100%;
    min-height: 100%;
    min-width: 100%;
    width: 0;
    margin: auto;
}



.SPC_player-header {
    background-color: rgb(0, 0, 0);
    position: relative;
    line-height: var(0px);
    height: var(0px);
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.75);
    font-weight: bold;
    font-size: large;
    text-align: center;
    padding: 6px 15px;
}

.SPC_player-header .story-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


:root {
    --vh: 1vh;
    --bottomAdvHeight: 0px;
    --headerMargin: 12px;
    --headerHeight: calc(var(4.98px, 1vh) * 7);
    --storyPlayerHeight: calc( calc( calc( var(4.98px, 1vh) * 100 ) - calc( var(0px) + var(0px) ) ) - var(100px) );
    --storyPlayerMaxWidth: calc(var(--storyPlayerHeight)/1.5);
    --bottomAdvHeight: 50px;
}

.main{
	background:red;
	max-height: 100%;
    height: 100%;
    overflow: auto;
}

#story-player, .SPC_player-main {
    position: relative;
    width: 100%;
    height: var(--storyPlayerHeight);
    max-width: var(--storyPlayerMaxWidth);
    margin: 0px auto;
}

.page-fullbleed-area, .page-background-overlay-area {
    position: absolute;
    overflow: hidden;
    width: 100%;
    left: 0;
    height: calc(1.1851851851851851 * 100%);
    top: calc((1 - 1.1851851851851851) * 100% / 2);
    background:aqua;
}

.SPC_player-main {
    position: relative;
    width: 100%;
    height: calc( calc( calc( var(4.98px, 1vh) * 100 ) - calc( var(0px) + var(0px) ) ) - var(-100px) );
    max-width: var(--storyPlayerMaxWidth);
    margin: 0px auto;
}

.SPC_player-footer {
    position: fixed;
    width: 100%;
    height: var(100px);
    bottom: 0;
    margin: 0px;
    background-color: rgb(0, 0, 0);
    text-align:center;
}


/* Fondos degradados */
.fondodeg01 {background: -webkit-linear-gradient(#53bbbf 10%, #0f1939 90%); background: -moz-linear-gradient(#53bbbf 10%, #0f1939 90%); background: -ms-linear-gradient(#53bbbf 10%, #0f1939 90%); background: -o-linear-gradient(#53bbbf 10%, #0f1939 90%); background: linear-gradient(#53bbbf 10%, #0f1939 90%);}
.fondodeg02 {background: -webkit-linear-gradient(140deg, #04c18e 10%, #8a4cad 90%); background: -moz-linear-gradient(140deg, #04c18e 10%, #8a4cad 90%); background: -ms-linear-gradient(140deg, #04c18e 10%, #8a4cad 90%); background: -o-linear-gradient(140deg, #04c18e 10%, #8a4cad 90%); background: linear-gradient(140deg, #04c18e 10%, #8a4cad 90%);}
.fondodeg03 {background: -webkit-linear-gradient(#65997d 10%, #fccb6e 90%); background: -moz-linear-gradient(#65997d 10%, #fccb6e 90%); background: -ms-linear-gradient(#65997d 10%, #fccb6e 90%); background: -o-linear-gradient(#65997d 10%, #fccb6e 90%); background: linear-gradient(#65997d 10%, #fccb6e 90%);}
.fondodeg04 {background: -webkit-linear-gradient(#e75053 10%, #f9d423 90%); background: -moz-linear-gradient(#e75053 10%, #f9d423 90%); background: -ms-linear-gradient(#e75053 10%, #f9d423 90%); background: -o-linear-gradient(#e75053 10%, #f9d423 90%); background: linear-gradient(#e75053 10%, #f9d423 90%);}
.fondodeg05 {background: -webkit-linear-gradient(#6b48be 10%, #f8792a 90%); background: -moz-linear-gradient(#6b48be 10%, #f8792a 90%); background: -ms-linear-gradient(#6b48be 10%, #f8792a 90%); background: -o-linear-gradient(#6b48be 10%, #f8792a 90%); background: linear-gradient(#6b48be 10%, #f8792a 90%);}