/* ==========================================================================
   Clinton Painting Services : folha unica do tema

   REGRA QUE NAO SE QUEBRA: nenhum hex aparece neste arquivo.
   Toda cor vem de var(--cp-*), declarado em :root por inc/tokens.php a partir
   do design-system.json. Onde e preciso transparencia, usamos color-mix(),
   que compoe a partir do token em vez de cravar canais novos.

   Medidas: clone/specs/01-medicoes-ao-vivo.md
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol {
	margin: 0;
	padding: 0;
}

ul[class], ol[class] { list-style: none; }

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

button, input, select, textarea { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

/* --------------------------------------------------------------------------
   2. Base. Tipografia medida ao vivo, com os clamp() reais da referencia.
   -------------------------------------------------------------------------- */

body {
	font-family: var(--cp-font);
	font-size: var(--cp-body);
	font-weight: 400;
	line-height: var(--cp-lh-body);
	color: var(--cp-text);
	background-color: var(--cp-white);
	/* clip, e nao hidden: hidden faz o body virar o seu proprio container de
	   rolagem e mata todo position: sticky da pagina (header e palco). Medido
	   em 05/09/2026 na Home 2, generalizado em 07/09 para o header. */
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--cp-font);
	font-weight: 600;
	line-height: var(--cp-lh-head);
	color: var(--cp-text-heading);
	text-wrap: balance;
}

h1 { font-size: var(--cp-h1); }
h2 { font-size: var(--cp-h2); }
h3 { font-size: var(--cp-h3); }
h4 { font-size: var(--cp-h4); }
h5 { font-size: var(--cp-h5); }
h6 { font-size: var(--cp-h6); }

p { text-wrap: pretty; }
p + p { margin-top: var(--cp-s-sm); }

strong, b { font-weight: 600; color: var(--cp-text-heading); }

/* Foco. NUNCA removido. 3px solid, offset 2px, conforme design-system. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--cp-focus);
	outline-offset: 2px;
	border-radius: var(--cp-radius-1);
}

/* Pular para o conteudo. Visivel ao receber foco pelo teclado. */
.cp-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: var(--cp-s-xs) var(--cp-s-md);
	background: var(--cp-navy);
	color: var(--cp-white);
	font-weight: 500;
}
.cp-skip:focus { left: var(--cp-s-sm); top: var(--cp-s-sm); }

.cp-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   3. Container e secao. MEDIDOS: 1300 / 850 / 400, padding 30 / 20,
      espacamento vertical 120 / 80 / 60.
   -------------------------------------------------------------------------- */

.cp-container {
	width: 100%;
	max-width: min(100%, var(--cp-container));
	margin-inline: auto;
	padding-inline: var(--cp-gutter);
}

.cp-container--wide { max-width: min(100%, var(--cp-container-wide)); }
.cp-container--narrow { max-width: min(100%, var(--cp-container-narrow)); }
.cp-container--reading { max-width: 68ch; }

.cp-section { padding-block: var(--cp-section-y); position: relative; }
.cp-section--tight { padding-block: calc(var(--cp-section-y) * 0.66); }
.cp-section--top-0 { padding-top: 0; }
.cp-section--bottom-0 { padding-bottom: 0; }

/* Superficies. A alternancia entre elas e o que da ritmo a pagina. */
.cp-surface--white { background-color: var(--cp-white); }
.cp-surface--cream { background-color: var(--cp-cream); }
.cp-surface--cool  { background-color: var(--cp-cool); }
.cp-surface--dark  { background-color: var(--cp-navy); }

.cp-surface--dark,
.cp-surface--dark p { color: var(--cp-text-on-dark); }
.cp-surface--dark h1,
.cp-surface--dark h2,
.cp-surface--dark h3,
.cp-surface--dark h4,
.cp-surface--dark h5,
.cp-surface--dark h6 { color: var(--cp-white); }
/* Sobre navy o vermelho da marca reprova em 2.55:1. O legivel e o red-soft. */
.cp-surface--dark a:not(.cp-btn) { color: var(--cp-red-soft); }

@media (max-width: 1023px) {
	.cp-container { max-width: min(100%, var(--cp-container-narrow)); }
	:root { --cp-section-y: 80px; }
}

@media (max-width: 767px) {
	.cp-container { max-width: 100%; padding-inline: 20px; }
	:root { --cp-section-y: 60px; }
}

/* --------------------------------------------------------------------------
   4. Cabecalho de secao
   -------------------------------------------------------------------------- */

.cp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--cp-s-2xs);
	font-size: var(--cp-small);
	font-weight: 500;
	letter-spacing: var(--cp-ls-3);
	text-transform: uppercase;
	color: var(--cp-red);
	margin-bottom: var(--cp-s-sm);
}
.cp-surface--dark .cp-eyebrow { color: var(--cp-red-soft); }

.cp-eyebrow__mark {
	width: 28px;
	height: 2px;
	background-color: currentColor;
	flex: none;
}

.cp-section__head { margin-bottom: var(--cp-s-2xl); max-width: 760px; }
.cp-section__head--center { margin-inline: auto; text-align: center; }
.cp-section__head--center .cp-eyebrow { justify-content: center; }
.cp-section__lead { margin-top: var(--cp-s-sm); font-size: var(--cp-body-lg); }

.cp-section__head--split {
	max-width: none;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	gap: var(--cp-s-xl);
	align-items: end;
}
@media (max-width: 767px) {
	.cp-section__head--split { grid-template-columns: 1fr; gap: var(--cp-s-md); }
}

/* --------------------------------------------------------------------------
   5. Botao
      MEDIDO: display flex, font 12 a 14px, uppercase, weight 500,
      line-height 1, raio 3.125em, padding 18px 34px, sem sombra,
      transicao 0.375s cubic-bezier(0.7, 0, 0.3, 1).
      HOVER MEDIDO: inverte para a cor de destaque.
   -------------------------------------------------------------------------- */

.cp-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--cp-s-xs);
	padding: var(--cp-btn-padding);
	font-size: var(--cp-btn-size);
	font-weight: 500;
	line-height: var(--cp-lh-btn);
	letter-spacing: var(--cp-ls-2);
	text-transform: uppercase;
	border: 1px solid transparent;
	border-radius: var(--cp-radius-pill);
	box-shadow: none;
	cursor: pointer;
	transition: var(--cp-transition-btn);
	transition-property: background-color, border-color, color, transform;
	text-align: center;
}

.cp-btn__icon {
	display: grid;
	place-items: center;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--cp-white) 22%, transparent);
	flex: none;
	transition: inherit;
}

.cp-btn__icon-inner { display: grid; place-items: center; }

.cp-btn .cp-ico { width: 0.62em; height: 0.62em; fill: currentColor; }

.cp-btn__text { display: inline-block; }

/* Primario. Ja E a cor de destaque, entao clareia no hover em vez de inverter. */
.cp-btn--primary {
	background-color: var(--cp-red);
	color: var(--cp-white);
}
.cp-btn--primary:hover { background-color: var(--cp-red-hover); }
.cp-btn--primary:active { background-color: var(--cp-red-active); }

/* Secundario. Inverte para o destaque no hover, como a referencia faz. */
.cp-btn--secondary {
	background-color: var(--cp-navy);
	color: var(--cp-white);
}
.cp-btn--secondary:hover { background-color: var(--cp-red); }
.cp-btn--secondary:active { background-color: var(--cp-red-active); }

.cp-btn--ghost-light {
	background-color: transparent;
	color: var(--cp-text-heading);
	border-color: var(--cp-navy);
}
.cp-btn--ghost-light .cp-btn__icon { background-color: color-mix(in srgb, var(--cp-navy) 12%, transparent); }
.cp-btn--ghost-light:hover {
	background-color: var(--cp-navy);
	color: var(--cp-white);
}
.cp-btn--ghost-light:hover .cp-btn__icon { background-color: color-mix(in srgb, var(--cp-white) 22%, transparent); }

.cp-btn--ghost-dark {
	background-color: transparent;
	color: var(--cp-white);
	border-color: var(--cp-white);
}
.cp-btn--ghost-dark:hover {
	background-color: var(--cp-white);
	color: var(--cp-navy);
}
.cp-btn--ghost-dark:hover .cp-btn__icon { background-color: color-mix(in srgb, var(--cp-navy) 12%, transparent); }

.cp-btn-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cp-s-sm);
	align-items: center;
}

/* Link com seta, para acoes terciarias */
.cp-link {
	display: inline-flex;
	align-items: center;
	gap: var(--cp-s-2xs);
	font-weight: 500;
	color: var(--cp-red);
	transition: var(--cp-transition-btn);
	transition-property: color, gap;
}
.cp-link .cp-ico { width: 0.7em; height: 0.7em; fill: currentColor; }
.cp-link:hover { color: var(--cp-red-hover); gap: var(--cp-s-xs); }
.cp-surface--dark .cp-link { color: var(--cp-red-soft); }

/* --------------------------------------------------------------------------
   6. Header
      MEDIDO: topbar navy 49px, faixa principal transparente 89px. Total 138px.
      Mobile: 46 + 69 = 115px, padding lateral 20px.

      Desde 07/09/2026 (pedido do usuario) o header e STICKY, nao absoluto e
      depois fixo: `top` negativo igual a altura da topbar faz a topbar rolar
      para fora e a faixa principal grudar no topo no pixel em que o encosta,
      sem sumir e voltar. O JS grava as alturas reais em --cp-topbar-h e
      --cp-header-h; os valores abaixo sao a reserva sem JavaScript.
      Na home o header e transparente sobre o hero: o main sobe por baixo dele
      com margem negativa da altura do header (body.cp-is-home .cp-main).
   -------------------------------------------------------------------------- */

/* Alturas medidas em 07/09/2026, ja com a borda de 1px do header. */
:root { --cp-topbar-h: 49px; --cp-header-h: 139px; }
@media (max-width: 767px) { :root { --cp-topbar-h: 46px; --cp-header-h: 116px; } }

.cp-header {
	position: sticky;
	top: calc(-1 * var(--cp-topbar-h));
	z-index: var(--cp-z-header);
	/* Borda sempre presente (transparente no topo) para o header nao mudar de
	   altura ao ganhar a linha do estado preso. */
	border-bottom: 1px solid transparent;
	transition: background-color 0.35s var(--cp-anim-easing), box-shadow 0.35s var(--cp-anim-easing), border-color 0.35s var(--cp-anim-easing);
}
/* Com a barra do WordPress (usuario logado), o topo da viewport e a barra. */
.admin-bar .cp-header { top: calc(32px - var(--cp-topbar-h)); }
@media (max-width: 782px) { .admin-bar .cp-header { top: calc(46px - var(--cp-topbar-h)); } }
/* Ate 600px o WordPress deixa a barra `position: absolute`, e ela rola junto. */
@media (max-width: 600px) { .admin-bar .cp-header { top: calc(-1 * var(--cp-topbar-h)); } }

/* Na home o conteudo comeca por baixo do header transparente. */
body.cp-is-home .cp-main { margin-top: calc(-1 * var(--cp-header-h)); }

/* Em pagina interna o header nao sobrepoe imagem de hero, entao ganha fundo. */
body:not(.cp-is-home) .cp-header { background-color: var(--cp-navy); }

.cp-topbar {
	background-color: var(--cp-navy);
	color: var(--cp-navy-muted);
	font-size: var(--cp-small);
}
.cp-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cp-s-md);
	min-height: 49px;
	flex-wrap: wrap;
}
.cp-topbar__group { display: flex; align-items: center; gap: var(--cp-s-md); flex-wrap: wrap; }
.cp-topbar__item {
	display: inline-flex;
	align-items: center;
	gap: var(--cp-s-2xs);
	transition: var(--cp-transition);
	transition-property: color;
}
.cp-topbar__item .cp-ico { width: 14px; height: 14px; fill: currentColor; stroke: none; flex: none; }
.cp-topbar__item[data-stroke] .cp-ico { fill: none; }
a.cp-topbar__item:hover { color: var(--cp-white); }

.cp-header__main {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cp-s-md);
	min-height: 89px;
}

.cp-logo { display: inline-flex; align-items: center; flex: none; }
/* As PNGs tem 450px de largura. 48px de altura mantem cobertura 2x em retina. */
.cp-logo img { height: 48px; width: auto; }
.cp-logo__text {
	font-size: var(--cp-h5);
	font-weight: 700;
	letter-spacing: var(--cp-ls-1);
	color: var(--cp-white);
	line-height: 1.1;
}
.cp-logo__text span { display: block; font-size: var(--cp-small); font-weight: 500; color: var(--cp-red-soft); letter-spacing: var(--cp-ls-2); text-transform: uppercase; }

/*
 * Header fixo no scroll. A unica sombra do tema, e ela e funcional.
 *
 * ⚠️ O seletor precisa dos tres niveis, e nao e capricho. A regra de pagina
 * interna, `body:not(.cp-is-home) .cp-header`, tem especificidade (0,2,1).
 * Um simples `.cp-header--stuck` tem (0,1,0) e PERDE. Medido em 28/08/2026: em
 * 9 das 10 paginas o header nunca chegava a ficar fixo, e o fundo branco novo
 * tambem nao se aplicava, porque os dois vinham desta regra.
 * `body .cp-header.cp-header--stuck` da (0,2,1): EMPATA com a regra de pagina
 * interna e vence so por vir depois dela no arquivo. Esta regra nunca pode
 * subir para antes de `body:not(.cp-is-home) .cp-header`.
 */
body .cp-header.cp-header--stuck {
	background-color: var(--cp-white);
	box-shadow: var(--cp-shadow-funcional);
}


/* --------------------------------------------------------------------------
   Header fixo BRANCO com a logo colorida.

   O estado transparente do topo nao e tocado: ele continua com a logo branca
   sobre a imagem do hero.

   ⚠️ Sobre a cor de destaque aqui. O resto do tema usa `--cp-red-soft`
   (#E88A91) para hover e item atual, porque ali o fundo e navy. Sobre BRANCO
   esse mesmo tom da apenas 2.48:1, que reprova no WCAG AA por larga margem.
   Por isso o header branco usa `--cp-red` (#A61D26), que da 7.43:1 e passa em
   AAA. Nao trocar de volta por consistencia visual: sao fundos diferentes, e a
   mesma cor nao serve para os dois.
   -------------------------------------------------------------------------- */

/* As duas logos ficam sobrepostas e trocam por opacidade, junto com o fade do
   fundo (07/09/2026). Antes trocavam por display, o que dava um corte seco. */
.cp-logo { position: relative; }
.cp-logo__img { transition: opacity 0.35s var(--cp-anim-easing); }
.cp-logo__img--colorida { position: absolute; inset: 0; opacity: 0; }
.cp-header--stuck .cp-logo__img--clara { opacity: 0; }
.cp-header--stuck .cp-logo__img--colorida { opacity: 1; }

/* Texto de reserva, para quando o arquivo da logo nao existir. */
.cp-header--stuck .cp-logo__text { color: var(--cp-navy); }
.cp-header--stuck .cp-logo__text span { color: var(--cp-red); }

/* Menu: navy em repouso, vermelho no hover e no item atual. */
.cp-header--stuck .cp-nav__link { color: var(--cp-navy); }
.cp-header--stuck .cp-nav__text::before { color: var(--cp-red); }
.cp-header--stuck .cp-nav__item.is-current > .cp-nav__link { color: var(--cp-red); }

/* O burger herda currentColor, entao basta a cor do proprio botao. */
.cp-header--stuck .cp-burger { color: var(--cp-navy); }

/* Uma linha de 1px separa o header branco de conteudo branco logo abaixo.
   Sem ela, ao rolar sobre uma secao clara o header perde a borda e "vaza". */
.cp-header--stuck { border-bottom-color: var(--cp-border); }

