/* ============================================================
   parainvestidores.com — componentes das páginas internas.
   Complementa site.css. Carregar sempre DEPOIS de site.css.

   Mesmas regras do sistema: Saira Condensed 700 caixa-alta no display,
   Inter 300 no corpo, raio 0 (pílula só no CTA do WhatsApp), duplo canvas
   preto/bone alternando, nenhuma cor decorativa.

   Espelho no Claude Design: ui_kits/_shared/kit.css (a sincronizar).
   ============================================================ */

/* Só para leitor de tela — usado em cabeçalho de tabela sem rótulo visível. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- ESTRUTURA DE SEÇÃO ---------- */
.section { padding: 96px 40px; }
.section__inner { max-width: 1440px; margin: 0 auto; }
.section--bone { background: var(--canvas-bone); color: var(--ink-on-light); }
.section--bone p { color: var(--body-light); }
.section--bone .eyebrow, .section--bone .caption { color: var(--muted-light); }
.section--tight { padding: 64px 40px; }

.section__head { max-width: 1440px; margin: 0 auto 56px; }
.section__head h2 { font-size: clamp(34px, 4.4vw, 60px); margin-top: 14px; }
.section__head p { font-size: 17px; line-height: 1.6; color: var(--body-dark); max-width: 620px; margin-top: 24px; }
.section--bone .section__head p { color: var(--body-light); }

.section__head--split {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 48px;
}
.section__head--split p { margin-top: 0; max-width: 440px; flex-shrink: 0; }

/* ---------- BREADCRUMB ---------- */
.breadcrumb {
  max-width: 1440px; margin: 0 auto;
  padding: 24px 40px 0;
  font-family: var(--font-body); font-weight: 400;
  text-transform: uppercase; letter-spacing: 2px; font-size: 11px;
  color: var(--muted-dark);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.breadcrumb a { color: var(--muted-dark); border-bottom: 1px solid transparent; }
.breadcrumb a:hover { color: var(--ink-on-dark); border-bottom-color: currentColor; }
.breadcrumb span[aria-current] { color: var(--body-dark); }

/* ---------- CABEÇALHO DE PÁGINA INTERNA ---------- */
.page-head { padding: 40px 40px 88px; }
.page-head__inner { max-width: 1440px; margin: 0 auto; }
.page-head h1 {
  font-size: clamp(44px, 6.4vw, 88px);
  line-height: 0.94; letter-spacing: -1px;
  margin: 26px 0 0; max-width: 15ch;
}
.page-head__lead {
  font-size: 19px; font-weight: 300; line-height: 1.55;
  color: var(--body-dark); max-width: 620px; margin-top: 32px;
}
.page-head__actions { display: flex; gap: 16px; align-items: center; margin-top: 40px; flex-wrap: wrap; }

/* Chamada que puxa o leitor para a primeira seção, no lugar do parágrafo longo
   que a abertura tinha antes. Sem cor decorativa: o destaque vem do tipo
   condensado em caixa alta e do fio embaixo, como o resto do site. */
.page-head__ancora {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 34px; padding-bottom: 10px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(18px, 2vw, 26px);
  text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--ink-on-dark);
  border-bottom: 2px solid var(--ink-on-dark);
}
.page-head__ancora svg {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: square; stroke-linejoin: miter;
  animation: ancora-desce 2.4s ease-in-out infinite;
}
.page-head__ancora:hover { color: var(--body-dark); border-bottom-color: var(--body-dark); }
@keyframes ancora-desce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}
/* Respeita quem desligou animação no sistema. */
@media (prefers-reduced-motion: reduce) {
  .page-head__ancora svg { animation: none; }
}

/* Variante com retrato à direita */
.page-head--photo .page-head__inner {
  display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 72px; align-items: center;
}
.page-head__photo {
  aspect-ratio: 4/5;
  background-size: cover; background-position: center top;
  /* Colorida por pedido do João: o retrato é o rosto do negócio e some em P&B. */
  filter: contrast(1.04) saturate(1.02);
}

