/* 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; font-size: 1.0625rem; white-space: nowrap; overflow: hidden; }
.site-publico .duvidas summary::after { margin-top: 0; }
.site-publico .duvidas p { max-width: none; }
@media (max-width: 560px) { .site-publico .duvidas summary { font-size: .875rem; letter-spacing: -.01em; gap: .5rem; padding: .75rem .75rem .75rem .875rem; } .site-publico .duvidas summary::after { width: 1.5rem; height: 1.5rem; } }
.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-secao-fatos { padding: clamp(1.5rem, 3vw, 2.5rem) 0 0; }
.cl-fatos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.cl-fatos li { min-width: 0; display: grid; gap: .25rem; padding: 1.5rem 1.25rem; border-radius: 18px; background: #F4F5F7; border: 1px solid #E5E7EB; }
.cl-fatos b { color: var(--tinta); font: 700 clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem)/1.1 var(--fonte-titulo); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cl-fatos small { color: var(--tinta-suave); font-weight: 500; font-size: .9375rem; white-space: nowrap; overflow: hidden; }
.cl-recursos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha); }
.cl-recursos li { display: flex; align-items: center; gap: 1rem; padding: 1.125rem 0; border-bottom: 1px solid var(--linha); min-width: 0; font-size: 1.0625rem; font-weight: 500; }
.cl-recursos li > span:last-child { min-width: 0; white-space: nowrap; overflow: hidden; }
.cl-recurso-icone { width: 2.5rem; height: 2.5rem; flex: none; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(135deg, var(--acento), var(--ciano)); color: #FFFFFF; }
@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: frase grande a esquerda, 4 razoes em lista vertical com numeral grande a direita (sem cartao) */
.cl-secao-porque { padding-top: clamp(3rem, 6vw, 5rem); }
.cl-porque { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.cl-porque-texto { position: sticky; top: 6rem; }
.cl-porque-texto h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem); }
.cl-porque-texto p { margin-top: 1rem; font-size: 1.0625rem; max-width: 30rem; }
.cl-ligacao { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.5rem; font-weight: 600; color: var(--acento-forte); text-decoration: none; }
.cl-ligacao svg { transition: translate .2s ease; }
.cl-ligacao:hover svg { translate: 4px 0; }
.cl-razoes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha); }
.cl-razoes li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1.5rem 0; border-bottom: 1px solid var(--linha); min-width: 0; transition: padding-left .25s ease; }
.cl-razoes li:hover { padding-left: .5rem; }
.cl-razoes li > div { min-width: 0; }
.cl-razao-num { font: 300 2.5rem/1 var(--fonte-titulo); letter-spacing: -.04em; background: linear-gradient(135deg, var(--acento), var(--ciano)); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; transition: opacity .25s ease; }
.cl-razoes li:hover .cl-razao-num { opacity: .7; }
.cl-razoes b { display: block; font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.25rem; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; }
.cl-razoes p { margin-top: .375rem; font-size: 1rem; line-height: 1.55; overflow-wrap: anywhere; }