/* --------------------------------------------------------------------------
   7. Navegacao
      MEDIDO: item 18px, weight 500, branco, capitalize, padding 8px 25px.
      A referencia troca o texto no hover com um ::before deslizante. Reproduzido.
   -------------------------------------------------------------------------- */

.cp-nav__list {
	display: flex;
	align-items: center;
	gap: var(--cp-s-2xs);
}

.cp-nav__item { position: relative; }

.cp-nav__link {
	display: inline-flex;
	align-items: center;
	gap: var(--cp-s-3xs);
	padding: 8px 18px;
	font-size: var(--cp-h6);
	font-weight: 500;
	text-transform: capitalize;
	color: var(--cp-white);
	transition: var(--cp-transition);
	transition-property: color;
}

/*
 * Troca de texto no hover: o original sai por cima e o clone vermelho entra
 * por baixo, tudo RECORTADO dentro da propria linha.
 *
 * ⚠️ Quem se move e o <span> interno (e o ::before). O .cp-nav__text so
 * recorta. Na versao anterior o transform caia no proprio .cp-nav__text, e
 * como overflow:hidden acompanha o elemento transformado, nada era recortado:
 * a palavra saltava uma linha inteira acima do menu. Corrigido em 28/08/2026
 * a pedido do usuario.
 */
.cp-nav__text {
	position: relative;
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
}
.cp-nav__text::before {
	content: attr(data-text);
	position: absolute;
	inset-inline-start: 0;
	top: 100%;
	color: var(--cp-red-soft);
	transition: transform 0.42s var(--cp-anim-easing);
	white-space: nowrap;
}
.cp-nav__text > span {
	display: inline-block;
	transition: transform 0.42s var(--cp-anim-easing);
}

.cp-nav__item:hover > .cp-nav__link .cp-nav__text > span,
.cp-nav__item:focus-within > .cp-nav__link .cp-nav__text > span,
.cp-nav__item:hover > .cp-nav__link .cp-nav__text::before,
.cp-nav__item:focus-within > .cp-nav__link .cp-nav__text::before { transform: translateY(-100%); }

.cp-nav__item.is-current > .cp-nav__link { color: var(--cp-red-soft); }

/* Submenu */
.cp-nav__toggle {
	display: none;
	padding: var(--cp-s-2xs);
	color: var(--cp-white);
}
.cp-nav__toggle .cp-ico { width: 10px; height: 10px; fill: currentColor; transition: transform 0.3s ease; }

.cp-nav__item--has-children > .cp-nav__link::after {
	content: "";
	width: 6px; height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	flex: none;
}

.cp-nav__submenu {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	min-width: 250px;
	padding: var(--cp-s-2xs) 0;
	background-color: var(--cp-white);
	border-radius: var(--cp-radius-1);
	box-shadow: var(--cp-shadow-funcional);
	z-index: var(--cp-z-dropdown);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.cp-nav__item--has-children:hover > .cp-nav__submenu,
.cp-nav__item--has-children:focus-within > .cp-nav__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.cp-nav__sublink {
	display: block;
	padding: var(--cp-s-xs) var(--cp-s-md);
	font-weight: 500;
	color: var(--cp-text-heading);
	transition: var(--cp-transition);
	transition-property: background-color, color, padding-left;
}
.cp-nav__sublink:hover {
	background-color: var(--cp-cream);
	color: var(--cp-red);
	padding-left: calc(var(--cp-s-md) + 6px);
}

/* Hamburger */
.cp-burger {
	display: none;
	width: 44px; height: 44px;
	place-items: center;
	color: var(--cp-white);
	flex: none;
}
.cp-burger__bars { display: block; width: 24px; height: 2px; background-color: currentColor; position: relative; transition: background-color 0.2s; }
.cp-burger__bars::before,
.cp-burger__bars::after {
	content: ""; position: absolute; left: 0;
	width: 24px; height: 2px; background-color: currentColor;
	transition: transform 0.3s var(--cp-anim-easing);
}
.cp-burger__bars::before { top: -7px; }
.cp-burger__bars::after  { top: 7px; }

.cp-burger[aria-expanded="true"] .cp-burger__bars { background-color: transparent; }
.cp-burger[aria-expanded="true"] .cp-burger__bars::before { transform: translateY(7px) rotate(45deg); }
.cp-burger[aria-expanded="true"] .cp-burger__bars::after  { transform: translateY(-7px) rotate(-45deg); }

.cp-header__cta { flex: none; }

/* Desktop estreito (1024 a 1199): logo, menu e botao somam mais que a
   largura e o botao vazava 39px para fora da tela (medido em 08/09/2026 com
   audita-layout.js; cabia so a partir de 1100). Menos ar entre os itens e
   um botao mais curto resolvem sem esconder nada. */
@media (min-width: 1024px) and (max-width: 1199px) {
	.cp-header__main { gap: var(--cp-s-sm); }
	/* nowrap: sem ele "About Us" e "Color Cards" quebravam em duas linhas. */
	.cp-nav__link { padding: 8px 9px; font-size: 0.9375rem; white-space: nowrap; }
	.cp-header__cta .cp-btn { padding-inline: 16px; }
	.cp-logo img { height: 42px; }
}

/* Mobile e tablet: menu vira painel deslizante */
@media (max-width: 1023px) {
	/* Acima do drawer (z 500) dentro do contexto do header: e o botao X. */
	.cp-burger { display: grid; position: relative; z-index: calc(var(--cp-z-overlay) + 1); }
	.cp-header__cta { display: none; }

	.cp-nav {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(88vw, 380px);
		padding: 100px var(--cp-s-md) var(--cp-s-xl);
		background-color: var(--cp-navy);
		overflow-y: auto;
		/* O fim da lista nao encadeia a rolagem para a pagina atras. */
		overscroll-behavior: contain;
		transform: translateX(100%);
		transition: transform 0.4s var(--cp-anim-easing);
		z-index: var(--cp-z-overlay);
	}
	.cp-nav.is-open { transform: translateX(0); }

	/* Menu aberto: a viewport para de rolar. A classe vai no <html> (main.js,
	   secao 2) porque `overflow: hidden` no body mataria o header sticky. */
	html.cp-menu-open { overflow: hidden; }

	.cp-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.cp-nav__item { border-bottom: 1px solid var(--cp-navy-line); }
	.cp-nav__link { padding: var(--cp-s-sm) 0; font-size: var(--cp-h5); }
	.cp-nav__item--has-children > .cp-nav__link::after { display: none; }

	.cp-nav__toggle {
		display: grid; place-items: center;
		position: absolute; top: 6px; inset-inline-end: 0;
		width: 44px; height: 44px;
	}
	.cp-nav__toggle[aria-expanded="true"] .cp-ico { transform: rotate(180deg); }

	.cp-nav__submenu {
		position: static;
		min-width: 0;
		opacity: 1; visibility: visible; transform: none;
		background: transparent;
		box-shadow: none;
		border-radius: 0;
		padding: 0 0 var(--cp-s-xs) var(--cp-s-sm);
		display: none;
	}
	.cp-nav__submenu.is-open { display: block; }
	.cp-nav__sublink { color: var(--cp-navy-muted); padding: var(--cp-s-xs) 0; }
	.cp-nav__sublink:hover { background: transparent; color: var(--cp-red-soft); padding-left: 6px; }

	.cp-nav-overlay {
		position: fixed; inset: 0;
		background-color: color-mix(in srgb, var(--cp-navy-deep) 60%, transparent);
		opacity: 0; visibility: hidden;
		transition: opacity 0.3s ease, visibility 0.3s;
		/* Um nivel abaixo do drawer, no MESMO stacking context (o do header;
		   ver header.php). Sem gesto de rolagem: um toque aqui so fecha o menu. */
		z-index: calc(var(--cp-z-overlay) - 1);
		touch-action: none;
	}
	.cp-nav-overlay.is-open { opacity: 1; visibility: visible; }

	.cp-topbar__inner { justify-content: center; min-height: 46px; }
	.cp-topbar__group--secundario { display: none; }
	.cp-header__main { min-height: 69px; }
}

@media (max-width: 767px) {
	.cp-topbar { font-size: 13px; }
	.cp-topbar__group { gap: var(--cp-s-sm); }
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */

.cp-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: min(88vh, 800px);
	padding-block: 200px var(--cp-s-4xl);
	background-color: var(--cp-navy);
	overflow: hidden;
}

.cp-hero__bg { position: absolute; inset: 0; z-index: 0; }
.cp-hero__bg .cp-img,
.cp-hero__bg img { width: 100%; height: 100%; object-fit: cover; }

/* Veu para o texto branco ter contraste sobre qualquer foto que entre depois. */
.cp-hero__bg::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(
		100deg,
		color-mix(in srgb, var(--cp-navy) 92%, transparent) 0%,
		color-mix(in srgb, var(--cp-navy) 72%, transparent) 52%,
		color-mix(in srgb, var(--cp-navy) 42%, transparent) 100%
	);
}

.cp-hero__inner { position: relative; z-index: 1; max-width: 720px; }
.cp-hero h1 { color: var(--cp-white); letter-spacing: var(--cp-ls-1); }

/* H1 de duas linhas: o slogan lidera, a keyword vem logo abaixo no mesmo H1. */
.cp-hero__slogan { display: block; }
.cp-hero__kw {
	display: block;
	margin-top: var(--cp-s-xs);
	font-size: var(--cp-h4);
	font-weight: 500;
	letter-spacing: 0;
	color: var(--cp-red-soft);
}
.cp-hero__texto {
	margin-top: var(--cp-s-md);
	font-size: var(--cp-body-lg);
	color: var(--cp-text-on-dark);
	max-width: 60ch;
}
.cp-hero__acoes { margin-top: var(--cp-s-xl); }

.cp-hero__eyebrow { color: var(--cp-red-soft); }

@media (max-width: 767px) {
	.cp-hero { min-height: 0; padding-block: 150px var(--cp-s-3xl); }
}

/* --------------------------------------------------------------------------
   9. Banner de pagina interna
      MEDIDO: altura 249px, container padding 75px 0 90px, bg absoluto z-index -1.
   -------------------------------------------------------------------------- */

.cp-banner {
	position: relative;
	background-color: var(--cp-navy);
	overflow: hidden;
	text-align: center;
}
.cp-banner__bg { position: absolute; inset: 0; z-index: 0; opacity: 0.28; }
.cp-banner__bg .cp-img, .cp-banner__bg img { width: 100%; height: 100%; object-fit: cover; }
.cp-banner__inner { position: relative; z-index: 1; padding-block: 75px 90px; }
.cp-banner h1 { color: var(--cp-white); }
.cp-banner__sub { margin-top: var(--cp-s-xs); color: var(--cp-text-on-dark); }

@media (max-width: 767px) {
	.cp-banner__inner { padding-block: var(--cp-s-2xl) var(--cp-s-2xl); }
}

/* Breadcrumb. MEDIDO: 16px, 60% de branco, link branco, delimitador 5px. */
.cp-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin-top: var(--cp-s-sm);
	font-size: var(--cp-body);
	color: color-mix(in srgb, var(--cp-white) 60%, transparent);
}
.cp-crumbs a { color: var(--cp-white); transition: var(--cp-transition); transition-property: color; }
.cp-crumbs a:hover { color: var(--cp-red-soft); }
.cp-crumbs__sep {
	display: inline-block;
	width: 5px; height: 5px;
	margin: 0 7px;
	border-radius: 50%;
	background-color: currentColor;
	flex: none;
}

/* --------------------------------------------------------------------------
   10. Faixa de confianca
       (A "faixa de destaques" saiu da home na rodada de 28/08/2026. O CSS
       dela saiu junto; o partial barra-destaques.php ficou no tema, marcado
       como fora de uso, caso volte numa pagina interna.)
   -------------------------------------------------------------------------- */

.cp-trustbar { background-color: var(--cp-navy-deep); padding-block: var(--cp-s-sm); }
.cp-trustbar__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--cp-s-sm) var(--cp-s-lg);
	font-size: var(--cp-small);
	letter-spacing: var(--cp-ls-1);
	color: var(--cp-navy-muted);
	text-transform: uppercase;
}
.cp-trustbar__item { display: inline-flex; align-items: center; gap: var(--cp-s-2xs); }
.cp-trustbar__item .cp-ico { width: 13px; height: 13px; fill: none; stroke: var(--cp-red-soft); flex: none; }

/* --------------------------------------------------------------------------
   11. Card de servico
       MEDIDO: sem sombra, sem raio, fundo transparente, overflow hidden.
       A imagem e mais alta que o card e e recortada. No hover ela cresce,
       o veu aparece e o conteudo sobe em sequencia (delays 0.16s e 0.24s).
   -------------------------------------------------------------------------- */

.cp-cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--cp-s-md);
}
.cp-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cp-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1023px) { .cp-cards, .cp-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .cp-cards, .cp-cards--2, .cp-cards--3 { grid-template-columns: 1fr; } }

.cp-card {
	position: relative;
	display: block;
	overflow: hidden;
	background-color: transparent;
	border-radius: var(--cp-radius-1);
	transition: var(--cp-transition-btn);
	isolation: isolate;
}

/* O QUADRO manda na proporcao, nunca a imagem.
   Motivo: o placeholder carrega aspect-ratio inline vindo do arquivo previsto
   (16:9 no hero, 4:5 na galeria), e estilo inline vence o CSS. Sem o quadro
   impondo 4:5 aqui, o card encolhe e o titulo transborda para fora dele.
   Com o quadro fixo, imagem real e placeholder se comportam igual, e a imagem
   e recortada, que e exatamente o que a referencia faz. */
.cp-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
}
.cp-card__media .cp-img,
.cp-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--cp-anim-easing);
}
.cp-card:hover .cp-card__media img { transform: scale(1.06); }

/* Veu de gradiente que cresce no hover, como o a::after medido na referencia. */
.cp-card__media::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--cp-navy) 92%, transparent) 0%,
		color-mix(in srgb, var(--cp-navy) 55%, transparent) 38%,
		transparent 72%
	);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: bottom;
	transition: background-size 0.55s var(--cp-anim-easing);
}
.cp-card:hover .cp-card__media::after { background-size: 100% 120%; }

.cp-card__body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: var(--cp-s-md);
	z-index: 1;
}

.cp-card__titulo {
	font-size: var(--cp-h5);
	color: var(--cp-white);
	transition: var(--cp-transition-btn);
	transition-property: color;
}
.cp-card:hover .cp-card__titulo { color: var(--cp-red-soft); }

/* Revelacao escalonada, com os delays medidos na referencia. */
.cp-card__resumo,
.cp-card__acao {
	color: var(--cp-text-on-dark);
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.45s var(--cp-anim-easing), transform 0.45s var(--cp-anim-easing);
}
.cp-card__resumo { margin-top: var(--cp-s-2xs); font-size: var(--cp-small); }
.cp-card__acao { margin-top: var(--cp-s-xs); }

.cp-card:hover .cp-card__resumo,
.cp-card:focus-within .cp-card__resumo { opacity: 1; transform: translateY(0); transition-delay: 0.16s; }
.cp-card:hover .cp-card__acao,
.cp-card:focus-within .cp-card__acao { opacity: 1; transform: translateY(0); transition-delay: 0.24s; }

.cp-card__acao { display: inline-flex; align-items: center; gap: var(--cp-s-2xs); font-size: var(--cp-small); font-weight: 500; color: var(--cp-white); text-transform: uppercase; letter-spacing: var(--cp-ls-1); }
.cp-card__acao .cp-ico { width: 10px; height: 10px; fill: currentColor; }

/* Em toque nao ha hover: o conteudo fica sempre visivel. */
@media (hover: none) {
	.cp-card__resumo, .cp-card__acao { opacity: 1; transform: none; }
}

