/*
Theme Name: Colégio Americano Batista
Theme URI: https://americanobatista.com.br
Author: Guia-se
Author URI: https://lagoasantaguiase.com.br
Description: Tema sob medida do Colégio Americano Batista (Recife), construído a partir do manual da marca. Sem framework, sem construtor de páginas: o conteúdo vem de campos ACF e o CSS é escrito à mão, para o site carregar rápido.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: Proprietário — uso exclusivo do Colégio Americano Batista
Text Domain: cab
*/

/* ============================================================
   0. Tipografia hospedada

   Poppins, escolhida por medição: comparada letra a letra com o Century
   Gothic do logotipo, ela bate 0,600 de semelhança contra 0,518 da
   Questrial, e ganha em 16 das 21 letras testadas. Também tem vários
   pesos, enquanto a Questrial só existe em um — um site institucional
   precisa de hierarquia.

   Hospedada aqui, e não puxada do Google: o site não depende de um
   terceiro para renderizar, não vaza o IP de quem visita e não paga o
   custo de abrir conexão com outro domínio. São 21 KB no total.

   Licença SIL Open Font: livre para uso comercial, inclusive hospedagem
   própria. O Century Gothic é da Monotype e exigiria licença paga —
   por isso ele fica só como primeira opção de quem já o tem instalado.
   ============================================================ */

@font-face {
	font-family: "Poppins";
	src: url("assets/fonts/poppins-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src: url("assets/fonts/poppins-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src: url("assets/fonts/poppins-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* ============================================================
   1. Variáveis — vêm do manual da marca
   ============================================================ */

:root {
	/* Cores. O laranja da marca foi medido no logotipo original: #FE4D01.
	   Sobre branco ele não alcança contraste suficiente para texto pequeno,
	   por isso existe o laranja profundo — use-o em link, rótulo e legenda,
	   e reserve o laranja puro para fundos, blocos e o logotipo. */
	--laranja: #FE4D01;
	--laranja-escuro: #C93A00;
	--laranja-claro: #FF8547;

	/* Azuis amostrados nas publicações do perfil oficial da escola.
	   A divisão de papéis: laranja é marca e ação; azul é instituição e
	   informação. Há razão técnica junto do gosto — sobre branco o laranja
	   dá contraste 3,35, insuficiente para texto pequeno, e o azul dá 8,46. */
	--azul: #105080;
	--azul-profundo: #102040;
	--azul-claro: #90C0D0;

	--grafite: #241A15;
	--cinza: #6B6259;
	--cinza-claro: #E7E0DA;
	--areia: #FFF4EE;
	--branco: #FFFFFF;

	/* Tipografia da marca.
	   "Colégio" e "AMERICANO" do logotipo são Century Gothic; "BATISTA" é uma
	   grotesca pesada. Nenhuma das duas pode ser hospedada (são comerciais),
	   então a Poppins ocupa o lugar — ver o bloco de @font-face acima.

	   O texto corrido segue na fonte do próprio sistema: carrega
	   instantaneamente, não custa download nenhum e é a que a pessoa já lê
	   o dia inteiro no aparelho dela. Poppins é geométrica e cansa em
	   parágrafo longo — ela fica nos títulos, onde o desenho importa. */
	--fonte-titulo: "Poppins", "Century Gothic", "URW Gothic", sans-serif;
	--fonte-texto: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;

	/* Escala tipográfica */
	--txt-p: 1.0625rem;
	--txt-lead: 1.1875rem;
	--txt-h3: clamp(1.05rem, 2vw, 1.25rem);
	--txt-h2: clamp(1.5rem, 3.4vw, 2.25rem);
	--txt-h1: clamp(2rem, 5vw, 3.25rem);

	/* Ritmo */
	--espaco-secao: clamp(3.5rem, 8vw, 6rem);
	--largura-max: 1140px;
	--largura-leitura: 66ch;
	--raio: 14px;

	--header-altura: 76px;

	/* Altura da pilastra. Vive aqui, e não no corpo da tela "Em Breve",
	   porque o pórtico aparece nas duas telas — na home ela não existia e as
	   colunas colapsavam para 2px. */
	--fuste-h: clamp(126px, 17vw, 184px);
}

/* ============================================================
   2. Base
   ============================================================ */

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

* {
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	/* Sem scroll-padding aqui: ele SOMA com o scroll-margin de cada seção,
	   e a âncora parava o dobro da distância abaixo do cabeçalho. Quem
	   reserva o espaço é a seção. */
	-webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Barra de rolagem: 5px, num laranja lavado. Ela acompanha a leitura,
   não disputa com o conteúdo — o laranja cheio fica para a marca. */
html {
	overflow-x: clip;
	scrollbar-width: thin;
	scrollbar-color: #F5B79A #FDF6F2;
}

::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

::-webkit-scrollbar-track {
	background: #FDF6F2;
}

::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, #FBC7AE 0%, #F2A177 100%);
	border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg, #F7B195 0%, #EC8A55 100%);
}

body {
	font-family: var(--fonte-texto);
	font-size: var(--txt-p);
	line-height: 1.65;
	color: var(--grafite);
	background: var(--branco);
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--laranja-escuro);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

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

:focus-visible {
	outline: 3px solid var(--laranja-escuro);
	outline-offset: 2px;
	border-radius: 2px;
}

h1, h2, h3, h4 {
	font-family: var(--fonte-titulo);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0.01em;
	text-wrap: balance;
	color: var(--grafite);
}

h1 { font-size: var(--txt-h1); }
h2 { font-size: var(--txt-h2); }
h3 { font-size: var(--txt-h3); font-weight: 600; letter-spacing: 0; }

p { max-width: var(--largura-leitura); }

/* ============================================================
   3. Utilitários de layout
   ============================================================ */

.container {
	width: 100%;
	max-width: var(--largura-max);
	margin-inline: auto;
	padding-inline: clamp(20px, 5vw, 32px);
}

.secao { padding-block: var(--espaco-secao); }
.secao--areia { background: var(--areia); }
.secao--grafite { background: var(--grafite); color: var(--cinza-claro); }
.secao--grafite h1,
.secao--grafite h2,
.secao--grafite h3 { color: var(--branco); }

/* Só para leitor de tela */
.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Pular para o conteúdo — primeiro item do teclado */
.pular-para-conteudo {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--grafite);
	color: var(--branco);
	padding: 12px 20px;
	border-radius: 0 0 var(--raio) 0;
}

.pular-para-conteudo:focus {
	left: 0;
	color: var(--branco);
}

/* ============================================================
   4. Botões
   ============================================================ */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--fonte-texto);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	padding: 14px 26px;
	border-radius: 999px;
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn--principal {
	background: var(--laranja);
	color: var(--branco);
}

.btn--principal:hover {
	background: var(--laranja-escuro);
	color: var(--branco);
}

.btn--contorno {
	border-color: currentColor;
	color: var(--azul);
	background: transparent;
}

.btn--contorno:hover {
	background: var(--azul);
	border-color: var(--azul);
	color: var(--branco);
}

/* ============================================================
   6. Rodapé
   ============================================================ */

/* ---------- A janela da rota ----------

   O trajeto aparece sobre o site, e não em outra aba: quem estava lendo a
   página continua nela quando fechar. */

.rota {
	position: fixed;
	inset: 0;
	z-index: 2100;
	display: grid;
	place-items: center;
	/* 80px de folga para a página aparecer em volta — o suficiente para
	   lembrar que a janela está SOBRE o site, e não no lugar dele. */
	padding: clamp(16px, 11vh, 80px) clamp(16px, 5.2vw, 80px);
}

.rota[hidden] { display: none; }

.rota__fundo {
	position: absolute;
	inset: 0;
	background: rgba(8, 16, 34, 0.82);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.rota.is-aberta .rota__fundo { opacity: 1; }

.rota__painel {
	position: relative;
	z-index: 1;
	/* Ocupa tudo o que a folga deixa, em vez de parar num teto fixo: com
	   1060px sobrava vão nas telas grandes e o mapa ficava pequeno. */
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	background: var(--branco);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(8, 16, 34, 0.45);
	opacity: 0;
	transform: translateY(18px) scale(0.98);
	transition: opacity 0.32s ease, transform 0.4s cubic-bezier(0.2, 0.85, 0.3, 1);
}

.rota.is-aberta .rota__painel { opacity: 1; transform: none; }

.rota__topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 20px clamp(18px, 3vw, 30px);
	border-bottom: 1px solid var(--cinza-claro);
}

.rota__chapeu {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--azul);
	margin-bottom: 4px;
}

.rota__titulo {
	font-size: clamp(1rem, 2vw, 1.25rem);
	line-height: 1.25;
	color: var(--azul-profundo);
	font-weight: 500;
}

.rota__titulo strong { font-weight: 600; color: var(--laranja-escuro); }

.rota__fechar {
	flex: none;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--cinza-claro);
	border-radius: 50%;
	background: var(--branco);
	color: var(--azul-profundo);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.rota__fechar:hover,
.rota__fechar:focus-visible {
	background: var(--azul-profundo);
	border-color: var(--azul-profundo);
	color: var(--branco);
	transform: scale(1.06);
}

/* Sem altura própria: é a linha do meio da grade do painel, e estica com
   ele. O min-height de zero é o que permite encolher dentro da grade —
   sem ele, o conteúdo do iframe impediria a linha de ceder. */
.rota__mapa {
	position: relative;
	min-height: 0;
	background: var(--cinza-claro);
}

.rota__mapa iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.rota__pe {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	padding: 16px clamp(18px, 3vw, 30px);
	border-top: 1px solid var(--cinza-claro);
}

.rota__pe p {
	margin: 0;
	max-width: none;
	font-size: 0.875rem;
	color: var(--cinza);
}

@media (max-width: 620px) {
	.rota { padding: 0; }
	.rota__painel { border-radius: 0; height: 100%; width: 100%; }
	.rota__pe { justify-content: center; text-align: center; }
	.rota__pe .btn { width: 100%; justify-content: center; }
}
/* ---------- A ficha do trajeto ----------

   Flutua sobre o mapa, no canto de cima à esquerda. O tempo e a distância
   vêm do OpenStreetMap; os meios de transporte recarregam o mapa no modo
   escolhido, e quem calcula cada um é o próprio Google. */

.ficha {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	width: min(268px, calc(100% - 28px));
	padding: 16px 18px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(8px);
	box-shadow: 0 10px 30px rgba(10, 22, 46, 0.22);
	display: grid;
	gap: 14px;
}

.ficha__rotulo {
	margin: 0 0 4px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--azul);
}

.ficha__valor {
	margin: 0;
	max-width: none;
	font-size: 0.9375rem;
	color: var(--cinza);
}

.ficha__valor strong {
	font-family: var(--fonte-titulo);
	font-size: 1.375rem;
	font-weight: 600;
	color: var(--azul-profundo);
	margin-right: 6px;
}

.ficha__botoes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
}

.ficha__modo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	border: 1px solid var(--cinza-claro);
	border-radius: 7px;
	background: var(--branco);
	color: var(--cinza);
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 500;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.ficha__modo:hover { border-color: var(--azul-claro); color: var(--azul-profundo); }

.ficha__modo.is-ativo {
	background: var(--azul-profundo);
	border-color: var(--azul-profundo);
	color: var(--branco);
}

.ficha__fonte {
	margin: 0;
	max-width: none;
	font-size: 0.6875rem;
	line-height: 1.4;
	color: var(--cinza);
	opacity: 0.75;
}

.ficha__tempo.is-buscando .ficha__valor strong { opacity: 0.4; }

@media (max-width: 620px) {
	/* Numa tela estreita a ficha cobriria o mapa inteiro: ela desce para
	   baixo dele e vira parte do fluxo. */
	.ficha {
		position: static;
		width: auto;
		border-radius: 0;
		box-shadow: none;
		background: var(--areia);
		backdrop-filter: none;
	}

	.rota__mapa { display: grid; grid-template-rows: 1fr auto; }
	.rota__mapa iframe { position: relative; inset: auto; min-height: 240px; }
}
/* ---------- Como chegar ----------

   A faixa do mapa, entre o conteúdo e o rodapé. À esquerda, a caixa que
   traça a rota; à direita, o mapa.

   O endereço sozinho obriga quem lê a abrir outro aplicativo e digitar o
   destino. Aqui a pessoa diz de onde sai, e o caminho é traçado. */

.chegar {
	background: var(--azul-profundo);
	color: rgba(255, 255, 255, 0.8);
}

.chegar__grade {
	display: grid;
	grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
	align-items: stretch;
	gap: 0;
	padding-inline: 0;
	max-width: none;
}

.chegar__caixa {
	/* Solta do container do site de propósito: esta faixa é uma peça
	   inteira de borda a borda, e a caixa nasce perto da borda esquerda em
	   vez de esperar a margem de leitura das outras seções. */
	padding: clamp(30px, 5vh, 58px) clamp(24px, 2.8vw, 48px);
	display: grid;
	align-content: center;
	justify-items: start;
}

.chegar__chapeu {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--laranja-claro);
	margin-bottom: 12px;
}

.chegar__titulo {
	font-size: clamp(1.35rem, min(2.3vw, 3.8vh), 1.875rem);
	line-height: 1.2;
	color: var(--branco);
	max-width: 18ch;
	margin-bottom: 12px;
}

.chegar__texto {
	font-size: 0.9375rem;
	line-height: 1.6;
	max-width: 40ch;
	margin-bottom: 20px;
	color: rgba(255, 255, 255, 0.74);
}

.chegar__forma {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	width: 100%;
	max-width: 100%;
}

.chegar__forma input {
	/* Base pequena: com 220px o campo tomava a linha inteira e empurrava o
	   botao para baixo, o que aumentava a altura da faixa a toa. */
	flex: 1 1 140px;
	min-width: 0;
	padding: 12px 14px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.07);
	color: var(--branco);
	font: inherit;
	font-size: 0.9375rem;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.chegar__forma input::placeholder { color: rgba(255, 255, 255, 0.45); }

.chegar__forma input:focus {
	outline: none;
	border-color: var(--laranja);
	background: rgba(255, 255, 255, 0.12);
}

.chegar__forma .btn { flex: none; }

.chegar__aviso {
	margin-top: 10px;
	font-size: 0.8125rem;
	color: var(--laranja-claro);
	min-height: 0;
}

.chegar__referencia {
	margin-top: 14px;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.55);
}

/* ---------- O mapa ---------- */

.chegar__mapa {
	position: relative;
	/* A âncora encosta a faixa logo abaixo da barra do topo, então ela tem
	   a tela inteira para ocupar — não precisa mais se encolher para caber
	   junto com o que vinha antes dela. */
	min-height: clamp(300px, 62vh, 600px);
	background: #0A1630;
}

.chegar__mapa iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	filter: grayscale(0.25) contrast(1.05);
}

