/* ACR. Reset curto, casca do site e utilitarios.
   O CSS especifico de cada pagina vive em assets/css/pages/{slug}.css */

/* ---------- Reset ---------- */

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

html {
	overflow-x: clip; /* clip e nao hidden, para nao quebrar position sticky */
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--acr-header-total) + 32px);
}

body {
	margin: 0;
	overflow-x: clip;
	font-family: var(--acr-fonte);
	font-size: var(--acr-t-base);
	line-height: 1.6;
	color: var(--acr-corpo-claro);
	background: var(--acr-offwhite);
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { color: var(--acr-titulo-claro); line-height: 1.15; margin: 0 0 var(--acr-s2); font-weight: 700; }
p { margin: 0 0 var(--acr-s2); }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
	outline: 3px solid var(--acr-periwinkle);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.acr-drawer__list .acr-panel { transition: none; }
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Utilitarios ---------- */

.acr-wrap {
	width: 100%;
	max-width: var(--acr-wrap);
	margin-inline: auto;
	padding-inline: var(--acr-gutter);
}

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

.acr-skip {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 12px 20px;
	background: var(--acr-navy);
	color: var(--acr-offwhite);
}
.acr-skip:focus { left: 12px; top: 12px; }

/* ---------- Botoes ---------- */

.acr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: 999px;
	font-size: var(--acr-t-sm);
	font-weight: 600;
	border: 1px solid transparent;
	transition: background var(--acr-transicao), color var(--acr-transicao), border-color var(--acr-transicao);
}

/* O acento do contexto define fundo e cor do texto: periwinkle com navy
   no site neutro, royal com branco em Lifting, coral com navy em Handling. */
.acr-btn--solid {
	background: var(--acr-acento);
	color: var(--acr-acento-texto);
}
.acr-btn--solid:hover { background: var(--acr-navy); color: var(--acr-offwhite); }

/* Contexto escuro (header e drawer): periwinkle e o tom de apoio da paleta
   para fundo navy. Texto navy para contraste, hover clareia para off-white. */
.acr-header .acr-btn--solid,
.acr-drawer .acr-btn--solid {
	background: var(--acr-periwinkle);
	color: var(--acr-navy);
}
.acr-header .acr-btn--solid:hover,
.acr-drawer .acr-btn--solid:hover,
.acr-footer .acr-btn--solid:hover,
.acr-sec--navy .acr-btn--solid:hover,
.acr-pagina-hero .acr-btn--solid:hover,
.acr-cta .acr-btn--solid:hover {
	background: var(--acr-offwhite);
	color: var(--acr-navy);
}

/* Contexto claro e o padrao: contorno navy com texto navy. */
.acr-btn--ghost {
	border-color: rgba(12, 18, 56, 0.22);
	color: var(--acr-navy);
}
.acr-btn--ghost:hover {
	border-color: var(--acr-navy);
	background: var(--acr-navy);
	color: var(--acr-offwhite);
}

/* Contexto escuro: contorno e texto claros. Ao criar uma faixa escura
   nova, acrescente o seletor dela nesta lista. */
.acr-header .acr-btn--ghost,
.acr-drawer .acr-btn--ghost,
.acr-footer .acr-btn--ghost,
.acr-sec--navy .acr-btn--ghost,
.acr-pagina-hero .acr-btn--ghost,
.acr-cta .acr-btn--ghost {
	border-color: rgba(250, 250, 255, 0.35);
	color: var(--acr-offwhite);
}
.acr-header .acr-btn--ghost:hover,
.acr-drawer .acr-btn--ghost:hover,
.acr-footer .acr-btn--ghost:hover,
.acr-sec--navy .acr-btn--ghost:hover,
.acr-pagina-hero .acr-btn--ghost:hover,
.acr-cta .acr-btn--ghost:hover {
	border-color: var(--acr-offwhite);
	background: rgba(250, 250, 255, 0.08);
	color: var(--acr-offwhite);
}

/* ---------- Header ---------- */

.acr-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--acr-navy);
	color: var(--acr-corpo-escuro);
}

/* Todos os grupos da topbar usam a mesma altura de caixa. Sem isso os
   icones, o telefone e os chips centralizam caixas de tamanhos diferentes
   e o alinhamento optico nao bate. A altura vem de --acr-chip-h nos
   tokens, porque o rodape usa os mesmos chips. */
.acr-topbar {
	border-bottom: 1px solid rgba(250, 250, 255, 0.08);
	font-size: var(--acr-t-xs);
}

.acr-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--acr-topbar-h);
	gap: var(--acr-s3);
}

.acr-topbar__right {
	display: flex;
	align-items: center;
	gap: var(--acr-s3);
}

.acr-topbar__fone {
	display: inline-flex;
	align-items: center;
	height: var(--acr-chip-h);
	color: var(--acr-secundario-escuro);
	font-weight: 500;
	line-height: 1;
	transition: color var(--acr-transicao);
}
.acr-topbar__fone:hover { color: var(--acr-offwhite); }

.acr-social { display: flex; align-items: center; gap: 6px; }
.acr-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--acr-chip-h);
	height: var(--acr-chip-h);
	border-radius: 6px;
}
.acr-social svg {
	display: block;
	width: 18px;
	height: 18px;
	fill: var(--acr-secundario-escuro);
	transition: fill var(--acr-transicao);
}
.acr-social a:hover svg { fill: var(--acr-offwhite); }