/* Numero de etapa dentro do card */
.cp-card__num {
	position: absolute; top: var(--cp-s-md); inset-inline-end: var(--cp-s-md);
	z-index: 2;
	font-size: var(--cp-h4); font-weight: 700;
	color: color-mix(in srgb, var(--cp-white) 55%, transparent);
}

/* --------------------------------------------------------------------------
   12. Lista de features, etapas e blocos de texto
   -------------------------------------------------------------------------- */

.cp-features {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--cp-s-md) var(--cp-s-xl);
}
@media (max-width: 767px) { .cp-features { grid-template-columns: 1fr; } }

.cp-feature { display: flex; gap: var(--cp-s-sm); align-items: flex-start; }
.cp-feature__mark {
	display: grid; place-items: center;
	width: 28px; height: 28px; flex: none;
	border-radius: 50%;
	background-color: var(--cp-red);
	color: var(--cp-white);
	margin-top: 3px;
}
.cp-feature__mark .cp-ico { width: 13px; height: 13px; fill: none; stroke: currentColor; }
.cp-feature__titulo { font-size: var(--cp-h6); font-weight: 600; color: var(--cp-text-heading); }
.cp-feature__texto { margin-top: var(--cp-s-3xs); font-size: var(--cp-small); color: var(--cp-text-soft); }
.cp-surface--dark .cp-feature__titulo { color: var(--cp-white); }
.cp-surface--dark .cp-feature__texto { color: var(--cp-navy-muted); }

.cp-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--cp-s-lg);
	counter-reset: cp-step;
}
@media (max-width: 900px) { .cp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cp-steps { grid-template-columns: 1fr; } }

.cp-step {
	position: relative;
	padding: var(--cp-s-lg);
	background-color: var(--cp-white);
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius-1);
	transition: var(--cp-transition-btn);
	transition-property: border-color, background-color, transform;
}
.cp-step:hover { border-color: var(--cp-red); transform: translateY(-4px); }
.cp-step__num {
	display: block;
	font-size: var(--cp-h3);
	font-weight: 700;
	color: var(--cp-cream-line);
	line-height: 1;
	margin-bottom: var(--cp-s-xs);
	transition: inherit;
}
.cp-step:hover .cp-step__num { color: var(--cp-red); }
.cp-step__titulo { font-size: var(--cp-h6); font-weight: 600; color: var(--cp-text-heading); }
.cp-step__texto { margin-top: var(--cp-s-2xs); font-size: var(--cp-small); color: var(--cp-text-soft); }

.cp-surface--cream .cp-step { background-color: var(--cp-white); border-color: var(--cp-cream-line); }

/* Bloco de duas colunas: texto e midia */
.cp-split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--cp-s-3xl);
	align-items: center;
}
.cp-split--media-first > :first-child { order: 2; }
@media (max-width: 900px) {
	.cp-split { grid-template-columns: 1fr; gap: var(--cp-s-xl); }
	.cp-split--media-first > :first-child { order: 0; }
	/* Foto acima do texto no celular (10/09/2026, pedido do usuario): a
	   primeira secao da spoke abria com tres paragrafos seguidos e a pagina
	   comecava pobre de imagem. So no empilhado: no desktop a ordem do HTML
	   (texto a esquerda, foto a direita) continua valendo. */
	.cp-split--foto-antes > :first-child { order: 2; }
	/* A foto virou o primeiro bloco da tela: o atraso de 150ms que ela carrega
	   para entrar depois do texto no desktop a faria chegar por ultimo aqui.
	   O !important e obrigatorio: cp_anim() escreve o delay no atributo style,
	   e estilo inline vence folha de estilo em qualquer especificidade. */
	.cp-split--foto-antes > .cp-media { --cp-anim-delay: 0ms !important; }
	.cp-split--foto-antes > :first-child { --cp-anim-delay: 150ms !important; }
}

.cp-media { border-radius: var(--cp-radius-2); overflow: hidden; }
.cp-media .cp-img, .cp-media img { width: 100%; height: 100%; object-fit: cover; }

/* Mesma regra do card: o quadro define a proporcao da galeria, para que a
   troca do placeholder por foto real nao mexa no layout. */
.cp-media-stack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cp-s-sm); }
.cp-media-stack > .cp-media { aspect-ratio: 4 / 5; }
@media (max-width: 640px) { .cp-media-stack { grid-template-columns: 1fr; } }

.cp-prose > * + * { margin-top: var(--cp-s-sm); }
.cp-prose p { max-width: 68ch; }

/* --------------------------------------------------------------------------
   13. Contador
   -------------------------------------------------------------------------- */

.cp-counters {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--cp-s-md);
}
@media (max-width: 767px) { .cp-counters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cp-counter { text-align: center; padding: var(--cp-s-md); }
.cp-counter__num {
	display: block;
	font-size: clamp(2.5rem, 2.1664rem + 1.8405vw, 4.375rem);
	font-weight: 700;
	line-height: 1;
	color: var(--cp-white);
	font-variant-numeric: tabular-nums;
}
.cp-counter__num sup { font-size: 0.5em; vertical-align: super; color: var(--cp-red-soft); }
.cp-counter__rotulo {
	margin-top: var(--cp-s-2xs);
	font-size: var(--cp-small);
	letter-spacing: var(--cp-ls-1);
	text-transform: uppercase;
	color: var(--cp-navy-muted);
}

/* --------------------------------------------------------------------------
   14. Cobertura
   -------------------------------------------------------------------------- */

.cp-cities { display: flex; flex-wrap: wrap; gap: var(--cp-s-2xs); }
.cp-city {
	display: inline-flex; align-items: center; gap: var(--cp-s-3xs);
	padding: var(--cp-s-2xs) var(--cp-s-sm);
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius-pill);
	font-size: var(--cp-small);
	color: var(--cp-text-soft);
	transition: var(--cp-transition-btn);
	transition-property: border-color, background-color, color;
}
.cp-city .cp-ico { width: 12px; height: 12px; fill: currentColor; flex: none; }
.cp-city:hover { border-color: var(--cp-red); color: var(--cp-red); }
.cp-city--primary {
	background-color: var(--cp-navy);
	border-color: var(--cp-navy);
	color: var(--cp-white);
	font-weight: 500;
}
.cp-city--primary:hover { background-color: var(--cp-red); border-color: var(--cp-red); color: var(--cp-white); }
.cp-city--base { border-color: var(--cp-red); color: var(--cp-red); font-weight: 500; }

.cp-surface--dark .cp-city { border-color: var(--cp-navy-line); color: var(--cp-navy-muted); }
.cp-surface--dark .cp-city--primary { background-color: var(--cp-red); border-color: var(--cp-red); color: var(--cp-white); }

/* --------------------------------------------------------------------------
   15. Accordion
   -------------------------------------------------------------------------- */

.cp-accordion { border-top: 1px solid var(--cp-border); }
.cp-surface--dark .cp-accordion,
.cp-surface--dark .cp-accordion__item { border-color: var(--cp-navy-line); }

.cp-accordion__item { border-bottom: 1px solid var(--cp-border); }
.cp-accordion__heading { margin: 0; font-size: inherit; }

.cp-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cp-s-md);
	width: 100%;
	padding: var(--cp-s-md) 0;
	text-align: start;
	font-size: var(--cp-h6);
	font-weight: 600;
	color: var(--cp-text-heading);
	transition: var(--cp-transition);
	transition-property: color;
}
.cp-accordion__trigger:hover { color: var(--cp-red); }
.cp-surface--dark .cp-accordion__trigger { color: var(--cp-white); }
.cp-surface--dark .cp-accordion__trigger:hover { color: var(--cp-red-soft); }

.cp-accordion__q { flex: 1; }

.cp-accordion__icon {
	display: grid; place-items: center;
	width: 34px; height: 34px; flex: none;
	border-radius: 50%;
	border: 1px solid var(--cp-border);
	color: var(--cp-red);
	transition: var(--cp-transition-btn);
	transition-property: transform, background-color, border-color, color;
}
.cp-accordion__icon .cp-ico { width: 12px; height: 12px; fill: currentColor; }
.cp-accordion__trigger[aria-expanded="true"] .cp-accordion__icon {
	transform: rotate(180deg);
	background-color: var(--cp-red);
	border-color: var(--cp-red);
	color: var(--cp-white);
}

.cp-accordion__panel { overflow: hidden; }
.cp-accordion__panel[hidden] { display: none; }
.cp-accordion__a { padding: 0 0 var(--cp-s-md); }
.cp-accordion__a p { max-width: 72ch; color: var(--cp-text-soft); }
.cp-surface--dark .cp-accordion__a p { color: var(--cp-navy-muted); }

/* Animacao de abertura, quando o JS mede a altura. */
.cp-accordion__panel.is-animating { transition: height 0.35s var(--cp-anim-easing); }

/* --------------------------------------------------------------------------
   16. Tabs (Color Cards)
   -------------------------------------------------------------------------- */

.cp-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cp-s-2xs);
	margin-bottom: var(--cp-s-xl);
	justify-content: center;
}

.cp-tabs__tab {
	padding: var(--cp-s-xs) var(--cp-s-md);
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius-pill);
	font-size: var(--cp-small);
	font-weight: 500;
	letter-spacing: var(--cp-ls-1);
	text-transform: uppercase;
	color: var(--cp-text-soft);
	transition: var(--cp-transition-btn);
	transition-property: background-color, border-color, color;
}
.cp-tabs__tab:hover { border-color: var(--cp-red); color: var(--cp-red); }
.cp-tabs__tab[aria-selected="true"] {
	background-color: var(--cp-navy);
	border-color: var(--cp-navy);
	color: var(--cp-white);
}

.cp-tabs__panel[hidden] { display: none; }

/* Aba de tom personalizado. O chip e um conic-gradient montado no template
   com amostras reais do design-system.json, uma por familia. */
.cp-tabs__tab--custom { border-style: dashed; }

.cp-custom {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: var(--cp-s-2xl);
	align-items: center;
	max-width: 860px;
	margin-inline: auto;
}

.cp-custom__chip {
	aspect-ratio: 1;
	border-radius: 50%;
	border: 6px solid var(--cp-white);
	box-shadow: var(--cp-shadow-funcional);
	/* O miolo branco transforma o disco em "roda de cor" com furo central. */
	-webkit-mask: radial-gradient(circle, transparent 34%, #000 35%);
	mask: radial-gradient(circle, transparent 34%, #000 35%);
	filter: blur(0.5px);
}

.cp-custom__titulo { font-size: var(--cp-h3); }
.cp-custom__texto { margin-top: var(--cp-s-sm); color: var(--cp-text-soft); }

.cp-custom__lista { display: grid; gap: var(--cp-s-xs); margin-top: var(--cp-s-md); }
.cp-custom__lista li { display: flex; align-items: center; gap: var(--cp-s-xs); color: var(--cp-text-soft); }

@media (max-width: 767px) {
	.cp-custom { grid-template-columns: 1fr; text-align: center; }
	.cp-custom__chip { width: min(240px, 70vw); margin-inline: auto; }
	.cp-custom__lista li { justify-content: center; text-align: start; }
	.cp-custom .cp-btn-group { justify-content: center; }
}

/* Amostras de cor */
.cp-swatches {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--cp-s-md);
}

.cp-swatch {
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius-1);
	overflow: hidden;
	background-color: var(--cp-white);
	transition: var(--cp-transition-btn);
	transition-property: transform, border-color;
}
.cp-swatch:hover { transform: translateY(-4px); border-color: var(--cp-border-strong); }

/* A amostra e o unico lugar do site onde uma cor vem por style inline, porque
   ela E o conteudo. Os 12 hexes moram em design-system.json, nao neste CSS. */
.cp-swatch__chip { height: 150px; }

.cp-swatch__body { padding: var(--cp-s-sm); }
.cp-swatch__nome { font-size: var(--cp-h6); font-weight: 600; color: var(--cp-text-heading); }
.cp-swatch__nota { margin-top: var(--cp-s-3xs); font-size: var(--cp-small); color: var(--cp-text-soft); }

/* --------------------------------------------------------------------------
   17. Formulario (Contact Form 7)
       Mantido da referencia: pilula, padding 18px 15px, 14px, altura 58px.
       Corrigido: borda 3:1, label visivel, anel de foco. Ver spec, secao 10.
   -------------------------------------------------------------------------- */

.cp-form { display: grid; gap: var(--cp-s-sm); }
.cp-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cp-s-sm); }
@media (max-width: 640px) { .cp-form__row { grid-template-columns: 1fr; } }

.cp-field { display: block; }
.cp-field__label {
	display: block;
	margin-bottom: var(--cp-s-3xs);
	font-size: var(--cp-small);
	font-weight: 500;
	color: var(--cp-text-heading);
}
.cp-field__req { color: var(--cp-red); }

.cp-form input[type="text"],
.cp-form input[type="email"],
.cp-form input[type="tel"],
.cp-form input[type="url"],
.cp-form select,
.cp-form textarea,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
	width: 100%;
	min-height: 58px;
	padding: 18px 20px;
	font-size: var(--cp-small);
	font-family: var(--cp-font);
	color: var(--cp-text-heading);
	background-color: var(--cp-white);
	border: 1px solid var(--cp-border-field);
	border-radius: var(--cp-radius-pill);
	transition: var(--cp-transition-btn);
	transition-property: border-color, box-shadow;
}

.cp-form textarea,
.wpcf7-form textarea {
	min-height: 130px;
	border-radius: var(--cp-radius-2);
	resize: vertical;
}

.cp-form ::placeholder,
.wpcf7-form ::placeholder { color: var(--cp-navy-muted); opacity: 1; }

.cp-form :is(input, select, textarea):focus,
.wpcf7-form :is(input, select, textarea):focus {
	border-color: var(--cp-red);
	outline: 3px solid var(--cp-focus);
	outline-offset: 2px;
}

.cp-form input[type="submit"],
.wpcf7-form input[type="submit"],
.cp-form button[type="submit"] {
	justify-self: start;
	min-height: 58px;
	padding: var(--cp-btn-padding);
	font-size: var(--cp-btn-size);
	font-weight: 500;
	letter-spacing: var(--cp-ls-2);
	text-transform: uppercase;
	color: var(--cp-white);
	background-color: var(--cp-red);
	border: 1px solid transparent;
	border-radius: var(--cp-radius-pill);
	cursor: pointer;
	transition: var(--cp-transition-btn);
	transition-property: background-color;
	width: auto;
}
.cp-form input[type="submit"]:hover,
.wpcf7-form input[type="submit"]:hover,
.cp-form button[type="submit"]:hover { background-color: var(--cp-red-hover); }

/* Mensagens do CF7. Erro e sucesso NUNCA so por cor: sempre com icone e texto. */
.wpcf7 form .wpcf7-response-output {
	margin: var(--cp-s-sm) 0 0;
	padding: var(--cp-s-xs) var(--cp-s-sm);
	border-width: 1px;
	border-style: solid;
	border-radius: var(--cp-radius-1);
	font-size: var(--cp-small);
}
.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--cp-success);
	color: var(--cp-success);
	background-color: color-mix(in srgb, var(--cp-success) 8%, transparent);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	border-color: var(--cp-error);
	color: var(--cp-error);
	background-color: color-mix(in srgb, var(--cp-error) 8%, transparent);
}
.wpcf7 form.sent .wpcf7-response-output::before { content: "\2713\00a0\00a0"; font-weight: 700; }
.wpcf7 form.invalid .wpcf7-response-output::before,
.wpcf7 form.failed .wpcf7-response-output::before,
.wpcf7 form.aborted .wpcf7-response-output::before { content: "\26a0\00a0\00a0"; font-weight: 700; }