/* A trava. Enquanto ela está por cima, a roda do mouse rola a página em
   vez de dar zoom no mapa — que é o que faz um mapa embutido sequestrar
   a rolagem de quem só está passando. Um clique libera. */
.chegar__trava {
	position: absolute;
	inset: 0;
	width: 100%;
	border: 0;
	padding: 0;
	background: rgba(10, 22, 46, 0.32);
	color: var(--branco);
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background-color 0.25s ease, opacity 0.25s ease;
}

.chegar__trava span {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 20px;
	border-radius: 999px;
	background: rgba(10, 22, 46, 0.88);
	font-size: 0.875rem;
	font-weight: 600;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.chegar__trava:hover { background: rgba(10, 22, 46, 0.18); }

.chegar__mapa.is-livre .chegar__trava {
	opacity: 0;
	pointer-events: none;
}

@media (max-width: 900px) {
	.chegar__grade { grid-template-columns: minmax(0, 1fr); }

	.chegar__caixa {
		padding: clamp(36px, 6vh, 56px) 20px;
		padding-left: 20px;
		justify-items: stretch;
	}

	.chegar__titulo { max-width: none; }
	.chegar__mapa { min-height: 300px; }
}
.rodape {
	/* O azul profundo do manual. O grafite de antes é uma variação de
	   marrom e não está na paleta da marca. */
	background: linear-gradient(180deg, #0C1B36 0%, var(--azul-profundo) 100%);
	color: rgba(255, 255, 255, 0.72);
	padding-block: clamp(52px, 8vh, 88px) clamp(30px, 4vh, 44px);
	font-size: 0.9375rem;
}

.rodape a { color: var(--laranja-claro); text-decoration: none; }
.rodape a:hover { text-decoration: underline; }

.rodape__grade {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 32px;
}

.rodape__logo img { width: 190px; }

/* O título de cada coluna com o ícone do assunto na frente — o mesmo
   gesto dos chapéus das seções. */
.rodape__titulo {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--fonte-titulo);
	font-size: 0.8125rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--branco);
	margin-bottom: 12px;
}

/* A última faixa: os direitos à esquerda, a assinatura da agência à
   direita. Em tela estreita elas empilham e centralizam. */
.rodape__pe {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: clamp(28px, 4vh, 44px);
	padding-top: clamp(18px, 2.6vh, 26px);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.rodape__agencia {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
	transition: color 0.2s ease;
}

.rodape__agencia:hover { color: var(--branco); text-decoration: none; }

/* O símbolo solto, sem caixa: ele já é uma silhueta branca sobre o azul,
   e uma moldura em volta só criaria uma borda que não existe na marca. */
.rodape__agencia img {
	display: block;
	width: 24px;
	height: 24px;
	opacity: 0.78;
	transition: opacity 0.2s ease;
}

.rodape__agencia:hover img { opacity: 1; }

@media (max-width: 620px) {
	.rodape__pe { justify-content: center; text-align: center; }
}

/* Sem linha nem respiro próprios: quem divide o rodapé agora é a faixa
   que envolve este texto. Antes as duas linhas ficavam a 20px uma da
   outra, e a de baixo passava rente ao texto. */
.rodape__creditos {
	margin: 0;
	font-size: 0.8125rem;
}



/* ============================================================
   7. Tela "Em Breve"

   O pórtico do logotipo é a interface. As quatro colunas do símbolo são os
   quatro segmentos de ensino: a arquitetura da marca vira a arquitetura da
   informação, e a primeira pergunta de qualquer pai — "tem a série do meu
   filho?" — já é respondida na tela de espera.
   ============================================================ */

#em-breve {
	--eb-fraco: #8B7D73;
	--zap: #25D366;
	--zap-escuro: #128C7E;

	min-height: 100svh;
	display: grid;
	align-content: center;
	grid-template-rows: 1fr auto;
}

/* Com a tarja ligada ela vira a primeira faixa do corpo, acima de tudo.
   Desligada, a grade continua sendo miolo + rodapé. */
#em-breve:has(> .tarja) {
	grid-template-rows: auto 1fr auto;
	position: relative;
	isolation: isolate;
	background:
		radial-gradient(90% 70% at 8% 92%, #F2F7FA 0%, transparent 62%),
		radial-gradient(120% 95% at 74% 8%, var(--areia) 0%, var(--branco) 58%),
		var(--branco);
	color: var(--cinza);
	/* Só o eixo horizontal é contido: a linha de luz sangra para fora,
	   mas a página precisa rolar em vertical quando a tela é baixa. */
	overflow-x: clip;
}

/* A linha diagonal que corta o símbolo, atravessando a tela. */
.luz {
	position: absolute;
	/* Sem sangrar para fora: um elemento mais largo que a tela cria barra
	   horizontal, e overflow-x no body é propagado para o viewport em vez
	   de recortar o filho. */
	left: 0;
	right: 0;
	top: 42%;
	height: 1px;
	z-index: -1;
	background: linear-gradient(90deg, transparent 0%, rgba(16, 80, 128, 0.3) 26%, rgba(254, 77, 1, 0.42) 58%, transparent 100%);
	transform: rotate(-2.4deg);
}

/* ---------- Grade ---------- */

.eb {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	/* O respiro de cima é menor que o de baixo: a tarja já ocupa o topo,
	   e o conteúdo se aproxima dela sem encostar. */
	padding-block: clamp(20px, 2.4vw, 32px) clamp(32px, 5vw, 64px);
	padding-inline: clamp(20px, 5vw, 48px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	/* A coluna da direita — a tag de obra e o pórtico — é um bloco só,
	   encostado no alto: começa na mesma altura em que o logotipo começa
	   do outro lado. */
	grid-template-areas:
		"marca   lado"
		"chamada lado";
	align-items: center;
	column-gap: clamp(36px, 6vw, 88px);
	row-gap: clamp(22px, 3vw, 34px);
}

.eb__marca { grid-area: marca; align-self: end; }
.eb__marca img { width: clamp(78px, 8vw, 104px); }

.eb__selo {
	margin-top: 12px;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--azul);
}

.eb__chamada { grid-area: chamada; }

.eb__lado {
	grid-area: lado;
	align-self: start;
}


/* O telefone com o botão de copiar ao lado, colado nele como se fossem
   uma peça só. */
.eb__telefone {
	display: inline-flex;
	align-items: stretch;
	border-radius: 999px;
	overflow: hidden;
	border: 1px solid var(--cinza-claro);
	background: var(--branco);
}

.eb__telefone .btn {
	border: 0;
	border-radius: 0;
	background: transparent;
}

/* O hover do botão de contorno pinta o texto de branco para contrastar com
   o fundo azul que ele mesmo aplica. Aqui o fundo não vem — quem manda no
   fundo é o invólucro, que é branco — então o texto branco sumiria. As duas
   metades da pílula reagem igual: fundo areia, cada uma com a sua cor. */
.eb__telefone .btn:hover,
.eb__telefone .btn:focus-visible {
	background: var(--areia);
	border-color: transparent;
	color: var(--azul);
}

.eb__copiar {
	display: grid;
	place-items: center;
	width: 44px;
	padding: 0;
	border: 0;
	border-left: 1px solid var(--cinza-claro);
	background: transparent;
	color: var(--cinza);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.eb__copiar:hover,
.eb__copiar:focus-visible {
	background: var(--areia);
	color: var(--laranja-escuro);
}

/* No toque não existe o problema que o botão resolve: lá o número liga. */
@media (hover: none) {
	.eb__copiar { display: none; }
	.eb__telefone { border-radius: 999px; }
}

/* ---------- Aviso de obra ----------
   Sem isto a tela parece um site quebrado, e não um site a caminho. É a
   primeira linha da coluna de leitura, antes até do título. */

.eb__aviso {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 9px;
	margin: 0 auto 18px;
	padding: 8px 16px 8px 13px;
	border-radius: 999px;
	background: var(--areia);
	border: 1px solid #F6D9C8;
	color: var(--laranja-escuro);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
}

.eb__pulso {
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--laranja);
	flex: none;
}

/* A onda é um segundo círculo por cima, que cresce e some. Fica só nele:
   nada mais na tela se mexe sozinho. */
@media (prefers-reduced-motion: no-preference) {
	.eb__pulso::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 50%;
		background: var(--laranja);
		animation: cab-pulso 2.4s ease-out infinite;
	}
}

@keyframes cab-pulso {
	0%   { transform: scale(1);   opacity: 0.55; }
	70%  { transform: scale(2.6); opacity: 0; }
	100% { transform: scale(2.6); opacity: 0; }
}

/* ---------- Chamada ---------- */

.eb__titulo {
	font-family: var(--fonte-titulo);
	font-size: clamp(2.05rem, 4.8vw, 3.4rem);
	line-height: 1.06;
	letter-spacing: -0.015em;
	color: var(--azul-profundo);
	margin-bottom: 20px;
}

.eb__titulo em { font-style: normal; color: var(--laranja-escuro); }

.eb__texto {
	max-width: 44ch;
	font-size: var(--txt-lead);
	line-height: 1.62;
	margin-bottom: 30px;
}

.eb__texto strong { color: var(--azul-profundo); font-weight: 600; }

/* "aqui" leva direto ao WhatsApp de matrículas. */
.zap {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: var(--grafite);
	text-decoration: underline;
	text-decoration-color: var(--zap);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.zap .icone {
	color: var(--zap);
	transition: transform 0.2s ease;
}

.zap:hover {
	color: var(--zap-escuro);
	text-decoration-color: var(--zap-escuro);
}

.zap:hover .icone { transform: scale(1.12); }

.eb__contatos {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 26px;
}

/* ---------- Redes ---------- */

.eb__redes {
	display: flex;
	gap: 10px;
}

.rede {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--cinza-claro);
	color: var(--cinza);
	transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.rede:hover {
	color: var(--branco);
	background: var(--azul);
	border-color: var(--azul);
}

/* ---------- O pórtico ---------- */

/* A coluna do pórtico é uma pilha centrada: selo, rótulo e a fachada. */
.portico { display: grid; justify-items: center; }

.eb__rotulo {
	font-family: var(--fonte-texto);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--azul);
	text-align: center;
	margin-bottom: 26px;
	width: 100%;
}

/* Frontão: o triângulo do símbolo, desenhado, não uma imagem. */
.portico__frontao {
	width: 100%;
	max-width: 430px;
	height: clamp(56px, 7vw, 78px);
	margin: 0 auto 4px;
	background: linear-gradient(180deg, var(--azul-profundo) 0%, var(--azul) 100%);
	clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

/* Arquitrave: a viga que apoia o frontão sobre as colunas. É ela que
   transforma quatro barras soltas numa fachada. */
.portico__arquitrave {
	width: 100%;
	max-width: 452px;
	height: 11px;
	margin: 0 auto;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--azul) 0%, var(--azul-profundo) 100%);
}

.portico__colunas {
	position: relative;
	width: 100%;
	max-width: 430px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(10px, 1.8vw, 18px);
	/* Pelo TOPO, e não pela base.

	   Alinhadas embaixo, a coluna com o rótulo mais alto subia e o fuste
	   dela saía acima da arquitrave — a fachada perdia o prumo. Quem tem de
	   bater é o alto dos fustes, que é onde a viga se apoia; o que sobra
	   embaixo é rótulo, e rótulo pode ter alturas diferentes. */
	align-items: start;
	padding-top: 4px;
}

/* Crepidoma: o embasamento em dois degraus, onde as colunas se apoiam.
   Fica logo abaixo dos fustes, não abaixo dos rótulos — senão vira
   sublinhado de legenda em vez de base de edifício.

   Dois degraus e não um: é o que dá altura ao edifício e o levanta do
   chão. Com um só, a fachada parecia apoiada numa régua. */
.portico__colunas::after,
.portico__colunas::before {
	content: "";
	position: absolute;
	border-radius: 3px;
	pointer-events: none;
}

/* Degrau de cima — o estilóbato propriamente dito. */
.portico__colunas::after {
	left: -10px;
	right: -10px;
	top: calc(var(--fuste-h) + 8px);
	height: 11px;
	background: linear-gradient(90deg, var(--azul) 0%, var(--azul-profundo) 50%, var(--azul) 100%);
}

