/* Estilo Claro: base branca e cinza frio, azul eletrico com ciano, manchas pastel, tela do painel num aparelho, jornada
   da chamada animada (linha que se desenha) e setas entre passos. Regras: item de lista sem "check"; cartoes repetidos
   iguais; nada quebra de linha nem sai do cartao (min-width 0 e textos curtos). */
:root {
	--tinta: #0B1220;
	--tinta-suave: #5B6478;
	--acento: #2563EB;
	--acento-forte: #1D4ED8;
	--ciano: #06B6D4;
	--lilas: #A78BFA;
	--sol: #FBBF24;
	--sobre-acento: #FFFFFF;
	--acento-claro: #E6EEFF;
	--papel: #FFFFFF;
	--nevoa: #F5F7FB;
	--fundo: #F5F7FB;
	--linha: #E4E8F0;
	--escuro: #0B1220;
	--sobre-escuro: #FFFFFF;
	--raio-botao: 12px;
	--fonte-titulo: "Sora", system-ui, sans-serif;
	--fonte-texto: "Inter", system-ui, sans-serif;
	--sombra: 0 24px 48px -24px rgb(11 18 32 / .25), 0 1px 2px rgb(11 18 32 / .06);
	--sombra-alta: 0 32px 60px -24px rgb(37 99 235 / .35), 0 2px 6px rgb(11 18 32 / .08);
}

