/* ─────────────────────────────────────────────────────────────────────
   Dra. Alda Libardi · site.css
   Depende de tokens.css. Nenhum valor fora dos tokens.
   ───────────────────────────────────────────────────────────────────── */

/* ── 1. Base ──────────────────────────────────────────────────────── */

body {
	background: var(--surface-page);
	color: var(--text-body);
	font-family: var(--font-sans);
	font-size: var(--text-body-lg);
	font-weight: var(--weight-regular);
	line-height: var(--leading-body);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* O body e flex column: sem min-width 0 os filhos crescem ate o conteudo
   mais largo que houver dentro, e a pagina inteira desloca no celular. */
.site-main, .cabecalho, .rodape { width: 100%; min-width: 0; }

.site-main { flex: 1 0 auto; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: var(--weight-display);
	text-transform: uppercase;
	letter-spacing: var(--track-display);
	line-height: var(--leading-display);
	color: var(--text-heading);
}

h1 { font-size: var(--text-display-1); }
h2 { font-size: var(--text-display-2); }
h3 { font-size: var(--text-display-3); }

p { margin: 0; }

a { color: var(--text-accent); text-decoration: none; transition: color var(--duration-fast) var(--ease); }
a:hover { color: var(--accent); }

::selection { background: var(--cobre-200); color: var(--oliva-900); }

:focus-visible {
	outline: 1px solid var(--accent);
	outline-offset: 0;
	box-shadow: 0 0 0 3px var(--focus-ring);
	border-radius: var(--radius-sm);
}

.leitor { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.pular-para-conteudo:focus {
	position: fixed; top: var(--space-4); left: var(--space-4); z-index: 200;
	width: auto; height: auto; clip-path: none;
	padding: var(--space-3) var(--space-4);
	background: var(--branco); border: 1px solid var(--accent);
}

/* ── 2. Estrutura ─────────────────────────────────────────────────── */

.container { width: 100%; margin-inline: auto; padding-inline: var(--gutter-page); }
.container--wide   { max-width: calc(var(--container-wide) + 2 * var(--gutter-page)); }
.container--text   { max-width: calc(var(--container-text) + 2 * var(--gutter-page)); }
.container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter-page)); }

.secao { padding-block: var(--space-24); position: relative; overflow: hidden; }
.secao--marfim  { background: var(--surface-page); }
.secao--branco  { background: var(--branco); }
.secao--oliva   { background: var(--surface-inverse); }
.secao--taupe   { background: var(--taupe-600); }
.secao--fio     { border-top: 1px solid var(--border-hairline); }
.secao--centro  { text-align: center; }

.secao--oliva, .secao--taupe { color: var(--text-on-inverse); }
.secao--oliva h1, .secao--oliva h2, .secao--oliva h3,
.secao--taupe h1, .secao--taupe h2, .secao--taupe h3 { color: var(--text-on-inverse); }
.secao--oliva .sobretitulo, .secao--taupe .sobretitulo { color: var(--cobre-300); }
.secao--oliva a, .secao--taupe a { color: var(--cobre-300); }
.secao--oliva a:hover, .secao--taupe a:hover { color: var(--cobre-200); }

/* O botao nao herda a cor de link da secao escura. `.secao--oliva a` tem
   especificidade 0,1,1 e vencia `.botao--inverse`, 0,1,0: o rotulo saia em
   rose sobre o marfim do proprio botao, 1,4:1 de contraste. Duas classes
   (0,2,0) devolvem a cor da variante. */
.secao--oliva .botao--inverse,
.secao--taupe .botao--inverse,
.secao--oliva .botao--inverse:hover,
.secao--taupe .botao--inverse:hover { color: var(--oliva-700); }

.secao--oliva .botao--primary,
.secao--taupe .botao--primary,
.secao--oliva .botao--primary:hover,
.secao--taupe .botao--primary:hover { color: var(--branco); }

.duas-colunas {
	display: grid;
	grid-template-columns: repeat(2, minmax(300px, 1fr));
	gap: var(--space-16);
	align-items: center;
}
.duas-colunas--topo { align-items: start; }

@media (max-width: 880px) {
	.duas-colunas { grid-template-columns: 1fr; gap: var(--space-12); }
}

.medida-52 { max-width: 52ch; }
.medida-54 { max-width: 54ch; }
.medida-56 { max-width: 56ch; }
.medida-60 { max-width: 60ch; }
.medida-66 { max-width: 66ch; }
.medida-46 { max-width: 46ch; }
.medida-26 { max-width: 26ch; }
.secao--centro .medida-52,
.secao--centro .medida-54,
.secao--centro .medida-56,
.secao--centro .medida-46 { margin-inline: auto; }

/* ── 3. Tipografia da marca ───────────────────────────────────────── */

.sobretitulo {
	font-family: var(--font-sans);
	font-weight: var(--weight-medium);
	font-size: var(--text-overline);
	text-transform: uppercase;
	letter-spacing: var(--track-overline);
	color: var(--text-muted);
	margin-bottom: var(--space-4);
}