/* Degrau de baixo, mais largo e mais escuro: é ele que assenta no chão. */
.portico__colunas::before {
	left: -22px;
	right: -22px;
	top: calc(var(--fuste-h) + 20px);
	height: 9px;
	background: linear-gradient(90deg, var(--azul-profundo) 0%, #0A162E 50%, var(--azul-profundo) 100%);
	box-shadow: 0 8px 22px rgba(16, 32, 64, 0.16);
}

/* Cada coluna é um botão de verdade: teclado e leitor de tela funcionam. */
.coluna {
	appearance: none;
	border: 0;
	background: transparent;
	padding: 0 0 14px;
	cursor: pointer;
	display: grid;
	justify-items: center;
	text-align: center;
	color: var(--cinza);
	transition: color 0.25s ease;
}

/* A coluna não é uma barra: tem capitel no topo, base embaixo e canaluras
   no corpo — as estrias verticais que fazem qualquer um reconhecer uma
   pilastra clássica. O logotipo tem o fuste liso, então isto lembra a
   marca sem repetir o desenho dela. */
.coluna__fuste {
	position: relative;
	display: block;
	width: 100%;
	height: var(--fuste-h);
	/* Espaço para os dois degraus da base antes do rótulo. */
	margin-bottom: 42px;
	background:
		/* 1. As canaluras. */
		repeating-linear-gradient(
			90deg,
			transparent 0 5px,
			rgba(16, 80, 128, 0.16) 5px 6px
		),
		/* 2. O volume. Uma coluna é um cilindro: a borda esquerda está na
		   sombra, a luz bate a um terço da largura e a direita volta a
		   escurecer. Sem esta camada o fuste é uma barra chata — é ela que
		   faz o desenho virar coluna. */
		linear-gradient(
			90deg,
			rgba(16, 32, 64, 0.20) 0%,
			rgba(16, 32, 64, 0.07) 12%,
			rgba(255, 255, 255, 0.92) 32%,
			rgba(255, 255, 255, 0.30) 50%,
			rgba(16, 32, 64, 0.06) 74%,
			rgba(16, 32, 64, 0.24) 100%
		),
		/* 3. A pedra. */
		linear-gradient(180deg, #F4F8FB 0%, #E6EEF5 100%);
	border: 1px solid #C8D8E4;
	transform-origin: bottom center;
	transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

/* Capitel e base transbordam a largura do fuste, como na arquitetura — e
   cada um é feito de duas peças, que é o que dá perfil a uma coluna: em
   cima o ábaco (a laje quadrada) sobre o equino (o colarinho que se abre);
   embaixo a base, que se alarga ao encontrar o chão.

   As duas peças vêm de camadas de fundo com larguras diferentes, e não de
   elementos novos: a tela "Em breve" usa a mesma coluna, e assim as duas
   ganham o perfil sem duplicar marcação. */
.coluna__fuste::before,
.coluna__fuste::after {
	content: "";
	position: absolute;
	left: -5px;
	right: -5px;
	background-repeat: no-repeat;
}

/* Capitel: ábaco em cima (largura cheia), equino embaixo (3px menor de
   cada lado). */
.coluna__fuste::before {
	top: -13px;
	height: 13px;
	background-image:
		linear-gradient(180deg, var(--azul) 0%, var(--azul-profundo) 100%),
		linear-gradient(180deg, var(--azul-profundo) 0%, var(--azul) 100%);
	background-size: 100% 6px, calc(100% - 6px) 6px;
	background-position: 0 0, 3px 7px;
}

/* Base: o inverso — a peça estreita em cima, a larga encostando no chão. */
.coluna__fuste::after {
	bottom: -12px;
	height: 12px;
	background-image:
		linear-gradient(180deg, var(--azul-profundo) 0%, var(--azul) 100%),
		linear-gradient(180deg, var(--azul) 0%, var(--azul-profundo) 100%);
	background-size: calc(100% - 6px) 5px, 100% 6px;
	background-position: 3px 0, 0 6px;
}

/* O nome do segmento tem duas partes: o segmento e, quando existe, a
   etapa dentro dele. Sempre ocupa duas linhas, mesmo quando a etapa não
   existe — senão a faixa etária de uma coluna sobe e desalinha as vizinhas. */
.coluna__nome {
	font-family: var(--fonte-titulo);
	font-size: clamp(0.7rem, 1.1vw, 0.8125rem);
	line-height: 1.25;
	color: inherit;
	transition: color 0.25s ease;
	display: grid;
	align-content: start;
	justify-items: center;
	gap: 1px;
	text-wrap: balance;
	/* Três linhas reservadas — duas de segmento mais a etapa. Numa coluna
	   estreita "Ensino Fundamental" quebra em duas, e sem esta reserva a
	   faixa etária de uma coluna desce em relação às vizinhas. */
	min-height: 4.9em;
}

.coluna__segmento { font-size: 1em; }

.coluna__etapa {
	font-size: 0.92em;
	opacity: 0.86;
}

.coluna__faixa {
	margin-top: 5px;
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	color: var(--azul);
	transition: color 0.25s ease;
}

.coluna:hover .coluna__fuste,
.coluna:focus-visible .coluna__fuste {
	border-color: var(--azul);
	background:
		repeating-linear-gradient(90deg, transparent 0 5px, rgba(16, 80, 128, 0.26) 5px 6px),
		linear-gradient(180deg, #E8F1F7 0%, #D5E5F0 100%);
}

.coluna:hover .coluna__nome,
.coluna:focus-visible .coluna__nome { color: var(--azul); }

.coluna.is-ativa { color: var(--grafite); }

.coluna.is-ativa .coluna__fuste {
	background:
		repeating-linear-gradient(
			90deg,
			transparent 0 5px,
			rgba(255, 255, 255, 0.22) 5px 6px
		),
		linear-gradient(180deg, var(--laranja) 0%, #E24400 100%);
	border-color: #E24400;
	box-shadow: 0 10px 26px rgba(254, 77, 1, 0.22);
}

.coluna.is-ativa .coluna__fuste::before,
.coluna.is-ativa .coluna__fuste::after {
	background: linear-gradient(180deg, #E24400 0%, #B83400 100%);
}

.coluna.is-ativa .coluna__nome { font-weight: 600; }
.coluna.is-ativa .coluna__faixa { color: var(--laranja-escuro); font-weight: 600; }


/* ---------- Tempo do rodízio ----------
   O piso acende sob a coluna em foco, avançando até a troca. É o mesmo
   estilóbato azul recebendo uma faixa laranja: mostra que o tempo corre
   sem precisar de um elemento novo na tela.

   A faixa some quando o rodízio para — no hover, ou depois de um clique.
   É assim que a pessoa percebe que assumiu o controle. */

.coluna { position: relative; z-index: 1; }

.coluna::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(var(--fuste-h) + 8px);
	height: 11px;
	border-radius: 3px;
	z-index: 2;
	background: linear-gradient(90deg, var(--laranja) 0%, #FF7A3C 100%);
	transform: scaleX(0);
	transform-origin: left center;
	opacity: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	.is-rodando .coluna.is-ativa::after {
		opacity: 1;
		animation: cab-progresso 5s linear forwards;
	}
}

@keyframes cab-progresso {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}
/* Texto do segmento na tela "Em breve" — altura reservada, para nada
   pular ao trocar. A home tem o seu, mais largo, na seção Níveis. */
#em-breve .portico__detalhe {
	max-width: 42ch;
	min-height: 3.4em;
	margin: 26px auto 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	text-align: center;
}

.portico__detalhe {
	color: var(--cinza);
	transition: opacity 0.16s ease, transform 0.16s ease;
}

.portico__detalhe.is-trocando {
	opacity: 0;
	transform: translateY(5px);
}

/* ---------- Entrada: as colunas sobem, como uma construção ---------- */

/* A animação roda sozinha, em CSS puro. Antes ela dependia de uma classe
   que o JavaScript adicionava por requestAnimationFrame — e o rAF não
   dispara em aba de segundo plano, então quem abrisse o site com
   Ctrl+clique via as colunas achatadas. Pior: se o JS falhasse, o pórtico
   nunca aparecia. Conteúdo não pode depender de script para existir. */
@media (prefers-reduced-motion: no-preference) {
	.coluna__fuste {
		animation: cab-erguer 0.85s cubic-bezier(0.16, 0.84, 0.3, 1) both;
		animation-delay: calc(var(--i) * 0.09s);
	}

	.portico__frontao {
		animation: cab-assentar 0.7s cubic-bezier(0.16, 0.84, 0.3, 1) 0.5s both;
	}
}

@keyframes cab-erguer {
	from { transform: scaleY(0.04); }
	to   { transform: scaleY(1); }
}

@keyframes cab-assentar {
	from { opacity: 0; transform: translateY(-10px); }
	to   { opacity: 1; transform: none; }
}

/* ---------- Telas estreitas ---------- */

@media (max-width: 900px) {
	.eb {
		grid-template-columns: 1fr;
		grid-template-areas:
			"marca"
			"chamada"
			"lado";
		row-gap: 38px;
		justify-items: center;
		text-align: center;
	}

	.eb__texto { margin-inline: auto; }
	.eb__contatos { justify-content: center; }
	.eb__redes { justify-content: center; }
	.eb__lado { width: 100%; }
}

@media (max-width: 460px) {
	.portico { --fuste-h: 112px; }
	.coluna__faixa { display: none; }
	.portico__colunas { gap: 5px; }
}


/* ---------- Rodapé de visita ----------
   Bloco azul no pé da tela: à esquerda o acesso de quem já é da escola,
   à direita o convite para quem ainda não é. São dois públicos diferentes
   na mesma faixa, e por isso ela é dividida ao meio. */

.visita {
	background: linear-gradient(160deg, var(--azul-profundo) 0%, #0C2A4A 55%, var(--azul) 100%);
	color: #C6D8E6;
	padding: clamp(40px, 6vw, 68px) clamp(20px, 5vw, 48px);
}

.visita__interno {
	max-width: 1200px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}

.visita__rotulo {
	font-family: var(--fonte-titulo);
	font-size: clamp(1.2rem, 2.2vw, 1.6rem);
	font-weight: 400;
	line-height: 1.2;
	color: var(--branco);
	margin-bottom: 10px;
}

.visita__texto {
	max-width: 46ch;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #A9C0D4;
	margin-bottom: 22px;
}

/* ---------- Plataformas ---------- */

.plataformas {
	display: grid;
	gap: 10px;
	max-width: 320px;
}

.plataforma {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 15px 22px;
	border-radius: 999px;
	background: var(--branco);
	color: var(--azul-profundo);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.plataforma__seta {
	font-size: 1.05rem;
	line-height: 1;
	transition: transform 0.2s ease;
}

.plataforma:hover {
	background: var(--laranja);
	color: var(--branco);
}

.plataforma:hover .plataforma__seta { transform: translateX(4px); }

/* ---------- Endereço e mapa ---------- */

.endereco {
	font-style: normal;
	display: grid;
	gap: 4px;
	margin-bottom: 20px;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.endereco strong { color: var(--branco); font-weight: 600; }
.endereco span { color: #A9C0D4; }

.mapa {
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.18);
	/* Altura fixa reserva o espaço antes do mapa chegar: sem isso o rodapé
	   pula quando o iframe carrega. */
	aspect-ratio: 16 / 9;
	background: rgba(255, 255, 255, 0.06);
}

.mapa iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	/* O mapa do Google chega muito claro sobre o azul; um pouco menos de
	   saturação o encaixa no bloco sem esconder a informação. */
	filter: saturate(0.85) contrast(1.02);
}

@media (max-width: 860px) {
	.visita__interno {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.plataformas { max-width: none; }
	.visita__texto { margin-inline: auto; }
	.visita { text-align: center; }
	.endereco { justify-items: center; }
	.plataforma { justify-content: center; }
	.plataforma__seta { display: none; }
}


/* ============================================================
   9. Tarja de matrícula

   Atravessa o topo do site inteiro, acima do cabeçalho. É o único lugar
   com o laranja cheio ocupando a largura toda — por isso funciona como
   chamada, e por isso não pode existir uma segunda igual na página.
   ============================================================ */

.tarja {
	position: relative;
	z-index: 101;
	background: linear-gradient(100deg, var(--laranja) 0%, #E24400 55%, var(--laranja-escuro) 100%);
	color: var(--branco);
	overflow: hidden;
}

/* As canaluras da pilastra, deitadas e em movimento lento. É o mesmo
   grafismo das colunas do pórtico — o fundo se mexe o bastante para o
   olho perceber, sem competir com a leitura da frase. */
.tarja::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: repeating-linear-gradient(
		100deg,
		transparent 0 22px,
		rgba(255, 255, 255, 0.13) 22px 25px,
		transparent 25px 30px,
		rgba(255, 255, 255, 0.07) 30px 32px
	);
	background-size: 240px 100%;
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	.tarja::before { animation: cab-canaluras 34s linear infinite; }
}

@keyframes cab-canaluras {
	from { background-position: 0 0; }
	to   { background-position: 240px 0; }
}

.tarja__interno { position: relative; z-index: 1; }

.tarja__interno {
	min-height: 54px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px 20px;
	padding-block: 8px;
}

.tarja__aviso {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 12px;
	max-width: none;
	margin: 0;
	line-height: 1.3;
	color: var(--branco);
	text-align: center;
}

/* O título usa a segunda fonte da marca — a grotesca pesada do BATISTA
   do logotipo — em caixa alta. É a que tem peso para ser lida de relance. */
.tarja__titulo {
	font-family: var(--fonte-texto);
	font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.tarja__texto {
	font-size: clamp(0.875rem, 1.2vw, 0.9375rem);
	font-weight: 500;
	color: rgba(255, 255, 255, 0.92);
}

.tarja__pulso {
	position: relative;
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--branco);
}

@media (prefers-reduced-motion: no-preference) {
	.tarja__pulso::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 50%;
		background: var(--branco);
		animation: cab-pulso 2.4s ease-out infinite;
	}
}

.tarja__botao {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	padding: 8px 18px;
	border-radius: 999px;
	background: var(--branco);
	color: var(--laranja-escuro);
	font-size: 0.875rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.tarja__botao:hover {
	background: var(--azul-profundo);
	color: var(--branco);
}

/* ============================================================
   9b. Cabeçalho

   Começa transparente sobre o conteúdo e, quando a página sai do topo,
   fecha em azul profundo — e o logotipo troca para a versão negativa, que
   é a aplicação prevista no manual para fundo escuro.
   ============================================================ */

.cabecalho {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(10px);
	/* Cabeçalho branco sobre conteúdo branco precisa de um limite. A linha é
	   laranja e translúcida: separa sem virar moldura. */
	border-bottom: 1px solid rgba(254, 77, 1, 0.22);
	transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

/* Sobre a foto da abertura o cabeçalho não tem fundo: o logotipo já é o
   negativo e a linha laranja some, para nada cortar a imagem. */
.cabecalho--sobre-hero {
	background: transparent;
	backdrop-filter: none;
	border-bottom-color: transparent;
}

.cabecalho--sobre-hero .cabecalho__logo-cor { opacity: 0; }
.cabecalho--sobre-hero .cabecalho__logo-negativo { opacity: 1; }
.cabecalho--sobre-hero .cabecalho__blog { color: var(--branco); }

.cabecalho.is-rolado {
	background: rgba(16, 32, 64, 0.96);
	backdrop-filter: blur(10px);
	border-bottom-color: rgba(254, 77, 1, 0.55);
	box-shadow: 0 8px 30px rgba(16, 32, 64, 0.18);
}

.cabecalho__interno {
	min-height: var(--header-altura);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

/* As duas versões do logotipo ocupam o mesmo lugar e trocam por opacidade. */
.cabecalho__logo {
	position: relative;
	display: block;
	line-height: 0;
	flex: none;
}

.cabecalho__logo img {
	height: clamp(32px, 4.2vw, 42px);
	width: auto;
	transition: opacity 0.35s ease;
}

.cabecalho__logo-negativo {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.cabecalho.is-rolado .cabecalho__logo-cor { opacity: 0; }
.cabecalho.is-rolado .cabecalho__logo-negativo { opacity: 1; }

.cabecalho__acoes {
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.8vw, 22px);
}

.cabecalho__blog {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--grafite);
	text-decoration: none;
	padding: 6px 0;
	border-bottom: 2px solid transparent;
	transition: color 0.3s ease, border-color 0.2s ease;
}

.cabecalho__blog:hover { border-bottom-color: var(--laranja); }
.cabecalho.is-rolado .cabecalho__blog { color: var(--branco); }

.btn--compacto {
	padding: 11px 20px;
	font-size: 0.875rem;
}

/* ---------- Institucional: o item do topo com as páginas internas ----------

   A lista abre ao passar o mouse ou ao chegar pelo teclado. Em tela
   estreita ela não abre — o link leva ao índice, que já lista tudo.

   Ela nasce colada na borda de baixo do link, cobrindo o traço laranja do
   hover: com os dois à vista viravam duas linhas laranjas soltas, uma
   curta e uma larga. Coberto o traço, a borda de cima da lista é a única
   linha, e ela parece brotar do próprio item. */

.menu-pai { position: relative; }

/* O item é um botão porque não leva a lugar nenhum — mas tem de parecer
   com os outros do topo, não com um botão. */
.menu-pai__botao {
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}

.submenu {
	position: absolute;
	/* Os 2px são a espessura do traço do hover: a lista começa em cima
	   dele, não embaixo. */
	top: calc(100% - 2px);
	left: 50%;
	z-index: 1;
	transform: translate(-50%, 5px);
	min-width: 236px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--branco);
	border: 1px solid var(--cinza-claro);
	border-top: 3px solid var(--laranja);
	border-radius: 0 0 8px 8px;
	box-shadow: 0 16px 40px rgba(16, 32, 64, 0.18);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

/* Enquanto a lista está aberta o item não sublinha. O painel já cobre o
   traço, mas ele leva 0,2s para ficar opaco — e nesses 0,2s dava para ver
   as duas linhas ao mesmo tempo. */
.menu-pai:hover .menu-pai__botao,
.menu-pai:focus-within .menu-pai__botao { border-bottom-color: transparent; }

.menu-pai:hover .submenu,
.menu-pai:focus-within .submenu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}

.submenu a {
	display: block;
	padding: 9px 12px;
	border-radius: 5px;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--grafite);
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

/* O cabeçalho escurece ao rolar e sobre a foto da abertura, e lá os links
   do topo ficam brancos. Dentro da lista o fundo é branco: o texto tem de
   voltar ao escuro. */
.cabecalho--sobre-hero .submenu a,
.cabecalho.is-rolado .submenu a { color: var(--grafite); }

/* O item sob o mouse fica no laranja fechado com texto branco: o areia
   quase não se distinguia do branco do painel. */
.submenu a:hover,
.submenu a:focus-visible {
	background: var(--laranja-escuro);
	color: var(--branco);
}
/* ---------- Telefone do topo ---------- */

.telefone {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.telefone__numero {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--grafite);
	text-decoration: none;
	transition: color 0.3s ease;
}

.telefone__numero:hover { color: var(--laranja); }

.cabecalho--sobre-hero .telefone__numero,
.cabecalho.is-rolado .telefone__numero { color: var(--branco); }

/* O botão de copiar só existe onde tocar no número não liga para ninguém:
   aparelho com mouse. No celular, o link tel: já resolve. */
.telefone__copiar { display: none; }

@media (hover: hover) and (pointer: fine) {
	.telefone__copiar {
		display: grid;
		place-items: center;
		width: 28px;
		height: 28px;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--cinza);
		cursor: pointer;
		opacity: 0;
		transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
	}

	.telefone:hover .telefone__copiar,
	.telefone__copiar:focus-visible { opacity: 1; }

	.telefone__copiar:hover {
		background: var(--areia);
		color: var(--laranja-escuro);
	}

	.cabecalho--sobre-hero .telefone__copiar,
	.cabecalho.is-rolado .telefone__copiar { color: rgba(255, 255, 255, 0.7); }

	.cabecalho--sobre-hero .telefone__copiar:hover,
	.cabecalho.is-rolado .telefone__copiar:hover {
		background: rgba(255, 255, 255, 0.14);
		color: var(--branco);
	}
}

@media (max-width: 720px) {
	.telefone__numero span { display: none; }

	/* O topo não tem largura para quatro rótulos: o botão do aluno fica só
	   com o ícone. Sem isto "Blog" era espremido a 15px e virava um talho
	   vertical de letras. */
	.btn--compacto {
		padding: 10px;
		font-size: 0;
	}

	.btn--compacto .icone,
	.btn--compacto svg { margin: 0; }

	/* Sem mouse, o toque no botão dá foco — e o :focus-within abre a lista.

	   Aqui ela deixa de se pendurar no item e passa a se pendurar no
	   cabeçalho inteiro, de borda a borda: centrada num item que fica perto
	   da esquerda, ela sangrava para fora da tela. */
	.cabecalho__interno { position: relative; }
	.menu-pai { position: static; }

	.submenu {
		top: 100%;
		left: 0;
		right: 0;
		min-width: 0;
		transform: translate(0, 5px);
		border-radius: 0 0 10px 10px;
	}

	.menu-pai:hover .submenu,
	.menu-pai:focus-within .submenu { transform: translate(0, 0); }
}

/* ---------- Aviso ----------
   Uma faixa curta no pé da tela confirmando o que acabou de acontecer.
   role="status" faz o leitor de tela anunciar sem roubar o foco. */

.aviso {
	position: fixed;
	left: 50%;
	bottom: 26px;
	z-index: 200;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 22px;
	border-radius: 999px;
	background: var(--azul-profundo);
	color: var(--branco);
	font-size: 0.9375rem;
	font-weight: 600;
	box-shadow: 0 14px 40px rgba(16, 32, 64, 0.3);
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(14px);
	transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 0.75, 0.2, 1), visibility 0.3s;
}

.aviso.is-visivel {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.aviso svg { color: var(--laranja-claro); flex: none; }

/* ============================================================
   9c. Bússola — a barra lateral de seções

   Sem fundo, flutuando à direita. O nome só aparece quando o mouse chega
   perto; quem usa teclado ou leitor de tela recebe o nome sempre.
   ============================================================ */

.bussola {
	position: fixed;
	right: clamp(10px, 1.6vw, 22px);
	top: 50%;
	transform: translateY(-50%);
	z-index: 80;
}

.bussola ul {
	list-style: none;
	display: grid;
	gap: 6px;
}

/* Largura fixa: o nome não pode empurrar a coluna do grid, senão todos os
   itens crescem junto e o item marcado vira uma pílula branca vazia. */
/* A bola branca é o corpo do botão, e não um estado de hover: a barra
   atravessa seções claras e escuras, e sem um fundo próprio os ícones
   sumiam em cima do azul da seção de Diferenciais. O que o hover traz é
   o anel laranja e o balão com o nome. */
.bussola__item {
	position: relative;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--branco);
	box-shadow: 0 4px 16px rgba(16, 32, 64, 0.16);
	color: var(--azul-profundo);
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

.bussola__icone {
	display: grid;
	place-items: center;
	width: 22px;
	flex: none;
}

/* O nome é um balão à esquerda do ícone, fora do fluxo. Não usa
   display:none para o leitor de tela continuar lendo. */
.bussola__nome {
	position: absolute;
	right: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%) translateX(8px);
	white-space: nowrap;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--azul-profundo);
	color: var(--branco);
	font-size: 0.8125rem;
	font-weight: 600;
	opacity: 0;
	pointer-events: none;
	box-shadow: 0 8px 22px rgba(16, 32, 64, 0.22);
	transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.22, 0.75, 0.2, 1);
}

.bussola__nome::after {
	content: "";
	position: absolute;
	left: 100%;
	top: 50%;
	margin-top: -4px;
	border: 4px solid transparent;
	border-left-color: var(--azul-profundo);
}

/* O anel laranja, só no hover e no foco. */
.bussola__item:hover,
.bussola__item:focus-visible {
	box-shadow: 0 6px 22px rgba(16, 32, 64, 0.2), inset 0 0 0 2px var(--laranja);
	color: var(--laranja-escuro);
	transform: scale(1.06);
}

.bussola__item:hover .bussola__nome,
.bussola__item:focus-visible .bussola__nome {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}

/* A seção em que a leitura está: ícone laranja e anel permanente. Como a
   bola branca agora é de todos, o que distingue esta é a cor. */
.bussola__item.is-atual {
	color: var(--laranja-escuro);
	box-shadow: 0 6px 22px rgba(16, 32, 64, 0.18), inset 0 0 0 2px var(--laranja);
}

/* Some no celular: lá a leitura é uma coluna só, e a barra roubaria a
   largura que o conteúdo precisa. */
@media (max-width: 980px) {
	.bussola { display: none; }
}

/* A âncora encosta a seção logo abaixo da barra do topo — que é onde a
   seção começa a ser visível. Como ela mede exatamente a janela menos a
   barra, o pé dela cai no pé da tela e a seção seguinte não aparece. */
#topo, #sobre, #niveis, #diferenciais, #estrutura, #depoimentos, #blog, #contato {
	scroll-margin-top: var(--header-altura);
}

/* ============================================================
   10. Abertura — carrossel de tela cheia
   ============================================================ */

.abertura {
	position: relative;
	/* 100svh e não 100vh: no celular, o vh conta a barra do navegador que
	   some ao rolar, e a primeira tela nasce cortada. A tarja fica acima da
	   abertura, então sua altura é descontada — o JavaScript mede e escreve
	   em --tarja-h, porque o texto dela quebra em telas estreitas. */
	min-height: calc(100svh - var(--tarja-h, 0px));
	display: grid;
	isolation: isolate;
	overflow: clip;
	background: var(--azul-profundo);
	/* Sobe para debaixo do cabeçalho, que flutua transparente sobre ela.
	   O pixel a mais fecha o fio de fundo do corpo que aparecia entre a
	   tarja e a foto, resto do arredondamento das alturas. */
	margin-top: calc((var(--header-altura) + 1px) * -1);
}

/* Recorta o avanço da imagem. Em scale 1.22 a foto fica ~170px mais larga
   que a tela; sem recorte aqui, sobra conteúdo para o lado e o navegador
   oferece rolagem horizontal. */
.abertura__telas {
	overflow: clip; display: grid; }

.tela {
	grid-area: 1 / 1;
	position: relative;
	display: grid;
	align-content: center;
	padding-top: calc(var(--header-altura) + 20px);
	padding-bottom: 120px;
	opacity: 0;
	visibility: hidden;
	/* A tela que sai some rápido; a que entra aparece depois, com folga.
	   Com o mesmo tempo nas duas, os dois textos ficavam legíveis ao mesmo
	   tempo no meio da troca, sobrepostos. */
	transition: opacity 0.35s ease, visibility 0.35s;
}

.tela.is-ativa {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.7s ease 0.25s, visibility 0s;
}

.tela__fundo {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
}

/* Véu sobre a foto: o texto é branco e precisa de fundo para ser legível
   em qualquer imagem que o cliente subir. Mais fechado à esquerda, onde a
   fala vive, e aberto à direita, onde a foto respira. */
.tela::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(
			90deg,
			rgba(10, 22, 46, 0.99) 0%,
			rgba(12, 26, 52, 0.97) 22%,
			rgba(16, 32, 64, 0.80) 44%,
			rgba(16, 32, 64, 0.34) 68%,
			rgba(16, 32, 64, 0.04) 100%
		),
		linear-gradient(180deg, rgba(16, 32, 64, 0.45) 0%, transparent 24%);
}

/* O movimento da imagem alterna de sentido a cada tela: a primeira se
   abre, a segunda se fecha, a terceira se abre de novo. Duas fotos
   seguidas andando para o mesmo lado viram um tique; alternando, cada
   troca de tela tem um movimento próprio.

   A conta é 22% em 8s — quase o dobro da velocidade de antes (16% em
   11s), o bastante para o olho perceber sem parecer que a foto está
   fugindo. Como a tela fica 7s no ar, a animação nunca chega ao fim:
   a imagem está sempre em movimento, sem o solavanco da parada. */
@media (prefers-reduced-motion: no-preference) {
	.tela.is-ativa .tela__fundo { animation: cab-afastar 8s linear both; }

	/* As telas pares vêm no sentido contrário. */
	.tela:nth-child(even).is-ativa .tela__fundo { animation-name: cab-aproximar; }
}

/* Abrindo: começa fechada na foto e vai recuando. */
@keyframes cab-afastar {
	from { transform: scale(1.22); }
	to   { transform: scale(1); }
}

/* Fechando: começa inteira e vai entrando na foto. */
@keyframes cab-aproximar {
	from { transform: scale(1); }
	to   { transform: scale(1.22); }
}

.tela__fala { max-width: 600px; margin-right: auto; }

.tela__chapeu {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--branco);
	margin-bottom: 18px;
}

.tela__chapeu::before {
	content: "";
	width: 26px;
	height: 3px;
	border-radius: 2px;
	background: var(--laranja);
}

.tela__titulo {
	/* Num notebook, largo e baixo, os 5,4vw davam 83px de corpo e a frase
	   tomava metade da dobra. O min() deixa a altura mandar quando a tela
	   é baixa: o título nunca passa de 8,6% dela. */
	font-size: clamp(1.9rem, min(5.4vw, 7.2vh), 4rem);
	line-height: 1.03;
	letter-spacing: -0.022em;
	color: var(--branco);
	margin-bottom: 20px;
	text-wrap: balance;
}

.tela__texto {
	max-width: 42ch;
	font-size: clamp(1rem, 1.5vw, 1.1875rem);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.86);
}

