/* =========================================================================
   Página: CA 360 (/produtos/ca-360)
   Design aprovado "CA 360" (design system Nocturne, tema escuro), com a
   paleta da marca CA® — a mesma do CA Preview.
   Asset standalone (fora do bundle webpack). Classes prefixadas com ca3-
   para não colidir com o Bootstrap global do tema.
   ========================================================================= */

body.ca360-body {
	background: #161826 !important;
	margin: 0;
}

#page-ca-360 {
	--ca3-bg: #161826;
	--ca3-surface: #232532;
	--ca3-text: #e9e9ed;
	--ca3-muted: #b8bacb;
	--ca3-muted-2: #9da0b4;
	--ca3-muted-3: #82859b;
	--ca3-accent: #9936f2;
	--ca3-accent-200: #e7defe;
	--ca3-accent-300: #dcbcfe;
	--ca3-accent-400: #c48cfb;
	--ca3-accent-700: #5d2894;
	--ca3-accent-800: #42206a;
	--ca3-accent-900: #2b1741;
	--ca3-neutral-800: #3f424d;
	--ca3-section: #2f0a50;
	--ca3-section-glow: #43107a;
	--ca3-line: rgba(233, 233, 237, 0.10);
	--ca3-line-2: rgba(233, 233, 237, 0.16);
	--ca3-font: "Inter", system-ui, sans-serif;
	/* respiro entre um título/intro e o bloco de conteúdo que ele apresenta */
	--ca3-gap-block: clamp(40px, 4.4cqw, 56px);

	background: var(--ca3-bg);
	color: var(--ca3-text);
	font-family: var(--ca3-font);
	font-size: 15px;
	line-height: 1.55;
	overflow: hidden;
	container-type: inline-size;
	-webkit-font-smoothing: antialiased;
}

#page-ca-360 h1,
#page-ca-360 h2,
#page-ca-360 h3 {
	font-family: var(--ca3-font);
	font-weight: 500;
	color: var(--ca3-text);
}

#page-ca-360 sup { font-size: 0.55em; position: relative; top: -0.6em; line-height: 0; }
#page-ca-360 a { text-decoration: none; }
#page-ca-360 img { max-width: 100%; height: auto; display: block; }
#page-ca-360 ul,
#page-ca-360 ol { list-style: none; margin: 0; padding: 0; }
#page-ca-360 dl,
#page-ca-360 dd { margin: 0; }

/* O bundle global do tema (comparison.scss) declara `figure` sem escopo com
   position:absolute; width:100%; height:74% — feito para os sliders de
   antes/depois de outras páginas, mas vaza para o site inteiro. */
#page-ca-360 figure {
	position: static;
	width: auto;
	height: auto;
	font-size: inherit;
	background: none;
	margin: 0;
}

.ca3-wrap { max-width: 1120px; margin: 0 auto; }

/* ------------------------------------------------------------- Tipografia */
.ca3-kicker {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ca3-accent);
	margin: 0;
}
.ca3-kicker--light { color: var(--ca3-accent-300); }
.ca3-kicker--sm { font-size: 10px; letter-spacing: 0.12em; color: var(--ca3-accent-300); }
.ca3-kicker--xs { font-size: 9px; letter-spacing: 0.1em; color: var(--ca3-accent-300); }
.ca3-kicker--muted { color: var(--ca3-muted-3); }

#page-ca-360 section h2 {
	font-size: clamp(26px, 3.2cqw, 38px);
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 16px 0 0;
	text-wrap: pretty;
}
#page-ca-360 section h2 span { color: var(--ca3-accent); }
#page-ca-360 .ca3-problema h2 span,
#page-ca-360 .ca3-compara h2 span,
#page-ca-360 .ca3-form h2 span { color: var(--ca3-accent-300); }
.ca3-h2--sm { font-size: clamp(24px, 2.9cqw, 34px) !important; }

.ca3-section-lead { font-size: clamp(14px, 1.2cqw, 16px); color: var(--ca3-muted-2); margin: 14px 0 0; }

#page-ca-360 section[id],
#page-ca-360 div[id] { scroll-margin-top: 160px; }

