/* ==========================================================================
   tnm.css — ajustes específicos do The Next Move.
   Carrega por último: framework.css → page.css → clone.css → tnm.css

   Só entra aqui o que a copy exigiu e o sistema clonado não cobria:
   blocos de crença, statements, listas em linha, itens do Mapa e o
   formulário de candidatura (que substituiu o checkout).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   Nada aqui. Cabeçalho, faixa, manchetes, barra vermelha, vídeo e caixa do
   autor usam exclusivamente as regras do sistema de referência
   (css/page.css + css/framework.css). Não sobrescreva — a fidelidade ao
   benchmark depende disso.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Carta — blocos de copy
   -------------------------------------------------------------------------- */

/* Enumerações ("Um novo SaaS. / Uma comunidade. / …"). 170% é o mesmo valor
   que a referência usa na lista da oferta — respiro de lista, sem inventar
   uma métrica nova. */
.tnm-lines {
  line-height: 170% !important;
  color: #303030;
}

/* Citações e falas — caixa rosa herdada, texto em itálico e centralizado. */
.tnm-quote {
  text-align: center !important;
  font-style: italic;
  font-size: 19px !important;
  line-height: 165% !important;
  color: #2A2A2A !important;
}
.tnm-quote b { font-style: normal; }

/* A crença central de cada seção. Este é o bloco que carrega a ideia dominante
   da página, então é o mais alto contraste da carta. */
.tnm-belief {
  text-align: left !important;
  font-family: "Roboto Serif", serif !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  line-height: 138% !important;
  color: #960A0E !important;
  padding: 6px 10px;
}
@media (max-width: 770px) {
  .tnm-belief { font-size: 19px !important; }
}

/* "Visual statements" — caixa amarela tracejada. */
.tnm-statement {
  font-size: 28px !important;
  line-height: 132% !important;
  color: #1A1A1A !important;
}
.tnm-statement .tnm-sub {
  display: block;
  margin-top: 14px;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 160%;
  color: #4A4A4A;
}
@media (max-width: 770px) {
  .tnm-statement { font-size: 20px !important; }
  .tnm-statement .tnm-sub { font-size: 14px; }
}

/* Itens do Mapa do Próximo Movimento. */
.tnm-mapnum {
  display: inline-block;
  min-width: 34px;
  margin-right: 10px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 900;
  color: #960A0E;
  vertical-align: 2px;
}

/* FAQ */
.tnm-faq-q {
  font-family: "Inter", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #111 !important;
}

/* Listas de ativos em duas colunas — 14 itens em coluna única viram uma
   parede; em duas, lê-se como inventário. */
.tnm-bullets-2col .elBulletList {
  column-count: 2;
  column-gap: 34px;
}
.tnm-bullets-2col .elBulletList li { break-inside: avoid; }
@media (max-width: 770px) {
  .tnm-bullets-2col .elBulletList { column-count: 1; }
}

/* Âncora usada pelo link "vá direto para a candidatura" — compensa o
   mini-player fixo no topo. */
.tnm-anchor { position: relative; top: -90px; height: 0; }

/* --------------------------------------------------------------------------
   Drawer de candidatura
   Substitui o checkout: campos longos, sem preço, sem bump, sem resumo.
   -------------------------------------------------------------------------- */
.ckIntro {
  margin: 0 0 18px;
  font: 400 14px/165% "Inter", sans-serif;
  color: #5A5A5A;
}