/* ---------- FAIXA DE NÚMEROS ---------- */
/* Mesmo desenho de .invest__grid, reutilizável em qualquer página. */
.numbers {
  max-width: 1440px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr);
  gap: 1px; background: var(--hairline-dark);
}
.section--bone .numbers { background: var(--hairline-light); }
.numbers__cell { background: var(--canvas); padding: 40px 28px; }
.section--bone .numbers__cell { background: var(--canvas-bone); }
.numbers__v {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1; white-space: nowrap;
}
.numbers__v small { font-size: 0.4em; font-weight: 400; margin-left: 4px; color: var(--body-dark); }
.section--bone .numbers__v small { color: var(--body-light); }
.numbers__l {
  font-family: var(--font-display); font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px;
  font-size: 11px; color: var(--muted-dark); margin-top: 18px;
}
.section--bone .numbers__l { color: var(--muted-light); }
.numbers__d { font-size: 13px; font-weight: 300; color: var(--body-dark); margin-top: 14px; line-height: 1.5; }
.section--bone .numbers__d { color: var(--body-light); }

/* ---------- SELETOR DE OBJETIVO (home) ---------- */
.goal { padding: 0 40px; margin-top: -1px; background: var(--canvas-bone); }
.goal__inner {
  max-width: 1440px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--hairline-light);
  border-top: 1px solid var(--hairline-light);
  border-bottom: 1px solid var(--hairline-light);
}
.goal__opt {
  background: var(--canvas-bone); color: var(--ink-on-light);
  padding: 44px 36px;
  display: flex; flex-direction: column; gap: 14px;
  transition: background var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out);
}
.goal__opt:hover, .goal__opt:focus-visible { background: var(--canvas); color: var(--ink-on-dark); }
.goal__opt .eyebrow { color: var(--muted-light); }
.goal__opt:hover .eyebrow { color: var(--muted-dark); }
.goal__title {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; font-size: clamp(26px, 3vw, 40px); line-height: 1.02;
}
.goal__desc { font-size: 14px; line-height: 1.55; color: var(--body-light); max-width: 46ch; }
.goal__opt:hover .goal__desc { color: var(--body-dark); }
.goal__go {
  font-family: var(--font-display); font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px; font-size: 12px;
  margin-top: 6px;
}

/* ---------- COMPARADOR ---------- */
.compare { max-width: 1100px; margin: 0 auto; }
.compare__table { width: 100%; border-collapse: collapse; text-align: left; }
.compare__table th, .compare__table td {
  padding: 20px 20px; border-bottom: 1px solid var(--hairline-dark);
  vertical-align: top; font-size: 15px; font-weight: 300;
}
.section--bone .compare__table th, .section--bone .compare__table td { border-color: var(--hairline-light); }
.compare__table thead th { border-bottom-width: 1px; padding-bottom: 16px; }
.compare__attr {
  font-family: var(--font-display); font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px;
  font-size: 11px; color: var(--muted-dark);
  width: 24%; white-space: nowrap;
}
.section--bone .compare__attr { color: var(--muted-light); }
.compare__proj {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.05;
}
.compare__proj small {
  display: block; margin-top: 8px;
  font-family: var(--font-body); font-weight: 300;
  text-transform: none; letter-spacing: 0;
  font-size: 13px; color: var(--muted-dark);
}
.section--bone .compare__proj small { color: var(--muted-light); }
.compare__foot { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 36px; }

/* ---------- TAGS DE NEGOCIAÇÃO ---------- */
.tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.tag {
  display: inline-flex; align-items: center;
  border: 1px solid var(--hairline-dark);
  padding: 5px 10px;
  font-family: var(--font-display); font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.2px;
  font-size: 11px; line-height: 1; color: var(--body-dark);
  white-space: nowrap;
}
.section--bone .tag, .on-bone .tag { border-color: var(--hairline-light); color: var(--body-light); }

