/* Paleta de Colores basada en UI Clínica */
        :root {
            --color-bg-main: #f3f6f9;
            --color-nav-bg: #0b2e4f;       
            --color-sidebar-bg: #143e60;   
            --color-card-bg: #ffffff;
            --color-text-main: #2d3748;
            --color-text-muted: #718096;
            --color-accent: #0078d4;       
            --color-border: #e2e8f0;
            --color-info-bg: #ebf8ff;
            --color-info-border: #3182ce;
            
            --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            --radius-md: 8px;
            --radius-sm: 4px;
            --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
            --shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        
        body {
            font-family: var(--font-main);
            background-color: var(--color-bg-main);
            color: var(--color-text-main);
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* Navbar estilo UI Clínica */
        .navbar {
            background-color: var(--color-nav-bg);
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 40px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        .navbar a { color: #ffffff; text-decoration: none; font-size: 0.95em; font-weight: 500; letter-spacing: 0.5px; }
        .navbar a:hover { color: #90cdf4; }
        .nav-brand { font-weight: bold; font-size: 1.2em; color: #ffffff !important; display: flex; align-items: center; gap: 10px;}

        .container {
            max-width: 1000px;
            width: 100%;
            margin-inline: auto;
            padding: 30px 20px;
        }

        /* Banner de Propuesta de Valor */
        .value-proposition {
            background-color: var(--color-sidebar-bg);
            color: white;
            padding: 40px 50px;
            border-radius: var(--radius-md);
            margin-bottom: 26px;
            text-align: center;
            box-shadow: var(--shadow-sm);
        }
        .value-text h1 { margin: 0 0 15px 0; font-size: 2.2em; }
        .value-text p { margin: 0 auto; font-size: 1.1em; line-height: 1.6; color: #e2e8f0; max-width: 800px; }

        /* Contenedor del Flujo Vertical */
        .workflow-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 40px;
            width: 100%;
        }

        /* Tarjetas de Pasos */
        .step-card {
            background-color: var(--color-card-bg);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
            padding: 25px;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 30px;
            width: 100%;
            box-shadow: var(--shadow-sm);
            transition: all 0.2s ease;
        }
        .step-card:hover {
            border-color: var(--color-accent);
            transform: translateX(5px);
            box-shadow: var(--shadow-hover);
        }

        /* Para resaltar el último paso (Informe) */
        .step-card.highlight {
            border-left: 5px solid var(--color-accent);
            background-color: var(--color-info-bg);
        }

        /* Contenido de texto en la tarjeta */
        .step-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .step-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 12px;
        }
        .step-num {
            background-color: var(--color-nav-bg);
            color: white;
            font-weight: bold;
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 0.9em;
            letter-spacing: 1px;
        }
        .step-title {
            font-size: 1.3em;
            font-weight: 600;
            color: var(--color-nav-bg);
            margin: 0;
        }

        .step-card p {
            color: var(--color-text-muted);
            font-size: 1em;
            line-height: 1.6;
            margin: 0;
        }

        /* Marcadores de Imagen en Horizontal */
        .img-placeholder {
            background-color: #f8fafc;
            border: 1px dashed #cbd5e0;
            border-radius: var(--radius-sm);
            width: 280px;
            height: 180px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 15px;
            background-size: cover;
            background-position: center;
            color: #a0aec0;
            font-size: 0.8em;
            font-weight: 500;
        }

        /* Flechas Conectoras entre filas */
        .flow-arrow {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px 0;
            color: var(--color-accent);
        }
        .flow-arrow svg {
            width: 36px;
            height: 36px;
            stroke-width: 2.5;
        }

        /* Sección de CTA Consultivo */
        .cta-section {
            background-color: white;
            border: 1px solid var(--color-border);
            padding: 50px;
            border-radius: var(--radius-md);
            text-align: center;
            box-shadow: var(--shadow-hover);
        }
        .cta-section h2 { color: var(--color-nav-bg); margin-top: 0; font-size: 1.8em; }
        .cta-section p { color: var(--color-text-muted); font-size: 1.1em; max-width: 800px; margin: 0 auto 30px auto; line-height: 1.6; }
        
        .btn-primary {
            background-color: var(--color-accent);
            color: white;
            padding: 15px 35px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: bold;
            font-size: 1.1em;
            display: inline-block;
            transition: background-color 0.2s;
            box-shadow: 0 4px 6px rgba(0, 120, 212, 0.3);
        }
        .btn-primary:hover { background-color: #005a9e; }
        .btn-secondary {
            background-color: transparent;
            color: var(--color-accent);
            border: 2px solid var(--color-accent);
            padding: 13px 30px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: bold;
            font-size: 1.1em;
            display: inline-block;
            margin-left: 15px;
            transition: all 0.2s;
        }
        .btn-secondary:hover { background-color: var(--color-info-bg); }

        @media (max-width: 768px) {
            .step-card { flex-direction: column; text-align: center; gap: 20px; padding: 20px; }
            .step-header { flex-direction: column; gap: 10px; }
            .img-placeholder { width: 100%; height: auto; aspect-ratio: 16/9; }
            .btn-secondary { margin-left: 0; margin-top: 15px; display: block; }
            .navbar { padding: 15px 20px; }
            .value-proposition { padding: 30px 20px; }
        }
    
        /* Revisión visual: eje central único y acentos por etapa. */
        body > .container { width: min(var(--mq-page-width,1200px),100%); margin-inline: auto; }
        .workflow-container, .commission-references, .cta-section { width: 100%; margin-inline: auto; }
        .step-card { --step-accent:#0284c7; --step-soft:#eaf7ff; border-left:4px solid var(--step-accent); }
        .step-card[data-step="2"],.step-card[data-step="9"] { --step-accent:#0d9488; --step-soft:#e6faf5; }
        .step-card[data-step="3"],.step-card[data-step="8"] { --step-accent:#7c3aed; --step-soft:#f2edff; }
        .step-card[data-step="4"] { --step-accent:#d97706; --step-soft:#fff6e5; }
        .step-card[data-step="6"] { --step-accent:#2563eb; --step-soft:#eef3ff; }
        .step-card[data-step="7"] { --step-accent:#0891b2; --step-soft:#e7faff; }
        .workflow-container .step-card .step-figure { background:var(--step-soft); border-color:var(--step-accent); box-shadow:0 6px 20px #06365e0b; }
        .step-card .step-num { background:var(--step-accent); }
        .step-card .step-content { min-width:0; }
        .step-card p { color:#40596f; }
        .step-card.highlight { border-left-color:var(--step-accent); background:var(--step-soft); }
        .flow-arrow { padding:10px 0; }
        .commission-references h2,.cta-section h2 { text-align:center; }
        .commission-references > p { text-align:center; max-width:850px; margin-inline:auto; }
        .cta-section { background:linear-gradient(125deg,#f0faff,#f0fdfa); }