/* Diseño general del contenedor */
.our-services {
    position: relative;
    width: 100%;
    height: 350px;
    overflow: hidden;
}

/* Imagen de fondo */
.image-container {
    position: relative;
    width: 100%;
    height: 100%;
}

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



/* Contenido de los servicios */
.services-content {
    position: absolute;
    top: 58%;
    left: 40%;
    height: 100%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
    padding: 220px;
    z-index: 1;
    background: rgba(0, 0, 0, 0.6);
    width: 60%;
}


.titulo-valores {
    font-size: 30px;
    border-bottom: 2px solid red;
    display: inline-block;
    margin-bottom: 30px;
    color: white;
    margin-top: -10px;
    margin-left: -200px;
    padding-bottom: 10px;
    width: 800px;
    letter-spacing: 5px; /* Ajusta el espacio entre letras */
}

.valores-container {
    text-align: left;
    margin-top: -170px;
    width: 1000px;
}
.valores-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Crea tres columnas iguales */
    gap: 50px; /* Espaciado entre columnas */
    width: 100%;
    max-width: 2000px;
    margin: auto;
}

.valores-columna {
    width: 60%; /* Mantiene el ancho de las columnas */
}

.valores-lista {
    list-style: none;
    padding: 0;
    color: white;
    width: 100%;
}

.valores-lista li {
    position: relative;
    padding-left: 20px;
    font-size: 18px;
    margin-left: -200px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    line-height: 3; /* Aumenta el interlineado */
}



/* Agregar viñetas personalizadas */
.valores-lista li::before {
    content: "➤"; /* Símbolo de viñeta */
    color: #ed1c24; /* Color de la viñeta */
    font-size: 16px;
    position: absolute;
    left: 0;
    top: 2px;
    margin-left: -180;
    cursor: pointer; /* Permite hacer clic en la viñeta */
    transition: transform 0.3s ease; /* Añadimos una transición para la rotación */
}

/* Cuando se hace clic en la viñeta, rota hacia abajo */
.valores-lista li.activo::before {
    transform: rotate(90deg); /* Rotación de 90 grados hacia abajo */
    margin-left: -180;
}

.valor-link {
    text-decoration: none;
    cursor: pointer;
    color: #fff;
    margin-left: -180;
    font-size: 18px;
}


/* Descripción dinámica que mueve el texto de abajo */
.descripcion {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out;
    padding: 0 10px;
    border-radius: 5px;
    color: white;
    font-size: 16px;
    opacity: 0;
    overflow-y: auto; /* Activa el scroll vertical solo si es necesario */
    white-space: normal; /* Permite que el texto haga saltos de línea */
    scrollbar-width: auto; /* Muestra la barra solo cuando es necesario en Firefox */
    scrollbar-color: #73a0ca transparent; /* Color de la barra en navegadores compatibles */
    transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out;
    margin-top: 5px;
    width: 250px; /* Aumenta el ancho de la caja */
    line-height: 1.5; /* Aumenta el interlineado */

}

/* Cuando la descripción se activa, se expande y mueve los elementos debajo */
.descripcion.activo {
    max-height: 50px; /* Ajusta la altura cuando está activa */
    opacity: 1;
    padding: -10px;
}
/* Estilo de la barra de desplazamiento */
.descripcion::-webkit-scrollbar {
    width: 6px; /* Ancho de la barra de desplazamiento */
    height: 6px; /* Para cuando haya scroll horizontal (si es necesario) */
}

/* Estilo de la bolita del scrollbar (el pulgar) */
.descripcion::-webkit-scrollbar-thumb {
    background: #a09f9f; /* Color de la "bolita" o pulgar del scrollbar */
    border-radius: 4px; /* Bordes redondeados */
}

/* Eliminar las flechas del scrollbar */
.descripcion::-webkit-scrollbar-button {
    display: none;
}

/* Estilo de la pista (donde se mueve el pulgar) */
.descripcion::-webkit-scrollbar-track {
    background: transparent; /* Hacer invisible la pista */
}

/* Para navegadores Firefox */
.descripcion {
    scrollbar-width: thin; /* Hacer que el scrollbar sea delgado */
    scrollbar-color: #a09f9f transparent; /* Color de la bolita y la pista */
}

/* Para navegadores antiguos, donde el estilo no se aplica a todo */
.descripcion::-moz-scrollbar {
    width: 6px;
}

.descripcion::-moz-scrollbar-thumb {
    background: #438acc;
    border-radius: 4px;
}

.descripcion::-moz-scrollbar-track {
    background: transparent;
}

/* Responsivo para pantallas pequeñas */
@media (max-width: 1024px) {
    .services-content {
        top: 50%;
        left: 50%;
        padding: 40px 20px;
        width: 90%;
        height: auto; /* Ajusta la altura para que se pueda mostrar todo */
        transform: translate(-50%, -50%);
        overflow-y: auto; /* Habilita el scroll si el contenido excede el tamaño del contenedor */
    }

    .titulo-valores {
        font-size: 24px;
        width: 100%;
        margin-left: 0;
        text-align: center;
    }

    .valores-container {
        margin-top: 0;
        width: 100%;
    }

    .valores-grid {
        grid-template-columns: 1fr; /* Una sola columna */
        gap: 20px;
    }

    .valores-columna {
        width: 100%;
        margin: 0 auto;
    }

    .valores-lista li {
        margin-left: 0;
        padding-left: 25px;
    }

    .valores-lista li::before,
    .valor-link {
        margin-left: 0;
    }

    .valor-link {
        font-size: 16px;
    }

    .descripcion {
        width: 100%;
    }

    .background-image {
        width: 100%; /* Ajusta el tamaño de la imagen de fondo */
        height: auto; /* Mantiene la proporción de la imagen */
        top: 0;
        left: 0;
    }
}

/* Responsivo para pantallas muy pequeñas (móviles) */
@media (max-width: 600px) {
    .titulo-valores {
        font-size: 20px;
        letter-spacing: 2px;
    }

    .valor-link {
        font-size: 14px;
    }

    .descripcion {
        font-size: 14px;
        max-height: 100px; /* Un poco más de altura en móviles */
    }

    .background-image {
        width: 100%;
        height: 300px; /* Ajusta aún más la imagen */
        top: 50%;
        left: 10%;
        transform: translate(-70%, -50%);
    }
    /* Imagen de fondo */
    .image-container {
        position: relative;
        width: 300%;
        height: 100%;
    }

    .services-content {
        padding: 10px 10px;
        top: 50%;
        left: 15%;
        transform: translate(-50%, -50%);
        max-height: 297px;
        max-width: 250px;
        overflow-y: auto;
    }
}