/*
 * Páginas de integração (integracoes.php e integracao.php). Carregado depois do home.css e do blog.css (trilha,
 * títulos, .blog-tabela, .blog-passos, faixa de demonstração). Só var(--lp-*).
 * Celular: tudo empilhado e as tabelas viram cartões. 768px ou mais: tabelas normais. 1000px ou mais: duas colunas.
 */

.integ-hero,
.integ-cabeca {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-3);
	padding-top: var(--lp-esp-4);
	padding-bottom: var(--lp-esp-5);
}

.integ-hero-txt {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-2);
}

.integ-h1 {
	font-size: var(--lp-t-faixa-m);
	line-height: 1.04;
	text-wrap: balance;
}

.integ-lead {
	max-width: var(--lp-largura-cabeca);
	font-size: var(--lp-t-texto);
	line-height: 1.5;
	color: var(--lp-tinta-2);
}

.integ-acoes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lp-esp-2);
}

.integ-acoes .lp-btn {
	white-space: normal;
	text-align: center;
}

/* O WhatsApp do topo só aparece do tablet para cima (no celular fica o botão flutuante) */
.integ-acoes .integ-btn-wa {
	display: none;
}

/* ---------- Quadro "Hoje na loja" ---------- */

.integ-hoje {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-2);
	padding: var(--lp-margem-m);
	border-radius: var(--lp-raio-m);
	background: var(--lp-escuro);
	color: var(--lp-papel);
}

.integ-fluxo {
	align-items: center;
	gap: var(--lp-esp-2);
}

.integ-fluxo.lp-so-d {
	display: none;
}

.integ-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--lp-esp-1);
	min-height: var(--lp-esp-5);
	padding: 0 var(--lp-esp-3);
	border-radius: var(--lp-raio-pilula);
	background: var(--lp-papel);
	color: var(--lp-tinta);
	font-weight: 700;
	white-space: nowrap;
}

.integ-chip--azul {
	background: var(--lp-azul);
	color: var(--lp-branco);
}

.integ-chip svg {
	width: var(--lp-esp-2);
	height: auto;
}

.integ-chip--azul svg path {
	fill: var(--lp-branco);
}

.integ-fluxo-linha {
	flex: 1;
	border-top: 1.5px dashed var(--lp-linha-escuro-3);
}

.integ-hoje-lista {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--lp-linha-escuro);
}

.integ-hoje-lista li {
	display: flex;
	justify-content: space-between;
	gap: var(--lp-esp-2);
	padding: var(--lp-esp-2) 0;
	border-bottom: 1px solid var(--lp-linha-escuro);
}

.integ-hoje-lista li:last-child {
	border-bottom: 0;
}

.integ-hoje-t {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-0);
	font-size: var(--lp-t-meta);
}

.integ-hoje-t strong {
	color: var(--lp-branco);
}

.integ-hoje-t span {
	font-size: var(--lp-t-nota);
	color: var(--lp-sobre-escuro-2);
}

.integ-hoje-h {
	font-family: var(--lp-f-mono);
	font-size: var(--lp-t-mono-p);
	color: var(--lp-sobre-escuro-2);
}

/* Página da API oficial: preço no quadro escuro, limites de envio e fontes */
.integ-preco {
	font-family: var(--lp-f-display);
	font-size: var(--lp-t-texto);
	color: var(--lp-branco);
	white-space: nowrap;
}

.integ-hoje-nota {
	font-size: var(--lp-t-nota);
	color: var(--lp-sobre-escuro-2);
}

.integ-limites {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--lp-esp-1);
}

.integ-limites li {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-0);
	padding: var(--lp-esp-2) var(--lp-esp-3);
	border-radius: var(--lp-raio-m);
	background: var(--lp-branco);
}

.integ-limites strong {
	font-family: var(--lp-f-display);
	font-size: var(--lp-t-texto);
}

.integ-limites span {
	font-size: var(--lp-t-nota);
	color: var(--lp-suave);
}

.integ-fontes ul {
	margin: 0;
	padding-left: var(--lp-esp-3);
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-1);
	font-size: var(--lp-t-nota);
	color: var(--lp-suave);
}

.integ-fontes a {
	color: var(--lp-suave);
}

