.navbarigac {
    z-index: 10000;
}

a {
    text-decoration: none;
}

.main-row {
    flex-wrap: wrap;
}

.aside {
    width: 25%;
    z-index: 1;
    border-right: 1px solid #cccccc;
    position: relative;
    z-index: 1000;
    position: relative;
    transition: all 0.5s ease;
}

.aside.collapseAside {
    width: 0;
    transform: translate(-100%);
    box-shadow: none;
    position: absolute;
    transition: all 0.5s ease;
}

.aside.collapseAside .aside__togglebutton {
    position: sticky;
    top: 130px;
}

.aside__togglebutton {
    position: absolute;
    top: 30px;
    right: -25px;
    width: 25px;
    height: 25px;
    background: #3c3c3b;
    border-radius: 0 50% 50% 0;
    cursor: pointer;
    z-index: 100;
}

.aside__togglebutton img {
    transition: 0.5s all ease;
}

/*tabs*/
.aside .title {
    height: auto;
    margin-bottom: 20px;
}

.content-intro {
    align-items: center;
}

.aside .title .content-intro {
    justify-content: space-between;
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #cccccc;
}

.aside .title .content-intro h1 {
    font-size: 25px;
    line-height: normal;
    text-align: left;
    margin-bottom: 0;
}

#playerbuttons {
    margin-left: 10px;
}

#playerbuttons .context-play {
    font-size: 0.7rem;
    line-height: normal;
    margin-top: 3px;
    width: 50px;
}

/* Expediciones con varias comunidades: un boton de sonido por comunidad, uno al lado del
   otro, cada uno con su etiqueta (contenido.audios en data/data.js). */
#playerbuttons {
    display: flex;
    gap: 10px;
}

#playerbuttons .audio-comunidad {
    text-align: center;
}

#playerbuttons button {
    width: 27px;
    height: 27px;
    border-radius: 30px;
    border: 0;
    padding: 0;
    background: 0;
    border: 2px solid #fff;
    box-shadow: 2px 3px 10px #00000070;
    transition: all 0.2s ease;
}

#playerbuttons button:hover {
    box-shadow: none;
    transition: all 0.2s ease;
}

.botones-popups {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10px;
}

.btn-info {
    margin: auto;
    width: max-content;
    margin-top: 10px;
    padding: 5px 20px 3px 20px;
    border: 1px solid #2f8adb;
    background: #2f8adb;
    border-radius: 50px;
    cursor: pointer;
    font-family: "Gill Sans Std Light";
    transition: all 0.5s ease;
}

.btn-info:hover {
    background: transparent;
    transition: all 0.5s ease;
}

.btn-info a {
    color: #fff;
    font-size: 0.8rem;
    transition: all 0.5s ease;
}

.btn-info:hover a {
    color: #2f8adb;
    font-weight: 900;
    transition: all 0.5s ease;
}

.btn-info.btn-close2 {
    position: fixed;
    right: 0;
    margin-right: 30px;
    font-size: 0.8rem;
    z-index: 100;
}

.btn-close {
    position: inherit;
    top: 9.9%;
    left: 23%;
    z-index: 9999;
    font-size: 1rem;
}

.aside .title .sub__title {
    font-size: 14px;
    margin-top: 20px;
    color: #31393e;
    font-family: "Gill Sans Std Light";
}

.aside .logos .title {
    font-size: 16px;
    height: 16px;
    color: #5192d9;
    font-family: "Gill Sans Std Light";
    margin-bottom: 5px;
}

.aside .logos .d-flex {
    align-items: center;
    justify-content: space-between;
}

.aside .logos img {
    margin-right: 10px;
    height: 100%;
    filter: grayscale(1);
    transition: 0.2s ease;
    opacity: 0.4;
}

.aside .logos img:hover {
    filter: grayscale(0);
    opacity: 1;
    transition: 0.2s ease;
}

.aside .logos .igac {
    width: 90px;
}

.aside .logos .andoke {
    width: 60px;
}

.aside .logos .ampiicanke {
    width: 70px;
}

.aside .logos .act {
    width: 60px;
    filter: invert(1);
}

.aside .logos .act:last-child {
    margin-right: 0;
}

.aside .logos .act:hover {
    filter: grayscale(1);
    filter: invert(1);
}

.aside .aside__container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    overflow: auto;
    height: calc(100vh - 108px);
    padding: 30px 30px;
    transition: all 0.5s ease;
    position: sticky;
    top: 60px;
    bottom: 0;
}

.aside.collapseAside .aside__container {
    padding: 50px 0px;
}

.aside .aside__container .nav-item {
    width: 50%;
    background: #e8e6e0;
    border-radius: 0.25rem 0.25rem 0 0;
}

.aside .aside__container .nav-tabs .nav-item:first-child {
    border-radius: 0.25rem 0 0 0;
}

.aside .aside__container .nav-tabs .nav-item:last-child {
    border-radius: 0 0.25rem 0 0;
}

.aside .aside__container .nav-tabs .nav-link {
    border: none;
    color: #58595b;
    font-size: 13px;
    line-height: normal;
    text-align: center;
    padding: 15px 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aside .aside__container .nav-tabs .nav-link.active {
    color: #3595e0;
    border-bottom: 2px solid #3595e0;
    background: #dad9d5;
}

.tab-content {
    padding: 40px 20px;
    width: 100%;
    background: #f2efe9;
    border-radius: 0 0 0.25rem 0.25rem;
}

.tab-content ul {
    padding-left: 15px;
    margin-bottom: 0;
}

.tab-content ul li {
    list-style: disc;
    font-size: 14px;
    line-height: normal;
    margin-bottom: 8px;
}

.tab-content ul li:last-child {
    margin-bottom: 0;
}

.tab-content ul li span {
    color: #686868;
}

.portada {
    /* Banner del sitio. Los recursos graficos propios de cada expedicion (banner, letras,
       pluma) viven en images/assets/. */
    background: url(../images/assets/portada.svg);
    background-color: #dedede;
    background-size: 100%;
    background-position: center top;
    background-repeat: no-repeat;
}

.portada .text-center {
    width: 100%;
}
.portada #iframeYoutube,
.portada #iframeYoutubeAudio {
    margin: auto;
}

/*expediton terms list*/
.expediton__terms__list {
    border-top: 1px solid #cccccc;
    padding-top: 20px;
    margin-top: 20px;
}

.expediton__terms__list h2 {
    font-size: 16px;
    color: #5192d9;
    margin-bottom: 20px;
    font-family: "Gill Sans Std Light";
}

.expediton__terms__list h2 b {
    font-family: "Gill Sans Std";
}

