.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;
}

/* Clase neutra para el logo propio de la comunidad de cada expedicion, que se declara
   en EXPEDICION_CONFIG.contenido.logos. Las clases de al lado llevan el nombre de una
   expedicion concreta por herencia; esta sirve para todas y evita seguir anadiendo una
   por cada pueblo. */
.aside .logos .comunidad {
    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 media/assets/. */
    background: url(../media/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,
#vocabulario {
    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(../media/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,
#vocabulario .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;
}

/* El <video> se dimensiona igual que el iframe: la expedicion decide si el punto trae
   un embebido de YouTube o un mp4 del propio sitio, y la ficha tiene que verse igual
   en los dos casos. La caja es 16:9 (560x315) y los mp4 tambien, asi que `contain` no
   recorta nada; esta por si alguno llega con otra proporcion. */
.iframeyoutube iframe,
.iframeyoutube video {
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.iframeyoutube video {
    object-fit: contain;
    background-color: #000;
    display: block;
}

.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;
}

/* El circulo de color detras de la ficha. En horizontal su centro cae en el borde
   izquierdo de la tarjeta; en vertical se sube 22 px sobre la esquina, de modo que por
   debajo asoman 88 px de los 110 que tendria centrado del todo. Centrado exacto bajaba
   demasiado y se metia en el bloque siguiente en cuanto el texto del punto era corto.
   La grafia se mueve con el: va centrada en el mismo punto. */
.etnohistoria .audio__Card .card .card-content::before {
    content: "";
    width: 220px;
    height: 220px;
    background-color: var(--tema-circulo, #036584);
    border-radius: 100%;
    position: absolute;
    left: -110px;
    bottom: -88px;
    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.

   La caja mide lo mismo en todas las expediciones. La uniformidad no la da esta
   regla sino el lienzo comun de las grafias: normalizar_letras.py las deja a todas
   en un lienzo de 205 de alto con la baldosa de las letras ocupando los 100
   centrales, asi que 'auto 100%' pone la baldosa siempre del mismo tamano (95 px de
   alto) y a la misma altura, sea cual sea el adorno que la acompane —el guacamayo de
   Andoke, la palmera de Providencia—. Sin ese lienzo comun esta misma regla daba
   baldosas de 85 px en Sibundoy y de 58 en Andoke, a alturas distintas.

   Se conserva 'auto 100%' en vez de 'contain' porque iguala la ALTURA: 'contain'
   manda por el lado mas largo, y la baldosa del Cofan es vertical mientras las demas
   son apaisadas. La caja es mas ancha que la grafia mas ancha ya escalada (160 px)
   para que ninguna se recorte. */
.etnohistoria .audio__Card .card .card-content::after {
    content: "";
    background-image: var(--letras-comunidad, url(../media/assets/letra.svg));
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
    width: 168px;
    height: 196px;
    position: absolute;
    /* Centrada en el mismo punto que el circulo. Como el lienzo canonico reserva mas
       aire arriba (65) que abajo (40) para el adorno, se centra el LIENZO y no la
       baldosa: asi el dibujo entero queda equilibrado sobre el circulo; centrando la
       baldosa el conjunto se iba hacia arriba y dejaba un hueco de color vacio abajo.
       El -76 acompana al -88 del circulo (22 px mas arriba que el centrado exacto). */
    bottom: -76px;
    left: -84px;
    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;
}

/* Aviso de las expediciones cuyas vinetas cambian solo la grabacion (Palenque). Va
   sobre el bloque de la tarjeta, que es de color, asi que el texto es blanco y algo
   apagado: tiene que leerse sin competir con las vinetas ni con el video. */
.etnohistoria .audio__Card .card .card-content .etno-tab-nota {
    margin: 0;
    padding: 6px 30px 0;
    font-size: 12px;
    line-height: 1.35;
    color: #fff;
    opacity: 0.8;
}

.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;
}

/* Credito del registro audiovisual. Es una CITA, no un titulo: en el Cofan --la unica
   expedicion que lo rellena-- son dos lineas de "Audio Etnohistoria Casa del Yage.
   (Chapal Y., 2022)" que a 20 px y centradas se comian la tarjeta y tapaban al video.
   Va pequeno, alineado a la izquierda y en blanco apagado, que es lo que se lee bien
   sobre el color de la tarjeta; el #333 de antes quedaba casi ilegible encima. */
.etnohistoria .audio__Card .card .card-content .tab-content .credit {
    font-size: 12px;
    line-height: 1.35;
    text-align: left;
    color: #fff;
    opacity: 0.85;
    margin: 0 0 8px;
}

/* Sin credito no debe quedar hueco: en ocho de las nueve expediciones va vacio. */
.etnohistoria .audio__Card .card .card-content .tab-content .credit:empty {
    display: none;
}

.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%;
    }

    .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 .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;
    }

    /* En pantalla estrecha la ficha ocupa casi todo el ancho y a su izquierda solo
       quedan entre 30 y 60 px, asi que el circulo apenas asoma. Es la unica anchura
       donde no puede mantenerse la proporcion de la version de escritorio. */
    .etnohistoria .audio__Card .card .card-content::before {
        width: 230px;
        height: 230px;
        left: -47px;
        bottom: -27px;
    }

    /* La caja de la grafia se encoge, pero con el lienzo canonico de 205 de alto hay
       que pedir 110 px de caja para que la baldosa mida sus ~54 px: con los 60 px de
       antes se quedaria en 29. */
    .unexpanded .etnohistoria .audio__Card .card .card-content::after {
        width: 100px;
        height: 110px;
        bottom: -6px;
        left: -35px;
    }

    .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,
    #vocabulario .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: 100px;
        height: 110px;
        bottom: -6px;
        left: -35px;
    }

    .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;
}

