/* =========================================================
   ANQPIC Portal — estilos do tema
   Ordem: tokens, reset, utilidades, tipografia, cabeçalho,
   componentes, home, páginas internas, rodapé, mobile.
   ========================================================= */

:root {
	/* Verde e ouro saem do próprio emblema da associação. */
	--verde-900:  #05372F;
	--verde-800:  #06463C;
	--verde:      #046756;
	--verde-600:  #0A7C68;
	--verde-100:  #E3EFEB;
	--verde-050:  #F2F8F6;

	/* Vermelho de aviso: recados de erro e o asterisco de campo obrigatório. */
	--erro:       #B03A2E;

	--ouro:       #C8912B;
	--ouro-600:   #A9781F;
	--ouro-100:   #F8EFDA;
	--ouro-050:   #FDF9F0;

	/* Azul herdado do anqpic2, reservado ao Portal do Afiliado. */
	--azul:        #1B4F72;
	/* Azul da marca da Uninter, só no bloco da parceria. */
	--azul-uninter: #102F5E;
	--azul-escuro: #102F45;
	--azul-claro:  #2A6A94;
	--azul-fundo:  #E8EFF5;

	--tinta:      #12201D;
	--texto:      #38443F;
	--texto-fraco:#6C7A74;
	--linha:      #DFE5E1;
	--linha-fina: #ECF0ED;
	--cinza:      #F4F7F5;
	--papel:      #FFFFFF;

	--fonte-titulo: "Archivo", "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--fonte-texto:  "Inter", "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	--envelope: 1200px;
	--leitura: 72ch;
	--respiro: clamp(1rem, 4vw, 2rem);

	--raio: 10px;
	--raio-pequeno: 6px;
	--sombra: 0 1px 2px rgba(5, 55, 47, .05), 0 10px 30px rgba(5, 55, 47, .07);
	--sombra-alta: 0 18px 50px rgba(5, 55, 47, .16);

	--transicao: 160ms ease;

	/* Coluna do emblema no cabeçalho — a linha divisória usa a mesma medida. */
	--marca-tamanho: 104px;
	--marca-vao: 1.25rem;
}

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

html { scroll-behavior: smooth; }

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

body.menu-aberto { overflow: hidden; }

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

/* Regras de componente com display próprio venceriam o atributo hidden. */
[hidden] { display: none !important; }

a { color: var(--verde); text-underline-offset: .18em; transition: color var(--transicao); }
a:hover { color: var(--verde-600); }

button { font: inherit; }

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

/* ---------- utilidades ---------- */
.sr-apenas {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.pular-para-conteudo {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--verde);
	color: #fff;
	padding: .75rem 1.25rem;
	text-decoration: none;
}
.pular-para-conteudo:focus { left: .5rem; top: .5rem; color: #fff; }

.envelope {
	width: 100%;
	max-width: var(--envelope);
	margin-inline: auto;
	padding-inline: var(--respiro);
}

.icone {
	width: 1.15em;
	height: 1.15em;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cortina {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: rgba(5, 55, 47, .5);
}

/* ---------- tipografia ---------- */
h1, h2, h3, h4 {
	font-family: var(--fonte-titulo);
	color: var(--tinta);
	line-height: 1.2;
	text-wrap: balance;
	margin: 0 0 .5em;
	font-weight: 700;
	letter-spacing: -.02em;
}
h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.0625rem; }

p, ul, ol { margin: 0 0 1.15em; }

blockquote {
	margin: 1.75rem 0;
	padding: .25rem 0 .25rem 1.25rem;
	border-left: 3px solid var(--ouro);
	color: var(--tinta);
	font-size: 1.125rem;
}

hr { border: 0; border-top: 1px solid var(--linha); margin: 2.5rem 0; }

/* =========================================================
   Barra de serviços
   ========================================================= */
.barra-servicos {
	background: var(--verde-900);
	color: rgba(255, 255, 255, .82);
	font-size: .8125rem;
}

.barra-servicos__interno {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 40px;
}

.barra-servicos__links {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex: none;
}

.barra-servicos__links a {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}
.barra-servicos__links a:hover { color: #fff; }
.barra-servicos__links .icone { width: 1rem; height: 1rem; }
/* Só o ícone: a margem negativa amplia a área de toque sem mexer no alinhamento. */
.barra-servicos__links .barra-servicos__instagram,
.barra-servicos__links .barra-servicos__facebook { padding: .5rem; margin: -.5rem; }

.barra-servicos__portal {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	flex: none;
	padding: .3rem .95rem;
	border-radius: 999px;
	background: var(--papel);
	color: var(--azul);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--transicao), color var(--transicao), box-shadow var(--transicao);
}
.barra-servicos__portal:hover {
	background: var(--azul-fundo);
	color: var(--azul-escuro);
	box-shadow: 0 0 0 3px rgba(27, 79, 114, .35);
}
.barra-servicos__portal .icone { width: 1rem; height: 1rem; }

/* Para quem já entrou, este atalho só existe onde o botão do cabeçalho não
   cabe. No desktop os dois apareceriam lado a lado apontando para o mesmo
   lugar. */
.barra-servicos__portal--interno { display: none; }
@media (max-width: 980px) {
	.barra-servicos__portal--interno { display: inline-flex; }
}

/* =========================================================
   Cabeçalho
   ========================================================= */
/* No desktop não acompanha a rolagem — no celular sim, mais abaixo. O z-index
   mantém o botão do menu acima da cortina enquanto a gaveta está aberta. */
.cabecalho {
	position: relative;
	z-index: 70;
	background: var(--papel);
	border-bottom: 1px solid var(--linha-fina);
}

/* Duas linhas à direita — nome e ações em cima, menu embaixo — com o emblema
   ocupando a coluna da esquerda inteira. Os rótulos do menu em português são
   longos demais para dividir uma única faixa com a marca e os botões. */
.cabecalho__grade {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: var(--marca-vao);
}

.marca {
	grid-column: 1;
	grid-row: 1 / 3;
	position: relative;
	z-index: 1;
	align-self: center;
	display: flex;
	line-height: 0;
}

.marca__emblema { width: var(--marca-tamanho); height: var(--marca-tamanho); }

.cabecalho__topo {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: .9rem;
}

/* A divisória começa no primeiro item do menu, não atrás do emblema. */
.cabecalho__nav-barra {
	grid-column: 2;
	grid-row: 2;
	border-top: 1px solid var(--linha-fina);
}

.marca__textos {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
	text-decoration: none;
	color: var(--tinta);
}

.marca__nome {
	font-family: var(--fonte-titulo);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -.03em;
	color: var(--verde);
}

.marca__descricao {
	font-size: .75rem;
	line-height: 1.35;
	color: var(--texto-fraco);
}

.custom-logo { max-height: var(--marca-tamanho); width: auto; }

/* navegação */
.navegacao__lista {
	display: flex;
	align-items: stretch;
	gap: .1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.navegacao__lista > li { position: relative; }

.navegacao__lista > li > a {
	display: flex;
	align-items: center;
	padding: .85rem .65rem;
	color: var(--tinta);
	font-size: .9375rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: inset 0 -3px 0 transparent;
	transition: box-shadow var(--transicao), color var(--transicao), background var(--transicao);
}
.navegacao__lista > li > a:hover { background: var(--verde-050); color: var(--verde); }

.navegacao__lista > li.current-menu-item > a,
.navegacao__lista > li.current_page_item > a,
.navegacao__lista > li.current-menu-ancestor > a {
	color: var(--verde);
	box-shadow: inset 0 -3px 0 var(--ouro);
}

.navegacao__aviso { margin: 0; font-size: .875rem; }

/* Só existe enquanto o menu é gaveta; no desktop ele é uma barra e não fecha. */
.navegacao__fechar { display: none; }

/* submenu */
.navegacao__lista .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	margin: 0;
	padding: .4rem;
	list-style: none;
	background: var(--papel);
	border: 1px solid var(--linha-fina);
	border-radius: var(--raio);
	box-shadow: var(--sombra-alta);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transicao), visibility var(--transicao);
}
.navegacao__lista > li:hover > .sub-menu,
.navegacao__lista > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
}

.navegacao__lista .sub-menu a {
	display: block;
	padding: .5rem .65rem;
	border-radius: var(--raio-pequeno);
	color: var(--texto);
	font-size: .9375rem;
	text-decoration: none;
}
.navegacao__lista .sub-menu a:hover { background: var(--verde-050); color: var(--verde); }

.submenu-alternar { display: none; }

.navegacao__extra { display: none; }

/* ações do cabeçalho */
.cabecalho__acoes {
	display: flex;
	align-items: center;
	gap: .6rem;
	flex: none;
}

/* O "Sair" acompanha a área interna sem disputar atenção com ela. */
.cabecalho__sair {
	padding-inline: 1rem;
	font-size: .875rem;
}

/* No celular o "Sair" vive só dentro da gaveta do menu, junto do resto.
   O seletor traz o pai de propósito: .botao define display mais adiante no
   arquivo, e com uma classe só esta regra perdia a disputa e nunca valia —
   media query não acrescenta peso nenhum. */
@media (max-width: 980px) {
	.cabecalho__acoes .cabecalho__sair { display: none; }
}

.cabecalho__cta { white-space: nowrap; }

/* botão do menu — só aparece no mobile */
.menu-alternar {
	display: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--linha);
	border-radius: var(--raio-pequeno);
	background: var(--papel);
	cursor: pointer;
}

.menu-alternar__barras,
.menu-alternar__barras::before,
.menu-alternar__barras::after {
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: var(--tinta);
	transition: transform var(--transicao), opacity var(--transicao);
}
.menu-alternar__barras { position: relative; }
.menu-alternar__barras::before,
.menu-alternar__barras::after { content: ""; position: absolute; left: 0; }
.menu-alternar__barras::before { top: -6px; }
.menu-alternar__barras::after { top: 6px; }

.menu-alternar.aberto .menu-alternar__barras { background: transparent; }
.menu-alternar.aberto .menu-alternar__barras::before { transform: translateY(6px) rotate(45deg); }
.menu-alternar.aberto .menu-alternar__barras::after { transform: translateY(-6px) rotate(-45deg); }

/* =========================================================
   Botões, links e etiquetas
   ========================================================= */
.botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .7rem 1.25rem;
	border: 1px solid transparent;
	border-radius: var(--raio-pequeno);
	background: var(--verde);
	color: #fff;
	font-family: var(--fonte-texto);
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.botao:hover { background: var(--verde-600); color: #fff; }

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

.botao--ouro { background: var(--ouro); color: #221701; }
.botao--ouro:hover { background: var(--ouro-600); color: #fff; }

/* Azul escuro do Portal — associar-se é o começo do mesmo caminho —
   com um brilho que atravessa o botão no hover. */
.botao--azul {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, var(--azul) 0%, var(--azul-escuro) 100%);
	border-color: var(--azul-escuro);
	color: #fff;
}
.botao--azul:hover {
	background: linear-gradient(180deg, var(--azul-claro) 0%, #163D5C 100%);
	color: #fff;
}
.botao--azul::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 45%;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .45) 50%, rgba(255, 255, 255, 0) 100%);
	transform: skewX(-18deg);
	transition: left 620ms ease;
	pointer-events: none;
}
.botao--azul:hover::after { left: 130%; }

.botao--contorno {
	background: transparent;
	border-color: var(--linha);
	color: var(--tinta);
}
.botao--contorno:hover { background: var(--verde-050); border-color: var(--verde-100); color: var(--verde); }

/* Sobre a faixa azul, branco tem mais contraste que o dourado e repete a
   pílula do Portal na barra do topo. */