.ca3-rule { border: 0; height: 1px; background: var(--ca3-line); margin: 22px 0; }
.ca3-rule--tight { margin: 10px 0; }
.ca3-rule--fade { background: linear-gradient(90deg, transparent, rgba(233, 233, 237, 0.28) 12%, rgba(233, 233, 237, 0.28) 88%, transparent); margin: 26px 0; }

/* ---------------------------------------------------------------- Botões */
.ca3-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	cursor: pointer;
	font-family: var(--ca3-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 1;
	padding: 13px 20px;
	border-radius: 8px;
	border: 1px solid transparent;
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
	text-align: center;
}
.ca3-btn--lg { padding: 15px 24px; font-size: 15px; }
.ca3-btn--primary { background: var(--ca3-accent); color: #fff; }
.ca3-btn--primary:hover,
.ca3-btn--primary:focus { background: #8a2ade; color: #fff; }
.ca3-btn--secondary { background: transparent; color: var(--ca3-text); border-color: var(--ca3-line-2); }
.ca3-btn--secondary:hover,
.ca3-btn--secondary:focus { background: rgba(233, 233, 237, 0.06); color: var(--ca3-text); border-color: rgba(233, 233, 237, 0.3); }

/* ---------------------------------------------------------------- Marca */
.ca3-brand { display: flex; align-items: center; gap: 11px; margin: 0 0 18px; font-size: clamp(16px, 1.4cqw, 19px); font-weight: 500; letter-spacing: -0.01em; }
.ca3-brand__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: none;
	border-radius: 8px;
	background: var(--ca3-accent-700);
	color: var(--ca3-accent-200);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.04em;
}
.ca3-brand__mark--sm { width: 26px; height: 26px; border-radius: 6px; font-size: 12px; background: var(--ca3-accent-800); }

.ca3-tag {
	display: inline-block;
	padding: 7px 14px;
	border-radius: 6px;
	background: var(--ca3-accent-900);
	border: 1px solid var(--ca3-accent-800);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ca3-accent-300);
}

/* ------------------------------------------------------------------ Hero */
.ca3-hero { padding: clamp(150px, calc(14vh + 70px), 220px) clamp(18px, 4.5cqw, 56px) clamp(48px, 6cqw, 88px); }
.ca3-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 4.5cqw, 56px); align-items: center; }
#page-ca-360 h1 {
	font-size: clamp(32px, 5cqw, 58px);
	line-height: 1.04;
	font-weight: 500;
	letter-spacing: -0.03em;
	margin: 22px 0 0;
	text-wrap: pretty;
}
#page-ca-360 h1 span { color: var(--ca3-accent); }
.ca3-hero__sub { margin: 22px 0 0; max-width: 30em; font-size: clamp(15px, 1.35cqw, 17px); line-height: 1.6; color: var(--ca3-muted); }
.ca3-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.ca3-hero__note { margin: 22px 0 0; font-size: 13px; color: var(--ca3-muted-3); }