.expediton__terms__list ol {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

.expediton__terms__list li {
    counter-increment: custom;
    padding-left: 10px;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 8px;
    position: relative;
}

.expediton__terms__list li .ver__mas {
    width: 5%;
    padding: 10px 0 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0 10px 10px 0;
    border-left: 0;
    cursor: pointer;
}

.expediton__terms__list li .ver__mas .fa {
    font-size: 0.8rem;
}

.expediton__terms__list li.active .ver__mas .fa {
    border-left: 0;
    color: #3fa9f5;
}

.expediton__terms__list li.done .ver__mas .fa {
    border-left: 0;
    color: #5cbc8f;
}

.expediton__terms__list li.active .ver__mas {
    border-left: 0;
}

.expediton__terms__list li.done .ver__mas {
    border-left: 0;
}

.expediton__terms__list li .ver__mas:hover {
    opacity: 1;
}

.expediton__terms__list li:last-child {
    margin-bottom: 0;
}

.expediton__terms__list li a {
    color: #414042;
    font-size: 16px;
    line-height: 16px;
    padding: 10px 30px 8px;
    background: #fff;
    width: 95%;
    border-radius: 10px 0 0 10px;
    border: 1px solid #cccccc;
}

.expediton__terms__list li.active a {
    border: 1px solid #3fa9f5;
    background: #fff;
}

.expediton__terms__list li.done a {
    background: #f0faf6;
    border: 1px solid #5cbc8f;
}

.expediton__terms__list li a .list__item--title-resume {
    font-family: "Gill Sans Std Light";
    font-size: 14px;
}

.expediton__terms__list li a:hover {
    border: 1px solid #3fa9f5;
    transition: 1s all ease;
}

.expediton__terms__list ol li:before {
    position: absolute;
    top: calc(50% - 12.5px);
    left: 0;
    content: counter(custom);
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    width: 25px;
    height: 25px;
    border-radius: 25px;
    /* Sin relleno: con box-sizing:border-box el padding de 10px arriba y 6px abajo dejaba el
       area de contenido descentrada y el numero caia 2px por debajo del centro del circulo.
       El espacio tras el counter tambien lo corria a la izquierda, por eso se quito. */
    padding: 0;
    font-size: 14px;
    line-height: 1;
    color: #000;
    z-index: 10;
    box-shadow: 0 0 4px #0000004f;
}

.expediton__terms__list ol li:hover::before {
    background: #3fa9f5;
    color: #fff;
}

/* Color del numero al pasar el mouse: se toma de la variable --color-sitio que fija el JS
   por cada item (color de su categoria). Asi funciona para N categorias y cualquier color. */
.expediton__terms__list ol li.sitio:hover::before {
    background: var(--color-sitio, #3fa9f5) !important;
    color: #fff;
}

.expediton__terms__list ol li.active:before {
    background: #3fa9f5;
    box-shadow: none;
    color: #fff;
}

.expediton__terms__list ol li.done:before {
    background: #5cbc8f;
    box-shadow: none;
    color: #fff;
}

.expediton__terms__list ol li:first-child {
    counter-reset: custom;
}

/*content*/
.content {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    transition: all 0.5s ease;
    width: 75%;
    overflow: auto;
    height: calc(100vh - 108px);
}

.content.collapseAside {
    width: 100%;
    transition: all 0.5s ease;
}

.content.collapseAside .etnohistoria .audio__Card .card .card-content .tab-content {
    padding: 10px 100px 20px;
}

/*pop up offline*/
.leaflet-popup {
    min-width: 270px;
}

/* Leaflet declara su propia tipografia sobre .leaflet-container y, al ser una regla directa
   sobre ese elemento, gana frente a la que el globo heredaria del body. Por eso el globo salia
   en Helvetica/Arial mientras el resto del sitio va en Gill Sans. Se fija en .leaflet-popup para
   que la hereden el nombre, el resumen y el boton "Ver mas...". */
.leaflet-popup,
.leaflet-tooltip {
    font-family: "Gill Sans Std", sans-serif;
}

.leaflet-popup .leaflet-popup-content-wrapper {
    border-top: 5px solid #5192d9;
    border-radius: 5px;
}

.leaflet-container a.leaflet-popup-close-button {
    width: inherit;
    top: 24px;
}

.leaflet-container a.leaflet-popup-close-button span {
    margin: 20px 20px 0;
    font-size: 25px;
}

.leaflet-popup .leaflet-popup-content {
    font-size: 13px;
    margin: inherit;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    color: #808184;
    width: inherit !important;
}

.leaflet-popup .identificador {
    height: 25px;
    width: 25px;
    max-height: 25px;
    min-width: 25px;
    min-height: 25px;
    max-width: 25px;
    border-radius: 25px;
    background: #5192d9;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    margin-right: 5px;
}

.leaflet-popup .align-items-center {
    color: #5192d9;
    padding-right: 20px;
}

.leaflet-popup .contenedor__imagen {
    margin-top: 10px;
    min-height: 0;
    max-height: 110px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.leaflet-popup .vermas-link {
    border: 2px solid #5192d9;
    padding: 7px;
    width: 100%;
    margin-right: 0;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    display: flex;
    justify-content: center;
    text-align: center;
    cursor: pointer;
}

/*pop up*/
.esriPopup .titlePane {
    font-size: 13px;
    background: #fff;
    color: #808184;
    padding: 15px 20px 0;
    border-top: 5px solid #5192d9;
    color: #5192d9;
}

.esriPopup .titlePane .title .identificador {
    height: 25px;
    width: 25px;
    border-radius: 25px;
    background: #5192d9;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    margin-right: 5px;
}

.content .esriPopup .contentPane {
    width: 100%;
    padding: 0 10px 6px;
    background: #fff;
}

.content .esriPopup .titleButton.maximize {
    filter: brightness(0.5);
    margin: 20px 20px 0;
}

.content .esriPopup .titleButton.close {
    filter: brightness(0);
    margin: 20px 20px 0;
}

.content .esriPopup .sizer .contentPane {
    font-size: 13px;
    color: #808184;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

.esriPopup .contentPane .contenedor__imagen {
    margin-top: 10px;
    min-height: 0;
    max-height: 110px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.esriPopup .contentPane .contenedor__imagen img {
    width: 100%;
}

.content .esriPopup .sizer .contentPane a {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    margin-left: 10px;
}

.content .actionsPane {
    background: #fff;
    padding: 5px 20px 20px;
}

.content .actionsPane .actionList {
    height: inherit;
    display: flex;
    margin-left: -7.5px;
    margin-right: -7.5px;
}

.content .actionsPane .actionList a {
    border: 2px solid #5192d9;
    padding: 7px;
    width: 100%;
    margin-right: 0;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    margin: 0 7.5px;
}

#includedContent {
    width: 100%;
}

#puebloInfoExpedicion,
#mapaActores,
#bibliografia {
    z-index: 1000;
    width: 100%;
    top: 0;
    height: calc(100vh - 108px);
    position: absolute;
    z-index: 10000;
    display: flex;
    align-items: center;
}
#mapaActores .mapa-actores-content {
    width: 100%;
}
#mapaActores .title {
    padding: 15px 0 15px 0;
    margin-bottom: 7px;
    border-bottom: 1px solid #ccc;
}
#mapaActores .mapa-modal,
.historical__aspects {
    width: 70%;
    position: relative;
    z-index: 10000;
    margin: auto;
}
#mapaActores .nav-link {
    line-height: normal;
    cursor: pointer;
}
#mapaActores .nav-link.active {
    background: #2e8adb;
}
#mapaActores .tab-content {
    color: #58595b;
    padding: 20px 10px;
}
#mapaActores .col-8 {
    background: #f2efe9;
}
#mapaActores .tab-content .carousel-item {
    position: relative;
}
#mapaActores .tab-content .carousel-item .background-image {
    position: absolute;
    top: 0;
    filter: blur(5px);
    z-index: 0;
    width: 100%;
    background: #333;
}
#mapaActores .tab-content .carousel-item .background-image img {
    opacity: 0.7;
}
#mapaActores .tab-content .text {
    font-size: 0.9rem;
    position: absolute;
    padding: 5px 20px;
    bottom: 0px;
    width: 100%;
    background: #ffffffba;
    line-height: normal;
    z-index: 1;
}
#mapaActores .tab-content .carousel-control-next,
#mapaActores .tab-content .carousel-control-prev {
    background: #2e8adb;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    top: calc(50% - 20px);
    right: 10px;
    opacity: 0.6;
}
#mapaActores .tab-content .carousel-control-prev {
    right: auto;
    left: 10px;
}
#mapaActores .tab-content .carousel-control-next span,
#mapaActores .tab-content .carousel-control-prev span {
    width: 12px;
}
#mapaActores .tab-content .carousel-indicators {
    position: absolute;
    padding: 0 5px;
    bottom: -15px;
    width: 100%;
    margin: auto;
    justify-content: flex-end;
}
#mapaActores .tab-content .carousel-indicators li {
    width: 7px;
    height: 7px !important;
    border-top: 0;
    border-bottom: 0;
    display: block;
    border-radius: 5px;
    margin: 0 3px;
    background: #2f8adb;
}
/* El selector de grupo solo existe en pantallas pequenas; en escritorio la lista completa
   de grupos ya se ve en la columna izquierda. */
