/* CLIENTE */

/* HERO CLIENTE*/

.herocliente {
    position: relative;
    height: 85vh;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
                url('');
    background-size: cover;
    background-position: center;
}
.hero-content {
    color: var(--text-light);
    max-width: 800px;
    padding: 0 20px;
}

.herocliente h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.herocliente p {
    font-size: 1.25rem;
    opacity: 0.9;
}

/* Community Section */
.community {
    padding: 80px 0;
    background-color: #fff;
}

.community-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1920px;
    margin: auto;
    padding:6rem 0 6rem 0;
    
}

.community-image {
    width: 20%;
    text-align:start;
}

.community-image img {
    max-width: 100%;
    height: auto;
}

.community-content{
    width: 65%;
    margin: auto auto;

}
@media (max-width: 1200px) {
        
    .community-grid {
        flex-direction: column-reverse; /* Cambia a diseño vertical */
        text-align: center; /* Centra el texto */
        padding-top:3rem;
        padding-bottom:2rem;
    }
    
    .community-image{
        padding-bottom:2rem;
        width: 80%;
        text-align:center;
    }
    .text-content, .image-grid {
        width: 100%; /* Ocupa todo el ancho */
    }
}




.community-content h2 {
    font-size: 2.5rem;
    color: var(--primary-blue);
    margin-bottom: 1.5rem;
    line-height: 1.2;
}


.content-text p {
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    color: #555;
}

/* Regions Section */
.regions {
    padding: 60px 0;
    background-color: #f8f9fa;
    background-position: left;  /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    width: 100%; /* Se expande en todo el ancho */
    height: auto; /* Ajusta la altura según necesidad */
}

.regions-title {
    text-align: center;
    color: var(--primary-blue);
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.regions-subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 2rem;
}

.regions-nav {
    background: white;
    padding: 1rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.regions-nav ul {
    display: flex;
    list-style: none;
    gap: 1.5rem;
    white-space: nowrap;
    padding: 0.5rem;
}

.regions-nav a {
    color: var(--text-dark);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    transition: background-color 0.3s;
}

.regions-nav .active a {
    background-color: var(--primary-blue);
    color: var(--text-light);
}

/* Map and Committees Grid */



.scroll-container { 
    max-height: calc(3 * auto); /* Ajusta según el tamaño real de tarjetas */
    overflow-y: auto;
    padding-right: 10px;
    
    
}


/* Map and Committees Grid */

.map-grid {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    justify-items: stretch;
    border-radius: 20px;
}
.committees-grid{
    width:100%;
    height: 100%;
    padding-top:4rem;
    padding-bottom: 4rem;
    border-radius: 20px;
}

.committee-card:hover {
    transform: translateY(-5px);
}
.committee-card{
    width:475px;
    height:260px;
}
.imagg {
    width:100%;
    height:100%;
    margin: auto auto;
    position: relative;
    
}

.card-footers {
    width:100%;
    height:82px;
    background: linear-gradient(to right, #051aa1, #18a3fa);

    color: var(--text-light);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.imagensota{
    width:100%;
    height:100%;
    margin: auto auto;
}
.locations{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    width: 100%;
    height: 100%;
}
.dett{
    width:80%;
    height:80%;
    margin:auto auto;
}
.details-btn {
    color: var(--text-light);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border: 1px solid var(--text-light);
    border-radius: var(--border-radius);
    transition: all 0.3s;
    margin: auto auto;
    
}
.cliente {
    width: 90%;
    height: auto;
    margin: 0 auto;

    
}

.details-btn:hover {
    background: var(--text-light);
    color: var(--primary-blue);
}
@media (min-width: 1301px) and (max-width: 1920px) { 
    .map-grid {
        display: grid;
        grid-template-columns:1fr 1fr 1fr;
        justify-items: stretch;
        width: 100%;
        height: 1100px;
    }
    .committees-grid{
        width:100%;
        height: 100%;
        padding-top:3rem;
        padding-bottom: 3rem;
        border-radius: 20px;
    }
    .imagensota{
        width:100%;
        height:100%;
        margin: auto auto;
    }
    
    
}
@media (min-width: 801px) and (max-width: 1300px) { 
    .map-grid {
        display: grid;
        grid-template-columns:1fr 1fr;
        justify-items: stretch;
        width: 100%;
        height: 1100px;
    }
    .committees-grid{
        width:100%;
        height: 100%;
        padding-top:3rem;
        padding-bottom: 3rem;
        border-radius: 20px;
    }
    .imagensota{
        width:100%;
        height:100%;
        margin: auto auto;
    }
    
    
}

@media (min-width: 601px) and (max-width: 800px) { 
    .map-grid {
        display: grid;
        grid-template-columns:1fr;
        justify-items: stretch;
        width: 100%;
        height: 700px;
    }
    .committees-grid{
        width:100%;
        height: 100%;
        padding-top:3rem;
        padding-bottom: 3rem;
        border-radius: 20px;
    }
}


@media (min-width: 200px) and (max-width: 600px) {
    .map-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap:10px;
        justify-items: stretch;
        width: 100%;
        height: 600px;
    }
    .committees-grid {
        width:100%;
        height: 100%;
        border-radius: 20px;
    }
    .imagg {
        width: 100%;
        height: 100%;
        margin: auto auto;
        
    }
    .imagensota{
        margin: auto auto;
    }
    .chiq{
        font-size: 5px;
    }
    .card-footers{
        width:100%;
        height:82px;

    }
    .locations{
        max-width:400px;
        max-height:100px;
        display:grid;
        grid-template-columns: 1fr 1fr;
    }
    .dett{
        width:80%;
        height:80%;
        margin:auto auto;
    }
    .details-btn{
        display:inline-block;
        width:80%;
        height:80%;
        margin:auto auto;
    }
    .cliente {
        width: 100%;
        height: auto;
        margin: 0 auto;
        padding: 0 20px;
        
    }
}
.map-container {
    position: sticky;
    top: 2rem;
}

.chile-map {
    width: 100%;
    height: auto;
}


.imagg h3 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: var(--text-light);
    font-size: 1.25rem;
}


.locations h4 {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.locations p {
    font-size: 0.9rem;
    opacity: 0.9;
}





@media screen and (max-width: 992px) {
    .hero h1 {
        font-size: 2.5rem;
    }

    
}

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

    .hero h1 {
        font-size: 2rem;
    }

    .hero p {
        font-size: 1.1rem;
    }

    
}

/* Móviles Android */
@media screen and (max-width: 576px) {
    .hero {
        min-height: 300px;
    }

    .hero h1 {
        font-size: 1.75rem;
    }

    .hero p {
        font-size: 1rem;
    }

   

    .content-text p {
        font-size: 1rem;
    }

    .card-footers {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

   
}

/* Móviles pequeños */
@media screen and (max-width: 360px) {
    .hero h1 {
        font-size: 1.5rem;
    }

    
}

/* Optimizaciones para Android */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .hero {
        background-attachment: scroll;
    }
}

/* Mejoras de rendimiento */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* Optimizaciones táctiles */



/* Committee Cards */

.card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-image h3 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: var(--text-light);
    font-size: 1.25rem;
}