/* Headline de topo.
   O token --text-hero e clamp(1.75rem, 3.4vw, 3rem) — 48px no desktop. Com o
   tracking de 0.18em que a Modny exige (8,6px por letra nesse tamanho), a
   headline da home ocupava SETE linhas e 363px de altura numa coluna de
   528px. Reduzido para 40px no topo da escala: cai para cinco linhas e 216px,
   40% menos altura, sem mexer no tracking, que e regra da marca.
   No celular o minimo e 26px, e nao 24px: os dois dao as mesmas cinco
   linhas, mas 26px mantem distancia do lead, que tem 20px. Acima de 26px
   (28px, o minimo original) a headline volta para seis linhas.
   O tokens.css nao foi alterado de proposito — ele e o arquivo canonico da
   agencia e um novo handoff sobrescreveria a mudanca. */
.titulo-hero { font-size: clamp(1.625rem, 2.8vw, 2.5rem); }
.titulo-secao { margin-bottom: var(--space-6); }
.titulo-card {
	font-family: var(--font-display);
	font-weight: var(--weight-display);
	font-size: var(--text-title);
	text-transform: uppercase;
	letter-spacing: var(--track-display);
	line-height: var(--leading-title);
	color: var(--text-heading);
}

.lead { font-size: var(--text-lead); line-height: 1.35; }
.texto-suave { color: var(--text-muted); }
.texto-acento { color: var(--text-accent); }
.texto-pequeno { font-size: var(--text-body-sm); }

.destaque-display {
	font-family: var(--font-display);
	font-weight: var(--weight-display);
	font-size: clamp(1.25rem, 1.8vw, 1.625rem);
	text-transform: uppercase;
	letter-spacing: var(--track-display);
	line-height: var(--leading-title);
	color: var(--text-accent);
}

.prosa > * + * { margin-top: var(--space-6); }
.prosa p { max-width: 66ch; }
.secao--centro .prosa p { margin-inline: auto; }

/* ── 4. Regua e monograma ─────────────────────────────────────────── */

.regua {
	display: block;
	width: 56px;
	height: 1px;
	background: var(--accent);
	margin-bottom: var(--space-5);
}
.secao--centro .regua { margin-inline: auto; }

.regua-ornamento {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	margin-bottom: var(--space-8);
}
.regua-ornamento__fio { flex: 1; height: 1px; background: var(--border-accent); }
.regua-ornamento__marca { height: 24px; width: auto; }

.monograma {
	position: absolute;
	height: auto;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}
.monograma--inferior-esquerda { bottom: -8%; left: -6%; }
.monograma--inferior-direita  { bottom: -8%; right: -6%; }
.monograma--superior-direita  { top: -8%; right: -6%; }
.monograma--superior-esquerda { top: -8%; left: -6%; }
.monograma--topo-centro       { top: -10%; left: 50%; transform: translateX(-50%); }

.secao > .container { position: relative; z-index: 1; }

/* ── 5. Botao ─────────────────────────────────────────────────────── */

.botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-sans);
	font-weight: var(--weight-semibold);
	font-size: var(--text-body-sm);
	text-transform: uppercase;
	letter-spacing: var(--track-label);
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	cursor: pointer;
	text-align: center;
	max-width: 100%;
	transition: background-color var(--duration-fast) var(--ease),
	            border-color var(--duration-fast) var(--ease),
	            color var(--duration-fast) var(--ease);
}

.botao--sm { height: var(--control-height-sm); padding-inline: var(--space-4); }
.botao--md { height: var(--control-height-md); padding-inline: var(--space-6); }
.botao--lg { height: var(--control-height-lg); padding-inline: var(--space-8); }

/* Só o botão do cabeçalho fica travado numa linha: é ele que a medição do
   menu leva em conta. Os demais podem quebrar, senão esticam o container
   inteiro no celular e o texto das seções sai cortado. */
.cabecalho__nav .botao { white-space: nowrap; }

/* No celular, rótulo longo quebra em duas linhas em vez de estourar. */
@media (max-width: 520px) {
	.botao {
		height: auto;
		min-height: var(--control-height-md);
		padding-block: var(--space-3);
		line-height: 1.3;
	}
	.botao--lg { min-height: var(--control-height-lg); }
}

.botao--primary { background: var(--accent); color: var(--branco); }
.botao--primary:hover { background: var(--accent-hover); color: var(--branco); }
.botao--primary:active { background: var(--accent-press); }

.botao--secondary { background: transparent; border-color: var(--border-hairline); color: var(--text-body); }
.botao--secondary:hover { border-color: var(--accent); color: var(--accent); }

.botao--ghost { background: transparent; color: var(--accent-hover); }
.botao--ghost:hover { background: var(--surface-accent); color: var(--accent-hover); }

.botao--inverse { background: var(--marfim-100); color: var(--oliva-700); }
.botao--inverse:hover { background: var(--marfim-50); color: var(--oliva-700); }

.botao:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); outline: none; }

/* Link secundario ao lado de um botao. */
.link-secundario {
	display: inline-block;
	font-size: var(--text-body-md);
	/* cobre-700, e nao o cobre-600 de --text-accent: o tokens.css define o 700
	   como "texto cobre em fundo claro". Em fundo marfim o 600 dava 2,8:1 e o
	   700 da 4,2:1. */
	color: var(--cobre-700);
}
/* Em rose, este link ficava com 2,2:1 no fundo taupe. Branco sobe para
   3,8:1 no taupe e 7,6:1 no oliva, e o sublinhado devolve o affordance que
   a cor sozinha fazia. */
