/* ==========================================================================
   Escola Maria Imaculada, folha única do site.

   Sem framework, sem etapa de build, sem CDN: o que está escrito aqui é
   exatamente o que roda no navegador. A ordem das seções vai do geral para o
   específico, e cada uma começa com um comentário dizendo que problema resolve.

   Três decisões atravessam o arquivo inteiro:

   1. Cor sempre por variável, nunca por valor cru. O Personalizar imprime um
      bloco :root em wp_head DEPOIS desta folha, então quem trocar o azul na
      escola troca o site inteiro. Os literais que aparecem abaixo são só o
      valor de reserva do var(), para o site continuar de pé se aquele bloco
      não sair.
   2. Contraste antes de estética. O azul institucional #528FC8 tem 3,4:1
      contra o branco, ou seja, não passa em texto corrido. Ele fica nas
      superfícies decorativas, e quem carrega texto é o #004690 (9,2:1) ou o
      #2C4167 (10,2:1). O mesmo vale para o verde do WhatsApp, comentado lá
      embaixo.
   3. Mobile first. Toda media query é min-width, e o layout de celular é o que
      está escrito fora delas.
   ========================================================================== */

/* ==========================================================================
   1. Variáveis
   Paleta, escala de espaço, escala de texto e as poucas medidas que se
   repetem. Tudo que aparece mais de duas vezes na folha vira token aqui.
   ========================================================================== */