/* ---------- MÉTODO EM PASSOS ---------- */
.steps {
  max-width: 1440px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--hairline-dark);
}
.section--bone .steps { background: var(--hairline-light); }
.step { background: var(--canvas); padding: 40px 28px 44px; }
.section--bone .step { background: var(--canvas-bone); }
.step__n {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: 1.5px;
  color: var(--muted-dark); display: block;
}
.section--bone .step__n { color: var(--muted-light); }
.step h3 {
  font-size: clamp(20px, 2vw, 26px); line-height: 1.1;
  margin: 20px 0 16px;
}
.step p { font-size: 14px; line-height: 1.6; color: var(--body-dark); }
.section--bone .step p { color: var(--body-light); }

/* ---------- LISTA DE CRITÉRIOS (o que reprovo / o que entra) ---------- */
.criteria {
  max-width: 1440px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: 1px; background: var(--hairline-dark);
}
.section--bone .criteria { background: var(--hairline-light); }
.criteria__item { background: var(--canvas); padding: 36px 28px; }
.section--bone .criteria__item { background: var(--canvas-bone); }
.criteria__item h3 {
  font-size: 20px; line-height: 1.15; margin-bottom: 14px;
  display: flex; align-items: baseline; gap: 12px;
}
.criteria__mark {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; color: var(--muted-dark); flex-shrink: 0;
}
.section--bone .criteria__mark { color: var(--muted-light); }
.criteria__item p { font-size: 14px; line-height: 1.6; color: var(--body-dark); }
.section--bone .criteria__item p { color: var(--body-light); }

/* ---------- FAQ (details/summary, sem JS) ---------- */
.faq { max-width: 900px; margin: 0 auto; border-top: 1px solid var(--hairline-dark); }
.section--bone .faq { border-color: var(--hairline-light); }
.faq__item { border-bottom: 1px solid var(--hairline-dark); }
.section--bone .faq__item { border-color: var(--hairline-light); }
.faq__item > summary {
  list-style: none; cursor: pointer;
  padding: 26px 44px 26px 0; position: relative;
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; font-size: clamp(17px, 1.9vw, 22px); line-height: 1.2;
  transition: color var(--t-fast) var(--ease-out);
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); font-weight: 300; font-size: 26px; line-height: 1;
  color: var(--muted-dark);
  transition: transform var(--t-med) var(--ease-out);
}
.faq__item[open] > summary::after { content: "–"; }
.faq__item > summary:hover { color: var(--muted-dark); }
.section--bone .faq__item > summary:hover { color: var(--muted-light); }
.faq__a {
  padding: 0 44px 30px 0;
  font-size: 16px; line-height: 1.65; color: var(--body-dark);
}
.section--bone .faq__a { color: var(--body-light); }
.faq__a p + p { margin-top: 14px; }

/* ---------- CARDS DE CHAMADA (3 caminhos) ---------- */
.paths {
  max-width: 1440px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--hairline-dark);
}
.section--bone .paths { background: var(--hairline-light); }
.path {
  background: var(--canvas); color: var(--ink-on-dark);
  padding: 44px 32px 40px;
  display: flex; flex-direction: column; gap: 12px;
  transition: background var(--t-med) var(--ease-out);
}
.section--bone .path { background: var(--canvas-bone); color: var(--ink-on-light); }
.path:hover { background: var(--surface-soft); }
.section--bone .path:hover { background: var(--surface-sand); }
.path h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.08; }
.path p { font-size: 14px; line-height: 1.55; color: var(--body-dark); }
.section--bone .path p { color: var(--body-light); }
.path__go {
  margin-top: auto; padding-top: 20px;
  font-family: var(--font-display); font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px; font-size: 12px;
}