.secao--oliva .link-secundario, .secao--taupe .link-secundario {
	color: var(--branco);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.secao--oliva .link-secundario:hover, .secao--taupe .link-secundario:hover { color: var(--cobre-200); }

.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); margin-top: var(--space-8); }
.secao--centro .acoes { justify-content: center; }

/* ── 6. Card ──────────────────────────────────────────────────────── */

.card {
	background: var(--surface-card);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-md);
}
.card--marfim { background: var(--surface-muted); }
.card--sm { padding: var(--space-4); }
.card--md { padding: var(--space-6); }
.card--lg { padding: var(--space-8); }

.grade-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--space-6);
}

.card__texto { margin-block: var(--space-4); color: var(--text-body); font-size: var(--text-body-md); }

.card__link {
	display: inline-block;
	font-size: var(--text-overline);
	font-weight: var(--weight-medium);
	text-transform: uppercase;
	letter-spacing: var(--track-overline);
	color: var(--text-accent);
}

/* ── 7. Etiqueta de categoria ─────────────────────────────────────── */

.etiqueta {
	display: inline-block;
	align-self: flex-start;
	background: var(--surface-accent);
	color: var(--cobre-700);
	font-family: var(--font-sans);
	font-weight: var(--weight-medium);
	font-size: var(--text-overline);
	text-transform: uppercase;
	letter-spacing: var(--track-overline);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
}
.etiqueta-envolucro { display: flex; }

/* ── 8. Aviso inline ──────────────────────────────────────────────── */

.aviso {
	border-radius: var(--radius-sm);
	padding: var(--space-4);
	border-top: 2px solid var(--taupe-600);
	background: var(--taupe-100);
}
.aviso--info    { background: var(--taupe-100); border-top-color: var(--taupe-600); }
.aviso--accent  { background: var(--cobre-100); border-top-color: var(--cobre-500); }
.aviso--warning { background: var(--status-warning-soft); border-top-color: var(--status-warning); }
.aviso--danger  { background: var(--status-danger-soft); border-top-color: var(--status-danger); }

.aviso__rotulo {
	font-size: var(--text-overline);
	font-weight: var(--weight-medium);
	text-transform: uppercase;
	letter-spacing: var(--track-overline);
	color: var(--text-muted);
	margin-bottom: var(--space-2);
}
.aviso__texto { font-size: var(--text-body-sm); line-height: var(--leading-body); color: var(--text-body); }

/* ── 9. Lista com fios ────────────────────────────────────────────── */

.lista-fios { list-style: none; margin: 0; padding: 0; }
.lista-fios > li {
	border-top: 1px solid var(--border-hairline);
	padding-block: var(--space-4);
	font-size: var(--text-body-md);
}
.lista-fios > li:last-child { border-bottom: 1px solid var(--border-hairline); }

.secao--oliva .lista-fios > li, .secao--taupe .lista-fios > li { border-color: var(--border-inverse); }

/* Lista de definicao: rotulo tracked, valor em corpo. */
.definicoes { margin: 0; }
.definicoes > div {
	border-top: 1px solid var(--border-hairline);
	padding-block: var(--space-4);
}
.definicoes dt {
	font-size: var(--text-overline);
	font-weight: var(--weight-medium);
	text-transform: uppercase;
	letter-spacing: var(--track-overline);
	color: var(--text-muted);
	margin-bottom: var(--space-2);
}
.definicoes dd { margin: 0; font-size: var(--text-body-md); color: var(--text-body); }

/* Lista numerada da trajetoria. */
.trajetoria { list-style: none; margin: 0; padding: 0; }
.trajetoria > li {
	display: grid;
	grid-template-columns: 28px 1fr;
	gap: var(--space-6);
	border-top: 1px solid var(--border-hairline);
	padding-block: var(--space-5);
	font-size: var(--text-body-md);
}
.trajetoria__numero {
	font-family: var(--font-display);
	font-weight: var(--weight-display);
	letter-spacing: var(--track-display);
	color: var(--accent);
}

/* ── 10. Blocos abertos por regua ─────────────────────────────────── */

.blocos-regua {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-8);
	margin-top: var(--space-12);
}
.blocos-regua > * {
	flex: 0 1 calc((100% - 2 * var(--space-8)) / 3);
	min-width: 240px;
}
.bloco-regua__titulo { margin-bottom: var(--space-3); }
.bloco-regua__texto { font-size: var(--text-body-md); color: var(--text-body); }

.blocos-regua--dois > * { flex: 0 1 calc((100% - var(--space-8)) / 2); }

/* ── 11. Formulario ───────────────────────────────────────────────── */

.campos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.campo--inteira { grid-column: 1 / -1; }

@media (max-width: 620px) {
	.campos { grid-template-columns: 1fr; }
	.campo--metade { grid-column: 1 / -1; }
}

.campo__rotulo {
	display: block;
	font-size: var(--text-overline);
	font-weight: var(--weight-medium);
	text-transform: uppercase;
	letter-spacing: var(--track-overline);
	color: var(--text-muted);
	margin-bottom: var(--space-2);
}

