/*
 Theme Name:   Forma Concreto
 Theme URI:    https://formaconcreto.com/
 Description:  Tema filho do GeneratePress para o site institucional da Forma Concreto.
 Author:       Forma Concreto
 Author URI:   https://formaconcreto.com/
 Template:     generatepress
 Version:      1.6.0
 Text Domain:  forma-concreto
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
*/

/* =====================================================================
   FONTES — hospedadas localmente em fonts/, subsets latin + latin-ext
   ===================================================================== */

@font-face {
	font-family: "Anton";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/anton-v27-latin_latin-ext-regular.woff2") format("woff2");
}

@font-face {
	font-family: "IBM Plex Serif";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/ibm-plex-serif-v20-latin_latin-ext-regular.woff2") format("woff2");
}

@font-face {
	font-family: "IBM Plex Serif";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/ibm-plex-serif-v20-latin_latin-ext-italic.woff2") format("woff2");
}

@font-face {
	font-family: "IBM Plex Serif";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("fonts/ibm-plex-serif-v20-latin_latin-ext-600.woff2") format("woff2");
}

@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/ibm-plex-sans-v23-latin_latin-ext-regular.woff2") format("woff2");
}

/* O peso 500 da IBM Plex Sans foi retirado: um único seletor o usava e o
   arquivo custava 35 KB e uma requisição. A interface usa 400 e 600. */

@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("fonts/ibm-plex-sans-v23-latin_latin-ext-600.woff2") format("woff2");
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/ibm-plex-mono-v20-latin_latin-ext-regular.woff2") format("woff2");
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/ibm-plex-mono-v20-latin_latin-ext-italic.woff2") format("woff2");
}

/* =====================================================================
   PALETA
   O vermelho tem um único significado no site inteiro: o erro.
   ===================================================================== */

:root {
	--fc-tinta: #101418;       /* texto principal; 16,66:1 sobre o papel */
	--fc-estrutura: #18232c;   /* cenas escuras; 14,38:1 com o papel */
	--fc-aco: #40515c;         /* texto secundário; 7,42:1 sobre o papel */
	--fc-meta: #56656e;        /* metadados; 5,43:1 sobre o papel */
	/* EXCLUSIVAMENTE bordas, juntas e controles: 3,40:1 sobre o papel.
	   Nunca usar --fc-junta como cor de texto, nem mesmo em legenda. */
	--fc-junta: #7a858b;
	--fc-concreto: #d6d8d5;    /* fundo externo; 12,90:1 com a tinta */
	--fc-superficie: #f4f3ef;  /* papel do laudo */
	--fc-codigo: #e9ece9;      /* fundo de código; 15,54:1 com a tinta */
	/* Reprovação somente sobre --fc-superficie: 4,68:1. Nunca aplicar
	   vermelho diretamente sobre fundos escuros ou sobre --fc-concreto. */
	--fc-lapis: #dc0000;
	--fc-hairline: rgba(122, 133, 139, 0.45);
	--fc-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
	--fc-sans: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
	--fc-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
	--fc-poster: "Anton", "Arial Narrow", "Segoe UI", sans-serif;
}

/* =====================================================================
   BASE
   ===================================================================== */

body {
	background-color: var(--fc-concreto);
	color: var(--fc-tinta);
	font-family: var(--fc-sans);
	font-size: 18px;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
}

/* A página longa é o anexo técnico do laudo; somente sua prosa pede a
   cadência serifada. Interface, títulos e dados mantêm suas próprias vozes.

   A classe vem do filtro `body_class` em functions.php, ancorada no slug da
   página. Um seletor por ID (`body.page-id-14`) funcionaria hoje e falharia em
   silêncio se as páginas fossem recriadas em produção em vez de importadas com
   o banco: o ID mudaria, a serifada sumiria e nada acusaria o erro. */
body.fc-anexo-tecnico {
	font-family: var(--fc-serif);
}

::selection {
	background-color: var(--fc-estrutura);
	color: var(--fc-superficie);
}

