/**
 * Ency Layout System
 * Micro-framework para plugin enciclopedia
 * Prefijo: .ency-
 * Tamaño: ~2kb
 */

/* =========================================
    1. SCOPING & RESET (Aislamiento)
   ========================================= */
.ency-wrapper {
    all: initial; /* Resetea estilos heredados del tema dentro del wrapper */
    display: block;
}

.ency-wrapper * {
    all: revert; /* Restaura el comportamiento natural de los elementos */
    box-sizing: border-box; /* Crucial para que el layout no se rompa */
}

/* Asegurar que herede la fuente del tema */
.ency-wrapper,
.ency-wrapper p,
.ency-wrapper span,
.ency-wrapper div {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}

.ency-wrapper a,
.ency-wrapper a:hover {
    color: inherit;
    text-decoration: none;
}

.ency-wrapper table {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* =========================================
    2. LAYOUT (Grid & Flex)
   ========================================= */
/* Grid System - Auto fit columns */
.ency-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

/* Grid - 2 Columnas explícitas */
.ency-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* Grid - 3 Columnas explícitas */
.ency-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* Flexbox Utilities */
.ency-flex { display: flex; }
.ency-flex-col { flex-direction: column; }
.ency-flex-wrap { flex-wrap: wrap; }
.ency-justify-start { justify-content: flex-start; }
.ency-justify-center { justify-content: center; }
.ency-justify-end { justify-content: flex-end; }
.ency-justify-between { justify-content: space-between; }
.ency-items-start { align-items: flex-start; }
.ency-items-center { align-items: center; }
.ency-items-end { align-items: flex-end; }
.ency-gap-1 { gap: 0.5rem; }
.ency-gap-2 { gap: 1rem; }
.ency-gap-3 { gap: 1.5rem; }
.ency-gap-4 { gap: 2rem; }
.ency-gap-5 { gap: 2.5rem; }
.ency-gap-6 { gap: 3rem; }
.ency-gap-7 { gap: 3.5rem; }
.ency-gap-8 { gap: 4rem; }

/* =========================================
    3. SPACING (Margin & Padding)
   ========================================= */
.ency-p-0 { padding: 0; }
.ency-p-1 { padding: 0.5rem; }
.ency-p-2 { padding: 1rem; }
.ency-p-3 { padding: 1.5rem; }
.ency-p-4 { padding: 2rem; }
.ency-p-5 { padding: 2.5rem; }
.ency-p-6 { padding: 3rem; }
.ency-p-7 { padding: 3.5rem; }
.ency-p-8 { padding: 4rem; }

.ency-px-0 { padding-left: 0; padding-right: 0; }
.ency-px-1 { padding-left: 0.5rem; padding-right: 0.5rem; }
.ency-px-2 { padding-left: 1rem; padding-right: 1rem; }
.ency-px-3 { padding-left: 1.5rem; padding-right: 1.5rem; }
.ency-px-4 { padding-left: 2rem; padding-right: 2rem; }
.ency-px-5 { padding-left: 2.5rem; padding-right: 2.5rem; }
.ency-px-6 { padding-left: 3rem; padding-right: 3rem; }
.ency-px-7 { padding-left: 3.5rem; padding-right: 3.5rem; }
.ency-px-8 { padding-left: 4rem; padding-right: 4rem; }

.ency-py-0 { padding-top: 0; padding-bottom: 0; }
.ency-py-1 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.ency-py-2 { padding-top: 1rem; padding-bottom: 1rem; }
.ency-py-3 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.ency-py-4 { padding-top: 2rem; padding-bottom: 2rem; }
.ency-py-5 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.ency-py-6 { padding-top: 3rem; padding-bottom: 3rem; }
.ency-py-7 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.ency-py-8 { padding-top: 4rem; padding-bottom: 4rem; }

/* Top */
.ency-pt-0 { padding-top: 0; }
.ency-pt-1 { padding-top: 0.5rem; }
.ency-pt-2 { padding-top: 1rem; }
.ency-pt-3 { padding-top: 1.5rem; }
.ency-pt-4 { padding-top: 2rem; }
.ency-pt-5 { padding-top: 2.5rem; }
.ency-pt-6 { padding-top: 3rem; }
.ency-pt-7 { padding-top: 3.5rem; }
.ency-pt-8 { padding-top: 4rem; }

/* Bottom */
.ency-pb-0 { padding-bottom: 0; }
.ency-pb-1 { padding-bottom: 0.5rem; }
.ency-pb-2 { padding-bottom: 1rem; }
.ency-pb-3 { padding-bottom: 1.5rem; }
.ency-pb-4 { padding-bottom: 2rem; }
.ency-pb-5 { padding-bottom: 2.5rem; }
.ency-pb-6 { padding-bottom: 3rem; }
.ency-pb-7 { padding-bottom: 3.5rem; }
.ency-pb-8 { padding-bottom: 4rem; }

/* Left */
.ency-pl-0 { padding-left: 0; }
.ency-pl-1 { padding-left: 0.5rem; }
.ency-pl-2 { padding-left: 1rem; }
.ency-pl-3 { padding-left: 1.5rem; }
.ency-pl-4 { padding-left: 2rem; }
.ency-pl-5 { padding-left: 2.5rem; }
.ency-pl-6 { padding-left: 3rem; }
.ency-pl-7 { padding-left: 3.5rem; }
.ency-pl-8 { padding-left: 4rem; }

/* Right */
.ency-pr-0 { padding-right: 0; }
.ency-pr-1 { padding-right: 0.5rem; }
.ency-pr-2 { padding-right: 1rem; }
.ency-pr-3 { padding-right: 1.5rem; }
.ency-pr-4 { padding-right: 2rem; }
.ency-pr-5 { padding-right: 2.5rem; }
.ency-pr-6 { padding-right: 3rem; }
.ency-pr-7 { padding-right: 3.5rem; }
.ency-pr-8 { padding-right: 4rem; }




/* Margin */
.ency-m-0 { margin: 0; }
.ency-m-1 { margin: 0.5rem; }
.ency-m-2 { margin: 1rem; }
.ency-m-3 { margin: 1.5rem; }
.ency-m-4 { margin: 2rem; }

.ency-mt-0 { margin-top: 0; }
.ency-mt-1 { margin-top: 0.5rem; }
.ency-mt-2 { margin-top: 1rem; }
.ency-mt-3 { margin-top: 1.5rem; }
.ency-mt-4 { margin-top: 2rem; }
.ency-mt-5 { margin-top: 2.5rem; }
.ency-mt-6 { margin-top: 3rem; }
.ency-mt-7 { margin-top: 3.5rem; }
.ency-mt-8 { margin-top: 4rem; }

.ency-mb-0 { margin-bottom: 0; }
.ency-mb-1 { margin-bottom: 0.5rem; }
.ency-mb-2 { margin-bottom: 1rem; }
.ency-mb-3 { margin-bottom: 1.5rem; }
.ency-mb-4 { margin-bottom: 2rem; }
.ency-mb-5 { margin-bottom: 2.5rem; }
.ency-mb-6 { margin-bottom: 3rem; }
.ency-mb-7 { margin-bottom: 3.5rem; }
.ency-mb-8 { margin-bottom: 4rem; }

.ency-mx-auto { margin-left: auto; margin-right: auto; }

/* =========================================
    4. DISPLAY & SIZING
   ========================================= */
.ency-block { display: block; }
.ency-inline-block { display: inline-block; }
.ency-hidden { display: none; }
.ency-w-full { width: 100%; }
.ency-h-full { height: 100%; }
.ency-max-w-none { max-width: none; }

/* =========================================
    5. TEXT UTILITIES
   ========================================= */
.ency-text-center { text-align: center; }
.ency-text-left { text-align: left; }
.ency-text-right { text-align: right; }
.ency-font-bold { font-weight: 700; }
.ency-font-normal { font-weight: 400; }
.ency-uppercase { text-transform: uppercase; }

/* =========================================
    6. RESPONSIVE (Mobile First)
   ========================================= */
@media (max-width: 768px) {
    .ency-grid-2,
    .ency-grid-3 {
        grid-template-columns: 1fr; /* 1 columna en móvil */
    }

    .ency-flex-mobile-col {
        flex-direction: column;
    }

    .ency-hidden-mobile {
        display: none;
    }

    .ency-mb-2-mobile {
        margin-bottom: 1rem;
    }

    .ency-wrapper.ency-p-8 {
        padding: 2rem;
    }
    .ency-wrapper.ency-mb-8 {
        margin-bottom: 2rem;
    }

   
}

@media (min-width: 769px) {
    .ency-hidden-desktop {
        display: none;
    }
}





/* =========================================
   7. RESPONSIVE - TABLET (min-width: 768px)
   ========================================= */
@media (min-width: 768px) {
    .ency-p-0-tablet { padding: 0; }
    .ency-p-1-tablet { padding: 0.5rem; }
    .ency-p-2-tablet { padding: 1rem; }
    .ency-p-3-tablet { padding: 1.5rem; }
    .ency-p-4-tablet { padding: 2rem; }
    .ency-p-5-tablet { padding: 2.5rem; }
    .ency-p-6-tablet { padding: 3rem; }
    .ency-p-7-tablet { padding: 3.5rem; }
    .ency-p-8-tablet { padding: 4rem; }

    .ency-px-0-tablet { padding-left: 0; padding-right: 0; }
    .ency-px-1-tablet { padding-left: 0.5rem; padding-right: 0.5rem; }
    .ency-px-2-tablet { padding-left: 1rem; padding-right: 1rem; }
    .ency-px-3-tablet { padding-left: 1.5rem; padding-right: 1.5rem; }
    .ency-px-4-tablet { padding-left: 2rem; padding-right: 2rem; }
    .ency-px-5-tablet { padding-left: 2.5rem; padding-right: 2.5rem; }
    .ency-px-6-tablet { padding-left: 3rem; padding-right: 3rem; }
    .ency-px-7-tablet { padding-left: 3.5rem; padding-right: 3.5rem; }
    .ency-px-8-tablet { padding-left: 4rem; padding-right: 4rem; }

    .ency-py-0-tablet { padding-top: 0; padding-bottom: 0; }
    .ency-py-1-tablet { padding-top: 0.5rem; padding-bottom: 0.5rem; }
    .ency-py-2-tablet { padding-top: 1rem; padding-bottom: 1rem; }
    .ency-py-3-tablet { padding-top: 1.5rem; padding-bottom: 1.5rem; }
    .ency-py-4-tablet { padding-top: 2rem; padding-bottom: 2rem; }
    .ency-py-5-tablet { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .ency-py-6-tablet { padding-top: 3rem; padding-bottom: 3rem; }
    .ency-py-7-tablet { padding-top: 3.5rem; padding-bottom: 3.5rem; }
    .ency-py-8-tablet { padding-top: 4rem; padding-bottom: 4rem; }
}

/* =========================================
   8. RESPONSIVE - DESKTOP (min-width: 1024px)
   ========================================= */
@media (min-width: 1024px) {
    .ency-p-0-desktop { padding: 0; }
    .ency-p-1-desktop { padding: 0.5rem; }
    .ency-p-2-desktop { padding: 1rem; }
    .ency-p-3-desktop { padding: 1.5rem; }
    .ency-p-4-desktop { padding: 2rem; }
    .ency-p-5-desktop { padding: 2.5rem; }
    .ency-p-6-desktop { padding: 3rem; }
    .ency-p-7-desktop { padding: 3.5rem; }
    .ency-p-8-desktop { padding: 4rem; }

    .ency-px-0-desktop { padding-left: 0; padding-right: 0; }
    .ency-px-1-desktop { padding-left: 0.5rem; padding-right: 0.5rem; }
    .ency-px-2-desktop { padding-left: 1rem; padding-right: 1rem; }
    .ency-px-3-desktop { padding-left: 1.5rem; padding-right: 1.5rem; }
    .ency-px-4-desktop { padding-left: 2rem; padding-right: 2rem; }
    .ency-px-5-desktop { padding-left: 2.5rem; padding-right: 2.5rem; }
    .ency-px-6-desktop { padding-left: 3rem; padding-right: 3rem; }
    .ency-px-7-desktop { padding-left: 3.5rem; padding-right: 3.5rem; }
    .ency-px-8-desktop { padding-left: 4rem; padding-right: 4rem; }

    .ency-py-0-desktop { padding-top: 0; padding-bottom: 0; }
    .ency-py-1-desktop { padding-top: 0.5rem; padding-bottom: 0.5rem; }
    .ency-py-2-desktop { padding-top: 1rem; padding-bottom: 1rem; }
    .ency-py-3-desktop { padding-top: 1.5rem; padding-bottom: 1.5rem; }
    .ency-py-4-desktop { padding-top: 2rem; padding-bottom: 2rem; }
    .ency-py-5-desktop { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .ency-py-6-desktop { padding-top: 3rem; padding-bottom: 3rem; }
    .ency-py-7-desktop { padding-top: 3.5rem; padding-bottom: 3.5rem; }
    .ency-py-8-desktop { padding-top: 4rem; padding-bottom: 4rem; }
}


/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
body {
    background: var(--enciclopedia-background-color) !important;
   
}


.enciclopedia-section-wrapper {
    position: relative;
}
.enciclopedia-section-wrapper:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    width: 50px;
    height: 100%;
    background: linear-gradient(to left, var(--enciclopedia-background-color), transparent);
    pointer-events: none;
}

.enciclopedia-sections-container {
    overflow-x: auto;
    cursor: grab;
}


/* width */
.enciclopedia-section-content::-webkit-scrollbar,
.enciclopedia-sections-container::-webkit-scrollbar { 
    width: 5px; 
    height: 5px; 
}

/* Track */
.enciclopedia-section-content::-webkit-scrollbar-track,
.enciclopedia-sections-container::-webkit-scrollbar-track { 
    background: #eaeef2; 
}

/* Handle */
.enciclopedia-section-content::-webkit-scrollbar-thumb,
.enciclopedia-sections-container::-webkit-scrollbar-thumb {
    background: var(--enciclopedia-primary-color); 
}

.enciclopedia-header-title {
    font-family: "Plus Jakarta Sans", Sans-serif;
    font-size: 49px !important;
    font-weight: 700;
    margin: 0;
}

.enciclopedia-section-card {
    display: flex;
    width: 300px;
    min-width: 300px;
    height: 377px;
    border-radius: 12px;
    background-color: var(--enciclopedia-primary-color);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
    /* Importante para que los hijos absolutos se comporten bien */
    overflow: hidden;
}

.enciclopedia-section-title {
    font-size: 20px !important;
    text-align: center !important;
    margin: 0;
    /* Aseguramos que el título tenga una transición de color también */
    z-index: 2;
    /* Para que esté por encima de la imagen inicialmente */
    position: relative;
    color: var(--enciclopedia-text-accent-color) !important;
}

.enciclopedia-section-title a,
.enciclopedia-section-title a:hover {
    color: inherit !important;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.enciclopedia-section-body-container {
    background-color: var(--enciclopedia-accent-color);
    border-radius: 0 0 12px 12px;
    padding: 25px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    width: 100%;

    /* En lugar de height: auto, usamos max-height */
    max-height: 70px;
    /* Altura inicial aproximada */

    position: absolute;
    bottom: 0;
    left: 0;

    /* Transition en el estado NORMAL */
    transition: max-height .5s ease-in-out,
        background-color .2s ease-in-out;


}

.enciclopedia-return-text {
    font-weight: 400 !important;
}

.enciclopedia-section-link {
    display: none;
    color: #fff !important;
    /* Transición para la aparición del link si quisieras fade-in */
    transition: opacity 0.3s ease;
    font-weight: 400 !important;
}

/* ESTADOS HOVER */
#enciclopediaSections:not(.slider-active) .enciclopedia-section-link .enciclopedia-section-link-text:hover ,
#enciclopediaSections:not(.slider-active) .enciclopedia-return-link:hover {
    text-decoration: underline;
    
}


#enciclopediaSections:not(.slider-active) .enciclopedia-section-card:hover .enciclopedia-section-title,
#enciclopediaSections:not(.slider-active) .enciclopedia-section-card:hover .enciclopedia-section-title a {
    color: #fff !important;
}

#enciclopediaSections:not(.slider-active) .enciclopedia-section-card:hover .enciclopedia-section-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#enciclopediaSections:not(.slider-active) .enciclopedia-section-card:hover .enciclopedia-section-body-container {
    max-height: 500px;
    height: 100%;
    /* Valor mayor que el contenedor padre */
    border-radius: 12px;
    background-color: var(--enciclopedia-primary-color);

}

