/**
 * IW · Home ACCI — folha de estilo do template de home.
 *
 * Escopo: tudo vive sob o prefixo .acci- e dentro de .acci-home, para que a
 * folha possa carregar junto com o tema ativo sem disputar seletor com ele.
 *
 * ---------------------------------------------------------------------------
 * COR
 * ---------------------------------------------------------------------------
 * UMA cor de destaque: o VERDE da marca. Nenhum degradê de duas cores, nenhuma
 * faixa tricolor, nenhum card que alterna a cor do ícone.
 *
 * O verde aparece em três luminosidades da MESMA cor. Não é mistura de cores:
 * é a mesma cor clareando conforme o fundo escurece, porque nenhum tom único
 * passa em contraste sobre claro e sobre escuro ao mesmo tempo.
 *
 *   --acci-verde      #1f5e14  CONTROLES sobre fundo claro    → 7,9:1
 *   --acci-verde-md   #2f7d22  SUPERFÍCIES grandes com texto  → 5,3:1
 *   --acci-verde-viv  #5fba40  qualquer coisa sobre ESCURO    → 6,4:1
 *
 * O tom dos controles desceu de #2f7d22 para #1f5e14 de propósito: o botão
 * verde médio ficava perto demais do fundo verde-claro da seção (2,6:1 de
 * silhueta) e o botão desaparecia na faixa. Em #1f5e14 a silhueta contra o
 * mesmo fundo é 7,1:1 — o botão se destaca em qualquer seção da página.
 *
 * O LARANJA do logotipo entra só como DETALHE DECORATIVO, em três lugares e
 * sempre como filete: o traço antes da etiqueta de seção, o risco sob o título
 * de coluna do rodapé e a aresta superior do card institucional. Nunca em
 * texto e nunca em elemento que precise ser lido — #e9ae37 rende 1,9:1 sobre
 * branco e reprovaria em qualquer uso informativo.
 *
 * O escuro (--acci-esc) não é cor de destaque: é a SUPERFÍCIE escura do site
 * (barra de topo, banner e rodapé), um azul-petróleo dessaturado que funciona
 * como neutro, igual ao branco e ao creme.
 *
 * Contrastes verificados (AA pede 4,5:1 em texto e 3:1 em gráfico):
 *   texto principal      #16242d sobre #fff       13,3:1
 *   texto secundário     #55656f sobre #fff        6,1:1
 *   botão sólido, texto  #fff    sobre #1f5e14     7,9:1
 *   botão sólido, forma  #1f5e14 sobre #fff       10,5:1
 *   botão sólido na faixa verde-clara              7,1:1
 *   botão contorno       #1f5e14 sobre #fff        7,9:1
 *   botão no escuro      #0c1b26 sobre #5fba40     6,5:1
 *   forma do botão no escuro  #5fba40 sobre #10222f  6,4:1
 *   faixa de CTA         #fff    sobre #2f7d22     5,3:1
 *   texto no escuro      #c7d2d9 sobre #10222f    10,2:1
 */

.acci-home {
	/* Verde — a única cor de destaque, em três luminosidades */
	--acci-verde:     #1f5e14; /* controles sobre fundo claro */
	--acci-verde-esc: #164510; /* hover do controle */
	--acci-verde-md:  #2f7d22; /* superfícies grandes (faixa de CTA, etiqueta) */
	--acci-verde-viv: #5fba40; /* qualquer coisa sobre fundo escuro */
	--acci-verde-pal: #eef3ea;
	--acci-verde-bor: #d3e2cb;

	/* Laranja do logotipo — SÓ filete decorativo, nunca texto */
	--acci-laranja: #e9ae37;

	/* Superfícies escuras — neutro, não destaque */
	--acci-esc:      #10222f;
	--acci-esc-tint: #0c1b26;

	/* Neutros */
	--acci-ink:    #16242d;
	--acci-muted:  #55656f;
	--acci-linha:  #e3e2dd;
	--acci-creme:  #f7f6f3;
	--acci-branco: #ffffff;

	--acci-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
	--acci-sans:  "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

	/* Arredondamento discreto — o suficiente para tirar a dureza do canto vivo
	   sem virar pílula. */
	--acci-raio:    5px;
	--acci-raio-lg: 7px;

	--acci-max:    1180px;
	--acci-sombra: 0 22px 56px rgba(16, 34, 47, .12);

	color: var(--acci-ink);
	background: var(--acci-branco);
	font-family: var(--acci-sans);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

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

.acci-home img { max-width: 100%; height: auto; display: block; }
.acci-home figure { margin: 0; }

/*
 * A barra do admin é fixa no topo e passaria por cima do cabeçalho grudado.
 *
 * O mesmo vale para o painel do menu no celular: ele é `position: fixed` e
 * começa em y=0, ou seja, embaixo da barra do admin — os primeiros itens
 * ficavam escondidos atrás dela e o menu parecia começar no meio da tela.
 * Quem está só visitando o site não tem a barra e não vê diferença.
 */
body.admin-bar .acci-cab,
body.admin-bar .acci-nav { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .acci-cab,
	body.admin-bar .acci-nav { top: 46px; }
}
/*
 * Abaixo de 600 px o WordPress troca a barra do admin para `position:
 * absolute`: ela fica presa no começo do documento e some assim que a página
 * rola. Manter o deslocamento aqui era o que fazia o menu "descer" depois de
 * rolar — sobrava uma faixa vazia de 46 px acima dele, reservada para uma
 * barra que já não estava mais na tela.
 */
@media screen and (max-width: 600px) {
	body.admin-bar .acci-cab,
	body.admin-bar .acci-nav { top: 0; }
}

/* Títulos em serifa — o traço que a referência usa para separar o discurso
   institucional da informação técnica, que segue em sem-serifa. */
.acci-home h1,
.acci-home h2,
.acci-home h3 {
	font-family: var(--acci-serif);
	font-weight: 400;
	line-height: 1.16;
	letter-spacing: -.005em;
	margin: 0 0 .5em;
	color: var(--acci-ink);
}
.acci-home h4 { font-family: var(--acci-sans); margin: 0 0 .5em; }

.acci-home p { margin: 0 0 1em; }
.acci-home p:last-child { margin-bottom: 0; }

.acci-home a { color: var(--acci-verde); text-decoration: none; }
.acci-home a:hover { text-decoration: underline; }

.acci-home :focus-visible { outline: 3px solid var(--acci-verde); outline-offset: 2px; }

.acci-wrap {
	width: 100%;
	max-width: var(--acci-max);
	margin: 0 auto;
	padding: 0 24px;
}

.acci-pular {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--acci-verde);
	color: #fff;
	padding: 12px 20px;
	font-weight: 700;
	z-index: 200;
}
.acci-pular:focus { left: 8px; top: 8px; }

/* ---------------------------------------------------------------- botões -- */

.acci-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 30px;
	border: 2px solid transparent;
	border-radius: var(--acci-raio);
	font-family: var(--acci-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
	text-decoration: none !important;
	white-space: nowrap;
}