.campo__controle {
	width: 100%;
	height: var(--control-height-md);
	background: var(--branco);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-sm);
	color: var(--text-body);
	font-size: 0.9375rem;
	padding-inline: var(--space-3);
}
textarea.campo__controle { height: auto; min-height: 120px; padding: var(--space-3); resize: vertical; }
select.campo__controle { appearance: none; background-image: none; }

.campo__controle:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--focus-ring);
}

.campo__dica { font-size: var(--text-body-sm); color: var(--text-muted); margin-top: var(--space-2); }
.campo__erro { font-size: var(--text-body-sm); color: var(--status-danger); margin-top: var(--space-2); }

.consentimento {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
	margin-top: var(--space-6);
	font-size: var(--text-body-sm);
	color: var(--text-muted);
	line-height: var(--leading-body);
}
.consentimento input { margin-top: 4px; accent-color: var(--accent); }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.retorno-form { margin-bottom: var(--space-6); }

/* ── 12. Cabecalho ────────────────────────────────────────────────── */

.cabecalho {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--surface-page);
	border-bottom: 1px solid var(--border-hairline);
}

/* O cabecalho usa a largura da pagina com gutter, nao o container de 1120px:
   sao sete itens de menu mais o botao, e o cap de 1120 nao os comporta. */
.cabecalho__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-8);
	padding: var(--space-5) var(--gutter-page);
}

.cabecalho__marca { display: inline-flex; align-items: center; }
.cabecalho__marca img { height: 52px; width: auto; }

.cabecalho__nav { display: flex; align-items: center; gap: var(--space-8); }

.menu-principal { display: flex; align-items: center; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }

/* DESVIO CONSCIENTE DA SPEC, para a agencia decidir.
   COMPONENTES.md pede letter-spacing .22em nos links do cabecalho. Com os
   quatro itens do prototipo isso cabia; com os sete itens que o tema precisa
   ter, a linha mede 1328px e estoura qualquer desktop abaixo de 1500px.
   Reduzimos o tracking para .12em somente aqui — fonte, peso, tamanho e caixa
   seguem a spec. As alternativas eram encurtar os rotulos do menu (mexe na
   copy aprovada) ou mostrar o painel de menu tambem no desktop. */
.menu-principal a {
	display: inline-block;
	font-size: var(--text-overline);
	font-weight: var(--weight-medium);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	white-space: nowrap;
	color: var(--text-muted);
	padding-block: var(--space-2);
	border-bottom: 1px solid transparent;
}
.menu-principal a:hover { color: var(--text-accent); }
.menu-principal .current-menu-item > a,
.menu-principal .current_page_parent > a {
	color: var(--accent-hover);
	border-bottom-color: var(--accent-hover);
}

.abrir-menu, .fechar-menu { display: none; }

/* ── 13. Menu mobile ──────────────────────────────────────────────── */

/* ATENÇÃO ao mexer no menu: este ponto de quebra depende de quantos itens
   o menu tem. Com os cinco atuais (Início, Quem é a Dra. Alda, Como funciona
   a consulta, Blog, Contato) a linha mede 1047px e cabe a partir de ~1080px.
   Se o Programa Reviver e a Menopausa e saúde mental voltarem ao menu quando
   forem publicados, a linha passa de 1300px e este valor precisa subir para
   1400px — senão os itens quebram em duas linhas no desktop. */
@media (max-width: 1080px) {
	.cabecalho__nav {
		position: fixed;
		inset: 0;
		background: var(--surface-inverse);
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: var(--space-8);
		padding: var(--space-20) var(--gutter-page);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--duration-base) var(--ease), visibility var(--duration-base) var(--ease);
	}
	.cabecalho__nav.aberto { opacity: 1; visibility: visible; }

	.menu-principal { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
	.menu-principal li { width: 100%; }
	.menu-principal a {
		font-family: var(--font-display);
		font-weight: var(--weight-display);
		font-size: 1.25rem;
		letter-spacing: var(--track-display);
		color: var(--text-on-inverse);
		padding-block: var(--space-4);
		min-height: 44px;
		border-bottom: 1px solid var(--border-inverse);
		width: 100%;
	}
	.menu-principal a:hover { color: var(--cobre-300); }
	.menu-principal .current-menu-item > a { color: var(--cobre-300); border-bottom-color: var(--cobre-300); }

	.abrir-menu, .fechar-menu {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding-inline: var(--space-2);
		font-family: var(--font-sans);
		font-weight: var(--weight-medium);
		font-size: var(--text-overline);
		text-transform: uppercase;
		letter-spacing: var(--track-overline);
		color: var(--text-muted);
	}
	.fechar-menu { position: absolute; top: var(--space-5); right: var(--gutter-page); color: var(--text-on-inverse); }

	body.menu-aberto { overflow: hidden; }
}

/* ── 14. Rodape ───────────────────────────────────────────────────── */

.rodape {
	background: var(--surface-inverse);
	color: var(--text-on-inverse);
	padding-block: var(--space-20) var(--space-8);
}

.rodape__grade {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--space-12);
	padding-bottom: var(--space-12);
	border-bottom: 1px solid var(--border-inverse);
}

.rodape__marca img { height: 56px; width: auto; margin-bottom: var(--space-5); }

.rodape__assinatura {
	font-family: var(--font-sans);
	font-weight: var(--weight-medium);
	font-size: var(--text-overline);
	text-transform: uppercase;
	letter-spacing: var(--track-overline);
	color: var(--taupe-200);
	line-height: 2;
}