.mapa-actores-content .selector-grupo {
    display: none;
}

#mapaActores .tab-content .image-container {
    height: 348px;
    overflow: hidden;
    padding: 0px;
    display: block;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}
#mapaActores .tab-content .image-container img {
    width: auto;
    height: 100%;
    z-index: 1;
}
.historical__aspects .card::after,
#mapaActores .tab-content::after {
    content: "";
    background-image: url(../images/assets/feather.svg);
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 8px;
    overflow: hidden;
    width: 113px;
    height: 120px;
    position: absolute;
    top: -20px;
    right: -50px;
    z-index: 1;
}
#puebloInfoExpedicion .btn-info,
#mapaActores .btn-info,
#bibliografia .btn-info {
    width: max-content;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 5px 10px 3px 10px;
    border: 1px solid #2f8adb;
    background: #2f8adb;
    border-radius: 50px;
    cursor: pointer;
    font-family: "Gill Sans Std Light";
    transition: all 0.5s ease;
    position: absolute;
    top: -26px;
    left: -32px;
}
#puebloInfoExpedicion .modal-backdrop,
#mapaActores .modal-backdrop #bibliografia .modal-backdrop {
    top: 60px;
    left: inherit;
}

/** interna **/
.container-portada .content__banner {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 30px;
    min-height: 30px;
    max-width: 30px;
    max-height: 30px;
    border-radius: 30px;
    background: #3595e0;
    color: #fff;
}

/* El numero va centrado por el flex del circulo. No se le fija alto: con height:12px la caja
   quedaba mas baja que la linea de texto (20px), asi que el flex centraba una caja de 12 y el
   numero se desbordaba 4px hacia abajo. Con line-height:1 la caja mide lo mismo que el texto. */
.container-portada .content__banner p {
    font-size: 21px;
    line-height: 1;
}

.container-portada .content__banner__title__Al {
    font-size: 35px;
    color: #000;
    opacity: 0.7;
    line-height: normal;
}

.container-portada .content__banner__title__Esp {
    font-size: 24px;
    color: #000;
    opacity: 0.7;
}

.content__banner .content__banner__context {
    margin-bottom: 20px;
}

.content__banner .content__banner__context button {
    border: 0;
    background: transparent;
}

.content__banner .play-button p {
    font-size: 14px;
    height: 18px;
    opacity: 0.6;
}

.popover-body {
    font-size: 12px;
    padding: 5px 10px;
}

.content__banner .content__banner__context .icon {
    width: 20px;
    margin-right: 7px;
}

/** youtube video **/
.iframeyoutube {
    max-height: 0;
    max-width: 560px;
    width: 560px;
    height: 315px;
    overflow: hidden;
    transition: 0.5s all ease;
}

.iframeyoutube .videoPlayer {
    width: 100%;
    height: auto;
    max-width: 560px;
    max-height: 315px;
}

.iframeyoutube.expand {
    max-height: 560px;
    transition: 0.5s all ease;
}

.iframeyoutube iframe {
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.iframeyoutubeaudio {
    max-height: 0;
    max-width: 560px;
    width: 560px;
    height: auto;
    transition: 0.5s all ease;
    overflow: hidden;
}

.iframeyoutubeaudio.expand {
    max-height: 560px;
    transition: 0.5s all ease;
}

.iframeyoutubeaudio iframe {
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
}

/** pills **/
.container-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    z-index: 10;
    padding: 40px 0;
}

.container-info .content__tabulador {
    box-shadow: 3px 3px 7px 1px #00000014;
    border-radius: 5px;
    width: 50%;
    position: relative;
}

.container-info .nav-pills {
    background: #f7f7f7;
    margin-bottom: 0 !important;
}

.container-info .nav-item {
    width: 100%;
}

.container-info .nav-link {
    text-align: center;
    padding: 25px;
    font-size: 16px;
}

.container-info .nav-link.active {
    background: transparent;
    color: #3595e0;
    border-bottom: 2px solid #3595e0;
    border-radius: 0;
}

.container-info .tab-content {
    padding: 40px;
    background: #fff;
    font-size: 14px;
    line-height: normal;
}

.popover-container {
    position: absolute;
    left: 15px;
    flex-wrap: wrap;
}
.popover-container .col-md-6 {
    padding: 0 !important;
}
.popover-container .popover {
    position: absolute;
    font-size: 0.7rem;
    left: 2hw;
    top: -20px;
    transform: translateY(-50%);
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 10;
    width: 200px;
}

