aside{
                height: calc(100% - 10px);
                display: inherit;
            }
            aside .aside-option{
                height: calc(100% - 10px);
                display: inherit;
                padding: 10px 10px 0px 10px;
            }
            aside .menu{
                height: calc(100% - 20px);
                display: inherit;

                padding: 0px;
                width: 0px;

                display: flex;
                flex-direction: column;

                transition: width 0.2s ease;
                opacity: 0;
                overflow-y: hidden;
                border-left: 1px solid #ddd;
            }
            aside .menu a{
                text-decoration: none;
                color: black;
            }
            aside .menu.activado{
                padding: 20px 10px 0px 20px;
                width: 250px;
                opacity: 1;
            }
            aside .menu .title{
                font-size: 22px;
                font-weight: 600;
                margin-bottom: 20px;
                margin-left: 5px;
                font-family: serif;
                color: black;
            }
            aside .menu .opcion{
                font-size: 17px;
                font-weight: 600;
                color: #999;
                margin-bottom: 20px;
                margin-left: 20px;
                font-family: Arial, Helvetica, sans-serif;
                text-decoration: none;
            }
            aside .menu .opcion:hover, aside .menu .opcion.activado{
                color: #777;
            }
            main{
                height: 100%;
                width: 100%;
                background-color: white;
                box-shadow: 0 0 2.5vw rgba(0, 0, 0, .1);

                overflow-x: auto;

            }
            aside .aside-option .opcion{
                height: 40px;
                width: 40px;
                font-size: 30px;

                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
            }
            main h2{
                text-align: center;
                font-size: calc(20px + 18 * (100vw - 100px) / 1900);
                line-height: 50px;
                font-family: serif;
                padding-left: 1.25vw; 
                padding-right: 1.25vw;
                text-transform: uppercase;
                font-weight: 600;
                margin-top: 0px;
            }
            .quote-highlight{
                display: flex;
                align-items: center;
                margin-top: 50px;
            }
            .quote-highlight blockquote, .quote-highlight cite{
                width: 50%;
            }
            .quote-highlight cite{
                font-weight: 600;
                font-size: calc(15px + 5 * (100vw - 100px) / 1900);
                font-family: serif;
                font-style: normal;
                text-transform: uppercase;
                margin-bottom: 17px;
            }

            .marco{
                text-align: right;
                border-bottom: 1px solid #ddd;
                padding-bottom: 35px;
                font-family: serif;
            }
            .marco p{
                text-align: right;
                color: #777;
                font-weight: 400;
                font-size: calc(15px + 5 * (100vw - 100px) / 1900);
                font-family: serif;
                line-height: 1.55;
            }
            .marco p span{
                color: black;
            }

            .episodios h3, main footer h3{
                text-align: center;
                font-family: serif;
                color: #777;
            }

            .episodio{
                display: flex;
            }
            .episodio img{
                margin-left: 8.33333333%;
                width: 41.66666667%;
            }
            .redessociales{
                position: absolute; 
                right: 0; 
                top: 50px; 
                display: flex; 
                flex-direction: column; 
                padding: 10px; 
                background-image: linear-gradient(to bottom right, #f7f7f7, #d7dadb 75%);
            }
            .redessociales a{
                color: #999;
            }
            .redessociales a:hover{
                color: black;
            }
            header{
                padding-top: 25px;
                display: flex;
                justify-content: center;
            }
            header .logo{
                height: 100px;
            }
            main footer{
                padding-bottom: 50px;
                padding-top: 50px;
            }
            main footer h3{
                text-align: center;
            }
            main footer .colaboradores{
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            main footer .colaboradores img{
                height: 75px;
            }
            .episodios h3{
                margin-top: 35px;
                margin-bottom: 35px;
            }
            .episodio .fecha{
                color: #777;
                font-size: 17px;
                font-family: Arial, Helvetica, sans-serif;
            } 
            .episodio .seccion{
                font-size: 17px;
                margin-top: 0;
                margin-bottom: 35px;
                color: black;
            }
            .episodio .autor{
                font-size: 42px;
                font-weight: 600;
                text-decoration: underline;
            }
            .episodio .titulo{
                font-size: 42px;
                margin-top: 0;
                margin-bottom: 15px;
                line-height: 45px;
            }
            .episodio .reproduccion a{
                color: #777;
                text-decoration: none; 
                display: flex; 
                align-items: center;
            }
            .episodio .reproduccion a:hover{
                color: blue;
            }
            .quote-highlight {
                padding-left: 7%;
            }
            .quote-highlight blockquote{
                padding-left: 9%;
            }
            .quote-highlight blockquote p{
                text-align: right;
                color: #777;
                font-weight: 400;
                font-size: calc(15px + 5 * (100vw - 100px) / 1900);
                font-family: serif;
                line-height: 1.55;
            }
            .quote-highlight blockquote p strong{
                color: black;
                text-transform: uppercase;

            }
            @media (max-width: 767px) {
                .quote-highlight{
                    flex-wrap: wrap;
                }
                .quote-highlight blockquote, .quote-highlight cite{
                    width: 100%;
                }
                .quote-highlight{
                    padding-left: 0vw; 
                    padding-right: 0vw;
                }
                .quote-highlight blockquote{
                    padding-left: 0%;
                    margin-left: 0;
                    margin-right: 0;
                }
                .quote-highlight blockquote p{
                    margin-bottom: 0%;
                }
                .quote-highlight cite{
                    text-align: right;
                }
                .marco{
                    margin-top: 100px;
                }
                .episodio {
                    display: flex;
                    flex-direction: column;
                }
                .episodio img {
                    margin-left: 0;
                    width: 100%;
                    margin-bottom: 15px;
                }
                .episodio .autor, .episodio .titulo {
                    font-size: 30px;
                }
                main footer .colaboradores {
                    flex-direction: column;
                }
                main footer .colaboradores img {
                    width: 100%;
                    margin-top: 25px;
                }
                main footer .colaboradores a {
                    width: 100%;
                }
                .tres-column {
                    flex-direction: column;
                }
                .tres-column .izq, .tres-column .centro, .tres-column .der {
                    width: 100%!important;
                }
                .tres-column .izq{
                    order: 2;
                }
                .tres-column .centro{
                    order: 3;
                }
                .tres-column .der {
                    order: 1;
                }
                .inf-transcr {
                    margin-top: 50px!important;
                    padding-left: 0!important;
                }
                .personaje{
                    padding-left: 0%!important;
                    padding-right: 0%!important;
                }
                .personaje .info-persona {
                    flex-direction: column;
                    align-items: center !important;
                }
                .personaje .info-persona .foto {
                    margin-right: 0!important;
                    margin-bottom: 25px;
                }
                .tres-column .centro {
                    padding-bottom: 25px;
                    padding-right: 0!important;
                }
                .creditos .column-media {
                    width: 100%!important;
                }
                .creditos.conlumn-dos {
                    flex-direction: column;
                }
                .creditos.conlumn-dos div {
                    width: 100%!important;
                }
                .inf-transcr .titulo{
                    line-height: 50px;
                }
                .playlist a img{
                    width: 100%!important;
                }
            }

            .inf-transcr{
                margin-top: 25px;
                line-height: 50px;
                padding-left: 13%;
            }
            .inf-transcr .sub, .inf-transcr .titulo{
                margin: 0;
            }
            .inf-transcr .sub{
                font-weight: 400;
                font-size: calc(15px + 5 * (100vw - 100px) / 1900);
                line-height: 1.55;
                margin-bottom: 10px;
                font-family: serif;
            }
            .inf-transcr .autor{
                font-size: 42px;
                font-weight: 600;
                text-decoration: underline;
                font-family: serif;
            }
            .inf-transcr .titulo{
                font-size: 42px;
                text-decoration: underline;
                font-family: serif;
            }

            .tres-column{
                margin-top: 25px;
                display: flex;
                justify-content: space-around;
                gap: 30px;
            }
            .tres-column .izq{
                width: 25%;
            }
            .tres-column .izq h3{
                padding-left: 15px;
                border-bottom: 1px solid #ddd;
                font-family: serif;
                color: #777;
            }
            .tres-column .izq .cont-spotify{
                text-align: center;
            }
            .tres-column .izq .cont-spotify img{
                width: 50%;
                margin-bottom: 10px;
            }
            .tres-column .centro{
                text-align: justify;
                width: 45%;
                padding-right: 50px;
            }
            .tres-column .centro p{
                color: #777;
                font-weight: 400;
                font-size: calc(15px + 5 * (100vw - 100px) / 1900);
                font-family: serif;
                line-height: 1.55;
            }
            .tres-column .centro h3{
                text-align: center;
                font-family: serif;
                color: #777;
            }
            .tres-column .centro span{
                color: black;
                text-transform: uppercase;
                font-weight: 400;
                font-size: calc(15px + 5 * (100vw - 100px) / 1900);
                font-family: serif;
                line-height: 1.55;

                margin-bottom: 20px;
                display: inline-block;
            }
            .tres-column .centro p span {
                display: contents;
            }
            .tres-column .der{
                width: 30%;
            }
            .leer-mas{
                font-weight: 600;
            }
            .leer-mas .cont-boton{
                text-align: center;
            }
            .leer-mas .cont-boton button{
                background-color: #f5f5f5; 
                color: #222; 
                font-family: 'Playfair Display', serif; 
                font-size: 18px; 
                font-weight: 600;
                border: none; 
                border-radius: 999px; 
                padding: 10px 30px; 
                cursor: pointer; 
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); 
                transition: all 0.3s ease;
            }
            .leer-mas .cont-boton button:hover{
                background-color: #f5f5f500; 
            }
            .personaje{
                margin-top: 25px;
                padding-left: 15%;
                padding-right: 15%;
            }
            .personaje h3{
                text-align: center;
                font-family: serif;
                color: #777;
            }
            .personaje .info-persona{
                display: flex;
                align-items: start;
            }
            .personaje .info-persona .foto{
                height: 200px;
                margin-right: 25px;
                border-radius: 50%;
            }
            .personaje .info-persona .nombre{
                font-size: 30px;
                font-weight: 600;
                font-family: serif;
            }
            .personaje .info-persona .descripcion{
                text-align: justify;
                color: #777;
                font-weight: 400;
                font-size: calc(15px + 5 * (100vw - 100px) / 1900);
                font-family: serif;
                line-height: 1.55;
            }
            .ico-circle{
                padding: 5px;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .play-episode{
                border: 5px solid #ddd;;
                padding: 15px;
                font-family: Arial, Helvetica, sans-serif;
            }
            .play-episode .info-top{
                text-align: center;
                font-weight: 600;
                font-size: 18px;
                padding-bottom: 20px;
                border-bottom: 1px solid #ddd;
            }
            .play-episode .info-top .play{
                height: 30px;
                width: 30px;
                background-color: #06b9fb;
                color: white;
                margin: auto;
                margin-bottom: 10px;
            }
            .play-episode .info-bottom{
                font-weight: 600;
            }
            .play-episode .info-bottom p{
                display: flex;
                align-items: center;
            }
            .play-episode .info-bottom .ico-circle{
                background-color: #cccfce;
                color: white;
                margin-right: 5px;
            }
            .play-episode .info-bottom .redes{
                margin-top: 35px;
                display: flex;
                justify-content: space-between;
            }
            .play-episode .info-bottom .redes button{
                width: 33%;
                border: 0;
                background-color: #eeeeee;
                cursor: pointer;
                padding-top: 7px;
                padding-bottom: 5px;
            }
            .creditos span{
                font-weight: 600;
                font-size: calc(17px + 5 * (100vw - 100px) / 1900);
                color: black;
            }
            .creditos .column-media{
                display: flex;
                flex-direction: column;
                width: 35%;
            }
            .creditos.media{
                display: flex;
                justify-content: center;
            }
            .creditos.conlumn-dos{
                display: flex;
                justify-content: center;
                gap: 75px;
            }
            .creditos.conlumn-dos div{
                width: 40%;
            }
            .creditos h3 {
                font-size: 45px;
                font-family: serif;
                line-height: 45px;
            }
            .creditos h3 span{
                font-size: 30px;
            }
            h3{
                font-weight: 600;
            }
            .sub-titulo{
                font-family: serif;
                text-align: center;
                font-family: serif;
                text-align: center;
                color: #777;
                font-size: 30px;
                margin-bottom: 0;
                text-transform: uppercase;
            }
    .sub-creditos{
        color: #777;
        font-weight: 400;
        font-size: calc(15px + 5 * (100vw - 100px) / 1900);
        font-family: serif;
        line-height: 1.55;
    }
    .sub-creditos span{
        color: black;
    }
    .creditos .column-media p{
        font-weight: 400;
        font-size: calc(15px + 5 * (100vw - 100px) / 1900);
        font-family: serif;
        line-height: 1;
        color: #777;
    }
    .creditos.conlumn-dos p{
        font-weight: 400;
        font-size: calc(15px + 5 * (100vw - 100px) / 1900);
        font-family: serif;
        line-height: 1;
        color: #777;
    }
    .playlist{
        text-align: center;
    }
    .playlist a img{
        width: 75%;
        margin-bottom: 15px;
    }