.wpcf7-not-valid-tip {
	display: block;
	margin-top: var(--cp-s-3xs);
	font-size: var(--cp-small);
	color: var(--cp-error);
}
.wpcf7-not-valid-tip::before { content: "\26a0\00a0"; }
.wpcf7-form :is(input, select, textarea).wpcf7-not-valid { border-color: var(--cp-error); }

/* --------------------------------------------------------------------------
   18. Cartoes de contato
   -------------------------------------------------------------------------- */

.cp-contact-list { display: grid; gap: var(--cp-s-sm); }

.cp-contact-item {
	display: flex; align-items: flex-start; gap: var(--cp-s-sm);
	padding: var(--cp-s-md);
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius-1);
	transition: var(--cp-transition-btn);
	transition-property: border-color, background-color, transform;
}
a.cp-contact-item:hover { border-color: var(--cp-red); transform: translateY(-3px); }

.cp-contact-item__icon {
	display: grid; place-items: center;
	width: 44px; height: 44px; flex: none;
	border-radius: 50%;
	background-color: var(--cp-red-tint);
	color: var(--cp-red);
}
.cp-contact-item__icon .cp-ico { width: 19px; height: 19px; fill: currentColor; }
.cp-contact-item__icon .cp-ico[stroke] { fill: none; }
.cp-contact-item__rotulo { font-size: var(--cp-small); color: var(--cp-text-soft); text-transform: uppercase; letter-spacing: var(--cp-ls-1); }
.cp-contact-item__valor { font-size: var(--cp-h6); font-weight: 600; color: var(--cp-text-heading); word-break: break-word; }

/* --------------------------------------------------------------------------
   19. CTA final
   -------------------------------------------------------------------------- */

.cp-cta { position: relative; overflow: hidden; }
.cp-cta__inner { text-align: center; max-width: 760px; margin-inline: auto; }
.cp-cta h2 { color: var(--cp-white); }
.cp-cta__texto { margin-top: var(--cp-s-sm); font-size: var(--cp-body-lg); color: var(--cp-text-on-dark); }
.cp-cta__acoes { margin-top: var(--cp-s-xl); justify-content: center; }

/* --------------------------------------------------------------------------
   20. Footer
       MEDIDO: navy, padding 120px 0 0, heading fluido 16 a 23px.
   -------------------------------------------------------------------------- */

.cp-footer { background-color: var(--cp-navy); color: var(--cp-text-on-dark); padding-top: var(--cp-section-y); }

.cp-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: var(--cp-s-xl);
	padding-bottom: var(--cp-s-3xl);
}
@media (max-width: 1023px) { .cp-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cp-s-lg); } }
@media (max-width: 560px)  { .cp-footer__grid { grid-template-columns: 1fr; } }

.cp-footer__titulo {
	font-size: clamp(1rem, 0.9025rem + 0.4459vw, 1.4375rem);
	font-weight: 600;
	color: var(--cp-white);
	text-transform: capitalize;
	margin-bottom: clamp(1rem, 0.8746rem + 0.5732vw, 1.5625rem);
}

.cp-footer__list { display: grid; gap: var(--cp-s-2xs); }
.cp-footer__list a {
	display: inline-flex; align-items: center; gap: var(--cp-s-2xs);
	color: var(--cp-navy-muted);
	transition: var(--cp-transition-btn);
	transition-property: color, padding-left;
}
.cp-footer__list a:hover { color: var(--cp-red-soft); padding-left: 5px; }

.cp-footer__sobre { max-width: 42ch; }
.cp-footer__sobre p { margin-top: var(--cp-s-sm); color: var(--cp-navy-muted); font-size: var(--cp-small); }

.cp-footer__contatos { display: grid; gap: var(--cp-s-xs); margin-top: var(--cp-s-md); }
.cp-footer__contato { display: flex; align-items: flex-start; gap: var(--cp-s-2xs); color: var(--cp-navy-muted); font-size: var(--cp-small); }
.cp-footer__contato .cp-ico { width: 15px; height: 15px; flex: none; margin-top: 4px; fill: var(--cp-red-soft); }
.cp-footer__contato[data-stroke] .cp-ico { fill: none; stroke: var(--cp-red-soft); }
a.cp-footer__contato:hover { color: var(--cp-white); }

.cp-social { display: flex; gap: var(--cp-s-2xs); margin-top: var(--cp-s-md); }
.cp-social__link {
	display: grid; place-items: center;
	width: 42px; height: 42px;
	border: 1px solid var(--cp-navy-line);
	border-radius: 50%;
	color: var(--cp-navy-muted);
	transition: var(--cp-transition-btn);
	transition-property: background-color, border-color, color, transform;
}
.cp-social__link .cp-ico { width: 17px; height: 17px; fill: currentColor; }
.cp-social__link:hover { background-color: var(--cp-red); border-color: var(--cp-red); color: var(--cp-white); transform: translateY(-3px); }

.cp-footer__cobertura { padding-block: var(--cp-s-md); border-top: 1px solid var(--cp-navy-line); }
.cp-footer__cobertura p { font-size: var(--cp-small); color: var(--cp-navy-muted); }
.cp-footer__cobertura strong { color: var(--cp-white); font-weight: 500; }

.cp-footer__bottom { background-color: var(--cp-navy-deep); padding-block: var(--cp-s-sm); }
.cp-footer__bottom-inner {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: var(--cp-s-xs);
	font-size: var(--cp-small);
	color: var(--cp-navy-muted);
}

/* --------------------------------------------------------------------------
   21. Botoes flutuantes de contato: SMS e e-mail
       Substituiram o botao de WhatsApp em 28/08/2026 (decisao do usuario:
       o publico americano usa mensagem de texto). Dois circulos empilhados
       no canto inferior direito, iguais no desktop e no mobile.
   -------------------------------------------------------------------------- */

.cp-flutuantes {
	position: fixed;
	inset-inline-end: var(--cp-s-md);
	bottom: var(--cp-s-md);
	z-index: var(--cp-z-float);
	display: flex;
	flex-direction: column;
	gap: var(--cp-s-2xs);
}

.cp-flutuante {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	box-shadow: var(--cp-shadow-funcional);
	transition: var(--cp-transition-btn);
	transition-property: background-color, transform;
}
.cp-flutuante:hover { transform: translateY(-3px); }
.cp-flutuante .cp-ico { width: 24px; height: 24px; fill: currentColor; flex: none; }

/* SMS e a acao principal (vermelho); e-mail e a alternativa (navy). */
.cp-flutuante--sms { background-color: var(--cp-red); color: var(--cp-white); }
.cp-flutuante--sms:hover { background-color: var(--cp-red-hover); }
.cp-flutuante--email { background-color: var(--cp-navy); color: var(--cp-white); }
.cp-flutuante--email:hover { background-color: var(--cp-red); }

/* --------------------------------------------------------------------------
   22. Imagem e placeholder
   -------------------------------------------------------------------------- */

.cp-img { width: 100%; height: auto; }

.cp-img--placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	background-color: var(--cp-cream-deep);
	background-image: repeating-linear-gradient(
		45deg,
		transparent 0 12px,
		color-mix(in srgb, var(--cp-cream-line) 55%, transparent) 12px 24px
	);
	border: 1px solid var(--cp-cream-line);
	color: var(--cp-navy-muted);
}
.cp-img--placeholder .cp-ico { width: 42px; height: 42px; fill: none; stroke: currentColor; opacity: 0.7; }
.cp-surface--dark .cp-img--placeholder { background-color: var(--cp-navy-hover); border-color: var(--cp-navy-line); }
.cp-hero__bg .cp-img--placeholder { height: 100%; border: 0; }

/* --------------------------------------------------------------------------
   23. Aviso e nota
   -------------------------------------------------------------------------- */

.cp-note {
	padding: var(--cp-s-md);
	background-color: var(--cp-cool);
	border-inline-start: 3px solid var(--cp-red);
	border-radius: var(--cp-radius-1);
	font-size: var(--cp-small);
	color: var(--cp-text-soft);
}
.cp-surface--cream .cp-note { background-color: var(--cp-white); }

/* --------------------------------------------------------------------------
   24. Animacao de entrada
       MEDIDO: 1.25s, cubic-bezier(0.16, 1, 0.3, 1), fill both, delay 200ms.
       Divergencia deliberada: deslocamento em px, nao 100% da altura.
   -------------------------------------------------------------------------- */

/*
 * ⚠️ A animacao de entrada NAO pode alargar o documento.
 *
 * Bug medido em 28/08/2026, em 8 das 10 paginas: enquanto um bloco espera para
 * animar, ele fica parado em `translate3d(40px, 0, 0)`. Numa tela de 390px, um
 * bloco de 350px que comeca em x=20 termina em x=410, e o documento inteiro
 * passa a ter 410px de largura. O visitante consegue arrastar a pagina 20px
 * para o lado, em quase toda pagina do site. Em 768px o excesso era de 10px.
 *
 * O `overflow-x: hidden` que ja existia no `body` NAO resolvia, e vale entender
 * por que, senao alguem "conserta" de novo do mesmo jeito: a propagacao de
 * overflow do body para a viewport so acontece sob condicoes que aqui nao se
 * cumpriam. Medido: `html.scrollWidth` continuava 410 contra `clientWidth` 390.
 *
 * A correcao vai no `html`, e usa `clip`, nao `hidden`, de proposito:
 * `overflow-x: hidden` forcaria `overflow-y` a virar `auto` pela regra do CSS
 * (quando um eixo deixa de ser `visible`, o outro nao pode continuar `visible`),
 * criando um container de rolagem no elemento raiz. `clip` foi criado
 * exatamente para este caso: corta o transbordo sem criar rolagem.
 *
 * Desde 07/09/2026 o body tambem usa `clip` (secao 1): o `hidden` de la matava
 * o `position: sticky` do header e do palco. Navegador antigo que nao conheca
 * `clip` ignora as duas linhas e pode transbordar 10px na horizontal; e o preco
 * de o sticky funcionar em todos os outros.
 */
html {
	overflow-x: clip;
	/* Toda ancora (#cp-main do skip link, perguntas da FAQ, campo com erro)
	   aterrissa abaixo da faixa presa do header, e nao escondida atras dela. */
	scroll-padding-top: calc(var(--cp-header-h) - var(--cp-topbar-h));
}

/*
 * ⚠️ Aqui NAO entra `will-change`, e a ausencia e proposital.
 *
 * A versao anterior declarava `will-change: opacity, transform` em todo
 * `[data-cp-anim]`, e nunca removia. Como a classe `.cp-in` so troca opacity e
 * transform, a dica continuava valendo depois da animacao terminar. Resultado
 * medido: 25 a 32 elementos por pagina mantendo uma camada de composicao
 * PERMANENTE, cada uma podendo carregar uma imagem grande.
 *
 * `will-change` nao e "modo turbo": e uma reserva de memoria de video. Em
 * excesso ela faz o contrario do que promete, e o sintoma tipico e exatamente
 * rolagem que engasga ou trava em paginas com muita imagem.
 *
 * Nao faz falta: opacity e transform ja sao propriedades que o compositor
 * anima sem ajuda, e a transicao continua suave sem a dica.
 */
[data-cp-anim] {
	opacity: 0;
}
[data-cp-anim="up"]    { transform: translate3d(0, 40px, 0); }
[data-cp-anim="left"]  { transform: translate3d(-40px, 0, 0); }
[data-cp-anim="right"] { transform: translate3d(40px, 0, 0); }

[data-cp-anim].cp-in {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition:
		opacity var(--cp-anim-duration) var(--cp-anim-easing) var(--cp-anim-delay, 0ms),
		transform var(--cp-anim-duration) var(--cp-anim-easing) var(--cp-anim-delay, 0ms);
}

/* Sem JavaScript, nada fica invisivel. */
.no-js [data-cp-anim] { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   25. Alvo de toque em telas com dedo

   O design-system fixa 44px de altura minima para botao. A mesma regra vale
   para o link de texto quando o ponteiro e grosseiro: um link de 20px de altura
   no rodape e frustrante de acertar no celular, e a maior parte do trafego
   local vem de celular.

   Aplicado por (pointer: coarse), nao por largura de tela, porque o que decide
   e o dispositivo apontador e nao o tamanho da janela.
   -------------------------------------------------------------------------- */

@media (pointer: coarse) {
	.cp-footer__list a,
	.cp-footer__contato,
	.cp-topbar__item,
	.cp-link,
	.cp-crumbs a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	/* O item da lista do rodape passa a ocupar a linha inteira, para a area
	   clicavel acompanhar o texto em vez de parar nele. */
	.cp-footer__list a { width: 100%; }

	.cp-social__link { width: 46px; height: 46px; }
}

/* --------------------------------------------------------------------------
   26. prefers-reduced-motion
       A referencia nao respeita. Nos respeitamos.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	[data-cp-anim] { opacity: 1 !important; transform: none !important; }
	.cp-card__resumo, .cp-card__acao { opacity: 1 !important; transform: none !important; }
	.cp-card:hover .cp-card__media img { transform: none; }
}

/* --------------------------------------------------------------------------
   26. Impressao
   -------------------------------------------------------------------------- */

@media print {
	.cp-header, .cp-footer, .cp-flutuantes, .cp-cta, .cp-burger { display: none !important; }
	body { color: var(--cp-navy); }
	[data-cp-anim] { opacity: 1 !important; transform: none !important; }
	.cp-accordion__panel[hidden] { display: block !important; }
}

/* ==========================================================================
   HOME ROUND 2 (28/08/2026)
   Reconstrucao da home na estrutura da referencia.
   Medidas: clone/specs/home-round2/SPEC-HOME-ROUND2.md
   ========================================================================== */

/* --------------------------------------------------------------------------
   27. Hero central com imagem-pilula no titulo
   -------------------------------------------------------------------------- */

.cp-hero--center { min-height: min(92vh, 800px); }

.cp-hero__inner--center {
	max-width: 900px;
	margin-inline: auto;
	text-align: center;
}
.cp-hero__inner--center .cp-hero__texto { margin-inline: auto; }
.cp-hero__acoes--center { justify-content: center; }

/* Veu uniforme para o layout central, no lugar do gradiente lateral. */
.cp-hero--center .cp-hero__bg::after {
	background: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--cp-navy) 48%, transparent) 0%,
		color-mix(in srgb, var(--cp-navy) 34%, transparent) 55%,
		color-mix(in srgb, var(--cp-navy) 58%, transparent) 100%
	);
}

/* A imagem-pilula embutida no H1. MEDIDO: 130x60 num titulo de 70px,
   ou seja, a altura e ~0.86em e o raio e pilula completa. */
.cp-hero__pill {
	display: inline-block;
	height: 0.84em;
	width: auto;
	border-radius: var(--cp-radius-pill);
	vertical-align: middle;
	margin-inline: 0.1em;
	transform: translateY(-0.06em);
}

/* --------------------------------------------------------------------------
   28. Cabecalho de secao em tres colunas (eyebrow+H2 | texto | botao)
   -------------------------------------------------------------------------- */

.cp-section__head--trio {
	max-width: none;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) auto;
	gap: var(--cp-s-xl);
	align-items: center;
}
.cp-section__head-texto { color: var(--cp-text-soft); }
.cp-surface--dark .cp-section__head-texto { color: var(--cp-text-on-dark); }
.cp-section__head-acao { justify-self: end; }

@media (max-width: 1023px) {
	.cp-section__head--trio { grid-template-columns: 1fr; gap: var(--cp-s-md); }
	.cp-section__head-acao { justify-self: start; }
}

/* --------------------------------------------------------------------------
   29. Palavra destacada com letras que giram de baixo (splitFlipUp)
       MEDIDO: perspective(600px) rotateX(-90deg) translateY(40px),
       0.65s cubic-bezier(0.19, 1, 0.22, 1), +0.06s por letra.
   -------------------------------------------------------------------------- */

.cp-hl { color: var(--cp-red); }
.cp-surface--dark .cp-hl { color: var(--cp-red-soft); }