a {
	color: var(--fc-estrutura);
	text-underline-offset: 0.15em;
	transition: color 0.15s ease;
}

a:hover,
a:focus {
	color: var(--fc-tinta);
}

a:focus-visible {
	outline: 2px solid var(--fc-aco);
	outline-offset: 2px;
}

/* Sobre as superfícies escuras o anel em aço fica em 2,25:1 contra o fundo,
   abaixo do mínimo de 3:1 para indicadores de foco. Nelas o anel é claro. */
.site-header a:focus-visible,
.main-navigation a:focus-visible,
.main-navigation button:focus-visible,
.fc-cartela a:focus-visible,
.fc-destaque a:focus-visible,
.site-footer a:focus-visible {
	outline-color: var(--fc-concreto);
}

/* =====================================================================
   CABEÇALHO — barra escura, lâmina vermelha no topo
   ===================================================================== */

.site-header {
	background-color: var(--fc-tinta);
}

/* A fonte precisa estar no `.main-title` e não só no link interno: o elemento
   que o envolve herdava a serifada em peso 700, o que fazia o navegador baixar
   a IBM Plex Serif 600 (28 KB) para um texto que é exibido em sem serifa. */
.site-header .main-title,
.site-header .main-title a,
.site-header .main-title a:hover {
	color: var(--fc-concreto);
	font-family: var(--fc-sans);
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.site-header .site-description {
	display: none;
}

.main-navigation,
.main-navigation .main-nav ul li a,
.menu-toggle {
	background-color: var(--fc-tinta);
	color: var(--fc-concreto);
	font-family: var(--fc-mono);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
}

.main-navigation .main-nav ul li a {
	opacity: 0.85;
	border-bottom: 1px solid transparent;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li a:focus,
.main-navigation .main-nav ul li[class*="current-menu-"] a {
	opacity: 1;
	color: var(--fc-concreto);
}

.main-navigation .main-nav ul li[class*="current-menu-"] a {
	border-bottom-color: var(--fc-superficie);
}

.main-navigation .menu-toggle,
.main-navigation.toggled .main-nav ul li a {
	color: var(--fc-concreto);
}

/* =====================================================================
   ÁREA DE CONTEÚDO — papel de leitura sobre o concreto
   ===================================================================== */

/* A folha cresce até 1360px, preservando 32px de concreto em cada lado no
   desktop. A coluna interna continua independente da largura do documento. */
.site.grid-container {
	width: calc(100% - 64px);
	max-width: 1360px;
}

.separate-containers .inside-article,
.separate-containers .page-header,
.one-container .container {
	background-color: var(--fc-superficie);
	border: 1px solid rgba(122, 140, 152, 0.35);
}

/* O padding lateral do artigo vem das configurações de espaçamento do
   GeneratePress (40px / 30px no celular). Mantê-lo lá — e não aqui — faz com
   que a matemática de margem negativa do `alignfull` do tema continue exata,
   permitindo que a cartela sangre até a borda da folha. */

/* Em layout sem barra lateral, o GeneratePress estica `alignfull` até 100vw.
   Como 100vw inclui a largura da barra de rolagem, isso gera alguns pixels de
   overflow horizontal. Aqui o bloco sangra apenas até a borda da folha, que é
   o efeito desejado para a cartela e não produz rolagem lateral. */
.no-sidebar .entry-content .alignfull {
	margin-left: -40px;
	margin-right: -40px;
	max-width: calc(100% + 80px);
	width: auto;
}

/* Coluna de leitura: 76ch após leitura contínua do estudo em 80ch. A redução
   encurta o retorno ocular sem devolver a sensação de coluna estreita. */
.entry-content > *:not(.alignwide):not(.alignfull) {
	max-width: 76ch;
	margin-left: auto;
	margin-right: auto;
}

.entry-header {
	max-width: 76ch;
	margin-left: auto;
	margin-right: auto;
}

/* =====================================================================
   TIPOGRAFIA
   ===================================================================== */

h1.entry-title,
h1.page-title {
	font-family: var(--fc-poster);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	font-size: clamp(2rem, 5vw, 2.9rem);
	line-height: 1.1;
	color: var(--fc-estrutura);
	margin-bottom: 1.6rem;
}

h2, h3, h4 {
	font-family: var(--fc-sans);
	color: var(--fc-estrutura);
	line-height: 1.25;
}

.entry-content h2 {
	font-size: 1.5rem;
	font-weight: 600;
	margin-top: 3.4rem;
	margin-bottom: 1.1rem;
	padding-top: 2.6rem;
	border-top: 1px solid var(--fc-hairline);
}

.entry-content h3 {
	font-size: 1.08rem;
	font-weight: 600;
	margin-top: 2.2rem;
	margin-bottom: 0.6rem;
}

.entry-content p {
	margin-bottom: 1.4rem;
}

/* Numeral de capítulo: parágrafo com a classe fc-cap-num antes de uma seção */
.fc-cap-num {
	font-family: var(--fc-mono);
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--fc-meta);
	margin-bottom: 0.9rem;
}

/* =====================================================================
   CARTELA — abertura escura da home (grupo alignfull com .fc-cartela)
   ===================================================================== */

.fc-cartela {
	position: relative;
	background-color: var(--fc-superficie);
	color: var(--fc-tinta);
	border-top: 1px solid var(--fc-junta);
	border-bottom: 1px solid var(--fc-junta);
	padding: 5rem 3rem 4.5rem;
	overflow: hidden;
}

/* Linha de conferência da folha: neutra, porque inspecionar não é reprovar. */
.fc-cartela::before {
	content: "";
	position: absolute;
	top: 1.25rem;
	bottom: 1.25rem;
	left: 1.25rem;
	border-left: 1px solid var(--fc-junta);
	pointer-events: none;
}

.fc-cartela h1,
.fc-cartela .fc-poster {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(12rem, 0.75fr);
	column-gap: 3rem;
	align-items: end;
	font-family: var(--fc-poster);
	font-weight: 400;
	text-transform: uppercase;
	font-size: clamp(2.4rem, 6.5vw, 4.6rem);
	line-height: 0.98;
	letter-spacing: 0.01em;
	color: var(--fc-tinta);
	max-width: 22ch;
	margin: 0 auto;
}

.fc-chamada-afirmacao,
.fc-chamada-revisao {
	grid-column: 1;
}

.fc-chamada-afirmacao {
	grid-row: 1;
}

.fc-chamada-revisao {
	grid-row: 2;
	color: var(--fc-aco);
	font-size: 0.58em;
	margin-top: 1.25rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--fc-junta);
}