.rodape__titulo {
	font-size: var(--text-overline);
	font-weight: var(--weight-medium);
	text-transform: uppercase;
	letter-spacing: var(--track-overline);
	color: var(--cobre-300);
	margin-bottom: var(--space-5);
}

.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.rodape li a { font-size: var(--text-body-md); color: var(--text-on-inverse); }
.rodape li a:hover { color: var(--cobre-300); }

.rodape__aviso {
	padding-top: var(--space-8);
	font-size: var(--text-body-sm);
	color: var(--taupe-200);
	max-width: 68ch;
	line-height: var(--leading-body);
}
.rodape__creditos {
	margin-top: var(--space-5);
	font-size: var(--text-caption);
	color: var(--taupe-400);
}

/* ── 15. WhatsApp flutuante ───────────────────────────────────────── */

.whatsapp-flutuante {
	position: fixed;
	right: clamp(16px, 3vw, 32px);
	bottom: clamp(16px, 3vw, 32px);
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background: var(--oliva-700);
	border: 1px solid var(--cobre-500);
	border-radius: var(--radius-sm);
	padding: var(--space-3) var(--space-5);
	color: var(--marfim-100);
	font-family: var(--font-sans);
	font-weight: var(--weight-medium);
	font-size: var(--text-overline);
	text-transform: uppercase;
	letter-spacing: var(--track-overline);
	transition: background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.whatsapp-flutuante:hover { background: var(--oliva-900); color: var(--cobre-300); }
.whatsapp-flutuante svg { width: 18px; height: 18px; flex: none; }

/* ── 16. FAQ ──────────────────────────────────────────────────────── */

.faq { border-top: 1px solid var(--border-hairline); }

.faq__item { border-bottom: 1px solid var(--border-hairline); }

.faq__pergunta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-6);
	padding-block: var(--space-6);
	cursor: pointer;
	list-style: none;
	font-family: var(--font-display);
	font-weight: var(--weight-display);
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: var(--track-display);
	line-height: var(--leading-title);
	color: var(--text-heading);
}
.faq__pergunta::-webkit-details-marker { display: none; }
.faq__pergunta::after { content: "+"; color: var(--accent); font-family: var(--font-sans); font-size: 1.25rem; line-height: 1; flex: none; }
.faq__item[open] .faq__pergunta::after { content: "−"; }

.faq__resposta {
	max-width: 66ch;
	padding-bottom: var(--space-6);
	font-size: 0.9375rem;
	color: var(--text-body);
}

/* ── 17. Tabela do passo a passo ──────────────────────────────────── */

.passos { width: 100%; }
.passos th, .passos td { text-align: left; vertical-align: top; padding-block: var(--space-6); }
.passos thead th {
	font-family: var(--font-sans);
	font-weight: var(--weight-medium);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: var(--track-overline);
	color: var(--text-muted);
	border-bottom: 1px solid var(--border-strong);
	padding-block: var(--space-3);
}
.passos tbody tr { border-bottom: 1px solid var(--border-hairline); }
.passos tbody th {
	width: 34%;
	font-family: var(--font-display);
	font-weight: var(--weight-display);
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: var(--track-display);
	color: var(--text-heading);
	padding-right: var(--space-6);
}
.passos tbody td { font-size: var(--text-body-md); }

@media (max-width: 720px) {
	.passos thead { display: none; }
	.passos tbody tr { display: grid; gap: var(--space-2); padding-block: var(--space-5); }
	.passos tbody th, .passos tbody td { width: auto; padding-block: 0; }
}

/* ── 18. Blog: listagem ───────────────────────────────────────────── */

.filtros-blog {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
	padding: var(--space-6) 0 var(--space-12);
	border-bottom: 1px solid var(--border-hairline);
	margin-bottom: var(--space-12);
}
.filtros-blog a {
	font-size: var(--text-overline);
	font-weight: var(--weight-medium);
	text-transform: uppercase;
	letter-spacing: var(--track-overline);
	color: var(--text-muted);
	padding-bottom: 6px;
	border-bottom: 1px solid transparent;
}
.filtros-blog a:hover { color: var(--text-accent); }
.filtros-blog a.ativo { color: var(--text-accent); border-bottom-color: var(--cobre-500); }

.grade-artigos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--space-8);
}

.card-artigo {
	display: flex;
	flex-direction: column;
	background: var(--surface-card);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: border-color var(--duration-fast) var(--ease);
}
.card-artigo:hover { border-color: var(--cobre-500); }

.card-artigo__capa { aspect-ratio: 3 / 2; background: var(--surface-muted); }
.card-artigo__capa img { width: 100%; height: 100%; object-fit: cover; }

.card-artigo__corpo {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-6);
	flex: 1;
}
.card-artigo__titulo { font-size: 1.0625rem; }
.card-artigo__resumo { font-size: 0.9375rem; color: var(--text-muted); }

/* Assinatura do card: foto, autora, data e tempo de leitura.
   Empurrada para a base para os cards da grade alinharem entre si mesmo
   com titulos de alturas diferentes. */
.card-artigo__assinatura {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-3);
	margin-top: auto;
	padding-top: var(--space-4);
	border-top: 1px solid var(--border-hairline);
}

