/* ============================================================================
   Zaia Instituto de Altas Habilidades/Superdotação
   zaiainstituto.com.br

   Identidade visual — "o fio".

   O logotipo do Instituto é uma linha contínua que desenha uma família de
   três, atravessada por uma fita pontilhada roxa. Essas duas formas — a
   LINHA CONTÍNUA e o PONTILHADO — são o vocabulário inteiro do site:

     · a linha contínua vira o traço que separa as seções e o contorno do
       Axel;
     · o pontilhado vira as divisórias, as bordas superiores dos cartões e
       os anéis dos retratos da equipe.

   Nada além disso precisa ser inventado.
   ========================================================================= */

:root {
	color-scheme: light;

	/* --- cor ------------------------------------------------------------ */
	/* extraídas do logotipo */
	--roxo: #7a3e96;
	--roxo-forte: #63307b;
	--roxo-profundo: #3b1d4e;   /* títulos: berinjela, nunca preto */
	--lilas: #c9a9dc;           /* o pontilhado */
	--lilas-claro: #e6d7ef;
	--nevoa: #f6f1fa;           /* fundo alternado, branco arroxeado */
	--papel: #fefdff;

	/* da capa do livro infantil — uso restrito à seção do livro
	   e aos marcadores de categoria */
	--girassol: #f5b841;
	--magenta: #e0479e;
	--agua: #3ea8c4;

	--tinta: #2e2333;
	--tinta-suave: #6b5c74;
	--linha: #e8dcef;

	--whatsapp: #1fae54;

	/* --- tipografia ----------------------------------------------------- */
	--fonte-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
	--fonte-corpo: 'Instrument Sans', system-ui, -apple-system, sans-serif;

	/* --- medidas -------------------------------------------------------- */
	--raio: 14px;
	--raio-g: 24px;
	--largura: 70rem;
	--prosa: 38rem;
	--respiro: clamp(3.5rem, 8vw, 7rem);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	/* o header fixo não pode cobrir a âncora */
	scroll-padding-top: 5.5rem;
}

body {
	margin: 0;
	background: var(--papel);
	color: var(--tinta);
	font-family: var(--fonte-corpo);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
svg {
	max-width: 100%;
}

img {
	height: auto;
}

a {
	color: var(--roxo);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

a:hover {
	color: var(--magenta);
}

:focus-visible {
	outline: 2.5px solid var(--roxo);
	outline-offset: 3px;
	border-radius: 4px;
}

::selection {
	background: var(--lilas-claro);
	color: var(--roxo-profundo);
}

/* ---------------------------------------------------------------- tipos -- */

h1,
h2,
h3,
h4 {
	font-family: var(--fonte-display);
	/* SOFT arredonda os terminais; WONK deixa o itálico e alguns terminais
	   levemente tortos. Um pouco dos dois tira o ar de serifa institucional
	   genérica sem virar fantasia. */
	font-variation-settings: 'SOFT' 40, 'WONK' 1;
	color: var(--roxo-profundo);
	line-height: 1.1;
	letter-spacing: -0.015em;
	text-wrap: balance;
	margin: 0 0 0.55em;
}

h1 {
	font-size: clamp(2.4rem, 6vw, 4.1rem);
	font-weight: 600;
	font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 144;
	letter-spacing: -0.03em;
}

h2 {
	font-size: clamp(1.7rem, 3.6vw, 2.5rem);
	font-weight: 600;
}

h3 {
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.25;
}

p {
	margin: 0 0 1.1em;
}

/* rótulo de seção — o único lugar com caixa alta */
.sobrancelha {
	font-family: var(--fonte-corpo);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--roxo);
	margin: 0 0 1rem;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.sobrancelha::before {
	content: '';
	width: 1.6rem;
	height: 0;
	border-top: 2px dotted var(--lilas);
	flex: none;
}

.lead {
	font-size: clamp(1.1rem, 2vw, 1.3rem);
	line-height: 1.55;
	color: var(--tinta-suave);
	max-width: 34rem;
}

/* --------------------------------------------------------------- grades -- */

.wrap {
	max-width: var(--largura);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 2.75rem);
}

.wrap-prosa {
	max-width: calc(var(--prosa) + 5.5rem);
}

.secao {
	padding-block: var(--respiro);
}

.secao-nevoa {
	background: var(--nevoa);
}

.secao-cabeca {
	max-width: 40rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* ------------------------------------------------------------ pontilhado -- */
/* A divisória é um arco pontilhado, não um traço reto: é a fita do
   logotipo, que curva. */

.fio {
	display: block;
	width: min(100%, 26rem);
	height: 26px;
	margin: clamp(2.5rem, 6vw, 4rem) auto;
	color: var(--lilas);
}

.fio path {
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-dasharray: 0.1 9;
}

/* Entre duas seções o fio já está cercado pelo padding delas — a margem
   própria só criaria um vão vazio. */
main > .fio {
	margin-block: 0;
}

/* --------------------------------------------------------------- header -- */

/* ---------------------------------------------------------------- aviso -- */
/* Rola junto com a página, e não fixo: é um recado de uma vez só, não algo
   que a pessoa precise reler a cada rolagem. */

.aviso-obra {
	background: var(--girassol);
	color: var(--roxo-profundo);
	font-size: 0.9rem;
	line-height: 1.45;
}

.aviso-obra .wrap {
	padding-top: 0.6rem;
	padding-bottom: 0.6rem;
}

.aviso-obra a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	white-space: nowrap;
}

.cabecalho {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--papel) 90%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--linha);
}