.cp-hl__w { display: inline-block; white-space: nowrap; }
.cp-hl__l { display: inline-block; }

/* O estado escondido so existe DENTRO de um bloco animavel. Fora dele, e sem
   JavaScript, nenhuma letra fica invisivel. */
[data-cp-anim] .cp-hl__l {
	opacity: 0;
	transform: perspective(600px) rotateX(-90deg) translateY(40px);
	transform-origin: center bottom;
}
[data-cp-anim].cp-in .cp-hl__l {
	animation: cpSplitFlipUp 0.65s cubic-bezier(0.19, 1, 0.22, 1) forwards;
	animation-delay: var(--cp-split-delay, 0.16s);
}
.no-js .cp-hl__l { opacity: 1 !important; transform: none !important; }

@keyframes cpSplitFlipUp {
	to { opacity: 1; transform: perspective(600px) rotateX(0deg) translateY(0); }
}

/* --------------------------------------------------------------------------
   30. Card de servico type-2
       REPOUSO: imagem + titulo com seta ABAIXO.
       HOVER: veu sobe, conteudo entra sobre a imagem girando de -30px/3deg
       (delays 0.16s e 0.24s) e a fila de baixo desliza para fora.
   -------------------------------------------------------------------------- */

.cp-cards--servicos { gap: var(--cp-s-md); }

.cp-card2 {
	display: flex;
	flex-direction: column;
	height: clamp(26rem, 21.5rem + 14vw, 33rem);
	overflow: hidden;
	isolation: isolate;
}

.cp-card2__media {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	border-radius: var(--cp-radius-1);
}
.cp-card2__media .cp-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--cp-anim-easing);
}
.cp-card2__media .cp-img--placeholder { height: 100%; }
.cp-card2:hover .cp-card2__media .cp-img,
.cp-card2:focus-visible .cp-card2__media .cp-img { transform: scale(1.05); }

.cp-card2__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		to bottom,
		transparent 40%,
		color-mix(in srgb, var(--cp-navy) 78%, transparent) 80%
	);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	transition: var(--cp-transition-btn);
	transition-property: opacity, background-size;
	opacity: 0;
}
.cp-card2:hover .cp-card2__media::after,
.cp-card2:focus-visible .cp-card2__media::after {
	opacity: 1;
	background-size: 100% 120%;
}

.cp-card2__hover {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: clamp(20px, 2.2vw, 40px);
}
.cp-card2__hover .cp-card2__row,
.cp-card2__hover .cp-card2__desc {
	opacity: 0;
	transform: translateY(-30px) rotate(3deg);
	backface-visibility: hidden;
	transition: var(--cp-transition-btn);
	transition-property: opacity, transform;
}
.cp-card2:hover .cp-card2__hover .cp-card2__desc,
.cp-card2:focus-visible .cp-card2__hover .cp-card2__desc {
	opacity: 1;
	transform: none;
	transition-delay: 0.16s;
}
.cp-card2:hover .cp-card2__hover .cp-card2__row,
.cp-card2:focus-visible .cp-card2__hover .cp-card2__row {
	opacity: 1;
	transform: none;
	transition-delay: 0.24s;
}

.cp-card2__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cp-s-md);
}
.cp-card2__hover .cp-card2__titulo { color: var(--cp-white); }
.cp-card2__titulo { font-size: var(--cp-h5); font-weight: 600; color: var(--cp-text-heading); }
.cp-card2__desc { margin-top: var(--cp-s-xs); font-size: var(--cp-small); color: var(--cp-text-on-dark); }

.cp-card2__seta {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 50%;
	background-color: var(--cp-navy);
	color: var(--cp-white);
	transition: var(--cp-transition-btn);
	transition-property: background-color, color;
}
.cp-card2__seta .cp-ico { width: 13px; height: 13px; fill: currentColor; }
.cp-card2__hover .cp-card2__seta { background-color: var(--cp-red); }
.cp-card2:hover .cp-card2__detail .cp-card2__seta { background-color: var(--cp-red); }

.cp-card2__detail {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cp-s-md);
	padding: var(--cp-s-sm) 2px var(--cp-s-2xs);
	transition: margin-bottom 0.3s ease, opacity 0.25s ease;
}
.cp-card2:hover .cp-card2__detail,
.cp-card2:focus-visible .cp-card2__detail {
	margin-bottom: -130px;
	opacity: 0;
}

/* Toque: sem hover, o card mostra so a fila de baixo e navega no tap. */
@media (hover: none) {
	.cp-card2__hover { display: none; }
	.cp-card2:hover .cp-card2__detail { margin-bottom: 0; opacity: 1; }
}

/* --------------------------------------------------------------------------
   31. Who We Are: titulo gigante, historia, contadores e cartao de reviews
       MEDIDO: linha 1 [390px | 1fr | 390px], linha 2 [1fr | 520px].
   -------------------------------------------------------------------------- */

.cp-who__top {
	display: grid;
	grid-template-columns: minmax(0, 390px) minmax(0, 1fr) minmax(0, 390px);
	gap: var(--cp-s-2xl);
	align-items: center;
}

.cp-who__media { border-radius: var(--cp-radius-1); overflow: hidden; }
.cp-who__media .cp-img { width: 100%; height: auto; }

.cp-who__titulo {
	font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
	font-weight: 600;
	text-align: end;
	text-wrap: balance;
}

.cp-who__story-titulo { font-size: var(--cp-h5); margin-top: var(--cp-s-3xs); }
.cp-who__story-texto { margin-top: var(--cp-s-sm); font-size: var(--cp-small); color: var(--cp-text-soft); }

.cp-who__bottom {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
	gap: var(--cp-s-2xl);
	align-items: center;
	margin-top: var(--cp-s-3xl);
}

.cp-who__counters {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--cp-s-md);
}
.cp-who__counter { text-align: start; }
.cp-who__num {
	display: block;
	font-size: clamp(2.4rem, 2rem + 2vw, 3.8rem);
	font-weight: 600;
	line-height: 1.1;
	color: var(--cp-text-heading);
	font-variant-numeric: tabular-nums;
}
.cp-who__num sup { font-size: 0.55em; color: var(--cp-red); }
.cp-who__rotulo {
	display: block;
	margin-top: var(--cp-s-2xs);
	font-size: var(--cp-small);
	letter-spacing: var(--cp-ls-1);
	text-transform: uppercase;
	color: var(--cp-text-soft);
}

.cp-who__reviews {
	background-color: var(--cp-navy);
	border-radius: var(--cp-radius-1);
	padding: clamp(var(--cp-s-lg), 3vw, var(--cp-s-xl));
}
.cp-who__reviews-titulo { color: var(--cp-white); font-size: var(--cp-h4); }
.cp-who__reviews-texto { margin-top: var(--cp-s-xs); font-size: var(--cp-small); }
.cp-who__reviews-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cp-s-sm) var(--cp-s-md);
	margin-top: var(--cp-s-md);
}
.cp-who__avatares { width: 185px; height: auto; }

/* Nota em estrelas. O amarelo vem do token --cp-star (design-system.json),
   exclusivo das estrelas de avaliacao; nao usar em nenhum outro componente. */
.cp-who__nota { display: inline-flex; flex-direction: column; gap: var(--cp-s-3xs); }
.cp-who__estrelas { display: inline-flex; gap: 3px; color: var(--cp-star); }
.cp-who__estrelas .cp-ico { width: 19px; height: 19px; fill: currentColor; }
.cp-who__nota-texto { font-size: var(--cp-small); color: var(--cp-navy-muted); }

@media (max-width: 1023px) {
	.cp-who__top { grid-template-columns: 1fr; gap: var(--cp-s-lg); }
	.cp-who__titulo { text-align: start; }
	.cp-who__media { max-width: 480px; }
	.cp-who__bottom { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.cp-who__counters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cp-s-lg) var(--cp-s-md); }
}

/* --------------------------------------------------------------------------
   32. Carrossel de reviews do Google
   -------------------------------------------------------------------------- */

.cp-reviews__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * var(--cp-s-md)) / 3);
	gap: var(--cp-s-md);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 4px 4px var(--cp-s-sm);
	scrollbar-width: none;
}
.cp-reviews__track::-webkit-scrollbar { display: none; }

.cp-review {
	display: flex;
	flex-direction: column;
	gap: var(--cp-s-md);
	scroll-snap-align: start;
	background-color: var(--cp-white);
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius-1);
	padding: var(--cp-s-lg);
}
.cp-review__texto::before {
	content: "\201C";
	display: block;
	font-size: 3rem;
	font-weight: 700;
	line-height: 0.6;
	margin-bottom: var(--cp-s-xs);
	color: var(--cp-red);
}
.cp-review__texto p { font-size: var(--cp-small); color: var(--cp-text-soft); }

.cp-review__autor { display: flex; align-items: center; gap: var(--cp-s-sm); margin-top: auto; }
.cp-review__avatar {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	flex: none;
	border-radius: 50%;
	background-color: var(--cp-red-tint);
	color: var(--cp-red);
	font-weight: 600;
	font-size: var(--cp-small);
}
.cp-review__nome { display: block; color: var(--cp-text-heading); }
.cp-review__servico { display: block; font-size: var(--cp-small); color: var(--cp-text-soft); }

.cp-reviews__nav { display: flex; justify-content: center; gap: var(--cp-s-xs); margin-top: var(--cp-s-md); }
.cp-reviews__seta {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--cp-border-strong);
	border-radius: 50%;
	color: var(--cp-text-heading);
	transition: var(--cp-transition-btn);
	transition-property: background-color, border-color, color;
}
.cp-reviews__seta .cp-ico { width: 13px; height: 13px; fill: currentColor; }
.cp-reviews__seta:hover { background-color: var(--cp-red); border-color: var(--cp-red); color: var(--cp-white); }
.cp-ico--flip { transform: scaleX(-1); }

@media (max-width: 1023px) {
	.cp-reviews__track { grid-auto-columns: calc((100% - var(--cp-s-md)) / 2); }
}
@media (max-width: 640px) {
	.cp-reviews__track { grid-auto-columns: 88%; }
}

/* --------------------------------------------------------------------------
   33. Showcase interativo full-bleed
       MEDIDO: 800px, paineis com backdrop-filter blur(10px); o ativo zera o
       blur, ganha moldura interna de 10px e revela o conteudo (0.5s).
       Fundo em crossfade 0.25s linear, scale(1.1) -> scale(1).
   -------------------------------------------------------------------------- */

.cp-showcase { position: relative; height: 800px; overflow: hidden; background-color: var(--cp-navy); }

.cp-showcase__bgs { position: absolute; inset: 0; }
.cp-showcase__bg {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: scale(1.1);
	transition: opacity 0.25s linear, transform 0.25s linear;
}
.cp-showcase__bg .cp-img { width: 100%; height: 100%; object-fit: cover; }
.cp-showcase__bg.is-active { opacity: 1; transform: none; }

.cp-showcase__list {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	height: 100%;
}

.cp-showcase__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	cursor: pointer;
	border-right: 1px solid color-mix(in srgb, var(--cp-white) 25%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: var(--cp-transition-btn);
	transition-property: backdrop-filter, box-shadow, -webkit-backdrop-filter;
}
.cp-showcase__panel:last-child { border-right: 0; }
.cp-showcase__panel.is-active {
	-webkit-backdrop-filter: blur(0);
	backdrop-filter: blur(0);
	box-shadow: inset 0 0 0 10px var(--cp-red);
}

.cp-showcase__panel-img { display: none; }

.cp-showcase__content {
	position: relative;
	padding: clamp(25px, 2.8vw, 50px);
	color: var(--cp-white);
	transition: background-color 0.375s cubic-bezier(0.7, 0, 0.3, 1);
}
.cp-showcase__panel.is-active .cp-showcase__content { background-color: var(--cp-navy); }

.cp-showcase__titulo {
	font-size: clamp(1.35rem, 1.2rem + 0.8vw, 1.75rem);
	font-weight: 600;
	color: var(--cp-white);
	text-shadow: 0 1px 12px color-mix(in srgb, var(--cp-navy) 65%, transparent);
}
.cp-showcase__panel.is-active .cp-showcase__titulo { text-shadow: none; }

.cp-showcase__reveal {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.5s var(--cp-anim-easing), opacity 0.375s ease;
}
.cp-showcase__panel.is-active .cp-showcase__reveal {
	max-height: 320px;
	opacity: 1;
	transition-delay: 0s, 0.1s;
}
.cp-showcase__texto {
	margin: var(--cp-s-sm) 0 var(--cp-s-md);
	font-size: var(--cp-small);
	color: var(--cp-text-on-dark);
}

/* Ate 1023px o showcase vira trilho horizontal com snap, cada painel com a
   propria imagem, como a referencia faz no mobile (1 slide por tela). */
@media (max-width: 1023px) {
	.cp-showcase { height: auto; }
	.cp-showcase__bgs { display: none; }

	.cp-showcase__list {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.cp-showcase__list::-webkit-scrollbar { display: none; }

	.cp-showcase__panel {
		flex: 0 0 72%;
		scroll-snap-align: start;
		height: 600px;
		border-right: 0;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.cp-showcase__panel.is-active { box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

	.cp-showcase__panel-img { display: block; position: absolute; inset: 0; }
	.cp-showcase__panel-img .cp-img { width: 100%; height: 100%; object-fit: cover; }

	.cp-showcase__content {
		background: linear-gradient(
			to top,
			color-mix(in srgb, var(--cp-navy) 88%, transparent) 55%,
			transparent 100%
		);
	}
	.cp-showcase__panel.is-active .cp-showcase__content { background-color: transparent; }
	.cp-showcase__reveal { max-height: none; opacity: 1; }
}
@media (max-width: 640px) {
	.cp-showcase__panel { flex-basis: 88%; }
}

/* --------------------------------------------------------------------------
   34. Cards de familia de cor
       MEDIDO: swatch portrait com foto emoldurada inset 20px, scale(0.52)
       origem canto inferior direito, borda 3px branca; hover scale(1) com
       brilho diagonal.
   -------------------------------------------------------------------------- */

.cp-colorgrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--cp-s-xl) var(--cp-s-md);
}
.cp-colorgrid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: 1020px;
	margin-inline: auto;
}

.cp-colorcard__swatch {
	position: relative;
	display: block;
	aspect-ratio: 299 / 388;
	overflow: hidden;
	border-radius: var(--cp-radius-1);
	isolation: isolate;
}
.cp-colorcard__chip { position: absolute; inset: 0; }
.cp-colorcard__chip--img .cp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cp-colorcard__chip--img .cp-img--placeholder { height: 100%; }

.cp-colorcard__inset {
	position: absolute;
	inset: 20px;
	z-index: 1;
	display: block;
	overflow: hidden;
	border: 3px solid var(--cp-white);
	box-shadow: var(--cp-shadow-funcional);
	transform: scale(0.52);
	transform-origin: right bottom;
	transition: transform 0.375s cubic-bezier(0.7, 0, 0.3, 1);
}
.cp-colorcard__inset .cp-img { width: 100%; height: 100%; object-fit: cover; }

/* Brilho diagonal que varre a foto quando ela cresce. */
.cp-colorcard__inset::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 100%;
	width: 60%;
	height: 220%;
	background: color-mix(in srgb, var(--cp-white) 28%, transparent);
	transform: rotate(25deg);
	transition: top 0.7s ease, left 0.7s ease, opacity 0.15s ease;
	opacity: 0;
	pointer-events: none;
}

.cp-colorcard:hover .cp-colorcard__inset,
.cp-colorcard:focus-within .cp-colorcard__inset { transform: scale(1); }
.cp-colorcard:hover .cp-colorcard__inset::before,
.cp-colorcard:focus-within .cp-colorcard__inset::before { top: -40%; left: -40%; opacity: 1; }