/* ---------- Controles ---------- */

.abertura__controles {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(28px, 4vw, 48px);
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 18px;
}

.abertura__setas { display: flex; gap: 8px; }

.seta {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.4);
	background: rgba(16, 32, 64, 0.32);
	backdrop-filter: blur(6px);
	color: var(--branco);
	cursor: pointer;
	transition: background-color 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}

.seta:hover {
	background: var(--laranja);
	border-color: var(--laranja);
	transform: translateY(-2px);
}

.abertura__marcas {
	display: flex;
	align-items: center;
	gap: 8px;
	list-style: none;
}

.marca {
	display: block;
	width: 26px;
	height: 4px;
	border-radius: 2px;
	border: 0;
	padding: 0;
	background: rgba(255, 255, 255, 0.35);
	cursor: pointer;
	transition: background-color 0.25s ease, width 0.3s ease;
}

.marca:hover { background: rgba(255, 255, 255, 0.7); }
.marca.is-ativa { width: 46px; background: var(--laranja); }

/* O relógio: um anel que enche enquanto a tela está no ar. Diz quanto
   falta para a troca — informação que o número "1 de 2" não dava, já que
   as marcas ao lado mostram a quantidade. */
.relogio {
	position: relative;
	margin-left: auto;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	flex: none;
}

.relogio svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* Começa no topo, e não à direita, para o anel encher como um relógio. */
	transform: rotate(-90deg);
}

.relogio circle {
	fill: none;
	stroke-width: 2;
}

.relogio__trilha { stroke: rgba(255, 255, 255, 0.28); }

.relogio__volta {
	stroke: var(--laranja);
	stroke-linecap: round;
	/* 2 * pi * 19 */
	stroke-dasharray: 119.4;
	stroke-dashoffset: 119.4;
}

.is-contando .relogio__volta {
	animation: cab-encher var(--tempo-slide, 7s) linear forwards;
}

@keyframes cab-encher {
	from { stroke-dashoffset: 119.4; }
	to   { stroke-dashoffset: 0; }
}

.relogio__numero {
	font-family: var(--fonte-titulo);
	font-size: 0.875rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--branco);
}

/* Sem troca automática, o anel não tem o que contar. */
.relogio.is-parado .relogio__trilha { stroke: rgba(255, 255, 255, 0.18); }

/* Um traço piscando no rodapé da tela, convidando a rolar. */
.abertura__descer {
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 1px;
	height: 56px;
	background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.6));
	z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
	.abertura__descer { animation: cab-descer 2.6s ease-in-out infinite; }
}

