/* =====================================================================
   Página Sobre — só o que é desta página (o resto vem de tema.css + karen.css)
   ===================================================================== */

/* ---------- topo: texto à esquerda, retrato em arco à direita ---------- */
.sobre-topo { align-items: center; padding-bottom: clamp(70px, 8vw, 110px); }
.sobre-topo::before { content: ''; position: absolute; right: -10%; top: -20%; width: 60vw; height: 60vw; max-width: 820px; max-height: 820px; border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 123, 111, .2) 0%, rgba(224, 123, 111, 0) 62%); pointer-events: none; }
.topo-sobre { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 5vw, 80px); align-items: center; }
.topo-sobre .conteudo { max-width: 720px; }
.pg-sobre .retrato .borb { right: -36px; top: -30px; --w: 92px; --t: 12s; }
.pg-sobre .retrato .cracha b { font-size: 1.05rem; }
@media (max-width: 960px) {
  .topo-sobre { grid-template-columns: minmax(0, 1fr); }
  .pg-sobre .retrato .borb { right: -12px; top: -24px; --w: 70px; }
}

/* ---------- história ---------- */
.historia .moldura { width: 100%; max-width: 500px; justify-self: center; }
.moldura > .selo-familia { position: absolute; left: -26px; bottom: 40px; z-index: 3; display: grid; grid-template-columns: 44px auto; gap: 2px 12px; align-items: center;
  padding: 14px 20px 14px 14px; border-radius: 18px; background: #fff; box-shadow: 0 24px 50px -20px rgba(26, 36, 70, .5); animation: flutua-k 6s ease-in-out infinite; }
.selo-familia img { grid-row: span 2; width: 44px; height: auto; }
.selo-familia b { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; line-height: 1.1; color: var(--tinta); }
.selo-familia span { font-size: .82rem; font-weight: 700; color: var(--tinta-2); }
.historia .lista { padding-top: 6px; }
@media (max-width: 640px) { .moldura > .selo-familia { left: -6px; bottom: 22px; } }

/* ---------- trajetória: números 2x2 + linha do tempo ---------- */
.trajetoria .grade-2 { align-items: start; }
.trajetoria .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin-top: 8px; }
.trajetoria .numeros .stat b { line-height: 1; }
.numeros .stat b.estrela::after { content: '★'; font-size: .45em; color: var(--celeste); margin-left: .12em; vertical-align: .9em; }
.trajetoria .linha-tempo { margin-top: 8px; }
.trajetoria .marco { padding-bottom: 30px; }
.trajetoria .marco:last-child { padding-bottom: 0; }
.trajetoria .marco::before { box-shadow: 0 0 0 6px rgba(224, 123, 111, .22); }
.trajetoria .marco:last-child::before { background: var(--celeste); box-shadow: 0 0 0 6px rgba(168, 211, 195, .22); }
.trajetoria .marco b { font-weight: 400; }
.trajetoria .marco h3 { font-weight: 400; color: #fff; }
.trajetoria .marco > * { position: relative; }
.trajetoria .marco { margin-bottom: 14px; }
.trajetoria .marco:last-child { margin-bottom: 0; }
.trajetoria .marco p { max-width: 46ch; }

/* ---------- jeito de atender ---------- */
.jeito .grade-4 .cartao h3 { font-weight: 400; }
.depos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); margin-top: clamp(24px, 3vw, 36px); }
.depo { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 28px 26px 24px; border-radius: 22px; background: var(--celeste-claro); border: 1px solid rgba(68, 96, 156, .14); }
.depo .estrelas { color: #9a5a0a; letter-spacing: 2px; font-size: 1rem; line-height: 1; }
.depo blockquote { margin: 0; color: var(--tinta); font-size: 1.02rem; line-height: 1.6; }
.depo figcaption { margin-top: auto; display: grid; gap: 2px; padding-top: 14px; border-top: 1px solid rgba(26, 36, 70, .12); }
.depo figcaption b { color: var(--tinta); font-weight: 800; font-size: .98rem; }
.depo figcaption span { color: var(--azul); font-size: .8rem; font-weight: 700; letter-spacing: .04em; }
.jeito .aviso-legal { margin-top: 18px; }
@media (max-width: 900px) { .depos { grid-template-columns: minmax(0, 1fr); } }

/* ---------- frase em destaque ---------- */
.frase-sec { position: relative; overflow: hidden; text-align: center; }
.frase-sec::before { content: ''; position: absolute; left: 50%; top: 50%; width: 900px; height: 900px; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(106, 134, 192, .28) 0%, rgba(106, 134, 192, 0) 60%); pointer-events: none; }
.frase-grande { position: relative; z-index: 1; max-width: 920px; margin: 0 auto; }
.frase-grande::before { content: '“'; display: block; height: .42em; font-family: var(--font-display); font-size: clamp(6rem, 10vw, 9rem); line-height: .8; color: var(--sol); }
.frase-grande p { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.65rem, 3vw, 2.55rem); line-height: 1.22; color: #fff; letter-spacing: -.01em; }
.frase-grande cite { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; font-style: normal; font-weight: 800; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; color: var(--celeste); }
.frase-grande cite img { width: 40px; height: auto; }
.frase-sec .borb.a { left: 7%; top: 16%; --w: 72px; --t: 14s; --dx: 24px; --dy: -20px; }
.frase-sec .borb.b { right: 8%; bottom: 14%; --w: 54px; --t: 17s; --d: -5s; --dx: -20px; --dy: -24px; }
@media (max-width: 640px) {
  .frase-sec .borb.a { left: 2%; top: 6%; --w: 48px; }
  .frase-sec .borb.b { right: 2%; bottom: 5%; --w: 40px; }
}

/* ---------- consultório ---------- */
.consultorio .moldura { width: 100%; max-width: 440px; justify-self: center; }
.consultorio .moldura .foto { max-width: none; }
.consultorio .moldura > .borb { position: absolute; right: -30px; top: -34px; z-index: 3; --w: 78px; --t: 13s; }
.consultorio .info { margin-top: 4px; }
.consultorio .info-item b { color: var(--tinta); }
@media (max-width: 640px) { .consultorio .moldura > .borb { right: 4px; --w: 54px; --dx: -16px; } }