/* Sólido: branco sobre verde escuro — 5,3:1. */
.acci-btn--solido { background: var(--acci-verde); border-color: var(--acci-verde); color: #fff !important; }
.acci-btn--solido:hover { background: var(--acci-verde-esc); border-color: var(--acci-verde-esc); color: #fff; }

/* Contorno: verde sobre branco — 5,3:1 no texto e na borda. */
.acci-btn--contorno { background: transparent; border-color: var(--acci-verde); color: var(--acci-verde); }
.acci-btn--contorno:hover { background: var(--acci-verde); color: #fff; }

/* Claro: para usar SOBRE a faixa verde — 15,8:1. */
.acci-btn--claro { background: #fff; border-color: #fff; color: var(--acci-esc); }
.acci-btn--claro:hover { background: var(--acci-creme); border-color: var(--acci-creme); color: var(--acci-esc); }

/*
 * Botão sobre superfície ESCURA.
 *
 * O verde escuro do botão sólido rende só 3,0:1 contra o #10222f do banner e
 * do rodapé: o texto dentro dele lia bem, mas a FORMA do botão sumia no fundo.
 * Sobre escuro o botão passa a usar o verde vivo com texto quase preto —
 * 6,4:1 de silhueta contra o fundo e 6,5:1 de texto dentro.
 */
.acci-hero .acci-btn--solido,
.acci-rod .acci-btn--solido {
	background: var(--acci-verde-viv);
	border-color: var(--acci-verde-viv);
	color: var(--acci-esc-tint);
}
.acci-hero .acci-btn--solido:hover,
.acci-rod .acci-btn--solido:hover { background: #74cc57; border-color: #74cc57; color: var(--acci-esc-tint); }

/* Contorno sobre escuro: borda e texto brancos, 15,8:1. */
.acci-hero .acci-btn--contorno {
	border-color: rgba(255, 255, 255, .6);
	color: #fff;
}
.acci-hero .acci-btn--contorno:hover { background: #fff; border-color: #fff; color: var(--acci-esc); }

.acci-btn--bloco { width: 100%; }

.acci-link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--acci-verde);
	text-decoration: none !important;
}
.acci-link svg { transition: transform .18s ease; }
.acci-link:hover svg { transform: translateX(5px); }

/* ------------------------------------------------------------- etiquetas -- */

/* DETALHE LARANJA 1/3 — o filete antes do rótulo de seção. Decorativo. */
.acci-etiqueta {
	display: flex;
	align-items: center;
	gap: 11px;
	font-family: var(--acci-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--acci-verde);
	margin-bottom: 18px;
}
.acci-etiqueta::before {
	content: "";
	flex: none;
	width: 22px;
	height: 3px;
	border-radius: 2px;
	background: var(--acci-laranja);
}
.acci-cab-sec .acci-etiqueta { justify-content: center; }

/* ------------------------------------------------------------ barra topo -- */

.acci-topo { background: var(--acci-esc); color: #c7d2d9; font-size: 13.5px; }
.acci-topo .acci-wrap {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 42px;
	flex-wrap: wrap;
}
.acci-topo a { color: #e6edf1; text-decoration: none; }
.acci-topo a:hover { color: var(--acci-verde-viv); text-decoration: none; }
.acci-topo-item { display: inline-flex; align-items: center; gap: 8px; }
.acci-topo-item svg { flex: none; color: var(--acci-verde-viv); }
.acci-topo-dir { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }

/* ---------------------------------------------------------------- header -- */

.acci-cab {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	border-bottom: 1px solid var(--acci-linha);
}
.acci-cab .acci-wrap { display: flex; align-items: center; gap: 22px; min-height: 80px; }

.acci-logo {
	display: inline-flex;
	align-items: center;
	gap: 13px;
	padding-right: 20px;
	border-right: 1px solid var(--acci-linha);
	text-decoration: none !important;
}
.acci-logo img { height: 40px; width: auto; }
.acci-logo-txt { display: flex; flex-direction: column; line-height: 1.15; }
/*
 * Só a assinatura, agora que o nome da empresa saiu daqui — ele já está
 * desenhado na imagem do logotipo, e em texto aparecia repetido ao lado.
 *
 * Sozinha, a linha subiu de 9,5px para 12px: no par com o nome grande ela era
 * a legenda de outra coisa e podia ser miúda; agora é o único texto ao lado da
 * marca e precisa se sustentar.
 */
.acci-logo-txt span {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--acci-muted);
	white-space: nowrap;
}

.acci-nav { margin-left: auto; }
.acci-nav > ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.acci-nav > ul > li { position: relative; }
.acci-nav > ul > li > a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 28px 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--acci-ink);
	text-decoration: none !important;
	border-bottom: 3px solid transparent;
}
.acci-nav > ul > li > a:hover,
.acci-nav > ul > li:focus-within > a { color: var(--acci-verde); border-bottom-color: var(--acci-verde); }
.acci-nav > ul > li > a[aria-current="page"] { border-bottom-color: var(--acci-verde); }
.acci-seta { transition: transform .15s ease; }
.acci-nav > ul > li:hover .acci-seta,
.acci-nav > ul > li:focus-within .acci-seta { transform: rotate(180deg); }

.acci-sub {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 300px;
	background: #fff;
	border: 1px solid var(--acci-linha);
	border-top: 3px solid var(--acci-verde);
	border-radius: 0 0 var(--acci-raio) var(--acci-raio);
	box-shadow: var(--acci-sombra);
	padding: 10px;
	list-style: none;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.acci-nav > ul > li:hover > .acci-sub,
.acci-nav > ul > li:focus-within > .acci-sub { opacity: 1; visibility: visible; transform: translateY(0); }
.acci-sub li a,
.acci-sub3 li a {
	display: block;
	padding: 9px 12px;
	border-radius: var(--acci-raio);
	font-size: 14.5px;
	color: var(--acci-ink);
	text-decoration: none !important;
}
.acci-sub li a:hover,
.acci-sub3 li a:hover { background: var(--acci-verde-pal); color: var(--acci-verde); }

/*
 * Terceiro nível — os produtos de uma categoria.
 *
 * O primeiro nível lista só as seis categorias e por isso é curto: não precisa
 * rolar, e não PODE rolar, porque `overflow` nele cortaria este painel lateral.
 * Quem rola é este: Cabines e Filtros têm 14 itens cada e não cabem em tela
 * baixa.
 */
/*
 * `static`, e não `relative` — é o conserto do painel que saía da tela.
 *
 * Enquanto a categoria era `position: relative`, ela virava o bloco de
 * contenção do painel de produtos, e o painel abria alinhado ao TOPO DA
 * CATEGORIA. Na sexta categoria isso já eram uns 200px abaixo do começo do
 * menu: somados aos 14 produtos de Cabines, o painel passava da borda de baixo
 * da janela e os últimos itens ficavam inalcançáveis.
 *
 * Sendo `static`, o bloco de contenção passa a ser `.acci-sub` — o painel das
 * categorias, que é `absolute`. O painel de produtos abre sempre na mesma
 * altura, alinhado à PRIMEIRA categoria, seja qual for a que o abriu. Daí o
 * `top: -1px` lá embaixo: é a posição que antes só a primeira categoria tinha.
 */
.acci-sub-pai { position: static; }
.acci-sub-pai > a { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; }
.acci-sub-pai > a .acci-seta-lado { flex: none; opacity: .5; transition: transform .15s ease, opacity .15s ease; }
.acci-sub-pai:hover > a .acci-seta-lado,
.acci-sub-pai:focus-within > a .acci-seta-lado { opacity: 1; transform: translateX(3px); }
.acci-sub-pai:hover > a,
.acci-sub-pai:focus-within > a { background: var(--acci-verde-pal); color: var(--acci-verde); }

.acci-sub3 {
	position: absolute;
	left: 100%;
	/*
	 * Medido a partir de `.acci-sub`, não da categoria — ver o `position: static`
	 * acima. -1px encosta o topo deste painel no topo daquele, na altura da
	 * primeira categoria.
	 *
	 * Com o topo fixo aqui em cima, o `max-height` abaixo passa a bastar: o
	 * painel começa a uns 115px do alto da janela, então 70vh nunca alcança a
	 * borda de baixo. Antes o mesmo limite não salvava nada, porque o problema
	 * não era a altura do painel e sim onde ele começava.
	 */
	top: -1px;
	min-width: 296px;
	max-height: min(70vh, 560px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #fff;
	border: 1px solid var(--acci-linha);
	border-top: 3px solid var(--acci-verde);
	border-radius: 0 0 var(--acci-raio) var(--acci-raio);
	box-shadow: var(--acci-sombra);
	padding: 10px;
	list-style: none;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateX(6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
	z-index: 2;
}
.acci-sub-pai:hover > .acci-sub3,
.acci-sub-pai:focus-within > .acci-sub3 { opacity: 1; visibility: visible; transform: translateX(0); }

/* Sem espaço à direita, o painel abre para o lado de dentro. Quem decide é o
   JS, que mede a janela — CSS puro não enxerga o limite do viewport. */
.acci-sub-pai[data-lado="esq"] > .acci-sub3 { left: auto; right: 100%; transform: translateX(-6px); }
.acci-sub-pai[data-lado="esq"]:hover > .acci-sub3,
.acci-sub-pai[data-lado="esq"]:focus-within > .acci-sub3 { transform: translateX(0); }

/* Barra de rolagem discreta, na cor da própria folha. */
.acci-sub3::-webkit-scrollbar { width: 8px; }
.acci-sub3::-webkit-scrollbar-thumb { background: var(--acci-verde-bor); border-radius: 4px; }
.acci-sub3::-webkit-scrollbar-track { background: transparent; }
.acci-sub3 { scrollbar-width: thin; scrollbar-color: var(--acci-verde-bor) transparent; }
.acci-sub-tit {
	padding: 12px 12px 4px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--acci-muted);
}
.acci-sub-todos {
	display: block;
	margin-top: 8px;
	padding: 11px 12px !important;
	border-top: 1px solid var(--acci-linha);
	border-radius: 0 !important;
	font-size: 12px !important;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--acci-verde) !important;
}

.acci-cab-cta { flex: none; }

.acci-nav-fecha,
.acci-nav-cta,
.acci-nav-contato,
.acci-fundo-menu { display: none; }

.acci-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--acci-linha);
	border-radius: var(--acci-raio);
	background: #fff;
	cursor: pointer;
	color: var(--acci-ink);
}

/* ---------------------------------------------------------------- banner -- */

/*
 * Banner sangrado: foto ocupando a largura toda, máscara escura chapada por
 * cima e o discurso dentro dela. Nada flutua sobre o banner — a barra de
 * provas vem depois, encostada, numa faixa própria.
 *
 * A máscara é uma cor só variando em opacidade, não um degradê de duas cores.
 */
.acci-hero {
	position: relative;
	background-color: var(--acci-esc);
	color: #c7d2d9;
	display: flex;
	align-items: center;
	min-height: clamp(460px, 58vh, 620px);
	overflow: hidden;
}
.acci-hero-foto {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}
.acci-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(9, 21, 30, .74);
}
.acci-hero .acci-wrap { position: relative; z-index: 2; padding-top: 80px; padding-bottom: 80px; }
.acci-hero-txt { max-width: 760px; }
.acci-hero h1 {
	color: #fff;
	font-size: clamp(2.05rem, 1.3rem + 2.9vw, 3.5rem);
	margin-bottom: 20px;
}
.acci-hero-sub {
	font-size: clamp(1rem, .95rem + .3vw, 1.2rem);
	color: #ccd8e0;
	max-width: 680px;
	margin-bottom: 34px;
}
.acci-hero-acoes { display: flex; flex-wrap: wrap; gap: 13px; }

/* Faixa de provas — encostada no banner, faixa própria, sem sobreposição. */
.acci-provas { background: var(--acci-creme); border-bottom: 1px solid var(--acci-linha); }
.acci-provas .acci-wrap {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	padding-top: 36px;
	padding-bottom: 36px;
}
.acci-prova { text-align: center; padding: 0 18px; }
.acci-prova + .acci-prova { border-left: 1px solid var(--acci-linha); }
.acci-prova b {
	display: block;
	font-family: var(--acci-serif);
	font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.1rem);
	font-weight: 400;
	color: var(--acci-verde);
	line-height: 1.1;
}
.acci-prova span {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--acci-muted);
	margin-top: 8px;
}