.popover-container .popover::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -20px;
    transform: rotate(90deg) translateY(110px) translateX(25px);
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent transparent rgb(255, 255, 255);
}

/** referentes **/
.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: calc(50% - 10px);
    z-index: 1000;
    width: 30px !important;
    height: 30px;
    border-radius: 20px;
    background: #fff;
    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-button-next::before {
    content: "\f054";
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
}

.swiper-button-prev::before {
    content: "\f053";
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
}

.swiper-pagination {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 80px;
    left: calc(50% - 50px);
    z-index: 10;
}

.swiper-pagination .swiper-pagination-bullet {
    background: #fff;
    box-shadow: 0 0 10px #000000;
    width: 7px;
    height: 7px;
    display: block;
    border-radius: 7px;
    margin: 0 3px;
}

.swiper-pagination .swiper-pagination-bullet-active {
    background: #3596e0 !important;
}

.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal .modal-content {
    display: block;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 80%;
    max-height: 80%;
    overflow: auto;
}

.modal .close {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    width: 30px;
    height: 30px;
    border-radius: 50px;
    border: 1px solid #2f8adb;
    background: #2f8adb;
}

.modal .close .fa {
    font-size: 1rem;
}

.modal-image {
    height: 100%;
}

/** slider **/
.slider .text p {
    font-size: 14px;
    margin-top: 15px;
    color: #808082;
}