/* 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; }

/* blocos: faixa escura com o texto e as fichas dos tipos a esquerda e um mini editor (nos ligados por fios) a direita */
.cl-blocos-faixa { padding: clamp(3.5rem, 7vw, 6rem) 0; background: radial-gradient(44rem 24rem at 100% 0%, rgb(37 99 235 / .4), transparent 60%), radial-gradient(30rem 20rem at 0% 100%, rgb(6 182 212 / .22), transparent 60%), linear-gradient(160deg, #0B1220 0%, #121B36 100%); color: #FFFFFF; }
.cl-blocos-grade { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.cl-blocos-texto .cl-cabeca { margin-bottom: 1.75rem; }
.cl-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .625rem; }
.cl-chips li { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .875rem .5rem .625rem; border-radius: 999px; background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .14); font-size: .875rem; font-weight: 500; white-space: nowrap; transition: background .2s ease, border-color .2s ease; }
.cl-chips li:hover { background: rgb(37 99 235 / .35); border-color: rgb(6 182 212 / .7); }
.cl-chips svg { width: 1.0625rem; height: 1.0625rem; color: var(--ciano); }
.cl-canvas { border-radius: 20px; padding: .375rem; background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .12); box-shadow: 0 40px 60px -30px rgb(0 0 0 / .7); }
.cl-canvas svg { display: block; width: 100%; height: auto; border-radius: 16px; }
.cl-fios path { stroke-dasharray: 6 6; }
@media (prefers-reduced-motion: no-preference) {
	.cl-fios path { animation: cl-tracejado 1s linear infinite; }
	@keyframes cl-tracejado { to { stroke-dashoffset: -12; } }
	.cl-no-ativo > rect:first-child { animation: cl-no-brilho 3s ease-in-out infinite; }
	@keyframes cl-no-brilho { 0%, 100% { stroke: rgb(255 255 255 / .16); } 50% { stroke: #06B6D4; } }
}

/* modos: duas colunas (tecla | voz) com o "ou os dois" no meio, fundo branco, sem cartao */
.cl-cabeca-centro { margin-left: auto; margin-right: auto; text-align: center; }
.cl-modos { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.cl-modo { display: grid; justify-items: center; gap: .5rem; min-width: 0; text-align: center; }
.cl-modo h3 { font-size: 1.375rem; margin-top: 1rem; white-space: nowrap; overflow: hidden; max-width: 100%; }
.cl-modo p { font-size: 1rem; white-space: nowrap; overflow: hidden; max-width: 100%; }
.cl-modo-visual { width: 100%; height: 15rem; display: grid; place-items: center; border-radius: 24px; background: linear-gradient(180deg, var(--nevoa), #FFFFFF); border: 1px solid var(--linha); }
.cl-teclado { display: grid; grid-template-columns: repeat(3, 3rem); gap: .5rem; }
.cl-teclado span { height: 2.5rem; display: grid; place-items: center; border-radius: 10px; background: var(--papel); border: 1px solid var(--linha); box-shadow: 0 1px 2px rgb(11 18 32 / .06); font: 600 1rem 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 5px var(--acento-claro); }
.cl-onda { display: flex; align-items: center; gap: .3125rem; height: 6rem; }
.cl-onda i { display: block; width: .3125rem; 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) * .4); } } }
.cl-ou { position: relative; width: 6rem; height: 6rem; display: grid; place-content: center; text-align: center; border-radius: 50%; background: linear-gradient(135deg, var(--acento), #1E40AF); color: #FFFFFF; box-shadow: 0 0 0 8px var(--papel), 0 0 0 9px var(--linha), var(--sombra-alta); }
.cl-ou b { font: 700 1.5rem/1 var(--fonte-titulo); }
.cl-ou small { font-size: .75rem; font-weight: 600; opacity: .85; white-space: nowrap; }
.cl-ou::before, .cl-ou::after { content: ""; position: absolute; left: 50%; width: 1px; height: 3rem; background: var(--linha); }
.cl-ou::before { bottom: calc(100% + 9px); }
.cl-ou::after { top: calc(100% + 9px); }
.cl-par { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem; margin-top: clamp(2rem, 4vw, 3rem); 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(--nevoa); border: 1px solid var(--linha); }
.cl-par small { flex-basis: 100%; text-align: center; font-size: .9375rem; font-weight: 400; color: var(--tinta-suave); }

/* exemplo: linha do tempo horizontal com setas; embaixo, a planilha enviada e o celular com a transcricao */
.cl-linha-tempo { position: relative; list-style: none; margin: 0 0 clamp(2rem, 4vw, 3rem); padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 1.25rem; }
.cl-linha-tempo::before { content: ""; position: absolute; top: 1.4375rem; left: 1.5rem; right: 20%; height: 2px; background: repeating-linear-gradient(90deg, var(--acento) 0 6px, transparent 6px 12px); opacity: .5; }
.cl-lt-passo { position: relative; display: grid; justify-items: start; gap: .375rem; min-width: 0; }
.cl-lt-ponto { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%; background: var(--papel); border: 2px solid var(--acento); color: var(--acento-forte); box-shadow: 0 0 0 6px var(--acento-claro); margin-bottom: .5rem; }
.cl-lt-ponto svg { width: 1.25rem; height: 1.25rem; }
.cl-lt-seta { position: relative; align-self: start; margin-top: .75rem; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--acento); color: #FFFFFF; box-shadow: 0 0 0 4px var(--nevoa); }
.cl-lt-seta svg { width: .875rem; height: .875rem; }
.cl-linha-tempo b { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.0625rem; white-space: nowrap; overflow: hidden; max-width: 100%; }
.cl-linha-tempo p { font-size: .9375rem; white-space: nowrap; overflow: hidden; max-width: 100%; }
.cl-exemplo-palco { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.5rem); align-items: center; }
.cl-planilha { border-radius: 18px; background: var(--papel); border: 1px solid var(--linha); box-shadow: var(--sombra); overflow: hidden; font-size: .875rem; }
.cl-planilha-topo { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--linha); background: var(--nevoa); font-weight: 600; white-space: nowrap; overflow: hidden; }
.cl-planilha-topo svg { color: #16A34A; width: 1.125rem; height: 1.125rem; }
.cl-planilha table { width: 100%; border-collapse: collapse; }
.cl-planilha th, .cl-planilha td { padding: .625rem 1rem; text-align: left; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cl-planilha th { font-size: .75rem; font-weight: 600; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--linha); }
.cl-planilha td { border-bottom: 1px solid var(--linha); }
.cl-planilha tr:last-child td { border-bottom: 0; }
.cl-planilha .cl-achada td { background: var(--acento-claro); font-weight: 600; color: var(--acento-forte); }
.cl-exemplo-seta { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--acento); color: #FFFFFF; box-shadow: var(--sombra); }
.cl-fone { max-width: 22rem; margin: 0 auto; width: 100%; border-radius: 28px; padding: .625rem; background: var(--tinta); box-shadow: var(--sombra-alta); }
.cl-fone-topo { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem .5rem; color: rgb(255 255 255 / .8); font-size: .75rem; font-weight: 600; white-space: nowrap; overflow: hidden; }
.cl-balao-lista { list-style: none; margin: 0; padding: .75rem; display: grid; gap: .5rem; border-radius: 20px; background: var(--nevoa); min-height: 16rem; }
.cl-balao { max-width: 85%; padding: .5rem .75rem; border-radius: 14px; font-size: .8125rem; line-height: 1.45; overflow-wrap: anywhere; }
.cl-balao-ia { justify-self: start; background: var(--papel); color: var(--tinta); border: 1px solid var(--linha); border-bottom-left-radius: 4px; }
.cl-balao-pessoa { justify-self: end; background: var(--acento); color: #FFFFFF; border-bottom-right-radius: 4px; font-variant-numeric: tabular-nums; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
	.cl-balao { animation: cl-balao 9s ease-in-out infinite; animation-delay: calc(var(--i) * .9s); }
	@keyframes cl-balao { 0% { opacity: 0; translate: 0 6px; } 6%, 100% { opacity: 1; translate: 0; } }
}

/* testar: faixa azul de ponta a ponta com o numero de teste grande e o telefone tocando */
.cl-testar { padding: clamp(3.5rem, 7vw, 6rem) 0; background: radial-gradient(36rem 20rem at 85% 20%, rgb(6 182 212 / .5), transparent 60%), linear-gradient(135deg, #1D4ED8 0%, #2563EB 55%, #1E40AF 100%); color: #FFFFFF; }
.cl-testar-grade { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.cl-sobre { display: inline-block; font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgb(255 255 255 / .8); }
.cl-testar h2 { margin-top: .75rem; color: #FFFFFF; }
.cl-numero-grande { display: inline-block; margin-top: 1rem; font: 700 clamp(2rem, 1.2rem + 3.5vw, 3.75rem)/1.05 var(--fonte-titulo); letter-spacing: -.03em; color: #FFFFFF; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cl-numero-grande:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.cl-testar p { margin-top: 1rem; color: rgb(255 255 255 / .82); font-size: 1.0625rem; }
.cl-testar-passos { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }
.cl-testar-passos li { display: inline-flex; align-items: center; gap: .5rem; font-size: .9375rem; font-weight: 500; white-space: nowrap; }
.cl-testar-passos span { width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 50%; background: rgb(255 255 255 / .18); border: 1px solid rgb(255 255 255 / .4); font-size: .75rem; font-weight: 600; }
.cl-testar .botao-acento { margin-top: 1.75rem; background: #FFFFFF; color: var(--acento-forte); box-shadow: 0 16px 30px -14px rgb(0 0 0 / .5); }
.cl-testar .botao-acento:hover { background: var(--acento-claro); }
.cl-toque { position: relative; width: 14rem; height: 14rem; display: grid; place-items: center; }
.cl-toque i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgb(255 255 255 / .35); }
.cl-toque span { width: 6rem; height: 6rem; display: grid; place-items: center; border-radius: 50%; background: #FFFFFF; color: var(--acento); box-shadow: 0 24px 40px -16px rgb(0 0 0 / .5); }
.cl-toque span svg { width: 2.5rem; height: 2.5rem; }
@media (prefers-reduced-motion: no-preference) {
	.cl-toque i { animation: cl-anel 2.4s ease-out infinite; }
	.cl-toque i:nth-child(2) { animation-delay: .8s; }
	.cl-toque i:nth-child(3) { animation-delay: 1.6s; }
	@keyframes cl-anel { 0% { scale: .45; opacity: 1; } 100% { scale: 1.05; opacity: 0; } }
	.cl-toque span { animation: cl-toca 2.4s ease-in-out infinite; }
	@keyframes cl-toca { 0%, 20%, 100% { rotate: 0deg; } 5% { rotate: -12deg; } 10% { rotate: 12deg; } 15% { rotate: -8deg; } }
}

/* 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-destaque { background: var(--papel); border: 2px solid var(--acento); box-shadow: 0 0 0 4px var(--acento-claro), var(--sombra-alta); }
.cl-plano-cabeca h3 { display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.cl-selo { display: inline-flex; padding: .1875rem .625rem; border-radius: 999px; background: linear-gradient(135deg, var(--acento), var(--ciano)); color: #FFFFFF; font: 600 .75rem var(--fonte-texto); letter-spacing: 0; white-space: nowrap; }
.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-preco-mais { margin-top: 1.25rem; font-size: .9375rem; }
.cl-preco-mais a { color: var(--acento-forte); font-weight: 600; text-decoration-color: rgb(37 99 235 / .4); }
.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 2.5rem; padding: clamp(2rem, 5vw, 3.5rem); border-radius: 28px; background: radial-gradient(36rem 20rem at 92% 0%, rgb(37 99 235 / .55), transparent 60%), radial-gradient(24rem 16rem at 0% 100%, rgb(6 182 212 / .3), transparent 60%), linear-gradient(135deg, #0B1220 0%, #141C33 100%); color: #FFFFFF; box-shadow: var(--sombra-alta); }
.cl-final-texto { flex: 1 1 26rem; min-width: 0; }
.cl-final h2 { color: #FFFFFF; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
.cl-final p { margin-top: .75rem; color: rgb(255 255 255 / .8); font-size: 1.0625rem; }
.cl-final .botao-acento { background: #FFFFFF; color: var(--acento-forte); box-shadow: 0 16px 30px -14px rgb(0 0 0 / .6); }
.cl-final .botao-acento:hover { background: var(--acento-claro); }

/* telas menores: as grades viram 2 ou 1 coluna, mantendo itens iguais entre si */
@media (max-width: 1100px) {
	.cl-porque { grid-template-columns: minmax(0, 1fr); }
	.cl-porque-texto { position: static; }
	.cl-linha-tempo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cl-linha-tempo::before, .cl-lt-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-blocos-grade, .cl-exemplo-palco { grid-template-columns: minmax(0, 1fr); }
	.cl-modos { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
	.cl-ou { margin: 0 auto; }
	.cl-ou::before, .cl-ou::after { display: none; }
	.cl-exemplo-seta { margin: 0 auto; rotate: 90deg; }
	.cl-testar-grade { grid-template-columns: minmax(0, 1fr); }
	.cl-toque { margin: 0 auto; width: 10rem; height: 10rem; }
	.cl-fatos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cl-recursos li { font-size: 1rem; }
	.cl-recursos li > span:last-child { white-space: normal; }
	.cl-sentidos-meio { display: flex; flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 560px) {
	.cl-linha-tempo, .cl-planos { grid-template-columns: minmax(0, 1fr); }
	.cl-razoes li { grid-template-columns: 3.5rem minmax(0, 1fr); }
	.cl-razao-num { font-size: 2rem; }
	.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-fatos { grid-template-columns: minmax(0, 1fr); }
	.cl-final .cl-final-grade { padding: 1.5rem 1rem 2rem; }
	.cl-final .botao { width: 100%; }
	.cl-modo-visual { height: 12rem; }
	.cl-testar .botao { width: 100%; }
}