/* Sobre (page-sobre.php). Composição da página; componentes globais em style.css, cores e tipos em tokens.css.
   Mesma linguagem da home (prototype/home.css): blocos de cor chapada, meias-luas e quartos de círculo, traço fino.
   Na abertura, a meia-lua lilás fica à direita da foto, espelhando a da home. */

/* ---------- 1. abertura ---------- */
.m-sobre-hero { position: relative; overflow: hidden; background: var(--cor-off-white-1); color: var(--cor-preto); }
.m-sobre-hero::before { /* quarto de círculo salmão nascendo do canto superior esquerdo */
	content: ""; position: absolute; left: 0; top: 0; width: 200px; height: 200px;
	background: var(--cor-composicao); border-radius: 0 0 200px 0;
}
.m-sobre-hero .m-wrap {
	position: relative; z-index: 1; display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: center;
	padding-block: 88px 96px;
}
.m-sobre-hero__id {
	margin: 0 0 16px; font-size: var(--tipo-legenda-tamanho); line-height: var(--tipo-legenda-entrelinha);
	font-weight: var(--tipo-chamada-peso); color: var(--cor-contraste);
}
.m-sobre-hero__nome {
	margin: 0; color: var(--cor-contraste); font-weight: var(--tipo-titulo-peso); line-height: 1.02;
	font-size: clamp(calc(var(--tipo-titulo-tamanho) * 1.25), 5vw, calc(var(--tipo-display-tamanho) * 1.375));
}
.m-sobre-hero__lead { /* duas frases curtas em estilo subtítulo: nada de bloco longo antes de começar a ler */
	margin: 24px 0 0; max-width: 34ch; font-size: var(--tipo-subtitulo-tamanho); line-height: 1.36;
	font-weight: var(--tipo-subtitulo-peso); color: var(--cor-contraste); text-align: left;
}
.m-sobre-hero__ctas { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }
.gpc a.m-sobre-hero__doc { color: var(--cor-contraste); }
.m-sobre-hero__arte { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 16px; }
.m-sobre-hero__foto { position: relative; flex: none; width: 340px; max-width: 100%; aspect-ratio: 900 / 1099; margin: 0; background: var(--cor-off-white-2); }
.m-sobre-hero__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.m-sobre-hero__arco { /* o traço do símbolo emoldurando o rosto, em principal fino (brand book, Grafismos) */
	position: absolute; inset: 0; width: 100%; height: 100%;
	stroke: var(--cor-principal); stroke-width: 1.5; vector-effect: non-scaling-stroke;
}
.m-sobre-hero__lua { flex: none; width: 120px; height: 240px; border-radius: 240px 0 0 240px; background: var(--cor-principal); margin-bottom: 56px; }

/* ---------- 2. como é a consulta ---------- */
.m-sobre-consulta .m-wrap { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; }
.m-sobre-consulta .m-prosa, .m-sobre-trabalho .m-prosa { max-width: 36em; }
.m-sobre-consulta::after { /* meia-lua contraste nascendo da borda inferior */
	content: ""; position: absolute; left: 8%; bottom: 0; width: 160px; height: 80px;
	background: var(--cor-contraste); border-radius: 80px 80px 0 0;
}

/* ---------- 3. formação ---------- */
.m-sobre-formacao .m-wrap { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; }
.m-sobre-formacao p { margin: 18px 0 0; max-width: 26em; color: var(--cor-off-white-1); }
.m-sobre-formacao__lista { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--cor-off-white-1); }
.m-sobre-formacao__lista li {
	display: grid; grid-template-columns: 12px 1fr; gap: 20px; align-items: baseline;
	padding: 22px 0; border-bottom: 1px solid var(--cor-off-white-1);
	font-size: clamp(var(--tipo-corpo-tamanho), 1.7vw, 22px); line-height: 1.4; color: var(--cor-branco);
}
.m-sobre-formacao__lista li::before { /* marcador: meia-lua lilás */
	content: ""; width: 12px; height: 24px; background: var(--cor-principal); border-radius: 0 24px 24px 0; transform: translateY(4px);
}
.m-sobre-formacao::after { /* círculo lilás cortado pela borda direita */
	content: ""; position: absolute; right: -150px; bottom: -150px; width: 300px; height: 300px;
	border-radius: 50%; background: var(--cor-principal); opacity: .9;
}