/* Compensa o padding lateral da caixa para o primeiro icone nascer na
   mesma vertical do logo. */
.acr-social--topbar { margin-inline-start: -3px; }

.acr-regiao { display: flex; align-items: center; gap: 2px; }
.acr-regiao__link {
	display: inline-flex;
	align-items: center;
	height: var(--acr-chip-h);
	padding-inline: 8px;
	border-radius: 6px;
	font-size: var(--acr-t-xs);
	font-weight: 600;
	line-height: 1;
	color: var(--acr-rodape-escuro);
	transition: color var(--acr-transicao), background var(--acr-transicao);
}
.acr-regiao__link:hover { color: var(--acr-offwhite); }
.acr-regiao__link.is-atual { color: var(--acr-offwhite); background: rgba(120, 155, 255, 0.18); }

/* ---------- Barra principal ---------- */

.acr-bar__inner {
	display: flex;
	align-items: center;
	gap: var(--acr-s4);
	min-height: var(--acr-header-h);
}

.acr-logo img { width: auto; height: 42px; }

/* O menu segue logo apos o logo. Sao as acoes que vao para a direita. */
.acr-nav { margin-inline-start: var(--acr-s4); }

.acr-nav__list {
	display: flex;
	align-items: center;
	gap: var(--acr-s3);
}

.acr-nav__item { position: static; }

.acr-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	/* Altura fixa: sem ela o item de icone fica mais baixo que os de
	   texto e o filete de baixo desalinha. */
	min-height: 40px;
	padding: 10px 2px 6px;
	font-size: var(--acr-t-sm);
	line-height: 1.6;
	font-weight: 600;
	color: var(--acr-corpo-escuro);
	border-bottom: 2px solid transparent;
	transition: color var(--acr-transicao), border-color var(--acr-transicao);
}
.acr-nav__link:hover,
.acr-nav__item.is-aberto > .acr-nav__link,
.acr-nav__item.current-menu-item > .acr-nav__link,
.acr-nav__item.current-menu-ancestor > .acr-nav__link {
	color: var(--acr-offwhite);
	border-bottom-color: var(--acr-periwinkle);
}

.acr-nav__chevron {
	display: block;
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	opacity: 0.65;
	transform-origin: 50% 50%;
	transition: transform var(--acr-transicao), opacity var(--acr-transicao);
}
.acr-nav__link:hover .acr-nav__chevron { opacity: 1; }
.acr-nav__item.is-aberto .acr-nav__chevron { transform: rotate(180deg); }

/* Item de menu representado apenas por icone. Marque o item com a classe
   CSS acr-icone-home em Aparencia > Menus. */
.acr-nav__icone { width: 19px; height: 19px; display: block; }
.acr-nav__item .acr-nav__link:has(.acr-nav__icone) { padding-inline: 4px; }

/* ---------- Painel do menu ----------
   Card branco ancorado no item, nao faixa de largura total. */

.acr-nav__item { position: relative; }

.acr-panel {
	position: absolute;
	left: 0;
	top: calc(100% + 8px);
	z-index: 20;
	min-width: 264px;
	background: var(--acr-card-claro);
	border: 1px solid var(--acr-filete-claro);
	border-radius: var(--acr-radius);
	box-shadow: 0 24px 56px rgba(12, 18, 56, 0.22);
	visibility: hidden;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity var(--acr-transicao), visibility var(--acr-transicao), transform var(--acr-transicao);
}

/* Ponte invisivel: sem ela o painel fecha ao atravessar o vao. */
.acr-panel::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -12px;
	height: 12px;
}

.acr-nav__item.is-aberto > .acr-panel {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

/* Por padrao o painel alinha pela esquerda do item. Quando nao cabe ate a
   margem direita do site, o JS marca .acr-panel--fim e ele inverte. */
.acr-panel--fim { left: auto; right: 0; }

.acr-panel__inner { max-width: none; margin: 0; padding: var(--acr-s2); }

.acr-panel__list { display: grid; grid-template-columns: 1fr; gap: 2px; }

.acr-panel__link {
	display: block;
	padding: 11px 14px;
	border-radius: var(--acr-radius-sm);
	color: var(--acr-corpo-claro);
	transition: background var(--acr-transicao), color var(--acr-transicao);
}
.acr-panel__link .acr-nav__label { display: block; font-weight: 600; font-size: var(--acr-t-sm); }
.acr-panel__desc { display: block; margin-top: 2px; font-size: var(--acr-t-xs); color: var(--acr-secundario-claro); }

.acr-panel__link:hover,
.acr-panel__link:focus-visible {
	background: rgba(120, 155, 255, 0.10);
	color: var(--acr-titulo-claro);
}

/* ---------- Mega painel em colunas ----------
   Vale para item de primeiro nivel com netos, como Produtos.
   Cada filho vira uma coluna com cabecalho colorido. */

.acr-nav__item.acr-mega > .acr-panel { min-width: 640px; }
.acr-nav__item.acr-mega > .acr-panel .acr-panel__inner { padding: var(--acr-s3); }
.acr-nav__item.acr-mega > .acr-panel > .acr-panel__inner > .acr-panel__list {
	grid-template-columns: repeat(2, minmax(260px, 1fr));
	gap: var(--acr-s4);
}

/* Coluna: o link do filho vira cabecalho */
.acr-panel__item:has(.acr-panel__sub) > .acr-panel__link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--acr-s3);
	padding: 0 0 10px;
	margin-bottom: 10px;
	border-bottom: 2px solid var(--acr-acento);
	border-radius: 0;
	color: var(--acr-acento);
}
.acr-panel__item:has(.acr-panel__sub) > .acr-panel__link:hover { background: none; }
.acr-panel__item:has(.acr-panel__sub) > .acr-panel__link .acr-nav__label {
	font-size: var(--acr-t-base);
	font-weight: 800;
	letter-spacing: -0.01em;
}
.acr-panel__item:has(.acr-panel__sub) > .acr-panel__link::after {
	content: attr(data-cta);
	font-size: var(--acr-t-xs);
	font-weight: 600;
	color: var(--acr-secundario-claro);
	white-space: nowrap;
	transition: color var(--acr-transicao);
}
.acr-panel__item:has(.acr-panel__sub) > .acr-panel__link:hover::after { color: var(--acr-acento); }