.cabecalho .wrap {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 4.5rem;
}

.marca {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	font-family: var(--fonte-display);
	font-variation-settings: 'SOFT' 60, 'WONK' 0;
	font-weight: 700;
	font-size: 1.2rem;
	letter-spacing: -0.02em;
	color: var(--roxo-profundo);
	text-decoration: none;
	margin-right: auto;
	flex: none;
}

.marca:hover {
	color: var(--roxo);
}

.marca-desenho {
	height: 50px;
	width: auto;
	flex: none;
}

@media (max-width: 30rem) {
	/* No celular a fita pontilhada some de tão pequena; encolher o desenho
	   inteiro é melhor do que exibi-lo ilegível ao lado do nome. */
	.marca-desenho {
		height: 38px;
	}
}

/* O lockup do logotipo: "ZAIA" espaçado numa linha, a qualificação em duas
   linhas menores logo abaixo — a mesma hierarquia da arte original. */
.marca-texto {
	display: block;
	line-height: 1;
}

.marca-texto strong {
	display: block;
	font-weight: 700;
	font-size: 1.5rem;
	letter-spacing: 0.08em;
}

.marca small {
	display: block;
	font-family: var(--fonte-corpo);
	font-size: 0.58rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tinta-suave);
	line-height: 1.25;
	margin-top: 0.25rem;
}

@media (max-width: 30rem) {
	.marca-texto strong {
		font-size: 1.25rem;
	}

	.marca small {
		font-size: 0.5rem;
	}
}

.menu-btn {
	display: none;
	background: none;
	border: 1px solid var(--linha);
	border-radius: 10px;
	padding: 0.5rem;
	color: var(--roxo-profundo);
	cursor: pointer;
}