.botao--branco {
	background: var(--papel);
	border-color: var(--papel);
	color: var(--azul-escuro);
}
.botao--branco:hover {
	background: var(--azul-fundo);
	border-color: var(--azul-fundo);
	color: var(--azul-escuro);
}

.botao--contorno-claro {
	background: transparent;
	border-color: rgba(255, 255, 255, .4);
	color: #fff;
}
.botao--contorno-claro:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.botao--vidro {
	background: rgba(255, 255, 255, .14);
	border-color: rgba(255, 255, 255, .38);
	color: #fff;
	backdrop-filter: blur(4px);
}
.botao--vidro:hover { background: rgba(255, 255, 255, .24); color: #fff; }

.link-seta {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: var(--verde);
	font-size: .9375rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.link-seta .icone { transition: transform var(--transicao); }
.link-seta:hover .icone,
a:hover .link-seta .icone { transform: translateX(3px); }

.etiqueta {
	display: inline-flex;
	align-items: center;
	padding: .15rem .55rem;
	border-radius: 999px;
	background: var(--verde-100);
	color: var(--verde);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.etiqueta--ouro { background: var(--ouro-100); color: var(--ouro-600); }

/* busca */
.busca {
	display: flex;
	align-items: stretch;
	gap: .5rem;
	width: 100%;
	max-width: 560px;
}

.busca__campo-casca {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1;
}
.busca__campo-casca .icone {
	position: absolute;
	left: .75rem;
	width: 1.1rem;
	height: 1.1rem;
	color: var(--texto-fraco);
	pointer-events: none;
}

.busca__campo {
	width: 100%;
	padding: .65rem .9rem .65rem 2.35rem;
	border: 1px solid var(--linha);
	border-radius: var(--raio-pequeno);
	background: var(--papel);
	font: inherit;
	font-size: .9375rem;
	color: var(--tinta);
}
.busca__campo:focus { border-color: var(--verde); outline-offset: 1px; }

.busca__enviar { flex: none; }

/* =========================================================
   Home — abertura
   ========================================================= */
.abertura {
	position: relative;
	isolation: isolate;
	padding-block: clamp(3.5rem, 8vw, 6rem) clamp(5rem, 9vw, 7rem);
	color: #fff;
	background: var(--verde-900);
}

.abertura__fundo {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}
.abertura__fundo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% 45%;
}
.abertura__fundo::after {
	content: "";
	position: absolute;
	inset: 0;
	/* O véu verde precisa sumir antes de alcançar as pessoas: sobre pele, um
	   verde a meia opacidade vira um brilho esquisito no rosto. Ele cobre só
	   a faixa do texto, que nunca passa dos 45% da largura. */
	background:
		linear-gradient(100deg,
			rgba(5, 55, 47, .95) 0%,
			rgba(5, 55, 47, .90) 30%,
			rgba(5, 55, 47, .62) 44%,
			rgba(5, 55, 47, .22) 57%,
			rgba(5, 55, 47, 0) 68%);
}

/* O texto alinha pela mesma borda dos cartões de atalho: quem limita a
   medida de leitura é o filho, não o envelope. */
.abertura__interno > * { max-width: 780px; }

.abertura__acima {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 1.25rem;
	padding: .35rem .85rem;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .92);
}
.abertura__acima .icone { color: var(--ouro); }

.abertura__titulo {
	margin: 0 0 1.25rem;
	color: #fff;
	text-shadow: 0 1px 18px rgba(5, 55, 47, .45);
	font-size: clamp(2.2rem, 5.2vw, 3.5rem);
	line-height: 1.08;
	letter-spacing: -.03em;
}
.abertura__titulo em {
	display: block;
	font-style: normal;
	color: var(--ouro);
}
/*
 * Destaque que não pode quebrar (neuro-músculo-esquelético): fica numa linha
 * só e, onde não cabe no tamanho do título, encolhe até caber na largura dele.
 * A palavra mede uns 12,4em; 7,8cqi deixa uma folga.
 */
.abertura__titulo:has(.abertura__destaque-inteiro) { container-type: inline-size; }
.abertura__destaque-inteiro {
	white-space: nowrap;
	font-size: min(1em, 7.8cqi);
}

.abertura__texto {
	max-width: 62ch;
	color: rgba(255, 255, 255, .88);
	font-size: 1.0625rem;
	text-shadow: 0 1px 14px rgba(5, 55, 47, .5);
}
.abertura__texto p:last-child { margin-bottom: 0; }

.abertura__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 2rem;
}

/* ---------- atalhos ---------- */
.atalhos { position: relative; z-index: 5; margin-top: clamp(-4.5rem, -6vw, -3rem); }

.atalhos__grade {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}

.atalho {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .35rem;
	padding: 1.5rem 1.35rem 3rem;
	background: var(--papel);
	border: 1px solid var(--linha-fina);
	border-radius: var(--raio);
	box-shadow: var(--sombra);
	color: var(--texto);
	text-decoration: none;
	transition: box-shadow var(--transicao), border-color var(--transicao);
}
.atalho:hover {
	box-shadow: var(--sombra-alta);
	border-color: var(--verde-100);
	color: var(--texto);
}

.atalho__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: .5rem;
	border-radius: var(--raio-pequeno);
	background: var(--verde-050);
	color: var(--verde);
}
.atalho__icone .icone { width: 1.4rem; height: 1.4rem; }

.atalho__titulo {
	font-family: var(--fonte-titulo);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--tinta);
}

.atalho__texto { font-size: .875rem; line-height: 1.55; color: var(--texto-fraco); }

.atalho__seta {
	position: absolute;
	left: 1.35rem;
	bottom: 1.35rem;
	display: inline-flex;
	color: var(--verde);
	transition: transform var(--transicao);
}
.atalho:hover .atalho__seta { transform: translateX(4px); }

.atalho--destaque,
.atalho--portal {
	color: rgba(255, 255, 255, .86);
}
.atalho--destaque:hover,
.atalho--portal:hover { color: rgba(255, 255, 255, .86); }
.atalho--destaque .atalho__icone,
.atalho--portal .atalho__icone { background: rgba(255, 255, 255, .16); color: #fff; }
.atalho--destaque .atalho__titulo,
.atalho--portal .atalho__titulo { color: #fff; }
.atalho--destaque .atalho__texto,
.atalho--portal .atalho__texto { color: rgba(255, 255, 255, .82); }

.atalho--destaque {
	background: var(--verde);
	border-color: var(--verde);
}
.atalho--destaque .atalho__icone { color: var(--ouro); }
.atalho--destaque .atalho__seta { color: var(--ouro); }

/* O Portal do Afiliado é serviço, não institucional: azul cheio para
   separar da rede verde da associação. */
.atalho--portal {
	background: var(--azul);
	border-color: var(--azul);
}
.atalho--portal:hover { background: var(--azul-claro); border-color: var(--azul-claro); }
.atalho--portal .atalho__seta { color: #fff; }

/* Bege da seção Formação: o atalho e o bloco lá embaixo tratam do mesmo
   assunto, então usam o mesmo fundo. Aqui o texto segue escuro. */
.atalho--formacao {
	background: var(--ouro-050);
	border-color: var(--ouro-100);
}
.atalho--formacao:hover { border-color: var(--ouro); }
.atalho--formacao .atalho__icone { background: var(--ouro-100); color: var(--ouro-600); }
.atalho--formacao .atalho__seta { color: var(--ouro-600); }

/* ---------- números ---------- */
.numeros { padding-block: clamp(2.5rem, 5vw, 3.5rem); }

.numeros__grade {
	display: grid;
	grid-template-columns: repeat(var(--numeros, 4), 1fr);
	gap: 1px;
	background: var(--linha-fina);
	border: 1px solid var(--linha-fina);
	border-radius: var(--raio);
	overflow: hidden;
}

.numero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .15rem;
	padding: 1.75rem 1rem;
	background: var(--papel);
	text-align: center;
}

.numero__icone { color: var(--ouro); }
.numero__icone .icone { width: 1.5rem; height: 1.5rem; stroke-width: 1.6; }

.numero__valor {
	font-family: var(--fonte-titulo);
	font-size: clamp(1.9rem, 3.4vw, 2.5rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.03em;
	color: var(--verde);
}

.numero__rotulo {
	font-size: .8125rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--texto-fraco);
}

/* =========================================================
   Seções genéricas
   ========================================================= */
.secao { padding-block: clamp(3rem, 6vw, 4.5rem); }
.secao--pilares { background: var(--cinza); border-block: 1px solid var(--linha-fina); }
.secao--relacionados { background: var(--cinza); border-top: 1px solid var(--linha-fina); }

.secao__topo {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.secao__acima {
	margin: 0 0 .35rem;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ouro-600);
}

.secao__titulo { margin: 0; max-width: 24ch; }

/* ---------- pilares ---------- */
.pilares {
	display: grid;
	grid-template-columns: repeat(var(--pilares, 3), 1fr);
	gap: 1.25rem;
}

.pilar {
	padding: 1.75rem 1.5rem;
	background: var(--papel);
	border: 1px solid var(--linha-fina);
	border-top: 3px solid var(--ouro);
	border-radius: var(--raio);
}

.pilar__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-bottom: .85rem;
	border-radius: 999px;
	background: var(--verde-050);
	color: var(--verde);
}
.pilar__icone .icone { width: 1.3rem; height: 1.3rem; }

.pilar__titulo { margin: 0 0 .4rem; font-size: 1.25rem; }
.pilar p { margin: 0; font-size: .9375rem; line-height: 1.65; }

/* ---------- formação ---------- */
.secao--formacao { background: var(--ouro-050); border-block: 1px solid var(--ouro-100); }

.formacao {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3rem);
}

.formacao__resumo { max-width: 60ch; margin-bottom: 1.5rem; }

.formacao__acoes { display: flex; flex-wrap: wrap; gap: .75rem; }

.formacao__parceiro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding: 2rem 1.5rem;
	background: var(--papel);
	border: 1px solid var(--ouro-100);
	border-radius: var(--raio);
	text-align: center;
}

.formacao__parceiro-rotulo {
	margin: 0;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--texto-fraco);
}

.formacao__parceiro img { width: min(220px, 100%); height: auto; }

/* ---------- notícias ---------- */
/* As duas colunas têm a mesma altura: a lista de cinco títulos define a
   medida e a foto do destaque estica para acompanhar. */
.noticias {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: stretch;
}

.destaque {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--linha-fina);
	border-radius: var(--raio);
	overflow: hidden;
	background: var(--papel);
	box-shadow: var(--sombra);
}

.destaque__imagem {
	display: block;
	flex: 1 1 auto;
	min-height: 150px;
	background: var(--cinza);
	overflow: hidden;
}
.destaque__imagem img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.destaque__corpo { flex: none; padding: 1.35rem; }

.destaque__titulo { margin: 0 0 .5rem; font-size: 1.25rem; }
.destaque__titulo a { color: var(--tinta); text-decoration: none; }
.destaque__titulo a:hover { color: var(--verde); }

.noticias__lista {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--linha-fina);
	border-radius: var(--raio);
	overflow: hidden;
}

.linha {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 1rem;
	/* Baixa o bastante para seis itens caberem na altura do destaque. */
	padding: .75rem 1.15rem;
	background: var(--papel);
	transition: background var(--transicao);
}
.linha + .linha { border-top: 1px solid var(--linha-fina); }
.linha:hover { background: var(--verde-050); }

.linha__imagem {
	flex: none;
	width: 84px;
	height: 58px;
	border-radius: var(--raio-pequeno);
	overflow: hidden;
	background: var(--cinza);
}
.linha__imagem img { width: 100%; height: 100%; object-fit: cover; }

