/* =========================================================
   Kuma Tech · página da parceria com a Kommo · celular primeiro
   Usa os tokens do estilo.css e o hall de certificações do sobre.css; aqui só o que é desta página.
   A identidade da Kommo entra por duas cores dela: o índigo (--k-indigo) e o lilás (--k-lilas). A abertura é no índigo
   e as dobras .claro são no lilás; as outras continuam no escuro da Kuma. (As duas versões de desenho que não ficaram,
   "Fusão" e "Fluxo", estão no histórico do handoff.)
   ========================================================= */
@property --corte{syntax:"<percentage>";inherits:true;initial-value:0%}

.kommo{--k-indigo:#0E0142;--k-lilas:#F3EFFF}
.k-defs{position:absolute}
.kommo .secao{padding-block:var(--e-7)}
.falta{display:block;margin-top:var(--e-3);padding:8px 10px;border-radius:10px;border:1px dashed oklch(0.78 0.12 90 / .55);background:oklch(0.32 0.06 90 / .25);color:oklch(0.9 0.08 95);font:500 var(--t-xs)/1.45 var(--f-texto);max-width:60ch}   /* PRÉVIA: aviso para o dono */

/* dobras claras: o lilás da Kommo, com o índigo no lugar do texto */
.kommo .claro{--texto:var(--k-indigo);--texto-2:oklch(0.38 0.07 285);--linha:oklch(0.25 0.1 285 / .18);--linha-forte:oklch(0.25 0.1 285 / .32);--noite:#fff;--ciano:oklch(0.48 0.22 264);background:var(--k-lilas);color:var(--texto)}
.claro .falta{background:oklch(0.93 0.07 95);color:oklch(0.35 0.08 80);border-color:oklch(0.6 0.12 85)}

/* ---------- abertura: o índigo da Kommo, com a placa de parceiro ---------- */
.k-abre{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(80% 60% at 90% 10%, oklch(0.42 0.22 285 / .55), transparent 65%), var(--k-indigo)}
.k-abre .envolve{display:grid;gap:var(--e-6);padding-top:calc(var(--topo) + var(--e-7));padding-bottom:var(--e-7)}
.k-abre h1{font-size:var(--t-3xl);font-weight:500;line-height:1.04;letter-spacing:-.028em}
.k-abre h1 b{font-weight:600;color:var(--k-lilas)}
.k-abre h1 .selo{display:flex;width:max-content;margin-bottom:var(--e-5);letter-spacing:normal}
.k-abre .sub{margin-top:var(--e-4);max-width:50ch;color:var(--texto-2);font-size:var(--t-l);line-height:1.6}
.k-acoes{display:flex;flex-wrap:wrap;gap:var(--e-3);margin-top:var(--e-5)}
.k-prova{display:flex;flex-wrap:wrap;gap:var(--e-2) var(--e-5);list-style:none;padding:0;margin-top:var(--e-5);color:var(--texto-2);font-size:var(--t-s)}
.k-prova b{color:var(--texto);font-weight:600}
.k-arte{display:grid;justify-items:center;gap:var(--e-4);margin:0}
.k-placa{display:block;width:min(78%, 340px);height:auto;border-radius:var(--r-l);box-shadow:0 30px 60px oklch(0 0 0 / .5)}
.k-selo{display:block}      /* o selo leva ao site da Kommo; o efeito ao passar o mouse está em a.selo-kommo, no estilo.css */
.k-arte .k-selo img{display:block;width:150px;height:auto}

/* ---------- a marca da parceria: o panda fica, o K da Kuma dá lugar ao K da Kommo ---------- */
.k-faixa{text-align:center}
.fusao{--corte:101%;position:relative;width:min(70%, 260px);aspect-ratio:var(--prop);margin-inline:auto}
.fusao svg{position:absolute;inset:0;width:100%;height:100%}
.fusao .panda,.fusao .k-kuma{fill:url(#k-luz)}
.fusao .k-kommo{fill:var(--k-lilas);clip-path:inset(0 calc(100% - var(--corte)) 0 0)}   /* à esquerda do corte, a Kommo */
.fusao .k-kuma{clip-path:inset(0 0 0 var(--corte))}                                       /* à direita, a Kuma */
.fusao::after{content:"";position:absolute;top:6%;bottom:6%;left:var(--corte);width:2px;margin-left:-1px;border-radius:2px;background:var(--ciano);box-shadow:0 0 18px 4px var(--ciano);opacity:0}   /* a linha de luz que faz a troca */
.fusao-leg{display:flex;align-items:center;justify-content:center;gap:var(--e-3);margin-top:var(--e-5);font:600 var(--t-l)/1 var(--f-titulo)}
.fusao-leg i{color:var(--texto-2);font-style:normal;font-weight:400}
.fusao-leg img{display:block;width:132px;height:auto}
@media (prefers-reduced-motion:no-preference){
  .fusao{animation:troca 9s var(--sai) infinite}
  .fusao::after{animation:risco 9s linear infinite}
}
@keyframes troca{0%,26%{--corte:var(--de)}46%,84%{--corte:101%}100%{--corte:var(--de)}}
@keyframes risco{0%,26%{opacity:0}29%,43%{opacity:1}46%,84%{opacity:0}87%,97%{opacity:1}100%{opacity:0}}

/* ---------- o caminho do lead: campanha -> funil na Kommo -> conversões para Meta e Google ---------- */
.fluxo{--texto:oklch(0.96 0.01 250);--texto-2:oklch(0.80 0.025 255);--linha:oklch(1 0 0 / .16);--ciano:oklch(0.80 0.14 220);display:grid;gap:var(--e-3);padding:var(--e-4);border-radius:var(--r-l);background:var(--k-indigo);color:var(--texto);font:500 var(--t-xs)/1.2 var(--f-texto)}   /* o painel é sempre escuro, mesmo numa dobra clara */
.fluxo ul,.fluxo ol{display:flex;gap:6px;list-style:none;padding:0}
.fx-origens li,.fx-eventos li{flex:1;min-width:0;padding:8px 4px;border:1px solid var(--linha);border-radius:999px;text-align:center;color:var(--texto-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-kommo{position:relative;padding:10px;border-radius:var(--r-m);background:var(--k-lilas);color:var(--k-indigo)}
.fx-kommo p{margin-bottom:8px;font-weight:600}
.fx-funil li{flex:1;min-width:0;height:118px;padding:8px 4px;border:1px dashed oklch(0.25 0.1 285 / .3);border-radius:10px;text-align:center}
.fx-funil b{font-weight:600;font-size:11px}
.fx-card{position:absolute;left:14px;bottom:18px;display:grid;gap:3px;width:calc((100% - 20px - 18px) / 4 - 8px);padding:6px;border-radius:8px;background:#fff;box-shadow:0 6px 16px oklch(0.2 0.1 285 / .28);font-size:10px;line-height:1.15}
.fx-card i{width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg, #0A63FF, #00D1FF)}
.fx-card em{padding:2px 4px;border-radius:4px;background:var(--k-lilas);font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-destino{color:var(--texto-2);text-align:center}
.fx-destino b{color:var(--texto)}
@media (prefers-reduced-motion:no-preference){
  .fx-card{animation:fx-anda 10s var(--sai) infinite}                       /* o lead anda uma etapa a cada 2,5 s */
  .fx-eventos li{animation:fx-evento 10s linear infinite;animation-delay:calc(var(--i) * 2.5s)}   /* e o evento da etapa acende junto */
  .fx-origens li:first-child{animation:fx-evento 10s linear infinite}
}
@keyframes fx-anda{0%{opacity:0;translate:0 8px}4%,20%{opacity:1;translate:0}25%,45%{translate:calc(100% + 14px)}50%,70%{translate:calc(200% + 28px)}75%,94%{opacity:1;translate:calc(300% + 42px)}100%{opacity:0;translate:calc(300% + 42px)}}
@keyframes fx-evento{0%{border-color:var(--linha);color:var(--texto-2);box-shadow:none}3%,21%{border-color:var(--ciano);color:var(--texto);box-shadow:0 0 14px oklch(0.80 0.14 220 / .45)}25%,100%{border-color:var(--linha);color:var(--texto-2);box-shadow:none}}

/* ---------- blocos de texto ---------- */
.k-dupla{display:grid;gap:var(--e-6)}
.k-dupla > div > p + p{margin-top:var(--e-4)}
.k-dupla > div > p:not(.lede){color:var(--texto-2);max-width:56ch}
.k-entregas,.k-parceiros{list-style:none;padding:0;margin-top:var(--e-6);border-top:1px solid var(--linha)}
.k-entregas li,.k-parceiros li{display:grid;gap:var(--e-2);padding-block:var(--e-5);border-bottom:1px solid var(--linha)}
.k-entregas h3,.k-parceiros h3{font-size:var(--t-xl)}
.k-entregas p,.k-parceiros p{color:var(--texto-2);max-width:60ch}
.k-eventos{list-style:none;padding:0;margin-top:var(--e-5);counter-reset:ev;display:grid;gap:var(--e-3)}
.k-eventos li{counter-increment:ev;display:grid;grid-template-columns:auto minmax(0, 1fr);column-gap:var(--e-3)}
.k-eventos li::before{content:counter(ev);grid-row:1 / span 2;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--ciano);color:var(--ciano);font:600 var(--t-xs)/1 var(--f-titulo)}
.k-eventos b{font-weight:600}
.k-eventos span{color:var(--texto-2);font-size:.9375rem}
.k-nota{margin-top:var(--e-5);color:var(--texto);font-weight:500;max-width:52ch}

/* ---------- cases: o cartão e o dossiê ficam no cases.css ---------- */
.k-chips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0}
.k-chips li{padding:6px 10px;border:1px solid var(--linha);border-radius:999px;color:var(--texto);font:500 var(--t-xs)/1 var(--f-texto)}

/* ---------- Kuma One ---------- */
.k-one-logo{display:block;width:auto;height:42px;margin-bottom:var(--e-4);padding:8px 12px;border-radius:10px;background:var(--k-indigo)}   /* o logo do Kuma One é claro: precisa de fundo escuro */
.k-one-galeria{list-style:none;padding:0;margin-top:var(--e-6);display:grid;gap:var(--e-3)}
.k-one-galeria a{display:block;overflow:hidden;border-radius:var(--r-l);box-shadow:0 20px 40px oklch(0.2 0.1 285 / .25)}
.k-one-galeria img{display:block;width:100%;height:auto}

.kommo .perguntas{margin-top:var(--e-6)}
.kommo .atualizado{margin-top:var(--e-5);color:var(--texto-2);font-size:var(--t-xs)}

/* =========================================================
   telas maiores
   ========================================================= */
@media (min-width:900px){
  .k-abre .envolve{grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr);align-items:center;gap:var(--e-8);min-height:min(88svh, 780px);padding-bottom:var(--e-8)}
  .k-dupla{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);align-items:center;gap:var(--e-8)}
  .k-entregas li{grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr);align-items:baseline;gap:var(--e-7)}
  .k-parceiros{display:grid;grid-template-columns:repeat(3, 1fr);gap:var(--e-6);border-top:0}
  .k-parceiros li{border-top:1px solid var(--linha);border-bottom:0}
  .fluxo{padding:var(--e-5);font-size:var(--t-s)}
  .fx-funil li{height:150px}
  .fx-funil b{font-size:var(--t-xs)}
  .fx-card{font-size:11px;padding:8px}
  /* a primeira imagem do Kuma One grande, as outras duas empilhadas ao lado */
  .k-one-galeria{grid-template-columns:2fr 1fr}
  .k-one-galeria li:first-child{grid-row:1 / span 2}
  .k-one-galeria li:first-child a,.k-one-galeria li:first-child img{height:100%;object-fit:cover}
}
@media (max-width:899px){
  html[data-pagina="parcerias"] .trilho{display:none}   /* como na Sobre: a trilha de pontos encosta no texto */
  .k-entregas h3,.k-parceiros h3{font-size:1.25rem}
}