@keyframes cab-descer {
	0%, 100% { opacity: 0.25; transform: scaleY(0.6); transform-origin: bottom; }
	50%      { opacity: 1;    transform: scaleY(1);   transform-origin: bottom; }
}

@media (max-width: 900px) {
	.tela { padding-bottom: 150px; }
	.tela__fundo { object-position: center 30%; }

	.abertura__controles { flex-wrap: wrap; gap: 14px; }
	.abertura__contagem { margin-left: 0; }

	/* No celular o véu é vertical: o texto fica embaixo, sobre a parte
	   mais escura, e a foto respira em cima. */
	.tela::after {
		background: linear-gradient(180deg, rgba(16, 32, 64, 0.5) 0%, rgba(16, 32, 64, 0.55) 35%, rgba(16, 32, 64, 0.92) 100%);
	}

	.tela { align-content: end; }
	.abertura__descer { display: none; }
}

/* ============================================================
   10. Página inicial
   ============================================================ */

/* ---------- Cabeça de seção ---------- */

.secao__cabeca { margin-bottom: clamp(32px, 5vw, 52px); }
.secao__cabeca--centro { text-align: center; }
.secao__cabeca--centro .secao__texto { margin-inline: auto; }

.secao__cabeca--linha {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 20px;
}

/* O ícone e o texto numa linha só, alinhados pelo meio. O inline-flex
   mantém o bloco do tamanho do conteúdo, para o chapéu não virar uma
   faixa larga e invisível por cima do título. */
.secao__chapeu {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--fonte-texto);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--azul);
	margin-bottom: 10px;
}

.secao__chapeu-icone {
	display: grid;
	place-items: center;
	flex: none;
	color: var(--laranja);
}


.secao__texto {
	max-width: 58ch;
	margin-top: 14px;
	color: var(--cinza);
}

/* O eco do frontão: um triângulo pequeno abrindo o título. */
.frontao-mini {
	display: block;
	width: 30px;
	height: 13px;
	margin-bottom: 14px;
	background: linear-gradient(180deg, var(--azul-profundo), var(--azul));
	clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.secao__cabeca--centro .frontao-mini { margin-inline: auto; }

/* ---------- Cada seção da home ocupa a altura da janela ----------

   Sem isto, uma seção mais curta que a tela deixava a seguinte espiando
   por baixo: a pessoa via meia faixa de outra cor no pé do monitor, e o
   conjunto perdia a leitura de "uma tela, um assunto".

   min-height e não height: se o conteúdo for maior que a janela — telas
   muito baixas, texto grande do navegador — a seção cresce em vez de
   cortar. E o respiro de topo passa a ser medido em vh: num notebook os
   96px fixos sozinhos já comiam um quarto da tela. */
.home #conteudo-principal > .secao {
	/* A janela menos a barra do topo, que é fixa e fica por cima.

	   Com a tela inteira, os primeiros 77px da seção ficavam atrás da barra
	   e o conteúdo centrado subia para debaixo dela — o título do Sobre
	   aparecia cortado pela metade. A conta certa é o que sobra de janela. */
	min-height: calc(100svh - var(--header-altura));
	display: grid;
	align-content: center;
	padding-block: clamp(32px, 5.6vh, 96px);
}

/* ---------- Níveis de ensino ---------- */

/* Um clarão morno atrás da fachada, saindo do chão: separa o pórtico do
   branco da página sem pintar a seção de outra cor. */
.secao--segmentos {
	position: relative;
	background: var(--branco);
	isolation: isolate;
}

/* O fundo da seção é a própria marca, em voz baixa.

   Três camadas, todas em azul muito lavado — nenhuma delas desenha um
   objeto, só sugere a parede atrás da fachada:

   1. Canaluras verticais, as mesmas estrias das colunas do logotipo, num
      passo bem maior. É o eco da pilastra numa escala de parede.
   2. Fiadas horizontais largas, como as juntas da pedra.
   3. O clarão morno que já separava a seção do branco da página.

   A máscara apaga o desenho nas bordas: ele nasce no meio e se dissolve
   antes de encostar nas seções vizinhas, para não virar moldura. */
.secao--segmentos::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		repeating-linear-gradient(
			90deg,
			transparent 0 38px,
			rgba(16, 80, 128, 0.055) 38px 40px
		),
		repeating-linear-gradient(
			180deg,
			transparent 0 118px,
			rgba(16, 80, 128, 0.032) 118px 119px
		),
		radial-gradient(70% 52% at 50% 74%, rgba(254, 77, 1, 0.055) 0%, transparent 62%),
		radial-gradient(84% 62% at 50% 30%, rgba(16, 80, 128, 0.05) 0%, transparent 66%);
	-webkit-mask-image: radial-gradient(112% 88% at 50% 50%, #000 28%, transparent 82%);
	mask-image: radial-gradient(112% 88% at 50% 50%, #000 28%, transparent 82%);
	pointer-events: none;
}

/* O frontão da marca, gigante e quase apagado, ancorado no canto de baixo
   à esquerda — do lado oposto à fachada de verdade, para os dois não
   disputarem. É desenhado, não é imagem: o mesmo clip-path do pórtico. */
.secao--segmentos::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: clamp(-90px, -4vw, -40px);
	bottom: -8%;
	width: clamp(260px, 30vw, 460px);
	height: clamp(150px, 17vw, 265px);
	background: linear-gradient(160deg, rgba(16, 80, 128, 0.05) 0%, rgba(16, 32, 64, 0.02) 100%);
	clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
	pointer-events: none;
}


/* ---------- Frontões boiando no fundo ----------

   O triângulo do logotipo, repetido em nove tamanhos e três tons de
   laranja — todos muito lavados. Repetida assim, a forma deixa de ser um
   desenho e vira textura: a pessoa reconhece a marca sem parar para olhar.

   As linhas verticais da parede ficam paradas; quem se move são só os
   triângulos, devagar, cada um no seu tempo. */

.niveis__ceu {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.frontao-boia {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: var(--w);
	/* A mesma proporção do frontão do logotipo. */
	height: calc(var(--w) * 0.62);
	clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
	/* Vale também para quem tem movimento reduzido: lá eles ficam parados,
	   mas continuam cada um no seu ângulo. */
	transform: rotate(var(--giro));
	will-change: transform;
}

/* Três tons, do mais quente ao mais lavado. Nenhum passa de 12% de
   opacidade: é fundo, e fundo não disputa com o pórtico da frente. */
.frontao-boia--1 { background: linear-gradient(170deg, rgba(254, 77, 1, 0.10) 0%, rgba(254, 77, 1, 0.035) 100%); }
.frontao-boia--2 { background: linear-gradient(150deg, rgba(255, 133, 71, 0.12) 0%, rgba(255, 133, 71, 0.04) 100%); }
.frontao-boia--3 { background: linear-gradient(195deg, rgba(201, 58, 0, 0.075) 0%, rgba(201, 58, 0, 0.025) 100%); }

@media (prefers-reduced-motion: no-preference) {
	/* alternate: vai e volta pelo mesmo caminho, sem nunca dar um salto
	   para recomeçar. Os atrasos negativos entram com a animação já em
	   curso, para os nove não partirem juntos no carregamento. */
	.frontao-boia {
		animation: cab-boiar var(--dur) ease-in-out var(--atraso) infinite alternate;
	}
}

/* O giro é fixo por triângulo e entra nos dois quadros: sem ele aqui, a
   inclinação seria descartada assim que a animação começasse. */
@keyframes cab-boiar {
	from { transform: translate(0, 0) rotate(var(--giro)); }
	to   { transform: translate(var(--dx), var(--dy)) rotate(var(--giro)); }
}
/* Na tela estreita o frontão do fundo sai: não sobra largura para ele
   ficar longe da fachada, e perto dela vira sujeira. */
@media (max-width: 900px) {
	.secao--segmentos::after { display: none; }

	/* Numa faixa estreita nove triângulos viram sujeira atrás do texto:
	   ficam os quatro maiores. */
	.frontao-boia:nth-child(2),
	.frontao-boia:nth-child(3),
	.frontao-boia:nth-child(6),
	.frontao-boia:nth-child(8),
	.frontao-boia:nth-child(9) { display: none; }
}

/* A fala à esquerda, a fachada à direita. Fora do centro, o pórtico deixa
   de ser um enfeite embaixo do título e passa a ser a metade direita da
   seção — e o painel, que muda a cada escolha, fica na linha de leitura,
   logo abaixo do título. */
.niveis__grade {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	/* O chapéu e o título começam no topo da seção, na mesma altura em que
	   começam nas outras — centrados, eles desciam para o meio da fachada e
	   a seção perdia o alinhamento com o resto da página. */
	align-items: start;
	gap: clamp(32px, 5vw, 72px);
}

/* O rótulo acompanha a largura da fachada.

   "Ensino Fundamental" em 13px mede 89px; a coluna, num notebook, mede 73.
   O excesso vazava para os lados e os rótulos de colunas vizinhas se
   encostavam. Agora o corpo da letra é uma fração da fachada, e a palavra
   cabe em qualquer tela. O break-word é a rede: se um nome novo for maior
   que qualquer coisa prevista, ele quebra em vez de invadir o vizinho. */
.portico--home .coluna__nome {
	font-size: clamp(0.625rem, calc(var(--fachada-w) / 32), 0.8125rem);
	overflow-wrap: break-word;
	min-width: 0;
}

.portico--home .coluna__faixa {
	font-size: clamp(0.5625rem, calc(var(--fachada-w) / 46), 0.6875rem);
	overflow-wrap: break-word;
}

/* A coluna da fala fica larga o bastante para o título caber numa linha
   só, e aí ele vira uma faixa comprida em vez de um bloco. Duas linhas
   equilibradas assentam melhor sobre o texto. */
.niveis__fala h2 {
	max-width: 19ch;
	text-wrap: balance;
}

/* O texto da seção segura a coluna da esquerda: sozinhos, chapéu e título
   deixavam meia tela vazia ao lado de uma fachada alta. */
.niveis__texto {
	max-width: 46ch;
	margin-top: 18px;
}

.niveis__texto p:last-child { margin-bottom: 0; }

/* A fachada se mede pela janela inteira, não só pela largura dela.

   Só com vw, um notebook — largo e baixo — recebia a fachada no tamanho
   máximo e ela saía pelo pé da tela. O min() faz a altura mandar quando a
   tela é baixa: a coluna nunca passa de 30% da altura visível. */
.portico--home { --fuste-h: clamp(180px, min(23vw, 30vh), 300px); }

/* Encostada na direita, e não centrada na coluna: o pórtico é a borda da
   seção. O respiro à direita é só o que o degrau de baixo precisa para
   transbordar sem ser cortado. */
.portico--home {
	justify-items: end;
	padding-right: 26px;
}

/* A largura da fachada é calculada a partir da altura da coluna, para a
   proporção não mudar: quatro colunas na razão 1:3 mais os vãos entre
   elas. Sem isto, uma tela baixa encolhia só a altura e as colunas
   engordavam.

   O teto de 52% da faixa impede que ela cresça demais numa tela alta. */
.portico--home {
	--fachada-w: min(52vw, calc(var(--fuste-h) * 1.34 + 52px));
}

.portico--home .portico__colunas,
.portico--home .portico__frontao,
.portico--home .portico__arquitrave {
	width: var(--fachada-w);
	max-width: 100%;
	margin-inline: 0;
}

.portico--home .portico__frontao { height: clamp(58px, min(7.2vw, 9.5vh), 96px); }

/* A luz do sol na fachada.

   Uma mancha quente atrás das colunas que desliza para a que está em foco.
   A posição e a largura vêm do JavaScript, em variável CSS, então ela
   acompanha qualquer quantidade de colunas sem número mágico no CSS.

   É um elemento só, e é o único que se move: a fachada fica parada e a luz
   atravessa ela — como sol da tarde passando por um pórtico de verdade. */
.portico__luz {
	position: absolute;
	z-index: 0;
	top: -26px;
	left: 0;
	width: var(--luz-w, 25%);
	height: calc(var(--fuste-h) + 72px);
	transform: translateX(var(--luz-x, 0));
	background:
		radial-gradient(58% 50% at 50% 34%, rgba(254, 77, 1, 0.26) 0%, rgba(254, 77, 1, 0.08) 46%, transparent 74%),
		radial-gradient(120% 44% at 50% 96%, rgba(254, 77, 1, 0.16) 0%, transparent 70%);
	pointer-events: none;
	opacity: 0;
	transition:
		transform 0.55s cubic-bezier(0.3, 0.9, 0.25, 1),
		width 0.55s cubic-bezier(0.3, 0.9, 0.25, 1),
		opacity 0.4s ease;
}

/* Só acende depois que o JavaScript souber onde ela fica: sem isso, ela
   pisca no canto esquerdo no primeiro quadro. */
.portico__luz.is-acesa { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.portico__luz { transition: opacity 0.4s ease; }
}

/* A coluna em foco projeta sombra no chão, como um volume de verdade. */
.coluna.is-ativa .coluna__fuste {
	box-shadow:
		0 10px 26px rgba(254, 77, 1, 0.26),
		0 2px 0 rgba(16, 32, 64, 0.10);
}

/* ---------- O painel do segmento ---------- */

/* GUARDADO. O painel do segmento continua montado e o JavaScript continua
   alimentando ele — só não aparece, enquanto a interação da seção está
   sendo redesenhada. Para trazer de volta, apague a linha do display. */
.portico__painel {
	display: none;

	max-width: 46ch;
	margin: 26px 0 0;
	justify-items: start;
	gap: 6px;
}

.portico__nome {
	font-family: var(--fonte-titulo);
	font-size: clamp(1.25rem, 2.4vw, 1.625rem);
	font-weight: 600;
	line-height: 1.15;
	color: var(--azul-profundo);
	display: grid;
	gap: 2px;
	/* Duas linhas reservadas: sem etapa, a faixa etária subia e o painel
	   pulava a cada troca. */
	min-height: 2.1em;
}

.portico__nome-etapa {
	font-size: 0.66em;
	font-weight: 500;
	color: var(--azul);
}

.portico__faixa {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--laranja-escuro);
}

.portico__detalhe {
	max-width: 46ch;
	min-height: 3.2em;
	margin: 10px 0 0;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--cinza);
	transition: opacity 0.16s ease, transform 0.16s ease;
}

/* Nome, faixa e texto trocam juntos: são a mesma informação. */
.portico__nome,
.portico__faixa {
	transition: opacity 0.16s ease, transform 0.16s ease;
}

.portico__detalhe.is-trocando,
.is-trocando .portico__nome,
.is-trocando .portico__faixa {
	opacity: 0;
	transform: translateY(5px);
}