.linha__corpo { min-width: 0; }

.linha__titulo { margin: 0; font-size: 1rem; line-height: 1.35; }
.linha__titulo a { color: var(--tinta); text-decoration: none; }
.linha__titulo a:hover { color: var(--verde); }

/* ---------- chamada final ---------- */
/* Azul do Portal: a chamada convida a entrar na área do afiliado, e a cor
   avisa disso antes do texto. Também separa a faixa do rodapé, que é verde. */
.chamada {
	position: relative;
	isolation: isolate;
	padding-block: clamp(2.75rem, 6vw, 4rem);
	background: linear-gradient(135deg, var(--azul) 0%, var(--azul-escuro) 100%);
	color: rgba(255, 255, 255, .85);
	overflow: hidden;
}
.chamada::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -40%;
	right: -10%;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 68%);
}

.chamada__interno {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
}

.chamada__titulo { margin: 0 0 .5rem; color: #fff; }
.chamada__texto { margin: 0; max-width: 62ch; }

.chamada__acoes { display: flex; flex-wrap: wrap; gap: .75rem; }

/* =========================================================
   Páginas internas
   ========================================================= */
.faixa-titulo {
	background: var(--verde-900);
	background-image: linear-gradient(135deg, var(--verde-900) 0%, var(--verde-800) 60%, var(--verde) 140%);
	color: #fff;
}

/* Telas do Portal do Afiliado e da ficha de filiação. */
.faixa-titulo--portal {
	background: var(--azul-escuro);
	background-image: linear-gradient(135deg, var(--azul-escuro) 0%, var(--azul) 60%, var(--azul-claro) 140%);
}

.faixa-titulo__interno {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	position: relative;
	padding-block: clamp(2rem, 4.5vw, 3rem);
}
.faixa-titulo__textos { min-width: 0; }

.faixa-titulo__emblema {
	flex: none;
	display: flex;
	padding: 6px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}
.faixa-titulo__emblema img { width: 88px; height: auto; }

/* No computador o emblema ocupa quase toda a altura da faixa, mas fora do
   fluxo: quem dita a altura continua sendo o texto, igual às outras páginas. */
@media (min-width: 981px) {
	.faixa-titulo__emblema {
		position: absolute;
		top: .75rem;
		bottom: .75rem;
		right: var(--respiro);
		aspect-ratio: 1;
		padding: 8px;
	}
	.faixa-titulo__emblema img { width: 100%; height: 100%; }
}

.faixa-titulo__secao {
	margin: 0 0 .4rem;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ouro);
}

.faixa-titulo__texto {
	margin: 0;
	max-width: 24ch;
	color: #fff;
}
.faixa-titulo__texto--longo { max-width: none; }

.trilha {
	margin-top: 1rem;
	font-size: .8125rem;
	color: rgba(255, 255, 255, .7);
}
.trilha a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.trilha a:hover { color: #fff; text-decoration: underline; }
.trilha__sep { margin-inline: .5rem; opacity: .5; }

.secao-interna { padding-block: clamp(2.5rem, 5vw, 3.5rem); }

.pagina__grade,
.artigo__grade {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: clamp(1.75rem, 4vw, 3rem);
	padding-block: clamp(2.5rem, 5vw, 3.5rem);
	align-items: start;
}

/* ---------- corpo de texto ---------- */
.texto-longo { max-width: var(--leitura); }
.texto-longo--intro { margin-bottom: 2rem; }

/* Uma frase só, acima dos cartões do portal: vai até o fim da linha em vez
   de quebrar na largura de leitura. */
.texto-longo--largo { max-width: none; }

.texto-longo h2 {
	margin-top: 2.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--linha-fina);
	font-size: 1.5rem;
}
.texto-longo h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.texto-longo h3 { margin-top: 1.75rem; }

.texto-longo ul, .texto-longo ol { padding-left: 1.25rem; }
.texto-longo li { margin-bottom: .4rem; }
/* Lista de itens curtos (ex.: as práticas integrativas): duas colunas, uma
   só no celular. */
.texto-longo .lista-colunas { columns: 13rem 2; column-gap: 2rem; }
.texto-longo .lista-colunas li { break-inside: avoid; }

.texto-longo img { border-radius: var(--raio); }

/* Foto da homenagem na página Sobre. */
.texto-longo .foto-homenagem { margin: 1.25rem 0 1.5rem; }
.texto-longo .foto-homenagem img { width: 100%; height: auto; }
/* Apoiadores, no fim do Sobre. */
/* Destaque bege, o mesmo das parcerias da página Cursos. */
.apoiadores {
	clear: both;
	margin: 2rem 0 2.5rem;
	padding: 1.75rem;
	background: var(--ouro-050);
	border: 1px solid var(--ouro-100);
	border-radius: var(--raio);
}
.texto-longo .apoiadores h2 { margin-top: 0; }
.apoiadores__grade {
	display: grid;
	grid-template-columns: 1fr; /* Um apoiador por linha, na largura toda. */
	gap: 1rem;
	margin-top: 1rem;
}
.apoiador {
	padding: 1.15rem 1.25rem;
	background: var(--papel);
	border: 1px solid var(--ouro-100);
	border-radius: var(--raio);
}
.texto-longo .apoiador__nome { margin: .15rem 0 .1rem; font-size: 1.0625rem; }
.texto-longo .apoiador__papel { margin: 0 0 .4rem; font-size: .875rem; color: var(--verde); font-weight: 600; }
.apoiador__texto p { margin: 0; font-size: .9375rem; }
.texto-longo .apoiador__redes { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin: .5rem 0 0; font-size: .875rem; }
.apoiador__redes a { display: inline-flex; align-items: center; gap: .4rem; }
.apoiador__redes .icone { width: 1rem; height: 1rem; }
/* Logotipo opcional (imagem destacada), à esquerda do texto. */
.apoiador--com-logo { display: flex; align-items: center; gap: 1.25rem; }
.apoiador--com-logo .apoiador__corpo { min-width: 0; }
.apoiador__logo { flex: none; width: 128px; }
.texto-longo .apoiador__logo img { display: block; width: 100%; height: auto; border-radius: 0; }
/* No celular o logotipo vai para cima, para o texto ter a largura toda. */
@media (max-width: 640px) {
	.apoiador--com-logo { flex-direction: column; align-items: flex-start; gap: .85rem; }
	.apoiador__logo { width: 88px; }
}

.texto-longo .foto-homenagem figcaption { margin-top: .5rem; font-size: .875rem; color: var(--texto-fraco); }
/* Em tela larga a foto fica à direita e o texto corre ao lado. */
@media (min-width: 641px) {
	.texto-longo .foto-homenagem { float: right; width: min(42%, 300px); margin: .35rem 0 1rem 1.75rem; }
	.texto-longo .foto-homenagem ~ h2 { clear: both; }
}

.texto-longo > p:first-child {
	font-size: 1.1875rem;
	line-height: 1.6;
	color: var(--tinta);
}

.destaque-imagem {
	margin: 0 0 2rem;
	border-radius: var(--raio);
	overflow: hidden;
}
.destaque-imagem img { width: 100%; }

.paginas-internas { margin: 2rem 0; font-size: .9375rem; }

/* parceria educacional — usada no conteúdo da página Cursos */
.curso-parceria {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	align-items: center;
	gap: 1.75rem;
	margin: 2rem 0;
	padding: 1.75rem;
	background: var(--ouro-050);
	border: 1px solid var(--ouro-100);
	border-radius: var(--raio);
}
.curso-parceria__marca img { width: 100%; height: auto; }
.curso-parceria h2 {
	margin: 0 0 .5rem;
	padding: 0;
	border: 0;
	font-size: 1.375rem;
}
.curso-parceria p { font-size: .9375rem; }
.curso-parceria p:last-of-type { margin-bottom: 0; }
/* Mais de um endereço por parceiro: os botões precisam de respiro e de quebra
   própria, senão colam um no outro na largura do celular. */
.curso-parceria__links {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-top: 1rem;
}
.curso-parceria__links a {
	display: inline-flex;
	align-items: center;
	padding: .6rem 1.1rem;
	border-radius: var(--raio-pequeno);
	background: var(--azul-uninter);
	color: #fff;
	font-size: .9375rem;
	font-weight: 600;
	text-decoration: none;
	transition: background var(--transicao);
}
.curso-parceria__links a:hover { background: #1A4382; color: #fff; }

/* ---------- documentos do portal ---------- */
.documentos { list-style: none; margin: 0 0 1.5rem; padding: 0; }

.documento {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
	align-items: center;
	gap: 1rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--linha-fina);
}
.documento:first-child { border-top: 1px solid var(--linha-fina); }

.documento__nome { margin: 0; font-weight: 600; color: var(--tinta); }
.documento__estado { margin: .2rem 0 0; font-size: .875rem; color: var(--texto-fraco); }
.documento__estado span { margin-left: .5rem; }
.documento__estado--falta { color: var(--ouro-600); }
.documento__campo { margin-bottom: 0; }

/* ---------- solicitações ---------- */
.pedidos { list-style: none; margin: 0; padding: 0; }

.pedido { padding: 1rem 0; }
.pedido + .pedido { border-top: 1px solid var(--linha-fina); }

.pedido__topo {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 0 0 .35rem;
	font-size: .8125rem;
	color: var(--texto-fraco);
}

.pedido__assunto { margin: 0 0 .2rem; font-weight: 600; color: var(--tinta); }
.pedido__mensagem { margin: 0; font-size: .9375rem; color: var(--texto); }

/* A resposta é texto da associação dentro do cartão do afiliado: recuada e
   com fundo próprio, para não se confundir com o que ele mesmo escreveu. */
.pedido__resposta {
	margin-top: .85rem;
	padding: .85rem 1rem;
	border-left: 3px solid var(--verde);
	border-radius: 0 var(--raio-pequeno) var(--raio-pequeno) 0;
	background: var(--verde-050);
}
.pedido__resposta p { margin: 0; font-size: .9375rem; color: var(--tinta); white-space: pre-wrap; }
.pedido__resposta-titulo {
	margin-bottom: .3rem !important;
	font-size: .75rem !important;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--verde) !important;
}

/* Selo discreto ao lado do número: diz que dá para conversar por ali, sem
   virar botão e competir com o nome do profissional. */
.profissional__zap {
	display: inline-block;
	margin-left: .4rem;
	padding: .1rem .4rem;
	border-radius: 999px;
	background: var(--verde-100);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--verde);
	vertical-align: middle;
}

/* ---------- abas de filtro dentro de um cartão ---------- */
.abas {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin: -.25rem 0 1.25rem;
	border-bottom: 1px solid var(--linha-fina);
}

.abas__item {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .5rem .75rem;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	font-size: .9375rem;
	color: var(--texto-fraco);
	text-decoration: none;
	transition: color var(--transicao), border-color var(--transicao);
}
.abas__item:hover { color: var(--tinta); }

.abas__item--atual {
	border-bottom-color: var(--azul);
	color: var(--azul);
	font-weight: 600;
}

/* A contagem é dado secundário: pastilha discreta, não etiqueta colorida. */
.abas__conta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.35rem;
	padding: 0 .35rem;
	border-radius: 999px;
	background: var(--cinza);
	font-size: .75rem;
	font-weight: 600;
	color: var(--texto-fraco);
}
.abas__item--atual .abas__conta { background: var(--azul-fundo); color: var(--azul-escuro); }

/* ---------- informativos ---------- */
.informes { list-style: none; margin: 0; padding: 0; }