/* ---------- FAIXA DE INDICADORES ---------- */
.indicadores {
  border-top: 1px solid var(--hairline-dark);
  border-bottom: 1px solid var(--hairline-dark);
  padding: 0 40px;
}
.indicadores__inner {
  max-width: 1440px; margin: 0 auto;
  display: grid; grid-template-columns: auto repeat(4, 1fr); gap: 32px;
  align-items: center; padding: 22px 0;
}
.indicadores__ttl {
  font-family: var(--font-display); font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px;
  font-size: 11px; color: var(--muted-dark); max-width: 90px; line-height: 1.4;
}
.indicador { display: flex; flex-direction: column; gap: 4px; }
.indicador__l {
  font-family: var(--font-body); font-weight: 400;
  text-transform: uppercase; letter-spacing: 2px; font-size: 10px;
  color: var(--muted-dark);
}
.indicador__v {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; font-size: 20px; line-height: 1;
}
.indicador__v small { font-size: 0.55em; font-weight: 400; color: var(--body-dark); margin-left: 3px; }

/* ---------- LINKS INTERNOS (SEO) ---------- */
.links-internos {
  max-width: 1440px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px;
}
.links-internos a {
  display: block; padding: 12px 0;
  border-bottom: 1px solid var(--hairline-dark);
  font-size: 14px; font-weight: 300; color: var(--body-dark);
  transition: color var(--t-fast) var(--ease-out), padding-left var(--t-fast) var(--ease-out);
}
.section--bone .links-internos a { border-color: var(--hairline-light); color: var(--body-light); }
.links-internos a:hover { color: var(--ink-on-dark); padding-left: 6px; }
.section--bone .links-internos a:hover { color: var(--ink-on-light); }

/* ---------- FORMULÁRIO ---------- */
.form-block {
  max-width: 1440px; margin: 0 auto;
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 80px; align-items: start;
}
.form-block__aside h2 { font-size: clamp(32px, 4vw, 52px); margin-top: 14px; }
.form-block__aside p { font-size: 16px; line-height: 1.6; color: var(--body-dark); margin-top: 24px; }
.section--bone .form-block__aside p { color: var(--body-light); }
.form-block__direct { margin-top: 36px; display: flex; flex-direction: column; gap: 14px; }
.form-block__direct a { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 300; }
.form-block__direct a:hover { color: var(--ink-on-dark); }
.form-block__direct img { width: 16px; height: 16px; object-fit: contain; border-radius: 3px; }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field > label {
  font-family: var(--font-display); font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px;
  font-size: 11px; color: var(--muted-dark);
}
.section--bone .field > label { color: var(--muted-light); }
.field input, .field select, .field textarea {
  background: transparent; color: inherit;
  border: 0; border-bottom: 1px solid var(--hairline-dark);
  border-radius: var(--r-none);
  padding: 10px 0; font-family: var(--font-body); font-weight: 300; font-size: 16px;
  transition: border-color var(--t-fast) var(--ease-out);
  width: 100%;
}
.section--bone .field input, .section--bone .field select, .section--bone .field textarea {
  border-bottom-color: var(--hairline-light);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-bottom-color: currentColor;
}
.field textarea { resize: vertical; min-height: 96px; }
.field select { appearance: none; cursor: pointer; }
.section--bone .field select option { background: var(--canvas-bone); color: var(--ink-on-light); }
.field select option { background: var(--canvas); color: var(--ink-on-dark); }

