* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


html,
body {
  width: 100%;
  min-height: 100%;
}


body {
  font-family:
    Arial,
    Helvetica,
    sans-serif;

  background:
    linear-gradient(
      145deg,
      #f7f9ff,
      #eef3ff,
      #f8faff
    );

  color: #111827;

  -webkit-font-smoothing:
    antialiased;
}


button,
a,
input,
textarea {
  -webkit-tap-highlight-color: transparent;
}


button:focus,
a:focus {
  outline: none;
}


#app {
  width: 100%;
  min-height: 100vh;
}


/* =========================
   CONTENEDOR PRINCIPAL
   ========================= */

.home-view {

  width: 100%;
  min-height: 100vh;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 18px;

  padding: 30px 20px;

}


/* =========================
   TARJETA DE ENLACE
   ========================= */

.event-link-container {

  width: 100%;
  max-width: 520px;

  padding: 26px 24px;

  background:
    rgba(255, 255, 255, 0.94);

  border:
    1px solid
    rgba(99, 102, 241, 0.10);

  border-radius: 24px;

  box-shadow:
    0 18px 45px
    rgba(31, 41, 55, 0.10);

  text-align: center;

}


/* =========================
   TITULO
   ========================= */

.event-link-title {

  margin-bottom: 10px;

  font-size: 24px;

  font-weight: 800;

  letter-spacing: -0.4px;

  color: #111827;

}


/* =========================
   ESTADO / DESCRIPCIÓN
   ========================= */

.event-link-status {

  margin-bottom: 16px;

  font-size: 15px;

  line-height: 1.5;

  color: #6b7280;

}


/* =========================
   LINK
   ========================= */

.event-link {

  display: block;

  width: 100%;

  padding: 14px 16px;

  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      #eef2ff,
      #e0e7ff
    );

  border:
    1px solid
    rgba(79, 70, 229, 0.16);

  color: #4338ca;

  font-size: 14px;

  font-weight: 600;

  line-height: 1.5;

  text-decoration: none;

  overflow-wrap: anywhere;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;

}


.event-link:hover {

  background:
    linear-gradient(
      135deg,
      #e0e7ff,
      #dbe4ff
    );

  box-shadow:
    0 8px 20px
    rgba(79, 70, 229, 0.12);

  transform:
    translateY(-1px);

}


.event-link:active {

  transform:
    scale(0.98);

}


/* =========================
   MOVILES
   ========================= */

@media (max-width: 480px) {

  .home-view {

    padding:
      24px 16px;

    gap: 14px;

  }


  .event-link-container {

    padding:
      23px 18px;

    border-radius:
      21px;

  }


  .event-link-title {

    font-size:
      22px;

  }


  .event-link-status {

    font-size:
      14px;

  }


  .event-link {

    font-size:
      13px;

    padding:
      13px 12px;

  }

}