/**
 * Estructura
 **/
 :root{
    --azul-tema:rgba(0, 49, 149, 0.95);
    --texto-menu-1:rgba(255, 255, 255, 0.95);
    --texto-menu-2:rgba(255, 255, 255, 0.7);
    --texto-titulo: rgb(48 55 61);
    --texto-cuerpo: rgba(48, 55, 61, 0.8);
    --tamano-menu-1 : 15pt;
    --tamano-menu-2 : 12pt;
    --tamano-link : 10.5pt;
    --tamano-titulo-1 : 30pt;
    --tamano-titulo-2 : 18pt;
    font-size: 18px;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
 }
 .tutoriales__cuerpo{
    display: flex;
    flex-direction: row;
    padding: 0;
    margin: 0;
    min-height: 100vh;
}
.contenedor-menu{
    flex: 0 0 320px;
    border-right: 1px solid;
    background-color: var(--azul-tema);
    color: var(--texto-menu-1);
    overflow-y: scroll;
    height: 100vh;
}
.contenedor-principal{
    flex: 1 1 100%;
}

/**
 * Encabezado de Menú
 **/
.encabezado-menu{
    padding: 20px;
}
.titulo-menu{
    font-size: var(--tamano-menu-1);
    color: var(--texto-menu-1);
    letter-spacing: 0.5pt;
}

.encabezado-menu a{
    color: var(--texto-menu-2);
}
.encabezado-menu a::before{
    content: " ";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    background-image: url("/img/glyphicons-halflings-white.png");
    background-position: calc(-24px * 18) calc(-24px * 3);
    letter-spacing: 0.5pt;
    transform: translate(0px, 3px);
}
/**
 * Cuerpo de Menú
 **/
 .cuerpo-menu{
    padding: 1px 20px 40px 20px;
}
.borde-cuerpo-menu details[open]  {
    padding-bottom: 2em;
}
.borde-cuerpo-menu details > summary {
    margin: 0.5em 0;
    cursor: pointer;
}
.borde-cuerpo-menu details[open] > summary {
    padding-bottom: 0.5em;
    border-bottom: 1px solid var(--texto-menu-2);
}
.borde-cuerpo-menu h1{
    font-size: 1.5em;
    letter-spacing: 0.5pt;
    color: var(--texto-menu-1);
}
.borde-cuerpo-menu h2 {
    font-size: var(--tamano-menu-2);
    letter-spacing: 0.5pt;
    /* margin-top: 2em; */
    margin: 0;
    display: inline-block;
    color: var(--texto-menu-1);
    text-transform: uppercase;
}
.borde-cuerpo-menu .menu__link-video,
.borde-cuerpo-menu .menu__link-articulo{
    display: block;
    margin: 0.5em 0;
    text-decoration: none;
    letter-spacing: 0.5pt;
    color: var(--texto-menu-2);
    font-size: var(--tamano-link);
}
.borde-cuerpo-menu .menu__link-video:hover,
.borde-cuerpo-menu .menu__link-articulo:hover,
.borde-cuerpo-menu .menu__link-video:focus,
.borde-cuerpo-menu .menu__link-articulo:focus{
    color: var(--texto-menu-1);
}
.borde-cuerpo-menu .menu__link-video::before,
.borde-cuerpo-menu .menu__link-articulo::before{
    content: " ";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    letter-spacing: 0.5pt;
    transform: translate(0px, 3px);
}
.borde-cuerpo-menu .menu__link-video::before{
    background-image: url("/img/glyphicons-halflings-white.png");
    background-position: calc(-24px * 8) calc(-24px * 1);
}
.borde-cuerpo-menu .menu__link-articulo::before{
    background-image: url("/img/glyphicons-halflings-white.png");
    background-position: calc(-24px * 11) calc(-24px * 1);
}
.borde-cuerpo-menu .menu__link--activo{
    color:white;
    font-weight: bold;
}
/**
 *****************************
 * Contenido
 *****************************
 */
 #contenido{
     display: block;
     width: 100%;
     height: 100%;
     color: var(--texto-cuerpo);
 }

.tutoriales__contenido{
    position: relative;
    /* display: flex;
    flex-direction: column; */
    padding: 0;
    margin: 0;
    min-height: 100vh;
}
 .video-tamano-completo{
    --aspecto: calc(315/560);
    width: 100%;
    height: calc(100vw*var(--aspecto));
    max-height: 100vh;
    max-width: calc(100%/var(--aspecto));
    box-shadow: 0 0 2px rgb(200 200 200 / 80%);
}

.tutoriales__contenido h1{
    font-size: var(--tamano-titulo-1);
    letter-spacing: 0.5pt;
    color: var(--texto-titulo);
    font-weight: 600;
    line-height: 1.4;
}
.tutoriales_seccion{
    margin: 0 20px ;
    padding-bottom: 8em;
}
p {
    margin: 20px 0;
    font-size: 18px;
    color:rgba(48, 55, 61, 0.8);
    line-height: 1.71;
    letter-spacing: normal;
    
}
.tutoriales__contenido header > p{
    margin: -30px 0 0 0;
    font-size: var(--tamano-titulo-2);
}