/* ---------------------------------------------------------- Painel (card) */
.ca3-panel {
	border: 1px solid var(--ca3-line-2);
	border-radius: 12px;
	background: var(--ca3-surface);
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
	overflow: hidden;
	min-width: 0;
}
.ca3-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--ca3-line-2); }
.ca3-panel__head--tit { justify-content: flex-start; gap: 8px; }
.ca3-panel__brand { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.ca3-panel__title { font-size: 13px; font-weight: 600; }
.ca3-panel__meta { margin-left: auto; font-size: 11px; color: var(--ca3-muted-3); }
.ca3-panel__body { padding: 24px 22px 26px; }
.ca3-panel__body--tight { padding: 20px; }
.ca3-tick { width: 3px; height: 15px; flex: none; background: var(--ca3-accent); }
.ca3-pill { margin-left: auto; padding: 4px 9px; border-radius: 6px; background: var(--ca3-accent-800); color: var(--ca3-accent-200); font-size: 10px; font-weight: 600; }

.ca3-seg { display: flex; align-items: center; gap: 6px; }
.ca3-seg span { padding: 5px 11px; border-radius: 6px; font-size: 11px; color: var(--ca3-muted-3); }
.ca3-seg .is-on { font-weight: 600; background: var(--ca3-accent-800); color: var(--ca3-accent-200); }

.ca3-kv { display: grid; gap: 14px; font-size: 13px; }
.ca3-kv > div { display: flex; justify-content: space-between; gap: 16px; }
.ca3-kv dt { color: var(--ca3-muted-2); font-weight: 400; }
.ca3-kv dd { color: var(--ca3-text); text-align: right; }
.ca3-kv--sm { gap: 12px; font-size: 12px; }
.ca3-kv--hl dt { color: var(--ca3-text); }
.ca3-kv--hl dd { font-weight: 600; color: var(--ca3-accent-300); }

.ca3-panel__big { margin: 10px 0 0; font-size: clamp(30px, 3.4cqw, 40px); font-weight: 500; letter-spacing: -0.03em; color: var(--ca3-accent-300); }
.ca3-bars { display: grid; gap: 8px; margin-top: 26px; }
.ca3-bars__bar { display: block; height: 7px; border-radius: 4px; background: var(--ca3-neutral-800); }
.ca3-bars__bar--on { background: var(--ca3-accent-700); }
.ca3-bars__legend { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; font-size: 11px; color: var(--ca3-muted-3); }

.ca3-panel__foot { padding: 18px 22px; border-top: 1px solid var(--ca3-line-2); display: flex; justify-content: space-between; gap: 16px; align-items: baseline; font-size: 12px; color: var(--ca3-muted-2); }
.ca3-panel__foot-val { font-size: clamp(16px, 1.6cqw, 20px); font-weight: 500; letter-spacing: -0.02em; color: var(--ca3-accent-300); }

.ca3-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ca3-line-2); }
.ca3-duo > div { padding: 18px 22px; background: var(--ca3-surface); }
.ca3-duo__val { margin: 8px 0 0; font-size: clamp(18px, 2cqw, 24px); font-weight: 500; letter-spacing: -0.02em; }
.ca3-duo__val--on { color: var(--ca3-accent-300); }

/* números borrados do design (dados ilustrativos) */
.ca3-blur { filter: blur(5px); display: inline-block; }

/* -------------------------------------------------------------- Problema */
.ca3-problema { background: linear-gradient(160deg, var(--ca3-section) 0%, var(--ca3-section-glow) 55%, var(--ca3-section) 100%); padding: clamp(48px, 7cqw, 84px) clamp(18px, 4.5cqw, 56px); }
.ca3-problema__grid { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: clamp(32px, 5cqw, 64px); align-items: start; }
.ca3-problema__lead { margin: 20px 0 0; max-width: 38em; font-size: clamp(14px, 1.3cqw, 16px); line-height: 1.65; color: var(--ca3-muted); }
.ca3-problema__hint { margin: 28px 0 12px; font-size: 13px; color: var(--ca3-muted-2); }
.ca3-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ca3-chips span { padding: 10px 18px; border: 1px solid rgba(220, 188, 254, 0.45); border-radius: 8px; font-size: 14px; }
.ca3-bignum { display: flex; align-items: flex-end; gap: 8px; margin: 0; }
.ca3-bignum .n { font-size: clamp(56px, 7cqw, 82px); line-height: 0.8; font-weight: 500; letter-spacing: -0.04em; }
.ca3-bignum .u { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ca3-accent-300); padding-bottom: 6px; }
.ca3-problema__num p:last-child { margin: 0; font-size: clamp(14px, 1.25cqw, 15px); line-height: 1.65; color: var(--ca3-muted); }

/* ------------------------------------------------------------------- Dor */
.ca3-dor { padding: clamp(48px, 7cqw, 84px) clamp(18px, 4.5cqw, 56px); }
.ca3-cards4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: var(--ca3-gap-block); }
.ca3-card {
	border: 1px solid var(--ca3-line-2);
	border-radius: 12px;
	background: var(--ca3-surface);
	padding: clamp(20px, 2cqw, 26px);
	min-width: 0;
}
.ca3-card__num { font-size: 12px; font-weight: 600; color: var(--ca3-accent); }
.ca3-card h3 { margin: 14px 0 0; font-size: clamp(16px, 1.5cqw, 18px); letter-spacing: -0.01em; }
.ca3-card p { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--ca3-muted-2); }