/* --------------------------------------------------------------- seções -- */

/*
 * Ritmo vertical.
 *
 * As faixas eram de 92 px em cima e embaixo, com mais 56 px entre o título e o
 * conteúdo: cada seção virava uma ilha, e uma página com sete delas parecia
 * um empilhamento de blocos sem fim. Em 72/44 as seções continuam separadas —
 * o que separa mesmo é a troca de fundo — mas a leitura flui de uma para a
 * outra em vez de dar um salto a cada bloco.
 */
.acci-sec { padding: 72px 0; }
.acci-sec--creme { background: var(--acci-creme); }
.acci-sec--verde { background: var(--acci-verde-pal); }

.acci-cab-sec { max-width: 700px; margin: 0 auto 44px; text-align: center; }
.acci-cab-sec h2 { font-size: clamp(1.7rem, 1.28rem + 1.55vw, 2.4rem); }
.acci-cab-sec p { color: var(--acci-muted); font-size: 16.5px; margin-top: 14px; }

.acci-rodape-sec { margin-top: 40px; text-align: center; }

/* ---------------------------------------------------- mosaico + card ----- */

.acci-duo { display: grid; grid-template-columns: 1.06fr .94fr; align-items: center; }

.acci-mosaico { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.acci-mosaico img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--acci-raio); }

.acci-duo-card {
	background: #fff;
	position: relative;
	z-index: 2;
	margin-left: -90px;
	padding: clamp(30px, 3.4vw, 48px);
	border-radius: var(--acci-raio-lg);
	box-shadow: var(--acci-sombra);
	overflow: hidden;
}
/* DETALHE LARANJA 2/3 — aresta superior do card institucional. Decorativo. */
.acci-duo-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 64px;
	height: 4px;
	background: var(--acci-laranja);
}
.acci-duo-card h2 { font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.3rem); }
.acci-duo-card p { color: var(--acci-muted); }

.acci-lista { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; gap: 14px; }
.acci-lista li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; }
.acci-lista svg { flex: none; margin-top: 3px; color: var(--acci-verde); }
.acci-lista b { color: var(--acci-ink); }

/* ------------------------------------------------- grade de ícones (6) --- */

.acci-grade-ico { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 36px; }
.acci-ico-item { text-align: center; }
.acci-ico-marca {
	width: 72px;
	height: 72px;
	margin: 0 auto 22px;
	display: grid;
	place-items: center;
	border: 1px solid var(--acci-verde-bor);
	border-radius: 50%;
	background: #fff;
	color: var(--acci-verde);
}
.acci-ico-item h3 { font-size: 1.22rem; margin-bottom: 10px; }
.acci-ico-item p { color: var(--acci-muted); font-size: 15px; }

/* --------------------------------------------- diferenciais técnicos (4) -- */

.acci-grade-dif { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.acci-dif {
	background: #fff;
	border: 1px solid var(--acci-linha);
	border-radius: var(--acci-raio-lg);
	padding: 30px 26px;
}
.acci-dif-ico { color: var(--acci-verde); margin-bottom: 16px; }
.acci-dif h3 { font-size: 1.12rem; margin-bottom: 9px; }
.acci-dif p { color: var(--acci-muted); font-size: 14.5px; }

/* ======================================================================== */
/* Componentes usados só na página Sobre nós                                 */
/* ======================================================================== */

/* Banner interno: mesma construção do banner da home, mais baixo, porque a
   página interna não precisa segurar a atenção — o visitante já entrou. */
.acci-hero--interno { min-height: clamp(300px, 36vh, 400px); }
.acci-hero--interno h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem); }

/* Migalha de pão sobre o banner escuro. */
.acci-migalha { font-size: 13px; color: #a9bcc9; margin-bottom: 14px; }
.acci-migalha a { color: #dbe6ed; }
.acci-migalha a:hover { color: var(--acci-verde-viv); }
.acci-migalha span { margin: 0 8px; opacity: .55; }

/*
 * Bloco de abertura: título à esquerda, texto à direita.
 *
 * Antes o título vinha centralizado e o parágrafo logo abaixo alinhado à
 * esquerda — os dois ficavam desencontrados, um puxando o olho para o centro e
 * o outro para a margem. Em duas colunas os dois compartilham a mesma margem
 * esquerda e a leitura segue reta.
 */
.acci-intro { display: grid; grid-template-columns: .82fr 1.18fr; gap: 48px; align-items: start; }
.acci-intro h2 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.45rem); margin-bottom: 0; }
.acci-intro-txt { padding-top: 6px; }
.acci-intro-txt p {
	font-size: clamp(1.02rem, .97rem + .3vw, 1.18rem);
	line-height: 1.72;
	color: var(--acci-ink);
}

/* Passos numerados de "como especificamos". */
.acci-passos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; counter-reset: passo; }
.acci-passo { position: relative; padding-top: 26px; border-top: 2px solid var(--acci-verde-bor); }
.acci-passo::before {
	counter-increment: passo;
	content: counter( passo, decimal-leading-zero );
	position: absolute;
	top: -14px;
	left: 0;
	background: var(--acci-verde);
	color: #fff;
	font-family: var(--acci-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	padding: 4px 10px;
	border-radius: var(--acci-raio);
}
.acci-passo h3 { font-size: 1.15rem; margin-bottom: 9px; }
.acci-passo p { color: var(--acci-muted); font-size: 14.5px; }

/*
 * Listas de materiais e processos.
 *
 * Eram pastilhas com fundo, borda e canto arredondado — a mesma forma dos
 * botões da página. O visitante tentava clicar e não acontecia nada. Agora são
 * itens de lista mesmo: texto corrido, um traço curto como marcador e um filete
 * separando as linhas. Nenhuma forma que prometa clique.
 */
/*
 * Os dois blocos agora são cards, iguais aos das duas curas — a casca vem de
 * `.acci-cartao`, mais abaixo neste arquivo. Antes eram duas colunas soltas no
 * branco da seção, com um traço verde sob cada título: o par não se lia como
 * par, e a página tinha duas formas diferentes para a mesma ideia de "dois
 * blocos que se comparam".
 *
 * A grade (.acci-termos) também é compartilhada com .acci-curas.
 */
.acci-termo-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	/*
	 * Duas colunas dentro do card.
	 *
	 * São 11 materiais e 13 processos: em coluna única o card ficaria com meia
	 * tela de altura só de termos curtos. O `columns` quebra sozinho, sem
	 * precisar dividir a lista no PHP — e `break-inside` impede que um item
	 * fique partido entre o pé de uma coluna e o topo da outra.
	 *
	 * `230px 2` e não `2`: o primeiro valor é a largura mínima de cada coluna, o
	 * segundo o teto. Assim o próprio navegador decide entre uma e duas colunas
	 * conforme a largura que o card tem naquele momento — e essa largura muda
	 * duas vezes (quando os cards ficam mais estreitos lado a lado, e de novo
	 * quando empilham e voltam a ser largos). Com `columns: 2` fixo seriam duas
	 * media queries para acertar o que aqui sai de graça.
	 */
	columns: 230px 2;
	column-gap: 26px;
	/* Absorve a diferença de altura entre os dois cards, como a lista das curas. */
	flex: 1 1 auto;
}
.acci-termo-lista li {
	position: relative;
	padding: 8px 0 8px 19px;
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--acci-ink);
	border-bottom: 1px solid var(--acci-linha);
	break-inside: avoid;
}
/* O traço curto como marcador — nenhuma forma que prometa clique. */
.acci-termo-lista li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 17px;
	width: 10px;
	height: 2px;
	background: var(--acci-verde);
}

