/* Square AI AILRA - site.css
   Blocos da landing (hero, matriz Nine Box, regua de niveis) e o indicador de
   etapas do assessment. Modulo irmao de app.css pelo limite de 500 linhas.
   Carregar depois de app.css e antes de report.css. */

/* ===== HERO ================================================================
   Headline enorme com palavras destacadas no acento e grade sutil de linhas
   finas ao fundo, como no hero do site.                                      */
.do-hero {
  position: relative;
  overflow: hidden;
}
.do-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(242, 244, 232, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 244, 232, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, #000 35%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, #000 35%, transparent 100%);
  pointer-events: none;
}
.do-hero > .do-container { position: relative; }
.do-hero__title {
  font-size: var(--do-fs-display);
  line-height: var(--do-lh-tight);
  letter-spacing: var(--do-ls-tight);
  max-width: 21ch;
}
.do-hero__lead { margin-top: var(--do-sp-6); }

/* ===== MATRIZ NINE BOX =====================================================
   3x3 com eixo Y vertical a esquerda e legendas do eixo X abaixo.
   Celula destaque (AI-First): borda + tinta oliva. Risco Sistemico: borda
   vermelha (3,4:1 sobre o card) + fundo vinho.                               */
.do-9box { display: grid; grid-template-columns: auto 1fr; gap: var(--do-sp-3); align-items: stretch; }
.do-9box__ylab {
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: var(--do-fs-xxs);
  font-weight: 600;
  letter-spacing: var(--do-ls-eyebrow);
  text-transform: uppercase;
  color: var(--do-ink-mute);
}
/* minmax(0,1fr) + min-width:0: nenhuma celula alarga a coluna pelo conteudo minimo.
   grid-auto-rows: 1fr: as tres fileiras sempre com a MESMA altura (a queixa dos
   "quadrados desalinhados"): a celula mais alta dita a altura de todas. */
.do-9box__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--do-sp-2);
}
.do-9box__cell {
  display: flex;
  flex-direction: column;
  gap: var(--do-sp-2);
  min-width: 0;
  padding: var(--do-sp-4);
  border: 1px solid var(--do-line);
  border-radius: var(--do-r);
  background: var(--do-surface);
  transition: border-color var(--do-t), transform var(--do-t);
}
.do-9box__cell:hover { border-color: var(--do-line-strong); transform: translateY(-2px); }
.do-9box__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--do-sp-2); }
.do-9box__name { font-size: var(--do-fs-sm); font-weight: 600; line-height: 1.25; }
.do-9box__n {
  flex: none;
  font-family: var(--do-font-display);
  font-size: var(--do-fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--do-ink-mute);
}
.do-9box__desc { font-size: var(--do-fs-xs); line-height: 1.45; color: var(--do-ink-mute); max-width: none; }
.do-9box__cell--hero { border-color: var(--do-accent-line); background: var(--do-surface-tint); }
.do-9box__cell--hero:hover { border-color: var(--do-accent); }
.do-9box__cell--hero .do-9box__name { color: var(--do-accent-ink); }
.do-9box__cell--risk { border-color: var(--do-risk); background: var(--do-wine); }
.do-9box__cell--risk:hover { border-color: var(--do-risk); }
.do-9box__cell--risk .do-9box__desc { color: var(--do-ink-soft); }
.do-9box__xlab {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  gap: var(--do-sp-4);
  font-size: var(--do-fs-xxs);
  font-weight: 600;
  letter-spacing: var(--do-ls-eyebrow);
  text-transform: uppercase;
  color: var(--do-ink-mute);
}
.do-9box__note { margin-top: var(--do-sp-6); }

@media (max-width: 640px) {
  .do-9box { grid-template-columns: 1fr; }
  .do-9box__ylab { writing-mode: horizontal-tb; transform: none; justify-content: flex-start; }
  .do-9box__grid { gap: 6px; }
  .do-9box__cell { padding: var(--do-sp-2); gap: var(--do-sp-1); }
  /* Numero ancorado no topo da celula, alinhado entre vizinhas mesmo com nome de
     2 linhas (nunca empilhar nome e numero: o numero dancava conforme o nome). */
  .do-9box__head { align-items: flex-start; gap: var(--do-sp-1); }
  .do-9box__name { font-size: var(--do-fs-xxs); }
  .do-9box__desc { display: none; }
  .do-9box__xlab { grid-column: 1; }
  /* Legenda do eixo X em duas linhas controladas: setas numa linha, rotulo noutra. */
  .do-9box__xlab { flex-wrap: wrap; row-gap: 2px; }
  .do-9box__xlab span:first-child,
  .do-9box__xlab span:last-child { white-space: nowrap; }
  .do-9box__xlab span:nth-child(2) { flex: 1 0 100%; order: 1; }
}

/* ===== REGUA DE NIVEIS (landing) ===========================================
   9 cards horizontais com ponto colorido subindo do cinza ao oliva, visual da
   regua do site aplicado a escala ARL da plataforma (nomes vem da API; a
   escala individual NAO e renomeada aqui). Largura rola dentro do proprio
   involucro: a pagina nunca ganha rolagem horizontal.                        */
