﻿

.region-data-card-item-container{
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.region-data-card-item-container > .region-data-item > p{
    margin-bottom: 0;
}

.rc-data-text-container{
    height: 7.2rem;
    overflow-y: hidden;
    text-align: justify;
}

/*and (max-width: 1920px)*/
@media (min-width: 1441px) and (max-width: 4096px){
    :root{

    }
    .section-map-container{
        display:flex;
        flex-direction: row;
        gap: 2rem;
    }

    .seccion-contenedor {
        display: flex;
        flex-direction: column;
        width: 100%;
        background-image :
            linear-gradient(to top, #0000009f, #ffffff0a), 
            linear-gradient(to right, #1818189c, #31313181),
            url('../imagenes/fondos/regiones-cafetaleras-bckgr.webp'); 
        background-size: cover; 
        background-blend-mode:normal; 
        padding-left: var(--section-left-padding);
        padding-right: var(--section-left-padding);
        padding-bottom: 2em;
    }

    .regiones-cafetaleras-tittle{
        display: flex;
        justify-content: flex-start;
        align-content: flex-start;
        gap: 16px;
        flex-direction: column;
        min-width: fit-content;
        padding-top: 3rem;
        padding-bottom: 3rem;
        flex-wrap: wrap;
    }
    
    .region-cafetalera-tittle-map {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        gap: 20px;
        max-width: fit-content;
    }
    
    .region-cafetalera-title-icon {
        max-width: fit-content;
    }

    .region-cafetalera-data-card{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items:end;
        gap: 1rem;
    }
    .region-data-item{
        display: flex;
        color: white;
        gap: 1rem;
    }
    
    .region-cafetalera-card-btn{
        display: flex;
        flex-direction: column;
        align-self: center;
        width: 4rem;
        /*padding-bottom: 10rem;*/
    }
    
    .data-card-btn{
        display: flex;
        width: 56px;
        height: 56px;
        border-width: 1px;
        border-radius: 12px;
        border-style: outset;
        border-color: var(--white);
        justify-content: center;
        align-content: center;
        cursor: pointer;
    }

    .data-card-btn-pos-left{
        /* position: absolute;
        top: 800px;
        left: 0px; */
    }

    .data-card-btn-pos-right{
        /* position: absolute;
        top: 800px;
        left: 80px; */
    }

    .region-cafetalera-map {
        max-width: 100%;
        width: fit-content;
    }
    
    .region-cafetalera-data-card-container{
        display:flex;
        flex-direction: column;
        max-width: 750px;
        min-width: 50px;
        width: 30rem;
        align-items: flex-start;
        gap: 1rem;
        align-self: center;
        /*padding-top: 27em;*/
    }
}
/* Responsive: para pantallas mediana */
@media (min-width: 791px) and (max-width: 1440px){

    .section-map-container{
        display:flex;
        flex-direction: row;
        gap: 1rem;
    }

    .seccion-contenedor {
        display: flex;
        flex-direction: column;
        /* flex-wrap: wrap; */
        width: 100%;
        /* height: 100v; */ 
        background-image :
            linear-gradient(to top, #0000009f, #ffffff0a), 
            linear-gradient(to right, #1818189c, #31313181),
            url('../imagenes/fondos/regiones-cafetaleras-bckgr.webp'); 
        
            
        background-size: cover; 
        background-blend-mode:normal; 
        padding-left: var(--section-left-padding);
        padding-right: var(--section-left-padding);
        /* justify-content: center; */
        padding-bottom: 2em;
    }

    .regiones-cafetaleras-tittle{
        display: flex;
        justify-content: flex-start;
        align-content: flex-start;
        gap: 16px;
        flex-direction: column;
        min-width: fit-content;
        padding-top: 3rem;
        padding-bottom: 3rem;
        flex-wrap: wrap;
    }
    
    .region-cafetalera-tittle-map {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        gap: 20px;
        max-width: fit-content;
    }
    
    .region-cafetalera-title-icon {
        max-width: fit-content;
    }

    .region-cafetalera-data-card{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items:end;
        gap: 0.5em;
    }
    .region-data-item{
        display: flex;
        color: white;
        gap: 1rem;
    }
    
    .region-cafetalera-card-btn{
        display: flex;
        flex-direction: column;
        align-self: center;
        width: 4rem;
        /*padding-bottom: 10rem;*/
    }
    
    .data-card-btn{
        display: flex;
        width: 56px;
        height: 56px;
        border-width: 1px;
        border-radius: 12px;
        border-style: outset;
        border-color: var(--white);
        justify-content: center;
        align-content: center;
        cursor: pointer;
    }

    .data-card-btn-pos-left{
        /* position: absolute;
        top: 800px;
        left: 0px; */
    }

    .data-card-btn-pos-right{
        /* position: absolute;
        top: 800px;
        left: 80px; */
    }

    .region-cafetalera-map {
        max-width: 100%;
        width: fit-content;
    }
    
    .region-cafetalera-data-card-container{
        display:flex;
        flex-direction: column;
        max-width: 750px;
        min-width: 50px;
        width: 32rem;
        align-items: flex-start;
        gap: 1em;
        align-self: center;
        /*padding-top: 27em;*/
    }
}

@media (min-width: 0px) and (max-width: 790px){

    :root{
        --section-left-padding: 2rem;
        --section-right-padding: 2rem;
    }
    .section-map-container{
        display:flex;
        flex-direction: column;
        gap: 2rem;
    }

    .seccion-contenedor {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        /* height: 100v; */ 
        background-image :
            linear-gradient(to top, #0000009f, #ffffff0a), 
            linear-gradient(to right, #1818189c, #31313181),
            url('../imagenes/fondos/regiones-cafetaleras-bckgr.webp');   
        background-size: cover; 
        background-blend-mode:normal; 
        padding-left: var(--section-left-padding);
        padding-right: var(--section-left-padding);
        /* justify-content: center; */
        padding-bottom: 2em;
    }

    .regiones-cafetaleras-tittle{
        display: flex;
        justify-content: flex-start;
        align-content: flex-start;
        gap: 16px;
        flex-direction: column;
        min-width: fit-content;
        padding-top: 3rem;
        padding-bottom: 3rem;
        flex-wrap: wrap;
    }
    
    .region-cafetalera-tittle-map {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 20px;
        max-width: fit-content;
    }
    
    .region-cafetalera-title-icon {
        max-width: fit-content;
    }

    .region-cafetalera-data-card{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items:end;
        gap: 2rem;
    }
    .region-data-item{
        display: flex;
        color: white;
        gap: 0.2rem;
    }
    
    .region-cafetalera-card-btn{
        display: flex;
        flex-direction: column;
        align-self: flex-end;
        width: 4rem;
    }
    
    .data-card-btn{
        display: flex;
        width: 56px;
        height: 56px;
        border-width: 1px;
        border-radius: 12px;
        border-style: outset;
        border-color: var(--white);
        justify-content: center;
        align-content: center;
        cursor: pointer;
    }

    .data-card-btn-pos-left{
        position: absolute;
        top: 700px;
        left: 0px;
    }

    .data-card-btn-pos-right{
        position: absolute;
        top: 700px;
        left: 80px;
    }

    .region-cafetalera-map {
        max-width: 100%;
        width: fit-content;
    }

    .region-cafetalera-data-card-container{
        display:flex;
        flex-direction: column;
        min-width: 50px;
        align-items: flex-start;
        gap: 1rem;
        max-width: 550px;
    }

    .rc-data-text-container{

    }
}

.content-section-1{
    padding-top: 78px;
}
/*regiones cafetaleras home*/
.section-map-container{
    display:flex;
    gap: 2rem;
    position: relative;
}

.arrow {
    width: 30px;
}









