/* =========================================================
   Facchini — ajustes que o theme.json não cobre
   ========================================================= */

/* =========================================================
   GRADE ÚNICA DO SITE
   Uma largura só para tudo: header, blocos próprios e o layout "constrained"
   do WP. --fcc-max espelha `settings.layout.contentSize` e --fcc-gutter espelha
   `styles.spacing.padding` do theme.json — mudar um sem o outro faz o header e
   os blocos saírem do x das seções montadas no editor.

   Dois formatos, ambos com o miolo em --fcc-max centralizado:
     A) invólucro próprio do bloco
        max-width: var(--fcc-container); margin-inline: auto; padding-inline: var(--fcc-gutter);
     B) seção com respiro + filho limitado
        seção { padding-inline: var(--fcc-gutter); }
        filho { max-width: var(--fcc-max); margin-inline: auto; }

   Não usar `7vw` nem `100vw` para isso: o vw ignora a barra de rolagem e conta
   a viewport inteira, então o inset deixa de bater com o das seções do WP (px).
   ========================================================= */
:root {
	/* 1366px é o valor confirmado com o cliente (design/TOKENS.md). O tema
	   estava em 1280px por deriva; agora o número mora só aqui e no
	   theme.json (contentSize e wideSize), que têm de acompanhar. */
	--fcc-max: 1366px;
	--fcc-gutter: clamp(1.5rem, 5vw, 4rem);
	--fcc-container: calc(var(--fcc-max) + var(--fcc-gutter) * 2);
}

/* O tema não tem reset global de box-sizing (de propósito). Sem border-box AQUI
   o formato A sai errado e silencioso: o max-width passa a valer para o miolo,
   as duas goteiras somam POR FORA e o bloco fica 128px mais largo que as seções
   do WP — foi o que deixou os blocos de produto em 1408px em vez de 1280px. */
.fcc-banner__inner,
.fcc-pbarra__inner,
.fcc-caract__inner,
.fcc-botoes__inner,
.fcc-detalhes__inner,
.fcc-catalogo__inner,
.fcc-medidas__inner { box-sizing: border-box; }

/* ---- Header fixo, sobreposto, preso no topo ---- */
header.wp-block-template-part {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
}
.admin-bar header.wp-block-template-part { top: 32px; }

/* O header é position:fixed, mas continua sendo o 1º filho de .wp-site-blocks,
   então o <main> (2º filho) herda o margin-block-start do block-gap raiz (~24px)
   e empurra o conteúdo pra baixo. Como o header é fixo, o main não precisa de gap. */
.wp-site-blocks > main { margin-block-start: 0 !important; }

/* Conteúdo boxed desce para não ficar sob o header fixo.
   O modelo "Largura total" (main.alignfull) fica de propósito atrás. */
.wp-site-blocks > main:not(.alignfull) { padding-top: 10rem !important; }

/* Modelo "Largura total": sem padding e sem gaps entre as seções full-bleed
   (cada bloco de seção gerencia o próprio espaçamento).

   O `>` antes de .wp-block-post-content é essencial e não estético. Nas páginas
   do kit o post-content é filho DIRETO do main, e seus filhos são as seções
   .fcc-sec — é aí que o gap precisa morrer. Como descendente (espaço), este
   `margin-block: 0 !important` alcançava também um post-content aninhado DENTRO
   de uma seção — o caso da notícia, em que os filhos são parágrafos — e zerava
   a margem de todo parágrafo do artigo, deixando o texto num bloco só. */
.wp-site-blocks > main.alignfull { padding: 0; }
.wp-site-blocks > main.alignfull > .wp-block-post-content > *,
.wp-site-blocks > main.alignfull > * { margin-block: 0 !important; }

/* ---- Barra do header: blur no fundo + encolher no scroll ---- */
.fcc-header-bar {
	position: relative;
	padding: 3.4rem var(--fcc-gutter);
	transition: padding .3s ease, background-color .3s ease;
}
/* O blur fica num pseudo-elemento (não é ancestral do menu), senão o
   backdrop-filter viraria "containing block" e prenderia o overlay do
   hambúrguer à altura do header. */
