/* ============================================================
   /termo — Termo de Consentimento para Tratamento de Dados
   Página de texto corrido. Escala em rem do artboard de 1920px,
   como o resto do site (design.md, seção 1).
   ============================================================ */

.termo {
  position: relative;
  z-index: 2;
  background: var(--creme);
  border-radius: 0 0 1rem 1rem;
  padding: 0.9rem 0 1.4rem;
}

.termo .wrap {
  width: min(12.6rem, 100%);
  padding: 0 0.6rem;
  height: auto;
}

/* Kicker igual ao da seção de cadastro, com a régua que corre até a borda */
.termo-kicker {
  display: flex;
  align-items: center;
  gap: 0.22rem;
  font-family: 'Anybody', sans-serif;
  color: var(--preto);
  font-size: 0.31rem;
  font-weight: 900;
  font-stretch: 90%;
  letter-spacing: 0.16em;
}

.termo-kicker .seta {
  font-size: 0.26rem;
}

.termo-kicker::after {
  content: '';
  flex: 1;
  border-top: 0.018rem solid var(--preto);
  opacity: 0.55;
  margin-left: 0.2rem;
}

/* Título em duas linhas, verde sobre azul — mesmo padrão de .porque-title,
   em escala menor porque aqui o protagonista é o texto do termo */
.termo-titulo {
  font-family: 'Anybody', sans-serif;
  line-height: 1;
  margin-top: 0.4rem;
}

.termo-titulo .linha-verde {
  display: block;
  color: var(--verde);
  font-size: 0.6rem;
  font-weight: 900;
  font-stretch: 63.5%;
  line-height: 0.95;
}

.termo-titulo .linha-azul {
  display: block;
  color: var(--azul);
  font-size: 0.86rem;
  font-weight: 900;
  font-stretch: 64%;
  line-height: 0.95;
}

/* Documento em card branco, com a sombra dura amarela do sistema */
.termo-doc {
  background: #fff;
  border: 0.022rem solid var(--preto);
  border-radius: 0.3rem;
  box-shadow: 0.14rem 0.14rem 0 var(--amarelo);
  margin-top: 0.7rem;
  padding: 0.7rem 0.75rem;
  color: var(--preto);
  font-size: 0.26rem;
  font-weight: 500;
  line-height: 1.6;
}

.termo-doc h2 {
  font-family: 'Anybody', sans-serif;
  color: var(--azul);
  font-size: 0.34rem;
  font-weight: 900;
  font-stretch: 75%;
  line-height: 1.1;
  margin-top: 0.62rem;
}

.termo-doc p {
  margin-top: 0.24rem;
}

.termo-abertura {
  border-left: 0.05rem solid var(--verde);
  padding-left: 0.3rem;
}

.termo-doc ul {
  margin-top: 0.24rem;
  padding-left: 0.42rem;
  list-style: none;
}

.termo-doc li {
  position: relative;
  margin-top: 0.16rem;
}

/* marcador próprio: o travessão do documento original, em verde */
.termo-doc li::before {
  content: '—';
  position: absolute;
  left: -0.42rem;
  color: var(--verde);
  font-weight: 800;
}

/* Cláusula 6: é o texto que a pessoa efetivamente aceita no formulário */
.termo-aceite {
  background: var(--creme);
  border: 0.022rem solid var(--preto);
  border-radius: 0.2rem;
  margin-top: 0.3rem;
  padding: 0.4rem 0.45rem;
}

.termo-aceite p {
  margin-top: 0;
}

.termo-aceite-nota {
  margin-top: 0.22rem !important;
  font-size: 0.24rem;
  opacity: 0.75;
}

.btn-termo {
  width: fit-content;
  margin: 0.9rem auto 0;
}

/* ---------- Mobile ---------- */

@media (max-width: 720px) {
  .termo {
    border-radius: 0 0 0.45rem 0.45rem;
    padding: 0.7rem 0 1.1rem;
  }

  .termo .wrap {
    width: 100%;
    padding: 0 0.4rem;
  }

  .termo-kicker {
    font-size: 0.26rem;
    letter-spacing: 0.1em;
  }

  .termo-titulo .linha-verde { font-size: 0.5rem; }
  .termo-titulo .linha-azul  { font-size: 0.66rem; }

  .termo-doc {
    border-radius: 0.28rem;
    box-shadow: 0.1rem 0.1rem 0 var(--amarelo);
    padding: 0.55rem 0.5rem;
    font-size: 0.3rem;
  }

  .termo-doc h2 { font-size: 0.38rem; }

  .termo-aceite-nota { font-size: 0.27rem; }

  .btn-termo {
    font-size: 0.36rem;
    padding: 0.26rem 0.5rem;
  }
}