/* =========================================================
   Andrade Santos França · componentes das páginas internas
   Mesmas regras da home: preto, branco e um dourado; fios em vez
   de cartões; Bodoni só nos títulos grandes; canto único de 8px;
   colunas 1 : 1,618, tudo alinhado à esquerda e pelo topo.
   ========================================================= */

/* ---- Topo da página ---- */
.page-hero { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--header-h) + var(--s6)) 0 var(--s6); background: var(--ink); color: var(--on-dark); }
/* luz dourada no canto e monograma em fio: a mesma identidade do topo da home */
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(42% 80% at 84% 0%, rgba(212,168,83,.22), transparent 72%); }
.page-hero::after { content: ""; position: absolute; z-index: -1; right: max(var(--gutter), calc((100% - var(--max)) / 2)); top: calc(var(--header-h) + var(--s5)); width: clamp(240px, 30vw, 400px); aspect-ratio: 688 / 593; background: url("/assets/asf-icon.webp") center / contain no-repeat; opacity: .13; pointer-events: none; }
@media (max-width: 900px) { .page-hero::after { display: none; } }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0 0 var(--s5); padding: 0; list-style: none; color: var(--on-dark-2); font-size: 15px; }
.breadcrumb li { display: inline-flex; align-items: center; gap: var(--s2); }
.breadcrumb li + li::before { content: "/"; color: var(--gold); }
.breadcrumb a { color: var(--on-dark); background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--ease); }
.breadcrumb a:hover { background-size: 100% 1px; }
/* área: rótulo em caixa alta, sem pílula */
.area-chip { display: inline-flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4); color: var(--gold); font-size: var(--t-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.area-chip .icon { display: none; }
a.area-chip:hover { color: var(--on-dark); }
.page-hero h1 { max-width: none; font-size: clamp(var(--t-xl), 5.4vw, var(--t-4xl)); line-height: 1.02; letter-spacing: -.02em; }
.page-hero h1::after { content: ""; display: block; width: min(100%, 640px); height: 1px; margin-top: var(--s5); background: linear-gradient(90deg, var(--gold) 0, var(--gold) var(--s7), var(--line-dark) var(--s7)); transform-origin: left; animation: draw 1.4s var(--ease-io) .2s both; }
.page-hero .lead { max-width: 38em; margin-top: var(--s5); color: var(--on-dark-2); font-size: var(--t-base); line-height: 1.6; }
.page-hero .actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.page-hero .note { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s4); color: var(--on-dark-2); font-size: 15px; }
.page-hero .reviewed { margin-top: var(--s2); color: var(--on-dark-2); font-size: var(--t-xs); }
.page-hero .note .icon { width: 18px; height: 18px; color: var(--gold); }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---- Corpo com barra lateral ---- */
.page-body { padding: var(--s7) 0 var(--pad); }
.page-layout { display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); gap: var(--s7); align-items: start; }
.content > * + * { margin-top: var(--s7); }
.block h2 { margin-bottom: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--text); font-size: 44px; }
.block > p + p { margin-top: var(--s3); }
.block > p { color: var(--text-2); }
.block-lead { margin-bottom: var(--s4); color: var(--text-2); }

/* Em resumo: fio preto grosso + números grandes */
.summary { padding-top: var(--s4); border-top: 3px solid var(--text); }
.summary h2 { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4); font-family: var(--f-body); font-size: var(--t-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.summary h2 .icon { display: none; }
.summary ul { display: grid; margin: 0; padding: 0; list-style: none; }
.summary li { display: grid; grid-template-columns: var(--s6) 1fr; gap: var(--s3); align-items: baseline; padding: var(--s3) 0; border-bottom: 1px solid var(--line); font-size: var(--t-base); line-height: 1.5; }
.summary li span { color: var(--text); font-family: var(--f-head); font-size: 38px; font-weight: 500; line-height: 1; }

/* Lista de verificação */
.checklist { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.checklist li { display: grid; grid-template-columns: var(--s4) 1fr; gap: var(--s3); align-items: start; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.checklist .icon { width: var(--s4); height: var(--s4); margin-top: 3px; color: var(--text); }

/* Passos em ordem */
.steps-list { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: passo; }
.steps-list li { position: relative; display: grid; grid-template-columns: var(--s6) 1fr; gap: var(--s3); padding: var(--s4) 0; border-top: 1px solid var(--line); counter-increment: passo; }
.steps-list li::before { content: counter(passo); color: var(--text); font-family: var(--f-head); font-size: 46px; font-weight: 500; line-height: 1; }
.steps-list h3 { margin: 0 0 var(--s1); }
.steps-list p { color: var(--text-2); }

/* Documentos */
.docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s5); margin: 0; padding: 0; list-style: none; }
.docs li { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); line-height: 1.45; }
.docs .icon { width: var(--s4); height: var(--s4); margin-top: 2px; color: var(--text); }
.docs-note { margin-top: var(--s3); color: var(--text-2); font-size: var(--t-sm); }

