/* Estilo para el contenido de la card */
.informationCardContainer {
    width: 90%; /*1424*/
    height: auto;/*688*/
    display: flex;
    /*position: relative;*/
    flex-direction: row;
    align-items: stretch;
    margin: 0 auto;
    overflow: hidden;
}

@media (max-width: 1000px) {
    .informationCardContainer {
    
        width: 95%; 
      
    }
}

@media (min-width: 1400px) {
    .informationCardContainer {
    
        width: 70%; 
      
    }
}

/* Estilo para la imagen de la card */
.imagenInformationCard {
    /*position: absolute; */
    left: 0;
    z-index: 1; /* Asegura que la imagen esté sobre el div de texto */
    width: 50%;/*552*/
    height: auto;
    flex-shrink: 0;
    border-radius: var(--Corner-Large, 16px);
    object-fit: cover;
}


/* Estilo para el contenedor del texto de la card */
.textoInformationCardContainer { 
    /*position: absolute;*/
    right: 0;
    z-index: 0; /* Asegura que el div de texto esté debajo de la imagen */
    width: 50%;
    height: auto;
    flex-shrink: 0;
    border-radius: 0px 16px 16px 0px;
    background: #F9F9F9;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    
}
/*
@media (max-width: 1400px) {
    .imagenInformationCard
    .textoInformationCardContainer {
        width: 45%; 
        min-height: 300px;
        height: auto; 
       
    }
}*/
.imagenInformationCard {
    aspect-ratio: 16 / 9; /* Mantiene proporción ancho/alto */
    max-height: 90vh; /* No ocupa más del 90% de la pantalla */
}
/* Estilo para el texto de la card */
.textoInformationCard {
    margin: 5%;
    width: 100%; 
    padding-right: 10%;   
    height: auto;
    flex-shrink: 0;
    color: #000;
    text-align: justify;
    hyphens: auto;
    font-family: Montserrat;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.32px;
    overflow: hidden;
}
@media (max-width: 1100px) {
    .textoInformationCard {
        /* Se reduce el ancho */
     
        font-size: 26px;
        margin: 0;
        
    }
}

@media (max-width: 500px) {
    .informationCardContainer {
        flex-direction: column;
    }

    .imagenInformationCard,
    .textoInformationCardContainer {
        width: 100%;
        border-radius: 16px 16px 16 px 16px; /* opcional, si quieres redondear solo arriba */
    }

    .textoInformationCardContainer {
        border-radius: 0 0 16px 16px; /* redondea solo la parte de abajo */
    }

    .textoInformationCard {
        font-size: 20px;
        padding: 10px;
    }
}