/* A cor nunca é a única pista: a nota muda de família, peso e posição,
	ganha a marca × e uma regra própria. Em escala de cinza continua distinta. */
.fc-anota-margem {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: end;
	color: var(--fc-lapis);
	font-family: var(--fc-mono);
	font-size: 0.44em;
	font-weight: 600;
	line-height: 1.08;
	padding: 1.1rem 0 1.1rem 1.25rem;
	border-left: 3px solid var(--fc-lapis);
}

.fc-anota-margem::before {
	content: "\00d7";
	display: block;
	font-size: 0.9em;
	line-height: 1;
	margin-bottom: 0.35em;
}

/* O carimbo: sob o mouse, o × cresce e tomba — o gesto de reprovar, feito
   na hora. Só em aparelho com ponteiro e onde o sistema não pede menos
   movimento; nos demais, a anotação fica parada, como sempre foi. É a
   única transição de transform do site — exceção registrada na seção
   MOVIMENTO. Cresce a partir da base esquerda, para o espaço vazio acima
   da anotação, dentro do overflow contido da cartela. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.fc-anota-margem::before {
		transition: transform 0.18s ease;
		transform-origin: left bottom;
	}

	.fc-anota-margem:hover::before {
		transform: scale(2.6) rotate(-8deg);
	}
}

.fc-cartela .fc-sub {
	font-family: var(--fc-mono);
	font-size: 1rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fc-meta);
	margin: 2.2rem auto 0;
}

.fc-cartela > * {
	max-width: 70ch;
	margin-left: auto;
	margin-right: auto;
}

/* =====================================================================
   SEMÂNTICA DO LAUDO — aparência determinada pelo significado
   ===================================================================== */

