Untitled

Gabriel Bogantes Gomez — Tue, 18 Nov 2025 22:49:42 +0000

<!DOCTYPE html>

Test: ¿Qué perfil STEM financiero tienes?

<br>
* {<br>
margin: 0;<br>
padding: 0;<br>
box-sizing: border-box;<br>
}</p>
<div class="highlight"><pre class="highlight plaintext"><code> body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%);
min-height: 100vh;
padding: 20px;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

/* Sección 1: Bienvenida */
.bienvenida {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%);
    color: white;
    padding: 50px 30px;
    text-align: center;
}

.bienvenida h1 {
    font-size: 2.8em;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.bienvenida .objetivo {
    font-size: 1.2em;
    line-height: 1.8;
    opacity: 0.95;
    max-width: 700px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 10px;
    backdrop-filter: blur(10px);
}

/* Sección 2: Formulario */
.formulario {
    padding: 40px 30px;
}

.pregunta {
    margin-bottom: 30px;
    padding: 25px;
    background: #f8f9fa;
    border-radius: 10px;
    border-left: 5px solid #2a5298;
    transition: all 0.3s ease;
}

.pregunta:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.pregunta h3 {
    color: #1e3c72;
    margin-bottom: 18px;
    font-size: 1.15em;
    font-weight: 600;
}

.opciones {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.opcion {
    display: flex;
    align-items: center;
    padding: 15px;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.opcion:hover {
    background: #e3f2fd;
    border-color: #2a5298;
    transform: translateX(5px);
}

.opcion input[type="radio"] {
    margin-right: 12px;
    cursor: pointer;
    width: 20px;
    height: 20px;
    accent-color: #2a5298;
}

.opcion label {
    cursor: pointer;
    flex: 1;
    font-size: 1.05em;
}

.btn-enviar {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%);
    color: white;
    border: none;
    padding: 18px 50px;
    font-size: 1.2em;
    font-weight: 600;
    border-radius: 30px;
    cursor: pointer;
    display: block;
    margin: 40px auto 0;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(42, 82, 152, 0.4);
}

.btn-enviar:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(42, 82, 152, 0.6);
}

/* Sección 3: Resultado */
.resultado {
    padding: 50px 30px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-top: 5px solid #2a5298;
    display: none;
}

.resultado.mostrar {
    display: block;
}

.resultado h2 {
    color: #1e3c72;
    text-align: center;
    margin-bottom: 30px;
    font-size: 2.2em;
}

.perfil-box {
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    max-width: 700px;
    margin: 0 auto;
}

.perfil-icono {
    text-align: center;
    font-size: 4em;
    margin-bottom: 20px;
}

.perfil-tipo {
    font-size: 2.5em;
    font-weight: bold;
    color: #2a5298;
    margin-bottom: 20px;
    text-align: center;
}

.perfil-descripcion {
    font-size: 1.15em;
    color: #333;
    line-height: 1.8;
    margin-bottom: 25px;
}

.perfil-caracteristicas {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    border-left: 4px solid #2a5298;
}

.perfil-caracteristicas h4 {
    color: #1e3c72;
    margin-bottom: 15px;
    font-size: 1.3em;
}

.perfil-caracteristicas ul {
    list-style: none;
    padding: 0;
}

.perfil-caracteristicas li {
    padding: 8px 0;
    padding-left: 25px;
    position: relative;
    color: #555;
    font-size: 1.05em;
}

.perfil-caracteristicas li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #2a5298;
    font-weight: bold;
    font-size: 1.2em;
}

.error {
    color: #dc3545;
    text-align: center;
    padding: 15px;
    background: #f8d7da;
    border-radius: 8px;
    margin-top: 20px;
    display: none;
    border: 2px solid #f5c2c7;
}

.error.mostrar {
    display: block;
}

