• ¡Fórmate y proyéctate!

    <!DOCTYPE html>
    <html lang="es">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Plataforma Digital</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&display=swap" rel="stylesheet">
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
    
      body {
        font-family: 'Montserrat', sans-serif;
        background: #ffffff;
        padding: 40px 20px 50px;
      }
    
      .logo {
        margin-bottom: 10px;
      }
    
      .logo svg {
        width: 48px;
        height: 48px;
      }
    
      .titulo {
        text-align: center;
        font-size: clamp(1.6rem, 4vw, 2.5rem);
        font-weight: 800;
        color: #e8192c;
        margin: 10px auto 50px;
        max-width: 900px;
        line-height: 1.2;
        letter-spacing: -0.5px;
      }
    
      .cards-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 28px;
        max-width: 1100px;
        margin: 0 auto;
      }
    
      .card {
        background: #ffffff;
        border: 2.5px solid #e8192c;
        border-radius: 18px;
        padding: 28px 24px 30px;
        width: 220px;
        min-width: 200px;
        flex: 1 1 200px;
        max-width: 240px;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        box-shadow: 0 4px 18px rgba(232,25,44,0.08);
        transition: transform 0.22s ease, box-shadow 0.22s ease;
      }
    
      .card:hover {
        transform: translateY(-6px);
        box-shadow: 0 10px 30px rgba(232,25,44,0.18);
      }
    
      .card-icon {
        width: 72px;
        height: 72px;
        position: absolute;
        top: -36px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
      }
    
      .card-icon img {
        width: 72px;
        height: 72px;
        object-fit: contain;
      }
    
      /* Emoji fallback icon */
      .card-icon .emoji-icon {
        font-size: 52px;
        line-height: 1;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
      }
    
      .card-content {
        margin-top: 44px;
        width: 100%;
      }
    
      .card-title {
        font-size: 1rem;
        font-weight: 700;
        color: #1a1a1a;
        margin-bottom: 12px;
        line-height: 1.3;
      }
    
      .card-desc {
        font-size: 0.82rem;
        color: #444;
        line-height: 1.6;
        font-weight: 400;
      }
    
      @media (max-width: 600px) {
        .cards-grid { gap: 50px 20px; flex-direction: column; align-items: center; }
        .card { max-width: 300px; width: 100%; }
      }
    </style>
    </head>
    <body>
    
    <!-- Logo (chili icon in brand red) -->
    <div class="logo">
      <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M28 8 C28 8 32 4 38 6 C34 8 33 12 33 12" stroke="#e8192c" stroke-width="3" stroke-linecap="round" fill="none"/>
        <path d="M30 14 C26 10 20 10 16 15 C10 22 12 34 20 40 C25 44 32 42 35 36 C39 28 36 18 30 14Z" fill="#e8192c"/>
        <path d="M24 18 C22 20 21 25 23 30" stroke="#c0001a" stroke-width="1.5" stroke-linecap="round" fill="none"/>
      </svg>
    </div>
    
    <h1 class="titulo">Plataforma digital orientada al conocimiento alternativo</h1>
    
    <div class="cards-grid">
    
      <!-- Card 1: Horario Autónomo -->
      <div class="card">
        <div class="card-icon">
          <span class="emoji-icon">⏰</span>
        </div>
        <div class="card-content">
          <div class="card-title">Horario Autónomo</div>
          <div class="card-desc">Permite mejorar la conciliación de la vida laboral con la vida familiar y personal.</div>
        </div>
      </div>
    
      <!-- Card 2: Habilidades Extras -->
      <div class="card">
        <div class="card-icon">
          <span class="emoji-icon">💻</span>
        </div>
        <div class="card-content">
          <div class="card-title">Habilidades Extras</div>
          <div class="card-desc">No es necesario conocimientos previos de informática para tomar nuestros cursos.</div>
        </div>
      </div>
    
      <!-- Card 3: Más accesibilidad -->
      <div class="card">
        <div class="card-icon">
          <span class="emoji-icon">🔑</span>
        </div>
        <div class="card-content">
          <div class="card-title">Más accesibilidad</div>
          <div class="card-desc">Estudia desde cualquier lugar que te permita concentrarte y desarrollar tus proyectos digitales.</div>
        </div>
      </div>
    
      <!-- Card 4: Cursos Certificables -->
      <div class="card">
        <div class="card-icon">
          <span class="emoji-icon">🎓</span>
        </div>
        <div class="card-content">
          <div class="card-title">Cursos Certificables</div>
          <div class="card-desc">Descubre un amplio contenido de formación gratuita para impulsar tu negocio o carrera profesional.</div>
        </div>
      </div>
    
    </div>
    
    </body>
    </html>


En cualquier tiempo y lugar puedes hacer los cursos...



Regístrate y accede a los cursos

Completa el proceso de registro para acceder al contenido de los cursos y a las herramientas solo con tu correo electrónico.