.portico__link { margin-top: 14px; }
.portico__link.is-oculto { display: none; }

/* Empilhado, o painel tem de vir DEPOIS da fachada: com ele acima, quem
   tocasse numa coluna veria o texto mudar fora da tela.

   display:contents dissolve a caixa da fala e entrega os três filhos à
   grade, que então os ordena junto com o pórtico. */
@media (max-width: 900px) {
	.niveis__grade { grid-template-columns: minmax(0, 1fr); }
	.niveis__fala { display: contents; }

	.niveis__grade .secao__chapeu { order: 1; }
	.niveis__grade h2 { order: 2; margin-bottom: 8px; }
	.niveis__grade .niveis__texto { order: 3; max-width: none; }
	/* Empilhada, a fachada volta ao centro: encostar na direita só faz
	   sentido quando existe uma coluna de texto à esquerda dela. */
	/* Empilhada, a fachada volta ao centro e perde o teto de 52vw — que
	   só existe para ela não invadir a fala quando há duas colunas. */
	.niveis__grade .portico {
		order: 4;
		justify-items: center;
		padding-right: 0;
		--fachada-w: min(100%, calc(var(--fuste-h) * 1.34 + 52px));
	}
	.niveis__grade .portico__painel { order: 5; max-width: none; }
}

/* Quando a fachada ocupa a largura inteira do container, o transbordo
   dos degraus sai pela borda da tela e eles aparecem cortados. Aqui os
   degraus recolhem — a proporção entre eles se mantém. */
@media (max-width: 760px) {
	.portico__colunas::after  { left: -6px;  right: -6px; }
	.portico__colunas::before { left: -13px; right: -13px; }
}
/* ---------- Quem somos ---------- */

.sobre__grade {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
	/* Texto e álbum começam no topo da seção. Centrados, o texto descia
	   32px e o chapéu desta seção não batia com o das outras. */
	align-items: start;
	gap: clamp(32px, 5vw, 68px);
}

/* O álbum da história.

   As fotos ficam empilhadas no mesmo lugar e trocam por opacidade: assim a
   caixa nunca muda de tamanho e o texto ao lado não dança. O 4/3 vem do
   corte obrigatório no painel, então todas entram com a mesma proporção.

   As setas moram DENTRO da caixa, encostadas nas bordas, e só aparecem com
   o mouse sobre a foto. Fora dela a seção é texto — setas paradas ali
   seriam ruído. Quem navega por teclado enxerga as duas ao focar. */
/* Encostado na direita, e encolhendo pelos dois lados.

   Num notebook a foto em 4:3 numa coluna larga passava de 300px de altura
   e empurrava a tabela de marcos para fora da tela. O teto é de altura —
   42% da janela — e a largura vem dele, para a proporção não mudar. Como
   a caixa encolhe, ela precisa de um lado para encostar: a borda direita
   da página, e não o meio da coluna. */
.sobre__grade > .album {
	justify-self: end;
	width: min(100%, calc(var(--album-h) * 4 / 3));
}

.album { --album-h: 47vh; }

.album__palco {
	position: relative;
	border-radius: 6px;
	overflow: hidden;
	border-top: 8px solid var(--azul-profundo);
	/* Segura a altura antes de a primeira foto carregar. */
	aspect-ratio: 4 / 3;
	max-height: var(--album-h);
	background: var(--cinza-claro);
}

.album .foto {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

.album .foto.is-ativa {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.6s ease, visibility 0s;
}

.album .foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* A legenda repousa sobre um esmaecido do próprio azul da marca, para o
   texto branco ter contraste em qualquer foto. */
.foto__legenda {
	position: absolute;
	inset: auto 0 0 0;
	padding: 34px 18px 14px;
	font-size: 0.875rem;
	line-height: 1.35;
	color: var(--branco);
	background: linear-gradient(180deg, transparent 0%, rgba(16, 32, 64, 0.82) 62%);
}

.album__seta {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--azul-profundo);
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease, background-color 0.2s ease, transform 0.2s ease;
	box-shadow: 0 2px 10px rgba(16, 32, 64, 0.22);
}

.album__seta--anterior { left: 12px; }
.album__seta--proxima  { right: 12px; }

.album__palco:hover .album__seta,
.album__seta:focus-visible {
	opacity: 1;
	pointer-events: auto;
}

.album__seta:hover {
	background: var(--branco);
	transform: translateY(-50%) scale(1.06);
}

/* No toque não existe hover — e na tela estreita, onde a coluna vira uma
   faixa larga, revelar a seta com o dedo é uma aposta. Nos dois casos elas
   ficam sempre à vista. */
@media (hover: none), (max-width: 900px) {
	.album__seta { opacity: 1; pointer-events: auto; }
}

.album__marcas {
	display: flex;
	justify-content: center;
	gap: 8px;
	list-style: none;
	margin-top: 14px;
}

.album__marca {
	display: block;
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--cinza-claro);
	cursor: pointer;
	transition: background-color 0.25s ease, width 0.25s ease;
}

.album__marca:hover { background: var(--laranja-claro); }

/* A foto no ar vira um traço, e não outra bolinha: dá para saber onde se
   está sem contar as marcas. */
.album__marca.is-ativa {
	width: 22px;
	border-radius: 999px;
	background: var(--laranja);
}

.prosa p { margin-bottom: 14px; color: var(--cinza); }
.prosa p:last-child { margin-bottom: 22px; }

/* Os marcos herdam o ritmo das colunas: larguras iguais, divididas por um fio. */
.marcos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1px;
	/* Em vh: numa tela baixa, um respiro fixo de 56px era o que fazia a
	   seção passar da altura da janela. */
	margin-top: clamp(22px, 4vh, 56px);
	background: var(--cinza-claro);
	border: 1px solid var(--cinza-claro);
	border-radius: 6px;
	overflow: hidden;
}

/* Zebrado: uma célula branca, a seguinte num laranja lavado. Sem isto o
   bloco era uma faixa areia sobre fundo areia, e as divisões sumiam.

   A alternância é por posição, então ela segue funcionando quando a grade
   reflui para duas colunas ou para uma — o que muda é o desenho, de
   listras para xadrez, e os dois leem como intencionais. */
.marco {
	position: relative;
	overflow: hidden;
	background: var(--branco);
	padding: 22px;
	text-align: center;
	transition: background-color 0.3s ease;
}

.marco:nth-child(even) { background: #FFE6D8; }

/* Ao passar o mouse a célula vira coluna: o fundo mergulha no azul
   profundo, o conteúdo se acende em cima dele e uma base laranja cresce
   do rodapé — o mesmo fuste das pilastras do pórtico, reduzido a 3px.

   Azul e não laranja porque, no manual, laranja é marca e ação e azul é
   instituição e informação: estes são números da história, não botões. */
/* A base da coluna. Nasce do meio para os lados, como o fuste assentando. */
.marco::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 3px;
	background: var(--laranja);
	transform: scaleX(0);
	transition: transform 0.35s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.marco:hover { background: var(--azul-profundo); }
.marco:hover::after { transform: scaleX(1); }

.marco:hover .marco__valor  { color: var(--branco); }
.marco:hover .marco__rotulo { color: var(--azul-claro); }

.marco:hover .marco__icone {
	color: var(--laranja-claro);
	transform: translateY(-3px);
}

.marco__valor,
.marco__rotulo { transition: color 0.3s ease; }

/* O ícone anuncia o assunto antes do número. Vai no mesmo laranja fechado
   do número — o laranja cheio dá 2,8:1 sobre a célula pintada, e um traço
   de 1,6px nesse contraste some. O traço fino já o deixa mais leve que o
   número sem precisar clarear a cor. */
.marco__icone {
	display: block;
	margin: 0 auto 10px;
	width: 26px;
	height: 26px;
	color: var(--laranja-escuro);
	transition: color 0.3s ease, transform 0.35s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.marco__valor {
	font-family: var(--fonte-titulo);
	font-size: clamp(1.6rem, 3.2vw, 2.2rem);
	font-weight: 600;
	line-height: 1;
	color: var(--laranja-escuro);
	font-variant-numeric: tabular-nums;
}

.marco__rotulo {
	margin-top: 8px;
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--cinza);
}

/* ---------- Diferenciais ----------

   A única seção escura do miolo da página. Depois de três telas claras
   seguidas, o azul dá o corte — e sobre ele a foto entra bem apagada, com
   um movimento mais lento que o da página.

   A foto não é decoração colada: ela é uma camada com vida própria, e é o
   contraste entre a velocidade dela e a do texto que dá profundidade. */

.secao--diferenciais {
	position: relative;
	isolation: isolate;
	background:
		radial-gradient(120% 80% at 20% 0%, #17325F 0%, transparent 58%),
		linear-gradient(165deg, var(--azul-profundo) 0%, #0A1428 100%);
	color: var(--branco);
	overflow: hidden;
}

.dif-fundo {
	position: absolute;
	z-index: -1;
	/* Bem mais alta que a seção: a sobra é o curso do deslizamento, e é o
	   tamanho dela que define a força do efeito. Com 55% para cada lado a
	   foto anda pouco menos da metade da velocidade da página — atrás dela
	   de verdade, e não colada com um empurrãozinho. */
	inset: -55% 0;
	pointer-events: none;
	will-change: transform;
}

.dif-fundo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Apagada, e ainda dessaturada: uma foto colorida por baixo do texto
	   rouba a leitura mesmo com opacidade baixa. O véu por cima abre espaço
	   para ela subir um pouco sem comer o contraste do título. */
	opacity: 0.26;
	filter: grayscale(0.45) contrast(1.06);
}

/* Um véu por cima da foto, mais fechado no meio, onde o texto passa. */
.secao--diferenciais::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(70% 56% at 50% 50%, rgba(10, 20, 40, 0.72) 0%, rgba(10, 20, 40, 0.2) 62%, transparent 100%);
	pointer-events: none;
}

/* ---------- O conteúdo, em versão escura ---------- */

.secao--diferenciais .secao__chapeu { color: var(--azul-claro); }
.secao--diferenciais .secao__chapeu-icone { color: var(--laranja-claro); }
.secao--diferenciais h2 { color: var(--branco); }

.diferenciais {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(16px, 2.4vw, 26px);
}

.diferencial {
	position: relative;
	/* Vidro sobre a foto: deixa a imagem atravessar de leve, sem que o
	   texto perca o fundo em que se apoia. */
	background: rgba(255, 255, 255, 0.055);
	border: 1px solid rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(6px);
	border-radius: 10px;
	padding: 30px 26px 26px;
	transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}

/* O capitel da coluna, reduzido a um traço no topo do cartão. */
.diferencial::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 22px;
	right: 22px;
	height: 4px;
	border-radius: 0 0 3px 3px;
	background: var(--azul-claro);
	transition: background-color 0.25s ease, left 0.25s ease, right 0.25s ease;
}

.diferencial:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.3);
	transform: translateY(-3px);
}

.diferencial:hover::before {
	background: var(--laranja);
	left: 12px;
	right: 12px;
}

.diferencial__icone {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 12px;
	background: rgba(254, 77, 1, 0.18);
	color: var(--laranja-claro);
	margin-bottom: 18px;
}

.diferencial__titulo {
	font-family: var(--fonte-titulo);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--branco);
	margin-bottom: 8px;
}

.diferencial__texto {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.76);
	max-width: none;
}
/* ---------- Estrutura ---------- */

.secao--estrutura { background: var(--areia); }

.ambientes {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(14px, 2vw, 22px);
	max-width: var(--largura-max);
	margin-inline: auto;
	padding-inline: clamp(20px, 5vw, 32px);
}

.ambiente figure {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	background: var(--cinza-claro);
}

.ambiente img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.22, 0.75, 0.2, 1);
}

.ambiente figure:hover img { transform: scale(1.04); }

.ambiente figcaption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 30px 18px 14px;
	font-family: var(--fonte-titulo);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--branco);
	background: linear-gradient(180deg, transparent, rgba(16, 32, 64, 0.82));
}

/* ---------- Depoimentos ----------

   Um laranja lavado, mais forte em cima e abrindo para baixo: a seção
   precisa se ler como bloco próprio depois do azul de Diferenciais, sem
   voltar ao branco das outras.

   As falas ficam num palco com perspectiva. A do meio vem à frente, em
   tamanho cheio; as vizinhas giram para o fundo, menores e levemente
   desfocadas. É o mesmo gesto de folhear — o que interessa está na mão,
   o resto está por perto. */

.secao--depoimentos {
	position: relative;
	background: linear-gradient(180deg, #FFE2D2 0%, #FFEFE6 46%, #FFF8F4 100%);
	color: var(--cinza);
	overflow: hidden;
}

/* As canaluras do fuste, atravessando a seção de fora a fora. É a mesma
   estria das colunas do pórtico numa escala de parede — e como o fundo
   aqui é claro, a linha é o laranja da marca em voz baixa.

   Uma máscara apaga o desenho em cima e embaixo, para ele não bater na
   divisa com as seções vizinhas. */
.secao--depoimentos::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: repeating-linear-gradient(
		90deg,
		transparent 0 32px,
		rgba(201, 58, 0, 0.075) 32px 34px
	);
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
	pointer-events: none;
}

/* O conteúdo vem à frente das linhas. */
.secao--depoimentos > .container { position: relative; z-index: 1; }

.secao--depoimentos h2 { color: var(--azul-profundo); }
.secao--depoimentos .secao__chapeu { color: var(--azul); }
.secao--depoimentos .secao__chapeu-icone { color: var(--laranja-escuro); }

/* ---------- O palco ---------- */

.roda {
	position: relative;
	/* A perspectiva mora aqui, no pai: aplicada em cada cartão, cada um
	   teria o seu próprio ponto de fuga e a cena não fecharia. */
	perspective: 1400px;
	perspective-origin: 50% 45%;
}

.roda__palco {
	position: relative;
	list-style: none;
	transform-style: preserve-3d;
	transition: height 0.4s ease;
}

/* Antes de o JavaScript montar a cena, os cartões são uma lista comum —
   assim a seção continua legível se o script falhar. */
/* Enquanto o JavaScript não monta a cena, o palco precisa de uma altura
   mínima: os cartões ainda estão no fluxo e ele se vira. Montado, quem
   manda é a altura do cartão da frente — e esta reserva atrapalharia. */
.roda:not(.is-montada) .roda__palco { min-height: 260px; }

.roda__palco .depoimento { margin-bottom: 18px; }

.roda.is-montada .roda__palco .depoimento {
	position: absolute;
	top: 0;
	left: 50%;
	width: min(520px, 78%);
	margin-bottom: 0;
	/* x, giro, recuo e escala vêm do JavaScript — é ele que sabe quantos
	   cartões existem e qual está na vez. */
	transform:
		translate(-50%, 0)
		translateX(var(--x, 0px))
		translateZ(var(--z, 0px))
		rotateY(var(--giro, 0deg))
		scale(var(--escala, 1));
	transition:
		transform 0.62s cubic-bezier(0.3, 0.85, 0.25, 1),
		opacity 0.5s ease,
		filter 0.5s ease;
	backface-visibility: hidden;
}