/* Familia define o acento. Classe no item em Aparencia > Menus. */
.acr-panel__item.acr-lifting { --acr-acento: var(--acr-royal); }
.acr-panel__item.acr-handling { --acr-acento: var(--acr-coral); }

.acr-panel__sub { display: grid; gap: 2px; margin-top: 0; }
.acr-panel__sub .acr-panel__link {
	border-left: 2px solid var(--acr-filete-claro);
	border-radius: 0 var(--acr-radius-sm) var(--acr-radius-sm) 0;
	padding: 8px 12px;
	transition: background var(--acr-transicao), border-color var(--acr-transicao), color var(--acr-transicao);
}
.acr-panel__sub .acr-panel__link:hover { border-left-color: var(--acr-acento); }
.acr-panel__sub .acr-nav__label { font-weight: 700; }

/* ---------- Acoes e busca ---------- */

.acr-bar__actions {
	display: flex;
	align-items: center;
	gap: var(--acr-s2);
	margin-inline-start: auto;
}

.acr-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	line-height: 0;
	transition: background var(--acr-transicao);
}
.acr-iconbtn svg {
	display: block;
	width: 19px;
	height: 19px;
	fill: none;
	stroke: var(--acr-corpo-escuro);
	transition: stroke var(--acr-transicao);
}
.acr-iconbtn:hover svg { stroke: var(--acr-offwhite); }
.acr-iconbtn:hover { background: rgba(250, 250, 255, 0.08); }

/* Abertura suave. grid-template-rows de 0fr para 1fr anima altura
   desconhecida, o que max-height nao faz sem numero magico. */
.acr-busca {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	border-top: 1px solid transparent;
	transition: grid-template-rows 260ms ease, opacity 200ms ease, border-color 200ms ease;
}
.acr-busca.is-aberta {
	grid-template-rows: 1fr;
	opacity: 1;
	border-top-color: rgba(250, 250, 255, 0.08);
}
.acr-busca__caixa { min-height: 0; overflow: hidden; }
.acr-busca__inner { padding-block: var(--acr-s3); }