.swiper .imagecontainer {
    height: 400px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.swiper-button-next {
    right: 50px;
}

.swiper-button-prev {
    left: 50px;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 15px;
    color: #808082;
}

/** etnohistoria **/
.etnohistoria {
    min-height: 500px;
    margin-top: -40px;
    display: flex;
    align-items: center;
    /* Color de la expedicion (EXPEDICION_CONFIG.temas); el valor de reserva es el de siempre */
    background: var(--tema-fondo, #dedede);
    padding: 50px 30px;
    color: #58595b;
    line-height: normal;
}

.etnohistoria b {
    color: #000;
    line-height: 40px;
}

.etnohistoria .p-relative {
    position: relative;
}

#EtnoHistoria_Video,
#EtnoHistoria_Video_Palenque {
    margin-top: 20px;
    width: 100%;
    height: 250px;
}

.videoIn {
    width: 100%;
    height: auto;
    display: none;
}

.videoIn:last-child {
    display: block;
}

.unexpanded .etnohistoria::before {
    left: 20px;
    transition: 1s all ease;
}

.etnohistoria .title {
    font-size: 35px;
    margin-bottom: 20px;
}

.etnohistoria .resume {
    font-size: 16px;
}

.etnohistoria .credits .title {
    font-size: 16px;
    margin-bottom: 10px;
}

.etnohistoria .audio__Card {
    position: absolute;
    right: 0;
    top: 0;
    margin-top: 60px;
    padding-right: 0;
    padding-left: 0;
}

.etnohistoria .audio__Card {
    display: flex;
}

.etnohistoria .audio__Card {
    z-index: 1;
}

.etnohistoria .audio__Card .card {
    border: 0;
    background: transparent;
    width: 40vw;
}

.etnohistoria .audio__Card .card-container {
    position: sticky;
    top: 50px;
}

.unexpanded .etnohistoria .audio__Card .card {
    width: 32vw;
    transition: 1s all ease;
    position: relative;
}

.etnohistoria .audio__Card .card .card-content {
    background: var(--tema-bloque, #5b8dad);
    color: #fff;
    text-align: center;
    padding: 10px 20px 20px;
    border: 0;
    border-radius: 10px 0 0 10px;
    position: relative;
}

.etnohistoria .audio__Card .card .card-content::before {
    content: "";
    width: 170px;
    height: 170px;
    background-color: var(--tema-circulo, #036584);
    border-radius: 100%;
    position: absolute;
    left: -120px;
    bottom: -50px;
    z-index: -1;
}

/* Adorno de letras junto a la ficha del punto. La imagen se toma de la variable
   --letras-comunidad, que el JS fija segun la comunidad del punto abierto
   (EXPEDICION_CONFIG.letras). Si la expedicion no la define, se usa letra.svg. */
.etnohistoria .audio__Card .card .card-content::after {
    content: "";
    background-image: var(--letras-comunidad, url(../images/assets/letra.svg));
    /* 'auto 100%' iguala la ALTURA de todas las grafias. Con 'contain' mandaba el lado mas
       largo, asi que una grafia apaisada se veia mas pequena: letras_kt (153x137) quedaba al
       89% de la altura de letras_ig (135x135). La caja es mas ancha que alta para que quepan
       las apaisadas sin recortarse. */
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
    width: 118px;
    height: 100px;
    position: absolute;
    /* Centrado dentro del circulo (::before, de 170px en left:-120 bottom:-50), un poco por
       encima del centro geometrico, que es donde queda mejor a la vista. */
    bottom: -8px;
    left: -94px;
    z-index: 1;
}

.etnohistoria .audio__Card .card .card-content .tab-content {
    opacity: 0.9;
    padding: 10px 30px 20px;
    background: #ffffff61;
    box-shadow: 5px 4px 10px #00000054;
}

.etnohistoria .audio__Card .card .card-content #etnoTabs {
    border-radius: 10px 10px 0 0;
    padding: 0;
    border-bottom: 0;
}

.etnohistoria .audio__Card .card .card-content .nav-tabs li button {
    background: transparent;
    padding-top: 12px;
    border: 0;
    color: #fff;
}

.etnohistoria .audio__Card .card .card-content .nav-tabs li.btnPalenque button {
    background: #cbd962 !important;
    color: #fff;
}

.etnohistoria .audio__Card .card .card-content .nav-tabs li.btnEsp button {
    background: var(--tema-etiqueta, #66462c) !important;
    margin-right: 10px;
    color: #fff;
}

.etnohistoria .audio__Card .card .card-content .tab-content .credit {
    color: #333333;
    margin-bottom: 10px;
}

.etnohistoria .audio__Card .card .title,
.etnohistoria .audio__Card .card .reference,
.etnohistoria .audio__Card .card .credit {
    font-size: 23px;
    line-height: normal;
    margin-bottom: 0;
}

.etnohistoria .audio__Card .card .credit {
    font-size: 20px;
}

.etnohistoria .audio__Card .card .credit .br:last-child {
    display: none;
}

.etnohistoria .AudioEtnico {
    width: 100%;
    margin-top: 20px;
}

/** aspectos historicos **/
.historical__aspects .card {
    width: 70%;
    border: 0;
    background: #f4f7fe;
    font-size: 16px;
    color: #58595b;
    line-height: normal;
    margin: auto;
}

.historical__aspects .card .content-card {
    width: 100%;
    height: 70vh;
    overflow-y: auto;
    padding: 30px 30px;
}

.historical__aspects .sub-title {
    font-size: 15px;
    margin-bottom: 30px;
}

.historical__aspects .title {
    font-size: 35px;
    margin-bottom: 25px;
    line-height: 35px;
}

.historical__aspects .resume {
    margin-bottom: 60px;
}

.historical__aspects .resume:last-child {
    margin-bottom: 0;
}

/** team **/
.team {
    padding-top: 40px;
    padding-bottom: 40px;
    background: #f4f6fc;
}

.team .title {
    color: #000;
    font-size: 35px;
    opacity: 0.7;
    margin-bottom: 20px;
    line-height: normal;
}

.team .credit__item {
    justify-content: center;
    padding: 0 100px;
    width: 80%;
}

.team .credit__item .title {
    margin-top: 30px;
    margin-bottom: 10px;
    font-size: 23px;
    height: 23px;
}

.team .credit__item .icon {
    width: 80px;
    margin: auto;
}

/*intro*/

.tour.popover {
    max-width: 350px !important;
}

.popover[class*="tour-"].orphan.main {
    max-width: 1200px !important;
    width: 400px;
    vertical-align: middle !important;
    border-radius: 0;
    top: calc(25% - 60px) !important;
}

.tour-backdrop {
    opacity: 0.6;
}

.tour-tour-element {
    overflow: hidden;
}

.tour.popover .modal-header {
    padding: 15px;
    padding-bottom: 0;
    text-align: left;
    display: flex;
    justify-content: flex-end;
    border-bottom: 0;
}

.tour.popover .modal-header div {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 10px;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: 0.2;
}

.popover[class*="tour-"] .popover-navigation {
    justify-content: space-between;
}

.popover[class*="tour-"] .popover-navigation *[data-role="prev"].disabled,
.popover[class*="tour-"] .popover-navigation *[data-role="next"].disabled,
.popover[class*="tour-"] .popover-navigation *[data-role="end"].disabled {
    display: none;
}

.tour.popover .contentP {
    flex-wrap: wrap;
    padding: 15px 0 15px;
    align-items: center;
    font-family: "Gill Sans Std";
}

.tour.popover .contentP img {
    padding: 0 15px;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.tour.popover .popover-title {
    background: transparent;
    border-bottom: 0;
}

.tour.popover h2 {
    color: #6445e1;
    text-align: center;
    font-size: 22px;
}

.tour.popover .popover-content {
    font-size: 14px;
    color: #4c4c4c;
    width: 100%;
    text-align: justify;
    line-height: normal;
}

.tour.popover .popover-content .intro__text {
    height: 150px;
    overflow: auto;
}

.tour.popover .popover-content .intro__text {
    padding: 0 10px;
}

.tour.popover .navigation {
    padding: 15px;
    padding-top: 10px;
    border-top: 1px solid #e5e5e5;
}

.tour.popover .btn {
    background-color: #6445e1;
    color: #fff;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 5px;
}

.tour.popover .btn[data-role="end"] {
    border: 1px solid #6445e1;
    color: #6445e1;
    background-color: transparent;
    margin-left: 20px;
}

/*---- home ----*/
#HomeButton {
    position: absolute;
    top: 80px;
    right: 20px;
    z-index: 50;
}

.audio-player2,
.audio-player {
    height: 50px;
    width: 100%;
    max-width: 350px;
    margin: auto;
    color: white;
    font-size: 0.75em;
    display: grid;
    grid-template-rows: 6px auto;
    padding-top: 5px;
}

.audio-player2 {
    margin-top: 20px;
}

.audio-player2 .timeline,
.audio-player .timeline {
    background: #e7e7e7;
    width: 100%;
    position: relative;
    cursor: pointer;
    border-radius: 0.25rem;
}

.audio-player2 .timeline .progress,
.audio-player .timeline .progress {
    background: #1c313a;
    width: 0%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    overflow: visible;
}

.audio-player2 .timeline .progress::after,
.audio-player .timeline .progress::after {
    content: "";
    background: #1c313a;
    width: 15px;
    height: 15px;
    border-radius: 10px;
    position: absolute;
    right: -10px;
}

.audio-player2 .controls,
.audio-player .controls {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}

.audio-player2 .controls > *,
.audio-player .controls > * {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #e7e7e7;
    height: 20px;
    border-radius: 50px;
}

.audio-player2 .controls .toggle-play.play,
.audio-player .controls .toggle-play.play {
    width: 20px;
    height: 20px;
    position: relative;
    display: flex;
    justify-content: center;
}

.audio-player2 .controls .toggle-play.play::after,
.audio-player .controls .toggle-play.play::after {
    content: "";
    cursor: pointer;
    position: absolute;
    left: calc(50% - 3px);
    top: calc(50% - 5px);
    height: 0;
    width: 0;
    border: 5px solid #0000;
    border-left: 9px solid #1c313a;
}

.audio-player2 .controls .toggle-play.pause,
.audio-player .controls .toggle-play.pause {
    height: 10px;
    width: 20px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.audio-player2 .controls .toggle-play.pause:before,
.audio-player .controls .toggle-play.pause:before {
    background: #1c313a;
    content: "";
    height: 10px;
    width: 3px;
    margin-right: 1.5px;
}

.audio-player2 .controls .toggle-play.pause:after,
.audio-player .controls .toggle-play.pause:after {
    margin-left: 1.5px;
    background: #1c313a;
    content: "";
    height: 10px;
    width: 3px;
}

.audio-player2 .controls .time,
.audio-player .controls .time {
    display: flex;
    background: transparent;
}

.audio-player2 .controls .time .current {
    display: none;
}

.audio-player2 .controls .time .divideraudio {
    display: none;
}

.audio-player2 .controls .time > *,
.audio-player .controls .time > * {
    padding: 2px;
    color: #1c313a;
}

.audio-player2 .controls .time > * {
    color: #fff;
}

.audio-player2 .controls .volume-container,
.audio-player .controls .volume-container {
    cursor: pointer;
    position: relative;
    z-index: 2;
    width: 20px;
}

.audio-player2 .controls .volume-container .icono-volumeMedium {
    display: flex;
    align-items: center;
}

.audio-player2 .controls .volume-container .volume-button,
.audio-player .controls .volume-container .volume-button {
    height: 26px;
    display: flex;
    align-items: center;
}

.audio-player2 .controls .volume-container .volume-button .fa-volume-up::before,
.audio-player .controls .volume-container .volume-button .fa-volume-up::before {
    color: #1c313a;
}

.audio-player2 .controls .volume-container .volume-slider,
.audio-player .controls .volume-container .volume-slider {
    position: absolute;
    left: 0px;
    top: 20px;
    z-index: -1;
    width: 0;
    height: 9px;
    background: #e7e7e7;
    transition: 0.25s;
}

.audio-player2 .controls .volume-container .volume-slider .volume-percentage,
.audio-player .controls .volume-container .volume-slider .volume-percentage {
    background: #3596e0;
    height: 100%;
    width: 75%;
}

.audio-player2 .controls .volume-container:hover .volume-slider,
.audio-player .controls .volume-container:hover .volume-slider {
    left: -123px;
    width: 120px;
}

/*---- time line ----*/
.timeline-container {
    width: 100%;
    position: relative;
    margin-bottom: 40px;
}

.timeline-line {
    position: absolute;
    top: calc(50% - 10px);
    width: 100%;
    height: 2px;
    background-color: black;
    overflow: hidden;
}

.timeline-items {
    display: flex;
    position: relative;
    justify-content: flex-start;
    overflow-x: auto;
    padding-top: 30px;
    padding-bottom: 108px;
    /* To allow space for the horizontal scrollbar */
    margin-bottom: -20px;
    /* To offset the extra padding */
    -ms-overflow-style: none;
    /* Hide scrollbar on Microsoft Edge and IE */
    scrollbar-width: none;
    /* Hide scrollbar on Firefox */
    transition: transform 5s ease-in-out;
}

.contenido-time-line {
    background: #eee;
    padding: 10px;
    margin-bottom: 60px;
}

.timeline-item {
    width: 250px;
    height: 260px;
    flex-shrink: 0;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.title-time-line {
    height: 40px !important;
    display: flex;
    align-items: center;
    font-size: 0.9rem;
}

.title-time-line .title-box {
    color: #1f6aac;
    border: 1px solid #1f6aac;
    border-radius: 5px;
    padding: 4px 10px 2px 10px;
}

.contenido-time-line {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    height: 115px !important;
}

.contenido-time-line::before {
    content: "";
    bottom: -25px;
    position: absolute;
    width: 2px;
    height: 20px;
    background: #000;
}

.contenido-time-line::after {
    content: "";
    bottom: -45px;
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid #1f6aac;
    background: #2f8adb;
    border-radius: 20px;
}

.timeline-item > div {
    width: 100%;
    height: fit-content;
    justify-content: center;
    display: flex;
}

.timeline-item-above {
    height: 310px;
    padding-bottom: 300px;
}

.timeline-item-below {
    height: 300px;
    padding-top: 180px;
}

.timeline-item-below .date-time-line {
    margin-top: -40px;
    order: 1;
}

.timeline-item-below .contenido-time-line {
    order: 3;
    margin-bottom: 0;
}

.timeline-item-below .title-time-line {
    margin-bottom: 10px;
    position: relative;
    margin-top: 40px;
    order: 2;
}

.timeline-item-below .contenido-time-line::before,
.timeline-item-below .contenido-time-line::after {
    content: none;
}

.timeline-item-below .title-time-line::before {
    content: "";
    top: -20px;
    position: absolute;
    width: 2px;
    height: 20px;
    background: #000;
}

.timeline-item-below .title-time-line::after {
    content: "";
    top: -40px;
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid #1f6aac;
    background: #2f8adb;
    border-radius: 20px;
}

.time-line-button {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    height: 30px;
    width: 30px;
    border: 2px solid #1f6aac;
    background: #2f8adb;
    transition: all 0.2s ease;
    cursor: pointer !important;
}

.time-line-button:hover {
    background: #fff;
}

.time-line-button i {
    color: #fff;
    cursor: pointer !important;
    transition: all 0.2s ease;
}

.time-line-button:hover i {
    color: #2f8adb;
}

.a .date-time-line {
    color: #1d751b;
}

.b .date-time-line {
    color: #fbd02c;
}

.c .date-time-line {
    color: #ef7c8e;
}

.d .date-time-line {
    color: #bc513e;
}

.e .date-time-line {
    color: #3e89bc;
}

.f .date-time-line {
    color: #c26dbc;
}

.g .date-time-line {
    color: #fc914e;
}

.h .date-time-line {
    color: #1d751b;
}

.i .date-time-line {
    color: #fbd02c;
}

.j .date-time-line {
    color: #ef7c8e;
}

.k .date-time-line {
    color: #3e89bc;
}

/*---- responsive ----*/
@media (max-width: 1024px) {
    .main-row {
        flex-wrap: nowrap;
    }

    .aside {
        width: 30%;
        background: #fff;
    }

    .aside .aside__container {
        padding: 50px 20px;
    }

    .content {
        width: 70%;
    }

    .content.collapseAside {
        width: 100%;
    }

    .content.collapseAside .etnohistoria .audio__Card .card .card-content .tab-content,
    .etnohistoria .audio__Card .card .card-content .tab-content {
        padding: 10px 20px 20px;
    }

    .tour-backdrop {
        max-width: 100%;
    }

    .etnohistoria .audio__Card .card .card-content::before {
        width: 230px;
        height: 230px;
        left: -47px;
        bottom: -47px;
    }

    .collapseAside .container-info .content__tabulador {
        width: 50%;
    }

    .container-info .content__tabulador {
        width: 80%;
    }

    .collapseAside .historical__aspects .card {
        width: 80%;
    }

    .historical__aspects .card {
        width: 80%;
    }

    .collapseAside .swiper .imagecontainer {
        height: 400px;
    }

    .swiper .imagecontainer {
        height: 300px;
    }
}

@media (max-width: 11170px) {
    .aside .logos .d-flex {
        flex-wrap: wrap;
        justify-content: center;
    }

    .aside .logos .igac,
    .aside .logos .ampiicanke .andoke {
        margin-top: 20px;
    }

    .aside .logos .act:last-child {
        margin-top: 20px;
    }

    .btn-info a {
        text-align: center;
    }
}

@media (max-width: 1024px) {
    #mapaActores .tab-content .image-container {
        height: 268px;
    }
}

@media (max-width: 960px) {
    #mapaActores .mapa-modal,
    .historical__aspects {
        width: 85%;
    }
    .content {
        width: 100%;
        position: relative;
    }
    .etnohistoria .audio__Card .card .card-content::before {
        bottom: -27px;
    }
    .etnohistoria .audio__Card .card .card-content .tab-content {
        padding: 10px 10px 10px;
    }
}

@media (min-width: 769px) {
    .mapa-actores-content .bloque-links .expand-width {
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    .aside {
        width: 45%;
    }

    .content.sizer {
        height: inherit;
        position: relative;
    }

    .referentes .container {
        overflow-y: auto;
    }

    .referentes .referentes__item {
        width: 150px;
        min-width: 150px;
    }

    .mapa-actores-content .row {
        display: block;
    }

    .mapa-actores-content .bloque-links,
    .mapa-actores-content .bloque-gallery {
        max-width: 100%;
        width: 100%;
    }

    .mapa-actores-content .bloque-links .expand-width {
        padding-bottom: 10px;
    }

    /* Los grupos quedaban en una fila horizontal: con nombres largos solo se veia uno y los
       demas no se intuian. Ahora se apilan y se muestran al desplegar el selector. */
    /* La fotografia y la ficha del integrante se dejan como en escritorio: la imagen se
       centra y recorta en su contenedor y el nombre va sobre ella. Lo unico propio de
       moviles es el selector de grupos. */

    .mapa-actores-content .bloque-gallery {
        margin-top: 5px;
    }

    .historical__aspects .card::after,
    #mapaActores .tab-content::after {
        width: 73px;
        top: -10px;
        right: -30px;
    }

    .unexpanded .etnohistoria {
        display: block;
    }

    .unexpanded .etnohistoria .audio__Card {
        position: relative;
    }

    .unexpanded .etnohistoria .audio__Card .card {
        width: 40vw;
    }

    .unexpanded .etnohistoria .content_etno_text {
        width: 100% !important;
        max-width: 100%;
    }

    .unexpanded .etnohistoria .audio__Card {
        margin-top: 20px;
    }

    .unexpanded .etnohistoria .audio__Card .p-relative {
        height: auto !important;
        width: 100%;
    }

    .unexpanded .etnohistoria .audio__Card .p-relative .card {
        width: 100%;
    }

    .unexpanded .etnohistoria .audio__Card .card .card-content {
        border-radius: 10px;
    }

    .unexpanded .etnohistoria .audio__Card .card .card-content::after {
        width: 60px;
        height: 60px;
        bottom: -10px;
        left: -20px;
    }

    .etnohistoria .audio__Card .card {
        width: 40vw;
    }

    #EtnoHistoria_Video {
        height: 128px;
    }

    .collapseAside .container-info .content__tabulador {
        width: 80%;
    }

    .container-info .content__tabulador {
        width: 80%;
    }

    .collapseAside .swiper .imagecontainer {
        height: 320px;
    }

    .swiper .imagecontainer {
        height: 320px;
    }

    .collapseAside .historical__aspects .card {
        width: 100%;
    }

    .historical__aspects .card {
        width: 100%;
    }
}

/* --- Mapa de actores en moviles ------------------------------------------------
   Mismo limite (768px) que el resto del layout movil de la plantilla: si aqui se usara
   767.98px, en la medida exacta de 768px quedaria el layout apilado del proyecto pero sin
   el selector de grupos, y la lista volveria a desbordarse. */
@media (max-width: 768px) {
    /* Se abandona flex para la lista de grupos: .nav de Bootstrap trae flex-wrap: wrap y en
       columna repartia los grupos en varias columnas, disparando el ancho (~2700 px) y
       partiendo cada nombre en muchas lineas. Con display: block cada grupo es un bloque que
       ocupa el ancho disponible, sin depender de como resuelva flex el tamano. */
    /* El width va con !important porque el JS deja un ancho en linea calculado para la fila
       horizontal de escritorio; un max-width no basta, solo recorta y no ensancha. */
    .mapa-actores-content .bloque-links .nav-pills {
        display: block !important;
        width: 100% !important;
        max-width: 100%;
    }

    /* La lista flota sobre el contenido en vez de empujarlo: al desplegarla, la fotografia
       se queda donde esta y al elegir un grupo vuelve a verse de inmediato. */
    .mapa-actores-content .bloque-links {
        position: relative;
    }

    .mapa-actores-content .bloque-links .nav-pills-container {
        display: none;
        position: absolute;
        left: 4px;
        right: 4px;
        z-index: 20;
        max-height: 42vh;
        overflow-y: auto;
        overflow-x: hidden;
        margin-top: 4px;
        border: 1px solid #d5d5d5;
        border-radius: 10px;
        padding: 6px;
        background: #fff;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
    }

    .mapa-actores-content .bloque-links .nav-pills-container.desplegado {
        display: block;
    }

    /* Cada grupo ocupa el ancho disponible: antes heredaba el ancho de la fila anterior y el
       nombre se partia en muchas lineas. */
    .mapa-actores-content .bloque-links .nav-link {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        margin: 0 0 4px;
        padding: 8px 12px;
        white-space: normal;
        overflow-wrap: break-word;
        text-align: left;
        line-height: 1.3;
        border-radius: 8px;
    }

    .mapa-actores-content .bloque-links .nav-link:last-child {
        margin-bottom: 0;
    }

    /* Boton que abre la lista de grupos: muestra cual esta activo */
    .mapa-actores-content .selector-grupo {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 9px 14px;
        border: 1px solid #2f8adb;
        border-radius: 22px;
        background: #fff;
        color: #2f8adb;
        font-family: "Gill Sans Std", Arial, sans-serif;
        font-size: 0.95rem;
        line-height: 1.25;
        text-align: left;
        cursor: pointer;
    }

    .mapa-actores-content .selector-grupo__texto {
        flex: 1;
    }

    .mapa-actores-content .selector-grupo__flecha {
        flex: none;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid currentColor;
        transition: transform 0.2s ease;
    }

    .mapa-actores-content .selector-grupo[aria-expanded="true"] {
        background: #2f8adb;
        color: #fff;
    }

    .mapa-actores-content .selector-grupo[aria-expanded="true"] .selector-grupo__flecha {
        transform: rotate(180deg);
    }

    .mapa-actores-content .selector-grupo:focus-visible {
        outline: 2px solid #1b5f9c;
        outline-offset: 2px;
    }
}


@media (max-width: 576px) {
    .aside {
        width: 80%;
        z-index: 10000;
    }

    .content.unexpanded,
    .content.position-absolute-elem {
        position: absolute;
    }

    #puebloInfoExpedicion .btn-info,
    #mapaActores .btn-info,
    #bibliografia .btn-info {
        left: auto;
        right: -15px;
    }

    .historical__aspects .card::after,
    #mapaActores .tab-content::after {
        right: -20px;
    }

    #mapaActores .tab-content .image-container {
        height: 250px;
    }

    #mapaActores .title-tab {
        text-align: center;
    }

    .text-center {
        width: 100%;
    }

    .content__banner__title {
        line-height: normal;
    }

    .iframeyoutubeaudio {
        width: 100%;
    }

    .portada {
        width: 100%;
        margin-top: 0;
        padding-left: 30px;
        padding-right: 30px;
    }

    .portada .justify-content-center {
        flex-wrap: wrap;
    }

    .portada .justify-content-center #ID_Cofan {
        margin: 0 10px 20px 10px !important;
    }

    #AudioCOFAN {
        margin-bottom: 20px;
    }

    .iframeyoutube {
        width: 100%;
        height: 222px;
    }

    .iframeyoutube.expand {
        width: 100%;
        height: 222px;
    }

    .popover[class*="tour-"].orphan.main {
        max-width: 370px !important;
        width: 370px;
    }

    .etnohistoria {
        display: block;
    }

    .etnohistoria::before {
        width: 80px;
        height: 90px;
        top: -44px;
        left: 28px;
    }

    .etnohistoria .content_etno_text {
        width: 100% !important;
        max-width: 100%;
    }

    .etnohistoria .audio__Card {
        position: relative;
        right: -30px;
        margin-top: 20px;
    }

    .etnohistoria .audio__Card .card .card-content {
        padding: 20px;
    }

    .etnohistoria .audio__Card .p-relative {
        height: inherit !important;
    }

    .etnohistoria .audio__Card .card {
        width: 100%;
    }

    .etnohistoria .audio__Card .card .card-content::after {
        width: 60px;
        height: 60px;
        bottom: -20px;
        left: -50px;
    }

    .videoIn {
        height: 160px;
    }

    .container-info {
        padding-left: 30px;
        padding-right: 30px;
    }

    .collapseAside .container-info .content__tabulador {
        width: 100%;
    }

    .container-info .content__tabulador {
        width: 100%;
    }

    .container-info {
        height: inherit;
    }

    .slider {
        padding-right: 30px;
        padding-left: 30px;
    }

    .collapseAside .swiper .imagecontainer {
        height: 180px;
    }

    .swiper .imagecontainer {
        height: 180px;
    }

    .team .title {
        padding: 0 30px;
    }

    .team .credit__item .title {
        height: 55px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .team .credit__item {
        padding: 0 20px;
    }

    .popover .contentP {
        display: block !important;
    }

    .popover .contentP img {
        width: 100%;
        margin-bottom: 20px;
    }
}