/*
 * Abrangência — as 12 UFs citadas pela empresa.
 *
 * Eram siglas soltas em quadradinhos com borda: não diziam nada a quem não
 * decora UF e pareciam botões. Agora vão por extenso, agrupadas por região,
 * que é como um comprador pensa a logística de uma instalação.
 */
.acci-regioes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; margin-top: 8px; }
.acci-regiao h3 {
	font-family: var(--acci-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--acci-verde);
	padding-bottom: 12px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--acci-verde-bor);
}
.acci-regiao ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.acci-regiao li { font-size: 15px; color: var(--acci-ink); }
/* Dentro do card branco o espaço é metade: quatro colunas quebrariam os nomes
   dos estados no meio. */
.acci-duo-card .acci-regioes { grid-template-columns: 1fr 1fr; gap: 26px 30px; margin-top: 24px; }

/* Foto única no lugar do mosaico, no mesmo bloco de duas colunas. */
.acci-duo-foto { width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; border-radius: var(--acci-raio); }

/* ======================================================================== */
/* Componentes usados só na página de Contato                                */
/* ======================================================================== */

/*
 * Canais diretos — telefone, WhatsApp e e-mail.
 *
 * O card inteiro é o link, não só o número: numa página de contato o alvo de
 * clique tem de ser generoso, e no celular isso vira um botão de discagem do
 * tamanho do dedo.
 */
.acci-canais { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.acci-canal {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--acci-linha);
	border-radius: var(--acci-raio-lg);
	padding: 34px 30px;
	text-decoration: none !important;
	transition: border-color .18s ease;
}
.acci-canal:hover { border-color: var(--acci-verde); }
.acci-canal-ico {
	width: 54px;
	height: 54px;
	margin-bottom: 10px;
	display: grid;
	place-items: center;
	border: 1px solid var(--acci-verde-bor);
	border-radius: 50%;
	color: var(--acci-verde);
}
.acci-canal small {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--acci-muted);
}
.acci-canal b {
	font-family: var(--acci-serif);
	font-weight: 400;
	font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem);
	color: var(--acci-ink);
	line-height: 1.25;
	word-break: break-word;
}
.acci-canal:hover b { color: var(--acci-verde); }
.acci-canal em { font-style: normal; font-size: 14px; color: var(--acci-muted); }

/* ------------------------------------- card de par (casca compartilhada) -- */

/*
 * A casca dos blocos "par de cards": as duas curas (Home) e materiais ×
 * processos (Sobre).
 *
 * Está separada porque os dois blocos precisam ser IDÊNTICOS em forma — são a
 * mesma ideia de leitura, dois cards lado a lado que se comparam. Com o estilo
 * duplicado, o primeiro ajuste de padding num deles já começaria a separá-los.
 * O que muda de um para o outro é só o miolo.
 *
 * Os dois vivem em seções de fundo branco, então quem separa o bloco do resto
 * da página é o próprio card: fundo creme e borda.
 */
.acci-cartao {
	background: var(--acci-creme);
	border: 1px solid var(--acci-linha);
	border-radius: var(--acci-raio-lg);
	padding: clamp(24px, 2.6vw, 34px);
	/*
	 * Coluna, para o miolo poder empurrar o que vem por último até o pé do card
	 * (é assim que o trade-off das curas fica na mesma altura nos dois).
	 */
	display: flex;
	flex-direction: column;
}
.acci-cartao-topo {
	display: flex;
	align-items: center;
	gap: 13px;
	padding-bottom: 18px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--acci-linha);
}
.acci-cartao-ico {
	display: grid;
	place-items: center;
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--acci-verde-pal);
	border: 1px solid var(--acci-verde-bor);
	color: var(--acci-verde);
}
.acci-cartao-topo h3 { font-size: 1.22rem; margin: 0; }

/* A grade que segura o par. Também compartilhada: mesmo respiro nos dois. */
.acci-curas,
.acci-termos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	/* `stretch` (o padrão) é o que iguala a altura dos dois cards — e é dessa
	   altura igual que depende o alinhamento do rodapé de cada um. */
}

/* ------------------------------------------------------- as duas curas -- */

/* Comparativo convectiva × infrared (briefing N.4). */

/* `flex: 1` — a lista absorve a diferença de altura entre os dois cards, e é
   isso que deixa o trade-off na mesma linha nos dois. */
.acci-cura-lista { margin: 0; display: grid; gap: 16px; align-content: start; flex: 1 1 auto; }
.acci-cura-lista dt {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--acci-muted);
	margin-bottom: 5px;
}
.acci-cura-lista dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--acci-ink); }

/*
 * O trade-off, com a barra verde à esquerda.
 *
 * `margin-top: auto` é o que o cola no fim do card — ver o flex acima. O
 * destaque é deliberado: dizer onde a própria tecnologia não serve é o que a
 * seção tem de diferente, e num bloco discreto isso passaria despercebido.
 */
.acci-cura-trade {
	margin: 24px 0 0;
	padding: 14px 16px;
	background: var(--acci-branco);
	border-left: 3px solid var(--acci-verde-md);
	border-radius: 0 var(--acci-raio) var(--acci-raio) 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--acci-ink);
}
.acci-cura-trade b {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--acci-verde);
	margin-bottom: 5px;
}

.acci-curas-cta {
	margin: 26px 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 14px;
	font-size: 15.5px;
	color: var(--acci-muted);
}

/* Endereço da fábrica. */
.acci-endereco {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 48px;
	align-items: center;
	background: #fff;
	border: 1px solid var(--acci-linha);
	border-radius: var(--acci-raio-lg);
	padding: clamp(28px, 3.4vw, 48px);
}
.acci-endereco h3 { font-size: 1.35rem; margin-bottom: 16px; }
.acci-endereco-linhas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.acci-endereco-linhas li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: var(--acci-ink); }
.acci-endereco-linhas svg { flex: none; margin-top: 4px; color: var(--acci-verde); }
.acci-endereco p { color: var(--acci-muted); font-size: 15px; }
.acci-endereco .acci-btn { margin-top: 20px; }

/*
 * Mapa da fábrica — entrou no lugar do botão "Como chegar".
 *
 * Fica FORA do cartão `.acci-endereco` de propósito: dentro dele herdaria os
 * 48px de recuo do cartão e sobraria uma moldura creme grossa em volta do mapa,
 * como se fosse uma foto emoldurada.
 *
 * A proporção é do contêiner, não do iframe. O embed do Google chega com
 * width/height fixos em atributo HTML; sem `aspect-ratio` aqui e `height: 100%`
 * lá dentro, o mapa ficaria com a altura padrão do Google em qualquer largura —
 * uma tira achatada no desktop e uma faixa branca no celular.
 *
 * O `min-height` é rede de proteção dupla: cobre o navegador sem aspect-ratio e
 * impede que numa tela muito estreita a conta dê uma altura em que não se
 * reconhece nem o quarteirão.
 */
.acci-mapa {
	margin-top: 24px;
	aspect-ratio: 16 / 7;
	min-height: 280px;
	border: 1px solid var(--acci-linha);
	border-radius: var(--acci-raio-lg);
	overflow: hidden;
	/* Enquanto o iframe não carrega (ele é lazy), o buraco fica com a cor da
	   página em vez de um retângulo branco piscando. */
	background: var(--acci-linha);
}
.acci-mapa iframe { display: block; width: 100%; height: 100%; border: 0; }
.acci-mapa-rota { margin: 14px 0 0; text-align: right; }
.acci-mapa-rota svg { flex: none; }
/*
 * Aqui o ícone vem ANTES do texto, e o deslize do `.acci-link` no hover — feito
 * para a setinha que fica no fim da frase — empurraria o pino para dentro da
 * palavra. Neste link ele não se aplica.
 */
.acci-mapa-rota .acci-link:hover svg { transform: none; }

/* ======================================================================== */
/* Catálogo — páginas de categoria e ficha de produto                       */
/* ======================================================================== */

/*
 * Topo da ficha de produto.
 *
 * Não usa o banner sangrado das páginas institucionais: numa ficha, a foto do
 * equipamento é informação, não cenário. Ela aparece inteira, ao lado do
 * texto, em vez de virar fundo escurecido por máscara.
 */
.acci-prod-topo { padding-top: 36px; }
.acci-migalha--claro { color: var(--acci-muted); margin-bottom: 26px; }
.acci-migalha--claro a { color: var(--acci-verde); }

.acci-prod-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.acci-prod-hero h1 { font-size: clamp(1.9rem, 1.35rem + 2vw, 2.9rem); }
.acci-prod-resumo { font-size: clamp(1rem, .96rem + .28vw, 1.15rem); color: var(--acci-muted); margin-bottom: 30px; }
/*
 * `contain` e não `cover`: o equipamento aparece inteiro.
 *
 * As fotos do catálogo chegam em proporções diferentes umas das outras. Com
 * `cover` o navegador preenchia a caixa 4/3 cortando o que sobrava — em foto
 * alta ou muito larga, sumia justamente a parte do equipamento que o visitante
 * veio ver. A caixa continua com a mesma proporção e o mesmo tamanho (é o que
 * mantém a grade alinhada); o que muda é que a imagem cabe dentro dela em vez
 * de ser cortada por ela. O fundo creme fecha a folga que sobra nas laterais
 * ou em cima; o padding é só nas laterais, para a foto usar toda a altura
 * disponível da caixa e não encostar nas bordas arredondadas dos cantos.
 */
