/* =============================================================
   Dra. Gabriela Gaia — páginas internas
   Reaproveita os tokens e os componentes de styles.css.
   Só entra aqui o que a home não usa.
   ============================================================= */

/* ---------------------------------------------------------------
   1. Hero das páginas internas
   --------------------------------------------------------------- */
.page-hero {
  position: relative;
  padding-block: clamp(128px, 13vw, 190px) clamp(48px, 6vw, 80px);
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky-mist) 0%, var(--paper) 100%);
}
.page-hero--tight { padding-bottom: clamp(24px, 3vw, 40px); }

.page-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3xl);
  max-width: 60ch;
}

.page-hero__title {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: var(--display-weight);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}
.page-hero__title em {
  font-style: normal;
  font-weight: var(--display-emph-weight);
  color: var(--indigo);
}

.page-hero__lead {
  font-size: var(--t-lead);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  max-width: 56ch;
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-lg);
}

/* Uma andorinha, discreta, no canto do hero interno */
.page-hero__bird {
  position: absolute;
  z-index: 1;
  right: clamp(-30px, 2vw, 40px);
  top: 46%;
  width: clamp(110px, 15vw, 190px);
  opacity: 0.9;
  rotate: -6deg;
  pointer-events: none;
}

.page-hero__media {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: clamp(40px, 5vw, 64px) auto 0;
  padding-inline: var(--gutter);
}
.page-hero__media img {
  width: 100%;
  height: clamp(240px, 34vw, 460px);
  object-fit: cover;
  border-radius: var(--r-card);
  box-shadow: var(--inset-hairline);
}

/* ---------------------------------------------------------------
   2. Longform (história, filosofia)
   --------------------------------------------------------------- */
.prose {
  max-width: 62ch;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3xl);
}
.prose p {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}
.prose p strong { color: var(--fg); font-weight: 500; }

/* Sobe a especificidade acima de `.prose p` — senão herda o corpo. */
.prose p.prose__lead {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  color: var(--fg);
}

/* ---------------------------------------------------------------
   3. Cartões de formação / princípios
   --------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--sp-3xl);
  margin-top: clamp(40px, 5vw, 64px);
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
  padding: clamp(24px, 3vw, 32px);
  background: var(--white);
  border-radius: var(--r-card);
  box-shadow: var(--inset-hairline);
}
.card__title {
  font-family: var(--font-display);
  font-size: var(--t-h5);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--indigo);
}
.card__text {
  font-size: var(--t-sm);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
}

/* Números reais do registro, em destaque */
.card--stat .stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--indigo);
}
.card--stat .stat__label {
  display: block;
  margin-top: var(--sp-sm);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Quando o bloco escuro traz um argumento único, e não uma grade */
.notfor--single { grid-template-columns: 1fr; }

/* Telefones de emergência dentro do bloco escuro */
.notfor a {
  color: var(--emph-on-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------
   4. Serviços — blocos longos
   --------------------------------------------------------------- */
.svc {
  display: grid;
  grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  padding-block: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--border);
  align-items: start;
}
.svc__title {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--indigo);
  position: sticky;
  top: 108px;
}
/* Abertura da área — a frase que a home usava na grade de pílulas */
.svc__lead {
  font-family: var(--font-display);
  font-size: var(--t-h5);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  color: var(--fg);
  max-width: 52ch;
  margin-bottom: var(--sp-3xl);
}
.svc__text {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  max-width: 60ch;
}
.svc__cta { margin-top: var(--sp-3xl); }

/* ---------------------------------------------------------------
   5. Contato
   --------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3xl);
}

.contact-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xl);
  padding: clamp(24px, 3vw, 36px);
  background: var(--white);
  border-radius: var(--r-card);
  box-shadow: var(--inset-hairline);
}
.contact-card__title {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}
.contact-card__media {
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--paper-warm);
}
.contact-card__media img { width: 100%; height: 100%; object-fit: cover; }

.contact-card p,
.contact-card li {
  font-size: var(--t-sm);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
}
.contact-card address {
  font-style: normal;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg);
}
.contact-card ul { display: flex; flex-direction: column; gap: var(--sp-sm); }
.contact-card__list li { padding-left: var(--sp-xl); position: relative; }
.contact-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sky);
}

.channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-xl);
  margin-top: clamp(32px, 4vw, 48px);
}
.channel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  padding: var(--sp-3xl);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: var(--inset-hairline);
  transition: background-color var(--dur-fast) var(--ease-snap);
}
a.channel:hover { background: var(--sky-mist); }
.channel__label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.channel__value {
  font-size: var(--t-lead);
  font-weight: 500;
  color: var(--indigo);
}

/* Passos numerados do agendamento */
.howto {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3xl);
  counter-reset: howto;
}
.howto__item {
  counter-increment: howto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
  padding-top: var(--sp-3xl);
  border-top: 2px solid var(--indigo);
}
.howto__item::before {
  content: counter(howto, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-caps);
  color: var(--indigo);
}
.howto__item p {
  font-size: var(--t-sm);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
}

/* ---------------------------------------------------------------
   6. FAQ — página dedicada
   --------------------------------------------------------------- */
.faq-group { margin-top: clamp(40px, 5vw, 64px); }
.faq-group__title {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--indigo);
  margin-bottom: var(--sp-xl);
}
.faq__list--wide { max-width: 920px; }

/* ---------------------------------------------------------------
   7. Documentos legais
   --------------------------------------------------------------- */
.legal {
  max-width: 68ch;
  font-size: var(--t-sm);
  line-height: 1.7;
  color: var(--fg-muted);
}
.legal h2 {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg);
  margin: clamp(32px, 4vw, 48px) 0 var(--sp-xl);
}
.legal h3 {
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--fg);
  margin: var(--sp-3xl) 0 var(--sp-md);
}
.legal p + p,
.legal ul + p { margin-top: var(--sp-xl); }
.legal ul { margin-top: var(--sp-xl); display: flex; flex-direction: column; gap: var(--sp-sm); }
.legal li { margin-left: var(--sp-3xl); list-style: disc; }
.legal a { color: var(--indigo); text-decoration: underline; text-underline-offset: 3px; }
.legal strong { color: var(--fg); font-weight: 600; }

/* ---------------------------------------------------------------
   8. Responsivo
   --------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .svc { grid-template-columns: 1fr; }
  .svc__title { position: static; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 699.98px) {
  .howto { grid-template-columns: 1fr; }
  .page-hero__bird { display: none; }
  .page-hero__media img { height: 220px; }
}