.form__submit { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 4px; }
.form__note { font-size: 12px; line-height: 1.5; color: var(--muted-dark); max-width: 44ch; }
.section--bone .form__note { color: var(--muted-light); }
.form__note a { border-bottom: 1px solid currentColor; }
.btn-send {
  height: 56px; padding: 0 34px;
  background: var(--ink-on-dark); color: var(--ink-on-light);
  border: 0; border-radius: var(--r-none);
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px; font-size: 14px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out);
}
.section--bone .btn-send { background: var(--canvas); color: var(--ink-on-dark); }
.btn-send:hover { background: #ebebeb; }
.section--bone .btn-send:hover { background: #1f1f1f; }
.btn-send[disabled] { opacity: 0.5; cursor: default; }

.form__status {
  grid-column: 1 / -1;
  border: 1px solid var(--hairline-dark);
  padding: 16px 18px; font-size: 14px; line-height: 1.55;
}
.section--bone .form__status { border-color: var(--hairline-light); }
.form__status[hidden] { display: none; }
.form__status--ok { border-color: var(--success); }
.form__status--erro { border-color: var(--danger); }

/* Honeypot anti-spam — invisível para gente, visível para robô */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- DEPOIMENTOS ---------- */
.depoimentos {
  max-width: 1440px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--hairline-dark);
}
.section--bone .depoimentos { background: var(--hairline-light); }
.depoimento { background: var(--canvas); padding: 40px 32px; display: flex; flex-direction: column; }
.section--bone .depoimento { background: var(--canvas-bone); }
.depoimento__quote {
  font-size: 17px; line-height: 1.6; font-weight: 300; color: var(--body-dark); flex: 1;
}
.section--bone .depoimento__quote { color: var(--body-light); }
.depoimento__who {
  font-family: var(--font-display); font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px;
  font-size: 11px; color: var(--muted-dark); margin-top: 28px;
}
.section--bone .depoimento__who { color: var(--muted-light); }

/* ---------- MARCAS / PARCEIROS ---------- */
.brands {
  max-width: 1440px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 12px;
}
.brands span {
  border: 1px solid var(--hairline-dark);
  padding: 12px 20px;
  font-family: var(--font-display); font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px; font-size: 12px;
  color: var(--body-dark);
}
.section--bone .brands span { border-color: var(--hairline-light); color: var(--body-light); }

/* ---------- PROSA LONGA ---------- */
.prose { max-width: 720px; margin: 0 auto; }
.prose p { font-size: 17px; line-height: 1.7; color: var(--body-dark); }
.section--bone .prose p { color: var(--body-light); }
.prose p + p { margin-top: 22px; }
.prose h3 { font-size: clamp(24px, 2.6vw, 32px); margin: 48px 0 18px; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 1100px) {
  .page-head--photo .page-head__inner { grid-template-columns: 1fr; gap: 44px; }
  .page-head__photo { aspect-ratio: 3/2; order: -1; }
  .numbers { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .criteria { grid-template-columns: repeat(2, 1fr); }
  .paths { grid-template-columns: 1fr; }
  .depoimentos { grid-template-columns: 1fr; }
  .form-block { grid-template-columns: 1fr; gap: 48px; }
  .links-internos { grid-template-columns: repeat(2, 1fr); }
  .indicadores__inner { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .indicadores__ttl { grid-column: 1 / -1; max-width: none; }
  .section__head--split { flex-direction: column; align-items: flex-start; gap: 24px; }
  .section__head--split p { max-width: 620px; }
}

@media (max-width: 760px) {
  .section { padding: 64px 22px; }
  .section--tight { padding: 48px 22px; }
  .section__head { margin-bottom: 36px; }
  .breadcrumb { padding: 18px 22px 0; }
  .page-head { padding: 28px 22px 56px; }
  .goal { padding: 0 22px; }
  .goal__inner { grid-template-columns: 1fr; }
  .goal__opt { padding: 32px 24px; }
  .numbers, .steps, .criteria { grid-template-columns: 1fr; }
  .numbers__cell, .step, .criteria__item { padding: 32px 24px; }
  .form { grid-template-columns: 1fr; gap: 24px; }
  .links-internos { grid-template-columns: 1fr; }
  .indicadores { padding: 0 22px; }
  .compare__table th, .compare__table td { padding: 16px 10px; font-size: 14px; }
  .compare__attr { width: 30%; white-space: normal; }
  .depoimento, .path { padding: 32px 24px; }
}