*
{
    margin: 0;
    padding: 0;
}

.mrmListenMainbox {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: calc(100vw - 300px);
    height: auto;
    background-color: transparent;
    background-image: url("https://maparadio.com.mx/test/res/escuchar/img/mrm_home_scale.svg");
    background-size: 100%;
    background-repeat: repeat-y;
}

.mrmListenMapbox {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    background-color: #2755A6;
}

.mrmListenAccorbox {
    position: relative;
    top: 0;
    left: 50%;
    translate: -50%;
    margin-top: 3%;
    padding-bottom: 3%;
    width: 60%;
    height: auto;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 15pt;
    font-weight: 400;
    line-height: 1.7;
    text-align: center;
    color: #2755A6;
}

hr {
    border-top: 2px solid #1B316A;
}

h1 {
    font-size: 3em;
}

h2 {
    font-size: 2em;
    font-weight: 500;
}

h3 {
    font-size: 1.25em;
    font-weight: 400;
}

.mrmListenAccorItem {
    position: relative;
    padding-bottom: 3%;
    width: 100%;
    height: auto;
}

.mrmListenAccorItemTit {
    position: relative;
    width: 100%;
    height: auto;
    color: #333333;
    box-sizing: border-box;
    border-radius: 25px;
    cursor: pointer;
    transition: 0.5s;
}

.mrmListenAccorItemTit:hover {
    background-color: #d35f5f1c;
}

/*Tutorial acordeón "https://www.freecodecamp.org/espanol/news/como-construir-un-menu-acordeon-con-html-css-y-javascript/"*/
.mrmListenAccorItemTit::before {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    content: '+';
    font-size: 30px;
    color: #333333;
}

/* Muestra la parte de contenido cuando está activa. Establece la altura */
.mrmListenAccorbox .mrmListenAccorItem.activa .mrmListenAccorItemBts {
    height: auto;
}

/* Cambia de signo positivo a negativo una vez activado */
.mrmListenAccorbox .mrmListenAccorItem.activa .mrmListenAccorItemTit::before {
    content: '-';
    font-size: 30px;
}

.mrmListenAccorItemBts {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: 0.5s;
}

.mrmListenAccorItemBt {
    position: relative;
    width: 100%;
    height: 30px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 15pt;
    font-weight: 400;
    line-height: 1.7;
    text-align: center;
    color: #333333;
    border-style: none;
    border-radius: 25px;
    cursor: pointer;
    transition: 0.5s;
    background-color: transparent;
}

.mrmListenAccorItemBt:hover {
    background-color: #d35f5f1c;
}

.mrmListenAccorItemBtSecc {
    position: relative;
    width: 100%;
    height: 30px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 15pt;
    font-weight: 600;
    line-height: 1.7;
    text-align: center;
    color: #333333;
    border-style: none;
    background-color: transparent;
}

.mrmListenBg {
    position: fixed;
    top: 0;
    right: 0;
    width: calc(100vw - 300px);
    height: 100vh;
}

.mrmListenAguja {
    position: fixed;
    top: 50vh;
    right: 0;
    width: calc(100vw - 300px);
    height: 5px;
}

@media screen and (max-width: 1024px) {
    .mrmListenMainbox {
        top: 40px;
        width: 100vw;
    }

    .mrmListenAccorbox {
        width: 90%;
    }

    .mrmListenBg {
        top: 40px;
        width: 100vw;
    }

    .mrmListenAguja {
        width: 100vw;
        height: 3px;
    }
}