/* Dado que sustenta um achado. Nem todo número é uma medição decisiva. */
.fc-medicao {
	font-family: var(--fc-mono);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--fc-tinta);
}

/* Em prosa, o próprio enunciado é a pista redundante: a reprovação herda a
   família e o tamanho da frase, mudando somente cor e peso. */
.fc-reprova {
	color: var(--fc-lapis);
	font-weight: 600;
}

.fc-reprova::before {
	content: none;
}

/* Em tabela, o rótulo já fornece o contexto semântico. A linha pode reforçar
   o veredito por cor e peso, mas nunca recebe glifo: × junto de um número
   seria lido como operador matemático. A medição permanece em tinta normal. */
.entry-content .wp-block-table tr.fc-reprova {
	font-size: inherit;
	font-weight: 600;
}

.entry-content .wp-block-table tr.fc-reprova::before {
	content: none;
}

/* Dentro de uma cartela escura, a etiqueta ganha papel próprio: nunca há
   vermelho diretamente sobre o fundo escuro. box-decoration-break preserva
   a etiqueta quando uma frase inline ocupa duas linhas. */
.fc-destaque .fc-reprova {
	background-color: var(--fc-superficie);
	padding: 0.08em 0.28em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Achado não é um H2 decorado: é uma não conformidade numerada no documento. */
.entry-content h2.fc-achado {
	display: block;
	font-family: var(--fc-poster);
	font-size: clamp(1.65rem, 3.7vw, 2.35rem);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--fc-lapis);
	border-top-color: var(--fc-lapis);
}

.fc-veredito {
	display: block;
	margin: 2rem 0;
	padding: 0.9rem 1rem;
	border-left: 3px solid var(--fc-estrutura);
	font-family: var(--fc-poster);
	font-size: clamp(1.2rem, 2.6vw, 1.7rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--fc-estrutura);
}

.fc-veredito.fc-reprova {
	border-left-color: var(--fc-lapis);
	font-family: var(--fc-poster);
	font-size: clamp(1.2rem, 2.6vw, 1.7rem);
	font-weight: 400;
	color: var(--fc-lapis);
}

/* O × é gesto isolado de revisão, não prefixo da classe: aparece somente no
   veredito destacado. A nota de margem conserva sua regra própria acima. */
.fc-veredito.fc-reprova::before {
	content: "\00d7\00a0";
}

.fc-destaque .fc-veredito.fc-reprova {
	padding: 0.9rem 1rem;
}

.fc-ressalva {
	margin-top: 3rem;
	margin-bottom: 3rem;
	padding: 1.7rem 2rem;
	background-color: var(--fc-codigo);
	border-left: 3px solid var(--fc-aco);
}

