/**
 * Longe de Casa Psi — Fase 3L.2
 * Componentes compartilhados das cinco páginas modernizadas:
 * logotipo oficial, fotografias circulares, aviso de crise e estados de interação.
 * Paleta oficial: roxo #2A187F · magenta #CC2F68 · rosa #D4145A · amarelo #FFBE49 · texto #404B56
 */
:root {
  --lc-indigo: #2A187F;
  --lc-indigo-dark: #1E1160;
  --lc-magenta: #CC2F68;
  --lc-magenta-dark: #A3194A;
  --lc-pink: #D4145A;
  --lc-yellow: #FFBE49;
  --lc-text: #404B56;
}

/* ---------- Logotipo oficial ---------- */
.brand-link, .prof-brand-link, .faq-brand-link, .agende-brand-link, .como-brand-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.lc-logo {
  display: block;
  height: 68px;
  width: auto;
  max-width: 100%;
}
@media (max-width: 640px) {
  .lc-logo { height: 54px; }
}

/* ---------- Botões principais: magenta com texto branco ---------- */
a.btn-magenta, a.como-btn-magenta { text-decoration: none; text-align: center; }
.btn-magenta, .como-btn-magenta,
.header-btn, .prof-header-btn, .faq-header-btn, .agende-header-btn, a.como-header-btn {
  background: var(--lc-magenta);
  color: #fff;
}
.btn-magenta:hover, .como-btn-magenta:hover,
.header-btn:hover, .prof-header-btn:hover, .faq-header-btn:hover, .agende-header-btn:hover, a.como-header-btn:hover {
  background: var(--lc-magenta-dark);
  color: #fff;
}
.btn-magenta:active, .como-btn-magenta:active,
.header-btn:active, .prof-header-btn:active, .faq-header-btn:active, .agende-header-btn:active, a.como-header-btn:active {
  background: #8A1440;
  color: #fff;
}
/* Sobre fundos escuros, o botão magenta ganha contorno branco para manter a separação visual */
.section-final-cta .btn-magenta, .como-cta .como-btn-magenta {
  border: 2px solid #fff;
}

/* ---------- Foco visível por teclado ---------- */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--lc-indigo);
  outline-offset: 3px;
}
footer a:focus-visible, .section-final-cta a:focus-visible, .como-cta a:focus-visible, .lc-crisis a:focus-visible {
  outline-color: var(--lc-yellow);
}
.lc-crisis a:focus-visible { outline-color: var(--lc-indigo); }

/* ---------- Fotografias circulares (Lu e Graziella — março/2023) ---------- */
.psychologist-photo-wrap, .prof-card-photo-wrap, .agende-card-photo-wrap {
  height: auto !important;
  display: flex;
  justify-content: center;
  padding: 32px 0 0;
  overflow: visible;
  background: transparent;
}
.psychologist-photo-wrap img, .prof-card-photo-wrap img, .agende-card-photo-wrap img {
  width: 200px;
  height: 200px;
  max-width: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  border: 4px solid #fff;
  box-shadow: 0 0 0 3px var(--lc-magenta), 0 10px 24px rgba(42, 24, 127, 0.15);
}
.duo-card { align-items: center; padding-top: 20px; text-align: center; }
.duo-photo {
  width: 78%;
  height: auto !important;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px var(--lc-magenta);
}
.duo-photo { margin-bottom: 14px; }
.duo-caption { width: 100%; }
@media (max-width: 480px) {
  .psychologist-photo-wrap img, .prof-card-photo-wrap img, .agende-card-photo-wrap img { width: 168px; height: 168px; }
}

/* ---------- Aviso sobre situações de crise ---------- */
.lc-crisis {
  background: #FFF8E6;
  border-top: 4px solid var(--lc-yellow);
  padding: 36px 20px;
}
.lc-crisis-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  color: var(--lc-text);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.65;
}
.lc-crisis h2 {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--lc-indigo);
  margin: 0 0 10px;
}
.lc-crisis p { margin: 0 0 8px; }
.lc-crisis strong { color: var(--lc-indigo); }
.lc-crisis a {
  color: var(--lc-magenta-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lc-crisis-abroad { font-size: 15px; color: #4A5560; }


/* ---------- Títulos em roxo-índigo (identidade original); seções escuras mantêm texto claro ---------- */
h1, h2, h3,
.hero-title, .section-title, .faq-title,
.duo-name, .psychologist-name, .prof-card-name, .agende-card-name,
.feature-title, .step-title, .faq-q, .prof-bio-title, .agende-step-title,
.prof-hero-title, .faq-hero-title, .agende-hero-title {
  color: var(--lc-indigo) !important;
}

/* Exceções: seções escuras e rodapés onde o texto deve ser branco/claro */
.section-final-cta :is(h1, h2, h3, h4, p, span),
.como-cta :is(h1, h2, h3, h4, p, span),
footer :is(h1, h2, h3, h4, p, span),
.agende-footer :is(h1, h2, h3, h4, p, span),
.hero-como :is(h1, h2, h3, p) {
  color: inherit !important;
}
.lc-crisis h2 {
  color: var(--lc-indigo) !important;
}