.cp-colorcard__body { padding: var(--cp-s-sm) 2px 0; }
.cp-colorcard__nome { font-size: var(--cp-h5); font-weight: 600; color: var(--cp-text-heading); }
.cp-colorcard__dots { display: flex; gap: var(--cp-s-2xs); margin-top: var(--cp-s-2xs); }
.cp-colorcard__dot {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--cp-navy) 18%, transparent);
}
.cp-colorcard__nota { margin-top: var(--cp-s-2xs); font-size: var(--cp-small); color: var(--cp-text-soft); }
.cp-colorcard__body .cp-link { margin-top: var(--cp-s-xs); font-size: var(--cp-small); }

@media (max-width: 1023px) {
	.cp-colorgrid, .cp-colorgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.cp-colorgrid, .cp-colorgrid--3 { grid-template-columns: 1fr; }
	.cp-colorcard__swatch { aspect-ratio: 4 / 3.4; }
}

/* --------------------------------------------------------------------------
   35. Colagem do How We Work, com pontilhado em parallax de mouse
       MEDIDO: 620x440 + 470x400 emoldurada sobreposta + dotted 253x246
       (mouse-move invertido, profundidade 1).
   -------------------------------------------------------------------------- */

.cp-collage {
	position: relative;
	max-width: 660px;
	padding: 0 var(--cp-s-2xl) var(--cp-s-4xl) 0;
}

.cp-collage__dots {
	position: absolute;
	left: 4%;
	bottom: var(--cp-s-lg);
	z-index: 0;
	opacity: 0.9;
}

.cp-collage__main {
	position: relative;
	z-index: 1;
	overflow: hidden;
	border-radius: var(--cp-radius-1);
}

.cp-collage__over {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 2;
	width: min(66%, 470px);
	border: 10px solid var(--cp-white);
	box-shadow: var(--cp-shadow-funcional);
	background-color: var(--cp-white);
}
.cp-collage__over .cp-img { display: block; }

@media (max-width: 900px) {
	.cp-collage { padding-bottom: var(--cp-s-3xl); }
}

/* --------------------------------------------------------------------------
   36. Galeria de inspiracao em masonry sobre navy
       MEDIDO: grid de 4 colunas com colunas pares deslocadas para baixo,
       fotos portrait, respingo decorativo no canto superior direito.
   -------------------------------------------------------------------------- */

.cp-galeria { overflow: hidden; }

.cp-galeria__deco {
	position: absolute;
	top: -70px;
	right: -60px;
	width: 480px;
	height: 480px;
	background-color: color-mix(in srgb, var(--cp-white) 7%, transparent);
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 6c7 0 10 6 11 11 1 4 7 2 11 6 4 4 1 9 6 13 5 3 11 2 13 8 2 5-3 9-3 15 0 5 5 8 3 14-2 5-8 5-12 9-4 3-3 8-8 10-6 2-9-3-15-3s-9 5-15 3c-5-2-4-7-8-10-4-4-10-4-12-9-2-6 3-9 3-14 0-6-5-10-3-15 2-6 8-5 13-8 5-4 2-9 6-13 4-4 10-2 11-6 1-5 4-11 12-11z"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 6c7 0 10 6 11 11 1 4 7 2 11 6 4 4 1 9 6 13 5 3 11 2 13 8 2 5-3 9-3 15 0 5 5 8 3 14-2 5-8 5-12 9-4 3-3 8-8 10-6 2-9-3-15-3s-9 5-15 3c-5-2-4-7-8-10-4-4-10-4-12-9-2-6 3-9 3-14 0-6-5-10-3-15 2-6 8-5 13-8 5-4 2-9 6-13 4-4 10-2 11-6 1-5 4-11 12-11z"/></svg>') center / contain no-repeat;
}

.cp-galeria__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--cp-s-lg) var(--cp-s-md);
	align-items: start;
	margin-top: var(--cp-s-xl);
}

.cp-galeria__item {
	position: relative;
	overflow: hidden;
	border-radius: var(--cp-radius-1);
	margin: 0;
}
.cp-galeria__item .cp-img { transition: transform 0.6s var(--cp-anim-easing); }
.cp-galeria__item:hover .cp-img { transform: scale(1.05); }

.cp-galeria__tag {
	position: absolute;
	left: var(--cp-s-xs);
	bottom: var(--cp-s-xs);
	padding: 6px 14px;
	border-radius: var(--cp-radius-pill);
	background-color: color-mix(in srgb, var(--cp-navy) 82%, transparent);
	color: var(--cp-white);
	font-size: var(--cp-small);
	opacity: 0;
	transform: translateY(8px);
	transition: var(--cp-transition-btn);
	transition-property: opacity, transform;
}
.cp-galeria__item:hover .cp-galeria__tag { opacity: 1; transform: none; }
@media (hover: none) {
	.cp-galeria__tag { opacity: 1; transform: none; }
}

@media (min-width: 1024px) {
	.cp-galeria__item:nth-child(4n + 2),
	.cp-galeria__item:nth-child(4n + 4) { margin-top: var(--cp-s-2xl); }
}
@media (max-width: 1023px) {
	.cp-galeria__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cp-galeria__item:nth-child(2n) { margin-top: var(--cp-s-lg); }
}
@media (max-width: 560px) {
	.cp-galeria__grid { grid-template-columns: 1fr; }
	.cp-galeria__item:nth-child(2n) { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   37. Cobertura com foto do pintor (layout aproveitado da secao de parceiros
       da referencia; o conteudo de logos de marca NAO entra, por regra)
   -------------------------------------------------------------------------- */

.cp-cobertura2__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	gap: var(--cp-s-3xl);
	align-items: center;
}
.cp-cobertura2__media { border-radius: var(--cp-radius-2); overflow: hidden; }
.cp-cobertura2__media .cp-img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
	.cp-cobertura2__grid { grid-template-columns: 1fr; gap: var(--cp-s-xl); }
}

/* --------------------------------------------------------------------------
   37b. Ticker de obras reais
        Marquee full-bleed com fotos dos projetos do proprio cliente.
        Altura fixa por faixa, largura de cada foto segue a proporcao natural.
   -------------------------------------------------------------------------- */

.cp-ticker { overflow: hidden; }
.cp-ticker__strip { overflow: hidden; margin-top: var(--cp-s-xl); }

.cp-ticker__track {
	display: flex;
	width: max-content;
	animation: cpMarquee 70s linear infinite;
}
.cp-ticker__strip:hover .cp-ticker__track { animation-play-state: paused; }

.cp-ticker__run { display: flex; gap: var(--cp-s-2xs); padding-inline-end: var(--cp-s-2xs); }

.cp-ticker__item {
	flex: none;
	height: clamp(200px, 24vw, 320px);
	margin: 0;
	overflow: hidden;
	border-radius: var(--cp-radius-1);
}
.cp-ticker__item img {
	height: 100%;
	width: auto;
	display: block;
	object-fit: cover;
	transition: transform 0.6s var(--cp-anim-easing);
}
.cp-ticker__item:hover img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
	.cp-ticker__track { animation: none !important; }
}

/* --------------------------------------------------------------------------
   38. Footer novo: faixa de fotos em marquee, mapa e grid
   -------------------------------------------------------------------------- */

.cp-footer { padding-top: 0; }
.cp-footer > .cp-container { padding-top: var(--cp-s-3xl); }

.cp-footer__strip { overflow: hidden; }
.cp-footer__strip-track {
	display: flex;
	width: max-content;
	animation: cpMarquee 45s linear infinite;
}
.cp-footer__strip:hover .cp-footer__strip-track,
.cp-footer__strip:focus-within .cp-footer__strip-track { animation-play-state: paused; }
.cp-footer__strip-run { display: flex; }

.cp-footer__strip-item {
	position: relative;
	display: block;
	width: clamp(140px, 15vw, 210px);
	aspect-ratio: 1;
	flex: none;
}
.cp-footer__strip-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-footer__strip-icone {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background-color: color-mix(in srgb, var(--cp-navy) 55%, transparent);
	color: var(--cp-white);
	opacity: 0;
	transition: var(--cp-transition-btn);
	transition-property: opacity;
}
.cp-footer__strip-icone .cp-ico { width: 28px; height: 28px; fill: currentColor; }
.cp-footer__strip-item:hover .cp-footer__strip-icone,
.cp-footer__strip-item:focus-visible .cp-footer__strip-icone { opacity: 1; }

@keyframes cpMarquee {
	to { transform: translateX(-50%); }
}

.cp-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: var(--cp-s-2xl);
	align-items: center;
	padding-bottom: var(--cp-s-2xl);
	margin-bottom: var(--cp-s-2xl);
	border-bottom: 1px solid var(--cp-navy-line);
}

.cp-footer__mapa-iframe {
	display: block;
	width: 100%;
	height: 240px;
	border: 0;
	border-radius: var(--cp-radius-1);
	filter: grayscale(1) contrast(0.95);
}
/* Sobre o navy do footer o vermelho da marca da 2.55:1 e reprova. Vale a
   mesma regra do resto do tema: em fundo escuro o acento e o red-soft. */
.cp-footer .cp-link { color: var(--cp-red-soft); }
.cp-footer .cp-link:hover { color: var(--cp-white); }
.cp-footer__mapa-link { margin-top: var(--cp-s-xs); font-size: var(--cp-small); }

@media (max-width: 1023px) {
	.cp-footer__top { grid-template-columns: 1fr; gap: var(--cp-s-lg); }
}

/* --------------------------------------------------------------------------
   39. Movimento reduzido e impressao para os blocos novos
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.cp-hl__l { opacity: 1 !important; transform: none !important; animation: none !important; }
	.cp-footer__strip-track { animation: none !important; }
	.cp-card2__hover .cp-card2__row,
	.cp-card2__hover .cp-card2__desc,
	.cp-card2__acao { opacity: 1; transform: none; }
	/* O veu vem junto: texto branco sobre foto sem veu nao se le. */
	.cp-card2__media::after { opacity: 1; background-size: 100% 120%; }
	.cp-showcase__bg { transform: none; }
	.cp-collage__dots { transform: none !important; }
}


/* ==========================================================================
   HOME 2 (05/09/2026)
   Home cinematografica controlada pelo scroll, com a oferta multisservico.
   Spec: docs/superpowers/specs/2026-09-05-home-2-cinematica-design.md
   Motor: assets/js/home-2.js. Marcacao: partials/cine.php (home final e /home-2/).
   ========================================================================== */

/* --------------------------------------------------------------------------
   30. Palco
       O conteiner tem (N + cauda) x runway + 100vh de altura e o palco fica sticky.
       O JS le a runway pela diferenca entre os dois; o CSS decide o valor.
   -------------------------------------------------------------------------- */

/* O `overflow-x: clip` que o palco sticky exige esta no body, secao 1, para o
   site inteiro (medido em 05/09/2026, generalizado em 07/09). */

.cp-cine {
	/* Rolagem por cena. Cada cena toca os 144 frames em 42% disso; o resto sao as
	   pausas no "antes" e no "depois" e as costuras. Pedido do usuario em
	   05/09/2026: pausas longas, para dar tempo de ver a transformacao.
	   06/09/2026: dobrada junto com os frames (12 para 24 fps), para cada frame
	   seguir com cerca de 10 px de scroll. Mais frames dao suavidade; mais runway
	   da tempo. Os dois sobem juntos. */
	--cp-cine-runway: 400vh;
	/* Cauda: rolagem extra no fim, em fracao de runway, com a casa final parada
	   e o CTA na tela. O JS le este valor.
	   Encurtada duas vezes em 10/09/2026, a pedido do usuario: era 0.75, e como
	   os frames da ultima cena paravam 0.20 antes do fim dela, a espera parada
	   dava (0.20 + 0.75) x runway, quase quatro telas de rolagem morta. Na segunda
	   rodada a ultima cena passou a tocar ate 0.08 do fim e a cauda caiu para
	   0.05. Na terceira, o pedido foi "uma travadinha, um clique de roda e
	   solta": a cauda foi a ZERO e o JS segura so 0.03 de cena (HOLD_FIM_ULT),
	   cerca de 110px no desktop e 90px no celular. */
	--cp-cine-tail: 0;
	/* Opacidade de partida do veu navy da CENA 1. O JS le este valor e o leva ate
	   1 nos primeiros 45% da cena. Aqui e 1, ou seja, o veu ja nasce fechado e o
	   fade nao acontece: no desktop o veu da cena 1 e lateral e deixa metade da
	   tela limpa, entao nao ha o que revelar. Quem abre isso e o celular. */
	--cp-scrim-ini: 1;
	--cp-cine-n: 6; /* reserva; o JS grava o valor real pelo CSSOM */
	position: relative;
	height: calc((var(--cp-cine-n) + var(--cp-cine-tail)) * var(--cp-cine-runway) + 100vh);
	background-color: var(--cp-navy);
	color: var(--cp-white);
}

.cp-cine__stage {
	position: sticky;
	top: 0;
	/* 100vh de proposito, e nao svh/dvh: no iOS o 100vh e a viewport grande e
	   fica estavel quando a barra recolhe. svh deixaria uma faixa navy embaixo ao
	   rolar, e dvh redimensionaria o canvas a cada recolhida. Os textos de base
	   ficam a 11vh ou mais do fundo, acima da barra quando ela esta visivel. */
	height: 100vh;
	overflow: hidden;
	background-color: var(--cp-navy);
}

.cp-cine__poster,
.cp-cine__canvas,
.cp-cine__scenes,
.cp-cine__scene,
.cp-cine__still,
.cp-cine__scrim { position: absolute; inset: 0; }

.cp-cine__poster img,
.cp-cine__still img { width: 100%; height: 100%; object-fit: cover; }
.cp-cine__canvas { width: 100%; height: 100%; }

/* A imagem estatica so existe no modo sem movimento. Sem caixa, o lazy nao baixa. */
.cp-cine__still { display: none; }

/* Excecao: a foto de reserva, que so e emitida quando os frames NAO estao no
   servidor (partials/cine.php). Ali ela nao e alternativa ao canvas, e o unico
   fundo que a cena tem, entao aparece sempre.
   O `height: 100%` nao e redundante: `.cp-img` traz `height: auto`, que vence o
   `inset: 0` e faz a foto parar na altura natural, deixando faixa de fundo
   navy embaixo (medido em 09/09/2026, cena 1 com 900px e foto com 716). */
.cp-cine__still--reserva {
	display: block;
	width: 100%;
	height: 100%;
}
.cp-cine__still--reserva img { width: 100%; height: 100%; object-fit: cover; }

/* Veu permanente no topo, para a logo branca e o menu lerem sobre ceu claro. */
.cp-cine__stage::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 240px;
	background: linear-gradient(to bottom, color-mix(in srgb, var(--cp-navy) 62%, transparent), transparent);
	pointer-events: none;
	z-index: 1;
}

.cp-cine__scenes { z-index: 1; }

/* .cp-cine--motion e o gancho que o JS liga ao assumir o palco. Hoje nenhuma
   regra depende dele: o sticky e o padrao para nao haver salto de layout no
   carregamento, e o estatico e a excecao. Fica reservado. */

/* Cada cena e uma camada. O JS controla a opacidade do article (saida em bloco)
   e a opacidade e o transform de cada filho de .cp-cine__copy e do veu (entrada
   escalonada); o CSS, a posicao. */
.cp-cine__scene {
	opacity: 0;
	pointer-events: none;
}
.cp-cine__scene:first-child { opacity: 1; }
.cp-cine__scene.is-visible .cp-cine__copy { pointer-events: auto; }