:root {
	/* Paleta.
	   Os nomes --imi-azul, --imi-texto e companhia são gravados pelo
	   Personalizar. Aqui eles nunca são declarados: só consultados com valor de
	   reserva. Declarar seria inofensivo (o bloco do Personalizar vem depois),
	   mas o var() com reserva deixa a origem do valor explícita na leitura. */
	--imi-c-azul: var(--imi-azul, #528FC8);
	--imi-c-azul-escuro: var(--imi-azul-escuro, #2C4167);
	--imi-c-azul-profundo: var(--imi-azul-profundo, #004690);
	--imi-c-azul-claro: var(--imi-azul-claro, #A8D8EE);
	--imi-c-verde: var(--imi-verde, #2EBF35);
	--imi-c-dourado: var(--imi-dourado, #DEAD0D);
	--imi-c-texto: var(--imi-texto, #2F3230);
	--imi-c-cinza: var(--imi-cinza, #555555);
	--imi-c-fundo: var(--imi-fundo, #FBFBFB);
	--imi-c-branco: var(--imi-branco, #FFFFFF);

	/* O verde da paleta é bonito e é o verde do WhatsApp, mas tem 2,4:1 contra
	   o branco: texto branco em cima dele é ilegível para quem enxerga pouco.
	   O botão flutuante usa esta versão escura (5,6:1) no fundo e mantém o
	   verde original na borda, então a marca continua reconhecível. */
	--imi-c-verde-escuro: var(--imi-verde-escuro, #17781F);

	/* Papéis de superfície. Trocar um papel muda o site todo sem caçar regra. */
	--imi-papel: var(--imi-branco, #FFFFFF);
	--imi-papel-suave: var(--imi-fundo, #FBFBFB);
	--imi-tinta: var(--imi-texto, #2F3230);
	--imi-tinta-suave: var(--imi-cinza, #555555);
	--imi-borda: #E2E7EE;
	--imi-borda-forte: #C9D3E0;

	/* Link e título em texto corrido: os dois pedem 4,5:1, então nenhum dos
	   dois usa o azul claro. */
	--imi-link: var(--imi-azul-profundo, #004690);
	--imi-titulo: var(--imi-azul-profundo, #004690);

	/* Anel de foco. É trocado dentro das faixas escuras, mais abaixo, porque
	   azul sobre azul escuro não se enxerga. */
	--imi-foco: var(--imi-azul-profundo, #004690);
	--imi-foco-largura: 3px;

	/* Espaço. Escala de oito em oito, com dois degraus miúdos no começo. */
	--imi-e-1: 0.25rem;
	--imi-e-2: 0.5rem;
	--imi-e-3: 0.75rem;
	--imi-e-4: 1rem;
	--imi-e-5: 1.5rem;
	--imi-e-6: 2rem;
	--imi-e-7: 3rem;
	--imi-e-8: 4rem;
	--imi-e-9: 6rem;

	/* Texto. O clamp faz o tamanho crescer junto com a tela, então não existe
	   media query nenhuma só para mudar corpo de letra. */
	--imi-t-corpo: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
	--imi-t-miudo: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
	--imi-t-apoio: clamp(0.9375rem, 0.92rem + 0.1vw, 1rem);
	--imi-t-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
	--imi-t-1: clamp(1.9rem, 1.35rem + 2.5vw, 3.25rem);
	--imi-t-2: clamp(1.55rem, 1.25rem + 1.35vw, 2.35rem);
	--imi-t-3: clamp(1.25rem, 1.13rem + 0.55vw, 1.6rem);
	--imi-t-4: clamp(1.1rem, 1.05rem + 0.25vw, 1.25rem);

	/* Famílias. A Raleway é carregada uma única vez, pelo inc/assets.php. */
	--imi-fonte-titulo: "Raleway", "Trebuchet MS", system-ui, sans-serif;
	--imi-fonte-corpo: Arial, system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Medidas repetidas. */
	--imi-largura: 1200px;
	--imi-respiro: clamp(1rem, 0.6rem + 1.6vw, 1.75rem);
	--imi-raio: 14px;
	--imi-raio-p: 8px;
	--imi-raio-pilula: 999px;
	--imi-sombra: 0 10px 28px rgba(44, 65, 103, 0.10);
	--imi-sombra-alta: 0 18px 44px rgba(44, 65, 103, 0.20);
	--imi-transicao: 200ms ease;

	/* Altura da diagonal que corta o hero e as faixas do conteúdo antigo. */
	--imi-diagonal: clamp(28px, 4.5vw, 70px);

	/* Altura do cabeçalho fixo, usada pelo scroll-padding das âncoras. */
	--imi-topo-altura: 84px;
}

/* ==========================================================================
   2. Reset
   Curto de propósito: só o que corrige diferença real entre navegadores e o
   que evita surpresa de layout. Nada de zerar o que o navegador já acerta.
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;

	/* Sem isto, clicar numa âncora joga o alvo por baixo do cabeçalho fixo. */
	scroll-padding-top: calc(var(--imi-topo-altura) + var(--imi-e-4));
}

body {
	margin: 0;
	background: var(--imi-papel);
	color: var(--imi-tinta);
	font-family: var(--imi-fonte-corpo);
	font-size: var(--imi-t-corpo);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;

	/* Sem overflow-x aqui de propósito, mesmo com a gaveta do menu esperando
	   fora da tela à direita. Elemento com position:fixed não entra na conta da
	   rolagem da página, então não há barra horizontal para esconder; e
	   overflow no body transformaria o body em contêiner de rolagem, o que faz
	   o cabeçalho sticky parar de grudar. */
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--imi-e-3);
}

p,
ul,
ol,
dl,
figure,
blockquote,
pre,
table {
	margin: 0 0 var(--imi-e-4);
}

/* Imagem fluida por padrão. `height: auto` junto com `max-width` é o que evita
   a imagem esticar quando o HTML declara width e height (e ele declara: o
   WordPress imprime os dois em toda imagem). */
img,
picture,
video,
canvas,
svg,
iframe {
	display: block;
	max-width: 100%;
}

img,
video {
	height: auto;
}

/* O SVG dos ícones é medido em 1em pelo próprio PHP, então ele acompanha o
   texto ao lado. Inline-block porque ele mora dentro de linha de texto. */
svg.imi-icone {
	display: inline-block;
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	vertical-align: -0.125em;
}

input,
button,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

textarea {
	resize: vertical;
}

table {
	width: 100%;
	border-collapse: collapse;
}

/* O atributo hidden é o que o JavaScript do tema usa para trocar aba e abrir a
   busca. Toda regra que declara display em elemento que pode recebê-lo está
   escrita com :not([hidden]), justamente para não atropelar o navegador. */

/* ==========================================================================
   3. Tipografia
   Raleway nos títulos, Arial no corpo. A escala inteira sai do clamp, então
   não há media query de tamanho de letra em lugar nenhum da folha.
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--imi-titulo);
	font-family: var(--imi-fonte-titulo);
	font-weight: 700;
	line-height: 1.18;
	text-wrap: balance;
}

h1 {
	font-size: var(--imi-t-1);
	font-weight: 900;
}

h2 {
	font-size: var(--imi-t-2);
}

h3 {
	font-size: var(--imi-t-3);
}

h4,
h5,
h6 {
	font-size: var(--imi-t-4);
}

a {
	color: var(--imi-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--imi-transicao);
}

a:hover {
	color: var(--imi-c-azul);
}

strong,
b {
	font-weight: 700;
}

small {
	font-size: var(--imi-t-miudo);
}

blockquote {
	padding: var(--imi-e-2) 0 var(--imi-e-2) var(--imi-e-5);
	border-left: 4px solid var(--imi-c-azul);
	color: var(--imi-tinta);
	font-size: var(--imi-t-lead);
	font-style: italic;
}

code,
pre {
	font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
	font-size: 0.9em;
}

pre {
	overflow-x: auto;
	padding: var(--imi-e-4);
	border-radius: var(--imi-raio-p);
	background: var(--imi-papel-suave);
}

hr {
	height: 1px;
	margin: var(--imi-e-6) 0;
	border: 0;
	background: var(--imi-borda);
}

/* ==========================================================================
   4. Layout
   Container de 1200 pixels e a grade de doze avos que o conteúdo antigo usa.
   O inc/legado.php traduz `width="1/2"` e `vc_col-md-6` para .imi-coluna--6,
   então a grade aqui é de doze colunas, e não de frações nomeadas.
   ========================================================================== */

.imi-container {
	width: min(var(--imi-largura), 100%);
	margin-inline: auto;
	padding-inline: var(--imi-respiro);
}

/* Vários templates põem .imi-container dentro de outro .imi-container (a faixa
   do formulário é o caso mais visível). Sem isto, o de dentro somaria mais um
   respiro de cada lado e o conteúdo apareceria estreito sem motivo. */
.imi-container .imi-container {
	width: 100%;
	padding-inline: 0;
}

.imi-principal {
	display: block;
	min-height: 40vh;
}

.imi-secao {
	padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

.imi-secao + .imi-secao {
	padding-top: 0;
}

/* Faixa vinda de [vc_row]. O elemento externo pinta a faixa de ponta a ponta;
   o .imi-linha__interno é que segura a largura de leitura e monta a grade.

   Atenção ao homônimo: a linha do tempo do inc/blocos.php também sai com a
   classe .imi-linha, mas em <ol>. Por isso toda regra de faixa está presa a
   section.imi-linha, e a da linha do tempo, a ol.imi-linha. */
section.imi-linha {
	position: relative;
	padding-block: clamp(2rem, 1.2rem + 2.6vw, 3.75rem);
	background-color: var(--imi-papel);
	background-position: center;
	background-size: cover;
}

section.imi-linha + section.imi-linha {
	margin-top: 0;
}

.imi-linha__interno {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--imi-e-5);
	width: min(var(--imi-largura), 100%);
	margin-inline: auto;
}

.imi-linha--clara {
	background-color: var(--imi-papel-suave);
}

.imi-linha--branca {
	background-color: var(--imi-papel);
}

.imi-linha--azul {
	--imi-foco: var(--imi-c-branco);
	background-color: var(--imi-c-azul-profundo);
	color: var(--imi-c-branco);
}

.imi-linha--escura {
	--imi-foco: var(--imi-c-branco);
	background-color: var(--imi-c-azul-escuro);
	color: var(--imi-c-branco);
}

/* Dentro de faixa colorida, título e link herdam o branco: manter o azul dos
   dois ali seria azul sobre azul. */
.imi-linha--azul :is(h1, h2, h3, h4, h5, h6),
.imi-linha--escura :is(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}

.imi-linha--azul a,
.imi-linha--escura a {
	color: var(--imi-c-branco);
	text-decoration: underline;
}

.imi-linha--azul a:hover,
.imi-linha--escura a:hover {
	color: var(--imi-c-azul-claro);
}

/* Imagem de fundo. O endereço chega em --imi-linha-imagem, escrito no atributo
   style pelo tradutor do legado. */
.imi-linha--com-imagem {
	background-image: var(--imi-linha-imagem);
	background-attachment: scroll;
}

/* O véu escurece a foto por baixo do texto. Sem ele, foto clara e texto branco
   davam exatamente o problema de leitura que existe no site atual. */
.imi-linha--veu {
	--imi-foco: var(--imi-c-branco);
	color: var(--imi-c-branco);
}

.imi-linha--veu::before {
	position: absolute;
	inset: 0;
	background: rgba(44, 65, 103, 0.66);
	content: "";
}

.imi-linha--veu :is(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}

.imi-linha--larga .imi-linha__interno {
	width: 100%;
	max-width: none;
}

.imi-linha--centro {
	text-align: center;
}

/* O corte diagonal do conteúdo antigo é o mesmo desenho do hero das internas,
   e por isso vem da mesma variável de altura. */
.imi-linha--diagonal-topo {
	padding-top: calc(var(--imi-diagonal) + var(--imi-e-6));
	clip-path: polygon(0 0, 100% var(--imi-diagonal), 100% 100%, 0 100%);
}

.imi-linha--diagonal-base {
	padding-bottom: calc(var(--imi-diagonal) + var(--imi-e-6));
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--imi-diagonal)), 0 100%);
}

.imi-linha-interna {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--imi-e-5);
	grid-column: 1 / -1;
}

/* No celular toda coluna ocupa a linha inteira. Coluna de um sexto num
   telefone não é layout, é texto espremido. */
.imi-coluna {
	grid-column: 1 / -1;
	min-width: 0;
}

.imi-coluna--centro {
	text-align: center;
}

.imi-coluna--direita {
	text-align: right;
}

.imi-coluna--caixa {
	padding: var(--imi-e-5);
	border-radius: var(--imi-raio);
	background: var(--imi-papel-suave);
}

.imi-coluna--branca {
	padding: var(--imi-e-5);
	border: 1px solid var(--imi-borda);
	border-radius: var(--imi-raio);
	background: var(--imi-papel);
}

@media (min-width: 48em) {
	.imi-coluna--1 { grid-column: span 2; }
	.imi-coluna--2 { grid-column: span 3; }
	.imi-coluna--3 { grid-column: span 4; }
	.imi-coluna--4 { grid-column: span 6; }
	.imi-coluna--5 { grid-column: span 6; }
	.imi-coluna--6 { grid-column: span 6; }
	.imi-coluna--7 { grid-column: span 6; }
	.imi-coluna--8 { grid-column: span 12; }
	.imi-coluna--9 { grid-column: span 12; }
	.imi-coluna--10 { grid-column: span 12; }
	.imi-coluna--11 { grid-column: span 12; }
	.imi-coluna--12 { grid-column: span 12; }
}

/* Só no desktop a grade vale ao pé da letra. Entre 768 e 1024 as colunas muito
   estreitas foram agrupadas acima, para o texto não virar uma coluna de duas
   palavras por linha. */
@media (min-width: 64em) {
	.imi-coluna--1 { grid-column: span 1; }
	.imi-coluna--2 { grid-column: span 2; }
	.imi-coluna--3 { grid-column: span 3; }
	.imi-coluna--4 { grid-column: span 4; }
	.imi-coluna--5 { grid-column: span 5; }
	.imi-coluna--6 { grid-column: span 6; }
	.imi-coluna--7 { grid-column: span 7; }
	.imi-coluna--8 { grid-column: span 8; }
	.imi-coluna--9 { grid-column: span 9; }
	.imi-coluna--10 { grid-column: span 10; }
	.imi-coluna--11 { grid-column: span 11; }
	.imi-coluna--12 { grid-column: span 12; }
}

/* Grade de cartões, usada na home, no arquivo, na busca e no "Veja também". */
.imi-grade {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--imi-e-5);
}

@media (min-width: 40em) {
	.imi-grade {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 62em) {
	.imi-grade--3,
	.imi-grade--posts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ==========================================================================
   5. Cabeçalho e menu
   O defeito conhecido do site atual: a marca era posicionada por cima do menu
   e cobria o primeiro item no notebook. Aqui marca e navegação são dois filhos
   de um flex com espaço entre eles. A marca não encolhe, o menu pode encolher,
   e nenhum dos dois ocupa o lugar do outro em largura nenhuma.
   ========================================================================== */

/* Barra fina com os serviços de fora (FTD, OPEE, Jovens Conectados, Área
   Restrita) e o endereço da escola. */
.imi-barra-topo {
	border-bottom: 1px solid var(--imi-borda);
	background: var(--imi-papel-suave);
	font-size: var(--imi-t-miudo);
}

.imi-barra-topo__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--imi-e-2) var(--imi-e-4);
	padding-block: var(--imi-e-2);
}

.imi-topo-lista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--imi-e-1) var(--imi-e-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.imi-topo-link {
	display: inline-flex;
	align-items: center;
	gap: var(--imi-e-1);
	padding-block: var(--imi-e-1);
	color: var(--imi-tinta);
	text-decoration: none;
}

.imi-topo-link:hover {
	color: var(--imi-link);
	text-decoration: underline;
}

.imi-topo-link .imi-icone {
	color: var(--imi-c-azul);
	font-size: 0.9em;
}

.imi-barra-topo__endereco {
	display: flex;
	align-items: center;
	gap: var(--imi-e-1);
	margin: 0;
	color: var(--imi-tinta-suave);
}

.imi-barra-topo__endereco a {
	color: inherit;
	text-decoration: none;
}

.imi-barra-topo__endereco a:hover {
	color: var(--imi-link);
	text-decoration: underline;
}

.imi-barra-topo__icone {
	display: inline-flex;
	color: var(--imi-c-azul);
}

/* A barra do topo some no celular: quatro links de serviço e um endereço
   inteiro roubariam a primeira tela de quem chegou pelo telefone. Os mesmos
   destinos continuam no menu e no rodapé. */
@media (max-width: 47.99em) {
	.imi-barra-topo {
		display: none;
	}
}

.imi-cabecalho {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--imi-papel);
	box-shadow: 0 2px 10px rgba(44, 65, 103, 0.08);
}

.imi-cabecalho__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--imi-e-4);
	min-height: var(--imi-topo-altura);
	padding-block: var(--imi-e-2);
}

/* A marca nunca encolhe e nunca sai do fluxo: é isso, e só isso, que impede a
   sobreposição do logo sobre o primeiro item do menu. */
.imi-marca {
	flex: 0 0 auto;
	max-width: 62%;
}

.imi-marca a {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.imi-marca__logo {
	width: auto;
	max-height: clamp(48px, 4.4vw, 68px);
	object-fit: contain;
}

.imi-marca__texto {
	color: var(--imi-titulo);
	font-family: var(--imi-fonte-titulo);
	font-size: var(--imi-t-4);
	font-weight: 900;
	line-height: 1.2;
}

.imi-cabecalho__direita {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--imi-e-4);
	min-width: 0;
}

.imi-cabecalho__acoes {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--imi-e-1);
}

/* ---- Menu, no celular: gaveta lateral ---------------------------------- */

/*
 * A gaveta abre por JavaScript, e o JavaScript mora em outro arquivo. Para o
 * CSS não depender de um nome de classe combinado de boca, ele aceita três
 * sinais e qualquer um deles abre:
 *
 *   1. aria-expanded="true" no botão do menu (é o estado que o HTML já declara
 *      e o que o leitor de tela anuncia, então é o sinal preferido);
 *   2. a classe .imi-ativo na própria navegação;
 *   3. a classe .imi-menu-aberto no body, que também serve para travar a
 *      rolagem do fundo.
 *
 * O :has() cobre o primeiro caso porque o botão vem depois da navegação no
 * HTML, e não há combinador de irmão anterior. Navegador sem :has() ainda abre
 * pelos outros dois.
 */
.imi-nav {
	position: fixed;
	z-index: 70;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(340px, 86vw);
	overflow-y: auto;
	padding: calc(var(--imi-topo-altura) + var(--imi-e-4)) var(--imi-e-5) var(--imi-e-6);
	background: var(--imi-papel);
	box-shadow: var(--imi-sombra-alta);
	transform: translateX(105%);
	visibility: hidden;
	transition: transform 260ms ease, visibility 260ms ease;
	overscroll-behavior: contain;
}

.imi-cabecalho:has(.imi-menu-botao[aria-expanded="true"]) .imi-nav,
.imi-nav.imi-ativo,
.imi-menu-aberto .imi-nav {
	transform: translateX(0);
	visibility: visible;
}

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

/* O cabeçalho sobe enquanto a gaveta está aberta.
 *
 * Ele é sticky com z-index, e isso cria um contexto de empilhamento próprio: o
 * z-index 70 da gaveta vale só dentro dele, não contra o resto da página. Sem
 * esta regra o véu abaixo passa por cima da própria gaveta, que é filha do
 * cabeçalho, e o menu aparece escurecido junto com o fundo. */
.imi-menu-aberto .imi-cabecalho {
	z-index: 80;
}

/* Véu atrás da gaveta.
 *
 * Sem ele a página continua nítida ao lado do menu, disputando a atenção: os
 * cartões azuis da home ficavam mais chamativos que os próprios itens. O véu
 * também dá o alvo grande de "toque fora para fechar", que o JavaScript já
 * escuta.
 *
 * Vem de um pseudo-elemento do body de propósito, para não precisar de mais uma
 * div no HTML só para pintar uma cor. */
.imi-menu-aberto::after {
	position: fixed;
	z-index: 65;
	inset: 0;
	background: rgba(20, 30, 48, 0.55);
	animation: imi-veu 260ms ease both;
	content: "";
}

@keyframes imi-veu {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.imi-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.imi-menu--principal > .imi-menu-item {
	border-bottom: 1px solid var(--imi-borda);
}

.imi-menu-item {
	position: relative;
}

.imi-menu-link {
	display: flex;
	align-items: center;
	gap: var(--imi-e-2);
	padding: var(--imi-e-3) 0;
	color: var(--imi-tinta);
	font-family: var(--imi-fonte-titulo);
	font-size: 1.0625rem;
	font-weight: 600;
	text-decoration: none;
}

.imi-menu-link:hover {
	color: var(--imi-link);
}

.imi-menu-item.imi-ativo > .imi-menu-link,
.imi-menu-item.imi-ancestral > .imi-menu-link {
	color: var(--imi-link);
}

.imi-menu-icone {
	display: inline-flex;
	color: var(--imi-c-azul);
}

/* Item que virou só ícone (o Instagram do menu antigo) ganha alvo de toque
   próprio, com 44 pixels de lado. */
.imi-menu-item--icone > .imi-menu-link {
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: var(--imi-raio-pilula);
	background: var(--imi-papel-suave);
	font-size: 1.15rem;
}

.imi-menu-item--icone > .imi-menu-link:hover {
	color: var(--imi-c-branco);
	background: var(--imi-c-azul-profundo);
}

.imi-menu-item--icone .imi-menu-icone {
	color: inherit;
}

/* O botão do submenu existe no HTML em toda largura: no celular ele é o único
   jeito de abrir, e no desktop ele é o atalho de quem usa teclado ou tela de
   toque, ao lado do hover. */
.imi-submenu-toggle {
	position: absolute;
	top: 2px;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--imi-raio-p);
	color: var(--imi-link);
	background: none;
	font-size: 1rem;
}

.imi-submenu-toggle:hover {
	background: var(--imi-papel-suave);
}

/* Uma seta só, presa ao aria-expanded: fechada aponta para baixo, aberta dá meia
   volta. O desenho não discorda do que o leitor de tela anuncia porque os dois
   leem o mesmo atributo. */
.imi-submenu-toggle-seta {
	display: inline-flex;
	line-height: 0;
	transition: transform var(--imi-transicao);
}

.imi-submenu-toggle[aria-expanded="true"] .imi-submenu-toggle-seta {
	transform: rotate(180deg);
}

.imi-submenu {
	display: none;
	margin: 0 0 var(--imi-e-3);
	padding: 0 0 0 var(--imi-e-4);
	border-left: 2px solid var(--imi-c-azul-claro);
	list-style: none;
}

.imi-submenu-toggle[aria-expanded="true"] ~ .imi-submenu {
	display: block;
}

.imi-submenu-item > .imi-menu-link {
	padding: var(--imi-e-2) 0;
	font-size: 1rem;
	font-weight: 400;
}

/* Botões de ícone do cabeçalho (busca e menu). */
.imi-botao-icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--imi-raio-pilula);
	color: var(--imi-link);
	background: none;
	font-size: 1.25rem;
	transition: background var(--imi-transicao), color var(--imi-transicao);
}

.imi-botao-icone:hover {
	color: var(--imi-c-branco);
	background: var(--imi-c-azul-profundo);
}

.imi-menu-botao__abrir,
.imi-menu-botao__fechar {
	display: none;
	line-height: 0;
}

.imi-menu-botao[aria-expanded="false"] .imi-menu-botao__abrir,
.imi-menu-botao[aria-expanded="true"] .imi-menu-botao__fechar {
	display: inline-flex;
}

/* O botão de fechar precisa ficar por cima da gaveta, senão a gaveta cobre o
   único jeito de fechá-la. */
.imi-menu-botao[aria-expanded="true"] {
	position: relative;
	z-index: 80;
	color: var(--imi-c-branco);
	background: var(--imi-c-azul-profundo);
}

/* Redes sociais do cabeçalho. Só aparecem as que estão preenchidas nas opções
   do tema: o rodapé antigo tinha quatro ícones apontando para href="#". */
.imi-redes {
	display: flex;
	align-items: center;
	gap: var(--imi-e-1);
}

.imi-redes__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--imi-raio-pilula);
	color: var(--imi-link);
	font-size: 1.15rem;
	text-decoration: none;
	transition: background var(--imi-transicao), color var(--imi-transicao);
}

.imi-redes__link:hover {
	color: var(--imi-c-branco);
	background: var(--imi-c-azul-profundo);
}

.imi-redes--topo {
	display: none;
}

/* Painel da busca, logo abaixo do cabeçalho. O atributo hidden é quem esconde,
   então aqui não existe declaração de display para não atropelá-lo. */
.imi-busca-painel {
	padding-block: var(--imi-e-4);
	border-top: 1px solid var(--imi-borda);
	background: var(--imi-papel-suave);
}

/* ---- Menu, no desktop -------------------------------------------------- */

/*
 * A quebra é 1024 pixels porque é o valor que o inc/assets.php entrega ao
 * script em `quebraMenu`. Os dois têm que concordar: se o CSS abrisse o menu
 * horizontal antes, o script continuaria tratando a barra como gaveta.
 */
@media (min-width: 64em) {
	.imi-nav {
		position: static;
		width: auto;
		overflow: visible;
		padding: 0;
		background: none;
		box-shadow: none;
		transform: none;
		visibility: visible;
	}

	/* Aqui não existe gaveta, então não existe véu. A regra é necessária porque a
	   classe fica no body: quem abre o menu no celular e depois gira o aparelho
	   ou aumenta a janela ficaria com a tela inteira escurecida, sem nada para
	   clicar que tirasse aquilo. */
	.imi-menu-aberto::after {
		content: none;
	}

	.imi-menu-aberto {
		overflow: visible;
	}

	.imi-menu--principal {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-end;
		gap: var(--imi-e-1);
	}

	.imi-menu--principal > .imi-menu-item {
		border-bottom: 0;
	}

	.imi-menu--principal > .imi-menu-item > .imi-menu-link {
		padding: var(--imi-e-3) var(--imi-e-2);
		font-size: 0.9375rem;
		text-transform: uppercase;
		letter-spacing: 0.02em;
	}

	/* Item com filho abre espaço para a seta no próprio botão, e não com
	   margem chutada: assim o texto nunca passa por baixo dela. */
	.imi-menu--principal > .imi-tem-filho > .imi-menu-link {
		padding-right: var(--imi-e-5);
	}

	.imi-menu--principal > .imi-menu-item > .imi-menu-link::after {
		position: absolute;
		right: var(--imi-e-2);
		bottom: 8px;
		left: var(--imi-e-2);
		height: 3px;
		border-radius: 3px;
		background: var(--imi-c-azul);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform var(--imi-transicao);
		content: "";
	}

	.imi-menu--principal > .imi-menu-item:hover > .imi-menu-link::after,
	.imi-menu--principal > .imi-menu-item.imi-ativo > .imi-menu-link::after,
	.imi-menu--principal > .imi-menu-item.imi-ancestral > .imi-menu-link::after,
	/* Aberto pelo botão (dedo ou teclado) marca igual ao hover. Sem isto, quem
	   abre o submenu sem mouse vê a caixa aparecer sem nada indicando de qual
	   item ela saiu. */
	.imi-menu--principal > .imi-menu-item:has(.imi-submenu-toggle[aria-expanded="true"]) > .imi-menu-link::after,
	.imi-menu--principal > .imi-menu-item:focus-within > .imi-menu-link::after {
		transform: scaleX(1);
	}

	.imi-menu--principal > .imi-menu-item--icone > .imi-menu-link::after {
		content: none;
	}

	.imi-submenu-toggle {
		top: 50%;
		right: var(--imi-e-1);
		width: 28px;
		height: 28px;
		margin-top: -14px;
		font-size: 0.8rem;
	}

	.imi-submenu-toggle:hover {
		background: none;
	}

	/* No desktop o submenu é uma caixa flutuante. Ele fica invisível em vez de
	   display:none para poder ter transição, e o visibility garante que ele
	   saia da ordem de tabulação enquanto está fechado. */
	.imi-submenu {
		position: absolute;
		z-index: 65;
		top: 100%;
		left: 0;
		display: block;
		min-width: 250px;
		margin: 0;
		padding: var(--imi-e-2) 0;
		/* Sem barra azul no topo. Ela existia aqui e marcava o item aberto, mas o
		   submenu tem largura mínima de 250px e o item pai costuma ser mais
		   estreito: em "Institucional" a barra passava por baixo de "Ensino" e os
		   dois pareciam ativos ao mesmo tempo. Quem marca o item aberto é o
		   sublinhado do próprio item, que acompanha a largura dele. */
		border: 0;
		border-radius: var(--imi-raio-p);
		background: var(--imi-papel);
		box-shadow: var(--imi-sombra);
		opacity: 0;
		visibility: hidden;
		transform: translateY(8px);
		transition: opacity var(--imi-transicao), transform var(--imi-transicao), visibility var(--imi-transicao);
	}

	/* Três caminhos de abertura, na mesma regra: mouse, teclado e o botão. O
	   :focus-within é o que faz o Tab percorrer o submenu sem mouse nenhum. */
	.imi-tem-filho:hover > .imi-submenu,
	.imi-tem-filho:focus-within > .imi-submenu,
	.imi-submenu-toggle[aria-expanded="true"] ~ .imi-submenu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	/* O último item do menu não pode abrir a caixa para fora da tela. */
	.imi-menu--principal > .imi-menu-item:nth-last-child(-n+2) > .imi-submenu {
		right: 0;
		left: auto;
	}

	.imi-submenu-item > .imi-menu-link {
		padding: var(--imi-e-2) var(--imi-e-4);
	}

	.imi-submenu-item > .imi-menu-link:hover {
		background: var(--imi-papel-suave);
	}

	.imi-redes--topo {
		display: flex;
		padding-left: var(--imi-e-2);
		border-left: 1px solid var(--imi-borda);
	}

	.imi-menu-botao {
		display: none;
	}
}

/* ==========================================================================
   6. Home
   Destaques com rolagem por encaixe, faixa dos quatro atalhos, apresentação da
   escola e a grade de novidades.
   ========================================================================== */

.imi-destaques {
	position: relative;
	background: var(--imi-c-azul-escuro);
}

/* O carrossel é rolagem horizontal com encaixe. Não há biblioteca: o trilho é
   um flex que rola, e cada destaque encaixa no começo. Sem JavaScript ele
   continua sendo um bloco navegável, que era o problema do Slider Revolution. */
.imi-destaques__trilho {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.imi-destaques__trilho::-webkit-scrollbar {
	display: none;
}

.imi-destaque {
	position: relative;
	display: flex;
	flex: 0 0 100%;
	align-items: flex-end;
	min-height: clamp(340px, 58vh, 620px);
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem);
	scroll-snap-align: start;
}

.imi-destaque--sem-foto {
	background: linear-gradient(120deg, var(--imi-c-azul-profundo), var(--imi-c-azul-escuro));
}

/* ---- Modo banner: arte pronta ------------------------------------------- */

/*
 * A diferença entre os dois modos está aqui.
 *
 * No modo notícia a foto é cenário: ela preenche a faixa com `object-fit: cover`
 * e o texto entra por cima. No modo banner a arte JÁ traz a frase escrita
 * dentro, então cortar as beiradas cortaria justamente o recado. Ela aparece
 * inteira, e é a altura da faixa que se ajusta à arte, não o contrário.
 */
.imi-destaques--banner .imi-destaque {
	display: block;
	min-height: 0;
	padding-block: 0;
}

/*
 * Artes de alturas diferentes.
 *
 * O trilho é flex, então todos os itens ficam com a altura do mais alto, e a
 * arte mais baixa sobra espaço embaixo. O certo é a escola subir todas na mesma
 * proporção (a ajuda do campo pede isso), mas o site não pode ficar torto
 * quando alguém esquecer.
 *
 * Alinhar ao topo põe a sobra num lugar só, embaixo de todas, em vez de metade
 * em cima e metade embaixo de cada arte. E o fundo claro faz essa sobra parecer
 * respiro da página, e não um buraco.
 */
.imi-destaques--banner .imi-destaques__trilho {
	align-items: flex-start;
}

.imi-destaque__arte-link {
	display: block;
}

.imi-destaque__arte {
	display: block;
	width: 100%;
	height: auto;
}

/* Sem faixa escura por baixo: a arte tem o próprio fundo, e o azul do tema
   apareceria como uma borda estranha enquanto ela carrega. */
.imi-destaques--banner {
	background: var(--imi-papel);
}

/*
 * Contraste dos controles sobre a arte.
 *
 * No modo notícia a foto leva uma camada escura por cima, então bolinha branca
 * sempre aparece. Aqui não há camada nenhuma: a arte é da escola e pode ser
 * clara, e aí a bolinha branca de borda branca some.
 *
 * A sombra resolve nos dois casos e não muda o desenho: sobre arte clara ela
 * desenha o contorno, sobre arte escura ela desaparece.
 */
.imi-destaques--banner .imi-destaques__ponto-marca {
	filter: drop-shadow(0 1px 2px rgba(12, 18, 30, 0.65));
}

.imi-destaques--banner .imi-destaques__seta {
	background: rgba(20, 32, 56, 0.62);
	box-shadow: 0 2px 10px rgba(12, 18, 30, 0.35);
}

.imi-destaque__fundo {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.imi-destaque__imagem {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A camada de contraste. No site atual o título saía direto por cima da foto e
   sumia em foto clara; aqui o texto tem sempre fundo garantido embaixo dele. */
.imi-destaque__fundo::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(20, 32, 56, 0.88) 0%, rgba(20, 32, 56, 0.55) 45%, rgba(20, 32, 56, 0.15) 100%);
	content: "";
}

/* A caixa é um .imi-container, então ela já vale os 1200 pixels centrados. A
   medida de leitura fica nos filhos: pôr max-width aqui centralizaria o texto
   dentro da faixa em vez de alinhá-lo à esquerda, junto da margem do site. */
.imi-destaque__caixa {
	--imi-foco: var(--imi-c-branco);
	position: relative;
	z-index: 2;
	color: var(--imi-c-branco);
}

.imi-destaque__titulo {
	max-width: 22ch;
	margin-bottom: var(--imi-e-3);
	color: var(--imi-c-branco);
	font-size: var(--imi-t-1);
	font-weight: 900;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.imi-destaque__linha {
	max-width: 46rem;
	margin-bottom: var(--imi-e-5);
	color: var(--imi-c-branco);
	font-size: var(--imi-t-lead);
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.imi-destaque__botao {
	margin: 0;
}

/* As setas moram dentro de cada destaque porque são âncoras, e cada destaque
   já sabe quem vem antes e depois dele. Um par fixo fora do trilho precisaria
   de JavaScript só para saber onde está. */
.imi-destaques__setas {
	position: absolute;
	z-index: 3;
	right: var(--imi-respiro);
	bottom: var(--imi-e-5);
	display: flex;
	gap: var(--imi-e-2);
}

.imi-destaques__seta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 2px solid rgba(255, 255, 255, 0.7);
	border-radius: var(--imi-raio-pilula);
	color: var(--imi-c-branco);
	background: rgba(20, 32, 56, 0.45);
	font-size: 1.15rem;
	text-decoration: none;
	transition: background var(--imi-transicao), border-color var(--imi-transicao);
}

.imi-destaques__seta:hover {
	color: var(--imi-c-branco);
	background: var(--imi-c-azul-profundo);
	border-color: var(--imi-c-branco);
}

/* O ícone da seta é sempre o mesmo desenho apontando para baixo: aqui ele gira
   para virar "anterior" e "próximo". */
.imi-destaques__seta--anterior .imi-icone {
	transform: rotate(90deg);
}

.imi-destaques__seta--proximo .imi-icone {
	transform: rotate(-90deg);
}

.imi-destaques__pontos {
	position: absolute;
	z-index: 3;
	bottom: var(--imi-e-4);
	left: 50%;
	display: flex;
	gap: var(--imi-e-2);
	transform: translateX(-50%);
}

/* O alvo de toque tem 44 pixels mesmo com a bolinha desenhada em 12: o que se
   vê é pequeno, o que se acerta com o dedo não é. */
.imi-destaques__ponto {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 44px;
}

.imi-destaques__ponto-marca {
	display: block;
	width: 12px;
	height: 12px;
	border: 2px solid var(--imi-c-branco);
	border-radius: var(--imi-raio-pilula);
	background: transparent;
	transition: background var(--imi-transicao), transform var(--imi-transicao);
}

.imi-destaques__ponto[aria-current="true"] .imi-destaques__ponto-marca {
	background: var(--imi-c-branco);
	transform: scale(1.2);
}

@media (min-width: 48em) {
	.imi-destaques__setas {
		top: 50%;
		right: var(--imi-respiro);
		bottom: auto;
		margin-top: -23px;
	}
}

/* ---- Faixa dos quatro atalhos institucionais --------------------------- */

/*
 * Fundo suave e respiro de seção, e não mais a faixa estreita e branca de
 * quando este bloco ficava colado no slide.
 *
 * A home alterna os fundos para dar ritmo: slide, bem-vindo claro, ensino
 * branco, acesso rápido claro, novidades branco. Com ensino e acesso rápido nos
 * dois brancos, um seguido do outro, os dois blocos virariam uma coisa só.
 */
.imi-cartoes {
	position: relative;
	z-index: 2;
	padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
	background: var(--imi-papel-suave);
}

.imi-cartoes__grade {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--imi-e-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 40em) {
	.imi-cartoes__grade {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.imi-cartoes__grade {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* O azul institucional só carrega texto grande e forte, que é o caso do título
   do cartão. Para texto de tamanho normal ele não teria contraste suficiente,
   e por isso não há parágrafo dentro deste cartão. */
.imi-cartao-inst {
	--imi-foco: var(--imi-c-branco);
	display: flex;
	flex-direction: column;
	gap: var(--imi-e-3);
	height: 100%;
	padding: var(--imi-e-5);
	border-radius: var(--imi-raio);
	color: var(--imi-c-branco);
	background: var(--imi-c-azul-profundo);
	text-decoration: none;
	transition: background var(--imi-transicao), transform var(--imi-transicao);
}

.imi-cartao-inst:hover {
	color: var(--imi-c-branco);
	background: var(--imi-c-azul-escuro);
	transform: translateY(-3px);
}

.imi-cartao-inst--sem-link {
	background: var(--imi-c-azul-escuro);
}

.imi-cartao-inst__icone {
	display: inline-flex;
	color: var(--imi-c-azul-claro);
	font-size: 1.9rem;
}

.imi-cartao-inst__titulo {
	margin: 0;
	color: inherit;
	font-size: var(--imi-t-4);
	font-weight: 700;
	line-height: 1.25;
}

.imi-cartao-inst__seta {
	display: inline-flex;
	margin-top: auto;
	color: var(--imi-c-azul-claro);
	font-size: 1.35rem;
}

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

.imi-ensino {
	padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
	background: var(--imi-papel);
}

.imi-ensino__grade {
	display: grid;
	/* auto-fit com minmax em vez de três colunas fixas: se um dia a escola
	   cadastrar um quarto nível, a grade acomoda sem ninguém tocar no CSS. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: var(--imi-e-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.imi-ensino__item {
	margin: 0;
}

/*
 * A foto É o cartão, e não um selo em cima de uma caixa branca de texto.
 *
 * É o que separa este bloco do cartão de post, que fica poucos centímetros
 * abaixo na home. Quando os dois tinham o mesmo desenho, a página inteira
 * parecia uma lista só, longa e repetida.
 *
 * Formato retrato de propósito: nível de ensino é gente, e foto de gente cabe
 * melhor em pé do que deitada.
 */
.imi-nivel {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	border-radius: var(--imi-raio);
	background: var(--imi-c-azul-escuro);
	isolation: isolate;
	transition: box-shadow var(--imi-transicao), transform var(--imi-transicao);
}

.imi-nivel:hover {
	box-shadow: var(--imi-sombra-alta);
	transform: translateY(-4px);
}

.imi-nivel--sem-foto {
	background: linear-gradient(150deg, var(--imi-c-azul-profundo), var(--imi-c-azul-escuro));
}

.imi-nivel__foto {
	position: absolute;
	z-index: -2;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}

.imi-nivel:hover .imi-nivel__foto {
	transform: scale(1.06);
}

/*
 * O véu escurece só a metade de baixo, onde o texto fica: em cima a foto
 * aparece limpa. Sem ele, título branco sobre foto clara some, que era
 * exatamente o defeito do site antigo.
 */
.imi-nivel__veu {
	position: absolute;
	z-index: -1;
	inset: 0;
	background: linear-gradient(to top, rgba(12, 22, 40, 0.92) 0%, rgba(12, 22, 40, 0.72) 32%, rgba(12, 22, 40, 0.12) 62%, rgba(12, 22, 40, 0) 100%);
}

.imi-nivel__corpo {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: var(--imi-e-5) var(--imi-e-4) var(--imi-e-4);
	color: var(--imi-c-branco);
}

/* A etiqueta responde à pergunta que a família realmente faz: o título diz o
   nome oficial, a etiqueta diz se serve para o filho dela. */
.imi-nivel__etapa {
	display: inline-block;
	margin-bottom: var(--imi-e-2);
	padding: 4px 12px;
	border-radius: var(--imi-raio-pilula);
	color: var(--imi-c-azul-escuro);
	background: var(--imi-c-branco);
	font-family: var(--imi-fonte-titulo);
	font-size: var(--imi-t-miudo);
	font-weight: 700;
	letter-spacing: 0.01em;
}

.imi-nivel__titulo {
	margin: 0 0 var(--imi-e-2);
	color: var(--imi-c-branco);
	font-size: var(--imi-t-3);
	font-weight: 900;
	line-height: 1.15;
}

/* O link cobre o cartão inteiro, mas quem é anunciado continua sendo só o
   título: é o mesmo princípio do cartão de post. */
.imi-nivel__link {
	color: inherit;
	text-decoration: none;
}

.imi-nivel__link::after {
	position: absolute;
	inset: 0;
	content: "";
}

.imi-nivel__texto {
	margin: 0 0 var(--imi-e-3);
	color: rgba(255, 255, 255, 0.88);
	font-size: var(--imi-t-miudo);
	line-height: 1.5;
}

/* A linha dourada é o mesmo detalhe que marca os títulos de seção da home: é o
   que amarra este bloco ao resto da página. */
.imi-nivel__mais {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-top: var(--imi-e-2);
	border-top: 2px solid var(--imi-c-dourado);
	color: var(--imi-c-branco);
	font-family: var(--imi-fonte-titulo);
	font-size: var(--imi-t-miudo);
	font-weight: 700;
}

.imi-nivel__mais .imi-icone {
	transition: transform var(--imi-transicao);
}

.imi-nivel:hover .imi-nivel__mais .imi-icone {
	transform: translateX(4px);
}

/* ---- Bem-vindo --------------------------------------------------------- */

.imi-bemvindo {
	padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
	background: var(--imi-papel-suave);
}

.imi-bemvindo__caixa {
	max-width: 52rem;
	text-align: center;
}

.imi-bemvindo__titulo {
	margin-bottom: var(--imi-e-2);
	font-size: var(--imi-t-2);
	font-weight: 900;
}

.imi-bemvindo__linha {
	margin-bottom: var(--imi-e-4);
	color: var(--imi-tinta-suave);
	font-size: var(--imi-t-lead);
}

.imi-bemvindo__texto {
	text-align: left;
}

@media (min-width: 48em) {
	.imi-bemvindo__texto {
		text-align: center;
	}
}

/* Traço dourado embaixo do título, que é o detalhe da marca da escola. */
.imi-bemvindo__titulo::after,
.imi-secao__titulo::after {
	display: block;
	width: 72px;
	height: 4px;
	margin: var(--imi-e-3) auto 0;
	border-radius: 4px;
	background: var(--imi-c-dourado);
	content: "";
}

/* ---- Novidades --------------------------------------------------------- */

.imi-novidades {
	padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

.imi-secao__topo,
.imi-secao-topo {
	margin-bottom: var(--imi-e-6);
	text-align: center;
}

.imi-secao-topo h2 {
	font-size: var(--imi-t-2);
}

.imi-secao__titulo {
	margin-bottom: var(--imi-e-2);
	font-size: var(--imi-t-2);
	font-weight: 900;
}

.imi-secao__linha {
	margin: 0;
	color: var(--imi-tinta-suave);
	font-size: var(--imi-t-apoio);
}

.imi-novidades__acao {
	margin: var(--imi-e-6) 0 0;
	text-align: center;
}

/* ---- Filtro de assunto -------------------------------------------------- */

/*
 * Cada botão é, no HTML, um link para o arquivo da categoria: sem JavaScript
 * ele leva para lá, com JavaScript filtra a grade na hora. O estilo é o mesmo
 * nos dois casos, então nada pisca ou muda de lugar quando o script carrega.
 *
 * Rola na horizontal no celular em vez de quebrar em várias linhas, que
 * empurraria a grade para baixo da dobra.
 */
.imi-filtro {
	display: flex;
	gap: var(--imi-e-2);
	margin: 0 0 var(--imi-e-5);
	overflow-x: auto;
	padding-bottom: var(--imi-e-1);
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.imi-filtro__botao {
	flex: 0 0 auto;
	padding: var(--imi-e-2) var(--imi-e-4);
	border: 1px solid var(--imi-borda);
	border-radius: var(--imi-raio-pilula);
	color: var(--imi-tinta);
	background: var(--imi-papel);
	font-family: var(--imi-fonte-titulo);
	font-size: var(--imi-t-miudo);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--imi-transicao), background var(--imi-transicao), border-color var(--imi-transicao);
}

.imi-filtro__botao:hover {
	border-color: var(--imi-c-azul);
	color: var(--imi-c-azul-profundo);
	background: var(--imi-papel-suave);
}

.imi-filtro__botao--ativo,
.imi-filtro__botao[aria-current="true"] {
	border-color: var(--imi-c-azul-profundo);
	color: var(--imi-c-branco);
	background: var(--imi-c-azul-profundo);
}

.imi-filtro__vazio {
	margin: var(--imi-e-5) 0 0;
	color: var(--imi-cinza);
	text-align: center;
}

/* O filtro esconde cartão com o atributo hidden, para ele sair também da ordem
   de tabulação. Numa grade, `display` do item vence o padrão do navegador, então
   a regra precisa ser explícita. */
.imi-grade > [hidden] {
	display: none;
}

@media (min-width: 48em) {
	.imi-filtro {
		flex-wrap: wrap;
		justify-content: center;
		overflow-x: visible;
	}
}

/* ==========================================================================
   7. Cartão de post
   O defeito que este bloco corrige: no site atual o título é impresso POR CIMA
   da foto e some em foto clara. Aqui a foto tem proporção fixa e o texto vem
   abaixo dela, com contraste garantido em qualquer imagem.

   O cartão inteiro é clicável por um ::after sobre o link do título, e não por
   uma âncora envolvendo tudo. Para o leitor de tela, o link anunciado continua
   sendo só o título da matéria.
   ========================================================================== */

.imi-cartao {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--imi-borda);
	border-radius: var(--imi-raio);
	background: var(--imi-papel);
	transition: box-shadow var(--imi-transicao), transform var(--imi-transicao), border-color var(--imi-transicao);
}

.imi-cartao:hover {
	border-color: var(--imi-c-azul-claro);
	box-shadow: var(--imi-sombra);
	transform: translateY(-3px);
}

.imi-cartao-foto {
	position: relative;
	background: var(--imi-papel-suave);
}

/* A proporção fixa é o que mantém a grade alinhada mesmo com fotos de tamanhos
   diferentes vindas do acervo antigo. */
.imi-capa {
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.imi-capa img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 320ms ease;
}

.imi-cartao:hover .imi-capa img {
	transform: scale(1.04);
}

/* Post sem imagem destacada mostra a marca do tema, e não um retângulo vazio. */
.imi-capa--vazia {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--imi-c-azul-claro);
	background: linear-gradient(135deg, var(--imi-papel-suave), #EDF3F9);
	font-size: 3rem;
}

/* Etiqueta da categoria. É o único texto sobre a imagem, e por isso vem com
   fundo sólido, e não translúcido. */
/* O selo é um link para o arquivo da categoria, e o cartão inteiro é clicável
   por um ::after que cobre tudo. Sem o z-index aqui o ::after ficaria por cima
   (mesma camada, e o link do título vem depois na ordem do HTML) e o clique no
   selo abriria a matéria, não a categoria. */
.imi-cartao-categoria {
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: 0;
	padding: var(--imi-e-1) var(--imi-e-3);
	border-radius: 0 var(--imi-raio-p) 0 0;
	color: var(--imi-c-branco);
	background: var(--imi-c-azul-profundo);
	font-family: var(--imi-fonte-titulo);
	font-size: var(--imi-t-miudo);
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	transition: background var(--imi-transicao);
}

.imi-cartao-categoria:hover,
.imi-cartao-categoria:focus-visible {
	background: var(--imi-c-azul);
}

.imi-cartao-corpo {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: var(--imi-e-5);
}

.imi-cartao-titulo {
	margin-bottom: var(--imi-e-2);
	font-size: var(--imi-t-4);
	line-height: 1.3;
}

.imi-cartao-link {
	color: inherit;
	text-decoration: none;
}

.imi-cartao-link:hover {
	color: var(--imi-c-azul);
	text-decoration: underline;
}

/* O ::after cobre o cartão inteiro. Como ele está no link do título, o alvo do
   clique cresce sem inventar um segundo link para quem lê por voz. */
.imi-cartao-link::after {
	position: absolute;
	inset: 0;
	content: "";
}

.imi-cartao-data {
	display: block;
	margin-bottom: var(--imi-e-2);
	color: var(--imi-tinta-suave);
	font-size: var(--imi-t-miudo);
}

.imi-cartao-resumo {
	margin-bottom: var(--imi-e-4);
	color: var(--imi-tinta);
	font-size: var(--imi-t-apoio);
}

.imi-cartao-mais {
	display: inline-flex;
	align-items: center;
	gap: var(--imi-e-1);
	margin-top: auto;
	color: var(--imi-link);
	font-family: var(--imi-fonte-titulo);
	font-size: var(--imi-t-apoio);
	font-weight: 700;
}

/* Cartão simples do conteúdo antigo, quando a grade de posts não encontra o
   arquivo do cartão principal. */
.imi-cartao-post {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--imi-borda);
	border-radius: var(--imi-raio);
	background: var(--imi-papel);
}

.imi-cartao-post__corpo {
	padding: var(--imi-e-4);
}

.imi-cartao-post__titulo {
	margin-bottom: var(--imi-e-1);
	font-size: var(--imi-t-4);
}

.imi-cartao-post__titulo a {
	text-decoration: none;
}

.imi-cartao-post__data {
	margin: 0;
	color: var(--imi-tinta-suave);
	font-size: var(--imi-t-miudo);
}

/* ==========================================================================
   8. Hero das internas
   O corte diagonal é a assinatura visual do site e aparece em toda tela que
   não é a home. Ele é desenhado por uma cunha branca sobre a base do hero:
   navegador sem clip-path mostra uma faixa branca reta, que é feio mas não
   quebra nada.
   ========================================================================== */

.imi-hero {
	position: relative;
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) calc(var(--imi-diagonal) + var(--imi-e-6));
	background-color: var(--imi-c-azul-escuro);
	background-position: center;
	background-size: cover;
	color: var(--imi-c-branco);
}

.imi-hero--foto {
	background-image: linear-gradient(rgba(20, 32, 56, 0.72), rgba(20, 32, 56, 0.72)), var(--imi-hero-foto);
}

.imi-hero--solido {
	background-image: linear-gradient(120deg, var(--imi-c-azul-profundo), var(--imi-c-azul-escuro));
}

/* Mesmo caso da caixa do carrossel: o elemento é um .imi-container e a medida
   de leitura mora nos filhos, senão o título sairia centralizado na faixa. */
.imi-hero-conteudo {
	--imi-foco: var(--imi-c-branco);
	position: relative;
	z-index: 2;
}

.imi-hero-titulo {
	max-width: 26ch;
	margin: 0;
	color: var(--imi-c-branco);
	font-size: var(--imi-t-1);
	font-weight: 900;
}

.imi-hero-subtitulo {
	max-width: 56rem;
	margin: var(--imi-e-3) 0 0;
	color: var(--imi-c-branco);
	font-size: var(--imi-t-lead);
	opacity: 0.94;
}

.imi-hero-corte {
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: var(--imi-diagonal);
	background: var(--imi-papel);
	clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

/* Migalhas de pão. O caminho importa neste site porque o menu tem quatro
   níveis e a pessoa perde a referência de onde está. */
.imi-migalhas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--imi-e-1) var(--imi-e-2);
	margin-bottom: var(--imi-e-4);
	color: var(--imi-c-branco);
	font-size: var(--imi-t-miudo);
}

.imi-migalhas a {
	color: var(--imi-c-branco);
	text-decoration: underline;
}

.imi-migalhas a:hover {
	color: var(--imi-c-azul-claro);
}

.imi-migalhas-sep {
	opacity: 0.65;
}

.imi-migalhas [aria-current="page"] {
	font-weight: 700;
}

/* Cabeçalho simples, sem foto: usado no 404 e na listagem genérica. */
.imi-cabecalho-pagina {
	padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
	background: linear-gradient(120deg, var(--imi-c-azul-profundo), var(--imi-c-azul-escuro));
	color: var(--imi-c-branco);
}

.imi-cabecalho-pagina__titulo {
	margin: 0;
	color: var(--imi-c-branco);
	font-size: var(--imi-t-2);
	font-weight: 900;
}

.imi-cabecalho-pagina__linha {
	margin: var(--imi-e-2) 0 0;
	color: var(--imi-c-branco);
	font-size: var(--imi-t-apoio);
	opacity: 0.94;
}

/* ==========================================================================
   9. Conteúdo
   O que o inc/legado.php devolve no lugar dos códigos do WPBakery, mais o que
   o editor do WordPress escreve. As duas coisas passam por .imi-prosa.
   ========================================================================== */

.imi-prosa {
	font-size: var(--imi-t-corpo);
}

.imi-prosa > *:last-child {
	margin-bottom: 0;
}

.imi-prosa :is(h2, h3, h4) {
	margin-top: var(--imi-e-6);
}

.imi-prosa :is(h2, h3, h4):first-child {
	margin-top: 0;
}

.imi-prosa a {
	text-decoration: underline;
}

.imi-prosa :is(ul, ol) {
	padding-left: var(--imi-e-5);
}

.imi-prosa li {
	margin-bottom: var(--imi-e-2);
}

.imi-prosa img {
	border-radius: var(--imi-raio-p);
}

/* Alinhamentos do editor clássico, que o conteúdo herdado ainda usa. */
.imi-prosa .aligncenter {
	margin-inline: auto;
}

.imi-prosa .alignleft {
	float: left;
	margin: 0 var(--imi-e-4) var(--imi-e-3) 0;
}

.imi-prosa .alignright {
	float: right;
	margin: 0 0 var(--imi-e-3) var(--imi-e-4);
}

.imi-prosa .wp-caption {
	max-width: 100%;
}

.imi-prosa .wp-caption-text {
	color: var(--imi-tinta-suave);
	font-size: var(--imi-t-miudo);
}

/* Espaçador vindo de [vc_empty_space]. A altura chega em --altura. */
.imi-espaco {
	height: var(--altura, 2rem);
}

/* [vc_text_separator] era usado como título de seção em quase toda página
   interna, então ele é um título de verdade, com a linha ao lado. */
.imi-separador {
	display: flex;
	align-items: center;
	gap: var(--imi-e-4);
	margin-block: var(--imi-e-6) var(--imi-e-4);
	font-size: var(--imi-t-3);
	text-align: center;
	grid-column: 1 / -1;
}

.imi-separador::before,
.imi-separador::after {
	flex: 1 1 auto;
	height: 2px;
	background: var(--imi-borda);
	content: "";
}

.imi-separador--esquerda::before,
.imi-separador--direita::after {
	display: none;
}

.imi-separador--esquerda {
	text-align: left;
}

.imi-separador--direita {
	text-align: right;
}

.imi-figura {
	margin: 0 0 var(--imi-e-5);
}

.imi-figura--centro {
	text-align: center;
}

.imi-figura--direita {
	text-align: right;
}

.imi-figura__link {
	display: inline-block;
}

.imi-figura__imagem {
	display: inline-block;
	border-radius: var(--imi-raio-p);
}

.imi-figura__legenda {
	margin-top: var(--imi-e-2);
	color: var(--imi-tinta-suave);
	font-size: var(--imi-t-miudo);
}

/* [plethora_fixedmedia]: imagem que preenche a coluna em proporção fixa. */
.imi-media-fixa {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: var(--imi-raio);
	background-image: var(--imi-media-fixa-imagem);
	background-position: center;
	background-size: cover;
}

.imi-media-fixa__imagem {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.imi-galeria {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: var(--imi-e-3);
	margin-bottom: var(--imi-e-5);
}

.imi-galeria__item {
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border-radius: var(--imi-raio-p);
	background: var(--imi-papel-suave);
}

.imi-galeria__imagem {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 320ms ease;
}

.imi-galeria__item:hover .imi-galeria__imagem {
	transform: scale(1.06);
}

/* Vídeo do YouTube. A proporção sai do aspect-ratio, sem o truque antigo de
   padding-bottom de 56,25 por cento. */
.imi-video {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	margin-bottom: var(--imi-e-5);
	border-radius: var(--imi-raio);
	background: #000;
}

.imi-video iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

/* Sanfona vinda do construtor antigo, em <details>. Abre e fecha sem
   JavaScript nenhum, e o Ctrl+F acha o texto de dentro. */
.imi-sanfona {
	margin-bottom: var(--imi-e-5);
	border: 1px solid var(--imi-borda);
	border-radius: var(--imi-raio);
	overflow: hidden;
}

.imi-sanfona__item,
.imi-sanfona-item {
	border-bottom: 1px solid var(--imi-borda);
}

.imi-sanfona__item:last-child,
.imi-sanfona-item:last-child {
	border-bottom: 0;
}

.imi-sanfona__titulo,
.imi-sanfona-titulo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--imi-e-3);
	padding: var(--imi-e-4) var(--imi-e-5);
	background: var(--imi-papel);
	color: var(--imi-titulo);
	font-family: var(--imi-fonte-titulo);
	font-size: var(--imi-t-4);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	transition: background var(--imi-transicao);
}

/* O Safari desenha um triângulo próprio no summary, e ele apareceria ao lado
   do sinal de mais do tema. */
.imi-sanfona__titulo::-webkit-details-marker,
.imi-sanfona-titulo::-webkit-details-marker {
	display: none;
}

.imi-sanfona__titulo:hover,
.imi-sanfona-titulo:hover {
	background: var(--imi-papel-suave);
}

.imi-sanfona__seta,
.imi-sanfona-sinal {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--imi-c-azul);
	transition: transform var(--imi-transicao);
}

/* O mesmo ícone de mais vira um sinal de menos quando gira 45 graus e a barra
   de cima some. Basta girar: o desenho é uma cruz. */
[open] > .imi-sanfona__titulo .imi-sanfona__seta,
[open] > .imi-sanfona-titulo .imi-sanfona-sinal {
	transform: rotate(45deg);
}

.imi-sanfona__corpo,
.imi-sanfona-corpo {
	padding: 0 var(--imi-e-5) var(--imi-e-5);
	background: var(--imi-papel);
}

.imi-sanfona__corpo > *:last-child,
.imi-sanfona-corpo > *:last-child {
	margin-bottom: 0;
}

/* Botões vindos de [plethora_button]. */
.imi-botao-linha {
	margin-bottom: var(--imi-e-4);
}

.imi-botao-linha--centro {
	text-align: center;
}

.imi-botao-linha--direita {
	text-align: right;
}

/* Grupo de título de [plethora_headinggroup]. */
.imi-titulo-grupo {
	margin-bottom: var(--imi-e-5);
	text-align: center;
	grid-column: 1 / -1;
}

.imi-titulo-grupo--esquerda {
	text-align: left;
}

.imi-titulo-grupo--direita {
	text-align: right;
}

.imi-titulo-grupo__titulo :is(h1, h2, h3, h4) {
	margin-bottom: var(--imi-e-2);
}

.imi-titulo-grupo__sub {
	margin: 0;
	color: var(--imi-tinta-suave);
	font-size: var(--imi-t-lead);
}

/* Cartão de destaque de [plethora_teaserbox]. Título sempre abaixo da figura,
   pelo mesmo motivo do cartão de post. */
.imi-cartao-teaser {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--imi-e-3);
	margin-bottom: var(--imi-e-5);
}

.imi-cartao-teaser--caixa {
	padding: var(--imi-e-5);
	border: 1px solid var(--imi-borda);
	border-radius: var(--imi-raio);
	background: var(--imi-papel);
}

.imi-cartao-teaser__figura {
	margin: 0;
	overflow: hidden;
	border-radius: var(--imi-raio-p);
}

.imi-cartao-teaser__imagem {
	width: 100%;
	height: auto;
}

.imi-cartao-teaser__icone {
	display: inline-flex;
	color: var(--imi-c-azul);
	font-size: 2.4rem;
}

.imi-cartao-teaser__titulo {
	margin: 0;
	font-size: var(--imi-t-4);
}

.imi-cartao-teaser__titulo a {
	text-decoration: none;
}

.imi-cartao-teaser__texto {
	margin: 0;
	color: var(--imi-tinta);
	font-size: var(--imi-t-apoio);
}

.imi-cartao-teaser__acao {
	margin: auto 0 0;
}

/* Área clicável de cartão que só tinha imagem. */
.imi-cartao-teaser__area {
	position: absolute;
	inset: 0;
}

/* HTML solto que sobrou de [vc_raw_html]. */
.imi-html-antigo {
	margin-bottom: var(--imi-e-5);
}

/* Página institucional, links das páginas filhas e navegação entre posts. */
.imi-pagina .imi-prosa,
.imi-post .imi-prosa {
	max-width: 70ch;
}

/* Conteúdo antigo em linhas de largura cheia não cabe numa coluna de leitura:
   a faixa precisa dos doze avos inteiros. O seletor repete o pai justamente
   para pesar mais do que a regra de cima, que é de dois níveis. */
.imi-pagina .imi-prosa:has(section.imi-linha),
.imi-post .imi-prosa:has(section.imi-linha) {
	max-width: none;
}

.imi-post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--imi-e-2);
	margin-bottom: var(--imi-e-5);
	color: var(--imi-tinta-suave);
	font-size: var(--imi-t-miudo);
}

