:root {
            --color-azul-cseiio: #005691;
            --color-rosa: #E84F9F;
            --color-amarillo: #FBC02D;
            --color-cian: #29B6F6;
            --color-verde: #66BB6A;
            --color-naranja: #FF7043;
            --color-gris: #757575;
            --color-rojo: #C62828;
            --bg-body: #F5F5F5;
            --card-bg: #FFFFFF;
            --color-azul-intenso: #1A73E8;
            --color-morado: #8E24AA;
        }



    .header-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: center;
        flex-wrap: wrap;
        gap: 20px;
    }

    .header-container img {
        max-width: 170px;
        height: auto;
    }

    .header-titles {
        flex: 1;
        min-width: 200px;
    }

    .header-titles h2 {
            color: var(--color-azul-cseiio);
            text-transform: uppercase;
            font-size: 14px;
            margin: 0;
        }

        .header-titles h1 {
            color: var(--color-rojo);
            font-size: 32px;
            font-weight: 900;
            margin: 5px 0;
        }

        .instruction-hint {
            text-align: center;
            font-size: 13px;
            color: #666;
            margin-bottom: 25px;
            font-weight: 600;
        }

        .interactive-timeline {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            margin: 50px 0 30px 0; 
            padding: 0 10px;
            overflow-x: auto;
            gap: 10px;
        }

        .interactive-timeline::before {
            content: '';
            position: absolute;
            top: 45px; 
            left: 40px;
            right: 40px;
            height: 4px;
            background: #E0E0E0;
            z-index: 1;
        }

        .step-node {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            z-index: 2;
            cursor: pointer;
            background: none;
            border: none;
            padding-top: 15px; 
            transition: transform 0.3s ease;
            flex: 1;
        }

        .step-node:hover {
            transform: translateY(-5px);
        }

        .step-circle {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: var(--card-bg);
            border: 4px solid var(--color-gris);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }

        .step-number {
            position: absolute;
            top: 2px; 
            background: var(--color-gris);
            color: white;
            font-size: 10px;
            font-weight: bold;
            padding: 2px 8px;
            border-radius: 10px;
            z-index: 3;
        }

        .step-label {
            font-size: 10px;
            font-weight: 600;
            color: #555;
            margin-top: 8px;
            text-align: center;
            max-width: 90px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .step-node.active .step-circle {
            transform: scale(1.10);
            
        }

        .step-node[data-step="1"] { --active-color: var(--color-rosa); }
        .step-node[data-step="1"] .step-circle { border-color: var(--color-rosa); color: var(--color-rosa); }
        .step-node[data-step="1"] .step-number { background-color: var(--color-rosa); color: #fff; }

        .step-node[data-step="2"] { --active-color: var(--color-amarillo); }
        .step-node[data-step="2"] .step-circle { border-color: var(--color-amarillo); color: #D4AC0D; }
        .step-node[data-step="2"] .step-number { background-color: var(--color-amarillo); color: #000; }

        .step-node[data-step="3"] { --active-color: var(--color-morado); }
        .step-node[data-step="3"] .step-circle { border-color: var(--color-morado); color: var(--color-morado); }
        .step-node[data-step="3"] .step-number { background-color: var(--color-morado); color: #fff; }

        .step-node[data-step="4"] { --active-color: var(--color-verde); }
        .step-node[data-step="4"] .step-circle { border-color: var(--color-verde); color: #507711; }
        .step-node[data-step="4"] .step-number { background-color: var(--color-verde); color: #000; }

        .step-node[data-step="5"] { --active-color: var(--color-azul-intenso); }
        .step-node[data-step="5"] .step-circle { border-color: var(--color-azul-intenso); color: var(--color-azul-intenso); }
        .step-node[data-step="5"] .step-number { background-color: var(--color-azul-intenso); color: #fff; }

        .step-node[data-step="6"] { --active-color: var(--color-gris); }
        .step-node[data-step="6"] .step-circle { border-color: var(--color-gris); color: var(--color-gris); }
        .step-node[data-step="6"] .step-number { background-color: var(--color-gris); color: #fff; }

        .step-node[data-step="7"] { --active-color: var(--color-rosa); }
        .step-node[data-step="7"] .step-circle { border-color: var(--color-rosa); color: var(--color-rosa); }
        .step-node[data-step="7"] .step-number { background-color: var(--color-rosa); color: #fff; }

        .step-node[data-step="8"] { --active-color: var(--color-cian); }
        .step-node[data-step="8"] .step-circle { border-color: var(--color-cian); color: var(--color-cian); }
        .step-node[data-step="8"] .step-number { background-color: var(--color-cian); color: #000; }

        .step-node[data-step="9"] { --active-color: var(--color-morado); }
        .step-node[data-step="9"] .step-circle { border-color: var(--color-morado); color: var(--color-morado); }
        .step-node[data-step="9"] .step-number { background-color: var(--color-morado); color: #fff; }

        .step-node[data-step="10"] { --active-color: var(--color-verde); }
        .step-node[data-step="10"] .step-circle { border-color: var(--color-verde); color: #507711; }
        .step-node[data-step="10"] .step-number { background-color: var(--color-verde); color: #000; }

        .step-node[data-step="11"] { --active-color: var(--color-azul-cseiio); }
        .step-node[data-step="11"] .step-circle { border-color: var(--color-azul-cseiio); color: var(--color-azul-cseiio); }
        .step-node[data-step="11"] .step-number { background-color: var(--color-azul-cseiio); color: #fff; }

        

        .step-node.active [data-step-circle], 
        .step-node.active .step-circle {
            background-color: var(--active-color) ;
            border-color: var(--active-color);
            color: white ;
        }

        .display-card {
            background: linear-gradient(135deg, #ffffff 0%, #f9fbfd 100%);
            border: 2px solid #e1e8ed;
            border-radius: 16px;
            padding: 30px;
            margin-top: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            position: relative;
            animation: fadeIn 0.4s ease-in-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .display-header {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 20px;
            border-bottom: 2px solid #eee;
            padding-bottom: 15px;
        }

        .display-icon-box {
            width: 60px;
            height: 60px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            color: white;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        .display-title-group h3 {
            margin: 0;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #777;
        }

        .display-title-group h2 {
            margin: 5px 0 0 0;
            font-size: 20px;
            font-weight: 800;
            color: #222;
        }

        .display-body {
            font-size: 15px;
            line-height: 1.7;
            color: #444;
            text-align: justify;
        }

        .internship-info {
            display: flex;
            justify-content: center;
            margin: 25px 0 15px 0;
        }

        .internship-pill {
            background-color: #546E7A;
            color: white;
            padding: 10px 25px;
            border-radius: 30px;
            font-size: 13px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.15);
        }

        .internship-pill i {
            color: var(--color-amarillo);
        }

        .timeline-controls {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }

        .nav-btn {
            background-color: var(--color-azul-cseiio);
            color: white;
            border: none;
            padding: 8px 18px;
            border-radius: 8px;
            font-family: 'Montserrat', sans-serif;
            font-weight: 600;
            font-size: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: background 0.2s;
        }

        .nav-btn:hover {
            background-color: #004070;
        }

        @media (max-width: 992px) {
            .interactive-timeline {
                overflow-x: auto;
                justify-content: flex-start;
                padding-bottom: 15px;
            }
            .step-node {
                min-width: 75px;
            }
        }