/* ==========================================================================
   Consultoria em UX — estilos específicos desta página.
   Carrega DEPOIS de styles.css e reaproveita tokens, tipografia, motion,
   header, rodapé, popup e as animações de entrada.
   ========================================================================== */

/*
  Snap por proximidade, como nas outras páginas de serviço: os blocos
  argumentativos são mais altos que a tela e snap obrigatório tornaria o pé
  deles inalcançável.
*/
.page-ux .deck { scroll-snap-type: y proximity; }
.page-ux .slide {
  scroll-snap-stop: normal;
  align-content: center;
  padding-block: 4rem;
}

/* ==========================================================================
   Hero — carimbo (mesmo componente de software.css)
   ========================================================================== */

.stamp {
  flex: 0 0 auto;
  border: var(--line);
  box-shadow: var(--shadow-hard);
  background: var(--paper);
  padding: 1rem 1.25rem;
  text-align: center;
  rotate: -3deg;
  max-width: 13rem;
}

.stamp__num {
  display: block;
  font-size: 2.6rem;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -.03em;
  /* nada de nowrap: valor comprido tem que quebrar dentro da caixa,
     não atravessar a borda */
  overflow-wrap: break-word;
}

.stamp__label {
  display: block;
  margin-top: .4rem;
  font-size: .72rem;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.is-active .stamp { animation: pop .5s var(--ease-pop) var(--d, 0s) both; }

/* ==========================================================================
   Slide 2 — "Onde essa tela perde gente"
   O widget principal da página: o lead chuta em que campo as pessoas
   desistem, e a medição campo a campo aparece contradizendo (quase sempre)
   o chute. O vilão é o "confirmar senha", que ninguém suspeita.

   Regras de acessibilidade que valem aqui:
   - cada campo é um <button> de verdade, então teclado e leitor de tela
     funcionam sem nenhum truque de tabindex;
   - a leitura do resultado vive em região com aria-live="polite";
   - o vilão é identificado por texto ("maior perda"), borda grossa e sombra
     dura, nunca só por cor — a página inteira é preto e branco de propósito.
   ========================================================================== */

.drop { margin-top: 1.25rem; }

.drop__ask {
  margin: 0 0 .75rem;
  font-size: 1rem;
  border-left: 8px solid var(--ink);
  padding-left: .85rem;
  max-width: 44rem;
}

.drop__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

/* o formulário falso: caixa de wireframe dentro do wireframe */
.drop__form {
  border: var(--line);
  background: var(--paper);
  box-shadow: var(--shadow-hard);
  padding: 1rem;
  display: grid;
  gap: .5rem;
}

.drop__field {
  font: inherit;
  color: inherit;
  text-align: left;
  background: var(--paper);
  border: var(--line-thin);
  padding: .55rem .7rem;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr;
  gap: .45rem;
  align-items: center;
  transition: translate .12s var(--ease-pop), box-shadow .12s;
}

.drop__field:hover { translate: -2px -2px; box-shadow: 5px 5px 0 var(--ink); }
.drop__field:active { translate: 1px 1px; box-shadow: 1px 1px 0 var(--ink); }
.drop__field:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.drop__input { display: block; min-width: 0; }

.drop__label {
  display: block;
  font-size: .78rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .25rem;
}

/* marcador do palpite do lead — texto, não só destaque visual */
.drop__you {
  display: none;
  font-size: .6rem;
  letter-spacing: .08em;
  background: var(--ink);
  color: var(--paper);
  padding: .1rem .4rem;
  margin-left: .35rem;
  vertical-align: 1px;
}

.drop__field.is-guess .drop__you { display: inline-block; }

/* a caixa que finge ser o input */
.drop__box {
  display: block;
  border: 2px solid var(--gray-2);
  background: var(--gray-1);
  color: var(--gray-3);
  font-size: .85rem;
  padding: .35rem .5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* a revelação: só existe depois do palpite.
   O `display: grid` de autor ganha do `display: none` do UA stylesheet,
   então o [hidden] precisa ser reafirmado aqui. */
.drop__reveal { display: grid; gap: .3rem; min-width: 0; }
.drop__reveal[hidden] { display: none; }

.drop.is-revealed .drop__field { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }

.drop__meter {
  display: block;
  height: .85rem;
  border: var(--line-thin);
  background: var(--paper);
}

.drop__bar {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ink);
  transition: width .5s var(--ease-slam) var(--bd, 0s);
}

.drop.is-revealed .drop__bar { width: calc(var(--w) * 1%); }

.drop__pct { display: block; font-size: .85rem; font-weight: bold; }

.drop__why { display: block; font-size: .76rem; line-height: 1.4; }

/* o vilão: bandeira escrita + borda grossa + sombra dura.
   Nada aqui depende de cor. */
.drop__flag {
  justify-self: start;
  font-size: .62rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: var(--ink);
  color: var(--paper);
  padding: .15rem .5rem;
  rotate: -2deg;
}

.drop.is-revealed .drop__field.is-villain {
  border: var(--line);
  box-shadow: var(--shadow-soft);
  background: var(--gray-1);
}

.drop.is-revealed .drop__field.is-villain .drop__box { background: var(--paper); }

/* o botão de enviar do formulário falso: existe só pra fechar a cena */
.drop__submit {
  justify-self: start;
  margin-top: .2rem;
  font-size: .8rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--ink);
  color: var(--paper);
  border: var(--line-thin);
  padding: .5rem 1rem;
}

