/* Pet América — estética e banho (mundo loja, acento vermelho). Só lê tokens.css:
   nenhum literal de cor, raio, tamanho de fonte ou duração.
   Dial: variância 5 (assimetria de peso, listas com fio), motion 2, densidade 3 (arejado).
   Reusa de components.css: .editorial .figure .index-list .link-arrow .btn .status .rule.
   O corpo da página é editorial: fio de 1px separa, não caixa; serviço em linha, não card. */

.confirmar { display: inline-block; padding: 0 var(--spacing-6); border-radius: var(--radius-control); background: var(--alerta); color: var(--n-900); font-size: var(--font-size-13); font-weight: var(--weight-announce); line-height: 1.5; }

/* telefone ao lado do CTA: texto, não segundo botão */
.callto { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-8); min-height: var(--control-height); color: var(--text-strong); font-weight: var(--weight-announce); text-decoration: none; }
.callto .mono { color: var(--acento); }
.callto:hover { color: var(--text-strong); }
.callto:hover .mono { text-decoration: underline; text-underline-offset: 0.2em; }

/* ── Diferenciais: linhas com fio, título à esquerda, explicação à direita ── */
.marks { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border-strong); }
.marks li { display: grid; gap: var(--spacing-8) var(--spacing-48); padding-block: var(--spacing-24); border-bottom: 1px solid var(--border); }
.marks h3 { font-size: var(--text-h3); }
.marks p { max-width: 52ch; }
@media (min-width: 900px) { .marks li { grid-template-columns: 5fr 7fr; align-items: baseline; } }

/* ── Serviços: índice em linhas, nome + descrição, preço/prazo à direita em mono ── */
.svc { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border-strong); }
.svc li { display: grid; gap: var(--spacing-8) var(--spacing-32); padding-block: var(--spacing-24); border-bottom: 1px solid var(--border); }
.svc h3 { font-size: var(--text-h3); }
.svc p { color: var(--text); max-width: 54ch; }
.svc__sub { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--spacing-8) var(--spacing-16); color: var(--text-muted); font-size: var(--font-size-14); }
.svc__sub li { display: inline; padding: 0; border: 0; }
.svc__meta { color: var(--text-strong); font-size: var(--font-size-16); font-weight: var(--weight-emphasize); }
.svc__meta small { display: block; margin-top: var(--spacing-2); color: var(--text-muted); font-size: var(--font-size-13); font-weight: var(--weight-read); }
@media (min-width: 900px) {
  .svc li { grid-template-columns: 5fr 5fr auto; align-items: baseline; column-gap: var(--spacing-48); }
  .svc__meta { text-align: right; }
}

/* ── Como funciona: passos numerados em mono, degraus desiguais (não grade simétrica) ── */
.steps { display: grid; gap: var(--spacing-24); margin: 0; padding: 0; list-style: none; counter-reset: passo; }
.steps li { counter-increment: passo; display: flex; flex-direction: column; gap: var(--spacing-8); }
.steps li::before { content: counter(passo); font: var(--weight-display) var(--text-display)/1 var(--mono); color: var(--acento-marca); }
.steps h3 { font-size: var(--font-size-24); }
.steps p { max-width: 40ch; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--spacing-48); }
  .steps li:nth-child(2) { margin-top: var(--spacing-48); }
  .steps li:nth-child(3) { margin-top: var(--spacing-96); }
}

/* ── FAQ: <details> com fio; o marcador é o único elemento que gira ── */
.faq { display: grid; gap: 0; max-width: 46rem; }
.faq details { border-top: 1px solid var(--border-strong); }
.faq details:last-child { border-bottom: 1px solid var(--border-strong); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-16); min-height: var(--control-height); padding-block: var(--spacing-16); color: var(--text-strong); font-size: var(--font-size-18); font-weight: var(--weight-announce); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex: none; color: var(--acento); font-size: var(--font-size-24); transition: transform var(--dur-state) var(--ease-transform); }
.faq details[open] summary i { transform: rotate(45deg); }
.faq details p { padding-bottom: var(--spacing-20); max-width: 60ch; }

/* ── Fecho: título + CTA lado a lado ── */
.band { display: flex; flex-direction: column; gap: var(--spacing-16); align-items: flex-start; }
.band h2 { font-size: var(--text-h3); max-width: 24ch; }
@media (min-width: 720px) { .band { flex-direction: row; align-items: center; justify-content: space-between; } }