/* ============================================================
   FLORA MARCHETTI — PÁGINAS INTERNAS
   Serviços e páginas institucionais. Reaproveita os tokens e os
   componentes da home; só acrescenta o que a página de leitura
   corrida precisa e o one-page não tinha.

   Estas páginas não carregam GSAP nem Lenis: não têm parallax,
   comparador nem galeria. São 133 KB de JS que não fariam nada
   além de atrasar a leitura.
   ============================================================ */

/* O header é fixo; sem esta folga o título nasce embaixo dele. */
.page { padding-top: calc(var(--header-h) + var(--s-6)); }

/* ---------- HEADER DAS INTERNAS ---------- */
/* A home esconde o CTA e o telefone do header abaixo de 1080px porque o
   hambúrguer assume o papel. As páginas internas não têm hambúrguer — sem
   a regra abaixo, o header fica só com a marca no celular e o visitante
   perde o caminho para o contato no topo da página. */
@media (max-width: 1080px) {
  .hdr.hdr--lite .btn--wa { display: inline-flex; }
}

/* Abaixo de 560px marca e botão disputam a mesma linha: a linha de apoio
   da marca sai para o botão caber inteiro, com rótulo e tudo. */
@media (max-width: 560px) {
  .hdr.hdr--lite .brand__sub { display: none; }
  .hdr.hdr--lite .btn--wa { padding-inline: var(--s-4); }
  .hdr.hdr--lite .hdr__inner { gap: var(--s-3); }
}

/* ---------- MIGALHAS ---------- */
/* Existiam só nos dados estruturados. Agora existem na tela também —
   é o que permite subir um nível sem usar o botão voltar. */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
  font-family: var(--font-data);
  font-size: var(--t-data);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.crumbs a { color: var(--fg-faint); text-decoration: underline; text-underline-offset: 3px; }
.crumbs a:hover { color: var(--accent); }
.crumbs span[aria-current] { color: var(--fg); }
.crumbs .crumbs__sep { color: var(--rule-strong); }

/* ---------- ABERTURA ---------- */
.pg-hero { padding-bottom: var(--section-y-tight); border-bottom: 1px solid var(--rule); }
.pg-hero__title {
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.015em;
}
.pg-hero__lede {
  max-width: var(--maxw-text);
  margin-top: var(--s-5);
  font-size: var(--t-deck);
  line-height: 1.5;
  color: var(--fg-muted);
}
.pg-hero__acoes { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-6); }

.pg-figura { margin-top: var(--s-7); }
.pg-figura img { width: 100%; height: auto; border-radius: var(--r-lg); }
.pg-figura figcaption {
  margin-top: var(--s-3);
  font-family: var(--font-data);
  font-size: var(--t-data);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* ---------- BLOCOS DE TEXTO ---------- */
.pg-sec { padding-block: var(--section-y-tight); border-bottom: 1px solid var(--rule); }
.pg-sec:last-of-type { border-bottom: 0; }
.pg-h2 {
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.pg-texto { max-width: var(--maxw-text); margin-top: var(--s-5); font-size: 1.0625rem; line-height: 1.65; color: var(--fg-muted); }
.pg-texto + .pg-texto { margin-top: var(--s-4); }

/* ---------- LISTA COM MARCA ---------- */
.checks { display: grid; gap: var(--s-4); margin-top: var(--s-6); max-width: var(--maxw-text); }
.checks li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--s-4);
  align-items: start;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--fg-muted);
}
.checks svg { width: 18px; height: 18px; margin-top: 4px; color: var(--c-olive); flex: none; }
.checks b { color: var(--fg); font-weight: 600; }

/* ---------- ETAPAS ---------- */
.etapas { display: grid; gap: var(--s-5); margin-top: var(--s-6); counter-reset: e; }
@media (min-width: 900px) { .etapas { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); } }
.etapa { padding-top: var(--s-4); border-top: 1px solid var(--rule); counter-increment: e; }
.etapa::before {
  content: counter(e, decimal-leading-zero);
  display: block;
  margin-bottom: var(--s-3);
  font-family: var(--font-data);
  font-size: var(--t-data);
  letter-spacing: 0.12em;
  color: var(--accent);
}
.etapa h3 { font-size: var(--t-h4); font-family: var(--font-display); font-weight: 600; }
.etapa p { margin-top: var(--s-2); font-size: var(--t-small); line-height: 1.55; color: var(--fg-muted); }

