<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Felicidades</title>

  <!-- Fuente llamativa -->
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&display=swap" rel="stylesheet">

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Montserrat', sans-serif;
    }

    body {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      background: linear-gradient(-45deg, #00c6ff, #ffffff, #7f00ff, #00ffcc, #ffffff);
      background-size: 500% 500%;
      animation: fondoAnimado 12s ease infinite;
      padding: 20px;
    }

    .container {
      background: rgba(255, 255, 255, 0.25);
      padding: 50px;
      border-radius: 25px;
      backdrop-filter: blur(10px);
      box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    }

    h1 {
      font-size: 6rem;
      font-weight: 900;
      color: #000;
      text-shadow: 3px 3px 10px rgba(255,255,255,0.7);
      margin-bottom: 20px;
      animation: pulse 2s infinite;
    }

    h2 {
      font-size: 2rem;
      font-weight: 700;
      color: #111;
      line-height: 1.5;
    }

    @keyframes fondoAnimado {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }

    @keyframes pulse {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.05);
      }
      100% {
        transform: scale(1);
      }
    }

    @media (max-width: 768px) {
      h1 {
        font-size: 4rem;
      }

      h2 {
        font-size: 1.5rem;
      }

      .container {
        padding: 30px;
      }
    }
  </style>
</head>
<body>

  <div class="container">
    <h1>¡FELICIDADES!</h1>
    <h2>ESTE ES EL PRIMER PASO PARA A&amp;D</h2>
  </div>

</body>
</html>separatorHomeCss{color:red !important}separatorHomeCss{color:red !important}@media all {
    
#\36 3bd85219866cc3622781521 {
    align-self: stretch;
    background-size: cover;
    display: flex;
    min-height: 8px;
    background-position: 50% 50%;
    column-gap: 4%;
    row-gap: 24px;
    background-repeat: no-repeat;
    flex-direction: column;
    max-width: 100%;
    width: 48%;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    min-width: 4%;
    background-color: rgba(0, 0, 0, 0);
    padding: 16px 16px 16px 16px;
    margin-right: 0%;
    margin-top: 0%;
    margin-left: 0%;
    margin-bottom: 0%;
}
    
#\36 3bd85219866cc3622781520 {
    align-self: start;
    background-size: cover;
    min-height: 320px;
    background-repeat: no-repeat;
    flex-direction: row;
    order: 0;
    display: flex;
    background-position: 50% 50%;
    column-gap: 4%;
    row-gap: 24px;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    justify-self: center;
    padding: 4% 2% 4% 2%;
    margin-right: 0%;
    margin-top: 0%;
    margin-left: 0%;
    margin-bottom: 0%;
}
    
#\36 3bd85219866cc3622781522 {
    align-self: stretch;
    background-size: cover;
    display: flex;
    min-height: 8px;
    background-position: 50% 50%;
    column-gap: 4%;
    row-gap: 24px;
    background-repeat: no-repeat;
    flex-direction: column;
    max-width: 100%;
    width: 48%;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    min-width: 4%;
    background-color: rgba(0, 0, 0, 0);
    padding: 16px 16px 16px 16px;
    margin-right: 0%;
    margin-top: 0%;
    margin-left: 0%;
    margin-bottom: 0%;
}
    
#\36 3bd85219866cc362278151f {
    background-repeat: no-repeat;
    background-size: cover;
    grid-template-columns: minmax(0px, 1fr);
    grid-template-rows: minmax(8px, max-content);
    display: grid;
    justify-content: start;
    background-position: 50% 50%;
    align-items: start;
    position: relative;
    border-width: 0px;
    border-color: rgba(0, 0, 0, 1);
    border-style: solid;
    background-color: rgba(0, 0, 0, 0);
}
    
#\36 3c7b8b76c596a2813341bc5 {
    height: auto;
}
}



@media all {
    
#\36 3d24979f4a54e38542a8abe {
    background-repeat: no-repeat;
    background-size: cover;
    grid-template-columns: minmax(0px, 1fr);
    grid-template-rows: minmax(8px, max-content);
    display: grid;
    justify-content: start;
    background-position: 50% 50%;
    align-items: start;
    position: relative;
    border-width: 0px;
    border-color: rgba(0, 0, 0, 1);
    border-style: solid;
    background-color: rgba(0, 0, 0, 0);
}
    
#\36 3d24979f4a54e38542a8abb {
    align-self: stretch;
    padding-top: 16px;
    background-size: cover;
    display: flex;
    padding-left: 16px;
    padding-bottom: 16px;
    min-height: 8px;
    background-position: 50% 50%;
    column-gap: 4%;
    row-gap: 24px;
    background-repeat: no-repeat;
    flex-direction: column;
    max-width: 100%;
    width: 100%;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    min-width: 4%;
    padding-right: 16px;
    background-color: rgba(0, 0, 0, 0);
    margin-right: 0%;
    margin-top: 0%;
    margin-left: 0%;
    margin-bottom: 0%;
}
    
#\36 3d24979f4a54e38542a8abd {
    align-self: stretch;
    padding-top: 16px;
    background-size: cover;
    display: flex;
    padding-left: 16px;
    padding-bottom: 16px;
    min-height: 8px;
    background-position: 50% 50%;
    column-gap: 4%;
    row-gap: 24px;
    background-repeat: no-repeat;
    flex-direction: column;
    max-width: 100%;
    width: 100%;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    min-width: 4%;
    padding-right: 16px;
    background-color: rgba(0, 0, 0, 0);
    margin-right: 0%;
    margin-top: 0%;
    margin-left: 0%;
    margin-bottom: 0%;
}
    
#\36 3d24979f4a54e38542a8abc {
    align-self: start;
    background-size: cover;
    min-height: 320px;
    background-repeat: no-repeat;
    flex-direction: row;
    order: 0;
    padding-top: 4%;
    display: flex;
    padding-bottom: 4%;
    background-position: 50% 50%;
    column-gap: 4%;
    row-gap: 24px;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    justify-self: center;
    padding-right: 0%;
    padding-left: 0%;
    margin-right: 0%;
    margin-top: 0%;
    margin-left: 0%;
    margin-bottom: 0%;
}
}



@media (min-width: 768px) and (max-width: 1024px) {
    
#\36 3bd85219866cc3622781520 {
    padding-right: 2%;
}
}



@media (min-width: 768px) and (max-width: 1024px) {
    
#\36 3d24979f4a54e38542a8abc {
    padding-left: 2%;
    padding-right: 2%;
}
}



@media (max-width: 767px) {
    
#\36 3bd85219866cc3622781521 {
    min-height: 160px;
    align-items: center;
    width: 100%;
}
    
#\36 3bd85219866cc3622781520 {
    min-height: unset;
    flex-direction: column;
    padding-left: 4%;
    padding-right: 4%;
}
    
#\36 3bd85219866cc3622781522 {
    min-height: 160px;
    align-items: center;
    width: 100%;
}
}



@media (max-width: 767px) {
    
#\36 3d24979f4a54e38542a8abb {
    min-height: 160px;
    align-items: center;
    width: 100%;
}
    
#\36 3d24979f4a54e38542a8abd {
    min-height: 160px;
    align-items: center;
    width: 100%;
}
    
#\36 3d24979f4a54e38542a8abc {
    min-height: unset;
    flex-direction: column;
    padding-left: 4%;
    padding-right: 4%;
}
}

