/* ============================================================
   Tema Giovana Ripoli — abaixo da dobra (carregado adiado)
   rev. 2: página clara, cartões brancos com sombra suave e
   numeração grande; a cor da marca em rótulos e detalhes.
   ============================================================ */

/* ---- Seções ------------------------------------------------ */
.secao { padding: 48px 0; }
.secao__rotulo {
	font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
	color: var(--taupe); font-weight: 600; margin-bottom: 10px;
}
.secao h2 {
	font-size: clamp(1.7rem, 5.4vw, 2.5rem);
	letter-spacing: -.012em;
	margin-bottom: 18px;
}
.secao h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 8px; }
.secao p + p { margin-top: 14px; }
.prosa { max-width: 66ch; }

/* observação de apoio, meio tom abaixo do texto corrido */
.nota, .contato__nota { font-size: .9rem; color: var(--taupe); }
.nota { margin-top: 14px; }

/* lista de itens conferidos — "para quem serve", "como são as sessões" */
.lista-marcada { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
/* marcador posicionado, não coluna de grid: assim um item pode misturar
   link e texto sem que o texto solto vire outro item e quebre a linha */
.lista-marcada li {
	position: relative; padding-left: 29px;
	font-size: .98rem;
}
.lista-marcada li::before {
	content: '✓';
	position: absolute; left: 0; top: 0;
	color: var(--taupe); font-weight: 700;
}
/* ritmo visual: seções alternam o fundo claro com a faixa quente */
.secao--faixa { background: var(--faixa); border-block: 1px solid var(--borda); }
@media (min-width: 900px) { .secao { padding: 72px 0; } }

/* ---- Quem é ------------------------------------------------ */
.quem { display: flex; flex-direction: column; gap: 26px; }
.quem__foto {
	display: block;
	width: min(64vw, 300px);
	border-radius: 16px; overflow: hidden;
	box-shadow: var(--sombra);
}
.quem__assinatura {
	display: inline-block; margin-top: 22px;
	font-family: 'Fraunces', Georgia, serif; font-style: italic;
	font-size: 1.15rem; color: var(--taupe);
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 1px;
}
@media (min-width: 900px) {
	.quem { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 64px; align-items: center; }
	.quem__foto { width: 100%; }
}

/* ---- Especialidades: cartões numerados --------------------- */
.cards { display: grid; gap: 18px; margin-top: 30px; counter-reset: card; }
.card {
	background: var(--superficie);
	border: 1px solid var(--borda);
	border-radius: 16px;
	padding: 28px 24px;
	display: flex; flex-direction: column; gap: 10px;
	box-shadow: var(--sombra);
	counter-increment: card;
}
.card::before {
	content: '0' counter(card);
	font-family: 'Fraunces', Georgia, serif;
	font-size: 2rem; line-height: 1;
	color: var(--meio);
}
.card h3 { font-size: 1.18rem; }
.card p { font-size: .98rem; }
.card a { font-weight: 600; text-underline-offset: 3px; color: var(--taupe); }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

/* ---- Avaliação neuropsicológica ---------------------------- */
.avaliacao__topo { display: grid; gap: 34px; }
@media (min-width: 900px) {
	.avaliacao__topo { grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: start; }
}

/* o painel do processo ecoa o bloco do hero */
.processo {
	background: var(--hero-bg); color: #fff;
	border-radius: 20px; padding: 30px 28px;
	box-shadow: var(--sombra);
}
.processo h3 {
	font-family: 'Archivo', sans-serif; font-size: .8rem;
	letter-spacing: .16em; text-transform: uppercase;
	color: rgba(255, 255, 255, .75); margin-bottom: 4px;
}
.processo ol { list-style: none; counter-reset: etapa; margin: 16px 0 0; padding: 0; display: grid; gap: 18px; }
.processo li { counter-increment: etapa; display: grid; grid-template-columns: 36px 1fr; gap: 14px; font-size: .96rem; align-items: start; }
.processo li::before {
	content: counter(etapa);
	display: flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .35);
	font-family: 'Fraunces', Georgia, serif; font-size: 1.05rem;
}
.processo li strong { display: block; margin-bottom: 2px; }

