/* Lobie Indica: estilo das páginas de /indica/ e do bloco do checkout.
   Tema claro com seções em tinta (--ink), mobile-first (320 px em diante), uma família: Montserrat.
   Tudo fica sob .ind (páginas do Indica) ou .ind-* (componentes), para não mexer no site.
   Sem estilo inline: as páginas têm CSP sem 'unsafe-inline' (o JS só usa CSSOM: element.style). */

/* Tokens do bloco do checkout (finalizar_decoracao.html não tem body.ind: continua com estes). */
:root {
	--indica-ciano: #00baec;
	--indica-ciano-forte: #00a5d1;
	--indica-texto: #202020;
	--indica-texto-2: #596062;
	--indica-fundo: #ffffff;
	--indica-fundo-2: #f6f6f6;
	--indica-borda: #dce3e5;
	--indica-erro: #a61b1b;
	--indica-ok: #1e7d4f;
	/* derivados (contraste AA para texto sobre branco) */
	--indica-ciano-texto: #00779a;
	--indica-ciano-claro: #eefaff;
	--indica-ciano-borda: #b3e9f9;
	--indica-sobre-ciano: #06232c;
	--indica-aviso: #8a5a00;
	--indica-aviso-fundo: #fff8e8;
	--indica-aviso-borda: #f0d9a6;
	--indica-erro-fundo: #fdf2f2;
	--indica-erro-borda: #e6b8b8;
	--indica-ok-fundo: #eef8f2;
	--indica-ok-borda: #b9dfc9;
	--indica-raio: 16px;
	--indica-raio-p: 10px;
	--indica-sombra: 0 1px 2px rgba(32, 32, 32, .04), 0 4px 16px rgba(32, 32, 32, .04);
	--indica-header-h: 64px;
	--indica-nav-h: 64px;
}

/* Tokens das páginas do Indica. Contraste conferido (WCAG):
   --ink sobre branco 15,6:1 · --cyan-deep sobre branco 5,4:1, sobre --sky 4,9:1, sobre --mist 5,0:1
   · --ink sobre --cyan 7,3:1 · --texto-2 sobre branco 7,0:1 · --sobre-escuro-2 sobre --ink 9,0:1.
   --cyan é cor de marca (fundo de botão, barra, realce): nunca texto pequeno sobre branco. */
body.ind {
	--ink: #0F2633;
	--ink-2: #17323F;
	--cyan: #0BC0ED;
	--cyan-hover: #0AB0DA;
	--cyan-deep: #077393;
	--sky: #E9F7FC;
	--mist: #F4F7F9;
	--paper: #FFFFFF;
	--texto-2: #4D5B63;
	--linha: #DCE5EA;
	--linha-forte: #B7C4CB;
	--sobre-escuro: #FFFFFF;
	--sobre-escuro-2: #B8C7D0;
	--largura: 1160px;
	--raio: 16px;
	--raio-g: 20px;
	--raio-p: 12px;
	--sombra: 0 1px 2px rgba(15, 38, 51, .05), 0 8px 24px rgba(15, 38, 51, .06);
	--sombra-alta: 0 2px 4px rgba(15, 38, 51, .06), 0 28px 56px -16px rgba(15, 38, 51, .38);

	/* os componentes antigos passam a usar a paleta nova */
	--indica-ciano: var(--cyan);
	--indica-ciano-forte: var(--cyan-deep);
	--indica-texto: var(--ink);
	--indica-texto-2: var(--texto-2);
	--indica-fundo: var(--paper);
	--indica-fundo-2: var(--mist);
	--indica-borda: var(--linha);
	--indica-ciano-texto: var(--cyan-deep);
	--indica-ciano-claro: var(--sky);
	--indica-ciano-borda: #A9E3F5;
	--indica-sobre-ciano: var(--ink);
	--indica-raio: var(--raio);
	--indica-raio-p: var(--raio-p);
	--indica-sombra: var(--sombra);
}

[hidden] { display: none !important; }

/* ---------- Base ---------- */
body.ind {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}
body.ind.ind-app { background: var(--mist); }
body.ind.ind-landing { font-size: 17px; }

.ind h1, .ind h2, .ind h3, .ind h4 {
	color: inherit;
	font-family: inherit;
	line-height: 1.2;
}
/* Margens base com especificidade baixa (0,0,1): qualquer componente de uma classe só manda na
   própria margem (nota sob botão, contato do cartão, etapa etc.). */