.informes__item {
	padding: 1.35rem 0;
	border-bottom: 1px solid var(--linha-fina);
}
.informes__item:first-child { padding-top: 0; }
.informes__item:last-child { border-bottom: 0; }

.informes__titulo { margin: .35rem 0 .4rem; font-size: 1.125rem; }
.informes__titulo a { color: var(--tinta); text-decoration: none; }
.informes__titulo a:hover { color: var(--azul); }

.informes__resumo { margin: 0; font-size: .9375rem; color: var(--texto); }

.informes__fixado {
	font-size: .75rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ouro-600);
}

.informe__topo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .75rem;
	margin: 0;
	font-size: .8125rem;
	color: var(--texto-fraco);
}

.informe__titulo { margin: .5rem 0 1.25rem; font-size: clamp(1.375rem, 3vw, 1.75rem); }

/* O corpo pode ser um código de ética inteiro: largura de leitura, não de
   formulário. */
.informe__corpo { max-width: 70ch; }

/* Leitura de um informativo: o texto e, ao lado, os outros informativos. */
.informe-leitura {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 2.5rem;
	align-items: start;
}
.informe-leitura--sozinho { display: block; }
.informe-leitura__outros { position: sticky; top: 1.5rem; }
.informe-leitura__lista { list-style: none; margin: 0; padding: 0; }
.informe-leitura__lista li + li {
	margin-top: .9rem;
	padding-top: .9rem;
	border-top: 1px solid var(--linha-fina);
}
.informe-leitura__lista a {
	display: block;
	margin-top: .35rem;
	color: var(--tinta);
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}
.informe-leitura__lista a:hover { color: var(--azul); }
@media (max-width: 980px) {
	.informe-leitura { grid-template-columns: 1fr; }
	.informe-leitura__outros { position: static; }
}

.informe__anexo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1rem;
	margin: 1.5rem 0 0;
	font-size: .875rem;
	color: var(--texto-fraco);
}

.etiqueta--comunicado { background: var(--azul-fundo); color: var(--azul-escuro); }
.etiqueta--norma      { background: var(--verde-100); color: var(--verde); }
.etiqueta--orientacao { background: var(--ouro-100); color: var(--ouro-600); }

.etiqueta--ok { background: var(--verde-100); color: var(--verde); }
.etiqueta--espera { background: var(--ouro-100); color: var(--ouro-600); }

/* ---------- aviso do perfil no diretório ---------- */
.portal__situacao {
	margin-bottom: 1.75rem;
	padding: 1rem 1.15rem;
	border-radius: var(--raio-pequeno);
	border-left: 4px solid;
	font-size: .9375rem;
}
.portal__situacao p { margin: 0; }
.portal__situacao--no-ar { background: var(--verde-050); border-color: var(--verde); color: var(--verde-800); }
.portal__situacao--fora { background: var(--cinza); border-color: var(--linha); color: var(--texto); }

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

/* ---------- situação do cadastro, no painel do afiliado ---------- */
.situacao {
	margin-bottom: 2rem;
	padding: 1.25rem 1.5rem;
	border-radius: var(--raio-pequeno);
	border-left: 4px solid;
}

.situacao__selo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .85rem;
	margin: 0;
}

.situacao__ponto {
	width: 10px;
	height: 10px;
	flex: none;
	border-radius: 50%;
	background: currentColor;
}

.situacao__rotulo {
	font-weight: 700;
	font-size: .8125rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.situacao__validade { font-size: .875rem; opacity: .85; }

/* Solto na linha da saudação, o selo vira etiqueta: ganha contorno próprio
   porque não tem mais a faixa em volta dizendo de que cor é a situação. As
   bordas ficam em propriedades separadas para o atalho não apagar a cor que
   .situacao--ok e as irmãs definem depois. */
.situacao__selo--solto {
	/* Encolhe junto com a tela: fixa, a etiqueta passava da borda no celular e
	   levava a data para fora. Encolhendo, a validade desce para a segunda
	   linha dentro da própria etiqueta. */
	max-width: 100%;
	padding: .5rem .9rem;
	border-width: 1px;
	border-style: solid;
	border-radius: 999px;
}

/* Sem o selo dentro, o primeiro texto da caixa não precisa de respiro em cima. */
.situacao > :first-child { margin-top: 0; }

.situacao__recado {
	margin: .75rem 0 0;
	font-size: .9375rem;
	color: var(--texto);
}

/* O recado da associação é texto de outra pessoa: ganha caixa própria para
   não se confundir com o texto do sistema. */
.situacao__nota {
	margin-top: 1rem;
	padding: .9rem 1.1rem;
	border-radius: var(--raio-pequeno);
	background: var(--papel);
}
.situacao__nota p { margin: 0; color: var(--tinta); font-size: .9375rem; }
.situacao__nota-titulo {
	margin-bottom: .3rem !important;
	font-size: .75rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--texto-fraco) !important;
}

.situacao__acoes { margin: 1.15rem 0 0; }

/* Dentro do painel de confirmação a faixa não encosta nas bordas. */
.situacao--solta { margin: 0 0 1.75rem; text-align: left; }

.situacao--ok     { background: var(--verde-050); border-color: var(--verde);  color: var(--verde-800); }
.situacao--espera { background: var(--ouro-050);  border-color: var(--ouro);   color: var(--ouro-600); }
.situacao--erro   { background: #FCEEEC;          border-color: var(--erro);   color: #7B2A21; }
.situacao--neutro { background: var(--cinza);     border-color: var(--linha);  color: var(--texto); }

/* ---------- confirmação de ficha enviada ---------- */
.confirmacao {
	max-width: 620px;
	margin: 0 auto;
	padding: clamp(2rem, 5vw, 3rem);
	border: 1px solid var(--verde-100);
	border-radius: var(--raio);
	background: var(--verde-050);
	text-align: center;
}

.confirmacao__selo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 1.25rem;
	border-radius: 50%;
	background: var(--verde);
	color: #fff;
}
.confirmacao__selo .icone { width: 32px; height: 32px; }

.confirmacao__titulo {
	margin: 0 0 .6rem;
	font-size: clamp(1.5rem, 3vw, 1.875rem);
	color: var(--verde-900);
}

.confirmacao__texto {
	margin: 0 auto 2rem;
	max-width: 44ch;
	font-size: 1.0625rem;
	color: var(--texto);
}

/* A lista volta a alinhar à esquerda: número solto no centro não se lê. */
.confirmacao__proximos {
	padding: 1.5rem;
	border-radius: var(--raio-pequeno);
	background: var(--papel);
	text-align: left;
}

.confirmacao__subtitulo {
	margin: 0 0 .85rem;
	font-size: .8125rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--verde);
}

.confirmacao__proximos ol {
	margin: 0;
	padding-left: 1.2rem;
	color: var(--texto);
	font-size: .9375rem;
}
.confirmacao__proximos li + li { margin-top: .65rem; }

.confirmacao__apoio {
	margin: 1.75rem auto .25rem;
	max-width: 46ch;
	font-size: .9375rem;
	color: var(--texto-fraco);
}

.confirmacao__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: center;
	margin-top: 1.25rem;
}

@media (max-width: 520px) {
	.confirmacao__acoes .botao { width: 100%; justify-content: center; }
}

/* ---------- ficha conferida, só leitura ---------- */
.conferencia {
	margin: 0;
	padding: 1.5rem;
	border: 1px solid var(--linha);
	border-radius: var(--raio-pequeno);
	background: var(--cinza);
}

.conferencia__nota {
	margin: 0 0 1.5rem;
	font-size: .9375rem;
	color: var(--texto);
}
.conferencia__nota a { color: var(--azul); font-weight: 600; }

.conferencia__secao {
	margin: 1.75rem 0 .75rem;
	font-size: .8125rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--verde);
}
.conferencia__secao:first-of-type { margin-top: 0; }

.conferencia__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: .85rem 1.5rem;
	margin: 0;
}
.conferencia__lista dt {
	font-size: .8125rem;
	color: var(--texto-fraco);
	margin-bottom: .1rem;
}
.conferencia__lista dd {
	margin: 0;
	color: var(--tinta);
	overflow-wrap: anywhere;
}

.portal__cartao--solto { margin-top: 2rem; }

/* ---------- diretório de profissionais ---------- */

/* A busca e a listagem ficam de fora desta grade de propósito: os cartões dos
   profissionais usam a largura inteira, e só a introdução divide a faixa com
   os atalhos. */
.diretorio__topo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: clamp(1.75rem, 4vw, 3rem);
	align-items: start;
	margin-bottom: 2rem;
}

.diretorio__intro .texto-longo > *:last-child { margin-bottom: 0; }
/* A busca mora na coluna da introdução, logo abaixo do texto. */
.diretorio__intro .diretorio__busca { margin: 1.75rem 0 0; }

.diretorio__busca {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
	gap: 0 1rem;
	align-items: end;
	margin-bottom: 2rem;
	padding: 1.35rem 1.5rem;
	background: var(--cinza);
	border: 1px solid var(--linha-fina);
	border-radius: var(--raio);
}
.diretorio__busca .campo { margin-bottom: 0; }
.diretorio__busca select {
	width: 100%;
	padding: .7rem .85rem;
	border: 1px solid var(--linha);
	border-radius: var(--raio-pequeno);
	background: var(--papel);
	font: inherit;
	font-size: 1rem;
	color: var(--tinta);
}

/* O botão fecha a linha ao lado dos campos, então precisa da mesma caixa que
   eles. O .botao usa fonte menor e entrelinha 1.2 e ficava 8px mais baixo;
   repetir aqui o mesmo cálculo do campo — e não uma altura fixa — mantém os
   dois juntos se a tipografia do tema mudar. */
.diretorio__acoes .botao {
	padding: .7rem 1.5rem;
	border-width: 1px;
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
}

.diretorio__busca .campo--curto { max-width: none; }

.diretorio__acoes {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0;
}

.diretorio__contagem {
	margin-bottom: 1.25rem;
	font-size: .9375rem;
	color: var(--texto-fraco);
}

.diretorio__lista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 1.25rem;
}

.profissional {
	padding: 1.5rem;
	background: var(--papel);
	border: 1px solid var(--linha-fina);
	border-top: 3px solid var(--verde);
	border-radius: var(--raio);
}

.profissional__nome {
	margin: 0 0 .2rem;
	font-size: 1.1875rem;
	line-height: 1.3;
}

.profissional__clinica {
	margin: 0 0 1rem;
	font-size: .9375rem;
	color: var(--texto-fraco);
}

.profissional__dados { margin: 0; font-size: .9375rem; line-height: 1.55; }
.profissional__dados > div { display: flex; gap: .65rem; }
.profissional__dados > div + div { margin-top: .75rem; }
.profissional__dados dt { flex: none; }
.profissional__dados dt .icone { width: 1.05rem; height: 1.05rem; margin-top: .25rem; color: var(--verde); }
.profissional__dados dd { margin: 0; }

@media (max-width: 860px) {
	.diretorio__busca { grid-template-columns: 1fr; gap: 0; }
	.diretorio__busca .campo { margin-bottom: 1rem; }
	.diretorio__acoes .botao { flex: 1; justify-content: center; }
}

/* ---------- mapa da sede ---------- */
/* Na página de contato o mapa fica ao lado do texto, não embaixo: quem
   procura endereço quer ver os dois de uma vez. */
.contato__grade {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: start;
}

.mapa { position: sticky; top: 1.5rem; }

.mapa__moldura {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	background: var(--cinza);
}
.mapa__moldura iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}


