/* Pagina Politica de Garantia (/politica-de-garantia/).
   Vai em wp-content/themes/acr/assets/css/pages/politica-de-garantia.css

   Hero, faixas, rotulo, H2, lead, botoes, atalhos, numeros, tabela de dados
   e fechamento vem do acr-base.css. Aqui ficam as clausulas numeradas, a
   lista de exclusoes, a nota de rodape e o aviso. */

/* ---------- Clausulas ---------- */

.acr-clausulas {
  display: grid;
  gap: var(--acr-s2);
  margin-top: var(--acr-s4);
  max-width: 860px;
}
.acr-clausula {
  display: flex;
  align-items: flex-start;
  gap: var(--acr-s3);
  padding: var(--acr-s3);
  border: 1px solid var(--acr-filete-claro);
  border-radius: var(--acr-radius-sm);
  background: var(--acr-card-claro);
}
.acr-clausula__n {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(120, 155, 255, 0.14);
  color: var(--acr-acento);
  font-size: 0.75rem;
  font-weight: 800;
}
.acr-clausula p {
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--acr-corpo-claro);
}

/* ---------- Exclusoes ----------
   O X marca o que fica de fora. Nao e o mesmo componente da lista de
   marcadores, que indica o que esta incluido. */

.acr-exclusoes {
  display: grid;
  gap: 12px;
  margin-top: var(--acr-s3);
}
.acr-exclusoes li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--acr-t-sm);
  line-height: 1.6;
  color: var(--acr-corpo-claro);
}
.acr-exclusoes svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--acr-erro);
}

/* ---------- Nota ---------- */

.acr-nota {
  margin-top: var(--acr-s3);
  padding-top: var(--acr-s3);
  border-top: 1px solid var(--acr-filete-claro);
  font-size: var(--acr-t-xs);
  line-height: 1.7;
  color: var(--acr-secundario-claro);
}

/* ---------- Aviso ---------- */

.acr-aviso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 860px;
  margin-top: var(--acr-s3);
  padding: 14px 18px;
  border: 1px solid rgba(196, 52, 42, 0.28);
  border-radius: 10px;
  background: rgba(196, 52, 42, 0.07);
  font-size: var(--acr-t-sm);
  line-height: 1.6;
  color: var(--acr-corpo-claro);
}
.acr-aviso svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--acr-erro);
}
.acr-aviso strong { color: var(--acr-titulo-claro); }

/* ---------- Responsivo ---------- */

@media (max-width: 640px) {
  .acr-clausula { flex-direction: column; gap: var(--acr-s2); }
}