/* A página no estilo "Kommo + Notion" (nova.php, 14/10/2026): SEMPRE clara, amigável e direta. Branco, tinta quase preta,
   um cinza quente nas faixas alternadas e o âmbar do Omnivo como marca-texto nas palavras que importam. Os cartões
   coloridos usam as cores dos módulos em tom pastel. Sem vidro, sem luz difusa: aqui o produto e o texto falam. */

body.cl {
  --fundo: #FFFFFF; --cinza: #F6F6F3; --borda: #E7E7E3; --tinta: #121316; --t2: #565A63; --t3: #8B8F98; --linha: #E7E7E3;
  --vidro: #FFFFFF; --vidro-borda: #E7E7E3; --vidro-forte: #FFFFFF; --sobre-tinta: #FFFFFF; --sim-fundo: #121316; --sim-anel: #fff;
  --sombra: 0 1px 2px rgb(18 19 22 / .05), 0 12px 32px -18px rgb(18 19 22 / .18);
  --sombra-print: 0 2px 4px rgb(18 19 22 / .04), 0 30px 70px -30px rgb(18 19 22 / .28);
  color-scheme: light; background: var(--fundo); color: var(--tinta);
}
.cl mark { background: linear-gradient(transparent 58%, rgb(255 178 36 / .55) 58%, rgb(255 178 36 / .55) 92%, transparent 92%); color: inherit; padding: 0 .06em; }
.cl h1, .cl h2, .cl h3 { font-family: var(--fonte-d); }

/* botões */
.cl-bt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 12px; border: 1px solid transparent;
  font: 650 15px/1 var(--fonte); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .3s var(--mola), background .2s, border-color .2s, box-shadow .2s; }