.drop__side { position: relative; }

.drop__result {
  border: var(--line);
  background: var(--gray-1);
  box-shadow: var(--shadow-soft);
  padding: .9rem 1.1rem;
}

.drop__result p { margin: 0 0 .6rem; font-size: .9rem; }
.drop__result p:last-child { margin-bottom: 0; }

.drop__idle { color: var(--gray-3); }

.drop__verdict {
  font-size: 1rem !important;
  font-weight: bold;
  border-bottom: var(--line-thin);
  padding-bottom: .5rem;
}

.drop__result.is-answered { animation: pop .4s var(--ease-pop) both; }

/* ==========================================================================
   Slide 3 — a curva dos cinco usuários (visualização estática)
   ========================================================================== */

.curve {
  list-style: none;
  margin: 1.25rem 0 .4rem;
  padding: 0;
  display: grid;
  gap: .4rem;
  max-width: 46rem;
}

.curve__row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) 3rem;
  gap: .7rem;
  align-items: center;
  border: var(--line-thin);
  background: var(--paper);
  padding: .4rem .7rem;
}

.curve__n { font-size: .85rem; font-weight: bold; }

.curve__track {
  display: block;
  height: 1.1rem;
  border: var(--line-thin);
  background: var(--paper);
}

.curve__bar {
  display: block;
  height: 100%;
  background: var(--ink);
  width: calc(var(--w) * 1%);
}

.curve__pct { font-size: .95rem; font-weight: bold; text-align: right; }

/* a linha dos cinco é o argumento do bloco: grossa e com sombra dura */
.curve__row--five {
  border: var(--line);
  box-shadow: var(--shadow-soft);
  background: var(--gray-1);
}

.curve__row--five .curve__n,
.curve__row--five .curve__pct { font-size: 1.15rem; }

.curve__caption {
  margin: 0;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gray-3);
  max-width: 46rem;
}

/* ==========================================================================
   Slide 4 — dias (mesmo componente de software.css)
   ========================================================================== */

.days { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .6rem; }

.days__step {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 1rem;
  align-items: baseline;
  border: var(--line-thin);
  background: var(--paper);
  padding: .7rem .9rem;
}

.days__when {
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .8rem;
  border-right: var(--line-thin);
  padding-right: .75rem;
}

.days__what { font-size: .95rem; }

.days__step--go {
  border: var(--line);
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--shadow-hard);
}

.days__step--go .days__when { border-right-color: var(--paper); }

/* ==========================================================================
   Slide 5 — os três jeitos de um software certo não ser usado
   ========================================================================== */

.truths {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: .6rem;
  max-width: 54rem;
}

.truths__item {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1rem;
  align-items: start;
  border: var(--line-thin);
  background: var(--paper);
  padding: .7rem .9rem;
}

.truths__tag {
  font-size: .68rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-align: center;
  background: var(--ink);
  color: var(--paper);
  padding: .3rem .4rem;
}

.truths__what { font-size: .92rem; }

.truths__punch {
  margin: 1rem 0 0;
  max-width: 46rem;
  font-size: 1rem;
  border-left: 8px solid var(--ink);
  padding-left: .9rem;
}