/* --------------------------------------------------------------- Solução */
.ca3-solucao { padding: 0 clamp(18px, 4.5cqw, 56px) clamp(48px, 7cqw, 84px); }
.ca3-solucao__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4.5cqw, 56px); align-items: start; }
.ca3-solucao__lead { margin: 18px 0 0; font-size: clamp(14px, 1.3cqw, 16px); line-height: 1.6; color: var(--ca3-muted); }
.ca3-steps { margin-top: var(--ca3-gap-block) !important; }
.ca3-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 18px 0; border-top: 1px solid var(--ca3-line-2); }
.ca3-steps li:last-child { border-bottom: 1px solid var(--ca3-line-2); }
.ca3-steps__n { font-size: 13px; font-weight: 600; color: var(--ca3-accent); }
.ca3-steps h3 { font-size: 16px; font-weight: 500; margin: 0; }
.ca3-steps p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--ca3-muted-2); }

.ca3-chart__title { font-size: 12px; font-weight: 600; margin: 0 0 22px; }
.ca3-chart { display: flex; align-items: flex-end; justify-content: space-around; gap: 12px; }
.ca3-chart__group { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ca3-chart__bars { display: flex; align-items: flex-end; gap: 6px; height: 200px; }
.ca3-chart__bars span { display: block; width: 22px; border-radius: 4px 4px 0 0; background: var(--ca3-neutral-800); }
.ca3-chart__bars span.on { background: var(--ca3-accent-700); }
.ca3-chart__label { font-size: 11px; color: var(--ca3-muted-3); }
.ca3-chart__legend { display: flex; justify-content: center; gap: 20px; margin-top: 20px; font-size: 11px; color: var(--ca3-muted-2); }
.ca3-chart__legend span { display: flex; align-items: center; gap: 7px; }
.ca3-chart__legend i { width: 9px; height: 9px; border-radius: 3px; background: var(--ca3-neutral-800); }
.ca3-chart__legend i.on { background: var(--ca3-accent-700); }

/* ---------------------------------------------------------- Como funciona */
.ca3-passos { padding: 0 clamp(18px, 4.5cqw, 56px) clamp(48px, 7cqw, 84px); }
#page-ca-360 .ca3-passos h2 { margin-bottom: var(--ca3-gap-block); }
.ca3-passos__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.5cqw, 28px); }
.ca3-passo { border-top: 1px solid var(--ca3-line-2); padding: 22px 0 0; }
.ca3-passo__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: var(--ca3-accent-800);
	color: var(--ca3-accent-200);
	font-size: 13px;
	font-weight: 600;
}
.ca3-passo h3 { font-size: clamp(15px, 1.45cqw, 17px); margin: 18px 0 0; }
.ca3-passo p { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--ca3-muted-2); }

.ca3-figs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.5cqw, 28px); margin-top: clamp(44px, 4.6cqw, 60px); }
.ca3-figs__item { min-width: 0; display: flex; flex-direction: column; }
.ca3-figs__item > .ca3-panel { flex: 1; display: flex; flex-direction: column; }
.ca3-figs__item > .ca3-panel > .ca3-panel__body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
/* .ca3-panel__meta usa margin-left:auto no cabeçalho (flex row); dentro do
   corpo em coluna isso jogaria o texto para a direita. */
.ca3-panel__body > .ca3-panel__meta { margin-left: 0; align-self: flex-start; }
.ca3-figs__cap { margin: 14px 0 0; font-size: 13px; font-style: italic; color: var(--ca3-muted-3); }
.ca3-figs__item > .ca3-figs__cap { margin-top: auto; padding-top: 14px; }
.ca3-rent { display: grid; gap: 12px; margin-top: 14px; }
.ca3-rent__bar { display: block; height: 9px; border-radius: 4px; background: var(--ca3-neutral-800); }
.ca3-rent__bar--on { background: var(--ca3-accent-700); }
.ca3-rent__lbl { display: block; margin-top: 6px; font-size: 10px; color: var(--ca3-muted-3); }
.ca3-rent__lbl--on { color: var(--ca3-accent-300); }
.ca3-passos__closing { margin: 36px 0 0; font-size: clamp(16px, 1.7cqw, 20px); font-weight: 400; color: var(--ca3-muted); }
.ca3-passos__note { margin: 14px 0 0; max-width: 46em; font-size: 14px; line-height: 1.6; color: var(--ca3-muted-3); }

