/* Tokens — 02-design/21-MODELO-A-ACOLHIMENTO.md §15 */
:root {
  --nevoa: #F7F5FA;  --papel: #FFFFFF;
  --tinta: #2A2838;  --tinta-suave: #5B5970;
  --azul-lilas: var(--marca-azul-lilas);  --azul-lilas-escuro: #4D5690;
  --roxo: var(--marca-roxo);  --ameixa: #6E5584;  --ameixa-escura: #3A3150;
  --lilas-claro: #ECE6F3;
  --prata-claro: #C8C6D2;  --prata: #8F8D9B;
  --titulo: "Newsreader", Georgia, "Times New Roman", serif;
  --texto: "Jost", "Futura", system-ui, sans-serif;

  --largura: 1180px;
  --margem: clamp(1.25rem, 4vw, 2.5rem);
  --fio-x: clamp(1.25rem, 4vw, 2.5rem);   /* onde o fio corre */
  --recuo: clamp(2.75rem, 9vw, 7rem);     /* onde o conteúdo começa, à direita do fio */
  --entre-secoes: clamp(5rem, 10vw, 8.5rem);
  --topo-altura: 76px;
}

body {
  background: var(--nevoa);
  color: var(--tinta);
  font: 400 1.0625rem/1.65 var(--texto);
  -webkit-font-smoothing: antialiased;
}
/* 16/09 (decisão do Alex): o site inteiro a 90%, como o Ctrl+- do navegador.
   Quem precisa de letra maior continua podendo aumentar o zoom por cima disso.
   Firefox só entende `zoom` a partir da versão 126; nas anteriores o site aparece no tamanho normal. */
body { zoom: .9; }

a { color: var(--azul-lilas); text-underline-offset: 4px; text-decoration-thickness: 1px; }
:focus-visible { outline: 3px solid var(--ameixa); outline-offset: 3px; border-radius: 4px; }
section[id] { scroll-margin-top: calc(var(--topo-altura) + 1rem); }

h1, h2, h3 { font-family: var(--titulo); font-weight: 400; margin: 0; text-wrap: balance; }
h1 em, h2 em { font-style: italic; color: var(--roxo); }
p { margin: 0; }

.sobrelinha {
  font: 500 .75rem/1.2 var(--texto);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ameixa);
}

/* ── botões ───────────────────────────────── */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px; padding: 0 1.6rem;
  border-radius: 999px; border: 0;
  background: var(--azul-lilas); color: #fff;
  font: 500 1rem/1 var(--texto); letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s ease;
}
.botao:hover { background: var(--azul-lilas-escuro); }
.botao svg { width: 20px; height: 20px; flex: none; }
.botao--claro { background: #fff; color: var(--azul-lilas-escuro); }
.botao--claro:hover { background: var(--lilas-claro); }
.botao--claro:focus-visible { outline-color: #fff; }
.botao--pequeno { min-height: 44px; padding: 0 1.15rem; font-size: .9375rem; }

.link-seta {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px;
  font-weight: 500; text-decoration: none;
}
.link-seta:hover { text-decoration: underline; }
.link-seta span { transition: transform .2s ease; }
.link-seta:hover span { transform: translateX(3px); }

/* ── topo ─────────────────────────────────── */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--nevoa) 88%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.topo.rolou { border-bottom-color: #E3E0EA; }
.topo__dentro {
  max-width: var(--largura); margin: 0 auto; padding: 0 var(--margem);
  height: var(--topo-altura);
  display: flex; align-items: center; gap: 1.5rem;
}
.logo { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: none; }
.logo__simbolo { width: 52px; height: auto; }
.logo__nome { width: 190px; height: auto; }
.nav { margin-left: auto; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; }
.nav a {
  display: flex; align-items: center; min-height: 44px; padding: 0 .75rem;
  color: var(--tinta); text-decoration: none; font-size: .9375rem;
}
.nav a:hover { color: var(--azul-lilas); }
.menu-botao { display: none; }

@media (max-width: 1180px) {   /* 6 itens no menu desde 13/09 */
  .logo__nome { width: 160px; }
  .menu-botao {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; width: 44px; height: 44px; border: 0; border-radius: 10px;
    background: transparent; color: var(--tinta); cursor: pointer;
  }
  .menu-botao svg { width: 24px; height: 24px; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--nevoa); border-bottom: 1px solid #E3E0EA;
    padding: .5rem var(--margem) 1.25rem;
  }
  .nav:not(.aberto) { display: none; }
  .nav ul { flex-direction: column; }
  .nav a { font-size: 1.0625rem; padding: 0; }
  .topo .botao--pequeno { order: 3; }
}
@media (max-width: 420px) {
  .logo__nome { display: none; }
  .logo__simbolo { width: 58px; }
}

/* ── abertura ─────────────────────────────── */
.abertura {
  max-width: var(--largura); margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5.5rem) var(--margem) clamp(3.5rem, 7vw, 6rem);
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.abertura__texto { animation: surgir .7s ease-out both; }
.abertura h1 {
  font-size: clamp(2.5rem, 5.5vw, 4.5rem); line-height: 1.05; letter-spacing: -.012em;
  margin: 1.1rem 0 1.4rem;
}
.abertura h1 .linha { display: block; }
.abertura__lide { font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); color: var(--tinta-suave); max-width: 32em; }
.abertura__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 2.1rem; }
.abertura__credencial {
  margin-top: 2.4rem; padding-top: 1.1rem; border-top: 1px solid #E3E0EA;
  font-size: .9375rem; color: var(--tinta-suave);
}
.abertura__credencial strong { color: var(--tinta); font-weight: 500; }