.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
}

.pair__item {
  border: var(--line);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
  padding: .9rem 1.1rem 1rem;
}

.pair__item h3 {
  margin: 0 0 .5rem;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.pair__item p { margin: 0; font-size: .88rem; }

/* ==========================================================================
   Slide 6 — cases (mesmo componente de software.css)
   ========================================================================== */

.cases {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .9rem;
  margin-top: 1.25rem;
  align-items: start;
}

.case {
  border: var(--line);
  background: var(--paper);
  padding: .9rem 1.1rem;
}

.case--big {
  grid-row: span 2;
  box-shadow: var(--shadow-hard);
}

.case h3 { margin: 0; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .03em; }

.case__sector {
  display: block;
  font-size: .65rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gray-3);
  margin: .1rem 0 .5rem;
}

.case p { margin: .5rem 0 0; font-size: .88rem; }

.case__stats {
  display: grid;
  gap: .5rem;
  margin: .75rem 0;
}

.case__stats div { border-top: var(--line-thin); padding-top: .35rem; }
.case__stats dt { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gray-3); }
.case__stats dd { margin: 0; font-size: 1.2rem; font-weight: bold; line-height: 1.15; }

/* ==========================================================================
   Conversão no meio do caminho (mesmo componente de styles.css)
   ========================================================================== */

.cta-inline { margin: 1.25rem 0 0; font-size: .9rem; line-height: 2.2; }

/* ==========================================================================
   Responsivo — checado em 390px
   ========================================================================== */

@media (max-width: 860px) {
  .page-ux .slide { padding: 2rem 1.25rem; }

  /* no celular o carimbo precisa poder encolher: com flex 0 0 auto e
     max-width none, rótulo longo empurra o bloco pra fora da tela */
  .stamp { rotate: -2deg; max-width: 100%; flex: 0 1 auto; }
  .stamp__num { font-size: 2rem; }

  /* widget: a coluna do resultado vai pra baixo do formulário, e cada campo
     volta a ser uma coluna só (rótulo, caixa, medição, motivo) */
  .drop__grid { grid-template-columns: 1fr; }
  .drop__ask { font-size: .9rem; padding-left: .6rem; }
  .drop__form { padding: .7rem; gap: .4rem; box-shadow: var(--shadow-soft); }
  .drop.is-revealed .drop__field { grid-template-columns: 1fr; }
  .drop__field { padding: .45rem .55rem; }
  .drop__label { font-size: .72rem; }
  .drop__box { font-size: .78rem; }
  .drop__pct { font-size: .8rem; }
  .drop__why { font-size: .72rem; }
  .drop__result p { font-size: .82rem; }
  .drop__verdict { font-size: .9rem !important; }

  .curve__row { grid-template-columns: 4.6rem minmax(0, 1fr) 2.6rem; gap: .5rem; padding: .3rem .5rem; }
  .curve__n { font-size: .72rem; }
  .curve__pct { font-size: .82rem; }
  .curve__row--five .curve__n,
  .curve__row--five .curve__pct { font-size: .95rem; }
  .curve__track { height: .9rem; }
  .curve__caption { font-size: .65rem; }

  .days__step { grid-template-columns: 1fr; gap: .2rem; }
  .days__when { border-right: none; border-bottom: var(--line-thin); padding: 0 0 .25rem; }
  .days__what { font-size: .85rem; }

  .truths__item { grid-template-columns: 1fr; gap: .35rem; }
  .truths__tag { justify-self: start; }
  .truths__what { font-size: .85rem; }
  .truths__punch { font-size: .9rem; padding-left: .7rem; }

  .pair { grid-template-columns: 1fr; gap: .7rem; margin-top: 1rem; }
  .pair__item { padding: .7rem .85rem .8rem; }
  .pair__item p { font-size: .82rem; }

  .cases { grid-template-columns: 1fr; }
  .case--big { grid-row: auto; }
  .case__stats dd { font-size: 1.05rem; }
  .case p { font-size: .82rem; }

  .cta-inline { font-size: .82rem; }
}

/* ==========================================================================
   Quem pediu menos movimento, recebe menos movimento
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .is-active .stamp { animation: none !important; }
  .drop__field { transition: none; }
  .drop__bar { transition: none; }
  .drop__result.is-answered { animation: none !important; }
}