.acci-prod-hero-fig img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	object-position: center;
	background: var(--acci-creme);
	padding: 0 14px;
	box-sizing: border-box;
	border-radius: var(--acci-raio-lg);
	box-shadow: var(--acci-sombra);
}

/*
 * Ficha técnica — o formato de tabela é o que busca e IA extraem melhor.
 *
 * A tabela vive dentro de um quadro branco com respiro próprio. Antes as
 * células tinham padding só na vertical: o texto encostava na borda da coluna
 * e a tabela parecia colada no que vinha ao lado.
 *
 * border-collapse: separate (com spacing zero) porque collapse ignora o
 * border-radius do quadro e os cantos saem vivos.
 */
.acci-ficha {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin-top: 18px;
	background: #fff;
	border: 1px solid var(--acci-linha);
	border-radius: var(--acci-raio-lg);
	overflow: hidden;
}
.acci-ficha th,
.acci-ficha td {
	text-align: left;
	padding: 15px 22px;
	border-bottom: 1px solid var(--acci-linha);
	vertical-align: top;
}
.acci-ficha tr:last-child th,
.acci-ficha tr:last-child td { border-bottom: 0; }
.acci-ficha th {
	width: 38%;
	padding-right: 18px;
	font-family: var(--acci-sans);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--acci-verde);
	line-height: 1.5;
}
.acci-ficha td { font-size: 15px; color: var(--acci-ink); }

.acci-nota { margin-top: 16px; font-size: 13.5px; color: var(--acci-muted); }

.acci-prod-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.acci-prod-duas h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.95rem); }
.acci-prod-mec { color: var(--acci-muted); font-size: 15.5px; line-height: 1.72; }
/*
 * Subtítulo dentro da coluna ("Aplicações e segmentos").
 *
 * Estava em sem-serifa, caixa alta, 11,5 px e verde — a aparência de uma
 * etiqueta de seção, mas sem o filete laranja que toda etiqueta tem. Ficava
 * um terceiro estilo de título, fora do padrão das duas famílias do site.
 * Agora é um h3 igual aos outros: serifa, corpo do texto, com um filete
 * separando do parágrafo acima.
 */
.acci-prod-sub {
	font-size: 1.2rem;
	margin: 26px 0 10px;
	padding-top: 24px;
	border-top: 1px solid var(--acci-linha);
}
.acci-prod-duas p:not(.acci-nota):not(.acci-prod-mec) { color: var(--acci-muted); font-size: 15.5px; }

/*
 * "Onde entra na linha" — estágio anterior, atual e seguinte.
 *
 * Vende o conjunto em vez da peça avulsa, que é o argumento central do
 * briefing: a ACCI fabrica os três estágios.
 */
.acci-fluxo { display: flex; align-items: stretch; justify-content: center; gap: 14px; flex-wrap: wrap; }
.acci-fluxo-item {
	flex: 1 1 240px;
	max-width: 320px;
	display: flex;
	flex-direction: column;
	gap: 7px;
	background: #fff;
	border: 1px solid var(--acci-verde-bor);
	border-radius: var(--acci-raio-lg);
	padding: 24px 26px;
	text-decoration: none !important;
	transition: border-color .18s ease;
}
.acci-fluxo-item:hover { border-color: var(--acci-verde); }
.acci-fluxo-item small {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--acci-muted);
}
.acci-fluxo-item b { font-family: var(--acci-serif); font-weight: 400; font-size: 1.2rem; color: var(--acci-ink); }
.acci-fluxo-item--atual { background: var(--acci-verde); border-color: var(--acci-verde); }
.acci-fluxo-item--atual small { color: rgba(255, 255, 255, .78); }
.acci-fluxo-item--atual b { color: #fff; }
.acci-fluxo-seta { display: grid; place-items: center; color: var(--acci-verde); flex: none; }

/*
 * Documento legal (política de privacidade).
 *
 * Coluna única e estreita: texto corrido de lei se lê em linha curta, não na
 * largura de 1180 px do resto do site.
 */
.acci-doc-topo { max-width: 760px; }
.acci-doc { max-width: 760px; }
.acci-doc h2 {
	font-size: 1.45rem;
	margin: 46px 0 14px;
	padding-top: 26px;
	border-top: 1px solid var(--acci-linha);
}
.acci-doc h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.acci-doc p { font-size: 16px; line-height: 1.75; color: var(--acci-ink); }
.acci-doc ul { margin: 0 0 1em; padding: 0; list-style: none; display: grid; gap: 10px; }
.acci-doc li {
	position: relative;
	padding-left: 22px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--acci-ink);
}
.acci-doc li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 12px;
	width: 10px;
	height: 2px;
	background: var(--acci-verde);
}
.acci-doc-cta {
	margin-top: 48px;
	padding: 28px 30px;
	background: var(--acci-verde-pal);
	border-radius: var(--acci-raio-lg);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}
.acci-doc-cta p { margin: 0; font-family: var(--acci-serif); font-size: 1.2rem; }

/* Escopo do serviço — o que está incluído. Duas colunas de itens marcados,
   sem caixa: é uma lista de leitura, não uma grade de cards. */
.acci-escopo {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 44px;
}
.acci-escopo li {
	display: flex;
	gap: 13px;
	align-items: flex-start;
	padding: 15px 0;
	border-bottom: 1px solid var(--acci-linha);
	font-size: 15.5px;
	color: var(--acci-ink);
}
.acci-escopo svg { flex: none; margin-top: 3px; color: var(--acci-verde); }

/* -------------------------------------------------------------- produtos -- */

.acci-grade-prod { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.acci-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--acci-linha);
	border-radius: var(--acci-raio-lg);
	overflow: hidden;
	transition: border-color .18s ease;
}
.acci-card:hover { border-color: var(--acci-verde); }
.acci-card-fig { position: relative; overflow: hidden; background: var(--acci-creme); }
/*
 * Mesma regra da foto da ficha: a caixa 16/11 fica de pé para a grade não
 * desalinhar, mas a imagem cabe dentro dela (`contain`) em vez de ser cortada
 * (`cover`). O card é uma vitrine de escolha — o visitante precisa reconhecer
 * o equipamento pela silhueta inteira, não por um pedaço ampliado do meio.
 */
.acci-card-fig img {
	width: 100%;
	aspect-ratio: 16 / 11;
	object-fit: contain;
	object-position: center;
	padding: 0 12px;
	box-sizing: border-box;
	transition: transform .4s ease;
}
.acci-card:hover .acci-card-fig img { transform: scale(1.04); }
.acci-card-tag {
	position: absolute;
	left: 0;
	bottom: 0;
	background: var(--acci-verde);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	padding: 7px 14px;
	border-radius: 0 var(--acci-raio) 0 0;
}
.acci-card-txt { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.acci-card-txt h3 { font-size: 1.22rem; margin-bottom: 10px; }
.acci-card-txt h3 a { color: inherit; text-decoration: none !important; }
.acci-card-txt h3 a:hover { color: var(--acci-verde); }
.acci-card-txt p { color: var(--acci-muted); font-size: 14.5px; margin-bottom: 22px; }
.acci-card .acci-link { margin-top: auto; }

/* ---------------------------------------------------------- faixa de CTA -- */

/* Superfície grande: usa o verde médio, que em área cheia cansa menos a vista
   que o tom dos controles e ainda rende 5,3:1 com o texto branco. */
.acci-faixa { background: var(--acci-verde-md); color: #fff; padding: 34px 0; }
.acci-faixa .acci-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px 34px;
	flex-wrap: wrap;
	text-align: center;
}
.acci-faixa p {
	font-family: var(--acci-serif);
	font-size: clamp(1.25rem, 1.05rem + .7vw, 1.65rem);
	margin: 0;
	color: #fff;
}

/* ------------------------------------------------------------------- faq -- */

.acci-faq-cols { display: grid; grid-template-columns: .8fr 1.2fr; gap: 52px; align-items: start; }

.acci-faq-lado { position: sticky; top: 110px; }
.acci-faq-lado h2 { font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.3rem); }
.acci-faq-lado p { color: var(--acci-muted); font-size: 15.5px; }
/* Telefone, WhatsApp e e-mail ficam SÓ na seção de orçamento. Aqui vai apenas
   um atalho para lá — repetir o contato nas duas seções dividia a atenção e
   duplicava o NAP na mesma página. */
.acci-faq-lado .acci-btn { margin-top: 26px; }