/* ---------- ficha em etapas ---------- */
/* Tudo aqui só entra em cena quando o JavaScript liga as etapas. Sem ele a
   ficha continua sendo uma página só, inteira e funcional. */
.ficha__progresso { margin-bottom: 1.75rem; }

.ficha__contador {
	margin: 0 0 .6rem;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--azul);
}

.ficha__trilha {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ficha__trilha-item { display: flex; flex: 1 1 auto; }

/* Cada passo é um botão: leva a qualquer etapa, em qualquer ordem. */
.ficha__passo {
	display: flex;
	align-items: center;
	gap: .45rem;
	width: 100%;
	padding: .5rem .7rem;
	border: 0;
	border-radius: var(--raio-pequeno);
	background: var(--cinza);
	font-family: inherit;
	font-size: .8125rem;
	line-height: 1.25;
	text-align: left;
	color: var(--texto-fraco);
	cursor: pointer;
	transition: background var(--transicao), color var(--transicao);
}
.ficha__passo:hover { background: var(--linha); color: var(--tinta); }
.ficha__passo:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

.ficha__passo-marca {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex: none;
	border-radius: 50%;
	background: var(--linha);
	font-weight: 700;
	font-size: .6875rem;
	color: var(--texto);
}

/* Concluída: o número dá lugar ao check, sem tirar o passo de circulação. */
.ficha__passo--feito {
	background: var(--azul-fundo);
	color: var(--azul-escuro);
}
.ficha__passo--feito:hover { background: var(--azul-claro); color: #fff; }
.ficha__passo--feito .ficha__passo-marca {
	background: var(--azul);
	font-size: .75rem;
	/* O número sai de cena sem sair do fluxo: o círculo não muda de tamanho. */
	color: transparent;
}
.ficha__passo--feito .ficha__passo-marca::after {
	content: "✓";
	position: absolute;
	color: #fff;
}

.ficha__passo--atual {
	background: var(--azul);
	color: #fff;
	font-weight: 600;
}
.ficha__passo--atual:hover { background: var(--azul-escuro); color: #fff; }
.ficha__passo--atual .ficha__passo-marca { background: rgba(255, 255, 255, .25); color: #fff; }
.ficha__passo--atual.ficha__passo--feito .ficha__passo-marca { color: transparent; }

/* Numa ficha em etapas só uma seção fica visível por vez. */
.ficha--etapas .ficha__secao[hidden] { display: none; }

.ficha__navegacao {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.5rem;
}
.ficha__navegacao [data-ficha="voltar"][hidden] { visibility: hidden; display: inline-flex; }

/* No último passo quem envia é o botão de sempre, não o "Avançar". */
.ficha--etapas .ficha__envio { margin-top: 1.5rem; }

/* ---------- lateral da ficha ---------- */
.lateral__bloco--portal {
	background: var(--azul-fundo);
	border-color: rgba(27, 79, 114, .2);
}
.lateral__bloco--portal .lateral__titulo {
	border-bottom-color: rgba(27, 79, 114, .2);
	color: var(--azul-escuro);
}

/* Classe dobrada de propósito: as regras base de .lateral__lista vêm depois
   neste arquivo e, com a mesma especificidade, anulariam o que está aqui. */
.lateral__lista.lateral__lista--solta { margin-top: .9rem; }
.lateral__lista.lateral__lista--solta a { color: var(--azul); font-weight: 500; }
.lateral__lista.lateral__lista--solta a:hover { background: rgba(255, 255, 255, .7); color: var(--azul-escuro); }
.lateral__lista.lateral__lista--solta .icone { color: var(--azul); }

.lateral__etapas {
	margin: 0;
	padding-left: 1.1rem;
	font-size: .875rem;
	line-height: 1.55;
	color: var(--texto);
}
.lateral__etapas li + li { margin-top: .5rem; }

/* ---------- coluna lateral ---------- */
.lateral {
	position: sticky;
	top: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.lateral__bloco {
	padding: 1.35rem 1.25rem;
	background: var(--papel);
	border: 1px solid var(--linha-fina);
	border-radius: var(--raio);
}

.lateral__titulo {
	margin: 0 0 .85rem;
	padding-bottom: .6rem;
	border-bottom: 1px solid var(--linha-fina);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--texto-fraco);
}

.lateral__lista { list-style: none; margin: 0; padding: 0; }
.lateral__lista li + li { margin-top: .15rem; }
.lateral__lista a {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .5rem .55rem;
	border-radius: var(--raio-pequeno);
	color: var(--tinta);
	font-size: .9375rem;
	font-weight: 500;
	text-decoration: none;
}
.lateral__lista a:hover { background: var(--verde-050); color: var(--verde); }
.lateral__lista .icone { color: var(--verde); }

.lateral__portal a { color: var(--azul); font-weight: 600; }
.lateral__portal a:hover { background: var(--azul-fundo); color: var(--azul-escuro); }
.lateral__portal .icone { color: var(--azul); }

.lateral__bloco--contato { background: var(--verde-050); border-color: var(--verde-100); }

/* Missão, visão e valores na lateral do Sobre. */
.lateral__bloco--pilar .lateral__titulo {
	display: flex;
	align-items: center;
	gap: .45rem;
}
.lateral__bloco--pilar .lateral__titulo .icone {
	flex: none;
	width: 1rem;
	height: 1rem;
	color: var(--verde);
}
.lateral__bloco--pilar .lateral__texto {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--texto);
}
.lateral__texto { margin: 0 0 1rem; font-size: .875rem; color: var(--texto-fraco); }
/* Último do bloco não precisa da folga que separa dele o que viria depois. */
.lateral__bloco > .lateral__texto:last-child { margin-bottom: 0; }
.lateral__botao { width: 100%; }
.lateral__email {
	display: block;
	margin-top: .75rem;
	font-size: .875rem;
	text-align: center;
	word-break: break-all;
}
.lateral__instagram {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .4rem;
	margin-top: .4rem;
	font-size: .875rem;
}
.lateral__instagram .icone { width: 1rem; height: 1rem; }

/* ---------- artigo ---------- */
.artigo__meta {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 0 0 1.5rem;
	font-size: .875rem;
	color: var(--texto-fraco);
}

.artigo__rodape {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--linha-fina);
}

.tags { font-size: .875rem; color: var(--texto-fraco); }

.post-navigation .nav-links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
}
.post-navigation a {
	display: block;
	padding: 1rem 1.15rem;
	border: 1px solid var(--linha-fina);
	border-radius: var(--raio);
	text-decoration: none;
	transition: border-color var(--transicao), background var(--transicao);
}
.post-navigation a:hover { border-color: var(--verde-100); background: var(--verde-050); }
.nav-rotulo {
	display: block;
	margin-bottom: .2rem;
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--texto-fraco);
}
.nav-titulo { display: block; font-weight: 600; color: var(--tinta); line-height: 1.35; }
.post-navigation .nav-next { text-align: right; }

/* =========================================================
   Cards e listagens
   ========================================================= */
.lista-artigos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 1.5rem;
}

.card {
	display: flex;
	flex-direction: column;
	background: var(--papel);
	border: 1px solid var(--linha-fina);
	border-radius: var(--raio);
	overflow: hidden;
	transition: box-shadow var(--transicao), border-color var(--transicao);
}
.card:hover {
	box-shadow: var(--sombra);
	border-color: var(--verde-100);
}

.card__imagem {
	display: block;
	aspect-ratio: 3 / 2;
	background: var(--cinza);
	overflow: hidden;
}
.card__imagem img { width: 100%; height: 100%; object-fit: cover; }

.card__imagem-vazia {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--verde-050), var(--verde-100));
}

.card__corpo {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.25rem;
}

.card__meta {
	display: flex;
	align-items: center;
	gap: .65rem;
	margin: 0 0 .65rem;
	font-size: .8125rem;
	color: var(--texto-fraco);
}

.card__titulo { margin: 0 0 .5rem; font-size: 1.1875rem; line-height: 1.3; }
.card__titulo a { color: var(--tinta); text-decoration: none; }
.card__titulo a:hover { color: var(--verde); }

.card__resumo { flex: 1; font-size: .9375rem; }
.card__resumo p:last-child { margin-bottom: .75rem; }

.card__acao { margin: 0; }

/* busca */
.busca-topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-bottom: 2rem;
}
.busca-topo__contagem { margin: 0; color: var(--texto-fraco); }

/* vazio */
.vazio {
	padding: 2.5rem;
	background: var(--cinza);
	border-radius: var(--raio);
	text-align: center;
}
.vazio .busca { margin-inline: auto; }

/* paginação */
.pagination { margin-top: 2.5rem; }
.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .4rem;
}
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: .75rem;
	border: 1px solid var(--linha);
	border-radius: var(--raio-pequeno);
	color: var(--tinta);
	font-size: .9375rem;
	font-weight: 500;
	text-decoration: none;
}
.pagination .page-numbers:hover { background: var(--verde-050); border-color: var(--verde-100); color: var(--verde); }
.pagination .page-numbers.current {
	background: var(--verde);
	border-color: var(--verde);
	color: #fff;
}
.pagination .dots { border-color: transparent; }

/* =========================================================
   Portal do Afiliado
   Área fechada: só o conteúdo daqui exige cadastro aprovado.
   ========================================================= */
.portal { max-width: 100%; }

.portal__colunas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 1.5rem;
	align-items: start;
}

.portal__cartao {
	padding: 1.75rem;
	background: var(--papel);
	border: 1px solid var(--linha-fina);
	border-top: 3px solid var(--azul);
	border-radius: var(--raio);
}
.portal__cartao--convite { background: var(--azul-fundo); border-color: rgba(27, 79, 114, .18); }
.portal__cartao--estreito { max-width: 460px; }
.portal__cartao--largo { max-width: 780px; }
.portal__cartao--resumo { margin-top: 1.5rem; }

.portal__titulo {
	margin: 0 0 .5rem;
	font-size: 1.25rem;
	color: var(--azul-escuro);
}

.portal__apoio { color: var(--texto-fraco); font-size: .9375rem; }

.portal__lista {
	margin: 0 0 1.25rem;
	padding-left: 1.1rem;
	font-size: .9375rem;
}
.portal__lista li { margin-bottom: .3rem; }

/* ---------- recados ---------- */
/* ---------- recorte da foto 3x4 ---------- */
.recorte-aberto, .recorte-aberto body { overflow: hidden; }

.recorte {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(10, 20, 18, .72);
}
.recorte[hidden] { display: none; }

.recorte__caixa {
	display: flex;
	flex-direction: column;
	gap: .85rem;
	width: 100%;
	max-width: 420px;
	max-height: 100%;
	padding: 1.25rem;
	overflow-y: auto;
	background: var(--papel);
	border-radius: var(--raio);
	box-shadow: var(--sombra);
}

.recorte__titulo { margin: 0; font-size: 1.125rem; }
.recorte__dica { margin: 0; font-size: .875rem; color: var(--texto-fraco); }

/* A área tem a proporção da foto 3x4; a altura cabe na tela do celular. */
.recorte__janela {
	position: relative;
	width: min(100%, calc((100vh - 15rem) * .75));
	aspect-ratio: 3 / 4;
	margin: 0 auto;
	overflow: hidden;
	background: var(--cinza);
	border-radius: var(--raio-pequeno);
	touch-action: none;
	cursor: grab;
	user-select: none;
}
.recorte__janela:active { cursor: grabbing; }
.recorte__janela:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }

.recorte__imagem {
	position: absolute;
	top: 0;
	left: 0;
	max-width: none;
	transform-origin: 0 0;
	pointer-events: none;
}