.blocos-duplos { display: grid; gap: 18px; margin-top: 34px; }
.bloco {
	background: var(--superficie);
	border: 1px solid var(--borda);
	border-radius: 16px;
	padding: 26px 24px;
	box-shadow: var(--sombra);
}
.bloco h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 1.3rem; }
.bloco__icone {
	width: 46px; height: 46px; border-radius: 13px;
	background: var(--faixa);
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 14px;
}
.bloco__icone svg { width: 25px; height: 25px; stroke: var(--taupe); }
@media (min-width: 900px) { .blocos-duplos { grid-template-columns: 1fr 1fr; gap: 24px; } }
.secao__cta { margin-top: 34px; }

/* ---- Psicopedagogia: texto + ilustração --------------------- */
.psico { display: grid; gap: 34px; }
.psico__arte { max-width: 400px; margin-inline: auto; width: 100%; }
.psico__arte svg { width: 100%; height: auto; display: block; }
@media (min-width: 900px) {
	.psico { grid-template-columns: 1fr minmax(300px, 420px); gap: 72px; align-items: center; }
	.psico__arte { margin-inline: 0; }
}

/* passos numerados (primeira sessão) */
.como-funciona { margin-top: 38px; }
.bloco .como-funciona { margin-top: 16px; }   /* dentro do card já há respiro */
.como-funciona ol {
	list-style: none; counter-reset: passo;
	margin: 16px 0 0; padding: 0;
	display: grid; gap: 14px; max-width: 640px;
}
.como-funciona li {
	counter-increment: passo;
	display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start;
}
.como-funciona li::before {
	content: counter(passo);
	display: flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 50%;
	background: var(--papel); color: var(--tinta);
	font-family: 'Fraunces', Georgia, serif; font-size: 1.15rem;
}

/* ---- O espaço ---------------------------------------------- */
.espaco__fotos { margin-top: 30px; }
.espaco__fotos a { display: block; }
.espaco__fotos img { border-radius: 16px; width: 100%; box-shadow: var(--sombra); }
.espaco__legenda { margin-top: 14px; font-size: .9rem; color: var(--taupe); }
/* antes do carrossel iniciar (ou sem JS), as fotos empilham com respiro */
.espaco__fotos:not(.slick-initialized) { display: grid; gap: 18px; }
@media (min-width: 600px) {
	.espaco__fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
}

/* pontos do carrossel (slick) no celular — sem rotação automática */
.slick-dots { display: flex; justify-content: center; gap: 10px; list-style: none; margin: 14px 0 0; padding: 0; }
.slick-dots button {
	width: 12px; height: 12px; padding: 0;
	border: 1px solid var(--taupe); border-radius: 50%;
	background: none; text-indent: -999px; overflow: hidden; cursor: pointer;
}
.slick-dots .slick-active button { background: var(--taupe); }
.espaco__fotos .slick-list { margin-inline: -9px; }
.espaco__fotos .slick-slide { padding-inline: 9px; }   /* respiro entre as fotos */

/* ---- FAQ ---------------------------------------------------- */
.faq { max-width: 780px; margin-top: 10px; }
.faq details {
	background: var(--superficie);
	border: 1px solid var(--borda);
	border-radius: 12px;
	margin-bottom: 10px;
	box-shadow: var(--sombra);
}
.faq summary {
	list-style: none;
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 17px 20px; min-height: 44px;
	font-weight: 600; font-size: 1.02rem; cursor: pointer;
	border-radius: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: '+';
	font-family: 'Fraunces', Georgia, serif; font-size: 1.5rem; line-height: 1;
	color: var(--taupe); flex: none;
}
.faq details[open] summary::after { content: '\2212'; }
.faq .faq__resposta { padding: 0 20px 20px; max-width: 62ch; }
.faq__cta { margin-top: 34px; }

/* ---- Página de documento (privacidade) --------------------- */
.doc { padding-top: 116px; }              /* o cabeçalho é sobreposto */
.doc h1 {
	font-size: clamp(1.9rem, 5.4vw, 2.6rem);
	letter-spacing: -.012em; margin-bottom: 10px;
}
.doc__data { font-size: .9rem; color: var(--taupe); margin-bottom: 30px; }
.doc h2 {
	font-size: 1.35rem; margin: 38px 0 12px;
	padding-top: 26px; border-top: 1px solid var(--borda);
}
.doc .prosa > p + p, .doc .prosa > ul + p { margin-top: 14px; }
.doc .lista-marcada { margin-bottom: 4px; }
.doc a { text-underline-offset: 3px; }
.doc__voltar { margin-top: 40px; font-weight: 600; }
.doc__voltar a { color: var(--taupe); text-underline-offset: 3px; }
@media (min-width: 900px) { .doc { padding-top: 150px; } }