.navegacao ul {
	display: flex;
	align-items: center;
	gap: clamp(0.9rem, 2vw, 1.6rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.navegacao a {
	color: var(--tinta);
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 500;
	padding-block: 0.3rem;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
}

.navegacao a:hover {
	color: var(--roxo);
}

.navegacao a[aria-current='page'] {
	color: var(--roxo);
	border-bottom-color: var(--lilas);
}

/* --------------------------------------------------------------- botões -- */

.botoes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2rem;
}

.botao {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.8rem 1.4rem;
	border-radius: 100px;
	font-weight: 600;
	font-size: 0.98rem;
	text-decoration: none;
	border: 1.5px solid transparent;
	transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.botao:active {
	transform: translateY(1px);
}

.botao svg {
	width: 1.15em;
	height: 1.15em;
	flex: none;
}

.botao-cheio {
	background: var(--roxo);
	color: #fff;
}

.botao-cheio:hover {
	background: var(--roxo-forte);
	color: #fff;
}

.botao-vazio {
	border-color: var(--lilas);
	color: var(--roxo-profundo);
	background: transparent;
}

.botao-vazio:hover {
	border-color: var(--roxo);
	color: var(--roxo);
	background: color-mix(in srgb, var(--lilas-claro) 40%, transparent);
}

.botao-zap {
	background: var(--whatsapp);
	color: #fff;
}

.botao-zap:hover {
	background: #178f45;
	color: #fff;
}

.botao-mini {
	padding: 0.5rem 1rem;
	font-size: 0.88rem;
}

/* ------------------------------------------------------------------ topo -- */
/* A tese do site em forma de gráfico: um perfil assíncrono real, com
   picos acima e vales abaixo da média esperada. */

.topo {
	padding-block: clamp(2.5rem, 7vw, 5.5rem) var(--respiro);
	position: relative;
	overflow: hidden;
}

.topo .wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

/* "Habilidades/Superdotação" é longa e sem espaço: no tamanho cheio do h1
   ela estoura a coluna. Menor — e o <wbr> depois da barra deixa a quebra
   acontecer ali, e não no meio de "Superdotação". */
.topo h1 {
	font-size: clamp(2rem, 4.2vw, 3.1rem);
	color: var(--roxo);
}

/* O nome da organização já é roxo por herança; o .destaque continua
   existindo para os eixos variáveis do Fraunces. */
.topo h1 .destaque {
	font-variation-settings: 'SOFT' 70, 'WONK' 1, 'opsz' 144;
}

/* Enquanto a imagem de abertura não estiver definida, o bloco "A escrever"
   ocupa a segunda coluna. */
.topo .pendente {
	margin: 0;
}

/* ------------------------------------------------------------- números --- */

.numeros {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.5rem;
	margin-top: 1rem;
}

.numero {
	border-top: 2px dotted var(--lilas);
	padding-top: 1.2rem;
}

.numero b {
	display: block;
	font-family: var(--fonte-display);
	font-variation-settings: 'SOFT' 60, 'WONK' 0, 'opsz' 144;
	font-size: clamp(2.2rem, 5vw, 3rem);
	font-weight: 600;
	line-height: 1;
	color: var(--roxo);
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.numero p {
	margin: 0.6rem 0 0;
	font-size: 0.95rem;
	color: var(--tinta-suave);
}

/* -------------------------------------------------------------- cartões -- */

.cartoes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cartao {
	position: relative;
	background: var(--papel);
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	padding: 1.6rem 1.5rem 1.5rem;
	display: flex;
	flex-direction: column;
	transition: border-color 0.18s ease, transform 0.18s ease;
}

.secao-nevoa .cartao {
	background: var(--papel);
}

.cartao:hover {
	border-color: var(--lilas);
	transform: translateY(-2px);
}

/* a "costura" pontilhada no topo do cartão, na cor da categoria */
.cartao::before {
	content: '';
	position: absolute;
	inset-inline: 1.5rem;
	top: -1px;
	height: 0;
	border-top: 3px dotted var(--cor-cartao, var(--lilas));
	border-radius: 3px;
}

.cartao h3 {
	margin-bottom: 0.4rem;
}

.cartao h3 a {
	text-decoration: none;
	color: inherit;
}

.cartao h3 a::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var(--raio);
}

.cartao h3 a:hover {
	color: var(--roxo);
}

.cartao p {
	color: var(--tinta-suave);
	font-size: 0.97rem;
	margin: 0;
}

.cartao .seta {
	margin-top: auto;
	padding-top: 1.1rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--roxo);
}

.cor-roxo     { --cor-cartao: var(--roxo); }
.cor-magenta  { --cor-cartao: var(--magenta); }
.cor-agua     { --cor-cartao: var(--agua); }
.cor-girassol { --cor-cartao: var(--girassol); }

/* --------------------------------------------------------------- equipe -- */

.equipe {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.pessoa {
	text-align: center;
}

.pessoa-retrato {
	position: relative;
	width: 8.5rem;
	height: 8.5rem;
	margin: 0 auto 1.25rem;
	display: grid;
	place-items: center;
}

/* o anel pontilhado — a fita do logotipo virando moldura */
.pessoa-retrato::before {
	content: '';
	position: absolute;
	inset: -0.55rem;
	border-radius: 50%;
	border: 2.5px dotted var(--cor-cartao, var(--lilas));
}

.pessoa-retrato img,
.pessoa-monograma {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	object-position: center 22%;
}

.pessoa-monograma {
	display: grid;
	place-items: center;
	background: color-mix(in srgb, var(--cor-cartao, var(--roxo)) 12%, var(--nevoa));
	color: var(--cor-cartao, var(--roxo));
	font-family: var(--fonte-display);
	font-variation-settings: 'SOFT' 60, 'WONK' 0;
	font-size: 2.3rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.pessoa h3 {
	margin-bottom: 0.15rem;
}

.pessoa h3 a {
	color: inherit;
	text-decoration: none;
}

.pessoa h3 a:hover {
	color: var(--roxo);
}

.pessoa .cargo {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--roxo);
	margin: 0 0 0.7rem;
}

.pessoa p {
	font-size: 0.95rem;
	color: var(--tinta-suave);
	margin: 0;
}

/* ficha individual */
.ficha {
	display: grid;
	grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: start;
}

.ficha .pessoa-retrato {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	margin-inline: 0;
}

.lista-credenciais {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
}

.lista-credenciais li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: 0.6rem;
	color: var(--tinta);
}

.lista-credenciais li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cor-cartao, var(--roxo));
}