.enciclopedia-navs a,
.enciclopedia-navs a:hover {
    color: #000 !important;
    font-size: 24px;
}

@media (min-width:1220px) {

    #wrapper-enciclopedia-country,
    .enciclopedia-section-container {
        padding-left: 70px;
        padding-right: 70px;
    }

    .enciclopedia-body {
        max-width: 70%;
    }

}


.enciclopedia-body p {
    font-weight: 300;
}
/*
*   enciclopedia-public-display 
*/

#enciclopediaSections {
    cursor: grab;
    user-select: none; /* Evita selección de texto al arrastrar */
    -webkit-user-select: none;
    
}

#enciclopediaSections.slider-active {
    cursor: grabbing;
}


#enciclopedia-slider {
    visibility: hidden;
}

.enciclopedia-container-section {
    height: 100%;
    margin: 0 auto;
    max-width: min(100%, 1220px);
    padding-inline-end: 0;
    padding-inline-start: 0;
    width: 100%;
}

.enciclopedia-section-slide-item {
    display: flex;
    flex-direction: column;
    gap: 70px;
    width: 100%;
    height: 100%;
    align-items: center;
    margin-bottom: 60px;
    margin-top: 60px;
}

#enciclopedia-slider .enciclopedia-section-item  {
    background-color: inherit;
}