/* Contexto claro e o padrao. O header sobrescreve logo abaixo. */
.acr-form-busca { display: flex; gap: var(--acr-s1); }
.acr-form-busca input {
	flex: 1;
	min-width: 0;
	padding: 14px 18px;
	border: 1px solid var(--acr-gray-light);
	border-radius: 999px;
	background: var(--acr-card-claro);
	color: var(--acr-titulo-claro);
	font-family: inherit;
	font-size: var(--acr-t-base);
	transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.acr-form-busca input::placeholder { color: var(--acr-secundario-claro); }
.acr-form-busca input:focus,
.acr-form-busca input:focus-visible {
	outline: none;
	border-color: var(--acr-periwinkle);
	box-shadow: 0 0 0 4px rgba(120, 155, 255, 0.16);
}
.acr-form-busca button {
	flex-shrink: 0;
	padding: 14px 28px;
	border: 0;
	border-radius: 999px;
	background: var(--acr-acento);
	color: #FFFFFF;
	font-family: inherit;
	font-size: var(--acr-t-sm);
	font-weight: 700;
	cursor: pointer;
	transition: background var(--acr-transicao), color var(--acr-transicao);
}
.acr-form-busca button:hover { background: var(--acr-navy); color: #FFFFFF; }

/* Contexto escuro: a busca dentro do header. */
.acr-header .acr-form-busca input {
	border-color: var(--acr-filete-escuro);
	background: var(--acr-card-escuro);
	color: var(--acr-offwhite);
}
.acr-header .acr-form-busca input::placeholder { color: var(--acr-rodape-escuro); }
.acr-header .acr-form-busca button {
	background: var(--acr-periwinkle);
	color: var(--acr-navy);
}
.acr-header .acr-form-busca button:hover { background: var(--acr-offwhite); color: var(--acr-navy); }

/* ---------- Burger e drawer ---------- */

.acr-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px; height: 40px;
	border: 0; background: transparent;
}
.acr-burger span {
	display: block;
	height: 2px; width: 22px;
	background: var(--acr-offwhite);
	transition: transform var(--acr-transicao), opacity var(--acr-transicao);
}
.acr-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.acr-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.acr-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.acr-drawer {
	position: fixed;
	/* Cobre a tela inteira e reserva o espaco do header por padding, e nao
	   por offset. Com o body travado o header sticky pode perder a
	   fixacao, e qualquer offset deixaria o conteudo aparecer por tras.
	   O header tem z-index maior, entao continua visivel por cima. */
	inset: 0;
	z-index: 99;
	background: var(--acr-navy);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: calc(var(--acr-header-total) + var(--acr-s3)) var(--acr-gutter) var(--acr-s6);
}

.acr-drawer__list > .acr-nav__item { border-bottom: 1px solid rgba(250, 250, 255, 0.08); }
.acr-drawer__list .acr-nav__link {
	width: 100%;
	min-height: 0;
	justify-content: space-between;
	padding: 16px 0;
	font-size: var(--acr-t-lg);
	font-weight: 600;
	border-bottom: 0;
}
.acr-drawer__list .acr-nav__chevron { width: 16px; height: 16px; opacity: 0.8; }

/* O painel no desktop e um card branco flutuante. No drawer ele precisa
   voltar a ser conteudo empilhado dentro do fundo navy: sem posicao,
   sem borda, sem raio, sem sombra e sem transform. */
.acr-drawer__list .acr-panel {
	position: static;
	min-width: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	visibility: visible;
	transform: none;
	/* Mesma tecnica da barra de busca: de 0fr para 1fr anima altura
	   desconhecida, o que display none nunca permitiria. */
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows 260ms ease, opacity 200ms ease;
}
.acr-drawer__list .acr-panel::before { display: none; }
.acr-drawer__list .acr-nav__item.is-aberto > .acr-panel {
	grid-template-rows: 1fr;
	opacity: 1;
}
.acr-drawer__list .acr-panel__inner { min-height: 0; overflow: hidden; padding: 0; }
.acr-drawer__list .acr-panel__list {
	grid-template-columns: 1fr;
	gap: 0;
	padding-bottom: var(--acr-s3);
}

.acr-drawer__list .acr-panel__link {
	padding: 12px 0;
	border-radius: 0;
	color: var(--acr-secundario-escuro);
}
.acr-drawer__list .acr-panel__link:hover,
.acr-drawer__list .acr-panel__link:focus-visible {
	background: transparent;
	color: var(--acr-offwhite);
}
.acr-drawer__list .acr-panel__desc { color: var(--acr-rodape-escuro); }

/* Mega painel de Produtos: no drawer vira lista simples, com o nome da
   familia como cabecalho de secao. */
.acr-drawer__list .acr-nav__item.acr-mega > .acr-panel { min-width: 0; }
.acr-drawer__list .acr-panel__item:has(.acr-panel__sub) > .acr-panel__link {
	padding: 14px 0 8px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--acr-filete-escuro);
	color: var(--acr-periwinkle);
}
.acr-drawer__list .acr-panel__item:has(.acr-panel__sub) > .acr-panel__link::after { content: none; }
.acr-drawer__list .acr-panel__sub .acr-panel__link {
	padding-left: 12px;
	border-left: 2px solid var(--acr-filete-escuro);
	border-radius: 0;
}
.acr-drawer__list .acr-panel__sub .acr-panel__link:hover { border-left-color: var(--acr-periwinkle); }

.acr-drawer__actions { display: grid; gap: var(--acr-s2); margin: var(--acr-s4) 0; }
.acr-drawer .acr-btn { width: 100%; }
.acr-regiao--drawer { justify-content: center; }

/* Trava a rolagem com o menu aberto. O overflow hidden faz do body um
   container de rolagem proprio, e o header sticky passa a se fixar no topo
   do documento em vez do topo da tela. Por isso ele vira fixed enquanto o
   drawer esta aberto: sem isso o header some ao abrir o menu com a pagina
   rolada. */
body.acr-travado { overflow: hidden; }
body.acr-travado .acr-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

/* ---------- Conteudo ---------- */

.acr-main { display: block; }

.acr-prosa { max-width: 78ch; padding-block: var(--acr-s5); }
.acr-prosa__titulo { font-size: var(--acr-t-3xl); }
.acr-prosa__meta { color: var(--acr-secundario-claro); font-size: var(--acr-t-sm); }
.acr-prosa__capa { margin: 0 0 var(--acr-s4); border-radius: var(--acr-radius); overflow: hidden; }
.acr-prosa h2 { font-size: var(--acr-t-xl); margin-top: var(--acr-s4); }

.acr-arquivo { padding-block: var(--acr-s5); }
.acr-arquivo__titulo { font-size: var(--acr-t-2xl); margin-bottom: var(--acr-s4); }

.acr-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--acr-s3);
}
.acr-card {
	background: var(--acr-card-claro);
	border: 1px solid var(--acr-filete-claro);
	border-radius: var(--acr-radius);
	overflow: hidden;
}
.acr-card__link { display: block; padding: var(--acr-s3); }
.acr-card__img { display: block; margin: calc(var(--acr-s3) * -1) calc(var(--acr-s3) * -1) var(--acr-s3); }
.acr-card__meta { display: block; font-size: var(--acr-t-xs); color: var(--acr-secundario-claro); }
.acr-card__titulo { display: block; font-weight: 600; color: var(--acr-titulo-claro); margin: 6px 0 var(--acr-s2); }
.acr-card__cta { font-size: var(--acr-t-sm); font-weight: 600; color: var(--acr-acento); }