.entry-content .fc-ressalva > h2 {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
	font-family: var(--fc-mono);
	font-size: 0.9rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.fc-forma-conceito {
	margin-top: 2.5rem;
	margin-bottom: 2.5rem;
	padding: 2rem 2.2rem;
	background-color: var(--fc-codigo);
	border-left: 4px solid var(--fc-estrutura);
}

.fc-forma-conceito > :last-child,
.fc-ressalva > :last-child {
	margin-bottom: 0;
}

.fc-protocolo {
	counter-reset: fc-etapa;
	margin-top: 3.5rem;
	padding-top: 1.5rem;
	border-top: 2px solid var(--fc-estrutura);
}

.entry-content .fc-protocolo > h2 {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
	font-family: var(--fc-poster);
	font-size: clamp(1.7rem, 3.5vw, 2.25rem);
	font-weight: 400;
	line-height: 1.08;
	text-transform: uppercase;
}

.entry-content .fc-protocolo > .fc-etapa {
	counter-increment: fc-etapa;
	display: grid;
	grid-template-columns: 3.4rem minmax(0, 1fr);
	gap: 0.9rem;
	align-items: baseline;
	font-family: var(--fc-mono);
	font-size: 0.9rem;
	line-height: 1.35;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.entry-content .fc-protocolo > .fc-etapa::before {
	content: counter(fc-etapa, decimal-leading-zero);
	color: var(--fc-meta);
	border-right: 1px solid var(--fc-junta);
}

.entry-content .fc-protocolo > .fc-etapa + p {
	margin-left: 4.3rem;
}

/* =====================================================================
   CHAMADAS — links de texto com seta, sem botão
   ===================================================================== */

/* A seta é conteúdo, não ícone: vive no texto e apenas recebe cor mais
   discreta que o link que a acompanha. */
.fc-chamada {
	font-family: var(--fc-sans);
	color: var(--fc-aco);
}

.fc-chamada a,
a.fc-chamada {
	font-family: var(--fc-sans);
	font-weight: 600;
	text-decoration: none;
	color: var(--fc-estrutura);
	border-bottom: 1px solid var(--fc-junta);
	padding-bottom: 0.12rem;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.fc-chamada a:hover,
.fc-chamada a:focus,
a.fc-chamada:hover,
a.fc-chamada:focus {
	border-bottom-color: var(--fc-estrutura);
}

/* =====================================================================
   DESTAQUE — o cartaz dentro do filme (grupo com .fc-destaque)
   ===================================================================== */

.fc-destaque {
	background-color: var(--fc-estrutura);
	color: var(--fc-concreto);
	padding: 2.6rem 2.4rem;
	margin-top: 3.2rem;
	margin-bottom: 3.2rem;
	position: relative;
}

.fc-destaque::before {
	content: "";
	position: absolute;
	inset: 0.6rem;
	border: 1px solid rgba(216, 221, 225, 0.25);
	pointer-events: none;
}

.fc-destaque .fc-rotulo {
	font-family: var(--fc-mono);
	font-size: 0.85rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--fc-concreto);
	margin-bottom: 1rem;
}

.fc-destaque h2,
.fc-destaque h3 {
	color: #ffffff;
	border: none;
	padding-top: 0;
	margin-top: 0;
	font-size: 1.15rem;
}

.fc-destaque p {
	color: var(--fc-concreto);
}

.fc-destaque .fc-chamada a,
.fc-destaque a.fc-chamada {
	color: #ffffff;
	border-bottom-color: rgba(216, 221, 225, 0.5);
}

.fc-destaque .fc-chamada a:hover,
.fc-destaque a.fc-chamada:hover {
	border-bottom-color: #ffffff;
}

/* =====================================================================
   TABELAS — hairlines finas, números tabulares
   ===================================================================== */

.entry-content .wp-block-table {
	overflow-x: auto;
}

/* A tabela recebe tabindex para poder rolar pelo teclado; sendo focável,
   precisa mostrar o foco como qualquer outro elemento da ordem de tabulação. */
.entry-content .wp-block-table:focus-visible {
	outline: 2px solid var(--fc-aco);
	outline-offset: 4px;
}

.entry-content table {
	border-collapse: collapse;
	width: 100%;
	font-family: var(--fc-mono);
	font-size: 0.88rem;
	font-variant-numeric: tabular-nums;
	border: none;
}

.entry-content table th {
	font-family: var(--fc-mono);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fc-meta);
	text-align: left;
	padding: 0.55rem 0.9rem;
	border: none;
	border-bottom: 1px solid var(--fc-junta);
}

.entry-content table td {
	padding: 0.55rem 0.9rem;
	border: none;
	border-bottom: 1px solid rgba(122, 140, 152, 0.3);
}

.entry-content table tbody tr {
	transition: background-color 0.15s ease;
}

.entry-content table tbody tr:hover {
	background-color: rgba(122, 140, 152, 0.08);
}

.entry-content table .has-text-align-right,
.entry-content table td[data-align="right"] {
	font-variant-numeric: tabular-nums;
}

.entry-content figcaption {
	font-family: var(--fc-mono);
	font-size: 0.82rem;
	color: var(--fc-meta);
	text-align: left;
}

/* =====================================================================
   CÓDIGO — destaque leve, sem biblioteca
   ===================================================================== */

.entry-content pre,
.entry-content .wp-block-code {
	background-color: var(--fc-codigo);
	border: 1px solid rgba(122, 140, 152, 0.35);
	border-left: 2px solid var(--fc-junta);
	border-radius: 0;
	padding: 1.3rem 1.5rem;
	overflow-x: auto;
	line-height: 1.65;
}

.entry-content code {
	font-family: var(--fc-mono);
	font-size: 0.86rem;
	color: var(--fc-tinta);
	background: none;
}

.entry-content p code,
.entry-content li code {
	background-color: var(--fc-codigo);
	border: 1px solid rgba(122, 140, 152, 0.3);
	padding: 0.08rem 0.35rem;
	font-size: 0.84em;
}

/* Sintaxe: só tons da paleta */
.tk-k { color: var(--fc-estrutura); font-weight: 600; }
.tk-s { color: var(--fc-aco); }
.tk-c { color: var(--fc-meta); font-style: italic; }
.tk-n { color: var(--fc-aco); }

/* =====================================================================
   FORMULÁRIO DE CONTATO
   ===================================================================== */

/* Especificidade acima de `.entry-content p`: os campos do CF7 são <p class=
   "fc-campo"> dentro do conteúdo, então a regra de parágrafo vencia um `.fc-campo`
   sozinho — nem o espaçamento antigo pegava. `.wpcf7 .fc-campo` assume o controle. */
.wpcf7 .fc-campo {
	margin-bottom: 1.1rem;
}

.fc-campo label {
	display: block;
	font-family: var(--fc-mono);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--fc-estrutura);
	margin-bottom: 0.3rem;
}

