/* Tabela comparativa, modelo 2026.
 *
 * Escopo: só vale dentro de .cmp-section--v2. As 26 páginas que usam a marcação cmp-
 * continuam com o desenho antigo até receberem a classe, então o rollout é opt-in,
 * página por página, e reversível tirando uma classe.
 *
 * O problema que este arquivo resolve: a versão anterior empilhava ícone sobre texto,
 * centralizava tudo e dava duas linhas para o nome do recurso. Cada linha da tabela
 * passava de 190px e uma comparação de nove recursos virava 1.800px de rolagem.
 * Aqui a célula é uma linha só, alinhada à esquerda, e a linha fecha perto de 68px.
 *
 * Herda os tokens já definidos no CSS da página (--cl-dark, --cl-teal, --sp-*, --r-*).
 * Os valores próprios abaixo existem porque não há token equivalente.
 */

.cmp-section--v2 {
	--cmp-linha: #eaedf0;          /* divisória: cinza levemente azulado, não cinza puro */
	--cmp-cabecalho: #032d60;      /* barra escura: dá âncora e peso ao objeto inteiro */
	--cmp-sults-fundo: #f1fbfa;
	--cmp-sults-borda: #cfecea;
	--cmp-sim: #0c8c7f;            /* teal escurecido até passar AA sobre branco */
	--cmp-neutro: #5b6b7c;         /* concorrente que tem o recurso: tinta, não cor */
	--cmp-ausente: #6b7480;        /* ausência é traço discreto, não X vermelho; 4,74:1 sobre branco */
	--cmp-parcial: #9a6b00;
	--cmp-coroa: #00726f;          /* teal da marca escurecido até 5,77:1 com texto branco */
	--cmp-hover: #f9fbfc;
	--cmp-ret: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- cabeçalho da seção ---------- */

.cmp-section--v2 .container {
	padding-top: 56px;
	padding-bottom: 8px;
}

.cmp-section--v2 .cmp-header {
	text-align: left;
	max-width: 46rem;
	margin-bottom: var(--sp-6, 1.5rem);
}

.cmp-section--v2 .cmp-title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2rem);
	font-weight: 600;
	line-height: 1.2;
	color: var(--cl-dark, #032d60);
	text-wrap: balance;
}

.cmp-section--v2 .cmp-snippet {
	margin: 0;
	max-width: 58ch;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--cl-muted, #425466);
	text-wrap: pretty;
}

/* ---------- moldura e rolagem ---------- */

.cmp-section--v2 .cmp-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: var(--sp-5, 1.25rem);
	border: 1px solid var(--cmp-linha);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(3, 45, 96, 0.04), 0 12px 32px -16px rgba(3, 45, 96, 0.18);
}

.cmp-section--v2 .cmp-table-wrap:focus-visible {
	outline: 2px solid var(--cl-teal, #00acac);
	outline-offset: 2px;
}

.cmp-section--v2 .cmp-table {
	width: 100%;
	min-width: 760px;
	border-collapse: separate;   /* separate, não collapse: sticky exige isso para a borda não sumir */
	border-spacing: 0;
	font-size: 0.9375rem;
	color: var(--cl-body, #474747);
	table-layout: fixed;
}

/* Largura por papel, não em partes iguais.
 * As três colunas de comparação carregam de 11 a 35 caracteres; a da SULTS carrega
 * até 70. Em colunas iguais, a célula da SULTS quebrava em quatro linhas e definia
 * sozinha a altura de toda a fileira. Dando a ela o dobro da largura, a fileira cai
 * de 126px para perto de 70px sem cortar uma palavra do conteúdo. */
.cmp-section--v2 .cmp-table col.cmp-col-recurso { width: 21%; }
.cmp-section--v2 .cmp-table col.cmp-col-sults { width: 31%; }

/* Os 48% que sobram se dividem entre as colunas de concorrente. O atributo
 * data-rivais é escrito na marcação porque o CSS não sabe contar colunas. */
.cmp-section--v2 .cmp-table[data-rivais="1"] col.cmp-col-rival { width: 48%; }
.cmp-section--v2 .cmp-table[data-rivais="2"] col.cmp-col-rival { width: 24%; }
.cmp-section--v2 .cmp-table[data-rivais="3"] col.cmp-col-rival { width: 16%; }
.cmp-section--v2 .cmp-table[data-rivais="4"] col.cmp-col-rival { width: 12%; }

/* ---------- cabeçalho da tabela ---------- */

.cmp-section--v2 .cmp-table thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	/* vence o `th{background-color:... !important}` global do style_sults.css */
	background: var(--cmp-cabecalho) !important;
	border-bottom: 0;
	padding: 0.9375rem 1rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #ffffff;
	text-align: left;
	white-space: nowrap;
}

.cmp-section--v2 .cmp-th-feature {
	position: sticky;
	left: 0;
	z-index: 3;
	text-transform: none;      /* o caixa-alta do modelo antigo pesava sem informar nada */
	letter-spacing: 0;
	font-size: 0.75rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.62);
	min-width: 220px;
}