.acr-erro { padding-block: var(--acr-s6); max-width: 60ch; }
.acr-erro__titulo { font-size: var(--acr-t-3xl); }
.acr-vazio { color: var(--acr-secundario-claro); }


/* ---------- Card de post ----------
   Definicao unica. Usada na home (shortcode acr_posts), na pagina de
   conteudos, nos arquivos de categoria e tag e nos relacionados.
   Nao duplicar esse bloco em home.css nem em acr-post.css. */

.acr-posts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--acr-s3);
}

.acr-post {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--acr-gray-light);
	border-radius: var(--acr-radius);
	overflow: hidden;
	background: var(--acr-card-claro);
	transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.acr-post:hover {
	border-color: var(--acr-periwinkle);
	transform: translateY(-3px);
	box-shadow: 0 16px 36px rgba(12, 18, 56, 0.10);
}

.acr-post .acr-media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--acr-navy);
	border-radius: 0;
}
.acr-post .acr-media::after { display: none; }
.acr-post .acr-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}
.acr-post:hover .acr-media img { transform: scale(1.05); }

.acr-post-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 22px 24px 24px;
}

.acr-post-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	font-size: var(--acr-rotulo);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--acr-acento);
}
.acr-post-meta span {
	color: var(--acr-secundario-claro);
	font-weight: 600;
	letter-spacing: 0.04em;
}

.acr-post-title {
	margin: 0 0 10px;
	font-size: 0.97rem;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--acr-titulo-claro);
}

.acr-post-exc {
	margin: 0 0 var(--acr-s3);
	font-size: var(--acr-t-sm);
	line-height: 1.6;
	color: var(--acr-corpo-claro);
}

.acr-post-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 4px;
	font-size: var(--acr-t-xs);
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--acr-acento);
}
.acr-post-cta svg { width: 13px; height: 13px; transition: transform 0.2s ease; }
.acr-post:hover .acr-post-cta svg { transform: translateX(4px); }



/* ---------- Hero de pagina interna ----------
   Faixa navy padrao de todas as paginas institucionais. Mesmo tratamento
   do topo do post. Usar em toda pagina interna em vez de recriar. */

.acr-pagina-hero {
	background: linear-gradient(180deg, var(--acr-card-escuro) 0%, var(--acr-navy) 100%);
	border-top: 1px solid var(--acr-filete-escuro);
	color: var(--acr-corpo-escuro);
	padding-block: var(--acr-s5) var(--acr-s6);
}
.acr-pagina-hero__conteudo { max-width: 820px; }
.acr-pagina-hero__rotulo {
	margin: 0 0 var(--acr-s2);
	font-size: var(--acr-rotulo);
	font-weight: 800;
	letter-spacing: var(--acr-rotulo-track);
	text-transform: uppercase;
	color: var(--acr-periwinkle);
	line-height: 1;
}
.acr-pagina-hero__titulo {
	margin: 0 0 var(--acr-s3);
	font-size: clamp(1.9rem, 3.4vw, 3rem);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -0.02em;
	color: var(--acr-offwhite);
}
.acr-pagina-hero__lead {
	margin: 0;
	max-width: 62ch;
	font-size: var(--acr-t-base);
	line-height: 1.7;
	color: var(--acr-corpo-escuro);
}

/* ---------- Faixa de numeros ----------
   Mesma faixa da home, disponivel para qualquer pagina. */

.acr-numeros {
	background: linear-gradient(rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.28)), var(--acr-navy);
	padding-block: var(--acr-s4);
}
.acr-numeros__grade {
	display: grid;
	grid-template-columns: repeat(var(--acr-numeros-cols, 5), 1fr);
	gap: var(--acr-s3) var(--acr-s2);
}
.acr-numero { text-align: center; }
.acr-numero__n {
	display: block;
	font-size: clamp(1.4rem, 2.1vw, 1.9rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--acr-periwinkle);
}
.acr-numero__l {
	display: block;
	margin-top: 5px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.4;
	color: var(--acr-gray-light);
}

/* ---------- Moldura de imagem ----------
   Borda que acende, sombra e zoom de 5%. Mesmo comportamento das imagens
   da home. Definicao unica: para usar em outro lugar, adicione o seletor
   a esta lista em vez de recriar as regras. */

.acr-moldura,
.acr-artigo__capa,
.acr-artigo__corpo figure {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--acr-gray-light);
	border-radius: var(--acr-radius);
	background: var(--acr-card-claro);
	transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.acr-moldura img,
.acr-artigo__capa img,
.acr-artigo__corpo figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
	transition: transform 0.5s ease;
}

.acr-moldura:hover,
.acr-artigo__capa:hover,
.acr-artigo__corpo figure:hover {
	border-color: var(--acr-periwinkle);
	box-shadow: 0 16px 36px rgba(12, 18, 56, 0.10);
}

.acr-moldura:hover img,
.acr-artigo__capa:hover img,
.acr-artigo__corpo figure:hover img { transform: scale(1.05); }