/* Contorno do rosto: o oval fica claro e o resto escurece um pouco. */
.recorte__contorno {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(ellipse 33% 30% at 50% 40%, transparent 98%, rgba(0, 0, 0, .35) 100%);
}
.recorte__contorno::after {
	content: "";
	position: absolute;
	left: 17%;
	top: 10%;
	width: 66%;
	height: 60%;
	border: 2px dashed rgba(255, 255, 255, .85);
	border-radius: 50%;
}

.recorte__controles {
	display: flex;
	align-items: center;
	gap: .5rem;
}
.recorte__zoom { flex: 1; min-width: 0; accent-color: var(--azul); }
.recorte__icone {
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	font-size: 1.35rem;
	line-height: 1;
	color: var(--azul);
	background: var(--papel);
	border: 1px solid var(--linha);
	border-radius: 50%;
	cursor: pointer;
}
.recorte__icone:hover { background: var(--azul-fundo); }

.recorte__acoes {
	display: flex;
	justify-content: flex-end;
	gap: .6rem;
}
.recorte__acoes .botao { flex: 1 1 auto; }

.recorte-previa {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-top: .5rem;
}
.recorte-previa img {
	width: 60px;
	height: 80px;
	object-fit: cover;
	border: 1px solid var(--linha);
	border-radius: var(--raio-pequeno);
}
.recorte-previa__ajustar {
	padding: 0;
	font: inherit;
	font-size: .875rem;
	color: var(--azul);
	text-decoration: underline;
	background: none;
	border: 0;
	cursor: pointer;
}

.portal__recado {
	margin-bottom: 1.5rem;
	padding: 1rem 1.15rem;
	border-radius: var(--raio-pequeno);
	border-left: 4px solid;
	font-size: .9375rem;
}
.portal__recado p, .portal__recado ul { margin: 0; }
.portal__recado ul { padding-left: 1.1rem; }
.portal__recado li + li { margin-top: .3rem; }

.portal__recado--erro {
	background: #FCEEEC;
	border-color: var(--erro);
	color: #7B2A21;
}
.portal__recado--ok {
	background: var(--verde-050);
	border-color: var(--verde);
	color: var(--verde-800);
}

/* ---------- formulários ---------- */
.portal__formulario { margin: 0; }

.portal__grade {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 0 1rem;
}
.campo--largo { grid-column: 1 / -1; }
.campo--curto { max-width: 120px; }

.campo { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1.1rem; }

.campo label {
	font-size: .875rem;
	font-weight: 600;
	color: var(--tinta);
}

/* Asterisco de campo obrigatório. Sem negrito: ele precisa saltar pela cor,
   não pelo peso, senão briga com o rótulo. */
.campo__obrig {
	color: var(--erro);
	font-weight: 400;
}

.ficha__obrigatorios {
	margin: 0 0 1.25rem;
	font-size: .8125rem;
	color: var(--texto-fraco);
}

/* O date precisa estar aqui: sem isto o navegador desenha o campo com a
   altura padrão dele e ele fica menor que os vizinhos. */
.campo input[type="text"],
.campo input[type="search"],
.campo input[type="email"],
.campo input[type="tel"],
.campo input[type="date"],
.campo input[type="number"],
.campo input[type="url"],
.campo input[type="password"],
.campo textarea {
	width: 100%;
	padding: .7rem .85rem;
	border: 1px solid var(--linha);
	border-radius: var(--raio-pequeno);
	background: var(--papel);
	font: inherit;
	font-size: 1rem;
	color: var(--tinta);
}
/* Só na vertical: arrastar na horizontal estoura a coluna da grade e
   desalinha o campo dos vizinhos. */
.campo textarea {
	min-height: 5.5rem;
	resize: vertical;
}

.campo input:focus,
.campo textarea:focus { border-color: var(--azul); }
.campo input:disabled { background: var(--cinza); color: var(--texto-fraco); }

.campo__dica { font-size: .8125rem; color: var(--texto-fraco); }

.campo--caixa { flex-direction: row; }
.campo--caixa label {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	font-weight: 400;
	font-size: .9375rem;
	color: var(--texto);
}
.campo--caixa input { margin-top: .25rem; flex: none; }

/* Só um robô enxerga este campo. */
.portal__armadilha {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.portal__acoes {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 0;
}

.portal__link { font-size: .9375rem; color: var(--azul); }

/* ---------- carteirinha digital ---------- */
.carteirinha-digital {
	margin-top: 2rem;
	padding: 1.35rem 1.25rem;
	background: var(--cinza);
	border: 1px solid var(--linha);
	border-radius: var(--raio);
}
.carteirinha-digital__titulo { margin: 0 0 .5rem; font-size: 1.125rem; }
.carteirinha-digital__link { margin: 1rem 0 .75rem; }
.carteirinha-digital__link input { width: 100%; font-size: .9375rem; background: var(--papel); }
.carteirinha-digital__acoes { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1rem; }
.carteirinha-digital__desligar .portal__link {
	padding: 0;
	font: inherit;
	text-decoration: underline;
	background: none;
	border: 0;
	cursor: pointer;
}

.carteirinha-publica { max-width: 44rem; margin: 0 auto; }
.carteirinha-publica__titulo { margin: 0 0 .75rem; }
.carteirinha-publica__situacao {
	display: inline-block;
	margin: 0 0 1rem;
	padding: .35rem .85rem;
	border-radius: 999px;
	font-size: .9375rem;
	font-weight: 600;
}
.carteirinha-publica__situacao--ativa { background: var(--verde-050); color: var(--verde-800); border: 1px solid var(--verde); }
.carteirinha-publica__situacao--inativa { background: #FCEEEC; color: #7B2A21; border: 1px solid var(--erro); }
.carteirinha-publica__cartao .anqpic3-cartoes { margin: 0 0 1rem; }
.carteirinha-publica__consulta { font-size: .875rem; color: var(--texto-fraco); }

/* ---------- painel ---------- */
.portal__topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-bottom: 1.75rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--linha-fina);
}

.portal__saudacao {
	margin: 0 0 .2rem;
	font-family: var(--fonte-titulo);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--tinta);
}
.portal__topo .portal__apoio { margin: 0; }

.portal__servicos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.portal__servico {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .3rem;
	padding: 1.35rem 1.25rem;
	background: var(--papel);
	border: 1px solid var(--linha-fina);
	border-radius: var(--raio);
	color: var(--texto);
	text-decoration: none;
	transition: box-shadow var(--transicao), border-color var(--transicao);
}
a.portal__servico:hover {
	box-shadow: var(--sombra);
	border-color: rgba(27, 79, 114, .35);
	color: var(--texto);
}

.portal__servico--breve { background: var(--cinza); opacity: .75; }

.portal__servico-icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: .35rem;
	border-radius: var(--raio-pequeno);
	background: var(--azul-fundo);
	color: var(--azul);
}
.portal__servico-icone .icone { width: 1.25rem; height: 1.25rem; }

.portal__servico-titulo {
	font-family: var(--fonte-titulo);
	font-weight: 700;
	color: var(--tinta);
}
.portal__servico-texto { font-size: .875rem; line-height: 1.5; color: var(--texto-fraco); }

.portal__etiqueta {
	position: absolute;
	top: 1rem;
	right: 1rem;
	padding: .1rem .5rem;
	border-radius: 999px;
	background: var(--linha);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--texto-fraco);
}

.portal__resumo {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
	margin: 0 0 1.5rem;
}
.portal__resumo dt {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--texto-fraco);
}
.portal__resumo dd { margin: .2rem 0 0; color: var(--tinta); }

/* ---------- ficha de filiação ---------- */
.ficha { max-width: 860px; }

.ficha__secao {
	margin: 0 0 2rem;
	padding: 1.5rem 1.5rem .5rem;
	border: 1px solid var(--linha-fina);
	border-top: 3px solid var(--azul);
	border-radius: var(--raio);
	background: var(--papel);
}

.ficha__legenda {
	padding: 0 .5rem;
	margin-left: -.5rem;
	font-family: var(--fonte-titulo);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--azul-escuro);
}

.ficha__apoio {
	margin: 0 0 1.25rem;
	font-size: .875rem;
	line-height: 1.55;
	color: var(--texto-fraco);
}

/* Grade de seis colunas: campo inteiro, meio campo e campo curto. */
.ficha .portal__grade {
	grid-template-columns: repeat(6, 1fr);
	gap: 0 1rem;
}
.ficha .portal__grade > .campo { grid-column: span 6; }
.ficha .portal__grade > .campo--medio { grid-column: span 3; }
.ficha .portal__grade > .campo--largo { grid-column: span 4; }
.ficha .portal__grade > .campo--minimo { grid-column: span 1; }
.ficha .portal__grade > .campo--curto { grid-column: span 2; max-width: none; }

/* Campo que depende de um "sim": invisível, mas segurando a própria célula
   da grade. Visibility também o tira da navegação por teclado. */
.campo--reservado { visibility: hidden; }

.campo--escolha { gap: .5rem; }

.campo__rotulo {
	font-size: .875rem;
	font-weight: 600;
	color: var(--tinta);
}

.campo__opcoes {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem .75rem;
}
.campo__opcoes label {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .45rem .8rem;
	border: 1px solid var(--linha);
	border-radius: 999px;
	font-size: .9375rem;
	font-weight: 400;
	color: var(--texto);
	cursor: pointer;
}
.campo__opcoes label:has( input:checked ) {
	border-color: var(--azul);
	background: var(--azul-fundo);
	color: var(--azul-escuro);
	font-weight: 600;
}

.campo input[type="file"] {
	width: 100%;
	padding: .55rem;
	border: 1px dashed var(--linha);
	border-radius: var(--raio-pequeno);
	background: var(--cinza);
	font-size: .875rem;
}

.ficha__termos {
	max-height: 180px;
	overflow-y: auto;
	margin-bottom: 1.25rem;
	padding: 1rem 1.15rem;
	border: 1px solid var(--linha-fina);
	border-radius: var(--raio-pequeno);
	background: var(--cinza);
	font-size: .875rem;
	line-height: 1.6;
}
.ficha__termos p:last-child { margin-bottom: 0; }

/* =========================================================
   Rodapé
   ========================================================= */
.rodape {
	margin-top: 0;
	background: var(--verde-900);
	color: rgba(255, 255, 255, .75);
	font-size: .9375rem;
}

.rodape__grade {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.rodape a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.rodape a:hover { color: #fff; text-decoration: underline; }

.rodape__marca {
	display: flex;
	align-items: center;
	gap: .85rem;
	margin-bottom: 1rem;
	text-decoration: none;
}

.rodape__emblema {
	width: 62px;
	height: 62px;
	flex: none;
	background: #fff;
	border-radius: 50%;
	padding: 3px;
}

.rodape__titulo {
	display: block;
	font-family: var(--fonte-titulo);
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -.02em;
	color: #fff;
}

.rodape__texto {
	display: block;
	font-size: .875rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, .68);
}

.rodape__coluna > .rodape__texto { max-width: 40ch; }

.rodape__redes {
	display: flex;
	gap: .6rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}
.rodape__redes a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 50%;
	color: var(--ouro);
	transition: background-color .15s ease, color .15s ease;
}
.rodape__redes a:hover {
	background: rgba(255, 255, 255, .1);
	color: #fff;
	text-decoration: none;
}
.rodape__redes .icone { width: 1.15rem; height: 1.15rem; }

.rodape__rotulo {
	margin: 0 0 1rem;
	font-family: var(--fonte-titulo);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ouro);
}

.rodape__menu { list-style: none; margin: 0; padding: 0; }
.rodape__menu li + li { margin-top: .5rem; }