/* Raio de 2px, nao circulo: a pilula completa e exclusiva da etiqueta. */
.card-artigo__foto {
	width: 28px;
	height: 28px;
	object-fit: cover;
	border-radius: var(--radius-sm);
	flex: none;
}

.card-artigo__autor,
.card-artigo__meta {
	font-size: var(--text-overline);
	text-transform: uppercase;
	letter-spacing: var(--track-overline);
	line-height: 1.4;
}
.card-artigo__autor { color: var(--text-body); }
.card-artigo__meta {
	color: var(--text-subtle);
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex-wrap: wrap;
}

/* Em card estreito, a linha de data desce para baixo do nome em vez de
   espremer os dois. */
@media (max-width: 400px) {
	.card-artigo__meta { flex-basis: 100%; }
}

.card-artigo__leitura {
	font-size: var(--text-overline);
	text-transform: uppercase;
	letter-spacing: var(--track-overline);
	color: var(--text-subtle);
}

.vazio-editorial { text-align: center; padding-block: var(--space-20); }
.vazio-editorial h2 { font-size: 1.125rem; margin-bottom: var(--space-4); }
.vazio-editorial p { color: var(--text-muted); max-width: 56ch; margin-inline: auto; }

.paginacao { display: flex; justify-content: center; gap: var(--space-4); padding-top: var(--space-16); }
.paginacao .page-numbers {
	font-size: var(--text-overline);
	text-transform: uppercase;
	letter-spacing: var(--track-overline);
	color: var(--text-muted);
}
.paginacao .current { color: var(--text-accent); }

/* ── 19. Blog: artigo ─────────────────────────────────────────────── */

.artigo__topo { background: var(--surface-page); padding-top: var(--space-16); padding-bottom: var(--space-12); }

.trilha {
	font-size: var(--text-overline);
	text-transform: uppercase;
	letter-spacing: var(--track-overline);
	color: var(--text-muted);
	margin-bottom: var(--space-5);
}

.artigo__titulo { font-size: clamp(1.5rem, 2.8vw, 2.5rem); margin-block: var(--space-4); }
.artigo__lead { font-size: 1.25rem; color: var(--text-muted); line-height: 1.35; max-width: 60ch; }

.artigo__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-6);
	border-top: 1px solid var(--border-hairline);
	margin-top: var(--space-8);
	padding-top: var(--space-5);
	font-size: var(--text-overline);
	text-transform: uppercase;
	letter-spacing: var(--track-overline);
	color: var(--text-muted);
}

.artigo__capa { margin-top: var(--space-12); }
.artigo__capa img { width: 100%; aspect-ratio: 16 / 7; min-height: 260px; object-fit: cover; border-radius: var(--radius-lg); }

.artigo__corpo { background: var(--surface-page); padding-bottom: var(--space-24); }

.conteudo-artigo { font-size: 1.0625rem; line-height: var(--leading-body); color: var(--text-body); }
.conteudo-artigo > * { max-width: 66ch; }
.conteudo-artigo > * + * { margin-top: var(--space-5); }

.conteudo-artigo h2 {
	font-size: 1.25rem;
	margin-top: var(--space-12);
	margin-bottom: var(--space-5);
}
.conteudo-artigo h3 {
	font-size: 1.0625rem;
	margin-top: var(--space-8);
	margin-bottom: var(--space-4);
}

.conteudo-artigo ul, .conteudo-artigo ol { list-style: none; margin: 0; padding: 0; }
.conteudo-artigo li { border-top: 1px solid var(--border-hairline); padding-block: var(--space-4); }
.conteudo-artigo li:last-child { border-bottom: 1px solid var(--border-hairline); }

.conteudo-artigo blockquote {
	font-family: var(--font-display);
	font-weight: var(--weight-display);
	font-size: clamp(1.25rem, 1.8vw, 1.625rem);
	text-transform: uppercase;
	letter-spacing: var(--track-display);
	line-height: var(--leading-title);
	color: var(--text-accent);
	margin-block: var(--space-8);
	padding: 0;
	border: 0;
}

.conteudo-artigo a { color: var(--cobre-700); }
.conteudo-artigo a:hover { color: var(--cobre-500); }
.conteudo-artigo strong { font-weight: var(--weight-semibold); }
.conteudo-artigo img { border-radius: var(--radius-lg); max-width: 100%; }
.conteudo-artigo figcaption { font-size: var(--text-body-sm); color: var(--text-muted); margin-top: var(--space-2); }

.artigo__faq { border-top: 1px solid var(--border-hairline); margin-top: var(--space-16); padding-top: var(--space-12); }
.artigo__faq > h2 { margin-bottom: var(--space-6); }

.artigo__aviso { margin-top: var(--space-12); }

.artigo__convite {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-8);
	border-top: 1px solid var(--border-hairline);
	margin-top: var(--space-12);
	padding-top: var(--space-8);
}
.artigo__convite p { max-width: 46ch; font-size: var(--text-body-md); }

.continue-lendo { background: var(--branco); border-top: 1px solid var(--border-hairline); padding-block: var(--space-16); }
.continue-lendo__grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); margin-top: var(--space-6); }
.card-relacionado {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-6);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-md);
	transition: border-color var(--duration-fast) var(--ease);
}
.card-relacionado:hover { border-color: var(--cobre-500); }