/* --------------------------------------------------------------- prosa --- */

.prosa {
	max-width: var(--prosa);
}

.prosa h2 {
	margin-top: 2.5rem;
}

.prosa h3 {
	margin-top: 2rem;
	font-size: 1.15rem;
}

.prosa > :first-child {
	margin-top: 0;
}

.prosa ul,
.prosa ol {
	padding-left: 1.2rem;
	margin-bottom: 1.4rem;
}

.prosa li {
	margin-bottom: 0.5rem;
}

/* a resposta curta: o trecho que uma IA extrai. Fica em destaque
   porque também é o que um pai apressado precisa ler. */
.resposta-direta {
	font-size: 1.15rem;
	line-height: 1.55;
	color: var(--roxo-profundo);
	background: var(--nevoa);
	border-left: 3px solid var(--roxo);
	border-radius: 0 var(--raio) var(--raio) 0;
	padding: 1.3rem 1.5rem;
	margin: 0 0 2rem;
	max-width: var(--prosa);
}

.secao-nevoa .resposta-direta {
	background: var(--papel);
}

/* ------------------------------------------------------------- pendente -- */
/* Conteúdo que a equipe ainda precisa escrever. Feio de propósito: tem que
   incomodar até alguém preencher. */

.pendente {
	border: 2px dashed var(--lilas);
	border-radius: var(--raio);
	background: repeating-linear-gradient(
		135deg,
		transparent,
		transparent 10px,
		color-mix(in srgb, var(--lilas-claro) 35%, transparent) 10px,
		color-mix(in srgb, var(--lilas-claro) 35%, transparent) 20px
	);
	padding: 1.2rem 1.4rem;
	margin: 0 0 1.6rem;
	max-width: var(--prosa);
}

.pendente p {
	margin: 0;
	color: var(--tinta-suave);
	font-size: 0.95rem;
}

.pendente-etiqueta {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--roxo);
	margin-bottom: 0.4rem !important;
}

.pendente-fonte {
	margin-top: 0.5rem !important;
	font-size: 0.85rem;
	font-style: italic;
	color: var(--lilas);
}

/* --------------------------------------------------------------- etapas -- */
/* Numeradas porque a avaliação É uma sequência: a ordem carrega
   informação que a família precisa. */

.etapas {
	list-style: none;
	counter-reset: etapa;
	margin: 0;
	padding: 0;
	max-width: 44rem;
}

.etapa {
	counter-increment: etapa;
	position: relative;
	padding-left: 4rem;
	padding-bottom: 2rem;
}

.etapa::before {
	content: counter(etapa);
	position: absolute;
	left: 0;
	top: 0;
	width: 2.5rem;
	height: 2.5rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--nevoa);
	border: 2px solid var(--lilas-claro);
	color: var(--roxo);
	font-family: var(--fonte-display);
	font-variation-settings: 'SOFT' 60, 'WONK' 0;
	font-weight: 700;
	font-size: 1rem;
}

/* o fio contínuo que liga as etapas */
.etapa::after {
	content: '';
	position: absolute;
	left: 1.25rem;
	top: 2.9rem;
	bottom: 0.4rem;
	border-left: 2px dotted var(--lilas);
}

.etapa:last-child {
	padding-bottom: 0;
}

.etapa:last-child::after {
	display: none;
}

.etapa h3 {
	margin-bottom: 0.3rem;
	font-size: 1.08rem;
}

.etapa p {
	margin: 0;
	color: var(--tinta-suave);
}

