/* La página de una invitación: una sola columna, el botón de descarga en una
   tarjeta y los tres pasos para empezar debajo. */
/* Arriba, el alto de la barra fija (64px) más el aire, como el hero. */
.invite { padding: calc(64px + clamp(32px, 6vw, 72px)) 0 var(--space-section-lg); }
.invite-inner { max-width: 760px; }
.invite-h {
  font-size: clamp(36px, 5.4vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
}
.invite-lede { max-width: 56ch; margin: 0 0 28px; }

.invite-note {
  margin: 0 0 32px;
  padding: 18px 22px;
  border-radius: var(--r-l);
  background: var(--relleno-suave);
  color: var(--tinta);
  font-size: 17px;
}
.invite-note p { margin: 0; }
.invite-note p + p { margin-top: 10px; }

.invite-card {
  padding: clamp(28px, 4vw, 40px);
  border-radius: var(--r-xl);
  background: var(--tarjeta);
  box-shadow: var(--sombra);
}
.invite-btn { font-size: 17px; padding-inline: 28px; }
.invite-meta { margin: 12px 0 0; font-size: 14px; color: var(--tinta-suave); }

.invite-steps {
  margin: 28px 0 0;
  padding: 24px 0 0 1.2em;
  border-top: 1px solid var(--linea);
  display: grid;
  gap: 10px;
  color: var(--tinta-suave);
}
.invite-steps b { color: var(--tinta); font-weight: 600; }

.invite-help { margin: 24px 0 0; font-size: 15px; color: var(--tinta-suave); }
.invite-help a { color: var(--adelante-texto); }

/* Founder de Atelia: la insignia, en el amarillo de la marca. */
.invite-founder {
  margin: 0 0 24px;
  padding: 18px 22px;
  border-radius: var(--r-l);
  background: var(--marca-velo);
  box-shadow: inset 0 0 0 1px rgba(245, 181, 61, 0.35);
}
.invite-founder-t { margin: 0 0 6px; font-weight: 700; color: var(--marca); letter-spacing: 0.01em; }
.invite-founder-d { margin: 0; font-size: 15.5px; color: var(--tinta-suave); }

/* Los tres sistemas, uno por tarjeta. El que aún no tiene instalador, apagado. */
.invite-sistemas {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
}
.invite-sistema-link {
  display: flex; flex-direction: column; gap: 4px;
  height: 100%;
  padding: 16px 18px;
  border-radius: var(--r-l);
  background: var(--adelante);
  color: #fff;
  transition: background var(--dur-normal), transform var(--dur-fast) var(--ease-out-expo);
}
a.invite-sistema-link:hover { background: var(--adelante-hover); transform: translateY(-1px); }
.invite-sistema-n { font-weight: 700; font-size: 16px; }
.invite-sistema-d { font-size: 13px; opacity: 0.85; }
.invite-sistema.is-pronto .invite-sistema-link { background: var(--relleno); color: var(--tinta-tenue); }
@media (max-width: 620px) { .invite-sistemas { grid-template-columns: 1fr; } }

/* Aviso de SmartScreen, bajo los botones: tranquilo, sin colores de alarma. */
.invite-windows {
  margin: 14px 0 0;
  padding: 16px 18px;
  border-radius: var(--r-l);
  background: var(--relleno-suave);
  box-shadow: inset 0 0 0 1px var(--linea);
  font-size: 15px;
  color: var(--tinta-suave);
}
.invite-windows[hidden] { display: none; }
.invite-windows p { margin: 0; max-width: none; }
.invite-windows b { color: var(--tinta); font-weight: 600; }
.invite-windows-t { font-weight: 700; color: var(--tinta) !important; margin-bottom: 6px !important; }
.invite-windows-pasos { margin: 10px 0; padding-left: 1.3em; display: grid; gap: 4px; }
.invite-windows-pie { font-size: 13.5px; color: var(--tinta-tenue) !important; }

/* «¿Ya tienes invitación?»: el email y el botón en una fila, y la respuesta debajo. */
.resend-form { display: flex; gap: 10px; flex-wrap: wrap; }
.resend-form .waitlist-input { flex: 1 1 260px; }
.resend-status { margin: 16px 0 0; font-size: 15.5px; color: var(--tinta-suave); }
.resend-status.is-ok { color: var(--tinta); }
.resend-status.is-error { color: var(--peligro, #F48771); }
.resend-status a { color: var(--adelante-texto); }

/* ¿Te gustaría un curso?: bajo la descarga, sin quitarle protagonismo. */
.invite-curso {
  margin: 28px 0 0;
  padding: clamp(22px, 3vw, 30px);
  border-radius: var(--r-xl);
  background: var(--relleno-suave);
  box-shadow: inset 0 0 0 1px var(--linea);
}
.invite-curso-h { margin: 0 0 8px; font-size: clamp(19px, 2.2vw, 22px); line-height: 1.3; color: var(--tinta); }
.invite-curso-d { margin: 0 0 18px; font-size: 15.5px; color: var(--tinta-suave); max-width: 60ch; }
.invite-curso-opciones { display: flex; flex-wrap: wrap; gap: 10px; }
.invite-curso-temas { display: grid; gap: 8px; margin-top: 14px; }
.invite-curso-temas label { font-size: 15px; color: var(--tinta-suave); }
.invite-curso-temas textarea {
  width: 100%; resize: vertical;
  padding: 12px 14px; border-radius: var(--r-l);
  border: 1px solid var(--linea-fuerte); background: var(--tarjeta);
  color: var(--tinta); font: inherit; font-size: 15.5px;
}
.invite-curso-fila { display: flex; align-items: center; gap: 12px; }
.invite-curso-hecho { color: var(--marca); font-weight: 600; font-size: 14.5px; }
.invite-curso-cambiar { margin: 6px 0 0; font-size: 15px; color: var(--tinta-suave); }
.invite-curso-cambiar .admin-link { background: none; border: 0; padding: 0; color: var(--adelante-texto); text-decoration: underline; cursor: pointer; font: inherit; }