/* ==========================================================================
   Software sob Medida — 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.
   ========================================================================== */

:root {
  /* hachura de "economia que ficou na mesa" */
  --hatch: repeating-linear-gradient(
    45deg, transparent 0 5px, var(--gray-3) 5px 6px
  );
}

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

/* ==========================================================================
   Hero — carimbo de ROI no lugar do starburst
   ========================================================================== */

.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.2rem;
  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; }

/* ==========================================================================
   ROI antecipado
   ========================================================================== */

.legend-swatch {
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  border: var(--line-thin);
  vertical-align: -3px;
}

/* hachura mais fechada que a das barras: num quadradinho de 1rem, 5px não lê */
.legend-swatch--risk {
  background-color: var(--paper);
  background-image: repeating-linear-gradient(
    45deg, transparent 0 2px, var(--gray-3) 2px 3px
  );
}
.legend-swatch--value { background: var(--ink); }

.roi { margin-top: 1.25rem; }

/* o controle: um range de verdade, porque ele se anuncia como arrastável */
.roi__control {
  border: var(--line);
  background: var(--gray-1);
  padding: .8rem 1rem .7rem;
  margin-bottom: 1rem;
}

.roi__control-label { display: block; font-size: .9rem; margin-bottom: .5rem; }

.roi__slider-row { display: flex; align-items: center; gap: .75rem; }

.roi__end {
  font-size: .65rem;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--gray-3);
  white-space: nowrap;
}

.roi__control input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 1.5rem;
  background: transparent;
  cursor: pointer;
}

.roi__control input[type="range"]::-webkit-slider-runnable-track {
  height: .5rem;
  background: var(--paper);
  border: var(--line-thin);
}
.roi__control input[type="range"]::-moz-range-track {
  height: .5rem;
  background: var(--paper);
  border: var(--line-thin);
}

.roi__control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: -.55rem;
  background: var(--ink);
  border: var(--line-thin);
  box-shadow: 3px 3px 0 var(--gray-3);
}
.roi__control input[type="range"]::-moz-range-thumb {
  width: 1.5rem;
  height: 1.5rem;
  background: var(--ink);
  border: var(--line-thin);
  box-shadow: 3px 3px 0 var(--gray-3);
  border-radius: 0;
}

.roi__control input[type="range"]:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }

.roi__readout {
  display: block;
  margin-top: .35rem;
  text-align: center;
  font-size: 1.15rem;
  font-weight: bold;
}

.roi__panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: stretch;
}