.leaflet-control-zoomhome a {
    font: bold 18px "Lucida Console", Monaco, monospace;
}

/* --- Controles del mapa: mismo tamano y aspecto -------------------------------------
   Antes convivian botones de 30 px (zoom, inicio) con el de capas de 48 px. Se unifican
   con una variable para que todos midan igual y sean comodos de pulsar. */
:root {
    --control-mapa: 34px;
    --control-icono: 16px;
}

.leaflet-control-zoomhome a,
.leaflet-control-layers-toggle {
    width: var(--control-mapa) !important;
    height: var(--control-mapa) !important;
    line-height: var(--control-mapa) !important;
    box-sizing: border-box;
}

/* El control de capas replica el borde y la sombra de los botones de zoom */
.leaflet-control-layers {
    border-radius: 4px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(0, 0, 0, 0.2);
    background-clip: padding-box;
}

.leaflet-control-layers-toggle {
    background-size: var(--control-icono) var(--control-icono) !important;
    background-position: center !important;
    cursor: pointer;
    /* Evita el retardo de 300 ms y el zoom por doble toque en moviles */
    touch-action: manipulation;
}

.leaflet-control-layers-toggle:focus-visible {
    outline: 2px solid #3fa9f5;
    outline-offset: 1px;
}

a.leaflet-control-zoomhome-in,
a.leaflet-control-zoomhome-out {
    font-size: 20px;
    line-height: var(--control-mapa) !important;
}

