.circular-image {
    width: 180px;
    /* Ajusta el tamaño según sea necesario */
    height: 180px;
    /* Asegúrate de que la altura sea igual al ancho para formar un círculo */
    border-radius: 50%;
    /* Esto convierte la imagen en un círculo */
    object-fit: cover;
    /* Asegura que la imagen cubra completamente el área del círculo */
    margin-right: 20px;
    /* Añade un espacio a la derecha si es necesario */
    padding: 1em;
}

.custom-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 0.5rem;
    /* rounded-lg */
    max-width: 100%;
    /* md:max-w-xl */
    background-color: white;
    /* fondo blanco */
    text-decoration: none;
    /* quita subrayado de los enlaces */
    margin: 10px;
}

@media (min-width: 768px) {

    /* Aplica en pantallas medianas y grandes */
    .custom-card {
        flex-direction: row;
    }
}

.card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
    /* p-4 */
    line-height: 1.5;
    /* leading-normal */
}

/* .card-title {
    font-size: 2em;
    font-weight: bold;
    color: #66bace;
    margin-bottom: 0.5rem;
    text-decoration: none;
} */

.card-text {
    font-size: 1rem;
    /* font-normal */
    color: black;
    /* Color del texto del párrafo */
    margin-bottom: 0.75rem;
    /* mb-3 */
}



.background-container {
    position: absolute;
    inset: 0;
    top: -10rem;
    /* -top-40 */
    z-index: -10;
    /* -z-10 */
    transform: translateZ(0);
    /* transform-gpu */
    overflow: hidden;
    filter: blur(3rem);
    /* blur-3xl */
}

@media (min-width: 640px) {

    /* Para pantallas sm:-top-80 */
    .background-container {
        top: -20rem;
        /* -top-80 en sm */
    }
}

.background-gradient {
    position: relative;
    inset: 0;
    background-color: #F6F5F2;
    /* Fondo del gradiente */
    left: calc(50% - 11rem);
    /* left-[calc(50%-11rem)] */
    aspect-ratio: 1155/550;
    /* aspect-[1155/550] */
    width: 36.125rem;
    transform: translateX(-50%) rotate(30deg);
    /* rotate-[30deg] */
    background-image: linear-gradient(to top right, #ff80b5, #9089fc);
    /* bg-gradient-to-tr */
    opacity: 0.15;
    /* opacity-15 */
}

@media (min-width: 640px) {

    /* Para pantallas sm */
    .background-gradient {
        left: calc(50% - 30rem);
        /* sm:left-[calc(50%-30rem)] */
        width: 72.1875rem;
        /* sm:w-[72.1875rem] */
    }
}

.background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* object-cover */
    border-radius: 0 0 1rem 1rem;
    /* rounded-b-2xl */
    opacity: 0.95;
    /* opacity-95 */
}

/* ----------------FONDO ---------------- */

.background-container {
    position: absolute;
    inset: 0;
    top: -10rem;
    /* -top-40 */
    z-index: -10;
    /* -z-10 */
    transform: translateZ(0);
    /* transform-gpu */
    overflow: hidden;
    filter: blur(5 rem);
    /* blur-3xl */
}

@media (min-width: 640px) {

    /* Para pantallas sm:-top-80 */
    .background-container {
        top: -82em;
        /* -top-80 en sm */
    }
}

.background-gradient {
    position: relative;
    inset: 0;
    background-color: #F6F5F2;
    /* Fondo del gradiente */
    left: calc(50% - 11rem);
    /* left-[calc(50%-11rem)] */
    aspect-ratio: 1155/550;
    /* aspect-[1155/550] */
    width: 36.125rem;
    transform: translateX(-50%) rotate(30deg);
    /* rotate-[30deg] */
    background-image: linear-gradient(to top right, #ff80b5, #9089fc);
    /* bg-gradient-to-tr */
    opacity: 0.15;
    /* opacity-15 */
}

@media (min-width: 640px) {

    /* Para pantallas sm */
    .background-gradient {
        left: calc(50% - 30rem);
        /* sm:left-[calc(50%-30rem)] */
        width: 72.1875rem;
        /* sm:w-[72.1875rem] */
    }
}

.background-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Mantiene la proporción de la imagen */
    border-radius: 0 0 1rem 1rem;
    /* rounded-b-2xl */
    opacity: 0.95;
    /* Mantiene la opacidad */
    background-color: #f6f5f2;
    /* Color de fondo para que se vea mejor */
}

/* /////////////////////////////////////////////////////////////// */

.quienes-somos-container {
    margin-left: auto;
    margin-right: auto;
    display: grid;
    max-width: 40rem;
    /* max-w-2xl */
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    /* gap-x-8 gap-y-16 */
    padding: 6rem 1rem;
    /* px-4 py-24 */
}

@media (min-width: 640px) {

    /* sm */
    .quienes-somos-container {
        padding: 8rem 1.5rem;
        /* sm:px-6 sm:py-32 */
    }
}

@media (min-width: 1024px) {

    /* lg */
    .quienes-somos-container {
        max-width: 72rem;
        /* lg:max-w-7xl */
        grid-template-columns: repeat(2, 1fr);
        /* lg:grid-cols-2 */
        padding-left: 2rem;
        /* lg:px-8 */
        padding-right: 2rem;
    }
}

.quienes-somos-title {
    /* font-size: 1.875rem; */
    /* font-weight: 700; */
    /* color: black; */
    /* color: white; */
    /* font-weight: bold; */
    text-align: center;

    font-weight: 600;
    color: #1f2937;
    font-size: 2rem;
}

@media (min-width: 640px) {

    /* sm:text-4xl */
    .quienes-somos-title {
        font-size: 2.25rem;
    }
}

.quienes-somos-divider {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.quienes-somos-divider-line {
    width: 25%;
    height: 3px;
    border-radius: 50px;
    background-image: linear-gradient(to top, #63b7cc 40%, #66bace);
}

.quienes-somos-text {
    /* margin-top: 1rem; */
    /* mt-4 */
    font-size: 1.40rem;
    color: black;
    /* text-gray-900 */
    text-align: left;
    font-weight: 450;
    /* font-normal */
    text-align: justify;
}

.quienes-somos-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -2rem;
}

.quienes-somos-image-container img {
    width: 550px;
    height: 300px;
    object-fit: cover;
}


/* ************************************************************ */

.valores-container {
    margin-left: auto;
    margin-right: auto;
    display: grid;
    max-width: 40rem;
    /* max-w-2xl */
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    /* gap-y-6 */
    padding-top: 50px;
    /* sm:py-[50px] */
}

@media (min-width: 1024px) {

    /* lg */
    .valores-container {
        max-width: 72rem;
        /* lg:max-w-7xl */
        grid-template-columns: repeat(2, 1fr);
        /* lg:grid-cols-2 */
        padding-left: 2rem;
        /* lg:px-8 */
        padding-right: 2rem;
    }
}

.custom-card {
    display: flex;
    align-items: center;
    text-align: left;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease-in-out;
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 1rem;
}

.custom-card:hover {
    transform: scale(1.05);
}

.circular-image {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 1.5rem;
}

.card-content {
    padding: 1rem 0;
}

.card-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 0.5rem;
    /* color: #1f2937; */
    color: rgb(17 24 39);
    /* text-gray-900 */
}

.card-text {
    font-size: 18px;
    color: #4b5563;
    /* text-gray-700 */
    /* line-height: 1.5; */
}