.enciclopedia-section-slide-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}


.enciclopedia-section-slide-content .enciclopedia-section-slide-title-container .enciclopedia-section-title {
    display: flex;
    align-items: center;
    justify-content: left;
    text-align: left !important;
}

.enciclopedia-section-slide-content .enciclopedia-section-title {
    font-size: 49px !important;
    font-weight: 600 !important;
    color: #000 !important;
}

.enciclopedia-section-slide-content .enciclopedia-section-content {

    width: 100%;
    height: 100%;
    max-height: 278px;
    overflow-y: auto;
    padding-right: 30px;
}

.enciclopedia-section-slide-image {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.enciclopedia-section-slide-image .enciclopedia-section-image {
    width: 100%;
    height: 100%;
}

.enciclopedia-section-slide-image .enciclopedia-section-image img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    object-position: center;
    border-radius: 9px !important;
}





@media (min-width: 1220px) {

    .enciclopedia-section-slide-item {
        flex-direction: row;
    }

    .enciclopedia-section-slide-content {
        width: 55%;
    }

    .enciclopedia-section-slide-image {
        width: 45%;
    }

    .enciclopedia-section-slide-item {
        max-height: 400px;
    }

}

/*
* Slides navs
*/
.navigation-wrapper {
    position: relative;
    max-width: 1220px;
    margin: 0 auto;
}