.zoomhome-img {
    margin: auto;
    vertical-align: middle;
    display: inline-block;
    height: var(--control-icono);
    width: var(--control-icono);
}

/* Lista de capas: la fila entera es pulsable y el interruptor se ve a simple vista.
   Con el tamano por defecto (13 px) era casi imposible acertarle con el dedo. */
.leaflet-control-layers-list label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 6px 4px;
    min-height: 32px;
    cursor: pointer;
}

.leaflet-control-layers-list label input[type="checkbox"],
.leaflet-control-layers-list label input[type="radio"] {
    width: 17px;
    height: 17px;
    margin: 0;
    flex: none;
    cursor: pointer;
}

.leaflet-control-layers-list label span {
    line-height: 1.2;
}

/* En pantallas tactiles los controles crecen para poder pulsarlos con el dedo */
@media (max-width: 768px), (pointer: coarse) {
    :root {
        --control-mapa: 40px;
        --control-icono: 18px;
    }

    .leaflet-control-layers-list label {
        min-height: 44px;
        padding: 8px 6px;
    }

    .leaflet-control-layers-list label input[type="checkbox"],
    .leaflet-control-layers-list label input[type="radio"] {
        width: 20px;
        height: 20px;
    }

    .leaflet-control-layers-expanded {
        min-width: 160px;
    }
}