/* ------------------------------------------------------------- Tabelas */
.ca3-niveis { padding: 0 clamp(18px, 4.5cqw, 56px) clamp(48px, 7cqw, 84px); }
#page-ca-360 .ca3-niveis h2 { margin-bottom: var(--ca3-gap-block); }
.ca3-table-wrap {
	border: 1px solid var(--ca3-line-2);
	border-radius: 12px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	/* sombras nas bordas: aparecem apenas quando a tabela rola */
	background:
		linear-gradient(to right, var(--ca3-bg) 30%, rgba(22, 24, 38, 0)) left center / 28px 100% no-repeat local,
		linear-gradient(to left, var(--ca3-bg) 30%, rgba(22, 24, 38, 0)) right center / 28px 100% no-repeat local,
		radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)) left center / 14px 100% no-repeat scroll,
		radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)) right center / 14px 100% no-repeat scroll;
}
.ca3-table-wrap--light { border-color: rgba(233, 233, 237, 0.18); }
.ca3-table { width: 100%; border-collapse: collapse; min-width: 560px; color: var(--ca3-text); }
.ca3-table th { text-align: left; padding: 18px 24px; font-size: 14px; font-weight: 400; color: var(--ca3-muted-2); }
.ca3-table thead tr { background: var(--ca3-accent-900); }
.ca3-table__col { width: 180px; text-align: center !important; font-weight: 600 !important; color: var(--ca3-text) !important; }
.ca3-table__col--on { color: var(--ca3-accent-300) !important; font-weight: 600 !important; }
.ca3-table td { padding: 18px 24px; font-size: 15px; border-top: 1px solid var(--ca3-line-2); }
.ca3-yes { text-align: center; color: var(--ca3-muted-2); }
.ca3-yes--on { color: var(--ca3-accent); }
.ca3-no { text-align: center; color: var(--ca3-muted-3); }
.ca3-niveis__notes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3cqw, 32px); margin-top: 24px; }
.ca3-niveis__notes p { margin: 0; font-size: 14px; color: var(--ca3-muted-3); }
.ca3-niveis__notes strong { color: var(--ca3-text); font-weight: 600; }

.ca3-compara { background: linear-gradient(160deg, var(--ca3-section) 0%, var(--ca3-section-glow) 60%, var(--ca3-section) 100%); padding: clamp(48px, 7cqw, 84px) clamp(18px, 4.5cqw, 56px); }
#page-ca-360 .ca3-compara h2 { margin-bottom: var(--ca3-gap-block); }
.ca3-table--compara thead tr { background: transparent; }
.ca3-table--compara th { padding: 20px 26px; }
.ca3-table--compara th + th,
.ca3-table--compara td + td { text-align: right; }
.ca3-table--compara td { padding: 22px 26px; border-top-color: rgba(233, 233, 237, 0.18); color: var(--ca3-muted-2); }
.ca3-table--compara td:first-child { color: var(--ca3-text); }
.ca3-strong { font-weight: 600; color: var(--ca3-text) !important; }
.ca3-table__closing td { padding: 24px 26px !important; font-size: clamp(16px, 1.6cqw, 19px); font-weight: 400; color: var(--ca3-text) !important; text-align: left !important; }
.ca3-compara__note { margin: 18px 0 0; font-size: 13px; color: var(--ca3-muted-3); }
.ca3-compara__note strong { color: var(--ca3-text); font-weight: 600; }

/* --------------------------------------------------------- Custo da hora */
.ca3-hora { padding: clamp(48px, 7cqw, 84px) clamp(18px, 4.5cqw, 56px) clamp(48px, 7cqw, 84px); }
.ca3-hora__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4.5cqw, 56px); align-items: center; }
.ca3-hora__lead { margin: 20px 0 0; font-size: clamp(14px, 1.3cqw, 16px); line-height: 1.65; color: var(--ca3-muted); }
.ca3-card--list { padding: clamp(24px, 3cqw, 34px) clamp(22px, 2.8cqw, 32px); }
.ca3-dots { display: grid; gap: 18px; }
.ca3-dots li { display: flex; align-items: center; gap: 14px; font-size: clamp(14px, 1.35cqw, 16px); }
.ca3-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--ca3-accent); }
.ca3-dot--solid { background: var(--ca3-text); }

