/**********************
Colores
--------
Gris
#c1c2c2

Verde
#59ba5d

Azul
#17345c


*************************/
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/*Fonts*/
/* Webfont: playfair */
@font-face {
    font-family: 'playfair';
    src: url('../fonts/playfairdisplay-regular-webfont.woff2') format('woff2'), url('../fonts/playfairdisplay-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'playfair';
    src: url('../fonts/playfairdisplay-italic-webfont.woff2') format('woff2'), url('../fonts/playfairdisplay-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'playfair';
    src: url('../fonts/playfairdisplay-bold-webfont.woff2') format('woff2'), url('../fonts/playfairdisplay-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato */
@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
    url('../fonts/Lato-Regular.woff') format('woff');
    /* Modern Browsers */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Semibold.woff2') format('woff2'), /* Modern Browsers */
    url('../fonts/Lato-Semibold.woff') format('woff');
    /* Modern Browsers */
    font-style: normal;
    font-weight: bold;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Light.woff2') format('woff2'), /* Modern Browsers */
    url('../fonts/Lato-Light.woff') format('woff');
    /* Modern Browsers */
    font-style: normal;
    font-weight: lighter;
    text-rendering: optimizeLegibility;
}

html{
    font-size: 15px;
    overflow-y: auto;
}

body, html{
    margin: 0;
    padding: 0;
}
body, input{
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    font-weight: normal
}

h1,h2,h3{
    font-family: 'playfair';
    font-weight: normal;  
}

.green-right-border{
    border-right: 2px solid #59ba5d;
}


@media only screen and (max-width:700px){

    .no-border-right-xs{
        border-right: 0;
    }
    .green-bottom-border-xs{
        border-bottom: 2px solid #59ba5d;
    }

}
.text-shadow-1{
    text-shadow: 3px 4px 6px #000;
}
.no-padding{
    padding: 0!important;
}
.no-margin{
    margin: 0!important;
}

.hide{
    visibility: hidden;
    display: none!important;
}

@media only screen and (max-width:700px){
    .no-padding-xs{
        padding: 0!important;
    }
}

/*Main background*/
.bg{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    transform: scale(100%,100%);
    background-image: url(../img/bg.svg);
    background-image: none, url(../img/bg.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.logo{
    width: 35px;
    height: 50px;
    background-image: url(../img/logo.svg);
    background-repeat: no-repeat;
    display: block;
}

.logo.blue{
    background-image: url(../img/logo-blue.svg);
}

.home{
    display: block;
    width: 34px;
    height: 40px;
    position: absolute;
    top: 5%;
    right: 3%;
}
.home .home-icon {
    display: block;
    width: 100%;
    height: 100%;
    fill: #fff;
    -webkit-transition: all .12s ease-in;
    -moz-transition: all .12s ease-in;
    transition: all .12s ease-in;
}
.home:hover .home-icon{
    fill:#59ba5d;;
}

/*Nav content home icon*/
.nav-content .logo{
    left: auto;
    right: 11%;
    position: absolute;
    top: 5%;
}

@media only screen and (min-width:700px){
    .logo.blue{
        width: 40px;
    }

    .nav-content .logo{
        left: 2%;
        right: auto;
        position: absolute;
        top: 2%;
    }
    
}


/*Main Nav*/
.main-nav{
    display: flex;
    z-index: 1000;
    width: 100%;
    height: 100%;
    transform: translateY(60px);
    position: fixed;
    background: rgba(193, 193, 193, 0.9);
    -webkit-transition: all .1s ease;
    -moz-transition: all .1s ease;
    transition: all .1s ease;
    overflow: visible;
}

.main-nav.closed{
    transform: translateY(100%);    
}


.main-nav .nav-content{
    padding:10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* width: 100%;
    height: 100%;
    padding: 10% 20%;
    position: absolute; */
}

.main-nav .nav-content.with-accordion{
    padding: 5% 0 20px 50px;
}

.main-nav .bar{
    background: #59ba5d;
    position: absolute;
    top:0;left:0;right: 0;
    height: 60px;
    display: flex;
    justify-content: space-around;
    align-items: center;    

    transform: translateY(-60px);
}

.main-menu{
    margin: 0;
    padding: 0;
}
.main-nav .bar .action{
    width: 40px;
}

.main-nav .bar .action a {
    width: 100%;
    height: 100%;
    display: block;
}


.main-nav .bar .circle{
    width: 15px;
    height: 15px;
    background: #fff;
    border-radius: 50px;
}

@media only screen and (min-width:700px){

    .logo{
        position: absolute;
        top: 40px;
        right: 0;left: 0;
        margin: auto;
    }

    .main-nav{
        width: 50%;
        position: absolute;
        transform: translateX(0);

    }
    
    .main-nav.closed{
        transform: translateX(-100%);

    }

    .main-nav .bar{
        transform: translateX(90px);

        background: #59ba5d;
        width: 90px;
        height: 100%;
        position: absolute;
        right: 0; top: 0; left:auto; bottom:0;
    }

    .main-nav .nav-content{
        width: 100%;
        height: 100%;
        padding: 12% 8% 4% 8%!important;
        position: absolute;
    }

    .main-nav .bar .action {
        position: relative;
        /* top: 50%;
        transform: translateY(-50%); */
        right: 0;
        margin: auto;
        left: 0;
    }

    .main-nav .bar .circle{
        position: absolute;
        bottom: 40px;
        left: 0; right: 0;
        margin: auto;
    }
        
}



/* @media only screen and (min-width:700px) and (max-width:1200px) {
    .main-nav .nav-content {
        padding: 10% 8%;
    } 
} */


.menu-icon {overflow: visible}
.menu-icon rect{fill:#fff;}

ul.main-menu{
    margin: 0;
    font-family: 'playfair', 'Times New Roman', Times, serif;
    font-weight: normal;
    list-style: none;
}

ul.main-menu li{border-top:2px solid #17345c;}
ul.main-menu li:last-child{border-bottom: 2px solid #17345c;}
ul.main-menu li a{
    display: block;
    padding: 15px 10px;
    margin: 10px 0;
    color: #17345c;
    text-decoration: none;
    font-size: 1.8rem;
    font-family: 'playfair';  

    -webkit-transition: all .1s ease;
    -moz-transition: all .1s ease;
    transition: all .1s ease;  
    position: relative; 
    overflow: hidden; 
}

ul.main-menu li a::before{
    content:'';
    position: absolute;
    top:0;left: 0;right: 0;bottom: 0;
    background-color: rgba(89, 186, 93);
    background-color:rgba(89, 186, 93, 0.53); 
    transform: translateX(-100%);
    -webkit-transition: all .1s ease-in;
    -moz-transition: all .1s ease-in;
    transition: all .1s ease-in;     
    display: block;
    z-index: -1;
}

ul.main-menu li a.active{font-style: italic;}
ul.main-menu li a:hover{font-style: italic;}


ul.main-menu li a:hover:before, ul.main-menu li a.active:before{
    transform: translateX(0);
}

/*Section containers*/
.main{
    display: flex;
    width: 100%;
    height: 100vh;
    flex-direction: column;
    position: relative;
    overflow-y: auto;
    padding-bottom: 60px;
    overflow-x: hidden;    
    scrollbar-gutter: stable;
}

.welcome{
    justify-content: center;
    align-items: center;  
}
.content {
    padding: 5% 2% 70px;
    font-size: 1.1rem;
    color: #fff;
    position: relative;
}



@media only screen and (min-width:700px){
    .main{
        padding-left: 120px;
        padding-bottom: 0;
    }

    .main .welcome-container {
        width: 50%;
        height: auto;
    }    

    .content{
        padding: 2% 8% 4% !important;
        overflow-x: hidden;
    }
}


/*Back arrow*/
.back{
    display: block;
    width: 50px;
    height: 65px;
    border-bottom: 8px solid;
    padding-bottom: 20px;
    -webkit-transition: all .15s ease;
    -moz-transition: all .15s ease;
    transition: all .15s ease;        
}

.back svg{
    -webkit-transition: all .12s ease-in;
    -moz-transition: all .12s ease-in;
    transition: all .12s ease-in;
}

.back.white{border-bottom-color: #fff;}
.back.blue{border-bottom-color: #17345c;}

.back.white svg{fill: #fff;}
.back.blue svg{fill:#17345c;}
.back.white:hover{border-bottom: 8px solid #59ba5d;}
.back.blue:hover{border-bottom: 8px solid #59ba5d;}

.back.white:hover svg{
    fill:#59ba5d;
}

@media only screen and (min-width:700px){
    .back{
        width: 60px;
        height: 80px;
     
    }
}

/*Welcome*/
.welcome-container{
    width: 80%;
    height: auto;
}
.welcome-text{position: relative;}
.welcome-text::before {
    content: '';
    position: absolute;
    left: 0; top: 0; right: 0;bottom: 0;
    display: block;
    z-index: 2;
}

/*Search*/
.search-container {
    display: flex;
    margin-top: 30px;
}

/* .search {
    height: 50px;
    padding: 0 2%;
    border: 0;
    width: 100%;
    color: #17345c;
    font-size: 2rem;
    font-family: 'playfair';
    font-style: italic;
} */

.search-button {
    background-color: #59ba5d;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-content: center;
    -webkit-transition: all .1s ease;
    -moz-transition: all .1s ease;
    transition: all .1s ease;
}

.search-button:hover{background-color: #439646;}
.search-button:active{transform: scale(0.95, 0.95)}
.search-icon{
    background-image: url(../img/lupa.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: 85%;
    height: auto;
}

/*Square grid*/
.image-item > div {
    margin-bottom: 25px;
}
.square {
    width: 100%;
    height: 0;
    padding-bottom: 100%; 
    overflow: hidden;
    position: relative;
}

.document{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 5px;
    font-family: 'playfair';
    font-weight: normal;
    display: block;
    font-size: 1rem;
    padding: 5px;
}

.document > a{
    display: block;
    background-size: cover;
}


.document .square > div{
    text-decoration: none;
    color:#fff;
    position: absolute;
    padding: 10%;
    bottom:0;left:0; right: 0;
    background-color: rgb(89, 186, 93);
    background-color: rgba(89, 186, 93, 0.53);    
    display: flex;
    justify-content: center;
    flex-direction: column;    
    -webkit-transition: transform .1s ease-in;
    -moz-transition: transform .1s ease-in;
    transition: transform .1s ease-in;
}
.document:hover .square > div{transform: translateY(0);}
.document .description{display: block;}
.document .year{display: block;}



@media only screen and (min-width:700px){
    .document{
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        margin-bottom: 0;
        font-family: 'playfair';
        font-weight: normal;
        display: block;
        font-size: 1rem;
        padding: 14px;
    }    

    .document .square > div{
        top:0;
        transform: translateY(100%);
    }
    .document:hover .square > div{transform: translateY(0);}

}

/*Vertical Tabs*/
ol.hashTabber-nav, ol.hashTabber-data {
    list-style: none;
    margin: 0;
    padding: 0;
}
ol.hashTabber-data > li {display: none;}
ol.hashTabber-data > li.active { display: block;}

.v-tabs-nav{text-align: center;}
.v-tabs-nav li{height: auto;}
.v-tabs-nav li.active a,
.v-tabs-nav li a:hover{
    color: #59ba5d;
    -webkit-transition: transform .3s ease-out;
    -moz-transition: transform .3s ease-out;
    transition: transform .3s ease-out;        
}
.v-tabs-nav a{
    text-decoration: none;
    font-family: 'playfair';
    font-weight: bold;
    color: #fff;
    font-size: 1.3rem;
    line-height: 2.3rem;
    -webkit-transition: transform .3s ease-in;
    -moz-transition: transform .3s ease-in;
    transition: transform .3s ease-in;    
}
.v-tabs-content{
    background-color: #091f3a;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    overflow-y: auto;
}
.v-tabs-content li {
    list-style: none;
    font-size: 1.2rem;
    padding: 10px 20px;
}
.v-tabs-content li > ul{padding-left: 5px;}
.v-tabs-content li > ul > li{padding: 0;}

@media only screen and (min-width:700px){
    .v-tabs-nav{text-align: right;}
}



/*Timeline*/

.map-details {
    /* padding-bottom: 50px;
    margin-bottom: 20px; */
}

.tl-map-item {
    display: block;
    padding: 10px;
    outline: none;
    color: #fff;
}

.tl-map-item > div{
    background-size: 200%;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid;      
    background-color: #fff;
    -webkit-transition: all .25s ease-in;
    -moz-transition: all .25s ease-in;
    transition: all .25s ease-in;    
    border-color: transparent;  

}


.tl-map-item > div:hover{
    border-color: #59ba5d;
    /*background-size: 100%;*/
}

.tl-map-item-data {
    position: absolute;
    bottom: 10%;
    left: 5%;
    font-weight: bold;
}

.tl-map-item-data .tl-item-name{
    margin: 0;
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 1rem;
    
}

.tl-map-item-data .tl-item-year{
    border-bottom: 8px solid green;
    padding-bottom: 5px;
    font-size: 1rem;
}

.timeline-years {
    width: 100%;
    height: 160px;
    overflow: hidden;
    display: block;
}

.timeline-years.green .events .slick-list,
.timeline-years.green .tl-event-bullet:before{background-color: #59ba5d;}
.timeline-years.purple .events .slick-list,
.timeline-years.purple .tl-event-bullet:before{background-color:#a69bea;}
.timeline-years.orange .events .slick-list,
.timeline-years.orange .tl-event-bullet:before{background-color:#fbb03b;}
.timeline-years.grey .events .slick-list,
.timeline-years.grey .tl-event-bullet:before{background-color:#b3b3b3;}

.line {
    background: #fff;
    display: block;
    height: 2px;
    position: absolute;
    top: 0;
    left: 30px;
    right: 30px;
    z-index: -1;
}

.documents .slick-slide{
    margin-bottom: 15px;
}
/* .slick-arrow{} */
.slick-arrow{
    background-repeat: no-repeat;
    overflow: hidden;
    background-color: transparent;
    display: block;
    position: absolute;
    z-index: 2;
    width: 100px;
    height: 40px;
    bottom: -148px;
    border: 8px solid transparent;
    border-radius: 2px;
    background-color: rgba(0, 0, 0, 0.45);
    background-position: center;
    -webkit-transition: all .12 ease;
    -moz-transition: all .12 ease;
    transition: all .12 ease;      

}

.slick-arrow:hover{
    cursor: pointer;
}

ul.slick-dots {
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    padding: 0 17px;
    -webkit-transition: all .12 ease;
    -moz-transition: all .12 ease;
    transition: all .12 ease;    
    flex-wrap: wrap;
}

ul.slick-dots li{
    padding: 5px;
}

ul.slick-dots li button {
    border: 0;
    background: #fff;
    font-weight: bold;
    outline: 0;
    height: 40px;
    line-height: 40px;
    width: 40px;
    overflow: hidden;
    border-radius: 32px;
    text-align: center;
    color: #4CAF50;
    -webkit-transition: all .12 ease;
    -moz-transition: all .12 ease;
    transition: all .12 ease;   
}


ul.slick-dots li button:active{
    transform: scale(.8);
}


ul.slick-dots li.slick-active button{
    background: #59ba5d;
    color:#fff;
}


.tl-next-arrow{
    background-image: url(../img/arrow.svg);
    transform: rotate3d(0, 0, 1, 180deg);
    margin: auto;    
    right: 10%;     
}
.tl-next-arrow:active{
    transform: rotate3d(0, 0, 1, 180deg);
    -webkit-transition: all .12 ease;
    -moz-transition: all .12 ease;
    transition: all .12 ease; 
}
.tl-prev-arrow{
    background-image: url(../img/arrow.svg);
    margin: auto;
    left:10%;
}
.tl-prev-arrow:active{  
    -webkit-transition: all .12 ease;
    -moz-transition: all .12 ease;
    transition: all .12 ease;     
}



.slick-disabled{visibility: hidden;}
.tl-event-bullet {
    outline: 0;
    font-size: 18px;
    text-align: center;
    margin-top: 20px;
    position: relative;
    height: 60px;
}
.tl-event-bullet:before{
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    top: -28px;
    left: 0;
    right: 0;
    margin: auto;
    /* background: #59ba5d; */
    border-radius: 60px;
}

.tl-event-bullet .tl-event-name{
    margin: 0;
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    
}

.tl-event-bullet .tl-item-year{
    border-bottom: 8px solid green;
    padding-bottom: 5px;
    font-size: 1.17em;
}
.events{
    overflow: hidden;
    padding-top: 20px;
}

.events .slick-list {
    /* background-color: #59ba5d; */
    height: 4px;
    overflow: visible;
}

.centuries{
    list-style: none;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    font-size: 1rem;
}

.centuries-container {
    display: block;
    position: relative;
    padding: 0;
    margin-top: 30px;
    margin-bottom: 30px;
}

.centuries:before{
    /* content: ''; */
    background: #fff;
    height: 2px;
    display: block;
    top: 2px;
    width: 80%;
    position: absolute;
}

.centuries .century{
    display: inline-block;
    position: relative;
    text-align: center;
    padding-top: 18px;
    color: #fff;
    text-decoration: none;    
}

.centuries .century:after{
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    margin: auto;
    background: #59ba5d;
    border-radius: 60px;
}
.centuries .century:nth-child(2):after{background: #a69bea;}
.centuries .century:nth-child(3):after{background: #fbb03b;}
.centuries .century:nth-child(4):after{background: #b3b3b3;}

.centuries .current:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 49.5%;
    padding: 1.3em;
    background-color: #fff;
    border-radius: 50%;
    opacity: 0;
    z-index: -1;
    animation-name: animation-timeline-current;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
  }

@media only screen and (min-width:700px){
    .map-details {
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .tl-next-arrow{
        right: -65px;
    }
    
    .tl-prev-arrow{
        left: -65px;
    }

    .slick-arrow{
        width: 60px;
        height: 0;
        padding-top: 60px;
        top: 0;
        bottom: 0;    
        background-color: transparent;
        border:none;    
    }
    .documents .slick-slide{
        margin-bottom: 0;
    }    

    .image-viewer-container{
        align-items: inherit;
    }

    .tl-map-item-data .tl-item-name{
        font-size: 2rem;
    }
    .tl-map-item-data .tl-item-year{
        font-size: 2rem;
    }    

    .timeline-years{
        height: 100%;
    }    
}
/*Image viewer*/
.image-viewer-container{
    width: 100%;
    height: 100%;
    text-align: center;
    background: #fff;
    position: relative;
    display: flex;
    align-items: center;
}

.image-viewer-container a{
    width: 100%;
}

.image-viewer-container > a > img{
    max-height: 100%;
    max-width: 100%;
    background: rgba(0, 0, 0, 0.6);
}

.map-preview {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: rgba(23, 52, 92, 0.65);
    cursor: move;
    display: none;
    overflow: hidden;
}

.map-preview.open{
    display: block;
}

span.close-modal {
    display: block;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 3%;
    right: 3%;
    background: #59ba5d;
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;       
}
span.close-modal path{
    fill:#fff;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;     
}

span.close-modal:hover, span.close-modal:active{
    cursor: pointer;
    transform: scale(.95)
}

span.close-modal:active{
    cursor: pointer;
    transform: scale(.8)
}

span.close-modal:hover path{
    fill:#17345c;
}


span.close-modal:hover{}


@media only screen and (min-width:700px){

    .image-viewer-container{
        align-items: inherit;
    }
}

/**
* Accordion
-----------------------------*/
.accordion {
    width: 100%;
    list-style: none;
    padding: 0;
    display: block;
}


h1.doc-name{
    text-transform: uppercase;
    color: #17345c;
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 1.8rem;
}

.accordion .link{
    font-family: 'playfair';
    color: #17345c;
    border-top: 2px solid #17345c;
    padding: 20px 0;
    font-size: 1.5rem;
    cursor: pointer;
    display: block;
    position: relative;
    overflow: hidden;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;    
} 

.accordion .link::before{
    content:'';
    position: absolute;
    top:0;left: 0;right: 0;bottom: 0;
    background-color: rgba(89, 186, 93);
    background-color:rgba(89, 186, 93, 0.53); 
    transform: translateX(-100%);
    -webkit-transition: all .1s ease-in;
    -moz-transition: all .1s ease-in;
    transition: all .1s ease-in;     
    display: block;
    z-index: -1;        
}

.accordion li.open .link::before{transform: translateX(0);}
.accordion li:last-child .link { border-bottom: 0; }

/* .accordion li.open .link { color: #b63b4d; } */

.accordion-container {
    overflow-y: hidden;
    padding-bottom: 70px;
    left: -30px;
    position: relative;    
    /* height: 65%; */
}    
.accordion .accordion-content {
    display: none;
    padding: 20px 0px;
    font-size: 18px;
    color: #000000;
}

.mCSB_inside>.mCSB_container {
    margin-right: 0;
    margin-left: 30px;
}

.mCSB_scrollTools {
    left: 0;
    right: auto;
    border: 2px solid #17345c;
    border-radius: 60px;
    width: 10px;
}

.mCSB_scrollTools .mCSB_draggerRail{
    background-color: transparent;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    width: 100%;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {  
    background-color: #59ba5d;
}
    
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar:hover{
    background-color: #17345c;
}
@media only screen and (min-width:700px){
    .accordion-container {
        padding-bottom: initial;
    }


    h1.doc-name{
        font-size: 38px;
    }
        
}

@keyframes animation-timeline-current {
    from {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}


/* PRoyectos */
.projects-container {
    width: 85%;
}



/*Ajustes css*/
/*Fuente altas*/
.document .description, .document .year {
    font-family: 'Lato', Arial, Helvetica, sans-serif;
	font-size: 1.4rem !important;
	text-shadow: 3px 4px 6px #000;
}
/*Tamaño fuente mapas*/
@media only screen and (min-width:700px){
    .tl-map-item-data .tl-item-name{
        font-size: 1.4rem!important;
    }
    .tl-map-item-data .tl-item-year{
        font-size: 1.4rem;
    }       
}


@media only screen and (min-width: 700px){
    .tl-map-item .square > div, .results-item .square > div, .project-item .square > div {
        top: 0;
        transform: translateY(100%);
    }

    .main {
        padding-left: 90px;
        padding-bottom: 0;
    }    

}

.tl-map-item .square > div{
    position: absolute;
    bottom:0;left:0; right: 0;
    background-color: rgb(89, 186, 93);
    background-color: rgba(89, 186, 93, 0.53);    
    -webkit-transition: transform .1s ease-in;
    -moz-transition: transform .1s ease-in;
    transition: transform .1s ease-in;        
}

.tl-map-item .square:hover > div{
    transform: translateY(0);    
}

.tl-map-title-container{
    display: block;
    position: absolute;
    bottom: 18px;
    left: 6px;
}

.results-item .square > div, .project-item .square > div{
    text-decoration: none;
    color:#fff;
    position: absolute;
    padding: 10%;
    bottom:0;left:0; right: 0;
    background-color: rgb(89, 186, 93);
    background-color: rgba(89, 186, 93, 0.53);    
    display: flex;
    justify-content: center;
    flex-direction: column;    
    -webkit-transition: transform .1s ease-in;
    -moz-transition: transform .1s ease-in;
    transition: transform .1s ease-in;  
}
.item-name{
    font-size: 1.4rem !important;
	text-shadow: 3px 4px 6px #000;
	font-family:'Lato',Arial,Helvetica,sans-serif;
	font-weight:bold;
}

.results-item:hover .square > div, .project-item:hover .square > div{transform: translateY(0);}


@media only screen and (min-width:700px){

    .results-item .square > div, .project-item .square > div{
        top:0;
        transform: translateY(100%);
    }
    .results-item:hover .square > div, .project-item:hover .square{transform: translateY(0);}

}
.document{
	font-family:'Lato',Arial,Helvetica,sans-serif!important;
	font-weight:bold!important;
}
.tl-map-title-container {
    display: initial !important;
    position:initial !important;
    bottom: initial !important;
    left: initial !important;
    margin: auto !important;
	top:initial !important;
}

.tl-map-item .square:hover > div{
   display:flex !important;
}
.square > div:hover{
    /*border-color: #59ba5d;*/
    /*border-color:  #59ba5d;*/
    border: 5px solid #59ba5d;
    /*background-size: 100%;*/
}
/* ... (Todo tu CSS original va aquí arriba) ... */

/* ==========================================================================
   INICIO DE MODIFICACIONES Y NUEVOS ESTILOS PARA MAPOTECA HOMEPAGE
   ========================================================================== */

/* MODIFICACIÓN CSS: Ajustar el tamaño de la imagen de bienvenida existente */
.welcome-text img {
    width: 303px;
    max-width: 450px; /* AJUSTA ESTE VALOR para que la imagen "Bienvenido a la Mapoteca Mm" se vea más pequeña como en el diseño deseado */
    height: auto;     /* Mantiene la proporción de la imagen */
    display: block;   /* Permite centrar con margin auto si es necesario */
    margin: 0 auto 30px auto; /* Centra la imagen horizontalmente y añade margen inferior */
}

/* MODIFICACIÓN CSS: Ajustes al contenedor principal de bienvenida para el nuevo layout */
.main.welcome.homepage .welcome-container {
    display: flex;              /* Habilita Flexbox */
    flex-direction: column;     /* Apila los elementos verticalmente */
    justify-content: flex-start;    /* Centra verticalmente el contenido (si el contenedor tiene altura suficiente) */
    align-items: center;        /* Centra horizontalmente los elementos hijos */
    text-align: center;         /* Centra el texto dentro de los elementos hijos */
    width: 100%;                /* Asegura que tome el ancho para centrar contenido */
    min-height: calc(100vh - 60px); /* Altura mínima: 100% del viewport menos la altura de la barra de navegación (ajusta si es necesario) */
    padding-top: 30px;          /* Espacio superior dentro del contenedor */
    padding-bottom: 40px;       /* Espacio inferior dentro del contenedor */
}

/* NUEVO CSS: Estilo para el placeholder del GIF */
.gif-placeholder {
    width: 70%;                 
    max-width: 550px;           
    height: 300px;              /* Altura explícita */
    min-height: 300px;          /* <<< NUEVO: Altura mínima para reforzar */
    flex-shrink: 0;             /* <<< NUEVO: Evita que el elemento se encoja en un contenedor flex */
    background-color: rgba(210, 210, 210, 0.6); 
    border: 1px solid rgba(150,150,150,0.5); 
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;          
    margin-bottom: 40px;        
    color: #444;                
    font-size: 2.5rem;          
    font-family: 'Lato', Arial, Helvetica, sans-serif; /* Asegúrate que Lato esté cargada si la usas aquí */
    font-weight: bold;
}

/* NUEVO CSS: Contenedor para la nueva área de búsqueda */
.new-search-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 600px;           /* Ancho máximo para el área de búsqueda (ajusta si es necesario) */
    margin-left: auto;          /* Centra el bloque horizontalmente */
    margin-right: auto;         /* Centra el bloque horizontalmente */
    padding: 0 15px;            /* Padding lateral para que no toque los bordes en pantallas pequeñas */
}

/* NUEVO CSS: Estilo para el texto descriptivo de la búsqueda */
.search-description {
    font-family: 'Montserrat', Arial, Helvetica, sans-serif; /* Actualizado a Montserrat con fallbacks */
    font-size: 20px;                     /* Actualizado */
    line-height: 24px;                   /* Añadido */
    color: #FFFFFF;                      /* Ya estaba, confirmado */
    text-align: left;                    /* Añadido según tu imagen */
    letter-spacing: 0px;                 /* Añadido */
    font-weight: normal;                 /* Mantenemos normal, puedes cambiarlo si la imagen implica bold, etc. */
    margin-bottom: 15px;                 /* Mantenemos el margen inferior */
    /* El ancho (width: 505px) y alto (height: 24px) que se ven en tu imagen para "Layout Properties" 
       generalmente no los fijaríamos directamente en un párrafo así, ya que el contenido y el flujo 
       responsive suelen determinar esto. El padding del contenedor padre (.new-search-area) 
       y el font-size/line-height influirán en sus dimensiones finales. */
}

/* MODIFICACIÓN CSS (Opcional): Ajustes al .search-container si es necesario dentro de .new-search-area */
.new-search-area .search-container {
    margin-top: 0;              /* Elimina el margen superior si lo tenía, .search-description ya lo maneja */
    width: 100%;                /* Hacer que tome el ancho de .new-search-area */
}

/* MODIFICACIÓN CSS (Opcional): Ajustes al input .search si es necesario */
.new-search-area .search {
    font-size: 1.5rem;          /* Tamaño de fuente dentro del input (ajusta si es necesario) */
    /* Verifica que el padding y height sean consistentes con la imagen deseada */
    /* El .net que se veía en la primera imagen no está en el HTML, por lo que no hay que quitarlo desde aquí.
       Si era un placeholder en el input, el nuevo placeholder lo reemplaza. */
}


/* NUEVO CSS: Estilo para el enlace "Búsqueda avanzada" */

/* Estilos para el input de búsqueda */
.search { /* O si necesitas más especificidad: .new-search-area .search */
    height: 39px;                           
    width: 100%;                            
    padding: 0 12px;                        /* Ajuste ligero de padding horizontal para el texto */
    border: 0;                              
    background-color: #FFFFFF;              
    opacity: 1;                             

    /* NUEVOS ESTILOS PARA EL TEXTO DENTRO DEL INPUT (MONTSERRAT) */
    font-family: 'Montserrat', sans-serif;    /* Fuente Montserrat */
    font-size: 16px;                          /* Tamaño de fuente (aprox 1rem, se ajusta bien a 39px de altura). Puedes cambiarlo. */
    font-style: normal;                       /* Estilo normal (no itálica) */
    color: #333333;                           /* Color de texto oscuro para buena legibilidad (puedes cambiarlo a negro #000000 o tu azul original #17345c si prefieres) */
    font-weight: 400;                         /* Peso normal de Montserrat */
    line-height: normal;                      /* Para centrar verticalmente el texto dentro del input de forma natural */
}

/* Recordatorio de estilos para el contenedor y botón (ya los teníamos) */
.new-search-area .search-container {
    display: flex;
    align-items: center; 
    width: 100%; 
}

.new-search-area .search-button {
    height: 39px; 
    width: 45px;  
    background-color: #59ba5d; 
    display: flex;
    justify-content: center;
    align-items: center; 
}

.new-search-area .search-icon {
    width: 60%; 
    height: 60%;
    background-size: contain; 
}

/* ==========================================================================
   Estilos para Búsqueda Avanzada, Icono Toggle y Recomendados de Mapoteca
   (Revisado para la estructura HTML donde 'Recomendados' es hermano de 'new-search-area')
   ========================================================================== */

/* Enlace "Búsqueda avanzada" (solo texto) */
.advanced-search-link {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    line-height: 19px;
    color: #8FD8E8; 
    letter-spacing: 0px;
    font-weight: 400; /* Peso normal para Montserrat */
    text-decoration: none;
    margin-top: 20px; /* Espacio sobre el enlace */
}

.advanced-search-link:hover,
.advanced-search-link:focus {
    color: #A9E9F8; /* Tono más claro para hover/focus */
    text-decoration: none;
}

/* Icono de flecha/toggle para recomendaciones */
.recommendations-toggle-icon {
    margin-top: 8px; /* Espacio entre el enlace "Búsqueda avanzada" y la flecha */
    cursor: pointer; 
    padding: 5px;    /* Área de click alrededor del icono */
    line-height: 0;  /* Evita espacio extra vertical si el SVG tiene problemas de alineación */
    text-align: center; /* Centra el SVG si es necesario */
}

.recommendations-toggle-icon img {
    width: 24px;  
    height: 24px;
    stroke: #8FD8E8; /* Color del icono, igual que el enlace */
    transition: transform 0.3s ease; /* Para animar la rotación (requiere JS para la clase 'active') */
}

.recommendations-toggle-icon:hover img {
    stroke: #A9E9F8; /* Color del icono en hover */
}

/* Estilos para la sección de Recomendaciones de la Mapoteca */
.mapoteca-recommendations {
    width: 100%; 
    max-width: 1000px; /* <<< IGUAL AL MAX-WIDTH de .new-search-area (ajusta si ese valor es diferente) */
    margin-left: auto;   /* Centra el bloque de la sección */
    margin-right: auto;  /* Centra el bloque de la sección */
    margin-top: 25px;
    padding-top: 20px; 
    padding-bottom: 20px;
    /* padding-left y padding-right pueden ser 0 si quieres que el h2 y la grid usen todo el ancho 
       y manejen sus propios paddings internos, o mantenlos si quieres un margen general.
       Por ahora, los quitaré para dar más control al h2 y a la grid. */
    /* padding-left: 15px;   */
    /* padding-right: 15px;  */
    box-sizing: border-box; 
}

.mapoteca-recommendations h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;                      /* Peso Light */
    font-size: 30px;                       /* Tamaño de fuente */
    line-height: 37px;                     /* Altura de línea */
    color: #FFFFFF;                        /* Color blanco */
    letter-spacing: 3.3px;                 /* Espaciado entre letras */
    text-align: left;                    /* Texto centrado */
    text-transform: uppercase;             /* Mantenemos mayúsculas según el visual */
    
    margin-top: 0;
    margin-bottom: 25px;                   /* Espacio inferior antes de la parrilla de tarjetas */
    
    /* Respecto al width: 642px y el padding: */
    /* Ver la nota abajo sobre el ancho */
    width: 100%; /* Ocupa el ancho disponible de su padre (.mapoteca-recommendations) */
    padding-left: 0; /* Si el texto está centrado, el padding-left individual no es tan relevante */
    padding-right: 0;
    box-sizing: border-box;
}

.recommendations-grid {
    display: flex;
    flex-wrap: nowrap;   /* Las tarjetas en una sola línea */
    gap: 20px;           /* Espacio entre tarjetas */
    overflow-x: auto;    /* Scroll horizontal */
    padding: 5px 15px 20px 15px; /* Padding: arriba, derecha, abajo (para scrollbar), izquierda */
    
    /* Estilos opcionales para la barra de scroll (mejoran la estética) */
    scrollbar-width: thin; /* Para Firefox */
    scrollbar-color: #59ba5d #17345c; /* Pulgar y pista para Firefox (verde y azul de tu paleta) */
}

/* Barra de scroll para Webkit (Chrome, Safari, Edge) */
.recommendations-grid::-webkit-scrollbar {
    height: 8px; 
}

.recommendations-grid::-webkit-scrollbar-track {
    background: rgba(23, 52, 92, 0.3); /* Azul de tu paleta, un poco transparente para la pista */
    border-radius: 4px;
}

.recommendations-grid::-webkit-scrollbar-thumb {
    background-color: #59ba5d; /* Verde de tu paleta para el pulgar */
    border-radius: 4px;
}

.recommendations-grid::-webkit-scrollbar-thumb:hover {
    background-color: #439646; /* Verde más oscuro al pasar el mouse */
}

/* Estilos para la tarjeta de recomendación */
.recommendation-card {
    /* background-color: #0E2340; // Fondo oscuro anterior de la tarjeta */
    background-color: transparent; /* <<< CAMBIO: Hace la tarjeta transparente */
    border-radius: 4px; 
    overflow: hidden; /* Es bueno mantenerlo si las imágenes tienen bordes redondeados o para controlar contenido */
    box-shadow: 0px 0px 6px rgba(0, 35, 91, 0.16);
    
    min-width: 270px; 
    max-width: 300px; 
    flex: 0 0 auto; 
    display: flex; 
    flex-direction: column; 
}

/* Contenedor de la imagen */
.card-image-container {
    /* position: relative; // Ya no es necesario para el overlay */
    line-height: 0;
}

.card-image-container img {
    width: 100%;
    height: 180px; 
    display: block;
    object-fit: cover;
    border-top-left-radius: 4px; /* Redondea las esquinas superiores si la tarjeta tiene borde redondeado */
    border-top-right-radius: 4px;
}

/* Contenedor del año y el enlace EXPLORA (asumiendo fondo transparente) */
.card-meta-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* background-color: rgba(0, 0, 0, 0.65); // Fondo oscuro ELIMINADO */
    padding: 10px 12px; /* Espaciado desde los bordes de la imagen. Ajusta si es necesario. */
    display: flex;
    justify-content: space-between; /* Separa el año (izquierda) y EXPLORA (derecha) */
    align-items: center; /* Centra verticalmente el año y el enlace EXPLORA */
}

/* Estilos específicos para el AÑO */
.card-meta-overlay .year {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;  /* Peso normal (400) para Montserrat */
    font-size: 12px;
    line-height: 15px;
    color: #BEBEBE;     /* Color gris claro especificado para el año */
    letter-spacing: 1.2px;
    text-align: left;
    /* text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); /* Considera si la legibilidad es un problema */
}

/* Estilos para el enlace "EXPLORA" (incluye el ícono y el texto) */
.card-meta-overlay .explore-link {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;                      /* Peso normal (400) */
    font-size: 11px;                       /* Tamaño de fuente especificado */
    line-height: 14px;                     /* Altura de línea especificada */
    color: #85DE89;                         /* <<< NUEVO: Color verde para el texto y el ícono */
    letter-spacing: 1.65px;                /* Espaciado especificado */
    text-transform: uppercase;             /* Convertir a mayúsculas */
    text-decoration: none;
    display: flex;                         /* Para alinear el ícono y el texto EXPLORA horizontalmente */
    align-items: center;                   /* Centra verticalmente el ícono y el texto EXPLORA */
    gap: 5px;                              /* Espacio entre el ícono y el texto "EXPLORA". Ajusta si es necesario. */
}

.card-meta-overlay .explore-link:hover {
    /* Define un estilo para el hover si lo deseas, ej. un verde un poco más brillante */
    color: #A2F5A6; 
    opacity: 0.9;
}

/* Estilos para el ÍCONO junto a EXPLORA */
.explore-icon { 
    width: 17px;                           
    height: 17px;                          
    stroke: currentColor;                  
    stroke-width: 2;                       
}

/* Contenedor de la descripción en la tarjeta */
.card-description {
    padding: 10px 15px 15px 15px;
    /* background-color: #0E2340; // ¿También transparente o un color diferente? */
    background-color: transparent; /* <<< CAMBIO: También transparente, o define otro color si es necesario */
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
}

/* Estilos para el párrafo de descripción dentro de la tarjeta */
.card-description p {
    font-family: 'Montserrat', sans-serif; 
    font-weight: 400;                      
    font-size: 14px;                       
    line-height: 18px;                     
    color: #FFFFFF;                        
    letter-spacing: 0px;                   
    text-align: left; /* Alineado a la izquierda como pediste */
    margin: 0;                             
    opacity: 1;
}

/* ==========================================================================
   FIN de Estilos para Búsqueda Avanzada, Icono Toggle y Recomendados
   ========================================================================== */
/* NUEVO/MODIFICADO: Estilos para el bloque de información de meta (año y EXPLORA) */
.card-meta-info {
    padding: 10px 15px; 
    display: flex;
    justify-content: space-between; /* Año a la izq, EXPLORA a la der */
    align-items: center;
    background-color: transparent; /* Confirmado transparente */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Línea separadora opcional */
    /* Para depurar, añade un borde visible temporalmente: */
    /* border: 1px dashed limegreen;  */
}

/* Estilos específicos para el AÑO (dentro de .card-meta-info) */
.card-meta-info .year {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;  
    font-size: 12px;
    line-height: 15px;
    color: #BEBEBE;     
    letter-spacing: 1.2px;
    /* text-shadow: 1px 1px 1px rgba(0,0,0,0.7); /* Posiblemente necesario */
}

/* Estilos para el enlace "EXPLORA" (dentro de .card-meta-info) */
.card-meta-info .explore-link {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;                      
    font-size: 11px;                       
    line-height: 14px;                     
    color: #85DE89;                         
    letter-spacing: 1.65px;                
    text-transform: uppercase;             
    text-decoration: none;
    display: flex;                         
    align-items: center;                   
    gap: 5px;
    /* text-shadow: 1px 1px 1px rgba(0,0,0,0.7); /* Posiblemente necesario */
}

.explore-icon { 
    width: 17px;                           
    height: 17px;                          
    stroke: currentColor; /* Toma el color #85DE89 del enlace */
    stroke-width: 2;                       
}

.card-meta-info .explore-link:hover {
    color: #A2F5A6; 
    opacity: 0.9;
}
/* ==========================================================================
   FIN DE MODIFICACIONES Y NUEVOS ESTILOS PARA MAPOTECA HOMEPAGE
   ========================================================================== */

   /* ==========================================================================
   INICIO DE ESTILOS ESPECÍFICOS PARA PÁGINA DE RESULTADOS DE MAPAS
   (Versión ENFOCADA en estabilidad del layout y transparencia de tarjetas)
   ========================================================================== */

/* --- LAYOUT GENERAL DE LA PÁGINA DE RESULTADOS --- */
.main.map-results-page {
    padding-left: 90px; 
    display: block; /* Mantenemos el cambio que solucionó el problema de ocultamiento */
    padding-top: 20px;
    padding-bottom: 40px;
}

.map-results-content {
    background-color: transparent; /* Mantenemos transparente como solicitaste */
    color: #fff; 
    padding: 30px 35px 60px;
    width: 100%;
    max-width: 1150px; 
    box-sizing: border-box;
    border-radius: 4px; 
    margin: 0 auto; /* Para centrar .map-results-content */
}

/* --- SECCIÓN SUPERIOR: LOGO, PROMPT, BUSCADOR --- */
/* Esta sección debe fluir normalmente como un bloque */
.results-header-section {
    display: flex;         /* Para alinear el logo y el 'search-area-wrapper' en fila */
    align-items: flex-end; /* Alinea los items por su base si tienen alturas diferentes */
                           /* Puedes probar con 'center' si prefieres una alineación vertical al centro */
    gap: 20px;             /* Espacio entre el logo y el 'search-area-wrapper' */
    margin-bottom: 40px;  /* Espacio debajo de toda la sección del header */
    margin-top: 40px;
}

.results-logo-and-prompt {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.mapoteca-results-logo {
    height: 80px; /* Altura del logo (ajusta según el diseño exacto) */
                  /* La imagen muestra el logo un poco más alto que la barra de búsqueda */
    flex-shrink: 0; /* Evita que el logo se encoja si no hay espacio */
}

.search-area-wrapper {
    display: flex;
    flex-direction: column; /* Apila el texto prompt y la barra de búsqueda verticalmente */
    flex-grow: 1;       /* Permite que este wrapper ocupe el espacio restante */
    /* No necesita padding aquí, la alineación se maneja internamente */
}

.results-search-prompt-text {
    font-family: 'Montserrat', sans-serif; /* Se añade 'sans-serif' como fallback */
    font-weight: normal; /* o 400 */
    font-size: 20px;
    line-height: 24px;
    color: #FFFFFF;
    letter-spacing: 0px;
    text-align: left; /* Aunque suele ser el default para <p> en LTR */
    font-style: normal;
    font-variant: normal; /* Generalmente no es necesario especificarlo si es 'normal' */
    opacity: 1; /* Generalmente no es necesario especificarlo si es '1' */
    margin: 0 0 6px 0; /* Mantenemos el margen inferior que teníamos para separar de la barra */
    /* El margin-left sigue siendo 0 para alinearse con el search-area-wrapper */
}

.results-search-bar {
    display: flex;
    /* background-color: #fff; Ya no es necesario aquí si el input y el botón tienen sus propios fondos
                              o mantenlo si quieres un fondo general para la barra si hay espacios.
                              Para que se vea como XD, donde input y botón están juntos, es mejor que
                              el input tenga su fondo y el botón el suyo. */
    height: 39px; /* ALTURA AJUSTADA SEGÚN XD */
    border-radius: 3px; /* Mantenemos el redondeo general de la barra */
    width: 100%;
    /* Si el input y el botón tienen bordes redondeados individuales,
       el border-radius de .results-search-bar podría no ser visible o necesario. */
}

.results-search-bar .search-input {
    flex-grow: 1;
    border: none; /* Sin borde para el input */
    padding: 0 15px; /* Padding interno */
    font-size: 1rem; 
    font-family: 'Lato', Arial, Helvetica, sans-serif; /* O Montserrat si el texto del input también es Montserrat */
    color: #333; /* Color del texto que se escribe */
    background-color: #FFFFFF; /* FONDO BLANCO DIRECTAMENTE EN EL INPUT SEGÚN XD */
    border-radius: 3px 0 0 3px; /* Redondeo para la esquina izquierda */
    /* La altura será controlada por el contenedor .results-search-bar si el input no tiene padding/border vertical */
}

.results-search-bar .search-input::placeholder {
    color: #888; /* O el color exacto del placeholder si XD lo especifica */
    font-style: normal; 
    /* Si el placeholder debe ser Montserrat, añade:
    font-family: 'Montserrat', sans-serif;
    font-weight: normal; // o el peso especificado
    */
}

.results-search-bar .search-button-action {
    background-color: #58BA5C; /* COLOR DE FONDO ACTUALIZADO SEGÚN XD */
    border: none;
    width: 39px;  /* ANCHO ACTUALIZADO SEGÚN XD */
    height: 39px; /* Alto consistente con la barra y el input */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 0 3px 3px 0; /* Redondeo para la esquina derecha */
    transition: background-color 0.2s ease;
}

.results-search-bar .search-button-action:hover {
    background-color: #439646; /* Puedes mantener este hover o definir uno nuevo si XD lo especifica */
}

.search-icon-results {
    display: inline-block;
    width: 18px; /* Mantener el tamaño del ícono o ajustar si XD lo indica */
    height: 18px;
    background-image: url('../img/lupa.svg'); 
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /* Si el ícono SVG necesita un color específico (ej. blanco), se podría hacer
       si el SVG está inline o si es una máscara. Con background-image, el color
       del SVG ya está definido en el archivo SVG. */
}

/* --- FILTRO POR CATEGORÍAS --- */
.filter-categories-container {
    margin-bottom: 30px; 
    text-align: left;
}

.filter-categories-container .filter-link {
    font-family: 'Montserrat', sans-serif; /* FUENTE ACTUALIZADA */
    font-weight: 300;                      /* PESO ACTUALIZADO (Light) */
    font-size: 30px;                       /* TAMAÑO ACTUALIZADO */
    line-height: 37px;                     /* ALTURA DE LÍNEA ACTUALIZADA */
    letter-spacing: 3.3px;                 /* ESPACIADO ENTRE LETRAS ACTUALIZADO */
    color: #FFFFFF;                        /* COLOR ACTUALIZADO */
    
    text-decoration: none;                 /* Mantener sin subrayado */
    display: inline-block; /* Para que respete el padding/margin y potencialmente un width si fuera necesario,
                               y para que el text-align:center interno funcione si se aplica un width */
    /* Si quieres que el bloque del enlace tenga un ancho fijo y el texto se centre dentro de él: */
    /* width: 448px; */ /* Descomenta si necesitas el ancho fijo de XD */
    /* text-align: center; */ /* Descomenta si el texto debe centrarse DENTRO del bloque del enlace */
    
    transition: color 0.2s ease;           /* Mantener transición de hover */
}

.filter-categories-container .filter-link:hover {
    color: #76d47a; /* Mantener color de hover o ajustar si XD define uno */
}

.filter-categories-container .filter-link .filter-arrow {
    letter-spacing: normal; /* Resetear letter-spacing para la flecha si no se quiere tan espaciada */
    display: inline-block; /* Para asegurar buena alineación vertical con el texto */
    vertical-align: middle; /* Intenta alinear la flecha mejor con el texto */
    opacity: 1;
}

/* --- HEADER DE LA LISTA DE MAPAS --- */
.maps-list-header {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    margin-bottom: 18px;
    margin-top: 0;
}
.section-title { 
    font-family: 'playfair', 'Times New Roman', Times, serif;
    font-size: 1.9rem; 
    color: #fff;
    margin: 0; 
}

/* --- GRID DE MAPAS --- */
.maps-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px; 
    margin-bottom: 22px; 
    /* Dejar que este contenedor crezca naturalmente. No position o z-index aquí. */
}

/* --- TARJETAS DE MAPA INDIVIDUALES (TRANSPARENTES) --- */
.map-card-item {
    background: transparent !important; /* Forzar transparencia */
    border: none !important;
    display: flex;
    flex-direction: column;
    color: inherit; /* Heredar color de texto de .map-results-content (blanco) */
}

.map-card-item * { /* Aplicar a todos los hijos para asegurar que no tomen fondos inesperados */
    background: transparent !important;
    color: inherit; /* Asegurar que el texto herede el color blanco general */
}


.map-card-image-wrapper {
    line-height: 0; 
    margin-bottom: 8px; 
}

.map-card-image-wrapper img {
    width: 100%;
    height: 180px; 
    object-fit: cover; 
    display: block;
    box-shadow: none !important; 
    border-radius: 2px; 
}

.map-card-meta-info { 
    display: flex;
    justify-content: space-between; 
    align-items: center;
    padding: 4px 0; 
    margin-bottom: 6px; 
}

.map-card-meta-info .map-year {
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    font-size: 0.9rem; 
    font-weight: bold;
    color: #dfe9f3; /* Un blanco ligeramente menos intenso */
    text-shadow: none; 
}

.map-card-meta-info .map-explore-link {
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    font-size: 0.8rem; 
    font-weight: bold;
    color: #59ba5d !important; /* Forzar color verde para el enlace */
    text-decoration: none;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 4px;
    text-shadow: none; 
}
.map-card-meta-info .map-explore-link:hover { color: #76d47a !important; }
.explore-icon-svg { 
    stroke: #59ba5d !important; /* Forzar color del ícono */
    width: 14px; 
    height: 14px;
}
.map-card-meta-info .map-explore-link:hover .explore-icon-svg {
    stroke: #76d47a !important;
}


.map-card-description-content {
    padding: 0; 
}

.map-card-description-content p {
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    font-size: 0.8rem; 
    line-height: 1.45;
    color: #b0bec5; 
    margin: 0;
}

/* --- PAGINACIÓN --- */
.pagination-controls {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 0; 
}
.pagination-top { justify-content: flex-end; }
.pagination-bottom { justify-content: flex-end; margin-top: 8px; }

.pagination-controls a {
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    font-size: 0.9rem; 
    color: #e0e0e0 !important; /* Forzar color */
    background-color: transparent !important; /* Forzar transparencia */
    text-decoration: none;
    padding: 5px 9px; 
    border-radius: 3px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    min-width: 32px;
    text-align: center;
    border: 1px solid transparent; 
}
.pagination-controls a:hover:not(.active):not(.disabled) {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: #76d47a; 
    color: #fff !important;
}
.pagination-controls a.active {
    background-color: #59ba5d !important;
    color: #fff !important;
    font-weight: bold;
    border-color: #59ba5d;
}
.pagination-controls a.disabled {
    color: #718096 !important; 
    pointer-events: none;
    border-color: transparent;
}
.pagination-controls a.disabled:hover { background-color: transparent !important; }

/* --- MENSAJE DE NO MAPAS --- */
.no-maps-found {
    text-align: center;
    font-size: 1.1rem;
    padding: 30px;
    color: #a0aec0;
    grid-column: 1 / -1; 
}

/* --- MEDIA QUERIES (Ajustes menores) --- */
@media only screen and (max-width: 1024px) { 
    .maps-grid-container { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .mapoteca-results-logo { height: 38px; }
    .results-search-prompt-text { font-size: 1.1rem; }
    .filter-categories-container .filter-link { font-size: 1.3rem; }
    .section-title { font-size: 1.7rem; }
}

@media only screen and (max-width: 768px) { 
    .map-results-content { padding: 20px; }
    .maps-list-header { flex-direction: column; align-items: flex-start; gap: 8px; }
    .pagination-top { justify-content: flex-start; width: 100%; }
    .results-logo-and-prompt { flex-direction: column; align-items: flex-start; gap: 6px; }
    .mapoteca-results-logo { margin-bottom: 4px; height: 32px; }
    .results-search-bar { height: 40px; }
    .results-search-bar .search-button-action { height: 40px; width: 42px; }
    .search-icon-results { width: 16px; height: 16px; }
}

@media only screen and (max-width: 600px) { 
    .main.map-results-page { padding-left: 0; padding-top: 10px; padding-bottom: 20px; }
    .map-results-content { padding: 15px; }
    .maps-grid-container { grid-template-columns: 1fr; gap: 18px; }
    .section-title { font-size: 1.5rem; }
    .filter-categories-container .filter-link { font-size: 1.15rem; }
    .map-card-image-wrapper img { height: 160px; }
}

.map-results-page .maps-list-header .section-title {
    font-family: 'Montserrat', sans-serif; /* Cambiamos a Montserrat */
    font-weight: 300;                     /* Peso Light */
    font-size: 30px;                      /* Tamaño de fuente especificado */
    line-height: 37px;                    /* Altura de línea especificada */
    color: #FFFFFF;                       /* Color blanco */
    letter-spacing: 3.3px;                /* Espaciado entre letras */
    text-transform: uppercase;            /* La imagen muestra el texto en mayúsculas */
    text-align: left;                     /* Mantenemos alineación izquierda según tu layout visual */
                                          /* (El text-align:center de XD no parece aplicar aquí) */
    margin: 0;                            /* Ya lo tenías, es bueno mantenerlo */
}

.map-results-page hr.custom-divider {
    border: none;
    height: 1px;
    background-color: #FFFFFF;
    opacity: 0.57;
    width: 100%; /* O el ancho específico que prefieras */
    /* max-width: 863px;  Si necesitas limitar el ancho */

    margin-top: 30px;
    margin-bottom: 30px;
}

/* --- Estilos para la Paginación según especificaciones XD --- */

/* Estilos COMUNES para todos los elementos de la paginación (números y flechas si son texto) */
.map-results-page .pagination-controls a,
.map-results-page .pagination-controls span { /* Si usas span para algo */
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    background-color: transparent !important;
    border: none !important;
    color: #FFFFFF !important;
    opacity: 1;
    display: inline-block; /* Para que padding y text-align funcionen bien */
    text-align: center;    /* Centra el texto dentro del enlace/span */
    padding: 5px 8px;      /* Espaciado interno, ajusta para el espaciado visual deseado entre elementos */
    margin: 0 3px;         /* Pequeño margen externo para separar los botones */
}

/* Estilos ESPECÍFICOS para los NÚMEROS de página */
.map-results-page .pagination-controls a.pagination-number {
    font-weight: 300;       /* Peso Light */
    font-size: 20px;        /* Tamaño de fuente */
    line-height: 24px;      /* Altura de línea */
    letter-spacing: 2.2px;  /* Espaciado entre caracteres del número */
    min-width: 30px;        /* Un ancho mínimo para que los números no se vean apretados */
}

/* Estilos para el número ACTIVO (puedes hacerlo más audaz si quieres, XD no lo especifica) */
.map-results-page .pagination-controls a.pagination-number.active {
    font-weight: 700;       /* Ejemplo: hacerlo Bold */
    /* color: #59ba5d; */  /* Ejemplo: cambiar color al verde si se desea destacar más */
}

/* Estilos ESPECÍFICOS para las FLECHAS/CHEVRONS (si usas caracteres < >) */
.map-results-page .pagination-controls a.pagination-arrow {
    font-size: 22px;        /* Tamaño para los caracteres < > */
    font-weight: 600;       /* Hacerlos un poco más gruesos (SemiBold), ya que no podemos simular el "borde" de 2px fácilmente con texto */
    padding: 5px 10px;      /* Ajusta el padding para las flechas */
    vertical-align: middle; /* Para intentar alinear mejor con los números */
}

/* Estilos para elementos DESHABILITADOS (flechas) */
.map-results-page .pagination-controls a.disabled {
    color: #777777 !important; /* Un gris para indicar inactividad */
    pointer-events: none;      /* No clickeable */
    opacity: 0.6;
}

/* Estilos para HOVER (opcional, si quieres un efecto visual) */
.map-results-page .pagination-controls a:not(.active):not(.disabled):hover {
    color: #c1c2c2 !important; /* Un gris más claro en hover */
    /* background-color: rgba(255, 255, 255, 0.1) !important; Opcional: un leve fondo */
}

/* --- Estilos para las TARJETAS DE MAPA según especificación XD --- */
.map-results-page article.map-card-item {
    display: flex;
    flex-direction: column;
    background: transparent !important;
    box-shadow: 0px 3px 6px rgba(0, 37, 91, 0.223); /* Color #00255B con opacidad 22.3% */
    opacity: 0.9;
    color: #FFFFFF; /* Color de texto por defecto para la tarjeta */
    border: none !important;
    height: auto; /* Altura total de la tarjeta es automática */
}

/* Ajustes internos para la tarjeta para aproximarse a la altura total de 244px */
/* (Revisando y ajustando sugerencias anteriores para el contenido de la tarjeta) */

.map-results-page .map-card-image-wrapper {
    margin-bottom: 12px; /* Espacio DESPUÉS de la imagen, ANTES del año/explora. AJUSTA si es necesario. */
    flex-shrink: 0;
}

.map-results-page .map-card-image-wrapper img {
    display: block;
    width: 100%;
    height: 244px;        /* ALTURA DE LA IMAGEN FIJADA A 244px */
    object-fit: cover;
    border-radius: 4px;   /* Bordes redondeados para la imagen */
}

.map-results-page .map-card-meta-info {
    display: flex;
    justify-content: space-between; /* Año a la izquierda, EXPLORA a la derecha */
    align-items: center; /* Alineación vertical */
    padding: 0 4px;      /* Un padding horizontal pequeño si es necesario para que no pegue a los bordes.
                            En XD el texto está un poco indentado respecto a la imagen.
                            Si la imagen tiene 100% de ancho y el texto también, no habrá indentación.
                            Si las tarjetas tienen un padding general, este podría ser 0.
                            Por ahora, un pequeño padding aquí. */
    margin-bottom: 10px; /* Espacio DESPUÉS del año/explora, ANTES de la descripción. AJUSTA. */
    flex-shrink: 0;
}

/* Estilo para el AÑO según XD */
.map-results-page .map-card-meta-info .map-year {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; /* Normal */
    font-size: 12px;
    line-height: 15px;
    color: #BEBEBE;
    letter-spacing: 1.2px;
    text-align: left;
}

.map-results-page .map-card-meta-info .map-explore-link {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; /* Normal, según XD. Si se ve muy delgado, prueba con 600 o 'bold' */
    font-size: 11px;
    line-height: 14px;
    color: #85DE89 !important; /* Verde especificado */
    letter-spacing: 1.65px;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex; /* Para alinear el ícono con el texto */
    align-items: center;
    gap: 5px; /* Espacio entre el ícono y el texto "EXPLORA" */
}

.map-results-page .map-card-meta-info .map-explore-link:hover .explore-icon-svg {
    stroke: #A2F5A6; /* Opcional: cambiar color del ícono en hover */
}

.map-results-page .map-card-meta-info .map-explore-link:hover {
    color: #A2F5A6 !important; /* Un verde más claro para el hover, opcional */
}


.map-results-page .explore-icon-svg { /* El SVG junto a EXPLORA */
    stroke: #59ba5d !important;
    width: 16px;
    height: 16px;
}

.map-results-page .map-card-description-content {
    padding: 0 4px; /* Mismo padding horizontal que .map-card-meta-info para alinear el texto */
                     /* Si la tarjeta tiene un padding general, este podría ser 0. */
}

.map-results-page .map-card-description-content p {
    font-family: 'Montserrat', sans-serif; /* O 'Lato', sé consistente */
    font-weight: 400; /* Normal */
    font-size: 14px;
    line-height: 1.5; /* (14px * 1.5 = 21px por línea) */
    color: #E0E0E0;   /* Gris muy claro */
    margin: 0;
    text-align: left;
    
    /* Truncamiento de texto a 3 líneas */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Para asegurar que haya espacio para al menos 3 líneas visualmente si es posible: */
    /* min-height: calc(1.5em * 3); */ /* (line-height * num_lineas). Puedes probar con o sin esto. */
}

@media only screen and (max-width: 767px) {
    .map-results-page .maps-grid-container {
        grid-template-columns: 1fr;
        gap: 30px; /* Puedes querer más espacio vertical entre tarjetas en móvil */
    }

    .map-results-page .map-card-image-wrapper img {
        height: 200px; /* Imagen un poco menos alta en móvil, o usa aspect-ratio */
    }
    
    .map-results-page .map-card-description-content p {
        -webkit-line-clamp: 4; /* Permitir quizás una línea más de descripción en móvil */
        /* min-height: calc(1.5em * 4); */
    }
}


/* ==========================================================================
   FIN DE ESTILOS ESPECÍFICOS PARA PÁGINA DE RESULTADOS DE MAPAS
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/* NOTIFICACIÓN DE CAMBIOS AL CSS EXISTENTE:                                  */
/* -------------------------------------------------------------------------- */
/* - No se realizaron modificaciones destructivas al CSS original.            */
/* - Se añadieron nuevas clases y estilos específicos para la página          */
/* de resultados de mapas (prefijados o contenidos dentro de               */
/* `.map-results-page` o clases similares para evitar colisiones).         */
/* - Se reutilizaron colores, fuentes y algunos patrones del CSS existente.   */
/* - La clase `.document` y `.square` no fueron directamente modificadas     */
/* sino que se creó una nueva estructura y estilos para las tarjetas       */
/* de mapa (`.map-card-item`) inspirada en la imagen proporcionada y       */
/* en parte en la estructura de `.recommendation-card` de tu HTML base.    */
/* - Se adaptó `.main` añadiendo la clase `.map-results-page` para           */
/* ajustes específicos sin alterar el comportamiento general de `.main`.   */
/* - Tu ícono de lupa (`lupa.svg`) se reutilizó para el nuevo buscador.       */
/* -------------------------------------------------------------------------- */

/* ==========================================================================
   ESTILOS PARA EL DESPLEGABLE DE FILTRO POR CATEGORÍAS
   ========================================================================== */

   .filter-categories-container {
        position: relative;
        display: inline-block; /* Esto permite que el contenedor se ajuste al ancho del enlace */
        /* width: auto; no es estrictamente necesario aquí, inline-block ya lo hace */
    }

    a.filter-link { /* Mantenemos el cursor pointer */
        cursor: pointer;
        display: inline-flex; /* Para alinear la flecha con el texto */
        align-items: center; /* Centra verticalmente el texto y la flecha */
    }

    .categories-dropdown-panel {
        display: none; /* Oculto por defecto */
        position: absolute;
        /* Las propiedades top y left serán establecidas por JavaScript */
        text-align: left; /* Esto ya lo tenías y está bien */
        background-color: #17345c; /* Tu color de fondo */
        color: #FFFFFF;
        padding: 20px 25px;
        border-radius: 4px;
        box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.35);
        z-index: 1000;
        min-width: 480px; /* O el ancho que necesites */
    }

    .categories-dropdown-panel.open {
        display: flex; /* Se muestra cuando tiene la clase .open, y usa flex para las columnas */
        gap: 30px; /* Espacio entre las dos columnas de categorías */
    }

    .categories-dropdown-panel .categories-column {
        flex: 1; /* Cada columna toma espacio equitativo */
    }

    .categories-dropdown-panel .category-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .categories-dropdown-panel .category-list li a {
        display: block;
        color: #E0E0E0; /* Un blanco ligeramente más suave para el texto */
        font-family: 'Montserrat', sans-serif; /* Consistente con otros textos del diseño */
        font-size: 15px;
        font-weight: 400; /* Peso normal */
        line-height: 1.7;
        padding: 5px 0;
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .categories-dropdown-panel .category-list li a:hover {
        color: #59ba5d; /* Verde de tu paleta para el efecto hover */
    }

    /* Ajuste para la flecha del botón principal cuando el menú está abierto (opcional) */
    #filter-toggle-button .filter-arrow.open {
        display: inline-block;
        transform: rotate(90deg); /* Rota la flecha ">" para que parezca "v" */
    }

    .filter-arrow {
        display: inline-block; /* Necesario para que transform funcione */
        transition: transform 0.3s ease; /* Efecto de movimiento suave para la rotación */
        /* Puedes añadir un pequeño margen si es necesario, ej: margin-left: 5px; */
    }
    
    .filter-arrow.open {
        transform: rotate(90deg); /* Rota el carácter '>' 90 grados para que apunte hacia abajo */
    }
    
    /* Estilo para el texto de la categoría seleccionada (si no lo tienes ya) */
    .filter-categories-container .selected-category {
        font-family: inherit;
        color: inherit;
        font-weight: inherit;
        margin-left: 5px;
    }

    #filter-toggle-button:hover {
        color: #FFFFFF; /* Mantener blanco al pasar el mouse, o el color base del enlace */
        /* Si el texto base "FILTRA POR CATEGORIAS" debe tener un color diferente al pasar el mouse,
           defínelo aquí para #filter-toggle-button:hover .filter-button-base-text */
    }

    #filter-toggle-button:hover .filter-button-base-text,
    #filter-toggle-button:hover .filter-arrow,
    #filter-toggle-button:hover .filter-selected-category-text {
        color: inherit; /* Heredan el color del #filter-toggle-button (que ahora es blanco en hover) */
    }

    .filter-selected-category-text {
        font-family: 'Montserrat', sans-serif; /* O inherit si el padre <a> ya tiene Montserrat */
        color: #FFFFFF;                       /* Blanco */
        font-weight: bold;                    /* Negrita */
        font-size: 22px;                      /* Ajusta este tamaño según tu diseño */
        line-height: normal;
        letter-spacing: normal;
        margin-left: 8px;                     /* Espacio después de la flecha */
        vertical-align: middle;
    }

    .filter-selected-category-text:empty { /* Oculta el span si está vacío */
        display: none;
    }

/* ==========================================================================
   FIN ESTILOS PARA EL DESPLEGABLE DE FILTRO POR CATEGORÍAS
   ========================================================================== */
   /* ==========================================================================
   ESTILOS PARA FILTROS CONTEXTUALES (ALFABETO Y ETIQUETAS)
   ========================================================================== */

.contextual-filters {
    margin-top: 30px;
    margin-bottom: 30px;
    padding-bottom: 20px; /* Espacio por si hay contenido debajo */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Separador opcional */
}

/* --- Filtro Alfabético --- */
.alphabet-filter-container {
    display: flex;
    align-items: center;
    justify-content: center; /* Centra los elementos (flechas y lista) */
    margin-bottom: 40px;
    gap: 10px; /* Espacio entre flechas y lista de letras */
}

.alpha-nav-arrow {
    background: none;
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
    font-size: 20px; /* Tamaño de las flechas < > */
    font-weight: bold;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 3px;
    opacity: 0.7; /* Ligeramente transparentes si no son funcionales aún */
}
.alpha-nav-arrow:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.1);
}

.alphabet-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap; /* <-- ¡CORREGIDO! Permite que las letras bajen a la siguiente fila */
    justify-content: center; /* Mantiene las letras centradas en su contenedor */
    gap: 5px; /* Mantiene el espacio entre letras */
}

.alpha-letter {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px; /* Tamaño de cada letra */
    color: #FFFFFF;
    text-decoration: none;
    padding: 5px 8px;
    border-radius: 3px;
    transition: background-color 0.2s ease, color 0.2s ease;
    font-weight: 300; /* Peso ligero por defecto */
}

.alpha-letter.active { /* Letras con contenido */
    font-weight: 700; /* Negrita */
    cursor: pointer;
}
.alpha-letter.active:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
}

.alpha-letter.disabled { /* Letras sin contenido */
    color: rgba(255, 255, 255, 0.4); /* Más tenue */
    cursor: default;
    pointer-events: none; /* No clickeable */
}

.alpha-letter.selected { /* Estilo para la letra actualmente seleccionada */
    background-color: #59ba5d; /* Verde de tu paleta */
    color: #FFFFFF;
    font-weight: 700;
}


/* --- Filtro por Etiquetas --- */
.tag-filter-container {
    margin-bottom: 30px;
}

.tag-list {
    display: flex;
    flex-wrap: wrap; /* Permite que las etiquetas pasen a la siguiente línea */
    gap: 12px; /* Espacio entre etiquetas */
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: 15px; /* Espacio antes del botón "Ver más" si está en la misma línea */
}

.tag-list li {
   /* Cada li ocupará el espacio de su botón interno */
}

.tag-item {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #FFFFFF;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    font-weight: 400;

    /* --- NUEVO: Dimensiones fijas y forma rectangular --- */
    width: 150px;  /* Ancho fijo para cada etiqueta. AJUSTA ESTE VALOR según tu diseño y cuántas caben por fila. */
    height: 40px; /* Altura fija. AJUSTA ESTE VALOR. */
    padding: 0 10px; /* Padding horizontal. El vertical se maneja con flex o line-height. */
    border-radius: 4px; /* Bordes ligeramente redondeados para un look rectangular. */
    box-sizing: border-box; /* Importante para que padding y border no aumenten el width/height total. */

    /* --- NUEVO: Centrado de texto y manejo de desbordamiento --- */
    display: inline-flex;   /* Permite usar align-items y justify-content y se comporta como inline-block. */
    align-items: center;    /* Centra el texto verticalmente. */
    justify-content: center;/* Centra el texto horizontalmente. */
    text-align: center;     /* Fallback o si prefieres no usar flex para centrado horizontal. */
    
    white-space: nowrap;     /* Evita que el texto salte a la siguiente línea. */
    overflow: hidden;        /* Oculta el texto que se desborda del ancho fijo. */
    text-overflow: ellipsis; /* Muestra puntos suspensivos (...) para el texto oculto. */
}

.tag-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #FFFFFF;
}

.tag-item.active {
    background-color: #59ba5d;
    border-color: #59ba5d;
    color: #FFFFFF;
    font-weight: 600;
}

.tag-ver-mas {
    /* Ejemplo: si quieres que "Ver más" se ajuste a su contenido y no sea tan ancho: */
    /* width: auto; */
    /* min-width: 120px; /* Un ancho mínimo si es auto */
    /* O mantenlo con el mismo ancho que las otras etiquetas si así lo prefieres. */
    font-weight: 600;
    border-style: dashed;
}

/* --- Título de Filtro Activo --- */
.active-filter-title-section {
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Hereda el estilo de .section-title que ya tienes, solo asegúrate que se vea bien aquí */
#active-filter-name {
    /* font-family: 'Montserrat', sans-serif; (Ya definido en .section-title) */
    /* font-weight: 300; (Ya definido) */
    /* font-size: 30px; (Ya definido) */
    /* ... etc ... */
    text-align: left; /* O center, según el diseño de esta parte */
}
   /* ==========================================================================
   FIN ESTILOS PARA FILTROS CONTEXTUALES (ALFABETO Y ETIQUETAS)
   ========================================================================== */