.imi-post-meta-sep {
	opacity: 0.6;
}

.imi-paginas-do-post {
	margin-top: var(--imi-e-5);
	font-size: var(--imi-t-apoio);
}

.imi-filhas {
	margin-top: var(--imi-e-7);
}

.imi-filhas-titulo {
	font-size: var(--imi-t-3);
}

.imi-filhas-lista {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--imi-e-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 48em) {
	.imi-filhas-lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.imi-filhas-lista a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--imi-e-3);
	padding: var(--imi-e-3) var(--imi-e-4);
	border: 1px solid var(--imi-borda);
	border-radius: var(--imi-raio-p);
	background: var(--imi-papel);
	text-decoration: none;
	transition: border-color var(--imi-transicao), background var(--imi-transicao);
}

.imi-filhas-lista a:hover {
	border-color: var(--imi-c-azul);
	background: var(--imi-papel-suave);
}

.imi-vizinhos {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--imi-e-4);
	margin-top: var(--imi-e-7);
}

@media (min-width: 48em) {
	.imi-vizinhos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.imi-vizinho {
	display: flex;
	flex-direction: column;
	gap: var(--imi-e-1);
	padding: var(--imi-e-4);
	border: 1px solid var(--imi-borda);
	border-radius: var(--imi-raio);
	text-decoration: none;
	transition: border-color var(--imi-transicao), box-shadow var(--imi-transicao);
}

.imi-vizinho:hover {
	border-color: var(--imi-c-azul);
	box-shadow: var(--imi-sombra);
}

.imi-vizinho--proximo {
	text-align: right;
}

.imi-vizinho-rotulo {
	display: inline-flex;
	align-items: center;
	gap: var(--imi-e-1);
	color: var(--imi-tinta-suave);
	font-size: var(--imi-t-miudo);
}

.imi-vizinho--proximo .imi-vizinho-rotulo {
	justify-content: flex-end;
}

.imi-vizinho--anterior .imi-vizinho-rotulo .imi-icone {
	transform: rotate(90deg);
}

.imi-vizinho-titulo {
	color: var(--imi-titulo);
	font-family: var(--imi-fonte-titulo);
	font-weight: 700;
}

.imi-relacionados {
	margin-top: var(--imi-e-8);
	padding-top: var(--imi-e-7);
	border-top: 1px solid var(--imi-borda);
}

/* Paginação do arquivo e da busca. */
.imi-paginacao {
	margin-top: var(--imi-e-7);
}

.imi-paginacao .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--imi-e-2);
}