/* Portal do Associado no rodapé: a mesma pílula branca e azul da barra do topo
   (classe e ícone vêm de functions.php, pelo endereço do item). */
.rodape__menu .rodape__menu-portal { margin-top: .9rem; }
.rodape__menu-portal a {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .4rem 1rem;
	border-radius: 999px;
	background: var(--papel);
	color: var(--azul);
	font-size: .875rem;
	font-weight: 700;
	transition: background var(--transicao), color var(--transicao), box-shadow var(--transicao);
}
.rodape__menu-portal a:hover {
	background: var(--azul-fundo);
	color: var(--azul-escuro);
	text-decoration: none;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .2);
}
.rodape__menu-portal .icone { width: 1rem; height: 1rem; }

.rodape__contato {
	display: flex;
	flex-direction: column;
	gap: .85rem;
	font-style: normal;
	font-size: .875rem;
	line-height: 1.55;
}
.rodape__contato-item { display: flex; gap: .6rem; }
.rodape__contato-item .icone {
	width: 1.05rem;
	height: 1.05rem;
	margin-top: .2rem;
	color: var(--ouro);
}

.rodape__widgets { grid-column: 1 / -1; }
.rodape__widgets .widget + .widget { margin-top: 1.5rem; }

.rodape__base { border-top: 1px solid rgba(255, 255, 255, .12); }

.rodape__base-interno {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding-block: 1.25rem;
	font-size: .8125rem;
	color: rgba(255, 255, 255, .6);
}
.rodape__base-interno p { margin: 0; }
/* Direitos e CNPJ formam um bloco só, para o crédito seguir sozinho na ponta. */
.rodape__base-textos { display: flex; flex-direction: column; gap: .2rem; }
.rodape__cnpj { opacity: .75; }
.rodape__privacidade { color: inherit; opacity: .75; }
.rodape__privacidade:hover { opacity: 1; }

.rodape__credito {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	opacity: .8;
	transition: opacity var(--transicao);
}
.rodape__credito:hover { opacity: 1; text-decoration: none; }
.rodape__credito img {
	width: 44px;
	height: auto;
	/* O W vem preto no arquivo; aqui ele precisa ser branco. */
	filter: brightness(0) invert(1);
}

/* =========================================================
   Home — carrossel de banners
   Os textos reaproveitam as classes .abertura__* do destaque fixo:
   com ou sem troca, é a mesma peça.
   ========================================================= */
.banners {
	position: relative;
	background: var(--verde-900);
	color: #fff;
}

/* Os banners se empilham na mesma célula da grade: o mais alto define a
   altura e nenhum deles sai do fluxo. */
.banners__palco { display: grid; }

.banner {
	grid-area: 1 / 1;
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	/* Altura contida de propósito: quanto mais próxima a faixa fica da
	   proporção das fotos, menos o corte come as laterais da imagem. */
	padding-block: clamp(3rem, 7vw, 5rem) clamp(7rem, 11vw, 8.5rem);
	opacity: 0;
	visibility: hidden;
	transition: opacity 550ms ease, visibility 550ms ease;
}
.banner--ativo { opacity: 1; visibility: visible; z-index: 1; }

.banner__fundo {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}
.banner__fundo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.banner__fundo::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(100deg, rgba(5, 55, 47, .95) 0%, rgba(5, 55, 47, .88) 42%, rgba(5, 55, 47, .40) 74%, rgba(5, 55, 47, .12) 100%);
}

/* Foto já escura dispensa véu — ele só embaçaria o desenho. */
.banner--sem-veu .banner__fundo::after { display: none; }

/* Na foto clara o véu não some, inverte: bege da casa desbotando para
   transparente, pelo mesmo caminho que o verde faz nas fotos escuras. */
.banner--claro .banner__fundo::after {
	background: linear-gradient(100deg,
		rgba(253, 249, 240, .92) 0%,
		rgba(253, 249, 240, .84) 30%,
		rgba(253, 249, 240, .50) 46%,
		rgba(253, 249, 240, .14) 58%,
		rgba(253, 249, 240, 0) 68%);
}

/* Sobre foto clara, o texto é que inverte. */
.banner--claro .abertura__acima {
	border-color: var(--linha);
	background: rgba(255, 255, 255, .72);
	color: var(--tinta);
}
.banner--claro .abertura__acima .icone { color: var(--ouro-600); }

.banner--claro .abertura__titulo {
	color: var(--tinta);
	text-shadow: 0 1px 16px rgba(255, 255, 255, .75);
}
.banner--claro .abertura__titulo em { color: var(--ouro-600); }

/* Vence o .banner__interno .abertura__texto declarado adiante. */
.banner--claro .banner__interno .abertura__texto {
	max-width: 44ch;
	color: var(--texto);
	text-shadow: 0 1px 10px rgba(253, 249, 240, .85);
}
.banner--claro .abertura__titulo { text-shadow: 0 1px 14px rgba(253, 249, 240, .85); }

/* Os controles vivem na seção, então acompanham o banner em cartaz. */
.banners--claro .banners__ponto { background: rgba(18, 32, 29, .28); }
.banners--claro .banners__ponto:hover { background: rgba(18, 32, 29, .45); }
.banners--claro .banners__ponto--ativo { background: var(--ouro-600); }

.banners--claro .banners__botao {
	border-color: rgba(18, 32, 29, .28);
	background: rgba(255, 255, 255, .6);
	color: var(--tinta);
}
.banners--claro .banners__botao:hover {
	background: rgba(255, 255, 255, .85);
	border-color: rgba(18, 32, 29, .45);
}

.banner__interno > * { max-width: 780px; }
.banner__interno .abertura__texto { max-width: 58ch; }

/* Sem troca não há controles, e o espaço reservado para eles some. */
.banners--unico .banner { padding-bottom: clamp(5rem, 9vw, 7rem); }
/* Banner com botão precisa de mais folga embaixo, senão o botão encosta nos
   pontos e nas setas do carrossel entre o tablet e o desktop. */
@media (min-width: 641px) {
	.banners:not(.banners--unico) .banner:has(.banner__cta) { padding-bottom: calc(clamp(7rem, 11vw, 8.5rem) + 2rem); }
}

/* ---------- controles ---------- */
.banners__barra {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: clamp(4.5rem, 7vw, 5.5rem);
	pointer-events: none;
}
.banners__barra > * { pointer-events: auto; }

.banners__pontos { display: flex; align-items: center; gap: .5rem; }

.banners__ponto {
	width: 30px;
	height: 6px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .38);
	cursor: pointer;
	transition: background var(--transicao), width var(--transicao);
}
.banners__ponto:hover { background: rgba(255, 255, 255, .6); }
.banners__ponto--ativo { width: 52px; background: var(--ouro); }

.banners__setas { display: flex; align-items: center; gap: .5rem; }

.banners__botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .38);
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(4px);
	transition: background var(--transicao), border-color var(--transicao);
}
.banners__botao:hover { background: rgba(255, 255, 255, .26); border-color: rgba(255, 255, 255, .6); }
.banners__botao .icone { width: 1.25rem; height: 1.25rem; }

/* =========================================================
   Telas médias e pequenas
   ========================================================= */
/* Daqui para baixo o menu não cabe mais ao lado de um emblema de 104px:
   o círculo encolhe um pouco e os rótulos ficam mais justos. */
@media (max-width: 1180px) {
	:root {
		--marca-tamanho: 84px;
		--marca-vao: 1rem;
	}
	.navegacao__lista > li > a { padding-inline: .5rem; font-size: .875rem; }
}

@media (max-width: 1100px) {
	/* Oito itens no menu: entre 981 e 1100px a barra só cabe um pouco mais justa. */
	.navegacao__lista > li > a { padding-inline: .35rem; font-size: .8125rem; }
	.atalhos__grade { grid-template-columns: repeat(2, 1fr); }
	.numeros__grade { grid-template-columns: repeat(2, 1fr); }
	/* Quantidade ímpar: o último ocupa a linha inteira, sem buraco ao lado. */
	.numero:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.noticias { grid-template-columns: 1fr; }
	.destaque__imagem { flex: none; aspect-ratio: 16 / 9; }
	.pagina__grade,
	.artigo__grade { grid-template-columns: minmax(0, 1fr) 260px; }
}