:where(.ind) p { margin: 0 0 1em 0; }
:where(.ind) h1, :where(.ind) h2, :where(.ind) h3, :where(.ind) h4 { margin: 0 0 .5em 0; }
.ind h1, .ind h2 { font-weight: 800; letter-spacing: -.02em; }
.ind h1 { font-size: 26px; line-height: 1.15; }
.ind h2 { font-size: 20px; }
.ind h3 { font-size: 17px; font-weight: 600; letter-spacing: -.005em; }
.ind h4 { font-size: 15px; font-weight: 600; }
.ind a { color: var(--cyan-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ind a:hover { color: var(--ink); }
.ind strong, .ind b { font-weight: 600; }
.ind small, .ind .ind-pequeno { font-size: 14px; }
.ind :focus-visible {
	outline: 3px solid var(--cyan-deep);
	outline-offset: 2px;
	border-radius: 4px;
}
.ind ::selection { background: #BCEBF9; color: var(--ink); }

@media (min-width: 768px) {
	.ind h1 { font-size: 36px; }
}

.ind-container {
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 16px;
}
.ind-container--estreito { max-width: 640px; }
.ind-container--largo { max-width: calc(var(--largura) + 48px); }
@media (min-width: 768px) {
	.ind-container--largo { padding: 0 24px; }
}
.ind-main { padding: 28px 0 48px 0; }
/* Faixa em tinta atrás do título (cadastro, entrar, regulamento): o cartão logo abaixo sobe sobre
   ela, como a calculadora na landing. A foto vem por url() no CSS (img-src 'self' da CSP). */
.ind-main--faixa { padding-top: 0; }
.ind-faixa-topo {
	padding: 28px 0 76px 0;
	color: #fff;
	background:
		linear-gradient(180deg, rgba(15, 38, 51, .8) 0, rgba(15, 38, 51, .95) 100%),
		url(/assets/images/indica/hero-800.jpg) 50% 60% / cover;
}
.ind .ind-faixa-topo h1 { color: #fff; }
.ind .ind-faixa-topo .ind-texto-2 { color: #E3ECF0; font-size: 17px; margin-bottom: 0; }
.ind-faixa-topo :focus-visible { outline-color: #fff; }
.ind-faixa-topo + .ind-container { position: relative; margin-top: -52px; }
.ind-faixa-topo + .ind-container > .ind-card { box-shadow: var(--sombra-alta); }
.ind-texto-2 { color: var(--texto-2); }
.ind-centro { text-align: center; }
/* .ind na frente: vence .ind-ajuda (margin-top 6px), que vem depois no arquivo */
.ind .ind-mt { margin-top: 16px; }
.ind .ind-mt-g { margin-top: 32px; }
.ind-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.ind-pular {
	position: absolute;
	left: 8px; top: -60px;
	z-index: 1000;
	padding: 10px 14px;
	background: var(--ink);
	color: #fff !important;
	border-radius: var(--raio-p);
}
.ind-pular:focus { top: 8px; }

/* ---------- Header ---------- */
.ind-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: #fff;
	border-bottom: 1px solid var(--linha);
}
.ind-header .ind-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: var(--indica-header-h);
}
.ind-marca {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	text-decoration: none !important;
	color: var(--ink) !important;
}
.ind-marca img { display: block; width: 76px; height: 28px; }
.ind-marca-palavra {
	padding-left: 10px;
	border-left: 1px solid var(--linha-forte);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 22px;
	color: var(--ink);
}
.ind-header-acoes { display: flex; align-items: center; gap: 8px; }
.ind-header-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 8px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none !important;
	color: var(--ink) !important;
}
.ind-header-link:hover { text-decoration: underline !important; }
.ind-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--ink);
	background: var(--ink);
	color: #fff !important;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none !important;
}
.ind-avatar[aria-current="page"] { background: var(--cyan); border-color: var(--cyan); color: var(--ink) !important; }

/* Header da landing: transparente, por cima da foto do topo */
.ind-header--foto {
	position: absolute;
	left: 0; right: 0; top: 0;
	z-index: 10;
	background: transparent;
	border-bottom: 0;
}
.ind-header--foto .ind-marca,
.ind-header--foto .ind-marca-palavra { color: #fff !important; }
.ind-header--foto .ind-marca-palavra { border-left-color: rgba(255, 255, 255, .45); }
.ind-header--foto .ind-header-link {
	padding: 0 18px;
	border: 1.5px solid rgba(255, 255, 255, .6);
	border-radius: 999px;
	color: #fff !important;
}
.ind-header--foto .ind-header-link:hover { border-color: #fff; background: rgba(255, 255, 255, .12); text-decoration: none !important; }
.ind-header--foto :focus-visible,
.ind-hero-texto :focus-visible { outline-color: #fff; }

/* ---------- Navegação do painel: inferior no celular, superior no desktop ---------- */
.ind-nav {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 60;
	background: #fff;
	border-top: 1px solid var(--linha);
	padding-bottom: env(safe-area-inset-bottom, 0);
}
.ind-nav ul {
	display: flex;
	justify-content: space-around;
	align-items: stretch;
	max-width: 640px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
.ind-nav li { flex: 1 1 0; min-width: 0; }
.ind-nav a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: var(--indica-nav-h);
	padding: 6px 2px;
	font-size: 12px;
	font-weight: 500;
	color: var(--texto-2) !important;
	text-decoration: none !important;
	white-space: nowrap;
}
.ind-nav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ind-nav a[aria-current="page"] { color: var(--ink) !important; font-weight: 600; }
.ind-nav a[aria-current="page"] svg { stroke-width: 2.2; }
.ind-nav .ind-nav-indicar a { color: var(--ink) !important; }
.ind-nav .ind-nav-indicar .ind-nav-bolha {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 32px;
	border-radius: 16px;
	background: var(--cyan);
}
body.ind-app { padding-bottom: calc(var(--indica-nav-h) + env(safe-area-inset-bottom, 0)); }

@media (min-width: 768px) {
	body.ind-app { padding-bottom: 0; }
	.ind-nav {
		position: sticky;
		top: var(--indica-header-h);
		bottom: auto;
		z-index: 40;
		border-top: 0;
		border-bottom: 1px solid var(--linha);
		padding-bottom: 0;
	}
	.ind-nav ul { justify-content: flex-start; gap: 4px; max-width: 1080px; padding: 0 16px; }
	.ind-nav li { flex: 0 0 auto; }
	.ind-nav a {
		flex-direction: row;
		gap: 8px;
		min-height: 48px;
		padding: 0 14px;
		font-size: 15px;
		border-bottom: 3px solid transparent;
	}
	.ind-nav svg { width: 20px; height: 20px; }
	.ind-nav a[aria-current="page"] { border-bottom-color: var(--cyan); }
	.ind-nav .ind-nav-indicar .ind-nav-bolha { width: 28px; height: 24px; border-radius: 12px; }
	.ind-nav .ind-nav-indicar svg { width: 18px; height: 18px; }
}

/* ---------- Botões (reaproveita .btpadrao do site, ajustado ao toque) ---------- */
.ind .btpadrao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	max-width: none;
	min-height: 48px;
	margin: 0;
	padding: 12px 24px;
	border: 1.5px solid rgba(15, 38, 51, .3);
	border-radius: 999px;
	background: #fff;
	color: var(--ink);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: none;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.ind .btpadrao:hover {
	background: #fff;
	border-color: var(--ink);
	color: var(--ink);
}
.ind .btpadrao.primary {
	background: var(--cyan);
	border-color: var(--cyan);
	color: var(--ink);
}
.ind .btpadrao.primary:hover { background: var(--cyan-hover); border-color: var(--cyan-hover); color: var(--ink); }
/* sobre fundo escuro (foto do topo, faixas em tinta) */
.ind .btpadrao.ind-bt-claro { background: transparent; border-color: rgba(255, 255, 255, .6); color: #fff; }
.ind .btpadrao.ind-bt-claro:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
.ind .btpadrao:disabled,
.ind .btpadrao[aria-disabled="true"] {
	background: #EEF2F4;
	border-color: #C3CDD2;
	color: var(--texto-2);
	cursor: not-allowed;
}
.ind .btpadrao[aria-busy="true"] { cursor: progress; }
.ind .ind-bt-bloco { display: flex; width: 100%; }
.ind .ind-bt-pequeno { min-height: 44px; padding: 8px 18px; font-size: 15px; }
.ind-bt-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 4px;
	border: 0;
	background: none;
	color: var(--indica-ciano-texto);
	font: inherit;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}
.ind-bt-link:hover { color: var(--indica-sobre-ciano); }
.ind-bt-link:disabled { color: var(--indica-texto-2); text-decoration: none; cursor: not-allowed; }
.ind .ind-bt-link { font-weight: 600; text-underline-offset: 3px; }
.ind-acoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ind-acoes--coluna { flex-direction: column; align-items: stretch; }
/* links soltos (fora de frase) também com alvo de toque de 44 px */
.ind-acoes > a:not(.btpadrao),
.ind-card > a:not(.btpadrao) { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
@media (min-width: 576px) {
	.ind-acoes--coluna { flex-direction: row; align-items: center; }
}

/* ---------- Formulários ---------- */
.ind-form { max-width: 560px; }
.ind-campo { margin: 0 0 18px 0; }
.ind-campo > label,
.ind-rotulo {
	display: block;
	margin: 0 0 6px 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
}
.ind-opcional { font-weight: 400; color: var(--texto-2); }
.ind .inp,
.ind select.inp,
.ind textarea.inp {
	display: block;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 10px 14px;
	text-indent: 0;
	border: 1.5px solid var(--linha-forte);
	border-radius: var(--raio-p);
	background: #fff;
	color: var(--ink);
	font: inherit;
	font-size: 16px; /* evita zoom do iOS */
	line-height: 1.4;
	transition: border-color .15s, box-shadow .15s;
}
.ind .inp:hover { border-color: #8FA2AC; }
.ind textarea.inp { min-height: 104px; resize: vertical; }
.ind select.inp { padding-right: 36px; }
.ind .inp:focus {
	outline: none;
	border-color: var(--cyan-deep);
	box-shadow: 0 0 0 3px rgba(11, 192, 237, .3);
}
.ind .inp[aria-invalid="true"] { border-color: var(--indica-erro); }
.ind .inp[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(166, 27, 27, .18); }
.ind-ajuda { display: block; margin-top: 6px; font-size: 13px; color: var(--indica-texto-2); }
.ind .ind-ajuda { font-size: 14px; }
.ind-erro-campo {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--indica-erro);
}
.ind .ind-erro-campo { font-size: 14px; }
.ind-erro-campo:empty { display: none; }
.ind-linha { display: flex; gap: 12px; }
.ind-linha > * { flex: 1 1 0; min-width: 0; }
.ind-linha > .ind-campo--uf { flex: 0 0 96px; }
.ind-contador { float: right; font-weight: 400; font-size: 13px; color: var(--texto-2); }

.ind-escolhas { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; border: 0; }
.ind-escolhas legend { float: left; width: 100%; margin: 0 0 6px 0; padding: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.ind-escolha { position: relative; flex: 1 1 140px; margin: 0; }
.ind-escolha input {
	position: absolute;
	opacity: 0;
	width: 1px; height: 1px;
}
.ind-escolha span {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	min-height: 56px;
	padding: 10px 36px 10px 14px;
	border: 1.5px solid var(--linha-forte);
	border-radius: 14px;
	background: #fff;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}
.ind-escolha small { font-weight: 400; color: var(--texto-2); }
.ind-escolha span:hover { border-color: #8FA2AC; }
.ind-escolha input:checked + span {
	border-color: var(--cyan-deep);
	background: var(--sky);
	box-shadow: 0 0 0 1px var(--cyan-deep) inset;
}
.ind-escolha input:checked + span::before {
	content: "✓";
	position: absolute;
	top: 8px;
	right: 12px;
	color: var(--cyan-deep);
	font-weight: 800;
}
.ind-escolha input:focus-visible + span { outline: 3px solid var(--cyan-deep); outline-offset: 2px; }
.ind-escolha input:disabled + span { opacity: .55; cursor: not-allowed; }
/* as opções da mesma linha ficam com a mesma altura (o rótulo estica o cartão) */
.ind-escolhas > .ind-escolha { display: flex; }
.ind-escolha > span { flex: 1 1 auto; }
/* celular: uma opção por linha, título e subtítulo cada um em uma linha */
@media (max-width: 419px) {
	.ind-escolha { flex-basis: 100%; }
	.ind-escolha > span { min-height: 0; padding: 12px 40px 12px 16px; }
}

.ind-check {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-height: 44px;
	margin: 0 0 14px 0;
	font-size: 15px;
	cursor: pointer;
}
.ind-check input {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	accent-color: var(--cyan-deep);
}

/* ---------- Mensagens (reaproveita .envio-feedback do site) ---------- */
.ind .envio-feedback { margin: 16px 0 0 0; }
.ind-alerta {
	margin: 0 0 16px 0;
	padding: 14px 16px;
	border: 1px solid var(--indica-ciano-borda);
	border-left: 4px solid var(--indica-ciano);
	border-radius: var(--indica-raio-p);
	background: var(--indica-ciano-claro);
	color: var(--indica-texto);
	font-size: 15px;
}
.ind-alerta > :last-child { margin-bottom: 0; }
.ind-alerta strong { display: block; margin-bottom: 2px; }
.ind-alerta--aviso { border-color: var(--indica-aviso-borda); border-left-color: #c98a00; background: var(--indica-aviso-fundo); color: #4d3500; }
.ind-alerta--erro { border-color: var(--indica-erro-borda); border-left-color: var(--indica-erro); background: var(--indica-erro-fundo); color: #7a1414; }
.ind-alerta--ok { border-color: var(--indica-ok-borda); border-left-color: var(--indica-ok); background: var(--indica-ok-fundo); color: #14532f; }
.ind-alerta .ind-acoes { margin-top: 10px; }

/* ---------- Cartões e seções (páginas internas) ---------- */
.ind-card {
	background: #fff;
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	padding: 20px;
	box-shadow: var(--sombra);
}
@media (min-width: 768px) { .ind-card { padding: 24px; } }
.ind-card + .ind-card { margin-top: 16px; }
/* dentro de grades o espaço vem do gap: sem a margem acima, os cartões ficam alinhados */
.ind-grade > .ind-card, .ind-saldos > .ind-card, .ind-itens > .ind-card { margin-top: 0; }
.ind-card > :last-child { margin-bottom: 0; }
.ind-card h2 { font-size: 20px; }
.ind-secao { margin-top: 36px; }
.ind-secao-titulo {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}
.ind-secao-titulo h1,
.ind-secao-titulo h2 { margin: 0; }
.ind-secao-titulo > a:not(.btpadrao) { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; font-weight: 600; }
.ind-rotulo-sec {
	display: block;
	margin: 0 0 4px 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--texto-2);
}
.ind .ind-saudacao { margin-bottom: 6px; }
@media (max-width: 575px) {
	.ind-acoes--cheio > .btpadrao { flex: 1 1 auto; }
}
.ind-main > .ind-container > h1 + .ind-texto-2 { font-size: 17px; max-width: 40em; }

.ind-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 768px) {
	.ind-grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ind-grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ind-grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ind-produto-valor {
	margin: 4px 0 12px 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--cyan-deep);
}

/* ======================================================================
   Landing (indica/index.html)
   ====================================================================== */
.ind-landing p { max-width: 42em; }

/* ---------- Topo: foto em tela cheia + calculadora ----------
   Celular: grade de 1 coluna. A foto ocupa a linha do texto e uma faixa de 48 px que fica
   atrás do topo do cartão (o cartão "sobe" 48 px sobre a borda da foto).
   Desktop (992+): texto à esquerda, cartão à direita, foto atrás de tudo. */
.ind-hero {
	position: relative;
	display: grid;
	grid-template-columns: 16px minmax(0, 1fr) 16px;
	grid-template-rows: auto 48px auto;
	background: var(--paper);
}
.ind-hero-foto {
	position: relative;
	display: block;
	grid-column: 1 / -1;
	grid-row: 1 / 3;
	overflow: hidden;
	background: var(--ink);
}
.ind-hero-foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 0;
}
/* tablet (768–991): título branco com contraste ≥ 3:1 no pior pixel da foto */
.ind-hero-foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(15, 38, 51, .62) 0,
		rgba(15, 38, 51, .4) 96px,
		rgba(15, 38, 51, .58) 19%,
		rgba(15, 38, 51, .8) 31%,
		rgba(15, 38, 51, .92) 46%,
		#0F2633 66%);
}
.ind-hero-texto {
	position: relative;
	z-index: 1;
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: calc(55vh - 48px);
	padding: calc(var(--indica-header-h) + 12vh) 0 36px 0;
	color: #fff;
}
.ind-landing .ind-hero h1 {
	max-width: 13em;
	margin: 0 0 16px 0;
	color: #fff;
	font-size: 36px;
	line-height: 1.08;
	letter-spacing: -.025em;
	text-wrap: balance;
	text-shadow: 0 1px 12px rgba(15, 38, 51, .35);
}
.ind .ind-hero-sub {
	margin: 0 0 24px 0;
	font-size: 17px;
	line-height: 1.55;
	color: #E3ECF0;
	text-wrap: pretty;
}
/* celular: só a ação que importa para quem chega (o "Entrar" já está no cabeçalho; o #ctaEntrar
   continua no DOM e a landing.js segue trocando o texto quando há sessão) */
@media (max-width: 575px) {
	.ind-hero .ind-acoes .ind-bt-claro { display: none; }
	.ind-hero .ind-acoes .btpadrao.primary { flex: 1 1 100%; }
}
.ind-hero #avisoPortal:not(:empty) { margin-bottom: 8px; }
.ind-hero .ind-alerta { color: #4d3500; }

/* celular: recorte quadrado da foto (cama e almofada LOBIE Design) visível no alto, texto mais abaixo */
@media (max-width: 767px) {
	.ind-hero-foto img { object-position: 80% 0; }
	.ind-hero-foto::after {
		background: linear-gradient(180deg,
			rgba(15, 38, 51, .6) 0,
			rgba(15, 38, 51, 0) 110px,
			rgba(15, 38, 51, 0) 28%,
			rgba(15, 38, 51, .72) 42%,
			rgba(15, 38, 51, .95) 54%,
			#0F2633 64%);
	}
	.ind-hero-texto { padding-top: calc(var(--indica-header-h) + 26vh); }
	.ind-landing .ind-hero h1 { font-size: 32px; }
}
@media (min-width: 768px) {
	.ind-hero { grid-template-columns: 24px minmax(0, 1fr) 24px; }
	.ind-hero-foto img { object-position: 50% 15%; }
	.ind-hero-texto { padding-bottom: 44px; }
	.ind-landing .ind-hero h1 { font-size: 52px; }
	.ind .ind-hero-sub { font-size: 19px; max-width: 34em; }
}
@media (min-width: 992px) {
	.ind-hero {
		grid-template-columns: minmax(24px, 1fr) minmax(0, 664px) 56px minmax(380px, 440px) minmax(24px, 1fr);
		grid-template-rows: auto;
		min-height: max(680px, min(100vh, 940px));
		background: var(--ink);
	}
	.ind-hero-foto { grid-row: 1; }
	.ind-hero-foto img { object-position: 46% 50%; }
	.ind-hero-foto::after {
		background:
			linear-gradient(180deg, rgba(15, 38, 51, .55) 0, rgba(15, 38, 51, 0) 160px),
			linear-gradient(90deg,
				rgba(15, 38, 51, .94) 0%,
				rgba(15, 38, 51, .86) 30%,
				rgba(15, 38, 51, .6) 52%,
				rgba(15, 38, 51, .06) 70%,
				rgba(15, 38, 51, .12) 100%);
	}
	.ind-hero-texto {
		grid-row: 1;
		min-height: 0;
		justify-content: center;
		padding: calc(var(--indica-header-h) + 48px) 0 80px 0;
	}
	.ind .ind-hero-sub { max-width: 31em; }
	.ind-hero .ind-calc {
		grid-column: 4;
		grid-row: 1;
		align-self: center;
		max-width: none;
		margin: calc(var(--indica-header-h) + 32px) 0 64px 0;
	}
}
@media (min-width: 1200px) {
	.ind-landing .ind-hero h1 { font-size: 56px; }
	.ind .ind-hero-sub { font-size: 20px; }
}

/* ---------- Calculadora ---------- */
.ind-calc {
	position: relative;
	z-index: 2;
	grid-column: 2;
	grid-row: 2 / 4;
	padding: 22px 20px 20px 20px;
	border: 1px solid rgba(15, 38, 51, .08);
	border-radius: var(--raio-g);
	background: #fff;
	color: var(--ink);
	box-shadow: var(--sombra-alta);
}
@media (min-width: 768px) { .ind-calc { padding: 28px 28px 24px 28px; } }

.ind-landing .ind-calc h2 { margin: 0 0 18px 0; font-size: 20px; letter-spacing: -.015em; }
.ind-calc-campo { margin: 0 0 20px 0; }
.ind-calc-campo label { display: block; margin: 0; font-size: 15px; font-weight: 600; color: var(--texto-2); }
.ind-calc-venda {
	display: block;
	margin: 2px 0 10px 0;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}
.ind-calc-escala { display: flex; justify-content: space-between; margin-top: 4px; font-size: 13px; color: var(--texto-2); font-variant-numeric: tabular-nums; }

/* faixa (input range) nativa, com a parte preenchida em --preenchido (CSSOM) */
.ind-faixa-valor {
	--preenchido: 41%;
	display: block;
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.ind-faixa-valor::-webkit-slider-runnable-track {
	height: 8px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--cyan) 0, var(--cyan) var(--preenchido), #DCE8ED var(--preenchido), #DCE8ED 100%);
}
.ind-faixa-valor::-moz-range-track { height: 8px; border-radius: 4px; background: #DCE8ED; }
.ind-faixa-valor::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--cyan); }
.ind-faixa-valor::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 28px;
	height: 28px;
	margin-top: -10px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--ink);
	box-shadow: 0 0 0 1px rgba(15, 38, 51, .25), 0 2px 6px rgba(15, 38, 51, .35);
}
.ind-faixa-valor::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--ink);
	box-shadow: 0 0 0 1px rgba(15, 38, 51, .25), 0 2px 6px rgba(15, 38, 51, .35);
}
.ind-faixa-valor:focus { outline: none; }
.ind-faixa-valor:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--cyan-deep); }
.ind-faixa-valor:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--cyan-deep); }