/* ================= SISTEMA DE PAGINA INTERNA =================
   Vocabulario comum a todas as paginas institucionais. Todo bloco HTML
   de pagina comeca com <div class="acr-pagina"> e usa estas classes.
   O CSS de pagina em assets/css/pages/ so carrega o que for exclusivo. */

/* Reset com especificidade zero: arruma o basico sem competir com
   componentes do tema. */
:where(.acr-pagina *) { box-sizing: border-box; }
:where(.acr-pagina ul, .acr-pagina ol) { list-style: none; margin: 0; padding: 0; }
:where(.acr-pagina li) { margin: 0; }
:where(.acr-pagina p) { margin: 0; }

/* ---------- Faixas ---------- */

.acr-sec { padding-block: var(--acr-s6); }
/* Use --tight apenas quando a secao anterior tiver o MESMO fundo.
   Com fundos diferentes o conteudo cola na borda da faixa. */
.acr-sec--tight { padding-top: 0; }
.acr-sec--claro { background: var(--acr-offwhite); }
.acr-sec--tinta { background: rgba(120, 155, 255, 0.05); }
.acr-sec--navy { background: var(--acr-navy); color: var(--acr-corpo-escuro); }

.acr-col { max-width: 700px; }

/* ---------- Titulos de secao ---------- */

.acr-eyebrow {
	margin: 0 0 14px;
	font-size: var(--acr-rotulo);
	font-weight: 800;
	letter-spacing: var(--acr-rotulo-track);
	text-transform: uppercase;
	color: var(--acr-acento);
	line-height: 1;
}
.acr-sec--navy .acr-eyebrow { color: var(--acr-periwinkle); }

.acr-h2 {
	margin: 0 0 14px;
	font-size: clamp(1.4rem, 2.1vw, 1.75rem);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--acr-titulo-claro);
}
.acr-sec--navy .acr-h2 { color: var(--acr-offwhite); }

.acr-lead {
	max-width: 62ch;
	font-size: 0.97rem;
	line-height: 1.7;
	color: var(--acr-corpo-claro);
}
.acr-sec--navy .acr-lead { color: var(--acr-gray-light); }

.acr-p + .acr-p { margin-top: 14px; }

.acr-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: var(--acr-s3);
}

/* ---------- Split texto e imagem ---------- */

.acr-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--acr-s5);
}
.acr-split--invert .acr-split__media { order: -1; }

/* ---------- Lista com marcador ---------- */

.acr-checks { display: grid; gap: 10px; margin-top: var(--acr-s3); }
.acr-checks li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: var(--acr-t-sm);
	line-height: 1.55;
}
.acr-checks svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin-top: 3px;
	color: var(--acr-acento);
}
/* Quando o item da lista e um link, ele acompanha o hover do tema. */
.acr-checks a {
	color: var(--acr-titulo-claro);
	font-weight: 600;
	transition: color var(--acr-transicao);
}
.acr-checks a:hover { color: var(--acr-acento); }
.acr-sec--navy .acr-checks a { color: var(--acr-offwhite); }
.acr-sec--navy .acr-checks a:hover { color: var(--acr-periwinkle); }
.acr-sec--navy .acr-checks svg { color: var(--acr-periwinkle); }

/* ---------- Atalhos de secao ----------
   Cards de navegacao usados nas paginas indice (/empresa/, /produtos/). */

.acr-atalhos {
	display: grid;
	grid-template-columns: repeat(var(--acr-atalhos-cols, 4), 1fr);
	gap: var(--acr-s3);
	margin-top: var(--acr-s4);
}
.acr-atalho {
	display: flex;
	flex-direction: column;
	padding: var(--acr-s3);
	border-radius: var(--acr-radius);
	border: 1px solid var(--acr-gray-light);
	background: var(--acr-card-claro);
	transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.acr-atalho:hover {
	border-color: var(--acr-periwinkle);
	transform: translateY(-3px);
	box-shadow: 0 16px 36px rgba(12, 18, 56, 0.10);
}
.acr-atalho__n {
	margin-bottom: 12px;
	font-size: var(--acr-rotulo);
	font-weight: 800;
	letter-spacing: var(--acr-rotulo-track);
	color: var(--acr-acento);
	line-height: 1;
}
.acr-atalho__titulo {
	margin: 0 0 8px;
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--acr-titulo-claro);
}
.acr-atalho__texto {
	font-size: var(--acr-t-sm);
	line-height: 1.6;
	color: var(--acr-corpo-claro);
}
.acr-atalho__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--acr-s3);
	padding-top: 4px;
	font-size: var(--acr-t-xs);
	font-weight: 700;
	color: var(--acr-acento);
}
.acr-atalho__cta svg { width: 13px; height: 13px; transition: transform 0.2s ease; }
.acr-atalho:hover .acr-atalho__cta svg { transform: translateX(4px); }


/* ---------- Tabela de dados ----------
   Componente generico para qualquer pagina que precise apresentar pares
   ou linhas de dados: prazos, classificacoes, especificacoes. */