/* A coluna da SULTS é a âncora da leitura. Dentro da barra escura ela vira o único
 * ponto de cor do cabeçalho, o que dispensa seta, selo ou etiqueta de "recomendado". */
.cmp-section--v2 .cmp-table thead th.cmp-th--sults {
	background: var(--cmp-coroa) !important;
	color: #ffffff;
	font-weight: 700;
}

.cmp-section--v2 .cmp-table thead tr th:first-child { border-top-left-radius: 15px; }
.cmp-section--v2 .cmp-table thead tr th:last-child { border-top-right-radius: 15px; }

/* ---------- ícone e selo do cabeçalho ---------- */
/* A marcação de 22 páginas traz <span class="cmp-th-icon"><svg></span> antes do rótulo
 * e, em algumas, um selo "Recomendado" depois. O CSS antigo empilhava o ícone acima do
 * texto com display:flex; aqui ele fica na mesma linha, no tamanho do texto.
 *
 * Sem estas regras o SVG assume o tamanho natural e estoura o cabeçalho: foi
 * exatamente o defeito que apareceu em /produtos/checklist depois da limpeza. */
.cmp-section--v2 .cmp-th-icon {
	display: inline-flex;
	align-items: center;
	margin-right: 0.45rem;
	vertical-align: -0.15em;
	color: inherit;
	opacity: 0.85;
}

.cmp-section--v2 .cmp-th-icon svg {
	width: 1.0625rem;
	height: 1.0625rem;
	flex: none;
}

/* O rótulo de cada concorrente tinha cor própria (âmbar, roxo, cinza). Sobre a barra
 * escura nenhuma delas passa em contraste, e a hierarquia agora vem da coroa teal,
 * não de uma cor por coluna. Todos herdam o branco da barra. */
.cmp-section--v2 .cmp-table thead th.cmp-th--papel,
.cmp-section--v2 .cmp-table thead th.cmp-th--planilha,
.cmp-section--v2 .cmp-table thead th.cmp-th--isolado,
.cmp-section--v2 .cmp-table thead th.cmp-th--email,
.cmp-section--v2 .cmp-table thead th.cmp-th--drive {
	color: #ffffff;
}

/* Selo "Recomendado": sobre o teal da coroa, um pill teal sumiria. Vira vidro claro. */
.cmp-section--v2 .cmp-th-badge {
	display: inline-block;
	margin-left: 0.45rem;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
	color: #ffffff;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	vertical-align: 0.05em;
	white-space: nowrap;
}

/* ---------- linhas ---------- */

.cmp-section--v2 .cmp-table tbody tr + tr td {
	border-top: 1px solid var(--cmp-linha);
}

.cmp-section--v2 .cmp-table tbody tr:hover td {
	background-color: var(--cmp-hover);
}

.cmp-section--v2 .cmp-table tbody tr:hover .cmp-cell--highlight {
	background-color: #eaf8f7;
}

.cmp-section--v2 .cmp-feature {
	position: sticky;
	left: 0;
	z-index: 1;
	/* mesma regra global pinta o primeiro td de cada linha */
	background: #fff !important;
	padding: 0.75rem 1rem;
	vertical-align: middle;
	min-width: 220px;
}

.cmp-section--v2 .cmp-table tbody tr:hover .cmp-feature {
	background-color: var(--cmp-hover) !important;
}