.abertura__foto { position: relative; }
.infinito {
  position: absolute; z-index: 2; pointer-events: none;
  width: 128%; left: -14%; top: 58%;
  overflow: visible;
  filter: drop-shadow(0 1px 1px rgba(58, 49, 80, .18));
}
/* o traço vai no <svg>: o <use> herda, mas não é alcançado por "svg path" */
.infinito { fill: none; stroke: url(#prata); stroke-width: .9; }
.foto {
  position: relative; z-index: 1; margin: 0;
  aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden;
  background: linear-gradient(160deg, #EFEAF5 0%, #E2DAEC 100%);
  display: grid; place-items: center;
  box-shadow: 0 30px 60px -30px rgba(58, 49, 80, .35);
}
.foto img { width: 62%; opacity: .5; }
.foto figcaption {
  position: absolute; left: 1rem; bottom: 1rem;
  font-size: .8125rem; color: var(--ameixa-escura);
  background: rgba(255, 255, 255, .8); padding: .3rem .65rem; border-radius: 999px;
}
/* 14/09: a foto dela na primeira seção, inteira: moldura lilás, a cabeça saindo pelo alto e os livros.
   O PNG já vem recortado, com fundo transparente: sem cartão e sem sombra. Cabe na altura da tela sem distorcer. */
.abertura__foto { animation: surgir .7s .1s ease-out both; }
.foto--recorte { aspect-ratio: auto; border-radius: 0; overflow: visible; background: none; box-shadow: none; display: block; }
.foto--recorte img {
  display: block; width: auto; height: auto; max-width: 100%; margin: 0 auto; opacity: 1;
  max-height: min(640px, calc(100vh - 150px));
  max-height: min(640px, calc(100svh - 150px));
}
@keyframes surgir { from { opacity: 0; transform: translateY(12px); } }

@media (max-width: 820px) {
  .abertura { grid-template-columns: 1fr; }
  .abertura__foto { max-width: 26rem; width: 88%; margin: 0 auto; }
  .infinito { width: 120%; left: -10%; }
}

/* ── o fio (assinatura) ───────────────────── */
.trilha {
  position: relative;
  max-width: var(--largura); margin: 0 auto;
  padding: 0 var(--margem) 0 calc(var(--margem) + var(--recuo));
}
.trilha::before, .trilha::after {
  content: ""; position: absolute; top: 2.25rem; bottom: 0;
  left: calc(var(--margem) + var(--fio-x) / 2); width: 1px;
}
.trilha::before { background: linear-gradient(to bottom, var(--prata-claro), var(--prata-claro) 92%, transparent); }
.trilha::after {
  background: linear-gradient(to bottom, var(--roxo), var(--azul-lilas));
  transform-origin: top; transform: scaleY(0);
}
@supports (animation-timeline: scroll()) {
  .trilha::after { animation: percorrer linear both; animation-timeline: scroll(root); }
}
@keyframes percorrer { to { transform: scaleY(1); } }

.no-infinito {
  position: absolute; top: 0; width: 34px; height: 18px;
  left: calc(var(--margem) + var(--fio-x) / 2 - 17px);
}
.no-infinito { fill: none; stroke: var(--prata); stroke-width: 7; }

.secao { padding-top: var(--entre-secoes); position: relative; }
.secao:first-of-type { padding-top: 4.5rem; }
.secao:first-of-type::before { top: 4.7rem; }
.secao__cabeca { position: relative; margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 40rem; }
.secao::before {                               /* o nó no fio */
  content: ""; position: absolute; top: calc(var(--entre-secoes) + .2rem);
  left: calc(-1 * var(--recuo) + var(--fio-x) / 2 - 5px);
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--nevoa); border: 2px solid var(--roxo);
}
.secao__cabeca h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.12; margin-top: .9rem; }
.secao__cabeca p { margin-top: 1rem; color: var(--tinta-suave); max-width: 36em; }

@media (max-width: 640px) {
  :root { --recuo: 0px; }
  .trilha::before, .trilha::after, .no-infinito { display: none; }
  .secao::before { display: none; }
  .secao__cabeca::before {                     /* no celular: um traço curto ao lado da sobrelinha */
    content: ""; position: absolute; top: .38rem; left: 0; width: 22px; height: 1px;
    background: var(--roxo);
  }
  .secao__cabeca .sobrelinha { padding-left: 32px; }
}

/* ── para você ────────────────────────────── */
.sinais { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 3.5rem); }
.sinais li {
  padding: 1.15rem 0; border-top: 1px solid #E3E0EA;
  font-family: var(--titulo); font-size: clamp(1.125rem, 1.6vw, 1.3rem); line-height: 1.4;
}
.sinais li:nth-last-child(-n+2) { border-bottom: 1px solid #E3E0EA; }
.fecho {
  margin-top: 2.25rem; max-width: 34em;
  font-family: var(--titulo); font-style: italic; font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.4;
  color: var(--ameixa);
}
@media (max-width: 640px) {
  .sinais { grid-template-columns: 1fr; }
  .sinais li:nth-last-child(2) { border-bottom: 0; }
}

/* ── abordagem ────────────────────────────── */
.pilares { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3.5vw, 3rem); }
.pilares h3 { font-size: 1.375rem; line-height: 1.25; margin-bottom: .7rem; }
.pilares p { color: var(--tinta-suave); }
.pilares > div { padding-top: 1.25rem; border-top: 1px solid var(--prata-claro); }
@media (max-width: 860px) { .pilares { grid-template-columns: 1fr; } }

/* ── atendimentos ─────────────────────────── */
.atendimentos { list-style: none; margin: 0; padding: 0; }
.atendimento {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto;
  gap: .75rem clamp(1.5rem, 4vw, 3rem); align-items: start;
  padding: 2rem 0; border-top: 1px solid var(--prata-claro);
}
.atendimento:last-child { border-bottom: 1px solid var(--prata-claro); }
.atendimento h3 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); line-height: 1.15; }
.atendimento__para { font-size: .9375rem; color: var(--ameixa); font-weight: 500; margin-bottom: .45rem; }
.atendimento__texto p + p { margin-top: .6rem; }
.atendimento__meta { font-size: .9375rem; color: var(--tinta-suave); }
.atendimento .link-seta { white-space: nowrap; }
@media (max-width: 860px) {
  .atendimento { grid-template-columns: 1fr; }
}

/* ── sobre ────────────────────────────────── */
.sobre { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.sobre .foto { aspect-ratio: 4 / 5; }
.sobre__texto > p { margin-bottom: 1rem; }
.fichas { margin: 1.75rem 0 0; display: grid; grid-template-columns: max-content 1fr; gap: .8rem 1.5rem; }
.fichas dt { font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ameixa); font-weight: 500; padding-top: .2rem; }
.fichas dd { margin: 0; }
.citacao {
  margin: 2rem 0 0; padding-left: 1.25rem; border-left: 2px solid var(--roxo);
  font-family: var(--titulo); font-style: italic; font-size: 1.25rem; line-height: 1.45;
}
@media (max-width: 820px) {
  .sobre { grid-template-columns: 1fr; }
  .sobre .foto { max-width: 22rem; }
  .fichas { grid-template-columns: 1fr; gap: .2rem; }
  .fichas dd { margin-bottom: .8rem; }
}

/* ── como funciona ────────────────────────── */
.passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); counter-reset: passo; }
.passos li { counter-increment: passo; }
.passos li::before {
  content: counter(passo); display: block;
  font-family: var(--titulo); font-style: italic; font-size: 3rem; line-height: 1; color: var(--roxo);
  margin-bottom: .9rem;
}
.passos h3 { font-family: var(--texto); font-weight: 500; font-size: 1.0625rem; margin-bottom: .35rem; }
.passos p { color: var(--tinta-suave); font-size: 1rem; }
.depois-dos-passos { margin-top: 2.75rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }
.depois-dos-passos p { font-size: .9375rem; color: var(--tinta-suave); max-width: 30em; }
@media (max-width: 860px) { .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .passos { grid-template-columns: 1fr; } }

/* ── dúvidas ──────────────────────────────── */
.duvidas { max-width: 46rem; }
.duvidas details { border-top: 1px solid var(--prata-claro); }
.duvidas details:last-child { border-bottom: 1px solid var(--prata-claro); }
.duvidas summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  min-height: 44px; padding: 1.15rem 0;
  font-family: var(--titulo); font-size: clamp(1.125rem, 1.6vw, 1.3rem); line-height: 1.35;
}
.duvidas summary::-webkit-details-marker { display: none; }
.duvidas summary::after {
  content: "+"; flex: none; font-family: var(--texto); font-size: 1.5rem; line-height: 1; color: var(--azul-lilas);
  transition: transform .2s ease;
}
.duvidas details[open] summary::after { transform: rotate(45deg); }
.duvidas details p { padding: 0 2.5rem 1.4rem 0; color: var(--tinta-suave); }