.do-levelrow { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: var(--do-sp-2); }
.do-levelrow__track { display: grid; grid-template-columns: repeat(9, minmax(150px, 1fr)); gap: var(--do-sp-2); min-width: 900px; }
.do-levelcard {
  display: flex;
  flex-direction: column;
  gap: var(--do-sp-2);
  padding: var(--do-sp-4);
  border: 1px solid var(--do-line);
  border-radius: var(--do-r-sm);
  background: var(--do-surface);
  transition: border-color var(--do-t), transform var(--do-t);
}
.do-levelcard:hover { border-color: var(--do-accent-line); transform: translateY(-2px); }
.do-levelcard__top { display: flex; align-items: center; gap: var(--do-sp-2); }
.do-levelcard__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.do-levelcard__n {
  font-family: var(--do-font-display);
  font-size: var(--do-fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--do-ink-mute);
}
.do-levelcard__name { font-size: var(--do-fs-sm); font-weight: 600; line-height: 1.3; }
.do-levelcard__range { font-size: var(--do-fs-xxs); color: var(--do-ink-mute); }
.do-levelcard__desc { font-size: var(--do-fs-xs); line-height: 1.45; color: var(--do-ink-soft); max-width: none; }

/* ===== MERCADO (graficos de barra do site) =================================
   Rotulo a esquerda, barra oliva, percentual tabular a direita; laranja e
   vermelho reservados as categorias de risco, como no site oficial.          */
.do-market__title { font-size: var(--do-fs-h4); }
.do-market { display: flex; flex-direction: column; gap: var(--do-sp-3); }
.do-market__row {
  display: grid;
  grid-template-columns: minmax(96px, 152px) 1fr auto;
  align-items: center;
  gap: var(--do-sp-3);
}
.do-market__label { font-size: var(--do-fs-xs); color: var(--do-ink-soft); line-height: 1.3; }
.do-market__track {
  display: block;
  height: 8px;
  border-radius: var(--do-r-pill);
  background: rgba(242, 244, 232, 0.08);
  overflow: hidden;
}
.do-market__bar { display: block; height: 100%; border-radius: var(--do-r-pill); background: var(--do-accent); }
.do-market__bar--dim { background: var(--do-cinza); }  /* cinza-oliva de apoio */
.do-market__bar--warn { background: var(--do-warn); }
.do-market__bar--risk { background: var(--do-risk); }
.do-market__pct {
  min-width: 3.4rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: var(--do-fs-xs);
  color: var(--do-ink-mute);
}

/* ===== INDICADOR DE ETAPAS (assessment) ====================================
   Barra fixa logo abaixo do cabecalho com as 9 etapas: 8 blocos do instrumento
   + "Questoes situacionais". Estados: is-done, is-current, is-locked (a 9a so
   destrava com os 8 blocos completos). Em tela estreita as etapas viram pontos
   e o rotulo da atual aparece na linha de baixo.                             */
.do-steps {
  position: sticky;
  top: var(--do-header-h);
  z-index: 30;
  margin-top: calc(-1 * var(--do-sp-4));
  padding: var(--do-sp-3) var(--do-sp-3) var(--do-sp-2);
  background: rgba(27, 32, 16, 0.92);  /* --do-dark (1B2010) com 92% opacidade */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--do-line);
  border-radius: var(--do-r-sm);
}
.do-steps__rail { display: flex; gap: 2px; }
.do-step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: var(--do-sp-2) 2px;
  border-radius: var(--do-r-xs);
  border-bottom: 2px solid transparent;
  transition: background var(--do-t), color var(--do-t), border-color var(--do-t);
}
.do-step:hover { background: rgba(242, 244, 232, 0.06); }
.do-step__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--do-line-strong);
  transition: background var(--do-t), box-shadow var(--do-t);
}
.do-step__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.5938rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--do-ink-mute);
  transition: color var(--do-t);
}
.do-step.is-done .do-step__dot { background: var(--do-primary); }
.do-step.is-done .do-step__label { color: var(--do-ink-soft); }
.do-step.is-current { border-bottom-color: var(--do-accent); }
.do-step.is-current .do-step__dot { background: var(--do-accent); box-shadow: 0 0 0 3px var(--do-accent-soft); }
.do-step.is-current .do-step__label { color: var(--do-accent-ink); }
.do-step.is-locked { opacity: 0.45; cursor: not-allowed; }
.do-step.is-locked:hover { background: transparent; }
.do-steps__now { display: none; }
.do-steps__meta {
  display: flex;
  align-items: center;
  gap: var(--do-sp-3);
  margin-top: var(--do-sp-2);
}
.do-steps__meta .do-progress { flex: 1 1 auto; }
.do-steps__meta .do-progress__meta { margin-top: 4px; }
.do-steps__meta .do-badge { flex: none; }

@media (max-width: 640px) {
  .do-steps { padding-inline: var(--do-sp-2); }
  /* So o ponto fica visivel: a area de toque sobe para ~44px sem mudar o desenho. */
  .do-step { padding: var(--do-sp-2) 0; min-height: 44px; justify-content: center; }
  .do-step__label { display: none; }
  .do-steps__now {
    display: block;
    margin-top: var(--do-sp-1);
    text-align: center;
    font-size: var(--do-fs-xxs);
    font-weight: 600;
    letter-spacing: var(--do-ls-eyebrow);
    text-transform: uppercase;
    color: var(--do-accent-ink);
  }
  .do-steps__meta { flex-wrap: wrap; }
}