/* Estilos generales para la scrollbar */
.scroll-container::-webkit-scrollbar {
    height: 8px;
}
.scroll-container::-webkit-scrollbar-thumb {
    background-color: #EA580C; /* Naranja */
    border-radius: 10px;
}
.scroll-container::-webkit-scrollbar-track {
    background: #F3F4F6; /* Gris claro */
}

/* Estilos para las tarjetas de herramientas interactivos */
.tool-card {
    cursor: pointer; /* Cursor de mano para indicar click */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto de elevación al hacer hover */
.tool-card:hover {
    transform: translateY(-5px);
}

/* --- Estilos para el Acordeón (Detalles Desplegables) --- */

/* Estado inicial: oculto y altura 0 */
.details-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
    opacity: 0;
}

/* Estado abierto: altura máxima suficiente y visible */
.details-content.open {
    max-height: 500px; /* Altura arbitraria suficiente para el contenido */
    opacity: 1;
}

/* Rotación de la flecha indicador */
.rotate-180 {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}