/* ===========================================================
   ADVIZE · Tela inicial (antes do login)
   Depende de assets/design-system.css — aqui só o que é
   específico desta página. Nenhuma cor solta: tudo por token.
   =========================================================== */

/* ===================== NAV ===================== */
.w-nav{
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.w-nav-inner{
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.25rem;
}
.w-brand{
  display: flex;
  align-items: center;
  gap: .625rem;
  text-decoration: none;
  color: var(--foreground);
}
.w-brand-logo{ height: 1.75rem; width: auto; display: block; }
.w-brand-sub{
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  padding-left: .625rem;
  border-left: 1px solid var(--border-strong);
}
.w-nav-links{
  display: flex;
  gap: 1.75rem;
  margin-left: auto;
}
.w-nav-links a{
  color: var(--muted);
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 450;
  transition: color .2s var(--ease);
}
.w-nav-links a:hover{ color: var(--foreground); }
.w-nav .ds-btn{ margin-left: auto; }
.w-nav-links ~ .ds-btn{ margin-left: 0; }

/* ===================== HERO ===================== */
.w-hero{ padding-top: clamp(2.5rem, 6vw, 5rem); }
.w-hero-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.w-hero-copy{ display: grid; gap: 1.25rem; justify-items: start; }
.w-hero-sub{
  font-family: var(--font-head);
  font-size: clamp(1.0625rem, .95rem + .6vw, 1.375rem);
  font-weight: 500;
  color: var(--foreground);
  max-width: 30ch;
}
.w-hero-actions{ display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
.w-hero-foot{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--muted);
}

/* ---- composição abstrata ---- */
.w-hero-visual{
  position: relative;
  aspect-ratio: 1;
  width: min(100%, 30rem);
  margin-inline: auto;
}
.w-orbit-lines{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.w-core{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .125rem;
  width: 9.5rem; height: 9.5rem;
  padding: 0 1.25rem;            /* mantém o texto dentro da curva do círculo */
  border-radius: 50%;
  background: linear-gradient(150deg, var(--brand-primary), #262a72);
  color: #fff;
  text-align: center;
  box-shadow: 0 18px 50px rgba(21, 23, 67, .28), var(--glow);
}
.w-core strong{ font-family: var(--font-head); font-size: .9375rem; line-height: 1.2; }
.w-core span{ font-size: .625rem; line-height: 1.25; color: rgba(255, 255, 255, .6); }
.w-core .ds-icon{ color: var(--brand-accent); }

.w-node{
  position: absolute;
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .6875rem .875rem;
  border-radius: var(--r-lg);
  white-space: nowrap;
}
.w-node .ds-icon{ color: var(--brand-accent); }
.w-node b{ display: block; font-size: .8125rem; color: var(--foreground); }
.w-node span{ display: block; font-size: .6875rem; color: var(--muted); }
.w-node-1{ left: 0;    top: 16%; }
.w-node-2{ right: 0;   top: 6%; }
.w-node-3{ left: -2%;  bottom: 16%; }
.w-node-4{ right: -2%; bottom: 6%; }

.w-spark{
  position: absolute;
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--brand-accent);
  animation: dsPulse 3.6s var(--ease) infinite;
}
.w-spark-1{ left: 30%; top: 30%; }
.w-spark-2{ right: 28%; top: 42%; animation-delay: 1.2s; }
.w-spark-3{ left: 38%; bottom: 26%; animation-delay: 2.4s; }

/* ===================== faixas alternadas ===================== */
.w-alt{ background: var(--surface); border-block: 1px solid var(--border); }

/* ===================== ETAPAS ===================== */
.w-steps{ list-style: none; margin: 0; padding: 0; }
.w-steps li{ display: grid; gap: .875rem; justify-items: start; position: relative; }
.w-step-n{
  position: absolute;
  top: 1.25rem; right: 1.5rem;
  font-family: var(--font-head);
  font-size: 1.75rem;
  font-weight: 600;
  color: rgba(21, 23, 67, .07);
}

/* ===================== FLUXO ===================== */
/* Grade de 7 colunas, não flex: com flex-basis os rótulos mais longos
   ("Base de conhecimento") impedem o encolhimento, e a última etapa
   quebrava sozinha para a linha de baixo, esticada. */
.w-flow{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: stretch;
  gap: .625rem;
}
.w-flow-step{
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: .625rem;
  padding: 1.25rem .875rem;
  text-align: center;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  font-size: .8125rem;
  position: relative;
}
/* A seta é decorativa e some no empilhamento vertical. */
.w-flow-step:not(:last-child)::after{
  content: "";
  position: absolute;
  right: -.5rem; top: 50%;
  width: .375rem; height: .375rem;
  border-top: 1.5px solid var(--border-strong);
  border-right: 1.5px solid var(--border-strong);
  transform: translateY(-50%) rotate(45deg);
}
.w-flow-end{
  border-color: rgba(57, 197, 243, .35);
  box-shadow: var(--glow);
}

/* ===================== BASE CENTRAL ===================== */
.w-split{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
.w-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.w-list li{
  display: flex;
  align-items: center;
  gap: .625rem;
  color: var(--muted);
  font-size: .9375rem;
}
.w-list .ds-icon{ color: var(--brand-accent); }

.w-base{ display: grid; gap: 1rem; justify-items: center; }
.w-base-central{
  display: flex;
  align-items: center;
  gap: .875rem;
  width: 100%;
  padding: 1.125rem 1.25rem;
}
.w-base-central b{ display: block; font-size: .9375rem; }
.w-base-central span{ color: var(--muted); }
.w-base-row{ display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.w-chip{
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  padding: .5rem .75rem;
  border-radius: var(--r-md);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  font-size: .8125rem;
  color: var(--foreground);
}
.w-chip .ds-icon{ width: 1rem; height: 1rem; color: var(--muted-soft); }
.w-chip-user em{
  font-style: normal;
  color: var(--brand-accent);
  font-size: .75rem;
  padding-left: .375rem;
  border-left: 1px solid var(--border);
}
.w-base-arrow{ width: 1.25rem; height: 1.25rem; stroke: var(--border-strong); stroke-width: 2; fill: none; }

/* ===================== KANBAN ===================== */
.w-kanban{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(9.5rem, 1fr);
  gap: .75rem;
  /* Rola dentro do próprio contêiner: a página nunca rola na horizontal. */
  overflow-x: auto;
  padding-bottom: .5rem;
  scrollbar-width: thin;
}
.w-col{
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: .75rem;
  display: grid;
  gap: .5rem;
  align-content: start;
  min-height: 9rem;
}
.w-col-h{
  font-size: .75rem;
  font-weight: 600;
  color: var(--brand-primary);
  line-height: 1.3;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border);
}
.w-col-card{
  height: 2.25rem;
  border-radius: var(--r-sm);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.w-col:nth-child(4) .w-col-card:first-of-type,
.w-col:nth-child(6) .w-col-card:first-of-type{
  border-left: 2px solid var(--brand-accent);
}

/* ===================== LEMBRETES ===================== */
.w-kinds{ display: flex; flex-wrap: wrap; gap: .5rem; }
.w-reminder{ padding: 1.5rem; display: grid; gap: 1.125rem; }
.w-reminder-top{ display: flex; align-items: center; gap: .875rem; }
.w-reminder-top b{ display: block; font-size: 1rem; }
.w-reminder-top span{ color: var(--muted); }
.w-reminder-when{ display: flex; gap: 2.5rem; }
.w-reminder-when span{ display: block; color: var(--muted); }
.w-reminder-when b{ font-family: var(--font-head); font-size: 1.25rem; }
.w-reminder-alerts{ display: flex; flex-wrap: wrap; gap: .5rem; }

/* ===================== CTA ===================== */
.w-cta{
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 1.25rem;
  justify-items: center;
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, var(--brand-primary), #23276b);
  color: #fff;
}
.w-cta::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 82% 12%, rgba(57, 197, 243, .22), transparent 46%);
}
.w-cta > *{ position: relative; z-index: 1; }
.w-cta h2{ color: #fff; max-width: 20ch; }
.w-cta p{ color: rgba(255, 255, 255, .74); max-width: 52ch; }

/* ===================== FOOTER ===================== */
.w-footer{
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 2.5rem 0;
}
.w-footer-inner{
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
}
.w-footer-links{ display: flex; flex-wrap: wrap; gap: 1.5rem; }
.w-footer-links a{
  color: var(--muted);
  text-decoration: none;
  font-size: .875rem;
  transition: color .2s var(--ease);
}
.w-footer-links a:hover{ color: var(--foreground); }

/* ===================== RESPONSIVO ===================== */
@media (max-width: 1080px){
  .w-flow{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); }
}
@media (max-width: 960px){
  .w-hero-grid{ grid-template-columns: 1fr; }
  .w-hero-visual{ order: -1; width: min(100%, 24rem); }
  .w-nav-links{ display: none; }        /* o conteúdo continua acessível pela rolagem */
  .w-brand-sub{ display: none; }
}
@media (max-width: 640px){
  .ds{ font-size: 15px; }
  .w-hero-actions{ width: 100%; }
  .w-hero-actions .ds-btn{ flex: 1 1 100%; }
  /* Os nós deixam de sangrar para fora: com deslocamento negativo eles
     alargavam o documento e cortavam o conteúdo à direita. */
  .w-node{ padding: .5rem .625rem; max-width: 45%; white-space: normal; }
  .w-node span{ display: none; }        /* mantém o cartão legível em tela estreita */
  .w-node b{ font-size: .75rem; }
  .w-node-1{ left: 0; top: 12%; }
  .w-node-2{ right: 0; top: 4%; }
  .w-node-3{ left: 0; bottom: 12%; }
  .w-node-4{ right: 0; bottom: 4%; }
  .w-core{ width: 7.5rem; height: 7.5rem; padding: 0 .875rem; }
  .w-flow-step:not(:last-child)::after{ display: none; }
  .w-reminder-when{ gap: 1.75rem; }
}

/* Barra do topo em tela estreita: o lettering sai para o logo e o botão
   caberem lado a lado sem estourar a largura. */
@media (max-width: 520px){
  .w-nav-inner{ gap: .75rem; }
  .w-nav .ds-lockup-word{ display: none; }
  .w-nav .ds-btn{ padding: .75rem 1.125rem; font-size: .875rem; }
}

/* Plano B da marca: se o PNG não carregar, o lettering entra no lugar. */
.w-wordmark{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: .06em;
  color: var(--brand-primary);
}