.acr-tabela {
	margin-top: var(--acr-s4);
	max-width: 860px;
	border: 1px solid var(--acr-gray-light);
	border-radius: var(--acr-radius);
	overflow: hidden;
	background: var(--acr-card-claro);
}
.acr-tabela table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--acr-t-sm);
}
.acr-tabela th {
	padding: 14px 20px;
	text-align: left;
	background: rgba(120, 155, 255, 0.08);
	border-bottom: 1px solid var(--acr-filete-claro);
	font-size: var(--acr-rotulo);
	font-weight: 800;
	letter-spacing: var(--acr-rotulo-track);
	text-transform: uppercase;
	color: var(--acr-secundario-claro);
}
.acr-tabela td {
	padding: 13px 20px;
	border-bottom: 1px solid var(--acr-filete-claro);
	color: var(--acr-corpo-claro);
}
.acr-tabela tr:last-child td { border-bottom: 0; }
.acr-tabela tbody tr { transition: background var(--acr-transicao); }
.acr-tabela tbody tr:hover { background: rgba(120, 155, 255, 0.05); }

/* Coluna de valor: nao quebra, alinha por digito e tem peso proprio. */
.acr-tabela__valor {
	width: 1%;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var(--acr-titulo-claro);
}

/* Rotulo de familia ou grupo dentro da celula. */
.acr-tabela__grupo {
	display: block;
	margin-bottom: 2px;
	font-size: var(--acr-t-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--acr-secundario-claro);
}

@media (max-width: 640px) {
	.acr-tabela th, .acr-tabela td { padding: 12px 14px; }
}

/* ---------- Fechamento de pagina ---------- */

.acr-fecho {
	padding-block: var(--acr-s6);
	background: linear-gradient(160deg, rgba(120, 155, 255, 0.14) 0%, rgba(120, 155, 255, 0.05) 55%, var(--acr-offwhite) 100%);
	border-top: 1px solid rgba(120, 155, 255, 0.20);
}
.acr-fecho__copy { max-width: 680px; }
.acr-fecho__rule {
	display: block;
	width: 44px;
	height: 3px;
	border-radius: 3px;
	background: var(--acr-acento);
	margin-bottom: 20px;
}
.acr-fecho h2 {
	margin: 0 0 16px;
	font-size: clamp(1.4rem, 2.4vw, 2rem);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--acr-titulo-claro);
}
.acr-fecho p { font-size: 0.97rem; line-height: 1.75; color: var(--acr-corpo-claro); }
.acr-fecho p + p { margin-top: 14px; }

/* ---------- Footer ---------- */

.acr-footer {
	background: var(--acr-navy);
	color: var(--acr-corpo-escuro);
	font-size: var(--acr-t-sm);
}

.acr-footer__top {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: var(--acr-s5) var(--acr-s4);
	padding-block: var(--acr-s6) var(--acr-s5);
}

/* Coluna da marca */

.acr-footer__logo { height: 56px; width: auto; }

.acr-footer__pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: var(--acr-s3);
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid rgba(120, 155, 255, 0.32);
	background: rgba(120, 155, 255, 0.10);
	color: var(--acr-periwinkle);
	font-size: var(--acr-t-xs);
	font-weight: 600;
	letter-spacing: 0.01em;
}

.acr-footer__dot {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--acr-periwinkle);
}

.acr-footer__endereco {
	display: grid;
	gap: 3px;
	margin-top: var(--acr-s3);
	font-style: normal;
	color: var(--acr-secundario-escuro);
	line-height: 1.55;
}
.acr-footer__endereco strong {
	color: var(--acr-offwhite);
	font-weight: 700;
	transition: color var(--acr-transicao);
}
.acr-footer__endereco a { display: grid; gap: 3px; transition: color var(--acr-transicao); }
.acr-footer__endereco a:hover,
.acr-footer__endereco a:hover strong { color: var(--acr-periwinkle); }

.acr-footer__fone {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: var(--acr-s3);
	color: var(--acr-offwhite);
	font-weight: 700;
	transition: color var(--acr-transicao);
}
.acr-footer__fone svg { width: 17px; height: 17px; color: var(--acr-periwinkle); flex-shrink: 0; }
.acr-footer__fone:hover { color: var(--acr-periwinkle); }

/* Colunas de menu */

.acr-footer__titulo {
	font-size: var(--acr-rotulo);
	font-weight: 800;
	letter-spacing: var(--acr-rotulo-track);
	text-transform: uppercase;
	color: var(--acr-periwinkle);
	line-height: 1;
	margin: 0 0 var(--acr-s3);
}

.acr-footer__lista { display: grid; gap: 14px; }
.acr-footer__lista a { color: var(--acr-corpo-escuro); transition: color var(--acr-transicao); }
.acr-footer__lista a:hover { color: var(--acr-offwhite); }

.acr-social--footer { margin-top: var(--acr-s4); gap: 10px; }
.acr-social--footer a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--acr-card-escuro);
	border: 1px solid var(--acr-filete-escuro);
	transition: border-color var(--acr-transicao), background var(--acr-transicao);
}
.acr-social--footer a:hover { border-color: var(--acr-periwinkle); background: rgba(120, 155, 255, 0.12); }
.acr-social--footer svg { width: 17px; height: 17px; }

/* Parceiros */