.integ-btn-planos {
	align-self: flex-start;
}

/* ---------- Seções ---------- */

.integ-sec {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-3);
	padding-top: var(--lp-esp-6);
	padding-bottom: var(--lp-esp-6);
}

.integ-sec + .integ-sec,
.integ-cabeca + .integ-sec {
	padding-top: 0;
}

.integ-faixa-creme {
	background: var(--lp-creme);
}

.integ-texto {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-2);
	max-width: var(--lp-largura-cabeca);
	font-size: var(--lp-t-texto);
	line-height: 1.6;
}

.integ-fonte {
	font-size: var(--lp-t-nota);
	color: var(--lp-suave);
}

.integ-fonte a {
	color: var(--lp-suave);
}

/* ---------- Tabelas: cartões no celular ---------- */

.integ-tabela table {
	min-width: 0;
}

.integ-quando {
	font-weight: 700;
	white-space: nowrap;
}

.integ-col-clent {
	color: var(--lp-azul-hover) !important;
}

@media (max-width: 767px) {
	.integ-tabela thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.integ-tabela table,
	.integ-tabela tbody {
		display: block;
	}

	.integ-tabela--sinc tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: var(--lp-esp-2);
		row-gap: var(--lp-esp-0);
		padding: var(--lp-esp-2) var(--lp-esp-3);
		border-bottom: 1px solid var(--lp-linha-2);
	}

	.integ-tabela--sinc tr:last-child {
		border-bottom: 0;
	}

	.integ-tabela--sinc tbody th,
	.integ-tabela--sinc td {
		padding: 0;
		border: 0;
	}

	.integ-tabela--sinc .integ-quando {
		font-family: var(--lp-f-mono);
		font-weight: 400;
		font-size: var(--lp-t-mono-p);
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--lp-azul-hover);
		align-self: baseline;
	}

	.integ-tabela--sinc td:last-child {
		grid-column: 1 / -1;
		color: var(--lp-tinta-2);
	}

	.integ-tabela--comp {
		background: transparent;
		overflow: visible;
	}

	.integ-tabela--comp tr {
		display: flex;
		flex-direction: column;
		gap: var(--lp-esp-1);
		margin-bottom: var(--lp-esp-2);
		padding: var(--lp-margem-m);
		border-radius: var(--lp-raio-m);
		background: var(--lp-branco);
	}

	.integ-tabela--comp tbody th,
	.integ-tabela--comp td {
		padding: 0;
		border: 0;
	}

	.integ-tabela--comp td::before {
		content: attr(data-rotulo) ": ";
		font-weight: 700;
		color: var(--lp-tinta);
	}

	.integ-tabela--comp td:first-of-type {
		color: var(--lp-suave);
	}

	.integ-tabela--comp td:last-of-type::before {
		color: var(--lp-azul-hover);
	}

	.integ-tabela--comp .blog-tabela-nota {
		padding: 0;
	}

	/* O que a Clent faz em cada plataforma: um cartão por plataforma, com os recursos em linhas */
	.integ-tabela--plats {
		background: transparent;
		overflow: visible;
	}

	.integ-tabela--plats thead {
		display: none;
	}

	.integ-tabela--plats tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--lp-esp-1) var(--lp-esp-2);
		margin-bottom: var(--lp-esp-2);
		padding: var(--lp-margem-m);
		border-radius: var(--lp-raio-m);
		background: var(--lp-branco);
	}

	.integ-tabela--plats tbody th {
		grid-column: 1 / -1;
		padding: 0;
		border: 0;
	}

	.integ-tabela--plats td {
		display: contents;
	}

	.integ-tabela--plats td::before {
		content: attr(data-rotulo);
		color: var(--lp-tinta-2);
	}

	.integ-tabela--plats .blog-tabela-nota {
		padding: 0;
	}
}

/* Sim e não da tabela de plataformas: texto e cor (a palavra fica para leitor de tela e impressão) */
.integ-sim,
.integ-nao-tem {
	font-weight: 700;
}

.integ-sim {
	color: var(--lp-ok);
}

.integ-nao-tem {
	color: var(--lp-suave);
}

.integ-tabela--plats tbody th a {
	color: inherit;
	text-decoration-color: var(--lp-azul-claro);
}