/* Veus por layout. Existem para o texto, entao fazem parte da cena e somem com ela. */
.cp-cine__scene--left .cp-cine__scrim {
	background: linear-gradient(90deg,
		color-mix(in srgb, var(--cp-navy) 74%, transparent) 0%,
		color-mix(in srgb, var(--cp-navy) 46%, transparent) 36%,
		transparent 66%);
}
.cp-cine__scene--right .cp-cine__scrim {
	background: linear-gradient(270deg,
		color-mix(in srgb, var(--cp-navy) 74%, transparent) 0%,
		color-mix(in srgb, var(--cp-navy) 46%, transparent) 36%,
		transparent 66%);
}
.cp-cine__scene--center .cp-cine__scrim {
	background: radial-gradient(ellipse 72% 62% at 50% 50%,
		color-mix(in srgb, var(--cp-navy) 62%, transparent) 0%,
		color-mix(in srgb, var(--cp-navy) 30%, transparent) 60%,
		transparent 100%);
}
.cp-cine__scene--bottom .cp-cine__scrim {
	background: linear-gradient(to top,
		color-mix(in srgb, var(--cp-navy) 84%, transparent) 0%,
		color-mix(in srgb, var(--cp-navy) 48%, transparent) 34%,
		transparent 64%);
}

/* O texto */
.cp-cine__copy {
	position: absolute;
	max-width: 640px;
	padding-inline: var(--cp-gutter);
}
.cp-cine__scene--left .cp-cine__copy {
	left: max(0px, calc((100% - var(--cp-container)) / 2));
	top: 50%;
	transform: translateY(-46%);
}
.cp-cine__scene--right .cp-cine__copy {
	right: max(0px, calc((100% - var(--cp-container)) / 2));
	top: 50%;
	transform: translateY(-46%);
}
.cp-cine__scene--center .cp-cine__copy {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -46%);
	max-width: 820px;
	text-align: center;
}
.cp-cine__scene--bottom .cp-cine__copy {
	left: 50%;
	bottom: 13vh;
	transform: translateX(-50%);
	max-width: 820px;
	text-align: center;
}
.cp-cine__scene--center .cp-eyebrow,
.cp-cine__scene--bottom .cp-eyebrow { justify-content: center; }
.cp-cine__scene--center .cp-cine__text,
.cp-cine__scene--bottom .cp-cine__text { margin-inline: auto; }
.cp-cine__scene--center .cp-cine__acoes,
.cp-cine__scene--bottom .cp-cine__acoes { justify-content: center; }

.cp-cine__eyebrow { color: var(--cp-red-soft); }

.cp-cine__title {
	color: var(--cp-white);
	font-size: var(--cp-h1);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: 0;
	text-wrap: balance;
}
.cp-cine__title-main { display: block; }
.cp-cine__title-kw {
	display: block;
	margin-top: var(--cp-s-xs);
	font-size: var(--cp-h5);
	font-weight: 500;
	color: var(--cp-red-soft);
	letter-spacing: var(--cp-ls-1);
}
.cp-cine__text {
	margin-top: var(--cp-s-md);
	font-size: var(--cp-body-lg);
	color: var(--cp-text-on-dark);
	max-width: 52ch;
}
.cp-cine__acoes { margin-top: var(--cp-s-xl); }
/* Dentro da cena o botao segue o scroll como as outras linhas: sem a transicao
   "all" do .cp-btn em opacity e transform, que o atrasaria 375 ms e o deixaria
   se mexendo depois de o scroll parar. Hover continua animado. */
.cp-cine__acoes .cp-btn { transition-property: background-color, color, border-color; }

/* Header durante a historia: navy translucido com a logo branca, so enquanto o
   palco esta preso (o JS liga body.cp-cine-on). Abaixo do palco, header branco
   normal. Especificidade (0,3,1), acima de `body .cp-header.cp-header--stuck`,
   que e (0,2,1): um elemento e duas classes. */
body.cp-cine-on .cp-header.cp-header--stuck {
	/* Reserva solida antes do color-mix: sem ela um navegador antigo ficaria com
	   o header branco do estado fixo e a logo branca em cima. */
	background-color: var(--cp-navy);
	background-color: color-mix(in srgb, var(--cp-navy) 86%, transparent);
	/* Sem backdrop-filter, de proposito (07/09/2026): filtro no header cria
	   containing block para o menu mobile, que e position: fixed dentro dele,
	   e ainda custa caro sobre um canvas redesenhado a cada scroll. */
	box-shadow: none;
	border-bottom-color: color-mix(in srgb, var(--cp-white) 10%, transparent);
}
body.cp-cine-on .cp-header--stuck .cp-logo__img--clara { opacity: 1; }
body.cp-cine-on .cp-header--stuck .cp-logo__img--colorida { opacity: 0; }
body.cp-cine-on .cp-header--stuck .cp-logo__text { color: var(--cp-white); }
body.cp-cine-on .cp-header--stuck .cp-logo__text span { color: var(--cp-red-soft); }
body.cp-cine-on .cp-header--stuck .cp-nav__link { color: var(--cp-white); }
body.cp-cine-on .cp-header--stuck .cp-nav__text::before,
body.cp-cine-on .cp-header--stuck .cp-nav__item.is-current > .cp-nav__link { color: var(--cp-red-soft); }
body.cp-cine-on .cp-header--stuck .cp-burger { color: var(--cp-white); }

/* Trilho de capitulos */
.cp-cine__rail {
	position: absolute;
	right: max(var(--cp-s-md), calc((100% - var(--cp-container-wide)) / 2));
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 0; /* o espaco entre pontos ja esta dentro de cada botao */
	z-index: 2;
}
/*
 * O botao E o alvo de toque (28px, acima dos 24px minimos da WCAG 2.5.8) e o
 * ponto visivel e o ::before. Antes o botao media 10px e o ::before crescia a
 * area clicavel, mas o Lighthouse mede a caixa do botao: 07/09/2026, target-size
 * reprovado no celular. A caixa maior nao muda o desenho.
 */
.cp-cine__dot {
	position: relative;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: transparent;
	border-radius: var(--cp-radius-pill);
	transition: var(--cp-transition-btn);
	transition-property: height;
}
.cp-cine__dot::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: var(--cp-radius-pill);
	background-color: color-mix(in srgb, var(--cp-white) 42%, transparent);
	transition: var(--cp-transition-btn);
	transition-property: height, background-color;
}
.cp-cine__dot:hover::before,
.cp-cine__dot:focus-visible::before,
.cp-cine__dot.is-active::before { background-color: var(--cp-white); }
.cp-cine__dot.is-active { height: 40px; }
.cp-cine__dot.is-active::before { height: 30px; }
.cp-cine__dot-label {
	position: absolute;
	right: calc(100% + 14px);
	top: 50%;
	transform: translateY(-50%);
	white-space: nowrap;
	font-size: var(--cp-small);
	font-weight: 500;
	letter-spacing: var(--cp-ls-2);
	text-transform: uppercase;
	color: var(--cp-white);
	opacity: 0;
	transition: opacity 0.25s;
	pointer-events: none;
}
.cp-cine__dot:hover .cp-cine__dot-label,
.cp-cine__dot:focus-visible .cp-cine__dot-label,
.cp-cine__dot.is-active .cp-cine__dot-label { opacity: 1; }

/* Dica de scroll, so no comeco da cena 1 (o JS controla a opacidade). */
.cp-cine__cue {
	position: absolute;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--cp-s-2xs);
	font-size: var(--cp-small);
	letter-spacing: var(--cp-ls-2);
	text-transform: uppercase;
	color: color-mix(in srgb, var(--cp-white) 82%, transparent);
	z-index: 2;
	pointer-events: none;
	white-space: nowrap;
}
.cp-cine__cue-line {
	display: block;
	width: 1px;
	height: 34px;
	background: linear-gradient(to bottom, var(--cp-white), transparent);
	transform-origin: top;
	animation: cpCueDrop 1.9s var(--cp-anim-easing) infinite;
}
@keyframes cpCueDrop {
	0%   { transform: scaleY(0); opacity: 0; }
	35%  { transform: scaleY(1); opacity: 1; }
	100% { transform: scaleY(1) translateY(10px); opacity: 0; }
}

/* Indicador de carregamento, discreto, canto inferior esquerdo. */
.cp-cine__loader {
	position: absolute;
	left: max(var(--cp-gutter), calc((100% - var(--cp-container)) / 2 + var(--cp-gutter)));
	bottom: 30px;
	display: flex;
	align-items: center;
	gap: var(--cp-s-xs);
	font-size: var(--cp-small);
	letter-spacing: var(--cp-ls-1);
	color: color-mix(in srgb, var(--cp-white) 80%, transparent);
	z-index: 3;
	pointer-events: none;
	transition: opacity 0.5s;
}
.cp-cine__loader.is-done { opacity: 0; }
.cp-cine__loader-bar {
	display: block;
	width: 120px;
	height: 2px;
	background-color: color-mix(in srgb, var(--cp-white) 22%, transparent);
	overflow: hidden;
}
.cp-cine__loader-bar > span {
	display: block;
	height: 100%;
	background-color: var(--cp-white);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s linear;
}

/* Modo estatico: sem JS, movimento reduzido, economia de dados ou sem frames.
   Seis blocos empilhados, cada um com a imagem do estado "depois" e o texto. */
.no-js .cp-cine,
.cp-cine--static { height: auto; }

:is(.no-js .cp-cine, .cp-cine--static) .cp-cine__stage {
	position: static;
	height: auto;
	overflow: visible;
}
:is(.no-js .cp-cine, .cp-cine--static) .cp-cine__stage::before,
:is(.no-js .cp-cine, .cp-cine--static) :is(.cp-cine__canvas, .cp-cine__poster, .cp-cine__rail, .cp-cine__cue, .cp-cine__loader) { display: none; }
:is(.no-js .cp-cine, .cp-cine--static) .cp-cine__scenes { position: static; }
:is(.no-js .cp-cine, .cp-cine--static) .cp-cine__scene {
	position: relative;
	inset: auto;
	min-height: 82vh;
	display: flex;
	align-items: center;
	/* Sem !important: no estatico o JS sai antes de escrever qualquer style.
	   transform: none e cinto de seguranca; o JS ja nao escreve transform no article. */
	opacity: 1;
	transform: none;
	pointer-events: auto;
}
:is(.no-js .cp-cine, .cp-cine--static) .cp-cine__scene:first-child { min-height: 100vh; padding-top: calc(var(--cp-header-h) + 2px); }
:is(.no-js .cp-cine, .cp-cine--static) .cp-cine__still { display: block; }
/* No estatico o texto fica sempre no conteiner, entao o veu deixa de seguir o
   layout da cena e vira uniforme, com peso maior atras do texto. */
:is(.no-js .cp-cine, .cp-cine--static) .cp-cine__scene .cp-cine__scrim {
	background: linear-gradient(to top,
		color-mix(in srgb, var(--cp-navy) 70%, transparent) 0%,
		color-mix(in srgb, var(--cp-navy) 52%, transparent) 55%,
		color-mix(in srgb, var(--cp-navy) 36%, transparent) 100%);
}
:is(.no-js .cp-cine, .cp-cine--static) .cp-cine__copy {
	position: relative;
	inset: auto;
	transform: none;
	width: 100%;
	max-width: var(--cp-container);
	margin-inline: auto;
	padding-block: var(--cp-s-4xl);
	pointer-events: auto;
}

@media (max-width: 1023px) {
	.cp-cine__scene--left .cp-cine__copy,
	.cp-cine__scene--right .cp-cine__copy { max-width: 560px; }
	.cp-cine__rail { right: var(--cp-s-sm); }
}

@media (max-width: 767px) {
	/* Cauda zero tambem aqui: o unico respiro depois do ultimo frame e o
	   HOLD_FIM_ULT do JS, cerca de 90px, um gesto curto (10/09/2026). */
	.cp-cine { --cp-cine-runway: 360vh; --cp-cine-tail: 0; }

	/* O veu da CENA 1 nasce quase aberto e fecha no scroll (10/09/2026, pedido
	   do usuario). No desktop a cena 1 usa veu lateral e o video aparece na
	   metade direita; no celular o veu e parelho e, cheio de saida, tapava a
	   primeira dobra inteira. O JS interpola daqui ate 1. */
	.cp-cine { --cp-scrim-ini: 0.32; }
	/* Com o veu aberto a primeira dobra vira texto branco sobre foto: medido,
	   o contraste caia para 2,2 para 1. Entao o bloco de texto ganha veu
	   PROPRIO, uma vinheta navy que morre antes das bordas. E a mesma ideia do
	   desktop, onde a cena 1 escurece so a coluna da esquerda e deixa o video
	   limpo na direita; aqui a foto aparece em cima e embaixo. Quando o veu
	   grande fecha, esta vinheta some de vista: e o mesmo navy. */
	.cp-cine__scene:first-child .cp-cine__copy {
		padding-block: var(--cp-s-2xl);
		background: radial-gradient(125% 62% at 50% 50%,
			color-mix(in srgb, var(--cp-navy) 54%, transparent) 0%,
			color-mix(in srgb, var(--cp-navy) 44%, transparent) 52%,
			transparent 100%);
		text-shadow: 0 1px 16px color-mix(in srgb, var(--cp-navy) 82%, transparent);
	}

	/* No celular o texto fica no CENTRO vertical da tela (10/09/2026, pedido do
	   usuario: colado na base ficava ruim de ler, e a dica de rolagem e os
	   botoes flutuantes disputavam o mesmo canto). O veu deixou de vir so de
	   baixo: com o texto no meio ele precisa ser mais parelho, senao a linha do
	   topo do titulo cai sobre a parte clara da foto. */
	.cp-cine__scene .cp-cine__copy {
		left: 0;
		right: 0;
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
		max-width: none;
		padding-inline: 20px;
		text-align: left;
	}
	.cp-cine__scene .cp-cine__scrim {
		background: linear-gradient(to top,
			color-mix(in srgb, var(--cp-navy) 82%, transparent) 0%,
			color-mix(in srgb, var(--cp-navy) 76%, transparent) 30%,
			color-mix(in srgb, var(--cp-navy) 74%, transparent) 66%,
			color-mix(in srgb, var(--cp-navy) 46%, transparent) 100%);
	}
	.cp-cine__scene .cp-eyebrow,
	.cp-cine__scene .cp-cine__acoes { justify-content: flex-start; }
	.cp-cine__scene .cp-cine__text { margin-inline: 0; font-size: var(--cp-body); }
	.cp-cine__title { line-height: 1.12; }
	.cp-cine__title-kw { font-size: var(--cp-body); }
	.cp-cine__acoes { margin-top: var(--cp-s-lg); }

	.cp-cine__rail { right: 0; }
	.cp-cine__dot { width: 24px; height: 24px; }
	.cp-cine__dot::before { width: 8px; height: 8px; }
	.cp-cine__dot.is-active { height: 32px; }
	.cp-cine__dot.is-active::before { height: 22px; }
	/* O nome do capitulo continua na arvore de acessibilidade (e o nome do
	   botao). `display: none` o tirava de la: button-name reprovado em 07/09. */
	.cp-cine__dot-label { width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

	/* A dica sai do centro para nao colidir com os botoes flutuantes da direita. */
	.cp-cine__cue { left: 20px; bottom: 14px; transform: none; align-items: flex-start; font-size: 0.75rem; }
	.cp-cine__cue-line { height: 22px; margin-left: 2px; }
	.cp-cine__loader { left: 20px; bottom: 16px; }

	:is(.no-js .cp-cine, .cp-cine--static) .cp-cine__scene { min-height: 70vh; }
	/* No estatico a cena empilha e o proprio flex ja centraliza: aqui o
	   top/transform da regra acima so deslocaria o bloco meia tela para baixo. */
	:is(.no-js .cp-cine, .cp-cine--static) .cp-cine__copy {
		padding-block: var(--cp-s-3xl);
		top: auto;
		bottom: auto;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   31. Oferta ampliada: 9 servicos em grade quieta, agrupados por familia
   -------------------------------------------------------------------------- */

.cp-offer__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--cp-s-2xl) var(--cp-s-2xl);
}
.cp-offer__card {
	display: flex;
	flex-direction: column;
	gap: var(--cp-s-xs);
	height: 100%;
	padding-top: var(--cp-s-md);
	border-top: 1px solid var(--cp-border-strong);
	transition: var(--cp-transition-btn);
	transition-property: border-color;
}
.cp-offer__card:hover,
.cp-offer__card:focus-visible { border-top-color: var(--cp-red); }
.cp-offer__group {
	font-size: var(--cp-small);
	font-weight: 500;
	letter-spacing: var(--cp-ls-2);
	text-transform: uppercase;
	color: var(--cp-text-soft);
}
.cp-offer__title {
	font-size: var(--cp-h4);
	transition: color 0.3s;
}
.cp-offer__card:hover .cp-offer__title { color: var(--cp-red); }
.cp-offer__text { flex: 1; color: var(--cp-text); }
.cp-offer__link {
	display: inline-flex;
	align-items: center;
	gap: var(--cp-s-2xs);
	margin-top: var(--cp-s-2xs);
	font-size: var(--cp-small);
	font-weight: 500;
	letter-spacing: var(--cp-ls-1);
	text-transform: uppercase;
	color: var(--cp-navy);
}
.cp-offer__link .cp-ico {
	width: 10px;
	height: 10px;
	fill: currentColor;
	transition: transform var(--cp-transition-btn);
}
.cp-offer__card:hover .cp-offer__link .cp-ico { transform: translateX(4px); }

@media (max-width: 1023px) {
	.cp-offer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cp-s-xl); }
}
@media (max-width: 599px) {
	.cp-offer__grid { grid-template-columns: 1fr; gap: var(--cp-s-lg); }
}