.locations h4 {
    font-size: 1rem;
    margin-bottom: 0.4rem;
}

.locations p {
    font-size: 0.9rem;
    opacity: 0.9;
}



/* Responsive Design */




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

    .herocliente h1 {
        font-size: 2rem;
    }

    .herocliente p {
        font-size: 1.1rem;
    }

    
}

/* Móviles Android */
@media screen and (max-width: 576px) {
    .herocliente {
        min-height: 300px;
    }

    .herocliente h1 {
        font-size: 1.75rem;
    }

    .herocliente p {
        font-size: 1rem;
    }

    

    .content-text p {
        font-size: 1rem;
    }

    .card-footers {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    
}

/* Móviles pequeños */
@media screen and (max-width: 360px) {
    .herocliente h1 {
        font-size: 1.5rem;
    }

  
}

/* Optimizaciones para Android */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .herocliente {
        background-attachment: scroll;
    }
}

/* Mejoras de rendimiento */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* Optimizaciones táctiles */




/* Hero Section */
.hero {
    position: relative;
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
                url('');
             
    background-size: cover;
    background-position: center;
    height: 60vh;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-content {
    color: var(--text-light);
    max-width: 800px;
    padding: 0 20px;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.hero p {
    font-size: 1.25rem;
    opacity: 0.9;
}



.content-text p {
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    color: #555;
}

/* Regions Section */
.regions2{
    padding: 60px 0;
    background-color: #3269c0;

}
.regions {
    padding: 60px 0;
    background-color: #ffffff;
}
.regions-title {
    text-align: center;
    color: var(--primary-blue);
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.regions-subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 2rem;
}

.regions-nav {
    background: white;
    padding: 1rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.regions-nav ul {
    display: flex;
    list-style: none;
    gap: 1.5rem;
    white-space: nowrap;
    padding: 0.5rem;
}

.regions-nav a {
    color: var(--text-dark);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    transition: background-color 0.3s;
}

.regions-nav .active a {
    background-color: var(--primary-blue);
    color: var(--text-light);
}



.map-container {
    position: sticky;
    top: 2rem;
}

.chile-map {
    width: 100%;
    height: auto;
}


/* Committee Cards */





.card-image img {
    position: absolute;
    width: 80%;
    height: 60%;
    object-fit: cover;
}

.card-image h3 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: var(--text-light);
    font-size: 1.25rem;
}

.card-footer {
    background-color: var(--primary-blue);
    color: var(--text-light);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.locations h4 {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.locations p {
    font-size: 0.9rem;
    opacity: 0.9;
}



/* Responsive Design */

@media screen and (max-width: 992px) {
    .hero h1 {
        font-size: 2.5rem;
    }

    
}

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

    .hero h1 {
        font-size: 2rem;
    }

    .hero p {
        font-size: 1.1rem;
    }

    
}

/* Móviles Android */
@media screen and (max-width: 576px) {
    .hero {
        min-height: 300px;
    }

    .hero h1 {
        font-size: 1.75rem;
    }

    .hero p {
        font-size: 1rem;
    }

   

    .content-text p {
        font-size: 1rem;
    }

    .card-footer {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    
}

/* Móviles pequeños */
@media screen and (max-width: 360px) {
    .hero h1 {
        font-size: 1.5rem;
    }

    
}

/* Optimizaciones para Android */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .hero {
        background-attachment: scroll;
    }
}

/* Mejoras de rendimiento */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* Optimizaciones táctiles */