.acci-faq { display: grid; gap: 0; border-top: 1px solid var(--acci-linha); }
.acci-item-faq { border-bottom: 1px solid var(--acci-linha); }
.acci-item-faq > summary {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 20px 4px;
	cursor: pointer;
	font-family: var(--acci-serif);
	font-size: 1.18rem;
	color: var(--acci-ink);
	list-style: none;
}
.acci-item-faq > summary::-webkit-details-marker { display: none; }
.acci-item-faq > summary:hover { color: var(--acci-verde); }
.acci-faq-mais {
	margin-left: auto;
	flex: none;
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border: 1px solid var(--acci-verde-bor);
	border-radius: 50%;
	color: var(--acci-verde);
	transition: transform .2s ease, background-color .2s ease, color .2s ease;
}
.acci-item-faq[open] .acci-faq-mais { transform: rotate(45deg); background: var(--acci-verde); border-color: var(--acci-verde); color: #fff; }
.acci-item-faq-txt { padding: 0 60px 22px 4px; color: var(--acci-muted); font-size: 15.5px; }

/* ------------------------------------------------------------- orçamento -- */

/*
 * A seção de orçamento era escura e encostava no rodapé, também escuro: as
 * duas viravam um bloco preto só e o formulário perdia o limite. Agora ela é
 * a faixa verde-clara, que separa com folga do rodapé logo abaixo.
 */
.acci-orc { display: grid; grid-template-columns: .92fr 1.08fr; gap: 48px; align-items: start; }
.acci-orc-info h2 { font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.3rem); }
.acci-orc-info > p { color: var(--acci-muted); }

.acci-checklist { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 11px; }
.acci-checklist li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: var(--acci-ink); }
.acci-checklist svg { flex: none; margin-top: 4px; color: var(--acci-verde); }

.acci-orc-dados { display: grid; gap: 18px; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--acci-verde-bor); }
.acci-orc-dado { display: flex; gap: 15px; align-items: flex-start; }
.acci-orc-dado-ico {
	flex: none;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border: 1px solid var(--acci-verde-bor);
	border-radius: var(--acci-raio);
	background: #fff;
	color: var(--acci-verde);
}
.acci-orc-dado small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--acci-muted); }
.acci-orc-dado a, .acci-orc-dado span { color: var(--acci-ink); font-weight: 600; font-size: 15.5px; text-decoration: none; }
.acci-orc-dado a:hover { color: var(--acci-verde); text-decoration: none; }

.acci-form-card {
	background: #fff;
	padding: clamp(26px, 2.8vw, 38px);
	border-radius: var(--acci-raio-lg);
	box-shadow: var(--acci-sombra);
}
.acci-form-card h3 { font-size: 1.5rem; margin-bottom: 8px; }
.acci-form-card > p { color: var(--acci-muted); font-size: 15px; margin-bottom: 26px; }