/* ── 20. Pagina padrao ────────────────────────────────────────────── */

.pagina-topo { padding-block: var(--space-24) var(--space-12); }
.pagina-corpo { padding-bottom: var(--space-24); }
.pagina-corpo > * { max-width: 66ch; }
.pagina-corpo > * + * { margin-top: var(--space-5); }
.pagina-corpo h2 { margin-top: var(--space-12); margin-bottom: var(--space-4); font-size: 1.125rem; }


/* ── 21. Marcacao de pendencia ────────────────────────────────────── */

.pendencia {
	background: var(--status-warning-soft);
	color: var(--status-warning);
	box-shadow: inset 0 -1px 0 var(--status-warning);
	padding: 0 4px;
	font-weight: var(--weight-medium);
}
.pendencia-limpa { color: inherit; }

/* ── 22. Revelacao no scroll ──────────────────────────────────────── */

.revelar { opacity: 0; transform: translateY(8px); }
.revelar.visivel {
	opacity: 1;
	transform: none;
	transition: opacity var(--duration-reveal) var(--ease), transform var(--duration-reveal) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
	.revelar { opacity: 1; transform: none; }
}

/* ── 22b. Topo com foto ────────────────────────────── */

/* A foto entra como imagem de verdade, nao como background-image: assim ela
   carrega com fetchpriority alto, aceita os recortes do <picture> e continua
   podendo vir da biblioteca de midia. No DOM ela fica DEPOIS do container,
   porque no celular a ordem de leitura certa e titulo primeiro, foto depois. */

.secao--topo-foto {
	display: flex;
	align-items: center;
	/* 53vw deixa a faixa na proporcao da foto (1,85:1), entao ate ~1500px nao
	   ha recorte vertical nenhum. Acima disso o corte come o rodape da imagem,
	   nunca o alto da cabeca, por causa do object-position. */
	padding-block: var(--space-12);
	min-height: clamp(480px, 53vw, 800px);
	background: var(--surface-page);
}

.topo-foto__fundo {
	position: absolute;
	inset: 0;
	display: block;
}

.topo-foto__fundo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Ancorada no topo: quando a tela e mais larga que a foto, o corte come
	   o rodape da imagem e nunca o alto da cabeca. */
	object-position: right top;
	display: block;
}

/* Base marfim sob o texto. Onde a parede do estudio ja aparece, some; serve
   para as larguras em que o recorte come parte dessa parede. */
.secao--topo-foto::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		var(--marfim-100) 0%,
		rgba(236, 231, 217, .88) 30%,   /* --marfim-100 */
		rgba(236, 231, 217, 0) 64%
	);
}

.secao--topo-foto > .container { width: 100%; }
/* A foto e full-bleed, entao a Dra. Alda fica sempre por volta de 50% da
   LARGURA DA TELA, enquanto o container encolhe antes disso. Travar a coluna
   tambem em vw impede o texto de invadir a figura entre 880px e 1440px. */
.topo-foto__texto { max-width: min(44ch, 40vw); }

/* Um ponto abaixo do titulo padrao: a coluna de texto aqui e estreita (a foto
   ocupa a direita) e, no tamanho cheio, os titulos longos desta copy quebravam
   em sete linhas. Em 36px todos fecham em cinco. */
.secao--topo-foto .titulo-hero { font-size: clamp(1.5rem, 2.5vw, 2.25rem); }

@media (max-width: 880px) {
	/* Empilha: texto, depois foto. Em 375px nao cabem os dois lado a lado, e
	   texto sobre foto no celular sempre vira problema de contraste. */
	.secao--topo-foto { display: block; min-height: 0; }
	.secao--topo-foto::before { content: none; }

	.topo-foto__fundo {
		position: static;
		margin-top: var(--space-12);
		border-radius: var(--radius-lg);
		overflow: hidden;
	}
	.topo-foto__fundo img { aspect-ratio: 4 / 5; height: auto; object-position: center; }
	.topo-foto__texto { max-width: none; }
}

/* ── 23. Figuras ──────────────────────────────────────────────────── */

.figura { margin: 0; }
.figura img { width: 100%; object-fit: cover; border-radius: var(--radius-lg); }
.figura--4-5 img { aspect-ratio: 4 / 5; min-height: 340px; }
.figura--1-1 img { aspect-ratio: 1 / 1; }
.figura--3-4 img { aspect-ratio: 3 / 4; }

.mapa { border: 1px solid var(--border-hairline); border-radius: var(--radius-md); overflow: hidden; }
.mapa iframe { width: 100%; aspect-ratio: 4 / 3; border: 0; display: block; filter: saturate(.72); }

/* ── 24. Link da bio ──────────────────────────────────────────────
   Pagina isolada, sem cabecalho nem rodape do site. Pensada para o
   celular: coluna unica, alvos grandes, sem nada que leve para fora
   antes da acao principal.
   ───────────────────────────────────────────────────────────────── */

.pagina-bio { background: var(--surface-page); }

.bio {
	position: relative;
	overflow: hidden;
	min-height: 100vh;
	padding-block: var(--space-12) var(--space-16);
}

.bio__conteudo {
	position: relative;
	z-index: 1;
	width: min(100% - 2.5rem, 460px);
	margin-inline: auto;
}