.fc-campo .fc-opcional {
	font-weight: 400;
	color: var(--fc-meta);
}

.fc-campo input[type="text"],
.fc-campo input[type="email"],
.fc-campo textarea {
	width: 100%;
	font-family: var(--fc-sans);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--fc-tinta);
	background-color: #ffffff;
	border: 1px solid var(--fc-junta);
	border-radius: 0;
	padding: 0.7rem 0.9rem;
	/* Só a borda transiciona; o anel de foco (outline) aparece imediato,
	   porque feedback de foco não espera. */
	transition: border-color 0.15s ease;
}

.fc-campo input[type="text"]:focus,
.fc-campo input[type="email"]:focus,
.fc-campo textarea:focus {
	border-color: var(--fc-estrutura);
	outline: 2px solid var(--fc-aco);
	outline-offset: 1px;
}

.fc-campo textarea {
	/* height explícito porque o CF7 fixa ~10 linhas pelo atributo rows, o que
	   empurrava o botão Enviar para bem longe da dobra. ~6 linhas já bastam para
	   começar, e resize: vertical deixa quem quiser descrever mais aumentar. */
	height: 9rem;
	min-height: 7rem;
	resize: vertical;
}

/* Na página de contato, aproxima o título do formulário. A página é operada, não
   lida de cima a baixo, e o botão Enviar precisa ficar mais perto da dobra. */
.fc-contato .entry-content {
	margin-top: 1.4rem;
}

.fc-contato .entry-title {
	margin-bottom: 0.9rem;
}

/* Aperta o espaçamento entre os dois parágrafos de introdução, só no contato. */
.fc-contato .entry-content > p {
	margin-bottom: 0.8rem;
}

.wpcf7 input[type="submit"] {
	font-family: var(--fc-sans);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fc-concreto);
	background-color: var(--fc-estrutura);
	border: 1px solid var(--fc-estrutura);
	border-radius: 0;
	padding: 0.85rem 2.4rem;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 input[type="submit"]:focus {
	background-color: var(--fc-tinta);
	border-color: var(--fc-tinta);
}

