/*
 * Saúde nas Margens — o que o theme.json não expressa.
 *
 * Carregado no site E dentro do editor (add_editor_style): a Comunicação
 * precisa ver o que o visitante vai ver.
 *
 * A página é aberta sobretudo no CELULAR (é compartilhada por WhatsApp) —
 * diferente da plataforma, que responde de 768px para cima. Aqui tudo tem de
 * caber em 360px sem rolar na horizontal.
 */

:root {
	--snm-raio: 18px;
	--snm-sombra: 0 18px 40px -18px rgb(6 25 27 / .35);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* As âncoras (#como-funciona…) param abaixo do cabeçalho, não sob ele. */
[id] { scroll-margin-top: 5rem; }

/* ---- Rótulo em caixa alta: a assinatura visual da plataforma ---------- */
.snm-rotulo {
	font-family: var(--wp--preset--font-family--corpo);
	font-size: .8rem !important;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--marca-escura);
	margin-bottom: .25rem;
}
.has-contrast-background-color .snm-rotulo,
.wp-block-cover .snm-rotulo,
.snm-rodape .snm-rotulo { color: var(--wp--preset--color--marca); }

/* ---- Seções ------------------------------------------------------------ */
.snm-secao {
	padding-block: var(--wp--preset--spacing--60);
	padding-inline: var(--wp--preset--spacing--40);
}
/* Sem margem entre seções de largura total nem entre cabeçalho, conteúdo e
   rodapé: o respiro é o padding de cada seção. O tema pai põe um blockGap
   entre os filhos de .wp-site-blocks, que aparecia como faixa branca. */
.wp-block-post-content > .alignfull { margin-block: 0 !important; }
.wp-site-blocks > * { margin-block-start: 0 !important; }
body { overflow-x: clip; }

/* Texto sobre foto (capas) alinhado à MESMA grade de 1200px das seções.
   O recuo é PADDING calculado, e não max-width + margin auto: capa com
   posição de conteúdo (`has-custom-content-position`) zera a margem e a
   largura do container com seletor de classe dobrada, e ganhava daqui —
   o texto da abertura ficava colado à esquerda, fora da grade (medido). */
.wp-block-cover .wp-block-cover__inner-container.wp-block-cover__inner-container {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding-inline: max(var(--wp--preset--spacing--40), calc((100% - 1200px) / 2));
	box-sizing: border-box;
}
.snm-abertura .wp-block-cover__inner-container > *,
.snm-territorio .wp-block-cover__inner-container > * { margin-left: 0 !important; }
.snm-intro { margin-bottom: var(--wp--preset--spacing--50); }
.snm-enfase {
	font-family: var(--wp--preset--font-family--titulo);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--marca-escura);
}

/* ---- Fotos ------------------------------------------------------------- */
.snm-foto img,
.snm-mosaico img {
	border-radius: var(--snm-raio);
	box-shadow: var(--snm-sombra);
	width: 100%;
	height: auto;
	object-fit: cover;
}
.snm-foto-texto .snm-foto img { aspect-ratio: 4 / 3; }
.snm-eixo .snm-foto img { aspect-ratio: 3 / 2; }