/* ----------------------------------------------------------------- faq --- */

.faq {
	max-width: 46rem;
}

.faq-grupo {
	margin-bottom: 3rem;
}

.faq-grupo > h2 {
	font-size: 1.4rem;
	padding-bottom: 0.8rem;
	border-bottom: 2px dotted var(--lilas);
	margin-bottom: 0.5rem;
}

.pergunta {
	border-bottom: 1px solid var(--linha);
}

.pergunta summary {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.1rem 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--fonte-display);
	font-variation-settings: 'SOFT' 40, 'WONK' 1;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--roxo-profundo);
	line-height: 1.3;
}

.pergunta summary::-webkit-details-marker {
	display: none;
}

.pergunta summary:hover {
	color: var(--roxo);
}

.pergunta summary::after {
	content: '';
	flex: none;
	width: 0.7rem;
	height: 0.7rem;
	margin-top: 0.35rem;
	margin-left: auto;
	border-right: 2.5px solid var(--roxo);
	border-bottom: 2.5px solid var(--roxo);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.pergunta[open] summary::after {
	transform: rotate(-135deg);
}

.pergunta-corpo {
	padding-bottom: 1.4rem;
	max-width: var(--prosa);
}

.pergunta-corpo > p:first-child {
	color: var(--roxo-profundo);
	font-size: 1.05rem;
}

.pergunta-corpo > p:last-child {
	margin-bottom: 0;
}

.pergunta-corpo .detalhe {
	color: var(--tinta-suave);
	font-size: 0.97rem;
}

/* --------------------------------------------------------------- tabela -- */

.tabela-wrap {
	overflow-x: auto;
	margin: 2rem 0;
	border: 1px solid var(--linha);
	border-radius: var(--raio);
}

/* A tabela comparativa é o único bloco que não cabe na medida da prosa.
   Em telas largas ela extravasa para os dois lados em vez de espremer
   quatro colunas em 38rem. */
@media (min-width: 64rem) {
	.wrap-prosa .tabela-wrap {
		margin-inline: -5rem;
	}
}

.tabela {
	width: 100%;
	min-width: 34rem;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.tabela th,
.tabela td {
	text-align: left;
	padding: 0.85rem 1rem;
	border-bottom: 1px solid var(--linha);
	vertical-align: top;
}

.tabela thead th {
	background: var(--nevoa);
	font-family: var(--fonte-corpo);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--roxo-profundo);
}

.tabela tbody th {
	font-weight: 600;
	color: var(--roxo-profundo);
	white-space: nowrap;
}

.tabela tr:last-child th,
.tabela tr:last-child td {
	border-bottom: none;
}

/* ---------------------------------------------------------------- livro -- */
/* Única seção onde as cores da capa infantil aparecem juntas. */

.livro {
	background: linear-gradient(160deg, #6b3f9e 0%, #8b5cb8 55%, #a878c9 100%);
	color: #fff;
	border-radius: var(--raio-g);
	padding: clamp(2rem, 5vw, 3.5rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: center;
}

.livro h2,
.livro h3 {
	color: #fff;
}

.livro p {
	color: rgba(255, 255, 255, 0.86);
}

.livro .sobrancelha {
	color: var(--girassol);
}

.livro .sobrancelha::before {
	border-color: var(--girassol);
}

.livro img {
	border-radius: var(--raio);
	box-shadow: 0 24px 50px -18px rgba(40, 12, 60, 0.6);
	rotate: -2deg;
	width: 100%;
	height: auto;
	justify-self: center;
}

.livro .botao-vazio {
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
}

.livro .botao-vazio:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.livro .botao-cheio {
	background: var(--girassol);
	color: var(--roxo-profundo);
}

.livro .botao-cheio:hover {
	background: #ffc85c;
	color: var(--roxo-profundo);
}

/* o Axel, escondido como no livro */
.axel {
	width: 5.5rem;
	color: rgba(255, 255, 255, 0.75);
}

/* -------------------------------------------------------------- contato -- */

.contato-grade {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 2rem;
}

.dado {
	border-top: 2px dotted var(--lilas);
	padding-top: 1.1rem;
}

.dado dt {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--roxo);
	margin-bottom: 0.4rem;
}

.dado dd {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.5;
}

.mapa {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--raio);
	margin-top: 2.5rem;
	filter: saturate(0.8);
}

/* --------------------------------------------------------------- avisos -- */

.chamada-final {
	text-align: center;
}

.chamada-final .botoes {
	justify-content: center;
}

.chamada-final p {
	max-width: 34rem;
	margin-inline: auto;
	color: var(--tinta-suave);
	font-size: 1.08rem;
}

/* ---------------------------------------------------------------- rodapé - */

.rodape {
	background: var(--roxo-profundo);
	color: rgba(255, 255, 255, 0.72);
	padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem;
	font-size: 0.94rem;
	margin-top: var(--respiro);
}

.rodape a {
	color: rgba(255, 255, 255, 0.86);
	text-decoration: none;
}

.rodape a:hover {
	color: #fff;
	text-decoration: underline;
}

.rodape-grade {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(10rem, 1fr));
	gap: 2.5rem;
	padding-bottom: 2.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.rodape h2 {
	color: #fff;
	font-size: 0.78rem;
	font-family: var(--fonte-corpo);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 1rem;
}

.rodape ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rodape li {
	margin-bottom: 0.5rem;
}

.rodape-marca {
	font-family: var(--fonte-display);
	font-variation-settings: 'SOFT' 60, 'WONK' 0;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1;
	color: #fff;
	margin-bottom: 0.9rem;
}

.rodape-marca small {
	display: block;
	font-family: var(--fonte-corpo);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
	line-height: 1.3;
	margin-top: 0.3rem;
}

.rodape address {
	font-style: normal;
	line-height: 1.7;
}

.rodape-fim {
	padding-top: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.5rem;
	justify-content: space-between;
	font-size: 0.84rem;
	color: rgba(255, 255, 255, 0.55);
}

/* --------------------------------------------------------- zap flutuante - */

.zap-flutua {
	position: fixed;
	right: clamp(1rem, 3vw, 1.75rem);
	bottom: clamp(1rem, 3vw, 1.75rem);
	z-index: 60;
	width: 3.4rem;
	height: 3.4rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--whatsapp);
	color: #fff;
	box-shadow: 0 10px 26px -8px rgba(31, 174, 84, 0.75);
	transition: transform 0.18s ease;
}