.acr-footer__parceiros {
	padding-block: var(--acr-s5);
	border-top: 1px solid var(--acr-filete-escuro);
}
.acr-footer__parceiros .acr-footer__titulo {
	text-align: center;
	margin-bottom: var(--acr-s4);
}
.acr-parceiros {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--acr-s4) var(--acr-s3);
	max-width: 980px;
	margin-inline: auto;
}
.acr-parceiros li { display: flex; }
.acr-parceiros a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 58px;
	padding-inline: 10px;
}
.acr-parceiros img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	opacity: 0.45;
	transition: opacity 220ms ease, transform 220ms ease;
}
.acr-parceiros:hover img { opacity: 0.3; }
.acr-parceiros a:hover img,
.acr-parceiros a:focus-visible img {
	opacity: 1;
	transform: translateY(-4px);
}

/* Faixa inferior */

.acr-footer__band {
	background: rgba(0, 0, 0, 0.22);
	padding-block: var(--acr-s4);
}

.acr-footer__versiculo {
	margin: 0 0 var(--acr-s4);
	padding: 0;
	text-align: center;
	font-size: var(--acr-t-xs);
	color: var(--acr-rodape-escuro);
}
.acr-footer__versiculo em { font-style: italic; }
.acr-footer__versiculo span {
	margin-left: 8px;
	color: var(--acr-periwinkle);
	font-weight: 700;
	font-style: normal;
}

.acr-footer__base {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--acr-s3);
	padding-top: var(--acr-s3);
	border-top: 1px solid var(--acr-filete-escuro);
	color: var(--acr-secundario-escuro);
	font-size: var(--acr-t-xs);
	line-height: 1.7;
}
.acr-footer__legal { margin: 0; }
/* o span de blindagem de marca nao herda o tom do documento */
.acr-footer__legal span:not(.notranslate) { color: var(--acr-rodape-escuro); }

.acr-footer__direita {
	display: flex;
	align-items: center;
	gap: var(--acr-s3);
	flex-wrap: wrap;
}
.acr-footer__legalnav { display: flex; flex-wrap: wrap; gap: var(--acr-s3); }
.acr-footer__legalnav a { color: var(--acr-secundario-escuro); transition: color var(--acr-transicao); }
.acr-footer__legalnav a:hover { color: var(--acr-offwhite); }

/* Voltar ao topo */

.acr-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 999px;
	background: var(--acr-periwinkle);
	box-shadow: 0 10px 24px rgba(12, 18, 56, 0.35);
	transition: background var(--acr-transicao), opacity var(--acr-transicao), visibility var(--acr-transicao);
}
.acr-top:hover { background: var(--acr-offwhite); }
.acr-top svg { width: 20px; height: 20px; fill: var(--acr-navy); transition: fill var(--acr-transicao); }

/* Some enquanto a pagina esta no topo. Sem JS, fica sempre visivel. */
.acr-top.is-oculto { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---------- Responsivo ---------- */

@media (max-width: 1180px) {
	.acr-nav, .acr-bar__actions .acr-btn { display: none; }
	.acr-burger { display: flex; }
	.acr-bar__inner { justify-content: space-between; }
	.acr-nav { margin-inline-start: 0; }
}

@media (max-width: 900px) {
	:root { --acr-t-3xl: 2.15rem; --acr-t-4xl: 2.6rem; }
	.acr-posts { grid-template-columns: repeat(2, 1fr); }
	.acr-sec { padding-block: var(--acr-s5); }
	.acr-sec--tight { padding-top: 0; }
	.acr-split { grid-template-columns: 1fr; gap: var(--acr-s4); }
	.acr-split--invert .acr-split__media { order: 0; }
	.acr-atalhos { grid-template-columns: repeat(2, 1fr); }
	.acr-numeros__grade { grid-template-columns: repeat(3, 1fr); gap: var(--acr-s3); }
	.acr-footer__top { grid-template-columns: 1fr 1fr; gap: var(--acr-s4); }
	.acr-parceiros { grid-template-columns: repeat(3, 1fr); }
	.acr-topbar__inner { justify-content: center; }
	.acr-social--topbar { display: none; }
}

@media (max-width: 560px) {
	.acr-posts { grid-template-columns: 1fr; }
	.acr-atalhos { grid-template-columns: 1fr; }
	.acr-btns .acr-btn { width: 100%; }
	.acr-numeros__grade { grid-template-columns: repeat(2, 1fr); }
	.acr-footer__top { grid-template-columns: 1fr; }
	.acr-parceiros { grid-template-columns: repeat(2, 1fr); }
	.acr-footer__base { flex-direction: column; align-items: flex-start; }
	.acr-footer__direita { flex-direction: column; align-items: flex-start; gap: var(--acr-s2); }
	.acr-top { right: 16px; bottom: 16px; width: 42px; height: 42px; }
}


/* ============================================================
   MIGALHAS
   Componente do site inteiro, nao so do blog: aparece no hero das
   paginas com mae e no topo do artigo. Por isso mora aqui, e nao
   em acr-post.css, onde nasceu.
   ============================================================ */

.acr-migalhas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--acr-t-xs);
  color: var(--acr-rodape-escuro);
  margin-bottom: var(--acr-s3);
}

.acr-migalhas a {
  color: var(--acr-secundario-escuro);
  transition: color var(--acr-transicao);
}

.acr-migalhas a:hover {
  color: var(--acr-periwinkle);
}

.acr-migalhas [aria-current="page"] {
  color: var(--acr-offwhite);
}