/* ------------------------------------------------------------- Relatório */
.ca3-relatorio { padding: 0 clamp(18px, 4.5cqw, 56px) clamp(48px, 7cqw, 84px); }
.ca3-relatorio__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5cqw, 56px); align-items: center; }
.ca3-card--doc { padding: clamp(24px, 3cqw, 34px) clamp(22px, 2.8cqw, 32px); }
.ca3-corner { display: block; width: 16px; height: 16px; border-top: 2px solid var(--ca3-accent); border-left: 2px solid var(--ca3-accent); }
.ca3-doc__title { margin: 26px 0 0; font-size: clamp(18px, 2cqw, 22px); font-weight: 500; letter-spacing: -0.01em; }
.ca3-doc__sub { margin: 10px 0 0; font-size: 14px; color: var(--ca3-muted-3); }
.ca3-doc__lines { display: grid; gap: 10px; margin-top: 34px; }
.ca3-doc__lines span { display: block; height: 8px; border-radius: 4px; background: var(--ca3-neutral-800); }
.ca3-doc__lines span.on { background: var(--ca3-accent-700); }
.ca3-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; margin-top: var(--ca3-gap-block) !important; }
.ca3-checks li { display: flex; align-items: center; gap: 12px; font-size: clamp(14px, 1.3cqw, 15px); }
.ca3-check {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--ca3-accent-700);
	color: var(--ca3-accent-200);
	font-size: 12px;
}

/* --------------------------------------------------- Barreira / Para quem */
.ca3-barreira { padding: 0 clamp(18px, 4.5cqw, 56px) clamp(48px, 7cqw, 84px); }
.ca3-barreira__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5cqw, 64px); align-items: start; }
.ca3-barreira__lead { margin: 20px 0 0; font-size: clamp(14px, 1.3cqw, 16px); line-height: 1.65; color: var(--ca3-muted); }
.ca3-tags { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 2.6cqw, 30px); }
.ca3-tags span { padding: 14px 20px; border: 1px solid var(--ca3-line-2); border-radius: 8px; background: var(--ca3-surface); font-size: clamp(14px, 1.3cqw, 15px); }

/* -------------------------------------------------------- Onde encontrar */
.ca3-onde { padding: 0 clamp(18px, 4.5cqw, 56px) clamp(48px, 7cqw, 84px); }
.ca3-onde__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 5cqw, 64px); align-items: center; }
.ca3-onde__app { display: flex; align-items: center; gap: 16px; margin-top: 22px; }
.ca3-onde__mark { font-size: clamp(34px, 4cqw, 44px); font-weight: 600; letter-spacing: -0.05em; color: var(--ca3-accent); line-height: 1; }
.ca3-onde__name { margin: 0; font-size: clamp(18px, 2cqw, 22px); font-weight: 500; letter-spacing: -0.01em; }
.ca3-onde__sub { margin: 4px 0 0; font-size: 14px; color: var(--ca3-muted-3); }
.ca3-onde__lead { margin: 0; font-size: clamp(15px, 1.55cqw, 18px); line-height: 1.6; color: var(--ca3-muted); }
.ca3-onde__note { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ca3-muted-3); }

/* ----------------------------------------------------------- Como começar */
.ca3-comecar { padding: 0 clamp(18px, 4.5cqw, 56px) clamp(48px, 7cqw, 84px); }
#page-ca-360 .ca3-comecar__title { margin: 16px 0 var(--ca3-gap-block); max-width: 16em; }
.ca3-comecar__cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.2cqw, 24px); }
.ca3-comecar__cards .ca3-card { padding: clamp(24px, 3cqw, 32px); display: flex; flex-direction: column; align-items: flex-start; }
.ca3-comecar__cards h3 { margin: 0; font-size: clamp(17px, 1.8cqw, 20px); letter-spacing: -0.01em; }
.ca3-comecar__cards .body { margin: 14px 0 26px; font-size: clamp(14px, 1.35cqw, 15px); line-height: 1.6; color: var(--ca3-muted-2); flex: 1; }