.roi__panel {
  border: var(--line);
  background: var(--paper);
  padding: .9rem 1rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.roi__panel--us { box-shadow: var(--shadow-hard); }

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

.roi__head p { margin: .2rem 0 0; font-size: .75rem; color: var(--gray-3); }

/* o gráfico: uma coluna por mês; sólido = economia no bolso,
   hachurado = o que a entrega contínua já teria economizado */
.roi__chart {
  display: flex;
  align-items: flex-end;
  gap: .3rem;
  height: 10rem;
  border-bottom: var(--line-thin);
}

.roi__col {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
}

.roi__stack {
  border: var(--line-thin);
  border-bottom: none;
  background: var(--hatch);
  background-color: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: height .35s var(--ease-pop);
  min-height: 2px;
}

.roi__value { background: var(--ink); transition: height .35s var(--ease-pop); }

.roi__month {
  position: absolute;
  bottom: -1.25rem;
  inset-inline: 0;
  text-align: center;
  font-size: .58rem;
  font-weight: bold;
  color: var(--gray-3);
}

.roi__summary {
  margin-top: 1rem;
  border: var(--line);
  box-shadow: var(--shadow-soft);
  background: var(--gray-1);
  padding: .8rem 1.1rem;
  max-width: 46rem;
}

.roi__summary p { margin: 0; font-size: .95rem; }
.roi__diff { font-size: 1.2em; }

/* ==========================================================================
   Tenta quebrar o software
   ========================================================================== */

.lab {
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 1rem;
  align-items: start;
  max-width: 56rem;
}

.lab__changes { display: grid; gap: .6rem; }

.lab__change {
  font: inherit;
  font-weight: bold;
  font-size: .9rem;
  text-align: left;
  background: var(--paper);
  border: var(--line);
  box-shadow: var(--shadow-soft);
  padding: .7rem .9rem;
  cursor: pointer;
  transition: translate .12s var(--ease-pop), box-shadow .12s;
}

.lab__change:hover:not(:disabled) { translate: -2px -2px; box-shadow: 6px 6px 0 var(--ink); }
.lab__change:active:not(:disabled) { translate: 2px 2px; box-shadow: 1px 1px 0 var(--ink); }
.lab__change:disabled { cursor: wait; opacity: .55; }
.lab__change.is-chosen { background: var(--ink); color: var(--paper); opacity: 1; }

.lab__run {
  border: var(--line);
  background: var(--paper);
  padding: .8rem 1rem 1rem;
}

.lab__status {
  font-size: .8rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: var(--line-thin);
  padding-bottom: .5rem;
}

.lab__log {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
  max-height: 9.5rem;
  overflow-y: auto;
  font-size: .8rem;
  line-height: 1.6;
}

.lab__log .is-ok { color: var(--gray-3); }
.lab__log .is-ok::first-letter { color: var(--win); }
.lab__log .is-fail { color: var(--loss); font-weight: bold; }

.lab__result { margin-top: .5rem; }
.lab__result p { margin: .5rem 0 0; font-size: .88rem; }
.lab__caught { font-size: .95rem !important; }

.lab__result ul {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
  display: grid;
  gap: .4rem;
}

.lab__result li {
  border-left: 8px solid var(--loss);
  background: var(--gray-1);
  padding: .45rem .7rem;
  font-size: .85rem;
}

/* ==========================================================================
   Nem tudo se automatiza do mesmo jeito (regra + IA)
   ========================================================================== */

.flow {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: .6rem;
  max-width: 46rem;
}

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

.flow__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;
}

.flow__tag--ia { background: var(--paper); color: var(--ink); border: 2px dashed var(--ink); }
.flow__tag--gente { background: var(--paper); color: var(--ink); border: var(--line-thin); }

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

/* ==========================================================================
   Processos que a gente já automatizou
   ========================================================================== */

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

.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: .4rem 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.25rem; font-weight: bold; line-height: 1.15; }

/* ==========================================================================
   Como começa — os primeiros 14 dias
   ========================================================================== */

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

.days__step {
  display: grid;
  grid-template-columns: 5.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); }

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width: 860px) {
  .page-software .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: 1.8rem; }

  .roi__control-label { font-size: .8rem; }
  .roi__end { font-size: .58rem; }
  .roi__readout { font-size: 1rem; }

  /* ROI: painéis empilham, gráfico encolhe */
  .roi__panels { grid-template-columns: 1fr; }
  .roi__chart { height: 6rem; gap: .2rem; }
  .roi__panel { padding: .6rem .7rem 1.4rem; gap: .4rem; }
  .roi__head h3 { font-size: .8rem; }
  .roi__head p { font-size: .68rem; }
  .roi__month { font-size: .5rem; bottom: -1.1rem; }
  .roi__summary p { font-size: .85rem; }

  /* laboratório de testes: coluna única */
  .lab { grid-template-columns: 1fr; }
  .lab__change { font-size: .82rem; padding: .55rem .75rem; }
  .lab__log { max-height: 7rem; font-size: .72rem; }
  .lab__result p, .lab__result li { font-size: .8rem; }

  .flow__step { grid-template-columns: 1fr; gap: .35rem; }
  .flow__tag { justify-self: start; }
  .flow__what { font-size: .85rem; }

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

  .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; }
}

@media (prefers-reduced-motion: reduce) {
  .is-active .stamp { animation: none !important; }
  .roi__stack, .roi__value { transition: none; }
}