/* ---------- 3. como eu trabalho ---------- */
.m-sobre-trabalho .m-wrap { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; }
.m-sobre-trabalho__lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.m-sobre-trabalho__lista li { display: flex; align-items: center; gap: 16px; text-align: left; }
.m-sobre-trabalho__lista li > span { min-width: 0; } /* o texto é um item só, ao lado do marcador */
.m-sobre-trabalho__lista li::before { /* marcador: meia-lua lilás, centralizada na linha */
	content: ""; flex: none; width: 12px; height: 24px; background: var(--cor-principal); border-radius: 0 24px 24px 0;
}
.m-sobre-trabalho::before { /* quarto de círculo apoio no canto superior direito */
	content: ""; position: absolute; right: 0; top: 0; width: 180px; height: 180px;
	background: var(--cor-apoio-1); border-radius: 0 0 0 180px;
}

/* ---------- 5. onde atendo: um bloco só, três cartões iguais em fundo neutro ----------
   Revisão do médico (2026-10-10): mais sóbrio e com o espaço bem distribuído. Mesma linguagem do "Onde a consulta
   acontece" da home: cartão off-white com fio azul-marinho no topo e um ícone pequeno em lilás. */
.m-sobre-locais .m-titulo { margin: 0; }
.m-sobre-locais__lista { margin: 32px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.m-sobre-local {
	display: flex; flex-direction: column; gap: 20px; padding: 32px 28px 28px;
	background: var(--cor-off-white-1); color: var(--cor-preto); border-top: 3px solid var(--cor-contraste);
}
.m-sobre-local::before { content: ""; display: block; width: 32px; height: 32px; background: var(--cor-principal); }
.m-sobre-local--online::before { border-radius: 50%; }
.m-sobre-local--bh::before { border-radius: 32px 0 0 0; }
.m-sobre-local--carmo::before { width: 16px; border-radius: 0 32px 32px 0; }
.m-sobre-local p { margin: 0; flex: 1; text-align: left; }
.m-sobre-local strong { color: var(--cor-contraste); }
.gpc a.m-sobre-local__link { align-self: flex-start; color: var(--cor-contraste); font-weight: var(--tipo-chamada-peso); font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }
.gpc a.m-sobre-local__link:hover { text-decoration-thickness: 2px; }
.m-sobre-locais__nota { margin: 28px 0 0; max-width: 40em; }

/* ---------- 6. faixa final: lilás, texto contraste ---------- */
.m-sobre-final .m-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; }
.m-sobre-final .m-titulo { color: var(--cor-contraste); }
.m-sobre-final p { margin: 14px 0 0; max-width: 34em; }
.m-sobre-final::after { /* círculo off-white cortado pela borda direita */
	content: ""; position: absolute; right: -180px; top: 50%; width: 360px; height: 360px; transform: translateY(-50%);
	background: var(--cor-off-white-1); border-radius: 50%; z-index: 0;
}

/* =================== larguras menores =================== */
@media (max-width: 1024px) {
	.m-sobre-hero .m-wrap, .m-sobre-consulta .m-wrap, .m-sobre-formacao .m-wrap, .m-sobre-trabalho .m-wrap { grid-template-columns: 1fr; gap: 36px; }
	.m-sobre-hero__arte { order: -1; }
	.m-sobre-locais__lista { grid-template-columns: 1fr; gap: 16px; }
	.m-sobre-final::after { display: none; }
}

@media (max-width: 640px) {
	.m-sobre-hero::before { width: 110px; height: 110px; border-radius: 0 0 110px 0; }
	.m-sobre-hero .m-wrap { padding-block: 40px 64px; }
	.m-sobre-hero__foto { width: 230px; }
	.m-sobre-hero__lua { width: 70px; height: 140px; border-radius: 140px 0 0 140px; margin-bottom: 28px; }
	.m-sobre-consulta::after { width: 110px; height: 55px; border-radius: 55px 55px 0 0; }
	.m-sobre-formacao::after { width: 180px; height: 180px; right: -90px; bottom: -90px; }
	.m-sobre-trabalho::before { width: 96px; height: 96px; border-radius: 0 0 0 96px; }
	.m-sobre-hero__lead { font-size: 20px; }
	.m-sobre-local { padding: 26px 22px 24px; gap: 16px; }
}

/* Revisão do médico (2026-10-10), mesma observação da página online: respiro entre seções menor (112px de cada lado
   ficava longe demais entre o texto de uma seção e o título da seguinte). */
.m-sobre > .m-secao { padding-block: 80px; }
@media (max-width: 640px) { .m-sobre > .m-secao { padding-block: 56px; } }