/* ---------- Botão de WhatsApp ---------- */

.integ-passos {
	margin: 0;
	padding: 0;
	list-style: none;
}

.integ-nao {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-2);
	padding: var(--lp-margem-m);
	border-radius: var(--lp-raio-m);
	background: var(--lp-branco);
}

.integ-nao ul {
	margin: 0;
	padding-left: var(--lp-esp-3);
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-1);
	font-size: var(--lp-t-meta);
	line-height: 1.55;
	color: var(--lp-tinta-2);
}

/* ---------- Passos da implantação ---------- */

.integ-cards {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--lp-esp-2);
}

.integ-card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: var(--lp-esp-2);
	row-gap: var(--lp-esp-0);
	padding: var(--lp-margem-m);
	border-radius: var(--lp-raio-m);
	background: var(--lp-branco);
}

.integ-card-n {
	grid-row: span 2;
	font-family: var(--lp-f-display);
	font-size: var(--lp-t-h2-m);
	line-height: 1;
	color: var(--lp-azul);
}

.integ-card-t {
	font-weight: 700;
}

.integ-card-p {
	font-size: var(--lp-t-meta);
	line-height: 1.5;
	color: var(--lp-tinta-2);
}

/* ---------- Veja também ---------- */

.integ-links {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--lp-esp-2);
}

.integ-link {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-1);
	padding: var(--lp-margem-m);
	border-radius: var(--lp-raio-m);
	background: var(--lp-branco);
	color: var(--lp-tinta);
	text-decoration: none;
}

.integ-link-t {
	font-size: var(--lp-t-texto);
	line-height: 1.3;
	font-weight: 700;
}

.integ-link:hover .integ-link-t,
.integ-link:focus-visible .integ-link-t {
	color: var(--lp-azul-hover);
}

.integ-faq .lp-faq {
	max-width: var(--lp-largura-cabeca);
}

/* ---------- Índice /integracoes ---------- */

.integ-plats {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--lp-esp-2);
}

.integ-plat {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-1);
	height: 100%;
	box-sizing: border-box;
	padding: var(--lp-margem-m);
	border-radius: var(--lp-raio-m);
	background: var(--lp-branco);
	color: var(--lp-tinta);
	text-decoration: none;
}

.integ-plat-topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lp-esp-2);
}

.integ-plat-nome {
	font-family: var(--lp-f-display);
	font-size: var(--lp-t-h2-m);
	letter-spacing: -0.03em;
}

.integ-plat-seta {
	font-size: var(--lp-t-sub);
	color: var(--lp-azul-hover);
}

.integ-plat-p {
	font-size: var(--lp-t-meta);
	line-height: 1.5;
	color: var(--lp-tinta-2);
}

.integ-plat:hover .integ-plat-nome,
.integ-plat:focus-visible .integ-plat-nome {
	color: var(--lp-azul-hover);
}

.integ-plat-chips {
	flex-wrap: wrap;
	gap: var(--lp-esp-1);
}

.integ-plat-chips.lp-so-d {
	display: none;
}

.integ-plat-chips span {
	padding: var(--lp-esp-0) var(--lp-esp-2);
	border-radius: var(--lp-raio-pilula);
	background: var(--lp-creme);
	font-size: var(--lp-t-nota);
	font-weight: 600;
}

.integ-log-link {
	color: inherit;
}

.integ-log-link:hover,
.integ-log-link:focus-visible {
	color: var(--lp-azul-hover);
}

.integ-log {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--lp-esp-2);
}

.integ-log li {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-0);
	padding: var(--lp-esp-3);
	border-radius: var(--lp-raio-m);
	background: var(--lp-branco);
	font-size: var(--lp-t-nota);
	line-height: 1.45;
	color: var(--lp-tinta-2);
}

.integ-log strong {
	font-size: var(--lp-t-meta);
	color: var(--lp-tinta);
}

.integ-outra {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-2);
	padding: var(--lp-margem-m);
	border-radius: var(--lp-raio-m);
	background: var(--lp-escuro);
	color: var(--lp-papel);
	text-decoration: none;
}

.integ-outra-txt {
	display: flex;
	flex-direction: column;
	gap: var(--lp-esp-1);
}