/* --------------------------------------------------------------------------
   32. Por que MetroWest nos chama: tese e os 4 diferenciais do briefing
   -------------------------------------------------------------------------- */

.cp-why__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: var(--cp-s-3xl);
	align-items: start;
}
.cp-why__texto {
	margin-top: var(--cp-s-md);
	font-size: var(--cp-body-lg);
	max-width: 46ch;
}
.cp-why__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--cp-s-xl) var(--cp-s-2xl);
	margin: 0;
}
/* .cp-why__item (a barra vermelha e o dt) mora na secao 41: a home final
   depende dela e este bloco de preview pode ser apagado. */

@media (max-width: 1023px) {
	.cp-why__grid { grid-template-columns: 1fr; gap: var(--cp-s-xl); }
}
@media (max-width: 599px) {
	.cp-why__list { grid-template-columns: 1fr; gap: var(--cp-s-lg); }
}

/* --------------------------------------------------------------------------
   33. Tres reviews reais, sobre navy
   -------------------------------------------------------------------------- */

.cp-quotes__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--cp-s-2xl);
}
.cp-quote {
	display: flex;
	flex-direction: column;
	gap: var(--cp-s-md);
	padding-top: var(--cp-s-md);
	border-top: 1px solid var(--cp-navy-line);
}
.cp-quote__texto { flex: 1; }
.cp-quote__texto p {
	font-size: var(--cp-body-lg);
	color: var(--cp-white);
}
.cp-quote__texto p::before { content: "\201C"; color: var(--cp-red-soft); margin-right: 2px; }
.cp-quote__texto p::after { content: "\201D"; color: var(--cp-red-soft); margin-left: 2px; }
.cp-quote__autor {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: var(--cp-small);
	color: var(--cp-text-on-dark);
}
.cp-quote__autor strong { color: var(--cp-white); }

@media (max-width: 1023px) {
	.cp-quotes__grid { grid-template-columns: 1fr; gap: var(--cp-s-lg); }
}

/* --------------------------------------------------------------------------
   34. Cobertura
   -------------------------------------------------------------------------- */

.cp-area__inner { max-width: 860px; }
.cp-area__cities { margin-top: var(--cp-s-xl); }

/* ==========================================================================
   HOME FINAL (07/09/2026)
   As secoes novas ou remodeladas da front-page.php: cards quadrados dos 9
   servicos, diferenciais no lugar dos contadores, respiro do how we work, CTA
   com formulario. So var(--cp-*) e color-mix().
   ========================================================================== */

/* --------------------------------------------------------------------------
   40. Cards quadrados dos 9 servicos
       O card type-2 da Home 1, com a imagem em 1:1 para nove caberem em tres
       linhas. No toque (sem hover) e em tela estreita o texto fica SEMPRE
       visivel: a camada do hover vira o estado de repouso e a fila de baixo sai
       da tela, mas nao da arvore de acessibilidade (e o nome do link).
   -------------------------------------------------------------------------- */

.cp-card2--quadrado { height: auto; }
.cp-card2--quadrado .cp-card2__media {
	flex: none;
	aspect-ratio: 1 / 1;
	min-height: 0;
}
/* A camada do hover nunca pode vazar do card: corta e limita o paragrafo. */
.cp-card2--quadrado .cp-card2__hover {
	overflow: hidden;
	padding: clamp(16px, 2vw, 28px);
}
.cp-card2--quadrado .cp-card2__desc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
.cp-card2__acao {
	display: block;
	margin-top: var(--cp-s-xs);
	font-size: var(--cp-small);
	font-weight: 500;
	letter-spacing: var(--cp-ls-1);
	text-transform: uppercase;
	color: var(--cp-red-soft);
	opacity: 0;
	transform: translateY(-30px) rotate(3deg);
	transition: var(--cp-transition-btn);
	transition-property: opacity, transform;
}
.cp-card2:hover .cp-card2__acao,
.cp-card2:focus-visible .cp-card2__acao {
	opacity: 1;
	transform: none;
	transition-delay: 0.1s;
}

@media (max-width: 640px) {
	.cp-card2--quadrado .cp-card2__media { aspect-ratio: 4 / 3; }
}

@media (hover: none), (max-width: 767px) {
	.cp-card2--quadrado .cp-card2__hover { display: flex; }
	.cp-card2--quadrado .cp-card2__media::after { opacity: 1; background-size: 100% 120%; }
	.cp-card2--quadrado .cp-card2__hover .cp-card2__row,
	.cp-card2--quadrado .cp-card2__hover .cp-card2__desc,
	.cp-card2--quadrado .cp-card2__acao {
		opacity: 1;
		transform: none;
		transition: none;
	}
	/* Fora da tela, dentro da arvore: e o <h3> que da nome ao link. */
	.cp-card2--quadrado .cp-card2__detail {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

/* --------------------------------------------------------------------------
   41. Our story: os 4 diferenciais no lugar dos contadores
   -------------------------------------------------------------------------- */

.cp-who__why {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--cp-s-lg) var(--cp-s-xl);
	margin: 0;
}
.cp-who__why dd { font-size: var(--cp-small); color: var(--cp-text-soft); }
@media (max-width: 640px) {
	.cp-who__why { grid-template-columns: 1fr; gap: var(--cp-s-md); }
}
/* Cada diferencial: barra vermelha e titulo. Tambem usada pela Home 2 (preview). */
.cp-why__item {
	padding-left: var(--cp-s-md);
	border-left: 2px solid var(--cp-red);
}
.cp-why__item dt {
	font-size: var(--cp-h5);
	font-weight: 600;
	color: var(--cp-text-heading);
}
.cp-why__item dd { margin-top: var(--cp-s-2xs); }

/* --------------------------------------------------------------------------
   42. How we work: respiro entre o titulo e as etapas, e entre as etapas
       (o titulo estava colado no conteudo)
   -------------------------------------------------------------------------- */

.cp-processo {
	display: grid;
	gap: var(--cp-s-lg);
	margin-top: var(--cp-s-xl);
}

/* Cobertura da home: as cidades ganham o mesmo respiro que tinham inline. */
.cp-cities--spaced { margin-top: var(--cp-s-xl); }

/* --------------------------------------------------------------------------
   43. CTA final com formulario (so na home)
       Copy e canais diretos de um lado, o formulario do CF7 do outro, num
       cartao branco para os campos do tema (secao 17) valerem sem retoque.
   -------------------------------------------------------------------------- */

.cp-cta--form .cp-cta__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: var(--cp-s-2xl);
	align-items: start;
}
.cp-cta__copy { max-width: 46ch; }
.cp-cta__canais {
	display: grid;
	gap: var(--cp-s-xs);
	margin: var(--cp-s-xl) 0 0;
	padding: 0;
	list-style: none;
}
.cp-cta__canal {
	display: inline-flex;
	align-items: center;
	gap: var(--cp-s-2xs);
	color: var(--cp-text-on-dark);
	transition: var(--cp-transition-btn);
	transition-property: color;
}
.cp-cta__canal .cp-ico { width: 16px; height: 16px; flex: none; fill: var(--cp-red-soft); }
.cp-cta__canal[data-stroke] .cp-ico { fill: none; stroke: var(--cp-red-soft); }
a.cp-cta__canal:hover { color: var(--cp-white); }

.cp-cta__form {
	background-color: var(--cp-white);
	color: var(--cp-text);
	border-radius: var(--cp-radius-1);
	padding: clamp(var(--cp-s-lg), 3vw, var(--cp-s-xl));
	box-shadow: var(--cp-shadow-funcional);
}
/* O cartao e branco dentro de uma superficie escura: as regras de
   .cp-surface--dark (h3 branco, p claro, link red-soft) precisam ser vencidas
   com duas classes, senao o titulo some no branco (medido no celular). */
.cp-cta--form .cp-cta__form .cp-cta__form-titulo { font-size: var(--cp-h4); color: var(--cp-text-heading); }
.cp-cta--form .cp-cta__form p { color: var(--cp-text-soft); }
.cp-cta--form .cp-cta__form .cp-cta__form-texto { margin-top: var(--cp-s-2xs); font-size: var(--cp-small); }
.cp-cta--form .cp-cta__form a:not(.cp-btn) { color: var(--cp-red); }
.cp-cta__form .wpcf7,
.cp-cta__form > .cp-note { margin-top: var(--cp-s-md); }

/* Quando o CF7 leva o foco ao primeiro campo invalido, o header preso nao
   pode cobri-lo: folga igual a faixa principal mais um respiro. */
/* O header preso ja esta descontado pelo scroll-padding-top do html. */
.cp-field { scroll-margin-top: 24px; }

@media (max-width: 1023px) {
	.cp-cta--form .cp-cta__grid { grid-template-columns: 1fr; gap: var(--cp-s-xl); }
	.cp-cta__copy { max-width: none; }
}

/* 44. (removida em 08/09/2026: a bandeira decorativa do rodape saiu a pedido do usuario) */

/* --------------------------------------------------------------------------
   45. Modulo 11, fase 2: grade de 2 cards centrada e card do hub
       .cp-cards--dois: cada card com a largura que teria numa grade de 3,
       para os grupos de 2 e de 3 alinharem entre secoes (hub) e para as 2
       irmas da spoke nao virarem dois cards de 640px.
   -------------------------------------------------------------------------- */

/* Usada junto de .cp-cards--2 (secao 11), que ja faz "2 colunas, 1 no celular".
   Aqui so o que e desta classe: no desktop, a largura de dois cards de uma
   grade de 3 mais o gap entre eles, centrada. */
@media (min-width: 1024px) {
	.cp-cards--dois {
		max-width: calc((200% - var(--cp-s-md)) / 3);
		margin-inline: auto;
	}
}

/* Card do hub (partials/card-hub.php): foto quadrada, texto sempre visivel,
   link descritivo no pe. O <article> estica para os links dos 3 cards de um
   grupo ficarem na mesma linha de base. */
.cp-hubcard {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.cp-hubcard__media {
	display: block;
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--cp-radius-1);
	isolation: isolate;
}
.cp-hubcard__media .cp-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--cp-anim-easing);
}
.cp-hubcard__media .cp-img--placeholder { height: 100%; }
.cp-hubcard:hover .cp-hubcard__media .cp-img { transform: scale(1.05); }

.cp-hubcard__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--cp-s-sm);
	padding-top: var(--cp-s-md);
}
.cp-hubcard__titulo { font-size: var(--cp-h5); font-weight: 600; color: var(--cp-text-heading); }
.cp-hubcard__texto { font-size: var(--cp-small); color: var(--cp-text-soft); }
.cp-hubcard__lista { margin: 0; padding: 0; list-style: none; }
/* Os chips de sub-servico nao sao links: sem o hover vermelho de .cp-city. */
.cp-hubcard__lista .cp-city:hover { border-color: var(--cp-border); color: var(--cp-text-soft); }
.cp-hubcard__link { margin-top: auto; align-self: flex-start; }
.cp-hubcard:hover .cp-hubcard__link { color: var(--cp-red-hover); gap: var(--cp-s-xs); }

@media (max-width: 640px) {
	.cp-hubcard__media { aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------------------------
   46. Carrossel de obras reais dentro da faixa escura da spoke (10/09/2026)

   Trilho de scroll-snap nativo, igual ao dos reviews: sem JavaScript ele
   continua arrastavel e navegavel pelo teclado, e as setas so poupam o arrasto.
   Quadro 3:4 (pedido do usuario em 10/09/2026); o que vem em outra proporcao
   e recortado pelo aplica-obras-reais.py e, por seguranca, pelo object-fit.
   -------------------------------------------------------------------------- */

.cp-obras {
	margin-top: var(--cp-s-4xl);
	padding-top: var(--cp-s-2xl);
	border-top: 1px solid color-mix(in srgb, var(--cp-white) 16%, transparent);
}
.cp-obras__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--cp-s-md);
	margin-bottom: var(--cp-s-xl);
}
.cp-obras__titulo { font-size: var(--cp-h4); font-weight: 600; color: var(--cp-white); }
.cp-obras__lead { margin-top: var(--cp-s-2xs); font-size: var(--cp-small); color: var(--cp-text-on-dark); }

.cp-obras__nav { display: flex; gap: var(--cp-s-xs); flex-shrink: 0; }
.cp-obras__seta {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 1px solid color-mix(in srgb, var(--cp-white) 32%, transparent);
	border-radius: 50%;
	color: var(--cp-white);
	transition: var(--cp-transition-btn);
	transition-property: background-color, border-color, color;
}
.cp-obras__seta .cp-ico { width: 13px; height: 13px; fill: currentColor; }
.cp-obras__seta:hover { background-color: var(--cp-red); border-color: var(--cp-red); }

.cp-obras__track {
	display: grid;
	grid-auto-flow: column;
	/* 4 por tela no desktop, 3 no tablet, 1 no celular (pedido do usuario em
	   10/09/2026). O quadro e 3:4 e o object-fit corta o que vier fora disso. */
	grid-auto-columns: calc((100% - 3 * var(--cp-s-sm)) / 4);
	gap: var(--cp-s-sm);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 4px;
	scrollbar-width: none;
	/* O trilho e focavel: o anel precisa aparecer, e sem ele o teclado fica cego. */
	outline-offset: 4px;
}
.cp-obras__track::-webkit-scrollbar { display: none; }

.cp-obras__item {
	scroll-snap-align: start;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--cp-radius-2);
	background-color: color-mix(in srgb, var(--cp-white) 8%, transparent);
}
.cp-obras__item .cp-img, .cp-obras__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}
.cp-obras__item:hover img { transform: scale(1.04); }

@media (max-width: 1023px) {
	.cp-obras__track { grid-auto-columns: calc((100% - 2 * var(--cp-s-sm)) / 3); }
}
@media (max-width: 767px) {
	.cp-obras { margin-top: var(--cp-s-2xl); }
	.cp-obras__track { grid-auto-columns: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.cp-obras__track { scroll-behavior: auto; }
	.cp-obras__item img, .cp-obras__item:hover img { transition: none; transform: none; }
}