/* ---------- OBSERVAÇÃO TÉCNICA ---------- */
.pg-nota {
  max-width: var(--maxw-text);
  margin-top: var(--s-6);
  padding: var(--s-5);
  background: var(--c-bone);
  border-left: 2px solid var(--c-olive);
  border-radius: var(--r-sm);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fg-muted);
}

/* ---------- PERGUNTAS ---------- */
/* <details> nativo: abre sem JavaScript, é navegável por teclado e
   o leitor de tela já anuncia o estado. Não há motivo para recriar. */
.pg-faq { display: grid; gap: 0; margin-top: var(--s-6); max-width: var(--maxw-text); }
.pg-faq details { border-bottom: 1px solid var(--rule); }
.pg-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 60px;
  padding-block: var(--s-4);
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq summary::after {
  content: '+';
  flex: none;
  font-family: var(--font-data);
  font-size: 1.25rem;
  color: var(--accent);
  transition: transform var(--d-fast) var(--ease);
}
.pg-faq details[open] summary::after { content: '−'; }
.pg-faq p { padding-bottom: var(--s-5); font-size: 1rem; line-height: 1.65; color: var(--fg-muted); }

/* ---------- CHAMADA FINAL ---------- */
.pg-cta {
  margin-top: var(--section-y-tight);
  padding: var(--s-7) var(--s-6);
  background: var(--c-ink);
  color: var(--fg-on-deep);
  border-radius: var(--r-lg);
}
.pg-cta h2 { max-width: 22ch; font-family: var(--font-display); font-size: var(--t-h3); font-weight: 600; line-height: 1.12; }
.pg-cta p { max-width: 56ch; margin-top: var(--s-4); color: var(--fg-on-deep-muted); line-height: 1.6; }
.pg-cta__acoes { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-6); }

/* ---------- OUTROS SERVIÇOS ---------- */
/* Cada página aponta para as outras oito. É o que transforma nove
   páginas soltas numa seção que o Google percorre inteira. */
.outros { padding-block: var(--section-y-tight); }
.outros__lista { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
@media (min-width: 700px) { .outros__lista { grid-template-columns: repeat(2, 1fr); gap: var(--s-3) var(--s-6); } }
@media (min-width: 1100px) { .outros__lista { grid-template-columns: repeat(4, 1fr); } }
.outros__lista a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
  color: var(--fg-muted);
  transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.outros__lista a:hover { color: var(--accent); border-color: var(--c-olive); }

/* ---------- TEXTO LEGAL ---------- */
.legal { max-width: 72ch; padding-block: var(--section-y-tight); }
.legal h2 { margin-top: var(--s-7); font-family: var(--font-display); font-size: var(--t-h3); font-weight: 600; }
.legal h2:first-of-type { margin-top: var(--s-6); }
.legal h3 { margin-top: var(--s-5); font-size: 1.0625rem; font-weight: 600; }
.legal p, .legal li { margin-top: var(--s-4); font-size: 1rem; line-height: 1.7; color: var(--fg-muted); }
.legal ul { margin-top: var(--s-2); padding-left: var(--s-5); list-style: disc; }
.legal li { margin-top: var(--s-2); }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.legal__data {
  margin-top: var(--s-6);
  font-family: var(--font-data);
  font-size: var(--t-data);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* ---------- RODAPÉ CURTO DAS INTERNAS ---------- */
.ftr-lite {
  margin-top: var(--section-y-tight);
  padding-block: var(--s-6);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  font-family: var(--font-data);
  font-size: var(--t-data);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.ftr-lite a { color: var(--fg-faint); text-decoration: underline; text-underline-offset: 3px; }
.ftr-lite a:hover { color: var(--accent); }
.ftr-lite nav { display: flex; flex-wrap: wrap; gap: var(--s-4); }