/* ---- Cabeçalho: transparente sobre a foto da abertura ------------------ */
.snm-cabecalho { position: relative; z-index: 10; }
.snm-cabecalho-sobre-hero {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 10;
}
.snm-cabecalho-sobre-hero,
.snm-cabecalho-sobre-hero a,
.snm-cabecalho-sobre-hero .wp-block-site-title a { color: #fff; }
/* Menu aberto (celular e tablet): tela cheia na cor da marca, itens grandes
   à esquerda — o padrão do WP era branco, letra miúda e alinhado à direita. */
.snm-cabecalho .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--contrast) !important;
	color: #fff !important;
	padding: 1.5rem var(--wp--preset--spacing--40) !important;
}
.snm-cabecalho .wp-block-navigation__responsive-container.is-menu-open a { color: #fff !important; }
.snm-cabecalho .is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 3.5rem !important;
	align-items: flex-start !important;
}
.snm-cabecalho .is-menu-open .wp-block-navigation__container {
	align-items: flex-start !important;
	gap: 1.1rem !important;
}
.snm-cabecalho .is-menu-open .wp-block-navigation-item {
	font-family: var(--wp--preset--font-family--titulo);
	font-size: 1.6rem;
	font-weight: 800;
}
.snm-cabecalho .is-menu-open .wp-block-navigation__responsive-container-close { color: #fff; }
.snm-cabecalho .wp-block-site-title a { text-decoration: none; }
.snm-cabecalho .wp-block-navigation a { text-decoration: none; }
.snm-cabecalho .wp-block-navigation a:hover { text-decoration: underline; text-underline-offset: .3em; }

/* ---- Marca no cabeçalho ---------------------------------------------------
   O EMBLEMA num selo creme, com o nome em duas linhas ao lado. A marca
   completa não entra aqui: em 96px o "ONE HEALTH NA AMAZÔNIA" dela tinha ~4px
   de altura, e o verde dela sobre a foto dava ~1,5:1 (medido). Ela vive no
   rodapé, a partir de 160px. O creme (#FEFDF9) é o fundo do JPG oficial da
   marca: selo e rodapé são da mesma família. A marca não é recolorida. */
.snm-selo img {
	background: #FEFDF9;
	border-radius: 50%;
	padding: 4px;
	box-sizing: border-box;
	width: 80px !important;
	height: 80px !important;
	box-shadow: 0 4px 14px rgb(6 25 27 / .22);
}
.snm-cabecalho-sobre-hero .snm-selo img {
	box-shadow: 0 0 0 2px rgb(255 255 255 / .18), 0 6px 18px rgb(6 25 27 / .35);
}
.snm-marca .wp-block-site-logo { flex-shrink: 0; }   /* sem isto, o selo encolhia para 61px em 768 */
.snm-marca-texto { line-height: 1.1; }
.snm-marca-sub { white-space: nowrap; }
.snm-cabecalho .wp-block-site-title {
	font-family: var(--wp--preset--font-family--titulo);
	font-weight: 800;
	font-size: clamp(1.05rem, 1.5vw, 1.35rem) !important;
	margin: 0;
}
.snm-marca-sub {
	margin: 0;
	font-size: .7rem !important;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	/* #1C6E73 no branco (~5,9:1); #37A6AD sobre branco reprovaria (~2,9:1). */
	color: var(--wp--preset--color--marca-escura);
}
.snm-cabecalho-sobre-hero .snm-marca-sub { color: var(--wp--preset--color--marca); }
.snm-cabecalho-sobre-hero .snm-marca-texto { text-shadow: 0 1px 8px rgb(6 25 27 / .5); }
@media (max-width: 1023px) {
	.snm-selo img { width: 64px !important; height: 64px !important; }
	/* Entre 600 e 1023px o menu ainda é horizontal (o WP só vira ícone abaixo
	   de 600) e, com o selo e o nome ao lado, "Contato" caía numa segunda
	   linha em 768 (medido). Menu mais compacto, numa linha só. */
	.snm-cabecalho .wp-block-navigation__container { flex-wrap: nowrap; gap: .9rem !important; }
	.snm-cabecalho .wp-block-navigation { font-size: .92rem; white-space: nowrap; }
}
/* Entre 600 e 781px, selo + nome + cinco itens de menu não cabem numa linha:
   o menu encostava na marca e a página rolava (641px em 640, medido). O WP só
   troca o menu pelo ícone abaixo de 600px; aqui a troca é antecipada. */
@media (min-width: 600px) and (max-width: 781px) {
	.snm-cabecalho .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.snm-cabecalho .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
@media (max-width: 599px) {
	.snm-selo img { width: 52px !important; height: 52px !important; }
	.snm-marca-sub { font-size: .62rem !important; letter-spacing: .1em; }
}

.snm-marca-rodape { margin-bottom: 1.25rem; }
.snm-marca-rodape img {
	/* A marca completa é JPEG com fundo próprio quase branco (#FEFDF9) e
	   margem embutida: basta arredondar os cantos, sem padding. 160px é o
	   mínimo em que o texto dela se lê. */
	border-radius: 16px;
	width: 160px !important;
	height: auto;
}

/* ---- Abertura ---------------------------------------------------------- */
.snm-abertura .wp-block-cover__inner-container {
	padding-block: 8rem var(--wp--preset--spacing--60);
}
@media (max-width: 599px) {
	/* Em 360px os botões terminavam em y=732 — fora de uma tela útil de ~640px
	   (Android com as barras do navegador). svh = altura com as barras à vista. */
	.snm-abertura { min-height: 92svh !important; }
	.snm-abertura .wp-block-cover__inner-container { padding-block: 5.5rem 2rem; }
	.snm-abertura h1 { margin-block: .1em .25em; }
	.snm-abertura .wp-block-buttons { gap: .6rem; }
	/* O parágrafo em "large" ocupava 8 linhas em 360px e empurrava o 2º botão
	   para y=686 numa tela de 640. No tamanho do corpo, cabe. */
	.snm-abertura__texto { font-size: 1rem !important; line-height: 1.55; margin-bottom: 1.25rem; }
	.snm-abertura .wp-block-button__link { padding-block: .75rem; }
}
.snm-abertura h1 { max-width: 14ch; margin-block: .2em .35em; }
.snm-abertura__texto { max-width: 38rem; color: #E3EEEE; }
/* O escurecimento é mais forte embaixo, onde está o texto: a foto respira
   em cima, e o texto se lê sobre qualquer foto que a Comunicação escolher. */
.snm-abertura .wp-block-cover__background {
	background: linear-gradient(180deg, rgb(6 25 27 / .55) 0%, rgb(6 25 27 / .7) 40%, rgb(6 25 27 / .92) 100%) !important;
	opacity: 1 !important;
}

/* Enquadra mais embaixo: foto de rio costuma ter céu em cima e a vida na
   margem embaixo, e no celular o recorte central mostrava só céu. O ponto
   focal escolhido no editor (estilo inline) continua mandando. */
.snm-abertura .wp-block-cover__image-background { object-position: 50% 75%; }
/* O turquesa sobre foto clara perdia contraste; uma sombra discreta o segura. */
.snm-abertura h1 { text-shadow: 0 2px 18px rgb(6 25 27 / .45); }

/* Botão vazado sobre foto escura. */
.wp-block-cover .is-style-outline .wp-block-button__link {
	color: #fff;
	border: 2px solid rgb(255 255 255 / .8);
	background: transparent;
}
.wp-block-cover .is-style-outline .wp-block-button__link:hover {
	background: #fff;
	color: var(--wp--preset--color--contrast);
}

/* ---- Mosaico de voluntários -------------------------------------------- */
.snm-mosaico.wp-block-gallery { gap: 1rem; }
.snm-mosaico.wp-block-gallery img { aspect-ratio: 1; }
@media (min-width: 782px) {
	/* A primeira foto ocupa o dobro — mosaico, não grade de catálogo. São
	   CINCO fotos: 1 grande (2×2) + 4 pequenas fecham o retângulo; com
	   quatro sobrava um buraco no canto. */
	.snm-mosaico.wp-block-gallery.columns-4 {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: minmax(0, 1fr);
	}
	.snm-mosaico.wp-block-gallery.columns-4 > figure { width: auto !important; margin: 0 !important; }
	.snm-mosaico.wp-block-gallery.columns-4 > figure:first-child { grid-column: span 2; grid-row: span 2; }
	.snm-mosaico.wp-block-gallery.columns-4 > figure:first-child img { height: 100%; }
}
@media (max-width: 781px) {
	/* No celular a galeria vira 2 colunas e a foto ÍMPAR esticava sozinha no
	   fim. A grande passa a ser a primeira, e as quatro fecham duas duplas. */
	.snm-mosaico.wp-block-gallery > figure:first-child { width: 100% !important; flex-basis: 100% !important; }
	.snm-mosaico.wp-block-gallery > figure:first-child img { aspect-ratio: 4 / 3; }
}
/* Estreito, mas alinhado à esquerda da grade de 1200px e não centralizado
   (o layout "constrained" centraliza todo filho que tem max-width). */
.snm-depoimento {
	margin-left: max(0px, calc((100% - 1200px) / 2)) !important;
	margin-top: var(--wp--preset--spacing--50);
	max-width: 46rem;
	padding-left: 1.5rem;
}
.snm-depoimento cite { font-style: normal; font-size: .9rem; color: var(--wp--preset--color--texto-medio); }

/* ---- Eixos One Health: a cor de cada eixo é a mesma da plataforma ------ */
.snm-eixo { border-top: 5px solid var(--snm-eixo, var(--wp--preset--color--marca)); padding-top: 1.25rem; }
.snm-eixo--humano { --snm-eixo: var(--wp--preset--color--humano); }
.snm-eixo--animal { --snm-eixo: var(--wp--preset--color--animal); }
.snm-eixo--ambiente { --snm-eixo: var(--wp--preset--color--ambiente); }

/* ---- Como funciona: passos com as telas do app ---------------------------
   Especificação do designer. A tela entra INTEIRA (1170×2532, proporção de
   iPhone) — antes o aspect-ratio 9/17 com object-fit a cortava. A moldura é
   um aparelho GENÉRICO em CSS puro, não a imagem de um iPhone (trade dress da
   Apple). A faixa branca no topo da tela é a "barra de status": as golden
   files não têm uma, e sem ela a ilha cobriria o cabeçalho do app. */
.snm-tela {
	--l: 248px;
	--b: calc(var(--l) * .035);
	--r: calc(var(--l) * .16);
	position: relative;
	width: var(--l);
	max-width: 100%;
	margin: 0 auto 1.5rem !important;
	padding: var(--b);
	box-sizing: border-box;
	background: linear-gradient(145deg, #1d2a2c, #06191B 40%);
	border-radius: var(--r);
	box-shadow:
		inset 0 0 0 1.5px #3a4a4c,
		0 1px 0 1px #0b1414,
		2px 0 0 0 #2a3a3c,
		0 30px 60px -20px rgb(6 25 27 / .45),
		0 12px 24px -12px rgb(6 25 27 / .3);
}
.snm-tela img {
	display: block;
	width: 100% !important;
	height: auto !important;
	max-width: none;
	box-sizing: border-box;
	padding-top: calc(var(--l) * .10);
	background: #fff;
	border-radius: calc(var(--r) - var(--b));
}
.snm-tela::before {   /* ilha genérica */
	content: "";
	position: absolute;
	z-index: 2;
	left: 50%;
	translate: -50% 0;
	top: calc(var(--b) + var(--l) * .028);
	width: 30%;
	height: calc(var(--l) * .075);
	border-radius: 999px;
	background: #06191B;
}
.snm-tela::after {    /* reflexo */
	content: "";
	position: absolute;
	inset: var(--b);
	border-radius: calc(var(--r) - var(--b));
	pointer-events: none;
	background: linear-gradient(115deg, rgb(255 255 255 / .14), transparent 35%);
}

/* Números em círculo ligados por uma linha de progresso (o "1." saiu dos
   títulos: quem numera é o CSS, e reordenar no editor não desalinha nada). */
.snm-passos { counter-reset: passo; position: relative; align-items: flex-start !important; }
/* Sem escalonamento: os quatro aparelhos (mesma proporção, mesma largura) e
   os quatro títulos começam na mesma linha — o desnível proposto para dar
   ritmo foi lido como desalinhamento. */
.snm-passo { counter-increment: passo; text-align: center; }
.snm-passo::before {
	content: counter(passo);
	display: grid;
	place-items: center;
	width: 2.25rem;
	aspect-ratio: 1;
	margin: 0 auto 1.25rem;
	position: relative;
	z-index: 1;
	border-radius: 50%;
	background: var(--wp--preset--color--marca-escura);
	color: #fff;
	font: 800 1rem var(--wp--preset--font-family--titulo);
	box-shadow: 0 0 0 6px var(--wp--preset--color--suave);
}
.snm-passos::after {
	content: "";
	position: absolute;
	top: 1.1rem;
	left: 12.5%;
	right: 12.5%;
	height: 2px;
	background: linear-gradient(90deg, var(--wp--preset--color--marca), var(--wp--preset--color--marca-escura));
}
.snm-passo h3 { margin-top: .25rem; }
.snm-passo p { max-width: 26ch; margin-inline: auto; }
@media (min-width: 600px) and (max-width: 1023px) {
	.snm-passos { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 2rem !important; }
	.snm-passos::after { display: none; }
}
@media (max-width: 599px) {
	/* Carrossel: SÓ o contêiner rola (a página não), e a borda do próximo
	   aparelho aparece para dizer que há mais. O !important vence o
	   flex-wrap e o flex-basis:100% que o core/columns aplica abaixo de 782px. */
	.snm-passos {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 1rem !important;
		padding: .5rem 1.25rem 1.5rem;
		margin-inline: -1.25rem;
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}
	.snm-passos::-webkit-scrollbar { display: none; }
	.snm-passos::after { display: none; }
	/* Seletor reforçado: o core tem `.wp-block-columns:not(.is-not-stacked-on-mobile)
	   > .wp-block-column { flex-basis: 100% !important }`, mais específico que
	   `.snm-passo` — cada passo ocupava a largura toda e a borda do próximo
	   aparelho não aparecia (medido). */
	.wp-block-columns.snm-passos > .wp-block-column.snm-passo { flex: 0 0 78% !important; scroll-snap-align: center; }
	.snm-tela { --l: min(232px, 62vw); }
}

/* ---- Painel em moldura de navegador genérica ---------------------------- */
.snm-painel { margin-top: var(--wp--preset--spacing--60) !important; }
.snm-painel img {
	display: block;
	width: 100%;
	height: auto;
	box-sizing: border-box;
	padding-top: 2.25rem;
	background:
		radial-gradient(circle at 1.25rem 1.125rem, #E4A93C 5px, transparent 6px),
		radial-gradient(circle at 2.25rem 1.125rem, #D2825A 5px, transparent 6px),
		radial-gradient(circle at 3.25rem 1.125rem, #6FA85C 5px, transparent 6px),
		#0D2224;
	border-radius: 14px;
	box-shadow: var(--snm-sombra), 0 40px 80px -40px rgb(6 25 27 / .35);
}
.snm-painel { position: relative; }
.snm-painel::before {   /* pílula de endereço genérica */
	content: "saudenasmargens · painel";
	position: absolute;
	z-index: 1;
	top: .55rem;
	left: 50%;
	translate: -50% 0;
	padding: .15rem 1.25rem;
	border-radius: 999px;
	background: rgb(255 255 255 / .08);
	color: #B9CCCE;
	font: 12px var(--wp--preset--font-family--corpo);
	pointer-events: none;
	white-space: nowrap;
}
.snm-painel figcaption { text-align: center; font-size: .85rem; color: var(--wp--preset--color--texto-medio); padding-top: .75rem; }

/* ---- Números ----------------------------------------------------------- */
.snm-numeros .snm-numero { border-left: 3px solid var(--wp--preset--color--marca); padding-left: 1.25rem; }
.snm-numeros .snm-numero p { margin: 0; color: #B9CCCE; }
.snm-numeros .snm-numero__valor {
	font-family: var(--wp--preset--font-family--titulo);
	font-weight: 800;
	font-size: clamp(2.75rem, 7vw, 4.5rem);
	line-height: 1;
	color: #fff !important;
	margin-bottom: .4rem !important;
}
.snm-nota { font-size: .8rem; color: #7C8F91; margin-top: var(--wp--preset--spacing--40); }
.snm-numeros a { color: var(--wp--preset--color--marca); }   /* turquesa escuro sobre a faixa escura dava ~3:1 */

/* ---- Território: piloto e campo atual ---------------------------------
   Dois quadros sobre a foto. O fundo padrão é o do campo ATUAL (o Rio Madeira,
   a imagem do bloco de capa, editável no editor); passar o mouse — ou tocar,
   no celular — no quadro do PILOTO faz a foto dele surgir por cima. A foto do
   piloto é um ::after (fica acima da imagem da capa e abaixo do escurecimento,
   que tem z-index 1), então o texto continua legível durante a troca. */
.snm-territorio { padding-block: var(--wp--preset--spacing--60); }
.snm-territorio::after {
	content: "";
	position: absolute;
	inset: 0;
	background: center / cover no-repeat;
	opacity: 0;
	transition: opacity .6s ease;
	pointer-events: none;
}
/* A imagem é declarada quando o mouse ENTRA NA SEÇÃO (ou o foco entra nela),
   e a opacidade depende do quadro do piloto. Declarada sempre, o navegador a
   baixava ao abrir a página sem ninguém passar por aqui; declarada só no hover
   do quadro, ela começava a baixar na hora da troca e sumia de uma vez ao sair,
   sem o fade de volta. Assim ela chega antes de o mouse alcançar o quadro. */
.snm-territorio:hover::after,
.snm-territorio:focus-within::after {
	background-image: image-set(url("../img/fotos/territorio-piloto-768w.webp") 1x, url("../img/fotos/territorio-piloto-1600w.webp") 2x);
}
.snm-territorio:has(.snm-quadro--piloto:hover)::after { opacity: 1; }
/* A ordem das camadas é declarada aqui, e não herdada do bloco de capa: no WP
   7.1 elas não têm z-index próprio, e o ::after (último no DOM) cobria o
   escurecimento E os quadros — só a captura mostrou; a opacidade medida
   estava certa. Foto da capa 0 → foto do piloto 1 → escurecimento 2 → texto 3. */
.snm-territorio .wp-block-cover__image-background { z-index: 0; }
.snm-territorio::after { z-index: 1; }
.snm-territorio .wp-block-cover__background { z-index: 2; }
.snm-territorio .wp-block-cover__inner-container { position: relative; z-index: 3; }

.snm-quadros { margin-top: var(--wp--preset--spacing--40); gap: 1.5rem !important; }
.snm-quadro {
	background: rgb(6 25 27 / .6);
	backdrop-filter: blur(6px);
	border: 1px solid rgb(255 255 255 / .15);
	border-top: 4px solid rgb(255 255 255 / .25);
	border-radius: var(--snm-raio);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	transition: border-color .3s ease, transform .3s ease, background-color .3s ease;
}
/* Quadro "ativo": o do campo atual por padrão (é a foto que está no fundo);
   o do piloto quando o mouse está nele. */
.snm-quadro--atual,
.snm-quadro--piloto:hover { border-top-color: var(--wp--preset--color--marca); background: rgb(6 25 27 / .72); }
.snm-quadro--piloto:hover { transform: translateY(-4px); }
.snm-territorio:has(.snm-quadro--piloto:hover) .snm-quadro--atual {
	border-top-color: rgb(255 255 255 / .25);
	background: rgb(6 25 27 / .6);
}
.snm-quadro h3 { margin-block: .35rem .75rem; }
.snm-quadro__etapa {
	font-size: .8rem !important;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--marca);
	margin: 0;
}
.snm-quadro__destaque {
	margin-top: 1.25rem !important;
	padding-top: 1rem;
	border-top: 1px solid rgb(255 255 255 / .15);
	color: #B9CCCE;
}
.snm-quadro__destaque strong {
	display: block;
	font-family: var(--wp--preset--font-family--titulo);
	font-weight: 800;
	font-size: clamp(2.25rem, 5vw, 3rem);
	line-height: 1;
	color: #fff;
}
/* Tela de toque: sem cursor "de clique", o Safari do iPhone não emula o
   :hover no toque, e o fundo do piloto nunca apareceria. */
@media (hover: none) { .snm-quadro { cursor: pointer; } }
@media (prefers-reduced-motion: reduce) {
	.snm-territorio::after, .snm-quadro { transition: none; }
	.snm-quadro--piloto:hover { transform: none; }
}

/* ---- Parceiros --------------------------------------------------------- */
.snm-marcas img { width: 100%; height: auto; }

/* ---- Notícias ---------------------------------------------------------- */
/* Sem publicação ainda, a seção inteira some — um título "Acompanhe o
   projeto" sobre o vazio parece site abandonado. */
#noticias:not(:has(.wp-block-latest-posts li)) { display: none; }
.snm-noticias.wp-block-latest-posts { padding: 0; }
.snm-noticias li {
	background: #fff;
	border-radius: var(--snm-raio);
	overflow: hidden;
	box-shadow: 0 1px 0 rgb(6 25 27 / .06);
	padding-bottom: 1.25rem;
}
.snm-noticias .wp-block-latest-posts__featured-image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.snm-noticias .wp-block-latest-posts__post-title,
.snm-noticias time { display: block; padding-inline: 1.25rem; }
.snm-noticias .wp-block-latest-posts__post-title {
	font-family: var(--wp--preset--font-family--titulo);
	font-weight: 600;
	font-size: 1.15rem;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	margin-top: 1rem;
}
.snm-noticias time { font-size: .8rem; color: var(--wp--preset--color--texto-medio); margin-top: .35rem; }

/* ---- Chamada final ----------------------------------------------------- */
.snm-chamada .wp-block-button__link { background: #fff; color: var(--wp--preset--color--contrast); }
.snm-chamada .wp-block-button__link:hover { background: var(--wp--preset--color--humano); }

/* ---- Rodapé ------------------------------------------------------------ */
.snm-rodape .snm-rotulo { font-size: .8rem !important; }
.snm-lista-limpa { list-style: none; padding: 0; margin: 0; line-height: 2; }
.snm-rodape a { text-decoration: none; }
.snm-rodape a:hover { text-decoration: underline; }
.snm-assinatura img {
	max-width: 100%;
	height: auto;
	/* O PNG oficial tem margem transparente embutida de 79 dos 1942px
	   (4,07%): sem compensar, as marcas começavam deslocadas da coluna. A
	   translação é em % da PRÓPRIA imagem, então vale em qualquer largura.
	   A marca de terceiros não é tocada. */
	transform: translateX(-4.07%);
}

/* Foco sempre visível no teclado.
   O amarelo sozinho dava 2,1:1 sobre branco e 1,9:1 sobre a Névoa — abaixo dos
   3:1 que o WCAG 1.4.11 pede para contornos (medido na revisão). Nas seções
   claras o contorno é tinta (#06191B) com um halo amarelo; sobre foto e no
   rodapé escuro, o amarelo sozinho basta (≥ 8:1). */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
	outline: 3px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
	box-shadow: 0 0 0 7px var(--wp--preset--color--humano);
	border-radius: 4px;
}
.wp-block-cover a:focus-visible, .wp-block-cover button:focus-visible,
.snm-rodape a:focus-visible, .snm-rodape button:focus-visible,
.snm-numeros a:focus-visible, .snm-cabecalho-sobre-hero a:focus-visible,
.snm-cabecalho-sobre-hero button:focus-visible, .is-menu-open a:focus-visible {
	outline-color: var(--wp--preset--color--humano);
	box-shadow: none;
}

/* ---- Ajustes da revisão de design ---------------------------------------- */

/* Números em 2×2 no celular: empilhados, os quatro ocupavam 639px de tela. */
@media (max-width: 781px) {
	.snm-numeros .wp-block-columns {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.75rem 1rem !important;
	}
	.snm-numeros .wp-block-columns > .wp-block-column { flex-basis: auto !important; }
}

/* Eixos no tablet: três colunas com foto 4/3. Empilhados, com fotos de ~720px,
   "Uma só saúde" media 2.338px de altura em 768px — a maior seção da página. */
@media (min-width: 600px) and (max-width: 1023px) {
	.wp-block-columns.snm-eixos {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.25rem !important;
	}
	.wp-block-columns.snm-eixos > .wp-block-column { flex-basis: auto !important; }
	.snm-eixo .snm-foto img { aspect-ratio: 4 / 3; }
	.snm-eixo h3 { font-size: 1.1rem !important; }
	.snm-eixo p { font-size: .95rem; }
}

/* Botão do menu: 24px → 44px de área de toque (o controle principal no celular). */
.snm-cabecalho .wp-block-navigation__responsive-container-open,
.snm-cabecalho .wp-block-navigation__responsive-container-close {
	padding: 10px;
	margin: -10px;
}

/* Carrossel do "Como funciona" no celular: um aviso de que há mais passos.
   (Um "1 / 4" que acompanha a rolagem pediria scroll-driven animation, que o
   Safari do iPhone ainda não tem — e um contador errado é pior que nenhum.) */
@media (max-width: 599px) {
	#como-funciona .snm-intro::after {
		content: "Deslize para ver os quatro passos →";
		display: block;
		margin-top: .75rem;
		font-size: .85rem;
		font-weight: 600;
		color: var(--wp--preset--color--marca-escura);
	}
}

/* Onde estamos no celular: o recorte estreito mostra só o céu claro da foto,
   e o rótulo turquesa sumia nele (visto na captura em 360px). */
@media (max-width: 781px) {
	.snm-territorio .wp-block-cover__background { opacity: .68 !important; }
}
.snm-territorio > .wp-block-cover__inner-container > .snm-rotulo,
.snm-territorio > .wp-block-cover__inner-container > h2 { text-shadow: 0 1px 10px rgb(6 25 27 / .6); }

/* ---- Na imprensa ---------------------------------------------------------
   Cartões só de texto: veículo · data e o título como link. Sem as fotos das
   matérias, que são dos veículos ou da Fiocruz e não têm licença de reuso. */
.snm-imprensa { gap: 1.25rem !important; margin-top: var(--wp--preset--spacing--40); }
.snm-materia {
	background: #fff;
	border-radius: var(--snm-raio);
	border-top: 4px solid var(--wp--preset--color--marca);
	padding: 1.5rem;
	box-shadow: 0 1px 0 rgb(6 25 27 / .06);
	position: relative;
	transition: transform .25s ease, box-shadow .25s ease;
}
.snm-materia:hover { transform: translateY(-3px); box-shadow: var(--snm-sombra); }
.snm-materia__fonte {
	font-size: .8rem !important;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--marca-escura);
	margin: 0 0 .6rem;
}
.snm-materia__titulo { margin: 0; font-family: var(--wp--preset--font-family--titulo); font-weight: 600; font-size: 1.1rem; line-height: 1.3; }
.snm-materia__titulo a { color: var(--wp--preset--color--contrast); text-decoration: none; }
/* O cartão inteiro é clicável, sem aninhar links: o ::after estica o link. */
.snm-materia__titulo a::after { content: ""; position: absolute; inset: 0; border-radius: var(--snm-raio); }
.snm-materia__titulo a:hover { text-decoration: underline; text-underline-offset: .2em; }
/* Grade que se ajusta ao número de matérias (5 hoje): cartões de 250px no
   mínimo, quantos couberem por linha. As colunas do core espremeriam 5 numa
   linha só em 1200px. */
.wp-block-columns.snm-imprensa {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));   /* 5 por linha em 1200px */
}
.wp-block-columns.snm-imprensa > .wp-block-column { flex-basis: auto !important; margin: 0 !important; }
@media (prefers-reduced-motion: reduce) { .snm-materia { transition: none; } .snm-materia:hover { transform: none; } }

/* ---- Seletor de idioma PT | EN --------------------------------------------
   Fica FORA do menu (ao lado do ícone, no celular): trocar de idioma não pode
   exigir abrir o menu. Alvo de toque de 44px. */
.snm-idioma {
	display: flex;
	align-items: center;
	gap: .15rem;
	font-weight: 600;
	font-size: .85rem;
	letter-spacing: .06em;
	white-space: nowrap;
}
.snm-idioma a, .snm-idioma__atual {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	min-width: 44px;
	min-height: 44px;
	padding: 0 .35rem;
	border-radius: 999px;
	text-decoration: none;
}
.snm-idioma__atual { opacity: .55; }
.snm-idioma a:hover { text-decoration: underline; text-underline-offset: .3em; }
.snm-idioma span[aria-hidden] { opacity: .4; }
.snm-cabecalho-sobre-hero .snm-idioma, .snm-cabecalho-sobre-hero .snm-idioma a { color: #fff; }
/* O contorno impede a faixa branca (EUA) e o losango claro (Brasil) de se
   dissolverem no fundo creme; sobre a foto do hero ele passa a ser claro. */
.snm-idioma__bandeira {
	width: 20px;
	height: 15px;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgb(0 0 0 / .18);
	flex-shrink: 0;
}
.snm-cabecalho-sobre-hero .snm-idioma__bandeira { box-shadow: 0 0 0 1px rgb(255 255 255 / .45); }
.snm-cabecalho__direita { flex-shrink: 0; }
@media (max-width: 781px) {
	.snm-cabecalho__direita { gap: .25rem !important; }
}

/* Textos que o CSS escreve, por idioma. */
html:lang(en) .snm-sec-como-funciona .snm-intro::after,
html:lang(en) #como-funciona .snm-intro::after { content: "Swipe to see the four steps →"; }
/* Celular estreito: selo + nome + ícone do menu + "PT | EN" não cabiam em
   360px (a página rolava 5–14px, medido). Abaixo de 480px o seletor mostra
   só o idioma PARA ONDE ir — o atual já é o da página que se está lendo. */
@media (max-width: 480px) {
	.snm-idioma__atual, .snm-idioma span[aria-hidden] { display: none; }
	.snm-idioma a { min-width: 44px; padding: 0 .2rem; gap: .25rem; }
}
.snm-materia__idioma { font-family: var(--wp--preset--font-family--corpo); font-weight: 400; font-size: .8rem; color: var(--wp--preset--color--texto-medio); }