.fcc-header-bar::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	pointer-events: none;
}
header.wp-block-template-part.is-shrunk .fcc-header-bar {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

/* Linha do header (acima do pseudo do blur) */
.fcc-header-row {
	position: relative; z-index: 1; width: 100%;
	/* Formato B da grade única: o respiro está na barra, o teto está aqui —
	   é isto que põe o menu no mesmo x do hero, da trilha e do rodapé. */
	max-width: var(--fcc-max);
	margin-inline: auto;
}
.fcc-header-right { display: flex; align-items: center; gap: 1.5rem; }
.fcc-header-icons { display: flex; align-items: center; gap: 1rem; color: #FF0000; }
/* text-decoration vem do theme.json (elements.link: vermelho + underline no hover), que
   o WP publica como CSS global. Tem de ser cancelado no PRÓPRIO <a>: decoração de
   ancestral não é removível no descendente, então `none` no .fcc-lang-code não bastaria. */
.fcc-header-icons a,
.fcc-header-icons a:hover,
.fcc-header-icons a:focus-visible,
.fcc-header-icons .fcc-header-icon-off {
	color: inherit;
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	text-decoration: none;
}
.fcc-header-icons a { transition: color .18s ease; }
/* Hover branco no ÍCONE: o SVG usa stroke=currentColor, então segue a cor do link.
   :focus-visible cobre quem navega por teclado. */
.fcc-header-icons a:hover,
.fcc-header-icons a:focus-visible { color: #fff; }
.fcc-header-icons svg { width: 20px; height: 20px; flex: none; }
.fcc-lang-trigger { cursor: pointer; }
/* Sigla do idioma ao lado do globo (PT / EN / ES): branca já no estado normal, não
   herda o vermelho do grupo de ícones. */
.fcc-lang-code {
	color: #fff;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
	.fcc-header-icons a { transition: none; }
}
.fcc-logo img { display: block; height: 35px; width: auto; transition: height .3s ease; }
header.wp-block-template-part.is-shrunk .fcc-logo img { height: 26px; }

/* Itens do menu (bloco Navigation): negrito, sem underline, hover vermelho */
.fcc-header-bar .wp-block-navigation a {
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	transition: color .2s ease;
}
.fcc-header-bar .wp-block-navigation a:hover,
.fcc-header-bar .wp-block-navigation .current-menu-item > a {
	color: #FF0000;
	text-decoration: none;
}

/* ---- Mega-menu (overlay de produtos) — mesmo vidro do header ---- */
.fcc-megamenu {
	position: fixed; inset: 0; z-index: 1000;
	background: #00000085;
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	color: #fff;
	display: flex; flex-direction: column;
	padding: 0;                     /* sem padding externo → as linhas encostam nas bordas */
	opacity: 0; visibility: hidden; pointer-events: none;
	transform: translateY(-12px);
	transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
	overflow-y: auto;
	/* Reserva a calha da barra de rolagem sempre: sem isto, uma família com muitos
	   produtos faz a barra aparecer e o overlay inteiro desloca alguns pixels. */
	scrollbar-gutter: stable;
}
.fcc-megamenu.is-open {
	opacity: 1; visibility: visible; pointer-events: auto;
	transform: none;
	transition: opacity .35s ease, transform .35s ease;
}

/* Topo do overlay: só o X (o inset horizontal vive aqui, não no container) */
.fcc-mm-top { display: flex; align-items: center; padding: 1.6rem 7vw; }
.fcc-mm-close { background: none; border: 0; padding: 0; cursor: pointer; color: #FF0000; display: inline-flex; }
.fcc-mm-close svg { width: 30px; height: 30px; }

/* grid-template-rows: 1fr faz as colunas esticarem até a base → bordas verticais encostam embaixo
   As colunas usam minmax(0, Xfr), NÃO Xfr puro: `1fr` equivale a minmax(auto, 1fr), então o item
   mais largo do painel (nome de produto comprido) empurra a coluna e as três larguras mudavam a
   cada família clicada. Com minmax(0, ...) a trilha é sempre a mesma fração e o texto quebra. */
.fcc-mm-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.7fr); grid-template-rows: minmax(0, 1fr); border-top: 1px solid rgba(255,255,255,.15); flex: 1; min-height: 0; }
.fcc-mm-col { padding: 2.5rem 2.5rem; }
/* colunas das pontas recebem o respiro lateral, mantendo as linhas coladas nas bordas */
.fcc-mm-col:first-child { padding-left: 7vw; }
.fcc-mm-col:last-child { padding-right: 7vw; }
.fcc-mm-col + .fcc-mm-col { border-left: 1px solid rgba(255,255,255,.15); }

.fcc-mm-families { display: flex; flex-direction: column; gap: 1.05rem; }
.fcc-mm-fam {
	background: none; border: 0; padding: 0; margin: 0; text-align: left; cursor: pointer;
	font-family: inherit; font-size: .9rem; font-weight: 700; letter-spacing: .05em;
	text-transform: uppercase; color: #fff; transition: color .2s ease;
}
.fcc-mm-fam.is-active, .fcc-mm-fam:hover { color: #FF0000; }

/* Sem respiro lateral: a coluna do meio é a mais apertada e o nome da família precisa
   de toda a largura disponível. As bordas verticais são das colunas vizinhas. */
.fcc-mm-center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2rem; padding-inline: .5rem; }
.fcc-mm-ghost {
	/* Teto do CSS; o theme.js encolhe a partir daqui até a maior PALAVRA caber inteira
	   (ver ajustarGhost). O piso vive no JS, não aqui. */
	font-size: clamp(1.75rem, 3.6vw, 3.4rem);
	font-weight: 800; letter-spacing: -.02em;
	text-transform: uppercase;  -webkit-text-stroke: 1.5px rgba(255,255,255,.28);
	line-height: 1.05;
	/* width:100% é o que torna a medição possível: em flex-column com align-items:center
	   o filho encolhe até o conteúdo, e scrollWidth nunca passaria de clientWidth. */
	width: 100%; max-width: 100%;
	/* Nunca partir palavra ao meio — quebra só entre palavras; se não couber, o JS reduz. */
	overflow-wrap: normal; word-break: keep-all; hyphens: none;
}
.fcc-mm-families { min-width: 0; }
.fcc-mm-fam { overflow-wrap: anywhere; }
.fcc-mm-explore {
	background: #FF0000; color: #fff; text-decoration: none; text-transform: uppercase;
	font-weight: 700; letter-spacing: .05em; font-size: .85rem; padding: 1rem 2.5rem;
	transition: background .2s ease;
}
.fcc-mm-explore:hover { background: #CC0000; }

/* A coluna de produtos rola por dentro: a família com mais itens não pode esticar o
   overlay e mudar o enquadramento das outras duas colunas. */
.fcc-mm-items { overflow-y: auto; scrollbar-gutter: stable; overscroll-behavior: contain; }

/* Um painel por família; todos no HTML, só o ativo visível (bloco facchini/megamenu-produtos). */
.fcc-mm-panel { display: none; }
.fcc-mm-panel.is-active { display: block; }
/* O bloco entra com a wrapper do Gutenberg; o layout é o do #fcc-megamenu. */
.fcc-mm-items-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; }
.fcc-mm-subcol { display: flex; flex-direction: column; gap: 1.05rem; min-width: 0; }
.fcc-mm-subcol a {
	color: rgba(255,255,255,.55); text-decoration: none; text-transform: uppercase;
	font-size: .8rem; font-weight: 500; letter-spacing: .04em; line-height: 1.3em; transition: color .2s ease;
	/* Nomes longos ("Transporte de Bagaço de Cana | Cavaco de Madeira") quebram em vez
	   de alargar a coluna. */
	overflow-wrap: anywhere;
}
.fcc-mm-subcol a:hover { color: #FF0000; }

/* Painel de um grupo ("Sobre Chassis"): uma seção por subfamília, fluindo em colunas.
   break-inside mantém cada subfamília inteira numa coluna, com o subtítulo junto. */
.fcc-mm-secoes { columns: var(--fcc-mm-cols, 2); column-gap: 2.5rem; }
.fcc-mm-secao { break-inside: avoid; margin-bottom: 2rem; }
.fcc-mm-secao__titulo {
	display: block; margin-bottom: 1rem; padding-bottom: .6rem;
	border-bottom: 1px solid rgba(255,255,255,.15);
	color: #fff; text-decoration: none; text-transform: uppercase;
	font-size: .85rem; font-weight: 700; letter-spacing: .05em;
	overflow-wrap: anywhere; transition: color .2s ease;
}
a.fcc-mm-secao__titulo:hover { color: #FF0000; }

/* trava a rolagem da página com o mega-menu aberto */
.fcc-noscroll { overflow: hidden !important; }

/* ---- Modal de idiomas (centralizado, backdrop no padrão vidro escuro) ---- */
.fcc-modal {
	position: fixed; inset: 0; z-index: 1200;
	display: flex; align-items: center; justify-content: center;
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .3s ease, visibility 0s linear .3s;
}
.fcc-modal.is-open {
	opacity: 1; visibility: visible; pointer-events: auto;
	transition: opacity .3s ease;
}
.fcc-modal__backdrop {
	position: absolute; inset: 0;
	background: #00000085;
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}
.fcc-modal__box {
	position: relative; z-index: 1;
	background: #1B1E24; color: #fff;
	width: min(92vw, 460px);
	padding: 2.75rem 2.75rem 3rem;
	text-align: center;
	box-shadow: 0 24px 70px rgba(0,0,0,.55);
	transform: translateY(12px);
	transition: transform .3s ease;
}
.fcc-modal.is-open .fcc-modal__box { transform: none; }
.fcc-modal__close {
	position: absolute; top: 1rem; right: 1rem;
	background: none; border: 0; padding: 0; cursor: pointer;
	color: #FF0000; display: inline-flex;
}
.fcc-modal__close svg { width: 24px; height: 24px; }
.fcc-modal__title {
	font-size: 1rem; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; margin: 0 0 2.2rem;
}
.fcc-langs { display: flex; gap: 1.75rem; justify-content: center; }
.fcc-lang {
	display: flex; flex-direction: column; align-items: center; gap: .7rem;
	text-decoration: none; color: #fff;
	font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
	transition: color .2s ease;
}
.fcc-lang:hover { color: #FF0000; }
.fcc-flag {
	width: 48px; height: 48px; border-radius: 50%; display: block;
	box-shadow: 0 0 0 2px rgba(255,255,255,.18);
	transition: box-shadow .2s ease, transform .2s ease;
}
.fcc-lang:hover .fcc-flag { transform: scale(1.06); box-shadow: 0 0 0 2px #FF0000; }

/* =========================================================
   Motion — estados iniciais dos reveals (padrão data-anim)
   Só escondem quando há JS (.fcc-motion) e o usuário permite movimento.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
	.fcc-motion [data-anim]:not([data-anim="stagger"]) { opacity: 0; will-change: transform, opacity; }
	.fcc-motion [data-anim="stagger"] [data-anim-item] { opacity: 0; will-change: transform, opacity; }
}

/* =========================================================
   Bloco: Facchini — Hero (carrossel Swiper)
   ========================================================= */
.fcc-hero { position: relative; width: 100%; overflow: hidden; color: #fff; }
.fcc-hero, .fcc-hero .swiper-slide { height: 100vh; min-height: 560px; }
.fcc-hero__slide { position: relative; overflow: hidden; }
.fcc-hero__bg {
	position: absolute; inset: 0; z-index: 0;
	background-size: cover; background-position: center;
	transform: scale(1.001); /* evita "pulo" no início do Ken Burns */
}
/* Fundo do slide agora é <img> real (LCP-friendly); replica o background-size:cover/center. */
.fcc-hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* Ken Burns suave no slide ativo (front: Swiper; editor: .is-active) */
@media (prefers-reduced-motion: no-preference) {
	.fcc-hero .swiper-slide-active .fcc-hero__bg,
	.fcc-hero .fcc-hero__slide.is-active .fcc-hero__bg { animation: fccKenBurns 7s ease-out both; }
}
@keyframes fccKenBurns { from { transform: scale(1.001); } to { transform: scale(1.09); } }

.fcc-hero__overlay {
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.5));
}
.fcc-hero__content {
	position: relative; z-index: 2; height: 100%;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center; gap: 1.6rem; padding: 0 7vw;
}
.fcc-hero__eyebrow {
	margin: 0; text-transform: uppercase; letter-spacing: .18em;
	font-size: .85rem; font-weight: 700;
}
.fcc-hero__title {
	margin: 0; text-transform: uppercase; font-weight: 800; letter-spacing: -.01em;
	font-size: clamp(2rem, 5.5vw, 4.5rem); line-height: 1.02;
}
.fcc-hero__btn {
	display: inline-block; background: #FF0000; color: #fff; text-decoration: none;
	text-transform: uppercase; font-weight: 700; letter-spacing: .05em; font-size: .9rem;
	padding: 1.1rem 3rem; transition: background .2s ease;
}
.fcc-hero__btn:hover { background: #CC0000; }

/* Paginação (Swiper) estilizada como tracinhos */
.fcc-hero__dots.swiper-pagination {
	position: absolute; left: 0; right: 0; bottom: 2.2rem; z-index: 3;
	display: flex; gap: .6rem; justify-content: center; width: auto;
}
.fcc-hero__dot {
	width: 34px; height: 3px; border: 0; padding: 0; border-radius: 0;
	background: rgba(255,255,255,.45); cursor: pointer; transition: background .2s ease;
	opacity: 1;
}
.fcc-hero__dot.is-active { background: #FF0000; }

/* Desconta a admin bar (usuário logado) p/ o Hero não estourar 100vh */
.admin-bar .fcc-hero,
.admin-bar .fcc-hero .swiper-slide { height: calc(100vh - 32px); }

/* Some com parágrafo vazio que o editor às vezes deixa acima de seções full-width */
.wp-site-blocks > main.alignfull > .wp-block-post-content > p:empty { display: none; }

/* Prévia no editor: altura reduzida p/ caber no canvas */
.fcc-hero--editor, .fcc-hero--editor .fcc-hero__slide { height: 70vh; min-height: 480px; }
.fcc-hero--editor .fcc-hero__slide { position: absolute; inset: 0; }
.fcc-hero__editor-hint {
	position: absolute; top: 1rem; left: 1rem; z-index: 5;
	background: rgba(0,0,0,.6); color: #fff; font-size: .72rem; padding: .35rem .6rem;
}
/* Navegação entre slides DENTRO do canvas do editor.
   Precisa de z-index acima de .fcc-hero__content (2) porque o slide da prévia é
   position:absolute/inset:0 e cobriria estes botões. Não usa .fcc-hero__dots:
   aquele layout depende de .swiper-pagination, classe que só existe no front. */
.fcc-hero--editor .fcc-hero__editor-nav {
	position: absolute; left: 0; right: 0; bottom: 1.2rem; z-index: 6;
	display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center;
}
.fcc-hero__editor-navbtn {
	min-width: 30px; height: 26px; padding: 0 .5rem; border: 0; border-radius: 3px;
	background: rgba(0,0,0,.55); color: #fff; cursor: pointer;
	font-size: .72rem; font-weight: 700; line-height: 26px;
	transition: background .2s ease;
}
.fcc-hero__editor-navbtn:hover { background: rgba(0,0,0,.85); }
.fcc-hero__editor-navbtn.is-active { background: #FF0000; }
@media (max-width: 782px) {
	.fcc-hero__btn { padding: .9rem 2.2rem; }
	.fcc-hero__dots.swiper-pagination { bottom: 1.4rem; }
	/* admin bar fica 46px nesse breakpoint */
	.admin-bar .fcc-hero,
	.admin-bar .fcc-hero .swiper-slide { height: calc(100vh - 46px); }
}

/* =========================================================
   Ajustes exclusivos do editor (Site/Page editor)
   `.editor-styles-wrapper` só existe no editor — não afeta o front.
   ========================================================= */
/* Blocos HTML personalizados (ícones, logo, selos, parceiros) não devem
   exibir fundo branco na prévia sobre o header/rodapé escuros. */
.editor-styles-wrapper .wp-block-html,
.editor-styles-wrapper [data-type="core/html"] { background: transparent !important; }

/* =========================================================
   Bloco: Facchini — Barra de atalhos
   ========================================================= */
.fcc-barra {
	background: #000;
	border-top: 2px solid #FF0000;
	padding: 1.6rem var(--fcc-gutter);
}
.fcc-barra__inner {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: 1.2rem 4.5rem;
	max-width: var(--fcc-max); margin-inline: auto;
}
.fcc-barra__item {
	display: inline-flex; align-items: center; gap: 1rem;
	color: #e6e6e6; text-decoration: none;
	text-transform: uppercase; letter-spacing: .16em; font-size: 13px; font-weight: 600;
	transition: color .2s ease; cursor: pointer;
}
.fcc-barra__item:hover, .fcc-barra__item.is-active { color: #FF0000; }
/* Ícone em cinza suave (hierarquia); acompanha o vermelho no hover */
.fcc-barra__icon { display: inline-flex; color: #69727d; transition: color .2s ease; }
.fcc-barra__item:hover .fcc-barra__icon,
.fcc-barra__item.is-active .fcc-barra__icon { color: #FF0000; }
.fcc-barra__icon svg { width: 44px; height: 44px; display: block; }
.fcc-barra__icon img { height: 44px; width: auto; display: block; }
.fcc-barra__label { line-height: 1; }

/* Mobile: itens em coluna (ícone acima do texto), lado a lado */
@media (max-width: 600px) {
	.fcc-barra { padding: 1.4rem var(--fcc-gutter); }
	.fcc-barra__inner { gap: 1.4rem; justify-content: space-around; }
	.fcc-barra__item {
		flex-direction: column; gap: .55rem; text-align: center;
		font-size: 11px; letter-spacing: .12em; flex: 1;
	}
	.fcc-barra__icon svg, .fcc-barra__icon img { width: 34px; height: 34px; }
}

/* =========================================================
   Bloco: Facchini — Lançamentos (carrossel de produtos)
   ========================================================= */
.fcc-lanc {
	position: relative; color: #fff; text-align: center; overflow: hidden;
	background: linear-gradient(to bottom, #24272F 0%, #24272F 62%, #fff 62%, #fff 100%);
	padding: 4rem var(--fcc-gutter) 3rem;
}
.fcc-lanc__eyebrow {
	color: #FF0000; text-transform: uppercase; font-weight: 700;
	letter-spacing: .14em; font-size: .9rem; margin: 0 0 .3rem;
}
.fcc-lanc__swiper { position: relative; max-width: var(--fcc-max); margin-inline: auto; }
.fcc-lanc__slide { display: flex; flex-direction: column; align-items: center; }
.fcc-lanc__head { position: relative; z-index: 2; }
.fcc-lanc__name {
	color: #4E5561; margin: 0;
	font-size: clamp(2.2rem, 9vw, 7.5rem); font-weight: 800;
	text-transform: uppercase; letter-spacing: -.01em; line-height: 1;
}
.fcc-lanc__btn {
	display: inline-block; margin-top: 1.3rem;
	background: #FF0000; color: #fff; text-decoration: none;
	text-transform: uppercase; font-weight: 700; letter-spacing: .05em; font-size: .85rem;
	padding: 1rem 2.6rem; transition: background .2s ease;
}
.fcc-lanc__btn:hover { background: #CC0000; }
.fcc-lanc__image { margin-top: 1rem; width: 100%; }
.fcc-lanc__image img { max-width: 100%; max-height: 50vh; width: auto; height: auto; margin: 0 auto; display: block; }
/* Paginação em tracinhos (igual ao hero); base branca → cinza sobre branco */
.fcc-lanc__dots.swiper-pagination {
	position: relative; z-index: 2; width: auto;
	display: flex; justify-content: center; gap: .6rem; margin-top: 1.8rem;
}
.fcc-lanc__dot {
	width: 34px; height: 3px; border: 0; padding: 0; border-radius: 0;
	background: #c7cace; cursor: pointer; transition: background .2s ease; opacity: 1;
}
.fcc-lanc__dot.is-active { background: #FF0000; }
@media (max-width: 782px) {
	.fcc-lanc { padding: 3rem var(--fcc-gutter) 2.5rem; }
	.fcc-lanc__image img { max-height: 38vh; }
}

/* =========================================================
   Bloco: Facchini — Descubra Mais (grid de cards)
   ========================================================= */
.fcc-descubra { background: #fff; padding: 4rem var(--fcc-gutter); }
.fcc-descubra__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; max-width: var(--fcc-max); margin-inline: auto; }
.fcc-descubra__card { display: flex; flex-direction: column; text-decoration: none; color: #1B1E24; cursor: pointer; }
/* media não recorta (p/ o badge sobrepor); o zoom é recortado no imgwrap */
.fcc-descubra__media { position: relative; aspect-ratio: 4 / 3; }
.fcc-descubra__imgwrap { position: absolute; inset: 0; overflow: hidden; background: #eee; }
.fcc-descubra__imgwrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.fcc-descubra__card:hover .fcc-descubra__imgwrap img { transform: scale(1.05); }
.fcc-descubra__ph { width: 100%; height: 100%; background: #eee; } /* placeholder no editor */
/* Badge vermelho sobreposto, deslocado da esquerda e ultrapassando a base */
.fcc-descubra__badge {
	position: absolute; left: 24px; bottom: -22px; z-index: 2;
	width: 56px; height: 56px; background: #FF0000; color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
}
.fcc-descubra__badge svg { width: 26px; height: 26px; display: block; }
.fcc-descubra__badge img { width: 26px; height: 26px; object-fit: contain; display: block; }
.fcc-descubra__kicker {
	margin-top: 2.7rem; padding-left: 24px;
	color: #9AA0A6; text-transform: uppercase; font-weight: 700; letter-spacing: .08em; font-size: .78rem;
}
.fcc-descubra__title {
	margin-top: .35rem; padding-left: 24px; color: #1B1E24;
	text-transform: uppercase; font-weight: 800; letter-spacing: .01em;
	font-size: 1.45rem; line-height: 1.05; transition: color .2s ease;
}
.fcc-descubra__card:hover .fcc-descubra__title { color: #FF0000; }
@media (max-width: 900px) {
	.fcc-descubra__grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem 1.2rem; }
}
@media (max-width: 520px) {
	.fcc-descubra { padding: 3rem var(--fcc-gutter); }
	.fcc-descubra__grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Bloco: Facchini — Banner CTA (imagem de fundo + chamada)
   ========================================================= */
/* Wrapper externo = entorno da seção (cor do tema). Sempre ocupa a largura toda;
   no modo boxed, o QUADRO interno é que fica na largura de conteúdo, e esta cor
   aparece ao redor. */
.fcc-banner { background-color: #1B1E24; }
.fcc-banner.is-theme-light { background-color: #fff; }

/* Quadro da imagem (boxed ou full). Recebe a imagem de fundo e o conteúdo. */
.fcc-banner__frame {
	position: relative; display: flex; align-items: center; overflow: hidden;
	background-size: cover; background-position: center;
	color: #fff;
}
/* Boxed: bloco sem align full/wide → o quadro limita à largura de conteúdo e centraliza */
.fcc-banner:not(.alignfull):not(.alignwide) .fcc-banner__frame {
	max-width: var(--fcc-max);
	margin-inline: auto;
}
.fcc-banner__overlay { position: absolute; inset: 0; z-index: 1; }
.fcc-banner__inner {
	position: relative; z-index: 2; width: 100%; display: flex;
	/* Formato A da grade única. */
	max-width: var(--fcc-container); margin-inline: auto; padding-inline: var(--fcc-gutter);
}
.fcc-banner__frame.is-pos-left   .fcc-banner__inner { justify-content: flex-start; text-align: left; }
.fcc-banner__frame.is-pos-center .fcc-banner__inner { justify-content: center; text-align: center; }
.fcc-banner__frame.is-pos-right  .fcc-banner__inner { justify-content: flex-end; text-align: right; }
.fcc-banner__content { max-width: 620px; display: flex; flex-direction: column; text-shadow: 0 2px 22px rgba(0,0,0,.35); }
.fcc-banner__frame.is-pos-left   .fcc-banner__content { align-items: flex-start; }
.fcc-banner__frame.is-pos-center .fcc-banner__content { align-items: center; }
.fcc-banner__frame.is-pos-right  .fcc-banner__content { align-items: flex-end; }
.fcc-banner__eyebrow {
	margin: 0 0 .4rem; text-transform: uppercase; letter-spacing: .14em;
	font-weight: 700; font-size: .9rem;
}
.fcc-banner__title {
	margin: 0; text-transform: uppercase; font-weight: 800; letter-spacing: -.01em;
	font-size: clamp(2rem, 5vw, 4.2rem); line-height: 1;
}
.fcc-banner__btn {
	display: inline-block; margin-top: 1.6rem; text-shadow: none;
	background: #FF0000; color: #fff; text-decoration: none;
	text-transform: uppercase; font-weight: 700; letter-spacing: .05em; font-size: .85rem;
	padding: 1rem 2.6rem; transition: background .2s ease;
}
.fcc-banner__btn:hover { background: #CC0000; }
/* Quadro sem imagem: herda a cor do entorno; no tema claro adapta o texto. */
.fcc-banner__frame.is-empty .fcc-banner__content { text-shadow: none; }
.fcc-banner.is-theme-light .fcc-banner__frame.is-empty { color: #1B1E24; }
.fcc-banner.is-theme-light .fcc-banner__frame.is-empty .fcc-banner__eyebrow { color: #FF0000; }
@media (max-width: 600px) {
	.fcc-banner__inner { padding-inline: var(--fcc-gutter); }
	.fcc-banner__content { max-width: 100%; }
}

/* =========================================================
   Bloco: Facchini — Colagem de mídia
   ========================================================= */
.fcc-colagem { background: #fff; color: #1B1E24; padding: 5rem var(--fcc-gutter); overflow: hidden; }
.fcc-colagem__inner {
	display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: center;
	max-width: var(--fcc-max); margin: 0 auto;
}
.fcc-colagem__eyebrow {
	margin: 0 0 .6rem; color: #FF0000; text-transform: uppercase;
	letter-spacing: .14em; font-weight: 700; font-size: .9rem;
}
.fcc-colagem__title {
	margin: 0; color: #1B1E24; font-weight: 800; letter-spacing: -.01em; line-height: 1.05;
	text-transform: uppercase; font-size: clamp(1.7rem, 3.2vw, 3rem);
}
.fcc-colagem__desc {
	margin: 1.4rem 0 0; color: #555; max-width: 460px; font-size: 1rem; line-height: 1.6;
}
.fcc-colagem__btn {
	display: inline-block; margin-top: 2rem;
	background: #FF0000; color: #fff; text-decoration: none;
	text-transform: uppercase; font-weight: 700; letter-spacing: .05em; font-size: .85rem;
	padding: 1rem 2.6rem; transition: background .2s ease;
}
.fcc-colagem__btn:hover { background: #CC0000; }
/* colagem art-directed (2 imagens dominantes: vídeo à frente, histórica atrás/direita) */
.fcc-colagem__media { position: relative; height: 620px; }
.fcc-colagem__img { position: absolute; overflow: hidden; background: #eee; box-shadow: 0 22px 55px rgba(0,0,0,.18); }
.fcc-colagem__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fcc-colagem__img--1 { top: 0; right: 0; width: 50%; height: 82%; z-index: 1; }
.fcc-colagem__img--2 { top: 18%; left: 2%; width: 58%; height: 78%; z-index: 2; }
.fcc-colagem__img--3 { top: 2%; left: 26%; width: 40%; height: 40%; z-index: 3; }
.fcc-colagem__ph { width: 100%; height: 100%; background: #eee; }
.fcc-colagem__play {
	position: absolute; inset: 0; margin: auto; z-index: 4;
	width: 80px; height: 80px; border-radius: 50%; border: 0; cursor: pointer;
	background: #FF0000; color: #fff;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 8px 30px rgba(0,0,0,.3);
	transition: transform .2s ease, background .2s ease;
}
.fcc-colagem__play:hover { background: #CC0000; transform: scale(1.06); }
.fcc-colagem__play svg { width: 28px; height: 28px; margin-left: 4px; }
@media (max-width: 900px) {
	.fcc-colagem { padding: 3.5rem var(--fcc-gutter); }
	.fcc-colagem__inner { grid-template-columns: 1fr; gap: 2.5rem; }
	.fcc-colagem__media { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
	.fcc-colagem__img { position: static; width: auto !important; height: auto !important; aspect-ratio: 4 / 3; box-shadow: none; }
	.fcc-colagem__img--2 { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
	.fcc-colagem__img--3 { display: none; }
}

/* ---- Lightbox de vídeo (reutilizável) ---- */
.fcc-videobox {
	position: fixed; inset: 0; z-index: 1300; padding: 2rem;
	display: flex; align-items: center; justify-content: center;
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .3s ease, visibility 0s linear .3s;
}
.fcc-videobox.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .3s ease; }
.fcc-videobox__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.fcc-videobox__inner { position: relative; z-index: 1; width: min(94vw, 1080px); aspect-ratio: 16 / 9; }
.fcc-videobox__frame { position: absolute; inset: 0; }
.fcc-videobox__frame iframe, .fcc-videobox__frame video { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.fcc-videobox__close { position: absolute; top: -2.8rem; right: 0; background: none; border: 0; color: #fff; cursor: pointer; display: inline-flex; }
.fcc-videobox__close svg { width: 28px; height: 28px; }

/* =========================================================
   Bloco: Facchini — Notícias (blog)
   ========================================================= */
/* Base = Positiva (fundo claro); .is-scheme-dark = Negativa (fundo escuro) */
.fcc-noticias { background: #fff; color: #1B1E24; padding: 5rem var(--fcc-gutter); }
.fcc-noticias.is-scheme-dark { background: #000; color: #fff; }
.fcc-noticias__head { text-align: center; margin-bottom: 2.6rem; max-width: var(--fcc-max); margin-inline: auto; }
.fcc-noticias__eyebrow { margin: 0 0 .4rem; color: #FF0000; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; font-size: .9rem; }
.fcc-noticias__sectitle { margin: 0; text-transform: uppercase; font-weight: 800; font-size: clamp(1.8rem, 3.5vw, 3rem); color: inherit; }
.fcc-noticias__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; max-width: var(--fcc-max); margin: 0 auto; }
.fcc-noticias__card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.fcc-noticias__media { aspect-ratio: 4 / 3; overflow: hidden; background: #e9e9e9; }
.fcc-noticias.is-scheme-dark .fcc-noticias__media { background: #16181d; }
.fcc-noticias__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.fcc-noticias__card:hover .fcc-noticias__media img { transform: scale(1.05); }
.fcc-noticias__ph { display: block; width: 100%; height: 100%; background: inherit; }
.fcc-noticias__date { margin-top: 1rem; color: #9AA0A6; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.fcc-noticias__title { margin: .4rem 0 0; font-size: 1.1rem; font-weight: 800; text-transform: uppercase; line-height: 1.2; color: inherit; transition: color .2s ease; }
.fcc-noticias__card:hover .fcc-noticias__title { color: #FF0000; }
.fcc-noticias__excerpt { margin: .8rem 0 0; color: #6b7079; font-size: .95rem; line-height: 1.55; }
.fcc-noticias.is-scheme-dark .fcc-noticias__excerpt { color: #9AA0A6; }
.fcc-noticias__more { text-align: center; margin-top: 3rem; }
.fcc-noticias__btn {
	display: inline-block; background: #FF0000; color: #fff; text-decoration: none;
	text-transform: uppercase; font-weight: 700; letter-spacing: .05em; font-size: .85rem;
	padding: 1rem 3rem; transition: background .2s ease;
}
.fcc-noticias__btn:hover { background: #CC0000; }
@media (max-width: 900px) { .fcc-noticias__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fcc-noticias { padding: 3.5rem var(--fcc-gutter); } .fcc-noticias__grid { grid-template-columns: 1fr; } }

/* =========================================================
   Bloco: Facchini — Encontre distribuidores
   ========================================================= */
.fcc-distrib {
	position: relative; overflow: hidden;
	background: #fff url(../distribuidores/mapa.png) no-repeat center;
	background-size: cover;
	padding: 5rem var(--fcc-gutter);
}
.fcc-distrib__inner {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: 1fr 1.15fr; gap: 3rem; align-items: center;
	max-width: var(--fcc-max); margin: 0 auto;
}
.fcc-distrib__title {
	margin: 0; color: #1B1E24; font-weight: 800; text-transform: uppercase;
	letter-spacing: -.01em; line-height: 1.05; font-size: clamp(1.8rem, 3.4vw, 3rem);
}
.fcc-distrib__desc { margin: 1.4rem 0 0; color: #555; max-width: 480px; font-size: 1rem; line-height: 1.6; }
.fcc-distrib__form { margin-top: 2rem; max-width: 540px; }
.fcc-distrib__select { position: relative; margin-bottom: 1rem; }
.fcc-distrib__select select {
	width: 100%; appearance: none; -webkit-appearance: none;
	background: #fff; border: 1px solid #d5d5d5; border-radius: 0; color: #1B1E24;
	padding: 1.05rem 1.2rem; font-family: inherit; font-size: .95rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: .04em; cursor: pointer;
}
.fcc-distrib__select::after {
	content: ""; position: absolute; right: 1.2rem; top: 50%; width: 9px; height: 9px;
	transform: translateY(-70%) rotate(45deg);
	border-right: 2px solid #1B1E24; border-bottom: 2px solid #1B1E24; pointer-events: none;
}
.fcc-distrib__btn {
	display: inline-block; margin-top: .6rem; border: 0; cursor: pointer;
	background: #FF0000; color: #fff; text-decoration: none;
	text-transform: uppercase; font-weight: 700; letter-spacing: .05em; font-size: .85rem;
	padding: 1.05rem 3rem; transition: background .2s ease;
}
.fcc-distrib__btn:hover { background: #CC0000; }
.fcc-distrib__media { text-align: center; }
.fcc-distrib__media img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.fcc-distrib__ph { padding: 4rem 2rem; background: #f0f0f0; color: #999; text-align: center; font-size: .85rem; }
@media (max-width: 900px) {
	.fcc-distrib { padding: 3.5rem var(--fcc-gutter); }
	.fcc-distrib__inner { grid-template-columns: 1fr; gap: 2rem; }
}

/* ---- Footer ---- */
footer.wp-block-template-part a { text-decoration: none; }
/* Colunas: sem marcador de lista, sem margem/padding, cor #FFFFFF5E, hover branco */
footer.wp-block-template-part .wp-block-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
footer.wp-block-template-part .wp-block-list li { margin: 0; }
footer.wp-block-template-part .wp-block-list {
	font-size: 12px;
}
footer.wp-block-template-part .wp-block-list a {
	color: #FFFFFF5E;
	text-transform: uppercase;
	letter-spacing: .03em;
	font-size: 12px;
}
footer.wp-block-template-part .wp-block-list a:hover { color: #FFFFFF; }

/* Textos finais (LGPD + copyright) no mesmo tamanho do disclaimer do topo */
footer.wp-block-template-part .has-black-background-color p { font-size: 11px !important; }

/* Menos espaçamento vertical entre os blocos finais do rodapé preto */
footer.wp-block-template-part .has-black-background-color { padding-top: 3.5rem !important; }
footer.wp-block-template-part .has-black-background-color > * + * { margin-block-start: 2.5rem !important; }

/* Título "Caminhões nacionais..." mais fino (via CSS p/ vencer o inline do bloco) */
footer.wp-block-template-part .has-white-background-color h2.wp-block-heading {    font-weight: 400 !important;
    font-size: 12px !important; }

/* Disclaimer do topo: bloco próprio com borda igual em cima e embaixo,
   ocupando 100% da largura da tela (encosta nas duas laterais). */
/* .alignfull no HTML + as regras nativas do WP (.has-global-padding > .alignfull
   e .is-layout-constrained > .alignfull) já levam o bloco às bordas reais da tela,
   respeitando a root padding — sem 100vw (que estourava por causa da scrollbar). */
.fcc-footer-disclaimer {
	border-top: 1px solid rgba(0,0,0,.12);
	border-bottom: 1px solid rgba(0,0,0,.12);
	padding-top: 2.25rem;
	padding-bottom: 2.25rem;
	box-sizing: border-box;
}
.fcc-footer-disclaimer p {
	color: #9AA0A6;
	text-align: center;
	font-size: 11px !important;
	line-height: 1.7;
	max-width: 1000px;
	margin: 0 auto;
}

/* Títulos das colunas do rodapé: menores, com respiro antes da lista */
footer.wp-block-template-part .wp-block-column h3.wp-block-heading {
	font-size: 12px !important;
	margin-bottom: 10px;
}

/* Selo D-U-N-S® Registered: vem da D&B num iframe de 114x97 fixo, com o
   conteúdo posicionado em absoluto — largura/altura não reduzem, só o zoom.
   .93 deixa o selo com os mesmos 90px de altura dos outros dois. */
footer.wp-block-template-part .fcc-badges .fcc-badge-duns {
	zoom: .93;
}

/* ---- Menu hambúrguer (overlay do bloco Navigation) combinando com o tema ---- */
/* Ícone hambúrguer (abrir) branco, visível sobre o header escuro */
.fcc-header-bar .wp-block-navigation__responsive-container-open,
.fcc-header-bar .wp-block-navigation__responsive-container-open svg { color: #fff; fill: currentColor; }

/* Overlay aberto = mesmo vidro escuro do header/mega-menu */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: #00000085 !important;
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 4.5rem;
}
/* Botão de fechar (X): mesmo tamanho/posição do mega-menu (topo-esquerda, 30px, vermelho) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: fixed !important;
	top: 1.25rem !important;
	left: 5vw !important;
	right: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	color: #FF0000;
	z-index: 10;
}
.wp-block-navigation__responsive-container-close svg { width: 30px; height: 30px; fill: currentColor; }

/* Itens do overlay: brancos, 700, uppercase, hover vermelho */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.4rem; }
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: #fff !important;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 1.15rem;
}
.wp-block-navigation__responsive-container.is-menu-open a:hover,
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > a {
	color: #FF0000 !important;
}

/* ---- Ponto de corte do menu principal ----
   O menu inline (7 itens) + ícones + logo pedem ~1180px de linha, e a linha
   mede a largura da grade (--fcc-max) menos as goteiras: só cabe numa linha a
   partir de ~1320px de viewport. O corte do core é 600px, então de 600 a 1319px
   o flex-wrap quebrava a linha em duas e o logo caía pequeno à esquerda, por
   baixo do menu — em 1024, 1180 e 1280, que são larguras comuns.

   Faixa 1200–1319: aperta o respiro entre os itens e cabe numa linha.
   Abaixo de 1200: o hambúrguer assume (o overlay do core; o theme.js já fecha
   este overlay quando o mega-menu de produtos abre, então não se sobrepõem). */
@media (min-width: 1200px) and (max-width: 1319px) {
	.fcc-header-bar .wp-block-navigation,
	.fcc-header-bar .wp-block-navigation__container { gap: 1.1rem; }
	.fcc-header-bar .wp-block-navigation a { letter-spacing: .05em; }
	.fcc-header-right { gap: 1rem; }
}
@media (min-width: 600px) and (max-width: 1199px) {
	.fcc-header-bar .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
	.fcc-header-bar .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* ---- Mega-menu em telas médias: empilha as colunas ---- */
@media (max-width: 900px) {
	.fcc-mm-body { grid-template-columns: 1fr; grid-template-rows: none; }
	.fcc-mm-col + .fcc-mm-col { border-left: 0; border-top: 1px solid rgba(255,255,255,.15); }
	.fcc-mm-center { display: none; } /* oculta título "ghost" + EXPLORE MAIS no mobile */
	.fcc-mm-items-grid { grid-template-columns: 1fr 1fr; }
	.fcc-megamenu { padding-left: 5vw; padding-right: 5vw; }
	.fcc-mm-top { padding-left: 0; padding-right: 0; } /* já há padding no container empilhado */
	.fcc-mm-col:first-child { padding-left: 0; }
	.fcc-mm-col:last-child { padding-right: 0; }
}

/* ---- Mobile: header sempre compacto + encostado no topo ---- */
@media (max-width: 782px) {
	/* No mobile a admin bar é absoluta (rola junto) — header encostado no topo */
	.admin-bar header.wp-block-template-part { top: 0; }

	/* Formato compacto fixo (independe do scroll) */
	.fcc-header-bar { padding: 1rem var(--fcc-gutter); }
	.fcc-logo img { height: 26px; }
	.fcc-header-bar .fcc-header-row { flex-wrap: nowrap; align-items: center; }
	.fcc-header-right { gap: 1rem; }
	.fcc-header-icons { gap: .75rem; }

	/* Menos respiro no topo das páginas boxed (header compacto) */
	.wp-site-blocks > main:not(.alignfull) { padding-top: 6rem !important; }

	/* Mega-menu: espaçamentos menores e ghost reduzido */
	.fcc-megamenu { padding: 1.25rem 5vw 2.5rem; }
	.fcc-mm-col { padding: 1.75rem 0; }
	.fcc-mm-items-grid { grid-template-columns: 1fr; gap: 0; }
	.fcc-mm-secoes { columns: 1; }
	.fcc-mm-ghost { font-size: clamp(2rem, 12vw, 3rem); }

	/* ---- Rodapé no mobile ---- */
	/* Selos (D&B ESG / D&B / GPTW) em uma única linha */
	footer.wp-block-template-part .fcc-badges {
		flex-wrap: nowrap;
		gap: .6rem;
		justify-content: space-between;
	}
	footer.wp-block-template-part .fcc-badges img {
		height: auto !important;
		width: auto;
		max-width: 32%;
		max-height: 90px;
	}
	/* O selo D-U-N-S® vem num iframe de 114x97 fixo (o conteúdo é posicionado
	   em absoluto pela D&B, então largura/altura não reduzem — só o zoom). */
	footer.wp-block-template-part .fcc-badges .fcc-badge-duns {
		zoom: .78;
	}

	/* Colunas de LINKS em duas colunas (só o bloco de links, não o do LGPD) */
	footer.wp-block-template-part .wp-block-columns:not(.are-vertically-aligned-center) {
		flex-wrap: wrap;
		gap: 2rem 1rem;
	}
	footer.wp-block-template-part .wp-block-columns:not(.are-vertically-aligned-center) > .wp-block-column {
		flex-basis: calc(50% - .5rem) !important;
		flex-grow: 0;
	}

	/* Bloco LGPD: texto em cima, logos embaixo (colunas empilhadas) */
	footer.wp-block-template-part .wp-block-columns.are-vertically-aligned-center > .wp-block-column {
		flex-basis: 100% !important;
	}
	/* Logos dos parceiros lado a lado (em linha), alinhados à esquerda */
	footer.wp-block-template-part .fcc-partners {
		justify-content: flex-start !important;
	}
}

/* =========================================================================
   PÁGINA DE PRODUTO — blocos facchini/produto-*
   ========================================================================= */

/* ---- Cores base do produto ---- */
:root {
	--fcc-dark: #24272F;
	--fcc-dark-2: #1B1E24;
	--fcc-red: #FF0000;
	--fcc-ink: #1B1E24;
	--fcc-muted: #6A7078;
	--fcc-line: #E2E5E9;
}

/* -------------------------------------------------------------------------
   TOPO — espaçador do topo da tela de produto (limpa o header fixo)
   ------------------------------------------------------------------------- */
.fcc-ptopo { min-height: 110px; }
.fcc-ptopo.is-bg-dark { background: var(--fcc-dark); }
.fcc-ptopo.is-bg-light { background: #fff; }
.fcc-ptopo.is-bg-none { background: transparent; }

/* -------------------------------------------------------------------------
   02 — BARRA FIXA (âncoras) : fixa abaixo do header ao rolar
   ------------------------------------------------------------------------- */
.fcc-pbarra {
	position: sticky;
	top: var(--fcc-pbarra-top, 72px);
	z-index: 40;
	background: #00000085; /* #24272F — mesma cor aparente do header sobre o topo escuro */
	border-block: 1px solid rgba(255,255,255,.08);
}
/* Variante vidro: sem cor de fundo (só desfoque), como o header transparente.
   Sobre o fundo escuro da página (#24272F) revela escuro; ao passar sobre
   seções claras mostra o conteúdo delas — mesmo comportamento do header. */
.fcc-pbarra.is-transparent {
	background: #00000085;
	border-block-color: rgba(255,255,255,.14);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}
.fcc-pbarra__inner {
	display: flex;
	align-items: stretch;
	justify-content: center;
	flex-wrap: wrap;
	max-width: var(--fcc-container);
	margin-inline: auto;
	padding-inline: var(--fcc-gutter);
}
.fcc-pbarra__item {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: 1.1rem 1.6rem;
	color: #C9CDD3;
	text-decoration: none;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	position: relative;
	transition: color .25s ease, background .25s ease;
}
.fcc-pbarra__item + .fcc-pbarra__item { border-left: 1px solid rgba(255,255,255,.08); }
.fcc-pbarra__icon { display: inline-flex; color: #7C838C; transition: color .25s ease; }
.fcc-pbarra__icon svg { width: 22px; height: 22px; display: block; }
.fcc-pbarra__item:hover,
.fcc-pbarra__item.is-active { color: #fff; }
.fcc-pbarra__item:hover .fcc-pbarra__icon,
.fcc-pbarra__item.is-active .fcc-pbarra__icon { color: var(--fcc-red); }
.fcc-pbarra__item.is-active::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 2px;
	background: var(--fcc-red);
}
.fcc-pbarra--editor .fcc-pbarra__item { cursor: default; }

@media (max-width: 900px) {
	.fcc-pbarra__inner { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; -webkit-overflow-scrolling: touch; }
	.fcc-pbarra__item { padding: .85rem 1rem; white-space: nowrap; font-size: .72rem; }
	.fcc-pbarra__label { display: inline; }
}

/* -------------------------------------------------------------------------
   01 — CARACTERÍSTICAS (hotspots)
   ------------------------------------------------------------------------- */
.fcc-caract {
	background: var(--fcc-dark);
	color: #fff;
	padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 4.5rem);
}
.fcc-caract__inner {
	max-width: var(--fcc-container);
	margin-inline: auto;
	padding-inline: var(--fcc-gutter);
}
.fcc-caract__head {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem clamp(2rem, 6vw, 6rem);
	align-items: start;
}
.fcc-caract__family {
	margin: 0 0 .6rem;
	color: var(--fcc-red);
	text-transform: uppercase;
	letter-spacing: .14em;
	font-weight: 700;
	font-size: .9rem;
	line-height: 1.2;
}
.fcc-caract__family a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease;
}
.fcc-caract__family a:hover,
.fcc-caract__family a:focus-visible {
	border-bottom-color: currentColor;
}
.fcc-caract__title {
	font-size: clamp(2rem, 4.2vw, 3.4rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: .01em;
	text-transform: uppercase;
	margin: 0;
}
.fcc-caract__rule {
	display: block;
	width: 190px;
	max-width: 60%;
	height: 3px;
	background: var(--fcc-red);
	margin-top: 1.4rem;
}
.fcc-caract__desc {
	font-size: clamp(.95rem, 1.2vw, 1.0rem);
	line-height: 1.7;
	color: #C9CDD3;
	margin: 0;
	align-self: end;
}

/* Palco da imagem + hotspots */
.fcc-caract__stage {
	position: relative;
	margin-top: clamp(2rem, 5vw, 3.5rem);
	display: inline-block;
	width: 100%;
}
.fcc-caract__img { display: block; width: 100%; height: auto; }
.fcc-caract__ph {
	margin-top: 2rem;
	display: grid;
	place-items: center;
	min-height: 320px;
	border: 2px dashed rgba(255,255,255,.2);
	border-radius: 8px;
}

/* Hotspot */
.fcc-hotspot { position: absolute; transform: translate(-50%, -50%); z-index: 2; }
.fcc-hotspot__dot {
	appearance: none;
	display: inline-block; /* span no editor precisa disso para respeitar width/height */
	border: 0;
	cursor: pointer;
	width: 18px; height: 18px;
	border-radius: 50%;
	background: var(--fcc-red);
	box-shadow: 0 0 0 4px rgba(255,0,0,.28);
	padding: 0;
	position: relative;
}
/* Editor: número do ponto no centro da bolinha (o front não tem texto = sem número) */
.fcc-hotspot__dot--num {
	text-align: center;
	line-height: 18px;
	font-size: 10px;
	font-weight: 700;
	color: #fff;
	font-style: normal;
	z-index: 1;
}
/* Editor: ocultar balões quando o toggle está desligado */
.is-hide-tips .fcc-hotspot__tip { display: none !important; }
/* Modal de posicionamento: bolinhas arrastáveis (isolado do canvas do Gutenberg) */
.fcc-caract-modal__bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.fcc-caract-modal__hint { font-size: 12px; color: #757575; }
.fcc-caract-modal__stagewrap { display: flex; justify-content: center; align-items: flex-start; }
.fcc-caract-modal__stage { position: relative; display: inline-block; width: auto; max-width: 100%; margin-top: 0; background: #24272F; }
.fcc-caract-modal__stage .fcc-caract__img { display: block; width: auto; max-width: 100%; max-height: 72vh; }
.fcc-caract-modal__stage .fcc-hotspot { cursor: grab; }
.fcc-caract-modal__stage .fcc-hotspot__dot { cursor: grab; touch-action: none; }
.fcc-caract-dragging, .fcc-caract-dragging .fcc-hotspot__dot { cursor: grabbing !important; user-select: none; }
.fcc-hotspot.is-selected .fcc-hotspot__dot { box-shadow: 0 0 0 4px rgba(255,0,0,.35), 0 0 0 7px #fff; }
.fcc-hotspot__dot::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	box-shadow: 0 0 0 2px rgba(255,255,255,.6);
	opacity: 0;
	animation: fcc-hs-pulse 2.2s ease-out infinite;
}
@keyframes fcc-hs-pulse {
	0%   { transform: scale(.6); opacity: .8; }
	70%  { transform: scale(1.9); opacity: 0; }
	100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.fcc-hotspot__dot::after { animation: none; }
}
.fcc-hotspot__tip {
	position: absolute;
	bottom: calc(100% + 12px);
	left: 50%;
	transform: translateX(-50%) translateY(6px);
	min-width: 180px;
	max-width: 260px;
	background: #fff;
	color: var(--fcc-ink);
	padding: .7rem .85rem;
	border-radius: 6px;
	box-shadow: 0 12px 30px rgba(0,0,0,.35);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
	z-index: 3;
	text-align: left;
}
.fcc-hotspot__tip::after {
	content: "";
	position: absolute;
	top: 100%; left: 50%;
	transform: translateX(-50%);
	border: 7px solid transparent;
	border-top-color: #fff;
}
.fcc-hotspot:hover .fcc-hotspot__tip,
.fcc-hotspot:focus-within .fcc-hotspot__tip,
.fcc-hotspot.is-open .fcc-hotspot__tip {
	opacity: 1; visibility: visible;
	transform: translateX(-50%) translateY(0);
}
.fcc-hotspot__tiptitle { display: block; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.fcc-hotspot__tiptext { display: block; font-size: .8rem; line-height: 1.5; color: var(--fcc-muted); margin-top: .2rem; }

@media (max-width: 782px) {
	.fcc-caract__head { grid-template-columns: 1fr; gap: 1.2rem; }
	.fcc-hotspot__dot { width: 15px; height: 15px; }
}

/* -------------------------------------------------------------------------
   03 — BOTÕES (bloco próprio: cotação + peças)
   ------------------------------------------------------------------------- */
.fcc-botoes { padding: clamp(1.75rem, 4vw, 2.75rem) 0; }
.fcc-botoes.is-bg-dark { background: var(--fcc-dark); }
.fcc-botoes.is-bg-light { background: #fff; }
.fcc-botoes.is-bg-none { background: transparent; }
.fcc-botoes__inner {
	max-width: var(--fcc-container);
	margin-inline: auto;
	padding-inline: var(--fcc-gutter);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: stretch;
	justify-content: center;
}
.fcc-botoes__btn {
	display: inline-flex;
	align-items: center;
	gap: .8rem;
	text-decoration: none;
	font-weight: 700;
	letter-spacing: .03em;
	transition: transform .2s ease, background .2s ease, color .2s ease;
}
.fcc-botoes__btn--primary {
	background: var(--fcc-red);
	color: #fff;
	padding: 1.05rem 2.4rem;
	text-transform: uppercase;
	font-size: .9rem;
}
.fcc-botoes__btn--primary:hover { background: #d90000; transform: translateY(-2px); }
.fcc-botoes__btn--ghost {
	background: #fff;
	color: var(--fcc-ink);
	padding: .7rem 1.6rem .7rem 1.2rem;
	border: 1px solid #D7DADF;
}
.fcc-botoes__btn--ghost:hover { transform: translateY(-2px); }
.fcc-botoes__btnicon { display: inline-flex; color: var(--fcc-ink); }
.fcc-botoes__btnicon svg { width: 34px; height: 34px; display: block; }
.fcc-botoes__btntext { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.fcc-botoes__btntext small { font-size: .7rem; font-weight: 500; color: var(--fcc-muted); letter-spacing: .08em; text-transform: uppercase; }
.fcc-botoes__btntext strong { font-size: 1rem; font-weight: 800; text-transform: uppercase; }

@media (max-width: 782px) {
	.fcc-botoes__btn--primary { flex: 1 1 100%; justify-content: center; }
}

/* -------------------------------------------------------------------------
   04 — DETALHES TÉCNICOS
   ------------------------------------------------------------------------- */
.fcc-detalhes {
	background: #fff;
	color: var(--fcc-ink);
	padding: clamp(3rem, 6vw, 5rem) 0;
}
.fcc-detalhes__inner {
	max-width: var(--fcc-container);
	margin-inline: auto;
	padding-inline: var(--fcc-gutter);
}
.fcc-detalhes__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.fcc-detalhes__title {
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	font-weight: 800;
	text-transform: uppercase;
	margin: 0;
}
.fcc-detalhes__note {
	font-size: .72rem;
	letter-spacing: .02em;
	color: var(--fcc-muted);
	text-transform: uppercase;
	margin: 0;
	max-width: 520px;
	text-align: right;
}
.fcc-detalhes__cols {
	columns: 3;
	column-gap: clamp(2rem, 4vw, 4rem);
}
.fcc-detalhes__group {
	break-inside: avoid;
	page-break-inside: avoid;
	padding-left: 1.1rem;
	border-left: 3px solid var(--fcc-red);
	margin-bottom: 2.2rem;
}
.fcc-detalhes__grouptitle {
	font-size: .95rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .03em;
	margin: 0 0 .7rem;
}
.fcc-detalhes__groupbody p { font-size: .82rem; line-height: 1.55; margin: 0 0 .5rem; color: #33373E; }
.fcc-detalhes__groupbody strong { font-weight: 700; }
.fcc-detalhes__list { list-style: none; margin: 0; padding: 0; }
.fcc-detalhes__list li { font-size: .82rem; line-height: 1.55; padding-left: .9rem; position: relative; color: #33373E; }
.fcc-detalhes__list li::before { content: "–"; position: absolute; left: 0; color: var(--fcc-red); }

@media (max-width: 1100px) { .fcc-detalhes__cols { columns: 2; } }
@media (max-width: 720px) {
	.fcc-detalhes__cols { columns: 1; }
	.fcc-detalhes__note { text-align: left; }
}

/* -------------------------------------------------------------------------
   05 — CATÁLOGO (download)
   ------------------------------------------------------------------------- */
.fcc-catalogo {
	background: var(--fcc-dark);
	color: #fff;
	padding: clamp(1.5rem, 3vw, 2.2rem) 0;
}
.fcc-catalogo__inner {
	max-width: var(--fcc-container);
	margin-inline: auto;
	padding-inline: var(--fcc-gutter);
	display: flex;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3rem);
	flex-wrap: wrap;
}
.fcc-catalogo__lead { display: flex; align-items: center; gap: 1rem; margin-right: auto; }
.fcc-catalogo__icon { display: inline-flex; color: var(--fcc-red); }
.fcc-catalogo__icon svg { width: 42px; height: 42px; display: block; }
.fcc-catalogo__txt { display: flex; flex-direction: column; line-height: 1.3; }
.fcc-catalogo__title { font-size: 1.25rem; font-weight: 700; }
.fcc-catalogo__sub { font-size: .85rem; color: #A9AEB5; }
.fcc-catalogo__opts { display: flex; align-items: center; gap: 1.4rem; }
.fcc-catalogo__opt { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; font-weight: 600; font-size: .9rem; }
.fcc-catalogo__opt input { accent-color: var(--fcc-red); width: 16px; height: 16px; }
.fcc-catalogo__btn {
	appearance: none;
	border: 0;
	cursor: pointer;
	background: var(--fcc-red);
	color: #fff;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 1rem 2.6rem;
	transition: background .2s ease, transform .2s ease;
}
.fcc-catalogo__btn:hover { background: #d90000; transform: translateY(-2px); }
.fcc-catalogo__btn.is-empty { animation: fcc-shake .4s; }
@keyframes fcc-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

@media (max-width: 782px) {
	.fcc-catalogo__inner { flex-direction: column; align-items: flex-start; }
	.fcc-catalogo__lead { margin-right: 0; }
	.fcc-catalogo__btn { width: 100%; }
}

/* -------------------------------------------------------------------------
   07 — MEDIDAS (desenho técnico em largura total + painel de medidas)
   Desenho ocupa a largura inteira da seção (alignfull nativo — nada de 100vw
   manual). Controles flutuam na tela enquanto a seção está em vista. O painel
   da tabela desliza sobre a direita e REDUZ a área útil do desenho, que
   reenquadra no espaço restante.
   ------------------------------------------------------------------------- */
.fcc-medidas {
	/* Largura do painel: fonte única, porque a área E a barra flutuante (que é irmã
	   da área, não filha) precisam do mesmo valor para se alinharem. */
	--fcc-painel-w: min(42vw, 620px);
	--fcc-pilula-h: 2.75rem;   /* altura única das pílulas: zoom e "ver medidas" iguais */
	background: #fff;
	color: var(--fcc-ink);
	padding: clamp(3rem, 6vw, 5rem) 0;
}
.fcc-medidas__inner {
	max-width: var(--fcc-container);
	margin-inline: auto;
	padding-inline: var(--fcc-gutter);
}
.fcc-medidas__title {
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	font-weight: 800;
	text-transform: uppercase;
	margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
}

/* ---- Área do desenho: largura total da seção ----
   A altura vem de --fcc-medidas-ar (render.php, proporção do desenho + respiro) e
   fica AQUI, não no palco: abrir o painel muda só a largura útil, nunca a altura da
   seção. Se a altura mudasse, a página pularia a cada abrir/fechar. */
.fcc-medidas__area {
	position: relative;
	overflow: hidden;
	/* border-block: 1px solid var(--fcc-line); */
	background: #fff;
	/* `width: 100%` é obrigatório junto de aspect-ratio + max-height: sem largura
	   definida, quando o max-height limita a altura o CSS recalcula a LARGURA pela
	   proporção (algoritmo de razão intrínseca) e a seção deixa de ser full-bleed —
	   numa viewport de 813px de altura a área caía de 1600 para 1459. */
	width: 100%;
	aspect-ratio: var(--fcc-medidas-ar, 2.4);
	min-height: clamp(300px, 40vh, 400px);
	max-height: min(76vh, 780px);
}
.fcc-medidas__area--sem-desenho { aspect-ratio: auto; max-height: none; }

.fcc-medidas__palcos {
	position: absolute;
	inset: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	/* SEM transition no `right`: animar a largura dispara o ResizeObserver a cada
	   frame e reenquadraria os ~43 mil segmentos do desenho 60x por segundo. O painel
	   desliza (transform, no compositor) e a área do desenho troca de largura de uma vez. */
}
.fcc-medidas__area.is-painel .fcc-medidas__palcos { right: var(--fcc-painel-w); }
.fcc-visor { position: relative; flex: 1 1 0; min-height: 0; margin: 0; }
.fcc-visor + .fcc-visor { border-top: 1px solid var(--fcc-line); }

.fcc-visor__palco {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: #fff;
	/* A 100% o desenho cabe inteiro: 1 dedo é da página, 2 dedos são nossos. Sem isto o
	   visualizador sequestra a rolagem da página no celular. */
	touch-action: pan-y;
	cursor: grab;
}
/* Ampliado (classe escrita pelo view.js): 1 dedo passa a mover o desenho nos dois eixos —
   sem isto o navegador reserva o gesto vertical para si e o arraste morre pela metade.
   Só vale enquanto está ampliado; o botão − (ou duplo toque) devolve a rolagem da página. */
.fcc-visor__palco.is-zoom { touch-action: none; }
.fcc-visor__palco:focus-visible { outline: 2px solid var(--fcc-red); outline-offset: -2px; }
.fcc-visor__palco.is-panning { cursor: grabbing; }
/* Estado sem JS (e primeiro paint): o <img> ocupa o palco já enquadrado. */
.fcc-visor__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: clamp(.5rem, 1.5vw, 1.25rem);
	box-sizing: border-box;
}
.fcc-visor__palco > svg {
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: 0 0;
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* `will-change` só no arrasto: durante o pan a escala não muda, então cachear o
   raster é de graça. No zoom ele ficaria com bitmap ampliado (borrado) até o
   próximo repaint — sem ele o browser re-rasteriza o vetor e a linha sai nítida. */
.fcc-visor__palco.is-panning > svg { will-change: transform; }
.fcc-visor__palco > svg .d1 { stroke-width: calc(var(--fcc-visor-sw, 1.15px) / var(--fcc-visor-k, 1)); }
.fcc-visor__palco > svg .d2 { stroke-width: calc(var(--fcc-visor-sw2, 1.7px) / var(--fcc-visor-k, 1)); }
.fcc-visor__vazio {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--fcc-muted);
	font-size: .85rem;
}

/* ---- Painel da tabela: desliza sobre a direita ---- */
.fcc-medidas__painel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: var(--fcc-painel-w);
	/* O tema não tem reset global de box-sizing: sem isto o padding soma na largura e o
	   painel cobre ~56px do desenho, porque o recuo dos palcos usa --fcc-painel-w cru. */
	box-sizing: border-box;
	background: #fff;
	border-left: 1px solid var(--fcc-line);
	box-shadow: -18px 0 44px rgba(0,0,0,.10);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: clamp(1rem, 2vw, 1.75rem);
	transform: translateX(100%);
	visibility: hidden;
	/* cubic-bezier(.33,1,.68,1) é o ease-out cúbico que o view.js usa para reenquadrar o
	   desenho: mesma curva e mesma duração (MS_PAINEL), senão painel e desenho chegam em
	   momentos diferentes e a abertura parece desengonçada. */
	transition: transform .35s cubic-bezier(.33, 1, .68, 1), visibility 0s linear .35s;
}
.fcc-medidas__area.is-painel .fcc-medidas__painel {
	transform: none;
	visibility: visible;
	transition: transform .35s cubic-bezier(.33, 1, .68, 1);
}

/* ---- Controles: pílula colada no rodapé da tela ENQUANTO a seção passa ----
   A barra mora numa âncora `position: sticky` de altura zero, irmã da área do
   desenho. Com `position: fixed` ela não sabia onde a seção termina e continuava no
   rodapé da tela sobre a seção seguinte; a âncora sticky sobe junto com a borda de
   baixo do desenho e sai de cena com ele — o limite é geométrico, sem cálculo em JS.
   Altura zero para não ocupar espaço nenhum no fluxo (a barra é absoluta dentro dela).
   A âncora precisa ficar FORA de elemento com data-anim: o GSAP escreve transform
   nesses elementos, e transform no ancestral desloca o resultado do sticky. */
.fcc-visor__ancora {
	position: sticky;
	bottom: clamp(1rem, 3vh, 2rem);
	z-index: 500;
	height: 0;
}
.fcc-visor__flutuante {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%) translateY(.75rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.fcc-visor__flutuante.is-visivel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%);
	transition: opacity .25s ease, transform .25s ease;
}
/* `display:flex` acima vence o [hidden] da folha do navegador: sem esta regra a barra
   apareceria mesmo sem JS, onde ela não faz nada. */
.fcc-visor__flutuante[hidden] { display: none; }
/* Centraliza na área que sobra quando o painel está aberto, senão a barra fica
   escondida atrás dele. Os 50% resolvem contra a âncora (largura da seção, que é
   alignfull) — mesmo resultado do fixed contra a viewport, medido com desvio 0. */
.fcc-visor__flutuante.is-painel {
	left: calc(50% - var(--fcc-painel-w) / 2);
}
.fcc-visor__controles { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.fcc-visor__pilula {
	display: inline-flex;
	align-items: center;
	gap: .15rem;
	height: var(--fcc-pilula-h);
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--fcc-line);
	border-radius: 999px;
	padding: 0 .35rem;
	box-shadow: 0 6px 22px rgba(0,0,0,.14);
}
.fcc-visor__btn {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--fcc-ink);
	font: inherit;
	font-size: .78rem;
	font-weight: 700;
	line-height: 1;
	padding: 0 .7rem;
	height: calc(var(--fcc-pilula-h) - .9rem);
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color .2s ease, color .2s ease;
}
.fcc-visor__btn:hover { background: #F1F3F5; }
.fcc-visor__btn[disabled] { opacity: .35; cursor: default; background: transparent; }
.fcc-visor__btn--icone { width: 2.1rem; padding: 0; font-size: 1rem; }
.fcc-visor__btn svg { width: 16px; height: 16px; }
.fcc-visor__zoom {
	font-size: .74rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--fcc-muted);
	min-width: 3.1rem;
	text-align: center;
}
.fcc-visor__toggle {
	gap: .5rem;
	padding: 0 1.15rem;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--fcc-ink);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.fcc-visor__toggle:hover { background: var(--fcc-ink); border-color: var(--fcc-ink); color: #fff; }
.fcc-visor__toggle svg { width: 16px; height: 16px; }
.fcc-visor__dica {
	margin: 0;
	font-size: .7rem;
	color: var(--fcc-muted);
	background: #FFFFFFD9;
	padding: .1rem .5rem;
	border-radius: 999px;
	white-space: nowrap;
}
/* Duas dicas no HTML, o dispositivo escolhe: falar de Ctrl + rolagem no celular é inútil.
   O critério é o ponteiro, não a largura — tablet largo também é toque. */
.fcc-visor__dica--toque { display: none; }
@media (hover: none) and (pointer: coarse) {
	.fcc-visor__dica--mouse { display: none; }
	.fcc-visor__dica--toque { display: block; }
}

/* ---- Tabela de medidas ---- */
.fcc-medidas__rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fcc-medidas__tabela {
	width: 100%;
	border-collapse: collapse;
	font-size: .76rem;
	font-variant-numeric: tabular-nums;
}
/* Sem borda nenhuma: a leitura vem da alternância de linhas. */
.fcc-medidas__tabela th,
.fcc-medidas__tabela td {
	border: 0;
	padding: .3rem .55rem;
	text-align: center;
	vertical-align: middle;
}
.fcc-medidas__tabela thead th {
	background: transparent;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--fcc-muted);
	white-space: nowrap;
	padding-bottom: .5rem;
}
.fcc-medidas__cap {
	caption-side: top;
	text-align: left;
	padding: 0 0 .6rem;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--fcc-muted);
}
.fcc-medidas__cota { width: 2.6rem; background: transparent; font-weight: 700; }
.fcc-medidas__label { text-align: left; }
.fcc-medidas__valor { white-space: nowrap; }
.fcc-medidas__tabela tbody tr:nth-child(odd) { background: #F5F7F9; }
.fcc-medidas__tabela tbody tr:hover { background: #E8ECF0; }
.fcc-medidas__notas { margin: 1rem 0 0; font-size: .76rem; color: var(--fcc-muted); }
.fcc-medidas__notas-t {
	margin: 0 0 .3rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--fcc-ink);
}
.fcc-medidas__notas ul { margin: 0; padding-left: 1.1rem; }
.fcc-medidas__notas li + li { margin-top: .2rem; }

/* ---- Imagens raster (comportamento antigo: tile clicável + lightbox) ---- */
.fcc-medidas__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: clamp(1.25rem, 2.5vw, 2.25rem);
}
.fcc-medidas__item {
	appearance: none;
	border: 1px solid var(--fcc-line);
	background: #fff;
	padding: 1rem;
	cursor: zoom-in;
	display: block;
	transition: box-shadow .2s ease, transform .2s ease;
}
.fcc-medidas__item:hover { box-shadow: 0 10px 26px rgba(0,0,0,.1); transform: translateY(-2px); }
.fcc-medidas__item img { display: block; width: 100%; height: auto; }
.fcc-medidas__ph { display: grid; place-items: center; min-height: 260px; border: 2px dashed var(--fcc-line); }

/* ---- Empilhado: o painel deixa de reduzir o desenho e vira bloco abaixo dele ---- */
@media (max-width: 1023px) {
	.fcc-medidas__area {
		aspect-ratio: auto;
		max-height: none;
		overflow: visible;
	}
	.fcc-medidas__palcos { position: relative; inset: auto; right: auto !important; display: block; }
	.fcc-visor { display: block; }
	.fcc-visor__palco {
		position: relative;
		inset: auto;
		width: 100%;   /* mesma armadilha da área: aspect-ratio + max-height encolhe a largura */
		aspect-ratio: var(--fcc-medidas-ar, 2.4);
		max-height: 52vh;
	}
	.fcc-medidas__painel {
		position: static;
		width: auto;
		transform: none;
		visibility: visible;
		box-shadow: none;
		border-left: 0;
		border-top: 1px solid var(--fcc-line);
		overflow: visible;
		transition: none;
	}
	/* Sem espaço para reduzir: a tabela fica sempre à mostra e o botão sai de cena. */
	.fcc-visor__toggle { display: none; }
	.fcc-visor__flutuante.is-painel { left: 50%; }
}
@media (max-width: 782px) {
	.fcc-medidas__grid { grid-template-columns: 1fr; }
	.fcc-medidas__tabela { font-size: .72rem; }
	.fcc-medidas__tabela th, .fcc-medidas__tabela td { padding: .26rem .4rem; }
}
@media (prefers-reduced-motion: reduce) {
	.fcc-medidas__painel, .fcc-visor__flutuante { transition: none; }
}

/* Lightbox (medidas — imagens raster) */
.fcc-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1300;
	background: rgba(10,12,16,.9);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 4vw;
}
.fcc-lightbox.is-open { display: flex; }
.fcc-lightbox__img { max-width: 96vw; max-height: 90vh; background: #fff; }
.fcc-lightbox__close {
	position: absolute;
	top: 1.2rem; right: 1.6rem;
	appearance: none; border: 0; background: transparent;
	color: #fff; font-size: 2.6rem; line-height: 1; cursor: pointer;
}

/* -------------------------------------------------------------------------
   08 — GALERIA DE FOTOS (Swiper)
   ------------------------------------------------------------------------- */
.fcc-pgaleria {
	background: #fff;
	padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.fcc-pgaleria__title {
	text-align: center;
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	font-weight: 800;
	text-transform: uppercase;
	margin: 0 0 2rem;
	color: var(--fcc-ink);
}
.fcc-pgaleria__wrap { position: relative; }
.fcc-pgaleria__swiper { overflow: hidden; }
.fcc-pgaleria__slide {
	width: min(72%, 980px);
	opacity: .35;
	transition: opacity .4s ease;
}
.fcc-pgaleria__slide.swiper-slide-active { opacity: 1; }
.fcc-pgaleria__slide img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 75vh;
	object-fit: contain;
	/* box-shadow: 0 24px 60px rgba(0,0,0,.18); */
}
.fcc-pgaleria__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 54px; height: 54px;
	display: grid;
	place-items: center;
	appearance: none;
	border: 0;
	background: var(--fcc-red);
	color: #fff;
	cursor: pointer;
	transition: background .2s ease;
}
.fcc-pgaleria__nav:hover { background: #d90000; }
.fcc-pgaleria__nav svg { width: 24px; height: 24px; }
.fcc-pgaleria__nav--prev { left: clamp(.5rem, 4vw, 4rem); }
.fcc-pgaleria__nav--next { right: clamp(.5rem, 4vw, 4rem); }
.fcc-pgaleria__nav.swiper-button-disabled { opacity: .35; cursor: default; }

/* Editor: mostra as fotos em linha */
.fcc-pgaleria__editrow { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .5rem; }
.fcc-pgaleria__editrow img { height: 160px; width: auto; flex: 0 0 auto; }
.fcc-pgaleria__ph { display: grid; place-items: center; min-height: 220px; border: 2px dashed var(--fcc-line); }

@media (max-width: 782px) {
	.fcc-pgaleria__slide { width: 88%; }
	.fcc-pgaleria__nav { width: 42px; height: 42px; }
}

/* -------------------------------------------------------------------------
   10 — SOLICITE UM ORÇAMENTO
   ------------------------------------------------------------------------- */
.fcc-orc {
	background: #fff;
	color: var(--fcc-ink);
	padding: clamp(3rem, 6vw, 5rem) 0;
}
.fcc-orc__inner {
	max-width: 860px;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 2rem);
}
.fcc-orc__head { text-align: center; margin-bottom: 2.5rem; }
.fcc-orc__title {
	color: var(--fcc-red);
	font-size: clamp(1.8rem, 3.6vw, 2.8rem);
	font-weight: 800;
	margin: 0 0 .6rem;
}
.fcc-orc__sub { color: #33373E; font-size: 1rem; line-height: 1.6; margin: 0 auto; max-width: 460px; }
.fcc-orc__alert { text-align: center; padding: .9rem 1.2rem; margin: 0 0 1.5rem; font-weight: 600; border-radius: 4px; }
.fcc-orc__alert--ok { background: #e7f6ec; color: #1b7a3d; border: 1px solid #b6e0c4; }
.fcc-orc__alert--err { background: #fdecec; color: #b02525; border: 1px solid #f2c2c2; }
.fcc-orc__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fcc-orc__row { display: flex; gap: 1rem; margin-bottom: 1rem; }
.fcc-orc__row > * { flex: 1; min-width: 0; }
.fcc-orc__form input,
.fcc-orc__form textarea {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	border: 1px solid #1B1E24;
	background: #fff;
	padding: .95rem 1.1rem;
	font: inherit;
	font-size: .95rem;
	color: var(--fcc-ink);
	border-radius: 0;
}
.fcc-orc__form input::placeholder,
.fcc-orc__form textarea::placeholder { color: #9AA0A6; }
.fcc-orc__form input:focus,
.fcc-orc__form textarea:focus { outline: 2px solid var(--fcc-red); outline-offset: -1px; }
.fcc-orc__form textarea { resize: vertical; }
.fcc-orc__submit {
	display: block;
	margin: 1.5rem auto 0;
	appearance: none; border: 0; cursor: pointer;
	background: var(--fcc-red);
	color: #fff;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 1.05rem 3.5rem;
	transition: background .2s ease, transform .2s ease;
}
.fcc-orc__submit:hover { background: #d90000; transform: translateY(-2px); }
.fcc-orc__contact {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	text-align: center;
	margin-top: clamp(2.5rem, 5vw, 4rem);
}
.fcc-orc__contactcol strong { display: block; font-weight: 700; margin-bottom: .5rem; }
.fcc-orc__contactcol span,
.fcc-orc__contactcol a { color: var(--fcc-muted); font-size: .9rem; line-height: 1.6; text-decoration: none; }
.fcc-orc__contactcol a:hover { color: var(--fcc-red); }

@media (max-width: 640px) {
	.fcc-orc__row { flex-direction: column; }
	.fcc-orc__contact { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   TOPO COM FOTO: foto de ambiente atrás do menu fixo (2026-09-23)
   Sem foto o bloco continua sendo o espaçador acima. A foto é o LCP da tela.
   ------------------------------------------------------------------------- */
.fcc-ptopo.has-image {
	position: relative;
	height: clamp(420px, 52vw, 88vh);
	overflow: hidden;
	background: var(--fcc-dark);
}
.fcc-ptopo__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Escurece o alto (legibilidade do menu branco) e funde a base no fundo escuro da
   barra de âncoras que vem logo abaixo. */
.fcc-ptopo.has-image::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 72%, rgba(36,39,47,.85) 100%);
}
@media (max-width: 782px) {
	.fcc-ptopo.has-image { height: clamp(300px, 78vw, 70vh); }
}

/* Linha fina: frase curta sob o título das Características */
.fcc-caract__sub {
	margin: .9rem 0 0;
	color: #fff;
	font-size: clamp(1.05rem, 1.6vw, 1.35rem);
	font-weight: 500;
	line-height: 1.35;
	text-wrap: balance;
}

/* -------------------------------------------------------------------------
   FOTO 01 / FOTO 02: foto de ambiente em largura total
   ------------------------------------------------------------------------- */
.fcc-pfoto {
	position: relative;
	margin: 0;
	aspect-ratio: 21 / 9;
	max-height: 90vh;
	overflow: hidden;
	background: var(--fcc-dark);
}
.fcc-pfoto__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Foco vertical por foto (meta fcc_foto{n}_foco, 50 = centro/centro). */
	object-position: 50% var(--fcc-pfoto-foco, 50%);
	display: block;
}
.fcc-pfoto__ph {
	display: grid;
	place-items: center;
	gap: .75rem;
	height: 100%;
	color: #C9CDD3;
	border: 2px dashed rgba(255,255,255,.2);
	text-align: center;
	padding: 1rem;
}
@media (max-width: 782px) {
	.fcc-pfoto { aspect-ratio: 4 / 3; }
}

/* -------------------------------------------------------------------------
   ANIMAÇÃO POR ROLAGEM: quadros do render trocados conforme o scroll
   Sem JS ou com movimento reduzido: só o primeiro quadro, na proporção do
   render. Com JS (.is-ativa): seção alta, palco preso na tela, canvas por cima.
   ------------------------------------------------------------------------- */
.fcc-panim {
	/* Cor do fundo do estúdio do render (o view.js troca pela cor amostrada do quadro):
	   com branco puro aparecia uma moldura em volta do quadro. */
	background: #f3f2f3;
	position: relative;
}
.fcc-panim__palco {
	position: relative;
	aspect-ratio: var(--fcc-panim-ar, 16 / 9);
	max-height: 100vh;
	margin-inline: auto;
}
.fcc-panim__poster {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.fcc-panim__canvas { display: none; }

/* Duração da animação = altura extra da seção. 118 quadros em ~1,6 tela de
   rolagem: rápido o bastante para não parecer que a página travou. */
.fcc-panim.is-ativa { height: 260vh; }
.fcc-panim.is-ativa .fcc-panim__palco {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	max-height: none;
	aspect-ratio: auto;
}
/* Tela inteira, por baixo do menu e da barra de âncoras (os dois são translúcidos e o
   alto do render é só fundo de estúdio). */
.fcc-panim.is-ativa .fcc-panim__poster,
.fcc-panim.is-ativa .fcc-panim__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
/* Mesmo enquadramento do canvas enquanto os quadros carregam (cover, âncora 62%). */
@media (orientation: landscape) {
	.fcc-panim.is-ativa .fcc-panim__poster { object-fit: cover; object-position: 50% 62%; }
}
.fcc-panim.is-ativa .fcc-panim__canvas { display: block; }
.fcc-panim.is-pintada .fcc-panim__poster { visibility: hidden; }
@media (max-width: 782px) {
	.fcc-panim.is-ativa { height: 220vh; }
}
.fcc-panim__ph {
	display: grid;
	place-items: center;
	gap: .5rem;
	min-height: 220px;
	border: 2px dashed var(--fcc-line);
	color: var(--fcc-muted);
	text-align: center;
	padding: 1rem;
}

/* -------------------------------------------------------------------------
   MEDIDAS: abas de série (produto vendido em mais de uma série)
   ------------------------------------------------------------------------- */
.fcc-medidas__abas {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
}
.fcc-medidas__aba {
	appearance: none;
	border: 1px solid var(--fcc-line);
	background: #fff;
	color: var(--fcc-ink);
	padding: .8rem 1.5rem;
	font: inherit;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.fcc-medidas__aba:hover { border-color: var(--fcc-ink); }
.fcc-medidas__aba[aria-selected="true"] {
	background: var(--fcc-red);
	border-color: var(--fcc-red);
	color: #fff;
}
.fcc-medidas__aba:focus-visible { outline: 2px solid var(--fcc-ink); outline-offset: 2px; }
.fcc-medidas__conjunto[hidden] { display: none; }

/* -------------------------------------------------------------------------
   VÍDEOS: fachada com miniatura (o iframe só entra no clique)
   ------------------------------------------------------------------------- */
.fcc-pvideo {
	background: var(--fcc-dark);
	color: #fff;
	padding: clamp(3rem, 6vw, 5rem) 0;
}
.fcc-pvideo__inner {
	box-sizing: border-box;
	max-width: var(--fcc-container);
	margin-inline: auto;
	padding-inline: var(--fcc-gutter);
}
.fcc-pvideo__title {
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	font-weight: 800;
	text-transform: uppercase;
	margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
	color: #fff;
}
.fcc-pvideo__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 2rem);
}
.fcc-pvideo.is-unico .fcc-pvideo__grid { grid-template-columns: minmax(0, 980px); justify-content: center; }
.fcc-pvideo__play,
.fcc-pvideo__frame {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	overflow: hidden;
}
.fcc-pvideo__play { appearance: none; border: 0; padding: 0; cursor: pointer; }
/* A hqdefault é 4:3 com tarja preta: o cover num quadro 16:9 corta a tarja. */
.fcc-pvideo__play img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: .85;
	transition: opacity .25s ease, transform .5s ease;
}
.fcc-pvideo__play:hover img,
.fcc-pvideo__play:focus-visible img { opacity: 1; transform: scale(1.02); }
.fcc-pvideo__play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.fcc-pvideo__icon {
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
	width: clamp(58px, 6vw, 84px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--fcc-red);
	transition: transform .25s ease, background-color .25s ease;
}
.fcc-pvideo__icon::after {
	content: "";
	position: absolute;
	inset: 50% auto auto 54%;
	transform: translate(-50%, -50%);
	border: .85rem solid transparent;
	border-left-color: #fff;
	border-right: 0;
}
.fcc-pvideo__play:hover .fcc-pvideo__icon { transform: translate(-50%, -50%) scale(1.08); background: #CC0000; }
.fcc-pvideo__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.fcc-pvideo__ph { color: #C9CDD3; margin: 0; }
@media (max-width: 782px) {
	.fcc-pvideo__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.fcc-pvideo__play img, .fcc-pvideo__icon { transition: none; }
}

/* -------------------------------------------------------------------------
   PERGUNTAS FREQUENTES: sanfona com <details> nativo
   ------------------------------------------------------------------------- */
.fcc-pfaq {
	background: #fff;
	color: var(--fcc-ink);
	padding: clamp(3rem, 6vw, 5rem) 0;
}
.fcc-pfaq__inner {
	box-sizing: border-box;
	max-width: calc(960px + var(--fcc-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--fcc-gutter);
}
.fcc-pfaq__title {
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	font-weight: 800;
	text-transform: uppercase;
	margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
}
.fcc-pfaq__lista { border-top: 1px solid var(--fcc-line); }
.fcc-pfaq__item { border-bottom: 1px solid var(--fcc-line); }
.fcc-pfaq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.25rem 0;
	cursor: pointer;
	list-style: none;
	font-weight: 700;
	font-size: clamp(1rem, 1.3vw, 1.1rem);
	line-height: 1.4;
}
.fcc-pfaq__q::-webkit-details-marker { display: none; }
.fcc-pfaq__q::after {
	content: "+";
	flex: none;
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1;
	color: var(--fcc-red);
	transition: transform .2s ease;
}
.fcc-pfaq__item[open] > .fcc-pfaq__q::after { transform: rotate(45deg); }
.fcc-pfaq__q:hover { color: var(--fcc-red); }
.fcc-pfaq__q:focus-visible { outline: 2px solid var(--fcc-ink); outline-offset: 4px; }
.fcc-pfaq__a {
	padding: 0 3rem 1.4rem 0;
	color: var(--fcc-muted);
	line-height: 1.7;
	max-width: 68ch;
}
.fcc-pfaq__a p { margin: 0 0 .75rem; }
.fcc-pfaq__a p:last-child { margin-bottom: 0; }
.fcc-pfaq__edit { border-bottom: 1px solid var(--fcc-line); padding: 1rem 0; }
.fcc-pfaq__acoes { display: flex; gap: .5rem; }
@media (prefers-reduced-motion: reduce) {
	.fcc-pfaq__q::after { transition: none; }
}

/* ---- Arquivo de família (/familia/{slug}/) — bloco facchini/familia-grid ---- */
.fcc-fam-grid__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	grid-template-columns: repeat(var(--fcc-fam-cols, 3), minmax(0, 1fr));
}
.fcc-fam-grid.is-cols-1 .fcc-fam-grid__list { --fcc-fam-cols: 1; }
.fcc-fam-grid.is-cols-2 .fcc-fam-grid__list { --fcc-fam-cols: 2; }
.fcc-fam-grid.is-cols-3 .fcc-fam-grid__list { --fcc-fam-cols: 3; }
.fcc-fam-grid.is-cols-4 .fcc-fam-grid__list { --fcc-fam-cols: 4; }
.fcc-fam-grid.is-cols-5 .fcc-fam-grid__list { --fcc-fam-cols: 5; }
.fcc-fam-grid.is-cols-6 .fcc-fam-grid__list { --fcc-fam-cols: 6; }

.fcc-fam-card {
	display: block;
	text-decoration: none;
	color: inherit;
}
/* Proporção fixa na moldura: os produtos vêm de fotos com recortes diferentes e
   sem isto a grade fica com linhas de altura desigual. */
.fcc-fam-card__media {
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #f0f0f0;
}
.fcc-fam-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}
.fcc-fam-card:hover .fcc-fam-card__media img { transform: scale(1.04); }
.fcc-fam-card__title {
	display: block;
	margin-top: 1rem;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.35;
	text-transform: uppercase;
	letter-spacing: .03em;
}
.fcc-fam-card:hover .fcc-fam-card__title { color: var(--fcc-red); }

.fcc-fam-grid__empty { color: var(--fcc-muted); font-size: .95rem; }

.fcc-fam-grid__pager {
	display: flex;
	justify-content: center;
	gap: .75rem;
	margin-top: clamp(2rem, 4vw, 3rem);
	font-size: .9rem;
}
.fcc-fam-grid__pager .page-numbers {
	text-decoration: none;
	color: var(--fcc-muted);
	padding: .35rem .7rem;
	border: 1px solid rgba(0,0,0,.12);
}
.fcc-fam-grid__pager .page-numbers:hover,
.fcc-fam-grid__pager .page-numbers.current { color: #fff; background: var(--fcc-red); border-color: var(--fcc-red); }

@media (max-width: 900px) {
	.fcc-fam-grid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.fcc-fam-grid__list { grid-template-columns: 1fr; }
}

/* ---- Documento legal (pattern facchini/documento-legal) ---- */
/* Duas colunas: índice fixo na rolagem à esquerda, texto à direita. O grid mora no
   .fcc-doc e o índice é o único filho da coluna 1, esticado por todas as linhas —
   é isso que dá altura para o position:sticky ter onde grudar. `span 9999` porque
   `grid-row: 1 / -1` só conta as linhas explícitas, e aqui as linhas são implícitas.
   Abaixo de 1000px vira uma coluna e o índice volta a ser a caixa do topo. */
/* As medidas moram no <main> para o post-title do template (irmão do .fcc-doc)
   poder usar a mesma largura — senão o H1 sai desalinhado do corpo abaixo. */
.wp-site-blocks > main:has(.fcc-doc) {
	--fcc-doc-side: 15rem;
	--fcc-doc-gap: 4rem;
	--fcc-doc-read: 68ch;
}
.fcc-doc,
.wp-site-blocks > main:has(.fcc-doc) > .wp-block-post-title {
	max-width: var(--fcc-doc-read);
	margin-inline: auto;
}

/* O layout "constrained" do WP joga max-width do contentSize e margin auto em todo
   filho do grupo — o que, dentro de um grid, faz o item encolher e centralizar. Aqui
   a largura de leitura é responsabilidade do grid, então neutralizamos. Especificidade
   0,2,0 de propósito: precisa vencer o `:root :where(...)` que o WP imprime inline. */
.fcc-doc.is-layout-constrained > * {
	max-width: none;
	margin-inline: 0 !important;
}
/* O grupo do índice também vem com has-global-padding: numa coluna de 15rem isso
   comeria 3rem só de respiro lateral. O .fcc-doc__dpo fica de fora — ali o padding
   é intencional. */
.fcc-doc.has-global-padding,
.fcc-doc__toc.has-global-padding { padding-inline: 0; }

/* Âncoras do índice: o header é fixo, então o alvo precisa parar abaixo dele. */
.fcc-doc :is(h2, h3)[id] { scroll-margin-top: 8rem; }

.fcc-doc h2 { margin-top: 2.75rem; }
.fcc-doc p, .fcc-doc li { line-height: 1.75; }
.fcc-doc li { margin-bottom: .5rem; }

/* Índice — caixa no topo (mobile e telas estreitas) */
.fcc-doc__toc {
	border-top: 3px solid var(--fcc-red);
	border-bottom: 1px solid var(--fcc-line);
	padding: 1.35rem 0 1.15rem;
	margin-bottom: 2.5rem;
}
.fcc-doc__toc-label {
	font-size: 11px !important;
	text-transform: uppercase;
	letter-spacing: .18em;
	color: var(--fcc-muted);
	font-weight: 600;
	margin: 0 0 .8rem !important;
}
.fcc-doc__toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: 2.5rem;
}
.fcc-doc__toc-list li { margin: 0 0 .45rem; break-inside: avoid; }
.fcc-doc__toc-list a {
	text-decoration: none;
	color: var(--fcc-ink);
	font-size: .9375rem;
	border-bottom: 1px solid transparent;
}
.fcc-doc__toc-list a:hover { color: var(--fcc-red); border-bottom-color: currentColor; }
/* Item da seção que está na tela (scrollspy no theme.js). Vermelho SEM sublinhado
   para não se confundir com o hover, que é vermelho COM sublinhado. Sem JS nenhum
   item recebe .is-active e o índice continua funcionando como lista de links. */
.fcc-doc__toc-list a.is-active { color: var(--fcc-red); font-weight: 600; }

/* Índice — coluna lateral fixa (desktop) */
@media (min-width: 1000px) {
	.fcc-doc,
	.wp-site-blocks > main:has(.fcc-doc) > .wp-block-post-title {
		max-width: calc(var(--fcc-doc-side) + var(--fcc-doc-gap) + var(--fcc-doc-read));
	}
	.fcc-doc {
		display: grid;
		grid-template-columns: var(--fcc-doc-side) minmax(0, 1fr);
		column-gap: var(--fcc-doc-gap);
	}
	.fcc-doc > * { grid-column: 2; }
	.fcc-doc__toc {
		grid-column: 1;
		grid-row: 1 / span 9999;
		position: sticky;
		top: 6.5rem;
		align-self: start;
		max-height: calc(100vh - 9rem);
		overflow-y: auto;
		overscroll-behavior: contain;
		margin-bottom: 0;
		padding-bottom: .5rem;
		border-bottom: 0;
	}
	.fcc-doc__toc-list { columns: 1; }
	.fcc-doc__toc-list li { margin-bottom: .7rem; }
	.fcc-doc__toc-list a { font-size: .875rem; line-height: 1.35; display: inline-block; }
}

/* Abertura */
.fcc-doc__intro {
	font-size: 1.125rem !important;
	line-height: 1.65;
	color: var(--fcc-ink);
}

/* Encarregado de dados */
.fcc-doc__dpo {
	margin-top: 3.5rem;
	padding: 1.35rem 1.5rem;
	background: #F5F6F7;
	border-left: 3px solid var(--fcc-red);
}
.fcc-doc__dpo p { margin-bottom: 0; font-size: .9375rem; }
.fcc-doc__dpo-label {
	font-size: 11px !important;
	text-transform: uppercase;
	letter-spacing: .18em;
	color: var(--fcc-muted);
	font-weight: 600;
	margin: 0 0 .5rem !important;
}

@media (max-width: 700px) {
	.fcc-doc__toc-list { columns: 1; }
}

/* ---- Topo de página interna (pattern facchini/hero-interno) ---- */
.fcc-hero-interno { align-items: flex-end; }
/* O cover do core traz `padding: 1em`. Enquanto a coluna de conteúdo está no teto
   de 1280px isso se cancela na centragem (hero e seção caem no mesmo x); abaixo
   de ~1360px a coluna passa a preencher a largura disponível e o 1em vira 16px de
   desalinhamento entre o hero e as seções do kit. Zerar só o eixo horizontal — o
   respiro vertical vem do min-height com align-items. */
.fcc-hero-interno { padding-inline: 0; }
.fcc-hero-interno .wp-block-cover__inner-container { padding-bottom: 1rem; }
.fcc-hero-interno__eyebrow {
	text-transform: uppercase;
	letter-spacing: .18em;
	font-weight: 600;
	margin-bottom: .9rem !important;
}
/* Mesma armadilha do .fcc-sec__lead: aqui o recuo é à direita, para o texto
   continuar alinhado à coluna de conteúdo do cover. */
.fcc-hero-interno__title { padding-right: min(55%, 40rem); }
.fcc-hero-interno__lead { padding-right: min(45%, 30rem); margin-top: 1rem !important; }

/* =========================================================
   PÁGINAS INSTITUCIONAIS — kit de seções (.fcc-sec)
   Montado com blocos do core + className: o cliente edita tudo no Gutenberg e o
   visual mora aqui. Serve qualquer página no template "Largura total".
   Convenção: a seção é um wp:group alignfull com layout constrained — quem
   centraliza e limita a 1280px é o próprio WP (useRootPaddingAwareAlignments),
   então aqui só entram fundo, respiro vertical e a tipografia da seção.
   ========================================================= */
/* O tema não tem reset global de box-sizing (é de propósito, para não mexer no que
   já existe). Sem border-box aqui, o `padding-right` que encurta a linha soma na
   largura, o elemento passa a encher a seção inteira e o max-width do layout
   constrained nunca chega a valer — o texto sai da coluna de conteúdo. */
.fcc-sec,
.fcc-sec *,
.fcc-hero-interno,
.fcc-hero-interno * { box-sizing: border-box; }

.fcc-sec {
	background: #fff;
	color: var(--fcc-ink);
	padding-block: clamp(3rem, 6vw, 5.5rem);
}
.fcc-sec--cinza { background: #F5F7F9; }
.fcc-sec--escura { background: var(--fcc-ink); color: #fff; }
.fcc-sec--escura .fcc-sec__lead,
.fcc-sec--escura .fcc-card__p { color: #C8CCD2; }

.fcc-sec__kicker {
	margin: 0 0 .5rem;
	color: var(--fcc-red);
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .12em;
	font-size: .78rem;
}
.fcc-sec__titulo {
	margin: 0;
	text-transform: uppercase;
	font-size: clamp(1.7rem, 3.4vw, 2.6rem);
}
/* Subtítulo de dobra secundária dentro da seção. Existe porque um h3 com a
   classe do título da seção sai do mesmo tamanho do h2 e as duas dobras passam a
   competir — a hierarquia tem de aparecer no corpo, não só na marcação. */
.fcc-sec__sub {
	margin: clamp(2.5rem, 4vw, 3.5rem) 0 0;
	text-transform: uppercase;
	font-size: clamp(1.05rem, 1.7vw, 1.35rem);
	letter-spacing: 0;
}
.fcc-sec__sub + .fcc-sec__lead { margin-top: .6rem; }

.fcc-sec__lead {
	margin: 1rem 0 0;
	/* NÃO usar max-width aqui: o layout constrained do WP centraliza quem tem
	   max-width próprio (com `margin-inline: auto !important`), e zerar a margem
	   joga o texto na borda da SEÇÃO, fora da coluna de conteúdo. O jeito de
	   encurtar a linha sem sair da coluna é sobrar espaço à direita. */
	padding-right: min(45%, 34rem);
	color: #555;
	font-size: 1.05rem;
	line-height: 1.65;
}
/* Respiro entre o cabeçalho da seção e o que vem depois, sem depender do blockGap. */
.fcc-sec__lead + *,
.fcc-sec__titulo + .fcc-grade,
.fcc-sec__titulo + .fcc-check { margin-top: clamp(1.75rem, 3vw, 2.75rem); }

/* ---- Grade (wp:group com layout grid): cartões, números, contatos ---- */
.fcc-grade { align-items: stretch; }
/* Dentro de uma coluna da grade o lead já é estreito: o recuo da direita
   (que existe para encurtar a linha na largura cheia) estreitaria de novo. */
.fcc-grade .fcc-sec__lead { padding-right: 0; margin-top: 0; }

/* ---- Número em destaque: um parágrafo só (<strong> = valor, resto = rótulo) ---- */
.fcc-num {
	margin: 0;
	color: var(--fcc-muted);
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .06em;
	font-size: .8rem;
	line-height: 1.4;
}
.fcc-num strong {
	display: block;
	margin-bottom: .5rem;
	color: var(--fcc-red);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
	font-size: clamp(2.1rem, 4.4vw, 3.2rem);
	text-transform: none;
}

/* ---- Cartão ---- */
.fcc-card {
	/* Token e não valor literal: a foto que sangra precisa da MESMA medida em
	   margem negativa. Duplicar o clamp nos dois lugares é como o recuo passa a
	   errar por 1px em algumas larguras. */
	--fcc-card-pad: clamp(1.35rem, 2.4vw, 2rem);
	height: 100%;
	background: #fff;
	border: 1px solid var(--fcc-line);
	padding: var(--fcc-card-pad);
}
/* Foto no topo do cartão, sangrando nas três bordas de cima (wp:image com
   className fcc-card__foto como PRIMEIRO filho do grupo .fcc-card).
   O aspect-ratio fixo é o que mantém os títulos dos cartões na mesma linha —
   o acervo tem 500x350, 530x353 e 1080x498 na mesma grade. */
.fcc-card__foto {
	margin: calc(var(--fcc-card-pad) * -1) calc(var(--fcc-card-pad) * -1) var(--fcc-card-pad);
}
.fcc-card__foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}
/* Marca ou selo dentro do cartão: NÃO sangra e NÃO recorta. A arte já tem
   margem própria e um object-fit: cover comeria a borda do desenho. */
.fcc-card__selo { margin: 0 0 1.1rem; }
.fcc-card__selo img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 5.5rem;
	height: auto;
}
.fcc-sec--cinza .fcc-card { background: #fff; }
.fcc-sec--escura .fcc-card { background: #22252C; border-color: #343841; }
.fcc-card__t {
	margin: 0 0 .7rem;
	text-transform: uppercase;
	font-size: 1.1rem;
	letter-spacing: -.01em;
}
.fcc-card__p { margin: 0 0 .9rem; color: #555; font-size: .95rem; line-height: 1.6; }
.fcc-card__p:last-child { margin-bottom: 0; }
/* Passo numerado: o número é um parágrafo, para o cliente poder reordenar */
.fcc-card__n {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin: 0 0 1.1rem;
	/* Tem largura própria, então o layout constrained o centralizaria no cartão. */
	margin-inline: 0 !important;
	background: var(--fcc-red);
	color: #fff;
	font-weight: 800;
	font-size: 1.05rem;
	line-height: 1;
}
/* Preço/valor em destaque dentro do cartão */
.fcc-card__rot {
	margin: 0;
	color: var(--fcc-muted);
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .06em;
	font-size: .7rem;
}
.fcc-card__val {
	margin: .15rem 0 1rem;
	font-weight: 700;
	font-size: 1.05rem;
	font-variant-numeric: tabular-nums;
}
.fcc-card__preco {
	margin: .15rem 0 0;
	color: var(--fcc-red);
	font-weight: 800;
	letter-spacing: -.02em;
	font-size: clamp(1.5rem, 2.8vw, 1.9rem);
	font-variant-numeric: tabular-nums;
}

/* ---- Lista com check vermelho ---- */
.fcc-check { list-style: none; margin: 0; padding-left: 0; }
.fcc-check li {
	position: relative;
	margin: 0 0 .7rem;
	padding-left: 1.9rem;
	line-height: 1.55;
}
.fcc-check li::before {
	content: "";
	position: absolute;
	left: .15rem;
	top: .42em;
	width: .72rem;
	height: .38rem;
	border-left: 2px solid var(--fcc-red);
	border-bottom: 2px solid var(--fcc-red);
	transform: rotate(-45deg);
}
/* Duas colunas quando a lista é longa e há espaço. */
.fcc-check--duas { columns: 2; column-gap: 3rem; }
.fcc-check--duas li { break-inside: avoid; }
@media (max-width: 780px) { .fcc-check--duas { columns: 1; } }

/* ---- Tabela (mesma leitura da tabela de medidas: sem borda, zebra) ---- */
.fcc-tab { margin: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fcc-tab table {
	width: 100%;
	border-collapse: collapse;
	font-size: .82rem;
	font-variant-numeric: tabular-nums;
}
.fcc-tab :is(th, td) {
	border: 0;
	padding: .45rem .7rem;
	text-align: right;
	white-space: nowrap;
}
.fcc-tab :is(th, td):first-child { text-align: left; white-space: normal; min-width: 14rem; }
.fcc-tab thead th {
	color: var(--fcc-muted);
	text-transform: uppercase;
	font-size: .68rem;
	letter-spacing: .06em;
	font-weight: 700;
}
.fcc-tab tbody tr:nth-child(odd) { background: #F5F7F9; }
.fcc-tab figcaption {
	margin-top: .6rem;
	color: var(--fcc-muted);
	font-size: .75rem;
	text-align: left;
}

/* ---- Sanfona (wp:details) ---- */
.fcc-det { border-top: 1px solid var(--fcc-line); margin-top: 2rem; }
.fcc-det > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 0;
	cursor: pointer;
	list-style: none;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .05em;
	font-size: .8rem;
}
.fcc-det > summary::-webkit-details-marker { display: none; }
.fcc-det > summary::after {
	content: "+";
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1;
	color: var(--fcc-red);
}
.fcc-det[open] > summary::after { content: "–"; }
.fcc-det > :not(summary) { margin-bottom: 1.5rem; }

/* ---- Ilustração (wp:image dentro de seção) ----
   O bloco de imagem do core já vem com margem própria; aqui só o alinhamento
   dentro da grade e o corte da tira lateral. */
.fcc-ilustra { margin: 0; }
.fcc-ilustra img { display: block; width: 100%; height: auto; }
/* Ao lado de uma lista: centraliza na altura da coluna e não deixa crescer demais. */
.fcc-ilustra--centro {
	align-self: center;
	justify-self: center;
	max-width: 34rem;
}
/* Tira: a foto de perfil do implemento atravessando a seção, como uma elevação
   técnica. O recorte é PNG com fundo transparente, então cai bem no cinza. */
.fcc-ilustra--tira {
	margin: clamp(1.75rem, 3vw, 2.75rem) 0 0;
	max-width: 100%;
}
@media (max-width: 560px) {
	.fcc-ilustra--centro { max-width: 100%; }
}

/* ---- Observação em letra miúda ---- */
.fcc-nota {
	margin: 1.5rem 0 0;
	color: var(--fcc-muted);
	font-size: .78rem;
	line-height: 1.6;
}
.fcc-sec--escura .fcc-nota { color: #8B9099; }

/* ---- Coluna de conteúdo dentro da .fcc-grade ----
   Só agrupa (o respiro entre os filhos vem do blockGap do tema). O min-width: 0
   não é decorativo: item de grid nasce com min-width auto e uma palavra longa
   (URL, nome de arquivo) estoura a coluna em vez de quebrar. */
.fcc-bloco { min-width: 0; }

/* ---- Frase de destaque: a promessa da seção em corpo grande ----
   Um parágrafo só, com filete vermelho à esquerda. Serve para a afirmação que
   abre uma seção (a promessa de fábrica, um compromisso) sem virar <blockquote>
   — não é citação de ninguém, é a empresa falando. */
.fcc-frase {
	margin: 0;
	padding-left: clamp(1rem, 2vw, 1.75rem);
	border-left: 3px solid var(--fcc-red);
	font-size: clamp(1.1rem, 2vw, 1.4rem);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -.01em;
	/* NÃO usar max-width: como filho direto da seção constrained, o WP centraliza
	   quem tem max-width próprio (margin-inline: auto !important) e a frase nascia
	   ~300px à direita do título. Encurtar a linha é sobrar espaço à direita —
	   mesma armadilha do .fcc-sec__lead. */
	padding-right: min(40%, 26rem);
}
/* Dentro de uma coluna da grade a linha já é curta: o recuo estreitaria de novo. */
.fcc-grade .fcc-frase { padding-right: 0; }
.fcc-sec--escura .fcc-frase { color: #fff; }
.fcc-sec__titulo + .fcc-frase { margin-top: clamp(1.5rem, 2.5vw, 2.25rem); }

/* ---- Contato: <strong> = rótulo, texto = valor, <em> = complemento ---- */
.fcc-contato { margin: 0; font-weight: 700; font-size: 1.15rem; line-height: 1.4; }
.fcc-contato strong {
	display: block;
	margin-bottom: .3rem;
	color: var(--fcc-muted);
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .06em;
	font-size: .7rem;
}
.fcc-contato em {
	display: block;
	margin-top: .4rem;
	color: var(--fcc-muted);
	font-style: normal;
	font-weight: 400;
	font-size: .85rem;
	line-height: 1.5;
}
.fcc-contato a { color: inherit; text-decoration: none; }
.fcc-contato a:hover { color: var(--fcc-red); }

/* Grade: o columnCount do bloco manda no desktop; aqui só o colapso.
   Seletor com 2 classes de propósito — a regra do WP para o layout é (0,1,0) e é
   impressa depois da folha do tema, então empatar em especificidade perderia. */
@media (max-width: 900px) {
	.fcc-sec .fcc-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.fcc-sec .fcc-grade { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   FORMULÁRIOS (Fluent Forms) — .fcc-form
   Envolver o shortcode num wp:group com className "fcc-form".
   Duas coisas fazem esta seção ser curta:
   1) O plugin expõe tokens em :root (--fluentform-primary, -border-color,
      -border-radius, -danger, -secondary). Redefinir os tokens dentro de
      .fcc-form já retinge borda, foco, raio e erro — sem brigar por seletor.
   2) theme.css é enfileirado DEPOIS de fluent-forms-public.css e
      fluentform-public-default.css, então empate de especificidade ganha aqui.
      Por isso o prefixo .fcc-form .frm-fluent-form (0,2,0) basta para vencer
      .fluentform .x e .ff-default .x. A exceção é a cor do botão, que o plugin
      imprime num <style> por formulário com (0,3,1) — daí o :hover ali embaixo.
   O plugin já colapsa as colunas sozinho: .ff-t-container só vira flex a partir
   de 768px; abaixo disso os campos empilham. Não é preciso media query nossa.
   ========================================================= */
.fcc-form,
.fcc-form * { box-sizing: border-box; }

.fcc-form {
	margin-top: clamp(1.75rem, 3vw, 2.75rem);
	/* Encurta a linha do formulário pela direita, como o .fcc-sec__lead: dar
	   max-width faria o layout constrained do WP centralizar o bloco. */
	padding-right: min(18%, 12rem);

	--fluentform-primary: var(--fcc-red);
	--fluentform-secondary: var(--fcc-ink);
	--fluentform-danger: var(--fcc-red);
	--fluentform-border-color: var(--fcc-line);
	--fluentform-border-radius: 0;
}
/* O grupo aninhado herda o has-global-padding do WP; aqui o respiro lateral
   já vem da seção. */
.fcc-form.has-global-padding { padding-left: 0; }
/* Dentro do arquétipo documento a coluna já é estreita. */
.fcc-form--doc { padding-right: 0; }

/* ---- Campos ---- */
.fcc-form .frm-fluent-form .ff-el-group { margin-bottom: 1.35rem; }
.fcc-form .frm-fluent-form .ff-t-container { gap: 1.35rem; }

.fcc-form .frm-fluent-form .ff-el-input--label { margin-bottom: .45rem; }
.fcc-form .frm-fluent-form .ff-el-input--label label {
	color: var(--fcc-muted);
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .06em;
	font-size: .7rem;
	line-height: 1.4;
}

.fcc-form .frm-fluent-form .ff-el-form-control {
	padding: .85rem 1rem;
	background: #fff;
	color: var(--fcc-ink);
	font-family: inherit;
	font-size: .95rem;
	line-height: 1.4;
}
.fcc-form .frm-fluent-form textarea.ff-el-form-control { line-height: 1.6; }
.fcc-form .frm-fluent-form .ff-el-form-control::placeholder { color: #A6ACB4; }
.fcc-form .frm-fluent-form .ff-el-form-control:focus {
	border-color: var(--fcc-red);
	box-shadow: 0 0 0 2px rgba(255, 0, 0, .12);
}
/* Auxílio abaixo do rótulo (helpMessagePlacement: after_label) */
.fcc-form .frm-fluent-form .ff-el-help-message {
	margin: 0 0 .45rem;
	color: var(--fcc-muted);
	font-size: .75rem;
	font-style: normal;
	line-height: 1.5;
}

/* ---- Consentimento LGPD (gdpr_agreement) ---- */
.fcc-form .frm-fluent-form .ff-el-tc {
	border-top: 1px solid var(--fcc-line);
	padding-top: 1.1rem;
}
.fcc-form .frm-fluent-form .ff-el-tc .ff-el-form-check-label {
	align-items: flex-start;
	gap: .6rem;
	display: flex;
	color: var(--fcc-muted);
	font-size: .8rem;
	line-height: 1.55;
}
.fcc-form .frm-fluent-form .ff-el-tc .ff_tc_checkbox { display: block; padding-top: .15rem; }
.fcc-form .frm-fluent-form .ff-el-tc input[type="checkbox"] {
	width: 1rem;
	height: 1rem;
	accent-color: var(--fcc-red);
}

/* ---- Botão: mesma pílula quadrada dos wp-element-button do tema ----
   A cor de fundo já vem do plugin (#FF0000, gravado no formulário). */
.fcc-form .frm-fluent-form .ff-btn-submit {
	margin-top: .5rem;
	padding: 1rem 2rem;
	border-radius: 0;
	font-family: inherit;
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}
/* (0,4,0) de propósito: o <style> por formulário que pinta o botão é (0,3,1). */
.fcc-form .frm-fluent-form .ff-btn-submit:hover,
.fcc-form .frm-fluent-form .ff-btn-submit:focus {
	background-color: #CC0000;
	opacity: 1;
}

/* ---- Erro e sucesso ---- */
.fcc-form .frm-fluent-form .ff-el-is-error .ff-el-form-control { border-color: var(--fcc-red); }
.fcc-form .frm-fluent-form .text-danger {
	color: var(--fcc-red);
	font-size: .75rem;
	font-weight: 600;
}
.fcc-form .ff-message-success {
	margin-top: 0;
	padding: 1.5rem 1.75rem;
	border: 0;
	border-left: 3px solid var(--fcc-red);
	background: #F5F7F9;
	box-shadow: none;
	line-height: 1.65;
}
.fcc-sec--cinza .fcc-form .ff-message-success { background: #fff; }
.fcc-form .ff-message-success p { margin: 0; }

/* Um <select> sozinho na linha não precisa da largura toda do formulário.
   Dentro de coluna a regra não tem efeito: a coluna já é mais estreita. */
.fcc-form .frm-fluent-form select.ff-el-form-control { max-width: 34rem; }

/* O recuo da direita existe só para encurtar a linha na largura cheia; abaixo
   de 900px ele viraria uma sangria que empurra os campos para fora do eixo. */
@media (max-width: 900px) {
	.fcc-form { padding-right: 0; }
}

/* Ressalva em letra miúda dentro do arquétipo documento (mesma leitura do
   .fcc-nota das seções institucionais, mas com o nome da família .fcc-doc). */
.fcc-doc__nota {
	margin-top: 1.5rem;
	color: var(--fcc-muted);
	font-size: .8125rem !important;
	line-height: 1.6;
}

/* ---- Dois acertos do kit que só apareceram no Canal de Ética (2026-08-31) ---- */

/* O respiro depois do lead usa `.fcc-sec__lead + *` (0,1,0) e empata com o
   `margin: 0` que cada peça declara MAIS ADIANTE nesta folha — em empate, a
   regra posterior ganha, e a peça encostava no lead. Quando ela vem colada no
   lead (sem grade no meio), precisa do seletor de duas classes. */
.fcc-sec__lead + .fcc-check,
.fcc-sec__lead + .fcc-tab,
.fcc-sec__lead + .fcc-num,
.fcc-sec__lead + .fcc-contato,
.fcc-sec__lead + .fcc-ilustra { margin-top: clamp(1.75rem, 3vw, 2.75rem); }

/* .fcc-contato foi desenhado para fundo claro: o --fcc-muted (#6A7078) do rótulo
   e do complemento dá ~2,6:1 sobre o ink da seção escura. Clarear os dois. */
.fcc-sec--escura .fcc-contato strong { color: #9AA0A6; }
.fcc-sec--escura .fcc-contato em { color: #A9AFB8; }

/* ---- Documento legal dentro do kit (páginas com hero, 2026-08-31) ----
   Problema: o `.fcc-doc` tem largura de leitura própria (~53rem com o índice) e
   `margin-inline: auto`. Sozinho na página isso o centralizava e estava certo;
   dentro da `.fcc-sec` ele se centraliza na coluna de 1280px e nasce ~190px à
   direita do hero, que é alinhado ao início da coluna.

   NÃO resolver com `margin-inline: 0` — é a armadilha 1 do kit: sem a margem
   automática ele vai para a borda da SEÇÃO (o root padding de 1.5rem = 24px),
   e não para o início da coluna de conteúdo. Fica pior, e desalinhado ao
   contrário.

   O certo é o documento se comportar como qualquer outro filho da seção — tomar
   a coluna de 1280px e continuar centralizado por ela — e a largura de LEITURA
   passar a ser definida por dentro: pelas colunas do grid no desktop e pelo
   max-width dos filhos abaixo de 1000px (onde o índice é uma caixa no topo).
   Assim o índice nasce exatamente no mesmo eixo do olho e do H1 do hero. */
.fcc-sec > .fcc-doc { max-width: var(--fcc-max); }
/* (0,2,0) para vencer o `.fcc-doc.is-layout-constrained > *` que zera o max-width. */
.fcc-sec > .fcc-doc > * { max-width: var(--fcc-doc-read); }
@media (min-width: 1000px) {
	.fcc-sec > .fcc-doc {
		grid-template-columns: var(--fcc-doc-side) minmax(0, var(--fcc-doc-read));
	}
}

/* =========================================================
   REDE DE DISTRIBUIÇÃO E FÁBRICAS — CPT unidade/fabrica
   Blocos facchini/mapa-unidades, unidade-ficha, unidades-grid.
   O tema não tem reset global de box-sizing (decisão registrada), então cada
   família nova declara o seu — sem isso o padding soma na largura e estoura a
   coluna de conteúdo do layout constrained.
   ========================================================= */
.fcc-mapa, .fcc-mapa *,
.fcc-uni, .fcc-uni *,
.fcc-ugrid, .fcc-ugrid *,
.fcc-nlista, .fcc-nlista *,
.fcc-trilha, .fcc-trilha *,
.fcc-assina, .fcc-assina * { box-sizing: border-box; }

/* ---------------------------------------------------------
   Mapa de unidades
   --------------------------------------------------------- */
.fcc-mapa {
	background: #fff;
	color: var(--fcc-ink);
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.fcc-mapa.is-fundo-escuro { background: var(--fcc-ink); color: #fff; }
.fcc-mapa__inner {
	max-width: var(--fcc-container);
	margin-inline: auto;
	padding-inline: var(--fcc-gutter);
}

.fcc-mapa__head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.fcc-mapa__kicker {
	margin: 0 0 .5rem;
	color: var(--fcc-red);
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .12em;
	font-size: .78rem;
}
.fcc-mapa__titulo {
	margin: 0;
	text-transform: uppercase;
	font-size: clamp(1.7rem, 3.4vw, 2.6rem);
	line-height: 1.05;
}
.fcc-mapa__lead {
	margin: 1rem 0 0;
	max-width: 52ch;
	color: #555;
	font-size: 1.05rem;
	line-height: 1.65;
}
.fcc-mapa.is-fundo-escuro .fcc-mapa__lead { color: #C8CCD2; }

/* ---- Filtros ---- */
.fcc-mapa__filtros {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	margin-bottom: 1.25rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--fcc-line);
}
.fcc-mapa.is-fundo-escuro .fcc-mapa__filtros { border-bottom-color: #343841; }

.fcc-mapa__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.fcc-mapa__chip {
	appearance: none;
	border: 1px solid var(--fcc-line);
	background: #fff;
	color: var(--fcc-ink);
	padding: .5rem 1rem;
	cursor: pointer;
	font: inherit;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.fcc-mapa__chip:hover { border-color: var(--fcc-ink); }
.fcc-mapa__chip.is-active {
	background: var(--fcc-red);
	border-color: var(--fcc-red);
	color: #fff;
}
.fcc-mapa.is-fundo-escuro .fcc-mapa__chip { background: transparent; border-color: #3B3F48; color: #C8CCD2; }
.fcc-mapa.is-fundo-escuro .fcc-mapa__chip.is-active { background: var(--fcc-red); border-color: var(--fcc-red); color: #fff; }

.fcc-mapa__campos { display: flex; flex-wrap: wrap; gap: .75rem; margin-left: auto; }
.fcc-mapa__campo { display: block; }
.fcc-mapa__campo :is(select, input) {
	appearance: none;
	width: 100%;
	min-width: 12rem;
	border: 1px solid var(--fcc-line);
	border-radius: 0;
	background: #fff;
	color: var(--fcc-ink);
	padding: .6rem .8rem;
	font: inherit;
	font-size: .875rem;
}
.fcc-mapa__campo select {
	/* A seta nativa desaparece com appearance:none — o chevron volta como
	   background-image para o campo não parecer um input de texto. */
	padding-right: 2.2rem;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236A7078' stroke-width='1.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .8rem center;
	background-size: 12px 8px;
}
.fcc-mapa__campo :is(select, input):focus-visible { outline: 2px solid var(--fcc-red); outline-offset: 1px; }
.fcc-mapa__campo--busca input { min-width: 15rem; }

.fcc-mapa__conta {
	margin: 0;
	color: var(--fcc-muted);
	font-size: .8rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ---- Palco do mapa ---- */
.fcc-mapa__palco {
	position: relative;
	height: var(--fcc-mapa-h, 520px);
	background: #EDF0F3;
	border: 1px solid var(--fcc-line);
	overflow: hidden;
}
.fcc-mapa.is-fundo-escuro .fcc-mapa__palco { background: #1F2229; border-color: #343841; }
.fcc-mapa__canvas { width: 100%; height: 100%; }
/* Sem chave de API ou com falha de rede o palco não fica um retângulo cinza mudo. */
.fcc-mapa.sem-chave .fcc-mapa__palco,
.fcc-mapa.mapa-falhou .fcc-mapa__palco { height: auto; min-height: 0; }
.fcc-mapa.sem-chave .fcc-mapa__canvas,
.fcc-mapa.mapa-falhou .fcc-mapa__canvas { display: none; }
.fcc-mapa__aviso {
	margin: 0;
	padding: 1.25rem clamp(1rem, 3vw, 2rem);
	color: var(--fcc-muted);
	font-size: .85rem;
	line-height: 1.6;
	text-align: center;
}
/* Com o mapa montado o aviso de "sem JS/sem chave" não deve mais aparecer. */
.fcc-mapa.has-mapa .fcc-mapa__aviso { display: none; }

/* Balão do Google: o InfoWindow herda a fonte do documento, então só o conteúdo. */
.fcc-mapa__balao { display: grid; gap: .3rem; min-width: 180px; padding: .2rem .1rem; }
.fcc-mapa__balaonome { font-size: .95rem; line-height: 1.3; color: var(--fcc-ink); }
.fcc-mapa__balaotipo {
	color: var(--fcc-red);
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .06em;
	font-size: .65rem;
}
.fcc-mapa__balaoend { color: #555; font-size: .8rem; line-height: 1.45; }
.fcc-mapa__balaotel { color: var(--fcc-ink); font-size: .8rem; text-decoration: none; }
.fcc-mapa__balaolink {
	margin-top: .35rem;
	color: var(--fcc-red);
	font-weight: 700;
	font-size: .75rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
}

/* ---- Lista abaixo do mapa ---- */
.fcc-mapa__lista { margin-top: clamp(1.75rem, 3.5vw, 3rem); }
.fcc-mapa__grupo + .fcc-mapa__grupo { margin-top: 2.25rem; }
.fcc-mapa__grupotit {
	margin: 0 0 1rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--fcc-line);
	color: var(--fcc-muted);
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .08em;
	font-size: .72rem;
}
.fcc-mapa.is-fundo-escuro .fcc-mapa__grupotit { border-bottom-color: #343841; color: #9AA0A6; }

.fcc-mapa__itens {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: 1.25rem 1.75rem;
}
.fcc-mapa__item { cursor: pointer; }
.fcc-mapa__nome { margin: 0 0 .25rem; font-size: 1rem; line-height: 1.3; }
.fcc-mapa__nome a { color: inherit; text-decoration: none; }
.fcc-mapa__nome a:hover { color: var(--fcc-red); }
.fcc-mapa__tipo {
	margin: 0 0 .45rem;
	color: var(--fcc-red);
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .07em;
	font-size: .62rem;
}
.fcc-mapa__end { margin: 0 0 .35rem; color: #555; font-size: .84rem; line-height: 1.5; }
.fcc-mapa.is-fundo-escuro .fcc-mapa__end { color: #B4B9C0; }
.fcc-mapa__contato { margin: 0; font-size: .84rem; line-height: 1.6; }
.fcc-mapa__contato a { color: var(--fcc-ink); text-decoration: none; }
.fcc-mapa.is-fundo-escuro .fcc-mapa__contato a { color: #E4E7EA; }
.fcc-mapa__contato a:hover { color: var(--fcc-red); }
.fcc-mapa__sep { color: var(--fcc-line); padding-inline: .15rem; }
.fcc-mapa__atende {
	margin: .4rem 0 0;
	color: var(--fcc-muted);
	font-size: .72rem;
	letter-spacing: .02em;
	line-height: 1.5;
}
.fcc-mapa__vazio, .fcc-nlista__vazio, .fcc-ugrid__vazio {
	margin: 2rem 0 0;
	color: var(--fcc-muted);
	font-size: .95rem;
}

@media (max-width: 780px) {
	.fcc-mapa__campos { margin-left: 0; width: 100%; }
	.fcc-mapa__campo { flex: 1 1 100%; }
	.fcc-mapa__palco { height: min(var(--fcc-mapa-h, 520px), 62vh); }
}

/* ---------------------------------------------------------
   Ficha da unidade / fábrica
   --------------------------------------------------------- */
.fcc-uni { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
/* Formato A da grade única. O `align` padrão deste bloco é `full`, então ele
   escapa da coluna da .fcc-sec que o contém e precisa da própria grade —
   sem isto os dados e o mapa da unidade/fábrica colavam nas bordas da tela. */
.fcc-uni__inner {
	display: grid;
	gap: clamp(2rem, 4vw, 3.25rem);
	max-width: var(--fcc-container);
	margin-inline: auto;
	padding-inline: var(--fcc-gutter);
}
/* Se o bloco perder o alignfull, ele passa a herdar a coluna da seção e a
   grade própria viraria um recuo duplo. */
.fcc-sec .fcc-uni:not(.alignfull) .fcc-uni__inner { max-width: none; padding-inline: 0; }

.fcc-uni__grade {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(1.75rem, 4vw, 3rem);
	align-items: start;
}
.fcc-uni--fabrica .fcc-uni__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }

.fcc-uni__selo {
	margin: 0 0 .6rem;
	color: var(--fcc-red);
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .12em;
	font-size: .72rem;
}
.fcc-uni__empresa { margin: 0 0 1.25rem; font-weight: 700; font-size: 1.15rem; line-height: 1.35; }

.fcc-uni__lista { margin: 0; display: grid; gap: 1.15rem; }
.fcc-uni__linha { margin: 0; }
.fcc-uni__linha dt {
	margin-bottom: .3rem;
	color: var(--fcc-muted);
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .07em;
	font-size: .68rem;
}
.fcc-uni__linha dd { margin: 0; font-size: .95rem; line-height: 1.6; }
.fcc-uni__linha dd a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--fcc-line); }
.fcc-uni__linha dd a:hover { color: var(--fcc-red); border-bottom-color: currentColor; }
.fcc-uni__fax { color: var(--fcc-muted); font-size: .85rem; }

.fcc-uni__acoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.fcc-uni__btn {
	display: inline-flex;
	align-items: center;
	background: var(--fcc-red);
	color: #fff;
	padding: .9rem 1.6rem;
	text-decoration: none;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	transition: background .2s ease, color .2s ease;
}
.fcc-uni__btn:hover { background: #CC0000; color: #fff; }
.fcc-uni__btn--vazado { background: transparent; border: 1px solid var(--fcc-ink); color: var(--fcc-ink); }
.fcc-uni__btn--vazado:hover { background: var(--fcc-ink); color: #fff; }

.fcc-uni__mapa { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--fcc-line); background: #EDF0F3; }
.fcc-uni__mapa iframe { display: block; width: 100%; height: 100%; border: 0; }

.fcc-uni__subtit {
	margin: 0 0 1.25rem;
	text-transform: uppercase;
	font-size: 1.05rem;
	letter-spacing: .01em;
}

/* ---- Estados atendidos ---- */
.fcc-uni__ufs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
	gap: .85rem 1.25rem;
}
.fcc-uni__ufitem {
	display: flex;
	align-items: baseline;
	gap: .55rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--fcc-line);
}
.fcc-uni__ufitem strong {
	color: var(--fcc-red);
	font-weight: 800;
	font-size: .95rem;
	letter-spacing: .02em;
}
.fcc-uni__ufitem span { color: #555; font-size: .82rem; line-height: 1.35; }

/* ---- Vídeo: fachada com miniatura (o iframe só entra no clique) ---- */
.fcc-uni__play {
	appearance: none;
	display: block;
	position: relative;
	width: 100%;
	border: 0;
	padding: 0;
	background: var(--fcc-ink);
	cursor: pointer;
	overflow: hidden;
}
.fcc-uni__play img { display: block; width: 100%; height: auto; }
.fcc-uni__playicon {
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
	width: clamp(58px, 6vw, 84px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--fcc-red);
	transition: transform .25s ease, background .25s ease;
}
.fcc-uni__playicon::after {
	content: "";
	position: absolute;
	inset: 50% auto auto 54%;
	transform: translate(-50%, -50%);
	border: .85rem solid transparent;
	border-left-color: #fff;
	border-right: 0;
}
.fcc-uni__play:hover .fcc-uni__playicon { transform: translate(-50%, -50%) scale(1.08); background: #CC0000; }
.fcc-uni__frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.fcc-uni__frame iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---- Galeria ---- */
.fcc-uni__fotos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: 1rem;
}
.fcc-uni__foto {
	appearance: none;
	display: block;
	width: 100%;
	border: 0;
	padding: 0;
	background: #EDF0F3;
	cursor: zoom-in;
	overflow: hidden;
}
.fcc-uni__foto img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform .5s ease;
}
.fcc-uni__foto:hover img { transform: scale(1.04); }

/* Lightbox de foto: reaproveita a moldura do vídeo (mesma pilha de z-index). */
.fcc-videobox--foto .fcc-videobox__frame { display: grid; place-items: center; }
.fcc-videobox--foto .fcc-videobox__frame img { max-width: 100%; max-height: 84vh; width: auto; height: auto; display: block; }

@media (max-width: 900px) {
	.fcc-uni__grade,
	.fcc-uni--fabrica .fcc-uni__grade { grid-template-columns: minmax(0, 1fr); }
	.fcc-uni__mapa { aspect-ratio: 16 / 10; }
}

/* ---------------------------------------------------------
   Grade de unidades (cartões com foto)
   --------------------------------------------------------- */
.fcc-ugrid { padding-block: clamp(2.5rem, 5vw, 4.5rem); background: #fff; }
.fcc-ugrid.is-fundo-cinza { background: #F5F7F9; }
.fcc-ugrid.is-fundo-escuro { background: var(--fcc-ink); color: #fff; }
/* Dentro de uma seção do kit o bloco não repete o respiro vertical da seção. */
.fcc-sec > .fcc-ugrid,
.fcc-sec .fcc-ugrid { padding-block: 0; background: transparent; }

.fcc-ugrid__grid {
	list-style: none;
	margin: 0 auto;
	padding-inline: var(--fcc-gutter);
	max-width: var(--fcc-container);
	display: grid;
	grid-template-columns: repeat(var(--fcc-ug-cols, 3), minmax(0, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
}
/* Só vale quando o bloco realmente herda a coluna da seção. O align padrão
   destes blocos é `full`, e com alignfull ele escapa do layout constrained:
   sem o :not() os cartões iam de ponta a ponta da tela (era o caso das
   "outras fábricas" na página de uma fábrica). */
.fcc-sec .fcc-ugrid:not(.alignfull) .fcc-ugrid__grid { padding-inline: 0; max-width: none; }

.fcc-ugrid__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--fcc-line);
	color: inherit;
	text-decoration: none;
	transition: border-color .25s ease, transform .25s ease;
}
.fcc-ugrid.is-fundo-escuro .fcc-ugrid__card { background: #22252C; border-color: #343841; }
.fcc-ugrid__card:hover { border-color: var(--fcc-red); transform: translateY(-3px); }

.fcc-ugrid__media { position: relative; overflow: hidden; background: #EDF0F3; aspect-ratio: 3 / 2; }
.fcc-ugrid.is-fundo-escuro .fcc-ugrid__media { background: #1F2229; }
.fcc-ugrid__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.fcc-ugrid__card:hover .fcc-ugrid__media img { transform: scale(1.045); }
/* Moldura de "foto pendente": mantém a proporção da linha e é o mesmo critério
   que o relatório de pendências usa para contar o que falta. */
.fcc-ugrid__ph {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #C3C9D0;
}
.fcc-ugrid__ph svg { width: 44%; max-width: 120px; height: auto; }

.fcc-ugrid__corpo { display: flex; flex-direction: column; flex: 1; padding: clamp(1.1rem, 2vw, 1.6rem); }
.fcc-ugrid__selo {
	margin: 0 0 .5rem;
	color: var(--fcc-red);
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .1em;
	font-size: .64rem;
}
.fcc-ugrid__nome { margin: 0 0 .35rem; font-size: 1.1rem; line-height: 1.25; text-transform: uppercase; }
.fcc-ugrid__local { margin: 0 0 .3rem; color: #555; font-size: .875rem; }
.fcc-ugrid.is-fundo-escuro .fcc-ugrid__local { color: #B4B9C0; }
.fcc-ugrid__fone { margin: 0; color: var(--fcc-muted); font-size: .82rem; font-variant-numeric: tabular-nums; }
.fcc-ugrid__ver {
	margin-top: auto;
	padding-top: 1rem;
	color: var(--fcc-red);
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .06em;
	font-size: .68rem;
}

@media (max-width: 900px) { .fcc-ugrid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fcc-ugrid__grid { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================
   NOTÍCIAS — listagem, leitura e assinatura
   ========================================================= */
.fcc-nlista { padding-block: clamp(2.5rem, 5vw, 4.5rem); background: #fff; }
.fcc-nlista.is-fundo-cinza { background: #F5F7F9; }
.fcc-nlista.is-fundo-escuro { background: var(--fcc-ink); color: #fff; }
.fcc-nlista__inner {
	max-width: var(--fcc-container);
	margin-inline: auto;
	padding-inline: var(--fcc-gutter);
}

/* ---- Barra de seções ---- */
.fcc-nlista__filtro {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--fcc-line);
}
.fcc-nlista__chip {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	border: 1px solid var(--fcc-line);
	padding: .5rem 1rem;
	color: var(--fcc-ink);
	text-decoration: none;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.fcc-nlista__chip:hover { border-color: var(--fcc-ink); color: var(--fcc-ink); }
.fcc-nlista__chip.is-active { background: var(--fcc-red); border-color: var(--fcc-red); color: #fff; }
.fcc-nlista__chipn { color: var(--fcc-muted); font-weight: 600; font-size: .68rem; font-variant-numeric: tabular-nums; }
.fcc-nlista__chip.is-active .fcc-nlista__chipn { color: #FFFFFFB3; }

/* ---- Grade ---- */
.fcc-nlista__grid {
	display: grid;
	grid-template-columns: repeat(var(--fcc-nl-cols, 3), minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
}
.fcc-nlista__card { min-width: 0; }
/* Destaque: ocupa a linha inteira e vira lado a lado (imagem + texto). */
.fcc-nlista__card.is-destaque { grid-column: 1 / -1; }
.fcc-nlista__card.is-destaque .fcc-nlista__link {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 2.75rem);
	align-items: center;
}
.fcc-nlista__card.is-destaque .fcc-nlista__titulo { font-size: clamp(1.4rem, 2.6vw, 2rem); }

.fcc-nlista__link { display: block; color: inherit; text-decoration: none; }
.fcc-nlista__media { position: relative; overflow: hidden; background: #EDF0F3; aspect-ratio: 16 / 10; }
.fcc-nlista.is-fundo-escuro .fcc-nlista__media { background: #1F2229; }
.fcc-nlista__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.fcc-nlista__link:hover .fcc-nlista__media img { transform: scale(1.045); }
.fcc-nlista__ph { position: absolute; inset: 0; display: grid; place-items: center; color: #C3C9D0; }
.fcc-nlista__ph svg { width: 34%; max-width: 90px; height: auto; }

.fcc-nlista__corpo { padding-top: 1rem; }
.fcc-nlista__card.is-destaque .fcc-nlista__corpo { padding-top: 0; }
.fcc-nlista__meta {
	margin: 0 0 .55rem;
	color: var(--fcc-muted);
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .07em;
	font-size: .66rem;
}
.fcc-nlista__cat { color: var(--fcc-red); }
.fcc-nlista__sep { padding-inline: .35rem; color: var(--fcc-line); }
.fcc-nlista__titulo {
	margin: 0 0 .6rem;
	font-size: 1.1rem;
	line-height: 1.3;
	text-wrap: balance;
}
.fcc-nlista__link:hover .fcc-nlista__titulo { color: var(--fcc-red); }
.fcc-nlista__resumo { margin: 0; color: #555; font-size: .9rem; line-height: 1.6; }
.fcc-nlista.is-fundo-escuro .fcc-nlista__resumo { color: #B4B9C0; }
.fcc-nlista__ler {
	display: inline-block;
	margin-top: .85rem;
	color: var(--fcc-red);
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .06em;
	font-size: .68rem;
}

/* ---- Paginação ---- */
.fcc-nlista__pag {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .4rem;
	margin-top: clamp(2.25rem, 4vw, 3.5rem);
}
.fcc-nlista__pag :is(a, span) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.6rem;
	padding: .6rem .85rem;
	border: 1px solid var(--fcc-line);
	color: var(--fcc-ink);
	text-decoration: none;
	font-size: .82rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.fcc-nlista__pag a:hover { border-color: var(--fcc-ink); }
.fcc-nlista__pag .current { background: var(--fcc-red); border-color: var(--fcc-red); color: #fff; }
.fcc-nlista__pag .dots { border-color: transparent; }

@media (max-width: 900px) {
	.fcc-nlista__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fcc-nlista__card.is-destaque .fcc-nlista__link { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) { .fcc-nlista__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------
   Corpo do artigo (.fcc-artigo)
   O acervo migrado vem do editor antigo: <span style>, <font>, tabelas usadas
   como layout e imagens com width/height fixos no atributo. As regras abaixo
   domam esse HTML sem precisar reescrever 121 notícias à mão.
   --------------------------------------------------------- */
.fcc-artigo, .fcc-artigo * { box-sizing: border-box; }
.fcc-artigo {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	/* Linha de leitura curta sem max-width: o layout constrained do WP centraliza
	   quem tem max-width próprio, e zerar a margem jogaria o texto na borda da
	   seção. Sobrar espaço à direita é o jeito registrado no kit. */
	padding-right: min(28%, 20rem);
	font-size: 1.02rem;
	line-height: 1.75;
	color: #33373D;
}
.fcc-artigo > :first-child { margin-top: 0; }
.fcc-artigo > :last-child { margin-bottom: 0; }
.fcc-artigo p { margin: 0 0 1.15em; }
.fcc-artigo :is(h1, h2, h3, h4) {
	margin: 2em 0 .7em;
	color: var(--fcc-ink);
	line-height: 1.25;
	text-transform: uppercase;
	text-wrap: balance;
}
.fcc-artigo h1, .fcc-artigo h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
.fcc-artigo h3, .fcc-artigo h4 { font-size: 1.1rem; }
.fcc-artigo :is(ul, ol) { margin: 0 0 1.15em; padding-left: 1.4em; }
.fcc-artigo li { margin-bottom: .4em; }
.fcc-artigo a { color: var(--fcc-red); text-decoration: underline; text-underline-offset: 2px; }
.fcc-artigo strong, .fcc-artigo b { color: var(--fcc-ink); font-weight: 700; }
.fcc-artigo blockquote {
	margin: 1.75em 0;
	padding-left: 1.25rem;
	border-left: 3px solid var(--fcc-red);
	color: #4A4F56;
	font-style: normal;
}
.fcc-artigo :is(img, figure) { max-width: 100%; }
/* O HTML antigo trazia width/height fixos no atributo: sem height:auto a imagem
   distorce quando a coluna é mais estreita que o valor original. */
.fcc-artigo img { display: block; height: auto; margin: 1.75em 0; }
.fcc-artigo figure { margin: 1.75em 0; }
.fcc-artigo figcaption { margin-top: .5rem; color: var(--fcc-muted); font-size: .8rem; line-height: 1.5; }
/* Tabela usada como layout no editor antigo: sem largura fixa, sem borda herdada
   e rolando dentro de si mesma quando é larga de verdade. */
.fcc-artigo table {
	width: 100% !important;
	max-width: 100%;
	height: auto !important;
	border-collapse: collapse;
	margin: 1.75em 0;
	font-size: .92em;
}
.fcc-artigo :is(td, th) {
	width: auto !important;
	height: auto !important;
	padding: .35rem .5rem;
	vertical-align: top;
	text-align: left;
}
.fcc-artigo :is(td, th) img { margin: .5em 0; }
/* Cor e fonte gravadas em atributo/inline no conteúdo antigo: neutralizar para o
   texto herdar a tipografia do tema (e não ficar Arial 10px preto puro). */
.fcc-artigo font { font-family: inherit !important; font-size: inherit !important; }
.fcc-artigo :is(span, font, p, div)[style*="font-family"] { font-family: inherit !important; }
.fcc-artigo :is(span, font, p, div)[style*="font-size"] { font-size: inherit !important; }

@media (max-width: 900px) { .fcc-artigo { padding-right: 0; } }

/* ---------------------------------------------------------
   Assinatura da notícia
   --------------------------------------------------------- */
.fcc-assina {
	margin-top: clamp(2rem, 4vw, 3rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--fcc-line);
}
.fcc-assina__data { margin: 0 0 .5rem; color: var(--fcc-ink); font-size: .9rem; }
.fcc-assina__fonte { margin: 0; color: var(--fcc-muted); font-size: .82rem; line-height: 1.6; }
.fcc-assina__rot {
	display: inline-block;
	margin-right: .45rem;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .08em;
	font-size: .66rem;
}
.fcc-assina__fonte a { color: var(--fcc-red); }
.fcc-assina__voltar { margin: 1.5rem 0 0; }
.fcc-assina__voltar a {
	color: var(--fcc-ink);
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .06em;
	font-size: .72rem;
}
.fcc-assina__voltar a:hover { color: var(--fcc-red); }

/* ---------------------------------------------------------
   Trilha de navegação
   --------------------------------------------------------- */
.fcc-trilha { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }

/* Uma seção que carrega SÓ a trilha não é uma seção: é uma barra. Com o
   padding-block da .fcc-sec (até 5,5rem em cima e embaixo) mais o respiro da
   própria trilha, sobrava ~300px de branco entre o hero e o primeiro conteúdo,
   com uma linha de texto de 18px perdida no meio. O :only-child é o que separa
   este caso do outro uso da trilha (primeiro item de uma seção com conteúdo,
   onde o respiro grande está certo). */
.fcc-sec:has(> .fcc-trilha:only-child) { padding-block: clamp(1rem, 2vw, 1.5rem); }
.fcc-sec:has(> .fcc-trilha:only-child) > .fcc-trilha { margin-bottom: 0; }
/* E o bloco seguinte não precisa repetir o respiro que a barra já deu. */
.fcc-sec:has(> .fcc-trilha:only-child) + .fcc-nlista,
.fcc-sec:has(> .fcc-trilha:only-child) + .fcc-mapa,
.fcc-sec:has(> .fcc-trilha:only-child) + .fcc-ugrid,
.fcc-sec:has(> .fcc-trilha:only-child) + .fcc-fam {
	padding-block-start: clamp(1.25rem, 2.5vw, 2rem);
}
.fcc-trilha__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .2rem .55rem;
	font-size: .74rem;
	letter-spacing: .03em;
}
.fcc-trilha__item { display: inline-flex; align-items: center; gap: .55rem; color: var(--fcc-muted); }
.fcc-trilha__item + .fcc-trilha__item::before {
	content: "›";
	color: var(--fcc-line);
	font-size: .9rem;
	line-height: 1;
}
.fcc-trilha__item a { color: var(--fcc-muted); text-decoration: none; }
.fcc-trilha__item a:hover { color: var(--fcc-red); }
.fcc-trilha__item [aria-current] { color: var(--fcc-ink); font-weight: 600; }
.fcc-trilha.is-fundo-escuro .fcc-trilha__item,
.fcc-trilha.is-fundo-escuro .fcc-trilha__item a { color: #9AA0A6; }
.fcc-trilha.is-fundo-escuro .fcc-trilha__item [aria-current] { color: #fff; }

/* ---------------------------------------------------------
   Hero interno — variantes de notícia e fábrica
   --------------------------------------------------------- */
.fcc-hero-interno__meta {
	gap: .35rem 1rem !important;
	align-items: center;
	margin-bottom: .75rem;
}
.fcc-hero-interno__meta > * { margin: 0 !important; }
.fcc-hero-interno__data {
	color: #FFFFFF99 !important;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-weight: 700;
}
/* post-terms sai como <div> com links. O chapéu das outras internas é vermelho
   sobre fundo sólido; aqui o fundo é a FOTO da notícia (caminhão verde, céu,
   fábrica), e vermelho sobre foto qualquer não passa de 3:1. Branco garante o
   contraste em qualquer imagem e o vermelho volta como filete acima do bloco. */
.fcc-hero-interno__eyebrow a { color: #fff !important; text-decoration: none; }
.fcc-hero-interno__eyebrow a:hover { text-decoration: underline; }
.fcc-hero-interno--noticia .fcc-hero-interno__meta { position: relative; padding-top: 1.1rem; }
.fcc-hero-interno--noticia .fcc-hero-interno__meta::before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 56px;
	height: 3px;
	background: var(--fcc-red);
}
/* Sombra sob o texto: o dimRatio do cover é uniforme, mas uma foto clara na base
   (céu, telhado, chapa de alumínio) ainda apaga o título. Um degradê só na parte
   de baixo resolve sem escurecer a imagem toda.

   Vale para TODO hero interno, não só notícia e fábrica: a página de Qualidade
   ganhou uma vista aérea com telhados claros e o lead em cinza ficou ilegível
   sobre eles. Em hero sem foto (dimRatio 100 sobre ink) o degradê é escuro sobre
   escuro — invisível, sem efeito colateral. */
.fcc-hero-interno .wp-block-cover__inner-container { position: relative; z-index: 1; }
.fcc-hero-interno::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 62%;
	background: linear-gradient(to top, rgba(11,13,16,.82), rgba(11,13,16,0));
	pointer-events: none;
}
/* A fábrica é a página de vitrine do parque industrial: título maior e o lead
   com mais respiro que o hero padrão das internas. */
.fcc-hero-interno--fabrica .fcc-hero-interno__lead { margin-top: 1.25rem; }

/* Chave do Google recusada (referenciador/API/faturamento): esconder o painel de
   erro que o próprio Google desenha e mostrar a mensagem do tema no lugar. */
.fcc-mapa__aviso--falha { display: none; }
.fcc-mapa.chave-recusada .fcc-mapa__canvas { display: none; }
.fcc-mapa.chave-recusada .fcc-mapa__palco { height: auto; }
.fcc-mapa.chave-recusada .fcc-mapa__aviso--falha { display: block; }
.fcc-mapa__diag {
	display: block;
	max-width: 62ch;
	margin: .75rem auto 0;
	padding-top: .75rem;
	border-top: 1px dashed var(--fcc-line);
	color: var(--fcc-red);
	font-size: .78rem;
	line-height: 1.6;
	text-align: left;
}
.fcc-mapa__diag code { font-size: .95em; }

/* Títulos de seção DENTRO de um formulário longo (elemento Custom HTML do Fluent
   Forms). São 52 campos no currículo: sem esses marcos o formulário vira uma
   parede. Vêm do plugin como <h3>/<p> soltos, então o estilo mora aqui. */
.fcc-form .fcc-form__secao {
	margin: 2.5rem 0 .3rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--fcc-line);
	text-transform: uppercase;
	font-size: .82rem;
	font-weight: 800;
	letter-spacing: .08em;
	color: var(--fcc-ink);
}
/* O primeiro não precisa de linha nem de respiro: já vem depois do lead da seção. */
.fcc-form .frm-fluent-form > .ff-el-group:first-child .fcc-form__secao,
.fcc-form .frm-fluent-form .ff-el-group:first-of-type .fcc-form__secao {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}
.fcc-form .fcc-form__secaosub {
	margin: 0 0 .25rem;
	max-width: 62ch;
	color: var(--fcc-muted);
	font-size: .82rem;
	line-height: 1.6;
}
/* Grupo de rádio em linha (PcD): o plugin empilha por padrão. */
.fcc-form .frm-fluent-form .ff-el-form-check-inline { margin-right: 1.5rem; }
.fcc-form .frm-fluent-form .ff-el-form-check label { font-size: .92rem; }
/* Botão de anexo: mesma linguagem dos outros controles do tema. */
.fcc-form .frm-fluent-form .ff_upload_btn {
	border: 1px solid var(--fcc-ink);
	border-radius: 0;
	background: transparent;
	color: var(--fcc-ink);
	padding: .7rem 1.3rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	transition: background .2s ease, color .2s ease;
}
.fcc-form .frm-fluent-form .ff_upload_btn:hover { background: var(--fcc-ink); color: #fff; }

/* Galeria do core dentro do kit: a moldura do bloco já resolve o grid; aqui só o
   respiro em relação ao lead e o recorte quadrado das miniaturas. */
.fcc-sec .fcc-galeria { margin-top: clamp(1.75rem, 3vw, 2.75rem); }
.fcc-sec .fcc-galeria figure.wp-block-image { margin: 0; }
.fcc-sec .fcc-galeria img { aspect-ratio: 4 / 3; object-fit: cover; }

/* =========================================================
   SUBMENU DO CABEÇALHO (bloco Navigation)
   Empresa e Novidades passaram a ter filhos. O CSS do core entrega um dropdown
   funcional mas branco e quadrado; aqui ele recebe o mesmo vidro escuro do
   header e do mega-menu, para não parecer um componente de outro site.
   ========================================================= */
.fcc-header-bar .wp-block-navigation .wp-block-navigation__submenu-container {
	min-width: 15rem;
	border: 0;
	border-top: 2px solid var(--fcc-red);
	background: #14161AF2;
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	padding: .4rem 0;
	box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.fcc-header-bar .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	padding: .65rem 1.2rem;
	color: #E4E7EA;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}
.fcc-header-bar .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.fcc-header-bar .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	color: #fff;
	background: #FF000024;
}
/* Seta do item com filhos: o core usa um <svg> que herda currentColor. */
.fcc-header-bar .wp-block-navigation .wp-block-navigation-submenu__toggle svg,
.fcc-header-bar .wp-block-navigation .wp-block-navigation__submenu-icon svg {
	width: 10px;
	height: 10px;
	margin-left: .3rem;
}
/* O pai continua clicável e ganha o vermelho do hover como os demais itens. */
.fcc-header-bar .wp-block-navigation .has-child > .wp-block-navigation-item__content:hover { color: var(--fcc-red); }

/* No overlay mobile o dropdown vira lista indentada: sem vidro, sem sombra. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0 0 .5rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: .45rem 0 .45rem 1.25rem;
	color: #C8CCD2;
	font-size: .95rem;
	text-transform: none;
	letter-spacing: 0;
	white-space: normal;
}

/* =========================================================
   CARTÕES DE FAMÍLIA (página /produtos/)
   A imagem da família é PNG com fundo transparente (ver familia-meta.php), então
   o cartão usa fundo claro e `object-fit: contain` — recortar um implemento
   recortado cortaria a carroceria pela metade.
   ========================================================= */
.fcc-fam, .fcc-fam * { box-sizing: border-box; }
.fcc-fam { padding-block: clamp(2.5rem, 5vw, 4.5rem); background: #fff; }
.fcc-fam.is-fundo-cinza { background: #F5F7F9; }
.fcc-fam.is-fundo-escuro { background: var(--fcc-ink); color: #fff; }
.fcc-sec .fcc-fam { padding-block: 0; background: transparent; }

.fcc-fam__grid {
	list-style: none;
	margin: 0 auto;
	padding-inline: var(--fcc-gutter);
	max-width: var(--fcc-container);
	display: grid;
	grid-template-columns: repeat(var(--fcc-fam-cols, 3), minmax(0, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
}
.fcc-sec .fcc-fam:not(.alignfull) .fcc-fam__grid { padding-inline: 0; max-width: none; }

.fcc-fam__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--fcc-line);
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: border-color .25s ease, transform .25s ease;
}
.fcc-fam.is-fundo-escuro .fcc-fam__card { background: #22252C; border-color: #343841; }
.fcc-fam__card:hover { border-color: var(--fcc-red); transform: translateY(-3px); }

.fcc-fam__media {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	padding: clamp(.75rem, 2vw, 1.5rem);
	background: #F5F7F9;
	overflow: hidden;
}
.fcc-fam.is-fundo-cinza .fcc-fam__media { background: #EDF0F3; }
.fcc-fam.is-fundo-escuro .fcc-fam__media { background: #1F2229; }
.fcc-fam__media img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: transform .45s ease;
}
.fcc-fam__card:hover .fcc-fam__media img { transform: scale(1.05); }
.fcc-fam__ph { display: grid; place-items: center; color: #C3C9D0; width: 60%; }
.fcc-fam__ph svg { width: 100%; height: auto; }

.fcc-fam__corpo {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: clamp(1rem, 2vw, 1.5rem);
	border-top: 1px solid var(--fcc-line);
}
.fcc-fam.is-fundo-escuro .fcc-fam__corpo { border-top-color: #343841; }
.fcc-fam__nome { margin: 0 0 .3rem; font-size: 1.15rem; line-height: 1.2; text-transform: uppercase; }
.fcc-fam__conta {
	margin: 0;
	color: var(--fcc-muted);
	font-size: .78rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
}
.fcc-fam__ver {
	margin-top: auto;
	padding-top: 1rem;
	color: var(--fcc-red);
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .06em;
	font-size: .68rem;
}

@media (max-width: 900px) { .fcc-fam__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fcc-fam__grid { grid-template-columns: minmax(0, 1fr); } }

/* Cartões de lançamento (/novidades/): a foto é de estúdio em fundo branco, então
   entra inteira (contain) sobre cinza claro — recortar cortaria a carroceria. */
.fcc-nov__grade { align-items: stretch; }
.fcc-nov__card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.fcc-nov__card > * { margin: 0; }
.fcc-nov__foto { background: #F5F7F9; }
.fcc-sec--cinza .fcc-nov__foto { background: #EDF0F3; }
.fcc-nov__foto img {
	display: block;
	width: 100%;
	aspect-ratio: 1080 / 500;
	object-fit: contain;
	cursor: zoom-in;
}
.fcc-nov__card .fcc-card__t {
	margin: clamp(1.1rem, 2vw, 1.5rem) clamp(1.1rem, 2vw, 1.5rem) .7rem;
	font-size: 1.05rem;
	line-height: 1.25;
}
.fcc-nov__card .fcc-check {
	margin: 0 clamp(1.1rem, 2vw, 1.5rem) clamp(1.1rem, 2vw, 1.5rem);
	font-size: .88rem;
}
.fcc-nov__card .fcc-check li { margin-bottom: .45rem; }
@media (max-width: 700px) { .fcc-sec .fcc-nov__grade { grid-template-columns: minmax(0, 1fr); } }

/* Contador ao lado do título da sanfona (ex.: "9 estabelecimentos"). */
.fcc-det__n {
	margin-left: .6rem;
	color: var(--fcc-muted);
	font-weight: 400;
	letter-spacing: .02em;
	text-transform: none;
	font-size: .78rem;
	font-variant-numeric: tabular-nums;
}
/* Lista de PDFs dentro da sanfona: o item já tem o check vermelho do kit. */
.fcc-det .fcc-check { margin-top: .5rem; }
.fcc-det .fcc-check li { font-size: .92rem; }
.fcc-det .fcc-check a { color: var(--fcc-ink); text-decoration: none; border-bottom: 1px solid var(--fcc-line); }
.fcc-det .fcc-check a:hover { color: var(--fcc-red); border-bottom-color: currentColor; }

/* =========================================================================
   SELETOR DE MODELO NA BARRA DO PRODUTO (out/2026)
   Botão com foto à esquerda dos atalhos; o painel lista os modelos da família.
   Sem seletor (família de um modelo só, ou editor), .fcc-pbarra__links some do
   layout (display: contents) e a barra fica exatamente como antes.
   ========================================================================= */
.fcc-pbarra__links { display: contents; }
.fcc-pbarra.has-modelos .fcc-pbarra__inner { flex-wrap: nowrap; }
.fcc-pbarra.has-modelos .fcc-pbarra__links {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	justify-content: safe center;
	overflow-x: auto;
	scrollbar-width: none;
}
.fcc-pbarra.has-modelos .fcc-pbarra__links::-webkit-scrollbar { display: none; }
/* Tamanho fixo (pedido do cliente): os atalhos têm o MESMO tamanho em toda página de
   produto, com ou sem seletor, e não encolhem; o que não cabe rola na horizontal. */
.fcc-pbarra__item { flex: 0 0 auto; white-space: nowrap; padding-inline: 1.15rem; }

.fcc-pbarra__modelo {
	appearance: none;
	/* Largura fixa: nome curto ou longo, o botão ocupa sempre o mesmo espaço e os
	   atalhos ao lado não mudam de lugar de um produto para outro. */
	flex: 0 0 15rem;
	width: 15rem;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	margin: 0;
	padding: .4rem .9rem .4rem .4rem;
	border: 0;
	border-right: 1px solid rgba(255,255,255,.08);
	background: rgba(255,255,255,.04);
	color: #fff;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background .2s ease;
}
.fcc-pbarra__modelo:hover,
.fcc-pbarra__modelo[aria-expanded="true"] { background: rgba(255,255,255,.09); }
.fcc-pbarra__modelo:focus-visible { outline: 2px solid var(--fcc-red); outline-offset: -2px; }
.fcc-pbarra__modelo-foto {
	flex: 0 0 auto;
	width: 64px;
	height: 42px;
	display: grid;
	place-items: center;
}
.fcc-pbarra__modelo-foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fcc-pbarra__modelo-txt { display: flex; flex-direction: column; flex: 1 1 auto; line-height: 1.15; min-width: 0; }
.fcc-pbarra__modelo-txt small {
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #7C838C;
}
.fcc-pbarra__modelo-txt strong {
	font-size: .8rem;
	font-weight: 700;
	text-transform: uppercase;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.fcc-pbarra__modelo-seta { width: 18px; height: 18px; flex: 0 0 auto; color: var(--fcc-red); transition: transform .2s ease; }
.fcc-pbarra__modelo[aria-expanded="true"] .fcc-pbarra__modelo-seta { transform: rotate(180deg); }

/* Painel: absoluto na barra (que é sticky, então é o bloco de contenção), alinhado à
   grade do site. O invólucro não recebe clique; só a caixa. */
.fcc-pbarra__modelos {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 2;
	max-width: var(--fcc-container);
	margin-inline: auto;
	padding-inline: var(--fcc-gutter);
	box-sizing: border-box;
	pointer-events: none;
}
.fcc-pbarra__modelos-caixa {
	pointer-events: auto;
	width: min(760px, 100%);
	max-height: calc(100vh - var(--fcc-pbarra-top, 72px) - 7rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	box-sizing: border-box;
	padding: 1rem 1.1rem 1.2rem;
	background: var(--fcc-dark-2);
	border: 1px solid rgba(255,255,255,.1);
	border-top: 2px solid var(--fcc-red);
	box-shadow: 0 24px 48px rgba(0,0,0,.45);
}
.fcc-pbarra__modelos-t {
	margin: 0 0 .85rem;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #7C838C;
}
.fcc-pbarra__modelos-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: .5rem;
}
.fcc-pbarra__modelos-item {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	height: 100%;
	box-sizing: border-box;
	padding: .55rem;
	border: 1px solid rgba(255,255,255,.08);
	color: #C9CDD3;
	text-decoration: none;
	transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.fcc-pbarra__modelos-item:hover,
.fcc-pbarra__modelos-item:focus-visible { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.04); color: #fff; outline: none; }
.fcc-pbarra__modelos-item.is-atual { border-color: var(--fcc-red); color: #fff; }
.fcc-pbarra__modelos-foto {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	background: rgba(255,255,255,.03);
}
.fcc-pbarra__modelos-foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fcc-pbarra__modelos-nome { font-size: .76rem; font-weight: 600; line-height: 1.25; text-transform: uppercase; }

@media (max-width: 900px) {
	.fcc-pbarra.has-modelos .fcc-pbarra__inner { overflow: visible; padding-inline: 0; }
	.fcc-pbarra.has-modelos .fcc-pbarra__links { justify-content: flex-start; }
	.fcc-pbarra__item { padding-inline: 1rem; }
	.fcc-pbarra__modelo { flex-basis: 11.5rem; width: 11.5rem; padding-right: .7rem; }
	.fcc-pbarra__modelo-foto { width: 48px; height: 32px; }
	.fcc-pbarra__modelo-txt strong { font-size: .72rem; }
	.fcc-pbarra__modelos { padding-inline: 0; }
	.fcc-pbarra__modelos-caixa { width: 100%; }
	.fcc-pbarra__modelos-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================================
   COMPARADOR DE IMPLEMENTOS (out/2026)
   Botão em produto-botoes, barra flutuante, seletor (<dialog>) e a tela
   /comparar/ (bloco comparador). JS: assets/js/comparar.js.
   ========================================================================= */

/* ---- Botão "Selecionar para comparar" ---- */
.fcc-botoes__btn[hidden] { display: none; }
.fcc-botoes__btn--comparar { font: inherit; cursor: pointer; }
.fcc-botoes__btn--comparar .fcc-botoes__check { opacity: 0; transition: opacity .2s ease; }
.fcc-botoes__btn--comparar[aria-pressed="true"] { border-color: var(--fcc-red); box-shadow: inset 0 0 0 1px var(--fcc-red); }
.fcc-botoes__btn--comparar[aria-pressed="true"] .fcc-botoes__btnicon { color: var(--fcc-red); }
.fcc-botoes__btn--comparar[aria-pressed="true"] .fcc-botoes__check { opacity: 1; }
.fcc-botoes__btn--comparar[aria-pressed="true"] small { color: var(--fcc-red); }
.fcc-botoes__btn--comparar:focus-visible { outline: 2px solid var(--fcc-red); outline-offset: 2px; }

/* ---- Barra flutuante ---- */
.fcc-cmpbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 900;
	background: var(--fcc-dark-2);
	color: #fff;
	border-top: 2px solid var(--fcc-red);
	box-shadow: 0 -12px 32px rgba(0,0,0,.35);
	transform: translateY(110%);
	visibility: hidden;
	transition: transform .3s cubic-bezier(.33, 1, .68, 1), visibility 0s linear .3s;
}
.fcc-cmpbar.is-visivel {
	transform: none;
	visibility: visible;
	transition: transform .3s cubic-bezier(.33, 1, .68, 1);
}
.fcc-cmpbar__inner {
	max-width: var(--fcc-container);
	margin-inline: auto;
	padding: .7rem var(--fcc-gutter) calc(.7rem + env(safe-area-inset-bottom, 0px));
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 1.25rem;
}
.fcc-cmpbar__titulo { margin: 0; display: flex; flex-direction: column; line-height: 1.2; flex: 0 0 auto; }
.fcc-cmpbar__titulo strong { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.fcc-cmpbar__conta { font-size: .72rem; color: #7C838C; font-variant-numeric: tabular-nums; }
.fcc-cmpbar__vagas {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1 1 auto;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .6rem;
}
.fcc-cmpbar__vaga {
	position: relative;
	height: 58px;
	border: 1px dashed rgba(255,255,255,.22);
	box-sizing: border-box;
}
.fcc-cmpbar__vaga.is-cheia { border-style: solid; border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.05); }
.fcc-cmpbar__item {
	display: flex;
	align-items: center;
	gap: .6rem;
	height: 100%;
	padding: .3rem 2.2rem .3rem .3rem;
	box-sizing: border-box;
	color: #fff;
	text-decoration: none;
}
.fcc-cmpbar__foto { flex: 0 0 auto; width: 70px; height: 46px; display: grid; place-items: center; }
.fcc-cmpbar__foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fcc-cmpbar__nome {
	font-size: .74rem;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.fcc-cmpbar__remover,
.fcc-cmpbar__add,
.fcc-cmpbar__limpar { appearance: none; font: inherit; cursor: pointer; }
.fcc-cmpbar__remover {
	position: absolute;
	top: 50%;
	right: .4rem;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255,255,255,.08);
	color: #C9CDD3;
}
.fcc-cmpbar__remover:hover { background: var(--fcc-red); color: #fff; }
.fcc-cmpbar__remover svg { width: 14px; height: 14px; }
.fcc-cmpbar__add {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	border: 0;
	background: transparent;
	color: #C9CDD3;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.fcc-cmpbar__add:hover { color: #fff; background: rgba(255,255,255,.04); }
.fcc-cmpbar__add svg { width: 18px; height: 18px; color: var(--fcc-red); }
.fcc-cmpbar__acoes { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: .3rem; }
.fcc-cmpbar__ver {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .85rem 1.5rem;
	background: var(--fcc-red);
	color: #fff;
	text-decoration: none;
	font-size: .82rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	transition: background .2s ease, opacity .2s ease;
}
.fcc-cmpbar__ver:hover { background: #d90000; }
.fcc-cmpbar__ver[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.fcc-cmpbar__ver:focus-visible,
.fcc-cmpbar__add:focus-visible,
.fcc-cmpbar__remover:focus-visible,
.fcc-cmpbar__limpar:focus-visible,
.fcc-cmpbar__item:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fcc-cmpbar__limpar {
	border: 0;
	background: none;
	padding: .1rem;
	color: #7C838C;
	font-size: .7rem;
	text-decoration: underline;
}
.fcc-cmpbar__limpar:hover { color: #fff; }
.fcc-cmpbar__recado {
	position: absolute;
	left: 50%;
	bottom: calc(100% + .75rem);
	transform: translate(-50%, .5rem);
	margin: 0;
	padding: .6rem 1rem;
	max-width: calc(100vw - 2rem);
	box-sizing: border-box;
	background: #fff;
	color: var(--fcc-ink);
	font-size: .8rem;
	font-weight: 600;
	box-shadow: 0 8px 24px rgba(0,0,0,.25);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}
.fcc-cmpbar.is-recado .fcc-cmpbar__recado { opacity: 1; transform: translate(-50%, 0); }

/* Com a barra na tela: respiro no fim da página e os controles do desenho técnico
   (âncora sticky no rodapé) sobem para não ficar atrás dela. */
html.fcc-cmpbar-on body { padding-bottom: var(--fcc-cmpbar-h, 80px); }
html.fcc-cmpbar-on .fcc-visor__ancora { bottom: calc(var(--fcc-cmpbar-h, 80px) + 1rem); }

@media (max-width: 782px) {
	/* Duas linhas só: título + ações em cima, vagas embaixo. */
	.fcc-cmpbar__inner { flex-wrap: wrap; gap: .5rem .75rem; padding-top: .55rem; }
	.fcc-cmpbar__titulo { flex: 1 1 auto; min-width: 0; }
	.fcc-cmpbar__titulo strong { font-size: .72rem; }
	.fcc-cmpbar__vagas { flex: 1 1 100%; order: 3; gap: .4rem; }
	.fcc-cmpbar__vaga { height: 52px; }
	.fcc-cmpbar__item { padding-right: .3rem; justify-content: center; }
	.fcc-cmpbar__foto { width: 100%; height: 40px; }
	.fcc-cmpbar__nome { display: none; }
	.fcc-cmpbar__remover { top: -8px; right: -8px; transform: none; width: 24px; height: 24px; background: #3A3F49; }
	.fcc-cmpbar__add span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.fcc-cmpbar__acoes { flex: 0 0 auto; flex-direction: row-reverse; align-items: center; gap: .75rem; }
	.fcc-cmpbar__ver { padding: .55rem .9rem; font-size: .7rem; }
	/* Sem espaço para título + dois botões numa linha: cada vaga já tem o próprio ×. */
	.fcc-cmpbar__limpar { display: none; }
	.fcc-cmpbar__vaga { height: 46px; }
	.fcc-cmpbar__foto { height: 34px; }
}

/* ---- Seletor de implementos (<dialog>) ---- */
.fcc-cmpsel {
	width: min(880px, calc(100vw - 2rem));
	max-height: min(86vh, 900px);
	padding: 0;
	border: 0;
	background: #fff;
	color: var(--fcc-ink);
	box-shadow: 0 30px 80px rgba(0,0,0,.4);
}
.fcc-cmpsel[open] { display: flex; flex-direction: column; }
.fcc-cmpsel::backdrop { background: rgba(10,12,16,.72); }
.fcc-cmpsel__topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem .8rem; }
.fcc-cmpsel__titulo { margin: 0; font-size: 1.05rem; font-weight: 800; text-transform: uppercase; }
.fcc-cmpsel__fechar {
	appearance: none;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid var(--fcc-line);
	border-radius: 50%;
	background: #fff;
	color: var(--fcc-ink);
	cursor: pointer;
}
.fcc-cmpsel__fechar:hover { border-color: var(--fcc-ink); }
.fcc-cmpsel__fechar svg { width: 18px; height: 18px; }
.fcc-cmpsel__busca {
	margin: 0 1.25rem;
	padding: .75rem .9rem;
	border: 1px solid var(--fcc-line);
	font: inherit;
	font-size: 1rem; /* 16px: abaixo disso o iOS dá zoom ao focar */
	color: var(--fcc-ink);
}
.fcc-cmpsel__busca:focus { outline: 2px solid var(--fcc-red); outline-offset: -1px; border-color: transparent; }
/* flex + min-height: 0: sem isto a lista não encolhe dentro da janela (max-height) e é
   cortada embaixo em vez de ganhar a própria rolagem. */
.fcc-cmpsel__lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1rem 1.25rem 1.5rem; }
.fcc-cmpsel__topo, .fcc-cmpsel__busca { flex: 0 0 auto; }
.fcc-cmpsel__grupo + .fcc-cmpsel__grupo { margin-top: 1.4rem; }
.fcc-cmpsel__familia { margin: 0 0 .75rem; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fcc-red); }
.fcc-cmpsel__itens {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	/* Folga vertical maior que a horizontal: a tag "Na comparação" fica metade acima
	   da borda do card e não pode encostar na linha de cima. */
	gap: .75rem .5rem;
}
.fcc-cmpsel__itens li { display: flex; }
.fcc-cmpsel__itens li[hidden],
.fcc-cmpsel__grupo[hidden] { display: none; }
.fcc-cmpsel__item {
	appearance: none;
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	padding: .6rem .5rem .7rem;
	border: 1px solid var(--fcc-line);
	border-radius: 6px;
	background: #fff;
	color: var(--fcc-ink);
	font: inherit;
	text-align: center;
	cursor: pointer;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.fcc-cmpsel__item:hover:not(:disabled) { border-color: var(--fcc-ink); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.fcc-cmpsel__item:focus-visible { outline: 2px solid var(--fcc-red); outline-offset: 1px; }
.fcc-cmpsel__item:disabled { cursor: not-allowed; opacity: .45; }
.fcc-cmpsel__item.is-escolhido { opacity: 1; border-color: var(--fcc-red); }
.fcc-cmpsel__foto { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 10; }
.fcc-cmpsel__foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fcc-cmpsel__nome { font-size: .62rem; font-weight: 700; line-height: 1.3; letter-spacing: .02em; text-transform: uppercase; text-align: center; }
/* Tag sobre a linha da borda, no alto à esquerda (como a legenda de um fieldset): o
   fundo branco "corta" a borda atrás do texto. */
.fcc-cmpsel__tag {
	position: absolute;
	top: 0;
	left: .75rem;
	transform: translateY(-50%);
	padding: 0 .35rem;
	background: #fff;
	font-size: .58rem;
	font-weight: 800;
	letter-spacing: .08em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--fcc-red);
}
.fcc-cmpsel__aviso,
.fcc-cmpsel__nada { margin: 1.5rem 0; text-align: center; color: var(--fcc-muted); font-size: .9rem; }

/* ---- Tela de comparação (bloco comparador) ---- */
.fcc-cmp { background: #F3F4F6; color: var(--fcc-ink); }
.fcc-cmp__inner { max-width: var(--fcc-container); margin-inline: auto; padding-inline: var(--fcc-gutter); box-sizing: border-box; }
.fcc-cmp__topo { background: var(--fcc-dark); color: #fff; padding: clamp(8.5rem, 14vw, 10.5rem) 0 clamp(2rem, 4vw, 3rem); }
.fcc-cmp__titulo { margin: 0; font-size: clamp(1.75rem, 3.6vw, 2.6rem); font-weight: 800; text-transform: uppercase; line-height: 1.1; }
.fcc-cmp__lead { margin: .6rem 0 0; color: #C9CDD3; font-size: clamp(.95rem, 1.3vw, 1.05rem); max-width: 60ch; }
.fcc-cmp__corpo { padding: clamp(1.5rem, 3vw, 2.5rem) var(--fcc-gutter) clamp(3rem, 6vw, 5rem); }
.fcc-cmp__grade {
	max-width: var(--fcc-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(var(--fcc-cmp-n, 3), minmax(0, 1fr));
	grid-template-rows: repeat(4, auto);
	column-gap: clamp(.75rem, 1.5vw, 1.25rem);
}
/* Subgrid: as 4 linhas (foto, título, desenho, tabela) alinham entre as colunas. */
.fcc-cmp__col {
	grid-row: span 4;
	display: grid;
	grid-template-rows: subgrid;
	min-width: 0;
	background: #fff;
	border: 1px solid var(--fcc-line);
}
.fcc-cmp__cel { padding: clamp(.9rem, 1.6vw, 1.25rem); min-width: 0; }
.fcc-cmp__cel + .fcc-cmp__cel { border-top: 1px solid var(--fcc-line); }
.fcc-cmp__cel--foto { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; background: #F7F8F9; }
.fcc-cmp__cel--foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fcc-cmp__remover {
	position: absolute;
	top: .6rem;
	right: .6rem;
	z-index: 1;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #fff;
	color: var(--fcc-ink);
	box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.fcc-cmp__remover:hover { background: var(--fcc-red); color: #fff; }
.fcc-cmp__remover:focus-visible { outline: 2px solid var(--fcc-red); outline-offset: 2px; }
.fcc-cmp__remover svg { width: 16px; height: 16px; }
.fcc-cmp__familia { margin: 0 0 .3rem; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fcc-muted); }
.fcc-cmp__nome { margin: 0 0 .6rem; font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 800; line-height: 1.2; text-transform: uppercase; text-wrap: balance; }
.fcc-cmp__nome a { color: inherit; text-decoration: none; }
.fcc-cmp__nome a:hover { color: var(--fcc-red); }
.fcc-cmp__ver { font-size: .78rem; font-weight: 700; color: var(--fcc-red); text-transform: uppercase; letter-spacing: .03em; }
.fcc-cmp__rotulo { margin: 0 0 .75rem; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fcc-muted); }
.fcc-cmp__series { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .75rem; }
.fcc-cmp__serie {
	appearance: none;
	padding: .35rem .75rem;
	border: 1px solid var(--fcc-line);
	border-radius: 999px;
	background: #fff;
	color: var(--fcc-ink);
	font: inherit;
	font-size: .72rem;
	font-weight: 600;
	cursor: pointer;
}
.fcc-cmp__serie[aria-pressed="true"] { background: var(--fcc-ink); border-color: var(--fcc-ink); color: #fff; }
.fcc-cmp__serie:focus-visible { outline: 2px solid var(--fcc-red); outline-offset: 2px; }
.fcc-cmp__desenho { display: block; border: 1px solid var(--fcc-line); background: #fff; cursor: zoom-in; }
.fcc-cmp__desenho img { display: block; width: 100%; height: auto; }
.fcc-cmp__rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fcc-cmp__tabela { font-size: .76rem; }
.fcc-cmp__notas { margin: .75rem 0 0; padding-left: 1.1rem; font-size: .72rem; color: var(--fcc-muted); }
.fcc-cmp__vazio {
	margin: 0;
	padding: 1.5rem 1rem;
	border: 1px dashed var(--fcc-line);
	background: #F7F8F9;
	color: var(--fcc-muted);
	font-size: .85rem;
	text-align: center;
}
.fcc-cmp__col--vaga { display: flex; background: transparent; border: 0; }
.fcc-cmp__adicionar {
	appearance: none;
	flex: 1 1 auto;
	min-height: 360px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .7rem;
	border: 2px dashed #C9CDD3;
	background: transparent;
	color: var(--fcc-muted);
	font: inherit;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.fcc-cmp__adicionar:hover { border-color: var(--fcc-ink); color: var(--fcc-ink); background: #fff; }
.fcc-cmp__adicionar:focus-visible { outline: 2px solid var(--fcc-red); outline-offset: 2px; }
.fcc-cmp__adicionar svg { width: 34px; height: 34px; color: var(--fcc-red); }

/* Celular: as colunas viram um carrossel com encaixe, para cada uma manter largura de
   leitura (três colunas de 110px não comportam a tabela). */
@media (max-width: 900px) {
	.fcc-cmp__corpo { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--fcc-gutter); -webkit-overflow-scrolling: touch; }
	.fcc-cmp__grade { grid-template-columns: repeat(var(--fcc-cmp-n, 3), min(82vw, 380px)); max-width: none; width: max-content; }
	.fcc-cmp__col { scroll-snap-align: start; }
}