.cmp-section--v2 .cmp-feature-name {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--cl-dark, #032d60);
}

.cmp-section--v2 .cmp-feature-desc {
	margin: 0.125rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--cl-dim, #888780);
}

/* ---------- células ---------- */

.cmp-section--v2 .cmp-cell {
	padding: 0.75rem 1rem;
	vertical-align: middle;
	text-align: left;
	line-height: 1.4;
	text-wrap: pretty;
}

/* A marca fica na linha do texto, não empilhada em cima dele.
 * É a mudança que corta metade da altura da tabela. */
.cmp-section--v2 .cmp-yes,
.cmp-section--v2 .cmp-no,
.cmp-section--v2 .cmp-partial {
	display: inline-block;
	width: 0.9rem;
	height: auto;
	margin: 0 0.45rem 0 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: inherit;
	vertical-align: baseline;
	text-align: left;
}

/* Cor só onde há recurso, e cor cheia só na coluna da SULTS. Vinte X vermelhos
 * espalhados numa tabela publicada pela própria SULTS lêem como marketing agressivo;
 * um traço discreto lê como confiança, e devolve todo o orçamento de cor para o
 * que a plataforma de fato entrega. */
.cmp-section--v2 .cmp-yes { color: var(--cmp-neutro); }
.cmp-section--v2 .cmp-cell--highlight .cmp-yes { color: var(--cmp-sim); }
.cmp-section--v2 .cmp-partial { color: var(--cmp-parcial); }

/* O X do HTML vira traço, sem tocar na marcação das 26 páginas. */
.cmp-section--v2 .cmp-no {
	font-size: 0;
	color: var(--cmp-ausente);
}

.cmp-section--v2 .cmp-no::before {
	content: "–";
	font-size: 0.875rem;
	font-weight: 600;
}

.cmp-section--v2 .cmp-cell-text {
	display: inline;
	font-size: 0.875rem;
	color: var(--cl-body, #474747);
}

/* Onde não há recurso, o texto recua: o olho precisa achar o que existe, não o que falta. */
.cmp-section--v2 .cmp-cell:not(.cmp-cell--highlight) .cmp-no + .cmp-cell-text {
	color: var(--cl-dim, #888780);
}

.cmp-section--v2 .cmp-cell--highlight {
	background: var(--cmp-sults-fundo) !important;
}

.cmp-section--v2 .cmp-cell--highlight .cmp-cell-text {
	color: var(--cl-dark, #032d60);
	font-weight: 500;
}

.cmp-section--v2 .cmp-table tbody tr:last-child .cmp-cell--highlight {
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
}

/* ---------- nota de rodapé ---------- */

.cmp-section--v2 .cmp-footer a {
	color: var(--cl-teal-hover, #009494);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cmp-section--v2 .cmp-footer {
	margin: 0;
	padding: 0.875rem 1rem;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--cl-dim, #888780);
	background: var(--cl-bg-soft, #fafaf8);
	border: 1px solid var(--cmp-linha);
	border-radius: 10px;
}

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

@media (max-width: 767px) {
	.cmp-section--v2 .container {
		padding-top: 40px;
	}

	.cmp-section--v2 .cmp-table {
		font-size: 0.875rem;
		min-width: 640px;
	}

	.cmp-section--v2 .cmp-th-feature,
	.cmp-section--v2 .cmp-feature {
		min-width: 168px;
	}

	.cmp-section--v2 .cmp-table thead th,
	.cmp-section--v2 .cmp-cell,
	.cmp-section--v2 .cmp-feature {
		padding: 0.625rem 0.75rem;
	}

	.cmp-section--v2 .cmp-cell-text,
	.cmp-section--v2 .cmp-feature-name {
		font-size: 0.8125rem;
	}

	.cmp-section--v2 .cmp-feature-desc {
		font-size: 0.75rem;
	}
}

/* A coluna fixa só faz sentido quando há rolagem lateral; acima disso ela
 * cria uma sombra sem função. */
@media (min-width: 1100px) {
	.cmp-section--v2 .cmp-feature,
	.cmp-section--v2 .cmp-th-feature {
		position: static;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cmp-section--v2 * {
		transition: none !important;
	}
}