:root {
            --green-indicages: #8BC53F;
            --grey-indicages: #4D4D4D;
            --blue-tesla: #0076c0;
            --dark-theme: #2c3e50;
            --light-background: #f8f9fa;
            --white: #ffffff;
        }

        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: var(--grey-indicages); margin: 0; background-color: var(--white); }
        .container { max-width: 1100px; margin: auto; overflow: hidden; padding: 0 20px; }
        .placeholder-box { background-color: #e0e0e0; border: 2px dashed #ccc; text-align: center; padding: 10px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; color: #777; font-size: 0.9em;}
        header, footer { background-color: var(--dark-theme); color: var(--white); padding: 1rem 0; }
        .logo img{ max-height: 80px; max-width: 180px; }
        footer .logo { height: 30px; margin: 5px; }
        section { padding: 50px 0; border-bottom: 1px solid #e9ecef; }
        h1, h2, h3 { color: var(--dark-theme); font-weight: 600; }
        h1 { font-size: 2.8rem; line-height: 1.2; }
        h2 { font-size: 2.2rem; text-align: center; margin-bottom: 40px;}
        .grid-2, .grid-4 { display: grid; gap: 30px; align-items: start;}
        .grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
        .grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
        .hero { text-align: center; padding: 60px 0; background-color: var(--light-background); }
        .product-logo { width: 300px; height: 100px; margin: 0 auto 30px auto;  }
        .cta-button { display: inline-block; background-color: var(--green-indicages); color: var(--white); padding: 14px 30px; text-decoration: none; border-radius: 5px; margin-top: 20px; font-weight: bold; transition: transform 0.2s; }
        .cta-button:hover { transform: scale(1.05); }
        .funding-logos { display: flex; justify-content: center; align-items: center; gap: 40px; flex-wrap: wrap; margin-top: 20px; }
        .funding-logos .logos img { max-height: 80px; max-width: 98%; } 
        .icon-feature { font-size: 3rem; color: var(--green-indicages); margin-bottom: 20px; }
        .text-center { text-align: center; }

        /* --- ANOTACIÓN UX/UI: Estilos para el nuevo gráfico de TRL --- */
        .trl-graphic-container {
            display: flex;
            justify-content: space-between;
            align-items: stretch;
            gap: 20px;
            flex-wrap: wrap;
            margin-top: 40px;
        }
        .trl-step {
            flex: 1;
            min-width: 250px;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            display: flex;
            flex-direction: column;
            background-color: var(--light-background);
            position: relative;
            padding-top: 50px;
        }
        .trl-number {
            position: absolute;
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            color: var(--white);
            font-size: 1.5rem;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 3px solid var(--white);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .trl-step.completed .trl-number { background-color: var(--green-indicages); }
        .trl-step.in-progress .trl-number { background-color: var(--blue-tesla); }
        .trl-step.target .trl-number { background-color: var(--grey-indicages); }
        
        .trl-details h4 { margin: 0 0 10px 0; font-size: 1.1rem;}
        .trl-details p { font-size: 0.9rem; margin: 0; flex-grow: 1; }
        .trl-status {
            margin-top: 15px;
            padding: 5px 10px;
            border-radius: 15px;
            font-size: 0.8rem;
            font-weight: bold;
            color: var(--white);
            display: inline-block;
        }
        .completed .trl-status { background-color: var(--green-indicages); }
        .in-progress .trl-status { background-color: var(--blue-tesla); }
        .target .trl-status { background-color: var(--grey-indicages); }
        
            /* Estilos para la sección de Informes (cards) */
            .insights-grid {
                display: grid;
                /* aumentar el mínimo para que haya menos cards por fila y mejorar legibilidad */
                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                gap: 24px;
                align-items: stretch;
                grid-auto-rows: 1fr;
            }

            .insight-card {
                background-color: var(--white);
                border: 1px solid #e6e6e6;
                border-radius: 10px;
                box-shadow: 0 2px 6px rgba(0,0,0,0.04);
                overflow: hidden;
                transition: transform 0.15s ease, box-shadow 0.15s ease;
            }

            .insight-card:hover, .insight-card:focus-within {
                transform: translateY(-4px);
                box-shadow: 0 8px 20px rgba(0,0,0,0.08);
            }

            .insight-link { display: block; color: inherit; text-decoration: none; padding: 18px; height: 100%; }

            .insight-card .icon { font-size: 2.2rem; color: #c0392b; margin-bottom: 12px; }
            .insight-card h3 { margin: 0 0 8px 0; font-size: 1.05rem; color: var(--dark-theme); }
            .insight-card .filename { margin: 0; font-size: 0.85rem; color: #6c757d; }

            .insight-link:focus { outline: 3px solid rgba(0,118,192,0.18); outline-offset: 2px; }

            @media (max-width: 520px) {
                .insight-card { border-radius: 8px; }
            }

            @media (max-width: 900px) {
                /* mostrar 1-2 cards por fila en pantallas medianas */
                .insights-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
            }

            .insight-desc {
                margin: 8px 0 0 0;
                font-size: 0.95rem;
                color: #6c757d;
                line-height: 1.4;
            }