.imi-paginacao .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding-inline: var(--imi-e-3);
	border: 1px solid var(--imi-borda);
	border-radius: var(--imi-raio-p);
	color: var(--imi-link);
	text-decoration: none;
	transition: background var(--imi-transicao), border-color var(--imi-transicao);
}

.imi-paginacao .page-numbers:hover {
	border-color: var(--imi-c-azul);
	background: var(--imi-papel-suave);
}

.imi-paginacao .page-numbers.current {
	border-color: var(--imi-c-azul-profundo);
	color: var(--imi-c-branco);
	background: var(--imi-c-azul-profundo);
}

.imi-paginacao .page-numbers.dots {
	border-color: transparent;
	min-width: auto;
}

/* Listagem vazia, busca sem resultado e tela de erro. */
.imi-vazio {
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
}

.imi-vazio-titulo {
	margin-top: var(--imi-e-6);
	font-size: var(--imi-t-3);
}

.imi-vazio-atalhos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--imi-e-3);
	padding: 0;
	list-style: none;
}

.imi-erro__texto {
	max-width: 46rem;
	margin-bottom: var(--imi-e-5);
	font-size: var(--imi-t-lead);
}

.imi-erro__busca {
	max-width: 32rem;
	margin-bottom: var(--imi-e-6);
}