/* ---------- base do site, login, cadastro e blog ---------- */
html { overflow-x: clip; }
.site-publico { background: var(--papel); overflow-x: clip; }
.site-publico h1, .site-publico h2 { font-weight: 700; letter-spacing: -.03em; }
.site-publico .topo { background: rgb(255 255 255 / .82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--linha); }
.site-publico .marca { font-weight: 600; letter-spacing: -.02em; }
.site-publico .marca b { font-weight: 700; }
.site-publico .marca-icone rect { fill: var(--acento); }
.site-publico .marca-icone path { fill: #FFFFFF; }
.site-publico .menu a:not(.botao) { font-weight: 500; }
.site-publico .botao-acento { background: linear-gradient(135deg, var(--acento) 0%, #1E40AF 100%); box-shadow: 0 10px 24px -12px rgb(37 99 235 / .7); transition: translate .15s ease, box-shadow .15s ease; }
.site-publico .botao-acento:hover { background: linear-gradient(135deg, var(--acento-forte) 0%, #1E3A8A 100%); translate: 0 -1px; box-shadow: 0 14px 28px -12px rgb(37 99 235 / .8); }
.site-publico .rodape { background: var(--nevoa); color: var(--tinta-suave); border-top: 1px solid var(--linha); }
.site-publico .rodape-marca .marca { color: var(--tinta); }
.site-publico .rodape .marca-icone rect { fill: var(--acento); }
.site-publico .rodape .marca-icone path { fill: #FFFFFF; }
.site-publico .rodape-final { border-top-color: var(--linha); }
.site-publico .duvidas details { border-radius: 14px; background: var(--papel); border: 1px solid var(--linha); box-shadow: 0 1px 2px rgb(11 18 32 / .04); }
.site-publico .duvidas summary { font-weight: 600; }
.site-publico .duvidas summary::after { background-color: var(--acento-claro); }
.site-publico .posts { align-items: stretch; }
.site-publico .posts a { color: var(--tinta); display: flex; flex-direction: column; align-items: flex-start; gap: .625rem; height: 100%; border-radius: 18px; border: 1px solid var(--linha); background: var(--papel); box-shadow: var(--sombra); transition: translate .2s ease, box-shadow .2s ease; }
.site-publico .posts time { margin-top: auto; padding-top: .75rem; width: 100%; border-top: 1px solid var(--linha); font-weight: 500; }
.site-publico .pagina-topo h1 { font-size: clamp(2.25rem, 1.4rem + 3vw, 3.5rem); }
.site-publico .artigo-conteudo a { text-decoration-color: var(--acento); }
.site-publico .artigo-chamada { background: linear-gradient(135deg, #0B1220 0%, #1E3A8A 100%); color: #FFFFFF; }
.site-publico .posts a:hover { border-color: var(--acento); box-shadow: var(--sombra); translate: 0 -3px; }
.site-publico .post-categoria { border-radius: 6px; background: var(--acento-claro); color: var(--acento-forte); }
.site-publico .artigo-chamada { border-radius: 16px; }
.site-publico .campo input:focus, .site-publico .campo select:focus, .site-publico .campo textarea:focus { border-color: var(--acento); box-shadow: 0 0 0 4px var(--acento-claro); }

/* ---------- home ---------- */
.cl { --largura: 72rem; --gut: clamp(1rem, 4vw, 2rem); overflow-x: clip; }
.cl-grade { max-width: var(--largura); margin: 0 auto; padding: 0 var(--gut); }
.cl h2 { font-size: clamp(1.75rem, 1.25rem + 1.8vw, 2.5rem); line-height: 1.12; }
.cl h3 { margin: 0; font: 600 1.125rem/1.3 var(--fonte-titulo); letter-spacing: -.01em; }
.cl p { color: var(--tinta-suave); }
.cl svg { width: 1.25rem; height: 1.25rem; flex: none; }
.cl-secao { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.cl-secao-nevoa { background: var(--nevoa); }
.cl-cabeca { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.cl-cabeca p { margin-top: .75rem; font-size: 1.0625rem; }
.cl-cabeca-clara h2 { color: #FFFFFF; }
.cl-cabeca-clara p { color: rgb(255 255 255 / .75); }
.cl-levanta { transition: translate .2s ease, box-shadow .2s ease, border-color .2s ease; }

/* hero */
.cl-hero { position: relative; padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem); background: linear-gradient(180deg, #FFFFFF 0%, #F3F6FC 100%); overflow: hidden; }
.cl-mancha { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; pointer-events: none; }
.cl-mancha-a { width: 36rem; height: 36rem; right: -10rem; top: -12rem; background: radial-gradient(circle, rgb(37 99 235 / .35), rgb(6 182 212 / .18) 50%, transparent 72%); }
.cl-mancha-b { width: 28rem; height: 28rem; left: -8rem; bottom: -14rem; background: radial-gradient(circle, rgb(167 139 250 / .35), rgb(251 191 36 / .18) 55%, transparent 72%); }
.cl-hero-grade { position: relative; display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.cl-hero h1 { font-size: clamp(2.125rem, 1.1rem + 3.2vw, 3.375rem); line-height: 1.08; letter-spacing: -.035em; font-weight: 700; text-wrap: balance; }
.cl-hero h1 span { background: linear-gradient(90deg, var(--acento), var(--ciano)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cl-sub { margin-top: 1.25rem; max-width: 34rem; font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); line-height: 1.6; }
.cl-acoes { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.cl-botao-linha { background: var(--papel); color: var(--tinta); border: 1px solid var(--linha); box-shadow: 0 1px 2px rgb(11 18 32 / .05); }
.cl-botao-linha:hover { border-color: var(--tinta-suave); }
.cl-teste { display: inline-grid; grid-template-columns: auto auto; align-items: center; column-gap: .75rem; margin-top: 1.5rem; padding: .75rem 1.125rem .75rem 1rem; border-radius: 999px; background: var(--papel); border: 1px solid var(--linha); box-shadow: var(--sombra); text-decoration: none; color: var(--tinta); transition: translate .2s ease, border-color .2s ease; }
.cl-teste small { display: block; font-size: .8125rem; color: var(--tinta-suave); white-space: nowrap; }
.cl-teste b { display: block; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-teste:hover { border-color: var(--acento); translate: 0 -2px; }
.cl-ponto { width: .625rem; height: .625rem; border-radius: 50%; background: #16A34A; box-shadow: 0 0 0 4px rgb(22 163 74 / .18); }

/* palco: aparelho com a tela do painel + jornada por cima */
.cl-palco { position: relative; min-width: 0; padding-bottom: 5.5rem; }
.cl-aparelho { position: relative; border-radius: 18px; background: var(--papel); border: 1px solid var(--linha); box-shadow: var(--sombra-alta); overflow: hidden; font-size: .75rem; }
.cl-aparelho::before { content: ""; position: absolute; inset: 0; border-radius: 18px; padding: 1px; background: linear-gradient(135deg, rgb(37 99 235 / .5), rgb(6 182 212 / .4)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; -webkit-mask-composite: xor; pointer-events: none; }
.cl-aparelho-topo { display: flex; align-items: center; gap: .375rem; padding: .625rem .875rem; border-bottom: 1px solid var(--linha); background: var(--nevoa); }
.cl-aparelho-topo i { width: .5rem; height: .5rem; border-radius: 50%; background: #D5DAE3; }
.cl-aparelho-topo i:first-child { background: #F87171; } .cl-aparelho-topo i:nth-child(2) { background: var(--sol); } .cl-aparelho-topo i:nth-child(3) { background: #34D399; }
.cl-aparelho-topo span { margin-left: .5rem; font-weight: 600; color: var(--tinta-suave); white-space: nowrap; }
.cl-aparelho-corpo { padding: 1rem; }
.cl-mini-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-bottom: .75rem; }
.cl-mini-numeros div { min-width: 0; padding: .625rem .75rem; border-radius: 10px; background: var(--nevoa); }
.cl-mini-numeros b { display: block; font: 700 1.25rem/1.1 var(--fonte-titulo); color: var(--tinta); font-variant-numeric: tabular-nums; }
.cl-mini-numeros small { color: var(--tinta-suave); white-space: nowrap; }
.cl-mini-numeros div:first-child { background: linear-gradient(135deg, var(--acento), #1E40AF); } .cl-mini-numeros div:first-child b, .cl-mini-numeros div:first-child small { color: #FFFFFF; }
.cl-mini-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .375rem; }
.cl-mini-lista li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .5rem; min-width: 0; padding: .5rem .625rem; border-radius: 8px; border: 1px solid var(--linha); white-space: nowrap; }
.cl-mini-lista i { width: .5rem; height: .5rem; border-radius: 50%; background: #16A34A; }
.cl-mini-lista span { font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; overflow: hidden; }
.cl-mini-lista em { font-style: normal; color: var(--tinta-suave); }
.cl-mini-lista b { font-variant-numeric: tabular-nums; color: var(--tinta-suave); font-weight: 500; }
.cl-jornada-hero { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.cl-jornada-linha { position: absolute; left: 10%; right: 10%; top: 1.5rem; width: 80%; height: .5rem; }
.cl-jornada-linha path { fill: none; stroke: url(#x) var(--acento); stroke: var(--acento); stroke-width: 3; stroke-dasharray: 100; stroke-dashoffset: 100; vector-effect: non-scaling-stroke; opacity: .6; }
.cl-jornada-hero li { position: relative; display: grid; justify-items: center; gap: .375rem; min-width: 0; }
.cl-jornada-icone { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%; background: var(--papel); border: 2px solid var(--linha); color: var(--acento-forte); box-shadow: var(--sombra); }
.cl-jornada-icone svg { width: 1.25rem; height: 1.25rem; }
.cl-jornada-hero b { font-size: .75rem; font-weight: 600; color: var(--tinta); white-space: nowrap; text-align: center; }
.cl-tela-chamada { position: absolute; right: -.5rem; top: -1.25rem; z-index: 4; display: grid; grid-template-columns: auto auto; column-gap: .625rem; align-items: center; padding: .625rem .875rem; border-radius: 999px; background: var(--papel); border: 1px solid var(--linha); box-shadow: var(--sombra); font-size: .75rem; }
.cl-tela-chamada .cl-ponto { grid-row: span 2; }
.cl-tela-chamada b { color: var(--tinta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-tela-chamada small { color: var(--tinta-suave); white-space: nowrap; }
.cl-fatos { list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--linha); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.cl-fatos li { min-width: 0; display: grid; gap: .125rem; }
.cl-fatos b { font: 700 clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem)/1.1 var(--fonte-titulo); letter-spacing: -.03em; font-variant-numeric: tabular-nums; background: linear-gradient(90deg, var(--acento), var(--ciano)); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
.cl-fatos small { color: var(--tinta-suave); font-weight: 500; white-space: nowrap; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
	.cl-aparelho { animation: cl-flutua 7s ease-in-out infinite; }
	.cl-tela-chamada { animation: cl-flutua 6s ease-in-out infinite reverse; }
	@keyframes cl-flutua { 50% { translate: 0 -6px; } }
	.cl-jornada-linha path { animation: cl-desenha 6s ease-in-out infinite; }
	@keyframes cl-desenha { 0% { stroke-dashoffset: 100; } 55%, 100% { stroke-dashoffset: 0; } }
	.cl-jornada-hero li .cl-jornada-icone { animation: cl-acende-icone 6s ease-in-out infinite; animation-delay: calc(var(--i) * .66s); }
	@keyframes cl-acende-icone { 0%, 4% { border-color: var(--linha); background: var(--papel); color: var(--acento-forte); } 10%, 22% { border-color: var(--acento); background: var(--acento); color: #FFFFFF; box-shadow: 0 0 0 6px var(--acento-claro); } 30%, 100% { border-color: var(--linha); background: var(--papel); color: var(--acento-forte); } }
	.cl-ponto { animation: cl-pulsa 2s ease-in-out infinite; }
	@keyframes cl-pulsa { 50% { box-shadow: 0 0 0 7px rgb(22 163 74 / .08); } }
}

/* por que: 4 razoes iguais, icone + titulo + 2 linhas, borda em gradiente e brilho no hover */
.cl-secao-porque { padding-top: clamp(3rem, 6vw, 5rem); }
.cl-porque-cartoes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.cl-porque-cartoes li { position: relative; display: grid; grid-template-rows: auto auto 1fr; align-content: start; gap: .75rem; min-width: 0; padding: 1.75rem 1.5rem; border-radius: 20px; background: var(--papel); border: 1px solid transparent; background-clip: padding-box; box-shadow: var(--sombra); transition: translate .25s ease, box-shadow .25s ease; }
.cl-porque-cartoes li::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: 21px; background: linear-gradient(160deg, rgb(37 99 235 / .5), rgb(6 182 212 / .35) 50%, var(--linha) 100%); }
.cl-porque-cartoes li:hover { translate: 0 -5px; box-shadow: 0 30px 50px -22px rgb(37 99 235 / .45), 0 2px 6px rgb(11 18 32 / .08); }
.cl-porque-icone { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg, var(--acento), var(--ciano)); color: #FFFFFF; box-shadow: 0 10px 20px -10px rgb(37 99 235 / .7); }
.cl-porque-icone svg { width: 1.5rem; height: 1.5rem; }
.cl-porque-cartoes b { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.1875rem; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; margin-top: .25rem; }
.cl-porque-cartoes p { font-size: .9375rem; line-height: 1.55; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(.9375rem * 1.55 * 3); }

/* entrada suave ao rolar (so com movimento permitido; sem JS tudo ja aparece) */
.cl-surge { opacity: 0; translate: 0 14px; transition: opacity .6s ease, translate .6s ease; transition-delay: calc(var(--i, 0) * 90ms); }
.cl-surge.cl-visto { opacity: 1; translate: 0; }
@media (prefers-reduced-motion: reduce) { .cl-surge { opacity: 1; translate: 0; transition: none; } }
.no-js .cl-surge { opacity: 1; translate: 0; }

/* cartao padrao */
.cl-bloco-icone { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(135deg, var(--acento-claro), #FFFFFF); border: 1px solid var(--linha); color: var(--acento-forte); }
.cl-bloco-icone svg { width: 1.375rem; height: 1.375rem; }

/* recebe e liga: dois cartoes com a plataforma no meio */
.cl-sentidos { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1.5rem; align-items: stretch; }
.cl-sentido { display: grid; align-content: start; gap: .75rem; min-width: 0; padding: 2rem; border-radius: 24px; background: var(--papel); border: 1px solid var(--linha); box-shadow: var(--sombra); transition: translate .2s ease, box-shadow .2s ease; }
.cl-sentido:hover { translate: 0 -4px; box-shadow: var(--sombra-alta); }
.cl-sentido-icone { width: 3.25rem; height: 3.25rem; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg, var(--acento), var(--ciano)); color: #FFFFFF; }
.cl-sentido-icone svg { width: 1.5rem; height: 1.5rem; }
.cl-sentido h3 { font-size: 1.375rem; margin-top: .25rem; }
.cl-sentido > p { overflow-wrap: anywhere; min-height: calc(1.55em * 2); }
.cl-sentido ul { list-style: none; margin: .5rem 0 0; padding: .875rem 0 0; border-top: 1px solid var(--linha); display: grid; gap: .625rem; }
.cl-sentido li { display: flex; align-items: center; gap: .625rem; font-size: .9375rem; font-weight: 500; min-width: 0; white-space: nowrap; overflow: hidden; }
.cl-sentido li svg { width: 1.125rem; height: 1.125rem; color: var(--acento); }
.cl-sentidos-meio { display: grid; align-content: center; gap: .5rem; padding: 1rem .25rem; }
.cl-sentidos-meio span { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .875rem; border-radius: 999px; background: linear-gradient(135deg, var(--acento), #1E40AF); color: #FFFFFF; font-size: .8125rem; font-weight: 600; white-space: nowrap; box-shadow: var(--sombra); }
.cl-sentidos-meio svg { width: 1rem; height: 1rem; }

/* jornada: faixa escura com os passos e setas entre eles (as setas sao itens da grade, nunca saem do cartao) */
.cl-jornada { padding: clamp(3.5rem, 7vw, 6rem) 0; margin: 0 clamp(.5rem, 2vw, 1.5rem); border-radius: 32px; background: radial-gradient(50rem 20rem at 85% 0%, rgb(37 99 235 / .45), transparent 60%), linear-gradient(160deg, #0B1220 0%, #141C33 100%); color: #FFFFFF; }
.cl-trilha { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr) auto) minmax(0, 1fr); gap: .5rem; align-items: center; }
.cl-trilha-passo { position: relative; display: grid; grid-template-rows: auto auto auto; align-content: start; gap: .5rem; min-width: 0; padding: 1.25rem 1rem; border-radius: 18px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .12); }
.cl-trilha-icone { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(135deg, var(--acento), var(--ciano)); color: #FFFFFF; }
.cl-trilha-icone svg { width: 1.375rem; height: 1.375rem; }
.cl-trilha-passo b { font-family: var(--fonte-titulo); font-weight: 600; margin-top: .25rem; white-space: nowrap; overflow: hidden; }
.cl-trilha-passo p { color: rgb(255 255 255 / .72); font-size: .875rem; white-space: nowrap; overflow: hidden; }
.cl-trilha-seta { width: 2rem; }
.cl-trilha-seta svg { width: 2rem; height: .75rem; display: block; }
.cl-trilha-seta path { fill: none; stroke: var(--ciano); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.cl-trilha-seta path:first-child { stroke-dasharray: 6 6; }
@media (prefers-reduced-motion: no-preference) {
	.cl-trilha-seta path:first-child { animation: cl-tracejado 1s linear infinite; }
	@keyframes cl-tracejado { to { stroke-dashoffset: -12; } }
	.cl-trilha-passo { animation: cl-acende 7.5s ease-in-out infinite; animation-delay: calc(var(--i) * 1.2s); }
	@keyframes cl-acende { 0%, 6% { border-color: rgb(255 255 255 / .12); background: rgb(255 255 255 / .06); } 10%, 20% { border-color: var(--ciano); background: rgb(6 182 212 / .14); } 28%, 100% { border-color: rgb(255 255 255 / .12); background: rgb(255 255 255 / .06); } }
}

/* blocos (4 x 2) */
.cl-blocos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.cl-blocos li { position: relative; display: grid; grid-template-rows: auto auto auto; align-content: start; gap: .625rem; min-width: 0; padding: 1.5rem 1.25rem; border-radius: 18px; background: var(--papel); border: 1px solid transparent; background-clip: padding-box; box-shadow: var(--sombra); transition: translate .25s ease, box-shadow .25s ease; }
.cl-blocos li::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: 19px; background: linear-gradient(160deg, rgb(37 99 235 / .45), rgb(6 182 212 / .3) 50%, var(--linha) 100%); }
.cl-blocos li:hover { box-shadow: 0 30px 50px -22px rgb(37 99 235 / .45), 0 2px 6px rgb(11 18 32 / .08); translate: 0 -5px; }
.cl-blocos .cl-bloco-icone { background: linear-gradient(135deg, var(--acento), var(--ciano)); border: 0; color: #FFFFFF; box-shadow: 0 10px 20px -10px rgb(37 99 235 / .7); }
.cl-blocos b { font-family: var(--fonte-titulo); font-weight: 600; margin-top: .25rem; white-space: nowrap; overflow: hidden; }
.cl-blocos p { font-size: .875rem; white-space: nowrap; overflow: hidden; }

/* modos (3 cartoes iguais) */
.cl-modos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.cl-modo { position: relative; display: grid; grid-template-rows: 11rem auto auto; gap: .5rem; min-width: 0; padding: 1.5rem; border-radius: 24px; background: var(--papel); border: 1px solid transparent; background-clip: padding-box; box-shadow: var(--sombra); transition: translate .2s ease, box-shadow .2s ease; }
.cl-modo::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: 25px; background: linear-gradient(160deg, rgb(37 99 235 / .45), rgb(6 182 212 / .3) 50%, var(--linha) 100%); }
.cl-modo:hover { translate: 0 -4px; box-shadow: var(--sombra-alta); }
.cl-modo h3 { margin-top: .5rem; white-space: nowrap; overflow: hidden; }
.cl-modo p { font-size: .9375rem; white-space: nowrap; overflow: hidden; }
.cl-modo-visual { display: grid; place-items: center; border-radius: 14px; background: var(--nevoa); border: 1px solid var(--linha); }
.cl-teclado { display: grid; grid-template-columns: repeat(3, 2.25rem); gap: .375rem; }
.cl-teclado span { height: 2rem; display: grid; place-items: center; border-radius: 8px; background: var(--papel); border: 1px solid var(--linha); font: 600 .875rem var(--fonte-texto); font-variant-numeric: tabular-nums; color: var(--tinta); }
.cl-teclado .cl-acesa { background: var(--acento); border-color: var(--acento); color: #FFFFFF; box-shadow: 0 0 0 4px var(--acento-claro); }
.cl-onda { display: flex; align-items: center; gap: .25rem; height: 4rem; }
.cl-onda i { display: block; width: .25rem; height: var(--h); border-radius: 999px; background: linear-gradient(180deg, var(--acento), var(--ciano)); }
@media (prefers-reduced-motion: no-preference) { .cl-onda i { animation: cl-onda 1.6s ease-in-out infinite; animation-delay: var(--d); } @keyframes cl-onda { 50% { height: calc(var(--h) * .45); } } }
.cl-par { display: flex; align-items: center; gap: .75rem; font: 600 1.125rem var(--fonte-texto); color: var(--tinta); }
.cl-par kbd { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 10px; background: var(--acento); color: #FFFFFF; font: 600 1.125rem var(--fonte-texto); box-shadow: 0 0 0 4px var(--acento-claro); }
.cl-par span { font-weight: 500; color: var(--tinta-suave); }
.cl-par em { font-style: normal; padding: .5rem .875rem; border-radius: 14px 14px 14px 4px; background: var(--papel); border: 1px solid var(--linha); }

/* exemplo (4 passos iguais) */
.cl-passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: .75rem; align-items: center; }
.cl-passo { position: relative; display: grid; grid-template-rows: auto auto auto; align-content: start; gap: .625rem; min-width: 0; padding: 1.5rem 1.25rem; border-radius: 18px; background: var(--papel); border: 1px solid transparent; background-clip: padding-box; box-shadow: var(--sombra); transition: translate .25s ease, box-shadow .25s ease; }
.cl-passo::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: 19px; background: linear-gradient(160deg, rgb(37 99 235 / .45), rgb(6 182 212 / .3) 50%, var(--linha) 100%); }
.cl-passo:hover { translate: 0 -5px; box-shadow: 0 30px 50px -22px rgb(37 99 235 / .45), 0 2px 6px rgb(11 18 32 / .08); }
.cl-passos-seta { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--acento); color: #FFFFFF; }
.cl-passos-seta svg { width: 1rem; height: 1rem; }
.cl-passo-num { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--tinta), #1E3A8A); color: #FFFFFF; font: 600 .9375rem var(--fonte-texto); }
.cl-passo b { font-family: var(--fonte-titulo); font-weight: 600; margin-top: .25rem; white-space: nowrap; overflow: hidden; }
.cl-passo p { font-size: .875rem; white-space: nowrap; overflow: hidden; }

/* comecar (3 passos iguais com setas entre eles como itens da grade) */
.cl-comecar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 1rem; align-items: center; }
.cl-comecar-passo { position: relative; display: grid; grid-template-rows: auto auto auto; align-content: start; gap: .625rem; min-width: 0; padding: 1.75rem; border-radius: 24px; background: var(--papel); border: 1px solid transparent; background-clip: padding-box; box-shadow: var(--sombra); transition: translate .2s ease, box-shadow .2s ease; }
.cl-comecar-passo::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: 25px; background: linear-gradient(160deg, rgb(37 99 235 / .45), rgb(6 182 212 / .3) 50%, var(--linha) 100%); }
.cl-comecar .cl-bloco-icone { background: linear-gradient(135deg, var(--acento), var(--ciano)); border: 0; color: #FFFFFF; }
.cl-comecar-passo:hover { translate: 0 -4px; box-shadow: var(--sombra-alta); }
.cl-comecar-passo b { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.125rem; margin-top: .25rem; white-space: nowrap; overflow: hidden; }
.cl-comecar-passo p { font-size: .9375rem; white-space: nowrap; overflow: hidden; }
.cl-comecar-seta { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; background: var(--acento); color: #FFFFFF; box-shadow: 0 0 0 4px var(--papel); }
.cl-comecar-seta svg { width: 1.125rem; height: 1.125rem; }

/* precos: linha 1 = "Pague livre" (um cartao largo, deitado); linha 2 = os tres planos, da mesma altura */
.cl-precos { display: grid; gap: 1.5rem; }
.cl-grupo { display: grid; grid-template-rows: auto auto 1fr; gap: .25rem; min-width: 0; padding: 1.5rem; border-radius: 24px; background: var(--papel); border: 1px solid var(--linha); box-shadow: var(--sombra); }
.cl-grupo-titulo { font: 600 1.25rem/1.2 var(--fonte-titulo); letter-spacing: -.02em; white-space: nowrap; }
.cl-grupo-sub { font-size: .9375rem; margin-bottom: 1rem; white-space: nowrap; }
.cl-planos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.cl-plano { display: grid; grid-template-rows: auto 1fr auto; gap: .75rem; min-width: 0; padding: 1.25rem; border: 1px solid var(--linha); border-radius: 16px; background: var(--nevoa); transition: translate .2s ease, box-shadow .2s ease; }
.cl-plano:hover { translate: 0 -3px; box-shadow: var(--sombra); }
.cl-plano-cabeca { display: grid; gap: .5rem; min-width: 0; }
.cl-plano h3 { font-size: 1.125rem; white-space: nowrap; overflow: hidden; }
.cl-plano-valor { display: flex; align-items: baseline; gap: .25rem; margin: 0; color: var(--tinta); font: 700 2.25rem/1 var(--fonte-titulo); letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-plano-valor span { font-size: .45em; font-weight: 600; letter-spacing: 0; }
.cl-plano-unidade { margin: 0; font-size: .875rem; color: var(--tinta-suave); white-space: nowrap; }
.cl-plano ul { list-style: none; margin: 0; padding: .875rem 0 0; border-top: 1px solid var(--linha); display: grid; align-content: start; gap: .5rem; font-size: .875rem; }
.cl-plano li { white-space: nowrap; overflow: hidden; }
.cl-plano .botao { width: 100%; }
.cl-plano-minuto { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) auto; grid-template-rows: auto; align-items: center; column-gap: 2rem; padding: 1.5rem; background: linear-gradient(135deg, var(--acento-claro), var(--nevoa)); border-color: #C7D6FF; }
.cl-plano-minuto ul { padding: 0 0 0 2rem; border-top: 0; border-left: 1px solid #C7D6FF; }
.cl-plano-minuto .botao { width: auto; min-width: 12rem; }

/* duvidas numa coluna so */
.cl-duvidas { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; align-items: start; }

/* fecho */
.cl-final { padding: clamp(2rem, 5vw, 4rem) 0 clamp(3.5rem, 7vw, 6rem); }
.cl-final-grade { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.cl-final .cl-final-grade { padding: clamp(2rem, 5vw, 3.5rem) var(--gut); max-width: calc(var(--largura) - 2 * var(--gut)); border-radius: 24px; background: radial-gradient(30rem 16rem at 90% 10%, rgb(6 182 212 / .35), transparent 60%), linear-gradient(135deg, #0B1220 0%, #1E3A8A 100%); color: #FFFFFF; box-shadow: var(--sombra); }
.cl-final h2 { color: #FFFFFF; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); flex: 1 1 24rem; min-width: 0; }
.cl-final .botao-acento { background: #FFFFFF; color: var(--acento-forte); box-shadow: none; }
.cl-final .botao-acento:hover { background: var(--acento-claro); }

/* telas menores: as grades viram 2 ou 1 coluna, mantendo cartoes iguais entre si */
@media (max-width: 1100px) {
	.cl-blocos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cl-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cl-passos-seta { display: none; }
	.cl-porque-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cl-trilha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cl-trilha-seta { display: none; }
	.cl-sentidos { grid-template-columns: minmax(0, 1fr); }
	.cl-sentidos-meio { grid-auto-flow: column; justify-content: center; flex-wrap: wrap; }
}
@media (max-width: 860px) {
	.cl-hero-grade, .cl-modos { grid-template-columns: minmax(0, 1fr); }
	.cl-comecar { grid-template-columns: minmax(0, 1fr); }
	.cl-comecar-seta { display: none; }
	.cl-fatos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cl-sentidos-meio { display: flex; flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 560px) {
	.cl-blocos, .cl-passos, .cl-planos, .cl-trilha, .cl-porque-cartoes { grid-template-columns: minmax(0, 1fr); }
	.cl-grupo { padding: 1.25rem; }
	.cl-plano-minuto { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; padding: 1.25rem; }
	.cl-plano-minuto ul { padding: .875rem 0 0; border-left: 0; border-top: 1px solid var(--linha); }
	.cl-plano-minuto .botao { width: 100%; }
	.cl-palco { padding-bottom: 5rem; }
	.cl-jornada-hero { gap: .25rem; }
	.cl-jornada-hero b { font-size: .6875rem; }
	.cl-jornada-icone { width: 2.5rem; height: 2.5rem; }
	.cl-mini-lista em { display: none; }
	.cl-tela-chamada { display: none; }
	.cl-teste { display: grid; width: 100%; border-radius: 16px; }
	.cl-final .cl-final-grade { max-width: none; border-radius: 0; }
	.cl-jornada { margin: 0; border-radius: 0; }
}