.cl-bt:active { transform: scale(.97); transition-duration: .1s; }
.cl-bt .ic { width: 18px; height: 18px; transition: transform .3s var(--mola); } .cl-bt:hover .ic { transform: translateX(3px); }
.cl-bt--g { min-height: 52px; padding: 0 22px; font-size: 16px; border-radius: 14px; }
.cl-bt--preto { background: var(--tinta); color: #fff; box-shadow: 0 8px 20px -10px rgb(18 19 22 / .6); } .cl-bt--preto:hover { background: #2A2C31; }
.cl-bt--borda { background: #fff; color: var(--tinta); border-color: var(--borda); } .cl-bt--borda:hover { border-color: #C9C9C4; }
.cl-bt--link { color: var(--tinta); } .cl-bt--link:hover { background: var(--cinza); }
.cl-bt--ambar { background: #FFB224; color: #121316; } .cl-bt--ambar:hover { background: #FFC24D; }
.cl-bt--claro { background: rgb(255 255 255 / .12); color: #fff; border-color: rgb(255 255 255 / .22); } .cl-bt--claro:hover { background: rgb(255 255 255 / .2); }

/* topo */
.cl-topo { position: sticky; top: 0; z-index: 50; background: rgb(255 255 255 / .86); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); }
.cl-topo__in { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 24px; padding: 12px 20px; }
.cl-nav { display: flex; gap: 2px; } .cl-nav a { text-decoration: none; color: var(--t2); font-weight: 560; font-size: 15px; padding: 8px 12px; border-radius: 10px; } .cl-nav a:hover { color: var(--tinta); background: var(--cinza); }
.cl-topo__acoes { margin-left: auto; display: flex; gap: 6px; }

/* 1 · topo da página */
.cl-hero { max-width: 1200px; margin: 0 auto; padding: 64px 20px 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
.cl-novo { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid var(--borda); background: #fff; font-size: 14px; font-weight: 560; color: var(--t2); text-decoration: none; margin-bottom: 26px; transition: border-color .2s; }
.cl-novo:hover { border-color: #C9C9C4; }
.cl-novo b { background: #FFF1D6; color: #9A5B00; font-size: 12px; padding: 4px 9px; border-radius: 999px; }
.cl-novo .ic { width: 15px; height: 15px; }
.cl-hero h1 { font-size: clamp(38px, 5.6vw, 72px); line-height: 1.04; letter-spacing: -.045em; font-weight: 760; max-width: 980px; text-wrap: balance; }
.cl-sub { font-size: clamp(17px, 1.7vw, 21px); color: var(--t2); max-width: 660px; margin: 22px 0 30px; text-wrap: pretty; }
.cl-ctas { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.cl-mini { margin-top: 14px; font-size: 14px; color: var(--t3); }

/* as abas com o sistema (Atender · Organizar · Vender · Acompanhar) sobre uma faixa colorida, como a Kommo */
.cl-vitrine { width: 100%; margin-top: 56px; scroll-margin-top: 80px; }
.cl-abas { display: inline-flex; gap: 4px; padding: 5px; border-radius: 16px; background: var(--cinza); border: 1px solid var(--borda); }
.cl-abas button { position: relative; overflow: hidden; border: 0; background: none; color: var(--t2); font: 620 15px/1 var(--fonte); padding: 12px 20px; border-radius: 12px; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; white-space: nowrap; }
.cl-abas button:hover { color: var(--tinta); }
.cl-abas button[aria-selected="true"] { background: #fff; color: var(--tinta); box-shadow: 0 1px 3px rgb(18 19 22 / .12); }
.cl-abas__tempo { position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; border-radius: 2px; transform: scaleX(0); transform-origin: 0 50%; background: #FFB224; }
.cl-vitrine.is-auto [aria-selected="true"] .cl-abas__tempo { animation: cl-tempo 6s linear forwards; }
.cl-vitrine.is-pausa [aria-selected="true"] .cl-abas__tempo { animation-play-state: paused; }
@keyframes cl-tempo { to { transform: scaleX(1); } }
.cl-palco { margin-top: 22px; padding: clamp(14px, 3.4vw, 44px) clamp(14px, 3.4vw, 44px) 0; border-radius: 28px; overflow: hidden;
  background: radial-gradient(80% 90% at 15% 0%, #FFE2A8, transparent 60%), radial-gradient(70% 90% at 90% 10%, #FFD0BD, transparent 60%), radial-gradient(90% 80% at 50% 110%, #CFE5FF, transparent 60%), #FFF6E6; }
.cl-quadro { margin: 0; }
.cl-quadro:not([hidden]) { animation: cl-entra .55s var(--desacelera); }
@keyframes cl-entra { from { opacity: 0; transform: translateY(14px); } }
.cl-quadro img { width: 100%; height: auto; border-radius: 16px 16px 0 0; box-shadow: var(--sombra-print); display: block; }
.cl-quadro figcaption { display: none; }

/* 2 · canais */
.cl-canais { max-width: 1200px; margin: 0 auto; padding: 34px 20px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 26px; color: var(--t2); font-size: 15px; font-weight: 560; }
.cl-canais p { color: var(--t3); font-weight: 500; }
.cl-canal { display: inline-flex; align-items: center; gap: 9px; color: var(--tinta); font-weight: 650; font-size: 17px; }
.cl-canal svg { width: 26px; height: 26px; } .cl-canal--txt { font-size: 14px; font-weight: 560; color: var(--t2); }

/* seções */
.cl-sec { max-width: 1200px; margin: 0 auto; padding: 96px 20px 0; scroll-margin-top: 70px; }
.cl-cinza { max-width: none; background: var(--cinza); margin-top: 96px; padding-bottom: 96px; }
.cl-cinza > * { max-width: 1160px; margin-left: auto; margin-right: auto; }
.cl-cab { text-align: center; max-width: 820px; margin: 0 auto 44px; }
.cl-cab h2 { font-size: clamp(30px, 4vw, 50px); line-height: 1.06; letter-spacing: -.04em; font-weight: 750; text-wrap: balance; }
.cl-cab p { font-size: 18px; color: var(--t2); margin-top: 14px; }

/* 3 · cartões coloridos com pedacinhos da tela */
.cl-cartoes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.cl-c { border-radius: 26px; padding: 30px 30px 0; display: flex; flex-direction: column; overflow: hidden; min-height: 340px; }
.cl-c h3 { font-size: 24px; letter-spacing: -.03em; font-weight: 740; line-height: 1.15; }
.cl-c > p { font-size: 16px; color: var(--t2); margin-top: 8px; max-width: 44ch; }
.cl-c--ambar { background: #FFF3D9; } .cl-c--coral { background: #FFE9E0; } .cl-c--azul { background: #E6F1FF; } .cl-c--verde { background: #E3F6EA; }
.cl-mini-ui { margin-top: auto; padding-top: 26px; display: flex; flex-direction: column; gap: 8px; }
.mu-m { max-width: 82%; padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.4; background: #fff; box-shadow: var(--sombra); }
.mu-in { align-self: flex-start; border-bottom-left-radius: 5px; }
.mu-out { align-self: flex-end; background: var(--tinta); color: #fff; border-bottom-right-radius: 5px; margin-bottom: 28px; }
.mu-robo { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #FFB224; margin-bottom: 4px; } .mu-robo .ic { width: 14px; height: 14px; }
.mu-funil { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: #fff; border-radius: 18px 18px 0 0; padding: 14px 14px 22px; box-shadow: var(--sombra); }
.mu-funil div { display: flex; flex-direction: column; gap: 6px; } .mu-funil small { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--t3); }
.mu-card { display: block; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--borda); font-size: 12.5px; } .mu-card b { display: block; } .mu-card i { font-style: normal; color: var(--t3); font-size: 11.5px; }
.mu-card--novo { border-color: #FF7A45; background: #FFF5F0; animation: mu-chega 4s var(--mola) infinite; }
@keyframes mu-chega { 0% { opacity: 0; transform: translateY(-10px); } 12%, 100% { opacity: 1; transform: none; } }
.mu-card--ganho { border-color: #12B76A; background: #EFFBF4; } .mu-card--ganho i { color: #0E9F5C; font-weight: 700; }
.mu-agenda { background: #fff; border-radius: 18px 18px 0 0; padding: 16px 16px 24px; box-shadow: var(--sombra); }
.mu-agenda small { font-size: 12.5px; font-weight: 650; color: var(--t2); }
.mu-horas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.mu-horas span { text-align: center; padding: 10px 0; border-radius: 10px; border: 1px solid var(--borda); font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.mu-horas .mu-ocup { color: var(--t3); text-decoration: line-through; background: var(--cinza); border-color: transparent; }
.mu-horas .mu-esc { background: #2F7FE0; color: #fff; border-color: #2F7FE0; }
.mu-cpf { display: flex; align-items: center; gap: 16px; background: #fff; border-radius: 18px 18px 0 0; padding: 18px 18px 26px; box-shadow: var(--sombra); }
.mu-cpf small { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--t3); }
.mu-cpf b { display: block; font-size: 34px; letter-spacing: -.04em; line-height: 1.05; }
.mu-ok { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: #0E9F5C; } .mu-ok .ic { width: 15px; height: 15px; stroke-width: 2.6; }
.mu-anel .anel { transition: stroke-dashoffset 1.4s var(--desacelera); }

/* 4 · o Omnivo por dentro */
.cl-dentro { display: flex; flex-direction: column; gap: 88px; }
.cl-linha { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: center; }
.cl-linha--inv .cl-linha__txt { order: 2; }
.cl-linha__txt h2 { font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -.04em; line-height: 1.08; font-weight: 750; }
.cl-linha__txt p { font-size: 17px; color: var(--t2); margin: 16px 0 20px; text-wrap: pretty; }
.cl-seta { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--tinta); text-decoration: none; border-bottom: 2px solid #FFB224; padding-bottom: 2px; }
.cl-seta .ic { width: 17px; height: 17px; transition: transform .3s var(--mola); } .cl-seta:hover .ic { transform: translateX(3px); }
.cl-linha__tela { padding: 22px; border-radius: 24px; background: var(--cinza); }
.cl-linha__tela img { border-radius: 12px; box-shadow: var(--sombra-print); width: 100%; }

/* 5 · soluções */
.cl-abas--seg { display: flex; width: max-content; max-width: 100%; margin: 0 auto 22px; overflow-x: auto; background: #fff; }
.cl-abas--seg button[aria-selected="true"] { background: var(--tinta); color: #fff; }
.cl-seg { display: grid; grid-template-columns: .85fr 1.15fr; gap: 44px; align-items: center; background: #fff; border: 1px solid var(--borda); border-radius: 28px; padding: 34px; }
.cl-seg:not([hidden]) { animation: cl-entra .5s var(--desacelera); }
.cl-seg h3 { font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -.04em; font-weight: 750; }
.cl-seg p { font-size: 17px; color: var(--t2); margin: 12px 0 18px; }
.cl-seg ul { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cl-seg li { display: flex; gap: 9px; align-items: center; font-weight: 600; } .cl-seg li .ic { width: 18px; height: 18px; color: #0E9F5C; stroke-width: 2.4; }
.cl-seg__tela img { border-radius: 14px; box-shadow: var(--sombra-print); width: 100%; }

/* avaliações no claro */
.cl .av { padding-top: 96px; } .cl .av-c { background: #fff; border: 1px solid var(--borda); box-shadow: var(--sombra); -webkit-backdrop-filter: none; backdrop-filter: none; }
.cl .av .sec-cab { text-align: center; } .cl .av .sec-cab h2 { font-size: clamp(30px, 4vw, 50px); letter-spacing: -.04em; }

/* 6 · confiança */
.cl-conf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cl-conf li { padding: 26px; border-radius: 22px; border: 1px solid var(--borda); }
.cl-conf span { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--cinza); margin-bottom: 18px; } .cl-conf span .ic { width: 22px; height: 22px; }
.cl-conf h3 { font-size: 18px; letter-spacing: -.02em; margin-bottom: 6px; } .cl-conf p { font-size: 15px; color: var(--t2); }

/* 7 · conta e planos */
.cl-conta { display: grid; grid-template-columns: 1.2fr .8fr; gap: 36px; align-items: center; background: #fff; border: 1px solid var(--borda); border-radius: 28px; padding: 34px; max-width: 920px !important; }
.nv-faixa { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin-bottom: 20px; font-size: 15.5px; color: var(--t2); }
.nv-faixa output { font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.nv-faixa input { grid-column: 1 / -1; width: 100%; accent-color: #FFB224; height: 22px; cursor: pointer; }
.cl-conta__res { text-align: center; display: flex; flex-direction: column; gap: 6px; padding: 26px 20px; border-radius: 22px; background: #FFEDEA; }
.cl-conta__res small { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #D92D20; }
.cl-conta__res b { font-size: clamp(40px, 4.6vw, 56px); letter-spacing: -.045em; font-weight: 760; font-variant-numeric: tabular-nums; line-height: 1.05; }
.cl-conta__res span { font-size: 14.5px; color: var(--t2); }
.cl-cab--planos { margin-top: 90px; }
.cl-plano-vazio { max-width: 640px !important; background: #fff; border: 1px solid var(--borda); border-radius: 24px; padding: 30px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; font-size: 17px; }
.cl-planos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.cl-plano { position: relative; background: #fff; border: 1px solid var(--borda); border-radius: 26px; padding: 30px 28px; display: flex; flex-direction: column; gap: 14px; }
.cl-plano--destaque { border: 2px solid var(--tinta); box-shadow: 0 30px 60px -30px rgb(18 19 22 / .35); }
.cl-plano__selo { position: absolute; top: -13px; left: 28px; background: #FFB224; color: #121316; font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.cl-plano h3 { font-size: 22px; letter-spacing: -.03em; } .cl-plano__frase { font-size: 15px; color: var(--t2); margin-top: -8px; }
.cl-plano__preco { font-size: 46px; font-weight: 760; letter-spacing: -.05em; line-height: 1; } .cl-plano__preco small { font-size: 18px; font-weight: 650; margin-right: 3px; vertical-align: .9em; } .cl-plano__preco span { font-size: 15px; font-weight: 500; color: var(--t3); letter-spacing: 0; }
.cl-plano__inst { font-size: 13.5px; color: var(--t3); }
.cl-plano ul { list-style: none; margin: 6px 0 0; padding: 18px 0 0; border-top: 1px solid var(--borda); display: flex; flex-direction: column; gap: 9px; }
.cl-plano li { display: flex; gap: 9px; font-size: 15px; } .cl-plano li .ic { width: 18px; height: 18px; flex: none; color: #0E9F5C; stroke-width: 2.4; margin-top: 2px; }

/* 8 · perguntas */
.cl-faq { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--borda); }
.cl-faq details { border-bottom: 1px solid var(--borda); }
.cl-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 4px; font-size: 18px; font-weight: 650; letter-spacing: -.015em; }
.cl-faq summary::-webkit-details-marker { display: none; }
.cl-faq summary span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--cinza); flex: none; transition: transform .35s var(--mola); } .cl-faq summary .ic { width: 16px; height: 16px; }
.cl-faq details[open] summary span { transform: rotate(45deg); }
.cl-faq details p { padding: 0 4px 22px; color: var(--t2); font-size: 16.5px; max-width: 720px; }

/* o convite final: bloco escuro, o único da página */
.cl-final { max-width: 1200px; margin: 0 auto; padding: 96px 20px 0; }
.cl-final__in { background: var(--tinta); color: #fff; border-radius: 32px; padding: clamp(40px, 6vw, 80px) 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px;
  background-image: radial-gradient(60% 80% at 10% 0%, rgb(255 178 36 / .28), transparent 60%), radial-gradient(60% 80% at 100% 100%, rgb(255 122 69 / .22), transparent 60%); }
.cl-final h2 { font-size: clamp(30px, 4.4vw, 54px); letter-spacing: -.045em; line-height: 1.06; font-weight: 760; max-width: 820px; text-wrap: balance; }
.cl-final mark { background: linear-gradient(transparent 60%, rgb(255 178 36 / .5) 60%, rgb(255 178 36 / .5) 92%, transparent 92%); }
.cl-final p { color: rgb(255 255 255 / .72); font-size: 18px; }

.cl-rodape { max-width: 1200px; margin: 0 auto; padding: 56px 20px 40px; }
.cl-rodape__in { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; border-top: 1px solid var(--borda); padding-top: 28px; }
.cl-rodape nav { display: flex; gap: 18px; margin-left: auto; } .cl-rodape nav a { color: var(--t2); text-decoration: none; font-size: 15px; } .cl-rodape nav a:hover { color: var(--tinta); }
.cl-rodape p { width: 100%; font-size: 13.5px; color: var(--t3); }

/* celular */
@media (max-width: 900px) {
  .cl-nav { display: none; }
  .cl-cartoes, .cl-linha, .cl-seg, .cl-conta { grid-template-columns: 1fr; }
  .cl-conf, .cl-planos { grid-template-columns: 1fr 1fr; }
  .cl-linha { gap: 24px; } .cl-linha--inv .cl-linha__txt { order: 0; } .cl-dentro { gap: 60px; }
  .cl-seg { padding: 22px; gap: 22px; } .cl-seg__tela { order: -1; }
  .cl-sec { padding-top: 72px; } .cl-cinza { margin-top: 72px; padding-bottom: 72px; }
}
@media (max-width: 600px) {
  .cl-hero { padding-top: 40px; }
  .cl-topo__acoes .cl-bt--link { display: none; }
  .cl-abas { display: flex; width: 100%; overflow-x: auto; } .cl-abas button { padding: 11px 14px; font-size: 14px; flex: 1; }
  .cl-conf, .cl-planos { grid-template-columns: 1fr; }
  .cl-c { padding: 24px 22px 0; min-height: 0; } .cl-linha__tela { padding: 12px; }
  .cl-conta { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) { .cl *, .cl *::before { animation: none !important; transition: none !important; } }

/* 4b · E tem mais: três cartões com a tela de verdade em cima (14/10/2026) */
.cl-mais { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cl-mais__c { border: 1px solid var(--borda); border-radius: 24px; padding: 14px 14px 24px; }
.cl-mais__tela { background: var(--cinza); border-radius: 16px; padding: 14px 14px 0; overflow: hidden; aspect-ratio: 16 / 10; margin-bottom: 18px; }
.cl-mais__tela img { width: 100%; border-radius: 10px 10px 0 0; box-shadow: var(--sombra-print); }
.cl-mais__c h3 { font-size: 19px; letter-spacing: -.025em; padding: 0 8px; }
.cl-mais__c p { font-size: 15px; color: var(--t2); margin-top: 6px; padding: 0 8px; }
@media (max-width: 900px) { .cl-mais { grid-template-columns: 1fr; } }

/* A órbita dos recursos (_orbita.php, a mesma da página antiga) no claro: cabeçalho centrado como os outros e o painel branco */
.cl .o-sec { max-width: 1200px; padding: 96px 20px 0; }
.cl .o-sec .sec-cab { text-align: center; max-width: 820px; margin: 0 auto 30px; }
.cl .o-sec .sec-cab .rotulo { display: none; }
.cl .o-sec .sec-cab h2 { font-size: clamp(30px, 4vw, 50px); line-height: 1.06; letter-spacing: -.04em; font-weight: 750; margin: 0; }
.cl .o-painel { background: #fff; border: 1px solid var(--borda); box-shadow: var(--sombra); -webkit-backdrop-filter: none; backdrop-filter: none; }
.cl .o-trilho { border-color: #D9D9D4; } .cl .o-trilho--2 { border-color: var(--borda); }
.cl .o-seta { background: #fff; border-color: var(--borda); }

/* A tela que ENDIREITA enquanto rola (ideia do "Container Scroll" do 21st.dev): a vitrine do topo chega deitada, em
   perspectiva, e fica de frente; --p vai de 0 a 1 pelo nova.js. Sem JS ou com movimento reduzido, já nasce de frente. */
.cl-vitrine { perspective: 1400px; --p: 1; }
.js .cl-vitrine { --p: 0; }
.cl-palco { transform-origin: 50% 0; will-change: transform;
  transform: rotateX(calc((1 - var(--p)) * 24deg)) scale(calc(1.03 - var(--p) * .03)) translateY(calc((1 - var(--p)) * 20px));
  box-shadow: 0 calc(10px + var(--p) * 30px) calc(40px + var(--p) * 50px) -30px rgb(18 19 22 / .35); }
@media (prefers-reduced-motion: reduce) { .js .cl-vitrine { --p: 1; } }

/* O painel que sobe (_inclinada.php, o mesmo da página antiga) no claro: cabeçalho como os outros; a moldura escura de aparelho fica */
.cl .k-cena { max-width: 1200px; padding: 96px 20px 0; }
.cl .k-cab .rotulo { display: none; }
.cl .k-cab h2 { font-size: clamp(30px, 4vw, 50px); line-height: 1.06; letter-spacing: -.04em; font-weight: 750; margin: 0 0 14px; }
.cl .k-cab h2 em { font-weight: 750; letter-spacing: -.04em; background: linear-gradient(transparent 58%, rgb(255 178 36 / .55) 58%, rgb(255 178 36 / .55) 92%, transparent 92%); }
.cl .k-cab .sec-resp { font-size: 18px; color: var(--t2); }
.cl .k-vidro .cl-print { width: 100%; border-radius: 21px; display: block; }