/* ------------------------------------------------------------ Formulário */
.ca3-form { background: linear-gradient(150deg, var(--ca3-section) 0%, var(--ca3-section-glow) 70%, var(--ca3-section) 100%); padding: clamp(48px, 7cqw, 84px) clamp(18px, 4.5cqw, 56px); }
.ca3-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5cqw, 64px); align-items: stretch; }
.ca3-form h2 { font-size: clamp(30px, 3.8cqw, 44px); line-height: 1.1; letter-spacing: -0.03em; }
.ca3-form__lead { margin: 20px 0 0; max-width: 28em; font-size: clamp(14px, 1.3cqw, 16px); line-height: 1.65; color: var(--ca3-muted); }
.ca3-form__copy { display: flex; flex-direction: column; }
.ca3-form__aside { min-width: 0; margin-top: 34px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(233, 233, 237, 0.14); flex: 1; min-height: 300px; }
#page-ca-360 .ca3-form__aside img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; object-position: center 60%; }
.ca3-form__box { background: var(--ca3-bg); border: 1px solid var(--ca3-line-2); border-radius: 12px; padding: clamp(24px, 3cqw, 36px) clamp(22px, 2.8cqw, 34px); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45); min-width: 0; }
.ca3-form__title { margin: 0 0 26px; font-size: clamp(18px, 2cqw, 22px); font-weight: 500; letter-spacing: -0.01em; }

/* Contact Form 7 (mesmo formulário do site) dentro do card escuro */
#page-ca-360 .ca3-cf7 .input-item,
#page-ca-360 .ca3-cf7 p { margin: 0 0 16px; }
#page-ca-360 .ca3-cf7 label { display: block; font-size: 13px; color: var(--ca3-muted); margin-bottom: 7px; }
#page-ca-360 .ca3-cf7 input[type="text"],
#page-ca-360 .ca3-cf7 input[type="email"],
#page-ca-360 .ca3-cf7 input[type="tel"],
#page-ca-360 .ca3-cf7 select,
#page-ca-360 .ca3-cf7 textarea {
	width: 100%;
	background: var(--ca3-surface);
	border: 1px solid var(--ca3-line-2);
	border-radius: 8px;
	padding: 12px 14px;
	color: var(--ca3-text);
	font-family: var(--ca3-font);
	font-size: 14px;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color 0.15s ease;
}
#page-ca-360 .ca3-cf7 input::placeholder,
#page-ca-360 .ca3-cf7 textarea::placeholder { color: var(--ca3-muted-3); }
#page-ca-360 .ca3-cf7 input:focus,
#page-ca-360 .ca3-cf7 select:focus,
#page-ca-360 .ca3-cf7 textarea:focus { outline: none; border-color: var(--ca3-accent-400); }
#page-ca-360 .ca3-cf7 select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ca3-muted-2) 50%), linear-gradient(135deg, var(--ca3-muted-2) 50%, transparent 50%); background-position: calc(100% - 20px) 20px, calc(100% - 14px) 20px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 38px; }
/* A lista de opções é desenhada pelo sistema: color-scheme faz o navegador
   abrir o popup no tema escuro (macOS/Windows) e as cores explícitas
   garantem texto branco onde o popup é pintado pelo CSS. */
#page-ca-360 .ca3-cf7 select { color-scheme: dark; }
#page-ca-360 .ca3-cf7 select option,
#page-ca-360 .ca3-cf7 select optgroup {
	color: #fff;
	background-color: var(--ca3-surface);
}
#page-ca-360 .ca3-cf7 select option:checked,
#page-ca-360 .ca3-cf7 select option:hover {
	color: #fff;
	background-color: var(--ca3-accent-700);
}
#page-ca-360 .ca3-cf7 .wpcf7-list-item { margin: 0; }
#page-ca-360 .ca3-cf7 .wpcf7-acceptance label,
#page-ca-360 .ca3-cf7 .wpcf7-checkbox label { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--ca3-muted); }
#page-ca-360 .ca3-cf7 input[type="checkbox"] { width: 16px; height: 16px; flex: none; margin-top: 2px; accent-color: var(--ca3-accent); }
#page-ca-360 .ca3-cf7 a { color: var(--ca3-accent-300); text-decoration: underline; }
#page-ca-360 .ca3-cf7 input[type="submit"] {
	width: 100%;
	background: var(--ca3-accent);
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: 15px 24px;
	font-family: var(--ca3-font);
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.18s ease;
	margin-top: 6px;
}
#page-ca-360 .ca3-cf7 input[type="submit"]:hover { background: #8a2ade; }
#page-ca-360 .ca3-cf7 .wpcf7-not-valid-tip { color: #ffb4b4; font-size: 12px; margin-top: 6px; }
#page-ca-360 .ca3-cf7 .wpcf7-response-output { border-color: var(--ca3-accent-400) !important; color: var(--ca3-text); font-size: 13px; margin: 16px 0 0; }
#page-ca-360 .ca3-cf7 .wpcf7-spinner { background-color: var(--ca3-accent-400); }