.imi-erro__atalhos ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--imi-e-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Busca. */
.imi-busca {
	display: flex;
	gap: var(--imi-e-2);
	margin-bottom: 0;
}

.imi-busca__campo {
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--imi-e-3) var(--imi-e-4);
	border: 1px solid var(--imi-borda-forte);
	border-radius: var(--imi-raio-p);
	background: var(--imi-papel);
}

.imi-busca__botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	padding-inline: var(--imi-e-4);
	border: 0;
	border-radius: var(--imi-raio-p);
	color: var(--imi-c-branco);
	background: var(--imi-c-azul-profundo);
	font-size: 1.1rem;
	transition: background var(--imi-transicao);
}

.imi-busca__botao:hover {
	background: var(--imi-c-azul-escuro);
}

/* ==========================================================================
   9b. Galeria de fotos e lightbox
   As galerias da escola são grandes de verdade: 274 fotos na Semana da Criança,
   139 na Mostra Científica. O padrão do WordPress dava miniaturas de 150px em
   seis colunas fixas, que no celular viram selos ilegíveis.
   ========================================================================== */

.imi-fotos {
	margin: var(--imi-e-6) 0;
}

/* auto-fill com minmax em vez de número fixo de colunas: a grade se ajusta à
   largura real, e não a um número que o editor escolheu olhando o desktop. O
   valor do minmax sobe conforme a coluna pedida no shortcode. */