.bio__topo { text-align: center; margin-bottom: var(--space-10); }

/* Raio de 4px: circulo e exclusividade da etiqueta de categoria. */
.bio__foto {
	width: 112px;
	height: 112px;
	object-fit: cover;
	border-radius: var(--radius-md);
	margin: 0 auto var(--space-5);
	border: 1px solid var(--border-hairline);
}

.bio__nome {
	font-family: var(--font-display);
	font-weight: var(--weight-display);
	font-size: 1.5rem;
	text-transform: uppercase;
	letter-spacing: var(--track-display);
	line-height: var(--leading-title);
	color: var(--text-heading);
	margin-bottom: var(--space-2);
}

.bio__registro {
	font-size: var(--text-overline);
	font-weight: var(--weight-medium);
	text-transform: uppercase;
	letter-spacing: var(--track-overline);
	color: var(--text-accent);
	margin-bottom: var(--space-4);
}

.bio__frase {
	font-size: var(--text-body-md);
	line-height: var(--leading-body);
	color: var(--text-body);
	max-width: 42ch;
	margin-inline: auto;
}

/* Acoes ------------------------------------------------------------ */

.bio__acoes { display: grid; gap: var(--space-3); margin-bottom: var(--space-12); }

.bio__botao {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	padding: var(--space-3) var(--space-5);
	background: var(--branco);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-sm);
	color: var(--text-body);
	font-family: var(--font-sans);
	font-weight: var(--weight-medium);
	font-size: var(--text-body-sm);
	text-transform: uppercase;
	letter-spacing: var(--track-label);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: border-color var(--duration-fast) var(--ease),
	            color var(--duration-fast) var(--ease),
	            background-color var(--duration-fast) var(--ease);
}
.bio__botao:hover { border-color: var(--accent); color: var(--accent); }

.bio__botao--principal {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--branco);
	font-weight: var(--weight-semibold);
}
.bio__botao--principal:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--branco); }

.bio__botao:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); outline: none; }

/* Blocos ----------------------------------------------------------- */

.bio__bloco {
	border-top: 1px solid var(--border-hairline);
	padding-top: var(--space-8);
	margin-bottom: var(--space-10);
}

.bio__titulo {
	font-size: var(--text-overline);
	font-weight: var(--weight-medium);
	font-family: var(--font-sans);
	text-transform: uppercase;
	letter-spacing: var(--track-overline);
	color: var(--text-muted);
	margin-bottom: var(--space-4);
}

.bio__endereco { font-size: var(--text-body-md); color: var(--text-body); margin-bottom: var(--space-2); }
.bio__horario { font-size: var(--text-body-sm); color: var(--text-muted); margin-bottom: var(--space-4); }

.bio__link {
	display: inline-block;
	font-size: var(--text-overline);
	font-weight: var(--weight-medium);
	text-transform: uppercase;
	letter-spacing: var(--track-overline);
	color: var(--text-accent);
}

.bio__redes { display: grid; gap: var(--space-3); }
.bio__rede {
	font-size: var(--text-body-md);
	color: var(--text-body);
	text-decoration: none;
	min-height: 44px;
	display: flex;
	align-items: center;
}
.bio__rede:hover { color: var(--accent); }

/* Formulario ------------------------------------------------------- */

.bio__form { display: grid; gap: var(--space-5); }
.bio__form .consentimento { margin-top: 0; }
.bio__form .aviso { margin-bottom: var(--space-5); }

/* Rodape ----------------------------------------------------------- */

.bio__rodape {
	border-top: 1px solid var(--border-hairline);
	padding-top: var(--space-8);
	text-align: center;
}
.bio__rodape p {
	font-size: var(--text-body-sm);
	color: var(--text-muted);
	line-height: var(--leading-body);
}
.bio__assinatura {
	margin-top: var(--space-5);
	font-size: var(--text-overline) !important;
	text-transform: uppercase;
	letter-spacing: var(--track-overline);
	color: var(--text-subtle) !important;
}

/* O monograma na bio sangra pelo canto superior direito. */
.bio .monograma--superior-direita { top: -4%; right: -18%; }

/* ── 25. Politica de agendamento ──────────────────────────────────── */

/* Rotulo a esquerda, regra a direita: o mesmo ritmo do documento que a
   agencia entregou, agora com os tokens do site. */
.politica__item {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: var(--space-12);
	padding-block: var(--space-10);
	border-top: 1px solid var(--border-hairline);
}
.politica__item:first-child { border-top: 1px solid var(--border-strong); }
.politica__item:last-child  { border-bottom: 1px solid var(--border-hairline); }

.politica__titulo { color: var(--text-heading); margin-bottom: 0; }
.politica__rotulo .regua { margin-bottom: var(--space-4); }

/* O texto que explica cada caso vem junto do titulo, e nao a 24px dele
   como manda o ritmo geral da prosa. */
.politica__corpo .titulo-card + p { margin-top: var(--space-3); }

@media (max-width: 880px) {
	.politica__item {
		grid-template-columns: 1fr;
		gap: var(--space-4);
		padding-block: var(--space-8);
	}
}

/* Aceite ----------------------------------------------------------- */

.aceite .campo { margin-bottom: var(--space-2); }