@media (max-width: 980px) {
	.barra-servicos__links { gap: 1rem; font-size: .75rem; }
	.barra-servicos__portal { font-size: .75rem; padding: .25rem .75rem; }

	/* Abaixo de 420px o nome por extenso espreme a marca; fica só a sigla. */
	@media (max-width: 419px) {
		.marca__descricao { display: none; }
	}
	.barra-servicos__links .icone { width: .9rem; height: .9rem; }

	/* O cabeçalho acompanha a rolagem só no celular, onde a marca e o botão do
	   menu são o único caminho de volta. A barra de serviços fica de fora de
	   propósito: ela vem antes no documento, então sobe e sai, e o que gruda é
	   apenas a faixa da marca. O z-index de 70 já vinha de cima. */
	.cabecalho { position: sticky; top: 0; }

	/* Âncora dentro da página não pode parar embaixo da faixa grudada. */
	html { scroll-padding-top: 5.5rem; }

	.cabecalho__grade { column-gap: .85rem; }
	.marca { grid-row: 1 / 2; }
	.cabecalho__topo { padding-block: .7rem; gap: .75rem; }
	.marca__emblema { width: 60px; height: 60px; }
	.marca__nome { font-size: 1.25rem; }
	.marca__descricao { font-size: .6875rem; line-height: 1.3; }

	.cabecalho__cta { display: none; }
	.menu-alternar { display: inline-flex; }

	/* A gaveta sai do fluxo; a faixa que a abrigava não pode sobrar. */
	.cabecalho__nav-barra { border-top: 0; }

	/* menu vira gaveta lateral */
	.navegacao {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 80;
		width: min(340px, 86vw);
		height: 100dvh;
		margin: 0;
		padding: 5rem 1.25rem 2rem;
		background: var(--papel);
		box-shadow: var(--sombra-alta);
		overflow-y: auto;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 220ms ease, visibility 220ms ease;
	}
	.navegacao.aberto { transform: none; visibility: visible; }

	/* Cabe no respiro que a gaveta já reservava no topo. Sem ele a única saída
	   era a faixa estreita da cortina, que ninguém adivinha que fecha — e Esc,
	   que no celular não existe. */
	.navegacao__fechar {
		position: absolute;
		top: 1.15rem;
		right: 1.25rem;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid var(--linha-fina);
		border-radius: var(--raio-pequeno);
		background: #fff;
		color: var(--tinta);
		cursor: pointer;
	}
	.navegacao__fechar .icone { width: 1.35rem; height: 1.35rem; }

	.navegacao__lista { display: block; }
	.navegacao__lista > li { border-bottom: 1px solid var(--linha-fina); }
	.navegacao__lista > li > a {
		padding: .85rem .25rem;
		font-size: 1.0625rem;
		border-radius: 0;
	}
	.navegacao__lista > li.current-menu-item > a { box-shadow: none; }

	.navegacao__lista .menu-item-has-children { position: relative; }
	.submenu-alternar {
		position: absolute;
		top: .35rem;
		right: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border: 1px solid var(--linha-fina);
		border-radius: var(--raio-pequeno);
		background: var(--papel);
		color: var(--tinta);
		cursor: pointer;
	}
	.submenu-alternar .icone { transition: transform var(--transicao); }
	.submenu-aberto > .submenu-alternar .icone { transform: rotate(180deg); }

	.navegacao__lista .sub-menu {
		position: static;
		display: none;
		min-width: 0;
		margin: 0 0 .5rem;
		padding: 0 0 0 .75rem;
		border: 0;
		border-left: 2px solid var(--verde-100);
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	.navegacao__lista .submenu-aberto > .sub-menu { display: block; }

	.navegacao__extra {
		display: flex;
		flex-direction: column;
		gap: .5rem;
		margin-top: 1.5rem;
	}
	.navegacao__extra .botao { width: 100%; padding-block: .85rem; }
	.navegacao__contato {
		display: inline-flex;
		align-items: center;
		gap: .6rem;
		padding: .75rem .9rem;
		border-radius: var(--raio-pequeno);
		background: var(--verde-050);
		color: var(--verde);
		font-weight: 600;
		font-size: .9375rem;
		text-decoration: none;
	}
	.navegacao__contato:hover { background: var(--verde-100); }

	.pagina__grade,
	.artigo__grade { grid-template-columns: minmax(0, 1fr); }

	.contato__grade { grid-template-columns: minmax(0, 1fr); }
	.mapa { position: static; }
	.mapa__moldura { aspect-ratio: 16 / 10; }

	.lateral { position: static; }
	.lateral__bloco { max-width: none; }

	.diretorio__topo { grid-template-columns: minmax(0, 1fr); }

	/* Em coluna única a lateral cairia entre a introdução e a busca, e quem
	   chega aqui veio procurar profissional. Os mesmos destinos estão no menu,
	   então some sem deixar falta. */
	.diretorio__topo .lateral { display: none; }

	.pilares { grid-template-columns: 1fr; }
	.formacao { grid-template-columns: 1fr; }

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

@media (max-width: 640px) {
	.abertura { padding-block: 3rem 4.5rem; }
	.abertura__fundo::after {
		background: linear-gradient(180deg, rgba(5, 55, 47, .94) 0%, rgba(5, 55, 47, .88) 60%, rgba(5, 55, 47, .82) 100%);
	}
	.abertura__acoes .botao { width: 100%; }

	.banner { padding-block: 2.75rem 7.5rem; }
	.banner__fundo::after {
		background: linear-gradient(180deg, rgba(5, 55, 47, .94) 0%, rgba(5, 55, 47, .88) 60%, rgba(5, 55, 47, .84) 100%);
	}
	.banners--unico .banner { padding-bottom: 4rem; }
	.banners__barra { padding-bottom: 4.5rem; }

	/* Banner da equipe no celular. A foto é de 2,7:1 e as pessoas ocupam só a
	   metade direita; atrás de um texto vertical, o corte lateral sobrava uma
	   fatia do meio e engolia o grupo. Aqui ela sai de trás do texto e ganha
	   uma faixa própria no alto — deitada, é onde cabem os quatro rostos — com
	   o texto abaixo, sobre o bege da casa. */
	.banner--claro {
		display: block;
		padding-block: 0 7.5rem;
		background: var(--ouro-050);
	}
	.banner--claro .banner__fundo {
		position: relative;
		inset: auto;
		z-index: 0;
		aspect-ratio: 16 / 9;
	}
	.banner--claro .banner__fundo::after { display: none; }
	/* Vence o object-position que o PHP escreve no atributo style. */
	.banner--claro .banner__fundo img { object-position: 84% 28% !important; }
	.banner--claro .banner__interno { padding-top: 1.75rem; }
	.banner--claro .abertura__titulo { text-shadow: none; }
	.banners__ponto { width: 22px; }
	.banners__ponto--ativo { width: 38px; }
	.banners__botao { width: 38px; height: 38px; }

	.atalhos { margin-top: -2.5rem; }
	.atalhos__grade { grid-template-columns: 1fr; }
	.atalho { padding-bottom: 1.35rem; }
	.atalho__seta { position: static; margin-top: .5rem; }

	.numeros__grade { grid-template-columns: 1fr; }

	.secao__topo { flex-direction: column; align-items: flex-start; gap: .75rem; }
	.secao__titulo { max-width: none; }

	.chamada__interno { flex-direction: column; align-items: flex-start; }
	/* Empilhados e em largura cheia: dividindo a linha, "Solicitar associação"
	   e o telefone quebravam em duas linhas cada um. */
	.chamada__acoes { width: 100%; flex-direction: column; }
	.chamada__acoes .botao { width: 100%; justify-content: center; }

	.curso-parceria { grid-template-columns: 1fr; gap: 1.25rem; }
	.curso-parceria__marca img { width: 160px; }

	.linha__imagem { width: 68px; height: 56px; }

	.ficha__secao { padding: 1.25rem 1.25rem .25rem; }
	/* O rótulo sai da tela, mas não da árvore de acessibilidade: com
	   display:none o botão ficaria sem nome para o leitor de tela. */
	.ficha__passo-rotulo {
		position: absolute;
		width: 1px; height: 1px;
		padding: 0; margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.ficha__trilha-item { flex: 0 0 auto; }
	/* Só o círculo na tela, mas com 44px de área de toque. */
	.ficha__passo { width: auto; padding: .75rem; }
	.ficha__navegacao .botao { flex: 1; justify-content: center; }
	.ficha .portal__grade { grid-template-columns: repeat(2, 1fr); }
	.ficha .portal__grade > .campo,
	.ficha .portal__grade > .campo--medio,
	.ficha .portal__grade > .campo--largo { grid-column: span 2; }
	.ficha .portal__grade > .campo--curto,
	.ficha .portal__grade > .campo--minimo { grid-column: span 1; }

	.portal__cartao { padding: 1.25rem; }
	.portal__topo { align-items: flex-start; }

	/* Em duas linhas a cápsula vira um comprimido esticado: com a tela estreita
	   a etiqueta ganha o mesmo canto do resto da interface. */
	.situacao__selo--solto { border-radius: var(--raio); }
	.portal__acoes .botao { width: 100%; justify-content: center; }

	.busca { flex-direction: column; }
	.busca__enviar { width: 100%; }

	/* Espaço curto demais para três serviços: fica o telefone e o portal.
	   O seletor repete a classe do pai para vencer .barra-servicos__links a. */
	.barra-servicos__links .barra-servicos__email { display: none; }

	.rodape__grade { grid-template-columns: 1fr; }
	.rodape__base-interno { justify-content: center; text-align: center; }

	.post-navigation .nav-next { text-align: left; }
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* ---------- impressão ---------- */
@media print {
	.barra-servicos,
	.cabecalho__acoes,
	.navegacao,
	.atalhos,
	.chamada,
	.lateral,
	.rodape__base,
	.post-navigation { display: none !important; }

	.faixa-titulo { background: none; color: #000; }
	.faixa-titulo__texto, .faixa-titulo__secao { color: #000; }
	.abertura { background: none; color: #000; padding-block: 1rem; }
	.abertura__fundo { display: none; }
	.abertura__titulo, .abertura__texto { color: #000; }
	body { font-size: 11pt; }
}

/* Na página do certificado o site inteiro some: sai só o documento, deitado,
   sem cabeçalho de navegador disputando espaço com ele. */
@media print {
	/*
	 * Some de verdade, com display. Escondido por visibility o elemento
	 * continua ocupando altura, e o site inteiro — cabeçalho, saudação e
	 * rodapé — empurrava o certificado para uma segunda folha em branco.
	 */
	body.pagina-certificado > * { display: none !important; }
	body.pagina-certificado > .conteudo { display: block !important; }
	/* Dentro do main ainda vive a faixa de título, com o nome da página e o
	   caminho de navegação. No papel ela não é o documento. */
	body.pagina-certificado .conteudo > *:not(.secao-interna) { display: none !important; }
	body.pagina-certificado .portal > * { display: none !important; }
	body.pagina-certificado .portal > .certificado { display: block !important; }

	body.pagina-certificado .conteudo,
	body.pagina-certificado .secao-interna,
	body.pagina-certificado .portal,
	body.pagina-certificado .certificado {
		margin: 0 !important;
		padding: 0 !important;
	}

	/* A carteirinha segue a mesma receita; o tamanho da folha de cada
	   documento é declarado na própria tela, porque @page vale para o
	   documento inteiro e não se prende a uma classe do corpo. */
	body.pagina-carteirinha > * { display: none !important; }
	body.pagina-carteirinha > .conteudo { display: block !important; }
	/* Dentro do main ainda vive a faixa de título, com o nome da página e o
	   caminho de navegação. No papel ela não é o documento. */
	body.pagina-carteirinha .conteudo > *:not(.secao-interna) { display: none !important; }
	body.pagina-carteirinha .portal > * { display: none !important; }
	body.pagina-carteirinha .portal > .carteirinha { display: block !important; }

	body.pagina-carteirinha .conteudo,
	body.pagina-carteirinha .secao-interna,
	body.pagina-carteirinha .portal,
	body.pagina-carteirinha .carteirinha,
	body.pagina-carteirinha .anqpic3-cartoes {
		margin: 0 !important;
		padding: 0 !important;
	}
	body.pagina-certificado .certificado__folha {
		max-width: none;
		border-width: 3px;
		border-radius: 0;
	}
	.portal__topo--sem-impressao { display: none !important; }
}

/* Materiais: fundo contínuo e conteúdo responsivo, sem alterar a altura do carrossel. */
.banner--materiais { background: #03392f; }
.banner--materiais .banner__fundo::after { display: none; }
.banner--materiais .banner__fundo img { object-position: right center; }
.banner__materiais-conteudo > * { max-width: 52%; }
.banner__materiais-conteudo .abertura__titulo { font-size: clamp(2rem, 3.2vw, 3rem); }
.banner__materiais-conteudo .abertura__texto { max-width: 48%; }
.banner__materiais-conteudo .botao { margin-top: 1.5rem; }
@media (max-width: 1100px) {
 .banner--materiais .banner__fundo::after { display: block; background: linear-gradient(90deg, rgba(3,57,47,.98), rgba(3,57,47,.8) 55%, rgba(3,57,47,.25)); }
}
@media (max-width: 700px) {
 .banner--materiais { display: block; padding-top: 240px; }
 .banner--materiais .banner__fundo { display: block; inset: 0 0 auto; height: 220px; }
 .banner--materiais .banner__fundo img { object-fit: cover; object-position: right center; }
 .banner--materiais .banner__fundo::after { display: none; }
 .banner__materiais-conteudo > *, .banner__materiais-conteudo .abertura__texto { max-width: 100%; }
}

/* Cursos: imagem de formação com texto e ação independentes. */
.banner--cursos .banner__fundo::after { background: linear-gradient(90deg, rgba(250,246,237,.9), rgba(250,246,237,.65) 42%, transparent 65%); }
.banner--cursos .banner__interno > * { max-width: 48%; }
.banner--cursos .abertura__titulo { font-size: clamp(2rem, 3.2vw, 3rem); }
.banner__cta { margin-top: 1.5rem; }
@media (max-width: 1100px) {
 .banner--cursos .banner__fundo::after { background: linear-gradient(90deg, rgba(250,246,237,.98), rgba(250,246,237,.85) 55%, transparent); }
}
@media (max-width: 700px) {
 .banner--cursos { display: block; padding-top: 240px; }
 .banner--cursos .banner__fundo { inset: 0 0 auto; height: 220px; }
 .banner--cursos .banner__fundo::after { display: none; }
 .banner--cursos .banner__interno > * { max-width: 100%; }
}

.banner--cursos { background: #f5f0e7; }
.banner--cursos .banner__interno { padding-top: 0; }

@media (max-width: 700px) {
 .banner--cursos .banner__fundo { position: absolute; aspect-ratio: auto; }
 .banner--cursos .banner__fundo img { object-position: right center !important; }
}