/* --- Cromado del mapa: aspecto actual ------------------------------------------------
   Los controles venian con el aspecto por defecto de Leaflet: borde negro translucido
   de 2 px y una sombra dura. Sobre una ortofoto oscura eso se ve pesado y anticuado.
   Se sustituye por tarjetas limpias: sin borde, esquinas mas redondeadas y una sombra
   en dos capas (una fina de contacto y otra difusa), que es lo que da sensacion de
   relieve sin ensuciar la imagen. No se tocan tamanos ni comportamiento tactil. */

.leaflet-bar,
.leaflet-control-zoomhome,
.leaflet-control-layers {
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.18), 0 6px 16px rgba(16, 24, 40, 0.16) !important;
    overflow: hidden;
    background-clip: padding-box;
}

.leaflet-bar a,
.leaflet-control-zoomhome a,
.leaflet-control-layers-toggle {
    border: none !important;
    background-color: #fff;
    color: #3b4252;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Separador tenue entre botones apilados, en vez del borde completo de Leaflet. */
.leaflet-bar a + a,
.leaflet-control-zoomhome a + a {
    border-top: 1px solid rgba(16, 24, 40, 0.08) !important;
}

.leaflet-bar a:hover,
.leaflet-control-zoomhome a:hover,
.leaflet-control-layers-toggle:hover {
    background-color: #eef1f6;
    color: #10141a;
}

/* Leyenda: misma tarjeta que los controles. El fondo semitransparente se apoya en un
   desenfoque para que el texto siga legible sobre cualquier zona de la ortofoto. */
.legend {
    padding: 12px 14px !important;
    background: rgba(255, 255, 255, 0.86) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.18), 0 6px 16px rgba(16, 24, 40, 0.16);
    line-height: 22px;
    color: #3b4252;
}

.legend h4 {
    color: #5a6472;
    letter-spacing: 0.01em;
}

/* Las muestras de color pasan de cuadrados a fichas redondeadas, que es lo que
   diferencia de un vistazo la leyenda del mapa que hay detras. */
.legend i {
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.12);
}

/* Minimapa: se le da el mismo lenguaje que al resto del cromado. */
.leaflet-control-minimap {
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.18), 0 6px 16px rgba(16, 24, 40, 0.16) !important;
    overflow: hidden;
}

/* La atribucion, discreta y a juego con las tarjetas. */
.leaflet-control-attribution {
    background: rgba(255, 255, 255, 0.82) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 8px 0 0 0;
    padding: 3px 8px !important;
    color: #5a6472;
}