/* Palavras explicadas */
.terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s5); margin: 0; }
.terms div { padding: var(--s4) 0; border-top: 1px solid var(--line); }
.terms dt { margin-bottom: var(--s1); font-weight: 600; }
.terms dd { margin: 0; color: var(--text-2); line-height: 1.55; }

/* Perguntas frequentes: acordeão com fios */
.faq { display: grid; border-top: 1px solid var(--text); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: var(--s7); padding: var(--s3) 0; cursor: pointer; list-style: none; font-weight: 600; font-size: var(--t-base); line-height: 1.4; transition: color .25s ease; }
.faq summary:hover { color: var(--text-2); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: 0 0 auto; width: var(--ic-s); height: var(--ic-s); border: 1px solid var(--text); border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128 56v144M56 128h144' stroke='%230b0b0c' stroke-width='16' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .45s var(--ease), background-color .3s ease; }
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--gold); border-color: var(--gold); }
.faq .answer { max-width: 40em; padding: 0 var(--s7) var(--s4) 0; color: var(--text-2); }

/* Para quem quer se aprofundar */
.deep { border: 1px solid var(--text); border-radius: var(--r-sm); }
.deep summary { display: flex; align-items: center; gap: var(--s3); padding: var(--s4); cursor: pointer; list-style: none; font-weight: 600; }
.deep summary::-webkit-details-marker { display: none; }
.deep summary .icon { width: 22px; height: 22px; color: var(--text); }
.deep summary small { display: block; color: var(--text-2); font-weight: 400; font-size: 15px; }
.deep summary .caret { margin-left: auto; transition: transform .4s var(--ease); }
.deep[open] summary .caret { transform: rotate(180deg); }
.deep ul { margin: 0; padding: 0 var(--s4) var(--s4) calc(var(--s4) + 22px + var(--s3)); color: var(--text-2); font-size: var(--t-sm); }
.deep li + li { margin-top: var(--s2); }

/* Relacionados e situações: linhas, não cartões */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s5); border-top: 1px solid var(--line); }
.card-link { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); height: 100%; padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.card-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .55s var(--ease-io); }
.card-link:hover::after { transform: scaleX(1); transform-origin: left; }
.card-link strong { display: block; font-size: var(--t-base); font-weight: 600; line-height: 1.35; }
.card-link small { display: block; margin-top: var(--s1); color: var(--text-2); font-size: 15px; line-height: 1.45; }
.card-link .icon { width: 20px; height: 20px; color: var(--text); transition: transform .45s var(--ease); }
.card-link:hover .icon { transform: translateX(var(--s1)); }
.more-topics ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s5); margin: 0 0 var(--s4); padding: 0; list-style: none; }
.more-topics li { border-bottom: 1px solid var(--line); }
.more-topics li a { display: flex; align-items: center; min-height: var(--s6); padding: var(--s2) 0; color: var(--text); font-size: var(--t-sm); line-height: 1.35; transition: color .2s ease; }
.more-topics li a:hover { color: var(--text-2); }
@media (max-width: 680px) { .more-topics ul { grid-template-columns: 1fr; } }
.also { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.also li { padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: var(--t-sm); }

/* ---- Barra lateral ---- */
.sidebar { position: sticky; top: calc(var(--header-h) + var(--s4)); display: grid; gap: var(--s5); }
.side-cta { padding: var(--s5); border-radius: var(--r-sm); background: var(--ink); color: var(--on-dark); }
.side-cta h2 { margin-bottom: var(--s2); font-size: 36px; }
.side-cta p { color: var(--on-dark-2); font-size: var(--t-sm); line-height: 1.55; }
.side-cta .btn { width: 100%; margin-top: var(--s4); }
.side-cta .btn + .btn { margin-top: var(--s2); }
.side-cta ul { display: grid; gap: var(--s2); margin: var(--s4) 0 0; padding: var(--s4) 0 0; border-top: 1px solid var(--line-dark); list-style: none; font-size: 15px; color: var(--on-dark-2); }
.side-cta li { display: flex; align-items: center; gap: var(--s2); }
.side-cta li .icon { width: 18px; height: 18px; color: var(--gold); }
.toc { padding-top: var(--s4); border-top: 1px solid var(--text); }
.toc h2 { margin-bottom: var(--s3); font-family: var(--f-body); font-size: var(--t-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.toc ol { display: grid; margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line); }
.toc a { position: relative; display: block; padding: var(--s2) var(--s4); color: var(--text-2); font-size: 15px; line-height: 1.35; transition: color .2s ease; }
.toc a::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--gold); transform: scaleY(0); transition: transform .4s var(--ease); }
.toc a:hover { color: var(--text); }
.toc a.is-active { color: var(--text); font-weight: 600; }
.toc a.is-active::before { transform: scaleY(1); }