/* Quem dá altura ao palco é o cartão da vez, e ele faz isso do jeito mais
   simples: ficando no fluxo. Os outros saem para o absoluto e flutuam em
   volta dele. Antes o JavaScript media o conjunto e escrevia a altura na
   mão — e como as falas têm tamanhos diferentes, a maior delas abria um
   vão embaixo sempre que a da vez fosse curta.

   Vem DEPOIS da regra de cima de propósito: é ela que precisa ser
   desfeita, e as duas têm o mesmo peso. */
.roda.is-montada .roda__palco .depoimento.is-frente {
	position: relative;
	left: auto;
	margin-inline: auto;
	transform: none;
}

.depoimento {
	position: relative;
	background: var(--branco);
	border: 1px solid #F3D9CB;
	border-radius: 12px;
	/* O recorte é o que faz a barra do relógio terminar no arredondado da
	   caixa em vez de passar reto por cima dele. */
	overflow: hidden;
	padding: 30px 28px;
	display: grid;
	gap: 18px;
	align-content: start;
	box-shadow: 0 10px 30px rgba(148, 74, 34, 0.08);
}

/* Os cartões que não estão na vez: menores, mais ao fundo e um pouco
   fora de foco — o bastante para o olho saber que não é a hora deles,
   e pouco o bastante para continuarem sendo cartões, não manchas. */
.roda.is-montada .depoimento:not(.is-frente) {
	opacity: 0.62;
	filter: blur(2.5px);
	cursor: pointer;
}

.roda.is-montada .depoimento:not(.is-frente):hover {
	opacity: 0.85;
	filter: blur(1.2px);
}

.roda.is-montada .depoimento.is-frente {
	z-index: 3;
	box-shadow: 0 22px 60px rgba(148, 74, 34, 0.16);
	border-color: #EFCDBA;
}

.depoimento blockquote p {
	max-width: none;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--grafite);
}

.depoimento blockquote p::before { content: "“"; }
.depoimento blockquote p::after  { content: "”"; }

.depoimento__autor {
	display: grid;
	gap: 2px;
	padding-top: 16px;
	border-top: 1px solid #F3D9CB;
}

.depoimento__nome {
	font-family: var(--fonte-titulo);
	font-weight: 600;
	color: var(--azul-profundo);
}

.depoimento__papel { font-size: 0.8125rem; color: var(--cinza); }

/* ---------- O relógio do rodízio ----------

   Uma linha rente à base do cartão, por dentro dele: enche enquanto
   aquela fala está no ar e recomeça a cada troca. Todo cartão tem a sua,
   mas só a do que está na frente corre — as outras ficam paradas no
   começo, invisíveis atrás do desfoque. */

.roda__relogio {
	position: absolute;
	inset: auto 0 0 0;
	height: 3px;
	background: rgba(201, 58, 0, 0.12);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.depoimento.is-frente .roda__relogio { opacity: 1; }

.roda__relogio i {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, var(--laranja) 0%, var(--laranja-claro) 100%);
	transform: scaleX(0);
	transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
	.roda.is-contando .depoimento.is-frente .roda__relogio i {
		animation: cab-encher-barra var(--tempo-fala, 7s) linear forwards;
	}
}

/* Parado o rodízio — mouse em cima, aba escondida — a linha esmaece: ela
   conta tempo, e sem tempo correndo não teria o que dizer. */
.roda:not(.is-contando) .depoimento.is-frente .roda__relogio { opacity: 0.4; }

/* ---------- Os controles ---------- */

.roda__controles {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-top: clamp(20px, 3vh, 32px);
}

.roda__seta {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid #EFCDBA;
	border-radius: 50%;
	background: var(--branco);
	color: var(--azul-profundo);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.roda__seta:hover,
.roda__seta:focus-visible {
	background: var(--azul-profundo);
	border-color: var(--azul-profundo);
	color: var(--branco);
	transform: scale(1.06);
}

.roda__marcas {
	display: flex;
	gap: 8px;
	list-style: none;
}

.roda__marca {
	display: block;
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #EBC7B3;
	cursor: pointer;
	transition: background-color 0.25s ease, width 0.25s ease;
}

.roda__marca:hover { background: var(--laranja-claro); }

.roda__marca.is-ativa {
	width: 22px;
	border-radius: 999px;
	background: var(--laranja);
}

/* Em tela baixa e larga — o notebook — a roda encolhe.

   Não é questão de largura: num monitor de 1920 o cartão cabe com folga.
   O que falta ali é ALTURA, então a régua é a altura da janela. O cartão
   perde respiro por dentro e os controles sobem. */
@media (min-width: 981px) and (max-height: 820px) {
	.depoimento { padding: 22px 24px; gap: 14px; }

	.depoimento blockquote p {
		font-size: 0.9375rem;
		line-height: 1.55;
	}

	.depoimento__autor { padding-top: 12px; }

	.roda__controles { margin-top: 12px; }
	.roda__seta { width: 38px; height: 38px; }
}
/* ---------- Blog ---------- */

.posts {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(16px, 2.4vw, 26px);
}

.post-cartao a {
	display: grid;
	gap: 0;
	height: 100%;
	border: 1px solid var(--cinza-claro);
	border-radius: 10px;
	overflow: hidden;
	background: var(--branco);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.post-cartao a:hover {
	border-color: #D6DFE8;
	box-shadow: 0 14px 34px rgba(16, 32, 64, 0.07);
	transform: translateY(-3px);
}

.post-cartao__foto img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.post-cartao__corpo {
	display: grid;
	gap: 8px;
	padding: 22px 22px 26px;
	align-content: start;
}

.post-cartao__data {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--azul);
}

.post-cartao__titulo {
	font-family: var(--fonte-titulo);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--azul-profundo);
}

.post-cartao__resumo {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--cinza);
}

/* ============================================================
   10b. Páginas internas
   ============================================================ */

.pagina__topo {
	position: relative;
	padding-block: clamp(40px, 6vw, 72px);
	background: radial-gradient(80% 100% at 20% 0%, var(--areia) 0%, var(--branco) 65%), var(--branco);
}

/* A viga e o piso do pórtico emoldurando o título da página. */
.pagina__viga,
.pagina__piso {
	position: absolute;
	left: 0;
	right: 0;
	height: 6px;
	background: linear-gradient(90deg, var(--azul) 0%, var(--azul-profundo) 50%, var(--azul) 100%);
}

.pagina__viga { top: 0; }
.pagina__piso { bottom: 0; height: 3px; background: var(--laranja); }

.pagina__caminho {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 12px;
	color: var(--azul);
}

.pagina__titulo {
	font-size: clamp(1.9rem, 4.4vw, 3rem);
	line-height: 1.08;
	letter-spacing: -0.015em;
	color: var(--azul-profundo);
	max-width: 20ch;
}

.pagina__grade {
	padding-block: clamp(36px, 5vw, 64px);
}

.pagina__grade--com-menu {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: clamp(28px, 4vw, 60px);
	align-items: start;
}

/* ---------- Lateral da seção ---------- */

.pagina__lateral {
	position: sticky;
	top: calc(var(--header-altura) + 24px);
}

.pagina__lateral-titulo {
	font-family: var(--fonte-titulo);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--azul);
	padding-bottom: 12px;
	margin-bottom: 8px;
	border-bottom: 2px solid var(--laranja);
}

.pagina__lateral ul { list-style: none; display: grid; }

.pagina__lateral a {
	display: block;
	padding: 11px 14px 11px 16px;
	font-size: 0.9375rem;
	color: var(--cinza);
	text-decoration: none;
	border-left: 2px solid var(--cinza-claro);
	transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.pagina__lateral a:hover {
	color: var(--azul);
	border-left-color: var(--azul);
	background: var(--areia);
}

.pagina__lateral a.is-atual {
	color: var(--azul-profundo);
	font-weight: 600;
	border-left-color: var(--laranja);
	background: var(--areia);
}

/* ---------- Corpo do texto ---------- */

.pagina__conteudo { max-width: 68ch; }

.pagina__capa img {
	width: 100%;
	border-radius: 8px;
	border-top: 6px solid var(--azul-profundo);
	margin-bottom: 28px;
}

.prosa h2 {
	font-size: clamp(1.3rem, 2.6vw, 1.7rem);
	color: var(--azul-profundo);
	margin: 34px 0 12px;
}

.prosa h3 {
	font-size: 1.125rem;
	color: var(--azul-profundo);
	margin: 26px 0 10px;
}

.prosa ul,
.prosa ol { margin: 0 0 18px 20px; color: var(--cinza); }
.prosa li { margin-bottom: 6px; }

.prosa img { border-radius: 6px; margin-block: 20px; }

.prosa blockquote {
	margin: 24px 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--laranja);
	font-size: 1.0625rem;
	color: var(--grafite);
}

.pagina__vazia {
	padding: 26px;
	border: 1px dashed var(--cinza-claro);
	border-radius: 8px;
	background: var(--areia);
	color: var(--cinza);
}

@media (max-width: 860px) {
	.pagina__grade--com-menu { grid-template-columns: 1fr; }

	.pagina__lateral {
		position: static;
		border: 1px solid var(--cinza-claro);
		border-radius: 10px;
		padding: 18px 16px;
	}
}

/* ============================================================
   11. Telas estreitas
   ============================================================ */

@media (max-width: 900px) {
	.sobre__grade { grid-template-columns: 1fr; }

	.album { order: -1; }
	.sobre__grade > .album { justify-self: center; }

	.secao__cabeca--linha { align-items: start; }
}

@media (max-width: 680px) {
	/* No celular os ambientes deslizam com o dedo: empilhar oito fotos numa
	   coluna transforma a seção num corredor sem fim. */
	.ambientes {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 76%;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 20px;
		padding-bottom: 8px;
		-webkit-overflow-scrolling: touch;
	}

	.ambiente { scroll-snap-align: start; }

	.marcos { grid-template-columns: repeat(2, 1fr); }

	.portico__painel .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   12. Impressão
   ============================================================ */


/* ============================================================
   13. Janela do nível de ensino
   ============================================================

   Abre sobre o site inteiro quando alguém clica numa coluna do pórtico.

   A entrada não é um fade: a pilastra clicada é medida no pórtico e
   recriada aqui exatamente em cima dela, depois desliza para a borda
   direita e cresce até a altura da tela. As outras três somem. Ao
   fechar, ela faz o caminho de volta e some no lugar de onde saiu.

   Quem conduz as medidas é o main.js; aqui ficam o desenho e os tempos.
   ============================================================ */

.janela {
	/* A largura da pilastra manda em três lugares — nela mesma, no respiro
	   do conteúdo e no X. Uma variável só, para os três nunca discordarem. */
	--pilastra-w: clamp(88px, 12vw, 190px);

	position: fixed;
	inset: 0;
	z-index: 2000;
	display: grid;
	/* Duas colunas: o miolo e a faixa da pilastra. Com a segunda coluna
	   reservada, a caixa do conteúdo encolhe e continua centrada no que
	   sobra — sem depender de conta de margem. */
	grid-template-columns: minmax(0, 1fr) var(--pilastra-w);
	overflow: hidden;
}

.janela[hidden] { display: none; }

/* O fundo não aparece: ele ABRE.

   Nasce como uma faixa da largura exata da coluna clicada, no lugar exato
   dela, e se abre para os dois lados até tomar a tela. É o que amarra a
   janela à pilastra — ela não surge por cima do site, ela sai de dentro
   da coluna. Os recortes vêm do JavaScript, que mede a coluna. */
.janela__fundo {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 90% at 12% 10%, #16305C 0%, transparent 60%),
		linear-gradient(160deg, var(--azul-profundo) 0%, #0A1630 100%);
	clip-path: inset(var(--corte-topo, 0px) var(--corte-dir, 50%) var(--corte-base, 0px) var(--corte-esq, 50%));
	transition: clip-path 0.62s cubic-bezier(0.72, 0, 0.16, 1);
}

.janela.is-aberta .janela__fundo { clip-path: inset(0px 0px 0px 0px); }

/* ---------- A pilastra que veio do pórtico ---------- */

/* A pilastra da janela fica parada na borda direita. Ela não é a coluna
   do pórtico crescendo — aquela serve só para o clique. Aqui é uma peça
   do desenho da janela, e ela já está no lugar quando a janela abre. */
.janela__pilastra {
	position: absolute;
	top: 0;
	right: 0;
	width: var(--pilastra-w);
	height: 100%;
	opacity: 0;
	transition: opacity 0.5s ease 0.18s;
	pointer-events: none;
}

.janela.is-aberta .janela__pilastra { opacity: 1; }

/* Sem corpo: só as canaluras, num azul mais fechado que o fundo. A coluna
   aparece porque é mais escura que o que está atrás dela, como uma
   silhueta contra a parede — e não como um bloco colorido por cima. */
.janela__fuste {
	display: block;
	width: 100%;
	height: 100%;
	background:
		repeating-linear-gradient(
			90deg,
			transparent 0 7px,
			rgba(4, 10, 24, 0.85) 7px 9px
		),
		linear-gradient(
			90deg,
			rgba(4, 10, 24, 0.55) 0%,
			rgba(4, 10, 24, 0.18) 26%,
			rgba(4, 10, 24, 0.06) 44%,
			rgba(4, 10, 24, 0.24) 74%,
			rgba(4, 10, 24, 0.6) 100%
		);
	/* Capitel e base, no mesmo tom fechado. */
	border-top: 10px solid rgba(4, 10, 24, 0.9);
	border-bottom: 10px solid rgba(4, 10, 24, 0.9);
}

/* ---------- O céu da janela ----------

   Os mesmos frontões da seção Níveis, com o mesmo movimento — só que em
   azul claro, porque aqui o fundo é escuro. A seção e a janela são o
   mesmo assunto: é o mesmo céu, visto de dentro. */

.janela__ceu {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.6s ease 0.22s;
}

.janela.is-aberta .janela__ceu { opacity: 1; }

.janela__ceu .frontao-boia--1 { background: linear-gradient(170deg, rgba(144, 192, 208, 0.16) 0%, rgba(144, 192, 208, 0.05) 100%); }
.janela__ceu .frontao-boia--2 { background: linear-gradient(150deg, rgba(180, 214, 230, 0.2) 0%, rgba(180, 214, 230, 0.055) 100%); }
.janela__ceu .frontao-boia--3 { background: linear-gradient(195deg, rgba(16, 80, 128, 0.3) 0%, rgba(16, 80, 128, 0.08) 100%); }

/* ---------- O X ---------- */

.janela__fechar {
	position: absolute;
	top: clamp(16px, 2.4vw, 30px);
	/* No canto mesmo, por cima da pilastra: ela é desenho de fundo, e o X
	   é o único controle que precisa estar sempre à mão. */
	right: clamp(16px, 2.4vw, 30px);
	z-index: 4;
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	color: var(--branco);
	cursor: pointer;
	opacity: 0;
	transform: scale(0.85);
	transition: opacity 0.3s ease 0.44s, transform 0.4s cubic-bezier(0.2, 0.85, 0.3, 1) 0.44s, background-color 0.2s ease, border-color 0.2s ease;
}

.janela.is-aberta .janela__fechar { opacity: 1; transform: scale(1); }

.janela__fechar:hover,
.janela__fechar:focus-visible {
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.5);
}

/* ---------- O conteúdo ---------- */

.janela__corpo {
	position: relative;
	z-index: 2;
	align-self: center;
	/* auto, e não 100%: num item de grid, largura de 100% ignora a margem e
	   transborda a célula em vez de encolher dentro dela. */
	width: auto;
	max-width: none;
	grid-column: 1;
	/* A caixa vai até o pilar: é ela que rola, e a barra de rolagem mora na
	   borda dela. Encolhendo a caixa, a barra vinha junto e sobrava um vão
	   entre ela e o pilar. O recuo de 50px que a leitura precisa é respiro
	   por dentro, não largura a menos. */
	width: 100%;

	/* Respiro igual dos dois lados: o eixo do conteúdo é o meio do espaço
	   que sobra, e não o meio da tela. A pilastra ocupa a direita, então
	   mirar o centro da janela empurrava tudo visualmente para lá. */
	padding-top: clamp(84px, 12vh, 130px);
	padding-bottom: clamp(56px, 9vh, 96px);
	padding-inline: calc(clamp(20px, 3.4vw, 56px) + 50px);
	display: grid;
	/* Uma coluna só, que rola.

	   Lado a lado, texto e fotos brigavam pela mesma altura de tela e
	   nenhum dos dois podia crescer: a escola escreve três parágrafos e o
	   texto já estourava. Empilhado e com rolagem, o texto tem o espaço
	   que precisar e a galeria fica larga embaixo. */
	grid-template-columns: minmax(0, 1fr);
	align-content: start;
	justify-items: center;
	gap: clamp(28px, 4vh, 52px);
	height: 100svh;
	overflow-y: auto;
	overscroll-behavior: contain;
	/* Reserva o espaço da barra dos DOIS lados: sem isso ela come 10px só
	   da direita e todo o conteúdo centrado sai 5px do eixo. */
	scrollbar-gutter: stable both-edges;
}

/* A barra de rolagem da janela é escura: a laranja do site inteiro, sobre
   este fundo, virava um risco aceso na borda. */
.janela__corpo::-webkit-scrollbar { width: 6px; }
.janela__corpo::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); }
.janela__corpo::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.22);
	border-radius: 999px;
}
.janela__corpo::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.38); }

