<div
  style="/* width: 94%; */  background: #8ed500; margin-right: 5px; margin-bottom: 5px; max-width: 750px; padding: 10px; background: #fffff; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 15px; border-radius: 10px; border: 2px solid #2B4E84; box-shadow: 3px 1px #2B4E84;">
  <div style="display: flex; align-items: center;"><img
      class="img-fluid atto_image_button_text-bottom"
      src="https://cdn-icons-png.flaticon.com/512/3449/3449692.png"
      alt="material de lectura" width="40" height="40">
    <div style="margin: auto auto auto 10px; color: #323232; font-size: 20px;">
      <h4
        style="margin: 0px; color: #000000; font-weight: 900; font-size: 20px;">
        PRESENTACIÓN DEL MÓDULO Y DOCENTE</h4>
    </div>
  </div>
</div>

<div class="parent"
  style="/* width: 700px; */  width: 100%; max-width: 750px; /* padding: 25px 25px; */  perspective: 1000px;">
  <div class="card"
    style="padding-top: 50px; /* border-radius: 10px; */    border: 3px solid #141414; transform-style: preserve-3d; background: linear-gradient(135deg, #0000 18.75%, #f3f3f3 0 31.25%, #0000 0), repeating-linear-gradient(45deg, #f3f3f3 -6.25% 6.25%, #141414 0 18.75%); background-size: 60px 60px; background-position: 0 0, 0 0; background-color: #141414; width: 100%; box-shadow: rgba(142, 142, 142, 0.3) 0px 30px 30px -10px; transition: all 0.5s ease-in-out;">
    <div class="content-box"
      style="background: #8ed500; /* border-radius: 10px 100px 10px 10px; */      transition: all 0.5s ease-in-out; padding: 60px 25px 25px 25px;">
      <span class="card-title"
        style="display: inline-block; color: #141414; font-size: 25px; font-weight: 900; transition: all 0.5s ease-in-out; transform: translate3d(0px, 0px, 50px);">Jhonatan
        Edgar Flores Lopez</span>
      <p class="card-content"
        style="margin-top: 10px; font-size: 15px; font-weight: bold; text-align: justify; color: #141414; transition: all 0.5s ease-in-out; transform: translate3d(0px, 0px, 30px);">
        Estimadas y estimados en esta oportunidad quiero darles una cálida
        bienvenida al desarrollo del modulo, con la seguridad que este proceso
        educativo será un espacio de reflexión de nuestros aprendizajes, también
        hacerles llegar mis felicitaciones por tan importante decisión de
        continuar sus estudios en el Posgrado en la Universidad Pública de El
        Alto.</p>
      <span class="see-more"
        style="cursor: pointer; margin-top: 1rem; display: inline-block; font-weight: 900; font-size: 15px; text-transform: uppercase; color: #8ed500; /* border-radius: 5px; */        background: #141414; padding: 0.5rem 0.7rem; transition: all 0.5s ease-in-out; transform: translate3d(0px, 0px, 20px);">Contacto:
        XXXXXXXX</span>
    </div>
    <!-- Aquí se ha reemplazado la fecha por una imagen -->
    <div class="date-box"
      style="position: absolute; top: 30px; right: 40px; height: 80px; width: 80px; background: #141414; border: 1px solid #141414; /* border-radius: 10px; */      /* padding: 10px; */      transform: translate3d(0px, 0px, 80px); box-shadow: rgba(100, 100, 111, 0.2) 0px 17px 10px -10px;">
      <img class="img-fluid"
        style="width: 100%; height: 100%; object-fit: cover; border-radius: 0px;"
        src="https://img.freepik.com/psd-premium/personaje-dibu…mados-3d-aislado-representacion-3d_235528-561.jpg"
        alt="Imagen"></div>
  </div>
</div>