.zap-flutua:hover {
	transform: scale(1.07);
	color: #fff;
}

.zap-flutua svg {
	width: 1.7rem;
	height: 1.7rem;
}

/* ------------------------------------------------------------ utilidades - */

.pular {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--roxo);
	color: #fff;
	padding: 0.75rem 1.25rem;
	border-radius: 0 0 var(--raio) 0;
	z-index: 100;
}

.pular:focus {
	left: 0;
}

.migalhas {
	font-size: 0.85rem;
	color: var(--tinta-suave);
	margin-bottom: 1.5rem;
}

.migalhas a {
	color: var(--tinta-suave);
}

.migalhas a:hover {
	color: var(--roxo);
}

.titulo-pagina {
	max-width: 44rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.visualmente-oculto {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* revelação suave ao rolar */
@media (prefers-reduced-motion: no-preference) {
	.revela {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity 0.55s ease, transform 0.55s ease;
	}

	.revela.visivel {
		opacity: 1;
		transform: none;
	}
}

/* ------------------------------------------------------------ responsivo - */

@media (max-width: 60rem) {
	.topo .wrap,
	.livro,
	.ficha {
		grid-template-columns: minmax(0, 1fr);
	}

	.topo .wrap {
		gap: 2.5rem;
	}

	.ficha .pessoa-retrato {
		width: 11rem;
	}

	.livro img {
		max-width: 20rem;
	}
}

@media (max-width: 52rem) {
	.menu-btn {
		display: block;
	}

	.navegacao {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--papel);
		border-bottom: 1px solid var(--linha);
		box-shadow: 0 18px 30px -20px rgba(59, 29, 78, 0.4);
	}

	.cabecalho.aberto .navegacao {
		display: block;
	}

	.navegacao ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0.5rem clamp(1.25rem, 5vw, 2.75rem) 1.25rem;
	}

	.navegacao a {
		display: block;
		padding: 0.7rem 0;
		border-bottom: 1px solid var(--linha);
	}

	.navegacao a[aria-current='page'] {
		border-bottom-color: var(--linha);
	}

	.rodape-grade {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}
}

@media print {
	.cabecalho,
	.zap-flutua,
	.botoes,
	.fio {
		display: none;
	}
}