↩️ index

<div
  style="box-sizing: border-box; font-family: 'Plus Jakarta Sans','Segoe UI',sans-serif; color: #1a1e35; line-height: 1.7; font-size: 15px; background: #eef1f9; padding: 8px;">
  <!-- PORTADA -->
  <div
    style="position: relative; background: #091d5a; min-height: 50vh; display: flex; align-items: center; justify-content: flex-start; padding: 70px 10% 70px 12%; overflow: hidden; border-radius: 6px; margin-bottom: 0;">
    <svg style="position: absolute; top: 0; right: 0; pointer-events: none;"
      aria-hidden="true">
      <circle cx="300" cy="0" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="1.0"></circle>
      <circle cx="282" cy="0" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.92"></circle>
      <circle cx="264" cy="0" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.84"></circle>
      <circle cx="246" cy="0" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.76"></circle>
      <circle cx="228" cy="0" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.68"></circle>
      <circle cx="210" cy="0" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.59"></circle>
      <circle cx="192" cy="0" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.51"></circle>
      <circle cx="174" cy="0" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.43"></circle>
      <circle cx="156" cy="0" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.35"></circle>
      <circle cx="138" cy="0" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.27"></circle>
      <circle cx="120" cy="0" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.19"></circle>
      <circle cx="102" cy="0" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.11"></circle>
      <circle cx="84" cy="0" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.02"></circle>
      <circle cx="300" cy="18" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.92"></circle>
      <circle cx="282" cy="18" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.89"></circle>
      <circle cx="264" cy="18" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.82"></circle>
      <circle cx="246" cy="18" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.74"></circle>
      <circle cx="228" cy="18" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.66"></circle>
      <circle cx="210" cy="18" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.59"></circle>
      <circle cx="192" cy="18" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.51"></circle>
      <circle cx="174" cy="18" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.43"></circle>
      <circle cx="156" cy="18" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.34"></circle>
      <circle cx="138" cy="18" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.26"></circle>
      <circle cx="120" cy="18" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.18"></circle>
      <circle cx="102" cy="18" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.1"></circle>
      <circle cx="84" cy="18" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.02"></circle>
      <circle cx="300" cy="36" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.84"></circle>
      <circle cx="282" cy="36" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.82"></circle>
      <circle cx="264" cy="36" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.77"></circle>
      <circle cx="246" cy="36" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.71"></circle>
      <circle cx="228" cy="36" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.64"></circle>
      <circle cx="210" cy="36" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.56"></circle>
      <circle cx="192" cy="36" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.49"></circle>
      <circle cx="174" cy="36" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.41"></circle>
      <circle cx="156" cy="36" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.33"></circle>
      <circle cx="138" cy="36" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.25"></circle>
      <circle cx="120" cy="36" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.17"></circle>
      <circle cx="102" cy="36" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.09"></circle>
      <circle cx="84" cy="36" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.01"></circle>
      <circle cx="300" cy="54" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.76"></circle>
      <circle cx="282" cy="54" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.74"></circle>
      <circle cx="264" cy="54" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.71"></circle>
      <circle cx="246" cy="54" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.66"></circle>
      <circle cx="228" cy="54" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.59"></circle>
      <circle cx="210" cy="54" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.53"></circle>
      <circle cx="192" cy="54" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.45"></circle>
      <circle cx="174" cy="54" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.38"></circle>
      <circle cx="156" cy="54" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.31"></circle>
      <circle cx="138" cy="54" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.23"></circle>
      <circle cx="120" cy="54" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.15"></circle>
      <circle cx="102" cy="54" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.07"></circle>
      <circle cx="300" cy="72" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.68"></circle>
      <circle cx="282" cy="72" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.66"></circle>
      <circle cx="264" cy="72" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.64"></circle>
      <circle cx="246" cy="72" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.59"></circle>
      <circle cx="228" cy="72" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.54"></circle>
      <circle cx="210" cy="72" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.48"></circle>
      <circle cx="192" cy="72" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.41"></circle>
      <circle cx="174" cy="72" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.34"></circle>
      <circle cx="156" cy="72" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.27"></circle>
      <circle cx="138" cy="72" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.2"></circle>
      <circle cx="120" cy="72" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.12"></circle>
      <circle cx="102" cy="72" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.05"></circle>
      <circle cx="300" cy="90" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.59"></circle>
      <circle cx="282" cy="90" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.59"></circle>
      <circle cx="264" cy="90" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.56"></circle>
      <circle cx="246" cy="90" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.53"></circle>
      <circle cx="228" cy="90" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.48"></circle>
      <circle cx="210" cy="90" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.43"></circle>
      <circle cx="192" cy="90" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.37"></circle>
      <circle cx="174" cy="90" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.3"></circle>
      <circle cx="156" cy="90" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.23"></circle>
      <circle cx="138" cy="90" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.16"></circle>
      <circle cx="120" cy="90" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.09"></circle>
      <circle cx="102" cy="90" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.02"></circle>
      <circle cx="300" cy="108" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.51"></circle>
      <circle cx="282" cy="108" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.51"></circle>
      <circle cx="264" cy="108" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.49"></circle>
      <circle cx="246" cy="108" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.45"></circle>
      <circle cx="228" cy="108" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.41"></circle>
      <circle cx="210" cy="108" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.37"></circle>
      <circle cx="192" cy="108" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.31"></circle>
      <circle cx="174" cy="108" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.25"></circle>
      <circle cx="156" cy="108" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.19"></circle>
      <circle cx="138" cy="108" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.12"></circle>
      <circle cx="120" cy="108" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.05"></circle>
      <circle cx="300" cy="126" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.43"></circle>
      <circle cx="282" cy="126" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.43"></circle>
      <circle cx="264" cy="126" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.41"></circle>
      <circle cx="246" cy="126" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.38"></circle>
      <circle cx="228" cy="126" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.34"></circle>
      <circle cx="210" cy="126" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.3"></circle>
      <circle cx="192" cy="126" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.25"></circle>
      <circle cx="174" cy="126" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.2"></circle>
      <circle cx="156" cy="126" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.14"></circle>
      <circle cx="138" cy="126" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.07"></circle>
      <circle cx="120" cy="126" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.01"></circle>
      <circle cx="300" cy="144" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.35"></circle>
      <circle cx="282" cy="144" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.34"></circle>
      <circle cx="264" cy="144" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.33"></circle>
      <circle cx="246" cy="144" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.31"></circle>
      <circle cx="228" cy="144" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.27"></circle>
      <circle cx="210" cy="144" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.23"></circle>
      <circle cx="192" cy="144" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.19"></circle>
      <circle cx="174" cy="144" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.14"></circle>
      <circle cx="156" cy="144" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.08"></circle>
      <circle cx="138" cy="144" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.02"></circle>
      <circle cx="300" cy="162" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.27"></circle>
      <circle cx="282" cy="162" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.26"></circle>
      <circle cx="264" cy="162" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.25"></circle>
      <circle cx="246" cy="162" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.23"></circle>
      <circle cx="228" cy="162" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.2"></circle>
      <circle cx="210" cy="162" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.16"></circle>
      <circle cx="192" cy="162" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.12"></circle>
      <circle cx="174" cy="162" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.07"></circle>
      <circle cx="156" cy="162" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.02"></circle>
      <circle cx="300" cy="180" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.19"></circle>
      <circle cx="282" cy="180" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.18"></circle>
      <circle cx="264" cy="180" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.17"></circle>
      <circle cx="246" cy="180" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.15"></circle>
      <circle cx="228" cy="180" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.12"></circle>
      <circle cx="210" cy="180" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.09"></circle>
      <circle cx="192" cy="180" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.05"></circle>
      <circle cx="174" cy="180" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.01"></circle>
      <circle cx="300" cy="198" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.11"></circle>
      <circle cx="282" cy="198" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.1"></circle>
      <circle cx="264" cy="198" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.09"></circle>
      <circle cx="246" cy="198" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.07"></circle>
      <circle cx="228" cy="198" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.05"></circle>
      <circle cx="210" cy="198" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.02"></circle>
      <circle cx="300" cy="216" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.02"></circle>
      <circle cx="282" cy="216" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.02"></circle>
      <circle cx="264" cy="216" r="1.5" fill="rgba(100,140,220,0.55)"
        opacity="0.01"></circle>
    </svg><svg
      style="position: absolute; bottom: 0; left: 0; pointer-events: none;"
      aria-hidden="true">
      <circle cx="0" cy="250" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.75"></circle>
      <circle cx="18" cy="250" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.66"></circle>
      <circle cx="36" cy="250" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.57"></circle>
      <circle cx="54" cy="250" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.47"></circle>
      <circle cx="72" cy="250" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.38"></circle>
      <circle cx="90" cy="250" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.29"></circle>
      <circle cx="108" cy="250" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.2"></circle>
      <circle cx="126" cy="250" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.1"></circle>
      <circle cx="144" cy="250" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.01"></circle>
      <circle cx="0" cy="232" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.66"></circle>
      <circle cx="18" cy="232" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.62"></circle>
      <circle cx="36" cy="232" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.54"></circle>
      <circle cx="54" cy="232" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.46"></circle>
      <circle cx="72" cy="232" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.37"></circle>
      <circle cx="90" cy="232" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.28"></circle>
      <circle cx="108" cy="232" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.19"></circle>
      <circle cx="126" cy="232" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.1"></circle>
      <circle cx="144" cy="232" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.01"></circle>
      <circle cx="0" cy="214" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.57"></circle>
      <circle cx="18" cy="214" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.54"></circle>
      <circle cx="36" cy="214" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.49"></circle>
      <circle cx="54" cy="214" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.42"></circle>
      <circle cx="72" cy="214" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.34"></circle>
      <circle cx="90" cy="214" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.25"></circle>
      <circle cx="108" cy="214" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.17"></circle>
      <circle cx="126" cy="214" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.08"></circle>
      <circle cx="0" cy="196" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.47"></circle>
      <circle cx="18" cy="196" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.46"></circle>
      <circle cx="36" cy="196" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.42"></circle>
      <circle cx="54" cy="196" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.36"></circle>
      <circle cx="72" cy="196" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.29"></circle>
      <circle cx="90" cy="196" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.21"></circle>
      <circle cx="108" cy="196" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.13"></circle>
      <circle cx="126" cy="196" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.05"></circle>
      <circle cx="0" cy="178" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.38"></circle>
      <circle cx="18" cy="178" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.37"></circle>
      <circle cx="36" cy="178" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.34"></circle>
      <circle cx="54" cy="178" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.29"></circle>
      <circle cx="72" cy="178" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.23"></circle>
      <circle cx="90" cy="178" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.16"></circle>
      <circle cx="108" cy="178" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.08"></circle>
      <circle cx="126" cy="178" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.01"></circle>
      <circle cx="0" cy="160" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.29"></circle>
      <circle cx="18" cy="160" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.28"></circle>
      <circle cx="36" cy="160" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.25"></circle>
      <circle cx="54" cy="160" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.21"></circle>
      <circle cx="72" cy="160" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.16"></circle>
      <circle cx="90" cy="160" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.1"></circle>
      <circle cx="108" cy="160" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.03"></circle>
      <circle cx="0" cy="142" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.2"></circle>
      <circle cx="18" cy="142" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.19"></circle>
      <circle cx="36" cy="142" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.17"></circle>
      <circle cx="54" cy="142" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.13"></circle>
      <circle cx="72" cy="142" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.08"></circle>
      <circle cx="90" cy="142" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.03"></circle>
      <circle cx="0" cy="124" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.1"></circle>
      <circle cx="18" cy="124" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.1"></circle>
      <circle cx="36" cy="124" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.08"></circle>
      <circle cx="54" cy="124" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.05"></circle>
      <circle cx="72" cy="124" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.01"></circle>
      <circle cx="0" cy="106" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.01"></circle>
      <circle cx="18" cy="106" r="1.5" fill="rgba(100,140,220,0.45)"
        opacity="0.01"></circle>
    </svg>
    <div
      style="position: absolute; top: 50%; left: 20%; transform: translate(-50%,-50%); width: 500px; height: 500px; background: radial-gradient(circle,rgba(46,95,199,0.18) 0%,transparent 70%); pointer-events: none;">
       </div>
    <div style="position: relative; z-index: 2; max-width: 520px;">
      <h2
        style="font-family: 'Segoe UI',sans-serif; font-size: 3rem; font-weight: 800; color: #ffffff; line-height: 1.15; letter-spacing: -0.5px; margin-bottom: 28px; border: none;">
        U1 - Guía de<br>actividades</h2>
      <div
        style="width: 360px; max-width: 100%; height: 1.5px; background: linear-gradient(90deg,rgba(255,255,255,0.55) 0%,rgba(255,255,255,0.08) 100%); border: none; margin: 0;">
         </div>
    </div>
  </div>
  <!-- CARD 1 -->
  <div
    style="background: #ffffff; border-radius: 4px; box-shadow: 0 2px 18px rgba(9,29,90,0.10); margin-top: 24px; overflow: hidden;">
    <div
      style="background: #091d5a; padding: 12px 32px; display: flex; align-items: center; gap: 14px;">
      <span
        style="font-family: 'Segoe UI',sans-serif; font-size: 0.75rem; font-weight: 600; color: #ffffff; letter-spacing: 0.06em; text-transform: uppercase; margin: 0;">Guía
        de actividades</span>
      <div
        style="flex: 1; height: 2px; background: #2d5fc7; border-radius: 2px;"> 
      </div>
    </div>
    <div style="padding: 40px 48px 48px;">
      <p
        style="font-size: 0.96rem; color: #1a1e35; text-align: justify; margin-bottom: 20px; line-height: 1.75;">
        A continuación, le presentamos las orientaciones de las actividades de
        aprendizaje de la unidad de <strong
          style="font-weight: bold;">Fundamentos epistemológicos de la
          investigación.</strong></p>
      <p
        style="font-size: 0.96rem; color: #1a1e35; text-align: justify; margin-bottom: 20px; line-height: 1.75;">
        Esta unidad (primer momento) se aproxima a una experiencia concreta, el
        análisis de ejemplos de proyectos y artículos de investigación educativa
        donde se explicitan introducción, problema, pregunta, justificación,
        enfoque metodológico y consideraciones éticas (incluido el uso de IA
        generativa y la protección de participantes).</p>
      <!-- Generalidades -->
      <h2
        style="font-family: 'Segoe UI',sans-serif; font-size: 1rem; font-weight: bold; color: #2655b8; margin: 28px 0 12px; padding-left: 14px; position: relative; border-left: 4px solid #2d5fc7;">
        Generalidades</h2>
      <p style="font-size: 0.9rem; color: #1a1e35; margin: 4px 0;"><strong
          style="font-weight: bold;">Tiempo total previsto para el desarrollo de
          las actividades:</strong> 20 horas</p>
      <p style="font-size: 0.9rem; color: #1a1e35; margin: 14px 0 4px;"><strong
          style="font-weight: bold;">Resultados previstos de
          aprendizaje:</strong></p>
      <ul style="list-style: none; margin: 12px 0; padding: 0;">
        <li
          style="position: relative; padding-left: 26px; margin-bottom: 10px; font-size: 0.93rem; text-align: justify; line-height: 1.7; list-style: none;">
          Contribuir a la producción de conocimiento práctico y teórico para la
          solución de problemáticas en el ámbito educativo, convocando y
          liderando equipos colaborativos en procesos de investigación y
          desarrollando una perspectiva crítica que permita mejorar los procesos
          educativos.</li>
      </ul>
      <div
        style="border: none; border-top: 1.5px solid #cdd5e8; margin: 24px 0;"> 
      </div>
      <!-- Actividad 1 formativa -->
      <h3
        style="font-family: 'Segoe UI',sans-serif; font-size: 0.97rem; font-weight: bold; color: #2655b8; margin: 24px 0 8px; border: none;">
        Foro asincrónico de reflexión - Planteamiento del problema (formativa)
      </h3>
      <div
        style="display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 18px;">
        <span
          style="background: #f6f8fc; border: 1px solid #cdd5e8; border-radius: 20px; padding: 5px 14px; font-size: 0.82rem; color: #3d4468; display: inline-flex; align-items: center; gap: 5px;">⏱
          <strong style="color: #1a1e35; font-weight: bold;">Tiempo
            estimado:</strong>12 horas</span> <span
          style="background: #f6f8fc; border: 1px solid #cdd5e8; border-radius: 20px; padding: 5px 14px; font-size: 0.82rem; color: #3d4468; display: inline-flex; align-items: center; gap: 5px;">👤
          <strong style="color: #1a1e35; font-weight: bold;">Tipo de
            trabajo:</strong> Individual</span></div>
      <ul style="list-style: none; margin: 14px 0 8px; padding: 0;">
        <li
          style="position: relative; padding-left: 22px; margin-bottom: 14px; font-size: 0.95rem; font-weight: bold; list-style: none;">
          Lecturas críticas
          <ul style="list-style: none; margin: 10px 0 4px; padding: 0;">
            <li
              style="position: relative; padding-left: 20px; margin-bottom: 12px; font-size: 0.92rem; font-weight: 400; list-style: none;">
              <span style="font-weight: bold;">Epistemologías de la
                investigación educativa</span> <span
                style="display: block; font-weight: 400; color: #3d4468; font-size: 0.89rem; text-align: justify; margin-top: 3px; line-height: 1.65;">Revisión
                de lecturas seleccionadas sobre epistemologías de la
                investigación educativa, paradigmas y la investigación como
                práctica situada. Individualmente se elaboran notas de lectura
                donde identifica la postura epistemológica, el tipo de problema
                que se plantea y el propósito de la investigación.</span></li>
            <li
              style="position: relative; padding-left: 20px; margin-bottom: 12px; font-size: 0.92rem; font-weight: 400; list-style: none;">
              <span style="font-weight: bold;">Concepciones de problema, objeto
                y propósito de investigación</span> <span
                style="display: block; font-weight: 400; color: #3d4468; font-size: 0.89rem; text-align: justify; margin-top: 3px; line-height: 1.65;">Revisión
                de textos sobre construcción de problemas, objeto y propósito de
                investigación en educación, así como sobre el sentido público de
                investigar. Se debe identificar cómo se pasa de intereses
                personales o institucionales a problemas colectivos, y cómo se
                argumenta su relevancia social.</span></li>
          </ul>
        </li>
        <li
          style="position: relative; padding-left: 22px; margin-bottom: 14px; font-size: 0.95rem; font-weight: bold; list-style: none;">
          Foro asincrónico de reflexión
          <p
            style="font-weight: 400; font-size: 0.93rem; margin-top: 8px; text-align: justify; line-height: 1.7;">
            Participación en un foro en la plataforma del curso, donde se debe
            publicar individualmente una intervención en la que se identifica
            una problemática educativa que se considere relevante en el contexto
            (escuela, universidad, política pública, etc.), se pone en diálogo
            con las lecturas revisadas y se responde a las aportaciones de al
            menos dos compañeros, contrastando visiones locales e
            internacionales.</p>
        </li>
        <li
          style="position: relative; padding-left: 22px; margin-bottom: 14px; font-size: 0.95rem; font-weight: bold; list-style: none;">
          <div
            style="display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 18px;">
            <span
              style="background: #f6f8fc; border: 1px solid #cdd5e8; border-radius: 20px; padding: 5px 14px; font-size: 0.82rem; color: #3d4468; display: inline-flex; align-items: center; gap: 5px;">💬<strong
                style="color: #1a1e35; font-weight: bold;">Foro:</strong> U1-Foro
              asincrónico de reflexión</span></div>
        </li>
      </ul>
    </div>
  </div>
  <!-- CARD 2 -->
  <div
    style="background: #ffffff; border-radius: 4px; box-shadow: 0 2px 18px rgba(9,29,90,0.10); margin-top: 24px; overflow: hidden;">
    <div
      style="background: #091d5a; padding: 12px 32px; display: flex; align-items: center; gap: 14px;">
      <span
        style="font-family: 'Segoe UI',sans-serif; font-size: 0.75rem; font-weight: 600; color: #ffffff; letter-spacing: 0.06em; text-transform: uppercase; margin: 0;">Guía
        de actividades</span>
      <div
        style="flex: 1; height: 2px; background: #2d5fc7; border-radius: 2px;"> 
      </div>
    </div>
    <div style="padding: 40px 48px 48px;">
      <h3
        style="font-family: 'Segoe UI',sans-serif; font-size: 0.97rem; font-weight: bold; color: #2655b8; margin: 0 0 8px; border: none;">
        Actividad 1. Planteamiento del problema (evaluativa)</h3>
      <div
        style="display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 18px;">
        <span
          style="background: #f6f8fc; border: 1px solid #cdd5e8; border-radius: 20px; padding: 5px 14px; font-size: 0.82rem; color: #3d4468; display: inline-flex; align-items: center; gap: 5px;">⏱
          <strong style="color: #1a1e35; font-weight: bold;">Tiempo
            estimado:</strong>8 horas</span> <span
          style="background: #f6f8fc; border: 1px solid #cdd5e8; border-radius: 20px; padding: 5px 14px; font-size: 0.82rem; color: #3d4468; display: inline-flex; align-items: center; gap: 5px;">👤
          <strong style="color: #1a1e35; font-weight: bold;">Tipo de
            trabajo:</strong> Individual</span></div>
      <ul style="list-style: none; margin: 14px 0 8px; padding: 0;">
        <!-- Entregables -->
        <li
          style="position: relative; padding-left: 22px; margin-bottom: 14px; font-size: 0.95rem; font-weight: bold; list-style: none;">
          Entregables
          <ul style="list-style: none; margin: 10px 0 4px; padding: 0;">
            <li
              style="position: relative; padding-left: 20px; margin-bottom: 12px; font-size: 0.92rem; font-weight: 400; list-style: none;">
              <span style="font-weight: bold;">Planteamiento del problema de
                investigación</span> (justificación, antecedentes/estado de la
              cuestión).</li>
            <li
              style="position: relative; padding-left: 20px; margin-bottom: 12px; font-size: 0.92rem; font-weight: 400; list-style: none;">
              <span style="font-weight: bold;">Descripción:</span> <span
                style="display: block; font-weight: 400; color: #3d4468; font-size: 0.89rem; text-align: justify; margin-top: 3px; line-height: 1.65;">Construcción
                de un primer borrador de problemática de investigación en
                educación, en el que el estudiante articula: la descripción de
                la situación problemática, su relevancia pública, los actores
                implicados, y una primera formulación de problema, objeto y
                propósito de investigación, fundamentándose en la literatura
                revisada.</span>
              <ul style="list-style: none; margin: 10px 0 4px; padding: 0;">
                <li
                  style="position: relative; padding-left: 18px; margin-bottom: 8px; font-size: 0.89rem; text-align: justify; line-height: 1.65; list-style: none; color: #1a1e35;">
                  <span
                    style="position: absolute; left: 0; top: 2px; font-size: 0.78rem;">▪</span>
                  Elaborar un texto en el que se presenta y delimita una
                  problemática educativa específica, situada en un contexto real
                  (institución, nivel educativo, política, aula, etc.). El
                  planteamiento del problema debe describir la situación
                  problemática, identificar a los actores implicados, mostrar
                  evidencias o indicios de su relevancia (datos, estudios
                  previos, normativa, experiencias del campo) y explicitar por
                  qué constituye un problema público y no solo una inquietud
                  personal. Este entregable integra la revisión crítica de
                  literatura y organiza los argumentos de manera coherente, como
                  base para la formulación posterior de la pregunta de
                  investigación y del diseño metodológico.</li>
                <li
                  style="position: relative; padding-left: 18px; margin-bottom: 8px; font-size: 0.89rem; text-align: justify; line-height: 1.65; list-style: none; color: #1a1e35;">
                  <div
                    style="display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 18px;">
                    <span
                      style="background: #f6f8fc; border: 1px solid #cdd5e8; border-radius: 20px; padding: 5px 14px; font-size: 0.82rem; color: #3d4468; display: inline-flex; align-items: center; gap: 5px;">📝
                      <strong
                        style="color: #1a1e35; font-weight: bold;">Actividad:</strong><strong>U1-Actividad
                        1: Planteamiento del problema</strong></span></div>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <!-- Apoyo -->
        <li
          style="position: relative; padding-left: 22px; margin-bottom: 14px; font-size: 0.95rem; font-weight: bold; list-style: none;">
          Apoyo
          <ul style="list-style: none; margin: 10px 0 4px; padding: 0;">
            <li
              style="position: relative; padding-left: 20px; margin-bottom: 10px; font-size: 0.92rem; font-weight: 400; list-style: none;">
              <span style="font-weight: bold;">Árbol de problemas –
                problematización</span></li>
          </ul>
        </li>
        <!-- Referencias -->
        <li
          style="position: relative; padding-left: 22px; margin-bottom: 14px; font-size: 0.95rem; font-weight: bold; list-style: none;">
          Referencias
          <p
            style="font-weight: 400; font-size: 0.93rem; margin-top: 8px; line-height: 1.7;">
            Se sugiere revisar las referencias o material de apoyo, que está
            disponible en la plataforma.</p>
        </li>
        <li
          style="position: relative; padding-left: 22px; margin-bottom: 14px; font-size: 0.95rem; font-weight: bold; list-style: none;">
          <div
            style="display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 18px;">
            <span
              style="background: #f6f8fc; border: 1px solid #cdd5e8; border-radius: 20px; padding: 5px 14px; font-size: 0.82rem; color: #3d4468; display: inline-flex; align-items: center; gap: 5px;">📚
              <strong
                style="color: #1a1e35; font-weight: bold;">Recursos:</strong> U1-Material
              de profundización</span></div>
        </li>
      </ul>
      <!-- Tabla rúbrica -->
      <div
        style="margin-top: 24px; overflow-x: auto; border-radius: 6px; border: 1px solid #cdd5e8; box-shadow: 0 1px 8px rgba(9,29,90,0.07);">
        <table
          style="width: 100%; border-collapse: collapse; font-size: 0.82rem; min-width: 700px;">
          <thead>
            <tr style="background: #091d5a;">
              <th
                style="font-family: 'Segoe UI',sans-serif; font-weight: 600; font-size: 0.77rem; padding: 12px 14px; text-align: left; color: #ffffff; background: #091d5a; border: none; width: 170px; letter-spacing: 0.02em;"
                rowspan="2">Criterios de evaluación</th>
              <th
                style="font-family: 'Segoe UI',sans-serif; font-weight: 600; font-size: 0.77rem; padding: 12px 9px; text-align: center; color: #ffffff; background: #091d5a; border: none;"
                colspan="2">Excelente</th>
              <th
                style="font-family: 'Segoe UI',sans-serif; font-weight: 600; font-size: 0.77rem; padding: 12px 9px; text-align: center; color: #ffffff; background: #091d5a; border: none;"
                colspan="2">Bueno</th>
              <th
                style="font-family: 'Segoe UI',sans-serif; font-weight: 600; font-size: 0.77rem; padding: 12px 9px; text-align: center; color: #ffffff; background: #091d5a; border: none;"
                colspan="2">Necesita mejorar</th>
              <th
                style="font-family: 'Segoe UI',sans-serif; font-weight: 600; font-size: 0.77rem; padding: 12px 9px; text-align: center; color: #ffffff; background: #091d5a; border: none;"
                colspan="2">Deficiente</th>
              <th
                style="font-family: 'Segoe UI',sans-serif; font-weight: 600; font-size: 0.77rem; padding: 12px 9px; text-align: center; color: #ffffff; background: #091d5a; border: none;"
                colspan="2">No cumple con el criterio o no entrega</th>
            </tr>
            <tr style="background: #0e2470;">
              <th
                style="background: #0e2470; color: rgba(255,255,255,0.75); font-size: 0.72rem; font-weight: 500; padding: 7px 9px; border-right: 1px solid rgba(255,255,255,0.1); text-align: center;">
                pts.</th>
              <th
                style="background: #0e2470; color: rgba(255,255,255,0.75); font-size: 0.72rem; font-weight: 500; padding: 7px 9px; border-right: 1px solid rgba(255,255,255,0.1); text-align: center;">
                Ítem</th>
              <th
                style="background: #0e2470; color: rgba(255,255,255,0.75); font-size: 0.72rem; font-weight: 500; padding: 7px 9px; border-right: 1px solid rgba(255,255,255,0.1); text-align: center;">
                pts.</th>
              <th
                style="background: #0e2470; color: rgba(255,255,255,0.75); font-size: 0.72rem; font-weight: 500; padding: 7px 9px; border-right: 1px solid rgba(255,255,255,0.1); text-align: center;">
                Ítem</th>
              <th
                style="background: #0e2470; color: rgba(255,255,255,0.75); font-size: 0.72rem; font-weight: 500; padding: 7px 9px; border-right: 1px solid rgba(255,255,255,0.1); text-align: center;">
                pts.</th>
              <th
                style="background: #0e2470; color: rgba(255,255,255,0.75); font-size: 0.72rem; font-weight: 500; padding: 7px 9px; border-right: 1px solid rgba(255,255,255,0.1); text-align: center;">
                Ítem</th>
              <th
                style="background: #0e2470; color: rgba(255,255,255,0.75); font-size: 0.72rem; font-weight: 500; padding: 7px 9px; border-right: 1px solid rgba(255,255,255,0.1); text-align: center;">
                pts.</th>
              <th
                style="background: #0e2470; color: rgba(255,255,255,0.75); font-size: 0.72rem; font-weight: 500; padding: 7px 9px; border-right: 1px solid rgba(255,255,255,0.1); text-align: center;">
                Ítem</th>
              <th
                style="background: #0e2470; color: rgba(255,255,255,0.75); font-size: 0.72rem; font-weight: 500; padding: 7px 9px; border-right: 1px solid rgba(255,255,255,0.1); text-align: center;">
                pts.</th>
              <th
                style="background: #0e2470; color: rgba(255,255,255,0.75); font-size: 0.72rem; font-weight: 500; padding: 7px 9px; text-align: center;">
                Ítem</th>
            </tr>
          </thead>
          <tbody>
            <tr style="border-bottom: 1px solid #cdd5e8;">
              <td
                style="padding: 11px 14px; vertical-align: top; text-align: left; border-right: 2px solid #cdd5e8; line-height: 1.5; font-size: 0.82rem;">
                Identificar problemáticas educativas relevantes a través de la
                revisión crítica de literatura científica y otros recursos
                teóricos.</td>
              <td
                style="padding: 11px 9px; vertical-align: top; text-align: center; border-right: 1px solid #cdd5e8; line-height: 1.5;">
                <span
                  style="display: block; font-size: 0.94rem; font-weight: bold; color: #2d5fc7; margin-bottom: 4px;">5,0</span>
              </td>
              <td
                style="padding: 11px 9px; vertical-align: top; text-align: left; border-right: 1px solid #cdd5e8; line-height: 1.5; font-size: 0.78rem; color: #3d4468;">
                Identifica problemáticas educativas con base en una revisión
                crítica y exhaustiva de la literatura científica, estableciendo
                conexiones teóricas claras.</td>
              <td
                style="padding: 11px 9px; vertical-align: top; text-align: center; border-right: 1px solid #cdd5e8; line-height: 1.5;">
                <span
                  style="display: block; font-size: 0.94rem; font-weight: bold; color: #2d5fc7; margin-bottom: 4px;">3,75</span>
              </td>
              <td
                style="padding: 11px 9px; vertical-align: top; text-align: left; border-right: 1px solid #cdd5e8; line-height: 1.5; font-size: 0.78rem; color: #3d4468;">
                Reconoce problemáticas educativas relevantes mediante revisión
                de literatura científica, aunque con oportunidades de mayor
                profundidad en el análisis crítico.</td>
              <td
                style="padding: 11px 9px; vertical-align: top; text-align: center; border-right: 1px solid #cdd5e8; line-height: 1.5;">
                <span
                  style="display: block; font-size: 0.94rem; font-weight: bold; color: #2d5fc7; margin-bottom: 4px;">2,5</span>
              </td>
              <td
                style="padding: 11px 9px; vertical-align: top; text-align: left; border-right: 1px solid #cdd5e8; line-height: 1.5; font-size: 0.78rem; color: #3d4468;">
                Identifica problemáticas educativas de forma general, pero con
                poca fundamentación teórica o sin revisión crítica rigurosa.
              </td>
              <td
                style="padding: 11px 9px; vertical-align: top; text-align: center; border-right: 1px solid #cdd5e8; line-height: 1.5;">
                <span
                  style="display: block; font-size: 0.94rem; font-weight: bold; color: #2d5fc7; margin-bottom: 4px;">1,25</span>
              </td>
              <td
                style="padding: 11px 9px; vertical-align: top; text-align: left; border-right: 1px solid #cdd5e8; line-height: 1.5; font-size: 0.78rem; color: #3d4468;">
                Presenta una identificación limitada de problemáticas educativas
                sin respaldo teórico claro.</td>
              <td
                style="padding: 11px 9px; vertical-align: top; text-align: center; border-right: 1px solid #cdd5e8; line-height: 1.5; background: #fef2f2;">
                <span
                  style="display: block; font-size: 0.94rem; font-weight: bold; color: #c0392b; margin-bottom: 4px;">0,0</span>
              </td>
              <td
                style="padding: 11px 9px; vertical-align: top; text-align: left; line-height: 1.5; font-size: 0.78rem; color: #3d4468; background: #fef2f2;">
                No realiza la entrega.</td>
            </tr>
            <tr style="background: #f6f8fc;">
              <td
                style="padding: 11px 14px; vertical-align: top; text-align: left; border-right: 2px solid #cdd5e8; font-weight: bold; font-size: 0.88rem; color: #091d5a;">
                <strong>Total</strong></td>
              <td
                style="padding: 11px 9px; text-align: center; border-right: 1px solid #cdd5e8; font-weight: 800; font-size: 0.98rem; color: #091d5a;"
                colspan="2">5,0</td>
              <td
                style="padding: 11px 9px; text-align: center; border-right: 1px solid #cdd5e8; font-weight: 800; font-size: 0.98rem; color: #091d5a;"
                colspan="2">3,75</td>
              <td
                style="padding: 11px 9px; text-align: center; border-right: 1px solid #cdd5e8; font-weight: 800; font-size: 0.98rem; color: #091d5a;"
                colspan="2">2,5</td>
              <td
                style="padding: 11px 9px; text-align: center; border-right: 1px solid #cdd5e8; font-weight: 800; font-size: 0.98rem; color: #091d5a;"
                colspan="2">1,25</td>
              <td
                style="padding: 11px 9px; text-align: center; font-weight: 800; font-size: 0.98rem; color: #c0392b; background: #fef2f2;"
                colspan="2">0,0</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
<p></p>
<div style="display: flex; justify-content: center; margin: 20px 0;"><button
    class="btn-regresar"> <span style="font-size: 18px;">↩️</span> Regresar
  </button></div>