<div
  style="background: white; border-radius: 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); overflow: hidden; max-width: 650px; width: 100%; position: relative; margin: 20px; border: 1px solid #e0e0e0;">
  <!-- Header del curso -->
  <div
    style="background: linear-gradient(135deg, #667eea, #764ba2); padding: 30px 40px; color: white; position: relative; overflow: hidden;">
    <!-- Patrón decorativo -->
    <div
      style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 10px, transparent 10px, transparent 20px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 10px, transparent 10px, transparent 20px);">
       </div>
    <!-- Icono del curso -->
    <div
      style="position: absolute; top: 20px; right: 30px; width: 60px; height: 60px; background: rgba(255, 255, 255, 0.1); border-radius: 15px; display: flex; align-items: center; justify-content: center;">
      <svg style="width: 30px; height: 30px; fill: white;">
        <path
          d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z">
        </path>
        <path d="M7,12L12,7L17,12L12,17L7,12Z" fill="#667eea"></path>
      </svg></div>
    <h1
      style="font-size: 2.5em; font-weight: bold; margin: 0; margin-bottom: 10px; position: relative; z-index: 1;">
      ENTORNOS VIRTUALES DE APRENDIZAJE</h1>
    <p
      style="font-size: 1.2em; margin: 0; opacity: 0.9; position: relative; z-index: 1;">
      Objetivos del Curso Académico</p>
  </div>
  <!-- Contenido de objetivos -->
  <div style="padding: 40px;"><!-- Objetivo General -->
    <div style="margin-bottom: 40px;">
      <div style="display: flex; align-items: center; margin-bottom: 20px;">
        <div
          style="width: 50px; height: 50px; background: linear-gradient(135deg, #4CAF50, #81C784); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
          <svg style="width: 24px; height: 24px; fill: white;">
            <path
              d="M12,2L13.09,8.26L22,9L13.09,9.74L12,16L10.91,9.74L2,9L10.91,8.26L12,2Z">
            </path>
          </svg></div>
        <h2
          style="font-size: 1.8em; font-weight: 600; color: #2c3e50; margin: 0;">
          Objetivo General</h2>
      </div>
      <div
        style="background: linear-gradient(135deg, #f8f9ff, #e8f0ff); border: 1px solid #e1e8ff; border-radius: 15px; padding: 25px; border-left: 5px solid #4CAF50;">
        <p
          style="font-size: 1.1em; line-height: 1.7; color: #444; margin: 0; text-align: justify;">
          Desarrollar competencias integrales para diseñar, gestionar, evaluar y
          optimizar entornos virtuales de aprendizaje efectivos, utilizando
          Moodle como plataforma principal, incorporando herramientas de
          inteligencia artificial y metodologías pedagógicas innovadoras para
          crear experiencias de aprendizaje significativas y accesibles y
          comparar sus funcionalidades con Google Classroom.</p>
      </div>
    </div>
    <!-- Objetivos Específicos -->
    <div>
      <div style="display: flex; align-items: center; margin-bottom: 25px;">
        <div
          style="width: 50px; height: 50px; background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
          <svg style="width: 24px; height: 24px; fill: white;">
            <path
              d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z">
            </path>
            <path d="M11,7H13V9H11V7M11,11H13V17H11V11Z"></path>
          </svg></div>
        <h2
          style="font-size: 1.8em; font-weight: 600; color: #2c3e50; margin: 0;">
          Objetivos Específicos</h2>
      </div>
      <!-- Contenido de objetivos específicos en un solo párrafo -->
      <div
        style="background: linear-gradient(135deg, #f8f9ff, #e8f0ff); border: 1px solid #e1e8ff; border-radius: 15px; padding: 25px; border-left: 5px solid #667eea;">
        <p
          style="font-size: 1.1em; line-height: 1.7; color: #444; margin: 0; text-align: justify;">
          •    Analizar los fundamentos teóricos y prácticos de los entornos
          virtuales de aprendizaje, dominando la navegación, configuración y
          estructura básica de Moodle como plataforma educativa.<br>•    Diseñar
          y crear cursos estructurados en Moodle, aplicando principios de diseño
          instruccional y personalizando recursos educativos según las
          necesidades del contexto educativo.<br>•    Implementar actividades
          interactivas, colaborativas y sistemas de evaluación efectivos en
          Moodle, integrando herramientas de gamificación y estrategias de
          retroalimentación constructiva.<br>•    Integrar herramientas de
          inteligencia artificial en el proceso educativo y realizar análisis
          comparativos entre plataformas educativas para la toma de decisiones
          informadas en la selección de tecnologías educativas.</p>
      </div>
    </div>
  </div>
  <!-- Footer informativo -->
  <div
    style="background: #f8f9fa; padding: 20px 40px; border-top: 1px solid #e9ecef; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;">
    <div style="display: flex; align-items: center; gap: 10px;">
      <div
        style="width: 8px; height: 8px; background: #4CAF50; border-radius: 50%;">
         </div>
      <span
        style="color: #666; font-size: 0.95em; font-weight: 500;">Universidad
        Mayor de San Andrés</span>
    </div>
    <div style="color: #999; font-size: 0.9em;">Modalidad Virtual</div>
  </div>
</div>

<div class="header"
  style="background: linear-gradient(90deg, #d70707 0%, #b30101 100%); color: white; padding: 15px 20px; border-radius: 8px 8px 0 0; font-size: 24px; font-weight: bold; display: flex; align-items: center;">
  <img class="img-fluid"
    style="color: white; filter: invert(1); border-radius: 0;"
    src="https://cdn-icons-png.flaticon.com/512/4146/4146851.png" alt="docente"
    width="40" height="40"> <strong
    style="margin: auto; margin-left: 10px; font-size: 40px;">UNIDAD 1</strong>
</div>