/* ---- Aviso de crise ----------------------------------------
   Não é conversão: é o que um site de saúde mental deve dizer a
   quem chega em risco. Discreto, mas sempre visível.            */
.aviso-crise {
	background: var(--superficie);
	border: 1px solid var(--borda);
	border-left: 4px solid var(--clay);
	border-radius: 12px;
	padding: 20px 22px;
	max-width: 780px;
	margin-top: 34px;
	font-size: .95rem;
}
.aviso-crise strong { display: block; margin-bottom: 4px; }
.aviso-crise a { font-weight: 600; text-underline-offset: 3px; }

/* ---- Contato ------------------------------------------------ */
.contato__grade { display: grid; gap: 26px; margin-top: 30px; }
.contato__canal {
	background: var(--superficie);
	border: 1px solid var(--borda);
	border-radius: 16px;
	padding: 24px;
	box-shadow: var(--sombra);
}
.contato__canal h3 { font-family: 'Archivo', sans-serif; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe); }
.contato__canal a { text-underline-offset: 3px; }
.contato__nota { margin-top: 10px; font-size: .9rem; color: var(--taupe); }

/* o card de agendamento é o destaque da seção */
.contato__canal--destaque {
	background: var(--hero-bg); color: #fff;
	border-color: transparent;
}
.contato__canal--destaque h3 { color: rgba(255, 255, 255, .75); }
.contato__opcoes { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.contato__opcoes .cta-whatsapp { width: 100%; min-height: 48px; padding: 12px 22px; }

.contato__mapa { margin-top: 26px; }
.contato__mapa iframe {
	display: block; width: 100%; height: 320px; border: 0;
	border-radius: 16px; box-shadow: var(--sombra);
}
.contato__rota { margin-top: 14px; }
.contato__rota a { font-weight: 600; color: var(--taupe); text-underline-offset: 3px; }
@media (min-width: 900px) {
	.contato__grade { grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
	.contato__mapa iframe { height: 380px; }
}

/* ---- Rodapé ------------------------------------------------- */
.rodape {
	margin-top: 64px;
	background: #3a352d; color: #dfd3c7;   /* a faixa escura é fixa nos dois temas */
	padding: 52px 0 110px;                  /* respiro para a barra fixa de CTA     */
}
.rodape a { color: inherit; }

/* faixa do primeiro passo: chamada + botão */
.rodape__chamada {
	background: rgba(223, 211, 199, .08);
	border: 1px solid rgba(223, 211, 199, .22);
	border-radius: 20px;
	padding: 28px 26px;
	display: flex; flex-direction: column; gap: 20px;
	margin-bottom: 44px;
}
.rodape__chamada strong {
	font-family: 'Fraunces', Georgia, serif; font-weight: 500;
	font-size: 1.45rem; line-height: 1.2; display: block; margin-bottom: 6px;
	color: #fff;
}
.rodape__chamada p { font-size: .95rem; color: #bbb1a3; max-width: 44ch; }
.rodape__chamada .cta-whatsapp { flex: none; }
@media (min-width: 900px) {
	.rodape__chamada {
		flex-direction: row; align-items: center; justify-content: space-between;
		padding: 34px 40px; gap: 32px;
	}
}

.rodape__grade { display: grid; gap: 32px; }
.rodape__quem { max-width: 44ch; }
.rodape__logo { display: inline-block; margin-bottom: 14px; }
.rodape__logo img {
	width: auto; height: 70px;
	filter: brightness(0) invert(1);   /* o logo invertido sobre a faixa escura */
	opacity: .95;
}
.rodape__quem p { font-size: .95rem; }
.rodape h3 { font-family: 'Archivo', sans-serif; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; margin-bottom: 10px; color: #bbb1a3; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .95rem; }
.rodape__fim {
	margin-top: 42px; padding-top: 18px;
	border-top: 1px solid rgba(223, 211, 199, .25);
	font-size: .84rem; color: #bbb1a3;
	display: flex; flex-direction: column; gap: 6px;
}
@media (min-width: 900px) {
	.rodape { padding-bottom: 52px; }
	.rodape__grade { grid-template-columns: 1.6fr 1fr 1.2fr; gap: 40px; }
	.rodape__fim { flex-direction: row; justify-content: space-between; }
}