.janela__corpo {
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.22) rgba(255, 255, 255, 0.05);
}

/* A fala fica na largura de leitura, e a galeria pode passar dela: o
   texto se lê melhor estreito, a foto se vê melhor larga. */
/* A fala acompanha a galeria em largura máxima, e o texto dentro dela é
   que fica na medida de leitura. Assim os dois começam na mesma margem
   esquerda, em vez de o texto flutuar num vão no meio da tela. */
/* Sem teto: a caixa da fala acompanha a da galeria, e quem tem medida de
   leitura são os filhos dela. Com teto, numa tela larga ela centralizava e
   o texto nascia 190px à direita da foto. */
.janela__fala { width: 100%; }

/* O texto cresce junto com a caixa, e o corpo da letra cresce com ele: é
   o corpo maior que permite a linha mais longa sem o olho perder a volta.
   Em 76 caracteres a 18px, a linha tem a mesma leitura que tinha em 74 a
   17px — só que ocupando 110px a mais de tela. */
/* Encostados na esquerda da caixa, todos na mesma margem.

   A largura é em pixels, e não em ch: a medida em caracteres depende do
   corpo da letra, então o título — que é grande — ganhava uma caixa bem
   mais larga que a do texto e os dois começavam em pontos diferentes. */
.janela__fala > * {
	max-width: min(100%, 760px);
	margin-inline: 0;
}

/* O conteúdo entra em cascata: chapéu, título, texto, vitrine — cada um
   0,07s depois do anterior, e só depois de o fundo terminar de abrir. Em
   bloco, tudo aparecia no mesmo instante e a janela dava um estalo. */
.janela__corpo > * > *,
.janela__corpo > .vitrine {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity 0.4s ease,
		transform 0.5s cubic-bezier(0.2, 0.85, 0.3, 1);
}

.janela.is-aberta .janela__corpo > * > *,
.janela.is-aberta .janela__corpo > .vitrine {
	opacity: 1;
	transform: none;
}

.janela__corpo > .janela__fala > *:nth-child(1) { transition-delay: 0.30s; }
.janela__corpo > .janela__fala > *:nth-child(2) { transition-delay: 0.37s; }
.janela__corpo > .janela__fala > *:nth-child(3) { transition-delay: 0.44s; }
.janela__corpo > .janela__fala > *:nth-child(4) { transition-delay: 0.51s; }
.janela__corpo > .vitrine { transition-delay: 0.52s; }

/* Ao fechar, ninguém espera: a cascata é só da entrada. */
.janela:not(.is-aberta) .janela__corpo > * > *,
.janela:not(.is-aberta) .janela__corpo > .vitrine {
	transition-duration: 0.18s;
	transition-delay: 0s;
}

.janela__chapeu {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--laranja-claro);
	margin-bottom: 12px;
}

.janela__titulo {
	font-size: clamp(1.7rem, min(3.4vw, 5.2vh), 2.75rem);
	line-height: 1.1;
	color: var(--branco);
	margin-bottom: 18px;
}

.janela__etapa {
	display: block;
	font-size: 0.62em;
	font-weight: 500;
	color: var(--azul-claro);
	margin-top: 4px;
}

.janela__texto {
	max-width: min(100%, 760px);
	font-size: 1.125rem;
	line-height: 1.7;
}

.janela__texto p { color: rgba(255, 255, 255, 0.82); }
.janela__texto p:last-child { margin-bottom: 22px; }

/* ---------- A vitrine de fotos ---------- */

/* Sem teto: a foto vai de um respiro ao outro. */
.vitrine { width: 100%; }

/* A foto e as marcas no mesmo eixo.

   O palco tem proporção fixa e teto de altura: quando a altura limita, a
   largura dele encolhe — mas a caixa da vitrine continua inteira, e as
   marcas, centradas nela, ficavam fora do eixo da foto encolhida. O
   margin auto centra o palco na caixa, e aí os dois compartilham o mesmo
   meio. */
.vitrine__palco {
	position: relative;
	aspect-ratio: 16 / 9;
	/* Sem teto de altura: a largura manda, e a foto vai de um respiro ao
	   outro. Numa tela baixa ela passa da dobra — é o preço de ocupar a
	   faixa inteira, e a janela rola. */
	border-radius: 8px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.06);
	border-top: 5px solid var(--laranja);
}

.vitrine__foto {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.55s ease, visibility 0s linear 0.55s;
}

.vitrine__foto.is-ativa {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.55s ease, visibility 0s;
}

.vitrine__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vitrine__foto figcaption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 40px 20px 18px;
	font-size: 0.875rem;
	color: var(--branco);
	background: linear-gradient(180deg, transparent 0%, rgba(10, 22, 46, 0.88) 64%);
}

.vitrine__seta {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: var(--azul-profundo);
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease, background-color 0.2s ease, transform 0.2s ease;
	box-shadow: 0 4px 16px rgba(10, 22, 46, 0.35);
}

.vitrine__seta--anterior { left: 14px; }
.vitrine__seta--proxima  { right: 14px; }

.vitrine__palco:hover .vitrine__seta,
.vitrine__seta:focus-visible { opacity: 1; pointer-events: auto; }

.vitrine__seta:hover { background: var(--branco); transform: translateY(-50%) scale(1.07); }

@media (hover: none), (max-width: 900px) {
	.vitrine__seta { opacity: 1; pointer-events: auto; }
}

/* O relógio: uma barra laranja no pé da foto que enche até a troca. Fica
   dentro do palco, sobre a imagem, para ser lida como o tempo daquela
   foto e não como um enfeite da caixa. */
.vitrine__relogio {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	height: 4px;
	background: rgba(255, 255, 255, 0.22);
	overflow: hidden;
}

.vitrine__relogio i {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, var(--laranja) 0%, var(--laranja-claro) 100%);
	transform: scaleX(0);
	transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
	.vitrine.is-contando .vitrine__relogio i {
		animation: cab-encher-barra var(--tempo-foto, 6s) linear forwards;
	}
}

@keyframes cab-encher-barra {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

.vitrine__marcas {
	display: flex;
	justify-content: center;
	gap: 8px;
	list-style: none;
	margin-top: 16px;
}

.vitrine__marca {
	display: block;
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	cursor: pointer;
	transition: background-color 0.25s ease, width 0.25s ease;
}

.vitrine__marca:hover { background: rgba(255, 255, 255, 0.6); }

.vitrine__marca.is-ativa {
	width: 22px;
	border-radius: 999px;
	background: var(--laranja);
}

/* ---------- Enquanto a janela está aberta ---------- */

/* O pórtico se desfaz: as colunas que não foram clicadas recuam e somem,
   e a que foi clicada fica invisível — quem aparece é a cópia dela dentro
   da janela, já a caminho da borda. */
/* O pórtico se desfaz em cascata: as colunas caem uma depois da outra, da
   vizinha da clicada para a mais distante, e o frontão sobe. A ordem é
   dada pelo JavaScript, que sabe qual coluna foi clicada. Caindo todas
   juntas, o pórtico sumia de uma vez e parecia um corte, não um gesto. */
.portico.is-abrindo .coluna {
	transition:
		opacity 0.3s ease var(--atraso-saida, 0s),
		transform 0.42s cubic-bezier(0.55, 0, 0.78, 0.2) var(--atraso-saida, 0s);
}

.portico.is-abrindo .coluna:not(.is-saindo) {
	opacity: 0;
	transform: translateY(26px) scale(0.94);
}

/* A clicada some no ato: quem continua a viagem é a cópia dela na janela. */
.portico.is-abrindo .coluna.is-saindo { opacity: 0; transition: opacity 0.1s linear; }

.portico.is-abrindo .portico__frontao {
	opacity: 0;
	transform: translateY(-22px);
	transition: opacity 0.34s ease, transform 0.42s cubic-bezier(0.55, 0, 0.78, 0.2);
}

.portico.is-abrindo .portico__arquitrave {
	opacity: 0;
	transform: translateY(-12px);
	transition: opacity 0.34s ease 0.04s, transform 0.42s cubic-bezier(0.55, 0, 0.78, 0.2) 0.04s;
}

/* Na volta, o pórtico se remonta sem atrasos: esperar para reaparecer é
   pior do que simplesmente estar lá de novo. */
.portico:not(.is-abrindo) .coluna,
.portico:not(.is-abrindo) .portico__frontao,
.portico:not(.is-abrindo) .portico__arquitrave {
	transition: opacity 0.34s ease 0.12s, transform 0.4s cubic-bezier(0.2, 0.85, 0.3, 1) 0.12s;
}

.cab-travado { overflow: hidden; }

/* A coluna que abre janela avisa que é clicável. */
.coluna--abre { cursor: pointer; }

@media (max-width: 900px) {
	/* Num telefone, 88px de pilastra comem um quarto da largura e a galeria
	   fica do tamanho de um selo. Ela é desenho de fundo: encolhe. */
	.janela { --pilastra-w: 44px; }

	/* Num telefone não existe vão para reequilibrar: o conteúdo usa toda a
	   caixa, com o mesmo respiro dos dois lados. */
	/* Num telefone os 50px de recuo de cada lado deixavam a foto com 195px:
	   a faixa é estreita demais para dar de presente. */
	.janela__corpo {
		width: 100%;
		padding-top: clamp(78px, 12vh, 104px);
		padding-bottom: 48px;
		padding-inline: 18px;
		gap: 24px;
	}

	.janela__fala > * { max-width: none; }

	.vitrine__palco { max-height: none; }
}
/* ============================================================
   14. Entrada no scroll
   ============================================================

   Os blocos aparecem conforme a leitura desce, e cada um entra do seu
   jeito: o texto sobe, a foto vem do lado, os cartões chegam em cascata.
   A variação é o que evita a sensação de esteira, em que tudo faz o mesmo
   movimento na mesma hora.

   Três limites, para não virar exagero:

   1. O deslocamento é curto — 20 a 34px. Movimento longo chama atenção
      para si em vez de entregar o conteúdo.
   2. Cada elemento entra uma vez só e fica. Repetir a animação a cada
      passagem do olho cansa em qualquer página longa.
   3. Nada é essencial. Sem JavaScript ou com movimento reduzido, tudo
      nasce no lugar e visível.

   O estado inicial só é aplicado depois que o JavaScript assume, pela
   classe no <html>: assim quem entra sem script nunca vê a página vazia.
   ============================================================ */

.js-anima [data-entra] {
	opacity: 0;
	transition:
		opacity 0.62s cubic-bezier(0.22, 0.7, 0.28, 1),
		transform 0.72s cubic-bezier(0.22, 0.7, 0.28, 1);
	transition-delay: var(--atraso, 0s);
	will-change: opacity, transform;
}

/* Sobe: o movimento mais comum, para texto e blocos de leitura. */
.js-anima [data-entra="sobe"]     { transform: translateY(30px); }

/* Vem do lado: para o que está em coluna ao lado de outra coisa. */
.js-anima [data-entra="esquerda"] { transform: translateX(-34px); }
.js-anima [data-entra="direita"]  { transform: translateX(34px); }

/* Cresce: para peças que são imagem, não texto. Escala pequena, senão
   vira zoom de apresentação de slides. */
.js-anima [data-entra="cresce"]   { transform: scale(0.965); }

/* Desce: usado pouco, e só onde a peça vem de cima na composição. */
.js-anima [data-entra="desce"]    { transform: translateY(-24px); }

.js-anima [data-entra].is-dentro {
	opacity: 1;
	transform: none;
}

/* Depois de entrar, o elemento não precisa mais avisar o navegador de
   que vai mudar. */
.js-anima [data-entra].is-dentro { will-change: auto; }

@media (prefers-reduced-motion: reduce) {
	.js-anima [data-entra] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}
@media print {
	.cabecalho,
	.rodape,
	.visita,
	.luz,
	.pular-para-conteudo { display: none; }
	.conteudo { padding-top: 0; }
	body { color: #000; background: #fff; }
}