@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap");

/* ===========================================================
   Yamplink sobre o Twenty
   Escala derivada de #1265F6, o azul do simbolo da marca.
   Sobrescreve tokens do design system; so toca em classe com
   hash nas telas de entrada, onde e inevitavel.
   =========================================================== */

/* --- 1. Cor da marca -------------------------------------- */
:root, html, body, [data-theme] {
  /* token principal, usado 91x no bundle */
  --t-color-blue:   #1265f6 !important;

  --t-color-blue1:  #fbfdff !important;
  --t-color-blue2:  #f7faff !important;
  --t-color-blue3:  #edf3fe !important;
  --t-color-blue4:  #dfeafe !important;
  --t-color-blue5:  #cedffd !important;
  --t-color-blue6:  #bbd3fc !important;
  --t-color-blue7:  #a3c3fb !important;
  --t-color-blue8:  #81adfa !important;
  --t-color-blue9:  #1265f6 !important;
  --t-color-blue10: #0856dd !important;
  --t-color-blue11: #0346bc !important;
  --t-color-blue12: #06265e !important;

  /* escala de destaque: pinta acao e selecao */
  --t-accent-accent1:    #fcfdff !important;
  --t-accent-accent2:    #f5f9ff !important;
  --t-accent-accent3:    #edf3fe !important;
  --t-accent-accent4:    #dfeafe !important;
  --t-accent-accent5:    #cedffd !important;
  --t-accent-accent6:    #bbd3fc !important;
  --t-accent-accent7:    #a3c3fb !important;
  --t-accent-accent8:    #81adfa !important;
  --t-accent-accent9:    #1265f6 !important;
  --t-accent-accent10:   #0856dd !important;
  --t-accent-accent11:   #0346bc !important;
  --t-accent-accent12:   #06265e !important;
  --t-accent-accent3570: #81adfa !important;
  --t-accent-accent4060: #81adfa !important;
}

/* --- 2. Botao principal no azul da marca ------------------- */
._button_y8rpu_1[data-variant="primary"],
button[data-variant="primary"] {
  --main-button-bg:           #1265f6 !important;
  --main-button-hover-bg:     #0856dd !important;
  --main-button-border-color: #0a52cf !important;
  --main-button-color:        #ffffff !important;
}

/* ===========================================================
   3. TELA DE ENTRADA — experiencia dividida
   Painel de marca a esquerda com o degrade do simbolo
   (azul #1265F6 -> roxo #A353FD sobre #070912),
   formulario a direita no branco.
   =========================================================== */

.s1wc667 {
  background: #ffffff !important;
  flex-direction: row !important;
  overflow: hidden !important;
}

/* painel de marca */
.s1wc667::before {
  content: "";
  flex: 0 0 46%;
  align-self: stretch;
  background:
    radial-gradient(120% 90% at 12% 8%,  rgba(18,101,246,.55) 0%, rgba(18,101,246,0) 58%),
    radial-gradient(100% 80% at 88% 92%, rgba(163,83,253,.50) 0%, rgba(163,83,253,0) 60%),
    radial-gradient(70%  55% at 78% 18%, rgba(255,234,255,.16) 0%, rgba(255,234,255,0) 55%),
    #070912;
}

.s1wc667::after {
  content: "Yamplink\A CRM comercial\A da equipe.";
  white-space: pre;
  position: absolute;
  left: clamp(32px, 5vw, 76px);
  bottom: clamp(48px, 9vh, 96px);
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(28px, 3.1vw, 46px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: #ffffff;
  z-index: 2;
  pointer-events: none;
}

/* coluna do formulario */
.s1wc667 [class*="_verticallyCentered_"] {
  flex: 1 1 auto !important;
  justify-content: center !important;
  padding: 6vh clamp(24px, 4vw, 72px) !important;
}
.s1wc667 [class*="_content_"] {
  width: 100% !important;
  max-width: 380px !important;
  margin: 0 auto !important;
}

/* marca no topo da coluna: so o simbolo do workspace */
.si03ohs .s1u3xbtx { display: none !important; }
.si03ohs { justify-content: flex-start !important; }
.si03ohs .sztoge { position: static !important; }
.si03ohs img.s1fiw0wm {
  width: 36px !important; height: 36px !important;
  border-radius: 9px !important;
}

/* titulo com copy propria no lugar de "Bem-vindo, Yamplink." */
.sfyinng { margin: 34px 0 6px !important; text-align: left !important; }
.sfyinng .sdtdivd, .sfyinng [class*="_fadeIn_"] {
  font-size: 0 !important;
  line-height: 0 !important;
  text-align: left !important;
}
.sfyinng .sdtdivd::before {
  content: "Entrar na sua conta";
  display: block;
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #0d1117;
}
.sfyinng .sdtdivd::after {
  content: "Use o e-mail da Yamplink para continuar.";
  display: block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #5b6472;
}

/* formulario */
.scp97ch { margin: 26px 0 22px !important; }

.s2s75wa { position: relative !important; margin-bottom: 0 !important; }
.s2s75wa::before {
  content: "E-mail";
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: #3d4552;
  margin-bottom: 7px;
  text-align: left;
}

.s1wc667 input.syl9n89 {
  height: 44px !important;
  border-radius: 10px !important;
  font-size: 14.5px !important;
  padding: 0 14px !important;
  background: #fcfdff !important;
}

.s1wc667 ._button_y8rpu_1[data-variant="primary"] {
  height: 44px !important;
  border-radius: 10px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  margin-top: 16px !important;
  box-shadow: 0 1px 2px rgba(18,101,246,.28), 0 6px 18px -6px rgba(18,101,246,.45) !important;
}

.s1c6e69w {
  font-size: 12px !important;
  opacity: .7 !important;
  justify-content: flex-start !important;
}

/* celular e tablet: some o painel, volta coluna unica */
@media (max-width: 900px) {
  .s1wc667 { flex-direction: column !important; }
  .s1wc667::before, .s1wc667::after { display: none !important; }
  .s1wc667 [class*="_verticallyCentered_"] { padding: 8vh 24px !important; }
}