.imi-fotos__grade {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: var(--imi-e-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.imi-fotos__grade--2 {
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.imi-fotos__grade--4,
.imi-fotos__grade--5 {
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.imi-fotos__item {
	margin: 0;
}

/* Proporção fixa para a grade não virar um mosaico irregular: as fotos da
   escola vêm de celulares diferentes, em retrato e paisagem misturados. */
.imi-fotos__link {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1;
	border-radius: var(--imi-raio-p);
	background: var(--imi-papel-suave);
}

.imi-fotos__imagem {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--imi-transicao);
}

.imi-fotos__link:hover .imi-fotos__imagem,
.imi-fotos__link:focus-visible .imi-fotos__imagem {
	transform: scale(1.05);
}

/* Lupa no canto, só no hover: diz que a foto abre maior, sem poluir a grade. */
.imi-fotos__link::after {
	position: absolute;
	right: 6px;
	bottom: 6px;
	display: grid;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	color: var(--imi-c-branco);
	background: rgba(20, 30, 48, 0.6);
	content: "+";
	font-size: 1.1rem;
	line-height: 1;
	opacity: 0;
	place-items: center;
	transition: opacity var(--imi-transicao);
}

.imi-fotos__link:hover::after,
.imi-fotos__link:focus-visible::after {
	opacity: 1;
}

.imi-fotos__acao {
	margin: var(--imi-e-4) 0 0;
	text-align: center;
}

/* ---- Lightbox ----------------------------------------------------------- */

/*
 * A caixa não existe no HTML: o JavaScript monta na primeira vez que alguém
 * clica numa foto. Quem nunca clica não paga por um diálogo vazio no fim do
 * documento.
 */
.imi-lightbox {
	max-width: 100vw;
	max-height: 100vh;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	/* O escurecimento vai no próprio diálogo, e não só no ::backdrop.
	   O diálogo já ocupa a tela toda, então o efeito é o mesmo, e não depende de
	   o navegador pintar o pseudo-elemento: em navegador antigo, e em captura de
	   tela headless, o ::backdrop simplesmente não aparece, e a página ficaria
	   legível atrás da foto. O ::backdrop fica como reforço. */
	background: rgba(12, 18, 30, 0.94);
	overscroll-behavior: contain;
}

.imi-lightbox::backdrop {
	background: rgba(12, 18, 30, 0.94);
}

.imi-lightbox__imagem {
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: calc(100vw - 7rem);
	max-height: calc(100vh - 7rem);
	border-radius: var(--imi-raio-p);
	object-fit: contain;
	transform: translate(-50%, -50%);
}

.imi-lightbox__fechar,
.imi-lightbox__seta {
	position: absolute;
	z-index: 2;
	display: grid;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: var(--imi-c-branco);
	background: rgba(255, 255, 255, 0.12);
	cursor: pointer;
	place-items: center;
	transition: background var(--imi-transicao);
}

.imi-lightbox__fechar:hover,
.imi-lightbox__seta:hover {
	background: rgba(255, 255, 255, 0.28);
}

.imi-lightbox__fechar {
	top: var(--imi-e-3);
	right: var(--imi-e-3);
}

.imi-lightbox__seta {
	top: 50%;
	margin-top: -24px;
}

.imi-lightbox__seta--anterior {
	left: var(--imi-e-3);
}

.imi-lightbox__seta--proximo {
	right: var(--imi-e-3);
}

.imi-lightbox__legenda,
.imi-lightbox__contador {
	position: absolute;
	left: 50%;
	margin: 0;
	color: var(--imi-c-branco);
	text-align: center;
	transform: translateX(-50%);
}

.imi-lightbox__legenda {
	bottom: var(--imi-e-6);
	max-width: min(90vw, 60ch);
	font-size: var(--imi-t-miudo);
}

.imi-lightbox__contador {
	bottom: var(--imi-e-3);
	font-family: var(--imi-fonte-titulo);
	font-size: var(--imi-t-miudo);
	font-weight: 600;
	opacity: 0.75;
}

/* No celular a foto ocupa a largura toda e as setas descem para o rodapé, para
   não cobrirem a imagem com o polegar. */
@media (max-width: 47.99em) {
	.imi-lightbox__imagem {
		max-width: 100vw;
		max-height: calc(100vh - 9rem);
	}

	.imi-lightbox__seta {
		top: auto;
		bottom: var(--imi-e-6);
		margin-top: 0;
	}

	.imi-lightbox__legenda {
		bottom: calc(var(--imi-e-6) + 4rem);
	}
}

/* ==========================================================================
   9c. Matéria em duas colunas
   A coluna de texto tem largura de leitura (70ch) e não deve crescer: linha
   longa demais cansa e faz o olho perder a volta na quebra. Num monitor de 1440
   isso deixava metade da tela vazia dos dois lados, e é esse espaço que a
   lateral ocupa, sem mexer na medida do texto.
   ========================================================================== */

.imi-post__layout {
	display: grid;
	gap: var(--imi-e-7);
}

.imi-post__principal {
	min-width: 0;
}

.imi-lateral__bloco + .imi-lateral__bloco {
	margin-top: var(--imi-e-6);
}

.imi-lateral__titulo {
	margin: 0 0 var(--imi-e-3);
	padding-bottom: var(--imi-e-2);
	border-bottom: 2px solid var(--imi-c-azul-claro);
	color: var(--imi-c-azul-profundo);
	font-size: var(--imi-t-4);
	font-weight: 700;
}

/* ---- Assuntos ----------------------------------------------------------- */

.imi-lateral__assuntos {
	margin: 0;
	padding: 0;
	list-style: none;
}

.imi-lateral__assunto {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--imi-e-2);
	padding: var(--imi-e-2) 0;
	border-bottom: 1px solid var(--imi-borda);
	color: var(--imi-tinta);
	text-decoration: none;
}

.imi-lateral__assunto:hover {
	color: var(--imi-c-azul-profundo);
}

.imi-lateral__assunto--atual {
	color: var(--imi-c-azul-profundo);
	font-weight: 700;
}

/* O número fica em pílula discreta: informa o volume sem competir com o nome. */
.imi-lateral__conta {
	flex: 0 0 auto;
	min-width: 2.2em;
	padding: 2px 8px;
	border-radius: var(--imi-raio-pilula);
	color: var(--imi-tinta-suave);
	background: var(--imi-papel-suave);
	font-size: var(--imi-t-miudo);
	text-align: center;
}

.imi-lateral__assunto--atual .imi-lateral__conta {
	color: var(--imi-c-branco);
	background: var(--imi-c-azul-profundo);
}

/* ---- Últimas publicações ------------------------------------------------ */

.imi-lateral__posts {
	margin: 0;
	padding: 0;
	list-style: none;
}

.imi-lateral__post + .imi-lateral__post {
	margin-top: var(--imi-e-3);
	padding-top: var(--imi-e-3);
	border-top: 1px solid var(--imi-borda);
}

.imi-lateral__post-link {
	display: grid;
	grid-template-columns: 68px minmax(0, 1fr);
	gap: var(--imi-e-3);
	align-items: start;
	color: inherit;
	text-decoration: none;
}

.imi-lateral__post-foto {
	display: grid;
	overflow: hidden;
	aspect-ratio: 1;
	border-radius: var(--imi-raio-p);
	color: var(--imi-c-azul-claro);
	background: var(--imi-papel-suave);
	font-size: 1.6rem;
	place-items: center;
}

.imi-lateral__post-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.imi-lateral__post-titulo {
	display: block;
	color: var(--imi-titulo);
	font-family: var(--imi-fonte-titulo);
	font-size: var(--imi-t-miudo);
	font-weight: 600;
	line-height: 1.35;
}

.imi-lateral__post-link:hover .imi-lateral__post-titulo {
	color: var(--imi-c-azul-profundo);
}

.imi-lateral__post-data {
	display: block;
	margin-top: 4px;
	color: var(--imi-tinta-suave);
	font-size: var(--imi-t-miudo);
}

.imi-lateral__mais {
	margin: var(--imi-e-4) 0 0;
}

.imi-lateral__mais a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--imi-link);
	font-family: var(--imi-fonte-titulo);
	font-size: var(--imi-t-miudo);
	font-weight: 600;
	text-decoration: none;
}

.imi-lateral__mais a:hover {
	text-decoration: underline;
}

/* ---- Chamada de matrícula ----------------------------------------------- */

.imi-lateral__bloco--cta {
	padding: var(--imi-e-4);
	border-radius: var(--imi-raio);
	background: var(--imi-papel-suave);
}

.imi-lateral__bloco--cta .imi-lateral__titulo {
	border-bottom-color: var(--imi-c-azul);
}

.imi-lateral__cta-texto {
	margin: 0 0 var(--imi-e-3);
	font-size: var(--imi-t-miudo);
}

.imi-lateral__cta-botao {
	width: 100%;
	justify-content: center;
}

@media (min-width: 62em) {
	/*
	 * A lateral entra só aqui. Abaixo disso ela viraria uma coluna estreita ao
	 * lado de um texto estreito, e as duas ficariam ruins: no tablet e no celular
	 * ela desce para depois do texto, na ordem do documento. Quem chegou para ler
	 * a matéria lê a matéria primeiro.
	 */
	/*
	 * A coluna do texto é medida em ch, não em fração: assim ela para de crescer
	 * na largura de leitura em vez de esticar até onde o container permitir. O
	 * conjunto fica centralizado, e a sobra vira margem dos dois lados, e não
	 * uma linha de texto de 830 pixels.
	 */
	.imi-post__layout {
		grid-template-columns: minmax(0, 74ch) 320px;
		justify-content: center;
	}

	/* Dentro da grade quem manda na medida é a coluna, então o limite da prosa
	   sairia na frente e deixaria uma faixa vazia à direita do texto. */
	.imi-post__layout .imi-prosa {
		max-width: none;
	}

	/*
	 * Acompanha a rolagem: as matérias da escola são longas (a Semana Farroupilha
	 * tem 122 fotos abaixo do texto), e uma lateral que some no primeiro terço da
	 * página não serve de navegação.
	 *
	 * O sticky fica no próprio item da grade, com align-self: start. Estava um
	 * nível abaixo, no elemento interno, e não grudava: o item da grade tinha a
	 * altura do próprio conteúdo, então não sobrava percurso para o filho
	 * deslizar. O align-self é o que impede o item de esticar até o fim da linha,
	 * que é o padrão da grade e anularia o efeito de novo.
	 */
	.imi-lateral {
		position: sticky;
		top: calc(var(--imi-topo-altura) + var(--imi-e-3));
		align-self: start;
		max-height: calc(100vh - var(--imi-topo-altura) - var(--imi-e-5));
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}
}

/* ==========================================================================
   10. Blocos do tema
   Abas, sanfona nova e linha do tempo. Todos saem legíveis sem JavaScript: o
   script só acrescenta comportamento, nunca cria conteúdo.
   ========================================================================== */

/* A barra de abas chega com o atributo hidden e o script o remove. O
   :not([hidden]) existe para o display:flex não vencer o atributo. */
.imi-abas {
	margin-bottom: var(--imi-e-5);
}

.imi-abas-lista:not([hidden]) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--imi-e-1);
	border-bottom: 2px solid var(--imi-borda);
}

.imi-abas-botao {
	padding: var(--imi-e-3) var(--imi-e-4);
	margin-bottom: -2px;
	border: 0;
	border-bottom: 3px solid transparent;
	background: none;
	color: var(--imi-tinta-suave);
	font-family: var(--imi-fonte-titulo);
	font-weight: 700;
	transition: color var(--imi-transicao), border-color var(--imi-transicao);
}

.imi-abas-botao:hover {
	color: var(--imi-link);
}