/* ------------------------------------------------- Estados interativos */
/* Foco visível e consistente em tudo que é operável pelo teclado. */
#page-ca-360 a:focus-visible,
#page-ca-360 button:focus-visible,
#page-ca-360 input:focus-visible,
#page-ca-360 select:focus-visible,
#page-ca-360 textarea:focus-visible {
	outline: 2px solid var(--ca3-accent-400);
	outline-offset: 3px;
	border-radius: 4px;
}
#page-ca-360 .ca3-btn:active { transform: translateY(1px); }
#page-ca-360 .ca3-cf7 input[type="submit"]:active { transform: translateY(1px); }

/* Links de apoio (política de privacidade etc.) */
#page-ca-360 .ca3-cf7 a:hover,
#page-ca-360 .ca3-cf7 a:focus { color: var(--ca3-accent-200); }

/* Leitura das tabelas longas */
#page-ca-360 .ca3-table tbody tr { transition: background 0.15s ease; }
#page-ca-360 .ca3-table tbody tr:hover { background: rgba(153, 54, 242, 0.07); }
#page-ca-360 .ca3-table--compara tbody tr:hover { background: rgba(233, 233, 237, 0.05); }
#page-ca-360 .ca3-table tbody tr.ca3-table__closing:hover { background: transparent; }

/* --------------------------------------------------------------- Rodapé */
.ca3-footer { border-top: 1px solid var(--ca3-line-2); padding: 0 clamp(18px, 4.5cqw, 56px); }
.ca3-footer__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 0; font-size: 13px; color: var(--ca3-muted-3); }

/* ==================================================== Responsivo (≤ 990px) */
@media (max-width: 989.98px) {
	.ca3-hero { padding-top: 116px; }
	.ca3-hero__grid,
	.ca3-problema__grid,
	.ca3-solucao__grid,
	.ca3-hora__grid,
	.ca3-relatorio__grid,
	.ca3-barreira__grid,
	.ca3-onde__grid,
	.ca3-form__grid { grid-template-columns: 1fr; }
	.ca3-cards4,
	.ca3-passos__grid { grid-template-columns: repeat(2, 1fr); }
	.ca3-figs,
	.ca3-comecar__cards,
	.ca3-niveis__notes { grid-template-columns: 1fr; }
	.ca3-relatorio__grid > .ca3-card--doc { order: 2; }
	.ca3-footer__row { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Tabelas em telas estreitas: encolhem para caber; o scroll fica de reserva */
@media (max-width: 767.98px) {
	.ca3-table { min-width: 420px; font-size: 14px; }
	.ca3-table th { padding: 14px 12px; font-size: 13px; }
	.ca3-table td { padding: 14px 12px; font-size: 14px; }
	.ca3-table__col { width: 74px; }
	.ca3-table--compara { min-width: 520px; }
	.ca3-table--compara th,
	.ca3-table--compara td { padding: 16px 14px; }
	.ca3-table__closing td { padding: 18px 14px !important; font-size: 16px; }
}

/* Muito estreito: a tabela de níveis cabe inteira (texto quebra em 2 linhas);
   só a comparativa continua rolando, com as sombras indicando isso. */
@media (max-width: 519.98px) {
	.ca3-table { min-width: 0; }
	.ca3-table th,
	.ca3-table td { padding: 13px 10px; }
	.ca3-table__col { width: 64px; }
}

@media (max-width: 639.98px) {
	.ca3-cards4,
	.ca3-passos__grid,
	.ca3-checks,
	.ca3-duo { grid-template-columns: 1fr; }
	.ca3-hero__ctas .ca3-btn { width: 100%; }
	.ca3-chart__bars { height: 140px; }
	.ca3-chart__bars span[style*="200px"] { height: 140px !important; }
	.ca3-chart__bars span[style*="100px"] { height: 70px !important; }
	.ca3-chart__bars span[style*="66px"] { height: 46px !important; }
	.ca3-chart__bars span[style*="33px"] { height: 23px !important; }
	.ca3-duo > div + div { border-top: 1px solid var(--ca3-line-2); }
}