@media (max-width: 600px) {
    .bienvenida h1 {
        font-size: 2em;
    }

    .formulario {
        padding: 20px 15px;
    }

    .pregunta {
        padding: 20px 15px;
    }

    .perfil-box {
        padding: 25px 20px;
    }

    .perfil-tipo {
        font-size: 1.8em;
    }
}

</style>
</code></pre></div>
<p></head><br>
<body><br>
<div class="container"><br>
<br>
<div class="bienvenida"><br>
<h1>🧪 Test: ¿Qué perfil STEM financiero tienes?</h1><br>
<div class="objetivo"><br>
<strong>🎯 Objetivo:</strong><br><br>
Identificar tu perfil profesional en el cruce entre finanzas y tecnología para inspirarte a explorar roles STEM. Responde honestamente y descubre cómo puedes potenciar tu carrera.<br>
</div><br>
</div></p>
<div class="highlight"><pre class="highlight plaintext"><code> 
<div class="formulario">
<form id="formularioPerfil">

<div class="pregunta">
<h3>1. ¿Qué parte de tu trabajo disfrutas más?</h3>
<div class="opciones">
<div class="opcion">
<input type="radio" name="p1" value="A" id="p1a">
<label for="p1a">Analizar datos y encontrar patrones.</label>
</div>
<div class="opcion">
<input type="radio" name="p1" value="B" id="p1b">
<label for="p1b">Optimizar procesos y eliminar tareas repetitivas.</label>
</div>
<div class="opcion">
<input type="radio" name="p1" value="C" id="p1c">
<label for="p1c">Evaluar impacto económico y tomar decisiones estratégicas.</label>
</div>
</div>
</div>

        &amp;lt;!-- Pregunta 2 --&amp;gt;
        &amp;lt;div class="pregunta"&amp;gt;
            &amp;lt;h3&amp;gt;2. ¿Qué herramienta te gustaría dominar?&amp;lt;/h3&amp;gt;
            &amp;lt;div class="opciones"&amp;gt;
                &amp;lt;div class="opcion"&amp;gt;
                    &amp;lt;input type="radio" name="p2" value="A" id="p2a"&amp;gt;
                    &amp;lt;label for="p2a"&amp;gt;Power BI, SQL, Python.&amp;lt;/label&amp;gt;
                &amp;lt;/div&amp;gt;
                &amp;lt;div class="opcion"&amp;gt;
                    &amp;lt;input type="radio" name="p2" value="B" id="p2b"&amp;gt;
                    &amp;lt;label for="p2b"&amp;gt;RPA, Excel con macros, scripts.&amp;lt;/label&amp;gt;
                &amp;lt;/div&amp;gt;
                &amp;lt;div class="opcion"&amp;gt;
                    &amp;lt;input type="radio" name="p2" value="C" id="p2c"&amp;gt;
                    &amp;lt;label for="p2c"&amp;gt;Excel avanzado, simuladores financieros.&amp;lt;/label&amp;gt;
                &amp;lt;/div&amp;gt;
            &amp;lt;/div&amp;gt;
        &amp;lt;/div&amp;gt;

        &amp;lt;!-- Pregunta 3 --&amp;gt;
        &amp;lt;div class="pregunta"&amp;gt;
            &amp;lt;h3&amp;gt;3. ¿Qué tipo de proyecto te entusiasma más?&amp;lt;/h3&amp;gt;
            &amp;lt;div class="opciones"&amp;gt;
                &amp;lt;div class="opcion"&amp;gt;
                    &amp;lt;input type="radio" name="p3" value="A" id="p3a"&amp;gt;
                    &amp;lt;label for="p3a"&amp;gt;Crear dashboards para visualizar KPIs financieros.&amp;lt;/label&amp;gt;
                &amp;lt;/div&amp;gt;
                &amp;lt;div class="opcion"&amp;gt;
                    &amp;lt;input type="radio" name="p3" value="B" id="p3b"&amp;gt;
                    &amp;lt;label for="p3b"&amp;gt;Automatizar tareas contables o de conciliación.&amp;lt;/label&amp;gt;
                &amp;lt;/div&amp;gt;
                &amp;lt;div class="opcion"&amp;gt;
                    &amp;lt;input type="radio" name="p3" value="C" id="p3c"&amp;gt;
                    &amp;lt;label for="p3c"&amp;gt;Evaluar la rentabilidad de una nueva plataforma digital.&amp;lt;/label&amp;gt;
                &amp;lt;/div&amp;gt;
            &amp;lt;/div&amp;gt;
        &amp;lt;/div&amp;gt;

        &amp;lt;!-- Pregunta 4 --&amp;gt;
        &amp;lt;div class="pregunta"&amp;gt;
            &amp;lt;h3&amp;gt;4. ¿Cuál de estas frases te representa mejor?&amp;lt;/h3&amp;gt;
            &amp;lt;div class="opciones"&amp;gt;
                &amp;lt;div class="opcion"&amp;gt;
                    &amp;lt;input type="radio" name="p4" value="A" id="p4a"&amp;gt;
                    &amp;lt;label for="p4a"&amp;gt;"Los datos me ayudan a tomar mejores decisiones."&amp;lt;/label&amp;gt;
                &amp;lt;/div&amp;gt;
                &amp;lt;div class="opcion"&amp;gt;
                    &amp;lt;input type="radio" name="p4" value="B" id="p4b"&amp;gt;
                    &amp;lt;label for="p4b"&amp;gt;"Si algo se repite, ¡hay que automatizarlo!"&amp;lt;/label&amp;gt;
                &amp;lt;/div&amp;gt;
                &amp;lt;div class="opcion"&amp;gt;
                    &amp;lt;input type="radio" name="p4" value="C" id="p4c"&amp;gt;
                    &amp;lt;label for="p4c"&amp;gt;"Toda inversión debe tener retorno."&amp;lt;/label&amp;gt;
                &amp;lt;/div&amp;gt;
            &amp;lt;/div&amp;gt;
        &amp;lt;/div&amp;gt;

        &amp;lt;!-- Pregunta 5 --&amp;gt;
        &amp;lt;div class="pregunta"&amp;gt;
            &amp;lt;h3&amp;gt;5. ¿Qué impacto te gustaría generar en tu equipo?&amp;lt;/h3&amp;gt;
            &amp;lt;div class="opciones"&amp;gt;
                &amp;lt;div class="opcion"&amp;gt;
                    &amp;lt;input type="radio" name="p5" value="A" id="p5a"&amp;gt;
                    &amp;lt;label for="p5a"&amp;gt;Mejorar la toma de decisiones con datos.&amp;lt;/label&amp;gt;
                &amp;lt;/div&amp;gt;
                &amp;lt;div class="opcion"&amp;gt;
                    &amp;lt;input type="radio" name="p5" value="B" id="p5b"&amp;gt;
                    &amp;lt;label for="p5b"&amp;gt;Liberar tiempo para tareas estratégicas.&amp;lt;/label&amp;gt;
                &amp;lt;/div&amp;gt;
                &amp;lt;div class="opcion"&amp;gt;
                    &amp;lt;input type="radio" name="p5" value="C" id="p5c"&amp;gt;
                    &amp;lt;label for="p5c"&amp;gt;Asegurar que los proyectos sean rentables y sostenibles.&amp;lt;/label&amp;gt;
                &amp;lt;/div&amp;gt;
            &amp;lt;/div&amp;gt;
        &amp;lt;/div&amp;gt;

        &amp;lt;!-- Pregunta 6 --&amp;gt;
        &amp;lt;div class="pregunta"&amp;gt;
            &amp;lt;h3&amp;gt;6. Cuando surge un problema, ¿cómo reaccionas?&amp;lt;/h3&amp;gt;
            &amp;lt;div class="opciones"&amp;gt;
                &amp;lt;div class="opcion"&amp;gt;
                    &amp;lt;input type="radio" name="p6" value="A" id="p6a"&amp;gt;
                    &amp;lt;label for="p6a"&amp;gt;Busco datos para entender la causa.&amp;lt;/label&amp;gt;
                &amp;lt;/div&amp;gt;
                &amp;lt;div class="opcion"&amp;gt;
                    &amp;lt;input type="radio" name="p6" value="B" id="p6b"&amp;gt;
                    &amp;lt;label for="p6b"&amp;gt;Pienso cómo automatizar para evitar que se repita.&amp;lt;/label&amp;gt;
                &amp;lt;/div&amp;gt;
                &amp;lt;div class="opcion"&amp;gt;
                    &amp;lt;input type="radio" name="p6" value="C" id="p6c"&amp;gt;
                    &amp;lt;label for="p6c"&amp;gt;Analizo el impacto financiero antes de actuar.&amp;lt;/label&amp;gt;
                &amp;lt;/div&amp;gt;
            &amp;lt;/div&amp;gt;
        &amp;lt;/div&amp;gt;

        &amp;lt;!-- Pregunta 7 --&amp;gt;
        &amp;lt;div class="pregunta"&amp;gt;
            &amp;lt;h3&amp;gt;7. ¿Qué aprendizaje te motiva más?&amp;lt;/h3&amp;gt;
            &amp;lt;div class="opciones"&amp;gt;
                &amp;lt;div class="opcion"&amp;gt;
                    &amp;lt;input type="radio" name="p7" value="A" id="p7a"&amp;gt;
                    &amp;lt;label for="p7a"&amp;gt;Ciencia de datos aplicada a finanzas.&amp;lt;/label&amp;gt;
                &amp;lt;/div&amp;gt;
                &amp;lt;div class="opcion"&amp;gt;
                    &amp;lt;input type="radio" name="p7" value="B" id="p7b"&amp;gt;
                    &amp;lt;label for="p7b"&amp;gt;Automatización y eficiencia operativa.&amp;lt;/label&amp;gt;
                &amp;lt;/div&amp;gt;
                &amp;lt;div class="opcion"&amp;gt;
                    &amp;lt;input type="radio" name="p7" value="C" id="p7c"&amp;gt;
                    &amp;lt;label for="p7c"&amp;gt;Modelos de ROI y análisis estratégico.&amp;lt;/label&amp;gt;
                &amp;lt;/div&amp;gt;
            &amp;lt;/div&amp;gt;
        &amp;lt;/div&amp;gt;

        &amp;lt;div class="error" id="mensajeError"&amp;gt;
            ⚠️ Por favor, responde todas las preguntas antes de continuar.
        &amp;lt;/div&amp;gt;

        &amp;lt;button type="submit" class="btn-enviar"&amp;gt;✨ Descubrir Mi Perfil STEM&amp;lt;/button&amp;gt;
    &amp;lt;/form&amp;gt;