.imi-abas-botao[aria-selected="true"] {
	border-bottom-color: var(--imi-c-azul);
	color: var(--imi-link);
}

.imi-aba {
	padding-top: var(--imi-e-5);
}

/* Sem o script, cada painel mostra o próprio título e a página vira uma
   sequência de seções empilhadas. Com ele, o título some porque repetiria o
   texto do botão. */
.imi-aba-titulo {
	font-size: var(--imi-t-3);
}

.imi-aba-corpo > *:last-child {
	margin-bottom: 0;
}

/* Linha do tempo. Sai em <ol>, então a regra é presa ao elemento: a classe
   .imi-linha também é usada pelas faixas do conteúdo antigo, em <section>. */
ol.imi-linha {
	position: relative;
	margin: 0 0 var(--imi-e-6);
	padding: 0 0 0 var(--imi-e-6);
	list-style: none;
}

/* O traço vertical e a bolinha são desenhados no CSS, e não em imagem: a
   escola tem mais de noventa anos e essa lista costuma ser longa. */
ol.imi-linha::before {
	position: absolute;
	top: 8px;
	bottom: 8px;
	left: 7px;
	width: 2px;
	background: var(--imi-c-azul-claro);
	content: "";
}

.imi-marco {
	position: relative;
	margin-bottom: var(--imi-e-6);
}

.imi-marco:last-child {
	margin-bottom: 0;
}

.imi-marco-ponto {
	position: absolute;
	top: 6px;
	left: calc(var(--imi-e-6) * -1);
	width: 16px;
	height: 16px;
	border: 3px solid var(--imi-papel);
	border-radius: var(--imi-raio-pilula);
	background: var(--imi-c-azul);
	box-shadow: 0 0 0 2px var(--imi-c-azul-claro);
}

.imi-marco-ano {
	margin-bottom: var(--imi-e-1);
	color: var(--imi-c-azul-profundo);
	font-family: var(--imi-fonte-titulo);
	font-size: var(--imi-t-3);
	font-weight: 900;
	line-height: 1;
}

.imi-marco-titulo {
	margin-bottom: var(--imi-e-2);
	font-size: var(--imi-t-4);
}

.imi-marco-imagem {
	margin-bottom: var(--imi-e-3);
	border-radius: var(--imi-raio-p);
}

.imi-marco-texto > *:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   11. Formulário
   A faixa escura do "Fale conosco" (.imi-faixa-contato).

   Ela NÃO fica mais no rodapé de todas as telas. Sai por chamada de template ou
   por shortcode, nas páginas onde faz sentido. As classes .imi-faixa-form*, que
   embrulhavam a versão do rodapé, saíram junto com ela.
   ========================================================================== */

.imi-faixa-contato {
	--imi-foco: var(--imi-c-branco);
	padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
	background: var(--imi-c-azul-escuro);
	color: var(--imi-c-branco);
}

/* Título e chamada, uma vez só, no topo da faixa. */
.imi-contato-topo {
	margin-bottom: var(--imi-e-6);
	text-align: center;
}

.imi-contato-titulo {
	margin: 0 0 var(--imi-e-2);
	color: var(--imi-c-branco);
	font-size: var(--imi-t-2);
	font-weight: 900;
}

.imi-contato-chamada {
	max-width: 46rem;
	margin: 0 auto;
	color: var(--imi-c-branco);
	font-size: var(--imi-t-apoio);
	opacity: 0.92;
}

.imi-contato-grade {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--imi-e-6);
	align-items: start;
}

@media (min-width: 62em) {
	/*
	 * A coluna dos dados é bem mais curta que a do formulário (três linhas contra
	 * seis campos), então ela é estreita de propósito: em 5fr/7fr sobrava meia
	 * tela de azul vazio embaixo do e-mail. Aqui ela ocupa o que precisa e o
	 * formulário fica com o resto.
	 */
	.imi-contato-grade {
		grid-template-columns: minmax(240px, 4fr) minmax(0, 8fr);
		gap: var(--imi-e-7);
	}
}

/* Cartão dos dados: um bloco com borda própria, em vez de três linhas soltas
   sobre o azul com meia tela de vazio embaixo. */
.imi-contato-texto {
	padding: var(--imi-e-5);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--imi-raio);
	background: rgba(255, 255, 255, 0.06);
}

.imi-contato-subtitulo {
	margin: 0 0 var(--imi-e-4);
	color: var(--imi-c-branco);
	font-size: var(--imi-t-4);
	font-weight: 700;
}

.imi-contato-dados {
	margin: 0;
	padding: 0;
	list-style: none;
}

