: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;
        }
        .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); }