.ckFieldArea { align-items: stretch; min-height: 0; }
.ckFieldArea textarea {
  flex: 1;
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 26px 12px 10px;
  font: 400 14px/150% "Inter", sans-serif;
  color: #384751;
  resize: vertical;
}
/* Rótulo do textarea nasce no topo — não há espaço vertical para flutuar. */
.ckFieldArea .ckLabel {
  top: 9px;
  transform: none;
  font-size: 10px;
  letter-spacing: .02em;
  color: #98A2A9;
  right: 12px;
  line-height: 130%;
}
.ckFieldArea textarea:placeholder-shown + .ckLabel { color: #8A949B; font-size: 11px; }

.ckSubmit { margin-top: 22px; }

/* --------------------------------------------------------------------------
   Ajustes do drawer
   O cabeçalho do modal original abria espaço para uma imagem de produto que
   esta oferta não tem, então o respiro inferior encolhe.
   -------------------------------------------------------------------------- */

/* No mobile o botão de fechar fica ancorado ao topo da própria folha,
   não acima dela — fora da tela em telas curtas. */
@media (max-width: 768px) {
  .elModalClose .closeLPModal {
    top: calc(8vh + 12px);
    right: 14px;
    bottom: auto;
  }
}

/* --------------------------------------------------------------------------
   Pilha da oferta
   A referência digita os pontinhos à mão para alinhar os preços. Aqui eles são
   desenhados em CSS: alinham de verdade e não quebram quando o texto muda.
   -------------------------------------------------------------------------- */
.tnm-stack .elParagraph { line-height: 170%; }

.tnm-stack-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  width: 100%;
}
.tnm-stack-l { flex: 0 1 auto; }
.tnm-stack-dots {
  flex: 1 1 auto;
  min-width: 24px;
  align-self: baseline;
  height: 1em;
  border-bottom: 2px dotted rgba(48, 48, 48, .38);
  transform: translateY(-.28em);
}
.tnm-stack-v {
  flex: 0 0 auto;
  font-weight: 700;
  color: #960A0E;
  white-space: nowrap;
}

/* Slots de imagem provisórios: marca discreta para não confundir com arte final. */
.tnm-slot { position: relative; }
.tnm-slot::after {
  content: "PLACEHOLDER";
  position: absolute;
  top: 8px; left: 8px;
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(150, 10, 14, .88);
  color: #fff;
  font: 700 10px/1 "Inter", sans-serif;
  letter-spacing: .12em;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   SVGs animados
   Três, e só três. Cada um existe para tornar visível uma ideia que o texto
   já defende — não para decorar.
   -------------------------------------------------------------------------- */
.tnm-fig { margin: 6px auto 0; max-width: 100%; }
.tnm-fig svg { width: 100%; height: auto; display: block; }
.tnm-fig figcaption {
  margin-top: 10px;
  text-align: center;
  font: 400 13px/150% "Inter", sans-serif;
  color: rgba(48, 48, 48, .74);
}

/* Só anima quando entra na tela — animação fora de vista é trabalho jogado fora. */
.tnm-fig [data-draw] {
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
}
.tnm-fig.is-live [data-draw] {
  animation: tnmDraw 1.5s cubic-bezier(.4,0,.2,1) forwards;
  animation-delay: var(--delay, 0s);
}
@keyframes tnmDraw { to { stroke-dashoffset: 0; } }

.tnm-fig [data-fade] { opacity: 0; }
.tnm-fig.is-live [data-fade] {
  animation: tnmFade .6s ease forwards;
  animation-delay: var(--delay, 0s);
}
@keyframes tnmFade { to { opacity: 1; } }

.tnm-fig [data-dim] { opacity: 1; }
.tnm-fig.is-live [data-dim] {
  animation: tnmDim 1s ease forwards;
  animation-delay: var(--delay, 1.6s);
}
@keyframes tnmDim { to { opacity: .34; } }

.tnm-fig [data-pulse] { transform-origin: center; }
.tnm-fig.is-live [data-pulse] { animation: tnmPulse 2.4s ease-in-out infinite; animation-delay: var(--delay, 1.8s); }
@keyframes tnmPulse { 0%,100% { r: 6; opacity: 1; } 50% { r: 9; opacity: .55; } }

/* Sem movimento: tudo já nasce no estado final. */
@media (prefers-reduced-motion: reduce) {
  .tnm-fig [data-draw] { stroke-dashoffset: 0; }
  .tnm-fig [data-fade] { opacity: 1; }
  .tnm-fig [data-dim]  { opacity: .34; }
  .tnm-fig [data-pulse]{ animation: none; }
}

@media (max-width: 770px) {
  .tnm-stack-row { flex-wrap: wrap; }
  .tnm-stack-dots { display: none; }
  .tnm-fig figcaption { font-size: 12px; }
}

/* --------------------------------------------------------------------------
   Blocos numerados do value stack
   Mesma anatomia dos "FREE GIFT #N" da referência.
   -------------------------------------------------------------------------- */
.id-6Z-6LZBxO-412 .elParagraph {
  text-align: center;
  font-weight: 700;
  color: #960A0E;
}
.tnm-bloco-side .col-inner { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.tnm-bloco-side .elImage { width: 100%; }
@media (max-width: 770px) {
  .tnm-bloco-side .col-inner { display: block; }
}