.imi-contato-redes {
	margin-top: var(--imi-e-5);
	padding-top: var(--imi-e-4);
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.imi-contato-redes__rotulo {
	display: block;
	margin-bottom: var(--imi-e-3);
	color: var(--imi-c-branco);
	font-size: var(--imi-t-miudo);
	opacity: 0.85;
}

.imi-contato-dado {
	display: flex;
	align-items: flex-start;
	gap: var(--imi-e-3);
	margin-bottom: var(--imi-e-3);
	font-size: var(--imi-t-apoio);
}

.imi-contato-dado .imi-icone {
	margin-top: 0.3em;
	color: var(--imi-c-azul-claro);
}

.imi-contato-dado a {
	color: var(--imi-c-branco);
	text-decoration: none;
}

.imi-contato-dado a:hover {
	color: var(--imi-c-azul-claro);
	text-decoration: underline;
}

/* A caixa do formulário é clara dentro da faixa escura: campo de digitar sobre
   fundo escuro cansa a vista e some em tela de celular no sol. */
.imi-contato-caixa {
	--imi-foco: var(--imi-c-azul-profundo);
	padding: var(--imi-e-4);
	border-radius: var(--imi-raio);
	background: var(--imi-papel);
	color: var(--imi-tinta);
	box-shadow: var(--imi-sombra-alta);
}

@media (min-width: 48em) {
	.imi-contato-caixa {
		padding: var(--imi-e-5);
	}
}

.imi-form {
	margin: 0;
}

.imi-form-nota {
	margin-bottom: var(--imi-e-4);
	color: var(--imi-tinta-suave);
	font-size: var(--imi-t-miudo);
}

.imi-form-linha {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 var(--imi-e-4);
}

@media (min-width: 40em) {
	.imi-form-linha {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.imi-form-campo {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: var(--imi-e-3);
}

.imi-form-campo label {
	color: var(--imi-tinta);
	font-family: var(--imi-fonte-titulo);
	font-size: var(--imi-t-miudo);
	font-weight: 700;
}

.imi-form-obrigatorio {
	color: #B3261E;
}

/* Campos mais baixos e a caixa de mensagem com altura de três linhas em vez de
   cinco: a caixa do formulário chegava a mil pixels de altura, e ao lado dela
   ficava uma coluna de três linhas de contato, o que desequilibrava a faixa
   inteira. */
.imi-form-campo :is(input, textarea, select) {
	width: 100%;
	padding: var(--imi-e-2) var(--imi-e-3);
	border: 1px solid var(--imi-borda-forte);
	border-radius: var(--imi-raio-p);
	background: var(--imi-papel);
	font-size: var(--imi-t-apoio);
	transition: border-color var(--imi-transicao), box-shadow var(--imi-transicao);
}

.imi-form-campo textarea {
	min-height: 7.5rem;
	resize: vertical;
}

.imi-form-campo :is(input, textarea):hover {
	border-color: var(--imi-c-azul);
}

.imi-form-campo :is(input, textarea):focus {
	border-color: var(--imi-c-azul-profundo);
	box-shadow: 0 0 0 3px rgba(82, 143, 200, 0.28);
	outline: none;
}

.imi-form-envio {
	margin-bottom: var(--imi-e-3);
}

.imi-form-envio .imi-botao {
	width: 100%;
	justify-content: center;
}

@media (min-width: 40em) {
	.imi-form-envio .imi-botao {
		width: auto;
	}
}

.imi-form-aviso {
	margin: 0;
	color: var(--imi-tinta-suave);
	font-size: var(--imi-t-miudo);
}

/* Recado depois do envio. Sucesso e erro se distinguem pela cor E pelo texto:
   quem não enxerga a diferença de cor ainda lê o que aconteceu. */
.imi-form-recado {
	margin-bottom: var(--imi-e-4);
	padding: var(--imi-e-3) var(--imi-e-4);
	border-left: 4px solid;
	border-radius: var(--imi-raio-p);
	font-size: var(--imi-t-apoio);
}

.imi-form-recado--ok {
	border-color: #1E7B34;
	color: #14532B;
	background: #E8F5EC;
}

.imi-form-recado--erro {
	border-color: #B3261E;
	color: #7F1D1A;
	background: #FDECEA;
}

/* O campo-isca já sai escondido por atributo style no PHP, de propósito. Aqui
   só reforça, para o caso de alguém copiar o formulário sem aquele atributo. */
.imi-form-isca {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================================
   12. Rodapé e botão de WhatsApp
   ========================================================================== */

.imi-rodape {
	--imi-foco: var(--imi-c-branco);
	padding-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
	background: var(--imi-c-azul-escuro);
	color: var(--imi-c-branco);
	font-size: var(--imi-t-apoio);
}

.imi-rodape__topo {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--imi-e-6);
	padding-bottom: var(--imi-e-6);
}

@media (min-width: 48em) {
	.imi-rodape__topo {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 62em) {
	.imi-rodape__topo {
		grid-template-columns: 1.2fr 1fr 1fr;
	}
}

/*
 * O logo da escola é azul escuro sobre fundo transparente, e o rodapé é azul
 * escuro: no fundo do site ele sumia, dava para adivinhar o contorno e mais
 * nada. O filtro pinta de branco sólido qualquer que seja a arte, então
 * continua valendo se a escola trocar o arquivo do logo um dia.
 *
 * `brightness(0)` leva tudo a preto, inclusive o azul, e `invert(1)` vira esse
 * preto em branco. Duas etapas porque `invert` sozinho devolveria o negativo da
 * cor, e um logo laranja não é o que se quer ali.
 */
.imi-rodape__logo {
	max-width: 220px;
	max-height: 92px;
	margin-bottom: var(--imi-e-4);
	filter: brightness(0) invert(1);
	object-fit: contain;
	opacity: 0.95;
}

.imi-rodape__nome {
	display: block;
	margin-bottom: var(--imi-e-4);
	color: var(--imi-c-branco);
	font-family: var(--imi-fonte-titulo);
	font-size: var(--imi-t-4);
	font-weight: 900;
}

.imi-rodape__titulo {
	margin-bottom: var(--imi-e-4);
	color: var(--imi-c-branco);
	font-size: var(--imi-t-4);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.imi-rodape__dados {
	margin: 0;
	padding: 0;
	list-style: none;
}

.imi-rodape__dados li {
	display: flex;
	align-items: flex-start;
	gap: var(--imi-e-3);
	margin-bottom: var(--imi-e-3);
}

.imi-rodape__icone {
	display: inline-flex;
	margin-top: 0.3em;
	color: var(--imi-c-azul-claro);
}

.imi-rodape a {
	color: var(--imi-c-branco);
	text-decoration: none;
}

.imi-rodape a:hover {
	color: var(--imi-c-azul-claro);
	text-decoration: underline;
}

.imi-rodape__menu .imi-menu {
	display: grid;
	gap: var(--imi-e-2);
}

.imi-rodape__menu .imi-menu-link {
	padding: var(--imi-e-1) 0;
	color: var(--imi-c-branco);
	font-size: var(--imi-t-apoio);
	font-weight: 400;
}

.imi-rodape__menu .imi-menu-link:hover {
	color: var(--imi-c-azul-claro);
	text-decoration: underline;
}

/*
 * A página atual, no rodapé, fica clara e sublinhada.
 *
 * A regra geral do menu pinta o item atual com o azul da marca, e ela tem
 * especificidade maior que a do rodapé (duas classes no mesmo elemento contra
 * duas em níveis diferentes). O resultado era azul escuro sobre o azul escuro
 * do rodapé: o item sumia justamente por estar em destaque.
 */
.imi-rodape__menu .imi-menu-item.imi-ativo > .imi-menu-link,
.imi-rodape__menu .imi-menu-item.imi-ancestral > .imi-menu-link {
	color: var(--imi-c-branco);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* O rodapé não repete os submenus: quatro níveis ali viram uma parede de links
   e nenhum deles é encontrado. */
.imi-rodape__menu .imi-submenu,
.imi-rodape__menu .imi-submenu-toggle {
	display: none;
}

/* Redes sobre fundo escuro: no rodapé e no cartão de contato. A cor padrão do
   ícone é o azul da marca, que sobre o azul da faixa vira um borrão. */
.imi-redes--rodape .imi-redes__link,
.imi-contato-redes .imi-redes__link {
	color: var(--imi-c-branco);
	background: rgba(255, 255, 255, 0.12);
}

.imi-redes--rodape .imi-redes__link:hover,
.imi-contato-redes .imi-redes__link:hover {
	color: var(--imi-c-azul-escuro);
	background: var(--imi-c-branco);
}

/* ---- Assinatura de quem desenvolveu ------------------------------------- */

.imi-rodape__assina {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--imi-e-2);
	color: var(--imi-c-branco);
	text-decoration: none;
}

.imi-rodape__assina-texto {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	opacity: 0.85;
}

/*
 * Sem faixa atrás e sem filtro: o arquivo já é a versão branca da marca, com o
 * miolo do símbolo transparente.
 *
 * O filtro `brightness(0) invert(1)`, que serve para o logo da escola, não
 * servia aqui: ele pinta de branco tudo o que é opaco, então o furo do "D"
 * fechava e o símbolo virava uma mancha sólida. Ver imi_logo_suporte_branco().
 */
.imi-rodape__assina-logo {
	width: auto;
	/* 34px, e não 26: abaixo disso a linha "Evangelização e Marketing" do logo
	   vira um borrão e o nome da agência deixa de ser legível. */
	height: 34px;
	object-fit: contain;
	opacity: 0.9;
	transition: opacity var(--imi-transicao), transform var(--imi-transicao);
}

.imi-rodape__assina:hover .imi-rodape__assina-logo {
	opacity: 1;
}

.imi-rodape__assina:hover .imi-rodape__assina-logo {
	transform: translateY(-2px);
}

.imi-rodape__assina:hover .imi-rodape__assina-texto {
	opacity: 1;
}

.imi-rodape__widgets {
	padding-bottom: var(--imi-e-5);
}

.imi-rodape__assinatura {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--imi-e-2) var(--imi-e-4);
	padding-block: var(--imi-e-4);
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	font-size: var(--imi-t-miudo);
}

.imi-rodape__direitos,
.imi-rodape__credito {
	margin: 0;
}

/* Botão flutuante do WhatsApp.

   O fundo é o verde escuro, e não o verde da paleta: o verde original tem
   2,4:1 contra o branco, ou seja, o rótulo do botão seria ilegível. A borda
   mantém o verde da marca, então o botão continua sendo reconhecido de longe. */
.imi-zap {
	position: fixed;
	z-index: 50;
	right: var(--imi-e-4);
	bottom: var(--imi-e-4);
	display: inline-flex;
	align-items: center;
	gap: var(--imi-e-2);
	max-width: calc(100% - var(--imi-e-6));
	padding: var(--imi-e-3) var(--imi-e-4);
	border: 2px solid var(--imi-c-verde);
	border-radius: var(--imi-raio-pilula);
	color: var(--imi-c-branco);
	background: var(--imi-c-verde-escuro);
	font-family: var(--imi-fonte-titulo);
	font-size: var(--imi-t-apoio);
	font-weight: 700;
	text-decoration: none;
	box-shadow: var(--imi-sombra-alta);
	transition: transform var(--imi-transicao), background var(--imi-transicao);
}

.imi-zap:hover {
	color: var(--imi-c-branco);
	background: #12611A;
	transform: translateY(-2px);
}

.imi-zap__icone {
	display: inline-flex;
	font-size: 1.4rem;
}

/* No celular sobra só o ícone: o botão com texto cobriria metade da tela e
   ficaria em cima do conteúdo que a pessoa está lendo. */
.imi-zap__texto {
	display: none;
}

@media (min-width: 48em) {
	.imi-zap {
		right: var(--imi-e-5);
		bottom: var(--imi-e-5);
	}

	.imi-zap__texto {
		display: inline;
	}
}

/* ==========================================================================
   13. Botões e utilitários
   ========================================================================== */

.imi-botao {
	display: inline-flex;
	align-items: center;
	gap: var(--imi-e-2);
	padding: var(--imi-e-3) var(--imi-e-5);
	border: 2px solid var(--imi-c-azul-profundo);
	border-radius: var(--imi-raio-pilula);
	color: var(--imi-c-branco);
	background: var(--imi-c-azul-profundo);
	font-family: var(--imi-fonte-titulo);
	font-size: var(--imi-t-apoio);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background var(--imi-transicao), color var(--imi-transicao), border-color var(--imi-transicao), transform var(--imi-transicao);
}

.imi-botao:hover {
	color: var(--imi-c-branco);
	background: var(--imi-c-azul-escuro);
	border-color: var(--imi-c-azul-escuro);
	transform: translateY(-2px);
}

.imi-botao--primario {
	border-color: var(--imi-c-azul-profundo);
	background: var(--imi-c-azul-profundo);
}

.imi-botao--verde {
	border-color: var(--imi-c-verde-escuro);
	background: var(--imi-c-verde-escuro);
}

.imi-botao--verde:hover {
	border-color: #12611A;
	background: #12611A;
}

/* Vazado e contorno herdam a cor do texto do lugar onde estão, então o mesmo
   botão funciona sobre fundo claro e sobre a faixa azul. */
.imi-botao--vazado,
.imi-botao--contorno {
	border-color: currentColor;
	color: var(--imi-link);
	background: none;
}

.imi-botao--vazado:hover,
.imi-botao--contorno:hover {
	color: var(--imi-c-branco);
	background: var(--imi-c-azul-profundo);
	border-color: var(--imi-c-azul-profundo);
}

.imi-botao--claro {
	border-color: var(--imi-c-branco);
	color: var(--imi-c-azul-profundo);
	background: var(--imi-c-branco);
}

.imi-botao--claro:hover {
	color: var(--imi-c-branco);
	background: var(--imi-c-azul-profundo);
	border-color: var(--imi-c-branco);
}

/* Dentro de faixa escura o vazado vira branco, senão azul sobre azul. */
.imi-linha--azul .imi-botao--vazado,
.imi-linha--escura .imi-botao--vazado,
.imi-linha--veu .imi-botao--vazado,
.imi-hero .imi-botao--vazado,
.imi-destaque .imi-botao--vazado {
	color: var(--imi-c-branco);
}

.imi-botao__icone {
	display: inline-flex;
}

/* Texto que existe só para quem lê por voz. Fora da tela, e nunca com
   display:none: o leitor de tela ignora o que está com display:none, e a
   pessoa ficaria com um campo ou um botão sem nome. */
.imi-so-leitor,
.imi-oculto,
.imi-oculto-visual,
.screen-reader-text {
	position: absolute !important; /* !important porque o WordPress e alguns plugins imprimem style inline em elementos que recebem estas classes. */
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Pular para o conteúdo: fica escondido até receber foco, e aí aparece. */
.imi-pular {
	position: absolute;
	z-index: 100;
	top: -100px;
	left: var(--imi-e-4);
	padding: var(--imi-e-3) var(--imi-e-5);
	border-radius: 0 0 var(--imi-raio-p) var(--imi-raio-p);
	color: var(--imi-c-branco);
	background: var(--imi-c-azul-profundo);
	font-weight: 700;
	text-decoration: none;
	transition: top var(--imi-transicao);
}

.imi-pular:focus {
	top: 0;
	color: var(--imi-c-branco);
}

/* ==========================================================================
   14. Acessibilidade
   Foco visível em tudo que recebe foco, e movimento desligado para quem pediu
   menos movimento no sistema.
   ========================================================================== */

/* :focus-visible mostra o anel para quem chegou pelo teclado e não para quem
   clicou com o mouse. O :focus sem -visible continua valendo em navegador
   antigo, mais abaixo. */
:focus-visible {
	outline: var(--imi-foco-largura) solid var(--imi-foco);
	outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: var(--imi-foco-largura) solid var(--imi-foco);
	outline-offset: 3px;
	border-radius: var(--imi-raio-p);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: var(--imi-foco-largura) solid var(--imi-foco);
	outline-offset: 1px;
}

/* Reserva para navegador que não conhece :focus-visible: ali o foco simples
   desenha o anel. A regra some assim que o navegador entende o seletor. */
@supports not selector(:focus-visible) {
	a:focus,
	button:focus,
	input:focus,
	select:focus,
	textarea:focus,
	summary:focus,
	[tabindex]:focus {
		outline: var(--imi-foco-largura) solid var(--imi-foco);
		outline-offset: 2px;
	}
}

/* O trilho do carrossel recebe foco para poder ser rolado pelo teclado, então
   o anel dele tem que aparecer por dentro: por fora ficaria cortado pela
   borda da seção. */
.imi-destaques__trilho:focus-visible {
	outline: var(--imi-foco-largura) solid var(--imi-c-branco);
	outline-offset: -6px;
}

/*
 * Quem marcou "reduzir movimento" no sistema recebe o mesmo site, parado.
 * As durações vão para tempo quase zero em vez de zero absoluto porque
 * animação com duração zero, em alguns navegadores, deixa de disparar o
 * evento de fim e trava script que espera por ele.
 */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important; /* !important vence a duração escrita em qualquer regra acima, inclusive as de plugin. */
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.imi-destaques__trilho {
		scroll-behavior: auto;
	}

	.imi-cartao:hover,
	.imi-cartao-inst:hover,
	.imi-botao:hover,
	.imi-zap:hover,
	.imi-vizinho:hover {
		transform: none;
	}

	.imi-cartao:hover .imi-capa img,
	.imi-galeria__item:hover .imi-galeria__imagem {
		transform: none;
	}
}

/* Quem pediu mais contraste ganha borda visível onde o desenho usava só sombra. */
@media (prefers-contrast: more) {
	.imi-cartao,
	.imi-contato-caixa,
	.imi-coluna--caixa {
		border: 2px solid var(--imi-tinta);
	}

	.imi-botao {
		border-width: 3px;
	}
}

/* ==========================================================================
   15. Impressão
   Papel não tem menu, botão flutuante nem formulário. Sai o conteúdo, e só.
   ========================================================================== */

@media print {
	.imi-barra-topo,
	.imi-nav,
	.imi-cabecalho__acoes,
	.imi-busca-painel,
	.imi-busca,
	.imi-zap,
	.imi-faixa-contato,
	.imi-destaques__setas,
	.imi-destaques__pontos,
	.imi-paginacao,
	.imi-vizinhos,
	.imi-relacionados,
	.imi-pular,
	.imi-cartao-mais {
		display: none;
	}

	body {
		background: #FFF;
		color: #000;
		font-size: 12pt;
	}

	.imi-cabecalho {
		position: static;
		box-shadow: none;
	}

	/* Fundo colorido em impressora vira uma mancha cinza e come tinta. O texto
	   que era branco volta a ser preto para continuar legível no papel. */
	.imi-hero,
	.imi-cabecalho-pagina,
	.imi-rodape,
	.imi-destaque,
	.imi-cartao-inst,
	section.imi-linha {
		background: none !important; /* !important porque a cor de fundo dessas faixas pode vir por atributo style, escrito pelo tradutor do conteúdo antigo. */
		color: #000;
		box-shadow: none;
	}

	.imi-hero :is(h1, h2, h3, p, a),
	.imi-cabecalho-pagina :is(h1, h2, p),
	.imi-rodape :is(h2, p, a, li),
	.imi-destaque :is(h2, p) {
		color: #000;
		text-shadow: none;
	}

	.imi-hero-corte {
		display: none;
	}

	/* Carrossel no papel vira uma lista: os destaques que estavam fora da tela
	   apareceriam cortados na horizontal. */
	.imi-destaques__trilho {
		display: block;
		overflow: visible;
	}

	.imi-destaque {
		min-height: 0;
		padding-block: var(--imi-e-4);
		border-bottom: 1px solid #999;
	}

	.imi-destaque__fundo {
		display: none;
	}

	/* Cartão e marco não podem ser partidos ao meio pela quebra de página. */
	.imi-cartao,
	.imi-marco,
	.imi-sanfona__item,
	.imi-sanfona-item {
		break-inside: avoid;
		border: 1px solid #999;
		box-shadow: none;
	}

	/* Sanfona fechada no papel esconderia texto que a pessoa quis levar. */
	details {
		display: block;
	}

	details > *:not(summary) {
		display: block !important; /* !important porque o navegador esconde o conteúdo de um details fechado pelo estilo interno dele, que não é alcançável de outro jeito. */
	}

	a {
		color: #000;
		text-decoration: underline;
	}

	img {
		max-width: 100% !important; /* !important porque o WordPress escreve width em atributo na tag da imagem. */
	}
}

/* -------------------------------------------------------------------------- */
/* Perguntas frequentes                                                        */
/* -------------------------------------------------------------------------- */

/*
 * Feito com <details>, o elemento do proprio HTML para abrir e fechar. O
 * teclado, o leitor de tela e a busca do navegador (Ctrl+F acha texto dentro de
 * details fechado nos navegadores atuais) funcionam sem uma linha de JavaScript.
 */

.imi-faq {
	padding-block: clamp(2.5rem, 6vw, 4rem);
	background: var(--imi-c-fundo);
}

.imi-faq__titulo {
	margin: 0 0 1.5rem;
	font-size: clamp(1.5rem, 3.2vw, 2rem);
	color: var(--imi-c-azul-escuro);
}

.imi-faq__lista {
	display: grid;
	gap: 0.75rem;
	max-width: 52rem;
}

.imi-faq__item {
	overflow: hidden;
	background: var(--imi-c-branco);
	border: 1px solid var(--imi-borda, #E2E7EE);
	border-radius: 0.75rem;
}

.imi-faq__pergunta {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	/* 44px de alvo de toque, contando o padding. */
	padding: 1rem 1.25rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--imi-c-azul-escuro);
	cursor: pointer;
	list-style: none;
}

/* O triangulo padrao do navegador sai; quem marca o estado e a seta do tema. */
.imi-faq__pergunta::-webkit-details-marker {
	display: none;
}

.imi-faq__pergunta:hover {
	background: var(--imi-c-fundo);
}

.imi-faq__pergunta:focus-visible {
	outline: 3px solid var(--imi-c-azul-profundo);
	outline-offset: -3px;
}

.imi-faq__pergunta .imi-icone {
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--imi-c-azul-profundo);
	transition: transform 0.2s ease;
}

.imi-faq__item[open] .imi-faq__pergunta .imi-icone {
	transform: rotate(180deg);
}

.imi-faq__resposta {
	padding: 0 1.25rem 1.25rem;
	color: var(--imi-c-texto);
}

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

.imi-faq__resposta > :last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.imi-faq__pergunta .imi-icone {
		transition: none;
	}
}