/* ---- Chamada final ---- */
.cta-band { padding: 0 0 var(--pad); }
.cta-box { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); align-items: end; gap: var(--s6); padding: var(--s6); border-radius: var(--r-sm); background: var(--ink); color: var(--on-dark); isolation: isolate; }
.cta-box::before { content: ""; position: absolute; top: 0; left: var(--s6); right: var(--s6); height: 1px; background: linear-gradient(90deg, var(--gold) 0, var(--gold) var(--s7), var(--line-dark) var(--s7)); transform-origin: left; }
.js .cta-box.reveal::before { transform: scaleX(0); transition: transform 1.4s var(--ease-io) .3s; }
.js .cta-box.reveal.is-visible::before { transform: none; }
.cta-box h2 { font-size: clamp(var(--t-xl), 4vw, var(--t-3xl)); }
.cta-box p { max-width: 34em; margin-top: var(--s3); color: var(--on-dark-2); font-size: var(--t-base); }
.cta-box .actions { display: grid; gap: var(--s2); }
.cta-box .actions small { margin-top: var(--s1); color: var(--on-dark-2); font-size: var(--t-xs); text-align: center; }

/* ---- Hub de assuntos ---- */
.area-jump { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s6); }
.area-jump a { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--s6); padding: var(--s2) var(--s4); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text); font-size: var(--t-sm); font-weight: 600; transition: border-color .25s ease, background .25s ease; }
.area-jump a:hover { border-color: var(--text); }
.area-jump .icon { display: none; }
.area-jump small { color: var(--text-2); font-weight: 500; }
.area-block { padding: var(--s6) 0; scroll-margin-top: calc(var(--header-h) + var(--s4)); }
.area-jump + .area-block { padding-top: 0; }
.area-block-head { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; align-items: end; gap: var(--s4) var(--s5); margin-bottom: var(--s4); padding: var(--s4) 0; border-top: 3px solid var(--text); }
.area-block-head .icon-badge { display: none; }
.area-block-head h2 { font-size: 46px; line-height: 1.05; }
.area-block-head small { display: block; margin-top: var(--s1); color: var(--text-2); font-family: var(--f-body); font-size: var(--t-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.area-block-head p { max-width: 34em; color: var(--text-2); font-size: var(--t-sm); }
.area-block-head .text-link { white-space: nowrap; }
.topic-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s5); margin: 0; padding: 0; list-style: none; }
.topic-list li { border-bottom: 1px solid var(--line); }
.topic-list a { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); height: 100%; min-height: var(--s7); padding: var(--s3) 0; color: var(--text); }
.topic-list strong { display: block; font-size: var(--t-sm); font-weight: 600; line-height: 1.35; transition: color .2s ease; }
.topic-list small { display: block; margin-top: 2px; color: var(--text-2); font-size: 14px; line-height: 1.4; }
.topic-list .icon { flex: none; width: 18px; height: 18px; color: var(--text); transition: transform .45s var(--ease); }
.topic-list a:hover strong { color: var(--text-2); }
.topic-list a:hover .icon { transform: translateX(var(--s1)); }
@media (max-width: 1024px) {
  .area-block-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .topic-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .topic-list { grid-template-columns: 1fr; }
  .area-block-head h2 { font-size: var(--t-lg); }
}

/* ---- Glossário ---- */
.az { display: flex; flex-wrap: wrap; gap: var(--s1); margin-bottom: var(--s5); }
.az a { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 var(--s2); border: 1px solid var(--line); border-radius: var(--r-sm); font-weight: 600; transition: border-color .2s ease, background .2s ease, color .2s ease; }
.az a:hover { border-color: var(--ink); background: var(--ink); color: var(--on-dark); }
.gloss-letter { margin: var(--s6) 0 var(--s3); padding-top: var(--s3); border-top: 3px solid var(--text); font-size: 46px; }
.gloss { display: grid; margin: 0; }
.gloss div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.gloss dt { font-weight: 600; }
.gloss dd { margin: 0; color: var(--text-2); }
.gloss dd a { display: inline-block; margin-top: var(--s1); color: var(--text); font-size: 15px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }

