/* Estilos personalizados para la línea de tiempo de Riesgos y efectos */
        
        /* Contenedor de la sección de riesgo: Añade espacio para la línea vertical a la izquierda */
        .risk-section {
            position: relative;
            padding-left: 35px; /* Espacio para la línea de tiempo */
        }

        /* Línea de tiempo vertical (El eje gris) */
        .risk-section::before {
            content: '';
            position: absolute;
            left: 24px; /* Posición de la línea */
            top: 90px;
            bottom: 50px;
            width: 2px;
            background-color: #e0e0e0;
        }

        /* Estilo para cada tarjeta de riesgo */
        .risk-card {
            position: relative;
            margin-bottom: 20px;
            /* Ajuste para que las tarjetas no se extiendan demasiado horizontalmente */
            max-width: 900px; 
        }

        /* Punto de color en la línea de tiempo */
        .risk-card::before {
            content: '';
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 2px solid white;
            z-index: 10;
            background-color: currentColor; /* El color se toma del borde de la tarjeta */
            left: 12px; /* Alineado con la línea vertical */
            top: 22px; 
            transform: translate(-50%, 0);
        }

        /* Asignación de colores para los puntos de la línea de tiempo */
        .risk-card:nth-child(1)::before { background-color: #F0AD4E; } /* Amarillo */
        .risk-card:nth-child(2)::before { background-color: #EE945D; } /* Naranja */
        .risk-card:nth-child(3)::before { background-color: #5CB85C; } /* Verde */
        .risk-card:nth-child(4)::before { background-color: #3A75C4; } /* Azul */
        
        /* Animación sutil de hover para las tarjetas */
        .nav-card, .summary-card, .content-grid-item {
            transition: all 0.3s ease-in-out;
        }

        .nav-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        
        /* Clase para las tarjetas de riesgo para manejar el margen y centrado */
        .risk-card-content-wrapper {
            max-width: 95%; /* Asegura que la tarjeta no exceda el ancho del contenedor */
            margin-left: 20px; /* Desplaza el contenido de la tarjeta hacia la derecha */
        }

        /* Ajuste para que el encabezado de riesgo tenga la misma alineación en móviles */
        @media (max-width: 768px) {
            .risk-section {
                padding-left: 35px; /* Mantener la alineación a la izquierda en móvil */
            }
        }