/* ── agendar ──────────────────────────────── */
.agendar {
  margin-top: var(--entre-secoes);
  background: var(--azul-lilas); color: #fff;
  position: relative; overflow: hidden;
}
.agendar__dentro {
  position: relative; z-index: 1;
  max-width: var(--largura); margin: 0 auto;
  padding: clamp(4rem, 8vw, 6.5rem) var(--margem);
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 2.5rem; align-items: end;
}
.agendar h2 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.1; }
.agendar h2 em { color: #fff; }
.agendar p { margin-top: 1.1rem; max-width: 30em; color: #fff; }
.agendar__contatos { font-size: .9375rem; line-height: 1.9; }
.agendar__contatos a { color: #fff; }
.agendar .infinito-fundo {
  position: absolute; right: -8%; top: 50%; transform: translateY(-50%);
  width: 60%; min-width: 30rem; opacity: .22; pointer-events: none;
}
.agendar .infinito-fundo { fill: none; stroke: #fff; stroke-width: .35; }
@media (max-width: 820px) { .agendar__dentro { grid-template-columns: 1fr; } }

/* ── rodapé ───────────────────────────────── */
.rodape { background: var(--ameixa-escura); color: #E6E1EE; font-size: .9375rem; }
.rodape a { color: #fff; }
.rodape__dentro {
  max-width: var(--largura); margin: 0 auto; padding: 3.5rem var(--margem) 2rem;
  display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 2.5rem;
}
.rodape__marca { display: flex; flex-direction: column; gap: .9rem; }
.rodape__marca .simbolo { width: 88px; filter: brightness(0) invert(1); opacity: .9; }
.rodape__marca .nome { width: 260px; }
.rodape h2 { font: 500 .75rem/1.2 var(--texto); letter-spacing: .22em; text-transform: uppercase; color: #CFC6DC; margin-bottom: .9rem; }
.rodape ul { list-style: none; margin: 0; padding: 0; line-height: 2; }
.rodape__crise { grid-column: 1 / -1; padding: 1rem 1.2rem; border-radius: 12px; background: rgba(255, 255, 255, .07); color: #fff; }
.rodape__base {
  max-width: var(--largura); margin: 0 auto; padding: 1.25rem var(--margem) 2rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; font-size: .8125rem; color: #CFC6DC;
}
@media (max-width: 820px) { .rodape__dentro { grid-template-columns: 1fr; } }

/* ── espaço para o WhatsApp do canto ─────── */
.rodape__base { padding-bottom: 6rem; }

/* ── menu: seção atual ────────────────────── */
.nav a[aria-current] { color: var(--azul-lilas); box-shadow: inset 0 -2px 0 var(--roxo); }

/* ── celular ──────────────────────────────── */
@media (max-width: 820px) {
  :root { --topo-altura: 64px; --entre-secoes: 4.25rem; }
  .logo__simbolo { width: 50px; }

  /* topo: agendar à direita, menu na ponta */
  .topo .botao--pequeno { order: 3; margin-left: auto; }
  .menu-botao { order: 4; margin-left: 0; }
  .topo__dentro { gap: .5rem; }

  /* abertura (14/09): a foto dela abre a página, centrada, com um vão fixo antes do texto
     (a foto nunca encosta na sobrelinha); o nome e o CRP ficam depois do botão */
  .abertura { padding-top: 1.5rem; padding-bottom: 1rem; gap: 0; }
  .abertura__foto { order: -1; width: min(88%, 23rem); margin: 0 auto 1.75rem; }
  .abertura h1 { margin: .7rem 0 1rem; }
  .abertura__acoes { flex-direction: column; align-items: stretch; gap: .25rem; margin-top: 1.6rem; }
  .abertura__acoes .link-seta { justify-content: center; }
  .abertura__credencial { margin-top: 1.4rem; padding-top: 1rem; line-height: 1.5; }
  .abertura__credencial strong { display: block; }
  .abertura__credencial .separador { display: none; }

  /* sobre: foto mais baixa, ficha em duas colunas */
  .sobre .foto { aspect-ratio: 4 / 3; max-width: none; }
  .fichas { grid-template-columns: max-content 1fr; gap: .65rem 1rem; }
  .fichas dt { font-size: .6875rem; letter-spacing: .12em; }
  .fichas dd { margin-bottom: 0; }

  /* atendimentos um pouco mais juntos */
  .atendimento { padding: 1.6rem 0; }

}
@media (max-width: 560px) {
  .sobrelinha { letter-spacing: .14em; }
  .abertura__acoes .botao, .depois-dos-passos .botao, .agendar .botao { width: 100%; }
  .depois-dos-passos { gap: 1rem; }
  .agendar__dentro { gap: 1.75rem; }

  /* passos: número ao lado do texto, não em cima */
  .passos { gap: 1.5rem; }
  .passos li { display: grid; grid-template-columns: 2.5rem 1fr; column-gap: .9rem; }
  .passos li::before { grid-row: span 2; margin: 0; font-size: 2.5rem; }

  .sinais li { padding: 1rem 0; font-size: 1.125rem; }
}

/* ════════════════════════════════════════════════════════════
   PÁGINAS INTERNAS — o fio continua
   ════════════════════════════════════════════════════════════ */
.rodape nav ul { line-height: 2; }
.rodape a[aria-current] { color: #D9CCE3; }
.rodape__endereco { margin-top: .6rem; line-height: 1.6; }
.mais-a { margin-top: 1.5rem; }

.abertura--pagina { grid-template-columns: minmax(0, 1fr) minmax(0, .45fr); padding-bottom: clamp(1rem, 3vw, 2rem); position: relative; }
.abertura--pagina h1 { font-size: clamp(2.3rem, 5vw, 4rem); margin: 1rem 0 1.1rem; }
.infinito--pagina { position: static; transform: none; width: 100%; max-width: 20rem; justify-self: end; }
.trilha-nav { display: flex; gap: .55rem; align-items: center; font-size: .875rem; color: var(--tinta-suave); }
.trilha-nav a { color: var(--azul-lilas); text-decoration: none; }
.trilha-nav a:hover { text-decoration: underline; }

.aviso-a { padding-top: 3rem; color: var(--tinta-suave); font-size: .9375rem; }
.detalhe-a { scroll-margin-top: calc(var(--topo-altura) + 1rem); }
.detalhe-a__grade { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(2rem, 5vw, 4rem); }
.detalhe-a__texto { font-size: 1.125rem; }
.detalhe-a__texto + .detalhe-a__texto { margin-top: 1rem; font-size: 1.0625rem; color: var(--tinta-suave); }
.subtitulo-a { margin: 2rem 0 .5rem; font: 500 .75rem/1.2 var(--texto); letter-spacing: .2em; text-transform: uppercase; color: var(--ameixa); }
.detalhe-a__lado .subtitulo-a { margin-top: 0; }
.detalhe-a__lado { padding: 1.75rem; border-radius: 22px; background: var(--papel); box-shadow: 0 20px 50px -35px rgba(58, 49, 80, .5); align-self: start; }
.detalhe-a__lado .botao { width: 100%; margin-top: 1.5rem; }
.sinais--uma { grid-template-columns: 1fr; }
.sinais--uma li:nth-last-child(2) { border-bottom: 0; }
.sinais--uma li:last-child { border-bottom: 1px solid #E3E0EA; }
.lista-a { list-style: none; margin: 0; padding: 0; color: var(--tinta-suave); }
.lista-a li { padding: .5rem 0; border-bottom: 1px solid #ECE9F1; }
.lista-a li:last-child { border-bottom: 0; }

.assinatura-a { width: min(300px, 80%); margin-top: 2rem; }
.sobre__texto > p + p { margin-top: 1rem; }
.pilares--dois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.formato-a { margin-top: 1rem; color: var(--tinta); }

.contato-a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.form-a { background: var(--papel); border-radius: 28px; padding: clamp(1.75rem, 4vw, 2.75rem); box-shadow: 0 30px 60px -35px rgba(58, 49, 80, .5); }
.form-a h2 { font-family: var(--titulo); font-size: clamp(1.7rem, 3vw, 2.25rem); line-height: 1.15; margin-bottom: 1.5rem; }
.campo { margin-bottom: 1.1rem; border: 0; padding: 0; margin-inline: 0; }
.campo label, .campo legend { display: block; font-size: .9375rem; font-weight: 500; margin-bottom: .4rem; }
.campo input[type="text"], .campo select {
  width: 100%; min-height: 52px; padding: 0 1.1rem; border: 1px solid var(--prata-claro); border-radius: 999px; background: #fff;
  font: 400 1rem/1 var(--texto); color: var(--tinta);
}
.campo select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E5584' stroke-width='1.8'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.1rem center; background-size: 18px; padding-right: 2.8rem; }
.campo input:focus, .campo select:focus { border-color: var(--azul-lilas); outline: 2px solid var(--azul-lilas); outline-offset: 0; }
.campo input[aria-invalid="true"] { border-color: #A3324A; }
.campo__erro { margin-top: .35rem; font-size: .875rem; color: #A3324A; }
.opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.opcoes label { display: flex; align-items: center; gap: .55rem; min-height: 52px; padding: 0 1rem; border: 1px solid var(--prata-claro); border-radius: 999px; font-weight: 400; margin: 0; cursor: pointer; }
.opcoes input { accent-color: var(--azul-lilas); width: 18px; height: 18px; margin: 0; }
.opcoes label:has(input:checked) { border-color: var(--azul-lilas); background: var(--lilas-claro); }
.opcoes label:has(input:focus-visible) { outline: 2px solid var(--azul-lilas); outline-offset: 2px; }
.botao--largo { width: 100%; margin-top: .5rem; }
.form-nota { margin-top: 1rem; font-size: .875rem; color: var(--tinta-suave); line-height: 1.55; }
.form-nota strong { color: var(--tinta); font-weight: 500; }
.fichas--contato dd { margin-bottom: .2rem; }
.crise-a { margin-top: 2rem; padding: 1rem 1.2rem; border-radius: 14px; background: var(--lilas-claro); font-size: .9375rem; }
.secao--texto p { color: var(--tinta-suave); max-width: 40em; }
.secao--texto p + p { margin-top: .8rem; }
.secao--texto .secao__cabeca { margin-bottom: 1rem; }

@media (max-width: 820px) {
  .abertura--pagina { grid-template-columns: 1fr; }
  .infinito--pagina { display: none; }
  .detalhe-a__grade, .contato-a, .pilares--dois { grid-template-columns: 1fr; }
}
.contato-a { padding-bottom: clamp(3rem, 7vw, 6rem); }

/* Contato: o Instagram dela num celular (18/09).
   Cartão lilás; o celular sai por cima do cartão e é cortado pela borda de baixo (clip-path só embaixo). */
.contato-a { padding-bottom: clamp(2rem, 4vw, 3rem); }
.insta-a { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center;
  margin: clamp(5rem, 9vw, 7.5rem) 0 clamp(3rem, 7vw, 6rem); padding: clamp(2rem, 5vw, 3.75rem) clamp(1.5rem, 5vw, 4rem) 0;
  background: var(--lilas-claro); border-radius: 32px;
  clip-path: inset(-40rem -40rem 0 -40rem round 0 0 32px 32px);
  overflow-x: clip; }   /* o brilho atrás do celular passava da tela no celular e criava rolagem para o lado */
.insta-a__texto { padding-bottom: clamp(2rem, 5vw, 3.75rem); }
.insta-a__texto h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; margin: .6rem 0 1.1rem; }
.insta-a__texto p:not(.sobrelinha) { color: var(--tinta-suave); max-width: 30em; margin-bottom: 1.75rem; }
.insta-a__celular { position: relative; margin: calc(-1 * clamp(5rem, 9vw, 7.5rem) - clamp(2rem, 5vw, 3.75rem)) 0 -9rem; justify-self: center; width: min(100%, 290px); }
.insta-a__celular::before { content: ""; position: absolute; inset: 10% -35% 0; z-index: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(140, 110, 160, .38), rgba(140, 110, 160, .12) 60%, transparent); }
.insta-a__celular img { position: relative; z-index: 1; display: block; width: 100%; height: auto; filter: drop-shadow(0 24px 34px rgba(58, 49, 80, .30)); }
/* sem o print (18/09, até o perfil sair sem "Psicóloga" e CRP): só o cartão, com o botão */
.insta-a--sem-celular { grid-template-columns: 1fr; margin-top: 0; padding-bottom: 0; clip-path: none; }
.insta-a--sem-celular .insta-a__texto h2 { max-width: 16em; }
@media (max-width: 820px) {
  .insta-a { grid-template-columns: 1fr; margin-top: 2rem; }
  .insta-a__texto { padding-bottom: 0; }
  .insta-a__celular { margin: .5rem 0 -12rem; width: min(78%, 270px); }
  .insta-a { padding-bottom: 0; }
}


/* texto da Patrícia (13/09) */
.sobre__texto > p.tese-a, .secao > p.tese-a { margin-top: 1.75rem; font-family: var(--titulo); font-style: italic; font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.35; color: var(--ameixa); }
.bases-a__pendente { margin-top: 1rem; }

/* Sobre com o texto longo dela (13/09): a foto acompanha a leitura */
@media (min-width: 821px) { .sobre > figure { position: sticky; top: calc(var(--topo-altura) + 1.5rem); } }

/* ════════════════════════════════════════════════════════════
   ABORDAGEM E REFERÊNCIAS (13/09) — a partir da Fundamentação da Patrícia
   ════════════════════════════════════════════════════════════ */
.citacao-a { margin: 0; padding-left: 1.5rem; border-left: 2px solid var(--roxo); max-width: 40em;
  font-family: var(--titulo); font-size: clamp(1.25rem, 2.1vw, 1.6rem); line-height: 1.45; }
.campos-a { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; max-width: 56rem; }
.campos-a li { padding: .45rem .9rem; border: 1px solid var(--prata-claro); border-radius: 999px; background: var(--papel); font-size: .9375rem; color: var(--tinta-suave); }
.entrada-a { margin: -.75rem 0 2.25rem; max-width: 30em; font-family: var(--titulo); font-style: italic; font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.35; color: var(--ameixa); }

/* a hipótese organizadora: uma frase que avança, como ela escreveu (Experiência → … → repetição) */
.cadeia-a { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem; max-width: 52rem;
  font-family: var(--titulo); font-size: clamp(1.4rem, 2.8vw, 2.25rem); line-height: 1.3; }
.cadeia-a li { display: inline-flex; align-items: baseline; gap: .7rem; }
.cadeia-a li:not(:last-child)::after { content: "→" / ""; font-family: var(--texto); font-size: .7em; color: var(--ameixa); }
.cadeia-a li:last-child { font-style: italic; color: var(--ameixa); }
.perguntas-a__intro { margin-top: 2.5rem; }
.perguntas-a { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 3rem); }
.perguntas-a li { padding: .95rem 0; border-top: 1px solid #E3E0EA; font-family: var(--titulo); font-size: clamp(1.0625rem, 1.5vw, 1.2rem); line-height: 1.4; }

.tres-is-a { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3.5vw, 3rem); }
.tres-is-a > div { padding-top: 1.25rem; border-top: 1px solid var(--prata-claro); }
.tres-is-a__letra { font-family: var(--titulo); font-style: italic; font-size: 3.75rem; line-height: .9; color: var(--roxo); margin-bottom: .6rem; }
.tres-is-a h3 { font-size: 1.5rem; margin-bottom: .45rem; }
.tres-is-a p:not(.tres-is-a__letra) { color: var(--tinta-suave); }
.passos--caminho { row-gap: 2.25rem; }
.passos--caminho h3 { font-size: 1.125rem; }

/* referências */
.principios-ref-a { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.principios-ref-a li { padding-top: 1.1rem; border-top: 1px solid var(--prata-claro); display: grid; gap: .4rem; }
.principios-ref-a a { font-family: var(--titulo); font-size: 1.35rem; line-height: 1.25; color: var(--tinta); text-decoration: none; }
.principios-ref-a a:hover { color: var(--azul-lilas); text-decoration: underline; }
.principios-ref-a span { color: var(--tinta-suave); }
.principio-editorial-a { margin-top: 2.25rem; max-width: 46rem; }
.tema-ref { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.tema-ref + .tema-ref { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid #E3E0EA; }
.tema-ref h3 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1.2; margin-bottom: .8rem; }
.tema-ref__texto p { color: var(--tinta-suave); }
.tema-ref__texto p + p { margin-top: .75rem; }
.tema-ref__rotulo { margin-top: 1.25rem; font: 500 .75rem/1.3 var(--texto); letter-spacing: .18em; text-transform: uppercase; color: var(--ameixa); }
.tema-ref .lista-a { margin-top: .4rem; }
.sintese-a { margin-top: 1.5rem; padding: 1.1rem 1.25rem; border-radius: 16px; background: var(--lilas-claro);
  font-family: var(--titulo); font-style: italic; font-size: 1.125rem; line-height: 1.45; color: var(--tinta); }
.tema-ref__texto .sintese-a { color: var(--tinta); }
.fontes-a { list-style: none; margin: 0; padding: 0; counter-reset: fonte; }
.fontes-a .fonte { counter-increment: fonte; position: relative; padding: 1rem 0 1rem 2.25rem; border-top: 1px solid #E3E0EA; }
.fontes-a .fonte:last-child { border-bottom: 1px solid #E3E0EA; }
.fontes-a .fonte::before { content: counter(fonte); position: absolute; left: 0; top: 1.05rem; font-family: var(--titulo); font-style: italic; font-size: 1.25rem; line-height: 1; color: var(--ameixa); }
.fonte__autores { font-size: .875rem; color: var(--tinta-suave); }
.fonte__titulo { margin: .15rem 0; font-family: var(--titulo); font-size: 1.125rem; line-height: 1.35; }
.fonte__titulo cite { font-style: normal; }
.fonte__veiculo { font-size: .875rem; font-style: italic; color: var(--tinta-suave); }
.fonte__nota { margin-top: .45rem; font-size: .9375rem; }
.fonte__doi { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; font-size: .875rem; }
.autores-a { margin: 1rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem clamp(1.5rem, 4vw, 3rem); }
.autores-a > div { padding-top: 1rem; border-top: 1px solid var(--prata-claro); }
.autores-a dt { font-family: var(--titulo); font-size: 1.35rem; }
.autores-a dd { margin: .3rem 0 0; color: var(--tinta-suave); }
.observacao-a { margin-top: 2rem; padding: 1.25rem 1.4rem; border-left: 2px solid var(--roxo); border-radius: 0 16px 16px 0; background: var(--papel); max-width: 46rem; }
.observacao-a p + p { margin-top: .6rem; }
.observacao-a .sobrelinha { margin-bottom: .6rem; }
.producao-a { list-style: none; margin: 1.5rem 0; padding: 0; max-width: 46rem; }
.producao-a li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .35rem 1rem; padding: 1.1rem 0; border-top: 1px solid #E3E0EA; }
.producao-a li:last-child { border-bottom: 1px solid #E3E0EA; }
.producao-a a { font-family: var(--titulo); font-size: 1.35rem; color: var(--tinta); text-decoration: none; }
.producao-a a:hover { color: var(--azul-lilas); text-decoration: underline; }
.producao-a span { font: 500 .75rem/1.3 var(--texto); letter-spacing: .16em; text-transform: uppercase; color: var(--ameixa); }

@media (max-width: 860px) {
  .perguntas-a, .tres-is-a, .principios-ref-a, .tema-ref, .autores-a { grid-template-columns: 1fr; }
}

/* ── artigos (16/09) ──────────────────────── */
/* lista: um artigo por linha, com título dela e resumo nosso */
.artigos-a { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 1px; background: #E3E0EA; box-shadow: 0 -1px 0 #E3E0EA, 0 1px 0 #E3E0EA; }
.artigo-a > a { display: block; padding: 1.4rem 1.2rem; background: var(--nevoa); color: inherit; text-decoration: none; transition: background-color .2s ease; }
.artigo-a > a:hover { background: var(--papel); }
.artigo-a h2, .artigo-a h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); line-height: 1.2; color: var(--tinta); }
.artigo-a__resumo { margin-top: .5rem; max-width: 62ch; font-size: 1rem; line-height: 1.55; color: var(--tinta-suave); }
.artigo-a__ir { display: inline-flex; align-items: center; gap: .4rem; margin-top: .75rem; color: var(--azul-lilas); font-weight: 500; font-size: .9375rem; }
.artigo-a__ir svg { width: 18px; height: 18px; }
.artigo-a > a:hover .artigo-a__ir { text-decoration: underline; }

/* "Para ler sobre isso", dentro dos atendimentos e da abordagem */
.leituras-a { margin-top: 1.5rem; padding: 1rem 1.2rem; border-radius: 16px; background: var(--papel); box-shadow: inset 0 0 0 1px #E3E0EA; }
.leituras-a__titulo { font: 500 .75rem/1.2 var(--texto); letter-spacing: .18em; text-transform: uppercase; color: var(--ameixa); }
.leituras-a ul { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .5rem; }
.leituras-a a { color: var(--tinta); text-underline-offset: 3px; text-decoration-color: var(--prata-claro); }
.leituras-a a:hover { color: var(--azul-lilas); }

/* o artigo aberto */
.abertura--artigo .abertura__lide { max-width: 34ch; }
.artigo-a__abertura { font-family: var(--titulo); font-style: italic; font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.4; color: var(--ameixa); }
.artigo-a-corpo { max-width: 40rem; }
.artigo-a-corpo p { font-size: 1.125rem; line-height: 1.75; }
.artigo-a-corpo p + p { margin-top: 1rem; }
.artigo-a-corpo__sub { margin: 2.4rem 0 .9rem; font-size: clamp(1.35rem, 2.6vw, 1.8rem); line-height: 1.2; }
.artigo-a-corpo .assinatura-a { display: block; margin-top: 2.5rem; }
.artigo-a-refs { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #E3E0EA; }
.artigo-a-refs h2 { font-size: 1.25rem; }
.artigo-a-refs ul { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .7rem; }
.artigo-a-refs li { position: relative; padding-left: 1.1rem; font-size: .9375rem; line-height: 1.5; color: var(--tinta-suave); }
.artigo-a-refs li::before { content: "—"; position: absolute; left: 0; color: var(--prata); }
.artigo-a-refs__nota { margin-top: 1.1rem; font-size: .875rem; color: var(--tinta-suave); }   /* 18/09: prata dava 3 : 1 */

@media (max-width: 820px) {
  .artigo-a > a { padding: 1.2rem 1rem; }
  .artigo-a-corpo p { font-size: 1.0625rem; line-height: 1.7; }
}

/* ── vídeo de apresentação (16/09) ────────── */
/* na página Sobre, no lugar da foto: o vídeo vertical dela, que só carrega quando alguém dá play */
.video-a { margin: 0; display: flex; flex-direction: column; align-items: center; }
.video-a video {
  display: block; width: auto; max-width: 100%; max-height: 600px; border-radius: 24px;
  background: var(--ameixa-escura); box-shadow: 0 30px 60px -30px rgba(58, 49, 80, .45);
}
.video-a figcaption { margin-top: .75rem; font-size: .875rem; color: var(--tinta-suave); text-align: center; }

/* o play grande sobre a capa: clicar em qualquer ponto começa o vídeo ali mesmo */
.video-a__moldura { position: relative; display: flex; }
.video-a__play {
  position: absolute; inset: 0; width: 100%; border: 0; padding: 0; border-radius: 24px;
  background: transparent; color: #fff; cursor: pointer;
  display: grid; align-items: end; justify-items: center; padding-bottom: 3.6rem;   /* o play não cobre o rosto dela */
}
/* 18/09 (Alex): só o play, sem frase e sem sombreado — a frase ficava em cima da barra de controles */
.video-a__play svg { position: relative; z-index: 1; filter: drop-shadow(0 6px 16px rgba(42, 40, 56, .35)); }
.video-a__play svg {
  box-sizing: content-box; width: 26px; height: 26px; padding: 19px; margin-left: 4px; border-radius: 50%;
  background: rgba(255, 255, 255, .94); color: var(--azul-lilas-escuro); transition: transform .2s ease;
}
.video-a__play:hover svg { transform: scale(1.06); }
.video-a__moldura.tocando .video-a__play { display: none; }

@media (max-width: 820px) {
  .video-a video, .video-capa-a { max-width: 21rem; }
  .video-capa-a { margin: 0 auto; }
}

/* ── copy da capa (16/09) ─────────────────── */
/* sob o botão: tira o medo do compromisso e do "o que eu vou dizer" */
.abertura__nota { margin-top: .9rem; font-size: .9375rem; line-height: 1.5; color: var(--tinta-suave); max-width: 34em; }
/* a prova possível: formação e produção, na linha do registro */
.abertura__prova { display: block; margin-top: .35rem; font-size: .875rem; color: var(--tinta-suave); }   /* 18/09: prata dava 3 : 1 */
.abertura__prova a { color: var(--ameixa); text-underline-offset: 3px; }

/* 16/09: no computador a foto da capa cresce e avança sobre a margem livre da página,
   sem estreitar a coluna do texto (se a coluna encolhe, o título ganha mais uma linha). */
@media (min-width: 821px) {
  .abertura { padding-top: clamp(2rem, 5vw, 4rem); }
  .foto--recorte img {
    max-width: calc(100% + max(0px, (100vw - var(--largura)) / 2));   /* só a margem que sobra além do conteúdo */
    max-height: min(760px, calc(100vh - 120px));
    max-height: min(760px, calc(100svh - 120px));
  }
}

/* ════════════════════════════════════════════════════════════
   DUAS FRENTES (18/09, briefing "Psicologia e Terapias Integrativas")
   A Psicologia Clínica fica com o azul-lilás da marca; as Práticas Integrativas, com o ameixa e um fundo pérola
   mais quente. Cada página de frente tem a faixa fina sob o topo dizendo de que frente ela é.
   ════════════════════════════════════════════════════════════ */
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* frente de Práticas Integrativas: a paleta muda na página inteira */
[data-area="integrativas"] {
  --azul-lilas: #6E5584; --azul-lilas-escuro: #57426A;
  --nevoa: #F8F4F3; --lilas-claro: #F1E8EC;
}

/* topo: o subtítulo global sob a assinatura (no lugar de "Psicóloga") */
.logo__textos { display: flex; flex-direction: column; gap: .3rem; }
.logo__sub { font: 500 .625rem/1.2 var(--texto); letter-spacing: .14em; text-transform: uppercase; color: var(--ameixa); white-space: nowrap; }
@media (max-width: 1180px) { .logo__sub { font-size: .5625rem; letter-spacing: .1em; } }
@media (max-width: 420px) { .logo__textos { display: none; } }

/* faixa da frente, sob o topo */
.faixa-area { position: relative; z-index: 2; text-align: center; font: 500 .75rem/1.3 var(--texto); letter-spacing: .14em; text-transform: uppercase; padding: .55rem var(--margem); }
.faixa-area--psicologia { background: #5C659E; color: #fff; }
.faixa-area--integrativas { background: #6E5584; color: #fff; }
@media (max-width: 640px) { .faixa-area { font-size: .625rem; letter-spacing: .08em; } }

.abertura__sobrelinha { margin-top: 1.25rem; }

/* botão de contorno (a segunda frente, na abertura) */
.botao--contorno { background: transparent; color: #6E5584; box-shadow: inset 0 0 0 1.5px #6E5584; }
.botao--contorno:hover { background: #F1E8EC; }

/* cartões das duas frentes */
.areas-a { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); }
.area-a { display: flex; flex-direction: column; gap: .9rem; padding: clamp(1.6rem, 3.5vw, 2.4rem); border-radius: 26px; background: var(--papel);
  border-top: 5px solid #5C659E; box-shadow: 0 26px 55px -38px rgba(58, 49, 80, .55); }
.area-a h2, .area-a h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.12; }
.area-a__descricao { color: var(--tinta-suave); }
.area-a__credencial { font-size: .875rem; font-weight: 500; color: #4D5690; }
.area-a__acoes { margin-top: auto; padding-top: .6rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.4rem; }
.area-a--psicologia .botao { background: #5C659E; }
.area-a--psicologia .botao:hover { background: #4D5690; }
.area-a--psicologia .link-seta { color: #5C659E; }
.area-a--integrativas { background: #FBF7F6; border-top-color: #6E5584; }
.area-a--integrativas .area-a__credencial { color: #6E5584; }
.area-a--integrativas .botao { background: #6E5584; }
.area-a--integrativas .botao:hover { background: #57426A; }
.area-a--integrativas .link-seta { color: #6E5584; }
.area-a .sobrelinha { margin-bottom: -.3rem; }
@media (max-width: 820px) {
  .areas-a { grid-template-columns: 1fr; }
  .area-a__acoes { flex-direction: column; align-items: stretch; }
  .area-a__acoes .link-seta { justify-content: center; }
}
.nota-etica-a { max-width: none; }

/* início: cada frente numa zona própria */
.zona-a--integrativas { margin-top: var(--entre-secoes); padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem); border-radius: 30px; background: #F6EFEE; }
.zona-a--integrativas h2 em, .zona-a--integrativas .sobrelinha { color: #6E5584; }
.zona-a--integrativas .botao { background: #6E5584; }
.zona-a--integrativas .botao:hover { background: #57426A; }
.zona-a--integrativas .link-seta { color: #6E5584; }

/* faixa de agendar de cada frente */
.agendar--integrativas { background: #6E5584; }
.agendar--integrativas .botao--claro { color: #57426A; }

/* Contato sem formulário: "Fale direto" em duas colunas */
.contato-a--direto { align-items: start; }
.contato-a--direto .secao__cabeca p:not(.sobrelinha) { margin-top: .8rem; color: var(--tinta-suave); }

/* rodapé: marca + três colunas (Psicologia · Institucional e ética · Práticas Integrativas) */
.rodape__dentro { grid-template-columns: 1.15fr 1fr 1fr 1fr; }
.rodape__sub { font: 500 .6875rem/1.4 var(--texto); letter-spacing: .14em; text-transform: uppercase; color: #CFC6DC; }
.rodape__contatos { margin-top: .4rem; }
.rodape__registro { color: #fff; line-height: 1.6; margin-bottom: .9rem; }
.rodape__coluna--integrativas .rodape__registro { color: #E6E1EE; }
@media (max-width: 1080px) { .rodape__dentro { grid-template-columns: 1fr 1fr; } }
@media (max-width: 820px) { .rodape__dentro { grid-template-columns: 1fr; } }

/* 18/09, melhorias: nota ética curta (Início e Sobre), "sem compromisso" junto dos botões de WhatsApp,
   subtítulo do logo legível, e o bloco das Práticas Integrativas no início sem o vão entre os parágrafos */
.areas-a__nota { margin-top: 1.1rem; text-align: center; }
.nota-etica-curta-a { margin-top: 1rem; font-size: .9375rem; color: var(--tinta-suave); text-align: center; }
.logo__sub { font-size: .6875rem; }
@media (max-width: 1180px) { .logo__sub { font-size: .625rem; letter-spacing: .08em; } }
.zona-a--integrativas .secao__cabeca { margin-bottom: 1rem; }
.rodape__coluna a { text-wrap: balance; }
/* o menu nunca quebra em duas linhas; o subtítulo do logo volta ao tamanho que cabe ao lado do menu */
.nav a { white-space: nowrap; }
@media (min-width: 1181px) { .logo__sub { font-size: .625rem; letter-spacing: .1em; } .nav a { padding: 0 .6rem; } }
.areas-a__nota, .nota-etica-curta-a { max-width: none; margin-left: auto; margin-right: auto; }

/* 18/09, revisão: "Para saber mais" com descrição em texto normal; páginas só de texto (Termos, Privacidade) mais compactas */
.saber-a li { display: grid; grid-template-columns: minmax(0, 12rem) 1fr; gap: .25rem 1.5rem; align-items: baseline; }
.saber-a span { font: 400 .9375rem/1.5 var(--texto); letter-spacing: 0; text-transform: none; color: var(--tinta-suave); }
@media (max-width: 560px) { .saber-a li { grid-template-columns: 1fr; } }
.secao--texto { padding-top: clamp(2.5rem, 5vw, 4rem); }
.secao--texto::before { top: calc(clamp(2.5rem, 5vw, 4rem) + .2rem); }   /* o nó acompanha o espaçamento menor */
.secao--texto:last-child { padding-bottom: clamp(3rem, 6vw, 5rem); }
.secao--texto h2 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); }

/* ════════════════════════════════════════════════════════════
   CARTÕES COM A FOTO DELA (18/09, ideia do Alex): a foto sai do cartão pelo alto, num canto, alternando o lado.
   Duas texturas: --luz (cartão claro, luzes que respiram, grão) e --fio (cartão na cor da área, fio do infinito
   com uma luz percorrendo o laço). Com "reduzir movimento", nada se mexe.
   ════════════════════════════════════════════════════════════ */
/* um embaixo do outro, largos, como no desenho do Alex: a foto alterna o lado e sai pelo alto do cartão */
.areas-a--foto { grid-template-columns: 1fr; gap: 9.5rem; margin-top: 9rem; }   /* a cabeça sobe ~7 rem acima do cartão */
.area-a--foto { position: relative; isolation: isolate; overflow: visible; min-height: 17rem; border-top: 0; padding: clamp(1.8rem, 3vw, 2.5rem); justify-content: center; }
.area-a--foto-dir { padding-right: min(44%, 30rem); }
.area-a--foto-esq { padding-left: min(44%, 30rem); }
.area-a--foto .area-a__descricao { max-width: 32em; }
.area-a__fundo { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; }
.area-a__conteudo { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .9rem; }
.area-a__conteudo .area-a__acoes { margin-top: .4rem; }
.area-a__foto { position: absolute; bottom: 0; margin: 0; width: min(40%, 27rem); z-index: 1;
  filter: drop-shadow(0 18px 24px rgba(58, 49, 80, .28)); }
.area-a--foto-dir .area-a__foto { right: 0; clip-path: inset(-10rem 0 0 0 round 0 0 26px 0); }
.area-a--foto-esq .area-a__foto { left: 0; clip-path: inset(-10rem 0 0 0 round 0 0 0 26px); }
.area-a__foto img { display: block; width: 100%; height: auto; }
.area-a__grao { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .16; mix-blend-mode: overlay; pointer-events: none; }

/* versão LUZ: claro, com duas luzes que respiram */
.area-a--luz { background: #E9E7F4; }
.area-a--luz.area-a--integrativas { background: #EFE4EA; }
.area-a__brilho { position: absolute; border-radius: 50%; filter: blur(28px); opacity: .9; }
.area-a__brilho--1 { width: 70%; aspect-ratio: 1; left: -18%; top: -35%; background: radial-gradient(closest-side, #fff, rgba(255, 255, 255, 0)); }
.area-a__brilho--2 { width: 60%; aspect-ratio: 1; right: -12%; bottom: -30%; background: radial-gradient(closest-side, rgba(92, 101, 158, .38), rgba(92, 101, 158, 0)); }
.area-a--integrativas .area-a__brilho--2 { background: radial-gradient(closest-side, rgba(110, 85, 132, .40), rgba(110, 85, 132, 0)); }
.area-a--foto-esq .area-a__brilho--1 { left: auto; right: -18%; }
.area-a--foto-esq .area-a__brilho--2 { right: auto; left: -12%; }
@media (prefers-reduced-motion: no-preference) {
  .area-a__brilho--1 { animation: respira-1 12s ease-in-out infinite alternate; }
  .area-a__brilho--2 { animation: respira-2 15s ease-in-out infinite alternate; }
  @keyframes respira-1 { to { transform: translate(10%, 14%) scale(1.12); } }
  @keyframes respira-2 { to { transform: translate(-12%, -10%) scale(1.18); opacity: .7; } }
  .area-a--foto { transition: transform .3s var(--curva), box-shadow .3s var(--curva); }
  .area-a--foto:hover { transform: translateY(-4px); box-shadow: 0 34px 60px -38px rgba(58, 49, 80, .7); }
}

/* versão FIO: cartão na cor da área, texto claro, o laço do infinito e uma luz percorrendo o fio */
.area-a--fio { color: #fff; background: linear-gradient(135deg, #4D5690, #6B74B0); }
.area-a--fio.area-a--integrativas { background: linear-gradient(135deg, #57426A, #7E6395); }
.area-a--fio h2, .area-a--fio h3 { color: #fff; }
.area-a--fio .area-a__descricao { color: rgba(255, 255, 255, .82); }
.area-a--fio .area-a__credencial { color: #fff; opacity: .9; }
.area-a--fio .botao { background: #fff; color: #4D5690; }
.area-a--fio.area-a--integrativas .botao { color: #57426A; }
.area-a--fio .botao:hover { background: var(--lilas-claro); }
.area-a--fio .link-seta { color: #fff; }
.area-a__fio { position: absolute; left: -30%; top: -10%; width: 130%; height: 120%; fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: .5; overflow: visible; }
.area-a--foto-esq .area-a__fio { left: auto; right: -30%; }
.area-a__luz { fill: #fff; filter: drop-shadow(0 0 3px #fff); }
@media (prefers-reduced-motion: reduce) { .area-a__luz { display: none; } }
.area-a--fio .area-a__grao { opacity: .22; }

@media (max-width: 820px) {
  .areas-a--foto { gap: 2rem; margin-top: 3.5rem; }
  .area-a--foto, .area-a--foto-dir, .area-a--foto-esq { padding: 1.5rem; padding-bottom: 0; min-height: 0; }
  .area-a__conteudo .area-a__acoes { align-items: stretch; }
  .area-a__foto { position: static; width: 64%; max-width: 280px; margin: .5rem 0 0 auto; clip-path: none; filter: none; }
  .area-a--foto-esq .area-a__foto { margin: .5rem auto 0 0; }
  .area-a__foto img { border-bottom-right-radius: 26px; }
  .area-a--foto-esq .area-a__foto img { border-bottom-right-radius: 0; border-bottom-left-radius: 26px; }
}

/* versão TEXTURA: as artes do Alex (lilás com folhas e fio dourado; verde-sálvia para as Práticas Integrativas),
   com as luzes da versão 1 por cima, bem suaves, e o botão branco sobre o lilás */
.area-a--textura { background: #A890AE; }
.area-a--textura.area-a--integrativas { background: #B9B49C; }
.area-a__textura { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.area-a--textura .area-a__brilho { opacity: .55; mix-blend-mode: soft-light; }
.area-a--textura .area-a__brilho--2 { background: radial-gradient(closest-side, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)); }
.area-a--textura .area-a__credencial { color: var(--tinta); opacity: .85; }
.area-a--textura.area-a--psicologia .botao { background: #fff; color: #4D5690; }
.area-a--textura.area-a--psicologia .botao:hover { background: var(--lilas-claro); }
.area-a--textura.area-a--psicologia .link-seta { color: #3A3150; }
.area-a--textura.area-a--integrativas .link-seta { color: #57426A; }
@media (max-width: 820px) { .area-a__textura { object-position: 50% 50%; } }

/* No celular (pedido do Alex, 18/09): sem a foto e sem a textura; o cartão fica claro, com as luzes suaves da versão 1 */
@media (max-width: 820px) {
  .area-a--textura .area-a__foto, .area-a__textura { display: none; }
  .area-a--textura, .area-a--textura.area-a--foto { background: #E9E7F4; padding: 1.6rem; }
  .area-a--textura.area-a--integrativas { background: #EFE4EA; }
  .area-a--textura .area-a__brilho { opacity: .9; mix-blend-mode: normal; }
  .area-a--textura .area-a__brilho--2 { background: radial-gradient(closest-side, rgba(92, 101, 158, .38), rgba(92, 101, 158, 0)); }
  .area-a--textura.area-a--integrativas .area-a__brilho--2 { background: radial-gradient(closest-side, rgba(110, 85, 132, .40), rgba(110, 85, 132, 0)); }
  .area-a--textura .area-a__credencial { color: #4D5690; opacity: 1; }
  .area-a--textura.area-a--integrativas .area-a__credencial { color: #6E5584; }
  .area-a--textura.area-a--psicologia .botao { background: #5C659E; color: #fff; }
  .area-a--textura.area-a--psicologia .botao:hover { background: #4D5690; }
  .area-a--textura.area-a--psicologia .link-seta { color: #5C659E; }
  .area-a--textura.area-a--integrativas .link-seta { color: #6E5584; }
}

/* ── vídeo dentro da moldura de celular (18/09, ideia do Alex) ──────────
   Só no computador e no tablet. A tela da moldura ocupa 86,14% × 93,74% da imagem, a partir de 6,93% / 3,10%,
   com cantos de raio ~8% da largura da tela (medido na imagem). O vídeo 9:16 é um pouco mais largo que a tela:
   object-fit cover corta uns 15% nas laterais, e o rosto fica no centro. */
.video-a__aro { display: none; }
@media (min-width: 821px) {
  .video-a__moldura--celular { display: block; width: min(100%, 300px); aspect-ratio: 640 / 1278; margin: 0 auto;
    filter: drop-shadow(0 30px 40px rgba(58, 49, 80, .32)); }
  .video-a__moldura--celular video, .video-a__moldura--celular .video-a__play {
    position: absolute; left: 6.93%; top: 3.10%; width: 86.14%; height: 93.74%; max-width: none; max-height: none;
    border-radius: 8.1% / 3.7%; }
  .video-a__moldura--celular video { object-fit: cover; box-shadow: none; z-index: 1; }
  .video-a__moldura--celular .video-a__aro { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
  .video-a__moldura--celular .video-a__play { z-index: 3; padding-bottom: 4.2rem; }   /* sem inset: auto, que jogava o botão para a borda esquerda */
}