.ind-calc-opcoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 22px 0; padding: 0; border: 0; }
.ind-calc-opcoes legend { grid-column: 1 / -1; float: left; width: 100%; margin: 0 0 8px 0; padding: 0; font-size: 15px; font-weight: 600; color: var(--texto-2); }
.ind-calc-opcao { position: relative; display: block; margin: 0; }
.ind-calc-opcao input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ind-calc-opcao > span {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	height: 100%;
	min-height: 60px;
	padding: 12px 12px 12px 44px;
	border: 1.5px solid var(--linha-forte);
	border-radius: 14px;
	background: #fff;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}
.ind-calc-opcao > span:hover { border-color: #8FA2AC; }
/* rádio desenhado (o input nativo continua no lugar, para teclado e leitor de tela) */
.ind-calc-opcao > span::before {
	content: "";
	position: absolute;
	left: 13px; top: 50%;
	width: 20px; height: 20px;
	margin-top: -10px;
	border: 2px solid #7C8F99;
	border-radius: 50%;
	background: #fff;
	box-sizing: border-box;
}
.ind-calc-opcao input:checked + span {
	border-color: var(--ink);
	background: var(--sky);
	box-shadow: 0 0 0 1px var(--ink) inset;
}
.ind-calc-opcao input:checked + span::before { border: 6px solid var(--ink); }
.ind-calc-opcao input:focus-visible + span { outline: 3px solid var(--cyan-deep); outline-offset: 2px; }
/* .ind na frente: o .ind strong (peso 600) não pode vencer o número que mais interessa */
.ind .ind-calc-pct { font-size: 22px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ind .ind-calc-ajuda { margin: -12px 0 20px 0; font-size: 13px; line-height: 1.45; color: var(--texto-2); }

.ind .ind-calc-resultado { margin: 0; padding-top: 18px; border-top: 1px solid var(--linha); }
.ind .ind-calc-rotulo { margin: 0; font-size: 15px; font-weight: 600; color: var(--texto-2); }
.ind .ind-calc-valor {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 14px 0;
	font-size: 52px;
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.ind-calc-moeda { font-size: 24px; letter-spacing: -.01em; }
@media (max-width: 359px) { .ind .ind-calc-valor { font-size: 44px; } }

/* barra da comissão: entrada (40%) + 4 parcelas; o preenchimento é a única animação da página */
.ind-calc-barra,
.ind-calc-legenda {
	display: grid;
	grid-template-columns: 40fr 15fr 15fr 15fr 15fr;
	gap: 4px;
}
.ind-calc-barra > span {
	display: block;
	height: 14px;
	overflow: hidden;
	border-radius: 3px;
	background: #DCE8ED;
}
.ind-calc-barra > span:first-child { border-radius: 7px 3px 3px 7px; }
.ind-calc-barra > span:last-child { border-radius: 3px 7px 7px 3px; }
.ind-calc-barra i {
	display: block;
	height: 100%;
	background: var(--cyan);
	transform-origin: 0 50%;
	transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.ind-calc-barra > span:first-child i { background: var(--ink); }
.ind-calc-barra > span:nth-child(2) i { transition-delay: .4s; }
.ind-calc-barra > span:nth-child(3) i { transition-delay: .55s; }
.ind-calc-barra > span:nth-child(4) i { transition-delay: .7s; }
.ind-calc-barra > span:nth-child(5) i { transition-delay: .85s; }
.ind-calc-barra.is-vazia i { transform: scaleX(0); transition: none; }
.ind-calc-legenda { margin: 8px 0 0 0; font-size: 13px; line-height: 1.35; color: var(--texto-2); }
.ind-calc-legenda > div:last-child { grid-column: 2 / -1; }
.ind-calc-legenda strong { display: block; color: var(--ink); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ind .ind-calc-nota { margin: 14px 0 0 0; font-size: 14px; line-height: 1.5; color: var(--texto-2); }
.ind .ind-calc-fonte { margin: 6px 0 0 0; font-size: 13px; color: var(--texto-2); }

/* tablet: o cartão ocupa a largura toda, com os controles à esquerda e o resultado à direita */
@media (min-width: 768px) and (max-width: 991px) {
	.ind-calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
	.ind-landing .ind-calc h2 { grid-column: 1 / -1; }
	.ind-calc-campo, .ind-calc-opcoes, .ind-calc-ajuda { grid-column: 1; }
	.ind-calc-opcoes { margin-bottom: 0; }
	.ind .ind-calc-ajuda { margin: 8px 0 0 0; }
	.ind .ind-calc-resultado { grid-column: 2; grid-row: 2 / 5; padding: 0 0 0 32px; border-top: 0; border-left: 1px solid var(--linha); }
}

/* ---------- Seções da landing ---------- */
.ind-sec { padding: 56px 0; }
.ind-sec--mist { background: var(--mist); }
.ind-sec--escuro { background: var(--ink); color: #fff; }
.ind-sec--escuro :focus-visible { outline-color: var(--cyan); }
.ind-sec-cab { margin: 0 0 28px 0; }
.ind-landing .ind-sec h2 { font-size: 26px; line-height: 1.15; margin-bottom: 12px; text-wrap: balance; }
.ind-landing .ind-sec h3 { font-size: 20px; font-weight: 800; letter-spacing: -.015em; }
.ind .ind-lead { font-size: 17px; color: var(--texto-2); }
@media (min-width: 768px) {
	.ind-sec { padding: 88px 0; }
	.ind-landing .ind-sec h2 { font-size: 36px; }
	.ind-sec-cab { margin-bottom: 40px; }
	.ind .ind-lead { font-size: 20px; }
}

/* Produtos: dois cartões altos com foto */
.ind-produtos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .ind-produtos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.ind-produto {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--linha);
	border-radius: var(--raio-g);
	background: #fff;
	box-shadow: var(--sombra);
}
.ind-produto-foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mist); }
.ind-produto-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ind-produto-corpo { display: flex; flex: 1 1 auto; flex-direction: column; padding: 22px 20px 24px 20px; }
@media (min-width: 768px) { .ind-produto-corpo { padding: 28px 28px 30px 28px; } }
.ind-produto-corpo h3 { margin-bottom: 8px; }
.ind-produto-corpo > p { color: var(--texto-2); }
.ind .ind-produto-ganho {
	margin: auto 0 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--linha);
	color: var(--ink);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.45;
}
.ind .ind-produto--gestao .ind-produto-ganho { font-size: 15px; font-weight: 500; color: var(--texto-2); }
/* desktop: 16 px de respiro + 2 linhas, para as divisórias dos dois cartões caírem na mesma altura */
@media (min-width: 768px) { .ind .ind-produto-ganho { min-height: 66px; } }

/* Como funciona: 3 etapas ligadas por uma linha (vertical no celular, horizontal no desktop) */
.ind-etapas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
.ind-etapas li { position: relative; padding: 0 0 32px 68px; }
.ind-etapas li:last-child { padding-bottom: 0; }
.ind-etapas li::after {
	content: "";
	position: absolute;
	left: 23px; top: 52px; bottom: 6px;
	width: 2px;
	background: #BFD3DC;
}
.ind-etapas li:last-child::after { display: none; }
.ind-etapa-num {
	position: absolute;
	left: 0; top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--ink);
	color: #fff;
	font-size: 20px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}
.ind-etapas h3 { margin: 10px 0 6px 0; }
.ind-etapas p { margin: 0; color: var(--texto-2); }
@media (min-width: 768px) {
	.ind-etapas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
	.ind-etapas li { padding: 72px 0 0 0; }
	.ind-etapas li::after { left: 64px; right: -24px; top: 23px; bottom: auto; width: auto; height: 2px; }
	.ind-etapas h3 { margin-top: 0; }
}

/* Duas colunas (texto + peça visual) */
.ind-duas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
@media (min-width: 992px) { .ind-duas { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; } }

/* Status automático: cartão de indicação de exemplo */
.ind-exemplo {
	margin: 0;
	padding: 20px;
	border: 1px solid var(--linha);
	border-radius: var(--raio-g);
	background: #fff;
	box-shadow: var(--sombra-alta);
}
@media (min-width: 768px) { .ind-exemplo { padding: 28px; } }
.ind-exemplo-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.ind-exemplo-topo img { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.ind-exemplo-topo > div { flex: 1 1 auto; min-width: 0; }
.ind .ind-exemplo-nome { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.ind .ind-exemplo-alvo { margin: 0; font-size: 14px; color: var(--texto-2); }
.ind-selo--exemplo { border-color: #E8C77A !important; background: #FFF6DF !important; color: #5A3E00 !important; }
.ind-exemplo-etapas { margin: 0; padding: 0; list-style: none; }
.ind-exemplo-etapas li {
	position: relative;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	min-height: 44px;
	padding: 2px 0 14px 40px;
	font-size: 16px;
}
.ind-exemplo-etapas li::before {
	/* marcador: círculo vazio (próxima), com ✓ (feita) ou cheio (atual) */
	content: "";
	position: absolute;
	left: 0; top: 2px;
	width: 24px; height: 24px;
	box-sizing: border-box;
	border: 2px solid #9DB0BA;
	border-radius: 50%;
	background: #fff;
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	line-height: 20px;
	text-align: center;
}
.ind-exemplo-etapas li::after {
	content: "";
	position: absolute;
	left: 11px; top: 28px; bottom: 0;
	width: 2px;
	background: #D3DEE3;
}
.ind-exemplo-etapas li:last-child::after { display: none; }
.ind-exemplo-etapas li.is-feita::before { content: "✓"; border-color: var(--ink); background: var(--ink); }
.ind-exemplo-etapas li.is-feita::after { background: var(--ink); }
.ind-exemplo-etapas li.is-atual::before { border: 7px solid var(--cyan); box-shadow: 0 0 0 4px rgba(11, 192, 237, .22); }
.ind-exemplo-etapas li.is-atual { font-weight: 600; }
.ind-exemplo-etapas li:not(.is-feita):not(.is-atual) { color: var(--texto-2); }
/* a pílula "Etapa atual", quando cai na linha de baixo, fica alinhada ao texto da etapa */
.ind-exemplo-etapa { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.ind-exemplo-agora {
	display: inline-block;
	margin-left: 0;
	padding: 1px 8px;
	border-radius: 10px;
	background: var(--ink);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	vertical-align: 2px;
	white-space: nowrap;
}
.ind-exemplo-etapas time { flex: 0 0 auto; font-size: 14px; font-weight: 500; color: var(--texto-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ind-exemplo-valores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0 0 0; padding: 14px; border-radius: var(--raio-p); background: var(--mist); }
.ind-exemplo-valores dt { font-size: 13px; font-weight: 500; color: var(--texto-2); }
.ind-exemplo-valores dd { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ind-exemplo figcaption { margin-top: 12px; font-size: 13px; color: var(--texto-2); }
@media (max-width: 359px) {
	.ind-exemplo-valores dd { font-size: 15px; }
}

/* Confiança (seção escura) */
.ind-confianca { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.ind-confianca-foto { display: none; }
@media (min-width: 768px) {
	.ind-confianca { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; }
	.ind-confianca-foto { display: block; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--raio-g); }
	.ind-confianca-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
}
.ind-landing .ind-sec .ind-frase {
	margin: 0 0 28px 0;
	font-size: 36px;
	line-height: 1.12;
	letter-spacing: -.025em;
	max-width: 16em;
}
@media (min-width: 992px) { .ind-landing .ind-sec .ind-frase { font-size: 52px; } }
.ind-garantias p { margin: 0 0 14px 0; color: var(--sobre-escuro-2); }
.ind-garantias p:last-child { margin-bottom: 0; }
.ind-garantias strong { color: #fff; font-weight: 600; }

/* Perguntas frequentes */
.ind-faq-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 992px) { .ind-faq-grade { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; } }
.ind-faq-lado p { color: var(--texto-2); }
.ind-faq-lado a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* Faixa final com foto */
.ind-cta-final { position: relative; overflow: hidden; background: var(--ink); color: #fff; }
.ind-cta-foto { position: absolute; inset: 0; display: block; }
.ind-cta-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.ind-cta-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15, 38, 51, .9) 0%, rgba(15, 38, 51, .7) 50%, rgba(15, 38, 51, .3) 100%); }
.ind-cta-conteudo { position: relative; z-index: 1; padding-top: 72px; padding-bottom: 72px; }
.ind-landing .ind-cta-final h2 { max-width: 14em; margin: 0 0 24px 0; color: #fff; font-size: 36px; line-height: 1.12; text-wrap: balance; }
@media (min-width: 768px) {
	.ind-cta-conteudo { padding-top: 112px; padding-bottom: 112px; }
	.ind-landing .ind-cta-final h2 { font-size: 52px; }
}
.ind-cta-final :focus-visible { outline-color: #fff; }

.ind-faq details {
	border-bottom: 1px solid var(--linha);
}
.ind-faq details:first-child { border-top: 1px solid var(--linha); }
.ind-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 60px;
	padding: 14px 0;
	font-size: 17px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}
.ind-faq summary:hover { color: var(--cyan-deep); }
.ind-faq summary::-webkit-details-marker { display: none; }
.ind-faq summary::after {
	content: "+";
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1.5px solid var(--linha-forte);
	border-radius: 50%;
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
	color: var(--ink);
}
.ind-faq details[open] summary::after { content: "–"; background: var(--ink); border-color: var(--ink); color: #fff; }
.ind-faq details p { color: var(--texto-2); padding-bottom: 10px; }

/* ---------- Painel: saldo e funil ---------- */
.ind-faixa-status { margin: 0 0 16px 0; }
.ind-saldos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 768px) { .ind-saldos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.ind-saldo { padding: 18px 20px 20px 20px; }
.ind-saldo-rotulo { display: block; font-size: 15px; font-weight: 600; color: var(--texto-2); }
.ind-saldo-valor { display: block; margin: 4px 0 4px 0; font-size: 36px; font-weight: 800; line-height: 1.15; letter-spacing: -.025em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ind-saldo-nota { display: block; font-size: 14px; color: var(--texto-2); }
.ind-saldo--liberado { border-color: #A9E3F5; background: var(--sky); box-shadow: inset 0 4px 0 var(--cyan), var(--sombra); }
/* Celular: o Liberado (o que o corretor recebe) vem primeiro, em tinta e com número maior;
   Previsto e Pago viram linhas compactas. O extrato (.ind-saldos--4) fica de fora. */
@media (max-width: 767px) {
	.ind-saldo--liberado {
		order: -1;
		border-color: var(--ink);
		background: var(--ink);
		color: #fff;
		box-shadow: inset 0 4px 0 var(--cyan), var(--sombra-alta);
	}
	.ind-saldo--liberado .ind-saldo-rotulo,
	.ind-saldo--liberado .ind-saldo-nota { color: var(--sobre-escuro-2); }
	.ind-saldo--liberado .ind-saldo-valor { font-size: 40px; }
	.ind-saldos:not(.ind-saldos--4) > .ind-saldo:not(.ind-saldo--liberado) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: baseline;
		column-gap: 12px;
		padding: 14px 18px;
	}
	.ind-saldos:not(.ind-saldos--4) > .ind-saldo:not(.ind-saldo--liberado) .ind-saldo-valor { font-size: 20px; margin: 0; }
	.ind-saldos:not(.ind-saldos--4) > .ind-saldo:not(.ind-saldo--liberado) .ind-saldo-nota { grid-column: 1 / -1; }
}
.ind-saldos > .ind-alerta { grid-column: 1 / -1; margin: 0; }
.ind-saldos--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 359px) { .ind-saldos--4 { grid-template-columns: minmax(0, 1fr); } }
.ind-saldos--4 .ind-saldo { padding: 14px 16px; }
.ind-saldos--4 .ind-saldo-valor { font-size: 20px; }
@media (min-width: 768px) {
	.ind-saldos--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.ind-saldos--4 .ind-saldo-valor { font-size: 26px; }
}

.ind-funil { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; padding: 0; overflow: hidden; background: var(--linha); }
.ind-funil > div { display: flex; flex-direction: column; padding: 14px 16px; background: #fff; }
.ind-funil-rotulo { display: block; font-size: 14px; font-weight: 500; color: var(--texto-2); }
.ind-funil-valor { display: block; margin-top: auto; padding-top: 2px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .ind-funil { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ind-funil-grupo { grid-column: 1 / -1; padding: 8px 16px !important; background: var(--mist) !important; font-size: 14px; font-weight: 600; color: var(--texto-2); }
@media (min-width: 768px) { .ind-funil > .ind-funil-grupo { display: none; } }

.ind-lista-alertas { margin: 0; padding: 0; list-style: none; }

/* ---------- Esqueleto, vazio, erro ---------- */
.ind-esqueleto {
	display: block;
	min-height: 18px;
	border-radius: 8px;
	background: linear-gradient(90deg, #E8EEF1 0%, #F4F7F9 50%, #E8EEF1 100%);
	background-size: 200% 100%;
	animation: ind-brilho 1.2s ease-in-out infinite;
}
.ind-esqueleto--card { min-height: 120px; border-radius: var(--indica-raio); }
.ind-esqueleto + .ind-esqueleto { margin-top: 12px; }
@keyframes ind-brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
	.ind-esqueleto { animation: none; }
	.ind * { transition: none !important; scroll-behavior: auto !important; }
}
.ind-vazio {
	padding: 32px 20px;
	text-align: center;
	color: var(--texto-2);
	background: #fff;
	border: 1px dashed #B7C4CB;
	border-radius: var(--indica-raio);
}
.ind-vazio p { margin-bottom: 14px; }
.ind-vazio .ind-acoes { justify-content: center; }
/* estado vazio do painel: convite para compartilhar o link */
.ind-vazio--convite {
	display: grid;
	gap: 4px;
	padding: 24px 20px;
	border: 1px solid #A9E3F5;
	background: var(--sky);
	color: var(--ink);
	text-align: left;
}
.ind-vazio--convite h3 { margin: 0 0 4px 0; font-size: 20px; font-weight: 800; letter-spacing: -.015em; }
.ind-vazio--convite p { margin: 0 0 12px 0; max-width: 36em; color: var(--texto-2); }
.ind-vazio--convite .ind-acoes { justify-content: flex-start; }
@media (min-width: 768px) { .ind-vazio--convite { padding: 28px; } }

/* ---------- Indicações ---------- */
.ind-chips {
	display: flex;
	gap: 8px;
	margin: 0 -16px 16px -16px;
	padding: 2px 16px 6px 16px;
	overflow-x: auto;
	scrollbar-width: none;
	list-style: none;
}
.ind-chips::-webkit-scrollbar { display: none; }
.ind-chip {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 8px 18px;
	border: 1.5px solid var(--linha-forte);
	border-radius: 22px;
	background: #fff;
	color: var(--ink);
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
}
.ind-chip:hover { border-color: #8FA2AC; }
.ind-chip[aria-pressed="true"] {
	border-color: var(--ink);
	background: var(--ink);
	color: #fff;
	font-weight: 600;
}
@media (min-width: 768px) { .ind-chips { margin: 0 0 16px 0; padding: 2px 0 6px 0; flex-wrap: wrap; } }

.ind-itens { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 992px) { .ind-itens { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.ind-item { display: flex; flex-direction: column; gap: 10px; }
.ind-item-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
/* nome e contato encolhem (min-width: 0) e quebram em qualquer ponto: um e-mail mascarado com
   domínio longo não empurra os selos para fora do cartão nem cria rolagem horizontal */
.ind-item-topo > div:first-child { flex: 1 1 auto; min-width: 0; }
.ind-item-nome { margin: 0; font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.ind-item-contato { margin: 2px 0 0 0; font-size: 14px; color: var(--texto-2); overflow-wrap: anywhere; text-wrap: balance; }
.ind-item-alvo { margin: 0; font-size: 15px; color: var(--texto-2); }
.ind-selos { display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ind-selo {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 2px 10px;
	border-radius: 12px;
	border: 1px solid var(--indica-ciano-borda);
	background: var(--indica-ciano-claro);
	color: var(--indica-sobre-ciano);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}
.ind-selo--gestao { border-color: #cfd6d8; background: var(--indica-fundo-2); color: #3a4143; }
.ind-selo--neutro { border-color: #cfd6d8; background: #fff; color: var(--indica-texto-2); font-weight: 500; }
.ind-etapa { margin: 0; font-size: 16px; font-weight: 600; }
.ind-progresso {
	position: relative;
	height: 8px;
	margin-top: 8px;
	border-radius: 4px;
	background: #DCE8ED;
	overflow: hidden;
}
.ind-progresso-barra { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--cyan); }
.ind-valores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 12px; background: var(--mist); border-radius: var(--raio-p); }
.ind-valores dt { font-size: 13px; font-weight: 500; color: var(--texto-2); }
.ind-valores dd { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 399px) {
	.ind-valores { grid-template-columns: minmax(0, 1fr); gap: 4px; }
	.ind-valores > div:not(.ind-valores-regra) { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
}
.ind-valores-regra { grid-column: 1 / -1; font-size: 13px; color: var(--texto-2); }
.ind-nota { margin: 0; padding: 12px; background: var(--mist); border-radius: var(--raio-p); font-size: 14px; color: var(--texto-2); }
.ind-item-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--texto-2); }

/* ---------- Painel deslizante (detalhe) ---------- */
.ind-painel-lateral {
	position: fixed;
	inset: auto 0 0 0;
	width: 100%;
	max-width: none;
	max-height: 88vh;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 20px 20px 0 0;
	background: #fff;
	color: var(--ink);
	box-shadow: 0 -8px 40px rgba(15, 38, 51, .2);
	overflow: hidden;
}
.ind-painel-lateral:not([open]) { display: none; } /* o reboot do Bootstrap 4.0 põe dialog{display:block} */
.ind-painel-lateral[open] { display: flex; flex-direction: column; }
.ind-painel-lateral::backdrop { background: rgba(15, 38, 51, .5); }
.ind-painel-cab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 12px 12px 20px;
	border-bottom: 1px solid var(--linha);
}
.ind-painel-cab h2 { margin: 0; font-size: 20px; }
.ind-painel-corpo { padding: 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ind-fechar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--mist);
	color: var(--ink);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}
.ind-fechar:hover { background: var(--linha); }
@media (min-width: 768px) {
	.ind-painel-lateral {
		inset: 0 0 0 auto;
		width: 440px;
		height: 100vh;
		max-height: 100vh;
		border-radius: 0;
		box-shadow: -8px 0 40px rgba(15, 38, 51, .2);
	}
}
.ind-linha-tempo { margin: 0; padding: 0; list-style: none; }
.ind-linha-tempo li { position: relative; padding: 0 0 16px 24px; }
.ind-linha-tempo li::before {
	content: "";
	position: absolute;
	left: 4px; top: 7px;
	width: 10px; height: 10px;
	border-radius: 50%;
	background: var(--ink);
}
.ind-linha-tempo li::after {
	content: "";
	position: absolute;
	left: 8px; top: 20px; bottom: 0;
	width: 2px;
	background: var(--linha);
}
.ind-linha-tempo li:last-child::after { display: none; }
.ind-linha-tempo time { display: block; font-size: 13px; color: var(--texto-2); }
.ind-comprovante {
	padding: 16px;
	border: 1.5px dashed var(--cyan-deep);
	border-radius: var(--raio-p);
	background: var(--sky);
	font-size: 15px;
}
.ind-comprovante p { margin: 0 0 10px 0; overflow-wrap: anywhere; }
html.ind-modal-aberto, html.ind-modal-aberto body { overflow: hidden; }

/* ---------- Extrato ---------- */
.ind-filtro { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.ind-filtro .ind-campo { flex: 1 1 0; min-width: 0; margin: 0; }
/* De e Até lado a lado no celular; o padding menor evita que o Chrome corte "dd/mm/aaaa" */
.ind-filtro .inp { min-width: 0; padding-left: 10px; padding-right: 8px; }
@media (max-width: 575px) { .ind-filtro .ind-acoes { flex: 1 1 100%; } }
.ind-lancamentos { margin: 0; padding: 0; list-style: none; }
.ind-lancamento {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px 12px;
	padding: 14px 0;
	border-bottom: 1px solid var(--linha);
}
.ind-lancamento:last-child { border-bottom: 0; }
.ind-lancamento-desc { font-weight: 500; overflow-wrap: anywhere; }
.ind-lancamento-valor { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ind-lancamento-valor--negativo { color: var(--indica-erro); }
.ind-lancamento-meta { grid-column: 1 / -1; font-size: 14px; color: var(--texto-2); }
.ind-lancamento .ind-selo { margin-right: 6px; }

/* ---------- Kit ---------- */
.ind-link-caixa {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ind-link-texto {
	display: block;
	padding: 12px 14px;
	border: 1px solid var(--linha);
	border-radius: var(--raio-p);
	background: var(--mist);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 15px;
	overflow-wrap: anywhere;
	user-select: all;
}
.ind-codigo { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 600; letter-spacing: .08em; }
.ind .ind-codigo.ind-produto-valor { font-size: 26px; font-weight: 700; color: var(--ink); }
.ind-qr { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ind-qr img {
	display: block;
	width: 220px;
	height: 220px;
	padding: 8px;
	background: #fff;
	border: 1px solid var(--linha);
	border-radius: var(--raio-p);
	image-rendering: pixelated;
}
.ind-wa { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ind-wa li { padding: 16px; border: 1px solid var(--linha); border-radius: var(--raio); background: #fff; box-shadow: var(--sombra); }
.ind-wa-texto { margin: 6px 0 12px 0; font-size: 15px; color: var(--texto-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.ind-pacotes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 16px 0 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .ind-pacotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ind-pacote { padding: 16px; border: 1px solid var(--linha); border-radius: var(--raio-p); background: #fff; }
.ind-pacote h4 { margin-bottom: 8px; }
.ind-pacote dl { margin: 0; }
.ind-pacote dt { font-size: 13px; font-weight: 500; color: var(--texto-2); margin-top: 8px; }
.ind-pacote dd { margin: 0; font-variant-numeric: tabular-nums; }
.ind-pacote .ind-pacote-comissao { font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.ind .kit-opcoes { margin-bottom: 8px; }
.ind .kit-opcao { min-height: 48px; font: inherit; font-size: 15px; }
.ind .kit-opcao[aria-pressed="true"] {
	border-color: var(--ink);
	background: var(--sky);
	box-shadow: 0 0 0 1px var(--ink) inset;
}

/* ---------- Perfil ---------- */
.ind-dados { margin: 0; }
.ind-dados > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.ind-dados > div:last-child { border-bottom: 0; }
.ind-dados dt { font-size: 15px; font-weight: 500; color: var(--texto-2); }
.ind-dados dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }

/* ---------- Regulamento ---------- */
.ind-doc { max-width: 720px; }
.ind-doc h2 { margin-top: 36px; font-size: 20px; }
.ind-doc li { margin-bottom: 6px; }
.ind-doc .ind-premissa { font-size: 13px; color: var(--indica-aviso); font-weight: 500; }
.ind-indice { margin: 0; padding-left: 28px; }
.ind-indice li { margin: 0; }
.ind-indice a { display: inline-flex; align-items: center; min-height: 40px; }

/* ---------- Footer ---------- */
.ind-footer {
	padding: 28px 0 32px 0;
	border-top: 1px solid var(--linha);
	background: #fff;
	font-size: 14px;
	color: var(--texto-2);
}
.ind-footer .ind-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.ind-footer ul { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; padding: 0; list-style: none; }
.ind-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--texto-2); }
.ind-footer a:hover { color: var(--ink); }
.ind-footer img { display: block; width: 65px; height: 24px; }

/* ---------- Bloco do checkout (finalizar_decoracao.html) ----------
   Os campos usam o .inp da própria página (mesma aparência dos outros dados pessoais). */
.ind-checkout { margin: 4px 0 12px 0; text-align: left; }
.ind-checkout-aviso {
	padding: 12px 14px;
	border: 1px solid var(--indica-ciano-borda);
	border-left: 4px solid var(--indica-ciano);
	border-radius: 8px;
	background: var(--indica-ciano-claro);
	font-size: 14px;
	line-height: 1.5;
	color: #2d3436;
}
/* .finalizardecoracao p centraliza e muda o tamanho: o bloco do Indica volta ao alinhamento à esquerda */
.ind-checkout .ind-checkout-aviso p,
.ind-checkout p.ind-ajuda { margin: 0; text-align: left; font-size: 14px; line-height: 1.5; color: #2d3436; }
.ind-checkout-aviso .ind-codigo { white-space: nowrap; }
.ind-checkout .ind-bt-link { min-height: 44px; padding: 0; font-size: 14px; }
.ind-checkout label { display: block; margin: 0 0 6px 0; font-size: 14px; font-weight: 600; color: #2d3436; }
.ind-checkout p.ind-ajuda { margin: 4px 0 0 0; font-size: 12px; color: #596062; }
.ind-checkout p.ind-erro-campo { margin: 4px 0 0 0; text-align: left; font-size: 13px; }
.ind-checkout .inp { margin-bottom: 0; text-transform: uppercase; letter-spacing: .06em; }