/* Armadilha para robôs: fora da tela, escondida de leitores de tela e do
   tabulador. Um envio que a preencha é descartado como spam. */
.fc-armadilha {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Mensagens do Contact Form 7 na linguagem visual do site */
.wpcf7 form .wpcf7-response-output {
	font-family: var(--fc-sans);
	font-size: 0.92rem;
	border: 1px solid var(--fc-junta);
	border-left: 3px solid var(--fc-aco);
	border-radius: 0;
	margin: 1.6rem 0 0;
	padding: 0.9rem 1.1rem;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-left-color: var(--fc-estrutura);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
	border-left-color: var(--fc-lapis);
}

.wpcf7-not-valid-tip {
	font-family: var(--fc-sans);
	font-size: 0.85rem;
	color: var(--fc-lapis);
	margin-top: 0.35rem;
}

.wpcf7 .wpcf7-spinner {
	background-color: var(--fc-junta);
}

/* =====================================================================
   RODAPÉ — créditos finais
   ===================================================================== */

.site-footer {
	background-color: var(--fc-tinta);
}

.site-info {
	background-color: var(--fc-tinta);
	color: var(--fc-concreto);
	text-align: center;
	padding: 3.2rem 1.5rem;
}

.fc-creditos .fc-nome {
	font-family: var(--fc-poster);
	font-size: 1.3rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	margin-bottom: 0.8rem;
}

.fc-creditos .fc-tagline {
	font-family: var(--fc-mono);
	color: var(--fc-concreto);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 0.75rem;
	margin-bottom: 1.3rem;
}

.fc-creditos .fc-linha {
	font-family: var(--fc-mono);
	font-size: 0.85rem;
}

.fc-creditos a {
	color: var(--fc-concreto);
	text-decoration: none;
	border-bottom: 1px solid rgba(216, 221, 225, 0.4);
	transition: color 0.15s ease, border-color 0.15s ease;
}

.fc-creditos a:hover,
.fc-creditos a:focus {
	color: #ffffff;
	border-bottom-color: #ffffff;
}

/* =====================================================================
   RESPONSIVO
   ===================================================================== */

@media (max-width: 768px) {
	.site.grid-container {
		width: 100%;
		max-width: none;
	}

	/* O padding lateral do artigo cai para 30px no celular; a sangria acompanha. */
	.no-sidebar .entry-content .alignfull {
		margin-left: -30px;
		margin-right: -30px;
		max-width: calc(100% + 60px);
	}

	.fc-cartela {
		padding: 3rem 2rem;
	}

	.fc-cartela::before {
		top: 0.75rem;
		bottom: 0.75rem;
		left: 0.75rem;
	}

	.fc-cartela h1,
	.fc-cartela .fc-poster {
		display: block;
		max-width: 12ch;
	}

	.fc-cartela h1 span,
	.fc-cartela .fc-poster span {
		display: block;
	}

	.fc-chamada-revisao {
		font-size: 0.62em;
	}

	.fc-anota-margem {
		width: max-content;
		max-width: 100%;
		font-size: 0.47em;
		margin-top: 1.4rem;
	}

	.fc-destaque {
		padding: 1.8rem 1.4rem;
	}

	.entry-content .fc-protocolo > .fc-etapa + p {
		margin-left: 0;
	}

	.fc-ressalva,
	.fc-forma-conceito {
		padding: 1.4rem;
	}
}

/* =====================================================================
   MOVIMENTO
   ===================================================================== */

/* Uma transição para o site inteiro: 0,15s ease, sobre cor, borda ou
   fundo. O que já era mudança de estado apenas deixa de saltar. A única
   exceção de transform é o carimbo da anotação da home (seção CARTELA),
   que só existe com ponteiro e sem prefers-reduced-motion. */

/* Quem pede menos movimento ao sistema recebe as mudanças de estado
   imediatas. 0.01ms em vez de zero porque alguns navegadores descartam
   transição de duração zero sem disparar transitionend. */
@media (prefers-reduced-motion: reduce) {
	*,
	::before,
	::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}