.acci-form { display: grid; gap: 17px; }
.acci-form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.acci-campo { display: grid; gap: 7px; }
.acci-campo label { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--acci-ink); }
.acci-campo label span { color: #a8321f; }
.acci-campo input,
.acci-campo select,
.acci-campo textarea {
	width: 100%;
	padding: 14px 15px;
	border: 1px solid var(--acci-linha);
	border-radius: var(--acci-raio);
	font-family: var(--acci-sans);
	font-size: 15px;
	color: var(--acci-ink);
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.acci-campo textarea { resize: vertical; min-height: 112px; }
/*
 * O select desenha a própria seta.
 *
 * Com a aparência nativa, o botão de abrir do sistema ficava POR CIMA do texto
 * no celular: "Selecione uma opção" aparecia cortado no meio, como se o campo
 * estivesse com defeito. Com appearance: none a seta vira desenho nosso, e a
 * folga de 44px à direita é espaço reservado só para ela — o texto nunca entra
 * ali. O `text-overflow` cuida do nome de equipamento mais longo em telas
 * estreitas: corta com reticências em vez de sumir sob a seta.
 *
 * A seta é um data URI; um arquivo externo seria uma requisição a mais para
 * 200 bytes de SVG.
 */
.acci-campo select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 44px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	/*
	 * Altura e entrelinha explícitas.
	 *
	 * Deixado por conta do navegador, o select do Android calcula a altura pela
	 * métrica da fonte do sistema e corta a parte de baixo das letras com
	 * descida — o "q" de "Selecione" saía pela metade, que é o "não aparece
	 * direito" do relato. Com a altura fixada, sobra folga para a linha inteira.
	 */
	min-height: 50px;
	line-height: 1.35;
	background-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232f7d22' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 15px center;
	background-size: 16px 16px;
}
/* Some a seta duplicada do Edge/IE antigo, que ignora appearance: none. */
.acci-campo select::-ms-expand { display: none; }
/* Enquanto a opção vazia está marcada, o campo usa a cor de texto auxiliar —
   assim o rótulo "Selecione uma opção" não se passa por valor escolhido.
   Navegador sem :has simplesmente mantém a cor normal; nada quebra. */
.acci-campo select:has( option[value=""]:checked ) { color: var(--acci-muted); }
/* No menu suspenso as opções voltam à cor normal: o cinza é do campo fechado. */
.acci-campo select option { color: var(--acci-ink); }
.acci-campo input:focus,
.acci-campo select:focus,
.acci-campo textarea:focus {
	outline: none;
	border-color: var(--acci-verde);
	box-shadow: 0 0 0 3px rgba(47, 125, 34, .16);
}
.acci-form-nota { font-size: 12.5px; color: var(--acci-muted); text-align: center; margin: 0; }
.acci-form-nota svg { vertical-align: -2px; color: var(--acci-verde); margin-right: 5px; }

/* Honeypot — fora da tela, mas não display:none (bot detecta) */
.acci-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.acci-aviso {
	padding: 15px 18px;
	border-radius: 0 var(--acci-raio) var(--acci-raio) 0;
	font-size: 14.5px;
	margin-bottom: 24px;
	border-left: 4px solid;
}
.acci-aviso--ok { background: var(--acci-verde-pal); color: #1d5213; border-color: var(--acci-verde); }
.acci-aviso--erro { background: #fbeae7; color: #7d2519; border-color: #a8321f; }

/* ---------------------------------------------------------------- rodapé -- */

.acci-rod { background: var(--acci-esc); color: #a9b8c2; padding-top: 62px; }
/* Marca + três colunas de navegação: produtos, serviços e institucional. */
.acci-rod-topo { display: grid; grid-template-columns: 1.7fr 1.15fr 1fr 1fr; gap: 44px; padding-bottom: 46px; }
.acci-rod h4 {
	position: relative;
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	margin-bottom: 22px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}
/* DETALHE LARANJA 3/3 — risco sob o título de coluna do rodapé. Decorativo. */
.acci-rod h4::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 34px;
	height: 2px;
	background: var(--acci-laranja);
}
/*
 * O título da coluna é um <button> para funcionar como sanfona no celular.
 * No desktop ele precisa parecer exatamente o que era antes: texto, sem
 * fundo, sem borda e sem cursor de clique.
 */
.acci-rod-tit {
	all: unset;
	display: block;
	width: 100%;
	font: inherit;
	color: inherit;
	cursor: default;
}
.acci-rod-seta { display: none; }

.acci-rod ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.acci-rod a { color: #a9b8c2; font-size: 14.5px; text-decoration: none; }
.acci-rod a:hover { color: var(--acci-verde-viv); text-decoration: none; }
.acci-rod-sobre p { font-size: 14.5px; line-height: 1.75; max-width: 40ch; }
.acci-rod .acci-logo { border-right: 0; padding-right: 0; }
.acci-rod .acci-logo-txt span { color: #a9b8c2; }
.acci-rod-logo { margin-bottom: 22px; }
/* Linha legal: o NAP completo que o briefing pede no rodapé de toda página. */
.acci-rod-fim {
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding: 24px 0 18px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	align-items: center;
	font-size: 13px;
	color: #7e8f9c;
}
.acci-rod-nap { line-height: 1.85; }
.acci-rod-nap a { font-size: 13px; color: #94a6b3; }
.acci-rod-nap a:hover { color: var(--acci-verde-viv); }

/*
 * Copyright — faixa própria, encerrando a página.
 *
 * Fica separado do NAP por um filete discreto para não virar mais uma linha do
 * endereço, que era exatamente o que acontecia no celular.
 */
.acci-rod-copy {
	border-top: 1px solid rgba(255, 255, 255, .08);
	padding: 16px 0 22px;
	font-size: 12.5px;
	line-height: 1.6;
	color: #7e8f9c;
	text-align: right;
}

/* --------------------------------------------------------- voltar ao topo -- */

/*
 * Botão flutuante, no desktop e no celular.
 *
 * z-index 80: abaixo do véu do menu (90) e do cabeçalho (100). Com o menu
 * aberto ele fica sob o escurecimento, que é o comportamento certo — não deve
 * competir com a navegação.
 *
 * O `hidden` do HTML some assim que o JS entra; daí quem manda é o atributo
 * data-visivel. Sem JS o botão nunca aparece, e tudo bem: rolar para o topo
 * continua possível do jeito de sempre.
 */
.acci-subir {
	position: fixed;
	/*
	 * Os dois `bottom` são de propósito: o primeiro é o valor de reserva.
	 *
	 * Navegador que não entenda `env()` descarta a declaração inteira do
	 * segundo — e sem `bottom` o botão fixo cai na posição que teria no fluxo,
	 * ou seja, depois do rodapé, fora da tela. Era assim que ele sumia em
	 * celular antigo. Com o valor simples antes, o pior caso é ficar 18px acima
	 * da borda em vez de respeitar a faixa do gesto do iPhone.
	 */
	bottom: 18px;
	right: clamp(16px, 2.2vw, 28px);
	bottom: calc(clamp(16px, 2.2vw, 28px) + env(safe-area-inset-bottom, 0px));
	z-index: 80;

	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;

	border: 0;
	border-radius: 50%;
	background: var(--acci-verde);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(16, 34, 47, .28);

	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s, background-color .15s ease;
}
.acci-subir[hidden] { display: none; }
.acci-subir[data-visivel="1"] { opacity: 1; visibility: visible; transform: translateY(0); }
.acci-subir:hover { background: var(--acci-verde-esc); }
.acci-subir:active { transform: translateY(1px); }

@media (max-width: 680px) {
	.acci-subir { width: 44px; height: 44px; }
}

/* ------------------------------------------------------------ responsivo -- */

@media (max-width: 1080px) {
	.acci-grade-dif, .acci-passos { grid-template-columns: repeat(2, 1fr); }
	.acci-intro { grid-template-columns: 1fr; gap: 24px; }
	.acci-regioes { grid-template-columns: repeat(2, 1fr); }
	.acci-endereco { grid-template-columns: 1fr; gap: 30px; }
	.acci-prod-duas { grid-template-columns: 1fr; gap: 44px; }
	/* O fluxo deixa de ser horizontal: a seta apontaria para o nada. */
	.acci-fluxo { flex-direction: column; align-items: stretch; }
	.acci-fluxo-item { max-width: none; }
	.acci-fluxo-seta { transform: rotate(90deg); }
	/* O card deixa de invadir a foto pela lateral e passa a subir por baixo. */
	.acci-duo { grid-template-columns: 1fr; }
	.acci-duo-card { margin: -50px 24px 0; }
	.acci-faq-cols { grid-template-columns: 1fr; gap: 44px; }
	.acci-faq-lado { position: static; }
	.acci-orc { grid-template-columns: 1fr; gap: 44px; }
	.acci-rod-topo { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* ==================================================================== */
/* A partir daqui é MODO CELULAR: menu hambúrguer e sem a barra de topo.  */
/* ==================================================================== */

@media (max-width: 960px) {
	/*
	 * A faixa escura do topo sai.
	 *
	 * Ela carrega telefone, e-mail, cidade e WhatsApp em 13,5 px — no celular
	 * virava uma tarja preta de duas linhas empurrando o banner para fora da
	 * primeira tela, para mostrar um texto que ninguém consegue tocar direito.
	 * Telefone e WhatsApp passam para dentro do painel do menu, onde viram
	 * alvo de toque de tamanho decente.
	 */
	.acci-topo { display: none; }

	.acci-grade-ico, .acci-grade-prod, .acci-canais { grid-template-columns: repeat(2, 1fr); }
	.acci-prod-hero { grid-template-columns: 1fr; gap: 32px; }
	.acci-provas .acci-wrap { grid-template-columns: 1fr 1fr; gap: 30px 0; }
	.acci-prova:nth-child(odd) { border-left: 0; }
	/* O antigo `.acci-termos ul { columns: 1 }` saiu daqui: quem decide entre
	   uma e duas colunas agora é o `columns: 230px 2` da própria lista. */

	/*
	 * O hambúrguer vai para a ponta direita.
	 *
	 * Com o menu em `position: fixed`, ele sai do fluxo e deixa de ser item do
	 * flex do cabeçalho — sobravam logo e botão lado a lado, e o hambúrguer
	 * parava no meio da barra, colado no logo. O `margin-left: auto` devolve
	 * ele ao fim, e o padding da .acci-wrap dá o respiro até a borda.
	 */
	.acci-burger { display: flex; margin-left: auto; }
	.acci-cab-cta { display: none; }
	/* Sem o menu ao lado, o filete depois do logo separa do nada. */
	.acci-logo { border-right: 0; padding-right: 0; }
	/*
	 * Painel do menu, colado no topo da janela.
	 *
	 * O botão de fechar deixou de ser absoluto e virou a primeira linha do
	 * painel — antes ele flutuava e o conteúdo precisava de 64 px de padding
	 * para não passar por baixo dele, o que jogava a lista para longe da
	 * borda. Agora o padding é de 14 px e a lista começa logo depois do botão.
	 *
	 * `overscroll-behavior: contain` impede que, ao chegar ao fim da lista, o
	 * gesto continue e role a página atrás do menu.
	 */
	.acci-nav {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(360px, 88vw);
		background: #fff;
		padding: calc(14px + env(safe-area-inset-top, 0px)) 20px calc(28px + env(safe-area-inset-bottom, 0px));
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		box-shadow: -10px 0 40px rgba(16, 34, 47, .18);
		transform: translateX(100%);
		transition: transform .25s ease;
		z-index: 120;
	}
	.acci-nav[data-aberto="1"] { transform: translateX(0); }
	.acci-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
	.acci-nav > ul > li > a { padding: 15px 12px; font-size: 13px; border-bottom: 1px solid var(--acci-linha); }
	.acci-seta { margin-left: auto; }
	.acci-sub {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		border-left: 2px solid var(--acci-verde);
		border-radius: 0;
		margin: 0 0 8px 12px;
		padding: 4px 0 4px 8px;
		display: none;
	}
	.acci-nav li[data-aberto="1"] > .acci-sub { display: block; }

	/* No celular não há "ao lado": o terceiro nível vira sanfona recuada. */
	.acci-sub3 {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		max-height: none;
		overflow: visible;
		box-shadow: none;
		border: 0;
		border-left: 2px solid var(--acci-verde-bor);
		border-radius: 0;
		margin: 2px 0 8px 10px;
		padding: 2px 0 2px 8px;
		display: none;
	}
	.acci-sub-pai[data-aberto="1"] > .acci-sub3 { display: block; }
	.acci-sub-pai > a .acci-seta-lado { transition: transform .15s ease; }
	.acci-sub-pai[data-aberto="1"] > a .acci-seta-lado { transform: rotate(90deg); opacity: 1; }
	/* O título repetido dentro do painel só faz sentido no flutuante. */
	.acci-sub3 .acci-sub-tit { display: none; }
	/* Primeira linha do painel, encostada à direita — não mais flutuante. */
	.acci-nav-fecha {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		margin: 0 0 6px auto;
		border: 1px solid var(--acci-linha);
		border-radius: var(--acci-raio);
		background: #fff;
		cursor: pointer;
		color: var(--acci-ink);
	}
	.acci-nav-cta { display: inline-flex; margin-top: 22px; }

	/* Contato dentro do painel, no lugar da barra de topo que foi escondida. */
	.acci-nav-contato {
		display: grid;
		gap: 2px;
		margin-top: 20px;
		padding-top: 18px;
		border-top: 1px solid var(--acci-linha);
	}
	.acci-nav-contato a {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 12px 0;
		font-size: 15.5px;
		font-weight: 600;
		color: var(--acci-ink);
		text-decoration: none;
	}
	.acci-nav-contato a:hover { color: var(--acci-verde); }
	.acci-nav-contato svg { flex: none; color: var(--acci-verde); }

	/*
	 * O véu escuro fica ABAIXO do cabeçalho, não acima.
	 *
	 * Este era o bug do menu que abria escuro e não deixava clicar: o painel
	 * do menu é filho de .acci-cab, que tem `position: sticky` + `z-index: 100`
	 * e por isso cria um contexto de empilhamento próprio. O `z-index: 120` do
	 * painel valia só DENTRO desse contexto — para o resto da página, o menu
	 * inteiro pesava 100. O véu, irmão do cabeçalho, estava em 110 e portanto
	 * cobria o painel: dava para ver o menu através dele, mas o clique parava
	 * no véu.
	 *
	 * Em 90 o véu escurece a página e continua abaixo do cabeçalho, de onde o
	 * painel sai — que é a ordem certa.
	 */
	.acci-fundo-menu {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(16, 34, 47, .55);
		z-index: 90;
		opacity: 0;
		visibility: hidden;
		transition: opacity .25s ease, visibility .25s;
	}
	.acci-fundo-menu[data-aberto="1"] { opacity: 1; visibility: visible; }
}

@media (max-width: 860px) {
	.acci-sec { padding: 56px 0; }
	.acci-grade-ico { gap: 40px 30px; }
	.acci-item-faq-txt { padding-right: 0; }

	/* Duas colunas de texto longo não cabem: viram uma. */
	.acci-escopo { grid-template-columns: 1fr; }
	/*
	 * As duas curas empilham.
	 *
	 * Espremidas, as colunas ficam com umas 20 letras por linha e o texto de
	 * "Indicada para" vira uma tira de dez linhas. Empilhadas perde-se a leitura
	 * horizontal, mas os rótulos repetidos em cada card mantêm a comparação
	 * possível — foi para isso que eles são idênticos nos dois.
	 *
	 * O mesmo vale para materiais × processos, no Sobre: os dois pares empilham
	 * na mesma largura, porque são o mesmo bloco com miolos diferentes.
	 */
	.acci-curas,
	.acci-termos { grid-template-columns: 1fr; gap: 18px; }
	.acci-curas-cta { justify-content: flex-start; }
	.acci-endereco { gap: 26px; }
	/*
	 * O mapa fica mais alto e menos largo no celular.
	 *
	 * Mantendo 16/7 numa tela de 360px a altura daria 157px: caberia a rua e
	 * mais nada. Em 4/3 dá para ver as avenidas em volta, que é o que permite
	 * situar a fábrica.
	 */
	.acci-mapa { aspect-ratio: 4 / 3; margin-top: 20px; }
	.acci-mapa-rota { text-align: left; }
	.acci-doc-cta { flex-direction: column; align-items: flex-start; }

	/* O banner interno não precisa de tanta altura no celular. */
	.acci-hero { min-height: clamp(380px, 52vh, 460px); }
	.acci-hero--interno { min-height: clamp(240px, 32vh, 300px); }
	.acci-hero .acci-wrap { padding-top: 56px; padding-bottom: 56px; }
}

/* ------------------------------------------------------------- celular -- */

@media (max-width: 680px) {
	.acci-wrap { padding: 0 18px; }

	/* Uma coluna em tudo o que é grade. */
	.acci-grade-ico,
	.acci-grade-prod,
	.acci-grade-dif,
	.acci-passos,
	.acci-canais,
	.acci-escopo,
	.acci-prod-hero,
	.acci-form-2 { grid-template-columns: 1fr; }

	/* `.acci-termos` saiu destas duas regras: o par de cards já empilha em 860px,
	   junto com `.acci-curas`, e o gap de 30px daqui brigava com o de lá. */
	.acci-prod-hero { gap: 26px; }
	.acci-grade-ico { gap: 36px 0; }

	/*
	 * Botão em bloco e texto que quebra.
	 *
	 * O padrão do botão é `white-space: nowrap`, que numa tela de 360 px faz
	 * rótulo longo — "Enviar pedido de orçamento" — estourar a lateral e criar
	 * rolagem horizontal na página inteira.
	 */
	.acci-btn {
		white-space: normal;
		text-align: center;
		padding: 15px 22px;
	}
	.acci-hero-acoes { flex-direction: column; align-items: stretch; }
	.acci-hero-acoes .acci-btn { width: 100%; }
	.acci-faixa .acci-wrap { flex-direction: column; }
	.acci-faixa .acci-btn { width: 100%; }
	.acci-rodape-sec .acci-btn { width: 100%; }
	.acci-doc-cta .acci-btn { width: 100%; }

	/* Cabeçalho mais baixo, para sobrar tela. */
	.acci-cab .acci-wrap { min-height: 64px; gap: 12px; }
	.acci-logo img { height: 34px; }
	.acci-logo-txt span { font-size: 10px; letter-spacing: .14em; }
	.acci-burger { width: 44px; height: 44px; }

	/* A ficha empilha rótulo e valor: 38%/62% não cabe. */
	.acci-ficha th { width: auto; display: block; padding: 16px 18px 2px; border-bottom: 0; }
	.acci-ficha td { display: block; padding: 0 18px 16px; }

	.acci-regioes,
	.acci-duo-card .acci-regioes { grid-template-columns: 1fr 1fr; gap: 24px; }

	.acci-duo-card { margin: -28px 0 0; padding: 30px 22px; }
	.acci-mosaico { gap: 6px; }

	/*
	 * Rodapé sanfonado.
	 *
	 * Empilhadas, as três colunas somavam treze links e quase duas telas de
	 * rolagem só de rodapé. Recolhidas, viram três linhas: quem quer navegar
	 * abre a que interessa.
	 *
	 * A régua laranja do h4 sai aqui — o divisor de cada linha já separa, e
	 * dois traços no mesmo lugar viram sujeira.
	 */
	.acci-rod { padding-top: 48px; }
	.acci-rod-topo { grid-template-columns: 1fr; gap: 0; padding-bottom: 28px; }
	.acci-rod-sobre { margin-bottom: 26px; }

	.acci-rod-col { border-top: 1px solid rgba(255, 255, 255, .12); }
	.acci-rod-col:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, .12); }

	.acci-rod-col h4 {
		margin: 0;
		padding: 0;
		border-bottom: 0;
	}
	.acci-rod-col h4::after { display: none; }

	.acci-rod-tit {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		padding: 17px 0;
		cursor: pointer;
	}
	.acci-rod-seta {
		display: grid;
		place-items: center;
		flex: none;
		color: var(--acci-verde-viv);
		transition: transform .2s ease;
	}
	.acci-rod-col[data-aberto="1"] .acci-rod-seta { transform: rotate(180deg); }

	/*
	 * A lista abre com altura animada, não alternando display.
	 *
	 * Com `display: none` → `display: grid` os treze links surgiam de um golpe
	 * e o rodapé dava um pulo — era isso que parecia bruto. Aqui o CSS guarda o
	 * estado fechado e o tempo da transição, e o JS mede a altura real da lista
	 * para animar até ela. Quem pediu menos movimento no sistema não recebe
	 * animação nenhuma: o JS verifica prefers-reduced-motion.
	 *
	 * O respiro de baixo é margem do último link, e não padding da lista, de
	 * propósito: padding entra na conta da altura e faria a animação tropeçar
	 * no último quadro.
	 *
	 * O `visibility` existe para o teclado — sem ele, os links de uma coluna
	 * fechada continuariam recebendo foco, invisíveis, dentro da faixa de
	 * altura zero.
	 */
	.acci-rod-col ul {
		display: grid;
		height: 0;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		padding-bottom: 0;
		transition: height .32s cubic-bezier(.33, 1, .68, 1), opacity .24s ease, visibility .32s;
	}
	.acci-rod-col[data-aberto="1"] ul { opacity: 1; visibility: visible; }
	.acci-rod-col ul li:last-child { margin-bottom: 20px; }
	.acci-rod-col ul a { display: block; padding: 5px 0; }

	/* O dedo precisa saber que acertou o alvo antes de a lista começar a abrir. */
	.acci-rod-tit { transition: color .15s ease; -webkit-tap-highlight-color: transparent; }
	.acci-rod-tit:active { color: var(--acci-verde-viv); }
	.acci-rod-tit:focus-visible { outline: 2px solid var(--acci-verde-viv); outline-offset: 2px; }

	.acci-rod-fim { flex-direction: column; align-items: flex-start; gap: 14px; padding-bottom: 16px; }
	/* Centralizado e sozinho na última faixa — é o fecho da página. */
	.acci-rod-copy { text-align: center; padding: 16px 0 24px; }

	.acci-doc h2 { font-size: 1.28rem; margin-top: 34px; padding-top: 22px; }
	.acci-doc p, .acci-doc li { font-size: 15.5px; }

	.acci-item-faq > summary { font-size: 1.05rem; gap: 12px; padding: 18px 2px; }
	.acci-cab-sec { margin-bottom: 34px; }
	.acci-cab-sec p { font-size: 15.5px; }
}

/* ----------------------------------------------------- celular estreito -- */

@media (max-width: 430px) {
	/*
	 * A barra de provas só vira coluna única aqui.
	 *
	 * Em 680 px ela ainda cabia em dois pares; empilhar os quatro números já
	 * naquela largura rendia meia tela de rolagem para quatro linhas de texto.
	 */
	.acci-provas .acci-wrap { grid-template-columns: 1fr; gap: 0; }
	.acci-prova { border-left: 0 !important; padding: 0 0 22px; }
	.acci-prova + .acci-prova { padding-top: 22px; border-top: 1px solid var(--acci-linha); }
	.acci-prova:last-child { padding-bottom: 0; }

	.acci-regioes,
	.acci-duo-card .acci-regioes { grid-template-columns: 1fr; gap: 22px; }
	.acci-wrap { padding: 0 16px; }
	/*
	 * A assinatura fica, mesmo aqui.
	 *
	 * Antes ela sumia nesta largura porque dividia o espaço com o nome da
	 * empresa em 21px, e os dois juntos empurravam o hambúrguer. Sem o nome
	 * repetido, sobra folga — e esconder a única linha de texto deixaria o
	 * logotipo sem dizer o ramo em justamente quem mais precisa disso.
	 */
	.acci-logo-txt span { font-size: 9px; letter-spacing: .12em; }
}

@media (prefers-reduced-motion: reduce) {
	.acci-home *, .acci-home *::before, .acci-home *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}