.dots {
    display: flex;
    padding: 10px 0;
    justify-content: center;
}

.dot {
    border: none;
    width: 10px;
    height: 10px;
    background: #eaeef2;
    border-radius: 50%;
    margin: 0 5px;
    padding: 5px;
    cursor: pointer;
    display: none;
}

.dot:focus {
    outline: none;
}

.dot--active {
    background: var(--enciclopedia-primary-color);
}

.arrow {
    width: 40px;
    height: 40px;
    position: absolute;
    font-size: 40px !important;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    fill: #fff;
    cursor: pointer;
    
}

.arrow--left {
    left: -50px;
    color: var(--enciclopedia-primary-color) !important;
}

.arrow--right {
    left: auto;
    right: -50px;
    color: var(--enciclopedia-primary-color) !important;
}

@media (max-width: 1220px) {
    .arrow {
        top: auto;
        bottom: 0;
    }

    .arrow--left {
        left: 50%;
        margin-left: -50px;

    }

    .arrow--right {
        right: 50%;
        margin-right: -50px;
    }

}

/*
* Enciclopedia region navs
*/
.enciclopedia-region-nav {
    
    padding-left: 20px;
    padding-right: 20px;
    overflow-x: auto;
}

.enciclopedia-region-nav .enciclopedia-region-list {
    display: flex;
    
    justify-content: center;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.enciclopedia-region-nav .enciclopedia-region-list .enciclopedia-region-item a,
.enciclopedia-region-nav .enciclopedia-region-list .enciclopedia-region-item span {
    padding: 10px 42px;
    border-radius: 90px;
    border: 3px solid var(--enciclopedia-primary-color);
    color: var(--enciclopedia-primary-color) !important;
    font-weight: 600 !important;
    transition: all 0.3s ease-in-out;
    font-size: 20px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 218px ;
}
.enciclopedia-region-nav .enciclopedia-region-list .enciclopedia-region-item a:hover {
    background-color: var(--enciclopedia-primary-color);
    color: #fff !important;
}

.enciclopedia-region-nav .enciclopedia-region-list .enciclopedia-region-item span {
    background-color: var(--enciclopedia-primary-color);
    color: #fff !important;
}

@media (max-width: 1220px) {
    .enciclopedia-region-nav .enciclopedia-region-list {
        justify-content: normal;
        padding-right: 20px;
    }

    .enciclopedia-region-nav-container {
        
        position: relative;
    }
    .enciclopedia-region-nav-container:after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 50px;
        height: 100%;
        background: linear-gradient(to left, var(--enciclopedia-background-color), transparent);
        pointer-events: none;
    }



}