/* ---- Contato ---- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: var(--s7); align-items: start; }
.contact-cards { display: grid; border-top: 1px solid var(--text); }
.contact-card { display: flex; align-items: center; gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--line); transition: color .2s ease; }
.contact-card .icon-badge { display: grid; place-items: center; flex: 0 0 auto; width: var(--ic-s); height: var(--ic-s); color: var(--text); }
.contact-card .icon-badge .icon { width: 22px; height: 22px; }
.contact-card strong { display: block; }
.contact-card span { color: var(--text-2); font-size: var(--t-sm); }
a.contact-card:hover strong, button.contact-card:hover strong { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.form-card { padding: var(--s5); border: 1px solid var(--text); border-radius: var(--r-sm); background: var(--white); }
.form-card h2 { font-size: 36px; }
.form-card > p { margin: var(--s2) 0 var(--s4); color: var(--text-2); }
.field { display: grid; gap: var(--s1); margin-bottom: var(--s4); }
.field label { font-weight: 600; font-size: var(--t-sm); }
.field input, .field select, .field textarea { width: 100%; min-height: var(--ic-m); padding: var(--s3) var(--s4); border: 1px solid #b9b9b6; border-radius: var(--r-sm); background: #fff; font-size: 17px; transition: border-color .2s ease, box-shadow .2s ease; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px rgba(194,154,75,.45); }
.field .hint { color: var(--text-2); font-size: 14px; }
.field .error { color: #b3261e; font-size: 14px; font-weight: 600; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.check { display: flex; align-items: flex-start; gap: var(--s2); margin: var(--s1) 0 var(--s4); color: var(--text-2); font-size: 15px; }
.check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--ink); }
.alert { margin-bottom: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r-sm); font-weight: 600; }
.alert-ok { background: var(--ink); color: var(--on-dark); }
.alert-err { background: #fdecea; color: #8a1c13; }
.hp-field { position: absolute; left: -9999px; }

/* ---- Textos longos (privacidade, termos, escritório) ---- */
.prose { max-width: 760px; }
.prose h2 { margin: var(--s6) 0 var(--s3); font-size: 38px; }
.prose h3 { margin: var(--s5) 0 var(--s2); }
.prose p, .prose li { color: var(--text-2); }
.prose p + p { margin-top: var(--s3); }
.prose ul { padding-left: var(--s4); }
/* Textos longos ficam justificados (com hifenização, para não abrir buracos entre as palavras).
   Só em telas largas: no celular a coluna é estreita e o texto fica alinhado à esquerda. */
@media (min-width: 681px) {
  .prose p, .prose li, .block > p { text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; hyphens: auto; }
}
.prose li + li { margin-top: var(--s1); }

/* ---- Valores (quem somos) ---- */
.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.value { position: relative; padding-top: var(--s4); border-top: 1px solid var(--line); }
.value::before { content: ""; position: absolute; top: -1px; left: 0; width: var(--s5); height: 2px; background: var(--gold); }
.value .icon-badge { display: none; }
.value h3 { margin-bottom: var(--s2); }
.value p { color: var(--text-2); }
.split { display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); gap: var(--s7); align-items: start; }
.photo { overflow: hidden; border-radius: var(--r-sm); }
.photo img { width: 100%; aspect-ratio: 1.618 / 1; object-fit: cover; }

@media (max-width: 1024px) {
  .page-layout { grid-template-columns: 1fr; gap: var(--s6); }
  .sidebar { position: static; }
  .toc { display: none; }
  .contact-grid, .split { grid-template-columns: 1fr; gap: var(--s6); }
  .values { grid-template-columns: 1fr; }
  .cta-box { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .page-body { padding-top: var(--s6); }
  .docs, .terms, .cards { grid-template-columns: 1fr; }
  .side-cta, .form-card { padding: var(--s4); }
  .cta-box { padding: var(--s5) var(--s4); gap: var(--s5); }
  .cta-box::before { left: var(--s4); right: var(--s4); }
  .gloss div { grid-template-columns: 1fr; gap: var(--s1); }
  .field-row { grid-template-columns: 1fr; }
  .page-hero .actions .btn { flex: 1 1 100%; }
  .block h2 { font-size: var(--t-lg); }
  .faq .answer { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .page-hero h1::after { animation: none; } }

/* Atalho para o chat na barra lateral e no contato */
.side-chat { display: flex; align-items: center; justify-content: center; gap: var(--s2); width: 100%; margin-top: var(--s3); padding: var(--s2); border: 0; background: none; color: var(--on-dark); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.side-chat .icon { width: 20px; height: 20px; color: var(--gold); }
button.contact-card { width: 100%; border-top: 0; border-left: 0; border-right: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: inherit; }

/* Fileiras de mesma altura */
.cards { grid-auto-rows: 1fr; }