/* Cases (/cases), Portfólio (/portfolio) e Serviços (/servicos). Gerados por ferramentas/montar_abas.py.
   Prefixos: ab- (comum), vc- (cases), pf- (portfólio), sv- (serviços). */

/* ---------- comum ---------- */
.ab-abre{padding-top:var(--e-7)}
.ab-abre h1{font-size:var(--t-3xl);font-weight:500;line-height:1.04;letter-spacing:-.03em}
.migalhas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2);margin-bottom:var(--e-4);color:var(--texto-2);font-size:var(--t-xs)}
.migalhas a{display:inline-flex;align-items:center;min-height:var(--toque);color:var(--ciano);text-decoration:none}
.migalhas a:hover{text-decoration:underline}
[data-revela]{opacity:0;translate:0 26px;transition:opacity .9s var(--sai) calc(var(--i, 0) * 80ms), translate .9s var(--sai) calc(var(--i, 0) * 80ms)}
[data-revela].visto{opacity:1;translate:none}
.ab-tags{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ab-tags li{font:500 var(--t-xs)/1 var(--f-texto);color:var(--texto-2);border:1px solid var(--linha);border-radius:999px;padding:7px 10px;background:oklch(0.13 0.025 262 / .6)}
.ab-privado{display:inline-flex;align-items:center;gap:8px;color:var(--texto-2);font-size:var(--t-xs)}
.ab-privado .ic{width:16px;height:16px}
.ab-luz{position:absolute;inset:-30%;pointer-events:none;opacity:.55;filter:blur(26px);
  background:radial-gradient(36% 40% at 32% 38%, color-mix(in oklch, var(--cor) 80%, white), transparent 72%),
             radial-gradient(32% 36% at 68% 60%, color-mix(in oklch, var(--cor) 70%, white), transparent 72%),
             radial-gradient(42% 42% at 50% 50%, var(--cor), transparent 75%)}
@media (prefers-reduced-motion:no-preference){ .ab-luz{animation:ab-aurora 18s linear infinite} }
@keyframes ab-aurora{to{rotate:1turn}}

/* filtro: pílula com a marca que desliza; preso embaixo do topo; no celular rola de lado e o escolhido vem para o meio */
.ab-filtro{position:sticky;z-index:10;top:calc(var(--topo) + 10px);display:flex;gap:2px;width:fit-content;max-width:100%;margin-top:var(--e-6);padding:4px;
  border:1px solid var(--linha-forte);border-radius:999px;background:oklch(0.15 0.03 262 / .86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 14px 40px oklch(0 0 0 / .35);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-snap-type:x proximity}
.ab-filtro::-webkit-scrollbar{display:none}
.ab-filtro button{position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:none;
  color:var(--texto-2);font:500 var(--t-xs)/1 var(--f-texto);white-space:nowrap;cursor:pointer;scroll-snap-align:center;transition:color .3s}
.ab-filtro button span{min-width:20px;padding:3px 6px;border-radius:999px;background:oklch(1 0 0 / .07);font-size:11px;text-align:center;transition:background .3s}
.ab-filtro button:hover{color:var(--texto)}
.ab-filtro button[aria-pressed="true"]{color:#fff}
.ab-filtro button[aria-pressed="true"] span{background:oklch(1 0 0 / .2)}
.ab-filtro button:focus-visible{outline:2px solid var(--ciano);outline-offset:-2px}
.ab-marca{position:absolute;top:4px;bottom:4px;left:var(--x, 4px);width:var(--w, 0px);border-radius:999px;background:linear-gradient(120deg, var(--azul), var(--violeta));
  transition:left .5s var(--sai), width .5s var(--sai)}
@media (max-width:899px){
  .ab-filtro{width:auto;margin-inline:calc(-1 * var(--margem));padding:6px var(--margem);border-radius:0;border-width:1px 0;
    -webkit-mask:linear-gradient(90deg, transparent, #000 var(--margem), #000 calc(100% - var(--margem)), transparent);mask:linear-gradient(90deg, transparent, #000 var(--margem), #000 calc(100% - var(--margem)), transparent)}
  .ab-marca{top:6px;bottom:6px}
}
.ab-vazio{margin-top:var(--e-6);color:var(--texto-2)}
.entra{animation:ab-entra .6s var(--sai) both;animation-delay:calc(var(--k, 0) * 60ms)}
@keyframes ab-entra{from{opacity:0;translate:0 18px}}

/* ---------- Cases ---------- */
.vc-cases{list-style:none;padding:0;display:grid;gap:var(--e-5);margin-top:var(--e-7)}
.vc-caso{--rx:0deg;--ry:0deg;position:relative;isolation:isolate;display:flex;flex-direction:column;border:1px solid var(--linha);border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg, oklch(0.20 0.05 280), var(--noite) 55%);transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .5s var(--sai), border-color .5s, box-shadow .5s, opacity .9s var(--sai) calc(var(--i, 0) * 80ms), translate .9s var(--sai) calc(var(--i, 0) * 80ms)}
.vc-caso::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%), oklch(1 0 0 / .10), transparent 45%)}
.vc-caso:hover{border-color:color-mix(in oklch, var(--cor) 60%, transparent);box-shadow:0 30px 70px color-mix(in oklch, var(--cor) 26%, transparent)}
.vc-caso:hover::after{opacity:1}
.vc-caso:has(a:focus-visible){outline:2px solid var(--ciano);outline-offset:3px}
.vc-capa{position:relative;display:grid;place-items:center;margin:0;overflow:hidden;aspect-ratio:16 / 10;background:#06070d}
.vc-capa::before{content:"";position:absolute;z-index:1;inset:0;background:radial-gradient(oklch(1 0 0 / .06) 1px, transparent 1.2px) 0 0 / 12px 12px;pointer-events:none}
.vc-capa img{position:relative;z-index:1;width:auto;height:auto;max-width:62%;max-height:46%;transition:scale .8s var(--sai)}
.vc-caso:hover .vc-capa img{scale:1.07}
.vc-corpo{display:grid;gap:var(--e-3);padding:var(--e-5)}
.vc-corpo small,.pf-texto small{font:500 var(--t-xs)/1.2 var(--f-texto);color:var(--texto-2);letter-spacing:.02em}
.vc-corpo h2{font-size:var(--t-xl);font-weight:500;letter-spacing:-.02em}
.vc-corpo p{color:var(--texto-2);font-size:var(--t-s);line-height:1.55}
.vc-num{display:flex;gap:var(--e-5);margin:var(--e-2) 0 0;padding-top:var(--e-4);border-top:1px solid var(--linha)}
.vc-num dt{font:600 var(--t-2xl)/1 var(--f-titulo);background:linear-gradient(120deg, #fff, color-mix(in oklch, var(--cor) 60%, var(--ciano)));-webkit-background-clip:text;background-clip:text;color:transparent}
.vc-num dd{margin:6px 0 0;color:var(--texto-2);font-size:var(--t-xs);line-height:1.4;max-width:18ch}
.vc-corpo .link-seta{margin-top:0}
.vc-corpo .link-seta::after{content:"";position:absolute;inset:0;z-index:4}     /* o link cobre o cartão inteiro */
@media (min-width:900px){ .vc-cases{grid-template-columns:repeat(3, 1fr)} }

/* ---------- Portfólio ---------- */
.pf-lista{display:grid;gap:var(--e-8);margin-top:var(--e-7)}
.pf-proj{display:grid;gap:var(--e-6);align-items:center;scroll-margin-top:calc(var(--topo) + 90px)}
.pf-proj[hidden]{display:none}
.pf-telas{position:relative;padding:0 13% 8% 0}
.pf-janela{border:1px solid var(--linha-forte);border-radius:14px;overflow:hidden;background:#0b0f1d;box-shadow:0 40px 90px color-mix(in oklch, var(--cor) 18%, transparent), 0 0 0 1px oklch(1 0 0 / .04)}
.pf-barra{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-bottom:1px solid var(--linha);background:oklch(0.17 0.03 262)}
.pf-barra i{width:9px;height:9px;border-radius:50%;background:var(--grafite)}
.pf-barra span{min-width:0;margin-left:10px;padding:5px 12px;border-radius:999px;background:var(--breu);color:var(--texto-2);font:500 11px/1 var(--f-texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-vidro{overflow:hidden;aspect-ratio:16 / 10;background:#06070d}
.pf-vidro img{display:block;width:100%;height:auto;transition:transform var(--dur, 6s) cubic-bezier(.45, 0, .55, 1)}
.pf-telas.rolando .pf-vidro img{transform:translateY(var(--desce, 0px))}
.pf-cel{position:absolute;right:0;bottom:0;width:25%;aspect-ratio:9 / 19.5;border:5px solid #121726;border-radius:26px;overflow:hidden;background:#06070d;box-shadow:0 30px 60px oklch(0 0 0 / .55), 0 0 0 1px var(--linha-forte)}
.pf-cel .pf-vidro{aspect-ratio:auto;height:100%}
.pf-texto{display:grid;gap:var(--e-3);align-content:start}
.pf-texto h2{font-size:var(--t-2xl)}
.pf-texto p{color:var(--texto-2);line-height:1.6}
.pf-texto .pf-servs{font-size:var(--t-xs)}
.pf-servs a{color:var(--texto);text-decoration-color:var(--linha-forte);text-underline-offset:3px}
.pf-servs a:hover{color:var(--ciano)}
.pf-texto .link-seta{margin-top:var(--e-2)}
@media (min-width:900px){
  .pf-proj{grid-template-columns:1.35fr 1fr}
  .pf-proj.par .pf-telas{order:2}
}

/* ---------- Serviços ---------- */
.sv-grupo{margin-top:var(--e-7);scroll-margin-top:calc(var(--topo) + 90px)}
.sv-grupo[hidden]{display:none}
.sv-grupo h2{font-size:var(--t-xl);font-weight:500;letter-spacing:-.02em}
.sv-frase{margin-top:6px;color:var(--texto-2);font-size:var(--t-s)}
.sv-lista{list-style:none;padding:0;margin-top:var(--e-5);display:grid;gap:12px}
.sv-cartao{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:var(--e-5);border:1px solid var(--linha);border-radius:16px;background:var(--noite);
  scroll-margin-top:calc(var(--topo) + 90px);transition:border-color .4s, background .4s, opacity .9s var(--sai) calc(var(--i, 0) * 80ms), translate .9s var(--sai) calc(var(--i, 0) * 80ms)}
.sv-cartao:hover{border-color:var(--linha-forte);background:oklch(0.18 0.035 262)}
.sv-cartao:target{border-color:var(--ciano);box-shadow:0 0 0 1px var(--ciano), 0 20px 50px oklch(0.80 0.14 220 / .15)}
.sv-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:linear-gradient(140deg, oklch(0.56 0.24 262 / .35), oklch(0.62 0.22 293 / .25));border:1px solid var(--linha-forte)}
.sv-ic .ic{width:24px;height:24px;color:var(--ciano)}
.sv-cartao h3{font-size:var(--t-m);line-height:1.25}
.sv-cartao p{margin-top:6px;color:var(--texto-2);font-size:var(--t-s);line-height:1.55}
.sv-cartao .ab-tags{margin-top:var(--e-3)}
.sv-links{display:flex;flex-wrap:wrap;gap:4px var(--e-4);margin-top:var(--e-2) !important}
.sv-zap,.sv-mais{display:inline-flex;align-items:center;gap:6px;min-height:var(--toque);color:var(--ciano);font:600 var(--t-xs)/1 var(--f-texto);text-decoration:none}
.sv-mais{color:var(--texto)}
.sv-zap .ic,.sv-mais .ic{width:15px;height:15px;transition:transform .4s var(--sai)}
.sv-zap:hover .ic{transform:rotate(45deg)}
.sv-mais:hover .ic{transform:translateX(3px)}
@media (max-width:599px){ .sv-cartao{grid-template-columns:1fr;gap:var(--e-3)} }
@media (min-width:760px){ .sv-lista{grid-template-columns:repeat(2, 1fr)} }
@media (min-width:1100px){ .sv-lista{grid-template-columns:repeat(3, 1fr)} }

@media (prefers-reduced-motion:reduce){
  [data-revela]{opacity:1;translate:none;transition:none}
  .vc-caso,.pf-vidro img,.ab-marca{transition:none}
  .entra{animation:none}
}

/* ---------- Parcerias ---------- */
.pr-lista{list-style:none;padding:0;margin-top:var(--e-7);display:grid;gap:var(--e-4)}
.pr-cartao{display:grid;gap:var(--e-4);align-content:start;padding:var(--e-5);border:1px solid var(--linha);border-radius:20px;background:var(--noite);scroll-margin-top:calc(var(--topo) + 24px);
  transition:border-color .4s, background .4s, opacity .9s var(--sai) calc(var(--i, 0) * 80ms), translate .9s var(--sai) calc(var(--i, 0) * 80ms)}
.pr-cartao:hover{border-color:var(--linha-forte);background:oklch(0.18 0.035 262)}
.pr-cartao.oficial{border-color:oklch(0.70 0.16 245 / .55);background:radial-gradient(90% 60% at 100% 0, oklch(0.56 0.24 262 / .16), transparent 60%), var(--noite)}
.pr-logo{display:grid;place-items:center;height:96px;border-radius:var(--r-m);background:#fff}
.pr-logo img{display:block;width:auto;max-width:70%;height:34px}
.pr-cartao.oficial .pr-logo{padding:0;background:none}
.pr-cartao.oficial .pr-logo img{height:96px;max-width:100%}      /* o selo já vem com moldura branca; a altura em % não vale dentro da grade */
.pr-corpo{display:grid;gap:var(--e-3);align-content:start}
.pr-selo{width:max-content;padding:5px 10px;border-radius:999px;border:1px solid var(--linha-forte);color:var(--ciano);font:600 11px/1 var(--f-texto);letter-spacing:.06em;text-transform:uppercase}
.pr-corpo h2{font-size:var(--t-xl);font-weight:500;letter-spacing:-.02em}
.pr-corpo p{color:var(--texto-2);font-size:var(--t-s);line-height:1.55}
.pr-faz b{color:var(--texto);font-weight:600}
.pr-corpo .link-seta{margin-top:0}
@media (min-width:760px){ .pr-lista{grid-template-columns:repeat(2, 1fr)} }
@media (min-width:1100px){ .pr-lista{grid-template-columns:repeat(3, 1fr)} }

/* Planos · Kuma Intelligence em destaque + carrossel das outras fases (prefixo pl-) */

/* ---------- destaque ---------- */
.pl-destaque{position:relative;margin-top:var(--e-7);padding:var(--e-6);border:1px solid oklch(0.62 0.22 293 / .45);border-radius:24px;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at 100% 0%, oklch(0.42 0.27 268 / .35), transparent 60%),
             radial-gradient(90% 80% at 0% 100%, oklch(0.80 0.14 220 / .12), transparent 60%), var(--noite);
  display:grid;gap:var(--e-6)}
.pl-destaque::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--giro, 0deg), transparent 0 70%, var(--ciano) 80%, var(--violeta) 88%, transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:pl-giro 7s linear infinite}
@property --giro{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes pl-giro{to{--giro:360deg}}

.pl-selo{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;border:1px solid oklch(0.62 0.22 293 / .5);
  background:oklch(0.62 0.22 293 / .12);color:oklch(0.85 0.1 293);font-size:var(--t-xs);font-weight:500;letter-spacing:.02em}
.pl-selo .ic{width:16px;height:16px}
.pl-destaque h2{margin-top:var(--e-4);font-size:var(--t-3xl);font-weight:600;letter-spacing:-.035em;line-height:1;
  background:linear-gradient(100deg, var(--texto) 30%, var(--ciano) 65%, var(--violeta));-webkit-background-clip:text;background-clip:text;color:transparent}
.pl-fase{display:block;margin-top:var(--e-3);font-family:var(--f-titulo);font-size:var(--t-l);color:var(--texto)}
.pl-promessa{margin-top:var(--e-3);color:var(--texto-2);max-width:52ch}
.pl-itens{list-style:none;padding:0;margin-top:var(--e-5);display:grid;gap:10px}
.pl-itens li{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-s);line-height:1.5}
.pl-itens .ic{width:18px;height:18px;margin-top:2px;color:var(--ciano)}
.pl-preco{margin-top:var(--e-5);display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.pl-preco strong{font-family:var(--f-titulo);font-size:var(--t-xl);font-weight:600}
.pl-preco span{color:var(--texto-2);font-size:var(--t-xs)}
.pl-acoes{margin-top:var(--e-5);display:flex;flex-wrap:wrap;gap:var(--e-3)}

/* ciclo animado: medir → ajustar → automatizar → revisar */
.pl-ciclo{position:relative;aspect-ratio:1;width:min(100%, 360px);margin-inline:auto;align-self:center}
.pl-ciclo svg{width:100%;height:100%;overflow:visible}
.pl-ciclo .trilha{fill:none;stroke:var(--linha-forte);stroke-width:1}
.pl-ciclo .corre{fill:none;stroke:url(#pl-grad);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:90 540;animation:pl-corre 8s linear infinite}
@keyframes pl-corre{to{stroke-dashoffset:-630}}
.pl-etapa{position:absolute;translate:-50% -50%;display:grid;justify-items:center;gap:6px;font-size:var(--t-xs);color:var(--texto-2);text-align:center;width:9em}
.pl-etapa i{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;border:1px solid var(--linha-forte);background:var(--breu);color:var(--texto);
  animation:pl-acende 8s linear infinite;animation-delay:calc(var(--n) * 2s)}
.pl-etapa i .ic{width:22px;height:22px}
@keyframes pl-acende{0%,4%{border-color:var(--ciano);color:var(--ciano);box-shadow:0 0 0 4px oklch(0.80 0.14 220 / .15), 0 0 30px oklch(0.80 0.14 220 / .35)}
  22%,100%{border-color:var(--linha-forte);color:var(--texto);box-shadow:none}}
.pl-centro{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:2px}
.pl-centro b{font-family:var(--f-titulo);font-size:var(--t-xl);font-weight:600;line-height:1}
.pl-centro small{color:var(--texto-2);font-size:var(--t-xs)}

/* ---------- carrossel ---------- */
.pl-outras{margin-top:var(--e-8)}
.pl-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--e-4)}
.pl-cab p{margin-top:var(--e-3);color:var(--texto-2);max-width:52ch}
.pl-setas{display:none;gap:8px}
.pl-setas button{display:grid;place-items:center;width:var(--toque);height:var(--toque);border-radius:var(--r-m);border:1px solid var(--linha-forte);transition:border-color .3s, opacity .3s}
.pl-setas button:hover:not(:disabled){border-color:var(--ciano)}
.pl-setas button:disabled{opacity:.35;cursor:default}
.pl-setas .volta .ic{rotate:180deg}

.pl-trilho{margin-top:var(--e-6);display:flex;gap:var(--e-4);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--margem);
  padding:4px var(--margem) var(--e-4);margin-inline:calc(var(--margem) * -1);scrollbar-width:none;overscroll-behavior-x:contain;user-select:none}
.pl-trilho::-webkit-scrollbar{display:none}
.pl-cartao{flex:0 0 min(84%, 340px);scroll-snap-align:start;display:flex;flex-direction:column;padding:var(--e-5);border:1px solid var(--linha);border-radius:20px;
  background:var(--noite);transition:border-color .3s, transform .5s var(--sai)}
.pl-cartao:hover{border-color:var(--linha-forte);transform:translateY(-4px)}
.pl-num{font-family:var(--f-titulo);font-size:var(--t-xs);color:var(--ciano);letter-spacing:.08em;text-transform:uppercase}
.pl-cartao h3{margin-top:var(--e-2);font-size:var(--t-xl)}
.pl-cartao .pl-fase{margin-top:2px;font-size:var(--t-s);color:var(--texto-2)}
.pl-cartao .pl-promessa{font-size:var(--t-s);line-height:1.55}
.pl-cartao .pl-itens{margin-top:var(--e-4);gap:8px}
.pl-cartao .pl-preco{margin-top:auto;padding-top:var(--e-5)}
.pl-cartao .pl-preco strong{font-size:var(--t-l)}
.pl-cartao .botao{margin-top:var(--e-4);width:100%}

.pl-pontos{display:flex;justify-content:center;gap:8px;margin-top:var(--e-2)}
.pl-pontos button{width:8px;height:8px;border-radius:99px;background:var(--linha-forte);transition:width .4s var(--sai), background .3s}
.pl-pontos button[aria-current="true"]{width:24px;background:var(--ciano)}
/* alvo de toque maior sem crescer o ponto */
.pl-pontos button{position:relative}
.pl-pontos button::after{content:"";position:absolute;inset:-12px -6px}

@media (min-width: 900px){
  .pl-destaque{grid-template-columns:1.15fr .85fr;padding:var(--e-7)}
  .pl-setas{display:flex}
  .pl-trilho{margin-inline:0;padding-inline:0;scroll-padding-inline:0}
  .pl-cartao{flex-basis:calc((100% - 2 * var(--e-4)) / 3)}
}
@media (prefers-reduced-motion: reduce){
  .pl-destaque::before,.pl-ciclo .corre,.pl-etapa i{animation:none}
}