/*Legend specific*/
.legend {
    padding: 6px 8px;
    background: white;
    background: rgba(255, 255, 255, 0.8);
    margin-bottom: 15px !important;
    line-height: 24px;
    color: #555;
}

.legend h4 {
    text-align: center;
    font-size: 16px;
    margin: 2px 12px 8px;
    color: #777;
}

.legend span {
    position: relative;
    bottom: 3px;
}

.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin: 0 8px 0 0;
    opacity: 0.7;
}

.legend i.icon {
    background-size: 18px;
    background-color: rgba(255, 255, 255, 1);
}

/* --- Leyenda interactiva: cada entrada filtra el mapa y la lista --------------------- */
.legend-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 3px 4px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.legend-item span {
    bottom: 0;
}

.legend-item i {
    float: none;
    flex: none;
    border-radius: 3px;
    transition: opacity 0.15s ease;
}

.legend-item:hover {
    background: rgba(0, 0, 0, 0.06);
}

.legend-item:focus-visible {
    outline: 2px solid #3fa9f5;
    outline-offset: 1px;
}

/* Categoria activa: se resalta; las demas se atenuan para que el foco quede claro */
.legend-item.activo {
    background: rgba(0, 0, 0, 0.08);
    font-weight: 600;
}

.legend-item.activo i {
    opacity: 1;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
}

.legend-item.atenuado {
    opacity: 0.45;
}

.legend-reset {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 3px 4px;
    border: 0;
    border-top: 1px solid #e0e0e0;
    border-radius: 0;
    background: transparent;
    font: inherit;
    font-size: 0.92em;
    color: #0069b3;
    text-align: left;
    cursor: pointer;
}

.legend-reset:hover {
    text-decoration: underline;
}

.legend-reset:focus-visible {
    outline: 2px solid #3fa9f5;
    outline-offset: 1px;
}

/* Elementos ocultos por el filtro */
.marcador-oculto {
    display: none !important;
}

.expediton__terms__list ol li.item-oculto {
    display: none;
}

/* Con filtro activo la lista se numera con el ID real del punto, para que siga coincidiendo
   con el numero del marcador en el mapa (el contador de CSS solo cuenta los visibles). */
.expediton__terms__list ol[data-filtrado] li:before {
    content: attr(data-id);
}

/* Texto solo para lectores de pantalla */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .legend-item,
    .legend-item i {
        transition: none;
    }
}

.leaflet-control-minimap {
    margin-bottom: 30px !important;
}