.integ-outra-t {
	font-family: var(--lp-f-display);
	font-size: var(--lp-t-h3);
	letter-spacing: -0.03em;
	color: var(--lp-branco);
}

.integ-outra-p {
	font-size: var(--lp-t-meta);
	color: var(--lp-sobre-escuro);
}

/* ---------- Tablet: 768px ou mais ---------- */

@media (min-width: 768px) {
	.integ-hero,
	.integ-cabeca {
		gap: var(--lp-esp-5);
		padding-top: var(--lp-esp-6);
		padding-bottom: var(--lp-esp-7);
	}

	.integ-cabeca {
		gap: var(--lp-esp-3);
		padding-bottom: var(--lp-esp-5);
	}

	.integ-hero-txt {
		gap: var(--lp-esp-3);
	}

	.integ-acoes .integ-btn-wa {
		display: inline-flex;
	}

	.integ-h1 {
		font-size: var(--lp-t-h1-lista);
		line-height: 1;
		letter-spacing: -0.04em;
	}

	.integ-lead {
		font-size: var(--lp-t-sub);
	}

	.integ-hoje {
		gap: var(--lp-esp-3);
		padding: var(--lp-esp-5);
		border-radius: var(--lp-raio-card);
	}

	.integ-fluxo.lp-so-d {
		display: flex;
	}

	.integ-hoje-t {
		font-size: var(--lp-t-texto);
	}

	.integ-hoje-t span {
		font-size: var(--lp-t-meta);
	}

	.integ-sec {
		gap: var(--lp-esp-5);
		padding-top: var(--lp-esp-7);
		padding-bottom: var(--lp-esp-7);
	}

	.integ-texto {
		font-size: var(--lp-t-leitura);
	}

	.integ-tabela {
		border-radius: var(--lp-raio-card);
	}

	.integ-tabela table {
		font-size: var(--lp-t-texto);
	}

	.integ-nao {
		padding: var(--lp-esp-5);
		border-radius: var(--lp-raio-card);
	}

	.integ-nao ul {
		font-size: var(--lp-t-texto);
	}

	.integ-cards,
	.integ-links {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--lp-esp-4);
	}

	.integ-cards--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.integ-preco {
		font-size: var(--lp-t-h3);
	}

	.integ-card {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--lp-esp-1);
		padding: var(--lp-esp-5);
		border-radius: var(--lp-raio-card);
	}

	.integ-card-n {
		grid-row: auto;
		font-size: var(--lp-t-h2);
	}

	.integ-card-t {
		font-size: var(--lp-t-leitura);
	}

	.integ-card-p {
		font-size: var(--lp-t-texto);
	}

	.integ-link {
		padding: var(--lp-esp-4);
		border-radius: var(--lp-raio-card);
	}

	.integ-link-t {
		font-size: var(--lp-t-leitura);
	}

	.integ-plats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--lp-esp-4);
	}

	.integ-plat {
		gap: var(--lp-esp-2);
		padding: var(--lp-esp-5);
		border-radius: var(--lp-raio-card);
	}

	.integ-plat-nome {
		font-size: var(--lp-t-h2);
	}

	.integ-plat-p {
		font-size: var(--lp-t-texto);
	}

	.integ-plat-chips.lp-so-d {
		display: flex;
	}

	.integ-log {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--lp-esp-4);
	}

	.integ-log li {
		padding: var(--lp-esp-4);
		border-radius: var(--lp-raio-card);
		font-size: var(--lp-t-meta);
	}

	.integ-log strong {
		font-size: var(--lp-t-leitura);
	}

	.integ-outra {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--lp-esp-4);
		padding: var(--lp-esp-5);
		border-radius: var(--lp-raio-card);
	}

	.integ-outra-p {
		font-size: var(--lp-t-texto);
	}
}

/* ---------- Desktop: 1000px ou mais ---------- */

@media (min-width: 1000px) {
	.integ-cards--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.integ-hero {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: center;
		gap: var(--lp-esp-6);
	}

	.integ-comp,
	.integ-botao {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		gap: var(--lp-esp-6);
		align-items: start;
	}

	.integ-botao {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.integ-faq {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		gap: var(--lp-esp-6);
	}
}