&amp;lt;/div&amp;gt;

&amp;lt;!-- Sección 3: Resultado --&amp;gt;
&amp;lt;div class="resultado" id="resultadoPerfil"&amp;gt;
    &amp;lt;h2&amp;gt;🎉 ¡Tu Resultado!&amp;lt;/h2&amp;gt;
    &amp;lt;div class="perfil-box"&amp;gt;
        &amp;lt;div class="perfil-icono" id="iconoPerfil"&amp;gt;&amp;lt;/div&amp;gt;
        &amp;lt;div class="perfil-tipo" id="tipoPerfil"&amp;gt;&amp;lt;/div&amp;gt;
        &amp;lt;div class="perfil-descripcion" id="descripcionPerfil"&amp;gt;&amp;lt;/div&amp;gt;
        &amp;lt;div class="perfil-caracteristicas" id="caracteristicasPerfil"&amp;gt;&amp;lt;/div&amp;gt;
    &amp;lt;/div&amp;gt;
&amp;lt;/div&amp;gt;

</div>

    // Inicializar contadores
    let contadorA = 0;
    let contadorB = 0;
    let contadorC = 0;

    // Verificar que todas las preguntas estén respondidas
    let todasRespondidas = true;
    for (let i = 1; i &amp;lt;= 7; i++) {
        const respuesta = document.querySelector(`input[name="p${i}"]:checked`);
        if (!respuesta) {
            todasRespondidas = false;
            break;
        }
    }

    // Mostrar error si falta alguna respuesta
    const mensajeError = document.getElementById('mensajeError');
    if (!todasRespondidas) {
        mensajeError.classList.add('mostrar');
        mensajeError.scrollIntoView({ behavior: 'smooth', block: 'center' });
        return;
    } else {
        mensajeError.classList.remove('mostrar');
    }

    // Contar las respuestas
    for (let i = 1; i &amp;lt;= 7; i++) {
        const respuesta = document.querySelector(`input[name="p${i}"]:checked`).value;

        if (respuesta === 'A') {
            contadorA++;
        } else if (respuesta === 'B') {
            contadorB++;
        } else if (respuesta === 'C') {
            contadorC++;
        }
    }

    // Determinar el perfil dominante usando IF
    let icono = '';
    let tipoPerfil = '';
    let descripcionPerfil = '';
    let caracteristicas = '';

    if (contadorA &amp;gt; contadorB &amp;amp;&amp;amp; contadorA &amp;gt; contadorC) {
        // Perfil Analítico
        icono = '📊';
        tipoPerfil = 'Perfil Analítico';
        descripcionPerfil = `Tu perfil es &amp;lt;strong&amp;gt;Analítico&amp;lt;/strong&amp;gt; porque la mayoría de tus respuestas fueron A (${contadorA} de 7). Te apasiona transformar datos en decisiones estratégicas y visualizar información compleja de manera clara.`;
        caracteristicas = `
            &amp;lt;h4&amp;gt;🎯 Tu perfil ideal incluye:&amp;lt;/h4&amp;gt;
            &amp;lt;ul&amp;gt;
                &amp;lt;li&amp;gt;Usar Power BI, Excel avanzado y Python para análisis de rentabilidad&amp;lt;/li&amp;gt;
                &amp;lt;li&amp;gt;Crear dashboards que faciliten la toma de decisiones&amp;lt;/li&amp;gt;
                &amp;lt;li&amp;gt;Identificar patrones y tendencias en datos financieros&amp;lt;/li&amp;gt;
                &amp;lt;li&amp;gt;Roles ideales: Analista Financiero Digital, Data Analyst, Business Intelligence Specialist&amp;lt;/li&amp;gt;
            &amp;lt;/ul&amp;gt;
        `;
    } else if (contadorB &amp;gt; contadorA &amp;amp;&amp;amp; contadorB &amp;gt; contadorC) {
        // Perfil Operativo
        icono = '⚙️';
        tipoPerfil = 'Perfil Operativo';
        descripcionPerfil = `Tu perfil es &amp;lt;strong&amp;gt;Operativo&amp;lt;/strong&amp;gt; porque la mayoría de tus respuestas fueron B (${contadorB} de 7). Te motiva optimizar procesos, eliminar tareas repetitivas y hacer que todo funcione de manera más eficiente.`;
        caracteristicas = `
            &amp;lt;h4&amp;gt;🎯 Tu perfil ideal incluye:&amp;lt;/h4&amp;gt;
            &amp;lt;ul&amp;gt;
                &amp;lt;li&amp;gt;Optimizar procesos con RPA (Robotic Process Automation) y macros&amp;lt;/li&amp;gt;
                &amp;lt;li&amp;gt;Automatizar tareas contables y de conciliación&amp;lt;/li&amp;gt;
                &amp;lt;li&amp;gt;Mejorar la eficiencia operativa del equipo&amp;lt;/li&amp;gt;
                &amp;lt;li&amp;gt;Roles ideales: Especialista en Automatización, Process Improvement Analyst, RPA Developer&amp;lt;/li&amp;gt;
            &amp;lt;/ul&amp;gt;
        `;
    } else if (contadorC &amp;gt; contadorA &amp;amp;&amp;amp; contadorC &amp;gt; contadorB) {
        // Perfil Estratégico
        icono = '🎯';
        tipoPerfil = 'Perfil Estratégico';
        descripcionPerfil = `Tu perfil es &amp;lt;strong&amp;gt;Estratégico&amp;lt;/strong&amp;gt; porque la mayoría de tus respuestas fueron C (${contadorC} de 7). Te enfocas en el impacto económico, el retorno de inversión y las decisiones que impulsan el crecimiento sostenible.`;
        caracteristicas = `
            &amp;lt;h4&amp;gt;🎯 Tu perfil ideal incluye:&amp;lt;/h4&amp;gt;
            &amp;lt;ul&amp;gt;
                &amp;lt;li&amp;gt;Evaluar el ROI de proyectos tecnológicos y de automatización&amp;lt;/li&amp;gt;
                &amp;lt;li&amp;gt;Participar en decisiones estratégicas de inversión&amp;lt;/li&amp;gt;
                &amp;lt;li&amp;gt;Analizar la rentabilidad de nuevas plataformas digitales&amp;lt;/li&amp;gt;
                &amp;lt;li&amp;gt;Roles ideales: Financial Planning &amp;amp; Analysis, Strategy Analyst, Investment Analyst&amp;lt;/li&amp;gt;
            &amp;lt;/ul&amp;gt;
        `;
    } else {
        // Perfil Híbrido (empate)
        icono = '🌟';
        tipoPerfil = 'Perfil Híbrido';
        descripcionPerfil = `Tus respuestas muestran un &amp;lt;strong&amp;gt;Perfil Híbrido&amp;lt;/strong&amp;gt; con características equilibradas (A: ${contadorA}, B: ${contadorB}, C: ${contadorC}). Esto significa que eres versátil y puedes adaptarte a diferentes roles en el ecosistema STEM financiero.`;
        caracteristicas = `
            &amp;lt;h4&amp;gt;🎯 Tu versatilidad te permite:&amp;lt;/h4&amp;gt;
            &amp;lt;ul&amp;gt;
                &amp;lt;li&amp;gt;Combinar análisis de datos con optimización de procesos&amp;lt;/li&amp;gt;
                &amp;lt;li&amp;gt;Integrar visión estratégica con ejecución operativa&amp;lt;/li&amp;gt;
                &amp;lt;li&amp;gt;Adaptarte a diferentes proyectos y necesidades del equipo&amp;lt;/li&amp;gt;
                &amp;lt;li&amp;gt;Roles ideales: Business Analyst, Project Manager, Financial Analyst con enfoque tecnológico&amp;lt;/li&amp;gt;
            &amp;lt;/ul&amp;gt;
        `;
    }

    // Mostrar el resultado
    document.getElementById('iconoPerfil').textContent = icono;
    document.getElementById('tipoPerfil').textContent = tipoPerfil;
    document.getElementById('descripcionPerfil').innerHTML = descripcionPerfil;
    document.getElementById('caracteristicasPerfil').innerHTML = caracteristicas;
    document.getElementById('resultadoPerfil').classList.add('mostrar');

    // Hacer scroll suave al resultado
    setTimeout(() =&amp;gt; {
        document.getElementById('resultadoPerfil').scrollIntoView({ 
            behavior: 'smooth',
            block: 'start'
        });
    }, 100);
});

</script>
</code></pre></div>
<p></body><br>
</html></p>

Forem: Gabriel Bogantes Gomez

Untitled